/* public/shop/_catalog.css — the shop's product-card styles (copied from
   /shop on 25 Oct 2026), used by the category pages under /shop/. */
:root{--void:#05090C;--forest:#080F13;--card:#111D22;--moss:#1A2E33;--sage:#336065;--lichen:#4D869B;--mist:#88BAC8;--navy:#333A57;--purple:#422C47;--parchment:#EDE5D8;--dust:#C0B49A;--coral:#CE6C52;--lime-soft:rgba(136,186,200,0.10);--serif:'Cormorant Garamond',Georgia,serif;--sans:'DM Sans',system-ui,sans-serif;--script:'Pinyon Script',cursive}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{background:var(--void);color:var(--parchment);font-family:var(--sans);font-weight:300;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:9000;opacity:0.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:180px}

/* NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:500;padding:18px 48px;display:flex;align-items:center;justify-content:space-between;background:rgba(5,9,12,0.88);backdrop-filter:blur(16px);border-bottom:0.5px solid rgba(136,186,200,0.07)}
.nav-brand{text-decoration:none;display:flex;align-items:center;gap:12px}
.nav-brand-text{display:flex;flex-direction:column}
.nav-brand-text .main{font-family:var(--serif);font-size:17px;color:var(--parchment);letter-spacing:0.5px}
.nav-brand-text .sub{font-size:8.5px;letter-spacing:3px;color:var(--lichen);text-transform:uppercase}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{color:var(--dust);text-decoration:none;font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;transition:color 0.2s}
.nav-links a:hover,.nav-links a.active{color:var(--mist)}
.nav-right{display:flex;align-items:center;gap:16px}
.nav-cart{background:none;border:0.5px solid rgba(136,186,200,0.3);color:var(--mist);padding:8px 18px;font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;font-family:var(--sans);display:flex;align-items:center;gap:8px;transition:all 0.2s}
.nav-cart:hover{background:rgba(136,186,200,0.08)}
.cart-count{background:var(--lichen);color:var(--parchment);border-radius:50%;width:18px;height:18px;font-size:10px;display:flex;align-items:center;justify-content:center;font-weight:500}
/* Empty-basket state: hide the "0" chip so it doesn't read as broken. */
.cart-count.is-empty{display:none}

/* HERO BANNER */
.hero-banner{padding:140px 60px 80px;background:linear-gradient(to bottom,var(--forest),var(--void));border-bottom:0.5px solid rgba(136,186,200,0.06);text-align:center}
.hero-label{font-size:10px;letter-spacing:4px;text-transform:uppercase;color:var(--lichen);display:block;margin-bottom:20px}
.hero-title{font-family:var(--serif);font-size:clamp(52px,8vw,96px);font-weight:300;line-height:1.0;color:var(--parchment)}
.hero-title em{font-style:italic;color:var(--mist)}
/* Bayer wasn't loaded on /shop — the existing 'Bayer' labels were silently falling back. */
@font-face{font-family:'Bayer';src:url('/fonts/Bayer-TypeArchiType.otf') format('opentype');font-display:swap}
.hero-script{font-family:'Bayer','DM Sans',sans-serif;font-size:clamp(18px,2.4vw,28px);letter-spacing:0.06em;text-transform:lowercase;color:var(--dust);display:block;margin-top:14px}
.hero-sub{font-size:14px;color:var(--dust);max-width:560px;margin:24px auto 0;line-height:1.8}
.hero-loop{margin-top:26px;padding:11px 24px;border-radius:999px;border:0.5px solid rgba(136,186,200,0.35);background:none;color:var(--mist);font-family:var(--sans);font-size:10.5px;letter-spacing:0.22em;text-transform:uppercase;cursor:pointer;transition:background .25s,border-color .25s}
.hero-loop:hover,.hero-loop:focus-visible{background:rgba(136,186,200,0.1);border-color:rgba(136,186,200,0.6);outline:none}
.hero-loop[hidden]{display:none}
.hero-explorer{display:inline-block;margin-left:10px;text-decoration:none}
@media (max-width:520px){.hero-explorer{margin-left:0}}
.hero-explorer{display:inline-block;margin-left:10px;text-decoration:none}
@media (max-width:520px){.hero-explorer{margin-left:0}}

/* FILTERS — sticky under the nav. Was top:57px which sat BEHIND the
   nav; corrected to the actual nav height. body.fa-has-member-banner
   variant handles the extra 36px pushed down by the banner. */
.filters{padding:32px 60px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;border-bottom:0.5px solid rgba(136,186,200,0.06);position:sticky;top:68px;z-index:100;background:rgba(5,9,12,0.95);backdrop-filter:blur(12px)}
body.fa-has-member-banner .filters{top:104px}
@media(max-width:760px){body.fa-has-member-banner .filters{top:100px}}
.filter-search-wrap{margin-left:auto;position:relative;flex:0 0 auto}
.filter-search{padding:8px 14px 8px 34px;background:rgba(136,186,200,0.06);border:0.5px solid rgba(136,186,200,0.18);color:var(--parchment);font-family:var(--sans);font-size:11.5px;letter-spacing:0.02em;width:200px;transition:all 0.2s;border-radius:2px}
.filter-search:focus{outline:none;border-color:rgba(136,186,200,0.5);background:rgba(136,186,200,0.10);width:260px}
.filter-search::placeholder{color:var(--dust);opacity:0.55}
.filter-search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:12px;color:var(--lichen);opacity:0.7;pointer-events:none}
.no-results-note{grid-column:1/-1;padding:60px 20px;text-align:center;color:var(--dust);font-family:var(--serif);font-style:italic;font-size:16px}
.filter-btn{padding:8px 20px;border:0.5px solid rgba(136,186,200,0.2);background:none;color:var(--dust);font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;font-family:var(--sans);transition:all 0.2s;border-radius:2px}
.filter-btn:hover{border-color:rgba(136,186,200,0.4);color:var(--mist)}
.filter-btn.active{background:rgba(136,186,200,0.12);border-color:rgba(136,186,200,0.5);color:var(--mist)}

