:root {
      --accent: #e8621a; --accent2: #d946a8;
      --light: #fff8f4; --white: #fff;
      --dark: #1a1a1a; --muted: #6b6b6b; --border: #f0e0d8;
      --fh: 'Cormorant Garamond', Georgia, serif;
      --fb: 'Jost', sans-serif;
      --r: 12px; --mw: 1100px;
      --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
      --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
      --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    }
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: var(--fb); background: var(--white); color: var(--dark); line-height: 1.7; -webkit-text-size-adjust: 100%; }
    /* Remove 300ms tap delay on all interactive elements */
    a, button, [role="button"], input, select, textarea, label { touch-action: manipulation; }
    /* Prevent blue flash on tap in iOS/Android */
    button, a { -webkit-tap-highlight-color: transparent; }
    a { text-decoration: none; color: inherit; }
    .wrap { max-width: var(--mw); margin: 0 auto; padding: 0 24px; }

    /* ── ANNOUNCEMENT BANNER ── */
    .announce {
      background: var(--dark); color: rgba(255,255,255,.8);
      text-align: center; padding: 10px 24px; font-size: 12.5px; letter-spacing: .02em;
    }
    .announce strong { color: var(--accent); }

    /* ── NAV ── */
    nav {
      position: sticky; top: 0; z-index: 100;
      background: rgba(255,255,255,.92);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border);
      transition: box-shadow .2s;
    }
    nav.scrolled { box-shadow: 0 2px 20px rgba(0,0,0,.08); }
    .nav-i { display: flex; align-items: center; justify-content: space-between; height: 62px; }
    .logo-img { height: 52px; width: auto; display: block; object-fit: contain; }
    .logo-text { font-family: var(--fh); font-size: 24px; font-weight: 400; letter-spacing: .04em; }
    .logo-text .l1 { color: var(--accent); }
    .nav-links { display: flex; gap: 26px; list-style: none; }
    .nav-links a {
      font-size: 14px; color: var(--muted);
      transition: color .2s var(--ease-out);
      position: relative; padding-bottom: 2px;
    }
    .nav-links a:hover { color: var(--accent); }
    .nav-links a::after {
      content: ''; position: absolute; left: 0; bottom: -2px;
      width: 0; height: 2px; background: var(--accent);
      transition: width .2s var(--ease-out);
    }
    .nav-links a:hover::after { width: 100%; }
    .nav-links a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }
    .nav-right { display: flex; align-items: center; gap: 12px; }

    /* ── NAV SEARCH ── */
    .nav-search { position: relative; }
    .nav-search input {
      width: 190px; padding: 8px 36px 8px 16px;
      border: 1.5px solid var(--border); border-radius: 30px;
      font-family: var(--fb); font-size: 13px; outline: none;
      background: var(--light); transition: border-color .2s, width .25s;
      color: var(--dark);
    }
    .nav-search input:focus { border-color: var(--accent); width: 230px; }
    .nav-search input::placeholder { color: var(--muted); }
    .nav-search svg { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--muted); }
    @media (max-width: 900px) { .nav-search { display: none; } }

    .cart-btn {
      display: flex; align-items: center; gap: 7px;
      background: var(--dark); color: #fff; border: none;
      border-radius: 30px; padding: 10px 18px 10px 14px;
      cursor: pointer; font-family: var(--fb); transition: background .2s, transform .15s var(--ease-spring);
    }
    .cart-btn:hover { background: var(--accent); transform: scale(1.03); }
    .cart-btn:active { transform: scale(0.97); }
    .cart-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
    .cart-label { font-size: 13px; font-weight: 600; white-space: nowrap; }
    .cart-count {
      background: var(--accent); color: #fff; font-size: 10px; font-weight: 700;
      min-width: 20px; height: 20px; border-radius: 10px; padding: 0 5px;
      display: flex; align-items: center; justify-content: center; font-family: var(--fb);
    }
    .cart-btn:hover .cart-count { background: #fff; color: var(--accent); }
    .cart-count.hidden { display: none; }

    .btn-n {
      background: var(--accent); color: #fff; font-family: var(--fb); font-size: 14px;
      font-weight: 500; padding: 10px 22px; border-radius: var(--r); border: none;
      cursor: pointer; transition: background .2s, transform .15s var(--ease-spring); white-space: nowrap;
    }
    .btn-n:hover { background: #d45510; transform: scale(1.03); }
    .btn-n:active { transform: scale(0.97); }
    .btn-n:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

    .hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 4px; }
    .hamburger span { display: block; width: 22px; height: 2px; background: var(--dark); border-radius: 2px; transition: .3s; }

    /* ── MOBILE NAV ── */
    .mobile-nav { display: none; }
    .mobile-nav.open {
      display: flex; flex-direction: column;
      position: fixed; top: 62px; left: 0; right: 0;
      background: var(--white); border-bottom: 2px solid var(--border);
      padding: 8px 24px 20px; z-index: 99;
    }
    .mobile-nav a {
      padding: 13px 0; border-bottom: 1px solid var(--border);
      font-size: 15px; color: var(--dark); display: block;
    }
    .mobile-nav a:last-child { border-bottom: none; }
    .mobile-nav a:hover { color: var(--accent); }

    /* ── HERO SLIDESHOW ── */
    .hero { position: relative; height: 88vh; min-height: 520px; max-height: 780px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
    .hero-slides { position: absolute; inset: 0; }
    .hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center top; opacity: 0; transition: opacity .9s ease; }
    .hero-slide.active { opacity: 1; }
    .hero-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.2) 0%, rgba(0,0,0,.62) 70%, rgba(0,0,0,.72) 100%); }
    .hero-content { position: relative; z-index: 2; text-align: center; color: #fff; max-width: 760px; padding: 0 28px; margin-top: -40px; }
    .hero-pill { display: inline-block; background: rgba(255,255,255,.13); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.28); border-radius: 30px; padding: 6px 18px; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.92); margin-bottom: 22px; }
    .hero-content h1 { font-family: var(--fh); font-size: 62px; font-weight: 400; line-height: 1.1; margin-bottom: 18px; letter-spacing: .01em; color: #fff; }
    .hero-content h1 span { color: var(--accent); }
    .hero-sub { font-size: 16px; color: rgba(255,255,255,.75); margin-bottom: 36px; max-width: 480px; margin-left: auto; margin-right: auto; line-height: 1.7; }
    .hero-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
    .hero-btn-p { background: var(--accent); color: #fff; border: none; border-radius: 40px; padding: 15px 38px; font-family: var(--fb); font-size: 15px; font-weight: 700; cursor: pointer; transition: background .2s, transform .15s var(--ease-spring), box-shadow .18s; }
    .hero-btn-p:hover { background: #d45510; transform: scale(1.04); box-shadow: 0 8px 28px rgba(232,98,26,.4); }
    .hero-btn-p:active { transform: scale(0.97); box-shadow: none; }
    .hero-btn-p:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
    .hero-btn-o { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.65); border-radius: 40px; padding: 15px 38px; font-family: var(--fb); font-size: 15px; font-weight: 600; cursor: pointer; transition: background .2s, border-color .2s, transform .15s var(--ease-spring); }
    .hero-btn-o:hover { background: rgba(255,255,255,.14); border-color: #fff; transform: scale(1.03); }
    .hero-btn-o:focus-visible { outline: 3px solid rgba(255,255,255,.7); outline-offset: 3px; }
    .hero-dots { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 3; }
    .hero-dot { width: 28px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.38); border: none; cursor: pointer; transition: .3s; padding: 0; }
    .hero-dot.active { background: #fff; width: 44px; }
    .btns { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
    .btn-p { background: var(--accent); color: #fff; font-family: var(--fb); font-size: 15px; font-weight: 500; padding: 13px 28px; border-radius: var(--r); border: none; cursor: pointer; transition: background .2s, transform .15s var(--ease-spring), box-shadow .18s; }
    .btn-p:hover { background: #d45510; transform: scale(1.03); box-shadow: 0 8px 24px rgba(232,98,26,.3); }
    .btn-p:active { transform: scale(0.97); box-shadow: none; }
    .btn-p:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
    .btn-o { background: transparent; color: var(--dark); font-family: var(--fb); font-size: 15px; font-weight: 500; padding: 13px 28px; border-radius: var(--r); border: 1.5px solid var(--border); cursor: pointer; transition: border-color .2s, color .2s, transform .15s var(--ease-spring); }
    .btn-o:hover { border-color: var(--accent); color: var(--accent); transform: scale(1.02); }
    .btn-o:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
    @media (max-width: 768px) { .hero { height: 75vh; min-height: 460px; } .hero-content { margin-top: -20px; } .hero-content h1 { font-size: 36px; } .hero-sub { font-size: 14px; margin-bottom: 28px; } .hero-btn-p, .hero-btn-o { padding: 13px 24px; font-size: 14px; } .hero-pill { font-size: 10px; } }
    .search-row { position: relative; max-width: 420px; }
    .search-row input { width: 100%; padding: 13px 44px 13px 18px; border: 1.5px solid var(--border); border-radius: var(--r); font-family: var(--fb); font-size: 14px; outline: none; background: var(--white); transition: border-color .2s; }
    .search-row input:focus { border-color: var(--accent); }
    .search-row svg { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }

    /* ── FILTERS ── */
    .filter-bar { margin-bottom: 36px; display: flex; flex-direction: column; gap: 10px; }
    .filter-row { display: flex; gap: 8px; flex-wrap: wrap; }
    .f-btn { font-family: var(--fb); font-size: 13px; font-weight: 500; padding: 7px 18px; border-radius: 30px; border: 1.5px solid var(--border); background: var(--white); color: var(--muted); cursor: pointer; transition: .2s; }
    .f-btn:hover { border-color: var(--dark); color: var(--dark); }
    .f-btn.active { background: var(--dark); color: #fff; border-color: var(--dark); }

    /* ── CATEGORY CARDS SECTION ── */
    .cat-section { padding: 72px 0 64px; background: var(--white); border-bottom: 1px solid var(--border); }
    .cat-sec-hd { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 32px; flex-wrap: wrap; gap: 10px; }
    .cat-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
    .cat-sec-hd h2 { font-family: var(--fh); font-size: 38px; font-weight: 300; letter-spacing: .02em; line-height: 1.1; margin: 0; }
    .cat-see-all { font-family: var(--fb); font-size: 13px; font-weight: 600; color: var(--accent); cursor: pointer; white-space: nowrap; background: none; border: none; padding: 0; transition: opacity .2s; text-decoration: none; }
    .cat-see-all:hover { opacity: .7; }
    .cat-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
    .cat-card { border-radius: 20px; padding: 22px 20px 18px; cursor: pointer; display: flex; flex-direction: column; min-height: 120px; transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out); border: 2.5px solid transparent; background: none; font-family: var(--fb); text-align: left; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
    .cat-card:hover { transform: translateY(-5px); box-shadow: 0 14px 36px rgba(0,0,0,.14); }
    .cat-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
    .cat-card.active { border-color: var(--dark) !important; box-shadow: 0 0 0 1.5px var(--dark), 0 12px 32px rgba(0,0,0,.14); }
    .cat-card-top { display: flex; align-items: flex-start; justify-content: space-between; }
    .cat-card-label { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; line-height: 1.3; }
    .cat-card-icon { width: 38px; height: 38px; background: rgba(255,255,255,.88); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
    .cat-card-name { font-size: 17px; font-weight: 700; margin-top: 16px; letter-spacing: -.02em; }
    @media (max-width: 768px) { .cat-cards-grid { grid-template-columns: repeat(2, 1fr); } .cat-sec-hd h2 { font-size: 28px; } }

    /* ── SECTION HEADER ── */
    .sec-hd { text-align: center; margin-bottom: 44px; }
    .sec-hd h2 { font-family: var(--fh); font-size: 40px; font-weight: 300; margin-bottom: 10px; letter-spacing: .02em; }
    .sec-hd p { font-size: 16px; color: var(--muted); max-width: 480px; margin: 0 auto; }

    /* ── FEATURES ── */
    .features { padding: 68px 0; border-bottom: 1px solid var(--border); }
    .feat-g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
    .feat-c { background: var(--light); border-radius: var(--r); padding: 28px 22px; border: 1px solid var(--border); transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out); }
    .feat-c:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.08); }
    .feat-ico { font-size: 32px; margin-bottom: 12px; }
    .feat-c h3 { font-family: var(--fh); font-size: 20px; font-weight: 400; margin-bottom: 8px; letter-spacing: .02em; }
    .feat-c p { font-size: 14px; color: var(--muted); line-height: 1.6; }

    /* ── QUICK VIEW TRIGGER ── */
    .qv-trigger { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%) translateY(8px); background: rgba(26,26,26,.85); color: #fff; border: none; border-radius: 20px; padding: 7px 20px; font-size: 12px; font-weight: 600; cursor: pointer; opacity: 0; transition: opacity .2s, transform .2s; white-space: nowrap; z-index: 2; }
    .prod-c:hover .qv-trigger { opacity: 1; transform: translateX(-50%) translateY(0); }

    /* ── QUICK VIEW MODAL ── */
    #qv-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 600; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .25s; padding: 12px; }
    #qv-overlay.open { opacity: 1; pointer-events: all; }
    .qv-modal { background: var(--white); border-radius: 24px; max-width: 880px; width: 100%; max-height: 92vh; overflow-y: auto; display: grid; grid-template-columns: 1.05fr 1fr; position: relative; box-shadow: 0 32px 80px rgba(0,0,0,.22); }
    .qv-x { position: absolute; top: 16px; right: 16px; background: rgba(255,255,255,.95); border: 1.5px solid var(--border); border-radius: 50%; width: 36px; height: 36px; font-size: 16px; cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center; transition: .2s; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
    .qv-x:hover { background: var(--dark); color: #fff; border-color: var(--dark); }
    /* Left — image gallery */
    .qv-left { padding: 20px 16px 20px 20px; display: flex; flex-direction: column; gap: 10px; background: #fafaf9; border-radius: 24px 0 0 24px; }
    .qv-main-wrap { border-radius: 16px; overflow: hidden; aspect-ratio: 4/4.5; background: #f0ede8; }
    .qv-main-wrap img { width: 100%; height: 100%; object-fit: cover; transition: opacity .2s; }
    .qv-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
    .qv-thumb { width: 68px; height: 68px; border-radius: 12px; overflow: hidden; cursor: pointer; border: 2.5px solid transparent; transition: border-color .18s, transform .18s; flex-shrink: 0; background: #e8e3dd; }
    .qv-thumb:hover { transform: scale(1.06); }
    .qv-thumb.active { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(232,98,26,.18); }
    .qv-thumb img { width: 100%; height: 100%; object-fit: cover; }
    /* Right — product info */
    .qv-right { padding: 26px 24px 24px 20px; display: flex; flex-direction: column; gap: 14px; }
    .qv-cat { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
    .qv-name { font-family: var(--fh); font-size: 30px; font-weight: 300; line-height: 1.2; letter-spacing: .01em; margin: -4px 0 0; }
    .qv-divider { height: 1px; background: var(--border); margin: 2px 0; }
    .qv-desc { font-size: 13px; color: var(--muted); line-height: 1.75; margin: 0; }
    .qv-qty-row { display: flex; align-items: center; gap: 12px; }
    .qv-stock-note { font-size: 11.5px; font-weight: 600; padding: 5px 10px; border-radius: 20px; display: inline-block; }
    .qv-stock-low { background: #fff7ed; color: #c2410c; }
    .qv-stock-out { background: #fef2f2; color: #dc2626; }
    .qv-stock-ok  { background: #f0fdf4; color: #16a34a; }
    .qv-btns { display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding-top: 4px; }
    .qv-btn-cart { background: var(--accent); color: #fff; border: none; border-radius: 12px; padding: 14px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: var(--fb); transition: background .18s, transform .15s; letter-spacing: .02em; }
    .qv-btn-cart:hover:not(:disabled) { background: #d4561a; transform: scale(1.015); }
    .qv-btn-cart:active:not(:disabled) { transform: scale(.98); }
    .qv-btn-wa { background: #1a1a1a; color: #fff; border: none; border-radius: 12px; padding: 14px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: var(--fb); transition: background .18s; letter-spacing: .02em; }
    .qv-btn-wa:hover:not(:disabled) { background: #333; }
    .qv-btn-cart:disabled, .qv-btn-wa:disabled { opacity: .4; cursor: not-allowed; }
    /* Colour pills with dot */
    .colour-pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px 7px 10px; border: 1.5px solid var(--border); border-radius: 50px; font-size: 13px; font-weight: 500; cursor: pointer; background: #fff; transition: border-color .15s, box-shadow .15s; font-family: var(--fb); }
    .colour-pill:hover:not(:disabled) { border-color: #bbb; }
    .colour-pill.active { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(232,98,26,.15); font-weight: 700; }
    .colour-pill:disabled { opacity: .4; cursor: not-allowed; text-decoration: line-through; }
    .colour-pill .cpill-dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,.12); flex-shrink: 0; }
    /* Mobile */
    @media (max-width: 640px) {
      .qv-modal { grid-template-columns: 1fr; border-radius: 20px; max-height: 96vh; }
      .qv-left { border-radius: 20px 20px 0 0; padding: 0; background: #f0ede8; }
      .qv-main-wrap { aspect-ratio: 1/1.05; border-radius: 20px 20px 0 0; height: auto; }
      .qv-thumbs { padding: 10px 14px 12px; gap: 8px; }
      .qv-thumb { width: 58px; height: 58px; border-radius: 10px; }
      .qv-right { padding: 14px 18px 28px; gap: 11px; }
      .qv-name { font-size: 24px; }
      .qv-btns { flex-direction: row; gap: 8px; }
      .qv-btn-cart, .qv-btn-wa { flex: 1; padding: 13px 8px; font-size: 13px; }
      .qv-x { top: 12px; right: 12px; background: rgba(255,255,255,.9); backdrop-filter: blur(6px); }
    }

    /* ── SALE HEADER STRIP ── */
    .sale-header {
      background: linear-gradient(90deg, var(--accent) 0%, var(--accent2) 100%);
      color: #fff; padding: 9px 16px; font-size: 13px; font-weight: 800;
      letter-spacing: .06em; text-transform: uppercase;
      display: flex; align-items: center; justify-content: center; gap: 8px;
      flex-shrink: 0;
    }
    .sale-header .sale-pct { font-size: 17px; font-weight: 900; }
    .price-was-now { display: flex; flex-direction: column; gap: 3px; margin-bottom: 12px; }
    .price-was-row { display: flex; align-items: baseline; gap: 6px; }
    .price-now-row { display: flex; align-items: baseline; gap: 6px; }
    .plbl { font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; min-width: 30px; }
    .plbl-was { color: var(--muted); }
    .plbl-now { color: var(--accent); }
    .price-was-val { font-size: 13px; color: var(--muted); text-decoration: line-through; }
    .price-now-val { font-size: 20px; font-weight: 800; color: var(--dark); line-height: 1; letter-spacing: -.02em; }

    /* ── PRODUCTS ── */
    .products { padding: 48px 0 80px; background: #f3f4f6; border-bottom: 1px solid var(--border); }
    /* ── NEW ARRIVALS CAROUSEL ── */
    .new-arrivals { padding: 64px 0; background: var(--white); border-bottom: 1px solid var(--border); overflow: hidden; }
    .arrivals-hd { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 28px; gap: 16px; flex-wrap: wrap; }
    .arrivals-hd-left .arrivals-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
    .arrivals-hd-left h2 { font-family: var(--fh); font-size: 36px; font-weight: 300; color: var(--dark); }
    .arrivals-nav { display: flex; gap: 8px; }
    .arrivals-nav button { width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--border); background: var(--white); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s, border-color .2s; flex-shrink: 0; }
    .arrivals-nav button:hover { background: var(--dark); border-color: var(--dark); color: #fff; }
    .arrivals-nav button:hover svg { stroke: #fff; }
    .arrivals-track-wrap { position: relative; overflow: hidden; cursor: grab; user-select: none; -webkit-user-select: none; }
    .arrivals-track-wrap.arr-dragging { cursor: grabbing; }
    .arrivals-track { display: flex; gap: 18px; will-change: transform; padding-bottom: 8px; pointer-events: none; }
    .arrivals-track .prod-c { pointer-events: auto; }
    .arrivals-track .prod-c { flex: 0 0 220px; }
    @media (max-width: 768px) { .arrivals-track .prod-c { flex: 0 0 180px; } .arrivals-hd-left h2 { font-size: 28px; } }
    .prod-g { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
    @media (max-width: 1024px) { .prod-g { grid-template-columns: repeat(3, 1fr); } }
    @media (max-width: 640px)  { .prod-g { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

    /* ── PRODUCT CARD ── */
    .prod-c { background: var(--white); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 2px 14px rgba(0,0,0,.08); transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out); cursor: pointer; }
    .prod-c:hover { transform: translateY(-5px); box-shadow: 0 18px 44px rgba(0,0,0,.14); }
    .prod-img-wrap { position: relative; aspect-ratio: 4/5; overflow: hidden; flex-shrink: 0; }
    .prod-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s var(--ease-out); }
    .prod-c:hover .prod-img-wrap img { transform: scale(1.06); }
    .prod-c.sold-out .prod-img-wrap img { opacity: .6; }

    /* Badge stack top-left of image */
    .prod-badges { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 5px; z-index: 2; }
    .pbadge { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 800; padding: 5px 11px; border-radius: 30px; text-transform: uppercase; letter-spacing: .07em; white-space: nowrap; line-height: 1; }
    .pbadge-disc  { background: var(--accent); color: #fff; }
    .pbadge-sold  { background: #1a1a1a; color: #fff; }
    .pbadge-new   { background: #0891b2; color: #fff; }
    .pbadge-info  { background: rgba(255,255,255,.93); color: var(--dark); font-weight: 600; backdrop-filter: blur(4px); }
    .pbadge-feat  { background: rgba(255,255,255,.93); color: var(--dark); backdrop-filter: blur(4px); }

    /* Card info section */
    .prod-info { padding: 13px 14px 14px; flex: 1; display: flex; flex-direction: column; }
    .prod-info h4 { font-family: var(--fb); font-size: 13px; font-weight: 700; line-height: 1.4; color: var(--dark); margin-bottom: 10px; letter-spacing: -.01em; }
    .prod-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
    .prod-foot-price { display: flex; flex-direction: column; }
    .pfrom { font-size: 10px; color: var(--muted); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; line-height: 1; margin-bottom: 2px; }
    .prod-price-main { font-family: var(--fb); font-size: 17px; font-weight: 800; color: var(--dark); letter-spacing: -.02em; line-height: 1; }
    .prod-price-was  { font-size: 11px; color: var(--muted); text-decoration: line-through; margin-top: 1px; }
    .prod-arrow { width: 40px; height: 40px; border-radius: 50%; background: var(--dark); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .2s, transform .18s var(--ease-spring); }
    .prod-arrow:hover { background: var(--accent); transform: scale(1.1); }
    .prod-arrow:active { transform: scale(0.93); }
    .prod-arrow:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
    .prod-c.sold-out .prod-arrow { background: #d1d5db; cursor: default; }

    /* Keep these for Quick View modal */
    .variants { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; align-items: center; }
    .opts-lbl { font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); min-width: 36px; margin-right: 2px; }
    .chip { font-size: 11px; padding: 4px 12px; border-radius: 20px; border: 1.5px solid var(--border); color: var(--muted); background: var(--light); cursor: pointer; font-family: var(--fb); transition: .2s; }
    .chip.active, .chip:hover { border-color: var(--accent); background: var(--accent); color: #fff; }
    .chip.chip-unavail { opacity: .4; cursor: not-allowed; text-decoration: line-through; }
    .chip.chip-unavail:hover { border-color: var(--border) !important; background: var(--light) !important; color: var(--muted) !important; }
    .price-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
    .price { font-size: 20px; font-weight: 800; color: var(--dark); letter-spacing: -.02em; }
    .price-orig { font-size: 13px; color: var(--muted); text-decoration: line-through; }
    .qty-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
    .qty-lbl { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
    .qty-ctrl { display: flex; align-items: center; border: 1.5px solid var(--border); border-radius: 8px; overflow: hidden; }
    .qty-btn { background: none; border: none; padding: 6px 11px; cursor: pointer; font-size: 15px; font-weight: 700; color: var(--dark); transition: background .2s; font-family: var(--fb); line-height: 1; }
    .qty-btn:hover { background: var(--light); }
    .qty-val { min-width: 28px; text-align: center; font-size: 14px; font-weight: 500; }
    .card-btns { display: flex; gap: 8px; margin-top: auto; }
    .btn-cart { flex: 1; background: var(--dark); color: #fff; font-family: var(--fb); font-size: 13px; font-weight: 600; padding: 11px 12px; border-radius: 10px; border: none; cursor: pointer; transition: background .2s, transform .15s; }
    .btn-cart:hover:not(:disabled) { background: var(--accent); }
    .btn-cart:disabled { background: #e5e7eb; color: #9ca3af; cursor: not-allowed; }
    .btn-notify { flex: 1; background: var(--light); color: var(--accent); font-family: var(--fb); font-size: 13px; font-weight: 600; padding: 11px 12px; border-radius: 10px; border: 1.5px solid var(--accent); cursor: pointer; transition: .2s; }
    .btn-notify:hover { background: var(--accent); color: #fff; }
    /* ── FLOATING WHATSAPP ISLAND ── */
    .wa-island {
      position: fixed; right: 0; top: 50%; transform: translateY(-50%);
      background: #25D366; color: #fff;
      display: flex; align-items: center; gap: 0;
      padding: 14px 12px 14px 14px;
      border-radius: 28px 0 0 28px;
      box-shadow: -4px 4px 24px rgba(37,211,102,.4), 0 2px 8px rgba(0,0,0,.12);
      text-decoration: none; z-index: 490;
      transition: padding .28s cubic-bezier(.4,0,.2,1), gap .28s, box-shadow .28s;
      overflow: hidden; white-space: nowrap;
    }
    .wa-island:hover {
      padding: 14px 14px 14px 22px; gap: 10px;
      box-shadow: -6px 6px 32px rgba(37,211,102,.55), 0 4px 14px rgba(0,0,0,.14);
    }
    .wa-island-label {
      font-family: var(--fb); font-size: 13px; font-weight: 700;
      max-width: 0; overflow: hidden;
      transition: max-width .28s cubic-bezier(.4,0,.2,1);
      order: -1;
    }
    .wa-island:hover .wa-island-label { max-width: 130px; }
    @media (max-width: 640px) { .wa-island { top: 50%; bottom: auto; transform: translateY(-50%); padding: 12px; } .wa-island-label { display: none; } }

    .empty-state { grid-column: 1 / -1; text-align: center; padding: 64px 20px; background: var(--white); border-radius: 16px; border: 2px dashed var(--border); }
    .empty-state p { color: var(--muted); font-size: 14px; }

    /* ── POLAROID COLLAGE (slideshow backdrop) ── */
    .ss-collage { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
    .polaroid { position: absolute; background: #fff; padding: 10px 10px 38px; box-shadow: 0 14px 40px rgba(0,0,0,.6), 0 3px 10px rgba(0,0,0,.35); border-radius: 2px; }
    .polaroid-img { width: 100%; height: calc(100% - 28px); background-size: cover; background-position: center; display: block; }

    /* ── SOCIAL SLIDESHOW ── */
    .social-section { position: relative; overflow: hidden; background: #0d0d0d; }
    .ss-track { position: relative; z-index: 2; display: flex; transition: transform .72s cubic-bezier(.4,0,.2,1); will-change: transform; }
    .ss-slide { min-width: 100%; min-height: 580px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
    .ss-overlay { position: absolute; inset: 0; z-index: 0; }
    .ss-content { position: relative; z-index: 2; text-align: center; color: #fff; padding: 80px 24px 114px; max-width: 640px; }
    .ss-badge { width: 88px; height: 88px; border-radius: 24px; background: rgba(255,255,255,.12); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; margin: 0 auto 26px; }
    .ss-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; color: rgba(255,255,255,.6); margin-bottom: 12px; }
    .ss-headline { font-family: var(--fh); font-size: 52px; font-weight: 300; line-height: 1.1; margin-bottom: 18px; letter-spacing: .02em; }
    .ss-body { font-size: 15px; color: rgba(255,255,255,.76); line-height: 1.75; max-width: 460px; margin: 0 auto 34px; }
    .ss-cta { display: inline-flex; align-items: center; gap: 10px; background: rgba(255,255,255,.95); color: #1a1a1a; font-family: var(--fb); font-size: 14px; font-weight: 700; padding: 14px 32px; border-radius: 40px; text-decoration: none; transition: transform .22s, background .2s; }
    .ss-cta:hover { background: #fff; transform: scale(1.05); }
    .ss-arrow { position: absolute; top: calc(50% - 28px); transform: translateY(-50%); z-index: 5; width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,.13); border: 1.5px solid rgba(255,255,255,.24); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s; backdrop-filter: blur(6px); }
    .ss-arrow:hover { background: rgba(255,255,255,.28); }
    .ss-prev { left: 24px; }
    .ss-next { right: 24px; }
    .ss-nav { position: absolute; bottom: 62px; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; gap: 10px; align-items: center; }
    .ss-dot { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.14); border: 1.5px solid rgba(255,255,255,.22); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .28s; color: rgba(255,255,255,.62); padding: 0; }
    .ss-dot.active { background: rgba(255,255,255,.95); color: #111; border-color: rgba(255,255,255,.9); transform: scale(1.15); }
    .ss-strip { position: absolute; bottom: 0; left: 0; right: 0; z-index: 5; background: rgba(0,0,0,.58); backdrop-filter: blur(16px); border-top: 1px solid rgba(255,255,255,.1); padding: 14px 24px; display: flex; justify-content: center; align-items: center; gap: 24px; flex-wrap: wrap; }
    .ss-strip-link { display: inline-flex; align-items: center; gap: 7px; color: rgba(255,255,255,.72); font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: color .2s; }
    .ss-strip-link:hover { color: #fff; }
    .ss-strip-sep { color: rgba(255,255,255,.18); font-size: 18px; line-height: 1; }
    @media (max-width: 700px) { .ss-arrow { display: none; } .ss-headline { font-size: 34px; } .ss-badge { width: 70px; height: 70px; border-radius: 18px; } .ss-slide { min-height: 500px; } }
    @media (max-width: 500px) {
      .ss-strip { gap: 8px; padding: 10px 16px; flex-direction: column; align-items: center; }
      .ss-strip-link { font-size: 12px; }
      .ss-strip-sep { display: none; }
      .ss-slide { min-height: 600px; }
      .ss-nav { bottom: 128px; }
      .ss-content { padding-top: 60px; padding-bottom: 185px; }
    }

    /* ── TESTIMONIALS ── */
    .testi { padding: 68px 0; border-bottom: 1px solid var(--border); }
    .testi-g { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .testi-c { background: var(--light); border-radius: var(--r); padding: 28px 24px; border: 1px solid var(--border); }
    .stars { color: var(--accent); font-size: 18px; margin-bottom: 12px; letter-spacing: 2px; }
    .testi-c blockquote { font-size: 15px; line-height: 1.7; margin-bottom: 18px; font-style: italic; color: var(--dark); }
    .rev { display: flex; align-items: center; gap: 12px; }
    .av { width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .rev-name { font-size: 14px; font-weight: 500; }
    .rev-loc { font-size: 12px; color: var(--muted); }
    .testi-cta { text-align: center; margin-top: 36px; }

    /* ── REVIEW MODAL ── */
    .star-row { display: flex; gap: 8px; margin: 4px 0 2px; }
    .star-opt { font-size: 34px; color: #d1d5db; cursor: pointer; transition: color .15s; line-height: 1; user-select: none; }
    .star-opt.lit { color: var(--accent); }
    .rev-success { text-align: center; padding: 32px 16px; }
    .rev-success .success-icon { font-size: 48px; margin-bottom: 12px; }
    .rev-success h3 { font-family: var(--fh); font-size: 22px; margin-bottom: 8px; }
    .rev-success p { color: var(--muted); font-size: 14px; }

    /* ── ABOUT ── */
    .about { padding: 80px 0; background: var(--white); }
    .about-i { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
    .about-img-wrap { border-radius: 20px; overflow: hidden; aspect-ratio: 4/5; }
    .about-img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .about-tag { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
    .about-text h2 { font-family: var(--fh); font-size: 40px; font-weight: 300; line-height: 1.2; margin-bottom: 20px; }
    .about-text h2 span { color: var(--accent); font-style: italic; }
    .about-text p { font-size: 15px; color: var(--muted); line-height: 1.8; margin-bottom: 16px; max-width: 65ch; }
    @media (max-width: 768px) { .about-i { grid-template-columns: 1fr; gap: 32px; } .about-img-wrap { aspect-ratio: 16/9; } .about-text h2 { font-size: 30px; } }

    /* ── DELIVERY & FAQ ── */
    .delivery { padding: 72px 0; background: var(--light); }
    .del-g { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 40px; }
    .del-card { background: var(--white); border-radius: 16px; padding: 28px; border: 1px solid var(--border); }
    .del-card h3 { font-family: var(--fh); font-size: 22px; font-weight: 400; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
    .del-row { display: flex; justify-content: space-between; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; gap: 12px; }
    .del-row:last-child { border-bottom: none; }
    .del-row span:first-child { color: var(--muted); }
    .del-row span:last-child { font-weight: 600; text-align: right; }
    .return-note { background: #fff8f4; border-left: 3px solid var(--accent); padding: 14px 18px; border-radius: 0 10px 10px 0; font-size: 13px; color: var(--muted); line-height: 1.7; margin-top: 16px; }
    @media (max-width: 768px) { .del-g { grid-template-columns: 1fr; gap: 20px; } }

    /* ── FAQ ── */
    .faq { padding: 72px 0; background: var(--white); }
    .faq-list { max-width: 720px; margin: 40px auto 0; }
    .faq-item { border-bottom: 1px solid var(--border); }
    .faq-q { width: 100%; text-align: left; background: none; border: none; padding: 18px 0; font-family: var(--fb); font-size: 15px; font-weight: 600; color: var(--dark); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
    .faq-q:hover { color: var(--accent); }
    .faq-icon { font-size: 20px; font-weight: 300; color: var(--accent); flex-shrink: 0; transition: transform .25s; }
    .faq-a { height: 0; overflow: hidden; transition: height .32s var(--ease-in-out); font-size: 14px; color: var(--muted); line-height: 1.8; }
    .faq-a-inner { padding-bottom: 16px; }
    .faq-item.open .faq-icon { transform: rotate(45deg); }

    /* ── TRUST STRIP ── */
    .trust-strip { background: var(--dark); display: flex; justify-content: center; flex-wrap: wrap; gap: 32px; padding: 18px 24px; }
    .trust-strip span { font-size: 12.5px; color: rgba(255,255,255,.65); display: flex; align-items: center; gap: 6px; }
    .trust-strip strong { color: #fff; }

    /* ── FOOTER ── */
    footer { background: var(--dark); color: #fff; padding: 64px 0 0; }
    .foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 52px; }
    .foot-logo { font-family: var(--fh); font-size: 26px; font-weight: 400; color: #fff; letter-spacing: .04em; margin-bottom: 10px; }
    .foot-tagline { font-size: 13px; color: rgba(255,255,255,.5); margin-bottom: 26px; line-height: 1.6; }
    .foot-socials { display: flex; gap: 10px; margin-bottom: 28px; }
    .foot-soc-btn { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; color: #fff; text-decoration: none; transition: border-color .2s, background .2s; }
    .foot-soc-btn:hover { border-color: var(--accent); background: rgba(232,98,26,.18); }
    .foot-contact { display: flex; flex-direction: column; gap: 10px; }
    .foot-contact-item { display: flex; align-items: center; gap: 9px; font-size: 13px; color: rgba(255,255,255,.6); }
    .foot-contact-item a { color: rgba(255,255,255,.6); transition: color .2s; }
    .foot-contact-item a:hover { color: #fff; }
    .foot-col-title { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 22px; letter-spacing: -.01em; }
    .foot-col-links { list-style: none; display: flex; flex-direction: column; gap: 13px; }
    .foot-col-links li { display: flex; align-items: center; gap: 8px; }
    .foot-col-links li::before { content: '›'; color: var(--accent); font-size: 17px; font-weight: 700; line-height: 1; }
    .foot-col-links a { font-size: 13px; color: rgba(255,255,255,.62); transition: color .2s; }
    .foot-col-links a:hover { color: #fff; }
    .foot-divider { border: none; border-top: 1px solid rgba(255,255,255,.1); margin: 0; }
    .foot-copy { font-size: 12px; color: rgba(255,255,255,.28); text-align: center; padding: 18px 0; }
    .foot-copy a { color: rgba(255,255,255,.18); transition: color .2s; }
    .foot-copy a:hover { color: rgba(255,255,255,.5); }
    @media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 36px; } }
    @media (max-width: 540px) { .foot-grid { grid-template-columns: 1fr; gap: 32px; } }

    /* ── CART SIDEBAR ── */
    .cart-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 200; opacity: 0; pointer-events: none; transition: opacity .3s; }
    .cart-overlay.open { opacity: 1; pointer-events: all; }
    .cart-sidebar { position: fixed; right: 0; top: 0; height: 100vh; width: 400px; max-width: 100vw; background: var(--white); z-index: 201; transform: translateX(100%); transition: transform .35s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column; box-shadow: -8px 0 40px rgba(0,0,0,.15); }
    .cart-sidebar.open { transform: translateX(0); }
    .cart-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
    .cart-head h3 { font-family: var(--fh); font-size: 20px; font-weight: 700; }
    .cart-close { background: none; border: none; font-size: 22px; cursor: pointer; color: var(--muted); transition: color .2s; padding: 4px; line-height: 1; }
    .cart-close:hover { color: var(--dark); }
    .cart-body { flex: 1; overflow-y: auto; padding: 8px 24px 16px; }
    .cart-empty { text-align: center; padding: 56px 20px; color: var(--muted); }
    .cart-empty .cart-empty-icon { font-size: 48px; margin-bottom: 12px; }
    .cart-empty p { font-size: 14px; line-height: 1.6; }
    .cart-item { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--border); }
    .cart-item:last-child { border-bottom: none; }
    .cart-item img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; flex-shrink: 0; border: 1px solid var(--border); }
    .cart-item-info { flex: 1; min-width: 0; }
    .cart-item-name { font-size: 14px; font-weight: 500; margin-bottom: 2px; line-height: 1.4; }
    .cart-item-color { font-size: 12px; color: var(--muted); margin-bottom: 10px; }
    .cart-item-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .cart-item-price { font-size: 15px; font-weight: 700; color: var(--accent); }
    .cart-qty { display: flex; align-items: center; border: 1.5px solid var(--border); border-radius: 8px; overflow: hidden; }
    .cart-qty button { background: none; border: none; padding: 5px 10px; cursor: pointer; font-size: 14px; font-weight: 700; transition: background .2s; line-height: 1; }
    .cart-qty button:hover { background: var(--light); }
    .cart-qty span { min-width: 26px; text-align: center; font-size: 13px; font-weight: 500; }
    .cart-remove { background: none; border: none; font-size: 15px; cursor: pointer; color: #dc2626; opacity: .45; transition: opacity .2s; padding: 4px; margin-left: 4px; line-height: 1; }
    .cart-remove:hover { opacity: 1; }
    .cart-foot { padding: 16px 24px 24px; border-top: 1px solid var(--border); flex-shrink: 0; }
    .cart-subtotal { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
    .cart-subtotal span { font-size: 14px; color: var(--muted); }
    .cart-subtotal strong { font-size: 20px; font-weight: 700; }
    .btn-checkout { width: 100%; background: var(--accent); color: #fff; font-family: var(--fb); font-size: 15px; font-weight: 700; padding: 14px; border-radius: var(--r); border: none; cursor: pointer; transition: background .2s, transform .15s var(--ease-spring), box-shadow .18s; }
    .btn-checkout:hover { background: #d45510; transform: scale(1.02); box-shadow: 0 8px 24px rgba(232,98,26,.3); }
    .btn-checkout:active { transform: scale(0.98); box-shadow: none; }
    .btn-checkout:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
    .btn-continue { width: 100%; background: none; border: none; color: var(--muted); font-family: var(--fb); font-size: 13px; cursor: pointer; padding: 10px; margin-top: 8px; transition: color .2s; }
    .btn-continue:hover { color: var(--dark); }
    .wa-alt { text-align: center; font-size: 12px; color: var(--muted); margin-top: 10px; }
    .wa-alt a { color: var(--accent); font-weight: 500; }

    /* ── CHECKOUT MODAL ── */
    .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 300; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity .3s; }
    .modal-overlay.open { opacity: 1; pointer-events: all; }
    .modal-box { background: var(--white); border-radius: 20px; width: 520px; max-width: 100%; max-height: 92vh; overflow-y: auto; }
    .modal-head { display: flex; align-items: center; justify-content: space-between; padding: 24px 28px 0; position: sticky; top: 0; background: var(--white); }
    .modal-head h3 { font-family: var(--fh); font-size: 22px; font-weight: 700; }
    .modal-close { background: none; border: none; font-size: 22px; cursor: pointer; color: var(--muted); line-height: 1; }
    .modal-body { padding: 20px 28px 32px; }
    .order-summary { background: var(--light); border-radius: 12px; padding: 16px; margin-bottom: 20px; border: 1px solid var(--border); }
    .order-summary h4 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 12px; }
    .summary-item { display: flex; justify-content: space-between; font-size: 13px; padding: 3px 0; }
    .summary-item span:last-child { font-weight: 600; }
    .summary-total { display: flex; justify-content: space-between; padding-top: 12px; margin-top: 10px; border-top: 1px solid var(--border); font-size: 16px; font-weight: 700; }
    .form-group { margin-bottom: 14px; }
    .form-group label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 6px; }
    .form-group input, .form-group textarea { width: 100%; padding: 11px 16px; border: 1.5px solid var(--border); border-radius: 10px; font-family: var(--fb); font-size: 14px; outline: none; background: var(--white); transition: border-color .2s; }
    .form-group input:focus, .form-group textarea:focus { border-color: var(--accent); }
    .form-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .btn-pay { width: 100%; background: var(--accent); color: #fff; font-family: var(--fb); font-size: 15px; font-weight: 700; padding: 14px; border-radius: var(--r); border: none; cursor: pointer; transition: background .2s, transform .15s var(--ease-spring), box-shadow .18s; margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 8px; }
    .btn-pay:hover { background: #d45510; transform: scale(1.02); box-shadow: 0 8px 24px rgba(232,98,26,.3); }
    .btn-pay:active { transform: scale(0.98); box-shadow: none; }
    .btn-pay:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
    .secure-note { text-align: center; font-size: 11.5px; color: var(--muted); margin-top: 10px; }

    /* ── SUCCESS OVERLAY ── */
    .success-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 400; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity .3s; }
    .success-overlay.open { opacity: 1; pointer-events: all; }

    /* ── ACCOUNT NAV BUTTON ── */
    .acct-nav-btn { display:flex; align-items:center; gap:6px; background:none; border:1.5px solid var(--border); border-radius:40px; padding:6px 12px 6px 10px; cursor:pointer; font-family:var(--fb); font-size:13px; font-weight:600; color:var(--dark); transition:border-color .2s, background .2s; }
    .acct-nav-btn:hover { border-color:var(--accent); color:var(--accent); }
    .acct-nav-btn.acct-signed-in { border-color:var(--accent); background:rgba(232,98,26,.06); color:var(--accent); }
    .acct-nav-name { max-width:90px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

    /* ── ACCOUNT MODAL ── */
    .account-box { background:#fff; border-radius:20px; padding:32px 28px 28px; width:100%; max-width:400px; max-height:88vh; overflow-y:auto; position:relative; animation:slideUp .3s cubic-bezier(.4,0,.2,1); }
    .acct-close { position:absolute; top:16px; right:16px; background:var(--light); border:none; border-radius:50%; width:32px; height:32px; font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--muted); transition:background .2s; }
    .acct-close:hover { background:var(--border); }
    .acct-logo { font-size:40px; text-align:center; margin-bottom:16px; }
    .acct-tabs { display:flex; gap:4px; background:var(--light); border-radius:10px; padding:4px; margin-bottom:20px; }
    .acct-tab { flex:1; padding:8px; border:none; border-radius:8px; background:none; font-family:var(--fb); font-size:13px; font-weight:600; color:var(--muted); cursor:pointer; transition:all .2s; }
    .acct-tab.active { background:#fff; color:var(--dark); box-shadow:0 1px 4px rgba(0,0,0,.1); }
    .acct-field { margin-bottom:12px; }
    .acct-field label { display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:5px; }
    .acct-field input { width:100%; padding:11px 14px; border:1.5px solid var(--border); border-radius:10px; font-family:var(--fb); font-size:14px; color:var(--dark); background:#fff; box-sizing:border-box; transition:border-color .2s; }
    .acct-field input:focus { outline:none; border-color:var(--accent); }
    .acct-submit { width:100%; padding:13px; background:var(--accent); color:#fff; border:none; border-radius:10px; font-family:var(--fb); font-size:14px; font-weight:700; cursor:pointer; transition:opacity .2s; margin-top:4px; }
    .acct-submit:hover { opacity:.9; }
    .acct-submit:disabled { opacity:.55; cursor:not-allowed; }
    .acct-err { background:#fef2f2; border:1px solid #fecaca; border-radius:8px; padding:10px 12px; font-size:12px; color:#dc2626; margin-bottom:10px; line-height:1.5; }
    .acct-profile-header { display:flex; align-items:center; gap:14px; margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid var(--border); }
    .acct-avatar { width:48px; height:48px; border-radius:50%; background:var(--accent); color:#fff; font-size:20px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .acct-display-name { font-size:15px; font-weight:700; color:var(--dark); margin:0 0 2px; }
    .acct-display-email { font-size:12px; color:var(--muted); margin:0; }
    .acct-order-card { background:var(--light); border-radius:12px; padding:14px 16px; margin-bottom:10px; }
    .acct-order-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; }
    .acct-order-id { font-size:11px; font-weight:700; color:var(--muted); font-family:monospace; }
    .acct-order-status { font-size:10px; font-weight:700; padding:3px 8px; border-radius:20px; text-transform:uppercase; letter-spacing:.06em; }
    .acct-status-proc { background:#fef3c7; color:#92400e; }
    .acct-status-ship { background:#dbeafe; color:#1e40af; }
    .acct-status-done { background:#dcfce7; color:#166534; }
    .acct-order-date { font-size:12px; color:var(--muted); margin-bottom:8px; }
    .acct-order-items { font-size:13px; color:var(--dark); line-height:1.6; margin-bottom:8px; }
    .acct-order-total { font-size:15px; font-weight:800; color:var(--accent); text-align:right; }
    .acct-empty { text-align:center; color:var(--muted); font-size:13px; padding:24px 0; }
    .acct-prof-ok { background:#f0fdf4; border:1px solid #bbf7d0; border-radius:8px; padding:10px 12px; font-size:12px; color:#166534; }
    .acct-signout { width:100%; margin-top:16px; padding:10px; background:none; border:1.5px solid var(--border); border-radius:10px; font-family:var(--fb); font-size:13px; font-weight:600; color:var(--muted); cursor:pointer; transition:all .2s; }
    .acct-signout:hover { border-color:#ef4444; color:#ef4444; }

    /* ── WISHLIST HEART BUTTON ── */
    .wish-btn { position: absolute; top: 10px; right: 10px; background: rgba(255,255,255,.92); border: none; border-radius: 50%; width: 34px; height: 34px; font-size: 17px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; transition: transform .18s, background .18s; box-shadow: 0 2px 8px rgba(0,0,0,.14); opacity: 0; line-height: 1; }
    .prod-c:hover .wish-btn { opacity: 1; }
    .wish-btn.wishlisted { opacity: 1; }
    .wish-btn:hover { transform: scale(1.13); }
    .prod-notify-btn { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #fff; border: none; border-radius: 20px; padding: 7px 16px; font-size: 11px; font-weight: 700; cursor: pointer; white-space: nowrap; z-index: 3; box-shadow: 0 2px 10px rgba(232,98,26,.4); letter-spacing: .04em; transition: opacity .2s, transform .18s; }
    .prod-notify-btn:hover { opacity: .9; transform: translateX(-50%) scale(1.04); }

    /* ── WISHLIST NAV BUTTON ── */
    .wish-nav-btn { position: relative; background: none; border: 1.5px solid var(--border); border-radius: 30px; padding: 8px 14px; cursor: pointer; font-size: 18px; color: var(--muted); transition: border-color .2s, color .2s, transform .15s var(--ease-spring); display: flex; align-items: center; line-height: 1; }
    .wish-nav-btn:hover { border-color: var(--accent); color: var(--accent); transform: scale(1.05); }
    .wish-nav-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
    .wish-count { position: absolute; top: -6px; right: -6px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px; padding: 0 4px; display: flex; align-items: center; justify-content: center; font-family: var(--fb); }
    .wish-count.hidden { display: none; }

    /* ── WISHLIST OVERLAY + SIDEBAR ── */
    .wish-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 201; opacity: 0; pointer-events: none; transition: opacity .3s; }
    .wish-overlay.open { opacity: 1; pointer-events: all; }
    .wish-sidebar { position: fixed; right: 0; top: 0; height: 100vh; width: 400px; max-width: 100vw; background: var(--white); z-index: 202; transform: translateX(100%); transition: transform .35s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column; box-shadow: -8px 0 40px rgba(0,0,0,.15); }
    .wish-sidebar.open { transform: translateX(0); }

    /* ── STOCK URGENCY ── */
    .stock-urgency { font-size: 11px; font-weight: 700; color: #dc2626; background: #fef2f2; border: 1px solid #fecaca; border-radius: 6px; padding: 3px 8px; display: inline-block; margin-bottom: 6px; }

    /* ── SIZE GUIDE LINK ── */
    .size-guide-link { font-size: 10px; color: var(--accent); font-weight: 600; cursor: pointer; text-decoration: underline; letter-spacing: .03em; white-space: nowrap; }

    /* ── FABRIC YARD PICKER ── */
    .yard-picker { margin-bottom: 14px; }
    .yard-picker-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
    .yard-picker-hd .yard-title { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
    .yard-chips { display: flex; gap: 8px; flex-wrap: wrap; }
    .yard-chip { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 58px; padding: 10px 6px 8px; border-radius: 14px; border: 2px solid var(--border); background: var(--light); cursor: pointer; transition: all .18s; }
    .yard-chip:hover { border-color: var(--accent); }
    .yard-chip.active { border-color: var(--accent); background: var(--accent); color: #fff; }
    .yard-chip .yn { font-family: var(--fh); font-size: 22px; font-weight: 600; line-height: 1; }
    .yard-chip .yl { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-top: 3px; opacity: .7; }

    /* ── SIZE GUIDE MODAL ── */
    #sg-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 700; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity .25s; }
    #sg-overlay.open { opacity: 1; pointer-events: all; }
    .sg-modal { background: var(--white); border-radius: 20px; max-width: 580px; width: 100%; max-height: 88vh; overflow-y: auto; padding: 28px 28px 24px; }
    .sg-modal h3 { font-family: var(--fh); font-size: 22px; font-weight: 300; margin-bottom: 4px; }
    .sg-sub { font-size: 12px; color: var(--muted); margin-bottom: 20px; }
    .sg-section { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--accent); margin: 16px 0 8px; display: block; }
    .sg-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 8px; }
    .sg-table th { background: var(--light); padding: 8px 12px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); text-align: left; border-bottom: 1.5px solid var(--border); }
    .sg-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); color: var(--dark); }
    .sg-table tr:last-child td { border-bottom: none; }

    /* ── PROMO CODE ── */
    .promo-row { display: flex; gap: 8px; margin-bottom: 8px; }
    .promo-row input { flex: 1; padding: 10px 14px; border: 1.5px solid var(--border); border-radius: 10px; font-family: var(--fb); font-size: 14px; outline: none; text-transform: uppercase; transition: border-color .2s; letter-spacing: .06em; }
    .promo-row input:focus { border-color: var(--accent); }
    .promo-row button { background: var(--dark); color: #fff; border: none; border-radius: 10px; padding: 10px 18px; font-family: var(--fb); font-size: 13px; font-weight: 600; cursor: pointer; transition: background .2s; white-space: nowrap; }
    .promo-row button:hover { background: var(--accent); }
    #promo-msg { font-size: 12px; margin-bottom: 10px; padding: 8px 12px; border-radius: 8px; display: none; }
    #promo-msg.ok  { background: #dcfce7; color: #16a34a; border: 1px solid #bbf7d0; display: block; }
    #promo-msg.err { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; display: block; }
    .summary-discount { display: flex; justify-content: space-between; font-size: 13px; padding: 3px 0; color: #16a34a; font-weight: 600; }
    .success-box { background: var(--white); border-radius: 24px; padding: 48px 36px; text-align: center; max-width: 420px; width: 100%; }
    .success-icon { font-size: 56px; margin-bottom: 16px; }
    .success-box h2 { font-family: var(--fh); font-size: 26px; font-weight: 700; margin-bottom: 10px; }
    .success-box p { font-size: 15px; color: var(--muted); line-height: 1.6; margin-bottom: 20px; }
    .success-ref { font-size: 13px; background: var(--light); border-radius: 8px; padding: 10px 16px; font-weight: 500; margin-bottom: 24px; color: var(--dark); font-family: monospace; }
    .btn-success { background: var(--accent); color: #fff; font-family: var(--fb); font-size: 15px; font-weight: 700; padding: 13px 32px; border-radius: var(--r); border: none; cursor: pointer; transition: background .2s, transform .15s var(--ease-spring); }
    .btn-success:hover { background: #d45510; transform: scale(1.03); }
    .btn-success:active { transform: scale(0.97); }
    .btn-success:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

    /* ── RESPONSIVE ── */
    @media (max-width: 900px) {
      #mobile-search-row { display: flex !important; }
    }
    @media (max-width: 768px) {

      .feat-g, .testi-g { grid-template-columns: 1fr; }
      .prod-g { grid-template-columns: repeat(2, 1fr); }
      .nav-links { display: none; }
      .hamburger { display: flex; }
      .btn-n { display: none; }
      .testi-cta .btn-n { display: inline-block; }

      .trust-strip { gap: 20px; }
      .form-grid2 { grid-template-columns: 1fr; }
    }
    @media (max-width: 480px) {
      .prod-g { grid-template-columns: 1fr; }
      .announce { font-size: 11px; }
    }

    /* ── FLASH SALE BAR ── */
    .flash-sale-bar { background: linear-gradient(90deg,var(--accent),var(--accent2)); color:#fff; text-align:center; padding:9px 24px; font-size:13px; font-weight:700; letter-spacing:.04em; display:none; }
    .flash-sale-bar .fs-countdown { font-size:15px; font-weight:800; font-variant-numeric:tabular-nums; margin-left:10px; }

    /* ── FEATURED BANNER ── */
    .feat-banner { position:relative; min-height:340px; background:var(--dark); overflow:hidden; display:none; }
    .feat-banner-img { position:absolute; inset:0; background-size:cover; background-position:center; }
    .feat-banner-overlay { position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.22) 100%); }
    .feat-banner-content { position:relative; z-index:2; max-width:var(--mw); margin:0 auto; padding:60px 24px; }
    .feat-banner-eyebrow { font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-bottom:12px; }
    .feat-banner-headline { font-family:var(--fh); font-size:52px; font-weight:300; line-height:1.08; color:#fff; margin-bottom:14px; letter-spacing:.02em; }
    .feat-banner-sub { font-size:16px; color:rgba(255,255,255,.72); margin-bottom:30px; line-height:1.65; max-width:460px; }
    .feat-banner-cta { display:inline-block; background:var(--accent); color:#fff; font-family:var(--fb); font-size:15px; font-weight:700; padding:14px 36px; border-radius:40px; transition:background .2s, transform .15s var(--ease-spring), box-shadow .18s; }
    .feat-banner-cta:hover { background:#d45510; transform:scale(1.04); box-shadow:0 8px 28px rgba(232,98,26,.4); }
    .feat-banner-cta:active { transform:scale(0.97); box-shadow:none; }
    .feat-banner-cta:focus-visible { outline:3px solid #fff; outline-offset:3px; }
    @media (max-width:768px) { .feat-banner-headline { font-size:32px; } .feat-banner-content { padding:44px 24px; } }

    /* ── RECENTLY VIEWED ── */
    .rv-section { padding:52px 0; border-top:1px solid var(--border); display:none; }
    .rv-track { display:flex; gap:16px; overflow-x:auto; padding-bottom:8px; scroll-behavior:smooth; -ms-overflow-style:none; scrollbar-width:none; }
    .rv-track::-webkit-scrollbar { display:none; }
    .rv-track .prod-c { flex:0 0 200px; }
    @media (max-width:640px) { .rv-track .prod-c { flex:0 0 160px; } }

    /* ── BRAND VIDEO ── */
    .brand-video-sec { padding:72px 0; background:var(--light); border-top:1px solid var(--border); display:none; }
    .brand-video-inner { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
    .brand-video-thumb { position:relative; border-radius:20px; overflow:hidden; cursor:pointer; aspect-ratio:16/9; background:var(--dark); }
    .brand-video-thumb img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s; }
    .brand-video-thumb:hover img { transform:scale(1.04); }
    .brand-video-play { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.28); transition:background .2s; }
    .brand-video-thumb:hover .brand-video-play { background:rgba(0,0,0,.38); }
    .brand-video-play svg { width:70px; height:70px; color:#fff; filter:drop-shadow(0 4px 16px rgba(0,0,0,.4)); }
    .brand-video-text h2 { font-family:var(--fh); font-size:40px; font-weight:300; margin-bottom:16px; letter-spacing:.02em; }
    .brand-video-text h2 span { color:var(--accent); }
    .brand-video-text p { font-size:16px; color:var(--muted); line-height:1.7; margin-bottom:28px; }
    #brand-video-watch-btn { display:inline-flex; align-items:center; gap:10px; background:var(--dark); color:#fff; border:none; border-radius:40px; padding:13px 28px; font-family:var(--fb); font-size:14px; font-weight:700; cursor:pointer; transition:background .2s; }
    #brand-video-watch-btn:hover { background:var(--accent); }
    @media (max-width:768px) { .brand-video-inner { grid-template-columns:1fr; gap:32px; } .brand-video-text h2 { font-size:30px; } }

    /* ── VIDEO MODAL ── */
    #video-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.9); z-index:700; display:none; align-items:center; justify-content:center; padding:20px; }
    #video-modal-overlay.open { display:flex; }
    .video-modal-inner { position:relative; width:100%; max-width:900px; aspect-ratio:16/9; }
    .video-modal-inner iframe { width:100%; height:100%; border:none; border-radius:8px; }
    .video-modal-close { position:absolute; top:-48px; right:0; background:rgba(255,255,255,.15); color:#fff; border:none; border-radius:50%; width:38px; height:38px; font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s; }
    .video-modal-close:hover { background:rgba(255,255,255,.28); }

    /* ── COLOR SWATCHES ON CARDS ── */
    .card-swatches { display:flex; gap:5px; flex-wrap:wrap; padding:0 10px 10px; }
    .color-dot { width:16px; height:16px; border-radius:50%; border:1.5px solid rgba(255,255,255,.7); box-shadow:0 0 0 1.5px rgba(0,0,0,.12); flex-shrink:0; cursor:pointer; transition:box-shadow .15s,transform .1s; }
    .color-dot:hover { transform:scale(1.18); }

    /* ── FREE DELIVERY BAR ── */
    .fd-bar-wrap { background:var(--light); border-radius:var(--r); padding:11px 14px; margin-bottom:12px; transition:background .4s, border-color .4s; border:1.5px solid transparent; }
    .fd-bar-msg { font-size:12px; color:var(--dark); margin-bottom:7px; line-height:1.5; }
    .fd-bar-msg strong { color:var(--accent); }
    .fd-track { height:6px; background:var(--border); border-radius:3px; overflow:hidden; }
    .fd-fill { height:100%; background:var(--accent); border-radius:3px; transition:width .5s cubic-bezier(.4,0,.2,1); min-width:4px; }
    .fd-bar-wrap.fd-unlocked { background:linear-gradient(135deg,#f0fdf4,#dcfce7); border-color:#86efac; }
    .fd-bar-wrap.fd-unlocked .fd-bar-msg strong { color:#16a34a; }
    .fd-bar-wrap.fd-unlocked .fd-fill { background:linear-gradient(90deg,#16a34a,#22c55e); animation:fd-shimmer 1.8s ease-in-out infinite; }
    @keyframes fd-shimmer { 0%,100%{opacity:1} 50%{opacity:.75;filter:brightness(1.25)} }
    .fd-bar-wrap.fd-celebrate { animation:fd-bounce .55s cubic-bezier(.36,.07,.19,.97) both; }
    @keyframes fd-bounce { 0%{transform:scale(1)} 18%{transform:scale(1.05)} 36%{transform:scale(.97)} 54%{transform:scale(1.025)} 72%{transform:scale(.99)} 100%{transform:scale(1)} }

    /* ── BACK TO TOP ── */
    #back-top { position:fixed; bottom:28px; left:28px; z-index:500; width:46px; height:46px; background:var(--dark); color:#fff; border:none; border-radius:50%; cursor:pointer; display:none; align-items:center; justify-content:center; box-shadow:0 4px 18px rgba(0,0,0,.28); transition:background .2s,transform .18s; }
    #back-top.show { display:flex; }
    #back-top:hover { background:var(--accent); transform:translateY(-3px); }
    @media (max-width:640px) { #back-top { bottom:90px; left:16px; width:40px; height:40px; } }

    /* ── SCROLL REVEAL ── */
    .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
    }
    .reveal.visible { opacity: 1; transform: translateY(0); }
    .reveal-group .reveal:nth-child(1) { transition-delay: 0ms; }
    .reveal-group .reveal:nth-child(2) { transition-delay: 80ms; }
    .reveal-group .reveal:nth-child(3) { transition-delay: 160ms; }
    .reveal-group .reveal:nth-child(4) { transition-delay: 240ms; }

    /* ── REDUCED MOTION ── */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
    }

    /* ── AREA SEARCH DROPDOWN ── */
    #co-area-dropdown [data-area]:hover { background: #fff7f2; }
    #co-area-dropdown [data-area] { transition: background .12s; }

    /* ── MOBILE IMPROVEMENTS ── */

    /* 1. Touch targets — raise all to ≥44px */
    .hamburger { padding: 11px 11px; }
    .acct-close { width: 44px; height: 44px; }
    .qv-x { width: 44px; height: 44px; }
    .cart-close { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; }
    .cart-qty button { padding: 10px 14px; min-height: 44px; }
    .qty-btn { padding: 11px 14px; min-height: 44px; }
    .f-btn { padding: 10px 18px; min-height: 44px; }
    .wish-nav-btn { min-width: 44px; min-height: 44px; }
    .acct-nav-btn { min-height: 44px; padding: 8px 12px 8px 10px; }
    .foot-col-links a { padding: 8px 0; display: block; }
    .foot-col-links { gap: 2px; }

    /* 2. Hero dots — bigger tap area using pseudo-element for visual */
    .hero-dot {
      width: 28px; height: 4px;
      background: transparent !important;
      border: none; cursor: pointer;
      padding: 18px 0;
      position: relative;
      transition: width .3s;
    }
    .hero-dot::before {
      content: '';
      position: absolute;
      left: 0; top: 50%;
      transform: translateY(-50%);
      width: 100%; height: 4px;
      border-radius: 2px;
      background: rgba(255,255,255,.38);
      transition: .3s;
    }
    .hero-dot.active { width: 44px; }
    .hero-dot.active::before { background: #fff; }

    /* 3. Raise tiny text to minimum 11px */
    .plbl      { font-size: 11px; }
    .opts-lbl  { font-size: 11px; }
    .pfrom     { font-size: 11px; }
    .pbadge    { font-size: 11px; }

    /* 4. Success overlay — scrollable on small screens */
    .success-box { max-height: 92vh; overflow-y: auto; }

    /* ── MOBILE-SPECIFIC ── */
    @media (max-width: 480px) {
      /* Keep 2-column grid on small phones */
      .prod-g { grid-template-columns: repeat(2, 1fr); gap: 10px; }

      /* Checkout modal padding — recover horizontal space */
      .modal-body { padding: 16px 16px 28px; }
      .modal-head { padding: 18px 16px 0; }

      /* Success box padding */
      .success-box { padding: 28px 20px; }

      /* Hide cart label text — icon + count is enough */
      .cart-label { display: none; }
      .nav-right { gap: 8px; }

      /* Tighten wrap padding */
      .wrap { padding: 0 16px; }

      /* Delivery area dropdown — stay visible above keyboard */
      #co-area-dropdown {
        max-height: 150px;
        position: fixed;
        left: 16px;
        right: 16px;
        bottom: auto;
        z-index: 9999;
      }

      /* QV buttons — stack vertically on very small screens */
      .qv-btns { flex-direction: column; }
      .qv-btn-cart, .qv-btn-wa { font-size: 14px; padding: 14px; }

      /* Account modal — more padding room */
      .account-box { padding: 28px 20px 24px; max-height: 94vh; }

      /* Filter bar sort dropdown — full width */
      #section-products .filter-bar select { width: 100%; }

      /* Hero text scaling */
      .hero-content h1 { font-size: clamp(32px, 10vw, 54px); }
      .hero-sub { font-size: 14px; margin-bottom: 24px; }
    }

    /* ── iOS ZOOM PREVENTION ─────────────────────────────────────────────────
       iOS Safari zooms in when an input has font-size < 16px. This kills UX
       on checkout forms. Force 16px on mobile, revert on desktop. */
    @media (max-width: 768px) {
      .form-group input,
      .form-group textarea,
      .form-group select,
      .acct-field input,
      .promo-row input,
      .search-row input,
      #co-name, #co-email, #co-phone, #co-address, #co-notes,
      #notify-name, #notify-phone, #notify-email,
      #rev-name, #rev-email, #rev-location, #rev-message,
      input[type="text"], input[type="email"], input[type="tel"],
      input[type="number"], input[type="password"], textarea, select {
        font-size: 16px !important;
      }
    }

    /* ── FLOATING WHATSAPP BUTTON ── */