/** Shopify CDN: Minification failed

Line 1206:0 Unexpected ".404-content"
Line 1404:0 Unexpected ".404-content"

**/
/* =============================================================
   Read Sirah — Design System Overrides for Dawn
   Load order: before base.css so Dawn's component rules inherit
   these values, but our explicit overrides below win via specificity.
   ============================================================= */

/* ── 1. Design Tokens ── */
:root {
  /* Parchment & Amber palette mapped to Dawn's RGB variable format */
  --color-background: 246,237,213;          /* #F6EDD5 */
  --color-foreground: 30,15,4;              /* #1E0F04 */
  --color-background-contrast: 237,224,190; /* #EDE0BE */
  --color-shadow: 30,15,4;
  --color-button: 184,120,32;              /* #B87820 */
  --color-button-text: 246,237,213;        /* #F6EDD5 */
  --color-secondary-button: 237,224,190;   /* #EDE0BE */
  --color-secondary-button-text: 107,72,40;
  --color-link: 184,120,32;
  --color-badge-foreground: 184,120,32;
  --color-badge-background: 246,237,213;
  --color-badge-border: 184,120,32;

  /* Read Sirah native tokens (used in custom sections) */
  --rs-bg: #F6EDD5;
  --rs-bg-elevated: #EDE0BE;
  --rs-bg-card: #E4D4A8;
  --rs-gold: #B87820;
  --rs-gold-bright: #D09010;
  --rs-gold-faint: rgba(184,120,32,0.11);
  --rs-gold-line: rgba(184,120,32,0.26);
  --rs-text: #1E0F04;
  --rs-text-dim: #5A3F22;
  --rs-text-bright: #100804;

  /* New Direction design tokens */
  --body-bg: #F6EDD5;
  --body-bg-alt: #EDE0BE;
  --body-text: #1E0F04;
  --body-text-dim: #5A3F22;
  --body-text-bright: #100804;
  --accent: #B87820;
  --accent-bright: #D09010;
  --accent-dim: rgba(184,120,32,0.11);
  --accent-line: rgba(184,120,32,0.26);
  --nav-bg: rgba(245,236,213,0.90);
  --nav-border: rgba(184,120,32,0.20);
  --nav-text: #2C1408;
  --nav-text-dim: #6B4828;
  --nav-cta-bg: #B87820;
  --nav-cta-text: #F6EDD5;
  --hero-text: #F5E8CC;
  --hero-text-dim: rgba(245,232,204,0.88);
  --hero-accent: #D09010;
  --hero-cta-bg: #C89018;
  --hero-cta-text: #1A0C02;
  --hero-overlay: linear-gradient(to bottom, rgba(18,8,2,0.65) 0%, rgba(18,8,2,0.30) 42%, rgba(18,8,2,0.28) 60%, rgba(18,8,2,0.70) 100%);

  /* Font overrides — Playfair Display + Lora */
  --font-body-family: 'Lora', Georgia, serif;
  --font-body-style: normal;
  --font-body-weight: 400;
  --font-body-weight-bold: 500;
  --font-heading-family: 'Playfair Display', Georgia, serif;
  --font-heading-style: normal;
  --font-heading-weight: 400;
  --font-brand-family: 'Playfair Display', Georgia, serif;

  /* Shape & spacing tokens */
  --buttons-radius: 5px;
  --inputs-radius: 5px;
  --product-card-corner-radius: 0.8rem;
  --product-card-border-width: 0.1rem;
  --product-card-border-opacity: 0.22;
  --product-card-shadow-opacity: 0;

  /* Z-index scale — single source of truth for stacking. Pin Read
     Sirah elements to these tokens so its obvious why one beats
     another. The high values on header/drawer are inherited from
     existing rules to keep parity with Dawns own modals/popovers. */
  --z-grain: 9999;          /* body::after grain overlay */
  --z-section: 1;           /* in-section stacking (hero overlay > bg) */
  --z-header: 10050;        /* sticky header above sections */
  --z-drawer: 10060;        /* cart/menu drawer above header */
}

/* ── 2. Global Base Overrides ── */
/* Strip iOS Safari's implicit safe-area padding from html AND body so the
   fixed nav at top:0 actually reaches the top of the screen on notched
   devices. Without this, the Dynamic Island's safe-area inset creeps in
   and pushes everything down, leaving a visible strip of hero content
   between the system status bar and the nav. */
html {
  padding: 0 !important;
  margin: 0 !important;
}

body {
  background-color: var(--body-bg);
  color: var(--body-text);
  font-family: var(--font-body-family);
  font-weight: var(--font-body-weight);
  letter-spacing: 0.01em;
  font-size: 1.7rem;
  grid-template-rows: 1fr auto;
  background-attachment: scroll !important;
  padding: 0 !important;
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.gradient,
body.template-index,
body[class] {
  background-attachment: scroll !important;
  padding: 0 !important;
  padding-top: 0 !important;
  margin: 0 !important;
  margin-top: 0 !important;
}

/* iOS Safari/WebKit bug guard:
   fixed headers can drift away from top while scrolling when the root
   layout stays on CSS grid. Use block flow on mobile iOS only. */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 768px) {
    body {
      display: block !important;
      grid-template-rows: none !important;
      grid-template-columns: none !important;
    }
  }
}


