:root{ --bg:#FDFAF6; --ink:#777777; --heading:#333333; --muted:#9aa3a8; --accent:#111111; --card:#f6f7f8; --ring: rgba(17,17,17,.15); --radius:16px; --wrap:920px; --tint:#fdfaf6; /* subtle cream tint */ --topbar-height: 96px; --gutter: 16px; /* safe side padding for mobile hero text */ --bleed: 16px; /* bottom gap below hero on mobile */ }
html { scroll-behavior: smooth; }

/* Prevent faux bold/italic on fallbacks so the first paint looks closer to Macondo */
html { font-synthesis: none; }

/* Belt & braces on the hero headline */
.hero-text h1 {
  font-style: normal;
  font-weight: 400;
}



/* anchor offset so headings aren’t hidden behind sticky topbar */
.collection-wrap { scroll-margin-top: calc(var(--topbar-height) - 60px); }

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Macondo", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--accent); text-decoration:none}
a:focus-visible, button:focus-visible{outline:3px solid var(--ring); outline-offset:2px}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 16px}

/* Top bar now matches main background */
.topbar{
  position:sticky; top:0; z-index:20;
  background:var(--bg);
  border-bottom:none;
}
.nav{ display:flex; gap:14px; align-items:center; justify-content:center; padding:12px 8px; flex-wrap:wrap; }
.nav a{ padding:10px 12px; border-radius:999px; border:1px solid transparent; }
.nav a:hover{background:rgba(0,0,0,.04)}

.logo{ display:flex; justify-content:center; padding:24px 0 16px; transition:all .3s ease; }
.logo img{width:280px; height:auto; transition:all .3s ease}
.scrolled .logo img{width:80px}
.scrolled .logo{padding:8px 0}

.hero{padding:8px 0 20px}
.hero-media img{
  width:70%;
  height:auto;
  margin:0 auto;
  object-fit:cover;
  border-radius:var(--radius);
}

section{padding:24px 0}
h2{
  margin:.2em 0 .4em;
  font-weight:400;
  color:var(--heading);
  font-size:clamp(24px,6vw,34px);
}
p{margin:.6em 0 1em; line-height:1.6}

.about{
  background:var(--tint);
  border:3px solid #eceff1;
  border-radius:var(--radius);
  padding:36px 22px;
  text-align:center;
}
.about h2{ font-size:clamp(28px,6vw,40px); margin-bottom:18px; }
.about p{ font-size:clamp(18px,3vw,22px); text-align:center; }

.features{display:grid; grid-template-columns:1fr; gap:14px; margin-top:20px}
.feature{font-size:clamp(16px,2.8vw,20px); text-align:center}

/* Collection banners */
.collection-bg {
  position: relative;
  background: center/cover no-repeat;
  color:#fff;
  text-align:center;
  display:flex; align-items:center; justify-content:center;
  padding:80px 16px;
  border-radius:var(--radius);
  overflow:hidden;
  margin-bottom: 24px;
  background-image: url("assets/autumn_background-800.jpg");
}
@media (min-width: 821px){
  .collection-bg { background-image: url("assets/autumn_background-1600.jpg"); }
}
@supports (background-image: url("assets/autumn_background-800.webp")) {
  .collection-bg { background-image: url("assets/autumn_background-800.webp"); }
  @media (min-width: 821px){
    .collection-bg { background-image: url("assets/autumn_background-1600.webp"); }
  }
}

/* MAGIC & MYSTERY */
.collection-bg[data-bg="magic"] { background-image: url("assets/magiccollBG-800.jpg"); }
@media (min-width: 821px){
  .collection-bg[data-bg="magic"] { background-image: url("assets/magiccollBG-1600.jpg"); }
}
@supports (background-image: url("assets/magiccollBG-800.webp")) {
  .collection-bg[data-bg="magic"] { background-image: url("assets/magiccollBG-800.webp"); }
  @media (min-width: 821px){
    .collection-bg[data-bg="magic"] { background-image: url("assets/magiccollBG-1600.webp"); }
  }
}

