/* ============================================================
   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{
  /* "Warm Luxury" theme (Grainhouse USA) — premium artisan palette:
     cream/ivory bg, espresso text, rich-walnut + brass/gold accents.
     --oak carries the brief's brass/gold #B08D57 value directly — its real
     usage throughout is hero/header decoration + hover states on the dark
     espresso surfaces (eyebrow, hero-tag, nav hover), i.e. exactly
     "highlights, hover, premium touches" from the brief, and reads great
     there (high contrast against dark espresso).
     --accent-2 uses a deeper antique-brass instead of #B08D57: it's used as
     small 10-12px label text on the light cream bg (vendor names, city
     tags), where #B08D57 itself is too light to pass contrast at that size.
     --taupe holds the brief's muted-text value for reference/admin use —
     the codebase's existing muted body text uses a plain neutral gray
     (unchanged, reads fine on the new cream bg) rather than a CSS variable,
     so this isn't wired into a specific rule yet. */
  --walnut:#2B2622;
  --walnut-2:#1C1815;
  --oak:#B08D57;
  --kraft:#F0E4D3;
  --paper:#FAF7F2;
  --ink:#211C18;
  --accent:#6B4E3D;      /* rich walnut — buttons, links, primary brand */
  --accent-2:#8A6D3F;    /* antique brass — small labels/icons (contrast-safe) */
  --taupe:#8B7E6D;       /* muted/secondary text — reference value, see note above */
  --terracotta:#C06B4A;  /* sparing pop accent — sale badges, rare CTAs */
  --line:rgba(43,38,34,.14);
  --line-strong:rgba(43,38,34,.28);
  --white:#FDFBF8;
}
*{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(240,228,211,.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(240,228,211,.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)}
/* Taller, spacious professional bar (Warm Luxury) — Premium/Manufacturers/
   Catalog are pinned (never scroll, never shrink); the 7 main-nav category
   links (see FullCategorySeeder's $mainNav) scroll internally if they ever
   don't fit (overflow-x on .catbar-inner, never the page). Visible at every
   width, including mobile (see the max-width:900px pass below). Every item
   still sits on line-height:1 (not body's inherited 1.65) so the extra
   height here comes from deliberate padding, not accidental line-box bloat —
   the row's own vertical padding plus each link's padding together give it
   real presence without feeling bulky. */
.catbar{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative}
.catbar-row{max-width:1280px;margin:0 auto;padding:10px 28px;display:flex;align-items:center;gap:22px}
.catbar-pinned{display:flex;align-items:center;gap:22px;flex-shrink:0}
.catbar-scroll-wrap{position:relative;flex:1;min-width:0;display:flex;align-items:center}
.catbar-inner{
  display:flex;align-items:center;gap:22px;width:100%;
  font-size:13.5px;font-weight:500;letter-spacing:.01em;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;
  scrollbar-width:thin;scrollbar-color:var(--kraft) transparent;
  cursor:grab;user-select:none;
  /* soft fade at both edges hints there's more to scroll — purely visual,
     the faded ends stay fully clickable (mask-image never affects hit-testing) */
  mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);
}
.catbar-inner.dragging{cursor:grabbing;scroll-behavior:auto}
.catbar-inner::-webkit-scrollbar{height:4px}
.catbar-inner::-webkit-scrollbar-thumb{background:var(--kraft);border-radius:2px}
.catbar-inner::-webkit-scrollbar-track{background:transparent}
.catbar-inner a{
  /* line-height:1 undoes body's inherited 1.65, so this box's height is
     entirely the 14px+14px padding plus the 13.5px text — deliberate, not
     accidental bloat. */
  padding:14px 0;color:var(--walnut);white-space:nowrap;flex-shrink:0;
  border-bottom:2px solid transparent;transition:.15s;line-height:1;
}
.catbar-inner a:hover{color:var(--accent);border-color:var(--accent)}
/* Scaled up alongside the taller links around it — still clearly shorter
   than their ~41px box, so it reads as a subtle rule, not a fat bar. */
.catbar-divider{width:1px;height:22px;background:var(--kraft);flex-shrink:0}
/* Catalog ▾ sits directly in .catbar-pinned (not .catbar-inner or
   .nav-actions), so without this it falls back to the body's default 16px/
   1.65 line-height instead of matching its siblings. Same type + padding as
   catbar-inner a so every pinned + scrolling item sits on the same
   baseline. */
.catbar-pinned .nav-mega-trigger{font-size:13.5px;font-weight:500;padding:14px 0;letter-spacing:.01em;line-height:1;display:inline-block}

/* Desktop scroll affordance — hidden on touch/mobile where native swipe
   already works (see max-width:900px pass below). Visibility toggled by JS
   based on actual scroll position so an arrow never sits there uselessly
   at either end of the strip. */
.catbar-arrow{
  position:absolute;top:50%;transform:translateY(-50%);width:26px;height:26px;
  border-radius:50%;background:var(--white);border:1px solid var(--line-strong);
  color:var(--walnut);display:flex;align-items:center;justify-content:center;
  font-size:14px;line-height:1;cursor:pointer;z-index:5;
  box-shadow:0 4px 14px rgba(43,38,34,.14);transition:.15s;
}
.catbar-arrow:hover{background:var(--kraft);color:var(--accent);border-color:var(--accent)}
.catbar-arrow-left{left:2px}
.catbar-arrow-right{right:2px}
.catbar-arrow[hidden]{display:none}

/* ---------- CATALOG MEGA MENU (catbar) ----------
   Reuses .nav-mega-wrap/.nav-mega-panel wholesale (same open/close JS, same
   hover/click/Escape behavior as Shop/Brands) — only the panel's own
   position/width/inner layout are overridden here. It lives in
   .catbar-pinned rather than .nav, so its nearest positioned ancestor is
   .catbar; anchoring the panel to the trigger's own left edge (instead of
   .nav-mega-panel's default "centered across the whole bar" trick, which
   assumes a .nav-width container) keeps it directly under "Catalog ▾". */
.catbar-pinned .nav-mega-wrap{position:relative}
.nav-mega-panel-catalog{
  left:0;right:auto;margin:0;
  width:min(920px,calc(100vw - 32px));
  padding:22px 24px;
}
.nav-mega-catalog-scroll{
  columns:3;column-gap:28px;column-fill:auto;
  max-height:64vh;overflow-y:auto;padding-right:8px;
  scrollbar-width:thin;scrollbar-color:var(--kraft) transparent;
}
.nav-mega-catalog-scroll::-webkit-scrollbar{width:6px}
.nav-mega-catalog-scroll::-webkit-scrollbar-thumb{background:var(--kraft);border-radius:3px}
.nav-mega-catalog-group{break-inside:avoid;-webkit-column-break-inside:avoid;margin-bottom:16px}
.nav-mega-catalog-parent{
  display:block;font-family:'Fraunces',serif;font-weight:600;font-size:13.5px;
  color:var(--walnut);text-decoration:none;padding:3px 0 5px;margin-bottom:2px;
  border-bottom:1px solid var(--line);
}
.nav-mega-catalog-parent:hover{color:var(--accent)}
.nav-mega-catalog-child{
  display:block;font-size:12.5px;color:#5a4a3c;text-decoration:none;
  padding:4px 0 4px 2px;white-space:normal;
}
.nav-mega-catalog-child:hover{color:var(--accent);background:rgba(107,78,61,.06)}

