/* =========================================================================================================================
   ASSURION LABS (wellness edition) - SHOP LAYER
   Owner: B2 catalog. Loads after main.css and shell.css, on every front-end page (a product card can appear anywhere).
   Product card v2 (.pc / pc-*), shop grid + toolbar + filters (shop-*), archive pages, wishlist page (shop-wl-*, pc-skel).
   Tokens only (var(--x)); no second accent, no pink, no gradients on buttons, no pill buttons, no `transition: all`.
   Breakpoints: 1100 / 900 (filters become a drawer) / 640 (two-column grid) / 480. No horizontal scroll at 375px.
   ========================================================================================================================= */

:root {
  --shop-ease: var(--al-ease, cubic-bezier(.2, 0, 0, 1));
  --shop-sticky-top: calc(var(--header-h, 125px) + 16px);
  --shop-sidebar: 248px;
}

/* ─────────────────────────────────────────
   0. UTILITIES
   ───────────────────────────────────────── */
.shop-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.shop-grid [hidden],
.shop-wl [hidden],
.pc[hidden] { display: none !important; }

/* ─────────────────────────────────────────
   1. PRODUCT GRID (rails, shop, related, wishlist)
   Four columns on the wide container, three on tablets, two from phones up to 640px.
   ───────────────────────────────────────── */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 224px), 1fr));
  gap: 20px;
  align-items: stretch;
}

/* ─────────────────────────────────────────
   2. PRODUCT CARD v2
   ───────────────────────────────────────── */
.pc {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition-property: border-color, box-shadow, transform, opacity;
  transition-duration: .28s;
  transition-timing-function: var(--shop-ease);
}
@media (hover: hover) {
  .pc:hover {
    border-color: var(--border-cyan);
    box-shadow: var(--shadow-card), 0 0 32px var(--cyan-dim);
    transform: translateY(-3px);
  }
  .pc:hover .pc-img { transform: scale(1.045); }
  .pc:hover .pc-link { color: var(--cyan); }
}

/* media */
.pc-media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--bg-3);
}
.pc-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  outline: 1px solid var(--border);
  outline-offset: -1px;
  transition-property: transform, opacity, filter;
  transition-duration: .5s, .3s, .3s;
  transition-timing-function: var(--shop-ease);
}
.pc-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--text-3);
}
.pc-placeholder svg { width: 44px; height: 44px; opacity: .6; }
.pc.is-out-of-stock .pc-img { opacity: .5; filter: grayscale(.6); }

/* badges: solid cyan · outline cyan · white · danger (Sale). Cyan-only palette. */
.pc-badges {
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  max-width: calc(100% - 64px);
  pointer-events: none;
}
.pc-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: var(--r-xs);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.pc-badge--solid { background: var(--cyan); color: var(--bg); }
.pc-badge--outline {
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 74%, transparent);
  border-color: var(--border-cyan);
  color: var(--cyan);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.pc-badge--white { background: var(--white); color: var(--bg); }
.pc-badge--sale { background: var(--danger); color: var(--bg); }

.pc-rank {
  position: absolute;
  z-index: 2;
  left: 10px;
  bottom: 10px;
  display: grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border: 1px solid var(--border-cyan);
  border-radius: var(--r-sm);
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  pointer-events: none;
}

/* wishlist heart: both icons stay in the DOM and cross-fade (scale .25 -> 1, blur 4px -> 0) so the toggle can be interrupted */
.al-wish-btn { cursor: pointer; }
.pc-wish {
  position: absolute;
  z-index: 3;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 66%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--text-2);
  transition-property: color, border-color, background-color, transform;
  transition-duration: .2s;
  transition-timing-function: var(--shop-ease);
}
.pc-wish-icon {
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  transition-property: opacity, transform, filter;
  transition-duration: .22s;
  transition-timing-function: var(--shop-ease);
}
.pc-wish-icon svg { width: 20px; height: 20px; }
.pc-wish-on { color: var(--cyan); opacity: 0; transform: scale(.25); filter: blur(4px); }
.pc-wish[aria-pressed="true"] { color: var(--cyan); border-color: var(--border-cyan); }
.pc-wish[aria-pressed="true"] .pc-wish-off { opacity: 0; transform: scale(.25); filter: blur(4px); }
.pc-wish[aria-pressed="true"] .pc-wish-on { opacity: 1; transform: none; filter: blur(0); }
@media (hover: hover) {
  .pc-wish:hover { color: var(--cyan); border-color: var(--border-cyan); }
}
.pc-wish:active { transform: scale(.96); }
.pc-wish:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
/* other heart buttons (product page) that hold a single icon */
.al-wish-btn:not(.pc-wish)[aria-pressed="true"] > svg { fill: currentColor; }