@media screen and (min-width: 750px) {
  body { font-size: 1.7rem; }
}

/* Push inner page content below the fixed nav.
   Use the CSS var Dawn sets via JS; fall back to 80px while it initialises. */
body:not(.template-index) #MainContent {
  padding-top: var(--header-height, 80px);
}

/* Anchor targets on any page must land below the fixed nav */
[id] {
  scroll-margin-top: var(--header-height, 80px);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading-family);
  font-weight: 400;
  color: var(--body-text-bright);
}

a { color: var(--accent); }
a:hover { color: var(--accent-bright); }

/* ── 3. Header / Nav ── */
.shopify-section-group-header-group .announcement-bar,
.announcement-bar-section {
  display: none !important;
}

/* Fix the Dawn header section to the top of the viewport — always.
   Use width: 100vw + left/right: 0 so the background extends past the
   notch area on iOS Safari (per viewport-fit=cover behaviour). */
.section-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  z-index: var(--z-header, 10050);
  margin: 0 !important;
  padding: 0 !important;
}

/* Prevent Dawn's StickyHeader JS from sliding the nav off-screen on scroll */
.section-header.shopify-section-header-hidden {
  top: 0 !important;
}

.section-header.shopify-section-header-sticky {
  position: fixed !important;
  top: 0 !important;
}

/* Dark semi-transparent strip over hero; glass on scroll (class toggled by nav.js) */
.header-wrapper {
  background: rgba(18,8,2,0.48) !important;
  border-bottom: none !important;
  transition: background 0.4s ease, backdrop-filter 0.4s ease, -webkit-backdrop-filter 0.4s ease, border-color 0.4s ease;
}

.header-wrapper.scrolled {
  background: var(--nav-bg) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid var(--nav-border) !important;
}

/* Non-home pages: always glass */
body:not(.template-index) .header-wrapper,
body:not(.template-index) .section-header {
  background: var(--nav-bg) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid var(--nav-border) !important;
}

/* The .section-header wrapper itself sometimes carries the active color
   scheme class — neutralize it so its background doesnt bleed through
   the translucent .header-wrapper above it. */
body:not(.template-index) .section-header,
body:not(.template-index) .shopify-section-group-header-group {
  --color-background: 246, 237, 213;
  --color-foreground: 16, 8, 4;
  background-color: transparent !important;
}

/* Override Dawn's grid layout to flexbox for full-width Read Sirah layout */
.header.page-width {
  max-width: none !important;
  padding: 14px 40px !important;
}

/* Cap logo height so it doesn't blow out the nav height */
.header__heading-logo-wrapper {
  width: auto !important;
}

.header__heading-logo {
  height: 36px !important;
  width: auto !important;
  max-width: none !important;
}

.header {
  display: flex !important;
  align-items: center !important;
  background: transparent !important;
  gap: 0 !important;
  position: relative !important;
}

/* Text logo — "Read Sirah" */
.header__heading-link {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 4px !important;
  text-decoration: none !important;
}

.rs-logo-read {
  font-family: 'Lora', Georgia, serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  color: var(--nav-text) !important;
  transition: color 0.3s ease;
}

.rs-logo-sirah {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 24px !important;
  font-style: italic !important;
  font-weight: 400 !important;
  letter-spacing: 0.5px !important;
  line-height: 1 !important;
  margin-left: 2px !important;
  color: var(--accent) !important;
  transition: color 0.3s ease;
}

.header-wrapper.scrolled .rs-logo-read,
body:not(.template-index) .rs-logo-read {
  color: var(--nav-text) !important;
}

/* Over hero (before scroll): light text for readability on dark image.
   Scope to the homepage only — non-home pages must always read as
   parchment + dark text, never the hero-overlay light variant. */
body.template-index .header-wrapper:not(.scrolled) .rs-logo-read {
  color: var(--hero-text) !important;
}

