/** Shopify CDN: Minification failed

Line 41:0 All "@import" rules must come first

**/
/* =================================================================
   FONTS — Load Google Fonts so Anton / Special Elite / Oswald / Inter
   are available everywhere. Must be at the very top of the file.
   ================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Oswald:wght@400;500;700&family=Special+Elite&family=Inter:wght@300;400;500;600;700&display=swap');

/* ==========================================================================
   BURNED OUT SPICE CO. — Dawn theme override
   Drop into: assets/bosc-override.css then load in theme.liquid
   ========================================================================== */

:root,
:root.color-scheme-1,
:root.color-scheme-background-1,
.color-background-1,
.color-scheme-1 {
  /* BOSC palette */
  --color-foreground: 244, 234, 216;   /* paper */
  --color-background: 14, 13, 12;       /* coal */
  --color-button: 200, 74, 28;          /* ember */
  --color-button-text: 255, 255, 255;
  --color-secondary-button: 14, 13, 12;
  --color-secondary-button-text: 244, 234, 216;
  --color-shadow: 0, 0, 0;
  --color-border: 42, 38, 34;
  --color-base-text: 244, 234, 216;
  --color-base-background-1: 14, 13, 12;
  --color-base-background-2: 22, 20, 15;
  --color-base-accent-1: 200, 74, 28;
  --color-base-accent-2: 200, 163, 90;
  --color-base-solid-button-labels: 255, 255, 255;
  --color-base-outline-button-labels: 200, 74, 28;
}

/* Override Dawn's font stack with BOSC fonts */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Oswald:wght@400;500;700&family=Special+Elite&family=Inter:wght@300;400;500;600;700&family=Cormorant+Garamond:ital,wght@0,400;1,400&display=swap');

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  background-color: #0e0d0c !important;
  color: #f4ead8 !important;
}

/* Display / heading typography */
h1, h2, h3, .h0, .h1, .h2, .h3,
.banner__heading,
.collection-hero__title,
.product__title h1,
.section-header h2 {
  font-family: 'Anton', sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  line-height: 0.95 !important;
}

/* Eyebrow / small caps text */
.eyebrow, .subtitle, .product__text {
  font-family: 'Special Elite', monospace !important;
  letter-spacing: 0.3em !important;
  text-transform: uppercase !important;
}

/* Buttons — gritty ember */
.button,
.shopify-payment-button__button,
button.button-primary,
.button--primary {
  font-family: 'Anton', sans-serif !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  font-size: 16px !important;
  padding: 18px 36px !important;
  border-radius: 0 !important;
  background-color: #c84a1c !important;
  color: #fff !important;
  border: 2px solid #c84a1c !important;
  transition: all 0.2s;
}
.button:hover {
  background-color: #8c2a0e !important;
  border-color: #8c2a0e !important;
}
.button--secondary {
  background: transparent !important;
  color: #f4ead8 !important;
  border: 2px solid #f4ead8 !important;
}
.button--secondary:hover {
  background: #f4ead8 !important;
  color: #161412 !important;
}

/* Header */
.header {
  background-color: rgba(14,13,12,0.95) !important;
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #2a2622;
  padding: 14px 32px !important;
}
.header__heading-link,
.header__menu-item span {
  font-family: 'Oswald', sans-serif !important;
  font-size: 14px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #f4ead8 !important;
}
.header__menu-item:hover span {
  color: #c84a1c !important;
  text-decoration: none !important;
}
.header__icon {
  color: #f4ead8 !important;
}
.header__icon:hover {
  color: #c84a1c !important;
}
.header__heading-logo {
  max-height: 110px !important;
  width: auto !important;
}

/* Announcement bar */
.announcement-bar,
.utility-bar {
  background-color: #8c2a0e !important;
}
.announcement-bar__message,
.utility-bar__message {
  font-family: 'Special Elite', monospace !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  color: #f4ead8 !important;
  padding: 8px 20px !important;
}

/* Hero / image banner */
.banner__heading {
  font-size: clamp(56px, 10vw, 148px) !important;
  text-shadow: 0 4px 30px rgba(0,0,0,0.6) !important;
}
.banner__text {
  font-family: 'Oswald', sans-serif !important;
  font-size: clamp(18px, 2.2vw, 26px) !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}
.banner__buttons .button {
  padding: 18px 44px !important;
  font-size: 18px !important;
}

/* Product cards */
.card-wrapper, .card, .card__inner {
  background-color: #2a2622 !important;
  border: 1px solid #2a2622 !important;
  border-radius: 0 !important;
  transition: transform 0.3s, border-color 0.3s;
}
.card-wrapper:hover {
  transform: translateY(-6px);
  border-color: #c84a1c !important;
}
.card__heading,
.card__information .card__heading a {
  font-family: 'Anton', sans-serif !important;
  font-size: 32px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: #f4ead8 !important;
}
.price__regular .price-item--regular,
.price-item {
  font-family: 'Anton', sans-serif !important;
  font-size: 24px !important;
  color: #f4ead8 !important;
}

/* PDP */
.product__title h1, .product h1 {
  font-size: clamp(48px, 7vw, 88px) !important;
}
.product .price-item {
  font-size: 36px !important;
  color: #c84a1c !important;
}
.product__description {
  color: #e9dcc1 !important;
  line-height: 1.7 !important;
  opacity: 0.88;
}
.product-form__buttons .button {
  font-size: 18px !important;
  padding: 22px !important;
  letter-spacing: 0.25em !important;
}

/* Collection page */
.collection-hero__title {
  font-size: clamp(56px, 9vw, 120px) !important;
}
.facets {
  border-color: #2a2622 !important;
}
.facets__summary, .facets__heading {
  font-family: 'Oswald', sans-serif !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: #f4ead8 !important;
}

/* Cart drawer */
.cart-drawer {
  background-color: #0e0d0c !important;
  border-left: 1px solid #2a2622 !important;
}
.cart-drawer__heading {
  font-family: 'Anton', sans-serif !important;
  font-size: 28px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #f4ead8 !important;
}
.cart-item__name {
  font-family: 'Anton', sans-serif !important;
  font-size: 18px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: #f4ead8 !important;
}

/* Newsletter / footer */
.footer {
  background-color: #050504 !important;
  color: #f4ead8 !important;
  border-top: 1px solid #2a2622;
}
.footer__heading {
  font-family: 'Anton', sans-serif !important;
  font-size: 14px !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
  color: #c84a1c !important;
}
.footer-block__heading {
  font-family: 'Anton', sans-serif !important;
  font-size: 14px !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
  color: #c84a1c !important;
}
.footer a, .footer__list-social a {
  color: #f4ead8 !important;
  font-family: 'Oswald', sans-serif !important;
  letter-spacing: 0.05em !important;
}
.footer a:hover {
  color: #c84a1c !important;
}

/* Newsletter input */
.newsletter-form__field-wrapper input,
input[type="email"] {
  background-color: rgba(255,255,255,0.08) !important;
  border: 1px solid #f4ead8 !important;
  color: #f4ead8 !important;
  font-family: 'Oswald', sans-serif !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
}
.newsletter-form__field-wrapper input::placeholder {
  color: rgba(244,234,216,0.5) !important;
}

/* Sections — make backgrounds match palette */
.color-background-2,
.color-scheme-2,
.shopify-section--multicolumn,
.shopify-section--featured-collection {
  background-color: #16140f !important;
}

/* Image with text — story panel feel */
.image-with-text__content {
  background-color: transparent !important;
}
.image-with-text__heading {
  font-family: 'Anton', sans-serif !important;
  font-size: clamp(40px, 5.5vw, 72px) !important;
}

/* Rich text */
.rich-text__heading {
  font-family: 'Anton', sans-serif !important;
  font-size: clamp(40px, 5.5vw, 72px) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
}

/* Multicolumn cards (lifestyle grid) */
.multicolumn-card {
  background-color: #16140f !important;
  border: 1px solid #2a2622 !important;
}
.multicolumn-card__info h3 {
  font-family: 'Anton', sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

/* Force ember on accents */
a, .link {
  color: #c84a1c;
}
a:hover {
  color: #8c2a0e;
}

/* ==== PATCH v2: Fix header text contrast + tighten Dawn-specific overrides ==== */

/* Force header text light */
.header__heading-link,
.header__heading-link span,
.header h1 a,
.header__heading-logo-wrapper a,
.header__heading,
.header__inline-menu .header__menu-item span,
.list-menu__item,
.header-menu-link {
  color: #f4ead8 !important;
}

/* Header icons */
.header__icons .header__icon svg path,
.header__icons svg {
  stroke: #f4ead8 !important;
  fill: #f4ead8 !important;
}

/* Region/locale picker */
.localization-form__select,
.disclosure__button {
  color: #f4ead8 !important;
  background: transparent !important;
}

/* Wrapper backgrounds — Dawn uses these classes a lot */
.shopify-section-header-sticky,
.shopify-section-header {
  background-color: #0e0d0c !important;
}

/* Main content area — force dark even if Dawn sets schemes */
.main-content,
main {
  background-color: #0e0d0c;
  color: #f4ead8;
}

/* Color scheme classes Dawn assigns to sections */
[class*="color-scheme-"], [class*="color-background-"] {
  background-color: #0e0d0c !important;
  color: #f4ead8 !important;
}
[class*="color-scheme-1"], [class*="color-background-1"] {
  background-color: #0e0d0c !important;
}
[class*="color-scheme-2"], [class*="color-background-2"] {
  background-color: #16140f !important;
}

/* Make sure h1/h2 etc. inherit our color in dark sections */
[class*="color-scheme-"] h1,
[class*="color-scheme-"] h2,
[class*="color-scheme-"] h3,
[class*="color-scheme-"] p,
[class*="color-scheme-"] a,
[class*="color-scheme-"] li {
  color: #f4ead8 !important;
}

/* The big "BROWSE OUR LATEST PRODUCTS" image-banner text */
.banner h1,
.banner h2,
.banner__heading,
.image-banner__heading {
  color: #f4ead8 !important;
  text-shadow: 0 4px 30px rgba(0,0,0,0.8) !important;
}

/* Body backgrounds */
.shopify-section,
.page-width {
  background-color: transparent;
}
body, html {
  background-color: #0e0d0c !important;
}

/* ==== PATCH v3: Kill the black hero overlay, fix composition ==== */

/* Banner — make text container transparent + add text shadow for legibility on photo */
.banner__box,
.banner__content,
.image-banner__box {
  background-color: transparent !important;
  background: none !important;
  box-shadow: none !important;
  padding: 60px 32px !important;
}

/* All text inside banner gets a heavy drop shadow to stay legible on photo */
.banner__heading,
.banner__text,
.banner h1,
.banner h2,
.banner p,
.image-banner__heading,
.image-banner__text {
  text-shadow:
    0 2px 8px rgba(0,0,0,0.9),
    0 4px 30px rgba(0,0,0,0.7) !important;
  background: transparent !important;
}

/* Heading specifically */
.banner__heading,
.image-banner__heading {
  font-size: clamp(48px, 8vw, 120px) !important;
  line-height: 0.95 !important;
  margin-bottom: 20px !important;
  color: #f4ead8 !important;
}

/* Subheading text */
.banner__text,
.image-banner__text {
  font-size: clamp(16px, 2vw, 22px) !important;
  letter-spacing: 0.1em !important;
  margin-bottom: 30px !important;
  text-transform: uppercase !important;
  font-family: 'Oswald', sans-serif !important;
}

/* Buttons in banner — big and ember */
.banner__buttons .button,
.image-banner__buttons .button,
.banner .button {
  background: #c84a1c !important;
  color: #fff !important;
  border: 2px solid #c84a1c !important;
  padding: 20px 50px !important;
  font-size: 18px !important;
  letter-spacing: 0.22em !important;
  font-family: 'Anton', sans-serif !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
}
.banner__buttons .button:hover {
  background: #8c2a0e !important;
  border-color: #8c2a0e !important;
}

/* Add a gradient overlay ON the banner image itself for legibility */
.banner__media::after,
.image-banner__media::after,
.banner__media-half::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(14,13,12,0.5) 60%, rgba(14,13,12,0.75) 100%);
  pointer-events: none;
}
.banner__media,
.image-banner__media {
  position: relative;
}

