:root{--cream:#fbf6ee;--cream2:#f4e3c9;--brown:#542711;--gold:#c98b2f;--line:#e3cba9;--white:#fffdf8;--serif:'Cormorant Garamond',Georgia,serif;--script:'Great Vibes',cursive}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--brown);font-family:Arial,sans-serif;overflow-x:hidden}a{text-decoration:none;color:inherit}.topbar{height:54px;background:var(--brown);color:#fff;font-size:16px}.topbar-inner{height:100%;max-width:1750px;margin:auto;padding:0 28px;display:flex;align-items:center;justify-content:space-between}.socials{display:flex;gap:24px;align-items:center}.socials a{color:#fff;font-size:20px;line-height:1}.header{position:absolute;z-index:20;left:0;right:0;top:54px;height:72px;pointer-events:none}.header-inner{height:72px;max-width:1750px;margin:auto;padding:0 30px;display:flex;align-items:flex-start;position:relative;pointer-events:none}.logo{position:absolute;left:30px;top:4px;width:145px;height:145px;border-radius:50%;overflow:hidden;border:2px solid var(--gold);box-shadow:0 2px 10px #5a2d1818}.logo img{width:100%;height:100%;object-fit:cover}.nav{position:absolute;left:50%;transform:translateX(-50%);top:0;margin:0;padding-top:28px;display:flex;align-items:center;gap:42px;font:500 16px var(--serif)}.nav>a,.cake-toggle{white-space:nowrap;position:relative;z-index:2;pointer-events:auto}.nav>a.active{color:var(--gold);border-bottom:2px solid var(--gold);padding-bottom:11px}.nav-dropdown{position:relative;z-index:3}.cake-toggle{border:0;background:none;color:var(--brown);font:inherit;padding:0;cursor:pointer}.cake-toggle span{font-family:Arial;font-size:13px;margin-left:4px}.dropdown-menu{display:none;position:absolute;top:28px;left:-20px;width:220px;background:#fffaf3;border:1px solid var(--line);box-shadow:0 8px 25px #4d250d18;padding:12px;z-index:50}.nav-dropdown.open .dropdown-menu{display:block}.dropdown-menu a{display:block;padding:12px 10px;font:14px Arial}.dropdown-menu a:hover{background:#f3e1c5}.actions{display:none}.icon{border:0;background:none;color:var(--brown);font-size:27px;position:relative;padding:0;cursor:pointer}.cart b{position:absolute;right:-8px;top:-8px;width:20px;height:20px;border-radius:50%;background:var(--gold);color:#fff;font:700 11px Arial;display:grid;place-items:center}.hamburger{display:none}.hero{height:710px;position:relative;overflow:hidden;background:var(--cream)}.hero-photo{position:absolute;right:-2px;top:0;width:calc(62% + 2px);height:100%;overflow:hidden}.hero-photo:before{content:"";position:absolute;z-index:2;left:0;top:0;bottom:0;width:32%;background:linear-gradient(90deg,var(--cream) 0%,rgba(251,246,238,.92) 25%,rgba(251,246,238,.3) 70%,transparent 100%)}.hero-photo img{width:calc(100% + 4px);height:100%;margin-left:-2px;object-fit:cover;object-position:center;border:0;display:block}.hero-content{position:relative;z-index:4;width:48%;padding:118px 0 0 8.5%;height:100%}.kicker{font:16px var(--serif);letter-spacing:.13em;color:var(--gold);margin-bottom:14px}.hero h1{font:600 clamp(60px,5.2vw,94px)/.8 var(--serif);margin:0}.hero h1 em{font:400 clamp(70px,6vw,108px) var(--script);color:var(--gold);margin-left:20px}.heart{color:var(--gold);font:1em var(--serif)}.rule{display:flex;align-items:center;gap:9px;width:250px;margin:18px 0}.rule i{height:1px;background:var(--gold);flex:1}.rule span{color:var(--gold)}.hero p{font:18px/1.45 var(--serif);margin:0 0 24px}.hero-buttons{display:flex;gap:20px}.btn{min-width:145px;height:44px;padding:0 22px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--gold);font:700 13px Arial;letter-spacing:.06em}.btn.primary{background:var(--brown);color:#fff}.btn.outline{background:#fff8ef}.features{position:relative;z-index:10;width:min(1770px,94%);margin:-34px auto 0;background:#fffdf8;border:1px solid var(--line);border-radius:10px;box-shadow:0 4px 20px #5a2d1812;display:grid;grid-template-columns:repeat(4,1fr);padding:16px 20px}.feature{display:flex;align-items:center;gap:20px;padding:6px 30px;border-right:1px solid var(--line)}.feature:last-child{border-right:0}.feature>strong{font:40px var(--serif);color:var(--gold)}.feature b{display:block;font-size:13px;margin-bottom:5px}.feature span{display:block;font:12px/1.4 Arial;color:#674937}.collection{padding:28px 3% 18px}.section-head{display:flex;justify-content:center;align-items:center;position:relative}.section-title{font:500 30px var(--serif);letter-spacing:.03em;text-align:center}.tiny-heart{color:var(--gold);text-align:center;font-size:13px}.view-all{position:absolute;right:0;top:0;border:1px solid var(--gold);padding:10px 18px;font-size:12px}.products{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin-top:7px}.product{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;text-align:center}.pic{height:178px;position:relative;overflow:hidden;background:#f5e5cf}.pic img{width:100%;height:100%;object-fit:cover}.pic span{position:absolute;left:8px;top:8px;width:43px;height:43px;border-radius:50%;background:#c88c34;color:#fff;font:700 9px/1 Arial;display:grid;place-items:center}.product h3{font:500 17px var(--serif);margin:9px 5px 2px}.product>b{display:block;color:var(--gold);font:700 15px Arial}.product>a{display:inline-flex;border:1px solid var(--gold);margin:8px 0 12px;padding:8px 15px;font-size:10px;letter-spacing:.05em}.story{display:grid;grid-template-columns:50% 50%;background:var(--cream2);min-height:340px}.story-image{overflow:hidden}.story-image img{width:100%;height:100%;object-fit:cover}.story-copy{padding:45px 9%;display:flex;flex-direction:column;justify-content:center}.eyebrow{color:var(--gold);font:13px Arial;letter-spacing:.12em;margin-bottom:8px}.story h2{font:500 42px/.92 var(--serif);margin:0 0 14px}.story h2 em{font:400 56px var(--script);color:var(--gold)}.story p{font:14px/1.5 Arial;max-width:620px;margin:0 0 18px}.story .btn{align-self:flex-start}.testimonials{background:var(--brown);color:#fffaf2;padding:25px 7%}.testimonials .section-title{color:#fff}.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}.reviews article{background:#fffaf2;color:var(--brown);border-radius:10px;padding:22px;min-height:160px}.stars{color:var(--gold);letter-spacing:3px}.reviews p{font:15px/1.35 var(--serif)}.reviews b,.reviews small{display:block;font:700 12px Arial}.reviews small{font-weight:400;margin-top:3px}.instagram{padding:20px 3%}.insta-grid{display:grid;grid-template-columns:repeat(9,1fr);gap:5px;margin-top:10px}.insta-grid img,.follow{width:100%;height:82px;object-fit:cover;border:1px solid var(--line);border-radius:7px}.follow{display:grid;place-items:center;text-align:center;padding:4px;font:12px Arial}.follow small{font-size:9px}footer{background:#fffaf2;border-top:1px solid var(--line);padding:20px 4% 8px}.footer-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr 1.1fr 1.4fr;gap:30px}.brand-foot{text-align:center}.brand-foot img{width:76px;height:76px;border-radius:50%;border:2px solid var(--gold)}footer h4{font:600 12px Arial;letter-spacing:.06em;margin:0 0 8px}footer a,footer p{display:block;font:12px/1.5 Arial;color:#674937;margin:0}.newsletter{border:1px solid #cbb79d;height:34px;margin-top:8px;padding:8px 10px;font:11px Arial;color:#765540;display:flex;justify-content:space-between}.copyright{text-align:center;border-top:1px solid var(--line);margin-top:12px;padding-top:8px;font:10px Arial;color:#765540}@media(max-width:1100px){.nav{gap:22px;font-size:14px}.logo{width:130px;height:130px}.hero-content{padding-left:7%}.hero h1{font-size:65px}.hero h1 em{font-size:78px}.feature{padding:6px 14px;gap:10px}.products{gap:7px}.pic{height:150px}}@media(max-width:780px){.header{top:42px;height:72px;background:#fffaf2ee}.header-inner{padding:0 18px;align-items:center}.logo{width:68px;height:68px;left:18px;top:3px}.nav{display:none;position:absolute;top:72px;left:0;right:0;margin:0;padding:8px 18px;background:#fffaf3;flex-direction:column;gap:0;border-top:1px solid var(--line);box-shadow:0 8px 20px #5a2d1818}.nav.open{display:flex}.nav>a,.cake-toggle{padding:12px 4px;font:16px var(--serif);text-align:left}.nav>a.active{padding-bottom:12px;border:0}.dropdown-menu{position:static;width:100%;box-shadow:none}.actions{display:none}.hamburger{display:flex;pointer-events:auto;margin-left:auto;border:1px solid var(--line);background:#fffaf3;width:38px;height:38px;flex-direction:column;justify-content:center;gap:5px;padding:8px}.hamburger i{height:2px;background:var(--brown);display:block}.topbar{height:42px}.topbar-inner{padding:0 16px;font-size:11px}.socials{gap:12px}.hero{height:auto;min-height:0;padding-top:72px;display:flex;flex-direction:column}.hero-photo{position:relative;right:auto;top:auto;width:100%;height:65vw;min-height:280px;order:1}.hero-photo:before{width:38%;background:linear-gradient(90deg,var(--cream),rgba(251,246,238,.35),transparent)}.hero-content{order:2;width:100%;padding:34px 8% 45px}.hero h1{font-size:55px}.hero h1 em{font-size:67px}.hero p{font-size:16px}.features{width:100%;margin:0;border-radius:0;grid-template-columns:1fr 1fr;padding:10px}.feature{padding:10px;border-right:0}.feature>strong{font-size:32px}.feature b{font-size:11px}.feature span{font-size:10px}.collection{padding:25px 4%}.view-all{display:none}.products{grid-template-columns:repeat(2,1fr)}.pic{height:170px}.story{grid-template-columns:1fr}.story-image{height:280px}.story-copy{padding:35px 8%}.reviews{grid-template-columns:1fr}.reviews article:not(:first-child){display:none}.insta-grid{grid-template-columns:repeat(3,1fr)}.insta-grid img,.follow{height:90px}.footer-grid{grid-template-columns:1fr 1fr}.brand-foot{grid-column:1/-1}}@media(max-width:480px){.hero h1{font-size:46px}.hero h1 em{font-size:58px}.hero-buttons{flex-direction:column}.products{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}.brand-foot{grid-column:auto}.insta-grid{grid-template-columns:repeat(2,1fr)}}


/* =========================================================
   V9 TARGETED HEADER REFINEMENT
   Only the requested header/hero corrections are changed.
   ========================================================= */
@media (min-width: 781px) {
  /* 1) Thinner announcement bar. */
  .topbar,
  .topbar-inner { height: 44px; }

  /* Keep the header directly below the thinner bar. */
  .header { top: 44px; height: 72px; }

  /* 2) Give the logo a dedicated left zone. */
  .header .logo {
    left: 30px;
    top: 4px;
    width: 132px;
    height: 132px;
    z-index: 5;
  }

  /* 3) Keep the nav in a single centered, evenly-spaced row. */
  .header .nav {
    left: 54%;
    top: 0;
    transform: translateX(-50%);
    padding-top: 24px;
    gap: 34px;
    height: 72px;
    white-space: nowrap;
    align-items: flex-start;
    z-index: 30;
  }
  .header .nav > a,
  .header .nav .nav-dropdown {
    display: block;
    line-height: 22px;
    white-space: nowrap;
  }
  .header .nav > a.active { padding-bottom: 9px; }

  /* 4) Reserve the upper hero band for the navigation.
        The cake therefore starts below the menu rather than behind it. */
  .hero-photo {
    top: 104px;
    height: calc(100% - 104px);
    right: 0;
    width: 62%;
    overflow: hidden;
  }
  .hero-photo img {
    width: 100%;
    height: 100%;
    margin-left: 0;
    object-fit: cover;
    object-position: center center;
    display: block;
    border: 0;
  }

  /* Keep the hero copy clear of the logo. */
  .hero-content {
    width: 46%;
    padding-left: 14%;
    padding-top: 118px;
  }
}

/* =========================================================
   V10 — CONTINUOUS HEADER + HERO REFINEMENT
   Targeted fix only: header/hero should read as one composition.
   ========================================================= */
@media (min-width: 781px) {
  /* Slim announcement bar. */
  .topbar,
  .topbar-inner { height: 42px; }

  /* Header and hero remain one continuous visual composition. */
  .header {
    position: absolute;
    top: 42px;
    left: 0;
    right: 0;
    height: 82px;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    z-index: 40;
  }

  .header-inner {
    height: 82px;
    max-width: none;
    padding: 0 34px;
    background: transparent !important;
  }

  /* Dedicated logo zone — never overlaps the hero copy kicker. */
  .header .logo {
    left: 36px;
    top: 5px;
    width: 132px;
    height: 132px;
    z-index: 20;
  }

  /*
    Navigation is positioned as one compact row in the clean upper
    portion of the hero. No per-item background is used.
  */
  .header .nav {
    position: absolute;
    left: 48%;
    top: 0;
    transform: translateX(-50%);
    height: 70px;
    padding-top: 14px;
    display: flex;
    align-items: flex-start;
    gap: 31px;
    white-space: nowrap;
    z-index: 30;
  }

  .header .nav > a,
  .header .nav .nav-dropdown {
    display: block;
    line-height: 22px;
    white-space: nowrap;
  }

  .header .nav > a.active {
    padding-bottom: 8px;
  }

  /* Keep the hero full width with no container/border at the right edge. */
  .hero {
    height: 710px;
    width: 100%;
    max-width: none;
    position: relative;
    overflow: hidden;
    border: 0;
  }

  /*
    Start the photo slightly lower than the navigation baseline.
    This keeps the nav readable without making the header look like
    a separate section.
  */
  .hero-photo {
    top: 42px;
    right: 0;
    width: 62%;
    height: calc(100% - 42px);
    overflow: hidden;
    background: var(--cream);
    border: 0;
  }

  .hero-photo img {
    width: 102%;
    height: 100%;
    margin-left: -1%;
    object-fit: cover;
    object-position: center center;
    display: block;
    border: 0;
  }

  .hero-photo:before {
    width: 34%;
    background: linear-gradient(
      90deg,
      var(--cream) 0%,
      rgba(251,246,238,.93) 24%,
      rgba(251,246,238,.34) 68%,
      transparent 100%
    );
  }

  .hero-content {
    width: 46%;
    height: 100%;
    padding-top: 118px;
    padding-left: 14%;
    position: relative;
    z-index: 10;
  }
}




/* V14 — approved mockup integration: navbar and hero share one canvas. */
@media (min-width: 781px) {
  .header,
  .header-inner,
  .header .nav,
  .header .nav > a,
  .header .nav .nav-dropdown {
    background: transparent !important;
  }

  .header .nav {
    box-shadow: none !important;
    border: 0 !important;
  }

  /* Do not create a horizontal separator beneath the navigation. */
  .header::before,
  .header::after,
  .header-inner::before,
  .header-inner::after {
    display: none !important;
  }

  /* The hero remains the visual canvas immediately behind the navigation. */
  .hero {
    margin-top: 0 !important;
    border-top: 0 !important;
  }

  .hero-photo {
    z-index: 1;
  }

  .hero-content {
    z-index: 10;
  }

  .header {
    z-index: 50;
  }
}


/* ============================================================
   V15 — TRUE APPROVED HERO COMPOSITION
   The hero photo must continue directly behind the navigation.
   No separate horizontal image band is created.
   ============================================================ */
@media (min-width: 781px) {
  .header {
    top: 42px !important;
    height: 82px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .header-inner {
    background: transparent !important;
  }

  .header .nav {
    top: 0 !important;
    padding-top: 14px !important;
    background: transparent !important;
  }

  /*
   * Critical fix:
   * The hero image begins at the top of the hero itself.
   * It is NOT pushed down underneath the navbar.
   * Since the header is absolute, the image naturally continues
   * behind the navigation exactly like the approved mockup.
   */
  .hero-photo {
    top: 0 !important;
    height: 100% !important;
    right: 0 !important;
    width: 62% !important;
    border: 0 !important;
  }

  .hero-photo img {
    height: 100% !important;
    width: 102% !important;
    margin-left: -1% !important;
    object-fit: cover !important;
    border: 0 !important;
  }

  .hero {
    position: relative !important;
    overflow: hidden !important;
    border: 0 !important;
  }

  .header,
  .header-inner,
  .header .nav,
  .header .nav > a,
  .header .nav .nav-dropdown {
    background: transparent !important;
  }
}


/* ============================================================
   V16 — FINAL NAVIGATION POSITION REFINEMENT
   Only the desktop navigation position is adjusted.
   ============================================================ */
@media (min-width: 781px) {
  .header .nav {
    top: -10px !important;
    left: 47.5% !important;
  }
}


/* ============================================================
   V17 — COLLECTION SECTION POLISH
   Targeted refinement only. Header + hero remain untouched.
   ============================================================ */
.collection {
  padding: 24px 3% 20px !important;
}

.section-head {
  min-height: 58px;
  align-items: flex-start;
}

.section-title {
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: .035em;
}

.tiny-heart {
  margin-top: 5px;
  line-height: 1;
}

.view-all {
  top: 0;
  right: 0;
  min-width: 145px;
  height: 48px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: .02em;
  background: transparent;
}

.products {
  gap: 10px;
  margin-top: 10px;
  align-items: stretch;
}

.product {
  min-width: 0;
  border-radius: 11px;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  padding-bottom: 2px;
}

.pic {
  height: 155px;
  flex: 0 0 155px;
  background: #f5e5cf;
}

.pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.pic span {
  left: 10px;
  top: 10px;
  width: 45px;
  height: 45px;
  font-size: 9px;
  line-height: 1.05;
  z-index: 2;
}

.product h3 {
  font-size: 16px;
  line-height: 1.2;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 9px 8px 0;
}

.product > b {
  font-size: 15px;
  line-height: 1;
  margin-top: 3px;
}

.product > a {
  align-self: center;
  min-width: 143px;
  height: 38px;
  margin: 10px 0 11px;
  padding: 0 13px;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1;
  letter-spacing: .06em;
}

/* Keep the collection compact at normal desktop widths. */
@media (min-width: 1100px) {
  .collection {
    padding-left: 3% !important;
    padding-right: 3% !important;
  }
}

/* Mobile/tablet: retain the same visual hierarchy without forcing five columns. */
@media (max-width: 780px) {
  .collection {
    padding: 28px 16px 22px !important;
  }

  .section-head {
    min-height: auto;
    margin-bottom: 16px;
  }

  .section-title {
    font-size: 26px;
  }

  .view-all {
    position: static;
    min-width: 118px;
    height: 40px;
    padding: 0 12px;
  }

  .products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 0;
  }

  .pic {
    height: 150px;
    flex-basis: 150px;
  }

  .product h3 {
    font-size: 15px;
  }
}


/* ============================================================
   V18 — COLLECTION MATCH TO APPROVED REFERENCE
   Header + hero remain locked. Collection only.
   ============================================================ */

.collection {
  padding: 34px 2.8% 32px !important;
  background: #fbf6ee;
}

.collection .section-head {
  position: relative;
  min-height: 62px;
  margin-bottom: 10px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.collection .section-title {
  margin: 0;
  text-align: center;
  font-size: 31px;
  line-height: 1.05;
  letter-spacing: .045em;
  font-weight: 500;
}

.collection .tiny-heart {
  position: absolute;
  left: 50%;
  top: 42px;
  transform: translateX(-50%);
  margin: 0;
  font-size: 13px;
  line-height: 1;
}

.collection .view-all {
  position: absolute;
  top: -2px;
  right: 0;
  width: 145px;
  height: 48px;
  min-width: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border: 1px solid #c98a2c;
  background: transparent;
  font-size: 11px;
  letter-spacing: .04em;
}

.collection .products {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-top: 7px;
  align-items: stretch;
}

.collection .product {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #e4cba8;
  border-radius: 12px;
  background: #fffdf9;
  box-shadow: none;
  padding: 0 0 10px;
  display: flex;
  flex-direction: column;
}

.collection .product .pic {
  width: 100%;
  height: 205px;
  flex: 0 0 205px;
  overflow: hidden;
  border-radius: 11px 11px 0 0;
  background: #f6eadb;
  position: relative;
}

.collection .product .pic img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
}

.collection .product .pic span {
  position: absolute;
  top: 12px;
  left: 10px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 5px;
  font-size: 9px;
  line-height: 1.05;
  letter-spacing: .02em;
  z-index: 3;
}

.collection .product h3 {
  margin: 18px 8px 0;
  min-height: 23px;
  display: block;
  text-align: center;
  font-size: 17px;
  line-height: 1.2;
  font-weight: 400;
  white-space: nowrap;
}

.collection .product > b {
  display: block;
  margin: 8px 0 0;
  text-align: center;
  font-size: 17px;
  line-height: 1;
  font-weight: 700;
  color: #c88728;
}

.collection .product > a {
  align-self: center;
  width: 212px;
  max-width: calc(100% - 34px);
  height: 43px;
  margin: 18px 0 1px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid #c98a2c;
  background: transparent;
  font-size: 11px;
  line-height: 1;
  letter-spacing: .04em;
}

/* Keep the collection balanced on large desktop screens. */
@media (min-width: 1400px) {
  .collection {
    padding-left: 2.8% !important;
    padding-right: 2.8% !important;
  }

  .collection .product .pic {
    height: 225px;
    flex-basis: 225px;
  }

  .collection .product h3 {
    font-size: 18px;
  }

  .collection .product > b {
    font-size: 18px;
  }
}

/* Responsive collection: preserve the same card hierarchy. */
@media (max-width: 1100px) and (min-width: 781px) {
  .collection .products {
    gap: 9px;
  }

  .collection .product .pic {
    height: 175px;
    flex-basis: 175px;
  }

  .collection .product h3 {
    font-size: 15px;
  }

  .collection .product > a {
    width: 150px;
  }
}

@media (max-width: 780px) {
  .collection {
    padding: 28px 16px 24px !important;
  }

  .collection .section-head {
    min-height: 48px;
    margin-bottom: 16px;
  }

  .collection .section-title {
    font-size: 25px;
  }

  .collection .tiny-heart {
    top: 34px;
  }

  .collection .view-all {
    position: static;
    width: 118px;
    height: 40px;
  }

  .collection .products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 0;
  }

  .collection .product .pic {
    height: 145px;
    flex-basis: 145px;
  }

  .collection .product h3 {
    margin-top: 12px;
    min-height: 34px;
    font-size: 14px;
    white-space: normal;
  }

  .collection .product > b {
    margin-top: 6px;
    font-size: 15px;
  }

  .collection .product > a {
    width: calc(100% - 22px);
    height: 37px;
    margin-top: 11px;
    font-size: 9px;
  }
}


