/* ================================================================
   CSS Source of Truth — Letrato Rosette-Lei Arts and Crafts
   ================================================================

   HOW TO EDIT:
   Edit ONLY this file (theme/styles.css). Do NOT edit files in
   plugins/letrato-core/assets/css/ — those are generated by CI.

   HOW @split WORKS:
   Each "/* @split: <filename> */" marker starts a new domain file.
   tools/css-split.py reads this file, splits at those markers, and
   writes each chunk to assets/css/split/<filename>. It also copies
   the entire file to assets/css/styles.css (dev/editor mode).

   HOW TO ADD A NEW SPLIT FILE:
   1. Add a /* @split: newname.css */ marker at the boundary
   2. Add the path to .gitignore
   3. Add the enqueue condition in letrato-core.php
   4. Push — CI handles the rest

   STANDALONE FILES (not split from here):
   admin-order.css, product-addons.css — edited directly in the
   plugin assets folder, NOT generated from this file.

   ================================================================ */

/* @split: global.css */
/* ============================================================
   Global — Loads on every page
   Utilities, buttons, header, footer, shared patterns, hero
   ============================================================ */

/* ============================================================
   SHARED UTILITIES
   Extracted patterns used across multiple sections/pages.
   ============================================================ */

/* Section heading — Cormorant H2 (replaces 12+ identical declarations) */
.rl-section-heading {
  font-family: var(--wp--preset--font-family--cormorant-garamond);
  font-size: var(--wp--preset--font-size--4-xl);
  font-weight: 700;
  color: var(--wp--preset--color--charcoal);
  line-height: 1.3;
  margin-bottom: 12px;
}
.rl-section-heading--primary { color: var(--wp--preset--color--primary); }
.rl-section-heading--white { color: var(--wp--preset--color--white); }
.rl-section-heading--center { text-align: center; }

/* Section intro paragraph — Lato subtitle below section headings */
.rl-section-intro {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--lg);
  color: var(--wp--preset--color--gray);
  line-height: 1.8;
  margin-bottom: 32px;
}
.rl-section-intro--narrow {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* Body text — Lato paragraph (replaces 10+ identical declarations) */
.rl-body-text {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--charcoal);
  line-height: 1.8;
  margin-bottom: 16px;
}

/* Gold link — text link pattern (replaces 4+ identical declarations) */
.rl-gold-link {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 700;
  color: var(--wp--preset--color--gold);
  text-decoration: none;
}
.rl-gold-link:hover {
  color: var(--wp--preset--color--gold-dark);
}

/* Card hover lift — reusable hover effect */
.rl-card-hover {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.rl-card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* 2-column grid — image + text layout (About page sections) */
.rl-2col-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 48px;
  align-items: center;
}
@media (max-width: 767px) {
  .rl-2col-grid {
    grid-template-columns: 1fr !important;
    gap: 32px;
  }
}

/* FAQ accordion — shared details/summary pattern */
.rl-faq-accordion .wp-block-details {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  border-bottom: 1px solid var(--wp--preset--color--fog);
}
.rl-faq-accordion .wp-block-details:last-of-type { border-bottom: none; }
.rl-faq-accordion .wp-block-details summary {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--base);
  font-weight: 700;
  color: var(--wp--preset--color--charcoal);
  padding: 20px 32px 20px 0;
  cursor: pointer;
  list-style: none;
  position: relative;
}
.rl-faq-accordion .wp-block-details summary::-webkit-details-marker { display: none; }
.rl-faq-accordion .wp-block-details summary::marker { content: ""; }
.rl-faq-accordion .wp-block-details summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--wp--preset--font-size--xl);
  font-weight: 300;
  color: var(--wp--preset--color--gold);
  transition: transform 0.2s ease;
}
.rl-faq-accordion .wp-block-details[open] summary::after { content: "−"; }
.rl-faq-accordion .wp-block-details summary:hover { color: var(--wp--preset--color--gold); }
.rl-faq-accordion .wp-block-details p {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--gray);
  line-height: 1.8;
  padding-bottom: 20px;
}
.rl-faq-accordion .wp-block-details p a { color: var(--wp--preset--color--gold); text-decoration: underline; }
.rl-faq-accordion .wp-block-details p a:hover { color: var(--wp--preset--color--gold-dark); }

/* Responsive heading scale */
@media (max-width: 639px) {
  .rl-section-heading { font-size: var(--wp--preset--font-size--2-xl); }
}

/* ============================================================
   GLOBAL — Sticky Footer (footer always at page bottom)
   ============================================================ */
.wp-site-blocks {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding-bottom: 0 !important;
}
/* Account for WP admin bar (32px) when logged in */
.admin-bar .wp-site-blocks {
  min-height: calc(100vh - 32px);
}
.wp-site-blocks > footer,
.wp-site-blocks > .wp-block-template-part:last-child {
  margin-top: auto;
}

/* ============================================================
   GLOBAL — WooCommerce Mini Cart Accessibility Fix
   The mini cart drawer uses aria-hidden="true" when closed but
   contains focusable elements (buttons, links) inside. This
   causes a Lighthouse a11y failure. visibility:hidden removes
   the drawer from the tab order when closed.
   TODO: Remove this if WooCommerce fixes the issue upstream.
   ============================================================ */
.wc-block-mini-cart__drawer[aria-hidden="true"] {
  visibility: hidden;
}

/* ============================================================
   GLOBAL — Sticky Header
   WordPress template part wrapper needs position:sticky
   because the inner Group block's sticky fails inside
   .wp-site-blocks flex container.

   Hide on scroll down, reveal on scroll up via sticky-header.js.
   CSS handles base sticky + transitions, JS toggles .rl-header-hidden.
   ============================================================ */
.wp-site-blocks > header,
.wp-site-blocks > .wp-block-template-part:first-child {
  position: sticky;
  top: 0;
  z-index: 100;
  transition: transform 0.3s ease;
}
.admin-bar .wp-site-blocks > header,
.admin-bar .wp-site-blocks > .wp-block-template-part:first-child {
  top: 32px;
}
.wp-site-blocks > header.rl-header-hidden,
.wp-site-blocks > .wp-block-template-part:first-child.rl-header-hidden {
  transform: translateY(-100%);
}

/* ============================================================
   BUTTONS — Base & Variants

   IMPORTANT — Two WordPress override issues affect ALL buttons:
   1. WP preset color classes (has-*-background-color) use
      !important, so all hover backgrounds need !important.
   2. theme.json link :hover sets <a> text to gold-dark
      (#6B4F00), so all button hovers need explicit color
      with !important.
   ============================================================ */
.wp-block-button__link {
  padding: 13px 28px;
  border-radius: 5px;
  transition: all 0.2s;
}

/* Default button hover (Primary → Primary Dark) — all fill buttons get lift */
.wp-block-button__link:hover {
  background-color: var(--wp--preset--color--primary-dark) !important;
  color: var(--wp--preset--color--white) !important;
  transform: translateY(-1px);
}

/* Gold button variant (rl-btn-gold) — Fill style + class in editor */
.wp-block-button.rl-btn-gold .wp-block-button__link {
  background-color: var(--wp--preset--color--gold-button);
  color: var(--wp--preset--color--white);
}
.wp-block-button.rl-btn-gold .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--gold-button-hover) !important;
  color: var(--wp--preset--color--white) !important;
}

/* Accent/Terracotta button variant (rl-btn-accent) — Fill style + class in editor */
.wp-block-button.rl-btn-accent .wp-block-button__link {
  background-color: var(--wp--preset--color--terracotta);
  color: var(--wp--preset--color--white);
}
.wp-block-button.rl-btn-accent .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--terracotta-dark) !important;
  color: var(--wp--preset--color--white) !important;
}

/* Outline button base — enforce consistent padding with Fill buttons
   WP's outline style overrides padding; force ours back */
.wp-block-button.is-style-outline .wp-block-button__link {
  padding: 13px 28px;
}

/* Outline button on dark bg — white tint bg, gold border accent, lift on hover */
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: rgba(255, 255, 255, 0.15) !important;
  color: var(--wp--preset--color--white) !important;
  border-color: var(--wp--preset--color--gold-light) !important;
  transform: translateY(-1px);
}

/* Outline button on light bg — charcoal fill on hover
   Used on product hero (white bg). Charcoal works on both light and dark bg.
   Generic is-style-outline hover (no rl-btn-outline) still applies to
   CTA banner's "Message Us on Viber" which doesn't have this class. */
.wp-block-button.rl-btn-outline .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--charcoal) !important;
  color: var(--wp--preset--color--white) !important;
  border-color: var(--wp--preset--color--charcoal) !important;
  transform: translateY(-1px);
}

/* Outline-dark button on light bg — fills Primary on hover
   Works with or without is-style-outline */
.wp-block-button.is-style-outline.rl-btn-outline-dark .wp-block-button__link:hover,
.wp-block-button.rl-btn-outline-dark .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--primary) !important;
  color: var(--wp--preset--color--white) !important;
  border-color: var(--wp--preset--color--primary) !important;
  transform: translateY(-1px);
}

/* ============================================================
   HEADER — Base
   Background, sizing, padding. All previously inline or
   editor-set, now CSS-only.
   ============================================================ */
.rl-header {
  background-color: var(--wp--preset--color--primary);
  min-height: 70px;
  padding: 0 40px;
}

/* ============================================================
   HEADER — Logo
   Single banner SVG at all sizes. Scales down on mobile.
   ============================================================ */
.rl-logo-desktop {
  margin: 0;
}
.rl-logo-desktop img {
  height: 44px !important;
  width: auto !important;
}

/* ============================================================
   HEADER — Nav Links
   ============================================================ */
.rl-header .rl-nav .wp-block-navigation-item__content {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--wp--preset--color--white);
  opacity: 0.85;
}
.rl-header .rl-nav .wp-block-navigation-item__content {
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  transition: opacity 0.2s, border-color 0.2s;
}
.rl-header .rl-nav .wp-block-navigation-item__content:hover {
  opacity: 1;
  border-bottom-color: var(--wp--preset--color--gold-light);
}

/* Nav item spacing */
.rl-header .rl-nav .wp-block-navigation__container {
  gap: 20px;
}

/* ============================================================
   HEADER — Submenu Arrow
   ============================================================ */
.rl-header .rl-nav .wp-block-navigation__submenu-icon {
  width: 7px;
  height: 7px;
  opacity: 0.5;
  margin-left: 2px;
}
.rl-header .rl-nav .wp-block-navigation-item:hover .wp-block-navigation__submenu-icon {
  opacity: 0.8;
}

/* ============================================================
   HEADER — Submenu / Dropdown (Desktop ≥ md)
   ============================================================ */
.rl-header .rl-nav .wp-block-navigation__submenu-container {
  background-color: var(--wp--preset--color--primary-dark);
  border-radius: 0 0 5px 5px;
  padding: 8px 0;
  min-width: 180px;
}
.rl-header .rl-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  padding: 8px 20px;
}

/* ============================================================
   HEADER — Icons (Account + Mini-Cart)
   Colors handled via CSS since stripped from editor.
   ============================================================ */
.rl-header-actions {
  gap: 8px !important;
  align-items: center;
  /* !important needed: WP's .is-layout-flex > :is(*,div) { margin:0 } resets all child margins */
  margin-left: 16px !important;
}
/* Strip WooCommerce default margins/padding on icon wrappers */
.rl-header-actions .rl-account,
.rl-header-actions .rl-cart {
  margin: 0 !important;
  padding: 0 !important;
}
.rl-header .rl-account svg {
  width: 22px;
  height: 22px;
}
/* Account icon — white, strip WooCommerce default link padding */
.rl-header .rl-account,
.rl-header .rl-account a {
  color: var(--wp--preset--color--white);
}
.rl-header .rl-account a {
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
}
/* Mini-cart icon — white, strip WooCommerce default padding */
.rl-header .rl-cart .wc-block-mini-cart__button {
  padding: 0 !important;
  margin: 0 !important;
  color: var(--wp--preset--color--white);
}
.rl-header .rl-cart .wc-block-mini-cart__button svg {
  fill: var(--wp--preset--color--white);
}

/* ============================================================
   HEADER — Overlay Menu (< md hamburger)
   Slide-in from right, separators between top-level items,
   X button top-right with larger tap area.
   ============================================================ */

/* Overlay container — slide-in from right */
.rl-header .rl-nav .wp-block-navigation__responsive-container {
  transition: transform 0.3s ease, visibility 0.3s ease;
}
.rl-header .rl-nav .wp-block-navigation__responsive-container.is-menu-open {
  padding: 28px;
  padding-top: 60px;
  background-color: var(--wp--preset--color--primary-dark);
  color: var(--wp--preset--color--white);
  animation: rl-slide-in 0.3s ease forwards;
}
/* Strip WP's default top padding on overlay content wrapper */
.rl-header .rl-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  padding-top: 0;
}
/* Reset auto-margin that right-aligns nav on desktop — overlay should be full-width */
.rl-header .rl-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  margin-left: 0;
}
@keyframes rl-slide-in {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* Top-level items in overlay */
.rl-header .rl-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 12px 0;
  opacity: 1;
  color: var(--wp--preset--color--white);
  transition: opacity 0.2s, transform 0.2s;
}
.rl-header .rl-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
  opacity: 0.8;
  transform: translateX(4px);
}

/* Separator between top-level nav items
   Note: WP wraps content in __responsive-close > __responsive-dialog
   before __responsive-container-content, so no direct child (>) from
   __responsive-container. Target top-level items via
   __container > li (the <ul> direct children). */
.rl-header .rl-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 4px;
  margin-bottom: 4px;
}
.rl-header .rl-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:last-child {
  border-bottom: none;
}

/* Submenu items in overlay — indented, smaller, normal case */
.rl-header .rl-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  background: transparent;
  padding: 0 0 8px 16px;
  border-radius: 0;
  border-left: 2px solid var(--wp--preset--color--gold);
  margin-left: 4px;
  margin-top: 4px;
}
.rl-header .rl-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  padding: 6px 0;
  opacity: 0.75;
}
.rl-header .rl-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  opacity: 1;
}

/* Hide submenu arrow in overlay (submenus already expanded) */
.rl-header .rl-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
  display: none;
}

/* Hamburger icon — white (color stripped from editor) */
.rl-header .rl-nav .wp-block-navigation__responsive-container-open svg {
  fill: var(--wp--preset--color--white);
}
/* Hide hamburger open button when overlay is active */
.rl-header .rl-nav:has(.is-menu-open) .wp-block-navigation__responsive-container-open {
  display: none;
}

/* Close button — white, moved down from edge, larger tap area */
.rl-header .rl-nav .wp-block-navigation__responsive-container-close {
  position: absolute;
  top: 24px;
  right: 24px;
  padding: 8px;
  opacity: 0.7;
  transition: opacity 0.2s;
}
.rl-header .rl-nav .wp-block-navigation__responsive-container-close:hover {
  opacity: 1;
}
.rl-header .rl-nav .wp-block-navigation__responsive-container-close svg {
  fill: var(--wp--preset--color--white);
  width: 20px;
  height: 20px;
}

/* ============================================================
   HEADER — Responsive
   < sm (640):  Logo | hamburger | account | cart
   sm–md:       full nav visible, compact (tighter gap/padding)
   md–xl:       full nav visible, right-aligned, normal spacing
   ≥ xl (1280): nav centers via CSS grid, icons stay right
   ============================================================ */

/* --- Below sm (< 640px): hamburger + account + cart --- */
@media (max-width: 639px) {
  /* Scale down banner logo for mobile */
  .rl-logo-desktop img {
    height: 36px !important;
  }

  /* Reduce header padding and height */
  .rl-header {
    padding-left: 16px;
    padding-right: 16px;
    min-height: 56px;
    gap: 8px !important;
  }

  /* Hide horizontal nav, show hamburger */
  .rl-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none !important;
  }
  .rl-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex !important;
  }

  /* Strip extra padding/margin on hamburger button for consistent spacing */
  .rl-header .rl-nav .wp-block-navigation__responsive-container-open {
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Push hamburger + icons to far right.
     margin-left:auto on .rl-nav pushes it AND everything
     after it (header-actions) to the right edge.
     HTML order: nav(hamburger) → account → cart. */
  .rl-header .rl-nav {
    margin-left: auto;
  }

  /* Remove the 16px separator margin — use header gap (8px) for even spacing */
  .rl-header-actions {
    margin-left: 0 !important;
  }
}

/* --- sm to md (640–767px): full nav visible, compact fit --- */
@media (min-width: 640px) and (max-width: 767px) {
  /* Force show horizontal nav, hide hamburger */
  .rl-header .wp-block-navigation__responsive-container-open {
    display: none !important;
  }
  .rl-header .wp-block-navigation__responsive-container {
    display: flex !important;
  }

  /* Tighter padding to fit everything */
  .rl-header {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Tighter nav gap */
  .rl-header .rl-nav .wp-block-navigation__container {
    gap: 12px;
  }

  /* Keep nav + icons clustered on the right */
  .rl-header .rl-nav {
    margin-left: auto;
  }
}

/* --- md and up (≥ 768px): full nav visible, right-aligned --- */
@media (min-width: 768px) {
  /* Force show horizontal nav, hide hamburger */
  .rl-header .wp-block-navigation__responsive-container-open {
    display: none !important;
  }
  .rl-header .wp-block-navigation__responsive-container {
    display: flex !important;
  }

  /* Keep nav + icons clustered on the right */
  .rl-header .rl-nav {
    margin-left: auto;
  }
}

/* --- xl and up (≥ 1280px): center nav via CSS grid --- */
@media (min-width: 1280px) {
  .rl-header {
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    /* Content cap: 1200px */
    padding-left: max(40px, calc((100vw - 1200px) / 2));
    padding-right: max(40px, calc((100vw - 1200px) / 2));
  }

  /* Center the nav within the middle column */
  .rl-header .rl-nav {
    justify-self: center;
    margin-left: 0;
  }

  /* Icons stay right-aligned */
  .rl-header .rl-header-actions {
    justify-self: end;
  }
}

/* ============================================================
   SHARED PATTERN — Icon Grid (.rl-icon-grid)
   Reusable 3-col grid of emoji icon cards with circle icons.
   Used by: Homepage "Features", Rosette Lei "What is", etc.
   Override icon circle bg-color per section based on section bg.
   ============================================================ */
.rl-icon-grid.wp-block-columns {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
}
.rl-icon-card {
  text-align: center;
  padding: 24px 16px;
}
.rl-icon-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  font-size: 24px;
  color: var(--wp--preset--color--primary);
  background-color: var(--wp--preset--color--cream);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.rl-icon-card h3 {
  font-family: var(--wp--preset--font-family--cormorant-garamond);
  font-size: var(--wp--preset--font-size--xl);
  font-weight: 600;
  color: var(--wp--preset--color--charcoal);
  margin-bottom: 8px;
}
.rl-icon-card h4 {
  font-family: var(--wp--preset--font-family--cormorant-garamond);
  font-size: var(--wp--preset--font-size--lg);
  font-weight: 600;
  color: var(--wp--preset--color--charcoal);
  margin-bottom: 6px;
}
.rl-icon-card p:not(.rl-icon-circle) {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--gray);
  line-height: 1.6;
}

/* ============================================================
   SHARED PATTERN — Occasions (.rl-occasions)
   Reusable occasion card grid (Cover block cards with overlay).
   Used by: Homepage, Rosette Lei, Rosette Sash, etc.
   Unsynced pattern — text/images differ per page.
   ============================================================ */
/* Padding + bg via .rl-section.rl-section--white.rl-section--centered */
/* Section heading via .rl-section-heading */
/* Section subtitle via .rl-section-intro */
/* 3-col grid — CSS Grid on single Columns block with 6 columns */
.rl-occasions .rl-occasions-grid.wp-block-columns {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
}
/* Occasion card (Cover block) — portrait aspect ratio, rounded corners */
.rl-occasion-card {
  aspect-ratio: 3 / 4;
  min-height: 0 !important;
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--wp--preset--color--fog); /* placeholder until images added */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.rl-occasion-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
/* Gradient overlay — bottom-heavy for text readability.
   opacity:1 !important needed: WP resets dimRatio to 50 (opacity:0.5)
   when images are added to Cover blocks, making the gradient too faint.
   Force full opacity so text is always readable over images. */
.rl-occasion-card .wp-block-cover__background {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.1) 60%) !important;
  opacity: 1 !important;
}
/* Content container — push text to bottom */
.rl-occasion-card .wp-block-cover__inner-container {
  display: flex !important;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  height: 100%;
  text-align: left;
}
/* Occasion title */
.rl-occasion-card h3 {
  font-family: var(--wp--preset--font-family--cormorant-garamond);
  font-size: var(--wp--preset--font-size--xl);
  font-weight: 600;
  color: var(--wp--preset--color--white);
  margin-bottom: 4px;
}
/* Occasion description */
.rl-occasion-card p {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--sm); /* Intentional: short overlay text on image cards */
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
}

/* ============================================================
   PATTERN — Trust Bar + Client Logos (.rl-trust-bar)
   SYNCED PATTERN — appears on Homepage, About, product pages.
   Cream background, centered text, grayscale logo row.
   ============================================================ */
.rl-trust-bar {
  background-color: var(--wp--preset--color--cream);
  padding: 48px 40px;
  /* Content cap: 1200px */
  padding-left: max(40px, calc((100vw - 1200px) / 2));
  padding-right: max(40px, calc((100vw - 1200px) / 2));
  text-align: center;
}
/* Section heading */
.rl-trust-bar > h3 {
  font-family: var(--wp--preset--font-family--cormorant-garamond);
  font-size: var(--wp--preset--font-size--2-xl);
  font-weight: 600;
  color: var(--wp--preset--color--charcoal);
  margin-bottom: 12px;
}
/* Description text */
.rl-trust-bar > p {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--gray);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.8;
}
.rl-trust-bar > p strong {
  color: var(--wp--preset--color--charcoal);
}
/* Client logos row */
.rl-trust-bar .rl-trust-logos {
  margin-top: 32px;
  gap: 32px !important;
}
/* Individual logo — grayscale, colorize on hover */
.rl-trust-bar .rl-client-logo {
  margin: 0;
}
.rl-trust-bar .rl-client-logo img {
  max-height: 48px;
  width: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.5;
  transition: filter 0.3s ease, opacity 0.3s ease;
}
.rl-trust-bar .rl-client-logo img:hover {
  filter: grayscale(0%);
  opacity: 1;
}

/* ============================================================
   PATTERN — CTA Banner (.rl-cta-banner)
   SYNCED PATTERN — appears on Homepage, About, Contact,
   How to Order, FAQ, product pages, Blog.
   Dark gradient background, centered text, 2 buttons.
   ============================================================ */
.rl-cta-banner {
  background: linear-gradient(135deg, var(--wp--preset--color--primary-dark), var(--wp--preset--color--primary), #3a6555);
  padding: 64px 40px;
  /* Content cap: 1200px */
  padding-left: max(40px, calc((100vw - 1200px) / 2));
  padding-right: max(40px, calc((100vw - 1200px) / 2));
  text-align: center;
}
/* Heading */
.rl-cta-banner h2 {
  font-family: var(--wp--preset--font-family--cormorant-garamond);
  font-size: var(--wp--preset--font-size--4-xl);
  color: var(--wp--preset--color--white);
  margin-bottom: 12px;
}
/* Subtitle */
.rl-cta-banner > p {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--lg);
  color: rgba(255, 255, 255, 0.85);
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 24px;
  line-height: 1.8;
}
/* Button group */
.rl-cta-banner .rl-cta-buttons {
  gap: 12px;
  margin-top: 20px;
}
/* Outline button on dark bg — white border + text */
.rl-cta-banner .is-style-outline .wp-block-button__link {
  border-color: var(--wp--preset--color--white);
  color: var(--wp--preset--color--white) !important;
}

/* ============================================================
   SHARED PATTERNS — Responsive (< 640px)
   Extracted from homepage responsive — applies to shared
   patterns regardless of which page they appear on.
   ============================================================ */
