/* =========================================================
   OCHRE UI OVERRIDES
   Purpose: Safe, scoped UI fixes without touching style.css
   ========================================================= */

/* Commercials overrides moved to static/css/commercials-overrides.css */
  display: block;
}

/* =========================================================
   AUTHORITATIVE: COLLAPSE SECTION AFTER HOME HERO
   Targets the section/div immediately following the hero and
   forces it to collapse to its content height.
   ========================================================= */
.content.home-content section.home-hero + section,
.content.home-content section.home-hero + div,
.content.home-content section.home-hero + .collections-page,
.content.home-content section.home-hero + .section,
.content.home-content section.home-hero + .container,
.content.home-content section.home-hero + .content-section,
.content.home-content section.home-hero + .home-section {
  /* HARD OVERRIDE: authoritative spacing owner for first section after hero/CTA */
  margin-top: 0 !important;
  padding-top: 32px !important;
  padding-block-start: 32px !important;
  padding-block-end: 0 !important;
  padding-bottom: 0 !important;
  min-height: auto !important;
  height: auto !important;
  display: block !important;
  align-items: unset !important;
  justify-content: unset !important;
  place-items: unset !important;
}

@media (max-width: 768px) {
  .content.home-content section.home-hero + section,
  .content.home-content section.home-hero + div,
  .content.home-content section.home-hero + .collections-page,
  .content.home-content section.home-hero + .section,
  .content.home-content section.home-hero + .container,
  .content.home-content section.home-hero + .content-section,
  .content.home-content section.home-hero + .home-section {
    margin-top: 0 !important;
    padding-top: 24px !important;
    padding-block-start: 24px !important;
    padding-block-end: 0 !important;
  }
}

/* ===============================
   HOME PAGE — CTA SPACING FIX
   Reduce top spacing above CTA buttons so they feel connected to hero
   =============================== */
.content.home-content .buttons.home-cta-buttons {
  margin-top: 24px !important; /* reduced spacing */
}

@media (max-width: 768px) {
  .content.home-content .buttons.home-cta-buttons {
    margin-top: 12px !important; /* reduced mobile spacing */
  }
}

/* =========================================================
   IDENTIFIED CTA WRAPPER FIX
   Exact rendered wrapper immediately after section.home-hero:
   element classes: "buttons home-cta-buttons"
   ========================================================= */
.content.home-content > .buttons.home-cta-buttons {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
  margin-top: 0 !important;
  min-height: auto !important;
  height: auto !important;
  display: block !important;
  align-items: unset !important;
  justify-content: unset !important;
  place-items: unset !important;
}

/* If a residual gap remains due to legacy flow (header affects layout),
   apply a small controlled negative nudge to close the band. */
header ~ .content.home-content > .buttons.home-cta-buttons {
  margin-top: -24px !important;
}

/* =========================================================
   FIRST FOLD — HOUSE FAVOURITES TYPOGRAPHY & SPACING
   Targets only the first collections-page (HANDPICKED SELECTION)
   ========================================================= */

.content.home-content .collections-page:first-of-type .collections-header .description {
  max-width: 640px;
  text-align: left;
  margin-top: 12px;
  margin-bottom: 32px;
}

/* AUTHORITATIVE OWNER: first content section takes spacing from hero/CTA */
.content.home-content .collections-page:first-of-type,
.content.home-content .section:first-of-type,
.content.home-content .container:first-of-type {
  padding-top: 32px !important;
  margin-top: 0 !important;
  padding-block-start: 32px !important;
  padding-block-end: 0 !important;
}

@media (max-width: 768px) {
  .content.home-content .collections-page:first-of-type,
  .content.home-content .section:first-of-type,
  .content.home-content .container:first-of-type {
    padding-top: 24px !important;
    padding-block-start: 24px !important;
  }
}

/* Ensure CTA container itself does not add spacing above the first section */
.content.home-content > .buttons.home-cta-buttons {
  margin-bottom: 0 !important;
}

/* Mobile / tablet: allow the description to be full width and reduce CTA spacing */
@media (max-width: 768px) {
  .content.home-content .collections-page:first-of-type .collections-header .description {
    max-width: none;
  }
  .content.home-content > .buttons.home-cta-buttons {
    margin-bottom: 24px !important;
  }
}

/* FIRST-SECTION-ONLY override: authoritative spacing owner on home page */
body.home section.collections-page:first-of-type {
  margin-top: 0 !important;
  padding-top: 32px !important;
}

/* =========================================================
   HOME PAGE – VERTICAL SPACING NORMALIZATION
   Purpose: Normalize stacked/duplicated vertical spacing on Home.
   Rules are strictly scoped under `body.home`. Add-only and safe.
   ========================================================= */

/* 1) Navbar → Hero: reduce gap so hero sits directly under navbar. */
body.home .home-hero {
  padding-top: 0 !important; /* remove green gap between navbar and carousel */
  /* Keep internal hero layout intact; only adjust block spacing */
}

/* 2) Hero → CTA: target ~32px. Remove incoming CTA top padding and
   make hero control the bottom spacing. */
body.home .home-hero {
  padding-bottom: 24px !important; /* sets hero → CTA (reduced) */
}
body.home .content.home-content > .buttons.home-cta-buttons {
  padding-top: 0 !important; /* remove stacked incoming CTA top padding */
  margin-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 3) CTA → First section (Featured Products): target ~56px.
   Prefer incoming section to take the top offset (clear ownership). */
