/* cloneQ buyer store. --accent, --brand-dark and --hfont come from the store settings (set in base.html). */
:root{
  --accent:#51ab3f;--brand-dark:#02031f;--hfont:"Poppins";
  --accent-strong:var(--accent);--accent-soft:#eef6ec;
  --page:#f7f5f2;--surface:#fff;--ink:#17142a;--ink-2:#55526a;--ink-3:#8a879b;--line:#e9e5df;--line-2:#d9d4cc;
  --sale:#d92b63;--sale-soft:#fde8ef;--sun:#f8c23a;--warn-bg:#fff6dc;--warn-line:#f2db9a;--warn-ink:#6b4a00;
  --r-lg:20px;--r:16px;--r-sm:12px;--r-xs:8px;
  --shadow:0 1px 2px rgba(23,20,42,.05),0 4px 14px rgba(23,20,42,.06);
  --shadow-lg:0 14px 40px rgba(23,20,42,.16);
  --hd-h:68px
}
@supports (color:color-mix(in srgb,red,blue)){
  :root{--accent-strong:color-mix(in srgb,var(--accent) 76%,#000);--accent-soft:color-mix(in srgb,var(--accent) 11%,#fff)}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:140px}
body{margin:0;font:15px/1.5 "Segoe UI",Roboto,"Helvetica Neue",Arial,system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--page);min-height:100vh;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--hfont),"Poppins","Segoe UI",system-ui,sans-serif;letter-spacing:-.01em}
svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-999px;top:0;z-index:100;background:#fff;color:#000;padding:8px 12px}.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--accent-strong);outline-offset:2px}
.muted{color:var(--ink-2)}
.wrap{width:100%;max-width:1280px;margin:0 auto;padding-left:20px;padding-right:20px}
.wa{width:22px;height:22px}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
input[type=number]{-moz-appearance:textfield}

/* ---------------------------------------------------------------- top strip and header */
.strip{background:var(--brand-dark);color:rgba(255,255,255,.82);font-size:13px}
.strip-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:36px}
.strip-in>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.strip a{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.35)}
.strip .strip-phone{display:inline-flex;align-items:center;gap:6px;text-decoration:none;white-space:nowrap}
.strip-phone svg{width:15px;height:15px}
.hd{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);backdrop-filter:saturate(1.4) blur(8px)}
.hd-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"brand search actions";align-items:center;gap:24px;min-height:var(--hd-h)}
.hd-burger{grid-area:burger;display:none;width:42px;height:42px;border-radius:var(--r-sm);place-items:center;color:var(--ink)}
.brand{grid-area:brand;display:flex;align-items:center;gap:12px;min-width:0}
.brand img{height:44px;width:auto;max-width:96px;border-radius:10px;object-fit:cover;display:block}
.brand span{font-family:var(--hfont),"Poppins","Segoe UI",system-ui,sans-serif;font-weight:800;font-size:18px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hd-search{grid-area:search;display:flex;align-items:center;max-width:620px;width:100%;justify-self:center;height:46px;background:#f3f1ed;border:1.5px solid transparent;border-radius:999px;padding:0 5px 0 16px;transition:border-color .15s,background .15s}
.hd-search:focus-within{background:#fff;border-color:var(--accent-strong)}
.hd-search svg{width:19px;height:19px;color:var(--ink-3)}
.hd-search input{flex:1;min-width:0;height:100%;border:0;background:transparent;outline:0;padding:0 10px;font-size:15px}
.hd-search input::-webkit-search-cancel-button{display:none}
.hd-search button{height:36px;border:0;border-radius:999px;background:var(--ink);color:#fff;font-weight:600;font-size:14px;padding:0 18px;cursor:pointer}
.hd-actions{grid-area:actions;display:flex;align-items:center;gap:4px}
.hd-act{position:relative;display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border-radius:var(--r-sm);font-size:14px;font-weight:600;color:var(--ink)}
.hd-act:hover{background:#f3f1ed}
.badge{position:absolute;top:3px;left:26px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--sale);color:#fff;font-size:11px;font-weight:700;line-height:19px;text-align:center;box-shadow:0 0 0 2px #fff}
.catnav{position:relative;border-top:1px solid var(--line)}
.catnav-row{display:flex;align-items:center;gap:6px;min-height:46px}
.allcats>summary{list-style:none;display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:999px;background:var(--ink);color:#fff;font-weight:600;font-size:14px;cursor:pointer;white-space:nowrap}
.allcats>summary::-webkit-details-marker{display:none}
.allcats>summary svg{width:17px;height:17px}
.allcats .chev{transition:transform .15s}
.allcats[open] .chev{transform:rotate(180deg)}
.mega{position:absolute;left:20px;right:20px;top:calc(100% - 2px);max-width:1240px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lg);padding:20px 24px 16px;z-index:60;max-height:min(70vh,640px);overflow:auto}
.mega-groups{columns:4 210px;column-gap:28px}
.mega-group{break-inside:avoid;margin-bottom:14px}
.mega-group h3{font-family:inherit;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);margin:0 0 4px}
.mega ul{list-style:none;margin:0;padding:0}
.mega-new{display:flex;align-items:center;gap:10px;margin:-4px 0 16px;padding:10px 14px;border-radius:var(--r-sm);background:var(--sale-soft);color:var(--sale);font-weight:700;font-size:14px}
.mega-new svg{width:18px;height:18px;margin-left:auto}
.mega li a{display:block;padding:7px 10px;margin:0 -10px;border-radius:var(--r-xs);font-size:14px;color:var(--ink-2)}
.mega li a:hover{background:var(--accent-soft);color:var(--ink)}
.mega-all{display:inline-flex;align-items:center;gap:6px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);width:100%;font-weight:700;color:var(--accent-strong);font-size:14px}
.mega-all svg{width:18px;height:18px}
.newnav{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;border-radius:999px;font-size:14px;font-weight:700;color:var(--sale);white-space:nowrap}
.newnav:hover{background:var(--sale-soft)}
.new-dot{width:8px;height:8px;border-radius:50%;background:var(--sale);box-shadow:0 0 0 4px var(--sale-soft);animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 7px rgba(217,43,99,.08)}}
.new-pill{display:inline-flex;align-items:center;vertical-align:middle;height:20px;padding:0 8px;border-radius:999px;background:var(--sale);color:#fff;font-family:"Segoe UI",Roboto,system-ui,sans-serif;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.menu{display:flex;align-items:center;gap:2px;min-width:0}
.menu-item{position:relative}
.menu-link{display:inline-flex;align-items:center;gap:3px;height:34px;padding:0 12px;border:0;background:none;border-radius:999px;font-size:14px;font-weight:500;color:var(--ink-2);cursor:pointer;white-space:nowrap}
.menu-link svg{width:15px;height:15px;opacity:.7}
.menu a.menu-link:hover,.has-sub:hover>.menu-link,.has-sub:focus-within>.menu-link{background:#f3f1ed;color:var(--ink)}
.sub{display:none;position:absolute;top:100%;left:0;min-width:210px;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--shadow-lg);padding:6px;z-index:60}
.sub a{display:block;padding:9px 12px;border-radius:var(--r-xs);font-size:14px;color:var(--ink-2)}
.sub a:hover{background:var(--accent-soft);color:var(--ink)}
.has-sub:hover .sub,.has-sub:focus-within .sub{display:block}

/* ---------------------------------------------------------------- toasts */
.toasts{position:fixed;top:84px;left:50%;transform:translateX(-50%);z-index:80;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:min(440px,calc(100% - 32px))}
.toast{background:var(--ink);color:#fff;padding:11px 18px;border-radius:var(--r-sm);box-shadow:var(--shadow-lg);font-size:14px;font-weight:500;animation:toast 4.5s forwards;text-align:center}
.toast.error{background:#b3261e}.toast.success{background:#1f6b2a}
@keyframes toast{0%{opacity:0;transform:translateY(-6px)}6%{opacity:1;transform:none}85%{opacity:1}100%{opacity:0;visibility:hidden}}

/* ---------------------------------------------------------------- home */
.hero{padding-top:20px}
.hero-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;border-radius:var(--r-lg);scrollbar-width:none;background:#fff}
.hero-track::-webkit-scrollbar{display:none}
.hero-slide{flex:0 0 100%;scroll-snap-align:start}
.hero-slide a{display:block}
.hero-slide img{display:block;width:100%;height:clamp(150px,27vw,400px);object-fit:cover}
.hero-dots{display:flex;justify-content:center;gap:6px;margin-top:10px}
.hero-dots button{width:8px;height:8px;border-radius:999px;border:0;padding:0;background:var(--line-2);cursor:pointer;transition:width .2s}
.hero-dots button.on{width:22px;background:var(--ink)}
.hero-text{margin-top:20px;padding:44px 36px;border-radius:var(--r-lg);background:var(--brand-dark);color:#fff;max-width:1240px}
.hero-text h1{font-size:clamp(26px,4vw,40px);margin:0 0 8px}
.hero-text p{margin:0 0 20px;color:rgba(255,255,255,.8)}
.perks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px}
.perk{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:12px 16px;min-width:0}
a.perk:hover{border-color:var(--line-2)}
.perk-ic{width:40px;height:40px;border-radius:12px;background:var(--accent-soft);color:var(--accent-strong);display:grid;place-items:center;flex:none}
.perk-ic svg{width:20px;height:20px}
.perk b{display:block;font-size:14px}
.perk small{display:block;font-size:13px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.perk>span:last-child{min-width:0}
.sec{padding-top:34px}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:16px}
.sec-head h2{font-size:clamp(20px,2.2vw,26px);margin:0}
.sec-more{display:inline-flex;align-items:center;gap:4px;font-size:14px;font-weight:700;color:var(--accent-strong);white-space:nowrap}
.sec-more svg{width:17px;height:17px}
.sec-sub{font-size:14px;color:var(--ink-3)}
.circles{display:flex;gap:22px;flex-wrap:wrap}
.circle{display:flex;flex-direction:column;align-items:center;gap:10px;width:112px;text-align:center}
.circle-ring{display:block;width:104px;height:104px;border-radius:50%;padding:3px;background:conic-gradient(from 200deg,var(--sun),var(--sale),var(--accent),var(--sun))}
.circle-img{display:block;width:100%;height:100%;border-radius:50%;overflow:hidden;background:#fff;border:3px solid #fff}
.circle-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.circle:hover .circle-img img{transform:scale(1.06)}
.circle-title{font-size:14px;font-weight:600;line-height:1.25}
.promos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.promo{border-radius:var(--r-lg);overflow:hidden;background:#fff;aspect-ratio:1}
.promo a{display:block;height:100%}
.promo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}
.promo:hover img{transform:scale(1.03)}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.tiles-lg{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.tgroup{margin-top:22px}
.tgroup:first-child{margin-top:0}
.tgroup-h{display:flex;align-items:center;gap:10px;font-size:17px;margin:0 0 12px}
.tgroup-h span{font-family:"Segoe UI",Roboto,system-ui,sans-serif;font-size:12px;font-weight:700;color:var(--ink-3);background:#efedea;border-radius:999px;padding:2px 9px}
.tiles-row{display:flex;overflow-x:auto;gap:12px;padding-bottom:8px;scroll-snap-type:x proximity}
.tiles-row .tile{flex:0 0 160px;scroll-snap-align:start;padding:8px 8px 12px}
.sec-tools{display:inline-flex;align-items:center;gap:8px}
.mini-nav{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line-2);border-radius:50%;background:#fff;color:var(--ink);cursor:pointer}
.mini-nav:hover{border-color:var(--ink-3)}
.mini-nav:disabled{opacity:.35;cursor:default}
.mini-nav svg{width:18px;height:18px}
.minirail{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;padding:2px 2px 10px;scrollbar-width:thin}
.mini{flex:0 0 138px;display:flex;flex-direction:column;gap:3px;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:6px 6px 9px;scroll-snap-align:start;min-width:0;transition:box-shadow .2s}
@media (hover:hover){.mini:hover{box-shadow:var(--shadow)}}
.mini-pic{position:relative;display:block;aspect-ratio:1;border-radius:var(--r-xs);overflow:hidden;background:#fff}
.mini-pic img{width:100%;height:100%;object-fit:contain;display:block}
.mini.is-oos .mini-pic img{opacity:.5}
.mini-off{position:absolute;left:4px;top:4px;background:var(--sale);color:#fff;font-size:10.5px;font-weight:700;line-height:1;padding:3px 6px;border-radius:999px}
.mini-name{margin-top:4px;padding:0 2px;font-size:12.5px;line-height:1.3;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em;overflow-wrap:anywhere}
.mini-price{padding:0 2px;font-size:13.5px;font-weight:700}
.mini-all{justify-content:center;align-items:center;background:var(--accent-soft);border-color:transparent;color:var(--accent-strong);font-weight:700;font-size:14px}
.mini-all-in{display:inline-flex;align-items:center;gap:4px}
.mini-all svg{width:17px;height:17px}
.similar{padding-bottom:10px}
.sec-strip{padding-top:22px}
.promo-track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:var(--r)}
.promo-track::-webkit-scrollbar{display:none}
.promo-slide{flex:0 0 calc(50% - 7px);scroll-snap-align:start;border-radius:var(--r);overflow:hidden;background:#fff;aspect-ratio:3/1}
.promo-slide a{display:block;height:100%}
.promo-slide img{width:100%;height:100%;object-fit:cover;display:block}
.tile{display:flex;flex-direction:column;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:10px 10px 14px;box-shadow:var(--shadow);transition:box-shadow .2s,transform .2s;min-width:0}
.tile-img{display:block;width:100%;aspect-ratio:1;border-radius:var(--r-sm);overflow:hidden;background:#f3f1ed}
.tile-img img{width:100%;height:100%;object-fit:cover;display:block}
.tile-name{margin-top:12px;padding:0 4px;font-family:var(--hfont),"Poppins","Segoe UI",system-ui,sans-serif;font-size:16px;font-weight:600;line-height:1.3;text-align:center;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.tile-count{margin-top:6px;padding:2px 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent-strong);font-size:12.5px;font-weight:700;text-align:center}
.tiles-lg .tile-name{font-size:18px}
.tiles-row .tile-name{font-size:14px}
.tiles-row .tile-count{font-size:11.5px}
.empty{padding:28px 0;color:var(--ink-2)}
@media (hover:hover){.tile:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}}

/* ---------------------------------------------------------------- product cards */
.grid{display:grid;gap:16px}
.grid-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-magazine{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.grid-list{grid-template-columns:1fr;gap:12px}
.rail{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.pcard{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;min-width:0;transition:box-shadow .2s,transform .2s}
@media (hover:hover){.pcard:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}}
.pcard-pic{position:relative;display:block;aspect-ratio:1;background:#fff;overflow:hidden}
.pcard-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:6px;display:block}
.grid-magazine .pcard-pic{aspect-ratio:4/3}
.noimg{position:absolute;inset:0;background:#f3f1ed}
.off-badge{position:absolute;left:10px;top:10px;z-index:1;background:var(--sale);color:#fff;font-size:12px;font-weight:700;line-height:1;padding:5px 8px;border-radius:999px}
.pill{position:absolute;right:10px;bottom:10px;background:rgba(255,255,255,.94);border:1px solid var(--line);color:var(--ink-2);font-size:11px;font-weight:600;line-height:1;padding:5px 8px;border-radius:999px}
.oos-tag{position:absolute;left:0;right:0;bottom:0;background:rgba(23,20,42,.74);color:#fff;font-size:12px;font-weight:600;text-align:center;padding:6px}
.is-oos .pcard-pic img{opacity:.5}
.pcard-body{display:flex;flex-direction:column;gap:5px;padding:10px 12px 10px;flex:1}
.pcard-name{font-size:14px;line-height:1.35;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.pcard-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 7px}
.pcard-price b{font-size:17px;font-weight:700}
.pcard-price s{font-size:13px;color:var(--ink-3)}
.pcard-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px;color:var(--ink-2)}
.moq{background:var(--warn-bg);color:var(--warn-ink);border-radius:6px;padding:2px 7px;font-weight:600}
.swatches{display:inline-flex;align-items:center;gap:3px}
.swatches i{width:12px;height:12px;border-radius:50%;border:1px solid rgba(0,0,0,.15);display:inline-block}
.swatches span{margin-left:3px}
.buy{padding:0 12px 12px;min-height:52px}
.buy-btn{display:flex;align-items:center;justify-content:center;width:100%;height:44px;border:0;border-radius:var(--r-sm);background:var(--accent-strong);color:#fff;font-size:13px;font-weight:700;letter-spacing:.04em;text-align:center;cursor:pointer;transition:filter .15s}
.buy-btn:hover{filter:brightness(1.08)}
.buy-btn.is-off{background:#efedea;color:var(--ink-3);cursor:not-allowed;filter:none}
.stepper{display:flex;align-items:center;justify-content:space-between;width:100%;height:44px;border:1.5px solid var(--accent-strong);border-radius:var(--r-sm);background:#fff;overflow:hidden}
.stepper button{width:44px;height:100%;border:0;background:transparent;color:var(--accent-strong);font-size:21px;font-weight:600;line-height:1;cursor:pointer}
.stepper button:hover{background:var(--accent-soft)}
.stepper button:disabled{opacity:.35;cursor:not-allowed;background:transparent}
.stepper .qty{font-weight:700;font-size:15px}
.stepper input.qty{flex:1;min-width:0;width:100%;height:100%;border:0;outline:0;text-align:center;background:transparent;color:var(--ink);padding:0}
.stepper input.qty:focus{background:var(--accent-soft)}
.addrow{display:flex;gap:6px}
.addrow .buy-btn{flex:1;min-width:0;width:auto;padding:0 6px;line-height:1.15}
.addrow-qty{flex:none;width:56px;height:44px;border:1.5px solid var(--line-2);border-radius:var(--r-sm);background:#fff;text-align:center;font-weight:700;font-size:15px;padding:0 4px;-moz-appearance:textfield}
.addrow-qty:focus{outline:0;border-color:var(--accent-strong);background:var(--accent-soft)}
.qtyform{display:flex;flex-wrap:wrap;gap:6px}
.qtyform .stepper{flex:1 1 100%}
.qty-go{flex:1 1 100%;height:44px;border:0;border-radius:var(--r-sm);background:var(--accent-strong);color:#fff;font-size:13px;font-weight:700;letter-spacing:.03em;cursor:pointer}
.qty-go:hover{filter:brightness(1.08)}
.js .qtyform:not(.qtyform-lg):not(.is-dirty) .qty-go{display:none}
.qtyform-lg{flex-wrap:nowrap;align-items:center;gap:10px}
.qtyform-lg .stepper{flex:0 1 auto}
.qtyform-lg .qty-go{flex:0 0 auto;height:50px;padding:0 22px;font-size:14px}
.qtyform-lg.is-dirty .qty-go{box-shadow:0 0 0 3px var(--accent-soft)}
.grid-list .pcard{flex-direction:row;align-items:center}
.grid-list .pcard-pic{width:120px;flex:none}
.grid-list .pcard-body{padding:10px 16px}
.grid-list .buy{width:200px;flex:none;padding:0 14px 0 0;min-height:0}

/* ---------------------------------------------------------------- catalogue page */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:16px 0 10px;font-size:13px;color:var(--ink-3);min-width:0}
.crumbs a:hover{color:var(--ink)}
.crumbs [aria-current]{color:var(--ink-2);max-width:42ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cat-banner{border-radius:var(--r-lg);overflow:hidden;margin-bottom:6px}
.cat-banner img{width:100%;max-height:360px;object-fit:cover;display:block}
.cat-head{padding:6px 0 14px}
.cat-title{font-size:clamp(24px,3vw,34px);line-height:1.15;margin:0}
.cat-sub{margin:6px 0 0;color:var(--ink-2);font-size:14px}
.chipbar{display:flex;gap:8px;overflow-x:auto;padding:2px 0 12px;margin-bottom:4px;scroll-snap-type:x proximity}
.chipbar::-webkit-scrollbar,.pp-thumbs::-webkit-scrollbar,.filters::-webkit-scrollbar,.mega::-webkit-scrollbar{width:6px;height:6px}
.chipbar::-webkit-scrollbar-thumb,.pp-thumbs::-webkit-scrollbar-thumb,.filters::-webkit-scrollbar-thumb,.mega::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:999px}
.chipbar::-webkit-scrollbar-track,.pp-thumbs::-webkit-scrollbar-track,.filters::-webkit-scrollbar-track,.mega::-webkit-scrollbar-track{background:transparent}
@supports not selector(::-webkit-scrollbar){.chipbar,.pp-thumbs,.filters,.mega{scrollbar-width:thin}}
.cchip{flex:none;scroll-snap-align:start;display:inline-flex;align-items:center;height:36px;padding:0 15px;border:1px solid var(--line-2);border-radius:999px;background:#fff;font-size:13px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.cchip:hover{border-color:var(--ink-3);color:var(--ink)}
.cchip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.cchip-new{border-color:#f3b6c9;color:var(--sale);background:var(--sale-soft)}
.cchip-new.on{background:var(--sale);border-color:var(--sale);color:#fff}
.cat-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.new-link{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:var(--sale-soft);color:var(--sale);font-weight:700;font-size:14px}
.new-link svg{width:17px;height:17px}
.grid-full{grid-template-columns:repeat(5,minmax(0,1fr));padding-bottom:20px}
.cat-wrap{display:grid;grid-template-columns:250px minmax(0,1fr);gap:28px;align-items:start;padding-bottom:40px}
.filters{position:sticky;top:130px;max-height:calc(100vh - 150px);overflow:auto;min-width:0}
.filters-toggle>summary{display:none}
.fdot{margin-left:auto;background:var(--accent-soft);color:var(--accent-strong);font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px}
#filters{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:4px 18px 16px}
.fbox{padding:14px 0;border-bottom:1px solid var(--line)}
.fbox:last-of-type{border-bottom:0}
.fbox h3{font-family:inherit;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);margin:0 0 6px}
.fbox .fbox-sub{margin-top:14px}
.chk{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:14px;cursor:pointer;color:var(--ink)}
.chk input{width:18px;height:18px;margin:0;accent-color:var(--accent-strong);flex:none}
.more summary{list-style:none;color:var(--accent-strong);cursor:pointer;font-size:13px;font-weight:700;margin-top:6px}
.more summary::-webkit-details-marker{display:none}
.more .more-hide,.more[open] .more-show{display:none}.more[open] .more-hide{display:inline}
.prange{display:flex;align-items:flex-end;gap:8px}
.prange label{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}
.prange small{font-size:12px;color:var(--ink-3)}
.prange .dash{padding-bottom:10px;font-size:12px;color:var(--ink-3)}
.rs{display:flex;align-items:center;gap:4px;height:38px;padding:0 10px;border:1px solid var(--line-2);border-radius:10px;background:#fff}
.rs:focus-within{border-color:var(--accent-strong)}
.rs i{font-style:normal;font-size:13px;color:var(--ink-3)}
.rs input{border:0;width:100%;min-width:0;height:100%;outline:0;font-size:14px;background:transparent}
.fapply{margin-top:12px;width:100%;height:38px;border:0;border-radius:10px;background:var(--ink);color:#fff;font-weight:600;cursor:pointer}
.fclear{display:inline-block;margin-top:12px;font-size:14px;font-weight:600;color:var(--sale)}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.toolbar-count{font-size:14px;color:var(--ink-2)}
.sortby{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-3)}
.sortby select{height:38px;border:1px solid var(--line-2);border-radius:999px;background:#fff;padding:0 14px;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer}
.loadmore{display:flex;align-items:center;justify-content:center;width:min(280px,100%);height:46px;margin:28px auto 0;border:1.5px solid var(--ink);border-radius:999px;font-weight:700;font-size:14px;background:#fff}
.loadmore:hover{background:var(--ink);color:#fff}

/* ---------------------------------------------------------------- product page */
.crumbs-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pp-nav{display:flex;gap:8px;flex:none}
.pp-nav a{width:38px;height:38px;border-radius:50%;border:1px solid var(--line-2);background:#fff;display:grid;place-items:center}
.pp-nav a:hover{border-color:var(--ink)}
.pp-nav svg{width:18px;height:18px}
.pp{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:44px;align-items:start;padding:6px 0 10px}
.pp-gallery{position:sticky;top:130px;min-width:0}
.pp-main{position:relative;aspect-ratio:1;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.pp-main img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:18px;display:block}
.pp-main .noimg{border-radius:inherit}
.pp-main .off-badge{left:16px;top:16px;font-size:14px;padding:6px 10px}
.pp-thumbs{display:flex;gap:10px;margin-top:12px;overflow-x:auto;padding-bottom:4px}
.pp-thumbs a{flex:none;width:72px;height:72px;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:#fff}
.pp-thumbs a.on{border:2px solid var(--ink)}
.pp-thumbs img{width:100%;height:100%;object-fit:contain;display:block;padding:3px}
.pp-info{display:flex;flex-direction:column;align-items:stretch;gap:16px;min-width:0}
.pp-cat{align-self:flex-start;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--accent-strong)}
.pp-title{font-size:clamp(22px,2.5vw,30px);line-height:1.2;margin:-8px 0 0}
.pp-meta{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--ink-2)}
.stock{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.stock::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.stock.in{color:#24753a}.stock.out{color:#c62828}
.pp-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px}
.pp-price b{font-size:32px;font-weight:800;letter-spacing:-.01em}
.pp-price s{font-size:17px;color:var(--ink-3)}
.off-tag{background:var(--sale-soft);color:var(--sale);font-size:13px;font-weight:700;padding:4px 10px;border-radius:999px}
.pp-moq{display:flex;align-items:center;gap:8px;background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn-ink);border-radius:var(--r-sm);padding:10px 14px;font-size:14px;font-weight:600}
.pp-moq svg{width:18px;height:18px}
.slabs{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.slabs h2{margin:0;padding:12px 16px;font-size:15px;background:var(--accent-soft);color:var(--accent-strong)}
.slabs table{width:100%;border-collapse:collapse;font-size:14px}
.slabs th,.slabs td{padding:10px 16px;text-align:left;border-top:1px solid var(--line)}
.slabs th{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3)}
.slabs td:last-child{font-weight:700}
.pp-vlabel{font-size:14px;font-weight:600;margin-bottom:10px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 14px;border:1.5px solid var(--line-2);border-radius:999px;background:#fff;font-size:14px;color:var(--ink)}
.chip:hover{border-color:var(--ink-3)}
.chip i{width:16px;height:16px;border-radius:50%;border:1px solid rgba(0,0,0,.18);display:inline-block}
.chip.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);font-weight:700}
.chip.off{opacity:.45;text-decoration:line-through}
.buy-page{padding:0;min-height:50px}
.addform{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.stepper-lg{width:auto;height:50px}
.stepper-lg button{width:48px}
.stepper-lg .qty{min-width:60px;text-align:center}
.stepper-lg input{width:64px;height:100%;border:0;outline:0;text-align:center;font-weight:700;font-size:16px;background:transparent}
.buy-lg{flex:1;min-width:200px;width:auto;height:50px;font-size:15px}
.buy-page .qtyform-lg .stepper{max-width:240px}
.in-cart{display:inline-flex;margin-top:10px;font-size:14px;font-weight:700;color:var(--accent-strong)}
.pp-ask{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;border:1.5px solid #bfe6cb;background:#f1fbf4;color:#14703a;border-radius:999px;padding:9px 18px;font-size:14px;font-weight:700}
.pp-ask:hover{border-color:#25d366}
.pp-desc{border-top:1px solid var(--line);padding-top:16px;font-size:15px;line-height:1.65;color:var(--ink-2)}
.pp-desc h2{font-size:16px;color:var(--ink);margin:0 0 6px}
.pp-desc p{margin:0 0 8px}

/* ---------------------------------------------------------------- floating cart bar and chat */
.cartbar{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:45;display:flex;align-items:center;justify-content:space-between;gap:12px;width:min(520px,calc(100% - 24px));height:62px;padding:0 8px 0 20px;background:var(--ink);color:#fff;border-radius:var(--r);box-shadow:var(--shadow-lg)}
.cb-left{display:flex;align-items:center;gap:14px;min-width:0}
.cb-nums{display:flex;flex-direction:column;line-height:1.25;font-size:13px;color:rgba(255,255,255,.75)}
.cb-nums b{font-size:16px;color:#fff}
.cb-right{display:inline-flex;align-items:center;gap:6px;height:46px;padding:0 18px;border-radius:var(--r-sm);background:var(--accent-strong);font-weight:700;font-size:15px;white-space:nowrap}
.cb-right svg{width:18px;height:18px}
.chat{position:fixed;right:20px;bottom:20px;z-index:46;display:flex;align-items:center;gap:8px;background:#fff;color:var(--ink);font-weight:700;font-size:14px;padding:9px 16px 9px 10px;border-radius:999px;border:1px solid var(--line);box-shadow:var(--shadow-lg)}
.chat .wa{width:26px;height:26px}
body:has(.confirmbar) .chat{display:none}

/* ---------------------------------------------------------------- footer */
.ft{margin-top:56px;background:var(--brand-dark);color:rgba(255,255,255,.72);font-size:14px;padding:44px 0 96px}
.ft-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.ft-logo{display:inline-flex;align-items:center;gap:12px;color:#fff}
.ft-logo img{height:48px;width:auto;border-radius:10px}
.ft-logo b{font-family:var(--hfont),"Poppins","Segoe UI",system-ui,sans-serif;font-size:18px}
.ft-brand p{margin:12px 0 0;line-height:1.6}
.ft-wa{display:inline-flex;align-items:center;gap:8px;margin-top:16px;background:#fff;color:var(--ink);font-weight:700;border-radius:999px;padding:8px 16px 8px 9px}
.ft h2{font-family:inherit;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#fff;margin:4px 0 14px}
.ft ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.ft-col a:hover{color:#fff}
.ft-more{font-weight:700;color:#fff}
.ft-contact{display:flex;flex-direction:column;gap:10px}
.ft-contact a{display:inline-flex;align-items:center;gap:9px;overflow-wrap:anywhere}
.ft-contact svg{width:17px;height:17px;color:var(--sun)}
.ft-bottom{margin-top:36px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);font-size:13px;color:rgba(255,255,255,.5)}

/* ---------------------------------------------------------------- menu drawer (phones) */
.drawer{margin:0;padding:0;border:0;inset:0 auto 0 0;width:min(340px,88vw);height:100%;max-height:none;max-width:none;background:#fff;color:var(--ink);box-shadow:var(--shadow-lg);overflow:auto}
.drawer::backdrop{background:rgba(23,20,42,.45)}
.drawer[open]{animation:drawer .22s ease-out}
@keyframes drawer{from{transform:translateX(-100%)}to{transform:none}}
.drawer-hd{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 12px 12px 18px;background:#fff;border-bottom:1px solid var(--line)}
.drawer-hd .brand img{height:38px}
.drawer-hd .brand span{font-size:16px}
.drawer-x{width:40px;height:40px;border:0;border-radius:var(--r-sm);background:#f3f1ed;display:grid;place-items:center;cursor:pointer}
.drawer-body{display:flex;flex-direction:column;padding:8px 0 28px}
.drawer-link,.drawer-group>summary{display:flex;align-items:center;justify-content:space-between;padding:13px 20px;font-size:15px;font-weight:600;cursor:pointer;list-style:none}
.drawer-group>summary::-webkit-details-marker{display:none}
.drawer-group>summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:rotate(45deg);margin-top:-4px;transition:transform .15s}
.drawer-group[open]>summary::after{transform:rotate(225deg);margin-top:4px}
.drawer-group a{display:block;padding:9px 20px 9px 32px;font-size:14px;color:var(--ink-2)}
.drawer-link .new-pill{margin-left:8px}
.drawer-group a:hover,.drawer-link:hover{background:#f7f5f2}

/* ---------------------------------------------------------------- cart, orders */
.rv{max-width:720px;margin:0 auto;padding:12px 20px 160px}
.rv-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0 6px}
.rv-h1{font-size:26px;margin:0}
.rv-back{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--ink-2)}
.rv-back svg{width:18px;height:18px}
.rv-back:hover{color:var(--ink)}
.rv-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;margin-top:14px}
.rv-total{display:flex;align-items:baseline;gap:12px}
.rv-total b{font-family:var(--hfont),"Poppins","Segoe UI",system-ui,sans-serif;font-size:26px;line-height:1.2}
.rv-total span{font-size:15px;color:var(--ink-2)}
.rv-chat{display:flex;align-items:center;justify-content:space-between;gap:12px}
.rv-chat b{display:block;font-size:16px}
.rv-chat span{font-size:14px;color:var(--ink-2)}
.chatnow{display:inline-flex;align-items:center;gap:8px;background:#f1fbf4;border:1px solid #bfe6cb;color:#14703a;border-radius:999px;padding:8px 14px;font-size:13px;font-weight:700;white-space:nowrap}
.chatnow .wa{width:20px;height:20px}
.rv-items{padding:16px 16px 4px}
.rv-items h2,.rv-form h2,.od-block h2{font-size:17px;margin:0 0 8px}
.cline{padding:14px 0;border-bottom:1px solid var(--line)}
.cline:last-child{border-bottom:0}
.cline-row{display:flex;gap:12px;align-items:flex-start}
.cline-img{width:84px;height:84px;object-fit:contain;flex:none;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);display:block}
.cline-mid{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.cline-name{font-size:15px;font-weight:600;line-height:1.35}
.cline-name .opt{color:var(--ink-2);font-weight:400;font-size:14px}
.cline-total{font-size:16px;font-weight:700;white-space:nowrap}
.cline-warn{color:#b3261e;font-size:13px}
.stepper-sm{width:auto;height:34px;border-width:1px}
.stepper-sm button{width:34px;font-size:17px}
.stepper-sm input{width:56px;height:100%;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);text-align:center;font-size:14px;font-weight:600;outline:0}
.linkbtn{border:0;background:none;padding:0;cursor:pointer;font-size:13px;font-weight:600;color:var(--accent-strong)}
.linkbtn.rm{color:var(--ink-3)}
.linkbtn.rm:hover{color:#c62828}
.note{display:flex;align-items:center;gap:10px;margin-top:12px;border:1px solid var(--line);border-radius:10px;padding:0 12px;height:40px;background:#fbfaf8}
.note svg{width:15px;height:15px;color:var(--ink-3)}
.note input{flex:1;border:0;outline:0;font-size:14px;height:100%;background:transparent;min-width:0}
.cp-apply summary{list-style:none;display:flex;align-items:center;gap:10px;cursor:pointer;font-weight:700;color:var(--accent-strong)}
.cp-apply summary::-webkit-details-marker{display:none}
.cp-form{display:flex;gap:8px;margin-top:12px}
.cp-form input{flex:1;min-width:0;height:44px;border:1px solid var(--line-2);border-radius:var(--r-sm);padding:0 14px;text-transform:uppercase}
.cp-on{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.cp-tag{background:var(--accent-strong);color:#fff;border-radius:6px;padding:3px 8px;font-size:13px;font-weight:700}
.sum-row{display:flex;justify-content:space-between;padding:5px 0;font-size:15px;color:var(--ink-2)}
.sum-cp{color:#1f6b2a}
.sum-total{border-top:1px solid var(--line);margin-top:8px;padding-top:12px;font-size:18px;font-weight:800;color:var(--ink)}
.rv-form h2{margin-top:22px}.rv-form h2:first-of-type{margin-top:0}
.frow{margin-bottom:12px}
.frow label{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:5px}
.frow label i{color:var(--sale);font-style:normal;margin-left:2px}
.frow input,.frow select,.frow textarea{width:100%;height:46px;border:1px solid var(--line-2);border-radius:var(--r-sm);padding:0 14px;background:#fff;color:var(--ink);font-size:15px}
.frow input:focus,.frow select:focus,.frow textarea:focus{border-color:var(--accent-strong);outline:0;box-shadow:0 0 0 3px var(--accent-soft)}
.frow.has-err input,.frow.has-err select{border-color:#c62828}
.ferr{color:#c62828;font-size:13px;margin-top:4px}
.ferr-box{background:#fdecea;color:#8a1c14;border-radius:var(--r-sm);padding:10px 14px;margin-bottom:14px}
.ferr-box p{margin:0}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.ships{display:flex;flex-direction:column;gap:8px}
.ship{display:flex;align-items:center;gap:12px;border:1px solid var(--line-2);border-radius:var(--r-sm);padding:13px 14px;cursor:pointer}
.ship:has(input:checked){border-color:var(--accent-strong);background:var(--accent-soft)}
.ship input{width:18px;height:18px;accent-color:var(--accent-strong);flex:none;margin:0}
.ship-name{flex:1}
.ship b{color:var(--accent-strong);font-size:14px;white-space:nowrap}
.order-note{margin:16px 0 0;font-size:14px;color:var(--ink-2)}
.ship-note{margin:10px 0 0;padding:10px 14px;border-radius:var(--r-sm);background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn-ink);font-size:14px;font-weight:600}
.confirmbar{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:45;width:min(680px,calc(100% - 24px))}
.minbar{background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn-ink);border-radius:var(--r-sm);padding:8px 12px;margin-bottom:8px;text-align:center;font-size:14px;box-shadow:var(--shadow)}
.confirm-btn{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:58px;border:0;border-radius:var(--r);background:var(--accent-strong);color:#fff;font-size:16px;font-weight:700;letter-spacing:.02em;cursor:pointer;box-shadow:var(--shadow-lg)}
.confirm-btn svg{position:absolute;right:22px;width:26px;height:26px}
.confirm-btn:disabled{background:#b9c7b4;cursor:not-allowed}
.rv-empty{text-align:center;padding:40px 24px}
.rv-empty h1{font-size:22px;margin:0 0 8px}
.rv-empty p{color:var(--ink-2);margin:0 0 18px}

/* ---------------------------------------------------------------- buttons and dialogs */
.btn-green{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:var(--r-sm);background:var(--accent-strong);color:#fff;font-weight:700;padding:12px 22px;cursor:pointer;font-size:15px}
.btn-green:hover{filter:brightness(1.08)}
.btn-plain{border:1px solid var(--line-2);background:#fff;color:var(--ink);border-radius:var(--r-sm);padding:11px 18px;cursor:pointer;font-weight:700}
.btn-outline{display:inline-flex;border:1.5px solid var(--ink);color:var(--ink);border-radius:999px;padding:8px 16px;font-weight:700;font-size:14px}
.btn-wa{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:#1a8f45;color:#fff;font-weight:700;border-radius:var(--r-sm);padding:12px 22px}
.btn-wa .wa circle{fill:#fff}.btn-wa .wa path{fill:#1a8f45}
.modal{border:0;border-radius:var(--r-lg);padding:26px;width:min(420px,calc(100% - 32px));color:var(--ink);box-shadow:var(--shadow-lg)}
.modal::backdrop{background:rgba(23,20,42,.5)}
.modal h2{font-size:21px;margin:0 0 6px}
.modal p{margin:0 0 16px;color:var(--ink-2)}
.modal-q{font-size:17px;color:var(--ink)!important}
.modal label{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:12px}
.modal input{height:46px;border:1px solid var(--line-2);border-radius:var(--r-sm);padding:0 14px;font-size:15px}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:8px}
.modal-err{color:#c62828!important;font-size:13px}

/* ---------------------------------------------------------------- done, my orders, pages, search */
.done{text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;padding:40px 24px}
.done-ic{width:68px;height:68px;color:var(--accent-strong);stroke-width:1.6}
.done h1{font-size:26px;margin:4px 0 0}
.done-no{font-size:17px;margin:0}
.done-sum{margin:0;color:var(--ink-2)}
.done-msg{margin:6px 0 8px;color:var(--ink-2)}
.done .btn-green,.done .btn-wa{width:100%;max-width:360px}
.done-link{color:var(--accent-strong);font-weight:600;font-size:14px;margin-top:4px}
.morder{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;transition:border-color .15s}
.morder:hover{border-color:var(--line-2)}
.mo-top{display:flex;align-items:center;gap:10px;font-size:16px}
.mo-mid{grid-column:1;color:var(--ink-2);font-size:14px}
.mo-amt{grid-column:2;grid-row:1/3;font-size:18px;font-weight:800}
.st{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:3px 9px;border-radius:999px;background:#e8eefc;color:#1d4ed8}
.st-accepted{background:#e7f5e4;color:#1f6b2a}.st-completed{background:#eceff3;color:#374151}.st-rejected{background:#fdecea;color:#b3261e}
.pay{font-size:12px;font-weight:700;color:#8a5a00}
.od-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.od-head h1{font-size:22px;margin:0 0 6px}
.od-head p{margin:0 0 4px}
.od-right{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.od-right b{font-size:22px}
.od-block p{margin:0 0 14px;color:var(--ink-2)}
.od-dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0 0 14px}
.od-dl dt{color:var(--ink-3)}.od-dl dd{margin:0}
.cpage{max-width:820px;margin:24px auto 0;padding:32px 36px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);font-size:16px;line-height:1.7;color:var(--ink-2)}
.cpage h1{font-size:30px;margin:0 0 16px;color:var(--ink)}
.searchpage{display:flex;gap:10px;max-width:720px;margin:6px 0 22px}
.searchpage input{flex:1;min-width:0;height:48px;border:1px solid var(--line-2);border-radius:var(--r-sm);padding:0 16px;background:#fff;font-size:15px}
.searchpage input:focus{outline:0;border-color:var(--accent-strong)}
.sec .sec-title{font-size:20px;margin:0 0 16px}
.unavail{max-width:520px;margin:40px auto}

/* ---------------------------------------------------------------- printable estimate */
.page-print{background:#fff;color:#111}
.pr{max-width:820px;margin:0 auto;padding:24px;font-size:14px}
.pr-actions{display:flex;align-items:center;gap:12px;margin-bottom:20px;color:#555}
.pr-head{display:flex;justify-content:space-between;gap:20px;border-bottom:2px solid #111;padding-bottom:14px}
.pr-head img{height:40px;display:block;margin-bottom:6px}
.pr-head b{font-size:18px}
.pr-head p{margin:4px 0 0}
.pr-title{text-align:right}.pr-title h1{margin:0;font-size:24px;text-transform:uppercase}
.pr-parties{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:16px 0}
.pr-parties h2{font-size:13px;text-transform:uppercase;color:#555;margin:0 0 4px}
.pr-parties p{margin:0 0 4px}
.pr-tbl{width:100%;border-collapse:collapse}
.pr-tbl th,.pr-tbl td{border-bottom:1px solid #ddd;padding:7px 6px;text-align:left;vertical-align:top}
.pr-tbl th{background:#f3f4f6;font-size:12px;text-transform:uppercase}
.pr-tbl .r{text-align:right}
.pr-sum{margin-left:auto;width:300px;margin-top:12px}
@media print{.pr-actions{display:none}.pr{padding:0}@page{margin:14mm}}

/* ---------------------------------------------------------------- smaller screens */
@media (max-width:1180px){
  .rail{grid-template-columns:repeat(4,minmax(0,1fr))}
  .grid-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid-full{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:900px){
  :root{--hd-h:60px}
  html{scroll-padding-top:120px}
  .hd-row{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"burger brand actions" "search search search";gap:6px 8px;padding-bottom:10px}
  .hd-burger{display:grid;margin-left:-8px}
  .brand img{height:38px}
  .brand span{font-size:16px}
  .hd-search{max-width:none;height:44px}
  .hd-search button{display:none}
  .hd-act{padding:9px}
  .hd-act>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .badge{left:auto;right:1px;top:1px}
  .catnav{display:none}
  .perks{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-padding:0 20px}
  .perks::-webkit-scrollbar{display:none}
  .perk{flex:0 0 78%;scroll-snap-align:start}
  .rail{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -20px;padding:2px 20px 8px;scroll-padding:0 20px;scrollbar-width:none}
  .rail::-webkit-scrollbar{display:none}
  .rail .pcard{flex:0 0 min(46%,240px);scroll-snap-align:start}
  .promos{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -20px;padding:0 20px;scroll-padding:0 20px;scrollbar-width:none}
  .promos::-webkit-scrollbar{display:none}
  .promo{flex:0 0 72%;scroll-snap-align:start}
  .promo-slide{flex:0 0 88%}
  .circles{flex-wrap:nowrap;overflow-x:auto;margin:0 -20px;padding:0 20px 4px;scroll-padding:0 20px;gap:16px;scrollbar-width:none}
  .circles::-webkit-scrollbar{display:none}
  .circle{flex:none;width:92px}
  .circle-ring{width:86px;height:86px}
  .cat-wrap{grid-template-columns:1fr;gap:12px}
  .filters{position:static;max-height:none;overflow:visible}
  .filters-toggle>summary{display:flex;align-items:center;gap:8px;list-style:none;cursor:pointer;background:#fff;border:1px solid var(--line-2);border-radius:999px;height:40px;padding:0 16px;font-weight:700;font-size:14px;width:max-content}
  .filters-toggle>summary::-webkit-details-marker{display:none}
  .filters-toggle>summary svg{width:18px;height:18px}
  .filters-toggle[open]>summary{margin-bottom:10px}
  .pp{grid-template-columns:1fr;gap:20px}
  .pp-gallery{position:static}
  .ft-grid{grid-template-columns:1fr 1fr}
  .ft-brand{grid-column:1/-1}
}
@media (max-width:600px){
  .wrap{padding-left:14px;padding-right:14px}
  .strip-in{justify-content:center;font-size:12px}
  .strip .strip-phone{display:none}
  .brand span{font-size:15px}
  .hero{padding-top:12px}
  .hero-track{border-radius:var(--r)}
  .rail,.promos,.circles{margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px}
  .perks,.rail,.promos,.circles{scroll-padding:0 14px}
  .sec{padding-top:26px}
  .tiles,.tiles-lg{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .tile{padding:6px 6px 11px;border-radius:var(--r-sm)}
  .tile-img{border-radius:9px}
  .tile-name{font-size:14.5px;margin-top:8px}
  .tiles-lg .tile-name{font-size:15.5px}
  .tile-count{font-size:11.5px;margin-top:5px}
  .minirail{margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px;scroll-padding:0 14px;scrollbar-width:none}
  .minirail::-webkit-scrollbar{display:none}
  .mini{flex-basis:112px}
  .mini-name{font-size:12px}
  .mini-price{font-size:13px}
  .mini-nav{display:none!important}
  .qtyform-lg{flex-wrap:wrap}
  .grid,.grid-grid,.grid-full{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .tiles-row .tile{flex-basis:128px}
  .grid-magazine,.grid-list{grid-template-columns:1fr}
  .grid-list .pcard{flex-wrap:wrap}
  .grid-list .buy{width:100%;padding:0 12px 12px}
  .pcard-body{padding:8px 10px}
  .pcard-name{font-size:13px}
  .pcard-price b{font-size:16px}
  .buy{padding:0 10px 10px}
  .buy-btn{font-size:12px}
  .addrow .buy-btn{font-size:11.5px;letter-spacing:0}
  .addrow-qty{width:46px}
  .stepper button{width:40px}
  .toolbar{flex-wrap:wrap}
  .sortby>span{display:none}
  .pp-price b{font-size:28px}
  .buy-lg{min-width:0}
  .cartbar{bottom:10px;height:58px;padding-left:16px}
  .cb-right{height:42px;padding:0 14px;font-size:14px}
  .chat{right:12px;bottom:14px;padding:8px}
  .chat span{display:none}
  body:has(.cartbar:not([hidden])) .chat{bottom:80px}
  .rv{padding:8px 14px 160px}
  .rv-card{padding:16px}
  .fgrid{grid-template-columns:1fr}
  .od-head{flex-direction:column}.od-right{align-items:flex-start}
  .cpage{padding:24px 18px;margin-top:14px}
  .ft{padding-top:36px}
  .ft-grid{gap:26px}
  .pr-parties{grid-template-columns:1fr}
  .pr-sum{width:100%}
}
@media (max-width:360px){.brand span{display:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}