/* Shop navigation — search, filters, sort. Lane F 2026-09-20.
   Lives on /shop/, the category archives and product search. Everything is under .shop-nav
   except the pill floor and the section scroll offset, which the sticky bar makes necessary.
   Tokens come from mockup.css / site-counter.css (--paper, --ink, --meat, --text).
   Every control is 44px tall; the rows are reserved at 44px so nothing shifts when the live
   count or the Clear button changes. */

.shop-nav{position:sticky;top:0;z-index:20;margin:6px 0 14px;padding:8px 0;
  background:var(--paper,#efece4);border-bottom:1px solid rgba(34,29,26,.18);
  box-shadow:0 10px 18px -14px rgba(34,29,26,.4)}
.shop-nav__in{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px}

/* the form: label row (label · live count · Clear) over the field row (input · Search · Filters) */
.shop-nav__search{display:flex;flex:1 1 340px;flex-direction:column;gap:4px;margin:0;min-width:0}
.shop-nav__top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;min-height:44px}
.shop-nav__label{font:700 .78rem/1.2 var(--text);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft,#56504a)}
.shop-nav__count{display:inline-flex;align-items:center;flex:1 1 auto;margin:0;font:700 .84rem/1.3 var(--text);color:var(--ink,#1c1916)}
.shop-nav__field{display:flex;gap:8px;min-width:0}
.shop-nav__input{flex:1 1 auto;min-width:0;height:44px;margin:0;padding:0 12px;font:500 16px/1 var(--text);color:var(--ink,#1c1916);
  background:#fff;border:1px solid rgba(34,29,26,.4);border-radius:3px;-webkit-appearance:none;appearance:none}
.shop-nav__input::placeholder{color:#6a645d;opacity:1}

/* buttons: the site's button language — tracked uppercase, heavy, 3px corner, 44px floor */
.shop-nav__btn,.shop-nav__toggle,.shop-nav__clear{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  min-height:44px;margin:0;padding:0 16px;font:900 .8rem/1 var(--text);letter-spacing:.08em;text-transform:uppercase;
  border-radius:3px;cursor:pointer;white-space:nowrap}
.shop-nav__btn{background:var(--meat,#a41623);color:var(--paper,#efece4);border:1px solid var(--meat,#a41623)}
.shop-nav__btn:hover{background:var(--meat-deep,#7a101a);border-color:var(--meat-deep,#7a101a)}
.shop-nav__toggle,.shop-nav__clear{background:var(--paper-2,#e4dfd3);color:var(--ink,#1c1916);border:1px solid rgba(34,29,26,.35)}
.shop-nav__toggle:hover,.shop-nav__clear:hover{background:var(--ink,#1c1916);color:var(--paper,#efece4);border-color:var(--ink,#1c1916)}
.shop-nav__toggle[aria-expanded="true"]{background:var(--ink,#1c1916);color:var(--paper,#efece4);border-color:var(--ink,#1c1916)}
.shop-nav__clear{padding:0 14px;font-size:.76rem}

/* the filter / sort panel: its own row */
.shop-nav__filters{display:flex;flex:1 1 100%;flex-wrap:wrap;align-items:center;gap:8px 12px;min-width:0}
.shop-nav__opt{display:inline-flex;align-items:center;gap:8px;font:700 .74rem/1.2 var(--text);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft,#56504a)}
.shop-nav__select{height:44px;max-width:100%;margin:0;padding:0 34px 0 12px;font:700 14px/1 var(--text);letter-spacing:0;text-transform:none;color:var(--ink,#1c1916);
  background:var(--paper-2,#e4dfd3) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%231c1916' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right 12px center;
  border:1px solid rgba(34,29,26,.35);border-radius:3px;-webkit-appearance:none;appearance:none;cursor:pointer}
.shop-nav__basis{flex:1 1 220px;margin:0;font:.76rem/1.35 var(--text);color:var(--ink-soft,#56504a)}

/* archive pages: the form and the way back */
.shop-nav--archive .shop-back{margin:0}
.shop-nav--archive .shop-back a{display:inline-flex;align-items:center;min-height:44px}
.shop-empty{margin:28px 0 0;max-width:60ch}
.shop-empty__lead{font-size:1.15rem;font-weight:700}
.shop-empty a{font-weight:700;color:var(--meat,#a41623)}

/* focus and states */
.shop-nav :focus-visible{outline:3px solid var(--meat,#a41623);outline-offset:2px}
.sn-hide{display:none!important}
.shop-nav.is-active .shop-nav__count{color:var(--meat,#a41623)}

/* the jump pills are navigation: 44px floor on every pointer (woo.css only floors them for a coarse one) */
.shop-pills{margin:0 0 8px}
.shop-pills a{display:inline-flex;align-items:center;min-height:44px}
/* a jumped-to section lands under the sticky bar unless the offset is reserved; the JS measures the bar */
.shop-section{scroll-margin-top:calc(var(--sn-bar-h,112px) + 12px)}

/* JS off: the plain form and the pills; the panel cannot work so it is not shown */
html:not(.sn-js) .shop-nav__toggle,html:not(.sn-js) .shop-nav__filters{display:none}

@media (max-width:767px){
  html.sn-js .shop-nav__filters:not(.is-open){display:none}
  .shop-nav__filters{padding-top:2px}
  .shop-nav__opt{flex:1 1 100%;flex-direction:column;align-items:stretch;gap:4px}
  .shop-nav__select{width:100%;min-width:0}
}
@media (max-width:400px){
  .shop-nav__btn,.shop-nav__toggle{padding:0 11px;font-size:.74rem}
}
@media (min-width:768px){
  /* one 44px row: label · input+Search · count · Clear; the filters take the next row */
  .shop-nav__toggle{display:none}
  .shop-nav__search{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 14px}
  .shop-nav__top{display:contents}
  .shop-nav__label{order:0}
  .shop-nav__field{order:1;flex:1 1 260px;max-width:520px}
  .shop-nav__count{order:2;flex:0 1 auto;min-height:44px}
  .shop-nav__clear{order:3}
}
@media (prefers-reduced-motion:no-preference){
  .shop-nav__btn,.shop-nav__toggle,.shop-nav__clear,.shop-nav__select,.shop-nav__input{transition:background-color .14s ease,border-color .14s ease,color .14s ease}
}