/* ============================================================
   V19 — COLLECTION: GENUINE APPROVED PROPORTIONS
   Important: product images use their native 184x143 ratio.
   No image is used as a background or cropped to manufacture
   the approved screenshot.
   ============================================================ */

@media (min-width: 1101px) {
  .collection {
    padding: 24px 0 18px !important;
  }

  .collection .section-head {
    width: 950px;
    max-width: calc(100% - 48px);
    margin: 0 auto 8px;
    min-height: 54px;
  }

  .collection .section-title {
    font-size: 30px;
  }

  .collection .tiny-heart {
    top: 39px;
  }

  .collection .view-all {
    top: -1px;
    right: 0;
    width: 125px;
    height: 40px;
    font-size: 10px;
  }

  .collection .products {
    width: 950px;
    max-width: calc(100% - 48px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
  }

  .collection .product {
    width: 100%;
    border-radius: 9px;
    padding-bottom: 7px;
  }

  .collection .product .pic {
    width: 100%;
    height: auto;
    aspect-ratio: 184 / 143;
    flex: 0 0 auto;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
  }

  .collection .product .pic img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    object-position: center;
  }

  .collection .product .pic span {
    width: 38px;
    height: 38px;
    top: 7px;
    left: 7px;
    font-size: 7px;
    padding: 3px;
  }

  .collection .product h3 {
    margin: 7px 4px 0;
    min-height: 18px;
    font-size: 13px;
    line-height: 1.15;
    white-space: nowrap;
  }

  .collection .product > b {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1;
  }

  .collection .product > a {
    width: 132px;
    max-width: calc(100% - 18px);
    height: 30px;
    margin: 8px 0 1px;
    padding: 0 8px;
    gap: 5px;
    font-size: 8px;
    letter-spacing: .03em;
  }
}