body.home .content.home-content .collections-page:first-of-type,
body.home .content.home-content .section:first-of-type,
body.home .content.home-content .container:first-of-type {
  padding-top: 28px !important;
  margin-top: 0 !important;
}
body.home section.collections-page:first-of-type {
  padding-top: 28px !important;
  margin-top: 0 !important;
}

/* 4) Section → Section (between content sections): target ~56px.
   Normalize incoming section top gaps; do not tamper with inner padding. */
body.home .products-section {
  margin-top: 24px !important;
}
body.home .collections-page .experience-section {
  margin-top: 24px !important;
}

/* Ensure a consistent gap after product grids so the next section
   (e.g., "Watch our videos") sits clearly separated. */
  .content.home-content .products-scroll {
  margin-bottom: 24px !important;
}

/* Strong override to catch inline-styled products-scroll instances
   and ensure a visible gap. Use both padding and margin so the
   layout cannot collapse due to parent overflow or stacking context. */
.content.home-content .products-scroll,
.products-scroll,
div.products-scroll[style] {
  padding-bottom: 24px !important;
  margin-bottom: 24px !important;
}

/* Footer: equal-width three-column layout across all pages */
.footer .footer-main {
  display: flex !important;
  gap: 32px !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important; /* allow wrapping on very narrow screens */
}
.footer .footer-column {
  flex: 1 1 0 !important; /* equal width */
  min-width: 0 !important; /* prevents overflow in flex children */
}
@media (max-width: 720px) {
  .footer .footer-main { flex-direction: column !important; gap: 16px !important; }
}

/* Defensive: if a collections-page follows directly, ensure it
   takes the incoming top spacing instead of collapsing. */
.content.home-content .products-scroll + section.collections-page,
.content.home-content section.collections-page + section.collections-page {
  padding-top: 40px !important;
  margin-top: 0 !important;
}

/* Ensure the entire first collections-page reserves space at its bottom
   so the following section (Watch our videos) is visually separated. */
body.home section.collections-page:first-of-type {
  padding-bottom: 40px !important;
  margin-bottom: 0 !important;
}

/* 5) Last section → Footer: target ~64px.
   Ensure wrapper bottom margin + last-section padding produce ~64px. */
body.home .content.home-content {
  margin-bottom: 64px !important;
  padding-bottom: 0 !important;
}

/* =========================================================
   REMOVE GREEN GAP — Home only
   Ensure the `home-content` wrapper and its immediate children
   don't create a visible colored band between hero and sections.
   Scoped tightly to `body.home` so other pages are unaffected.
   ========================================================= */
body.home .content.home-content,
body.home .content.home-content > section,
body.home .content.home-content > .collections-page,
body.home .content.home-content > .products-section,
body.home .content.home-content > div {
  margin-top: 0 !important;
  padding-top: 0 !important;
  background: transparent !important;
}

/* Notes:
   - These overrides prefer removing incoming top spacing and centralize
     spacing under `body.home` for minimal cross-page impact.
   - Avoid negative margins. If any residual overlap remains (rare),
     report before further changes.
*/

/* END HOME PAGE – VERTICAL SPACING NORMALIZATION */

/* =========================================================
   TIGHTEN: internal gaps between entries inside `.content.home-content`
   Purpose: Reduce green whitespace between stacked sections that live
   inside the home content wrapper only. Strictly scoped to avoid
   changing global collections/shop/story layouts.
   ========================================================= */
/* Reduce vertical gap between adjacent children of home content */
.content.home-content > * + * {
  margin-top: 18px !important;
}

