/* ============================================================
   GRAINHOUSE DESIGN SYSTEM
   Place at: public/css/grainhouse.css
   Palette: walnut / oak / kraft / burnt-orange / sage
   Fonts: Fraunces (display) · Archivo (body) · JetBrains Mono (labels)
   ============================================================ */

:root{
  --walnut:#3B2A20;
  --walnut-2:#2A1D16;
  --oak:#C9A876;
  --kraft:#E8DFD1;
  --paper:#F5F0E8;
  --ink:#1A130E;
  --accent:#D9531E;      /* burnt orange */
  --accent-2:#7A8B6F;    /* sage */
  --line:rgba(59,42,32,.14);
  --line-strong:rgba(59,42,32,.28);
  --white:#FBF9F5;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
/* Backstop: no element should ever cause the page itself to scroll
   horizontally. The real fixes are min-width:0 on flex/grid items that
   hold nowrap/overflow content (see .listing-main, .subcat-tags) — this
   just guarantees a stray future overflow can't widen the whole page. */
html,body{overflow-x:hidden}
body{
  font-family:'Archivo',sans-serif;
  background:var(--paper);
  color:var(--walnut);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

/* ---------- TYPOGRAPHY BASE (central heading/body/small system —
   component rules below only override what needs to differ; anything
   that doesn't set its own font-size/line-height/letter-spacing inherits
   this) ---------- */
h1,h2,h3{font-family:'Fraunces',serif;font-weight:600;color:var(--walnut)}
h1{font-size:clamp(1.6rem,4vw,2.2rem);line-height:1.15;letter-spacing:-.01em}
h2{font-size:clamp(1.3rem,3vw,1.6rem);line-height:1.2;letter-spacing:-.01em}
h3{font-size:1.1rem;line-height:1.25}
p{font-family:'Archivo',sans-serif;font-size:1rem;line-height:1.65;color:var(--walnut);font-weight:400}
small{font-size:.8125rem;color:#7a6a5c}
strong,b{font-weight:600}

img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.mono{font-family:'JetBrains Mono',monospace}
.serif{font-family:'Fraunces',serif}
.container{max-width:1280px;margin:0 auto;padding:0 28px}

/* ---------- BUTTONS ---------- */
.btn{
  font-family:'Archivo';font-weight:600;font-size:14.5px;padding:14px 26px;border-radius:8px;
  cursor:pointer;border:0;transition:.15s;display:inline-flex;align-items:center;gap:8px;
}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:#c2461a;transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--white);border:1.5px solid rgba(232,223,209,.35)}
.btn-ghost:hover{border-color:var(--oak);color:var(--oak)}
.btn-inquiry{background:var(--walnut);color:var(--white)}
.btn-inquiry:hover{background:var(--walnut-2)}

/* ---------- HEADER ---------- */
header.site{background:var(--walnut);color:var(--kraft);position:sticky;top:0;z-index:50}
.topstrip{
  background:var(--walnut-2);font-size:11.5px;letter-spacing:.04em;
  padding:6px 0;text-align:center;color:var(--oak);font-family:'JetBrains Mono',monospace;
}
.nav{max-width:1280px;margin:0 auto;padding:16px 28px;display:flex;align-items:center;gap:32px;flex-wrap:nowrap;position:relative}
.nav > *{min-width:0}
.logo{display:flex;align-items:center;gap:10px;font-family:'Fraunces',serif;font-weight:700;font-size:24px;color:var(--white)}
.logo .mark{
  width:30px;height:30px;border:2px solid var(--oak);border-radius:3px;
  display:grid;place-items:center;font-size:15px;color:var(--oak);transform:rotate(-4deg)
}
.logo-img{height:38px;width:auto;display:block;object-fit:contain}
footer .logo-img{height:34px}
@media(max-width:600px){.logo-img{height:30px}}
.searchbar{flex:1;max-width:520px;display:flex;align-items:center;gap:10px;background:var(--paper);border-radius:4px;padding:11px 16px;color:var(--ink)}
.searchbar input{border:0;background:transparent;flex:1;font-family:'Archivo';font-size:14px;outline:none}
.searchbar .cat{font-size:12px;color:var(--walnut);border-right:1px solid var(--line);padding-right:12px;font-weight:600}
.nav-actions{display:flex;align-items:center;gap:22px;font-size:13.5px;font-weight:500;margin-left:auto}
.nav-actions .pill{background:var(--accent);color:#fff;padding:10px 18px;border-radius:8px;font-weight:600;transition:.15s}
.nav-actions .pill:hover{background:#c2461a}
.nav-actions a{display:flex;align-items:center;gap:6px}
.btn-login-sm{border:1px solid rgba(232,223,209,.35);padding:9px 16px;border-radius:8px;font-weight:600;font-size:13.5px;color:var(--kraft);transition:.15s}
.btn-login-sm:hover{border-color:var(--oak);color:var(--oak)}
.catbar{background:var(--walnut-2);border-top:1px solid rgba(232,223,209,.08)}
.catbar-inner{
  max-width:1280px;margin:0 auto;padding:0 28px;
  display:flex;align-items:center;gap:40px;               /* was 28px → more space between items */
  font-size:14.5px;                                        /* was 13px → ~10% bigger */
  font-weight:500;overflow-x:auto;
}
.catbar-inner a{
  padding:14px 0;color:var(--kraft);white-space:nowrap;
  border-bottom:2px solid transparent;transition:.15s;
}
.catbar-inner a:hover{color:var(--oak);border-color:var(--oak)}

/* ---------- BUYER CITY PICKER (header) ---------- */
.city-picker{position:relative;flex:0 0 auto;min-width:0}
.city-picker-btn{background:transparent;border:1px solid rgba(232,223,209,.35);color:var(--kraft);
  padding:9px 14px;border-radius:8px;font-weight:600;font-size:13.5px;cursor:pointer;transition:.15s;
  max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  display:inline-flex;align-items:center;gap:6px}
.city-picker-btn:hover{border-color:var(--oak);color:var(--oak)}
.city-picker-btn .cpb-name{overflow:hidden;text-overflow:ellipsis;max-width:150px;display:inline-block;vertical-align:bottom}
.city-picker-btn .cpb-caret{margin-left:2px;padding:2px 5px;border-radius:3px}
.city-picker-btn .cpb-caret:hover{background:rgba(232,223,209,.18)}
.city-picker-btn.is-locating{opacity:.7;cursor:progress}
.city-picker-btn:disabled{cursor:progress}
.city-picker-panel{position:absolute;top:calc(100% + 8px);left:0;z-index:50;background:var(--paper);
  color:var(--ink);border:1px solid var(--line);border-radius:6px;box-shadow:0 12px 32px rgba(0,0,0,.18);
  width:240px;max-width:calc(100vw - 24px);padding:10px;max-height:340px;overflow-y:auto}
.city-picker-gps{width:100%;background:var(--accent);color:#fff;border:0;border-radius:8px;
  padding:10px 12px;font-weight:600;font-size:13.5px;cursor:pointer;margin-bottom:8px;transition:.15s}
.city-picker-gps:hover{background:#c2461a}
.city-picker-list{display:flex;flex-direction:column;position:relative;z-index:1;
  background:#fff;border-radius:4px}
.city-picker-list a{padding:8px 10px;border-radius:4px;color:var(--ink);font-size:13.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.city-picker-list a:hover{background:var(--kraft)}
.city-picker-list a.on{background:var(--walnut);color:var(--kraft);font-weight:600}
@media(max-width:640px){
  .city-picker-btn{max-width:110px;font-size:13px}
}
.mobile-drawer .city-picker{margin-bottom:14px}
.mobile-drawer .city-picker-btn{width:100%;max-width:none;text-align:left}
.mobile-drawer .city-picker-btn .cpb-name{max-width:none}
.mobile-drawer .city-picker-panel{position:static;width:100%;max-width:none;box-shadow:none;margin-top:8px}

/* ---------- BUYER CITY CONFIRMATION BAR (homepage) ---------- */
.city-confirm-bar{
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  background:var(--kraft);color:var(--walnut);padding:9px 40px 9px 16px;text-align:center;
  font-size:13.5px;border-bottom:1px solid var(--line);box-sizing:border-box;
  max-width:100%;position:relative;
}
.city-confirm-bar a{color:var(--accent);text-decoration:underline;font-weight:600;transition:.15s}
.city-confirm-bar a:hover{color:#c2461a}
.city-confirm-bar-prompt .sep{margin:0 8px;opacity:.5}
.city-confirm-close{
  background:none;border:0;color:var(--oak);font-size:16px;line-height:1;cursor:pointer;
  position:absolute;right:12px;top:50%;transform:translateY(-50%);padding:4px;
}
.city-confirm-close:hover{color:var(--walnut)}
@media(max-width:600px){
  .city-confirm-bar{font-size:12px;padding:7px 32px 7px 10px;gap:6px}
  .city-confirm-close{right:8px}
}

/* ---------- HERO ---------- */
.hero{background:linear-gradient(105deg, var(--walnut) 0%, var(--walnut) 46%, transparent 46%),linear-gradient(180deg,#4a3527,#3B2A20);position:relative;overflow:hidden}
.hero-inner{max-width:1280px;margin:0 auto;padding:64px 28px 72px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.hero .eyebrow{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.16em;color:var(--oak);text-transform:uppercase;margin-bottom:20px;display:inline-flex;align-items:center;gap:10px}
.hero .eyebrow::before{content:'';width:32px;height:1px;background:var(--oak)}
.hero h1{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(28px,9vw,58px);line-height:1.05;color:var(--white);letter-spacing:-.02em;margin-bottom:22px;max-width:100%;word-break:break-word;overflow-wrap:break-word;hyphens:auto}
.hero h1 em{font-style:italic;color:var(--oak)}
.hero p{color:var(--kraft);font-size:16.5px;max-width:440px;margin-bottom:32px;opacity:.85}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-stats{display:flex;gap:36px;margin-top:44px}
.hero-stats .stat .n{font-family:'Fraunces',serif;font-size:30px;color:var(--white);font-weight:600}
.hero-stats .stat .l{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--oak);letter-spacing:.06em;margin-top:2px}
.hero-visual{position:relative;height:420px}
.hero-card{position:absolute;background:var(--paper);border-radius:8px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.hero-card img{width:100%;height:100%;object-fit:cover}
.hero-card-fallback{width:100%;height:100%;background:linear-gradient(120deg,#2A1D16,#3B2A20 55%,#4a3050)}
.hc1{width:64%;height:78%;top:0;right:0;z-index:2}
.hc2{width:52%;height:56%;bottom:0;left:0;z-index:3;border:4px solid var(--paper)}
.hero-tag{position:absolute;bottom:14px;left:14px;z-index:4;background:var(--ink);color:var(--white);font-family:'JetBrains Mono',monospace;font-size:11px;padding:7px 12px;border-radius:4px}
.hero-tag b{color:var(--oak)}

/* ---------- WOODEN ITEMS FEATURE SECTION ("Featured Collection" style
   band — big image + copy + button, right after the hero) — Pakistan
   walnut/oak/kraft palette, not the USA warm-luxury cream/brass treatment
   this layout is otherwise associated with. ---------- */
.wooden-feature-band{width:100%;background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:72px 0}
.wooden-feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.wooden-feature-image{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:4/3;box-shadow:0 24px 50px rgba(26,19,14,.18)}
.wooden-feature-image img{width:100%;height:100%;object-fit:cover}
.wooden-feature-image-placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:linear-gradient(135deg,var(--walnut),var(--walnut-2) 55%,#4a3050);color:var(--oak);text-align:center;padding:24px}
.wooden-feature-image-placeholder svg{width:52px;height:52px;opacity:.65}
.wooden-feature-image-placeholder span{font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;opacity:.85}
.wooden-feature-eyebrow{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.16em;color:var(--accent);text-transform:uppercase;margin-bottom:16px;display:inline-flex;align-items:center;gap:10px}
.wooden-feature-eyebrow::before{content:'';width:32px;height:1px;background:var(--accent)}
.wooden-feature-copy h2{font-size:clamp(1.7rem,3.4vw,2.3rem);margin-bottom:18px}
.wooden-feature-copy p{color:#5c4d40;max-width:520px;margin-bottom:28px}
@media(max-width:960px){.wooden-feature-grid{gap:40px}}
@media(max-width:820px){.wooden-feature-band{padding:48px 0}.wooden-feature-grid{grid-template-columns:1fr;gap:28px}.wooden-feature-image{aspect-ratio:16/10}}
@media(max-width:480px){.wooden-feature-copy p{max-width:none}}

/* ---------- ADVANCED SEARCH ---------- */
.search-panel-wrap{background:var(--walnut);padding:0 28px 40px}
.search-panel{max-width:1280px;margin:0 auto;background:var(--white);border-radius:12px;padding:22px 24px;box-shadow:0 18px 44px rgba(0,0,0,.22);margin-top:-30px;position:relative;z-index:5}
.sp-title{font-family:'JetBrains Mono';font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.sp-fields{display:grid;grid-template-columns:2fr 1.1fr 1.1fr 1.3fr auto;gap:14px;align-items:end}
.sp-field label{display:block;font-size:11.5px;font-weight:600;color:var(--walnut);margin-bottom:6px}
.sp-field input,.sp-field select{width:100%;padding:12px 13px;border:1px solid var(--line-strong);border-radius:8px;font-family:'Archivo';font-size:14px;background:#fff;color:var(--ink)}
.sp-field input:focus,.sp-field select:focus{outline:2px solid rgba(217,83,30,.25);border-color:var(--accent)}
.price-pair{display:flex;align-items:center;gap:6px}

/* SEO intro paragraph — matches .search-panel's max-width so it lines up with the search box above it */
.seo-intro{max-width:1280px;margin:0 auto;text-align:center;font-size:1.25rem;line-height:1.6;color:#6b6259;padding:2.5rem 1rem;box-sizing:border-box}
.price-pair input{padding:12px 10px}
.price-pair span{color:#9a8a7c}
.sp-btn{background:var(--accent);color:#fff;border:0;padding:13px 26px;border-radius:8px;font-family:'Archivo';font-weight:700;font-size:15px;cursor:pointer;white-space:nowrap;transition:.15s;height:46px}
.sp-btn:hover{background:#c2461a;transform:translateY(-1px)}
.sp-tags{display:flex;gap:10px;align-items:center;margin-top:16px;flex-wrap:wrap;font-size:12.5px}
.sp-tags span{font-family:'JetBrains Mono';font-size:11px;color:#9a8a7c;text-transform:uppercase;letter-spacing:.05em}
.sp-tags a{background:var(--kraft);color:var(--walnut);padding:6px 12px;border-radius:20px;cursor:pointer;transition:.15s;font-weight:500}
.sp-tags a:hover{background:var(--oak);color:var(--walnut-2)}

/* ---------- HOMEPAGE SIDEBAR SHELL ---------- */
.home-shell{max-width:1280px;margin:0 auto;padding:40px 28px;display:grid;grid-template-columns:248px 1fr;gap:32px;align-items:start}
.home-side{position:sticky;top:120px;display:flex;flex-direction:column;gap:16px}
.side-cta{padding:16px 18px;background:rgba(217,83,30,.06);border:1px solid var(--line);border-radius:12px}
.side-cta p{font-size:12px;color:#7a6a5c;margin-bottom:10px}
.side-cta button{width:100%;background:var(--accent);color:#fff;border:0;padding:10px;border-radius:8px;font-family:'Archivo';font-weight:600;font-size:13px;cursor:pointer;transition:.15s}
.side-cta button:hover{background:#c2461a}
.home-main{min-width:0}

/* ---------- SHARED CATEGORY SIDEBAR (homepage + listing) ---------- */
.cat-sidebar{background:var(--white);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.cat-sidebar-head{background:var(--walnut);color:var(--oak);font-family:'JetBrains Mono';font-size:13px;letter-spacing:.05em;padding:13px 16px}
/* Capped + internally scrollable: on the homepage this sidebar sits in a
   single-row grid (.home-shell) next to .home-main. Grid row height is the
   max of both columns, so an uncapped category list (25+ top-level rows)
   renders taller than .home-main's few sections and leaves a dead gap below
   the last one (Featured wholesale lots) before the next full-width section.
   Capping height + scrolling internally keeps this column's height in line
   with typical main-column content. */
.cat-tree{list-style:none;max-height:480px;overflow-y:auto;scrollbar-width:thin}
.cat-tree::-webkit-scrollbar{width:6px}
.cat-tree::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:3px}
.cat-item{border-bottom:1px solid var(--line)}
.cat-item:last-child{border-bottom:0}
.cat-row{display:flex;align-items:center;gap:6px;padding-right:6px}
.cat-main{flex:1;display:flex;align-items:center;gap:8px;padding:11px 14px;color:var(--walnut);text-decoration:none;font-size:14px}
.cat-ico{color:var(--accent-2);font-size:11px}
.cat-main:hover{color:var(--accent)}
.cat-main.on{color:var(--accent);font-weight:600}
.cat-count{font-family:'JetBrains Mono';font-size:11px;color:#9a8a7c}
.cat-toggle{background:0;border:0;color:#9a8a7c;cursor:pointer;font-size:12px;padding:6px 10px;transition:transform .2s}
.cat-item.open .cat-toggle{transform:rotate(180deg)}
.cat-sub{list-style:none;max-height:0;overflow:hidden;transition:max-height .35s ease;background:var(--paper)}
.cat-item.open .cat-sub{max-height:800px}
.cat-sub li a{display:block;padding:8px 14px 8px 34px;font-size:13px;color:#5a4a3c;text-decoration:none}
.cat-sub li a:hover,.cat-sub li a.on{color:var(--accent);background:rgba(217,83,30,.06)}

/* ---------- SECTION SHELL ---------- */
section.block{max-width:1280px;margin:0 auto;padding:72px 28px}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:36px;gap:20px}
.sec-head .k{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.14em;color:var(--accent);text-transform:uppercase;margin-bottom:10px}
.sec-head h2{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(1.3rem,3vw,1.6rem);line-height:1.2;letter-spacing:-.01em;color:var(--walnut)}
.sec-head a.more{font-size:13px;font-weight:600;color:var(--walnut);border-bottom:2px solid var(--accent);padding-bottom:2px}

/* ---------- CATEGORY TILES ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.cat-tile{position:relative;border-radius:8px;overflow:hidden;height:200px;background:var(--walnut);display:flex;flex-direction:column;justify-content:flex-end}
.cat-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.7;transition:.3s}
.cat-tile:hover img{opacity:.9;transform:scale(1.04)}
.cat-tile .body{position:relative;padding:18px;background:linear-gradient(transparent,rgba(26,19,14,.85))}
.cat-tile h3{color:#fff;font-family:'Fraunces',serif;font-size:1.15rem;font-weight:600;line-height:1.25}
.cat-tile span{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--oak)}

/* ---------- PRODUCT CARD ---------- */
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.prod-grid.three{grid-template-columns:repeat(3,1fr)}
.pcard{background:var(--white);border:1px solid var(--line);border-radius:8px;overflow:hidden;transition:.2s;cursor:pointer;display:flex;flex-direction:column;width:auto;min-width:0}
.pcard:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(59,42,32,.14);border-color:var(--line-strong)}
.pcard .imgwrap{position:relative;aspect-ratio:1/1;background:var(--kraft);overflow:hidden}
.pcard .imgwrap img{width:100%;height:100%;object-fit:cover}
.pcard .badge{position:absolute;top:12px;left:12px;background:var(--walnut);color:var(--oak);font-family:'JetBrains Mono',monospace;font-size:10.5px;padding:5px 9px;border-radius:3px;letter-spacing:.04em}
.pcard .badge.hot{background:var(--accent);color:#fff}
.pcard .body{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1}
.pcard .vendor{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--accent-2);display:flex;align-items:center;gap:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcard .vendor .verified{color:var(--accent)}
.pcard h3{font-size:1.05rem;font-weight:600;line-height:1.25;color:var(--walnut);overflow-wrap:break-word}
.pcard .meta{display:flex;gap:12px;font-size:11.5px;color:#7a6a5c;font-family:'JetBrains Mono',monospace;margin-top:auto}
.priceline{display:flex;align-items:baseline;justify-content:space-between;padding-top:12px;border-top:1px dashed var(--line);flex-wrap:wrap;gap:6px}
.priceline .price{font-family:'Fraunces',serif;font-size:22px;font-weight:600;color:var(--walnut);min-width:0}
.priceline .price small{font-size:12px;font-family:'JetBrains Mono';color:#7a6a5c;font-weight:400}
.priceline .moq{font-family:'JetBrains Mono',monospace;font-size:11px;background:var(--kraft);padding:4px 8px;border-radius:3px;color:var(--walnut);white-space:nowrap;flex-shrink:0}
.custom-price-block .custom-price-title{font-family:'Fraunces',serif;font-size:20px;font-weight:600;color:var(--accent);margin-bottom:4px}
.custom-price-block .custom-price-sub{font-size:13px;color:#7a6a5c;max-width:420px}

/* ---------- MINI PRODUCT CARD (horizontal auto-scroll rows) ---------- */
.pcard-mini{background:var(--white);border:1px solid var(--line);border-radius:8px;overflow:hidden;transition:.2s;cursor:pointer;display:flex;flex-direction:column}
.pcard-mini:hover{box-shadow:0 12px 26px rgba(59,42,32,.14);border-color:var(--line-strong)}
.pcard-mini .imgwrap{position:relative;aspect-ratio:1/1;background:var(--kraft);overflow:hidden}
.pcard-mini .imgwrap img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.pcard-mini .body{padding:10px 12px;display:flex;flex-direction:column;gap:4px}
.pcard-mini .vendor{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--accent-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard-mini h4{font-size:13.5px;font-weight:600;line-height:1.3;color:var(--walnut);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcard-mini .price{font-family:'Fraunces',serif;font-size:14.5px;font-weight:600;color:var(--walnut)}
.pcard-mini .price-custom{font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:600;color:var(--accent)}

/* ---------- PRODUCT CONDITION BADGE ---------- */
.cond-badge{font-family:'JetBrains Mono',monospace;font-size:10px;padding:3px 8px;border-radius:4px;background:var(--kraft);color:var(--walnut);white-space:nowrap}
.cond-badge.cond-used{background:rgba(201,168,118,.2);color:#8a6d0f}
.cond-badge.cond-chinioti{background:rgba(92,60,223,.12);color:#5C3CDF}
.cond-badge.cond-new{background:rgba(122,139,111,.15);color:#4a5a3f}
.pcard .cond-badge{margin-top:-2px}

/* TCS courier tracking checkpoint timeline (/track page + Filament modal) */
.tcs-checkpoint-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.tcs-checkpoint-list li{padding-left:16px;border-left:2px solid var(--line)}
.tcs-checkpoint-list li strong{display:block;color:var(--walnut);font-size:14px}
.tcs-checkpoint-meta{display:block;font-size:12px;color:#7a6a5c;font-family:'JetBrains Mono',monospace;margin-top:2px}
.pd-meta .cond-badge{font-size:11px}

/* ---------- PRODUCT PAGE: CATEGORY TAGS (e.g. "Bedroom / Bedroom Sets") ---------- */
.pd-cat-tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 12px}
.pd-cat-tag{display:inline-block;padding:4px 12px;border-radius:20px;background:var(--kraft);color:var(--walnut);font-family:'Archivo';font-size:12.5px;font-weight:600;text-decoration:none;white-space:nowrap;transition:.15s}
.pd-cat-tag:hover{background:var(--accent);color:#fff}
.pd-cat-sep{color:#9a8a7a;font-size:12px}

/* ---------- SPLIT / VENDOR CTA ---------- */
.split{background:var(--walnut);color:var(--kraft)}
.split-inner{max-width:1280px;margin:0 auto;padding:30px 28px;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split .k{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.14em;color:var(--oak);text-transform:uppercase;margin-bottom:14px}
.split h2{font-family:'Fraunces',serif;font-weight:600;font-size:40px;color:var(--white);line-height:1.05;letter-spacing:-.02em;margin-bottom:20px}
.split h2 em{font-style:italic;color:var(--oak)}
.split p{opacity:.82;margin-bottom:28px;max-width:420px}
.steps{display:flex;flex-direction:column;gap:2px}
.step{display:flex;gap:18px;padding:20px;border:1px solid rgba(232,223,209,.14);border-radius:6px;background:rgba(232,223,209,.03)}
.step .num{font-family:'Fraunces',serif;font-size:26px;color:var(--oak);font-weight:600;min-width:40px}
.step h4{color:var(--white);font-size:16px;margin-bottom:4px}
.step p{font-size:13.5px;margin:0;opacity:.7}
.cta-pair{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- FOOTER ---------- */
footer.site-footer{background:var(--walnut-2);color:var(--kraft);padding:56px 28px 32px}
.foot-inner{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.site-footer h5{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.1em;color:var(--oak);margin-bottom:16px;text-transform:uppercase}
.site-footer ul{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:13.5px;opacity:.8}
.foot-bottom{max-width:1280px;margin:40px auto 0;padding-top:24px;border-top:1px solid rgba(232,223,209,.12);display:flex;justify-content:space-between;font-size:12px;font-family:'JetBrains Mono';opacity:.6;flex-wrap:wrap;gap:12px}

/* ---------- PWA STANDALONE (installed app): hide footer, keep a small
   vendor-login link ---------- */
/* Website (any normal browser tab, desktop or mobile) is completely
   unaffected — these rules only ever fire inside display-mode:standalone
   or with the JS-added .pwa-standalone fallback class (iOS Safari). The
   footer stays in the DOM either way, just visually hidden in-app. */
.app-vendor-login{display:none}
@media(display-mode:standalone){
  .site-footer{display:none}
  .app-vendor-login{display:block}
}
body.pwa-standalone .site-footer{display:none}
body.pwa-standalone .app-vendor-login{display:block}
.app-vendor-login{
  text-align:center;padding:18px 20px calc(18px + env(safe-area-inset-bottom));
  background:var(--paper);
}
.app-vendor-login a{
  font-family:'JetBrains Mono',monospace;font-size:12px;color:#9a8a7c;
  text-decoration:none;letter-spacing:.03em;
}
.app-vendor-login a:hover{color:var(--walnut)}

/* ---------- RESPONSIVE ---------- */
@media(max-width:960px){
  .hero-inner,.split-inner{grid-template-columns:1fr}
  .hero{background:var(--walnut)}
  .hero-visual{display:none}
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .home-shell{grid-template-columns:1fr}
  .home-side{position:static}
  .foot-inner{grid-template-columns:1fr 1fr}
  .sp-fields{grid-template-columns:1fr 1fr}
  .sp-btn{grid-column:1/-1}
  .hero h1{font-size:clamp(30px,6vw,42px)}
}

/* ---------- ALT BACKGROUND BAND (scroll-section variant) ----------
   Full-bleed white strip with top/bottom rule for sections passing alt=true
   — same effect the old carousel .alt-bg gave. The inner .container +
   .home-section still handle max-width/padding, this just paints the band. */
.home-section-altbg{width:100%;background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ---------- HEADER NAV "MORE" DROPDOWN ---------- */
.nav-more{position:relative}
.nav-more-trigger{cursor:pointer;color:var(--oak) !important}
.nav-more-menu{position:absolute;top:100%;right:0;background:var(--walnut-2);border:1px solid rgba(232,223,209,.15);border-radius:8px;padding:8px;min-width:220px;display:none;flex-direction:column;gap:2px;z-index:60;box-shadow:0 16px 40px rgba(0,0,0,.4)}
.nav-more:hover .nav-more-menu,.nav-more.open .nav-more-menu{display:flex}
.nav-more-menu a{padding:9px 14px !important;border-radius:5px;border:0 !important;white-space:nowrap;font-size:13px}
.nav-more-menu a:hover{background:rgba(217,83,30,.2);color:#fff !important}

/* ---------- HEADER NAV MEGA MENU (Shop / Brands) ----------
   .nav-mega-wrap is deliberately left unpositioned (not position:relative) so
   .nav-mega-panel's position:absolute resolves against .nav (which IS
   positioned, see .nav above) instead of the individual trigger — that's what
   centers the panel inside the nav bar regardless of whether Shop or Brands
   (different horizontal positions) opened it, so it can never clip past the
   viewport edge at laptop widths. Opens on hover (CSS) + click/tap (JS below,
   same reused pattern as .nav-more) since touch laptops have no hover. */
.nav-mega-trigger{cursor:pointer;color:var(--oak) !important}
.nav-mega-panel{
    position:absolute;top:calc(100% + 14px);left:0;right:0;margin:0 auto;
    width:min(680px,calc(100vw - 32px));
    background:var(--walnut-2);border:1px solid rgba(232,223,209,.15);border-radius:14px;
    padding:26px 30px;display:none;gap:36px;z-index:60;
    box-shadow:0 20px 48px rgba(0,0,0,.4);
    opacity:0;transform:translateY(-8px);
    transition:opacity .18s ease,transform .18s ease;
}
.nav-mega-wrap:hover .nav-mega-panel,.nav-mega-wrap.open .nav-mega-panel{display:flex;opacity:1;transform:translateY(0)}
.nav-mega-panel-brands{width:min(520px,calc(100vw - 32px))}
.nav-mega-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.nav-mega-col-brands{flex:1.6}
.nav-mega-heading{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--oak);margin-bottom:10px}
.nav-mega-col a{padding:8px 10px;margin:0 -10px;border-radius:6px;color:var(--kraft) !important;font-size:14px;white-space:nowrap;text-decoration:none;display:block;border:0 !important}
.nav-mega-col a:hover{background:rgba(217,83,30,.2);color:#fff !important}
.nav-mega-brandgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.nav-mega-brand{display:flex;align-items:center;gap:9px;padding:8px;border-radius:8px;color:var(--kraft) !important;text-decoration:none;font-size:13px;overflow:hidden}
.nav-mega-brand span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-mega-brand:hover{background:rgba(217,83,30,.2);color:#fff !important}
.nav-mega-brand-logo{width:28px;height:28px;border-radius:6px;background:var(--kraft);display:grid;place-items:center;overflow:hidden;flex-shrink:0}
.nav-mega-brand-logo img{width:100%;height:100%;object-fit:cover}
.nav-mega-brand-logo .initials{font-family:'Fraunces';font-size:12px;color:var(--accent-2);font-weight:600}
.nav-mega-empty{color:rgba(232,223,209,.5);font-size:13px;padding:8px;grid-column:1/-1}

/* ---------- EXPO PAGE ---------- */
.expo-hero{background:linear-gradient(120deg,#2A1D16,#3B2A20 55%,#4a3050);background-size:cover;background-position:center;color:var(--kraft);padding:72px 28px}
.expo-hero-inner{max-width:1180px;margin:0 auto}
.expo-hero .eyebrow{font-family:'JetBrains Mono';font-size:12px;letter-spacing:.18em;color:var(--oak);text-transform:uppercase;margin-bottom:18px;display:flex;align-items:center;gap:12px}
.expo-hero .eyebrow::before{content:'';width:36px;height:1px;background:var(--oak)}
.expo-hero h1{font-family:'Fraunces',serif;font-weight:600;font-size:50px;color:#fff;line-height:1.03;letter-spacing:-.02em;margin-bottom:18px;max-width:720px}
.expo-hero h1 em{font-style:italic;color:var(--oak)}
.expo-hero p{font-size:16.5px;opacity:.85;max-width:520px}
.expo-hero .stats{display:flex;gap:36px;margin-top:36px}
.expo-hero .stats .n{font-family:'Fraunces';font-size:28px;color:#fff;font-weight:600}
.expo-hero .stats .l{font-family:'JetBrains Mono';font-size:11px;color:var(--oak);letter-spacing:.05em}
.expo-wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.expo-sec{padding:60px 0}
.expo-sec-head{margin-bottom:32px}
.expo-sec-head .k{font-family:'JetBrains Mono';font-size:12px;letter-spacing:.14em;color:var(--accent);text-transform:uppercase;margin-bottom:10px}
.expo-sec-head h2{font-family:'Fraunces';font-weight:600;font-size:clamp(1.3rem,3vw,1.6rem);line-height:1.2;letter-spacing:-.01em;color:var(--walnut)}
.expo-sec-head p{color:#5a4a3c;margin-top:8px;max-width:600px;font-size:15px}
.expo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.expo-card{background:var(--white);border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;transition:.2s}
.expo-card:hover{box-shadow:0 16px 40px rgba(59,42,32,.14);transform:translateY(-3px)}
.expo-card .banner{height:170px;position:relative;overflow:hidden;background:var(--walnut)}
.expo-card .banner img{width:100%;height:100%;object-fit:cover;opacity:.85}
.expo-card .date-chip{position:absolute;top:14px;left:14px;background:var(--accent);color:#fff;border-radius:8px;padding:8px 12px;text-align:center;font-family:'JetBrains Mono'}
.expo-card .date-chip .d{font-size:20px;font-weight:500;line-height:1}
.expo-card .date-chip .m{font-size:10px;letter-spacing:.08em;margin-top:2px}
.expo-card .status{position:absolute;top:14px;right:14px;font-family:'JetBrains Mono';font-size:10px;padding:5px 10px;border-radius:20px;background:rgba(122,139,111,.9);color:#fff}
.expo-card .status.upcoming{background:rgba(217,83,30,.92)}
.expo-card .ebody{padding:20px;flex:1;display:flex;flex-direction:column}
.expo-card h3{font-family:'Fraunces';font-size:1.15rem;font-weight:600;color:var(--walnut);line-height:1.15;margin-bottom:8px}
.expo-card .venue{font-family:'JetBrains Mono';font-size:12px;color:var(--accent-2);margin-bottom:6px}
.expo-card .dates{font-family:'JetBrains Mono';font-size:12px;color:#7a6a5c;margin-bottom:12px}
.expo-card .desc{font-size:13.5px;color:#5a4a3c;line-height:1.55;margin-bottom:16px;flex:1;overflow:hidden}
.expo-content p{margin:0 0 10px;font-family:'Archivo',sans-serif}
.expo-content p:last-child{margin-bottom:0}
.expo-content ul,.expo-content ol{margin:0 0 10px 18px}
.expo-content li{margin-bottom:4px}
.expo-content strong,.expo-content b{color:var(--walnut);font-weight:700}
.expo-content em{font-style:italic}
.expo-content a{color:var(--accent);font-weight:600;text-decoration:underline;word-break:break-word}
.expo-content h1,.expo-content h2,.expo-content h3,.expo-content h4{font-family:'Fraunces',serif;font-weight:600;color:var(--walnut);font-size:1rem;line-height:1.25;margin:0 0 8px}
.expo-content blockquote{border-left:3px solid var(--accent);padding:2px 0 2px 14px;margin:10px 0;font-style:italic;color:#5a4a3c}
.expo-content img{max-width:100%;height:auto;border-radius:8px;margin:8px 0}
.expo-card .foot{display:flex;justify-content:space-between;align-items:center;padding-top:14px;border-top:1px dashed var(--line)}
.expo-card .city-tag{font-family:'JetBrains Mono';font-size:11px;background:var(--kraft);color:var(--walnut);padding:5px 11px;border-radius:20px}
.expo-card .reg{background:var(--accent);color:#fff;font-size:13px;font-weight:600;padding:9px 16px;border-radius:8px;text-decoration:none;transition:.15s}
.expo-card .reg:hover{background:#c2461a}
.city-section{background:var(--white);border-top:1px solid var(--line)}
.city-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.city-card{border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:.2s;cursor:pointer;background:var(--paper);text-decoration:none;display:block}
.city-card:hover{box-shadow:0 12px 30px rgba(59,42,32,.12);transform:translateY(-3px)}
.city-card .top{height:120px;position:relative;background:var(--walnut);overflow:hidden}
.city-card .top img{width:100%;height:100%;object-fit:cover;opacity:.6}
.city-card .top .name{position:absolute;bottom:12px;left:16px;font-family:'Fraunces';font-size:22px;font-weight:600;color:#fff}
.city-card .info{padding:16px}
.city-card .counts{display:flex;gap:18px;font-family:'JetBrains Mono';font-size:12px;color:#7a6a5c}
.city-card .counts b{color:var(--accent);font-size:16px;display:block}
.city-card .cta{margin-top:12px;font-size:13px;font-weight:600;color:var(--accent)}
@media(max-width:820px){.expo-grid,.city-grid{grid-template-columns:1fr}.expo-hero h1{font-size:36px}}
@media(max-width:480px){.expo-hero{padding:48px 20px}.expo-hero .stats{flex-wrap:wrap;gap:20px 28px}.expo-wrap{padding:0 18px}}

/* ---------- HOMEPAGE SECTIONS — all uniform ---------- */
/* Uniform vertical rhythm: every top-level homepage section (.home-section,
   .chiniot-section, .split-inner) uses the same padding-top/padding-bottom
   pair and margin:0, so the gap around each one is identical regardless of
   which two sections happen to be adjacent. */
.home-section{padding-top:30px;padding-bottom:30px;margin:0}
.home-section .sec-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:24px;gap:20px}
.home-section .sec-head .k{font-family:'JetBrains Mono';font-size:12px;letter-spacing:.12em;color:var(--accent);text-transform:uppercase;margin-bottom:8px}
.home-section .sec-head h2{font-family:'Fraunces';font-weight:600;font-size:clamp(1.3rem,3vw,1.6rem);line-height:1.2;letter-spacing:-.01em;color:var(--walnut)}
.home-section .sec-head .more{font-size:13px;font-weight:600;color:var(--walnut);border-bottom:2px solid var(--accent);padding-bottom:2px;white-space:nowrap}

/* the shared product grid — 4 per row, wraps */
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}

/* premium slightly bigger: 3 per row so cards are larger */
.prod-grid.premium-grid{grid-template-columns:repeat(3,1fr);gap:22px}

/* premium section subtle tint + accent edge */
.premium-section{background:linear-gradient(180deg,rgba(122,92,255,.05),transparent);border-radius:14px;padding:24px;margin-left:-24px;margin-right:-24px}

/* gold section — same tint/padding treatment as .premium-section, using the
   gold tier's own color (matches .ptier-badge.gold/.co-tier.gold) instead of
   premium's purple. scroll-section.blade.php generates this class name for
   variant="gold" the same way it does premium-section, but no rule existed
   for it, so Gold rendered with no tint/accent unlike Premium. */
.gold-section{background:linear-gradient(180deg,rgba(224,184,76,.08),transparent);border-radius:14px;padding:24px;margin-left:-24px;margin-right:-24px}

/* wooden-items homepage section — same tint/padding treatment as
   .premium-section/.gold-section, using the site's own oak/kraft tones
   (not the USA site's warm-luxury cream/brass) so it reads as its own
   catalog while staying in the Pakistan brand palette. */
.wooden-section{background:linear-gradient(180deg,rgba(201,168,118,.16),rgba(232,223,209,.25));border:1px solid rgba(201,168,118,.35);border-radius:14px;padding:24px;margin-left:-24px;margin-right:-24px}

@media(max-width:1100px){.prod-grid,.prod-grid.premium-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.prod-grid,.prod-grid.premium-grid{grid-template-columns:repeat(2,1fr)}}
/* NOTE: was grid-template-columns:1fr (1 card/row) — dead code in practice
   since the later @media(max-width:900px) block (line ~1139) already wins
   the cascade at this width with repeat(2,1fr). Made explicit here too so
   the two rules agree instead of silently relying on source order. */
@media(max-width:520px){.prod-grid,.prod-grid.premium-grid{grid-template-columns:repeat(2,1fr)}}

/* per-card tier badge — still used on premium/gold product cards */
.ptier-badge{position:absolute;top:10px;left:10px;font-family:'JetBrains Mono';font-size:9.5px;font-weight:500;letter-spacing:.05em;padding:4px 9px;border-radius:4px;z-index:2}
.ptier-badge.premium{background:linear-gradient(135deg,#7A5CFF,#5C3CDF);color:#fff}
.ptier-badge.gold{background:linear-gradient(135deg,#E0B84C,#C9A227);color:#3B2A20}

/* ---------- PREMIUM NAV LINK ---------- */
.nav-premium{
  color:#fff !important;
  background:linear-gradient(135deg,#7A5CFF,#5C3CDF);
  padding:8px 18px !important;                             /* a bit larger */
  border-radius:20px;
  margin-right:20px;                                        /* space before Living Room */
  font-size:14.5px;
  border-bottom:0 !important;                               /* no underline on hover */
}
.nav-premium:hover{opacity:.92;border-color:transparent !important}

/* ---------- PREMIUM PAGE ---------- */
.prem-hero{background:linear-gradient(120deg,#2A1D16,#3B2A20 55%,#4a3050);color:var(--kraft);padding:56px 28px}
.prem-hero .badge{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,#7A5CFF,#5C3CDF);color:#fff;font-family:'JetBrains Mono';font-size:12px;padding:7px 15px;border-radius:20px;margin-bottom:18px;letter-spacing:.06em}
.prem-hero h1{font-family:'Fraunces';font-weight:600;font-size:44px;line-height:1.1;letter-spacing:-.02em;color:#fff;margin-bottom:12px}
.prem-hero p{opacity:.82;max-width:480px;font-size:16px}
.filterbar{display:flex;gap:10px;margin:28px 0;flex-wrap:wrap}
.fchip{font-family:'JetBrains Mono';font-size:12px;padding:8px 16px;border-radius:20px;border:1px solid var(--line-strong);background:var(--white);cursor:pointer;text-decoration:none;color:var(--walnut);transition:.15s}
.fchip:hover{border-color:var(--accent);color:var(--accent)}
.fchip.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.fchip.on:hover{color:#fff}

/* ---------- COMPANIES DIRECTORY ---------- */
.co-cover{width:100%;height:220px;overflow:hidden;background:var(--kraft)}
.co-cover img{width:100%;height:100%;object-fit:cover}
.mfr-strip{display:inline-flex;align-items:center;gap:6px;margin-top:12px;background:var(--kraft);color:var(--walnut);font-family:'JetBrains Mono';font-size:11.5px;padding:7px 14px;border-radius:20px}
.co-head{text-align:center;padding:52px 28px 8px;max-width:100%;box-sizing:border-box}
/* .co-cover is a fixed height (220px) at every width — on narrow phones that
   reads as an oversized band above the (already content-driven) .co-head.
   Scale it — and the banner's own padding/logo — down under 600px. */
@media(max-width:600px){
  .co-cover{height:140px}
  .co-head{padding:28px 20px 8px}
  .co-head .co-logo{width:88px;height:88px}
  .co-head .co-logo .initials{font-size:32px}
}
.co-head h1{font-family:'Fraunces';font-size:clamp(1.6rem,4vw,2.2rem);line-height:1.15;letter-spacing:-.01em;font-weight:600;color:var(--walnut);margin-bottom:10px;max-width:100%;word-break:break-word;overflow-wrap:break-word;hyphens:auto}
.co-head p{color:#5a4a3c;max-width:520px;margin:0 auto;font-size:15px}
.co-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px;padding:40px 0}
.co-card{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:24px;text-align:center;transition:.2s;display:flex;flex-direction:column;align-items:center;gap:12px}
.co-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(59,42,32,.14);border-color:var(--line-strong)}
.co-card-link{cursor:pointer;text-decoration:none;color:inherit;display:flex;flex-direction:column;align-items:center;gap:12px}
.co-logo{width:120px;height:120px;border-radius:14px;background:var(--kraft);display:grid;place-items:center;overflow:hidden;border:1px solid var(--line)}
.co-logo img{width:100%;height:100%;object-fit:cover}
.co-logo .initials{font-family:'Fraunces';font-size:44px;color:var(--accent-2);font-weight:600}

/* ---------- VENDOR PROFILE HEADER (Layout A / Layout C — admin-selectable) ----------
   Both reuse .co-logo/.co-tier/.mfr-strip/.vsocials/.contact-block as-is;
   only the surrounding split/card structure differs between the two. */
.sf-head{padding:36px 0}
.sf-head h1{font-family:'Fraunces';font-size:clamp(1.4rem,3vw,1.9rem);line-height:1.2;color:var(--walnut);margin-bottom:4px;word-break:break-word;overflow-wrap:break-word}
.sf-tagline{color:#5a4a3c;font-size:14px;margin-bottom:4px}
.sf-meta{color:#9a8a7c;font-size:12px}
.sf-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.sf-logo{flex-shrink:0}

/* Layout A — logo + identity left, actions + socials right, one row */
.sf-head-a{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.sf-head-identity{display:flex;align-items:center;gap:20px;min-width:0}
.sf-identity-text{min-width:0}
.sf-head-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}

/* Layout C — bordered logo card + fuller info left, grouped actions right */
.sf-head-c{display:flex;align-items:flex-start;justify-content:space-between;gap:28px;flex-wrap:wrap}
.sf-head-card{display:flex;gap:20px;background:var(--white);border:1px solid var(--line);border-radius:16px;padding:22px;flex:1 1 380px;min-width:0}
.sf-logo-card{border:2px solid var(--line-strong)}
.sf-card-info{min-width:0}
.sf-card-meta-grid{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:12.5px;color:#5a4a3c;margin-top:6px}
.sf-head-actions-c{display:flex;flex-direction:column;align-items:flex-end;gap:14px;flex-shrink:0}

@media(max-width:768px){
  .sf-head{padding:24px 0}
  .sf-head-a,.sf-head-c{flex-direction:column;align-items:stretch}
  .sf-head-identity{flex-direction:column;text-align:center}
  .sf-head-card{flex-direction:column;align-items:center;text-align:center}
  .sf-card-meta-grid{justify-content:center}
  .sf-head-actions{justify-content:center}
  .sf-head-actions-c{align-items:center;width:100%}
  .sf-head .co-logo{width:88px;height:88px;margin:0 auto}
  .sf-head .co-logo .initials{font-size:32px}
}

.co-name{font-weight:600;font-size:16px;color:var(--walnut);display:flex;align-items:center;gap:6px}
.co-name .vf{color:var(--accent)}
.co-meta{font-family:'JetBrains Mono';font-size:11px;color:#7a6a5c}
.co-tier{font-family:'JetBrains Mono';font-size:9.5px;padding:3px 9px;border-radius:12px;letter-spacing:.05em}
.co-tier.premium{background:linear-gradient(135deg,#7A5CFF,#5C3CDF);color:#fff}
.co-tier.gold{background:linear-gradient(135deg,#E0B84C,#C9A227);color:#3B2A20}
.co-tier.startup{background:var(--kraft);color:var(--walnut)}

/* ---------- SHARED AUTO-SCROLL ROWS (marquee) ----------
   ONE implementation used by every homepage product section: Chiniot, the
   category carousels (Home/Office/Cafés/Hotels/Outdoor), Special Offers,
   Featured wholesale lots, Startup, Near You, Premium, Gold, and the bottom
   category strips (Bed Foam/Plastic Chair/Mattress/Office Chairs). Markup:
   .scroll-wrap > .scroll-row[data-dir] > .scroll-track > .pcard-mini's
   (printed twice — the 2nd copy wrapped in .scroll-dup — so the loop from
   0% to -50% is seamless). */
.scroll-wrap{display:flex;flex-direction:column;gap:18px;width:100%;max-width:100%;min-width:0;box-sizing:border-box}
/* Containment backstop — ONE rule every current and future scroll row must
   satisfy so a wide .scroll-track (width:max-content, printed twice) can
   never widen the page: overflow:hidden clips it, max-width:100% stops it
   growing past its column, min-width:0 overrides the flex/grid default
   min-width:auto that would otherwise let max-content win, box-sizing keeps
   any padding from adding to that width. */
.scroll-row{width:100%;max-width:100%;min-width:0;overflow:hidden;box-sizing:border-box}
.scroll-track{display:flex;flex-wrap:nowrap;gap:16px;width:max-content;min-width:0;animation:scroll-marquee 40s linear infinite}
.scroll-row[data-dir="right"] .scroll-track{animation-direction:reverse}
.scroll-row:hover .scroll-track,.scroll-row:focus-within .scroll-track{animation-play-state:paused}
.scroll-track .scroll-dup{display:contents} /* unwraps into the flex row; exists only as a hide-on-mobile hook */
@keyframes scroll-marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)} /* -50% because the track is printed twice */
}
.scroll-track .pcard-mini{flex:0 0 auto;width:220px}
/* Mobile: ~2 cards per row (peek of a 3rd) so the row visibly scrolls
   instead of looking like one full-width card. flex-basis + explicit
   min/max-width together so nothing (an intervening flex:1 default, a
   min-width:auto content-based floor, etc.) can stretch it back out. */
@media(max-width:600px){
  .scroll-track .pcard-mini,
  .scroll-row .pcard-mini,
  .scroll-section .pcard-mini{
    width:46vw;min-width:46vw;max-width:46vw;flex:0 0 46vw;
  }
  .scroll-track{animation-duration:28s;gap:10px}
}
@media(max-width:400px){
  .scroll-track .pcard-mini,
  .scroll-row .pcard-mini,
  .scroll-section .pcard-mini{
    width:44vw;min-width:44vw;max-width:44vw;flex:0 0 44vw;
  }
}
/* Small phones: a continuously-running animation competes with page scroll
   for the compositor on low-end devices — swap to a native swipeable strip
   instead (zero JS/CPU cost, browser-optimized) rather than fight for frames.
   The duplicate half (only there to loop the animation) is dropped since
   there's nothing to loop. */
@media(max-width:480px){
  .scroll-row{overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scrollbar-width:none}
  .scroll-row::-webkit-scrollbar{display:none}
  .scroll-track{animation:none;width:auto}
  .scroll-track .pcard-mini{scroll-snap-align:start}
  .scroll-track .scroll-dup{display:none}
}
/* Bottom category strips opt into the swipeable-strip treatment at a wider
   cutoff (tablet included) via [data-mobile="swipe"] on .scroll-wrap — they're
   extra rows stacked on top of everything above, so on phones/tablets they
   swipe natively; desktop still gets the full marquee. */
@media(max-width:768px){
  .scroll-wrap[data-mobile="swipe"] .scroll-row{overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scrollbar-width:none}
  .scroll-wrap[data-mobile="swipe"] .scroll-row::-webkit-scrollbar{display:none}
  .scroll-wrap[data-mobile="swipe"] .scroll-track{animation:none;width:auto}
  .scroll-wrap[data-mobile="swipe"] .scroll-track .pcard-mini{scroll-snap-align:start}
  .scroll-wrap[data-mobile="swipe"] .scroll-track .scroll-dup{display:none}
}
@media (prefers-reduced-motion: reduce){
  .scroll-track{animation:none}
}

/* ---------- CHINIOT SHOWCASE — full-bleed background, .scroll-wrap inside ----------
   Rows/track live inside the section's .container (same max-width:1280px,
   centered column as every other homepage section) — NOT full-bleed. Only
   the background bleeds edge to edge; the scrolling content is clipped to
   the standard content width, same as every other section. */
.chiniot-section{width:100%;padding:30px 0;margin:0;background:var(--kraft);overflow:hidden}
.chiniot-title{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(22px,4vw,34px);color:var(--walnut);margin-bottom:4px}
.chiniot-sub{color:#7a6a5c;margin-bottom:28px;font-size:15px}

/* ---------- CONTACT + SHARE ROW ---------- */
.contact-action-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:18px 0}
.contact-action-row .contact-block,
.contact-action-row .inquiry-block{margin:0}
.contact-action-row .share-box{margin-left:auto}
@media(max-width:600px){
  .contact-action-row .share-box{margin-left:0;width:100%}
}

/* ---------- CONTACT REVEAL ---------- */
.contact-block{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.creveal{padding:12px 18px;border-radius:8px;border:0;font-family:'Archivo';font-weight:600;font-size:14px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:.15s}
.creveal.wa{background:#25D366;color:#fff}
.creveal.call{background:var(--walnut);color:#fff}
.creveal:hover{opacity:.9}
.creveal.call:hover{background:var(--walnut-2);opacity:1}

/* ---------- WHATSAPP LEAD POPUP (name/phone + language, optional) ---------- */
.gh-lead-overlay{display:none;position:fixed;inset:0;background:rgba(59,42,32,.45);z-index:1000;align-items:center;justify-content:center;padding:16px;box-sizing:border-box}
.gh-lead-overlay.open{display:flex}
.gh-lead-modal{position:relative;width:100%;max-width:360px;background:#fff;border-radius:12px;padding:20px;box-sizing:border-box;font-family:'Archivo'}
.gh-lead-close{position:absolute;top:8px;right:10px;background:none;border:0;font-size:22px;line-height:1;color:var(--walnut);cursor:pointer;padding:4px}
.gh-lead-lang{display:flex;gap:8px;margin-bottom:14px}
.gh-lead-lang-btn{flex:1;padding:8px 10px;border-radius:7px;border:1px solid var(--line);background:#fff;color:var(--walnut);font-family:'Archivo';font-weight:600;font-size:13px;cursor:pointer}
.gh-lead-lang-btn.active{background:var(--walnut);border-color:var(--walnut);color:#fff}
.gh-lead-title{font-size:14px;color:var(--walnut);margin:0 0 12px;font-weight:600}
.gh-lead-modal input{width:100%;box-sizing:border-box;padding:11px 12px;border-radius:8px;border:1px solid var(--line);font-family:'Archivo';font-size:14px;color:var(--walnut);margin-bottom:10px}
.gh-lead-modal input:focus{outline:2px solid var(--accent);outline-offset:1px}
.gh-lead-actions{display:flex;gap:10px;margin-top:4px}
.gh-lead-skip{flex:1;padding:11px 12px;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--walnut);font-family:'Archivo';font-weight:600;font-size:14px;cursor:pointer}
.gh-lead-continue{flex:1.4;padding:11px 12px;border-radius:8px;border:0;background:#25D366;color:#fff;font-family:'Archivo';font-weight:700;font-size:14px;cursor:pointer}
@media(max-width:400px){
  .gh-lead-modal{padding:16px;max-width:100%}
  .gh-lead-actions{flex-direction:column}
  .gh-lead-continue{order:-1}
}

/* ---------- BRAND SHOWROOM CONTACTS ---------- */
.showroom-contacts{display:flex;flex-direction:column;gap:10px;margin:10px 0}
.showroom-item{border:1px solid var(--line);border-radius:10px;padding:12px 14px;box-sizing:border-box;max-width:100%}
.showroom-item-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin-bottom:4px}
.showroom-name{font-family:'Archivo';font-weight:700;font-size:14.5px;color:var(--walnut)}
.showroom-city{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--accent-2);text-transform:uppercase;letter-spacing:.05em}
.showroom-address{font-size:13px;color:#7a6a5c;margin-bottom:4px;overflow-wrap:break-word;word-break:break-word}
.showroom-hours{font-size:12.5px;color:#7a6a5c;margin-bottom:8px}
.showroom-item .contact-block{margin-top:2px}
.showroom-others{margin-top:2px}
.showroom-others summary{cursor:pointer;font-family:'Archivo';font-weight:600;font-size:13.5px;color:var(--accent);padding:8px 0;list-style:none}
.showroom-others summary::-webkit-details-marker{display:none}
.showroom-others summary::before{content:'▸ ';display:inline-block;transition:.15s}
.showroom-others[open] summary::before{content:'▾ '}
.showroom-others .showroom-item{margin-top:8px}
@media(max-width:400px){
  .showroom-item{padding:10px 12px}
}

/* Brand detail page: showrooms grouped by city (public brand page only —
   the per-product contact flow above uses the flat matching/others layout) */
.showroom-city-group{margin-top:14px}
.showroom-city-heading{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:0 0 8px}
.showroom-city-group .showroom-item{margin-bottom:10px}

/* Companies page: brand showroom discovery cards — reuses .co-grid/.co-card,
   just dropping the socials-row gap that regular company cards leave room for */
.brand-showrooms-section{margin-top:12px}
.brand-showroom-card{text-decoration:none}

/* ---------- INQUIRY FORM ---------- */
.inquiry-block{margin-top:10px}
.inquiry-block .inquiry-toggle{background:var(--accent-2);color:#fff}
.inquiry-form{flex-direction:column;gap:10px;margin-top:12px;padding:16px;background:var(--kraft);border-radius:10px;max-width:420px}
.inquiry-form .if-row{display:flex;gap:10px}
.inquiry-form input,.inquiry-form textarea{
  width:100%;padding:10px 12px;border:1px solid var(--line-strong);border-radius:7px;
  font-family:'Archivo';font-size:13.5px;background:#fff;color:var(--ink)
}
.inquiry-form textarea{resize:vertical}
.inquiry-form input:focus,.inquiry-form textarea:focus{outline:2px solid rgba(217,83,30,.25);border-color:var(--accent)}
.inquiry-form .if-submit{align-self:flex-start}
.inquiry-form .if-error{color:#a8391a;font-size:12.5px;background:rgba(217,83,30,.08);border-radius:6px;padding:8px 10px}
.if-success{margin-top:10px;font-size:13.5px;color:#546147;background:rgba(122,139,111,.12);border-radius:8px;padding:10px 14px;max-width:420px}
@media(max-width:480px){.inquiry-form .if-row{flex-direction:column}}

/* Reviews & testimonials */
.rating-badge{position:absolute;top:10px;right:10px;background:rgba(26,19,14,.72);color:#F2C94C;font-family:'JetBrains Mono',monospace;font-size:10.5px;padding:4px 8px;border-radius:4px;letter-spacing:.02em;z-index:2}

.star-rating{display:inline-flex;align-items:center;gap:8px}
.star-rating-stars{position:relative;display:inline-block;font-size:16px;line-height:1;letter-spacing:2px}
.star-rating-sm .star-rating-stars{font-size:13px}
.star-rating-lg .star-rating-stars{font-size:20px}
.star-rating-track{color:var(--line-strong,var(--line))}
.star-rating-fill{position:absolute;top:0;left:0;overflow:hidden;white-space:nowrap;color:#E0A526}
.star-rating-value{color:var(--walnut);font-size:12.5px}
.star-rating-count{color:#9a8a7c;font-size:12px}

.star-picker{display:inline-flex;flex-direction:row-reverse;gap:2px;font-size:24px}
.star-picker input{position:absolute;opacity:0;pointer-events:none}
.star-picker label{color:var(--line-strong,var(--line));cursor:pointer;transition:color .1s}
.star-picker label:hover,.star-picker label:hover ~ label,
.star-picker input:checked ~ label{color:#E0A526}

.review-block{margin-top:10px}
.review-block .review-toggle{background:var(--accent-2);color:#fff}
.review-form{flex-direction:column;gap:10px;margin-top:12px;padding:16px;background:var(--kraft);border-radius:10px;max-width:460px}
.review-form .if-row{display:flex;gap:10px}
.review-form input,.review-form textarea{
  width:100%;padding:10px 12px;border:1px solid var(--line-strong);border-radius:7px;
  font-family:'Archivo';font-size:13.5px;background:#fff;color:var(--ink)
}
.review-form textarea{resize:vertical}
.review-form input:focus,.review-form textarea:focus{outline:2px solid rgba(217,83,30,.25);border-color:var(--accent)}
.review-form .if-submit{align-self:flex-start}
.review-form .if-error{color:#a8391a;font-size:12.5px;background:rgba(217,83,30,.08);border-radius:6px;padding:8px 10px}
.review-form .hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media(max-width:480px){.review-form .if-row{flex-direction:column}}

.reviews-section{margin-top:36px}
.reviews-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.reviews-head h2{font-family:'Fraunces';font-size:clamp(1.3rem,3vw,1.6rem);line-height:1.2;letter-spacing:-.01em;color:var(--walnut)}
.reviews-list,.testimonial-grid{display:grid;gap:14px;margin-top:20px}
.testimonial-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.reviews-empty{color:#9a8a7c;margin-top:20px}
.review-card{padding:16px;background:#fff;border:1px solid var(--line);border-radius:10px}
.review-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.review-card-name{font-family:'Archivo';font-weight:600;font-size:14px;color:var(--ink)}
.review-card-role{color:#9a8a7c;font-size:11.5px;display:block;margin-top:2px}
.review-card-comment{margin-top:8px;font-size:13.5px;line-height:1.55;color:#5a4a3c}
.review-card-date{display:block;margin-top:10px;font-size:11px;color:#b0a294}

/* ---------- COMPANIES: CITY + CATEGORY FILTER PILLS ---------- */
/* Filter row: label stays fixed, pills scroll horizontally in one line —
   same pattern as .subcat-tags on the listing page. .co-filter-scroll (not
   .co-filter itself) is the flex child that needs min-width:0, since without
   it the nowrap pill row would force .co-filter — and the page — to grow to
   fit every pill instead of scrolling. */
.co-filter{display:flex;align-items:center;gap:10px;margin-bottom:16px;min-width:0}
.co-filter-label{font-family:'JetBrains Mono';font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#9a8a7c;margin-right:4px;flex:0 0 auto}
.co-filter-scroll{
  display:flex;flex-wrap:nowrap;gap:9px;
  flex:1;min-width:0;box-sizing:border-box;
  overflow-x:auto;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent;
  padding:2px 2px 8px;
}
.co-filter-scroll::-webkit-scrollbar{height:6px}
.co-filter-scroll::-webkit-scrollbar-track{background:transparent}
.co-filter-scroll::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:6px}
.co-pill{flex:0 0 auto;white-space:nowrap;font-size:13px;font-weight:500;padding:8px 15px;border-radius:20px;border:1px solid var(--line-strong);background:var(--white);color:var(--walnut);text-decoration:none;transition:.15s;display:inline-flex;align-items:center;gap:6px}
.co-pill:hover{border-color:var(--accent);color:var(--accent)}
.co-pill.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.co-pill .cnt{font-family:'JetBrains Mono';font-size:10px;background:rgba(0,0,0,.08);padding:1px 6px;border-radius:10px}
.co-pill.on .cnt{background:rgba(255,255,255,.25)}
.crevealed{width:100%;margin-top:6px;padding:12px;background:var(--kraft);border-radius:8px;font-family:'JetBrains Mono';font-size:14px;color:var(--walnut)}
.crevealed a{color:var(--accent)}

/* ---------- COMPANIES: PROVINCE / CITY / CATEGORY FILTER BAR ---------- */
/* Three selects in a row on desktop; each group shrinks/grows evenly and
   wraps to full-width stacked rows on mobile. box-sizing:border-box on the
   select itself keeps padding+border inside the 100% width so it can never
   push past the container at narrow viewports. */
.co-filterbar{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;margin-bottom:20px;box-sizing:border-box;max-width:100%}
.co-filter-group{display:flex;flex-direction:column;gap:6px;flex:1 1 200px;min-width:0}
.co-filter-group label{font-family:'JetBrains Mono';font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#9a8a7c}
.co-select{width:100%;box-sizing:border-box;border:1px solid var(--line-strong);border-radius:7px;padding:10px 12px;font-family:'Archivo';font-size:13.5px;background:var(--white);color:var(--walnut)}
.co-select:hover{border-color:var(--accent)}
.co-select:focus{outline:none;border-color:var(--accent)}
@media(max-width:700px){
  .co-filterbar{flex-direction:column;align-items:stretch;gap:12px;margin-bottom:18px}
  .co-filter-group{flex:1 1 auto;width:100%}
}

/* ---------- PRODUCT DETAIL ---------- */
.pd-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.pd-main-img{position:relative;aspect-ratio:1/1;background:var(--kraft);border-radius:10px;overflow:hidden}
.pd-main-img img{width:100%;height:100%;object-fit:cover;cursor:zoom-in}
.pd-thumbs{display:flex;gap:10px;margin-top:12px;overflow-x:auto;padding-bottom:2px;scroll-behavior:smooth}
.pd-thumbs img{width:76px;height:76px;object-fit:cover;border-radius:6px;border:2px solid transparent;cursor:pointer;flex:0 0 auto;opacity:.75;transition:opacity .15s,border-color .15s}
.pd-thumbs img:hover{opacity:1}
.pd-thumbs img.active{border-color:var(--accent);opacity:1}

/* ---------- PRODUCT GALLERY: arrows + lightbox ---------- */
.pg-arrow{position:absolute;top:50%;transform:translateY(-50%);background:rgba(26,19,14,.55);color:#fff;border:0;width:38px;height:38px;border-radius:50%;font-size:22px;line-height:1;cursor:pointer;z-index:2;display:flex;align-items:center;justify-content:center;transition:.15s}
.pg-arrow:hover{background:rgba(26,19,14,.8)}
.pg-prev{left:10px}
.pg-next{right:10px}
.pg-lightbox{position:fixed;inset:0;background:rgba(20,14,10,.92);display:none;align-items:center;justify-content:center;z-index:10010;cursor:zoom-out;padding:24px}
.pg-lightbox.open{display:flex}
.pg-lightbox img{max-width:92vw;max-height:88vh;object-fit:contain;cursor:default}
.pg-lightbox-close{position:absolute;top:18px;right:18px;background:rgba(255,255,255,.12);color:#fff;border:0;width:40px;height:40px;border-radius:50%;font-size:24px;line-height:1;cursor:pointer;z-index:2}
.pg-lightbox-close:hover{background:rgba(255,255,255,.22)}
.pd-vendor{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--accent-2);display:inline-flex;align-items:center;gap:5px;margin-bottom:10px}
.pd-vendor .verified{color:var(--accent)}
.pd-info h1{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(1.6rem,4vw,2.2rem);color:var(--walnut);line-height:1.15;letter-spacing:-.01em;margin-bottom:10px}
.pd-meta{display:flex;gap:16px;font-size:12.5px;color:#7a6a5c;font-family:'JetBrains Mono',monospace}
.pd-tiers{margin-bottom:20px}
.pd-tiers .k{font-family:'JetBrains Mono';font-size:12px;letter-spacing:.1em;color:var(--accent);text-transform:uppercase;margin-bottom:10px}
.pd-tiers table{width:100%;border-collapse:collapse;font-size:13.5px}
.pd-tiers td{padding:9px 0;border-bottom:1px solid var(--line);color:var(--walnut)}
.pd-tiers td:last-child{text-align:right;font-weight:600}

/* ---------- PRODUCT DETAIL: wooden-items urgency, trust badges, qty stepper ---------- */
.pd-urgency{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;font-family:'JetBrains Mono',monospace;font-size:12.5px}
.pd-urgency-viewers{color:var(--accent)}
.pd-urgency-viewers strong{font-weight:700}
.pd-urgency-delivery{color:var(--accent-2)}
.pd-trust-badges{margin-bottom:18px;padding:14px 16px;background:var(--kraft);border-radius:10px}
.pd-trust-heading{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--walnut);margin-bottom:10px}
.pd-trust-row{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 14px}
.pd-trust-item{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--walnut);min-width:0}
.pd-trust-item .pd-trust-icon{font-size:16px;flex:0 0 auto}
.qty-stepper{display:inline-flex;align-items:center;border:1px solid var(--line-strong,var(--line));border-radius:8px;overflow:hidden;margin-bottom:10px}
.qty-btn{width:38px;height:38px;border:0;background:var(--kraft);color:var(--walnut);font-size:18px;line-height:1;cursor:pointer;flex:0 0 auto}
.qty-btn:hover{background:var(--line-strong,var(--line))}
.qty-input{width:52px;height:38px;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);text-align:center;font-family:'JetBrains Mono',monospace;font-size:14px;color:var(--walnut);background:#fff;-moz-appearance:textfield}
.qty-input::-webkit-outer-spin-button,.qty-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty-input:focus{outline:none}
@media(max-width:480px){
  .pd-trust-row{grid-template-columns:1fr}
}

.pd-variants{margin-bottom:16px}
.pd-variants-label{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--walnut);margin-bottom:8px}
.pd-variants-row{display:flex;flex-wrap:wrap;gap:8px}
.pd-variant-pill{border:1px solid var(--line-strong,var(--line));background:#fff;color:var(--walnut);padding:8px 14px;border-radius:8px;font-size:13.5px;font-weight:600;cursor:pointer;transition:.15s;max-width:100%;overflow-wrap:break-word}
.pd-variant-pill:hover{border-color:var(--accent)}
.pd-variant-pill.active{background:var(--accent);border-color:var(--accent);color:#fff}

.pd-delivery-note{display:flex;align-items:flex-start;gap:10px;background:rgba(217,83,30,.08);border:1px solid rgba(217,83,30,.28);border-left:4px solid var(--accent);border-radius:8px;padding:12px 14px;margin-bottom:16px;font-size:13px;line-height:1.55;color:var(--walnut)}
.pd-delivery-note-icon{flex:0 0 auto;font-size:15px;line-height:1.4;color:var(--accent)}

.cart-item-variant{font-size:12px;color:#7a6a5c;margin-top:2px}

.pd-desc{color:#5a4a3c;line-height:1.7;font-size:15.5px;margin-bottom:0;max-width:100%;overflow-wrap:break-word;word-break:break-word}
.pd-desc p{margin:0 0 12px}
.pd-desc p:last-child{margin-bottom:0}
.pd-desc ul,.pd-desc ol{margin:0 0 12px 20px}
.pd-desc ul{list-style:disc}
.pd-desc ol{list-style:decimal}
.pd-desc strong{font-weight:600}
.pd-desc a{color:var(--accent);text-decoration:underline;overflow-wrap:break-word;word-break:break-word}
.pd-desc img{max-width:100%;height:auto}
.pd-desc table{max-width:100%;display:block;overflow-x:auto}
.pd-desc *{max-width:100%;box-sizing:border-box}
.pd-empty{color:#9a8a7c;font-size:14px;font-style:italic}
.pd-social-row{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:20px;padding-top:20px;border-top:1px dashed var(--line)}
@media(max-width:820px){.pd-grid{grid-template-columns:1fr}}

/* ---------- PRODUCT DETAIL: vendor city map (OpenStreetMap embed, keyless) ---------- */
.pd-map{margin:20px 0;width:100%;max-width:100%;box-sizing:border-box}
.pd-map-label{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--accent-2);margin:20px 0 10px}
.pd-map iframe{display:block;width:100%;border-radius:12px;border:1px solid var(--line)}
.pd-map-link{display:inline-block;margin-top:8px;font-size:12.5px;font-weight:600;color:var(--accent)}

/* ---------- PRODUCT DETAIL: Description/Specifications tabs ---------- */
.pd-tabs{width:100%;max-width:100%;box-sizing:border-box;margin:32px 0 0}
.pd-tab-bar{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:20px}
.pd-tab{background:none;border:0;padding:12px 18px 12px 0;margin-right:14px;font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:600;color:#9a8a7c;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.pd-tab:hover{color:var(--walnut)}
.pd-tab.on{color:var(--walnut);border-bottom-color:var(--accent)}
.pd-tab-panel{display:none}
.pd-tab-panel.on{display:block}
.pd-specs{width:100%;max-width:100%;border-collapse:collapse;font-size:14px}
.pd-specs th,.pd-specs td{text-align:left;padding:10px;border-bottom:1px solid var(--line);overflow-wrap:break-word;word-break:break-word}
.pd-specs th{width:160px;color:#7a6a5c;font-weight:600}
.pd-specs td{color:var(--walnut)}
@media(max-width:600px){
  .pd-specs th{width:120px}
  .pd-tab{padding-right:0;margin-right:20px;font-size:12px}
}

/* ---------- SHARE BUTTONS ---------- */
.share-box{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.share-label{font-family:'JetBrains Mono';font-size:11px;color:#9a8a7c;text-transform:uppercase;letter-spacing:.05em}
.share-btn{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;border:1px solid var(--line);background:var(--white);color:var(--walnut);cursor:pointer;transition:.15s;text-decoration:none}
.share-btn:hover{transform:translateY(-2px);border-color:transparent;color:#fff}
.share-btn.wa:hover{background:#25D366}
.share-btn.fb:hover{background:#1877F2}
.share-btn.x:hover{background:#000}
.share-btn.copy:hover{background:var(--accent)}
.share-btn.copied{background:var(--accent-2);color:#fff;border-color:transparent}
.share-box.compact .share-btn{width:30px;height:30px;border-radius:7px}

/* ---------- VENDOR SOCIALS ---------- */
.vsocials{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.vsocials-label{font-family:'JetBrains Mono';font-size:11px;color:#9a8a7c}
.vsocial{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;border:1px solid var(--line);background:var(--white);color:var(--walnut);font-size:14px;font-weight:600;text-decoration:none;transition:.15s}
.vsocial:hover{transform:translateY(-2px);color:#fff;border-color:transparent}
.vsocial.fb:hover{background:#1877F2}
.vsocial.ig:hover{background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF)}
.vsocial.li:hover{background:#0A66C2}
.vsocial.tt:hover{background:#000}
.vsocial.yt:hover{background:#FF0000}
.vsocial.web:hover{background:var(--accent)}
.vsocials.compact .vsocial{width:28px;height:28px;border-radius:7px;font-size:12px}

/* ---------- COMPANIES: CARD SOCIALS ---------- */
.co-card .vsocials{justify-content:center}

/* ---------- BLOG ---------- */
/* blog hero */
.blog-hero{background:linear-gradient(120deg,#2A1D16,#3B2A20);color:var(--kraft);padding:52px 28px}
.blog-hero .bh-eyebrow{font-family:'JetBrains Mono';font-size:12px;letter-spacing:.14em;color:var(--oak);text-transform:uppercase}
.blog-hero h1{font-family:'Fraunces';font-weight:600;font-size:42px;line-height:1.1;letter-spacing:-.02em;color:#fff;margin:12px 0 8px}
.blog-hero p{opacity:.82;max-width:520px;font-size:15.5px}

/* featured */
.blog-featured{display:grid;grid-template-columns:0.8fr 1.2fr;gap:0;background:var(--white);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin:24px 0 32px;text-decoration:none;transition:.2s;max-width:900px}
.blog-featured:hover{box-shadow:0 18px 44px rgba(59,42,32,.14);transform:translateY(-3px)}
.bf-img{position:relative;min-height:240px;max-height:300px;background:var(--kraft)}
.bf-img img{width:100%;height:100%;object-fit:cover}
.bf-play,.bc-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;background:rgba(217,83,30,.92);color:#fff;display:grid;place-items:center;font-size:20px}
.bc-play{width:40px;height:40px;font-size:15px}
.bf-body{padding:32px;display:flex;flex-direction:column;justify-content:center}
.bf-cat{font-family:'JetBrains Mono';font-size:11px;color:var(--accent);text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px}
.bf-body h2{font-family:'Fraunces';font-size:24px;font-weight:600;color:var(--walnut);line-height:1.15;margin-bottom:12px}
.bf-body p{color:#5a4a3c;font-size:14.5px;margin-bottom:14px}
.bf-meta,.bc-meta{font-family:'JetBrains Mono';font-size:11.5px;color:#9a8a7c}

/* grid */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.blog-card{background:var(--white);border:1px solid var(--line);border-radius:12px;overflow:hidden;text-decoration:none;transition:.2s;display:flex;flex-direction:column}
.blog-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(59,42,32,.13)}
.bc-img{position:relative;aspect-ratio:16/10;background:var(--kraft);overflow:hidden}
.bc-img img{width:100%;height:100%;object-fit:cover}
.bc-cat{position:absolute;top:12px;left:12px;background:var(--walnut);color:var(--oak);font-family:'JetBrains Mono';font-size:10px;padding:4px 9px;border-radius:3px}
.bc-body{padding:18px;flex:1;display:flex;flex-direction:column;gap:8px}
.bc-body h3{font-family:'Fraunces';font-size:18px;font-weight:600;color:var(--walnut);line-height:1.25}
.bc-body p{font-size:13.5px;color:#5a4a3c;flex:1}

/* single post */
.post-narrow{max-width:760px}
.post-head{padding:44px 0 24px}
.post-cat{font-family:'JetBrains Mono';font-size:11px;color:var(--accent);text-transform:uppercase;letter-spacing:.06em;text-decoration:none}
.post-head h1{font-family:'Fraunces';font-size:clamp(1.6rem,4vw,2.2rem);font-weight:600;color:var(--walnut);line-height:1.15;letter-spacing:-.01em;margin:12px 0}
.post-meta{font-family:'JetBrains Mono';font-size:12px;color:#9a8a7c}
.post-video{aspect-ratio:16/9;border-radius:14px;overflow:hidden;margin-bottom:32px;background:var(--walnut)}
.post-video iframe{width:100%;height:100%;border:0}
.post-cover{border-radius:14px;overflow:hidden;margin-bottom:32px}
.post-cover img{width:100%;height:auto}
.post-body{font-size:16.5px;line-height:1.75;color:#3a2e24}
.post-body h2{font-family:'Fraunces';font-size:clamp(1.3rem,3vw,1.6rem);line-height:1.2;letter-spacing:-.01em;color:var(--walnut);margin:32px 0 14px}
.post-body h3{font-family:'Fraunces';font-size:1.1rem;line-height:1.25;color:var(--walnut);margin:26px 0 12px}
.post-body p{margin-bottom:18px}
.post-body img{border-radius:10px;margin:24px 0;width:100%;height:auto}
.post-body ul,.post-body ol{margin:0 0 18px 22px}
.post-body li{margin-bottom:8px}
.post-body blockquote{border-left:3px solid var(--accent);padding:6px 0 6px 20px;margin:24px 0;color:#5a4a3c;font-style:italic}
.post-body a{color:var(--accent);font-weight:600}
.post-share{margin:40px 0;padding-top:24px;border-top:1px dashed var(--line)}

@media(max-width:900px){.blog-grid{grid-template-columns:repeat(2,1fr)}.blog-featured{grid-template-columns:1fr}.bf-img{min-height:220px}}
@media(max-width:600px){.blog-grid{grid-template-columns:1fr}.blog-hero h1,.post-head h1{font-size:30px}}

/* blog layout: main column + sidebar */
.blog-layout{display:grid;grid-template-columns:1fr 300px;gap:32px;align-items:start;padding:36px 28px 72px}
.blog-main{min-width:0}
.blog-layout .blog-grid{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.blog-layout{grid-template-columns:1fr}.blog-sidebar{margin-top:24px}}
@media(max-width:700px){.blog-layout .blog-grid{grid-template-columns:1fr}}

/* blog sidebar */
.blog-sidebar{display:flex;flex-direction:column;gap:24px}
.bs-block{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:18px 20px}
.bs-title{font-family:'Fraunces';font-size:17px;font-weight:600;color:var(--walnut);margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.bs-cats{list-style:none;display:flex;flex-direction:column;gap:4px}
.bs-cats a{display:flex;justify-content:space-between;padding:8px 10px;border-radius:7px;color:#5a4a3c;text-decoration:none;font-size:14px}
.bs-cats a:hover{background:var(--kraft);color:var(--accent)}
.bs-cats a span{font-family:'JetBrains Mono';font-size:11px;color:#9a8a7c}
.bs-recent{list-style:none;display:flex;flex-direction:column;gap:14px}
.bs-recent a{display:flex;gap:12px;text-decoration:none;align-items:center}
.bs-thumb{width:56px;height:56px;border-radius:8px;overflow:hidden;flex-shrink:0;background:var(--kraft)}
.bs-thumb img{width:100%;height:100%;object-fit:cover}
.bs-recent-body{display:flex;flex-direction:column;gap:3px}
.bs-recent-title{font-size:13.5px;font-weight:500;color:var(--walnut);line-height:1.3}
.bs-recent a:hover .bs-recent-title{color:var(--accent)}
.bs-recent-date{font-family:'JetBrains Mono';font-size:11px;color:#9a8a7c}
.bs-tags{display:flex;flex-wrap:wrap;gap:8px}
.bs-tag{font-size:12.5px;padding:6px 12px;border-radius:16px;background:var(--kraft);color:var(--walnut);text-decoration:none;transition:.15s}
.bs-tag:hover{background:var(--accent);color:#fff}

/* ---------- NAV: MANUFACTURERS BUTTON ---------- */
.nav-manufacturers{color:var(--oak) !important;border:1px solid rgba(201,168,118,.4);padding:6px 15px !important;border-radius:20px;margin-right:14px;font-weight:600}
.nav-manufacturers:hover{background:rgba(201,168,118,.12);border-color:var(--oak)}

/* ---------- PRICING / PACKAGES ---------- */
.pr-hero{background:linear-gradient(120deg,#2A1D16,#3B2A20);color:var(--kraft);padding:56px 28px;text-align:center}
.pr-hero .eyebrow{font-family:'JetBrains Mono';font-size:12px;letter-spacing:.16em;color:var(--oak);text-transform:uppercase;margin-bottom:14px}
.pr-hero h1{font-family:'Fraunces';font-weight:600;font-size:44px;line-height:1.1;letter-spacing:-.02em;color:#fff;margin-bottom:12px}
.pr-hero p{opacity:.82;max-width:500px;margin:0 auto;font-size:16px}
.pkg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:56px 0}
.pkg{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:32px;display:flex;flex-direction:column;position:relative;transition:.2s}
.pkg:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(59,42,32,.14)}
.pkg.popular{border:2px solid var(--accent);box-shadow:0 16px 40px rgba(217,83,30,.14)}
.pkg-pop-tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;font-family:'JetBrains Mono';font-size:11px;padding:5px 16px;border-radius:20px;letter-spacing:.05em}
.pkg-tier{font-family:'JetBrains Mono';font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:6px 14px;border-radius:20px;align-self:flex-start;margin-bottom:18px}
.pkg-tier.startup{background:var(--kraft);color:var(--walnut)}
.pkg-tier.gold{background:linear-gradient(135deg,#E0B84C,#C9A227);color:#3B2A20}
.pkg-tier.premium{background:linear-gradient(135deg,#7A5CFF,#5C3CDF);color:#fff}
.pkg h3{font-family:'Fraunces';font-size:26px;font-weight:600;line-height:1.25;color:var(--walnut);margin-bottom:6px}
.pkg .tagline{font-size:13.5px;color:#7a6a5c;margin-bottom:20px;min-height:38px}
.pkg-price{display:flex;align-items:baseline;gap:8px;margin-bottom:6px;flex-wrap:wrap}
.pkg-price .amt{font-family:'Fraunces';font-size:40px;font-weight:600;color:var(--walnut)}
.pkg-price .per{font-family:'JetBrains Mono';font-size:12px;color:#7a6a5c}
.pkg-price .was{font-family:'JetBrains Mono';font-size:14px;color:#9a8a7c;text-decoration:line-through}
.pkg-discount{display:inline-block;background:rgba(122,139,111,.15);color:#546147;font-family:'JetBrains Mono';font-size:11px;padding:4px 10px;border-radius:6px;margin-bottom:22px;align-self:flex-start}
.pkg-features{list-style:none;flex:1;margin-bottom:24px}
.pkg-features li{padding:9px 0 9px 26px;position:relative;font-size:14px;color:#4a3c30;border-bottom:1px solid var(--line)}
.pkg-features li::before{content:'✓';position:absolute;left:0;color:var(--accent-2);font-weight:700}
.pkg-features li.no{color:#b0a498}
.pkg-features li.no::before{content:'✕';color:#c9beb2}
.pkg-btn{background:var(--walnut);color:#fff;text-align:center;padding:14px;border-radius:8px;font-weight:600;font-size:15px;text-decoration:none;transition:.15s}
.pkg.popular .pkg-btn{background:var(--accent)}
.pkg-btn:hover{background:var(--walnut-2);transform:translateY(-1px)}
.pkg.popular .pkg-btn:hover{background:#c2461a}
@media(max-width:820px){.pkg-grid{grid-template-columns:1fr}.pr-hero h1{font-size:32px}}

/* ---------- MANUFACTURERS DIRECTORY PAGE ---------- */
.mfr-hero{background:linear-gradient(120deg,#2A1D16,#3B2A20);color:var(--kraft);padding:48px 28px}
.mfr-hero-row{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;max-width:1280px;margin:0 auto}
.mfr-eyebrow{font-family:'JetBrains Mono';font-size:12px;letter-spacing:.14em;color:var(--oak);text-transform:uppercase}
.mfr-hero h1{font-family:'Fraunces';font-weight:600;font-size:40px;line-height:1.1;letter-spacing:-.02em;color:#fff;margin:12px 0 8px}
.mfr-hero p{opacity:.82;max-width:460px;font-size:15px}
.mfr-add-btn{background:var(--accent);color:#fff;font-weight:600;font-size:15px;padding:14px 24px;border-radius:8px;text-decoration:none;white-space:nowrap;transition:.15s}
.mfr-add-btn:hover{background:#c2461a;transform:translateY(-1px)}
.mfr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px;margin-top:24px}
.mfr-card{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:26px;display:flex;flex-direction:column;align-items:center;gap:14px;text-decoration:none;text-align:center;transition:.2s;position:relative}
.mfr-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(59,42,32,.14);border-color:var(--line-strong)}
.mfr-logo{width:130px;height:130px;border-radius:16px;background:var(--kraft);display:grid;place-items:center;overflow:hidden;border:1px solid var(--line)}
.mfr-logo img{width:100%;height:100%;object-fit:cover}
.mfr-logo .initials{font-family:'Fraunces';font-size:48px;color:var(--accent-2);font-weight:600}
.mfr-name{font-weight:700;font-size:17px;color:var(--walnut);display:flex;align-items:center;gap:6px;justify-content:center}
.mfr-name .vf{color:var(--accent)}
.mfr-meta{font-family:'JetBrains Mono';font-size:11px;color:#7a6a5c;margin-top:4px}
.mfr-count{font-family:'JetBrains Mono';font-size:12px;color:var(--accent);margin-top:6px}
.mfr-card .co-tier{position:absolute;top:14px;right:14px}

/* ---------- HOMEPAGE MANUFACTURERS SCROLL ---------- */
.mfr-scroll{display:flex;gap:16px;overflow-x:auto;padding-bottom:10px;scrollbar-width:thin}
.mfr-scroll::-webkit-scrollbar{height:6px}.mfr-scroll::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:3px}
.mfr-mini{flex:0 0 auto;width:150px;background:var(--white);border:1px solid var(--line);border-radius:12px;padding:18px;text-align:center;text-decoration:none;transition:.2s}
.mfr-mini:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(59,42,32,.12)}
.mfr-mini-logo{width:90px;height:90px;border-radius:12px;background:var(--kraft);margin:0 auto 12px;display:grid;place-items:center;overflow:hidden;font-family:'Fraunces';font-size:32px;color:var(--accent-2);font-weight:600}
.mfr-mini-logo img{width:100%;height:100%;object-fit:cover}
.mfr-mini-logo.add{background:rgba(217,83,30,.1);color:var(--accent);font-size:36px}
.mfr-mini-name{font-weight:600;font-size:13.5px;color:var(--walnut);line-height:1.3}
.mfr-mini-meta{font-family:'JetBrains Mono';font-size:10.5px;color:#7a6a5c;margin-top:4px}
.mfr-mini-add{border-style:dashed;border-color:var(--accent)}

/* ---------- OUR COLLABORATIONS (resources/views/components/collaborations.blade.php) ----------
   Shared section on home.blade.php + about.blade.php. Desktop = 4 in a row,
   tablet (≤820px) = 2x2, mobile (≤480px) = 2 per row — box-sizing:border-box
   throughout so a ~150px column at 360px never overflows (same guard as .co-card). */
.gh-collab-section{padding:48px 0}
.gh-collab-head{text-align:center;margin-bottom:32px}
.gh-collab-head h2{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(1.3rem,3vw,1.6rem);letter-spacing:-.01em;color:var(--walnut)}
.gh-collab-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.gh-collab-card{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:20px 16px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;box-sizing:border-box;min-width:0;transition:.2s}
.gh-collab-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(59,42,32,.12);border-color:var(--line-strong)}
.gh-collab-logo{width:100%;max-width:160px;height:120px;display:grid;place-items:center;overflow:hidden}
.gh-collab-logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;filter:grayscale(60%);opacity:.85;transition:.25s}
.gh-collab-card:hover .gh-collab-logo img{filter:grayscale(0%);opacity:1}
.gh-collab-name{font-family:'Archivo',sans-serif;font-weight:600;font-size:13.5px;color:var(--walnut);line-height:1.3;width:100%;overflow-wrap:break-word;word-break:break-word}

@media(max-width:820px){
  .gh-collab-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:480px){
  .gh-collab-section{padding:32px 0}
  .gh-collab-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .gh-collab-card{padding:14px 10px;gap:8px}
  .gh-collab-logo{height:80px}
  .gh-collab-name{font-size:12px}
}

/* ---------- PWA INSTALL BANNER ---------- */
/* Bottom-LEFT so it never collides with the bottom-right chat bubble
   (z-index 9998) — sits just under it in stacking order too. env()
   safe-area padding keeps it clear of the iPhone home-indicator bar. */
.pwa-install-banner{
  position:fixed;left:16px;bottom:16px;bottom:calc(16px + env(safe-area-inset-bottom));
  z-index:9990;display:flex;align-items:flex-start;gap:12px;
  width:320px;max-width:calc(100vw - 32px);box-sizing:border-box;
  background:var(--white);border:1px solid var(--line-strong);border-radius:14px;
  padding:14px 14px 14px 12px;box-shadow:0 16px 40px rgba(26,19,14,.22);
  animation:pwaSlideUp .3s ease;
}
.pwa-install-banner[hidden]{display:none}
@keyframes pwaSlideUp{from{transform:translateY(16px);opacity:0}to{transform:translateY(0);opacity:1}}
.pwa-install-icon{flex:0 0 auto;width:40px;height:40px;border-radius:10px}
.pwa-install-body{flex:1;min-width:0}
.pwa-install-title{font-family:'Fraunces',serif;font-weight:600;font-size:14.5px;color:var(--walnut);margin-bottom:3px}
.pwa-install-text{font-size:12.5px;line-height:1.45;color:#6b5c4f}
.pwa-install-actions{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.pwa-install-btn{background:var(--accent);color:#fff;border:0;border-radius:7px;padding:7px 14px;font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap;transition:.15s}
.pwa-install-btn:hover{background:#c2461a}
.pwa-install-close{background:transparent;border:0;color:#9a8a7c;font-size:18px;line-height:1;cursor:pointer;padding:2px 4px}
.pwa-install-close:hover{color:var(--walnut)}
@media(max-width:480px){
  .pwa-install-banner{left:12px;right:12px;width:auto;max-width:none}
}
/* Grain Handicraft app (grainhandicraft.com.pk) — store palette */
/* z-index: above the WhatsApp float (9997) + chat bubble (9998) it sits over
   on phones, still below drawers/modals (10000+). Dismissible, so brief. */
.pwa-install-banner--hc{background:#FAF5EC;border-color:#E6D3B3;z-index:9999}
.pwa-install-banner--hc .pwa-install-icon{border-radius:50%}
.pwa-install-banner--hc .pwa-install-title{color:#3A2416}
.pwa-install-banner--hc .pwa-install-btn{background:#3A2416}
.pwa-install-banner--hc .pwa-install-btn:hover{background:#2F4A3A}

/* ---------- BACK TO TOP ---------- */
/* Fixed bottom-right like the chat bubble below, but stacked directly ABOVE
   it (bottom:96px = the chat bubble's own 24px + 60px + a 12px gap) rather
   than beside it, so the two never overlap on any device — same reasoning
   already used for .wa-float being offset to bottom-LEFT instead. Hidden by
   default (js/back-to-top.js toggles .show past a scroll threshold); a lower
   z-index than the chat bubble/panel is deliberate so an opened chat panel
   (.gh-chat, z-index 9999) sits on top of it rather than the reverse. */
.back-to-top{
  position:fixed;bottom:96px;right:24px;width:46px;height:46px;border-radius:50%;
  background:var(--walnut);color:var(--kraft);border:0;cursor:pointer;
  box-shadow:0 8px 24px rgba(26,19,14,.35);display:grid;place-items:center;font-size:20px;
  z-index:9996;opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .25s ease,transform .25s ease,background .2s ease;
}
.back-to-top.show{opacity:1;visibility:visible;transform:translateY(0)}
.back-to-top:hover{background:var(--walnut-2);transform:translateY(0) scale(1.06)}
@media(max-width:480px){.back-to-top{width:44px;height:44px;font-size:18px}}

/* ---------- SUPPORT CHAT WIDGET ---------- */
.gh-chat-bubble{position:fixed;bottom:24px;right:24px;width:60px;height:60px;border-radius:50%;background:var(--accent);color:#fff;border:0;cursor:pointer;box-shadow:0 8px 28px rgba(217,83,30,.4);display:grid;place-items:center;font-size:26px;z-index:9998;transition:.2s}
.gh-chat-bubble:hover{transform:scale(1.06)}
.gh-badge{position:absolute;top:-2px;right:-2px;width:18px;height:18px;background:var(--accent-2);border:2px solid var(--paper);border-radius:50%}
.gh-chat{position:fixed;bottom:96px;right:24px;width:370px;max-width:calc(100vw - 32px);height:520px;max-height:calc(100vh - 130px);background:var(--white);border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.28);display:none;flex-direction:column;overflow:hidden;z-index:9999;border:1px solid var(--line)}
.gh-chat.open{display:flex}
.gh-head{background:var(--walnut);color:var(--kraft);padding:16px 18px;display:flex;align-items:center;gap:12px}
.gh-head .av{width:38px;height:38px;border-radius:10px;background:var(--accent);display:grid;place-items:center;font-size:18px;color:#fff}
.gh-head h4{font-family:'Fraunces';font-size:16px;color:#fff}
.gh-head .st{font-family:'JetBrains Mono';font-size:10px;color:var(--accent-2);display:flex;align-items:center;gap:5px;margin-top:2px}
.gh-head .st::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent-2)}
.gh-head .x{margin-left:auto;background:transparent;border:0;color:var(--kraft);font-size:20px;cursor:pointer;opacity:.7}
.gh-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;background:var(--paper)}
.gh-msg{max-width:82%;padding:11px 14px;border-radius:14px;font-size:13.5px;line-height:1.5}
.gh-msg.bot{background:var(--white);border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:4px;color:var(--ink)}
.gh-msg.user{background:var(--accent);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.gh-msg a{color:var(--accent);font-weight:600}
.gh-msg.bot ul{margin:8px 0 0 16px;font-size:13px}
.gh-msg.bot li{margin-bottom:4px}
.gh-chips{display:flex;flex-wrap:wrap;gap:7px;padding:0 16px 12px;background:var(--paper)}
.gh-chip{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:7px 13px;font-size:12px;cursor:pointer;color:var(--walnut);transition:.15s}
.gh-chip:hover{background:var(--kraft);border-color:var(--accent)}
.gh-foot{padding:12px;border-top:1px solid var(--line);display:flex;gap:8px;background:var(--white)}
.gh-foot input{flex:1;border:1px solid var(--line);border-radius:10px;padding:11px 13px;font-family:Archivo;font-size:13.5px;outline:none}
.gh-foot input:focus{border-color:var(--accent)}
.gh-foot button{background:var(--accent);color:#fff;border:0;border-radius:10px;width:44px;cursor:pointer;font-size:16px}
.gh-wa{display:flex;align-items:center;justify-content:center;gap:8px;padding:11px;background:#25D366;color:#fff;font-size:13px;font-weight:600;text-decoration:none;transition:.15s}
.gh-wa:hover{opacity:.9}
.gh-typing{display:flex;gap:4px;padding:12px 14px}
.gh-typing span{width:7px;height:7px;background:#c0b0a0;border-radius:50%;animation:ghb 1.2s infinite}
.gh-typing span:nth-child(2){animation-delay:.2s}.gh-typing span:nth-child(3){animation-delay:.4s}
@keyframes ghb{0%,60%,100%{opacity:.3}30%{opacity:1}}
@media(max-width:480px){.gh-chat{right:12px;left:12px;width:auto;bottom:88px}}

/* ---------- VENDOR REGISTRATION ---------- */
.vreg-hero{background:linear-gradient(120deg,#2A1D16,#3B2A20);color:var(--kraft);padding:56px 28px}
.vreg-eyebrow{font-family:'JetBrains Mono';font-size:12px;letter-spacing:.16em;color:var(--oak);text-transform:uppercase}
.vreg-hero h1{font-family:'Fraunces';font-weight:600;font-size:40px;line-height:1.1;letter-spacing:-.02em;color:#fff;margin:12px 0 10px}
.vreg-hero p{opacity:.82;max-width:520px;font-size:15.5px}
.vreg-card{max-width:760px;margin:-30px auto 0;background:var(--white);border-radius:14px;box-shadow:0 20px 50px rgba(59,42,32,.16);padding:36px;position:relative;z-index:5}
.vreg-errors{background:rgba(217,83,30,.08);border:1px solid rgba(217,83,30,.3);color:#a8391a;border-radius:8px;padding:14px 18px;margin-bottom:20px;font-size:13.5px}
.vreg-errors ul{margin:8px 0 0 18px}
.vreg-section-title{font-family:'JetBrains Mono';font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:22px 0 14px}
.vreg-section-title:first-child{margin-top:0}
.vreg-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.vreg-span2{grid-column:1/-1}
.vreg-field label{display:block;font-size:12.5px;font-weight:600;color:var(--walnut);margin-bottom:6px}
.vreg-field input,.vreg-field select,.vreg-field textarea{
  width:100%;padding:12px 13px;border:1px solid var(--line-strong);border-radius:8px;
  font-family:'Archivo';font-size:14px;background:#fff;color:var(--ink);
}
.vreg-field textarea{resize:vertical}
.vreg-field input:focus,.vreg-field select:focus,.vreg-field textarea:focus{outline:2px solid rgba(217,83,30,.25);border-color:var(--accent)}
.vreg-radio-group{display:flex;gap:18px;flex-wrap:wrap}
.vreg-radio{display:flex;align-items:center;gap:7px;font-size:14px;color:var(--walnut);cursor:pointer;font-weight:500}
.vreg-checkbox{display:flex;align-items:center;gap:9px;font-size:13.5px;color:#5a4a3c;margin-top:22px;cursor:pointer}
.vreg-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:26px}
.vreg-login-link{font-size:13.5px;font-weight:600;color:var(--walnut);border-bottom:2px solid var(--accent);padding-bottom:2px}
@media(max-width:640px){.vreg-grid{grid-template-columns:1fr}.vreg-card{padding:24px}}

/* ---------- PRODUCT DISCOUNTS ---------- */
.price-custom{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;color:var(--accent);background:rgba(217,83,30,.1);padding:5px 9px;border-radius:4px}
.price-was{font-family:'JetBrains Mono';font-size:12px;color:#9a8a7c;text-decoration:line-through;margin-right:6px}
.price-now{font-family:'Fraunces';font-size:20px;font-weight:600;color:var(--accent)}
.disc-badge{font-family:'JetBrains Mono';font-size:10px;background:rgba(217,83,30,.12);color:var(--accent);padding:3px 7px;border-radius:10px;margin-left:6px}
.sale-ribbon{position:absolute;top:12px;left:12px;background:var(--accent);color:#fff;font-family:'JetBrains Mono';font-size:10.5px;padding:5px 9px;border-radius:3px;z-index:2}

/* ---------- LISTING PAGE (/products) ---------- */
.listing-head{background:var(--white);border-bottom:1px solid var(--line);padding:28px 0}
.lh-crumb{font-family:'JetBrains Mono';font-size:12px;color:#9a8a7c;margin-bottom:8px}
.lh-crumb a{color:var(--accent)}
.listing-head h1{font-family:'Fraunces';font-size:clamp(1.6rem,4vw,2.2rem);font-weight:600;line-height:1.15;letter-spacing:-.01em;color:var(--walnut)}
.lh-count{font-family:'JetBrains Mono';font-size:12px;color:#7a6a5c;margin-top:4px}
.listing-shell{display:grid;grid-template-columns:250px 1fr;gap:32px;padding:32px 28px 72px;align-items:start}
/* Grid items default to min-width:auto, which resolves to their content's
   min-content size — without this, the nowrap .subcat-tags row (30+ chips,
   no wrapping) forces this 1fr track to grow to fit ALL chips unscrolled,
   blowing out .container into page-wide horizontal scroll and stretching
   .prod-grid's columns far past their intended width. */
.listing-main{min-width:0}
.listing-sidebar{position:sticky;top:20px}
.listing-sidebar form{margin-top:20px}
.fgroup{margin-bottom:24px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.fgroup h4{font-family:'JetBrains Mono';font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--walnut);margin-bottom:12px}
.listing-sidebar select,.fprice input{width:100%;border:1px solid var(--line);border-radius:7px;padding:9px 11px;font-family:Archivo;font-size:13.5px;background:var(--white)}
.fprice{display:flex;align-items:center;gap:8px}
.fprice input{width:50%}
.fcheck{display:flex;align-items:center;gap:8px;font-size:14px;color:#5a4a3c;cursor:pointer}
.fcond-list{display:flex;flex-direction:column;gap:9px}
.fclear{display:block;text-align:center;margin-top:10px;font-size:13px;color:var(--accent)}

/* ---------- POP-UP (auto promo modal) ---------- */
.gh-popup-overlay{position:fixed;inset:0;background:rgba(26,19,14,.7);z-index:10000;display:flex;align-items:center;justify-content:center;padding:20px;animation:ghFade .3s}
.gh-popup-overlay[hidden]{display:none}
@keyframes ghFade{from{opacity:0}to{opacity:1}}
.gh-popup{position:relative;background:var(--white);border-radius:16px;overflow:hidden;width:800px;max-width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 30px 80px rgba(0,0,0,.4)}
.gh-popup-img{width:100%;height:auto;display:block;max-height:600px;object-fit:cover}
.gh-popup-imglink{display:block}
.gh-popup-x{position:absolute;top:12px;right:12px;width:38px;height:38px;border-radius:50%;background:rgba(251,249,245,.92);border:0;font-size:22px;color:var(--walnut);cursor:pointer;z-index:2;display:grid;place-items:center}
.gh-popup-x:hover{background:#fff}
.gh-popup-body{padding:24px 28px;text-align:center}
.gh-popup-body h3{font-family:'Fraunces';font-size:26px;font-weight:600;line-height:1.2;color:var(--walnut);margin-bottom:8px}
.gh-popup-body p{color:#5a4a3c;font-size:15px;margin-bottom:16px}
.gh-popup-btn{display:inline-block;background:var(--accent);color:#fff;font-weight:600;padding:12px 28px;border-radius:8px;text-decoration:none;transition:.15s}
.gh-popup-btn:hover{background:#c2461a;transform:translateY(-1px)}
@media(max-width:600px){.gh-popup-body{padding:18px 20px}.gh-popup-body h3{font-size:21px}}

/* ---------- SUBCATEGORY TAGS (listing page) ----------
   Single horizontal scroll strip — swipeable on mobile, drag/scrollbar
   on desktop. Long subcategory lists (30+) stay one line instead of
   wrapping into a big block. */
.subcat-tags{
  display:flex;flex-wrap:nowrap;gap:9px;margin:0 0 24px;padding:2px 2px 14px;
  border-bottom:1px solid var(--line);
  width:100%;max-width:100%;min-width:0;box-sizing:border-box;
  overflow-x:auto;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent;
}
.subcat-tags::-webkit-scrollbar{height:6px}
.subcat-tags::-webkit-scrollbar-track{background:transparent}
.subcat-tags::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:6px}
.subcat-tag{
  flex:0 0 auto;
  font-size:13px;font-weight:500;padding:8px 16px;border-radius:22px;
  border:1px solid var(--line-strong);background:var(--white);color:var(--walnut);
  text-decoration:none;transition:all .18s ease;white-space:nowrap;
  box-shadow:0 1px 2px rgba(59,42,32,.04);
}
.subcat-tag:hover{
  border-color:var(--accent);color:var(--accent);
  transform:translateY(-1px);box-shadow:0 4px 10px rgba(217,83,30,.12);
}
.subcat-tag.on{
  background:linear-gradient(135deg,var(--accent),#c2461a);color:#fff;
  border-color:var(--accent);box-shadow:0 4px 12px rgba(217,83,30,.28);
}
.subcat-tag.on:hover{color:#fff;transform:translateY(-1px)}
.subcat-tag:first-child{font-weight:600}
@media(max-width:900px){
  .subcat-tags{gap:7px;margin-bottom:18px;padding-bottom:12px}
  .subcat-tag{font-size:12.5px;padding:7px 14px}
  .co-filter-scroll{gap:7px}
  .co-pill{font-size:12.5px;padding:7px 13px}
}
.listing-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.lt-count{font-family:'JetBrains Mono';font-size:12px;color:#7a6a5c}
.listing-toolbar select{border:1px solid var(--line);border-radius:7px;padding:9px 12px;font-family:Archivo;font-size:13.5px;background:var(--white)}
.listing-pagination{margin-top:32px}
.listing-empty{text-align:center;padding:72px 20px;color:#7a6a5c}
.le-icon{font-size:48px;color:var(--oak);margin-bottom:16px}
.listing-empty h3{font-family:'Fraunces';font-size:22px;line-height:1.25;color:var(--walnut);margin-bottom:8px}
.listing-empty p{margin-bottom:20px}
@media(max-width:900px){.listing-shell{grid-template-columns:1fr}.listing-sidebar{position:static}}

/* ---------- LOCATION SEARCH (city -> area) ---------- */
.cat-sidebar .loc-search{padding:15px 18px 20px;margin-bottom:0;border-bottom:1px solid var(--line)}
.loc-form{display:flex;flex-direction:column;gap:14px}
.loc-field label{display:block;font-family:'JetBrains Mono';font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--walnut);margin-bottom:6px}
.loc-field select{width:100%;border:1px solid var(--line);border-radius:7px;padding:9px 11px;font-family:Archivo;font-size:13.5px;background:var(--white);color:var(--walnut)}
.loc-field select:disabled{background:var(--kraft);color:#9a8a7c;cursor:not-allowed}

/* ---------- VENDOR LOCATION MAP ---------- */
.vmap{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--white);margin:20px 0}
.vmap-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;gap:14px;flex-wrap:wrap}
.vmap-label{font-family:'JetBrains Mono';font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--accent);margin-bottom:4px}
.vmap-addr{font-size:14px;color:var(--walnut);font-weight:500}
.vmap-dir{background:var(--accent);color:#fff;font-size:13px;font-weight:600;padding:9px 16px;border-radius:8px;text-decoration:none;white-space:nowrap;transition:.15s}
.vmap-dir:hover{background:#c2461a;transform:translateY(-1px)}
.vmap-embed{width:100%;background:var(--kraft)}
.vmap-embed iframe{display:block}

/* ---------- PROMO SLIDER ---------- */
.promo-slider{position:relative;border-radius:14px;overflow:hidden;margin-bottom:28px;background:var(--kraft);max-width:100%;box-sizing:border-box}
.promo-track{display:flex;transition:transform .5s ease}
.promo-slide{min-width:100%;max-width:100%;position:relative;overflow:hidden;box-sizing:border-box}
.promo-slide img{width:100%;height:auto;display:block;aspect-ratio:16/5;object-fit:cover}
.promo-link{display:block}
.promo-overlay{position:absolute;top:0;left:0;bottom:0;display:flex;flex-direction:column;justify-content:center;padding:0 48px;max-width:560px;background:linear-gradient(90deg,rgba(42,29,22,.72),transparent);color:#fff}
.promo-overlay h3{font-family:'Fraunces';font-size:32px;font-weight:600;line-height:1.15;margin-bottom:8px}
.promo-overlay p{font-size:15px;opacity:.9;margin-bottom:14px}
.promo-btn{background:var(--accent);color:#fff;padding:11px 22px;border-radius:8px;font-weight:600;font-size:14px;width:fit-content;transition:.15s}
.promo-btn:hover{background:#c2461a;transform:translateY(-1px)}
.promo-nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background:rgba(251,249,245,.9);border:0;font-size:22px;color:var(--walnut);cursor:pointer;display:grid;place-items:center;z-index:2;transition:.15s}
.promo-nav.prev{left:14px}.promo-nav.next{right:14px}
.promo-nav:hover{background:#fff}
.promo-dots{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:7px;z-index:2}
.promo-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.5);border:0;cursor:pointer;padding:0}
.promo-dot.on{background:#fff;width:22px;border-radius:5px}
/* Mobile: the desktop layout overlays text on the left of a wide (16/5)
   image via absolute positioning — on narrow screens the heading wraps
   to 2-3 lines and, combined with the subtext + button, overflows the
   short image height and gets clipped by .promo-slider's overflow:hidden.
   Below 700px we drop the overlay and stack text above image instead. */
@media(max-width:700px){
  .promo-slide{display:flex;flex-direction:column}
  .promo-slide img{order:2;aspect-ratio:16/9;width:100%}
  .promo-overlay{
    order:1;position:static;max-width:none;
    background:linear-gradient(135deg,var(--walnut),var(--walnut-2));
    padding:22px 20px;text-align:center;align-items:center;
  }
  .promo-overlay h3{font-size:clamp(20px,6vw,26px);line-height:1.15;margin-bottom:6px}
  .promo-overlay p{font-size:13px;margin-bottom:12px}
  .promo-btn{margin:0 auto;padding:12px 26px;min-height:44px;display:flex;align-items:center;font-size:14px}
  .promo-nav{display:none}
  .promo-dots{bottom:10px}
}

@media(max-width:420px){
  .promo-overlay{padding:18px 16px}
  .promo-overlay h3{font-size:clamp(18px,7vw,22px)}
}

/* ---------- SIDEBAR BANNER (240x400, scales to sidebar width) ---------- */
.sidebar-banner{margin:16px 0;border-radius:10px;overflow:hidden}
.sidebar-banner img{width:100%;height:auto;display:block;border-radius:10px}

/* ============================================================
   MOBILE RESPONSIVE PASS (max-width:900px)
   Desktop is untouched — every rule below is width-gated.
   ============================================================ */

/* ---------- MOBILE NAV DRAWER (built, hidden by default) ---------- */
.mobile-burger{display:none;flex-direction:column;gap:5px;background:0;border:0;cursor:pointer;padding:8px}
.mobile-burger span{width:24px;height:2px;background:var(--kraft);border-radius:2px;transition:.2s}
.mobile-drawer{position:fixed;top:0;right:-320px;width:300px;max-width:85vw;height:100%;background:var(--walnut-2);z-index:10001;transition:right .3s ease;overflow-y:auto;padding-bottom:40px}
.mobile-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:10000;opacity:0;visibility:hidden;transition:.3s}
body.nav-open .mobile-drawer{right:0}
body.nav-open .mobile-backdrop{opacity:1;visibility:visible}
body.nav-open{overflow:hidden}
.md-head{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:1px solid rgba(232,223,209,.12);color:var(--kraft);font-family:'Fraunces';font-size:18px}
.md-head button{background:0;border:0;color:var(--kraft);font-size:24px;cursor:pointer}
.md-links{display:flex;flex-direction:column;padding:12px 0}
.md-links a{padding:13px 20px;color:var(--kraft);text-decoration:none;font-size:15px;border-bottom:1px solid rgba(232,223,209,.06)}
.md-links a:active{background:rgba(217,83,30,.15)}
.md-premium{color:#fff !important;background:linear-gradient(135deg,#7A5CFF,#5C3CDF);margin:8px 20px;border-radius:20px;text-align:center}
.md-divider{height:8px;border-bottom:0}
.md-vendor{color:var(--oak) !important}
.md-cta{background:var(--accent);color:#fff !important;margin:8px 20px;border-radius:8px;text-align:center;font-weight:600}

/* ---------- MOBILE DRAWER: Shop/Brands/More ACCORDION ----------
   max-height transition (not [hidden]/display toggling) so it can actually
   animate open/closed. The JS below sets an exact inline max-height from
   the panel's real scrollHeight on open (so it can never clip a long
   section, e.g. Shop's dynamic category list pushing Discover past a fixed
   cap) — the 2000px here is only a no-JS fallback, not the real limit.
   The drawer itself (.mobile-drawer) also scrolls (overflow-y:auto) for
   when multiple sections are open at once and don't all fit the viewport. */
.md-accordion{border-bottom:1px solid rgba(232,223,209,.06)}
.md-accordion-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;background:0;border:0;padding:13px 20px;color:var(--kraft);font-family:'Archivo';font-size:15px;cursor:pointer;text-align:left}
.md-accordion-trigger:active{background:rgba(217,83,30,.15)}
.md-acc-caret{display:inline-block;color:var(--oak);transition:transform .2s ease}
.md-accordion-trigger[aria-expanded="true"] .md-acc-caret{transform:rotate(180deg)}
.md-accordion-panel{max-height:0;overflow:hidden;transition:max-height .3s ease;display:flex;flex-direction:column;background:rgba(0,0,0,.15)}
.md-accordion-panel.open{max-height:2000px}
.md-accordion-panel a{padding:11px 20px 11px 32px;font-size:14px;color:var(--kraft);text-decoration:none;border-bottom:0;overflow-wrap:break-word}
.md-accordion-panel a:active{background:rgba(217,83,30,.15)}
.md-acc-heading{padding:10px 20px 4px 32px;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--oak);opacity:.85}

/* ---------- MOBILE FILTER DRAWER (listing page, built, hidden by default) ---------- */
.mobile-filter-btn{display:none}
.filters-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:10000;opacity:0;visibility:hidden;transition:.3s}
body.filters-open .filters-backdrop{opacity:1;visibility:visible}
body.filters-open{overflow:hidden}

/* ---------- MOBILE CATEGORY COLLAPSE (homepage, built, hidden by default) ---------- */
.mobile-cat-toggle{display:none}

/* ---------- LAPTOP NAV TIGHTENING (901px–1320px) ----------
   Between the mobile-burger breakpoint (900px) and a full-width desktop, the
   top nav row (logo + city picker + nav-actions links + auth CTA) is too wide
   at the original spacing/sizes to stay on one line without crowding. Tighten
   gaps/sizes here rather than letting items shrink unpredictably. */
@media(min-width:901px) and (max-width:1320px){
  .nav{gap:18px;padding:14px 20px}
  .logo{font-size:20px}
  .nav-actions{gap:12px;font-size:12.5px}
  .city-picker-btn{max-width:130px;padding:8px 10px}
  .city-picker-btn .cpb-name{max-width:80px}
  .nav-actions .pill{padding:9px 14px}
  .btn-login-sm{padding:8px 12px}
}

@media(max-width:900px){
  /* header → hamburger */
  .mobile-burger{display:flex}
  .nav-actions,.catbar{display:none !important}

  /* global container gutter */
  .container{padding-left:16px;padding-right:16px}
  .topstrip{font-size:10px;padding:6px 12px;text-align:center}

  /* hero */
  .hero-inner{padding:24px 16px}
  .hero h1{font-size:clamp(20px,8vw,32px)}
  .hero p{font-size:14px}
  /* .search-panel floats up over the hero via margin-top:-30px (desktop has
     72px of hero-inner bottom padding to absorb that safely) — mobile's
     bottom padding drops to 24px, so without extra clearance here the
     floating white search card overlaps the stats numbers above it. */
  .hero-stats{margin-bottom:24px}

  /* advanced search: stack fields full width */
  .search-panel-wrap{padding:0 16px 32px}
  .sp-fields{grid-template-columns:1fr;gap:12px}
  .sp-btn{width:100%}

  /* location search: city + area side by side */
  .loc-form{flex-direction:row;gap:10px}
  .loc-field{flex:1}

  /* homepage category sidebar collapses behind a toggle button */
  .mobile-cat-toggle{display:block;width:100%;background:var(--walnut);color:var(--oak);border:0;padding:14px;border-radius:8px;font-family:'JetBrains Mono';font-size:13px;margin-bottom:12px;cursor:pointer;transition:.15s}
.mobile-cat-toggle:hover{background:var(--walnut-2)}
  .mobile-cat-wrap{display:none}
  .mobile-cat-wrap.show{display:block}

  /* category accordion: subcategories become a 2-col grid when open */
  .cat-sidebar{margin-bottom:20px}
  .cat-item.open .cat-sub{display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:6px}
  .cat-sub li a{padding:9px 10px;background:var(--white);border-radius:6px;font-size:12.5px;text-align:center}

  /* listing: filters + categories behind a drawer button */
  .mobile-filter-btn{display:block;width:100%;background:var(--accent);color:#fff;border:0;padding:13px;border-radius:8px;font-weight:600;margin-bottom:16px;cursor:pointer;transition:.15s}
.mobile-filter-btn:hover{background:#c2461a}
  .listing-sidebar{position:fixed;top:0;left:-320px;width:300px;max-width:85vw;height:100%;background:var(--white);z-index:10001;transition:left .3s;overflow-y:auto;padding:20px}
  body.filters-open .listing-sidebar{left:0}
  .filters-backdrop{display:block}

  /* product grids → 2 per row, smaller cards */
  .prod-grid,.prod-grid.premium-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .pcard h3{font-size:13px}
  .pcard .body{padding:10px}
  .priceline .price{font-size:15px}
  .pcard .imgwrap{aspect-ratio:1/1}

  /* manufacturer strip: narrower cards for horizontal swipe */
  .mfr-scroll .mfr-mini{width:130px}

  /* section headers */
  .home-section .sec-head h2,.sec-head h2{font-size:22px}

  /* uniform vertical rhythm — mobile value for every top-level section */
  .home-section,.chiniot-section{padding-top:20px;padding-bottom:20px}
  .split-inner{padding-top:20px;padding-bottom:20px}

  /* companies / manufacturers grids */
  .co-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .mfr-grid{grid-template-columns:repeat(2,1fr)}

  /* tap targets */
  .btn,.creveal,button{min-height:42px}
}

@media(max-width:480px){
  .mfr-grid{grid-template-columns:1fr}
  .foot-inner{grid-template-columns:1fr}

  /* companies grid: 2-per-row on mobile (was collapsing to 1fr here) —
     card padding/logo/text all scaled down so a ~150px-wide column at
     360px (container padding 16px + 10px grid gap, see the 900px block
     above) never overflows. */
  .co-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .co-card{padding:12px;gap:8px;box-sizing:border-box;min-width:0}
  .co-card-link{gap:8px;width:100%;min-width:0}
  .co-logo{width:72px;height:72px;border-radius:10px}
  .co-logo .initials{font-size:24px}
  .co-name{
    width:100%;box-sizing:border-box;font-size:12.5px;line-height:1.3;min-width:0;
    overflow-wrap:break-word;word-break:break-word;text-align:center;
    justify-content:center;flex-wrap:wrap;
  }
  .co-meta{font-size:9.5px;overflow-wrap:break-word}
  .co-tier{font-size:8.5px;padding:2px 7px}
}

@media(max-width:400px){
  .prod-grid{gap:10px}
  .pcard h3{font-size:12px}
}

/* touch momentum scrolling for horizontally-swipeable rows */
.scroll-row,.mfr-scroll,.promo-track,.pd-thumbs{-webkit-overflow-scrolling:touch}

/* ---------- PAGINATION (resources/views/vendor/pagination/tailwind.blade.php) ----------
   That view previously rendered two Tailwind-responsive blocks (sm:hidden /
   hidden sm:flex) which both showed at once since this project doesn't
   compile Tailwind — replaced with one unified .pagination-wrap structure
   styled entirely here via a single max-width:600px query, no class
   toggling needed. Real design-system tokens used throughout (see :root
   above): --line/--line-strong for borders, --white/--kraft for
   default/hover backgrounds, --walnut for text, --accent for the current-
   page highlight (same role --accent plays for .fchip.on/.cat-main.on
   elsewhere), JetBrains Mono to match the site's other chip/badge UI. */
.pagination-wrap{display:flex;flex-direction:column;align-items:center;gap:10px;margin:28px 0}
.pagination{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}
.pagination a,.pagination span{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;height:38px;padding:0 12px;box-sizing:border-box;
  border:1px solid var(--line);border-radius:8px;
  font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:600;
  color:var(--walnut);text-decoration:none;background:var(--white);
  transition:.15s;
}
.pagination a:hover{background:var(--kraft);border-color:var(--line-strong)}
.pagination [aria-current]{background:var(--accent);color:#fff;border-color:var(--accent)}
.pagination .disabled{opacity:.4;cursor:not-allowed}
.pagination svg{width:16px;height:16px;display:inline-block}
.pagination-summary{font-family:'JetBrains Mono',monospace;font-size:12.5px;color:#7a6a5c;text-align:center}
.pagination-summary strong{color:var(--walnut);font-weight:600}
@media(max-width:600px){
  .pagination a,.pagination span{min-width:34px;height:34px;padding:0 9px;font-size:12px}
}

@media(max-width:900px){
  .pg-arrow{width:34px;height:34px;font-size:19px}
  .pg-lightbox-close{top:12px;right:12px}
}

/* ---------- LIVE EXPO (/live-expo) ---------- */

/* nav "LIVE" badge — small pulsing red pill next to the Live Expo link */
.nav-live-badge{
  display:inline-flex;align-items:center;gap:4px;
  background:#E23B3B;color:#fff;font-family:'JetBrains Mono',monospace;
  font-size:9.5px;font-weight:700;letter-spacing:.06em;
  padding:2px 6px;border-radius:20px;line-height:1.4;
}
.nav-live-badge .dot{width:5px;height:5px;border-radius:50%;background:#fff;animation:live-pulse 1.6s ease-in-out infinite}
@keyframes live-pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* prominent entry-point banner at the top of the classic /expo page */
.expo-live-banner{
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(90deg,var(--accent),#C9382B);color:#fff;
  padding:13px 20px;text-align:center;font-family:'Archivo',sans-serif;
  font-weight:600;font-size:14.5px;text-decoration:none;
}
.expo-live-banner .dot{width:7px;height:7px;border-radius:50%;background:#fff;animation:live-pulse 1.6s ease-in-out infinite;flex-shrink:0}
.expo-live-banner:hover{background:linear-gradient(90deg,#C9382B,var(--accent))}
.expo-live-banner .arrow{transition:transform .15s}
.expo-live-banner:hover .arrow{transform:translateX(4px)}

/* hero */
.live-expo-hero{background:linear-gradient(120deg,#2A1D16,#3B2A20 55%,#4a3050);background-size:cover;background-position:center;color:var(--kraft);padding:80px 28px 64px}
.live-expo-hero-inner{max-width:1180px;margin:0 auto}
.live-badge-lg{
  display:inline-flex;align-items:center;gap:7px;
  background:#E23B3B;color:#fff;font-family:'JetBrains Mono',monospace;
  font-size:12px;font-weight:700;letter-spacing:.1em;
  padding:6px 14px;border-radius:20px;margin-bottom:18px;
}
.live-badge-lg .dot{width:7px;height:7px;border-radius:50%;background:#fff;animation:live-pulse 1.6s ease-in-out infinite}
.live-expo-hero .eyebrow{font-family:'JetBrains Mono';font-size:12px;letter-spacing:.14em;color:var(--oak);text-transform:uppercase;margin-bottom:16px;display:flex;align-items:center;gap:12px}
.live-expo-hero h1{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(32px,6vw,54px);color:#fff;line-height:1.05;letter-spacing:-.02em;margin-bottom:18px;max-width:760px}
.live-expo-hero h1 em{font-style:italic;color:var(--oak)}
.live-expo-hero p{font-size:16.5px;opacity:.88;max-width:600px;color:var(--kraft)}

/* sections — fade/slide reveal on scroll-in, GPU-friendly transform+opacity only */
.expo-hall{padding:48px 0;opacity:0;transform:translateY(28px);transition:opacity .6s ease,transform .6s ease}
.expo-hall.is-visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .expo-hall{opacity:1;transform:none;transition:none}
  .live-badge-lg .dot,.nav-live-badge .dot,.expo-live-banner .dot{animation:none}
}

/* vendor spotlight */
.spotlight-card{background:#fff;border:1px solid #e9dfd2;border-radius:14px;padding:26px 28px;margin-bottom:24px}
.spotlight-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.spotlight-logo{width:64px;height:64px;border-radius:50%;overflow:hidden;background:var(--walnut);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.spotlight-logo img{width:100%;height:100%;object-fit:cover}
.spotlight-logo .initials{color:#fff;font-family:'Fraunces',serif;font-weight:600;font-size:20px}
.spotlight-meta h3{font-family:'Fraunces',serif;font-weight:600;font-size:22px;color:var(--walnut);margin-bottom:4px}
.spotlight-meta .mono{font-size:12px;color:#8a7a6c;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.spotlight-tier{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.06em;padding:2px 8px;border-radius:20px;background:#eee}
.spotlight-tier.premium{background:#2A1D16;color:#F0B429}
.spotlight-tier.gold{background:#fdf1d6;color:#a67c00}
.spotlight-tier.startup{background:#eef4ee;color:#3a7a4a}
.spotlight-blurb{margin-top:16px;color:#5a4a3c;line-height:1.6;max-width:760px}
.spotlight-visit{display:inline-block;margin-top:18px;padding:10px 20px;border-radius:8px;border-color:#d8cabb;color:var(--walnut)}
.spotlight-visit:hover{border-color:var(--accent);color:var(--accent)}

/* video showcase */
.video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px}
.video-card{display:flex;flex-direction:column;gap:10px}
.video-thumb{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:9/16;max-height:360px;border-radius:12px;background:#2A1D16 center/cover no-repeat;border:none;cursor:pointer;padding:0;overflow:hidden;width:100%}
.video-thumb .play-icon{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--walnut);display:flex;align-items:center;justify-content:center;font-size:18px;transition:transform .15s}
.video-thumb:hover .play-icon{transform:scale(1.08)}
.video-thumb.video-linkonly{gap:10px;flex-direction:column;text-decoration:none}
.video-thumb .play-badge{color:#fff;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.05em;background:rgba(0,0,0,.55);padding:4px 10px;border-radius:20px}
.video-title{font-size:13.5px;color:var(--walnut);font-weight:600;line-height:1.3}
.video-iframe{width:100%;aspect-ratio:9/16;max-height:360px;border:none;border-radius:12px;background:#000}

/* /reels page grid — vertical 9:16 cards, reuses .video-card/.video-thumb/.video-iframe */
.reels-section{padding:48px 0}
.reels-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.reels-empty{padding:60px 20px;text-align:center;color:#5a4a3c;font-size:15px}

@media(max-width:900px){
  .reels-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:600px){
  .reels-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .reels-section{padding:0}
}

/* CTA */
.live-expo-cta{background:var(--walnut);color:var(--kraft);padding:56px 0;text-align:center;margin-top:24px}
.live-expo-cta h2{color:#fff;font-size:clamp(1.4rem,3.5vw,2rem);margin-bottom:10px}
.live-expo-cta p{color:var(--kraft);opacity:.85;margin-bottom:26px}
.live-expo-cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.live-expo-cta .btn-primary{padding:13px 26px;border-radius:8px}
.btn-ghost-dark{padding:13px 26px;border-radius:8px;border:1.5px solid rgba(232,223,209,.35);color:var(--kraft);font-weight:600;transition:.15s}
.btn-ghost-dark:hover{border-color:var(--oak);color:var(--oak)}

@media(max-width:600px){
  .live-expo-hero{padding:56px 18px 44px}
  .expo-hall,.live-expo-cta{padding-left:0;padding-right:0}
  .video-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
  .spotlight-card{padding:20px}
  .spotlight-head{gap:12px}
  .spotlight-logo{width:52px;height:52px}
}

/* ---------- WOODEN ITEMS SECTION ---------- */
/* Floating WhatsApp button on Wooden Handicraft pages — bottom-LEFT so it never
   overlaps the sitewide AI chat bubble (.gh-chat-bubble), which is bottom-right. */
.wa-float{position:fixed;bottom:24px;left:24px;width:56px;height:56px;border-radius:50%;background:#25D366;color:#fff;display:grid;place-items:center;font-size:26px;text-decoration:none;box-shadow:0 8px 28px rgba(37,211,102,.45);z-index:9997;transition:.2s}
.wa-float:hover{transform:scale(1.06)}
@media(max-width:480px){.wa-float{width:50px;height:50px;font-size:22px;bottom:16px;left:16px}}

/* Furniture ↔ Wooden Handicraft cross-promo link, used at the bottom of listing/
   home pages on both sides. */
.section-crosspromo{display:block;margin:32px 0;padding:18px 22px;background:var(--paper);border:1px solid var(--line);border-radius:10px;text-align:center;font-weight:600;color:var(--walnut);text-decoration:none;transition:.15s}
.section-crosspromo:hover{border-color:var(--accent);color:var(--accent)}

/* Small homepage banner promoting Wooden Handicraft (furniture side). */
.woodenitems-promo{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:linear-gradient(120deg,#2A1D16,#3B2A20);color:var(--kraft);border-radius:12px;padding:20px 24px;margin-top:16px}
.woodenitems-promo .wip-text{font-family:'Fraunces',serif;font-size:1.1rem;color:#fff}
.woodenitems-promo .wip-text small{display:block;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;color:var(--oak);text-transform:uppercase;margin-bottom:6px}

/* "Curated Quality" trust band — 4-up on desktop, 2-up tablet, 1-up mobile.
   Pakistan brand palette (kraft band, walnut text, oak icon rings) —
   matches the typographic-glyph icon language used sitewide instead of
   photographic icons. */
.trust-band{width:100%;background:var(--kraft);padding:44px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust-band-inner{max-width:1280px;margin:0 auto;padding:0 28px;display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.trust-item{text-align:left}
.trust-icon{width:44px;height:44px;border:2px solid var(--oak);border-radius:50%;display:grid;place-items:center;font-size:18px;color:var(--walnut);margin-bottom:14px;background:var(--paper)}
.trust-item h3{font-family:'Fraunces',serif;font-size:1.05rem;font-weight:600;color:var(--walnut);margin-bottom:6px}
.trust-item p{font-size:13.5px;color:#6b5a4c;line-height:1.55;margin:0}
@media(max-width:900px){.trust-band-inner{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.trust-band{padding:28px 0}.trust-band-inner{grid-template-columns:repeat(2,1fr);gap:20px 14px;padding:0 16px}.trust-icon{width:38px;height:38px;font-size:16px;margin-bottom:10px}.trust-item h3{font-size:.95rem}.trust-item p{font-size:12.5px}}
.woodenitems-promo a.btn{white-space:nowrap}
@media(max-width:480px){.woodenitems-promo{padding:16px 18px}}

/* ---------- WOODEN ITEMS: CART BADGE (nav link on wooden pages only) ---------- */
.wi-cart-link{position:relative;display:inline-flex;align-items:center;gap:6px}
.wi-cart-count{background:var(--accent);color:#fff;font-size:11px;font-weight:700;border-radius:20px;padding:1px 7px;font-family:'JetBrains Mono',monospace}

/* Add to Cart button on wooden product cards (components/product-card.blade.php) —
   only ever rendered for section='wooden_items', never for furniture. */
.add-to-cart-mini{width:100%;margin-top:10px;padding:9px;background:var(--walnut);color:#fff;border:0;border-radius:8px;font-weight:600;font-size:13px;cursor:pointer;transition:.15s}
.add-to-cart-mini:hover{background:var(--accent)}
.add-to-cart-mini:disabled{opacity:.7;cursor:default}

/* ---------- WOODEN ITEMS: CART / CHECKOUT / CONFIRMATION (Part 2) ---------- */
.cart-flash-ok{background:rgba(37,211,102,.1);border:1px solid rgba(37,211,102,.35);color:#1a7a41;border-radius:8px;padding:12px 16px;margin-bottom:20px;font-size:13.5px}
.cart-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;max-width:100%}
.cart-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:560px}
.cart-table th{text-align:left;padding:12px 14px;background:var(--paper);color:#7a6a5c;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--line)}
.cart-table td{padding:12px 14px;border-bottom:1px solid var(--line);color:var(--walnut);vertical-align:middle}
.cart-table tr:last-child td{border-bottom:0}
.cart-item-cell{display:flex;align-items:center;gap:10px;min-width:200px}
.cart-item-cell img{width:44px;height:44px;object-fit:cover;border-radius:6px;flex-shrink:0}
.cart-item-cell a{color:var(--walnut);font-weight:600;text-decoration:none}
.cart-item-cell a:hover{color:var(--accent)}
.cart-qty-form input{width:60px;padding:7px 8px;border:1px solid var(--line);border-radius:6px;font-size:13.5px;font-family:inherit}
.cart-remove-btn{background:transparent;border:1px solid var(--line);color:#a8391a;border-radius:6px;width:30px;height:30px;cursor:pointer;font-size:14px;transition:.15s}
.cart-remove-btn:hover{background:rgba(217,83,30,.08);border-color:var(--accent)}
.cart-summary{max-width:380px;margin:24px 0 0 auto;padding:20px;background:var(--paper);border-radius:12px}
.cart-summary-row{display:flex;justify-content:space-between;font-size:15px;color:var(--walnut);margin-bottom:8px}
.cart-summary-note{font-size:12.5px;color:#7a6a5c;margin-bottom:16px}
.cart-summary-actions{display:flex;gap:12px;flex-wrap:wrap}
.cart-wa-btn{background:#25D366;color:#fff}
.cart-wa-btn:hover{background:#1fb857;color:#fff}

.checkout-shell{display:grid;grid-template-columns:1.6fr 1fr;gap:28px;align-items:start}
.checkout-form-card{margin:0}
.checkout-payment-cod{background:rgba(37,211,102,.08);border:1px solid rgba(37,211,102,.3);border-radius:8px;padding:12px 16px;font-size:13.5px;color:#1a7a41;font-weight:600;margin-bottom:18px}
.payment-options{margin-bottom:18px;display:flex;flex-direction:column;gap:8px}
.payment-option{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:8px;cursor:pointer;font-size:14px;color:var(--walnut);transition:.15s}
.payment-option:has(input:checked){border-color:var(--accent);background:rgba(217,83,30,.05)}
.payment-option input{flex-shrink:0}
.payment-account-details{background:var(--paper);border-radius:8px;padding:14px 16px;margin:-2px 0 4px 0;font-size:13px;color:var(--walnut)}
.payment-account-details p{margin-bottom:4px}
.payment-account-details p:last-child{margin-bottom:0}
.payment-proof-form{background:var(--paper);border-radius:10px;padding:18px;margin-top:16px;text-align:left}
.payment-proof-form input[type=file]{display:block;margin:10px 0;font-size:13px}
.payment-awaiting-badge{display:inline-block;background:rgba(217,164,6,.12);color:#8a6d00;border:1px solid rgba(217,164,6,.35);border-radius:20px;padding:4px 12px;font-size:12px;font-weight:600;margin-bottom:10px}
.checkout-account-note{font-size:13px;color:#7a6a5c;background:var(--paper);border-radius:8px;padding:10px 14px;margin-bottom:18px}
.checkout-summary-card{background:var(--paper);border-radius:12px;padding:22px;position:sticky;top:90px}
.checkout-summary-card h3{font-family:'Fraunces',serif;font-size:1.1rem;color:var(--walnut);margin-bottom:14px}
.checkout-summary-line{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;color:var(--walnut);padding:8px 0;border-bottom:1px solid var(--line)}
.checkout-summary-total{display:flex;justify-content:space-between;font-size:16px;font-weight:700;color:var(--walnut);padding-top:14px;margin-top:6px}

.checkout-confirm-card{max-width:520px;margin:0 auto;text-align:center;background:var(--white);border-radius:16px;box-shadow:0 20px 50px rgba(59,42,32,.12);padding:44px 32px}
.checkout-confirm-icon{width:64px;height:64px;border-radius:50%;background:rgba(37,211,102,.12);color:#1a7a41;font-size:30px;display:grid;place-items:center;margin:0 auto 18px}
.checkout-confirm-card h1{font-family:'Fraunces',serif;font-size:1.8rem;color:var(--walnut);margin-bottom:10px}
.checkout-confirm-number{font-family:'JetBrains Mono',monospace;font-size:14px;color:var(--accent);margin-bottom:10px}
.checkout-confirm-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:24px}

@media(max-width:900px){
  .checkout-shell{grid-template-columns:1fr}
  .checkout-summary-card{position:static}
}
@media(max-width:480px){
  .cart-summary{margin-left:0;max-width:100%}
  .checkout-confirm-card{padding:32px 20px}
  .checkout-confirm-actions{flex-direction:column}
  .checkout-confirm-actions .btn{width:100%;text-align:center}
}

/* ---------- FEATURED WHOLESALE LOTS (homepage, Living Room / Turkish / Chinioti) ----------
   .wholesale-lot-pcard is a .pcard-mini variant (same size/shape as every
   other scroll-row card — see product-card-mini.blade.php) rendered via the
   shared <x-scroll-rows> component, so all sizing/scroll/mobile behavior
   above (.scroll-wrap/.scroll-row/.scroll-track, the 220px width, the
   <600px/<400px/<480px breakpoints) already applies with no extra rules
   needed here — only the wholesale-specific inner elements are styled. */
.wholesale-lot-pcard .badge{position:absolute;top:8px;left:8px;background:var(--walnut);color:var(--oak);font-family:'JetBrains Mono',monospace;font-size:9.5px;padding:4px 7px;border-radius:3px;letter-spacing:.03em}
.wholesale-lot-pcard .wholesale-price-row{display:flex;align-items:baseline;justify-content:space-between;gap:6px;margin-top:2px}
.wholesale-price{font-family:'Fraunces',serif;font-size:13.5px;font-weight:600;color:var(--walnut)}
.wholesale-price small{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:400;color:#7a6a5c}
.wholesale-moq{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;color:var(--accent-2);white-space:nowrap}
.wholesale-lot-details{font-size:11px;color:#7a6a5c;line-height:1.4;margin:2px 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- BUYER ACCOUNTS: order status tracker, account subnav, order detail ---------- */
.vreg-success{background:rgba(37,211,102,.1);border:1px solid rgba(37,211,102,.35);color:#1a7a41;border-radius:8px;padding:14px 18px;margin-bottom:20px;font-size:13.5px}

.account-subnav{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:22px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.account-subnav-links{display:flex;gap:22px;flex-wrap:wrap}
.account-subnav-links a{font-size:13.5px;font-weight:600;color:#7a6a5c;padding-bottom:3px;border-bottom:2px solid transparent}
.account-subnav-links a.is-active{color:var(--accent);border-bottom-color:var(--accent)}
.account-subnav-links a:hover{color:var(--walnut)}
.account-order-view-link{font-size:13px;font-weight:600;color:var(--accent)}

.order-status-badge{text-transform:uppercase}
.order-status-badge.status-pending{background:rgba(217,164,6,.14);color:#8a6d00}
.order-status-badge.status-confirmed{background:rgba(59,90,217,.12);color:#2f4bc9}
.order-status-badge.status-processing{background:rgba(92,60,223,.12);color:#5C3CDF}
.order-status-badge.status-shipped{background:rgba(122,80,217,.14);color:#6b3fc9}
.order-status-badge.status-delivered{background:rgba(37,211,102,.14);color:#1a7a41}
.order-status-badge.status-cancelled{background:rgba(217,83,30,.12);color:#a8391a}

.order-detail-card{background:var(--white);border-radius:14px;box-shadow:0 12px 36px rgba(59,42,32,.1);padding:28px}
.order-detail-top{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:8px}
.order-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;font-size:13.5px;color:var(--walnut);line-height:1.7}
.order-detail-grid p{margin-bottom:4px}

.order-status-track{margin:24px 0}
.ost-steps{display:flex;align-items:flex-start;width:100%}
.ost-step{display:flex;flex-direction:column;align-items:center;gap:8px;flex:0 0 auto;min-width:64px}
.ost-dot{width:30px;height:30px;border-radius:50%;background:var(--paper);border:2px solid var(--line-strong);color:#9a8a7c;display:grid;place-items:center;font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;flex-shrink:0}
.ost-label{font-size:11px;font-weight:600;color:#9a8a7c;text-align:center;white-space:nowrap}
.ost-line{flex:1 1 auto;height:2px;background:var(--line-strong);margin:15px 4px 0;min-width:12px}
.ost-step.is-done .ost-dot{background:var(--accent);border-color:var(--accent);color:#fff}
.ost-step.is-done .ost-label{color:var(--walnut)}
.ost-line.is-done{background:var(--accent)}
.ost-step.is-current .ost-dot{background:var(--white);border-color:var(--accent);color:var(--accent)}
.ost-step.is-current .ost-label{color:var(--accent);font-weight:700}
.ost-cancelled{display:inline-block;background:rgba(217,83,30,.1);border:1px solid rgba(217,83,30,.3);color:#a8391a;border-radius:8px;padding:12px 18px;font-size:13.5px;font-weight:600}

@media(max-width:640px){
  .order-detail-card{padding:18px}
  .order-detail-grid{grid-template-columns:1fr;gap:14px}
  .ost-steps{overflow-x:auto;padding-bottom:4px}
  .ost-label{white-space:normal;font-size:10px}
  .ost-step{min-width:56px}
}

/* ---------- WOODEN ITEMS: favorites/wishlist heart, stock badges ---------- */
.fav-heart{
  position:absolute;bottom:10px;right:10px;z-index:2;
  width:34px;height:34px;border-radius:50%;border:0;
  background:rgba(26,19,14,.55);color:#fff;font-size:16px;
  display:grid;place-items:center;cursor:pointer;line-height:1;
  transition:.15s;text-decoration:none;
}
.fav-heart:hover{background:rgba(26,19,14,.75);transform:scale(1.06)}
.fav-heart.is-fav{background:var(--accent);color:#fff}
.fav-heart:disabled{opacity:.6;cursor:wait}

.fav-heart-inline{
  position:static;width:auto;height:auto;border-radius:20px;
  background:var(--paper);color:var(--walnut);
  padding:6px 14px;font-size:12.5px;font-weight:600;gap:6px;
  display:inline-flex;align-items:center;
}
.fav-heart-inline:hover{background:var(--kraft);transform:none}
.fav-heart-inline.is-fav{background:rgba(217,83,30,.1);color:var(--accent)}

.stock-badge{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:10px;padding:3px 8px;border-radius:4px;margin-top:6px}
.stock-badge.low{background:rgba(217,164,6,.14);color:#8a6d00}
.stock-badge.out{background:rgba(217,83,30,.12);color:#a8391a}

/* ---------- WOODEN ITEMS PREMIUM LANDING PAGE ---------- */
.wooden-hero{
  position:relative;background:linear-gradient(160deg,#2A1D16 0%,#3B2A20 55%,#4a3527 100%);
  overflow:hidden;text-align:center;
}
.wooden-hero-inner{max-width:760px;margin:0 auto;padding:88px 28px 64px;display:flex;flex-direction:column;align-items:center}
.wh-eyebrow{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.18em;color:var(--oak);text-transform:uppercase;margin-bottom:22px;display:inline-flex;align-items:center;gap:10px}
.wh-eyebrow::before,.wh-eyebrow::after{content:'';width:28px;height:1px;background:var(--oak)}
.wooden-hero h1{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(30px,7vw,54px);line-height:1.08;color:#fff;letter-spacing:-.02em;margin-bottom:18px;max-width:100%;word-break:break-word;overflow-wrap:break-word}
.wooden-hero h1 em{font-style:italic;color:var(--oak)}
.wooden-hero p{color:rgba(255,255,255,.82);font-size:16px;line-height:1.6;max-width:560px;margin:0 auto 32px}
.wooden-hero-search{display:flex;width:100%;max-width:560px;margin:0 auto 24px;background:#fff;border-radius:10px;padding:6px;box-shadow:0 18px 44px rgba(0,0,0,.28)}
.wooden-hero-search input{flex:1;border:0;padding:13px 16px;font-family:'Archivo';font-size:14.5px;background:transparent;color:var(--ink);outline:none;min-width:0}
.wooden-hero-search button{background:var(--accent);color:#fff;border:0;border-radius:7px;padding:0 22px;font-family:'Archivo';font-weight:700;font-size:14.5px;cursor:pointer;white-space:nowrap;transition:.15s}
.wooden-hero-search button:hover{background:var(--accent-2)}
.wooden-hero-cta{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:26px}
.wooden-hero-stat{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.04em;color:var(--oak)}
.wooden-hero-stat strong{color:#fff;font-size:14px}
@media(max-width:640px){
  .wooden-hero-inner{padding:56px 18px 44px}
  .wooden-hero-search{flex-direction:column;background:transparent;box-shadow:none;gap:8px;padding:0}
  .wooden-hero-search input{background:#fff;border-radius:8px;padding:13px 14px}
  .wooden-hero-search button{border-radius:8px;padding:13px;width:100%}
}

.trust-strip{width:100%;background:var(--paper);border-bottom:1px solid var(--line)}
.trust-strip-inner{max-width:1280px;margin:0 auto;padding:16px 28px;display:flex;align-items:center;justify-content:center;gap:32px;flex-wrap:wrap}
.trust-strip-item{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--walnut);white-space:nowrap}
.trust-strip-item span{font-size:16px}
@media(max-width:640px){
  .trust-strip-inner{gap:14px 20px;padding:14px 16px;justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
  .trust-strip-item{font-size:12px}
}

.pcard-wooden-mini .body{gap:6px}
.pwm-price-row{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.pwm-meta-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:0}
.pwm-sold{font-family:'JetBrains Mono',monospace;font-size:10px;color:#7a6a5c;background:var(--paper);padding:3px 8px;border-radius:4px;white-space:nowrap}
.pcard-wooden-mini .stock-badge{margin-top:0}

.wooden-guarantee-band{padding-top:52px}
.wgb-heading{text-align:center;margin-bottom:8px}
.wgb-heading .k{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.14em;color:var(--accent);text-transform:uppercase;margin-bottom:10px}
.wgb-heading h2{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(1.5rem,3.2vw,2rem);color:var(--walnut)}

.newsletter-band{width:100%;background:linear-gradient(135deg,#2A1D16,#3B2A20);padding:56px 0}
.newsletter-inner{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.newsletter-copy h2{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(1.3rem,2.8vw,1.7rem);color:#fff;margin-bottom:8px}
.newsletter-copy p{color:rgba(255,255,255,.75);font-size:14px;max-width:420px}
.newsletter-form{display:flex;gap:10px;flex-wrap:wrap;flex:0 0 auto}
.newsletter-form input{border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);border-radius:8px;padding:12px 14px;font-family:'Archivo';font-size:13.5px;color:#fff;min-width:180px}
.newsletter-form input::placeholder{color:rgba(255,255,255,.5)}
.newsletter-form input:focus{outline:2px solid var(--accent);border-color:transparent}
.newsletter-form button{background:var(--accent);color:#fff;border:0;border-radius:8px;padding:12px 22px;font-family:'Archivo';font-weight:700;font-size:13.5px;cursor:pointer;white-space:nowrap;transition:.15s}
.newsletter-form button:hover{background:var(--accent-2)}
.newsletter-honeypot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.newsletter-inner{position:relative}
.newsletter-msg{width:100%;margin-top:14px;font-size:13px;font-weight:600}
.newsletter-msg.ok{color:#8fd9a8}
.newsletter-msg.err{color:#f2a0a0}
@media(max-width:820px){
  .newsletter-inner{flex-direction:column;align-items:flex-start;text-align:left}
  .newsletter-form{width:100%}
  .newsletter-form input{flex:1 1 160px}
}
@media(max-width:480px){
  .newsletter-form{flex-direction:column}
  .newsletter-form input,.newsletter-form button{width:100%}
}

/* ---------- CHECKOUT: address autocomplete + map pin picker ---------- */
.checkout-map-picker{width:100%;height:260px;border-radius:10px;overflow:hidden;border:1px solid var(--line-strong);background:var(--paper)}
@media(max-width:480px){.checkout-map-picker{height:200px}}

/* ---------- PRINTABLE SHIPPING LABEL ---------- */
.label-page{background:#e8e4dd;min-height:100vh;padding:24px 16px;display:flex;flex-direction:column;align-items:center;font-family:'Archivo',sans-serif}
.label-toolbar{width:100%;max-width:420px;display:flex;justify-content:flex-end;margin-bottom:14px}
.label-toolbar button{background:var(--accent,#D9531E);color:#fff;border:0;border-radius:8px;padding:11px 22px;font-weight:700;font-size:14px;cursor:pointer}
.label-sheet{width:100%;max-width:420px;background:#fff;border:2px solid #1a130e;border-radius:10px;padding:22px;color:#1a130e}
.label-logo{display:flex;justify-content:center;margin-bottom:14px}
.label-logo img{max-height:52px;max-width:220px;object-fit:contain}
.label-logo .label-logo-fallback{font-family:'Fraunces',serif;font-weight:700;font-size:22px;letter-spacing:.02em}
.label-divider{border:0;border-top:2px dashed #1a130e;margin:14px 0}
.label-block-title{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#7a6a5c;margin-bottom:6px}
.label-block p{margin:0 0 3px;font-size:14px;line-height:1.5}
.label-block .label-name{font-size:17px;font-weight:700}
.label-order-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.label-order-number{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:20px;letter-spacing:.02em}
.label-order-date{font-size:12px;color:#7a6a5c}
.label-meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;margin-top:10px}
.label-meta-item{font-size:13px}
.label-meta-item strong{display:block;font-size:15px}
.label-cod-badge{margin-top:14px;padding:12px 14px;border-radius:8px;background:#fff3e0;border:2px solid #D9531E;text-align:center}
.label-cod-badge .amount{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:24px;color:#D9531E}
.label-items-list{font-size:12.5px;line-height:1.6;margin-top:4px}
.label-items-list li{margin-bottom:2px}
.label-multivendor-note{font-size:11px;color:#7a6a5c;margin-top:4px;font-style:italic}
@media print{
  .no-print{display:none !important}
  .label-page{background:#fff;min-height:0;padding:0}
  .label-sheet{max-width:100%;border-width:1.5px;box-shadow:none}
  @page{size:A4;margin:20mm}
}

/* ============================================================
   GRAIN HANDICRAFT (by Grainhouse) — store identity
   Scoped to the store's own .hc-* header/footer and body.store-handicraft
   (set by layouts.app on pages extending handicraft.layout). Furniture
   pages never carry these classes, so nothing below can affect them.
   Palette: teak + honey + forest — complements the marketplace's
   walnut/oak/burnt-orange without copying it.
   ============================================================ */
:root{
  --hc-teak:#3A2416;
  --hc-teak-2:#2B1A0F;
  --hc-honey:#E0A84B;
  --hc-honey-2:#C98F30;
  --hc-cream:#F6ECD9;
  --hc-forest:#2F4A3A;
  --hc-forest-2:#22382B;
}
body.store-handicraft{background:#FAF5EC}

/* Header: topstrip scrolls away, main bar + nav stay (sticky top = -strip height) */
.hc-header{position:sticky;top:-34px;z-index:50;background:var(--hc-teak);color:var(--hc-cream)}
.hc-topstrip{background:var(--hc-cream);color:var(--hc-teak);height:34px;font-size:12px;font-family:'JetBrains Mono',monospace;letter-spacing:.02em}
.hc-topstrip-inner{max-width:1280px;margin:0 auto;padding:0 28px;height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}
.hc-topstrip-text{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-crossbrand{flex:0 0 auto;font-weight:600;color:var(--hc-forest);white-space:nowrap;text-decoration:underline;text-underline-offset:3px}
.hc-crossbrand:hover{color:var(--accent)}

.hc-main-inner{max-width:1280px;margin:0 auto;padding:14px 28px;display:flex;align-items:center;gap:28px}
.hc-main-inner > *{min-width:0}

.hc-logo{display:flex;align-items:center;gap:10px;color:var(--hc-cream);flex:0 0 auto;text-decoration:none}
.hc-logo-img{height:40px;width:auto;display:block;object-fit:contain}
/* The Grainhouse logo is a wide wordmark with the house icon at its left
   edge — crop to just that house mark and pair it with the store wordmark. */
.hc-logo-mark{width:34px;height:40px;display:grid;place-items:center;font-size:26px;flex:0 0 auto;overflow:hidden}
.hc-logo-mark img{width:34px;height:40px;object-fit:cover;object-position:left center;display:block}
.hc-logo-words{display:flex;flex-direction:column;line-height:1.05;min-width:0}
.hc-logo-name{font-family:'Fraunces',serif;font-weight:700;font-size:22px;letter-spacing:-.01em;color:#fff;white-space:nowrap}
.hc-logo-tag{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--hc-honey);margin-top:3px;white-space:nowrap}

.hc-search{flex:1;max-width:560px;display:flex;align-items:center;background:#fff;border-radius:10px;padding:4px;border:2px solid transparent;transition:border-color .15s}
.hc-search:focus-within{border-color:var(--hc-honey)}
.hc-search input{flex:1;min-width:0;border:0;background:transparent;padding:9px 12px;font-family:'Archivo';font-size:14px;color:var(--ink);outline:none}
.hc-search button{flex:0 0 auto;background:var(--hc-honey);color:var(--hc-teak-2);border:0;border-radius:7px;width:42px;height:36px;font-size:18px;font-weight:700;cursor:pointer}
.hc-search button:hover{background:var(--hc-honey-2)}

.hc-actions{display:flex;align-items:center;gap:6px;margin-left:auto;flex:0 0 auto}
.hc-action{position:relative;display:inline-flex;align-items:center;gap:6px;padding:9px 12px;border-radius:8px;color:var(--hc-cream);font-size:13.5px;font-weight:600;text-decoration:none;transition:background .15s}
.hc-action:hover{background:rgba(246,236,217,.1);color:#fff}
.hc-cart-count{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--hc-honey);color:var(--hc-teak-2);font-size:11.5px;font-weight:800;display:inline-grid;place-items:center}
.hc-burger{display:none;flex-direction:column;gap:5px;background:0;border:0;cursor:pointer;padding:10px 8px}
.hc-burger span{width:22px;height:2px;background:var(--hc-cream);border-radius:2px}

.hc-nav{background:var(--hc-forest);border-top:1px solid rgba(246,236,217,.08)}
.hc-nav-inner{max-width:1280px;margin:0 auto;padding:0 28px;display:flex;align-items:center;gap:30px;font-size:14px;font-weight:600}
.hc-nav-inner > a,.hc-dd-trigger{display:block;padding:12px 0;color:var(--hc-cream);white-space:nowrap;border-bottom:2px solid transparent;text-decoration:none;transition:.15s}
.hc-nav-inner > a:hover,.hc-dd-trigger:hover,.hc-nav-inner .is-active{color:var(--hc-honey);border-bottom-color:var(--hc-honey)}
.hc-nav-chat{color:#8FE3A8 !important}
.hc-nav-parent{margin-left:auto;font-weight:500;opacity:.85}
.hc-dd{position:relative}
.hc-dd-panel{position:absolute;top:100%;left:-14px;z-index:60;min-width:230px;max-height:70vh;overflow-y:auto;background:#fff;border-radius:10px;box-shadow:0 18px 40px rgba(0,0,0,.2);padding:8px;display:none}
.hc-dd:hover .hc-dd-panel,.hc-dd.open .hc-dd-panel{display:block}
.hc-dd-panel a{display:block;padding:9px 12px;border-radius:6px;color:var(--ink);font-weight:500;font-size:14px;white-space:nowrap}
.hc-dd-panel a:hover{background:var(--hc-cream)}
.hc-dd-panel a:first-child{font-weight:700;color:var(--hc-forest)}

/* Mobile drawer */
.hc-drawer{position:fixed;top:0;right:0;bottom:0;width:min(320px,86vw);background:#fff;color:var(--ink);z-index:100001;transform:translateX(100%);transition:transform .25s ease;overflow-y:auto;box-shadow:-12px 0 32px rgba(0,0,0,.2)}
.hc-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:var(--hc-teak);color:#fff;font-family:'Fraunces',serif;font-weight:700;font-size:18px}
.hc-drawer-head button{background:0;border:0;color:#fff;font-size:28px;line-height:1;cursor:pointer;padding:0 4px}
.hc-drawer-links{display:flex;flex-direction:column;padding:10px 12px 28px}
.hc-drawer-links a{padding:11px 10px;border-radius:6px;color:var(--ink);font-weight:500;font-size:15px}
.hc-drawer-links a:hover{background:var(--hc-cream)}
.hc-drawer-sub{padding-left:22px !important;font-size:14px !important}
.hc-drawer-heading{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#8a7a6c;padding:14px 10px 4px}
.hc-drawer-divider{height:1px;background:var(--line);margin:12px 0}
.hc-drawer-parent{color:var(--hc-forest) !important;font-weight:700 !important}
.hc-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:100000;opacity:0;visibility:hidden;transition:opacity .25s}
body.hc-nav-open .hc-drawer{transform:translateX(0)}
body.hc-nav-open .hc-backdrop{opacity:1;visibility:visible}
body.hc-nav-open{overflow:hidden}

/* Footer */
footer.site-footer.hc-footer{background:var(--hc-forest-2);color:var(--hc-cream)}
.hc-footer h5{color:var(--hc-honey)}
.hc-footer .hc-logo{margin-bottom:14px}
.hc-foot-brand p{font-size:13.5px;opacity:.75;max-width:300px;color:var(--hc-cream);margin-bottom:14px}
.hc-foot-chat{display:inline-flex;align-items:center;gap:6px;background:#25D366;color:#fff;font-weight:700;font-size:13px;padding:8px 14px;border-radius:8px}
.hc-foot-chat:hover{background:#1ebe5a}
.hc-footer .foot-bottom{border-top-color:rgba(246,236,217,.14)}

/* Store accents on existing wooden components */
body.store-handicraft .wh-eyebrow{color:var(--hc-honey)}
body.store-handicraft .wh-eyebrow::before,body.store-handicraft .wh-eyebrow::after{background:var(--hc-honey)}

/* Furniture header → store link */
.nav-actions a.nav-handicraft,.md-links a.nav-handicraft{color:var(--oak);font-weight:600}

@media(max-width:1100px){
  .hc-nav-inner{gap:22px;font-size:13.5px}
  .hc-action-label{display:none}
}
@media(max-width:900px){
  .hc-nav{display:none}
  .hc-burger{display:flex}
  .hc-main-inner{flex-wrap:wrap;gap:10px 12px;padding:10px 16px 12px}
  .hc-search{order:3;flex:1 0 100%;max-width:none}
  .hc-topstrip-inner{padding:0 16px}
}
@media(max-width:600px){
  .hc-topstrip-text{display:none}
  .hc-topstrip-inner{justify-content:center}
  .hc-logo-name{font-size:18px}
  .hc-logo-tag{font-size:9.5px;letter-spacing:.1em}
  .hc-logo-mark,.hc-logo-mark img{width:28px;height:34px}
  .hc-logo-img{height:34px}
  .hc-action{padding:8px}
  .hc-actions{gap:2px}
}
@media(max-width:380px){
  .hc-logo-name{font-size:16.5px}
  .hc-logo{gap:7px}
}

/* ---------- Vendor registration: "What do you sell?" (Handicraft Phase A) ---------- */
.vreg-type{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:26px}
.vreg-type-card{position:relative;display:block;cursor:pointer}
.vreg-type-card input{position:absolute;opacity:0;pointer-events:none}
.vreg-type-body{display:flex;flex-direction:column;gap:6px;height:100%;padding:16px 18px;border:2px solid var(--line-strong);border-radius:12px;background:#fff;transition:border-color .15s,box-shadow .15s}
.vreg-type-body strong{font-size:15.5px;color:var(--ink)}
.vreg-type-body small{font-size:13px;line-height:1.45;color:#6b5d50}
.vreg-type-icon{font-size:24px}
.vreg-type-card:hover .vreg-type-body{border-color:var(--oak)}
.vreg-type-card input:checked + .vreg-type-body{border-color:var(--accent);box-shadow:0 0 0 3px rgba(217,83,30,.14)}
.vreg-type-card input:focus-visible + .vreg-type-body{outline:2px solid var(--accent);outline-offset:2px}
body.store-handicraft .vreg-type-card input:checked + .vreg-type-body{border-color:var(--hc-honey-2);box-shadow:0 0 0 3px rgba(224,168,75,.22)}
.vreg-hero.vreg-hero-hc{background:linear-gradient(120deg,var(--hc-teak) 0%,var(--hc-forest) 100%)}
@media(max-width:640px){.vreg-type{grid-template-columns:1fr}}

/* ============================================================
   GRAIN HANDICRAFT — Phase B (Alibaba-style store experience)
   Scoped to .hc-* classes that only render on store pages.
   ============================================================ */

/* ---------- top strip: socials + TCS link ---------- */
.hc-strip-track{flex:0 0 auto;font-weight:700;color:var(--accent);white-space:nowrap}
.hc-strip-track:hover{text-decoration:underline}
.hc-socials{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto}
.hc-socials a{display:inline-grid;place-items:center;border-radius:50%;transition:transform .15s,background .15s}
.hc-socials a:hover{transform:translateY(-1px)}
.hc-socials svg{fill:currentColor;display:block}
.hc-socials-strip a{width:22px;height:22px;color:var(--hc-teak)}
.hc-socials-strip svg{width:15px;height:15px}
.hc-socials-footer{margin-top:14px;gap:10px}
.hc-socials-footer a{width:36px;height:36px;background:rgba(246,236,217,.1);color:var(--hc-cream)}
.hc-socials-footer a:hover{background:var(--hc-honey);color:var(--hc-teak-2)}
.hc-socials-footer svg{width:17px;height:17px}
.hc-socials-drawer{padding:10px 10px 0;gap:10px}
.hc-socials-drawer a{width:36px;height:36px;background:var(--hc-cream);color:var(--hc-teak)}
.hc-socials-drawer svg{width:17px;height:17px}

/* ---------- nav: prominent TCS tracking pill ---------- */
.hc-nav-inner > a.hc-nav-tcs{padding:6px 12px;margin:6px 0;border-radius:999px;background:var(--hc-honey);color:var(--hc-teak-2);border-bottom:0}
.hc-nav-inner > a.hc-nav-tcs:hover,.hc-nav-inner > a.hc-nav-tcs.is-active{background:#fff;color:var(--hc-teak-2);border-bottom:0}
.hc-drawer-links a.hc-drawer-tcs{background:#FEF3C7;color:#78350F;font-weight:700}
/* Shop ▾ dropdown now carries the full category list — two columns */
@media(min-width:901px){.hc-dd-panel{columns:2;column-gap:4px;min-width:440px}.hc-dd-panel a{break-inside:avoid}}

/* ---------- hero zone: category menu | slider | side ---------- */
.hc-hero-zone{background:linear-gradient(180deg,#F1E6D1 0%,#FAF5EC 100%);padding:18px 0 22px}
.hc-hero-grid{display:grid;grid-template-columns:250px minmax(0,1fr) 230px;gap:16px;align-items:stretch}
.hc-hero-main{min-width:0}
.hc-hero-slider .promo-slider{margin:0;height:100%;border-radius:14px}
.hc-hero-slider .promo-slide img{aspect-ratio:16/7}
.hc-hero-card.wooden-hero{border-radius:14px;height:100%;display:flex;align-items:center;justify-content:center}
.hc-hero-card .wooden-hero-inner{padding:40px 28px}
.hc-hero-card h1{font-size:clamp(26px,3.4vw,42px)}
.hc-hero-card p{margin-bottom:22px;font-size:15px}
.hc-hero-side{display:flex;flex-direction:column;gap:10px;min-width:0}
.hc-side-card{background:#fff;border:1px solid rgba(58,36,22,.1);border-radius:12px;padding:12px 14px;color:var(--ink);text-decoration:none}
.hc-side-welcome{display:flex;flex-direction:column;gap:6px;padding:16px}
.hc-side-welcome strong{font-family:'Fraunces',serif;font-size:16px;color:var(--hc-teak)}
.hc-side-welcome > span{font-size:12.5px;color:#78716c;margin-bottom:6px}
.hc-side-welcome .btn{width:100%;justify-content:center;text-align:center}
.hc-side-link{font-size:12.5px;color:var(--hc-forest);text-align:center;font-weight:600}
.hc-side-row{display:flex;align-items:center;gap:12px;transition:border-color .15s,transform .15s}
.hc-side-row:hover{border-color:var(--hc-honey);transform:translateX(2px)}
.hc-side-row > span:first-child{font-size:22px}
.hc-side-row strong{display:block;font-size:13.5px}
.hc-side-row small{display:block;font-size:12px;color:#78716c}

/* ---------- category menu (Alibaba-style) ---------- */
.hc-catmenu{position:relative;background:#fff;border:1px solid rgba(58,36,22,.1);border-radius:12px;min-width:0;z-index:20}
.hc-catmenu-head{display:flex;justify-content:space-between;align-items:center;width:100%;padding:12px 16px;background:var(--hc-teak);color:#fff;border:0;border-radius:12px 12px 0 0;font-family:'Archivo';font-weight:700;font-size:14px;cursor:default}
.hc-catmenu-caret{display:none}
.hc-catmenu-list{list-style:none;margin:0;padding:6px 0;max-height:430px;overflow-y:auto}
.hc-catmenu-row{display:flex;align-items:center}
.hc-catmenu-row > a{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:7px 14px;color:var(--ink);font-size:13.5px;font-weight:500;text-decoration:none}
.hc-catmenu-ico{width:22px;text-align:center;flex:0 0 auto}
.hc-catmenu-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-catmenu-toggle{background:0;border:0;color:#a8a29e;padding:7px 12px;cursor:pointer;font-size:12px}
.hc-catmenu-item:hover > .hc-catmenu-row,.hc-catmenu-item.expanded > .hc-catmenu-row{background:var(--hc-cream)}
.hc-catmenu-item:hover .hc-catmenu-name{color:var(--hc-teak)}
.hc-catmenu-all .hc-catmenu-row > a{font-weight:700;color:var(--hc-forest)}
.hc-catmenu-fly{display:none}
@media(min-width:1101px){
  .hc-catmenu-list{overflow:visible;max-height:none}
  .hc-catmenu-toggle{pointer-events:none}
  .hc-catmenu-item.has-sub:hover > .hc-catmenu-fly{display:block;position:absolute;left:100%;top:0;min-height:100%;width:min(620px,60vw);background:#fff;border:1px solid rgba(58,36,22,.12);border-radius:0 12px 12px 0;box-shadow:12px 12px 36px rgba(0,0,0,.14);padding:18px 22px;z-index:30}
  .hc-catmenu-fly-head a{font-family:'Fraunces',serif;font-weight:700;font-size:17px;color:var(--hc-teak)}
  .hc-catmenu-fly-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 18px;margin-top:12px}
  .hc-catmenu-fly-grid a{padding:6px 0;font-size:13.5px;color:#44403c;border-bottom:1px dashed rgba(58,36,22,.1)}
  .hc-catmenu-fly-grid a:hover{color:var(--accent)}
}

/* ---------- promo tiles ---------- */
.hc-promo-tiles{display:grid;gap:14px;margin-bottom:34px}
.hc-promo-1{grid-template-columns:1fr}
.hc-promo-2{grid-template-columns:1fr 1fr}
.hc-promo-3{grid-template-columns:repeat(3,1fr)}
.hc-promo-tile{position:relative;display:block;border-radius:14px;overflow:hidden;background:var(--hc-cream);min-width:0}
.hc-promo-tile img{display:block;width:100%;aspect-ratio:2/1;object-fit:cover;transition:transform .35s}
.hc-promo-tile:hover img{transform:scale(1.04)}
.hc-promo-copy{position:absolute;inset:auto 0 0 0;padding:16px 18px;background:linear-gradient(0deg,rgba(26,19,14,.8),transparent);color:#fff;display:flex;flex-direction:column;gap:2px}
.hc-promo-copy strong{font-family:'Fraunces',serif;font-size:19px;line-height:1.2}
.hc-promo-copy span{font-size:13px;opacity:.88}
.hc-promo-copy em{font-style:normal;font-weight:700;font-size:13px;color:var(--hc-honey);margin-top:2px}

/* ---------- category tiles ---------- */
.hc-cat-tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.hc-cat-tile{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:14px 10px 12px;background:#fff;border:1px solid rgba(58,36,22,.1);border-radius:14px;color:var(--ink);text-decoration:none;transition:border-color .15s,transform .15s,box-shadow .15s;min-width:0}
.hc-cat-tile:hover{border-color:var(--hc-honey);transform:translateY(-2px);box-shadow:0 10px 24px rgba(58,36,22,.1)}
.hc-cat-tile-media{width:84px;height:84px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:radial-gradient(circle at 30% 30%,#FFF7E6,#F1E0C0)}
.hc-cat-tile-media img{width:100%;height:100%;object-fit:cover}
.hc-cat-tile-ico{font-size:38px}
.hc-cat-tile strong{font-size:13.5px;line-height:1.25;max-width:100%;overflow-wrap:anywhere}
.hc-cat-tile small{font-size:11.5px;color:#a8a29e}

/* ---------- flash deals ---------- */
.hc-flash{background:linear-gradient(135deg,#FFF1E6 0%,#FFF9F2 100%);border:1px solid #FBD5B5;border-radius:18px;padding:22px 22px 8px}
.hc-flash-head{flex-wrap:wrap;gap:12px}
.hc-countdown{display:inline-flex;align-items:center;gap:4px;font-family:'JetBrains Mono',monospace;margin-left:auto;margin-right:18px}
.hc-countdown span{font-family:'Archivo';font-size:12.5px;font-weight:600;color:#9a3412;margin-right:6px}
.hc-countdown b{min-width:34px;padding:6px 0;text-align:center;border-radius:7px;background:var(--accent);color:#fff;font-size:15px}
.hc-countdown i{font-style:normal;font-weight:700;color:var(--accent)}

/* ---------- top stores ---------- */
.hc-stores{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.hc-store{display:flex;align-items:center;gap:12px;padding:14px;background:#fff;border:1px solid rgba(58,36,22,.1);border-radius:14px;color:var(--ink);text-decoration:none;transition:border-color .15s,box-shadow .15s;min-width:0}
.hc-store:hover{border-color:var(--hc-honey);box-shadow:0 10px 24px rgba(58,36,22,.08)}
.hc-store-logo{flex:0 0 52px;width:52px;height:52px;border-radius:12px;overflow:hidden;display:grid;place-items:center;background:var(--hc-forest);color:#fff;font-family:'Fraunces',serif;font-weight:700;font-size:22px}
.hc-store-logo img{width:100%;height:100%;object-fit:cover}
.hc-store-body{display:flex;flex-direction:column;min-width:0;flex:1}
.hc-store-body strong{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-store-body small{font-size:12px;color:#78716c}
.hc-store-body em{font-style:normal;font-size:12px;color:var(--hc-forest);font-weight:600}
.hc-store-cta{font-size:12.5px;font-weight:700;color:var(--accent);white-space:nowrap}

/* ---------- shop by price ---------- */
.hc-price-bands{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.hc-price-band{display:flex;flex-direction:column;gap:2px;padding:18px 16px;border-radius:14px;background:linear-gradient(135deg,var(--hc-forest) 0%,#3d5e4a 100%);color:#fff;text-decoration:none;transition:transform .15s}
.hc-price-band:nth-child(even){background:linear-gradient(135deg,var(--hc-teak) 0%,#5a3a25 100%)}
.hc-price-band:hover{transform:translateY(-2px)}
.hc-price-band strong{font-family:'Fraunces',serif;font-size:17px}
.hc-price-band small{font-size:12px;color:var(--hc-honey)}

/* ---------- listing: store chip + price chips ---------- */
.hc-store-chip{display:flex;align-items:center;gap:12px;padding:10px 14px;margin-bottom:14px;background:#fff;border:1px solid var(--hc-honey);border-radius:12px}
.hc-store-chip-logo{width:40px;height:40px;border-radius:10px;overflow:hidden;display:grid;place-items:center;background:var(--hc-cream);font-size:20px;flex:0 0 auto}
.hc-store-chip-logo img{width:100%;height:100%;object-fit:cover}
.hc-store-chip small{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#a8a29e}
.hc-store-chip strong{font-size:15px}
.hc-store-chip-x{margin-left:auto;color:#78716c;padding:4px 8px}
.hc-price-chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.hc-price-chips > span{font-size:12.5px;font-weight:600;color:#78716c}
.hc-price-chips a{padding:6px 12px;border-radius:999px;border:1px solid var(--line-strong);font-size:12.5px;color:var(--walnut);background:#fff;white-space:nowrap}
.hc-price-chips a:hover,.hc-price-chips a.on{border-color:var(--hc-honey-2);background:#FEF3C7;color:#78350F;font-weight:600}

/* ---------- responsive ---------- */
@media(max-width:1280px){.hc-hero-grid{grid-template-columns:240px minmax(0,1fr)}.hc-hero-side{display:none}}
@media(max-width:1100px){
  .hc-hero-grid{grid-template-columns:1fr}
  .hc-catmenu-head{cursor:pointer;border-radius:12px}
  .hc-catmenu.open .hc-catmenu-head{border-radius:12px 12px 0 0}
  .hc-catmenu-caret{display:inline}
  .hc-catmenu-list{display:none;max-height:none}
  .hc-catmenu.open .hc-catmenu-list{display:block}
  .hc-catmenu.open .hc-catmenu-caret{transform:rotate(180deg)}
  .hc-catmenu-item.expanded > .hc-catmenu-fly{display:block;padding:4px 14px 10px 46px}
  .hc-catmenu-item.expanded .hc-catmenu-toggle{transform:rotate(90deg)}
  .hc-catmenu-fly-head{display:none}
  .hc-catmenu-fly-grid{display:flex;flex-direction:column}
  .hc-catmenu-fly-grid a{padding:6px 0;font-size:13.5px;color:#57534e}
  .hc-cat-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
  .hc-stores{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hc-price-bands{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:700px){
  .hc-hero-zone{padding:12px 0 16px}
  .hc-hero-grid{padding-left:16px;padding-right:16px;gap:12px}
  .hc-hero-card .wooden-hero-inner{padding:28px 16px}
  .hc-promo-2,.hc-promo-3{grid-template-columns:1fr}
  .hc-cat-tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .hc-cat-tile{padding:12px 6px 10px}
  .hc-cat-tile-media{width:60px;height:60px}
  .hc-cat-tile-ico{font-size:28px}
  .hc-cat-tile strong{font-size:12px}
  .hc-flash{padding:16px 12px 4px;border-radius:14px}
  .hc-countdown{margin:0;order:3;width:100%}
  .hc-stores{grid-template-columns:1fr}
  .hc-price-bands{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hc-strip-track{font-size:11.5px}
}
@media(max-width:600px){
  .hc-topstrip .hc-socials-strip{display:none}
  .hc-topstrip-inner{justify-content:space-between}
}

.hc-show-sm{display:none}
@media(max-width:600px){.hc-hide-sm{display:none}.hc-show-sm{display:inline}}

/* "Buy Furniture" → grainhouse.com.pk (handicraft domain only) */
.hc-buy-furniture{flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;padding:3px 11px;border-radius:999px;background:var(--hc-forest);color:#fff;font-weight:700;white-space:nowrap;line-height:1.4}
.hc-buy-furniture:hover{background:var(--hc-teak);color:#fff}
.hc-nav-inner > a.hc-nav-furniture{font-weight:700;opacity:1}
@media(max-width:600px){.hc-buy-furniture{padding:2px 9px;font-size:11.5px}}

/* hero zone sizing: 12 categories on desktop (all on mobile / in Shop ▾),
   and the slider fills the full column height beside the menu */
@media(min-width:1101px){
  .hc-catmenu-item.hc-catmenu-extra{display:none}
  .hc-hero-slider,.hc-hero-slider .promo-slider,.hc-hero-slider .promo-track,.hc-hero-slider .promo-slide,.hc-hero-slider .promo-link{height:100%}
  .hc-hero-slider .promo-slide img{aspect-ratio:auto;height:100%;min-height:340px;object-fit:cover}
  .hc-catmenu-row > a{padding:6px 14px}
}

/* Store hero slider on phones: linked slides wrap img + text in .promo-link,
   so apply the stacked (text above image) order there too, and leave room
   under the button for the dots. Scoped to the store hero only. */
@media(max-width:700px){
  .hc-hero-slider .promo-link{display:flex;flex-direction:column}
  .hc-hero-slider .promo-overlay{padding-bottom:34px}
  .hc-hero-slider .promo-slide img{aspect-ratio:16/9}
}
/* Store hero: slide text is always light on the dark overlay (the global
   h3 colour is walnut), and dots keep their size on phones. */
.hc-hero-slider .promo-overlay h3,.hc-hero-slider .promo-overlay p{color:#fff}
.hc-hero-slider .promo-dot{min-height:0;min-width:0;height:9px;flex:0 0 auto}
.hc-promo-copy strong,.hc-promo-copy span{color:#fff}

/* ============================================================
   GRAIN HANDICRAFT — Phase C: B2B (wholesale/quotes) + C2B (RFQ)
   ============================================================ */

/* ---------- product page B2B block ---------- */
.pd-b2b{border:1px solid #E7C98B;background:linear-gradient(180deg,#FFFBF2 0%,#fff 100%);border-radius:14px;padding:14px 16px;margin:0 0 16px}
.pd-b2b-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.pd-mode-badge{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border-radius:999px;font-size:12.5px;font-weight:700}
.pd-mode-badge.is-both{background:#ECFDF5;color:#065F46}
.pd-mode-badge.is-b2b{background:#FEF3C7;color:#78350F}
.pd-b2b-moq{font-size:12.5px;font-weight:600;color:#78716c}
.pd-b2b-tiers{width:100%;border-collapse:collapse;font-size:13.5px;margin-bottom:8px}
.pd-b2b-tiers th{text-align:left;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#a8a29e;padding:4px 8px}
.pd-b2b-tiers td{padding:8px;border-top:1px dashed rgba(58,36,22,.12)}
.pd-b2b-tiers tr.is-active td{background:#FEF3C7;font-weight:600}
.pd-b2b-save{margin-left:8px;font-size:11.5px;font-weight:700;color:#15803d;background:#DCFCE7;padding:1px 6px;border-radius:999px}
.pd-b2b-note{font-size:12px;color:#78716c;margin:0 0 6px}
.pd-b2b-live{font-size:13.5px;margin:4px 0 10px;padding:8px 10px;background:#F0FDF4;border-radius:8px;color:#14532d}
.pd-quote summary{cursor:pointer;font-size:13.5px;color:var(--hc-forest);padding:6px 0;list-style:none}
.pd-quote summary::-webkit-details-marker{display:none}
.pd-quote summary strong{text-decoration:underline;text-underline-offset:3px}
.pd-quote[open] summary{margin-bottom:8px}
.pd-quote-form{display:flex;flex-direction:column;gap:10px}
.pd-quote-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pd-quote-grid label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;font-weight:600;color:#57534e;min-width:0}
.pd-quote-grid input,.pd-quote-grid textarea{border:1px solid var(--line-strong);border-radius:8px;padding:9px 10px;font-family:'Archivo';font-size:14px;background:#fff;width:100%;min-width:0}
.pd-quote-span{grid-column:1/-1}
.pd-quote-help{font-size:12px;color:#78716c;margin:0}

/* ---------- product cards + cart ---------- */
.pcard-b2b{position:absolute;left:8px;bottom:8px;z-index:2;padding:3px 8px;border-radius:999px;background:rgba(58,36,22,.88);color:#FDE68A;font-size:11px;font-weight:700;white-space:nowrap}
.cart-item-wholesale{font-size:12px;font-weight:600;color:#065F46;margin-top:2px}

/* ---------- automatic bulk discount (8+ = 15% off each) ---------- */
.pd-bulk{margin:0 0 14px;padding:12px 14px;border:1.5px dashed #F59E0B;border-radius:10px;background:#FFFBEB;transition:border-color .2s,background .2s}
.pd-bulk.is-active{border-style:solid;border-color:#16A34A;background:#F0FDF4}
.pd-bulk-hint{display:flex;gap:10px;align-items:flex-start;color:#78350F;line-height:1.35}
.pd-bulk-hint strong{display:block;font-size:15px}
.pd-bulk-hint small{display:block;font-size:12px;color:#92400E;margin-top:2px}
.pd-bulk-icon{font-size:20px;line-height:1}
.pd-bulk-live{margin:8px 0 0;font-size:13.5px;color:#3a2416;overflow-wrap:anywhere}
.pd-bulk.is-active .pd-bulk-live{color:#14532d}
.pd-bulk-live s{color:#9a8a7c;font-size:12px;margin-left:4px}
.cart-item-bulk{font-size:12px;font-weight:700;color:#15803D;margin-top:2px}
.cart-item-bulk-hint{font-size:12px;color:#B45309;margin-top:2px}
.cart-summary-bulk strong,.checkout-summary-bulk strong{color:#15803D}
.checkout-bulk-note{display:block;font-size:11.5px;font-weight:600;color:#15803D;margin-top:2px}
.checkout-bulk-note s{color:#9a8a7c;font-weight:400}

/* ---------- listing mode tabs ---------- */
.hc-mode-tabs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.hc-mode-tabs a{padding:8px 14px;border-radius:10px;border:1px solid var(--line-strong);background:#fff;font-size:13px;font-weight:600;color:var(--walnut);white-space:nowrap}
.hc-mode-tabs a.on{background:var(--hc-teak);border-color:var(--hc-teak);color:#fff}
.hc-mode-tabs a.hc-mode-rfq{margin-left:auto;border:0;background:none;color:var(--accent);padding:8px 4px}

/* ---------- home: B2B row + RFQ band ---------- */
.hc-b2b-section{background:#FFFBF2;border:1px solid #F3DDAE;border-radius:18px;padding:22px 22px 8px}
.hc-rfq-band{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin:10px 0 44px;padding:26px 28px;border-radius:18px;color:#fff;background:linear-gradient(120deg,var(--hc-forest) 0%,#1f3a2c 60%,var(--hc-teak) 100%)}
.hc-rfq-band h2{color:#fff;margin:4px 0 6px}
.hc-rfq-band p{color:rgba(246,236,217,.85);max-width:620px;margin:0;font-size:14.5px}
.hc-rfq-band-k{font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--hc-honey)}
.hc-rfq-band-cta{display:flex;flex-direction:column;align-items:center;gap:8px}
.hc-rfq-band-link{font-size:13px;color:var(--hc-honey);text-decoration:underline}

/* ---------- trade pages (quote / RFQ / my requests) ---------- */
.hc-trade-wrap{max-width:860px;padding:32px 28px 72px;display:flex;flex-direction:column;gap:16px}
.hc-trade-card{background:#fff;border:1px solid rgba(58,36,22,.12);border-radius:14px;padding:18px 20px}
.hc-trade-item{display:flex;gap:14px;align-items:center}
.hc-trade-item > div{display:flex;flex-direction:column;gap:2px;min-width:0}
.hc-trade-item strong{font-size:16px}
.hc-trade-item span{font-size:13px;color:#78716c}
.hc-trade-item a{font-size:13px;font-weight:600;color:var(--accent)}
.hc-trade-thumb{width:72px;height:72px;border-radius:10px;object-fit:cover;flex:0 0 auto}
.hc-trade-dl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:14px 0 0}
.hc-trade-dl dt{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#a8a29e}
.hc-trade-dl dd{margin:2px 0 0;font-weight:600;font-size:14px}
.hc-trade-note{margin:12px 0 0;font-size:14px;color:#44403c}
.hc-trade-foot{font-size:13px;color:#78716c}
.hc-trade-foot a{color:var(--hc-forest);font-weight:600}
.hc-trade-empty{color:#78716c;font-size:14px}
.hc-trade-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:6px 0}
.hc-trade-h2{font-size:18px;margin:22px 0 10px}
.hc-flash-ok{padding:12px 16px;border-radius:12px;background:#ECFDF5;border:1px solid #6EE7B7;color:#064E3B;font-size:14px}
.hc-flash-ok a{font-weight:700;text-decoration:underline;margin-left:4px}
.hc-pill{display:inline-block;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;background:#F5F5F4;color:#57534e;white-space:nowrap}
.hc-pill.ok{background:#DCFCE7;color:#166534}
.hc-pill.wait{background:#FEF3C7;color:#92400E}
.hc-quote-result{border-color:#86EFAC;background:linear-gradient(180deg,#F0FDF4,#fff)}
.hc-quote-price{display:flex;flex-direction:column;gap:2px;margin-bottom:6px}
.hc-quote-price span{font-size:12.5px;font-weight:600;color:#166534}
.hc-quote-price strong{font-family:'Fraunces',serif;font-size:30px;color:var(--hc-teak)}
.hc-quote-price strong small{font-size:14px;font-family:'Archivo'}
.hc-quote-price em{font-style:normal;font-size:14px;color:#44403c}
.hc-quote-result .btn{margin-top:14px}
.hc-req-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;margin-bottom:8px;background:#fff;border:1px solid rgba(58,36,22,.12);border-radius:12px;color:var(--ink)}
.hc-req-row:hover{border-color:var(--hc-honey)}
.hc-req-row > span:first-child{display:flex;flex-direction:column;min-width:0}
.hc-req-row small{font-size:12.5px;color:#78716c}

/* RFQ offers */
.hc-offer{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px 18px;align-items:center;padding:16px 18px;background:#fff;border:1px solid rgba(58,36,22,.12);border-radius:14px}
.hc-offer.is-accepted{border-color:#4ADE80;background:#F0FDF4}
.hc-offer.is-declined{opacity:.6}
.hc-offer-seller{display:flex;flex-direction:column;gap:2px;min-width:0}
.hc-offer-seller strong{font-size:15.5px}
.hc-offer-seller span{font-size:12.5px;color:#78716c}
.hc-offer-seller a{font-size:12.5px;font-weight:600;color:var(--accent)}
.hc-offer-price{display:flex;flex-direction:column;text-align:right}
.hc-offer-price strong{font-family:'Fraunces',serif;font-size:22px;color:var(--hc-teak)}
.hc-offer-price strong small{font-family:'Archivo';font-size:12px}
.hc-offer-price span{font-size:12.5px;color:#57534e}
.hc-offer-msg{grid-column:1/-1;margin:4px 0 0;font-size:13.5px;color:#44403c;background:#FAFAF9;padding:8px 10px;border-radius:8px}

/* RFQ board */
.hc-rfq-steps{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.hc-rfq-steps span{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:rgba(246,236,217,.12);color:#fff;font-size:13px;font-weight:600}
.hc-rfq-steps b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--hc-honey);color:var(--hc-teak-2);font-size:12px}
.hc-rfq-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:24px;padding:32px 28px 72px;align-items:start}
.hc-rfq-form-card h2{margin-bottom:14px}
.hc-qty-unit{display:flex;gap:8px}
.hc-qty-unit input{flex:1;min-width:0}
.hc-qty-unit select{width:auto;flex:0 0 auto}
.hc-rfq-feed{display:flex;flex-direction:column;gap:10px;position:sticky;top:120px}
.hc-rfq-feed-head{display:flex;align-items:baseline;justify-content:space-between}
.hc-rfq-feed-head h2{font-size:19px;margin:0}
.hc-rfq-feed-head span{font-size:12.5px;font-weight:700;color:var(--accent)}
.hc-rfq-card{display:flex;flex-direction:column;gap:4px;padding:12px 14px;background:#fff;border:1px solid rgba(58,36,22,.12);border-radius:12px}
.hc-rfq-card strong{font-size:14px;line-height:1.35}
.hc-rfq-meta{font-size:12.5px;color:#57534e}
.hc-rfq-foot{display:flex;justify-content:space-between;font-size:12px;color:#a8a29e}
.hc-rfq-foot em{font-style:normal}
.hc-rfq-foot b{color:var(--hc-forest)}
.hc-rfq-seller-cta{display:flex;flex-direction:column;gap:2px;padding:14px;border-radius:12px;background:var(--hc-cream);font-size:13px}
.hc-rfq-seller-cta a{font-weight:700;color:var(--accent)}

@media(max-width:900px){
  .hc-rfq-grid{grid-template-columns:1fr;padding:24px 16px 56px}
  .hc-rfq-feed{position:static}
  .hc-trade-dl{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .pd-quote-grid{grid-template-columns:1fr}
  .hc-trade-wrap{padding:22px 16px 56px}
  .hc-offer{grid-template-columns:1fr}
  .hc-offer-price{text-align:left}
  .hc-rfq-band{padding:20px 18px}
  .hc-rfq-band-cta{align-items:flex-start}
  .hc-mode-tabs a.hc-mode-rfq{margin-left:0}
  .hc-b2b-section{padding:16px 12px 4px}
  .hc-req-row{flex-direction:column;align-items:flex-start}
}
/* store hero copy is light on the dark teak/forest hero (global p is walnut) */
.vreg-hero-hc p{color:rgba(246,236,217,.88)}
.vreg-hero-hc h1{color:#fff}
.hc-btn-outline{background:#fff;border:1px solid var(--line-strong);color:var(--walnut);padding:9px 16px;border-radius:9px;font-family:'Archivo';font-weight:600;font-size:13.5px;cursor:pointer}
.hc-btn-outline:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- Clear customer vs vendor login (header + login pages) ---------- */
.nav-menu-heading{display:block;padding:6px 12px 2px;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#a8a29e}
.nav-more-menu.nav-more-menu-right{right:0;left:auto}
.hc-action-sell{border:1px solid rgba(246,236,217,.3)}
.hc-login-other{display:flex;flex-direction:column;gap:6px;margin-top:16px;background:#FFFBF2;border:1px solid #F3DDAE}
.hc-login-other.is-hint{border-color:var(--accent);box-shadow:0 0 0 3px rgba(217,83,30,.14)}
.hc-login-other span{font-size:13.5px;color:#57534e}
.hc-login-other-links{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:6px}
.hc-login-other-links a:not(.btn){font-weight:600;color:var(--hc-forest);font-size:13.5px}
.hc-account-notice{margin:0 0 14px;padding:10px 14px;border-radius:10px;background:#FEF3C7;border:1px solid #FCD34D;color:#78350F;font-size:13.5px}

/* ---------- Marketplace offers: "Also sold by N other sellers" ---------- */
.pd-offers{border:1px solid rgba(58,36,22,.14);border-radius:14px;background:#fff;padding:12px 14px;margin:0 0 16px}
.pd-offers-head{display:flex;flex-direction:column;margin-bottom:6px}
.pd-offers-head strong{font-size:14.5px}
.pd-offers-head span{font-size:12.5px;color:#78716c}
.pd-offer-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:9px 0;border-top:1px dashed rgba(58,36,22,.12);color:var(--ink)}
.pd-offer-row:hover .pd-offer-go{text-decoration:underline}
.pd-offer-seller{display:flex;flex-direction:column;min-width:0}
.pd-offer-seller strong{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pd-offer-seller small{font-size:12px;color:#78716c}
.pd-offer-price{font-weight:700;white-space:nowrap}
.pd-offer-price s{font-weight:400;color:#a8a29e;margin-right:4px;font-size:12px}
.pd-offer-go{font-size:12.5px;font-weight:700;color:var(--accent);white-space:nowrap}

/* header account menus never wrap onto two lines */
.nav-actions .pill,.nav-actions .nav-more-trigger,.nav-actions .btn-login-sm{white-space:nowrap}

.nav-actions > a,.nav-actions .nav-mega-trigger{white-space:nowrap}
@media(max-width:1440px){.nav-actions{gap:14px}.nav{gap:22px}}

/* phones: seller login lives in the menu drawer (Vendors & sellers) — keep the header on one row */
@media(max-width:600px){.hc-actions .hc-action-sell{display:none}}

/* ============================================================
   GRAIN HANDICRAFT — AliExpress-style homepage + Today's Deals
   ============================================================ */
.ae-page{padding-top:18px;padding-bottom:10px}
.hc-nav-inner > a.hc-nav-deals{color:#FFD28A;font-weight:800}
.hc-nav-inner > a.hc-nav-deals:hover,.hc-nav-inner > a.hc-nav-deals.is-active{color:#fff;border-bottom-color:#FFD28A}
.hc-drawer-links a.hc-drawer-deals{background:#FFF1E6;color:#9a3412;font-weight:800}

/* section headers */
.ae-sec-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.ae-sec-head h2{font-size:clamp(19px,2.4vw,24px);margin:0}
.ae-sec-sub{font-size:13px;color:#78716c}
.ae-sec-head > a{margin-left:auto;font-size:13.5px;font-weight:700;color:var(--walnut);white-space:nowrap}
.ae-sec-head > a:hover{color:var(--accent)}

/* quick category icon strip */
.ae-icons{background:#fff;border-bottom:1px solid var(--line)}
.ae-icons-track{display:flex;gap:6px;overflow-x:auto;padding-top:14px;padding-bottom:12px;scrollbar-width:none;scroll-snap-type:x proximity}
.ae-icons-track::-webkit-scrollbar{display:none}
.ae-icon{flex:0 0 auto;width:84px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;color:var(--ink);scroll-snap-align:start}
.ae-icon span{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-size:26px;background:radial-gradient(circle at 30% 30%,#FFF7E6,#F1E0C0);transition:transform .15s}
.ae-icon:hover span{transform:translateY(-2px)}
.ae-icon small{font-size:11.5px;line-height:1.25;color:#44403c;max-width:84px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ae-icon-hot span{background:linear-gradient(135deg,#FF7A45,var(--accent));color:#fff}
.ae-icon-hot small{color:var(--accent);font-weight:800}

/* horizontal scroll rows */
.ae-hscroll{display:flex;gap:12px;overflow-x:auto;padding:2px 2px 10px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.ae-hscroll > .ae-card{flex:0 0 190px;scroll-snap-align:start}

/* ---------- AliExpress-style product card ---------- */
.ae-card{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:12px;overflow:hidden;color:var(--ink);text-decoration:none;border:1px solid transparent;transition:box-shadow .15s,border-color .15s;min-width:0}
.ae-card:hover{box-shadow:0 8px 24px rgba(58,36,22,.12);border-color:rgba(58,36,22,.08)}
.ae-card-media{position:relative;display:block;aspect-ratio:1/1;background:#F5EFE6;overflow:hidden}
.ae-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.ae-card:hover .ae-card-media img{transform:scale(1.04)}
.ae-off{position:absolute;top:8px;left:8px;background:var(--accent);color:#fff;font-weight:800;font-size:12px;padding:2px 7px;border-radius:6px}
.ae-rank{position:absolute;top:0;left:0;padding:4px 9px;border-radius:0 0 10px 0;font-weight:800;font-size:12.5px;color:#fff;background:#78716c}
.ae-rank-1{background:#D4A017}.ae-rank-2{background:#9CA3AF}.ae-rank-3{background:#B8733A}
.ae-rank ~ .ae-off{top:auto;bottom:8px}
.ae-tag{position:absolute;left:0;right:0;bottom:0;padding:4px 8px;font-size:11.5px;font-weight:700;color:#fff;background:linear-gradient(90deg,rgba(47,74,58,.92),rgba(47,74,58,.7));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ae-tag-b2b{background:linear-gradient(90deg,rgba(58,36,22,.9),rgba(58,36,22,.65))}
.ae-fav{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:#a8a29e;font-size:15px;cursor:pointer;display:grid;place-items:center}
.ae-fav.is-fav{color:#E11D48}
.ae-card-body{display:flex;flex-direction:column;gap:4px;padding:8px 10px 12px}
.ae-title{font-size:13.5px;line-height:1.35;color:#292524;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.ae-price-row{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.ae-price{font-family:'Archivo';font-weight:800;font-size:18px;color:#1c1917}
.ae-card.is-deal .ae-price{color:var(--accent)}
.ae-price small{font-size:12px;font-weight:700;margin-right:1px}
.ae-was{font-size:12px;color:#a8a29e}
.ae-meta{display:flex;align-items:center;gap:8px;font-size:12px;color:#57534e;min-height:16px}
.ae-stars{color:#B45309;font-weight:700}
.ae-sold{color:#78716c}
.ae-ends{font-size:11.5px;font-weight:700;color:#9a3412;background:#FFF1E6;border-radius:6px;padding:2px 6px;width:fit-content}
.ae-ends.is-ended{color:#78716c;background:#F5F5F4}
.ae-add{position:absolute;right:8px;bottom:10px;width:32px;height:32px;border-radius:50%;border:0;background:var(--hc-teak);color:#fff;font-size:14px;cursor:pointer;opacity:.9}
.ae-add:hover{opacity:1;background:var(--accent)}
.ae-card .ae-card-body{padding-right:44px}

/* ---------- Today's Deals block ---------- */
.ae-today{margin:6px 0 34px}
.ae-today-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}
.ae-today-head h2{margin:0;font-size:clamp(20px,2.6vw,26px)}
.ae-today-head a{font-weight:700;font-size:13.5px;color:var(--accent)}
.ae-today-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ae-today-grid.is-single{grid-template-columns:1fr}
.ae-today-box{border-radius:18px;padding:14px 14px 6px;min-width:0}
.ae-box-bundle{background:linear-gradient(160deg,#E9F3EC 0%,#F7FBF8 100%)}
.ae-box-super{background:linear-gradient(160deg,#FFE9DD 0%,#FFF8F3 100%)}
.ae-box-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px}
.ae-box-head strong{display:block;font-family:'Fraunces',serif;font-size:20px;color:var(--hc-teak)}
.ae-box-super .ae-box-head strong{color:#C2410C}
.ae-box-head span{font-size:12.5px;color:#57534e}
.ae-box-head a{font-weight:700;font-size:13px;color:var(--walnut);white-space:nowrap}
.ae-today-box .ae-hscroll > .ae-card{flex-basis:160px}

/* ---------- Flash Sale ---------- */
.ae-flash{margin:0 0 34px;padding:16px 16px 6px;border-radius:18px;background:linear-gradient(135deg,var(--hc-teak) 0%,#5a3a25 55%,var(--hc-forest) 100%)}
.ae-flash-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.ae-flash-head h2{margin:0;color:#fff;font-size:clamp(20px,2.6vw,26px)}
.ae-flash-head > a{margin-left:auto;color:#FFD28A;font-weight:700;font-size:13.5px}
.ae-countdown{display:inline-flex;align-items:center;gap:4px;font-family:'JetBrains Mono',monospace}
.ae-countdown span{font-family:'Archivo';font-size:12.5px;font-weight:600;color:rgba(255,255,255,.85);margin-right:4px}
.ae-countdown b{min-width:30px;padding:4px 0;text-align:center;border-radius:6px;background:#fff;color:var(--accent);font-size:14px}
.ae-countdown i{font-style:normal;font-weight:800;color:#fff}
.ae-countdown-light span{color:#44403c}
.ae-countdown-light b{background:var(--accent);color:#fff}
.ae-countdown-light i{color:var(--accent)}

/* ---------- More to love grid ---------- */
.ae-more{margin:10px 0 30px}
.ae-more-title{display:flex;align-items:center;gap:14px;justify-content:center;font-size:clamp(20px,2.6vw,26px);margin:0 0 16px}
.ae-more-title::before,.ae-more-title::after{content:'';flex:1;max-width:220px;height:1px;background:var(--line-strong)}
.ae-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.ae-more-actions{display:flex;justify-content:center;margin-top:18px}
.ae-load-more{padding:11px 34px;border-radius:999px;border:1px solid var(--line-strong);background:#fff;font-family:'Archivo';font-weight:700;font-size:14px;cursor:pointer;color:var(--walnut)}
.ae-load-more:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- Deals page ---------- */
.ae-deals-hero{padding:34px 0 30px;background:linear-gradient(120deg,#FFE9DD 0%,#FFF5EC 60%,#F6ECD9 100%);border-bottom:1px solid #FBD5B5}
.ae-deals-k{font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:#C2410C}
.ae-deals-hero h1{margin:6px 0 4px}
.ae-deals-hero p{margin:0 0 12px;color:#57534e}
.ae-tabs{display:flex;gap:8px;overflow-x:auto;margin:0 0 18px;padding-bottom:4px;scrollbar-width:none}
.ae-tabs::-webkit-scrollbar{display:none}
.ae-tabs a{flex:0 0 auto;padding:9px 16px;border-radius:999px;background:#fff;border:1px solid var(--line-strong);font-weight:700;font-size:13.5px;color:var(--walnut);white-space:nowrap}
.ae-tabs a span{margin-left:4px;font-size:12px;color:#a8a29e}
.ae-tabs a.on{background:var(--accent);border-color:var(--accent);color:#fff}
.ae-tabs a.on span{color:#FFE4D6}

@media(max-width:1200px){.ae-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:1024px){.ae-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.ae-today-grid{grid-template-columns:1fr}}
@media(max-width:760px){.ae-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){
  /* AliExpress-app-like: tight 2-col grid, compact cards, small scroll cards */
  .ae-page{padding-left:10px;padding-right:10px}
  .ae-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .ae-hscroll{gap:8px}
  .ae-hscroll > .ae-card,.ae-today-box .ae-hscroll > .ae-card{flex-basis:132px}
  .ae-card{border-radius:10px}
  .ae-card-body{padding:6px 8px 10px}
  .ae-card .ae-card-body{padding-right:8px}
  .ae-title{font-size:12.5px}
  .ae-price{font-size:15.5px}
  .ae-add{width:28px;height:28px;font-size:12px;top:calc(100% - 38px);bottom:auto}
  .ae-hscroll .ae-add{display:none}
  .ae-today-box,.ae-flash{padding:12px 10px 4px;border-radius:14px}
  .ae-box-head strong{font-size:17px}
  .ae-flash-head{gap:8px}
  .ae-flash-head > a{margin-left:0}
  .ae-icon{width:70px}
  .ae-icon span{width:48px;height:48px;font-size:22px}
  .ae-sec-head > a{margin-left:0}
}
@media(max-width:600px){.ae-add{top:auto;bottom:8px;right:6px;width:26px;height:26px;font-size:11px}.ae-grid .ae-card .ae-card-body{padding-right:34px}}

/* store nav has 12 items incl. Today's Deals — tighter spacing on laptop widths */
@media(max-width:1440px){.hc-nav-inner{gap:17px;font-size:13.5px}}
@media(max-width:1180px){.hc-nav-inner{gap:13px;font-size:13px}}

/* 901–1180px: drop nav items that are duplicated elsewhere (top strip / header icons / chat float) */
@media(max-width:1180px){.hc-nav-inner > a.hc-nav-parent,.hc-nav-inner > a.hc-nav-account,.hc-nav-inner > a.hc-nav-chat{display:none}}

/* ============================================================
   GRAIN HANDICRAFT — Final polish: category page · login popup · gallery
   ============================================================ */

/* ---------- Category page ---------- */
.hc-cat-hero{background:linear-gradient(180deg,#F3E7D2 0%,#FAF5EC 100%);border-bottom:1px solid rgba(58,36,22,.08);padding:22px 0 18px}
.hc-cat-title{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:6px 0 4px}
.hc-cat-title h1{margin:0;font-size:clamp(24px,3.2vw,36px);letter-spacing:-.015em}
.hc-cat-count{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.06em;color:#8a7a6c;background:#fff;border:1px solid rgba(58,36,22,.1);padding:3px 10px;border-radius:999px}
.hc-subchips{display:flex;gap:8px;overflow-x:auto;margin-top:12px;padding-bottom:2px;scrollbar-width:none}
.hc-subchips::-webkit-scrollbar{display:none}
.hc-subchips a{flex:0 0 auto;padding:7px 14px;border-radius:999px;background:#fff;border:1px solid rgba(58,36,22,.12);font-size:13px;font-weight:600;color:var(--walnut);transition:.15s}
.hc-subchips a:hover{border-color:var(--hc-honey)}
.hc-subchips a.is-on{background:var(--hc-teak);border-color:var(--hc-teak);color:#fff}

/* Same .container as the home page (lines up with the header + main menu) and
   the same 250px side column / 16px gap as the home hero. One side menu:
   Categories, then Filters + discover stacked underneath; products fill the rest. */
.hc-cat-shell{display:grid;grid-template-columns:250px minmax(0,1fr);grid-template-rows:auto 1fr;gap:16px;align-items:start;padding-top:22px;padding-bottom:56px}
.hc-cat-left{grid-column:1;grid-row:1;min-width:0}
.hc-cat-right{grid-column:1;grid-row:2;min-width:0}
.hc-cat-main{grid-column:2;grid-row:1 / span 2;min-width:0}
.hc-drawer-bar{display:none}
.hc-cat-mobilebar{display:none}
.hc-cat-backdrop{display:none}

/* left: category navigation */
/* (same card as the home page's .hc-catmenu: teak header bar, 12px radius) */
.hc-cnav{background:#fff;border:1px solid rgba(58,36,22,.1);border-radius:12px;overflow:hidden}
.hc-cnav-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 16px;background:var(--hc-teak)}
.hc-cnav-head span{font-family:'Archivo';font-weight:700;font-size:14px;color:#fff}
.hc-cnav-head a{font-size:12.5px;font-weight:600;color:var(--hc-honey);white-space:nowrap}
.hc-cnav-head a:hover,.hc-cnav-head a.is-on{color:#fff}
.hc-cnav-list,.hc-cnav-sub{list-style:none;margin:0;padding:0}
.hc-cnav-list{padding:6px 0}
.hc-cnav-row{display:flex;align-items:center;padding-right:6px;transition:background .15s}
.hc-cnav-row:hover{background:var(--hc-cream)}
.hc-cnav-row.is-current{background:var(--hc-cream);box-shadow:inset 3px 0 0 var(--hc-honey-2)}
.hc-cnav-row > a{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:7px 8px 7px 14px;color:var(--ink);font-size:13.5px;font-weight:500}
.hc-cnav-row.is-current > a{font-weight:700;color:var(--hc-teak)}
.hc-cnav-ico{width:22px;text-align:center;flex:0 0 auto}
.hc-cnav-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-cnav-count{font-size:11px;font-weight:700;color:#8a7a6c;background:#F5EFE6;border-radius:999px;padding:1px 7px}
.hc-cnav-toggle{border:0;background:none;color:#a8a29e;width:28px;height:28px;border-radius:8px;cursor:pointer;display:grid;place-items:center;transition:transform .2s,background .15s}
.hc-cnav-toggle:hover{background:#F1E6D4;color:var(--hc-teak)}
.hc-cnav-item.is-open .hc-cnav-toggle{transform:rotate(90deg);color:var(--hc-teak)}
.hc-cnav-sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease;overflow:hidden}
.hc-cnav-sub > li{min-height:0}
.hc-cnav-item.is-open .hc-cnav-sub{grid-template-rows:1fr}
.hc-cnav-sub{display:block;max-height:0;transition:max-height .3s ease}
.hc-cnav-item.is-open .hc-cnav-sub{max-height:600px}
.hc-cnav-sub a{display:block;padding:6px 14px 6px 46px;font-size:13px;color:#57534e;position:relative}
.hc-cnav-sub a::before{content:'';position:absolute;left:32px;top:50%;width:5px;height:5px;border-radius:50%;background:#d6c7ae;transform:translateY(-50%)}
.hc-cnav-sub a:hover{color:var(--hc-teak);background:var(--hc-cream)}
.hc-cnav-sub a.is-current{color:var(--accent);font-weight:700}
.hc-cnav-sub a.is-current::before{background:var(--accent)}

/* centre toolbar */
.hc-sortbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 12px}
.hc-sortbar > span{font-size:13px;color:#78716c;font-weight:600}
.hc-sortbar label{display:flex;align-items:center;gap:8px;font-size:13px;color:#57534e;font-weight:600}
.hc-sortbar select{border:1px solid rgba(58,36,22,.18);border-radius:10px;padding:8px 12px;background:#fff;font-family:'Archivo';font-size:13.5px;color:var(--walnut)}
.hc-pills{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.hc-pills a{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:#FFF4E1;border:1px solid #F0D4A0;color:#7c4a12;font-size:12.5px;font-weight:600}
.hc-pills a span{opacity:.6}
.hc-pills a:hover{border-color:var(--accent)}
.hc-pills a.hc-pills-clear{background:none;border-color:transparent;text-decoration:underline;color:#78716c}
.hc-cat-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.hc-cat-grid .ae-card{border:1px solid rgba(58,36,22,.07);border-radius:16px;transition:transform .2s ease,box-shadow .2s ease,border-color .2s}
.hc-cat-grid .ae-card:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(58,36,22,.12);border-color:rgba(224,168,75,.5)}
.hc-cat-pages.is-js{opacity:.75;font-size:12.5px}

/* side menu, under the categories: filters + discover (same cards as home's .hc-side-card) */
.hc-filter,.hc-disc{background:#fff;border:1px solid rgba(58,36,22,.1);border-radius:12px;padding:14px 16px;margin-bottom:16px;overflow:hidden}
.hc-filter-head{margin:-14px -16px 14px;padding:12px 16px;background:var(--hc-teak);color:#fff;font-family:'Archivo';font-weight:700;font-size:14px}
.hc-filter fieldset{border:0;margin:0 0 14px;padding:0 0 14px;border-bottom:1px solid rgba(58,36,22,.08);min-width:0}
.hc-filter fieldset:last-of-type{border-bottom:0;padding-bottom:0}
.hc-filter legend{font-family:'Archivo';font-size:13.5px;font-weight:700;color:var(--hc-teak);margin-bottom:8px;padding:0}
.hc-filter-price{display:flex;align-items:center;gap:8px}
.hc-filter-price input,.hc-filter select{width:100%;min-width:0;border:1px solid rgba(58,36,22,.16);border-radius:8px;padding:8px 10px;font-family:'Archivo';font-size:13.5px;background:#fff}
.hc-filter-price input:focus,.hc-filter select:focus{outline:0;border-color:var(--hc-honey-2)}
.hc-filter-quick{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.hc-filter-quick a{padding:4px 10px;border-radius:999px;border:1px solid rgba(58,36,22,.14);font-size:12px;color:#57534e}
.hc-filter-quick a.is-on,.hc-filter-quick a:hover{border-color:var(--hc-honey-2);background:#FFF4E1;color:#7c4a12}
.hc-radio,.hc-check{display:flex;align-items:center;gap:8px;font-size:13.5px;color:#3a2d24;padding:4px 0;cursor:pointer}
.hc-radio input,.hc-check input{accent-color:var(--hc-forest);width:16px;height:16px}
.hc-filter-actions{display:flex;align-items:center;gap:12px;margin-top:14px}
.hc-filter-actions .btn{flex:1;justify-content:center}
.hc-filter-actions a{font-size:13px;font-weight:600;color:#78716c;text-decoration:underline}
.hc-disc h3{font-family:'Fraunces',serif;font-size:16px;margin:0 0 10px;color:var(--hc-teak)}
.hc-disc-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid rgba(58,36,22,.06);color:var(--ink)}
.hc-disc-row:first-of-type{border-top:0}
.hc-disc-row img{width:46px;height:46px;border-radius:10px;object-fit:cover;flex:0 0 auto}
.hc-disc-row > span:last-child{display:flex;flex-direction:column;min-width:0}
.hc-disc-row strong{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-disc-row em{font-style:normal;font-size:12px;color:#57534e}
.hc-disc-row em s{color:#a8a29e;margin:0 2px}
.hc-disc-row em b{color:var(--accent)}
.hc-disc-row:hover strong{color:var(--accent)}
.hc-disc-rank{flex:0 0 22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:11.5px;font-weight:800;background:var(--hc-cream);color:var(--hc-teak)}
.hc-disc-more{display:inline-block;margin-top:8px;font-size:12.5px;font-weight:700;color:var(--accent)}
.hc-disc-store{display:flex;align-items:center;gap:10px;padding:7px 0;color:var(--ink)}
.hc-disc-logo{width:38px;height:38px;border-radius:12px;overflow:hidden;display:grid;place-items:center;background:var(--hc-forest);color:#fff;font-weight:800;flex:0 0 auto}
.hc-disc-logo img{width:100%;height:100%;object-fit:cover}
.hc-disc-store > span:last-child{display:flex;flex-direction:column;min-width:0}
.hc-disc-store strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-disc-store em{font-style:normal;font-size:12px;color:#78716c}

@media(max-width:1280px){
  .hc-cat-shell{grid-template-columns:240px minmax(0,1fr)}
  .hc-cat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* Tablet + phone: the side menu becomes two drawers — Categories (left) and
   Filters (right) — opened from the bar above the products. */
@media(max-width:900px){
  .hc-cat-shell{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;padding-top:14px}
  .hc-cat-main{grid-column:1;grid-row:auto}
  .hc-cat-left,.hc-cat-right{position:fixed;top:0;bottom:0;z-index:100001;background:#FAF5EC;overflow-y:auto;overscroll-behavior:contain;transition:transform .28s ease}
  .hc-cat-left{left:0;width:min(320px,88vw);padding:0 12px 20px;transform:translateX(-105%);box-shadow:18px 0 40px rgba(0,0,0,.18)}
  .hc-cat-right{right:0;width:min(340px,90vw);padding:0 14px 20px;transform:translateX(105%);box-shadow:-18px 0 40px rgba(0,0,0,.18)}
  body.hc-open-hcCatDrawer .hc-cat-left,body.hc-open-hcFilterDrawer .hc-cat-right{transform:none}
  .hc-filter-head{display:none}
  .hc-drawer-bar{display:flex;position:sticky;top:0;z-index:2;align-items:center;justify-content:space-between;padding:14px 4px 10px;background:#FAF5EC}
  .hc-drawer-bar strong{font-family:'Fraunces',serif;font-size:18px;color:var(--hc-teak)}
  .hc-drawer-bar button{border:0;background:#fff;width:34px;height:34px;border-radius:50%;font-size:20px;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.08)}
  .hc-cat-backdrop{display:block;position:fixed;inset:0;background:rgba(26,19,14,.45);z-index:100000;opacity:0;visibility:hidden;transition:opacity .25s}
  body.hc-open-hcFilterDrawer .hc-cat-backdrop,body.hc-open-hcCatDrawer .hc-cat-backdrop{opacity:1;visibility:visible}
  body.hc-open-hcFilterDrawer,body.hc-open-hcCatDrawer{overflow:hidden}
  .hc-cat-mobilebar{display:flex;gap:10px;margin:0 0 12px;position:sticky;top:112px;z-index:5;background:#FAF5EC;padding:6px 0}
  .hc-cat-mobilebar button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 12px;border-radius:12px;border:1px solid rgba(58,36,22,.14);background:#fff;font-family:'Archivo';font-weight:700;font-size:14px;color:var(--walnut);cursor:pointer}
  .hc-cat-mobilebar button:hover{border-color:var(--hc-honey)}
  .hc-cat-mobilebar b{background:var(--accent);color:#fff;border-radius:999px;font-size:11px;padding:1px 7px}
  .hc-cat-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
}
@media(max-width:600px){
  .hc-cat-hero{padding:14px 0 12px}
  .hc-cat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .hc-cat-mobilebar{top:108px}
  .hc-sortbar{flex-wrap:wrap}
  .hc-cat-grid .ae-card:hover{transform:none}
}

/* ---------- Login | Register popup ---------- */
.hc-auth{position:fixed;inset:0;z-index:100010;display:grid;place-items:center;padding:20px}
.hc-auth[hidden]{display:none}
.hc-auth-backdrop{position:absolute;inset:0;background:rgba(26,19,14,.5);backdrop-filter:blur(3px);opacity:0;transition:opacity .22s ease}
.hc-auth-sheet{position:relative;width:min(420px,100%);max-height:calc(100vh - 40px);overflow-y:auto;background:#FFFCF7;border-radius:22px;box-shadow:0 30px 80px rgba(0,0,0,.28);padding:24px 24px 20px;transform:translateY(14px) scale(.97);opacity:0;transition:transform .24s cubic-bezier(.2,.8,.2,1),opacity .22s ease}
.hc-auth.is-open .hc-auth-backdrop{opacity:1}
.hc-auth.is-open .hc-auth-sheet{transform:none;opacity:1}
.hc-auth-x{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;border:0;background:#F3EADB;font-size:20px;cursor:pointer;color:var(--hc-teak)}
.hc-auth-brand{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.hc-auth-brand > span{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;font-size:22px;background:linear-gradient(135deg,var(--hc-teak),var(--hc-forest))}
.hc-auth-brand strong{display:block;font-family:'Fraunces',serif;font-size:19px;color:var(--hc-teak)}
.hc-auth-brand small{font-size:12px;color:#8a7a6c}
.hc-auth-tabs{display:grid;grid-template-columns:1fr 1fr;background:#F3EADB;border-radius:12px;padding:4px;margin-bottom:16px}
.hc-auth-tabs button{border:0;background:none;padding:9px;border-radius:9px;font-family:'Archivo';font-weight:700;font-size:14px;color:#8a7a6c;cursor:pointer;transition:background .15s,color .15s}
.hc-auth-tabs button[aria-selected="true"]{background:#fff;color:var(--hc-teak);box-shadow:0 2px 8px rgba(58,36,22,.1)}
.hc-auth-form{display:flex;flex-direction:column;gap:12px}
.hc-auth-form[hidden]{display:none}
.hc-auth-form label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;font-weight:700;color:#57534e;min-width:0}
.hc-auth-form label small{font-weight:500;color:#a8a29e}
.hc-auth-form input{border:1px solid rgba(58,36,22,.18);border-radius:11px;padding:11px 12px;font-family:'Archivo';font-size:15px;background:#fff;width:100%;min-width:0}
.hc-auth-form input:focus{outline:none;border-color:var(--hc-honey-2);box-shadow:0 0 0 3px rgba(224,168,75,.25)}
.hc-auth-form input.is-invalid{border-color:#DC2626}
.hc-auth-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hc-auth-submit{width:100%;justify-content:center;padding:12px;font-size:15px}
.hc-auth.is-success .hc-auth-submit{background:var(--hc-forest)}
.hc-auth-error{padding:9px 12px;border-radius:10px;background:#FEF2F2;border:1px solid #FECACA;color:#991B1B;font-size:13px}
.hc-auth-alt{margin:2px 0 0;text-align:center;font-size:13px;color:#78716c}
.hc-auth-alt button{border:0;background:none;color:var(--hc-forest);font-weight:700;cursor:pointer;text-decoration:underline;font-size:13px;padding:0}
.hc-auth-vendor{margin:16px 0 0;padding-top:12px;border-top:1px dashed rgba(58,36,22,.14);text-align:center;font-size:12.5px;color:#8a7a6c}
.hc-auth-vendor a{font-weight:700;color:var(--accent)}
body.hc-auth-open{overflow:hidden}
@media(max-width:600px){
  .hc-auth{padding:0;align-items:end}
  .hc-auth-sheet{width:100%;max-height:92vh;border-radius:22px 22px 0 0;padding:22px 18px calc(18px + env(safe-area-inset-bottom));transform:translateY(100%);opacity:1}
  .hc-auth.is-open .hc-auth-sheet{transform:none}
  .hc-auth-sheet::before{content:'';display:block;width:42px;height:4px;border-radius:4px;background:#d6c7ae;margin:-8px auto 12px}
  .hc-auth-two{grid-template-columns:1fr}
}

/* ---------- Product gallery (handicraft) ---------- */
.pd-gallery-hc{min-width:0}
.hcg{outline:none;display:flex;flex-direction:column;gap:12px}
.hcg-stage{position:relative;aspect-ratio:1/1;border-radius:22px;overflow:hidden;background:#F3EADB;box-shadow:0 18px 40px rgba(58,36,22,.1);touch-action:pan-y;cursor:zoom-in}
.hcg-track{display:flex;height:100%;transition:transform .45s cubic-bezier(.22,.8,.2,1);will-change:transform}
.hcg-slide{flex:0 0 100%;height:100%;margin:0}
.hcg-slide img{width:100%;height:100%;object-fit:cover;display:block;user-select:none;-webkit-user-drag:none}
.hcg-badge{position:absolute;top:14px;left:14px;z-index:3;background:var(--accent);color:#fff;font-weight:800;font-size:13px;padding:4px 10px;border-radius:8px}
.hcg-arrow{position:absolute;top:50%;z-index:3;width:42px;height:42px;margin-top:-21px;border-radius:50%;border:0;background:rgba(255,252,247,.92);color:var(--hc-teak);display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.14);opacity:0;transition:opacity .2s,transform .2s}
.hcg-prev{left:14px;transform:translateX(-6px)}.hcg-next{right:14px;transform:translateX(6px)}
.hcg-stage:hover .hcg-arrow,.hcg:focus-within .hcg-arrow{opacity:1;transform:none}
.hcg-arrow:hover{background:#fff;color:var(--accent)}
.hcg-counter{position:absolute;right:14px;bottom:14px;z-index:3;background:rgba(26,19,14,.6);color:#fff;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px}
.hcg-dots{position:absolute;left:0;right:0;bottom:16px;display:none;justify-content:center;gap:6px;z-index:3}
.hcg-dots span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.6);transition:width .2s,background .2s}
.hcg-dots span.is-on{width:20px;border-radius:4px;background:#fff}
.hcg-hint{position:absolute;left:14px;bottom:14px;z-index:3;font-size:11.5px;font-weight:600;color:#fff;background:rgba(26,19,14,.45);padding:3px 9px;border-radius:999px;transition:opacity .2s}
.hcg-hint-touch{display:none}
.hcg-lens{position:absolute;inset:0;z-index:2;background-repeat:no-repeat;background-size:220%;opacity:0;pointer-events:none;transition:opacity .18s}
.hcg.is-zoomed .hcg-lens{opacity:1}
.hcg.is-zoomed .hcg-hint{opacity:0}
.hcg-thumbs{display:flex;gap:10px;overflow-x:auto;padding:2px;scrollbar-width:thin}
.hcg-thumb{flex:0 0 76px;height:76px;border-radius:14px;overflow:hidden;border:2px solid transparent;padding:0;background:#F3EADB;cursor:pointer;opacity:.7;transition:opacity .15s,border-color .15s,transform .15s}
.hcg-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.hcg-thumb:hover{opacity:1;transform:translateY(-2px)}
.hcg-thumb.is-on{opacity:1;border-color:var(--hc-honey-2)}
@media(hover:none){
  .hcg-arrow{display:none}
  .hcg-dots{display:flex}
  .hcg-counter{top:14px;bottom:auto}
  .hcg-hint-desk{display:none}.hcg-hint-touch{display:inline}
  .hcg-hint{bottom:auto;top:14px;left:auto;right:74px}
  .hcg-lens{background-size:250%}
}
@media(max-width:600px){
  .hcg-stage{border-radius:16px}
  .hcg-thumb{flex-basis:60px;height:60px;border-radius:12px}
}

/* ===================================================================
   Grain Handicraft — buyer ↔ seller live chat, inbox, product contact
   =================================================================== */
.hc-contact-row{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 18px}
.hc-contact-btn{flex:1 1 160px;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:10px 16px;border-radius:10px;font-weight:700;font-size:15px;text-decoration:none;transition:transform .15s,box-shadow .15s,background .15s}
.hc-contact-chat{background:var(--hc-cream);color:var(--hc-teak);border:1.5px solid var(--hc-honey-2)}
.hc-contact-chat:hover{background:#fff;box-shadow:0 6px 18px rgba(58,36,22,.12)}
.hc-contact-wa{background:#25D366;color:#fff;border:1.5px solid #1fb457}
.hc-contact-wa:hover{background:#1fb457;box-shadow:0 6px 18px rgba(37,211,102,.35)}
.hc-order-chat{display:inline-block;margin-top:6px;font-size:13px;font-weight:700;color:var(--hc-honey-2);text-decoration:none;white-space:nowrap}
.hc-order-chat:hover{text-decoration:underline}
.hc-badge-count{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;margin-left:4px;border-radius:999px;background:var(--accent);color:#fff;font-size:11px;font-weight:800;line-height:1}
.wa-float svg{display:block}

.hc-chat-page{padding:24px 28px 72px;max-width:860px}
.hc-inbox{list-style:none;margin:0;padding:0;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.hc-inbox li + li{border-top:1px solid var(--line)}
.hc-inbox-row{display:flex;align-items:center;gap:14px;padding:14px 16px;color:inherit;text-decoration:none;transition:background .15s}
.hc-inbox-row:hover{background:#FBF6EC}
.hc-inbox-row.is-unread{background:#FFF8EA}
.hc-inbox-thumb{flex:0 0 52px;width:52px;height:52px;border-radius:10px;overflow:hidden;background:var(--hc-cream);display:grid;place-items:center;font-size:22px}
.hc-inbox-thumb img{width:100%;height:100%;object-fit:cover}
.hc-inbox-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.hc-inbox-top{display:flex;justify-content:space-between;gap:10px}
.hc-inbox-top strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hc-inbox-top time{flex:none;font-size:12px;color:rgba(26,19,14,.55)}
.hc-inbox-ctx{font-size:13px;font-weight:600;color:var(--hc-honey-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hc-inbox-preview{font-size:14px;color:rgba(26,19,14,.7);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hc-inbox-row.is-unread .hc-inbox-preview{color:var(--ink);font-weight:600}
.hc-inbox-dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--accent)}

.hc-chat{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 10px 30px rgba(58,36,22,.06)}
.hc-chat-head{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--hc-teak);color:#fff}
.hc-chat-avatar{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--hc-honey);color:var(--hc-teak);font-weight:800;font-size:17px}
.hc-chat-who{display:flex;flex-direction:column;min-width:0}
.hc-chat-who strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hc-chat-who small{opacity:.75;font-size:12px}
.hc-chat-ctx{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--hc-cream);border-bottom:1px solid var(--line);color:inherit;text-decoration:none}
.hc-chat-ctx-img{flex:none;width:48px;height:48px;border-radius:8px;overflow:hidden;background:#fff;display:grid;place-items:center;font-size:22px}
.hc-chat-ctx-img img{width:100%;height:100%;object-fit:cover}
.hc-chat-ctx > span:last-child{display:flex;flex-direction:column;min-width:0}
.hc-chat-ctx small{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:rgba(26,19,14,.55)}
.hc-chat-ctx strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hc-chat-ctx em{font-style:normal;font-size:13px;color:var(--hc-honey-2);font-weight:700}
.hc-chat-log{flex:1;height:52vh;min-height:280px;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px;background:#FBF7F0;overscroll-behavior:contain}
.hc-chat-empty{margin:auto;max-width:340px;text-align:center;color:rgba(26,19,14,.6);font-size:14px}
.hc-msg{max-width:78%;align-self:flex-start;padding:9px 12px 6px;border-radius:14px 14px 14px 4px;background:#fff;border:1px solid var(--line);box-shadow:0 1px 2px rgba(0,0,0,.04);animation:hcMsgIn .18s ease-out}
.hc-msg p{margin:0;font-size:15px;line-height:1.45;color:var(--ink);word-wrap:break-word;overflow-wrap:anywhere}
.hc-msg time{display:block;margin-top:3px;font-size:11px;color:rgba(26,19,14,.45);text-align:right}
.hc-msg.is-mine{align-self:flex-end;background:var(--hc-honey);border-color:var(--hc-honey-2);border-radius:14px 14px 4px 14px}
.hc-msg.is-mine time{color:rgba(58,36,22,.6)}
.hc-msg.role-admin{align-self:center;background:#EEF3EF;border-color:#C9D8CE;max-width:90%}
.hc-msg-tag{display:block;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--hc-forest);margin-bottom:2px}
@keyframes hcMsgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.hc-chat-form{display:flex;gap:8px;align-items:flex-end;padding:10px 12px;border-top:1px solid var(--line);background:#fff}
.hc-chat-form textarea{flex:1;min-width:0;resize:none;max-height:140px;padding:11px 14px;border:1.5px solid var(--line-strong);border-radius:22px;font:inherit;font-size:16px;line-height:1.35;background:#fff}
.hc-chat-form textarea:focus{outline:none;border-color:var(--hc-honey-2)}
.hc-chat-form .btn{flex:none;border-radius:22px;min-height:44px;padding:0 18px}
.hc-chat-note{margin:0;padding:8px 14px 12px;font-size:12px;color:rgba(26,19,14,.5);background:#fff}
@media (max-width:600px){
  .hc-chat-page{padding:12px 12px 90px}
  .hc-chat{border-radius:12px}
  .hc-chat-log{height:calc(100dvh - 330px);min-height:240px}
  .hc-msg{max-width:88%}
  .hc-contact-btn{flex-basis:100%}
}
/* ===================================================================
   Grain Handicraft home — Today's Deals: Bestsellers + SuperDeals cards
   =================================================================== */
.hc-td{margin:8px 0 34px;padding:22px 0 4px;background:#fff;border-radius:18px}
.hc-td-heading{margin:0 0 16px;text-align:center;font-size:clamp(22px,2.8vw,30px);font-weight:800;letter-spacing:-.01em;color:#191919}
.hc-td-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:0 16px 16px}
.hc-td-grid.is-single{grid-template-columns:minmax(0,1fr)}
.hc-td-card{min-width:0;background:#fff;border:1px solid #e5e5e5;border-radius:14px;padding:16px 16px 14px}
.hc-td-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.hc-td-head h3{margin:0;font-size:20px;font-weight:800;color:#191919;white-space:nowrap}
.hc-td-pill{display:inline-flex;align-items:center;gap:4px;padding:6px 13px;border-radius:999px;font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap;transition:filter .15s}
.hc-td-pill:hover{filter:brightness(.96)}
.hc-td-pill span{font-size:16px;line-height:1}
.hc-td-pill.is-orange{background:#FFF1E4;color:#E0590C}
.hc-td-pill.is-red{background:#FFE9E9;color:#E0162B}
.hc-td-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.hc-td-tile{display:flex;flex-direction:column;min-width:0;color:inherit;text-decoration:none}
.hc-td-img{position:relative;display:block;aspect-ratio:1/1;border-radius:10px;overflow:hidden;background:#F2F2F2}
.hc-td-img img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.hc-td-tile:hover .hc-td-img img{transform:scale(1.04)}
.hc-td-off{position:absolute;left:0;bottom:8px;padding:3px 8px;border-radius:0 6px 6px 0;background:#E0162B;color:#fff;font-size:12.5px;font-weight:800;line-height:1.2}
.hc-td-title{margin-top:8px;font-size:13.5px;line-height:1.35;color:#333;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.hc-td-price{margin-top:4px;font-size:18px;font-weight:800;color:#191919;line-height:1.2}
.hc-td-price small{font-size:12px;font-weight:700;margin-right:2px}
.hc-td-price.is-red{color:#E0162B}
.hc-td-was{font-size:12.5px;color:#999}
.hc-td-meta{display:flex;flex-wrap:wrap;gap:4px 8px;margin-top:3px;font-size:12px;color:#666}
.hc-td-stars{color:#191919;font-weight:600}
.hc-td-stars::first-letter{color:#F5A623}
@media (max-width:900px){
  .hc-td-grid{grid-template-columns:1fr}
  .hc-td-grid.is-single{grid-template-columns:1fr}
}
@media (max-width:600px){
  .hc-td{padding-top:16px;border-radius:14px}
  .hc-td-grid{padding:0 10px 12px;gap:12px}
  .hc-td-card{padding:12px 12px 10px}
  .hc-td-head h3{font-size:17px}
  .hc-td-pill{padding:5px 10px;font-size:12px}
  /* Three tiles scroll sideways (with snap) rather than squeezing to ~90px. */
  .hc-td-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 12px;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:10px;margin:0 -12px;padding:0 12px}
  .hc-td-row::-webkit-scrollbar{display:none}
  .hc-td-tile{flex:0 0 132px;scroll-snap-align:start}
  .hc-td-price{font-size:16px}
}
/* ============================================================
   GRAIN HANDICRAFT — batch 2026-09-30: scrolling rows + full-width category grid
   ============================================================ */

/* Every handicraft product row uses the shared <x-scroll-rows> marquee
   (variant="hc-scroll"): auto-scroll on desktop (pauses on hover), native
   swipe strip on phones (the shared <=480px rule). Only card sizing here. */
.hc-scroll .scroll-track{gap:12px}
.hc-scroll .scroll-track .ae-card{flex:0 0 190px;width:190px}
.hc-scroll .scroll-track .hc-td-tile{flex:0 0 150px;width:150px}
.hc-scroll .scroll-track .ae-card,.hc-scroll .scroll-track .hc-td-tile{scroll-snap-align:start}
.hc-td-card .hc-scroll{margin-top:2px}
.ae-flash .hc-scroll{padding-bottom:10px}
@media(max-width:600px){
  .hc-scroll .scroll-track{gap:8px}
  .hc-scroll .scroll-track .ae-card,
  .hc-scroll .scroll-track .hc-td-tile{flex:0 0 132px;width:132px}
  .hc-scroll .ae-add{display:none}
}

/* Category page: the grid fills the whole products column of the standard
   .container (layout rules live with the category page block above).
   Columns follow the grid's own width (container query), so the count is
   right whatever the side menu is doing: 6 → 5 → 4 → 3 → 2. The media
   rules above stay as the fallback for browsers without container queries. */
.hc-cat-main{container-type:inline-size;container-name:hccat}
@container hccat (min-width:0px){
  .hc-cat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
}
@container hccat (min-width:420px){
  .hc-cat-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
}
@container hccat (min-width:600px){
  .hc-cat-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
}
@container hccat (min-width:780px){
  .hc-cat-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@container hccat (min-width:940px){
  .hc-cat-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
}

/* Product-card hover preview (public/js/card-hover.js) — desktop only.
   Two stacked layers crossfade over the card's main photo; dots show
   which photo is up. Badges/hearts/quick-add stay on top (z-index ≥ 2). */
[data-card-media]{position:relative}
.card-hover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity .45s ease;pointer-events:none;z-index:1;-webkit-user-drag:none;user-select:none}
.card-hover-img.is-on{opacity:1}
.card-hover-dots{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);display:flex;gap:4px;z-index:3;
  padding:3px 6px;border-radius:999px;background:rgba(26,19,14,.28);pointer-events:none;animation:cardHoverDots .25s ease}
.card-hover-dots i{display:block;width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.55);transition:background .2s,transform .2s}
.card-hover-dots i.is-on{background:#fff;transform:scale(1.25)}
@keyframes cardHoverDots{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.card-hover-img{transition:none}}

/* Product image protection (with public/js/image-protect.js): no drag-out
   and no iOS long-press "Save image" on storefront photos. Images stay
   clickable — links around them work as normal. */
.pd-gallery img,.hcg img,.imgwrap img,.ae-card-media img,.pd-main-img img,.pcard img,.pcard-mini img,
.hc-td img,.ds-sample-img img,.hc-cat-tile img,.cart-item-cell img,img[data-protect]{
  -webkit-user-drag:none;user-drag:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}

/* =====================================================================
   GH Handicraft Dropship Program — public program page + reseller sign-up
   (handicraft/dropship*.blade.php). Teak / honey palette.
   ===================================================================== */
.ds-hero{background:linear-gradient(135deg,var(--hc-teak,#3A2416) 0%,#4a2f1c 55%,var(--hc-forest,#2F4A3A) 100%);color:#fff;padding:64px 0 72px}
.ds-hero-inner{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:center}
.ds-eyebrow{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--hc-honey,#E0A84B);margin-bottom:14px}
.ds-hero h1{font-family:'Fraunces',serif;font-size:clamp(30px,4.2vw,48px);line-height:1.08;font-weight:700;color:#fff;margin:0 0 16px;letter-spacing:-.01em}
.ds-hero p{font-size:16.5px;line-height:1.6;color:rgba(246,236,217,.85);max-width:560px;margin:0 0 26px}
.ds-hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.ds-btn-outline{background:transparent;border:1.5px solid rgba(246,236,217,.45);color:#fff}
.ds-btn-outline:hover{border-color:var(--hc-honey,#E0A84B);color:var(--hc-honey,#E0A84B)}
.ds-hero-points{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-wrap:wrap;gap:10px 22px;font-size:14px;color:rgba(246,236,217,.9)}
.ds-hero-points .ico{color:var(--hc-honey,#E0A84B);width:16px;height:16px;margin-right:4px}
.ds-formula-card{background:#FFFBF4;color:var(--ink,#1A130E);border-radius:16px;padding:26px 26px 20px;box-shadow:0 24px 60px rgba(0,0,0,.28)}
.ds-formula-title{font-family:'Fraunces',serif;font-size:19px;font-weight:700;color:var(--hc-teak,#3A2416);margin-bottom:14px}
.ds-formula-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px dashed rgba(58,36,22,.16);font-size:14.5px}
.ds-formula-row strong{white-space:nowrap}
.ds-formula-row.is-minus strong{color:#78716c;font-weight:600}
.ds-formula-row.is-total{border-bottom:0;padding-top:14px;font-size:17px;font-weight:700}
.ds-formula-row.is-total strong{color:#15803D;font-size:20px}
.ds-hero .ds-formula-card p.ds-formula-note{margin:10px 0 0;font-size:12px;line-height:1.5;color:#78716c;max-width:none}

.ds-section{padding:64px 0}
.ds-section-alt{background:#FBF5EB;border-top:1px solid rgba(58,36,22,.06);border-bottom:1px solid rgba(58,36,22,.06)}
.ds-head{text-align:center;max-width:640px;margin:0 auto 36px}
.ds-head-left{text-align:left;margin:0 0 22px}
.ds-kicker{display:block;font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.ds-head h2{font-family:'Fraunces',serif;font-size:clamp(24px,3vw,32px);line-height:1.15;color:var(--hc-teak,#3A2416);margin:0}
.ds-head p{margin:10px 0 0;color:#6b5f55}
.ds-steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;counter-reset:none}
.ds-steps li{background:#fff;border:1px solid rgba(58,36,22,.1);border-radius:14px;padding:22px 20px}
.ds-step-no{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--hc-teak,#3A2416);color:var(--hc-honey,#E0A84B);font-family:'Fraunces',serif;font-weight:700;margin-bottom:12px}
.ds-steps h3{font-size:16px;margin:0 0 6px;color:var(--hc-teak,#3A2416)}
.ds-steps p{margin:0;font-size:14px;line-height:1.55;color:#6b5f55}
.ds-two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;align-items:start}
.ds-handles{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.ds-handles li{display:flex;gap:14px;align-items:flex-start}
.ds-handles .ico{flex:none;width:22px;height:22px;color:var(--hc-teak,#3A2416);margin-top:2px}
.ds-handles strong{display:block;font-size:15px;color:var(--hc-teak,#3A2416)}
.ds-handles span{display:block;font-size:14px;color:#6b5f55;line-height:1.5}
.ds-charges{width:100%;border-collapse:collapse;background:#fff;border:1px solid rgba(58,36,22,.1);border-radius:12px;overflow:hidden;font-size:14px}
.ds-charges th,.ds-charges td{text-align:left;padding:13px 16px;border-bottom:1px solid rgba(58,36,22,.08);vertical-align:top}
.ds-charges tr:last-child th,.ds-charges tr:last-child td{border-bottom:0}
.ds-charges th{width:34%;color:var(--hc-teak,#3A2416);font-weight:700;background:#FDF8F0}
.ds-charges td{color:#4a3f36;line-height:1.5}
.ds-samples{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.ds-sample{display:flex;flex-direction:column;background:#fff;border:1px solid rgba(58,36,22,.1);border-radius:12px;overflow:hidden;color:var(--ink);text-decoration:none;transition:border-color .15s,transform .15s}
.ds-sample:hover{border-color:var(--hc-honey,#E0A84B);transform:translateY(-2px)}
.ds-sample-img{aspect-ratio:1/1;background:#F5EFE6;display:grid;place-items:center;color:#b8a99a;font-size:34px}
.ds-sample-img img{width:100%;height:100%;object-fit:cover}
.ds-sample-name{padding:10px 12px 2px;font-weight:600;font-size:14px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ds-sample-price{padding:0 12px 12px;font-size:12.5px;color:#78716c}
.ds-faq-wrap{max-width:820px}
.ds-faq details{background:#fff;border:1px solid rgba(58,36,22,.1);border-radius:10px;margin-bottom:10px;padding:0 18px}
.ds-faq summary{cursor:pointer;padding:16px 0;font-weight:600;color:var(--hc-teak,#3A2416);list-style:none;display:flex;justify-content:space-between;gap:12px}
.ds-faq summary::-webkit-details-marker{display:none}
.ds-faq summary::after{content:"";flex:none;width:14px;height:14px;margin-top:3px;background:currentColor;-webkit-mask:var(--ico-chevron) center/contain no-repeat;mask:var(--ico-chevron) center/contain no-repeat;transform:rotate(90deg);transition:transform .15s}
.ds-faq details[open] summary::after{transform:rotate(-90deg)}
.ds-faq p{margin:0 0 16px;color:#4a3f36;line-height:1.6;font-size:14.5px}
.ds-cta{background:var(--hc-teak,#3A2416);color:#fff;padding:48px 0}
.ds-cta-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.ds-cta h2{font-family:'Fraunces',serif;font-size:26px;margin:0 0 6px;color:#fff}
.ds-cta p{margin:0;color:rgba(246,236,217,.8)}
.ds-join-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
.ds-join-grid .ds-span{grid-column:1/-1}
.ds-join-form select{width:100%}
.ds-terms{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.5;color:#4a3f36;margin:6px 0 18px}
.ds-terms input{margin-top:3px;flex:none}
.ds-terms a{color:var(--accent);text-decoration:underline}
@media(max-width:980px){
  .ds-hero-inner,.ds-two-col{grid-template-columns:1fr;gap:32px}
  .ds-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ds-samples{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:600px){
  .ds-hero{padding:40px 0 48px}
  .ds-section{padding:44px 0}
  .ds-steps,.ds-join-grid{grid-template-columns:1fr}
  .ds-samples{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .ds-charges th{width:40%}
  .ds-formula-card{padding:20px 18px 16px}
}

/* =====================================================================
   Storefront line icons — App\Support\Icons / <x-ico> (both sites).
   One thin-line style (1.6 stroke, round joins) in place of emoji. The SVG
   is 1em square, so each container's existing font-size still sizes it;
   colour follows currentColor unless a brand tone is set below.
   ===================================================================== */
:root{
  --ico-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13.5 6.5 19 12l-5.5 5.5'/%3E%3C/svg%3E");
  --ico-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --ico-x:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E");
  --ico-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9.5 6.5 5.5 5.5-5.5 5.5'/%3E%3C/svg%3E");
}
.ico{display:inline-block;width:1em;height:1em;vertical-align:-.14em;flex:none;overflow:visible}
.ico-caret{width:.78em;height:.78em;vertical-align:-.06em;margin-left:3px;opacity:.7;transition:transform .2s}
.nav-mega-wrap.open .ico-caret,.nav-more.open .ico-caret,.hc-dd.open .ico-caret,.hc-catmenu.open .ico-caret{transform:rotate(180deg)}
.ico-arrow{width:.9em;height:.9em;vertical-align:-.1em;margin-left:.2em;transition:transform .15s}
a:hover > .ico-arrow,a:hover .ico-arrow{transform:translateX(2px)}
.ico-star{color:#D99A1E}

/* Text links that read "See all …" get the arrow from CSS, not a typed → */
a.more::after,.section-crosspromo::after{content:"";display:inline-block;width:.9em;height:.9em;margin-left:.35em;vertical-align:-.1em;
  background:currentColor;-webkit-mask:var(--ico-arrow) center/contain no-repeat;mask:var(--ico-arrow) center/contain no-repeat;transition:transform .15s}
a.more:hover::after,.section-crosspromo:hover::after{transform:translateX(2px)}

/* Header (furniture) */
.nav-actions .ico{width:16px;height:16px}
.nav-actions .ico-caret{width:11px;height:11px}
.city-picker-btn .ico{color:var(--oak)}
.md-head button .ico{width:22px;height:22px}
.logo .mark{font-family:'Fraunces',serif;font-weight:700;font-size:16px;line-height:1}

/* Header (handicraft) */
.hc-action .ico{width:20px;height:20px}
.hc-search button .ico{width:18px;height:18px;stroke-width:2}
.hc-search button{display:grid;place-items:center}
.hc-strip-track .ico{width:14px;height:14px;vertical-align:-.18em}
.hc-drawer-head button .ico{width:24px;height:24px}
.hc-logo-mark{color:var(--hc-honey)}
.hc-logo-mark .ico{width:28px;height:28px;stroke-width:1.4}
.hc-catmenu-ico,.hc-cnav-ico{color:var(--hc-teak);display:inline-grid;place-items:center}
.hc-catmenu-ico .ico,.hc-cnav-ico .ico{width:18px;height:18px}
.hc-catmenu-toggle .ico{width:14px;height:14px}
.hc-catmenu-head .ico:not(.ico-caret),.hc-cnav-head .ico{width:16px;height:16px;margin-right:4px}

/* Category circles / tiles (handicraft home) */
.ae-icon span{color:var(--hc-teak)}
.ae-icon span .ico{width:24px;height:24px;stroke-width:1.5}
.ae-icon-hot span{color:#fff}
.hc-cat-tile-ico{color:var(--hc-teak)}
.hc-cat-tile-ico .ico{stroke-width:1.3}
.hc-side-row > span:first-child{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:#FBF3E4;color:var(--hc-teak);font-size:20px;flex:0 0 auto}

/* Trust bands + product page trust row */
.trust-icon .ico{width:20px;height:20px;stroke-width:1.5}
.trust-strip-item .ico{width:18px;height:18px;color:var(--hc-teak,var(--walnut))}
.pd-trust-item .pd-trust-icon{color:var(--accent);display:inline-grid;place-items:center}
.pd-trust-item .pd-trust-icon .ico{width:18px;height:18px}
.pd-urgency .ico{width:15px;height:15px;margin-right:2px;color:var(--accent)}
.pd-meta .ico,.pcard .meta .ico,.storefront-meta .ico{width:13px;height:13px;margin-right:1px;opacity:.85}
.pd-delivery-note-icon .ico{width:17px;height:17px}
.pd-map-label .ico,.vmap-label .ico{width:14px;height:14px;color:var(--accent)}
.pd-bulk-icon{color:#B45309}
.pd-bulk-icon .ico{width:20px;height:20px}

/* Verified marks, ratings, badges */
.ico.verified,.ico.vf{width:.95em;height:.95em;color:var(--accent);margin-left:2px;vertical-align:-.12em}
.ptier-badge{text-transform:uppercase}
.rating-badge .ico{width:10px;height:10px;vertical-align:-1px}
.star-rating-track,.star-rating-fill{display:inline-flex;gap:2px}
.star-rating-stars .ico{flex:none;vertical-align:0}
.star-picker label .ico{vertical-align:0}
.ae-stars .ico,.hc-td-stars .ico{width:12px;height:12px;vertical-align:-1px}

/* Favourites, quick add, remove */
.fav-heart .ico,.ae-fav .ico{width:16px;height:16px}
.fav-heart.is-fav .ico,.ae-fav.is-fav .ico{fill:currentColor}
.fav-heart-inline .ico{width:14px;height:14px}
.ae-add{display:grid;place-items:center}
.ae-add .ico{width:16px;height:16px}
.cart-remove-btn{display:inline-grid;place-items:center}
.cart-remove-btn .ico{width:14px;height:14px}
.hc-store-chip-x .ico,.hc-filter-pills .ico{width:12px;height:12px;vertical-align:-1px}
.ae-ends .ico{width:12px;height:12px;vertical-align:-2px}

/* Empty states, confirmation, order tracker */
.le-icon{color:var(--oak);display:grid;place-items:center}
.le-icon .ico{width:56px;height:56px;stroke-width:1.2}
.checkout-confirm-icon .ico{width:30px;height:30px;stroke-width:2.2}
.ost-dot .ico{width:14px;height:14px;stroke-width:2.4}
.ost-cancelled .ico{width:15px;height:15px;vertical-align:-3px}
.payment-awaiting-badge .ico,.hc-account-notice .ico,.hc-flash-ok .ico,.if-success .ico,.cart-summary-note .ico{width:15px;height:15px;vertical-align:-3px;margin-right:2px}

/* Floating buttons, media, chat */
.gh-chat-bubble .ico{width:26px;height:26px}
.gh-head .av{font-family:'Fraunces',serif;font-weight:700}
.gh-foot button .ico,.gh-head .x .ico{width:18px;height:18px}
.gh-wa .ico,.creveal .ico,.hc-foot-chat .ico{width:17px;height:17px}
.back-to-top .ico{width:20px;height:20px;stroke-width:2}
.play-icon .ico,.bf-play .ico,.bc-play .ico{transform:translateX(1px)}
.vsocial .ico{width:15px;height:15px}
.vreg-type-icon{color:var(--accent)}
.vreg-type-icon .ico{width:28px;height:28px;stroke-width:1.4}
.hc-chat-ctx-img{color:#a8a29e}
.hcg-hint .ico{width:13px;height:13px;vertical-align:-2px}
/* Product-page "Cart (N)" pill sits on the light page — .btn-ghost is
   white-on-dark, so give it the page's ink colours. */
.btn.btn-ghost.wi-cart-link{color:var(--walnut);border-color:var(--line-strong,var(--line));padding:6px 12px;font-size:13px;display:inline-flex;align-items:center;gap:6px}
.btn.btn-ghost.wi-cart-link:hover{color:var(--accent);border-color:var(--accent)}
/* Same fix for the secondary button on other light surfaces (cart, order
   confirmation, empty states) — it was white text on cream. */
.cart-summary-actions .btn-ghost,.checkout-confirm-actions .btn-ghost,.listing-empty .btn-ghost{color:var(--walnut);border-color:var(--line-strong,var(--line))}
.cart-summary-actions .btn-ghost:hover,.checkout-confirm-actions .btn-ghost:hover,.listing-empty .btn-ghost:hover{color:var(--accent);border-color:var(--accent)}

/* Pricing page feature ticks + showroom accordion (were CSS glyphs) */
.pkg-features li::before{content:"";top:.3em;width:14px;height:14px;background:var(--accent-2);-webkit-mask:var(--ico-check) center/contain no-repeat;mask:var(--ico-check) center/contain no-repeat}
.pkg-features li.no::before{content:"";background:#c9beb2;-webkit-mask-image:var(--ico-x);mask-image:var(--ico-x)}
.showroom-others summary::before{content:"";display:inline-block;width:12px;height:12px;margin-right:4px;vertical-align:-1px;background:currentColor;
  -webkit-mask:var(--ico-chevron) center/contain no-repeat;mask:var(--ico-chevron) center/contain no-repeat;transition:transform .15s}
.showroom-others[open] summary::before{content:"";transform:rotate(90deg)}