/* ============================================================
   RESET & GLOBAL BASE
   ============================================================ */


/* (collection detail nav rules removed here; canonical locked block will be appended at EOF) */

/* === STORY PAGE — PHILOSOPHY EXPLICIT GREEN OVERRIDES === */
.story-page .story-philosophy h2,
.story-page .story-philosophy .philosophy-label,
.story-page .story-philosophy .philosophy-label .dash,
.story-page .story-philosophy .dash {
  color: #2bbecf !important;
}


/* MEDIA LIST — final enforced layout */
.media-page .press-list-item {
  display: grid !important;
  grid-template-columns: 160px 1fr auto !important;
  column-gap: 16px !important;
  align-items: center !important;
  padding: 14px 20px !important; /* reduced height */
}

/* Image column */
.media-page .press-list-item > div:first-child {
  width: 160px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.media-page .press-list-item img {
  max-width: 140px !important;
  max-height: 90px !important;
  object-fit: contain !important;
}

/* Text block */
.media-page .item-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

/* Remove bullets */
.media-page .item-content ul,
.media-page .item-content li {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}



/* Ensure second number has explicit green if CSS variable missing */
.story-page .story-philosophy .philosophy-item:nth-child(2) .philosophy-number {
  background-color: #2bbecf !important;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


/* ============================================================
  RESET & GLOBAL BASE
  ============================================================ */

html, body {
  width: 100%;
}

body {
  background-color: #101315;
  color: #ffffff;
  font-family: 'Satoshi', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   ROOT VARIABLES (used implicitly, visuals unchanged)
   ============================================================ */

:root {
  --bg-main: #101315;
  --bg-card: #1a1d1f;
  --bg-dark: #0a0c0d;

  --text-main: #ffffff;
  --text-muted: #9ca3af;
  --text-soft: #bfbfbf;

  --accent-red: #ff5b5f;
  --accent-orange: #ff7200;
  --accent-cyan: #00d2c7;

  --container-width: 1200px;
}

/* ============================================================
   MAIN PAGE WRAPPER
   ============================================================ */

.main {
  width: 100%;
  min-height: 110vh;
  background: var(--bg-main);
}

/* ============================================================
   GENERIC CONTAINER HELPERS
   ============================================================ */

.container,
.container-wide {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 20px;
}

.container-wide {
  max-width: 1400px;
}

/* ============================================================
   TYPOGRAPHY NORMALIZATION
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', serif;
  color: var(--text-main);
  font-weight: 300;
}

p {
  font-family: 'Satoshi', sans-serif;
  color: var(--text-soft);
  line-height: 1.6;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ============================================================
   BUTTON BASE (NO VISUAL CHANGE)
   ============================================================ */

button {
  font-family: 'Satoshi', sans-serif;
  cursor: pointer;
  border: none;
  background: none;
}

/* ============================================================
   IMAGE NORMALIZATION
   ============================================================ */

img {
  max-width: 100%;
  display: block;
}



/* STATIC PAGES — force blog typography colors (override CKEditor inline styles) */
.static-page .blog-content,
.static-page .blog-content p,
.static-page .blog-content li,
.static-page .blog-content span,
.static-page .blog-content strong,
.static-page .blog-content em,
.static-page .blog-content a {
  color: #eaeaea !important;
}

/* MEDIA LIST — enforce uniform card layout (override legacy CSS) */
.mediahub-page .press-card {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 16px;
  align-items: flex-start;
}

/* Media logo / image */
.mediahub-page .press-card img {
  width: 96px;
  height: 96px;
  object-fit: contain;
  display: block;
}

/* Text block alignment */
.mediahub-page .press-card-content,
.mediahub-page .press-card > div:last-child {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* MEDIA LIST — lock column alignment & reduce card height */
.mediahub-page .press-card {
  display: grid !important;
  grid-template-columns: 120px 1fr auto !important;
  gap: 20px !important;
  align-items: center !important;
  padding: 20px 24px !important;
  min-height: unset !important;
}

/* Fixed-width image column */
.mediahub-page .press-card img {
  width: 120px !important;
  height: 80px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
  display: block !important;
}

/* Ensure a media container exists and reserves space when image is missing */
.mediahub-page .press-card-media {
  width: 120px;
  height: 80px;
  background: #0f0f0f;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.mediahub-page .press-card-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.mediahub-page .press-card-placeholder {
  width: 100%;
  height: 100%;
  display: block;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
}

/* Target press-cards grid (no matter page wrapper) to force top alignment
   and ensure media space is reserved when image missing. */
.press-cards .press-card {
  align-items: flex-start !important;
}

.press-cards .press-card-media {
  width: 120px;
  height: 80px;
  flex-shrink: 0;
}

.press-cards .press-card-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.press-cards .press-card-placeholder {
  width: 100%;
  height: 100%;
}

/* FEATURED PRESS: make media occupy full card width (media at top)
   Keep the legacy left-column layout for list items. Scoped to the
   featured press section so other press layouts remain unaffected. */
.press-section .press-cards .press-card {
  display: block !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.press-section .press-cards .press-card .press-card-media {
  width: 100% !important;
  height: 220px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  margin-bottom: 18px !important;
}

.press-section .press-cards .press-card .press-card-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.press-section .press-cards .press-card > div {
  padding: 12px 18px 16px !important;
}

.press-section .press-cards .press-card .card-actions {
  margin-top: 10px !important;
}

/* Restore subtle card background and outline for featured cards */
.press-section .press-cards .press-card {
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid rgba(255,255,255,0.03) !important;
  border-radius: 12px !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Tighter spacing for text elements inside featured cards */
.press-section .press-cards .collection-card-excerpt {
  margin: 0 0 6px 0 !important;
  color: var(--text-muted) !important;
  font-size: 13px !important;
}

.press-section .press-cards .collection-card-title,
.press-section .press-cards .press-card h3 {
  margin: 0 0 8px 0 !important;
  font-size: 20px !important;
}

.press-section .press-cards .collection-card-excerpt + .collection-card-title + .collection-card-excerpt {
  margin-top: 0 !important;
}

.press-section .press-cards .press-card .card-actions .cn {
  padding: 10px 18px !important;
}

/* Center the SEE MORE button in the All Press section */
.all-press-section .text-center {
  text-align: center !important;
}

.all-press-section #load-more-press {
  display: inline-block !important;
  margin: 0 auto !important;
}

/* Dark button variant for SEE MORE (scoped) */
.all-press-section #load-more-press {
  background: #0f1112 !important;
  color: #ffffff !important;
  border: 1px solid var(--text-soft) !important;
  padding: 10px 24px !important;
  width: auto !important;
  height: 40px !important;
}

.all-press-section #load-more-press:hover {
  background: #16191a !important;
  color: #ffffff !important;
}

/* Text column — guaranteed consistent start */
.mediahub-page .press-card-content,
.mediahub-page .press-card > div:nth-child(2) {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 6px !important;
}

/* Button column alignment */
.mediahub-page .press-card > div:last-child {
  justify-self: end !important;
}
/* ============================================================
   NAVBAR (PRIMARY HEADER)
   ============================================================ */

.navbar {
  width: 100%;
  max-width: var(--container-width);
  /* increased top spacing to reduce cramped header appearance */
  padding-top: 18px;
  height: calc(75px + 18px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-main);
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* ============================================================
   MOBILE IMPROVEMENTS (Site-wide)
   Applied breakpoints: <=768px and <=480px
   These rules prioritize touch targets, vertical rhythm, and readability
   without altering desktop layouts.
   ============================================================ */

@media (max-width: 768px) {
  /* Header: reduce paddings, scale logo, tighten menu */
  .navbar { padding-top: 12px; height: calc(64px + 12px); }
  .logo { font-size: 28px; }
  .menu ul { gap: 18px; }
  .nav-icons { gap: 10px; }

  /* Carousel: usable height, larger dots/touch areas */
  .carousel-slide img { height: clamp(240px, 35vh, 420px); }
  .carousel-dots { bottom: 10px; }
  .carousel-dots .dot { width: 12px; height: 12px; }
  .carousel-arrow { padding: 14px; font-size: 22px; }

  /* Content wrapper: full-width flow for small screens */
  .content { padding-top: 80px; }

  /* Cards: single-column, comfortable padding, full-width CTAs */
  .collections-page .products-scroll, .shop-page .products-scroll { grid-template-columns: 1fr; gap: 18px; }
  .collection-card, .shop-card { padding: 16px; }
  .collection-card img, .shop-card-img { height: 180px; }
  .collection-card .card-actions { margin-top: 12px; }
  .collection-card .card-actions .left-action, .collection-card .card-actions .right-action { width: 100%; }
  .collection-card .card-actions .right-action { text-align: right; }
  .index-add-btn, .collection-card .collection-card-btn { width: 48%; display: inline-block; }

  /* Make selects touch-friendly */
  .product-unit-selector, #product-unit-select { padding: 12px 14px; font-size: 16px; }

  /* Product detail: stack layout and full-width CTAs */
  .collection-detail-container { grid-template-columns: 1fr; gap: 30px; padding: 40px 20px; }
  .collection-detail-title { font-size: 36px; }
  #add-to-cart-btn { width: 100%; }

  /* Footer: stack columns, increase spacing */
  .footer-main { grid-template-columns: 1fr; padding: 40px 20px 30px; gap: 20px; }
  .footer-bottom { flex-direction: column; gap: 12px; align-items: center; }

  /* Forms: larger tap targets */
  input, textarea, select { padding: 12px 14px; font-size: 16px; }
  .contact-form button, .cn { width: 100%; }
}

@media (max-width: 480px) {
  /* Further tighten and optimize for small phones */
  .logo { font-size: 24px; }
  .menu ul { gap: 12px; }
  .navbar { padding-top: 10px; height: calc(60px + 10px); }

  /* Carousel: shorter height to prioritize content */
  .carousel-slide img { height: clamp(180px, 30vh, 300px); }
  .carousel-dots .dot { width: 10px; height: 10px; }

  /* Cards & CTAs: stack buttons vertically to avoid cramped side-by-side */
  .collection-card .card-actions { flex-direction: column; align-items: stretch; }
  .collection-card .card-actions .right-action { text-align: left; }
  .index-add-btn, .collection-card .collection-card-btn { width: 100%; margin-top: 8px; }

  /* Typography adjustments for readability */
  h1 { font-size: 28px; }
  h2 { font-size: 22px; }

  /* Reduce large paddings site-wide that cause overflow */
  .content { padding-top: 60px; }
  .collection-detail-content { font-size: 15px; }
}

/* Small utility: prevent horizontal scroll caused by overly wide elements */
html, body { overflow-x: hidden; }

/* ============================================================
   Card image normalization (safe, additive)
   Targets common card/grid image selectors used across shop, collections,
   blog and media pages. Uses object-fit to crop images cleanly and
   enforces consistent visual heights per breakpoint.
   Does NOT target carousel/hero images (they use .carousel-slide img).
   ============================================================ */

.collection-card img,
.products-scroll .collection-card img,
.shop-card-img,
.blog-list .post-card img,
.posts-list .post-card img,
.media-grid .media-item img,
.mediahub .media-grid img,
.card-grid img {
  width: 100% !important;
  height: 240px !important; /* desktop baseline */
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

@media (max-width: 768px) {
  .collection-card img,
  .products-scroll .collection-card img,
  .shop-card-img,
  .blog-list .post-card img,
  .posts-list .post-card img,
  .media-grid .media-item img,
  .mediahub .media-grid img,
  .card-grid img {
    height: 200px !important; /* tablet */
  }
}

@media (max-width: 480px) {
  .collection-card img,
  .products-scroll .collection-card img,
  .shop-card-img,
  .blog-list .post-card img,
  .posts-list .post-card img,
  .media-grid .media-item img,
  .mediahub .media-grid img,
  .card-grid img {
    height: 150px !important; /* mobile */
  }
}

/* ============================================================
   FINAL CARD STRUCTURE NORMALIZATION (ADD-ONLY, SAFE)
   - CSS only, additive overrides
   - Targets card containers across shop, collections, blog, media
   - Does NOT affect carousel/hero images
   ============================================================ */

/* 1) Make card containers consistent layout */
.collection-card,
.card-grid .card,
.products-scroll .collection-card,
.blog-list .post-card,
.posts-list .post-card,
.media-grid .media-item,
.mediahub .media-item {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  box-sizing: border-box !important;
}

/* 2) Image area: target only images that are direct children of card containers
     This avoids touching hero/carousel images which are not direct children */
.collection-card > img,
.card-grid .card > img,
.products-scroll .collection-card > img,
.blog-list .post-card > img,
.posts-list .post-card > img,
.media-grid .media-item > img,
.mediahub .media-item > img {
  width: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  flex: 0 0 auto !important; /* image area does not grow */
  height: 240px !important; /* desktop baseline */
}

/* 3) Content flow: ensure everything after the image grows downward */
.collection-card > :not(img),
.card-grid .card > :not(img),
.products-scroll .collection-card > :not(img),
.blog-list .post-card > :not(img),
.posts-list .post-card > :not(img),
.media-grid .media-item > :not(img),
.mediahub .media-item > :not(img) {
  flex: 1 1 auto !important;
  display: block !important;
}

/* 4) Ensure title/excerpt baseline spacing is consistent */
.collection-card .collection-card-title,
.card-grid .card .card-title,
.products-scroll .collection-card .collection-card-title,
.blog-list .post-card .post-title,
.posts-list .post-card .post-title,
.media-grid .media-item .media-title,
.mediahub .media-item .media-title {
  margin-top: 12px !important;
  margin-bottom: 6px !important;
}

.collection-card .collection-card-excerpt,
.card-grid .card .card-excerpt,
.blog-list .post-card .post-excerpt,
.media-grid .media-item .media-excerpt {
  margin-top: 6px !important;
  margin-bottom: 10px !important;
  line-height: 1.45 !important;
}

/* 5) Ensure action row (buttons) sits at the bottom when possible */
.collection-card .card-actions,
.card-grid .card .card-actions,
.products-scroll .collection-card .card-actions,
.blog-list .post-card .card-actions,
.media-grid .media-item .card-actions {
  margin-top: auto !important;
}

/* 6) Breakpoint adjustments */
@media (max-width: 768px) {
  .collection-card > img,
  .card-grid .card > img,
  .products-scroll .collection-card > img,
  .blog-list .post-card > img,
  .media-grid .media-item > img {
    height: 220px !important; /* tablet */
  }
}

@media (max-width: 480px) {
  .collection-card > img,
  .card-grid .card > img,
  .products-scroll .collection-card > img,
  .blog-list .post-card > img,
  .media-grid .media-item > img {
    height: 180px !important; /* mobile */
  }

  /* Slightly reduce title margin on small screens to preserve rhythm */
  .collection-card .collection-card-title,
  .blog-list .post-card .post-title {
    margin-top: 10px !important;
  }
}

/* 7) Safety: avoid touching carousel/hero selectors explicitly
   (carousel uses .carousel-slide img, hero images use other classes) */

/* STATIC PAGES — force blog typography colors (override CKEditor inline styles) */
.static-page .blog-content,
.static-page .blog-content p,
.static-page .blog-content li,
.static-page .blog-content span,
.static-page .blog-content strong,
.static-page .blog-content em,
.static-page .blog-content a {
  color: #eaeaea !important;
}

/* ============================================================
   HOMEPAGE CAROUSEL ADJUSTMENTS (ADD-ONLY)
   - Increase visual height, reduce header->carousel gap,
     keep bottom spacing unchanged
   - Scoped to .carousel and .carousel-slide img
   ============================================================ */

/* Reduce top gap slightly (override template negative margin if present) */
.carousel { margin-top: -6px !important; margin-bottom: 24px !important; }

/* Desktop: taller hero feel */
.carousel .carousel-slide img { height: 420px !important; max-height: none !important; }
.carousel { max-height: none !important; }

/* Keep content vertically centered inside slides */
.carousel .carousel-slide { display:flex !important; align-items:center !important; justify-content:flex-start !important; }
  
/* Commercial thumbnail block rules (surgical) */
.commercial-thumbnail {
  width: 100%;
  height: 280px;
  background: #1a1a1a;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.commercial-thumbnail img,
.commercial-thumbnail video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-placeholder {
  color: #666;
  font-size: 1rem;
}

/* Modal overlay + content + close button (ensure modal can be closed via overlay and X) */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.9);
  z-index: 9999;
}

.modal-content {
  max-width: 1000px;
  margin: 5vh auto;
  position: relative;
}

.modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  color: white;
  font-size: 2rem;
  cursor: pointer;
}

/* Strong reset so CTAs/styles don't leak into modal close */
.modal-close {
    all: unset !important;
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    color: white;
    font-size: 2rem;
    background: none;
    border: none;
    z-index: 10001;
}

/* Prevent modal close from inheriting CTA styles */
.modal-close,
.video-modal-close,
[data-modal-close] {
    all: unset;
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    color: white;
    font-size: 2rem;
    line-height: 1;
    text-align: center;
    z-index: 10001;
    background: none !important;
    border: none !important;
    padding: 0 !important;
}
.carousel .carousel-caption { transform: none !important; }

@media (max-width: 768px) {
  /* Tablet: slightly reduced height */
  .carousel .carousel-slide img { height: 320px !important; }
  .carousel { margin-top: -4px !important; }
}

@media (max-width: 480px) {
  /* Mobile: constrained but prominent */
  .carousel .carousel-slide img { height: 240px !important; }
  .carousel { margin-top: 0 !important; }
  .carousel-caption { bottom: 12px !important; left: 12px !important; right: 12px !important; }
}

/* Ensure CTA buttons remain visible and tappable (no overflow) */
.carousel .carousel-cta { z-index: 12 !important; }

/* Prevent horizontal swipe from permanently hijacking scroll: ensure pan-y allowed */
.carousel .carousel-slide { touch-action: pan-y !important; }

/* ============================================================
   GRID / BLOG / SHOP ALIGNMENT CONFIRMATION
   - Reaffirm image baseline and title alignment (additive)
   ============================================================ */

/* Ensure image baseline normalization already applied remains enforced */
.collection-card img,
.products-scroll .collection-card img,
.shop-card-img,
.blog-list .post-card img,
.posts-list .post-card img,
.media-grid .media-item img,
.mediahub .media-grid img,
.card-grid img {
  object-fit: cover !important;
  object-position: center center !important;
}

/* Blog listing: enforce 2 columns desktop/tablet, 1 column mobile */
.blog-list .posts-list,
.posts-list {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 20px !important;
}
@media (max-width: 480px) {
  .blog-list .posts-list,
  .posts-list { grid-template-columns: 1fr !important; }
}

/* SHOP INDEX CTA alignment: ensure inline on desktop/tablet, stacked on small mobile */
.collection-card .card-actions,
.products-scroll .collection-card .card-actions { display:flex !important; align-items:center !important; justify-content:space-between !important; gap:12px !important; flex-wrap: nowrap !important; }
.collection-card .card-actions .left-action { margin-right: auto !important; }
.collection-card .card-actions .right-action { margin-left: 12px !important; }
@media (max-width: 720px) {
  .collection-card .card-actions { flex-direction: column !important; align-items:stretch !important; }
  .collection-card .card-actions .right-action { text-align:right !important; }
}

/* Safety: ensure no change to carousel/hero selectors */
/* End of additive overrides */

/* ============================================================
   HOMEPAGE CAROUSEL SPACING TUNING (SAFE MODE)
   - Reduce header -> carousel gap
   - Increase carousel -> content (CTA) gap
   - Scoped only to .carousel container
   ============================================================ */

/* Desktop: tighter to header, more space below */
.carousel {
  /* bring carousel closer to header */
  margin-top: -14px !important;
  /* ensure generous spacing to next content (CTAs) */
  margin-bottom: 44px !important;
  /* stable minimum height to avoid layout shift */
  min-height: 420px !important;
}

/* tablet adjustments */
@media (max-width: 768px) {
  .carousel { margin-top: -8px !important; margin-bottom: 36px !important; }
}

/* mobile adjustments: keep carousel visible and CTAs reachable */
@media (max-width: 480px) {
  .carousel { margin-top: -2px !important; margin-bottom: 28px !important; }
  .carousel-caption { bottom: 12px !important; }
}

/* Safety: ensure caption and CTAs are above any overlaying elements */
.carousel .carousel-caption, .carousel .carousel-cta { position: relative !important; z-index: 12 !important; }

/* ============================================================
  Homepage carousel spacing exact rules (additive)
  Ensure symmetric spacing above and below carousel
  ============================================================ */

header, .site-header { margin-bottom: 24px !important; }

.hero-carousel, .home-carousel, .carousel-section, .carousel { margin-top: 24px !important; margin-bottom: 24px !important; }

.home-cta-buttons, .carousel-actions, .buttons { margin-top: 24px !important; }





/* COLLECTION DETAIL – FORCE NAV LAYOUT (DO NOT MOVE) */


/* === AGE GATE MODAL ROOT — STACKING CONTEXT OVERRIDE === */
body > #ochre-age-modal-root {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483647 !important; /* max safe z-index */
  pointer-events: none;
}

/* Off-canvas mobile navigation ------------------------------------------------- */
.mobile-nav-toggle { display: none; background: transparent; border: none; font-size: 20px; color: var(--text-primary); }
.mobile-nav-toggle .sr-only { position: absolute; left: -9999px; }

/* The overlay that dims page when menu is open */
.mobile-nav-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 900; }

/* Transform the existing .menu into an off-canvas panel on small screens */
@media (max-width: 768px) {
  .mobile-nav-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; margin-left: 8px; }

  /* make the main .menu off-canvas */
  .menu {
    position: fixed;
    right: 0;
    top: 0;
    height: 100vh;
    width: min(320px, 86vw);
    background: var(--bg-main);
    box-shadow: -20px 0 40px rgba(0,0,0,0.15);
    transform: translateX(100%);
    transition: transform 260ms ease;
    z-index: 1000;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 28px 18px;
  }

  .menu.open { transform: translateX(0); }

  .menu .nav-menu { display: flex; flex-direction: column; gap: 14px; }
  .menu .nav-menu a, .menu .nav-menu button { padding: 12px 8px; font-size: 16px; }

  /* show overlay when open */
  .mobile-nav-overlay[aria-hidden="false"] { display: block; }

  /* ensure header content doesn't overflow horizontally */
  .navbar { padding-left: 12px; padding-right: 12px; }
}