/* SECTION HEADERS — reduced top padding from 60→40 so scanning across
   four sections doesn't feel like scrolling through empty air. */
.cat-header{padding:40px 60px 24px;display:flex;align-items:center;gap:24px}
.cat-header h2{font-family:var(--serif);font-size:32px;font-weight:300;color:var(--parchment)}
.cat-header h2 em{font-style:italic;color:var(--mist)}
.cat-line{flex:1;height:0.5px;background:rgba(136,186,200,0.12)}
.cat-count{font-size:10px;letter-spacing:2px;color:var(--lichen);text-transform:uppercase}
/* Sub-header — separates Everyday vs Ceremonial inside Compositions.
   Smaller than cat-header, sits inline with the grid, keeps the eye
   oriented without stealing focus. */
.cat-subhead{display:flex;align-items:baseline;gap:16px;padding:8px 0 22px;color:var(--dust)}
.cat-subhead-num{font-family:'Bayer','Courier New',monospace;font-size:11px;letter-spacing:0.28em;color:var(--lichen);opacity:0.7}
.cat-subhead-label{font-family:var(--serif);font-size:22px;font-weight:400;color:var(--parchment);letter-spacing:-0.005em}
.cat-subhead-label em{font-style:italic;color:var(--mist)}
.cat-subhead-note{font-family:var(--serif);font-style:italic;font-size:13px;color:var(--dust);opacity:0.75}
.cat-subhead-ritual{padding-top:56px;border-top:0.5px solid rgba(136,186,200,0.08);margin-top:24px}

/* PRODUCTS GRID */
.products-section{padding:0 60px 60px}
.products-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:2px}
/* cursor:pointer was dropped — the card isn't a link (yet). It only
   promised interaction the click didn't deliver. Detail pages coming. */
.product-card{background:var(--card);transition:all 0.3s;display:flex;flex-direction:column}
.product-card.hidden{display:none!important}
.product-img-wrap{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--moss)}
.product-photo{width:100%;height:100%;object-fit:cover;transition:transform 0.5s;filter:saturate(0.9)contrast(1.05)}
.product-card:hover .product-photo{transform:scale(1.04)}
.product-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--moss),var(--card))}
.product-placeholder span{font-size:48px;opacity:0.3;font-family:var(--serif);font-style:italic;color:var(--mist)}
.product-badge{position:absolute;top:12px;left:12px;font-size:8.5px;letter-spacing:1.5px;text-transform:uppercase;padding:4px 10px;background:rgba(77,134,155,0.85);color:var(--parchment);border-radius:2px}
.product-badge.spagyric{background:rgba(136,186,200,0.15);color:var(--mist);border:0.5px solid rgba(136,186,200,0.3)}
/* Hover CTA — a tighter bottom strip so it doesn't swallow the lower
   third of the photo. Touch devices never see this (no hover event),
   so the always-visible "+ Add" button below the info block is the
   real interaction target on mobile. z-index:3 keeps the button
   clickable when the whole-image detail-page link (z:2) is present. */