/* Force banner box to be over the photo, centered, not in a box */
.banner__content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
}

/* Banner total height */
.banner--medium,
.banner--large,
.image-banner {
  min-height: 600px !important;
}
.banner__media,
.image-banner__media {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
.banner__media img,
.image-banner__media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* =================================================================
   PATCH 2 — STYLE NEW HOMEPAGE SECTIONS
   Manifesto / Story / Testimonial / Newsletter
   ================================================================= */

/* ---------- MANIFESTO (first Multicolumn after hero) ---------- */
/* Target: the Multicolumn section with 4 columns, used for manifesto strip.
   We can't easily distinguish it from the dish multicolumn, so we use a
   sibling-position trick: the FIRST multicolumn on the page is manifesto.
   Cook With It is the SECOND one. */
.shopify-section:has(.multicolumn) ~ .shopify-section:has(.multicolumn) .multicolumn {
  /* This is COOK WITH IT (second multicolumn) - leave it alone */
}

/* All multicolumns get base styling */
.multicolumn {
  background: var(--bg-coal) !important;
  padding: 0 !important;
}
.multicolumn .page-width {
  max-width: 1400px !important;
}
.multicolumn-card {
  background: transparent !important;
}
.multicolumn-card__info {
  padding: 20px 12px !important;
}
.multicolumn-card__info h3 {
  font-family: 'Anton', sans-serif !important;
  font-size: 24px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--bg-paper) !important;
  margin-bottom: 8px !important;
}
.multicolumn-card__info .rte,
.multicolumn-card__info p {
  font-family: 'Special Elite', monospace !important;
  font-size: 12px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--ember) !important;
}

/* MANIFESTO-specific: target multicolumn where columns have NO image */
.multicolumn-card:not(:has(.multicolumn-card__image-wrapper)) {
  padding: 30px 20px !important;
  text-align: center !important;
}
.multicolumn-card:not(:has(.multicolumn-card__image-wrapper)) h3 {
  font-size: 18px !important;
  letter-spacing: 0.2em !important;
  color: var(--ember) !important;
}
.multicolumn-card:not(:has(.multicolumn-card__image-wrapper)) .rte,
.multicolumn-card:not(:has(.multicolumn-card__image-wrapper)) p {
  font-family: 'Oswald', sans-serif !important;
  font-size: 14px !important;
  letter-spacing: 0.05em !important;
  color: var(--bg-paper) !important;
  opacity: 0.85 !important;
  font-weight: 300 !important;
}

/* ---------- STORY PANEL (Image with text) ---------- */
.image-with-text {
  background: var(--bg-paper) !important;
  color: var(--ink) !important;
  padding: 80px 20px !important;
}
.image-with-text__grid {
  max-width: 1300px !important;
  margin: 0 auto !important;
  gap: 60px !important;
}
.image-with-text__media-item img,
.image-with-text__media img {
  border: 12px solid var(--bg-paper) !important;
  box-shadow: 0 30px 60px rgba(20,15,10,0.18), 0 0 0 1px var(--paper-edge) !important;
}
.image-with-text__content {
  background: transparent !important;
  padding: 20px !important;
}
.image-with-text__heading {
  font-family: 'Anton', sans-serif !important;
  font-size: clamp(40px, 5vw, 64px) !important;
  line-height: 0.95 !important;
  letter-spacing: 0.01em !important;
  text-transform: uppercase !important;
  color: var(--ink) !important;
  margin-bottom: 24px !important;
}
.image-with-text__text {
  font-family: 'Inter', sans-serif !important;
  font-size: 17px !important;
  line-height: 1.75 !important;
  color: var(--ink-soft) !important;
}
.image-with-text__text p {
  margin-bottom: 16px !important;
}
.image-with-text .button {
  background: var(--ember) !important;
  color: #fff !important;
  border: 2px solid var(--ember) !important;
  border-radius: 0 !important;
  padding: 14px 32px !important;
  font-family: 'Anton', sans-serif !important;
  font-size: 14px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  margin-top: 12px !important;
}
.image-with-text .button:hover {
  background: transparent !important;
  color: var(--ember) !important;
}

/* ---------- TESTIMONIAL (Rich text with center alignment) ---------- */
/* Target: any rich-text section whose heading contains a quote character.
   Simpler: target rich-text sections that come AFTER multicolumns. */
.rich-text {
  background: var(--bg-soot) !important;
  padding: 80px 20px !important;
}
.rich-text__blocks {
  max-width: 1100px !important;
}
.rich-text__heading {
  font-family: 'Anton', sans-serif !important;
  font-size: clamp(28px, 4vw, 48px) !important;
  line-height: 1.15 !important;
  letter-spacing: 0.01em !important;
  text-transform: uppercase !important;
  color: var(--bg-paper) !important;
}
.rich-text__text {
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  color: var(--bg-paper-2) !important;
  opacity: 0.88 !important;
}
.rich-text__text--caption,
.rich-text caption-with-letter-spacing {
  font-family: 'Special Elite', monospace !important;
  font-size: 13px !important;
  letter-spacing: 0.3em !important;
  text-transform: uppercase !important;
  color: var(--gold) !important;
  margin-top: 20px !important;
}

/* ---------- NEWSLETTER (Email signup) ---------- */
.newsletter,
.email-signup,
.newsletter-section {
  background: linear-gradient(180deg, rgba(14,13,12,0.85), rgba(14,13,12,0.95)), var(--bg-coal) !important;
  background-size: cover !important;
  background-position: center !important;
  text-align: center !important;
  padding: 100px 20px !important;
}
.newsletter h2,
.newsletter__heading,
.email-signup h2,
.email-signup__heading {
  font-family: 'Anton', sans-serif !important;
  font-size: clamp(48px, 7vw, 88px) !important;
  line-height: 0.95 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  color: var(--bg-paper) !important;
  margin-bottom: 16px !important;
}
.newsletter__subheading,
.newsletter p {
  font-family: 'Oswald', sans-serif !important;
  font-size: 16px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--bg-paper-2) !important;
  margin-bottom: 32px !important;
}
.newsletter-form,
.newsletter__form {
  max-width: 540px !important;
  margin: 0 auto !important;
}
.newsletter-form__field-wrapper input,
.newsletter__form input[type="email"] {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid var(--bg-paper) !important;
  color: var(--bg-paper) !important;
  font-family: 'Oswald', sans-serif !important;
  font-size: 15px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
}
.newsletter-form button,
.newsletter__form button {
  background: var(--ember) !important;
  color: #fff !important;
  border: 1px solid var(--ember) !important;
  font-family: 'Anton', sans-serif !important;
  font-size: 14px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
}
.newsletter-form button:hover,
.newsletter__form button:hover {
  background: var(--ember-deep) !important;
}

/* =================================================================
   PATCH 3 — REFINEMENTS BASED ON LIVE PREVIEW
   ================================================================= */

/* ---------- FIX 1: Hide stray "BUTTON LABEL" placeholders ---------- */
/* Dawn often shows .button when empty, hide if it contains "Button label" literal */
.multicolumn .button:empty,
.multicolumn-card .button:empty {
  display: none !important;
}
/* Hide button from Image-with-text section when label is default placeholder */
.image-with-text .button[href="#"]:not([href*="/"]) {
  display: none !important;
}

/* ---------- FIX 2: STORY PANEL — force paper background ---------- */
/* Dawn uses background-color via color schemes. Override the whole section. */
.shopify-section:has(.image-with-text) {
  background: var(--bg-paper) !important;
}
.image-with-text,
.image-with-text__grid,
.image-with-text__content-wrapper,
.image-with-text__content {
  background: var(--bg-paper) !important;
  color: var(--ink) !important;
}
.image-with-text__heading,
.image-with-text h2 {
  color: var(--ink) !important;
}
.image-with-text__text,
.image-with-text__text p,
.image-with-text .rte,
.image-with-text .rte p {
  color: var(--ink-soft) !important;
}
/* Story button — ember filled, visible on paper bg */
.image-with-text .button,
.image-with-text a.button {
  background: var(--ember) !important;
  color: #fff !important;
  border: 2px solid var(--ember) !important;
  display: inline-block !important;
  opacity: 1 !important;
}

/* ---------- FIX 3: FEATURED COLLECTION grid - tighter cards ---------- */
.featured-collection,
.collection {
  padding: 60px 20px !important;
}
.product-grid,
.collection .grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  max-width: 1300px !important;
  margin: 0 auto !important;
}
.product-grid .grid__item,
.collection .grid__item,
.card-wrapper {
  width: 100% !important;
  max-width: 100% !important;
}
.card__media,
.card .media {
  aspect-ratio: 1/1 !important;
  max-height: 480px !important;
}
.card__media img,
.card .media img {
  object-fit: cover !important;
  object-position: center !important;
}
/* Product card text block */
.card__content,
.card-information {
  padding: 20px 22px 24px !important;
  background: var(--char) !important;
}
.card__heading,
.card-information__text,
.card__information .card__heading {
  font-family: 'Anton', sans-serif !important;
  font-size: 26px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--bg-paper) !important;
}
.price,
.card .price,
.price__regular {
  font-family: 'Anton', sans-serif !important;
  font-size: 20px !important;
  color: var(--bg-paper) !important;
}
.unit-price,
.price__unit {
  font-family: 'Special Elite', monospace !important;
  font-size: 11px !important;
  color: var(--ash) !important;
}