@media (max-width: 480px) {
  .menu { width: 100vw; }
}

/* Improve tap target sizes for icons in header */
.nav-icons .icon-link, .user-toggle, .mobile-nav-toggle { padding: 10px; border-radius: 8px; }

/* iOS safe-area support for off-canvas menu */
@supports(padding: max(0px)) {
  @media (max-width: 768px) {
    .menu { padding-top: calc(env(safe-area-inset-top, 0px) + 28px); }
  }
}

/* Footer mobile tap targets */
.footer-main a, .footer-main button { padding: 10px 8px; display: inline-block; }
.footer-main { gap: 12px; }

/* Shop card compacting on small screens */
@media (max-width:768px) {
  .collection-card { padding: 12px; border-radius: 8px; }
  .collection-card img { height: 160px; object-fit: cover; }
  .collection-card .collection-card-excerpt { font-size: 14px; line-height: 1.4; }
  .collection-card .collection-card-title { font-size: 18px; margin-top:6px; }
  .collection-card .card-actions { margin-top:10px; }
  .product-unit-selector, #product-unit-select { font-size: 15px; padding: 10px 12px; }
}

@media (max-width:480px) {
  .collection-card img { height: 140px; }
  .collection-card { padding:10px; }
  #add-to-cart-btn { width: 100%; }
  .index-add-btn { width: 100%; }
}



/* ------------------------------------------------------------
   LOGO
   ------------------------------------------------------------ */

.navbar .icon {
  display: flex;
  align-items: center;
  height: 100%;
}

.logo {
  font-family: 'Playfair Display', serif;
  font-size: 35px;
  font-weight: 400;
  color: var(--text-main);
  line-height: 1;
}

.highlight-r {
  color: var(--accent-red);
}

/* Logo image sizing (header/footer) — neutralized earlier constraints
   Earlier rules set restrictive max-heights which caused inconsistent
   sizing across media queries. Leave sizing to the final authoritative
   block at the end of this file. */
   /*
.logo img.site-logo,
.footer-logo img.footer-site-logo {
  display: block;
  width: auto;
  height: auto;
  max-height: none;
}
*/
/* ============================
   GLOBAL LOGO SIZING (ADDED)
   Appended to end to ensure override safety
   ============================ */

/* GLOBAL LOGO SIZING (NEUTRALIZED)
   Earlier rules used clamp()/fixed heights which caused downstream
   media queries to collapse the footer logo. Neutralize here so the
   final authoritative block at EOF determines precise sizes. */
header img.site-logo,
.navbar img.site-logo {
  width: auto;
  height: auto;
  max-height: none;
  display: block;
}

/* No mobile-specific logo caps here — EOF block will handle sizing */
@media (max-width: 768px) {
  header img.site-logo,
  .navbar img.site-logo {
    height: auto;
    max-width: none;
  }
}


/* ------------------------------------------------------------
   MENU (PRIMARY NAV LINKS)
   ------------------------------------------------------------ */

.menu {
  display: flex;
  align-items: center;
}

.menu ul {
  display: flex;
  align-items: center;
  gap: 40px;
  list-style: none;
}

.menu ul li a {
  font-family: 'Satoshi', sans-serif;
  font-size: 13px;          /* ↓ add this */
  font-weight: 500;
  letter-spacing: 1px;      /* ↑ add this */
  text-transform: uppercase;
  color: var(--text-main);
  transition: color 0.25s ease;
}

  /* Commercials grid - enforce top alignment and fixed media height so titles align */
  .commercials-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    align-items: start; /* ensure all cards align at the top */
  }

  .commercial-item,
  .commercial-card {
    display: flex;
    flex-direction: column;
    background: #1a1a1a;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.25s ease;
    height: 100%;
  }

  .commercial-item:hover,
  .commercial-card:hover {
    transform: translateY(-4px);
  }

  /* Media element fixed height for alignment */
  .commercial-item .commercial-media > .collection-card > img,
  .commercial-item .commercial-media > .collection-card > video,
  .commercial-card > img,
  .commercial-card > video,
  .commercial-card .thumbnail-placeholder {
    width: 100%;
    height: 280px; /* fixed height */
    object-fit: cover;
    display: block;
    flex-shrink: 0;
  }

  .thumbnail-placeholder {
    background: #333;
    color: #999;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 280px;
  }

  .commercial-item .commercial-content,
  .commercial-card .commercial-content {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
  }

  .commercial-content h3,
  .commercial-content h4,
  .collection-card-title {
    font-size: 1.1rem;
    margin: 0 0 0.5rem 0;
    color: #fff;
    line-height: 1.3;
  }

  .commercial-content p {
    margin: 0;
    color: #aaa;
    font-size: 0.95rem;
    line-height: 1.4;
  }

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

  /* Minimal commercial-card interaction rules (surgical) */
  .commercial-card {
      cursor: pointer;
      transition: transform 0.2s;
  }
  .commercial-card:hover {
      transform: translateY(-4px);
  }

