@charset "UTF-8";
/* Beautifyy storefront styles. Part 1: main site. Part 2 (below): maintenance cover page. */
  /* ============ TOKENS ============ */
  :root{
    --ink:#241623;
    --ink-soft:#3d2a3b;
    --ivory:#FBF6EF;
    --paper:#FFFDFB;
    --blush:#E7B6BA;
    --blush-deep:#CE7C84;
    --gold:#B0813A;
    --gold-soft:#E4C98A;
    --emerald:#2F4A3D;
    --emerald-soft:#3F6553;
    --plum:#5B2A4A;
    --line: rgba(36,22,35,0.13);
    --shadow: 0 24px 48px rgba(36,22,35,0.14);
    --shadow-sm: 0 8px 20px rgba(36,22,35,0.10);
    --radius-img: 18px;
    --radius-pill: 999px;
    --maxw: 1240px;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  /* Belt-and-braces guard against page-wide horizontal scroll/drift on mobile: any
     element that ever slightly overflows its container (an image, a badge, a long
     price) would otherwise widen the whole page sideways instead of just wrapping or
     clipping locally, which is one of the most common sources of "broken" mobile
     layouts. Intentional horizontal scrollers (like the category pill shelf) opt in
     locally with their own overflow-x:auto and are unaffected. */
  html{ max-width:100%; overflow-x:hidden; }
  body{ max-width:100%; }
  body{
    margin:0;
    background:var(--ivory);
    color:var(--ink);
    font-family:'Manrope',sans-serif;
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4{
    font-family:'Fraunces',serif;
    font-weight:500;
    margin:0;
    color:var(--ink);
    letter-spacing:-0.01em;
  }
  p{margin:0;}
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}
  button{font-family:inherit; cursor:pointer; border:none; background:none;}
  ul{margin:0; padding:0; list-style:none;}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}
  ::selection{background:var(--blush); color:var(--ink);}
  :focus-visible{outline:2px solid var(--gold); outline-offset:3px;}

  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:14px 28px; border-radius:var(--radius-pill);
    font-weight:600; font-size:14.5px; letter-spacing:0.01em;
    transition:transform .25s ease, box-shadow .25s ease, background .25s ease, letter-spacing .25s ease;
    white-space:nowrap; position:relative; overflow:hidden; isolation:isolate;
  }
  .btn::after{
    content:''; position:absolute; top:0; left:0; width:35%; height:100%;
    background:linear-gradient(120deg, transparent, rgba(255,255,255,0.45), transparent);
    /* Swept with `transform: translateX()` instead of animating `left` — translateX is
       compositor-only (no layout/paint), so hovering buttons like the catalogue toggles
       no longer forces a reflow on every animation frame. Percentages are relative to the
       element's own width (35% of the button), recomputed to match the original
       left:-60% -> left:130% travel: -60/35*100=-171.4286%, 130/35*100=371.4286%. */
    transform:skewX(-20deg) translateX(-171.4286%); transition:transform .65s ease; pointer-events:none; z-index:1;
  }
  .btn:hover::after{ transform:skewX(-20deg) translateX(371.4286%); }
  .btn-primary{ background:var(--ink); color:var(--ivory); }
  .btn-primary:hover{ transform:translateY(-3px) scale(1.02); box-shadow:0 16px 32px rgba(36,22,35,0.28); letter-spacing:0.03em; }
  .btn-outline{ background:transparent; color:var(--ink); border:1.5px solid var(--ink); }
  .btn-outline:hover{ background:var(--ink); color:var(--ivory); transform:translateY(-3px); box-shadow:0 14px 28px rgba(36,22,35,0.2); }
  .btn-whatsapp{ background:var(--emerald); color:var(--ivory); }
  .btn-whatsapp:hover{ background:var(--emerald-soft); transform:translateY(-3px) scale(1.02); box-shadow:0 16px 32px rgba(47,74,61,0.35); }
  .btn-meesho{ background:transparent; color:var(--ink); border:1.5px solid var(--gold); }
  .btn-meesho:hover{ background:var(--gold); color:var(--ivory); transform:translateY(-3px); box-shadow:0 14px 28px rgba(176,129,58,0.3); }
  .btn-block{ width:100%; }
  .btn-sm{ padding:10px 18px; font-size:13px; }

  .eyebrow{
    font-family:'Manrope',sans-serif; font-weight:700; font-size:12.5px;
    color:var(--emerald); display:inline-flex; align-items:center; gap:8px;
  }
  .eyebrow::before{ content:''; width:18px; height:1px; background:var(--emerald); display:inline-block; }

  /* ============ ANNOUNCEMENT BAR ============ */
  .announce{
    background:linear-gradient(90deg, var(--plum), var(--ink) 50%, var(--plum));
    border-bottom:1px solid rgba(228,201,138,0.35);
    color:var(--ivory);
    text-align:center; font-size:13px; letter-spacing:0.03em;
    padding:10px 20px; font-weight:600;
  }
  .announce span{
    opacity:0; position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    transition:opacity .5s ease; overflow:hidden;
    line-height:1.35; padding:0 6px;
  }
  .announce span.show{ opacity:1; }
  .announce-inner{ position:relative; display:block; width:100%; height:17px; }

  /* ============ NAVBAR ============ */
  .navbar{
    position:sticky; top:0; z-index:200;
    background:rgba(255,253,251,0.96); backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
    box-shadow:0 2px 16px rgba(36,22,35,0.04);
    transition:box-shadow .3s ease;
  }
  .navbar.scrolled{ box-shadow:0 4px 24px rgba(36,22,35,0.08); }
  .nav-inner{
    max-width:var(--maxw); margin:0 auto; padding:14px 32px;
    display:flex; align-items:center; justify-content:space-between; gap:24px;
  }
  .logo{ display:flex; align-items:center; gap:14px; min-width:0; }
  .logo-mark{
    width:clamp(50px, 4.6vw, 66px); height:clamp(50px, 4.6vw, 66px);
    border-radius:50%; overflow:hidden; flex-shrink:0;
    background:conic-gradient(from 200deg, var(--blush), var(--gold), var(--emerald), var(--blush));
    display:flex; align-items:center; justify-content:center;
    border:3px solid var(--paper); box-shadow:0 4px 14px rgba(36,22,35,0.2), 0 0 0 1.5px var(--gold-soft);
    transition:transform .35s ease, box-shadow .35s ease, width .3s ease, height .3s ease;
  }
  .logo:hover .logo-mark{ transform:scale(1.08) rotate(-4deg); box-shadow:0 8px 20px rgba(176,129,58,0.4), 0 0 0 1.5px var(--gold); }
  .logo-mark video{ width:100%; height:100%; object-fit:cover; }
  .logo-mark img{ width:100%; height:100%; object-fit:cover; }
  .logo-text{
    font-family:'Fraunces',serif; font-size:29px; font-weight:700; letter-spacing:-0.02em;
    line-height:1; background:linear-gradient(120deg, var(--ink), var(--plum) 60%, var(--gold) 110%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .logo-text small{ display:block; font-family:'Manrope',sans-serif; font-weight:700; font-size:11px; letter-spacing:0.28em; color:var(--emerald); margin-top:3px; -webkit-text-fill-color:var(--emerald); }

  .nav-menu{ display:flex; align-items:center; gap:34px; }
  .nav-menu a{
    font-size:14.5px; font-weight:600; color:var(--ink-soft);
    position:relative; padding:6px 0; transition:color .25s ease, transform .25s ease;
  }
  .nav-menu a::after{
    content:''; position:absolute; left:0; bottom:0; height:2px; width:0;
    background:linear-gradient(90deg, var(--gold), var(--blush-deep)); transition:width .3s ease;
  }
  .nav-menu a:hover{ color:var(--ink); transform:translateY(-1px); }
  .nav-menu a:hover::after{ width:100%; }

  .nav-actions{ display:flex; align-items:center; gap:8px; }
  .icon-btn{
    width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    color:var(--ink); transition:background .25s ease, transform .25s ease, color .25s ease; position:relative;
  }
  .icon-btn:hover{ background:var(--ink); color:var(--ivory); transform:translateY(-2px) scale(1.06); }
  .icon-btn svg{ width:20px; height:20px; transition:transform .3s ease; }
  .icon-btn:hover svg{ transform:scale(1.08); }
  .icon-btn[aria-label="Chat on WhatsApp"]:hover{ background:var(--emerald); }
  .cart-count{
    position:absolute; top:2px; right:2px; background:var(--blush-deep); color:#fff;
    font-size:10px; font-weight:700; width:17px; height:17px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
  }
  .burger{ display:none; }

  /* ============ BRAND TAGLINE (below navbar) ============ */
  .brand-tagline{
    background:var(--ivory);
    text-align:center;
    padding:10px 20px 8px;
  }
  .brand-tagline-inner{
    display:inline-flex; align-items:center; gap:14px;
    max-width:100%;
  }
  .brand-tagline-inner::before,
  .brand-tagline-inner::after{
    content:''; height:1px; width:clamp(24px, 7vw, 56px);
    background:linear-gradient(90deg, transparent, var(--gold-soft));
  }
  .brand-tagline-inner::after{ background:linear-gradient(90deg, var(--gold-soft), transparent); }
  .brand-tagline h2{
    font-family:'Fraunces',serif; font-style:italic; font-weight:500;
    font-size:clamp(26px, 4.4vw, 38px); letter-spacing:0.01em;
    white-space:nowrap;
    background:linear-gradient(100deg,
      var(--plum) 0%,
      var(--gold) 20%,
      var(--gold-soft) 35%, #fff 42%, var(--gold-soft) 49%,
      var(--gold) 64%,
      var(--blush-deep) 82%,
      var(--plum) 100%
    );
    background-size:300% 100%;
    background-position:0% 0;
    -webkit-background-clip:text; background-clip:text; color:transparent;
    animation:tagline-sweep 6s linear infinite;
  }
  @keyframes tagline-sweep{
    0%{ background-position:0% 0; }
    100%{ background-position:-200% 0; }
  }
  @media (prefers-reduced-motion: reduce){
    .brand-tagline h2{ animation:none; background-position:0% 0; }
  }

  .search-panel{
    position:absolute; top:100%; left:0; right:0; background:var(--paper);
    border-bottom:1px solid var(--line); padding:20px 32px; box-shadow:var(--shadow-sm);
    transform:translateY(-8px); opacity:0; pointer-events:none; transition:all .25s ease;
  }
  .search-panel.open{ transform:translateY(0); opacity:1; pointer-events:auto; }
  .search-panel input{
    width:100%; max-width:var(--maxw); margin:0 auto; display:block;
    border:none; border-bottom:2px solid var(--ink); background:none;
    font-family:'Fraunces',serif; font-size:24px; padding:8px 0; color:var(--ink);
  }
  .search-panel input:focus{ outline:none; }
  .search-hint{ font-size:12.5px; color:var(--ink-soft); opacity:0.6; margin-top:8px; text-align:center; }

  /* ============ PROFILE / PREVIOUS ORDERS MODAL ============ */
  .profile-wrap{ position:relative; }
  .profile-modal-scrim{
    position:fixed; inset:0; z-index:600; background:rgba(36,22,35,0.45); backdrop-filter:blur(2px);
    display:flex; align-items:center; justify-content:center; padding:20px;
    opacity:0; pointer-events:none; transition:opacity .25s ease;
  }
  .profile-modal-scrim.open{ opacity:1; pointer-events:auto; }
  .profile-dropdown{
    width:330px; max-width:100%;
    background:var(--paper); border:1px solid var(--line); border-radius:18px;
    box-shadow:var(--shadow); padding:22px;
    max-height:min(76vh,480px); display:flex; flex-direction:column; overflow:hidden;
    transform:scale(0.94) translateY(6px); opacity:0; transition:all .25s ease;
  }
  .profile-modal-scrim.open .profile-dropdown{ transform:scale(1) translateY(0); opacity:1; }
  .profile-dropdown-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
  .profile-dropdown-head h4{ font-size:16.5px; margin-bottom:10px; }
  .profile-modal-close{ width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--ink-soft); flex-shrink:0; transition:background .2s ease, color .2s ease; }
  .profile-modal-close:hover{ background:var(--ink); color:var(--ivory); }
  .profile-modal-close svg{ width:16px; height:16px; }
  .profile-note{
    font-size:11.5px; line-height:1.5; color:var(--ink-soft);
    background:rgba(228,201,138,0.2); border:1px solid rgba(176,129,58,0.3);
    border-radius:10px; padding:10px 12px; margin-bottom:14px;
  }
  #profileOrdersView{ display:flex; flex-direction:column; flex:1; min-height:0; }
  .profile-orders-list{ overflow-y:auto; -webkit-overflow-scrolling:touch; flex:1; min-height:0; display:flex; flex-direction:column; gap:10px; padding-right:2px; }
  .profile-order-item{ border:1px solid var(--line); border-radius:12px; padding:10px 12px; background:var(--ivory); }
  .profile-order-item .po-top{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-weight:700; font-size:13px; }
  .profile-order-item .po-date{ font-size:11px; color:var(--ink-soft); margin-top:2px; }
  .profile-order-item .po-items{ font-size:12px; color:var(--ink-soft); margin-top:6px; line-height:1.4; }
  .profile-order-item .po-total{ font-size:13px; font-weight:700; color:var(--emerald); white-space:nowrap; }
  .profile-empty{ font-size:13px; color:var(--ink-soft); text-align:center; padding:18px 4px; }

  .profile-menu-item{
    display:flex; align-items:center; gap:10px; width:100%; text-align:left;
    padding:12px 14px; border-radius:12px; font-size:14px; font-weight:600; color:var(--ink-soft);
    border:1px solid var(--line); background:var(--ivory);
    transition:background .2s ease, color .2s ease, border-color .2s ease;
  }
  .profile-menu-item:hover, .profile-menu-item:focus-visible{ background:var(--ink); color:var(--ivory); border-color:var(--ink); }
  .profile-menu-item svg{ width:17px; height:17px; flex-shrink:0; }
  .profile-modal-back{ color:var(--ink-soft); }
  .profile-modal-back:hover{ background:var(--ink); color:var(--ivory); }
  .profile-modal-back svg{ width:15px; height:15px; }

  /* ============ MOBILE MENU ============ */
  .mobile-menu{
    position:fixed; inset:0 0 0 auto; width:min(320px,86vw); background:var(--paper);
    z-index:400; transform:translateX(100%); transition:transform .35s ease;
    padding:26px 26px; box-shadow:-10px 0 40px rgba(0,0,0,0.15);
    display:flex; flex-direction:column; gap:6px;
  }
  .mobile-menu.open{ transform:translateX(0); }
  .mobile-menu a{ font-size:19px; font-family:'Fraunces',serif; padding:14px 4px; border-bottom:1px solid var(--line); }
  .mobile-menu-close{ align-self:flex-end; width:36px; height:36px; }
  .scrim{
    position:fixed; inset:0; background:rgba(36,22,35,0.35); z-index:390;
    opacity:0; pointer-events:none; transition:opacity .3s ease;
  }
  .scrim.show{ opacity:1; pointer-events:auto; }

  /* ============ HERO ============ */
  .hero{
    padding:64px 0 40px; overflow:hidden;
  }
  .hero-inner{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center; }
  .hero-copy{ opacity:0; transform:translateY(16px); animation:rise .8s ease forwards; }
  .hero-copy h1{
    font-size:clamp(40px, 5.2vw, 68px); line-height:1.03; font-weight:500;
  }
  .hero-copy h1 em{ font-style:italic; font-weight:400; color:var(--plum); }
  .hero-copy p.lead{
    margin-top:22px; font-size:17.5px; max-width:440px; color:var(--ink-soft);
  }
  .hero-cta{ margin-top:32px; display:flex; gap:14px; flex-wrap:wrap; }
  .hero-badges{ margin-top:38px; display:flex; gap:28px; flex-wrap:wrap; }
  .hero-badge{ font-size:13px; color:var(--ink-soft); display:flex; align-items:center; gap:8px; }
  .hero-badge svg{ width:16px; height:16px; color:var(--emerald); flex-shrink:0; }

  .hero-visual{
    position:relative; opacity:0; transform:translateY(16px); animation:rise .8s ease .15s forwards;
    /* 1:1 hero — square offer images (e.g. 1080x1080) fill the box with no cropping */
    aspect-ratio:1 / 1; width:100%; max-width:560px; margin-left:auto; margin-right:auto;
  }
  .hv-card{
    position:absolute; border-radius:var(--radius-img); overflow:hidden; box-shadow:var(--shadow);
    border:6px solid var(--paper); transition:transform .45s cubic-bezier(.22,.9,.32,1), box-shadow .45s ease;
  }
  .hv-1{ width:64%; top:0; right:0; height:340px; z-index:2; }
  .hv-2{ width:46%; bottom:0; left:0; height:250px; z-index:3; }
  /* Fixes images looking odd/blank-gapped inside their cards on any screen size — matches the
     same width:100%/height:100%/object-fit:cover pattern used for every other photo on this page. */
  .hv-card img{ width:100%; height:100%; object-fit:cover; }
  .hv-1:hover{ transform:translateY(-8px) rotate(-1.2deg) scale(1.02); box-shadow:0 30px 60px rgba(176,129,58,0.3); }
  .hv-2:hover{ transform:translateY(8px) rotate(1.2deg) scale(1.02); box-shadow:0 30px 60px rgba(176,129,58,0.3); }
  .hv-tag{
    position:absolute; bottom:24px; left:-18px; z-index:4;
    background:var(--paper); border-radius:var(--radius-pill); padding:12px 20px 12px 12px;
    display:flex; align-items:center; gap:10px; box-shadow:var(--shadow-sm);
    transition:transform .3s ease, box-shadow .3s ease;
  }
  .hv-tag:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
  .hv-tag-dot{ width:36px; height:36px; border-radius:50%; background:var(--blush); display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-weight:600; color:var(--ink); }
  .hv-tag div span{ display:block; }
  .hv-tag .t1{ font-size:11px; color:var(--ink-soft); }
  .hv-tag .t2{ font-size:13.5px; font-weight:700; font-family:'Fraunces',serif; }

  /* ============ OFFER SLIDESHOW (replaces the two static hero photos) ============
     Fills the exact same box the hero visual already reserved (see .hero-visual
     above), so it inherits the same responsive sizing/media-query behaviour for
     free — nothing below needs its own breakpoints. Slides are plain stacked
     layers that cross-fade via opacity; see OFFER_SLIDES in the script (search
     "OFFER SLIDESHOW — EASY EDIT") to add, remove, reorder, or disable images. */
  .offer-slideshow{
    position:absolute; inset:0; width:100%; height:100%;
    border-radius:var(--radius-img); overflow:hidden; box-shadow:var(--shadow);
    border:6px solid var(--paper); background:var(--ink);
  }
  .offer-slide{
    position:absolute; inset:0; opacity:0;
    transition:opacity 1.1s ease-in-out; /* the "ease in and out" cross-fade */
    pointer-events:none;
  }
  .offer-slide.is-active{ opacity:1; pointer-events:auto; z-index:1; }
  .offer-slide img{ width:100%; height:100%; object-fit:cover; display:block; }
  .offer-slide-badge{
    position:absolute; top:16px; left:16px; z-index:2;
    background:rgba(36,22,35,0.72); color:var(--ivory); backdrop-filter:blur(4px);
    font-size:12px; font-weight:700; letter-spacing:0.02em;
    padding:8px 14px; border-radius:var(--radius-pill);
  }
  /* "Shop now" button — sits bottom-right on top of the image. Only the
     currently-visible slide's button is clickable (inherited from
     .offer-slide/.is-active's pointer-events above), so hidden slides'
     buttons never intercept clicks. See OFFER_SLIDES in the script for how
     to point each button at a category or a specific product, or change
     its label. */
  .offer-slide-btn{
    position:absolute; right:16px; bottom:16px; z-index:2;
    display:inline-flex; align-items:center; gap:6px;
    padding:11px 20px; border-radius:var(--radius-pill);
    background:var(--ink); color:var(--ivory);
    font-family:'Manrope',sans-serif; font-size:12.5px; font-weight:700; letter-spacing:0.01em;
    box-shadow:0 10px 22px rgba(36,22,35,0.35);
    transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
  }
  .offer-slide-btn:hover{ background:var(--gold); transform:translateY(-3px); box-shadow:0 14px 28px rgba(176,129,58,0.4); }
  .offer-slide-btn svg{ width:13px; height:13px; flex-shrink:0; transition:transform .25s ease; }
  .offer-slide-btn:hover svg{ transform:translateX(2px); }
  /* Optional heading + text on a hero banner (set from Admin > View Storefront). A soft dark
     fade at the bottom keeps the words readable on any photo; the button sits beside the words. */
  .offer-slide-foot{
    position:absolute; left:0; right:0; bottom:0; z-index:2;
    display:flex; align-items:flex-end; justify-content:space-between; gap:14px;
    padding:56px 18px 18px;
    background:linear-gradient(to top, rgba(36,22,35,0.82) 0%, rgba(36,22,35,0.45) 55%, rgba(36,22,35,0) 100%);
  }
  /* When a heading/text is present, lift it clear of the "Loved by" badge that overlaps the hero's bottom-left corner. */
  .offer-slide-foot.has-cap{ padding-top:72px; padding-bottom:96px; }
  .offer-slide-cap{ min-width:0; color:var(--ivory); }
  .offer-slide-title{ font-family:'Fraunces',serif; font-weight:500; font-size:clamp(18px,2.4vw,26px); line-height:1.15; margin:0; color:var(--ivory); }
  .offer-slide-text{ font-size:13px; line-height:1.4; margin:6px 0 0; opacity:0.92; max-width:34ch; }
  .offer-slide-foot .offer-slide-btn{ position:static; flex-shrink:0; }
  @media (max-width:520px){ .offer-slide-foot{ flex-direction:column; align-items:flex-start; gap:10px; } }

  @keyframes rise{ to{ opacity:1; transform:translateY(0); } }

  /* ============ CATEGORY SHELF ============ */
  .cat-shelf{ padding:36px 0 8px; }
  .cat-shelf .wrap{
    display:flex; gap:16px; overflow-x:auto; padding-bottom:8px; scrollbar-width:none;
    /* This row scrolls horizontally with no visible scrollbar (hidden below), which
       on mobile made the last pill look like it was simply cut off/broken rather than
       hinting there was more to swipe to. This adds a soft edge fade that appears only
       on the side that still has hidden content and disappears once fully scrolled —
       a pure-CSS "scroll shadow" (two gradients scroll with the content to mask the
       edge in the page colour, two more stay fixed to draw the shadow hint itself). */
    background:
      linear-gradient(to right, var(--ivory) 30%, rgba(251,246,239,0)),
      linear-gradient(to left, var(--ivory) 30%, rgba(251,246,239,0)) 100% 0,
      linear-gradient(to right, rgba(36,22,35,0.18), rgba(36,22,35,0)),
      linear-gradient(to left, rgba(36,22,35,0.18), rgba(36,22,35,0)) 100% 0;
    background-repeat:no-repeat;
    background-color:var(--ivory);
    background-size:36px 100%, 36px 100%, 14px 100%, 14px 100%;
    background-attachment:local, local, scroll, scroll;
  }
  .cat-shelf .wrap::-webkit-scrollbar{ display:none; }
  .cat-pill{
    flex:0 0 auto; display:flex; align-items:center; gap:12px;
    padding:14px 22px; border-radius:var(--radius-pill); border:1.5px solid var(--line);
    background:var(--paper); transition:border-color .25s ease, transform .3s ease, box-shadow .3s ease;
  }
  .cat-pill:hover{ border-color:var(--gold); transform:translateY(-4px); box-shadow:0 16px 30px rgba(176,129,58,0.22); }
  .cat-pill .ci{
    width:40px; height:40px; border-radius:14px; display:flex; align-items:center; justify-content:center;
    flex-shrink:0; transition:transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,0.4), 0 4px 10px rgba(36,22,35,0.12);
  }
  .cat-pill .ci svg{ width:19px; height:19px; }
  .cat-pill:hover .ci{ transform:scale(1.15) rotate(-6deg); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.5), 0 8px 16px rgba(176,129,58,0.3); }
  .cat-pill span{ font-size:14px; font-weight:700; font-family:'Fraunces',serif; }

  /* ============ BANNERS ============ */
  .banner-strip{ padding:56px 0 20px; }
  .banner-strip .wrap{ display:block; }
  .banner{
    border-radius:22px; overflow:hidden;
    transition:transform .35s ease, box-shadow .35s ease;
  }
  .banner:hover{ transform:translateY(-6px); box-shadow:0 26px 50px rgba(36,22,35,0.28); }
  .banner-1{ background:linear-gradient(135deg, var(--blush-deep), var(--plum)); color:var(--ivory); }
  .banner-2{ background:linear-gradient(135deg, var(--emerald), #1d332a); color:var(--ivory); }
  .banner-1 .stack-card-overlay{ background:linear-gradient(135deg, var(--blush-deep), var(--plum)); }
  .banner-2 .stack-card-overlay{ background:linear-gradient(135deg, var(--emerald), var(--ink)); }
  .banner .eyebrow{ color:var(--gold-soft); }
  .banner .eyebrow::before{ background:var(--gold-soft); }
  .banner h3{ color:var(--ivory); font-size:29px; margin-top:10px; max-width:280px; }
  .banner p{ color:rgba(251,246,239,0.78); margin-top:8px; font-size:14px; max-width:260px; }
  .banner .btn{ margin-top:18px; align-self:flex-start; }
  .banner-orb{
    position:absolute; width:200px; height:200px; border-radius:50%; right:-60px; top:-60px;
    background:radial-gradient(circle, rgba(255,255,255,0.14), transparent 70%);
    transition:transform .6s ease;
  }
  .banner:hover .banner-orb{ transform:scale(1.35) translate(-20px, 20px); }

  /* ============ STACKED PROMO CARDS ============ */
  .stack-carousel{ position:relative; height:380px; }
  .stack-card{
    position:absolute; top:0; left:0; width:84%; height:100%;
    border-radius:22px; overflow:hidden;
    /* Positioned purely with `transform` (translateX + scale) instead of animating
       `left`/`top` — animating left/top forces the browser to re-run layout on every
       frame for the full 0.9s of each rotation, which stalls the main thread and shows
       up as a page-wide stutter (quick view modal, catalogue, hovers — everything —
       janking in sync with the carousel). `transform`/`opacity` are compositor-only,
       so the browser can animate them without layout or paint at all. */
    transition:transform 0.9s cubic-bezier(.22,.61,.36,1), opacity 0.9s ease, box-shadow 0.5s ease;
    will-change:transform, opacity;
    -webkit-backface-visibility:hidden; backface-visibility:hidden;
  }
  .stack-card-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
  .stack-card-bg img{ width:100%; height:100%; object-fit:cover; display:block; }
  .stack-card-overlay{ position:absolute; inset:0; z-index:0; }
  .stack-card-copy{ position:relative; z-index:1; height:100%; padding:38px 34px; display:flex; flex-direction:column; justify-content:center; box-sizing:border-box; }
  /* translateX values are percentages of the card's OWN width (84%), computed to land
     the card at the same visual offsets the old left:8%/0%/16% values gave relative to
     the container: 8/84*100=9.5238%, 16/84*100=19.0476%. */
  .stack-card.pos-front{ z-index:3; opacity:1; transform:translateX(9.5238%) scale(1) translateZ(0); box-shadow:var(--shadow); }
  .stack-card.pos-left{ z-index:1; opacity:0.92; transform:translateX(0%) scale(0.93) translateZ(0); box-shadow:var(--shadow-sm); }
  .stack-card.pos-right{ z-index:1; opacity:0.92; transform:translateX(19.0476%) scale(0.93) translateZ(0); box-shadow:var(--shadow-sm); }
  .stack-card.pos-hidden{ z-index:0; opacity:0; transform:translateX(9.5238%) scale(0.9) translateZ(0); pointer-events:none; box-shadow:none; }

  .mystery-card{ display:none; color:var(--ivory); }
  .mystery-card .stack-card-overlay{ background:linear-gradient(135deg, var(--ink), var(--plum) 55%, var(--gold)); }
  .mystery-card .eyebrow{ color:var(--gold-soft); }
  .mystery-card .eyebrow::before{ background:var(--gold-soft); }
  .mystery-card h3{ color:var(--ivory); font-size:28px; margin-top:10px; max-width:340px; }
  .mystery-card p{ color:rgba(251,246,239,0.82); margin-top:14px; font-size:14px; max-width:340px; }
  .mystery-card .mystery-spark{
    position:absolute; width:220px; height:220px; border-radius:50%; right:-70px; top:-70px;
    background:radial-gradient(circle, rgba(228,201,138,0.35), transparent 70%);
    transition:transform .6s ease; pointer-events:none;
  }
  .mystery-card:hover .mystery-spark{ transform:scale(1.3) translate(-15px, 15px); }

  /* ---- Active mystery-box-themed variant, used by the "desk" promo slot in the
     rotation. Same look as .mystery-card above, minus display:none, so it actually
     shows up in the carousel. ---- */
  .mystery-theme{ color:var(--ivory); }
  .mystery-theme .stack-card-overlay{ background:linear-gradient(135deg, var(--ink), var(--plum) 55%, var(--gold)); }
  .mystery-theme .eyebrow{ color:var(--gold-soft); }
  .mystery-theme .eyebrow::before{ background:var(--gold-soft); }
  .mystery-theme h3{ color:var(--ivory); font-size:28px; margin-top:10px; max-width:340px; }
  .mystery-theme p{ color:rgba(251,246,239,0.82); margin-top:14px; font-size:14px; max-width:340px; }
  .mystery-theme .mystery-spark{
    position:absolute; width:220px; height:220px; border-radius:50%; right:-70px; top:-70px;
    background:radial-gradient(circle, rgba(228,201,138,0.35), transparent 70%);
    transition:transform .6s ease; pointer-events:none;
  }
  .mystery-theme:hover .mystery-spark{ transform:scale(1.3) translate(-15px, 15px); }
  .mystery-theme .btn.btn-giftbox{ margin-top:22px; align-self:flex-start; }

  /* ---- Mystery Box: static glass-box illustration with a soft gradient glow,
     a fixed sheen highlight, and a still "?" mark (replaces the earlier spinning/
     floating/pulsing animated version). No animations — everything below renders
     once and stays put. ---- */
  .mystery-card .btn.btn-giftbox{ margin-top:22px; align-self:flex-start; }
  .btn-giftbox{ background:linear-gradient(120deg, var(--gold-soft), var(--gold)); color:var(--ink); }
  .btn-giftbox:hover{ background:linear-gradient(120deg, var(--gold), var(--gold-soft)); transform:translateY(-3px) scale(1.02); box-shadow:0 16px 32px rgba(176,129,58,0.4); letter-spacing:0.03em; }
  .mystery-gift{
    position:absolute; right:34px; top:50%; width:200px; height:200px;
    transform:translateY(-50%); pointer-events:none;
    /* Establishes its own stacking context so the inner layers' z-index values are
       scoped to this illustration only, and never paint over "The Mystery Box" heading. */
    z-index:0; isolation:isolate;
  }
  .mystery-gift svg{ width:100%; height:100%; display:block; }
  @media (max-width: 700px){
    .mystery-gift{ right:2px; top:12%; transform:scale(0.56); transform-origin:top right; opacity:0.55; }
  }


  .festive-card{ color:var(--ivory); }
  .festive-card .stack-card-overlay{ background:linear-gradient(135deg, var(--plum), var(--ink)); }
  .festive-card .eyebrow{ color:var(--gold-soft); }
  .festive-card .eyebrow::before{ background:var(--gold-soft); }
  .festive-card h3{ color:var(--ivory); font-size:28px; margin-top:10px; max-width:340px; }
  .festive-card p{ color:rgba(251,246,239,0.82); margin-top:14px; font-size:14px; max-width:340px; }
  .festive-card .countdown{ margin-top:20px; }
  .festive-card .btn{ margin-top:22px; align-self:flex-start; }

  .banner-3{ background:linear-gradient(135deg, var(--gold), #7c5a22); color:var(--ivory); }
  .banner-3 .stack-card-overlay{ background:linear-gradient(135deg, var(--gold), var(--plum)); }
  .banner-4{ background:linear-gradient(135deg, var(--blush-deep), var(--gold)); color:var(--ivory); }
  .banner-4 .stack-card-overlay{ background:linear-gradient(135deg, var(--blush-deep), var(--gold)); }

  .banner-single{
    margin:64px 0; border-radius:26px; overflow:hidden; background:var(--blush);
    display:grid; grid-template-columns:1fr 1fr; align-items:stretch;
  }
  .banner-single-copy{ padding:56px; display:flex; flex-direction:column; justify-content:center; }
  .banner-single-copy .eyebrow{ color:var(--plum); }
  .banner-single-copy .eyebrow::before{ background:var(--plum); }
  .banner-single-copy h3{ font-size:36px; margin-top:12px; max-width:360px; }
  .banner-single-copy p{ margin-top:14px; color:var(--ink-soft); max-width:340px; }
  .countdown{ display:flex; gap:12px; margin-top:24px; }
  .cd-box{ background:var(--paper); border-radius:12px; padding:10px 14px; text-align:center; min-width:64px; box-shadow:var(--shadow-sm); }
  .cd-box .n{ font-family:'Fraunces',serif; font-size:24px; font-weight:600; display:block; color:#000; }
  .cd-box .l{ font-size:10px; letter-spacing:0.06em; color:var(--ink-soft); }
  .banner-single-copy .btn{ margin-top:26px; align-self:flex-start; }
  .banner-single-img{ background-size:cover; background-position:center; min-height:280px; }

  /* ============ PRODUCT SECTIONS ============ */
  .product-section{ padding:64px 0; scroll-margin-top:90px; }
  .section-head{
    display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
    margin-bottom:34px; flex-wrap:wrap;
  }
  .section-head h2{ font-size:clamp(28px,3.4vw,40px); margin-top:8px; }
  .section-head p{ color:var(--ink-soft); margin-top:10px; max-width:460px; font-size:15px; }
  .section-link{ font-weight:700; font-size:14px; border-bottom:1.5px solid var(--ink); padding-bottom:2px; flex-shrink:0; }

  .sec-head-right{ display:flex; flex-direction:column; align-items:flex-end; gap:14px; }
  .sec-nav{ display:flex; gap:10px; }
  .carousel-viewport{ overflow:hidden; }
  .car-nav{
    flex-shrink:0; width:44px; height:44px; border-radius:50%; border:1.5px solid var(--line);
    background:var(--paper); display:flex; align-items:center; justify-content:center;
    transition:all .25s ease; box-shadow:var(--shadow-sm);
  }
  .car-nav svg{ width:18px; height:18px; transition:transform .25s ease; }
  .car-nav:hover{ background:var(--ink); border-color:var(--ink); color:var(--ivory); transform:scale(1.08); }
  .car-nav.car-prev:hover svg{ transform:translateX(-2px); }
  .car-nav.car-next:hover svg{ transform:translateX(2px); }

  /* ============ SORT & FILTER (per product-category section) ============ */
  .sf-wrap{ position:relative; flex-shrink:0; }
  .sf-toggle{
    flex-shrink:0; width:44px; height:44px; border-radius:50%; border:1.5px solid var(--line);
    background:var(--paper); display:flex; align-items:center; justify-content:center;
    transition:all .25s ease; box-shadow:var(--shadow-sm); position:relative;
  }
  .sf-toggle svg{ width:18px; height:18px; }
  .sf-toggle:hover, .sf-toggle.active{ background:var(--ink); border-color:var(--ink); color:var(--ivory); transform:scale(1.08); }
  .sf-badge{
    position:absolute; top:-4px; right:-4px; min-width:17px; height:17px; padding:0 3px; border-radius:50%;
    background:var(--blush-deep); color:#fff; font-size:10px; font-weight:700; font-family:'Manrope',sans-serif;
    display:flex; align-items:center; justify-content:center; line-height:1; border:2px solid var(--ivory);
  }
  .sf-panel{
    position:absolute; top:calc(100% + 12px); right:0; z-index:220; width:280px; max-width:min(280px, 84vw);
    background:var(--paper); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow);
    opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity .22s ease, transform .22s ease, visibility .22s;
    max-height:min(480px, 70vh); overflow:hidden; display:flex; flex-direction:column;
  }
  .sf-wrap.open .sf-panel{ opacity:1; visibility:visible; transform:translateY(0); }
  .sf-panel-head{ display:flex; align-items:center; justify-content:space-between; padding:20px 20px 14px; flex-shrink:0; }
  .sf-panel-head h4{ font-size:15px; font-family:'Manrope',sans-serif; font-weight:800; }
  .sf-close{ width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--ink-soft); transition:background .2s ease, color .2s ease; }
  .sf-close:hover{ background:var(--ivory); color:var(--ink); }
  .sf-close svg{ width:14px; height:14px; }
  /* The only element inside the panel allowed to scroll — its scrollbar stays
     safely within the outer .sf-panel's overflow:hidden + border-radius, so it
     can never visually poke out past the panel's rounded corners/edges. */
  .sf-panel-body{ flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:0 20px 4px; }
  .sf-section + .sf-section{ margin-top:18px; padding-top:18px; border-top:1px solid var(--line); }
  .sf-section-title{ font-size:11px; font-weight:800; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:10px; }
  .sf-options{ display:flex; flex-direction:column; gap:9px; max-height:168px; overflow-y:auto; padding-right:2px; }
  .sf-radio, .sf-check{
    display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--ink); cursor:pointer;
    font-family:'Manrope',sans-serif; line-height:1.3;
  }
  .sf-radio input, .sf-check input{ accent-color:var(--gold); width:15px; height:15px; flex-shrink:0; cursor:pointer; }
  .sf-empty-note{ font-size:12.5px; color:var(--ink-soft); font-style:italic; }
  .sf-actions{ display:flex; gap:10px; flex-shrink:0; padding:16px 20px 20px; border-top:1px solid var(--line); background:var(--paper); }
  .sf-actions button{
    flex:1; padding:10px 14px; border-radius:var(--radius-pill); font-weight:700; font-size:12.5px;
    font-family:'Manrope',sans-serif; transition:all .25s ease;
  }
  .sf-reset{ background:transparent; color:var(--ink); border:1.5px solid var(--ink); }
  .sf-reset:hover{ background:var(--ivory); }
  .sf-apply{ background:var(--ink); color:var(--ivory); }
  .sf-apply:hover{ background:var(--plum); transform:translateY(-1px); }
  @media (max-width: 980px){ .sf-toggle{ width:38px; height:38px; } }
  /* Below this width the filter panel switches from "absolute, tucked under its
     toggle button" to a centered, fixed-position modal with a dim backdrop —
     see sfPositionPanel()/sfCloseAll() in the script. This is what keeps it
     fully on-screen on phones: the old absolute positioning could inherit an
     unexpected offset from ancestor layout (e.g. the section header wrapping
     to a new line on narrow screens) and push the panel off the left edge. */
  .sf-scrim{ display:none; }
  @media (max-width: 767px){
    .sf-panel.sf-panel-fixed{
      position:fixed; top:50%; left:50%; right:auto; margin:0;
      width:min(320px, calc(100vw - 32px)); max-width:none;
      transform:translate(-50%, calc(-50% + 8px));
    }
    .sf-wrap.open .sf-panel.sf-panel-fixed{ transform:translate(-50%, -50%); }
    .sf-scrim{
      display:block; position:fixed; inset:0; background:rgba(36,22,35,0.45); z-index:210;
      opacity:0; pointer-events:none; transition:opacity .22s ease;
    }
    .sf-scrim.open{ opacity:1; pointer-events:auto; }
  }
  @media (max-width: 560px){
    .sf-toggle{ width:36px; height:36px; }
  }

  /* ============ EXPLORE CATALOGUE ============ */
  .explore-wrap{ margin-top:30px; text-align:center; }
  .explore-btn{
    display:inline-flex; align-items:center; gap:10px; padding:14px 26px;
    border-radius:var(--radius-pill); border:1.5px solid var(--ink); background:transparent;
    font-weight:700; font-size:14px; font-family:'Manrope',sans-serif; color:var(--ink);
    transition:all .3s ease; position:relative; overflow:hidden;
  }
  .explore-btn:hover{ background:var(--ink); color:var(--ivory); transform:translateY(-2px); box-shadow:0 14px 28px rgba(36,22,35,0.2); }
  .explore-btn .ex-chev{ width:15px; height:15px; transition:transform .35s ease; }
  .explore-btn.open .ex-chev{ transform:rotate(180deg); }
  .explore-panel{ max-height:0; overflow:hidden; transition:max-height .5s cubic-bezier(.22,.9,.32,1); }
  .explore-panel.open{ margin-top:30px; }
  /* Same column count as the carousel above (4 on desktop, 2 on tablet/mobile) so cards match in size —
     just a much tighter gap between them, per request. */
  .explore-grid{
    display:grid; grid-template-columns:repeat(4,1fr); gap:4px; padding-bottom:6px;
  }
  @media (max-width:980px){
    .explore-grid{ grid-template-columns:repeat(2,1fr); gap:4px; }
  }
  @media (max-width:560px){
    .explore-grid{ grid-template-columns:repeat(2,1fr); gap:3px; }
    .explore-btn{ font-size:13px; padding:12px 20px; width:100%; }
  }
  /* The carousel's flex-basis/max-width math above assumes its own (wider) gap value.
     Inside the grid, each track is already the right width, so let cards fill it fully
     instead of being capped to the carousel's narrower flex-derived size. */
  .explore-grid .product-card{ flex:none; width:100%; max-width:none; }

  .product-grid{
    display:flex; gap:26px; transition:transform .55s cubic-bezier(.22,.9,.32,1); will-change:transform;
  }
  .product-card{
    flex:0 0 calc((100% - 3*26px)/4); max-width:calc((100% - 3*26px)/4);
    background:var(--paper); border-radius:20px; overflow:hidden;
    border:1px solid var(--line); transition:transform .15s ease, box-shadow .3s ease, border-color .3s ease;
    display:flex; flex-direction:column; transform-style:preserve-3d; cursor:pointer;
  }
  .product-card:hover{ box-shadow:0 30px 55px rgba(176,129,58,0.22), 0 10px 24px rgba(36,22,35,0.12); border-color:var(--gold-soft); }
  .pc-media{ position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--blush); }
  .pc-media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
  .product-card:hover .pc-media img{ transform:scale(1.1) rotate(0.5deg); }
  .pc-media::before{
    content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
    background:linear-gradient(115deg, transparent 20%, rgba(255,255,255,0.5) 42%, transparent 64%);
    transform:translateX(-130%); transition:transform .8s ease;
  }
  .product-card:hover .pc-media::before{ transform:translateX(130%); }
  .pc-tag{
    position:absolute; top:12px; left:12px; background:var(--ink); color:var(--ivory);
    font-size:10.5px; font-weight:700; padding:5px 11px; border-radius:var(--radius-pill); letter-spacing:0.03em;
    transition:transform .3s ease;
  }
  .product-card:hover .pc-tag{ transform:scale(1.06); background:var(--gold); }
  .pc-body{ padding:18px 18px 20px; display:flex; flex-direction:column; gap:6px; flex:1; }
  .pc-cat{ font-size:11px; font-weight:700; letter-spacing:0.05em; color:var(--emerald); }
  .pc-name{ font-family:'Fraunces',serif; font-size:17px; font-weight:600; }
  .pc-bottom{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; padding-top:10px; }
  .pc-price{ font-family:'Fraunces',serif; font-weight:600; font-size:18px; }
  .pc-price .old{ font-size:13px; color:var(--ink-soft); text-decoration:line-through; font-weight:400; margin-right:6px; font-family:'Manrope',sans-serif; }
  .price-current{
    background:linear-gradient(90deg, var(--gold) 25%, #fff6e3 50%, var(--gold) 75%);
    background-size:200% auto;
    -webkit-background-clip:text; background-clip:text;
    color:transparent; -webkit-text-fill-color:transparent;
    animation:priceShine 2.6s linear infinite;
  }
  /* Paused for any price currently scrolled out of view (see the IntersectionObserver
     in the tilt/shine script) — background-position keyframes repaint the element every
     frame, and doing that at once for every off-screen price in a big catalogue grid was
     the other main source of the periodic flicker while browsing the catalogue. */
  .price-current.shine-paused{ animation-play-state:paused; }
  @keyframes priceShine{
    to { background-position:-200% center; }
  }
  /* The looping shine animation runs on every visible price at once, which is
     heavy for mobile GPUs and shows up as a flickery/pulsating glitch while
     scrolling the catalogue on phones. On mobile, skip the animated gradient
     entirely and show a plain, fully legible solid gold price instead —
     leaving a static gradient position could freeze on a pale part of the
     gradient and wash the text out. */
  @media (max-width:700px){
    .price-current{
      animation:none; background:none;
      -webkit-background-clip:initial; background-clip:initial;
      color:var(--gold); -webkit-text-fill-color:var(--gold);
    }
    /* The modal only ever shows one price at a time, so the animated
       shine is cheap there even on mobile — bring it back for that case. */
    .modal-price .price-current{
      animation:priceShine 2.6s linear infinite;
      background:linear-gradient(90deg, var(--gold) 25%, #fff6e3 50%, var(--gold) 75%);
      background-size:200% auto;
      -webkit-background-clip:text; background-clip:text;
      color:transparent; -webkit-text-fill-color:transparent;
    }
  }
  .pc-inbag{ visibility:hidden; display:flex; align-items:center; gap:4px; font-size:10.5px; font-weight:700; color:var(--emerald); background:rgba(30,100,70,0.09); padding:3px 8px; border-radius:20px; margin-top:2px; width:fit-content; }
  .pc-inbag.show{ visibility:visible; }
  /* Size picker shown on any product card whose data has hasSizes:true. */
  .pc-sizes{ display:flex; flex-wrap:wrap; gap:5px; margin:2px 0 2px; }
  .pc-size-opt{
    min-width:28px; height:26px; padding:0 6px; border-radius:8px;
    border:1.3px solid var(--line); background:var(--paper);
    font-size:11px; font-weight:700; color:var(--ink-soft);
    transition:border-color .2s ease, background .2s ease, color .2s ease;
  }
  .pc-size-opt:hover{ border-color:var(--gold); color:var(--gold); }
  .pc-size-opt.selected{ background:var(--gold); border-color:var(--gold); color:var(--ivory); box-shadow:0 4px 10px rgba(176,129,58,0.35); }
  /* Highlights just the size letter/label wherever it's shown next to a
     product name (cart drawer, previous-orders list) — same gold accent as
     the selected size button above, kept as one shared rule for consistency. */
  .size-highlight{ color:var(--gold); font-weight:800; }
  /* Color picker — shown on any card/popup whose product has hasColors:true. */
  .pc-colors{ display:flex; flex-wrap:wrap; gap:5px; margin:2px 0 2px; }
  .pc-color-opt{
    height:26px; padding:0 10px; border-radius:999px;
    border:1.3px solid var(--line); background:var(--paper);
    font-size:11px; font-weight:700; color:var(--ink-soft);
    transition:border-color .2s ease, background .2s ease, color .2s ease;
  }
  .pc-color-opt:hover{ border-color:var(--gold); color:var(--gold); }
  .pc-color-opt.selected{ background:var(--gold); border-color:var(--gold); color:var(--ivory); box-shadow:0 4px 10px rgba(176,129,58,0.35); }
  .pc-add{
    width:38px; height:38px; border-radius:50%; border:1.5px solid var(--ink);
    display:flex; align-items:center; justify-content:center; transition:background .25s ease, color .25s ease, transform .25s ease;
  }
  .pc-add:hover{ background:var(--ink); color:var(--ivory); transform:scale(1.1); }
  .pc-add svg{ width:16px; height:16px; transition:transform .35s ease; }
  .pc-add:hover svg{ transform:rotate(90deg); }

  /* Touch devices fake a ":hover" on tap, so tapping a card used to briefly play the whole
     desktop hover-in animation (image zoom, shimmer sweep, lifted shadow) right before the
     tap's click opened the modal — a visible stutter. On real touch devices we skip that
     simulated hover entirely so the tap opens the modal immediately and cleanly. */
  @media (hover:none){
    .product-card, .pc-media img, .pc-media::before, .pc-tag, .pc-add, .pc-add svg{
      transition:none;
    }
    .product-card:hover{ box-shadow:none; border-color:var(--line); }
    .product-card:hover .pc-media img{ transform:none; }
    .product-card:hover .pc-media::before{ transform:translateX(-130%); }
    .product-card:hover .pc-tag{ transform:none; background:var(--ink); }
    .pc-add:hover{ background:none; color:var(--ink); transform:none; }
    .pc-add:hover svg{ transform:none; }
    /* The "Checkout on WhatsApp" bag button fakes a ":hover" on tap like the product
       cards above, which played its shimmer-sweep (.btn::after) on every tap on mobile.
       Disabling the sweep specifically for this button on touch devices removes that
       flash without touching the sweep on any other button (desktop hover still works
       everywhere, including on this button). */
    #checkoutWa::after{ display:none; }
  }

  /* ============ STATS ============ */
  .stats-strip{ background:var(--ink); color:var(--ivory); padding:64px 0; }
  .stats-strip .wrap{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; }
  .stat-num{ font-family:'Fraunces',serif; font-size:44px; font-weight:600; color:var(--gold-soft); }
  .stat-label{ font-size:13px; color:rgba(251,246,239,0.7); margin-top:6px; }

  /* ============ TESTIMONIALS ============ */
  .testimonials{ padding:74px 0; }
  .t-stack-wrap{ display:flex; justify-content:center; margin-top:44px; }
  .t-stack{ position:relative; width:100%; max-width:620px; height:260px; }
  .t-card{
    position:absolute; inset:0; margin:auto; width:100%; height:fit-content;
    background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:32px 34px;
    box-shadow:var(--shadow-sm);
    transition:transform .8s cubic-bezier(.22,.61,.36,1), opacity .8s ease, box-shadow .5s ease;
  }
  .t-card.pos-0{ z-index:3; opacity:1; transform:translateY(0) scale(1); box-shadow:var(--shadow); }
  .t-card.pos-1{ z-index:2; opacity:0.7; transform:translateY(18px) scale(0.96); }
  .t-card.pos-2{ z-index:1; opacity:0.4; transform:translateY(34px) scale(0.92); }
  .t-card.pos-hidden{ z-index:0; opacity:0; transform:translateY(46px) scale(0.9); pointer-events:none; }
  .t-stars{ color:var(--gold); font-size:14px; letter-spacing:2px; }
  .t-quote{ margin-top:14px; font-size:15px; color:var(--ink-soft); }
  .t-person{ margin-top:20px; display:flex; align-items:center; gap:12px; }
  .t-avatar{ width:38px; height:38px; border-radius:50%; background:var(--blush); display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-weight:600; }
  .t-person .name{ font-weight:700; font-size:14px; }
  .t-person .loc{ font-size:12px; color:var(--ink-soft); }

  /* ============ GALLERY ============ */
  .gallery{ padding:20px 0 74px; }
  .g-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-top:28px; }
  .g-item{ aspect-ratio:1/1; border-radius:14px; overflow:hidden; position:relative; }
  .g-item img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
  .g-item:hover img{ transform:scale(1.12); }
  .g-item::after{
    content:'View'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    background:rgba(36,22,35,0.5); color:var(--ivory); font-family:'Fraunces',serif; font-size:14px;
    letter-spacing:0.08em; text-transform:uppercase; opacity:0; transition:opacity .35s ease;
  }
  .g-item:hover::after{ opacity:1; }

  /* ============ FAQ ============ */
  .faq{ padding:74px 0; }
  .faq-list{ max-width:720px; margin-top:32px; }
  .faq-item{ border-bottom:1px solid var(--line); }
  .faq-q{
    width:100%; text-align:left; padding:22px 4px; display:flex; align-items:center; justify-content:space-between;
    font-family:'Fraunces',serif; font-size:18px; font-weight:500;
  }
  .faq-q .plus{ font-size:22px; transition:transform .3s ease; flex-shrink:0; margin-left:20px; color:var(--gold); }
  .faq-item.open .plus{ transform:rotate(45deg); }
  .faq-a{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
  .faq-a-inner{ padding:0 4px 22px; color:var(--ink-soft); font-size:14.5px; max-width:600px; }

  /* ============ NEWSLETTER / WHATSAPP CTA ============ */
  .cta-band{
    margin:0 0 0; background:linear-gradient(135deg, var(--blush), var(--gold-soft));
    padding:70px 0; text-align:center;
  }
  .cta-band h2{ font-size:clamp(28px,3.6vw,42px); max-width:640px; margin:0 auto; }
  .cta-band p{ margin-top:14px; color:var(--ink-soft); }
  .cta-band .btn{ margin-top:28px; }

  /* ============ FOOTER ============ */
  footer{ background:var(--ink); color:rgba(251,246,239,0.82); padding:64px 0 24px; }
  .footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; }
  .footer-brand .logo-text{
    background:linear-gradient(120deg, var(--ivory), var(--gold-soft) 70%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .footer-brand .logo{ flex-direction:column; align-items:flex-start; gap:16px; max-width:100%; }
  .footer-brand .logo-mark{
    width:clamp(110px, 50vw, 300px); height:clamp(110px, 50vw, 300px);
    max-width:100%; border-width:4px; cursor:pointer;
  }
  .footer-brand .logo-text{ font-size:clamp(22px, 4vw, 32px); }
  .footer-brand p{ margin-top:16px; font-size:14px; max-width:280px; color:rgba(251,246,239,0.6); }
  .foot-social{ display:flex; gap:10px; margin-top:20px; }
  .foot-social a{ width:36px; height:36px; border-radius:50%; border:1px solid rgba(251,246,239,0.25); display:flex; align-items:center; justify-content:center; transition:all .3s ease; }
  .foot-social a:hover{ background:var(--gold-soft); border-color:var(--gold-soft); color:var(--ink); transform:translateY(-4px) rotate(-8deg); }
  .foot-social svg{ width:16px; height:16px; }
  .footer-col h4{ color:var(--ivory); font-size:15px; margin-bottom:16px; }
  .footer-col a, .footer-col p{ display:block; font-size:14px; color:rgba(251,246,239,0.65); margin-bottom:10px; }
  .footer-col a{ transition:color .25s ease, transform .25s ease, padding-left .25s ease; }
  .footer-col a:hover{ color:var(--gold-soft); padding-left:6px; }
  .foot-bottom{
    margin-top:56px; padding-top:24px; border-top:1px solid rgba(251,246,239,0.12);
    display:flex; justify-content:space-between; font-size:12.5px; color:rgba(251,246,239,0.5); flex-wrap:wrap; gap:10px;
  }

  /* ============ FLOATING ELEMENTS ============ */
  .floating-wa{
    position:fixed; bottom:26px; right:26px; z-index:150;
    width:58px; height:58px; border-radius:50%; background:var(--emerald); color:#fff;
    display:flex; align-items:center; justify-content:center; box-shadow:0 12px 28px rgba(47,74,61,0.4);
    transition:transform .3s ease, box-shadow .3s ease;
  }
  .floating-wa:hover{ transform:scale(1.1) rotate(-6deg); box-shadow:0 16px 34px rgba(47,74,61,0.5); }
  .floating-wa svg{ width:26px; height:26px; }
  .floating-wa::before{
    content:''; position:absolute; inset:0; border-radius:50%; background:var(--emerald);
    animation:pulse 2.2s ease-out infinite; z-index:-1;
  }
  @keyframes pulse{ 0%{ transform:scale(1); opacity:0.6; } 100%{ transform:scale(1.7); opacity:0; } }

  .back-top{
    position:fixed; bottom:26px; right:96px; z-index:150;
    width:44px; height:44px; border-radius:50%; background:var(--paper); border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-sm);
    opacity:0; pointer-events:none; transform:translateY(10px); transition:all .3s ease;
  }
  .back-top.show{ opacity:1; pointer-events:auto; transform:translateY(0); }
  .back-top:hover{ transform:translateY(-4px); border-color:var(--gold); box-shadow:var(--shadow); }
  .back-top svg{ width:16px; height:16px; }

  /* ============ BAG VISITOR (celebratory bag-character moments) ============ */
  .bag-visitor-overlay{
    position:fixed; inset:0; z-index:900;
    display:none; align-items:center; justify-content:center;
    opacity:0; transition:opacity .4s ease;
  }
  .bag-visitor-overlay.show{ opacity:1; }
  .bag-visitor-scrim{ position:absolute; inset:0; background:rgba(36,22,35,0.45); backdrop-filter:blur(2px); }
  .bag-visitor{
    position:relative; width:clamp(190px, 34vw, 320px);
    filter:drop-shadow(0 18px 30px rgba(36,22,35,0.35));
    transform:translate(var(--start-x,0), var(--start-y,0)) scale(0.25); opacity:0;
  }
  .bag-visitor .bag-body-outline{ fill:none; stroke:var(--ink); stroke-width:2.5; }
  .bag-visitor .bag-handle{ fill:none; stroke:var(--ink); stroke-width:5; stroke-linecap:round; }
  /* round face — original size/position, perfectly circular so it never distorts */
  .bag-visitor .bag-face-patch{ fill:var(--paper); opacity:0.97; stroke:var(--gold-soft); stroke-width:1.3; }
  .bag-visitor .bag-face-emoji{
    transform-box:fill-box; transform-origin:50% 50%;
    opacity:0; transform:scale(0.3);
  }
  .bag-visitor-overlay.enter .bag-visitor .bag-face-patch{ animation:bagFacePatchPop .5s cubic-bezier(.34,1.56,.64,1) forwards; animation-delay:.55s; opacity:0; transform:scale(0.3); transform-box:fill-box; transform-origin:50% 50%; }
  .bag-visitor-overlay.enter .bag-visitor .bag-face-emoji{ animation:bagFacePop .55s cubic-bezier(.34,1.56,.64,1) forwards; animation-delay:.65s; }
  @keyframes bagFacePatchPop{
    0%{ opacity:0; transform:scale(0.3); }
    100%{ opacity:1; transform:scale(1); }
  }
  @keyframes bagFacePop{
    0%{ opacity:0; transform:scale(0.3) rotate(-12deg); }
    60%{ opacity:1; transform:scale(1.18) rotate(5deg); }
    100%{ opacity:1; transform:scale(1) rotate(0deg); }
  }
  /* ---- fallback hand-drawn face: only shown if the emoji image fails to load ---- */
  .bag-face-fallback{ display:none; }
  svg.emoji-fallback .bag-face-emoji{ display:none; }
  svg.emoji-fallback .bag-face-fallback{ display:block; }
  .bag-eye{ fill:var(--ink); }
  .bag-e{
    fill:none; stroke:var(--ink); stroke-width:3.2; stroke-linecap:round;
    stroke-dasharray:34; stroke-dashoffset:34; opacity:0;
  }
  .bag-sad-e{ fill:none; stroke:var(--ink); stroke-width:3.2; stroke-linecap:round; }
  .bag-visitor-overlay.enter svg.emoji-fallback .bag-e{ animation:bageDraw .65s ease forwards; animation-delay:.65s; }
  @keyframes bageDraw{
    0%{ stroke-dashoffset:34; opacity:0; }
    15%{ opacity:1; }
    100%{ stroke-dashoffset:0; opacity:1; }
  }
  .bag-visitor-overlay.enter .bag-visitor{ animation:bagVisitorIn .9s cubic-bezier(.32,1.5,.4,1) forwards; }
  @keyframes bagVisitorIn{
    0%{ transform:translate(var(--start-x,0), var(--start-y,0)) scale(0.2) rotate(-10deg); opacity:0; }
    60%{ transform:translate(0,0) scale(1.12) rotate(4deg); opacity:1; }
    100%{ transform:translate(0,0) scale(1) rotate(0deg); opacity:1; }
  }
  .bag-visitor-overlay.enter .bag-visitor svg{ animation:bagVisitorBounce 1.15s ease-in-out infinite; animation-delay:.9s; }
  @keyframes bagVisitorBounce{ 0%,100%{ transform:translateY(0) rotate(0deg); } 50%{ transform:translateY(-9px) rotate(1.5deg); } }

  /* ---- modern speech-bubble message: gradient text, springy pop-in/out ---- */
  .bag-visitor-bubble{
    position:absolute; left:50%; bottom:100%; margin-bottom:20px; transform:translateX(-50%) translateY(8px) scale(0.4);
    background:linear-gradient(155deg, var(--paper), var(--ivory));
    color:var(--ink); padding:14px 28px; border-radius:20px;
    font-family:'Fraunces',serif; font-weight:600; font-size:19px; white-space:nowrap;
    box-shadow:0 14px 34px rgba(36,22,35,0.28);
    opacity:0; letter-spacing:0.01em;
  }
  .bag-visitor-bubble::after{
    content:''; position:absolute; left:50%; top:100%; transform:translateX(-50%);
    border:8px solid transparent; border-top-color:var(--paper);
    filter:drop-shadow(0 3px 2px rgba(36,22,35,0.12));
  }
  .bag-visitor-bubble span{
    display:inline-block; background:linear-gradient(120deg, var(--ink), var(--plum) 60%, var(--gold) 120%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .bag-visitor-overlay.enter .bag-visitor-bubble{ animation:bagVisitorBubble .6s cubic-bezier(.32,1.5,.4,1) forwards; animation-delay:.2s; }
  @keyframes bagVisitorBubble{
    0%{ opacity:0; transform:translateX(-50%) translateY(8px) scale(0.4); }
    55%{ opacity:1; transform:translateX(-50%) translateY(-3px) scale(1.08); }
    100%{ opacity:1; transform:translateX(-50%) translateY(0) scale(1); }
  }
  .bag-visitor-overlay:not(.show) .bag-visitor-bubble{ transition:opacity .25s ease, transform .25s ease; }

  /* ============ CART DRAWER ============ */
  .cart-drawer{
    position:fixed; top:0; right:0; bottom:0; width:min(420px,92vw); background:var(--paper);
    z-index:500; transform:translateX(100%); transition:transform .4s cubic-bezier(.22,.9,.32,1);
    display:flex; flex-direction:column; box-shadow:-16px 0 50px rgba(0,0,0,0.18);
  }
  .cart-drawer.open{ transform:translateX(0); }
  .cart-head{ padding:26px 26px 18px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
  .cart-head h3{ font-size:22px; }
  .cart-close{ width:36px; height:36px; border-radius:50%; }
  .cart-close:hover{ background:rgba(36,22,35,0.06); }
  .cart-items{ flex:1; overflow-y:auto; padding:18px 26px; display:flex; flex-direction:column; gap:16px; }
  .cart-empty{ text-align:center; padding:60px 20px; color:var(--ink-soft); }
  .cart-empty svg{ width:44px; height:44px; margin:0 auto 14px; opacity:0.4; }
  .cart-empty svg.sad-bag{ width:96px; height:96px; opacity:0.94; transform-origin:50% 88%; animation:sadBagFloat 2.8s ease-in-out infinite; }
  .cart-empty svg.sad-bag .bag-body-outline{ fill:none; stroke:var(--ink); stroke-width:2.5; }
  .cart-empty svg.sad-bag .bag-handle{ fill:none; stroke:var(--ink); stroke-width:5; stroke-linecap:round; }
  /* round face — original size/position */
  .cart-empty svg.sad-bag .bag-face-patch{ fill:var(--paper); opacity:0.97; stroke:var(--gold-soft); stroke-width:1.3; }
  @keyframes sadBagFloat{
    0%,100%{ transform:translateY(0) rotate(-3deg); }
    50%{ transform:translateY(7px) rotate(3deg); }
  }
  .cart-row{ display:flex; gap:14px; align-items:center; }
  .cart-row img{ width:64px; height:64px; border-radius:12px; object-fit:cover; flex-shrink:0; }
  .cart-row-info{ flex:1; }
  .cart-row-info .n{ font-family:'Fraunces',serif; font-weight:600; font-size:14.5px; }
  .cart-row-info .p{ font-size:13px; color:var(--ink-soft); margin-top:2px; }
  .cart-qty{ display:flex; align-items:center; gap:8px; margin-top:8px; }
  .cart-qty button{ width:22px; height:22px; border:1px solid var(--line); border-radius:50%; font-size:13px; display:flex; align-items:center; justify-content:center; }
  .cart-remove{
    display:inline-flex; align-items:center; justify-content:center;
    font-size:11.5px; color:var(--blush-deep); font-weight:700; letter-spacing:0.02em;
    margin-top:8px; background:transparent; border:1.5px solid var(--blush-deep); border-radius:var(--radius-pill);
    padding:6px 14px; cursor:pointer; font-family:inherit;
    transition:background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
  }
  .cart-remove:hover{ background:var(--blush-deep); color:#fff; transform:translateY(-1px); box-shadow:0 6px 14px rgba(206,124,132,0.35); }
  .cart-remove:active{ transform:translateY(0); }
  .cart-foot{ padding:22px 26px 28px; border-top:1px solid var(--line); }
  .cart-note{ font-size:11.5px; color:var(--ink-soft); margin-top:10px; text-align:center; }

  /* ---- Price summary (MRP / savings / estimated total) ---- */
  .cart-summary{ margin-bottom:18px; }
  .cs-row{
    display:flex; justify-content:space-between; align-items:baseline;
    font-size:13.5px; color:var(--ink-soft); padding:3px 0;
  }
  .cs-row span:last-child{ font-variant-numeric:tabular-nums; }
  .cs-row.cs-save{ color:var(--emerald); font-weight:700; }
  .cs-row.cs-save span:first-child{ display:inline-flex; align-items:center; gap:5px; }
  .cs-row.cs-save svg{ width:13px; height:13px; flex-shrink:0; }
  /* Eye-catching but layout-safe: only transform/text-shadow are animated (no
     width/margin/font-size), so the pulsing amount never shifts surrounding
     rows or the drawer's height. transform-origin keeps the scale centered on
     the text itself rather than growing sideways into the total below. */
  .cs-save-amount{
    display:inline-block; transform-origin:center;
    animation:cs-save-pulse 1.8s ease-in-out infinite;
  }
  @keyframes cs-save-pulse{
    0%,100%{ transform:scale(1); text-shadow:0 0 0 rgba(47,74,61,0); }
    50%{ transform:scale(1.09); text-shadow:0 0 10px rgba(47,74,61,0.45); }
  }
  @media (prefers-reduced-motion: reduce){
    .cs-save-amount{ animation:none; }
  }
  .cs-divider{ height:1px; background:var(--line); margin:10px 0; }
  .cart-total{
    display:flex; justify-content:space-between; align-items:baseline;
    font-family:'Fraunces',serif; font-size:19px; font-weight:600;
  }
  .cart-total .t-label{ display:flex; flex-direction:column; gap:1px; }
  /* ---- Shipping note under the estimated total ---- */
  .cs-ship{
    display:flex; align-items:center; justify-content:center; gap:7px;
    margin-top:12px; padding:9px 12px; border-radius:12px;
    font-size:12.5px; font-weight:700; letter-spacing:0.01em;
    color:var(--plum); background:rgba(91,42,74,0.07); border:1px dashed rgba(91,42,74,0.28);
  }
  .cs-ship svg{ width:16px; height:16px; flex-shrink:0; }
  .cs-ship-text{ display:flex; flex-direction:column; gap:2px; text-align:left; }
  .cs-ship-text small{ font-size:11px; font-weight:600; color:var(--ink-soft); letter-spacing:0.01em; }
  .cs-ship.cs-ship-free{
    color:var(--emerald); background:rgba(47,74,61,0.09); border:1px solid rgba(47,74,61,0.28);
  }
  .cart-total .t-sub{
    font-family:'Manrope',sans-serif; font-size:11px; font-weight:600;
    color:var(--ink-soft); letter-spacing:0.01em;
  }

  /* ============ MODAL ============ */
  /* ============ COLLECTIONS PAGE (sub-categories drill-down, opened from the
     bottom-nav "Collections" tab) ============
     Level 1: every sub-category (grouped under its main category) shown as an
     image card. Level 2 (tap a sub-category card): that sub-category's ,
     reusing the same .product-card markup/behaviour as the regular category
     grids (tap-to-open-modal, add to bag, wishlist all keep working as-is). */
  .collections-page{
    position:fixed; inset:0; background:var(--ivory); z-index:250; /* below .bottom-nav (300) so the nav bar stays visible/usable while Collections is open */
    transform:translate3d(100%,0,0); transition:transform .38s cubic-bezier(.22,.9,.32,1);
    display:flex; flex-direction:column;
    will-change:transform; -webkit-backface-visibility:hidden; backface-visibility:hidden;
  }
  .collections-page.open{ transform:translate3d(0,0,0); }
  .cp-header{
    display:flex; align-items:center; gap:6px; padding:16px 18px;
    border-bottom:1px solid var(--line); background:var(--paper); flex-shrink:0;
    -webkit-backface-visibility:hidden; backface-visibility:hidden;
  }
  .cp-back, .cp-close{
    width:36px; height:36px; border-radius:50%; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    background:transparent; border:none; color:var(--ink); cursor:pointer; padding:0;
  }
  .cp-back:hover, .cp-close:hover{ background:rgba(36,22,35,0.06); }
  .cp-back svg, .cp-close svg{ width:20px; height:20px; }
  .cp-header h3{ flex:1; font-size:19px; margin:0; text-align:center; }
  .cp-body{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:22px 20px calc(40px + 58px + env(safe-area-inset-bottom)); }
  .cp-section{ margin-bottom:32px; }
  .cp-section-title{ font-size:16px; margin:0 0 14px; }
  .subcat-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(130px,1fr)); gap:14px; }
  .subcat-card{
    display:flex; flex-direction:column; align-items:center; text-align:center;
    background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-img);
    padding:10px; cursor:pointer; font-family:inherit;
    transition:transform .2s ease, box-shadow .3s ease, border-color .3s ease;
  }
  .subcat-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-sm); border-color:var(--gold-soft); }
  .subcat-media{ width:100%; aspect-ratio:1/1; border-radius:14px; overflow:hidden; background:var(--blush); }
  .subcat-media img{ width:100%; height:100%; object-fit:cover; }
  .subcat-name{ font-family:'Fraunces',serif; font-weight:600; font-size:13.5px; margin-top:9px; line-height:1.25; }
  .subcat-count{ font-size:11.5px; color:var(--ink-soft); margin-top:2px; }
  @media (max-width:560px){
    .cp-body{ padding:18px 16px calc(36px + 58px + env(safe-area-inset-bottom)); }
    .subcat-grid{ grid-template-columns:repeat(auto-fill, minmax(108px,1fr)); gap:10px; }
  }

  .modal-scrim{
    position:fixed; inset:0; background:rgba(36,22,35,0.5); backdrop-filter:blur(3px);
    z-index:600; opacity:0; pointer-events:none; transition:opacity .32s cubic-bezier(.22,.9,.32,1);
    display:flex; align-items:center; justify-content:center; padding:20px;
    will-change:opacity;
  }
  .modal-scrim.open{ opacity:1; pointer-events:auto; }
  .modal{
    background:var(--paper); border-radius:24px; max-width:920px; width:100%; max-height:88vh; overflow:hidden;
    display:grid; grid-template-columns:1fr 1fr; transform:scale(0.94) translateY(12px);
    transition:transform .38s cubic-bezier(.22,.9,.32,1); will-change:transform;
    position:relative;
  }
  .modal-scrim.open .modal{ transform:scale(1) translateY(0); }
  .modal-media{ position:relative; background:var(--blush); min-height:420px; aspect-ratio:1 / 1; align-self:start; }
  .modal-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
  .modal-img-nav{
    position:absolute; top:50%; transform:translateY(-50%); width:38px; height:38px; border-radius:50%;
    background:rgba(255,253,251,0.85); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center;
    box-shadow:var(--shadow-sm); z-index:2; color:var(--ink); transition:background .2s ease, transform .2s ease;
  }
  .modal-img-nav:hover{ background:var(--paper); transform:translateY(-50%) scale(1.08); }
  .modal-img-nav svg{ width:18px; height:18px; }
  .modal-img-prev{ left:14px; }
  .modal-img-next{ right:14px; }
  .modal-img-dots{
    position:absolute; left:0; right:0; bottom:14px; display:flex; align-items:center; justify-content:center; gap:7px; z-index:2;
  }
  .modal-img-dot{
    width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,0.55); cursor:pointer;
    transition:background .2s ease, transform .2s ease; box-shadow:0 0 0 1px rgba(36,22,35,0.15);
  }
  .modal-img-dot.active{ background:var(--paper); transform:scale(1.25); }
  .modal-close{
    position:absolute; top:16px; right:16px; width:38px; height:38px; border-radius:50%;
    background:var(--paper); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-sm); z-index:2;
  }
  .modal-body{ padding:36px 34px; overflow-y:auto; display:flex; flex-direction:column; }
  .modal-body .pc-cat{ margin-bottom:8px; }
  .modal-body h3{ font-size:27px; }
  .modal-price{ margin-top:12px; font-family:'Fraunces',serif; font-size:23px; font-weight:600; }
  .modal-price .old{ font-size:15px; color:var(--ink-soft); text-decoration:line-through; font-weight:400; margin-right:8px; font-family:'Manrope',sans-serif; }
  .modal-desc{ margin-top:16px; font-size:14.5px; color:var(--ink-soft); line-height:1.7; }
  .modal-meta{ display:flex; gap:18px; margin-top:18px; flex-wrap:wrap; }
  .modal-meta div{ font-size:14px; font-weight:400; color:var(--ink-soft); }
  .modal-meta strong{ display:block; color:var(--ink); font-family:inherit; font-size:inherit; font-weight:700; margin-bottom:2px; }
  /* Size picker shown in the product popup for any product with hasSizes:true. */
  .modal-sizes{ margin-top:22px; }
  .modal-sizes-label{ display:block; font-size:12px; font-weight:700; letter-spacing:0.03em; color:var(--ink-soft); margin-bottom:8px; }
  .modal-sizes-row{ display:flex; flex-wrap:wrap; gap:8px; }
  .modal-size-opt{
    min-width:42px; height:38px; padding:0 10px; border-radius:10px;
    border:1.5px solid var(--line); background:var(--paper);
    font-size:13px; font-weight:700; color:var(--ink-soft);
    transition:border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease;
  }
  .modal-size-opt:hover{ border-color:var(--gold); color:var(--gold); }
  .modal-size-opt.selected{ background:var(--gold); border-color:var(--gold); color:var(--ivory); transform:scale(1.04); box-shadow:0 6px 14px rgba(176,129,58,0.35); }
  .modal-colors{ margin-top:22px; }
  .modal-color-opt{
    height:38px; padding:0 14px; border-radius:999px;
    border:1.5px solid var(--line); background:var(--paper);
    font-size:13px; font-weight:700; color:var(--ink-soft);
    transition:border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease;
  }
  .modal-color-opt:hover{ border-color:var(--gold); color:var(--gold); }
  .modal-color-opt.selected{ background:var(--gold); border-color:var(--gold); color:var(--ivory); transform:scale(1.04); box-shadow:0 6px 14px rgba(176,129,58,0.35); }
  .modal-qty{ display:flex; align-items:center; gap:14px; margin-top:24px; }
  .modal-qty button{ width:34px; height:34px; border:1.5px solid var(--ink); border-radius:50%; font-size:16px; }
  .modal-inbag{ display:none; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--emerald); background:rgba(30,100,70,0.09); padding:5px 12px; border-radius:20px; margin-top:14px; width:fit-content; }
  .modal-inbag.show{ display:flex; }
  .modal-cta{ margin-top:26px; display:flex; flex-direction:column; gap:10px; }
  .modal-or{ text-align:center; font-size:11.5px; color:var(--ink-soft); margin:2px 0; }

  /* ---- Desktop product popup: square gallery panel on the left, tidy details on the right.
     Layout-only; mobile (<=980px) keeps its own stacked layout defined in the mobile block. ---- */
  @media (min-width:981px){
    .modal{
      max-width:1080px; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:stretch;
      background:linear-gradient(90deg, var(--ivory) 50%, var(--paper) 50%);
    }
    .modal-media{ align-self:center; min-height:0; max-height:88vh; margin:0 24px; }
    .modal-body{ background:var(--paper); padding:44px 40px 36px; }
    .modal-meta{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:20px; }
    .modal-meta div{ padding:10px 12px; border:1px solid var(--line); border-radius:12px; }
    .modal-sizes, .modal-colors{ margin-top:20px; }
    .modal-qty{ margin-top:20px; }
    .modal-cta{ margin-top:22px; }
  }
  @media (min-width:1200px){
    .modal-cta{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
    .modal-cta .btn{ padding-left:16px; padding-right:16px; }
    .modal-cta .modal-or, .modal-cta .btn-meesho{ grid-column:1 / -1; }
  }


  /* ============ PRODUCT IMAGE SWIPE + ZOOM (additive) ============ */
  .modal-media{ overflow:hidden; touch-action:pan-y; }
  .modal-media img{ cursor:zoom-in; -webkit-user-drag:none; user-select:none; }
  .imgv{
    position:fixed; inset:0; z-index:680; background:rgba(20,12,20,0.94);
    display:none; align-items:center; justify-content:center;
    opacity:0; transition:opacity .2s ease;
  }
  .imgv.open{ display:flex; }
  .imgv.show{ opacity:1; }
  .imgv-stage{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    overflow:hidden; touch-action:none; user-select:none; -webkit-user-select:none;
  }
  .imgv-img{
    max-width:100%; max-height:100%; object-fit:contain; display:block;
    transform-origin:center center; will-change:transform; -webkit-user-drag:none; pointer-events:none;
  }
  .imgv-btn{
    position:absolute; z-index:2; width:42px; height:42px; border-radius:50%;
    background:rgba(255,253,251,0.16); color:#fff; display:flex; align-items:center; justify-content:center;
    backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  }
  .imgv-btn:hover{ background:rgba(255,253,251,0.3); }
  .imgv-btn svg{ width:20px; height:20px; }
  .imgv-close{ top:max(14px, env(safe-area-inset-top)); right:14px; }
  .imgv-prev{ left:14px; top:50%; transform:translateY(-50%); }
  .imgv-next{ right:14px; top:50%; transform:translateY(-50%); }
  .imgv-count{
    position:absolute; z-index:2; left:0; right:0; bottom:max(16px, env(safe-area-inset-bottom));
    text-align:center; color:rgba(255,255,255,0.8); font-size:12.5px; font-weight:600; letter-spacing:0.04em; pointer-events:none;
  }
  @media (max-width:980px){
    .imgv-prev, .imgv-next{ display:none; }
  }

  /* ============ MEESHO CONFIRM MODAL ============ */
  .confirm-scrim{
    position:fixed; inset:0; background:rgba(36,22,35,0.5); backdrop-filter:blur(3px);
    z-index:650; opacity:0; pointer-events:none; transition:opacity .3s ease;
    display:flex; align-items:center; justify-content:center; padding:20px;
  }
  .confirm-scrim.open{ opacity:1; pointer-events:auto; }
  .confirm-box{
    background:var(--paper); border-radius:22px; max-width:440px; width:100%; padding:34px 32px;
    transform:scale(0.92) translateY(10px); transition:transform .35s ease; text-align:left;
  }
  .confirm-scrim.open .confirm-box{ transform:scale(1) translateY(0); }
  /* The checkout details form (opened by "Checkout on WhatsApp" from the bag, and
     "Place Order"/"Order on WhatsApp" from product modals) should feel instant rather
     than easing in like the other confirm-style popups (Meesho notice, return policy).
     Higher-specificity selectors here override the shared .confirm-scrim/.confirm-box
     timing above just for this one modal. */
  #checkoutFormScrim{ transition:opacity .12s ease; }
  #checkoutFormScrim .confirm-box{ transition:transform .12s ease; }

  /* Meesho modal flicker fix — scoped only to this modal.
     Keep the existing animation/appearance, but force the fixed overlay and
     popup onto stable compositing layers so opening it does not flash/jitter
     when body scrolling is locked. */
  #meeshoScrim{
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    -webkit-transform:translateZ(0);
    transform:translateZ(0);
    will-change:opacity;
  }
  #meeshoScrim .confirm-box{
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    -webkit-transform:scale(0.92) translateY(10px) translateZ(0);
    transform:scale(0.92) translateY(10px) translateZ(0);
    will-change:transform;
  }
  #meeshoScrim.open .confirm-box{
    -webkit-transform:scale(1) translateY(0) translateZ(0);
    transform:scale(1) translateY(0) translateZ(0);
  }
  .confirm-icon{
    width:50px; height:50px; border-radius:50%; background:var(--gold-soft); display:flex;
    align-items:center; justify-content:center; margin-bottom:18px;
  }
  .confirm-icon svg{ width:24px; height:24px; color:var(--ink); }
  .confirm-box h3{ font-size:22px; }
  .confirm-box p{ margin-top:12px; font-size:14px; color:var(--ink-soft); line-height:1.7; }
  .confirm-box .note-strip{
    margin-top:16px; padding:12px 14px; background:#FBF0DD; border-left:3px solid var(--gold);
    border-radius:8px; font-size:12.5px; color:var(--ink-soft);
  }
  .confirm-actions{ margin-top:24px; display:flex; gap:10px; }
  .confirm-actions .btn{ flex:1; padding:13px 20px; }

  /* ============ CHECKOUT DETAILS FORM ============ */
  .checkout-box{
    max-width:460px; max-height:88vh; padding:0;
    display:flex; flex-direction:column; overflow:hidden;
  }
  .checkout-head{ padding:32px 32px 0; flex-shrink:0; }
  .checkout-form{ margin-top:0; display:flex; flex-direction:column; flex:1; min-height:0; gap:0; }
  .checkout-fields{
    flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
    padding:20px 32px 4px; display:flex; flex-direction:column; gap:16px;
  }
  .checkout-actions{
    flex-shrink:0; margin-top:0; padding:18px 32px 28px;
    border-top:1px solid var(--line); background:var(--paper);
  }
  .checkout-form label{
    font-size:11px; font-weight:700; letter-spacing:0.05em; color:var(--ink-soft);
    display:block; margin-bottom:7px; text-transform:uppercase;
  }
  .checkout-form label.gift-row{
    /* This label wraps the gift toggle, not a field caption — undo the field-label styling above. */
    font-size:initial; font-weight:initial; letter-spacing:initial; text-transform:none; margin-bottom:32px;
  }
  .checkout-form input[type="text"], .checkout-form input[type="tel"], .checkout-form textarea, .checkout-form select{
    width:100%; padding:12px 14px; border:1.5px solid var(--line); border-radius:12px;
    font-family:'Manrope',sans-serif; font-size:14px; color:var(--ink); background:var(--ivory);
    transition:border-color .2s ease;
  }
  .checkout-form select{ appearance:none; -webkit-appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23241623' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 12px center; background-size:16px; padding-right:38px;
  }
  .checkout-form select:invalid{ color:var(--ink-soft); }
  .checkout-form input:focus, .checkout-form textarea:focus, .checkout-form select:focus{ outline:none; border-color:var(--gold); }
  .checkout-form textarea{ resize:vertical; min-height:72px; }
  .checkout-form input.field-invalid, .checkout-form textarea.field-invalid, .checkout-form select.field-invalid{ border-color:var(--blush-deep); }
  .field-error{
    display:block; min-height:15px; margin-top:5px;
    font-size:12px; font-weight:700; color:var(--blush-deep);
  }

  /* ============ CUSTOM PAYMENT METHOD PICKER (replaces native <select> UI) ============ */
  .visually-hidden-select{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
  .payment-picker{ display:flex; gap:10px; flex-wrap:wrap; }
  .payment-option{
    flex:1 1 0; min-width:100px; display:flex; flex-direction:column; align-items:center; gap:8px;
    padding:14px 10px; border:1.5px solid var(--line); border-radius:14px;
    background:var(--paper); color:var(--ink-soft); text-align:center;
    font-family:'Manrope',sans-serif; font-size:12px; font-weight:700; letter-spacing:0.01em;
    transition:border-color .25s ease, background .25s ease, color .25s ease, transform .2s ease, box-shadow .25s ease;
  }
  .payment-option:hover{ transform:translateY(-2px); border-color:var(--gold-soft); box-shadow:var(--shadow-sm); }
  .payment-option .po-icon{
    width:32px; height:32px; border-radius:50%; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    background:var(--ivory); color:var(--ink-soft);
    transition:background .3s ease, color .3s ease, transform .3s ease;
  }
  .payment-option .po-icon svg{ width:16px; height:16px; }
  .payment-option.selected{ border-color:var(--gold); background:#FBF3E4; color:var(--ink); }
  .payment-option.selected .po-icon{ background:linear-gradient(135deg, var(--gold-soft), var(--gold)); color:#fff; transform:scale(1.06); }
  .payment-option:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
  #coPayment.field-invalid ~ .payment-picker .payment-option{ border-color:var(--blush-deep); }

  .gift-row{
    position:relative;
    display:flex; align-items:center; gap:14px; cursor:pointer;
    padding:13px 16px; border:1.5px solid var(--line); border-radius:14px; background:var(--paper);
    transition:border-color .3s ease, background .3s ease;
  }
  .gift-row.gift-active{ border-color:var(--gold); background:#FBF3E4; }
  /* `position:relative` on .gift-row above (and the explicit top/left here) keeps this
     checkbox's containing block local to the row itself. Without a positioned ancestor
     nearby, an absolutely-positioned element like this falls back to the nearest
     transformed ancestor — here, the checkout modal box several levels up — so on focus
     the browser would try to scroll that far-away hypothetical position into view inside
     the scrollable form, yanking the whole modal content upward and leaving it stuck. */
  .gift-row .gift-native{ position:absolute; top:0; left:0; opacity:0; width:0; height:0; pointer-events:none; }

  .gift-icon{
    width:42px; height:42px; border-radius:12px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg, var(--blush), var(--blush-deep));
    transition:background .35s ease, transform .35s ease;
  }
  .gift-row.gift-active .gift-icon{ background:linear-gradient(135deg, var(--gold-soft), var(--gold)); transform:scale(1.06) rotate(-4deg); }
  .gift-icon svg{ width:22px; height:22px; }

  .gift-copy{ flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }
  .gift-copy .gift-title{ font-size:14.5px; font-weight:700; color:var(--ink); font-family:'Manrope',sans-serif; line-height:1.3; }
  .gift-copy .gift-sub{ font-size:11.5px; color:var(--ink-soft); line-height:1.3; }

  .gift-switch{
    width:42px; height:24px; border-radius:999px; background:var(--line); flex-shrink:0; position:relative;
    transition:background .3s ease;
  }
  .gift-switch::after{
    content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%;
    background:var(--paper); box-shadow:0 2px 4px rgba(36,22,35,0.25); transition:transform .3s cubic-bezier(.34,1.56,.64,1);
  }
  .gift-row.gift-active .gift-switch{ background:var(--emerald); }
  .gift-row.gift-active .gift-switch::after{ transform:translateX(18px); }
  .gift-row .gift-native:focus-visible ~ .gift-switch{ outline:2px solid var(--gold); outline-offset:2px; }

  /* ============ RETURN POLICY LINK (below Place Order button) ============ */
  .policy-link-row{ margin-top:14px; display:flex; justify-content:center; }
  .policy-link-btn{
    display:inline-flex; align-items:center; gap:6px;
    font-size:12.5px; font-weight:700; color:var(--ink-soft);
    padding:6px 4px; border-bottom:1px dashed var(--line);
    transition:color .2s ease, border-color .2s ease;
  }
  .policy-link-btn:hover{ color:var(--gold); border-color:var(--gold); }
  .policy-link-btn svg{ width:14px; height:14px; flex-shrink:0; }

  /* ============ RETURN POLICY MODAL ============ */
  .policy-scrim{
    position:fixed; inset:0; background:rgba(36,22,35,0.5); backdrop-filter:blur(3px);
    z-index:650; opacity:0; pointer-events:none; transition:opacity .3s ease;
    display:flex; align-items:center; justify-content:center; padding:20px;
  }
  .policy-scrim.open{ opacity:1; pointer-events:auto; }
  .policy-box{
    background:var(--paper); border-radius:22px; max-width:560px; width:100%; max-height:86vh; padding:0;
    display:flex; flex-direction:column; overflow:hidden;
    transform:scale(0.92) translateY(10px); transition:transform .35s ease;
  }
  .policy-scrim.open .policy-box{ transform:scale(1) translateY(0); }
  .policy-head{
    flex-shrink:0; padding:28px 34px 18px; border-bottom:1px solid var(--line);
    display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  }
  .policy-head h3{ font-size:21px; }
  .policy-close{
    width:36px; height:36px; border-radius:50%; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    background:var(--ivory); transition:background .2s ease, transform .2s ease;
  }
  .policy-close:hover{ background:var(--ink); color:var(--ivory); transform:scale(1.06); }
  .policy-close svg{ width:16px; height:16px; }
  .policy-body{
    flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
    padding:22px 34px 6px;
  }
  .policy-body h4{ font-family:'Manrope',sans-serif; font-size:13px; font-weight:700; letter-spacing:0.02em; color:var(--ink); margin-top:22px; margin-bottom:8px; }
  .policy-body h4:first-child{ margin-top:0; }
  .policy-body p{ font-size:13.5px; color:var(--ink-soft); line-height:1.75; }
  .policy-body ul{ margin-top:8px; padding-left:18px; list-style:disc; }
  .policy-body li{ font-size:13.5px; color:var(--ink-soft); line-height:1.75; margin-bottom:6px; }
  .policy-foot{
    flex-shrink:0; padding:18px 34px 28px;
  }

  /* ============ TOAST ============ */
  .toast{
    position:fixed; bottom:100px; right:26px; z-index:700;
    background:var(--ink); color:var(--ivory); padding:14px 22px; border-radius:12px;
    font-size:13.5px; font-weight:600; box-shadow:var(--shadow); display:flex; align-items:center; gap:10px;
    transform:translateY(14px); opacity:0; pointer-events:none; transition:all .3s ease;
  }
  .toast.show{ transform:translateY(0); opacity:1; }
  .toast svg{ width:16px; height:16px; color:var(--gold-soft); flex-shrink:0; }

  /* ============ ADD-TO-BAG "DROPPING A VALUABLE" ANIMATION ============ */
  .fly-gem{
    position:fixed; top:0; left:0; width:52px; height:52px; border-radius:50%;
    pointer-events:none; z-index:9999; overflow:hidden;
    background:var(--paper);
    box-shadow:0 8px 22px rgba(36,22,35,0.35), 0 0 0 2px var(--gold-soft), 0 0 22px rgba(228,201,138,0.55);
    will-change:transform, opacity;
  }
  .fly-gem img{ width:100%; height:100%; object-fit:cover; }
  .fly-gem::after{
    content:''; position:absolute; inset:0; border-radius:50%;
    background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.75) 50%, transparent 70%);
    background-size:220% 220%; background-position:120% 0;
    animation:gemShine .7s ease forwards;
  }
  @keyframes gemShine{
    0%{ background-position:140% 0; opacity:1; }
    100%{ background-position:-40% 0; opacity:0; }
  }
  @media (max-width:600px){
    .fly-gem{ width:40px; height:40px; }
  }

  .icon-btn.bag-drop{ animation:bagDrop .55s cubic-bezier(.36,.07,.19,.97); }
  @keyframes bagDrop{
    0%{ transform:scale(1) rotate(0deg); }
    28%{ transform:scale(0.82) rotate(-8deg); }
    52%{ transform:scale(1.14) rotate(5deg); }
    72%{ transform:scale(0.94) rotate(-3deg); }
    100%{ transform:scale(1) rotate(0deg); }
  }
  .cart-count.bump{ animation:countBump .45s ease; }
  @keyframes countBump{
    0%{ transform:scale(1); }
    45%{ transform:scale(1.55); background:var(--gold); }
    100%{ transform:scale(1); }
  }
  @media (prefers-reduced-motion: reduce){
    .fly-gem{ display:none; }
    .icon-btn.bag-drop, .cart-count.bump{ animation:none; }
  }

  /* ============ RESPONSIVE ============ */
  @media (max-width: 980px){
    .nav-menu{ display:none; }
    .burger{ display:flex; }
    .nav-inner{ padding:12px 20px; gap:14px; }
    .hero{ padding-top:20px; }
    .hero-inner{ grid-template-columns:1fr; }
    .hero-visual{ order:-1; max-width:480px; }
    .product-card{ flex:0 0 calc((100% - 26px)/2); max-width:calc((100% - 26px)/2); }
    .car-nav{ width:38px; height:38px; }
    .banner-single{ grid-template-columns:1fr; }
    .banner-single-img{ min-height:200px; order:-1; }
    .stack-carousel{ height:460px; }
    .stack-card{ width:86%; }
    /* Same fix as the base rule: transform-only positioning, percentages recomputed
       for this breakpoint's width (86%): 7/86*100=8.1395%, 14/86*100=16.2791%. */
    .stack-card.pos-front{ transform:translateX(8.1395%) scale(1) translateZ(0); }
    .stack-card.pos-left{ transform:translateX(0%) scale(0.93) translateZ(0); }
    .stack-card.pos-right{ transform:translateX(16.2791%) scale(0.93) translateZ(0); }
    .stats-strip .wrap{ grid-template-columns:repeat(2,1fr); gap:32px; }
    .t-stack{ height:300px; }
    .g-grid{ grid-template-columns:repeat(3,1fr); }
    .footer-grid{ grid-template-columns:1fr 1fr; }
    .modal{
      grid-template-columns:1fr;
      grid-template-rows:auto minmax(0,1fr);
      height:88vh; max-height:88vh;
    }
    .modal-media{ height:clamp(260px, 46vh, 420px); min-height:0; aspect-ratio:auto; align-self:stretch; }
    .modal-media img{ height:100%; min-height:0; object-fit:cover; }
    /* Keep the modal's overlay buttons tucked near the edges so they don't cover the image. */
    .modal .modal-wishlist-btn{ top:6px; left:6px; }
    .modal .modal-close{ top:6px; right:6px; }
    .modal .modal-img-prev{ left:4px; }
    .modal .modal-img-next{ right:4px; }
    .modal-body{ min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:24px 22px 28px; }

    /* PERMANENT FIX: the floating WhatsApp bubble sat on top of the right column's
       "add to bag" button for large stretches of the product grid on every
       phone-width layout — not just very narrow phones. Relying on a single
       narrow (560px) breakpoint for this left a wide gap (561-980px) where the
       bubble still floats over the grid and headings, and real phones regularly
       land in that gap once you account for display-size/font-scaling settings
       (very common on Android), landscape orientation, or larger/foldable
       screens. This is the same breakpoint already used above to switch the nav
       to its mobile (hamburger) layout, so it reliably covers every phone-sized
       viewport. The navbar itself has its own WhatsApp icon button, so nothing
       is lost by removing this duplicate floating one anywhere mobile nav is
       active. The back-to-top button moves in to replace it at a single
       bottom-right position instead of two stacked circles. */
    .floating-wa{ display:none; }
    .back-top{ right:20px; bottom:20px; }
  }

  /* ============ CATEGORY GRID — DEFAULT MOBILE VIEW ============
     Below this width, each category's default (unexpanded) row of products
     switches from a sideways-scrolling 4/2-across strip to a 2-column grid,
     showing MOBILE_STACK_COUNT cards (set in the script — search
     "MOBILE_STACK_COUNT") arranged 2-per-row. The Prev/Next arrows still
     work, paging a full "page" of rows up/down instead of left/right — see
     initCarousel() in the script for that part. The "Explore <Category>
     Catalogue" button below each row is untouched and still reveals the
     complete category list. To change which screens this applies to, keep
     this breakpoint (767px) in sync with MOBILE_STACK_BREAKPOINT_PX in the
     script. */
  @media (max-width: 767px){
    .product-grid{ display:grid; grid-template-columns:repeat(2,1fr); }
    .product-card{ flex:none; width:100%; max-width:none; }
    .product-section{ padding-top:28px; }
  }

  @media (max-width: 560px){
    .brand-tagline{ padding-bottom:4px; }
    .wrap{ padding:0 16px; }
    .nav-inner{ padding:10px 16px; gap:8px; }
    .logo{ gap:9px; }
    .logo-mark{ width:42px; height:42px; }
    .logo-text{ font-size:20px; }
    .logo-text small{ font-size:8.5px; letter-spacing:0.2em; }
    .nav-actions{ gap:0; }
    .nav-actions .icon-btn{ width:36px; height:36px; }
    .nav-actions .icon-btn svg{ width:17px; height:17px; }
    /* .product-grid is a vertical stack below 767px (see the 767px block
       above) — this just tightens the gap between stacked cards a bit
       further for the narrowest phones. Card width is already full-width
       (100%) from the 767px block, so no width override is needed here. */
    .product-grid{ gap:14px; }
    .pc-body{ padding:12px 12px 14px; gap:5px; }
    .pc-size-opt{ min-width:24px; height:23px; font-size:10px; }
    .pc-color-opt{ height:23px; padding:0 8px; font-size:10px; }
    .pc-cat{ font-size:9.5px; }
    .pc-name{

      font-size:13px; line-height:1.28;
      min-height:calc(2 * 1.28em);
      display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    }
    .pc-bottom{ padding-top:6px; align-items:flex-end; }
    .pc-price{ font-size:13.5px; display:flex; flex-direction:column; align-items:flex-start; gap:1px; }
    .pc-price .old{ font-size:10px; margin-right:0; }
    .pc-add{ width:30px; height:30px; flex-shrink:0; }
    .pc-add svg{ width:13px; height:13px; }
    .pc-tag{ font-size:9px; padding:4px 8px; top:8px; left:8px; }
    .car-nav{ width:36px; height:36px; }
    .g-grid{ grid-template-columns:repeat(3,1fr); gap:8px; }
    .t-stack{ height:340px; }
    .t-card{ padding:24px 22px; }
    .confirm-actions{ flex-direction:column; }
    .confirm-actions .btn{ width:100%; white-space:normal; }
    .checkout-head{ padding:26px 22px 0; }
    .checkout-fields{ padding:16px 22px 4px; }
    .payment-option{ min-width:88px; padding:12px 8px; font-size:11px; }
    .checkout-actions{ padding:16px 22px 24px; }
    .policy-box{ max-height:90vh; border-radius:18px; }
    .policy-head{ padding:22px 22px 14px; }
    .policy-body{ padding:18px 22px 6px; }
    .policy-foot{ padding:14px 22px 22px; }
    .footer-grid{ grid-template-columns:1fr; }
    /* .floating-wa is already hidden and .back-top already repositioned to
       bottom-right at the 980px breakpoint above — this just shrinks the
       back-to-top button a bit further for the narrowest phones. */
    .back-top{ width:40px; height:40px; }
    .back-top svg{ width:15px; height:15px; }
    .stack-carousel{ height:440px; }
    .stack-card{ width:92%; }
    .stack-card-copy{ padding:26px 22px; }
    .stack-card.pos-front{ left:4%; }
    .stack-card.pos-left{ left:0%; }
    .stack-card.pos-right{ left:8%; }
    .festive-card .countdown{ gap:7px; margin-top:14px; }
    .festive-card .cd-box{ min-width:0; flex:1; padding:8px 4px; }
    .festive-card h3{ font-size:21px; margin-top:6px; max-width:230px; }
    .festive-card p{ font-size:12.5px; margin-top:10px; max-width:230px; }
    .festive-card .btn{ margin-top:14px; padding:10px 18px; font-size:12.5px; white-space:normal; text-align:center; }
    .stack-card-copy{ justify-content:flex-start; padding-top:22px; }
  }
  @media (max-width: 400px){
    .festive-card h3{ font-size:18.5px; }
    .festive-card .cd-box{ padding:6px 3px; }
    .cd-box .n{ font-size:19px; }
    .nav-inner{ padding:10px 12px; gap:6px; }
    .logo-mark{ width:38px; height:38px; }
    .logo-text{ font-size:18px; }
    .nav-actions .icon-btn{ width:33px; height:33px; }
    .nav-actions .icon-btn svg{ width:16px; height:16px; }
  }

  /* Below 700px the stacked promo cards peek vertically (above/below) instead of side-to-side.
     Positioned with `transform` alone (no animated `top`) so the browser only has to
     composite, not re-run layout/paint every frame — animating `top` here was the
     cause of the stutter on mobile. */
  @media (max-width: 700px){
    .stack-carousel{ height:460px; }
    .stack-card{ left:50%; top:0; width:92%; height:86%; transform:translate3d(-50%,28px,0); }
    .stack-card.pos-front{ left:50%; transform:translate3d(-50%,28px,0) scale(1); }
    .stack-card.pos-left{ left:50%; transform:translate3d(-50%,0,0) scale(0.95); }
    .stack-card.pos-right{ left:50%; transform:translate3d(-50%,55px,0) scale(0.95); }
    /* Without this, a card rotating into the hidden slot kept its old desktop horizontal
       "left" position while everything else animated vertically, producing a diagonal
       jump. Pinning it to the same centered column keeps the rotation purely vertical. */
    .stack-card.pos-hidden{ left:50%; transform:translate3d(-50%,28px,0) scale(0.92); }
  }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
  }

  /* ============ WISHLIST HEART (on product cards) ============ */
  .pc-wishlist{
    position:absolute; top:10px; right:10px; z-index:3;
    width:34px; height:34px; border-radius:50%;
    background:rgba(255,253,251,0.9); backdrop-filter:blur(4px);
    display:flex; align-items:center; justify-content:center;
    color:var(--ink); box-shadow:var(--shadow-sm);
    transition:transform .25s ease, color .25s ease, background .25s ease;
  }
  .pc-wishlist svg{ width:17px; height:17px; transition:transform .25s ease; }
  .pc-wishlist:hover{ transform:scale(1.1); }
  .pc-wishlist.active{ color:var(--blush-deep); }
  .pc-wishlist.active svg{ fill:var(--blush-deep); transform:scale(1.08); }
  .pc-wishlist.pulse svg{ animation:heartPulse .45s ease; }
  @keyframes heartPulse{ 0%{ transform:scale(1); } 40%{ transform:scale(1.35); } 100%{ transform:scale(1); } }
  @media (max-width:560px){
    .pc-wishlist{ width:29px; height:29px; top:7px; right:7px; }
    .pc-wishlist svg{ width:14px; height:14px; }
  }

  /* Wishlist drawer reuses .cart-drawer/.cart-head/.cart-items/.cart-row/.cart-foot styling. */
  .wishlist-move{
    display:inline-flex; align-items:center; justify-content:center;
    font-size:11.5px; color:var(--emerald); font-weight:700; letter-spacing:0.02em;
    margin-top:8px; margin-right:8px; background:transparent; border:1.5px solid var(--emerald);
    border-radius:var(--radius-pill); padding:6px 14px; cursor:pointer; font-family:inherit;
    transition:background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
  }
  .wishlist-move:hover{ background:var(--emerald); color:#fff; transform:translateY(-1px); box-shadow:0 6px 14px rgba(47,74,61,0.3); }
  .wishlist-row-actions{ display:flex; flex-wrap:wrap; }
  .modal-wishlist-btn{
    position:absolute; top:16px; left:16px; width:38px; height:38px; border-radius:50%;
    background:var(--paper); display:flex; align-items:center; justify-content:center;
    box-shadow:var(--shadow-sm); z-index:2; color:var(--ink);
    transition:color .25s ease, transform .2s ease;
  }
  .modal-wishlist-btn svg{ width:18px; height:18px; }
  .modal-wishlist-btn:hover{ transform:scale(1.08); }
  .modal-wishlist-btn.active{ color:var(--blush-deep); }
  .modal-wishlist-btn.active svg{ fill:var(--blush-deep); }

  /* ============ BOTTOM NAV (mobile + desktop) ============ */
  .bottom-nav{
    display:flex;
    position:fixed; left:0; right:0; bottom:0; z-index:300;
    background:rgba(255,253,251,0.98); backdrop-filter:blur(10px);
    border-top:1px solid var(--line);
    box-shadow:0 -8px 24px rgba(36,22,35,0.08);
    padding:8px 4px calc(8px + env(safe-area-inset-bottom));
    justify-content:center;
    transition:box-shadow .3s ease;
  }
  .bn-inner{
    display:flex; align-items:stretch; justify-content:space-between;
    width:100%; max-width:560px; gap:2px;
  }
  .bn-item{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:3px; padding:4px 2px; color:var(--ink-soft); text-align:center;
    transition:color .2s ease, transform .2s ease, background .2s ease;
  }
  .bn-item:active{ transform:scale(0.93); }
  .bn-item.active{ color:var(--ink); }
  .bn-item.active .bn-icon{ color:var(--gold); }
  .bn-icon{ position:relative; display:flex; align-items:center; justify-content:center; width:24px; height:24px; }
  .bn-icon svg{ width:22px; height:22px; }
  .bn-item.active .bn-icon svg{ transform:translateY(-1px); }
  .bn-label{ font-size:10.5px; font-weight:700; letter-spacing:0.01em; }
  .bn-badge{
    position:absolute; top:-5px; right:-8px; background:var(--blush-deep); color:#fff;
    font-size:9.5px; font-weight:700; min-width:15px; height:15px; padding:0 3px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; line-height:1;
  }
  .bn-badge.bump{ animation:countBump .45s ease; }

  /* On desktop/tablet the bar becomes a compact floating pill dock (matching
     the brand's pill-button language) instead of an edge-to-edge strip, so it
     doesn't awkwardly stretch across a wide viewport. */
  @media (min-width:981px){
    .bottom-nav{
      left:50%; right:auto; bottom:22px; transform:translateX(-50%);
      width:max-content; max-width:none;
      border:1px solid var(--line); border-radius:var(--radius-pill);
      padding:7px 10px; box-shadow:var(--shadow-sm);
    }
    .bottom-nav:hover{ box-shadow:var(--shadow); }
    .bn-inner{ max-width:none; gap:2px; }
    .bn-item{
      flex:none; width:72px; padding:7px 6px; border-radius:16px;
    }
    .bn-item:hover{ background:rgba(36,22,35,0.05); color:var(--ink); }
    .bn-item.active{ background:rgba(176,129,58,0.12); }
  }

  @media (max-width:980px){
    body{ padding-bottom:calc(58px + env(safe-area-inset-bottom)); }
    .back-top{ bottom:calc(78px + env(safe-area-inset-bottom)); }
  }
  @media (min-width:981px){
    body{ padding-bottom:88px; }
    .floating-wa{ bottom:100px; }
    .back-top{ bottom:100px; }
  }
  @media (max-width:400px){
    .bn-label{ font-size:9.5px; }
    .bn-icon svg{ width:20px; height:20px; }
  }
  @media (prefers-reduced-motion: reduce){
    .bn-item, .bn-icon svg, .pc-wishlist, .pc-wishlist svg{ transition:none; }
    .bn-badge.bump, .pc-wishlist.pulse svg{ animation:none; }
  }

  /* ============ FLICKER FIX — STATIC UI / OVERLAY REPAINT GUARD ============
     Keeps the rating badge and overlay contents visually stable. The existing
     layout, markup and interactions remain unchanged; only unnecessary visual
     transitions/repaints are disabled while these UI layers are open. */
  .hv-tag,
  .hv-tag-dot,
  .hv-tag .t1,
  .hv-tag .t2{
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
  }

  /* Do not animate the overlay itself or its dialog while opening/closing.
     This removes the one-frame scale/opacity flash that can look like flicker. */
  #profileModalScrim,
  #profileModalScrim .profile-dropdown,
  #checkoutFormScrim,
  #checkoutFormScrim .confirm-box{
    transition:none !important;
  }

  /* Keep the already-open page underneath completely still while an overlay
     is visible. This prevents animated background layers from triggering
     repeated compositor repaints through the translucent scrim. */
  body:has(#profileModalScrim.open) .offer-slideshow .offer-slide,
  body:has(#checkoutFormScrim.open) .offer-slideshow .offer-slide,
  body:has(#profileModalScrim.open) .price-current,
  body:has(#checkoutFormScrim.open) .price-current,
  body:has(#profileModalScrim.open) .brand-tagline h2,
  body:has(#checkoutFormScrim.open) .brand-tagline h2{
    animation-play-state:paused !important;
  }

  /* Prevent compositor promotion/repaint instability on the two modal layers. */
  #profileModalScrim,
  #checkoutFormScrim{
    isolation:isolate;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
  }
  #profileModalScrim .profile-dropdown,
  #checkoutFormScrim .confirm-box{
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
  }

  /* ============ FLICKER FIX — SEARCH / CART OPEN STATES ============ */
  #searchPanel,
  #cartDrawer{
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    isolation:isolate;
  }

  body:has(#searchPanel.open) .offer-slideshow .offer-slide,
  body:has(#searchPanel.open) .price-current,
  body:has(#searchPanel.open) .brand-tagline h2,
  body:has(#cartDrawer.open) .offer-slideshow .offer-slide,
  body:has(#cartDrawer.open) .price-current,
  body:has(#cartDrawer.open) .brand-tagline h2{
    animation-play-state:paused !important;
  }

/* ---- Part 2: maintenance cover page ---- */
  /* Scoped entirely to the maintenance cover page — none of these
     selectors touch any existing class/id used elsewhere on the site. */
  #maintenancePage{
    display:none;
    position:fixed; inset:0; z-index:99999;
    background:
      radial-gradient(circle at 18% 15%, rgba(231,182,186,0.55), transparent 55%),
      radial-gradient(circle at 85% 85%, rgba(47,74,61,0.18), transparent 55%),
      linear-gradient(160deg, var(--ivory), var(--paper) 60%);
    align-items:center; justify-content:center;
    padding:28px;
    font-family:'Manrope',sans-serif;
    text-align:center;
    overflow-y:auto;
  }
  html.maint-on{ overflow:hidden; }
  html.maint-on #maintenancePage{ display:flex; }

  .maint-card{
    max-width:520px; width:100%;
    padding:56px 40px 44px;
    background:var(--paper);
    border-radius:28px;
    border:1px solid var(--line);
    box-shadow:var(--shadow);
    position:relative;
  }

  .maint-badge{
    width:88px; height:88px; margin:0 auto 26px;
    border-radius:50%;
    background:conic-gradient(from 200deg, var(--blush), var(--gold), var(--emerald), var(--blush));
    display:flex; align-items:center; justify-content:center;
    border:3px solid var(--paper);
    box-shadow:0 10px 26px rgba(36,22,35,0.22), 0 0 0 1.5px var(--gold-soft);
    animation: maintSpin 7s linear infinite;
  }
  .maint-badge img{
    width:70px; height:70px; border-radius:50%; object-fit:cover;
    display:block;
    animation: maintSpinBack 7s linear infinite;
  }
  @keyframes maintSpin{ to{ transform:rotate(360deg); } }
  @keyframes maintSpinBack{ to{ transform:rotate(-360deg); } }

  .maint-eyebrow{
    font-weight:700; font-size:12.5px; letter-spacing:0.08em;
    text-transform:uppercase; color:var(--emerald);
    display:inline-flex; align-items:center; gap:8px; margin-bottom:16px;
  }
  .maint-eyebrow::before, .maint-eyebrow::after{
    content:''; width:16px; height:1px; background:var(--emerald);
  }

  .maint-card h1{
    font-family:'Fraunces',serif; font-weight:500; font-size:clamp(26px,4.2vw,34px);
    color:var(--ink); letter-spacing:-0.01em; line-height:1.25; margin-bottom:14px;
  }

  .maint-card p{
    color:var(--ink-soft); font-size:15.5px; line-height:1.65;
    max-width:400px; margin:0 auto;
  }

  /* Plain, simple line sitting under the elegant copy above — same
     scoped block, does not touch .maint-card p's own styling. */
  .maint-plain{
    margin-top:16px !important;
    font-size:16px !important;
    font-weight:800;
    color:var(--ink) !important;
    letter-spacing:0.01em;
    opacity:1;
  }

  .maint-dots{
    display:flex; align-items:center; justify-content:center; gap:8px;
    margin:26px 0;
  }
  .maint-dots i{
    width:8px; height:8px; border-radius:50%; background:var(--gold);
    display:inline-block; animation: maintBounce 1.2s ease-in-out infinite;
  }
  .maint-dots i:nth-child(1){ background:var(--blush-deep); animation-delay:0s; }
  .maint-dots i:nth-child(2){ background:var(--gold); animation-delay:0.15s; }
  .maint-dots i:nth-child(3){ background:var(--emerald); animation-delay:0.3s; }
  @keyframes maintBounce{
    0%,60%,100%{ transform:translateY(0); opacity:0.55; }
    30%{ transform:translateY(-7px); opacity:1; }
  }

  .maint-actions{
    display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
    gap:12px; margin-top:8px;
  }
  .maint-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:13px 26px; border-radius:999px;
    font-weight:600; font-size:14px; letter-spacing:0.01em;
    transition:transform .25s ease, box-shadow .25s ease;
    text-decoration:none;
  }
  .maint-btn-whatsapp{ background:var(--emerald); color:var(--ivory); }
  .maint-btn-whatsapp:hover{ background:var(--emerald-soft); transform:translateY(-2px); box-shadow:0 12px 24px rgba(47,74,61,0.3); }
  .maint-btn-outline{ background:transparent; color:var(--ink); border:1.5px solid var(--ink); }
  .maint-btn-outline:hover{ background:var(--ink); color:var(--ivory); transform:translateY(-2px); }

  .maint-footnote{
    margin-top:28px; font-size:12.5px; color:var(--ink-soft); opacity:0.7;
  }

  @media (max-width:480px){
    .maint-card{ padding:44px 24px 34px; border-radius:22px; }
  }


/* ============ SAVED ADDRESSES (account popup + checkout picker) ============ */
  .profile-menu-item + .profile-menu-item{ margin-top:10px; }
  .profile-dropdown.addr-mode{ width:min(430px,100%); max-height:min(88vh,660px); max-height:min(88dvh,660px); }
  #profileAddressView{ display:flex; flex-direction:column; flex:1; min-height:0; }
  .addr-scroll{ overflow-y:auto; -webkit-overflow-scrolling:touch; flex:1; min-height:0; padding-right:2px; overscroll-behavior:contain; }
  .addr-list{ display:flex; flex-direction:column; gap:10px; }
  .addr-card{ border:1px solid var(--line); border-radius:14px; padding:12px 14px; background:var(--ivory); }
  .addr-card.is-default{ border-color:var(--emerald); background:rgba(47,74,61,0.06); }
  .addr-top{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; font-size:14px; font-weight:700; color:var(--ink); }
  .addr-name{ word-break:break-word; }
  .addr-badge, .addr-label{ font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:3px 8px; border-radius:var(--radius-pill); }
  .addr-badge{ background:var(--emerald); color:#fff; }
  .addr-label{ background:rgba(176,129,58,0.16); color:var(--gold); }
  .addr-lines{ margin-top:6px; font-size:13px; line-height:1.5; color:var(--ink-soft); word-break:break-word; }
  .addr-phone{ margin-top:4px; font-size:12px; color:var(--ink-soft); }
  .addr-actions, .addr-confirm{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:10px; }
  .addr-confirm span{ font-size:12.5px; font-weight:600; color:var(--ink-soft); margin-right:auto; }
  .addr-act{ min-height:36px; padding:7px 14px; border-radius:var(--radius-pill); border:1px solid var(--line); background:var(--paper); font:600 12.5px 'Manrope',sans-serif; color:var(--ink-soft); cursor:pointer; transition:background .2s ease, color .2s ease, border-color .2s ease; }
  .addr-act:hover, .addr-act:focus-visible{ background:var(--ink); color:var(--ivory); border-color:var(--ink); }
  .addr-act.addr-primary{ border-color:var(--emerald); color:var(--emerald); }
  .addr-act.addr-primary:hover, .addr-act.addr-primary:focus-visible{ background:var(--emerald); color:#fff; border-color:var(--emerald); }
  .addr-act.addr-danger{ color:var(--blush-deep); }
  .addr-act.addr-danger:hover, .addr-act.addr-danger:focus-visible{ background:var(--blush-deep); color:#fff; border-color:var(--blush-deep); }
  .addr-add{ width:100%; margin-top:12px; min-height:46px; padding:12px 14px; border:1.5px dashed var(--gold); border-radius:14px; background:transparent; font:700 14px 'Manrope',sans-serif; color:var(--gold); cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; transition:background .2s ease; }
  .addr-add span{ font-size:18px; line-height:1; }
  .addr-add:hover, .addr-add:focus-visible{ background:rgba(228,201,138,0.22); }
  .addr-add[disabled]{ opacity:.45; cursor:not-allowed; }
  .addr-limit{ margin-top:10px; font-size:12px; color:var(--ink-soft); text-align:center; }
  .addr-form{ display:flex; flex-direction:column; gap:12px; padding-bottom:4px; }
  .addr-field label, .addr-check span{ font-size:11px; font-weight:700; letter-spacing:.05em; color:var(--ink-soft); text-transform:uppercase; }
  .addr-field label{ display:block; margin-bottom:6px; }
  .addr-field input{ width:100%; padding:12px 14px; border:1.5px solid var(--line); border-radius:12px; font-family:'Manrope',sans-serif; font-size:14px; color:var(--ink); background:var(--ivory); transition:border-color .2s ease; }
  .addr-field input:focus{ outline:none; border-color:var(--gold); }
  .addr-field input.field-invalid{ border-color:var(--blush-deep); }
  .addr-err{ display:block; min-height:14px; margin-top:4px; font-size:12px; font-weight:700; color:var(--blush-deep); }
  .addr-check{ display:flex; align-items:center; gap:10px; cursor:pointer; padding:4px 0; }
  .addr-check input, .co-save-row input{ width:18px; height:18px; accent-color:var(--emerald); flex-shrink:0; margin:0; }
  .addr-form-actions{ display:flex; gap:10px; margin-top:4px; }
  .addr-form-actions .btn{ flex:1; padding:13px 16px; }

  /* checkout: saved address picker */
  .co-saved[hidden], .co-save-row[hidden]{ display:none; }
  .co-saved-title{ display:block; margin-bottom:8px; font-size:11px; font-weight:700; letter-spacing:.05em; color:var(--ink-soft); text-transform:uppercase; }
  .co-saved-list{ display:flex; flex-direction:column; gap:8px; max-height:236px; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding:2px; }
  .co-addr{ display:flex; align-items:flex-start; gap:12px; width:100%; text-align:left; padding:11px 14px; border:1.5px solid var(--line); border-radius:14px; background:var(--ivory); cursor:pointer; font-family:'Manrope',sans-serif; color:var(--ink); transition:border-color .2s ease, background .2s ease; }
  .co-addr:hover{ border-color:var(--gold); }
  .co-addr.selected{ border-color:var(--emerald); background:rgba(47,74,61,0.07); }
  .co-radio{ width:18px; height:18px; border-radius:50%; border:2px solid var(--line); flex-shrink:0; margin-top:2px; position:relative; background:var(--paper); }
  .co-addr.selected .co-radio{ border-color:var(--emerald); }
  .co-addr.selected .co-radio::after{ content:""; position:absolute; inset:3px; border-radius:50%; background:var(--emerald); }
  .co-addr-main{ display:flex; flex-direction:column; gap:3px; min-width:0; flex:1; }
  .co-addr-top{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; font-size:13.5px; }
  .co-addr-top b{ font-weight:700; }
  .co-addr-top i, .co-addr-top em{ font-style:normal; font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:2px 7px; border-radius:var(--radius-pill); }
  .co-addr-top i{ background:rgba(176,129,58,0.16); color:var(--gold); }
  .co-addr-top em{ background:var(--emerald); color:#fff; }
  .co-addr-text{ font-size:12.5px; line-height:1.45; color:var(--ink-soft); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .co-addr-phone{ font-size:12px; color:var(--ink-soft); }
  .co-addr-new{ align-items:center; border-style:dashed; }
  .co-addr-new .co-radio{ margin-top:0; }
  .co-addr-new b{ color:var(--gold); }
  .checkout-form .co-save-row label{ display:flex; align-items:center; gap:10px; margin:0; font-size:12.5px; font-weight:600; letter-spacing:0; text-transform:none; color:var(--ink-soft); cursor:pointer; }

  @media (max-width:640px){
    .profile-dropdown.addr-mode{ padding:18px 16px; }
    .addr-field input{ font-size:16px; }                    /* stops iOS zooming into the field */
    .addr-act{ min-height:40px; }
    .addr-form-actions{ flex-direction:column-reverse; }
    .co-saved-list{ max-height:210px; }
  }
  @media (hover:none){ .addr-act:hover{ background:var(--paper); color:var(--ink-soft); border-color:var(--line); } .addr-act.addr-primary:hover{ color:var(--emerald); border-color:var(--emerald); } .addr-act.addr-danger:hover{ color:var(--blush-deep); } }