body.template-index .header-wrapper:not(.scrolled) .rs-logo-sirah {
  color: var(--hero-accent, #D09010) !important;
}

/* Non-home pages: lock the nav text styling to match the homepages
   scrolled-state (parchment glass + dark text + gold Sirah). Higher
   specificity than the :not(.scrolled) rules above so this wins even
   if nav.js hasnt added `.scrolled` yet. */
body:not(.template-index) .header-wrapper .rs-logo-read,
body:not(.template-index) .header-wrapper:not(.scrolled) .rs-logo-read {
  color: var(--nav-text) !important;
}

body:not(.template-index) .header-wrapper .rs-logo-sirah,
body:not(.template-index) .header-wrapper:not(.scrolled) .rs-logo-sirah {
  color: var(--accent) !important;
}

.header__heading-link:hover .rs-logo-sirah {
  color: var(--accent-bright) !important;
}

/* Push everything from nav-links rightward to fill the space */
.header__icons {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Nav links centered on the full header width via absolute positioning */
.rs-header-nav-links {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  flex: none;
}

/* Search + cart icon boxes — bright at rest, invert to gold-fill on hover */
.header__icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  border: 1px solid var(--accent) !important;
  border-radius: 4px !important;
  color: var(--accent) !important;
  background: rgba(246,237,213,0.9) !important;
  text-decoration: none !important;
  transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease !important;
  padding: 0 !important;
  position: relative;
}

.header__icon:hover {
  border-color: var(--accent) !important;
  background: var(--accent) !important;
  color: var(--body-bg) !important;
}

.header__icon .svg-wrapper:not(.header__icon-close) { display: inline-flex; }
.header__icon svg { width: 18px !important; height: 18px !important; }

/* Bigger cart icon glyph — same frame as search */
#cart-icon-bubble svg {
  width: 32px !important;
  height: 32px !important;
}

/* Restore Dawn's close-icon hide behaviour (our svg-wrapper rule would override it) */
details:not([open]) .header__icon-close { display: none !important; }

/* Hide account icon — not part of the Read Sirah nav design */
.header__icon--account { display: none !important; }

/* Cart count badge */
.cart-count-bubble {
  background-color: var(--accent) !important;
  color: var(--nav-cta-text) !important;
  border: none !important;
}

.cart-count-bubble span {
  color: var(--nav-cta-text) !important;
  font-weight: 700 !important;
}

/* ── Section nav links (injected by nav.js on homepage) ── */
.rs-header-nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}

.rs-header-nav-link {
  font-family: 'Lora', Georgia, serif;
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--hero-text);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 2px;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.rs-header-nav-link:hover {
  color: var(--accent);
  background: var(--accent-dim);
}

/* Scrolled state: nav links change from light (hero) to dark (parchment) */
.header-wrapper.scrolled .rs-header-nav-link,
body:not(.template-index) .rs-header-nav-link {
  color: var(--nav-text-dim) !important;
}

.header-wrapper.scrolled .rs-header-nav-link:hover,
body:not(.template-index) .rs-header-nav-link:hover {
  color: var(--nav-text) !important;
  background: var(--accent-dim) !important;
}

/* Order Now CTA button (homepage) — colors match the hero btn-primary */
.rs-header-cta {
  display: inline-flex;
  align-items: center;
  font-family: 'Lora', Georgia, serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--hero-cta-text) !important;
  background: var(--hero-cta-bg);
  border: none;
  text-decoration: none;
  padding: 10px 22px;
  border-radius: 2px;
  margin-left: auto;
  margin-right: 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.3s ease, transform 0.25s ease, opacity 0.3s ease;
}

.rs-header-cta:hover {
  opacity: 0.88;
  transform: translateY(-1px);
  color: var(--hero-cta-text) !important;
  background: var(--hero-cta-bg);
}

@media (prefers-reduced-motion: reduce) {
  .rs-header-cta { transition: none; }
}

/* Back to Home button (non-home pages) — same look as the homepage CTA */
.rs-header-back {
  font-family: 'Lora', Georgia, serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--hero-cta-text) !important;
  background: var(--hero-cta-bg);
  border: none;
  text-decoration: none;
  padding: 10px 22px;
  border-radius: 2px;
  margin-left: auto;
  margin-right: 10px;
  white-space: nowrap;
  transition: background 0.3s ease, transform 0.25s ease, opacity 0.3s ease;
}

.rs-header-back:hover {
  opacity: 0.88;
  transform: translateY(-1px);
  color: var(--hero-cta-text) !important;
  background: var(--hero-cta-bg);
}