.menu ul li a:hover,
.menu ul li a.active {
  color: var(--accent-orange);
}

/* Commercials grid layout: responsive 3 / 2 / 1 columns */
.commercials-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.commercial-item video,
.commercial-item iframe {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}

/* Tablet */
@media (max-width: 1024px) {
  .commercials-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile */
@media (max-width: 600px) {
  .commercials-grid {
    grid-template-columns: 1fr;
  }
}

/* === COMMERCIALS GRID: PREVENT FULL-WIDTH SPANNING === */
.commercials-grid > .commercial-item {
  grid-column: auto;
  width: 100%;
}

/* Ensure the commercials grid wrapper expands to full available content width
   and remove artificial max-width constraints from inline wrappers like
   `.products-scroll` or generic `.container` on the commercials page. */
.media-page.commercials-page .products-scroll {
  width: 100%;
  max-width: none !important;
  padding: 0 6vw;
  margin: 0 auto;
}

.media-page.commercials-page .container {
  width: 100%;
  max-width: none !important;
  padding: 0 6vw;
  margin: 0 auto;
}

/* Neutralise full-width card styles when used inside grid */
.commercials-grid .collection-card {
  width: 100%;
  max-width: 100%;
}

/* Commercial title styling */
.commercial-title {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: #222;
  text-align: center;
  word-break: break-word;
}

/* Commercial card container and spacing */
.commercial-item,
.commercial-card {
  background: #1a1a1a;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s;
}
.commercial-item:hover,
.commercial-card:hover {
  transform: translateY(-4px);
}

/* Video / thumbnail spacing */
.commercial-item video,
.commercial-card video,
.commercial-item img,
.commercial-card img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  display: block;
  margin-bottom: 1.5rem; /* gap between media and title */
}

/* Text grouping inside card */
.commercial-item .commercial-content,
.commercial-card .commercial-content {
  padding: 0 1.5rem 1.5rem;
}

.commercial-item h3,
.commercial-card h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem; /* small gap between title and description */
  color: #fff;
  line-height: 1.3;
}

.commercial-item p,
.commercial-card p {
  font-size: 0.9rem;
  color: #aaa;
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 600px) {
  .commercial-title {
    font-size: 14px;
  }
}

/* === COMMERCIALS: VIDEO TITLE (DARK BACKGROUND SAFE) === */
.commercials-grid .commercial-title {
  /* preserve typography but force high contrast on dark sections */
  margin-top: 10px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: #f5f5f5;
  text-align: center;
  letter-spacing: 0.2px;
  word-break: break-word;
}

.commercials-grid .commercial-title span {
  color: #d0d0d0;
}

@media (max-width: 600px) {
  .commercials-grid .commercial-title {
    font-size: 14px;
  }
}

/* Ensure visibility when nested inside common dark wrappers */
.bg-dark .commercials-grid .commercial-title,
.dark .commercials-grid .commercial-title,
.section-dark .commercials-grid .commercial-title {
  color: #f5f5f5;
}

/* ------------------------------------------------------------
   NAV SHOP BUTTON
   ------------------------------------------------------------ */

.nav-shop {
  background: var(--accent-red);
  padding: 8px 16px;
  transition: background 0.25s ease;
}

.nav-shop a {
  font-family: 'Satoshi', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  color: #000;
}

/* ------------------------------------------------------------
   NAV ICONS (RIGHT SIDE)
   ------------------------------------------------------------ */

.nav-icons {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Base icon link */
.icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  font-size: 18px;
  color: #f5f5f5;
  transition: color 0.2s ease;
}

.icon-link:hover {
  color: var(--accent-red);
}

/* ============================================================
   CART ICON + BADGE (SINGLE SOURCE OF TRUTH)
   ============================================================ */

.cart-link {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.cart-icon {
  font-size: 18px;
  color: #ffffff;
  line-height: 1;
}

/* cart count badge */
.cart-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  background: var(--accent-red);
  color: #000;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 14px rgba(0,0,0,0.35);
  pointer-events: none;
}

/* hide badge when empty (if rendered) */
.cart-badge[aria-hidden="true"] {
  display: none;
}

/* ============================================================
   USER DROPDOWN
   ============================================================ */

.user-dropdown-wrapper {
  position: relative;
}

.user-toggle {
  background: transparent;
  border: none;
  color: #f5f5f5;
  font-size: 18px;
  padding: 6px;
  cursor: pointer;
}

/* dropdown panel */
.user-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 220px;
  background: #0e1112;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.6);
  display: none;
  z-index: 2000;
}

/* visible state */
.user-dropdown.open,
.user-dropdown[aria-hidden="false"] {
  display: block;
}

/* dropdown header */
.user-dropdown .dropdown-header {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  margin-bottom: 8px;
}

.user-dropdown .u-name {
  display: block;
  font-weight: 700;
  color: #fff;
}

.user-dropdown .u-email {
  display: block;
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* dropdown items */
.user-dropdown .dropdown-item {
  display: block;
  padding: 8px 10px;
  font-size: 14px;
  color: #e6e7e8;
  border-radius: 6px;
  margin: 4px 0;
  transition: background 0.2s ease, color 0.2s ease;
}

.user-dropdown .dropdown-item:hover {
  background: rgba(255,91,95,0.06);
  color: var(--accent-red);
}

/* logout button */
.logout-btn {
  width: 100%;
  background: transparent;
  border: none;
  text-align: left;
  padding: 8px 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent-red);
  cursor: pointer;
}

.logout-btn:hover {
  background: rgba(255,91,95,0.06);
}

/* ============================================================
   NAV: MEDIA DROPDOWN (scoped + minimal)
   ============================================================ */

.nav-dropdown-wrapper {
  position: relative;
}

.nav-dropdown-toggle {
  background: transparent;
  border: none;
  color: var(--text-main);
  font-family: 'Satoshi', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  cursor: pointer;
}

.nav-dropdown-toggle:focus {
  outline: 2px solid rgba(0,0,0,0);
}

.nav-dropdown-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  min-width: 160px;
  background: #0e1112;
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.6);
  display: none;
  z-index: 2000;
}

.nav-dropdown-menu .dropdown-item {
  display: block;
  padding: 8px 10px;
  color: #e6e7e8;
  border-radius: 6px;
  margin: 4px 0;
  transition: background 0.15s ease, color 0.15s ease;
}

.nav-dropdown-menu .dropdown-item:hover,
.nav-dropdown-menu .dropdown-item.active {
  background: rgba(255,91,95,0.06);
  color: var(--accent-red);
}

/* Desktop: open on hover */
.nav-dropdown-wrapper:hover .nav-dropdown-menu {
  display: block;
}

/* Visible state for JS toggling on mobile */
.nav-dropdown-menu.open,
.nav-dropdown-menu[aria-hidden="false"] {
  display: block;
}

@media (max-width: 720px) {
  /* mobile: make dropdown full width under the toggle for easier tapping */
  .nav-dropdown-menu {
    left: 0;
    right: 0;
    min-width: auto;
    margin: 0 12px;
  }
}

/* ============================================================
   NAVBAR RESPONSIVE
   ============================================================ */

@media (max-width: 720px) {
  .menu ul {
    gap: 24px;
  }

  .cart-badge {
    top: -4px;
    right: -6px;
    min-width: 16px;
    height: 16px;
    font-size: 10px;
  }
}


/* ============================================================
   BUTTONS (CN FAMILY — SINGLE SOURCE)
   ============================================================ */

.cn {
  width: 180px;
  height: 40px;
  background: var(--accent-orange);
  border: none;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cn a {
  font-family: 'Satoshi', sans-serif;
  font-weight: 500;
  color: #fff;
}

.cn:hover {
  background: #ffffff;
}

/* ============================================================
   BLOG LIST FILTERS + LOAD MORE
   ============================================================ */

.article-filters {
  margin-top: 18px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.filter-btn {
  padding: 6px 10px;
  font-size: 12px;
  color: var(--text-soft);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* (global .filter-btn.active removed to avoid pill styling leak) */

.load-more-wrap {
  text-align: center;
  margin-top: 40px;
}

.load-more-btn {
  color: #1a1d1f;
}

.cn:hover a {
  color: #000;
}

/* variants */
.cn.shop { background: var(--accent-red); }
.cn.stories {
  background: transparent;
  border: 2px solid #ffffff;
}

/* ============================================================
   BLOG PAGE
   ============================================================ */

.blog-page {
  width: 100%;
  min-height: 100vh;
  background: var(--bg-main);
  padding-bottom: 80px;
}

/* header */
.blog-header {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 80px 20px 40px;
}

.blog-header .blog-stories {
  color: var(--accent-red);
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 2px;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.blog-header h1 {
  font-size: 60px;
  line-height: 1.2;
  margin-bottom: 20px;
}

.blog-header .description {
  max-width: 700px;
  font-size: 18px;
  color: var(--text-muted);
}

/* filters (shared) */
.article-filters,
.product-filters {
  display: flex;
  gap: 30px;
  overflow-x: auto;
  padding-bottom: 12px;
  margin-bottom: 45px;
}

/* filter button */
.filter-btn {
  background: none;
  border: none;
  font-family: 'Satoshi', sans-serif;
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  transition: color 0.2s ease;
}

/* hover color removed to enforce underline-only active state */


/* BLOG LIST GRID */
.blog-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

.blog-card-img {
  height: 260px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 16px;
}

.article-card {
  min-height: 460px; /* more vertical presence */
}

/* SHOW MORE */
.load-more-wrap {
  display: flex;
  justify-content: center;
  margin: 60px 0;
}

.load-more-btn {
  background: transparent;
  color: #e5e7eb;
  border: 1px solid #e5e7eb;
  padding: 14px 34px;
  font-family: 'Satoshi', sans-serif;
  font-size: 15px;
  text-transform: uppercase;
  cursor: pointer;
}

.load-more-btn:hover {
  background: #ffffff;
  color: #000;
}
/* BLOG LIST — HARD OPT-OUT OF HORIZONTAL SCROLL */
.blog-page .blog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  overflow-x: visible;
}

@media (max-width: 900px) {
  .blog-page .blog-grid {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   BLOG LIST GRID — OVERRIDE HORIZONTAL SCROLL (BLOG ONLY)
   ============================================================ */

/* Kill horizontal scroll behaviour ONLY inside blog page */
.blog-list-page .articles-scroll,
.blog-list-page .products-scroll {
  display: block;
  overflow: visible;
}

/* Canonical blog grid */
.blog-list-page .blog-grid {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 20px 60px;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
}

/* Mobile */
@media (max-width: 900px) {
  .blog-list-page .blog-grid {
    grid-template-columns: 1fr;
  }
}

/* Reset card behaviour */
.blog-list-page .article-card {
  display: flex;
  flex-direction: column;
  height: 100%;

  background: var(--bg-card);
  border-radius: 12px;
  padding: 26px;

  min-width: 0;
  width: 100%;
}

/* Image */
.blog-list-page .blog-card-img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 18px;
}

/* Text */
.blog-list-page .blog-card-title {
  font-size: 22px;
  margin-bottom: 12px;
}

.blog-list-page .blog-card-excerpt {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-soft);
  margin-bottom: 20px;

  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* CTA pinned bottom */
.blog-list-page .collection-card-btn {
  margin-top: auto;
}

/* =========================
   BLOG DETAIL LAYOUT
   ========================= */

.blog-detail-page {
  width: 100%;
  background: var(--bg-main);
  padding: 80px 20px 120px;
}

.blog-detail-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2.2fr 1fr;
  gap: 60px;
}

/* =========================
   MAIN ARTICLE
   ========================= */

.blog-main {
  width: 100%;
}

.blog-main h1 {
  font-family: 'Playfair Display', serif;
  font-size: 56px;
  font-weight: 300;
  margin: 20px 0 10px;
}

.blog-meta {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 30px;
}

.blog-hero-image {
  width: 100%;
  max-height: 520px;
  object-fit: cover;
  border-radius: 12px;
  margin: 30px 0 40px;
}

.blog-content {
  font-family: 'Satoshi', sans-serif;
  font-size: 17px;
  line-height: 1.75;
  color: #c7c7c7;
}

.blog-content p {
  margin-bottom: 20px;
}

.blog-content h2 {
  font-size: 32px;
  margin: 40px 0 20px;
}

.blog-content h3 {
  font-size: 26px;
  margin: 30px 0 16px;
}

/* Ensure static pages using the blog template inherit the blog text color */
.blog-detail-page .blog-content,
.blog-detail-page .blog-content p,
.blog-detail-page .blog-content li {
  color: #d6d6d6;
}

/* =========================
   SIDEBAR
   ========================= */

.blog-sidebar {
  position: sticky;
  top: 120px;
}

.sidebar-section {
  margin-bottom: 50px;
}

.sidebar-title {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  margin-bottom: 18px;
  color: #fff;
}

.sidebar-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-list li {
  margin-bottom: 14px;
}

.sidebar-list a {
  font-family: 'Satoshi', sans-serif;
  font-size: 14px;
  color: #e5e7eb;
  text-decoration: none;
}

.sidebar-list a:hover {
  color: var(--accent-red);
}

.sidebar-date {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 900px) {
  .blog-detail-container {
    grid-template-columns: 1fr;
  }

  .blog-sidebar {
    position: relative;
    top: auto;
    margin-top: 60px;
  }

  .blog-main h1 {
    font-size: 42px;
  }
}

/* ============================================================
   CARDS (BLOG + COLLECTION + SHOP)
   ============================================================ */

/* horizontal scroll containers */
.articles-scroll,
.products-scroll {
  display: flex;
  gap: 30px;
  overflow-x: auto;
  padding-bottom: 20px;
}

/* base card */
.article-card,
.collection-card,
.shop-card {
  background: var(--bg-card);
  border-radius: 12px;
  padding: 22px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.article-card:hover,
.collection-card:hover,
.shop-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(255,91,95,0.1);
}

/* images */
.collection-card img,
.shop-card-img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 14px;
}

/* titles */
.article-card h3,
.collection-card-title,
.shop-card-title {
  font-size: 22px;
  margin-bottom: 10px;
}

/* text */
.article-card p,
.collection-card-excerpt,
.shop-card-desc {
  font-family: 'Satoshi', sans-serif;
  font-size: 15px;
  color: var(--text-soft);
  line-height: 1.6;
  margin-bottom: 16px;
}

/* category / meta */
.collection-card-category {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--accent-cyan);
  margin-bottom: 8px;
}

/* price */
.shop-card-price {
  font-size: 18px;
  color: var(--accent-cyan);
  margin-bottom: 12px;
}

/* CTA link */
.collection-card-btn {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-red);
  transition: opacity 0.2s ease;
}