/* body */
.pc-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding: 14px 16px 16px;
}

/* rating: real stars once reviews exist, muted outline stars + "New" until then (never a made-up number) */
.pc-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 16px;
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--text-3);
}
.pc-stars { display: inline-flex; gap: 2px; }
.pc-star { display: block; flex: none; width: 14px; height: 14px; }
.pc-star path { stroke-linejoin: round; }
.pc-star.is-on path { fill: var(--cyan); stroke: var(--cyan); stroke-width: 1; }
.pc-star.is-off path { fill: none; stroke: var(--text-3); stroke-width: 1.4; }
.pc-star-half { position: relative; display: block; width: 14px; height: 14px; }
.pc-star-half .pc-star { position: absolute; inset: 0; }
.pc-star-half .pc-star.is-half { clip-path: inset(0 50% 0 0); }
.pc-rating--none .pc-star.is-off { opacity: .5; }
.pc-rating-num { color: var(--text); font-variant-numeric: tabular-nums; }
.pc-rating-count { font-variant-numeric: tabular-nums; }
.pc-rating--md { font-size: 12px; }
.pc-rating--md .pc-star,
.pc-rating--md .pc-star-half { width: 16px; height: 16px; }
.pc-rating--lg { font-size: 13px; gap: 8px; }
.pc-rating--lg .pc-star,
.pc-rating--lg .pc-star-half { width: 20px; height: 20px; }

.pc-name {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .02em;
  color: var(--white);
  text-wrap: balance;
  overflow-wrap: anywhere;
}
/* the name link stretches over the whole card; heart and button sit above it */
.pc-link { color: inherit; text-decoration: none; transition: color .2s var(--shop-ease); }
.pc-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.pc-link:focus-visible { outline: none; }
.pc-link:focus-visible::after { outline: 2px solid var(--cyan); outline-offset: -2px; }

.pc-benefit {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  margin: 0 0 10px;
  overflow: hidden;
  font-size: 15px;
  line-height: 1.4;
  color: var(--text-2);
  text-wrap: pretty;
}
.pc-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 0 0 12px;
}
.pc-size {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--text-3);
}
.pc-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 22px;
  padding: 0 7px;
  border: 1px solid var(--border-cyan);
  border-radius: var(--r-xs);
  background: var(--cyan-dim);
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .06em;
  line-height: 1.2;
  text-transform: uppercase;
}
.pc-chip svg { flex: none; width: 12px; height: 12px; }