/* Reduce heavy incoming top margins inside collections and products sections */
.content.home-content .collections-page,
.content.home-content .products-section,
.content.home-content .story-content {
  margin-top: 0 !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* Reduce gap specifically for product grids inside home content */
.content.home-content .collections-page .products-section {
  margin: 12px auto 0 !important;
}

/* Tighten story-content internal grid gap when used inside home content */
.content.home-content .story-content {
  gap: 18px !important;
}

/* Clamp heading spacing inside home content sections */
.content.home-content section h1,
.content.home-content section h2 {
  margin-top: 8px !important;
  margin-bottom: 12px !important;
}


/* HOME – remove artificial space above hero (wrapper padding fix) */
body.home .content.home-content {
  padding-top: 0 !important;
}

/* Clamp inner header spacing for the first collections-page */
body.home section.collections-page:first-of-type .collections-header {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

body.home section.collections-page:first-of-type h1 {
  margin-top: 16px !important;
}

body.home section.collections-page:first-of-type .subtitle,
body.home section.collections-page:first-of-type .description {
  margin-top: 12px !important;
}

/* =========================================================
   FORCE: Remove top gaps for ALL collections-page instances
   Applies only on the homepage inside the `.content.home-content` wrapper.
   This ensures additional sections added via admin inherit no extra
   incoming top spacing that produces the green band.
   ========================================================= */
body.home .content.home-content .collections-page,
body.home .content.home-content .collections-page .collections-header,
body.home .content.home-content .collections-page .products-section,
body.home .content.home-content .story-content,
body.home .content.home-content .story-text {
  margin-top: 0 !important;
  padding-top: 0 !important;
  min-height: auto !important;
}

/* Tighten product-section default top margin inside home wrapper */
body.home .content.home-content .collections-page .products-section {
  margin-top: 0 !important;
}

/* Aggressive but scoped: remove all vertical padding inside any collections-page
   that lives under the homepage content wrapper. This removes the 40px top/bottom
   bands introduced by various base rules while keeping other pages intact. */
body.home .content.home-content .collections-page,
body.home .content.home-content .collections-page * {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}


/* Strong zeroing for the small band that can appear between
   the collections section and inner story text on the homepage.
   Scoped to `body.home .content.home-content` to avoid affecting
   other pages (collections/story/shop). */
body.home .content.home-content .collections-page,
body.home .content.home-content .collections-page .products-section,
body.home .content.home-content .collections-page .products-section .story-content,
body.home .content.home-content .collections-page .products-section .story-content .story-text {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* If any inner elements add a small top padding, remove it here too. */
body.home .content.home-content .story-text {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Clamp bottom spacing on the content wrapper that contains the CTA
   so the distance between CTA and first collections-page is controlled */
body.home .content.home-content {
  margin-bottom: 48px !important;
  padding-bottom: 0 !important;
}


/* =========================================================
   COMMERCIALS PAGE — HEADER + GRID
   ========================================================= */

body.commercials .page-header {
  text-align: left;
  margin-bottom: 32px;
}

body.commercials .page-header h1 {
  margin-bottom: 8px;
}

body.commercials .page-header p {
  margin-top: 0;
  max-width: 720px;
}

/* ---------- GRID LAYOUT ---------- */

body.commercials .commercials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 3vw, 32px);
  width: 100%;
}

@media (max-width: 1024px) {
  body.commercials .commercials-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  body.commercials .commercials-grid {
    grid-template-columns: 1fr;
  }
}

/* Ensure grid fills container (no right-side gap) */
body.commercials .commercials-grid > * {
  width: 100%;
}

/* Make cards clearly clickable */
body.commercials .commercial-card {
  cursor: pointer;
}

/* =========================================================
   COMMERCIALS — VIDEO PREVIEW
   Handles portrait + landscape cleanly
   ========================================================= */

body.commercials .commercial-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
}

body.commercials .commercial-media video,
body.commercials .commercial-media iframe,
body.commercials .commercial-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================================
   COMMERCIALS — MODAL
   ========================================================= */

#commercials-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

#commercials-modal .modal-inner {
  background: #000;
  width: min(90vw, 1100px);
  max-height: 90vh;
  padding: 24px;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  display: flex;
  flex-direction: column;

}

/* HOME — hero owns height, carousel + image must fully cover it */