.product-hover-cta{position:absolute;bottom:0;left:0;right:0;padding:10px 12px;background:linear-gradient(to top,rgba(5,9,12,0.92),rgba(5,9,12,0.4) 70%,transparent);transform:translateY(100%);transition:transform 0.25s;opacity:0;z-index:3}
.product-card:hover .product-hover-cta{transform:none;opacity:1}
.quick-add{width:100%;padding:10px;background:var(--lichen);border:none;color:var(--parchment);font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;font-family:var(--sans);transition:background 0.2s}
.quick-add:hover{background:var(--mist);color:var(--void)}
.product-info{padding:24px;flex:1;display:flex;flex-direction:column}
.product-category{font-size:9.5px;letter-spacing:2px;color:var(--lichen);text-transform:uppercase;margin-bottom:8px;display:block}
.product-name{font-family:var(--serif);font-size:22px;font-weight:300;color:var(--parchment);margin-bottom:10px;line-height:1.2;text-decoration:none;display:block}
a.product-name{transition:color 0.2s}
a.product-name:hover{color:var(--mist)}
/* Photo-link — no visual disruption; the whole image behaves as one link surface. */
a.product-img-link{display:block;position:absolute;inset:0;z-index:2}
.product-desc{font-size:12.5px;color:var(--dust);line-height:1.7;flex:1;margin-bottom:16px}
.product-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.tag{font-size:9.5px;letter-spacing:1px;padding:3px 10px;border:0.5px solid rgba(136,186,200,0.15);color:var(--lichen);border-radius:2px}
.product-footer{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:16px;border-top:0.5px solid rgba(136,186,200,0.08)}
.product-price{display:flex;align-items:baseline;gap:8px}
.product-price .size{font-size:10px;color:var(--lichen);letter-spacing:1px}
.product-price .amount{font-family:var(--serif);font-size:22px;font-weight:300;color:var(--mist)}
.add-btn{padding:8px 18px;background:none;border:0.5px solid rgba(136,186,200,0.3);color:var(--mist);font-size:10.5px;letter-spacing:1px;cursor:pointer;font-family:var(--sans);transition:all 0.2s}
.add-btn:hover{background:rgba(136,186,200,0.1);border-color:rgba(136,186,200,0.5)}

/* CART DRAWER */
.cart-overlay{position:fixed;inset:0;background:rgba(5,9,12,0.6);z-index:800;opacity:0;pointer-events:none;transition:opacity 0.3s}
.cart-overlay.open{opacity:1;pointer-events:all}
.cart-drawer{position:fixed;top:0;right:0;bottom:0;width:400px;background:var(--card);z-index:900;transform:translateX(100%);transition:transform 0.35s;display:flex;flex-direction:column;border-left:0.5px solid rgba(136,186,200,0.1)}
.cart-drawer.open{transform:none}
.cart-head{padding:24px 28px;border-bottom:0.5px solid rgba(136,186,200,0.08);display:flex;justify-content:space-between;align-items:center}
.cart-head h3{font-family:var(--serif);font-size:22px;font-weight:300;color:var(--parchment)}
.cart-close{background:none;border:none;color:var(--dust);font-size:18px;cursor:pointer;padding:4px 8px}
.cart-body{flex:1;overflow-y:auto;padding:20px 28px}
.cart-empty{text-align:center;padding:60px 0;color:var(--dust)}
.cart-empty p{font-size:13px;margin-top:12px;font-family:var(--serif);font-style:italic}
.cart-item{display:flex;justify-content:space-between;align-items:start;padding:16px 0;border-bottom:0.5px solid rgba(136,186,200,0.06)}
.cart-item-name{font-size:13px;color:var(--parchment);margin-bottom:4px;font-family:var(--serif)}
.cart-item-meta{font-size:11px;color:var(--lichen)}
.cart-item-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.cart-item-price{font-family:var(--serif);font-size:16px;color:var(--mist)}
.cart-item-remove{background:none;border:none;color:rgba(192,180,154,0.4);cursor:pointer;font-size:12px}
.cart-footer{padding:20px 28px;border-top:0.5px solid rgba(136,186,200,0.08)}
.cart-total{display:flex;justify-content:space-between;margin-bottom:16px}
.cart-total .label{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--dust)}
.cart-total .amount{font-family:var(--serif);font-size:22px;color:var(--parchment)}
.checkout-btn{width:100%;padding:14px;background:var(--lichen);border:none;color:var(--parchment);font-size:11px;letter-spacing:2px;text-transform:uppercase;cursor:pointer;font-family:var(--sans);transition:background 0.2s}
.checkout-btn:hover{background:var(--mist);color:var(--void)}

