/* ============================================================
   Smooth Wholesales — Shop / Ordering system
   Shared design system, header, nav, footer + shop components.
   Mirrors the landing page tokens (Archivo Black / red / cream).
   ============================================================ */

:root{
  --cream:#FFFFFF;
  --cream-2:#F5F0E6;
  --paper:#FBF8F1;       /* soft page tint behind cards */
  --ink:#0E0E0E;
  --ink-2:#1A1A1A;
  --ink-3:#2A2A2A;
  --mute:#6B6B6B;
  --line:rgba(14,14,14,.12);
  --line-2:rgba(14,14,14,.07);
  --red:#E42127;
  --red-deep:#B6181E;
  --yellow:#FFD93D;
  --green:#1FA85B;
  --amber:#E8A23A;

  --display:'Archivo Black',Archivo,system-ui,sans-serif;
  --sans:'Inter',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

  --r-card:14px;
  --r-tile:16px;
}
/* Scoped resets — contained to .sw-shop so they never leak into the
   theme / UAE header & footer, which render normally on this page. */
body.woocommerce-cart,body.woocommerce-checkout,body.product-page{background:var(--paper)}
/* Astra paints its own white on the content wrappers — let the paper show. */
body.product-page #content,
body.product-page .site-content,
body.product-page .ast-container,
body.product-page .ast-woocommerce-container,
body.product-page .entry-content,
body.product-page div.product{background:transparent!important}
.sw-shop{color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5}
.sw-shop *{box-sizing:border-box;-webkit-font-smoothing:antialiased}
.sw-shop a{color:inherit;text-decoration:none}
/* Bare-button reset. Kept at (0,1,1) — do NOT add :not(), because the
   :not() argument counts toward specificity and would push this to (0,2,1),
   overriding .buy.box (0,2,0) and stripping the red from tile buttons.
   Instead, the .btn variants are re-stated below at (0,2,0) to outrank it. */
.sw-shop button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit;padding:0}
.sw-shop img{max-width:100%;display:block}
.sw-shop input,.sw-shop select{font-family:inherit}

.wrap{max-width:1440px;margin:0 auto;padding:0 32px}
.eyebrow{font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--red);display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:'';width:18px;height:2px;background:var(--red)}
.sw-shop h1,.sw-shop h2,.sw-shop h3{font-family:var(--display);font-weight:900;letter-spacing:-.02em;line-height:.95;margin:0}
.display-xl{font-size:clamp(34px,4vw,54px);line-height:1;letter-spacing:-.025em}
.display-lg{font-size:clamp(30px,3.4vw,46px);line-height:.95;letter-spacing:-.025em}
.display-md{font-size:clamp(24px,2.6vw,34px);line-height:.98;letter-spacing:-.02em}

/* -- Buttons --------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 18px;border-radius:9px;font-weight:600;font-size:14px;transition:transform .15s,background .15s,box-shadow .15s,border-color .15s;white-space:nowrap}
.btn-red{background:var(--red);color:#fff;box-shadow:0 6px 14px -6px rgba(228,33,39,.5)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn-line{background:#fff;border:1px solid var(--line);color:var(--ink)}
/* Scoped copies at (0,2,0) so <button class="btn ..."> inside .sw-shop keeps
   its styling against the bare-button reset above. */