/* 1. Define hero height (single source of truth) */
.content.home-content > section.home-hero {
    height: 520px; /* desktop baseline, matches Carlsberg-style hero */
    padding: 0 !important;
    margin: 0 !important;
  }

  /* 2. Force carousel to stretch to hero */
  .content.home-content > section.home-hero .carousel {
    height: 100% !important;
  }

  /* 3. Force slide to stretch */
  .content.home-content > section.home-hero .carousel-slide {
    height: 100% !important;
  }

  /* 4. Force image to fully cover hero */
  .content.home-content > section.home-hero .carousel-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
  }

  /* HOME — remove navbar → hero gap completely */
  .content.home-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }


  .content.home-content > section.home-hero {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* HOME — authoritative hero height */
  .content.home-content > section.home-hero {
    height: calc(100vh - 72px) !important; /* navbar height */
    max-height: 820px;
    min-height: 640px;
    overflow: hidden;
    position: relative;
  }

  /* HOME — force carousel + slides to fully fill hero */
  .content.home-content > section.home-hero .carousel,
  .content.home-content > section.home-hero .carousel-track,
  .content.home-content > section.home-hero .carousel-slide {
    height: 100% !important;
    width: 100% !important;
  }

  /* HOME — force image to cover ALL available space */
  .content.home-content > section.home-hero img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
    display: block;
  }

  /* HOME — CTA belongs to hero, not next scroll */
  .content.home-content > section.home-hero {
    margin-bottom: 0 !important;
  }


  .content.home-content > .buttons.home-cta-buttons {
    margin-top: 24px !important;
    padding: 0 !important;
  }

  /* HOME — allow hero to sit directly under navbar */
  body .content.home-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  section.home-hero {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* HOME — hero fills viewport under navbar */
  section.home-hero {
    height: calc(100vh - var(--navbar-height, 96px)) !important;
    min-height: calc(100vh - var(--navbar-height, 96px)) !important;
    overflow: hidden;
  }

  /* HOME — carousel fills hero */
  section.home-hero .carousel,
  section.home-hero .carousel-track,
  section.home-hero .carousel-slide {
    height: 100% !important;
    min-height: 100% !important;
  }

  /* HOME — images always cover hero regardless of upload size */
  section.home-hero img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
  }

  /* Neutralize legacy fixed heights */
  .carousel,
  .carousel-slide,
  .carousel-slide img {
    max-height: none !important;
  }

  /* HOME — remove carousel offset and fixed height */
  section.home-hero #home-carousel.carousel {
    margin: 0 !important;
    height: 100% !important;
    min-height: 100% !important;
  }

  /* HOME — carousel internals must stretch */
  section.home-hero .carousel-track,
  section.home-hero .carousel-slide {
    height: 100% !important;
  }

  /* HOME — image must cover available space */
  section.home-hero .carousel-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
  }

  /* HOME — hero defines the height */
  section.home-hero {
    height: calc(100vh - 96px) !important;
    overflow: hidden;
  }

  /* REMOVE DEBUG OUTLINES AND FORCE CAROUSEL TO FILL HERO */
  body.home section.collections-page:first-of-type,
  body.home .home-content,
  body.home .content,
  body.home .content.home-content,
  body.home .buttons,
  body.home .home-cta,
  body.home .home-cta-buttons {
    outline: none !important;
    box-shadow: none !important;
  }

  /* Neutralize any remaining fixed margin/height on the home carousel */
  #home-carousel.carousel,
  section.home-hero #home-carousel.carousel,
  .content.home-content section.home-hero #home-carousel.carousel {
    margin: 0 !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;
  }

  /* HOME — break the carousel out of any centered/max-width wrapper so
     background media (images/videos) bleed edge-to-edge on desktop.
     Uses the safe page-scoped selector `section.home-hero` so only the
     home hero is affected. */
  section.home-hero #home-carousel.carousel,
  section.home-hero .carousel-track {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
  }

  /* Ensure slides/media fill the breakout container and cover without
     changing textual/content layout (content may remain centered). */
  section.home-hero .carousel-slide,
  section.home-hero .carousel-slide img,
  section.home-hero .carousel-slide video {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* Prevent horizontal scroll only on the homepage while allowing normal
     behavior elsewhere. */
  body.home {
    overflow-x: hidden !important;
  }

  /* STRONGER BREAKOUT: centering via left/transform is more robust when the
     parent uses padding or contains a centering wrapper. This ensures the
     carousel truly spans the viewport on large screens without touching
     other pages. */
  /* Use calc breakout to overcome parent padding/centering wrappers */
  body.home section.home-hero > .carousel {
    position: relative !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    left: 0 !important;
    right: 0 !important;
  }

  /* Stronger fallback breakout: use left + negative margin so the
     carousel aligns to the viewport even if ancestor transforms/padding
     interfere with calc-based margins. This is safe because it's
     homepage-scoped and uses !important only here. */
  body.home section.home-hero > .carousel.breakout-fallback,
  body.home section.home-hero > .carousel {
    left: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
  }

  /* Allow the carousel to visibly extend outside the hero container so
     its right edge isn't clipped by `section.home-hero` which previously
     had `overflow:hidden`. Scoped to homepage only. */
  body.home section.home-hero {
    overflow: visible !important;
  }

  /* Extra safety: remove any lingering max-width on the carousel and
     ensure the track and slides use viewport widths so media can't be
     constrained by ancestor wrappers. */
  body.home .carousel {
    max-width: none !important;
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }

  body.home section.home-hero .carousel-track {
    width: 100vw !important;
    min-width: 100vw !important;
  }

  body.home section.home-hero .carousel-slide {
    min-width: 100vw !important;
  }

  /* Ensure carousel internals stretch */
  section.home-hero .carousel,
  section.home-hero .carousel-track,
  section.home-hero .carousel-slide {
    height: 100% !important;
    width: 100% !important;
  }

  /* Images must fully cover hero */

  /* =========================================================
     FULL-BLEED HOME HERO (homepage only)
     Scope: `body.home` only — does not affect story/society pages.
     ========================================================= */
  body.home section.home-hero {
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden;
  }

  /* Remove width constraints inside the carousel (homepage only) */
  body.home #home-carousel,
  body.home #home-carousel .carousel-track,
  body.home #home-carousel .carousel-slide {
    width: 100%;
    max-width: none;
  }

  /* Ensure hero media fills the breakout (homepage only) */
  body.home #home-carousel img,
  body.home #home-carousel video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  /* Prevent horizontal scroll on homepage only */
  body.home {
    overflow-x: hidden;
  }

  section.home-hero .carousel-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* Ensure hero container has zero top spacing */
  section.home-hero,
  .content.home-content > section.home-hero {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Specific, high-specificity overrides to beat legacy rules */
  /* Target the exact selector that forces 420px in static/style.css */
  #home-carousel.carousel {
    margin: 0 !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;
  }

  #home-carousel.carousel .carousel-slide img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* TEMP: reduce hero height so CTA fits fully in first viewport */
  /* Hero = viewport minus navbar (72px) minus CTA area (~120px) */
  .content.home-content > section.home-hero {
    height: calc(100vh - 192px) !important;
    max-height: 680px !important;
    min-height: 420px !important;
    overflow: hidden !important;
  }

  /* keep carousel and images filling the (now reduced) hero */
  .content.home-content > section.home-hero .carousel,
  .content.home-content > section.home-hero .carousel-track,
  .content.home-content > section.home-hero .carousel-slide {
    height: 100% !important;
    width: 100% !important;
  }

  .content.home-content > section.home-hero img,
  section.home-hero .carousel-slide img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
  }

  /* HOME — remove navbar to hero gap */
  .content.home-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }


  .content.home-content > section.home-hero {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* HOME — authoritative viewport hero */
  .content.home-content > section.home-hero {
    height: calc(100vh - 72px) !important; /* navbar height */
    min-height: 640px;
    max-height: 820px;
    overflow: hidden;
    position: relative;
  }

  /* HOME — carousel fills hero */
  .content.home-content > section.home-hero .carousel,
  .content.home-content > section.home-hero .carousel-track,
  .content.home-content > section.home-hero .carousel-slide {
    height: 100% !important;
    width: 100% !important;
  }


  /* HOME — image covers entire hero */
  .content.home-content > section.home-hero img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
    display: block;
  }

  /* HOME — CTA belongs to first fold */
  .content.home-content > section.home-hero {
    margin-bottom: 0 !important;
  }


  .content.home-content > .buttons.home-cta-buttons {
    margin-top: 24px !important;
    padding: 0 !important;
  }
  gap: 16px;
}