@media (max-width: 1100px) and (min-width: 781px) {
  .collection .section-head,
  .collection .products {
    width: calc(100% - 40px);
    max-width: 950px;
  }

  .collection .product .pic {
    height: auto;
    aspect-ratio: 184 / 143;
    flex-basis: auto;
  }

  .collection .product .pic img {
    object-fit: fill;
  }

  .collection .product h3 {
    font-size: 12px;
  }

  .collection .product > a {
    width: 120px;
    height: 29px;
    font-size: 8px;
  }
}


/* ============================================================
   V20 — COLLECTION FULL-VIEWPORT WIDTH + IMAGE FIT
   Header/hero remain locked. Collection only.
   ============================================================ */

@media (min-width: 1101px) {
  .collection {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
    padding: 24px 3% 20px !important;
  }

  .collection .section-head {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 9px !important;
    padding: 0 0;
    box-sizing: border-box;
  }

  .collection .section-title {
    text-align: center;
  }

  .collection .view-all {
    right: 0 !important;
  }

  .collection .products {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 10px !important;
    box-sizing: border-box;
  }

  .collection .product {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
  }

  /*
   * Match the actual product-image aspect ratio so each source image
   * fills the image frame without cover-cropping.
   */
  .collection .product .pic {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 184 / 143 !important;
    flex: 0 0 auto !important;
    overflow: hidden;
    box-sizing: border-box;
  }

  .collection .product .pic img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    display: block;
    object-fit: fill !important;
    object-position: center !important;
  }
}