.sw-shop .btn{padding:0 18px}
.sw-shop .btn-red{background:var(--red);color:#fff;box-shadow:0 6px 14px -6px rgba(228,33,39,.5)}
.sw-shop .btn-ink{background:var(--ink);color:#fff}
.sw-shop .btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.sw-shop .btn-line{background:#fff;border:1px solid var(--line);color:var(--ink)}
.btn-yellow{background:var(--yellow);color:var(--ink)}
.arr{display:inline-block;transition:transform .15s}

/* -- Promo ribbon (marquee) --------------------------- */
.promo-ribbon{background:var(--ink);color:#fff;overflow:hidden;position:relative}
.promo-ribbon .ptrack{display:flex;white-space:nowrap;padding:9px 0;animation:pmarq 32s linear infinite;will-change:transform}
.promo-item{display:inline-flex;align-items:center;gap:12px;padding:0 22px;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.promo-item .tag{background:var(--yellow);color:var(--ink);padding:3px 8px;border-radius:4px;font-weight:700}
.promo-item .tag.r{background:var(--red);color:#fff}
.promo-item .dot{width:6px;height:6px;border-radius:50%;background:var(--red)}
@keyframes pmarq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* -- Top bar --------------------------- */
.topbar{background:var(--ink);color:rgba(255,255,255,.72);font-size:12.5px;border-top:1px solid rgba(255,255,255,.08)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:40px;gap:24px;font-family:var(--mono);letter-spacing:.02em}
.topbar .l{display:flex;gap:26px;align-items:center}
.topbar .l span{display:inline-flex;align-items:center;gap:8px}
.topbar .dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(31,168,91,.25)}
.topbar .r{display:flex;gap:20px;align-items:center}
.topbar .acct{color:#fff;font-weight:600}
.topbar .sep{opacity:.3}

/* -- Header ---------------------------- */
header.shop-head{position:sticky;position:-webkit-sticky;top:0;z-index:60;background:#FBF7F0;background:color-mix(in srgb,var(--cream) 92%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
header.shop-head .bar{display:flex;align-items:center;gap:26px;height:78px}
.logo{display:flex;align-items:center;font-family:var(--display);font-size:17px;letter-spacing:-.01em;flex-shrink:0}
.logo .smooth{background:var(--ink);color:#fff;padding:7px 30px 7px 12px;border-radius:5px;position:relative;z-index:1}
.logo .wholesales{background:var(--red);color:#fff;padding:7px 12px;border-radius:5px;margin-left:-16px;transform:skewX(-8deg);position:relative;z-index:2}
.logo .wholesales span{display:inline-block;transform:skewX(8deg)}

/* search */
.search{flex:1;max-width:560px;position:relative;display:flex}
.search input{width:100%;height:50px;border:1.5px solid var(--ink);border-radius:10px;padding:0 54px 0 18px;font-size:15px;background:#fff;color:var(--ink);outline:none;transition:box-shadow .15s}
.search input::placeholder{color:#8a8a8a}
.search input:focus{box-shadow:0 0 0 4px rgba(228,33,39,.16)}
.search button{position:absolute;right:6px;top:6px;width:38px;height:38px;border-radius:7px;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center}

.head-right{display:flex;align-items:center;gap:14px;flex-shrink:0;margin-left:auto}
.icon-link{display:flex;flex-direction:column;align-items:center;gap:3px;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding:4px 6px;border-radius:8px}
.icon-link svg{display:block}

/* cart pill */
.cart-pill{display:flex;align-items:center;gap:12px;background:var(--red);color:#fff;border-radius:11px;padding:9px 16px;transition:transform .15s,background .15s}
.cart-pill .ico{position:relative;display:flex;align-items:center;justify-content:center}
.cart-pill .ico .count{position:absolute;top:-9px;right:-11px;background:var(--ink);color:#fff;font-family:var(--mono);font-size:10px;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;border:2px solid var(--red)}
.cart-pill .amt{display:flex;flex-direction:column;justify-content:center;line-height:1.05}
.cart-pill .amt .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.cart-pill .amt .v{font-family:var(--display);font-size:18px;letter-spacing:-.01em}

/* mobile sticky logo bar (checkout) — hidden by default */
.mobile-logo-bar{display:none}

/* hamburger (mobile menu trigger) — hidden on desktop */
.hamburger{display:none;align-items:center;justify-content:center;gap:5px;flex-direction:column;height:50px;flex:0 0 66px;border:1.5px solid var(--ink);border-radius:10px;background:var(--ink);color:#fff}
.hamburger:active{background:#000}
.hamburger .hb-label{font-family:var(--mono);font-size:8.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.hamburger svg{display:block}

/* mobile menu — dark panel, distinct from the cream page */
.mobile-menu{display:none;position:absolute;top:100%;left:0;right:0;background:#171717;border-top:3px solid var(--red);box-shadow:0 26px 44px -12px rgba(0,0,0,.55);z-index:200;flex-direction:column;padding:8px}
.mobile-menu.open{display:flex}
.mobile-menu a{display:flex;align-items:center;gap:13px;padding:15px 16px;font-family:var(--display);font-size:16px;letter-spacing:-.01em;color:#fff;border-radius:10px}
.mobile-menu a + a{border-top:1px solid rgba(255,255,255,.08)}
.mobile-menu a:active{background:rgba(255,255,255,.08)}
.mobile-menu a svg{color:rgba(255,255,255,.55);flex-shrink:0}
.mobile-menu a .mm-count{font-family:var(--mono);font-size:11px;font-weight:700;background:var(--red);color:#fff;min-width:22px;height:22px;border-radius:11px;display:flex;align-items:center;justify-content:center;padding:0 6px}
.mobile-menu a .mm-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.mobile-menu a .mm-amt{font-family:var(--display);font-size:14px;letter-spacing:-.01em;color:#fff}
.mobile-menu a .mm-tag{margin-left:auto;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--yellow);color:var(--ink);padding:3px 8px;border-radius:5px}
.mobile-menu a.mm-logout{color:rgba(255,255,255,.6);font-size:14px}
.mobile-menu a.mm-logout svg{color:rgba(255,255,255,.45)}
.mobile-menu a.mm-logout:active{background:rgba(228,33,39,.15)}
body.menu-drawer .mobile-menu a.mm-about{margin-top:auto}
.menu-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:190}
.mobile-menu a.mm-accent .mm-arrow{margin-left:auto}
.mobile-menu a.mm-accent{color:var(--yellow)}
/* Deal Swipe — shiny attention-grabbing menu item */
@keyframes dsShine{0%{background-position:-160% 0}55%,100%{background-position:260% 0}}
.shop-nav a.ds-link{display:none !important}
.shop-nav a.ds-link::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);background-size:240% 100%;animation:dsShine 3.4s ease-in-out infinite;pointer-events:none}
.shop-nav a.ds-link.active::after{bottom:auto}
.shop-nav a.ds-link .bolt{animation:dsBolt 1.6s ease-in-out infinite}
@keyframes dsBolt{0%,100%{transform:scale(1)}50%{transform:scale(1.2) rotate(-8deg)}}
.mobile-menu a.mm-dealswipe{color:#fff;background:linear-gradient(110deg,#FF2E63,#E1147F 45%,#FF7A00);background-size:200% 100%;position:relative;overflow:hidden;margin:6px 8px 2px;border:0 !important}
.mobile-menu a.mm-dealswipe svg{color:#fff}
.mobile-menu a.mm-dealswipe::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 32%,rgba(255,255,255,.5) 50%,transparent 68%);background-size:240% 100%;animation:dsShine 3.4s ease-in-out infinite;pointer-events:none}
.mobile-menu a.mm-dealswipe .mm-tag{background:var(--yellow);color:var(--ink);position:relative;z-index:1}
/* drawer header (shown only in slide-out mode) */
.mm-drawer-head{display:none;align-items:center;justify-content:space-between;padding:18px 18px 14px;border-bottom:1px solid rgba(255,255,255,.1);position:sticky;top:0;background:#171717;z-index:1}
.mm-drawer-head .mm-title{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.mm-drawer-head .mm-close{width:40px;height:40px;border-radius:10px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;display:flex;align-items:center;justify-content:center}
.mm-drawer-head .mm-close:active{background:rgba(255,255,255,.14)}

/* primary nav row */
.shop-nav{background:var(--ink)}
.shop-nav .wrap{display:flex;align-items:center;gap:30px;height:50px}
.shop-nav a{font-size:14.5px;font-weight:600;color:rgba(255,255,255,.82);position:relative;display:flex;align-items:center;height:100%}
.shop-nav a.active{color:#fff}
.shop-nav a.active::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--red)}
.shop-nav .spacer{flex:1}
.shop-nav .nav-note{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.55);display:inline-flex;align-items:center;gap:8px}
.shop-nav .nav-note .pulse{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(31,168,91,.5);animation:pulseG 1.8s ease-out infinite}
@keyframes pulseG{0%{box-shadow:0 0 0 0 rgba(31,168,91,.5)}100%{box-shadow:0 0 0 9px rgba(31,168,91,0)}}

/* category strip (red) */
.cat-strip{background:var(--red);position:relative}
.cat-strip::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.10),transparent 22%)}
.cat-strip .wrap{position:relative;display:flex;align-items:stretch;gap:0;flex-wrap:wrap;justify-content:flex-start}
.cat-strip a{display:inline-flex;align-items:center;text-align:center;justify-content:center;color:#fff;font-size:13.5px;font-weight:600;line-height:1.1;padding:13px 18px;position:relative}
.cat-strip a:first-child{padding-left:0}
.cat-strip a + a::before{content:'';position:absolute;left:0;top:10px;bottom:10px;width:1px;background:rgba(255,255,255,.18)}
.cat-strip a.on{background:var(--ink)}

/* -- Page intro / breadcrumb --------------------------- */
.crumb{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--mute);display:flex;align-items:center;gap:8px;text-transform:uppercase}
.crumb .s{opacity:.5}

/* -- Category landing hero (EOFY deal band) --------------------------- */
.deal-band{position:relative;border-radius:20px;overflow:hidden;background:linear-gradient(120deg,var(--red) 0%,var(--red-deep) 100%);color:#fff;margin-top:26px}
.deal-band::before{content:'';position:absolute;inset:0;background:
  radial-gradient(circle at 12% 20%,rgba(255,217,61,.30),transparent 30%),
  radial-gradient(circle at 88% 86%,rgba(0,0,0,.28),transparent 42%)}
.deal-band .db-inner{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:center;padding:38px 44px}
.deal-band .kicker{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;background:var(--yellow);color:var(--ink);padding:6px 12px;border-radius:6px}
.deal-band h1{font-size:clamp(38px,5vw,72px);line-height:.86;letter-spacing:-.03em;margin:16px 0 0;text-transform:uppercase}
.deal-band h1 em{font-style:normal;color:var(--yellow)}
.deal-band .db-sub{font-size:15.5px;color:rgba(255,255,255,.9);max-width:460px;margin:16px 0 22px;line-height:1.5}
.deal-band .db-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.deal-band .countdown{display:flex;gap:10px;margin-left:6px}
.deal-band .cd{background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.22);border-radius:9px;padding:8px 12px;text-align:center;min-width:58px}
.deal-band .cd .n{font-family:var(--display);font-size:24px;line-height:1}
.deal-band .cd .l{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-top:4px}
.deal-band .db-art{position:relative;height:100%;min-height:200px;display:flex;align-items:center;justify-content:center}
.deal-band .db-art .pk{position:absolute;filter:drop-shadow(0 14px 18px rgba(0,0,0,.32));max-height:none}

/* -- Section heads --------------------------- */
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:0 0 26px;flex-wrap:wrap}
.sec-head .l h2{margin-top:12px}
.sec-head .l p{color:var(--ink-3);font-size:15px;margin:10px 0 0;max-width:560px;line-height:1.5}
.sec-head .more{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);border-bottom:1.5px solid var(--ink);padding-bottom:2px}

/* -- Category tiles --------------------------- */
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cat-tile{position:relative;border-radius:var(--r-tile);overflow:hidden;display:flex;flex-direction:column;min-height:292px;background:var(--tile-bg,#1A1A1A);color:var(--tile-fg,#fff);transition:transform .2s,box-shadow .2s;isolation:isolate}
.cat-tile .badge{position:absolute;top:14px;left:14px;z-index:4;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--yellow);color:var(--ink);padding:5px 9px;border-radius:5px;transform:skewX(-6deg)}
.cat-tile .badge span{display:inline-block;transform:skewX(6deg)}
.cat-tile .badge.r{background:var(--ink);color:#fff}

/* photo/packshot tile */
.cat-tile .cluster{position:relative;flex:1;overflow:hidden}
.cat-tile .cluster::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.66) 0%,rgba(0,0,0,.18) 30%,transparent 54%);z-index:2}
.cat-tile .cluster .pk{position:absolute;filter:drop-shadow(0 10px 14px rgba(0,0,0,.34));z-index:1;transition:transform .42s cubic-bezier(.22,.68,.3,1),filter .3s}
.cat-tile .foot{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 16px 16px}
.cat-tile .foot .nm{font-family:var(--display);font-size:17px;line-height:1.04;letter-spacing:-.015em;text-shadow:0 1px 8px rgba(0,0,0,.45)}
.cat-tile .foot .ct{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;opacity:.82;margin-top:7px;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.cat-tile .foot .go{width:34px;height:34px;border-radius:50%;background:#fff;color:var(--ink);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:15px;transition:transform .2s,background .2s,color .2s}
.cat-tile.on-photo .foot{position:absolute;left:0;right:0;bottom:0;padding-top:30px}

/* typographic tile */
.cat-tile.typo{justify-content:space-between;padding:18px}
.cat-tile.typo .big{font-family:var(--display);font-size:clamp(24px,2vw,30px);line-height:.92;letter-spacing:-.02em;text-transform:uppercase;margin-top:auto;padding-right:44px}
.cat-tile.typo .ct{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;opacity:.8;margin-top:12px;padding-right:44px}
.cat-tile.typo .corner{align-self:flex-start;width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;position:relative;z-index:1}
.cat-tile.typo > div{position:relative;z-index:1}
.cat-tile.typo .corner svg{width:22px;height:22px}
.cat-tile.typo .go-br{position:absolute;right:16px;bottom:16px;width:34px;height:34px;border-radius:50%;background:#fff;color:var(--ink);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:15px;z-index:3;transition:transform .2s,background .2s,color .2s}
.cat-tile.typo .ghost{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);right:auto;bottom:auto;font-family:var(--display);font-size:150px;line-height:.7;opacity:.08;letter-spacing:-.04em;z-index:0;pointer-events:none}

/* -- Trending strip on landing (horizontal carousel) --------------------------- */
.mini-rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:2px 2px 10px;scroll-behavior:smooth;scrollbar-width:none;align-items:flex-start}
.mini-rail::-webkit-scrollbar{display:none}
.mini-card{flex:0 0 calc((100% - 70px) / 6);scroll-snap-align:start;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s,border-color .18s}
.mini-card .mm{aspect-ratio:1/1;background:#fff;overflow:hidden;position:relative;border-bottom:1px solid var(--line-2)}
.mini-card .mm img{position:absolute;top:50%;left:50%;width:74%;height:74%;object-fit:contain;mix-blend-mode:multiply;transform:translate(-50%,-50%) scale(var(--isc,1))}
.mini-card .mbody{padding:12px 13px 14px;display:flex;flex-direction:column;flex:1}
.mini-card .mstock{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--green)}
.mini-card .mstock .d{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(31,168,91,.16)}
.mini-card .mt{font-size:13px;font-weight:600;line-height:1.3;color:var(--ink);margin:8px 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:34px}
.mini-card .mrrp{font-family:var(--mono);font-size:10.5px;color:var(--mute);text-transform:uppercase;letter-spacing:.04em;margin-top:7px}
.mini-card .mrrp s{opacity:.8}
.mini-card .mp{font-family:var(--display);font-size:19px;letter-spacing:-.02em;color:var(--ink);margin-top:6px}
.mini-card .mp .gst{font-family:var(--sans);font-size:11px;font-weight:600;font-style:italic;color:var(--mute);margin-left:2px;letter-spacing:0}
.mini-card .mper{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-3);background:var(--cream-2);border:1px solid var(--line);border-radius:6px;padding:4px 8px;margin-top:9px}
.mini-card .mper svg{width:12px;height:12px;color:var(--mute)}
.mini-card .madd{margin-top:13px;display:flex;align-items:center;justify-content:center;gap:7px;height:42px;border-radius:9px;background:var(--red);color:#fff;font-family:var(--display);font-size:12px;letter-spacing:.02em;text-transform:uppercase;transition:background .15s,transform .12s}
.mini-card .madd.added{background:var(--green)}
.mini-card .madd svg{width:15px;height:15px}
.mini-card .mtag{position:absolute;top:9px;left:9px;z-index:3;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--red);color:#fff;padding:3px 6px;border-radius:4px}
.mini-card .mtag.g{background:var(--green)}
.mini-card .mtag.y{background:var(--yellow);color:var(--ink)}

/* -- Listing layout --------------------------- */
.listing{display:grid;grid-template-columns:280px 1fr;gap:30px;align-items:start;margin-top:24px}
body.filters-top .listing{grid-template-columns:1fr}
body.filters-top .side{display:none}

/* sidebar filters */
.side{position:sticky;position:-webkit-sticky;top:140px;max-height:calc(100vh - 160px);overflow-y:auto;overflow-x:hidden;padding-right:2px;scrollbar-width:none;-ms-overflow-style:none}
.side::-webkit-scrollbar{width:0;height:0;display:none}
/* brand search */
.brand-search{position:relative;margin:4px 14px 6px}
.brand-search input{width:100%;height:40px;border:1.5px solid var(--line);border-radius:8px;padding:0 12px 0 34px;font-size:13.5px;background:#fff;color:var(--ink);outline:none}
.brand-search input:focus{border-color:var(--ink)}
.brand-search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--mute);pointer-events:none}
.side .panel{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;margin-bottom:16px}
.side .panel > .ph{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;border-bottom:1px solid var(--line-2)}
.side .panel > .ph h4{font-family:var(--display);font-size:14px;letter-spacing:-.01em;margin:0}
.side .panel .clear{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--red)}
.side .panel .pb{padding:8px 0}
.fil{display:flex;align-items:center;gap:11px;padding:9px 18px;font-size:14px;color:var(--ink-3);cursor:pointer;position:relative}
.fil .box{width:17px;height:17px;border:1.5px solid var(--line);border-radius:5px;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s}
.fil.sel .box{background:var(--red);border-color:var(--red)}
.fil.sel .box::after{content:'';width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-1px)}
.fil.sel{color:var(--ink);font-weight:600}
.fil .ct{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--mute)}
.fil.parent{font-weight:700;color:var(--ink);font-size:14.5px}
.fil.child{padding-left:38px;font-size:13.5px}
.side .applied{display:flex;flex-wrap:wrap;gap:7px;padding:0 18px 14px}
.chip{display:inline-flex;align-items:center;gap:7px;background:var(--cream-2);border:1px solid var(--line);border-radius:999px;padding:5px 10px;font-size:12px;font-weight:600}
.chip button{display:flex;color:var(--mute)}

/* top filter bar (alt) */
.topfilter{display:none}
body.filters-top .topfilter{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:14px 18px;margin-top:24px}
.topfilter .row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.topfilter .grp-label{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-right:4px}
.pillbtn{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:8px 15px;font-size:13.5px;font-weight:600;color:var(--ink-3);transition:border-color .15s,background .15s,color .15s}
.pillbtn.on{background:var(--ink);border-color:var(--ink);color:#fff}
.pillbtn .ct{font-family:var(--mono);font-size:11px;opacity:.7}
.topfilter .divider{width:1px;align-self:stretch;background:var(--line);margin:0 4px}

/* listing toolbar */
.l-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.l-toolbar .count{font-size:14px;color:var(--ink-3)}
.l-toolbar .count b{color:var(--ink);font-weight:700}
.l-tools{display:flex;align-items:center;gap:12px}
.selectwrap{position:relative}
.selectwrap select{appearance:none;-webkit-appearance:none;height:42px;border:1.5px solid var(--line);border-radius:9px;background:#fff;padding:0 38px 0 14px;font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer}
.selectwrap .cv{position:absolute;right:13px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--mute)}
.density-toggle{display:flex;border:1.5px solid var(--line);border-radius:9px;overflow:hidden}
.density-toggle button{width:42px;height:42px;display:flex;align-items:center;justify-content:center;color:var(--mute);background:#fff}
.density-toggle button.on{background:var(--ink);color:#fff}

/* -- Product cards --------------------------- */
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
body.cols-3 .prod-grid{grid-template-columns:repeat(3,1fr)}
.prod{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s,border-color .18s;position:relative}
.prod .media{position:relative;aspect-ratio:1/1;background:#fff;overflow:hidden;border-bottom:1px solid var(--line-2)}
.prod .media img{position:absolute;top:50%;left:50%;width:84%;height:84%;object-fit:contain;mix-blend-mode:multiply;transform:translate(-50%,-50%) scale(var(--isc,1));transition:transform .25s}
.prod .flags{position:absolute;top:11px;left:11px;display:flex;flex-direction:column;gap:6px;z-index:3}
.flag{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:5px;transform:skewX(-6deg);align-self:flex-start}
.flag span{display:inline-block;transform:skewX(6deg)}
.flag.deal{background:var(--red);color:#fff}
.flag.new{background:var(--ink);color:#fff}
.flag.hot{background:var(--yellow);color:var(--ink)}
.flag.trending{background:var(--ink);color:var(--yellow)}
.flag.fast{background:var(--green);color:#fff}
.prod .fav{position:absolute;top:11px;right:11px;width:34px;height:34px;border-radius:50%;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--mute);z-index:3;transition:color .15s,border-color .15s}

.prod .body{padding:14px 15px 16px;display:flex;flex-direction:column;gap:0;flex:1}
.prod .stock{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.prod .stock .d{width:8px;height:8px;border-radius:50%}
.prod .stock.in{color:var(--green)}
.prod .stock.in .d{background:var(--green);box-shadow:0 0 0 3px rgba(31,168,91,.16)}
.prod .stock.low{color:#B8741A}
.prod .stock.low .d{background:var(--amber);box-shadow:0 0 0 3px rgba(232,162,58,.18)}
.prod .stock.out{color:var(--mute)}
.prod .stock.out .d{background:var(--mute)}
.prod .title{font-size:14.5px;font-weight:600;line-height:1.3;color:var(--ink);margin:9px 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:38px}
.prod .meta{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;white-space:nowrap;overflow:hidden;margin-top:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.03em;color:var(--mute);text-transform:uppercase}
.prod .meta b{color:var(--ink-3);font-weight:600}
.prod .priceline{display:flex;align-items:baseline;gap:8px;margin-top:11px;min-height:26px}
.prod .price{font-family:var(--display);font-size:24px;letter-spacing:-.02em;color:var(--ink)}
.prod .price .gst{font-family:var(--sans);font-size:12px;font-weight:600;font-style:italic;color:var(--mute);margin-left:2px;letter-spacing:0}
.prod .was{font-family:var(--mono);font-size:12px;color:var(--mute);text-decoration:line-through}
.prod .rrp{font-family:var(--mono);font-size:10.5px;color:var(--mute);margin-top:3px;text-transform:uppercase;letter-spacing:.04em}

/* qty + buy — anchored to the bottom so every Buy Box aligns across a row */
.prod .controls{margin-top:auto;padding-top:14px;display:flex;flex-direction:column;gap:9px}
.qty{display:grid;grid-template-columns:46px 1fr 46px;height:46px;border:1.5px solid var(--line);border-radius:9px;overflow:hidden}
.qty button{display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--ink);background:var(--cream-2);font-weight:700}
.qty input{border:0;text-align:center;font-family:var(--mono);font-size:15px;font-weight:600;color:var(--ink);outline:none;width:100%;background:#fff}
.qty input::placeholder{color:#b0b0b0;font-weight:500}
.buy-actions{display:flex;flex-direction:column;gap:8px}
.buy{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;height:50px;border-radius:9px;font-family:var(--display);font-size:13px;letter-spacing:.02em;text-transform:uppercase;transition:transform .12s,box-shadow .15s,background .15s}
.buy .per{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.08em;opacity:.8}
.buy.box{background:var(--red);color:#fff;box-shadow:0 8px 16px -8px rgba(228,33,39,.5)}
.buy.unit{background:#fff;color:var(--ink);border:1.5px solid var(--ink)}
.buy.unit .per{opacity:.7}
.prod.is-out{opacity:.72}
.prod.is-out .buy.box{background:var(--mute);box-shadow:none;pointer-events:none}

/* guest (logged-out) product card */
.prod.is-guest .body{gap:0}
.prod.is-guest .title{min-height:40px;text-align:center}
.prod.is-guest .controls{margin-top:auto;padding-top:14px}
.login-cta{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:46px;border-radius:9px;background:var(--mute);color:#fff;font-weight:600;font-size:13.5px;transition:background .15s,transform .12s}
.login-cta svg{opacity:.85}

/* pagination */
.pager{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:40px}
.pg-center{display:flex;flex-direction:column;align-items:center;gap:10px}
.pg-nums{display:flex;align-items:center;gap:8px}
.pg-num{min-width:42px;height:42px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:14px;font-weight:600;border:1.5px solid var(--line);color:var(--ink-3);background:#fff;padding:0 12px;cursor:pointer}
.pg-num.cur{background:var(--ink);border-color:var(--ink);color:#fff}
.pg-info{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--mute)}
.pg-arrow{width:46px;height:46px;border-radius:11px;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--ink);background:var(--ink);color:#fff;cursor:pointer;transition:background .15s,transform .12s;flex-shrink:0}
.pg-arrow.ghost{border:0;background:none;pointer-events:none}

/* -- Cart page --------------------------- */
.cart-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin:18px 0 8px}
.cart-head .l h1{font-size:clamp(30px,3.4vw,44px);letter-spacing:-.025em;text-transform:uppercase}
.cart-head .l .eyebrow{margin-bottom:12px}
.cart-head .cont{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);border-bottom:1.5px solid var(--ink);padding-bottom:3px;display:inline-flex;align-items:center;gap:8px}

/* VIP offer progress */
.freight{background:var(--ink);color:#fff;border-radius:14px;padding:18px 22px;margin:18px 0 26px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.freight .fic{width:44px;height:44px;border-radius:11px;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.freight .fbody{flex:1;min-width:240px}
.freight .fmsg{font-size:14.5px;font-weight:500;color:rgba(255,255,255,.92)}
.freight .fmsg b{font-family:var(--display);font-weight:900;color:var(--yellow);letter-spacing:.01em}
.freight.done .fmsg b{color:#4ADE80}
.freight .ftrack{height:9px;border-radius:99px;background:rgba(255,255,255,.14);margin-top:10px;overflow:hidden}
.vip-lead{font-weight:800;background:linear-gradient(90deg,#FFD93D 0%,#FFF6C9 28%,#FFD93D 52%,#FFD93D 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:vipShimmer 3s linear infinite}
.vip-lead .spark{display:inline-block;color:#FFE680;animation:vipTwinkle 1.7s ease-in-out infinite;text-shadow:0 0 6px rgba(255,217,61,.7)}
.vip-lead .spark.s2{animation-delay:.55s;font-size:.8em}
.vip-lead .spark.s3{animation-delay:1.05s;font-size:.7em}
@keyframes vipShimmer{to{background-position:-220% 0}}
@keyframes vipTwinkle{0%,100%{opacity:.35;transform:scale(.7) rotate(0deg)}50%{opacity:1;transform:scale(1.2) rotate(22deg)}}
.freight .ffill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--yellow),#FFC700);transition:width .4s cubic-bezier(.4,0,.2,1)}
.freight.done .ffill{background:linear-gradient(90deg,#4ADE80,#1FA85B)}

.cart-layout{display:grid;grid-template-columns:1fr 380px;gap:30px;align-items:start;margin-top:4px;margin-bottom:64px}

/* in-cart specials rail */
.specials{margin:0 0 28px}
.specials .sp-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:14px}
.specials .sp-head .eyebrow{margin-bottom:8px}
.specials .sp-head h2{font-family:var(--display);font-size:clamp(20px,2.2vw,26px);letter-spacing:-.02em;text-transform:uppercase}
.specials .sp-head .hint{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--mute);display:inline-flex;align-items:center;gap:8px}
.sp-rail{display:flex;gap:14px;overflow-x:auto;padding:4px 4px 12px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.sp-rail::-webkit-scrollbar{height:8px}
.sp-rail::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.sp-card{flex:0 0 186px;scroll-snap-align:start;background:#fff;border:1px solid var(--line);border-radius:13px;overflow:hidden;display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s,border-color .18s;position:relative}
.sp-card .sp-media{position:relative;aspect-ratio:1/1;background:#fff;overflow:hidden;border-bottom:1px solid var(--line-2)}
.sp-card .sp-media img{position:absolute;top:50%;left:50%;width:78%;height:78%;object-fit:contain;mix-blend-mode:multiply;transform:translate(-50%,-50%) scale(var(--isc,1));transition:transform .25s}
.sp-card .sp-save{position:absolute;top:10px;left:10px;z-index:2;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;background:var(--red);color:#fff;padding:4px 8px;border-radius:5px;transform:skewX(-6deg)}
.sp-card .sp-save span{display:inline-block;transform:skewX(6deg)}
.sp-card .sp-body{padding:12px 13px 13px;display:flex;flex-direction:column;flex:1}
.sp-card .sp-title{font-size:13px;font-weight:600;line-height:1.25;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:33px}
.sp-card .sp-price{display:flex;align-items:baseline;gap:7px;margin:9px 0 11px}
.sp-card .sp-now{font-family:var(--display);font-size:18px;letter-spacing:-.02em;color:var(--ink)}
.sp-card .sp-now .gst{font-family:var(--sans);font-size:10px;font-weight:600;font-style:italic;color:var(--mute);margin-left:2px;letter-spacing:0}
.sp-card .sp-was{font-family:var(--mono);font-size:11.5px;color:var(--mute);text-decoration:line-through}
.sp-card .sp-add{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:8px;height:44px;border-radius:9px;background:var(--ink);color:#fff;font-family:var(--display);font-size:13px;letter-spacing:.02em;text-transform:uppercase;transition:background .15s,transform .12s}
.sp-card .sp-add.added{background:var(--green)}
.sp-card .sp-add svg{width:16px;height:16px}

/* line items */
.cart-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.cart-items{background:#fff}
.cart-row{display:grid;grid-template-columns:38px 104px 1fr auto;gap:18px;padding:20px;align-items:center;border-bottom:1px solid var(--line-2);position:relative}
.cart-row:last-child{border-bottom:0}
.cart-row .ci-media{grid-column:2;width:104px;height:104px;border:1px solid var(--line-2);border-radius:11px;background:#fff;position:relative;overflow:hidden;flex-shrink:0}
.cart-row .ci-media img{position:absolute;top:50%;left:50%;width:80%;height:80%;object-fit:contain;mix-blend-mode:multiply;transform:translate(-50%,-50%) scale(var(--isc,1))}
.cart-row .ci-info{grid-column:3;min-width:0}
.cart-row .ci-flags{display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap}
.cart-row .ci-title{font-family:var(--display);font-size:17px;letter-spacing:-.015em;line-height:1.1;color:var(--ink)}
.cart-row .ci-meta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:9px;font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:var(--mute);text-transform:uppercase}
.cart-row .ci-meta b{color:var(--ink-3);font-weight:600}
.ci-barcode{font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:var(--mute);text-transform:uppercase}
.ci-barcode b{color:var(--ink-3);font-weight:600;letter-spacing:.06em}
.cart-row .ci-unit{margin-top:10px;display:flex;align-items:baseline;gap:8px}
.cart-row .ci-unit .u{font-size:14px;font-weight:700;color:var(--ink)}
.cart-row .ci-unit .u .gst{font-size:11px;font-weight:600;font-style:italic;color:var(--mute);margin-left:2px}
.cart-row .ci-unit .was{font-family:var(--mono);font-size:12px;color:var(--mute);text-decoration:line-through}
.cart-row .ci-unit .per{font-family:var(--mono);font-size:11px;color:var(--mute);text-transform:uppercase;letter-spacing:.04em}
.cart-row .ci-right{grid-column:4;display:flex;flex-direction:column;align-items:flex-end;gap:12px;justify-self:end}
.cart-row .ci-sub{font-family:var(--display);font-size:22px;letter-spacing:-.02em;color:var(--ink);text-align:right;min-width:90px}
.cart-row .ci-rm{grid-column:1;grid-row:1;justify-self:center;width:34px;height:34px;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--mute);display:flex;align-items:center;justify-content:center;transition:color .15s,border-color .15s,background .15s}
.cart-qty{display:grid;grid-template-columns:40px 1fr 40px;height:42px;border:1.5px solid var(--line);border-radius:9px;overflow:hidden;width:132px}
.cart-qty button{display:flex;align-items:center;justify-content:center;font-size:19px;color:var(--ink);background:var(--cream-2);font-weight:700}
.cart-qty input{border:0;text-align:center;font-family:var(--mono);font-size:14px;font-weight:600;color:var(--ink);outline:none;width:100%;background:#fff}

/* coupon / actions bar */
.cart-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:18px 20px;background:var(--cream-2);border-top:1px solid var(--line)}
.coupon{display:flex;gap:10px;align-items:center}
.coupon input{height:46px;border:1.5px solid var(--line);border-radius:9px;padding:0 16px;font-size:14px;background:#fff;color:var(--ink);outline:none;width:190px}
.coupon input:focus{border-color:var(--ink)}
.cart-actions .ca-right{display:flex;gap:10px}

/* summary */
.summary{position:sticky;position:-webkit-sticky;top:20px;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.summary .sh{padding:18px 22px;border-bottom:1px solid var(--line-2)}
.summary .sh h3{font-family:var(--display);font-size:20px;letter-spacing:-.01em}
.summary .sbody{padding:18px 22px}
.summary .srow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;font-size:14.5px;color:var(--ink-3)}
.summary .srow .v{font-weight:600;color:var(--ink);font-family:var(--mono)}
.summary .srow.disc{color:var(--green)}
.summary .srow.disc .v{color:var(--green)}
.summary .sdiv{height:1px;background:var(--line-2);margin:8px 0}
.srow-note{font-size:12px;color:var(--mute);line-height:1.45;margin:-2px 0 6px;max-width:300px}
.summary .stotal{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:14px 0 4px}
.summary .stotal .lbl{font-family:var(--display);font-size:18px;letter-spacing:-.01em}
.summary .stotal .lbl small{display:block;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin-top:3px}
.summary .stotal .amt{font-family:var(--display);font-size:30px;letter-spacing:-.02em;color:var(--ink)}
.summary .checkout{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:56px;background:var(--red);color:#fff;border-radius:11px;font-family:var(--display);font-size:16px;letter-spacing:.02em;text-transform:uppercase;margin-top:16px;box-shadow:0 10px 22px -10px rgba(228,33,39,.55);transition:transform .15s,background .15s}
.summary .trust{display:flex;flex-direction:column;gap:9px;padding:16px 22px 20px;border-top:1px solid var(--line-2);background:var(--paper)}
.summary .trust .t{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--ink-3)}
.summary .trust .t svg{flex-shrink:0;color:var(--green)}

/* empty state */
.cart-empty{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:60px 30px;text-align:center}
.cart-empty .ce-ic{width:72px;height:72px;border-radius:50%;background:var(--cream-2);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;color:var(--mute)}
.cart-empty h3{font-family:var(--display);font-size:24px;margin-bottom:8px}
.cart-empty p{color:var(--mute);margin:0 0 22px}

@media (max-width:1024px){
  .cart-layout{grid-template-columns:1fr}
  .summary{position:static}
}
@media (max-width:560px){
  /* big, well-separated touch targets on mobile */
  .cart-row{grid-template-columns:84px 1fr;gap:14px;padding:16px}
  .cart-row .ci-media{grid-column:1;width:84px;height:84px}
  .cart-row .ci-info{grid-column:2}
  .cart-row .ci-right{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between;width:100%;gap:14px;margin-top:4px}
  .cart-row .cart-qty{width:auto;flex:1;max-width:220px;grid-template-columns:60px 1fr 60px;height:56px}
  .cart-row .cart-qty button{font-size:26px}
  .cart-row .cart-qty input{font-size:18px}
  .cart-row .ci-sub{font-size:24px;min-width:0}
  /* remove pulled out of the corner onto its own row, away from the + button */
  .cart-row .ci-rm{position:static;grid-column:1/-1;justify-self:start;width:auto;height:46px;border-radius:9px;padding:0 16px;gap:9px;color:var(--red);border-color:rgba(228,33,39,.4);margin-top:6px}
  .cart-row .ci-rm svg{width:17px;height:17px}
  .cart-row .ci-rm::after{content:'Remove';font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
  .cart-actions{flex-direction:column;align-items:stretch}
  .coupon input{flex:1;width:auto}
  .coupon button{height:50px}
  .cart-actions .ca-right{justify-content:stretch}
  .cart-actions .ca-right .btn{flex:1;height:50px}
}

/* -- Checkout page --------------------------- */
body.checkout-page .crumb-row{padding:18px 0 0}
.checkout-head{margin:10px 0 6px}
.checkout-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.checkout-head .ch-back{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);border-bottom:1.5px solid var(--ink);padding-bottom:3px;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.checkout-head .ch-back .arr-l{transition:transform .15s;display:inline-block}
.checkout-head h1{font-size:clamp(30px,3.4vw,44px);letter-spacing:-.025em;text-transform:uppercase}
.checkout-head .eyebrow{margin-bottom:12px}
.checkout-layout{display:grid;grid-template-columns:1fr 400px;gap:30px 30px;align-items:start;margin-top:20px;margin-bottom:64px}
.checkout-layout > .co-toggle-row{grid-column:1 / -1;margin:0}
/* On wide monitors, use more width so the checkout doesn't float small in the
   middle with large empty side gaps; give the summary a little more room too. */
@media (min-width:1441px){
  body.checkout-page .wrap,
  body.cart-page .wrap{ max-width:1680px }
  .checkout-layout{ grid-template-columns:1fr 440px; gap:40px }
  .cart-layout{ grid-template-columns:1fr 420px; gap:40px }
}
.co-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:24px 26px;margin-bottom:20px}
.co-card .co-sec-title{display:flex;align-items:center;gap:12px;font-family:var(--display);font-size:19px;letter-spacing:-.01em;margin:0 0 20px}
.co-card .co-sec-title .n{width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;font-family:var(--mono);font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
.field label{font-size:13px;font-weight:600;color:var(--ink-3);display:flex;align-items:center;gap:4px}
.field label .req{color:var(--red);font-weight:700}
.field label .opt{color:var(--mute);font-weight:500;font-size:12px}
.field input,.field select,.field textarea{height:48px;border:1.5px solid var(--line);border-radius:9px;padding:0 14px;font-size:14.5px;background:#fff;color:var(--ink);outline:none;transition:border-color .15s,box-shadow .15s;width:100%}
.field textarea{height:auto;padding:12px 14px;min-height:96px;resize:vertical;line-height:1.5}
.field input::placeholder,.field textarea::placeholder{color:#a6a6a6}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink);box-shadow:0 0 0 4px rgba(228,33,39,.12)}
.field select{appearance:none;-webkit-appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B6B6B' stroke-width='2.4' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
/* different-address toggle */
.ship-toggle{display:flex;align-items:center;gap:13px;padding:18px 0 4px;cursor:pointer;user-select:none}
.co-toggle-row{padding:0 0 4px !important}
.ship-toggle .sw{width:46px;height:26px;border-radius:99px;background:var(--line);position:relative;flex-shrink:0;transition:background .2s}
.ship-toggle .sw::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .2s}
.ship-toggle input{position:absolute;opacity:0;pointer-events:none}
.ship-toggle input:checked + .sw{background:var(--red)}
.ship-toggle input:checked + .sw::after{transform:translateX(20px)}
.ship-toggle .lbl{font-family:var(--display);font-size:16px;letter-spacing:-.01em}
.co-ship{display:none;margin-top:8px}
.co-ship.open{display:block;animation:coReveal .25s ease}
@keyframes coReveal{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* order summary (checkout) */
.co-summary{position:sticky;position:-webkit-sticky;top:20px;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.co-summary .csh{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
.co-summary .csh h3{font-family:var(--display);font-size:20px;letter-spacing:-.01em}
.co-summary .csh a{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--red)}
.co-lines{padding:8px 22px 14px;max-height:280px;overflow-y:auto}
.co-line{display:grid;grid-template-columns:48px 1fr auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line-2)}
.co-line:last-child{border-bottom:0}
.co-line .cl-media{width:48px;height:48px;border:1px solid var(--line-2);border-radius:8px;position:relative;overflow:visible;background:#fff}
.co-line .cl-media img{position:absolute;top:50%;left:50%;width:74%;height:74%;object-fit:contain;mix-blend-mode:multiply;transform:translate(-50%,-50%)}
.co-line .cl-media .q{position:absolute;top:-7px;right:-7px;background:var(--ink);color:#fff;font-family:var(--mono);font-size:10px;font-weight:700;min-width:19px;height:19px;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:0 4px;border:2px solid #fff}
.co-line .cl-t{font-size:13px;font-weight:600;line-height:1.3;color:var(--ink)}
.co-line .cl-t small{display:block;font-family:var(--mono);font-size:10.5px;font-weight:500;color:var(--mute);margin-top:3px;text-transform:uppercase;letter-spacing:.03em}
.co-line .cl-amt{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--ink)}
.co-totals{padding:18px 22px;border-top:1px solid var(--line);background:var(--paper)}
.co-totals .crow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;font-size:14px;color:var(--ink-3)}
.co-totals .crow .v{font-family:var(--mono);font-weight:600;color:var(--ink)}
.co-totals .cdiv{height:1px;background:var(--line-2);margin:8px 0}
.co-totals .cgrand{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:12px 0 4px}
.co-totals .cgrand .lbl{font-family:var(--display);font-size:18px;letter-spacing:-.01em}
.co-totals .cgrand .lbl small{display:block;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin-top:3px}
.co-totals .cgrand .amt{font-family:var(--display);font-size:30px;letter-spacing:-.02em}
/* payment */
.co-pay{padding:4px 22px 8px}
/* VIP Direct Debit sits directly above the pay section */
.co-dd{padding-top:16px;padding-bottom:16px;border-top:1px solid var(--line);background:#fff}
.co-dd + .co-pay{padding-top:16px;border-top:1px solid var(--line)}
.co-pay{border-top:1px solid var(--line)}
.co-dd + .co-pay{border-top:1px solid var(--line)}
.pay-opt{display:flex;align-items:flex-start;gap:12px;border:1.5px solid var(--line);border-radius:11px;padding:14px 16px;margin-bottom:10px;cursor:pointer;transition:border-color .15s,background .15s}
.pay-opt.sel{border-color:var(--red);background:rgba(228,33,39,.04)}
.pay-opt input{position:absolute;opacity:0}
.pay-opt .dot{width:20px;height:20px;border-radius:50%;border:2px solid var(--line);flex-shrink:0;margin-top:1px;position:relative;transition:border-color .15s}
.pay-opt.sel .dot{border-color:var(--red)}
.pay-opt.sel .dot::after{content:'';position:absolute;inset:3px;border-radius:50%;background:var(--red)}
.pay-opt .pt{display:block;font-family:var(--display);font-size:14px;letter-spacing:-.01em}
.pay-opt .pd{font-size:12.5px;color:var(--mute);margin-top:4px;line-height:1.4}
.place-order{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:58px;background:var(--red);color:#fff;border-radius:11px;font-family:var(--display);font-size:16px;letter-spacing:.02em;text-transform:uppercase;box-shadow:0 10px 22px -10px rgba(228,33,39,.55);transition:transform .15s,background .15s}
.po-note{font-size:12px;color:var(--mute);line-height:1.45;margin:11px 2px 0;text-align:center}
/* direct debit — flashy promo card */
.dd-promo{display:block;position:relative;overflow:hidden;border-radius:14px;padding:18px 18px 16px;cursor:pointer;background:linear-gradient(150deg,#1A1A1A 0%,#262017 60%,#1A1A1A 100%);border:1.5px solid rgba(255,217,61,.34);box-shadow:0 14px 30px -16px rgba(0,0,0,.5);transition:border-color .15s,box-shadow .15s}
.dd-promo input{position:absolute;opacity:0;pointer-events:none}
.dd-promo .dd-shine{position:absolute;top:0;left:-60%;width:45%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.13),transparent);transform:skewX(-18deg);animation:ddShine 4.6s ease-in-out infinite;pointer-events:none}
@keyframes ddShine{0%,72%{left:-60%}88%,100%{left:130%}}
.dd-badge{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#0E0E0E;background:linear-gradient(90deg,#FFD93D,#FFC700);padding:5px 11px;border-radius:99px;position:relative;z-index:2}
.dd-badge .spark{display:inline-block;animation:vipTwinkle 1.7s ease-in-out infinite}
.dd-badge .spark.s2{animation-delay:.6s;font-size:.85em}
.dd-headline{display:block;font-family:var(--display);font-size:19px;line-height:1.08;letter-spacing:-.02em;color:#fff;margin:13px 0 0;position:relative;z-index:2}
.dd-perks{display:flex;flex-direction:column;gap:8px;margin:14px 0 0;position:relative;z-index:2}
.dd-perks .perk{display:flex;align-items:center;gap:10px;font-size:13px;color:rgba(255,255,255,.84);line-height:1.3}
.dd-perks .perk .pi{width:22px;height:22px;border-radius:6px;background:rgba(255,217,61,.16);color:#FFD93D;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dd-cta{display:flex;align-items:center;gap:11px;margin-top:16px;background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.18);border-radius:10px;padding:12px 14px;position:relative;z-index:2;transition:border-color .15s}
.dd-check{width:24px;height:24px;border-radius:7px;border:2px solid rgba(255,255,255,.5);flex-shrink:0;display:flex;align-items:center;justify-content:center;background:transparent}
.dd-cta-label{font-family:var(--display);font-size:14.5px;letter-spacing:-.01em;color:#fff;line-height:1.15}
/* selected state */
.dd-promo.on{border-color:#FFD93D;box-shadow:0 0 0 3px rgba(255,217,61,.22),0 18px 38px -16px rgba(0,0,0,.6)}
.dd-promo.on .dd-cta{background:#FFD93D;border-color:#FFD93D}
.dd-promo.on .dd-cta-label{color:#0E0E0E}
.dd-promo.on .dd-check{background:#0E0E0E;border-color:#0E0E0E}
.co-fine{padding:14px 22px 20px;font-size:12px;color:var(--mute);line-height:1.5;border-top:1px solid var(--line-2);background:var(--paper)}
.co-fine a{color:var(--red)}

/* "Forgot something?" quick-add (mobile) */
.forgot{display:block;padding:16px 22px 18px;border-top:1px solid var(--line);background:#fff}
.forgot-trigger{display:flex;width:100%;align-items:center;justify-content:space-between;gap:10px;padding:4px 2px;background:none;border:0;cursor:pointer}
.forgot-trigger .ft-l{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:15px;letter-spacing:-.01em;color:var(--ink)}
.forgot-trigger .ft-plus{width:25px;height:25px;border-radius:7px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;transition:transform .2s}
.forgot-trigger.on .ft-plus{transform:rotate(45deg)}
.forgot-trigger .ft-r{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--red)}
.forgot-panel{display:none;padding:14px 0 0}
.forgot-panel.open{display:block}
.forgot-search{position:relative;display:flex;margin-bottom:12px}
.forgot-search > svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--mute);pointer-events:none}
.forgot-search input{width:100%;height:48px;border:1.5px solid var(--ink);border-radius:9px;padding:0 14px 0 40px;font-size:14.5px;background:#fff;color:var(--ink);outline:none}
.forgot-search input:focus{box-shadow:0 0 0 4px rgba(228,33,39,.14)}
/* Quick-add results — a wrapping grid of boxed cards, so every card is the
   same height and the Add buttons line up. Previously a flex row, which let
   card heights float with the title length. */
.forgot-results{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;padding:2px 0 8px}
.fr-card{border:1px solid var(--line);border-radius:11px;background:#fff;overflow:hidden;
  text-align:left;display:flex;flex-direction:column;padding:0;min-width:0}
.fr-media{aspect-ratio:1/1;position:relative;background:#fff;border-bottom:1px solid var(--line-2)}
.fr-media img{position:absolute;top:50%;left:50%;width:74%;height:74%;object-fit:contain;mix-blend-mode:multiply;transform:translate(-50%,-50%)}
.fr-body{padding:9px 10px 10px;display:flex;flex-direction:column;flex:1;min-width:0}
.fr-t{font-size:11.5px;font-weight:600;line-height:1.25;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:29px}
.fr-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px;font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--mute);line-height:1.3}
.fr-meta .fr-sku{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.fr-p{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--ink);margin-top:5px}

/* Actions pinned to the bottom so they align across cards of any title length */
.fr-actions{margin-top:auto;padding-top:9px;display:flex;flex-direction:column;gap:7px}
.fr-qty{display:grid;grid-template-columns:30px 1fr 30px;height:32px;border:1px solid var(--line);
  border-radius:8px;overflow:hidden;background:var(--cream-2)}
.fr-qty button{display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;
  color:var(--ink);background:var(--cream-2);border:0;cursor:pointer;padding:0}
.fr-qty input{border:0;background:#fff;text-align:center;font-family:var(--mono);font-size:12.5px;
  font-weight:700;color:var(--ink);min-width:0;width:100%;padding:0}
.fr-qty input:focus{outline:none}
/* Scoped: .sw-shop button (0,1,1) outranks a bare .fr-add (0,1,0) and would
   strip the fill. See the specificity note in INSTALL.md. */
.sw-shop .fr-add{height:34px;border-radius:8px;background:var(--ink);color:#fff;font-family:var(--display);
  font-size:11px;text-transform:uppercase;letter-spacing:.02em;display:flex;align-items:center;
  justify-content:center;gap:5px;border:0;cursor:pointer;width:100%;padding:0}
.sw-shop .fr-card.added .fr-add{background:var(--green)}
.fr-card.is-busy{opacity:.6;pointer-events:none}
.fr-empty{padding:16px 4px;color:var(--mute);font-size:13px}

@media (max-width:1024px){
  .checkout-layout{grid-template-columns:1fr}
  .co-summary{position:static}
}
@media (max-width:560px){
  .field-grid{grid-template-columns:1fr}
  .co-card{padding:20px 18px}
}

/* -- Checkout & Cart: mobile distraction-free header ------------- */
@media (max-width:860px){
  /* Centered sticky logo, search + hamburger row, no cart pill, no nav bars */
  body.checkout-page header.shop-head,
  body.cat-mix header.shop-head,
  body.cart-page header.shop-head,
  body.catalogue-page header.shop-head{position:relative;background:#FBF7F0;-webkit-backdrop-filter:none;backdrop-filter:none}
  body.checkout-page .mobile-logo-bar,
  body.cat-mix .mobile-logo-bar,
  body.cart-page .mobile-logo-bar,
  body.catalogue-page .mobile-logo-bar{display:flex;justify-content:center;position:sticky;position:-webkit-sticky;top:0;z-index:80;background:#FBF7F0;padding:13px 0;border-bottom:1px solid var(--line)}
  body.checkout-page header.shop-head .bar,
  body.cat-mix header.shop-head .bar,
  body.cart-page header.shop-head .bar,
  body.catalogue-page header.shop-head .bar{flex-wrap:wrap;align-items:center;gap:12px;padding:14px 0}
  body.checkout-page header.shop-head .logo,
  body.cat-mix header.shop-head .logo,
  body.cart-page header.shop-head .logo,
  body.catalogue-page header.shop-head .logo{display:none}
  body.checkout-page .search,
  body.cat-mix .search,
  body.cart-page .search,
  body.catalogue-page .search{order:2;flex:1 1 0%;min-width:0;max-width:none}
  body.checkout-page .search input,
  body.cat-mix .search input,
  body.cart-page .search input,
  body.catalogue-page .search input{min-width:0;width:100%}
  body.checkout-page .hamburger,
  body.cat-mix .hamburger,
  body.cart-page .hamburger,
  body.catalogue-page .hamburger{order:3;flex:0 0 60px;display:flex}
  body.checkout-page .head-right,
  body.cat-mix .head-right,
  body.cart-page .head-right,
  body.catalogue-page .head-right{display:none}
  body.checkout-page .shop-nav,
  body.cat-mix .shop-nav,
  body.cart-page .shop-nav,
  body.catalogue-page .shop-nav{display:none}
  body.checkout-page .cat-strip,
  body.cat-mix .cat-strip,
  body.cart-page .cat-strip,
  body.catalogue-page .cat-strip{display:none}


  /* CATALOGUE: logo stays at top, search + hamburger row is sticky */
  body.catalogue-page .mobile-logo-bar{position:static}
  body.catalogue-page header.shop-head{position:sticky;position:-webkit-sticky;top:0;z-index:90}

  /* Menu style B: slide-out navigation drawer from the right */
  body.menu-drawer .mobile-menu{display:flex;position:fixed;top:0;right:0;left:auto;height:100%;height:100dvh;width:min(84vw,320px);transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);border-top:0;border-left:0;box-shadow:-22px 0 50px -14px rgba(0,0,0,.6);padding:0 0 20px;overflow-y:auto;-webkit-overflow-scrolling:touch}
  body.menu-drawer .mobile-menu.open{transform:translateX(0)}
  body.menu-drawer .mm-drawer-head{display:flex}
  body.menu-drawer .mobile-menu a{margin:0 8px}
  body.menu-drawer .mobile-menu a:first-of-type{margin-top:8px}
  body.menu-drawer .menu-backdrop{display:block;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
  body.menu-drawer.menu-open .menu-backdrop{opacity:1;visibility:visible}
  body.menu-drawer.menu-open{overflow:hidden}
}

/* -- Footer --------------------------- */
footer.shop-foot{background:var(--ink);color:rgba(255,255,255,.7);padding:54px 0 26px;margin-top:64px}
footer.shop-foot .top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.08)}
footer.shop-foot h6{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5);font-weight:600;margin:0 0 16px}
footer.shop-foot ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;font-size:14px}
/* footer logo: white box behind SMOOTH for contrast on the dark footer */
footer.shop-foot .logo .smooth{background:#fff;color:var(--ink)}
footer.shop-foot .lock p{margin:16px 0 0;max-width:330px;font-size:14px;line-height:1.55}
footer.shop-foot .hours{margin-top:18px;font-family:var(--mono);font-size:12.5px;color:rgba(255,255,255,.7)}
footer.shop-foot .hours .lbl{display:block;font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:4px}
footer.shop-foot .bot{display:flex;justify-content:space-between;align-items:center;padding-top:20px;font-family:var(--mono);font-size:12px;color:rgba(255,255,255,.5);flex-wrap:wrap;gap:12px}

/* -- Accessibility --------------------------- */
.skip-link{position:fixed;top:8px;left:8px;background:var(--ink);color:#fff;padding:12px 16px;border-radius:6px;font-weight:600;font-size:14px;z-index:300;transform:translateY(-200%);transition:transform .15s}
.skip-link:focus{transform:translateY(0);outline:2px solid var(--yellow);outline-offset:2px}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* -- Mobile filter drawer (catalogue) --------------------------- */
.side-backdrop{display:none}
.drawer-head{display:none;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--paper);z-index:3}
.drawer-head h4{font-family:var(--display);font-size:19px;letter-spacing:-.01em;margin:0}
.drawer-head .x{width:42px;height:42px;border-radius:10px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;background:#fff;color:var(--ink)}
.drawer-foot{display:none;position:sticky;bottom:0;padding:14px 16px;background:var(--paper);border-top:1px solid var(--line);z-index:3}
.drawer-foot .btn{width:100%;height:52px;font-size:15px}

/* -- Responsive --------------------------- */
@media (max-width:1180px){
  .cat-grid{grid-template-columns:repeat(3,1fr)}
  .mini-card{flex:0 0 calc((100% - 42px) / 4)}
  .prod-grid{grid-template-columns:repeat(3,1fr)}
  body.cols-3 .prod-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1024px){
  .listing{grid-template-columns:1fr !important}
  .topfilter{display:none !important}
  .search{max-width:none}
  /* sidebar becomes an off-canvas drawer */
  .side{position:fixed;top:0;left:0;height:100%;max-height:none;width:min(89vw,360px);max-width:none;background:var(--paper);z-index:140;transform:translateX(-100%);transition:transform .26s cubic-bezier(.4,0,.2,1);overflow-y:auto;display:block;box-shadow:0 0 50px rgba(0,0,0,.4);padding:0;-webkit-overflow-scrolling:touch}
  body.filters-open .side{transform:translateX(0) !important}
  .side .panel{margin:14px 14px 0;border-radius:12px}
  .side .panel:last-of-type{margin-bottom:14px}
  /* let panels size to content — no nested scroll, no flex squish */
  .side .panel .pb{max-height:none !important;overflow:visible !important}
  .side-backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.5);opacity:0;visibility:hidden;transition:opacity .22s,visibility .22s;z-index:139}
  body.filters-open .side-backdrop{opacity:1 !important;visibility:visible !important}
  body.filters-open{overflow:hidden}
  .drawer-head{display:flex}
  .drawer-foot{display:block}
}
@media (max-width:860px){
  .wrap{padding:0 20px}
  header.shop-head .bar{height:auto;flex-wrap:wrap;gap:14px;padding:14px 0}
  .search{order:3;flex-basis:100%;max-width:none}
  .shop-nav .nav-note{display:none}
  .deal-band .db-inner{grid-template-columns:1fr;padding:28px 24px}
  .deal-band .db-art{display:none}
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .mini-card{flex:0 0 calc((100% - 14px) / 2)}
  .prod-grid,body.cols-3 .prod-grid{grid-template-columns:repeat(2,1fr)}
  footer.shop-foot .top{grid-template-columns:1fr 1fr;gap:28px}
  .cat-strip .wrap{overflow-x:auto;flex-wrap:nowrap}
  .cat-strip a{white-space:nowrap}
}
@media (max-width:560px){
  .topbar .l span.hide-sm{display:none}
  .head-right .icon-link{display:none}
  .density-toggle{display:none}
  .mini-card{flex:0 0 100%}
  .prod-grid,body.cols-3 .prod-grid,.cat-grid{grid-template-columns:1fr 1fr}
  .deal-band h1{font-size:40px}
  .prod .price{font-size:21px}
  .prod .body{padding:13px 13px 15px}
  .l-toolbar{gap:10px}
  .l-tools{flex-wrap:wrap;gap:8px}
  .mobile-filter-btn{flex:1;min-width:120px;justify-content:center;height:42px}
  footer.shop-foot .top{grid-template-columns:1fr;text-align:left}
  footer.shop-foot .bot{flex-direction:column;align-items:flex-start;gap:10px}
}
@media (max-width:440px){
  .prod-grid,body.cols-3 .prod-grid{grid-template-columns:1fr}
  .cat-grid{grid-template-columns:1fr}
  .topbar .r{gap:12px}
  .topbar .r span:first-child{display:none}
}

/* -- Empty cart (bespoke) ------------------------- */
.cart-empty-box{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:48px 32px;text-align:center;margin:24px 0 64px}
.cart-empty-box p{font-size:17px;color:var(--mute);margin:0 0 20px}

/* ============================================================
   Cart — AJAX test additions (qty, min-order, modal, notices)
   ============================================================ */

/* Qty input: text field, no number spinners, never clipped */
.sw-shop .cart-qty input{ -moz-appearance:textfield; appearance:textfield; padding:0 2px; min-width:0 }
.sw-shop .cart-qty input::-webkit-outer-spin-button,
.sw-shop .cart-qty input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }

/* Busy state during an AJAX update */
.sw-shop #swCartRegion.is-busy{ opacity:.55; pointer-events:none; transition:opacity .12s }

/* Minimum-order gate (replaces the checkout button below the threshold) */
.sw-shop .sw-minorder{
  display:flex; gap:10px; align-items:flex-start;
  margin-top:16px; padding:14px 16px;
  background:#FDECEC; border:1px solid rgba(228,33,39,.28);
  border-radius:11px; color:var(--red-deep);
  font-size:13.5px; line-height:1.45;
}
.sw-shop .sw-minorder svg{ flex:0 0 auto; margin-top:1px; color:var(--red) }
.sw-shop .sw-minorder b{ color:var(--red-deep); font-weight:700 }

/* WooCommerce notices, styled to match (coupon errors, min-order plugin, etc.) */
body.woocommerce-cart .woocommerce-notices-wrapper,
.sw-shop .woocommerce-message,
.sw-shop .woocommerce-info,
.sw-shop .woocommerce-error{ font-family:var(--sans) }
body.woocommerce-cart .woocommerce-error,
.sw-shop .woocommerce-error{
  list-style:none; margin:0 0 18px; padding:13px 16px;
  background:#FDECEC; border:1px solid rgba(228,33,39,.3);
  border-radius:11px; color:var(--red-deep); font-size:14px;
}
body.woocommerce-cart .woocommerce-message,
.sw-shop .woocommerce-message{
  list-style:none; margin:0 0 18px; padding:13px 16px;
  background:#EAF7EF; border:1px solid rgba(31,168,91,.3);
  border-radius:11px; color:#137a41; font-size:14px;
}
body.woocommerce-cart .woocommerce-info,
.sw-shop .woocommerce-info{
  list-style:none; margin:0 0 18px; padding:13px 16px;
  background:#FFF7DB; border:1px solid rgba(232,162,58,.35);
  border-radius:11px; color:#8a6412; font-size:14px;
}

/* Remove-confirm modal (shown only when a qty is set to 0) */
.sw-modal[hidden]{ display:none }
.sw-modal{ position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; padding:20px }
.sw-modal-backdrop{ position:absolute; inset:0; background:rgba(14,14,14,.5); backdrop-filter:blur(2px) }
.sw-modal-card{
  position:relative; background:#fff; border-radius:16px; max-width:380px; width:100%;
  padding:26px 24px 20px; box-shadow:0 24px 60px -18px rgba(0,0,0,.5);
  animation:swPop .16s ease-out;
}
@keyframes swPop{ from{ transform:translateY(8px) scale(.98); opacity:0 } to{ transform:none; opacity:1 } }
.sw-modal-msg{ font-family:var(--display); font-size:19px; line-height:1.2; margin:0 0 8px; color:var(--ink) }
.sw-modal-sub{ font-family:var(--sans); font-size:14px; line-height:1.5; margin:0 0 4px; color:var(--ink-3) }
.sw-modal-sub[hidden]{ display:none }
.sw-modal-msg:last-of-type{ margin-bottom:20px }
.sw-modal-sub + .sw-modal-actions{ margin-top:20px }
.sw-modal-actions{ display:flex; gap:10px }
.sw-modal-actions .btn{ flex:1; height:46px }
body.sw-modal-open{ overflow:hidden }

/* On mobile the remove control sits full-width with a red base — keep that
   red base on tap instead of the desktop grey. */
@media (hover: none) and (max-width: 560px) {
  .sw-shop .cart-row .ci-rm:hover { color:var(--red); background:#fff; border-color:rgba(228,33,39,.4) }
}

/* ============================================================
   Checkout — WooCommerce field bridge + place order + forgot add
   Maps Woo's .form-row markup onto the mockup's .field look.
   ============================================================ */

/* Field wrapper (Woo emits <p class="form-row ...">) */
.sw-shop .co-card .field-grid .form-row{ margin:0; display:block }
.sw-shop .co-card .form-row-first{ grid-column:1 }
.sw-shop .co-card .form-row-last{ grid-column:2 }
.sw-shop .co-card .form-row-wide,
.sw-shop .co-card .form-row.notes,
.sw-shop .co-card .form-row.woocommerce-input-wrapper{ grid-column:1/-1 }
@media (max-width:560px){
  .sw-shop .co-card .form-row-first,
  .sw-shop .co-card .form-row-last{ grid-column:1 }
}

/* Label + required/optional markers */
.sw-shop .co-card .form-row > label{ font-size:13px; font-weight:600; color:var(--ink-3); display:flex; align-items:center; gap:4px; margin:0 0 7px }
.sw-shop .co-card .form-row .required,
.sw-shop .co-card .form-row abbr.required{ color:var(--red); font-weight:700; text-decoration:none; border:0 }
.sw-shop .co-card .form-row .optional{ color:var(--mute); font-weight:500; font-size:12px }

/* Inputs / selects / textareas */
.sw-shop .co-card .woocommerce-input-wrapper{ display:block; width:100% }
.sw-shop .co-card .form-row input.input-text,
.sw-shop .co-card .form-row select,
.sw-shop .co-card .form-row textarea,
.sw-shop .co-card .form-row .select2-selection{
  height:48px; border:1.5px solid var(--line); border-radius:9px; padding:0 14px;
  font-size:14.5px; background:#fff; color:var(--ink); outline:none; width:100%;
  transition:border-color .15s,box-shadow .15s; font-family:var(--sans);
}
.sw-shop .co-card .form-row textarea{ height:auto; padding:12px 14px; min-height:96px; resize:vertical; line-height:1.5 }
.sw-shop .co-card .form-row input:focus,
.sw-shop .co-card .form-row select:focus,
.sw-shop .co-card .form-row textarea:focus{ border-color:var(--ink); box-shadow:0 0 0 4px rgba(228,33,39,.12) }
.sw-shop .co-card .form-row input::placeholder,
.sw-shop .co-card .form-row textarea::placeholder{ color:#a6a6a6 }
/* select2 (country/state) sizing */
.sw-shop .co-card .select2-container .select2-selection--single{ height:48px; display:flex; align-items:center }
.sw-shop .co-card .select2-container--default .select2-selection--single .select2-selection__arrow{ height:46px }

/* Place order button (Woo #place_order) — match .place-order */
.sw-shop #payment{ background:transparent; padding:0; border:0 }
.sw-shop #payment .payment_methods{ list-style:none; margin:0 0 14px; padding:0 }
.sw-shop #payment .payment_methods li{ margin:0 0 8px }
.sw-shop #payment .place-order,
.sw-shop #payment #place_order,
.sw-shop button#place_order{
  display:flex; align-items:center; justify-content:center; gap:10px; width:100%; height:58px;
  background:var(--red); color:#fff; border-radius:11px; font-family:var(--display); font-size:16px;
  letter-spacing:.02em; text-transform:uppercase; box-shadow:0 10px 22px -10px rgba(228,33,39,.55);
  transition:transform .15s,background .15s; float:none;
}
@media (hover:none){ .sw-shop button#place_order:hover{ background:var(--red); transform:none } }

/* Forgot panel open/close */
.sw-shop .forgot-panel[hidden]{ display:none }
.sw-shop .fr-p .gst{ font-weight:500; color:var(--mute); font-size:10px }

/* Cart qty: disabled + button when at available stock (backorders off) */
.sw-shop .cart-qty button.sw-qplus:disabled,
.sw-shop .cart-qty button.sw-qplus[aria-disabled="true"]{
  opacity:.4; cursor:not-allowed; background:var(--cream-2); color:var(--mute);
}

/* Real WooCommerce shipping rows (postcode/state zones) in the checkout summary */
.sw-shop .co-shiptable{ width:100%; border-collapse:collapse; margin:0 }
.sw-shop .co-shiptable th{ text-align:left; font-weight:400; font-size:14px; color:var(--ink-3); padding:8px 0; vertical-align:top }
.sw-shop .co-shiptable td{ text-align:right; font-size:14px; color:var(--ink); padding:8px 0; font-family:var(--mono); font-weight:600 }
.sw-shop .co-shiptable .woocommerce-shipping-methods{ list-style:none; margin:0; padding:0 }
.sw-shop .co-shiptable .woocommerce-shipping-methods li{
  display:flex; gap:9px; align-items:center; justify-content:flex-end;
  margin:0 0 6px; padding:0; font-family:var(--sans); font-weight:500; font-size:13.5px; line-height:1.3;
}
.sw-shop .co-shiptable .woocommerce-shipping-methods li:last-child{ margin-bottom:0 }
/* the radio input itself */
.sw-shop .co-shiptable .woocommerce-shipping-methods li input[type="radio"]{
  -webkit-appearance:none; appearance:none; -moz-appearance:none;
  width:18px; height:18px; min-width:18px; margin:0; padding:0; flex:0 0 18px;
  border:2px solid var(--line); border-radius:50%; background:#fff; cursor:pointer;
  position:relative; top:0; transition:border-color .15s; box-shadow:none; order:2;
}
.sw-shop .co-shiptable .woocommerce-shipping-methods li input[type="radio"]:checked{ border-color:var(--red) }
.sw-shop .co-shiptable .woocommerce-shipping-methods li input[type="radio"]:checked::after{
  content:''; position:absolute; inset:3px; border-radius:50%; background:var(--red);
}
.sw-shop .co-shiptable .woocommerce-shipping-methods li label{
  order:1; cursor:pointer; margin:0; color:var(--ink); font-weight:500; text-align:right;
}
.sw-shop .co-shiptable .woocommerce-shipping-methods li .amount{ font-family:var(--mono); font-weight:700 }
.sw-shop .co-shiptable .woocommerce-shipping-destination{ font-size:12px; color:var(--mute); font-family:var(--sans); font-weight:400 }
.sw-shop .co-shiptable .shipping-calculator-button{ color:var(--red); font-size:12.5px }

/* ============================================================
   Checkout summary — hardening against theme/Woo/plugin CSS.
   The live site (Astra + Woo + plugins) can force display:flex /
   float onto the summary or review wrapper, which flips it into a
   broken side-by-side with the DD block on top. Force a single
   vertical column and clip any horizontal overflow.
   ============================================================ */
.sw-shop .co-summary{ display:flex !important; flex-direction:column !important; align-items:stretch !important; min-width:0; overflow:hidden }
.sw-shop .co-summary > *{ min-width:0; max-width:100%; float:none !important }
.sw-shop #order_review,
.sw-shop .woocommerce-checkout-review-order,
.sw-shop .woocommerce-checkout-review-order-table{ display:block !important; width:100% !important; float:none !important; min-width:0; margin:0 }
.sw-shop .co-lines,
.sw-shop .co-totals,
.sw-shop .co-pay{ display:block !important; width:100% !important; float:none !important }
.sw-shop .co-lines{ overflow-x:hidden }
/* WooCommerce payment box shouldn't float or set its own width */
.sw-shop #payment{ display:block !important; width:100% !important; float:none !important; background:transparent }
.sw-shop #payment .form-row.place-order{ float:none !important; width:100% !important; padding:0 !important; margin:0 }

/* ============================================================
   Checkout fidelity + hardening pass (match the zip's design,
   override Astra/Woo interference on the live site).
   ============================================================ */

/* Fields: force the mockup sizing so Astra input rules can't inflate them */
.sw-shop .co-card .field-grid .form-row input.input-text,
.sw-shop .co-card .field-grid .form-row input[type="text"],
.sw-shop .co-card .field-grid .form-row input[type="tel"],
.sw-shop .co-card .field-grid .form-row input[type="email"],
.sw-shop .co-card .field-grid .form-row input[type="number"],
.sw-shop .co-card .field-grid .form-row input[type="password"],
.sw-shop .co-card .field-grid .form-row select{
  height:48px !important; min-height:48px !important; line-height:normal !important;
  padding:0 14px !important; border:1.5px solid var(--line) !important; border-radius:9px !important;
  margin:0 !important; box-shadow:none; background-color:#fff;
}
.sw-shop .co-card .field-grid .form-row > label{ margin:0 0 7px !important; padding:0 !important; line-height:1.3 }
.sw-shop .co-card .field-grid .form-row{ margin:0 !important }

/* Strip stray borders/backgrounds Woo/Astra put on the structural wrappers
   (source of the thin grey line beside the billing card) */
.sw-shop form.woocommerce-checkout,
.sw-shop #customer_details,
.sw-shop .woocommerce-billing-fields,
.sw-shop .woocommerce-shipping-fields,
.sw-shop .woocommerce-additional-fields,
.sw-shop .woocommerce-billing-fields__field-wrapper,
.sw-shop .woocommerce-shipping-fields__field-wrapper,
.sw-shop .woocommerce-additional-fields__field-wrapper{
  border:0 !important; box-shadow:none !important; background:transparent !important;
}
.sw-shop .co-main{ min-width:0; border:0 }

/* Hide Woo's login / coupon toggle bars — not part of this design */
.sw-shop .woocommerce-form-login-toggle,
.sw-shop .woocommerce-form-coupon-toggle,
.sw-shop form.checkout_coupon,
.sw-shop form.login{ display:none !important }

/* Order-lines scrollbar: subtle thin bar instead of the chunky native one */
.sw-shop .co-lines{ scrollbar-width:thin; scrollbar-color:var(--line) transparent }
.sw-shop .co-lines::-webkit-scrollbar{ width:6px }
.sw-shop .co-lines::-webkit-scrollbar-track{ background:transparent }
.sw-shop .co-lines::-webkit-scrollbar-thumb{ background:var(--line); border-radius:3px }

/* ============================================================
   Kill WooCommerce/Astra core checkout CSS that fights the design:
   `form #order_review { padding:0 2em; border:0 2px 2px solid }` adds
   side padding + a grey border to the summary; and Woo's .form-row
   widths break the paired first/last name fields. Override explicitly.
   ============================================================ */
.sw-shop #order_review{
  padding:0 !important; border:0 !important; margin:0 !important;
  background:transparent !important; width:100% !important; float:none !important;
}
.sw-shop #order_review_heading{ display:none !important }

/* Paired fields: make Woo's .form-row-first/-last each take an exact half so
   first/last name line up and match the full-width rows below. */
.sw-shop .co-card .field-grid{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:16px !important; float:none !important }
.sw-shop .co-card .field-grid .form-row{ width:auto !important; float:none !important; margin:0 !important; padding:0 !important }
.sw-shop .co-card .field-grid .form-row-first{ grid-column:1 !important; clear:none !important }
.sw-shop .co-card .field-grid .form-row-last{ grid-column:2 !important }
.sw-shop .co-card .field-grid .form-row-wide,
.sw-shop .co-card .field-grid .form-row.notes,
.sw-shop .co-card .field-grid .form-row.create-account,
.sw-shop .co-card .field-grid p.form-row:not(.form-row-first):not(.form-row-last){ grid-column:1/-1 !important }
@media (max-width:560px){
  .sw-shop .co-card .field-grid{ grid-template-columns:1fr !important }
  .sw-shop .co-card .field-grid .form-row-first,
  .sw-shop .co-card .field-grid .form-row-last{ grid-column:1 !important }
}

/* ============================================================
   Order received / Thank-you page
   ============================================================ */
.sw-shop.thankyou-page .ty-hero{ text-align:center; max-width:680px; margin:8px auto 30px; padding:0 8px }
.sw-shop.thankyou-page .ty-check{
  width:66px; height:66px; border-radius:50%; background:var(--green);
  display:flex; align-items:center; justify-content:center; margin:0 auto 18px;
  box-shadow:0 12px 26px -10px rgba(31,168,91,.6); animation:tyPop .3s ease-out;
}
@keyframes tyPop{ from{ transform:scale(.7); opacity:0 } to{ transform:none; opacity:1 } }
.sw-shop.thankyou-page .ty-hero .eyebrow{ justify-content:center }
.sw-shop.thankyou-page .ty-hero h1{ font-size:clamp(30px,3.6vw,46px); letter-spacing:-.025em; text-transform:uppercase; margin:12px 0 0 }
.sw-shop.thankyou-page .ty-lead{ font-size:16px; color:var(--ink-3); line-height:1.55; margin:14px auto 0; max-width:560px }
.sw-shop.thankyou-page .ty-meta{
  display:flex; flex-wrap:wrap; justify-content:center; gap:0; margin:26px auto 0;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; max-width:640px;
}
.sw-shop.thankyou-page .ty-meta .tym{ flex:1 1 auto; min-width:130px; padding:14px 18px; text-align:left; border-right:1px solid var(--line-2) }
.sw-shop.thankyou-page .ty-meta .tym:last-child{ border-right:0 }
.sw-shop.thankyou-page .ty-meta .k{ display:block; font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--mute) }
.sw-shop.thankyou-page .ty-meta .v{ display:block; font-family:var(--display); font-size:16px; letter-spacing:-.01em; color:var(--ink); margin-top:5px; word-break:break-word }

.sw-shop.thankyou-page .ty-layout{ display:grid; grid-template-columns:1fr 400px; gap:30px; align-items:start; margin-bottom:64px }

/* what-happens-next steps */
.sw-shop.thankyou-page .ty-steps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px }
.sw-shop.thankyou-page .ty-steps li{ display:flex; gap:14px; align-items:flex-start }
.sw-shop.thankyou-page .ty-steps .s-n{ width:28px; height:28px; flex-shrink:0; border-radius:50%; background:var(--cream-2); border:1.5px solid var(--line); color:var(--ink); font-family:var(--mono); font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center }
.sw-shop.thankyou-page .ty-steps .s-b{ font-size:14px; line-height:1.5; color:var(--ink-3) }
.sw-shop.thankyou-page .ty-steps .s-b b{ color:var(--ink); font-weight:700 }

/* addresses */
.sw-shop.thankyou-page .ty-addr-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px }
.sw-shop.thankyou-page .ty-addr-col h4{ font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--mute); margin:0 0 12px }
/* labelled rows: field name beside the value */
.sw-shop.thankyou-page .ty-dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:0 16px; align-items:baseline }
.sw-shop.thankyou-page .ty-dl dt{
  font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--mute); padding:7px 0; white-space:nowrap; border-top:1px solid var(--line-2);
}
.sw-shop.thankyou-page .ty-dl dd{
  margin:0; padding:7px 0; font-size:14px; color:var(--ink); font-weight:500;
  border-top:1px solid var(--line-2); word-break:break-word;
}
.sw-shop.thankyou-page .ty-dl dt:first-of-type,
.sw-shop.thankyou-page .ty-dl dd:first-of-type{ border-top:0 }
.sw-shop.thankyou-page .ty-note{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line-2) }
.sw-shop.thankyou-page .ty-note .k{ font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--mute) }
.sw-shop.thankyou-page .ty-note p{ margin:6px 0 0; font-size:14px; line-height:1.5; color:var(--ink-3) }

/* DD confirmation card on thank-you */
.sw-shop.thankyou-page .ty-dd{ padding:0; margin-bottom:20px }
.sw-shop.thankyou-page .ty-dd .dd-promo{ cursor:default }
.sw-shop.thankyou-page .ty-dd .dd-cta{ margin-top:14px }

/* summary reuses .co-summary; continue-shopping button reuses .place-order */
.sw-shop.thankyou-page .ty-summary .place-order{ text-decoration:none }

@media (max-width:1024px){
  .sw-shop.thankyou-page .ty-layout{ grid-template-columns:1fr }
}
@media (min-width:1441px){
  body.checkout-page .wrap{ max-width:1680px }
}
@media (max-width:560px){
  .sw-shop.thankyou-page .ty-addr-grid{ grid-template-columns:1fr }
  .sw-shop.thankyou-page .ty-meta .tym{ min-width:50%; border-bottom:1px solid var(--line-2) }
}

/* Re-assert the card look for billing/notes cards. The wrapper-border strip
   above (for the grey line) also removed their white bg + border because those
   sections carry Woo's field-wrapper classes. Cards must stay white + bordered. */
.sw-shop .co-card.woocommerce-billing-fields,
.sw-shop .co-card.woocommerce-shipping-fields,
.sw-shop .co-card.woocommerce-additional-fields,
.sw-shop .co-card{
  background:#fff !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-card) !important;
}

/* ============================================================
   Checkout: billing + delivery side-by-side when "deliver to a
   different address" is on; toggle sits above billing.
   ============================================================ */
/* Toggle above the billing card */
.sw-shop .co-main > .ship-toggle{ margin:0 0 18px }

/* customer_details stacks by default (billing full width, notes full width) */
.sw-shop #customer_details{ display:grid; grid-template-columns:1fr; gap:0; align-items:start }
.sw-shop #customer_details > .co-card{ margin-bottom:20px }

/* When ship-to-different is active, billing | delivery side by side */
.sw-shop #customer_details.sw-ship-diff{ grid-template-columns:1fr 1fr; gap:20px }
.sw-shop #customer_details.sw-ship-diff > .woocommerce-billing-fields{ grid-column:1; margin-bottom:0 }
.sw-shop #customer_details.sw-ship-diff > .co-ship{ grid-column:2; margin-top:0; margin-bottom:0 }
.sw-shop #customer_details.sw-ship-diff > .woocommerce-additional-fields{ grid-column:1 / -1; margin-top:20px }
/* delivery card no longer needs its own top margin in the grid */
.sw-shop #customer_details .co-ship{ margin-top:0 }
@media (max-width:768px){
  /* stack again on small screens */
  .sw-shop #customer_details.sw-ship-diff{ grid-template-columns:1fr }
  .sw-shop #customer_details.sw-ship-diff > .co-ship{ grid-column:1; margin-bottom:20px }
}

/* ==================================================================
   SINGLE PRODUCT PAGE (body.product-page .sw-pd-wrap)
   Ported from the Shop - Product mockup. Reuses the tile tokens
   (.prod / .buy / .qty / .flag / .stock) already defined above.
   ================================================================== */
body.product-page .sw-pd-wrap{max-width:var(--wrap,1280px);margin:0 auto;padding:0 20px}
body.product-page .sw-pd-wrap .crumb-row{padding:14px 0 0}

/* Woo's product row becomes the two-column layout */
/* !important throughout: Astra's woocommerce stylesheet loads after ours and
   re-floats .summary / .woocommerce-product-gallery at ~48% each. */
body.product-page .sw-pd-wrap div.product{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px;align-items:stretch;margin-top:20px;float:none!important;width:auto!important}
body.product-page .sw-pd-wrap div.product::before,
body.product-page .sw-pd-wrap div.product::after{content:none!important;display:none!important}
/* Kill the float layout on BOTH columns, whatever wraps them. */
body.product-page .sw-pd-wrap div.product > .summary,
body.product-page .sw-pd-wrap div.product > .entry-summary,
body.product-page .sw-pd-wrap div.product > .pd-gallery,
body.product-page .sw-pd-wrap div.product > .woocommerce-product-gallery{float:none!important;width:auto!important;max-width:none!important;margin:0!important;min-width:0}
body.product-page .sw-pd-wrap div.product > .summary,
body.product-page .sw-pd-wrap div.product > .entry-summary{margin-top:0!important;padding:0!important}
body.product-page .sw-pd-wrap div.product > .pd-gallery{padding:0!important}
body.product-page .sw-pd-wrap .woocommerce-notices-wrapper:empty{display:none!important;margin:0!important}
body.product-page .sw-pd-wrap div.product > *:first-child{margin-top:0!important}

/* --- Gallery (ours — see sw_pd_render_gallery) --- */
body.product-page .sw-pd-wrap .pd-gallery{display:flex;flex-direction:column;height:100%;min-height:420px;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}
/* flex:1 1 0 + min-height:0 => the photo never dictates the row height, so the
   panel tracks the info column and the image fits inside whatever it gets. */
body.product-page .sw-pd-wrap .pd-frame{position:relative;flex:1 1 0;min-height:0;display:flex;align-items:center;justify-content:center;padding:44px}
body.product-page .sw-pd-wrap .pd-main{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;mix-blend-mode:multiply}
body.product-page .sw-pd-wrap .pd-flags{position:absolute;top:16px;left:16px;display:flex;flex-direction:column;gap:7px;z-index:3}
body.product-page .sw-pd-wrap .pd-zoom{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--mute);z-index:3;transition:color .15s,border-color .15s}
body.product-page .sw-pd-wrap .pd-zoom svg{width:18px;height:18px}

/* Thumbnail strip — only when a product has more than one image */
body.product-page .sw-pd-wrap .pd-thumbs{flex:0 0 auto;display:flex;gap:10px;list-style:none;margin:0;padding:14px;border-top:1px solid var(--line);overflow-x:auto;scrollbar-width:thin}
body.product-page .sw-pd-wrap .pd-thumbs li{flex:0 0 auto;margin:0}
body.product-page .sw-pd-wrap .pd-thumb{display:block;width:68px;height:68px;padding:6px;background:#fff;border:1px solid var(--line);border-radius:8px;cursor:pointer;opacity:.6;transition:opacity .15s,border-color .15s}
body.product-page .sw-pd-wrap .pd-thumb img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
body.product-page .sw-pd-wrap .pd-thumb.is-active{opacity:1;border-color:var(--ink)}

/* Lightbox */
.sw-pd-lightbox{position:fixed;inset:0;z-index:99999;background:rgba(14,14,14,.9);display:flex;align-items:center;justify-content:center;padding:40px;opacity:0;pointer-events:none;transition:opacity .2s}
.sw-pd-lightbox.show{opacity:1;pointer-events:auto}
.sw-pd-lightbox img{max-width:100%;max-height:100%;object-fit:contain}
.sw-pd-lightbox .close{position:absolute;top:22px;right:26px;width:44px!important;height:44px!important;min-width:0!important;max-width:none!important;padding:0!important;margin:0!important;border:0!important;border-radius:50%!important;background:#fff!important;color:#0E0E0E!important;font-family:var(--sans);font-size:24px!important;font-weight:400!important;line-height:1!important;letter-spacing:0!important;text-transform:none!important;box-shadow:none!important;display:flex!important;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto}

/* --- Info column --- */
body.product-page .sw-pd-wrap .pd-info{min-width:0;padding:10px}
body.product-page .sw-pd-wrap .brand-link{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--red)}
body.product-page .sw-pd-wrap .pd-info h1{display:block!important;visibility:visible!important;margin:10px 0 0!important;font-family:var(--display);font-size:clamp(26px,3vw,38px);letter-spacing:-.02em;line-height:1.02;margin:10px 0 0}
body.product-page .sw-pd-wrap .pd-statline{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:14px}
body.product-page .sw-pd-wrap .pd-statline .stock{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
body.product-page .sw-pd-wrap .pd-statline .stock .d{width:8px;height:8px;border-radius:50%}
body.product-page .sw-pd-wrap .pd-statline .stock.in{color:var(--green)}
body.product-page .sw-pd-wrap .pd-statline .stock.in .d{background:var(--green);box-shadow:0 0 0 3px rgba(31,168,91,.16)}
body.product-page .sw-pd-wrap .pd-statline .stock.low{color:#B8741A}
body.product-page .sw-pd-wrap .pd-statline .stock.low .d{background:var(--amber);box-shadow:0 0 0 3px rgba(232,162,58,.18)}
body.product-page .sw-pd-wrap .pd-statline .stock.out{color:var(--mute)}
body.product-page .sw-pd-wrap .pd-statline .stock.out .d{background:var(--mute)}
body.product-page .sw-pd-wrap .pd-cat{font-family:var(--mono);font-size:11.5px;color:var(--mute);text-transform:uppercase;letter-spacing:.04em}

/* Spec grid */
body.product-page .sw-pd-wrap .pd-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:18px}
body.product-page .sw-pd-wrap .pd-meta .cell{background:#fff;padding:12px 14px;min-width:0}
body.product-page .sw-pd-wrap .pd-meta .k{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
body.product-page .sw-pd-wrap .pd-meta .v{font-family:var(--mono);font-size:14px;font-weight:700;color:var(--ink);margin-top:4px;overflow-wrap:anywhere}
body.product-page .sw-pd-wrap .pd-meta .v.is-green{color:var(--green)}

/* Buy card */
body.product-page .sw-pd-wrap .pd-buy{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px;margin-top:20px}
body.product-page .sw-pd-wrap .pd-priceline{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
body.product-page .sw-pd-wrap .pd-price{font-family:var(--display);font-size:40px;letter-spacing:-.02em;color:var(--ink)}
body.product-page .sw-pd-wrap .pd-price .gst{font-family:var(--sans);font-size:14px;font-weight:600;font-style:italic;color:var(--mute);margin-left:4px;letter-spacing:0}
body.product-page .sw-pd-wrap .pd-was{font-family:var(--mono);font-size:15px;color:var(--mute);text-decoration:line-through}
body.product-page .sw-pd-wrap .pd-save{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--yellow);color:var(--ink);padding:5px 10px;border-radius:6px;transform:skewX(-6deg)}
body.product-page .sw-pd-wrap .pd-save span{display:inline-block;transform:skewX(6deg)}
body.product-page .sw-pd-wrap .pd-boxnote{font-size:13.5px;color:var(--ink-3);margin-top:8px}
body.product-page .sw-pd-wrap .pd-boxnote b{color:var(--ink)}
body.product-page .sw-pd-wrap .pd-controls{display:grid;grid-template-columns:200px 1fr;gap:12px;margin-top:16px;align-items:stretch}
body.product-page .sw-pd-wrap .pd-controls .qty{height:54px;grid-template-columns:52px 1fr 52px}
/* 4+ digit quantities were clipping */
body.product-page .sw-pd-wrap .pd-controls .qty input{font-size:17px;padding:0 4px;min-width:0}
body.product-page .sw-pd-wrap .pd-controls .buy{height:54px;padding:0 14px;gap:3px}
body.product-page .sw-pd-wrap .pd-buy .buy-actions{display:grid;grid-template-columns:1fr;gap:12px}
body.product-page .sw-pd-wrap .pd-buy .buy-actions.dual{grid-template-columns:1fr 1fr}

/* Two buttons in one row alongside the stepper is cramped — give the pair
   their own full-width row underneath. */
body.product-page .sw-pd-wrap .pd-controls.is-dual{grid-template-columns:1fr}
body.product-page .sw-pd-wrap .pd-controls.is-dual .qty{width:200px}

/* Buy Unit and Buy Box: IDENTICAL geometry and type — they differ only in
   emphasis (filled vs outlined), not in shape or size. */
body.product-page .sw-pd-wrap .pd-buy .buy{display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:9px;border:1.5px solid transparent;font-family:var(--display);font-size:14px;letter-spacing:.02em;text-transform:uppercase;line-height:1.1;white-space:nowrap}
body.product-page .sw-pd-wrap .pd-buy .buy .lbl{font-size:14px}
body.product-page .sw-pd-wrap .pd-buy .buy .per{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.06em;opacity:.85;margin-top:3px}
body.product-page .sw-pd-wrap .pd-buy .buy.box{background:var(--red);border-color:var(--red);color:#fff}
body.product-page .sw-pd-wrap .pd-buy .buy.unit{background:#fff;border-color:var(--red);color:var(--red)}
body.product-page .sw-pd-wrap .pd-buy .buy.unit .per{opacity:.75}
body.product-page .sw-pd-wrap .pd-oos{margin-top:16px;padding:14px 16px;border:1px solid var(--line);border-left:3px solid var(--red);border-radius:10px;font-size:14px;color:var(--ink-3)}
body.product-page .sw-pd-wrap .pd-gst{display:flex;align-items:center;gap:9px;margin-top:14px;font-size:12.5px;color:var(--mute)}
body.product-page .sw-pd-wrap .pd-gst svg{width:16px;height:16px;flex:0 0 auto}

/* Guest (public catalogue) */
body.product-page .sw-pd-wrap .pd-guest-note{font-size:14.5px;line-height:1.6;color:var(--ink-3);margin:0 0 14px}
body.product-page .sw-pd-wrap .pd-guest-cta{display:flex;align-items:center;justify-content:center;height:54px;text-align:center}

/* Purchase history */
body.product-page .sw-pd-wrap .pd-history{margin-top:20px;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
/* Collapsed by default — native <details>, so it works without JS. */
body.product-page .sw-pd-wrap details.pd-history > summary{display:flex;align-items:center;gap:10px;margin:0;padding:14px 16px;cursor:pointer;list-style:none;font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);transition:color .15s}
body.product-page .sw-pd-wrap details.pd-history > summary::-webkit-details-marker{display:none}
body.product-page .sw-pd-wrap details.pd-history > summary::marker{content:''}
body.product-page .sw-pd-wrap details.pd-history summary .ttl{flex:1 1 auto}
body.product-page .sw-pd-wrap details.pd-history summary .cnt{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:var(--cream-2,#F2EFE8);color:var(--ink);font-size:10px;letter-spacing:0}
body.product-page .sw-pd-wrap details.pd-history summary .chev{flex:0 0 auto;width:17px;height:17px;transition:transform .18s}
body.product-page .sw-pd-wrap details.pd-history[open] > summary{border-bottom:1px solid var(--line);color:var(--ink)}
body.product-page .sw-pd-wrap details.pd-history[open] summary .chev{transform:rotate(180deg)}
/* The theme sets borders on table/td/th globally and a bottom margin on
   tables — both have to be zeroed explicitly or you get doubled rules and a
   gap under the last row. */
body.product-page .sw-pd-wrap .pd-history table{width:100%;border-collapse:collapse;border-spacing:0;margin:0!important;border:0!important;background:transparent}
body.product-page .sw-pd-wrap .pd-history thead,
body.product-page .sw-pd-wrap .pd-history tbody,
body.product-page .sw-pd-wrap .pd-history tr{border:0!important;background:transparent}
body.product-page .sw-pd-wrap .pd-history th{padding:9px 16px;border:0!important;border-bottom:1px solid var(--line)!important;font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);text-align:left;background:transparent}
body.product-page .sw-pd-wrap .pd-history td{padding:11px 16px;border:0!important;border-bottom:1px solid var(--line)!important;font-family:var(--mono);font-size:13px;color:var(--ink);background:transparent}
body.product-page .sw-pd-wrap .pd-history tbody tr:last-child td{border-bottom:0!important}
body.product-page .sw-pd-wrap .pd-history th.num,
body.product-page .sw-pd-wrap .pd-history td.num{text-align:center}
body.product-page .sw-pd-wrap .pd-history th.right,
body.product-page .sw-pd-wrap .pd-history td.right{text-align:right}
body.product-page .sw-pd-wrap .pd-history td a{color:var(--red);font-weight:700}

/* Description */
body.product-page .sw-pd-wrap .pd-desc{margin-top:26px}
body.product-page .sw-pd-wrap .pd-desc h3{font-family:var(--display);font-size:17px;margin:0 0 10px}
body.product-page .sw-pd-wrap .pd-desc p{font-size:14.5px;line-height:1.65;color:var(--ink-3);margin:0 0 10px}

/* --- Related rail --- */
body.product-page .sw-pd-wrap .related{position:relative;z-index:1;margin-top:56px;padding-bottom:10px;clear:both}
body.product-page .sw-pd-wrap .related-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
body.product-page .sw-pd-wrap .related-head h2,
body.product-page .sw-pd-wrap .related-head .sw-related-title{display:block!important;visibility:visible!important;opacity:1!important;text-indent:0!important;font-family:var(--display);font-size:clamp(20px,2.2vw,28px);letter-spacing:-.02em;color:var(--ink);margin:0}
body.product-page .sw-pd-wrap .related-all{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--ink)}
body.product-page .sw-pd-wrap .related-all svg{width:16px;height:16px}
body.product-page .sw-pd-wrap .related-viewport{position:relative}
body.product-page .sw-pd-wrap .related-scroll{overflow-x:auto;scroll-behavior:smooth;scrollbar-width:thin;padding-bottom:10px}
body.product-page .sw-pd-wrap .related-scroll .prod-grid{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,1fr);grid-template-columns:none;gap:18px}
body.product-page .sw-pd-wrap .related-arrow{position:absolute;top:38%;width:40px;height:40px;border-radius:50%;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink);z-index:4;box-shadow:0 10px 24px -14px rgba(0,0,0,.4)}
body.product-page .sw-pd-wrap .related-arrow svg{width:18px;height:18px}
body.product-page .sw-pd-wrap .related-arrow.prev{left:-14px}
body.product-page .sw-pd-wrap .related-arrow.next{right:-14px}
body.product-page .sw-pd-wrap .related-arrow[disabled]{opacity:.35;cursor:default}
body.product-page .sw-pd-wrap .prod .buy.is-disabled{opacity:.6;display:flex;align-items:center;justify-content:center}

@media (max-width:900px){
  body.product-page .sw-pd-wrap div.product{grid-template-columns:1fr;gap:22px}
  body.product-page .sw-pd-wrap div.product{align-items:start}
  body.product-page .sw-pd-wrap .pd-gallery{height:auto;min-height:0}
  body.product-page .sw-pd-wrap .pd-frame{aspect-ratio:1/1;flex:0 0 auto;padding:28px}
  body.product-page .sw-pd-wrap .pd-price{font-size:34px}
  body.product-page .sw-pd-wrap .pd-controls{grid-template-columns:170px 1fr}
  body.product-page .sw-pd-wrap .pd-controls.is-dual{grid-template-columns:1fr}
  body.product-page .sw-pd-wrap .related-arrow{display:none}
}
@media (max-width:560px){
  body.product-page .sw-pd-wrap .pd-controls{grid-template-columns:1fr}
  body.product-page .sw-pd-wrap .pd-buy .buy-actions.dual{grid-template-columns:1fr}
}
@media (max-width:420px){
  body.product-page .sw-pd-wrap .pd-meta{grid-template-columns:repeat(2,1fr)}
  body.product-page .sw-pd-wrap .pd-meta .cell{grid-column:auto!important}
  body.product-page .sw-pd-wrap .pd-meta .cell:last-child:nth-child(odd){grid-column:1/-1!important}
}

/* Toast (product page add-to-cart) — bottom RIGHT, card style */
.sw-toast{position:fixed;right:24px;bottom:28px;left:auto;z-index:9999;display:flex;align-items:center;gap:14px;min-width:280px;max-width:calc(100vw - 48px);background:#F4FBF5;border:1px solid #BFE3C6;border-radius:12px;padding:16px 20px;box-shadow:0 22px 48px -22px rgba(0,0,0,.35);font-family:var(--sans);opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .18s,transform .18s}
.sw-toast.show{opacity:1;transform:translateY(0);pointer-events:auto}
.sw-toast .ico{flex:0 0 auto;width:42px;height:42px;border-radius:50%;border:2px solid var(--green);display:flex;align-items:center;justify-content:center;color:var(--green)}
.sw-toast .ico svg{width:20px;height:20px}
.sw-toast .ttl{font-size:16px;font-weight:700;color:var(--green);line-height:1.2}
.sw-toast .msg{font-size:14px;color:var(--ink-3);margin-top:3px}
.sw-toast .msg a{color:var(--green);text-decoration:underline;font-weight:600}
.sw-toast.is-error{background:#FDF3F3;border-color:#EFC2C2}
.sw-toast.is-error .ico{border-color:var(--red);color:var(--red)}
.sw-toast.is-error .ttl{color:var(--red)}
@media (max-width:560px){.sw-toast{right:12px;left:12px;min-width:0}}

/* Buy button success state */
/* Scoped to .sw-pd-wrap only, this never fired on the home page rail. */
.sw-shop .buy.is-added,
.sw-shop .prod .buy.is-added{background:var(--green)!important;border-color:var(--green)!important;color:#fff!important}
.sw-shop .buy.is-added .per{color:rgba(255,255,255,.85)!important}
.sw-shop .buy{transition:background .18s,border-color .18s,color .18s}
body.product-page .sw-pd-wrap .buy.is-loading{opacity:.6;pointer-events:none}

/* Live qty box (product page) — mirrors the cart, so show it working */
body.product-page .sw-pd-wrap .qty.is-syncing{opacity:.55;pointer-events:none}
body.product-page .sw-pd-wrap .qty.is-live input{font-weight:700}

/* ==================================================================
   HOVER STATES — pointer devices only.
   On touch, :hover latches after a tap and the button stays in its
   hover colour until you tap elsewhere. Gating on (hover:hover)
   means phones and tablets never enter these states at all.
   ================================================================== */
@media (hover:hover) and (pointer:fine){
.btn:hover{transform:translateY(-1px)}
.btn-red:hover{background:var(--red-deep)}
.btn-ink:hover{background:#000}
.btn-ghost:hover{background:var(--ink);color:#fff}
.btn-line:hover{border-color:var(--ink)}
.btn-yellow:hover{background:#FFC700}
.btn:hover .arr{transform:translateX(3px)}
.promo-ribbon:hover .ptrack{animation-play-state:paused}
.topbar a:hover{color:#fff}
.search button:hover{background:var(--red-deep)}
.icon-link:hover{color:var(--red)}
.cart-pill:hover{transform:translateY(-1px);background:var(--red-deep)}
.shop-nav a:hover{color:#fff}
.cat-strip a:hover{background:rgba(0,0,0,.14)}
.crumb a:hover{color:var(--red)}
.sec-head .more:hover{color:var(--red);border-color:var(--red)}
.cat-tile:hover{transform:translateY(-4px);box-shadow:0 24px 40px -22px rgba(0,0,0,.4)}
.cat-tile:hover .cluster .pk{filter:drop-shadow(0 16px 22px rgba(0,0,0,.4))}
.cat-tile:hover .foot .go{background:var(--red);color:#fff;transform:translateX(2px)}
.cat-tile.typo:hover .go-br{background:var(--red);color:#fff;transform:translateX(2px)}
.mini-card:hover{transform:translateY(-3px);box-shadow:0 16px 28px -18px rgba(0,0,0,.28);border-color:rgba(14,14,14,.22)}
.mini-card a.mt:hover{color:var(--red)}
.mini-card .madd:hover{background:var(--red-deep);transform:translateY(-1px)}
.fil:hover{background:var(--cream-2);color:var(--ink)}
.chip button:hover{color:var(--red)}
.pillbtn:hover{border-color:var(--ink);color:var(--ink)}
.selectwrap select:hover{border-color:var(--ink)}
.prod:hover{transform:translateY(-3px);box-shadow:0 22px 40px -24px rgba(0,0,0,.3);border-color:rgba(14,14,14,.22)}
.prod:hover .media img{transform:translate(-50%,-50%) scale(calc(var(--isc,1) * 1.05))}
.prod .fav:hover{color:var(--red);border-color:var(--red)}
.prod .title:hover{color:var(--red)}
.qty button:hover{background:var(--yellow)}
.buy:hover{transform:translateY(-1px)}
.buy.box:hover{background:var(--red-deep)}
.buy.unit:hover{background:var(--ink);color:#fff}
.login-cta:hover{background:var(--ink);transform:translateY(-1px);color:#fff}
.pg-num:hover{border-color:var(--ink);color:var(--ink)}
.pg-arrow:hover{background:#000;transform:translateY(-1px)}
.cart-head .cont:hover{color:var(--red);border-color:var(--red)}
.sp-card:hover{transform:translateY(-3px);box-shadow:0 18px 32px -22px rgba(0,0,0,.3);border-color:rgba(14,14,14,.2)}
.sp-card:hover .sp-media img{transform:translate(-50%,-50%) scale(calc(var(--isc,1) * 1.05))}
.sp-card .sp-add:hover{background:#000;transform:translateY(-1px)}
.cart-row .ci-title:hover{color:var(--red)}
.cart-row .ci-rm:hover{color:#fff;background:var(--red);border-color:var(--red)}
.cart-qty button:hover{background:var(--yellow)}
.summary .checkout:hover{background:var(--red-deep);transform:translateY(-1px)}
.summary .checkout:hover .arr{transform:translateX(3px)}
.checkout-head .ch-back:hover{color:var(--red);border-color:var(--red)}
.checkout-head .ch-back:hover .arr-l{transform:translateX(-3px)}
.pay-opt:hover{border-color:var(--ink-3)}
.place-order:hover{background:var(--red-deep);transform:translateY(-1px)}
.place-order:hover .arr{transform:translateX(3px)}
.dd-promo:hover{border-color:rgba(255,217,61,.7);box-shadow:0 18px 38px -16px rgba(0,0,0,.6)}
.dd-promo:hover .dd-cta{background:rgba(255,255,255,.11)}
footer.shop-foot a:hover{color:#fff}
.drawer-head .x:hover{border-color:var(--ink)}
/* ============================================================
   Touch devices: kill sticky :hover (tap leaves hover stuck).
   Restore each interactive element to its BASE state on :hover
   where there's no real hovering pointer.
   ============================================================ */
@media (hover: none){
  .sw-shop .btn:hover        { transform:none }
  .sw-shop .btn:hover .arr,
  .sw-shop .checkout:hover .arr,
  .sw-shop .place-order:hover .arr { transform:none }
  .sw-shop .btn-red:hover    { background:var(--red) }
  .sw-shop .btn-ink:hover    { background:var(--ink) }
  .sw-shop .btn-ghost:hover  { background:transparent; color:var(--ink) }
  .sw-shop .btn-line:hover   { background:#fff; border-color:var(--line); color:var(--ink) }
  .sw-shop .btn-yellow:hover { background:var(--yellow) }

  .sw-shop .cart-head .cont:hover { color:var(--ink); border-color:var(--ink) }

  .sw-shop .cart-qty button:hover { background:var(--cream-2) }

  /* .ci-rm base differs desktop vs mobile — cover both */
  .sw-shop .cart-row .ci-rm:hover { color:var(--mute); background:#fff; border-color:var(--line) }
  .sw-shop .sp-card .sp-add:hover { background:var(--ink); transform:none }

  .sw-shop .summary .checkout:hover,
  .sw-shop .place-order:hover { background:var(--red); transform:none }

  .sw-shop .dd-promo:hover { border-color:rgba(255,217,61,.34); box-shadow:0 14px 30px -16px rgba(0,0,0,.5) }
  .sw-shop .dd-promo:hover .dd-cta { background:rgba(255,255,255,.06) }
}
.sw-shop button#place_order:hover{ background:var(--red-deep); transform:translateY(-1px) }
.sw-shop .cart-qty button.sw-qplus:disabled:hover,
.sw-shop .cart-qty button.sw-qplus[aria-disabled="true"]:hover{ background:var(--cream-2) }
.sw-shop .co-lines::-webkit-scrollbar-thumb:hover{ background:var(--mute) }
body.product-page .sw-pd-wrap .pd-zoom:hover{color:var(--red);border-color:var(--red)}
body.product-page .sw-pd-wrap .pd-thumb:hover{opacity:1}
.sw-pd-lightbox .close:hover{background:#fff!important;color:var(--red)!important}
body.product-page .sw-pd-wrap .pd-buy .buy.box:hover{background:var(--red-deep);border-color:var(--red-deep)}
body.product-page .sw-pd-wrap .pd-buy .buy.unit:hover{background:var(--red);color:#fff}
body.product-page .sw-pd-wrap details.pd-history > summary:hover{color:var(--red)}
body.product-page .sw-pd-wrap .pd-history td a:hover{text-decoration:underline}
body.product-page .sw-pd-wrap .related-all:hover{color:var(--red)}
}

/* Press feedback (works on touch, where hover is now disabled) */
body.product-page .sw-pd-wrap .buy:active,
body.product-page .sw-pd-wrap .qty button:active,
body.product-page .sw-pd-wrap .pd-zoom:active{transform:translateY(1px)}
body.product-page .sw-pd-wrap .buy{-webkit-tap-highlight-color:transparent}

/* ==================================================================
   LOGGED-IN HOME (.sw-home)
   Category tile clusters + the fast-moving band. The .cat-tile,
   .cat-grid and .sec-head rules already exist above.
   ================================================================== */
.sw-home{max-width:var(--wrap,1280px);margin:0 auto;padding:0 20px}
.sw-home-banner{margin:22px 0 0}
.sw-home-sec{margin-top:52px}
.sw-home-sec:last-child{margin-bottom:60px}

/* Product cluster inside a photo tile */
/* .sw-shop a (0,1,1) outranks .cat-tile (0,1,0), so tiles were inheriting the
   ink link colour instead of their own --tile-fg. Third time this pattern has
   bitten — see the specificity note in INSTALL.md. */
.sw-home .cat-tile{color:var(--tile-fg,#fff)}
.sw-home .cat-tile .nm,
.sw-home .cat-tile .big,
.sw-home .cat-tile .ct{color:inherit}

/* The mockup's letter tile had an icon block above the text, which is what
   `.big{margin-top:auto}` pushed against. We don't render that icon, so the
   text block itself takes the auto margin and drops to the bottom. */
.sw-home .cat-tile.typo > div{margin-top:auto;padding-right:44px}
.sw-home .cat-tile.typo .big{margin-top:0}

.sw-home .cluster .pk{max-height:none}
.sw-home .cluster .pk.p1{height:55%;left:50%;bottom:26%;transform:translateX(-50%);z-index:2}
.sw-home .cluster .pk.p2{height:42%;left:5%;bottom:30%;z-index:1;transform:rotate(-7deg)}
.sw-home .cluster .pk.p3{height:42%;right:5%;bottom:30%;z-index:1;transform:rotate(7deg)}
.sw-home .cluster.one .pk.p1{height:62%;bottom:24%}
.sw-home .cluster.two .pk.p1{height:52%;left:63%;bottom:27%}
.sw-home .cluster.two .pk.p2{height:48%;left:7%;bottom:29%}
/* 4th and 5th sit further out and behind, so the group still reads as a pile */
.sw-home .cluster .pk.p4{height:33%;left:-3%;bottom:21%;z-index:0;transform:rotate(-13deg)}
.sw-home .cluster .pk.p5{height:33%;right:-3%;bottom:21%;z-index:0;transform:rotate(13deg)}
.sw-home .cluster.four .pk.p2,
.sw-home .cluster.five .pk.p2{left:12%}
.sw-home .cluster.four .pk.p3,
.sw-home .cluster.five .pk.p3{right:12%}

/* Hover: each product moves differently, so the pile fans out rather than
   scaling as one block. Transforms repeat each item's base transform because
   `transform` replaces rather than adds. */
.sw-home .cat-tile:hover .cluster .pk.p1{transform:translateX(-50%) translateY(-12px) scale(1.05)}
.sw-home .cat-tile:hover .cluster .pk.p2{transform:rotate(-13deg) translate(-13px,-5px) scale(1.04)}
.sw-home .cat-tile:hover .cluster .pk.p3{transform:rotate(13deg) translate(13px,-5px) scale(1.04)}
.sw-home .cat-tile:hover .cluster .pk.p4{transform:rotate(-19deg) translate(-19px,3px) scale(1.03)}
.sw-home .cat-tile:hover .cluster .pk.p5{transform:rotate(19deg) translate(19px,3px) scale(1.03)}
.sw-home .cat-tile:hover .cluster.two .pk.p1{transform:translateY(-12px) scale(1.05)}
.sw-home .cat-tile:hover .cluster.one .pk.p1{transform:translateX(-50%) translateY(-12px) scale(1.06)}

@media (prefers-reduced-motion:reduce){
  .sw-home .cat-tile:hover .cluster .pk{transform:none!important}
}

/* Fast-moving rail — same treatment as the product page's related products,
   rather than a black band, so the two read as one component. */
.sw-home .trend-band{background:transparent;border-radius:0;padding:0;color:var(--ink)}
.sw-home .trend-band .th{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:20px}
.sw-home .trend-band .th h2{margin-top:10px;color:var(--ink)}
.sw-home .trend-band .eyebrow{color:var(--red)}
.sw-home .trend-band .eyebrow::before{background:var(--red)}
.sw-home .trend-band .more{color:var(--ink);border-bottom-color:var(--ink)}

@media (max-width:1080px){
  .sw-home .cat-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:820px){
  .sw-home .cat-grid{grid-template-columns:repeat(2,1fr)}
  .sw-home .cat-tile{min-height:236px}
  .sw-home-sec{margin-top:38px}
  .sw-home .trend-band .related-arrow{display:none}
}
@media (max-width:460px){
  .sw-home .cat-grid{gap:12px}
  .sw-home .cat-tile{min-height:200px}
  .sw-home .cat-tile.typo .big{font-size:19px}
}


/* ==================================================================
   PRODUCT RAILS (product page "related", home "fast-moving")
   One set of rules so the two behave and look identical.
   ================================================================== */
.sw-shop .related-viewport{position:relative;overflow:visible}
/* overflow-x:auto forces overflow-y to auto as well — it CANNOT be visible.
   So the hover lift (.prod:hover translateY) and its shadow get clipped at the
   top. Pad the scroller to make room and pull the space back with a negative
   margin so the layout doesn't shift. */
.sw-shop .related-scroll{overflow-x:auto;scroll-behavior:smooth;scrollbar-width:thin;
  padding:14px 0 12px;margin:-14px 0 0;
  cursor:grab;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.sw-shop .related-scroll.is-dragging{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none;user-select:none}
.sw-shop .related-scroll.is-dragging a{pointer-events:none}
/* Lay the tiles out in a single row — without this the grid wraps, there's no
   horizontal overflow, and neither the arrows nor drag-to-scroll do anything. */
.sw-shop .prod{cursor:pointer}
/* Controls keep the normal arrow/pointer semantics of their own. */
.sw-shop .prod .qty,
.sw-shop .prod .qty input{cursor:auto}

.sw-shop .related-scroll .prod-grid{display:grid;grid-auto-flow:column;
  grid-auto-columns:minmax(232px,1fr);grid-template-columns:none;gap:16px;align-items:stretch}

/* Arrows sit OUTSIDE the rail, clear of the cards. */
.sw-shop .related-arrow{position:absolute;top:38%;width:42px;height:42px;border-radius:50%;background:#fff;
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink);
  z-index:6;box-shadow:0 12px 26px -14px rgba(0,0,0,.45);transition:opacity .15s,transform .15s}
.sw-shop .related-arrow svg{width:18px;height:18px}
.sw-shop .related-arrow.prev{left:-52px;right:auto}
.sw-shop .related-arrow.next{right:-52px;left:auto}
.sw-shop .related-arrow[disabled]{opacity:0;pointer-events:none}

/* Loading spinner appended while more products fetch */
.sw-shop .rail-more{flex:0 0 84px;display:flex;align-items:center;justify-content:center;color:var(--mute)}
.sw-shop .rail-more::after{content:'';width:22px;height:22px;border-radius:50%;
  border:2px solid var(--line);border-top-color:var(--red);animation:sw-spin .7s linear infinite}
@keyframes sw-spin{to{transform:rotate(360deg)}}

@media (max-width:1420px){
  /* Not enough room outside the wrapper — tuck them just inside. */
  .sw-shop .related-arrow.prev{left:-10px}
  .sw-shop .related-arrow.next{right:-10px}
}
@media (max-width:820px){
  .sw-shop .related-arrow{display:none}
}