/* FINAL OVERRIDE: ensure hero is reduced so CTAs appear without scrolling
   Keep this low enough for typical desktop viewports while preserving
   responsive behavior on smaller screens. This rule is intentionally
   placed last to beat earlier repeats in this file. */
.content.home-content > section.home-hero,
section.home-hero.content.home-content {
  height: calc(100vh - 140px) !important; /* viewport minus navbar + CTA */
  max-height: 640px !important;
  min-height: 420px !important;
  overflow: hidden !important;
}

/* Ensure carousel and images respect the reduced hero height */
.content.home-content > section.home-hero .carousel,
.content.home-content > section.home-hero .carousel-track,
.content.home-content > section.home-hero .carousel-slide,
section.home-hero .carousel,
section.home-hero .carousel-track,
section.home-hero .carousel-slide {
  height: 100% !important;
  width: 100% !important;
}

section.home-hero img,
.content.home-content > section.home-hero img,
.content.home-content > section.home-hero .carousel-slide img {
  height: 100% !important;
  width: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Replace clip-path cropping with a safer visual crop:
   make the source image slightly taller and shift it up so the
   visible bottom is trimmed by the container. This preserves
   rounded corners when the carousel has overflow:hidden. */
section.home-hero .carousel-slide img,
.content.home-content > section.home-hero img,
.content.home-content > section.home-hero .carousel-slide img,
#home-carousel.carousel .carousel-slide img {
  -webkit-clip-path: none !important;
  clip-path: none !important;
  height: 115% !important; /* slightly larger than container */
  width: 100% !important;
  object-fit: cover !important;
  object-position: center top !important; /* anchor crop from the top */
  transform: translateY(-8%) !important; /* nudge image upward */
  display: block !important;
}

/* Ensure carousel container shows rounded corners and hides overflow */
.content.home-content > section.home-hero .carousel,
section.home-hero .carousel,
#home-carousel.carousel {
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* Pull the dots slightly closer to the visible image and place them
   a little below the visible image area but above the CTAs. Use a
   centered layout so the dot is visually aligned with the slide. */
#home-carousel.carousel .carousel-dots,
section.home-hero .carousel-dots {
  bottom: 56px !important; /* move the dot up from the bottom edge into space above CTAs */
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 40 !important;
}

/* FINAL TUNE: reduce hero height slightly and ensure minimum gap to CTAs */
.content.home-content > section.home-hero,
section.home-hero.content.home-content {
  height: calc(100vh - 160px) !important; /* a bit shorter to bring buttons up */
  max-height: 600px !important;
  min-height: 380px !important;
  overflow: hidden !important;
}

.content.home-content > .buttons.home-cta-buttons {
  margin-top: 0 !important; /* remove gap between carousel and CTAs */
  padding: 0 !important;
  position: relative !important;
  z-index: 30 !important; /* ensure CTAs sit above decorative elements */
  top: 0 !important; /* reset any negative offset */
  display: flex !important;
  justify-content: center !important;
  gap: 16px !important;
}

/* Mobile: stack CTAs and make buttons full-width for touch devices */
@media (max-width: 768px) {
  .content.home-content > .buttons.home-cta-buttons {
    flex-direction: column !important;
    gap: 12px !important;
    margin-top: 0 !important;
    padding: 0 !important; /* remove container padding so buttons align exactly */
    top: 0 !important;
    width: 100% !important;
    align-items: center !important;
  }

  /* Target CTA buttons inside the container: make them true full-width blocks
     so the second button sits exactly below the first with identical width */
  .content.home-content > .buttons.home-cta-buttons .cn {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    height: 46px !important;
    font-size: 16px !important;
  }

  /* Remove any extra offset for the secondary CTA variant */
  .content.home-content > .buttons.home-cta-buttons .cn.stories {
    margin-left: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Ensure the carousel dots don't overlap CTAs on narrow screens */
  #home-carousel.carousel .carousel-dots,
  section.home-hero .carousel-dots {
    bottom: 88px !important;
  }
}


/* Video container inside modal */
#commercials-modal .modal-media {
  width: 100%;
  flex: 0 0 auto;
  aspect-ratio: 16 / 9;
}

#commercials-modal video,
#commercials-modal iframe {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Remove horizontal gutters on core content containers so there are
   no orange/brown side gaps on desktop or mobile. This targets the
   primary content wrappers used site-wide and is intentionally
   high-specificity and last in file to override legacy rules. */
.content,
.content.home-content,
.content > .products-scroll,
.content.home-content > section,
.products-scroll,
.collections-header,
.main {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Remove vertical padding on the collections header so there's no
   green padding band between the hero and the collections section. */
.content.home-content .collections-page:first-of-type .collections-header,
.collections-header {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
}

/* Text spacing */
#commercials-modal .modal-content h3 {
  margin: 0;
}

#commercials-modal .modal-content p {
  margin: 0;
  max-width: 720px;
}

/* ---------- CLOSE BUTTON (SAFE OVERRIDE) ---------- */

