/* Fresh Mart storefront – Phase 3 (2026-10-31). Loaded last on shop + product pages.
   Signature: the gold shelf-edge price ticket, used on every card and big in the hero.
   Palette: forest #1b4d3e / deep #123629 / gold #f4b740 / mint #e3f3e6 / bg #f4f8f3 / ink #16241d. */
:root{--p3-forest:#1b4d3e;--p3-deep:#123629;--p3-gold:#f4b740;--p3-mint:#e3f3e6;--p3-line:#dfe9e2;--p3-ink:#16241d;--p3-muted:#526158;--p3-green:#267d38;--p3-head:'Plus Jakarta Sans',system-ui,sans-serif}

/* ---------- Header: forest band, search always visible ---------- */
.topbar{display:none}
header{background:var(--p3-forest);border-bottom:0;box-shadow:0 2px 10px rgba(18,54,41,.18);top:-58px}
.header-inner{display:grid;grid-template-columns:auto 1fr auto auto;grid-template-areas:"logo . help cart" "search search search search";align-items:center;gap:8px 8px;padding:6px 10px 10px}
.logo{grid-area:logo;color:#fff;gap:8px;font-size:17px}
.logo img{width:34px;height:34px;background:#fff;border-radius:10px;padding:2px}
.logo span{display:inline!important}
.search-box{grid-area:search;max-width:none}
.search-box input{height:44px;border:0;border-radius:12px;background:#fff;font-size:14px;padding:8px 40px 8px 14px;color:var(--p3-ink)}
.search-box input::placeholder{color:#6b7c71}
.search-box input:focus{outline:3px solid var(--p3-gold);outline-offset:0}
.search-box svg{right:12px;width:18px;height:18px;color:var(--p3-forest)}
.nav-links{display:none}
.nav-links a{color:#fff!important}
.hdr-help{grid-area:help;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;height:44px;padding:0 6px;border-radius:12px;color:#fff;font-size:13px;font-weight:700}
.hdr-help svg{width:22px;height:22px}
.hdr-help span{display:none}
.hdr-help:hover{background:rgba(255,255,255,.1)}
.cart-btn{grid-area:cart;background:var(--p3-gold);color:var(--p3-deep);height:44px;border-radius:12px;padding:0 12px;font-family:var(--p3-head);font-weight:800}
.cart-btn:hover{background:#ffc95c}
.cart-btn svg{stroke:var(--p3-deep)}
.cart-count{background:var(--p3-deep);color:#fff;min-width:20px;width:auto;height:20px;padding:0 5px;border-radius:999px;font-size:11px}
header :focus-visible{outline-color:var(--p3-gold)}
@media (min-width:900px){
  .topbar{display:block;background:var(--p3-deep);color:#cfe6d6}
  header{top:0}
  .header-inner{grid-template-columns:auto minmax(260px,560px) 1fr auto auto;grid-template-areas:"logo search nav help cart";gap:16px;padding:10px 16px}
  .logo{font-size:20px}
  .nav-links{display:flex;grid-area:nav;justify-content:flex-end;gap:2px}
  .nav-links a{padding:0 10px;border-radius:10px;font-weight:600;white-space:nowrap}
  .nav-links a:hover{background:rgba(255,255,255,.1)}
  .hdr-help{padding:0 10px}
  .hdr-help span{display:inline}
}

/* ---------- Category chips with images (sticky under the search) ---------- */
.sticky-nav{top:54px;background:#fff;border-bottom:1px solid var(--p3-line);box-shadow:0 2px 8px rgba(22,36,29,.04)}
@media (min-width:900px){.sticky-nav{top:64px}.sidebar{top:136px;max-height:calc(100vh - 136px)}}
.cats{gap:6px;padding:8px 10px}
.cat-chip{gap:7px;height:44px;padding:0 14px 0 6px;font-size:12.5px;font-weight:600;color:var(--p3-ink);border-color:var(--p3-line);background:#fff}
.cat-chip__img{width:32px;height:32px;border-radius:50%;object-fit:contain;background:#f1f6f2;display:inline-flex;align-items:center;justify-content:center;font-size:16px;flex:none}
.cat-chip__all{background:var(--p3-gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23123629'%3E%3Crect x='4' y='4' width='7' height='7' rx='2'/%3E%3Crect x='13' y='4' width='7' height='7' rx='2'/%3E%3Crect x='4' y='13' width='7' height='7' rx='2'/%3E%3Crect x='13' y='13' width='7' height='7' rx='2'/%3E%3C/svg%3E") center/18px no-repeat}
.cat-chip:hover{border-color:var(--p3-forest)}
.cat-chip.active{background:var(--p3-forest);border-color:var(--p3-forest);color:#fff}
.cat-chip.active .cat-chip__img{background-color:#fff}
.cat-chip.active .cat-chip__all{background-color:var(--p3-gold)}

/* ---------- Home hero + promo tiles (CSS scroll-snap, no JS) ---------- */
.fm-hero~.discount-banner{display:none}
.fm-hero{max-width:var(--max);margin:0 auto;padding:12px 10px 6px}
.fm-hero__track{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.fm-hero__track::-webkit-scrollbar{display:none}
.fm-hero__main{flex:0 0 88%;scroll-snap-align:start;position:relative;overflow:hidden;border-radius:20px;padding:18px 18px 16px;color:#fff;
  background:radial-gradient(120% 90% at 100% 0,rgba(244,183,64,.22),transparent 55%),radial-gradient(80% 80% at 0 100%,rgba(46,158,68,.35),transparent 60%),var(--p3-forest)}
.fm-hero__main::after{content:"";position:absolute;right:-30px;bottom:-30px;width:140px;height:140px;border-radius:50%;border:18px solid rgba(255,255,255,.06)}
.fm-hero__eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#cfe6d6}
.fm-hero__title{font-family:var(--p3-head);font-weight:800;font-size:clamp(25px,7.4vw,42px);line-height:1.04;letter-spacing:-.03em;color:#fff;margin:6px 0 8px;max-width:13ch}
.fm-hero__lead{font-size:13.5px;line-height:1.45;color:#e2efe6;max-width:32ch}
.fm-hero__ticket{position:relative;display:inline-flex;flex-wrap:wrap;gap:0 10px;margin-top:14px;padding:8px 14px 8px 24px;border-radius:4px 12px 12px 4px;background:var(--p3-gold);color:var(--p3-deep);font-family:var(--p3-head);font-weight:800;font-size:14px;line-height:1.25;box-shadow:0 6px 16px rgba(0,0,0,.18)}
.fm-hero__ticket::before{content:"";position:absolute;left:9px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--p3-forest)}
.fm-hero__ticket span+span::before{content:"·";margin-right:10px}
.fm-promo{flex:0 0 58%;scroll-snap-align:start;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;min-height:180px;padding:14px;border-radius:20px;background:#fff6df;color:var(--p3-ink);border:1px solid rgba(22,36,29,.06)}
.fm-promo:nth-child(3){background:var(--p3-mint)}
.fm-promo:nth-child(4){background:#fde9e7}
.fm-promo img{position:absolute;right:-6px;top:-4px;width:118px;height:118px;object-fit:contain;mix-blend-mode:multiply}
.fm-promo__title{position:relative;font-family:var(--p3-head);font-weight:800;font-size:16px;line-height:1.15;color:var(--p3-deep)}
.fm-promo__sub{position:relative;margin-top:3px;font-size:12.5px;color:var(--p3-muted)}
.fm-promo:hover{border-color:var(--p3-forest)}
@media (max-width:599px){
  .fm-hero{padding:10px 10px 4px}
  .fm-hero__main{padding:14px 16px 14px}
  .fm-hero__eyebrow{font-size:10.5px}
  .fm-hero__title{font-size:24px;margin:4px 0 6px}
  .fm-hero__lead{font-size:12.5px}
  .fm-hero__ticket{margin-top:10px;font-size:13px;padding:6px 12px 6px 22px}
  .fm-promo{min-height:0;flex-basis:46%}
  .fm-promo img{width:84px;height:84px}
  .fm-promo__title{font-size:14px}
  .fm-rail__track{grid-auto-columns:104px;gap:6px}
  .fm-rail__head h2{font-size:16px}
}
@media (min-width:600px){.fm-hero__main{flex-basis:62%}.fm-promo{flex-basis:34%}}
@media (min-width:900px){
  .fm-hero{padding:16px 16px 8px}
  .fm-hero__track{display:grid;grid-template-columns:2.1fr 1fr 1fr 1fr;overflow:visible}
  .fm-hero__main{padding:28px 30px;min-height:230px}
  .fm-promo{min-height:230px;padding:18px}
  .fm-promo img{width:150px;height:150px;right:-4px;top:4px}
  .fm-promo__title{font-size:18px}
}

/* ---------- "Made fresh in our kitchen" rail ---------- */
.fm-rail{padding:12px 10px 2px;min-width:0}
.fm-rail__head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.fm-rail__head h2{font-family:var(--p3-head);font-size:18px;color:var(--p3-deep);letter-spacing:-.02em}
.fm-rail__more{min-height:44px;display:inline-flex;align-items:center;font-size:13px;font-weight:700;color:var(--p3-green);text-decoration:underline;text-underline-offset:3px}
.fm-rail__track{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(116px,31vw,170px);gap:8px;overflow-x:auto;scroll-snap-type:x proximity;padding:4px 0 10px;scrollbar-width:thin}
.fm-rail__track>.pc{scroll-snap-align:start}

/* ---------- Catalogue toolbar ---------- */
.catalog-toolbar{flex-wrap:nowrap;min-height:56px;padding:6px 10px 0;font-size:12.5px}
#catalogStatus{flex:1;min-width:0;font-family:var(--p3-head);font-weight:700;color:var(--p3-deep);font-size:13px;line-height:1.3}
.catalog-toolbar .sidebar-toggle{flex:none;height:44px;background:var(--p3-forest);border-radius:999px;padding:0 14px;font-weight:700}
#resetCatalogFilters{flex:none;border-radius:999px}

/* ---------- Product grid: 4 columns on phones, up to 6 on wide screens ---------- */
#productGrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:6px 8px}
@media (min-width:600px){#productGrid{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;padding:8px 10px}}
@media (min-width:900px){#productGrid{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;padding:10px 12px}}
@media (min-width:1200px){#productGrid{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}}

/* Compact card (phones). Shared by the grid and the rail. */
:is(#productGrid,.fm-rail) .product-card.pc{padding:4px 4px 5px;border-radius:10px;border:1px solid var(--p3-line);background:#fff}
:is(#productGrid,.fm-rail) .product-card.pc:hover{box-shadow:0 6px 18px rgba(22,36,29,.10);border-color:#cbdcd0}
:is(#productGrid,.fm-rail) .pc .product-img-wrap{position:relative;padding-top:0;aspect-ratio:1/1;border-radius:7px;background:#f7faf7;overflow:hidden}
:is(#productGrid,.fm-rail) .pc .product-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:2px;transform:none}
:is(#productGrid,.fm-rail) .pc .badge-discount{left:3px;top:3px;right:auto;padding:0 4px;border-radius:4px;font-family:var(--p3-head);font-size:9.5px;line-height:15px;font-weight:800;background:var(--fm-red-aa,#c92a22);color:#fff}
:is(#productGrid,.fm-rail) .pc .badge-best{font-size:9.5px;line-height:15px;padding:0 4px}
:is(#productGrid,.fm-rail) .pc .product-info{padding:0;min-width:0}
:is(#productGrid,.fm-rail) .pc .product-name{margin:5px 0 0;font-family:Inter,system-ui,sans-serif;font-weight:500;font-size:11.5px;line-height:14px;height:28px;min-height:28px;color:var(--p3-ink);overflow-wrap:anywhere}
:is(#productGrid,.fm-rail) .pc .pc-unit{display:none}
:is(#productGrid,.fm-rail) .pc .pc-foot{margin-top:auto;padding-top:4px;display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:5px;min-height:0}
:is(#productGrid,.fm-rail) .pc .product-price-row{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-height:34px}
:is(#productGrid,.fm-rail) .pc .product-price{position:relative;display:inline-flex;align-items:center;max-width:100%;height:20px;padding:0 5px 0 11px;border-radius:2px 6px 6px 2px;background:var(--p3-gold);color:var(--p3-deep);font-family:var(--p3-head);font-weight:800;font-size:11.5px;letter-spacing:-.02em;white-space:nowrap;font-variant-numeric:tabular-nums}
:is(#productGrid,.fm-rail) .pc .product-price::before{content:"";position:absolute;left:4px;top:50%;width:4px;height:4px;margin-top:-2px;border-radius:50%;background:#fff}
:is(#productGrid,.fm-rail) .pc .product-old-price{font-size:10px;line-height:13px;color:var(--p3-muted);text-decoration:line-through;font-weight:500;white-space:nowrap}
:is(#productGrid,.fm-rail) .pc .pc-action{position:relative;z-index:2;margin:0;display:block;min-height:0}
/* Add: full-width pill. Visual 28px; ::before extends the hit area to ~36px. */
:is(#productGrid,.fm-rail) .pc .add-circle{position:relative;inset:auto;display:flex;align-items:center;justify-content:center;gap:2px;width:100%;min-width:0;height:28px;min-height:0;margin:0;padding:0;border-radius:999px;background:var(--p3-green);color:#fff;font-family:var(--p3-head);font-weight:800;font-size:12px;line-height:1;transition:background-color .15s,transform .12s}
:is(#productGrid,.fm-rail) .pc .add-circle::before{content:"";position:absolute;inset:-4px -2px;width:auto;height:auto;border-radius:0;background:transparent;box-shadow:none;transform:none}
:is(#productGrid,.fm-rail) .pc .add-circle::after{content:"Add"}
:is(#productGrid,.fm-rail) .pc .add-circle svg{position:static;width:13px;height:13px;stroke:#fff;stroke-width:3}
:is(#productGrid,.fm-rail) .pc .add-circle:hover{background:var(--p3-forest)}
:is(#productGrid,.fm-rail) .pc .add-circle:active{transform:scale(.96)}
:is(#productGrid,.fm-rail) .pc .add-circle.added{background:var(--p3-forest)}
:is(#productGrid,.fm-rail) .pc .add-circle.added::after{content:"Added"}
:is(#productGrid,.fm-rail) .pc .add-circle.added svg{fill:none;stroke:#fff}
:is(#productGrid,.fm-rail) .pc .add-circle:disabled{background:#d9e1db;color:#3d4a42;cursor:not-allowed}
:is(#productGrid,.fm-rail) .pc .add-circle:disabled svg{display:none}
:is(#productGrid,.fm-rail) .pc .add-circle:disabled::after{content:"Sold out"}
:is(#productGrid,.fm-rail) .pc .pc-stepper{display:flex;width:100%;height:28px;justify-content:space-between;align-items:center;border-radius:999px;background:var(--p3-forest);overflow:visible;animation:p3-pop .18s ease-out}
:is(#productGrid,.fm-rail) .pc .pc-step{position:relative;width:30px;height:28px;flex:none;border-radius:999px}
:is(#productGrid,.fm-rail) .pc .pc-step::before{content:"";position:absolute;inset:-4px -1px}
:is(#productGrid,.fm-rail) .pc .pc-step svg{width:14px;height:14px}
:is(#productGrid,.fm-rail) .pc .pc-qty{min-width:16px;font-size:12.5px;color:#fff}
:is(#productGrid,.fm-rail) .pc .pc-sold-out{font-size:11px}
@keyframes p3-pop{from{transform:scale(.92)}to{transform:none}}

/* Rail cards and tablets: a little roomier */
.fm-rail .product-card.pc,#productGrid .product-card.pc{contain:layout}
.fm-rail .pc .product-name{font-size:12px!important;line-height:15px!important;height:30px!important;min-height:30px!important}
.fm-rail .pc .product-price{font-size:12.5px!important;height:22px!important}
@media (min-width:600px){
  :is(#productGrid,.fm-rail) .product-card.pc{padding:6px 6px 7px;border-radius:12px}
  :is(#productGrid,.fm-rail) .pc .badge-discount{font-size:10.5px;line-height:16px;padding:0 5px;left:5px;top:5px}
  :is(#productGrid,.fm-rail) .pc .product-name{font-size:12.5px;line-height:16px;height:32px;min-height:32px;margin-top:7px}
  :is(#productGrid,.fm-rail) .pc .product-price{font-size:12.5px;height:22px;padding:0 6px 0 13px}
  :is(#productGrid,.fm-rail) .pc .product-price::before{left:5px}
  :is(#productGrid,.fm-rail) .pc .product-old-price{font-size:11px;line-height:14px}
  :is(#productGrid,.fm-rail) .pc .add-circle,:is(#productGrid,.fm-rail) .pc .pc-stepper{height:32px;font-size:13px}
  :is(#productGrid,.fm-rail) .pc .pc-step{width:36px;height:32px}
}
@media (min-width:900px){
  :is(#productGrid,.fm-rail) .product-card.pc{padding:8px 8px 9px}
  :is(#productGrid,.fm-rail) .pc .product-name{font-size:13px;line-height:17px;height:34px;min-height:34px}
  :is(#productGrid,.fm-rail) .pc .pc-unit{display:block;margin-top:2px;height:15px;font-size:11px;line-height:15px;color:var(--p3-muted)}
  :is(#productGrid,.fm-rail) .pc .product-price{font-size:14px;height:24px;padding:0 7px 0 15px}
  :is(#productGrid,.fm-rail) .pc .product-price::before{left:6px;width:5px;height:5px;margin-top:-2.5px}
  :is(#productGrid,.fm-rail) .pc .add-circle,:is(#productGrid,.fm-rail) .pc .pc-stepper{height:34px}
  :is(#productGrid,.fm-rail) .pc .pc-step{width:40px;height:34px}
  .fm-rail{padding:14px 12px 2px}
  .fm-rail__track{grid-auto-columns:168px;gap:10px}
}
#productGrid .pc.product-skeleton .product-img-wrap{background:#e8efe9}
.pc .skeleton-add{width:100%;height:28px;border-radius:999px}

/* ---------- Load more + empty states ---------- */
.load-more button{border-radius:999px;background:#fff;border:1.5px solid var(--p3-forest);color:var(--p3-forest);font-family:var(--p3-head);font-weight:800}
.empty-state{margin:16px 10px;padding:28px 16px;border-radius:18px;background:#fff;border:1px dashed #c6d6cb}
.empty-state::before{content:"";display:block;width:84px;height:84px;margin:0 auto 12px;border-radius:50%;background:var(--p3-mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b4d3e' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5M8.5 11h5'/%3E%3C/svg%3E") center/40px no-repeat}

/* ---------- Cart drawer polish ---------- */
.cart-header{background:var(--p3-forest);border-bottom:0;padding:12px 12px 12px 16px}
.cart-header h2{color:#fff;font-size:17px}
.cart-close{color:#fff}
.cart-close:hover{background:rgba(255,255,255,.12)}
.cart-close:focus-visible{outline-color:var(--p3-gold)}
.cart-item{gap:12px;padding:12px 0;border-bottom-color:var(--p3-line)}
.cart-item-img{width:64px;height:64px;border-radius:12px;background:#f7faf7;border:1px solid var(--p3-line);overflow:hidden}
.cart-item-img img{object-fit:contain!important;padding:3px;border-radius:12px!important}
.cart-item-info{min-width:0}
.cart-item-name{font-size:13px;line-height:1.35;font-weight:600;color:var(--p3-ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cart-item-price{font-family:var(--p3-head);font-weight:800;font-size:14px;color:var(--p3-deep);margin-top:2px}
.cart-item-controls .qty-btn{border-radius:999px;border-color:#cfdcd3;color:var(--p3-deep);font-weight:700}
.cart-item-controls .qty-val{font-family:var(--p3-head);font-weight:800;font-size:14px;min-width:22px}
.cart-empty{padding:36px 8px}
.cart-empty__art{display:block;width:104px;height:104px;margin:0 auto 14px;border-radius:50%;background:var(--p3-mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b4d3e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.4 11.2a2 2 0 0 0 2 1.6h8.2a2 2 0 0 0 2-1.5L21 8H6.2'/%3E%3Ccircle cx='10' cy='20' r='1.2'/%3E%3Ccircle cx='17' cy='20' r='1.2'/%3E%3C/svg%3E") center/50px no-repeat}
.continue-shopping{border-radius:999px;border-width:1.5px;border-color:var(--p3-forest);font-family:var(--p3-head);font-weight:800}
.cart-total span:last-child{color:var(--p3-deep)}

/* ---------- Footer: trust strip ---------- */
footer{background:var(--p3-deep);padding-top:26px}
.fm-trust{list-style:none;display:grid;grid-template-columns:1fr;gap:10px;max-width:var(--max);margin:0 auto 22px;padding:0 0 22px;border-bottom:1px solid rgba(255,255,255,.14)}
.fm-trust li{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:16px;background:rgba(255,255,255,.06)}
.fm-trust svg{flex:none;width:40px;height:40px;padding:9px;border-radius:12px;background:var(--p3-gold);color:var(--p3-deep)}
.fm-trust span{font-size:12.5px;line-height:1.5;color:#d6e8dc}
.fm-trust strong{display:block;font-family:var(--p3-head);font-size:14.5px;color:#fff;margin-bottom:1px}
.fm-trust a{color:#fff;text-decoration:underline;text-underline-offset:2px;font-weight:600}
@media (min-width:700px){.fm-trust{grid-template-columns:repeat(3,1fr)}}

/* ---------- Micro-interactions (storefront-fx.js) ---------- */
.fx-bump{animation:p3-bump .42s cubic-bezier(.3,1.6,.5,1)}
@keyframes p3-bump{0%{transform:scale(1)}35%{transform:scale(1.28)}100%{transform:scale(1)}}
.fx-fly{position:fixed;z-index:500;width:16px;height:16px;border-radius:50%;background:var(--p3-gold);box-shadow:0 0 0 3px #fff,0 4px 12px rgba(0,0,0,.25);pointer-events:none}
.basket-bar__btn{box-shadow:0 10px 26px rgba(18,54,41,.32)}
@media (prefers-reduced-motion:reduce){.fx-bump,:is(#productGrid,.fm-rail) .pc .pc-stepper{animation:none}}

/* ---------- Product page ---------- */
.fm-header{background:var(--p3-forest);border-bottom:0;box-shadow:0 2px 10px rgba(18,54,41,.18)}
.fm-topbar{display:none}
.fm-header__logo{color:#fff}
.fm-header__logo img{background:#fff;border-radius:10px;padding:2px}
.fm-header__search input{border:0;border-radius:12px;background:#fff}
.fm-header__search input:focus{outline:3px solid var(--p3-gold);outline-offset:0}
.fm-header__search button{color:var(--p3-forest)}
.fm-header__nav a{color:#fff}
.fm-header__cart{background:var(--p3-gold);color:var(--p3-deep);border-radius:12px;font-family:var(--p3-head);font-weight:800}
.fm-header__cart:hover{background:#ffc95c}
.fm-header__count{background:var(--p3-deep)}
.fm-header :focus-visible{outline-color:var(--p3-gold)}
body.pd-page{background:#f4f8f3}
.pd-page .pd-back{display:none}
.pd-page .pd-grid{gap:18px;padding:4px 0 10px}
.pd-page .pd-image{aspect-ratio:1/1;min-height:0;background:#fff;border:1px solid var(--p3-line);border-radius:20px;box-shadow:none;padding:14px}
.pd-page .pd-image img{object-fit:contain}
.pd-page .pd-info{align-self:start}
.pd-page .pd-cat{display:inline-block;padding:4px 10px;border-radius:999px;background:var(--p3-mint);color:var(--p3-deep);font-weight:700;letter-spacing:.06em;font-size:11px}
.pd-page .pd-info h1{font-size:clamp(21px,5.4vw,30px);line-height:1.15;color:var(--p3-deep);letter-spacing:-.02em}
.pd-page .pd-price{position:relative;display:inline-flex;align-items:center;height:44px;padding:0 16px 0 28px;border-radius:4px 14px 14px 4px;background:var(--p3-gold);color:var(--p3-deep);font-size:24px;margin:6px 0 16px}
.pd-page .pd-price::before{content:"";position:absolute;left:11px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:#fff}
.pd-page .pd-perks{list-style:none;display:grid;gap:8px;margin:16px 0 0;padding:0}
.pd-page .pd-perks li{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--p3-ink)}
.pd-page .pd-perks a{color:var(--p3-green);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.pd-page .pd-perks svg{flex:none;width:30px;height:30px;padding:6px;border-radius:10px;background:var(--p3-mint);color:var(--p3-forest)}
.pd-page .qty-sel{background:#fff;border:1px solid var(--p3-line);border-radius:999px;padding:2px;gap:2px}
.pd-page .qty-sel button{width:44px;height:44px;border:0;border-radius:999px;background:transparent;color:var(--p3-deep);font-weight:700}
.pd-page .qty-sel button:hover{background:var(--p3-mint)}
.pd-page .qty-sel span{font-family:var(--p3-head);font-weight:800;font-size:16px;min-width:26px}
.pd-page .add-cart-btn{min-height:50px;border-radius:999px;background:var(--p3-green);font-family:var(--p3-head);font-weight:800;font-size:15.5px}
.pd-page .add-cart-btn:hover{background:var(--p3-forest)}
.pd-page .add-cart-btn:disabled{background:#c9d3cc;color:#2c3a31;cursor:not-allowed}
.pd-page .pd-seo-content{background:#fff;border:1px solid var(--p3-line);border-radius:18px;padding:16px;margin-top:14px}
.pd-page .related h2{color:var(--p3-deep)}
.pd-page .r-grid{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:clamp(132px,38vw,190px);gap:10px;overflow-x:auto;scroll-snap-type:x proximity;padding:2px 2px 10px}
.pd-page .r-card{scroll-snap-align:start;border:1px solid var(--p3-line);box-shadow:none;border-radius:14px;padding:6px}
.pd-page .r-card img,.pd-page .r-card .r-img{height:auto;aspect-ratio:1/1;object-fit:contain;background:#f7faf7;border-radius:10px}
.pd-page .r-card .r-info{padding:8px 2px 2px}
.pd-page .r-card .r-name{font-size:12.5px;line-height:16px;height:32px;color:var(--p3-ink)}
.pd-page .r-card .r-price{position:relative;display:inline-flex;align-items:center;height:22px;padding:0 6px 0 13px;margin-top:6px;border-radius:2px 6px 6px 2px;background:var(--p3-gold);color:var(--p3-deep);font-family:var(--p3-head);font-size:12.5px}
.pd-page .r-card .r-price::before{content:"";position:absolute;left:5px;top:50%;width:4px;height:4px;margin-top:-2px;border-radius:50%;background:#fff}
@media (min-width:701px){
  .pd-page .pd-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:36px;padding-top:8px}
  .pd-page .pd-image{position:sticky;top:76px}
  .pd-page .pd-info{padding-top:8px}
}
/* Phones: sticky add-to-cart bar */
@media (max-width:700px){
  .pd-page .pd-actions{position:fixed;left:0;right:0;bottom:0;z-index:160;flex-direction:row!important;align-items:center;gap:10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));background:#fff;border-top:1px solid var(--p3-line);box-shadow:0 -8px 24px rgba(18,54,41,.10)}
  .pd-page .pd-actions .add-cart-btn{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 12px}
  body.pd-page{padding-bottom:84px}
  body.pd-page .basket-bar{display:none}
}
@media (max-width:599px){.fm-rail__track{grid-auto-columns:100px;gap:6px}}
@media (max-width:599px){
  .catalog-toolbar{flex-wrap:wrap;row-gap:4px}
  #catalogStatus{flex:1 1 170px;font-size:12.5px}
  .catalog-toolbar .sidebar-toggle,#resetCatalogFilters{height:40px;min-height:40px;font-size:12px;padding:0 12px}
}
@media (max-width:599px){
  .catalog-toolbar:has(#resetCatalogFilters:not([hidden])) #catalogStatus{flex-basis:100%}
  .catalog-toolbar:has(#resetCatalogFilters:not([hidden])) .sidebar-toggle{margin-left:0}
}