@media (max-width: 639px) {
  /* Icon grid — 1-col stack */
  .rl-icon-grid.wp-block-columns {
    grid-template-columns: 1fr !important;
  }

  /* Occasions — 1-col stack, landscape cards */
  /* Mobile padding handled by .rl-section responsive */
  .rl-occasions .rl-occasions-grid.wp-block-columns {
    grid-template-columns: 1fr !important;
  }
  .rl-occasion-card {
    aspect-ratio: 4 / 3;
  }

  /* Trust Bar — reduced padding */
  .rl-trust-bar {
    padding: 32px 20px;
  }
  .rl-trust-bar .rl-trust-logos {
    gap: 20px !important;
  }
  .rl-trust-bar .rl-client-logo img {
    max-height: 36px;
  }

  /* CTA Banner — reduced padding, stacked buttons */
  .rl-cta-banner {
    padding: 40px 20px;
  }
  .rl-cta-banner .rl-cta-buttons {
    flex-direction: column;
    align-items: center;
  }
  .rl-cta-banner .rl-cta-buttons .wp-block-button {
    width: 100%;
    max-width: 280px;
  }
  .rl-cta-banner .rl-cta-buttons .wp-block-button__link {
    width: 100%;
    text-align: center;
  }
}

/* ============================================================
   SHARED PATTERNS — Responsive (≥ 640px)
   2-col intermediate breakpoint for icon-grid and occasions.
   ============================================================ */
@media (min-width: 640px) {
  .rl-icon-grid.wp-block-columns {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .rl-occasions .rl-occasions-grid.wp-block-columns {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ============================================================
   SHARED PATTERNS — Responsive (≥ 1024px)
   3-col desktop for occasions (icon-grid already 3-col in base).
   ============================================================ */
@media (min-width: 1024px) {
  .rl-icon-grid.wp-block-columns {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .rl-occasions .rl-occasions-grid.wp-block-columns {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ============================================================
   FOOTER — Base
   Background, text color, padding, gap. All previously
   editor-set, now CSS-only.
   ============================================================ */
.rl-footer {
  background-color: var(--wp--preset--color--primary-dark);
  color: var(--wp--preset--color--white);
  padding: 40px;
  gap: 32px;
  /* Content cap — same 1200px pattern as header */
  padding-left: max(40px, calc((100vw - 1200px) / 2));
  padding-right: max(40px, calc((100vw - 1200px) / 2));
}

/* All links in footer — white */
.rl-footer a {
  color: var(--wp--preset--color--white);
}

/* ============================================================
   FOOTER — Column Headings (H4)
   Font, color, weight previously set in editor per block.
   ============================================================ */
.rl-footer h4 {
  font-family: var(--wp--preset--font-family--cormorant-garamond);
  font-size: var(--wp--preset--font-size--lg);
  font-style: normal;
  font-weight: 600;
  color: var(--wp--preset--color--gold-light);
  margin-bottom: 12px;
}

/* ============================================================
   FOOTER — Brand Column
   ============================================================ */
/* Brand heading slightly larger than other footer columns */
.rl-footer-brand h4 {
  font-size: var(--wp--preset--font-size--xl);
}
.rl-footer-brand {
  padding-right: 24px !important;
}
.rl-footer-brand p {
  font-size: var(--wp--preset--font-size--sm);
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.6;
  margin-top: 8px;
}

/* ============================================================
   FOOTER — Social Icons (WP Social Icons block)
   Icon + background colors previously set in editor.
   NOTE: Brave Shield blocks these icons — expected behavior,
   not a CSS bug. Works in all other browsers.
   ============================================================ */
.rl-footer .rl-social {
  margin-top: 16px;
  gap: 8px !important;
}
.rl-footer .rl-social .wp-social-link {
  background-color: var(--wp--preset--color--primary);
  transition: background-color 0.2s, transform 0.2s;
}
.rl-footer .rl-social .wp-social-link a {
  color: var(--wp--preset--color--white);
}
.rl-footer .rl-social .wp-social-link svg {
  fill: var(--wp--preset--color--white);
}
.rl-footer .rl-social .wp-social-link:hover {
  background-color: var(--wp--preset--color--gold-light) !important;
  transform: translateY(-2px);
}

/* ============================================================
   FOOTER — Link Columns (Products, Company, Legal)
   ============================================================ */

/* Remove default list bullets and padding */
.rl-footer-links ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.rl-footer-links li {
  margin-bottom: 8px;
}

/* Link styling */
.rl-footer-links a {
  font-size: var(--wp--preset--font-size--sm);
  color: rgba(255, 255, 255, 0.6) !important;
  text-decoration: none;
  transition: color 0.2s;
}
.rl-footer-links a:hover {
  color: var(--wp--preset--color--gold-light) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============================================================
   FOOTER — Copyright Bar
   ============================================================ */
.rl-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 24px;
  margin-top: 8px;
}
.rl-footer-bottom p {
  font-size: var(--wp--preset--font-size--sm);
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  margin: 0;
}

/* ============================================================
   FOOTER — Responsive
   ≥ md (768px+):  Brand(36%) | Link(18%) | Link(18%) | Link(18%)
   < md (< 768px): Brand(100%), then 3 links in a row (33% each)

   Override WP Columns stacking at 781px with !important.
   ============================================================ */

/* --- ≥ md: force 4-col layout --- */
@media (min-width: 768px) {
  .rl-footer .rl-footer-grid.wp-block-columns {
    flex-wrap: nowrap !important;
  }
  .rl-footer .rl-footer-grid .rl-footer-brand.wp-block-column {
    flex-basis: 36% !important;
    flex-grow: 0 !important;
  }
  .rl-footer .rl-footer-grid .rl-footer-links.wp-block-column {
    flex-basis: 18% !important;
    flex-grow: 1 !important;
  }
}

/* --- Below md (< 768px): brand full-width, links 3-col row --- */
@media (max-width: 767px) {
  .rl-footer {
    padding: 24px 16px;
  }

  .rl-footer .rl-footer-grid.wp-block-columns {
    flex-wrap: wrap !important;
    gap: 24px;
  }

  /* Brand spans full width */
  .rl-footer .rl-footer-grid .rl-footer-brand.wp-block-column {
    flex-basis: 100% !important;
    flex-grow: 0 !important;
  }

  /* Link columns in a row, equal thirds */
  .rl-footer .rl-footer-grid .rl-footer-links.wp-block-column {
    flex-basis: calc(33.33% - 16px) !important;
    flex-grow: 0 !important;
  }
}

/* ======================== Shared Sections ======================== */

/* ============================================================
   SHARED — Hero Banner (.rl-hero)
   Cover block, full width, centered content with overlay.
   Used on: Homepage, About Us, Rosette Lei, Sash, Ribbon,
   Money Lei. Overlay controlled via CSS (not WP block attrs).
   Page-specific overlays (e.g. About green gradient) use a
   secondary class alongside .rl-hero to override.
   ============================================================ */
.rl-hero {
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 40px;
}
/* Dark overlay — CSS-controlled, overrides WP Cover defaults */
.rl-hero .wp-block-cover__background {
  background: rgba(0, 0, 0, 0.55) !important;
  opacity: 1 !important;
}
.rl-hero .wp-block-cover__inner-container {
  max-width: 700px;
  text-align: center;
}
/* Hero H1 */
.rl-hero h1 {
  font-family: var(--wp--preset--font-family--cormorant-garamond);
  font-size: var(--wp--preset--font-size--5-xl);
  font-weight: 700;
  color: var(--wp--preset--color--white);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  margin-bottom: 12px;
}
/* Hero subtitle */
.rl-hero p {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--lg);
  color: var(--wp--preset--color--white);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  margin-bottom: 16px;
}
/* Pricing/detail line — slightly smaller, subtle */
.rl-hero .rl-hero-pricing {
  font-size: var(--wp--preset--font-size--base);
  opacity: 0.9;
}
/* Hero button group */
.rl-hero .wp-block-buttons {
  margin-top: 20px;
  gap: 12px;
}
/* Hero responsive — subtitle font size */
@media (max-width: 767px) {
  .rl-hero p {
    font-size: var(--wp--preset--font-size--base);
  }
}
/* Hero responsive — shorter, tighter, buttons stack */
@media (max-width: 639px) {
  .rl-hero {
    min-height: 360px;
    padding: 48px 20px;
  }
  .rl-hero .wp-block-buttons {
    flex-direction: column;
    align-items: stretch;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
  }
  .rl-hero .wp-block-button {
    width: 100%;
  }
  .rl-hero .wp-block-button__link {
    width: 100%;
    text-align: center;
  }
}

/* ============================================================
   BASE SECTION UTILITIES
   Content-capped section with standard padding.
   Use as: class="rl-section rl-section--cream rl-section--centered"
   New pages use base classes; existing pages keep their own selectors.
   ============================================================ */
.rl-section {
  padding: 80px 40px;
  padding-left: max(40px, calc((100vw - 1200px) / 2));
  padding-right: max(40px, calc((100vw - 1200px) / 2));
}
.rl-section--cream { background-color: var(--wp--preset--color--cream); }
.rl-section--white { background-color: var(--wp--preset--color--white); }
.rl-section--centered { text-align: center; }
.rl-section--sm { padding-top: 48px; padding-bottom: 48px; }
.rl-section--narrow > * { max-width: 800px; margin-left: auto; margin-right: auto; }
/* Content spacing inside narrow/text-heavy sections (blockGap is 0) */
.rl-section--narrow h2 { margin-bottom: 16px; }
.rl-section--narrow h3 { margin-top: 24px; margin-bottom: 12px; }
.rl-section--narrow p { margin-bottom: 16px; }
.rl-section--narrow p:last-child { margin-bottom: 0; }

@media (max-width: 639px) {
  .rl-section { padding: 48px 20px; }
  .rl-section--sm { padding: 32px 20px; }
}

/* ============================================================
   PAGE HEADER (.rl-page-header)
   Primary green bg, white centered text. Used on all subpages.
   ============================================================ */
.rl-page-header {
  background-color: var(--wp--preset--color--primary);
  padding: 48px 40px;
  padding-left: max(40px, calc((100vw - 1200px) / 2));
  padding-right: max(40px, calc((100vw - 1200px) / 2));
  text-align: center;
}
.rl-page-header h1 {
  font-family: var(--wp--preset--font-family--cormorant-garamond);
  font-size: var(--wp--preset--font-size--4-xl);
  font-weight: 700;
  color: var(--wp--preset--color--white);
  line-height: 1.3;
  margin: 0;
}
.rl-page-header p {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--base);
  color: rgba(255, 255, 255, 0.85);
  max-width: 640px;
  margin: 8px auto 0;
  line-height: 1.6;
}
.rl-page-header .rl-page-header-date {
  font-size: var(--wp--preset--font-size--sm);
  color: rgba(255, 255, 255, 0.5);
  margin-top: 4px;
}

@media (max-width: 639px) {
  .rl-page-header { padding: 32px 20px; }
  .rl-page-header h1 { font-size: var(--wp--preset--font-size--2-xl); }
}
/* @split: homepage.css */
/* ============================================================
   Homepage — Loads only on the front page
   ============================================================ */

/* ============================================================
   HOMEPAGE — Intro / Modern Filipino Lei (.rl-home-intro)
   Cream background, 2-col layout (image + text).
   ============================================================ */
/* Padding + bg via .rl-section.rl-section--cream */
/* 2-col grid — capped at contentSize (960px) so columns
   stay proportional on wide screens instead of stretching */
.rl-home-intro .rl-home-intro-grid {
  gap: 24px !important;
  align-items: center !important;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}
/* Image — rounded corners, subtle shadow, height-capped to prevent
   section from stretching too tall on wide screens */
.rl-home-intro .rl-home-intro-img img {
  border-radius: 5px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  max-height: 450px;
  object-fit: cover;
  width: 100%;
}
.rl-home-intro .rl-home-intro-img {
  margin: 0;
}
/* Heading via .rl-section-heading utility */
/* Text column */
.rl-home-intro p {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--charcoal);
  line-height: 1.8;
  margin-bottom: 24px;
}
/* Outline-dark button border color (matches primary) */
.rl-home-intro .rl-btn-outline-dark .wp-block-button__link {
  border-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--primary);
}

/* ============================================================
   HOMEPAGE — Products Grid (.rl-home-products)
   White background, 4-col cards (2-col on mobile).
   Each card: image (3:4 portrait), H4, description, gold link.
   ============================================================ */
/* Padding + bg via .rl-section.rl-section--white.rl-section--centered */
/* Section heading via .rl-section-heading */
/* Section subtitle via .rl-section-intro */
/* 4-col grid */
.rl-home-products .rl-home-products-grid {
  gap: 12px !important;
}
/* Product card — each column, clickable via stretched link
   Flex column ensures equal-height cards with link pinned to bottom.
   border-box required: WP defaults to content-box, causing 16px padding
   to be ADDED to flex-basis width — breaks 2-col layout calculation. */
.rl-home-products .rl-home-product-card {
  text-align: left;
  position: relative;
  cursor: pointer;
  padding: 16px;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
/* Push "Shop →" link to the bottom of the card regardless of description length */
.rl-home-products .rl-home-product-card .rl-home-product-link {
  margin-top: auto !important;
}
.rl-home-products .rl-home-product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
/* Stretch link to cover entire card */
.rl-home-products .rl-home-product-card .rl-home-product-link a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
/* Product image — 3:4 portrait aspect ratio, rounded corners */
.rl-home-products .rl-home-product-card .rl-home-product-img {
  margin: 0 0 16px 0;
}
.rl-home-products .rl-home-product-card .rl-home-product-img img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
  width: 100%;
  border-radius: 5px;
}
/* Product title */
.rl-home-products .rl-home-product-card h3 {
  font-family: var(--wp--preset--font-family--cormorant-garamond);
  font-size: var(--wp--preset--font-size--xl);
  font-weight: 600;
  color: var(--wp--preset--color--charcoal);
  margin-bottom: 8px;
}
/* Product description */
.rl-home-products .rl-home-product-card p {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--gray);
  line-height: 1.6;
  margin-bottom: 12px;
}
/* Gold "Shop →" link */
.rl-home-products .rl-home-product-card .rl-home-product-link a {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 600;
  color: var(--wp--preset--color--gold) !important;
  text-decoration: none;
  transition: color 0.2s;
}
.rl-home-products .rl-home-product-card .rl-home-product-link a:hover {
  color: var(--wp--preset--color--gold-dark) !important;
}

/* ============================================================
   HOMEPAGE — Features / What Sets Us Apart (.rl-home-features)
   Cream background. Uses shared .rl-icon-grid pattern.
   ============================================================ */
/* Padding + bg via .rl-section.rl-section--cream.rl-section--centered */
/* Section heading via .rl-section-heading — keep 32px gap before icon grid */
.rl-home-features > .rl-section-heading {
  margin-bottom: 32px;
}
/* White icon circles on cream background (override shared default) */
.rl-home-features .rl-icon-circle {
  background-color: var(--wp--preset--color--white);
}

/* ============================================================
   HOMEPAGE — Responsive
   ============================================================ */

/* Mobile padding for intro/products/features handled by .rl-section responsive */

/* --- Below md (< 768px): products 2-col, full-width cards ---
   Must override WP's hardcoded 781px stacking rule:
   .wp-block-column:not(:only-child) { flex-basis: 100% !important }
   Our higher specificity (4 classes) wins over WP's (2 classes). */
@media (max-width: 1023px) {
  /* Override WP's flex layout with CSS Grid for reliable 2-col.
     Grid ignores all flex-basis/flex-wrap conflicts with WP. */
  .rl-home-products .rl-home-products-grid.wp-block-columns {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .rl-home-products .rl-home-products-grid .rl-home-product-card.wp-block-column {
    max-width: 100% !important;
  }
}

/* --- Very small screens (< 400px): products 1-col, overlay card --- */
@media (max-width: 399px) {
  /* Override the 2-col grid from the 1023px rule to 1-col */
  .rl-home-products .rl-home-products-grid.wp-block-columns {
    grid-template-columns: 1fr !important;
  }
  .rl-home-products .rl-home-products-grid .rl-home-product-card.wp-block-column {
    max-width: 100% !important;
    position: relative;
    padding: 0;
  }
  /* Image fills the entire card */
  .rl-home-products .rl-home-product-card .rl-home-product-img {
    margin: 0 !important;
  }
  .rl-home-products .rl-home-product-card .rl-home-product-img img {
    aspect-ratio: 4 / 5 !important;
    border-radius: 8px;
  }
  /* Text overlay container — gradient on the image via ::after */
  .rl-home-products .rl-home-product-card .rl-home-product-img::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.3) 50%, transparent 100%);
    border-radius: 0 0 8px 8px;
    pointer-events: none;
    z-index: 1;
  }
  /* Position text over the image at bottom */
  .rl-home-products .rl-home-product-card h3,
  .rl-home-products .rl-home-product-card p:not(.rl-home-product-link),
  .rl-home-products .rl-home-product-card .rl-home-product-link {
    position: absolute;
    left: 16px;
    right: 16px;
    z-index: 2;
    color: var(--wp--preset--color--white);
  }
  .rl-home-products .rl-home-product-card h3 {
    bottom: 84px;
    color: var(--wp--preset--color--white);
    font-size: var(--wp--preset--font-size--xl);
  }
  .rl-home-products .rl-home-product-card p:not(.rl-home-product-link) {
    bottom: 46px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
    line-height: 1.4;
    margin-bottom: 0;
    max-height: 34px;
    overflow: hidden;
  }
  .rl-home-products .rl-home-product-card .rl-home-product-link {
    bottom: 16px;
  }
  .rl-home-products .rl-home-product-card .rl-home-product-link a {
    color: var(--wp--preset--color--gold-light) !important;
  }
}

/* --- ≥ md (768px): about 2-col --- */
@media (min-width: 768px) {
  .rl-home-intro .rl-home-intro-grid.wp-block-columns {
    flex-wrap: nowrap !important;
  }
  .rl-home-intro .rl-home-intro-grid .wp-block-column {
    flex-basis: 50% !important;
  }
}

/* --- ≥ lg (1024px): products 4-col --- */
@media (min-width: 1024px) {
  .rl-home-products .rl-home-products-grid.wp-block-columns {
    flex-wrap: nowrap !important;
  }
  .rl-home-products .rl-home-products-grid .rl-home-product-card.wp-block-column {
    flex-basis: 25% !important;
    max-width: 25% !important;
  }
}
/* @split: product.css */
/* ============================================================
   Product — Marketing pages + Single product WC template
   Loads on: product pages, single product
   ============================================================ */

/* ============================================================
   SHARED — Product Hero (.rl-product-hero)
   White background. 2-col layout: image gallery left, product info right.
   Used on all product marketing pages (Rosette Lei, Sash, Ribbon, Money Lei).
   Desktop: 55%/1fr grid. Mobile: stacks (image first).
   ============================================================ */
.rl-product-hero {
  background-color: var(--wp--preset--color--white);
  padding: 40px 40px 60px;
  padding-left: max(40px, calc((100vw - 1200px) / 2));
  padding-right: max(40px, calc((100vw - 1200px) / 2));
}
/* 3-child grid: heading (col 2, row 1), gallery (col 1, rows 1–2), details (col 2, row 2)
   On mobile: 1 column — heading → gallery → details */
.rl-product-hero .rl-product-hero-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: 0 40px;
  align-items: start;
}
.rl-product-hero .rl-product-hero-heading {
  grid-column: 2;
  grid-row: 1;
}
.rl-product-hero .rl-product-hero-gallery {
  grid-column: 1;
  grid-row: 1 / -1;
  min-width: 0; /* Prevent image from pushing grid column wider */
}
.rl-product-hero .rl-product-hero-details {
  grid-column: 2;
  grid-row: 2;
}
/* Before JS: show first image as placeholder, hide the rest.
   Reserve thumb column space to prevent layout shift when slider loads.
   JS replaces the gallery with the slider via replaceWith(). */
.rl-product-hero .rl-product-hero-gallery .wp-block-gallery {
  display: flex !important;
  gap: 12px;
  overflow: hidden;
}
/* Placeholder thumb strip — skeleton shimmer where thumbs will appear */
.rl-product-hero .rl-product-hero-gallery .wp-block-gallery::before {
  content: '';
  width: 72px;
  min-width: 72px;
  border-radius: 5px;
  background: linear-gradient(
    110deg,
    var(--wp--preset--color--fog) 30%,
    #f0ece7 50%,
    var(--wp--preset--color--fog) 70%
  );
  background-size: 200% 100%;
  animation: rl-shimmer 1.5s ease-in-out infinite;
}
@keyframes rl-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.rl-product-hero .rl-product-hero-gallery .wp-block-gallery .wp-block-image:not(:first-child) {
  display: none !important;
}
.rl-product-hero .rl-product-hero-gallery .wp-block-gallery .wp-block-image:first-child {
  flex: 1;
  min-width: 0;
}
.rl-product-hero .rl-product-hero-gallery .wp-block-gallery .wp-block-image:first-child img {
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 5px;
}
/* JS-created slider — main image sets height, thumbs absolute-positioned left */
.rl-product-hero .rl-product-hero-slider {
  position: relative;
  padding-left: 84px; /* 72px thumb + 12px gap */
}
/* Vertical thumbnail column — absolute to match main image height */
.rl-product-hero .rl-product-hero-thumbs {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: 72px;
  gap: 4px;
  align-items: center;
}
/* Scrollable thumbnail inner container */
.rl-product-hero .rl-product-hero-thumbs-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  scrollbar-width: none;
}
.rl-product-hero .rl-product-hero-thumbs-inner::-webkit-scrollbar {
  display: none;
}
/* Drag cursor — grab while idle, grabbing while dragging */
.rl-product-hero .rl-product-hero-thumbs-inner {
  cursor: grab;
}
.rl-product-hero .rl-product-hero-thumbs-inner.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}
/* Fade edges to hint at overflow content — vertical (desktop, >= 1024px) */
.rl-product-hero .rl-product-hero-thumbs-inner.has-overflow-end:not(.has-overflow-start) {
  mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}
