:root{
    --cream:#FBF4E8;
    --cream-2:#F3E9D6;
    --ink:#241C13;
    --teal:#1F4B45;
    --teal-deep:#153531;
    --marigold:#CC9A3C;
    --marigold-light:#E4BE6E;
    --terracotta:#A6472F;
    --espresso:#2E2015;
    --espresso-2:#3A2A1C;
    --line: rgba(36,28,19,0.14);
    --line-light: rgba(251,244,232,0.18);
  }

  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Jost', sans-serif;
    background:var(--cream);
    color:var(--ink);
    overflow-x:hidden;
    font-weight:400;
  }
  img{max-width:100%;display:block;}
  a{text-decoration:none;color:inherit;}
  .wrap{max-width:1180px;margin:0 auto;padding:0 32px;}

  h1,h2,h3,.serif{font-family:'Fraunces', serif;}

  .eyebrow{
    font-family:'Jost',sans-serif;
    font-size:12.5px;
    letter-spacing:0.22em;
    text-transform:uppercase;
    font-weight:500;
    opacity:0.85;
  }

  /* reveal on scroll */
  .reveal{opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s ease;}
  .reveal.show{opacity:1; transform:translateY(0);}

  @media (prefers-reduced-motion: reduce){
    .reveal{opacity:1; transform:none; transition:none;}
    html{scroll-behavior:auto;}
  }

  /* ============ NAV ============ */
  header{
    position:fixed; top:0; left:0; right:0; z-index:50;
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 36px;
    background:linear-gradient(to bottom, rgba(46,32,21,0.75), rgba(46,32,21,0));
    transition: background .3s ease, padding .3s ease;
  }
  header.scrolled{
    background:var(--cream);
    box-shadow:0 1px 0 var(--line);
    padding:12px 36px;
  }
  .brand-mark{
    display:inline-flex; align-items:center;
    color:var(--cream);
    transition:color .3s ease, opacity .25s ease;
    white-space:nowrap;
  }
  .brand-mark:hover{opacity:.86;}
  header.scrolled .brand-mark{color:var(--ink);}
  .brand-mark .wordmark{
    font-family:'Fraunces',serif;
    font-size:20px;
    line-height:1;
    letter-spacing:0.015em;
    font-weight:600;
  }
  nav{ display:flex; align-items:center; gap:34px; }
  nav ul{display:flex; gap:34px; list-style:none;}
  nav a{
    font-size:13px; letter-spacing:0.14em; text-transform:uppercase;
    color:var(--cream); font-weight:500;
    position:relative; padding-bottom:4px;
    transition:color .3s ease;
  }
  header.scrolled nav a{color:var(--ink);}
  nav a::after{
    content:'';position:absolute;left:0;bottom:0;width:0;height:1px;
    background:currentColor; transition:width .3s ease;
  }
  nav a:hover::after{width:100%;}
  .nav-cta{
    border:1px solid currentColor; padding:9px 18px; border-radius:2px;
  }

  /* mobile nav toggle */
  .nav-toggle{
    display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer;
    padding:6px; z-index:60;
  }
  .nav-toggle span{ width:24px; height:1.5px; background:currentColor; color:inherit; transition:transform .3s ease, opacity .3s ease; }
  .nav-toggle{ color:var(--cream); }
  header.scrolled .nav-toggle{ color:var(--ink); }
  .nav-toggle.open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2){ opacity:0; }
  .nav-toggle.open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

  @media(max-width:820px){
    .nav-toggle{ display:flex; }
    nav ul{
      position:fixed; top:0; right:0; height:100vh; width:min(78vw, 320px);
      background:var(--espresso); flex-direction:column; gap:0;
      padding:110px 36px 40px; transform:translateX(100%);
      transition:transform .4s ease; box-shadow:-10px 0 40px rgba(0,0,0,0.25);
    }
    nav ul.open{ transform:translateX(0); }
    nav ul li{ width:100%; border-bottom:1px solid rgba(251,244,232,0.12); }
    nav ul a{ display:block; padding:18px 0; color:var(--cream) !important; font-size:14px; }
    nav ul .nav-cta{ border:none; padding:18px 0; }
    .nav-scrim{
      display:none; position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:55;
    }
    .nav-scrim.open{ display:block; }
  }

  /* ============ HERO ============ */
  .hero{
    min-height:100vh;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center;
    background:radial-gradient(circle at 30% 20%, #2c5750 0%, var(--teal-deep) 55%, var(--espresso) 100%);
    color:var(--cream);
    position:relative;
    padding:140px 24px 90px;
    overflow:hidden;
  }
  .hero::before{
    content:'';
    position:absolute; inset:0;
    background-image:
      radial-gradient(circle, var(--marigold-light) 1.4px, transparent 1.6px);
    background-size:34px 34px;
    opacity:0.07;
  }
  .hero-ornament{
    width:76px; height:34px; margin-bottom:28px;
    display:flex; align-items:center; justify-content:center; gap:12px;
    color:var(--marigold-light); position:relative; z-index:2;
    animation:fadeUp 1.1s ease both;
  }
  .hero-ornament::before, .hero-ornament::after{
    content:''; width:24px; height:1px; background:currentColor; opacity:.65;
  }
  .hero-ornament span{ font-family:'Fraunces',serif; font-size:17px; line-height:1; }

  .hero-logo{
    width:150px; height:150px; border-radius:50%;
    object-fit:cover; margin-bottom:34px;
    border:1px solid rgba(251,244,232,0.35);
    box-shadow:0 0 0 10px rgba(251,244,232,0.04);
    position:relative; z-index:2;
    animation: fadeUp 1.1s ease both;
  }
  .hero .eyebrow{ color:var(--marigold-light); margin-bottom:22px; position:relative; z-index:2; animation:fadeUp 1.1s .1s ease both;}
  .hero h1{
    font-size:clamp(46px, 8vw, 94px);
    font-weight:600;
    line-height:0.98;
    letter-spacing:-0.01em;
    position:relative; z-index:2;
    animation:fadeUp 1.1s .2s ease both;
  }
  .hero h1 em{
    font-style:italic; font-weight:400; color:var(--marigold-light);
  }
  .hero-sub{
    max-width:520px; margin:26px auto 40px;
    font-family:'Fraunces', serif; font-style:italic; font-weight:400;
    font-size:19px; line-height:1.6; color:rgba(251,244,232,0.86);
    position:relative; z-index:2;
    animation:fadeUp 1.1s .3s ease both;
  }
  .hero-ctas{display:flex; gap:16px; flex-wrap:wrap; justify-content:center; position:relative; z-index:2; animation:fadeUp 1.1s .4s ease both;}
  .btn{
    font-size:12.5px; letter-spacing:0.16em; text-transform:uppercase; font-weight:600;
    padding:16px 30px; border-radius:2px; display:inline-block;
    transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
  }
  .btn-solid{ background:var(--marigold); color:var(--espresso); }
  .btn-solid:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(204,154,60,0.35); }
  .btn-outline{ border:1px solid rgba(251,244,232,0.55); color:var(--cream); }
  .btn-outline:hover{ background:rgba(251,244,232,0.1); transform:translateY(-2px); }

  @keyframes fadeUp{ from{opacity:0; transform:translateY(22px);} to{opacity:1; transform:translateY(0);} }

  .scroll-cue{
    position:absolute; bottom:30px; left:50%; transform:translateX(-50%);
    font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:rgba(251,244,232,0.55);
    display:flex; flex-direction:column; align-items:center; gap:8px; z-index:2;
  }
  .scroll-cue .line{ width:1px; height:34px; background:rgba(251,244,232,0.4); animation:scrollLine 1.8s ease-in-out infinite; }
  @keyframes scrollLine{ 0%{transform:scaleY(0.2);opacity:0;} 40%{transform:scaleY(1);opacity:1;} 100%{transform:scaleY(0.2);opacity:0;} }

  /* ============ MARQUEE ============ */
  .marquee{
    background:var(--marigold); color:var(--espresso);
    overflow:hidden; white-space:nowrap; padding:14px 0;
    border-top:1px solid var(--espresso); border-bottom:1px solid var(--espresso);
  }
  .marquee-track{ display:inline-flex; animation:scrollLeft 32s linear infinite; }
  .marquee span{
    font-family:'Fraunces', serif; font-style:italic; font-weight:500;
    font-size:16px; padding:0 26px; display:inline-flex; align-items:center; gap:26px;
  }
  .marquee span::after{ content:'✦'; font-style:normal; font-size:11px; opacity:0.6; }
  @keyframes scrollLeft{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

  /* ============ DIVIDER (signature flower motif) ============ */
  .divider{ display:flex; align-items:center; justify-content:center; padding:50px 0; }
  .divider svg{ width:150px; height:34px; }

  /* ============ STORY ============ */
  .story{ padding:120px 0 100px; background:var(--cream); }
  .story-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:70px; align-items:center; }
  .story-art{ position:relative; }
  .story-art img{ border-radius:4px; width:100%; }
  .story-art .frame{
    position:absolute; inset:18px -18px -18px 18px; border:1px solid var(--marigold); border-radius:4px; z-index:-1;
  }
  .story h2{ font-size:clamp(32px,4vw,46px); font-weight:600; line-height:1.15; margin-bottom:22px; }
  .story h2 span{ color:var(--terracotta); font-style:italic; font-weight:500; }
  .story p{ font-size:16px; line-height:1.85; color:rgba(36,28,19,0.78); max-width:480px; margin-bottom:16px;}
  .story-signoff{ font-family:'Fraunces',serif; font-style:italic; margin-top:26px; font-size:17px; color:var(--teal); }
  @media(max-width:860px){ .story-grid{ grid-template-columns:1fr; gap:44px; } .story-art .frame{display:none;} }

  /* ============ CHAPTER SECTIONS ============ */
  .chapter{ padding:110px 0; position:relative; }
  .chapter-dark{ background:var(--teal-deep); color:var(--cream); }
  .chapter-espresso{ background:var(--espresso); color:var(--cream); }
  .chapter-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; margin-bottom:56px; flex-wrap:wrap; }
  .chapter-num{ font-family:'Fraunces',serif; font-style:italic; font-size:15px; opacity:0.7; margin-bottom:10px; display:block; }
  .chapter-head h2{ font-size:clamp(34px,5vw,54px); font-weight:600; line-height:1.05; max-width:600px;}
  .chapter-head h2 em{ font-style:italic; font-weight:400; color:var(--marigold-light); }
  .chapter-desc{ max-width:340px; font-size:15px; line-height:1.8; opacity:0.8; }
  .chapter-light .chapter-desc, .chapter-light h2{ color:var(--ink); }
  .chapter-light .chapter-num{ color:var(--terracotta); opacity:1;}

  .product-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:34px; }
  .product-grid.five{ grid-template-columns:repeat(3,1fr); }
  @media(max-width:900px){ .product-grid{ grid-template-columns:1fr 1fr; } }
  @media(max-width:600px){ .product-grid, .product-grid.five{ grid-template-columns:1fr; } }

  .card{
    background:rgba(251,244,232,0.04);
    border:1px solid rgba(251,244,232,0.14);
    border-radius:6px; overflow:hidden;
    transition:transform .4s ease, box-shadow .4s ease, border-color .4s ease;
  }
  .chapter-light .card{ background:#fff; border:1px solid var(--line); }
  .card:hover{ transform:translateY(-8px); box-shadow:0 22px 40px rgba(0,0,0,0.18); }
  .card-img{ aspect-ratio:3/4; overflow:hidden; position:relative; background:#000; }
  .card-img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.card-img.small-clutch img{object-fit:contain;width:78%;height:78%;margin:auto;display:block;}
  .card:hover .card-img img{ transform:scale(1.06); }
  .card-tag{
    position:absolute; top:14px; left:14px; background:var(--marigold); color:var(--espresso);
    font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase; font-weight:600;
    padding:5px 10px; border-radius:2px;
  }
  .card-body{ padding:22px 24px 26px; }
  .card-body h3{ font-size:20px; font-weight:600; margin-bottom:6px; }
  .card-body .desc{ font-size:13.5px; line-height:1.6; opacity:0.75; margin-bottom:16px; min-height:38px;}
  .card-foot{ display:flex; align-items:center; justify-content:space-between; }
  .price{ font-family:'Fraunces',serif; font-style:italic; font-size:15px; opacity:0.9; }
  .ask{
    font-size:11.5px; letter-spacing:0.12em; text-transform:uppercase; font-weight:600;
    color:var(--marigold-light); border-bottom:1px solid transparent; padding-bottom:2px;
    transition:border-color .25s ease;
  }
  .chapter-light .ask{ color:var(--terracotta); }
  .card:hover .ask{ border-color:currentColor; }

  .placeholder-img{
    width:100%; height:100%;
    background:
      repeating-linear-gradient(135deg, rgba(166,71,47,0.07) 0 2px, transparent 2px 26px),
      var(--cream-2);
    display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px;
    text-align:center; padding:20px;
  }
  .placeholder-img svg{ width:46px; height:46px; opacity:0.55; }
  .placeholder-img span{
    font-family:'Fraunces',serif; font-style:italic; font-size:13.5px; color:var(--terracotta); opacity:0.75;
  }

  /* ============ GALLERY STRIP ============ */
  .gallery{ background:var(--cream-2); padding:90px 0; overflow:hidden; }
  .gallery .wrap > .eyebrow{ text-align:center; display:block; color:var(--terracotta); margin-bottom:8px;}
  .gallery h2{ text-align:center; font-size:clamp(28px,4vw,40px); font-weight:600; margin-bottom:50px; }
  .gallery-row{ display:flex; gap:18px; }
  .gallery-row img{
    width:170px; height:220px; object-fit:cover; border-radius:6px; flex-shrink:0;
    filter:saturate(0.92); transition:filter .3s ease, transform .3s ease;
  }
  .gallery-row img:hover{ filter:saturate(1.1); transform:translateY(-6px); }
  .gallery-scroll{ overflow-x:auto; padding-bottom:10px; scrollbar-width:thin; }
  .gallery-scroll::-webkit-scrollbar{ height:5px; }
  .gallery-scroll::-webkit-scrollbar-thumb{ background:var(--marigold); border-radius:10px; }

  /* ============ NEWSLETTER / CONTACT ============ */
  .join{ background:var(--cream); padding:120px 0; text-align:center; }
  .join .eyebrow{ color:var(--terracotta); }
  .join h2{ font-size:clamp(32px,5vw,52px); font-weight:600; max-width:640px; margin:16px auto 20px; line-height:1.15;}
  .join p{ max-width:480px; margin:0 auto 38px; color:rgba(36,28,19,0.72); font-size:15.5px; line-height:1.7; }
  .join-form{ display:flex; gap:12px; justify-content:center; max-width:460px; margin:0 auto 46px; flex-wrap:wrap; }
  .join-form input{
    flex:1; min-width:220px; padding:15px 18px; border:1px solid var(--line); border-radius:2px;
    font-family:'Jost',sans-serif; font-size:14px; background:#fff;
  }
  .join-form input:focus{ outline:2px solid var(--marigold); outline-offset:1px; }
  .join-form button{
    background:var(--teal); color:var(--cream); border:none; padding:15px 26px; border-radius:2px;
    font-size:12.5px; letter-spacing:0.14em; text-transform:uppercase; font-weight:600; cursor:pointer;
    transition:background .25s ease;
  }
  .join-form button:hover{ background:var(--teal-deep); }
  .join-note{ font-size:12px; opacity:0.55; margin-top:-30px; }

  .contact-row{ display:flex; gap:40px; justify-content:center; flex-wrap:wrap; margin-top:40px;}
  .contact-item{ text-align:left; }
  .contact-item .eyebrow{ color:var(--terracotta); margin-bottom:6px; display:block; }
  .contact-item a, .contact-item span{ font-family:'Fraunces',serif; font-size:18px; }

  /* ============ FOOTER ============ */
  footer{ background:var(--espresso); color:rgba(251,244,232,0.75); padding:70px 0 30px; }
  .footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:50px; margin-bottom:60px; }
  @media(max-width:760px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
  .footer-brand{ font-family:'Fraunces',serif; font-size:26px; font-weight:600; color:var(--cream); margin-bottom:14px; }
  .footer-brand span{ color:var(--marigold-light); font-style:italic; font-weight:400; }
  .footer-tag{ font-size:13.5px; line-height:1.7; opacity:0.7; max-width:260px; }
  .footer-col h4{ font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--marigold-light); margin-bottom:16px; font-weight:600;}
  .footer-col ul{ list-style:none; display:flex; flex-direction:column; gap:10px; }
  .footer-col a{ font-size:14px; opacity:0.8; transition:opacity .2s ease; }
  .footer-col a:hover{ opacity:1; color:var(--marigold-light); }
  .footer-bottom{
    border-top:1px solid rgba(251,244,232,0.14); padding-top:26px;
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
    font-size:12.5px; opacity:0.55;
  }

  section .wrap{ position:relative; }

  @media(max-width:480px){
    header{ padding:14px 20px; }
    .wrap{ padding:0 20px; }
    .brand-mark .wordmark{ display:inline; font-size:17px; }
    .hero{ padding:120px 18px 70px; }
    .hero-ctas{ flex-direction:column; width:100%; }
    .hero-ctas .btn{ width:100%; text-align:center; }
    .footer-grid{ grid-template-columns:1fr; gap:38px; }
    .gallery-row img{ width:130px; height:170px; }
    .chapter{ padding:80px 0; }
    .chapter-head{ margin-bottom:40px; }
    .story{ padding:90px 0 70px; }
  }

.card{backdrop-filter:blur(4px);}
.card-img img{object-position:center;}
.card:hover{box-shadow:0 28px 50px rgba(0,0,0,.22);}



/* ===== Boutique homepage refresh ===== */
body{background:#FBF4E8;}
.marquee{position:relative;z-index:80;background:var(--teal-deep);color:var(--marigold-light);border:0;padding:11px 0;}
.marquee span{font-size:14px;letter-spacing:.01em;padding:0 24px;}
header{position:sticky;top:0;padding:18px 42px;background:rgba(251,244,232,.96);box-shadow:0 1px 0 var(--line);backdrop-filter:blur(12px);}
header.scrolled{padding:14px 42px;background:rgba(251,244,232,.97);}
.brand-mark,.full-wordmark,header.scrolled .brand-mark{color:var(--teal-deep);}
.full-wordmark{font-family:'Fraunces',serif;font-size:27px;font-weight:600;letter-spacing:-.02em;white-space:nowrap;}
nav a,header.scrolled nav a{color:var(--ink);font-size:12px;letter-spacing:.08em;text-transform:none;}
.nav-cta{border-color:var(--marigold);}
.boutique-hero{min-height:570px;padding:0;display:grid;grid-template-columns:47% 53%;text-align:left;background:var(--cream);color:var(--ink);overflow:hidden;}
.hero-copy{position:relative;padding:82px 7vw 76px 9vw;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(90deg,#FBF4E8 0%,#FBF4E8 82%,rgba(251,244,232,.93) 100%);z-index:2;}
.hero-copy:before,.hero-copy:after{content:'❧';position:absolute;color:var(--marigold);opacity:.23;font-size:95px;font-family:serif;}
.hero-copy:before{left:-12px;top:42px;transform:rotate(-24deg)}
.hero-copy:after{left:18px;bottom:25px;transform:rotate(150deg)}
.hero-botanical{font-size:42px;color:var(--marigold);line-height:1;margin-bottom:15px;}
.boutique-hero .eyebrow{color:var(--terracotta);margin-bottom:16px;position:relative;z-index:2;animation:none;}
.boutique-hero h1{font-size:clamp(48px,5.8vw,78px);line-height:1.04;color:var(--teal-deep);animation:none;max-width:560px;}
.boutique-hero .hero-sub{margin:22px 0 31px;max-width:540px;color:rgba(36,28,19,.78);font-family:'Jost',sans-serif;font-style:normal;font-size:16px;line-height:1.75;animation:none;}
.boutique-hero .hero-ctas{justify-content:flex-start;animation:none;}
.btn-cream{border:1px solid var(--marigold);color:var(--terracotta);background:rgba(255,255,255,.35);}
.btn-cream:hover{background:#fff;transform:translateY(-2px);}
.hero-visual{min-height:570px;background-size:cover;background-position:center 42%;position:relative;}
.hero-visual:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(251,244,232,.45),transparent 24%);}
.story{padding:95px 0;background:#fffaf2;}
.chapter{padding:92px 0;}
.chapter-dark,.chapter-espresso,.chapter-light{background:#FBF4E8;color:var(--ink);}
.chapter-head{justify-content:center;text-align:center;margin-bottom:42px;}
.chapter-head h2{font-size:clamp(38px,4vw,52px);color:var(--teal-deep);max-width:none;position:relative;padding-bottom:22px;}
.chapter-head h2:after{content:'✦';position:absolute;left:50%;bottom:-3px;transform:translateX(-50%);font-size:13px;color:var(--marigold);background:var(--cream);padding:0 12px;}
.chapter-head h2:before{content:'';position:absolute;left:50%;bottom:3px;width:180px;height:1px;background:var(--marigold);transform:translateX(-50%);}
.chapter-desc{display:none;}
.product-grid,.product-grid.five{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;}
.card,.chapter-light .card{background:transparent;border:0;border-radius:7px;box-shadow:none;overflow:visible;}
.card:hover{transform:translateY(-5px);box-shadow:none;}
.card-img{aspect-ratio:3/4;border-radius:7px;background:#efe5d6;box-shadow:0 8px 24px rgba(46,32,21,.08);}
.card-img img{border-radius:7px;object-position:center;}
.card-tag{top:11px;left:11px;background:var(--marigold);color:var(--espresso);font-size:9px;padding:5px 8px;}
.card-body{padding:17px 4px 8px;}
.card-body h3{color:var(--ink);font-size:18px;margin-bottom:7px;}
.card-body .desc{font-size:13px;color:rgba(36,28,19,.72);min-height:42px;margin-bottom:12px;}
.card-foot{align-items:flex-start;flex-direction:column;gap:8px;}
.price{color:var(--terracotta);font-style:normal;font-family:'Jost',sans-serif;font-size:13px;}
.ask,.chapter-light .ask{color:var(--teal-deep);font-size:10.5px;}
.gallery{background:#F3E9D6;}
.join{background:#fffaf2;padding:95px 0;}
footer{background:var(--teal-deep);}
.footer-brand{font-size:25px;}
@media(max-width:1050px){.product-grid,.product-grid.five{grid-template-columns:repeat(3,1fr)}.boutique-hero{grid-template-columns:1fr 1fr}.hero-copy{padding:65px 5vw}}
@media(max-width:820px){header{padding:14px 20px}.full-wordmark{font-size:22px}.boutique-hero{grid-template-columns:1fr}.hero-copy{padding:78px 24px 55px}.hero-visual{min-height:430px}.product-grid,.product-grid.five{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.full-wordmark{font-size:19px}.boutique-hero h1{font-size:48px}.hero-visual{min-height:360px}.product-grid,.product-grid.five{grid-template-columns:1fr}.card-img{aspect-ratio:4/5}}


/* Dress collection grouped by length */
.dress-price-groups{display:flex;flex-direction:column;gap:54px;}
.dress-collection-heading{margin:0 0 22px;padding-bottom:14px;border-bottom:1px solid rgba(166,71,47,.28);}
.dress-price-heading{font-family:'Fraunces',serif;font-size:26px;font-weight:500;color:var(--teal-deep);margin:0 0 5px;}
.dress-collection-subtitle{margin:0;color:var(--ink-soft);font-size:15px;font-style:italic;letter-spacing:.01em;}
.product-grid.dress-price-row{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;}
.product-grid.dress-price-row .card-body h3{font-size:17px;}
@media(max-width:1100px){.product-grid.dress-price-row{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:820px){.product-grid.dress-price-row{grid-template-columns:repeat(2,minmax(0,1fr));}.dress-price-groups{gap:42px;}}
@media(max-width:520px){.product-grid.dress-price-row{grid-template-columns:1fr;}.dress-price-heading{font-size:23px;}}

/* Smaller display for bags */
.card[data-category="bags"] .card-img img{object-fit:contain;padding:18px;background:#efe5d6;}
.card[data-category="bags"] .card-img{background:#efe5d6;}

.card-img.special-clutch img{object-fit:contain;width:78%;height:78%;margin:auto;display:block;}
.card-img.special-clutch{display:flex;align-items:center;justify-content:center;}
.card-img.special-clutch .card-tag{position:absolute;top:12px;left:12px;}

/* Keep the full sling bag and shoulder strap visible */
.card-img.sling-bag{display:flex;align-items:center;justify-content:center;}
.card-img.sling-bag img{object-fit:contain;width:92%;height:92%;margin:auto;display:block;}
.card-img.sling-bag .card-tag{position:absolute;top:12px;left:12px;}

/* Product grids must remain visible even when they are taller than the viewport.
   A tall grid cannot satisfy the IntersectionObserver threshold used by .reveal. */
.product-grid.reveal,
.product-grid.five.reveal {
  opacity: 1;
  transform: none;
}

/* Mobile visibility fix: the complete dress collection is taller than the viewport,
   so it must not depend on IntersectionObserver to become visible. */
.dress-price-groups.reveal {
  opacity: 1;
  transform: none;
}

/* Definitive mobile Dresses visibility fix */
#dresses,
#dresses .wrap,
#dresses .chapter-head,
#dresses .dress-price-groups,
#dresses .dress-price-group,
#dresses .product-grid,
#dresses .card {
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
}
#dresses { display: block !important; }
#dresses .dress-price-groups { display: grid !important; }
#dresses .product-grid { display: grid !important; }
@media (max-width: 520px) {
  #dresses .product-grid,
  #dresses .product-grid.dress-price-row { grid-template-columns: 1fr !important; }
}