/* price + action */
.pc-foot {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: auto;
  padding-top: 4px;
}
.pc-price-row { min-height: 20px; font-size: 17px; line-height: 1.2; }
.pc-price {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  font-variant-numeric: tabular-nums;
}
.pc-price-now { font-family: var(--font-mono); font-weight: 700; color: var(--white); }
.pc-price.has-was .pc-price-now { color: var(--cyan); }
.pc-price-was {
  font-family: var(--font-mono);
  font-size: .78em;
  font-weight: 400;
  color: var(--text-3);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.pc-price-from {
  font-family: var(--font-mono);
  font-size: .62em;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.pc .pc-cta {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 40px;
  padding-top: 0;
  padding-bottom: 0;
  transition-property: background-color, color, border-color, box-shadow, transform, opacity;
  transition-duration: .2s;
  transition-timing-function: var(--shop-ease);
}
.pc .pc-cta.btn:hover { transform: none; }
.pc .pc-cta.btn:active { transform: scale(.96); }
.pc-cta--soldout { opacity: .75; }
.pc-cta-done { display: none; }
.pc-cta.added .pc-cta-label { display: none; }
.pc-cta.added .pc-cta-done { display: inline; }
.pc-cta.loading { opacity: .65; pointer-events: none; }
.pc .added_to_cart { display: none; } /* WooCommerce's "View cart" link: the cart drawer opens instead */

/* compact variant: image, badge, name, price, quick add */
.pc--compact .pc-body { padding: 12px 14px 14px; }
.pc--compact .pc-name { font-size: 12px; }
.pc--compact .pc-price-row { font-size: 15px; }

/* enter / leave */
@keyframes pc-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.pc.is-entering {
  animation: pc-in .3s var(--shop-ease) both;
  animation-delay: calc(var(--i, 0) * 28ms);
}
.pc.is-leaving {
  opacity: 0;
  transform: scale(.97);
  pointer-events: none;
}

/* loading skeleton (wishlist page) */
@keyframes shop-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}
.pc-skel {
  overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  animation: shop-pulse 1.6s ease-in-out infinite;
}
.pc-skel-media { aspect-ratio: 1 / 1; background: var(--bg-3); }
.pc-skel-body { display: grid; gap: 10px; padding: 16px; }
.pc-skel-line { display: block; height: 12px; border-radius: var(--r-xs); background: var(--bg-3); }
.pc-skel-line--short { width: 60%; }
.pc-skel-btn { display: block; height: 40px; margin-top: 6px; border-radius: var(--r-md); background: var(--bg-3); }

/* ─────────────────────────────────────────
   3. SHOP GRID: toolbar
   ───────────────────────────────────────── */
.shop-grid { scroll-margin-top: calc(var(--header-h, 125px) + 8px); }
@keyframes shop-unhide { to { opacity: 1; } }
.shop-grid.is-hydrating .shop-results {
  opacity: 0;
  animation: shop-unhide .01s linear 2.5s forwards; /* if filters.js never runs, show everything after a moment */
}

.shop-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin: 0 0 20px;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--border);
}
.shop-tally {
  order: 3;
  flex: 1 0 100%;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.shop-tally:focus { outline: none; }
.shop-grid:not(.has-filters) .shop-tally { order: 1; flex: 1 1 auto; }
.shop-grid:not(.has-filters) .shop-sortbox { flex: 0 1 260px; }
.shop-filter-toggle {
  order: 1;
  position: relative;
  min-height: 40px;
  gap: 10px;
}
.shop-filter-toggle svg { width: 18px; height: 18px; }
.shop-filter-badge {
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--cyan);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.shop-sortbox {
  order: 2;
  display: flex;
  flex: 1 1 0;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.shop-sort-label {
  flex: none;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}
.shop-sortsel {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: 40px;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 15px;
}

@media (min-width: 901px) {
  .shop-bar { flex-wrap: nowrap; }
  .shop-tally { order: 1; flex: 1 1 auto; }
  .shop-filter-toggle { display: none; }
  .shop-sortbox { order: 2; flex: 0 0 auto; }
  .shop-sortsel { flex: none; width: auto; min-width: 210px; }
}
@media (max-width: 640px) {
  .shop-sort-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}

/* ─────────────────────────────────────────
   4. SHOP GRID: layout, filters sidebar / drawer
   ───────────────────────────────────────── */
.shop-body { display: block; }
.shop-results { min-width: 0; }

/* drawer (phones and tablets) */
.shop-filters {
  position: fixed;
  z-index: 1005;
  top: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: min(92vw, 400px);
  background: var(--bg-2);
  border-right: 1px solid var(--border-cyan);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  box-shadow: var(--shadow-lg);
  transform: translateX(-102%);
  visibility: hidden;
  transition: transform .32s var(--shop-ease), visibility 0s linear .32s;
}
.shop-grid.is-filters-open .shop-filters {
  transform: none;
  visibility: visible;
  transition: transform .32s var(--shop-ease), visibility 0s;
}
.shop-filters-backdrop {
  position: fixed;
  z-index: 1004;
  inset: 0;
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 74%, transparent);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s var(--shop-ease), visibility 0s linear .25s;
}
.shop-grid.is-filters-open .shop-filters-backdrop {
  opacity: 1;
  visibility: visible;
  transition: opacity .25s var(--shop-ease), visibility 0s;
}
html.shop-lock { overflow: hidden; }

.shop-filters-head {
  display: flex;
  flex: none;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 12px 18px;
  border-bottom: 1px solid var(--border);
}
.shop-filters-title {
  margin: 0 auto 0 0;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--white);
}
.shop-filters-close {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-2);
  transition-property: color, border-color, background-color, transform;
  transition-duration: .2s;
  transition-timing-function: var(--shop-ease);
}
.shop-filters-close svg { width: 20px; height: 20px; }
.shop-filters-close:hover { color: var(--cyan); border-color: var(--border-cyan); background: var(--cyan-dim); }
.shop-filters-close:active { transform: scale(.96); }

.shop-filters-scroll {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--bg-5) transparent;
}
.shop-filters-foot {
  display: grid;
  flex: none;
  gap: 4px;
  padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
  background: var(--bg-2);
}
.shop-apply { min-height: 44px; }