.collection-card-btn:hover {
  opacity: 0.7;
}

/* ============================================================
   GRID VERSIONS (SHOP / COLLECTIONS)
   ============================================================ */

.collections-page .products-scroll,
.shop-page .products-scroll {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 30px;
  padding-bottom: 40px;
}

/* SHOP GRID — Phase 3 UX polish: normalize cards */
.collections-page .products-scroll,
.shop-page .products-scroll {
  align-items: stretch;
}

.collection-card,
.shop-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 22px;
}

.collection-card img,
.shop-card-img {
  height: 220px;
  flex: 0 0 220px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 14px;
}

.collection-card-title,
.shop-card-title {
  font-size: 20px;
  margin-bottom: 8px;
  line-height: 1.2;
  min-height: 48px;
}

.collection-card-excerpt,
.shop-card-desc {
  flex: 1 1 auto;
  margin-bottom: 16px;
  overflow: hidden;
}

.shop-card-price {
  font-size: 18px;
  color: var(--accent-cyan);
  margin: 0 12px 0 0;
  white-space: nowrap;
}

.collection-card .collection-card-btn,
.shop-card .collection-card-btn {
  margin-top: 16px;
  align-self: flex-start;
}

.collection-card .card-footer,
.shop-card .card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}

@media (max-width: 1000px) {
  .collections-page .products-scroll,
  .shop-page .products-scroll {
    grid-template-columns: repeat(2, 1fr);
  }
  .collection-card img,
  .shop-card-img {
    height: 200px;
    flex: 0 0 200px;
  }
}

@media (max-width: 600px) {
  .collections-page .products-scroll,
  .shop-page .products-scroll {
    grid-template-columns: 1fr;
    gap: 20px;
    padding-bottom: 30px;
  }
  .collection-card img,
  .shop-card-img {
    height: 180px;
    flex: 0 0 180px;
  }
  .collection-card,
  .shop-card {
    padding: 18px;
  }
  .collection-card-title,
  .shop-card-title {
    font-size: 18px;
    min-height: auto;
  }
  .collection-card .collection-card-btn,
  .shop-card .collection-card-btn {
    width: 100%;
    align-self: stretch;
  }
}

/* ============================================================
   EMPTY STATES
   ============================================================ */

.no-articles,
.no-products {
  text-align: center;
  padding: 40px 0;
  font-size: 24px;
  color: var(--accent-red);
}
/* ============================================================
   COLLECTION DETAIL PAGE
   ============================================================ */

.collection-detail-page {
  width: 100%;
  background: var(--bg-main);
  padding: 80px 20px 120px;
  min-height: 100vh;
}

.collection-detail-container {
  max-width: var(--container-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: start;
}

/* image */
.collection-detail-image img {
  width: 100%;
  max-height: 560px;
  object-fit: cover;
  border-radius: 12px;
  background: var(--bg-card);
}

/* info */
.collection-detail-category {
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent-cyan);
  margin-bottom: 12px;
}

.collection-detail-title {
  font-size: 56px;
  line-height: 1.15;
  margin-bottom: 25px;
}

.collection-detail-excerpt {
  font-size: 18px;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 35px;
  max-width: 600px;
}

.collection-detail-content {
  font-size: 16px;
  color: var(--text-soft);
  line-height: 1.75;
  margin-bottom: 40px;
}

.collection-detail-content p {
  margin-bottom: 18px;
}

.collection-detail-content h2 {
  font-size: 32px;
  margin-top: 30px;
}

.collection-detail-content h3 {
  font-size: 26px;
  margin-top: 24px;
}

/* back link */
.back-to-collections {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--accent-red);
  margin-top: 20px;
  transition: opacity 0.2s ease;
}

.back-to-collections:hover {
  opacity: 0.7;
}

/* ============================================================
   FOOTER
   ============================================================ */

.footer {
  background: var(--bg-dark);
  margin-top: 120px;
}

.footer-main {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 80px 20px 60px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 60px;
}

.footer-logo {
  font-size: 35px;
  margin-bottom: 20px;
}

.footer-tagline {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
}

.footer-heading {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-links a {
  color: var(--text-muted);
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: #ffffff;
}

.footer-divider {
  width: 80%;
  height: 1px;
  background: #2a2d2f;
  margin: 40px auto;
}

.footer-experience {
  text-align: center;
  padding: 60px 20px;
}

.footer-experience-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.footer-bottom {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 20px 20px 40px;
  display: flex;
  justify-content: space-between;
  color: var(--text-muted);
}

/* ============================================================
   FAQ SECTION
   ============================================================ */

.faq-section {
  width: 100%;
  padding: 80px 20px 100px;
  text-align: center;
}

.faq-title {
  font-size: 48px;
  margin-bottom: 60px;
}

.faq-list {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.faq-item {
  width: 100%;
  border-bottom: 1px solid #2a2d2f;
  padding: 24px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: background 0.25s ease;
}

.faq-item:hover {
  background: rgba(255,91,95,0.06);
}

.faq-question h3 {
  font-size: 20px;
  text-align: left;
}

.faq-toggle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--accent-red);
  color: var(--accent-red);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: background 0.2s ease, color 0.2s ease;
}

.faq-item.active .faq-toggle,
.faq-item:hover .faq-toggle {
  background: var(--accent-red);
  color: #ffffff;
}

.faq-answer {
  display: none;
  width: 100%;
  max-width: 900px;
  margin-top: 15px;
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.6;
  text-align: left;
}

.faq-item.active .faq-answer {
  display: block;
}

/* ============================================================
   CONTACT PAGE & FORMS
   ============================================================ */

.contact-page {
  width: 100%;
  background: var(--bg-main);
  padding: 60px 20px 0;
}

.contact-container {
  max-width: var(--container-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
}

.contact-left h1 {
  font-size: 60px;
  margin-bottom: 20px;
}

.contact-description {
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1.8;
  margin-bottom: 60px;
}

/* forms */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.contact-form input,
.contact-form textarea {
  background: var(--bg-card);
  border: 1px solid #2a2d2f;
  color: #ffffff;
  padding: 14px 16px;
  border-radius: 6px;
  font-size: 15px;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #6b7280;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--accent-red);
}

.contact-form textarea {
  min-height: 160px;
  resize: vertical;
}

.contact-form button {
  width: 180px;
  height: 45px;
  background: var(--accent-red);
  font-weight: 700;
  text-transform: uppercase;
  transition: background 0.25s ease;
}

.contact-form button:hover {
  background: var(--accent-orange);
}

/* ============================================================
   RESPONSIVE (PARTIAL — FINAL IN NEXT CHUNK)
   ============================================================ */

@media (max-width: 900px) {
  .collection-detail-container,
  .contact-container {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .collection-detail-title {
    font-size: 42px;
  }

  .faq-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .faq-toggle {
    align-self: flex-end;
  }
}
/* ============================================================
   STORY / JOURNEY / PHILOSOPHY
   ============================================================ */

.story-page {
  width: 100%;
  background: var(--bg-main);
  padding: 0 20px 60px;
  min-height: 100vh;
}

/* Tighten vertical spacing for story page: remove excessive gaps
   - reduce top padding in header
   - tighten story-content vertical margins
   - neutralise the adjacent gradient-divider pseudo-elements which
     create large 60px spacer blocks above/below the divider */
.story-page .story-header {
  padding-top: 20px !important;
}

.story-page .story-content {
  margin-top: 20px !important;
  margin-bottom: 40px !important;
  padding: 0 20px;
}

/* Target the gradient divider that immediately follows the story page
   and remove its pseudo-element spacers (before/after) to eliminate
   the extra colored blocks / gaps shown in inspector. */
.story-page + .gradient-divider,
.story-page + .gradient-divider::before,
.story-page + .gradient-divider::after {
  margin: 0 !important;
  height: 0 !important;
  background: transparent !important;
  content: "" !important;
}

.story-header {
  max-width: var(--container-width);
  margin: 0 auto;
  text-align: center;
  padding-top: 60px;
}

.story-header h1 {
  font-size: 88px;
  font-weight: 400;
  margin-bottom: 20px;
}

.story-tagline {
  font-size: 18px;
  color: var(--text-muted);
  max-width: 700px;
  margin: 0 auto;
}

.story-content {
  max-width: var(--container-width);
  margin: 110px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  padding-bottom: 80px;
  align-items: center;
}

.story-text h2 {
  font-size: 36px;
  margin-bottom: 30px;
}

.story-text p {
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1.8;
  margin-bottom: 20px;
}

.story-philosophy {
  padding: 80px 20px 60px;
  text-align: center;
}

.story-philosophy h2 {
  font-size: 60px;
  margin-bottom: 12px;
}

.story-philosophy p {
  max-width: 900px;
  margin-bottom: 18px;
  color: var(--text-muted);
}

.philosophy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 40px;
  max-width: 1000px;
  margin: 60px auto 0;
}

.philosophy-number {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}

.story-journey {
  padding: 60px 20px 100px;
  text-align: center;
}

.story-journey h2 {
  font-size: 60px;
  margin-bottom: 60px;
}
/* ============================================================
   MEDIA / PRESS — CANONICAL (NO DUPLICATES)
   ============================================================ */

.media-page {
  width: 100%;
  background: var(--bg-main);
  min-height: 100vh;
  padding-bottom: 120px;
}

/* ---------------- HEADER ---------------- */

.media-header {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 80px 20px 40px;
}

.media-header h1 {
  font-size: 60px;
  margin-bottom: 20px;
}

.media-header .description {
  font-size: 18px;
  color: var(--text-muted);
  max-width: 700px;
}

/* ---------------- FEATURED PRESS ---------------- */

.press-section {
  max-width: var(--container-width);
  margin: 60px auto 0;
  padding: 0 20px;
}

.press-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 30px;
}

.press-card {
  background: #1a1d1f;
  border-radius: 12px;
  padding: 22px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.press-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(255,91,95,0.1);
}

/* ---------------- ALL PRESS (LEFT-ALIGNED) ---------------- */

.all-press-section {
  max-width: var(--container-width);
  margin: 100px auto 0;
  padding: 0 20px;
}

.all-press-title {
  font-family: 'Playfair Display', serif;
  font-size: 42px;
  margin-bottom: 40px;
  text-align: left; /* IMPORTANT */
}

/* List container */
.press-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Row item */
.press-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #151718;
  border-radius: 10px;
  padding: 18px 22px;
  transition: background 0.25s ease, transform 0.25s ease;
}

.press-list-item:hover {
  background: #1a1d1f;
  transform: translateY(-2px);
}

.press-list-item .item-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.press-list-item .item-meta {
  font-size: 13px;
  color: #9ca3af;
  display: flex;
  align-items: center;
  gap: 8px;
}

.press-list-item .item-title {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  color: #ffffff;
  margin: 0;
}

.press-list-item .read-btn {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-red);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.press-list-item .read-btn:hover {
  opacity: 0.7;
}

/* ---------------- PRESS KIT (CENTERED) ---------------- */

.press-kit-section {
  max-width: 900px;
  margin: 120px auto 0;
  text-align: center;
  padding: 0 20px;
}