@media (min-width: 1500px) {
  .collection {
    padding-left: 3% !important;
    padding-right: 3% !important;
  }

  .collection .products {
    gap: 12px !important;
  }
}


/* ============================================================
   V21 — COLLECTION: SHOW THE COMPLETE PRODUCT ASSET
   No crop. No forced image frame. Each supplied 184x143 asset
   is rendered at its full aspect ratio inside the card.
   ============================================================ */

@media (min-width: 781px) {
  .collection {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
    padding: 30px 3% 28px !important;
  }

  .collection .section-head {
    width: 100% !important;
    max-width: none !important;
    min-height: 62px;
    margin: 0 0 10px !important;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }

  .collection .section-title {
    margin: 0;
    text-align: center;
    font-size: 31px;
    line-height: 1.05;
    letter-spacing: .045em;
  }

  .collection .tiny-heart {
    position: absolute;
    top: 43px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    line-height: 1;
  }

  .collection .view-all {
    position: absolute;
    top: -2px;
    right: 0;
    width: 145px;
    height: 48px;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .collection .products {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 12px !important;
    align-items: stretch;
  }

  .collection .product {
    min-width: 0;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid #e4cba8;
    border-radius: 12px;
    background: #fffdf9;
    padding: 0 0 12px;
    display: flex;
    flex-direction: column;
  }

  /*
   * IMPORTANT:
   * Do not give .pic a fixed height.
   * Do not use object-fit: cover.
   * The actual 184x143 image is allowed to determine its own
   * height after being scaled to the card width.
   */
  .collection .product .pic {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 11px 11px 0 0;
    position: relative;
  }

  .collection .product .pic img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: initial !important;
    object-position: initial !important;
    margin: 0 !important;
  }

  .collection .product h3 {
    margin: 12px 8px 0 !important;
    min-height: 22px;
    text-align: center;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 400;
    white-space: nowrap;
  }

  .collection .product > b {
    display: block;
    margin: 7px 0 0 !important;
    text-align: center;
    font-size: 16px;
    line-height: 1;
    color: #c88728;
  }

  .collection .product > a {
    align-self: center;
    width: 190px;
    max-width: calc(100% - 28px);
    height: 40px;
    margin: 16px 0 0 !important;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
}

@media (max-width: 780px) {
  .collection {
    padding: 28px 16px 24px !important;
  }

  .collection .products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .collection .product .pic {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;
    overflow: visible !important;
  }

  .collection .product .pic img {
    width: 100% !important;
    height: auto !important;
    object-fit: initial !important;
  }

  .collection .product h3 {
    margin-top: 10px !important;
    min-height: 34px;
    font-size: 14px;
    white-space: normal;
  }

  .collection .product > b {
    font-size: 15px;
  }

  .collection .product > a {
    width: calc(100% - 20px);
    height: 36px;
    margin-top: 11px !important;
    font-size: 9px;
  }
}


/* ============================================================
   V22 — APPROVED COLLECTION + TESTIMONIAL COMPOSITION
   No mockup screenshot is used as a page image.
   ============================================================ */

/* Collection: preserve the complete source image at natural ratio. */
@media (min-width: 781px) {
  .collection .products {
    width: 100% !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .collection .product {
    min-width: 0;
    overflow: hidden;
  }

  .collection .product .pic {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    flex: none !important;
  }

  .collection .product .pic img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
  }
}

/* Testimonials: match the approved cream/gold three-card composition. */
.testimonials {
  background: #fbf6ee !important;
  color: #4a2414 !important;
  padding: 7px 3% 18px !important;
  border-top: 1px solid #ead8bd;
}

.testimonial-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 27px;
  margin-bottom: 9px;
}

.testimonial-heading .section-title {
  color: #7b4527 !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: .05em;
  white-space: nowrap;
}

.testimonial-heading .line {
  width: 42px;
  height: 1px;
  background: #c98a2c;
  position: relative;
}

.testimonial-heading .line:first-child::after {
  content: "◆";
  position: absolute;
  right: -7px;
  top: -6px;
  font-size: 5px;
  color: #c98a2c;
}

.testimonial-heading .line:last-child::before {
  content: "◆";
  position: absolute;
  left: -7px;
  top: -6px;
  font-size: 5px;
  color: #c98a2c;
}