.rl-product-hero .rl-product-hero-thumbs-inner.has-overflow-start:not(.has-overflow-end) {
  mask-image: linear-gradient(to bottom, transparent 0%, black 20%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 20%);
}
.rl-product-hero .rl-product-hero-thumbs-inner.has-overflow-start.has-overflow-end {
  mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
}
/* Prevent browser native image drag from hijacking custom drag scroll */
.rl-product-hero .rl-product-hero-thumbs-inner img {
  -webkit-user-drag: none;
  user-select: none;
}
.rl-product-hero .rl-product-hero-thumbs img {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 5px;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s ease, box-shadow 0.2s ease;
}
.rl-product-hero .rl-product-hero-thumbs img:hover {
  opacity: 0.9;
}
.rl-product-hero .rl-product-hero-thumbs img.active {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--wp--preset--color--gold);
}
/* Thumbnail scroll arrows (up/down) */
.rl-thumb-arrow {
  width: 72px;
  height: 24px;
  background: var(--wp--preset--color--fog);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  color: var(--wp--preset--color--charcoal);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s ease;
}
.rl-thumb-arrow:hover {
  background: var(--wp--preset--color--gray);
  color: var(--wp--preset--color--white);
}
.rl-thumb-arrow.hidden {
  visibility: hidden;
}
/* Main image — determines slider height, thumbs match via absolute positioning */
.rl-product-hero .rl-product-hero-main-img {
  position: relative;
  border-radius: 5px;
  overflow: hidden;
  max-width: 100%;
}
.rl-product-hero .rl-product-hero-main-img > img {
  width: 100%;
  display: block;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
/* Main image prev/next arrows */
.rl-gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.85);
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: var(--wp--preset--color--charcoal);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background 0.2s ease;
}
.rl-gallery-arrow:hover {
  background: rgba(255, 255, 255, 1);
}
.rl-gallery-prev { left: 12px; }
.rl-gallery-next { right: 12px; }
/* Details column — description, features, buttons, meta */
.rl-product-hero .rl-product-hero-details {
  display: flex;
  flex-direction: column;
}
/* Product title (H1) — in heading group */
.rl-product-hero .rl-product-hero-heading h1 {
  font-family: var(--wp--preset--font-family--cormorant-garamond);
  font-size: var(--wp--preset--font-size--4-xl);
  font-weight: 700;
  color: var(--wp--preset--color--charcoal);
  margin-bottom: 8px;
  line-height: 1.2;
}
/* Price */
.rl-product-hero .rl-product-hero-price {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--2-xl);
  font-weight: 700;
  color: var(--wp--preset--color--gold) !important;
  margin-bottom: 16px;
}
/* Short description */
.rl-product-hero .rl-product-hero-details > p:not([class]) {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--gray);
  line-height: 1.8;
  margin-bottom: 20px;
}
/* Features info box — bordered top/bottom */
.rl-product-hero .rl-product-hero-features {
  border-top: 1px solid var(--wp--preset--color--fog);
  border-bottom: 1px solid var(--wp--preset--color--fog);
  padding: 20px 0;
  margin-bottom: 24px;
}
.rl-product-hero .rl-product-hero-features p {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--charcoal);
  line-height: 1.8;
  margin-bottom: 4px;
}
.rl-product-hero .rl-product-hero-features p:last-child {
  margin-bottom: 0;
}
/* Full-width buttons — extra spacing from features box */
.rl-product-hero .rl-product-hero-details > .wp-block-buttons {
  margin-bottom: 16px;
  gap: 12px;
}
.rl-product-hero .rl-product-hero-details > .wp-block-buttons .wp-block-button {
  width: 100%;
}
.rl-product-hero .rl-product-hero-details > .wp-block-buttons .wp-block-button__link {
  width: 100%;
  text-align: center;
  justify-content: center;
}
/* Meta info (category) */
.rl-product-hero .rl-product-hero-meta {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--gray) !important;
  margin-top: 8px;
}

/* --- Product Hero Responsive --- */
/* Below lg (< 1024px): tighter gap + slider switches to horizontal thumbs below main image */
@media (max-width: 1023px) {
  .rl-product-hero .rl-product-hero-grid {
    gap: 0 24px;
  }
  /* Gallery placeholder: swap vertical strip for horizontal strip below image */
  .rl-product-hero .rl-product-hero-gallery .wp-block-gallery {
    flex-direction: column;
    gap: 8px;
  }
  .rl-product-hero .rl-product-hero-gallery .wp-block-gallery::before {
    width: 100%;
    min-width: unset;
    height: 56px;
    order: 1; /* Below the image */
  }
  /* Slider: undo absolute thumbs, stack — main image on top, thumbs horizontal below */
  .rl-product-hero .rl-product-hero-slider {
    position: static;
    padding-left: 0;
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
  }
  .rl-product-hero .rl-product-hero-thumbs {
    position: static;
    flex-direction: row;
    width: 100%;
    min-width: unset;
    gap: 4px;
  }
  .rl-product-hero .rl-product-hero-thumbs-inner {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 6px;
  }
  .rl-product-hero .rl-product-hero-thumbs img {
    width: 56px;
    height: 56px;
    min-width: 56px;
  }
  /* Hide scroll arrows — native touch swipe handles horizontal scroll */
  .rl-thumb-arrow {
    display: none;
  }
  /* Fade edges — horizontal direction override */
  .rl-product-hero .rl-product-hero-thumbs-inner.has-overflow-end:not(.has-overflow-start) {
    mask-image: linear-gradient(to right, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 80%, transparent 100%);
  }
  .rl-product-hero .rl-product-hero-thumbs-inner.has-overflow-start:not(.has-overflow-end) {
    mask-image: linear-gradient(to right, transparent 0%, black 20%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 20%);
  }
  .rl-product-hero .rl-product-hero-thumbs-inner.has-overflow-start.has-overflow-end {
    mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
  }
}
/* Below md (< 768px): single column — heading → gallery → details */
@media (max-width: 767px) {
  .rl-product-hero {
    padding: 24px 20px;
  }
  .rl-product-hero .rl-product-hero-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 24px 0;
  }
  .rl-product-hero .rl-product-hero-heading {
    grid-column: 1;
    grid-row: 1;
  }
  .rl-product-hero .rl-product-hero-gallery {
    grid-column: 1;
    grid-row: 2;
  }
  .rl-product-hero .rl-product-hero-details {
    grid-column: 1;
    grid-row: 3;
  }
  .rl-product-hero .rl-product-hero-heading h1 {
    font-size: var(--wp--preset--font-size--4-xl);
  }
  .rl-product-hero .rl-product-hero-price {
    font-size: var(--wp--preset--font-size--xl);
  }
  .rl-gallery-arrow {
    width: 32px;
    height: 32px;
    font-size: 20px;
  }
  .rl-gallery-prev { left: 8px; }
  .rl-gallery-next { right: 8px; }
}

/* ============================================================
   SHARED — About Product (.rl-product-about)
   Cream background. Combines "What is it" + tier list + variant accordion.
   Used on all product marketing pages as a combined info section.
   ============================================================ */
/* Padding + bg via .rl-section.rl-section--cream.rl-section--centered */
/* Section heading via .rl-section-heading */
/* Intro paragraph */
.rl-product-about .rl-product-about-intro {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--gray);
  max-width: 700px;
  margin: 0 auto 40px;
  line-height: 1.8;
}
/* Icon grid narrower on cream bg (override shared default) */
.rl-product-about .rl-icon-grid {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}
.rl-product-about .rl-icon-circle {
  background-color: var(--wp--preset--color--white);
}
/* Sub-heading (H3) — tiers heading */
.rl-product-about > h3 {
  font-family: var(--wp--preset--font-family--cormorant-garamond);
  font-size: var(--wp--preset--font-size--2-xl);
  color: var(--wp--preset--color--charcoal);
  margin-top: 48px;
  margin-bottom: 8px;
}
/* Sub-intro paragraph */
.rl-product-about > h3 + p {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--gray);
  max-width: 700px;
  margin: 0 auto 24px;
  line-height: 1.8;
}
/* Content list — no bullets, bordered rows, centered */
.rl-product-about .rl-product-about-list {
  list-style: none !important;
  padding-left: 0 !important;
  max-width: 800px;
  margin: 0 auto;
  text-align: left;
}
.rl-product-about .rl-product-about-list li {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--gray);
  line-height: 1.8;
  padding: 14px 0;
  border-bottom: 1px solid var(--wp--preset--color--fog);
}
.rl-product-about .rl-product-about-list li:last-child {
  border-bottom: none;
}
.rl-product-about .rl-product-about-list li strong {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--charcoal);
}
/* Pricing note — italic, small */
.rl-product-about .rl-product-about-note {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--gray);
  max-width: 700px;
  margin: 16px auto 0;
}
/* Expandable details accordion — gold +/- markers */
.rl-product-about .rl-product-about-accordion {
  max-width: 800px;
  margin: 32px auto 0;
  border-top: 1px solid var(--wp--preset--color--fog);
  text-align: left;
}
.rl-product-about .rl-product-about-accordion summary {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--base);
  font-weight: 700;
  color: var(--wp--preset--color--gold);
  padding: 20px 32px 20px 0;
  cursor: pointer;
  list-style: none;
  position: relative;
  text-align: center;
}
.rl-product-about .rl-product-about-accordion summary::-webkit-details-marker {
  display: none;
}
.rl-product-about .rl-product-about-accordion summary::marker {
  content: "";
}
.rl-product-about .rl-product-about-accordion summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--wp--preset--font-size--xl);
  font-weight: 300;
  color: var(--wp--preset--color--gold);
}
.rl-product-about .rl-product-about-accordion[open] summary::after {
  content: "−";
}
.rl-product-about .rl-product-about-accordion summary:hover {
  color: var(--wp--preset--color--gold-dark);
}
/* Accordion inquiry link */
.rl-product-about .rl-product-about-accordion p a {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--base);
  font-weight: 700;
  color: var(--wp--preset--color--gold);
  text-decoration: none;
}
.rl-product-about .rl-product-about-accordion p a:hover {
  color: var(--wp--preset--color--gold-dark);
}

/* --- About Product Responsive --- */
/* --- Adjacent Same-Background Collapse Rules ---
   When two consecutive sections share the same background,
   the second section's top padding collapses to prevent double spacing.
   Add new rules here as new section combinations are used. */
.rl-product-about + .rl-reviews {
  padding-top: 0;
}
.rl-product-hero + .rl-products {
  padding-top: 40px;
}
.rl-products + .rl-products {
  padding-top: 0;
}
/* .rl-reviews (cream) + .rl-faq (white) — different backgrounds, do NOT collapse */
/* Mobile padding for .rl-product-about handled by .rl-section responsive */
/* Tablet (640-767px): icon grid 2-col for better use of space */
@media (min-width: 640px) and (max-width: 767px) {
  .rl-product-about .rl-icon-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
/* Mobile (< 640px): icon grid single column */
@media (max-width: 639px) {
  .rl-product-about .rl-icon-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   SHARED — Featured Products (.rl-products)
   White background. WooCommerce Product Collection, 4-col grid.
   ============================================================ */
/* Padding + bg via .rl-section.rl-section--white.rl-section--centered */
/* Section heading via .rl-section-heading */
/* Intro paragraph */
.rl-products .rl-products-intro {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--gray);
  max-width: 700px;
  margin: 0 auto 40px;
  line-height: 1.8;
}
/* Product grid spacing */
.rl-products .rl-products-grid {
  margin-bottom: 32px;
}
/* Product card text styling */
.rl-products .wc-block-product-template .wp-block-post-title {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--charcoal);
  margin-top: 8px;
  margin-bottom: 4px;
}
.rl-products .wc-block-product-template .wp-block-post-title a {
  color: var(--wp--preset--color--charcoal);
  text-decoration: none;
}
.rl-products .wc-block-product-template .wp-block-post-title a:hover {
  color: var(--wp--preset--color--gold);
}
/* Product price */
.rl-products .wc-block-product-template .wc-block-components-product-price {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 700;
  color: var(--wp--preset--color--gold);
}
/* CTA button */
.rl-products > .wp-block-buttons {
  margin-top: 0;
}

/* ============================================================
   SHARED — Tier/Variant Accordion (.rl-tier-accordion)
   Overrides for native WP Accordion block with deep-link support.
   Uses autoclose attribute for exclusive open behavior.
   ============================================================ */
.rl-tier-accordion {
  max-width: 700px;
  margin: 32px auto 0;
  text-align: left;
}
/* Accordion item container */
.rl-tier-accordion .wp-block-accordion-item {
  border: 1px solid var(--wp--preset--color--fog);
  border-radius: 6px;
  margin-bottom: 8px;
  overflow: hidden;
  scroll-margin-top: 100px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
/* Hover: gold border accent */
.rl-tier-accordion .wp-block-accordion-item:hover {
  border-color: var(--wp--preset--color--gold-light);
}
/* Toggle button (the clickable header) */
.rl-tier-accordion .wp-block-accordion-heading__toggle {
  width: 100%;
  background: none;
  border: none;
  font-family: var(--wp--preset--font-family--cormorant-garamond);
  font-size: var(--wp--preset--font-size--xl);
  font-weight: 700;
  color: var(--wp--preset--color--charcoal);
  padding: 16px 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  transition: background 0.2s ease;
}
.rl-tier-accordion .wp-block-accordion-heading__toggle:hover {
  background: var(--wp--preset--color--cream);
}
/* Toggle icon — style the +/- */
.rl-tier-accordion .wp-block-accordion-heading__toggle-icon {
  margin-left: auto;
  color: var(--wp--preset--color--gold);
  font-size: var(--wp--preset--font-size--2-xl);
  font-weight: 300;
  line-height: 1;
  transition: transform 0.3s ease, color 0.2s ease;
}
.rl-tier-accordion .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-icon {
  color: var(--wp--preset--color--gold-dark);
}
/* Heading — remove default margins from the h3/h4 wrapper */
.rl-tier-accordion .wp-block-accordion-heading {
  margin: 0;
}
/* Price label inside the title */
.rl-tier-price {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 400;
  color: var(--wp--preset--color--gray);
}
/* Panel (content area) */
.rl-tier-accordion .wp-block-accordion-panel {
  padding: 0 20px 16px;
}
.rl-tier-accordion .wp-block-accordion-panel p {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--charcoal);
  line-height: 1.8;
  margin-bottom: 8px;
}
/* "Shop [tier] →" link */
.rl-tier-link {
  margin-bottom: 0 !important;
}
.rl-tier-link a {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 700;
  color: var(--wp--preset--color--gold);
  text-decoration: none;
}
.rl-tier-link a:hover {
  color: var(--wp--preset--color--gold-dark);
  text-decoration: underline;
}
/* Highlight on deep-link arrival */
.rl-tier-highlight {
  border-color: var(--wp--preset--color--gold) !important;
  box-shadow: 0 0 0 1px var(--wp--preset--color--gold);
}
@media (max-width: 767px) {
  .rl-tier-accordion .wp-block-accordion-item {
    scroll-margin-top: 80px;
  }
  .rl-tier-accordion .wp-block-accordion-heading__toggle {
    font-size: var(--wp--preset--font-size--lg);
    padding: 14px 16px;
  }
  .rl-tier-accordion .wp-block-accordion-panel {
    padding: 0 16px 14px;
  }
}

/* ============================================================
   SHARED — Collection Showcase (.rl-showcase)
   Dynamic per-tier product grids from [letrato_collection_showcase].
   ============================================================ */
.rl-showcase {
  text-align: left;
  margin-top: 40px;
}
/* Variant group (e.g., "Standard") */
.rl-showcase-group {
  margin-bottom: 48px;
}
.rl-showcase-group-title {
  font-family: var(--wp--preset--font-family--cormorant-garamond);
  font-size: var(--wp--preset--font-size--2-xl);
  color: var(--wp--preset--color--charcoal);
  margin-bottom: 8px;
  text-align: center;
}
.rl-showcase-group-desc {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--gray);
  text-align: center;
  max-width: 700px;
  margin: 0 auto 32px;
  line-height: 1.8;
}
/* Individual tier section */
.rl-showcase-tier {
  margin-bottom: 40px;
  scroll-margin-top: 100px; /* Offset for sticky header */
}
.rl-showcase-tier:last-child {
  margin-bottom: 0;
}
.rl-showcase-tier-title {
  font-family: var(--wp--preset--font-family--cormorant-garamond);
  font-size: var(--wp--preset--font-size--xl);
  font-weight: 700;
  color: var(--wp--preset--color--charcoal);
  margin-bottom: 16px;
  text-align: center;
}
.rl-showcase-tier-title a {
  color: var(--wp--preset--color--charcoal);
  text-decoration: none;
}
.rl-showcase-tier-title a:hover {
  color: var(--wp--preset--color--gold);
}
.rl-showcase-tier-price {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 400;
  color: var(--wp--preset--color--gray);
  margin-left: 8px;
}
/* Product grid */
.rl-showcase-grid {
  display: grid;
  grid-template-columns: repeat(var(--rl-showcase-cols, 4), 1fr);
  gap: 24px;
  margin-bottom: 12px;
}
/* Product card */
.rl-showcase-product {
  text-decoration: none;
  text-align: center;
  display: block;
}
.rl-showcase-product:hover .rl-showcase-product-image img {
  transform: scale(1.03);
}
.rl-showcase-product-image {
  overflow: hidden;
  border-radius: 4px;
  aspect-ratio: var(--letrato-catalog-ratio, 4 / 5);
  margin-bottom: 8px;
}
.rl-showcase-product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.rl-showcase-product-name {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--charcoal);
  margin-bottom: 4px;
  line-height: 1.4;
}
.rl-showcase-product-price {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 700;
  color: var(--wp--preset--color--gold);
}
/* "View all" link */
.rl-showcase-tier-link {
  text-align: center;
}
.rl-showcase-tier-link a {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--gold);
  text-decoration: none;
  font-weight: 700;
}
.rl-showcase-tier-link a:hover {
  color: var(--wp--preset--color--gold-dark);
  text-decoration: underline;
}
/* Responsive */
@media (max-width: 1023px) {
  .rl-showcase-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 767px) {
  .rl-showcase {
    margin-top: 32px;
  }
  .rl-showcase-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .rl-showcase-tier {
    margin-bottom: 32px;
    scroll-margin-top: 80px;
  }
  .rl-showcase-group {
    margin-bottom: 40px;
  }
}

/* ============================================================
   SHARED — Customer Reviews (.rl-reviews)
   Cream background. 3×2 grid of white review cards.
   Gold stars, italic quotes, author info.
   ============================================================ */
/* Padding + bg via .rl-section.rl-section--cream.rl-section--centered */
/* Section heading via .rl-section-heading — keep 40px gap before review grid */
.rl-reviews > .rl-section-heading {
  margin-bottom: 40px;
}
/* Reusable load-more grid — fade overlay when items are hidden */
.rl-loadmore-grid {
  position: relative;
}
.rl-loadmore-grid.has-hidden {
  max-height: var(--rl-loadmore-height, none);
  overflow: hidden;
}
.rl-loadmore-grid.has-hidden::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(to bottom, transparent 0%, var(--wp--preset--color--cream) 85%);
  pointer-events: none;
  z-index: 1;
}

/* Disable fade in Block Editor */
.editor-styles-wrapper .rl-loadmore-grid::after {
  display: none;
}

/* Load-more item transitions */
.rl-loadmore-item {
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.rl-loadmore-item.rl-loadmore-hidden,
.rl-loadmore-item.rl-loadmore-entering {
  opacity: 0;
  transform: translateY(8px);
}
/* Peek items — visible teaser under the gradient */
.rl-loadmore-item.rl-loadmore-peek {
  pointer-events: none;
}

/* Toggle button — overlaps the fade gradient */
.rl-loadmore-toggle {
  margin-top: 32px;
}
.rl-loadmore-grid.has-hidden ~ .rl-loadmore-toggle {
  position: relative;
  z-index: 2;
  margin-top: -40px;
}
.rl-loadmore-toggle .wp-block-button__link {
  cursor: pointer;
}

/* Masonry layout for review cards */
.rl-reviews .rl-reviews-grid.wp-block-columns {
  display: block !important;
  columns: 3 !important;
  column-gap: 24px !important;
}
/* Review card — white bg, left-aligned, subtle shadow */
.rl-reviews .rl-review-card {
  text-align: left;
  padding: 24px;
  background-color: var(--wp--preset--color--white);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  break-inside: avoid;
  margin-bottom: 24px;
}
/* Star rating */
.rl-reviews .rl-review-stars {
  color: var(--wp--preset--color--gold-light);
  font-size: var(--wp--preset--font-size--lg);
  letter-spacing: 2px;
  margin-bottom: 12px;
}
/* Quote — italic */
.rl-reviews .rl-review-quote {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--charcoal);
  line-height: 1.8;
  font-style: italic;
  margin-bottom: 16px;
  flex-grow: 1;
}
/* Author info — flex row with avatar, pushed to bottom */
.rl-reviews .rl-review-author {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--gray);
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
.rl-reviews .rl-review-author strong {
  color: var(--wp--preset--color--charcoal);
}
/* Customer photo avatar — circular */
.rl-reviews .rl-review-avatar {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 50%;
  object-fit: cover;
}
.rl-reviews .rl-review-avatar--initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--wp--preset--color--fog);
  color: var(--wp--preset--color--gray);
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--lg);
  font-weight: 600;
}

/* ============================================================
   WC Reviews by Category — CSS Overrides (inside .rl-reviews)
   Scoped to .rl-reviews so these only apply on marketing pages.
   All rules use !important to override WC's built-in stylesheet.
   Targets both class patterns: wc-block-review-list-item__*
   AND wc-block-components-review-list-item__*
   ============================================================ */
/* Review list — masonry 2-col on desktop */
.rl-reviews .wc-block-review-list {
  display: block !important;
  columns: 2 !important;
  column-gap: 24px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* Individual review card — white bg on cream */
.rl-reviews .wc-block-review-list-item__item {
  background-color: var(--wp--preset--color--white) !important;
  border-radius: 8px !important;
  padding: 24px 110px 24px 24px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
  text-align: left !important;
  position: relative !important;
  margin-bottom: 24px !important;
  break-inside: avoid !important;
}
/* WC list items — prevent column break */
.rl-reviews .wc-block-review-list > li {
  break-inside: avoid !important;
}
/* Star rating — gold, positioned top-right */
.rl-reviews .wc-block-review-list-item__rating__stars,
.rl-reviews .wc-block-components-review-list-item__rating__stars {
  color: var(--wp--preset--color--gold-light) !important;
}
.rl-reviews .wc-block-review-list-item__rating,
.rl-reviews .wc-block-components-review-list-item__rating {
  position: absolute !important;
  top: 24px !important;
  right: 24px !important;
  margin-bottom: 0 !important;
}
/* Product name link — gold */
.rl-reviews .wc-block-review-list-item__product > a,
.rl-reviews .wc-block-components-review-list-item__product > a {
  font-family: var(--wp--preset--font-family--lato) !important;
  font-size: var(--wp--preset--font-size--sm) !important;
  color: var(--wp--preset--color--gold) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}
.rl-reviews .wc-block-review-list-item__product > a:hover,
.rl-reviews .wc-block-components-review-list-item__product > a:hover {
  color: var(--wp--preset--color--gold-dark) !important;
}
/* Author name — charcoal, bold */
.rl-reviews .wc-block-review-list-item__author,
.rl-reviews .wc-block-components-review-list-item__author {
  font-family: var(--wp--preset--font-family--lato) !important;
  font-size: var(--wp--preset--font-size--sm) !important;
  font-weight: 700 !important;
  color: var(--wp--preset--color--charcoal) !important;
}
/* Published date — gray, small */
.rl-reviews .wc-block-review-list-item__published-date,
.rl-reviews .wc-block-components-review-list-item__published-date {
  font-family: var(--wp--preset--font-family--lato) !important;
  font-size: 12px !important;
  color: var(--wp--preset--color--gray) !important;
}
/* Review text body */
.rl-reviews .wc-block-review-list-item__text,
.rl-reviews .wc-block-components-review-list-item__text {
  font-family: var(--wp--preset--font-family--lato) !important;
  font-size: var(--wp--preset--font-size--base) !important;
  color: var(--wp--preset--color--charcoal) !important;
  line-height: 1.8 !important;
  margin-top: 12px !important;
}
/* Sort dropdown — restyle to match design */
.rl-reviews .wc-block-sort-select {
  margin-bottom: 24px !important;
  text-align: left !important;
}
.rl-reviews .wc-block-sort-select__label {
  font-family: var(--wp--preset--font-family--lato) !important;
  font-size: var(--wp--preset--font-size--sm) !important;
  color: var(--wp--preset--color--gray) !important;
}
.rl-reviews .wc-block-sort-select .wc-block-sort-select__select,
.rl-reviews .wc-block-sort-select select {
  font-family: var(--wp--preset--font-family--lato) !important;
  font-size: var(--wp--preset--font-size--sm) !important;
  color: var(--wp--preset--color--charcoal) !important;
  border: 1px solid var(--wp--preset--color--fog) !important;
  border-radius: 4px !important;
  padding: 6px 10px !important;
}
/* Load more wrapper — reset outer div + fade above button */
.rl-reviews .wc-block-components-load-more {
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
  margin-top: 0 !important;
  text-align: center !important;
}
.rl-reviews .wc-block-components-load-more::before {
  content: "" !important;
  display: block !important;
  height: 120px !important;
  margin-top: -120px !important;
  margin-bottom: 32px !important;
  background: linear-gradient(to bottom, transparent, var(--wp--preset--color--cream)) !important;
  pointer-events: none !important;
  position: relative !important;
  z-index: 1 !important;
}
/* Load more button — filled dark green to match homepage */
.rl-reviews .wc-block-components-load-more .wp-block-button__link {
  font-family: var(--wp--preset--font-family--lato) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: var(--wp--preset--color--white) !important;
  background-color: var(--wp--preset--color--primary) !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 16px 40px !important;
  cursor: pointer !important;
  transition: background-color 0.2s, transform 0.2s !important;
}
.rl-reviews .wc-block-components-load-more .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--primary-dark) !important;
  color: var(--wp--preset--color--white) !important;
  transform: translateY(-1px) !important;
}