.shop-clear-link {
  min-height: 40px;
  padding: 0 8px;
  border: 0;
  background: none;
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-transform: uppercase;
  transition-property: color, opacity;
  transition-duration: .2s;
  transition-timing-function: var(--shop-ease);
}
.shop-clear-link:hover { color: var(--white); }
.shop-clear-link:disabled { opacity: .4; text-decoration: none; cursor: default; }
.shop-clear-link:disabled:hover { color: var(--cyan); }
.shop-clear-link--head { display: none; }

/* facets */
.shop-facet { border-bottom: 1px solid var(--border); }
.shop-facet:last-child { border-bottom: 0; }
.shop-facet-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  list-style: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.shop-facet-head::-webkit-details-marker { display: none; }
.shop-facet-head::marker { content: ""; }
.shop-facet-title {
  flex: 1;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--white);
}
.shop-facet-badge {
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--cyan);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.shop-facet-chev {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--text-3);
  transition: transform .25s var(--shop-ease), color .2s var(--shop-ease);
}
.shop-facet-head:hover .shop-facet-chev { color: var(--cyan); }
.shop-facet[open] > .shop-facet-head .shop-facet-chev { transform: rotate(180deg); }
.shop-facet-body { display: grid; padding: 0 0 14px; }

.shop-opt {
  position: relative;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding-left: calc(var(--depth, 0) * 18px);
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.25;
  cursor: pointer;
  transition: color .2s var(--shop-ease);
}
.shop-opt:hover { color: var(--white); }
.shop-opt-input {
  position: absolute;
  top: 50%;
  left: calc(var(--depth, 0) * 18px);
  width: 18px;
  height: 18px;
  margin: 0;
  opacity: 0;
  transform: translateY(-50%);
  pointer-events: none;
}
.shop-opt-box {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid var(--text-3);
  border-radius: var(--r-xs);
  color: transparent;
  transition-property: background-color, border-color, color;
  transition-duration: .15s;
  transition-timing-function: var(--shop-ease);
}
.shop-opt-box svg { width: 12px; height: 12px; stroke-width: 3; }
.shop-opt:hover .shop-opt-box { border-color: var(--cyan); }
.shop-opt-input:checked + .shop-opt-box { background: var(--cyan); border-color: var(--cyan); color: var(--bg); }
.shop-opt-input:focus-visible + .shop-opt-box { outline: 2px solid var(--cyan); outline-offset: 2px; }
.shop-opt-input:checked ~ .shop-opt-label { color: var(--white); font-weight: 600; }
.shop-opt-label { min-width: 0; overflow-wrap: anywhere; }
.shop-opt-count {
  min-width: 2ch;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.shop-opt.is-zero { opacity: .5; cursor: default; }
.shop-opt.is-zero:hover { color: var(--text-2); }
.shop-opt.is-zero:hover .shop-opt-box { border-color: var(--text-3); }
.shop-opt--rating .shop-opt-box { border-radius: 50%; }
.shop-opt--rating .shop-opt-box svg { display: none; }
.shop-opt--rating .shop-opt-box::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bg);
  opacity: 0;
  transform: scale(.25);
  transition: opacity .15s var(--shop-ease), transform .15s var(--shop-ease);
}
.shop-opt--rating .shop-opt-input:checked + .shop-opt-box::after { opacity: 1; transform: none; }
.shop-opt--extra { display: none; }
.shop-facet-body.is-expanded .shop-opt--extra { display: grid; }
.shop-facet-more {
  justify-self: start;
  min-height: 40px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: color .2s var(--shop-ease);
}
.shop-facet-more:hover { color: var(--white); }

/* desktop: sticky sidebar */
@media (min-width: 901px) {
  .shop-grid.has-filters .shop-body {
    display: grid;
    grid-template-columns: var(--shop-sidebar) minmax(0, 1fr);
    gap: 32px;
    align-items: start;
  }
  .shop-filters {
    position: sticky;
    z-index: auto;
    top: var(--shop-sticky-top);
    bottom: auto;
    left: auto;
    width: auto;
    max-height: calc(100vh - var(--shop-sticky-top) - 16px);
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: none;
    transform: none;
    visibility: visible;
    transition: none;
  }
  .shop-filters-backdrop { display: none; }
  .shop-filters-head { padding: 14px 18px 8px; border-bottom: 0; }
  .shop-filters-close,
  .shop-filters-foot { display: none; }
  .shop-clear-link--head { display: inline-flex; align-items: center; min-height: 32px; padding: 0; }
  .shop-filters-scroll { padding-bottom: 6px; }
}