/* ---------- FIX 4: MANIFESTO — borderless dark cells ---------- */
.multicolumn-card:not(:has(.multicolumn-card__image-wrapper)),
.multicolumn-list__item:not(:has(.multicolumn-card__image-wrapper)) {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* ---------- FIX 5: NEWSLETTER form widening ---------- */
.newsletter-form,
.newsletter__wrapper,
.newsletter__form {
  max-width: 540px !important;
  width: 100% !important;
  margin: 30px auto 0 !important;
}
.newsletter-form__field-wrapper {
  width: 100% !important;
}
.newsletter-form__field-wrapper input,
input[type="email"].field__input {
  width: 100% !important;
  padding: 18px 24px !important;
  font-size: 15px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid var(--bg-paper) !important;
  color: var(--bg-paper) !important;
}
.newsletter-form__button {
  background: var(--ember) !important;
  color: #fff !important;
  border-color: var(--ember) !important;
}

/* ---------- FIX 6: Section title "THREE BLENDS" centered ---------- */
.featured-collection .title-wrapper,
.collection__title,
.section-header {
  text-align: center !important;
  max-width: 1300px !important;
  margin: 0 auto 40px !important;
}
.featured-collection .title,
.section-header__title,
.collection__title h2 {
  font-family: 'Anton', sans-serif !important;
  font-size: clamp(40px, 5vw, 64px) !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  text-align: center !important;
}

/* =================================================================
   PATCH 4 — NUCLEAR OVERRIDE FOR STORY PANEL
   Use section ID prefix + Dawn's actual modern class names
   ================================================================= */

/* Dawn's modern Image-with-text class is .image-with-text but also wraps
   in section--color-* utility classes. We override on color-scheme classes too. */

/* Override Scheme 1 specifically to render as paper for the Story section */
/* Target by data-section-type which Shopify outputs on every section */

[data-section-type="image-with-text"],
.section--image-with-text,
section.image-with-text,
.shopify-section--image-with-text {
  background: #f4ead8 !important;
  background-color: #f4ead8 !important;
}

[data-section-type="image-with-text"] .image-with-text__content,
[data-section-type="image-with-text"] .image-with-text__media-container,
[data-section-type="image-with-text"] .image-with-text__grid,
[data-section-type="image-with-text"] * {
  background-color: transparent !important;
}

[data-section-type="image-with-text"] .image-with-text__heading,
[data-section-type="image-with-text"] h2,
[data-section-type="image-with-text"] h3 {
  color: #161412 !important;
}

[data-section-type="image-with-text"] .image-with-text__text,
[data-section-type="image-with-text"] .image-with-text__text *,
[data-section-type="image-with-text"] .rte,
[data-section-type="image-with-text"] .rte *,
[data-section-type="image-with-text"] p {
  color: #3a342e !important;
}

[data-section-type="image-with-text"] .button {
  background: #c84a1c !important;
  background-color: #c84a1c !important;
  color: #ffffff !important;
  border-color: #c84a1c !important;
}

/* If Dawn uses color-scheme utility classes, override those when on image-with-text */
[data-section-type="image-with-text"] [class*="color-scheme-"],
[data-section-type="image-with-text"] [class*="--color-"],
[data-section-type="image-with-text"] .color-background-1,
[data-section-type="image-with-text"] .color-background-2,
[data-section-type="image-with-text"] .color-inverse {
  background-color: #f4ead8 !important;
  color: #161412 !important;
}

/* =================================================================
   PATCH 5 — TARGET DAWN'S color-scheme-N CLASSES DIRECTLY
   Dawn uses .color-scheme-1 / .color-scheme-2 etc. The number doesn't
   always match the Customizer label. We force ANY color-scheme inside
   an image-with-text section to render as paper.
   ================================================================= */

/* Story section — kill any color scheme background, force paper */
.image-with-text,
.image-with-text .color-scheme-1,
.image-with-text .color-scheme-2,
.image-with-text .color-scheme-3,
.image-with-text .color-scheme-4,
.image-with-text .color-scheme-5,
.image-with-text .gradient,
.image-with-text__media,
.image-with-text__media--large,
.image-with-text__media--medium,
.image-with-text__content,
.image-with-text__content-wrapper {
  background: #f4ead8 !important;
  background-color: #f4ead8 !important;
  background-image: none !important;
  color: #161412 !important;
}

/* Section wrapper (Dawn outputs section-id specific class) */
.shopify-section .image-with-text {
  background: #f4ead8 !important;
}

/* Image frame inside should NOT be paper — let the photo show */
.image-with-text__media img,
.image-with-text__media-item img {
  background: transparent !important;
}
/* But keep the framing border around the image */
.image-with-text__media {
  background: transparent !important;
  background-color: transparent !important;
}

/* Heading + body text on paper bg */
.image-with-text h2,
.image-with-text h3,
.image-with-text .image-with-text__heading,
.image-with-text__text-item h2,
.image-with-text__text-item h3 {
  color: #161412 !important;
}

.image-with-text p,
.image-with-text .rte,
.image-with-text .rte p,
.image-with-text__text,
.image-with-text__text p {
  color: #3a342e !important;
}

/* Button — ember filled */
.image-with-text .button,
.image-with-text a.button,
.image-with-text__text-item .button {
  background: #c84a1c !important;
  background-color: #c84a1c !important;
  color: #ffffff !important;
  border: 2px solid #c84a1c !important;
}

.image-with-text .button:hover {
  background: transparent !important;
  color: #c84a1c !important;
}

/* =================================================================
   PATCH 7 — HARD FONT ENFORCEMENT
   Now that Google Fonts are imported at the top, force them across
   every Dawn section that renders headings + body text. Dawn ships
   with its own font-family vars (--font-heading-family etc.) which
   we override here.
   ================================================================= */

/* Override Dawn's CSS variables — this is the cleanest leverage point */
:root,
body,
.shopify-section {
  --font-heading-family: 'Anton', sans-serif !important;
  --font-body-family: 'Inter', sans-serif !important;
  --font-heading-weight: 400 !important;
}

/* Force fonts directly on every heading and body element regardless of section */
h1, h2, h3, h4,
.h0, .h1, .h2, .h3, .h4,
.banner__heading,
.banner__heading-wrapper h2,
.banner__text,
.section-header__title,
.title,
.title-wrapper h2,
.card__heading,
.card__heading a,
.product__title,
.collection__title h2,
.image-with-text__heading,
.rich-text__heading,
.newsletter__heading,
.multicolumn-card__info h3,
.multicolumn-list__item h3,
.featured-collection .title,
.collection .title,
.collection-hero__title,
footer h2 {
  font-family: 'Anton', sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  line-height: 0.95 !important;
}

/* Body / paragraph text — Inter */
body,
p, li, span,
.rte, .rte p,
.banner__text,
.image-with-text__text,
.rich-text__text,
.product__description,
.card__information,
.collection-description {
  font-family: 'Inter', sans-serif !important;
}

/* Eyebrow / caption / typewriter text — Special Elite */
.subtitle,
.caption,
.caption-with-letter-spacing,
.banner__subtitle,
.section-header__subtitle,
.rich-text__text--caption,
.product__tax,
.unit-price,
.price__unit,
.newsletter__subheading {
  font-family: 'Special Elite', monospace !important;
  letter-spacing: 0.3em !important;
  text-transform: uppercase !important;
}

/* Buttons / nav / labels — Oswald or Anton */
.button,
button,
a.button,
.product-form__submit,
.shopify-payment-button__button,
input[type="submit"] {
  font-family: 'Anton', sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
}

/* Nav links + header */
.header__menu-item,
.header__menu-item span,
.list-menu__item,
.header__inline-menu a,
.menu-drawer__menu-item {
  font-family: 'Oswald', sans-serif !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
}

/* Announcement bar — typewriter */
.announcement-bar,
.announcement-bar__message,
.utility-bar {
  font-family: 'Special Elite', monospace !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
}

/* Pricing — Anton */
.price,
.price__regular,
.price-item,
.price-item--regular {
  font-family: 'Anton', sans-serif !important;
  letter-spacing: 0.04em !important;
}

/* =================================================================
   PATCH 8 — SECTION HEADINGS BIGGER (closer to mockup)
   ================================================================= */

/* Hero heading — massive */
.banner__heading,
.banner h2.banner__heading {
  font-size: clamp(56px, 10vw, 148px) !important;
  line-height: 0.92 !important;
}

/* All major section headings */
.section-header__title,
.title-wrapper h2,
.image-with-text__heading,
.rich-text__heading,
.newsletter__heading,
.featured-collection .title,
h2.title {
  font-size: clamp(40px, 6vw, 72px) !important;
}

/* Multicolumn (Cook With It) heading bigger too */
.multicolumn .title-wrapper-with-link h2 {
  font-size: clamp(40px, 6vw, 64px) !important;
}

/* Product card titles in featured collection */
.card__heading,
.card-information__text {
  font-size: 24px !important;
  letter-spacing: 0.04em !important;
}

/* Multicolumn dish card titles */
.multicolumn-card__info h3 {
  font-size: 22px !important;
}

/* Manifesto small caps (no images = small format) */
.multicolumn-card:not(:has(.multicolumn-card__image-wrapper)) h3 {
  font-size: 16px !important;
  letter-spacing: 0.22em !important;
}

/* =================================================================
   PATCH 9 — COLOR ACCENTS (ember + gold)
   ================================================================= */

/* Manifesto headings — ember color */
.multicolumn-card:not(:has(.multicolumn-card__image-wrapper)) h3 {
  color: #c84a1c !important;
}

/* Dish tags under titles — ember */
.multicolumn-card__info .rte,
.multicolumn-card__info p {
  color: #c84a1c !important;
  font-family: 'Special Elite', monospace !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
}

/* Section eyebrows / captions — gold */
.caption-with-letter-spacing,
.subtitle {
  color: #c8a35a !important;
}

/* All section title color stays paper */
.section-header__title,
h2.title {
  color: #f4ead8 !important;
}

/* Story section heading stays dark (paper bg) */
.image-with-text__heading,
.image-with-text h2 {
  color: #161412 !important;
}

/* =================================================================
   PATCH 10 — POLISH PASS
   1. Product card cleanup
   2. Cook With It tag emphasis
   3. Hero button layout (side-by-side, bigger)
   4. Newsletter input visible
   5. Section spacing
   6. Story image framing + 50/50 grid
   ================================================================= */

/* ---------- FIX 1: Product cards (Three Blends) ---------- */
/* Tighter, darker, ember tag overlay, less brick wall showing */
.featured-collection {
  padding: 80px 24px 100px !important;
}
.featured-collection .grid,
.featured-collection .product-grid {
  gap: 28px !important;
  max-width: 1300px !important;
}
.featured-collection .card-wrapper,
.featured-collection .card {
  background: #2a2622 !important;
  border: 1px solid #2a2622 !important;
  overflow: hidden !important;
  transition: transform 0.3s ease, border-color 0.3s ease !important;
}
.featured-collection .card-wrapper:hover,
.featured-collection .card:hover {
  transform: translateY(-6px) !important;
  border-color: #c84a1c !important;
}
/* Crop product image tighter, add bottom gradient so brick wall fades */
.featured-collection .card__media,
.featured-collection .media {
  aspect-ratio: 1/1 !important;
  position: relative !important;
  overflow: hidden !important;
  background-color: #1a1815 !important;
}
.featured-collection .card__media::after,
.featured-collection .media::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, transparent 50%, rgba(14,13,12,0.5) 100%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
.featured-collection .card__media img,
.featured-collection .media img {
  transition: transform 0.5s ease !important;
}
.featured-collection .card-wrapper:hover .card__media img,
.featured-collection .card:hover .media img {
  transform: scale(1.04) !important;
}
.featured-collection .card__content,
.featured-collection .card__information {
  background: #2a2622 !important;
  padding: 22px 24px 26px !important;
}
.featured-collection .card__heading,
.featured-collection .card__heading a {
  font-size: 28px !important;
  color: #f4ead8 !important;
  margin-bottom: 8px !important;
}
.featured-collection .price {
  margin-top: 12px !important;
  padding-top: 14px !important;
  border-top: 1px solid #1a1815 !important;
  font-size: 22px !important;
  color: #f4ead8 !important;
}

/* ---------- FIX 2: Cook With It tag emphasis ---------- */
/* Bigger, more visible tags above dish names */
.multicolumn .multicolumn-card__info {
  padding: 18px 4px 8px !important;
  text-align: left !important;
}
.multicolumn .multicolumn-card__info h3 {
  font-size: 22px !important;
  margin-bottom: 6px !important;
  color: #f4ead8 !important;
}
.multicolumn .multicolumn-card__info .rte,
.multicolumn .multicolumn-card__info p {
  font-family: 'Special Elite', monospace !important;
  font-size: 12px !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: #c84a1c !important;
  margin-bottom: 0 !important;
}
/* Reset for manifesto multicolumn (no images) — keep text centered there */
.multicolumn-card:not(:has(.multicolumn-card__image-wrapper)) .multicolumn-card__info {
  text-align: center !important;
}

/* ---------- FIX 3: Hero buttons side-by-side, bigger ---------- */
.banner .banner__buttons,
.banner__content .banner__buttons,
.image-banner .banner__buttons {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 14px !important;
  margin-top: 36px !important;
}
.banner .banner__buttons .button {
  padding: 18px 44px !important;
  font-size: 16px !important;
  letter-spacing: 0.2em !important;
  min-width: 220px !important;
}
.banner .banner__buttons .button--primary {
  background: #c84a1c !important;
  border-color: #c84a1c !important;
  color: #ffffff !important;
}
.banner .banner__buttons .button--secondary {
  background: transparent !important;
  border: 2px solid #f4ead8 !important;
  color: #f4ead8 !important;
}
.banner .banner__buttons .button--secondary:hover {
  background: #f4ead8 !important;
  color: #161412 !important;
}
@media (max-width: 600px) {
  .banner .banner__buttons {
    flex-direction: column !important;
  }
  .banner .banner__buttons .button {
    min-width: 260px !important;
  }
}

/* ---------- FIX 4: Newsletter input visible + form layout ---------- */
.newsletter,
.email-signup,
section[data-section-type*="newsletter"],
section[data-section-type*="email"] {
  padding: 110px 24px !important;
  background: #16140f !important;
  text-align: center !important;
}
.newsletter__wrapper,
.newsletter-form,
.email-signup__form {
  max-width: 560px !important;
  width: 100% !important;
  margin: 30px auto 0 !important;
}
.newsletter-form__field-wrapper {
  display: flex !important;
  flex-direction: row !important;
  gap: 0 !important;
  width: 100% !important;
}
.newsletter-form__field-wrapper .field {
  flex: 1 !important;
}
.newsletter-form__field-wrapper input,
.newsletter input[type="email"],
.field__input[type="email"] {
  background: rgba(255,255,255,0.06) !important;
  border: 2px solid #f4ead8 !important;
  color: #f4ead8 !important;
  padding: 18px 22px !important;
  font-family: 'Oswald', sans-serif !important;
  font-size: 15px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  width: 100% !important;
  border-radius: 0 !important;
}
.newsletter-form__field-wrapper input::placeholder,
.newsletter input::placeholder {
  color: rgba(244,234,216,0.6) !important;
  font-family: 'Oswald', sans-serif !important;
  letter-spacing: 0.1em !important;
}
.newsletter-form__field-wrapper input:focus,
.newsletter input[type="email"]:focus {
  outline: none !important;
  border-color: #c84a1c !important;
  background: rgba(255,255,255,0.1) !important;
}
.newsletter-form__button,
.newsletter button[type="submit"] {
  background: #c84a1c !important;
  border: 2px solid #c84a1c !important;
  color: #ffffff !important;
  padding: 18px 32px !important;
  font-family: 'Anton', sans-serif !important;
  font-size: 14px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  border-radius: 0 !important;
}
.newsletter-form__button:hover {
  background: #8c2a0e !important;
  border-color: #8c2a0e !important;
}
/* Hide the floating-label garbage Dawn shows */
.newsletter .field__label,
.newsletter-form__field-wrapper .field__label {
  display: none !important;
}
.newsletter__subheading {
  font-family: 'Oswald', sans-serif !important;
  font-size: 14px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #e9dcc1 !important;
  opacity: 0.85 !important;
  margin-bottom: 12px !important;
}

/* ---------- FIX 5: Section spacing breathe room ---------- */
.shopify-section {
  padding-block: 0 !important;
}
.multicolumn {
  padding: 80px 24px !important;
}
.featured-collection,
.collection {
  padding: 80px 24px 100px !important;
}
.rich-text {
  padding: 90px 24px !important;
}
.image-with-text {
  padding: 100px 24px !important;
}
/* Manifesto strip — keep tighter */
.shopify-section:has(.multicolumn-card:not(:has(.multicolumn-card__image-wrapper))) .multicolumn {
  padding: 50px 24px !important;
}

/* ---------- FIX 6: Story image framing + 50/50 grid ---------- */
.image-with-text__grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 60px !important;
  align-items: center !important;
  max-width: 1300px !important;
  margin: 0 auto !important;
}
@media (max-width: 768px) {
  .image-with-text__grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
}
.image-with-text__media,
.image-with-text__media-container {
  position: relative !important;
  background: transparent !important;
}
.image-with-text__media img,
.image-with-text__media-item img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border: 12px solid #f4ead8 !important;
  box-shadow: 0 30px 60px rgba(20,15,10,0.25), 0 0 0 1px #d9c79e !important;
  background: transparent !important;
}
.image-with-text__content {
  padding: 20px !important;
}