/* CHECKOUT MODAL */
.co-overlay{position:fixed;inset:0;background:rgba(5,9,12,0.85);z-index:1000;display:none;align-items:center;justify-content:center;padding:24px}
.co-overlay.open{display:flex}
.co-modal{background:var(--card);border:0.5px solid rgba(136,186,200,0.12);max-width:520px;width:100%;max-height:90vh;overflow-y:auto;border-radius:4px}
.co-head{padding:24px 28px;border-bottom:0.5px solid rgba(136,186,200,0.08);display:flex;justify-content:space-between;align-items:center}
.co-head h2{font-family:var(--serif);font-size:24px;font-weight:300;color:var(--parchment)}
.co-close{background:none;border:none;color:var(--dust);font-size:18px;cursor:pointer}
.co-body{padding:28px}
.co-field{margin-bottom:16px}
.co-field label{display:block;font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--lichen);margin-bottom:8px}
.co-field input,.co-field select{width:100%;padding:12px 16px;background:rgba(136,186,200,0.05);border:0.5px solid rgba(136,186,200,0.15);color:var(--parchment);font-family:var(--sans);font-size:13.5px}
.co-field input:focus,.co-field select:focus{outline:none;border-color:rgba(136,186,200,0.4)}
.co-field select option{background:var(--card)}
.co-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.co-summary{background:rgba(136,186,200,0.05);border:0.5px solid rgba(136,186,200,0.1);padding:20px;margin-bottom:24px}
.co-summary-title{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--lichen);margin-bottom:12px;display:block}
.co-sum-row{display:flex;justify-content:space-between;font-size:12.5px;color:var(--dust);margin-bottom:6px}
.co-sum-row .name{color:var(--parchment)}
.co-sum-total{display:flex;justify-content:space-between;padding-top:12px;border-top:0.5px solid rgba(136,186,200,0.1);margin-top:8px}
.co-sum-total .t-label{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--dust);align-self:flex-end}
.co-sum-total .t-amount{font-family:var(--serif);font-size:24px;color:var(--mist)}
.co-shipping-note{font-size:10.5px;color:var(--lichen);margin-top:8px}
.stripe-wrap{padding:14px 16px;border:0.5px solid rgba(136,186,200,0.15);background:rgba(136,186,200,0.03)}
.stripe-wrap.focused{border-color:rgba(136,186,200,0.4)}
.stripe-secure{font-size:10.5px;color:var(--lichen);margin-bottom:12px;letter-spacing:0.5px}
.co-pay-tabs{display:flex;gap:2px;margin-bottom:20px}
.co-pay-tab{flex:1;padding:10px;background:rgba(136,186,200,0.05);border:0.5px solid rgba(136,186,200,0.1);color:var(--dust);font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;font-family:var(--sans);transition:all 0.2s;display:flex;align-items:center;justify-content:center;gap:8px}
.co-pay-tab.active{background:rgba(136,186,200,0.12);border-color:rgba(136,186,200,0.3);color:var(--mist)}
.co-btn-row{display:flex;gap:12px;margin-top:20px}
.co-btn-back{flex:1;padding:12px;background:none;border:0.5px solid rgba(136,186,200,0.2);color:var(--dust);font-size:10.5px;letter-spacing:1px;text-transform:uppercase;cursor:pointer;font-family:var(--sans)}
.co-btn-next{flex:2;padding:12px;background:var(--lichen);border:none;color:var(--parchment);font-size:10.5px;letter-spacing:2px;text-transform:uppercase;cursor:pointer;font-family:var(--sans);transition:background 0.2s}
.co-btn-next:hover{background:var(--mist);color:var(--void)}
.co-steps{display:flex;align-items:center;padding:20px 28px;border-bottom:0.5px solid rgba(136,186,200,0.08);gap:8px}
.co-step{display:flex;align-items:center;gap:8px;font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--dust)}
.co-step-num{width:22px;height:22px;border:0.5px solid rgba(136,186,200,0.2);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px}
.co-step.active{color:var(--mist)}
.co-step.active .co-step-num{border-color:var(--mist);background:rgba(136,186,200,0.12)}
.co-step.done .co-step-num{background:var(--lichen);border-color:var(--lichen);color:var(--parchment)}
.co-step-line{flex:1;height:0.5px;background:rgba(136,186,200,0.1)}
.co-confirm{text-align:center;padding:40px 20px}
.co-confirm-icon{font-size:40px;display:block;margin-bottom:16px}
.co-confirm h3{font-family:var(--serif);font-size:28px;font-weight:300;color:var(--parchment);margin-bottom:8px}
.co-confirm p{font-size:13px;color:var(--dust)}
.co-confirm-order{display:flex;gap:24px;justify-content:center;margin:24px 0;padding:20px;background:rgba(136,186,200,0.05);border:0.5px solid rgba(136,186,200,0.1)}
.co-confirm-order .label{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--lichen);margin-bottom:6px}
.co-confirm-order .val{font-family:var(--serif);font-size:18px;color:var(--parchment)}
.crypto-panel{padding-top:8px}
.crypto-coins{display:flex;gap:8px;margin-bottom:20px}
.crypto-coin{flex:1;padding:12px 8px;border:0.5px solid rgba(136,186,200,0.15);text-align:center;cursor:pointer;transition:all 0.2s;color:var(--dust);font-size:11px}
.crypto-coin.selected{border-color:rgba(136,186,200,0.5);background:rgba(136,186,200,0.08);color:var(--mist)}
.crypto-address-box{background:rgba(136,186,200,0.04);border:0.5px solid rgba(136,186,200,0.12);padding:20px;margin-bottom:16px}
.crypto-address-label{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--lichen);display:block;margin-bottom:10px}
.crypto-address-row{display:flex;gap:8px;align-items:center;margin-bottom:12px}
.crypto-address{font-family:monospace;font-size:11px;color:var(--parchment);word-break:break-all;flex:1}
.copy-btn{padding:6px 14px;background:none;border:0.5px solid rgba(136,186,200,0.25);color:var(--lichen);font-size:10px;cursor:pointer;white-space:nowrap;transition:all 0.2s}
.copy-btn:hover,.copy-btn.copied{background:rgba(136,186,200,0.1);color:var(--mist)}
.crypto-amount-label{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--lichen);margin-bottom:4px}
.crypto-amount-value{font-family:var(--serif);font-size:20px;color:var(--mist)}
.crypto-rate-note{font-size:10px;color:var(--dust);margin-top:4px}
.crypto-confirm-note{font-size:11px;color:var(--dust);line-height:1.6;padding:12px;background:rgba(206,108,82,0.07);border:0.5px solid rgba(206,108,82,0.2)}