/* Mobile: hide section links and CTA buttons, tighten padding */
@media (max-width: 768px) {
  .rs-header-nav-links,
  .rs-header-cta,
  .rs-header-back { display: none !important; }

  /* Keep fixed header on its own layer to reduce WebKit scroll drift. */
  .section-header {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  .header.page-width {
    padding: calc(12px + env(safe-area-inset-top, 0px)) 20px 12px !important;
  }

  .header__icon {
    width: 38px !important;
    height: 38px !important;
  }

  /* Safe-area fill on mobile — extends the nav background into the
     status bar / Dynamic Island zone. Colour comes from --rs-safe-bg
     which nav.js syncs with the nav state. */
  .section-header::before {
    content: '';
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) * -1);
    left: 0;
    right: 0;
    height: env(safe-area-inset-top, 0px);
    background: var(--rs-safe-bg, #F6EDD5);
    pointer-events: none;
    z-index: 1;
  }

  /* Mobile: kill the translucency on the scrolled nav. iOS Safari has
     long-standing bugs with backdrop-filter + position:fixed, which
     made page content visibly bleed through the nav strip while
     scrolling. Force opaque parchment + drop the blur on every layer
     in the header stack (.section-header, .header-wrapper, .header). */
  .section-header,
  .header-wrapper.scrolled,
  body:not(.template-index) .header-wrapper,
  body:not(.template-index) .section-header,
  body:not(.template-index) .header {
    background: #F6EDD5 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body:not(.template-index) .header-wrapper,
  .header-wrapper.scrolled {
    border-bottom: 1px solid var(--nav-border) !important;
  }

  /* Home page hero strip: solid dark on mobile (Safari ignores 0.9+ alpha
     reliably under fixed + composited layers, so use an opaque colour). */
  .template-index .section-header {
    background: #120802 !important;
  }
  .template-index .header-wrapper:not(.scrolled) {
    background: #120802 !important;
  }
  .template-index .header-wrapper.scrolled {
    background: #F6EDD5 !important;
  }

  /* Mobile layout: hamburger left · logo center · icons right */
  header-drawer {
    order: 1;
    margin-left: -1.2rem !important;
    margin-right: 0;
  }

  .header__heading,
  .header > .header__heading-link {
    order: 2;
    flex: 1 !important;
    display: flex !important;
    justify-content: center;
  }

  .header__icons {
    order: 3;
  }
}

/* Suppress the summary::before page overlay — it gets stuck after JS-driven close */
header-drawer summary::before {
  display: none !important;
}

/* Mobile drawer — parchment + amber to match the site palette */
.menu-drawer {
  background: rgba(246,237,213,0.97) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-right: 1px solid var(--accent-line) !important;
}

.menu-drawer__menu-item {
  color: var(--nav-text) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid var(--accent-line) !important;
  padding: 18px 24px !important;
  transition: color 0.25s ease, background 0.25s ease !important;
}

.menu-drawer__menu-item:hover,
.menu-drawer__menu-item--active {
  color: var(--accent) !important;
  background: var(--accent-dim) !important;
}

/* Submenu panel + close button inherit the same palette */
.menu-drawer__submenu {
  background: rgba(246,237,213,0.97) !important;
}

.menu-drawer__close-button {
  color: var(--nav-text) !important;
  border-bottom: 1px solid var(--accent-line) !important;
}

.menu-drawer__close-button:hover {
  color: var(--accent) !important;
}

.menu-drawer .svg-wrapper svg {
  color: var(--accent) !important;
}

/* ── 4. Buttons ── */
.button,
.btn,
button.shopify-payment-button__button {
  background-color: var(--rs-gold);
  color: var(--rs-bg);
  font-family: var(--font-body-family);
  font-weight: 600;
  letter-spacing: 0.06em;
  border-radius: var(--buttons-radius);
  border: none;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.button:hover,
.btn:hover {
  background-color: var(--rs-gold-bright);
  color: var(--rs-bg);
  box-shadow: 0 4px 16px rgba(212,144,28,0.3);
}

.button--secondary {
  background-color: transparent;
  color: var(--rs-gold);
  border: 1px solid var(--rs-gold-line);
}

.button--secondary:hover {
  background-color: var(--rs-gold-faint);
  border-color: var(--rs-gold);
}

/* ── 5. Inputs & Forms ── */
.field__input,
.select__select,
.customer input,
.form__input {
  background-color: var(--rs-bg-elevated);
  color: var(--rs-text);
  border-color: var(--rs-gold-line);
  border-radius: var(--inputs-radius);
  font-family: var(--font-body-family);
}

.field__input:focus,
.select__select:focus,
.customer input:focus {
  border-color: var(--rs-gold);
  outline: none;
  box-shadow: 0 0 0 2px rgba(212,144,28,0.2);
}

/* ── 6. Cart Drawer ── */
cart-drawer.drawer {
  z-index: var(--z-drawer, 10060);
}

.drawer {
  background-color: rgba(8,15,26,0.7);
}

.drawer__inner {
  background-color: var(--rs-bg-elevated);
  border-color: var(--rs-gold-line);
}

cart-drawer .drawer__inner {
  padding-right: 2.8rem !important;
  padding-left: 2.4rem !important;

  /* Override Dawns color-scheme tokens *inside the drawer only*. The
     <div class=color-X> the cart-drawer template applies sets these to
     the active schemes navy/blue values, which paints the close icon,
     quantity stepper plate, and any rgb(var(--color-...)) consumer in
     the wrong palette. Re-pin them to our parchment + brown values so
     Dawns own rules paint correctly. Specificity 0,1,1 beats the
     scheme-class .color-X (0,1,0). */
  --color-background: 246, 237, 213; /* #F6EDD5 — parchment */
  --color-foreground: 16, 8, 4;      /* #100804 — near-black brown */
  --color-shadow: 16, 8, 4;
  --color-button: 184, 120, 32;      /* #B87820 — gold */
  --color-button-text: 246, 237, 213;
  --color-secondary-button: 246, 237, 213;
  --color-secondary-button-text: 184, 120, 32;
  --color-link: 184, 120, 32;
  --color-background-contrast: 232, 220, 188;
}

cart-drawer .cart-drawer__form,
cart-drawer .cart-items,
cart-drawer cart-drawer-items {
  padding-right: 0.4rem;
}

.drawer__header {
  border-bottom: 1px solid var(--rs-gold-line);
}

.drawer__heading {
  font-family: var(--font-brand-family);
  color: var(--rs-text-bright);
  letter-spacing: 0.08em;
}

.drawer__close {
  color: var(--rs-text-bright);
  opacity: 1;
}

.drawer__close .svg-wrapper svg,
.drawer__close svg {
  fill: currentColor;
  stroke: currentColor;
}

.drawer__close:hover {
  color: var(--rs-gold);
}

/* Quantity stepper inside the cart drawer — Dawn paints :before with
   --color-background (dark navy in the active scheme), giving the
   little [- 1 +] block a blue plate. Re-skin every layer to parchment
   + brown so it sits inside our palette. */
.cart-drawer .quantity {
  color: var(--rs-text-bright);
}

.cart-drawer .quantity:before {
  background: var(--rs-bg);
  box-shadow: none;
}

.cart-drawer .quantity:after {
  box-shadow: 0 0 0 var(--inputs-border-width) var(--rs-gold-line);
}

.cart-drawer .quantity__input,
.cart-drawer .quantity__button {
  color: var(--rs-text-bright);
}

.cart-drawer .quantity__button:hover {
  color: var(--rs-gold-bright);
}

.cart-drawer .quantity__button:focus-visible,
.cart-drawer .quantity__input:focus-visible {
  background-color: var(--rs-bg);
}

.drawer__footer {
  border-top: 1px solid var(--rs-gold-line);
  background-color: var(--rs-bg-elevated);
}

.cart-drawer thead {
  display: table;
  padding-top: 1.6rem;
}

.cart-drawer .cart-items th {
  border-bottom-color: var(--rs-gold-line);
  color: var(--rs-text-dim);
  font-family: var(--font-body-family);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cart-drawer .cart-item__name,
.cart-drawer .cart-item__details a {
  font-family: var(--font-heading-family);
  color: var(--rs-text-bright);
  font-size: 1.6rem;
  font-weight: 300;
}

.cart-drawer .price,
.cart-drawer .totals__subtotal-value,
.cart-drawer .totals__total-value {
  font-family: var(--font-heading-family);
  color: var(--rs-gold-bright);
}

.cart-drawer .totals__subtotal,
.cart-drawer .totals__total {
  color: var(--rs-text-bright);
}

.cart-drawer .tax-note,
.cart-drawer .cart-item__discounts {
  color: var(--rs-text-dim);
}

/* Variant options + line-item properties (Dawn calls these `.product-option`).
   They inherit `color` from <body>, which the active color scheme can set to
   white — invisible on parchment. Force a readable brown. */
.cart-drawer .cart-item__details,
.cart-drawer .product-option,
.cart-drawer .product-option dt,
.cart-drawer .product-option dd,
.cart-drawer .cart-item__details dl,
.cart-drawer .cart-item__details dt,
.cart-drawer .cart-item__details dd {
  color: var(--rs-text-dim);
}

.cart-drawer .cart-item__final-price,
.cart-drawer .cart-item__old-price {
  color: var(--rs-text-dim);
}

.cart-drawer .cart-item__final-price {
  color: var(--rs-text-bright);
}

.cart-drawer .caption-with-letter-spacing,
.cart-drawer .caption-with-letter-spacing.light {
  color: var(--rs-text-dim);
}

cart-drawer-items::-webkit-scrollbar-thumb {
  background-color: var(--rs-gold-line);
}

/* Cart checkout button */
.cart-drawer .cart__checkout-button {
  background-color: var(--rs-gold);
  color: var(--rs-bg);
  font-weight: 700;
  letter-spacing: 0.06em;
  box-shadow: 0 4px 16px rgba(212,144,28,0.3);
}

.cart-drawer .cart__checkout-button:hover {
  background-color: var(--rs-gold-bright);
}

/* Cart empty state */
.cart-drawer__warnings {
  color: var(--rs-text-dim);
}

/* ── 7. Product Cards (Collection Grid) ── */
.card-wrapper {
  background-color: var(--rs-bg-card);
}

.card {
  background-color: var(--rs-bg-card);
  border-color: var(--rs-gold-line) !important;
}

.card:hover {
  border-color: rgba(212,144,28,0.45) !important;
}

.card__heading,
.card__heading a {
  font-family: var(--font-heading-family);
  color: var(--rs-text-bright);
  font-weight: 300;
}

.card__heading a:hover {
  color: var(--rs-gold);
}

.card .price__regular,
.card .price__sale {
  font-family: var(--font-heading-family);
  color: var(--rs-gold-bright);
}

.card .price__compare {
  color: var(--rs-text-dim);
}

/* Badge for coming-soon products */
.badge {
  font-family: var(--font-body-family);
  letter-spacing: 0.1em;
}

.badge--sale,
.badge--on-sale {
  background-color: var(--rs-gold);
  color: var(--rs-bg);
}

/* ── 8. Product Page ── */
.product__title {
  font-family: var(--font-heading-family);
  color: var(--rs-text-bright);
  font-weight: 300;
}

.product__title em {
  color: var(--rs-gold);
  font-style: italic;
}

.product-form__submit {
  background-color: var(--rs-gold);
  color: var(--rs-bg);
  font-weight: 700;
  letter-spacing: 0.06em;
  box-shadow: 0 4px 16px rgba(212,144,28,0.3);
}

.product-form__submit:hover {
  background-color: var(--rs-gold-bright);
}

.product__description {
  color: var(--rs-text);
  line-height: 1.8;
}

.product__accordion .accordion__title,
.product__accordion summary {
  color: var(--rs-text-bright);
  border-bottom-color: var(--rs-gold-line);
  font-family: var(--font-body-family);
}

.product__accordion details[open] summary {
  color: var(--rs-gold);
}

.product-media-container,
.product__media-wrapper {
  background-color: var(--rs-bg-elevated);
  border-color: var(--rs-gold-line);
  border-radius: 8px;
}

/* Variant pills */
.swatch-input__input:checked + .swatch-input__label,
.swatch-input__input:checked + .swatch__label {
  border-color: var(--rs-gold);
  color: var(--rs-gold);
}

/* Price on product page */
.price--large .price__regular,
.price--large .price__sale {
  font-family: var(--font-heading-family);
  color: var(--rs-gold-bright);
  font-size: 3rem;
}

/* ── 9. Collection Page Banner ── */
.collection-hero {
  background-color: var(--rs-bg-elevated);
}

.collection-hero__title {
  font-family: var(--font-heading-family);
  color: var(--rs-text-bright);
}

/* Filter sidebar */
.facets__summary,
.facets__heading {
  font-family: var(--font-body-family);
  color: var(--rs-text-dim);
  letter-spacing: 0.08em;
}

.facets__label {
  color: var(--rs-text);
}

/* Mobile filter drawer — force parchment palette
   (Dawn defaults to the active section color scheme, which on the
   collection page renders the footer in navy). */
.mobile-facets,
.mobile-facets__inner,
.mobile-facets__main,
.mobile-facets__footer {
  background: var(--rs-bg) !important;
  background-color: var(--rs-bg) !important;
  color: var(--rs-text) !important;
}

.mobile-facets__header {
  background: var(--rs-bg) !important;
  border-bottom: 1px solid var(--rs-gold-line) !important;
  color: var(--rs-text-bright) !important;
}

.mobile-facets__heading {
  font-family: var(--font-heading-family);
  color: var(--rs-text-bright) !important;
}

.mobile-facets__close,
.mobile-facets__close-button {
  color: var(--rs-text-dim) !important;
}

.mobile-facets__details summary,
.mobile-facets__details .facets__summary,
.mobile-facets__main label,
.mobile-facets__main .facet-checkbox,
.mobile-facets__main .product-count__text {
  color: var(--rs-text) !important;
}

.mobile-facets__footer {
  border-top: 1px solid var(--rs-gold-line) !important;
}

/* "Remove all" link in the drawer footer */
.mobile-facets__footer .mobile-facets__clear,
.mobile-facets__footer .button--tertiary,
.no-js .mobile-facets__footer .mobile-facets__clear {
  color: var(--rs-text-dim) !important;
  background: transparent !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mobile-facets__footer .mobile-facets__clear:hover {
  color: var(--rs-gold) !important;
}

/* "Apply" button — keep gold but ensure contrast */
.mobile-facets__footer .button:not(.button--tertiary),
.mobile-facets__footer .mobile-facets__submit {
  background: var(--rs-gold) !important;
  color: var(--rs-bg) !important;
  border-color: var(--rs-gold) !important;
}

.mobile-facets__footer .button:not(.button--tertiary):hover,
.mobile-facets__footer .mobile-facets__submit:hover {
  background: var(--rs-gold-bright) !important;
  border-color: var(--rs-gold-bright) !important;
}

/* ── 10. Pagination ── */
.pagination__item {
  color: var(--rs-text-dim);
}

.pagination__item--current {
  background-color: var(--rs-gold);
  color: var(--rs-bg);
}

/* ── 11. Footer ── */
.footer {
  background-color: var(--rs-bg);
  border-top: 1px solid var(--rs-gold-line);
  color: var(--rs-text-dim);
}

.footer__heading {
  font-family: var(--font-brand-family);
  color: var(--rs-text-bright);
  letter-spacing: 0.1em;
}

.footer a {
  color: var(--rs-text-dim);
}

.footer a:hover {
  color: var(--rs-gold);
}

/* ── 12. Predictive Search ── */
.predictive-search {
  background-color: var(--rs-bg-elevated);
  border-color: var(--rs-gold-line);
}

.predictive-search__item:hover,
.predictive-search__item.active {
  background-color: var(--rs-bg-card);
}

/* ── 13. Announcement Bar ── */
.announcement-bar {
  background-color: var(--rs-bg-elevated);
  border-bottom: 1px solid var(--rs-gold-line);
  color: var(--rs-gold);
}

/* ── 14. Scrollbar ── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--rs-bg); }
::-webkit-scrollbar-thumb { background: var(--rs-gold-line); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--rs-gold); }

/* ── 15. Product grid centering ── */
.product-grid {
  justify-content: center;
}

.product-grid .grid__item {
  flex-grow: 0;
}

/* ── 17a. Re-pin Dawn color-scheme tokens on every secondary template.
   Dawns main-product / main-collection-product-grid / page / blog
   sections wrap their content in <div class=gradient color-scheme-X>
   where the active scheme can be a dark navy. That redefines
   --color-background and --color-foreground locally and Dawns body
   rule paints the section navy. Override the tokens on every
   .gradient and color-scheme-* descendant of non-homepage bodies so
   the parchment palette wins regardless of the schemes admin
   selected for the section.
   Specificity: body[class] [class] = (0,2,0) beats .color-scheme-X
   (0,1,0) and .gradient (0,1,0). */
body:not(.template-index) .gradient,
body:not(.template-index) [class*="color-scheme"],
body:not(.template-index) .color-background-1,
body:not(.template-index) .color-background-2,
body:not(.template-index) .color-accent-1,
body:not(.template-index) .color-accent-2,
body:not(.template-index) .color-inverse {
  --color-background: 246, 237, 213; /* parchment */
  --color-foreground: 16, 8, 4;
  --color-shadow: 16, 8, 4;
  --color-button: 184, 120, 32;      /* gold */
  --color-button-text: 246, 237, 213;
  --color-secondary-button: 246, 237, 213;
  --color-secondary-button-text: 184, 120, 32;
  --color-link: 184, 120, 32;
  --color-background-contrast: 232, 220, 188;
}

/* Force-paint the body bg under secondary pages even when the
   computed --color-background ends up with the schemes original
   value (some Dawn rules cache the rgb output). */
body:not(.template-index),
body:not(.template-index) .gradient {
  background-color: var(--rs-bg) !important;
}

/* ── 17b. Secondary Pages — pages, articles, blog, search, customer, 404 ──
   The :root token redefinitions and the cart-drawer scoped overrides
   already cascade most of the parchment palette through Dawns stock
   components. This block ties up the editorial typography on the
   page/article/customer/cart templates that don't have a Read Sirah
   landing section to inherit from. Headings get Playfair Display, body
   gets Lora at a readable measure, lists/blockquotes/links read as
   editorial copy in palette. */

/* Page-width containers — give the secondary templates breathing room
   so the privacy policy and policies pages aren't stuck against the
   nav. */
.template-page #MainContent,
.template-article #MainContent,
.template-blog #MainContent,
.template-search #MainContent,
.template-404 #MainContent,
.template-customers-account #MainContent,
.template-customers-login #MainContent,
.template-customers-register #MainContent,
.template-customers-order #MainContent,
.template-customers-addresses #MainContent,
.template-customers-reset_password #MainContent,
.template-customers-activate_account #MainContent,
.template-cart #MainContent,
.template-policy #MainContent,
.template-list-collections #MainContent {
  background-color: var(--rs-bg);
  color: var(--rs-text);
  padding-top: 60px;
}

/* Top-level titles across templates — page, article, search, customer,
   policy, 404. Unify under one editorial heading rule. */
.main-page-title,
.article-template__title,
.template-search__header h1,
.template-search__header h2,
.customer__title,
.title-wrapper-with-link h1,
.title-wrapper-with-link h2,
.shopify-policy__title h1,
.404-content h2 {
  font-family: var(--font-heading-family);
  color: var(--rs-text-bright);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

/* Italic accent inside titles (where Dawn uses <em> in content) */
.main-page-title em,
.article-template__title em,
.shopify-policy__title em {
  font-style: italic;
  color: var(--rs-gold);
}

/* Rich-text content (RTE) — privacy policy, contact intro, page bodies,
   article bodies. Hold the measure to ~70ch and give paragraphs proper
   rhythm. Lists, blockquotes, links all in palette. */
.rte,
.shopify-policy__container .rte,
.article-template__content {
  font-family: var(--font-body-family);
  color: var(--rs-text);
  font-size: 1.7rem;
  line-height: 1.85;
  max-width: 72ch;
}

.rte p + p,
.article-template__content p + p {
  margin-top: 1.4em;
}

.rte h2,
.rte h3,
.article-template__content h2,
.article-template__content h3 {
  font-family: var(--font-heading-family);
  color: var(--rs-text-bright);
  margin-top: 2em;
  margin-bottom: 0.6em;
  letter-spacing: -0.01em;
}

.rte ul,
.rte ol,
.article-template__content ul,
.article-template__content ol {
  padding-left: 1.6em;
  margin: 1em 0;
}

.rte li,
.article-template__content li {
  margin-bottom: 0.5em;
}

.rte li::marker,
.article-template__content li::marker {
  color: var(--rs-gold);
}

.rte a,
.article-template__content a {
  color: var(--rs-gold);
  text-decoration: none;
  border-bottom: 1px solid var(--rs-gold-line);
  transition: border-color 0.2s ease-out;
}

.rte a:hover,
.article-template__content a:hover {
  border-bottom-color: var(--rs-gold);
}

.rte blockquote,
.article-template__content blockquote {
  font-family: var(--font-heading-family);
  font-style: italic;
  font-size: 1.9rem;
  border: 0;
  border-left: 3px solid var(--rs-gold);
  padding: 0.4em 0 0.4em 1.2em;
  margin: 1.6em 0;
  color: var(--rs-text-bright);
}

/* Article meta — author + date strip below the title. */
.article-template__hero-container,
.article-template__back {
  color: var(--rs-text-dim);
}

.article-template__hero-container a {
  color: var(--rs-gold);
}

/* Blog listing — card hover already covered in section 7, but pin the
   blog title color so listing headings match. */
.blog-articles__article .article-card__title,
.blog-articles__article h3 {
  font-family: var(--font-heading-family);
  color: var(--rs-text-bright);
}

/* Search empty / results header */
.template-search__header,
.template-search__no-result-text {
  color: var(--rs-text);
}

.template-search__no-result-text {
  font-family: var(--font-body-family);
  font-size: 1.6rem;
  text-align: center;
}

/* Customer / account pages — login, register, account, addresses,
   reset password. Forms inherit the input styling from section 5; this
   adds the wrapper polish. */
.customer {
  font-family: var(--font-body-family);
  color: var(--rs-text);
}

.customer h1,
.customer h2 {
  font-family: var(--font-heading-family);
  color: var(--rs-text-bright);
}

.customer .field__label,
.customer label {
  color: var(--rs-text);
  font-family: var(--font-body-family);
}

.customer a {
  color: var(--rs-gold);
}

.customer a:hover {
  color: var(--rs-gold-bright);
}

/* Full cart page (template-cart) — totals + footer. Drawer already
   covered separately in section 6. */
.template-cart .totals,
.template-cart .totals__total {
  color: var(--rs-text-bright);
  font-family: var(--font-heading-family);
}

.template-cart .totals__total-value,
.template-cart .totals__subtotal-value {
  color: var(--rs-gold-bright);
  font-family: var(--font-heading-family);
}

.template-cart .cart__checkout-button,
.template-cart .cart__update-button {
  background-color: var(--rs-gold);
  color: var(--rs-bg);
  font-weight: 700;
  letter-spacing: 0.06em;
}

.template-cart .cart__checkout-button:hover,
.template-cart .cart__update-button:hover {
  background-color: var(--rs-gold-bright);
}

.template-cart .cart__empty-text {
  font-family: var(--font-heading-family);
  color: var(--rs-text-bright);
}

/* Policy pages (privacy, terms, refund, shipping) —
   /policies/<slug>. Tighten the layout, use editorial typography. */
.shopify-policy__container {
  max-width: 800px;
  margin: 0 auto;
  padding: 60px 32px 96px;
}

.shopify-policy__title {
  text-align: center;
  margin-bottom: 48px;
  border-bottom: 1px solid var(--rs-gold-line);
  padding-bottom: 28px;
}

.shopify-policy__title h1 {
  font-size: 4rem;
}

/* 404 — center the headline and CTA, palette in. */
.404-content,
.template-404 .center {
  text-align: center;
  padding: 80px 32px;
}

.template-404 a.button,
.template-404 .button {
  background-color: var(--rs-gold);
  color: var(--rs-bg);
}

/* List collections page — heading + grid */
.collection-list .card__heading,
.list-collections .card__heading {
  font-family: var(--font-heading-family);
  color: var(--rs-text-bright);
}

/* ── 16. Hide search icon (all viewports), center logo (mobile only) ── */
.header__search,
.header__icon--search {
  display: none !important;
}

@media screen and (max-width: 749px) {
  .header__heading {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
  }
  .header__icons {
    margin-left: auto;
  }
}

/* ── Hide the duplicate Dawn inline header menu ──
   Read Sirah uses a custom JS-injected nav (rs-header-nav-links)
   in assets/nav.js. The Dawn inline menu would render the same
   items as a second visible nav block on the left. Suppress it
   so only the custom nav renders. The mobile drawer menu is
   unaffected because it has a different selector. */
.header__inline-menu {
  display: none !important;
}