/* ---------- BUYER CITY PICKER (header) ---------- */
.city-picker{position:relative;flex:0 0 auto;min-width:0}
.city-picker-btn{background:transparent;border:1px solid rgba(240,228,211,.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(240,228,211,.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,#4A3A2E,#2B2622);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,#1C1815,#2B2622 55%,#3A2E28)}
.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)}

/* ---------- 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(107,78,61,.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(107,78,61,.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(107,78,61,.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(33,28,24,.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}
.pcard:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(43,38,34,.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}
.pcard .vendor .verified{color:var(--accent)}
.pcard h3{font-size:1.05rem;font-weight:600;line-height:1.25;color:var(--walnut)}
.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)}
.priceline .price{font-family:'Fraunces',serif;font-size:22px;font-weight:600;color:var(--walnut)}
.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)}
.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}

/* ---------- PRODUCT PAGE: multiple labeled prices (New/Used/Bargain) ---------- */
.pd-multi-prices{display:flex;flex-direction:column;gap:8px;width:100%}
.pd-price-row{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.pd-price-label{font-family:'JetBrains Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#7a6a5c;min-width:56px}
.pd-price-value{font-family:'Fraunces',serif;font-size:19px;font-weight:600;color:var(--walnut)}
.pd-price-row-bargain .pd-price-label,
.pd-price-row-bargain .pd-price-value{color:var(--terracotta)}
.pd-price-row-bargain .pd-price-value{font-weight:700}

/* ---------- 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(43,38,34,.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(176,141,87,.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}
.cond-badge.cond-bargain{background:rgba(192,107,74,.14);color:var(--terracotta)}
.pcard .cond-badge{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(240,228,211,.14);border-radius:6px;background:rgba(240,228,211,.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 1fr;gap:40px}
/* the global `p{color:var(--walnut)}` rule (dark espresso) otherwise wins
   over the footer's inherited --kraft on the blurb paragraph, since it's a
   direct rule on the element rather than inherited — nearly invisible on
   the dark footer background without this override. */
.site-footer p{color:var(--kraft)}
.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:.85}
.site-footer a{color:var(--kraft);transition:color .15s}
.site-footer a:hover{color:var(--oak)}
.foot-bottom{max-width:1280px;margin:40px auto 0;padding-top:24px;border-top:1px solid rgba(240,228,211,.12);display:flex;justify-content:space-between;font-size:12px;font-family:'JetBrains Mono';color:var(--kraft);opacity:.75;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. */
/* PWA-PLAN.md P10 / D7: in the app, a compact footer (policies, Returns,
   Contact, seller / vendor login) and a bottom tab bar replace it; fixed
   bottom-corner widgets move up above the tab bar. */
.app-footer,.app-tabbar{display:none}
@media(display-mode:standalone){
  .site-footer{display:none}
  .app-footer{display:block}
  .app-tabbar{display:grid}
  body{--app-tabbar-h:calc(58px + env(safe-area-inset-bottom))}
}
body.pwa-standalone .site-footer{display:none}
body.pwa-standalone .app-footer{display:block}
body.pwa-standalone .app-tabbar{display:grid}
body.pwa-standalone{--app-tabbar-h:calc(58px + env(safe-area-inset-bottom))}
.app-footer{
  text-align:center;padding:18px 20px calc(18px + var(--app-tabbar-h,0px));
  background:var(--paper);font-size:12.5px;
}
.app-footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;margin-bottom:10px}
.app-footer-links a{color:var(--walnut);text-decoration:none}
.app-footer-logins{font-family:'JetBrains Mono',monospace;font-size:12px;color:#9a8a7c;letter-spacing:.03em}
.app-footer-logins a{color:#9a8a7c;text-decoration:none}
.app-footer a:hover{color:var(--walnut);text-decoration:underline}
.app-tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:9000;
  grid-template-columns:repeat(4,1fr);
  height:var(--app-tabbar-h);padding-bottom:env(safe-area-inset-bottom);box-sizing:border-box;
  background:var(--white);border-top:1px solid var(--line-strong);
  box-shadow:0 -6px 20px rgba(33,28,24,.06);
}
.app-tabbar a{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:#8a7a6c;text-decoration:none;font-size:11px;font-weight:600;letter-spacing:.02em;
  -webkit-tap-highlight-color:transparent;
}
.app-tabbar a .ico{font-size:21px}
.app-tabbar a.is-active{color:var(--walnut)}
.app-tab-badge{
  position:absolute;top:6px;left:calc(50% + 6px);min-width:17px;height:17px;padding:0 4px;box-sizing:border-box;
  border-radius:9px;background:var(--accent);color:#fff;font-size:10px;line-height:17px;text-align:center;
}
.app-tab-badge[hidden]{display:none}
body.pwa-standalone .gh-chat-bubble,body.pwa-standalone .wa-float{bottom:calc(24px + var(--app-tabbar-h))}
body.pwa-standalone .gh-chat{bottom:calc(96px + var(--app-tabbar-h));max-height:calc(100vh - 130px - var(--app-tabbar-h))}
body.pwa-standalone .back-to-top{bottom:calc(88px + var(--app-tabbar-h))}
body.pwa-standalone .fav-prompt{bottom:calc(20px + var(--app-tabbar-h))}
@media(display-mode:standalone){
  .gh-chat-bubble,.wa-float{bottom:calc(24px + var(--app-tabbar-h))}
  .gh-chat{bottom:calc(96px + var(--app-tabbar-h));max-height:calc(100vh - 130px - var(--app-tabbar-h))}
  .back-to-top{bottom:calc(88px + var(--app-tabbar-h))}
  .fav-prompt{bottom:calc(20px + var(--app-tabbar-h))}
}

/* ---------- 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(--white);border:1px solid var(--kraft);border-radius:8px;padding:8px;min-width:220px;display:none;flex-direction:column;gap:2px;z-index:60;box-shadow:0 16px 40px rgba(43,38,34,.18)}
.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;color:var(--walnut) !important}
.nav-more-menu a:hover{background:rgba(107,78,61,.08);color:var(--accent) !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(--white);border:1px solid var(--kraft);border-radius:14px;
    padding:26px 30px;display:none;gap:36px;z-index:60;
    box-shadow:0 20px 48px rgba(43,38,34,.18);
    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(--accent-2);margin-bottom:10px}
.nav-mega-col a{padding:8px 10px;margin:0 -10px;border-radius:6px;color:var(--walnut) !important;font-size:14px;white-space:nowrap;text-decoration:none;display:block;border:0 !important}
.nav-mega-col a:hover{background:rgba(107,78,61,.08);color:var(--accent) !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(--walnut) !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(107,78,61,.08);color:var(--accent) !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(43,38,34,.5);font-size:13px;padding:8px;grid-column:1/-1}

/* ---------- EXPO PAGE ---------- */
.expo-hero{background:linear-gradient(120deg,#1C1815,#2B2622 55%,#3A2E28);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(43,38,34,.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(107,78,61,.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(43,38,34,.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:44px;padding-bottom:44px;margin:0}
.home-section .sec-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:30px;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}

@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:#2B2622}

/* ---------- PREMIUM NAV LINK ---------- */
.nav-premium{
  color:var(--walnut) !important;
  background:linear-gradient(135deg,#E0B84C,#C9A227);      /* same gold as the .co-tier/.pkg-tier "gold" badges */
  padding:10px 18px !important;
  border-radius:20px;
  font-size:13px;
  font-weight:600;
  flex-shrink:0;
  border-bottom:0 !important;                               /* no underline on hover */
  line-height:1.2;
}
.nav-premium:hover{opacity:.88;border-color:transparent !important}

/* ---------- PREMIUM PAGE ---------- */
.prem-hero{background:linear-gradient(120deg,#1C1815,#2B2622 55%,#3A2E28);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(43,38,34,.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:#2B2622}
.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}

/* ---------- CONTACT LEAD POPUP (name/phone, optional; English only — USA) ---------- */
.gh-lead-overlay{display:none;position:fixed;inset:0;background:rgba(43,38,34,.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-title{font-size:14px;color:var(--walnut);margin:0 20px 12px 0;font-weight:600;line-height:1.4}
.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}
.gh-lead-continue.gh-lead-continue-call{background:var(--walnut)}
.gh-lead-continue.gh-lead-continue-call:hover{background:var(--walnut-2)}
@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(107,78,61,.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(107,78,61,.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(33,28,24,.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(107,78,61,.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(107,78,61,.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(33,28,24,.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(33,28,24,.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-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,#1C1815,#2B2622);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(43,38,34,.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(107,78,61,.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(43,38,34,.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(--accent-2) !important;border:1px solid rgba(176,141,87,.4);padding:9px 16px !important;border-radius:20px;font-weight:600;font-size:13px;flex-shrink:0;line-height:1.2}
.nav-manufacturers:hover{background:rgba(176,141,87,.12);border-color:var(--accent-2)}

/* ---------- PRICING / PACKAGES ---------- */
.pr-hero{background:linear-gradient(120deg,#1C1815,#2B2622);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(43,38,34,.14)}
.pkg.popular{border:2px solid var(--accent);box-shadow:0 16px 40px rgba(107,78,61,.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:#2B2622}
.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,#1C1815,#2B2622);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(43,38,34,.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(43,38,34,.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(107,78,61,.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(43,38,34,.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(33,28,24,.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:var(--walnut)}
.pwa-install-steps{margin:8px 0 0;padding-left:18px;font-size:12.5px;line-height:1.6;color:#6b5c4f}
.pwa-install-steps[hidden]{display:none}
.pwa-install-steps strong{color:var(--walnut)}
/* Web Push toggle (resources/views/push/toggle.blade.php) */
.gh-push{border:1px solid var(--line-strong);border-radius:12px;padding:16px;background:var(--white);text-align:left}
.vreg-card .gh-push{border:0;padding:0;background:transparent}
/* .btn-ghost is white-on-dark site-wide; on the light push card give it ink. */
.gh-push .btn-ghost{color:var(--walnut);border-color:var(--line-strong)}
.gh-push .btn-ghost:hover{background:var(--walnut);color:var(--kraft)}
.gh-push-heading{font-family:'Fraunces',serif;font-weight:600;font-size:16px;color:var(--walnut);margin-bottom:6px}
.gh-push-status{font-size:13.5px;line-height:1.5;color:#6b5c4f;margin:0 0 12px}
.gh-push-actions{display:flex;flex-wrap:wrap;gap:8px}
.gh-push-actions [hidden],.gh-push-prefs[hidden],.gh-push-error[hidden]{display:none}
.gh-push-prefs{display:flex;flex-direction:column;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line-strong);font-size:14px}
.gh-push-pref{display:flex;align-items:center;gap:8px;cursor:pointer}
.gh-push-pref input{width:18px;height:18px;accent-color:var(--accent)}
.gh-push-error{margin:10px 0 0;font-size:13px;color:#b91c1c}
.pwa-share-ico{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:5px;background:var(--paper);color:#0a64d6;font-size:14px;vertical-align:-4px}
.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}
}

/* ---------- 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(107,78,61,.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,#1C1815,#2B2622);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;color:var(--kraft)} /* Phase 3A S8: was dark-on-dark (global p colour won) */
.vreg-card{max-width:760px;margin:-30px auto 0;background:var(--white);border-radius:14px;box-shadow:0 20px 50px rgba(43,38,34,.16);padding:36px;position:relative;z-index:5}
.vreg-errors{background:rgba(107,78,61,.08);border:1px solid rgba(107,78,61,.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(107,78,61,.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(107,78,61,.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(192,107,74,.14);color:var(--terracotta);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(33,28,24,.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(253,251,248,.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(43,38,34,.04);
}
.subcat-tag:hover{
  border-color:var(--accent);color:var(--accent);
  transform:translateY(-1px);box-shadow:0 4px 10px rgba(107,78,61,.12);
}
.subcat-tag.on{
  background:linear-gradient(135deg,var(--accent),#c2461a);color:#fff;
  border-color:var(--accent);box-shadow:0 4px 12px rgba(107,78,61,.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(28,24,21,.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(253,251,248,.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) ----------
   Warm Luxury cream/white surface — matches the desktop mega menu/dropdown
   treatment (was a leftover dark-walnut panel from the old theme, the one
   spot that hadn't been brought over to the light palette). */
.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(--white);z-index:10001;transition:right .3s ease;overflow-y:auto;padding-bottom:40px;box-shadow:-16px 0 40px rgba(43,38,34,.2)}
.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 var(--line);color:var(--walnut);font-family:'Fraunces';font-size:18px}
.md-head button{background:0;border:0;color:var(--walnut);font-size:24px;cursor:pointer}
.md-links{display:flex;flex-direction:column;padding:12px 0}
.md-links a{padding:13px 20px;color:var(--walnut);text-decoration:none;font-size:15px;border-bottom:1px solid var(--line)}
.md-links a:hover,.md-links a:active{background:rgba(107,78,61,.08);color:var(--accent)}
.md-premium{color:var(--walnut) !important;background:linear-gradient(135deg,#E0B84C,#C9A227);margin:8px 20px;border-radius:20px;text-align:center;font-weight:600}
.md-divider{height:1px;border-bottom:0;background:var(--line);margin:8px 20px}
.md-vendor{color:var(--accent) !important}
.md-cta{background:var(--accent);color:#fff !important;margin:8px 20px;border-radius:8px;text-align:center;font-weight:600}
.md-cta:hover{background:var(--walnut)}

/* ---------- 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 var(--line)}
.md-accordion-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;background:0;border:0;padding:13px 20px;color:var(--walnut);font-family:'Archivo';font-size:15px;cursor:pointer;text-align:left}
.md-accordion-trigger:hover,.md-accordion-trigger:active{background:rgba(107,78,61,.08)}
.md-acc-caret{display:inline-block;color:var(--accent-2);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:var(--paper)}
.md-accordion-panel.open{max-height:2000px}
.md-accordion-panel a{padding:11px 20px 11px 32px;font-size:14px;color:var(--walnut);text-decoration:none;border-bottom:0;overflow-wrap:break-word}
.md-accordion-panel a:hover,.md-accordion-panel a:active{background:rgba(107,78,61,.1);color:var(--accent)}
.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(--accent-2);opacity:.85}
/* Same look as .md-acc-heading, but a real link (used by the Catalog
   accordion's parent-category rows, which — unlike the Furniture/Explore
   section labels above — always point somewhere) with a hover/active state
   showing it's tappable. */
.md-acc-heading-link{display:block;text-decoration:none;opacity:1}
.md-acc-heading-link:hover,.md-acc-heading-link:active{color:var(--accent);opacity:1}

/* ---------- 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}

/* ---------- DESKTOP NAV: ONE LINE (≥1280px) ----------
   Logo + every nav label never wrap (nowrap + no shrinking); search is an
   icon with a dropdown box and location is a compact pin, so the whole row
   fits on one line from 1280px up. Below 1280px the row hides behind the
   mobile burger/drawer instead of wrapping (next block). */
.logo,.logo-text{white-space:nowrap;flex-shrink:0}
.nav-actions{gap:18px;flex-wrap:nowrap;flex-shrink:0}
.nav-actions > *{flex-shrink:0}
.nav-actions > a,.nav-mega-trigger,.nav-more-trigger,.nav-actions .city-picker-btn{white-space:nowrap}
.nav-actions .pill{padding:9px 14px}
.nav-actions .btn-login-sm{padding:8px 12px}
.nav-icon-btn{background:transparent;border:1px solid rgba(240,228,211,.35);color:var(--kraft);
  width:36px;height:36px;border-radius:8px;font-size:18px;line-height:1;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;transition:.15s}
.nav-icon-btn:hover,.nav-icon-btn[aria-expanded="true"]{border-color:var(--oak);color:var(--oak)}
.nav-search{position:relative}
.nav-search-panel{position:absolute;top:calc(100% + 8px);right:0;z-index:60;display:flex;gap:6px;
  width:340px;max-width:calc(100vw - 24px);background:var(--white);border:1px solid var(--kraft);
  border-radius:8px;padding:8px;box-shadow:0 16px 40px rgba(43,38,34,.18)}
.nav-search-panel[hidden]{display:none}
.nav-search-panel input{flex:1;min-width:0;border:1px solid var(--line);border-radius:6px;padding:9px 11px;
  font-family:'Archivo';font-size:14px;color:var(--ink);outline:none}
.nav-search-panel input:focus{border-color:var(--accent)}
.nav-search-panel button{background:var(--accent);color:#fff;border:0;border-radius:6px;padding:0 14px;
  font-weight:600;font-size:13px;cursor:pointer}
.nav-actions .city-picker-compact .city-picker-btn{padding:0 9px;height:36px;gap:4px}
.nav-actions .city-picker-compact .cpb-name{max-width:110px}
.nav-actions .city-picker-compact .cpb-name:empty{display:none}
.nav-actions .city-picker-compact .cpb-caret{margin-left:0;padding:2px 3px}
.city-picker-panel-right{left:auto;right:0}

@media(max-width:1279px){
  /* header → hamburger (never a wrapped two-line desktop row) */
  .mobile-burger{display:flex}
  .nav-actions{display:none !important}
  .nav{justify-content:space-between}
}

@media(max-width:900px){

  /* catbar stays visible + swipeable at every width, still with real
     vertical breathing room (not the old cramped 0-padding strip) — just
     tightens its side padding and item gaps to match the mobile container
     gutter below instead of desktop's roomier 28px/22px. Arrows hide here:
     touch devices already have native momentum swipe (-webkit-overflow-
     scrolling:touch above), so a floating arrow button would just be
     redundant chrome sitting on top of the fade edge. The Catalog dropdown
     also hides here — its wide desktop panel doesn't belong on a phone
     screen, and mobile already gets every category (including the 7
     main-nav ones scrolling below) via the drawer's own Catalog accordion
     (see .md-accordion below). */
  .catbar-row{padding:8px 16px;gap:10px}
  .catbar-pinned{gap:10px}
  .catbar-pinned .nav-mega-wrap{display:none}
  .catbar-inner{gap:18px;cursor:auto}
  .catbar-arrow{display:none}

  /* 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}
  .priceline{flex-wrap:wrap;gap:10px 8px}
  .pd-price-value{font-size:16px}
  .pd-price-label{min-width:auto}
  .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:26px;padding-bottom:26px}
  .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,#1C1815,#2B2622 55%,#3A2E28);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:#1C1815;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:#1C1815 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(240,228,211,.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 Items 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 Items 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 Items (furniture side). */
.woodenitems-promo{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:linear-gradient(120deg,#1C1815,#2B2622);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}
.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(107,78,61,.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(107,78,61,.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(43,38,34,.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}
}

/* ============================================================
   USA HOMEPAGE — PREMIUM SECTIONS
   Cinematic hero, Chiniot Story heritage band, Shop by Room tiles,
   Why Grainhouse trust band, and the restyled Featured grid. All additive
   (own classes) so the shared .hero/.home-section/.pcard rules other pages
   still use (woodenitems-home, blog, etc.) are untouched.
   ============================================================ */

/* ---------- HERO (cinematic, full-bleed) ----------
   Text must stay readable over ANY uploaded photo, regardless of how bright
   or busy it is — a ::before overlay (not an inline gradient baked into the
   background-image) guarantees the same darkening every time, layered under
   a linear fade (stronger at top/bottom, lighter in the middle) plus a
   radial "spotlight" darkening specifically behind the left-aligned copy
   block. Heading stays high-contrast warm white; --oak brass is reserved for
   the eyebrow + the <em> accent word only, never the whole heading. */
.hero-cinematic{background-size:cover;background-position:center;position:relative}
.hero-cinematic::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 65% 75% at 18% 45%,rgba(15,12,10,.6),transparent 70%),
    linear-gradient(180deg,rgba(16,13,10,.72) 0%,rgba(16,13,10,.42) 45%,rgba(14,11,9,.82) 100%);
}
.hero-inner-cinematic{grid-template-columns:1fr;padding:96px 28px 116px;text-align:left;position:relative;z-index:1}
.hero-inner-cinematic .hero-copy{max-width:640px}
.hero-inner-cinematic .hero-cta{margin-bottom:8px}
.hero-cinematic .eyebrow{text-shadow:0 2px 10px rgba(0,0,0,.5)}
.hero-cinematic h1{text-shadow:0 2px 18px rgba(0,0,0,.6),0 1px 4px rgba(0,0,0,.55)}
.hero-cinematic p{opacity:1;text-shadow:0 1px 8px rgba(0,0,0,.45)}

/* Word-by-word fade/slide-in for the hero heading — each <span class="hw">
   gets its stagger delay inline (see home.blade.php), the animation itself
   is pure CSS so the heading always renders (just without the entrance
   motion) if JS is off; prefers-reduced-motion shows it instantly. */
.hero h1 .hw{display:inline-block;opacity:0;transform:translateY(16px);animation:heroWordIn .7s cubic-bezier(.22,1,.36,1) both}
@keyframes heroWordIn{to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){
  .hero h1 .hw{animation:none;opacity:1;transform:none}
}

/* ---------- THE CHINIOT STORY (heritage band) ---------- */
.heritage-band{width:100%;background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:72px 0}
.heritage-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.heritage-image{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:4/3;box-shadow:0 24px 50px rgba(43,38,34,.16)}
.heritage-image img{width:100%;height:100%;object-fit:cover}
.heritage-image-placeholder{
  width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:linear-gradient(135deg,var(--kraft),#e7d8c2 55%,var(--kraft));color:var(--accent-2);text-align:center;padding:24px;
}
.heritage-image-placeholder svg{width:52px;height:52px;opacity:.55}
.heritage-image-placeholder span{font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;opacity:.8}
.eyebrow-dark{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.16em;color:var(--accent-2);text-transform:uppercase;margin-bottom:16px;display:inline-flex;align-items:center;gap:10px}
.eyebrow-dark::before{content:'';width:32px;height:1px;background:var(--accent-2)}
.heritage-copy h2{font-size:clamp(1.7rem,3.4vw,2.3rem);margin-bottom:18px}
.heritage-copy p{color:#4a4038;max-width:520px;margin-bottom:24px}
.heritage-link{display:inline-flex;font-weight:600;font-size:14.5px;color:var(--accent);border-bottom:2px solid var(--accent);padding-bottom:2px}

/* ---------- SHOP BY ROOM ---------- */
.room-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.room-tile{position:relative;border-radius:12px;overflow:hidden;height:340px;display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate}
.room-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.82;transition:.35s;z-index:0}
.room-tile:hover img{opacity:1;transform:scale(1.05)}
/* themed gradient placeholders (self-hosted, no external image) shown until a
   real photo is uploaded on the category — each room gets a subtly different
   hue so the row doesn't look like four identical blanks. */
.room-tile::before{content:'';position:absolute;inset:0;z-index:0}
.room-tile-0::before{background:linear-gradient(150deg,#3a2e26,#6b4e3d 60%,#8a6d3f)}
.room-tile-1::before{background:linear-gradient(150deg,#2b2622,#4a3a2e 60%,#8a6d3f)}
.room-tile-2::before{background:linear-gradient(150deg,#33291f,#6b4e3d 55%,#b08d57)}
.room-tile-3::before{background:linear-gradient(150deg,#241f1b,#4a3a2e 60%,#6b4e3d)}
.room-tile-body{position:relative;z-index:1;padding:22px;background:linear-gradient(transparent,rgba(23,19,16,.82))}
.room-tile-body h3{color:#fff;font-family:'Fraunces',serif;font-size:1.35rem;font-weight:600;margin-bottom:6px}
.room-tile-body span{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--oak);letter-spacing:.03em}

/* ---------- WHY GRAINHOUSE (trust band) ---------- */
.trust-band{width:100%;background:var(--kraft);padding:52px 0}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:36px}
.trust-item{text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.trust-icon{width:56px;height:56px;border-radius:50%;background:var(--white);border:1px solid var(--line-strong);display:grid;place-items:center;color:var(--accent);margin-bottom:4px}
.trust-icon svg{width:26px;height:26px}
.trust-item h4{font-family:'Fraunces',serif;font-weight:600;font-size:1.05rem;color:var(--walnut)}
.trust-item p{font-size:13.5px;color:#5c5044;max-width:230px;line-height:1.5}

@media(max-width:960px){
  .heritage-grid{gap:40px}
  .room-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:820px){
  .heritage-band{padding:48px 0}
  .heritage-grid{grid-template-columns:1fr;gap:28px}
  .heritage-image{aspect-ratio:16/10}
  .trust-grid{grid-template-columns:repeat(2,1fr);gap:28px 20px}
}

@media(max-width:900px){
  .hero-inner-cinematic{padding:64px 20px 84px}
}

@media(max-width:700px){
  .hero-inner-cinematic{padding:56px 20px 72px}
}

@media(max-width:480px){
  .room-grid{grid-template-columns:1fr;gap:16px}
  .room-tile{height:220px}
  .trust-band{padding:36px 0}
  .trust-grid{grid-template-columns:1fr;gap:26px}
  .trust-item p{max-width:none}
  .heritage-copy p{max-width:none}
}


/* =====================================================================
   PHASE 1 (ported from PK, USA palette) — Wooden Items deals, AE deal
   cards, countdowns, variant picker, B2B tiers / MOQ, bulk discount,
   cart / checkout lines, stock badge, line icons, product-card hover
   preview and product image protection. PK's --hc-teak / --hc-forest
   map to the USA walnut / forest tones via fallbacks. Home-page (Phase 2)
   rows and favourite hearts are not included.
   ===================================================================== */

/* ---------- line icons (<x-ico>, App\Support\Icons) ---------- */
.ico{display:inline-block;width:1em;height:1em;vertical-align:-.14em;flex:none;overflow:visible}
.ico-sm{width:.85em;height:.85em}
.ico-star{color:#D99A1E}

/* ---------- product page: variant picker ---------- */
.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}

/* ---------- stock badge ---------- */
.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}

/* ---------- product page B2B block (tiers + MOQ; quote form is Phase 3) ---------- */
.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}

/* ---------- automatic bulk discount ---------- */
.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;color:#B45309}
.pd-bulk-icon .ico{width:20px;height:20px}
.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 / checkout / confirmation lines ---------- */
.cart-item-variant{font-size:12px;color:#7a6a5c;margin-top:2px}
.cart-item-wholesale{font-size:12px;font-weight:600;color:#065F46;margin-top:2px}
.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}

/* ---------- deal card (components/product-card-ae) ---------- */
.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;z-index:2;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;z-index:2;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;z-index:2;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-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-stars .ico{width:12px;height:12px;vertical-align:-1px}
.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-ends .ico{width:12px;height:12px;vertical-align:-2px}
.ae-add{position:absolute;right:8px;bottom:10px;width:32px;height:32px;border-radius:50%;border:0;background:var(--hc-teak,var(--walnut));color:#fff;font-size:14px;cursor:pointer;opacity:.9;display:grid;place-items:center}
.ae-add:hover{opacity:1;background:var(--accent)}
.ae-add .ico{width:16px;height:16px}
.ae-card .ae-card-body{padding-right:44px}

/* ---------- countdowns ---------- */
.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)}

/* ---------- deals pages (handicraft/deals) ---------- */
.ae-page{padding-top:18px;padding-bottom:10px}
.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-deals-hero p.ae-deals-ends{margin:8px 0 0;font-size:12.5px;color:#78716c}
.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,var(--line));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}
.ae-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
@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))}}
@media(max-width:760px){.ae-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){
  .ae-page{padding-left:10px;padding-right:10px}
  .ae-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .ae-card{border-radius:10px}
  .ae-card-body{padding:6px 8px 10px}
  .ae-title{font-size:12.5px}
  .ae-price{font-size:15.5px}
  .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}
}

/* ---------- product-card hover preview (public/js/card-hover.js) — desktop only ---------- */
[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,.imgwrap img,.ae-card-media img,.pd-main-img img,.pcard img,.pcard-mini 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}
/* product-card: wholesale / bulk badge (Wooden Items) */
.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}

/* =====================================================================
   PHASE 2 STAGE 4 — Handcrafted Décor store (/woodenitems)
   AliExpress structure, Grainhouse skin (C12): walnut / kraft / brass,
   terracotta only for deal accents. Mobile-first: base rules are the phone
   layout; min-width queries add the desktop grid. Stage 7 polishes.
   ===================================================================== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:root{--hc-deal:#B4442C;--hc-deal-soft:#FBEDE7;--hc-card:#fff;--hc-radius:12px}

/* ---------- store menu bar (under the site header) ---------- */
.store-strip{background:var(--kraft);color:var(--walnut);font-size:12.5px;font-weight:600;text-align:center;padding:6px 16px;border-bottom:1px solid var(--line)}
.store-nav{background:var(--paper);border-bottom:1px solid var(--line);position:relative;z-index:40}
.store-nav-inner{display:flex;align-items:center;gap:6px;overflow-x:auto;scrollbar-width:none;padding-top:8px;padding-bottom:8px;-webkit-overflow-scrolling:touch}
.store-nav-inner::-webkit-scrollbar{display:none}
.store-nav a{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;font-size:13px;font-weight:600;color:var(--walnut);text-decoration:none;white-space:nowrap;border:1px solid transparent}
.store-nav a:hover{background:var(--kraft)}
.store-nav a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.store-nav a.on{background:var(--walnut);color:var(--kraft)}
.store-nav a.is-hot{color:var(--hc-deal)}
.store-nav a.is-hot.on{background:var(--hc-deal);color:#fff}
.store-nav .ico{width:15px;height:15px}
.store-nav-home{font-family:'Fraunces',serif;font-size:15px!important;font-weight:600!important;border-color:var(--line-strong)!important}
.store-nav-cats{flex:0 0 auto;position:static}
.store-nav-cats-btn{border-color:var(--line-strong)!important}
.store-nav-caret{display:none}
.store-nav-menu{display:none}
.store-nav-links{display:flex;gap:4px;flex:0 0 auto}
.store-nav-cart .wi-cart-count{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--accent);color:#fff;font-size:11px;font-weight:800}
.store-nav-cart.on .wi-cart-count{background:var(--kraft);color:var(--walnut)}
@media(min-width:1025px){
  .store-nav-inner{overflow:visible}
  .store-nav-links{margin-left:auto}
  .store-nav-caret{display:inline-block}
  .store-nav-cats.has-menu{position:relative}
  .store-nav-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:60;width:min(920px,calc(100vw - 80px));padding:18px 20px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 48px rgba(28,24,21,.18);grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 20px}
  .store-nav-cats.has-menu:hover .store-nav-menu,.store-nav-cats.has-menu:focus-within .store-nav-menu{display:grid}
  .store-nav-menu-col{display:flex;flex-direction:column;gap:2px;min-width:0}
  .store-nav-menu a{padding:4px 6px;border-radius:6px;font-weight:500;font-size:13px;white-space:normal}
  .store-nav-menu a.store-nav-menu-parent{font-weight:700;color:var(--accent)}
}

/* ---------- hero zone: category menu | hero | side panel ---------- */
.hc-hero-zone{background:linear-gradient(180deg,var(--kraft) 0%,var(--paper) 100%);padding:14px 0 18px}
.hc-hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.hc-hero-main{min-width:0}
.hc-hero-slider .promo-slider{margin:0}
.hc-hero-card{border-radius:16px;padding:26px 20px;color:var(--kraft);background:linear-gradient(120deg,var(--walnut-2) 0%,var(--walnut) 55%,#4a3a2e 100%);background-size:cover;background-position:center;min-height:260px;display:flex;flex-direction:column;justify-content:center;gap:10px}
.hc-hero-eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--oak)}
.hc-hero-card h1{margin:0;font-family:'Fraunces',serif;font-weight:500;font-size:28px;line-height:1.15;color:#fff}
.hc-hero-card h1 em{font-style:italic;color:var(--oak)}
.hc-hero-card p{margin:0;color:rgba(240,228,211,.88);font-size:14.5px;line-height:1.55;max-width:560px}
.hc-hero-search{display:flex;gap:0;max-width:520px;margin-top:4px;background:#fff;border-radius:999px;padding:4px;box-shadow:0 6px 20px rgba(0,0,0,.18)}
.hc-hero-search input{flex:1 1 auto;min-width:0;border:0;background:transparent;padding:10px 14px;font-size:15px;color:var(--ink);outline:none}
.hc-hero-search button{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;border:0;border-radius:999px;background:var(--accent);color:#fff;font-weight:700;padding:0 16px;cursor:pointer}
.hc-hero-search button span{display:none}
.hc-hero-search:focus-within{outline:2px solid var(--oak);outline-offset:2px}
.hc-hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:6px}
.hc-hero-link{color:var(--kraft);font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.hc-hero-link:hover{color:#fff}
.hc-hero-side{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.hc-side-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;color:var(--ink);text-decoration:none;min-width:0}
.hc-side-welcome{grid-column:1/-1;display:flex;flex-direction:column;gap:6px}
.hc-side-welcome strong{font-family:'Fraunces',serif;font-size:16px;font-weight:600}
.hc-side-welcome span{font-size:12.5px;color:#7a6a5c}
.hc-side-welcome .btn{justify-content:center;text-align:center}
.hc-side-link{font-size:12.5px;font-weight:600;color:var(--accent)}
.hc-side-row{display:flex;align-items:center;gap:10px}
.hc-side-row:hover{border-color:var(--accent)}
.hc-side-ico{flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--kraft);color:var(--accent)}
.hc-side-ico .ico{width:18px;height:18px}
.hc-side-row strong{display:block;font-size:13px}
.hc-side-row small{display:block;font-size:11.5px;color:#7a6a5c}
.hc-side-contact{grid-column:1/-1;display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--accent);text-decoration:none;padding:4px}
@media(min-width:600px){
  .hc-hero-card{padding:36px 34px;min-height:300px}
  .hc-hero-card h1{font-size:36px}
  .hc-hero-search button span{display:inline}
  .hc-hero-side{grid-template-columns:repeat(4,minmax(0,1fr))}
  .hc-side-welcome{grid-column:auto}
  .hc-side-contact{grid-column:1/-1}
}
@media(min-width:1025px){
  .hc-hero-zone{padding:18px 0 22px}
  .hc-hero-grid{grid-template-columns:240px minmax(0,1fr) 240px;align-items:start}
  .hc-hero-grid.no-menu{grid-template-columns:minmax(0,1fr) 240px}
  .hc-hero-card{min-height:360px}
  .hc-hero-card h1{font-size:42px}
  .hc-hero-side{grid-template-columns:minmax(0,1fr)}
  .hc-side-welcome,.hc-side-contact{grid-column:auto}
}

/* category menu (hero, left) — collapsible panel on phones, flyouts on desktop */
.hc-catmenu{background:#fff;border:1px solid var(--line);border-radius:12px;min-width:0}
.hc-catmenu-head{display:flex;align-items:center;justify-content:space-between;width:100%;padding:12px 14px;border:0;background:transparent;font-weight:700;font-size:14px;color:var(--walnut);cursor:pointer}
.hc-catmenu-head > span{display:inline-flex;align-items:center;gap:8px}
.hc-catmenu-caret{transition:transform .2s}
.hc-catmenu.open .hc-catmenu-caret{transform:rotate(180deg)}
.hc-catmenu-list{list-style:none;margin:0;padding:0 6px 6px;display:none}
.hc-catmenu.open .hc-catmenu-list{display:block}
.hc-catmenu-item{position:static}
.hc-catmenu-row{display:flex;align-items:center}
.hc-catmenu-row > a{flex:1 1 auto;display:flex;align-items:center;gap:10px;padding:9px 8px;border-radius:8px;color:var(--ink);text-decoration:none;font-size:13.5px;min-width:0}
.hc-catmenu-row > a:hover{background:var(--paper);color:var(--accent)}
.hc-catmenu-ico{flex:0 0 auto;color:var(--accent-2)}
.hc-catmenu-ico .ico{width:17px;height:17px}
.hc-catmenu-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hc-catmenu-toggle{flex:0 0 auto;width:36px;height:36px;border:0;background:transparent;color:#9a8a7c;cursor:pointer;border-radius:8px;transition:transform .2s}
.hc-catmenu-item.expanded .hc-catmenu-toggle{transform:rotate(90deg)}
.hc-catmenu-fly{display:none;padding:2px 8px 10px 40px}
.hc-catmenu-item.expanded .hc-catmenu-fly{display:block}
.hc-catmenu-fly-head a{font-weight:700;font-size:13px;color:var(--accent);display:inline-flex;align-items:center;gap:4px;padding:4px 0}
.hc-catmenu-fly-grid{display:flex;flex-direction:column}
.hc-catmenu-fly-grid a{padding:5px 0;font-size:13px;color:#57483c;text-decoration:none}
.hc-catmenu-fly-grid a:hover{color:var(--accent)}
@media(min-width:1025px){
  .hc-catmenu{position:relative;align-self:stretch}
  .hc-catmenu-head{cursor:default;pointer-events:none}
  .hc-catmenu-caret{display:none}
  .hc-catmenu-list{display:block;max-height:420px;overflow-y:auto;scrollbar-width:thin}
  .hc-catmenu-item.has-sub:hover > .hc-catmenu-row > a,.hc-catmenu-item.has-sub:focus-within > .hc-catmenu-row > a{background:var(--paper);color:var(--accent)}
  .hc-catmenu-toggle{display:none}
  .hc-catmenu-fly{position:absolute;top:0;left:100%;z-index:30;width:520px;min-height:100%;padding:18px 20px;background:#fff;border:1px solid var(--line);border-radius:0 12px 12px 0;box-shadow:12px 12px 36px rgba(28,24,21,.14)}
  .hc-catmenu-item.has-sub:hover > .hc-catmenu-fly,.hc-catmenu-item.has-sub:focus-within > .hc-catmenu-fly{display:block}
  .hc-catmenu-fly-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 18px;margin-top:8px}
}

/* ---------- quick category icons + trust strip ---------- */
.ae-icons{background:#fff;border-bottom:1px solid var(--line)}
.ae-icons-track{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-top:12px;padding-bottom:12px;-webkit-overflow-scrolling:touch}
.ae-icons-track::-webkit-scrollbar{display:none}
.ae-icon{flex:0 0 76px;display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:var(--ink);text-align:center}
.ae-icon > span{display:grid;place-items:center;width:50px;height:50px;border-radius:50%;background:var(--paper);border:1px solid var(--line);color:var(--accent);transition:background .15s,color .15s}
.ae-icon .ico{width:22px;height:22px}
.ae-icon small{font-size:11.5px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ae-icon:hover > span{background:var(--walnut);color:var(--kraft)}
.ae-icon-hot > span{background:var(--hc-deal-soft);border-color:#F1C8B9;color:var(--hc-deal)}
.trust-strip{background:var(--walnut);color:var(--kraft)}
.trust-strip-inner{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;padding-top:12px;padding-bottom:12px}
.trust-strip-item{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600}
.trust-strip-item .ico{flex:0 0 auto;width:17px;height:17px;color:var(--oak)}
@media(min-width:900px){.trust-strip-inner{grid-template-columns:repeat(4,auto);justify-content:space-between}}

/* ---------- section heads ---------- */
.hc-home .home-section{padding-top:22px;padding-bottom:6px}
.ae-sec-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin:0 0 12px}
.ae-sec-head h2{margin:0;font-family:'Fraunces',serif;font-weight:600;font-size:22px;color:var(--walnut)}
.ae-sec-sub{font-size:12.5px;color:#7a6a5c}
.ae-sec-head > a{margin-left:auto;display:inline-flex;align-items:center;gap:2px;font-size:13px;font-weight:700;color:var(--accent);text-decoration:none;white-space:nowrap}
.ae-sec-head > a .ico{width:14px;height:14px}
@media(min-width:768px){.ae-sec-head h2{font-size:26px}}

/* ---------- promo tiles ---------- */
.hc-promo-tiles{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin:4px 0 6px}
.hc-promo-tile{position:relative;display:block;border-radius:14px;overflow:hidden;background:var(--kraft);color:#fff;text-decoration:none;aspect-ratio:16/7}
.hc-promo-tile img{width:100%;height:100%;object-fit:cover;display:block}
.hc-promo-copy{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;padding:14px 16px;background:linear-gradient(0deg,rgba(28,24,21,.78) 0%,rgba(28,24,21,0) 70%)}
.hc-promo-copy strong{font-family:'Fraunces',serif;font-size:18px;font-weight:600}
.hc-promo-copy span{font-size:13px;opacity:.9}
.hc-promo-copy em{font-style:normal;font-weight:700;font-size:13px;color:var(--oak);display:inline-flex;align-items:center;gap:4px}
@media(min-width:768px){.hc-promo-2{grid-template-columns:repeat(2,minmax(0,1fr))}.hc-promo-3{grid-template-columns:repeat(3,minmax(0,1fr))}.hc-promo-tile{aspect-ratio:16/9}}

/* ---------- category grid ---------- */
.hc-cat-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.hc-cat-tile{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px 12px;background:#fff;border:1px solid var(--line);border-radius:var(--hc-radius);text-decoration:none;color:var(--ink);text-align:center;min-width:0;transition:border-color .15s,box-shadow .15s}
.hc-cat-tile:hover{border-color:var(--accent);box-shadow:0 8px 22px rgba(43,38,34,.1)}
.hc-cat-tile-media{display:grid;place-items:center;width:100%;aspect-ratio:1/1;border-radius:10px;overflow:hidden;background:var(--paper);margin-bottom:4px}
.hc-cat-tile-media img{width:100%;height:100%;object-fit:cover}
.hc-cat-tile-ico{color:var(--accent-2)}
.hc-cat-tile-ico .ico{width:34px;height:34px}
.hc-cat-tile strong{font-size:12.5px;line-height:1.3;font-weight:700;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hc-cat-tile small{font-size:11.5px;color:#7a6a5c}
@media(min-width:600px){.hc-cat-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:1025px){.hc-cat-tiles{grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}.hc-cat-tile strong{font-size:13.5px}}

/* ---------- store product rows (x-scroll-rows variant="hc-scroll") ----------
   AE cards / deal tiles at a fixed width in the marquee; a native swipe
   strip up to tablet width and whenever motion is reduced. */
.hc-scroll .scroll-track{gap:12px}
.hc-scroll .scroll-track > .ae-card,.hc-scroll .scroll-track > .scroll-dup > .ae-card{flex:0 0 auto;width:190px}
.hc-scroll .scroll-track > .hc-td-tile,.hc-scroll .scroll-track > .scroll-dup > .hc-td-tile{flex:0 0 auto;width:150px}
@media(max-width:768px){
  .hc-scroll .scroll-row{overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scrollbar-width:none}
  .hc-scroll .scroll-row::-webkit-scrollbar{display:none}
  .hc-scroll .scroll-track{animation:none;width:auto;gap:10px}
  .hc-scroll .scroll-track .scroll-dup{display:none}
  .hc-scroll .scroll-track > .ae-card{width:42vw;max-width:200px;scroll-snap-align:start}
  .hc-scroll .scroll-track > .hc-td-tile{width:34vw;max-width:160px;scroll-snap-align:start}
}
@media (prefers-reduced-motion: reduce){
  .hc-scroll .scroll-row{overflow-x:auto;scrollbar-width:thin}
  .hc-scroll .scroll-track{width:auto}
  .hc-scroll .scroll-track .scroll-dup{display:none}
}

/* ---------- Today's Deals ---------- */
.hc-td{padding-top:22px}
.hc-td-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.hc-td-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;min-width:0}
.hc-td-best{background:linear-gradient(180deg,#FBF6EE 0%,#fff 46%)}
.hc-td-super{background:linear-gradient(180deg,var(--hc-deal-soft) 0%,#fff 46%)}
.hc-td-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.hc-td-head h3{margin:0;font-family:'Fraunces',serif;font-size:19px;font-weight:600;color:var(--walnut)}
.hc-td-pill{display:inline-flex;align-items:center;gap:2px;padding:5px 11px;border-radius:999px;background:var(--walnut);color:var(--kraft);font-size:12px;font-weight:700;text-decoration:none}
.hc-td-pill.is-deal{background:var(--hc-deal);color:#fff}
.hc-td-pill .ico{width:13px;height:13px}
.hc-td-tile{display:flex;flex-direction:column;gap:3px;color:var(--ink);text-decoration:none;min-width:0}
.hc-td-img{position:relative;display:block;aspect-ratio:1/1;border-radius:10px;overflow:hidden;background:var(--paper)}
.hc-td-img img{width:100%;height:100%;object-fit:cover}
.hc-td-off{position:absolute;top:6px;left:6px;z-index:2;background:var(--hc-deal);color:#fff;font-size:11.5px;font-weight:800;padding:2px 6px;border-radius:6px}
.hc-td-title{font-size:12.5px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-td-price{font-family:'Archivo';font-weight:800;font-size:15.5px;color:var(--ink)}
.hc-td-price.is-deal{color:var(--hc-deal)}
.hc-td-was{font-size:11.5px;color:#a8a29e}
.hc-td-meta{display:flex;gap:8px;font-size:11.5px;color:#7a6a5c}
.hc-td-stars{color:#B45309;font-weight:700}
.hc-td-stars .ico{width:11px;height:11px;vertical-align:-1px}
@media(min-width:900px){.hc-td-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hc-td-grid.is-single{grid-template-columns:minmax(0,1fr)}}

/* ---------- Flash Sale ---------- */
.ae-flash{margin-top:22px;padding:14px;border-radius:16px;background:linear-gradient(120deg,var(--walnut-2) 0%,var(--walnut) 60%,#5a3a2a 100%)}
.ae-flash-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;margin-bottom:12px}
.ae-flash-head h2{margin:0;display:inline-flex;align-items:center;gap:8px;font-family:'Fraunces',serif;font-weight:600;font-size:22px;color:#fff}
.ae-flash-head h2 .ico{color:#F2A98C;width:22px;height:22px}
.ae-flash-head > a{margin-left:auto;display:inline-flex;align-items:center;gap:2px;color:var(--kraft);font-weight:700;font-size:13px;text-decoration:none}
.ae-flash .ae-countdown b{color:var(--hc-deal)}
@media(min-width:768px){.ae-flash{padding:18px 20px}}

/* ---------- Shop by price ---------- */
.hc-price-bands{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.hc-price-band{display:flex;flex-direction:column;gap:2px;padding:14px;border-radius:var(--hc-radius);background:#fff;border:1px solid var(--line);text-decoration:none;color:var(--ink);transition:border-color .15s,background .15s}
.hc-price-band:hover{border-color:var(--accent);background:var(--paper)}
.hc-price-band strong{font-family:'Archivo';font-size:16px;font-weight:800;color:var(--walnut)}
.hc-price-band small{font-size:12px;color:#7a6a5c}
@media(min-width:768px){.hc-price-bands{grid-template-columns:repeat(5,minmax(0,1fr))}}

/* ---------- Top stores ---------- */
.hc-stores{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.hc-store{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--hc-radius);background:#fff;border:1px solid var(--line);text-decoration:none;color:var(--ink);min-width:0}
.hc-store:hover{border-color:var(--accent)}
.hc-store-logo{flex:0 0 auto;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;overflow:hidden;background:var(--kraft);color:var(--accent);font-family:'Fraunces',serif;font-weight:700;font-size:20px}
.hc-store-logo img{width:100%;height:100%;object-fit:cover}
.hc-store-body{flex:1 1 auto;display:flex;flex-direction:column;min-width:0}
.hc-store-body strong{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-store-body small,.hc-store-body em{font-size:12px;color:#7a6a5c;font-style:normal}
.hc-store-cta{flex:0 0 auto;display:inline-flex;align-items:center;font-size:12.5px;font-weight:700;color:var(--accent)}
@media(min-width:600px){.hc-stores{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1025px){.hc-stores{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------- More to Love ---------- */
.ae-more{padding-top:26px}
.ae-more-title{display:flex;align-items:center;gap:14px;margin:0 0 14px;font-family:'Fraunces',serif;font-weight:600;font-size:22px;color:var(--walnut)}
.ae-more-title::before,.ae-more-title::after{content:"";flex:1 1 auto;height:1px;background:var(--line-strong)}
.ae-more-actions{display:flex;justify-content:center;margin:18px 0 6px}
.ae-load-more{min-width:200px;padding:12px 26px;border-radius:999px;border:1px solid var(--walnut);background:#fff;color:var(--walnut);font-weight:700;font-size:14px;cursor:pointer;transition:background .15s,color .15s}
.ae-load-more:hover{background:var(--walnut);color:var(--kraft)}
.ae-load-more:disabled{opacity:.6;cursor:wait}
.ae-stock{font-size:11.5px;font-weight:700;color:#9a3412}
.ae-hint{font-size:11.5px;font-weight:600;color:var(--accent-2)}

/* ---------- reviews ---------- */
.hc-reviews{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.hc-review{margin:0;padding:14px 16px;background:#fff;border:1px solid var(--line);border-radius:var(--hc-radius);display:flex;flex-direction:column;gap:8px}
.hc-review blockquote{margin:0;font-size:14px;line-height:1.55;color:#3d332b}
.hc-review figcaption{font-size:12.5px;color:#7a6a5c}
@media(min-width:768px){.hc-reviews{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- handcraft story ---------- */
.wooden-feature-band{margin-top:34px;padding:30px 0;background:var(--kraft)}
.wooden-feature-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:center}
.wooden-feature-image{border-radius:16px;overflow:hidden;aspect-ratio:4/3;background:var(--paper)}
.wooden-feature-image img{width:100%;height:100%;object-fit:cover}
.wooden-feature-image-placeholder{width:100%;height:100%;display:grid;place-items:center;color:var(--oak)}
.wooden-feature-image-placeholder .ico{width:72px;height:72px}
.wooden-feature-copy{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.wooden-feature-eyebrow{font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-2)}
.wooden-feature-copy h2{margin:0;font-family:'Fraunces',serif;font-weight:500;font-size:28px;color:var(--walnut)}
.wooden-feature-copy p{margin:0;color:#4a3f36;line-height:1.65}
@media(min-width:900px){.wooden-feature-band{padding:52px 0}.wooden-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px}.wooden-feature-copy h2{font-size:36px}}

/* ---------- promise band + newsletter ---------- */
.wooden-guarantee-band{padding:30px 0;background:var(--paper)}
.wgb-heading{text-align:center;margin-bottom:18px}
.wgb-heading .k{font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-2)}
.wgb-heading h2{margin:6px 0 0;font-family:'Fraunces',serif;font-weight:600;font-size:24px;color:var(--walnut)}
.wgb-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.wgb-item{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:start;padding:14px;background:#fff;border:1px solid var(--line);border-radius:var(--hc-radius)}
.wgb-icon{grid-row:span 2;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--kraft);color:var(--accent)}
.wgb-icon .ico{width:20px;height:20px}
.wgb-item h3{margin:0;font-size:15px;color:var(--walnut)}
.wgb-item p{margin:2px 0 0;font-size:13px;line-height:1.5;color:#6b5d50}
@media(min-width:600px){.wgb-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1025px){.wooden-guarantee-band{padding:44px 0}.wgb-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.wgb-heading h2{font-size:30px}}
.newsletter-band{background:var(--walnut);color:var(--kraft);padding:28px 0}
.newsletter-inner{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:center}
.newsletter-copy h2{margin:0 0 4px;font-family:'Fraunces',serif;font-weight:500;font-size:22px;color:#fff}
.newsletter-copy p{margin:0;font-size:13.5px;color:rgba(240,228,211,.8)}
.newsletter-form{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.newsletter-form input[type=email],.newsletter-form input[type=tel]{min-width:0;padding:12px 14px;border-radius:10px;border:1px solid rgba(240,228,211,.25);background:rgba(255,255,255,.06);color:#fff;font-size:15px}
.newsletter-form input::placeholder{color:rgba(240,228,211,.6)}
.newsletter-form input:focus{outline:2px solid var(--oak);outline-offset:1px}
.newsletter-form button{padding:12px 20px;border:0;border-radius:10px;background:var(--oak);color:var(--walnut-2);font-weight:800;cursor:pointer}
.newsletter-form button:disabled{opacity:.6;cursor:wait}
.newsletter-honeypot{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.newsletter-msg{grid-column:1/-1;margin:0;font-size:13.5px;font-weight:600}
.newsletter-msg.ok{color:#BFE3C6}
.newsletter-msg.err{color:#F5B7A5}
@media(min-width:900px){.newsletter-inner{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}.newsletter-form{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto}}

/* ---------- back to top (store pages) ---------- */
.back-to-top{position:fixed;right:16px;bottom:88px;z-index:45;width:42px;height:42px;border-radius:50%;border:1px solid var(--line-strong);background:#fff;color:var(--walnut);display:grid;place-items:center;box-shadow:0 6px 18px rgba(28,24,21,.16);cursor:pointer;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s,transform .2s,visibility .2s}
.back-to-top.show{opacity:1;visibility:visible;transform:none}
.back-to-top .ico{width:18px;height:18px}
@media (prefers-reduced-motion: reduce){.back-to-top{transition:none}}

/* ---------- listing / category page ---------- */
.hc-cat-hero{background:var(--paper);border-bottom:1px solid var(--line);padding:16px 0 14px}
.hc-cat-title{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin-top:6px}
.hc-cat-title h1{margin:0;font-family:'Fraunces',serif;font-weight:600;font-size:26px;color:var(--walnut)}
.hc-cat-count{font-size:13px;color:#7a6a5c}
.hc-subchips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin-top:12px;padding-bottom:2px}
.hc-subchips::-webkit-scrollbar{display:none}
.hc-subchips a{flex:0 0 auto;padding:6px 12px;border-radius:999px;border:1px solid var(--line-strong);background:#fff;font-size:12.5px;font-weight:600;color:var(--walnut);text-decoration:none;white-space:nowrap}
.hc-subchips a.is-on{background:var(--walnut);border-color:var(--walnut);color:var(--kraft)}
.hc-listing-banner .promo-slider{margin:14px 0 0}
.hc-cat-shell{display:block;padding-top:14px;padding-bottom:10px}
.hc-cat-main{min-width:0}
.hc-cat-mobilebar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:10px}
.hc-cat-mobilebar button{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px;border-radius:10px;border:1px solid var(--line-strong);background:#fff;font-weight:700;font-size:13.5px;color:var(--walnut);cursor:pointer}
.hc-cat-mobilebar b{display:inline-grid;place-items:center;min-width:20px;height:20px;border-radius:999px;background:var(--accent);color:#fff;font-size:11px}
/* phone drawers */
.hc-cat-left,.hc-cat-right{position:fixed;top:0;bottom:0;z-index:210;width:min(340px,88vw);overflow-y:auto;background:var(--paper);padding:0 14px 24px;box-shadow:0 0 40px rgba(0,0,0,.25);visibility:hidden;transition:transform .25s ease,visibility .25s}
.hc-cat-left{left:0;transform:translateX(-105%)}
.hc-cat-right{right:0;transform:translateX(105%)}
body.hc-open-hcCatDrawer .hc-cat-left,body.hc-open-hcFilterDrawer .hc-cat-right{transform:none;visibility:visible}
.hc-cat-backdrop{position:fixed;inset:0;z-index:205;background:rgba(28,24,21,.45);opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
body.hc-open-hcCatDrawer .hc-cat-backdrop,body.hc-open-hcFilterDrawer .hc-cat-backdrop{opacity:1;visibility:visible}
body.hc-open-hcCatDrawer,body.hc-open-hcFilterDrawer{overflow:hidden}
.hc-drawer-bar{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;margin:0 -14px 10px;padding:12px 14px;background:var(--paper);border-bottom:1px solid var(--line)}
.hc-drawer-bar strong{font-family:'Fraunces',serif;font-size:18px;color:var(--walnut)}
.hc-drawer-bar button{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;background:#fff;color:var(--walnut);cursor:pointer}
@media (prefers-reduced-motion: reduce){.hc-cat-left,.hc-cat-right,.hc-cat-backdrop{transition:none}}
/* category nav */
.hc-cnav{background:#fff;border:1px solid var(--line);border-radius:var(--hc-radius);overflow:hidden}
.hc-cnav-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--line);font-weight:700;font-size:14px;color:var(--walnut)}
.hc-cnav-head > span{display:inline-flex;align-items:center;gap:8px}
.hc-cnav-head a{font-size:12.5px;color:var(--accent);font-weight:700}
.hc-cnav-head a.is-on{text-decoration:underline}
.hc-cnav-list{list-style:none;margin:0;padding:6px}
.hc-cnav-row{display:flex;align-items:center;border-radius:8px}
.hc-cnav-row.is-current{background:var(--kraft)}
.hc-cnav-row > a{flex:1 1 auto;display:flex;align-items:center;gap:9px;padding:8px;min-width:0;font-size:13.5px;color:var(--ink);text-decoration:none}
.hc-cnav-row > a:hover{color:var(--accent)}
.hc-cnav-ico{flex:0 0 auto;color:var(--accent-2)}
.hc-cnav-ico .ico{width:16px;height:16px}
.hc-cnav-name{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hc-cnav-count{flex:0 0 auto;font-size:11.5px;color:#9a8a7c}
.hc-cnav-toggle{flex:0 0 auto;width:34px;height:34px;border:0;background:transparent;color:#9a8a7c;border-radius:8px;cursor:pointer;transition:transform .2s}
.hc-cnav-item.is-open > .hc-cnav-row .hc-cnav-toggle{transform:rotate(90deg)}
.hc-cnav-sub{list-style:none;margin:0;padding:0 0 6px 34px;display:none}
.hc-cnav-item.is-open > .hc-cnav-sub{display:block}
.hc-cnav-sub a{display:block;padding:5px 8px;border-radius:6px;font-size:13px;color:#57483c;text-decoration:none}
.hc-cnav-sub a:hover,.hc-cnav-sub a.is-current{color:var(--accent);background:var(--paper)}
/* filters */
.hc-filter{background:#fff;border:1px solid var(--line);border-radius:var(--hc-radius);padding:12px 14px;margin-top:12px}
.hc-filter-head{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;color:var(--walnut);padding-bottom:8px;border-bottom:1px solid var(--line)}
.hc-filter fieldset{border:0;margin:0;padding:12px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.hc-filter legend{padding:0;margin-bottom:6px;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#7a6a5c}
.hc-filter select,.hc-filter input[type=number]{width:100%;min-width:0;padding:9px 10px;border-radius:8px;border:1px solid var(--line-strong);background:#fff;font-size:14px;color:var(--ink)}
.hc-filter-price{display:flex;align-items:center;gap:6px}
.hc-filter-quick{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.hc-filter-quick a{padding:5px 10px;border-radius:999px;border:1px solid var(--line-strong);font-size:12px;font-weight:600;color:var(--walnut);text-decoration:none}
.hc-filter-quick a.is-on{background:var(--walnut);border-color:var(--walnut);color:var(--kraft)}
.hc-radio,.hc-check{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink);cursor:pointer;min-height:28px}
.hc-radio input,.hc-check input{width:16px;height:16px;accent-color:var(--accent)}
.hc-filter-actions{display:flex;align-items:center;gap:12px;padding-top:12px}
.hc-filter-actions .btn{flex:1 1 auto;justify-content:center}
.hc-filter-actions a{font-size:13px;font-weight:700;color:var(--accent)}
/* discover */
.hc-disc{background:#fff;border:1px solid var(--line);border-radius:var(--hc-radius);padding:12px 14px;margin-top:12px}
.hc-disc h3{margin:0 0 8px;font-size:14px;color:var(--walnut)}
.hc-disc-row,.hc-disc-store{display:flex;align-items:center;gap:10px;padding:7px 0;text-decoration:none;color:var(--ink);border-top:1px solid var(--line)}
.hc-disc-row:first-of-type,.hc-disc-store:first-of-type{border-top:0}
.hc-disc-row img{flex:0 0 auto;width:46px;height:46px;border-radius:8px;object-fit:cover;background:var(--paper)}
.hc-disc-row > span:last-child,.hc-disc-store > span:last-child{display:flex;flex-direction:column;min-width:0}
.hc-disc strong{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-disc em{font-style:normal;font-size:12px;color:#7a6a5c}
.hc-disc em s{color:#a8a29e}
.hc-disc em b{color:var(--hc-deal)}
.hc-disc-rank{flex:0 0 auto;width:20px;font-weight:800;color:var(--accent-2);text-align:center}
.hc-disc-logo{flex:0 0 auto;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;overflow:hidden;background:var(--kraft);color:var(--accent);font-weight:800}
.hc-disc-logo img{width:100%;height:100%;object-fit:cover}
.hc-disc-more{display:inline-flex;align-items:center;gap:2px;margin-top:6px;font-size:12.5px;font-weight:700;color:var(--accent)}
/* products column */
.hc-store-chip{display:flex;align-items:center;gap:10px;padding:10px 12px;margin-bottom:10px;border-radius:var(--hc-radius);background:#fff;border:1px solid var(--line)}
.hc-store-chip-logo{flex:0 0 auto;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;overflow:hidden;background:var(--kraft);color:var(--accent)}
.hc-store-chip-logo img{width:100%;height:100%;object-fit:cover}
.hc-store-chip > span:nth-child(2){flex:1 1 auto;min-width:0;font-size:13px;color:#7a6a5c}
.hc-store-chip small{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.hc-store-chip strong{color:var(--ink)}
.hc-store-chip-x{flex:0 0 auto;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;color:var(--walnut)}
.hc-mode-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin-bottom:10px}
.hc-mode-tabs::-webkit-scrollbar{display:none}
.hc-mode-tabs a{flex:0 0 auto;padding:8px 14px;border-radius:999px;border:1px solid var(--line-strong);background:#fff;font-size:13px;font-weight:700;color:var(--walnut);text-decoration:none;white-space:nowrap}
.hc-mode-tabs a.on{background:var(--walnut);border-color:var(--walnut);color:var(--kraft)}
.hc-sortbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:10px;font-size:13px;color:#7a6a5c}
.hc-sortbar label{display:inline-flex;align-items:center;gap:8px}
.hc-sortbar select{padding:8px 10px;border-radius:8px;border:1px solid var(--line-strong);background:#fff;font-size:13.5px;color:var(--ink);max-width:62vw}
.hc-pills{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.hc-pills a{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border-radius:999px;background:var(--kraft);font-size:12.5px;font-weight:600;color:var(--walnut);text-decoration:none}
.hc-pills a .ico{width:12px;height:12px}
.hc-pills a.hc-pills-clear{background:transparent;color:var(--accent);text-decoration:underline}
.hc-cat-pages.is-js{display:none}
@media(min-width:1025px){
  .hc-cat-shell{display:grid;grid-template-columns:260px minmax(0,1fr);grid-template-areas:"left main" "right main";grid-template-rows:auto 1fr;column-gap:22px;align-items:start;padding-top:20px}
  .hc-cat-left,.hc-cat-right{position:static;width:auto;overflow:visible;background:transparent;padding:0;box-shadow:none;visibility:visible;transform:none;transition:none;z-index:auto}
  .hc-cat-left{grid-area:left}
  .hc-cat-right{grid-area:right}
  .hc-cat-main{grid-area:main}
  .hc-drawer-bar,.hc-cat-mobilebar,.hc-cat-backdrop{display:none}
  .hc-cat-title h1{font-size:32px}
  .hc-cat-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(min-width:1280px){.hc-cat-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}

/* =====================================================================
   PHASE 2 STAGE 5 — favorites heart, mini card, product page, account
   ===================================================================== */
/* ---------- favorites heart (public/js/wooden-favorites.js) ---------- */
.fav-heart{position:absolute;top:8px;right:8px;z-index:3;display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:var(--walnut);box-shadow:0 2px 8px rgba(28,24,21,.16);cursor:pointer;transition:transform .15s,color .15s}
.fav-heart .ico{width:18px;height:18px}
.fav-heart:hover{transform:scale(1.08);color:var(--hc-deal)}
.fav-heart:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fav-heart.is-fav{color:var(--hc-deal)}
.fav-heart.is-fav .ico path{fill:currentColor}
.fav-heart:disabled{opacity:.6;cursor:wait}
.fav-heart-lg{position:static;flex:0 0 auto;width:44px;height:44px;border:1px solid var(--line-strong);box-shadow:none}
.fav-heart-lg .ico{width:22px;height:22px}
.ae-card-media .fav-heart{top:6px;right:6px;width:30px;height:30px}
.ae-card-media .fav-heart .ico{width:16px;height:16px}
.fav-prompt{position:fixed;left:50%;bottom:20px;z-index:300;display:flex;align-items:center;gap:12px;max-width:calc(100vw - 32px);padding:12px 12px 12px 16px;border-radius:12px;background:var(--walnut);color:var(--kraft);font-size:14px;box-shadow:0 12px 32px rgba(0,0,0,.28);transform:translate(-50%,20px);opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s}
.fav-prompt.show{opacity:1;visibility:visible;transform:translate(-50%,0)}
.fav-prompt-link{flex:0 0 auto;padding:7px 14px;border-radius:999px;background:var(--oak);color:var(--walnut-2);font-weight:800;text-decoration:none}
.fav-prompt-close{flex:0 0 auto;width:30px;height:30px;border:0;border-radius:50%;background:transparent;color:var(--kraft);font-size:20px;line-height:1;cursor:pointer}
@media (prefers-reduced-motion: reduce){.fav-heart,.fav-prompt{transition:none}}

/* ---------- product-card-wooden-mini ---------- */
.pcard-wooden-mini{text-decoration:none;color:inherit;position:relative}
.pcard-wooden-mini .sale-ribbon{position:absolute;top:8px;left:8px;z-index:2}
.pcard-wooden-mini .pcard-b2b{bottom:8px}
.pwm-price-row{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px}
.pwm-price-row .price{color:var(--hc-deal)}
.pwm-meta-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:4px}
.pwm-sold{font-size:11.5px;color:#7a6a5c}
.pwm-meta-row .stock-badge{margin-top:0}
.add-to-cart-mini.is-hint{display:block;text-align:center;background:var(--paper);color:var(--accent-2);border:1px solid var(--line);cursor:default}
.fav-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media(min-width:600px){.fav-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}}
@media(min-width:1025px){.fav-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}

/* ---------- product page (Handcrafted Décor) ---------- */
.pd-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.pd-title-row h1{margin:0;min-width:0}
.pd-meta-stars{color:#B45309;font-weight:700;text-decoration:none}
.pd-wholesale-label{display:inline-block;margin-top:8px;padding:4px 10px;border-radius:999px;background:rgba(58,36,22,.9);color:#FDE68A;font-size:12px;font-weight:700}
.pd-delivery-note{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:13.5px;font-weight:600;color:var(--walnut)}
.pd-delivery-note .ico{color:var(--accent-2);width:18px;height:18px}
.pd-promises{margin:0 0 16px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--paper)}
.pd-promises-heading{font-weight:700;font-size:13.5px;color:var(--walnut);margin-bottom:8px}
.pd-promises ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.pd-promises li{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:var(--walnut)}
.pd-promises li .ico{flex:0 0 auto;width:16px;height:16px;margin-top:2px;color:var(--accent-2)}
.pd-promises li small{display:block;color:#7a6a5c;font-size:12px}
@media(min-width:600px){.pd-promises ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
.review-verified-note{margin:0 0 10px;font-size:12.5px;color:#7a6a5c}
.pd-related{padding-top:28px}
.checkout-saved-note{display:block;margin-top:6px;font-size:12px;color:#7a6a5c}
.checkout-saved-note a{color:var(--accent);font-weight:600}

/* ---------- buyer account pages ---------- */
.account-page{padding-top:20px;padding-bottom:56px}
.account-subnav{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.account-subnav-links{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;max-width:100%}
.account-subnav-links::-webkit-scrollbar{display:none}
.account-subnav-links a{flex:0 0 auto;padding:8px 14px;border-radius:999px;border:1px solid var(--line-strong);background:#fff;font-size:13px;font-weight:700;color:var(--walnut);text-decoration:none;white-space:nowrap}
.account-subnav-links a.is-active{background:var(--walnut);border-color:var(--walnut);color:var(--kraft)}
.account-subnav form .btn{padding:7px 14px;font-size:13px}
.account-subnav .btn-ghost{background:transparent;color:var(--walnut);border:1px solid var(--line-strong)}
.account-subnav .btn-ghost:hover{background:var(--walnut);color:var(--kraft)}
/* account tables (orders, order items): stacked label/value rows on phones */
@media(max-width:600px){
  .account-page .cart-table-wrap{border:0;overflow:visible}
  .account-page .cart-table{min-width:0}
  .account-page .cart-table thead{display:none}
  .account-page .cart-table tr{display:block;margin-bottom:10px;padding:8px 12px;border:1px solid var(--line);border-radius:12px;background:#fff}
  .account-page .cart-table td{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px dashed var(--line);text-align:right;overflow-wrap:anywhere}
  .account-page .cart-table tr td:last-child{border-bottom:0}
  .account-page .cart-table td[data-label]::before{content:attr(data-label);flex:0 0 auto;text-align:left;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#7a6a5c}
}
.vreg-success{margin-bottom:14px;padding:10px 14px;border-radius:10px;background:#ECF7EE;color:#1E5B2B;font-weight:600;font-size:13.5px}
.order-detail-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px}
.order-detail-top{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:16px}
.order-detail-top .btn{display:inline-flex;align-items:center;gap:6px}
.order-detail-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:4px 24px;font-size:14px}
.order-detail-grid p{margin:0 0 6px;overflow-wrap:anywhere}
.order-status-badge{font-weight:700}
@media(min-width:768px){.order-detail-card{padding:22px 24px}.order-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* order status tracker — vertical on phones, horizontal from tablet */
.order-status-track{margin:6px 0 4px}
.ost-steps{display:flex;flex-direction:column;gap:0}
.ost-step{display:flex;align-items:center;gap:10px;font-size:13.5px;color:#9a8a7c}
.ost-dot{flex:0 0 auto;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:2px solid var(--line-strong);background:#fff;font-size:12px;font-weight:800}
.ost-dot .ico{width:14px;height:14px}
.ost-step.is-done{color:var(--walnut)}
.ost-step.is-done .ost-dot{background:var(--accent);border-color:var(--accent);color:#fff}
.ost-step.is-current{color:var(--walnut);font-weight:700}
.ost-step.is-current .ost-dot{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 4px rgba(107,78,61,.14)}
.ost-line{display:block;width:2px;height:18px;margin-left:13px;background:var(--line-strong)}
.ost-line.is-done{background:var(--accent)}
.ost-cancelled{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;background:var(--hc-deal-soft);color:var(--hc-deal);font-weight:700}
@media(min-width:768px){
  .ost-steps{flex-direction:row;align-items:flex-start}
  .ost-step{flex-direction:column;gap:6px;text-align:center;flex:0 0 auto;width:92px}
  .ost-line{flex:1 1 auto;width:auto;height:2px;margin:13px -26px 0}
}

/* =====================================================================
   PHASE 2 STAGE 6 — combined homepage (/): deals strip, Handcrafted
   Décor block, newsletter band. USA tokens; terracotta (--hc-deal) only
   on deal accents. Mobile-first.
   ===================================================================== */

/* ---------- deals strip ---------- */
.home-deals-strip .sec-head{flex-wrap:wrap;align-items:center}
.home-deals-strip .sec-head .k{color:var(--hc-deal)}
.home-deals-links{display:flex;flex-wrap:wrap;gap:8px 18px}
.home-deals-countdown{flex-wrap:wrap}
.home-deal-furniture .add-to-cart-mini.is-hint{cursor:pointer}

/* ---------- Handcrafted Décor block ---------- */
.home-decor{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:32px 0 8px}
.home-decor-feature{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:center}
.home-decor-media{border-radius:14px;overflow:hidden;aspect-ratio:16/9;background:var(--kraft)}
.home-decor-media img{width:100%;height:100%;object-fit:cover;display:block}
.home-decor-media .heritage-image-placeholder .ico{width:48px;height:48px;opacity:.55}
.home-decor-copy h2{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(1.4rem,3.4vw,2.1rem);line-height:1.2;color:var(--walnut);margin-bottom:12px}
.home-decor-copy p{color:#4a4038;max-width:520px;margin-bottom:18px}
.home-decor-copy .eyebrow-dark{margin-bottom:10px}
.home-decor-icons{margin-top:20px;padding-left:0;padding-right:0}
.home-decor-products{padding-top:22px;padding-bottom:28px}
.home-decor-products .sec-head{margin-bottom:18px}
@media(min-width:820px){
  .home-decor{padding-top:48px}
  .home-decor-feature{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:40px}
  .home-decor-media{aspect-ratio:4/3}
}

/* ---------- phones ---------- */
@media(max-width:600px){
  .home-deals-strip .sec-head,.home-decor-products .sec-head{gap:10px}
  .home-deals-links{width:100%}
}

/* =====================================================================
   PHASE 2 STAGE 7 — polish across the store home, listing, product page,
   account and homepage. Overrides only (no new sections): one section-
   heading scale, one button system, one deal colour, one card price
   style, visible keyboard focus, 16px phone gutters, reduced motion.
   ===================================================================== */
:root{--muted:#7a6a5c}

/* ---------- buttons: one system ---------- */
/* primary hover was a leftover burnt orange from the old palette */
.btn-primary:hover{background:var(--walnut)}
/* store pills / tabs share one height + radius */
.store-nav a,.hc-mode-tabs a,.account-subnav-links a,.hc-subchips a,.hc-filter-quick a{min-height:36px;display:inline-flex;align-items:center}
/* Décor product page: WhatsApp keeps its brand green; phone + inquiry
   become the same outline button instead of three different fills */
.store-handicraft .pd-info .creveal.call,.store-handicraft .pd-info .inquiry-toggle,.store-handicraft .review-block .review-toggle{background:#fff;color:var(--walnut);border:1.5px solid var(--line-strong)}
.store-handicraft .pd-info .creveal.call:hover,.store-handicraft .pd-info .inquiry-toggle:hover,.store-handicraft .review-block .review-toggle:hover{background:var(--walnut);border-color:var(--walnut);color:var(--kraft);opacity:1}
.store-handicraft .pd-add-to-cart .btn-primary{justify-content:center;font-size:15px;min-height:50px}

/* ---------- keyboard focus: visible everywhere (zero specificity, so a
   component's own focus style still wins) ---------- */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:2px}
:where(header.site,.site-footer,.hero,.hc-hero-card,.ae-flash,.newsletter-band,.trust-strip,.fav-prompt) :where(a,button,input,select,textarea):focus-visible{outline-color:var(--oak)}
.hc-catmenu-row > a:focus-visible,.hc-catmenu-fly a:focus-visible,.hc-cnav-row > a:focus-visible{outline-offset:-2px}

/* ---------- section headings: one scale (22px phone → 28px desktop) ---------- */
.ae-sec-head h2,.sec-head h2,.home-section .sec-head h2,.ae-more-title,.wgb-heading h2,.newsletter-copy h2,.ae-flash-head h2{font-size:clamp(1.375rem,1rem + 1.4vw,1.75rem);line-height:1.2;letter-spacing:-.01em}
.ae-sec-sub,.hc-cat-count,.hc-side-welcome span,.hc-side-row small,.pwm-sold,.hc-td-meta,.hc-store-body small,.hc-review figcaption{color:var(--muted)}
/* phones: heading + "View more" on one line, the note under them */
@media(max-width:767px){
  .ae-sec-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;column-gap:12px;row-gap:2px}
  .ae-sec-head h2{grid-column:1;grid-row:1}
  .ae-sec-head > a{grid-column:2;grid-row:1;margin-left:0}
  .ae-sec-head .ae-sec-sub{grid-column:1/-1;grid-row:2}
}

/* ---------- deals: terracotta only for the discount, everywhere ---------- */
.ae-off,.pcard-wooden-mini .sale-ribbon{background:var(--hc-deal);color:#fff;font-family:'Archivo',sans-serif;font-weight:800;font-size:11.5px;letter-spacing:0;padding:3px 7px;border-radius:6px}
.ae-card.is-deal .ae-price,.pwm-price-row .price,.store-handicraft .pd-info .price-now{color:var(--hc-deal)}
.store-handicraft .pd-info .disc-badge{background:var(--hc-deal-soft);color:var(--hc-deal);font-weight:700}

/* ---------- card prices: one style (sans, tabular) on store cards ---------- */
.ae-price,.hc-td-price,.pcard-wooden-mini .price{font-family:'Archivo',sans-serif;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.pcard-wooden-mini .price{font-size:16px}
.price-was,.ae-was,.hc-td-was{font-variant-numeric:tabular-nums}
/* mini cards: the add / hint button sits on the card's bottom edge, so a
   row of cards lines up whatever the title length or stock note */
.pcard-wooden-mini .body{flex:1 1 auto}
.pcard-wooden-mini .pwm-meta-row{margin-bottom:2px}
.pcard-wooden-mini .add-to-cart-mini{margin-top:auto}
.pcard-wooden-mini .add-to-cart-mini:not(.is-hint):hover{background:var(--walnut-2)}

/* ---------- card hover: one lift + shadow ---------- */
.ae-card:hover,.pcard-mini:hover,.hc-cat-tile:hover,.hc-store:hover,.hc-price-band:hover{box-shadow:0 10px 26px rgba(43,38,34,.12)}

/* ---------- product page (Décor): price hierarchy ---------- */
.store-handicraft .pd-info .priceline{flex-wrap:wrap;gap:8px 12px;align-items:center}
.store-handicraft .pd-info .priceline .price,.store-handicraft .pd-info .price-now{font-family:'Fraunces',serif;font-size:clamp(1.75rem,1.4rem + 1.2vw,2.125rem);font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums}
.store-handicraft .pd-info .priceline .price small{font-size:13px}
.store-handicraft .pd-info .price-was{font-size:14px}

/* ---------- checkout: returns policy link ---------- */
.checkout-policy-note{margin:12px 0 0;font-size:13px;color:var(--muted)}
.checkout-policy-note a{color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:2px}

/* ---------- account pages ---------- */
.account-page h1,.account-page h2{letter-spacing:-.01em}
.account-page .cart-table-wrap{border-radius:14px}

/* ---------- phones (≤600px): 16px side gutters like the rest of the site,
   full-width hero buttons, roomier store rows ---------- */
@media(max-width:600px){
  .ae-page{padding-left:16px;padding-right:16px}
  .ae-grid{gap:10px}
  /* tinted tier rows bled 8px past the screen (−24px margins vs the 16px gutter) */
  .premium-section,.gold-section{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px;border-radius:0}
  .hero-inner-cinematic .hero-cta{flex-direction:column;align-items:stretch;gap:10px}
  .hero-inner-cinematic .hero-cta .btn{justify-content:center;width:100%}
  .hc-hero-cta .btn{flex:1 1 auto;justify-content:center}
  .store-handicraft .pd-info .contact-block{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .store-handicraft .pd-info .contact-block .creveal{justify-content:center;width:100%}
  .store-handicraft .pd-info .contact-block .crevealed{grid-column:1/-1}
  .store-handicraft .pd-info .inquiry-toggle{width:100%;justify-content:center}
}

/* ---------- reduced motion: no hover lifts, no smooth scrolling ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .btn-primary:hover,.fav-heart:hover{transform:none}
  .ae-card,.pcard-mini,.hc-cat-tile,.hc-store,.hc-price-band,.btn,.creveal{transition:none}
}

/* =====================================================================
   PHASE 2 STAGE 7b — Super Deal Packages: image mosaic, badge, cart line,
   package page, order grouping. Stage 7 tokens; terracotta only for the
   saving. Mobile-first.
   ===================================================================== */
.pkg-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;background:var(--kraft);color:var(--walnut);font-size:11.5px;font-weight:700;letter-spacing:.01em;white-space:nowrap}
/* 1–4 item images in one square */
.pkg-mosaic{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:2px;aspect-ratio:1/1;overflow:hidden;border-radius:var(--hc-radius);background:var(--paper)}
.pkg-mosaic img{width:100%;height:100%;object-fit:cover;display:block;min-height:0}
.pkg-mosaic-1{grid-template-columns:minmax(0,1fr)}
.pkg-mosaic-2 img{grid-row:span 2}
.pkg-mosaic-3 img:first-child{grid-row:span 2}
.pkg-mosaic-empty{grid-column:1/-1;grid-row:1/-1;display:grid;place-items:center;color:var(--oak)}
.pkg-mosaic-empty .ico{width:40px;height:40px}
.pkg-mosaic-sm{flex:0 0 auto;width:64px;height:64px;border-radius:10px}
/* cart line */
.cart-package-items{list-style:none;margin:4px 0 0;padding:0;font-size:12.5px;color:var(--muted)}
.cart-package-items li{line-height:1.45}
.cart-package-row .pkg-badge{margin-bottom:4px}
/* package page */
.pkg-page{padding-top:20px;padding-bottom:56px}
.pkg-page-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:start}
.pkg-mosaic-lg{max-width:560px;width:100%}
.pkg-page-info{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0}
.pkg-page-info h1{margin:2px 0 0}
.pkg-desc{color:#4a3f36;margin:4px 0 0}
.pkg-price-block{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px;margin-top:8px}
/* was .pkg-price — renamed in 7b-5: that class is the vendor pricing page's (line ~1179) */
.dpk-page-price{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(1.75rem,1.4rem + 1.2vw,2.125rem);line-height:1.1;color:var(--hc-deal);font-variant-numeric:tabular-nums}
.pkg-save{display:inline-flex;padding:3px 9px;border-radius:999px;background:var(--hc-deal-soft);color:var(--hc-deal);font-weight:700;font-size:13px}
.pkg-price-note{margin:0;font-size:12.5px;color:var(--muted)}
.pkg-ends{display:inline-flex;align-items:center;gap:6px;margin:0;font-size:13px;font-weight:600;color:var(--walnut)}
.pkg-ends .ico{width:16px;height:16px;color:var(--accent-2)}
.pkg-buy{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:8px;width:100%}
.pkg-buy .qty-stepper{margin-bottom:0}
.pkg-buy-btn{flex:1 1 220px;justify-content:center;min-height:50px}
.pkg-quote{width:100%;margin-top:10px;padding:16px;border:1px solid var(--line);border-radius:14px;background:#fff}
.pkg-quote-title{font-size:clamp(1.15rem,1rem + .6vw,1.35rem);margin:0 0 4px}
.pkg-quote .btn{margin-top:12px}
.pkg-contents{margin-top:32px}
.pkg-contents h2{margin-bottom:14px}
.pkg-items{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.pkg-item{display:flex;align-items:center;gap:12px;padding:10px;border:1px solid var(--line);border-radius:var(--hc-radius);background:#fff;min-width:0}
.pkg-item-media{flex:0 0 auto;display:grid;place-items:center;width:72px;height:72px;border-radius:10px;overflow:hidden;background:var(--paper);color:var(--oak)}
.pkg-item-media img{width:100%;height:100%;object-fit:cover}
.pkg-item-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.pkg-item-name{font-weight:700;color:var(--walnut);text-decoration:none;overflow-wrap:anywhere}
.pkg-item-name:hover{color:var(--accent)}
.pkg-item-option{font-size:12.5px;color:var(--accent-2);font-weight:600}
.pkg-item-meta{font-size:12.5px;color:var(--muted)}
@media(min-width:768px){.pkg-items{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:900px){.pkg-page-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:40px}}
/* order screens: package heading row + its items */
.order-package-head td{background:var(--paper);font-weight:700;color:var(--walnut)}
.order-package-item td:first-child{padding-left:22px}
@media(max-width:600px){
  .account-page .cart-table tr.order-package-head{background:var(--paper)}
  .account-page .cart-table tr.order-package-head td{display:block;text-align:left}
  .account-page .cart-table tr.order-package-head td::before{content:none}
  .order-package-item td:first-child{padding-left:0}
}
/* package card (components/deal-package-card) — dpk-*, since .pkg-* is the pricing page's */
.dpk-section{margin:0 0 28px}
.dpk-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.dpk-card{display:flex;flex-direction:column;min-width:0;border:1px solid var(--line);border-radius:var(--hc-radius);background:#fff;overflow:hidden;transition:box-shadow .15s}
.dpk-card:hover{box-shadow:0 6px 18px rgba(43,38,34,.08)}
.dpk-media{position:relative;display:block}
.dpk-media .pkg-mosaic{border-radius:0;aspect-ratio:16/10}
.dpk-count{position:absolute;left:10px;top:10px;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.dpk-body{display:flex;flex-direction:column;gap:6px;padding:12px 14px 14px;flex:1;min-width:0}
.dpk-name{font-weight:700;color:var(--walnut);text-decoration:none;line-height:1.3;overflow-wrap:anywhere}
.dpk-name:hover{color:var(--accent)}
.dpk-items{margin:0;font-size:12.5px;line-height:1.45;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dpk-prices{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin-top:auto}
.dpk-price{font-weight:700;font-size:20px;color:var(--hc-deal);font-variant-numeric:tabular-nums}
.dpk-prices .price-was{font-size:13px}
.dpk-prices .pkg-save{font-size:12px;padding:2px 8px}
.dpk-ends{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--walnut)}
.dpk-ends .ico{width:14px;height:14px;color:var(--accent-2)}
.dpk-buy{margin:0}
.dpk-btn{width:100%;justify-content:center;min-height:44px;margin-top:4px}
@media(min-width:600px){.dpk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.dpk-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.dpk-btn{white-space:nowrap}
/* compact cards (homepage strip): stacked on phones, mosaic beside the text from 768px */
.dpk-card-compact .dpk-price{font-size:17px}
@media(min-width:768px){
  .dpk-card-compact{flex-direction:row}
  .dpk-card-compact .dpk-media{flex:0 0 120px}
  .dpk-card-compact .pkg-mosaic{height:100%;aspect-ratio:auto;min-height:120px}
  .dpk-card-compact .dpk-body{padding:10px 12px}
}
/* homepage deals strip — packages row (swipe on phones) */
.dpk-row-title{font-size:16px;margin:22px 0 10px;color:var(--walnut)}
.dpk-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(280px,86%);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;overscroll-behavior-x:contain}
.dpk-row>.dpk-card{scroll-snap-align:start}
@media(min-width:768px){.dpk-row{grid-auto-columns:minmax(320px,calc((100% - 24px)/3))}}
/* product page: Buy together and save */
.dpk-together{margin:28px 0 8px;padding:16px;border:1px solid var(--line);border-radius:14px;background:#fff}
.dpk-together h2{font-size:clamp(1.15rem,1rem + .6vw,1.35rem);margin:0 0 12px}
.dpk-together-row{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.dpk-together-row+.dpk-together-row{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.dpk-thumbs{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.dpk-thumb{display:flex;align-items:center;gap:6px}
.dpk-thumb+.dpk-thumb::before{content:'+';font-weight:700;color:var(--muted)}
.dpk-thumb a{position:relative;display:grid;place-items:center;width:64px;height:64px;border-radius:10px;overflow:hidden;background:var(--paper);color:var(--oak)}
.dpk-thumb img{width:100%;height:100%;object-fit:cover}
.dpk-thumb-qty{position:absolute;right:3px;bottom:3px;padding:0 5px;border-radius:999px;background:rgba(43,38,34,.78);color:#fff;font-size:11px;font-weight:700}
.dpk-together-info{display:flex;flex-direction:column;gap:4px;min-width:0}
@media(min-width:900px){
  .dpk-together-row{grid-template-columns:auto minmax(0,1fr) 230px;align-items:center;gap:18px}
}
/* ============================================================
   PHASE 3A — S2 shipping: packing slip (PK label sync, no postage,
   US Letter) + parcel rows on the buyer order tracker
   ============================================================ */
.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-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:letter;margin:0.5in}
}
.ost-shipments{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.ost-shipments li{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;border:1px solid var(--line,#e7dfd3);border-radius:10px;background:var(--paper,#faf6ef);font-size:14px}
.ost-shipments li > span{flex:1 1 200px;min-width:0;overflow-wrap:anywhere}
.ost-shipments .ost-tracking{font-family:'JetBrains Mono',monospace;font-size:13px}
.ost-shipments .ost-muted{color:#7a6a5c;font-size:13px}
.ost-shipments a{font-weight:700;white-space:nowrap}

/* ============================================================
   PHASE 3A — S4 live chat (PK sync; hc-* vars with USA fallbacks)
   ============================================================ */

.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,#F6ECD9);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,#C98F30);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,#3A2416);color:#fff}
.hc-chat-avatar{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--hc-honey,#E0A84B);color:var(--hc-teak,#3A2416);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,#F6ECD9);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,#C98F30);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,#E0A84B);border-color:var(--hc-honey-2,#C98F30);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,#2F4A3A);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,#C98F30)}
.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-chat-tip{margin:0;padding:8px 14px;font-size:13px;background:#FFF8EA;border-top:1px solid var(--line);color:#78350F}
.hc-chat-tip[hidden]{display:none}
.hc-message-seller{display:inline-flex;align-items:center;gap:6px}
.hc-order-chat{display:block;margin-top:2px;font-size:12.5px;font-weight:700;color:var(--accent);text-decoration:none}
.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}
.hc-message-seller{margin:0 0 10px}

/* ============================================================
   PHASE 3A — S5 bulk quotes + RFQ (USA layout, PK naming)
   ============================================================ */
.hc-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.hc-quote-box{margin:14px 0;border:1px solid var(--line-strong);border-radius:10px;background:#fff}
.hc-quote-box > summary{cursor:pointer;padding:12px 14px;font-weight:700;display:flex;gap:8px;align-items:center;list-style:none}
.hc-quote-box[open] > summary{border-bottom:1px solid var(--line)}
.hc-quote-form,.hc-accept-form{padding:14px}
.hc-quote-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px 14px}
.hc-quote-note{font-size:12.5px;color:#7a6a5c;margin:8px 0 0}
.hc-quote-err{color:#b91c1c;font-size:13px;margin:6px 0}
.hc-trade-wrap{padding:28px 28px 72px;max-width:860px}
.hc-trade-card{display:block;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;margin:0 0 14px;color:inherit;text-decoration:none}
.hc-trade-card strong{display:block}
.hc-trade-muted{display:block;color:#7a6a5c;font-size:13.5px;margin-top:2px}
.hc-trade-dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px 16px;margin:12px 0 0}
.hc-trade-dl dt{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#7a6a5c}
.hc-trade-dl dd{margin:2px 0 0;font-weight:600;overflow-wrap:anywhere}
.hc-trade-note{margin:10px 0 0;font-size:14px}
.hc-trade-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin:18px 0 10px}
.hc-trade-heading h2,.hc-trade-h2{margin:18px 0 10px;font-size:20px}
.hc-trade-foot{font-size:13px;color:#7a6a5c}
.hc-flash-ok{padding:12px 14px;border-radius:10px;background:#ECFDF5;border:1px solid #6EE7B7;color:#064E3B;margin:0 0 14px}
.hc-pill{display:inline-block;padding:3px 10px;border-radius:999px;background:#f5f5f4;font-size:12px;font-weight:700;margin-top:10px}
.hc-pill.ok{background:#DCFCE7;color:#166534}
.hc-offer.is-accepted{border-color:#6EE7B7}
.hc-rfq-list{list-style:none;margin:0;padding:0}
@media (max-width:600px){.hc-trade-wrap{padding:16px 16px 72px}}
.vreg-radio input{width:auto;flex:none;margin:0} /* Phase 3A S8: radios sat on their own line in quote / RFQ accept forms */
.hc-accept-form .vreg-radio{margin:6px 0}