/* TOAST */
.toast{position:fixed;bottom:32px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--lichen);color:var(--parchment);padding:12px 28px;font-size:12px;letter-spacing:1px;z-index:9999;transition:transform 0.3s;pointer-events:none;white-space:nowrap}
.toast.show{transform:translateX(-50%) translateY(0)}

/* FOOTER */
.footer{padding:48px 60px;border-top:0.5px solid rgba(136,186,200,0.07);display:flex;justify-content:space-between;align-items:center;margin-top:60px}
.footer-brand{font-family:var(--serif);font-size:15px;color:var(--dust)}
.footer-links{display:flex;flex-wrap:wrap;gap:12px 24px}
.footer-links a{color:var(--dust);text-decoration:none;font-size:10.5px;letter-spacing:1px;transition:color 0.2s}
.footer-links a:hover{color:var(--mist)}

/* REVEAL — visible by default, animation gated on html.reveal-anim */
.reveal{opacity:1;transform:none}
html.reveal-anim .reveal{opacity:0;transform:translateY(20px);transition:opacity 0.6s,transform 0.6s}
html.reveal-anim .reveal.in{opacity:1;transform:none}

/* ── Sold-out / unavailable badge for temporarily out-of-stock SKUs
   (Wild Cordyceps, Ruby No.7, Moon Support). Card grayscales, add
   button disables, "Unavailable" ribbon shows over the photo. */