.press-kit-title {
  font-family: 'Playfair Display', serif;
  font-size: 42px;
  margin-bottom: 20px;
}

.press-kit-description {
  font-size: 16px;
  color: #9ca3af;
  max-width: 640px;
  margin: 0 auto 40px;
  line-height: 1.6;
}

.press-kit-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* ---------------- PRESS DETAIL ---------------- */

.press-detail-page {
  max-width: 900px;
  margin: 80px auto 120px;
  padding: 0 20px;
}

.press-detail-title {
  font-size: 56px;
  line-height: 1.2;
  margin-bottom: 25px;
}

/* ---------------- MOBILE ---------------- */

@media (max-width: 720px) {
  .press-list-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .media-header h1 {
    font-size: 42px;
  }

  .all-press-title,
  .press-kit-title {
    font-size: 32px;
  }
}

/* ============================================================
   AUTH PAGES (LOGIN / SIGNUP / LOGOUT)
   ============================================================ */

.auth-page {
  min-height: calc(100vh - 200px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
}

.auth-card {
  width: 100%;
  max-width: 720px;
  background: #0f1112;
  border-radius: 12px;
  padding: 28px;
}

.auth-title {
  font-size: 36px;
  margin-bottom: 6px;
}

.auth-sub {
  color: var(--text-muted);
  font-size: 15px;
}

.auth-form input,
.auth-form select,
.auth-form textarea {
  background: var(--bg-main);
  border: 1px solid #222428;
  color: #ffffff;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 15px;
}

.cn.auth-btn {
  background: var(--accent-red);
  color: #000;
  padding: 12px 22px;
  border-radius: 10px;
  font-weight: 800;
}

/* ============================================================
   AUTH FORMS — CANONICAL SPACING & RHYTHM
   (Login, Signup, Profile, Edit Profile)
   ============================================================ */

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 20px; /* MAIN vertical rhythm */
}

/* Each field block */
.auth-form .form-row {
  display: flex;
  flex-direction: column;
  gap: 6px; /* label → input spacing */
}

/* Labels */
.auth-form .field-label {
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 500;
}

/* Inputs */
.auth-form input,
.auth-form select,
.auth-form textarea {
  background: var(--bg-main);
  border: 1px solid #222428;
  color: #ffffff;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 15px;
  width: 100%;
}

/* Focus state */
.auth-form input:focus,
.auth-form select:focus,
.auth-form textarea:focus {
  border-color: var(--accent-red);
  outline: none;
}

/* Help text */
.auth-form .field-help {
  font-size: 12px;
  color: var(--text-muted);
}

/* Error text */
.auth-form .field-error {
  font-size: 13px;
  color: var(--accent-red);
}

/* Actions row */
.auth-form .form-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
}

/* ============================================================
   CART PAGE
   ============================================================ */

.cart-page-container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 25px 80px;
}

.cart-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 40px;
}

.cart-title {
  font-size: 32px;
  margin-bottom: 25px;
}

.cart-items-box {
  background: #151718;
  padding: 25px;
  border-radius: 12px;
}

.cart-summary-box {
  background: #1b1d1f;
  padding: 28px;
  border-radius: 12px;
}

/* ============================================================
   CART PAGE
   ============================================================ */

.cart-page-container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 25px 80px;
}

.cart-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 40px;
}

/* ------------------------------------------------------------
   LEFT: CART ITEMS
   ------------------------------------------------------------ */

.cart-items-box {
  background: #151718;
  padding: 25px;
  border-radius: 12px;
}

.cart-title {
  font-size: 32px;
  margin-bottom: 25px;
}

/* -------------------------
   CART TABLE
   ------------------------- */

.cart-table {
  width: 100%;
  border-collapse: collapse;
}

.cart-table thead th {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  text-align: left;
  padding-bottom: 14px;
}

.cart-table tbody td {
  padding: 18px 0;
  border-top: 1px solid #2a2d2f;
  vertical-align: middle;
}

/* -------------------------
   CART ITEM ROW
   ------------------------- */

.item-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.item-thumb img {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--bg-card);
}

.item-name {
  font-size: 15px;
  font-weight: 600;
}

.item-cat {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* -------------------------
   CART META
   ------------------------- */

.qty-cell,
.price-cell {
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
}

/* -------------------------
   REMOVE BUTTON
   ------------------------- */

.remove-btn {
  background: none;
  border: none;
  font-size: 22px;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
}

.remove-btn:hover {
  color: var(--accent-red);
}

/* ------------------------------------------------------------
   RIGHT: SUMMARY
   ------------------------------------------------------------ */

.cart-summary-box {
  background: #1b1d1f;
  padding: 28px;
  border-radius: 12px;
}

.summary-title {
  font-size: 22px;
  margin-bottom: 22px;
}

/* totals */
.summary-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
  font-size: 15px;
}

.summary-row.grand {
  font-size: 18px;
  font-weight: 700;
  margin-top: 20px;
}

/* -------------------------
   SUMMARY ACTIONS
   ------------------------- */

.summary-actions {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* PRIMARY CTA — Checkout */
.summary-actions .btn-primary {
  height: 45px;
  background: var(--accent-red);
  color: #000;
  font-family: 'Satoshi', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease, color 0.25s ease;
}

.summary-actions .btn-primary:hover {
  background: #ffffff;
  color: #000;
}

/* SECONDARY CTA — Continue Shopping */
.summary-actions .btn-outline {
  height: 45px;
  background: transparent;
  border: 2px solid rgba(255,255,255,0.6);
  color: #ffffff;
  font-family: 'Satoshi', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.summary-actions .btn-outline:hover {
  background: #ffffff;
  color: #000;
  border-color: #ffffff;
}

/* ============================================================
   FINAL RESPONSIVE LOCK
   ============================================================ */

@media (max-width: 1024px) {
  .philosophy-grid {
    grid-template-columns: 1fr;
  }

  .cart-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  h1 { font-size: 42px; }
  h2 { font-size: 32px; }

  .story-header h1,
  .media-header h1 {
    font-size: 42px;
  }

  .story-content {
    grid-template-columns: 1fr;
  }

  .auth-card {
    padding: 20px;
  }
}
/* ============================================================
   VISUAL LOCK PATCH
   Restores buttons + homepage hero centering
   (NO new styles, only re-asserts original ones)
   ============================================================ */

/* --------------------
   GLOBAL BUTTON BASE
   -------------------- */

.cn {
  width: 180px;
  height: 40px;
  border: none;
  cursor: pointer;
  font-family: 'Satoshi', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cn a {
  text-decoration: none;
  color: inherit;
  font-weight: inherit;
}

/* --------------------
   RED BUTTON (PRIMARY)
   -------------------- */

.cn,
.cn.shop,
.cn.collections,
.cn.auth-btn,
button.cn {
  background: #ff5b5f;
color: #2b0f10;
}

.cn:hover {
  background: #ffffff;
  color: #000;
}

/* --------------------
   TRANSPARENT BUTTON
   -------------------- */

.cn.stories,
.cn.shop-now,
.cn.explore-btn {
  background: transparent;
  border: 2px solid #ffffff;
  color: #ffffff;
}

.cn.stories:hover,
.cn.shop-now:hover,
.cn.explore-btn:hover {
  background: #ffffff;
  color: #000;
}

/* --------------------
   HOMEPAGE HERO FIX
   -------------------- */

.content {
  width: 1200px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  padding-top: 120px;
}

.content .buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
}

/* Ensure hero text stays centered */
.content h1,
.content .caption {
  text-align: center;
}

/* --------------------
   MOBILE SAFETY
   -------------------- */

@media (max-width: 1200px) {
  .content {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }
}
/* ============================================================
   HOME — HERO TITLE (OCHRE ONLY)
   ============================================================ */

.hero-title {
  font-family: 'Playfair Display', serif;
  font-size: 120px;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1;
  margin-bottom: 12px;
  text-align: center;
}

/* Craft Spirits line under OCHRE (home only) */
.hero-title .craft-spirits {
  display: block;
  font-family: 'Satoshi', sans-serif;
  font-size: 25px;
  letter-spacing: 3px;
  color: var(--accent-red);
  margin-top: 14px;
}
/* ============================================================
   HOME — HERO GROUPED RHYTHM (FINAL)
   ============================================================ */

/* Group 1: OCHRE + Craft Spirits (tight) */
.hero-title {
  margin-bottom: 8px;   /* tight coupling */
}

.content .craft-spirits {
  margin-bottom: 34px;  /* separation from caption */
}

/* Group 2: Caption */
.content .caption {
  margin-bottom: 42px;  /* separation from buttons */
}

/* Group 3: Buttons */
.content .buttons {
  margin-top: 0;
}

/* Mobile refinement */
@media (max-width: 720px) {
  .hero-title {
    margin-bottom: 6px;
  }

  .content .craft-spirits {
    margin-bottom: 26px;
  }

  .content .caption {
    margin-bottom: 34px;
  }
}

/* Mobile safety */
@media (max-width: 720px) {
  .hero-title {
    font-size: 64px;
  }

  .hero-title .craft-spirits {
    font-size: 18px;
  }
}

/* ============================================================
   PAGE HEADER SYSTEM — RESTORE (BLOG = CANONICAL)
   Applies to: Collections, MediaHub, Shop, Contact
   ============================================================ */

/* ---------- SHARED PAGE CONTAINER ---------- */

.page-container,
.collections-header,
.media-header,
.shop-header,
.contact-left {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}


/* ---------- SECTION LABEL (— OUR COLLECTIONS — etc.) ---------- */

.collections-header .craft-spirits,
.media-header .craft-spirits,
.shop-header .craft-spirits,
.contact-label {
  font-family: 'Satoshi', sans-serif;
  /* slightly reduced size to sit below Playfair headings */
  font-size: 16px !important;
  /* softened, slightly darker red to reduce visual jarring */
  color: #cc484c !important;
  text-transform: uppercase;
  /* editorial letter-spacing, less shouty */
  letter-spacing: 1.2px !important;
  margin-bottom: 14px !important;
  display: flex;
  align-items: center;
}

/* dash between words: tighten spacing and hide trailing dash to avoid mirrored em-dash */
.craft-spirits .dash {
  margin: 0 8px !important;
}

/* Hide any trailing dash so pattern becomes: — HEADING (or HEADING) */
.craft-spirits .dash:last-child {
  display: none !important;
}

/* Also ensure story/year style follows the same single-leading-dash rule */
.story-page .story-year .dash:last-child,
.story-page .story-philosophy .philosophy-label .dash:last-child {
  display: none !important;
}

/* ---------- PAGE TITLE ---------- */

.collections-header h1,
.media-header h1,
.shop-header h1,
.contact-left h1 {
  font-family: 'Playfair Display', serif;
  font-size: 60px;
  font-weight: 300;
  line-height: 1.2;
  color: #ffffff;
  margin-bottom: 20px;
}

/* ---------- PAGE DESCRIPTION ---------- */

.collections-header .description,
.media-header .description,
.shop-header .description,
.contact-description {
  font-family: 'Satoshi', sans-serif;
  font-size: 18px;
  line-height: 1.6;
  color: #9ca3af;
  max-width: 700px;
}

/* ============================================================
   COLLECTIONS — CARD GRID + SPACING (match Blog)
   ============================================================ */

.products-section,
.press-section,
.shop-page .items-grid {
  max-width: 1200px;
  /* remove extra top spacing to avoid layout gap */
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* ============================================================
   MEDIAHUB — RESTORE CARD SYSTEM
   ============================================================ */

.press-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 30px;
}

.press-card {
  background: #1a1d1f;
  border-radius: 12px;
  padding: 22px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.press-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(255,91,95,0.1);
}

.press-card h3,
.press-card .article-title {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  color: #ffffff;
  margin-bottom: 10px;
}

.press-card p,
.press-card .article-description {
  font-family: 'Satoshi', sans-serif;
  font-size: 15px;
  color: #bfbfbf;
  line-height: 1.6;
}

/* ============================================================
   SHOP — HEADER + GRID ALIGNMENT
   ============================================================ */

.shop-page .items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px,1fr));
  gap: 30px;
}

/* ============================================================
   CONTACT — SPACING RESTORE (last good version)
   ============================================================ */

