:root {
    --green:        #2D3D2C;
    --green-dark:   #1F2E22;
    --green-line:   rgba(255,255,255,0.12);
    --gold:         #B89968;
    --gold-light:   #D4B886;
    --gold-soft:    #C9A461;
    --cream:        #F5EFE3;
    --cream-light:  #FAF6EE;
    --cream-card:   #F4ECDE;
    --ivory:        #FCF9F2;
    --ink:          #2A3320;
    --ink-soft:     #4A4D40;
    --mute:         #7A7E70;
    --hairline:     rgba(42,51,32,0.12);
    --rule-gold:    rgba(184,153,104,0.4);
    --gold-deep:    #a8821f;
    --wine:         #6b1f1f;
    --wine-dark:    #511616;
    --shadow-card:  0 1px 2px rgba(42,51,32,0.04), 0 6px 24px rgba(42,51,32,0.04);
  }
  * { box-sizing: border-box; }
  html, body { margin:0; padding:0; background:#fff; }
  body {
    font-family: 'Jost', system-ui, -apple-system, sans-serif;
    font-size: 14px; line-height: 1.6;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
  }
  .serif { font-family:'Cormorant Garamond', Georgia, serif; font-weight:400; }
  .caps  { text-transform:uppercase; letter-spacing:0.18em; }
  a { color:inherit; text-decoration:none; }
  button { font-family:inherit; cursor:pointer; }

  /* Layout container */
  .wrap { max-width:1280px; margin:0 auto; padding:0 32px; }
  .wrap-wide { max-width:1360px; margin:0 auto; padding:0 32px; }

  /* ===== Topbar ===== */
  .topbar {
    background: var(--green-dark); color:#E8DEC8;
    font-size:12px; letter-spacing:0.06em;
    padding: 10px 32px;
  }
  .topbar-inner { max-width:1360px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; gap:24px; }
  .topbar-left { display:flex; gap:14px; align-items:center; }
  .topbar-left span { display:inline-flex; align-items:center; gap:8px; }
  .topbar-left .sep, .topbar-right .sep { width:4px; height:4px; border-radius:50%; background:var(--gold); flex:0 0 auto; }
  .topbar-left .dot-ico { color:var(--gold); }
  .topbar-left svg { color:var(--gold); }
  .topbar-right { display:inline-flex; gap:14px; align-items:center; }
  .topbar-right a { color:#E8DEC8; text-decoration:none; transition:color .2s ease; }
  .topbar-right a:hover { color:var(--gold); }
  .topbar svg { width:14px; height:14px; }

  /* ===== Header ===== */
  /* Sticky header: the topbar scrolls away and the main header pins to the top.
     `header.header` (0,1,1) out-specifies Flatsome's `.header{position:relative}`
     which loads after us. z-index 1001 matches Flatsome; the mobile drawer (1101)
     still covers it. */
  .header { background:var(--cream-light); border-bottom:1px solid var(--hairline); transition:box-shadow .25s ease; }
  header.header { position:sticky; top:0; z-index:1001; }
  .header.is-stuck { box-shadow:0 6px 22px rgba(42,51,32,.10); }
  .header-inner { display:grid; grid-template-columns: auto 1fr auto; align-items:center; gap:28px; padding:18px 0; }
  .logo { display:flex; align-items:center; gap:14px; }
  .logo img { display:block; height:56px; width:auto; max-width:240px; }

  .nav { display:flex; flex-wrap:nowrap; gap:28px; align-items:center; justify-content:center; font-size:11.5px; letter-spacing:0.14em; text-transform:uppercase; font-weight:600; }
  .nav-item { position:relative; white-space:nowrap; flex:0 0 auto; }
  .nav-item > a {
    padding:10px 2px; display:inline-flex; align-items:center; gap:6px; color:var(--ink); position:relative;
    transition:color .25s ease; white-space:nowrap;
  }
  .nav-item > a::after{
    content:''; position:absolute; left:0; right:0; bottom:-2px; height:2px;
    background:linear-gradient(90deg, var(--gold), var(--gold-soft));
    transform:scaleX(0); transform-origin:left center;
    transition:transform .35s cubic-bezier(.62,.21,.2,1);
    border-radius:2px;
  }
  .nav-item:hover > a, .nav-item.on > a { color:var(--gold); }
  .nav-item:hover > a::after, .nav-item.on > a::after { transform:scaleX(1); }
  .nav .caret { width:10px; height:10px; opacity:0.65; transition: transform .25s; }
  .nav-item:hover .caret { transform: rotate(180deg); opacity:1; }

  /* Dropdown */
  .nav-dd {
    position:absolute; top:calc(100% + 7px); left:50%; transform:translateX(-50%) translateY(8px);
    min-width:220px; background:#fff; border:1px solid var(--hairline); border-radius:10px;
    box-shadow:0 18px 50px -14px rgba(58,36,24,0.28);
    padding:14px 0; opacity:0; pointer-events:none; transition:opacity .28s, transform .28s; z-index:60;
  }
  /* Invisible hover-bridge: spans the gap so moving the cursor from the
     nav item into the panel never drops the :hover (fixes "can't click"). */
  .nav-dd::before { content:''; position:absolute; left:0; right:0; top:-10px; height:10px; }
  .nav-item:hover .nav-dd { opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }
  .nav-dd a {
    display:block; padding:10px 22px; font-size:12px; letter-spacing:0.14em; text-transform:uppercase;
    font-weight:500; color:var(--ink); white-space:nowrap; transition:color .2s, padding-left .2s, background .2s;
  }
  .nav-dd a:hover { color:var(--gold); padding-left:28px; background:var(--ivory); }

  /* Mega menu (Cuban Cigars) — anchored to whole nav for proper centering */
  .nav { position:relative; }
  .nav-mega {
    position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(8px);
    width:920px; max-width:calc(100vw - 64px);
    background:#fff; border:1px solid var(--hairline); border-radius:12px;
    box-shadow:0 24px 60px -18px rgba(58,36,24,0.32);
    padding:22px 24px; opacity:0; pointer-events:none; transition:opacity .3s, transform .3s; z-index:60;
  }
  /* Invisible hover-bridge across the gap (see .nav-dd::before). */
  .nav-mega::before { content:''; position:absolute; left:0; right:0; top:-14px; height:14px; }
  .nav-item:hover .nav-mega { opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }
  .nav-mega-head {
    font-family:'Jost',sans-serif; font-size:10.5px; letter-spacing:0.26em; text-transform:uppercase;
    font-weight:700; color:var(--gold-soft); margin:0 0 14px; padding-bottom:10px;
    border-bottom:1px solid var(--hairline);
  }
  /* Brand wall — every Habanos marque shown with its band/seal */
  .nav-mega-grid { display:grid; grid-template-columns:repeat(6, 1fr); gap:6px; }
  .nav-mega-grid .brand-tile {
    display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
    padding:12px 6px 11px; border-radius:10px; border:1px solid transparent;
    text-transform:none; letter-spacing:0; transition:background .2s, border-color .2s, transform .2s;
  }
  .nav-mega-grid .brand-tile:hover { background:var(--ivory); border-color:var(--hairline); transform:translateY(-2px); }
  .brand-tile-logo {
    width:62px; height:46px; display:flex; align-items:center; justify-content:center;
    background:#fff; border:1px solid var(--hairline); border-radius:8px; padding:5px;
    box-shadow:0 1px 3px rgba(58,36,24,0.07); flex:0 0 auto;
  }
  .brand-tile-logo img { max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block; }
  .brand-tile-name {
    font-family:'Jost',sans-serif; font-size:10.5px; line-height:1.25; font-weight:500;
    color:var(--ink-soft, var(--ink)); transition:color .2s;
  }
  .nav-mega-grid .brand-tile:hover .brand-tile-name { color:var(--gold); }
  .nav-mega-foot { display:flex; justify-content:space-between; align-items:center; margin-top:16px; padding-top:14px; border-top:1px solid var(--hairline); }
  .nav-mega-foot a { font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold); font-weight:600; }
  .nav-mega-foot .accent { color:var(--ink); font-style:italic; font-family:'Cormorant Garamond',serif; font-size:13px; letter-spacing:0; text-transform:none; }

  .actions { display:flex; align-items:center; gap:16px; }
  .search-pill {
    display:flex; align-items:center; gap:0; background:#fff; border:1px solid var(--hairline);
    border-radius:6px; padding:0 0 0 12px; width:190px; height:38px; font-size:12.5px; color:var(--mute);
  }
  /* Higher specificity than Flatsome's input[type=search] (border + inset shadow). */
  .search-pill input,
  .search-pill input[type="search"],
  .search-pill input[type="text"] {
    flex:1; min-width:0; height:100%;
    background:transparent !important; border:none !important; outline:none !important;
    box-shadow:none !important; margin:0 !important; border-radius:0 !important;
    font-family:inherit; font-size:12.5px; color:var(--ink); padding:0 6px;
  }
  .search-pill button { width:38px; height:38px; background:var(--ink) !important; color:#fff; border:none !important; display:flex; align-items:center; justify-content:center; border-radius:0 5px 5px 0 !important; flex-shrink:0; box-shadow:none !important; margin:0 !important; }
  .search-pill button svg { width:14px; height:14px; }
  /* Search submit button — Flatsome injects an inline `button:not(.icon){border-radius:1px!important}`
     and a default ~0.85em button margin. Same specificity as our rules, so it wins by source order,
     leaving a square button with a right-side gap (visible flush issue in the pill + drawer search).
     These parent-scoped selectors out-specify Flatsome so the button sits flush and rounded. */
  .header .search-pill button,
  .mobile-drawer .mobile-drawer-search button { margin:0 !important; border-radius:0 6px 6px 0 !important; flex:0 0 auto; }
  .icon-btn { display:inline-flex; gap:6px; align-items:center; font-size:12px; color:var(--ink); white-space:nowrap; font-weight:500; }
  .icon-btn svg { width:18px; height:18px; }

  /* ===== Mobile search bar =====
     Full-width rounded pill with a plain magnifier, shown ≤1200px (burger mode),
     like the original site. Desktop uses the inline .search-pill instead. */
  .mobile-search{ display:none; }
  @media (max-width:1200px){
    /* Swiss-style: full-width flat search band (no pill), thin top/bottom
       border, left placeholder, green magnifier on the right. */
    .mobile-search{
      display:flex; align-items:center; gap:10px;
      margin:0; padding:0 18px; height:54px; width:100%;
      background:var(--cream-light); border:0; border-radius:0; box-shadow:none;
      border-top:1px solid var(--cco-border,#ece2cf);
      border-bottom:1px solid var(--cco-border,#ece2cf);
    }
    .mobile-search input,
    .mobile-search input[type="search"]{
      flex:1; min-width:0; height:100%;
      border:0 !important; outline:0 !important; background:transparent !important;
      box-shadow:none !important; margin:0 !important; padding:0 !important;
      font-family:'Jost', sans-serif !important; font-size:16px; letter-spacing:.01em; color:var(--cco-fg);
    }
    .mobile-search input::placeholder{ color:var(--cco-muted); opacity:1; }
    .mobile-search button{
      flex:0 0 auto; width:38px; height:38px;
      background:transparent !important; border:0 !important; box-shadow:none !important;
      margin:0 !important; padding:0 !important; border-radius:0 !important;
      color:var(--cco-green); display:flex; align-items:center; justify-content:center; cursor:pointer;
      transition:color .15s;
    }
    .mobile-search button:hover{ color:var(--cco-green-dk); }
    .mobile-search button svg{ width:22px; height:22px; }
  }

  /* Page base in cream so the header/mobile-search band matches the sections
     (was pure white, which showed as an odd white strip above the hero). */
  html body{ background-color:var(--cream-light); }

  /* ===== Hero ===== */
  .hero { background:var(--cream-light); padding: 48px 0 0; position:relative; overflow:hidden; }
  .hero::before {
    content:""; position:absolute; left:0; bottom:0; top:0; width:60%; z-index:0; pointer-events:none;
    background:url("../banners/hero-vintage-etch.jpg") left bottom / auto 100% no-repeat;
    opacity:0.7;
    -webkit-mask-image:linear-gradient(90deg,#000 55%,transparent 100%);
            mask-image:linear-gradient(90deg,#000 55%,transparent 100%);
  }
  .hero > .wrap-wide { position:relative; z-index:1; }
  .hero-grid { display:grid; grid-template-columns: 0.85fr 1.15fr; gap:48px; align-items:stretch; }
  .hero-text { padding: 24px 0 56px; }
  .hero-eyebrow {
    display:inline-flex; align-items:center; gap:12px; color:var(--wine);
    font-size:11px; letter-spacing:0.32em; text-transform:uppercase; font-weight:600; margin-bottom:28px;
  }
  .hero-eyebrow .pip { width:4px; height:4px; border-radius:50%; background:var(--wine); }
  .hero h1 { font-family:'Cormorant Garamond',serif; font-weight:500; font-size:58px; line-height:1.05; margin:0 0 18px; letter-spacing:-0.006em; color:var(--ink); }
  .hero h1 em { font-style:normal; color:var(--ink); font-weight:500; }
  .hero-sub { font-family:'Cormorant Garamond',serif; font-weight:400; font-size:20px; color:var(--ink-soft); margin:0 0 22px; font-style:italic; }
  /* Star ornament divider under H1 */
  .hero-ornament { display:flex; align-items:center; gap:14px; color:var(--wine); margin:0 0 24px; }
  .hero-ornament span { height:1px; width:54px; background:rgba(107,31,31,.35); display:block; }
  .hero-lede { font-size:14.5px; line-height:1.75; color:var(--ink-soft); max-width:440px; margin:0 0 36px; }
  .hero-ctas { display:flex; gap:14px; flex-wrap:wrap; }
  .btn { display:inline-flex; align-items:center; gap:10px; padding:16px 28px; font-size:11.5px;
         letter-spacing:0.22em; text-transform:uppercase; font-weight:600; border-radius:4px; border:none; cursor:pointer; transition:background .2s ease, color .2s ease, box-shadow .2s ease; }
  .btn-primary { background:var(--green); color:var(--cream-light); }
  .btn-primary:hover { background:#3a4c39; }
  .btn-wine { background:var(--wine); color:#fff; }
  .btn-wine:hover { background:var(--wine-dark); color:#fff; box-shadow:0 8px 22px -8px rgba(107,31,31,.5); }
  .btn-ghost { background:transparent; border:1.5px solid var(--ink); color:var(--ink); padding:14.5px 26.5px; }
  .btn-ghost:hover { background:var(--ink); color:var(--cream-light); }
  .btn-gold { background:var(--gold); color:#fff; }
  .btn-gold:hover { background:var(--gold-soft); }

  .hero-image-wrap { position:relative; align-self:stretch; min-height:520px; border-radius:6px; overflow:hidden; box-shadow: 0 18px 50px -14px rgba(58,36,24,.22); }
  .hero-banner-img, .hero-banner-img img { display:block; width:100%; height:100%; }
  .hero-banner-img img { object-fit:cover; object-position:center; }

  /* Trust strip */
  .trust { background:var(--cream-light); padding: 32px 0 48px; border-bottom:1px solid var(--hairline); }
  .trust-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:32px; }
  .trust-item { display:flex; align-items:center; gap:14px; }
  .trust-ico { width:36px; height:36px; flex-shrink:0; color:var(--gold); }
  .trust-item b { display:block; font-size:13px; font-weight:600; color:var(--ink); letter-spacing:0.01em; }
  .trust-item small { display:block; font-size:11.5px; color:var(--mute); margin-top:2px; }

  /* ===== Section heads ===== */
  .ornate-head { display:flex; align-items:center; justify-content:center; gap:18px; margin-bottom:44px; width:max-content; max-width:100%; margin-left:auto; margin-right:auto; text-align:center; }
  .ornate-head .swash { color:var(--wine); width:70px; height:14px; flex:0 0 auto; }
  .ornate-head h2 { text-align:center; }
  .ornate-head h2 { font-family:'Cormorant Garamond',serif; font-weight:600; font-size:clamp(28px,3.6vw,40px); line-height:1.1; letter-spacing:0.01em; text-transform:none; color:var(--ink); margin:0; }

  .row-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:28px; }
  .row-head h2 { font-family:'Cormorant Garamond',serif; font-weight:500; font-size:32px; letter-spacing:0.04em; margin:0; color:var(--ink); }
  .row-head .more-link { font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold); font-weight:600; }

  /* ===== Brands carousel ===== */
  .brands { background:var(--cream-card); padding: 64px 0; }
  .brands-carousel { display:grid; grid-template-columns: auto 1fr auto; align-items:center; gap:24px; }
  .carousel-arrow {
    width:42px; height:42px; border-radius:50%; border:1px solid var(--hairline); background:transparent;
    color:var(--ink); display:flex; align-items:center; justify-content:center; cursor:pointer;
  }
  .carousel-arrow:hover { background:#fff; }
  .carousel-arrow svg { width:14px; height:14px; }
  .brand-circles { display:grid; grid-template-columns:repeat(6, 1fr); gap:22px; }
  .brand-card { display:flex; flex-direction:column; align-items:center; gap:14px; text-decoration:none; }
  .brand-circle {
    aspect-ratio:1/1; width:100%; max-width:104px; margin:0 auto;
    border-radius:50%; overflow:hidden;
    border:3px solid #c9a961;
    background:#fff;
    box-shadow: 0 4px 14px rgba(201,169,97,0.20);
    transition: all .25s ease; position:relative;
  }
  .brand-circle img {
    width:100%; height:100%;
    object-fit:cover; object-position:center;
    display:block;
    image-rendering:auto;
    filter:contrast(1.05) saturate(1.05);
    transition:transform .35s ease;
  }
  .brand-circle:hover { box-shadow: 0 10px 24px rgba(201,169,97,0.34); transform:translateY(-3px); border-color:#b8924a; }
  .brand-circle:hover img { transform:scale(1.06); }
  .brand-card span { font-family:'Cormorant Garamond',serif; font-size:14px; color:var(--ink); letter-spacing:0.04em; text-align:center; }
  .brand-card:hover span { color:var(--wine); }
  image-slot.brand-slot { width:100%; height:100%; border-radius:50%; }
  .brands-foot { text-align:center; margin-top:32px; }
  .brands-foot a { font-size:11px; letter-spacing:0.28em; text-transform:uppercase; color:var(--ink); font-weight:600; transition:color .2s; }
  .brands-foot a:hover { color:var(--wine); }

  /* ===== Best sellers ===== */
  .sellers { background:var(--cream-light); padding: 64px 0 80px; }
  .sellers-grid { display:grid; grid-template-columns:repeat(6, 1fr); gap:16px; }

  /* Section subtitle (under ornate head) */
  .section-sub { text-align:center; max-width:560px; margin:-28px auto 38px; font-size:14px; line-height:1.6; color:var(--mute); }

  /* Limited & Rare — cream background to differentiate from Best Sellers */
  .sellers.limited-rare { background:var(--cream-light); padding:64px 0 80px; border-top:1px solid var(--hairline); }

  /* "Limited" badge on product cards */
  .pcard-badge {
    position:absolute; top:12px; left:12px; z-index:5;
    background:var(--green-dark); color:var(--gold-light);
    font-size:9.5px; letter-spacing:0.16em; text-transform:uppercase; font-weight:700;
    padding:5px 10px; border-radius:3px;
  }
  .pcard { background:#fff; border:1px solid var(--hairline); border-radius:4px; overflow:hidden; transition: all .2s; text-decoration:none; color:inherit; display:flex; flex-direction:column; }
  .pcard:hover { box-shadow: var(--shadow-card); transform:translateY(-2px); }
  .pcard-img-wrap { position:relative; background:var(--ivory); aspect-ratio:1/1; }
  .pcard-img-wrap img { width:100%; height:100%; object-fit:contain; padding:14px; box-sizing:border-box; }
  .pcard-fav {
    position:absolute; top:12px; right:12px; width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.9);
    border:1px solid var(--hairline); display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:5;
    box-shadow:0 1px 4px rgba(42,51,32,.08); transition:background .15s, transform .12s, border-color .15s;
  }
  .pcard-fav:hover { background:#fff; transform:scale(1.06); }
  .pcard-fav svg { width:16px; height:16px; flex:0 0 auto; stroke:var(--ink); fill:none; transition:stroke .15s, fill .15s; }
  .pcard-fav.is-wished { background:var(--wine); border-color:var(--wine); }
  .pcard-fav.is-wished svg { stroke:#fff; fill:#fff; }
  .pcard-fav.loading { opacity:.6; pointer-events:none; }
  .pcard-body { padding:14px 14px 18px; }
  .pcard-name { font-size:14px; font-weight:600; color:var(--ink); margin:0 0 4px; line-height:1.3; }
  .pcard-brand { font-size:12px; color:var(--wine); font-weight:500; margin:0 0 8px; }
  .pcard-stars { color:var(--gold); font-size:12px; letter-spacing:1px; }
  .pcard-stars small { color:var(--mute); margin-left:4px; font-size:11px; letter-spacing:0; }
  .pcard-pricerow { display:flex; justify-content:space-between; align-items:center; margin: 8px 0 12px; }
  .pcard-price { font-size:18px; font-weight:700; color:var(--ink); }
  /* "In Stock" hidden on the home — not useful in the luxury vitrine */
  .pcard-stock { display:none; }
  /* Home cards are a luxury "vitrine": the whole card links to the product — no
     Add-to-Cart and no View cue. (Add-to-Cart lives on the category/shop pages.) */
  .pcard-foot { display:none; }

  /* ===== New Buyers Guide (ref 05) ===== */
  .buyers-guide { background:var(--cream-light); padding:0; position:relative; overflow:hidden; }
  .buyers-guide::after {
    content:""; position:absolute; top:0; bottom:0; right:0; width:360px; z-index:0; pointer-events:none; opacity:0.35;
    background:url("../banners/testi-vintage-etch.jpg") right center / auto 96% no-repeat;
    -webkit-mask-image:linear-gradient(270deg,#000 25%,transparent 100%);
            mask-image:linear-gradient(270deg,#000 25%,transparent 100%);
  }
  .buyers-grid { display:grid; grid-template-columns: 1fr 1.15fr; gap:0; align-items:stretch; min-height:420px; position:relative; z-index:1; }
  .buyers-image { position:relative; overflow:hidden; }
  .buyers-image img { width:100%; height:100%; object-fit:cover; display:block; }
  .buyers-content { padding:56px 8px 56px 56px; display:flex; flex-direction:column; justify-content:center; max-width:620px; position:relative; }
  .buyers-eyebrow { color:var(--wine); font-size:11px; letter-spacing:0.3em; text-transform:uppercase; font-weight:600; margin-bottom:14px; }
  .buyers-content h2 { font-family:'Cormorant Garamond',serif; font-weight:500; font-size:40px; line-height:1.1; color:var(--ink); margin:0 0 16px; }
  .buyers-lede { font-size:14.5px; line-height:1.7; color:var(--ink-soft); margin:0 0 30px; max-width:480px; }
  .buyers-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin:0 0 34px; position:relative; }
  .buyers-steps::before { content:""; position:absolute; top:26px; left:12.5%; right:12.5%; border-top:1.5px dotted var(--rule-gold); z-index:0; }
  .buyers-step { display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; position:relative; z-index:1; }
  .buyers-step-ico { width:52px; height:52px; border-radius:50%; border:1px solid var(--rule-gold); color:var(--gold-deep); background:var(--cream-light); display:flex; align-items:center; justify-content:center; }
  .buyers-step-ico svg { width:26px; height:26px; }
  .buyers-step-label { font-size:11.5px; line-height:1.35; color:var(--ink-soft); font-weight:500; max-width:110px; }
  .buyers-content .btn-wine { align-self:flex-start; }

  /* ===== Trust value-props strip (dark — ref 06) ===== */
  .trust-strip { background:var(--green-dark); }
  .trust-strip-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0; padding:38px 24px; }
  .trust-prop { display:grid; grid-template-columns:auto 1fr; column-gap:14px; row-gap:5px; align-items:start; padding:4px 30px; }
  .trust-prop:not(:last-child) { border-right:1px solid rgba(255,255,255,0.10); }
  .trust-prop-ico { grid-row:1 / span 2; align-self:start; width:30px; height:30px; color:var(--gold); }
  .trust-prop h4 { grid-column:2; font-family:'Jost',sans-serif; font-size:12.5px; letter-spacing:0.14em; text-transform:uppercase; font-weight:700; color:var(--gold-light); margin:0; }
  .trust-prop p { grid-column:2; font-size:12.5px; line-height:1.55; color:rgba(245,239,227,0.7); margin:0; }

  /* ===== Testimonials (ref 07) ===== */
  .testimonials { background:var(--cream-light); padding:72px 0; border-top:1px solid var(--hairline); position:relative; overflow:hidden; }
  .testimonials::before, .testimonials::after {
    content:""; position:absolute; top:0; bottom:0; width:320px; z-index:0; pointer-events:none; opacity:0.45;
    background:url("../banners/hero-vintage-etch.jpg") left bottom / auto 78% no-repeat;
    -webkit-mask-image:linear-gradient(90deg,#000 35%,transparent 100%);
            mask-image:linear-gradient(90deg,#000 35%,transparent 100%);
  }
  .testimonials::before { left:0; }
  .testimonials::after  { right:0; transform:scaleX(-1); }
  .testimonials > .wrap-wide { position:relative; z-index:1; }
  .testi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
  .testi-card { background:rgba(255,255,255,0.82); border:1px solid var(--hairline); border-radius:8px; padding:40px 30px 28px; text-align:center; position:relative; backdrop-filter:blur(1px); }
  .testi-quote { position:absolute; top:14px; left:26px; font-family:'Cormorant Garamond',serif; font-size:56px; line-height:1; color:var(--gold); }
  .testi-text { font-size:14px; line-height:1.65; color:var(--ink-soft); margin:0 0 18px; font-style:italic; }
  .testi-stars { display:flex; justify-content:center; gap:3px; color:var(--gold); margin:0 0 16px; }
  .testi-name { font-family:'Cormorant Garamond',serif; font-size:17px; font-weight:600; color:var(--ink); }
  .testi-loc { font-size:11.5px; letter-spacing:0.06em; color:var(--mute); font-style:italic; margin-top:2px; }

  /* Trustpilot verified bar inside testimonials */
  .cco-tp-bar { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:11px; margin:-22px auto 40px; padding:12px 22px; width:max-content; max-width:100%; background:rgba(255,255,255,0.7); border:1px solid var(--hairline); border-radius:999px; text-decoration:none; transition:box-shadow .2s; }
  .cco-tp-bar:hover { box-shadow:var(--shadow-card); }
  .cco-tp-ex { font-family:'Cormorant Garamond',serif; font-size:19px; font-weight:600; color:var(--ink); }
  .cco-tp-stars { display:inline-flex; gap:3px; }
  .cco-tp-stars svg { width:21px; height:21px; display:block; }
  .cco-tp-meta { font-size:13.5px; color:var(--ink-soft); }
  .cco-tp-meta strong { color:var(--ink); font-weight:700; }
  .cco-tp-name { font-weight:700; color:#00b67a; }

  /* ===== Latest Stories (ref 08 — horizontal cards) ===== */
  .stories { background:var(--cream-light); padding: 72px 0 80px; }
  .stories-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:8px; }
  .story-card { background:#fff; border:1px solid var(--hairline); border-radius:8px; overflow:hidden; text-decoration:none; color:inherit; transition: all .2s; display:flex; flex-direction:row; align-items:stretch; }
  .story-card:hover { box-shadow: var(--shadow-card); transform:translateY(-2px); border-color:var(--wine); }
  .story-img { background:var(--ivory); width:142px; flex-shrink:0; overflow:hidden; }
  .story-img img { width:100%; height:100%; object-fit:cover; display:block; transition: transform .4s; }
  .story-card:hover .story-img img { transform:scale(1.04); }
  .story-body { padding: 20px 22px; flex:1; display:flex; flex-direction:column; min-width:0; }
  .story-meta { display:flex; gap:10px; align-items:center; font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:var(--wine); font-weight:600; margin-bottom:10px; }
  .story-meta .dot { width:3px; height:3px; border-radius:50%; background:var(--wine); }
  .story-meta .date { color:var(--mute); font-weight:500; }
  .story-card h3 { font-family:'Cormorant Garamond',serif; font-weight:500; font-size:18px; line-height:1.25; margin:0 0 10px; color:var(--ink); }
  .story-card p { font-size:12.5px; line-height:1.55; color:var(--ink-soft); margin:0 0 14px; flex:1; }
  .story-card .read-more { font-size:10px; letter-spacing:0.22em; text-transform:uppercase; color:var(--wine); font-weight:600; }

  /* ===== Trustpilot reviews (legacy, hidden) ===== */
  .reviews { background:var(--cream-card); padding: 64px 0; display:none; }
  .reviews-head { text-align:center; margin-bottom: 36px; }
  .reviews-head .eyebrow { font-size:11px; letter-spacing:0.34em; text-transform:uppercase; color:var(--mute); margin-bottom:18px; }
  .tp-summary { display:inline-flex; align-items:center; gap:14px; }
  .tp-summary b { font-weight:600; font-size:14px; }
  .tp-stars { display:inline-flex; gap:3px; }
  .tp-stars span { width:24px; height:24px; background:#00B67A; display:inline-flex; align-items:center; justify-content:center; }
  .tp-stars svg { width:14px; height:14px; color:#fff; }
  .tp-text { font-size:13px; color:var(--ink); }
  .tp-text small { color:var(--mute); }
  .tp-logo { display:inline-flex; align-items:center; gap:4px; font-weight:600; font-size:14px; color:var(--ink); }
  .tp-logo svg { color:#00B67A; }

  .reviews-grid-wrap { display:grid; grid-template-columns: auto 1fr auto; align-items:center; gap:20px; margin-top:8px; }
  .reviews-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  .rev-card { background:#fff; border:1px solid var(--hairline); border-radius:6px; padding: 22px 24px; position:relative; }
  .rev-card-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
  .rev-author { display:flex; align-items:center; gap:10px; }
  .rev-avatar { width:32px; height:32px; border-radius:50%; background:#e0d9c8; }
  .rev-name { font-size:13px; font-weight:600; }
  .rev-card p { font-size:13px; line-height:1.55; color:var(--ink-soft); margin:0 0 16px; }
  .rev-card .quote-mark { color:var(--gold); font-family:'Cormorant Garamond',serif; font-size:32px; line-height:0.4; }

  .reviews-foot { text-align:center; margin-top:24px; }
  .reviews-foot a { font-size:11px; letter-spacing:0.28em; text-transform:uppercase; color:var(--gold); font-weight:600; }

  /* ===== Footer (light parchment — ref 09) ===== */
  .footer-light { background:var(--cream-light); color:var(--ink); padding:0; border-top:1px solid var(--hairline); }
  .footer-light .footer-grid {
    display:grid; grid-template-columns: 1.5fr 1fr 1fr 1.15fr 1fr 1.25fr; gap:36px;
    padding:56px 32px 44px;
  }
  .footer-brand { max-width:280px; }
  .footer-logo { display:block; margin-bottom:18px; }
  .footer-logo img { display:block; height:50px; width:auto; max-width:230px; }
  .footer-desc { font-size:12.5px; line-height:1.65; color:var(--ink-soft); margin:0 0 20px; }
  .footer-social { display:flex; gap:10px; }
  .footer-social a { width:36px; height:36px; border-radius:50%; border:1px solid rgba(107,31,31,0.35); color:var(--wine);
    display:inline-flex; align-items:center; justify-content:center; transition:all .2s ease; }
  .footer-social a:hover { background:var(--wine); border-color:var(--wine); color:#fff; }
  .footer-social svg { width:14px; height:14px; }
  .footer-col h6 {
    font-family:'Cormorant Garamond',Georgia,serif; font-size:14px; letter-spacing:0.16em; text-transform:uppercase;
    font-weight:600; color:var(--ink); margin:4px 0 6px; position:relative; padding-bottom:14px;
  }
  /* wine diamond ornament under each heading (ref 09) */
  .footer-col h6::after {
    content:""; position:absolute; left:15px; bottom:2px; width:7px; height:7px;
    background:var(--wine); transform:rotate(45deg);
  }
  .footer-col h6::before {
    content:""; position:absolute; left:0; bottom:5px; width:38px; height:1px; background:rgba(107,31,31,0.35);
  }
  .footer-col ul { list-style:none; padding:0; margin:0; }
  .footer-col li { padding:0; }
  .footer-col li a { display:block; font-size:13px; padding:6px 0; color:var(--ink-soft); transition:color .2s ease; }
  .footer-col li a:hover { color:var(--wine); }

  /* Newsletter column */
  .footer-newsletter p { font-size:12.5px; line-height:1.6; color:var(--ink-soft); margin:0 0 16px; }
  .footer-news-form { display:flex; flex-direction:column; gap:10px; }
  .footer-news-form input {
    background:#fff; border:1px solid var(--hairline); border-radius:5px; padding:12px 14px;
    font-family:inherit; font-size:13px; color:var(--ink); outline:none; width:100%; box-sizing:border-box;
  }
  .footer-news-form input:focus { border-color:var(--gold); }
  .footer-news-form button {
    background:var(--wine); color:#fff; border:none; padding:12px 20px; border-radius:5px;
    font-size:11px; letter-spacing:0.2em; text-transform:uppercase; font-weight:600; cursor:pointer;
    transition:background .2s ease;
  }
  .footer-news-form button:hover { background:var(--wine-dark); }

  /* Bottom bar (dark olive) */
  .footer-bottom-bar { background:var(--green-dark); color:rgba(245,239,227,0.7); }
  .footer-bottom-inner {
    display:flex; justify-content:space-between; align-items:center; gap:24px;
    padding:18px 32px; font-size:12px;
  }
  .footer-copy { color:rgba(245,239,227,0.6); }
  .footer-pay { display:flex; gap:8px; align-items:center; }
  .footer-pay-label { color:rgba(245,239,227,0.6); font-size:11px; margin-right:4px; }
  .pay-icon { background:#fff; color:var(--ink); padding:5px 9px; border-radius:3px; font-weight:700; font-size:10px; letter-spacing:0.04em; display:inline-flex; align-items:center; gap:4px; }
  .pay-icon.amex { background:#1F72CD; color:#fff; }
  .pay-icon.mc { background:#fff; }
  .pay-icon.visa { background:#fff; color:#1A1F71; }
  .pay-icon.pp { background:#fff; color:#003087; }

  /* ===== Chat float ===== */
  .chat-fab {
    position:fixed; bottom:18px; right:24px; z-index:50;
    background:var(--gold); color:var(--ink); padding:12px 20px; border-radius:999px;
    display:inline-flex; align-items:center; gap:10px; font-size:12.5px; font-weight:600;
    box-shadow: 0 8px 24px rgba(31,46,34,0.25);
    border:none; cursor:pointer;
  }
  .chat-fab svg { width:16px; height:16px; }

  /* ===== Static image placeholders (match mockup) ===== */
  .img-slot {
    position:relative; width:100%; height:100%; min-height:100%;
    background: var(--cream-card);
    border: 1.5px dashed rgba(184,153,104,0.45);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:12px; color: var(--mute);
    overflow:hidden;
  }
  /* User-supplied banner slots — stand out so they're obvious to swap */
  .img-slot.banner-slot {
    background: repeating-linear-gradient(45deg, var(--cream-card) 0 14px, #efe5d0 14px 28px);
    border: 2px dashed var(--gold);
    color: var(--gold-deep, var(--gold-soft));
  }
  .img-slot.banner-slot .img-cap b {
    display:block; font-size:11px; letter-spacing:0.24em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:6px;
  }
  .img-slot.banner-slot .img-ico { opacity:0.7; color:var(--gold); }
  .img-slot .img-ico { width:32px; height:32px; opacity:0.45; }
  .img-slot .img-cap {
    font-family:'Jost',sans-serif; text-align:center; line-height:1.3;
    font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:600;
  }
  .img-slot .img-cap small {
    display:block; margin-top:4px; font-size:10px; font-weight:400;
    letter-spacing:0.04em; text-transform:none; opacity:0.7;
  }
  /* hero variant */
  .img-slot-hero {
    background:linear-gradient(135deg, #6a513a 0%, #2c1c10 65%, #1a1108 100%);
    border-color: rgba(212,184,134,0.35);
    color: rgba(245,239,227,0.85);
  }
  .img-slot-hero .img-ico { opacity:0.55; }
  .img-slot-hero .img-cap { font-size:13px; letter-spacing:0.28em; }
  /* limited variant */
  .img-slot-limited {
    background:linear-gradient(135deg, #5a4630 0%, #2e2418 100%);
    border-color: rgba(212,184,134,0.3);
    color: rgba(212,184,134,0.9);
  }
  .img-slot-limited .img-cap { font-size:12px; letter-spacing:0.28em; }
  /* product variant */
  .img-slot-product {
    background:var(--cream-card);
    border-color: rgba(184,153,104,0.3);
  }
  .img-slot-product .img-cap { font-size:10px; letter-spacing:0.2em; }
  /* brand variant — circular */
  .img-slot-brand {
    background:transparent;
    border:none;
    border-radius:50%;
  }
  .img-slot-brand .img-ico { width:18px; height:18px; opacity:0.35; }
  .img-slot-brand .img-cap { font-size:8.5px; letter-spacing:0.16em; line-height:1.3; padding:0 6px; color:var(--mute); }

  /* Nowrap for ornate heading */
  .ornate-head h2 { white-space:nowrap; }

  /* =================================================================
     MOBILE RESPONSIVE
     ================================================================= */

  /* Mobile menu toggle + drawer (hidden by default — shown only at ≤768px) */
  .menu-toggle{ display:none; background:none; border:0; cursor:pointer; padding:8px; color:var(--ink); }
  .menu-toggle svg{ width:24px; height:24px; }
  .mobile-drawer{ display:none; }
  .mobile-drawer-overlay{ display:none; }
  /* Force single-row nav — beats Flatsome's .nav{flex-flow:wrap}. */
  .header .nav, header .nav.header-nav, .header-inner .nav { flex-wrap:nowrap !important; }

  /* ========== Compress nav+search on mid screens (1500px and below) ==========
     Keeps the inline nav fitting in one row down to the burger breakpoint. */
  @media (max-width:1500px){
    .header-inner{ gap:20px; }
    .nav{ gap:18px; font-size:11px; letter-spacing:0.10em; }
    .nav-item > a{ padding:10px 0; }
    .search-pill{ width:170px; }
    .actions{ gap:14px; }
    .icon-btn span{ display:none; }     /* show only Account/Cart icons to save room */
  }

  /* ========== Drop inline search on mid screens (1360px and below) ==========
     The 170px search pill is the biggest space hog. Below the 1360px design
     width the full nav + logo + search + icons stop fitting in one row and the
     actions overflow (clipping the cart icon). Hide the pill so the full nav
     keeps fitting down to the burger breakpoint; search stays in the drawer. */
  @media (max-width:1360px){
    .search-pill{ display:none; }
    .header-inner{ gap:22px; }
    .nav{ gap:16px; }
    .logo img{ height:50px; }
  }

  /* ========== Header collapse to burger (1200px and below) ==========
     Below ~1200px the inline nav no longer fits, so switch to the
     burger + slide-in drawer. */
  @media (max-width:1200px){
    .nav{ display:none !important; }
    .search-pill{ display:none !important; }
    .menu-toggle{ display:inline-flex !important; align-items:center; justify-content:center; }
    .actions{ gap:12px; justify-content:flex-end; }
    .icon-btn{ font-size:0; gap:0; }      /* hide labels, keep icons */
    .icon-btn svg{ width:22px; height:22px; }
    /* Nav is hidden in burger mode, so it leaves the grid. Use 1fr auto
       (logo grows, actions pinned right) — the base `auto 1fr auto` would
       drop actions into the empty nav column and leave a big right gap. */
    .header-inner{ gap:16px; grid-template-columns:1fr auto; }

    /* Mobile drawer (available from 1100px down) */
    .mobile-drawer{
      display:flex !important;
      position:fixed; top:0; right:0; bottom:0; width:84%; max-width:360px;
      background:#fff; z-index:1101; padding:20px 22px;
      transform:translateX(100%); transition:transform .35s ease;
      box-shadow:-12px 0 40px rgba(0,0,0,.15); overflow-y:auto;
      flex-direction:column;
    }
    .mobile-drawer.open{ transform:translateX(0); }
    .mobile-drawer-overlay{
      display:block !important;
      position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:1100;
      opacity:0; pointer-events:none; transition:opacity .3s;
    }
    .mobile-drawer-overlay.open{ opacity:1; pointer-events:auto; }
    .mobile-drawer-head{ display:flex; justify-content:space-between; align-items:center; padding-bottom:18px; border-bottom:1px solid var(--hairline); margin-bottom:14px; }
    .mobile-drawer-head img{ height:36px; width:auto; }
    .mobile-drawer-close{ background:none; border:0; cursor:pointer; padding:4px; }
    .mobile-drawer-close svg{ width:22px; height:22px; }
    .mobile-drawer-search{ display:flex; align-items:center; gap:0; background:var(--cream-light); border:1px solid var(--hairline); border-radius:6px; padding:0 0 0 12px; height:42px; margin-bottom:18px; }
    .mobile-drawer-search input,
    .mobile-drawer-search input[type="search"]{ flex:1; min-width:0; background:transparent !important; border:0 !important; outline:none !important; box-shadow:none !important; margin:0 !important; font-size:14px; font-family:inherit; padding:0 8px; }
    .mobile-drawer-search button{ width:42px; height:42px; background:var(--ink); color:#fff; border:0; border-radius:0 5px 5px 0; display:flex; align-items:center; justify-content:center; }
    .mobile-drawer-search svg{ width:16px; height:16px; }
    .mobile-drawer nav{ display:flex; flex-direction:column; gap:0; }
    .mobile-drawer nav > a, .mobile-drawer nav details > summary{
      padding:14px 4px; font-family:'Cormorant Garamond',serif; font-size:18px; font-weight:500;
      color:var(--ink); border-bottom:1px solid var(--hairline); text-transform:none; letter-spacing:0;
      list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center;
    }
    .mobile-drawer nav details > summary::-webkit-details-marker{ display:none; }
    .mobile-drawer nav details[open] > summary{ color:var(--gold); }
    .mobile-drawer nav details > summary::after{ content:"+"; font-size:18px; color:var(--gold); transition:transform .25s; }
    .mobile-drawer nav details[open] > summary::after{ content:"−"; }
    .mobile-drawer nav details > ul{ list-style:none; padding:6px 0 12px 6px; margin:0; }
    .mobile-drawer nav details > ul li a{ display:block; padding:9px 0; font-family:'Jost',sans-serif; font-size:14px; color:var(--ink-soft); }
  }

  /* ========== Tablet (1024px and below) ========== */
  @media (max-width:1024px){
    .wrap, .wrap-wide{ padding:0 20px; }
    .hero h1{ font-size:48px; }
    .hero-grid{ gap:32px; }
    .sellers-grid{ grid-template-columns:repeat(3,1fr); }
    .brand-circles{ grid-template-columns:repeat(4,1fr); }
    .stories-grid{ grid-template-columns:repeat(2,1fr); }
    .footer-light .footer-grid{ grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:30px; }
    .footer-light .footer-brand{ grid-column:1/-1; max-width:none; display:flex; flex-direction:column; }
    .footer-newsletter{ grid-column:1/-1; }
  }

  /* ========== Mobile (768px and below) ========== */
  @media (max-width:768px){
    .wrap, .wrap-wide{ padding:0 16px; }

    /* Topbar */
    .topbar{ padding:8px 12px; font-size:10.5px; }
    .topbar-inner{ flex-direction:column; gap:6px; text-align:center; }
    .topbar-left{ flex-wrap:wrap; justify-content:center; gap:8px 14px; }
    .topbar-right{ font-size:10.5px; }

    /* Header — tighter on phones (burger mode: logo grows, actions pinned right) */
    .header-inner{ grid-template-columns:1fr auto; gap:10px; padding:14px 16px; }
    .logo img{ height:42px; max-width:180px; }

    /* Hero — stack vertical */
    .hero{ padding:30px 0 0; }
    .hero-grid{ grid-template-columns:1fr; gap:0; }
    .hero-text{ padding:6px 0 24px; order:2; }
    .hero-image-wrap{ order:1; min-height:0; aspect-ratio:16/10; margin-bottom:24px; }
    .hero-eyebrow{ font-size:10px; letter-spacing:0.22em; margin-bottom:14px; }
    .hero h1{ font-size:38px; line-height:1.05; }
    .hero-sub{ font-size:17px; margin-bottom:14px; }
    .hero-lede{ font-size:14px; margin-bottom:24px; }
    .hero-ctas{ flex-direction:column; gap:10px; }
    .hero-ctas .btn{ width:100%; justify-content:center; padding:16px 20px; }

    /* Trust strip — 2x2 */
    .trust{ padding:24px 0 32px; }
    .trust-grid{ grid-template-columns:1fr 1fr; gap:18px 14px; }
    .trust-item{ gap:10px; }
    .trust-ico{ width:28px; height:28px; }
    .trust-item b{ font-size:12px; }
    .trust-item small{ font-size:10.5px; }

    /* Brands */
    .brands{ padding:42px 0; }
    .ornate-head{ margin-bottom:28px; }
    .ornate-head h2{ font-size:clamp(24px,6vw,30px); letter-spacing:0.01em; text-transform:none; white-space:normal; text-align:center; max-width:none; }
    .ornate-head .swash{ width:40px; }
    .brands-carousel{ grid-template-columns:1fr; gap:14px; }
    .carousel-arrow{ display:none; }
    .brand-circles{ grid-template-columns:repeat(3,1fr); gap:18px 14px; }
    .brand-card span{ font-size:11.5px; }
    .brand-circle{ max-width:84px; }

    /* Best sellers */
    .sellers{ padding:40px 0 50px; }
    .sellers-grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
    .pcard{ font-size:12.5px; }
    .pcard-name{ font-size:13px; }
    .pcard-brand{ font-size:11px; }
    .pcard-price{ font-size:16px; }
    .pcard-body{ padding:12px 12px 16px; }

    /* New Buyers Guide */
    .buyers-grid{ grid-template-columns:1fr; min-height:0; }
    .buyers-image{ min-height:220px; order:1; }
    .buyers-content{ order:2; padding:36px 16px; max-width:none; }
    .buyers-content h2{ font-size:30px; }
    .buyers-steps{ grid-template-columns:repeat(2,1fr); gap:22px 14px; }
    .buyers-content .btn-wine{ align-self:stretch; justify-content:center; }

    /* Trust strip (dark) */
    .trust-strip-grid{ grid-template-columns:1fr 1fr; gap:24px 14px; padding:32px 16px; }
    .trust-prop{ padding:0 6px; column-gap:10px; }
    .trust-prop:not(:last-child){ border-right:none; }
    .trust-prop-ico{ width:26px; height:26px; }
    .trust-prop h4{ font-size:11.5px; letter-spacing:0.1em; }
    .trust-prop p{ font-size:11.5px; }

    /* Testimonials */
    .testimonials{ padding:48px 0; }
    .testi-grid{ grid-template-columns:1fr; gap:16px; }

    /* Latest Stories */
    .stories{ padding:42px 0 50px; }
    .stories-grid{ grid-template-columns:1fr; gap:18px; }
    .story-card h3{ font-size:18px; }

    /* Footer (light) */
    .footer-light .footer-grid{ grid-template-columns:1fr 1fr; gap:28px 24px; padding:40px 16px 32px; }
    .footer-light .footer-brand{ grid-column:1/-1; max-width:none; }
    .footer-newsletter{ grid-column:1/-1; }
    .footer-col h6{ font-size:13px; }
    .footer-bottom-inner{ flex-direction:column; gap:14px; text-align:center; padding:18px 16px; }
    .footer-pay{ justify-content:center; flex-wrap:wrap; }

    /* Chat FAB */
    .chat-fab{ bottom:14px; right:14px; padding:10px 16px; font-size:11.5px; }

    /* Tidio chat — keep clear of hero CTAs on mobile */
    #tidio-chat-iframe, .tidio-chat-iframe, iframe[id*="tidio"]{ bottom:14px !important; }
    /* Mystery discount vertical pill — sit lower on mobile so it doesn't tap hero */
    #mystery-trigger{ top:auto !important; bottom:80px !important; right:-10px !important; transform:scale(0.85); transform-origin:right bottom; }

    /* Topbar — show only essential text on mobile (compact) */
    .topbar{ padding:7px 12px !important; font-size:10px !important; }
    .topbar-inner{ flex-direction:row !important; gap:8px !important; justify-content:center !important; }
    .topbar-left{ gap:6px 10px !important; }
    .topbar-left .sep{ width:3px; height:3px; }
    /* Hide the wordy "Temperature Controlled Packaging" + "Worldwide" on tight mobile to keep 1 line */
    .topbar-left span:nth-child(3),
    .topbar-left span:nth-child(5){ display:none !important; }
    /* Only "100% Authentic Habanos" remains, so hide ALL separators
       (the previous :nth-of-type rule left a stray orphaned dot). */
    .topbar-left .sep{ display:none !important; }
    .topbar-right{ display:none !important; }
  }

  /* ========== Small mobile (480px) ========== */
  @media (max-width:480px){
    .hero h1{ font-size:32px; }
    .brand-circles{ grid-template-columns:repeat(2,1fr); }
    .sellers-grid{ grid-template-columns:repeat(2,1fr); }
    .footer-light .footer-grid{ grid-template-columns:1fr 1fr; }
  }

  /* ===== Font fidelity =====
     "useanyfont" (uaf.css) forces font-family:figtree-regular !important on every
     h1-h6/p/a/em, overriding the design's serif. These class selectors out-specify
     uaf's bare element selectors, so with !important they restore Cormorant Garamond serif. */
  .hero h1, .hero h1 em,
  .ornate-head h2,
  .row-head h2,
  .buyers-content h2,
  .story-card h3,
  .footer-col h6,
  .mobile-drawer nav > a, .mobile-drawer nav details > summary{
    font-family:'Cormorant Garamond',Georgia,serif !important;
  }

  /* ===================================================================
     CART DRAWER — custom off-canvas side cart (matches mobile drawer style)
     =================================================================== */
  .cco-cart-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.42); z-index:1100; opacity:0; pointer-events:none; transition:opacity .3s; }
  .cco-cart-overlay.open{ opacity:1; pointer-events:auto; }
  .cco-cart-drawer{
    position:fixed; top:0; right:0; bottom:0; width:90%; max-width:404px;
    background:var(--cream-light); z-index:1101; transform:translateX(100%);
    transition:transform .35s ease; box-shadow:-14px 0 44px rgba(0,0,0,.18);
    display:flex; flex-direction:column;
  }
  .cco-cart-drawer.open{ transform:translateX(0); }
  body.cco-cart-open{ overflow:hidden; }
  .cco-cart-head{ display:flex; justify-content:space-between; align-items:center; padding:20px 24px; border-bottom:1px solid var(--hairline); flex:0 0 auto; }
  .cco-cart-title{ font-family:'Cormorant Garamond',serif; font-size:21px; font-weight:600; color:var(--ink); letter-spacing:.04em; }
  .cco-cart-close{ background:none; border:0; cursor:pointer; color:var(--ink); padding:4px; display:flex; }
  .cco-cart-close:hover{ color:var(--wine); }
  .cco-cart-body{ flex:1 1 auto; overflow-y:auto; padding:8px 24px 24px; }

  /* WooCommerce mini-cart, restyled */
  .cco-cart-body .woocommerce-mini-cart{ list-style:none; margin:0; padding:0; }
  /* The product image lives INSIDE the product link, so we absolutely-position it
     and pad the row to make room (flex order can't reach inside the anchor). */
  .cco-cart-body .woocommerce-mini-cart-item{ position:relative; padding:16px 30px 16px 82px; min-height:64px; border-bottom:1px solid var(--hairline); }
  .cco-cart-body .woocommerce-mini-cart-item img{ position:absolute !important; left:0; top:16px; width:64px !important; height:64px; object-fit:cover; border:1px solid var(--hairline); border-radius:6px; float:none !important; margin:0 !important; }
  .cco-cart-body .woocommerce-mini-cart-item a:not(.remove){ display:block; color:var(--ink); font-family:'Cormorant Garamond',serif; font-size:15.5px; font-weight:600; line-height:1.3; text-decoration:none; }
  .cco-cart-body .woocommerce-mini-cart-item a:not(.remove):hover{ color:var(--wine); }
  .cco-cart-body .woocommerce-mini-cart-item .quantity{ display:block; color:var(--ink-soft); font-size:13px; margin-top:5px; font-family:'Jost',sans-serif; }
  .cco-cart-body a.remove{ position:absolute; top:16px; right:0; width:22px; height:22px; line-height:20px; text-align:center; border-radius:50%; color:var(--ink-soft) !important; font-size:15px; border:1px solid var(--hairline); text-decoration:none; transition:all .15s; }
  .cco-cart-body a.remove:hover{ color:#fff !important; background:var(--wine); border-color:var(--wine); }
  .cco-cart-body .woocommerce-mini-cart__total{ display:flex; justify-content:space-between; align-items:center; padding:18px 0 6px; margin-top:4px; font-size:14px; color:var(--ink); letter-spacing:.04em; text-transform:uppercase; }
  .cco-cart-body .woocommerce-mini-cart__total strong{ font-weight:600; }
  .cco-cart-body .woocommerce-mini-cart__total .amount{ font-family:'Cormorant Garamond',serif; font-size:20px; font-weight:700; text-transform:none; }
  .cco-cart-body .woocommerce-mini-cart__buttons{ display:flex; flex-direction:column; gap:10px; margin:12px 0 0; padding:0; }
  /* !important needed to beat Flatsome's inline `.button.checkout{background:#00c08b!important}` */
  .cco-cart-body .woocommerce-mini-cart__buttons .button{ display:block; text-align:center; padding:14px; border-radius:5px; font-size:12px; text-transform:uppercase; letter-spacing:.18em; font-weight:700; text-decoration:none; transition:background .15s,color .15s; margin:0; }
  .cco-cart-body .woocommerce-mini-cart__buttons .button:not(.checkout){ background:#fff !important; color:var(--ink) !important; border:1px solid var(--ink); }
  .cco-cart-body .woocommerce-mini-cart__buttons .button:not(.checkout):hover{ background:var(--ink) !important; color:#fff !important; }
  .cco-cart-body .woocommerce-mini-cart__buttons .button.checkout{ background:var(--wine) !important; color:#fff !important; border:1px solid var(--wine); }
  .cco-cart-body .woocommerce-mini-cart__buttons .button.checkout:hover{ background:var(--wine-dark) !important; }
  .cco-cart-body .woocommerce-mini-cart__empty-message{ color:var(--ink-soft); font-size:14.5px; text-align:center; padding:40px 0; font-family:'Cormorant Garamond',serif; }
  @media (max-width:480px){ .cco-cart-drawer{ width:100%; max-width:none; } }

  /* ===================================================================
     HOME.HTML HEADER — faithful port of /home/cubancigaronline/home.html
     Scoped tokens (--cco-*) so it never collides with the legacy palette.
     Markup: header.php (.cco-util topbar + .cco-site-header).
     =================================================================== */
  :root{
    --cco-bg:        oklch(95.5% 0.012 78);
    --cco-bg-2:      oklch(93% 0.014 76);
    --cco-surface:   oklch(99.2% 0.003 90);
    --cco-fg:        oklch(26% 0.018 60);
    --cco-muted:     oklch(52% 0.018 65);
    --cco-border:    oklch(88% 0.010 78);
    --cco-green:     oklch(34% 0.055 150);
    --cco-green-dk:  oklch(24% 0.045 152);
    --cco-accent:    oklch(41% 0.125 27);
    --cco-accent-dk: oklch(35% 0.120 27);
    --cco-gold:      oklch(70% 0.095 75);
    --cco-font-d:'Cormorant Garamond',Georgia,'Times New Roman',serif;
    --cco-font-b:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  }

  /* ---- Topbar ---- */
  .cco-util{ background:var(--cco-green-dk); color:oklch(92% 0.02 110); }
  .cco-util-inner{ display:flex; align-items:center; justify-content:space-between; height:38px;
    font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; font-family:var(--cco-font-b); }
  .cco-util-left{ display:flex; gap:26px; }
  .cco-util-left span{ display:flex; align-items:center; gap:7px; opacity:.92; }
  .cco-util-right{ display:flex; gap:22px; opacity:.82; }
  .cco-util-right a{ color:inherit; text-decoration:none; transition:opacity .2s; }
  .cco-util a:hover{ opacity:1; }
  .cco-util svg{ width:13px; height:13px; stroke:var(--cco-gold); fill:none; stroke-width:1.4; }

  /* ---- Header bar ---- */
  header.cco-site-header{ position:sticky; top:0; z-index:1001;
    background:color-mix(in oklch, var(--cco-bg) 92%, white);
    backdrop-filter:blur(10px); border-bottom:1px solid var(--cco-border); transition:box-shadow .25s ease; }
  .cco-site-header.is-stuck{ box-shadow:0 6px 22px rgba(42,51,32,.10); }
  .cco-head-inner{ display:flex; align-items:center; gap:24px; height:74px; }
  .cco-site-header .brand{ display:flex; align-items:center; gap:11px; flex-shrink:0; }
  .cco-site-header .brand .brand-logo{ height:52px; width:auto; max-width:248px; display:block; }

  /* ---- Nav ---- */
  .cco-nav{ display:flex; gap:30px; margin-left:14px; position:relative; }
  .cco-nav-item{ position:relative; }
  .cco-nav-item > a{ font-family:var(--cco-font-b); font-size:12.5px; letter-spacing:.13em; text-transform:uppercase;
    color:var(--cco-fg); padding:6px 0; position:relative; display:inline-flex; align-items:center; gap:5px;
    transition:color .2s; white-space:nowrap; }
  .cco-nav-item > a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:1.5px;
    background:var(--cco-accent); transition:width .25s; }
  .cco-nav-item:hover > a, .cco-nav-item.cur > a{ color:var(--cco-accent); }
  .cco-nav-item:hover > a::after, .cco-nav-item.cur > a::after{ width:100%; }
  .cco-nav .caret{ width:9px; height:9px; opacity:.6; transition:transform .25s; }
  .cco-nav-item:hover .caret{ transform:rotate(180deg); opacity:1; }

  /* ---- Dropdown + Mega ---- */
  .cco-mega, .cco-dd{ position:absolute; background:var(--cco-surface); border:1px solid var(--cco-border);
    box-shadow:0 24px 60px -18px rgba(40,30,20,.32); opacity:0; pointer-events:none;
    transition:opacity .28s ease, transform .28s ease; z-index:60; border-radius:3px; }
  .cco-mega::before, .cco-dd::before{ content:""; position:absolute; left:0; right:0; top:-12px; height:12px; }
  .cco-dd{ top:calc(100% + 8px); left:0; min-width:212px; padding:10px 0; transform:translateY(8px); }
  .cco-mega{ top:calc(100% + 10px); left:50%; width:880px; max-width:calc(100vw - 64px); padding:22px 24px;
    transform:translateX(-50%) translateY(8px); }
  .cco-nav-item:hover .cco-dd{ opacity:1; pointer-events:auto; transform:translateY(0); }
  .cco-nav-item:hover .cco-mega{ opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }
  .cco-dd a{ display:block; padding:9px 20px; font-family:var(--cco-font-b); font-size:12px; letter-spacing:.12em;
    text-transform:uppercase; color:var(--cco-fg); white-space:nowrap; transition:color .2s, padding-left .2s, background .2s; }
  .cco-dd a:hover{ color:var(--cco-accent); background:var(--cco-bg); padding-left:26px; }
  .cco-mega-head{ font-family:var(--cco-font-b); font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
    font-weight:600; color:var(--cco-accent); margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid var(--cco-border); }
  .cco-mega-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:6px; }
  .cco-brand-tile{ display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
    padding:12px 6px 11px; border-radius:8px; border:1px solid transparent; transition:background .2s, border-color .2s, transform .2s; }
  .cco-brand-tile:hover{ background:var(--cco-bg); border-color:var(--cco-border); transform:translateY(-2px); }
  .cco-brand-tile-logo{ width:62px; height:46px; display:flex; align-items:center; justify-content:center;
    background:#fff; border:1px solid var(--cco-border); border-radius:6px; padding:5px; }
  .cco-brand-tile-logo img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
  .cco-brand-tile-name{ font-family:var(--cco-font-b); font-size:10.5px; line-height:1.25; color:var(--cco-muted); transition:color .2s; }
  .cco-brand-tile:hover .cco-brand-tile-name{ color:var(--cco-accent); }
  .cco-mega-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:16px; padding-top:14px; border-top:1px solid var(--cco-border); }
  .cco-mega-foot a{ font-family:var(--cco-font-b); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--cco-accent); font-weight:600; }
  .cco-mega-foot .accent{ color:var(--cco-fg); font-style:italic; font-family:var(--cco-font-d); font-size:14px; letter-spacing:0; text-transform:none; }

  /* ---- Tools (search + icons) ---- */
  .cco-tools{ margin-left:auto; display:flex; align-items:center; gap:10px; }
  .cco-site-header .search{ display:flex; align-items:center; gap:8px; background:var(--cco-surface);
    border:1px solid var(--cco-border); border-radius:2px; padding:8px 12px; width:210px; margin:0; transition:border-color .2s; }
  .cco-site-header .search:focus-within{ border-color:var(--cco-green); }
  .cco-site-header .search svg{ width:15px; height:15px; stroke:var(--cco-muted); fill:none; stroke-width:1.6; flex-shrink:0; }
  .cco-site-header .search input,
  .cco-site-header .search input[type="search"]{ flex:1; min-width:0; height:auto; min-height:0;
    border:0 !important; outline:0 !important; background:transparent !important; box-shadow:none !important;
    margin:0 !important; padding:0 !important; border-radius:0 !important;
    font-family:var(--cco-font-b); font-size:13px; color:var(--cco-fg); }
  .cco-tools .icobtn{ width:40px; height:40px; display:grid; place-items:center; border:0; background:transparent;
    border-radius:2px; position:relative; color:var(--cco-fg); }
  .cco-tools .icobtn:hover{ background:var(--cco-bg-2); }
  .cco-tools .icobtn svg{ width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.5; }
  .cco-tools .cart-badge{ position:absolute; top:5px; right:5px; min-width:16px; height:16px; padding:0 4px;
    background:var(--cco-accent); color:#fff; font-size:10px; font-weight:600; border-radius:9px; display:grid; place-items:center; line-height:1; }
  .cco-tools .burger{ display:none; }

  /* ---- Header responsive (aligns with the ≤1200px mobile drawer) ---- */
  @media (max-width:1200px){
    .cco-nav{ display:none; }
    .cco-site-header .search{ display:none; }
    .cco-head-inner{ gap:14px; }
  }
  @media (max-width:560px){
    .cco-util-right{ display:none; }
    .cco-util-inner{ justify-content:center; }
    .cco-util-left{ gap:14px; font-size:10px; letter-spacing:.10em; }
    .cco-head-inner{ height:64px; }
    .cco-site-header .brand .brand-logo{ height:42px; }
  }

  /* ===================================================================
     HOME.HTML PRODUCT CARDS — faithful port (.cco-card)
     Used by Best Sellers + Limited & Rare grids in front-page.php.
     =================================================================== */
  .sellers-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(244px,1fr)); gap:1px;
    background:var(--cco-border); border:1px solid var(--cco-border); }
  .cco-card{ background:var(--cco-surface); position:relative; display:flex; flex-direction:column; padding:0 0 20px;
    transition:box-shadow .25s, transform .25s; isolation:isolate; color:inherit; text-decoration:none; }
  .cco-card:hover{ box-shadow:0 22px 44px -26px rgba(40,30,20,.5); z-index:2; transform:translateY(-2px); }
  .cco-media{ position:relative; aspect-ratio:1/1; background:radial-gradient(120% 120% at 50% 18%,#fff,var(--cco-bg) 92%);
    display:grid; place-items:center; overflow:hidden; }
  .cco-media img{ width:100%; height:100%; object-fit:contain; padding:26px 26px 18px; transition:transform .5s ease; mix-blend-mode:multiply; }
  .cco-card:hover .cco-media img{ transform:scale(1.045); }
  .cco-badge{ position:absolute; top:13px; left:13px; z-index:3; background:var(--cco-accent); color:#fff; font-size:9.5px;
    letter-spacing:.14em; text-transform:uppercase; padding:5px 9px; border-radius:2px; font-weight:500; }
  .cco-card .cco-heart{ position:absolute; top:11px; right:11px; z-index:3; width:34px; height:34px; border-radius:50%;
    border:1px solid var(--cco-border); background:color-mix(in oklch,var(--cco-surface) 80%,transparent);
    display:grid; place-items:center; backdrop-filter:blur(4px); transition:.2s; cursor:pointer; padding:0; box-shadow:none; }
  .cco-card .cco-heart svg{ width:16px; height:16px; stroke:var(--cco-muted); fill:none; stroke-width:1.5; transition:.2s; }
  .cco-card .cco-heart:hover{ border-color:var(--cco-accent); transform:none; }
  .cco-card .cco-heart.is-wished{ background:color-mix(in oklch,var(--cco-surface) 80%,transparent); border-color:var(--cco-accent); }
  .cco-card .cco-heart.is-wished svg{ fill:var(--cco-accent); stroke:var(--cco-accent); }
  .cco-qadd{ position:absolute; left:14px; right:14px; bottom:14px; z-index:3; border:0; background:var(--cco-accent); color:#fff;
    font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; padding:11px; border-radius:2px; font-weight:500;
    opacity:0; transform:translateY(8px); transition:.25s; cursor:pointer; font-family:var(--cco-font-b); }
  .cco-card:hover .cco-qadd{ opacity:1; transform:none; }
  .cco-qadd:hover{ background:var(--cco-accent-dk); }
  .cco-card-body{ padding:18px 18px 0; display:flex; flex-direction:column; gap:9px; flex:1; }
  .cco-vit{ font-family:var(--cco-font-b); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--cco-muted); }
  .cco-card-name{ font-family:var(--cco-font-d); font-weight:500; font-size:20px; line-height:1.18; letter-spacing:.005em; color:var(--cco-fg); margin:0; }
  .cco-strength{ display:flex; align-items:center; gap:8px; margin-top:2px; }
  .cco-bars{ display:flex; gap:3px; }
  .cco-bars i{ width:16px; height:4px; border-radius:1px; background:var(--cco-border); display:block; }
  .cco-bars i.f{ background:var(--cco-green); }
  .cco-strength span{ font-family:var(--cco-font-b); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--cco-muted); }
  .cco-rating{ display:flex; align-items:center; gap:7px; }
  .cco-stars{ position:relative; display:inline-block; font-size:13px; letter-spacing:1.5px; line-height:1; }
  .cco-stars .bg{ color:var(--cco-border); }
  .cco-stars .fg{ position:absolute; top:0; left:0; color:var(--cco-gold); overflow:hidden; white-space:nowrap; }
  .cco-rv{ font-family:var(--cco-font-b); font-size:11.5px; color:var(--cco-muted); }
  .cco-card-foot{ margin-top:auto; padding-top:11px; display:flex; align-items:baseline; justify-content:space-between; }
  .cco-price{ font-family:var(--cco-font-b); font-weight:600; font-size:19px; line-height:1; color:var(--cco-green); font-variant-numeric:tabular-nums; }
  .cco-price *{ font-family:inherit !important; color:inherit !important; font-size:inherit; }
  .cco-price del{ opacity:.5; font-weight:400; margin-right:6px; }
  .cco-instock{ font-family:var(--cco-font-b); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--cco-muted); display:flex; align-items:center; gap:5px; }
  .cco-instock::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--cco-green); }
  @media (max-width:560px){
    .sellers-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
    .cco-card-name{ font-size:18px; }
  }
  @media (max-width:380px){
    .sellers-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
    .cco-card-name{ font-size:16px; }
  }

  /* ===================================================================
     GLOBAL TYPOGRAPHY — beat use-any-font (uaf.css forces 'figtree' with
     !important on h1-h6, body, p, li, a, em). We out-specify it
     (html body … = higher specificity) so the home.html vintage type wins
     site-wide: Cormorant Garamond for display, Jost for everything else.
     Icon/star fonts use class selectors and are left untouched.
     =================================================================== */
  html body{
    font-family:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif !important;
  }
  html body p, html body li, html body a, html body em, html body blockquote,
  html body input, html body select, html body textarea, html body button, html body label{
    font-family:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif !important;
  }
  html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
  html body .serif, html body .entry-title, html body .widget-title,
  html body .cco-card-name, html body .product_title, html body .page-title{
    font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif !important;
  }

  /* ===================================================================
     FOOTER → home.html dark-green palette (footer.png)
     Existing markup (.footer-light) is recoloured; the dark wordmark would
     vanish on green, so the gold leaf glyph (footer-leaf) is used instead.
     =================================================================== */
  .footer-light{ background:var(--cco-green-dk) !important; color:oklch(88% 0.02 110);
    border-top:1px solid color-mix(in oklch, var(--cco-gold) 22%, transparent); }
  /* Footer wordmark — white logo with green leaf (logo-footer-white.png), reads on dark green. */
  .footer-light .footer-logo img{ height:50px; width:auto; max-width:250px; display:block; }
  .footer-light .footer-desc{ color:oklch(85% 0.02 110); opacity:.78; }
  .footer-light .footer-col h6{ color:var(--cco-gold) !important; font-family:'Jost',sans-serif !important; }
  .footer-light .footer-col h6::before{ background:color-mix(in oklch, var(--cco-gold) 38%, transparent); }
  .footer-light .footer-col h6::after{ background:var(--cco-gold); }
  .footer-light .footer-col li a{ color:oklch(85% 0.02 110); opacity:.82; }
  .footer-light .footer-col li a:hover{ color:#fff; opacity:1; }
  .footer-light .footer-social a{ border-color:color-mix(in oklch, #fff 18%, transparent); color:var(--cco-gold); }
  .footer-light .footer-social a:hover{ background:color-mix(in oklch, #fff 10%, transparent); border-color:var(--cco-gold); color:var(--cco-gold); }
  .footer-light .footer-newsletter p{ color:oklch(85% 0.02 110); opacity:.8; }
  .footer-light .footer-news-form input{ background:color-mix(in oklch, #fff 8%, transparent);
    border-color:color-mix(in oklch, #fff 18%, transparent); color:#fff; }
  .footer-light .footer-news-form input::placeholder{ color:oklch(80% 0.02 110); }
  .footer-light .footer-news-form button{ background:var(--cco-accent); }
  .footer-light .footer-news-form button:hover{ background:var(--cco-accent-dk); }
  .footer-bottom-bar{ background:var(--cco-green-dk); }
  .footer-bottom-bar .pay-icon,
  .footer-bottom-bar .pay-icon.amex,
  .footer-bottom-bar .pay-icon.visa,
  .footer-bottom-bar .pay-icon.mc,
  .footer-bottom-bar .pay-icon.pp{ background:transparent; color:oklch(85% 0.02 110);
    border:1px solid color-mix(in oklch, #fff 22%, transparent); }

  /* ===================================================================
     SECTION HEADER BANNERS (vintage) — Best Sellers & Limited & Rare
     A wide vintage photo strip with the section title overlaid in serif.
     =================================================================== */
  .section-banner{
    position:relative; overflow:hidden; border-radius:12px;
    margin:0 0 44px; min-height:220px;
    display:flex; align-items:center; justify-content:center; text-align:center;
    box-shadow:0 12px 34px rgba(42,51,32,.20);
    isolation:isolate;
  }
  .section-banner > img{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; object-position:center; z-index:0;
  }
  .section-banner::after{
    content:""; position:absolute; inset:0; z-index:1;
    background:linear-gradient(180deg, rgba(22,26,16,.46), rgba(22,26,16,.58));
  }
  .section-banner.section-banner--dark::after{
    background:linear-gradient(180deg, rgba(14,20,12,.52), rgba(14,20,12,.66));
  }
  .section-banner-inner{ position:relative; z-index:2; padding:46px 22px; width:100%; }
  .section-banner-head{ display:flex; align-items:center; justify-content:center; gap:18px; }
  .section-banner-head .swash{ color:var(--gold); width:64px; height:14px; flex:0 0 auto; }
  .section-banner-head h2{
    font-family:'Cormorant Garamond',Georgia,serif; font-weight:600;
    font-size:clamp(30px,4.6vw,50px); line-height:1.04; letter-spacing:.01em;
    color:#fff; margin:0; text-shadow:0 2px 16px rgba(0,0,0,.45);
  }
  .section-banner-inner > p{
    margin:14px auto 0; max-width:640px;
    font-family:'Jost',sans-serif; font-size:15px; line-height:1.6;
    color:rgba(255,255,255,.92); text-shadow:0 1px 8px rgba(0,0,0,.4);
  }
  @media (max-width:768px){
    .section-banner{ min-height:160px; border-radius:9px; margin-bottom:30px; }
    .section-banner-inner{ padding:30px 16px; }
    .section-banner-head{ gap:12px; }
    .section-banner-head .swash{ width:36px; }
    .section-banner-inner > p{ font-size:13.5px; }
  }

  /* Engraved/etched variant — light parchment art, dark sepia title */
  .section-banner.section-banner--etch{
    background:#f3ead8; min-height:clamp(220px,27vw,360px);
    border:1px solid #d8c7a0; box-shadow:0 8px 26px rgba(74,55,32,.16);
  }
  .section-banner.section-banner--etch > img{ object-position:center; }
  .section-banner.section-banner--etch::after{
    background:radial-gradient(ellipse 56% 86% at 50% 50%, rgba(249,243,229,.66) 0%, rgba(249,243,229,0) 70%);
  }
  .section-banner--etch .section-banner-head .swash{ color:#9a7b3f; }
  .section-banner--etch .section-banner-head h2{ color:#3f2e1a; text-shadow:0 1px 1px rgba(255,255,255,.6); }
  .section-banner--etch .section-banner-inner > p{ color:#6c5638; text-shadow:none; }
  @media (max-width:768px){
    .section-banner.section-banner--etch{ min-height:150px; }
  }

  /* ===================================================================
     MINIMALIST SECTION HEADER — big title with subtle etched motifs
     flanking the letters (like the hero watermark). Light, no heavy banner.
     =================================================================== */
  .deco-head{ position:relative; overflow:hidden; padding:20px 0 4px; margin-bottom:30px; }
  .deco-head .ornate-head{ position:relative; z-index:1; margin-bottom:0; }
  .deco-head .section-sub{ position:relative; z-index:1; margin:10px auto 0; }
  .deco-head::before, .deco-head::after{
    content:""; position:absolute; top:50%; transform:translateY(-50%);
    width:150px; height:204px; z-index:0; pointer-events:none; opacity:.42;
    background:url("../banners/etch-motif-havana.jpg") no-repeat center center / contain;
    -webkit-mask-image:radial-gradient(ellipse at center,#000 46%,transparent 80%);
            mask-image:radial-gradient(ellipse at center,#000 46%,transparent 80%);
  }
  .deco-head::before{ left:18px; }
  .deco-head::after{ right:18px; transform:translateY(-50%) scaleX(-1); }
  @media (max-width:1100px){
    .deco-head::before, .deco-head::after{ width:110px; height:150px; opacity:.34; left:2px; }
    .deco-head::after{ right:2px; }
  }
  @media (max-width:768px){
    .deco-head{ overflow:hidden; padding:14px 0 4px; }
    .deco-head::before, .deco-head::after{ width:74px; height:104px; opacity:.20; }
    .deco-head::before{ left:-6px; }
    .deco-head::after{ right:-6px; }
  }

  /* ===================================================================
     STRIP BANNER — thin vintage etched frieze (cream) with the section
     title (e.g. "Best Selling") overlaid in serif. Blends with section bg.
     =================================================================== */
  .strip-banner{ position:relative; max-width:1080px; margin:6px auto 0; }
  .strip-banner img{ display:block; width:100%; height:auto; }
  .strip-banner .strip-title{
    position:absolute; inset:0; margin:0; z-index:1;
    display:flex; align-items:center; justify-content:center; text-align:center;
    font-family:'Cormorant Garamond',Georgia,serif; font-weight:600;
    font-size:clamp(22px,3.6vw,46px); line-height:1; letter-spacing:.02em;
    color:var(--ink);
  }
  .section-sub.strip-sub{ margin:14px auto 36px; }

  /* Hero video slider (crossfade between Father's Day + Behike) in the image slot */
  .cco-hero-slider{ position:absolute; inset:0; width:100%; height:100%; }
  .cco-hero-slider .cco-slide{ position:absolute; inset:0; display:block; line-height:0;
    opacity:0; transition:opacity .8s ease; }
  .cco-hero-slider .cco-slide.is-active{ opacity:1; }
  .cco-hero-slider .hero-banner-video{ display:block; width:100%; height:100%; object-fit:cover; object-position:center; }

  /* ===================================================================
     FATHER'S DAY PROMO BANNER (home)
     =================================================================== */
  .fathers-day-promo{ background:var(--cream-light); padding:8px 0 28px; }
  .fathers-day-banner{ display:block; border-radius:12px; overflow:hidden;
    box-shadow:0 12px 34px rgba(42,51,32,.18); transition:transform .3s ease, box-shadow .3s ease; }
  .fathers-day-banner img{ display:block; width:100%; height:auto; }
  .fathers-day-banner:hover{ transform:translateY(-3px); box-shadow:0 18px 44px rgba(42,51,32,.26); }
  .fathers-day-cta{ text-align:center; margin-top:20px; }
  .fathers-day-btn{ display:inline-block; font-family:var(--cco-font-b); font-weight:600;
    letter-spacing:.12em; text-transform:uppercase; font-size:13px;
    padding:15px 36px; border-radius:6px; background:var(--wine); color:#fff !important;
    box-shadow:0 6px 18px rgba(108,30,38,.28); transition:transform .2s ease, box-shadow .2s ease, background .2s ease; }
  .fathers-day-btn:hover{ transform:translateY(-2px); background:var(--cco-accent-dk,#5a161d);
    box-shadow:0 10px 26px rgba(108,30,38,.38); color:#fff !important; }
  @media (max-width:560px){
    .fathers-day-btn{ display:block; width:100%; padding:15px 18px; font-size:12px; letter-spacing:.08em; }
  }

  /* ===================================================================
     TOPBAR — Trustpilot 4.8 rating + phone (replaces feature blurbs)
     =================================================================== */
  .cco-util-trust, .cco-util-phone{ display:flex; align-items:center; gap:8px; color:inherit; text-decoration:none; opacity:.95; transition:opacity .2s; }
  .cco-util-trust:hover, .cco-util-phone:hover{ opacity:1; }
  .cco-util-trust .cco-tp-stars{ display:inline-flex; align-items:center; gap:2px; }
  /* Trustpilot green star boxes — override the topbar's generic gold svg styling */
  .cco-util .cco-util-trust .tp-star{ width:14px; height:14px; stroke:none; }
  .cco-util .cco-util-trust .tp-star rect{ fill:#00b67a; stroke:none; }
  .cco-util .cco-util-trust .tp-star path{ fill:#fff; stroke:none; }
  .cco-util-trust .cco-tp-text strong{ font-weight:700; }
  /* keep the Trustpilot wordmark light on the dark green topbar (global .cco-tp-name paints it green) */
  .cco-util .cco-util-trust .cco-tp-name{ font-weight:700; color:#ffffff; }
  .cco-util .cco-util-phone svg{ width:13px; height:13px; stroke:var(--cco-gold); }

  /* ===================================================================
     IMAGE MEGA-MENUS — Limited Editions & Accessories (cards w/ images)
     =================================================================== */
  .cco-mega.cco-mega--cards{ width:540px; }
  .cco-mega--cards .cco-cards-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
  .cco-cat-card{ display:flex; flex-direction:column; gap:8px; text-decoration:none; border-radius:8px; padding:7px; transition:transform .2s, background .2s; }
  .cco-cat-card:hover{ background:var(--cco-bg); transform:translateY(-2px); }
  .cco-cat-card-img{ display:block; aspect-ratio:4/3; border-radius:6px; overflow:hidden; background:var(--cco-bg-2); border:1px solid var(--cco-border); }
  .cco-cat-card-img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
  .cco-cat-card:hover .cco-cat-card-img img{ transform:scale(1.06); }
  .cco-cat-card-name{ font-family:var(--cco-font-b); font-size:11px; letter-spacing:.06em; color:var(--cco-fg); text-align:center; line-height:1.25; transition:color .2s; }
  .cco-cat-card:hover .cco-cat-card-name{ color:var(--cco-accent); }

  /* Topbar responsive: keep Trustpilot stars + phone visible & tidy on phones */
  @media (max-width:768px){
    .cco-util-left{ gap:16px; flex-wrap:nowrap; }
    .cco-util-trust, .cco-util-phone{ gap:6px; white-space:nowrap; }
    .cco-util-trust .cco-tp-stars{ display:inline-flex; }
    .cco-util .cco-util-trust .tp-star{ width:13px; height:13px; }
    .cco-util-trust .cco-tp-text, .cco-util-phone span{ font-size:10.5px; letter-spacing:.03em; }
  }
  @media (max-width:480px){
    .cco-util-left{ gap:11px; }
    .cco-util-trust, .cco-util-phone{ gap:5px; }
    .cco-util-trust .cco-tp-stars{ gap:1.5px; }
    .cco-util .cco-util-trust .tp-star{ width:11.5px; height:11.5px; }
    .cco-util-trust .cco-tp-text, .cco-util-phone span{ font-size:9.5px; letter-spacing:.01em; }
    .cco-util .cco-util-phone svg{ width:11px; height:11px; }
  }
  @media (max-width:360px){
    .cco-util-trust .cco-tp-text .tp-on{ display:none; }   /* drop the word "on" only, keep 4.8 + Trustpilot */
    .cco-util-left{ gap:9px; }
  }

  /* Phones: keep Account (login) + Cart + hamburger; Wishlist lives in the
     drawer. Even spacing, and nudge the hamburger toward the edge. */
  @media (max-width:600px){
    .cco-tools .icobtn[aria-label="Wishlist"]{ display:none; }
    .cco-tools{ gap:4px; }
    .cco-tools .icobtn{ width:38px; height:38px; }
    .cco-tools .burger{ margin-right:-6px; }
    .cco-head-inner{ padding-left:14px; padding-right:10px; }
    .cco-site-header .brand .brand-logo{ height:38px; }
  }

  /* Force the design fonts on custom header/menu text nodes (divs/spans the
     global override block doesn't list) so nothing falls back to Helvetica. */
  html body .cco-mega-head,
  html body .cco-cat-card-name,
  html body .cco-brand-tile-name,
  html body .cco-util-trust, html body .cco-util-trust *,
  html body .cco-util-phone, html body .cco-util-phone *,
  html body .cco-mega-foot a{ font-family:var(--cco-font-b) !important; }
  html body .cco-mega-foot .accent{ font-family:var(--cco-font-d) !important; }

  /* ===================================================================
     MOTION (motion.dev) — reveal-on-scroll + add-to-cart UX
     Hidden initial state applies only under html.cco-anim (added before
     paint by the head bootstrap) → no flash. html.cco-anim-done is a
     failsafe that reveals everything if the reveal JS never runs.
     =================================================================== */
  html.cco-anim .cco-card,
  html.cco-anim .brand-card,
  html.cco-anim .trust-prop,
  html.cco-anim .testi-card,
  html.cco-anim .story-card,
  html.cco-anim .catalog-product-item,
  html.cco-anim .strip-banner,
  html.cco-anim .deco-head,
  html.cco-anim .ornate-head,
  html.cco-anim .buyers-image,
  html.cco-anim .buyers-content{
    opacity:0; transform:translateY(20px);
    transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);
    will-change:opacity, transform;
  }
  html.cco-anim .cco-card.is-in,
  html.cco-anim .brand-card.is-in,
  html.cco-anim .trust-prop.is-in,
  html.cco-anim .testi-card.is-in,
  html.cco-anim .story-card.is-in,
  html.cco-anim .catalog-product-item.is-in,
  html.cco-anim .strip-banner.is-in,
  html.cco-anim .deco-head.is-in,
  html.cco-anim .ornate-head.is-in,
  html.cco-anim .buyers-image.is-in,
  html.cco-anim .buyers-content.is-in,
  html.cco-anim-done .cco-card,
  html.cco-anim-done .brand-card,
  html.cco-anim-done .trust-prop,
  html.cco-anim-done .testi-card,
  html.cco-anim-done .story-card,
  html.cco-anim-done .catalog-product-item,
  html.cco-anim-done .strip-banner,
  html.cco-anim-done .deco-head,
  html.cco-anim-done .ornate-head,
  html.cco-anim-done .buyers-image,
  html.cco-anim-done .buyers-content{
    opacity:1 !important; transform:none !important;
  }

  /* Add-to-cart buttons — richer interaction (hover lift, active press, gold shine) */
  .cco-qadd, .single_add_to_cart_button, .add-to-cart-btn, .add_to_cart_button{
    transition:transform .18s ease, box-shadow .2s ease, background .2s ease, filter .2s ease;
  }
  .cco-qadd:hover, .single_add_to_cart_button:hover, .add-to-cart-btn:hover, .add_to_cart_button:hover{
    transform:translateY(-1px); filter:brightness(1.04);
  }
  .cco-qadd:active, .single_add_to_cart_button:active, .add-to-cart-btn:active, .add_to_cart_button:active{
    transform:translateY(0) scale(.97);
  }
  /* shine sweep on the bigger buttons */
  .single_add_to_cart_button, .add-to-cart-btn{ position:relative; overflow:hidden; }
  .single_add_to_cart_button::after, .add-to-cart-btn::after{
    content:""; position:absolute; top:0; left:-130%; width:60%; height:100%; pointer-events:none;
    background:linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
    transform:skewX(-18deg); transition:left .6s ease;
  }
  .single_add_to_cart_button:hover::after, .add-to-cart-btn:hover::after{ left:130%; }

  /* ===================================================================
     SEARCH AUTOCOMPLETE dropdown + empty-input validation message
     =================================================================== */
  form.cco-search-form{ position:relative; overflow:visible; }
  .cco-suggest{
    position:absolute; top:100%; left:0; right:0; z-index:1400; display:none;
    background:#fff; border:1px solid var(--cco-border,#ece2cf); border-top:0;
    border-radius:0 0 10px 10px; box-shadow:0 16px 36px rgba(42,51,32,.18);
    max-height:64vh; overflow:auto; margin-top:1px;
  }
  .cco-suggest.open{ display:block; }
  .cco-suggest-item{
    display:flex; align-items:center; gap:11px; padding:9px 13px; text-decoration:none;
    color:var(--cco-fg); border-bottom:1px solid var(--cream,#F5EFE3); transition:background .15s;
  }
  .cco-suggest-item:last-child{ border-bottom:0; }
  .cco-suggest-item:hover{ background:var(--cream-light,#FAF6EE); }
  .cco-suggest-item img, .cco-suggest-noimg{
    width:42px; height:42px; flex:0 0 auto; object-fit:contain; background:#fff;
    border:1px solid var(--cream,#F5EFE3); border-radius:5px;
  }
  .cco-suggest-name{ flex:1; min-width:0; font-family:var(--cco-font-b); font-size:13px; line-height:1.3; color:var(--cco-fg); }
  .cco-suggest-price{ font-family:var(--cco-font-b); font-weight:600; font-size:13px; color:var(--cco-green); white-space:nowrap; }
  .cco-suggest-empty{ padding:13px; font-family:var(--cco-font-b); font-size:13px; color:var(--cco-muted); }
  .cco-search-msg{
    position:absolute; top:calc(100% + 7px); left:0; z-index:1500;
    background:var(--cco-accent,#6c1e26); color:#fff; font-family:var(--cco-font-b);
    font-size:12px; letter-spacing:.01em; padding:7px 13px; border-radius:7px;
    box-shadow:0 6px 18px rgba(108,30,38,.3); opacity:0; pointer-events:none; transition:opacity .2s;
  }
  .cco-search-msg.show{ opacity:1; }
  .cco-shake{ animation:cco-shake .4s ease; }
  @keyframes cco-shake{ 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-4px)} 40%,80%{transform:translateX(4px)} }