/* --- WC Reviews Responsive --- */
@media (max-width: 767px) {
  .rl-reviews .wc-block-review-list {
    columns: 1 !important;
  }
  .rl-reviews .wc-block-review-list-item__item {
    padding: 20px !important;
  }
  .rl-reviews .wc-block-review-list-item__rating,
  .rl-reviews .wc-block-components-review-list-item__rating {
    position: static !important;
    margin-bottom: 8px !important;
  }
}

/* ============================================================
   SHARED — FAQ (.rl-faq)
   White background. Details/summary blocks, max-width 800px.
   Gold + accent, animated open/close.
   ============================================================ */
/* Padding + bg via .rl-section.rl-section--white */
/* Section heading via .rl-section-heading — keep centered, 40px gap */
.rl-faq > .rl-section-heading {
  text-align: center;
  margin-bottom: 40px;
}
/* Details blocks — centered, constrained width */
.rl-faq .wp-block-details {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  border-bottom: 1px solid var(--wp--preset--color--fog);
}
.rl-faq .wp-block-details:last-of-type {
  border-bottom: none;
}
/* Summary (question) styling */
.rl-faq .wp-block-details summary {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--base);
  font-weight: 700;
  color: var(--wp--preset--color--charcoal);
  padding: 20px 32px 20px 0;
  cursor: pointer;
  list-style: none;
  position: relative;
}
/* Remove default triangle marker */
.rl-faq .wp-block-details summary::-webkit-details-marker {
  display: none;
}
.rl-faq .wp-block-details summary::marker {
  content: "";
}
/* Custom gold + / − marker */
.rl-faq .wp-block-details summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--wp--preset--font-size--xl);
  font-weight: 300;
  color: var(--wp--preset--color--gold);
  transition: transform 0.2s ease;
}
.rl-faq .wp-block-details[open] summary::after {
  content: "−";
}
/* Summary hover */
.rl-faq .wp-block-details summary:hover {
  color: var(--wp--preset--color--gold);
}
/* Answer paragraph */
.rl-faq .wp-block-details p {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--gray);
  line-height: 1.8;
  padding-bottom: 20px;
  max-width: 800px;
}
/* Answer links */
.rl-faq .wp-block-details p a {
  color: var(--wp--preset--color--gold);
  text-decoration: underline;
}
.rl-faq .wp-block-details p a:hover {
  color: var(--wp--preset--color--gold-dark);
}

/* ============================================================
   SHARED — Responsive (Products, Reviews, FAQ)
   ============================================================ */

/* --- Below lg (< 1024px): tighten grids --- */
@media (max-width: 1023px) {
  /* Reviews: 3-col → 2-col */
  .rl-reviews .rl-reviews-grid.wp-block-columns {
    columns: 2 !important;
  }
}

/* --- Below md (< 768px): stack layouts --- */
/* Mobile padding for product-about/products/reviews/faq handled by .rl-section responsive */
@media (max-width: 767px) {
  /* Reviews: 2-col → 1-col */
  .rl-reviews .rl-reviews-grid.wp-block-columns {
    columns: 1 !important;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ============================================================
   SHARED — Comparison Table (.rl-comparison-table)
   Cream background. Side-by-side feature comparison (3+ columns).
   Used for product vs alternatives (e.g., Sash vs Sablay vs Stole).
   ============================================================ */
.rl-comparison-table table {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  border-collapse: collapse;
  text-align: left;
}
.rl-comparison-table th {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--base);
  font-weight: 700;
  color: var(--wp--preset--color--primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 14px 16px;
  border-bottom: 2px solid var(--wp--preset--color--fog);
  background-color: var(--wp--preset--color--white);
}
.rl-comparison-table td {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--charcoal);
  padding: 14px 16px;
  border-bottom: 1px solid var(--wp--preset--color--fog);
  vertical-align: top;
  line-height: 1.7;
}
.rl-comparison-table tr:last-child td {
  border-bottom: none;
}
/* Highlight column for "our" product */
.rl-comparison-table td:first-child {
  font-weight: 700;
  color: var(--wp--preset--color--primary);
}
@media (max-width: 639px) {
  .rl-comparison-table table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .rl-comparison-table th,
  .rl-comparison-table td {
    min-width: 140px;
    font-size: var(--wp--preset--font-size--sm);
    padding: 10px 12px;
  }
}

/* ============================================================
   SHARED — Pricing / Size Guide Table (.rl-pricing-table)
   White background. Bordered rows with size/tier and price columns.
   Used for size guides, pricing tiers, package breakdowns.
   ============================================================ */
.rl-pricing-table table {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  border-collapse: collapse;
  text-align: left;
}
.rl-pricing-table th {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--base);
  font-weight: 700;
  color: var(--wp--preset--color--white);
  background-color: var(--wp--preset--color--primary);
  padding: 14px 20px;
}
.rl-pricing-table td {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--charcoal);
  padding: 14px 20px;
  border-bottom: 1px solid var(--wp--preset--color--fog);
  line-height: 1.7;
}
.rl-pricing-table tr:last-child td {
  border-bottom: none;
}
.rl-pricing-table tr:nth-child(even) td {
  background-color: var(--wp--preset--color--cream);
}
/* Price column bold + gold */
.rl-pricing-table td:last-child {
  font-weight: 700;
  color: var(--wp--preset--color--gold);
  white-space: nowrap;
}
@media (max-width: 639px) {
  .rl-pricing-table th,
  .rl-pricing-table td {
    padding: 10px 12px;
    font-size: var(--wp--preset--font-size--sm);
  }
}

/* ============================================================
   SHARED — Gallery Grid (.rl-gallery-grid)
   White background. Image grid for past events, product photos, etc.
   3-col desktop, 2-col tablet, 1-col mobile.
   ============================================================ */
.rl-gallery-grid .wp-block-gallery {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 1000px;
  margin: 0 auto;
}
.rl-gallery-grid .wp-block-gallery .wp-block-image {
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
}
.rl-gallery-grid .wp-block-gallery .wp-block-image img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
}
.rl-gallery-grid .wp-block-gallery figcaption {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--gray);
  text-align: center;
  padding: 8px 4px;
}
@media (max-width: 767px) {
  .rl-gallery-grid .wp-block-gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .rl-gallery-grid .wp-block-gallery .wp-block-image img {
    height: 180px;
  }
}
@media (max-width: 639px) {
  .rl-gallery-grid .wp-block-gallery {
    grid-template-columns: 1fr;
  }
  .rl-gallery-grid .wp-block-gallery .wp-block-image img {
    height: 220px;
  }
}

/* ============================================================
   SHARED — Product Forms / Variants (.rl-product-forms)
   Cream background. Card grid showing product variations or wearable forms.
   Each card has an image, title, and short description.
   3-col desktop, 2-col tablet, 1-col mobile.
   ============================================================ */
.rl-product-forms-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 960px;
  margin: 0 auto;
}
.rl-product-forms-card {
  background-color: var(--wp--preset--color--white);
  border-radius: 12px;
  overflow: hidden;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.rl-product-forms-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}
.rl-product-forms-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}
.rl-product-forms-card h3 {
  font-family: var(--wp--preset--font-family--cormorant-garamond);
  font-size: var(--wp--preset--font-size--2-xl);
  font-weight: 700;
  color: var(--wp--preset--color--primary);
  margin: 16px 20px 8px;
  line-height: 1.3;
}
.rl-product-forms-card p {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--gray);
  margin: 0 20px 20px;
  line-height: 1.7;
}
@media (max-width: 767px) {
  .rl-product-forms-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}
@media (max-width: 639px) {
  .rl-product-forms-grid {
    grid-template-columns: 1fr;
    max-width: 360px;
  }
}

/* ============================================================
   SHARED — Cross-Links (.rl-cross-links)
   White background. Navigation cards linking to related product pages.
   3-4 col desktop, 2-col tablet, 1-col mobile.
   ============================================================ */
.rl-cross-links-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 960px;
  margin: 0 auto;
}
.rl-cross-links-card {
  display: block;
  background-color: var(--wp--preset--color--cream);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.rl-cross-links-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}
.rl-cross-links-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}
.rl-cross-links-card h3 {
  font-family: var(--wp--preset--font-family--cormorant-garamond);
  font-size: var(--wp--preset--font-size--2-xl);
  font-weight: 700;
  color: var(--wp--preset--color--primary);
  margin: 16px 16px 4px;
  line-height: 1.3;
}
.rl-cross-links-card p {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--gray);
  margin: 0 16px 16px;
  line-height: 1.6;
}
@media (max-width: 767px) {
  .rl-cross-links-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}
@media (max-width: 639px) {
  .rl-cross-links-grid {
    grid-template-columns: 1fr;
    max-width: 360px;
    margin: 0 auto;
  }
}

/* --- Adjacent Same-Background Collapse: New Middle Sections --- */
.rl-comparison-table + .rl-pricing-table { padding-top: 0; }
.rl-product-forms + .rl-product-about { padding-top: 0; }

/* ================================================================
 * SINGLE PRODUCT (.rl-sp-*)
 * WooCommerce single product page — WC block-based template (v0.6.0).
 * Gallery, details, reviews (side-by-side), related products.
 * ================================================================ */

/* --- Main: two-column layout --- */
.rl-sp-main {
  background-color: var(--wp--preset--color--white);
  padding: 40px;
  padding-left: max(40px, calc((100vw - 1200px) / 2));
  padding-right: max(40px, calc((100vw - 1200px) / 2));
}
/* 3-child CSS Grid: heading (top-right), gallery (full left), details (bottom-right) */
.rl-sp-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: 0 40px;
  align-items: start;
}
.rl-sp-heading {
  grid-column: 2;
  grid-row: 1;
}
.rl-sp-gallery {
  grid-column: 1;
  grid-row: 1 / -1;
  min-width: 0;
  position: sticky;
  top: 80px;
  align-self: start;
}
.rl-sp-details {
  grid-column: 2;
  grid-row: 2;
}

/* Loading state during linked variation swap */
.rl-sp-main.rl-sp-loading .rl-sp-gallery,
.rl-sp-main.rl-sp-loading .rl-sp-details {
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* --- Gallery: fixed-height container with image + thumb slider --- */
.rl-sp-gallery .wc-block-product-gallery {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center;
  gap: 8px;
  height: 640px;
}
/* Main image fills remaining space after thumbnails */
.rl-sp-gallery .wc-block-product-gallery-large-image {
  overflow: hidden;
  flex: 1 1 0%;
  min-height: 0;
  border-radius: 5px;
  aspect-ratio: auto !important;
  width: 100%;
}
/* Disable WC hover zoom */
.rl-sp-gallery .wc-block-product-gallery-large-image img {
  cursor: default !important;
  transform: none !important;
  transition: none !important;
}
.rl-sp-gallery .wc-block-product-gallery-large-image__wrapper {
  overflow: hidden;
}
.rl-sp-gallery .wc-block-product-gallery-large-image__container {
  height: 100% !important;
}
/* Override WC inline aspect-ratio: 1/1 on wrapper/container elements */
.rl-sp-gallery .wc-block-product-gallery-large-image__wrapper,
.rl-sp-gallery .wc-block-product-gallery-large-image__container,
.rl-sp-gallery .wc-block-product-gallery-large-image .wc-block-components-product-image {
  aspect-ratio: auto !important;
  width: 100% !important;
  height: 100% !important;
}
/* Hide next/prev arrow overlay — we use thumbnails for navigation */
.rl-sp-gallery .wc-block-product-gallery-large-image__inner-blocks {
  display: none !important;
}
/* Product image: 4:5 centered within fixed-height container */
.rl-sp-gallery .wc-block-components-product-image {
  overflow: hidden;
  display: flex;
  justify-content: center;
  height: 100%;
}
.rl-sp-gallery .wc-block-components-product-image__inner-container {
  width: 100% !important;
  height: 100% !important;
  display: flex;
  justify-content: center;
}
.rl-sp-gallery .wc-block-components-product-image img {
  aspect-ratio: var(--letrato-single-ratio, 4 / 5) !important;
  object-fit: cover !important;
  height: 100% !important;
  width: auto;
  max-width: 100%;
  border-radius: 5px;
}
/* Specificity must beat WC's :where(...) .class.class.class img — (0,3,1) */
.rl-sp-gallery .wc-block-product-gallery-large-image .wc-block-components-product-image img {
  object-fit: cover !important;
  object-position: center top;
  border-radius: 5px;
  width: 100%;
  height: 100% !important;
  display: block;
}
/* Disable WC gallery fade/transition/shadow */
.rl-sp-gallery .wc-block-product-gallery-large-image .wc-block-components-product-image img {
  transition: none !important;
  animation: none !important;
  opacity: 1 !important;
}
.rl-sp-gallery .wc-block-product-gallery-large-image,
.rl-sp-gallery .wc-block-product-gallery-large-image::before,
.rl-sp-gallery .wc-block-product-gallery-large-image::after,
.rl-sp-gallery .wc-block-product-gallery-large-image__wrapper::before,
.rl-sp-gallery .wc-block-product-gallery-large-image__wrapper::after {
  box-shadow: none !important;
  background-image: none !important;
}
/* Thumbnail slider — horizontal row, no wrap, scrollable */
.rl-sp-gallery .wc-block-product-gallery-thumbnails {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  width: 100% !important;
  flex-shrink: 0;
  height: 64px;
}
.rl-sp-gallery .wc-block-product-gallery-thumbnails__scrollable {
  gap: 8px;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.rl-sp-gallery .wc-block-product-gallery-thumbnails__scrollable::-webkit-scrollbar {
  display: none;
}
.rl-sp-gallery .wc-block-product-gallery-thumbnails__thumbnail {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
}
.rl-sp-gallery .wc-block-product-gallery-thumbnails__thumbnail__image {
  border-radius: 4px;
  border: 2px solid transparent;
  box-sizing: border-box;
  transition: border-color 0.2s ease;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.rl-sp-gallery .wc-block-product-gallery-thumbnails__thumbnail__image:hover {
  border-color: var(--wp--preset--color--fog);
}
.rl-sp-gallery .wc-block-product-gallery-thumbnails__thumbnail__image--is-active {
  border-color: var(--wp--preset--color--gold) !important;
}
/* Nav arrows */
.rl-sp-gallery .wc-block-next-previous-buttons__button {
  background: rgba(255,255,255,0.85) !important;
  border: none !important;
  border-radius: 50% !important;
  width: 36px;
  height: 36px;
  color: var(--wp--preset--color--charcoal);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.rl-sp-gallery .wc-block-product-gallery-large-image:hover .wc-block-next-previous-buttons__button {
  opacity: 1;
}
.rl-sp-gallery .wc-block-next-previous-buttons__button:hover {
  background: rgba(255,255,255,1) !important;
}
/* Sale badge */
.rl-sp-gallery .wc-block-components-product-sale-badge {
  background-color: var(--wp--preset--color--terracotta) !important;
  color: var(--wp--preset--color--white) !important;
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 3px;
  padding: 4px 10px;
}
/* Hide fullscreen dialog trigger (disabled in template) */
.rl-sp-gallery .wc-block-product-gallery-dialog { display: none; }

/* --- Product details column --- */
.rl-sp-details .wp-block-post-title {
  font-family: var(--wp--preset--font-family--cormorant-garamond);
  font-size: var(--wp--preset--font-size--4-xl);
  font-weight: 700;
  line-height: 1.3;
  color: var(--wp--preset--color--charcoal);
  margin-bottom: 8px;
}

/* --- Star rating (WC product-rating block) --- */
.rl-sp-details .wp-block-woocommerce-product-rating {
  margin-bottom: 8px;
}
.rl-sp-details .wc-block-components-product-rating__stars {
  font-size: 14px;
  color: var(--wp--preset--color--gold-light);
}
/* Make rating clickable for scroll-to-reviews (handled by JS) */
.rl-sp-details .wc-block-components-product-rating {
  cursor: pointer;
}
.rl-sp-details .wc-block-components-product-rating:hover {
  opacity: 0.8;
}

/* --- Price --- */
.rl-sp-details .wp-block-woocommerce-product-price {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--xl);
  font-weight: 700;
  color: var(--wp--preset--color--charcoal);
  margin-bottom: 16px;
}
.rl-sp-details .wp-block-woocommerce-product-price del {
  color: var(--wp--preset--color--gray);
  font-weight: 400;
}
.rl-sp-details .wp-block-woocommerce-product-price ins {
  text-decoration: none;
  color: var(--wp--preset--color--terracotta);
}

/* --- Stock indicator --- */
.rl-sp-details .wp-block-woocommerce-product-stock-indicator {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--sm);
  margin-bottom: 16px;
}
.rl-sp-details .wc-block-components-product-stock-indicator--in-stock {
  color: var(--wp--preset--color--primary);
}
.rl-sp-details .wc-block-components-product-stock-indicator--out-of-stock {
  color: var(--wp--preset--color--error);
}
/* Stock indicator shortcode fallback */
.rl-stock-indicator {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--sm);
  margin-bottom: 16px;
}
.rl-stock-indicator--in-stock { color: var(--wp--preset--color--primary); }
.rl-stock-indicator--on-backorder { color: var(--wp--preset--color--gold); }
.rl-stock-indicator--out-of-stock { color: var(--wp--preset--color--error); }
/* Hide WC's duplicate stock indicator inside add-to-cart block */
.rl-sp-details .wp-block-add-to-cart-with-options .wc-block-components-product-stock-indicator,
.rl-sp-details .wc-block-add-to-cart-with-options .wc-block-components-product-stock-indicator {
  display: none !important;
}

/* --- Linked variation swatches --- */
/* Kill empty <p>/<br> from wpautop on shortcode output */
.rl-linked-swatches p:empty,
.rl-linked-swatches br,
.rl-sp-details > p:empty {
  display: none;
}
.rl-linked-swatches {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--wp--preset--color--fog);
}
.rl-linked-label {
  display: block;
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 700;
  color: var(--wp--preset--color--charcoal);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.rl-linked-swatch-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.rl-linked-swatch {
  display: block;
  width: 56px;
  height: 56px;
  line-height: 0;
  font-size: 0;
  box-sizing: border-box;
  border-radius: 5px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.2s ease;
}
.rl-linked-swatch:hover {
  border-color: var(--wp--preset--color--fog);
}
.rl-linked-swatch.rl-linked-active {
  border-color: var(--wp--preset--color--gold) !important;
}
.rl-linked-swatch img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Add to cart (WC add-to-cart-with-options block) --- */
.rl-sp-details .wc-block-add-to-cart-with-options {
  margin-top: 24px;
  margin-bottom: 24px;
}
/* Flex group: qty + button */
.rl-sp-details .wc-block-add-to-cart-with-options > .wp-block-group {
  gap: 16px;
  align-items: stretch;
}
/* Quantity selector */
.rl-sp-details .wc-block-add-to-cart-with-options__quantity-selector {
  font-family: var(--wp--preset--font-family--lato);
}
.rl-sp-details .wc-block-add-to-cart-with-options__quantity-selector input.qty {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--base);
  border-color: var(--wp--preset--color--fog);
  border-radius: 5px;
}
/* Add to cart button (gold style) */
.rl-sp-details .single_add_to_cart_button {
  background-color: var(--wp--preset--color--gold-button) !important;
  color: var(--wp--preset--color--white) !important;
  font-family: var(--wp--preset--font-family--lato);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: none !important;
  border-radius: 5px !important;
  padding: 14px 32px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.rl-sp-details .single_add_to_cart_button:hover {
  background-color: var(--wp--preset--color--gold-button-hover) !important;
  color: var(--wp--preset--color--white) !important;
}

/* --- Product meta (SKU, category) --- */
.rl-sp-details .wp-block-woocommerce-product-meta {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--gray);
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--wp--preset--color--fog);
}
.rl-sp-details .wp-block-woocommerce-product-meta a {
  color: var(--wp--preset--color--primary);
  text-decoration: none;
}
.rl-sp-details .wp-block-woocommerce-product-meta a:hover { text-decoration: underline; }

/* Marketing page link */
.rl-sp-marketing-link {
  margin-top: 12px;
}
.rl-sp-marketing-link a {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--primary);
  text-decoration: none;
  font-weight: 600;
}
.rl-sp-marketing-link a:hover { text-decoration: underline; }

/* --- Hide WC defaults we replace --- */
.related.products { display: none !important; }
.woocommerce-tabs { display: none !important; }

/* --- Reviews section (side-by-side: list left, form right) --- */
.rl-sp-reviews {
  background-color: var(--wp--preset--color--cream);
  padding: 80px 40px;
  padding-left: max(40px, calc((100vw - 1200px) / 2));
  padding-right: max(40px, calc((100vw - 1200px) / 2));
}
/* Hide our static "Customer Reviews" heading — block's dynamic title is better */
.rl-sp-reviews-heading { display: none; }

/* No reviews: hide "0 reviews" title, form takes full width */
.rl-sp-reviews-block:not(:has(.wp-block-woocommerce-product-review-template)) {
  display: block;
  max-width: 640px;
  margin: 0 auto;
}
.rl-sp-reviews-block:not(:has(.wp-block-woocommerce-product-review-template)) .wp-block-woocommerce-product-reviews-title {
  display: none;
}
.rl-sp-reviews-block:not(:has(.wp-block-woocommerce-product-review-template)) .comment-reply-title {
  text-align: center;
}

/* Reviews block: CSS Grid for side-by-side layout */
.rl-sp-reviews-block {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 40px;
  align-items: start;
}
/* Title spans full width */
.rl-sp-reviews-block .wp-block-woocommerce-product-reviews-title {
  grid-column: 1 / -1;
  font-family: var(--wp--preset--font-family--cormorant-garamond);
  font-size: var(--wp--preset--font-size--4-xl);
  font-weight: 700;
  color: var(--wp--preset--color--charcoal);
  text-align: center;
  margin-bottom: 20px;
}
/* Review list — left column */
.rl-sp-reviews-block .wp-block-woocommerce-product-review-template {
  grid-column: 1;
  list-style: none;
  padding: 0;
  margin: 0;
}
.rl-sp-reviews-block .wp-block-woocommerce-product-review-template > li {
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--wp--preset--color--fog);
}
.rl-sp-reviews-block .wp-block-woocommerce-product-review-template > li:last-child {
  border-bottom: none;
  margin-bottom: 0;
}
/* Review item: avatar + content columns gap */
.rl-sp-reviews-block .wp-block-woocommerce-product-review-template .wp-block-columns {
  gap: 12px !important;
}
/* Review item avatar */
.rl-sp-reviews-block .wp-block-avatar img {
  border-radius: 50%;
}
/* Review author name */
.rl-sp-reviews-block .wp-block-woocommerce-product-review-author-name {
  font-family: var(--wp--preset--font-family--lato);
  font-weight: 700;
  color: var(--wp--preset--color--charcoal);
}
/* Review stars */
.rl-sp-reviews-block .wp-block-woocommerce-product-review-rating {
  color: var(--wp--preset--color--gold-light);
}
/* Review date */
.rl-sp-reviews-block .wp-block-woocommerce-product-review-date {
  font-family: var(--wp--preset--font-family--lato);
  color: var(--wp--preset--color--gray);
}
/* Review content */
.rl-sp-reviews-block .wp-block-woocommerce-product-review-content {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--base);
  line-height: 1.8;
  color: var(--wp--preset--color--charcoal);
}
/* Pagination — left column */
.rl-sp-reviews-block .wp-block-woocommerce-product-reviews-pagination {
  grid-column: 1;
}

