:root{
    --ink:#1F1626;
    --ivory:#FBF6EE;
    --ivory-deep:#F3ECDD;
    --marigold:#E2952E;
    --peacock:#0F5C56;
    --rani:#C93B6B;
    --gold:#B8935F;
    --line:#E7DFCF;
    --muted:#7A7182;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Work Sans',sans-serif;
    background:var(--ivory);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{
    font-family:'Fraunces',serif;
    font-weight:600;
    line-height:1.05;
  }
  a{color:inherit;text-decoration:none;}
  img,svg{display:block;max-width:100%;}
  .wrap{max-width:1240px;margin:0 auto;padding:0 28px;}
  button{font-family:'Work Sans',sans-serif;cursor:pointer;border:none;}

  /* ---------------- utility bar ---------------- */
  .utility-bar{
    background:var(--ink);
    color:var(--ivory);
    font-size:12.5px;
    letter-spacing:.03em;
  }
  .utility-bar .wrap{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-top:9px;padding-bottom:9px;
    gap:16px;
    flex-wrap:wrap;
  }
  .utility-bar .ticker{display:flex;gap:28px;flex-wrap:wrap;}
  .utility-bar .ticker span{opacity:.85;}
  .utility-bar .ticker strong{color:var(--marigold);font-weight:600;}

  /* ---------------- header ---------------- */
  header.site{
    background:var(--ivory);
    border-bottom:1px solid var(--line);
    position:sticky;top:0;z-index:50;
  }
  header.site .wrap{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-top:18px;padding-bottom:18px;
  }
  .logo{
    font-family:'Fraunces',serif;
    font-size:26px;
    font-weight:700;
    letter-spacing:.01em;
  }
  .logo span{color:var(--rani);}
  nav.primary{display:flex;gap:34px;font-size:14.5px;font-weight:500;}
  nav.primary a{position:relative;padding-bottom:4px;}
  nav.primary a.women::after,nav.primary a.men::after,nav.primary a.kids::after,nav.primary a.jewelry::after{
    content:"";position:absolute;left:0;bottom:0;width:0;height:2px;
    transition:width .25s ease;
  }
  nav.primary a.women::after{background:var(--rani);}
  nav.primary a.men::after{background:var(--peacock);}
  nav.primary a.kids::after{background:var(--marigold);}
  nav.primary a.jewelry::after{background:var(--gold);}
  nav.primary a:hover::after{width:100%;}

  /* ---------------- mega menu ---------------- */
  .nav-item{display:flex;}
  .nav-item > a{display:flex;align-items:center;gap:5px;}
  .nav-item .chevron{
    width:9px;height:9px;
    border-right:1.5px solid currentColor;
    border-bottom:1.5px solid currentColor;
    transform:rotate(45deg) translateY(-2px);
    opacity:.55;
    transition:transform .2s ease;
  }
  .nav-item:hover .chevron,.nav-item:focus-within .chevron{transform:rotate(225deg) translateY(2px);}

  /*
   * The mega menu is deliberately positioned relative to header.site (which
   * already has position:sticky, making it a valid containing block) rather
   * than to the individual .nav-item that triggered it. Anchoring per-item
   * with width:100vw + left:50%/transform centering is a common mega-menu
   * technique but it's fragile: it silently breaks (renders off-position or
   * effectively invisible even though opacity/visibility read correctly)
   * the moment there's a transformed ancestor, a differently-structured
   * header wrapper, or anything else between the item and the viewport that
   * changes the positioning math - all common on real themes we don't
   * control. Spanning the full header width instead sidesteps that
   * entirely: every mega menu opens as one consistent bar directly under
   * the header, and .mega-inner below re-centers the actual content to the
   * site's normal content width.
   */
  .mega-menu{
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    background:var(--ivory);
    border:1px solid var(--line);
    border-top:3px solid var(--rani);
    box-shadow:0 24px 48px rgba(31,22,38,.14);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
    transform:translateY(8px);
    z-index:60;
  }
  .nav-item.men .mega-menu{border-top-color:var(--peacock);}
  .nav-item.kids .mega-menu{border-top-color:var(--marigold);}
  .nav-item.jewelry .mega-menu{border-top-color:var(--gold);}

  .nav-item:hover .mega-menu,
  .nav-item:focus-within .mega-menu{
    opacity:1;visibility:visible;pointer-events:auto;
    transform:translateY(0);
  }

  .mega-inner{
    display:flex;gap:48px;
    max-width:1240px;margin:0 auto;
    padding:36px 28px;
  }
  .mega-col{flex:1;min-width:0;}
  .mega-col h5{
    font-size:11px;letter-spacing:.12em;text-transform:uppercase;
    color:var(--muted);margin-bottom:14px;font-weight:600;
  }
  .mega-col ul{list-style:none;line-height:2.3;font-size:14px;}
  .mega-col a:hover{text-decoration:underline;}

  .mega-promo{
    flex:0 0 250px;
    padding:24px;
    display:flex;flex-direction:column;justify-content:space-between;
    min-height:190px;
    color:#fff;
    text-decoration:none; /* .mega-promo is now a clickable <a>, not a div */
  }
  .mega-promo p.eyebrow{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.85;margin-bottom:8px;}
  .mega-promo h4{font-family:'Fraunces',serif;font-size:19px;margin-bottom:6px;}
  .mega-promo span.link{font-size:12.5px;font-weight:600;text-decoration:underline;}

  .nav-item.women .mega-promo{background:linear-gradient(160deg,#dd5484,var(--rani) 70%);}
  .nav-item.men .mega-promo{background:linear-gradient(160deg,#1c7d75,var(--peacock) 70%);}
  .nav-item.kids .mega-promo{background:linear-gradient(160deg,#f0ac52,var(--marigold) 70%);}
  .nav-item.jewelry .mega-promo{background:linear-gradient(160deg,#d4b483,var(--gold) 70%);}

  @media(max-width:1140px){
    .mega-inner{flex-wrap:wrap;padding:28px 20px;}
    .mega-promo{flex:1 1 100%;min-height:120px;}
  }
  .header-icons{display:flex;gap:20px;align-items:center;}
  .header-icons button{background:none;color:var(--ink);}
  .icon-cart-count{
    display:inline-flex;align-items:center;justify-content:center;
    width:16px;height:16px;border-radius:50%;
    background:var(--rani);color:#fff;font-size:10px;
    margin-left:3px;position:relative;top:-6px;
  }

  @media(max-width:860px){
    nav.primary{display:none;}
  }

  /* ---------------- hero: three draped panels ---------------- */
  .hero{
    position:relative;
    padding:64px 0 0;
    overflow:hidden;
  }
  .hero-intro{
    text-align:center;
    max-width:640px;
    margin:0 auto 44px;
    padding:0 24px;
  }
  .hero-eyebrow{
    font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;
    color:var(--rani);font-weight:600;margin-bottom:14px;
  }
  .hero-intro h1{
    font-size:clamp(32px,5vw,52px);
    margin-bottom:16px;
  }
  .hero-intro p{
    color:var(--muted);font-size:16px;line-height:1.6;
  }

  .drape-row{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
  }
  @media(max-width:780px){
    .drape-row{grid-template-columns:1fr;}
  }
  .drape{
    position:relative;
    min-height:420px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:32px 28px;
    color:#fff;
    overflow:hidden;
    isolation:isolate;
  }
  .drape.women{background:linear-gradient(165deg,#dd5484,var(--rani) 60%,#8f2650);}
  .drape.men{background:linear-gradient(165deg,#1c7d75,var(--peacock) 60%,#093f3b);}
  .drape.kids{background:linear-gradient(165deg,#f0ac52,var(--marigold) 60%,#b4711a);}

  /* Real photography drops in here later - just swap the img's src.
     The gradient on .drape above is the fallback/loading background,
     and .drape-overlay is a colour wash so the white text stays legible
     over any photo without needing a fixed dark corner in every shot. */
  .drape-photo{
    position:absolute;inset:0;
    width:100%;height:100%;
    object-fit:cover;
    z-index:0;
  }
  .drape-overlay{
    position:absolute;inset:0;
    z-index:0;
  }
  .drape.women .drape-overlay{background:linear-gradient(165deg,rgba(221,84,132,.55),rgba(143,38,80,.75) 75%);}
  .drape.men .drape-overlay{background:linear-gradient(165deg,rgba(28,125,117,.55),rgba(9,63,59,.75) 75%);}
  .drape.kids .drape-overlay{background:linear-gradient(165deg,rgba(240,172,82,.5),rgba(180,113,26,.72) 75%);}

  .drape .pattern{
    position:absolute;inset:0;
    opacity:.12;
    z-index:1;
    pointer-events:none;
  }
  .drape .drape-eyebrow{
    font-size:11px;letter-spacing:.18em;text-transform:uppercase;
    opacity:.85;margin-bottom:8px;position:relative;z-index:2;
  }
  .drape h2{
    font-size:28px;margin-bottom:10px;position:relative;z-index:2;
  }
  .drape p{
    font-size:14px;opacity:.9;margin-bottom:20px;max-width:230px;position:relative;z-index:2;
  }
  .drape .shop-btn{
    position:relative;z-index:2;
    display:inline-flex;align-items:center;gap:8px;
    background:rgba(255,255,255,.95);
    color:var(--ink);
    padding:11px 18px;
    font-size:13px;font-weight:600;
    letter-spacing:.02em;
    width:fit-content;
    transition:transform .2s ease;
  }
  .drape .shop-btn:hover{transform:translateX(4px);}

  /* wave divider */
  .wave-divider{
    display:block;width:100%;height:46px;
  }

  /* ---------------- trust ribbon ---------------- */
  .trust-ribbon{
    background:var(--ivory-deep);
    border-top:1px dashed var(--line);
    border-bottom:1px dashed var(--line);
    padding:22px 0;
  }
  .trust-ribbon .wrap{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
    text-align:center;
  }
  @media(max-width:780px){
    .trust-ribbon .wrap{grid-template-columns:repeat(2,1fr);}
  }
  .trust-item{
    font-size:13px;font-weight:500;color:var(--ink);
    display:flex;flex-direction:column;align-items:center;gap:8px;
  }
  .trust-item svg{width:22px;height:22px;color:var(--rani);}

  /* ---------------- festive banner ---------------- */
  .festive{
    background:var(--ink);
    color:var(--ivory);
    padding:80px 0;
    position:relative;
    overflow:hidden;
  }
  .festive .wrap{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
    align-items:center;
    position:relative;
    z-index:1;
  }
  @media(max-width:780px){
    .festive .wrap{grid-template-columns:1fr;text-align:center;}
  }
  .festive-eyebrow{
    font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;
    color:var(--marigold);font-weight:600;margin-bottom:16px;
  }
  .festive h2{
    font-size:clamp(30px,4.4vw,46px);
    margin-bottom:18px;
  }
  .festive p{color:#d9d0e0;font-size:15.5px;line-height:1.7;margin-bottom:26px;max-width:420px;}
  @media(max-width:780px){.festive p{margin:0 auto 26px;}}
  .festive .cta{
    background:var(--marigold);
    color:var(--ink);
    padding:15px 26px;
    font-size:13.5px;font-weight:700;
    letter-spacing:.04em;text-transform:uppercase;
  }
  .festive-motif{
    display:flex;justify-content:center;
  }

  /* ---------------- category grid ---------------- */
  .categories{padding:84px 0 20px;}
  .section-head{
    display:flex;justify-content:space-between;align-items:flex-end;
    margin-bottom:36px;flex-wrap:wrap;gap:12px;
  }
  .section-head h2{font-size:30px;}
  .section-head .see-all{font-size:13.5px;font-weight:600;color:var(--rani);border-bottom:1px solid var(--rani);padding-bottom:2px;}

  .cat-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
  }
  @media(max-width:980px){.cat-grid{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:560px){.cat-grid{grid-template-columns:1fr;}}

  .cat-card{
    position:relative;
    border:1px solid var(--line);
    padding:24px;
    min-height:260px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    transition:box-shadow .25s ease, transform .25s ease;
    background:var(--ivory);
  }
  .cat-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(31,22,38,.1);}
  .cat-thumb{
    width:100%;
    aspect-ratio:4/3;
    object-fit:cover;
    margin-bottom:16px;
  }
  .cat-card .accent-bar{width:34px;height:3px;margin-bottom:16px;}
  .cat-card.women .accent-bar{background:var(--rani);}
  .cat-card.men .accent-bar{background:var(--peacock);}
  .cat-card.kids .accent-bar{background:var(--marigold);}
  .cat-card.jewelry .accent-bar{background:var(--gold);}
  .cat-card h3{font-size:20px;margin-bottom:10px;}
  .cat-card ul{list-style:none;font-size:13.5px;color:var(--muted);line-height:2;}
  .cat-card .cat-link{
    margin-top:18px;font-size:13px;font-weight:600;
    display:inline-flex;align-items:center;gap:6px;
  }
  .cat-card.women .cat-link{color:var(--rani);}
  .cat-card.men .cat-link{color:var(--peacock);}
  .cat-card.kids .cat-link{color:var(--marigold);}
  .cat-card.jewelry .cat-link{color:var(--gold);}

  /* ---------------- bestsellers ---------------- */
  .bestsellers{padding:88px 0;}
  .product-row{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:22px;
  }
  @media(max-width:900px){.product-row{grid-template-columns:repeat(2,1fr);}}
  .product-card{border:1px solid var(--line);}
  .product-img{
    aspect-ratio:3/4;
    display:flex;align-items:center;justify-content:center;
    position:relative;
    overflow:hidden;
  }
  .product-img img{
    position:absolute;inset:0;
    width:100%;height:100%;
    object-fit:cover;
  }
  .product-img .quick-add{
    position:absolute;bottom:0;left:0;right:0;
    background:rgba(31,22,38,.92);
    color:#fff;
    font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
    padding:12px;text-align:center;
    transform:translateY(100%);
    transition:transform .25s ease;
  }
  .product-card:hover .quick-add{transform:translateY(0);}
  .product-body{padding:14px 16px 18px;}
  .product-body .match-hint{
    font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
    color:var(--peacock);margin-bottom:6px;font-weight:600;
  }
  .product-body h4{font-family:'Work Sans',sans-serif;font-weight:600;font-size:14.5px;margin-bottom:5px;}
  .product-body .price{font-size:13.5px;color:var(--muted);}

  /* ---------------- fit assistant ---------------- */
  .fit-assist{
    background:var(--ivory-deep);
    padding:70px 0;
  }
  .fit-assist .wrap{
    display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;
  }
  @media(max-width:780px){.fit-assist .wrap{grid-template-columns:1fr;}}
  .fit-assist h2{font-size:28px;margin-bottom:14px;}
  .fit-assist p{color:var(--muted);font-size:15px;line-height:1.7;margin-bottom:22px;}
  .fit-assist .cta{
    background:var(--ink);color:var(--ivory);
    padding:14px 24px;font-size:13px;font-weight:600;
    letter-spacing:.03em;text-transform:uppercase;
    display:inline-block;
  }
  .fit-visual{
    border:1px solid var(--line);
    background:var(--ivory);
    padding:26px;
    font-size:13.5px;
  }
  .fit-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px dashed var(--line);}
  .fit-row:last-child{border-bottom:none;}
  .fit-row span:last-child{color:var(--peacock);font-weight:600;}

  /* ---------------- social proof ---------------- */
  .proof{padding:88px 0;}
  .proof .section-head h2{font-size:28px;}
  .stars{color:var(--marigold);font-size:15px;margin-bottom:8px;}
  .review-row{
    display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
  }
  @media(max-width:860px){.review-row{grid-template-columns:1fr;}}
  .review-card{
    border:1px solid var(--line);padding:24px;
  }
  .review-card p{font-size:14px;line-height:1.7;color:var(--ink);margin-bottom:14px;}
  .review-card .who{font-size:12.5px;color:var(--muted);}

  /* ---------------- whatsapp signup ---------------- */
  .whatsapp-cta{
    background:var(--peacock);
    color:#fff;
    padding:56px 0;
  }
  .whatsapp-cta .wrap{
    display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
  }
  .whatsapp-cta h3{font-size:23px;margin-bottom:6px;}
  .whatsapp-cta p{font-size:14px;opacity:.85;}
  .whatsapp-form{display:flex;gap:10px;flex-wrap:wrap;}
  .whatsapp-form input{
    padding:13px 16px;border:none;font-size:14px;width:230px;font-family:'Work Sans',sans-serif;
  }
  .whatsapp-form button{
    background:var(--marigold);color:var(--ink);
    padding:13px 22px;font-size:13px;font-weight:700;
    letter-spacing:.03em;text-transform:uppercase;
  }

  /* ---------------- footer ---------------- */
  footer{
    background:var(--ink);color:#cfc6d6;
    padding:64px 0 28px;font-size:13.5px;
  }
  .footer-grid{
    display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;
    margin-bottom:48px;
  }
  @media(max-width:780px){.footer-grid{grid-template-columns:1fr 1fr;}}
  .footer-grid h5{
    color:#fff;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
    margin-bottom:16px;font-weight:600;
  }
  .footer-grid ul{list-style:none;line-height:2.4;}
  .footer-grid a:hover{color:#fff;}
  .footer-brand .logo{color:#fff;font-size:24px;margin-bottom:12px;}
  .footer-brand .logo span{color:var(--rani);}
  .footer-brand p{color:#a89fb0;line-height:1.7;max-width:280px;}
  .footer-bottom{
    border-top:1px solid #362a40;
    padding-top:22px;
    display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
    color:#8f8697;font-size:12.5px;
  }