.contact-container {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

.contact-left {
  padding-top: 60px;
}

.contact-description {
  margin-bottom: 60px;
}

/* ============================================================
   MOBILE SAFETY — SAME AS BLOG
   ============================================================ */

@media (max-width: 900px) {
  .collections-header h1,
  .media-header h1,
  .shop-header h1,
  .contact-left h1 {
    font-size: 42px;
  }

  .collections-header .description,
  .media-header .description,
  .shop-header .description,
  .contact-description {
    font-size: 16px;
  }
}

/* ============================================================
   FINAL ALIGNMENT PATCH
   Fixes:
   - Header → content spacing (Home / Collections / Shop)
   - Contact page right column spacing
   ============================================================ */

/* ------------------------------------------------------------
   HEADER → CONTENT SPACING
   ------------------------------------------------------------ */

/* Home page */
.content {
  margin-bottom: 80px;
}

/* Collections page */
.collections-header {
  padding-bottom: 60px;
}

/* Shop page */
.shop-header {
  padding-bottom: 60px;
}

/* Ensure main content starts with breathing room */
.products-section,
.shop-page .items-grid {
  margin-top: 40px;
}

/* ------------------------------------------------------------
   CONTACT PAGE — RIGHT COLUMN RESTORE
   ------------------------------------------------------------ */

.contact-right {
  margin-top: 260px;        /* restores original vertical drop */
  display: flex;
  flex-direction: column;
  gap: 30px;                /* restores card separation */
}

/* Card spacing consistency */
.contact-card {
  padding: 16px 18px;
}

/* “Get in touch” heading */
.contact-right-title {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  font-weight: 300;
  margin-bottom: 30px;
  color: #ffffff;
}

/* Contact info blocks spacing */
.contact-info {
  margin-top: 20px;
  gap: 14px;
}
/* ============================================================
   CONTACT — RESTORE RIGHT COLUMN LAYOUT (FINAL)
   ============================================================ */

.contact-page .contact-container {
  align-items: flex-start;
}

/* Right column vertical alignment (as before) */
.contact-page .contact-right {
  margin-top: 250px !important;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Heading: Get in touch */
.contact-page .contact-right-title {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  font-weight: 300;
  margin-bottom: 28px;
  color: #ffffff;
}

/* Cards spacing */
.contact-page .contact-card {
  padding: 16px 18px;
}

/* Info spacing */
.contact-page .contact-info {
  margin-top: 20px;
  gap: 14px;
}
/* ============================================================
   CANONICAL PAGE INTRO ALIGNMENT
   All section-eyebrow lines start at SAME vertical height
   ============================================================ */

/* Shared vertical baseline from top of page */
:root {
  --page-intro-offset: 80px;   /* matches Blog (canonical) */
}

/* ------------------------------------------------------------
   BLOG (already correct, but locked)
   ------------------------------------------------------------ */
.blog-header {
  padding-top: var(--page-intro-offset);
}

/* ------------------------------------------------------------
   COLLECTIONS
   ------------------------------------------------------------ */
.collections-header {
  padding-top: var(--page-intro-offset);
}

/* ------------------------------------------------------------
   MEDIAHUB
   ------------------------------------------------------------ */
.media-header {
  padding-top: var(--page-intro-offset);
}

/* ------------------------------------------------------------
   STORY
   ------------------------------------------------------------ */
.story-header {
  padding-top: var(--page-intro-offset);
}

/* ------------------------------------------------------------
   CONTACT (LEFT COLUMN ONLY)
   ------------------------------------------------------------ */
.contact-left {
  padding-top: var(--page-intro-offset);
}

/* ------------------------------------------------------------
   SHOP
   ------------------------------------------------------------ */
.shop-header {
  padding-top: var(--page-intro-offset);
}
/* ============================================================
   FINAL FREEZE — SECTION HEADER ALIGNMENT & SPACING
   ============================================================ */

/* ------------------------------------------------------------
   Canonical vertical offset (Blog is reference)
   ------------------------------------------------------------ */
:root {
  --section-header-offset: 80px;
  --section-content-gap: 56px;
}

/* ============================================================
   1. SECTION HEADER ALIGNMENT (ALL PAGES)
   ============================================================ */

/* Blog */
.blog-header {
  padding-top: var(--section-header-offset);
}


/* (blog-only pill styling removed to enforce global underline-only active state) */

/* Collections */
.collections-header {
  padding-top: var(--section-header-offset);
}

/* MediaHub */
.media-header,
.press-header {
  padding-top: var(--section-header-offset);
}

/* Shop */
.shop-header {
  padding-top: var(--section-header-offset);
}

/* Story */
.story-header {
  padding-top: var(--section-header-offset);
}

/* Contact — LEFT column only */
.contact-left {
  padding-top: var(--section-header-offset);
}

/* ============================================================
   2. HEADER → CONTENT VERTICAL GAP (CRITICAL FIX)
   ============================================================ */

/* ============================================================
  GLOBAL: Enforce underline-only active state for all filter buttons
  ============================================================ */

/* NOTE: active/background/border-radius rules were removed to ensure
  all filters use underline-only active state. A single ::after rule
  is appended at the very end of this file. */

/* Blog */
.blog-header + .articles-section {
  margin-top: var(--section-content-gap);
}

/* Collections */
.collections-header + .collections-grid,
.collections-header + .products-section {
  margin-top: var(--section-content-gap);
}

/* MediaHub */
.media-header + .media-grid,
.press-header + .press-grid {
  margin-top: var(--section-content-gap);
}

/* Shop */
.shop-header + .shop-filters,
.shop-header + .items-grid {
  margin-top: var(--section-content-gap);
}

/* Story */
.story-header + .story-content {
  margin-top: var(--section-content-gap);
}

/* Contact */
.contact-left + .contact-form {
  margin-top: var(--section-content-gap);
}

/* ============================================================
   3. SAFE-GUARD: PREVENT EDGE-STICKING
   ============================================================ */

.blog-page,
.collections-page,
.media-page,
.shop-page,
.story-page,
.contact-page {
  padding-left: clamp(16px, 5vw, 72px);
  padding-right: clamp(16px, 5vw, 72px);
}


/* ============================================================
   SINGLE GLOBAL ACTIVE-STATE RULE — underline-only (single source)
   ============================================================ */

.filter-btn.active::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background: var(--accent-red);
  margin-top: 6px;
}

/* Reverted: previous flex-centering block removed per user request. */

/* Collections container alignment: ensure collections filters section
   uses same horizontal constraints as Blog (no centering on filters).
   Apply at the section wrapper level only. */
.collections-page .products-section {
  max-width: var(--container-width);
  margin: 50px auto 0;
  padding-left: 20px;
  padding-right: 20px;
}

.shop-page .product-filters {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
}

/* SHOP TOP TABS (PILLS) */
.shop-tabs {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
}

.shop-tab {
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid var(--accent-red);
  color: var(--accent-red);
  font-weight: 600;
  text-decoration: none;
}

.shop-tab.active {
  background: var(--accent-red);
  color: #fff;
}

/* Added by request: ensure shop top tabs always stay inline */
.shop-tabs {
  display: flex !important;
  flex-direction: row !important;
  gap: 16px;
  align-items: center;
}

.shop-tabs .shop-tab {
  display: inline-flex;
  white-space: nowrap;
}

.shop-tabs .shop-tab + .shop-tab {
  margin-left: 16px;
}

/* TEMP: Disable Shop tabs & filters until inventory is populated */
.shop-page .shop-tabs,
.shop-page .tab-selector,
.shop-page .product-filters,
.shop-page .filter-btn {
  display: none !important;
}

/* Collections: align filters with Blog container */
.collections-page .articles-section,
.collections-page .products-section {
  max-width: var(--container-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* Shop: keep Products / Experiences inline (handled by .shop-tabs above) */


/* Normalize header ↔ carousel ↔ buttons vertical spacing
   Stabilisation-only: zero header bottom spacing and
   control all vertical spacing from the carousel wrapper.
   Bottom-most rules win; use !important to enforce.
*/

header,
.site-header {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.hero-carousel,
.home-carousel,
.carousel-section {
  margin-top: 32px !important;
  margin-bottom: 32px !important;
}

.home-cta-buttons,
.carousel-actions {
  margin-top: 0 !important;
}

/* === Force visual parity wrapper system (stabilisation-only) ===
   Neutralise external flow and make carousel a padding island so
   visual top/bottom spacing is identical regardless of margins.
*/

/* Step 1: neutralise external flow */
body {
  margin: 0 !important;
}

/* Step 2: isolate carousel with padding box (must wrap carousel + CTAs) */
.home-hero,
.home-carousel-wrapper,
.carousel-section {
  padding-top: 32px !important;
  padding-bottom: 32px !important;
}

/* Step 3: remove all internal vertical offsets within that wrapper */
header,
.site-header {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.hero-carousel,
.home-carousel {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.home-cta-buttons,
.carousel-actions {
  margin-top: 0 !important;
}

/* TEMP TEST: neutralize header internals for visual box-debugging (NO COMMIT/PUSH) */
header,
.site-header {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

header * {
  margin-bottom: 0 !important;
}

/* === FORCE HEADER HEIGHT REDUCTION === */
header,
.site-header {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  min-height: auto !important;
}

header > *,
.site-header > * {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

nav,
.navbar,
.header-inner,
.nav-container,
.nav-wrapper {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  min-height: auto !important;
}

/* Kill hidden spacers */
header::after,
.site-header::after {
  content: none !important;
  display: none !important;
}

/* Safety: do NOT affect top spacing */
header,
.site-header {
  padding-top: unset;
}


/* === HOMEPAGE HERO SPACING — SINGLE SOURCE OF TRUTH === */

/* Neutralise inherited spacing */
.home-content {
  padding-top: 0 !important;
}

/* Carousel controls vertical rhythm */
.carousel {
  margin-top: 32px !important;
  margin-bottom: 32px !important;
}

/* CTA buttons — NO extra spacing */
.home-cta-buttons {
  margin-top: 0 !important;
  padding-top: 0 !important;
  height: auto !important;
}

/* Mobile tuning (preserve symmetry) */
@media (max-width: 768px) {
  .carousel {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
  }
}

/* === HOMEPAGE HERO SPACING — FINAL === */

.home-content {
  padding-top: 0 !important;
}

.home-cta-buttons {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Mobile symmetry */
@media (max-width: 768px) {
  .carousel {
    margin-top: 16px !important;
    margin-bottom: 16px !important;
  }
}

/* === GLOBAL SECTION RHYTHM === */
.home-hero {
  padding-top: 56px !important;
  padding-bottom: 56px !important;
}

/* Tablet */
@media (max-width: 1024px) {
  .home-hero {
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .home-hero {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
}

/* Carousel height standardized */
.carousel-slide img {
  width: 100% !important;
  height: clamp(420px, 65vh, 900px) !important;
  object-fit: cover !important;
  display: block !important;
}

@media (max-width: 768px) {
  .carousel-slide img {
    height: clamp(260px, 50vh, 480px) !important;
  }
}

/* CTA buttons neutral */
.home-cta-buttons {
  margin-top: 40px !important;
}

/* Tablet */
@media (max-width: 1024px) {
  .home-cta-buttons {
    margin-top: 32px !important;
  }
}

@media (max-width: 768px) {
  .home-cta-buttons {
    margin-top: 24px !important;
  }
}

/* === HOMEPAGE: CTA → FOOTER SPACING FIX === */

/* Reduce excessive bottom gap on home hero */
.home-hero {
  padding-bottom: 40px !important;
}

/* Tablet */
@media (max-width: 1024px) {
  .home-hero {
    padding-bottom: 32px !important;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .home-hero {
    padding-bottom: 24px !important;
  }
}

/* Safety: neutralise footer top push if present (homepage-scoped acceptable) */
footer,
.site-footer {
  margin-top: 0 !important;
}

/* Ensure carousel itself does not provide bottom margin on homepage
   so gap is controlled by CTA margin-top only */
.home-hero .carousel {
  margin-bottom: 0 !important;
}

/* ============================================================
   STORY PAGE - Fully namespaced, conflict-proof styles
   Scoped under `.story-page` to guarantee zero impact elsewhere.
   Add only here; remove to rollback instantly.
   ============================================================ */

.story-page .story-header {
  max-width: var(--container-width);
  margin: 0 auto 24px;
  /* doubled top gap to push "since" and following content further down */
  padding: 80px 20px 24px;
  text-align: center;
}

.story-page .story-header h1 {
  font-family: 'Playfair Display', serif;
  /* reduced by ~15% from previous size to meet request */
  font-size: clamp(95px, 10vw, 129px);
  line-height: 1.02;
  margin: 8px 0 8px;
  text-align: center;
}

/* SINCE 2023 styling: smaller, red, em-dashes preserved via .dash spans */
.story-page .story-year {
  color: var(--accent-red);
  font-size: 14px;
  letter-spacing: 0.12em;
  margin: 0;
  display: block;
}

.story-page .story-year .dash {
  color: var(--accent-red);
  margin: 0 8px;
  font-weight: 400;
}

.story-page .story-header .story-tagline {
  max-width: 820px;
  margin: 0 auto;
  color: var(--text-soft);
  font-size: 18px;
}

.story-page .story-content {
  max-width: var(--container-width);
  margin: 0 auto 36px;
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 36px;
  align-items: start;
  padding: 0 20px;
}

.story-page .story-text h2 {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  margin-bottom: 12px;
}

.story-page .story-text p {
  margin-bottom: 14px;
  line-height: 1.7;
}

.story-page .story-image .image-placeholder {
  width: 100%;
  height: 360px;
  background: linear-gradient(180deg, #222 0%, #111 100%);
  border-radius: 8px;
}

.story-page .story-philosophy,
.story-page .story-journey,
.story-page .story-experience {
  max-width: var(--container-width);
  margin: 0 auto 36px;
  padding: 0 20px;
}

.story-page .philosophy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.story-page .timeline {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.story-page .timeline-item {
  display: grid;
  grid-template-columns: 80px 12px 1fr;
  gap: 12px;
  align-items: start;
}

.story-page .experience-buttons { margin-top: 18px; }

@media (max-width: 1024px) {
  .story-page .story-content { grid-template-columns: 1fr 320px; gap: 24px; }
  .story-page .philosophy-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .story-page .story-header { padding: 28px 16px; }
  .story-page .story-header h1 { font-size: 34px; }
  .story-page .story-content { grid-template-columns: 1fr; gap: 18px; }
  .story-page .philosophy-grid { grid-template-columns: 1fr; }
  .story-page .story-image .image-placeholder { height: 240px; }
}

/* === STORY PAGE: Typography scaling, philosophy centering, timeline visuals === */
.story-page h1 {
  font-size: clamp(56px, 6vw, 76px);
  line-height: 1.1;
}

.story-page h2 {
  font-size: clamp(44px, 4.5vw, 60px);
  line-height: 1.15;
}

.story-page h3 { font-size: 30px; }
.story-page h4 { font-size: 22px; }

.story-page .story-philosophy { text-align: center; }
.story-page .philosophy-items,
.story-page .philosophy-grid { display: flex; justify-content: center; gap: 40px; margin-top: 48px; }

/* Stronger centering for the philosophy block and its children.
   Some legacy styles may override simple rules; use specific selectors
   and centering on children to ensure the label, heading and copy
   between 'OUR PHILOSOPHY' and 'we forge' are centred. */
.story-page .story-philosophy,
.story-page .story-philosophy > *,
.story-page .story-philosophy .philosophy-grid,
.story-page .story-philosophy .philosophy-item,
.story-page .story-philosophy .philosophy-item * {
  text-align: center !important;
}

.story-page .philosophy-grid { justify-content: center; align-items: flex-start; }
.story-page .philosophy-item { margin: 0 auto; }

.story-page .philosophy-item {
  max-width: 340px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (max-width: 768px) {
  .story-page .philosophy-grid { flex-direction: column; gap: 24px; }
}

/* Ensure the story philosophy section is constrained and centered as a whole */
.story-page .story-philosophy {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding-left: 20px;
  padding-right: 20px;
}

/* Use grid for the philosophy items and centre their content inside cells */
.story-page .philosophy-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px !important;
  justify-items: center !important;
  width: 100%;
}

/* Strong override to ensure centering even if other layout rules apply */
.story-page > .story-philosophy,
.story-page .story-philosophy {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  align-items: center !important;
}

.story-page .story-philosophy h2,
.story-page .story-philosophy .philosophy-label {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.story-page .philosophy-grid { margin: 0 auto !important; max-width: 1100px !important; }

/* If any container forces a wide left-aligned layout, constrain the content width so centering visually works */
.story-page .story-philosophy h2 { max-width: 1100px; }

@media (max-width: 900px) {
  .story-page .philosophy-grid { grid-template-columns: 1fr !important; max-width: 640px; }
}

/* Styling to match reference layout: centered label, large centered H2,
   circular numbered badges above each item, and centered copy. */
.story-page .story-philosophy .philosophy-label {
  color: var(--accent-green, #2bbecf);
  font-size: 13px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  margin-bottom: 14px;
  display: block;
}

.story-page .story-philosophy h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(32px, 6vw, 64px) !important;
  line-height: 1.04 !important;
  margin: 6px 0 40px !important;
  max-width: 1100px;
  width: 100%;
  text-align: center !important;
}

.story-page .philosophy-number {
  width: 86px !important;
  height: 86px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'Playfair Display', serif !important;
  font-size: 26px !important;
  margin: 0 0 18px !important;
}

.story-page .philosophy-item h3 {
  margin: 0 0 12px !important;
  font-size: 20px !important;
  text-align: center !important;
}

.story-page .philosophy-item p {
  text-align: center !important;
  color: #9ca3af !important;
  max-width: 320px;
}

@media (max-width: 900px) {
  .story-page .story-philosophy h2 { font-size: clamp(28px, 8vw, 44px) !important; margin-bottom: 28px !important; }
  .story-page .philosophy-number { width: 64px !important; height: 64px !important; font-size: 20px !important; }
  .story-page .philosophy-item p { max-width: 100%; }
}

/* Increase gap between story content (our legacy) and Our Philosophy */
.story-page .story-philosophy {
  margin-top: 72px !important;
}

/* Reduce vertical spacing between story content and philosophy section
   to tighten the flow between sections. */
.story-page .story-content {
  margin-top: 24px !important;
  margin-bottom: 32px !important;
}

.story-page .story-philosophy {
  margin-top: 0 !important;
}

/* Timeline visuals */
.story-page .timeline { max-width: 720px; margin: 56px auto 0; }
.story-page .timeline-item { display: grid; grid-template-columns: 20px 1fr; gap: 32px; margin-bottom: 56px; align-items: flex-start; }
.story-page .timeline-dot { width: 14px; height: 14px; border-radius: 50%; margin-top: 6px; }
.story-page .timeline-dot.red { background: var(--accent-red); }
.story-page .timeline-dot.green { background: #2bbecf; }
.story-page .timeline-dot.orange { background: #f28c28; }
.story-page .timeline-content { text-align: left; }

/* === STORY PAGE: PHILOSOPHY — CENTERED (SAFE OVERRIDE) === */
.story-page .story-philosophy {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.story-page .story-philosophy .philosophy-label {
  display: block;
  text-align: center;
  margin-bottom: 12px;
}

.story-page .story-philosophy h2 {
  text-align: center;
  margin-bottom: 56px;
}

.story-page .story-philosophy .philosophy-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 56px;
  justify-items: center;
  align-items: start;
}

.story-page .story-philosophy .philosophy-item {
  max-width: 300px;
  text-align: center;
}

.story-page .story-philosophy .philosophy-number {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
}

@media (max-width: 900px) {
  .story-page .story-philosophy .philosophy-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* === STORY PAGE — PHILOSOPHY HARD CENTER OVERRIDE === */

/* 1. Center the philosophy section itself */
.story-page .story-philosophy {
  width: 100%;
  max-width: 1200px;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* 2. Center label + heading explicitly */
.story-page .story-philosophy .philosophy-label,
.story-page .story-philosophy h2 {
  width: 100%;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 3. Force grid to center itself */
.story-page .story-philosophy .philosophy-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  justify-content: center !important;
  justify-items: center !important;
  align-items: start !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 4. Force each item to be centered */
.story-page .story-philosophy .philosophy-item {
  width: 100%;
  max-width: 320px;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 5. Center the numbered circles */
.story-page .story-philosophy .philosophy-number {
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 6. Mobile stacking */
@media (max-width: 900px) {
  .story-page .story-philosophy .philosophy-grid {
    grid-template-columns: 1fr !important;
    gap: 40px;
  }
}

/* === STORY PAGE — PHILOSOPHY LABEL FIX === */

.story-page .story-philosophy .philosophy-label {
  display: block;
  width: 100%;
  text-align: center !important;
  margin: 0 auto 16px auto;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Match the small 'SINCE 2023' styling but use green for philosophy */
.story-page .story-philosophy .philosophy-label {
  color: var(--accent-green);
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.story-page .story-philosophy .dash { color: var(--accent-green); margin: 0 8px; }

/* === STORY PAGE — PHILOSOPHY BREAKOUT & CENTER (FINAL) === */

/* Break philosophy out of the left column */
.story-page .story-philosophy {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Re-center content inside with proper width */
.story-page .story-philosophy > * {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Grid truly centered */
.story-page .philosophy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
  justify-items: center;
}

/* Individual items */
.story-page .philosophy-item {
  max-width: 320px;
  text-align: center;
}

.story-page .philosophy-number {
  margin-left: auto;
  margin-right: auto;
}

/* Mobile */
@media (max-width: 900px) {
  .story-page .philosophy-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}




@media (max-width: 768px) {
  .story-page .timeline { margin: 32px auto 0; }
  .story-page .timeline-item { grid-template-columns: 16px 1fr; gap: 20px; margin-bottom: 36px; }
}


/* === STORY PAGE — PHILOSOPHY TRUE CENTER (PARENT NEUTRALISATION) === */

/* 0. Neutralise left-aligned story column ONLY for philosophy */
.story-page .story-content .story-philosophy,
.story-page .story-text .story-philosophy {
  width: 100%;
  max-width: none !important;
  align-self: stretch;
}

/* 1. Re-center philosophy section itself */
.story-page .story-philosophy {
  max-width: 1200px;
  margin: 0 auto !important;
  text-align: center !important;
}

/* 2. Force label + heading center */
.story-page .story-philosophy .philosophy-label,
.story-page .story-philosophy h2 {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 3. Center the grid (not affected by parent column) */
.story-page .story-philosophy .philosophy-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  justify-items: center !important;
  margin: 0 auto !important;
}

/* 4. Center each item */
.story-page .story-philosophy .philosophy-item {
  max-width: 320px;
  text-align: center !important;
}

/* 5. Center number circles */
.story-page .story-philosophy .philosophy-number {
  margin-left: auto !important;
  margin-right: auto !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 6. Mobile stack */
@media (max-width: 900px) {
  .story-page .story-philosophy .philosophy-grid {
    grid-template-columns: 1fr !important;
    gap: 40px;
  }
}

/* === STORY PAGE — PHILOSOPHY FINAL ALIGNMENT === */

/* Slight right shift to visually center within journey container */
.story-page .story-philosophy.story-journey {
  padding-left: 40px;
  padding-right: 40px;
}

/* Center grid explicitly */
.story-page .story-philosophy .philosophy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  align-items: start;
  text-align: center;
}

/* Center each item */
.story-page .story-philosophy .philosophy-item {
  max-width: 320px;
  text-align: center;
}

/* Number circles (THE KEY FIX) */
.story-page .story-philosophy .philosophy-number {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px auto;
  font-weight: 600;
  color: #fff;
}

/* Theme colors for numbers */
.story-page .story-philosophy .philosophy-item:nth-child(1) .philosophy-number {
  background-color: var(--accent-red);
}

.story-page .story-philosophy .philosophy-item:nth-child(2) .philosophy-number {
  background-color: var(--accent-green);
}

.story-page .story-philosophy .philosophy-item:nth-child(3) .philosophy-number {
  background-color: var(--accent-orange);
}

/* Philosophy section accent = GREEN */
.story-page .story-philosophy h2 {
  color: var(--accent-green);
}

/* Mobile */
@media (max-width: 900px) {
  .story-page .story-philosophy .philosophy-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .story-page .story-philosophy.story-journey {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Align the philosophy grid start with the .story-text content (desktop)
   Offsets the inner content so the left-most philosophy item starts
   at the same x-coordinate as the Crafting Excellence copy above. */
@media (min-width: 1024px) {
  .story-page .story-philosophy.story-journey > * {
    position: relative;
    left: calc((var(--container-width, 1200px) - 1100px)/2 + 20px);
  }

  .story-page .story-philosophy .philosophy-grid {
    justify-items: start;
  }
}

/* === STORY PAGE — PHILOSOPHY DESKTOP ALIGNMENT LOCK === */

@media (min-width: 1024px) {
  .story-page .story-philosophy .philosophy-grid {
    margin-left: auto;
    margin-right: auto;
    max-width: 960px;   /* aligns with Crafting Excellence text width */
  }
}

/* Center philosophy items */
.story-page .story-philosophy .philosophy-item {
  text-align: center;
}

/* Number circles (final authority) */
.story-page .story-philosophy .philosophy-number {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px auto;
  font-weight: 600;
  color: #fff;
}

/* Theme colors */
.story-page .story-philosophy .philosophy-item:nth-child(1) .philosophy-number {
  background: var(--accent-red);
}

/* === STORY PAGE — PHILOSOPHY ALIGN LEFT WITH STORY TEXT (DESKTOP) === */
@media (min-width: 1024px) {
  /* Place the grid so its left edge matches the main content column left */
  .story-page .story-philosophy .philosophy-grid {
    margin-left: calc((100% - var(--container-width, 1200px)) / 2);
    max-width: 960px; /* aligns with Crafting Excellence copy width */
    justify-items: start; /* left-align cells inside the grid */
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Keep each item centered inside its cell */
  .story-page .story-philosophy .philosophy-item {
    text-align: center;
  }
}
.story-page .story-philosophy .philosophy-item:nth-child(2) .philosophy-number {
  background: var(--accent-green);
}
.story-page .story-philosophy .philosophy-item:nth-child(3) .philosophy-number {
  background: var(--accent-orange);
}

/* === STORY PAGE — PHILOSOPHY AUTHORITATIVE LOCK === */
@media (min-width: 1024px) {
  .story-page .story-philosophy .philosophy-grid {
    /* position the grid to match the main content column left edge */
    margin-left: calc((100% - var(--container-width, 1200px)) / 2) !important;
    margin-right: 0 !important;
    max-width: 960px !important;   /* explicit content width to align with copy */
    justify-items: start !important; /* left-align cells inside the grid */
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  /* ensure items remain centered inside each grid cell */
  .story-page .story-philosophy .philosophy-item {
    text-align: center !important;
  }

  /* reinforce number circle centering */
  .story-page .story-philosophy .philosophy-number {
    margin: 0 auto 18px auto !important;
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* === STORY PAGE — PHILOSOPHY: NEUTRALISE BREAKOUT (AUTHORITATIVE) === */

.story-page .story-philosophy {
  width: auto !important;
  max-width: var(--container-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* Philosophy grid — single authority */
.story-page .story-philosophy .philosophy-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 56px !important;
  justify-items: start !important; /* align columns to container left */
  align-items: start !important;
  max-width: var(--container-width) !important; /* use the same site container */
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px !important; /* match site container padding */
  padding-right: 20px !important;
}

/* Number circles — final authority */
.story-page .story-philosophy .philosophy-number {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 20px auto !important;
  font-weight: 600 !important;
  color: #fff !important;
  background: transparent !important;
}

.story-page .story-philosophy .philosophy-item:nth-child(1) .philosophy-number {
  background: var(--accent-red) !important;
}
.story-page .story-philosophy .philosophy-item:nth-child(2) .philosophy-number {
  background: var(--accent-green) !important;
}
.story-page .story-philosophy .philosophy-item:nth-child(3) .philosophy-number {
  background: var(--accent-orange) !important;
}

@media (max-width: 900px) {
  .story-page .story-philosophy .philosophy-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    max-width: 640px !important;
  }
}

/* Homepage: ensure top spacing inside main->content is consistent */
.home-content {
  padding-top: 10px !important;
}

/* =========================
   Media / Press Card Images
   ========================= */

.publication-logo-img {
  width: 100%;
  height: 180px;          /* controls visual height of image */
  overflow: hidden;
  border-radius: 8px;     /* optional, matches card aesthetics */
  margin-bottom: 12px;
}

.publication-logo-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;     /* key line */
  object-position: center;
  display: block;
}


/* ==========================
   AGE GATE (SCOPED OVERRIDES)
   Scoped only to the age gate IDs appended by base.html
   ========================== */

/* overlay */
#ochre-age-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 9998;
}

/* modal container — reuse site form styles via .contact-form (added on creation)
   and scope visuals here so we don't affect other forms */
#ochre-age-modal.contact-form {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--bg-card, #ffffff);
  color: var(--text-main);
  padding: 22px;
  z-index: 9999;
  max-width: 420px;
  border-radius: 10px;
  font-family: 'Satoshi', sans-serif;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

#ochre-age-modal.contact-form h2 {
  margin-top: 0;
  margin-bottom: 8px;
  color: var(--text-main);
}

/* Ensure the age modal root escapes any layout stacking context so
   the overlay/modal render above all page content. This is a
   minimal, scoped rule. */
#ochre-age-modal-root {
  position: fixed;
  inset: 0;
  z-index: 9999;
}

#ochre-age-modal.contact-form p {
  margin-bottom: 16px;
  color: var(--text-soft);
}

/* Buttons: reuse `cn` button pattern but ensure spacing inside this modal */
#ochre-age-modal.contact-form .cn {
  display: inline-block;
  margin-right: 12px;
}

/* small utility to make the modal visible when JS adds the open state */
#ochre-age-overlay.ochre-open,
#ochre-age-modal.ochre-open {
  visibility: visible;
  opacity: 1;
}


/* FINAL LOGO SCALE — HEADER + FOOTER UNIFIED */
/* FINAL LOGO SCALE — HEADER (primary anchor) */
header img.site-logo,
.navbar img.site-logo {
  height: 92px;
  width: auto;
  display: block;
}

@media (max-width: 768px) {
  header img.site-logo,
  .navbar img.site-logo {
    height: 68px;
  }
}

/* FOOTER LOGO — balanced for 3-column layout */
footer img.footer-site-logo {
  height: 68px; /* visually balanced vs 92px header */
  width: auto;
  display: block;
}

@media (max-width: 768px) {
  footer img.footer-site-logo {
    height: 48px;
  }
}

/* Footer layout: 3 equal columns on desktop, stacked on mobile */
.footer-main {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
  padding: 40px 20px;
}

@media (max-width: 768px) {
  .footer-main {
    grid-template-columns: 1fr;
    padding: 40px 20px 30px;
    gap: 20px;
  }
}





/* -------------------------
   Video modal styles
   ------------------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 9998;
}

.modal {
  display: block;
  position: fixed;
  z-index: 9999;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 1000px;
  max-height: 90vh;
  overflow: auto;
  background: #111;
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.6);
}

.modal-content {
  padding: 1.25rem 1.5rem 2rem;
  color: #fff;
}

.modal .close {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  color: #fff;
  font-size: 2rem;
  background: transparent;
  border: none;
  cursor: pointer;
}

.modal .close:hover { color: #ddd; }

.modal-video-container { width:100%; margin-bottom:1.5rem; }
.video-ratio { position: relative; width: 100%; aspect-ratio: 16 / 9; background:#000; }
.video-ratio .modal-video, .video-ratio iframe, .video-ratio video { position: absolute; inset: 0; width:100%; height:100%; border:0; display:block; }

.modal-video { width:100%; height:100%; display:block; }

/* modal text alignment */
#modal-title, #modal-description, .modal h2, .modal p { text-align: left; }

@media (max-width: 768px) {
  .modal { width: 95%; }
  .modal-content { padding: 0.75rem; }
  .modal .close { font-size: 1.5rem; top: 0.25rem; right: 0.5rem; }
}

/* Improved Modal title/description spacing */
#modal-title, .modal-title,
.video-modal h2, .video-modal h3 {
    margin: 1.5rem 0 0.5rem 0;
    font-size: 1.5rem;
}

#modal-description, .modal-description,
.video-modal p {
    margin: 0.5rem 0 0 0;
    color: #ccc;
    line-height: 1.6;
}

/* Universal fallback spacing for modal content children */
.video-modal-content > * + * {
    margin-top: 1.5rem;
}

.video-modal-content h2,
.video-modal-content h3 {
    margin-bottom: 0.5rem;
}






/* MEDIA LIST — hard layout lock (override legacy flex rules) */
.media-page .press-list-item {
  display: grid !important;
  /* grid-template-columns: 140px 1fr auto; (removed - authoritative grid appended at EOF) */
  column-gap: 24px;
  align-items: center;
  padding: 16px 22px !important; /* reduce height */
}

/* Image column — fixed width */
.media-page .press-list-item > div:first-child {
  width: 140px;
  min-width: 140px;
  max-width: 140px;
  display: flex;
  align-items: center;
}

.media-page .press-list-item > div:first-child img {
  width: 100%;
  height: auto;
  max-height: 80px;
  object-fit: contain;
}

/* Text column — fixed start X */
.media-page .press-list-item .item-content {
  text-align: left;
}

/* Kill legacy flex behaviour */
.media-page .press-list-item {
  justify-content: unset !important;
}


/* ===============================
   MEDIA LIST — TABLE HEADERS
=============================== */

/* (Removed pseudo-header row: using final grid-only layout below) */

/* ===============================
   MEDIA LIST — ROW GRID
=============================== */

.media-page .press-list-item {
  display: grid !important;
  /* grid-template-columns: 160px 90px 120px 1fr auto; (removed - authoritative grid appended at EOF) */
  column-gap: 24px;
  align-items: center;
  padding: 18px 24px !important;
}

/* Image column */
.media-page .press-list-item > div:first-child img {
  width: 100%;
  max-height: 96px;
  object-fit: contain;
}

/* CTA alignment */
.media-page .press-list-item > div:last-child {
  justify-self: end;
}

/* Kill legacy flex */
.media-page .press-list-item {
  justify-content: unset !important;
}

/* ===============================
   MOBILE RESPONSIVE
=============================== */

@media (max-width: 768px) {

  .media-page .press-list-item {
    grid-template-columns: 1fr;
    row-gap: 12px;
  }

  .media-page .press-list-item > div:first-child {
    width: 100%;
  }

  .media-page .press-list-item > div:last-child {
    justify-self: stretch;
  }

  .media-page .press-list-item a {
    width: 100%;
    text-align: center;
  }
}


/* MEDIA LIST — definitive logo column fix */
.media-page .press-list-item {
  display: grid !important;
  grid-template-columns: 160px 1fr auto !important;
  column-gap: 28px !important; /* space between logo & text */
  align-items: center !important;
  padding: 14px 20px !important;
}

/* Logo column — fixed vertical box */
.media-page .publication-logo {
  height: 120px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Inner logo wrapper */
.media-page .publication-logo-img {
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Image — fully constrained */
.media-page .publication-logo-img img {
  max-height: 90px !important;
  max-width: 140px !important;
  object-fit: contain !important;
  display: block !important;
}

/* Remove bullets & tighten meta spacing */
.media-page .item-meta ul,
.media-page .item-meta li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* MEDIA LIST — enforce gap between logo and TOI/meta */
.media-page .press-list-item {
  column-gap: 32px !important;
}
/* Extra safety: ensure meta column never touches logo */
.media-page .item-meta {
  padding-left: 4px !important;
}



/* MEDIA LIST — lock image inside column & center it vertically */
.media-page .press-list-item {
  display: grid !important;
  grid-template-columns: 160px 1fr auto !important;
  column-gap: 24px !important; /* space between image and text */
  align-items: center !important;
  padding: 14px 20px !important;
}

/* Image wrapper — fixed height + vertical centering */
.media-page .press-list-item > div:first-child {
  width: 160px !important;
  height: 120px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

/* Image itself — never exceed wrapper */
.media-page .press-list-item img {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

/* Text block cleanup */
.media-page .item-content {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 4px !important;
}

/* Remove bullets / list artifacts */
.media-page .item-content ul,
.media-page .item-content li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}



/* =====================================
   MEDIA LIST — FINAL GRID (LOCKED)
===================================== */

.media-page .press-list-item {
  display: grid !important;
  grid-template-columns: 
    140px   /* Image */
    140px   /* Publication + Date */
    1fr     /* Title */
    auto;   /* CTA */
  column-gap: 32px !important;
  align-items: center !important;
  padding: 16px 28px !important; /* reduced height */
}

/* IMAGE */
.media-page .press-list-item > div:nth-child(1) img {
  width: 140px !important;
  height: 90px !important;
  object-fit: contain !important;
  display: block !important;
}

/* SOURCE + DATE */
.media-page .press-list-item > div:nth-child(2) {
  font-size: 14px;
  line-height: 1.4;
  opacity: 0.8;
}

/* TITLE */
.media-page .press-list-item > div:nth-child(3) {
  font-size: 18px;
}

/* CTA */
.media-page .press-list-item > div:nth-child(4) {
  white-space: nowrap;
}

/* =====================================
   MOBILE — STACK CLEANLY
===================================== */
@media (max-width: 768px) {
  .media-page .press-list-item {
    grid-template-columns: 1fr !important;
    row-gap: 12px;
  }

  .media-page .press-list-item > div {
    width: 100% !important;
  }

  .media-page .press-list-item > div:nth-child(4) {
    margin-top: 8px;
  }
}



/* ===============================
   MEDIA LIST — FINAL GRID FIX
=============================== */

.media-page .press-list-item {
  display: grid !important;
  /* grid-template-columns: 120px 90px 120px 1fr auto; (removed - authoritative grid appended at EOF) */
  column-gap: 24px;
  align-items: center;
  padding: 16px 24px !important;
}

/* Image column */
.media-page .press-list-item img {
  width: 120px;
  height: 80px;
  object-fit: contain;
  display: block;
}

/* Source + date */
.media-page .press-list-item .item-meta {
  font-size: 12px;
  opacity: 0.7;
}

/* Title */
.media-page .press-list-item h3,
.media-page .press-list-item .item-title {
  font-size: 18px;
}

/* CTA */
.media-page .press-list-item a {
  white-space: nowrap;
}

/* Kill legacy flex */
.media-page .press-list-item {
  justify-content: unset !important;
}

/* ===============================
   MOBILE
=============================== */

@media (max-width: 768px) {
  .media-page .press-list-item {
    grid-template-columns: 1fr;
    row-gap: 12px;
  }

  .media-page .press-list-item img {
    width: 100%;
    height: auto;
  }

  .media-page .press-list-item a {
    width: 100%;
    text-align: center;
  }
}



/* =========================================================
   COLLECTION DETAIL – LOCKED NAV OVERRIDES (DO NOT MOVE)
   Must remain at EOF to override legacy styles
========================================================= */

.collection-back-link {
  max-width: var(--container-width);
  margin: 40px auto 48px auto !important;
  padding: 0 20px;
}

/* === STORY PAGE: FORCE-RESET PHILOSOPHY PADDING/MARGINS (AUTHORITATIVE) ===
   Some legacy rules add large padding to `.story-philosophy`. Add a final
   high-specificity override to remove those gaps for the Story page only. */
.story-page .story-philosophy,
.story-page .story-philosophy > * {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  background: transparent !important;
}

/* Global override: the `.story-philosophy` element in this template is
   rendered as a sibling of `.story-page`, so neutralise its base padding
   as well (authoritative, site-wide for safety). */
.story-philosophy {
  padding: 0 !important;
  margin: 0 !important;
}

/* Ensure any gradient-divider directly adjacent doesn't inject extra
   vertical space via pseudo-elements. */
.story-page + .gradient-divider,
.story-page + .gradient-divider,
.story-page + .gradient-divider::before,
.story-page + .gradient-divider::after {
  margin: 0 !important;
  height: 0 !important;
  background: transparent !important;
  content: none !important;
}

/* Ensure the divider itself doesn't add vertical margin between story
   and philosophy when it's placed between them. */
.story-page + .gradient-divider { margin: 0 !important; height: 2px !important; }

.collection-back-link .back-link {
  color: #ff5a5a;
  text-decoration: none;
  font-size: 14px;
}

.collection-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 48px !important;
}

.collection-nav a {
  padding: 12px 24px;
  background: #ff5a5a;
  color: #000;
  text-decoration: none;
  font-weight: 600;
  border-radius: 4px;
}