#commercials-modal .modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: transparent !important;
  border: none;
  width: auto !important;
  height: auto !important;
  padding: 6px;
  cursor: pointer;
  z-index: 2;
}

/* Prevent CTA styles leaking */
#commercials-modal .modal-close:hover {
  background: rgba(255,255,255,0.1);
}

/* Debug outlines removed - production styling only */

/* HOMEPAGE: reduce gap between navbar and carousel; keep CTAs above fold */
body.home main { margin-top: 8px; }

/* make the homepage hero slightly less tall so CTA buttons sit in first fold
   - reduce carousel top/bottom margins and cap max-height for large viewports
   - scoped to body.home to avoid affecting other pages */
body.home .carousel {
  margin: 8px auto !important;
  max-height: 70vh !important;
}

body.home .carousel-slide img {
  height: clamp(320px, 55vh, 720px) !important;
  object-fit: cover !important;
}

/* stronger desktop cap so CTA appears without scroll on wide screens */
@media (min-width: 1200px) {
  body.home .carousel { max-height: 60vh !important; }
  body.home .carousel-slide img { height: clamp(360px, 50vh, 720px) !important; }
}

/* ensure CTA buttons area has no extra top margin */
body.home .home-cta-buttons { margin-top: 8px !important; margin-bottom: 12px !important; }

/* HOME: Play overlay (scoped to home products-scroll only) */
.products-scroll .collection-card {
  position: relative;
}

.products-scroll .home-play-overlay {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  transition: transform 0.2s ease, background 0.2s ease;
}

.products-scroll .home-play-overlay i,
.products-scroll .home-play-overlay svg {
  color: #ffffff;
  font-size: 22px;
  margin-left: 3px; /* optical centering for triangle */
}

.products-scroll .home-play-overlay:hover {
  background: rgba(0, 0, 0, 0.75);
  transform: scale(1.05);
}

.products-scroll .home-play-overlay:active {
  transform: scale(0.96);
}

@media (max-width: 640px) {
  .products-scroll .home-play-overlay {
    width: 52px;
    height: 52px;
  }

  .products-scroll .home-play-overlay i,
  .products-scroll .home-play-overlay svg {
    font-size: 18px;
  }
}

/* =========================================================
   COMMERCIALS — CARD-FLOW OVERRIDES (SCOPED)
   Purpose: Replace the rigid grid with a card-flow/flex layout
   scoped only to the Commercials page. Do NOT touch modal/js.
   ========================================================= */

/* Scope selectors: cover both possible page wrapper conventions */
.media-page.commercials-page .commercials-grid,
body.commercials .commercials-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 18px !important; /* reduced horizontal gap for fuller rows */
  width: 100% !important;
  align-items: flex-start !important; /* top-align cards */
}

/* Make each card a flex item with a fixed/flexible base width
   so rows wrap naturally. Use calc to account for gaps. */
.media-page.commercials-page .commercial-card,
body.commercials .commercial-card {
  box-sizing: border-box !important;
  /* allow cards to grow/shrink to fill row space while keeping a sensible basis */
  flex: 1 1 calc((100% - 36px) / 3) !important; /* three per row on desktop, flexible */
  max-width: none !important;
  margin: 0 !important;
  align-self: flex-start !important; /* do not stretch to equal height */
}

/* Tablet: two columns */
@media (max-width: 1024px) {
  .media-page.commercials-page .commercial-card,
  body.commercials .commercial-card {
    flex: 0 0 calc((100% - 18px) / 2) !important; /* two per row */
    max-width: none !important;
  }
}

/* Mobile: single column */
@media (max-width: 640px) {
  .media-page.commercials-page .commercial-card,
  body.commercials .commercial-card {
    flex: 0 0 100% !important;
    max-width: none !important;
  }
}

/* Allow cards to size by content; do not force equal heights */
.media-page.commercials-page .commercial-card .card-inner,
body.commercials .commercial-card .card-inner {
  height: auto !important;
}

/* MEDIA: remove forced aspect-ratio on Commercials media so portrait
   videos/images can remain tall. Let intrinsic ratio drive height. */
.media-page.commercials-page .commercial-media,
body.commercials .commercial-media {
  aspect-ratio: unset !important;
  height: auto !important;
  overflow: visible !important; /* allow taller media to display fully */
  border-radius: 8px !important; /* preserve rounded corners */
}

.media-page.commercials-page .commercial-media video,
.media-page.commercials-page .commercial-media iframe,
.media-page.commercials-page .commercial-media img,
body.commercials .commercial-media video,
body.commercials .commercial-media iframe,
body.commercials .commercial-media img {
  width: 100% !important;
  height: auto !important; /* let intrinsic/video height determine display */
  object-fit: cover !important; /* crop where necessary but do not squash */
  display: block !important;
}

/* Override direct selectors that previously forced a fixed 280px height */
.media-page.commercials-page .commercial-item video,
.media-page.commercials-page .commercial-item img,
.media-page.commercials-page .commercial-card video,
.media-page.commercials-page .commercial-card img,
body.commercials .commercial-item video,
body.commercials .commercial-item img,
body.commercials .commercial-card video,
body.commercials .commercial-card img,
.media-page.commercials-page .thumbnail-placeholder,
body.commercials .thumbnail-placeholder {
  height: auto !important;
  max-height: none !important;
  object-fit: cover !important;
}