/* active-filter chips (the row opens and closes smoothly instead of popping in) */
.shop-chips-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .25s var(--shop-ease);
}
.shop-chips-wrap.is-open { grid-template-rows: 1fr; }
.shop-chips-clip { min-height: 0; overflow: hidden; }
.shop-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 0 0 16px;
}
.shop-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 10px 0 12px;
  border: 1px solid var(--border-cyan);
  border-radius: var(--r-sm);
  background: var(--cyan-dim);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  transition-property: border-color, background-color, transform;
  transition-duration: .2s;
  transition-timing-function: var(--shop-ease);
}
.shop-chip::before { content: ""; position: absolute; inset: -2px; } /* 40px hit area */
.shop-chip:hover { border-color: var(--cyan); }
.shop-chip:active { transform: scale(.96); }
.shop-chip:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }
.shop-chip-x { flex: none; width: 14px; height: 14px; color: var(--cyan); }
.shop-chip-clear {
  min-height: 36px;
  padding: 0 6px;
  border: 0;
  background: none;
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-transform: uppercase;
  transition: color .2s var(--shop-ease);
}
.shop-chip-clear:hover { color: var(--white); }
.shop-chip-clear:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }

/* empty states (no matches, nothing to list, wishlist) */
.shop-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 560px;
  margin: 8px auto 0;
  padding: 56px 24px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  text-align: center;
}
.shop-empty-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid var(--border-cyan);
  border-radius: var(--r-lg);
  background: var(--cyan-dim);
  color: var(--cyan);
}
.shop-empty-icon svg { width: 26px; height: 26px; }
.shop-empty-title {
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-size: clamp(17px, 2.4vw, 20px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--white);
  text-wrap: balance;
}
.shop-empty-text { max-width: 40ch; margin: 0; color: var(--text-2); text-wrap: pretty; }
.shop-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
.shop-empty .btn { min-height: 44px; }
.shop-page-note { margin: 28px 0 0; font-size: 15px; color: var(--text-3); text-align: center; }

/* ─────────────────────────────────────────
   5. ARCHIVE PAGES (shop, category, search)
   ───────────────────────────────────────── */
.shop-page:focus { outline: none; }
.shop-hero { padding: 44px 0 40px; }
.shop-hero-inner { display: grid; gap: 32px; align-items: center; }
.shop-hero-copy { position: relative; z-index: 1; min-width: 0; }
.shop-hero-desc p { max-width: 62ch; }
.shop-hero-desc a { text-decoration: underline; text-underline-offset: 3px; }
.shop-hero-art {
  display: none;
  position: relative;
  z-index: 1;
  width: 280px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-3);
}
.shop-hero-art img { width: 100%; height: 100%; object-fit: cover; outline: 1px solid var(--border); outline-offset: -1px; }
@media (min-width: 901px) {
  .shop-hero-inner.has-art { grid-template-columns: minmax(0, 1fr) auto; }
  .shop-hero-art { display: block; }
}
.shop-section { padding: 32px 0 88px; }

/* sub-category chips */
.shop-subcats { margin: 0 0 24px; }
.shop-subcats-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; position: relative; /* containing block for the abs-positioned .shop-sr so the scroll rail clips it (it stretched the page on phones) */ }
.shop-subcat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-2);
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
  transition-property: border-color, background-color, color, transform;
  transition-duration: .2s;
  transition-timing-function: var(--shop-ease);
}
.shop-subcat:hover { border-color: var(--border-cyan); color: var(--cyan); }
.shop-subcat:active { transform: scale(.96); }
.shop-subcat.is-current { border-color: var(--cyan); background: var(--cyan-dim); color: var(--white); }
.shop-subcat--parent { color: var(--text-2); }
.shop-subcat--parent svg { width: 16px; height: 16px; }
.shop-subcat-count {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
  .shop-subcats-list {
    flex-wrap: nowrap;
    margin-inline: -24px;
    padding: 0 24px 4px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .shop-subcats-list::-webkit-scrollbar { display: none; }
  .shop-subcats-list li { flex: none; scroll-snap-align: start; }
}

/* pagination fallback (catalogs larger than one page) */
.shop-page .woocommerce-pagination { margin-top: 40px; }
.shop-page .woocommerce-pagination ul.page-numbers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  list-style: none;
}
.shop-page .woocommerce-pagination li > .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-2);
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  transition-property: border-color, color, background-color, transform;
  transition-duration: .2s;
  transition-timing-function: var(--shop-ease);
}
.shop-page .woocommerce-pagination li > a.page-numbers:hover { border-color: var(--border-cyan); color: var(--cyan); }
.shop-page .woocommerce-pagination li > a.page-numbers:active { transform: scale(.96); }
.shop-page .woocommerce-pagination li > .page-numbers.current { border-color: var(--cyan); background: var(--cyan); color: var(--bg); }
.shop-page .woocommerce-pagination li > .page-numbers.dots { border-color: transparent; background: none; }

