/* ============================================================================
   STORE — storefront grid, filters, product cards, quick-view modal
   ============================================================================ */

/* store-page chrome: solid header (overrides shared blend header) + content offset */
body{ padding-top:46px; }
.site-header{ mix-blend-mode:normal; background:var(--bg); color:var(--ink); }
.site-header a, .site-header button{ color:var(--ink); }

.store-top{ padding:36px 0 0; }
.store-head{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:24px; padding-bottom:28px; }
.store-head h1{ font-weight:700; letter-spacing:-.04em; line-height:.86; font-size:clamp(48px,11vw,160px); text-transform:uppercase; }
.store-head .meta{ text-align:right; }
.store-head .meta b{ font-size:34px; letter-spacing:-.03em; display:block; }

/* search */
.search{ display:flex; align-items:center; gap:10px; border:1px solid var(--ink); border-radius:999px; padding:10px 18px; min-width:230px; }
.search input{ border:none; outline:none; background:none; font-family:var(--mono); font-size:12px; letter-spacing:.04em; text-transform:uppercase; width:100%; }
.search input::placeholder{ color:var(--ink-soft); }
.search svg{ width:14px; height:14px; flex:none; }

/* filter bar (sticky) */
.filters{
  position:sticky; top:46px; z-index:40;
  background:var(--bg); border-block:1px solid var(--ink);
  padding:12px var(--gut);
  display:flex; gap:8px; overflow-x:auto; scrollbar-width:none;
}
.filters::-webkit-scrollbar{ display:none; }
.chip{
  flex:none; display:inline-flex; align-items:center; gap:8px;
  padding:9px 15px; border:1px solid var(--line-2); border-radius:999px;
  font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  white-space:nowrap; transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.chip .n{ opacity:.5; font-size:9px; }
.chip:hover{ border-color:var(--ink); }
.chip.active{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
.chip.active .n{ opacity:.6; }
.chip.active[data-cat="all"]{ background:var(--red); border-color:var(--red); }

/* result count strip */
.result-bar{ display:flex; justify-content:space-between; align-items:center; padding:18px var(--gut) 6px; }
.result-bar .mono{ color:var(--ink-soft); }

/* ------------------------------------------------------------- product grid */
.grid{
  display:grid; gap:1px; background:var(--line);
  grid-template-columns:repeat(auto-fill, minmax(min(100%,290px), 1fr));
  border:1px solid var(--line); margin:6px var(--gut) 0;
}
.card{
  background:var(--bg); position:relative; cursor:pointer;
  display:flex; flex-direction:column;
  transition:background .3s var(--ease);
}
.card:hover{ background:var(--stage); }
.card__top{
  position:relative; aspect-ratio:1/1;
  display:grid; place-items:center; overflow:hidden;
  background:radial-gradient(120% 100% at 50% 12%, #f6f5f2, var(--stage));
}
.card__top img{
  width:62%; transition:transform .5s var(--ease), filter .5s var(--ease);
  filter:drop-shadow(0 20px 18px rgba(20,18,14,.16));
  transform:rotate(var(--tilt,0deg)) scale(var(--rscale,1));
}
.card:hover .card__top img{ transform:translateY(-8px) scale(calc(var(--rscale,1) * 1.06)) rotate(calc(var(--tilt,0deg) - 3deg)); }
/* organic resting variety so repeated renders never look stamped */
.card:nth-of-type(4n)   { --tilt:3deg;   --rscale:.97; }
.card:nth-of-type(4n+1) { --tilt:-2.5deg;--rscale:1.02; }
.card:nth-of-type(4n+2) { --tilt:1.5deg; --rscale:1; }
.card:nth-of-type(4n+3) { --tilt:-1deg;  --rscale:.99; }

.card__code{ position:absolute; top:12px; left:12px; font-family:var(--mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); }
.card__stock{ position:absolute; top:12px; right:12px; display:flex; align-items:center; gap:5px; font-family:var(--mono); font-size:9px; letter-spacing:.06em; text-transform:uppercase; }
.card__stock .d{ width:6px; height:6px; border-radius:50%; background:var(--red); }
.card__add{
  position:absolute; bottom:12px; right:12px; z-index:2;
  opacity:0; transform:translateY(6px);
  border:1px solid var(--ink); border-radius:999px; background:var(--bg);
  padding:7px 12px; font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  transition:opacity .3s var(--ease), transform .3s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.card:hover .card__add, .card:focus-within .card__add{ opacity:1; transform:none; }
.card__add:hover{ background:var(--red); color:#fff; border-color:var(--red); }
@media (hover:none){ .card__add{ opacity:1; transform:none; } }   /* always visible on touch */

.card__info{ padding:16px 16px 18px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:12px; flex:1; }
.card__name{ font-weight:600; font-size:18px; letter-spacing:-.02em; line-height:1.06; }
.card__tags{ display:flex; flex-wrap:wrap; gap:5px; }
.card__tags span{ font-family:var(--mono); font-size:9px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); border:1px solid var(--line); border-radius:999px; padding:3px 8px; }
.card__foot{ margin-top:auto; display:flex; justify-content:space-between; align-items:flex-end; gap:10px; }
.card__price b{ font-family:var(--mono); font-size:16px; letter-spacing:0; }
.card__price small{ display:block; font-family:var(--mono); font-size:9px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.05em; margin-bottom:2px; }
.card__doses{ font-family:var(--mono); font-size:9.5px; color:var(--ink-soft); text-transform:uppercase; text-align:right; }

.empty{ grid-column:1/-1; padding:80px 20px; text-align:center; }
.empty .mono{ color:var(--ink-soft); }

@media (max-width:720px){
  .store-head .meta{ text-align:left; }
}