/* Review form wrapper — right column, sticky */
.rl-sp-reviews-block > [data-block-name="woocommerce/product-review-form"] {
  grid-column: 2;
  grid-row: 2 / 4;
  position: sticky;
  top: 120px;
  align-self: start;
}
.rl-sp-reviews-block .wp-block-woocommerce-product-review-form {
  background-color: var(--wp--preset--color--white);
  border-radius: 8px;
  padding: 28px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.rl-sp-reviews-block .wp-block-woocommerce-product-review-form h3,
.rl-sp-reviews-block .wp-block-woocommerce-product-review-form .comment-reply-title {
  font-family: var(--wp--preset--font-family--cormorant-garamond);
  font-size: var(--wp--preset--font-size--2-xl);
  font-weight: 700;
  color: var(--wp--preset--color--charcoal);
  margin-bottom: 16px;
}
/* Form inputs */
.rl-sp-reviews-block .wp-block-woocommerce-product-review-form input[type="text"],
.rl-sp-reviews-block .wp-block-woocommerce-product-review-form input[type="email"],
.rl-sp-reviews-block .wp-block-woocommerce-product-review-form textarea {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--base);
  border: 1px solid var(--wp--preset--color--fog);
  border-radius: 5px;
  padding: 10px 14px;
  width: 100%;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}
.rl-sp-reviews-block .wp-block-woocommerce-product-review-form input:focus,
.rl-sp-reviews-block .wp-block-woocommerce-product-review-form textarea:focus {
  border-color: var(--wp--preset--color--gold);
  outline: none;
}
.rl-sp-reviews-block .wp-block-woocommerce-product-review-form textarea {
  min-height: 120px;
  resize: vertical;
}
/* Submit button — gold style */
.rl-sp-reviews-block .wp-block-woocommerce-product-review-form input[type="submit"],
.rl-sp-reviews-block .wp-block-woocommerce-product-review-form button[type="submit"] {
  background-color: var(--wp--preset--color--gold-button) !important;
  color: var(--wp--preset--color--white) !important;
  font-family: var(--wp--preset--font-family--lato);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: none;
  border-radius: 5px;
  padding: 12px 28px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  width: 100%;
}
.rl-sp-reviews-block .wp-block-woocommerce-product-review-form input[type="submit"]:hover,
.rl-sp-reviews-block .wp-block-woocommerce-product-review-form button[type="submit"]:hover {
  background-color: var(--wp--preset--color--gold-button-hover) !important;
  color: var(--wp--preset--color--white) !important;
}
/* Star rating selector in form */
.rl-sp-reviews-block .wp-block-woocommerce-product-review-form .stars {
  color: var(--wp--preset--color--gold-light);
}
/* Form labels */
.rl-sp-reviews-block .wp-block-woocommerce-product-review-form label {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 700;
  color: var(--wp--preset--color--charcoal);
}

/* --- "More from this collection" — WC product-collection block --- */
.rl-sp-related {
  background-color: var(--wp--preset--color--white);
  padding: 80px 40px;
  padding-left: max(40px, calc((100vw - 1200px) / 2));
  padding-right: max(40px, calc((100vw - 1200px) / 2));
}
/* Override WC's .wp-block-woocommerce-product-collection h2.wp-block-heading (higher specificity) */
.rl-sp-related h2.wp-block-heading {
  font-family: var(--wp--preset--font-family--cormorant-garamond);
  font-size: var(--wp--preset--font-size--4-xl) !important;
  font-weight: 700;
  color: var(--wp--preset--color--charcoal);
  margin-bottom: 32px;
}
/* 4:5 portrait product images in related grid */
.rl-sp-related .wc-block-components-product-image img {
  aspect-ratio: var(--letrato-catalog-ratio, 4 / 5);
  object-fit: cover;
}
.rl-sp-related .wc-block-components-product-image {
  overflow: hidden;
  border-radius: 5px;
}
.rl-sp-related .wc-block-components-product-image img:hover {
  transform: scale(1.03);
  transition: transform 0.3s ease;
}
/* Related product titles */
.rl-sp-related .wp-block-post-title {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--gray);
}
.rl-sp-related .wp-block-post-title a {
  color: inherit;
  text-decoration: none;
}
.rl-sp-related .wp-block-post-title a:hover {
  color: var(--wp--preset--color--gold);
}
/* Related product prices */
.rl-sp-related .wc-block-components-product-price {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--base);
  font-weight: 700;
  color: var(--wp--preset--color--gold);
}

/* --- Responsive --- */
@media (max-width: 767px) {
  .rl-sp-main { padding: 24px 20px; }
  .rl-sp-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    gap: 0 !important;
  }
  /* Flatten groups so children become direct grid items for reorder */
  .rl-sp-grid > .rl-sp-heading,
  .rl-sp-grid > .rl-sp-gallery,
  .rl-sp-grid > .rl-sp-details {
    display: contents !important;
  }
  /* Mobile order: Title → Rating → Gallery → Price → Stock → Swatches → Cart → Meta → Marketing */
  .rl-sp-heading > .wp-block-post-title                                        { order: 1; margin-bottom: 4px; }
  .rl-sp-heading > [data-block-name="woocommerce/product-rating"]              { order: 2; margin-bottom: 12px; }
  .rl-sp-gallery > .wc-block-product-gallery                                   { order: 3; margin-bottom: 20px; }
  .rl-sp-details > [data-block-name="woocommerce/product-price"]               { order: 4; margin-bottom: 8px; }
  .rl-sp-details > [class*="rl-stock-indicator"]                               { order: 5; margin-bottom: 8px; }
  .rl-sp-details > [class*="rl-linked-swatches"]                               { order: 6; margin-bottom: 16px; }
  .rl-sp-details > [data-block-name="woocommerce/add-to-cart-with-options"]    { order: 7; margin-bottom: 16px; }
  .rl-sp-details > .wp-block-woocommerce-product-meta                          { order: 8; margin-bottom: 8px; }
  .rl-sp-details > [class*="rl-marketing-link"]                                { order: 9; }
  /* Responsive gallery height */
  .rl-sp-gallery .wc-block-product-gallery {
    height: 480px;
  }
  .rl-sp-reviews { padding: 48px 20px; }
  /* Reviews: stack on mobile — list first, form below */
  .rl-sp-reviews-block {
    grid-template-columns: 1fr;
  }
  .rl-sp-reviews-block > [data-block-name="woocommerce/product-review-form"] {
    grid-column: 1;
    grid-row: auto;
    position: static;
  }
  .rl-sp-related { padding: 48px 20px; }
  /* Gallery: ensure carousel doesn't overflow on mobile */
  .rl-sp-gallery .wc-block-product-gallery-large-image,
  .rl-sp-gallery .wc-block-product-gallery-large-image__container {
    max-width: 100% !important;
    width: 100% !important;
  }
}
@media (max-width: 639px) {
  .rl-linked-swatch {
    width: 48px;
    height: 48px;
  }
}
/* @split: shop.css */
/* ============================================================
   Shop — Archive/category pages
   ============================================================ */

/* ============================================================
   SHOP ARCHIVE — Product Category Archive (.rl-shop-archive)
   Sidebar (25%) + Product Grid (75%), breadcrumbs, title, desc
   ============================================================ */

/* --- Archive wrapper --- */
.rl-shop-archive {
  background-color: var(--wp--preset--color--white);
  padding-top: 0;
  padding-bottom: 80px;
}

/* --- Shop Header: breadcrumbs + title + description --- */
.rl-shop-header {
  padding: 32px 40px 24px;
  padding-left: max(40px, calc((100vw - 1200px) / 2));
  padding-right: max(40px, calc((100vw - 1200px) / 2));
}
.rl-shop-header .woocommerce-breadcrumb,
.rl-shop-header .wc-block-breadcrumbs {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--gray);
  margin-bottom: 16px;
}
.rl-shop-header .woocommerce-breadcrumb a,
.rl-shop-header .wc-block-breadcrumbs a {
  color: var(--wp--preset--color--gray);
  text-decoration: none;
}
.rl-shop-header .woocommerce-breadcrumb a:hover,
.rl-shop-header .wc-block-breadcrumbs a:hover {
  color: var(--wp--preset--color--gold);
}
.rl-shop-header .wp-block-query-title {
  font-family: var(--wp--preset--font-family--cormorant-garamond);
  font-size: var(--wp--preset--font-size--5-xl);
  font-weight: 700;
  color: var(--wp--preset--color--primary);
  line-height: 1.2;
  margin-bottom: 12px;
}
.rl-shop-header .taxonomy-description,
.rl-shop-header .wp-block-term-description {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--charcoal);
  line-height: 1.8;
  max-width: 720px;
}

/* --- Shop Body: sidebar + content (CSS Grid) --- */
.rl-shop-body {
  display: grid !important;
  grid-template-columns: 260px 1fr !important;
  gap: 40px !important;
  padding-left: max(40px, calc((100vw - 1200px) / 2));
  padding-right: max(40px, calc((100vw - 1200px) / 2));
  align-items: start;
}

/* --- Sidebar --- */
.rl-shop-sidebar {
  position: sticky;
  top: 100px;
  padding: 24px;
  background-color: var(--wp--preset--color--cream);
  border-radius: 8px;
  border: 1px solid var(--wp--preset--color--fog);
}
.rl-shop-sidebar-title {
  font-family: var(--wp--preset--font-family--cormorant-garamond);
  font-size: var(--wp--preset--font-size--xl) !important;
  font-weight: 700;
  color: var(--wp--preset--color--primary);
  margin-bottom: 12px !important;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--wp--preset--color--fog);
}
/* Spacing between category list and product filters */
.rl-shop-sidebar .wp-block-woocommerce-product-categories + .wc-block-product-filters {
  margin-top: 24px !important;
}
/* Category list */
.rl-shop-sidebar .wc-block-product-categories-list,
.rl-shop-sidebar .wp-block-woocommerce-product-categories ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.rl-shop-sidebar .wc-block-product-categories-list li,
.rl-shop-sidebar .wp-block-woocommerce-product-categories li {
  padding: 6px 0;
  border-bottom: 1px solid var(--wp--preset--color--fog);
}
.rl-shop-sidebar .wc-block-product-categories-list li:last-child,
.rl-shop-sidebar .wp-block-woocommerce-product-categories li:last-child {
  border-bottom: none;
}
.rl-shop-sidebar .wc-block-product-categories-list a,
.rl-shop-sidebar .wp-block-woocommerce-product-categories a {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--charcoal);
  text-decoration: none;
  transition: color 0.2s ease;
}
.rl-shop-sidebar .wc-block-product-categories-list a:hover,
.rl-shop-sidebar .wp-block-woocommerce-product-categories a:hover {
  color: var(--wp--preset--color--gold);
}
/* Category count badge */
.rl-shop-sidebar .wc-block-product-categories-list-item-count {
  font-size: 11px;
  color: var(--wp--preset--color--gray);
  margin-left: 4px;
}
/* Nested subcategories indent */
.rl-shop-sidebar .wc-block-product-categories-list .children,
.rl-shop-sidebar .wp-block-woocommerce-product-categories ul ul {
  padding-left: 16px;
  margin-top: 4px;
}
/* Product Filters wrapper (overrides WC inline CSS vars) */
.rl-shop-sidebar .wc-block-product-filters {
  --wc-product-filters-text-color: var(--wp--preset--color--charcoal);
  --wc-product-filters-background-color: transparent;
}
/* Filter section title — "Price" heading inside filter block */
.rl-shop-filter-title {
  font-family: var(--wp--preset--font-family--cormorant-garamond) !important;
  font-size: var(--wp--preset--font-size--xl) !important;
  font-weight: 700;
  color: var(--wp--preset--color--primary) !important;
  margin-top: 0 !important;
  margin-bottom: 12px !important;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--wp--preset--color--fog);
}
/* Price slider */
.rl-shop-sidebar .wc-block-product-filter-price-slider {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--sm);
}
/* Active filters — removable chips */
.rl-shop-sidebar .wc-block-product-filter-removable-chips {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--sm);
}
/* Clear filters button */
.rl-shop-sidebar .wc-block-product-filter-clear-button .wp-block-button__link {
  border-width: 1px !important;
  border-style: solid !important;
  padding: 5px 8px !important;
  text-decoration: none !important;
  font-family: var(--wp--preset--font-family--lato) !important;
  font-size: var(--wp--preset--font-size--sm) !important;
  color: var(--wp--preset--color--charcoal) !important;
  background: transparent !important;
}
.rl-shop-sidebar .wc-block-product-filter-clear-button .wp-block-button__link:hover {
  color: var(--wp--preset--color--gold) !important;
  border-color: var(--wp--preset--color--gold) !important;
}

/* --- Shop Content area --- */
.rl-shop-content {
  min-width: 0; /* prevent grid blowout */
}

/* --- Toolbar: results count + sorting --- */
.rl-shop-toolbar {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--wp--preset--color--fog);
}
.rl-shop-toolbar .wc-block-product-results-count,
.rl-shop-toolbar p.woocommerce-result-count {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--gray);
  margin: 0;
}
.rl-shop-toolbar .wc-block-catalog-sorting select,
.rl-shop-toolbar .woocommerce-ordering select {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--charcoal);
  border: 1px solid var(--wp--preset--color--fog);
  border-radius: 4px;
  padding: 6px 12px;
  background-color: var(--wp--preset--color--white);
}

/* --- Product Grid --- */
.rl-shop-grid .wc-block-product {
  text-align: center;
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--fog);
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.rl-shop-grid .wc-block-product:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}
/* Product image */
.rl-shop-grid .wc-block-product .wc-block-components-product-image,
.rl-shop-grid .wc-block-product img {
  width: 100%;
  aspect-ratio: var(--letrato-catalog-ratio, 4 / 5) !important;
  object-fit: cover;
  border-radius: 0;
}
/* Product title */
.rl-shop-grid .wc-block-product .wp-block-post-title,
.rl-shop-grid .wc-block-product .wc-block-components-product-name {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--sm) !important;
  font-weight: 700;
  color: var(--wp--preset--color--charcoal);
  line-height: 1.4;
  padding: 12px 12px 4px;
  margin: 0;
}
.rl-shop-grid .wc-block-product .wp-block-post-title a,
.rl-shop-grid .wc-block-product .wc-block-components-product-name a {
  color: var(--wp--preset--color--charcoal);
  text-decoration: none;
}
.rl-shop-grid .wc-block-product .wp-block-post-title a:hover,
.rl-shop-grid .wc-block-product .wc-block-components-product-name a:hover {
  color: var(--wp--preset--color--gold);
}
/* Product price */
.rl-shop-grid .wc-block-product .wc-block-components-product-price,
.rl-shop-grid .wc-block-product .wp-block-woocommerce-product-price {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--base) !important;
  font-weight: 700;
  color: var(--wp--preset--color--gold);
  padding: 0 12px;
  margin-bottom: 0;
}
/* Add to Cart button */
.rl-shop-grid .wc-block-product .wp-block-button .wp-block-button__link,
.rl-shop-grid .wc-block-product .wc-block-components-product-button .wp-element-button,
.rl-shop-grid .wc-block-product .wc-block-components-product-button a {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--sm) !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background-color: var(--wp--preset--color--gold-button) !important;
  color: var(--wp--preset--color--white) !important;
  border: none;
  border-radius: 4px;
  padding: 8px 20px;
  margin: 8px 12px 16px;
  transition: background-color 0.3s ease;
  display: inline-block;
  width: calc(100% - 24px);
}
.rl-shop-grid .wc-block-product .wp-block-button .wp-block-button__link:hover,
.rl-shop-grid .wc-block-product .wc-block-components-product-button .wp-element-button:hover,
.rl-shop-grid .wc-block-product .wc-block-components-product-button a:hover {
  background-color: var(--wp--preset--color--gold-button-hover) !important;
  color: var(--wp--preset--color--white) !important;
}

/* --- Pagination --- */
.rl-shop-grid + .wp-block-query-pagination,
.rl-shop-content .wp-block-query-pagination {
  margin-top: 40px;
  gap: 8px;
}
.rl-shop-content .wp-block-query-pagination .page-numbers,
.rl-shop-content .wp-block-query-pagination a,
.rl-shop-content .wp-block-query-pagination span {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--charcoal);
  padding: 8px 14px;
  border: 1px solid var(--wp--preset--color--fog);
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.2s ease;
}
.rl-shop-content .wp-block-query-pagination a:hover {
  background-color: var(--wp--preset--color--cream);
  border-color: var(--wp--preset--color--gold);
  color: var(--wp--preset--color--gold);
}
.rl-shop-content .wp-block-query-pagination .page-numbers.current,
.rl-shop-content .wp-block-query-pagination span[aria-current="page"] {
  background-color: var(--wp--preset--color--gold-button);
  color: var(--wp--preset--color--white);
  border-color: var(--wp--preset--color--gold-button);
}

/* ============================================================
   SHOP ARCHIVE — Responsive
   ============================================================ */

/* --- Below lg (< 1024px): hide sidebar, full-width grid --- */
@media (max-width: 1023px) {
  .rl-shop-body {
    grid-template-columns: 1fr !important;
  }
  .rl-shop-sidebar {
    display: none;
  }
  .rl-shop-header {
    padding-left: 24px;
    padding-right: 24px;
  }
  .rl-shop-body {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* --- Below md (< 768px): tighter spacing --- */
@media (max-width: 767px) {
  .rl-shop-header {
    padding: 20px 16px 16px;
  }
  .rl-shop-header .wp-block-query-title {
    font-size: var(--wp--preset--font-size--4-xl);
  }
  .rl-shop-body {
    padding-left: 16px;
    padding-right: 16px;
    gap: 24px !important;
  }
  .rl-shop-archive {
    padding-bottom: 48px;
  }
}
/* @split: checkout.css */
/* ============================================================
   Checkout — Cart and checkout pages
   ============================================================ */

/* ============================================================
 * CART PAGE (.rl-cart)
 * Full redesign of WC Cart block — matches design system.
 * Template: Page: Cart | Page content: Pages → Cart
 * ============================================================ */

/* --- Cart: Layout & Container ---
   Scoped to .wp-block-group to avoid bleeding into the header
   mini-cart (.wc-block-mini-cart) which also has .rl-cart class. */
.wp-block-group.rl-cart {
  background: var(--wp--preset--color--white);
  padding: 40px 40px 80px;
  padding-left: max(40px, calc((100vw - 1200px) / 2));
  padding-right: max(40px, calc((100vw - 1200px) / 2));
}

/* --- Cart: Page Title (rendered by post-title block or WC) --- */
.rl-cart .wp-block-post-title,
.rl-cart h1 {
  font-family: var(--wp--preset--font-family--cormorant-garamond);
  font-size: var(--wp--preset--font-size--4-xl);
  color: var(--wp--preset--color--charcoal);
  margin-bottom: 32px;
}

/* --- Cart: Table Header Row --- */
.rl-cart .wc-block-cart-items .wc-block-cart-items__header {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--wp--preset--color--gray);
  border-bottom: 2px solid var(--wp--preset--color--fog);
}

/* --- Cart: Line Items --- */
.rl-cart .wc-block-cart-items .wc-block-cart-items__row {
  border-bottom: 1px solid var(--wp--preset--color--fog);
  padding: 24px 0;
}
.rl-cart .wc-block-cart-items .wc-block-cart-items__row:last-child {
  border-bottom: none;
}

/* Product image */
.rl-cart .wc-block-cart-item__image img {
  border-radius: 6px;
  aspect-ratio: var(--letrato-catalog-ratio, 4 / 5);
  object-fit: cover;
}

/* Product name */
.rl-cart .wc-block-cart-item__product .wc-block-components-product-name {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--base);
  font-weight: 700;
  color: var(--wp--preset--color--charcoal);
  text-decoration: none;
}
.rl-cart .wc-block-cart-item__product .wc-block-components-product-name:hover {
  color: var(--wp--preset--color--gold);
}

/* Product meta (addons, stock status) */
.rl-cart .wc-block-cart-item__product .wc-block-components-product-metadata {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--gray);
}

/* Addon details — each on its own line instead of cramped with / separators */
.wc-block-components-product-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wc-block-components-product-details > span {
  display: block;
}
.wc-block-components-product-details > span > [aria-hidden="true"] {
  display: none;
}

/* Product price */
.rl-cart .wc-block-cart-item__total .wc-block-components-product-price {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--base);
  font-weight: 700;
  color: var(--wp--preset--color--charcoal);
}

/* Quantity stepper */
.rl-cart .wc-block-components-quantity-selector {
  border: 1px solid var(--wp--preset--color--fog);
  border-radius: 6px;
  overflow: hidden;
}
.rl-cart .wc-block-components-quantity-selector input {
  font-family: var(--wp--preset--font-family--lato);
}
.rl-cart .wc-block-components-quantity-selector__button:hover {
  background: var(--wp--preset--color--cream);
}

/* Remove button */
.rl-cart .wc-block-cart-item__remove-link {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--error);
}
.rl-cart .wc-block-cart-item__remove-link:hover {
  color: var(--wp--preset--color--charcoal);
}

/* --- Cart: Order Summary (right side) --- */
.rl-cart .wp-block-woocommerce-cart-totals-block {
  background: var(--wp--preset--color--cream);
  border-radius: 8px;
  padding: 32px;
}

/* Summary heading */
.rl-cart .wc-block-cart__totals-title {
  font-family: var(--wp--preset--font-family--cormorant-garamond);
  font-size: var(--wp--preset--font-size--2-xl);
  color: var(--wp--preset--color--charcoal);
  margin-bottom: 20px;
}

/* Summary rows (subtotal, fees, shipping, taxes) */
.rl-cart .wc-block-components-totals-item {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--base);
  border-color: var(--wp--preset--color--fog);
}
.rl-cart .wc-block-components-totals-item__label {
  color: var(--wp--preset--color--gray);
}
.rl-cart .wc-block-components-totals-item__value {
  color: var(--wp--preset--color--charcoal);
  font-weight: 700;
}

/* Estimated total — bigger */
.rl-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.rl-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-size: var(--wp--preset--font-size--xl);
  font-weight: 700;
  color: var(--wp--preset--color--charcoal);
}

/* Coupon form */
.rl-cart .wc-block-components-totals-coupon .wc-block-components-totals-coupon__button {
  font-family: var(--wp--preset--font-family--lato);
  color: var(--wp--preset--color--white) !important;
}
.rl-cart .wc-block-components-totals-coupon__button:hover {
  color: var(--wp--preset--color--white) !important;
  opacity: 0.9;
}

/* --- Cart: Proceed to Checkout Button --- */
.rl-cart .wc-block-cart__submit-container .wc-block-cart__submit-button,
.rl-cart .wc-block-components-checkout-return-to-cart-button,
.rl-cart .wp-block-woocommerce-proceed-to-checkout-block a,
.rl-cart .wp-block-woocommerce-proceed-to-checkout-block button {
  background: var(--wp--preset--color--gold-button) !important;
  color: var(--wp--preset--color--white) !important;
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: none;
  border-radius: 6px;
  padding: 16px 32px;
  transition: background 0.2s ease;
  width: 100%;
  text-align: center;
}
.rl-cart .wc-block-cart__submit-container .wc-block-cart__submit-button:hover,
.rl-cart .wp-block-woocommerce-proceed-to-checkout-block a:hover,
.rl-cart .wp-block-woocommerce-proceed-to-checkout-block button:hover {
  background: var(--wp--preset--color--gold-button-hover) !important;
  color: var(--wp--preset--color--white) !important;
}

/* Payment method icons */
.rl-cart .wc-block-components-payment-method-icons {
  margin-top: 16px;
  justify-content: center;
}