/* WooCommerce notices on archive pages */
.shop-page .woocommerce-notices-wrapper:empty { display: none; }
.shop-page .woocommerce-message,
.shop-page .woocommerce-info,
.shop-page .woocommerce-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin: 0 0 20px;
  padding: 14px 18px;
  border: 1px solid var(--border-cyan);
  border-radius: var(--r-md);
  background: var(--cyan-dim);
  color: var(--text);
  list-style: none;
}
.shop-page .woocommerce-error { border-color: var(--danger); background: var(--bg-2); }
.shop-page .woocommerce-message .button,
.shop-page .woocommerce-info .button {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--border-cyan);
  border-radius: var(--r-md);
  color: var(--cyan);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.shop-page .woocommerce-message .button:hover,
.shop-page .woocommerce-info .button:hover { background: var(--cyan); color: var(--bg); }

/* ─────────────────────────────────────────
   6. WISHLIST PAGE
   ───────────────────────────────────────── */
.shop-wl-intro { max-width: 68ch; margin: 0 0 24px; color: var(--text-2); }
.shop-wl-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin: 0 0 20px;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--border);
}
.shop-wl-count {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.shop-wl-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.shop-wl-actions .btn { min-height: 44px; }
.shop-wl-actions [data-wl-clear].is-confirm { border-color: var(--danger); color: var(--danger); }
.shop-wl-note { margin: 32px 0 0; font-size: 15px; color: var(--text-3); text-wrap: pretty; }
.shop-wl-note a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }
.shop-wl-note a:hover { color: var(--white); }
.shop-wl-start { margin-top: 56px; }
.shop-wl-start-title {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--white);
}

/* ─────────────────────────────────────────
   7. RESPONSIVE
   ───────────────────────────────────────── */
@media (max-width: 900px) {
  .shop-hero { padding: 32px 0 28px; }
  .shop-section { padding: 24px 0 64px; }
}
@media (max-width: 640px) {
  .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .pc-body { padding: 12px 12px 14px; }
  .pc-name { font-size: 12px; }
  .pc-benefit { -webkit-line-clamp: 2; line-clamp: 2; font-size: 14px; }
  .pc-price-row { font-size: 16px; }
  .pc-badges { top: 8px; left: 8px; max-width: calc(100% - 56px); }
  .pc-badge { min-height: 20px; padding: 0 6px; font-size: 9px; }
  .pc-wish { top: 6px; right: 6px; }
  .pc .pc-cta { padding-left: 8px; padding-right: 8px; font-size: 10px; letter-spacing: .06em; }
  .shop-empty { padding: 40px 20px; }
  .shop-wl-actions { width: 100%; }
  .shop-wl-actions .btn { flex: 1 1 auto; }
}
@media (max-width: 480px) {
  .pc-chip { padding: 0 6px; letter-spacing: .02em; }
  .pc-chip svg { display: none; }
}

/* ─────────────────────────────────────────
   8. REDUCED MOTION
   ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .pc,
  .pc-img,
  .pc-wish,
  .pc-wish-icon,
  .pc .pc-cta,
  .shop-filters,
  .shop-filters-backdrop,
  .shop-chips-wrap,
  .shop-facet-chev,
  .shop-chip,
  .shop-subcat { transition-duration: .01ms; transition-delay: 0s; }
  .pc:hover,
  .pc:hover .pc-img { transform: none; }
  .pc.is-entering { animation: none; }
  .pc-skel { animation: none; }
  .shop-grid.is-hydrating .shop-results { animation-duration: .01ms; }
}

/* Rating placeholder on narrow product cards: the muted stars alone carry it (aria-label still says "No reviews yet"); the words wrapped to 3 lines in the 2-column phone grid. */
.pc-rating--none .pc-rating-text { white-space: nowrap; }
@media (max-width: 640px) {
  .pc-rating--none.pc-rating--sm .pc-rating-text { display: none; }
}