/* =================================================================
   PATCH 11 — Final visual flourishes
   ================================================================= */

/* Add a subtle bottom border under manifesto strip */
.shopify-section:has(.multicolumn-card:not(:has(.multicolumn-card__image-wrapper))) {
  border-top: 1px solid #2a2622 !important;
  border-bottom: 1px solid #2a2622 !important;
  background: #16140f !important;
}

/* Eyebrow above section titles — already styled via Special Elite,
   make sure they show up where used */
.caption-with-letter-spacing {
  font-size: 13px !important;
  margin-bottom: 16px !important;
  display: block !important;
}

/* Hero eyebrow if present */
.banner .caption,
.banner__subtitle {
  font-family: 'Special Elite', monospace !important;
  font-size: 13px !important;
  letter-spacing: 0.4em !important;
  text-transform: uppercase !important;
  color: #c8a35a !important;
  margin-bottom: 24px !important;
}

/* Testimonial section — tighten max-width and add ember accent option */
.rich-text__blocks {
  max-width: 1000px !important;
  margin: 0 auto !important;
  text-align: center !important;
}
.rich-text .rich-text__heading {
  font-style: normal !important;
}

/* Footer cleanup — get the Anton headings + better spacing */
footer h2,
footer .footer-block__heading {
  font-family: 'Anton', sans-serif !important;
  font-size: 16px !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
  color: #c84a1c !important;
  margin-bottom: 18px !important;
}
footer a,
footer .footer-block__details-content a {
  font-family: 'Oswald', sans-serif !important;
  font-size: 14px !important;
  letter-spacing: 0.05em !important;
  opacity: 0.85 !important;
}
footer a:hover {
  color: #c84a1c !important;
  opacity: 1 !important;
}
.footer {
  background: #050504 !important;
  border-top: 1px solid #2a2622 !important;
}

/* =================================================================
   PATCH 12 — FIX LAYOUT REGRESSIONS FROM PATCH 10
   ================================================================= */

/* ---------- FIX A: Story heading sizing — keep readable in column ---------- */
.image-with-text__heading,
.image-with-text h2 {
  font-size: clamp(32px, 4vw, 56px) !important;
  line-height: 1.0 !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  hyphens: none !important;
}

/* ---------- FIX B: Story grid — force 50/50 with min widths ---------- */
.image-with-text {
  padding: 80px 24px !important;
}
.image-with-text__grid,
.image-with-text .grid,
.image-with-text > .page-width > .grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 60px !important;
  align-items: center !important;
  max-width: 1300px !important;
  margin: 0 auto !important;
  width: 100% !important;
}
.image-with-text__grid > *,
.image-with-text .grid > * {
  min-width: 0 !important;
  width: 100% !important;
}
.image-with-text__media-item,
.image-with-text__media {
  width: 100% !important;
  height: auto !important;
}
.image-with-text__text-item,
.image-with-text__content {
  padding: 0 !important;
  max-width: 100% !important;
}
@media (max-width: 768px) {
  .image-with-text__grid,
  .image-with-text .grid {
    grid-template-columns: 1fr !important;
  }
  .image-with-text__heading {
    font-size: clamp(32px, 8vw, 48px) !important;
  }
}