/* --- Cart: Cross-sells ("You may also like") --- */
.rl-cart .rl-cart-cross-sells {
  margin-top: 48px;
  padding-top: 48px;
  border-top: 1px solid var(--wp--preset--color--fog);
}
.rl-cart .rl-cart-cross-sells h3 {
  font-family: var(--wp--preset--font-family--cormorant-garamond);
  font-size: var(--wp--preset--font-size--2-xl);
  color: var(--wp--preset--color--charcoal);
  margin-bottom: 24px;
}
.rl-cart .rl-cart-cross-sells .wc-block-product-template .wp-block-post-title {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--charcoal);
}
.rl-cart .rl-cart-cross-sells .wc-block-product-template .wp-block-post-title a {
  color: var(--wp--preset--color--charcoal);
  text-decoration: none;
}
.rl-cart .rl-cart-cross-sells .wc-block-product-template .wp-block-post-title a:hover {
  color: var(--wp--preset--color--gold);
}
.rl-cart .rl-cart-cross-sells .wc-block-components-product-price {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 700;
  color: var(--wp--preset--color--gold);
}

/* --- Cart: Empty State --- */
.rl-cart .wc-block-cart__empty-cart__title {
  font-family: var(--wp--preset--font-family--cormorant-garamond);
  font-size: var(--wp--preset--font-size--4-xl);
  color: var(--wp--preset--color--charcoal);
  margin-bottom: 12px;
}
.rl-cart .wp-block-woocommerce-empty-cart-block > p {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--gray);
  max-width: 500px;
  margin: 0 auto 32px;
  line-height: 1.8;
}
.rl-cart .wp-block-woocommerce-empty-cart-block .wp-block-buttons {
  gap: 16px;
  margin-bottom: 48px;
}
.rl-cart .wp-block-woocommerce-empty-cart-block h3 {
  font-family: var(--wp--preset--font-family--cormorant-garamond);
  font-size: var(--wp--preset--font-size--2-xl);
  color: var(--wp--preset--color--charcoal);
  margin-bottom: 24px;
}
/* Hide the default sad face icon */
.rl-cart .wc-block-cart__empty-cart__title::before {
  display: none;
}
/* New products grid in empty state */
.rl-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
  margin-top: 0;
}
.rl-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--charcoal);
}
.rl-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 700;
  color: var(--wp--preset--color--gold);
}

/* --- Cart: WC Notices --- */
.rl-cart .wc-block-components-notice-banner {
  font-family: var(--wp--preset--font-family--lato);
  border-radius: 6px;
  margin-bottom: 24px;
}

/* ============================================================
 * CHECKOUT PAGE (.rl-checkout) — Block Checkout
 * Uses WC checkout block with Additional Fields API.
 * WC Setting: "Force shipping to billing" is ON.
 * Template: Page: Checkout | uses header + footer parts.
 * ============================================================ */

/* --- Checkout: Layout & Container ---
   Scoped to .wp-block-group to target only the <main> wrapper,
   not the inner WC checkout block which also has .rl-checkout
   in the WP database. Matches cart pattern (.wp-block-group.rl-cart). */
.wp-block-group.rl-checkout {
  background: var(--wp--preset--color--white);
  padding: 40px 40px 80px;
  padding-left: max(40px, calc((100vw - 1200px) / 2));
  padding-right: max(40px, calc((100vw - 1200px) / 2));
}
/* Reset: inner WC checkout block also has .rl-checkout from page content */
.wp-block-woocommerce-checkout.rl-checkout {
  padding: 0 !important;
  background: none !important;
}

/* --- Checkout: Form Column — cream card treatment --- */
.rl-checkout .wc-block-checkout__main {
  background: var(--wp--preset--color--cream);
  border-radius: 8px;
  padding: 32px;
  border: 1px solid var(--wp--preset--color--fog);
}

/* --- Checkout: Section Spacing & Dividers --- */
.rl-checkout .wc-block-components-checkout-step {
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--wp--preset--color--fog);
}
.rl-checkout .wc-block-checkout__actions {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* --- Checkout: Section Headings --- */
.rl-checkout .wc-block-components-checkout-step .wc-block-components-title,
.rl-checkout .wc-block-components-checkout-step__title {
  font-family: var(--wp--preset--font-family--cormorant-garamond);
  font-size: var(--wp--preset--font-size--2-xl);
  font-weight: 700;
  color: var(--wp--preset--color--charcoal);
  font-style: normal;
  line-height: 1.3;
}
/* Heading→content gap: 16px total.
   WC sets heading-container margin-bottom: 16px by default.
   Zero the heading div's margin so we don't double up. */
.rl-checkout .wc-block-components-checkout-step__heading {
  margin-bottom: 0;
}

/* --- Checkout: Section Descriptions --- */
.rl-checkout .wc-block-components-checkout-step__description {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--gray);
  margin: 0;
}

/* --- Checkout: Hide billing address on Self-Pickup ---
   When pickup is selected, no delivery address is needed.
   WC adds data-shipping-required attr on the checkout form. */
.rl-checkout .wc-block-checkout[data-shipping-required="false"] .wc-block-checkout__billing-fields {
  display: none !important;
}

/* --- Checkout: Form Row Spacing --- */
.rl-checkout .wc-block-components-address-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rl-checkout .wc-block-components-address-form > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.rl-checkout .wc-block-components-checkout-step__content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* --- Checkout: Form Input Wrappers ---
   Style the wrapper border/radius — leave WC's internal padding alone
   so floating labels aren't clipped. */
.rl-checkout .wc-block-components-text-input {
  border: 1px solid var(--wp--preset--color--fog);
  border-radius: 6px;
  overflow: hidden;
  background: var(--wp--preset--color--white);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.rl-checkout .wc-block-components-text-input:focus-within {
  border-color: var(--wp--preset--color--primary);
  box-shadow: 0 0 0 1px var(--wp--preset--color--primary);
}
/* Remove WC's default inner border on the input itself */
.rl-checkout .wc-block-components-text-input input,
.rl-checkout .wc-block-components-text-input textarea {
  border: none !important;
  box-shadow: none !important;
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--charcoal);
  background: transparent !important;
}
.rl-checkout .wc-block-components-text-input label {
  font-family: var(--wp--preset--font-family--lato);
  color: var(--wp--preset--color--gray);
}

/* Select / combobox wrappers — consistent border + radius.
   Three WC variants: .wc-block-components-select-input (checkout fields),
   .wc-block-components-combobox (state), .wc-blocks-components-select (country). */
.rl-checkout .wc-block-components-select-input,
.rl-checkout .wc-block-components-combobox,
.rl-checkout .wc-blocks-components-select {
  border: 1px solid var(--wp--preset--color--fog);
  border-radius: 6px;
  overflow: hidden;
  background: var(--wp--preset--color--white);
}
/* State combobox wrapper has extra padding from WC — remove it to match 52px height */
.rl-checkout .wc-block-components-combobox,
.rl-checkout .wc-block-components-state-input {
  padding: 0 !important;
}
.rl-checkout .wc-block-components-select-input select,
.rl-checkout .wc-block-components-combobox input,
.rl-checkout .wc-blocks-components-select__select {
  border: none !important;
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--charcoal);
}

/* --- Checkout: Shipping Toggle --- */
.rl-checkout .wc-block-checkout__shipping-method-option {
  border-radius: 6px;
}

/* --- Checkout: Pickup Location Card --- */
.rl-checkout .wc-block-checkout__pickup-options .wc-block-components-radio-control {
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--fog);
  border-radius: 8px;
}
/* Hide "NO DELIVERY FEE" / "Free" label in pickup card — misleading for self-pickup */
.rl-checkout .wc-block-checkout__pickup-options .wc-block-components-radio-control__secondary-label {
  display: none !important;
}
/* Hide "Free" cost value in order summary sidebar for pickup —
   JS adds .rl-pickup-active class on the checkout form when pickup is selected */
.rl-pickup-active .wc-block-components-totals-shipping .wc-block-components-totals-item__value {
  visibility: hidden;
}
/* Pickup card: bump text from sm(13px) to base(16px) for readability */
.rl-checkout .wc-block-checkout__pickup-options .wc-block-components-radio-control__label {
  font-size: var(--wp--preset--font-size--base);
  font-weight: 600;
}
.rl-checkout .wc-block-checkout__pickup-options .wc-block-components-radio-control__description {
  font-size: var(--wp--preset--font-size--sm);
  line-height: 1.6;
}

/* --- Checkout: Order Summary (right sidebar) --- */
.rl-checkout .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block {
  background: var(--wp--preset--color--cream);
  border-radius: 8px;
  padding: 32px;
}
.rl-checkout .wc-block-components-totals-item {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--base);
}
.rl-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.rl-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-size: var(--wp--preset--font-size--xl);
  font-weight: 700;
  color: var(--wp--preset--color--charcoal);
}

/* --- Checkout: Place Order Button --- */
.rl-checkout .wc-block-checkout__actions .wc-block-components-checkout-place-order-button,
.rl-checkout .wc-block-checkout__actions button[type="submit"] {
  background: var(--wp--preset--color--gold-button) !important;
  color: var(--wp--preset--color--white) !important;
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 16px 32px;
  border: none;
  border-radius: 6px;
  transition: background 0.2s ease;
}
.rl-checkout .wc-block-checkout__actions .wc-block-components-checkout-place-order-button:hover,
.rl-checkout .wc-block-checkout__actions button[type="submit"]:hover {
  background: var(--wp--preset--color--gold-button-hover) !important;
}

/* --- Checkout: Return to Cart --- */
.rl-checkout .wc-block-checkout__actions .wc-block-components-checkout-return-to-cart-button {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--gray);
}

/* --- Checkout: Terms & Order Note --- */
.rl-checkout .wc-block-checkout__terms,
.rl-checkout .wc-block-checkout__order-note {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--gray);
}
.rl-checkout .wc-block-checkout__terms a {
  color: var(--wp--preset--color--gold);
}

/* --- Checkout: Order Options (pickup method + OR checkbox) ---
   White card inside cream form column for visual hierarchy. */
.rl-checkout-options {
  background: var(--wp--preset--color--white);
  border-radius: 8px;
  padding: 24px;
  border: 1px solid var(--wp--preset--color--fog);
}
/* heading-container uses standard 16px margin — no override needed */
.rl-checkout-options .wc-block-components-checkout-step__content {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
/* Kill phantom spacing from empty notices/snackbar */
.rl-checkout-options .wc-block-components-notices__snackbar,
.rl-checkout-options .wc-block-components-notices {
  margin: 0 !important;
  padding: 0 !important;
}
.rl-checkout-options .wc-block-components-notices:empty,
.rl-checkout-options .wc-block-components-notices__snackbar:empty {
  display: none !important;
}
/* Hide floating label in Order Options select — heading provides context,
   placeholder is descriptive enough. Label still accessible to screen readers. */
.rl-checkout-options .wc-blocks-components-select__label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
/* Remove top padding reserved for floating label + kill margin-top gap */
.rl-checkout-options .wc-blocks-components-select {
  margin-top: 0 !important;
}
.rl-checkout-options .wc-blocks-components-select__select {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

/* --- Checkout: Payment Options --- */
.rl-checkout .wc-block-checkout__payment-method .wc-block-components-radio-control {
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--fog);
  border-radius: 8px;
  overflow: hidden;
}
/* Payment method labels: bump from sm(13px) to base(16px) */
.rl-checkout .wc-block-checkout__payment-method .wc-block-components-radio-control__label {
  font-size: var(--wp--preset--font-size--base);
}

/* --- Checkout: Checkbox labels — bump from sm(13px) to base(16px) --- */
.rl-checkout .wc-block-components-checkbox__label {
  font-size: var(--wp--preset--font-size--base);
}

/* --- Checkout: OR Checkbox — more prominent --- */
.rl-checkout .wc-block-components-checkbox:has(#checkbox-control-0-letrato-needs-official-receipt) {
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--fog);
  border-radius: 6px;
  padding: 12px 16px;
}

/* --- Checkout: Notices --- */
.rl-checkout .wc-block-components-notice-banner {
  font-family: var(--wp--preset--font-family--lato);
  border-radius: 6px;
}

/* --- Checkout: Auth banner — cream card above form sections.
   Guest state has border-bottom divider matching other section dividers (24px). --- */
.rl-checkout .rl-checkout-auth--guest {
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--wp--preset--color--fog);
}

/* --- Checkout: Responsive (767px) — tablet --- */
@media (max-width: 767px) {
  .wp-block-group.rl-checkout {
    padding: 24px 20px 48px;
  }
  .rl-checkout .wc-block-checkout__main {
    padding: 24px 16px;
  }
  .rl-checkout .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block {
    padding: 24px 16px;
  }
  .rl-checkout-options {
    padding: 20px 16px;
  }
}
/* --- Checkout: Responsive (639px) — small mobile --- */
@media (max-width: 639px) {
  /* Tighten section dividers */
  .rl-checkout .wc-block-components-checkout-step {
    padding-bottom: 16px;
    margin-bottom: 16px;
  }
  .rl-checkout .rl-checkout-auth--guest {
    padding-bottom: 16px;
    margin-bottom: 16px;
  }
  /* Tighten form row gaps */
  .rl-checkout .wc-block-components-address-form,
  .rl-checkout .wc-block-components-checkout-step__content {
    gap: 10px;
  }
  .rl-checkout-options {
    padding: 16px 12px;
  }
}

/* --- Cart: Responsive --- */
@media (max-width: 767px) {
  .rl-cart {
    padding: 24px 20px 48px;
  }
  .rl-cart .wp-block-woocommerce-cart-totals-block {
    padding: 24px 20px;
  }
  .rl-cart .rl-cart-cross-sells {
    margin-top: 32px;
    padding-top: 32px;
  }
}
@media (max-width: 639px) {
  .rl-cart .rl-cart-cross-sells .wc-block-product-template {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ============================================================
 * ORDER CONFIRMATION PAGE
 * Scoped to body.woocommerce-order-received so it doesn't
 * affect the checkout form. Uses the order-confirmation template.
 *
 * Body classes added by letrato-core (class-woocommerce.php):
 *   .order-status-{status}  — processing, on-hold, completed, pending
 *   .payment-{method}       — xendit, bacs, cod, etc.
 * ============================================================ */

/* --- Order Confirmation: Grid Layout ---
   <main> IS the .wp-block-group. Use CSS Grid for 2-column layout
   (order details left + address right) and CSS order for sequencing.

   Visual layout:
   ┌─────────────────────────────────────────────┐
   │  ✓ Order received                           │ Full-width banner
   │  Thank you. Your order has been received.   │ (green=paid, gold=pending)
   │  ORDER #: 607 │ DATE │ TOTAL │ EMAIL │ PAY  │ Summary merged in
   └─────────────────────────────────────────────┘
   [ Bank details — gold border, only for on-hold ]
   ┌──────────────────────┐ ┌────────────────────┐
   │ Order details        │ │ Delivery Address   │ Side-by-side
   │ [img] Product  ₱500  │ │ Name, street, etc  │
   │ Shipping       ₱120  │ │                    │
   │ Total          ₱620  │ │ Additional info    │
   └──────────────────────┘ └────────────────────┘
   ============================================================ */

.woocommerce-order-received main.wp-block-group {
  background: var(--wp--preset--color--white);
  padding: 0 0 60px !important;
  display: grid !important;
  grid-template-columns: 3fr 2fr;
  gap: 0 24px;
}
/* All children span full width by default */
.woocommerce-order-received main.wp-block-group > * {
  grid-column: 1 / -1;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Content padding on non-banner sections */
.woocommerce-order-received .wc-block-order-confirmation-totals-wrapper,
.woocommerce-order-received .wc-block-order-confirmation-address-wrapper,
.woocommerce-order-received .wc-block-order-confirmation-additional-fields-wrapper,
.woocommerce-order-received .wp-block-woocommerce-order-confirmation-additional-information {
  padding-left: max(40px, calc((100vw - 960px) / 2));
  padding-right: max(40px, calc((100vw - 960px) / 2));
}

/* --- Section ordering --- */
.woocommerce-order-received .wc-block-order-confirmation-status { order: 1; }
.woocommerce-order-received .wc-block-order-confirmation-summary { order: 2; }
.woocommerce-order-received .wc-block-order-confirmation-totals-wrapper { order: 4; }
.woocommerce-order-received .wc-block-order-confirmation-address-wrapper { order: 4; }
.woocommerce-order-received .wc-block-order-confirmation-additional-fields-wrapper { order: 5; }
.woocommerce-order-received .wp-block-woocommerce-order-confirmation-additional-information { order: 6; }

/* Order details (left) + Address (right) side-by-side */
.woocommerce-order-received .wc-block-order-confirmation-totals-wrapper {
  grid-column: 1 / 2 !important;
  padding-right: 12px;
}
.woocommerce-order-received .wc-block-order-confirmation-address-wrapper {
  grid-column: 2 / 3 !important;
  padding-left: 12px;
}

/* --- Status Banner + Summary merged ---
   Banner and summary share the same bg color, no gap between them,
   creating a single unified hero section. */
.woocommerce-order-received .wc-block-order-confirmation-status {
  background: var(--wp--preset--color--primary) !important;
  padding: 40px 40px 20px !important;
  text-align: center;
  margin-bottom: 0 !important;
}
.woocommerce-order-received .wc-block-order-confirmation-summary {
  background: var(--wp--preset--color--primary) !important;
  padding: 0 40px 32px !important;
  margin-bottom: 32px !important;
  border-radius: 0 !important;
}
/* Status heading */
.woocommerce-order-received .wc-block-order-confirmation-status h1 {
  font-family: var(--wp--preset--font-family--cormorant-garamond) !important;
  font-size: var(--wp--preset--font-size--4-xl) !important;
  font-weight: 700 !important;
  color: var(--wp--preset--color--white) !important;
  line-height: 1.3;
  margin: 0 0 8px;
}
.woocommerce-order-received .wc-block-order-confirmation-status p {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--lg);
  color: rgba(255, 255, 255, 0.85) !important;
  margin: 0;
}
/* Checkmark icon */
.woocommerce-order-received .wc-block-order-confirmation-status h1::before {
  content: "\2713";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  color: var(--wp--preset--color--white);
  font-size: 20px;
  margin-right: 12px;
  vertical-align: middle;
}
/* Summary list inside the banner */
.woocommerce-order-received .wc-block-order-confirmation-summary-list {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 16px 0 0;
  justify-content: center;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.woocommerce-order-received .wc-block-order-confirmation-summary-list-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.woocommerce-order-received .wc-block-order-confirmation-summary-list-item__key {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.6);
}
.woocommerce-order-received .wc-block-order-confirmation-summary-list-item__value {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--base);
  font-weight: 600;
  color: var(--wp--preset--color--white);
}

/* --- On-hold / Pending: Gold banner --- */
.woocommerce-order-received.order-status-on-hold .wc-block-order-confirmation-status,
.woocommerce-order-received.order-status-pending .wc-block-order-confirmation-status,
.woocommerce-order-received.order-status-on-hold .wc-block-order-confirmation-summary,
.woocommerce-order-received.order-status-pending .wc-block-order-confirmation-summary {
  background: var(--wp--preset--color--gold-dark) !important;
}
.woocommerce-order-received.order-status-on-hold .wc-block-order-confirmation-status h1::before,
.woocommerce-order-received.order-status-pending .wc-block-order-confirmation-status h1::before {
  content: "\231B";
}
/* Bank details: order 3, full-width cream, flush with hero (no gap) */
.woocommerce-order-received.order-status-on-hold .wp-block-woocommerce-order-confirmation-additional-information,
.woocommerce-order-received.order-status-pending .wp-block-woocommerce-order-confirmation-additional-information {
  order: 3;
  background: var(--wp--preset--color--cream) !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 32px 40px !important;
  padding-left: max(40px, calc((100vw - 960px) / 2)) !important;
  padding-right: max(40px, calc((100vw - 960px) / 2)) !important;
  margin-bottom: 32px !important;
}
/* Remove gap between hero summary and bank details */
.woocommerce-order-received.order-status-on-hold .wc-block-order-confirmation-summary,
.woocommerce-order-received.order-status-pending .wc-block-order-confirmation-summary {
  margin-bottom: 0 !important;
}

/* BACS heading */
.woocommerce-order-received h2.wc-bacs-bank-details-heading {
  font-family: "Cormorant Garamond", serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--wp--preset--color--gold-dark) !important;
  margin-bottom: 16px !important;
  column-span: all !important;
}

/* Bank details section: CSS columns for card grid */
.woocommerce-order-received .woocommerce-bacs-bank-details {
  margin-top: 20px !important;
  padding-top: 20px !important;
  border-top: 1px solid var(--wp--preset--color--fog) !important;
  columns: 3 auto !important;
  column-gap: 16px !important;
}

/* Account name — card top */
.woocommerce-order-received h3.wc-bacs-bank-details-account-name {
  font-family: Lato, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--wp--preset--color--charcoal) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  margin: 0 !important;
  padding: 14px 16px 0 !important;
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--fog);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  break-inside: avoid !important;
  break-after: avoid !important;
}

/* Account details — card bottom */
.woocommerce-order-received ul.wc-bacs-bank-details.bacs_details {
  display: block !important;
  list-style: none !important;
  padding: 8px 16px 14px !important;
  margin: 0 0 12px !important;
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--fog);
  border-top: none;
  border-radius: 0 0 8px 8px;
  break-inside: avoid !important;
  break-before: avoid !important;
}
.woocommerce-order-received ul.wc-bacs-bank-details.bacs_details li {
  margin: 2px 0 !important;
  font-family: Lato, sans-serif !important;
  font-size: 14px !important;
  color: var(--wp--preset--color--charcoal) !important;
}

/* --- Section Headings --- */
.woocommerce-order-received .wc-block-order-confirmation-totals-wrapper h2,
.woocommerce-order-received .wc-block-order-confirmation-shipping-wrapper h2,
.woocommerce-order-received .wc-block-order-confirmation-billing-wrapper h2,
.woocommerce-order-received .wc-block-order-confirmation-additional-fields-wrapper h2 {
  font-family: var(--wp--preset--font-family--cormorant-garamond) !important;
  font-size: var(--wp--preset--font-size--2-xl) !important;
  font-weight: 700;
  color: var(--wp--preset--color--charcoal) !important;
  margin: 0 0 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--wp--preset--color--fog);
}

/* --- Order Details Table --- */
.woocommerce-order-received .wc-block-order-confirmation-totals {
  font-family: var(--wp--preset--font-family--lato);
  border-radius: 8px;
  overflow: hidden;
}
.woocommerce-order-received .wc-block-order-confirmation-totals__table {
  border: 1px solid var(--wp--preset--color--fog) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: 8px;
  overflow: hidden;
  width: 100%;
}
.woocommerce-order-received .wc-block-order-confirmation-totals__table thead {
  background: var(--wp--preset--color--cream);
}
.woocommerce-order-received .wc-block-order-confirmation-totals__table th,
.woocommerce-order-received .wc-block-order-confirmation-totals__table td {
  font-family: var(--wp--preset--font-family--lato) !important;
  font-size: var(--wp--preset--font-size--base);
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--wp--preset--color--fog);
}
.woocommerce-order-received .wc-block-order-confirmation-totals__table th {
  font-weight: 700;
  color: var(--wp--preset--color--charcoal);
}
.woocommerce-order-received .wc-block-order-confirmation-totals__table td {
  color: var(--wp--preset--color--charcoal);
}
.woocommerce-order-received .wc-block-order-confirmation-totals__table a {
  color: var(--wp--preset--color--gold) !important;
  text-decoration: none;
}
.woocommerce-order-received .wc-block-order-confirmation-totals__table a:hover {
  color: var(--wp--preset--color--gold-dark) !important;
  text-decoration: underline;
}
/* Total row */
.woocommerce-order-received .wc-block-order-confirmation-totals__table tfoot tr:last-child th,
.woocommerce-order-received .wc-block-order-confirmation-totals__table tfoot tr:last-child td {
  font-weight: 700;
  font-size: var(--wp--preset--font-size--lg);
  border-top: 2px solid var(--wp--preset--color--primary);
  border-bottom: none;
}

/* --- Product thumbnail (PHP-injected) --- */
.rl-order-item-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.rl-order-item-thumb {
  width: 48px;
  height: 48px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
}

/* --- Delivery Address ---
   White bg with border (not cream) to avoid stripes. */