/* Ensure grid > * width rule doesn't force full width when switching to flex */
.media-page.commercials-page .commercials-grid > *,
body.commercials .commercials-grid > * {
  width: auto !important;
}

/* Maintain clickable card behavior and pointer cursor */
.media-page.commercials-page .commercial-card,
body.commercials .commercial-card {
  cursor: pointer !important;
}

/* Leave modal rules intact; these overrides are page-scoped and
   do not change modal selectors or markup. */
/* Home CTA spacing – force spacing between SHOP and OUR STORY */
.buttons.home-cta-buttons .cn + .cn {
  margin-left: 24px;
}

/* =========================================================
   HOME — Full-bleed hero (final, minimal, homepage-scoped)
   - Break the hero out of the centered `.content.home-content` container
   - Keep all rules strictly scoped under `body.home` so story/society
     and other pages are unaffected
   ========================================================= */
body.home section.home-hero {
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  overflow: hidden !important; /* clip internally but allow carousel to fill */
  box-sizing: border-box !important;
}

/* Ensure the carousel and its internals fully fill the hero container */
body.home #home-carousel,
body.home #home-carousel .carousel-track,
body.home #home-carousel .carousel-slide {
  width: 100% !important;
  max-width: none !important;
}

/* Images/videos must cover the hero without distortion */
body.home #home-carousel img,
body.home #home-carousel video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

/* Remove any rounded corner on the full-bleed visual so edges meet viewport */
body.home section.home-hero > .carousel {
  border-radius: 0 !important;
}

/* Prevent horizontal scroll but scope to homepage only */
body.home {
  overflow-x: hidden !important;
}

/* ==============================
   HOME HERO – FULL BLEED FIX
   ============================== */

/* Allow hero to escape constrained home-content wrapper */
body.home .content.home-content {
  overflow: visible;
}


body.home section.home-hero {
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  max-width: none;
  overflow: hidden;
}

/* Stronger homepage-only override to force escape from centered wrapper.
   Use high specificity and !important to beat earlier layout rules. */
body.home .content.home-content > section.home-hero {
  position: relative !important;
  width: 100vw !important;
  max-width: none !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Force the carousel itself to be full-viewport and offset from the
   centered container. This is more robust when other rules affect the
   section element. */
body.home .content.home-content > section.home-hero > #home-carousel {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  left: 0 !important;
  right: 0 !important;
  position: relative !important;
}


/* Ensure carousel fully fills the hero */
body.home #home-carousel,
body.home #home-carousel .carousel-track,
body.home #home-carousel .carousel-slide {
  width: 100%;
  max-width: none;
}


/* Ensure images/videos cover edge-to-edge */
body.home #home-carousel img,
body.home #home-carousel video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}


/* Prevent horizontal scroll (homepage only) */
body.home {
  overflow-x: hidden;
}


/* Keep carousel controls and dots centered as before (they are absolute
   positioned inside the carousel which now spans the viewport). */


/* (Removed previous hero/carousel sizing rules to allow single authoritative block) */

/* ---------------------------------------------------------
   AUTHORITATIVE: Minimal, homepage-scoped alignment + carousel
   - Restores left-aligned flow for page wrappers on home
   - Applies exact full-bleed carousel breakout and internals
   - Prevents horizontal scroll (home only)
   --------------------------------------------------------- */
body.home .main,
body.home .content,
body.home section,
body.home .content.home-content,
body.home .home-content {
  text-align: left !important;
}

/* Keep CTA buttons and carousel captions centered where they
   intentionally use flex/center alignment — scoped to home only */
body.home .content.home-content > .buttons.home-cta-buttons,
body.home section.home-hero .carousel-caption,
body.home section.home-hero .carousel-cta {
  text-align: center !important;
}

/* STEP 2 — Isolate full-bleed logic to carousel ONLY (homepage-scoped) */
body.home .home-hero {
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  width: 100vw !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* STEP 3 — Ensure carousel internals fully stretch (homepage-only) */
body.home #home-carousel,
body.home #home-carousel .carousel-track,
body.home #home-carousel .carousel-slide {
  width: 100% !important;
  max-width: none !important;
}

body.home #home-carousel img,
body.home #home-carousel video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

/* STEP 5 — Prevent horizontal scroll (HOME ONLY) */
body.home {
  overflow-x: hidden !important;
}

