/* Search as an icon in the header, and filters as chips.

   Before: a labelled search field and a checkbox sat in a row inside the shelf,
   about 110px of a phone screen given permanently to two controls most visitors
   never touch. The magnifier costs nothing until it is wanted, and the chip is
   what every shop this one competes with uses for a filter. */
.searchbtn{--hit-expanded:1;position:relative;display:grid;place-items:center;width:40px;height:40px;flex:none;padding:0;
  border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--cream);
  cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.searchbtn::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%}
.searchbtn svg{width:19px;height:19px}
.searchbtn:hover,.searchbtn[aria-expanded="true"]{background:rgba(14,58,44,.12);
  border-color:var(--gold);color:var(--gold-ink)}
.searchbtn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.searchbar{position:fixed;inset-inline:0;top:var(--hdr-h,68px);z-index:59;
  background:rgba(251,244,232,.97);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);padding:9px 20px}
.searchbar[hidden]{display:none!important}
.searchbar-in{max-width:1240px;margin:0 auto;display:flex;align-items:center;gap:10px}
.sb-ic{display:grid;place-items:center;color:#ac9a85;flex:none}
/* The in-stock filter used to be a chip under the Dates heading, beside a count.
   The owner cut both — the count repeated what the shelf already showed, and a
   lone chip under a heading is a section that does not earn its line. Searching
   and filtering are the same act, so the filter lives in the bar with the field:
   press it and it lights, and it cannot be left on invisibly, because closing the
   bar clears it. */
.sb-filter{flex:none;display:grid;place-items:center;width:38px;height:38px;
  border:1px solid var(--line);border-radius:999px;background:transparent;color:#ac9a85;
  --hit-expanded:1;position:relative;transition:color .3s,border-color .3s,background .3s}
.sb-filter::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:999px}
.sb-filter svg{width:17px;height:17px}
.sb-filter[aria-pressed="true"]{color:#2a1a0c;background:var(--gold);border-color:var(--gold)}
.sb-ic svg{width:18px;height:18px}
#siteSearch{flex:1;min-width:0;border:0;background:none;color:var(--cream);
  font:inherit;font-size:.95rem;padding:10px 0;min-height:44px}
#siteSearch::placeholder{color:#ac9a85;opacity:1}
#siteSearch:focus{outline:none}
.searchbar:focus-within{border-bottom-color:var(--gold)}
.sb-x{display:grid;place-items:center;width:44px;height:44px;flex:none;padding:0;
  border:0;background:none;color:#ac9a85;cursor:pointer}
.sb-x svg{width:17px;height:17px}
.sb-x:hover{color:var(--cream)}
.sb-x:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:8px}

/* the Home chip: same rail, same chip, just an icon so it reads before the
   word does */
.shop-cat-home svg{flex:none;opacity:.85}

/* the filter panel — opens under the bar, in the bar's own frame, so search
   and filter never feel like two different tools */
#filterBtn{position:relative}
.filter-badge{position:absolute;top:-2px;inset-inline-end:-2px;min-width:15px;height:15px;padding:0 3px;
  border-radius:999px;background:var(--gold);color:var(--on-fill);font:700 .62rem/15px var(--mono);text-align:center}
.filterpanel{max-width:1240px;margin:10px auto 0;border-top:1px solid var(--line);padding-top:12px}
.filterpanel[hidden]{display:none!important}
.filter-in{display:flex;flex-wrap:wrap;gap:18px 26px}
.filter-group{display:flex;flex-direction:column;gap:8px;min-width:150px}
.filter-label{font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:#ac9a85}
.filter-row{display:flex;flex-wrap:wrap;gap:8px}
.filter-chip{appearance:none;background:transparent;border:1px solid var(--line);color:var(--muted);
  border-radius:999px;padding:6px 14px;font:inherit;font-size:.82rem;cursor:pointer;min-height:36px;
  transition:background .2s,border-color .2s,color .2s}
.filter-chip:hover{color:var(--cream);border-color:rgba(14,58,44,.4)}
.filter-chip[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--on-fill);font-weight:600}
.filter-chip:focus-visible{outline:2px solid var(--gold-2);outline-offset:2px}
.filter-price{display:flex;align-items:center;gap:8px}
.filter-price input{width:78px;border:1px solid var(--line);background:transparent;color:var(--cream);
  border-radius:8px;padding:7px 8px;font:inherit;font-size:.85rem}
.filter-price input:focus{outline:none;border-color:var(--gold)}
.filter-price span{color:#ac9a85;font-size:.82rem}
.filter-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;
  padding-top:12px;border-top:1px solid var(--line)}
.filter-clear{appearance:none;background:none;border:0;color:var(--gold-ink);font:inherit;font-size:.85rem;
  cursor:pointer;padding:6px 0;text-decoration:underline;text-underline-offset:3px}
.filter-clear:disabled{color:#6b5c47;text-decoration:none;cursor:default}
.filter-count{font-size:.78rem;color:#ac9a85}
@media(max-width:560px){
  .filter-in{gap:16px}
  .filter-group{min-width:0;width:100%}
}

/* the filter chip — 40px of ink, 44px of target */
@media(max-width:560px){
  .sec-label h2{font-size:1.5rem;line-height:1.2}
  html[dir="rtl"] .sec-label h2{font-size:1.42rem;line-height:1.45}
  .sweetband h3,.ritual-grid h3{font-size:1.5rem;line-height:1.25}
  html[dir="rtl"] .sweetband h3,html[dir="rtl"] .ritual-grid h3{font-size:1.42rem;line-height:1.5}
  .searchbar{padding:7px 16px}
  /* four controls no longer fit with the word "Cart" spelled out beside them */
  .cartlink span[data-i18n="nav.cart"],.cartlink .sep{display:none}
  .cartlink{gap:6px}
  header>div:last-of-type{gap:8px!important}
  .searchbtn{width:38px;height:38px}
  /* The row is logo + controls with a clamped gap between. A fourth control tips
     it past the edge at 390, so the gap tightens and the logo's second wordmark
     steps aside — the palm mark and palmir still say who this is. */
  header{gap:10px!important}
  .logo-txt .ar{display:none}
}
/* The wordmark used to step aside below 400px, which took it off the iPhone 15
   and 16 as well — the most common screens this shop will meet. With the cart
   reduced to its icon and the gaps tightened, the row now fits palmir at 390 with
   nothing over the edge, measured in both languages. Only at 380 and below — the
   SE and the minis — does the palm mark carry the brand alone; it is still the
   link home, and palmir is written across the page below it. */
@media(max-width:380px){
  .logo-txt{display:none}
  .langbtn{padding-inline:9px;font-size:.72rem}
}