/* COCKTAIL COLLECTION */
.collection-bg[data-bg="cocktail"] { background-image: url("assets/cocktailcollBG-800.jpg"); }
@media (min-width: 821px){
  .collection-bg[data-bg="cocktail"] { background-image: url("assets/cocktailcollBG-1600.jpg"); }
}
@supports (background-image: url("assets/cocktailcollBG-800.webp")) {
  .collection-bg[data-bg="cocktail"] { background-image: url("assets/cocktailcollBG-800.webp"); }
  @media (min-width: 821px){
    .collection-bg[data-bg="cocktail"] { background-image: url("assets/cocktailcollBG-1600.webp"); }
  }
}

.collection-content { position:relative; max-width:700px; z-index:1; }
.collection-content h2 {color:#fff; font-size:clamp(28px,6vw,40px)}
.collection-content p {color:#fff; font-size:clamp(18px,3vw,22px); margin-bottom:24px}
.collection-content .cta-row{justify-content:center; margin-top:20px}
.collection-content .btn{
  background:none; border:none; color:#fff;
  font-size:clamp(20px,4vw,26px); font-weight:700;
  text-decoration:underline; cursor:pointer;
}
.collection-content .footnote{
  font-size:clamp(12px,2vw,14px);
  color:rgba(255,255,255,0.8);
  margin-top:12px;
}

footer{ border-top:0px; color:var(--ink); padding:22px 0 40px; }
footer .foot{ display:flex; flex-direction:column; gap:8px; align-items:center; text-align:center; }

@media (min-width: 820px){
  .logo img{width:320px}
  .scrolled .logo img{width:100px}
  .about{padding:48px 28px}
  .features{grid-template-columns:repeat(3,1fr); gap:16px}
}

/* Cart badge (global) */
.cart-link { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.cart-pill {
  display: inline-block;
  min-width: 18px; height: 18px; line-height: 18px; padding: 0 6px;
  font-size: 12px; border-radius: 999px;
  background: var(--accent); color: #fff;
  vertical-align: middle; visibility: hidden; /* hidden when count is 0 */
}

/* Basket (cart) */
.cart-list{ display:flex; flex-direction:column; gap:12px; }
.cart-row{
  display:grid; grid-template-columns: 88px 1fr auto auto; /* image | info | actions | total */
  gap:16px; align-items:center;
  background:#fff; border:1px solid #eceff1; border-radius:var(--radius);
  padding:12px; box-shadow:0 3px 12px rgba(0,0,0,.06);
}
.cart-img img{ width:72px; height:72px; object-fit:cover; border-radius:12px; }
.cart-info .title{ font-weight:600; color:var(--heading); }
.cart-info .meta{ color:var(--ink); font-size:14px; margin-top:2px; }
.cart-actions{ display:flex; gap:6px; align-items:center; }
.cart-actions .qty-btn{ width:32px; height:32px; border:1px solid #dfe3e7; border-radius:8px; background:#fff; cursor:pointer; }
.cart-actions .qty{ width:56px; height:32px; text-align:center; border:1px solid #dfe3e7; border-radius:8px; }
/* hide number input spinners */
.cart-actions .qty::-webkit-outer-spin-button, .cart-actions .qty::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
.cart-actions .qty{ -moz-appearance: textfield; }
.cart-actions .remove{ margin-left:8px; background:none; border:none; color:#b00; text-decoration:underline; cursor:pointer; }
.cart-empty{ text-align:center; color:var(--muted); padding:10px 0; }
.cart-total{ margin-top:14px; font-weight:700; text-align:right; }

/* === Product gallery test (Pumpkin Spice only) === */
.product-card { position: relative; }
.product-media {
  position: relative; width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden; border-radius: var(--radius);
}
.product-media .slide { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.product-media .slide.is-active { opacity: 1; pointer-events: auto; }
.product-media picture, .product-media img, .product-media video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* dots */
.media-dots { display: none; gap: 8px; justify-content: center; margin-top: 10px; }
.media-dots .dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(0,0,0,.2); border: none; }
.media-dots .dot.is-active { background: var(--accent); }

/* arrows */
.media-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 50%;
  border: none; background: rgba(255,255,255,0.15); backdrop-filter: blur(4px);
  cursor: pointer; display: none; align-items: center; justify-content: center;
}
.media-arrow svg path { stroke: var(--heading); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.media-arrow svg { width: 66px; height: 66px; display: block; }
.media-arrow.prev { left: 14px; }
.media-arrow.next { right: 14px; }
@media (hover:hover) { .product-media:hover .media-arrow { display: inline-flex; } }
.product-card.has-multi .media-dots { display: flex; }

/* Prominent Checkout button */
.btn.checkout-cta {
  background: #777777; background-image: none; color: #ffffff;
  border: 1px solid #6a6a6a; border-radius: 12px; padding: 0.7rem 1.1rem;
}
.btn.checkout-cta:hover { filter: brightness(0.95); }
.btn.checkout-cta:active { filter: brightness(0.9); }
.btn.checkout-cta:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
.btn.checkout-cta:disabled, .btn.checkout-cta[aria-disabled="true"] { opacity: 0.7; cursor: not-allowed; }

/* Basket summary layout */
.cart-summary-lines { margin-top: 8px; }
.cart-summary-lines .sum-row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 4px 0; line-height: 1.2;
}
.cart-summary-lines .sum-row + .sum-row { border-top: 1px solid var(--ring); padding-top: 8px; margin-top: 6px; }
/* Emphasise Total row */
.cart-summary-lines .sum-row.total { font-weight: 800; color: var(--heading); font-size: 1.08rem; }

/* Desktop: tighten spacing between label and price in the summary */
@media (min-width: 900px) {
  .cart-summary-lines { display: inline-block; margin-left: auto; margin-right: 11px; }
  .cart-summary-lines .sum-row { justify-content: flex-end; gap: 16px; }
  .cart-summary-lines .sum-row span:first-child { text-align: right; }
}

/* Mobile basket layout */
@media (max-width: 640px) {
  /* Stack the row: image | info on first line, actions & total below */
  .cart-row { grid-template-columns: 72px 1fr; /* two columns instead of four */ gap: 10px 12px; /* tighter spacing */ align-items: start; }
  .cart-img img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; }
  .cart-info .title { font-size: 1rem; line-height: 1.2; }
  .cart-info .meta { font-size: 0.95rem; color: var(--muted); word-break: break-word; overflow-wrap: anywhere; }
  .cart-actions { grid-column: 1 / -1; justify-self: end; display: inline-grid; grid-auto-flow: column; gap: 8px; margin-top: 4px; }
  .cart-actions .qty { width: 56px; padding: 6px 8px; }
  .line-total { grid-column: 1 / -1; text-align: right; font-weight: 600; margin-top: 2px; }
  .cart-summary-lines { display: block; margin: 10px 0 0 0; }
  .cart-summary-lines .sum-row { justify-content: space-between; gap: 8px; }
}

/* Credits */
.site-credit{ font-size:12px; color: var(--muted); text-align:center; margin-top:4px; }
.site-credit span{ color: var(--heading); font-weight:600; }
@media (max-width:600px){ .foot { gap: 6px; } }

/* Make the hero a positioned container */
.hero { position: relative; }
/* Image stays as-is */
.hero-media img { border-radius: var(--radius); display: block; width: 100%; height: auto; }

/* Headline: same vibe/scale as About */
.hero-text h1 {
  margin: 0 0 12px; font-family: 'Macondo', cursive; font-weight: 400;
  font-size: clamp(28px, 5.2vw, 42px); line-height: 1.15; color: #fff;
}
/* Body copy: comfy width/scale like About */
.hero-text p {
  margin: 0 auto 10px; max-width: 60ch;
  font-size: clamp(18px, 3vw, 22px); line-height: 1.6; color: #fff;
}
/* Safety line slightly smaller */
.hero-text .safety { font-size: clamp(13px, 2.2vw, 15px); opacity: .9; }


/* --- Mobile hero: bottom-anchor text + image "bleed" under it --- */
@media (max-width: 760px){
  .hero > .wrap{
    position: relative; min-height: 70vh;
    padding-top: 16vw; padding-bottom: var(--bleed);
  }
  .hero .hero-media{ position: absolute; inset: 0; z-index: 0; }
  .hero .hero-media img{ width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }
}
@media (max-width: 820px){
  .hero { margin-bottom: 16px; } /* adjust 12–20px to taste */
}

/* Floating cart */
.floating-cart {
  position: fixed; bottom: 20px; right: 20px;
  background: var(--accent); color: #fff;
  padding: 10px 16px; border-radius: 999px;
  font-weight: bold; text-decoration: none; font-size: 15px;
  box-shadow: 0 3px 12px rgba(0,0,0,.25); z-index: 9999;
  transition: background 0.2s ease;
}
.floating-cart:hover { background: #333; }
body.basket-page .floating-cart { display: none; }

/* Trustline & stripe */
.trustline{ display:flex; justify-content:center; margin:10px 0 0; }
.trustline .brand{
  display:inline-flex; align-items:center; gap:10px;
  color: var(--muted); font-size:12px; line-height:1.4; text-decoration:none;
}
.trustline .brand:hover{ color: var(--heading); }
.stripe-chip{ display:inline-flex; align-items:center; justify-content:center; background:#111; border-radius:6px; padding:3px 6px; }
.stripe-logo{ height:18px; width:auto; display:block; }

/* === Gift-wrap modal (brand styled) === */
.gw-backdrop { position: fixed; inset: 0; display: none; place-items: center; background: rgba(0,0,0,0.45); z-index: 9999; }
.gw-backdrop:not([hidden]) { display: grid; }
.gw-dialog {
  position: relative; background: var(--bg); border-radius: var(--radius);
  box-shadow: 0 12px 36px rgba(0,0,0,.25);
  max-width: 540px; width: min(92vw, 540px);
  padding: 24px; text-align: center; animation: gw-pop .25s ease-out;
}
@keyframes gw-pop { from{transform:scale(.95);opacity:0} to{transform:scale(1);opacity:1} }
.gw-close { position: absolute; right: 12px; top: 10px; border: 0; background: transparent; font-size: 22px; cursor: pointer; color: var(--muted); }
.gw-close:hover { color: var(--accent); }
.gw-media img { display: block; width: 100%; border-radius: var(--radius); aspect-ratio: 4/3; object-fit: cover; margin-bottom: 16px; }
#gw-title { font-size: clamp(20px, 5vw, 26px); color: var(--heading); margin: 0 0 8px; }
.gw-sub { color: var(--ink); margin: 0 0 16px; }
.gw-actions, .gw-cta { display: flex; gap: 10px; margin-top: 14px; justify-content: center; flex-wrap: wrap; }

/* Brand buttons */
.btn {
  padding: 10px 16px; border-radius: 999px;
  border: 1px solid #dfe3e7; background: #555; color: #fff;
  font-weight: 600; cursor: pointer; min-height: 44px;
  transition: background .2s ease, color .2s ease;
}
.btn:hover { background: var(--accent); color: #fff; }

/* Ghost buttons */
.btn-ghost { background: transparent; color: var(--accent); border: 1px solid transparent; }
.btn-ghost:hover { background: rgba(0,0,0,.05); }

/* Freestyle textarea (modal + card reuse) */
#gw-text{
  width: 100%; min-height: 90px; padding: 10px;
  border: 1px solid #dfe3e7; border-radius: var(--radius);
  resize: vertical; font: inherit; margin-top: 8px; box-sizing: border-box;
}
.gw-count{ text-align: right; font-size: 12px; color: var(--muted); margin-top: 4px; }

@media (max-width: 480px) { .gw-actions, .gw-cta { flex-direction: column; } .gw-actions .btn, .gw-cta .btn { width: 100%; } }

/* === Gift-wrap card layout (image + content) === */
.giftwrap .gw-layout {
  display: grid; grid-template-columns: 112px 1fr; /* image | content */
  gap: 12px; align-items: center;
}
/* Gift-wrap image override */
.giftwrap .cart-img img {
  width: 150px; /* bump up from 72px → try 100px */
  height: 150px; object-fit: cover; border-radius: 12px;
}
@media (max-width: 640px) { .giftwrap .gw-layout { grid-template-columns: 72px 1fr; } }

/* Center gift-wrap checkbox + text only (keeps freestyle box as-is) */
.gw-row {
  display: flex; justify-content: center;
  align-items: center;
  gap: 8px; text-align: center;
  width: 100%;
}
.gw-row span {
  display: flex; flex-direction: column;
  align-items: center;
  line-height: 1.3;
}

/* “Can’t find?” panel */
.help-box {
  background: var(--card); border: 1px solid #eceff1;
  border-radius: var(--radius); box-shadow: 0 3px 12px rgba(0,0,0,.06);
  margin: 28px 0 36px; padding: 24px 0; text-align: center;
}
.help-box h3 { margin: 0 0 8px; color: var(--heading); font-size: clamp(20px, 4.5vw, 24px); font-weight: 600; }
.help-box p { margin: 0 auto; max-width: 60ch; color: var(--ink); font-size: 15px; line-height: 1.6; }
.help-box a { color: var(--accent); text-decoration: underline; }

/* Mobile: force a visible gap under the hero video (outside the absolute media) */
@media (max-width: 820px){
  .hero { margin-bottom: 24px; }
  .hero::after{
    content: "";
    display: block; height: 12px;
  }
}

/* Collections grid */
.collections-grid .grid {
  display: grid; gap: 16px; grid-template-columns: 1fr; /* mobile: 1-up */
}
@media (min-width: 600px) {
  .collections-grid .grid { grid-template-columns: repeat(2, 1fr); } /* tablet: 2-up */
}
@media (min-width: 980px) {
  .collections-grid .grid { grid-template-columns: repeat(3, 1fr); } /* desktop: 3-up */
}

/* Cards in grid: lock size + overlay */
.collections-grid .format-card{
  display:block;
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  cursor:pointer;
  margin:0;
  aspect-ratio:4 / 3; /* 🔒 card = 4:3, prevents “tall invisible” areas */
}
.collections-grid .format-card picture,
.collections-grid .format-card img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:var(--radius);
}
.collections-grid .format-card .label{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:16px; text-align:center;
  color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.45);
  background:transparent; pointer-events:none;
}
.collections-grid .format-card .label h3{ margin:0 0 6px; font-size:18px; }
.collections-grid .format-card .label p{ margin:0; font-size:14px; opacity:.95; }
/* Hide any legacy under-image captions */
.collections-grid .format-card .inner{ display:none !important; }

/* Keep link colors neutral */
.collections-grid .format-card:link,
.collections-grid .format-card:visited{ color:inherit; }

/* Hover niceties */
@media (hover:hover){
  .collections-grid .format-card:hover .label .cta { text-decoration: none; }
  .collections-grid .format-card:hover img { transform: scale(1.02); }
}

/* Inset the Autumn banner to match the grid's max width */
.collection-bg[data-bg="autumn"]{
  max-width: var(--wrap);
  margin: 28px auto;
  border-radius: var(--radius);
  overflow: hidden;
}
@media (max-width: 820px){
  .collection-bg[data-bg="autumn"]{ padding-left: 16px; padding-right: 16px; }
}

/* Inset the About banner to match the grid/autumn width */
.about-bg{
  max-width: var(--wrap); margin: 28px auto;
  border-radius: var(--radius); overflow: hidden;
}
@media (max-width: 820px){
  .about-bg{ padding-left: 16px; padding-right: 16px; }
}

/* Make the "other collections" grid a bit smaller on mobile */
@media (max-width: 640px){
  .collections-grid .grid{ justify-items: center; gap: 12px; }
  .collections-grid .format-card{ width: 88%; } /* generic mobile width */
  /* (note: no 16:9 override; cards stay 4:3) */
  .collections-grid .format-card .label h3{ font-size: 16px; }
  .collections-grid .format-card .label p,
  .collections-grid .format-card .label .cta{ font-size: 13px; }
}

/* Space between hero CTA and safety line */
.hero-ctas { margin-top: 20px; }
.hero-ctas + .safety { margin-top: 12px; }
@media (max-height: 560px){ .hero-ctas + .safety { margin-top: 12px; } }

/* This controls the bottom padding of the hero text block */
.hero-text { padding: 0 2px clamp(96px, 3.8vw, 56px); }

/* --------- OVERRIDES & TWEAKS --------- */

/* Reduce pale card backgrounds (belt & braces) */
.collections-grid .format-card { background:none !important; box-shadow:none; }

/* Seasonal banner → grid seam tighter on phones (keep) */
@media (max-width: 640px){
  .collection-bg[data-bg="halloween"],
  .collection-bg[data-bg="magic"],
  .collection-bg[data-bg="cocktail"]{
    margin-bottom:12px !important; /* neater seam */
  }
  .collection-bg[data-bg="halloween"] ~ .collections-grid .grid,
  .collection-bg[data-bg="magic"] ~ .collections-grid .grid,
  .collection-bg[data-bg="cocktail"] ~ .collections-grid .grid{
    gap:8px !important; /* tighter than default 12px */
  }
}

/* ✅ MOBILE-ONLY: make Halloween / M&M / Cocktail match AUTUMN banner exactly */
@media (max-width: 640px){
  /* same padding/size as .collection-bg defaults */
  .collection-bg[data-bg="halloween"],
  .collection-bg[data-bg="magic"],
  .collection-bg[data-bg="cocktail"]{
    padding:80px 16px !important;
    /* color already white from base .collection-bg */
  }

  /* same typography as base .collection-content on Autumn */
  .collection-bg[data-bg="halloween"] .collection-content h2,
  .collection-bg[data-bg="magic"] .collection-content h2,
  .collection-bg[data-bg="cocktail"] .collection-content h2{
    font-size:clamp(28px,6vw,40px) !important;
    color:#fff !important;
  }
  .collection-bg[data-bg="halloween"] .collection-content p,
  .collection-bg[data-bg="magic"] .collection-content p,
  .collection-bg[data-bg="cocktail"] .collection-content p{
    font-size:clamp(18px,3vw,22px) !important;
    color:#fff !important;
  }

  /* ensure the following grid tiles keep the normal mobile size (not 70%) */
  .collection-bg[data-bg="halloween"] ~ .collections-grid .grid .format-card,
  .collection-bg[data-bg="magic"] ~ .collections-grid .grid .format-card,
  .collection-bg[data-bg="cocktail"] ~ .collections-grid .grid .format-card{
    width:88% !important; /* match generic mobile grid scale */
  }
}


/* === MOBILE: make Halloween / M&M / Cocktail mirror Autumn === */
@media (max-width: 640px){
  /* Make the seasonal grids behave like full-width banners */
  .collection-bg[data-bg="halloween"] ~ .collections-grid .grid,
  .collection-bg[data-bg="magic"] ~ .collections-grid .grid,
  .collection-bg[data-bg="cocktail"] ~ .collections-grid .grid {
    justify-items: stretch;   /* fill container width */
    gap: 16px;                /* Autumn-like breathing room */
  }

  /* Full-width cards + taller proportion (like Autumn) */
  .collection-bg[data-bg="halloween"] ~ .collections-grid .format-card,
  .collection-bg[data-bg="magic"]     ~ .collections-grid .format-card,
  .collection-bg[data-bg="cocktail"]  ~ .collections-grid .format-card {
    width: 100%;              /* override any 88% width */
  }
  .collection-bg[data-bg="halloween"] ~ .collections-grid .format-card img,
  .collection-bg[data-bg="magic"]     ~ .collections-grid .format-card img,
  .collection-bg[data-bg="cocktail"]  ~ .collections-grid .format-card img {
    aspect-ratio: 4 / 3;      /* taller, Autumn-like proportion */
  }

  /* Typography to match Autumn’s scale & color */
  .collection-bg[data-bg="halloween"] ~ .collections-grid .format-card .label h3,
  .collection-bg[data-bg="magic"]     ~ .collections-grid .format-card .label h3,
  .collection-bg[data-bg="cocktail"]  ~ .collections-grid .format-card .label h3 {
    font-size: clamp(28px, 6vw, 40px);
    margin-bottom: 12px;
    color: #fff;
  }
  .collection-bg[data-bg="halloween"] ~ .collections-grid .format-card .label p,
  .collection-bg[data-bg="magic"]     ~ .collections-grid .format-card .label p,
  .collection-bg[data-bg="cocktail"]  ~ .collections-grid .format-card .label p {
    font-size: clamp(18px, 3vw, 22px);
    color: #fff;
  }
  .collection-bg[data-bg="halloween"] ~ .collections-grid .format-card .label .cta,
  .collection-bg[data-bg="magic"]     ~ .collections-grid .format-card .label .cta,
  .collection-bg[data-bg="cocktail"]  ~ .collections-grid .format-card .label .cta {
    font-size: clamp(20px, 4vw, 26px);
    margin-top: 20px;
    color: #fff;
  }
}
/* === MOBILE: make the first seasonal grid mirror Autumn’s look === */
@media (max-width: 640px){
  /* Let cards fill the container width, like the Autumn banner */
  .collections-grid.wrap .grid{
    justify-items: stretch;
    gap: 16px; /* autumn-like breathing room */
  }

  /* Full-width card, banner-like height */
  .collections-grid.wrap .grid > .format-card{
    width: 100% !important;
    aspect-ratio: 2 / 1;           /* taller, banner-like proportion */
    border-radius: var(--radius);
    overflow: hidden;
  }

  /* Make the image follow the card’s aspect ratio (override any 16:9) */
  .collections-grid.wrap .grid > .format-card img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: auto !important; /* use container’s ratio, not 16:9 */
  }

  /* Typography: match Autumn section scales & colour */
  .collections-grid.wrap .format-card .label h3{
    font-size: clamp(28px, 6vw, 40px) !important; /* like .collection-content h2 */
    margin: 0 0 12px;
    color: #fff !important;
  }
  .collections-grid.wrap .format-card .label p{
    font-size: clamp(18px, 3vw, 22px) !important; /* like Autumn body */
    color: #fff !important;
  }
  .collections-grid.wrap .format-card .label .cta{
    font-size: clamp(20px, 4vw, 26px) !important; /* like Autumn CTA */
    margin-top: 20px;
    color: #fff !important;
    text-decoration: underline;
    font-weight: 700;
  }
}


/* MOBILE: make the seasonal collections grid full-bleed */
@media (max-width: 640px){
  /* remove the .wrap side padding just for this section */
  .collections-grid.wrap {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* stretch items so cards fill the full width */
  .collections-grid.wrap .grid {
    justify-items: stretch;
  }

  /* ensure each card spans the full width (override any 88% rule) */
  .collections-grid.wrap .grid > .format-card {
    width: 100% !important;
  }

  /* If you want *truly* flush-to-glass edges (no rounded corners), uncomment:
  .collections-grid.wrap .format-card,
  .collections-grid.wrap .format-card picture,
  .collections-grid.wrap .format-card img {
    border-radius: 0 !important;
  } */
}

/* DESKTOP: grid overlay text uses the standard pale colour */
@media (min-width: 980px){
  .collections-grid .format-card .label h3,
  .collections-grid .format-card .label p,
  .collections-grid .format-card .label .cta{
    color: var(--bg) !important; /* #FDFAF6 */
    text-shadow: 0 1px 2px rgba(0,0,0,.45); /* keep legible over photos */
  }
}

/* MOBILE: Autumn banner title matches grid card titles */
@media (max-width: 640px){
  .collection-bg[data-bg="autumn"] .collection-content h2{
    font-size: 16px;      /* match grid card title size */
    font-weight: 700;     /* match h3 boldness */
    color: #fff;          /* same white as grid overlays */
    margin-bottom: 6px;   /* keeps the same compact rhythm */
  }
}


/* DESKTOP: underline the "Explore …" CTA in grid overlays */
@media (min-width: 980px){
  .collections-grid .format-card .label .cta,
  .collections-grid .format-card .label a {
    text-decoration: underline !important;
  }

  /* keep underline on hover (overrides any earlier rule that removes it) */
  @media (hover:hover){
    .collections-grid .format-card:hover .label .cta,
    .collections-grid .format-card:hover .label a {
      text-decoration: underline !important;
    }
  }
}

/* MOBILE: make Autumn title match grid collection titles */
@media (max-width: 640px){
  .collection-bg[data-bg="autumn"] .collection-content h2{
    font-size: 28px !important;  /* same as mobile grid h3 */
    font-weight: 700 !important; /* same boldness */
    color: #fff;                  /* same overlay colour as grid */
    margin-bottom: 6px;           /* matches compact grid rhythm */
  }
}

/* --- Independent hero overlay positioning --- */
/* 1) Give each element its own vertical offset via CSS vars */
.hero-text {
  position: relative;                 /* lets children shift without breaking layout */
  --h1-y:      0px;                   /* mobile defaults */
  --lead-y:    0px;
  --cta-y:     0px;
  --safety-y:  0px;
}

/* 2) Apply those offsets (no HTML changes needed) */
.hero-text h1                 { position: relative; transform: translateY(var(--h1-y)); }
.hero-text p:not(.safety)     { position: relative; transform: translateY(var(--lead-y)); }
.hero-ctas                    { position: relative; transform: translateY(var(--cta-y)); }
.hero-text .safety            { position: relative; transform: translateY(var(--safety-y)); }

/* Optional: fine-grained spacing controls if you prefer margin tweaks */
.hero-text h1             { margin-bottom: .45em; }
.hero-text p:not(.safety) { margin-top: .4em; margin-bottom: .4em; }
.hero-ctas                { margin-top: 16px; }
.hero-text .safety        { margin-top: 30px; }

/* 3) Mobile-specific positions */
@media (max-width: 820px){
  .hero-text{
    /* move elements up (negative) or down (positive) in pixels */
    --h1-y:    -200px;     /* lift the title slightly */
    --lead-y:  -50px;     /* tiny lift for the paragraph */
    --cta-y:    -35px;     /* nudge button down a touch */
    --safety-y: 90px;    /* push safety line lower */
  }
}

/* 4) Desktop-specific positions */
@media (min-width: 821px){
  .hero-text{
    --h1-y:     -215px;
    --lead-y:   -45px;     /* drop the lead a little below the title */
    --cta-y:   -50px;     /* drop the button a bit more */
    --safety-y: 115px;    /* keep safety line comfortably low */
  }
}

/* New flexbox overlay to centre hero text */
.hero-overlay {
  position: absolute;
  inset: 0; /* fill the entire hero-media box */
width: 100%;
  display: flex;
  justify-content: center;   /* vertical centering */
  align-items: center;       /* horizontal centering */
  text-align: center;
  padding: var(--gutter);
  pointer-events: none;      /* so clicks pass through unless child re-enables */
}

.hero-overlay .hero-text {
  pointer-events: auto;      /* keep links/buttons clickable */
  width: min(92%, 42ch);     /* readable line length */
}

@media (max-width: 820px){
  .collection-bg[data-bg="autumn"]{ margin-top: 0; }     /* remove top margin */
  .hero{ margin-bottom: 12px; }                          /* single, controlled gap */
}