/* Safety: ensure .content.home-content remains constrained and left-aligned */
body.home .content.home-content {
  max-width: var(--container-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* End authoritative home-scoped fixes */

/* ---------------------------------------------------------
   HOME PAGE — reset layout after hero (do NOT affect carousel)
   - Scope: `body.home` only
   - Purpose: restore left-aligned flow for all home sections
     except the hero carousel which must remain centered/full-bleed
   --------------------------------------------------------- */
body.home .content.home-content {
  text-align: left !important;
}

body.home .content.home-content section:not(.home-hero),
body.home .content.home-content .section,
body.home .content.home-content .collections-page,
body.home .content.home-content .video-commercials,
body.home .content.home-content .buttons,
body.home .content.home-content .home-cta-buttons {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Reset flex/grid centering where present so content is left-aligned */
body.home .content.home-content section:not(.home-hero) {
  justify-content: flex-start !important;
  align-items: flex-start !important;
}

/* Protect hero carousel from the reset — keep it centered */
body.home section.home-hero {
  text-align: center !important;
}

/* End: HOME PAGE alignment reset */

/* ---------------------------------------------------------
   HOME PAGE — left-align Handpicked header & subtitle
   Scope: `body.home` only. Keeps hero centered and full-bleed.
   Targets: .collections-header h1 and emphasized subtitle text
   --------------------------------------------------------- */
body.home .collections-header {
  justify-content: flex-start !important;
  align-items: flex-start !important;
  text-align: left !important;
}

body.home .collections-header h1 {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.home .collections-header .subtitle,
body.home .collections-header .description,
body.home .collections-header em,
body.home .collections-header .subtitle em {
  text-align: left !important;
  display: block !important;
}


/* Extra high-specificity fix for the 'The House Favourites' header and
   its subtitle to override any residual centering rules. Homepage only. */
body.home .content.home-content .collections-header h1,
body.home .content.home-content .collections-header h1 span,
body.home .content.home-content .collections-header .subtitle,
body.home .content.home-content .collections-header em {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Stronger: ensure the collections-header anchors to the left of the
   page content container on the homepage. This prevents the large
   Playfair H1 from visually centering in the viewport. */
body.home .content.home-content .collections-header {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  display: block !important;
  text-align: left !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}

body.home .content.home-content .collections-header h1 {
  display: block !important;
  text-align: left !important;
  margin: 0 0 20px 0 !important;
}

body.home .content.home-content .collections-header .subtitle,
body.home .content.home-content .collections-header .description,
body.home .content.home-content .collections-header em {
  text-align: left !important;
  margin-left: 0 !important;
}

/* No typographic size overrides here — preserve core styles */

/* Highest-specificity anchor: force left align for the exact DOM path
   shown in DevTools to ensure the large Playfair H1 and its subtitle
   are aligned to the left of the content container on the homepage. */
body.home > .main > .content.home-content > section.collections-page > .collections-header > h1 {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  display: block !important;
}

body.home > .main > .content.home-content > section.collections-page > .collections-header > p.subtitle,
body.home > .main > .content.home-content > section.collections-page > .collections-header > p.subtitle > em {
  text-align: left !important;
  margin-left: 0 !important;
  display: block !important;
}

/* Exact DOM-path overrides (from DevTools) to force left alignment
   for the 'The House Favourites' H1 and its subtitle on the homepage.
   These are intentionally very specific and homepage-scoped so they
   won't affect other pages. */
body.home main div.main div.content.home-content section.collections-page div.collections-header h1 {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.home main div.main div.content.home-content section.collections-page div.collections-header p.subtitle,
body.home main div.main div.content.home-content section.collections-page div.collections-header p.subtitle em {
  text-align: left !important;
  margin-left: 0 !important;
  display: block !important;
}

/* HOME — left-align collection card content in Handpicked Selection only */
body.home .products-scroll .collection-card .collection-card-title,
body.home .products-scroll .collection-card .collection-card-excerpt,
body.home .products-scroll .collection-card .product-price,
body.home .products-scroll .collection-card .product-unit-selector,
body.home .products-scroll .collection-card .collection-card-category {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Ensure buttons / actions remain as-is but keep card inner flow left-aligned */
body.home .products-scroll .collection-card .card-actions {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

/* HOME — ensure product containers are left-aligned (handpicked selection) */
body.home .content.home-content section.collections-page,
body.home .content.home-content .products-scroll,
body.home .content.home-content .products-scroll .collection-card,
body.home .content.home-content .collection-card {
  text-align: left !important;
}

/* Also ensure immediate children use left flow */
body.home .content.home-content .products-scroll .collection-card > * {
  text-align: left !important;
}

/* HOME — allow descriptive paragraphs to flow naturally (no premature wrapping)
   Remove tight max-widths and ensure normal word-wrapping so sentences
   continue on the same line where space permits. Scoped to homepage only. */
body.home .collections-header .description,
body.home .content.home-content .collections-header .description,
body.home .content.home-content .description,
body.home .story-text,
body.home .story-text p,
body.home .content.home-content p.description {
  max-width: var(--container-width) !important;
  width: auto !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  hyphens: none !important;
}

/* Make the collections-page description span the available content width
   on the homepage and avoid premature/forced internal breaks. This
   forces the paragraph to use the container width and keeps normal
   wrapping rules (no injected <br/>s). */
body.home .content.home-content section.collections-page .description {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

/* Prevent any mid-word breaks on homepage description paragraphs */
body.home .content.home-content section.collections-page .description,
body.home .collections-header .description {
  overflow-wrap: normal !important;
  word-break: keep-all !important;
  hyphens: none !important;
}



/* =========================================================
   SOCIETY PAGE — AUTHORITATIVE GAP REMOVALS
   Scope: body.society (added in templates/story/society.html)
   Purpose: remove residual top/bottom gaps and ensure dark bg
   ========================================================= */
body.society main {
  margin-top: 0 !important; /* remove helper gap applied in base.html */
  min-height: auto !important;
}

body.society .story-page.society-page {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
  background: var(--bg-main) !important; /* ensure dark background, not orange */
}

/* Tighten header spacing inside the society page */
body.society .story-page.society-page .story-header.society-hero {
  margin: 0 !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  text-align: left !important;
}

/* Reduce incoming gap before the first story-content block */
body.society .story-page.society-page .story-content {
  margin-top: 12px !important;
  padding-top: 0 !important;
}