.woocommerce-order-received .wc-block-order-confirmation-shipping-address,
.woocommerce-order-received .wc-block-order-confirmation-billing-address {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--charcoal);
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--fog);
  border-radius: 8px;
  padding: 20px 24px;
  line-height: 1.7;
}
/* Hide duplicate billing (force-to-billing ON) */
.woocommerce-order-received .wc-block-order-confirmation-billing-wrapper {
  display: none !important;
}
/* Pickup orders: no shipping wrapper exists — expand order details full width */
.woocommerce-order-received main.wp-block-group:not(:has(.wc-block-order-confirmation-shipping-wrapper)) .wc-block-order-confirmation-totals-wrapper {
  grid-column: 1 / -1 !important;
  padding-right: max(40px, calc((100vw - 960px) / 2)) !important;
}
.woocommerce-order-received main.wp-block-group:not(:has(.wc-block-order-confirmation-shipping-wrapper)) .wc-block-order-confirmation-address-wrapper {
  display: none !important;
}
.woocommerce-order-received .wc-block-order-confirmation-address-wrapper {
  display: block !important;
}
.woocommerce-order-received .wc-block-order-confirmation-address-wrapper > .wp-block-column:first-child {
  flex-basis: 100% !important;
  max-width: 100%;
}

/* --- Additional Fields (OR checkbox) ---
   White bg with border for consistency. */
.woocommerce-order-received .wc-block-order-confirmation-additional-fields-wrapper {
  margin-top: 24px;
  margin-bottom: 0;
}
.woocommerce-order-received .wc-block-order-confirmation-additional-fields {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--base);
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--fog);
  border-radius: 8px;
  padding: 12px 20px;
}
.woocommerce-order-received .wc-block-components-additional-fields-list {
  font-family: var(--wp--preset--font-family--lato);
}
.woocommerce-order-received .wc-block-order-confirmation-additional-fields table {
  width: 100%;
}
.woocommerce-order-received .wc-block-order-confirmation-additional-fields th,
.woocommerce-order-received .wc-block-order-confirmation-additional-fields td {
  font-family: var(--wp--preset--font-family--lato);
  padding: 8px 0;
}

/* --- Additional Information (payment gateway text — usually empty for online pay) --- */
.woocommerce-order-received .wp-block-woocommerce-order-confirmation-additional-information {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--charcoal);
}

/* --- Responsive: Tablet (< 1024px) — stack order details + address --- */
@media (max-width: 1023px) {
  .woocommerce-order-received main.wp-block-group {
    grid-template-columns: 1fr !important;
    padding-bottom: 48px !important;
  }
  .woocommerce-order-received .wc-block-order-confirmation-totals-wrapper,
  .woocommerce-order-received .wc-block-order-confirmation-address-wrapper {
    grid-column: 1 / -1 !important;
    padding-left: max(32px, calc((100vw - 960px) / 2));
    padding-right: max(32px, calc((100vw - 960px) / 2));
  }
  .woocommerce-order-received .wc-block-order-confirmation-address-wrapper {
    margin-top: 24px;
  }
  .woocommerce-order-received .wc-block-order-confirmation-additional-fields-wrapper,
  .woocommerce-order-received .wp-block-woocommerce-order-confirmation-additional-information {
    padding-left: max(32px, calc((100vw - 960px) / 2));
    padding-right: max(32px, calc((100vw - 960px) / 2));
  }
  /* Bank details: 2 columns on tablet */
  .woocommerce-order-received .woocommerce-bacs-bank-details {
    columns: 2 auto !important;
  }
}

/* --- Responsive: Mobile (< 768px) --- */
@media (max-width: 767px) {
  /* Tighter side padding */
  .woocommerce-order-received .wc-block-order-confirmation-totals-wrapper,
  .woocommerce-order-received .wc-block-order-confirmation-address-wrapper,
  .woocommerce-order-received .wc-block-order-confirmation-additional-fields-wrapper,
  .woocommerce-order-received .wp-block-woocommerce-order-confirmation-additional-information {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  /* Banner + summary */
  .woocommerce-order-received .wc-block-order-confirmation-status {
    padding: 28px 20px 16px !important;
  }
  .woocommerce-order-received .wc-block-order-confirmation-status h1 {
    font-size: var(--wp--preset--font-size--2-xl) !important;
  }
  .woocommerce-order-received .wc-block-order-confirmation-status h1::before {
    width: 32px;
    height: 32px;
    font-size: 16px;
    margin-right: 8px;
  }
  .woocommerce-order-received .wc-block-order-confirmation-summary {
    padding: 0 20px 20px !important;
  }
  .woocommerce-order-received .wc-block-order-confirmation-summary-list {
    gap: 12px 20px;
  }
  /* Table compact */
  .woocommerce-order-received .wc-block-order-confirmation-totals__table th,
  .woocommerce-order-received .wc-block-order-confirmation-totals__table td {
    padding: 10px 12px !important;
    font-size: var(--wp--preset--font-size--sm);
  }
  /* Bank details: single column, tighter padding */
  .woocommerce-order-received.order-status-on-hold .wp-block-woocommerce-order-confirmation-additional-information,
  .woocommerce-order-received.order-status-pending .wp-block-woocommerce-order-confirmation-additional-information {
    padding: 20px !important;
  }
  .woocommerce-order-received .woocommerce-bacs-bank-details {
    columns: 1 !important;
  }
  /* Section headings smaller */
  .woocommerce-order-received .wc-block-order-confirmation-totals-wrapper h2,
  .woocommerce-order-received .wc-block-order-confirmation-shipping-wrapper h2,
  .woocommerce-order-received .wc-block-order-confirmation-additional-fields-wrapper h2 {
    font-size: var(--wp--preset--font-size--xl) !important;
  }
}

/* --- Responsive: Small mobile (< 640px) --- */
@media (max-width: 639px) {
  .woocommerce-order-received .wc-block-order-confirmation-summary-list {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  .woocommerce-order-received .wc-block-order-confirmation-summary-list-item {
    flex-direction: row;
    gap: 8px;
  }
  /* Product thumbnail smaller */
  .rl-order-item-thumb {
    width: 40px;
    height: 40px;
  }
}


/* --- Checkout: Login/Signup Toggle --- */

/* Hide WC's native "Log in" link — replaced by our toggle */
.wc-block-checkout__contact-fields .wc-block-checkout__login-prompt,
.wc-block-checkout__contact-fields > .wc-block-components-checkout-step__heading a {
  display: none !important;
}

.rl-checkout-auth {
  margin-bottom: 24px;
  padding: 20px 24px;
  background-color: var(--wp--preset--color--cream);
  border-radius: 8px;
  font-family: var(--wp--preset--font-family--lato);
}

/* Smooth transitions for toggle */
.rl-checkout-auth__signup-info,
.rl-checkout-auth__login-form,
.wc-block-checkout__contact-fields {
  transition: opacity 0.2s ease;
}
.rl-checkout-auth__login-form,
.rl-checkout-auth__signup-info {
  overflow: hidden;
}
.rl-checkout-auth__login-form {
  opacity: 0;
}
.rl-checkout-auth__signup-info {
  opacity: 1;
}

/* Logged-in banner */
.rl-checkout-auth--logged-in {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.rl-checkout-auth__info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--charcoal);
}
.rl-checkout-auth__check {
  color: var(--wp--preset--color--primary);
  font-size: 18px;
  font-weight: 700;
}
.rl-checkout-auth__logout {
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--gray);
  text-decoration: none;
}
.rl-checkout-auth__logout:hover {
  color: var(--wp--preset--color--terracotta);
}

/* Signup info text */
.rl-checkout-auth__text {
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--gray);
  margin: 0 0 8px;
  line-height: 1.5;
}
.rl-checkout-auth__toggle {
  margin: 0;
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--charcoal);
}
.rl-checkout-auth__toggle-link {
  color: var(--wp--preset--color--gold);
  text-decoration: none;
  font-weight: 600;
}
.rl-checkout-auth__toggle-link:hover {
  color: var(--wp--preset--color--gold-dark);
}

/* Embedded contact section inside the auth card —
   16px above separator, 16px below. No extra heading overrides;
   uses the same 16px heading→content gap as all other steps. */
.rl-checkout-auth__contact-embedded {
  margin: 16px 0 0 !important;
  padding: 16px 0 0 !important;
  border: none !important;
  border-top: 1px solid var(--wp--preset--color--fog) !important;
}
/* Match Create Account heading to Login heading (italic) */
.rl-checkout-auth__contact-embedded .wc-block-components-checkout-step__title {
  font-style: italic !important;
}
/* Kill phantom spacing from empty notices — they create flex gap even at 0px height */
.rl-checkout-auth__contact-embedded .wc-block-components-notices:empty,
.rl-checkout-auth__contact-embedded .wc-block-components-notices__snackbar:empty,
.rl-checkout-auth__contact-embedded .wc-block-components-notices__snackbar {
  display: none !important;
}
/* Also kill the notice container when it has no visible children */
.rl-checkout-auth__contact-embedded .wc-block-components-notices:not(:has(> *:not(:empty))) {
  display: none !important;
}
/* Hide password strength meter when empty (takes 20px despite .hidden class) */
.rl-checkout-auth__contact-embedded .wc-block-components-password-strength.hidden {
  display: none !important;
}

/* Login form — heading matches Create Account (2xl, italic serif) */
.rl-checkout-auth__heading {
  font-family: var(--wp--preset--font-family--cormorant-garamond);
  font-size: var(--wp--preset--font-size--2-xl);
  font-weight: 700;
  font-style: italic;
  color: var(--wp--preset--color--charcoal);
  margin: 0 0 16px;
}
.rl-checkout-auth__fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}
/* Login inputs — match WC floating-label input appearance (placeholder-based) */
.rl-checkout-auth__field input {
  width: 100%;
  padding: 14px 16px;
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--base);
  border: 1px solid var(--wp--preset--color--fog);
  border-radius: 6px;
  background-color: var(--wp--preset--color--white);
  color: var(--wp--preset--color--charcoal);
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.rl-checkout-auth__field input::placeholder {
  color: var(--wp--preset--color--gray);
  font-size: var(--wp--preset--font-size--base);
}
.rl-checkout-auth__field input:focus {
  border-color: var(--wp--preset--color--primary);
  outline: none;
  box-shadow: 0 0 0 2px rgba(44, 74, 62, 0.1);
}
.rl-checkout-auth__actions {
  margin-bottom: 12px;
}
.rl-checkout-auth__submit {
  display: inline-block;
  padding: 12px 32px;
  font-family: var(--wp--preset--font-family--lato);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white) !important;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}
.rl-checkout-auth__submit:hover {
  background-color: var(--wp--preset--color--primary-dark);
}
.rl-checkout-auth__submit:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* Messages */
.rl-checkout-auth__message {
  padding: 10px 14px;
  border-radius: 6px;
  font-size: var(--wp--preset--font-size--sm);
  margin-bottom: 12px;
}
.rl-checkout-auth__message--error {
  background-color: #fef2f2;
  border: 1px solid var(--wp--preset--color--error);
  color: var(--wp--preset--color--error);
}
.rl-checkout-auth__message--success {
  background-color: #f0fdf4;
  border: 1px solid var(--wp--preset--color--primary);
  color: var(--wp--preset--color--primary);
}

/* Logout confirmation modal */
.rl-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background-color: rgba(0, 0, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}
.rl-modal-overlay--visible {
  background-color: rgba(0, 0, 0, 0.5);
}
.rl-modal {
  background-color: var(--wp--preset--color--white);
  border-radius: 12px;
  padding: 36px 32px;
  max-width: 400px;
  width: 90%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  transform: scale(0.95);
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.rl-modal-overlay--visible .rl-modal {
  transform: scale(1);
  opacity: 1;
}
.rl-modal__icon {
  font-size: 36px;
  margin-bottom: 8px;
  color: var(--wp--preset--color--gold);
}
.rl-modal__title {
  font-family: var(--wp--preset--font-family--cormorant-garamond);
  font-size: var(--wp--preset--font-size--2-xl);
  font-weight: 700;
  color: var(--wp--preset--color--charcoal);
  margin: 0 0 8px;
}
.rl-modal__message {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--gray);
  line-height: 1.6;
  margin: 0 0 24px;
}
.rl-modal__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}
.rl-modal__btn {
  display: inline-block;
  padding: 12px 24px;
  font-family: var(--wp--preset--font-family--lato);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
  border: none;
}
.rl-modal__btn--cancel {
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white) !important;
}
.rl-modal__btn--cancel:hover {
  background-color: var(--wp--preset--color--primary-dark);
}
.rl-modal__btn--confirm {
  background-color: transparent;
  color: var(--wp--preset--color--error) !important;
  border: 1px solid var(--wp--preset--color--error);
}
.rl-modal__btn--confirm:hover {
  background-color: var(--wp--preset--color--error);
  color: var(--wp--preset--color--white) !important;
}

/* Checkout login responsive */
@media (max-width: 639px) {
  .rl-checkout-auth {
    padding: 16px;
  }
  .rl-checkout-auth--logged-in {
    flex-direction: column;
    align-items: flex-start;
  }
  .rl-modal {
    padding: 24px 20px;
  }
}


/* @split: pages.css */
/* ============================================================
   Pages — About, Legal, FAQ, How to Order, Contact
   ============================================================ */

/* ============================================================
   ABOUT — Hero overlay (.rl-about-hero)
   Uses shared .rl-hero for structure. This adds the custom
   green gradient overlay specific to the About page.
   ============================================================ */
.rl-about-hero .wp-block-cover__background {
  background: linear-gradient(135deg,
    rgba(30, 54, 48, 0.85) 0%,
    rgba(44, 74, 62, 0.7) 50%,
    rgba(30, 54, 48, 0.85) 100%) !important;
  opacity: 1 !important;
}

/* ============================================================
   ABOUT — Our Story (.rl-about-story)
   Cream bg, 2-col: image left, text right
   ============================================================ */
/* Padding + bg via .rl-section.rl-section--cream */
/* Grid via .rl-2col-grid utility */
.rl-about-story .rl-about-story-img img {
  border-radius: 8px;
  width: 100%;
  height: auto;
  object-fit: cover;
}
/* Heading via .rl-section-heading.rl-section-heading--primary */
.rl-about-story .rl-body-text,
.rl-about-story p {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--charcoal);
  line-height: 1.8;
  margin-bottom: 16px;
}

/* ============================================================
   ABOUT — The Vision (.rl-about-vision)
   2-col: image left, text right
   ============================================================ */
/* Padding + bg via .rl-section.rl-section--white */
/* Grid via .rl-2col-grid utility */
.rl-about-vision .rl-about-vision-img img {
  border-radius: 8px;
  width: 100%;
  height: auto;
  object-fit: cover;
}
/* Heading via .rl-section-heading.rl-section-heading--primary */
.rl-about-vision p {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--charcoal);
  line-height: 1.8;
  margin-bottom: 16px;
}

/* ============================================================
   ABOUT — Meet the Founder (.rl-about-founder)
   Cream bg, 2-col: portrait left, bio right
   ============================================================ */
/* Padding + bg via .rl-section.rl-section--cream */
/* Grid via .rl-2col-grid utility */
.rl-about-founder .rl-about-founder-img img {
  border-radius: 8px;
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 3 / 4;
}
.rl-about-founder h3 {
  font-family: var(--wp--preset--font-family--cormorant-garamond);
  font-size: var(--wp--preset--font-size--2-xl);
  font-weight: 700;
  color: var(--wp--preset--color--primary);
  margin-bottom: 4px;
}
.rl-about-founder .rl-about-founder-title {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--base);
  font-weight: 600;
  color: var(--wp--preset--color--gold);
  margin-bottom: 20px;
}
.rl-about-founder .rl-about-founder-bio p {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--charcoal);
  line-height: 1.8;
  margin-bottom: 16px;
}

/* ============================================================
   ABOUT — Mission & Vision (.rl-about-mission)
   2-col cards on white bg
   ============================================================ */
/* Padding + bg via .rl-section.rl-section--white */
.rl-about-mission .rl-about-mission-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 32px;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}
.rl-about-mission .rl-about-mission-card {
  background-color: var(--wp--preset--color--cream);
  border-radius: 8px;
  padding: 40px 32px;
  box-sizing: border-box;
}
.rl-about-mission .rl-about-mission-card h3 {
  font-family: var(--wp--preset--font-family--cormorant-garamond);
  font-size: var(--wp--preset--font-size--2-xl);
  font-weight: 700;
  color: var(--wp--preset--color--primary);
  margin-bottom: 16px;
}
.rl-about-mission .rl-about-mission-card p {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--charcoal);
  line-height: 1.8;
}

/* ============================================================
   ABOUT — Our Values (.rl-about-values)
   Cream bg, 5 cards in 3+2 centered grid (6-col subgrid)
   ============================================================ */
/* Padding + bg via .rl-section.rl-section--cream */
/* Heading via .rl-section-heading.rl-section-heading--primary — keep 40px gap before grid */
.rl-about-values > .rl-section-heading {
  margin-bottom: 40px;
}
.rl-about-values .rl-about-values-grid {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 24px;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}
/* First 3 cards: span 2 columns each (fills row 1) */
.rl-about-values .rl-about-values-grid > .wp-block-column:nth-child(1) { grid-column: 1 / 3; }
.rl-about-values .rl-about-values-grid > .wp-block-column:nth-child(2) { grid-column: 3 / 5; }
.rl-about-values .rl-about-values-grid > .wp-block-column:nth-child(3) { grid-column: 5 / 7; }
/* Last 2 cards: span 2 columns, offset to center in row 2 */
.rl-about-values .rl-about-values-grid > .wp-block-column:nth-child(4) { grid-column: 2 / 4; }
.rl-about-values .rl-about-values-grid > .wp-block-column:nth-child(5) { grid-column: 4 / 6; }

.rl-about-values .rl-about-values-card {
  background-color: var(--wp--preset--color--white);
  border-radius: 8px;
  padding: 32px 24px;
  box-sizing: border-box;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.rl-about-values .rl-about-values-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.rl-about-values .rl-about-values-icon {
  font-size: 32px;
  margin-bottom: 8px;
  line-height: 1;
}
.rl-about-values .rl-about-values-card h4 {
  font-family: var(--wp--preset--font-family--cormorant-garamond);
  font-size: var(--wp--preset--font-size--xl);
  font-weight: 700;
  color: var(--wp--preset--color--primary);
  margin-bottom: 8px;
}
.rl-about-values .rl-about-values-card p:not(.rl-about-values-icon) {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--gray);
  line-height: 1.6;
}

/* ============================================================
   ABOUT — Business Credentials (.rl-about-credentials)
   White bg, centered heading + info table
   ============================================================ */
/* Padding + bg via .rl-section.rl-section--white */
/* Heading via .rl-section-heading.rl-section-heading--primary */
.rl-about-credentials > p {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--charcoal);
  line-height: 1.8;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 32px;
}
.rl-about-credentials .rl-about-credentials-table table {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  border-collapse: collapse;
}
.rl-about-credentials .rl-about-credentials-table th,
.rl-about-credentials .rl-about-credentials-table td {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--base);
  padding: 12px 20px;
  text-align: left;
  border-bottom: 1px solid var(--wp--preset--color--fog);
}
.rl-about-credentials .rl-about-credentials-table th {
  font-weight: 700;
  color: var(--wp--preset--color--primary);
  width: 40%;
}
.rl-about-credentials .rl-about-credentials-table td {
  color: var(--wp--preset--color--charcoal);
}

/* ============================================================
   ABOUT — Responsive
   ============================================================ */

/* --- Below md (< 768px): stack 2-col sections --- */
/* Mobile padding for all About sections handled by .rl-section responsive */
/* Grid stacking for story/vision/founder handled by .rl-2col-grid responsive */
@media (max-width: 767px) {
  .rl-about-vision .rl-about-vision-grid > :last-child {
    order: -1;
  }
  .rl-about-founder .rl-about-founder-img img {
    aspect-ratio: 4 / 3;
    max-height: 400px;
  }
  .rl-about-mission .rl-about-mission-grid {
    grid-template-columns: 1fr !important;
    gap: 24px;
  }
  .rl-about-values .rl-about-values-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }
  /* Reset 6-col subgrid to auto for mobile */
  .rl-about-values .rl-about-values-grid > .wp-block-column {
    grid-column: auto !important;
  }
  .rl-about-credentials .rl-about-credentials-table th,
  .rl-about-credentials .rl-about-credentials-table td {
    font-size: var(--wp--preset--font-size--sm);
    padding: 10px 12px;
  }
}

/* --- md to lg (768px – 1023px): tablet adjustments --- */
@media (min-width: 768px) and (max-width: 1023px) {
  .rl-about-values .rl-about-values-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
  /* 3 cards in first row: each spans ~1.33 cols (reset to auto, 3 fit in 4 cols) */
  .rl-about-values .rl-about-values-grid > .wp-block-column:nth-child(1),
  .rl-about-values .rl-about-values-grid > .wp-block-column:nth-child(2),
  .rl-about-values .rl-about-values-grid > .wp-block-column:nth-child(3) {
    grid-column: auto;
  }
  /* 2 cards in second row: centered */
  .rl-about-values .rl-about-values-grid > .wp-block-column:nth-child(4) { grid-column: 1 / 3; }
  .rl-about-values .rl-about-values-grid > .wp-block-column:nth-child(5) { grid-column: 3 / 5; }
}

/* ============================================================
   LEGAL CONTENT (.rl-legal)
   White bg, 800px max-width inner, section separators.
   Used by: Terms of Service, Privacy Policy, Refund Policy.
   ============================================================ */
/* Padding + bg via .rl-section.rl-section--white — uses custom 64px vertical padding */
.rl-legal {
  padding-top: 64px;
  padding-bottom: 64px;
}
.rl-legal-inner {
  max-width: 800px;
  margin: 0 auto;
}
.rl-legal-inner h2 {
  font-family: var(--wp--preset--font-family--cormorant-garamond);
  font-size: var(--wp--preset--font-size--2-xl);
  font-weight: 700;
  color: var(--wp--preset--color--primary);
  line-height: 1.3;
  margin: 40px 0 16px;
  padding-top: 32px;
  border-top: 1px solid var(--wp--preset--color--fog);
}
.rl-legal-inner h2:first-child {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}
.rl-legal-inner h3 {
  font-family: var(--wp--preset--font-family--cormorant-garamond);
  font-size: var(--wp--preset--font-size--xl);
  font-weight: 700;
  color: var(--wp--preset--color--charcoal);
  line-height: 1.3;
  margin: 24px 0 12px;
}
.rl-legal-inner p,
.rl-legal-inner li {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--charcoal);
  line-height: 1.8;
  margin-bottom: 12px;
}
.rl-legal-inner ul,
.rl-legal-inner ol {
  padding-left: 24px;
  margin-bottom: 16px;
}
.rl-legal-inner a {
  color: var(--wp--preset--color--gold);
}
.rl-legal-inner a:hover {
  color: var(--wp--preset--color--gold-dark);
}
.rl-legal-contact {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--wp--preset--color--fog);
}

/* Mobile padding for .rl-legal handled by .rl-section responsive */

/* ============================================================
   FAQ PAGE (.rl-faq-page)
   Extends shared .rl-faq accordion CSS with category groups.
   Uses .rl-section base for padding/content cap.
   ============================================================ */
.rl-faq-page .rl-faq-group {
  max-width: 800px;
  margin: 0 auto 40px;
}
.rl-faq-page .rl-faq-group:last-child {
  margin-bottom: 0;
}
.rl-faq-page .rl-faq-group h2 {
  font-family: var(--wp--preset--font-family--cormorant-garamond);
  font-size: var(--wp--preset--font-size--2-xl);
  font-weight: 700;
  color: var(--wp--preset--color--primary);
  line-height: 1.3;
  margin: 0 0 16px;
}
/* Accordion styling now uses .rl-faq-accordion utility from global.css */

/* ============================================================
   HOW TO ORDER (.rl-order-*)
   Numbered steps, payment/delivery icon grids, customization table.
   ============================================================ */