.testimonial-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.testimonial-wrap .reviews {
  flex: 1;
  width: 100%;
  margin: 0;
  padding: 0 44px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.review-card {
  position: relative;
  min-height: 128px !important;
  padding: 14px 17px 12px 78px !important;
  border: 1px solid #e5d4bb;
  border-radius: 9px !important;
  background: #fffdf9 !important;
  box-shadow: 0 2px 8px rgba(83, 47, 24, .04);
  overflow: hidden;
  box-sizing: border-box;
}

.review-avatar {
  position: absolute;
  left: 15px;
  top: 14px;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(65, 38, 21, .18);
  color: #fff;
  font: 700 10px Arial, sans-serif;
}

.avatar-one { background: radial-gradient(circle at 50% 35%, #d69b77 0 24%, #5b2f22 25% 47%, #24130e 48% 100%); }
.avatar-two { background: radial-gradient(circle at 50% 35%, #c88968 0 24%, #6a3a27 25% 47%, #21130e 48% 100%); }
.avatar-three { background: radial-gradient(circle at 50% 35%, #d29b7d 0 24%, #4f2a20 25% 47%, #1d120e 48% 100%); }

.review-content {
  min-width: 0;
}

.review-content .stars {
  color: #c98a2c;
  font-size: 13px;
  letter-spacing: 1.5px;
  line-height: 1;
  margin-bottom: 7px;
}

.review-content p {
  margin: 0 0 6px !important;
  font: 11px/1.3 Arial, sans-serif !important;
  color: #402317;
}

.review-content b {
  display: block;
  margin: 0;
  font: 700 11px/1.25 Arial, sans-serif !important;
  color: #402317;
}

.review-content small {
  display: block;
  margin-top: 1px;
  font: 10px/1.2 Arial, sans-serif !important;
  color: #402317;
}

.quote-mark {
  position: absolute;
  left: 28px;
  bottom: 7px;
  color: #d5a45c;
  font: 700 34px/1 Georgia, serif;
  opacity: .9;
}

.quote-right {
  left: auto;
  right: 13px;
  bottom: -2px;
  color: #ead7b8;
}

.testimonial-arrow {
  position: absolute;
  z-index: 3;
  width: 34px;
  height: 34px;
  border: 1px solid #c98a2c;
  border-radius: 50%;
  background: #fffaf2;
  color: #6a351d;
  font: 22px/1 Georgia, serif;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.testimonial-arrow.prev { left: 0; }
.testimonial-arrow.next { right: 0; }

/* Keep this section compact like the approved mockup. */
@media (min-width: 1101px) {
  .testimonials {
    padding-left: 3% !important;
    padding-right: 3% !important;
  }
}

@media (max-width: 780px) {
  .testimonials {
    padding: 14px 16px 18px !important;
  }

  .testimonial-heading {
    margin-bottom: 10px;
  }

  .testimonial-heading .section-title {
    font-size: 13px;
  }

  .testimonial-heading .line {
    width: 25px;
  }

  .testimonial-wrap .reviews {
    padding: 0 38px;
    grid-template-columns: 1fr;
  }

  .review-card {
    min-height: 125px !important;
  }

  .review-card:not(:first-child) {
    display: none;
  }
}




/* ============================================================
   V24 — CLEAN REBUILD OF COLLECTION + TESTIMONIALS
   These are scoped to .v24-* so the approved header/hero are
   completely isolated from this refinement.
   ============================================================ */

.v24-collection,
.v24-testimonials {
  width: 100%;
  box-sizing: border-box;
}

@media (min-width: 781px) {

  /* ================= COLLECTION ================= */

  .v24-collection {
    padding: 18px 3% 16px !important;
    background: #fbf6ee !important;
  }

  .v24-collection .section-head {
    width: 100%;
    min-height: 44px !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    position: relative !important;
  }

  .v24-collection .section-head > div {
    text-align: center;
  }

  .v24-collection .section-title {
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: clamp(25px, 1.45vw, 30px) !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    letter-spacing: .035em !important;
    color: #4a2414 !important;
  }

  .v24-collection .tiny-heart {
    margin-top: 7px !important;
    font-size: 10px !important;
    line-height: 1 !important;
    color: #c98a2c !important;
  }

  .v24-collection .view-all {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    min-width: 0 !important;
    width: 145px !important;
    height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #c98a2c !important;
    background: transparent !important;
    color: #4a2414 !important;
    font-family: Arial, sans-serif !important;
    font-size: 10px !important;
    letter-spacing: .03em !important;
  }

  .v24-collection .products {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 12px !important;
    align-items: stretch !important;
  }

  .v24-collection .product {
    min-width: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 0 10px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    border: 1px solid #e4cba8 !important;
    border-radius: 11px !important;
    background: #fffdf9 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .v24-collection .product .pic {
    width: 100% !important;
    height: auto !important;
    flex: 0 0 auto !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 10px 10px 0 0 !important;
    background: #f6eadb !important;
    position: relative !important;
  }

  .v24-collection .product .pic img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  .v24-collection .product h3 {
    width: 100% !important;
    min-height: 0 !important;
    margin: 11px 0 0 !important;
    padding: 0 6px !important;
    display: block !important;
    box-sizing: border-box !important;
    text-align: center !important;
    white-space: nowrap !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: clamp(13px, .82vw, 16px) !important;
    font-weight: 400 !important;
    line-height: 1.15 !important;
    color: #4a2414 !important;
  }

  .v24-collection .product > b {
    display: block !important;
    margin: 7px 0 0 !important;
    text-align: center !important;
    font-family: Arial, sans-serif !important;
    font-size: clamp(13px, .78vw, 15px) !important;
    line-height: 1 !important;
    color: #c88728 !important;
  }

  .v24-collection .product > a {
    align-self: center !important;
    width: min(145px, calc(100% - 28px)) !important;
    min-width: 0 !important;
    height: 36px !important;
    margin: 11px auto 0 !important;
    padding: 0 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    border: 1px solid #c98a2c !important;
    background: transparent !important;
    color: #4a2414 !important;
    font-family: Arial, sans-serif !important;
    font-size: 9px !important;
    line-height: 1 !important;
    letter-spacing: .03em !important;
  }

  /* ================= TESTIMONIALS ================= */

  .v24-testimonials {
    padding: 10px 3% 15px !important;
    background: #fbf6ee !important;
    border-top: 1px solid #ead8bd !important;
  }

  .v24-testimonials .testimonial-heading {
    width: 100%;
    height: 28px !important;
    margin: 0 0 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  .v24-testimonials .testimonial-heading .section-title {
    color: #7b4527 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: clamp(13px, .82vw, 15px) !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    letter-spacing: .045em !important;
    white-space: nowrap !important;
  }

  .v24-testimonials .testimonial-heading .line {
    width: 42px !important;
    height: 1px !important;
    background: #c98a2c !important;
  }

  .v24-testimonials .testimonial-wrap {
    position: relative !important;
    width: 100% !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
  }

  .v24-testimonials .reviews {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 42px !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    box-sizing: border-box !important;
  }

  .v24-testimonials .review-card {
    position: relative !important;
    min-width: 0 !important;
    min-height: 122px !important;
    height: 122px !important;
    padding: 15px 17px 12px 76px !important;
    border: 1px solid #e5d4bb !important;
    border-radius: 9px !important;
    background: #fffdf9 !important;
    box-shadow: 0 2px 8px rgba(83,47,24,.04) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .v24-testimonials .review-avatar {
    left: 15px !important;
    top: 15px !important;
    width: 44px !important;
    height: 44px !important;
  }

  .v24-testimonials .review-content .stars {
    margin: 1px 0 6px !important;
    font-size: 12px !important;
    letter-spacing: 1.1px !important;
    line-height: 1 !important;
  }

  .v24-testimonials .review-content p {
    margin: 0 0 5px !important;
    font: 10px/1.3 Arial, sans-serif !important;
    color: #402317 !important;
  }

  .v24-testimonials .review-content b {
    display: block !important;
    margin: 0 !important;
    font: 700 10px/1.2 Arial, sans-serif !important;
    color: #402317 !important;
  }

  .v24-testimonials .review-content small {
    display: block !important;
    margin-top: 1px !important;
    font: 9px/1.15 Arial, sans-serif !important;
    color: #402317 !important;
  }

  .v24-testimonials .quote-mark {
    left: 27px !important;
    bottom: 4px !important;
    font-size: 30px !important;
  }

  .v24-testimonials .quote-right {
    left: auto !important;
    right: 10px !important;
    bottom: -2px !important;
  }

  .v24-testimonials .testimonial-arrow {
    width: 32px !important;
    height: 32px !important;
    border: 1px solid #c98a2c !important;
    background: #fffaf2 !important;
    color: #6a351d !important;
    font-size: 20px !important;
  }

  .v24-testimonials .testimonial-arrow.prev { left: 0 !important; }
  .v24-testimonials .testimonial-arrow.next { right: 0 !important; }
}

@media (max-width: 780px) {
  .v24-collection {
    padding: 25px 16px 20px !important;
  }

  .v24-collection .section-head {
    min-height: 40px !important;
    margin-bottom: 12px !important;
  }

  .v24-collection .section-title {
    font-size: 24px !important;
  }

  .v24-collection .view-all {
    width: 105px !important;
    height: 36px !important;
    font-size: 9px !important;
  }

  .v24-collection .products {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 10px !important;
  }

  .v24-collection .product h3 {
    font-size: 12px !important;
  }

  .v24-collection .product > b {
    font-size: 12px !important;
  }

  .v24-collection .product > a {
    width: 120px !important;
    height: 32px !important;
    font-size: 8px !important;
    margin-top: 9px !important;
  }

  .v24-testimonials {
    padding: 10px 16px 15px !important;
  }

  .v24-testimonials .testimonial-heading .section-title {
    font-size: 12px !important;
  }

  .v24-testimonials .testimonial-wrap .reviews {
    padding: 0 38px !important;
    grid-template-columns: 1fr !important;
  }

  .v24-testimonials .review-card {
    height: 118px !important;
    min-height: 118px !important;
  }

  .v24-testimonials .review-card:not(:first-child) {
    display: none !important;
  }
}


/* ============================================================
   V26 — REAL TESTIMONIAL PHOTOS + CLEAN PRODUCT IMAGE FRAMES
   Based on V24. V25 testimonial overrides are intentionally not
   carried forward.
   ============================================================ */

/* Real customer photos */
.review-avatar {
  overflow: hidden !important;
  background: #fff !important;
  padding: 0 !important;
  display: block !important;
}

.review-avatar img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 50% !important;
}

/* Remove the old initials/avatar gradients now that real images exist. */
.avatar-one,
.avatar-two,
.avatar-three {
  background: #fff !important;
}

/* Collection: the image box follows the supplied 184x143 asset ratio.
   This prevents either cropping or empty/uneven image framing. */
@media (min-width: 781px) {
  .collection .products {
    align-items: stretch !important;
  }

  .collection .product {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 0 9px !important;
    overflow: hidden !important;
  }

  .collection .product .pic {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 184 / 143 !important;
    overflow: hidden !important;
    flex: 0 0 auto !important;
    background: #fffdf9 !important;
    border-radius: 10px 10px 0 0 !important;
  }

  .collection .product .pic img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: fill !important;
    object-position: center !important;
    margin: 0 !important;
  }

  .collection .product h3 {
    margin-top: 9px !important;
  }

  .collection .product > a {
    margin-top: auto !important;
    align-self: center !important;
    height: 32px !important;
  }
}

/* Return testimonials to the compact V24 composition, with real photos. */
@media (min-width: 1101px) {
  .testimonials {
    padding: 7px 3% 13px !important;
  }

  .testimonial-wrap .reviews {
    width: 100% !important;
    max-width: none !important;
    padding: 0 44px !important;
    margin: 0 !important;
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap: 10px !important;
  }

  .review-card {
    height: 128px !important;
    min-height: 128px !important;
    padding: 14px 17px 12px 78px !important;
  }

  .review-avatar {
    left: 15px !important;
    top: 14px !important;
    width: 45px !important;
    height: 45px !important;
  }

  .testimonial-arrow.prev {
    left: 0 !important;
  }

  .testimonial-arrow.next {
    right: 0 !important;
  }
}

@media (max-width: 780px) {
  .collection .product .pic {
    aspect-ratio: 184 / 143 !important;
    height: auto !important;
  }

  .collection .product .pic img {
    width: 100% !important;
    height: 100% !important;
    object-fit: fill !important;
  }

  .review-avatar img {
    width: 100% !important;
    height: 100% !important;
  }
}

/* V26 intentionally supersedes the V25 centered-width testimonial experiment. */


/* ============================================================
   V28 — APPROVED COLLECTION LOOK
   Collection only. Testimonials remain exactly as in V26.
   ============================================================ */

@media (min-width: 781px) {
  .collection {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 34px 2.8% 30px !important;
    background:
      radial-gradient(circle at 50% 0%, rgba(255,255,255,.72), transparent 48%),
      #fbf6ee !important;
  }

  .collection .section-head {
    width: 100% !important;
    min-height: 62px !important;
    margin-bottom: 10px !important;
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
  }

  .collection .section-title {
    font-size: 31px !important;
    line-height: 1.05 !important;
    letter-spacing: .045em !important;
  }

  .collection .tiny-heart {
    margin-top: 6px !important;
    font-size: 13px !important;
  }

  .collection .view-all {
    position: absolute !important;
    top: -2px !important;
    right: 0 !important;
    width: 145px !important;
    height: 48px !important;
    min-width: 145px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 16px !important;
    border: 1px solid #c98a2c !important;
    background: transparent !important;
  }

  .collection .products {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  .collection .product {
    position: relative !important;
    min-width: 0 !important;
    height: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 0 0 12px !important;
    border: 1px solid #e3c9a7 !important;
    border-radius: 12px !important;
    background: linear-gradient(180deg,#fffefa 0%,#fffaf3 100%) !important;
    box-shadow:
      0 4px 12px rgba(90,45,24,.06),
      0 1px 0 rgba(255,255,255,.95) inset !important;
  }

  /* Product image frame: exact source ratio, so nothing is cropped. */
  .collection .product .pic {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 184 / 143 !important;
    flex: 0 0 auto !important;
    position: relative !important;
    overflow: hidden !important;
    background: #fffaf3 !important;
    border-radius: 11px 11px 0 0 !important;
  }

  .collection .product .pic img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: fill !important;
    object-position: center !important;
    transform: none !important;
    filter: none !important;
  }

  /* Remove any old circular badge styling. */
  .collection .product .pic span {
    display: none !important;
  }

  /* Glossy highlight over the image, without affecting the image itself. */
  .collection .product .pic::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    background: linear-gradient(
      120deg,
      rgba(255,255,255,.24) 0%,
      rgba(255,255,255,.08) 24%,
      rgba(255,255,255,0) 48%
    ) !important;
  }

  /* Ribbon badges: HTML/CSS, not baked into the product image. */
  .collection .product:nth-child(1)::before,
  .collection .product:nth-child(3)::before,
  .collection .product:nth-child(5)::before {
    position: absolute !important;
    z-index: 8 !important;
    top: 10px !important;
    left: 10px !important;
    width: 58px !important;
    height: 58px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding-top: 10px !important;
    color: #fff !important;
    background: #c8892c !important;
    font: 700 10px/1.05 Arial, sans-serif !important;
    letter-spacing: .03em !important;
    text-align: center !important;
    clip-path: polygon(0 0,100% 0,100% 78%,50% 100%,0 78%) !important;
    border-radius: 1px !important;
    content: "" !important;
  }

  .collection .product:nth-child(1)::before { content: "BEST\A SELLER" !important; white-space: pre !important; }
  .collection .product:nth-child(3)::before,
  .collection .product:nth-child(5)::before { content: "NEW" !important; }

  .collection .product h3 {
    min-height: 24px !important;
    margin: 13px 8px 7px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font: 500 17px/1.15 var(--serif) !important;
  }

  .collection .product > b {
    min-height: 19px !important;
    margin: 0 !important;
    display: block !important;
    color: var(--gold) !important;
    font: 700 16px/1 Arial, sans-serif !important;
  }

  .collection .product > a {
    width: calc(100% - 42px) !important;
    height: 38px !important;
    min-height: 38px !important;
    box-sizing: border-box !important;
    margin: 18px auto 0 !important;
    padding: 0 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border: 1px solid #d28c2d !important;
    border-radius: 3px !important;
    background: rgba(255,255,255,.45) !important;
    font: 11px/1 Arial, sans-serif !important;
    letter-spacing: .035em !important;
  }
}

@media (max-width: 780px) {
  .collection {
    padding: 28px 16px 24px !important;
  }

  .collection .products {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 12px !important;
  }

  .collection .product .pic {
    aspect-ratio: 184 / 143 !important;
    height: auto !important;
  }

  .collection .product .pic img {
    width: 100% !important;
    height: 100% !important;
    object-fit: fill !important;
  }

  .collection .product h3 {
    min-height: 34px !important;
    margin: 10px 5px 6px !important;
    font-size: 15px !important;
  }

  .collection .product > a {
    width: calc(100% - 22px) !important;
    margin-top: 14px !important;
  }
}


/* ============================================================
   V29 — TOPBAR + FOOTER BOTTOM ROW REFINEMENT
   Targeted change only.
   ============================================================ */

/* Smaller announcement text at the very top. */
.topbar-inner {
  font-size: 14px !important;
}

/* Footer copyright row now uses the same chocolate background
   as the top announcement bar, with slightly larger text. */
footer .copyright,
#footer .copyright {
  background: var(--brown) !important;
  color: #fffaf2 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  padding: 10px 20px !important;
  min-height: 40px !important;
  box-sizing: border-box !important;
}


/* ============================================================
   V30 — FULL-WIDTH FOOTER + SOCIAL ICONS
   Targeted refinement only.
   ============================================================ */

.topbar .socials a,
.footer-socials a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  text-decoration: none !important;
}

.topbar .socials svg,
.footer-socials svg {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
}

.topbar .socials {
  gap: 20px !important;
}

.footer-socials {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 18px !important;
  margin-top: 8px !important;
}

.footer-socials svg {
  color: var(--brown) !important;
  width: 17px !important;
  height: 17px !important;
}

/* Make the copyright strip genuinely full viewport width. */
footer {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

footer .footer-grid {
  padding-left: 4% !important;
  padding-right: 4% !important;
  box-sizing: border-box !important;
}

footer .copyright,
#footer .copyright {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 12px !important;
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-radius: 0 !important;
  padding: 11px 20px !important;
  min-height: 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  font-size: 13px !important;
}


/* ============================================================
   V31 — APPROVED HEADER / FOOTER VISUAL TREATMENT
   Only header, topbar and footer are changed.
   ============================================================ */

/* Keep the page itself flush to the viewport edges. */
html, body {
  width: 100%;
  min-height: 100%;
  margin: 0 !important;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 0 0 auto;
}

/* ---------- TOP ANNOUNCEMENT BAR ---------- */
.topbar {
  width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  background: #5a2d18 !important;
  color: #fff !important;
  box-sizing: border-box !important;
}

.topbar-inner {
  width: 100% !important;
  max-width: none !important;
  height: 44px !important;
  padding: 0 32px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.topbar-inner > span {
  font: 14px/1 Arial, sans-serif !important;
  color: #fff !important;
  white-space: nowrap !important;
}

.topbar .socials {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  margin-left: auto !important;
}

.topbar .socials a {
  width: 20px !important;
  height: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
}

.topbar .socials svg {
  width: 19px !important;
  height: 19px !important;
  display: block !important;
}

/* ---------- HEADER ---------- */
.header {
  top: 44px !important;
  height: 72px !important;
  left: 0 !important;
  right: 0 !important;
  background: transparent !important;
}

.header-inner {
  width: 100% !important;
  max-width: none !important;
  height: 72px !important;
  padding: 0 30px !important;
  box-sizing: border-box !important;
}

.header .logo {
  left: 30px !important;
  top: 4px !important;
  width: 132px !important;
  height: 132px !important;
}

/* Preserve the approved menu placement while making it cleaner. */
.header .nav {
  top: 0 !important;
  padding-top: 24px !important;
  align-items: flex-start !important;
}

/* ---------- FOOTER ---------- */
footer {
  width: 100% !important;
  margin-top: auto !important;
  padding: 20px 0 0 !important;
  box-sizing: border-box !important;
  background: #fffaf2 !important;
}

footer .footer-grid {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 0 4% !important;
}

footer .copyright {
  width: 100vw !important;
  max-width: none !important;
  margin: 12px 0 0 !important;
  padding: 11px 20px !important;
  min-height: 42px !important;
  box-sizing: border-box !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #5a2d18 !important;
  color: #fffaf2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font: 13px/1.4 Arial, sans-serif !important;
}

/* Footer social icons use the same three-icon language as the top bar. */
.footer-socials {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 15px !important;
  margin-top: 9px !important;
}

.footer-socials a {
  width: 19px !important;
  height: 19px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #5a2d18 !important;
}

.footer-socials svg {
  width: 17px !important;
  height: 17px !important;
  display: block !important;
}

/* On short desktop viewports, never create a strip of body color below footer. */
@media (min-width: 781px) {
  body {
    overflow-x: hidden;
  }
}

/* Mobile keeps the same footer treatment and remains flush to viewport. */
@media (max-width: 780px) {
  footer {
    margin-top: auto !important;
    padding-top: 18px !important;
  }

  footer .copyright {
    width: 100vw !important;
    min-height: 42px !important;
    margin-bottom: 0 !important;
  }

  .topbar-inner {
    padding: 0 16px !important;
  }

  .topbar-inner > span {
    font-size: 12px !important;
  }
}


/* ============================================================
   V32 — NAVIGATION TAB ALIGNMENT
   Targeted header-only refinement.
   ============================================================ */

/*
 * The navigation currently sits too low inside the header.
 * Raise the complete menu as one unit so HOME, CAKES, BROWNIES,
 * COOKIES, COMBOS, ABOUT US and CONTACT sit on the same visual
 * line as the approved reference.
 */
@media (min-width: 781px) {
  .header .nav {
    top: -3px !important;
    padding-top: 18px !important;
    transform: translateY(-5px) !important;
  }

  .header .nav > a,
  .header .nav .cake-toggle {
    line-height: 1.1 !important;
  }
}


/* ============================================================
   V33 — MATCH THE SHARED HEADER REFERENCE
   Header/navigation only. No other homepage section changed.
   ============================================================ */
@media (min-width: 781px) {
  .header {
    height: 76px !important;
  }

  .header-inner {
    height: 76px !important;
    padding: 0 !important;
  }

  /* Smaller, cleaner logo footprint matching the reference. */
  .header .logo {
    left: 20px !important;
    top: 2px !important;
    width: 92px !important;
    height: 92px !important;
  }

  .header .logo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
  }

  /* Center the complete menu as one compact row. */
  .header .nav {
    position: absolute !important;
    left: 50% !important;
    top: 0 !important;
    transform: translateX(-50%) !important;
    height: 76px !important;
    padding-top: 14px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 24px !important;
    white-space: nowrap !important;
    font-size: 13px !important;
    line-height: 1.1 !important;
  }

  .header .nav > a,
  .header .nav .nav-dropdown,
  .header .nav .cake-toggle {
    font-size: 13px !important;
    line-height: 20px !important;
    white-space: nowrap !important;
  }

  .header .nav > a.active {
    padding-bottom: 7px !important;
  }

  .header .nav .cake-toggle span {
    font-size: 10px !important;
    margin-left: 3px !important;
  }
}


/* ============================================================
   V34 — HEADER PROPORTIONS / REFERENCE MATCH
   Header only. All other homepage sections remain unchanged.
   ============================================================ */

@media (min-width: 781px) {

  /* Keep the announcement bar exactly as approved. */
  .topbar,
  .topbar-inner {
    height: 54px !important;
  }

  /* Restore the larger logo proportion from the approved reference. */
  .header {
    top: 54px !important;
    height: 78px !important;
  }

  .header-inner {
    height: 78px !important;
  }

  .header .logo {
    left: 36px !important;
    top: 3px !important;
    width: 132px !important;
    height: 132px !important;
  }

  /* Navigation sits as a compact centered row, not as a separate band. */
  .header .nav {
    left: 48% !important;
    top: 0 !important;
    transform: translateX(-50%) !important;
    height: 78px !important;
    padding-top: 14px !important;
    gap: 29px !important;
    font: 500 14px/20px var(--serif) !important;
    align-items: flex-start !important;
    background: transparent !important;
  }

  .header .nav > a,
  .header .nav .nav-dropdown,
  .header .nav .cake-toggle {
    font-size: 14px !important;
    line-height: 20px !important;
  }

  .header .nav > a.active {
    padding-bottom: 7px !important;
  }

  .header .nav .cake-toggle span {
    font-size: 10px !important;
    margin-left: 3px !important;
  }
}


/* ============================================================
   V35 — HERO CANVAS ALIGNMENT
   Targeted hero-only refinement.
   ============================================================ */

@media (min-width: 781px) {
  .hero {
    position: relative !important;
    overflow: hidden !important;
  }

  /* The cake/photo belongs to the same canvas as the left copy.
     Remove the artificial vertical offset that made the two halves
     read as separate sections. */
  .hero-photo {
    top: 0 !important;
    height: 100% !important;
  }

  .hero-photo img {
    height: 100% !important;
  }

  /* Keep the approved left-copy position while sharing the same
     hero coordinate system with the image. */
  .hero-content {
    padding-top: 118px !important;
  }

  .hero .kicker {
    margin-top: 0 !important;
  }
}


/* ============================================================
   V36 — APPROVED HERO: SPACIOUS + LOWER CAKE
   Targeted hero refinement only.
   ============================================================ */

@media (min-width: 781px) {

  /* Give the hero back the vertical breathing room of the approved mockup. */
  .hero {
    height: 760px !important;
    min-height: 760px !important;
  }

  /* Keep the right image full-height, but visually lower the cake/photo
     without creating a gap between navbar and hero. */
  .hero-photo {
    top: 22px !important;
    height: calc(100% - 22px) !important;
  }

  .hero-photo img {
    width: 102% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  /* Preserve the approved spacious left composition. */
  .hero-content {
    padding-top: 118px !important;
  }

  .hero .kicker {
    margin-bottom: 14px !important;
  }

  .hero h1 {
    margin-top: 0 !important;
  }

  .hero p {
    margin-top: 0 !important;
  }
}

/* Mobile: do not force the desktop hero height. */
@media (max-width: 780px) {
  .hero {
    height: auto !important;
    min-height: 0 !important;
  }

  .hero-photo {
    top: 0 !important;
    height: auto !important;
  }
}


/* ============================================================
   V37 — SEAMLESS HEADER → HERO CANVAS
   Targeted hero image alignment only.
   ============================================================ */

@media (min-width: 781px) {

  /*
   * The previous 22px top offset created a visible horizontal
   * boundary on the right, making the header and hero look like
   * two separate sections.
   *
   * The photo now begins at the very top of the hero canvas.
   * The cake is lowered optically through object positioning
   * instead of moving the entire photo block downward.
   */
  .hero-photo {
    top: 0 !important;
    height: 100% !important;
    background: transparent !important;
  }

  .hero-photo img {
    width: 102% !important;
    height: 100% !important;
    margin-left: -1% !important;
    object-fit: cover !important;
    object-position: center 56% !important;
    display: block !important;
  }

  /*
   * Keep the navigation transparent so the hero's cream/image
   * canvas visually continues behind it.
   */
  .header,
  .header-inner,
  .header .nav {
    background: transparent !important;
  }

  .header {
    box-shadow: none !important;
    border-bottom: 0 !important;
  }
}


/* ============================================================
   FINAL RESPONSIVE QA — MOBILE NAV + OVERFLOW SAFETY
   Does not alter the approved desktop header.
   ============================================================ */

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

@media (max-width: 780px) {
  /* Keep the mobile header above every inner-page section. */
  .header {
    z-index: 1000 !important;
  }

  .header-inner {
    position: relative;
    z-index: 1001 !important;
  }

  .hamburger {
    position: relative;
    z-index: 1004 !important;
    pointer-events: auto !important;
  }

  .header .nav {
    z-index: 1003 !important;
    pointer-events: auto !important;
  }

  .header .nav.open {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .header .nav > a,
  .header .nav .cake-toggle {
    pointer-events: auto !important;
  }

  /* Prevent long product/detail content from creating horizontal scrolling. */
  img,
  video,
  iframe {
    max-width: 100%;
  }

  .product-grid,
  .related-grid,
  .product-detail,
  .contact-main,
  .detail-story,
  .products-note,
  .contact-cta {
    max-width: 100%;
  }
}


/* ============================================================
   MOBILE HEADER FINAL FIX — V38
   This block is intentionally last so no older desktop/header
   refinements can override the mobile navigation.
   ============================================================ */

@media (max-width: 780px) {

  .topbar {
    position: relative !important;
    z-index: 2000 !important;
    height: 54px !important;
    min-height: 54px !important;
  }

  .topbar-inner {
    height: 54px !important;
    padding: 0 16px !important;
  }

  .header {
    position: absolute !important;
    top: 54px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 76px !important;
    min-height: 76px !important;
    z-index: 2000 !important;
    background: transparent !important;
    overflow: visible !important;
  }

  .header-inner {
    position: relative !important;
    width: 100% !important;
    height: 76px !important;
    min-height: 76px !important;
    padding: 0 18px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    overflow: visible !important;
  }

  .header .logo {
    position: absolute !important;
    left: 18px !important;
    top: 4px !important;
    width: 68px !important;
    height: 68px !important;
    z-index: 2004 !important;
    display: block !important;
  }

  .header .logo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
  }

  .header .hamburger {
    position: absolute !important;
    right: 18px !important;
    top: 17px !important;
    width: 48px !important;
    height: 48px !important;
    margin: 0 !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 5px !important;
    border: 1px solid #dfc5a4 !important;
    background: #fffaf3 !important;
    color: #542711 !important;
    z-index: 2010 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
  }

  .header .hamburger i {
    display: block !important;
    width: 25px !important;
    height: 2px !important;
    flex: 0 0 2px !important;
    margin: 0 !important;
    background: #542711 !important;
  }

  /* The mobile menu is a full-width dropdown directly below the header. */
  .header .nav {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 76px !important;
    width: 100% !important;
    height: auto !important;
    max-height: calc(100vh - 130px) !important;
    margin: 0 !important;
    padding: 10px 22px 18px !important;
    box-sizing: border-box !important;
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    transform: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    white-space: normal !important;
    background: #fffaf3 !important;
    border-top: 1px solid #dfc5a4 !important;
    border-bottom: 1px solid #dfc5a4 !important;
    box-shadow: 0 14px 30px rgba(84,39,17,.16) !important;
    z-index: 2008 !important;
  }

  .header .nav.open {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .header .nav > a,
  .header .nav .nav-dropdown,
  .header .nav .cake-toggle {
    width: 100% !important;
    min-height: 48px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 13px 4px !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #542711 !important;
    text-align: left !important;
    font: 500 16px/1.2 var(--serif) !important;
    white-space: normal !important;
    transform: none !important;
  }

  .header .nav > a.active {
    color: #b87827 !important;
    border: 0 !important;
    padding-bottom: 13px !important;
  }

  .header .nav .nav-dropdown {
    position: static !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .header .nav .cake-toggle {
    cursor: pointer !important;
  }

  .header .nav .cake-toggle span {
    margin-left: 7px !important;
    font-size: 12px !important;
  }

  .header .nav .dropdown-menu {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 0 6px 15px !important;
    display: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .header .nav .nav-dropdown.open .dropdown-menu {
    display: block !important;
  }

  .header .nav .dropdown-menu a {
    display: block !important;
    padding: 10px 4px !important;
    color: #79553d !important;
    text-decoration: none !important;
    font: 14px/1.3 var(--serif) !important;
  }

  /* Keep the page content below the mobile header rather than underneath it. */
  .hero {
    padding-top: 76px !important;
  }

  .product-detail-wrap,
  .products-toolbar,
  .contact-main {
    position: relative !important;
    z-index: 1 !important;
  }

  body.parcel-modal-open {
    overflow: hidden !important;
  }
}


/* ============================================================
   FINAL DESKTOP NAVIGATION FIT
   Fixes the horizontal overflow by reserving space for the logo
   and sizing the navigation inside the remaining viewport.
   Mobile header rules above remain unchanged.
   ============================================================ */
@media (min-width: 781px) {
  .header {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .header-inner {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .header .nav {
    left: 165px !important;
    right: 24px !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: clamp(8px, 1.35vw, 20px) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    font-size: clamp(10px, 1.05vw, 14px) !important;
  }

  .header .nav > a,
  .header .nav > .nav-dropdown,
  .header .nav .mega-toggle,
  .header .nav .simple-toggle {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    font-size: inherit !important;
    line-height: 20px !important;
  }

  .header .nav .mega-toggle,
  .header .nav .simple-toggle {
    padding-left: 0 !important;
    padding-right: 0 !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--brown) !important;
    font-family: var(--serif) !important;
    font-weight: 500 !important;
    cursor: pointer !important;
  }

  .header .nav .mega-toggle span,
  .header .nav .simple-toggle span {
    margin-left: 3px !important;
    font-size: 10px !important;
  }
}

/* At narrower desktop widths, tighten spacing and type rather than
   allowing the last navigation items to spill off-screen. */
@media (min-width: 781px) and (max-width: 1000px) {
  .header .logo {
    left: 16px !important;
    width: 82px !important;
    height: 82px !important;
  }

  .header .nav {
    left: 108px !important;
    right: 12px !important;
    gap: 7px !important;
    font-size: 10px !important;
  }

  .header .nav > a,
  .header .nav > .nav-dropdown,
  .header .nav .mega-toggle,
  .header .nav .simple-toggle {
    font-size: 10px !important;
    letter-spacing: 0 !important;
  }
}