:root{
    --green-900:#0f3d2e;
    --green-800:#124f3b;
    --green-700:#166944;
    --green-600:#1c8a56;
    --green-500:#2ea866;
    --green-100:#e3f3ea;
    --cream:#fbf7ee;
    --sand:#f1e8d6;
    --sand-dark:#e6d8bd;
    --ink:#1a2420;
    --ink-soft:#57645d;
    --ink-faint:#8a938d;
    --gold:#d9a441;
    --gold-dark:#b8842a;
    --red:#c0392b;
    --white:#ffffff;
    --radius-sm:8px;
    --radius:14px;
    --radius-lg:22px;
    --shadow-sm:0 1px 2px rgba(15,61,46,0.06), 0 1px 1px rgba(15,61,46,0.10);
    --shadow:0 2px 6px rgba(15,61,46,0.08), 0 8px 20px rgba(15,61,46,0.10);
    --shadow-lg:0 4px 12px rgba(15,61,46,0.10), 0 20px 48px rgba(15,61,46,0.20);
    --line:rgba(15,61,46,0.10);
    --ease:cubic-bezier(.22,1,.36,1);
  }
  ::selection{background:var(--green-600);color:var(--white);}
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;width:100%;overflow-x:hidden;overflow-x:clip;}
  body{
    margin:0;
    font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    background:var(--cream);
    color:var(--ink);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  img,svg{max-width:100%;display:block;}
  a{color:inherit;}
  button{font-family:inherit;cursor:pointer;}
  h1,h2,h3,h4{font-family:Georgia,"Times New Roman",serif;}
  ::selection{background:var(--gold);color:var(--green-900);}
  :focus-visible{outline:2.5px solid var(--gold);outline-offset:2px;border-radius:4px;}
  .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}

  /* ---------- Top bar ---------- */
  .topbar{
    background:var(--green-900);
    color:rgba(255,255,255,0.92);
    font-size:0.82rem;
    padding:7px 0;
    border-bottom:1px solid rgba(255,255,255,0.08);
  }
  .topbar .wrap{
    max-width:1200px;margin:0 auto;padding:0 20px;
    display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px;
  }
  .topbar a{text-decoration:none;opacity:0.92;font-weight:600;}
  .topbar a:hover{opacity:1;text-decoration:underline;}

  /* ---------- Header ---------- */
  header.site{
    background:rgba(255,255,255,0.94);
    backdrop-filter:blur(10px);
    position:sticky;top:0;z-index:50;
    border-bottom:1px solid var(--line);
    box-shadow:0 4px 16px rgba(15,61,46,0.05);
  }
  .header-inner{
    max-width:1200px;margin:0 auto;padding:12px 20px;
    display:flex;align-items:center;gap:24px;justify-content:space-between;
  }
  .brand{display:flex;align-items:center;gap:12px;text-decoration:none;transition:transform .2s var(--ease);}
  .brand:hover{transform:scale(1.02);}
  .logo-mark{width:auto;flex-shrink:0;display:block;object-fit:contain;}
  .logo-mark.header{height:52px;}
  .logo-badge{
    border-radius:50%;background:var(--white);display:flex;align-items:center;justify-content:center;
    overflow:hidden;flex-shrink:0;box-shadow:0 4px 14px rgba(15,61,46,0.20);
  }
  /* The mark is a wide arch, so it needs almost the whole circle to read
     properly - 14% padding left it floating in the middle. */
  .logo-badge img{width:100%;height:100%;object-fit:contain;padding:4%;box-sizing:border-box;display:block;}
  .logo-badge.header{width:50px;height:50px;}
  .logo-badge.badge-hero{width:150px;height:150px;box-shadow:0 12px 32px rgba(0,0,0,0.30);margin:0 0 24px;}
  .brand-name{font-weight:800;font-size:1.08rem;color:var(--green-900);letter-spacing:-0.01em;line-height:1.15;white-space:nowrap;}
  .logo-mark.footer{height:80px;}
  .logo-mark.hero{height:104px;}
  .logo-vip-mark{width:auto;flex-shrink:0;}
  nav.main-nav{display:flex;gap:8px;font-weight:600;font-size:0.94rem;}
  nav.main-nav a{
    text-decoration:none;color:var(--ink);padding:9px 14px;border-radius:999px;
    transition:background .18s var(--ease),color .18s var(--ease);
  }
  nav.main-nav a:hover{background:var(--green-100);color:var(--green-800);}
  nav.main-nav a.active{background:var(--green-800);color:var(--white);}
  nav.main-nav a.active:hover{background:var(--green-800);color:var(--white);}
  .header-actions{display:flex;align-items:center;gap:12px;}
  .search-box{
    display:flex;align-items:center;background:var(--sand);border-radius:999px;
    padding:9px 16px;gap:8px;min-width:230px;border:1.5px solid transparent;
    transition:border-color .18s var(--ease), background .18s var(--ease);
  }
  .search-box:focus-within{border-color:var(--green-500);background:var(--white);}
  .search-box input{
    border:none;background:transparent;outline:none;font-size:0.9rem;width:100%;color:var(--ink);
  }
  .search-box input::placeholder{color:var(--ink-faint);}
  .mobile-search{display:none;}
  .cart-btn{
    position:relative;background:var(--green-700);color:var(--white);border:none;
    border-radius:999px;padding:11px 20px;font-weight:700;font-size:0.9rem;
    display:flex;align-items:center;gap:9px;box-shadow:var(--shadow-sm);
    transition:background .18s var(--ease), transform .18s var(--ease);
  }
  .cart-btn:hover{background:var(--green-600);transform:translateY(-1px);}
  .cart-btn:active{transform:translateY(0);}
  .cart-count{
    background:var(--gold);color:var(--green-900);border-radius:999px;
    font-size:0.72rem;font-weight:800;min-width:20px;height:20px;
    display:flex;align-items:center;justify-content:center;padding:0 5px;
    transition:transform .2s var(--ease);
  }
  .cart-count.bump{animation:bump .3s var(--ease);}
  @keyframes bump{0%{transform:scale(1);}40%{transform:scale(1.35);}100%{transform:scale(1);}}
  .mobile-toggle{display:none;background:var(--sand);border:none;font-size:1.3rem;color:var(--green-900);border-radius:10px;width:42px;height:42px;}

  /* ---------- Hero ---------- */
  .hero{
    background:
      radial-gradient(circle at 12% 15%, rgba(217,164,65,0.20), transparent 42%),
      radial-gradient(circle at 88% 85%, rgba(46,168,102,0.20), transparent 48%),
      linear-gradient(135deg,var(--green-900),var(--green-700));
    color:var(--white);
    padding:60px 20px 52px;
    position:relative;
    overflow:hidden;
  }
  .hero-inner{
    max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:44px;flex-wrap:wrap;position:relative;z-index:1;
  }
  .hero-copy{flex:1 1 440px;}
  .eyebrow{
    display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,0.14);
    padding:7px 15px;border-radius:999px;font-size:0.76rem;font-weight:700;
    letter-spacing:.05em;text-transform:uppercase;margin-bottom:18px;
  }
  .hero h1{font-size:clamp(1.9rem,4vw,2.6rem);line-height:1.14;margin:0 0 16px;font-weight:700;}
  .hero p.lead{font-size:1.05rem;color:rgba(255,255,255,0.88);max-width:520px;margin:0 0 26px;}
  .hero-ctas{display:flex;gap:14px;flex-wrap:wrap;}
  .btn{
    border:none;border-radius:10px;padding:14px 28px;font-weight:700;font-size:0.95rem;
    text-decoration:none;display:inline-flex;align-items:center;gap:8px;
    transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
  }
  .btn-primary{background:var(--gold);color:var(--green-900);box-shadow:0 10px 24px rgba(217,164,65,0.32);}
  .btn-primary:hover{background:#e8b656;transform:translateY(-2px);box-shadow:0 14px 28px rgba(217,164,65,0.4);}
  .btn-outline{background:rgba(255,255,255,0.05);color:var(--white);border:1.5px solid rgba(255,255,255,0.55);}
  .btn-outline:hover{background:rgba(255,255,255,0.14);transform:translateY(-2px);}
  .btn-dark{background:var(--green-900);color:var(--white);box-shadow:0 10px 24px rgba(0,0,0,0.32);}
  .btn-dark:hover{background:#0a2e22;transform:translateY(-2px);box-shadow:0 14px 28px rgba(0,0,0,0.38);}
  .hero-stats{display:flex;gap:30px;margin-top:34px;flex-wrap:wrap;}
  .hero-stats div{min-width:110px;}
  .hero-stats .num{font-size:1.55rem;font-weight:800;color:var(--gold);font-family:Georgia,serif;}
  .hero-stats .label{font-size:0.78rem;color:rgba(255,255,255,0.72);}
  .hero-card{
    flex:1 1 320px;background:var(--white);color:var(--ink);border-radius:var(--radius-lg);
    padding:26px;box-shadow:var(--shadow-lg);max-width:380px;
  }
  .hero-card h3{margin:0 0 14px;color:var(--green-900);font-size:1.05rem;}
  .info-row{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--sand);}
  .info-row:last-child{border-bottom:none;}
  .info-row .ic{
    width:36px;height:36px;border-radius:10px;background:var(--sand);
    display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.02rem;
  }
  .info-row .txt strong{display:block;font-size:0.88rem;}
  .info-row .txt span{font-size:0.82rem;color:var(--ink-soft);}

  /* ---------- Section shell ---------- */
  section{padding:60px 20px;}
  .section-inner{max-width:1200px;margin:0 auto;}
  .section-head{text-align:center;max-width:640px;margin:0 auto 40px;}
  .section-head .tag{
    color:var(--green-700);font-weight:700;letter-spacing:.07em;text-transform:uppercase;font-size:0.76rem;
  }
  .section-head h2{font-size:1.9rem;margin:8px 0 10px;color:var(--green-900);font-weight:700;}
  .section-head p{color:var(--ink-soft);margin:0;}

  /* ---------- Deals on now ----------
     A deal has to read at a glance from a phone held in one hand at the
     counter: the picture, the price ladder, and the number to call. The
     board is dark green so it reads as a different thing from the shelves
     below it, and the prices sit on cream so they carry the most contrast
     on the page. */
  .promos{background:linear-gradient(170deg,var(--green-900),var(--green-800) 62%,#0c3426);}
  .promos .section-head .tag{color:var(--gold);}
  .promos .section-head h2{color:#fff;}
  .promos .section-head p{color:rgba(255,255,255,0.78);}
  .promo-shell{position:relative;display:flex;align-items:center;gap:10px;}
  .promo-track{flex:1 1 auto;min-width:0;}
  .promo-slide{display:none;}
  .promo-slide.active{
    display:grid;grid-template-columns:minmax(0,0.84fr) minmax(0,1.16fr);gap:28px;align-items:stretch;
    background:var(--cream);border-radius:var(--radius-lg);overflow:hidden;
    box-shadow:var(--shadow-lg);border:1px solid rgba(217,164,65,0.35);
  }
  .promo-media{
    position:relative;background:#120f0c;display:flex;align-items:center;justify-content:center;overflow:hidden;
  }
  .promo-media img{width:100%;height:100%;object-fit:cover;object-position:top center;}
  /* The flag sits on the written side, not over the artwork - on the flyer
     the top corners are the VIP logo and the product name, and a ribbon
     dropped there covers the brand. */
  .promo-flag{
    align-self:flex-start;background:var(--red);color:#fff;
    font-size:0.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
    padding:6px 13px;border-radius:999px;box-shadow:0 3px 10px rgba(192,57,43,0.32);
  }
  .promo-body{padding:30px 32px 28px;display:flex;flex-direction:column;justify-content:center;gap:10px;min-width:0;}
  .promo-eyebrow{
    color:var(--green-700);font-weight:800;letter-spacing:.09em;text-transform:uppercase;font-size:0.72rem;
  }
  .promo-body h3{margin:0;font-size:1.72rem;line-height:1.15;color:var(--green-900);letter-spacing:-0.01em;}
  .promo-sub{margin:0;color:var(--ink-soft);font-size:0.93rem;line-height:1.55;}
  .promo-pack{
    margin:0;font-size:0.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);
  }
  /* The price ladder. Three rows, each one a quantity and what it costs -
     the saving sits to the right so the reason to buy more is on the same
     line as the price. */
  .promo-tiers{
    list-style:none;margin:6px 0 0;padding:0;border:1px solid var(--line);
    border-radius:var(--radius);overflow:hidden;background:var(--white);
  }
  .promo-tiers li{
    display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;
    padding:11px 14px;border-bottom:1px solid var(--line);
  }
  .promo-tiers li:last-child{border-bottom:none;}
  .promo-tiers li:last-child{background:rgba(217,164,65,0.12);}
  .t-qty{font-size:0.88rem;font-weight:700;color:var(--green-900);}
  .t-price{font-family:Georgia,serif;font-size:1.12rem;font-weight:800;color:var(--green-800);white-space:nowrap;}
  .t-price small{font-family:Arial,sans-serif;font-size:0.64rem;font-weight:700;color:var(--ink-faint);letter-spacing:.03em;}
  .t-save{
    font-size:0.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
    color:var(--green-700);min-width:112px;text-align:right;
  }
  /* The two headline bundles, shown as the flyer shows them. */
  .promo-bundles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:4px;}
  .bundle{
    background:var(--green-900);color:#fff;border-radius:var(--radius);padding:13px 15px;
    display:flex;flex-direction:column;gap:2px;border:1px solid rgba(217,164,65,0.45);
  }
  .b-qty{font-size:0.7rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--gold);}
  .b-total{font-family:Georgia,serif;font-size:1.3rem;font-weight:800;line-height:1.2;}
  .b-save{font-size:0.68rem;font-weight:700;color:rgba(255,255,255,0.72);}
  .promo-ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;}
  .promo-ctas .btn{font-size:0.86rem;padding:11px 16px;}
  .promo-ctas .btn.ghost{
    border:1.5px solid var(--green-900);color:var(--green-900);background:transparent;
    text-decoration:none;font-weight:700;border-radius:10px;
    display:inline-flex;align-items:center;transition:background .15s var(--ease), color .15s var(--ease);
  }
  .promo-ctas .btn.ghost:hover{background:var(--green-900);color:#fff;}
  .promo-terms{margin:4px 0 0;font-size:0.76rem;line-height:1.5;color:var(--ink-faint);}
  /* Arrows and dots only exist when there is more than one deal - promos.js
     removes them otherwise, so a single deal is not framed by dead controls. */
  .promo-arrow{
    flex:0 0 auto;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,0.3);
    background:rgba(255,255,255,0.08);color:#fff;font-size:1.5rem;line-height:1;
    display:flex;align-items:center;justify-content:center;transition:background .15s var(--ease);
  }
  .promo-arrow:hover{background:rgba(255,255,255,0.2);}
  .promo-dots{display:flex;justify-content:center;gap:8px;margin-top:18px;}
  .promo-dot{
    width:9px;height:9px;padding:0;border-radius:50%;border:none;
    background:rgba(255,255,255,0.32);transition:background .15s var(--ease), transform .15s var(--ease);
  }
  .promo-dot.on{background:var(--gold);transform:scale(1.25);}
  @media (max-width:900px){
    .promo-slide.active{grid-template-columns:1fr;}
    /* On a phone the flyer IS the advert, so show all of it rather than a
       cropped band - the case deals are printed along the bottom of it. */
    .promo-media{max-height:none;}
    .promo-media img{height:auto;object-fit:contain;}
    .promo-body{padding:22px 20px 24px;}
    .promo-body h3{font-size:1.4rem;}
    .promo-arrow{position:absolute;top:140px;z-index:3;background:rgba(15,61,46,0.72);}
    .promo-arrow.prev{left:8px;}
    .promo-arrow.next{right:8px;}
    .promo-tiers li{grid-template-columns:1fr auto;row-gap:2px;}
    .t-save{grid-column:1/-1;text-align:left;min-width:0;}
    .promo-ctas .btn{width:100%;justify-content:center;}
  }
  @media (max-width:420px){
    .promo-bundles{grid-template-columns:1fr;}
  }

  /* ---------- Categories ---------- */
  .cat-grid{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;
  }
  .cat-card{
    background:var(--white);border-radius:var(--radius);padding:24px 16px;text-align:center;
    box-shadow:var(--shadow-sm);border:1px solid var(--line);
    transition:transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s var(--ease);
    cursor:pointer;position:relative;
    display:block;text-decoration:none;
  }
  .cat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--green-500);}
  .cat-card:active{transform:translateY(-1px);}
  .cat-card.active{border-color:var(--green-700);border-width:2px;background:var(--green-100);box-shadow:var(--shadow-sm);}
  .cat-card .ic-wrap{
    width:56px;height:56px;border-radius:50%;background:var(--sand);margin:0 auto 12px;
    display:flex;align-items:center;justify-content:center;font-size:1.7rem;
    box-shadow:inset 0 0 0 1px var(--line);
    transition:background .16s var(--ease);
  }
  .cat-card:hover .ic-wrap{background:var(--green-100);}
  .cat-card h4{margin:0 0 4px;font-size:0.94rem;color:var(--green-900);font-weight:700;letter-spacing:-0.01em;}
  .cat-card .count{font-size:0.72rem;color:var(--ink-faint);font-weight:700;text-transform:uppercase;letter-spacing:.04em;}

  /* ---------- Featured brand strip ---------- */
  .brand-strip{
    background:var(--white);border-radius:var(--radius-lg);padding:36px;margin-top:36px;
    display:flex;gap:26px;align-items:center;flex-wrap:wrap;border:2px solid var(--gold);
    box-shadow:var(--shadow-sm);
  }
  .brand-strip h3{margin:0 0 8px;color:var(--green-900);font-size:1.15rem;font-weight:700;}
  .brand-strip p{margin:0;color:var(--ink-soft);}

  /* ---------- Shop ---------- */
  .shop-bg{background:var(--white);}
  .filter-row{
    display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:28px;
  }
  .filter-bar{display:flex;gap:9px;flex-wrap:wrap;}
  /* Department + sort dropdowns */
  .filter-field{display:flex;flex-direction:column;gap:4px;min-width:0;}
  .filter-field label{
    font-size:0.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
    color:var(--ink-faint);padding-left:2px;
  }
  .dept-select{min-width:290px;max-width:100%;font-weight:700;}
  .dept-select optgroup{font-weight:800;color:var(--green-900);background:var(--cream);}
  .dept-select option{font-weight:600;color:var(--ink);}
  .clear-filter{align-self:flex-end;}
  /* Second row: the departments inside the chosen aisle. Visually quieter than
     the aisle row so the two levels read as a hierarchy, not 37 equal chips. */
  .filter-bar.dept-bar{
    margin:10px 0 2px;padding:10px 0 0;border-top:1px dashed var(--line);gap:7px;
  }
  .chip.sub{
    font-size:0.82rem;padding:7px 13px;background:var(--white);
    border:1.5px solid var(--line);color:var(--ink-soft);font-weight:600;
  }
  .chip.sub:hover{border-color:var(--green-500);color:var(--green-800);background:var(--green-100);}
  .chip.sub.active{background:var(--green-700);border-color:var(--green-700);color:var(--white);}
  .chip small{opacity:.62;font-weight:600;font-size:0.78em;margin-left:2px;}
  .chip.active small{opacity:.8;}
  .chip{
    background:var(--sand);border:none;padding:9px 18px;border-radius:999px;
    font-weight:600;font-size:0.85rem;color:var(--ink);
    transition:background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
  }
  .chip:hover{transform:translateY(-1px);}
  .chip.active{background:var(--green-700);color:var(--white);}
  .sort-select{
    background:var(--sand);border:none;border-radius:999px;padding:9px 16px;font-weight:600;
    font-size:0.85rem;color:var(--ink);cursor:pointer;
  }
  .result-count{font-size:0.82rem;color:var(--ink-faint);text-align:center;margin:-14px 0 22px;}
  .product-grid{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(224px,1fr));gap:20px;
  }
  .product-card{
    background:var(--cream);border-radius:var(--radius);padding:16px;
    box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:10px;position:relative;
    transition:transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s var(--ease);
    border:1px solid var(--line);
  }
  .product-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:rgba(15,61,46,0.16);}
  .product-thumb{
    height:112px;border-radius:10px;background:linear-gradient(150deg,var(--sand),var(--white));
    display:flex;align-items:center;justify-content:center;font-size:2.5rem;position:relative;
    overflow:hidden;box-shadow:inset 0 0 0 1px var(--line);cursor:pointer;
  }
  .product-thumb img{width:100%;height:100%;object-fit:cover;object-position:center;border-radius:10px;transition:transform .3s var(--ease);}
  /* Not every one of 26,436 products has been photographed. Rather than an
     empty box, show a designed tile: department icon over a soft pattern with
     the brand name, so the card still reads as a real product. */
  .product-thumb.ph{
    flex-direction:column;gap:3px;
    background:
      repeating-linear-gradient(135deg, rgba(15,61,46,0.035) 0 8px, transparent 8px 16px),
      linear-gradient(150deg, var(--sand) 0%, var(--white) 70%);
  }
  .product-thumb.ph .ph-emoji{font-size:1.9rem;line-height:1;filter:saturate(.85);opacity:.9;}
  .qv-ph-label{
    display:block;margin-top:8px;font-size:0.72rem;font-weight:800;letter-spacing:.08em;
    text-transform:uppercase;color:var(--green-800);opacity:.6;text-align:center;
  }
  .product-thumb.ph .ph-label{
    font-size:0.58rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
    color:var(--green-800);opacity:.62;max-width:92%;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap;text-align:center;
  }
  .product-card:hover .product-thumb img{transform:scale(1.045);}
  /* Furniture: room photographs, shown large enough to actually sell the set. */
  .product-grid.showcase .product-thumb{height:210px;}
  .product-grid.showcase .product-card h4{font-size:1rem;}
  @media (max-width: 720px){
    .product-grid.showcase .product-thumb{height:150px;}
  }
  .brand-chip{
    align-self:flex-start;font-size:0.66rem;font-weight:800;color:var(--green-700);
    background:var(--green-100);padding:3px 9px;border-radius:999px;letter-spacing:.03em;text-transform:uppercase;
  }
  .product-card h4{margin:0;font-size:0.95rem;font-weight:700;line-height:1.32;min-height:2.5em;letter-spacing:-0.005em;color:var(--ink);}
  .product-meta{font-size:0.76rem;color:var(--ink-faint);font-weight:500;}
  .size-pills{display:flex;flex-wrap:wrap;gap:5px;}
  .size-pill{
    background:var(--sand);border:1px solid transparent;color:var(--ink);font-weight:700;font-size:0.68rem;
    padding:4px 9px;border-radius:999px;transition:background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
  }
  .size-pill:hover{border-color:var(--green-500);}
  .size-pill.active{background:var(--green-700);color:var(--white);}

  /* ---------- Quick-view modal ---------- */
  .qv-modal{
    position:fixed;top:50%;left:50%;transform:translate(-50%,-46%);width:min(720px,92vw);max-height:88vh;
    overflow-y:auto;background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
    z-index:401;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  }
  .qv-modal.open{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,-50%);}
  .qv-close{
    position:absolute;top:14px;right:14px;background:var(--sand);border:none;width:34px;height:34px;border-radius:50%;
    font-size:1rem;color:var(--ink);z-index:1;
  }
  .qv-close:hover{background:var(--green-100);}
  .qv-body{display:flex;gap:0;}
  .qv-image{
    /* positioned, so the Sold stamp inside it is placed over THIS panel - left
       to the modal it lands across the product text. */
    position:relative;
    flex:1 1 45%;min-height:280px;background:linear-gradient(150deg,var(--sand),var(--white));
    display:flex;align-items:center;justify-content:center;border-radius:var(--radius-lg) 0 0 var(--radius-lg);overflow:hidden;
  }
  .qv-image img{width:100%;height:100%;object-fit:contain;min-height:280px;padding:18px;box-sizing:border-box;}
  .qv-image .qv-emoji{font-size:5rem;}
  .qv-info{flex:1 1 55%;padding:32px 30px;display:flex;flex-direction:column;gap:10px;}
  .qv-info h3{margin:0;font-size:1.3rem;color:var(--green-900);letter-spacing:-0.01em;}
  .qv-desc{margin:0;color:var(--ink-soft);font-size:0.92rem;line-height:1.6;}
  .qv-size-select{margin-top:6px;}
  .qv-size-label{font-size:0.76rem;font-weight:700;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.03em;margin-bottom:8px;}
  .qv-variant-size{font-size:0.8rem;color:var(--ink-soft);margin-top:8px;}
  .qv-bottom{
    margin-top:auto;padding-top:18px;border-top:1px solid var(--line);
    display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  }
  .qv-bottom .price{font-size:1.35rem;}
  #qvAddWrap .qv-add-btn{width:auto;height:auto;padding:11px 22px;border-radius:10px;font-size:0.9rem;font-weight:700;white-space:nowrap;flex-shrink:0;}
  #qvAddWrap{flex-shrink:0;}

  .product-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:2px;border-top:1px solid var(--line);padding-top:10px;}
  .price{font-weight:800;color:var(--green-800);font-size:1.1rem;font-family:Georgia,serif;letter-spacing:-0.01em;}
  .price small{font-weight:700;font-size:0.68rem;color:var(--ink-faint);font-family:Arial,sans-serif;letter-spacing:.02em;}
  .add-btn{
    background:var(--green-700);color:var(--white);border:none;border-radius:9px;
    width:36px;height:36px;font-size:1.25rem;font-weight:700;line-height:1;box-shadow:var(--shadow-sm);
    transition:background .15s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease);
  }
  .add-btn:hover{background:var(--green-600);transform:scale(1.08);box-shadow:var(--shadow);}
  .add-btn:active{transform:scale(0.96);}
  .qty-control{
    display:flex;align-items:center;gap:9px;background:var(--green-700);border-radius:9px;padding:5px 7px;
  }
  .qty-control button{background:transparent;color:var(--white);border:none;width:24px;height:24px;font-size:1rem;font-weight:700;border-radius:5px;}
  .qty-control button:hover{background:rgba(255,255,255,0.15);}
  .qty-control span{color:var(--white);font-weight:700;min-width:16px;text-align:center;font-size:0.9rem;}
  .badge{
    /* sits over the product photo - the thumbnail is a later sibling, so it
       needs an explicit z-index or the image paints on top of it */
    position:absolute;top:12px;left:12px;z-index:2;background:var(--gold);color:var(--green-900);
    font-size:0.63rem;font-weight:800;padding:4px 10px;border-radius:999px;text-transform:uppercase;
    box-shadow:0 2px 6px rgba(217,164,65,0.4);letter-spacing:.02em;
  }
  /* ---- Sold ----
     A sold piece stays on the shelf: the photograph is what brings in the next
     customer asking for the same model, and the price tells them what it went
     for. It just has to be unmistakable that this one is gone - a corner
     badge, a stamp across the photograph, the photograph itself knocked back,
     and no + button anywhere on the card. */
  .product-card.sold{background:var(--sand);border-color:rgba(15,61,46,0.18);}
  .product-card.sold:hover{transform:none;box-shadow:var(--shadow-sm);}
  .product-card.sold .product-thumb img{filter:grayscale(0.75) brightness(0.92);opacity:.78;}
  .product-card.sold:hover .product-thumb img{transform:none;}
  .product-card.sold h4{color:var(--ink-soft);}
  .product-card.sold .price{color:var(--ink-faint);}
  .badge.sold-badge{
    background:var(--green-900);color:#fff;
    box-shadow:0 2px 6px rgba(15,61,46,0.35);
  }
  /* The stamp is centred over the photo and must not swallow the tap that
     opens the quick view, so it never takes pointer events. */
  .sold-stamp{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-11deg);
    z-index:3;pointer-events:none;
    font-size:0.86rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase;
    color:#fff;background:rgba(15,61,46,0.82);border:2px solid rgba(255,255,255,0.9);
    padding:6px 18px;border-radius:6px;box-shadow:0 4px 14px rgba(0,0,0,0.25);
    white-space:nowrap;
  }
  .product-grid.showcase .sold-stamp{font-size:1.15rem;padding:9px 26px;}
  .qv-image .sold-stamp{font-size:1.4rem;padding:11px 32px;letter-spacing:.2em;}
  .sold-pill{
    display:inline-block;background:var(--green-900);color:#fff;
    font-size:0.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
    padding:9px 15px;border-radius:9px;cursor:default;user-select:none;
  }
  /* The sold note is a paragraph, not a button: it needs the whole width of
     the row, and #qvAddWrap is otherwise told never to shrink. */
  #qvModal.sold #qvAddWrap{flex:1 1 100%;min-width:0;}
  .qv-sold{display:flex;align-items:flex-start;gap:14px;}
  .qv-sold p{margin:0;font-size:0.84rem;line-height:1.55;color:var(--ink-soft);}
  .qv-sold a{color:var(--green-700);font-weight:700;}
  @media (max-width:640px){
    .sold-stamp{font-size:0.6rem;letter-spacing:.1em;padding:4px 10px;border-width:1.5px;}
    .product-grid.showcase .sold-stamp{font-size:0.8rem;padding:6px 16px;}
    .sold-pill{font-size:0.58rem;padding:7px 11px;}
    .qv-sold{flex-direction:column;gap:10px;}
  }

  /* An empty department is a normal state - it gets a proper panel, not a
     bare line of grey text on a white page. */
  .no-results{
    text-align:center;color:var(--ink-soft);grid-column:1/-1;
    padding:54px 26px;background:#fff;border:1px solid rgba(15,58,42,0.10);
    border-radius:18px;box-shadow:0 8px 24px rgba(15,58,42,0.05);
    max-width:620px;margin:8px auto 0;
  }
  .no-results .emoji{font-size:2.4rem;margin-bottom:12px;line-height:1;}
  .no-results h3{margin:0 0 10px;font-size:1.22rem;color:var(--green-900);}
  .no-results p{margin:0 auto 14px;max-width:46ch;line-height:1.6;font-size:0.95rem;}
  .no-results p:last-child{margin-bottom:0;}
  .no-results a{color:var(--green-700,#166043);font-weight:600;}
  .no-results .btn.ghost{
    display:inline-block;margin-top:6px;padding:10px 20px;border-radius:999px;
    border:1.5px solid var(--green-900);color:var(--green-900);
    background:transparent;text-decoration:none;font-weight:600;font-size:0.92rem;
    transition:background .15s ease,color .15s ease;
  }
  .no-results .btn.ghost:hover{background:var(--green-900);color:#fff;}

  /* ---------- About / story ---------- */
  .story-grid{
    display:grid;grid-template-columns:1.6fr 1fr;gap:40px;align-items:start;
  }
  .story-copy p{color:var(--ink-soft);line-height:1.75;margin:0 0 18px;font-size:0.98rem;}
  .story-copy p:last-child{margin-bottom:0;}
  .story-stats{
    display:grid;grid-template-columns:1fr 1fr;gap:16px;background:var(--cream);
    border-radius:var(--radius-lg);padding:26px;border:1px solid var(--line);
  }
  .story-stat .num{font-size:1.8rem;font-weight:800;color:var(--green-700);font-family:Georgia,serif;letter-spacing:-0.01em;}
  .story-stat .label{font-size:0.76rem;color:var(--ink-faint);font-weight:600;margin-top:4px;line-height:1.35;}

  /* ---------- About / why us ---------- */
  .why-grid{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px;
  }
  .why-card{
    background:var(--white);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-sm);
    transition:transform .2s var(--ease), box-shadow .2s var(--ease);
  }
  .why-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);}
  .why-card .ic-wrap{
    width:46px;height:46px;border-radius:12px;background:var(--green-100);margin-bottom:14px;
    display:flex;align-items:center;justify-content:center;font-size:1.4rem;
  }
  .why-card h4{margin:0 0 6px;color:var(--green-900);font-size:1rem;}
  .why-card p{margin:0;font-size:0.88rem;color:var(--ink-soft);}
  .quote-block{
    background:var(--green-900);color:var(--white);border-radius:var(--radius-lg);padding:42px;margin-top:42px;
    display:flex;gap:26px;align-items:center;flex-wrap:wrap;
  }
  .quote-block .mark{font-size:3.2rem;color:var(--gold);font-weight:800;line-height:0.6;font-family:Georgia,serif;}
  .quote-block p{margin:0;font-size:1.1rem;font-style:italic;max-width:640px;}
  .quote-block span{display:block;margin-top:10px;font-size:0.82rem;color:rgba(255,255,255,0.68);font-style:normal;}

  /* ---------- Locations / contact ---------- */
  .contact-bg{background:var(--sand);}
  .contact-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:32px;}
  .contact-card{background:var(--white);border-radius:var(--radius);padding:32px;box-shadow:var(--shadow-sm);}
  .contact-card h3{margin-top:0;color:var(--green-900);font-weight:700;}
  .contact-card .info-row .ic{background:var(--cream);}
  .map-embed-card{
    border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);
    display:flex;flex-direction:column;background:var(--green-900);
    transition:transform .18s var(--ease), box-shadow .18s var(--ease);
  }
  .map-embed-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);}
  .map-embed{width:100%;height:220px;border:0;display:block;}
  .map-cta-link{
    display:flex;align-items:center;gap:14px;padding:18px 20px;
    background:linear-gradient(rgba(22,105,68,0.95),rgba(15,61,46,0.98));
    color:var(--white);text-decoration:none;text-align:left;
  }
  .map-cta-link .pin{font-size:1.8rem;flex-shrink:0;}
  .map-cta-link .map-cta-text{flex:1;font-size:0.85rem;color:rgba(255,255,255,0.85);line-height:1.5;}
  .map-cta-link .map-cta-text strong{color:var(--white);font-size:0.95rem;}
  .map-cta-link .map-cta{
    flex-shrink:0;background:var(--gold);color:var(--green-900);font-weight:700;font-size:0.82rem;
    padding:9px 16px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  }

  /* ---------- Footer ---------- */
  footer{background:var(--green-900);color:rgba(255,255,255,0.85);padding:48px 20px 22px;}
  .footer-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px;}
  .footer-grid h5{color:var(--white);margin:0 0 14px;font-size:0.95rem;font-family:inherit;}
  .footer-grid p, .footer-grid a{font-size:0.85rem;color:rgba(255,255,255,0.72);text-decoration:none;line-height:2;}
  .footer-grid a:hover{color:var(--gold);}
  .footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
  .social-row{display:flex;gap:10px;margin-top:10px;}
  .social-row a{
    width:36px;height:36px;border-radius:999px;background:rgba(255,255,255,0.1);
    display:flex;align-items:center;justify-content:center;font-size:0.95rem;
    transition:background .18s var(--ease);
  }
  .social-row a:hover{background:var(--gold);color:var(--green-900);}
  .footer-bottom{
    max-width:1200px;margin:32px auto 0;padding-top:20px;border-top:1px solid rgba(255,255,255,0.15);
    font-size:0.78rem;color:rgba(255,255,255,0.55);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;
  }

  /* ---------- Cart drawer ---------- */
  .overlay{
    position:fixed;inset:0;background:rgba(15,36,26,0.5);opacity:0;pointer-events:none;
    transition:opacity .3s var(--ease);z-index:90;
  }
  .overlay.open{opacity:1;pointer-events:auto;}
  .cart-drawer{
    position:fixed;top:0;right:0;width:400px;max-width:92vw;height:100%;background:var(--white);
    z-index:95;box-shadow:-10px 0 40px rgba(0,0,0,0.22);transition:transform .35s var(--ease);
    display:flex;flex-direction:column;transform:translateX(100%);
  }
  .cart-drawer.open{transform:translateX(0);}
  .cart-head{padding:22px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--sand);}
  .cart-head h3{margin:0;color:var(--green-900);font-weight:700;}
  .cart-close{background:var(--sand);border:none;width:34px;height:34px;border-radius:999px;font-size:1.1rem;transition:background .18s var(--ease);}
  .cart-close:hover{background:var(--sand-dark);}
  .cart-items{flex:1;overflow-y:auto;padding:8px 22px;}
  .cart-item{display:flex;gap:12px;padding:15px 0;border-bottom:1px solid var(--sand);align-items:center;}
  .cart-item .thumb{
    width:52px;height:52px;border-radius:9px;background:var(--sand);display:flex;align-items:center;
    justify-content:center;font-size:1.4rem;flex-shrink:0;
  }
  .cart-item .info{flex:1;min-width:0;}
  .cart-item .info h5{margin:0 0 2px;font-size:0.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .cart-item .info .unit{font-size:0.76rem;color:var(--ink-soft);}
  .cart-item .remove{background:none;border:none;color:var(--red);font-size:0.78rem;font-weight:700;margin-left:8px;}
  .cart-item .remove:hover{text-decoration:underline;}
  .cart-empty{text-align:center;color:var(--ink-soft);padding:70px 22px;}
  .cart-empty .emoji{font-size:2.8rem;margin-bottom:14px;}
  .cart-foot{padding:22px;border-top:1px solid var(--sand);}
  .cart-total-row{display:flex;justify-content:space-between;font-weight:700;font-size:1.08rem;margin-bottom:14px;color:var(--green-900);}
  .cart-note{font-size:0.76rem;color:var(--ink-soft);margin-bottom:14px;}
  .checkout-btn{
    width:100%;background:var(--green-700);color:var(--white);border:none;border-radius:10px;
    padding:15px;font-weight:800;font-size:0.95rem;transition:background .18s var(--ease);
  }
  .checkout-btn:hover{background:var(--green-600);}

  /* ---------- Toast ---------- */
  .toast{
    position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(20px);
    background:var(--green-900);color:var(--white);padding:13px 24px;border-radius:999px;
    font-size:0.88rem;font-weight:600;box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;
    transition:all .3s var(--ease);z-index:200;display:flex;align-items:center;gap:8px;
  }
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

  @media (max-width:900px){
    nav.main-nav{display:none;}
    nav.main-nav.mobile-open{
      display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;
      background:var(--white);padding:10px 20px 16px;gap:2px;box-shadow:var(--shadow-lg);
      border-top:1px solid var(--line);z-index:49;
    }
    nav.main-nav.mobile-open a{padding:13px 14px;border-radius:10px;}
    nav.main-nav.mobile-open .mobile-search{
      display:flex;align-items:center;background:var(--sand);border-radius:999px;
      padding:9px 16px;gap:8px;border:1.5px solid transparent;margin-bottom:8px;
      transition:border-color .18s var(--ease), background .18s var(--ease);
    }
    nav.main-nav.mobile-open .mobile-search:focus-within{border-color:var(--green-500);background:var(--white);}
    nav.main-nav.mobile-open .mobile-search input{
      border:none;background:transparent;outline:none;font-size:0.9rem;width:100%;color:var(--ink);
    }
    nav.main-nav.mobile-open .mobile-search input::placeholder{color:var(--ink-faint);}
    .search-box{display:none;}
    .mobile-toggle{display:block;}
    .contact-grid{grid-template-columns:1fr;}
    .footer-grid{grid-template-columns:1fr 1fr;}
    .filter-row{flex-direction:column;align-items:stretch;}
    .story-grid{grid-template-columns:1fr;}
    /* 28 departments wrapped onto ten rows pushed every product below the
       fold on a phone. Lay them out as one swipeable strip instead. */
    .filter-bar{
      flex-wrap:nowrap;
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;
      scrollbar-width:none;
      padding-bottom:4px;
      margin-bottom:2px;
      scroll-snap-type:x proximity;
    }
    .filter-bar::-webkit-scrollbar{display:none;}
    .filter-bar .chip{flex:0 0 auto;scroll-snap-align:start;}
  }
  /* ---------- Narrow phones: header brand + cart + hamburger all fighting for
     space in one row was pushing the hamburger button off-screen (unreachable).
     Tighten spacing and drop the "Cart" text label so everything fits. ---------- */
  @media (max-width:480px){
    .header-inner{gap:8px;padding:12px 14px;}
    .brand{gap:9px;}
    .brand-name{font-size:0.82rem;}
    .logo-badge.header{width:42px;height:42px;}
    .header-actions{gap:8px;}
    .cart-btn{padding:11px 12px;gap:6px;}
    .cart-btn .cart-label{display:none;}
    .mobile-toggle{width:38px;height:38px;flex-shrink:0;}
  }
  @media (max-width:600px){
    .footer-grid{grid-template-columns:1fr 1fr;}

    /* ---------- Dense mobile grids: 3-4 columns everywhere ---------- */
    .cat-grid{grid-template-columns:repeat(4,1fr);gap:8px;}
    .cat-card{padding:10px 5px;border-radius:12px;}
    .cat-card .ic-wrap{width:36px;height:36px;font-size:1rem;margin:0 auto 6px;}
    .cat-card h4{font-size:0.6rem;line-height:1.15;margin:0 0 3px;}
    .cat-card .count{font-size:0.52rem;}

    .product-grid{grid-template-columns:repeat(3,1fr);gap:9px;}
    .product-card{padding:8px 7px;gap:6px;border-radius:12px;}
    .product-thumb{height:64px;font-size:1.5rem;border-radius:8px;}
    .product-thumb.ph .ph-emoji{font-size:1.2rem;}
    .qv-ph-label{
    display:block;margin-top:8px;font-size:0.72rem;font-weight:800;letter-spacing:.08em;
    text-transform:uppercase;color:var(--green-800);opacity:.6;text-align:center;
  }
  .product-thumb.ph .ph-label{font-size:0.44rem;letter-spacing:.05em;}
    .product-thumb img{border-radius:8px;}
    .brand-chip{font-size:0.5rem;padding:2px 6px;}
    .product-card h4{font-size:0.66rem;line-height:1.2;min-height:2.1em;}
    .product-meta{font-size:0.58rem;}
    .product-bottom{padding-top:6px;}
    .price{font-size:0.72rem;}
    .price small{font-size:0.5rem;}
    .add-btn{width:26px;height:26px;font-size:0.95rem;border-radius:7px;}
    .qty-control{padding:3px 5px;gap:5px;border-radius:7px;}
    .qty-control button{width:18px;height:18px;font-size:0.8rem;}
    .qty-control span{font-size:0.72rem;min-width:12px;}
    .badge{top:6px;left:6px;font-size:0.5rem;padding:3px 7px;}
    .size-pills{gap:3px;}
    .size-pill{font-size:0.52rem;padding:2px 6px;}
    .qv-body{flex-direction:column;}
    .qv-image{border-radius:var(--radius-lg) var(--radius-lg) 0 0;min-height:200px;}
    .qv-image img{min-height:200px;}
    .qv-info{padding:20px 18px;}
    .qv-modal{width:94vw;max-height:92vh;}

    .why-grid{grid-template-columns:repeat(3,1fr);gap:9px;}
    .why-card{padding:12px 9px;border-radius:12px;}
    .why-card .ic-wrap{width:32px;height:32px;border-radius:9px;font-size:1rem;margin-bottom:8px;}
    .why-card h4{font-size:0.72rem;margin:0 0 4px;}
    .why-card p{font-size:0.62rem;line-height:1.35;}
    .cart-drawer{width:100%;}
    .brand-strip{flex-direction:column;text-align:center;justify-content:center;}
  }

  /* ---------- Homepage loading screen (shows once per session) ---------- */
  .load-screen{
    position:fixed;inset:0;z-index:9999;
    background:radial-gradient(circle at 50% 40%, var(--green-700), var(--green-900));
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
    transition:opacity .5s ease, visibility .5s ease;
  }
  .load-screen.hide{opacity:0;visibility:hidden;pointer-events:none;}
  .load-cart-wrap{position:relative;width:140px;height:70px;overflow:visible;}
  .load-cart{
    position:absolute;top:6px;left:0;font-size:3rem;line-height:1;
    animation:cartRoll 1.3s ease-in-out infinite;
  }
  .load-track{
    position:absolute;bottom:0;left:0;right:0;height:2px;background:rgba(255,255,255,0.18);border-radius:2px;
  }
  @keyframes cartRoll{
    0%{transform:translateX(0) rotate(0deg);}
    50%{transform:translateX(70px) rotate(6deg);}
    100%{transform:translateX(0) rotate(0deg);}
  }
  .load-brand{
    color:var(--white);font-family:Georgia,'Times New Roman',serif;font-weight:700;
    font-size:1.3rem;letter-spacing:.02em;text-align:center;
  }
  .load-sub{color:rgba(255,255,255,0.72);font-size:0.85rem;text-align:center;}
  .load-dots{display:flex;gap:6px;}
  .load-dots span{
    width:7px;height:7px;border-radius:50%;background:var(--gold);
    animation:dotPulse 1.2s ease-in-out infinite;
  }
  .load-dots span:nth-child(2){animation-delay:.15s;}
  .load-dots span:nth-child(3){animation-delay:.3s;}
  @keyframes dotPulse{
    0%,80%,100%{opacity:0.3;transform:scale(0.8);}
    40%{opacity:1;transform:scale(1.15);}
  }

/* inline SVG icons (replace emoji) */
.svg-ico{width:1em;height:1em;vertical-align:-0.14em;display:inline-block;flex:none}
.search-box .svg-ico,.mobile-search .svg-ico{width:18px;height:18px;color:#b6a58f}
.cart-btn .svg-ico,.btn .svg-ico{width:1.05em;height:1.05em;margin-right:.35em}
.mobile-toggle .svg-ico{width:24px;height:24px}
.ic .svg-ico{width:24px;height:24px}
.social-row .svg-ico{width:18px;height:18px}
.cart-close .svg-ico,.qv-close .svg-ico{width:20px;height:20px}
.load-cart .svg-ico{width:26px;height:26px}

  /* ---------------- Member accounts & rewards ---------------- */
  .acct-busy{text-align:center;color:var(--ink-soft);padding:40px 0;}
  .acct-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:22px;align-items:start;}
  .acct-panel,.acct-how{background:#fff;border:1px solid rgba(15,58,42,.10);border-radius:16px;
    padding:22px;box-shadow:0 8px 24px rgba(15,58,42,.05);}
  .acct-tabs{display:flex;gap:8px;margin-bottom:16px;}
  .acct-tab{flex:1;padding:10px;border-radius:999px;border:1.5px solid var(--green-900);
    background:transparent;color:var(--green-900);font-weight:700;cursor:pointer;font-size:.92rem;}
  .acct-tab.active{background:var(--green-900);color:#fff;}
  .acct-form label{display:block;font-weight:700;font-size:.82rem;margin:12px 0 5px;color:var(--green-900);}
  .acct-form label .opt{font-weight:500;color:var(--ink-soft);}
  .acct-form input{width:100%;padding:11px 13px;font-size:1rem;border:1px solid rgba(15,58,42,.18);
    border-radius:10px;box-sizing:border-box;background:#fdfcf8;}
  .acct-form input:focus{outline:2px solid var(--gold);outline-offset:1px;}
  .acct-submit{width:100%;margin-top:18px;justify-content:center;}
  .acct-fine{font-size:.8rem;color:var(--ink-soft);margin:12px 0 0;line-height:1.5;}
  .acct-err{background:#fdecec;color:#8c1c1c;padding:10px 12px;border-radius:10px;font-size:.88rem;margin:0 0 6px;}
  .acct-how h3{margin:0 0 10px;font-size:1rem;color:var(--green-900);}
  .acct-how ol{margin:0;padding-left:20px;font-size:.9rem;line-height:1.6;color:var(--ink-soft);}
  .acct-how li{margin-bottom:8px;}
  .acct-how li b{color:var(--green-900);}
  .tier-strip{display:flex;gap:8px;margin:16px 0 4px;flex-wrap:wrap;}
  .tier-chip{flex:1;min-width:92px;border-radius:12px;padding:10px;text-align:center;font-size:.72rem;
    color:#4a4335;line-height:1.35;}
  .tier-chip b{display:block;font-size:.9rem;color:#2b2416;}
  .tier-chip.Bronze{background:#f0e0cd;}
  .tier-chip.Silver{background:#e4e8eb;}
  .tier-chip.Gold{background:#f6e6b6;}

  .member-card{border-radius:20px;padding:26px;color:#fff;max-width:520px;
    background:linear-gradient(135deg,#0f3a2a,#1f6b45);box-shadow:0 16px 34px rgba(15,58,42,.22);}
  .member-card.tier-Silver{background:linear-gradient(135deg,#3c4a52,#7b8b95);}
  .member-card.tier-Gold{background:linear-gradient(135deg,#6b5216,#c69a3c);}
  .mc-top{display:flex;justify-content:space-between;align-items:center;gap:10px;}
  .mc-brand{font-weight:800;letter-spacing:.04em;font-size:.82rem;text-transform:uppercase;opacity:.9;}
  .mc-tier{background:rgba(255,255,255,.2);padding:4px 12px;border-radius:999px;font-weight:800;font-size:.78rem;}
  .mc-name{font-size:1.5rem;font-weight:800;margin-top:18px;}
  .mc-no{font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:.14em;opacity:.85;font-size:.9rem;margin-top:2px;}
  .mc-points{display:flex;gap:22px;margin-top:20px;flex-wrap:wrap;}
  .mc-points b{display:block;font-size:1.35rem;}
  .mc-points span{font-size:.74rem;opacity:.8;}
  .mc-progress{margin-top:18px;font-size:.8rem;opacity:.92;}
  .mc-bar{height:7px;border-radius:99px;background:rgba(255,255,255,.25);overflow:hidden;margin-bottom:6px;}
  .mc-bar i{display:block;height:100%;background:var(--gold);}
  .acct-actions{display:flex;gap:10px;margin:20px 0 8px;flex-wrap:wrap;}
  .acct-actions .btn.ghost{border:1.5px solid var(--green-900);color:var(--green-900);background:transparent;
    border-radius:999px;padding:11px 22px;font-weight:700;cursor:pointer;}
  .acct-h{margin:26px 0 10px;font-size:1rem;color:var(--green-900);}
  .acct-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid rgba(15,58,42,.10);
    border-radius:14px;overflow:hidden;}
  .acct-table th,.acct-table td{text-align:left;padding:10px 13px;border-bottom:1px solid rgba(15,58,42,.07);
    font-size:.88rem;}
  .acct-table th{background:var(--sand);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;}
  .acct-table tr:last-child td{border-bottom:0;}
  .pill{font-size:.72rem;font-weight:800;padding:3px 10px;border-radius:999px;white-space:nowrap;}
  .pill.ok{background:#dff0e5;color:#146c43;}
  .pill.wait{background:#fdf0d5;color:#7a5c12;}
  .pill.no{background:#eee;color:#666;}
  .main-nav a.is-member{color:var(--gold);font-weight:800;}
  @media (max-width:820px){ .acct-grid{grid-template-columns:1fr;} }

  /* The hidden attribute must beat any display rule we set ourselves -
     .acct-grid{display:grid} was overriding it and the sign-up form stayed
     on screen behind the member card. */
  [hidden]{display:none !important;}
  /* The rewards chip in the header carries a name and a points count, so it
     must not wrap the way a one-word nav link can. */
  .main-nav a[data-account-link]{white-space:nowrap;}
  .main-nav a.is-member{
    color:var(--green-900);background:var(--gold);border-radius:999px;
    padding:7px 14px;font-weight:800;font-size:.82rem;
  }
  .main-nav a.is-member:hover{background:#e8b656;}

  /* Seven nav items plus the rewards chip, the search box and the cart no
     longer fit a 1280 laptop at the old spacing - the cart was being pushed
     off the edge. Tighten the row before the mobile breakpoint takes over. */
  @media (max-width:1400px){
    nav.main-nav a{padding:9px 10px;}
    .search-box{min-width:170px;}
  }
  @media (max-width:1180px){
    nav.main-nav{gap:4px;font-size:.88rem;}
    nav.main-nav a{padding:8px 8px;}
    .search-box{min-width:120px;padding:9px 12px;}
    .main-nav a.is-member{padding:6px 10px;font-size:.76rem;}
  }