.rl-order-steps-list {
  max-width: 800px;
  margin: 0 auto;
}
.rl-order-step {
  display: flex;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px dashed var(--wp--preset--color--fog);
  align-items: flex-start;
}
.rl-order-step:last-child { border-bottom: none; }
.rl-order-step .rl-order-step-num {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--wp--preset--color--gold-button);
  color: var(--wp--preset--color--white);
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--base);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rl-order-step h3 {
  font-family: var(--wp--preset--font-family--cormorant-garamond);
  font-size: var(--wp--preset--font-size--xl);
  font-weight: 700;
  color: var(--wp--preset--color--primary);
  line-height: 1.3;
  margin: 0 0 4px;
}
.rl-order-step p {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--charcoal);
  line-height: 1.8;
  margin: 0;
}

/* Section heading (used by steps, payments, delivery, etc.) */
.rl-order-steps h2,
.rl-order-payments h2,
.rl-order-delivery h2,
.rl-order-table h2 {
  font-family: var(--wp--preset--font-family--cormorant-garamond);
  font-size: var(--wp--preset--font-size--4-xl);
  font-weight: 700;
  color: var(--wp--preset--color--charcoal);
  line-height: 1.3;
  margin-bottom: 32px;
}

/* Content spacing inside table section (blockGap is 0) */
.rl-order-table p { margin-bottom: 16px; }
.rl-order-table p:last-child { margin-bottom: 0; }
.rl-order-table .wp-block-table { margin-top: 24px; margin-bottom: 24px; }

/* Customization table */
.rl-order-table table {
  width: 100%;
  border-collapse: collapse;
  max-width: 800px;
  margin: 0 auto;
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--base);
}
.rl-order-table th {
  background-color: var(--wp--preset--color--cream);
  color: var(--wp--preset--color--primary);
  font-family: var(--wp--preset--font-family--cormorant-garamond);
  font-weight: 600;
  text-align: left;
  padding: 12px 16px;
}
.rl-order-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--wp--preset--color--fog);
  color: var(--wp--preset--color--charcoal);
}

/* Icon grid overrides for payment/delivery sections */
.rl-order-payments .rl-icon-grid.wp-block-columns,
.rl-order-delivery .rl-icon-grid.wp-block-columns {
  gap: 20px !important;
}
/* Payment: 6 items → 3-col desktop, 2-col mobile */
.rl-order-payments .rl-icon-grid.wp-block-columns {
  grid-template-columns: repeat(3, 1fr) !important;
}
/* Delivery: 4 items → 4-col desktop */
.rl-order-delivery .rl-icon-grid.wp-block-columns {
  grid-template-columns: repeat(4, 1fr) !important;
}

/* 6 items at 3-col — no tablet override needed */
@media (max-width: 767px) {
  .rl-order-payments .rl-icon-grid.wp-block-columns,
  .rl-order-delivery .rl-icon-grid.wp-block-columns {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 639px) {
  .rl-order-step { gap: 16px; padding: 20px 0; }
  .rl-order-step .rl-order-step-num { width: 36px; height: 36px; font-size: var(--wp--preset--font-size--sm); }
  /* Table horizontal scroll on small screens */
  .rl-order-table { overflow-x: auto; }
}

/* ============================================================
   CONTACT US (.rl-contact-*)
   Two-column form + sidebar layout, Fluent Forms styling.
   ============================================================ */

/* Padding + bg via .rl-section.rl-section--white */

/* Two-column grid: 58% form, 42% sidebar */
.rl-contact-main-grid.wp-block-columns {
  display: grid !important;
  grid-template-columns: 58% 42% !important;
  gap: 56px !important;
  max-width: 1080px;
  margin: 0 auto;
}

/* Form column — white card with subtle border */
.rl-contact-main-form {
  text-align: left;
  background-color: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--fog);
  border-radius: 8px;
  padding: 32px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
.rl-contact-main-form h2 {
  font-family: var(--wp--preset--font-family--cormorant-garamond);
  font-size: var(--wp--preset--font-size--4-xl);
  font-weight: 700;
  color: var(--wp--preset--color--primary);
  margin-bottom: 4px;
}
.rl-contact-main-form > p {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--gray);
  margin-bottom: 20px;
}

/* Sidebar column */
.rl-contact-main-sidebar {
  text-align: left;
  padding-top: 8px;
}
.rl-contact-main-sidebar h3 {
  font-family: var(--wp--preset--font-family--cormorant-garamond);
  font-size: var(--wp--preset--font-size--2-xl);
  font-weight: 700;
  color: var(--wp--preset--color--primary);
  margin-bottom: 20px;
}
.rl-contact-main-sidebar p {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--charcoal);
  line-height: 1.8;
  margin-bottom: 12px;
}
.rl-contact-main-sidebar a {
  color: var(--wp--preset--color--gold);
  text-decoration: none;
}
.rl-contact-main-sidebar a:hover {
  color: var(--wp--preset--color--gold-dark);
  text-decoration: underline;
}

/* Sidebar contact info card */
.rl-contact-info-card {
  background-color: var(--wp--preset--color--cream);
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 0;
}
.rl-contact-info-card h3 {
  font-size: var(--wp--preset--font-size--xl);
  margin-bottom: 16px;
}
.rl-contact-info-card p {
  margin-bottom: 8px;
}

/* Separator between contact info and checklist */
.rl-contact-main-sidebar .wp-block-separator {
  border-color: var(--wp--preset--color--fog);
  margin: 28px 0;
  opacity: 0.5;
}

/* Checklist — gold checkmarks */
.rl-contact-main-sidebar ul {
  list-style: none;
  padding: 0;
  margin-top: 12px;
}
.rl-contact-main-sidebar li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 10px;
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--charcoal);
  line-height: 1.6;
}
.rl-contact-main-sidebar li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--wp--preset--color--gold);
  font-weight: 700;
}

/* Social icons in sidebar — smaller, left-aligned */
.rl-contact-main-sidebar .rl-contact-social {
  gap: 10px;
  justify-content: flex-start;
  margin-top: 16px;
  margin-bottom: 4px;
}
.rl-contact-social {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.rl-contact-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white) !important;
  font-size: 13px;
  font-weight: 700;
  transition: background-color 0.2s;
  text-decoration: none !important;
}
.rl-contact-social a:hover {
  background-color: var(--wp--preset--color--gold) !important;
  color: var(--wp--preset--color--white) !important;
}

/* --- Fluent Forms styling (compacted) --- */

/* Field spacing — tighter than FF default */
.rl-contact-main-form .ff-el-group {
  margin-bottom: 12px;
}

/* Labels — smaller, tighter */
.rl-contact-main-form .ff-el-input--label label {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 700;
  color: var(--wp--preset--color--charcoal);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

/* Form inputs — compact padding */
.rl-contact-main-form .ff-el-form-control {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--base);
  border: 1px solid var(--wp--preset--color--fog);
  border-radius: 6px;
  padding: 10px 14px;
  background-color: #fafaf8;
  color: var(--wp--preset--color--charcoal);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.rl-contact-main-form .ff-el-form-control:focus {
  border-color: var(--wp--preset--color--gold);
  outline: none;
  box-shadow: 0 0 0 3px rgba(139, 101, 8, 0.08);
  background-color: var(--wp--preset--color--white);
}

/* Textarea — shorter */
.rl-contact-main-form textarea.ff-el-form-control {
  min-height: 110px;
  resize: vertical;
}

/* Help messages */
.rl-contact-main-form .ff-el-help-message {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--gray);
}

/* Submit button — matches rl-btn-gold, full width */
.rl-contact-main-form .ff-btn-submit {
  font-family: var(--wp--preset--font-family--lato);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background-color: var(--wp--preset--color--gold-button) !important;
  color: var(--wp--preset--color--white) !important;
  border: none;
  border-radius: 6px;
  padding: 16px 40px;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.2s;
  width: 100%;
}
.rl-contact-main-form .ff-btn-submit:hover {
  background-color: var(--wp--preset--color--gold-button-hover) !important;
  color: var(--wp--preset--color--white) !important;
  transform: translateY(-1px);
}

/* Required asterisk */
.rl-contact-main-form .ff-el-is-required .asterisk-right label::after {
  color: var(--wp--preset--color--terracotta);
}

/* Success/error messages */
.rl-contact-main-form .ff-message-success {
  background-color: var(--wp--preset--color--cream);
  border: 1px solid var(--wp--preset--color--gold);
  border-radius: 6px;
  color: var(--wp--preset--color--charcoal);
  font-family: var(--wp--preset--font-family--lato);
}

/* --- Contact responsive --- */
@media (max-width: 767px) {
  /* Mobile padding for .rl-contact-main handled by .rl-section responsive */
  .rl-contact-main-grid.wp-block-columns {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .rl-contact-main-sidebar { order: -1; }
  .rl-contact-main-form {
    padding: 28px 20px;
  }
}


/* ==============================================================
   MY ACCOUNT
   Logged-out: login/register forms
   Logged-in: dashboard, orders, addresses, account details
   ============================================================== */

/* --- Wrapper --- */
.rl-myaccount {
  padding-top: 48px;
  padding-bottom: 80px;
}

/* --- Hide Downloads tab (no digital products) --- */
.woocommerce-MyAccount-navigation-link--downloads { display: none !important; }

/* --- Layout: sidebar + content --- */
.woocommerce-MyAccount-navigation,
.woocommerce-MyAccount-content {
  font-family: var(--wp--preset--font-family--lato);
}
/* Grid only when nav exists (logged-in) — :has() targets the nav presence */
.rl-myaccount .woocommerce:has(.woocommerce-MyAccount-navigation) {
  display: grid !important;
  grid-template-columns: 220px 1fr;
  gap: 48px;
  max-width: 1200px;
  margin: 0 auto;
}
/* Kill WC clearfix pseudo-elements — they create phantom grid items */
.rl-myaccount .woocommerce:has(.woocommerce-MyAccount-navigation)::before,
.rl-myaccount .woocommerce:has(.woocommerce-MyAccount-navigation)::after {
  display: none !important;
}

/* Logged-out: center the login/register container */
.rl-myaccount .woocommerce:not(:has(.woocommerce-MyAccount-navigation)) {
  max-width: 900px;
  margin: 0 auto;
}

/* --- Sidebar navigation --- */
.rl-myaccount .woocommerce-MyAccount-navigation {
  float: none !important;
  width: auto !important;
  align-self: start;
}
.rl-myaccount .woocommerce-MyAccount-content {
  float: none !important;
  width: auto !important;
}
.woocommerce-MyAccount-navigation ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.woocommerce-MyAccount-navigation li {
  margin: 0 !important;
  padding: 0 !important;
}
.woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 12px 16px;
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--base);
  font-weight: 500;
  color: var(--wp--preset--color--charcoal);
  text-decoration: none;
  border-radius: 6px;
  transition: background-color 0.2s, color 0.2s;
}
.woocommerce-MyAccount-navigation li a:hover {
  background-color: var(--wp--preset--color--cream);
  color: var(--wp--preset--color--primary);
}
.woocommerce-MyAccount-navigation li.is-active a {
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
  font-weight: 600;
}

/* Nav icons via ::before pseudo-elements */
.woocommerce-MyAccount-navigation li a::before {
  display: inline-block;
  width: 18px;
  margin-right: 10px;
  text-align: center;
  font-size: 15px;
}
.woocommerce-MyAccount-navigation-link--dashboard a::before { content: "\2302"; }
.woocommerce-MyAccount-navigation-link--orders a::before { content: "\1F4E6"; }
.woocommerce-MyAccount-navigation-link--edit-address a::before { content: "\1F4CD"; }
.woocommerce-MyAccount-navigation-link--edit-account a::before { content: "\2699"; }
.woocommerce-MyAccount-navigation-link--customer-logout a::before { content: "\2192"; }

/* Logout link styling */
.woocommerce-MyAccount-navigation-link--customer-logout {
  margin-top: 12px;
  border-top: 1px solid var(--wp--preset--color--fog);
  padding-top: 12px;
}
.woocommerce-MyAccount-navigation-link--customer-logout a {
  color: var(--wp--preset--color--gray);
  font-size: var(--wp--preset--font-size--sm);
}
.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
  color: var(--wp--preset--color--terracotta);
  background-color: transparent;
}

/* --- Content area --- */
.woocommerce-MyAccount-content {
  min-width: 0; /* prevent grid blowout */
}
.woocommerce-MyAccount-content > p:first-of-type {
  font-size: var(--wp--preset--font-size--base);
  line-height: 1.7;
  color: var(--wp--preset--color--charcoal);
}

/* --- Dashboard welcome text --- */
.woocommerce-MyAccount-content > p:first-of-type strong {
  color: var(--wp--preset--color--primary);
}

/* --- Orders table --- */
.woocommerce-orders-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--wp--preset--font-size--base);
}
.woocommerce-orders-table thead {
  background-color: var(--wp--preset--color--cream);
}
.woocommerce-orders-table th {
  font-family: var(--wp--preset--font-family--lato);
  font-weight: 600;
  font-size: var(--wp--preset--font-size--sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--wp--preset--color--gray);
  padding: 12px 16px;
  text-align: left;
  border-bottom: 2px solid var(--wp--preset--color--fog);
}
.woocommerce-orders-table td {
  padding: 16px;
  border-bottom: 1px solid var(--wp--preset--color--fog);
  color: var(--wp--preset--color--charcoal);
  vertical-align: middle;
}
.woocommerce-orders-table tr:last-child td {
  border-bottom: none;
}

/* Order number link */
.woocommerce-orders-table td a {
  color: var(--wp--preset--color--primary);
  font-weight: 600;
  text-decoration: none;
}
.woocommerce-orders-table td a:hover {
  color: var(--wp--preset--color--gold);
}

/* Order action buttons */
.woocommerce-orders-table .woocommerce-button,
.woocommerce-orders-table .button {
  display: inline-block;
  padding: 8px 20px;
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none;
  border-radius: 4px;
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white) !important;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s;
  margin: 2px 0;
}
.woocommerce-orders-table .woocommerce-button:hover,
.woocommerce-orders-table .button:hover {
  background-color: var(--wp--preset--color--primary-dark);
  color: var(--wp--preset--color--white) !important;
}
/* Cancel button — outline style */
.woocommerce-orders-table .cancel {
  background-color: transparent;
  color: var(--wp--preset--color--error) !important;
  border: 1px solid var(--wp--preset--color--error);
}
.woocommerce-orders-table .cancel:hover {
  background-color: var(--wp--preset--color--error);
  color: var(--wp--preset--color--white) !important;
}

/* --- Address cards --- */
.woocommerce-MyAccount-content .woocommerce-Addresses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.woocommerce-MyAccount-content .woocommerce-Address {
  background-color: var(--wp--preset--color--cream);
  border-radius: 8px;
  padding: 24px;
}
.woocommerce-MyAccount-content .woocommerce-Address header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--wp--preset--color--fog);
}
.woocommerce-MyAccount-content .woocommerce-Address h3 {
  font-family: var(--wp--preset--font-family--cormorant-garamond);
  font-size: var(--wp--preset--font-size--xl);
  font-weight: 700;
  color: var(--wp--preset--color--charcoal);
  margin: 0;
}
.woocommerce-MyAccount-content .woocommerce-Address header a {
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--gold);
  text-decoration: none;
  font-weight: 600;
}
.woocommerce-MyAccount-content .woocommerce-Address header a:hover {
  color: var(--wp--preset--color--gold-dark);
}
.woocommerce-MyAccount-content .woocommerce-Address address {
  font-style: normal;
  line-height: 1.7;
  color: var(--wp--preset--color--charcoal);
}

/* --- Account edit form --- */
.woocommerce-EditAccountForm label {
  display: block;
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 600;
  color: var(--wp--preset--color--charcoal);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.woocommerce-EditAccountForm .woocommerce-Input,
.woocommerce-EditAccountForm input[type="text"],
.woocommerce-EditAccountForm input[type="email"],
.woocommerce-EditAccountForm input[type="password"] {
  width: 100%;
  max-width: 500px;
  padding: 10px 14px;
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--base);
  border: 1px solid var(--wp--preset--color--fog);
  border-radius: 6px;
  background-color: var(--wp--preset--color--white);
  color: var(--wp--preset--color--charcoal);
  transition: border-color 0.2s;
}
.woocommerce-EditAccountForm .woocommerce-Input:focus,
.woocommerce-EditAccountForm input:focus {
  border-color: var(--wp--preset--color--primary);
  outline: none;
  box-shadow: 0 0 0 2px rgba(44, 74, 62, 0.1);
}
.woocommerce-EditAccountForm .woocommerce-form-row {
  margin-bottom: 20px;
}
.woocommerce-EditAccountForm em {
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--gray);
}
.woocommerce-EditAccountForm .required {
  color: var(--wp--preset--color--terracotta);
}

/* Name fields side-by-side */
.woocommerce-EditAccountForm .form-row-first,
.woocommerce-EditAccountForm .form-row-last {
  display: inline-block;
  width: calc(50% - 8px);
  vertical-align: top;
}
.woocommerce-EditAccountForm .form-row-first { margin-right: 12px; }
.woocommerce-EditAccountForm .form-row-first input,
.woocommerce-EditAccountForm .form-row-last input {
  max-width: 100%;
}

/* Password change fieldset */
.woocommerce-EditAccountForm fieldset {
  border: 1px solid var(--wp--preset--color--fog);
  border-radius: 8px;
  padding: 24px;
  margin: 24px 0;
  max-width: 500px;
}
.woocommerce-EditAccountForm fieldset legend {
  font-family: var(--wp--preset--font-family--cormorant-garamond);
  font-size: var(--wp--preset--font-size--xl);
  font-weight: 700;
  color: var(--wp--preset--color--charcoal);
  padding: 0 8px;
}

/* Save button */
.woocommerce-EditAccountForm .woocommerce-Button,
.woocommerce-MyAccount-content .woocommerce-Button,
.woocommerce-MyAccount-content button[type="submit"],
.woocommerce-MyAccount-content input[type="submit"] {
  display: inline-block;
  padding: 14px 32px;
  font-family: var(--wp--preset--font-family--lato);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background-color: var(--wp--preset--color--gold-button);
  color: var(--wp--preset--color--white) !important;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}
.woocommerce-EditAccountForm .woocommerce-Button:hover,
.woocommerce-MyAccount-content .woocommerce-Button:hover,
.woocommerce-MyAccount-content button[type="submit"]:hover,
.woocommerce-MyAccount-content input[type="submit"]:hover {
  background-color: var(--wp--preset--color--gold-button-hover);
  color: var(--wp--preset--color--white) !important;
}

/* --- Login form (logged-out — registration disabled, only login shown) --- */
.rl-myaccount #customer_login {
  max-width: 480px;
  margin: 0 auto;
}
.rl-myaccount #customer_login::before,
.rl-myaccount #customer_login::after {
  display: none !important;
}
.rl-myaccount #customer_login .u-column1 {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  background-color: var(--wp--preset--color--cream);
  border-radius: 8px;
  padding: 36px 32px;
}

/* Login/Register headings */
.rl-myaccount h2 {
  font-family: var(--wp--preset--font-family--cormorant-garamond);
  font-size: var(--wp--preset--font-size--2-xl);
  font-weight: 700;
  color: var(--wp--preset--color--charcoal);
  margin: 0 0 24px;
}

/* Form inputs */
.rl-myaccount .woocommerce-form-login label {
  display: block;
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 600;
  color: var(--wp--preset--color--charcoal);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.rl-myaccount .woocommerce-form-login input[type="text"],
.rl-myaccount .woocommerce-form-login input[type="email"],
.rl-myaccount .woocommerce-form-login input[type="password"] {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--wp--preset--font-family--lato);
  font-size: var(--wp--preset--font-size--base);
  border: 1px solid var(--wp--preset--color--fog);
  border-radius: 6px;
  background-color: var(--wp--preset--color--white);
  color: var(--wp--preset--color--charcoal);
  margin-bottom: 16px;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.rl-myaccount .woocommerce-form-login input:focus {
  border-color: var(--wp--preset--color--primary);
  outline: none;
  box-shadow: 0 0 0 2px rgba(44, 74, 62, 0.1);
}

/* Required asterisk */
.rl-myaccount .required {
  color: var(--wp--preset--color--terracotta);
}

/* Login button */
.rl-myaccount .woocommerce-form-login .woocommerce-button {
  display: inline-block;
  width: 100%;
  padding: 14px 24px;
  font-family: var(--wp--preset--font-family--lato);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white) !important;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}
.rl-myaccount .woocommerce-form-login .woocommerce-button:hover {
  background-color: var(--wp--preset--color--primary-dark);
  color: var(--wp--preset--color--white) !important;
}

/* Remember me checkbox */
.rl-myaccount .woocommerce-form-login .woocommerce-form-login__rememberme {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--gray);
}

/* Lost password link */
.rl-myaccount .woocommerce-form-login .woocommerce-LostPassword a {
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--gold);
  text-decoration: none;
}
.rl-myaccount .woocommerce-form-login .woocommerce-LostPassword a:hover {
  color: var(--wp--preset--color--gold-dark);
}

/* --- WC Notices --- */
.woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-MyAccount-content .woocommerce-info,
.rl-myaccount .woocommerce-message,
.rl-myaccount .woocommerce-info {
  background-color: var(--wp--preset--color--cream);
  border: 1px solid var(--wp--preset--color--gold);
  border-radius: 6px;
  color: var(--wp--preset--color--charcoal);
  font-family: var(--wp--preset--font-family--lato);
  padding: 12px 16px;
  margin-bottom: 24px;
}
.woocommerce-MyAccount-content .woocommerce-error,
.rl-myaccount .woocommerce-error {
  background-color: #fef2f2;
  border: 1px solid var(--wp--preset--color--error);
  border-radius: 6px;
  color: var(--wp--preset--color--charcoal);
  font-family: var(--wp--preset--font-family--lato);
  padding: 12px 16px;
  margin-bottom: 24px;
}

/* --- My Account responsive --- */
@media (max-width: 767px) {
  .rl-myaccount { padding-top: 32px; padding-bottom: 48px; }

  /* Stack sidebar + content */
  .rl-myaccount .woocommerce:has(.woocommerce-MyAccount-navigation) {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* Horizontal nav on mobile */
  .woocommerce-MyAccount-navigation ul {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .woocommerce-MyAccount-navigation li a {
    white-space: nowrap;
    padding: 8px 14px;
    font-size: var(--wp--preset--font-size--sm);
  }
  .woocommerce-MyAccount-navigation li a::before { display: none; }
  .woocommerce-MyAccount-navigation-link--customer-logout {
    margin-top: 0;
    border-top: none;
    padding-top: 0;
  }

  /* Login form */
  .rl-myaccount #customer_login {
    max-width: 100%;
  }
  .rl-myaccount .woocommerce-form-login,
  .rl-myaccount .woocommerce-form-register {
    padding: 28px 20px;
  }

  /* Account form name fields stack */
  .woocommerce-EditAccountForm .form-row-first,
  .woocommerce-EditAccountForm .form-row-last {
    display: block;
    width: 100%;
    margin-right: 0;
  }

  /* Address cards stack */
  .woocommerce-MyAccount-content .woocommerce-Addresses {
    grid-template-columns: 1fr;
  }

  /* Orders table responsive */
  .woocommerce-orders-table thead { display: none; }
  .woocommerce-orders-table,
  .woocommerce-orders-table tbody,
  .woocommerce-orders-table tr,
  .woocommerce-orders-table td {
    display: block;
  }
  .woocommerce-orders-table tr {
    background-color: var(--wp--preset--color--cream);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
  }
  .woocommerce-orders-table td {
    padding: 4px 0;
    border-bottom: none;
  }
  .woocommerce-orders-table td::before {
    content: attr(data-title) ": ";
    font-weight: 600;
    color: var(--wp--preset--color--gray);
    font-size: var(--wp--preset--font-size--sm);
    text-transform: uppercase;
    letter-spacing: 0.3px;
  }
  .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions {
    padding-top: 12px;
  }
  .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions::before {
    display: none;
  }
}