/* ---------- FIX C: Newsletter — break out of the small box ---------- */
/* Dawn wraps newsletter in a constrained container. Bust it out. */
.shopify-section:has(.newsletter) .page-width,
.shopify-section:has(.newsletter) {
  max-width: 100% !important;
  width: 100% !important;
  background: #16140f !important;
}
.newsletter {
  max-width: 100% !important;
  width: 100% !important;
  padding: 110px 24px !important;
  background: #16140f !important;
}
.newsletter > .page-width,
.newsletter .page-width {
  max-width: 700px !important;
  margin: 0 auto !important;
  text-align: center !important;
}
.newsletter__wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  max-width: 700px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
}
.newsletter-form,
.newsletter form {
  width: 100% !important;
  max-width: 560px !important;
  margin: 24px auto 0 !important;
}
.newsletter-form__field-wrapper {
  width: 100% !important;
  display: flex !important;
  flex-direction: row !important;
  gap: 0 !important;
  background: transparent !important;
}
.newsletter-form__field-wrapper .field {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.newsletter-form__field-wrapper input[type="email"],
.newsletter input[type="email"] {
  width: 100% !important;
  min-width: 0 !important;
}

/* ---------- FIX D: Hero buttons FORCE side-by-side ---------- */
/* Dawn uses .banner__buttons inside .banner__box. Higher specificity. */
.banner .banner__box .banner__buttons,
.banner__content .banner__buttons,
.banner__box > .banner__buttons,
.image-banner .banner__buttons,
[class*="banner"] .banner__buttons {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 16px !important;
  margin-top: 32px !important;
  width: 100% !important;
  max-width: 700px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.banner .banner__buttons .button,
.banner__buttons > .button,
.banner__buttons > a {
  flex: 0 0 auto !important;
  min-width: 240px !important;
  padding: 18px 36px !important;
  font-size: 15px !important;
  letter-spacing: 0.2em !important;
}
@media (max-width: 600px) {
  .banner .banner__box .banner__buttons,
  .banner__content .banner__buttons {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .banner .banner__buttons .button {
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 auto !important;
  }
}

/* ---------- FIX E: Story image must be visible (not collapsed) ---------- */
.image-with-text__media-item--top,
.image-with-text__media--large,
.image-with-text__media--medium,
.image-with-text__media--small {
  height: auto !important;
  min-height: 400px !important;
  background: transparent !important;
}
.image-with-text__media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* ---------- FIX F: Story text content sizing ---------- */
.image-with-text__text-item,
.image-with-text__content {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
.image-with-text .rte,
.image-with-text__text {
  font-size: 17px !important;
  line-height: 1.7 !important;
  margin-bottom: 20px !important;
}
.image-with-text .rte p {
  margin-bottom: 16px !important;
}

/* =================================================================
   PATCH 13 — FINAL POLISH FIXES
   ================================================================= */

/* ---------- FIX A: Hero primary button — force solid ember ---------- */
.banner .button--primary,
.banner__buttons .button--primary,
.banner__box .button--primary,
[class*="banner"] .button--primary {
  background: #c84a1c !important;
  background-color: #c84a1c !important;
  border: 2px solid #c84a1c !important;
  color: #ffffff !important;
}
.banner .button--primary:hover {
  background: transparent !important;
  color: #c84a1c !important;
}
/* If Dawn uses no primary modifier, target the first button */
.banner__buttons .button:first-child {
  background: #c84a1c !important;
  background-color: #c84a1c !important;
  border-color: #c84a1c !important;
  color: #ffffff !important;
}
.banner__buttons .button:first-child:hover {
  background: transparent !important;
  color: #c84a1c !important;
}
/* Ghost secondary */
.banner__buttons .button:nth-child(2),
.banner .button--secondary {
  background: transparent !important;
  border: 2px solid #f4ead8 !important;
  color: #f4ead8 !important;
}
.banner__buttons .button:nth-child(2):hover {
  background: #f4ead8 !important;
  color: #161412 !important;
}

/* ---------- FIX B: Newsletter input — force visible full width ---------- */
/* The issue: Dawn wraps input in .field which has its own constraints. */
.newsletter-form .field,
.newsletter .field {
  flex: 1 1 100% !important;
  width: 100% !important;
  min-width: 280px !important;
  max-width: none !important;
  position: relative !important;
}
.newsletter-form input[type="email"],
.newsletter input[type="email"],
.field__input[type="email"],
input.field__input {
  width: 100% !important;
  min-width: 280px !important;
  display: block !important;
  padding: 18px 22px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 2px solid #f4ead8 !important;
  color: #f4ead8 !important;
  font-size: 15px !important;
  height: auto !important;
  box-sizing: border-box !important;
}
.newsletter-form__field-wrapper {
  display: flex !important;
  flex-direction: row !important;
  width: 100% !important;
  max-width: 540px !important;
  margin: 0 auto !important;
  gap: 0 !important;
}
.newsletter-form__button,
.newsletter-form button[type="submit"] {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 64px !important;
  height: auto !important;
  padding: 18px 24px !important;
  background: #c84a1c !important;
  border: 2px solid #c84a1c !important;
  color: #ffffff !important;
}

/* ---------- FIX D: Footer headings bigger ---------- */
.footer-block__heading,
.footer h2,
footer .footer-block__heading {
  font-family: 'Anton', sans-serif !important;
  font-size: 16px !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
  color: #c84a1c !important;
  margin-bottom: 20px !important;
}
.footer-block__details-content {
  font-family: 'Oswald', sans-serif !important;
}
.footer-block__details-content li a,
.footer-block__details-content a,
.footer p,
.footer__content-bottom-wrapper * {
  font-family: 'Oswald', sans-serif !important;
  letter-spacing: 0.05em !important;
  font-size: 14px !important;
}
.footer__content-top {
  padding: 60px 32px 40px !important;
}
.footer__content-bottom {
  padding: 24px 32px !important;
  border-top: 1px solid #1a1815 !important;
}

/* =================================================================
   PATCH 14 — MINIMAL fix for Cook With It heading cutoff
   (Replaced aggressive Patch 13 Fix C which broke layouts)
   ================================================================= */

/* Just make sure section content respects horizontal padding */
.multicolumn .page-width {
  padding-left: 32px !important;
  padding-right: 32px !important;
}

/* Center the Cook With It heading like the mockup */
.multicolumn .title-wrapper-with-link {
  text-align: center !important;
  margin-bottom: 50px !important;
}
.multicolumn .title-wrapper-with-link h2 {
  text-align: center !important;
}

/* =================================================================
   PATCH 15 — Manifesto overflow + section padding
   ================================================================= */

/* Add horizontal padding to all sections that lack it */
.multicolumn {
  padding-left: 32px !important;
  padding-right: 32px !important;
}

/* Ensure manifesto items have some inner padding too so text doesn't kiss the edge */
.multicolumn-card:not(:has(.multicolumn-card__image-wrapper)) {
  padding: 20px 12px !important;
}
.multicolumn-card:not(:has(.multicolumn-card__image-wrapper)) h3 {
  word-break: keep-all !important;
  hyphens: none !important;
}

/* Center Cook With It heading — higher specificity */
.shopify-section .multicolumn .title-wrapper-with-link,
.shopify-section .multicolumn .title-wrapper {
  display: block !important;
  text-align: center !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.shopify-section .multicolumn .title-wrapper-with-link h2,
.shopify-section .multicolumn .title-wrapper h2,
.shopify-section .multicolumn h2.title {
  text-align: center !important;
  width: 100% !important;
}

/* But keep manifesto multicolumn heading area clean (no title there usually) */

/* =================================================================
   PATCH 16 — Newsletter wrapper width (true root cause)
   The input is correctly 100% wide; the parent .newsletter-form__field-wrapper
   is what's constrained. Force the entire chain to be wide.
   ================================================================= */

/* The Email signup section's content container */
section[id*="newsletter"] .newsletter__wrapper,
.newsletter__wrapper,
.newsletter-form,
.newsletter-form__field-wrapper {
  width: 100% !important;
  max-width: 540px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Even more upstream — the page-width container in newsletter section */
section[id*="newsletter"] .page-width,
.shopify-section:has(.newsletter) .page-width {
  max-width: 700px !important;
  width: 100% !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  margin: 0 auto !important;
}

/* And the form's field-wrapper specifically */
.newsletter-form__field-wrapper {
  display: flex !important;
  flex-direction: row !important;
  gap: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
}
.newsletter-form__field-wrapper > * {
  min-width: 0 !important;
}
.newsletter-form__field-wrapper .field {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
}

/* =================================================================
   PATCH 17 — Hero "SHOP THE BLENDS" override even though it's
   button--secondary in markup (in case Customizer fix is missed)
   ================================================================= */

/* Force the first button in hero to look like primary regardless of class */
.banner__buttons a:first-child,
.banner__buttons .button:first-child,
.banner__buttons .button.button--secondary:first-child,
.banner__buttons a.button--secondary:first-child {
  background: #c84a1c !important;
  background-color: #c84a1c !important;
  border: 2px solid #c84a1c !important;
  color: #ffffff !important;
}
.banner__buttons a:first-child:hover,
.banner__buttons .button:first-child:hover {
  background: transparent !important;
  background-color: transparent !important;
  color: #c84a1c !important;
}

/* =================================================================
   PATCH 18 — PDP (PRODUCT DETAIL PAGE) STYLING
   ================================================================= */

/* ---------- Section padding + page background ---------- */
.shopify-section--main-product,
.product,
.product-section {
  background: #0e0d0c !important;
  padding: 60px 24px 80px !important;
  color: #f4ead8 !important;
}
.product .page-width,
.product__container {
  max-width: 1400px !important;
  margin: 0 auto !important;
}

/* ---------- Product info column ---------- */
.product__info-wrapper,
.product__info-container {
  padding: 20px 0 0 20px !important;
}
@media (max-width: 900px) {
  .product__info-wrapper,
  .product__info-container {
    padding: 30px 0 0 0 !important;
  }
}

/* ---------- Vendor / eyebrow ---------- */
.product__text.caption-with-letter-spacing,
.product .caption-with-letter-spacing,
.product__vendor {
  font-family: 'Special Elite', monospace !important;
  font-size: 12px !important;
  letter-spacing: 0.3em !important;
  color: #c8a35a !important;
  text-transform: uppercase !important;
  margin-bottom: 18px !important;
  display: block !important;
}

/* ---------- Product title — fix wrapping ---------- */
.product__title,
.product__title h1,
h1.product__title {
  font-family: 'Anton', sans-serif !important;
  font-size: clamp(48px, 6vw, 88px) !important;
  line-height: 0.92 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  color: #f4ead8 !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  margin-bottom: 18px !important;
}

/* ---------- Price block ---------- */
.product__price,
.price,
.price__container {
  margin-bottom: 24px !important;
}
.price__regular .price-item--regular,
.product .price-item {
  font-family: 'Anton', sans-serif !important;
  font-size: 32px !important;
  color: #f4ead8 !important;
  letter-spacing: 0.02em !important;
}
.product .unit-price,
.product .price__unit {
  font-family: 'Special Elite', monospace !important;
  font-size: 12px !important;
  color: #c8a35a !important;
  letter-spacing: 0.1em !important;
  margin-top: 4px !important;
}
/* Shop Pay / installments hint */
.shopify-payment-terms,
.product__tax,
.shopify-installments {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  color: #c8a35a !important;
  opacity: 0.8 !important;
}
.shopify-payment-terms a {
  color: #c84a1c !important;
}

/* ---------- Description body ---------- */
.product__description,
.product__description p,
.product .rte,
.product .rte p {
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: #e9dcc1 !important;
  margin-bottom: 16px !important;
}

/* ---------- Quantity + Add to Cart ---------- */
.product-form,
.product-form__buttons {
  margin: 24px 0 !important;
}
.quantity__input,
.product-form__input--quantity input {
  background: transparent !important;
  border: 2px solid #2a2622 !important;
  color: #f4ead8 !important;
  font-family: 'Anton', sans-serif !important;
  font-size: 18px !important;
  letter-spacing: 0.04em !important;
}
.quantity__button,
.product-form__input--quantity button {
  color: #f4ead8 !important;
  background: transparent !important;
  border: 2px solid #2a2622 !important;
}
.quantity__button:hover {
  background: #2a2622 !important;
}
.product-form__submit,
button[name="add"] {
  background: #c84a1c !important;
  background-color: #c84a1c !important;
  border: 2px solid #c84a1c !important;
  color: #ffffff !important;
  font-family: 'Anton', sans-serif !important;
  font-size: 16px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  padding: 18px 36px !important;
  border-radius: 0 !important;
  width: 100% !important;
}
.product-form__submit:hover {
  background: transparent !important;
  color: #c84a1c !important;
}
/* Dynamic checkout buttons (Shop Pay etc.) */
.shopify-payment-button__button {
  border-radius: 0 !important;
  font-family: 'Anton', sans-serif !important;
  letter-spacing: 0.18em !important;
}

/* ---------- Accordion (Materials/Shipping/etc → Ingredients/Built For) ---------- */
.product__accordion,
product-info details,
.product details {
  border-top: 1px solid #2a2622 !important;
  margin-top: 12px !important;
}
.product__accordion summary,
.product details summary,
.product .accordion__summary {
  font-family: 'Anton', sans-serif !important;
  font-size: 15px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: #c84a1c !important;
  padding: 18px 0 !important;
  border-bottom: 1px solid #2a2622 !important;
  cursor: pointer !important;
  list-style: none !important;
}
.product__accordion summary:hover,
.product details summary:hover {
  color: #f4ead8 !important;
}
.product details[open] summary {
  color: #f4ead8 !important;
}
.product__accordion-content,
.product details > div,
.product details .accordion__content {
  padding: 18px 0 24px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  color: #e9dcc1 !important;
}

/* Accordion arrow */
.product details summary::-webkit-details-marker { display: none !important; }
.product details summary::after {
  content: '+' !important;
  float: right !important;
  font-family: 'Anton', sans-serif !important;
  font-size: 24px !important;
  color: #c84a1c !important;
  transition: transform 0.2s !important;
}
.product details[open] summary::after {
  content: '−' !important;
}

/* ---------- Share / social icons (the "Share" link) ---------- */
.share-button__button,
.product__share,
.product .share-button details summary {
  font-family: 'Special Elite', monospace !important;
  font-size: 12px !important;
  letter-spacing: 0.25em !important;
  color: #c8a35a !important;
  text-transform: uppercase !important;
}

/* ---------- Gallery (left side) ---------- */
.product__media-wrapper,
.product__media-gallery {
  background: transparent !important;
}
.product__media,
.product__media-item {
  background: transparent !important;
}
.product__media img {
  background: transparent !important;
}
/* Thumbnails */
.product__media-list .thumbnail-list__item,
.thumbnail-list__item {
  border: 1px solid #2a2622 !important;
  background: #16140f !important;
}
.product__media-list .thumbnail-list__item--active,
.thumbnail-list__item.is-active {
  border-color: #c84a1c !important;
}

/* ---------- "Ember tag" overlay on main product image ---------- */
/* Add a positioned tag using pseudo-element on .product__media-wrapper.
   This is generic — actual text is added per product via CSS variable
   that the customizer/product template would set. For now we leave the
   structure ready and skip the auto-overlay (would need product-specific
   labels). */

/* ---------- Mobile adjustments ---------- */
@media (max-width: 900px) {
  .product__title,
  h1.product__title {
    font-size: clamp(40px, 9vw, 60px) !important;
  }
  .product__info-wrapper {
    padding-left: 0 !important;
  }
}

/* =================================================================
   PATCH 19 — Manifesto overflow safety net
   ================================================================= */

/* Ensure manifesto section has a max-width container */
.shopify-section:has(.multicolumn-card:not(:has(.multicolumn-card__image-wrapper))) .multicolumn,
.shopify-section:has(.multicolumn-card:not(:has(.multicolumn-card__image-wrapper))) .page-width {
  max-width: 1300px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
}

.shopify-section:has(.multicolumn-card:not(:has(.multicolumn-card__image-wrapper))) .multicolumn-list {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* =================================================================
   PATCH 20 — PDP nits + Collection page styling
   ================================================================= */

/* ---------- PDP title — bump down slightly to prevent wrap ---------- */
.product__title,
.product__title h1,
h1.product__title {
  font-size: clamp(44px, 5.2vw, 78px) !important;
  letter-spacing: 0.01em !important;
}


/* ---------- Quantity selector — fix the weird boxes ---------- */
.quantity,
.product-form__input--quantity,
.quantity-popover-container {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  border: 1px solid #2a2622 !important;
  background: #16140f !important;
  width: fit-content !important;
  margin-bottom: 16px !important;
}
.quantity__input,
.product-form__input--quantity input,
input.quantity__input {
  background: transparent !important;
  border: none !important;
  color: #f4ead8 !important;
  font-family: 'Anton', sans-serif !important;
  font-size: 18px !important;
  text-align: center !important;
  width: 60px !important;
  padding: 14px 8px !important;
  -moz-appearance: textfield !important;
  appearance: textfield !important;
}
.quantity__input::-webkit-inner-spin-button,
.quantity__input::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}
.quantity__button {
  background: transparent !important;
  border: none !important;
  color: #f4ead8 !important;
  width: 44px !important;
  height: 44px !important;
  cursor: pointer !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.quantity__button:hover {
  background: #2a2622 !important;
  color: #c84a1c !important;
}
.quantity__button svg,
.quantity__button .icon {
  width: 16px !important;
  height: 16px !important;
}
/* Variant pills if they exist — hide if it's just a single variant */
.product-form__input--pill .product-form__input-label,
.product-form__input--swatch {
  display: none !important;
}

/* Quantity label above */
.product-form__input--quantity .quantity__label,
.product-form .form__label {
  font-family: 'Special Elite', monospace !important;
  font-size: 12px !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
  color: #c8a35a !important;
  margin-bottom: 8px !important;
  display: block !important;
}

/* =================================================================
   PATCH 21 — COLLECTION PAGE (Catalog) styling
   ================================================================= */

.template-collection,
.template-list-collections,
.collection,
main#MainContent {
  background: #0e0d0c !important;
}

/* Collection page title — make it on-brand */
.collection-hero,
.collection__title {
  background: #0e0d0c !important;
  padding: 80px 32px 40px !important;
  text-align: center !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
}
.collection-hero__title,
.collection__title h1,
.collection-hero h1,
h1.collection__title {
  font-family: 'Anton', sans-serif !important;
  font-size: clamp(48px, 7vw, 96px) !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  color: #f4ead8 !important;
  text-align: center !important;
  margin-bottom: 16px !important;
}
.collection-hero__description {
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  color: #e9dcc1 !important;
  max-width: 600px !important;
  margin: 0 auto !important;
}

/* Filter / sort bar */
.facets,
.facets-container,
.collection__filter,
.collection-filters-form {
  background: #16140f !important;
  border: 1px solid #2a2622 !important;
  padding: 16px 24px !important;
}
.facets__heading,
.facets__summary,
.facets-toggle,
.facet-filters__label,
.collection__sort-by {
  font-family: 'Special Elite', monospace !important;
  font-size: 12px !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
  color: #c8a35a !important;
}
.facets__form select,
.collection__sort-by select,
select.facet-filters__sort {
  background: #2a2622 !important;
  border: 1px solid #2a2622 !important;
  color: #f4ead8 !important;
  font-family: 'Oswald', sans-serif !important;
  letter-spacing: 0.1em !important;
  padding: 8px 16px !important;
}
.product-count,
.product-count__text {
  font-family: 'Special Elite', monospace !important;
  font-size: 12px !important;
  letter-spacing: 0.2em !important;
  color: #c8a35a !important;
  text-transform: uppercase !important;
}

/* Collection product grid — same dark cards as homepage */
.collection .grid,
.collection-grid,
.collection__products,
.product-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 28px !important;
  max-width: 1400px !important;
  margin: 40px auto 80px !important;
  padding: 0 32px !important;
}
@media (max-width: 900px) {
  .collection .grid,
  .product-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 600px) {
  .collection .grid,
  .product-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Each product card on collection page */
.collection .card-wrapper,
.collection .card,
.template-collection .card-wrapper {
  background: #2a2622 !important;
  border: 1px solid #2a2622 !important;
  overflow: hidden !important;
  transition: transform 0.3s, border-color 0.3s !important;
}
.collection .card-wrapper:hover,
.collection .card:hover {
  transform: translateY(-6px) !important;
  border-color: #c84a1c !important;
}
.collection .card__media,
.collection .media {
  aspect-ratio: 1/1 !important;
  background: #1a1815 !important;
  position: relative !important;
  overflow: hidden !important;
}
.collection .card__media::after,
.collection .media::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, transparent 50%, rgba(14,13,12,0.5) 100%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
.collection .card__content,
.collection .card__information {
  padding: 22px 24px 26px !important;
  background: #2a2622 !important;
}
.collection .card__heading,
.collection .card__heading a {
  font-family: 'Anton', sans-serif !important;
  font-size: 26px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: #f4ead8 !important;
  margin-bottom: 8px !important;
}
.collection .price {
  font-family: 'Anton', sans-serif !important;
  font-size: 20px !important;
  color: #f4ead8 !important;
  margin-top: 8px !important;
  padding-top: 12px !important;
  border-top: 1px solid #1a1815 !important;
}

/* =================================================================
   PATCH 22 — Fix PDP layout regression from Patch 20
   ================================================================= */

/* Ensure product page uses Dawn's native grid layout — don't override widths */
.product.grid,
.product .grid,
product-info.grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 40px !important;
}
@media (max-width: 900px) {
  .product.grid,
  .product .grid,
  product-info.grid {
    grid-template-columns: 1fr !important;
  }
}

/* Make sure info column doesn't get squished */
.product__info-container,
.product__info-wrapper {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Restore accordion to readable state — undo width crush */
.product details,
.product .accordion {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
}
.product details summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  flex: 1 !important;
}
.product details summary > * {
  display: inline-block !important;
}
.product details > div,
.product details .accordion__content {
  width: 100% !important;
  display: block !important;
}

/* Title slightly smaller again for safety */
.product__title,
h1.product__title {
  font-size: clamp(36px, 4.5vw, 64px) !important;
  letter-spacing: 0.02em !important;
}

/* =================================================================
   PATCH 23 — Force PDP main image to fill its column
   ================================================================= */

/* Kill any height constraints on the main media + force it wide */
.product__media-wrapper,
.product__media-gallery,
.product-media-container {
  width: 100% !important;
  max-width: 100% !important;
  max-height: none !important;
}

.product__media-list {
  width: 100% !important;
}

.product__media-item--single,
.product__media-item:not(.thumbnail-list__item),
.product__media,
slider-component .product__media-item {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 500px !important;
  max-height: none !important;
}

.product__media img,
.product__media .media img,
.product-media-container img,
.product__modal-opener img {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* The slider/gallery wrapper that Dawn uses */
.product__media-list.contains-media,
media-gallery,
.product-media-modal,
.product__media-gallery {
  display: block !important;
  width: 100% !important;
}

/* Thumbnails — keep them visible but small under the main image */
.thumbnail-list,
.product__media-list--thumbnails {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 12px !important;
  padding: 0 !important;
}
.thumbnail-list__item,
.product__media-list--thumbnails li {
  flex: 0 0 80px !important;
  max-width: 80px !important;
  aspect-ratio: 1/1 !important;
  margin: 0 !important;
}

/* If Dawn uses an inline aspect-ratio style on the gallery, override */
[style*="aspect-ratio"]:not(.thumbnail-list__item) {
  /* leave per-image aspect-ratio alone */
}

/* On thumbnails-left layout, kill the position:left constraints */
@media (min-width: 750px) {
  .product--thumbnail .product__media-wrapper,
  .product--thumbnail .product__media-gallery {
    flex-direction: column !important;
    width: 100% !important;
  }
}

/* =================================================================
   PATCH 24 — Let story panel image grow with its container
   ================================================================= */

/* Image-with-text media — kill min/max-height caps so image fills column naturally */
.image-with-text__media,
.image-with-text__media-item,
.image-with-text__media-container {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  width: 100% !important;
}

.image-with-text__media img,
.image-with-text__media-item img {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: cover !important;
  display: block !important;
  aspect-ratio: 1/1 !important;
}

/* Allow story grid to stretch image to match text column height */
.image-with-text__grid {
  align-items: stretch !important;
}

/* Scroll-margin so any anchor scrolls past the sticky header */
.image-with-text,
[id*="image_with_text"] {
  scroll-margin-top: 80px !important;
}

/* =================================================================
   PATCH 25 — Image-with-text sections respect color scheme
   Override the blanket paper-bg rules from Patches 2/3/5/24 so
   that ONLY image-with-text sections explicitly using Scheme 1 
   (paper) render as paper. Sections set to Scheme 3/4/etc render
   dark per the Customizer.
   ================================================================= */

/* Reset: kill the blanket paper-bg rules by re-setting them based on scheme */

/* When the section uses dark schemes, use dark backgrounds + light text */
.image-with-text:has(.color-scheme-2),
.image-with-text:has(.color-scheme-3),
.image-with-text:has(.color-scheme-4),
.image-with-text:has(.color-scheme-5),
.shopify-section:has(.image-with-text):has(.color-scheme-2),
.shopify-section:has(.image-with-text):has(.color-scheme-3),
.shopify-section:has(.image-with-text):has(.color-scheme-4),
.shopify-section:has(.image-with-text):has(.color-scheme-5) {
  background: #0e0d0c !important;
  background-color: #0e0d0c !important;
}

.image-with-text:has(.color-scheme-2) .image-with-text__content,
.image-with-text:has(.color-scheme-3) .image-with-text__content,
.image-with-text:has(.color-scheme-4) .image-with-text__content,
.image-with-text:has(.color-scheme-5) .image-with-text__content,
.image-with-text:has(.color-scheme-2) .image-with-text__text-item,
.image-with-text:has(.color-scheme-3) .image-with-text__text-item,
.image-with-text:has(.color-scheme-4) .image-with-text__text-item,
.image-with-text:has(.color-scheme-5) .image-with-text__text-item {
  background: transparent !important;
  background-color: transparent !important;
}

/* Dark scheme — light text on dark bg */
.image-with-text:has(.color-scheme-2) .image-with-text__heading,
.image-with-text:has(.color-scheme-3) .image-with-text__heading,
.image-with-text:has(.color-scheme-4) .image-with-text__heading,
.image-with-text:has(.color-scheme-5) .image-with-text__heading,
.image-with-text:has(.color-scheme-2) h2,
.image-with-text:has(.color-scheme-3) h2,
.image-with-text:has(.color-scheme-4) h2,
.image-with-text:has(.color-scheme-5) h2 {
  color: #f4ead8 !important;
}

.image-with-text:has(.color-scheme-2) p,
.image-with-text:has(.color-scheme-3) p,
.image-with-text:has(.color-scheme-4) p,
.image-with-text:has(.color-scheme-5) p,
.image-with-text:has(.color-scheme-2) .rte,
.image-with-text:has(.color-scheme-3) .rte,
.image-with-text:has(.color-scheme-4) .rte,
.image-with-text:has(.color-scheme-5) .rte,
.image-with-text:has(.color-scheme-2) .image-with-text__text,
.image-with-text:has(.color-scheme-3) .image-with-text__text,
.image-with-text:has(.color-scheme-4) .image-with-text__text,
.image-with-text:has(.color-scheme-5) .image-with-text__text {
  color: #e9dcc1 !important;
}

/* Dark scheme — kill the cream image frame border */
.image-with-text:has(.color-scheme-2) .image-with-text__media img,
.image-with-text:has(.color-scheme-3) .image-with-text__media img,
.image-with-text:has(.color-scheme-4) .image-with-text__media img,
.image-with-text:has(.color-scheme-5) .image-with-text__media img {
  border: 1px solid #2a2622 !important;
  box-shadow: 0 30px 60px rgba(0,0,0,0.6) !important;
}

/* Hide empty/placeholder button blocks anywhere */
.image-with-text .button:empty,
.image-with-text a.button:empty,
.image-with-text a[href=""],
.image-with-text a.button[href="#"]:not([href*="/"]):not([href*="."]) {
  display: none !important;
}

/* =================================================================
   PATCH 26b — Featured collection: square images, no empty space
   Safer than Patch 26. Set both container AND image to square,
   so they match exactly with no orphan space.
   ================================================================= */

.featured-collection .card__media,
.featured-collection .media,
.collection .card__media,
.collection .media {
  aspect-ratio: 1 / 1 !important;
  max-height: 500px !important;
  height: auto !important;
  overflow: hidden !important;
  background: #1a1815 !important;
}

.featured-collection .card__media img,
.featured-collection .media img,
.collection .card__media img,
.collection .media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* =================================================================
   PATCH 27 — Featured collection image FILLS card slot
   The image was rendering at its natural source size, not filling
   the card. Force it to occupy 100% of both axes inside the .card__media.
   ================================================================= */

/* Bulldoze any width/height attribute on the IMG inside product cards */
.card__media img,
.card__inner .card__media img,
.card-wrapper .card__media img,
.featured-collection .card__media img,
.featured-collection .card img,
.collection .card__media img,
.collection .card img,
.product-card-wrapper .card__media img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
}

/* The .card__media must be position: relative for absolute children to work */
.card__media,
.card .media,
.featured-collection .card__media,
.collection .card__media {
  position: relative !important;
  overflow: hidden !important;
  display: block !important;
  width: 100% !important;
}

/* Also override the inline padding-top: trick Dawn uses for aspect ratio */
.media,
.media--square,
.media--portrait,
.media--landscape,
.media--cropped {
  padding-bottom: 0 !important;
  aspect-ratio: 1/1 !important;
  height: auto !important;
}

/* And the inner wrapper that may hold a placeholder */
.media > * {
  position: absolute !important;
  inset: 0 !important;
}

/* Lastly — the wrapper div around image. Force it to fill */
.product-card-wrapper .card__inner > .card__media {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1/1 !important;
}

/* =================================================================
   PATCH 28 — Kill .card--extend-height stretching
   Dawn's card--extend-height makes the card grow to fill the
   parent flex/grid container. Result: image at top, void below.
   ================================================================= */

.featured-collection .card--extend-height,
.collection .card--extend-height,
.card-wrapper .card--extend-height,
.product-card-wrapper .card--extend-height {
  height: auto !important;
  flex-grow: 0 !important;
}

/* Grid items shouldn't stretch either */
.featured-collection .grid__item,
.collection .grid__item {
  align-self: start !important;
  height: auto !important;
}

/* Container shouldn't force its children to equal height */
.featured-collection .grid,
.featured-collection .product-grid,
.collection .grid,
.collection .product-grid {
  align-items: start !important;
  grid-auto-rows: min-content !important;
}

/* Card wrapper should be content-height only */
.featured-collection .card-wrapper,
.featured-collection .product-card-wrapper,
.collection .card-wrapper,
.collection .product-card-wrapper {
  height: auto !important;
  align-self: start !important;
}

/* The .card itself */
.featured-collection .card,
.collection .card {
  height: auto !important;
  flex-grow: 0 !important;
}

/* Card content area — only as tall as it needs */
.featured-collection .card__content,
.collection .card__content {
  height: auto !important;
  flex-grow: 0 !important;
  padding: 22px 24px 26px !important;
}

/* =================================================================
   PATCH 29 — SHRINK CARD MEDIA TO IMAGE NATURAL SIZE
   Root cause of black void: Patches 26b/27 force .card__media to
   aspect-ratio 1/1 (~500px tall slot), but Dawn's img wrapper
   structure (.media > img) prevents the absolute-positioned fill
   from winning. Image renders at natural size pinned to top,
   leaving black space below.
   
   Fix: drop aspect-ratio + min/max heights. Let .card__media size
   to its image's natural height. Image renders at intrinsic size,
   no void. Cards will be slightly different heights if products
   have different image aspect ratios — accepted tradeoff.
   ================================================================= */

/* OVERRIDE the aspect-ratio cage on Three Blends + collection cards */
.featured-collection .card__media,
.featured-collection .media,
.featured-collection .card .media,
.collection .card__media,
.collection .media,
.collection .card .media {
  aspect-ratio: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding-bottom: 0 !important;
  padding-top: 0 !important;
  background: transparent !important;
}

/* Image: natural intrinsic size, NOT absolute-positioned fill */
.featured-collection .card__media img,
.featured-collection .media img,
.featured-collection .card img,
.collection .card__media img,
.collection .media img,
.collection .card img {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
}

/* Belt + suspenders: kill any inline padding-top aspect-ratio hack
   that Dawn applies to .media wrappers on these surfaces */
.featured-collection [style*="padding-top"],
.featured-collection [style*="padding-bottom"],
.collection [style*="padding-top"],
.collection [style*="padding-bottom"] {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* And the .ratio utility class Dawn sometimes wraps images in */
.featured-collection .ratio,
.collection .ratio,
.featured-collection .card .ratio,
.collection .card .ratio {
  aspect-ratio: auto !important;
  padding-bottom: 0 !important;
  height: auto !important;
}

.featured-collection .ratio::before,
.collection .ratio::before,
.featured-collection .card .ratio::before,
.collection .card .ratio::before {
  display: none !important;
  content: none !important;
  padding-bottom: 0 !important;
}

/* Make sure inner wrapper around img doesn't lock height either */
.featured-collection .media > *,
.collection .media > *,
.featured-collection .card__media > *,
.collection .card__media > * {
  position: static !important;
  inset: auto !important;
  height: auto !important;
}

/* PDP escape hatch: leave PDP main image alone — these rules ONLY
   apply to featured-collection + collection surfaces (scoped above).
   Do NOT remove this comment — future patches must remain scoped. */

/* =================================================================
   PATCH 30 — TIGHTEN CARD CONTENT PADDING
   Cards have too much breathing room below the price. Trim top +
   bottom padding on .card__content. Leave horizontal padding alone
   so text doesn't crowd card edges.
   ================================================================= */

.featured-collection .card__content,
.collection .card__content {
  padding: 14px 24px 16px !important;
}

/* Also tighten the gap between title, divider, and price block */
.featured-collection .card__information,
.collection .card__information {
  padding: 0 !important;
  gap: 6px !important;
}

/* Price row margin compression */
.featured-collection .price,
.collection .price {
  margin-top: 4px !important;
  margin-bottom: 0 !important;
}

/* Title row margin compression */
.featured-collection .card__heading,
.collection .card__heading {
  margin: 0 !important;
}

/* =================================================================
   PATCH 31 — RESTORE HOVER-SWAP IMAGE
   Patch 29 forced all imgs inside .card__media to position: static,
   which broke Dawn's second image (the hover-swap). The second image
   needs to be absolute-positioned ON TOP of the first so it can
   fade in on hover.
   
   Fix: keep first img static (so card sizes to it). Force ONLY the
   second img to absolute, layered on top, hidden until hover.
   ================================================================= */

/* SECOND image inside card media — absolute, on top, hidden */
.featured-collection .card__media img + img,
.featured-collection .media img + img,
.featured-collection .media--hover-effect img:nth-child(2),
.collection .card__media img + img,
.collection .media img + img,
.collection .media--hover-effect img:nth-child(2) {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  opacity: 0 !important;
  transition: opacity 0.4s ease !important;
}

/* Hover state — fade second image in, fade first out */
.featured-collection .card-wrapper:hover .card__media img + img,
.featured-collection .card-wrapper:hover .media img + img,
.featured-collection .card-wrapper:hover .media--hover-effect img:nth-child(2),
.collection .card-wrapper:hover .card__media img + img,
.collection .card-wrapper:hover .media img + img,
.collection .card-wrapper:hover .media--hover-effect img:nth-child(2) {
  opacity: 1 !important;
}

/* Media wrapper needs relative positioning for absolute child to anchor */
.featured-collection .card__media,
.featured-collection .media,
.collection .card__media,
.collection .media {
  position: relative !important;
}

/* First img stays static — explicitly re-confirm so cascade is clear */
.featured-collection .card__media img:first-child,
.featured-collection .media img:first-child,
.collection .card__media img:first-child,
.collection .media img:first-child {
  position: static !important;
  width: 100% !important;
  height: auto !important;
}

/* =================================================================
   PATCH 32 — DEAD-CENTER HEADER LOGO
   Dawn's "Middle center" preset uses CSS grid but the menu column
   expands proportional to content, pushing the logo off-center.
   Force a true 3-column grid (1fr | auto | 1fr) so logo sits dead
   center regardless of menu width.
   ================================================================= */

/* Override Dawn's header grid */
.header {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  gap: 24px !important;
}

/* Menu column — left, justified to start */
.header__inline-menu {
  grid-column: 1 !important;
  justify-self: start !important;
  margin: 0 !important;
}

/* Logo column — center, dead center */
.header__heading,
.header__heading-link,
h1.header__heading {
  grid-column: 2 !important;
  justify-self: center !important;
  text-align: center !important;
  margin: 0 !important;
}

/* Icons column — right, justified to end */
.header__icons {
  grid-column: 3 !important;
  justify-self: end !important;
  margin: 0 !important;
}

/* Kill any leftover Dawn helper that re-positions these */
.header--middle-center .header__heading,
.header--middle-left .header__heading,
.header--top-center .header__heading,
.header--top-left .header__heading {
  position: static !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
}

/* Mobile: stack — drawer left, logo center, cart right */
@media screen and (max-width: 989px) {
  .header {
    grid-template-columns: 1fr auto 1fr !important;
  }
  .header__heading,
  .header__heading-link {
    justify-self: center !important;
  }
}

/* =================================================================
   PATCH 33 — STYLE BOSC WORDMARK + BRAND ICON
   Companion to header.liquid edit. Lays out wordmark text + chef-
   bowl image side-by-side inside the brand link. Centered as a
   unit by Patch 32's grid.
   ================================================================= */

/* Brand link wrapper — flex row, wordmark left + icon right */
.bosc-brand-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  text-decoration: none !important;
  line-height: 1 !important;
}

/* Wordmark text */
.bosc-wordmark {
  font-family: 'Anton', 'Oswald', sans-serif !important;
  font-size: 26px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: #f4ead8 !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

/* Chef-bowl icon */
.bosc-brand-icon {
  height: 52px !important;
  width: auto !important;
  max-width: 52px !important;
  display: block !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
}

/* Make sure h1 wrapper doesn't add weird margins */
h1.header__heading {
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
}

/* Mobile sizing — shrink wordmark + icon on small screens */
@media screen and (max-width: 749px) {
  .bosc-wordmark {
    font-size: 18px !important;
  }
  .bosc-brand-icon {
    height: 38px !important;
    max-width: 38px !important;
  }
  .bosc-brand-link {
    gap: 10px !important;
  }
}

/* =================================================================
   PATCH 34 — CARD WIDTH FIT + TAN HOVER + VIEW PRODUCT BUTTON
   Fix the empty space right of card images: card was wider than
   image. Lock card width to image width. Add tan background on
   hover. Style VIEW PRODUCT button (markup added in card-product
   snippet edit, see below).
   ================================================================= */

/* Lock card to image width (no overflow band) */
.featured-collection .card,
.featured-collection .card-wrapper,
.collection .card,
.collection .card-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

/* Make image fill its allocated column edge to edge */
.featured-collection .card__media,
.collection .card__media {
  width: 100% !important;
  margin: 0 !important;
}

/* Tan hover background on card */
.featured-collection .card-wrapper,
.collection .card-wrapper {
  transition: background-color 0.25s ease !important;
  background: transparent !important;
}

.featured-collection .card-wrapper:hover .card__content,
.featured-collection .card-wrapper:hover .card__information,
.collection .card-wrapper:hover .card__content,
.collection .card-wrapper:hover .card__information {
  background: #f4ead8 !important;
  transition: background-color 0.25s ease !important;
}

/* On hover — flip text + price colors to dark for contrast on tan */
.featured-collection .card-wrapper:hover .card__heading,
.featured-collection .card-wrapper:hover .card__heading a,
.featured-collection .card-wrapper:hover .price,
.featured-collection .card-wrapper:hover .price *,
.featured-collection .card-wrapper:hover .unit-price,
.collection .card-wrapper:hover .card__heading,
.collection .card-wrapper:hover .card__heading a,
.collection .card-wrapper:hover .price,
.collection .card-wrapper:hover .price *,
.collection .card-wrapper:hover .unit-price {
  color: #1a1815 !important;
}

/* VIEW PRODUCT button (markup added in card-product.liquid snippet) */
.bosc-card-cta {
  display: inline-block !important;
  margin-top: 14px !important;
  padding: 10px 22px !important;
  font-family: 'Oswald', sans-serif !important;
  font-size: 13px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  color: #f4ead8 !important;
  background: transparent !important;
  border: 2px solid #c84a1c !important;
  border-radius: 0 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  text-align: center !important;
  width: auto !important;
}

.bosc-card-cta:hover {
  background: #c84a1c !important;
  color: #f4ead8 !important;
  text-decoration: none !important;
}

/* On card hover (tan background), make button dark-on-tan-friendly */
.featured-collection .card-wrapper:hover .bosc-card-cta,
.collection .card-wrapper:hover .bosc-card-cta {
  color: #1a1815 !important;
  border-color: #c84a1c !important;
}

.featured-collection .card-wrapper:hover .bosc-card-cta:hover,
.collection .card-wrapper:hover .bosc-card-cta:hover {
  background: #c84a1c !important;
  color: #f4ead8 !important;
}

/* =================================================================
   PATCH 35 — CENTER PRODUCT IMAGE HORIZONTALLY IN CARD
   Image was rendering at natural size, pinned to left edge of
   card__media. Need horizontal center. Two-pronged: flex-center
   the media wrapper, plus margin auto on img as fallback.
   ================================================================= */

/* Center img inside media wrapper */
.featured-collection .card__media,
.featured-collection .media,
.collection .card__media,
.collection .media {
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  text-align: center !important;
}

/* Image itself: auto-center horizontally */
.featured-collection .card__media img:first-child,
.featured-collection .media img:first-child,
.collection .card__media img:first-child,
.collection .media img:first-child {
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
  max-width: 100% !important;
  width: auto !important;  /* let img keep natural width */
  height: auto !important;
}

/* Override Patch 31 first-child rule that forced width 100% */
.featured-collection .card__media > img:first-child,
.collection .card__media > img:first-child {
  width: auto !important;
  max-width: 100% !important;
}

/* =================================================================
   PATCH 36 — SURGICAL IMAGE CENTER (DOM-AWARE)
   Looking at actual Dawn DOM from card-product.liquid:
     .card-wrapper > .card > .card__inner.ratio > .card__media > .media > img
   The .card__inner has class "ratio" with inline --ratio-percent
   which creates the slot via padding-top trick. Image inside is
   absolutely positioned (Dawn default). Patch 29 set img to static.
   Result: img pinned top-left of slot.
   
   Fix: center the .media wrapper using its parent .card__media flex.
   Override Dawn's .ratio mechanic on featured-collection ONLY.
   ================================================================= */

/* Make the .card__inner ratio wrapper a flex container so children center */
.featured-collection .card__inner.ratio,
.collection .card__inner.ratio {
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  padding-top: 0 !important;
  height: auto !important;
}

.featured-collection .card__inner.ratio::before,
.collection .card__inner.ratio::before {
  display: none !important;
  content: none !important;
  padding-top: 0 !important;
}

/* .card__media inside fills width but its child .media centers img */
.featured-collection .card__inner .card__media,
.collection .card__inner .card__media {
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  width: 100% !important;
  position: static !important;
}

/* .media wrapper — center align */
.featured-collection .card__media .media,
.collection .card__media .media {
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  width: 100% !important;
  position: static !important;
  padding: 0 !important;
}

/* The IMG itself — keep natural width, center via margins */
.featured-collection .card__media .media img:first-child,
.featured-collection .card__media img:first-child,
.collection .card__media .media img:first-child,
.collection .card__media img:first-child {
  position: static !important;
  inset: auto !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center top !important;
}

/* =================================================================
   PATCH 37 — DEFAULT STATE IMAGE CENTER (HOVER ALREADY WORKS)
   Hover image is centered because the second image was forced
   absolute + inset 0 + 100% width by Patch 31. Default image is
   the FIRST img — Patch 31 set first-child to static/auto-width
   which lets it default-pin left.
   
   Force first-child img to occupy 100% of media width with object-
   fit contain so it visually centers inside its container.
   ================================================================= */

/* Default state FIRST image — fill container width, contain inside */
.featured-collection .card__media img:first-child,
.featured-collection .media img:first-child,
.featured-collection .card__media .media img:first-child,
.collection .card__media img:first-child,
.collection .media img:first-child,
.collection .card__media .media img:first-child {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  object-position: center top !important;
  margin: 0 auto !important;
  display: block !important;
  position: static !important;
}

/* Belt + suspenders — ensure parent containers are full-width */
.featured-collection .card__media,
.featured-collection .card__media .media,
.collection .card__media,
.collection .card__media .media {
  width: 100% !important;
  display: block !important;
  text-align: center !important;
}

/* =================================================================
   PATCH 38 — MASTER IMAGE STACK RESET (SUPERSEDES 29/31/35/36/37)
   Patches 29-37 layered too many conflicting rules. Clean approach:
   - .card__media + .media = square slot (aspect 1/1)
   - BOTH images absolute, inset 0, object-fit cover, full size
   - First image: opacity 1 default, fades to 0 on hover
   - Second image: opacity 0 default, fades to 1 on hover
   - Result: clean swap, no side-by-side, no void
   
   Customizer "Image ratio" already set to Square, so we honor it.
   ================================================================= */

/* SLOT — square aspect ratio (Customizer already set this, we just enforce) */
.featured-collection .card__media,
.featured-collection .card__media .media,
.collection .card__media,
.collection .card__media .media {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
}

/* Kill the padding-top hack Dawn uses for .ratio */
.featured-collection .card__media::before,
.featured-collection .card__media .media::before,
.collection .card__media::before,
.collection .card__media .media::before {
  display: none !important;
  content: none !important;
  padding-top: 0 !important;
}

/* BOTH images — absolute fill, object-fit cover, smooth opacity transition */
.featured-collection .card__media img,
.featured-collection .card__media .media img,
.collection .card__media img,
.collection .card__media .media img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  margin: 0 !important;
  transition: opacity 0.4s ease !important;
}

/* FIRST image — visible by default */
.featured-collection .card__media img:first-child,
.featured-collection .card__media .media img:first-child,
.collection .card__media img:first-child,
.collection .card__media .media img:first-child {
  opacity: 1 !important;
  z-index: 1 !important;
}

/* SECOND image — hidden by default, layered above */
.featured-collection .card__media img:nth-child(2),
.featured-collection .card__media img + img,
.featured-collection .card__media .media img:nth-child(2),
.featured-collection .card__media .media img + img,
.collection .card__media img:nth-child(2),
.collection .card__media img + img,
.collection .card__media .media img:nth-child(2),
.collection .card__media .media img + img {
  opacity: 0 !important;
  z-index: 2 !important;
}

/* HOVER — first fades out, second fades in */
.featured-collection .card-wrapper:hover .card__media img:first-child,
.collection .card-wrapper:hover .card__media img:first-child {
  opacity: 0 !important;
}

.featured-collection .card-wrapper:hover .card__media img:nth-child(2),
.featured-collection .card-wrapper:hover .card__media img + img,
.collection .card-wrapper:hover .card__media img:nth-child(2),
.collection .card-wrapper:hover .card__media img + img {
  opacity: 1 !important;
}

/* Kill scale-up effect from Patch 10 that may still apply */
.featured-collection .card-wrapper:hover .card__media img,
.collection .card-wrapper:hover .card__media img {
  transform: none !important;
}

/* =================================================================
   PATCH 39 — REVERT FLEX ON CARD__INNER (FIXES PATCH 36 BUG)
   DevTools showed .card__inner.ratio rendering as flex with 2
   children side-by-side (card__media + card__content), producing
   the image-left/black-right layout. Patch 36 set this to flex
   incorrectly. Restore block display so children stack normally.
   
   The card naturally stacks: media on top, content below.
   Image fill comes from Patch 38's aspect-ratio + absolute img.
   ================================================================= */

/* Restore .card__inner to block layout — Patch 36 wrongly set this to flex */
.featured-collection .card__inner.ratio,
.featured-collection .card__inner,
.collection .card__inner.ratio,
.collection .card__inner {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  padding-top: 0 !important;
  /* Restore aspect-ratio on the .card__inner (this IS the media slot in Dawn) */
  aspect-ratio: 1 / 1 !important;
}

/* Kill the ::before padding-top trick that Dawn uses for aspect ratio */
.featured-collection .card__inner.ratio::before,
.collection .card__inner.ratio::before {
  display: none !important;
  content: none !important;
  padding-top: 0 !important;
}

/* .card__media inside fills its parent (.card__inner) fully */
.featured-collection .card__inner > .card__media,
.collection .card__inner > .card__media {
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
}

/* .media (inside .card__media) fills .card__media fully */
.featured-collection .card__inner .card__media .media,
.collection .card__inner .card__media .media {
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* IMG fills .media (which fills .card__media which fills .card__inner) */
.featured-collection .card__inner img,
.collection .card__inner img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

/* card__content must be OUTSIDE the .card__inner aspect cage — Dawn DOM
   has card__content as SIBLING of card__inner, not child. Confirm with
   DevTools: card__inner closes, then card__content opens. So content
   stacks below image naturally. No further override needed. */