.product-card.is-unavailable{position:relative;filter:saturate(0.35) brightness(0.72);cursor:default}
.product-card.is-unavailable .product-photo{filter:blur(1px)}
.product-card.is-unavailable .quick-add,
.product-card.is-unavailable .add-btn{pointer-events:none;opacity:0.35;cursor:not-allowed}
.product-card.is-unavailable .product-hover-cta,
.product-card.is-unavailable .product-img-link{display:none !important}
.product-card.is-unavailable::after{
  content:'Currently unavailable';
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  padding:8px 18px;border-radius:2px;
  background:rgba(6,11,6,0.94);
  border:0.5px solid rgba(232,177,75,0.5);
  color:#F5D689;
  font-family:'Bayer',var(--sans);font-size:9.5px;letter-spacing:0.28em;text-transform:uppercase;
  z-index:5;pointer-events:none;
  box-shadow:0 6px 18px rgba(0,0,0,0.5);
}

/* Note (2026-09-07): the CSS rotate on chaga.webp + nervoussystem.webp
   was removed. It rotated the wrong direction AND on mobile touch it
   combined with the card :active transform to make the photo spin.
   Correct fix is to re-export the source images with the right
   orientation and drop them at the same paths. Until then the photos
   render as they are in the file. */
@media(max-width:768px){.nav-links{display:none}.hero-banner,.filters,.products-section,.footer{padding-left:20px;padding-right:20px}.cat-header{padding:32px 20px 16px}.cart-drawer{width:100%}.products-grid{grid-template-columns:1fr 1fr}
  /* ── Mobile nav overlap fix ─────────────────────────────────────
     global-nav.js injects a 52×52 fixed hamburger at top:16 right:16
     on every subpage. On /shop the Basket button was sitting under
     that hamburger — the "same spot" Robin flagged. Push nav-right
     inward so basket + hamburger stack cleanly (basket first, then
     the fixed hamburger to its right). */
  .nav-right { padding-right: 60px; }
  .nav-cart { padding: 8px 14px !important; font-size: 10.5px !important; letter-spacing: 1px !important; }
  /* Hero — 140px top padding pushed the first product below the fold on
     phones. Tightened so products land as soon as the visitor scrolls
     past the nav. */
  .hero-banner{padding-top:80px !important;padding-bottom:40px !important}
  .hero-title{font-size:clamp(38px,10vw,54px) !important}
  /* Filter bar — was wrapping to two rows when "Flowers & Herbs" broke
     across. Switch to a horizontal scroll strip on mobile so all
     categories stay in one line. */
  .filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:16px 20px}
  .filters::-webkit-scrollbar{display:none}
  .filter-btn{flex-shrink:0;padding:7px 14px;font-size:10px;letter-spacing:1.2px}
  /* Checkout overlay full-screen on phones — the 90vh modal was pushing
     "Continue to payment →" below the address bar where it couldn't be
     reached. Sticky button row keeps the CTA visible while the form scrolls. */
  .co-overlay{padding:0;align-items:stretch;justify-content:stretch}
  .co-modal{max-width:100%;max-height:100dvh;height:100dvh;border-radius:0;display:flex;flex-direction:column}
  .co-modal > *{flex-shrink:0}
  .co-modal > [id^="coPane"]{flex:1 1 auto;overflow-y:auto;padding-bottom:120px;-webkit-overflow-scrolling:touch}
  .co-btn-row{position:sticky;bottom:0;background:var(--card,#0d1014);padding:14px 20px;margin:0 -20px -20px;border-top:0.5px solid rgba(136,186,200,0.1);z-index:5}
  .co-field input,.co-field select{font-size:16px} /* prevents iOS zoom on focus */
}