/*
 * Raftaar Commerce — Pure Handcrafted CSS
 * Zero Tailwind. Zero build tools. Upload and works.
 * 
 * Design: Shopify/Hyva feel — Inter font, 4px grid, frosted glass,
 * micro-animations, premium product cards.
 *
 * @package RaftaarCommerce v1.0.0
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1. CSS CUSTOM PROPERTIES (brand tokens)
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  /* ── Brand colours (Slate — default neutral/monochrome) ─────────────────── */
  --rc-primary:      #1d1d1b;
  --rc-primary-dark: #000000;
  --rc-primary-rgb:  29,29,27;
  --rc-accent:       #1d1d1b;
  --rc-accent-dark:  #000000;
  --rc-text:         #1d1d1b;
  --rc-muted:        #76766f;
  --rc-surface:      #f7f7f5;
  --rc-border:       #e4e4e0;
  --rc-border-dark:  #ccccc8;
  --rc-white:        #ffffff;

  /* ── Page card system ────────────────────────────────────────────────────── */
  --rc-page-bg:      #f0f0ed;   /* outer grey wrap — canvas behind white card  */
  --rc-card-radius:  12px;      /* card corners when docked (scroll = 0)       */

  /* ── Typography ──────────────────────────────────────────────────────────── */
  --rc-font:         'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --rc-font-heading: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ── Shape & spacing ──────────────────────────────────────────────────────  */
  --rc-radius:       0.75rem;
  /* Derived from --rc-radius (not a separate Customizer field) so the
     "Global border radius" setting governs every RC block consistently —
     these ratios (2/3 and 4/3) reproduce the previous fixed 0.5rem/1rem
     exactly at the 0.75rem default, but now scale with every other preset
     too (e.g. "Sharp" collapses both to 0, "Pill" scales both up). */
  --rc-radius-sm:    calc(var(--rc-radius) * 0.6667);
  --rc-radius-lg:    calc(var(--rc-radius) * 1.3333);

  /* ── Shadows ──────────────────────────────────────────────────────────────  */
  --rc-shadow-sm:    0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
  --rc-shadow:       0 4px 16px rgba(0,0,0,0.07), 0 2px 6px rgba(0,0,0,0.04);
  --rc-shadow-lg:    0 8px 32px rgba(0,0,0,0.09), 0 4px 12px rgba(0,0,0,0.05);

  /* ── Layout & chrome ──────────────────────────────────────────────────────  */
  --rc-header-h:     64px;
  --rc-ease:         cubic-bezier(0.4, 0, 0.2, 1);
  --rc-ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --rc-container:    1080px;
  --rc-footer-bg:    #111110;
  --rc-footer-text:  #d4d4cf;

  /* ── Semantic states ──────────────────────────────────────────────────────  */
  --rc-success:      #22c55e;
  --rc-success-dark: #16a34a;
  --rc-warning:      #f59e0b;
  --rc-error:        #ef4444;

  /* Button text on primary background */
  --rc-btn-text:     #ffffff;

  /* Legacy alias kept for back-compat */
  --rc-secondary:    var(--rc-surface);
}

/* ── Colour variant: Sage (earthy green) ────────────────────────────────── */
[data-rc-variant="sage"] {
  --rc-primary:      #2d5a27;
  --rc-primary-dark: #1e3d1a;
  --rc-primary-rgb:  45,90,39;
  --rc-accent:       #4a7c40;
  --rc-accent-dark:  #336b29;
  --rc-text:         #1a2918;
  --rc-muted:        #5a7053;
  --rc-surface:      #f4f8f3;
  --rc-border:       #d6e4d2;
  --rc-border-dark:  #b8d1b3;
  --rc-page-bg:      #eef2ed;
  --rc-footer-bg:    #1a2918;
  --rc-footer-text:  #b8d1b3;
}

/* ── Colour variant: Dusk (violet/purple) ───────────────────────────────── */
[data-rc-variant="dusk"] {
  --rc-primary:      #5b21b6;
  --rc-primary-dark: #4c1d95;
  --rc-primary-rgb:  91,33,182;
  --rc-accent:       #7c3aed;
  --rc-accent-dark:  #6d28d9;
  --rc-text:         #1e1b2e;
  --rc-muted:        #6b6884;
  --rc-surface:      #f8f6fc;
  --rc-border:       #ddd8ed;
  --rc-border-dark:  #c7c0e0;
  --rc-page-bg:      #f2f0f7;
  --rc-footer-bg:    #1e1b2e;
  --rc-footer-text:  #c7c0e0;
}

/* ── Colour variant: Bloom (warm rose/coral) ────────────────────────────── */
[data-rc-variant="bloom"] {
  --rc-primary:      #9d174d;
  --rc-primary-dark: #831843;
  --rc-primary-rgb:  157,23,77;
  --rc-accent:       #e11d48;
  --rc-accent-dark:  #be123c;
  --rc-text:         #1f1217;
  --rc-muted:        #7d5663;
  --rc-surface:      #fdf5f7;
  --rc-border:       #ecdde3;
  --rc-border-dark:  #ddc5ce;
  --rc-page-bg:      #f7f0f2;
  --rc-footer-bg:    #1f1217;
  --rc-footer-text:  #ddc5ce;
}

/* ── Colour variant: Midnight (dark/deep) ───────────────────────────────── */
[data-rc-variant="midnight"] {
  /* Was #a78bfa — kept in sync with the corrected value in
     inc/performance.php's rc_color_variants() (2.72:1 against white button
     text and 4.04:1 as nav-current-link text both failed WCAG AA's 4.5:1). */
  --rc-primary:      #baa3fb;
  --rc-primary-dark: #c4b5fd;
  --rc-primary-rgb:  186,163,251;
  --rc-accent:       #34d399;
  --rc-accent-dark:  #10b981;
  --rc-text:         #f1f5f9;
  --rc-muted:        #94a3b8;
  --rc-surface:      #13131a;
  --rc-border:       #2a2b38;
  --rc-border-dark:  #363748;
  --rc-page-bg:      #0c0c10;
  --rc-footer-bg:    #06060a;
  /* Was #64748b — only 4.25:1 against footer_bg, under the 4.5:1 AA minimum.
     Kept in sync with the corrected value in inc/performance.php's
     rc_color_variants() — this static block is the fallback used if the
     dynamic CSS-var pipeline ever fails to fire (see 33-css-architecture.md). */
  --rc-footer-text:  #7385a0;
  --rc-white:        #1a1a24;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. RESET & BASE
   ═══════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--rc-page-bg);
  scrollbar-gutter: stable; /* prevent layout shift when body overflow:hidden removes scrollbar */
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    will-change: auto !important;
  }
}

html, body {
  background-color: var(--rc-page-bg, #f0f0ed) !important;
  margin: 0 !important;
  padding: 0 !important;
}

body {
  font-family: var(--rc-font);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--rc-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* WP-specific resets */
body.rc-body {
  padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 1024px) {
  body.rc-body { padding-bottom: 0; }
}

/* Responsive container: 1080px on small laptops, 1280px on large screens */
@media (min-width: 1440px) {
  :root { --rc-container: 1280px; }
}

/* Admin bar offset — margin-top (not just top) so the header's own reserved
   flow space grows to match where it's actually pinned; otherwise #rc-main
   starts right after the header's un-shifted static position while the
   header itself renders 32px lower, visually overlapping the page's first
   32px. Kept off html/body (unlike WP core's own admin-bar spacer) since
   several 100vh/100dvh sections elsewhere assume an un-shifted viewport. */
.admin-bar .rc-header { top: 32px; margin-top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .rc-header { top: 46px; margin-top: 46px; }
}

/* WordPress page/site wrappers full-width */
#page, .site, #content, .site-content, .site-main {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  float: none !important;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font: inherit; border: none; background: none; }
ul, ol { list-style: none; }
input, select, textarea { font: inherit; }
[x-cloak] { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   3. ACCESSIBILITY
   ═══════════════════════════════════════════════════════════════════════════ */
.rc-skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 9999;
  padding: 0.5rem 1rem;
  background: var(--rc-primary);
  color: var(--rc-btn-text);
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 0 0 var(--rc-radius) var(--rc-radius);
  transition: top 0.2s;
  text-decoration: none;
}
.rc-skip-link:focus { top: 0; }

/* No-JS navigation bar — hidden by default, revealed via <noscript> style injection */
.rc-noscript-bar {
  display: none;
  align-items: center;
  gap: 1rem;
  padding: 0.625rem 1.25rem;
  background: var(--rc-surface);
  border-bottom: 1px solid var(--rc-border);
  flex-wrap: wrap;
}
.rc-noscript-bar__logo {
  font-weight: 800;
  font-size: 1rem;
  color: var(--rc-text);
  text-decoration: none;
  margin-right: auto;
}
.rc-noscript-bar__logo img { height: 32px; width: auto; display: block; }
.rc-noscript-bar__menu {
  display: flex;
  gap: 0.125rem;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.rc-noscript-bar__menu li a {
  display: block;
  padding: 0.375rem 0.75rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--rc-text);
  text-decoration: none;
  border-radius: var(--rc-radius);
}
.rc-noscript-bar__menu li a:hover { background: var(--rc-surface); }
.rc-noscript-bar__cart {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--rc-primary);
  text-decoration: none;
  padding: 0.375rem 0.75rem;
  border: 1.5px solid var(--rc-primary);
  border-radius: var(--rc-radius);
}

:focus-visible {
  outline: 2.5px solid var(--rc-primary);
  outline-offset: 2px;
  border-radius: 3px;
}
:focus:not(:focus-visible) { outline: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   3b. TYPOGRAPHY — Satoshi-optimised heading & body scale
   ═══════════════════════════════════════════════════════════════════════════ */

/* Heading defaults — tighter tracking suits Satoshi's geometric cuts */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--rc-font-heading);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--rc-text);
  margin: 0;
}

h1 { font-size: clamp(2rem,   5vw, 3rem);    letter-spacing: -0.04em; }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); }
h3 { font-size: clamp(1.125rem, 2.5vw, 1.5rem); }
h4 { font-size: 1.125rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.875rem; }

p { margin: 0 0 1rem; line-height: 1.65; }
p:last-child { margin-bottom: 0; }

/* Running body text (post/page content) */
.entry-content p,
.woocommerce-product-details__short-description p,
.woocommerce-tabs .panel p {
  line-height: 1.7;
  color: var(--rc-text);
}

/* Bold / strong */
strong, b { font-weight: 700; }

/* Utility typography classes */
.rc-text-muted    { color: var(--rc-muted); }
.rc-text-sm       { font-size: 0.875rem; }
.rc-text-xs       { font-size: 0.75rem; }
.rc-text-lg       { font-size: 1.125rem; }
.rc-text-xl       { font-size: 1.25rem; }
.rc-text-tight    { letter-spacing: -0.03em; }
.rc-text-caps     { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.75rem; font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════════════
   4. LAYOUT
   ═══════════════════════════════════════════════════════════════════════════ */
.rc-container {
  width: 100%;
  max-width: var(--rc-container, 1280px);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* ── Gutenberg block: full layout mode ──────────────────────────────────────── */
/* Breaks out of a constrained page container to fill the full viewport width.  */
/* Scoped to .rc-page-body so homepage blocks (already full-width in rc-main)   */
/* are unaffected — avoids 100vw > content-width overflow on the homepage.      */
.rc-page-body .rc-block--full {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

/* #rc-main carries is-layout-constrained (front-page.php) purely so WP core's
   .is-layout-constrained > .aligncenter rule can centre plain Gutenberg
   blocks (e.g. Image) dropped into the homepage — see the image-centering
   investigation. That same WP rule also injects a 24px top margin between
   every direct child via a zero-specificity :where() selector; the homepage's
   RC block sections are designed to sit flush with no gap, so it's zeroed
   out here at real specificity (this rule wins regardless of source order). */
#rc-main.rc-home-main > * {
  margin-block-start: 0;
}

/* ── Gutenberg block: boxed layout mode ─────────────────────────────────────── */
/* Constrains the block wrapper so border-radius and box-shadow work cleanly.   */
/* Content is clipped at the border-radius; box-shadow renders outside the box. */
.rc-block--boxed {
  max-width: var(--rc-boxed-width, 1280px);
  margin-inline: auto;
  overflow: hidden;
}
@media (min-width: 640px) {
  .rc-container { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1024px) {
  .rc-container { padding-left: 2rem; padding-right: 2rem; }
}

.rc-main {
  min-height: 60vh;
  background: var(--rc-white);
  position: relative; /* stacking context for content above grey bg */
}

/* ═══════════════════════════════════════════════════════════════════════════
   4b. PAGE CARD SCROLL-MORPH (Satoshi-inspired)
   ─ Four page-bg coloured masks sit at the viewport corners.
   ─ They give the illusion that the viewport itself has rounded corners,
     making the white content look like a floating card at scroll=0.
   ─ On scroll they slide off-screen, "expanding" the card to fill the screen.
   ═══════════════════════════════════════════════════════════════════════════ */
.rc-corner {
  position: fixed;
  z-index: 9990;
  width: var(--rc-card-radius, 12px);
  height: var(--rc-card-radius, 12px);
  background: var(--rc-page-bg, #f0f0ed);
  pointer-events: none;
  will-change: transform;
  transition:
    transform      0.35s cubic-bezier(0.4, 0, 0.2, 1) 0.10s,
    border-radius  0.30s cubic-bezier(0.4, 0, 0.2, 1) 0.40s;
}

.rc-corner--tl { top: 0;    left:  0; border-bottom-right-radius: var(--rc-card-radius, 12px); }
.rc-corner--tr { top: 0;    right: 0; border-bottom-left-radius:  var(--rc-card-radius, 12px); }
.rc-corner--bl { bottom: 0; left:  0; border-top-right-radius:    var(--rc-card-radius, 12px); }
.rc-corner--br { bottom: 0; right: 0; border-top-left-radius:     var(--rc-card-radius, 12px); }

/* When scrolled: corners slide out to viewport edge + lose inner radius */
.rc-corner--gone {
  border-radius: 0 !important;
}
.rc-corner--tl.rc-corner--gone { transform: translate(-100%, -100%); }
.rc-corner--tr.rc-corner--gone { transform: translate(100%,  -100%); }
.rc-corner--bl.rc-corner--gone { transform: translate(-100%, 100%);  }
.rc-corner--br.rc-corner--gone { transform: translate(100%,  100%);  }

/* Mobile: bottom nav takes 60px, offset bottom corners */
@media (max-width: 1023px) {
  .rc-corner--bl,
  .rc-corner--br { bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. HEADER — Centred logo, pill menu left, icons right
   ═══════════════════════════════════════════════════════════════════════════ */
.rc-header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 500;
  height: var(--rc-header-h);
  background: var(--rc-surface);
  transition:
    transform    280ms var(--rc-ease),
    background   220ms var(--rc-ease),
    border-color 220ms var(--rc-ease),
    box-shadow   220ms var(--rc-ease);
  will-change: transform;
}

.rc-header--scrolled {
  background: color-mix(in srgb, var(--rc-surface) 96%, transparent) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-color: var(--rc-border) !important;
  box-shadow: 0 1px 0 var(--rc-border), 0 4px 24px rgba(0,0,0,0.04) !important;
}

.rc-header--hidden { transform: translateY(-100%); }

/* Non-sticky: scroll with page, never hide via transform */
.rc-header--static {
  position: relative !important;
  transform: none !important;
}

.rc-header--transparent {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Glassmorphism header (Variant B — commerce) */
.rc-header--glass {
  background: rgba(255, 255, 255, 0.14) !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.12), inset 0 0 0 0.5px rgba(255,255,255,0.18) !important;
}
.rc-header--glass.rc-header--scrolled {
  background: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border-bottom: 1px solid var(--rc-border) !important;
}
/* Pure white icon buttons on glass header */
.rc-header--glass .rc-btn-icon,
.rc-header--glass .rc-menu-pill {
  background: var(--rc-white);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10), 0 0 0 0.5px rgba(0,0,0,0.04);
}
.rc-header--glass .rc-btn-icon:hover,
.rc-header--glass .rc-menu-pill:hover {
  background: #f5f5f5;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.13), 0 0 0 0.5px rgba(0,0,0,0.04);
}
.rc-header--glass.rc-header--scrolled .rc-btn-icon,
.rc-header--glass.rc-header--scrolled .rc-menu-pill {
  background: var(--rc-white);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* On pages with a flush-hero layout (no page title, hero sits right under header),
   the glass header would show the image bleeding through its semi-transparent
   background as soon as the user scrolls. Force it solid so image stays below. */
body:has(.rc-page--no-header) #rc-header.rc-header--glass,
body:has(.rc-page--no-header) #rc-header.rc-header--glass.rc-header--scrolled {
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border-bottom: 1px solid var(--rc-border) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.06) !important;
}

/* ── 3-zone inner grid ────────────────────────────────────────────────────── */
.rc-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 100%;
  max-width: var(--rc-container, 1280px);
  margin: 0 auto;
  padding: 0 1.25rem;
}

.rc-header__left  { display: flex; align-items: center; justify-content: flex-start; }
.rc-header__center{ display: flex; align-items: center; justify-content: center; }
.rc-header__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.125rem;
}

/* ── Logo ──────────────────────────────────────────────────────────────────── */
.rc-logo-text {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--rc-text);
  letter-spacing: -0.03em;
  text-decoration: none;
  display: block;
}

.rc-header__logo .custom-logo-link { display: flex; align-items: center; }
.rc-header__logo .custom-logo { max-height: var(--rc-logo-h, 36px); width: auto; }

/* ── Pill menu button ─────────────────────────────────────────────────────── */
.rc-menu-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.75rem;
  height: 48px;
  background: color-mix(in srgb, var(--rc-surface) 92%, var(--rc-text));
  border: none;
  border-radius: var(--rc-radius-sm);
  color: var(--rc-text);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background    200ms cubic-bezier(0.4,0,0.2,1),
    color         200ms cubic-bezier(0.4,0,0.2,1),
    transform      80ms;
}
.rc-menu-pill:hover {
  background: color-mix(in srgb, var(--rc-surface) 82%, var(--rc-text));
}
.rc-menu-pill:active { transform: scale(0.97); }
.rc-menu-pill--open  { background: color-mix(in srgb, var(--rc-surface) 82%, var(--rc-text)); }

/* Animated three-line icon inside pill */
.rc-menu-pill__icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3.5px;
  width: 15px;
  height: 12px;
  flex-shrink: 0;
}
.rc-menu-pill__icon span {
  display: block;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
  transform-origin: center;
  transition: transform 250ms var(--rc-ease), opacity 180ms;
}
.rc-menu-pill--open .rc-menu-pill__icon span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.rc-menu-pill--open .rc-menu-pill__icon span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.rc-menu-pill--open .rc-menu-pill__icon span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* Text label: desktop only */
.rc-menu-pill__label { display: none; }
@media (min-width: 1024px) { .rc-menu-pill__label { display: block; } }

/* Admin bar offset */
.admin-bar .rc-nav-flyout { top: calc(var(--rc-header-h) + 32px); }
@media screen and (max-width: 782px) {
  .admin-bar .rc-nav-flyout { top: calc(var(--rc-header-h) + 46px); }
}

/* ── Icon buttons (search, account, cart) ─────────────────────────────────── */
.rc-btn-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--rc-radius-sm);
  color: var(--rc-text);
  background: color-mix(in srgb, var(--rc-surface) 92%, var(--rc-text));
  border: none;
  cursor: pointer;
  transition: background 200ms cubic-bezier(0.4,0,0.2,1), color 200ms cubic-bezier(0.4,0,0.2,1), transform 80ms;
}
.rc-btn-icon:hover  { background: color-mix(in srgb, var(--rc-surface) 82%, var(--rc-text)); }
.rc-btn-icon:active { transform: scale(0.92); }

/* ── Heart-to-cart punch animation ──────────────────────────────────────── */
@keyframes rc-cart-punch {
    0%   { transform: scale(1);    color: inherit;              filter: none; }
    18%  { transform: scale(0.70); color: var(--rc-punch);      filter: none; }
    48%  { transform: scale(1.40); color: var(--rc-punch);      filter: drop-shadow(0 0 12px var(--rc-punch)); }
    70%  { transform: scale(0.92); color: var(--rc-punch);      filter: drop-shadow(0 0 6px var(--rc-punch)); }
    86%  { transform: scale(1.06); color: var(--rc-punch);      filter: none; }
    100% { transform: scale(1);    color: inherit;              filter: none; }
}
.rc-cart-toggle.rc-cart--punched {
    animation: rc-cart-punch 960ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Cart count badge — anchored to a wrapper that hugs just the SVG icon (not the
   48px/44px button, which has its own responsive breakpoint and would require
   re-tuning hardcoded offsets at every size). top:0;right:0 + translate(50%,-50%)
   centers the badge on the icon's corner regardless of icon/button/badge size. */
.rc-cart-icon-wrap { position: relative; display: inline-flex; }
.rc-cart-count {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
  min-width: 17px;
  height: 17px;
  padding: 0 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rc-primary);
  color: var(--rc-btn-text);
  font-size: 0.625rem;
  font-weight: 700;
  border-radius: 8.5px;
  border: 2px solid var(--rc-white);
  pointer-events: none;
}

@keyframes rcBounce {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.5); }
  65%  { transform: scale(0.88); }
  100% { transform: scale(1); }
}
.rc-cart-count--bounce { animation: rcBounce 0.55s var(--rc-ease); }

/* ═══════════════════════════════════════════════════════════════════════════
   6. FULL-WIDTH SEARCH OVERLAY
   ═══════════════════════════════════════════════════════════════════════════ */

/* Overlay container — fills whole screen, sits above header */
.rc-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: flex;
  flex-direction: column;
  background: color-mix(in srgb, var(--rc-white) 96%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  animation: rcSearchIn 200ms var(--rc-ease-out) forwards;
}

@keyframes rcSearchIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.rc-search-overlay__inner {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: 1rem 1.25rem 2rem;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
@media (min-width: 640px) {
  .rc-search-overlay__inner { padding: 1.5rem 2rem 3rem; }
}

/* ── Input bar ────────────────────────────────────────────────────────────── */
.rc-search-overlay__bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1.5px solid var(--rc-border-dark);
  padding-bottom: 0.75rem;
  margin-bottom: 1.25rem;
}

.rc-search-overlay__lens { color: var(--rc-muted); flex-shrink: 0; }

.rc-search-overlay__input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--rc-text);
  font-family: var(--rc-font);
  letter-spacing: -0.02em;
  caret-color: var(--rc-primary);
}
@media (min-width: 640px) {
  .rc-search-overlay__input { font-size: 1.5rem; }
}
.rc-search-overlay__input::placeholder { color: var(--rc-muted); }

.rc-search-overlay__clear {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--rc-surface);
  color: var(--rc-muted);
  border: none;
  cursor: pointer;
  transition: background 150ms, color 150ms;
  flex-shrink: 0;
}
.rc-search-overlay__clear:hover { background: var(--rc-border); color: var(--rc-text); }

.rc-search-overlay__cancel {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--rc-muted);
  padding: 0.25rem 0.125rem;
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color 150ms;
  flex-shrink: 0;
}
.rc-search-overlay__cancel:hover { color: var(--rc-text); }

/* ── Results pane ─────────────────────────────────────────────────────────── */
.rc-search-overlay__results {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ── Skeleton loaders ─────────────────────────────────────────────────────── */
.rc-skel {
  display: block;
  background: linear-gradient(90deg, var(--rc-surface) 25%, var(--rc-border) 50%, var(--rc-surface) 75%);
  background-size: 200% 100%;
  animation: rcPulse 1.5s ease-in-out infinite;
  border-radius: 4px;
}
@keyframes rcPulse {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.rc-skel--sq   { width: 56px; height: 56px; border-radius: 10px; flex-shrink: 0; }
.rc-skel--line { height: 13px; border-radius: 4px; }

.rc-search-skeletons        { display: flex; flex-direction: column; gap: 0.5rem; }
.rc-search-skeleton          { display: flex; align-items: center; gap: 0.875rem; padding: 0.5rem 0; }
.rc-search-skeleton__body   { flex: 1; display: flex; flex-direction: column; gap: 6px; }

/* ── Results list ─────────────────────────────────────────────────────────── */
.rc-search-list { display: flex; flex-direction: column; gap: 2px; }

.rc-search-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.625rem 0.5rem;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: background 150ms;
}
.rc-search-item:hover { background: var(--rc-surface); }

.rc-search-item__img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 10px;
  flex-shrink: 0;
  border: 1px solid var(--rc-border);
  background: var(--rc-surface);
}
.rc-search-item__body  { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rc-search-item__title { font-size: 0.9375rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-search-item__price { font-size: 0.875rem; font-weight: 700; color: var(--rc-primary); }
.rc-search-item__oos   { font-size: 0.8125rem; color: var(--rc-muted); font-style: italic; }

.rc-search-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.5rem 1rem 0.5rem;
  color: var(--rc-muted);
  text-align: center;
}
.rc-search-empty p { margin: 0; font-size: 1rem; }

.rc-search-fallback { width: 100%; margin-top: 1rem; text-align: left; }
.rc-search-fallback__label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--rc-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 0.5rem;
  padding: 0 0.25rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. BACKDROP — frosted glass dimmer (used by cart, account, menu drawers)
   ═══════════════════════════════════════════════════════════════════════════ */
.rc-backdrop {
  position: fixed;
  inset: 0;
  z-index: 498;
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  pointer-events: none;
  transition:
    background      300ms var(--rc-ease),
    backdrop-filter 300ms var(--rc-ease);
}
.rc-backdrop--active {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: var(--rc-backdrop-blur, blur(12px));
  -webkit-backdrop-filter: var(--rc-backdrop-blur, blur(12px));
  pointer-events: all;
}

/* ═══════════════════════════════════════════════════════════════════════════
   8a. DESKTOP NAVIGATION — Flyout + Mega variants
   ─ Hidden on mobile; mobile-menu.php handles ≤1023px.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Mobile-only utility — hide desktop nav on mobile */
.rc-mobile-only { display: none !important; }
@media (max-width: 1023px) { .rc-mobile-only { display: flex !important; } }

/* Desktop flyout container — hidden below 1024px */
.rc-nav-flyout {
  display: none; /* mobile: never shown, mobile-menu handles it */
  position: fixed;
  top: var(--rc-header-h);
  left: 0;
  right: 0;
  z-index: 599;
  background: color-mix(in srgb, var(--rc-white) 97%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--rc-border);
  box-shadow: 0 16px 48px rgba(0,0,0,0.08);
  /* Bloom from top-left (hamburger position) */
  clip-path: inset(0 100% 100% 0 round 0px);
  pointer-events: none;
  transition: clip-path 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (min-width: 1024px) {
  .rc-nav-flyout { display: block; }
}

.rc-nav-flyout--open {
  clip-path: inset(0 0% 0% 0 round 0px);
  pointer-events: all;
}

/* ── Variant A: 2-column flyout ──────────────────────────────────────────── */
.rc-nav-flyout__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: var(--rc-container, 1280px);
  margin: 0 auto;
  padding: 2.5rem 2rem 3rem;
  gap: 3rem;
  min-height: 360px;
}

.rc-nav-flyout__nav { display: flex; flex-direction: column; }

.rc-nav-flyout__list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  list-style: none;
}

.rc-nav-flyout__list > li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.5rem;
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--rc-text);
  text-decoration: none;
  border-radius: var(--rc-radius-sm);
  letter-spacing: -0.02em;
  transition: background 150ms, color 150ms, padding-left 150ms;
}
.rc-nav-flyout__list > li > a:hover {
  background: var(--rc-surface);
  color: var(--rc-primary);
  padding-left: 0.875rem;
}
.rc-nav-flyout__list > .current-menu-item > a,
.rc-nav-flyout__list > .current-menu-ancestor > a {
  color: var(--rc-primary);
}

/* Nav chevron (right-arrow on items with children) */
.rc-nav-chevron {
  flex-shrink: 0;
  opacity: 0.5;
  transition: opacity 150ms, transform 200ms var(--rc-ease);
}
.rc-nav-has-children:hover > a > .rc-nav-chevron,
.rc-nav-has-children > a.rc-nav--active > .rc-nav-chevron {
  opacity: 1;
  transform: translateX(3px);
}

/* Active/hovered nav parent item */
.rc-nav-flyout__list > li > a.rc-nav--active {
  background: var(--rc-surface);
  color: var(--rc-primary);
  padding-left: 0.875rem;
}
.rc-nav-flyout__glass-nav .rc-nav-flyout__list > li > a.rc-nav--active {
  padding-left: 1.625rem;
}

/* ── Right-panel stacking context (default content + sub-panels overlap here) ── */
.rc-nav-flyout__right-panels {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  align-items: start;
}
.rc-nav-flyout__right-panels > * {
  grid-column: 1;
  grid-row: 1;
}

/* ── Sub-menu panels (right column, all variants) ──────────────────────── */
.rc-nav-flyout__sub-panel {
  padding: 0.25rem 0;
  background: var(--rc-white); /* solid background prevents default content bleeding through during x-transition crossfade */
}
.rc-nav-flyout__sub-panel-inner {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.rc-nav-flyout__sub-panel-title {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rc-muted);
}
.rc-nav-flyout__sub-panel-title a {
  color: inherit;
  text-decoration: none;
  transition: color 120ms;
}
.rc-nav-flyout__sub-panel-title a:hover { color: var(--rc-primary); }

.rc-nav-flyout__sub-links {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.rc-nav-flyout__sub-group { display: flex; flex-direction: column; gap: 0.125rem; }

.rc-nav-flyout__sub-link {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--rc-text);
  text-decoration: none;
  padding: 0.3125rem 0;
  transition: color 120ms;
  line-height: 1.4;
}
.rc-nav-flyout__sub-link:hover { color: var(--rc-primary); }
.rc-nav-flyout__sub-link--parent { font-weight: 600; }
.rc-nav-flyout__sub-children {
  display: flex;
  flex-direction: column;
  padding-left: 0.875rem;
  border-left: 2px solid var(--rc-border);
  margin: 0.125rem 0 0.375rem;
  gap: 0.125rem;
}
.rc-nav-flyout__sub-link--grandchild {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--rc-muted);
}
.rc-nav-flyout__sub-link--grandchild:hover { color: var(--rc-primary); }

/* Glass variant sub-panel: uses --rc-white so it adapts to any theme exactly like the left nav card.
   In dark mode --rc-white = #1a1a24 (dark), in light mode = #ffffff. --rc-text / --rc-muted
   are always designed to contrast against --rc-white, so no explicit color overrides are needed. */
.rc-nav-flyout__sub-panel--glass {
  background: color-mix(in srgb, var(--rc-white) 92%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--rc-radius);
  padding: 1.75rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
  max-width: 420px;
}

/* Sub-menu within flyout (safety net — no longer rendered inline but kept for compat) */
.rc-nav-flyout__list .sub-menu { display: none; }

.rc-nav-flyout__feature-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  border-radius: var(--rc-radius);
  overflow: hidden;
  position: relative;
  transition: transform 200ms var(--rc-ease);
}
.rc-nav-flyout__feature-link:hover { transform: scale(1.01); }

.rc-nav-flyout__feature-img-wrap {
  flex: 1;
  overflow: hidden;
  border-radius: var(--rc-radius);
  background: var(--rc-surface);
  max-height: 260px;
}
.rc-nav-flyout__feature-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms var(--rc-ease);
}
.rc-nav-flyout__feature-link:hover .rc-nav-flyout__feature-img-wrap img { transform: scale(1.04); }

.rc-nav-flyout__feature-body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.875rem 0.25rem 0;
}
.rc-nav-flyout__feature-label { font-size: 1rem; font-weight: 600; color: var(--rc-text); }
.rc-nav-flyout__feature-sub   { font-size: 0.875rem; color: var(--rc-muted); }

/* Plain variant (no image — shows mini category cards) */
.rc-nav-flyout__feature-link--plain {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  align-content: start;
}
.rc-nav-flyout__mini-cat {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-radius: var(--rc-radius-sm);
  overflow: hidden;
  transition: transform 200ms var(--rc-ease);
  cursor: pointer;
}
.rc-nav-flyout__mini-cat img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.rc-nav-flyout__mini-cat span { font-size: 0.875rem; font-weight: 500; color: var(--rc-text); }

/* ══ GLASS FLYOUT — Variant B (commerce / glass header) ═════════════════════
   Left column: solid white card.  Right column: transparent — blurred page
   backdrop (z-index 498, backdrop-filter blur(12px)) shows through.
   ═══════════════════════════════════════════════════════════════════════════ */

.rc-nav-flyout--glass {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border-bottom: none !important;
}

.rc-nav-flyout__glass-wrap {
  display: grid;
  grid-template-columns: 288px 1fr;
  max-width: var(--rc-container, 1280px);
  margin: 0 auto;
  min-height: 320px;
}

/* Solid white nav column */
.rc-nav-flyout__glass-nav {
  background: var(--rc-white);
  border-radius: 0 0 16px 16px;
  box-shadow: 4px 0 40px rgba(0, 0, 0, 0.14), 0 12px 40px rgba(0, 0, 0, 0.1);
  padding: 1rem 0 1.5rem;
  overflow: hidden;
}
.rc-nav-flyout__glass-nav .rc-nav-flyout__list > li > a {
  border-radius: 0;
  padding: 0.75rem 1.375rem;
  font-size: 1rem;
}
.rc-nav-flyout__glass-nav .rc-nav-flyout__list > li > a:hover {
  padding-left: 1.625rem;
}

/* Transparent right panel — mega content floats over blurred page */
.rc-nav-flyout__glass-right {
  background: transparent;
  padding: 2rem 2.5rem 2rem 2rem;
  align-content: center;
}

/* Mega heading + grid in glass mode */
.rc-nav-mega__heading--glass {
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  border-bottom-color: rgba(255, 255, 255, 0.55);
}
.rc-nav-mega__grid--glass {
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
}
/* The right panel here is intentionally transparent (blur comes from the
   shared .rc-backdrop layer behind it, see section 7) — which means these
   labels sit over whatever page content happens to be behind the header,
   not a guaranteed-dark surface. White text with just a shadow isn't
   reliably WCAG-contrast-compliant against arbitrary/light content, so each
   label/count gets its own solid dark chip — contrast holds regardless of
   what's rendered behind the panel. */
.rc-nav-mega__item--glass .rc-nav-mega__label,
.rc-nav-mega__item--glass .rc-nav-mega__count {
  display: inline-block;
  align-self: flex-start;
  background: rgba(15, 23, 42, 0.82);
  border-radius: 4px;
  padding: 0.125rem 0.5rem;
}
.rc-nav-mega__item--glass .rc-nav-mega__label {
  color: #fff;
}
.rc-nav-mega__item--glass .rc-nav-mega__count {
  color: rgba(255, 255, 255, 0.85);
}
.rc-nav-mega__item--glass .rc-nav-mega__img-wrap {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  border-radius: 12px;
}

/* Feature image in glass mode */
.rc-nav-flyout__feature-link--glass {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  border-radius: var(--rc-radius);
  overflow: hidden;
  transition: transform 200ms var(--rc-ease);
  max-width: 420px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.25);
}
.rc-nav-flyout__feature-link--glass:hover { transform: scale(1.02); }
.rc-nav-flyout__feature-link--glass .rc-nav-flyout__feature-img-wrap { max-height: 240px; }
.rc-nav-flyout__feature-body--glass {
  padding: 0.875rem 1rem;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Glass mini-cats (fallback when no feature image) */
.rc-nav-flyout__glass-minicats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  max-width: 360px;
}
.rc-nav-flyout__mini-cat--glass {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-radius: var(--rc-radius);
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  transition: transform 200ms var(--rc-ease);
}
.rc-nav-flyout__mini-cat--glass:hover { transform: translateY(-3px); }
.rc-nav-flyout__mini-cat--glass img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.rc-nav-flyout__mini-cat--glass span {
  padding: 0.375rem 0.625rem 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--rc-btn-text);
  background: rgba(0, 0, 0, 0.55);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* ── Variant B: Mega-menu (2-column: nav left, category grid right) ──────── */
.rc-nav-flyout__inner--mega {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) 2fr;
  max-width: var(--rc-container, 1280px);
  margin: 0 auto;
  padding: 2.5rem 2rem 3rem;
  gap: 3rem;
  min-height: 360px;
}

.rc-nav-mega__heading {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--rc-text);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 1rem;
  padding-bottom: 0.625rem;
  border-bottom: 2px solid var(--rc-primary);
  display: inline-block;
}

.rc-nav-mega__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 1rem;
}

.rc-nav-mega__item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--rc-text);
  border-radius: var(--rc-radius-sm);
  overflow: hidden;
  transition: transform 200ms var(--rc-ease);
}
.rc-nav-mega__item:hover { transform: translateY(-3px); }

.rc-nav-mega__img-wrap {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--rc-radius-sm);
  background: var(--rc-surface);
}
.rc-nav-mega__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 350ms var(--rc-ease);
}
.rc-nav-mega__item:hover .rc-nav-mega__img-wrap img { transform: scale(1.06); }

.rc-nav-mega__label { font-size: 0.875rem; font-weight: 600; }
.rc-nav-mega__count { font-size: 0.75rem; color: var(--rc-muted); }

/* Mega bottom links */
.rc-nav-mega__menu { border-top: 1px solid var(--rc-border); padding-top: 1.25rem; }
.rc-nav-mega__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.125rem;
  list-style: none;
}
.rc-nav-mega__list a {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--rc-muted);
  border-radius: var(--rc-radius-sm);
  text-decoration: none;
  transition: background 150ms, color 150ms;
}
.rc-nav-mega__list a:hover { background: var(--rc-surface); color: var(--rc-text); }

/* ─── Mobile nav — sliding two-panel drawer ─────────────────────────────── */
.rc-drawer__body--flush { padding: 0; }

/* Sliding panels container */
.rc-mobile-panels-wrap {
  /* flex: 1 from .rc-drawer__body grows to fill drawer */
  overflow: hidden; /* clips neighbouring panels horizontally */
  display: flex;
}
.rc-mobile-panels {
  display: flex;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  transition: transform 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}
.rc-mobile-panel {
  min-width: 100%;
  height: 100%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Sub-panel header: back button + title + "View all" */
.rc-mobile-panel__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem 0.625rem 0.625rem;
  background: var(--rc-surface);
  border-bottom: 1px solid var(--rc-border);
}
.rc-mobile-nav__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--rc-text);
  border-radius: var(--rc-radius-sm);
  flex-shrink: 0;
  transition: background 150ms;
}
.rc-mobile-nav__back:hover { background: var(--rc-border); }
.rc-mobile-panel__title {
  flex: 1;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--rc-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rc-mobile-panel__view-all {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--rc-primary);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.rc-mobile-panel__view-all:hover { text-decoration: underline; }

/* Nav list rows (link + expand button) */
.rc-mobile-nav {
  list-style: none;
  display: flex;
  flex-direction: column;
}
.rc-mobile-nav__row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--rc-border);
}
.rc-mobile-nav__link {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0.875rem 1rem 0.875rem 1.375rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--rc-text);
  text-decoration: none;
  transition: background 150ms, color 150ms;
}
.rc-mobile-nav__link:hover { background: var(--rc-surface); color: var(--rc-primary); }
.current-menu-item .rc-mobile-nav__link,
.current-menu-ancestor .rc-mobile-nav__link { color: var(--rc-primary); }

.rc-mobile-nav__expand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  border: none;
  border-left: 1px solid var(--rc-border);
  background: none;
  cursor: pointer;
  color: var(--rc-muted);
  flex-shrink: 0;
  transition: background 150ms, color 150ms;
}
.rc-mobile-nav__expand:hover { background: var(--rc-surface); color: var(--rc-primary); }

/* ═══════════════════════════════════════════════════════════════════════════
   8. DRAWERS (cart, account, mobile menu)
   ═══════════════════════════════════════════════════════════════════════════ */
.rc-drawer {
  position: fixed;
  top: 0;
  height: 100%;
  height: 100dvh;
  width: min(420px, 100vw);
  background: var(--rc-white);
  z-index: 999;
  display: flex;
  flex-direction: column;
  box-shadow: var(--rc-shadow-lg);
  transition: transform 320ms var(--rc-ease-out);
  will-change: transform;
  overflow: hidden;
}
.rc-drawer--right { right: 0; transform: translateX(102%); }
.rc-drawer--left  { left: 0;  transform: translateX(-102%); }
.rc-drawer--right.rc-drawer--open { transform: translateX(0); }
.rc-drawer--left.rc-drawer--open  { transform: translateX(0); }

/* Push drawers below WP admin bar when logged in */
.admin-bar .rc-drawer { top: 32px; height: calc(100% - 32px); height: calc(100dvh - 32px); }
@media screen and (max-width: 782px) {
  .admin-bar .rc-drawer { top: 46px; height: calc(100% - 46px); height: calc(100dvh - 46px); }
}

.rc-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.125rem 1.375rem;
  border-bottom: 1px solid var(--rc-border);
  flex-shrink: 0;
}
.rc-drawer__title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--rc-text);
}
.rc-drawer__count {
  font-weight: 400;
  color: var(--rc-muted);
  font-size: 0.9375rem;
  margin-left: 0.25rem;
}
.rc-drawer__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--rc-muted);
  transition: background 150ms, color 150ms;
  background: transparent;
  border: none;
  cursor: pointer;
}
.rc-drawer__close:hover { background: var(--rc-surface); color: var(--rc-text); }

.rc-drawer__body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1.25rem 1.375rem;
}
.rc-drawer__footer {
  flex-shrink: 0;
  padding: 1rem 1.375rem;
  border-top: 1px solid var(--rc-border);
  background: var(--rc-white);
}

/* ─── Cart-specific drawer body ─────────────────────────────────────────── */
.rc-cart-item {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--rc-border);
}
.rc-cart-item:last-child { border-bottom: none; }

.rc-cart-item__img {
  width: 72px;
  height: 96px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
  border: 1px solid var(--rc-border);
  background: var(--rc-surface);
}
.rc-cart-item__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.rc-cart-item__name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--rc-text);
  line-height: 1.35;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rc-cart-item__name:hover { color: var(--rc-primary); }
.rc-cart-item__meta  { font-size: 0.75rem; color: var(--rc-muted); }
.rc-cart-item__price { font-size: 0.9375rem; font-weight: 700; color: var(--rc-text); }

.rc-cart-item__qty {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.rc-qty-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--rc-border);
  background: transparent;
  color: var(--rc-text);
  cursor: pointer;
  transition: border-color 150ms, background 150ms;
}
.rc-qty-btn:hover { border-color: var(--rc-primary); background: rgba(var(--rc-primary-rgb), 0.06); }
.rc-qty-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.rc-qty-val {
  min-width: 24px;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
}

.rc-cart-item__remove {
  align-self: flex-start;
  margin-top: 0.125rem;
  padding: 4px;
  color: var(--rc-muted);
  transition: color 150ms;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 4px;
}
.rc-cart-item__remove:hover { color: #ef4444; background: #fef2f2; }

/* ── Free-shipping progress bar ─────────────────────────────────────────── */
.rc-shipping-bar { padding: 0.875rem 1.125rem; }

.rc-shipping-bar__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.625rem;
}
.rc-shipping-bar__icon {
  font-size: 1.0625rem;
  flex-shrink: 0;
  line-height: 1;
}
.rc-shipping-bar__msg {
  flex: 1;
  min-width: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--rc-text);
  line-height: 1.35;
}
.rc-shipping-bar__msg strong { color: var(--rc-primary); }
.rc-shipping-bar--qualified .rc-shipping-bar__msg { color: var(--rc-success, #10b981); }
.rc-shipping-bar__pct {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--rc-primary);
  border: 1.5px solid var(--rc-primary);
  padding: 0.125rem 0.5rem;
  border-radius: 100px;
  flex-shrink: 0;
  opacity: 0.9;
}
.rc-shipping-bar__track {
  height: 10px;
  background: var(--rc-border);
  border-radius: 100px;
  overflow: hidden;
}
.rc-shipping-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--rc-primary), var(--rc-primary-dark, var(--rc-primary)));
  border-radius: 100px;
  transition: width 700ms cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}
.rc-shipping-bar__fill::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: -100%;
  width: 60%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: rc-bar-shine 2.4s ease-in-out infinite;
}
@keyframes rc-bar-shine {
  0%   { left: -100%; }
  55%  { left: 160%; }
  100% { left: 160%; }
}
.rc-shipping-bar--qualified .rc-shipping-bar__fill {
  background: linear-gradient(90deg, var(--rc-success, #10b981), #059669);
}
.rc-shipping-bar--qualified .rc-shipping-bar__fill::after { display: none; }

/* Product page: card-style container */
.rc-product-ship-bar {
  margin-top: 1.25rem;
  padding: 1rem 1.125rem;
  border-radius: var(--rc-radius);
  background: var(--rc-surface);
  border: 1.5px solid var(--rc-border);
}
.rc-product-ship-bar .rc-shipping-bar { padding: 0; }

/* Cart page summary: breathing room above totals */
.rc-cart-page__summary-card .rc-shipping-bar { margin-bottom: 0.875rem; }

/* Cart page "Add more products" CTA */
.rc-ship-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem 1rem;
  margin-top: 1rem;
  margin-bottom: 0.875rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--rc-primary);
  background: var(--rc-surface);
  border: 1.5px dashed var(--rc-primary);
  border-radius: var(--rc-radius);
  text-decoration: none;
  cursor: pointer;
  transition: background 150ms, border-style 150ms, opacity 150ms;
  opacity: 0.85;
}
.rc-ship-cta:hover { background: var(--rc-border); opacity: 1; border-style: solid; }

/* ── Free-shipping progress toast ───────────────────────────────────────── */
.rc-ship-toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9500;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: var(--rc-white);
  border: 1.5px solid var(--rc-border);
  border-radius: var(--rc-radius);
  box-shadow: 0 8px 40px rgba(0,0,0,0.13), 0 2px 8px rgba(0,0,0,0.06);
  padding: 1rem 2.25rem 1rem 1rem;
  max-width: 320px;
  width: calc(100vw - 2rem);
  transform: translateY(calc(100% + 2rem));
  opacity: 0;
  transition: transform 380ms var(--rc-ease-out), opacity 380ms;
  pointer-events: none;
}
.rc-ship-toast--visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.rc-ship-toast--success { border-color: var(--rc-success, #10b981); }
.rc-ship-toast__icon {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 0.1rem;
}
.rc-ship-toast__body { flex: 1; min-width: 0; }
.rc-ship-toast__title {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--rc-text);
  margin-bottom: 0.2rem;
}
.rc-ship-toast__sub {
  font-size: 0.8125rem;
  color: var(--rc-muted);
  margin: 0 0 0.5rem;
  line-height: 1.4;
}
.rc-ship-toast__sub strong { color: var(--rc-text); }
.rc-ship-toast__track {
  height: 4px;
  background: var(--rc-border);
  border-radius: 2px;
  overflow: hidden;
}
.rc-ship-toast__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--rc-success, #10b981), var(--rc-primary));
  border-radius: 2px;
  transition: width 600ms var(--rc-ease-out);
}
.rc-ship-toast__close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--rc-muted);
  font-size: 1.125rem;
  border-radius: 50%;
  padding: 0;
  line-height: 1;
  transition: color 150ms, background 150ms;
}
.rc-ship-toast__close:hover { color: var(--rc-text); background: var(--rc-surface); }
@media (max-width: 767px) {
  .rc-ship-toast {
    left: 1rem;
    right: 1rem;
    max-width: none;
    bottom: calc(60px + env(safe-area-inset-bottom, 0px) + 0.75rem);
  }
}

/* Coupon */
.rc-cart-coupon {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rc-border);
}
.rc-cart-coupon__row { display: flex; gap: 0.5rem; }

/* Subtotal */
.rc-cart-subtotal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding: 0.75rem 0;
  border-top: 2px solid var(--rc-border);
}
.rc-cart-subtotal span:first-child { font-size: 0.9375rem; font-weight: 600; }
.rc-cart-subtotal span:last-child  { font-size: 1.125rem; font-weight: 800; color: var(--rc-text); }

.rc-cart-tax-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 0.75rem;
  color: var(--rc-muted);
  margin-top: 0.5rem;
}

/* Empty cart */
.rc-cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 1rem;
  gap: 1rem;
  color: var(--rc-muted);
}
.rc-cart-empty svg { opacity: 0.25; }
.rc-cart-empty p   { font-size: 0.9375rem; margin: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   9. SLIDE-UP SHEETS (quick view, checkout)
   ═══════════════════════════════════════════════════════════════════════════ */
.rc-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  height: 90dvh;
  background: var(--rc-white);
  border-radius: 1.25rem 1.25rem 0 0;
  box-shadow: 0 -8px 48px rgba(0,0,0,0.14);
  display: flex;
  flex-direction: column;
  transform: translateY(102%);
  transition: transform 380ms cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform;
}
.rc-sheet--open { transform: translateY(0); }

@media (min-width: 768px) {
  .rc-sheet {
    width: min(880px, 94vw);
    left: 50%;
    right: auto;
    transform: translate(-50%, 102%);
    border-radius: 1.25rem 1.25rem 0 0;
  }
  .rc-sheet--open { transform: translate(-50%, 0); }
}

.rc-sheet__handle {
  width: 44px;
  height: 4px;
  background: var(--rc-border);
  border-radius: 2px;
  margin: 0.875rem auto 0;
  flex-shrink: 0;
}
.rc-sheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--rc-border);
  flex-shrink: 0;
}
.rc-sheet__title { font-size: 1.0625rem; font-weight: 700; }
.rc-sheet__body  { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 1.5rem; }
.rc-sheet__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--rc-surface);
  color: var(--rc-muted);
  border: none;
  cursor: pointer;
  transition: background 150ms;
}
.rc-sheet__close:hover { background: var(--rc-border); color: var(--rc-text); }

/* Checkout iframe */
.rc-checkout-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  background: var(--rc-white);
}

/* ═══════════════════════════════════════════════════════════════════════════
   10. QUICK VIEW CONTENT
   ═══════════════════════════════════════════════════════════════════════════ */
.rc-qv { }
.rc-qv__inner {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  align-items: flex-start;
}
@media (min-width: 600px) {
  .rc-qv__inner { flex-wrap: nowrap; }
}
.rc-qv__img-wrap {
  flex-shrink: 0;
  width: 100%;
  max-width: 300px;
}
@media (max-width: 599px) { .rc-qv__img-wrap { max-width: 100%; } }
.rc-qv__img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--rc-border);
  background: var(--rc-surface);
}
.rc-qv__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}
.rc-qv__title {
  font-size: 1.4375rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.25;
  color: var(--rc-text);
}
.rc-qv__price {
  font-size: 1.4375rem;
  font-weight: 800;
  color: var(--rc-primary);
}
.rc-qv__price ins { text-decoration: none; color: #dc2626; }
.rc-qv__price del { font-size: 1rem; font-weight: 400; color: var(--rc-muted); margin-right: 0.5rem; }
.rc-qv__price .woocommerce-Price-amount { font-weight: inherit; }

.rc-qv__desc {
  font-size: 0.9375rem;
  color: var(--rc-muted);
  line-height: 1.65;
}
.rc-qv__desc p { margin: 0 0 0.5rem; }
.rc-qv__desc p:last-child { margin-bottom: 0; }

.rc-qv__actions {
  display: flex;
  gap: 0.625rem;
  flex-wrap: wrap;
}

.rc-qv__full-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--rc-primary);
  text-decoration: none;
  padding-top: 0.25rem;
  transition: gap 150ms;
}
.rc-qv__full-link:hover { gap: 0.625rem; }

/* Quick view skeleton */
.rc-qv-skel { display: flex; gap: 1.5rem; flex-wrap: wrap; }
@media (min-width: 600px) { .rc-qv-skel { flex-wrap: nowrap; } }

/* ═══════════════════════════════════════════════════════════════════════════
   11. MOBILE BOTTOM NAV
   ═══════════════════════════════════════════════════════════════════════════ */
.rc-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 400;
  display: flex;
  align-items: stretch;
  background: color-mix(in srgb, var(--rc-white) 97%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--rc-border);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  height: calc(60px + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 1024px) { .rc-bottom-nav { display: none; } }

.rc-bottom-nav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0.5rem 0;
  color: var(--rc-muted);
  font-size: 0.625rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 150ms, transform 80ms;
  background: transparent;
  border: none;
  cursor: pointer;
}
.rc-bottom-nav__item:active { transform: scale(0.88); }
.rc-bottom-nav__item:hover,
.rc-bottom-nav__item.active { color: var(--rc-primary); }

.rc-bottom-nav__item--cart { overflow: visible; }

/* Badge anchors to a wrapper that hugs just the icon (same technique as the
   header cart badge) instead of hand-tuned top/calc() offsets against the
   flex:1 tab button, whose width changes with viewport/item count. */
.rc-bottom-nav__icon-wrap { position: relative; display: inline-flex; }
.rc-bottom-nav__badge {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
  min-width: 14px;
  height: 14px;
  background: var(--rc-primary);
  color: var(--rc-btn-text);
  font-size: 0.5625rem;
  font-weight: 700;
  border-radius: 7px;
  padding: 0 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--rc-white);
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   12. AJAX PROGRESS BAR
   ═══════════════════════════════════════════════════════════════════════════ */
.rc-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  height: 3px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms;
}
.rc-progress__bar {
  height: 100%;
  background: var(--rc-primary);
  border-radius: 0 2px 2px 0;
  transition: width 200ms var(--rc-ease);
  box-shadow: 0 0 10px rgba(var(--rc-primary-rgb), 0.6);
}

/* ═══════════════════════════════════════════════════════════════════════════
   13. BUTTONS
   ═══════════════════════════════════════════════════════════════════════════ */
.rc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  font-family: var(--rc-font);
  border: none;
  border-radius: calc(var(--rc-radius) - 2px);
  cursor: pointer;
  transition: background 150ms, transform 80ms, box-shadow 150ms, opacity 150ms, border-color 150ms;
  white-space: nowrap;
  text-decoration: none;
  line-height: 1;
  -webkit-appearance: none;
}
.rc-btn:active { transform: scale(0.97); }
.rc-btn:disabled, .rc-btn[disabled] { opacity: 0.55; pointer-events: none; cursor: not-allowed; }

.rc-btn--primary {
  background: var(--rc-primary);
  color: var(--rc-btn-text);
}
.rc-btn--primary:hover {
  background: var(--rc-primary-dark);
  box-shadow: 0 4px 14px rgba(var(--rc-primary-rgb), 0.3);
}

.rc-btn--secondary {
  background: var(--rc-surface);
  color: var(--rc-text);
  border: 1.5px solid var(--rc-border);
}
.rc-btn--secondary:hover {
  background: var(--rc-border);
  border-color: var(--rc-border-dark);
}

.rc-btn--ghost {
  background: transparent;
  color: var(--rc-text);
  border: 1.5px solid var(--rc-border);
}
.rc-btn--ghost:hover { border-color: var(--rc-primary); color: var(--rc-primary); }

.rc-btn--full  { width: 100%; }
.rc-btn--sm    { padding: 0.5rem 1rem; font-size: 0.875rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   14. PRODUCT GRID
   ═══════════════════════════════════════════════════════════════════════════ */
.rc-product-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(2, 1fr);
  list-style: none;
  margin: 0;
  padding: 0;
}
/* cols-1 must apply at every breakpoint (list view) */
.rc-product-grid.cols-1 { grid-template-columns: 1fr !important; }

@media (min-width: 768px)  {
  .rc-product-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .rc-product-grid       { grid-template-columns: repeat(3, 1fr); }
  .rc-product-grid.cols-1 { grid-template-columns: 1fr; }
  .rc-product-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
  .rc-product-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .rc-product-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
  .rc-product-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
}

.rc-product-grid__item {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   15. PRODUCT CARD
   ═══════════════════════════════════════════════════════════════════════════ */
.rc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--rc-radius);
  overflow: hidden;
  background: var(--rc-white);
  transition:
    box-shadow 250ms var(--rc-ease),
    transform 250ms var(--rc-ease);
  height: 100%;
}
.rc-card:hover {
  box-shadow: var(--rc-shadow-lg);
  transform: translateY(-3px);
}

/* Subtle bottom accent on hover */
.rc-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--rc-primary);
  transform: scaleX(0);
  transition: transform 280ms var(--rc-ease);
  transform-origin: left;
}
.rc-card:hover::after { transform: scaleX(1); }

/* Style variants */
.rc-card--bordered { border: 1px solid var(--rc-border); }
.rc-card--shadow   { box-shadow: var(--rc-shadow-sm); }
.rc-card--minimal  { }

/* ── Image wrapper ────────────────────────────────────────────────────────── */
.rc-card__img-wrap {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--rc-surface);
}

/* Aspect ratios */
.rc-card__img-wrap.ratio-2-3  { aspect-ratio: 2 / 3; }
.rc-card__img-wrap.ratio-3-4  { aspect-ratio: 3 / 4; }
.rc-card__img-wrap.ratio-1-1  { aspect-ratio: 1 / 1; }
.rc-card__img-wrap.ratio-4-3  { aspect-ratio: 4 / 3; }
.rc-card__img-wrap.ratio-16-9 { aspect-ratio: 16 / 9; }

.rc-card__img,
.rc-card__img--primary {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 500ms var(--rc-ease), opacity 300ms;
}
.rc-card:hover .rc-card__img,
.rc-card:hover .rc-card__img--primary {
  transform: scale(1.05);
}

.rc-card__img--hover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 380ms var(--rc-ease);
}
.rc-card:hover .rc-card__img--hover { opacity: 1; }

/* ── Coverflow gallery (.rc-card--has-gallery) ──────────────────────────── */
.rc-card__coverflow {
  position: absolute;
  inset: 0;
  perspective: 600px;
  perspective-origin: 50% 35%;
}
.rc-card__cf-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 340ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity 280ms ease;
  transform-origin: center center;
  backface-visibility: hidden;
  will-change: transform, opacity;
}
/* Single-image cards: subtle scale on hover — works fine with contain */
.rc-card:not(.rc-card--has-gallery):hover .rc-card__cf-img--primary {
  transform: scale(1.03);
}

/* ── Image fit: contain mode ────────────────────────────────────────────────── */
/* Shows the full image with no cropping. Card background fills the letterbox   */
/* areas — works best when product photos have a white or neutral background.   */
body.rc-img-contain .rc-card__img-wrap {
  background: #fff;
}
body.rc-img-contain .rc-card__cf-img {
  object-fit: contain;
}
/* Disable the scale-on-hover in contain mode — scaling a contained image shows */
/* the background peeking around the edges, which looks wrong.                  */
body.rc-img-contain .rc-card:not(.rc-card--has-gallery):hover .rc-card__cf-img--primary {
  transform: none;
}
/* Touch devices: flat 2D slide — no perspective rotateY */
@media (hover: none) {
  .rc-card__coverflow { perspective: none; }
}
/* Per-preset transition easing — each type gets distinct physics */
[data-cf-type="0"] .rc-card__cf-img {
  transition: transform 340ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity 280ms ease;
}
[data-cf-type="1"] .rc-card__cf-img {
  transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 300ms ease;
}
[data-cf-type="2"] .rc-card__cf-img {
  transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1),
              opacity 300ms ease;
}
[data-cf-type="3"] .rc-card__cf-img {
  transition: transform 600ms ease,
              opacity 550ms ease;
}
[data-cf-type="4"] .rc-card__cf-img {
  transition: transform 220ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
              opacity 180ms ease;
}

/* ── Badges ───────────────────────────────────────────────────────────────── */
.rc-card__badge {
  position: absolute;
  top: 0.625rem;
  left: 0.625rem;
  z-index: 2;
  padding: 0.2rem 0.625rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  border-radius: 4px;
  pointer-events: none;
  line-height: 1.5;
}
.rc-card__badge--sale     { background: #ef4444; color: var(--rc-btn-text); }
.rc-card__badge--oos      { background: rgba(0,0,0,0.55); color: var(--rc-btn-text); }
.rc-card__badge--featured { background: var(--rc-accent); color: var(--rc-btn-text); }
.rc-card__badge--new      { background: var(--rc-primary); color: var(--rc-btn-text); }

/* ── Hover actions ────────────────────────────────────────────────────────── */
.rc-card__actions {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.875rem 0.75rem;
  background: linear-gradient(0deg, rgba(0,0,0,0.48) 0%, transparent 100%);
  transform: translateY(100%);
  opacity: 0;
  transition: transform 260ms var(--rc-ease), opacity 260ms var(--rc-ease);
  pointer-events: none;
  /* Must be above coverflow images (z-index 3 max from coverflowStyle) so the
     action bar isn't buried under the image layer on gallery cards. */
  z-index: 4;
}
/* flex-wrap above lets icons drop to a 2nd row on their own whenever a narrower
   card (higher column count) can't fit them on one line — no fixed breakpoint
   needed, it only wraps when it actually doesn't fit. */
@media (max-width: 767px) {
  .rc-card__action-btn--mobile-hide { display: none; }
}
.rc-card:hover .rc-card__actions {
  transform: translateY(0);
  opacity: 1;
  pointer-events: all;
}

.rc-card__action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--rc-white) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--rc-text);
  border: none;
  cursor: pointer;
  transition: background 150ms, transform 100ms, color 150ms, box-shadow 150ms;
  position: relative;
}
.rc-card__action-btn:hover {
  background: var(--rc-white);
  color: var(--rc-primary);
  transform: translateY(-2px);
  box-shadow: var(--rc-shadow);
}
.rc-card__action-btn:active { transform: scale(0.92); }

/* Tooltip */
.rc-card__action-btn::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  background: rgba(0,0,0,0.82);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 500;
  border-radius: 5px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 150ms;
}
.rc-card__action-btn:hover::after { opacity: 1; }

/* Buy Now card button — warm amber signals "instant purchase" */
.rc-card__action-btn--buy-now:hover {
  background: #fff7ed;
  color: #ea580c;
  border-color: #fb923c;
  box-shadow: 0 2px 10px rgba(234, 88, 12, 0.22);
}
.rc-card__action-btn--buy-now:hover::after {
  background: #ea580c;
}

/* Buy Now hint line — below button on single product + quick view */
.rc-buy-now-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 0.6875rem;
  color: var(--rc-muted);
  margin-top: 6px;
  letter-spacing: 0.01em;
  line-height: 1.3;
  opacity: 0.9;
}
.rc-buy-now-note svg { flex-shrink: 0; opacity: 0.7; }
.rc-buy-now-note strong { color: var(--rc-text); font-weight: 600; }

/* ATC button — wider pill */
.rc-card__action-btn--atc {
  width: auto;
  border-radius: 20px;
  padding: 0 1rem;
  font-size: 0.8125rem;
  font-weight: 700;
  gap: 0.375rem;
  height: 36px;
  background: var(--rc-primary);
  color: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.rc-card__action-btn--atc:hover {
  background: var(--rc-primary-dark);
  color: #fff;
  transform: translateY(-2px);
}
.rc-card__action-btn--added,
.rc-card__action-btn--atc.rc-card__action-btn--added {
  background: var(--rc-success) !important;
  color: #fff !important;
}
.rc-card__atc-label { font-size: 0.8125rem; }

/* ── Card body ────────────────────────────────────────────────────────────── */
.rc-card__body {
  padding: 0.875rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.3rem;
}

.rc-card__rating {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: var(--rc-muted);
}
.rc-card__stars { color: #f59e0b; font-size: 0.75rem; letter-spacing: -1px; }
.rc-card__rating-count { font-size: 0.75rem; color: var(--rc-muted); }

.rc-card__title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--rc-text);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}
.rc-card__title-link { text-decoration: none; color: inherit; }
.rc-card__title-link:hover { color: var(--rc-primary); }

.rc-card__stock {
  font-size: 0.75rem;
  font-weight: 600;
  color: #d97706;
  margin: 0;
}

.rc-card__price-wrap {
  margin-top: auto;
  padding-top: 0.375rem;
  font-size: 1rem;
  font-weight: 800;
  color: var(--rc-text);
}
/* WooCommerce price elements */
.rc-card__price-wrap .woocommerce-Price-amount { font-weight: inherit; }
.rc-card__price-wrap ins  { text-decoration: none; color: #dc2626; }
.rc-card__price-wrap del  {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--rc-muted);
  text-decoration: line-through;
  margin-right: 0.375rem;
}
.rc-card__price-wrap del .woocommerce-Price-amount { color: inherit; font-weight: inherit; }

/* ═══════════════════════════════════════════════════════════════════════════
   16. CAROUSEL
   ═══════════════════════════════════════════════════════════════════════════ */
.rc-carousel-wrap { position: relative; }
.rc-product-carousel { overflow: hidden; padding-bottom: 3rem; }
.rc-product-carousel .swiper-slide {
  height: auto;
  display: flex;
  flex-direction: column;
}
.rc-product-carousel .swiper-slide .rc-card { width: 100%; }

/* ── Swiper navigation — themed to brand colours ────────────────────────── */
.rc-product-carousel .swiper-button-next,
.rc-product-carousel .swiper-button-prev {
  width: 40px;
  height: 40px;
  margin-top: -44px;
  background: var(--rc-white);
  border: 1.5px solid var(--rc-border);
  border-radius: 50%;
  color: var(--rc-text);
  box-shadow: var(--rc-shadow);
  transition: background 160ms var(--rc-ease), border-color 160ms var(--rc-ease), color 160ms var(--rc-ease), transform 160ms var(--rc-ease);
}
.rc-product-carousel .swiper-button-next::after,
.rc-product-carousel .swiper-button-prev::after {
  font-size: 13px;
  font-weight: 700;
}
.rc-product-carousel .swiper-button-next:hover,
.rc-product-carousel .swiper-button-prev:hover {
  background: var(--rc-primary);
  border-color: var(--rc-primary);
  color: #fff;
  transform: scale(1.08);
}
.rc-product-carousel .swiper-button-disabled {
  opacity: 0.35;
  pointer-events: none;
}
/* ── Swiper pagination dots ─────────────────────────────────────────────── */
.rc-product-carousel .swiper-pagination-bullet {
  width: 6px;
  height: 6px;
  background: var(--rc-border-dark);
  opacity: 1;
  transition: width 200ms var(--rc-ease), background 200ms;
  border-radius: 3px;
}
.rc-product-carousel .swiper-pagination-bullet-active {
  width: 18px;
  background: var(--rc-primary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   17. SHOP LAYOUT
   ═══════════════════════════════════════════════════════════════════════════ */
.rc-shop-main { background: var(--rc-white); }

.rc-shop-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 1024px) {
  .rc-shop-wrap--sidebar {
    grid-template-columns: 300px 1fr;
    align-items: start;
  }
}

.rc-shop-sidebar {
  background: var(--rc-white);
}
.rc-shop-sidebar .widget {
  margin-bottom: 1.75rem;
}
.rc-shop-sidebar .widget-title,
.rc-shop-sidebar h3 {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--rc-text);
  padding-bottom: 0.75rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid var(--rc-primary);
}

/* Widget search button */
.rc-shop-sidebar .widget_search input[type="submit"],
.rc-shop-sidebar .search-submit {
  background: var(--rc-primary);
  color: #fff;
  border: none;
  border-radius: var(--rc-radius);
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 150ms;
}
.rc-shop-sidebar .widget_search input[type="submit"]:hover,
.rc-shop-sidebar .search-submit:hover { opacity: 0.88; }

.rc-shop-products { min-width: 0; }

.rc-shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.75rem;
  flex-wrap: wrap;
}
.rc-shop-title {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--rc-text);
  margin: 0 0 0.125rem;
}

.rc-no-products {
  color: var(--rc-muted);
  text-align: center;
  padding: 3rem 1rem;
  font-size: 0.9375rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   18. HOMEPAGE SECTIONS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Shared section wrapper ─────────────────────────────────────────────── */
.rc-home-section {
  padding: clamp(4rem, 8vw, 7rem) 0;
}
.rc-home-section--carousel { background: var(--rc-white); }
.rc-home-section--categories { background: var(--rc-surface); }
.rc-home-section--testimonials { background: var(--rc-white); }

/* ── Section headings (shared across homepage + shortcodes) ─────────────── */
.rc-section-header {
  margin-bottom: clamp(2rem, 4vw, 3rem);
  text-align: center;
}
.rc-section-title {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--rc-text);
  line-height: 1.1;
  margin: 0;
}
.rc-section-sub {
  font-size: 1rem;
  /* var(--rc-muted) alone passes fine on the usual light surfaces (~5:1) but
     drops to ~2.4:1 when a block sits on one of WordPress's own saturated
     palette colors (e.g. the demo content's pale-pink category-grid section).
     Mixed toward var(--rc-text) — NOT a hardcoded black — so this pushes in
     the correct direction on every palette, including "Midnight", where
     --rc-text is near-white and --rc-muted is already a *light* colour on a
     *dark* surface; mixing toward black there would have made it lighter-on-
     dark text darker, i.e. actively worse. Verified against all 5 built-in
     presets' own surface colours plus the pink demo-content case. */
  color: color-mix(in srgb, var(--rc-muted) 40%, var(--rc-text));
  margin: 0.625rem auto 0;
  max-width: 480px;
  line-height: 1.6;
}

/* ── Homepage hero sizing ────────────────────────────────────────────────── */
.rc-home-hero {
  min-height: 75vh;
  display: flex;
  align-items: center;
}
.rc-home-hero .rc-hero__inner { width: 100%; }
@media (max-width: 767px) {
  .rc-home-hero { min-height: 60vh; }
}

/* ── Category showcase grid ─────────────────────────────────────────────── */
.rc-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}
.rc-cat-grid--2 { grid-template-columns: repeat(2, 1fr); }
.rc-cat-grid--3 { grid-template-columns: repeat(3, 1fr); }
.rc-cat-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 767px) {
  .rc-cat-grid--3,
  .rc-cat-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 479px) {
  .rc-cat-grid--2,
  .rc-cat-grid--3,
  .rc-cat-grid--4 { grid-template-columns: 1fr 1fr; }
}

.rc-cat-card {
  position: relative;
  aspect-ratio: var(--rc-cat-ar, 3/4);
  overflow: hidden;
  border-radius: var(--rc-radius-lg);
  display: block;
  text-decoration: none;
  background: var(--rc-surface);
  transition: box-shadow 250ms var(--rc-ease);
}
.rc-cat-card:hover { box-shadow: var(--rc-shadow-lg); }
.rc-cat-card:focus-visible { outline: 2px solid var(--rc-primary); outline-offset: 3px; }

.rc-cat-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 550ms var(--rc-ease);
  display: block;
}
.rc-cat-card:hover .rc-cat-card__img { transform: scale(1.06); }

.rc-cat-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.68) 0%, rgba(0,0,0,0) 55%);
  pointer-events: none;
}

.rc-cat-card__body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.5rem 1.25rem 1.25rem;
  color: #fff;
}
.rc-cat-card__name {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  display: block;
  margin-bottom: 0.25rem;
}
.rc-cat-card__count { font-size: 0.8125rem; opacity: 0.75; }

/* Placeholder cards (no category image) */
.rc-cat-card--placeholder {
  background: var(--rc-surface);
  border: 1.5px solid var(--rc-border);
}
.rc-cat-card--placeholder .rc-cat-card__overlay { display: none; }
.rc-cat-card--placeholder .rc-cat-card__body {
  position: static;
  padding: 2rem 1.25rem;
  color: var(--rc-text);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.rc-cat-card--placeholder .rc-cat-card__name { color: var(--rc-text); }
.rc-cat-card--placeholder .rc-cat-card__count { color: var(--rc-muted); }

/* ── Card style: image above, caption below ─────────────────────────────── */
.rc-cat-card--card {
  aspect-ratio: unset;
  display: flex;
  flex-direction: column;
}
.rc-cat-card--card .rc-cat-card__img {
  width: 100%;
  height: auto;
  aspect-ratio: var(--rc-cat-ar, 3/4);
  flex-shrink: 0;
}
.rc-cat-card--card .rc-cat-card__body {
  position: static;
  flex: 1;
  padding: 0.875rem 1rem;
  color: var(--rc-text);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.rc-cat-card--card .rc-cat-card__name {
  color: var(--rc-text);
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 0.125rem;
}
.rc-cat-card--card .rc-cat-card__count { color: var(--rc-muted); opacity: 1; }

/* ── Minimal style: lighter overlay, name only, no product reveal ────────── */
.rc-cat-card--minimal .rc-cat-card__overlay {
  background: linear-gradient(to top, rgba(0,0,0,0.52) 0%, rgba(0,0,0,0) 42%);
}
.rc-cat-card--minimal .rc-cat-card__name { font-size: 0.9375rem; font-weight: 600; }

/* ── Category product hover reveal — "melting fall" ─────────────────────── */
@keyframes rc-prod-fall {
  0%   { transform: translateY(-36px) scaleY(0.55) scaleX(1.2); opacity: 0; filter: blur(4px); }
  52%  { transform: translateY(5px) scaleY(1.08) scaleX(0.95); opacity: 1; filter: blur(0); }
  70%  { transform: translateY(-2px) scaleY(0.97) scaleX(1.02); }
  84%  { transform: translateY(1px) scaleY(1.01) scaleX(0.99); }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

.rc-cat-card__products {
  position: absolute;
  bottom: 3.75rem; /* sit above the category name strip */
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 0 1rem;
  pointer-events: none;
  z-index: 3;
}

.rc-cat-prod-thumb {
  width: 52px;
  height: 68px;
  border-radius: 7px;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,0.88);
  box-shadow: 0 6px 18px rgba(0,0,0,0.28);
  /* default: above and invisible — fades back on mouse-out via transition */
  opacity: 0;
  transform: translateY(-28px) scaleY(0.65) scaleX(1.15);
  transition: opacity 220ms ease, transform 220ms ease;
}
.rc-cat-prod-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* On hover: run the liquid fall animation */
.rc-cat-card:hover .rc-cat-prod-thumb {
  transition: none;
  animation: rc-prod-fall 580ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.rc-cat-card:hover .rc-cat-prod-thumb:nth-child(2) { animation-delay: 110ms; }
.rc-cat-card:hover .rc-cat-prod-thumb:nth-child(3) { animation-delay: 220ms; }

/* Mobile (no hover): show as a static mini-collage — always visible, floated to top */
@media (hover: none) {
  .rc-cat-prod-thumb {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .rc-cat-card__products {
    bottom: auto;
    top: 12px;
  }
}

/* Admin opted out of touch preview via block toggle */
@media (hover: none) {
  .rc-hide-touch-preview .rc-cat-card__products { display: none; }
}

/* ── Promo banner ────────────────────────────────────────────────────────── */
.rc-promo-banner {
  padding: clamp(3rem, 6vw, 5rem) 0;
  background: var(--rc-primary);
  color: var(--rc-btn-text);
  text-align: center;
}
.rc-promo-banner__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
}
.rc-promo-banner__heading {
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 0;
  color: inherit;
}
.rc-promo-banner__sub {
  font-size: 1rem;
  opacity: 0.8;
  margin: 0;
  max-width: 520px;
}
.rc-promo-banner__cta { margin-top: 0.625rem; }

/* White-outline button for use on dark/coloured banner backgrounds */
.rc-btn--white {
  background: var(--rc-white);
  color: var(--rc-primary);
  border: 2px solid var(--rc-white);
}
.rc-btn--white:hover {
  background: transparent;
  color: var(--rc-btn-text);
}

/* ── Testimonials ────────────────────────────────────────────────────────── */
.rc-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (max-width: 1023px) {
  .rc-testimonials-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
  .rc-testimonials-grid { grid-template-columns: 1fr; }
}

.rc-testimonial {
  background: var(--rc-surface);
  border: 1.5px solid var(--rc-border);
  border-radius: var(--rc-radius);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.rc-testimonial__stars {
  display: flex;
  gap: 3px;
  color: #f59e0b;
}
.rc-testimonial__text {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--rc-text);
  font-style: italic;
  flex: 1;
  margin: 0;
}
.rc-testimonial__author {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--rc-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   19. FORMS & INPUTS
   ═══════════════════════════════════════════════════════════════════════════ */
.rc-form-group { margin-bottom: 1rem; }
.rc-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--rc-text);
  margin-bottom: 0.375rem;
}
.rc-input {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1.5px solid var(--rc-border);
  border-radius: 8px;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--rc-text);
  background: var(--rc-white);
  transition: border-color 200ms, box-shadow 200ms;
  outline: none;
  -webkit-appearance: none;
}
.rc-input:focus {
  border-color: var(--rc-primary);
  box-shadow: 0 0 0 3px rgba(var(--rc-primary-rgb), 0.12);
}
.rc-input--sm { padding: 0.4375rem 0.75rem; font-size: 0.875rem; }

.rc-msg--success { color: var(--rc-success); font-size: 0.8125rem; margin-top: 0.375rem; }
.rc-msg--error   { color: var(--rc-error);   font-size: 0.8125rem; margin-top: 0.375rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   20. ACCOUNT PANEL
   ═══════════════════════════════════════════════════════════════════════════ */
.rc-account-links { list-style: none; margin: 0; padding: 0; }
.rc-account-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9375rem 0;
  border-bottom: 1px solid var(--rc-border);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--rc-text);
  text-decoration: none;
  transition: color 150ms, padding-left 150ms;
}
.rc-account-link:hover { color: var(--rc-primary); padding-left: 0.375rem; }
.rc-account-links li:last-child .rc-account-link { border-bottom: none; }

.rc-auth-tabs {
  display: flex;
  border-bottom: 2px solid var(--rc-border);
  margin-bottom: 1.5rem;
}
.rc-auth-tab {
  flex: 1;
  padding: 0.75rem;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--rc-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 150ms, border-color 150ms;
}
.rc-auth-tab.active { color: var(--rc-primary); border-bottom-color: var(--rc-primary); }

/* WP login form */
.rc-drawer__body #loginform .login-username,
.rc-drawer__body #loginform .login-password,
.rc-drawer__body #loginform .login-remember { margin-bottom: 1rem; }
.rc-drawer__body #loginform label { font-size: 0.875rem; font-weight: 600; display: block; margin-bottom: 0.375rem; }
.rc-drawer__body #loginform input[type="text"],
.rc-drawer__body #loginform input[type="password"],
.rc-drawer__body #loginform input[type="email"] {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1.5px solid var(--rc-border);
  border-radius: 8px;
  font: inherit;
  font-size: 0.9375rem;
  background: var(--rc-white);
  color: var(--rc-text);
  transition: border-color 200ms;
  outline: none;
}
.rc-drawer__body #loginform input[type="text"]:focus,
.rc-drawer__body #loginform input[type="password"]:focus { border-color: var(--rc-primary); }
.rc-drawer__body #loginform input[type="submit"],
.rc-drawer__body #loginform #wp-submit {
  width: 100%;
  padding: 0.75rem 1.5rem;
  background: var(--rc-primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 150ms;
  margin-top: 0.25rem;
}
.rc-drawer__body #loginform input[type="submit"]:hover,
.rc-drawer__body #loginform #wp-submit:hover { background: var(--rc-primary-dark); }

/* ═══════════════════════════════════════════════════════════════════════════
   21. MOBILE MENU
   ═══════════════════════════════════════════════════════════════════════════ */
.rc-mobile-nav { list-style: none; margin: 0; padding: 0; }
.rc-mobile-nav li { border-bottom: 1px solid var(--rc-border); }
.rc-mobile-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.375rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--rc-text);
  text-decoration: none;
  transition: color 150ms, background 150ms;
}
.rc-mobile-nav a:hover { color: var(--rc-primary); background: var(--rc-surface); }
.rc-mobile-nav .current-menu-item > a { color: var(--rc-primary); }

/* ═══════════════════════════════════════════════════════════════════════════
   22. SOCIAL PROOF TOAST
   ═══════════════════════════════════════════════════════════════════════════ */
.rc-sp-toast {
  position: fixed;
  bottom: 80px;
  left: 1rem;
  z-index: 9998;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--sp-bg, var(--rc-white));
  color: var(--sp-text, var(--rc-text));
  border: 1px solid var(--sp-border, var(--rc-border));
  border-radius: var(--sp-radius, 12px);
  padding: 0.875rem 1rem;
  max-width: 300px;
  box-shadow: var(--rc-shadow-lg);
  /* default slide-from-left (bottom-left) */
  transform: translateX(calc(-100% - 2rem));
  transition: transform 400ms cubic-bezier(0.32, 0.72, 0, 1), opacity 400ms ease;
  opacity: 0;
}
/* Position variants */
.rc-sp-toast--bottom-left  { left: 1rem; right: auto; }
.rc-sp-toast--bottom-right { right: 1rem; left: auto; }
/* Slide direction */
.rc-sp-toast--slide-left  { transform: translateX(calc(-100% - 2rem)); }
.rc-sp-toast--slide-right { transform: translateX(calc(100% + 2rem)); }
/* When the toast is on the right and slides from right, adjust for right-anchored position */
.rc-sp-toast--bottom-right.rc-sp-toast--slide-right { transform: translateX(calc(100% + 2rem)); }
.rc-sp-toast--bottom-right.rc-sp-toast--slide-left  { transform: translateX(calc(-100% - 2rem)); }
/* Visible state — all variants */
.rc-sp-toast--visible { transform: translateX(0) !important; opacity: 1; }
@media (min-width: 1024px) { .rc-sp-toast { bottom: 1.5rem; } }

/* ═══════════════════════════════════════════════════════════════════════════
   23. FOOTER
   ═══════════════════════════════════════════════════════════════════════════ */
.rc-footer {
  background: var(--rc-footer-bg, #111110);
  color: var(--rc-footer-text, #d4d4cf);
}
/* opacity was 0.75 — fine on 4 of 5 built-in presets (huge margins, 9–13:1
   even dimmed) but on "Midnight" it compounds with an already-tight footer
   text/background pairing and drops under 4.5:1. 0.92 keeps a faint at-rest
   vs. hover distinction without failing the preset with the least room. */
.rc-footer a { color: var(--rc-footer-text, #d4d4cf); opacity: 0.92; text-decoration: none; transition: opacity 150ms; }
.rc-footer a:hover { opacity: 1; }
.rc-footer .widget-title,
.rc-footer h3 {
  color: #fff !important;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 1rem;
}
.rc-footer ul { list-style: none; padding: 0; margin: 0; }
.rc-footer ul li { margin-bottom: 0.5rem; }
.rc-footer ul a { font-size: 0.9375rem; }

/* ── Newsletter band ────────────────────────────────────────────────────── */
.rc-footer__newsletter {
  padding: 2rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.rc-footer__newsletter-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  flex-wrap: wrap;
}
.rc-footer__newsletter-copy { flex: 1; min-width: 260px; }
.rc-footer__newsletter-hdg {
  font-size: clamp(1.25rem, 2.5vw, 1.625rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0 0 0.375rem;
}
.rc-footer__newsletter-sub {
  font-size: 0.9375rem;
  /* was 0.7 — on Midnight, opacity blends footer_tx toward footer_bg and
     dropped effective contrast to 3.12:1 (needs 4.5:1); 0.95 keeps ~5:1. */
  opacity: 0.95;
  margin: 0;
  line-height: 1.55;
}
.rc-footer__newsletter-form { flex: 0 0 auto; width: 100%; max-width: 420px; }
.rc-footer__newsletter-row {
  display: flex;
  gap: 0.5rem;
}
.rc-footer__newsletter-input {
  flex: 1;
  height: 44px;
  padding: 0 1rem;
  background: rgba(255,255,255,0.08);
  border: 1.5px solid rgba(255,255,255,0.15);
  border-radius: var(--rc-radius);
  color: #fff;
  font-family: var(--rc-font);
  font-size: 0.9375rem;
  outline: none;
  transition: border-color 180ms;
}
.rc-footer__newsletter-input::placeholder { color: rgba(255,255,255,0.4); }
.rc-footer__newsletter-input:focus { border-color: rgba(255,255,255,0.45); }
.rc-footer__newsletter-btn {
  height: 44px;
  white-space: nowrap;
  flex-shrink: 0;
}
.rc-footer__newsletter-error { font-size: 0.8125rem; color: var(--rc-error, #ef4444); margin: 0.375rem 0 0; }
.rc-footer__newsletter-success { font-size: 0.9375rem; color: var(--rc-success, #22c55e); margin: 0.75rem 0 0; font-weight: 500; }
@media (max-width: 767px) {
  .rc-footer__newsletter-inner { flex-direction: column; gap: 1.5rem; }
  .rc-footer__newsletter-form { width: 100%; max-width: 100%; }
}

/* ── Widget columns ─────────────────────────────────────────────────────── */
.rc-footer__widgets { padding: 1.75rem 0 1.25rem; }

.rc-footer__grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .rc-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .rc-footer__grid--2 { grid-template-columns: repeat(2, 1fr); }
  .rc-footer__grid--3 { grid-template-columns: repeat(3, 1fr); }
  .rc-footer__grid--4 { grid-template-columns: 1.5fr repeat(3, 1fr); }
}
.rc-footer__col { }

/* ── Brand column ───────────────────────────────────────────────────────── */
.rc-footer__brand-col { display: flex; flex-direction: column; gap: 1rem; }
.rc-footer__logo .custom-logo-link { display: inline-flex; align-items: center; }
.rc-footer__logo .custom-logo,
.rc-footer__logo svg { max-height: 28px; height: auto; width: auto; max-width: 160px; filter: brightness(10); }
.rc-footer__site-name { font-size: 1.125rem; font-weight: 800; color: var(--rc-btn-text); letter-spacing: -0.02em; }
/* opacity: 0.6 measured at 4.32:1 against the footer background — just under
   the 4.5:1 AA minimum. 0.72 keeps the same "muted" intent with a real margin
   (~7:1) instead of one that only worked for whichever exact colors this
   palette happened to use. */
/* No opacity here — plain (non-link) text has no hover state to justify
   dimming, and on "Midnight" even a small opacity reduction was enough to
   drop this under 4.5:1 (that preset's footer text/background pairing has
   very little contrast margin to begin with). */
.rc-footer__tagline { font-size: 0.9375rem; line-height: 1.5; margin: 0; max-width: 260px; }
.rc-footer__social {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}
.rc-footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.2);
  color: var(--rc-footer-text, #d4d4cf);
  opacity: 1 !important;
  transition: background 160ms, border-color 160ms, color 160ms;
}
.rc-footer__social-link:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.4);
  color: #fff;
}

/* ── Bottom bar ─────────────────────────────────────────────────────────── */
.rc-footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 0.875rem 0;
}
.rc-footer__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
/* No opacity here on purpose: it contains a plain-text run AND a link that
   already dims itself via `.rc-footer a { opacity: 0.75 }` below — an
   opacity here would COMPOUND with that (0.65 × 0.75 ≈ 0.49 effective),
   which is what pushed the link to 3.34:1, well under the 4.5:1 minimum.
   Opacity multiplies with every ancestor's opacity; color does not, so it's
   the only one of the two that's safe to stack. */
.rc-footer__copy { font-size: 0.875rem; margin: 0; }
.rc-footer__copy a { font-weight: 500; }

/* ── Payment icons ──────────────────────────────────────────────────────── */
.rc-footer__payment {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
}
.rc-payment-icon {
  display: inline-flex;
  opacity: 0.7;
  transition: opacity 150ms;
}
.rc-payment-icon:hover { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════════════════
   24. ADMIN — SHORTCODE BUILDER COPY BUTTON
   ═══════════════════════════════════════════════════════════════════════════ */
.rc-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  background: var(--rc-primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 150ms, transform 80ms;
  margin-top: 0.75rem;
}
.rc-copy-btn:hover  { background: var(--rc-primary-dark); }
.rc-copy-btn:active { transform: scale(0.97); }
.rc-copy-btn--copied { background: var(--rc-success) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   25. WOOCOMMERCE OVERRIDES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Force our grid on WC archive loop */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid !important;
  gap: 1.25rem !important;
  grid-template-columns: repeat(2, 1fr) !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  clear: both !important;
}
@media (min-width: 768px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (min-width: 1024px) {
  .woocommerce ul.products.columns-4,
  .woocommerce-page ul.products.columns-4 { grid-template-columns: repeat(4, 1fr) !important; }
  .woocommerce ul.products.columns-3,
  .woocommerce-page ul.products.columns-3 { grid-template-columns: repeat(3, 1fr) !important; }
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Hide WC default output our card replaces */
.woocommerce-loop-product__title     { display: none !important; }
.woocommerce .star-rating             { display: none; }
.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link:not(.rc-card) { display: none !important; }

/* WC price */
.woocommerce-Price-amount { font-weight: 700; }
.price ins  { text-decoration: none; }
.price del  { opacity: 0.6; }

/* WC sorting */
.woocommerce-ordering select {
  padding: 0.5rem 2.25rem 0.5rem 0.875rem !important;
  border: 1.5px solid var(--rc-border) !important;
  border-radius: 8px !important;
  font: inherit !important;
  font-size: 0.875rem !important;
  background-color: var(--rc-white) !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.625rem center !important;
  outline: none !important;
  transition: border-color 200ms !important;
}
.woocommerce-ordering select:focus { border-color: var(--rc-primary) !important; }

/* WC result count */
.woocommerce-result-count {
  font-size: 0.875rem;
  color: var(--rc-muted);
  margin: 0;
}

/* WC notices — padding/!important restores WC's own icon-reserved spacing,
   which .entry-content ul (higher selector specificity) otherwise collapses
   on any page where notices render inside post/page content (login, account). */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  padding: 1em 1.5em 1em 3.5em !important;
  border-radius: var(--rc-radius) !important;
  border: none !important;
  margin-bottom: 1.5rem !important;
  box-shadow: none !important;
}
.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a { font-weight: 600; text-decoration: underline; }

.woocommerce-message {
  background: color-mix(in srgb, var(--rc-success) 10%, var(--rc-white)) !important;
  color: var(--rc-text) !important;
}
.woocommerce-message::before { color: var(--rc-success) !important; }
.woocommerce-message a { color: var(--rc-success-dark, var(--rc-success)); }

.woocommerce-info {
  background: color-mix(in srgb, var(--rc-warning) 12%, var(--rc-white)) !important;
  color: var(--rc-text) !important;
}
.woocommerce-info::before { color: var(--rc-warning) !important; }
.woocommerce-info a { color: var(--rc-warning); }

.woocommerce-error {
  background: color-mix(in srgb, var(--rc-error) 10%, var(--rc-white)) !important;
  color: var(--rc-text) !important;
}
.woocommerce-error::before { color: var(--rc-error) !important; }
.woocommerce-error a { color: var(--rc-error); }

/* WC gives notices tabindex="-1" and focuses them for a11y on load — match the
   focus ring to the notice's own color instead of the site-wide primary color. */
.woocommerce-message:focus,
.woocommerce-message:focus-visible { outline-color: var(--rc-success) !important; }
.woocommerce-info:focus,
.woocommerce-info:focus-visible { outline-color: var(--rc-warning) !important; }
.woocommerce-error:focus,
.woocommerce-error:focus-visible { outline-color: var(--rc-error) !important; }

/* WC Blocks (Cart/Checkout) notices — same red/amber/green tokens as the classic
   .woocommerce-error/-info/-message above, so both rendering paths match. */
.wc-block-components-notice-banner {
  border-radius: var(--rc-radius) !important;
  font-family: var(--rc-font);
}
.wc-block-components-notice-banner.is-error {
  background-color: color-mix(in srgb, var(--rc-error) 10%, var(--rc-white)) !important;
  border-color: var(--rc-error) !important;
  color: var(--rc-text) !important;
}
.wc-block-components-notice-banner.is-error > svg { background-color: var(--rc-error) !important; }
.wc-block-components-notice-banner.is-warning {
  background-color: color-mix(in srgb, var(--rc-warning) 12%, var(--rc-white)) !important;
  border-color: var(--rc-warning) !important;
  color: var(--rc-text) !important;
}
.wc-block-components-notice-banner.is-warning > svg { background-color: var(--rc-warning) !important; }
.wc-block-components-notice-banner.is-success {
  background-color: color-mix(in srgb, var(--rc-success) 10%, var(--rc-white)) !important;
  border-color: var(--rc-success) !important;
  color: var(--rc-text) !important;
}
.wc-block-components-notice-banner.is-success > svg { background-color: var(--rc-success) !important; }
.wc-block-components-notice-banner.is-info {
  background-color: color-mix(in srgb, var(--rc-primary) 8%, var(--rc-white)) !important;
  border-color: var(--rc-primary) !important;
  color: var(--rc-text) !important;
}
.wc-block-components-notice-banner.is-info > svg { background-color: var(--rc-primary) !important; }

/* WC Blocks inline field-validation error (e.g. checkout coupon field) — WC's own
   red (#dc2626) doesn't match the theme's --rc-error, and at 13px/400-weight it
   reads as an afterthought next to the rest of the order-summary card. */
.wc-block-components-validation-error {
  background: color-mix(in srgb, var(--rc-error) 8%, var(--rc-white));
  border-radius: var(--rc-radius-sm);
  padding: 0.5rem 0.625rem !important;
  margin-top: 0.5rem !important;
}
.wc-block-components-validation-error p {
  color: var(--rc-error) !important;
  font-weight: 600;
  font-size: 0.8125rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.wc-block-components-validation-error svg { fill: var(--rc-error) !important; }

/* WC pagination */
.woocommerce nav.woocommerce-pagination {
  margin-top: 2.5rem !important;
}
.woocommerce nav.woocommerce-pagination ul {
  display: flex !important;
  justify-content: center !important;
  gap: 0.375rem !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.woocommerce nav.woocommerce-pagination ul li { border: none !important; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 8px !important;
  border: 1.5px solid var(--rc-border) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: var(--rc-text) !important;
  text-decoration: none !important;
  transition: all 150ms !important;
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: var(--rc-primary) !important;
  border-color: var(--rc-primary) !important;
  color: #fff !important;
}

/* ── WC Single Product ───────────────────────────────────────────────────── */
.woocommerce div.product {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
}
@media (max-width: 767px) {
  .woocommerce div.product { grid-template-columns: 1fr; }
}
.woocommerce div.product div.images { }
.woocommerce div.product div.summary { }

/* Gallery */
.woocommerce div.product .woocommerce-product-gallery__image img {
  border-radius: 10px;
  border: 1px solid var(--rc-border);
}
.woocommerce div.product .flex-control-thumbs {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.625rem;
  padding: 0;
  list-style: none;
}
.woocommerce div.product .flex-control-thumbs li img {
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color 150ms;
}
.woocommerce div.product .flex-control-thumbs li img.flex-active {
  border-color: var(--rc-primary);
}

/* Product title */
.woocommerce div.product h1.product_title {
  font-size: 1.75rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.2 !important;
  margin: 0 0 0.5rem !important;
  color: var(--rc-text) !important;
}

/* Price */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-size: 1.625rem !important;
  font-weight: 800 !important;
  color: var(--rc-primary) !important;
  margin-bottom: 1.25rem !important;
}
.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins { text-decoration: none !important; color: #dc2626 !important; }
.woocommerce div.product p.price del,
.woocommerce div.product span.price del { font-size: 1rem !important; color: var(--rc-muted) !important; margin-right: 0.375rem !important; }

/* ATC button */
.woocommerce div.product .single_add_to_cart_button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button {
  background: var(--rc-primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 0.875rem 2rem !important;
  font: inherit !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background 150ms, transform 80ms, box-shadow 150ms !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
}
.woocommerce div.product .single_add_to_cart_button:hover {
  background: var(--rc-primary-dark) !important;
  box-shadow: 0 4px 14px rgba(var(--rc-primary-rgb), 0.3) !important;
  transform: translateY(-1px) !important;
}

/* Short desc */
.woocommerce div.product .woocommerce-product-details__short-description {
  font-size: 0.9375rem;
  color: var(--rc-muted);
  line-height: 1.65;
  margin-bottom: 1.25rem;
}
.woocommerce div.product .woocommerce-product-details__short-description p { margin: 0 0 0.5rem; }

/* Tabs */
.woocommerce div.product .woocommerce-tabs { clear: both; margin-top: 3rem; grid-column: 1 / -1; }
.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex !important;
  border-bottom: 2px solid var(--rc-border) !important;
  padding: 0 !important;
  margin: 0 0 0 !important;
  list-style: none !important;
  gap: 0 !important;
  background: none !important;
  overflow: visible !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: block !important;
  padding: 0.75rem 1.25rem !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  color: var(--rc-muted) !important;
  text-decoration: none !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -2px !important;
  transition: color 150ms, border-color 150ms !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--rc-text) !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--rc-primary) !important;
  border-bottom-color: var(--rc-primary) !important;
}
.woocommerce div.product .woocommerce-tabs .panel {
  padding: 1.5rem 0 !important;
  border: none !important;
  background: none !important;
  margin: 0 !important;
  box-shadow: none !important;
}
.woocommerce div.product .woocommerce-tabs .panel::before,
.woocommerce div.product .woocommerce-tabs .panel::after { display: none !important; }

/* Related products */
.woocommerce .related h2,
.woocommerce .upsells h2 {
  font-size: 1.375rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  margin-bottom: 1.5rem !important;
  color: var(--rc-text) !important;
}
.woocommerce .related ul.products,
.woocommerce .upsells ul.products {
  grid-template-columns: repeat(4, 1fr) !important;
}
@media (max-width: 767px) {
  .woocommerce .related ul.products,
  .woocommerce .upsells ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   26. BREADCRUMBS
   ═══════════════════════════════════════════════════════════════════════════ */
.rc-breadcrumbs { margin: 0 0 1rem; }
.rc-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.8125rem;
}
.rc-breadcrumbs a { color: var(--rc-muted); transition: color 150ms; }
.rc-breadcrumbs a:hover { color: var(--rc-primary); }
.rc-breadcrumb-sep { color: var(--rc-muted); font-size: 0.75rem; }

/* WC breadcrumb */
.woocommerce .woocommerce-breadcrumb {
  font-size: 0.8125rem !important;
  color: var(--rc-muted) !important;
  margin-bottom: 1rem !important;
}
.woocommerce .woocommerce-breadcrumb a {
  color: var(--rc-muted) !important;
  text-decoration: none !important;
  transition: color 150ms !important;
}
.woocommerce .woocommerce-breadcrumb a:hover { color: var(--rc-primary) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   27. UTILITY / MISC
   ═══════════════════════════════════════════════════════════════════════════ */
.rc-product-data { display: none !important; }
.rc-sb-field, .rc-sb-check { /* shortcode builder fields */ }

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 1 ADDITIONS — Single Product + Partial Nav
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Single product layout ───────────────────────────────────────────────── */
.rc-single {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
  margin-bottom: 3rem;
}
@media (max-width: 767px) {
  .rc-single { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* Gallery — scrolls naturally; summary column is the sticky one */
.rc-single__gallery { min-width: 0; }

/* Sticky summary sidebar (desktop) */
.rc-single--sticky-summary .rc-single__summary {
  position: sticky;
  top: calc(var(--rc-header-h, 72px) + 1rem);
  align-self: start;
}
@media (max-width: 767px) {
  .rc-single--sticky-summary .rc-single__summary { position: relative; top: 0; }
}
/* Reset in drawer / full-page-drawer contexts */
.rc-product-drawer__inner .rc-single__summary,
.rc-pd__content .rc-single__summary { position: relative !important; top: 0 !important; }

.rc-single__img-main {
  position: relative;
  border-radius: var(--rc-radius);
  overflow: hidden;
  background: var(--rc-surface);
  aspect-ratio: 3 / 4;
}
.rc-single__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms var(--rc-ease);
}
/* Beat WooCommerce's .woocommerce img { height: auto } (specificity 0,1,1) */
.rc-single__img-main .rc-single__img { height: 100%; }
/* Keep subtle scale on mobile/tablet; on desktop the loupe provides zoom feedback */
@media (max-width: 1023px) {
  .rc-single__img-main:hover .rc-single__img { transform: scale(1.03); }
}

/* .rc-single__zoom-hint removed — replaced by hover loupe (.rc-single__loupe) */

.rc-single__thumbs {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}
.rc-single__thumb {
  width: 64px;
  height: 85px;
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid var(--rc-border);
  padding: 0;
  cursor: pointer;
  transition: border-color 150ms;
  background: var(--rc-surface);
  flex-shrink: 0;
}
.rc-single__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rc-single__thumb:hover { border-color: var(--rc-primary); }
.rc-single__thumb--active { border-color: var(--rc-primary) !important; }

/* Summary */
.rc-single__summary { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }

.rc-single__title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--rc-text);
  margin: 0;
}

.rc-single__rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
}
.rc-single__stars { color: #f59e0b; font-size: 1rem; letter-spacing: -1px; }
.rc-single__rating-count { color: var(--rc-muted); text-decoration: none; }
.rc-single__rating-count:hover { color: var(--rc-primary); text-decoration: underline; }

.rc-single__price {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--rc-primary);
  line-height: 1;
}
.rc-single__price .woocommerce-Price-amount { font-weight: inherit; }
.rc-single__price ins  { text-decoration: none; color: #dc2626; }
.rc-single__price del  { font-size: 1.125rem; color: var(--rc-muted); font-weight: 400; margin-right: 0.5rem; }

.rc-single__short-desc {
  font-size: 0.9375rem;
  color: var(--rc-muted);
  line-height: 1.65;
}
.rc-single__short-desc p { margin: 0 0 0.5rem; }
.rc-single__short-desc p:last-child { margin-bottom: 0; }

/* ATC area */
.rc-single__atc-wrap { display: flex; flex-direction: column; gap: 0.625rem; }

.rc-single__urgency { min-height: 1.25rem; }
.rc-urgency {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.375rem 0.75rem;
  border-radius: 6px;
}
.rc-urgency--stock { background: #fef3c7; color: #92400e; }
.rc-urgency--timer { background: #fef2f2; color: #991b1b; }

.rc-single__qty-atc {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}
.rc-single__qty {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  background: var(--rc-surface);
  border: 1.5px solid var(--rc-border);
  border-radius: 8px;
  padding: 0.125rem;
  flex-shrink: 0;
}
.rc-single__qty .rc-qty-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  border-radius: 6px;
}
.rc-single__qty .rc-qty-val {
  min-width: 32px;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
}
.rc-single__atc-btn {
  flex: 1;
  padding: 0.875rem 1.5rem;
  font-size: 1rem;
}
.rc-single__buy-now { margin-top: 0.25rem; }

/* Trust badges */
.rc-single__trust {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.625rem;
  padding: 1rem;
  background: var(--rc-surface);
  border-radius: var(--rc-radius-sm);
  border: 1px solid var(--rc-border);
}
.rc-trust-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--rc-muted);
  font-weight: 500;
}
.rc-trust-badge svg { flex-shrink: 0; color: var(--rc-primary); }
.rc-single__trust--qv {
  grid-template-columns: 1fr;
  padding: 0.75rem;
  margin-top: 0.75rem;
}

/* Delivery info bar */
.rc-single__delivery {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--rc-muted);
  font-weight: 500;
  padding: 0.625rem 0;
}
.rc-single__delivery svg { flex-shrink: 0; color: var(--rc-primary); }

/* Meta (SKU, categories) */
.rc-single__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font-size: 0.8125rem;
  color: var(--rc-muted);
  padding-top: 0.5rem;
  border-top: 1px solid var(--rc-border);
}
.rc-single__meta-item span { font-weight: 500; color: var(--rc-text); }
.rc-single__meta-item a { color: var(--rc-primary); }

/* Share */
.rc-single__share {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.rc-single__share-label { font-size: 0.8125rem; color: var(--rc-muted); font-weight: 500; }
.rc-share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--rc-border);
  color: var(--rc-muted);
  background: transparent;
  text-decoration: none;
  transition: border-color 150ms, color 150ms, background 150ms;
  cursor: pointer;
}
.rc-share-btn:hover { border-color: var(--rc-primary); color: var(--rc-primary); background: rgba(var(--rc-primary-rgb), 0.06); }

/* ── Sticky ATC bar ──────────────────────────────────────────────────────── */
.rc-sticky-atc {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 450;
  background: color-mix(in srgb, var(--rc-white) 97%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--rc-border);
  box-shadow: 0 -4px 24px rgba(0,0,0,0.08);
  transform: translateY(100%);
  transition: transform 300ms var(--rc-ease-out);
  padding: 0.75rem 0;
}
.rc-sticky-atc--visible { transform: translateY(0); }
@media (max-width: 1023px) {
  /* On mobile, sit above bottom nav */
  .rc-sticky-atc { bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
}

.rc-sticky-atc__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.rc-sticky-atc__product {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
  min-width: 0;
}
.rc-sticky-atc__img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
  border: 1px solid var(--rc-border);
}
.rc-sticky-atc__name {
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rc-sticky-atc__price {
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--rc-primary);
  white-space: nowrap;
  flex-shrink: 0;
}
.rc-sticky-atc__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}
.rc-single__qty--sm .rc-qty-val { min-width: 24px; font-size: 0.875rem; }
.rc-single__qty--sm .rc-qty-btn { width: 28px; height: 28px; font-size: 1rem; }
@media (hover: none) and (pointer: coarse) {
  .rc-single__qty--sm .rc-qty-btn { width: 44px; height: 44px; }
}
/* Mobile sticky ATC: drop the qty stepper, button takes full available width */
@media (max-width: 767px) {
  .rc-sticky-atc .rc-single__qty--sm { display: none; }
  .rc-sticky-atc__btn { flex: 1; }
  .rc-sticky-atc__product { min-width: 0; flex: 1; }
}

/* ── Product tabs ────────────────────────────────────────────────────────── */
.rc-single__tabs { margin-bottom: 3rem; }

.rc-tabs__nav {
  display: flex;
  border-bottom: 2px solid var(--rc-border);
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.rc-tabs__nav::-webkit-scrollbar { display: none; }

.rc-tab-btn {
  padding: 0.875rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--rc-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 150ms, border-color 150ms;
}
.rc-tab-btn:hover { color: var(--rc-text); }
.rc-tab-btn--active { color: var(--rc-primary); border-bottom-color: var(--rc-primary); }

.rc-tab-panel {
  padding: 1.75rem 0;
  line-height: 1.7;
  color: var(--rc-text);
}
.rc-product-description h2 { font-size: 1.25rem; font-weight: 700; margin: 1.5rem 0 0.75rem; }
.rc-product-description p  { margin: 0 0 1rem; color: var(--rc-muted); }
.rc-product-description ul { list-style: disc; padding-left: 1.5rem; margin: 0 0 1rem; color: var(--rc-muted); }
.rc-product-description img { border-radius: 8px; margin: 1rem 0; }

/* WC additional info table */
.shop_attributes { width: 100%; border-collapse: collapse; }
.shop_attributes th, .shop_attributes td {
  padding: 0.625rem 0.875rem;
  text-align: left;
  font-size: 0.9375rem;
  border-bottom: 1px solid var(--rc-border);
}
.shop_attributes th { font-weight: 600; color: var(--rc-text); width: 35%; background: var(--rc-surface); }
.shop_attributes td { color: var(--rc-muted); }

/* ── Related products / recently viewed ──────────────────────────────────── */
.rc-single__related,
/* Single product recently-viewed — uses same rc-shop-rv carousel as shop/account pages */
.rc-single__recently-viewed {
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--rc-border);
}

/* ── Complete the Look — bundle section ─────────────────────────────────── */
.rc-bundle {
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--rc-border);
}
.rc-bundle__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.rc-bundle__header .rc-section-title { margin: 0; }
.rc-bundle__pricing {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.rc-bundle__badge {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--rc-white);
  background: var(--rc-success, #10b981);
  padding: 0.2rem 0.625rem;
  border-radius: 100px;
}
.rc-bundle__total-label { font-size: 0.875rem; color: var(--rc-muted); }
.rc-bundle__total-price { font-size: 1.0625rem; font-weight: 700; color: var(--rc-text); }
.rc-bundle__products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
}
.rc-bundle-card {
  background: var(--rc-white);
  border: 1.5px solid var(--rc-border);
  border-radius: var(--rc-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 200ms, border-color 200ms;
}
.rc-bundle-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.09); border-color: var(--rc-border-dark); }
.rc-bundle-card__img-wrap { aspect-ratio: 1; overflow: hidden; display: block; }
.rc-bundle-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms ease; }
.rc-bundle-card:hover .rc-bundle-card__img { transform: scale(1.05); }
.rc-bundle-card__body { padding: 0.625rem 0.75rem; flex: 1; }
.rc-bundle-card__title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--rc-text);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rc-bundle-card__price { font-size: 0.8125rem; font-weight: 700; color: var(--rc-primary); display: block; margin-top: 0.25rem; }
.rc-bundle-card__atc { margin: 0 0.625rem 0.625rem; width: calc(100% - 1.25rem); justify-content: center; }
.rc-bundle__atc-wrap {
  grid-column: 1 / -1;
  margin-top: 0.5rem;
}
.rc-bundle__atc-btn { gap: 0.5rem; }

/* ── Frequently bought together — compact inline (summary column) ────────── */
.rc-fbt {
  margin-top: 1rem;
  background: var(--rc-surface);
  border: 1.5px solid var(--rc-border);
  border-radius: var(--rc-radius);
  overflow: hidden;
}
.rc-fbt__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--rc-muted);
  border-bottom: 1px solid var(--rc-border);
}
.rc-fbt__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.875rem;
  border-bottom: 1px solid var(--rc-border);
}
.rc-fbt__item:last-child { border-bottom: none; }
.rc-fbt__img-link { flex-shrink: 0; display: block; border-radius: 6px; overflow: hidden; width: 44px; height: 44px; }
.rc-fbt__img { width: 44px; height: 44px; object-fit: cover; display: block; transition: transform 300ms ease; }
.rc-fbt__img-link:hover .rc-fbt__img { transform: scale(1.06); }
.rc-fbt__info { flex: 1; min-width: 0; }
.rc-fbt__name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--rc-text);
  text-decoration: none;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
}
.rc-fbt__name:hover { color: var(--rc-primary); }
.rc-fbt__price { font-size: 0.75rem; font-weight: 700; color: var(--rc-primary); margin-top: 0.125rem; display: block; }
.rc-fbt__add {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--rc-primary);
  background: transparent;
  color: var(--rc-primary);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 150ms, color 150ms;
  padding: 0;
}
.rc-fbt__add:hover { background: var(--rc-primary); color: var(--rc-white); }
.rc-fbt__add:disabled { opacity: 0.55; pointer-events: none; }
.rc-fbt__footer {
  padding: 0.625rem 0.875rem 0.75rem;
  background: var(--rc-surface);
  border-top: 1px solid var(--rc-border);
}
.rc-fbt__atc-all { width: 100%; justify-content: center; gap: 0.4rem; font-size: 0.8125rem; }

/* ── Quantity-based pricing tiers ────────────────────────────────────────── */
.rc-qty-pricing {
  margin: 1rem 0;
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius);
  overflow: hidden;
  background: var(--rc-white);
}
.rc-qty-pricing__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  background: var(--rc-surface);
  border-bottom: 1px solid var(--rc-border);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rc-muted);
}
.rc-qty-pricing__head svg { color: var(--rc-primary); flex-shrink: 0; }
.rc-qty-pricing__tiers { display: flex; flex-direction: column; }
.rc-qty-pricing__tier {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid var(--rc-border);
  transition: background 150ms;
}
.rc-qty-pricing__tier:last-child { border-bottom: none; }
.rc-qty-pricing__tier--active {
  background: color-mix(in srgb, var(--rc-primary) 8%, var(--rc-white));
  border-color: color-mix(in srgb, var(--rc-primary) 20%, var(--rc-border));
}
.rc-qty-pricing__qty {
  font-size: 0.8125rem;
  color: var(--rc-text);
  font-weight: 500;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
}
.rc-qty-pricing__tier--active .rc-qty-pricing__qty { font-weight: 700; }
.rc-qty-pricing__per {
  font-size: 0.6875rem;
  color: var(--rc-muted);
  font-weight: 400;
}
.rc-qty-pricing__price {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--rc-text);
  text-align: right;
  white-space: nowrap;
}
.rc-qty-pricing__tier--active .rc-qty-pricing__price { color: var(--rc-primary); }
.rc-qty-pricing__save {
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.125rem 0.4rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--rc-success, #22c55e) 15%, var(--rc-white));
  color: color-mix(in srgb, var(--rc-success, #22c55e) 70%, #000);
  white-space: nowrap;
}
.rc-qty-pricing__save--muted {
  background: var(--rc-surface);
  color: var(--rc-muted);
}
.rc-qty-pricing__badge {
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.125rem 0.4rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--rc-primary) 12%, var(--rc-white));
  color: var(--rc-primary);
  white-space: nowrap;
}
.rc-qty-pricing__msg {
  margin: 0;
  padding: 0.625rem 0.875rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 700;
  border-top: 1px solid var(--rc-border);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.rc-qty-pricing__msg-icon { flex-shrink: 0; }
.rc-qty-pricing__msg--savings {
  color: color-mix(in srgb, var(--rc-success, #22c55e) 60%, #000);
  background: color-mix(in srgb, var(--rc-success, #22c55e) 12%, var(--rc-white));
  font-size: 0.875rem;
  letter-spacing: -0.01em;
}
.rc-qty-pricing__msg--nudge {
  color: var(--rc-muted);
  background: var(--rc-surface);
  font-weight: 600;
}

/* ── BOGO banner ─────────────────────────────────────────────────────────── */
.rc-qty-bogo {
  margin: 1rem 0;
  border: 1px solid color-mix(in srgb, var(--rc-primary) 30%, var(--rc-border));
  border-radius: var(--rc-radius);
  background: color-mix(in srgb, var(--rc-primary) 6%, var(--rc-white));
  overflow: hidden;
}
.rc-qty-bogo__inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
}
.rc-qty-bogo__icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--rc-primary);
  color: var(--rc-white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.rc-qty-bogo__text { display: flex; flex-direction: column; gap: 0.125rem; }
.rc-qty-bogo__label {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--rc-text);
  line-height: 1.2;
}
.rc-qty-bogo__sub {
  font-size: 0.75rem;
  color: var(--rc-muted);
  line-height: 1.4;
}

/* ── Cart page cross-sells ───────────────────────────────────────────────── */
.rc-cross-sells {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rc-border);
}
.rc-cross-sells__header { margin-bottom: 1.25rem; }
.rc-cross-sells__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--rc-text);
  margin: 0;
}
.rc-cross-sells__title svg { color: var(--rc-primary); flex-shrink: 0; }
.rc-cross-sells__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rem;
}
.rc-cross-sells__grid--skeleton .rc-skel { height: 150px; }
.rc-cross-sell-card {
  background: var(--rc-white);
  border: 1.5px solid var(--rc-border);
  border-radius: var(--rc-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 200ms, border-color 200ms;
}
.rc-cross-sell-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.09); border-color: var(--rc-border-dark); }
.rc-cross-sell-card__img-wrap { aspect-ratio: 1; overflow: hidden; position: relative; display: block; }
.rc-cross-sell-card__wishlist {
  position: absolute;
  top: 6px; right: 6px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--rc-white);
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--rc-text);
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
  transition: background 150ms, box-shadow 150ms;
}
.rc-cross-sell-card__wishlist:hover { background: var(--rc-white); box-shadow: 0 2px 8px rgba(0,0,0,0.18); }
.rc-cross-sell-card__wishlist--active svg { fill: #ef4444; stroke: #ef4444; }
.rc-cross-sell-card__wishlist:hover svg { fill: #ef4444; stroke: #ef4444; }
.rc-cross-sell-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms ease; }
.rc-cross-sell-card:hover .rc-cross-sell-card__img { transform: scale(1.05); }
.rc-cross-sell-card__body { padding: 0.625rem 0.75rem; flex: 1; }
.rc-cross-sell-card__title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--rc-text);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  display: block;
}
.rc-cross-sell-card__price { font-size: 0.8125rem; font-weight: 700; color: var(--rc-primary); display: block; margin-top: 0.25rem; }
.rc-cross-sell-card__atc { margin: 0 0.625rem 0.625rem; width: calc(100% - 1.25rem); justify-content: center; }

/* ═══════════════════════════════════════════════════════════════════════════
   P1.3 — CART PAGE
   ═══════════════════════════════════════════════════════════════════════════ */
.woocommerce-cart .rc-main,
.woocommerce-checkout .rc-main { background: var(--rc-surface); }

.woocommerce-cart-form { background: var(--rc-white); border-radius: var(--rc-radius); border: 1px solid var(--rc-border); overflow: hidden; }
.woocommerce-cart-form table.shop_table { width: 100%; border-collapse: collapse; }
.woocommerce-cart-form table.shop_table th {
  padding: 1rem 1.25rem;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--rc-muted);
  border-bottom: 1px solid var(--rc-border);
  background: var(--rc-surface);
  text-align: left;
}
.woocommerce-cart-form table.shop_table td {
  padding: 1.25rem;
  border-bottom: 1px solid var(--rc-border);
  vertical-align: middle;
}
.woocommerce-cart-form .product-thumbnail img {
  width: 72px;
  height: 96px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--rc-border);
}
.woocommerce-cart-form .product-name a { font-weight: 600; color: var(--rc-text); text-decoration: none; }
.woocommerce-cart-form .product-name a:hover { color: var(--rc-primary); }
.woocommerce-cart-form .product-price,
.woocommerce-cart-form .product-subtotal { font-weight: 700; }
.woocommerce-cart-form .quantity input[type="number"] {
  width: 60px;
  padding: 0.5rem;
  border: 1.5px solid var(--rc-border);
  border-radius: 6px;
  text-align: center;
  font: inherit;
  font-size: 0.9375rem;
}
.woocommerce-cart-form .product-remove a {
  color: var(--rc-muted);
  font-size: 1.25rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  transition: color 150ms, background 150ms;
}
.woocommerce-cart-form .product-remove a:hover { color: #ef4444; background: #fef2f2; }
.woocommerce-cart-form .actions { padding: 1.25rem; display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; }
.woocommerce-cart-form .coupon { display: flex; gap: 0.5rem; flex: 1; }
.woocommerce-cart-form .coupon input { flex: 1; }

/* Cart totals */
.cart-collaterals { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 1.5rem; }
@media (min-width: 768px) { .cart-collaterals { grid-template-columns: 1fr 1fr; } }
.cart_totals { background: var(--rc-white); border-radius: var(--rc-radius); border: 1px solid var(--rc-border); padding: 1.5rem; }
.cart_totals h2 { font-size: 1.125rem; font-weight: 700; margin-bottom: 1rem; }
.cart_totals table { width: 100%; border-collapse: collapse; }
.cart_totals table th, .cart_totals table td { padding: 0.625rem 0; border-bottom: 1px solid var(--rc-border); }
.cart_totals table th { font-weight: 600; text-align: left; width: 40%; }
.cart_totals table .order-total th,
.cart_totals table .order-total td { font-size: 1.125rem; font-weight: 800; border-bottom: none; padding-top: 1rem; }
.cart_totals .wc-proceed-to-checkout { margin-top: 1.25rem; }
.cart_totals .wc-proceed-to-checkout .checkout-button {
  display: flex !important;
  width: 100% !important;
  justify-content: center !important;
  background: var(--rc-primary) !important;
  color: #fff !important;
  padding: 0.875rem 2rem !important;
  border-radius: 8px !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: background 150ms !important;
}
.cart_totals .wc-proceed-to-checkout .checkout-button:hover {
  background: var(--rc-primary-dark) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   P1.4 — CHECKOUT PAGE
   ═══════════════════════════════════════════════════════════════════════════ */
.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review { }

.woocommerce-checkout .col2-set {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}
@media (max-width: 767px) { .woocommerce-checkout .col2-set { grid-template-columns: 1fr; } }

.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3,
.woocommerce-checkout #order_review_heading {
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--rc-border);
}

.woocommerce-checkout .form-row { margin-bottom: 1rem; }
.woocommerce-checkout .form-row label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.375rem;
  color: var(--rc-text);
}
.woocommerce-checkout .form-row .required { color: #ef4444; }
.woocommerce-checkout .form-row input[type="text"],
.woocommerce-checkout .form-row input[type="email"],
.woocommerce-checkout .form-row input[type="tel"],
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
  width: 100% !important;
  padding: 0.625rem 0.875rem !important;
  border: 1.5px solid var(--rc-border) !important;
  border-radius: 8px !important;
  font: inherit !important;
  font-size: 0.9375rem !important;
  transition: border-color 200ms !important;
  outline: none !important;
  background: var(--rc-white) !important;
  color: var(--rc-text) !important;
}
.woocommerce-checkout .form-row input:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .form-row textarea:focus {
  border-color: var(--rc-primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--rc-primary-rgb), 0.12) !important;
}

/* Order review */
.woocommerce-checkout-review-order-table { width: 100%; border-collapse: collapse; }
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td { padding: 0.75rem 0; border-bottom: 1px solid var(--rc-border); font-size: 0.9375rem; }
.woocommerce-checkout-review-order-table .order-total td,
.woocommerce-checkout-review-order-table .order-total th { font-size: 1.125rem; font-weight: 800; border-bottom: none; }

#place_order {
  width: 100% !important;
  padding: 1rem 2rem !important;
  background: var(--rc-primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  font: inherit !important;
  font-size: 1.0625rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background 150ms, transform 80ms !important;
  margin-top: 1.25rem !important;
}
#place_order:hover { background: var(--rc-primary-dark) !important; }
#place_order:active { transform: scale(0.99) !important; }

/* Payment methods */
.woocommerce-checkout #payment { background: var(--rc-surface); border-radius: var(--rc-radius); padding: 1.25rem; border: 1px solid var(--rc-border); margin-top: 1.5rem; }
.woocommerce-checkout #payment ul.payment_methods { list-style: none; margin: 0 0 1.25rem; padding: 0; }
.woocommerce-checkout #payment ul.payment_methods li { padding: 0.75rem 0; border-bottom: 1px solid var(--rc-border); }
.woocommerce-checkout #payment ul.payment_methods li:last-child { border-bottom: none; }
.woocommerce-checkout #payment ul.payment_methods label { font-weight: 600; cursor: pointer; }

/* ── Checkout: account creation + ship-to-different ─────────────────────── */
/* "Create an account?" checkbox row */
.woocommerce-checkout .woocommerce-account-fields,
.woocommerce-checkout .create-account {
  margin-top: 1.25rem;
  padding: 1rem 1.125rem;
  background: var(--rc-surface);
  border: 1.5px solid var(--rc-border);
  border-radius: 8px;
}
/* WC wraps input inside the label (no for= attr), so target by class */
.woocommerce-checkout .create-account .woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
}
.woocommerce-checkout .create-account .woocommerce-form__input-checkbox {
  flex-shrink: 0;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  top: auto !important;
  accent-color: var(--rc-primary);
  cursor: pointer;
}
/* Auto-generated password hint shown after ticking */
.woocommerce-checkout #account_password_field { margin-top: 0.75rem; }
/* "Ship to a different address?" toggle */
.woocommerce-checkout .woocommerce-shipping-fields h3 {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.woocommerce-checkout .woocommerce-shipping-fields h3 label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}
.woocommerce-checkout .woocommerce-shipping-fields h3 input[type="checkbox"] {
  flex-shrink: 0;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  top: auto !important;
  accent-color: var(--rc-primary);
  cursor: pointer;
}

/* ── "X people viewing this" social proof counter ── */
.rc-viewer-count {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  color: var(--rc-muted);
  margin-bottom: 0.625rem;
}
.rc-viewer-count svg { flex-shrink: 0; }
.rc-viewer-count strong { color: var(--rc-text); font-weight: 600; display: inline-block; }
@keyframes rcVcPop { 0%,100%{ transform:scale(1); color:var(--rc-text); } 45%{ transform:scale(1.22); color:var(--rc-primary); } }
.rc-viewer-count__num--flash { animation: rcVcPop 380ms ease; }

/* ═══════════════════════════════════════════════════════════════════════════
   P1.5 — MY ACCOUNT PAGE
   ═══════════════════════════════════════════════════════════════════════════ */
/* rc-account-layout handles the 2-col grid — reset the WC wrapper to block */
.woocommerce-account .woocommerce { display: block; }

.woocommerce-account .woocommerce-MyAccount-navigation {
  float: none;
  width: 100%;
  background: var(--rc-white);
  border-radius: var(--rc-radius);
  border: 1px solid var(--rc-border);
  overflow: hidden;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li { border-bottom: 1px solid var(--rc-border); }
.woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child { border-bottom: none; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
  display: block;
  padding: 0.875rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--rc-text);
  text-decoration: none;
  transition: color 150ms, background 150ms;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover { color: var(--rc-primary); background: var(--rc-surface); }
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
  color: var(--rc-primary);
  background: rgba(var(--rc-primary-rgb), 0.06);
  font-weight: 700;
  border-left: 3px solid var(--rc-primary);
  padding-left: calc(1.25rem - 3px);
}

.woocommerce-account .woocommerce-MyAccount-content { float: none; width: 100%; min-width: 0; }
.woocommerce-account .woocommerce-MyAccount-content h2 { font-size: 1.25rem; font-weight: 700; margin-bottom: 1.25rem; }

/* Orders table */
.woocommerce-orders-table { width: 100%; border-collapse: collapse; background: var(--rc-white); border-radius: var(--rc-radius); border: 1px solid var(--rc-border); overflow: hidden; }
.woocommerce-orders-table th {
  padding: 0.875rem 1rem;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--rc-muted);
  background: var(--rc-surface);
  border-bottom: 1px solid var(--rc-border);
  text-align: left;
}
.woocommerce-orders-table td { padding: 0.875rem 1rem; border-bottom: 1px solid var(--rc-border); font-size: 0.9375rem; }
.woocommerce-orders-table mark.order-status {
  padding: 0.2rem 0.625rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--rc-surface);
  color: var(--rc-muted);
}
.woocommerce-orders-table mark.order-status.status-completed { background: #dcfce7; color: #166534; }
.woocommerce-orders-table mark.order-status.status-processing { background: #dbeafe; color: #1e40af; }
.woocommerce-orders-table mark.order-status.status-pending { background: #fef3c7; color: #92400e; }
.woocommerce-orders-table mark.order-status.status-cancelled { background: #fee2e2; color: #991b1b; }

/* ═══════════════════════════════════════════════════════════════════════════
   P1.6 — SOCIAL PROOF TOAST
   ═══════════════════════════════════════════════════════════════════════════ */
.rc-sp-toast__icon { flex-shrink: 0; color: var(--rc-primary); display: flex; align-items: flex-start; padding-top: 1px; }
.rc-sp-toast__body { flex: 1; font-size: 0.8125rem; line-height: 1.4; color: var(--sp-text, var(--rc-text)); display: flex; flex-direction: column; gap: 1px; }
.rc-sp-toast__body strong { font-weight: 700; }
.rc-sp-toast__msg { color: var(--sp-text, var(--rc-text)); opacity: 0.85; }
.rc-sp-toast__body small { color: var(--sp-text, var(--rc-muted)); opacity: 0.65; font-size: 0.6875rem; margin-top: 1px; }

/* ═══════════════════════════════════════════════════════════════════════════
   P1.7 — RECENTLY VIEWED (already added above in rc-rv-*)
   AJAX NAVIGATION — body during transition
   ═══════════════════════════════════════════════════════════════════════════ */
/* Prevent flash during content swap */
#rc-main { min-height: 60vh; }

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 2 — CONVERSION FEATURES CSS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── P2.1: Urgency row + sold count ─────────────────────────────────────── */
.rc-single__urgency-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.rc-urgency--sold {
  background: #ecfdf5;
  color: #065f46;
}

/* ── P2.2: Back in stock form ────────────────────────────────────────────── */
.rc-bis {
  border: 1.5px dashed var(--rc-border);
  border-radius: var(--rc-radius);
  padding: 1.25rem;
  background: var(--rc-surface);
}
.rc-bis__heading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--rc-text);
  margin-bottom: 0.875rem;
}
.rc-bis__heading svg { color: var(--rc-primary); flex-shrink: 0; }
.rc-bis__form {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.rc-bis__form .rc-input { flex: 1; min-width: 180px; }
.rc-bis__success {
  font-size: 0.9375rem;
  color: var(--rc-success);
  font-weight: 600;
}
.rc-bis__error { margin-top: 0.375rem; }

/* ── P2.3: Product info pills (Size guide · Returns · Care) ──────────────── */
.rc-product-info-pills {
  display: flex;
  gap: 8px;
  margin-top: 0.25rem;
}
.rc-product-info-pill {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 10px;
  border: 1.5px solid var(--rc-border);
  border-radius: 10px;
  background: transparent;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
  white-space: nowrap;
}
.rc-product-info-pill svg { flex-shrink: 0; }

/* Per-pill accent colors */
.rc-product-info-pill--size {
  color: #2563eb;
  border-color: #dbeafe;
  background: #eff6ff;
}
.rc-product-info-pill--size svg { color: #2563eb; }
.rc-product-info-pill--returns {
  color: #7c3aed;
  border-color: #ede9fe;
  background: #f5f3ff;
}
.rc-product-info-pill--returns svg { color: #7c3aed; }
.rc-product-info-pill--care {
  color: #059669;
  border-color: #d1fae5;
  background: #ecfdf5;
}
.rc-product-info-pill--care svg { color: #059669; }

/* Hover: deepen the tint slightly */
.rc-product-info-pill--size:hover   { background: #dbeafe; border-color: #93c5fd; }
.rc-product-info-pill--returns:hover{ background: #ede9fe; border-color: #c4b5fd; }
.rc-product-info-pill--care:hover   { background: #d1fae5; border-color: #6ee7b7; }

/* Active (drawer open): solid fill with white text */
.rc-product-info-pill--size.rc-product-info-pill--active    { background: #2563eb; border-color: #2563eb; color: #fff; }
.rc-product-info-pill--returns.rc-product-info-pill--active  { background: #7c3aed; border-color: #7c3aed; color: #fff; }
.rc-product-info-pill--care.rc-product-info-pill--active     { background: #059669; border-color: #059669; color: #fff; }
.rc-product-info-pill--size.rc-product-info-pill--active svg,
.rc-product-info-pill--returns.rc-product-info-pill--active svg,
.rc-product-info-pill--care.rc-product-info-pill--active svg { color: #fff; }

/* ── P2.3: Info drawer (right-side sheet) ────────────────────────────────── */
.rc-info-drawer {
  position: fixed;
  inset: 0;
  z-index: 1000;
}
.rc-info-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.rc-info-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(520px, 94vw);
  background: var(--rc-white);
  box-shadow: -4px 0 32px rgba(0, 0, 0, 0.14);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.rc-info-drawer__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  border-bottom: 1px solid var(--rc-border);
  min-height: 56px;
  flex-shrink: 0;
}
.rc-info-drawer__title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--rc-text);
  margin: 0;
  flex: 1;
}
.rc-info-drawer__tabs {
  display: flex;
  gap: 0;
  flex: 1;
  align-self: stretch;
  overflow-x: auto;
  scrollbar-width: none;
}
.rc-info-drawer__tabs::-webkit-scrollbar { display: none; }
.rc-info-drawer__tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0 16px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--rc-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: color 150ms, border-color 150ms;
  margin-bottom: -1px;
}
.rc-info-drawer__tab:hover { color: var(--rc-text); }
.rc-info-drawer__tab--active {
  color: var(--rc-primary);
  border-bottom-color: var(--rc-primary);
}
.rc-info-drawer__close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  background: none;
  border: 1px solid var(--rc-border);
  border-radius: 50%;
  color: var(--rc-muted);
  cursor: pointer;
  transition: color 150ms, background 150ms, border-color 150ms;
}
.rc-info-drawer__close:hover {
  background: color-mix(in srgb, var(--rc-text) 6%, transparent);
  color: var(--rc-text);
  border-color: var(--rc-text);
}
.rc-info-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 20px;
}
.rc-info-drawer__content {
  font-size: 0.875rem;
  line-height: 1.75;
  color: var(--rc-muted);
}
.rc-info-drawer__content p  { margin: 0 0 0.625rem; }
.rc-info-drawer__content ul,
.rc-info-drawer__content ol { padding-left: 1.25rem; margin: 0 0 0.625rem; }
.rc-info-drawer__content li { margin-bottom: 0.3rem; }
.rc-info-drawer__content h2,
.rc-info-drawer__content h3 {
  font-size: 0.9375rem; font-weight: 700; color: var(--rc-text);
  margin: 1.25rem 0 0.375rem;
}
.rc-info-drawer__content h2:first-child,
.rc-info-drawer__content h3:first-child { margin-top: 0; }
.rc-info-drawer__content strong { color: var(--rc-text); font-weight: 600; }
.rc-info-drawer__content table {
  width: 100%; border-collapse: collapse; font-size: 0.8125rem;
  margin-bottom: 1rem;
}
.rc-info-drawer__content th,
.rc-info-drawer__content td {
  padding: 8px 10px; border: 1px solid var(--rc-border); text-align: left;
}
.rc-info-drawer__content th {
  background: color-mix(in srgb, var(--rc-primary) 6%, transparent);
  font-weight: 700; color: var(--rc-text);
}

/* Slide-in from right */
.rc-info-drawer-enter  { transition: transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1); }
.rc-info-drawer-from   { transform: translateX(100%); }
.rc-info-drawer-to     { transform: translateX(0); }
.rc-info-drawer-leave  { transition: transform 250ms cubic-bezier(0.55, 0, 1, 0.45); }
.rc-info-drawer-leave-from { transform: translateX(0); }
.rc-info-drawer-leave-to   { transform: translateX(100%); }

/* Generic modal */
.rc-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.rc-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.rc-modal__box {
  position: relative;
  z-index: 1;
  background: var(--rc-white);
  border-radius: var(--rc-radius-lg);
  box-shadow: var(--rc-shadow-lg);
  width: 100%;
  max-width: 680px;
  max-height: 90dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.rc-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--rc-border);
  flex-shrink: 0;
}
.rc-modal__title { font-size: 1.125rem; font-weight: 700; margin: 0; }
.rc-modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--rc-surface);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rc-muted);
  transition: background 150ms;
  z-index: 1;
}
.rc-modal__close:hover { background: var(--rc-border); }
.rc-modal__body { padding: 1.5rem; overflow-y: auto; flex: 1; }

/* Modal transitions — wrapper controls backdrop fade; box has its own spring via rc-modal-box-* */
.rc-modal-enter        { transition: opacity 380ms ease; }
.rc-modal-enter-from   { opacity: 0; }
.rc-modal-enter-to     { opacity: 1; }
.rc-modal-leave        { transition: opacity 260ms ease; }
.rc-modal-leave-from   { opacity: 1; }
.rc-modal-leave-to     { opacity: 0; }

/* Box spring animation — blooms from slight below-center */
.rc-modal-box-enter    { transition: opacity 300ms ease, transform 440ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.rc-modal-box-from     { opacity: 0; transform: scale(0.86) translateY(32px); }
.rc-modal-box-to       { opacity: 1; transform: scale(1) translateY(0); }
.rc-modal-box-leave    { transition: opacity 220ms ease, transform 220ms ease; }
.rc-modal-box-leave-from { opacity: 1; transform: scale(1) translateY(0); }
.rc-modal-box-leave-to   { opacity: 0; transform: scale(0.93) translateY(14px); }

/* Size guide table */
.rc-size-guide__tip {
  font-size: 0.875rem;
  color: var(--rc-muted);
  margin-bottom: 1rem;
}
.rc-size-guide__table-wrap { overflow-x: auto; }
.rc-size-guide__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  white-space: nowrap;
}
.rc-size-guide__table th {
  padding: 0.625rem 0.875rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--rc-muted);
  background: var(--rc-surface);
  border-bottom: 2px solid var(--rc-border);
  text-align: left;
}
.rc-size-guide__table td {
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid var(--rc-border);
  color: var(--rc-text);
}
.rc-size-guide__table tr:last-child td { border-bottom: none; }
.rc-size-guide__table tr:hover td { background: var(--rc-surface); }
.rc-size-guide__table td:first-child { font-weight: 700; color: var(--rc-primary); }

/* CPT-authored size guide content — applies theme styling to any HTML the admin writes */
.rc-size-guide__content { font-size: 0.9375rem; line-height: 1.7; }
.rc-size-guide__content p { color: var(--rc-muted); margin: 0 0 1rem; }
.rc-size-guide__content h2,
.rc-size-guide__content h3 {
  font-size: 0.9375rem; font-weight: 700; margin: 1.25rem 0 0.5rem;
  color: var(--rc-text); letter-spacing: -0.01em;
}
.rc-size-guide__content h2:first-child,
.rc-size-guide__content h3:first-child { margin-top: 0; }
.rc-size-guide__content ul,
.rc-size-guide__content ol { padding-left: 1.25rem; margin: 0 0 1rem; color: var(--rc-muted); }
.rc-size-guide__content li { margin-bottom: 0.25rem; }
/* figure.wp-block-table is the horizontal-scroll container; table stays as display:table */
.rc-size-guide__content figure {
  display: block; width: 100%; overflow-x: auto; margin: 0 0 1rem;
}
.rc-size-guide__content table {
  width: 100%; min-width: 100%; border-collapse: collapse;
  font-size: 0.875rem; table-layout: auto;
}
.rc-size-guide__content table th {
  padding: 0.625rem 0.875rem;
  font-size: 0.75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--rc-muted); background: var(--rc-surface);
  border-bottom: 2px solid var(--rc-border); text-align: left;
}
.rc-size-guide__content table td {
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid var(--rc-border);
  color: var(--rc-text);
}
.rc-size-guide__content table tr:last-child td { border-bottom: none; }
.rc-size-guide__content table tr:hover td { background: var(--rc-surface); }
.rc-size-guide__content table td:first-child { font-weight: 700; color: var(--rc-primary); }

/* ── P2.4: Cookie bar ────────────────────────────────────────────────────── */
.rc-cookie-bar {
  position: fixed;
  bottom: calc(60px + env(safe-area-inset-bottom, 0px) + 0.75rem);
  left: 0.75rem;
  right: 0.75rem;
  z-index: 9000;
  background: var(--rc-white);
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius);
  box-shadow: var(--rc-shadow-lg);
  animation: rcSlideUp 400ms cubic-bezier(0.32, 0.72, 0, 1) both;
}
@media (min-width: 768px) {
  .rc-cookie-bar {
    bottom: 1.25rem;
    left: 1.25rem;
    right: auto;
    max-width: 520px;
  }
}
@media (min-width: 1024px) {
  .rc-cookie-bar {
    bottom: 1.5rem;
    left: 1.5rem;
  }
}
@keyframes rcSlideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rc-cookie-bar__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  flex-wrap: wrap;
}
.rc-cookie-bar__text {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  flex: 1;
  min-width: 200px;
}
.rc-cookie-bar__text svg { flex-shrink: 0; color: var(--rc-primary); margin-top: 2px; }
.rc-cookie-bar__text p {
  font-size: 0.8125rem;
  color: var(--rc-muted);
  line-height: 1.5;
  margin: 0;
}
.rc-cookie-bar__text a { color: var(--rc-primary); text-decoration: underline; }
.rc-cookie-bar__actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* ── P2.5: Exit intent popup ─────────────────────────────────────────────── */
.rc-exit-modal__box {
  max-width: 520px;
  overflow: visible;
}
.rc-exit-modal__content {
  display: flex;
  gap: 0;
  min-height: 320px;
}
.rc-exit-modal__discount {
  width: 120px;
  flex-shrink: 0;
  background: var(--rc-primary);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  padding: 1.5rem 1rem;
  border-radius: var(--rc-radius-lg) 0 0 var(--rc-radius-lg);
}
.rc-exit-modal__discount span {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  opacity: 0.85;
}
.rc-exit-modal__body {
  flex: 1;
  padding: 2rem 1.75rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.rc-exit-modal__title {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--rc-text);
  margin: 0;
}
.rc-exit-modal__desc { font-size: 0.9375rem; color: var(--rc-muted); margin: 0; }
.rc-exit-modal__form { display: flex; flex-direction: column; gap: 0.5rem; }
.rc-exit-modal__form .rc-btn { width: 100%; }
.rc-exit-modal__skip {
  background: none;
  border: none;
  font: inherit;
  font-size: 0.75rem;
  color: var(--rc-muted);
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  text-align: center;
}
.rc-exit-modal__success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 0;
  text-align: center;
  color: var(--rc-success);
}
.rc-exit-modal__success p { color: var(--rc-muted); font-size: 0.9375rem; }
.rc-exit-modal__coupon {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--rc-surface);
  border: 2px dashed var(--rc-border);
  border-radius: 8px;
  padding: 0.625rem 0.875rem;
}
.rc-exit-modal__coupon span { font-size: 1rem; font-weight: 800; letter-spacing: 0.1em; flex: 1; }
.rc-exit-modal__coupon button {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--rc-primary);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
}

/* Gallery nav arrows */
.rc-single__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  /* Above .rc-single__loupe (z-index 10) so the arrow stays visible/clickable
     even while the magnifier is active near the edge of the image. */
  z-index: 11;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--rc-white) 92%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--rc-border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--rc-text);
  transition: background 150ms, transform 150ms;
  box-shadow: var(--rc-shadow-sm);
}
.rc-single__nav--prev { left: 0.625rem; }
.rc-single__nav--next { right: 0.625rem; }
.rc-single__nav:hover { background: var(--rc-white); transform: translateY(-50%) scale(1.08); }

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 3 — SHOP EXPERIENCE CSS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── P3.1: Filter panel ──────────────────────────────────────────────────── */
.rc-filter-panel {
  background: var(--rc-white);
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius);
  overflow: hidden;
  margin-bottom: 1.25rem;
}
.rc-filter-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1.125rem;
  border-bottom: 1px solid var(--rc-border);
  background: var(--rc-surface);
}
.rc-filter-panel__title {
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0;
  color: var(--rc-text);
}
.rc-filter-clear {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--rc-primary);
  background: transparent;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

.rc-filter-group {
  padding: 1rem 1.125rem;
  border-bottom: 1px solid var(--rc-border);
}
.rc-filter-group:last-child { border-bottom: none; }
.rc-filter-group--mobile-only { display: none; }
@media (max-width: 1023px) { .rc-filter-group--mobile-only { display: block; } }

.rc-filter-group__title {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--rc-text);
  margin: 0 0 0.75rem;
}

.rc-filter-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.375rem; }
.rc-filter-list__item { }

.rc-filter-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--rc-text);
  user-select: none;
}
.rc-filter-check input { display: none; }
.rc-filter-check__box {
  width: 17px;
  height: 17px;
  border-radius: 4px;
  border: 1.5px solid var(--rc-border);
  background: var(--rc-white);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 150ms, background 150ms;
}
.rc-filter-check input:checked + .rc-filter-check__box {
  background: var(--rc-primary);
  border-color: var(--rc-primary);
}
.rc-filter-check input:checked + .rc-filter-check__box::after {
  content: '';
  display: block;
  width: 9px;
  height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
}
.rc-filter-check__label { flex: 1; transition: color 150ms; }
.rc-filter-check:hover .rc-filter-check__label { color: var(--rc-primary); }
.rc-filter-check__count { font-size: 0.75rem; color: var(--rc-muted); }

.rc-filter-select {
  width: 100%;
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  border: 1.5px solid var(--rc-border);
  border-radius: 8px;
  font: inherit;
  font-size: 0.875rem;
  background: var(--rc-white);
  color: var(--rc-text);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.625rem center;
  transition: border-color 200ms;
  outline: none;
}
.rc-filter-select:focus { border-color: var(--rc-primary); }
.rc-filter-select--desktop { display: none; }
@media (min-width: 1024px) { .rc-filter-select--desktop { display: block; } }

.rc-price-range__inputs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.rc-price-range__field {
  flex: 1;
  position: relative;
}
.rc-price-range__symbol {
  position: absolute;
  left: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.875rem;
  color: var(--rc-muted);
  pointer-events: none;
}
.rc-price-range__field .rc-input { padding-left: 1.5rem; }
.rc-price-range__sep { color: var(--rc-muted); font-size: 0.875rem; flex-shrink: 0; }

/* Sidebar widgets (plugin-based) */
.rc-sidebar-widgets { margin-top: 1rem; }
.rc-sidebar-widgets .widget {
  background: var(--rc-white);
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius);
  padding: 1rem 1.125rem;
  margin-bottom: 1rem;
}
.rc-sidebar-widgets .widget-title {
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  margin-bottom: 0.75rem !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
  color: var(--rc-text) !important;
}

/* Toolbar updates */
.rc-shop-toolbar__left  { display: flex; flex-direction: column; gap: 0.125rem; }
.rc-shop-toolbar__right { display: flex; align-items: center; gap: 0.75rem; }

/* View toggle */
/* flex-shrink:0 here matters, not just cosmetic: without it, a crowded
   toolbar (title + result count + filter FAB + sort select all competing
   for space) silently compresses these below their own 34px CSS width —
   measured at ~23px in practice, under the WCAG 2.5.8 24px minimum tap
   target even though the declared size looks fine on paper. */
.rc-view-toggle { display: flex; flex-shrink: 0; border: 1.5px solid var(--rc-border); border-radius: 8px; overflow: hidden; }
.rc-view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  color: var(--rc-muted);
  cursor: pointer;
  transition: background 150ms, color 150ms;
}
.rc-view-btn:hover  { background: var(--rc-surface); color: var(--rc-text); }
.rc-view-btn--active { background: var(--rc-primary); color: #fff; }

/* Products wrap */
.rc-products-wrap { position: relative; min-height: 200px; transition: opacity 200ms; }
.rc-products-wrap--loading { opacity: 0.45; pointer-events: none; }
.rc-products-skeleton {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 1024px) { .rc-products-skeleton { grid-template-columns: repeat(4, 1fr); } }
.rc-card-skeleton { }

/* List view — card-list.php template is fetched via AJAX when view='list'.
   The .rc-card-list CSS block (below) handles the full layout. */

/* Shop pagination */
.rc-shop-pagination { margin-top: 2.5rem; display: flex; justify-content: center; gap: 0.375rem; flex-wrap: wrap; }
.rc-shop-pagination .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 0.75rem;
  border-radius: 8px;
  border: 1.5px solid var(--rc-border);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--rc-text);
  text-decoration: none;
  transition: all 150ms;
}
.rc-shop-pagination .page-numbers.current,
.rc-shop-pagination .page-numbers:hover {
  background: var(--rc-primary);
  border-color: var(--rc-primary);
  color: #fff;
}
.rc-shop-pagination .page-numbers.dots {
  border: none;
  background: transparent;
  pointer-events: none;
}

/* ── P3.3: List card ─────────────────────────────────────────────────────── */
.rc-card-list {
  display: flex;
  height: 200px;
  gap: 0;
  background: var(--rc-white);
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius);
  overflow: hidden;
  transition: box-shadow 250ms var(--rc-ease), transform 250ms var(--rc-ease);
  width: 100%;
}
.rc-card-list:hover {
  box-shadow: var(--rc-shadow);
  transform: translateY(-2px);
}
/* Image column — holds the <a> link and the glass action bar */
.rc-card-list__img-col {
  flex-shrink: 0;
  width: 200px;
  position: relative;
  overflow: hidden;
  background: var(--rc-surface);
}
.rc-card-list__img-wrap {
  display: block;
  width: 100%;
  height: 100%;
}
.rc-card-list__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms var(--rc-ease);
}
.rc-card-list:hover .rc-card-list__img { transform: scale(1.04); }
/* Frosted-glass action bar pinned to the bottom of the image */
.rc-card-list__actions {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.625rem;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255, 255, 255, 0.32);
}
/* Compact buttons inside the glass bar */
.rc-card-list__actions .rc-btn--sm {
  padding: 0.35rem 0.7rem !important;
  font-size: 0.8rem !important;
}
/* Buy now: glass pill */
.rc-card-list__actions .rc-btn--outline {
  background: rgba(255, 255, 255, 0.22) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  color: #fff !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}
.rc-card-list__actions .rc-btn--outline:hover {
  background: rgba(255, 255, 255, 0.35) !important;
}
/* Quick-view: floating glass circle in the top-right corner of the image */
/* Same solid, token-driven badge as grid view's .rc-card__action-btn — a low-opacity
   "glass" badge here used to go near-invisible on light product photos. */
.rc-card-list__qv-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--rc-white) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--rc-text);
  border: none;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}
.rc-card-list__qv-btn:hover { background: var(--rc-white); color: var(--rc-primary); }
.rc-card-list__wishlist-btn {
  position: absolute;
  top: 8px;
  right: 44px;
  z-index: 2;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--rc-white) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--rc-text);
  border: none;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}
.rc-card-list__wishlist-btn:hover { background: var(--rc-white); }
.rc-card-list__wishlist-btn svg { transition: fill 200ms, stroke 200ms; }
.rc-card-list__wishlist-btn--active svg,
.rc-card-list__wishlist-btn:hover svg {
  fill: var(--rc-error, #ef4444);
  stroke: var(--rc-error, #ef4444);
}
/* OOS label in glass bar */
.rc-card-list__oos { font-size: 0.75rem; color: rgba(255, 255, 255, 0.92); font-style: italic; text-shadow: 0 1px 2px rgba(0,0,0,0.35); }
.rc-card-list__body {
  flex: 1;
  padding: 1rem 1.125rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
  overflow: hidden;
}
.rc-card-list__cats  { font-size: 0.75rem; color: var(--rc-primary); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin: 0; }
.rc-card-list__title { font-size: 1rem; font-weight: 700; margin: 0; }
.rc-card-list__title a { text-decoration: none; color: var(--rc-text); }
.rc-card-list__title a:hover { color: var(--rc-primary); }
.rc-card-list__rating { display: flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; }
.rc-card-list__desc { font-size: 0.875rem; color: var(--rc-muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rc-card-list__footer { margin-top: auto; padding-top: 0.25rem; }
.rc-card-list__price { font-size: 1.125rem; font-weight: 800; color: var(--rc-primary); }
.rc-card-list__price ins  { text-decoration: none; color: #dc2626; }
.rc-card-list__price del  { font-size: 0.875rem; color: var(--rc-muted); font-weight: 400; margin-right: 0.25rem; }
/* Responsive */
@media (max-width: 640px) {
  .rc-card-list { height: auto; min-height: 160px; }
  .rc-card-list__img-col { width: 140px; }
}
@media (max-width: 480px) {
  .rc-card-list__img-col { width: 120px; }
  .rc-card-list__body { padding: 0.75rem; }
  .rc-card-list__title { font-size: 0.9rem !important; }
}
@media (max-width: 360px) {
  .rc-card-list__img-col { width: 100px; }
  /* glass bar too narrow for two buttons — hide Buy now */
  .rc-card-list__actions .rc-btn--outline { display: none !important; }
  .rc-card-list__actions .rc-btn--sm { padding: 0.3rem 0.5rem !important; font-size: 0.75rem !important; }
}

/* ── P3.2: Hero shortcode ────────────────────────────────────────────────── */
.rc-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  color: var(--rc-text);
}
.rc-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
  transition: transform 8s ease;
}
.rc-hero:hover .rc-hero__bg { transform: scale(1.03); }

/* Natural image mode — <img> in flow, section auto-heights, no cropping on any screen */
.rc-hero--natural-img {
  min-height: 0 !important;   /* beats .rc-home-hero min-height: 75vh/50vh/60vh */
  display: block !important;  /* beats .rc-home-hero display: flex (which centres and creates empty space) */
  padding: 0 !important;      /* beats @media mobile .rc-hero { padding: 3rem 0 } */
}
.rc-hero--natural-img .rc-hero__bg-img {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  z-index: 0;
  border-radius: 0; /* reset .entry-content img 12px; controlled via block attribute */
}
.rc-hero--natural-img .rc-hero__inner {
  position: absolute;
  inset: 0;
}
.rc-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.15) 100%);
  z-index: 1;
}
.rc-hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-top: 3rem;
  padding-bottom: 3rem;
  width: 100%;
}
.rc-hero--overlay .rc-hero__inner,
.rc-hero--fullwidth .rc-hero__inner { color: #fff; }

.rc-hero__content { flex: 1 1 0; min-width: 0; max-width: 540px; display: flex; flex-direction: column; gap: 1rem; overflow-wrap: break-word; word-break: break-word; }
.rc-hero__badge {
  display: inline-flex;
  padding: 0.3rem 0.875rem;
  background: var(--rc-primary);
  color: var(--rc-btn-text);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 4px;
  align-self: flex-start;
}
.rc-hero__title {
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.1;
  margin: 0;
}
.rc-hero__desc { font-size: 1rem; opacity: 0.8; line-height: 1.6; margin: 0; }
.rc-hero__price { font-size: 1.5rem; font-weight: 800; }
.rc-hero__price ins  { text-decoration: none; }
.rc-hero__price del  { font-size: 1rem; opacity: 0.72; margin-right: 0.375rem; } /* was 0.6 — measured 4.06:1, under the 4.5:1 min */
.rc-hero__swatches { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.rc-hero__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.rc-hero__cta { }

.rc-hero__image {
  flex: 0 0 42%;
  max-width: 460px;
  overflow: hidden;
}
.rc-hero__img {
  width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: cover;
  object-position: top center;
  border-radius: var(--rc-radius-lg);
  box-shadow: var(--rc-shadow-lg);
  display: block;
}
@media (max-width: 767px) {
  .rc-hero__inner { flex-direction: column; text-align: center; }
  .rc-hero__content { align-items: center; }
  .rc-hero__image { width: 100%; max-width: 320px; order: -1; }
}

/* =============================================================================
   PRODUCT SHOWCASE BLOCK  (rc/product-showcase) — single-product feature
   ============================================================================= */
.rc-showcase {
  position: relative;
  background: var(--rc-surface);
  border-radius: var(--rc-radius-lg);
  overflow: hidden;
  color: var(--rc-showcase-text, var(--rc-text));
}

/* ── Split: image beside content ─────────────────────────────────────────── */
.rc-showcase--split .rc-showcase__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(2rem, 5vw, 4rem);
  padding: clamp(2rem, 5vw, 3.5rem);
  /* In "full" (unboxed) container mode there's nothing else capping this
     row's width, so on a wide screen the flex children just pack toward
     whichever edge is the flex "start" — normally the left, but the right
     with img-right's row-reverse below. Capping + centering here keeps the
     row centered either way, matching how boxed mode already looks (boxed
     gets its max-width from the block wrapper itself). */
  max-width: var(--rc-container, 1280px);
  margin: 0 auto;
}
.rc-showcase--img-right .rc-showcase__inner { flex-direction: row-reverse; }

/* New coverflow band sits above the split's image+content row, spanning the
   same width as the block itself (boxed or full, whichever the block is
   already set to — no extra constraint added here). */
.rc-showcase__coverflow-band {
  padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1.5rem, 4vw, 2.5rem) 0.25rem;
}

/* ── Stacked — "Split Ribbon": tinted image band, soft wave seam, base-colour
   content band. Two physically separate bands (not one padded column) is
   what gives it the poster-like rhythm instead of a plain stacked list. ── */
.rc-showcase--stacked { background: none; border-radius: 0; }
.rc-showcase__stack-top {
  position: relative;
  background: color-mix(in srgb, var(--rc-primary) 8%, var(--rc-surface));
  padding: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 5vw, 3rem) clamp(4rem, 9vw, 6rem);
  display: flex;
  justify-content: center;
}
.rc-showcase__wave {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  width: 100%;
  height: 64px;
  color: var(--rc-page-bg, var(--rc-surface));
  display: block;
}
.rc-showcase__stack-bottom {
  background: var(--rc-page-bg, var(--rc-surface));
  padding: 0 1.5rem clamp(2.5rem, 6vw, 4rem);
  display: flex;
  justify-content: center;
}
.rc-showcase--stacked .rc-showcase__content {
  text-align: center;
  align-items: center;
  padding-top: clamp(1rem, 3vw, 1.5rem);
  max-width: 480px;
}
.rc-showcase--stacked .rc-showcase__rating,
.rc-showcase--stacked .rc-showcase__actions,
.rc-showcase--stacked .rc-showcase__swatches { justify-content: center; }
/* The static fallback image stays a narrow centred column, but the coverflow
   (when present) gets the full band width so its side cascade has room —
   both driven off the same shared --rc-showcase-img-scale multiplier (see
   the "Image size" editor control) so they always scale together at the
   original 380:720 (1:1.895) ratio instead of being two separately
   hardcoded numbers. */
.rc-showcase--stacked .rc-showcase__media { max-width: calc(380px * var(--rc-showcase-img-scale, 1)); width: 100%; flex: none; }
.rc-showcase--stacked .rc-showcase__img { max-height: 50vh; }
.rc-showcase--stacked .rc-showcase-coverflow { max-width: calc(720px * var(--rc-showcase-img-scale, 1)); width: 100%; }

/* ── Fullwidth: background photo + floating content card, or (with a gallery)
   a two-column layout — content left, coverflow gallery right. ── */
.rc-showcase--fullwidth .rc-showcase__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  min-height: inherit;
  max-width: var(--rc-container, 1280px);
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 4rem) clamp(1.25rem, 4vw, 2rem);
}
.rc-showcase__inner--split { justify-content: space-between; gap: clamp(2rem, 5vw, 4rem); flex-wrap: wrap; }
/* The row itself also needs more room to grow into, or scaling the card
   and image column's flex-basis together just makes them wrap onto
   separate lines sooner (their combined basis now exceeds the fixed
   1280px row before either one visually looks bigger side-by-side).
   Scoped to --split specifically — the no-gallery floating-card case
   reuses the same .rc-showcase__inner and doesn't need the extra width. */
.rc-showcase--fullwidth .rc-showcase__inner--split { max-width: calc(var(--rc-container, 1280px) * var(--rc-showcase-img-scale, 1)); }
/* content--card's flex-basis now scales alongside the image column too —
   both sides grow together at the same rate, keeping their ~380:420
   proportion at any "Image size" setting instead of the card sitting
   fixed while the image column balloons next to it. min-width stays as a
   floor for low scale values; flex-wrap above is the fallback once both
   hit their floor/ceiling and genuinely can't coexist side-by-side at very
   high scales — they drop to stacked rows instead of crushing each other. */
.rc-showcase__inner--split .rc-showcase__content--card {
  flex: 1 1 calc(380px * var(--rc-showcase-img-scale, 1));
  min-width: 300px;
  /* The shared base .rc-showcase__content rule (used by every layout's
     content column) hardcodes max-width: 560px — that silently capped the
     card at 560px regardless of the scaled flex-basis above, since a
     max-width ceiling wins over flex-grow/basis by definition. Needs its
     own scaled ceiling here too, or the flex-basis change alone does
     nothing once the card reaches 560px. */
  max-width: calc(560px * var(--rc-showcase-img-scale, 1));
}
/* flex-basis (not just max-width) now scales too — the max-width alone was
   close to meaningless in practice, since the flex row's basis-driven
   distribution (not the ceiling) was the actual bottleneck: at 2x this
   used to render at ~596px actual width despite an 1120px ceiling. */
.rc-showcase__coverflow-col { flex: 1 1 calc(420px * var(--rc-showcase-img-scale, 1)); min-width: 0; max-width: calc(560px * var(--rc-showcase-img-scale, 1)); }
.rc-showcase__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
.rc-showcase__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.28) 60%, rgba(0,0,0,0.1) 100%);
}
.rc-showcase__float-wrap { max-width: 460px; width: 100%; }
.rc-showcase__float-media {
  position: relative;
  width: 100%;
  max-width: calc(220px * var(--rc-showcase-img-scale, 1));
  margin-bottom: 1.25rem;
  border-radius: var(--rc-radius);
  overflow: hidden;
  box-shadow: var(--rc-shadow-lg);
}
.rc-showcase__float-media img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.rc-showcase__content--card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--rc-radius-lg);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

/* ── Shared single-image media (gallery disabled or only 1 photo) ───────── */
.rc-showcase__media {
  position: relative;
  flex: 0 0 44%;
  max-width: calc(480px * var(--rc-showcase-img-scale, 1));
}
.rc-showcase__img {
  width: 100%;
  height: auto;
  max-height: 72vh;
  object-fit: cover;
  border-radius: var(--rc-radius-lg);
  box-shadow: var(--rc-shadow-lg);
  display: block;
}

/* ── Coverflow — big auto-rotating hero gallery, neighbours cascading to both
   sides. Item size is viewport-scaled (not container-relative) so it stays
   prominent everywhere; item *position* is a % of the stage so the spread
   scales with however much width is actually available — done via `cqw`
   (container-query width units) inside `transform`, NOT `left`. `left` is a
   layout property: animating it forces a synchronous reflow on every frame
   of every transition, on every auto-rotate, for as long as the gallery is
   on screen — a real, measured Cumulative Layout Shift cost. `cqw` resolves
   the same "% of stage width" value but stays inside `transform`, which is
   compositor-only and CLS-free. The stage becomes the query container so
   `cqw` has something to resolve against; the item's own base `top/left:50%`
   never changes after initial layout, so it never itself shifts anything. ── */
.rc-showcase-coverflow { position: relative; width: 100%; }
.rc-showcase-coverflow__stage {
  position: relative;
  width: 100%;
  height: calc(clamp(190px, 32vw, calc(380px * var(--rc-showcase-img-scale, 1))) * 4 / 3);
  overflow: hidden;
  perspective: 1400px;
  container-type: inline-size;
}
.rc-showcase-coverflow__item {
  position: absolute;
  top: 50%;
  left: 50%;
  /* The actual visible image box — shared across all three layouts (split,
     stacked, fullwidth) wherever the coverflow gallery is used. Scales with
     --rc-showcase-img-scale like everything else; a container's own
     max-width (e.g. .rc-showcase-coverflow, .rc-showcase__coverflow-col)
     only governs how much room the cascading side neighbours have — it
     doesn't by itself change this box's own size, which is why this line
     needs the same variable too, not just the container. */
  width: clamp(190px, 32vw, calc(380px * var(--rc-showcase-img-scale, 1)));
  aspect-ratio: 3 / 4;
  border-radius: var(--rc-radius-lg);
  overflow: hidden;
  box-shadow: var(--rc-shadow-lg);
  transition: transform 820ms var(--rc-ease), opacity 820ms var(--rc-ease);
  will-change: transform, opacity;
}
.rc-showcase-coverflow__item img,
.entry-content .rc-showcase-coverflow__item img { width: 100% !important; height: 100% !important; max-width: 100% !important; object-fit: cover; display: block; border-radius: 0; }
.rc-showcase-coverflow__item--active img { animation: rc-showcase-breathe 6.5s ease-in-out infinite; }
@keyframes rc-showcase-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.018); }
}
.rc-showcase-coverflow__item .rc-showcase__badge { top: 0.625rem; left: 0.625rem; }
/* Fullwidth's 2-column case has an inherently narrow stage shared in a flex
   row with the content card (~560px by default, not the ~900px+ a stage
   gets in stacked/split). Sizing the item off the viewport (32vw, like the
   other layouts) let it outgrow its own stage at higher "Image size"
   scales — measured 107% of stage width at 2x, i.e. wider than its own
   container, which is exactly what hid the cascading side neighbours
   entirely. Sizing it as a % of the stage's own rendered width instead
   (container query units — the stage already has container-type: inline-
   size, set above) keeps the same ~68% proportion the default already
   has (380px item / 560px stage) at any scale, so neighbours always keep
   their peek-through room, however big the column itself grows. */
.rc-showcase__coverflow-col .rc-showcase-coverflow__item {
  width: clamp(190px, 68cqw, calc(380px * var(--rc-showcase-img-scale, 1)));
}
.rc-showcase__coverflow-col .rc-showcase-coverflow__stage {
  height: calc(clamp(190px, 68cqw, calc(380px * var(--rc-showcase-img-scale, 1))) * 4 / 3);
}
.rc-showcase-coverflow__dots {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}
/* The visible mark stays a small 7px dot (::before) — but the clickable
   button box itself is a full 24px, the WCAG 2.5.8 touch-target minimum.
   Measured before this fix: a 7×7px hit area, well under the minimum. */
.rc-showcase-coverflow__dot {
  position: relative;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
.rc-showcase-coverflow__dot::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 7px; height: 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--rc-showcase-text, var(--rc-text)) 30%, transparent);
  transform: translate(-50%, -50%);
  transition: width 420ms cubic-bezier(0.34, 1.56, 0.64, 1),
              background 250ms ease;
}
/* A true pill — straight parallel long edges, fully curved short ends
   (border-radius: 999px on a wide/short box always resolves to that,
   regardless of exact width) — not an organic/uneven blob. No separate
   ring/flash element: the "water" read comes from the dot itself
   squashing and stretching as it lands on activation (below), the way
   a droplet wobbles when it hits a surface instead of just popping. */
.rc-showcase-coverflow__dot--active::before {
  width: 20px;
  background: var(--rc-showcase-text, var(--rc-primary));
  animation: rc-dot-jump 480ms cubic-bezier(0.22, 0.9, 0.32, 1);
}
.rc-showcase-coverflow__dot:not(.rc-showcase-coverflow__dot--active):hover::before {
  transform: translate(-50%, -50%) scale(1.3);
  background: color-mix(in srgb, var(--rc-showcase-text, var(--rc-text)) 55%, transparent);
}
@keyframes rc-dot-jump {
  0%   { transform: translate(-50%, -50%) scaleX(0.4)  scaleY(1.6); }
  40%  { transform: translate(-50%, -50%) scaleX(1.15) scaleY(0.7); }
  65%  { transform: translate(-50%, -50%) scaleX(0.92) scaleY(1.12); }
  100% { transform: translate(-50%, -50%) scaleX(1)    scaleY(1); }
}

.rc-showcase__badge {
  position: absolute;
  top: 0.875rem; left: 0.875rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--rc-text);
  z-index: 5;
}
.rc-showcase__badge--sale { background: #dc2626; }
.rc-showcase__badge--oos  { background: #6b7280; }
.rc-showcase__badge--low  { background: #ea580c; }
.rc-showcase__badge--inline {
  position: static;
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 0.75rem;
}

.rc-showcase__content {
  flex: 1 1 0;
  min-width: 0;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.rc-showcase__eyebrow {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rc-primary);
}
.rc-showcase__title {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  line-height: 1.15;
  margin: 0;
  /* Theme-wide heading rules (h1-h6 { color }) always win over inheritance —
     a rule directly targeting an element beats an inherited value regardless
     of specificity, so this has to be pinned explicitly, not inherited. */
  color: var(--rc-showcase-text, var(--rc-text)) !important;
}
.rc-showcase__rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
}
.rc-showcase__stars { color: #f59e0b; letter-spacing: 1px; }
.rc-showcase__rating-count { color: color-mix(in srgb, var(--rc-showcase-text, var(--rc-muted)) 70%, transparent); font-size: 0.8125rem; }
.rc-showcase__desc {
  font-size: 1.0625rem;
  line-height: 1.65;
  opacity: 0.85;
  margin: 0;
  /* .entry-content p also sets color directly — same override problem as
     the title, same fix. */
  color: var(--rc-showcase-text, var(--rc-text)) !important;
  overflow-wrap: break-word;
  word-break: break-word;
}
.rc-showcase__price {
  font-size: 1.75rem;
  font-weight: 800;
}
.rc-showcase__price del { font-size: 1.125rem; opacity: 0.68; margin-right: 0.5rem; font-weight: 400; } /* was 0.55 — measured 4.2:1, under the 4.5:1 min */
.rc-showcase__swatches { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.rc-showcase__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.375rem;
}
.rc-showcase__qty {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid color-mix(in srgb, var(--rc-showcase-text, var(--rc-border)) 25%, transparent);
  border-radius: var(--rc-radius);
  padding: 0.25rem 0.5rem;
}
/* .rc-qty-btn/.rc-qty-val are shared site-wide components with their own
   fixed dark colour — fine on a light background, unreadable on the dark
   fullwidth glass card, so pin them to the showcase text colour here too. */
.rc-showcase__qty .rc-qty-btn {
  color: var(--rc-showcase-text, var(--rc-text));
  border-color: color-mix(in srgb, var(--rc-showcase-text, var(--rc-border)) 35%, transparent);
}
.rc-showcase__qty .rc-qty-val { color: var(--rc-showcase-text, var(--rc-text)); }
.rc-showcase__cta, .rc-showcase__buy-now { padding: 0.9rem 1.75rem; font-size: 1rem; }

.rc-showcase__wishlist {
  width: 46px; height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--rc-showcase-text, var(--rc-border)) 25%, transparent);
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background 150ms, color 150ms, transform 100ms;
  flex-shrink: 0;
}
.rc-showcase__wishlist:hover { transform: scale(1.05); }
.rc-showcase__wishlist--active { background: #ef4444; border-color: #ef4444; color: #fff; }

.rc-showcase__view-link {
  font-size: 0.875rem;
  font-weight: 600;
  /* .entry-content a also sets color directly, same override problem. */
  color: var(--rc-showcase-text, var(--rc-primary)) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  width: fit-content;
}
.rc-showcase--stacked .rc-showcase__view-link { width: auto; }
.rc-showcase__view-link:hover { opacity: 0.75; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .rc-showcase-coverflow__stage { perspective: 1000px; }
  .rc-showcase__coverflow-col { max-width: 100%; }
}
@media (max-width: 767px) {
  .rc-showcase--split .rc-showcase__inner,
  .rc-showcase--img-right .rc-showcase__inner { flex-direction: column; }
  .rc-showcase__media { max-width: 100%; flex: none; }
  .rc-showcase__content { max-width: 100%; }
  .rc-showcase__float-wrap { max-width: 100%; }
  .rc-showcase__float-media { max-width: 160px; margin-left: auto; margin-right: auto; }
  .rc-showcase--fullwidth .rc-showcase__inner { flex-direction: column; text-align: center; }
  .rc-showcase--fullwidth .rc-showcase__rating,
  .rc-showcase--fullwidth .rc-showcase__actions { justify-content: center; }
  .rc-showcase__inner--split { align-items: center; }
  .rc-showcase__stack-top { padding-bottom: 3.5rem; }
  .rc-showcase__wave { height: 40px; }
  .rc-showcase__coverflow-band { padding-left: 1rem; padding-right: 1rem; }
  /* Less horizontal room on narrow screens — shrink the active image a bit
     so the cascading neighbours have breathing room instead of crowding
     right up against its edge. */
  .rc-showcase-coverflow__stage { height: calc(clamp(150px, 34vw, 220px) * 4 / 3); }
  .rc-showcase-coverflow__item { width: clamp(150px, 34vw, 220px); }
}

/* ── P3.4: Variation swatches on cards ───────────────────────────────────── */
.rc-card__swatches {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  padding: 0.375rem 0.875rem 0;
}
/* Legacy card swatch rules scoped away — full swatch system is section 29 below */
.rc-card__swatches-legacy .rc-swatch {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid transparent;
  text-decoration: none;
  transition: border-color 150ms, transform 100ms;
  font-size: 0.5625rem;
  font-weight: 700;
}

/* ── P3.5: Image zoom — hover loupe magnifier ─────────────────────────────── */
.rc-single__img-main,
.rc-single__stacked-img { cursor: crosshair; }
@media (max-width: 1023px) {
  .rc-single__img-main,
  .rc-single__stacked-img { cursor: default; }
}

.rc-single__loupe {
  position: absolute;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 2px solid var(--rc-white);
  box-shadow: 0 4px 24px rgba(0,0,0,.3), 0 0 0 1px rgba(0,0,0,.08);
  pointer-events: none;
  background-repeat: no-repeat;
  transform: translate(-50%, -50%);
  z-index: 10;
  will-change: left, top, background-position;
}
@media (max-width: 1023px) {
  .rc-single__loupe { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .rc-single__loupe { display: none !important; }
}

/* ── P3.6: Native compare button ─────────────────────────────────────────── */
/* Sizing/background/color all come from the shared .rc-card__action-btn base
   (same class is on the element) — this used to duplicate them with a hardcoded
   rgba(255,255,255,0.9) background, which doesn't adapt to color skins. In
   Midnight mode --rc-text (the icon color) is near-white, so a near-white icon
   sat on a hardcoded near-white badge and was almost invisible, while the
   wishlist button — which never duplicated these properties — stayed correctly
   dark-badge/light-icon via .rc-card__action-btn's token-based background. */
.rc-card__compare-btn[aria-pressed="true"] { color: var(--rc-primary); background: var(--rc-white); }

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 4 — WCAG 2.1 AA + THEMEFOREST POLISH
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Focus styles (WCAG 2.4.7) ───────────────────────────────────────────── */
:focus-visible {
  outline: 2.5px solid var(--rc-primary) !important;
  outline-offset: 3px !important;
  border-radius: 3px !important;
}
:focus:not(:focus-visible) { outline: none !important; }

/* Ensure sufficient contrast on interactive elements */
.rc-btn--primary:focus-visible,
.rc-btn--secondary:focus-visible { outline-color: var(--rc-primary); }

/* ── Reduced motion (WCAG 2.3.3) ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .rc-header { transition: none; }
  .rc-drawer { transition: none; }
  .rc-sheet  { transition: none; }
  .rc-sticky-atc { transition: none; }
}

/* ── High contrast mode support ──────────────────────────────────────────── */
@media (forced-colors: active) {
  .rc-btn--primary  { forced-color-adjust: none; }
  .rc-card__badge   { forced-color-adjust: none; }
  .rc-cart-count    { forced-color-adjust: none; }
}

/* ── RTL Support ──────────────────────────────────────────────────────────── */
[dir="rtl"] .rc-drawer--right { right: auto; left: 0; transform: translateX(-102%); }
[dir="rtl"] .rc-drawer--right.rc-drawer--open { transform: translateX(0); }
[dir="rtl"] .rc-drawer--left  { left: auto; right: 0; transform: translateX(102%); }
[dir="rtl"] .rc-drawer--left.rc-drawer--open  { transform: translateX(0); }
[dir="rtl"] .rc-header__actions { margin-left: 0; margin-right: auto; }
[dir="rtl"] .rc-nav--desktop { flex-direction: row-reverse; }
[dir="rtl"] .rc-cookie-bar { left: auto; right: 0.75rem; }
@media (min-width: 768px) {
  [dir="rtl"] .rc-cookie-bar { left: auto; right: 1.25rem; }
}
[dir="rtl"] .rc-exit-modal__discount {
  border-radius: 0 var(--rc-radius-lg) var(--rc-radius-lg) 0;
}

/* ── Print styles ─────────────────────────────────────────────────────────── */
@media print {
  .rc-header, .rc-bottom-nav, .rc-drawer, .rc-sheet,
  .rc-cookie-bar, .rc-modal, .rc-sticky-atc,
  .rc-sp-toast, .rc-progress { display: none !important; }
  body { padding-bottom: 0 !important; }
  .rc-main { min-height: 0; }
  a[href]::after { content: " (" attr(href) ")"; }
}

/* ── WordPress admin bar compatibility ───────────────────────────────────── */
.admin-bar .rc-sticky-atc  { bottom: 0; }
@media screen and (max-width: 782px) {
}

/* ── Screen reader utilities ──────────────────────────────────────────────── */
.screen-reader-text,
.sr-only {
  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;
}

/* ── Smooth page transition overlay ──────────────────────────────────────── */
#rc-main {
  transition: opacity 160ms var(--rc-ease);
}

/* ── WC compatibility: ensure our grid overrides float cleanly ───────────── */
.woocommerce-page .woocommerce::after,
.woocommerce-page .woocommerce::before { display: none !important; }
.woocommerce ul.products::after,
.woocommerce ul.products::before { display: none !important; }

/* ── Enhancements: scrollbar styling (Webkit) ────────────────────────────── */
.rc-drawer__body::-webkit-scrollbar,
.rc-sheet__body::-webkit-scrollbar,
.rc-modal__body::-webkit-scrollbar { width: 4px; }
.rc-drawer__body::-webkit-scrollbar-track,
.rc-sheet__body::-webkit-scrollbar-track,
.rc-modal__body::-webkit-scrollbar-track  { background: transparent; }
.rc-drawer__body::-webkit-scrollbar-thumb,
.rc-sheet__body::-webkit-scrollbar-thumb,
.rc-modal__body::-webkit-scrollbar-thumb  { background: var(--rc-border); border-radius: 2px; }

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE R1 — UNIFIED RESPONSIVE CART DRAWER
   Desktop: right-side panel. Mobile: bottom sheet. Single component.
   ═══════════════════════════════════════════════════════════════════════════ */

.rc-cart-drawer {
  position: fixed;
  z-index: 999;
  background: var(--rc-white);
  display: flex;
  flex-direction: column;
  box-shadow: var(--rc-shadow-lg);
  will-change: transform;
  overscroll-behavior: contain;
}

/* ── Desktop: right-side panel ───────────────────────────────────────────── */
@media (min-width: 768px) {
  .rc-cart-drawer {
    top: 0;
    right: 0;
    height: 100%;
    height: 100dvh;
    width: min(420px, 100vw);
    transform: translateX(102%);
    transition: transform 340ms var(--rc-ease-out);
    border-radius: 0;
  }
  .rc-cart-drawer--open { transform: translateX(0); }
}

/* ── Mobile: bottom sheet (Shopify-style) ────────────────────────────────── */
@media (max-width: 767px) {
  .rc-cart-drawer {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 88dvh;
    max-height: 88dvh;
    transform: translateY(102%);
    transition: transform 380ms cubic-bezier(0.32, 0.72, 0, 1);
    border-radius: 1.25rem 1.25rem 0 0;
  }
  .rc-cart-drawer--open { transform: translateY(0); }
  /* Grab handle */
  .rc-cart-drawer::before {
    content: '';
    position: absolute;
    top: 0.625rem;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--rc-border);
    z-index: 2;
  }
}

.rc-cart-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.125rem 1.375rem;
  border-bottom: 1px solid var(--rc-border);
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .rc-cart-drawer__header { padding-top: 1.5rem; }
}
.rc-cart-drawer__title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--rc-text);
  margin: 0;
}
.rc-cart-drawer__count {
  font-weight: 400;
  color: var(--rc-muted);
  font-size: 0.9375rem;
  margin-left: 0.25rem;
}
.rc-cart-drawer__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--rc-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 150ms, color 150ms;
}
.rc-cart-drawer__close:hover { background: var(--rc-surface); color: var(--rc-text); }

.rc-cart-drawer__body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1rem 1.375rem;
  position: relative;
  transition: opacity 160ms ease;
}
.rc-cart-drawer__body--loading { opacity: 0.55; pointer-events: none; }

.rc-cart-drawer__footer {
  flex-shrink: 0;
  border-top: 1px solid var(--rc-border);
  background: var(--rc-white);
}
.rc-cart-drawer__footer:empty { display: none; }
.rc-cart-drawer__footer > * { padding: 1rem 1.375rem; }
.rc-cart-drawer__footer .rc-cart-subtotal { padding-bottom: 0.5rem; }

/* Full-drawer veil */
.rc-cart-drawer__veil {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

/* ── Cart item ───────────────────────────────────────────────────────────── */
.rc-cart-item {
  position: relative;
  display: flex;
  gap: 0.875rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--rc-border);
}
.rc-cart-item:first-child { padding-top: 0.25rem; }
.rc-cart-item__imglink { flex-shrink: 0; display: block; }
.rc-cart-item__img {
  width: 72px;
  height: 96px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--rc-border);
  background: var(--rc-surface);
  display: block;
}
.rc-cart-item__meta-dl { margin: 0.1875rem 0 0; }
.rc-cart-item__meta-dl dl { margin: 0; }
.rc-cart-item__meta-dl dt,
.rc-cart-item__meta-dl dd {
  display: inline;
  font-size: 0.7rem;
  color: var(--rc-muted);
  margin: 0;
  padding: 0;
}
/* WooCommerce's cart/cart-item-data.php template already puts a colon in
   the <dt> text itself and wraps each <dd>'s value in a <p> (via
   wpautop()) — that <p> is block-level by default, which forced a line
   break after every value despite dt/dd above being display:inline. */
.rc-cart-item__meta-dl dd p { display: inline; margin: 0; }
.rc-cart-item__meta-dl dt:not(:first-child)::before { content: ' · '; }
.rc-cart-item__meta-dl dt { margin-right: 0.25em; }
.rc-cart-item__qty {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.375rem;
}
.rc-cart-item__qty .rc-qty-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--rc-border);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--rc-text);
  transition: border-color 150ms, background 150ms;
}
.rc-cart-item__qty .rc-qty-btn:hover:not(:disabled) {
  border-color: var(--rc-primary);
  background: rgba(var(--rc-primary-rgb), 0.06);
}
.rc-cart-item__qty .rc-qty-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.rc-cart-item__qty .rc-qty-val {
  min-width: 22px;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
}
.rc-cart-item__remove {
  align-self: flex-start;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--rc-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 150ms, background 150ms;
  flex-shrink: 0;
}
.rc-cart-item__remove:hover:not(:disabled) { color: #ef4444; background: #fef2f2; }
.rc-cart-item__remove:disabled { opacity: 0.4; cursor: not-allowed; }

@keyframes rc-cart-remove {
  0%   { opacity: 1; border-color: var(--rc-border); background: transparent; }
  20%  { opacity: 1; border-color: rgba(239,68,68,0.55); background: rgba(239,68,68,0.07); }
  40%  { opacity: 1; border-color: rgba(239,68,68,0.2);  background: rgba(239,68,68,0.02); }
  60%  { opacity: 1; border-color: rgba(239,68,68,0.55); background: rgba(239,68,68,0.07); }
  80%  { opacity: 0.5; border-color: rgba(239,68,68,0.3); background: rgba(239,68,68,0.04); }
  100% { opacity: 0; border-color: rgba(239,68,68,0.1); background: rgba(239,68,68,0.02); }
}
.rc-cart-item.rc-removing {
  animation: rc-cart-remove 420ms ease forwards;
  pointer-events: none;
}

/* Per-item loading veil */
.rc-cart-item__veil {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

/* ── Applied coupons ─────────────────────────────────────────────────────── */
.rc-cart-applied-coupon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding: 0.375rem 0.625rem;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #065f46;
}
.rc-cart-applied-coupon button {
  background: none;
  border: none;
  color: #065f46;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.25rem;
}

/* ── Spinner ─────────────────────────────────────────────────────────────── */
.rc-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2.5px solid var(--rc-border);
  border-top-color: var(--rc-primary);
  border-radius: 50%;
  animation: rcSpin 0.7s linear infinite;
}
.rc-spinner--lg { width: 32px; height: 32px; border-width: 3px; }
@keyframes rcSpin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .rc-cart-drawer { transition: none !important; }
  .rc-spinner { animation-duration: 1.4s; }
}

/* ── Card image button (replaces <a> so click opens quick view) ───────────── */
.rc-card__img-btn {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
  padding: 0;
  background: none;
  cursor: pointer;
  position: relative;
}
.rc-card__img-btn:focus-visible {
  outline: 2.5px solid var(--rc-primary);
  outline-offset: 2px;
}
/* When rc-card__img-btn is an <a> (suggestion cards) remove link decoration */
a.rc-card__img-btn { text-decoration: none; color: inherit; }

/* ── Suggestion card ATC button (visible always, not hover-only) ─────────── */
.rc-card__suggestion-atc {
  display: block;
  width: 100%;
  text-align: center;
  text-decoration: none;
  margin-top: auto;
  padding-top: 0.5rem;
}
.rc-card__suggestion-atc:hover { text-decoration: none; }

/* ── Override WC Blocks link-colour cascade inside the suggestion carousel.
   WC Blocks scopes `a { color }` to .wp-block-woocommerce-cart with higher
   specificity than our base rules, making title links and the primary button
   inherit WC's link colour instead of our theme tokens. Adding the cart-block
   ancestor here matches WC's own specificity and wins cleanly. ─────────────── */
.wp-block-woocommerce-cart .rc-empty-cart-suggestions .rc-card__title-link {
  color: var(--rc-text);
  text-decoration: none;
}
.wp-block-woocommerce-cart .rc-empty-cart-suggestions .rc-card__title-link:hover {
  color: var(--rc-primary);
}
.wp-block-woocommerce-cart .rc-empty-cart-suggestions .rc-card__price-wrap,
.wp-block-woocommerce-cart .rc-empty-cart-suggestions .rc-card__price-wrap a {
  color: var(--rc-text);
  text-decoration: none;
}
/* Primary button in WC Blocks context: force white text regardless of WC link colour */
.wp-block-woocommerce-cart .rc-empty-cart-suggestions .rc-btn--primary {
  color: #fff;
  text-decoration: none;
}
.wp-block-woocommerce-cart .rc-empty-cart-suggestions .rc-btn--primary:hover {
  color: #fff;
  background: var(--rc-primary-dark);
  text-decoration: none;
}
/* Secondary button (variable products "Select options") */
.wp-block-woocommerce-cart .rc-empty-cart-suggestions .rc-btn--secondary {
  color: var(--rc-text);
  text-decoration: none;
}
.wp-block-woocommerce-cart .rc-empty-cart-suggestions .rc-btn--secondary:hover {
  color: var(--rc-text);
  text-decoration: none;
}

/* ── Quick view: thumbs + categories ─────────────────────────────────────── */
.rc-qv__thumbs {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.625rem;
  flex-wrap: wrap;
}
.rc-qv__thumb {
  width: 56px;
  height: 75px;
  object-fit: cover;
  border-radius: 6px;
  border: 2px solid var(--rc-border);
  cursor: pointer;
  transition: border-color 150ms;
}
.rc-qv__thumb:hover { border-color: var(--rc-primary); }
.rc-qv__cats {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--rc-primary);
  margin: 0;
}
.rc-qv__rating {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
}

/* Sheet wider on desktop for quick view */
@media (min-width: 768px) {
  .rc-sheet { width: min(960px, 94vw); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRODUCT DRAWER + QUICK VIEW — BOTH DRAWERS REDESIGNED
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── CSS variables (overridden by JS from theme settings) ────────────────── */
:root {
    --rc-product-drawer-width: 85%;
    --rc-product-drawer-blur:  12px;
    --rc-sheet-width:          85%;
}

/* ── Shared blur backdrop ────────────────────────────────────────────────── */
.rc-backdrop--blur {
    backdrop-filter:         blur(var(--rc-product-drawer-blur));
    -webkit-backdrop-filter: blur(var(--rc-product-drawer-blur));
}

/* Update the main backdrop to use blur variable when drawers open */
.rc-backdrop--active {
    backdrop-filter:         blur(var(--rc-product-drawer-blur));
    -webkit-backdrop-filter: blur(var(--rc-product-drawer-blur));
    background: rgba(0, 0, 0, 0.45);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRODUCT DRAWER  (full single product page — triggered by card click)
   ═══════════════════════════════════════════════════════════════════════════ */
.rc-product-drawer {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 102%);
    width:  var(--rc-product-drawer-width);
    height: 90dvh;
    z-index: 999;
    background: var(--rc-white);
    border-radius: 1.25rem 1.25rem 0 0;
    box-shadow:
        0 -2px 0 rgba(0,0,0,0.06),
        0 -8px 40px rgba(0,0,0,0.16),
        0 -24px 80px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Spring-feel transition */
    transition: transform 480ms cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform;
}
.rc-product-drawer--open {
    transform: translate(-50%, 0);
}
@media (max-width: 767px) {
    .rc-product-drawer {
        width:  100%;
        height: 92dvh;
        left:   0;
        transform: translateY(102%);
        border-radius: 1.5rem 1.5rem 0 0;
    }
    .rc-product-drawer--open {
        transform: translateY(0);
    }
}

/* Handle */
.rc-product-drawer__handle {
    width: 44px;
    height: 4px;
    border-radius: 2px;
    background: var(--rc-border);
    margin: 0.875rem auto 0;
    flex-shrink: 0;
    cursor: grab;
}

/* Header */
.rc-product-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.5rem 0.75rem;
    border-bottom: 1px solid var(--rc-border);
    flex-shrink: 0;
    gap: 1rem;
}
.rc-product-drawer__breadcrumb {
    min-width: 0;
    flex: 1;
}
.rc-product-drawer__breadcrumb-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--rc-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}
.rc-product-drawer__header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
.rc-product-drawer__fullpage {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border: 1.5px solid var(--rc-border);
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--rc-muted);
    text-decoration: none;
    transition: border-color 150ms, color 150ms;
    white-space: nowrap;
}
.rc-product-drawer__fullpage:hover {
    border-color: var(--rc-primary);
    color: var(--rc-primary);
}
.rc-product-drawer__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--rc-surface);
    color: var(--rc-muted);
    border: none;
    cursor: pointer;
    transition: background 150ms, color 150ms;
    flex-shrink: 0;
}
.rc-product-drawer__close:hover {
    background: var(--rc-border);
    color: var(--rc-text);
}

/* Body */
.rc-product-drawer__body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.rc-product-drawer__body::-webkit-scrollbar { width: 4px; }
.rc-product-drawer__body::-webkit-scrollbar-thumb { background: var(--rc-border); border-radius: 2px; }

/* Content area — single product styles inside drawer context */
.rc-product-drawer__content {
    padding: 1.5rem 2rem 3rem;
}
/* Override single product layout for drawer (it's already narrow) */
.rc-product-drawer__content .rc-single {
    gap: 2rem;
}
.rc-product-drawer__content .rc-single__tabs {
    margin-bottom: 1.5rem;
}
.rc-product-drawer__content .rc-single__related,
.rc-product-drawer__content .rc-single__recently-viewed {
    display: none; /* hide related/rv inside drawer — save space */
}
/* Adjust single product gallery in drawer */
.rc-product-drawer__content .rc-single__gallery {
    position: relative; /* override sticky positioning */
    top: 0;
}
@media (max-width: 767px) {
    .rc-product-drawer__content {
        padding: 1rem 1rem 2rem;
    }
}

/* Skeleton */
.rc-product-drawer__skel { padding: 1.5rem 2rem; }
.rc-product-drawer__skel-inner {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}
@media (max-width: 767px) {
    .rc-product-drawer__skel-inner {
        flex-direction: column;
    }
    .rc-product-drawer__skel-inner > .rc-skel:first-child {
        width: 100% !important;
        aspect-ratio: 3/4;
        max-height: 40dvh;
    }
}

/* Error */
.rc-product-drawer__error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 3rem 2rem;
    text-align: center;
    color: var(--rc-muted);
}
.rc-product-drawer__error p {
    font-size: 0.9375rem;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   QUICK VIEW SHEET  (minimal — triggered by eye icon)
   ═══════════════════════════════════════════════════════════════════════════ */
/* Overrides the generic .rc-sheet to match the new width var */
.rc-sheet {
    width:  var(--rc-sheet-width, 85%);
    left:   50%;
    right:  auto;
    transform: translate(-50%, 102%);
    border-radius: 1.25rem 1.25rem 0 0;
    box-shadow:
        0 -2px 0 rgba(0,0,0,0.06),
        0 -8px 40px rgba(0,0,0,0.16);
    transition: transform 360ms cubic-bezier(0.32, 0.72, 0, 1);
}
.rc-sheet--open {
    transform: translate(-50%, 0);
}
@media (max-width: 767px) {
    .rc-sheet {
        width:  100%;
        left:   0;
        transform: translateY(102%);
    }
    .rc-sheet--open {
        transform: translateY(0);
    }
}

/* ── Reduced motion overrides ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .rc-product-drawer { transition: none; }
}

/* ── Product drawer: skeleton, inner content aliases ─────────────────────── */

/* .rc-product-drawer__inner = same as __content */
.rc-product-drawer__inner {
    padding: 1.5rem 2rem 3rem;
}
.rc-product-drawer__inner .rc-single {
    gap: 2rem;
}
.rc-product-drawer__inner .rc-single__gallery {
    position: relative;
    top: 0;
}
.rc-product-drawer__inner .rc-single__related,
.rc-product-drawer__inner .rc-single__recently-viewed {
    display: none;
}
@media (max-width: 767px) {
    .rc-product-drawer__inner { padding: 1rem 1rem 2rem; }
    .rc-product-drawer__inner .rc-single { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* Skeleton layout */
.rc-product-drawer__skeleton { padding: 2rem; }
.rc-product-drawer__skeleton-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: start;
}
@media (max-width: 767px) {
    .rc-product-drawer__skeleton-inner { grid-template-columns: 1fr; }
}
.rc-product-drawer__skeleton-main {
    aspect-ratio: 3 / 4;
    border-radius: 12px;
    margin-bottom: 0.75rem;
    width: 100%;
}
.rc-product-drawer__skeleton-thumbs {
    display: flex;
    gap: 0.5rem;
}
.rc-product-drawer__skeleton-thumb {
    width: 60px;
    height: 80px;
    border-radius: 6px;
    flex-shrink: 0;
}
.rc-product-drawer__skeleton-summary {
    display: flex;
    flex-direction: column;
    padding-top: 0.5rem;
}

/* ── Backdrop blur active on both sheet types ─────────────────────────────── */
/* When ANY drawer/sheet is open, the backdrop uses the configured blur */
.rc-backdrop--active {
    backdrop-filter:         var(--rc-backdrop-blur, blur(10px)) !important;
    -webkit-backdrop-filter: var(--rc-backdrop-blur, blur(10px)) !important;
}

/* ── Product drawer: skeleton + inner content aliases ────────────────────── */
@media (max-width: 767px) {
}
.rc-product-drawer__skeleton-main { aspect-ratio: 3/4; border-radius: 12px; margin-bottom: .75rem; width: 100%; }
.rc-product-drawer__skeleton-thumbs { display: flex; gap: .5rem; }
.rc-product-drawer__skeleton-summary { display: flex; flex-direction: column; padding-top: .5rem; }

/* Backdrop uses configured blur when any overlay is open */

/* ═══════════════════════════════════════════════════════════════════════════
   QUICK VIEW + PRODUCT DRAWER — CLEAN HYVA-QUALITY REDESIGN
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Shared sheet primitives ─────────────────────────────────────────────── */

/* Pill handle — same on every sheet */
.rc-sheet-handle {
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: var(--rc-border);
  margin: 0.75rem auto 0;
  flex-shrink: 0;
}

/* Universal close button */
.rc-sheet-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--rc-surface);
  border: none;
  cursor: pointer;
  color: var(--rc-muted);
  transition: background 150ms, color 150ms;
  flex-shrink: 0;
}
.rc-sheet-close:hover { background: var(--rc-border); color: var(--rc-text); }

/* ═══════════════════════════════════════════════════════════════════════════
   QUICK VIEW SHEET  (.rc-qv-sheet)
   Compact, minimal. Max 640px centred on desktop, full on mobile.
   ═══════════════════════════════════════════════════════════════════════════ */
.rc-qv-sheet {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 100%);
  width: min(680px, 100vw);
  max-height: 92dvh;
  z-index: 1010;
  background: var(--rc-white);
  border-radius: 1.5rem 1.5rem 0 0;
  box-shadow: 0 -4px 6px rgba(0,0,0,.04), 0 -12px 40px rgba(0,0,0,.14);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 400ms cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform;
}
.rc-qv-sheet--open { transform: translate(-50%, 0); }

@media (max-width: 767px) {
  .rc-qv-sheet {
    left: 0;
    width: 100%;
    transform: translateY(100%);
  }
  .rc-qv-sheet--open { transform: translateY(0); }
}

.rc-qv-sheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.375rem;
  border-bottom: 1px solid var(--rc-border);
  flex-shrink: 0;
  gap: 1rem;
}
.rc-qv-sheet__title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--rc-text);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rc-qv-sheet__body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Quick view content layout ───────────────────────────────────────────── */
.rc-qv-content {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 0;
  min-height: 340px;
}
@media (max-width: 540px) {
  .rc-qv-content {
    grid-template-columns: 1fr;
  }
}

.rc-qv-content__img-col {
  background: var(--rc-surface);
  overflow: hidden;
}
.rc-qv-content__img-link { display: block; height: 100%; }
.rc-qv-content__img {
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
  display: block;
  transition: transform 400ms var(--rc-ease);
}
.rc-qv-content__img-link:hover .rc-qv-content__img { transform: scale(1.04); }

.rc-qv-content__info {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.rc-qv-content__cats {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--rc-primary);
  margin: 0;
}
.rc-qv-content__title {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.25;
  color: var(--rc-text);
  margin: 0;
}
.rc-qv-content__rating {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.rc-stars { color: #f59e0b; font-size: 0.8125rem; letter-spacing: -0.5px; }
.rc-qv-content__rating-count { font-size: 0.75rem; color: var(--rc-muted); }

.rc-qv-content__price {
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--rc-primary);
  line-height: 1;
}
.rc-qv-content__price ins  { text-decoration: none; color: #dc2626; }
.rc-qv-content__price del  { font-size: 1rem; color: var(--rc-muted); font-weight: 400; margin-right: 0.375rem; }

.rc-qv-content__desc {
  font-size: 0.875rem;
  color: var(--rc-muted);
  line-height: 1.6;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rc-qv-content__atc {
  display: flex;
  gap: 0.625rem;
  align-items: center;
  margin-top: 0.25rem;
}
.rc-qv-content__qty {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  border: 1.5px solid var(--rc-border);
  border-radius: 8px;
  padding: 0.125rem;
  flex-shrink: 0;
}
.rc-qv-content__qty .rc-qty-btn {
  width: 34px;
  height: 34px;
  border: none;
  background: transparent;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--rc-text);
  transition: background 150ms;
}
.rc-qv-content__qty .rc-qty-btn:hover:not(:disabled) { background: var(--rc-surface); }
.rc-qv-content__qty .rc-qty-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.rc-qv-content__qty .rc-qty-val {
  min-width: 28px;
  text-align: center;
  font-size: 0.9375rem;
  font-weight: 700;
}
.rc-qv-content__atc-btn { flex: 1; min-width: 0; }

.rc-qv-content__oos {
  font-size: 0.875rem;
  color: var(--rc-muted);
  font-style: italic;
  padding: 0.75rem 0;
}

.rc-qv-content__full-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--rc-primary);
  text-decoration: none;
  margin-top: auto;
  padding-top: 0.5rem;
  border-top: 1px solid var(--rc-border);
  transition: gap 150ms;
}
.rc-qv-content__full-link:hover { gap: 0.625rem; }

/* Quick view skeleton */
.rc-qv-skel {
  display: grid;
  grid-template-columns: 200px 1fr;
  min-height: 300px;
}
.rc-qv-skel__img {
  height: 100%;
  min-height: 300px;
  border-radius: 0;
}
.rc-qv-skel__info {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.rc-qv-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--rc-muted);
}
.rc-qv-error p { margin: 0; font-size: 0.9375rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   INLINE QUICK VIEW EXPANDER  (.rc-qv-inline)
   Expands in-place below the clicked card's row — no modal overlay.
   Pointer arrow points back to the active card via --qv-ptr-x.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Grid row expander + pointer container */
.rc-qv-inline {
  grid-column: 1 / -1;
  list-style: none;
  padding: 0;
  position: relative;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 460ms cubic-bezier(0.34, 1.2, 0.64, 1);
  --qv-ptr-x: 50%;
}
.rc-qv-inline--open { grid-template-rows: 1fr; }

/* Inner wrapper — min-height: 0 is required for the 0fr trick */
.rc-qv-inline__inner {
  min-height: 0;
  overflow: hidden;
  position: relative;
  background: var(--rc-surface);
  border: 1px solid var(--rc-border);
  border-top: 3px solid var(--rc-primary);
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.05);
}

/* Pointer arrow — absolutely positioned sibling of __inner, NOT clipped by overflow */
.rc-qv-inline__ptr {
  position: absolute;
  top: 0;
  left: var(--qv-ptr-x);
  transform: translate(-50%, -100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms 160ms;
  z-index: 2;
}
.rc-qv-inline__ptr::before,
.rc-qv-inline__ptr::after {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.rc-qv-inline__ptr::before {
  bottom: 0;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-bottom: 10px solid var(--rc-primary);
}
.rc-qv-inline__ptr::after {
  bottom: -3px;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 9px solid var(--rc-surface);
}
/* Give ptr a non-zero size so pseudo-elements render */
.rc-qv-inline__ptr { width: 22px; height: 10px; }
.rc-qv-inline--open .rc-qv-inline__ptr { opacity: 1; }

/* Content: wider image column than the modal variant */
.rc-qv-inline .rc-qv-content {
  grid-template-columns: clamp(160px, 28%, 340px) 1fr;
  min-height: 260px;
}
/* On narrow screens the expander still spans the full grid width but content stacks */
@media (max-width: 600px) {
  .rc-qv-inline .rc-qv-content { grid-template-columns: 1fr; min-height: 0; }
  .rc-qv-inline .rc-qv-content__img { min-height: 200px; max-height: 280px; object-fit: cover; }
}
/* On 2-col grid the expander column is small — keep image readable */
@media (max-width: 767px) {
  .rc-qv-inline .rc-qv-content { grid-template-columns: 120px 1fr; }
  .rc-qv-inline .rc-qv-content__img { min-height: 0; }
}
@media (max-width: 600px) {
  .rc-qv-inline .rc-qv-content { grid-template-columns: 1fr; }
}

/* Close button */
.rc-qv-inline__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 999px;
  background: rgba(0,0,0,0.06);
  color: var(--rc-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 180ms, color 180ms;
  z-index: 2;
  flex-shrink: 0;
}
.rc-qv-inline__close:hover { background: rgba(0,0,0,0.13); }

/* Skeleton layout */
.rc-qv-inline__skeleton {
  display: flex;
  gap: 1.5rem;
  padding: 1.75rem 2rem;
  align-items: flex-start;
}
@media (max-width: 767px) {
  .rc-qv-inline__skeleton { gap: 1rem; padding: 1.25rem; }
}
@media (max-width: 600px) {
  .rc-qv-inline__skeleton { flex-direction: column; }
}
.rc-qv-inline__skel-img {
  flex: 0 0 clamp(100px, 28%, 280px);
  aspect-ratio: 3 / 4;
  border-radius: 10px;
}
@media (max-width: 600px) {
  .rc-qv-inline__skel-img { flex: 0 0 auto; width: 100%; max-height: 200px; aspect-ratio: 4/3; }
}
.rc-qv-inline__skel-body {
  flex: 1;
  min-width: 0;
  padding-top: 0.375rem;
}

/* Error state */
.rc-qv-inline__err {
  padding: 2rem;
  color: var(--rc-muted);
  font-size: 0.875rem;
  margin: 0;
}

/* Active card — primary outline + subtle lift */
.rc-card--qv-active {
  outline: 2.5px solid var(--rc-primary);
  outline-offset: 3px;
  border-radius: var(--rc-radius, 12px);
  position: relative;
  z-index: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRODUCT DRAWER  (.rc-pd)
   Full single product page. 85vw centred on desktop, fullscreen on mobile.
   ═══════════════════════════════════════════════════════════════════════════ */
.rc-pd {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 100%);
  width: var(--rc-drawer-width, 85vw);
  height: 92dvh;
  z-index: 1010;
  background: var(--rc-white);
  border-radius: 1.5rem 1.5rem 0 0;
  box-shadow: 0 -4px 6px rgba(0,0,0,.04), 0 -16px 60px rgba(0,0,0,.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.rc-pd--open { transform: translate(-50%, 0); }

@media (max-width: 767px) {
  .rc-pd {
    left: 0;
    width: 100%;
    height: 94dvh;
    transform: translateY(100%);
    border-radius: 1.25rem 1.25rem 0 0;
  }
  .rc-pd--open { transform: translateY(0); }
}

/* Header */
.rc-pd__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1.5rem;
  border-bottom: 1px solid var(--rc-border);
  flex-shrink: 0;
  gap: 1rem;
}
.rc-pd__title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--rc-text);
  margin: 0;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.rc-pd__header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.rc-pd__fullpage-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.4375rem 0.875rem;
  border: 1.5px solid var(--rc-border);
  border-radius: 6px;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--rc-muted);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 150ms, color 150ms;
}
.rc-pd__fullpage-btn:hover { border-color: var(--rc-primary); color: var(--rc-primary); }
.rc-pd__wishlist-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1.5px solid var(--rc-border);
  border-radius: 6px;
  background: transparent;
  color: var(--rc-muted);
  cursor: pointer;
  transition: border-color 200ms, color 200ms;
  flex-shrink: 0;
}
.rc-pd__wishlist-btn svg { transition: fill 200ms, stroke 200ms; }
.rc-pd__wishlist-btn:hover,
.rc-pd__wishlist-btn--active {
  border-color: var(--rc-error, #ef4444);
  color: var(--rc-error, #ef4444);
}
.rc-pd__wishlist-btn--active svg,
.rc-pd__wishlist-btn:hover svg {
  fill: var(--rc-error, #ef4444);
  stroke: var(--rc-error, #ef4444);
}

/* Body */
.rc-pd__body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.rc-pd__body::-webkit-scrollbar { width: 4px; }
.rc-pd__body::-webkit-scrollbar-thumb { background: var(--rc-border); border-radius: 2px; }

/* Injected product page — override layout for drawer context */
.rc-pd__content {
  padding: 1.5rem 2rem 3rem;
}
.rc-pd__content .rc-single {
  /* Already grid — good */
  gap: 2rem;
}
.rc-pd__content .rc-single__gallery {
  position: relative; /* override sticky */
  top: 0;
}
.rc-pd__content .rc-single__related,
.rc-pd__content .rc-single__recently-viewed,
.rc-pd__content .rc-sticky-atc {
  display: none !important; /* hide extras inside drawer */
}
@media (max-width: 767px) {
  .rc-pd__content { padding: 1rem 1rem 2rem; }
  .rc-pd__content .rc-single { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* Skeleton */
.rc-pd__skeleton { padding: 2rem; }
.rc-pd__skeleton-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
}
@media (max-width: 767px) { .rc-pd__skeleton-grid { grid-template-columns: 1fr; } }
.rc-pd__skeleton-img   { aspect-ratio: 3/4; border-radius: 12px; width: 100%; margin-bottom: .75rem; }
.rc-pd__skeleton-thumbs{ display: flex; gap: .5rem; }
.rc-pd__skeleton-thumb { width: 60px; height: 80px; border-radius: 6px; flex-shrink: 0; }
.rc-pd__skeleton-info  { display: flex; flex-direction: column; }

/* Error */
.rc-pd__error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--rc-muted);
}

/* ── Backdrop blur connects to CSS var ───────────────────────────────────── */
.rc-backdrop--active {
  background: rgba(0, 0, 0, 0.5) !important;
  backdrop-filter:         var(--rc-backdrop-blur, blur(10px)) !important;
  -webkit-backdrop-filter: var(--rc-backdrop-blur, blur(10px)) !important;
}

/* ── Reduced motion ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .rc-qv-sheet, .rc-pd { transition-duration: 0.01ms !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BLOG DRAWER  (.rc-bd)
   Slide-up post preview. Desktop: 85vw centered; mobile: fullscreen.
   Scroll/wheel expands to 100dvh then navigates to the post via AjaxNav.
   ═══════════════════════════════════════════════════════════════════════════ */
.rc-bd {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 100%);
  width: var(--rc-bd-w, 85vw);
  height: var(--rc-bd-h, 60dvh);
  z-index: 1010;
  background: var(--rc-surface);
  border-radius: var(--rc-bd-br, 1.5rem 1.5rem 0 0);
  box-shadow: 0 -4px 6px rgba(0,0,0,.04), 0 -20px 60px rgba(0,0,0,.22);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.rc-bd--open { transform: translate(-50%, 0); }

@media (max-width: 767px) {
  .rc-bd {
    left: 0;
    width: 100%;
    height: var(--rc-bd-h, 65dvh);
    transform: translateY(100%);
    border-radius: var(--rc-bd-br, 1.25rem 1.25rem 0 0);
  }
  .rc-bd--open { transform: translateY(0); }
}

/* ── Backdrop ────────────────────────────────────────────────────────────── */
#rc-bd-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.42);
  z-index: 1009; /* one below drawer (1010) */
  cursor: pointer;
  opacity: 0;
  transition: opacity 350ms;
}
#rc-bd-backdrop.rc-bd-backdrop--on { opacity: 1; }

/* ── Hero gradient area — fills drawer in preview mode, centered layout ───── */
.rc-bd__hero {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2.75rem 2rem 2rem;
  overflow: hidden;
}
/* Drag handle: absolute inside hero, centered at very top */
.rc-bd__drag-handle {
  position: absolute;
  top: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  background: rgba(255,255,255,.45);
  margin: 0;
}
/* Blurred thumbnail colour-bleed */
.rc-bd__hero-bg {
  position: absolute;
  inset: -10%;
  background-size: cover;
  background-position: center;
  filter: blur(22px);
  transform: scale(1.12);
  z-index: 0;
  pointer-events: none;
}
/* Gradient scrim for text readability */
.rc-bd__hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.08) 0%, rgba(0,0,0,.58) 100%);
  z-index: 1;
  pointer-events: none;
}
/* Top-right action buttons — sit above overlay, always clickable */
.rc-bd__hero-actions {
  position: absolute;
  top: 0.875rem;
  right: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  z-index: 4;
  pointer-events: auto;
}
.rc-bd__read-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #fff;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.32);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  white-space: nowrap;
  transition: background 150ms, border-color 150ms;
}
.rc-bd__read-btn:hover {
  background: rgba(255,255,255,.26);
  border-color: rgba(255,255,255,.5);
}
.rc-bd__close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.32);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  transition: background 150ms;
}
.rc-bd__close-btn:hover { background: rgba(255,255,255,.28); }
/* Hero content: category → title → meta → excerpt → scroll CTA — all centred */
.rc-bd__hero-content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  max-width: 560px;
}
.rc-bd__hero-skel {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 560px;
  gap: 0;
}
/* Author / date / read-time row inside hero, below title */
.rc-bd__hero-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-size: 0.78125rem;
  color: rgba(255,255,255,.78);
  flex-wrap: wrap;
}
.rc-bd__hero-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(255,255,255,.5);
  flex-shrink: 0;
}
.rc-bd__cat-pill {
  display: inline-block;
  align-self: center;
  padding: 0.2rem 0.625rem;
  border-radius: 20px;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #fff;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-decoration: none;
  transition: background 150ms;
}
.rc-bd__cat-pill:hover { background: rgba(255,255,255,.3); color: #fff; }
.rc-bd__title {
  font-size: clamp(1.125rem, 2.8vw, 1.625rem);
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
  margin: 0;
  line-height: 1.2;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Full-height header bar ───────────────────────────────────────────────── */
.rc-bd__full-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--rc-border);
  flex-shrink: 0;
  background: var(--rc-surface);
}
.rc-bd__back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.375rem 0.75rem 0.375rem 0.5rem;
  border-radius: 6px;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--rc-muted);
  background: transparent;
  border: 1.5px solid var(--rc-border);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: border-color 150ms, color 150ms;
}
.rc-bd__back-btn:hover { border-color: var(--rc-primary); color: var(--rc-primary); }
.rc-bd__full-title {
  flex: 1;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--rc-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* ── Body: excerpt, meta, scroll hint ────────────────────────────────────── */
.rc-bd__body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: var(--rc-surface);
}
.rc-bd__body::-webkit-scrollbar { width: 3px; }
.rc-bd__body::-webkit-scrollbar-thumb { background: var(--rc-border); border-radius: 2px; }

/* Body-skel kept for any residual usage */
.rc-bd__body-skel { padding: 1.125rem 1.5rem; }

/* Loading skeleton — constrained to initial drawer width, centered */
.rc-bd__full-loading {
  overflow: hidden;
  max-width: 85vw;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* Featured image — full-width, fixed height, covers top of full view */
.rc-bd__full-image {
  display: block;
  width: 100%;
  max-height: 240px;
  object-fit: cover;
}

/* Article header: category, title, meta — constrained to initial drawer width */
.rc-bd__article-header {
  padding: 1.25rem 1.5rem 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-bottom: 1px solid var(--rc-border);
  max-width: 85vw;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  box-sizing: border-box;
}
.rc-bd__cat-pill--article {
  display: inline-block;
  align-self: flex-start;
  padding: 0.15rem 0.55rem;
  border-radius: 20px;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--rc-primary);
  background: color-mix(in srgb, var(--rc-primary) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--rc-primary) 25%, transparent);
  text-decoration: none;
}
.rc-bd__article-title {
  font-size: clamp(1.125rem, 2.5vw, 1.5rem);
  font-weight: 800;
  color: var(--rc-text);
  line-height: 1.25;
  margin: 0;
}
.rc-bd__article-meta {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8125rem;
  color: var(--rc-muted);
  flex-wrap: wrap;
}
.rc-bd__article-meta .rc-bd__avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--rc-border);
  flex-shrink: 0;
}

/* Article body — constrained to initial drawer width, centered */
.rc-bd__article-content {
  padding: 1.25rem 1.5rem 2rem;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--rc-text);
  max-width: 85vw;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  box-sizing: border-box;
}
.rc-bd__article-content h1,
.rc-bd__article-content h2,
.rc-bd__article-content h3,
.rc-bd__article-content h4,
.rc-bd__article-content h5,
.rc-bd__article-content h6 {
  font-size: clamp(1rem, 2.2vw, 1.3rem);
  font-weight: 700;
  margin: 1.5em 0 0.6em;
  line-height: 1.3;
  color: var(--rc-text);
}
.rc-bd__article-content p { margin: 0 0 1em; }
.rc-bd__article-content a { color: var(--rc-primary); }
.rc-bd__article-content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
  margin: 1em auto;
}
.rc-bd__article-content ul,
.rc-bd__article-content ol {
  padding-left: 1.5em;
  margin: 0 0 1em;
}
.rc-bd__article-content li { margin-bottom: 0.35em; }
.rc-bd__article-content blockquote {
  margin: 1.25em 0;
  padding: 0.75em 1.25em;
  border-left: 3px solid var(--rc-primary);
  background: var(--rc-surface);
  border-radius: 0 6px 6px 0;
  font-style: italic;
  color: var(--rc-muted);
}
.rc-bd__article-content pre,
.rc-bd__article-content code {
  font-family: monospace;
  font-size: 0.875em;
  background: var(--rc-surface);
  border-radius: 4px;
}
.rc-bd__article-content pre { padding: 1em; overflow-x: auto; }
.rc-bd__article-content code { padding: 0.1em 0.35em; }

/* ── Social share bar — constrained to initial drawer width, centered ─────── */
.rc-bd__share-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.5rem 1.75rem;
  border-top: 1px solid var(--rc-border);
  max-width: 85vw;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  box-sizing: border-box;
}
.rc-bd__share-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--rc-muted);
  margin-right: 0.25rem;
  flex-shrink: 0;
}
.rc-bd__share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--rc-surface);
  border: 1.5px solid var(--rc-border);
  color: var(--rc-muted);
  text-decoration: none;
  cursor: pointer;
  font: inherit;
  flex-shrink: 0;
  transition: background 150ms, color 150ms, border-color 150ms;
}
.rc-bd__share-btn:hover {
  border-color: var(--rc-primary);
  color: var(--rc-primary);
  background: color-mix(in srgb, var(--rc-primary) 8%, var(--rc-white));
}
.rc-bd__share-copy-btn.rc-bd__share-copied {
  border-color: #16a34a;
  color: #16a34a;
  background: color-mix(in srgb, #16a34a 10%, var(--rc-white));
}
/* Excerpt — now inside the gradient hero, white text, centred */
.rc-bd__excerpt {
  font-size: 0.9rem;
  line-height: 1.65;
  color: rgba(255,255,255,.72);
  text-shadow: 0 1px 3px rgba(0,0,0,.3);
  margin: 0.125rem 0 0;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* .rc-bd__avatar used in full-content article meta (loadFull JS) */
.rc-bd__avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1.5px solid var(--rc-border);
}
.rc-bd__author { font-size: 0.875rem; font-weight: 600; color: var(--rc-text); }
.rc-bd__dot { opacity: 0.4; }
/* Frosted glass pill CTA */
.rc-bd__scroll-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 1.125rem 0.45rem 0.875rem;
  border-radius: 9999px;
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: rgba(255,255,255,.9);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-top: 0.875rem;
  animation: rc-bd-hint 2.5s ease-in-out infinite;
}
@keyframes rc-bd-hint {
  0%, 100% { transform: translateY(0);    opacity: .85; }
  50%       { transform: translateY(4px); opacity: 1;   }
}

@media (prefers-reduced-motion: reduce) {
  .rc-bd { transition-duration: 0.01ms !important; }
  .rc-bd__scroll-hint { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HYVA-STYLE REDESIGN: INLINE SEARCH + MINICART DROPDOWN
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Inline header search ────────────────────────────────────────────────── */

/* Search wrap — expands to fill center of header */
.rc-header__search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.rc-header__search-wrap--active {
  flex: 1;
  max-width: 600px;
  margin: 0 1rem;
}

/* The expanded input container */
.rc-header__search-input-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  background: var(--rc-surface);
  border: 1.5px solid var(--rc-border);
  border-radius: 10px;
  padding: 0 0.875rem;
  transition: border-color 200ms, box-shadow 200ms;
}
.rc-header__search-input-wrap:focus-within {
  border-color: var(--rc-primary);
  box-shadow: 0 0 0 3px rgba(var(--rc-primary-rgb), 0.1);
}
.rc-header__search-lens {
  color: var(--rc-muted);
  flex-shrink: 0;
}
.rc-header__search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--rc-text);
  padding: 0.75rem 0;
  min-width: 0;
}
.rc-header__search-input::placeholder { color: var(--rc-muted); }
.rc-header__search-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--rc-border);
  border: none;
  cursor: pointer;
  color: var(--rc-muted);
  transition: background 150ms;
  flex-shrink: 0;
}
.rc-header__search-clear:hover { background: var(--rc-border-dark); }
.rc-header__search-close {
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--rc-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0 0 0 0.25rem;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 150ms;
}
.rc-header__search-close:hover { color: var(--rc-text); }

/* Search results dropdown */
.rc-header__search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--rc-white);
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  max-height: 400px;
  overflow-y: auto;
  z-index: 600;
  padding: 0.5rem;
}

/* When search is open, hide logo and nav on mobile */
.rc-header__logo--hidden { display: none; }
.rc-header__actions--hidden { display: none; }
@media (min-width: 640px) {
  .rc-header__logo--hidden  { display: block; }
  .rc-header__actions--hidden { display: flex; }
}
/* On desktop always show logo/actions even when search is open */
@media (min-width: 1024px) {
  .rc-header__logo--hidden  { display: block !important; }
  .rc-header__actions--hidden { display: flex !important; }
  .rc-nav--hidden { display: none; }
}

/* ── Minicart — Hyva style ───────────────────────────────────────────────── */

/* Desktop: dropdown from cart icon */
.rc-minicart {
  position: fixed;
  z-index: 1020;
  background: var(--rc-white);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── DESKTOP dropdown (fixed, right-aligned near cart icon) ── */
@media (min-width: 768px) {
  .rc-minicart {
    position: fixed;
    top: calc(var(--rc-header-h) + 8px);
    right: 1.25rem;
    width: 380px;
    max-height: 80dvh;
    border-radius: 16px;
    border: 1px solid var(--rc-border);
    box-shadow: 0 4px 6px rgba(0,0,0,0.04), 0 16px 48px rgba(0,0,0,0.12);
    background: var(--rc-white);
    transform: translateY(-10px) scale(0.98);
    transform-origin: top right;
    opacity: 0;
    pointer-events: none;
    transition:
      opacity   220ms var(--rc-ease),
      transform 220ms var(--rc-ease);
    overflow: hidden;
  }
  .rc-minicart--open {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: all;
  }
  .rc-minicart__handle--mobile { display: none; }
  /* Admin bar offset */
  .admin-bar .rc-minicart { top: calc(var(--rc-header-h) + 32px + 8px); }
}

/* ── MOBILE bottom sheet ── */
@media (max-width: 767px) {
  .rc-minicart {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-height: 90dvh;
    border-radius: 1.375rem 1.375rem 0 0;
    background: var(--rc-white);
    box-shadow: 0 -4px 6px rgba(0,0,0,0.04), 0 -12px 40px rgba(0,0,0,0.14);
    transform: translateY(100%);
    opacity: 1;
    pointer-events: none;
    transition: transform 380ms cubic-bezier(0.32, 0.72, 0, 1);
  }
  .rc-minicart--open {
    transform: translateY(0);
    pointer-events: all;
  }
}

/* Header */
.rc-minicart__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1.125rem;
  border-bottom: 1px solid var(--rc-border);
  flex-shrink: 0;
}
.rc-minicart__header-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.rc-minicart__title {
  font-size: 0.9375rem;
  font-weight: 700;
  margin: 0;
  color: var(--rc-text);
}
.rc-minicart__header-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.rc-minicart__view-cart {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--rc-primary);
  text-decoration: none;
  white-space: nowrap;
}
.rc-minicart__view-cart:hover { text-decoration: underline; }

/* Body (scrollable items) */
.rc-minicart__body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.75rem 1.125rem;
  min-height: 80px;
  transition: opacity 160ms;
}
.rc-minicart__body--loading { opacity: 0.5; pointer-events: none; }
.rc-minicart__body::-webkit-scrollbar { width: 4px; }
.rc-minicart__body::-webkit-scrollbar-thumb { background: var(--rc-border); border-radius: 2px; }

/* Footer */
.rc-minicart__footer {
  flex-shrink: 0;
  border-top: 1px solid var(--rc-border);
  padding: 1rem 1.125rem;
  background: var(--rc-white);
}
.rc-minicart__footer:empty { display: none; }

/* Hyva-style grand total row */
.rc-cart-subtotal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.875rem;
  font-size: 0.9375rem;
}
.rc-cart-subtotal span:first-child { font-weight: 600; color: var(--rc-text); }
.rc-cart-subtotal span:last-child  { font-size: 1.0625rem; font-weight: 800; color: var(--rc-text); }

/* Hyva-style checkout button: black, full width */
.rc-minicart__checkout-btn,
.rc-minicart .rc-btn--primary {
  display: flex !important;
  width: 100% !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  padding: 0.875rem !important;
  background: #111827 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  font: inherit !important;
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: background 150ms !important;
}
.rc-minicart__checkout-btn:hover,
.rc-minicart .rc-btn--primary:hover {
  background: #1f2937 !important;
}

/* Cart item — Hyva style: clean, compact */
.rc-cart-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--rc-border);
}
.rc-cart-item__img {
  width: 68px;
  height: 90px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--rc-border);
  background: var(--rc-surface);
  display: block;
}
.rc-cart-item__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  min-width: 0;
}
.rc-cart-item__price { font-size: 0.9375rem; font-weight: 700; }

/* ── Cart qty row ──────────────────────────────────────────────────────── */
.rc-cart-item__qty-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 0.5rem;
}
/* iOS frosted-glass pill stepper — no borders, tinted fill */
.rc-cart-item__qty {
  display: inline-flex;
  align-items: stretch;
  height: 28px;
  border-radius: 999px;
  background: rgba(118, 118, 128, 0.12);
  overflow: hidden;
}
.rc-qty-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--rc-text);
  font-size: 1.0625rem;
  font-weight: 300;
  line-height: 1;
  padding: 0 0 1px 0;
  cursor: pointer;
  transition: background 180ms;
}
.rc-qty-btn:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.08);
}
.rc-qty-btn:active:not(:disabled) {
  background: rgba(0, 0, 0, 0.15);
}
.rc-qty-btn:disabled {
  opacity: 0.28;
  cursor: not-allowed;
}
/* Number between buttons — hairline iOS separators */
.rc-qty-val {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  padding: 0 2px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--rc-text);
  border-left: 1px solid rgba(60, 60, 67, 0.18);
  border-right: 1px solid rgba(60, 60, 67, 0.18);
  user-select: none;
}
/* Gentle iOS spring on click — whole pill bounces */
@keyframes rc-qty-pop {
  0%   { transform: scale(1); }
  30%  { transform: scale(0.92); }
  65%  { transform: scale(1.05); }
  85%  { transform: scale(0.99); }
  100% { transform: scale(1); }
}
.rc-qty-pop {
  animation: rc-qty-pop 300ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
/* Trash — same frosted-glass circle, matches pill material */
.rc-cart-item__remove {
  display: flex;
  align-items: center;
  align-self: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border: none;
  border-radius: 999px;
  background: rgba(118, 118, 128, 0.12);
  color: var(--rc-muted);
  cursor: pointer;
  transition: background 180ms, color 180ms;
  margin-top: 4px;
}
.rc-cart-item__remove:hover:not(:disabled) {
  background: rgba(255, 59, 48, 0.14);
  color: #ff3b30;
}
.rc-cart-item__remove:active:not(:disabled) {
  background: rgba(255, 59, 48, 0.24);
  color: #ff3b30;
}

/* Empty cart */
.rc-cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
  padding: 2rem 1rem;
  color: var(--rc-muted);
}

/* Hide WC Blocks default "New in store" grid inside the empty-cart block —
   replaced by the theme's native carousel via render_block filter */
.wp-block-woocommerce-empty-cart-block .wc-block-grid,
.wp-block-woocommerce-empty-cart-block [class*="wc-block-product-new"],
.wp-block-woocommerce-empty-cart-block .wp-block-separator,
.wp-block-woocommerce-empty-cart-block h2:not(.wc-block-cart__empty-cart__title) { display: none !important; }

/* Hide "You might also like" carousel when WC Blocks shows the filled cart.
   React adds .wp-block-woocommerce-filled-cart-block to the DOM when the
   cart has items; removing it when empty. CSS :has() replaces the old JS
   MutationObserver — zero JS, works across all cart-state transitions. */
.wp-block-woocommerce-cart:has(.wp-block-woocommerce-filled-cart-block) .rc-empty-cart-suggestions {
  display: none;
}

/* Theme carousel injected below the empty-cart block */
.rc-empty-cart-suggestions {
  max-width: var(--rc-container);
  margin: 0 auto;
  padding: 2rem 1.25rem 3rem;
}

/* ── Empty-cart carousel: enhanced pagination dots ─────────────────────── */
@keyframes rc-dot-bounce-in {
  0%   { opacity: 0; transform: scale(0.2) translateY(8px); }
  65%  { opacity: 1; transform: scale(1.25) translateY(-3px); }
  100% { opacity: 1; transform: scale(1)   translateY(0); }
}
@keyframes rc-dot-glow {
  0%   { box-shadow: 0 0 0 0   color-mix(in srgb, var(--rc-primary) 55%, transparent); }
  70%  { box-shadow: 0 0 0 7px color-mix(in srgb, var(--rc-primary) 0%,  transparent); }
  100% { box-shadow: 0 0 0 0   color-mix(in srgb, var(--rc-primary) 0%,  transparent); }
}

/* Extra room below slides */
.rc-empty-cart-suggestions .rc-product-carousel { padding-bottom: 4.5rem; }

/* Pull pagination into the extra space */
.rc-empty-cart-suggestions .swiper-pagination { bottom: 14px !important; }

/* All bullets: spring transition + staggered bounce-in */
.rc-empty-cart-suggestions .swiper-pagination-bullet {
  animation: rc-dot-bounce-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  transition: width 380ms cubic-bezier(0.34, 1.56, 0.64, 1), background 250ms ease, transform 180ms ease;
  cursor: pointer;
}
.rc-empty-cart-suggestions .swiper-pagination-bullet:nth-child(1) { animation-delay: 0.04s; }
.rc-empty-cart-suggestions .swiper-pagination-bullet:nth-child(2) { animation-delay: 0.09s; }
.rc-empty-cart-suggestions .swiper-pagination-bullet:nth-child(3) { animation-delay: 0.14s; }
.rc-empty-cart-suggestions .swiper-pagination-bullet:nth-child(4) { animation-delay: 0.19s; }
.rc-empty-cart-suggestions .swiper-pagination-bullet:nth-child(5) { animation-delay: 0.24s; }
.rc-empty-cart-suggestions .swiper-pagination-bullet:nth-child(6) { animation-delay: 0.29s; }
.rc-empty-cart-suggestions .swiper-pagination-bullet:nth-child(7) { animation-delay: 0.34s; }
.rc-empty-cart-suggestions .swiper-pagination-bullet:nth-child(8) { animation-delay: 0.39s; }

/* Active dot: sonar glow pulse (starts after entrance finishes) */
.rc-empty-cart-suggestions .swiper-pagination-bullet-active {
  animation: rc-dot-glow 2.4s 0.65s ease-out infinite;
}

/* Inactive dots: grow + tint on hover */
.rc-empty-cart-suggestions .swiper-pagination-bullet:not(.swiper-pagination-bullet-active):hover {
  transform: scale(1.7);
  background: var(--rc-primary) !important;
  opacity: 0.55;
}

/* Loading veil */
.rc-minicart__veil {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

/* ── Fix: backdrop must be fixed even with minicart absolute ──────────────── */
/* On mobile, minicart is fixed-position and needs the backdrop */
@media (max-width: 767px) {
  .rc-minicart { position: fixed !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BLOG & CONTENT
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Blog archive ────────────────────────────────────────────────────────── */
.rc-blog-hero {
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--rc-border);
  background: var(--rc-surface);
}
.rc-blog-hero__title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin: 0 0 0.75rem;
  color: var(--rc-text);
}
.rc-blog-hero__desc {
  font-size: 1.0625rem;
  color: var(--rc-muted);
  max-width: 600px;
  margin: 0;
  line-height: 1.6;
}
.rc-blog-wrap { padding: clamp(3rem, 6vw, 5rem) 0; }

/* ── Post card grid ──────────────────────────────────────────────────────── */
.rc-post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}
.rc-post-grid--related { margin-top: 2rem; }
.rc-post-grid--search  { margin-top: 1.5rem; }
@media (max-width: 1023px) {
  .rc-post-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
  .rc-post-grid { grid-template-columns: 1fr; }
}

/* First post spans full width on larger grids */
.rc-post-grid__item--featured { grid-column: 1 / -1; }
.rc-post-grid__item--featured .rc-post-card {
  display: grid;
  grid-template-columns: 55% 1fr;
  gap: 0;
}
.rc-post-grid__item--featured .rc-post-card__img-wrap { aspect-ratio: 16 / 9; }
.rc-post-grid__item--featured .rc-post-card__body { padding: 2rem 2.5rem; }
.rc-post-grid__item--featured .rc-post-card__title { font-size: clamp(1.25rem, 2.5vw, 2rem); }
@media (max-width: 767px) {
  .rc-post-grid__item--featured .rc-post-card { grid-template-columns: 1fr; }
  .rc-post-grid__item--featured .rc-post-card__body { padding: 1.25rem; }
}

/* ── Post card ───────────────────────────────────────────────────────────── */
.rc-post-card {
  background: var(--rc-white);
  border: 1.5px solid var(--rc-border);
  border-radius: var(--rc-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 220ms var(--rc-ease), transform 220ms var(--rc-ease);
  height: 100%;
}
.rc-post-card:hover {
  box-shadow: var(--rc-shadow-lg);
  transform: translateY(-3px);
}

.rc-post-card__img-wrap {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.rc-post-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms var(--rc-ease);
  display: block;
}
.rc-post-card:hover .rc-post-card__img { transform: scale(1.05); }

.rc-post-card__body {
  padding: 1.375rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.5rem;
}
.rc-post-card__cat {
  display: inline-flex;
  align-items: center;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rc-primary);
  text-decoration: none;
  transition: opacity 150ms;
}
.rc-post-card__cat:hover { opacity: 0.7; }

.rc-post-card__title {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rc-post-card__title a { color: var(--rc-text); text-decoration: none; }
.rc-post-card__title a:hover { color: var(--rc-primary); }

.rc-post-card__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--rc-muted);
}
.rc-post-card__dot { opacity: 0.5; }

.rc-post-card__excerpt {
  font-size: 0.9rem;
  color: var(--rc-muted);
  line-height: 1.6;
  flex: 1;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rc-post-card__link {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--rc-primary);
  text-decoration: none;
  margin-top: auto;
  padding-top: 0.5rem;
}
.rc-post-card__link:hover { text-decoration: underline; }

/* ── Single post layout ──────────────────────────────────────────────────── */

/* Reading progress bar — fixed strip at top of viewport */
.rc-read-progress {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: transparent;
  z-index: 9999;
  pointer-events: none;
}
.rc-read-progress--visible { display: block; }
.rc-read-progress__bar {
  height: 100%;
  width: 0%;
  background: var(--rc-primary);
  transition: width 80ms linear;
}

/* ── Post main wrapper ───────────────────────────────────────────────────── */
.rc-post-main {
  position: relative;
  overflow: hidden; /* clips absolute bg, prevents horizontal scroll */
  min-height: 100vh;
}

/* Dark overlay over background — same for all gradient/image variants */
.rc-post-main::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.58) 0%,
    rgba(0,0,0,0.42) 45%,
    rgba(0,0,0,0.28) 100%
  );
  pointer-events: none;
}

/* Colour-bleed image layer — position: absolute, never fixed */
.rc-post-bg {
  position: absolute;
  inset: -8%;
  z-index: 0;
  background-image: var(--rc-post-bg-url);
  background-size: cover;
  background-position: center;
  filter: blur(72px);
  transform: scale(1.12);
  opacity: 0.85;
}

/* ── 6 gradient mesh presets (deterministic: post_id % 6 + 1) ───────────── */
/* Preset 1 — Midnight purple */
.rc-post-grad-1 {
  background:
    radial-gradient(ellipse at 18% 28%, #5b2d8e 0%, transparent 55%),
    radial-gradient(ellipse at 78% 68%, #1e3a6e 0%, transparent 55%),
    radial-gradient(ellipse at 55% 85%, #0d4060 0%, transparent 50%),
    #0c0a1a;
}
/* Preset 2 — Deep ocean */
.rc-post-grad-2 {
  background:
    radial-gradient(ellipse at 72% 22%, #0d4f8a 0%, transparent 55%),
    radial-gradient(ellipse at 28% 75%, #0e6655 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, #0b1e3d 0%, transparent 60%),
    #050d17;
}
/* Preset 3 — Ember */
.rc-post-grad-3 {
  background:
    radial-gradient(ellipse at 25% 35%, #7c1036 0%, transparent 50%),
    radial-gradient(ellipse at 72% 60%, #a04500 0%, transparent 55%),
    radial-gradient(ellipse at 50% 90%, #2d0a00 0%, transparent 50%),
    #120407;
}
/* Preset 4 — Forest night */
.rc-post-grad-4 {
  background:
    radial-gradient(ellipse at 30% 40%, #0d5c2e 0%, transparent 55%),
    radial-gradient(ellipse at 70% 65%, #1a4a10 0%, transparent 50%),
    radial-gradient(ellipse at 55% 20%, #0a3020 0%, transparent 45%),
    #040d06;
}
/* Preset 5 — Cobalt dusk */
.rc-post-grad-5 {
  background:
    radial-gradient(ellipse at 60% 25%, #6b3a8a 0%, transparent 50%),
    radial-gradient(ellipse at 35% 70%, #1a3a6e 0%, transparent 55%),
    radial-gradient(ellipse at 80% 80%, #0d2040 0%, transparent 50%),
    #09060f;
}
/* Preset 6 — Carbon */
.rc-post-grad-6 {
  background:
    radial-gradient(ellipse at 40% 30%, #2a3a4a 0%, transparent 55%),
    radial-gradient(ellipse at 65% 70%, #1a2a3a 0%, transparent 50%),
    #090c12;
}

/* ── Hero section ────────────────────────────────────────────────────────── */
.rc-post-hero-section {
  position: relative;
  z-index: 2;
  padding: clamp(5rem, 12vw, 8rem) 0 clamp(3rem, 5vw, 4.5rem);
  color: #fff;
}
/* Hero + glass share same inner width → aligns with drawer full-content (85vw) */
.rc-post-hero-inner,
.rc-post-glass-inner {
  max-width: 85vw;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 3vw, 2.5rem);
}

/* Back to blog link */
.rc-post-back {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: rgba(255,255,255,0.65);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  margin-bottom: 1.5rem;
  transition: color 150ms;
}
.rc-post-back:hover { color: #fff; }

/* Post title in hero */
.rc-post-hero__title {
  font-size: clamp(1.875rem, 5vw, 3.25rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.1;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0,0,0,0.22);
  margin: 0.875rem 0 0;
  max-width: 780px;
}

/* ── Meta pills ──────────────────────────────────────────────────────────── */
.rc-post-meta-pills {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.5rem;
}
.rc-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.375rem 0.875rem;
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 500;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(255,255,255,0.9);
  white-space: nowrap;
  line-height: 1;
}
.rc-meta-pill--cat {
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.18);
  color: #fff;
  transition: background 150ms;
}
.rc-meta-pill--cat:hover { background: rgba(255,255,255,0.28); }
.rc-meta-pill--author { padding-left: 0.3rem; }
.rc-meta-pill__avatar {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}

/* ── Glass card ──────────────────────────────────────────────────────────── */
.rc-post-glass {
  position: relative;
  z-index: 2;
  background: color-mix(in srgb, var(--rc-white) 92%, transparent);
  backdrop-filter: blur(32px) saturate(150%);
  -webkit-backdrop-filter: blur(32px) saturate(150%);
  border-radius: 1.75rem 1.75rem 0 0;
  box-shadow: 0 -4px 48px rgba(0,0,0,0.18), 0 0 0 1px rgba(255,255,255,0.5) inset;
  min-height: 70vh;
}
.rc-post-glass-inner {
  padding-top: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

/* ── Featured image — sits flush at top of glass card, above content ──────── */
.rc-post-featured-img {
  margin: 0;
  line-height: 0;
  overflow: hidden;
  border-radius: 1.75rem 1.75rem 0 0;
}
.rc-post-featured-img__img {
  display: block;
  width: 100%;
  height: clamp(220px, 42vw, 520px);
  object-fit: cover;
  object-position: center;
}
@media (max-width: 767px) {
  .rc-post-featured-img { border-radius: 1.25rem 1.25rem 0 0; }
  .rc-post-featured-img__img { height: clamp(180px, 52vw, 320px); }
}

/* Related posts and comments anchor to white ground below glass */
.rc-related-posts,
.rc-comments-wrap { position: relative; z-index: 2; background: var(--rc-surface); }
.rc-post-main .rc-related-posts { margin-top: 0; }

.rc-post-container { max-width: 85vw; }

/* Breadcrumb (no-image fallback only) */
.rc-post-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  font-size: 0.8125rem;
  color: var(--rc-muted);
  padding: 1.5rem 0 0;
}
.rc-post-breadcrumb a { color: var(--rc-muted); text-decoration: none; }
.rc-post-breadcrumb a:hover { color: var(--rc-primary); }
.rc-post-breadcrumb [aria-current] { color: var(--rc-text); font-weight: 500; }

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .rc-post-hero-section { padding: 5rem 0 2.5rem; }
  .rc-post-glass { border-radius: 1.25rem 1.25rem 0 0; }
  .rc-post-glass-inner { padding-top: 2rem; padding-bottom: 3rem; }
  .rc-post-hero__title { font-size: clamp(1.625rem, 7vw, 2.25rem); }
  .rc-post-meta-pills { gap: 0.375rem; }
}

/* ── Entry content (rich text) ───────────────────────────────────────────── */
.entry-content {
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--rc-text);
}
.entry-content > * { margin-bottom: 1.5em; }
.entry-content > *:last-child { margin-bottom: 0; }
.entry-content h2,
.entry-content h3,
.entry-content h4 {
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin-top: 2.25em;
  margin-bottom: 0.75em;
  color: var(--rc-text);
}
.entry-content h2 { font-size: 1.625rem; letter-spacing: -0.03em; }
.entry-content h3 { font-size: 1.3125rem; }
.entry-content h4 { font-size: 1.125rem; }
.entry-content a {
  color: var(--rc-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.entry-content a:hover { text-decoration: none; }
/* Prevent entry-content link colour from bleeding into rc-btn anchor elements */
.entry-content .rc-btn { text-decoration: none; }
/* My Account sidebar renders inside .entry-content (via page.php) — the prose
   underline-by-default convention above isn't right for a nav menu. */
.entry-content .rc-account-nav__link { text-decoration: none; }
.entry-content .rc-btn--primary { color: var(--rc-btn-text); }
.entry-content .rc-btn--secondary { color: var(--rc-text); }
.entry-content .rc-btn--ghost { color: var(--rc-text); }
.entry-content strong { font-weight: 700; color: var(--rc-text); }
.entry-content em { font-style: italic; }
.entry-content ul,
.entry-content ol {
  padding-left: 1.5rem;
}
.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content li { margin-bottom: 0.375em; }
.entry-content blockquote {
  border-left: 4px solid var(--rc-primary);
  margin: 2em 0;
  padding: 1rem 1.5rem;
  background: var(--rc-surface);
  border-radius: 0 var(--rc-radius-sm) var(--rc-radius-sm) 0;
  font-style: italic;
  font-size: 1.125rem;
  color: var(--rc-text);
}
.entry-content blockquote p { margin: 0; }
.entry-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--rc-radius);
  display: block;
}
.entry-content figure { margin: 0; }
.entry-content figcaption {
  font-size: 0.875rem;
  color: var(--rc-muted);
  text-align: center;
  margin-top: 0.5rem;
}
.entry-content code {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 0.875em;
  background: var(--rc-surface);
  border: 1px solid var(--rc-border);
  border-radius: 4px;
  padding: 0.1em 0.4em;
}
.entry-content pre {
  background: #111110;
  color: #d4d4cf;
  border-radius: var(--rc-radius);
  padding: 1.25rem 1.5rem;
  overflow-x: auto;
  font-size: 0.875rem;
  line-height: 1.6;
}
.entry-content pre code { background: none; border: none; padding: 0; color: inherit; }
.entry-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.entry-content th,
.entry-content td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--rc-border);
  text-align: left;
}
.entry-content th { font-weight: 700; }
.entry-content tr:last-child td { border-bottom: none; }
.entry-content hr {
  border: none;
  border-top: 1px solid var(--rc-border);
  margin: 2.5em 0;
}

/* ── Post tags ───────────────────────────────────────────────────────────── */
.rc-post-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 2rem 0;
  border-top: 1px solid var(--rc-border);
  margin-top: 2rem;
}
.rc-post-tags__label { font-size: 0.875rem; font-weight: 600; color: var(--rc-muted); }
.rc-post-tag {
  display: inline-flex;
  font-size: 0.8125rem;
  padding: 0.3rem 0.875rem;
  background: var(--rc-surface);
  border: 1.5px solid var(--rc-border);
  border-radius: 9999px;
  color: var(--rc-text);
  text-decoration: none;
  transition: background 150ms, border-color 150ms;
}
.rc-post-tag:hover {
  background: var(--rc-border);
  border-color: var(--rc-border-dark);
}

/* ── Social share ────────────────────────────────────────────────────────── */
.rc-post-share {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.625rem;
  padding: 1.75rem 0;
}
.rc-post-share__label { font-size: 0.875rem; font-weight: 600; color: var(--rc-muted); margin-right: 0.25rem; }
.rc-post-share__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: var(--rc-font);
  padding: 0.5rem 1rem;
  border-radius: var(--rc-radius-sm);
  border: 1.5px solid var(--rc-border);
  background: transparent;
  color: var(--rc-text);
  text-decoration: none;
  cursor: pointer;
  transition: background 150ms, border-color 150ms, color 150ms;
}
.rc-post-share__btn:hover { background: var(--rc-surface); border-color: var(--rc-border-dark); }

/* ── Author bio ──────────────────────────────────────────────────────────── */
.rc-post-author {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  background: var(--rc-surface);
  border: 1.5px solid var(--rc-border);
  border-radius: var(--rc-radius);
  padding: 1.5rem;
  margin: 2rem 0;
}
.rc-post-author__img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}
.rc-post-author__name { font-weight: 700; font-size: 0.9375rem; display: block; margin-bottom: 0.375rem; }
.rc-post-author__bio { font-size: 0.9rem; color: var(--rc-muted); margin: 0; line-height: 1.6; }

/* ── Post navigation (prev / next) ──────────────────────────────────────── */
.rc-post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding: 2rem 0;
  border-top: 1px solid var(--rc-border);
  margin-top: 1rem;
}
.rc-post-nav__item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  text-decoration: none;
  padding: 1rem 1.25rem;
  border: 1.5px solid var(--rc-border);
  border-radius: var(--rc-radius);
  transition: background 150ms, border-color 150ms;
}
.rc-post-nav__item:hover { background: var(--rc-surface); border-color: var(--rc-border-dark); }
.rc-post-nav__item--next { text-align: right; }
.rc-post-nav__label { font-size: 0.8125rem; font-weight: 600; color: var(--rc-muted); }
.rc-post-nav__title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--rc-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 479px) {
  .rc-post-nav { grid-template-columns: 1fr; }
}

/* ── Related posts section ───────────────────────────────────────────────── */
.rc-related-posts {
  background: var(--rc-surface);
  padding: clamp(3rem, 6vw, 5rem) 0;
  margin-top: 4rem;
}
.rc-related-posts .rc-section-title { margin-bottom: 2rem; }

/* ── Comments ────────────────────────────────────────────────────────────── */
.rc-comments-wrap {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  border-top: 1px solid var(--rc-border);
}
.rc-comments-wrap .comment-form-comment label,
.rc-comments-wrap .comment-form-author label,
.rc-comments-wrap .comment-form-email label { font-size: 0.875rem; font-weight: 600; display: block; margin-bottom: 0.4rem; }
.rc-comments-wrap .comment-form input,
.rc-comments-wrap .comment-form textarea {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1.5px solid var(--rc-border);
  border-radius: var(--rc-radius-sm);
  font-family: var(--rc-font);
  font-size: 0.9375rem;
  background: var(--rc-white);
  color: var(--rc-text);
  outline: none;
  transition: border-color 180ms;
}
.rc-comments-wrap .comment-form input:focus,
.rc-comments-wrap .comment-form textarea:focus { border-color: var(--rc-primary); }
.rc-comments-wrap .form-submit .submit {
  padding: 0.625rem 1.5rem;
  background: var(--rc-primary);
  color: #fff;
  border: none;
  border-radius: var(--rc-radius-sm);
  font-family: var(--rc-font);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 150ms;
}
.rc-comments-wrap .form-submit .submit:hover { background: var(--rc-primary-dark); }

/* ── CMS page templates ──────────────────────────────────────────────────── */
.rc-page-hero {
  position: relative;
  aspect-ratio: 21 / 7;
  overflow: hidden;
}
.rc-page-hero__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rc-page-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.6) 100%);
}
.rc-page-hero__inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding-bottom: 2.5rem;
}
.rc-page-hero__title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  color: #fff;
  margin: 0;
}
.rc-page-header {
  padding: clamp(3rem, 6vw, 5rem) 0 2rem;
  border-bottom: 1px solid var(--rc-border);
  background: var(--rc-surface);
}
.rc-page-header__title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.1;
  margin: 0;
}
.rc-page-body { padding: clamp(3rem, 6vw, 4rem) 0; }
.rc-page-body--wc { padding: 0; }
.rc-page--no-header > .rc-page-body { padding-top: 0; }
.rc-prose-container { max-width: 800px; }

/* ── Search results page ─────────────────────────────────────────────────── */
.rc-search-results-main { padding: 0 0 4rem; }
.rc-search-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: clamp(2rem, 4vw, 3.5rem) 0 2rem;
  border-bottom: 1px solid var(--rc-border);
}
.rc-search-results-title {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0;
  color: var(--rc-text);
}
.rc-search-results-title em { font-style: normal; color: var(--rc-primary); }
.rc-search-results-form {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.rc-search-results-input {
  height: 42px;
  padding: 0 1rem;
  border: 1.5px solid var(--rc-border);
  border-radius: var(--rc-radius);
  font-family: var(--rc-font);
  font-size: 0.9375rem;
  outline: none;
  min-width: 240px;
  transition: border-color 180ms;
}
.rc-search-results-input:focus { border-color: var(--rc-primary); }

/* Tabs */
.rc-search-tabs { margin-top: 2rem; }
.rc-search-tabs__nav {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--rc-border);
  margin-bottom: 2rem;
}
.rc-search-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  font-family: var(--rc-font);
  color: var(--rc-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color 150ms, border-color 150ms;
}
.rc-search-tab--active { color: var(--rc-text); border-bottom-color: var(--rc-primary); }
.rc-search-tab__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  background: var(--rc-surface);
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
}
.rc-search-empty-msg,
.rc-blog-empty p {
  font-size: 1rem;
  color: var(--rc-muted);
  padding: 3rem 0;
  text-align: center;
}

/* ── Blog / archive pagination ───────────────────────────────────────────── */
.rc-pagination { margin-top: 3rem; display: flex; justify-content: center; }
.rc-pagination .nav-links {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
  justify-content: center;
}
.rc-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 0.875rem;
  border-radius: var(--rc-radius);
  border: 1.5px solid var(--rc-border);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--rc-text);
  text-decoration: none;
  transition: background 150ms, border-color 150ms, color 150ms;
  white-space: nowrap;
}
.rc-pagination .page-numbers:hover {
  background: var(--rc-primary);
  border-color: var(--rc-primary);
  color: #fff;
}
.rc-pagination .page-numbers.current {
  background: var(--rc-primary);
  border-color: var(--rc-primary);
  color: #fff;
  font-weight: 700;
  pointer-events: none;
}
.rc-pagination .page-numbers.dots {
  border: none;
  background: transparent;
  pointer-events: none;
  color: var(--rc-muted);
}
.rc-pagination .prev.page-numbers,
.rc-pagination .next.page-numbers {
  padding: 0 1.125rem;
  gap: 0.375rem;
}
@media (max-width: 479px) {
  .rc-pagination .prev.page-numbers,
  .rc-pagination .next.page-numbers { font-size: 0.8125rem; padding: 0 0.75rem; }
}
.rc-search-no-results {
  text-align: center;
  padding: 4rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}
.rc-search-no-results p { font-size: 1.0625rem; color: var(--rc-muted); margin: 0; }

/* =============================================================================
   20. MY ACCOUNT
   ============================================================================= */

/* Layout */
.rc-account-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 2.5rem;
  padding: 3rem 0 5rem;
  align-items: start;
}
@media (max-width: 767px) {
  .rc-account-layout { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* Sidebar */
.rc-account-sidebar { position: sticky; top: 100px; }

/* Nav card */
.rc-account-nav {
  background: var(--rc-surface);
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius-lg);
  overflow: hidden;
}

/* Nav section header */
.rc-account-nav__header {
  padding: 0.75rem 1.25rem 0.625rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rc-muted);
  border-bottom: 1px solid var(--rc-border);
}

/* Nav list */
.rc-account-nav__list { list-style: none; padding: 0.5rem 0.625rem; margin: 0; }
.rc-account-nav__item { margin: 0; list-style: none; }
.rc-account-nav__item::marker,
.rc-account-nav__item::before { display: none; content: none; }
.rc-account-nav__link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.6rem 0.875rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--rc-text);
  text-decoration: none;
  border-radius: var(--rc-radius);
  transition: background 160ms, color 160ms;
  position: relative;
}
.rc-account-nav__label { flex: 1; }
.rc-account-nav__icon {
  color: var(--rc-muted);
  flex-shrink: 0;
  transition: color 160ms, transform 160ms;
}
.rc-account-nav__chevron {
  color: var(--rc-border);
  flex-shrink: 0;
  transition: color 160ms, transform 160ms;
  opacity: 0;
}
.rc-account-nav__link:hover .rc-account-nav__chevron { opacity: 1; }

/* Hover state */
.rc-account-nav__link:hover {
  background: var(--rc-surface);
  color: var(--rc-text);
}
.rc-account-nav__link:hover .rc-account-nav__icon { color: var(--rc-primary); }
.rc-account-nav__link:hover .rc-account-nav__chevron { color: var(--rc-muted); }

/* Active state — filled pill */
.rc-account-nav__link--active,
.rc-account-nav__item.is-active .rc-account-nav__link {
  background: var(--rc-primary);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--rc-primary) 40%, transparent);
}
.rc-account-nav__link--active .rc-account-nav__icon,
.rc-account-nav__item.is-active .rc-account-nav__icon { color: #fff; }
.rc-account-nav__link--active .rc-account-nav__chevron,
.rc-account-nav__item.is-active .rc-account-nav__chevron { color: rgba(255,255,255,0.6); opacity: 1; }
.rc-account-nav__link--active:hover,
.rc-account-nav__item.is-active .rc-account-nav__link:hover { background: var(--rc-primary); opacity: 0.92; }

/* Logout */
.rc-account-nav__item--logout {
  border-top: 1px solid var(--rc-border);
  margin-top: 0.5rem;
  padding-top: 0.375rem;
}
.rc-account-nav__item--logout .rc-account-nav__link { color: var(--rc-muted); }
.rc-account-nav__item--logout .rc-account-nav__link:hover {
  background: #fef2f2;
  color: #ef4444;
}
.rc-account-nav__item--logout .rc-account-nav__link:hover .rc-account-nav__icon { color: #ef4444; }

/* Content area */
.rc-account-content { min-width: 0; }
.rc-account-content h2 {
  font-size: 1.1875rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--rc-border);
}
.rc-account-content h3 { font-size: 0.9375rem; font-weight: 700; margin: 1.5rem 0 0.75rem; }

/* WC account tables */
.woocommerce-account table.shop_table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius);
  overflow: hidden;
}
.woocommerce-account table.shop_table th {
  text-align: left;
  padding: 0.625rem 1rem;
  background: var(--rc-surface);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rc-muted);
  border-bottom: 1px solid var(--rc-border);
}
.woocommerce-account table.shop_table td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--rc-border);
  vertical-align: middle;
}
.woocommerce-account table.shop_table tbody tr:last-child td { border-bottom: none; }
.woocommerce-account table.shop_table .woocommerce-orders-table__cell-order-actions a,
.woocommerce-account table.shop_table tfoot .button {
  display: inline-block;
  padding: 0.375rem 0.875rem;
  border: 1.5px solid var(--rc-border);
  border-radius: var(--rc-radius);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--rc-text);
  font-family: var(--rc-font);
  transition: background 150ms, border-color 150ms, color 150ms;
}
.woocommerce-account table.shop_table .woocommerce-orders-table__cell-order-actions a:hover,
.woocommerce-account table.shop_table tfoot .button:hover {
  background: var(--rc-primary);
  border-color: var(--rc-primary);
  color: var(--rc-btn-text);
}

/* Account forms — WC's own CSS only cards form.login/form.register/form.checkout_coupon
   by coincidence (hardcoded lavender border that ignores color-skin swaps), and never
   covers .woocommerce-ResetPassword at all. Replace with theme-token-driven styling so
   every account form (login, register, lost password, edit account) matches and follows
   the active color skin. */
.woocommerce-account form.login,
.woocommerce-account form.register,
.woocommerce-account form.checkout_coupon,
.woocommerce-account .woocommerce-ResetPassword,
.woocommerce-account .woocommerce-EditAccountForm {
  border: 1px solid var(--rc-border) !important;
  border-radius: var(--rc-radius-lg) !important;
  padding: 1.5rem !important;
  margin: 0 !important;
  background: var(--rc-surface, var(--rc-white)) !important;
}
.woocommerce-account .woocommerce-ResetPassword > p:first-child {
  margin-top: 0;
  color: var(--rc-muted);
  font-size: 0.9375rem;
}

.woocommerce-account fieldset { border: 1px solid var(--rc-border); border-radius: var(--rc-radius); padding: 1.25rem; margin: 1.5rem 0; }
.woocommerce-account fieldset legend { font-weight: 700; font-size: 0.9375rem; padding: 0 0.5rem; }
.woocommerce-account .woocommerce-form-row,
.woocommerce-account p.form-row { margin-bottom: 1rem; }
.woocommerce-account .woocommerce-form-row label,
.woocommerce-account p.form-row label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.375rem;
  color: var(--rc-muted);
}
.woocommerce-account .woocommerce-form-row input[type="text"],
.woocommerce-account .woocommerce-form-row input[type="email"],
.woocommerce-account .woocommerce-form-row input[type="password"],
.woocommerce-account .woocommerce-form-row input[type="tel"],
.woocommerce-account p.form-row input[type="text"],
.woocommerce-account p.form-row input[type="email"],
.woocommerce-account p.form-row input[type="password"],
.woocommerce-account p.form-row input[type="tel"] {
  display: block;
  width: 100%;
  height: 44px;
  padding: 0 0.875rem;
  border: 1.5px solid var(--rc-border);
  border-radius: var(--rc-radius);
  font-family: var(--rc-font);
  font-size: 0.9375rem;
  background: var(--rc-surface);
  color: var(--rc-text);
  outline: none;
  transition: border-color 150ms;
  box-sizing: border-box;
}
.woocommerce-account .woocommerce-form-row input:focus,
.woocommerce-account p.form-row input:focus { border-color: var(--rc-primary); }
.woocommerce-account .woocommerce-Button,
.woocommerce-account .button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  height: 44px !important;
  padding: 0 1.5rem !important;
  background: var(--rc-primary) !important;
  color: var(--rc-btn-text) !important;
  border: none !important;
  border-radius: var(--rc-radius) !important;
  font-family: var(--rc-font) !important;
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  width: auto !important;
  line-height: 1 !important;
  transition: opacity 150ms !important;
  box-sizing: border-box !important;
}
.woocommerce-account .woocommerce-Button:hover,
.woocommerce-account .button:hover { opacity: 0.85 !important; color: var(--rc-btn-text) !important; }

/* Address grid */
/* Suppress clearfix pseudo-elements — they become ghost grid items and break column placement */
.woocommerce-account .woocommerce-Addresses::before,
.woocommerce-account .woocommerce-Addresses::after { display: none; }
.woocommerce-account .woocommerce-Addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 599px) { .woocommerce-account .woocommerce-Addresses { grid-template-columns: 1fr; } }
.woocommerce-account .woocommerce-Address {
  background: var(--rc-surface);
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius-lg);
  padding: 1.5rem;
  width: 100% !important; /* override WC's width: 48% which breaks grid column sizing */
  float: none !important;
}
.woocommerce-account .woocommerce-Address-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.875rem;
}
.woocommerce-account .woocommerce-Address-title h3 { margin: 0; font-size: 0.9375rem; font-weight: 700; }
.woocommerce-account .woocommerce-Address-title a {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--rc-primary);
  text-decoration: none;
}
.woocommerce-account address { font-style: normal; font-size: 0.9375rem; line-height: 1.7; color: var(--rc-text); }

/* =============================================================================
   21. ORDER THANK YOU
   ============================================================================= */

.rc-thankyou { max-width: 680px; margin: 3rem auto 5rem; padding: 0 1rem; }

/* Header */
.rc-thankyou__header { text-align: center; margin-bottom: 2.5rem; }
.rc-thankyou__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  background: var(--rc-success);
  border-radius: 9999px;
  color: #fff;
  margin-bottom: 1.25rem;
}
.rc-thankyou__title { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.03em; margin: 0 0 0.625rem; }
.rc-thankyou__subtitle { color: var(--rc-muted); font-size: 0.9375rem; margin: 0; }

/* Meta strip */
.rc-thankyou__meta-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: var(--rc-surface);
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius-lg);
  overflow: hidden;
  margin-bottom: 2rem;
}
@media (max-width: 599px) { .rc-thankyou__meta-strip { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px) {
  /* Top-row items need a bottom divider; right-column items have no right border to show */
  .rc-thankyou__meta-item:nth-child(1),
  .rc-thankyou__meta-item:nth-child(2) { border-bottom: 1px solid var(--rc-border); }
  .rc-thankyou__meta-item:nth-child(2n) { border-right: none; }
}
.rc-thankyou__meta-item {
  padding: 1.125rem 1rem;
  border-right: 1px solid var(--rc-border);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.rc-thankyou__meta-item:last-child { border-right: none; }
.rc-thankyou__meta-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--rc-muted); }
.rc-thankyou__meta-value { font-size: 0.9375rem; font-weight: 700; }
.rc-thankyou__meta-value--total { color: var(--rc-primary); }

/* Items */
.rc-thankyou__items {
  background: var(--rc-surface);
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius-lg);
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.rc-thankyou__section-title {
  font-size: 0.8125rem !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--rc-muted);
  padding: 0.875rem 1.25rem;
  margin: 0;
  border-bottom: 1px solid var(--rc-border);
  background: var(--rc-surface);
}
.rc-thankyou__item-list { list-style: none; padding: 0; margin: 0; }
.rc-thankyou__item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--rc-border);
}
.rc-thankyou__item:last-child { border-bottom: none; }
.rc-thankyou__item-img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--rc-radius);
  flex-shrink: 0;
  border: 1px solid var(--rc-border);
}
.rc-thankyou__item-img--placeholder {
  background: var(--rc-border);
}
.rc-thankyou__item-info { flex: 1; display: flex; flex-direction: column; gap: 0.2rem; }
.rc-thankyou__item-name { font-size: 0.9375rem; font-weight: 600; }
.rc-thankyou__item-qty { font-size: 0.8125rem; color: var(--rc-muted); }
.rc-thankyou__item-price { font-size: 0.9375rem; font-weight: 700; white-space: nowrap; }

/* Totals table */
.rc-thankyou__totals { width: 100%; border-collapse: collapse; }
.rc-thankyou__totals th,
.rc-thankyou__totals td {
  padding: 0.625rem 1.25rem;
  text-align: right;
  font-size: 0.875rem;
}
.rc-thankyou__totals th { text-align: left; color: var(--rc-muted); font-weight: 500; }
.rc-thankyou__totals-grand th,
.rc-thankyou__totals-grand td {
  font-size: 1rem;
  font-weight: 700;
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
  border-top: 1px solid var(--rc-border);
}

/* Addresses */
.rc-thankyou__addresses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 499px) { .rc-thankyou__addresses { grid-template-columns: 1fr; } }
.rc-thankyou__address {
  background: var(--rc-surface);
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius-lg);
  overflow: hidden;
}
.rc-thankyou__address address {
  font-style: normal;
  font-size: 0.875rem;
  line-height: 1.7;
  padding: 1rem 1.25rem;
}

/* CTAs */
.rc-thankyou__actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2rem;
}

/* Fallback */
.rc-thankyou--fallback { text-align: center; padding: 4rem 0; }
.rc-thankyou__fallback-msg { font-size: 1.125rem; margin-bottom: 1.5rem; }

/* BACS (Direct Bank Transfer) payment details */
.woocommerce-bacs-bank-details {
  background: var(--rc-surface);
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius-lg);
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.wc-bacs-bank-details-heading {
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--rc-muted) !important;
  padding: 0.875rem 1.25rem;
  margin: 0 !important;
  border-bottom: 1px solid var(--rc-border);
  background: var(--rc-surface);
}
.wc-bacs-bank-details-account-name {
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  padding: 1rem 1.25rem 0.25rem !important;
  margin: 0 !important;
}
ul.wc-bacs-bank-details.order_details.bacs_details {
  list-style: none;
  margin: 0;
  padding: 0.5rem 1.25rem 1.25rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 1rem;
}
ul.wc-bacs-bank-details.order_details.bacs_details::before,
ul.wc-bacs-bank-details.order_details.bacs_details::after { display: none; }
ul.wc-bacs-bank-details li {
  font-size: 0.8125rem;
  color: var(--rc-muted);
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
ul.wc-bacs-bank-details li {
  border-right: none !important;
  border-bottom: none !important;
  padding: 0 !important;
}
ul.wc-bacs-bank-details li strong {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--rc-text);
  overflow-wrap: break-word;
  word-break: break-word;
}

/* =============================================================================
   22. 404 PAGE
   ============================================================================= */

.rc-404-main {
  min-height: 70vh;
  display: flex;
  align-items: center;
}
.rc-404 {
  text-align: center;
  padding: 5rem 1rem;
  max-width: 560px;
  margin: 0 auto;
}
.rc-404__code {
  font-size: clamp(5rem, 20vw, 10rem);
  font-weight: 800;
  line-height: 1;
  color: var(--rc-border);
  letter-spacing: -0.04em;
  margin-bottom: 0.25rem;
}
.rc-404__title {
  font-size: clamp(1.375rem, 3vw, 1.875rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 0.875rem;
}
.rc-404__desc {
  color: var(--rc-muted);
  font-size: 1rem;
  margin: 0 0 2rem;
}
.rc-404__actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}
.rc-404__search {
  display: flex;
  gap: 0.5rem;
  max-width: 440px;
  margin: 0 auto;
}
.rc-404__search-input {
  flex: 1;
  height: 44px;
  padding: 0 0.875rem;
  border: 1.5px solid var(--rc-border);
  border-radius: var(--rc-radius);
  font-family: var(--rc-font);
  font-size: 0.9375rem;
  background: var(--rc-surface);
  color: var(--rc-text);
  outline: none;
  transition: border-color 150ms;
}
.rc-404__search-input:focus { border-color: var(--rc-primary); }

/* =============================================================================
   28. COMMENTS
   ============================================================================= */

/* Outer wrapper */
.rc-comments {
  padding: clamp(3rem, 6vw, 5rem) 0;
  border-top: 1px solid var(--rc-border);
}

/* Titles */
.rc-comments__title {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 1.75rem;
}
.rc-comment-form__title {
  font-size: 1.125rem;
  font-weight: 700;
  margin: 2.5rem 0 1.25rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rc-border);
}

/* Comment list */
.rc-comment-list {
  list-style: none;
  padding: 0;
  margin: 0 0 2.5rem;
}
.rc-comment-list .children {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0 3.5rem;
  border-left: 3px solid var(--rc-border);
  padding-left: 1.5rem;
}
@media (max-width: 599px) {
  .rc-comment-list .children { margin-left: 1rem; padding-left: 1rem; }
}

/* Single comment item */
.rc-comment {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--rc-border);
}
.rc-comment:last-child { border-bottom: none; }
.rc-comment--pingback { padding: 0.75rem 0; }

/* Comment body — avatar + content side by side */
.rc-comment__body {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

/* Avatar */
.rc-comment__avatar { flex-shrink: 0; }
.rc-comment__avatar-img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 2px solid var(--rc-border);
}

/* Content column */
.rc-comment__content { flex: 1; min-width: 0; }

/* Meta: author + date + pending badge */
.rc-comment__meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.625rem;
}
.rc-comment__author { font-size: 0.9375rem; font-weight: 700; }
.rc-comment__time { font-size: 0.8125rem; color: var(--rc-muted); }
.rc-comment__pending {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  background: var(--rc-warning, #f59e0b);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 4px;
}

/* Comment text */
.rc-comment__text { font-size: 0.9375rem; line-height: 1.7; }
.rc-comment__text > p:first-child { margin-top: 0; }
.rc-comment__text > p:last-child  { margin-bottom: 0; }

/* Reply / edit actions */
.rc-comment__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.75rem;
}
.rc-comment__actions a,
.rc-comment__edit a {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--rc-primary);
  text-decoration: none;
  transition: opacity 150ms;
}
.rc-comment__actions a:hover,
.rc-comment__edit a:hover { opacity: 0.7; }

/* Pingback line */
.rc-comment__pingback {
  font-size: 0.875rem;
  color: var(--rc-muted);
  margin: 0;
}

/* Paginated comments nav */
.rc-comment-pagination {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 1.5rem 0;
  flex-wrap: wrap;
}
.rc-comment-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 0.5rem;
  border-radius: var(--rc-radius);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--rc-text);
  border: 1.5px solid var(--rc-border);
  transition: background 150ms, border-color 150ms, color 150ms;
}
.rc-comment-pagination .page-numbers:hover {
  background: var(--rc-surface);
  border-color: var(--rc-primary);
  color: var(--rc-primary);
}
.rc-comment-pagination .page-numbers.current {
  background: var(--rc-primary);
  border-color: var(--rc-primary);
  color: #fff;
}

/* System notices */
.rc-comments-password,
.rc-comments-closed {
  padding: 1rem 1.25rem;
  background: var(--rc-surface);
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius);
  font-size: 0.9375rem;
  color: var(--rc-muted);
  margin: 1.5rem 0;
}

/* Comment form wrapper + fields grid */
.rc-comment-form { margin-top: 0.5rem; }
.rc-comment-form__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 599px) {
  .rc-comment-form__fields { grid-template-columns: 1fr; }
}
.rc-comment-form__submit { margin-top: 1.25rem; display: flex; align-items: center; gap: 1rem; }

/* =============================================================================
   29. CHECKOUT LAYOUT  (overrides woocommerce/checkout/form-checkout.php)
   ============================================================================= */

/* Outer form — adds breathing room around the WC checkout form */
.rc-checkout-form {
  padding: 2.5rem 0 5rem;
}

/* Two-column grid: billing/shipping left, order summary right */
.rc-checkout-layout {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 2.5rem;
  align-items: start;
}
@media (max-width: 1023px) {
  .rc-checkout-layout { grid-template-columns: 1fr 340px; gap: 1.75rem; }
}
@media (max-width: 767px) {
  .rc-checkout-layout { grid-template-columns: 1fr; }
  /* Summary card floats above the form on mobile */
  .rc-checkout-layout__summary { order: -1; position: static; }
  /* Allow WC order review table to scroll horizontally if content is too wide */
  .rc-checkout-layout__summary { overflow-x: auto; }
  .rc-checkout-layout .shop_table,
  .rc-checkout-layout table { min-width: 0; width: 100%; word-break: break-word; }
}

/* Left column */
.rc-checkout-layout__fields { min-width: 0; }

/* Right column — sticky so it scrolls with the page but stays visible */
.rc-checkout-layout__summary {
  min-width: 0;
  position: sticky;
  top: calc(var(--rc-header-h, 64px) + 1.5rem);
}

/* Wrap the WC order review in a card.
   #order_review and .rc-checkout-layout__summary are the SAME element in form-checkout.php,
   so the selector must target the summary itself, not a descendant. */
.rc-checkout-layout__summary {
  background: var(--rc-surface);
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius-lg);
  padding: 1.5rem;
}

/* Additional notes field area */
.rc-checkout-notes {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rc-border);
}

/* WC checkout validation states */
.woocommerce-checkout .form-row.woocommerce-invalid input[type="text"],
.woocommerce-checkout .form-row.woocommerce-invalid input[type="email"],
.woocommerce-checkout .form-row.woocommerce-invalid input[type="tel"],
.woocommerce-checkout .form-row.woocommerce-invalid select,
.woocommerce-checkout .form-row.woocommerce-invalid textarea {
  border-color: var(--rc-error, #ef4444) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12) !important;
}
.woocommerce-checkout .form-row.woocommerce-validated input[type="text"],
.woocommerce-checkout .form-row.woocommerce-validated input[type="email"],
.woocommerce-checkout .form-row.woocommerce-validated input[type="tel"],
.woocommerce-checkout .form-row.woocommerce-validated select {
  border-color: var(--rc-success, #22c55e) !important;
}
.woocommerce-checkout .form-row .woocommerce-error,
.woocommerce-checkout .form-row .woocommerce-invalid-required-field { font-size: 0.8125rem; color: var(--rc-error, #ef4444); margin-top: 0.25rem; }

/* =============================================================================
   29b. CHECKOUT — WooCommerce Blocks checkout (the live Checkout page uses the
   woocommerce/checkout block, not form-checkout.php above). Edit-cart link +
   per-item remove button injected by RCCheckoutCartSync in app.js.
   ============================================================================= */

.rc-checkout-edit-link {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.75rem;
}
.rc-checkout-edit-link a {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--rc-muted);
  text-decoration: none;
  padding: 0.375rem 0.25rem;
  transition: color 150ms;
}
.rc-checkout-edit-link a:hover { color: var(--rc-primary); text-decoration: underline; }
.rc-checkout-edit-link svg { flex-shrink: 0; }

.wc-block-components-order-summary-item { position: relative; }
.rc-order-item-remove {
  position: absolute;
  top: 0;
  right: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--rc-muted);
  cursor: pointer;
  transition: background 150ms, color 150ms, opacity 150ms;
}
.rc-order-item-remove:hover { background: var(--rc-surface); color: var(--rc-error, #ef4444); }
.rc-order-item-remove:disabled { opacity: 0.4; cursor: default; }
.rc-order-item-remove svg { pointer-events: none; }

/* Checkout "cart is now empty" state — stock WooCommerce Blocks markup
   (.wc-block-checkout-empty), never restyled before; used the browser's raw
   button-block styling (dark rectangle, underlined text). */
.wc-block-checkout-empty {
  text-align: center;
  padding: 4rem 1.5rem;
  max-width: 460px;
  margin: 0 auto;
}
.wc-block-checkout-empty__image {
  color: var(--rc-muted);
  opacity: 0.5;
  margin-bottom: 1.25rem;
}
.wc-block-checkout-empty__title {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--rc-text);
  margin-bottom: 0.625rem;
}
.wc-block-checkout-empty__description {
  color: var(--rc-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
  margin: 0 0 1.75rem;
}
.wc-block-checkout-empty .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 1.75rem;
  border-radius: var(--rc-radius);
  background: var(--rc-primary);
  color: #fff;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: opacity 150ms;
}
.wc-block-checkout-empty .wp-block-button__link:hover { opacity: 0.88; text-decoration: none; }

/* =============================================================================
   29c. BLOCK RESPONSIVE VISIBILITY  (inc/block-visibility.php)
   ============================================================================= */
@media (min-width: 1024px) {
  .rc-hide-desktop { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .rc-hide-tablet { display: none !important; }
}
@media (max-width: 767px) {
  .rc-hide-mobile { display: none !important; }
}

/* =============================================================================
   30. UTILITIES & HERO VARIANT FIXES
   ============================================================================= */

/* rc-textarea — textarea counterpart to rc-input, used in comment form + any freetext field */
.rc-textarea {
  display: block;
  width: 100%;
  padding: 0.75rem 0.875rem;
  border: 1.5px solid var(--rc-border);
  border-radius: 8px;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--rc-text);
  background: var(--rc-white);
  transition: border-color 200ms, box-shadow 200ms;
  outline: none;
  -webkit-appearance: none;
  resize: vertical;
  min-height: 120px;
  line-height: 1.6;
  box-sizing: border-box;
}
.rc-textarea:focus {
  border-color: var(--rc-primary);
  box-shadow: 0 0 0 3px rgba(var(--rc-primary-rgb), 0.12);
}

/* Hero fullwidth — centre the text over the bg image */
.rc-hero--fullwidth .rc-hero__inner {
  justify-content: center;
  text-align: center;
}
.rc-hero--fullwidth .rc-hero__content {
  align-items: center;
  max-width: 700px;
}
.rc-hero--fullwidth .rc-hero__actions { justify-content: center; }

/* Hero split — ensure bg image is anchored to the right on desktop */
.rc-hero--split .rc-hero__bg { background-position: center right; }

/* rc-hero on homepage — taller min-height than shortcode hero */
.rc-home-hero.rc-hero--fullwidth { min-height: 85vh; }
.rc-home-hero.rc-hero--split     { min-height: 75vh; }

/* Ensure hero badge is always visible on dark overlays */
.rc-hero--overlay .rc-hero__badge,
.rc-hero--fullwidth .rc-hero__badge {
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
}

/* =============================================================================
   31. SELECT2 OVERRIDES  (WooCommerce uses Select2 for country/state dropdowns)
   ============================================================================= */

/* Container */
.select2-container { width: 100% !important; }
.select2-container--default .select2-selection--single {
  height: 44px !important;
  border: 1.5px solid var(--rc-border) !important;
  border-radius: 8px !important;
  background: var(--rc-white) !important;
  color: var(--rc-text) !important;
  outline: none !important;
  transition: border-color 200ms, box-shadow 200ms !important;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--rc-primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--rc-primary-rgb), 0.12) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  height: 44px !important;
  line-height: 44px !important;
  padding: 0 2.25rem 0 0.875rem !important;
  font-family: var(--rc-font) !important;
  font-size: 0.9375rem !important;
  color: var(--rc-text) !important;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--rc-muted) !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 42px !important;
  right: 0.625rem !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--rc-muted) transparent transparent transparent !important;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent var(--rc-muted) transparent !important;
}

/* Dropdown */
.select2-dropdown {
  border: 1.5px solid var(--rc-border) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1) !important;
  background: var(--rc-white) !important;
  overflow: hidden !important;
  margin-top: 2px !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1.5px solid var(--rc-border) !important;
  border-radius: 6px !important;
  padding: 0.5rem 0.75rem !important;
  font-family: var(--rc-font) !important;
  font-size: 0.875rem !important;
  outline: none !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--rc-primary) !important;
}

/* Options */
.select2-results__option {
  padding: 0.6rem 0.875rem !important;
  font-family: var(--rc-font) !important;
  font-size: 0.9375rem !important;
  cursor: pointer !important;
  transition: background 100ms !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
  background: var(--rc-surface) !important;
  color: var(--rc-primary) !important;
}
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"] {
  background: var(--rc-primary) !important;
  color: #fff !important;
}

/* Woocommerce invalid state */
.woocommerce-checkout .form-row.woocommerce-invalid .select2-container--default .select2-selection--single {
  border-color: var(--rc-error, #ef4444) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12) !important;
}

/* =============================================================================
   32. WOOCOMMERCE SHIPPING METHODS  (cart & checkout)
   ============================================================================= */

/* Shipping table in cart totals */
.woocommerce-shipping-calculator { margin-top: 1rem; }
.woocommerce-shipping-calculator h2 a,
.woocommerce-shipping-calculator .shipping-calculator-button {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--rc-primary);
  text-decoration: none;
  cursor: pointer;
}
.woocommerce-shipping-calculator h2 a:hover,
.woocommerce-shipping-calculator .shipping-calculator-button:hover { opacity: 0.75; }

/* Shipping method radio list */
.woocommerce-shipping-methods {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.woocommerce-shipping-methods li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
}
.woocommerce-shipping-methods input[type="radio"] { accent-color: var(--rc-primary); width: 16px; height: 16px; flex-shrink: 0; cursor: pointer; }
.woocommerce-shipping-methods label { cursor: pointer; font-weight: 500; flex: 1; }
.woocommerce-shipping-methods .woocommerce-Price-amount { font-weight: 700; }

/* "No shipping options" notice */
.woocommerce-no-shipping-available { font-size: 0.9375rem; color: var(--rc-muted); padding: 0.5rem 0; }

/* Checkout shipping section layout */
.woocommerce-checkout .woocommerce-shipping-fields {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rc-border);
}

/* "Ship to different address?" checkbox */
.woocommerce-checkout .woocommerce-shipping-fields #ship-to-different-address {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 1.25rem;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9375rem;
}
.woocommerce-checkout .woocommerce-shipping-fields #ship-to-different-address input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--rc-primary);
  flex-shrink: 0;
  cursor: pointer;
}

/* Checkout coupon toggle notice */
.woocommerce-checkout .woocommerce-form-coupon-toggle { margin-bottom: 1rem; }
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info { cursor: default; }
.woocommerce-checkout .woocommerce-form-coupon {
  background: var(--rc-surface);
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}
.woocommerce-checkout .woocommerce-form-coupon .form-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: flex-end;
  margin: 0;
}
.woocommerce-checkout .woocommerce-form-coupon .form-row p { margin: 0 0 0.75rem; font-size: 0.9375rem; color: var(--rc-muted); }
.woocommerce-checkout .woocommerce-form-coupon .form-row input[type="text"] { flex: 1; min-width: 180px; }
.woocommerce-checkout .woocommerce-form-coupon .button {
  height: 44px;
  padding: 0 1.25rem;
  background: var(--rc-primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: var(--rc-font);
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 150ms;
}

/* ── 33. QA FIXES ──────────────────────────────────────────────────────────── */

/* WC Blocks checkout — Place Order button uses primary color */
.wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-checkout .wc-block-components-button.contained {
  background-color: var(--rc-primary) !important;
  border-color: var(--rc-primary) !important;
}
.wc-block-components-checkout-place-order-button:hover,
.wp-block-woocommerce-checkout .wc-block-components-button.contained:hover {
  background-color: var(--rc-primary-dk, var(--rc-primary)) !important;
  border-color: var(--rc-primary-dk, var(--rc-primary)) !important;
  opacity: 0.92;
}

/* WC Blocks checkout Order Summary — hide product short description */
.wc-block-components-product-metadata__description { display: none; }

/* Product thumbnail strip — horizontal scroll instead of wrapping */
.rc-single__thumbs {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  /* min-width:0 is required: without it a flex/grid child won't constrain its
     own flex children, letting the nowrap strip overflow the document body. */
  min-width: 0;
  width: 100%;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x mandatory;
  padding-bottom: 2px;
}
.rc-single__thumbs::-webkit-scrollbar { display: none; }
.rc-single__thumb { scroll-snap-align: start; flex-shrink: 0; }

/* Search result price — del styling */
.rc-search-item__price del {
  text-decoration: line-through;
  opacity: 0.55;
  font-size: 0.8em;
  margin-right: 0.25em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   23. INTERACTIONS, ANIMATIONS & APP-LIKE FEEL
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Product drawer: scroll-driven continuous expansion ────────────────────── */
/* Height, width, and border-radius driven pixel-by-pixel via JS (CSS custom props).
   Open/close animation: transform scale bloom (Section 5153 base). */
.rc-pd {
    height: var(--rc-pd-h, 55dvh);
    max-height: none;
    border-radius: var(--rc-pd-br, 1.5rem 1.5rem 0 0);
    /* 80ms ease-out smooths discrete wheel steps without visible lag */
    transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1),
                height        80ms ease-out,
                width         80ms ease-out,
                border-radius 80ms ease-out;
}
/* Desktop: also expand width 85vw → 100vw as drawer expands */
@media (min-width: 768px) {
    .rc-pd { width: var(--rc-pd-w, 85vw); }
}
.rc-pd--full { border-radius: 0 !important; }
@media (max-width: 767px) {
    .rc-pd { height: var(--rc-pd-h, 60dvh); }
}

/* Drag handle — more prominent on the product drawer */
.rc-pd__drag-handle {
    width: 48px;
    height: 5px;
    background: var(--rc-border);
    border-radius: 3px;
    margin: 10px auto 6px;
    cursor: grab;
    flex-shrink: 0;
}

/* ── Fly-to-cart clone ─────────────────────────────────────────────────────── */
.rc-fly-clone {
    position: fixed;
    z-index: 99999;
    pointer-events: none;
    border-radius: 10px;
    overflow: hidden;
    will-change: transform, opacity;
}

/* ── Contextual focus: card grid hover dimming ─────────────────────────────── */
.rc-product-grid { --rc-card-opacity: 1; }
.rc-product-grid .rc-card {
    transition: opacity 220ms ease, filter 220ms ease, transform 220ms ease;
    will-change: opacity, filter;
}
@media (hover: hover) {
    .rc-product-grid:has(.rc-card:hover) .rc-card:not(:hover) {
        opacity: 0.55;
        filter: blur(0.6px);
        transform: scale(0.99);
    }
}

/* ── Contextual focus: dim main when any overlay is open ──────────────────── */
/* will-change here is opacity-only, not transform — `will-change: transform`
   (like an actual `transform`) makes #rc-main a containing block for its
   position:fixed descendants (e.g. the mobile shop filter drawer), which
   breaks their viewport-relative fixed positioning at all times, not just
   while an overlay is open. Scoping `transform` into the .rc-body--any-open
   variant keeps the perf hint only while it's actually needed. */
#rc-main {
    transition: opacity 280ms ease, transform 280ms ease;
    will-change: opacity;
}
.rc-body--any-open #rc-main {
    opacity: 0.82;
    transform: scale(0.992);
    pointer-events: none;
    will-change: opacity, transform;
}

/* Cart specifically: subtle content push */
.rc-body--cart-open #rc-main {
    transform: scale(0.988) translateX(-6px);
}

/* When any drawer/panel is open, keep the header solid and above the backdrop
   so the FlyHeart ATC animation target (cart icon) is never blurred or obscured.
   The glass header variant has a transparent background that picks up the
   backdrop-filter blur behind it; forcing it opaque + stripping its own
   backdrop-filter ensures the cart icon always lands cleanly.
   z-index 600 > backdrop (498) guarantees visibility across all browsers. */
.rc-body--any-open #rc-header {
    background: var(--rc-surface) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    z-index: 600;
}

/* ── Page exit transition ──────────────────────────────────────────────────── */
.rc-page-exit #rc-main {
    opacity: 0 !important;
    transform: scale(0.96) !important;
    transition: opacity 260ms ease, transform 260ms ease !important;
    pointer-events: none !important;
}

/* View Transitions API — smooth cross-page animation (Chrome 111+) */
@keyframes rc-vt-fade-in  { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } }
@keyframes rc-vt-fade-out { from { opacity: 1; transform: scale(1);    } to { opacity: 0; transform: scale(0.97); } }

@supports (view-transition-name: none) {
    ::view-transition-old(root) { animation: 260ms ease both rc-vt-fade-out; }
    ::view-transition-new(root) { animation: 260ms ease both rc-vt-fade-in; }
}

/* ── Header morphs: fade logo/nav when search expands (hamburger stays visible) */
.rc-header--searching .rc-header__center,
.rc-header--searching .rc-header__logo--left {
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
}
.rc-header__center, .rc-header__logo--left {
    transition: opacity 200ms ease;
}

/* ── Inline toast notification (add-to-cart errors, buy-now errors) ─────────── */
.rc-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(16px);
    background: var(--rc-surface);
    border: 1px solid var(--rc-border);
    border-left: 4px solid var(--rc-primary);
    border-radius: 10px;
    padding: 0.6875rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--rc-text);
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    z-index: 99998;
    opacity: 0;
    transition: opacity 220ms ease, transform 220ms ease;
    white-space: nowrap;
    max-width: min(420px, 90vw);
}
.rc-toast--visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.rc-toast--error {
    border-left-color: #ef4444;
}

/* ── Star rating: amber, independent of brand color ─────────────────────────── */
.rc-card__stars { color: #f59e0b; }

/* ── Swiper controls: themed to brand ──────────────────────────────────────── */
.rc-product-carousel {
    --swiper-navigation-color: var(--rc-primary);
    --swiper-pagination-color: var(--rc-primary);
    --swiper-navigation-size:  20px;
}
.rc-product-carousel .swiper-pagination-bullet {
    background: var(--rc-border);
    opacity: 1;
}
.rc-product-carousel .swiper-pagination-bullet-active {
    background: var(--rc-primary);
    transform: scale(1.25);
    transition: transform 200ms ease, background 200ms ease;
}

/* ── Category card fallback placeholder ─────────────────────────────────────── */
.rc-cat-card:not(:has(img)) .rc-cat-card__img-wrap,
.rc-cat-card--no-image .rc-cat-card__img-wrap {
    background: linear-gradient(135deg, var(--rc-primary) 0%, color-mix(in srgb, var(--rc-primary) 60%, white) 100%);
}

/* ── Back to Top button ──────────────────────────────────────────────────────── */
.rc-back-to-top {
    position: fixed;
    bottom: 5rem;
    right: 1.5rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--rc-surface);
    border: 1px solid var(--rc-border);
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--rc-text);
    z-index: 900;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 250ms ease, transform 250ms ease, background 150ms, box-shadow 150ms;
    pointer-events: none;
}
.rc-back-to-top--visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.rc-back-to-top:hover {
    background: var(--rc-primary);
    color: #fff;
    border-color: var(--rc-primary);
    box-shadow: 0 8px 24px rgba(0,0,0,0.16);
}
@media (max-width: 1023px) {
    .rc-back-to-top {
        left: 50%;
        right: auto;
        bottom: calc(60px + env(safe-area-inset-bottom, 0px) + 76px);
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: var(--rc-surface);
        border: 1px solid var(--rc-border);
        box-shadow: 0 4px 20px rgba(0,0,0,0.15);
        z-index: 390;
        opacity: 0;
        transform: translateX(-50%) scale(0.82);
        pointer-events: none;
    }
    .rc-back-to-top--visible {
        opacity: 1;
        transform: translateX(-50%) scale(1);
        pointer-events: auto;
    }
    .rc-back-to-top:hover {
        background: var(--rc-primary);
        color: var(--rc-btn-text);
        border-color: var(--rc-primary);
        box-shadow: 0 8px 24px rgba(0,0,0,0.20);
    }
    .rc-back-to-top svg { width: 22px; height: 22px; }
}

/* ── Reduce motion: disable all custom animations ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .rc-fly-clone,
    .rc-pd,
    .rc-toast,
    #rc-main,
    .rc-back-to-top,
    .rc-product-grid .rc-card { transition: none !important; animation: none !important; }
    .rc-body--any-open #rc-main { opacity: 1; transform: none; }
}
.woocommerce-checkout .woocommerce-form-coupon .button:hover { opacity: 0.85; }

/* ═══════════════════════════════════════════════════════════════════════════
   24. HEADER VARIANT C — INLINE (logo left, full menu inline + mega panel)
   Collapses to the shared hamburger/mobile-drawer at the same 1024px
   breakpoint nav-flyout.php already uses for variants A/B (see §8a above) —
   kept consistent rather than introducing a second breakpoint value.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Inline layout ─────────────────────────────────────────────────────────── */
.rc-header__inner--inline {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1.25rem;
    /* position: static — mega panels anchor to parent <header> which is position:sticky */
}
.rc-header__logo--left {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.rc-header__logo--left .custom-logo-link { display: flex; align-items: center; }
.rc-header__logo--left img,
.rc-header__logo--left .custom-logo {
    max-height: var(--rc-logo-h, 36px);
    width: auto;
}

/* ── Mobile hamburger — hidden on desktop, shown once the inline nav collapses ── */
.rc-header__mob-burger { display: none; }
@media (max-width: 1023px) {
    .rc-header__mob-burger { display: inline-flex; }
}

/* ── Inline nav container — same pill language as .rc-btn-icon/.rc-menu-pill:
   own background, radius and height at all times (not just when transparent),
   so contrast never depends on guessing whether the hero underneath is light
   or dark, and the group visually matches the search/account/cart buttons. ── */
.rc-header__inline-nav {
    display: flex;
    align-items: stretch;
    gap: 0.125rem;
    justify-content: center;
    position: static; /* panels positioned from rc-header */
    height: 48px;
    padding: 0.25rem;
    background: color-mix(in srgb, var(--rc-surface) 92%, var(--rc-text));
    border-radius: var(--rc-radius-sm);
}
@media (max-width: 1023px) {
    .rc-header__inline-nav { display: none; }
}

/* ── Nav item wrapper — stretches full height so its link/button (and the
   hover/current background below) fills the whole pill height, not just a
   text-hugging rect floating inside it. ── */
.rc-inline-nav-item {
    position: relative;
    display: flex;
}

/* ── Shared link/button styles — same radius as .rc-btn-icon/.rc-menu-pill
   (var(--rc-radius-sm)) so the hover/current highlight's corners match the
   rest of the header instead of the previous, more-rounded pill shape. ── */
.rc-inline-nav-btn,
.rc-inline-nav-link {
    display: inline-flex;
    align-items: center;
    height: 100%;
    gap: 0.3rem;
    padding: 0 0.8rem;
    border-radius: var(--rc-radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--rc-text, #111);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
    line-height: 1;
}
/* Hover and current/active share one treatment — same color-mix formula
   .rc-btn-icon/.rc-menu-pill already use for their own :hover state, so it
   reads correctly against every pre-built color palette (including dark
   "midnight") without a separate override here. */
.rc-inline-nav-btn:hover,
.rc-inline-nav-link:hover,
.rc-inline-nav-btn[aria-expanded="true"],
.rc-inline-nav-link--current,
.rc-inline-nav-btn--current {
    background: color-mix(in srgb, var(--rc-surface) 82%, var(--rc-text));
    color: var(--rc-primary, #111);
}
.rc-inline-nav-link--current,
.rc-inline-nav-btn--current {
    font-weight: 600;
}

/* ── Chevron rotation on open ─────────────────────────────────────────────── */
.rc-inline-nav-chevron {
    transition: transform 0.2s ease;
    flex-shrink: 0;
    opacity: 0.6;
}
.rc-inline-nav-btn[aria-expanded="true"] .rc-inline-nav-chevron {
    transform: rotate(180deg);
    opacity: 1;
}

/* ── Mega panel — full-width, anchored to bottom of <header> ────────────── */
/* <header> is position:sticky → containing block for these absolute panels  */
.rc-header__mega-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--rc-white);
    border-top: 1px solid var(--rc-border, #e4e4e0);
    border-bottom: 1px solid var(--rc-border, #e4e4e0);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
    z-index: 800;
}
.rc-header { overflow: visible; }

.rc-header__mega-inner {
    padding: 2rem var(--rc-container-px, 1.5rem);
}

/* Transition classes for Alpine x-transition */
.rc-mega-enter {
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.rc-mega-enter-start {
    opacity: 0;
    transform: translateY(-6px);
}
.rc-mega-enter-end {
    opacity: 1;
    transform: translateY(0);
}

/* ── Mega panel: category image grid (menu_variant = mega) ───────────────── */
.rc-header__mega-cats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 1rem;
}
.rc-header__mega-cat {
    text-decoration: none;
    text-align: center;
    display: block;
}
.rc-header__mega-cat-img-wrap {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--rc-radius, 0.5rem);
    margin-bottom: 0.5rem;
    background: var(--rc-surface, #f5f5f3);
}
.rc-header__mega-cat-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease, opacity 0.2s ease;
}
.rc-header__mega-cat:hover .rc-header__mega-cat-img {
    transform: scale(1.05);
    opacity: 0.88;
}
.rc-header__mega-cat-name {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--rc-text, #111);
    letter-spacing: -0.01em;
}
.rc-header__mega-cat-count {
    display: block;
    font-size: 0.72rem;
    color: var(--rc-text-muted, #888);
    margin-top: 0.125rem;
}

/* ── Mega panel: link columns (menu_variant = flyout / submenu) ──────────── */
.rc-header__mega-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 1.5rem;
}
.rc-header__mega-links--grouped {
    gap: 1.5rem 2rem;
    flex-wrap: nowrap;
    overflow-x: auto;
}
.rc-header__mega-col {
    min-width: 140px;
}
.rc-header__mega-col-heading {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rc-text-muted, #888);
    margin-bottom: 0.625rem;
}
.rc-header__mega-col-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.rc-header__mega-col-list a,
.rc-header__mega-item {
    display: block;
    font-size: 0.875rem;
    font-weight: 450;
    color: var(--rc-text, #111);
    text-decoration: none;
    padding: 0.3rem 0.5rem;
    border-radius: calc(var(--rc-radius, 0.5rem) * 0.75);
    transition: background 0.12s ease, color 0.12s ease;
}
.rc-header__mega-col-list a:hover,
.rc-header__mega-item:hover {
    background: var(--rc-surface, #f5f5f3);
    color: var(--rc-primary, #111);
}

/* ── When mega panel is open: dim the backdrop ───────────────────────────── */
body:has(.rc-header__mega-panel[style*="display"]:not([style*="display: none"])) .rc-backdrop {
    opacity: 0.3;
    pointer-events: auto;
}

/* When nav panel is open, force header solid background */
.rc-header--nav-open.rc-header--transparent {
    background: var(--rc-surface);
    box-shadow: none;
}

/* ── Below 1024px: inline inner collapses to logo+burger left, icons right ── */
@media (max-width: 1023px) {
    .rc-header__inner--inline {
        grid-template-columns: auto auto;
        justify-content: space-between;
    }
    .rc-header__mega-panel { display: none !important; }
}

/* ── Logo + mobile hamburger group (inline header, tablet/mobile) ───────────
   Below 1024px the inline nav hides, so this becomes the header's whole left
   side: logo, then hamburger immediately to its right. ── */
.rc-header__logo-group {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-shrink: 0;
}

/* ── Search open, desktop only: fade the inline nav, keep the logo visible —
   .rc-header__logo--left is only used by the inline variant (see
   inline-menu.php); the shared .rc-header--searching fade rule above also
   hides it because that rule predates this variant and was written for a
   different (now-removed) header that needed its logo to fade too. Mobile/
   tablet is intentionally left matching that shared rule, unchanged. ── */
@media (min-width: 1024px) {
    .rc-header--searching .rc-header__logo--left {
        opacity: 1;
        pointer-events: auto;
    }
}

/* ── Submenu-level mega: break out of the link-column flex row to full width ──
   Used both in inline-menu.php's top-level panel (.rc-header__mega-col) and
   nav-flyout.php's sub-panel (.rc-nav-flyout__sub-group) when a CHILD item
   (not the panel's own parent) is individually flagged mega. */
.rc-header__mega-col--mega {
    flex: 1 0 100%;
}
.rc-header__mega-col--mega .rc-nav-mega__grid {
    margin-top: 0.625rem;
}
.rc-nav-flyout__sub-group--mega {
    flex: 1 0 100%;
}
.rc-nav-flyout__sub-group--mega .rc-nav-mega__grid {
    margin-top: 0.5rem;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
}

/* ═══════════════════════════════════════════════════════════════════════════
   25. QUALITY PASS — transitions, account dropdown, sticky cart, my account
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Curtain-style transitions for all drawers (upgrading 320ms ease-out) ── */
.rc-drawer {
    transition: transform 500ms cubic-bezier(0.32, 0.72, 0, 1) !important;
}

/* ── 2. Fix: product / quick-view drawer open → don't blur/scale main ──────── */
/* The drawer is nearly full-screen; blurring main underneath just causes flash */
.rc-body--drawer-open #rc-main {
    filter: none !important;
    transform: none !important;
}
.rc-body--drawer-open .rc-backdrop--active {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(0, 0, 0, 0.55) !important;
}

/* ── 3. Account panel: identical bloom to cart (scale 0→1 from top-right) ─────── */
@media (min-width: 768px) {
    #rc-account-panel.rc-drawer.rc-drawer--right {
        top: var(--rc-header-h, 64px) !important;
        right: max(var(--rc-container-px, 1.25rem), calc((100vw - var(--rc-container, 1280px)) / 2 + var(--rc-container-px, 1.25rem))) !important;
        height: auto !important;
        max-height: min(580px, calc(100dvh - var(--rc-header-h, 64px) - 1.5rem)) !important;
        width: 320px !important;
        overflow-y: auto;
        border-radius: 16px !important;
        border: 1px solid var(--rc-border) !important;
        box-shadow: 0 4px 6px rgba(0,0,0,0.04), 0 16px 48px rgba(0,0,0,0.12) !important;
        /* Bloom from single pixel at top-right — identical to cart */
        transform: scale(0) !important;
        transform-origin: top right !important;
        opacity: 0 !important;
        transition:
            opacity   220ms ease,
            transform 560ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
        pointer-events: none !important;
    }
    #rc-account-panel.rc-drawer.rc-drawer--right.rc-drawer--open {
        transform: scale(1) !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    .admin-bar #rc-account-panel.rc-drawer.rc-drawer--right {
        top: calc(var(--rc-header-h, 64px) + 32px) !important;
    }
    #rc-account-panel .rc-drawer__body { padding: 0.75rem 1rem 1.25rem; }
    #rc-account-panel .rc-auth-tabs    { margin-bottom: 0.75rem; }
}

/* ── 4. My Account nav: full rules live in section 24 ───────────────────── */
.rc-account-content { padding: 0; }

/* ── 5. Sticky Cart Bar ──────────────────────────────────────────────────────── */
.rc-sticky-cart {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 850;
    background: var(--rc-white);
    border-top: 1px solid var(--rc-border);
    box-shadow: 0 -2px 20px rgba(0,0,0,0.07), 0 -1px 4px rgba(0,0,0,0.04);
    transform: translateY(100%);
    transition: transform 420ms cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform;
    padding: 0.75rem 0;
    safe-area-inset-bottom: env(safe-area-inset-bottom);
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
}
.rc-sticky-cart--visible { transform: translateY(0); }
/* Hide on pages / states where cart is already prominent */
.rc-body--any-open .rc-sticky-cart,
.woocommerce-cart .rc-sticky-cart,
.woocommerce-checkout .rc-sticky-cart { display: none !important; }
/* On mobile the bottom nav handles cart access — no need for a second bar */
@media (max-width: 1023px) { .rc-sticky-cart { display: none !important; } }

.rc-sticky-cart__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.rc-sticky-cart__info {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
}
.rc-sticky-cart__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    background: var(--rc-primary);
    color: #fff;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}
.rc-sticky-cart__label {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--rc-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rc-sticky-cart__label--fallback { color: var(--rc-muted); font-weight: 500; }
.rc-sticky-cart__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
.rc-sticky-cart__view-btn {
    font-size: 0.875rem !important;
    padding: 0.5rem 0.875rem !important;
    border: 1.5px solid var(--rc-border-dark) !important;
    background: transparent !important;
    color: var(--rc-text) !important;
    border-radius: var(--rc-radius) !important;
    cursor: pointer !important;
    white-space: nowrap;
}
.rc-sticky-cart__view-btn:hover { border-color: var(--rc-primary) !important; color: var(--rc-primary) !important; }
.rc-sticky-cart__checkout-btn {
    font-size: 0.875rem !important;
    padding: 0.5rem 1.125rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.375rem !important;
    text-decoration: none !important;
    white-space: nowrap;
}
/* Push back-to-top above the sticky bar when visible */
.rc-sticky-cart--visible ~ .rc-back-to-top { bottom: 5.5rem; }
@media (max-width: 479px) {
    .rc-sticky-cart__view-btn { display: none; }
    .rc-sticky-cart__checkout-btn { flex: 1; justify-content: center !important; }
}

/* ── 6. Cat grid: columns 5 & 6 ─────────────────────────────────────────────── */
.rc-cat-grid--5 { grid-template-columns: repeat(5, 1fr); }
.rc-cat-grid--6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1023px) {
    .rc-cat-grid--5, .rc-cat-grid--6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
    .rc-cat-grid--5, .rc-cat-grid--6 { grid-template-columns: repeat(2, 1fr); }
}

/* ── 7. Inline search: Hyva-style — input grows leftward from icon position ──── */

/* Containing block for the absolute search bar */
.rc-search-wrap { position: relative; }

/* Header: solid background flashes in when search opens so bar blends seamlessly */
.rc-header { transition: background 180ms cubic-bezier(0.4, 0, 0.2, 1); }
.rc-header--searching { background: var(--rc-surface) !important; }

/* Logo + center section fade out so the expanding bar reveals cleanly */
.rc-header__logo,
.rc-header__center { transition: opacity 180ms cubic-bezier(0.4, 0, 0.2, 1); }
.rc-header--searching .rc-header__logo,
.rc-header--searching .rc-header__center { opacity: 0; pointer-events: none; }

/* Search icon: clean fade-only exit — no rotation */
.rc-search-btn { transition: opacity 220ms cubic-bezier(0.4, 0, 0.2, 1); }
.rc-header--searching .rc-search-btn { opacity: 0 !important; pointer-events: none !important; }

/* Expanding bar: width-only animation; desktop shows as white card */
.rc-search-inline {
    position: absolute;
    top: 0;
    right: 0;
    height: var(--rc-header-h, 64px);
    width: 0;
    overflow: hidden;
    pointer-events: none;
    background: transparent;
    display: flex;
    flex-direction: column;
    z-index: 10;
    transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.rc-search-inline--open {
    width: min(1000px, 65vw);
    pointer-events: auto;
}

/* Desktop: centred card, same size+position as results panel, reveals right→left */
@media (min-width: 768px) {
    .rc-search-inline {
        position: fixed;
        top: calc((var(--rc-header-h, 64px) - 48px) / 2);
        left: calc(50% - min(390px, 29vw));
        right: auto;
        width: min(780px, 58vw);
        height: 48px;
        background: var(--rc-white);
        border-radius: 12px;
        border: 1px solid var(--rc-border);
        box-shadow: 0 4px 16px rgba(0,0,0,0.10);
        overflow: visible;
        clip-path: inset(0 0 0 100% round 12px);
        transition: clip-path 320ms cubic-bezier(0.4, 0, 0.2, 1);
    }
    .rc-search-inline--open {
        clip-path: inset(0 0 0 0% round 12px);
        pointer-events: auto;
        width: min(780px, 58vw);
    }
}

/* Mobile: fixed full-width takeover */
@media (max-width: 767px) {
    .rc-search-inline {
        position: fixed;
        top: 0;
        right: 0;
        height: var(--rc-header-h, 64px);
        overflow: hidden; /* re-assert: ensures bar content is clipped when width=0 */
        background: var(--rc-surface);
        z-index: calc(var(--rc-z-header, 100) + 5);
        box-shadow: 0 1px 0 var(--rc-border);
    }
    .rc-search-inline--open { width: 100vw; }
}

/* Inner bar: full header height flex row, bottom border is the only decoration */
.rc-search-inline__bar {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    height: 100%;
    padding: 0 1rem;
    white-space: nowrap;
    flex-shrink: 0;
}
.rc-search-inline__lens { color: var(--rc-muted); flex-shrink: 0; }

/* Input: 16px, no border, no focus ring — matches Satoshi exactly */
.rc-search-inline__input {
    flex: 1;
    min-width: 0;
    border: none;
    background: none;
    outline: none;
    box-shadow: none;
    font-size: 1rem;
    font-weight: 500;
    font-family: inherit;
    color: var(--rc-text);
    letter-spacing: 0;
}
.rc-search-inline__input:focus,
.rc-search-inline__input:focus-visible { outline: none !important; box-shadow: none !important; }
.rc-search-inline__input::placeholder { color: var(--rc-muted); font-weight: 400; }
/* Suppress native browser search-clear × (Chrome/Safari) */
.rc-search-inline__input::-webkit-search-cancel-button,
.rc-search-inline__input::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.rc-search-inline__input::-ms-clear { display: none; }

/* Clear (×) button */
.rc-search-inline__clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--rc-border);
    color: var(--rc-text);
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.rc-search-inline__clear:hover { background: var(--rc-muted); color: var(--rc-surface); }

/* Cancel (✕) button — appears at the end of the bar */
.rc-search-inline__cancel {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: transparent;
    color: var(--rc-muted);
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    transition: background 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms;
}
.rc-search-inline__cancel:hover { background: var(--rc-border); color: var(--rc-text); }

/* Results panel: fixed below header, centered, wide */
.rc-search-inline__results {
    position: fixed;
    top: var(--rc-header-h, 64px);
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: min(780px, 58vw);
    background: var(--rc-surface);
    border: 1px solid var(--rc-border);
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.12);
    max-height: 65vh;
    overflow-y: auto;
    z-index: 1300;
    padding: 0.75rem var(--rc-container-px, 1.5rem) 1.5rem;
    overscroll-behavior: contain;
    margin-top: 38px; /* 8px base + 30px requested offset */
}
/* Admin bar pushes header down — compensate so results stay below header */
.admin-bar .rc-search-inline__results { top: calc(var(--rc-header-h, 64px) + 32px); margin-top: 8px; }
@media screen and (max-width: 782px) {
    .admin-bar .rc-search-inline__results { top: calc(var(--rc-header-h, 64px) + 46px); }
}
@media (max-width: 767px) {
    .rc-search-inline__results {
        left: 0; right: 0;
        transform: none;
        max-width: none;
        width: 100%;
        margin-top: 0;
        border-radius: 0 0 16px 16px;
        border-left: none; border-right: none;
        border-top: 1px solid var(--rc-border);
    }
}

/* Nav items + logo fade together when search opens */
.rc-header__inline-nav { transition: opacity 180ms cubic-bezier(0.4, 0, 0.2, 1); }
.rc-header--searching .rc-header__inline-nav { opacity: 0; pointer-events: none; }

/* ── 8. Cart minicart: grows from single pixel at cart icon (top-right) ─────── */
@media (min-width: 768px) {
    .rc-minicart {
        right: max(var(--rc-container-px, 1.25rem), calc((100vw - var(--rc-container, 1280px)) / 2 + var(--rc-container-px, 1.25rem))) !important;
        transform: scale(0) !important;
        transform-origin: top right !important;
        opacity: 0 !important;
        transition:
            opacity   220ms ease,
            transform 560ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    }
    .rc-minicart--open {
        transform: scale(1) !important;
        opacity: 1 !important;
        pointer-events: all !important;
    }
}
/* Mobile cart: single pixel at bottom → expands upward */
@media (max-width: 767px) {
    .rc-minicart {
        transform: scaleY(0.005) !important;
        transform-origin: bottom center !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transition: transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1),
                    opacity   260ms ease !important;
    }
    .rc-minicart--open {
        transform: scaleY(1) !important;
        opacity: 1 !important;
        pointer-events: all !important;
    }
}

/* ── 9. Mobile menu: grows from single pixel at hamburger center (top-left) ──── */
#rc-mobile-menu.rc-drawer.rc-drawer--left {
    /* origin = hamburger button center: container-px from left, half header height from top */
    transform-origin: var(--rc-container-px, 1.25rem) calc(var(--rc-header-h, 64px) / 2) !important;
    transform: scale(0) !important;
    opacity: 0 !important;
    border-radius: 16px !important;
    transition:
        transform 560ms cubic-bezier(0.34, 1.56, 0.64, 1),
        opacity   260ms ease !important;
}
#rc-mobile-menu.rc-drawer.rc-drawer--left.rc-drawer--open {
    transform: scale(1) !important;
    opacity: 1 !important;
}

/* ── 10. Product drawer: slides up from bottom via translateY (base CSS) ── */

/* ── 8. Breadcrumbs: clearly clickable with chevron ─────────────────────────── */
.rc-breadcrumbs a {
    color: var(--rc-muted) !important;
    text-decoration: none !important;
    font-weight: 500;
    transition: color 150ms;
}
.rc-breadcrumbs a:hover { color: var(--rc-primary) !important; text-decoration: underline !important; }
.rc-breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0; }
.rc-breadcrumb-sep { margin: 0 0.375rem; }
.rc-breadcrumbs .breadcrumb_last { font-weight: 600; color: var(--rc-text); }

/* ── 11. Reduce motion override ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .rc-sticky-cart { transition: none !important; }
    .rc-drawer { transition: none !important; }
    #rc-account-panel.rc-drawer.rc-drawer--right { transition: none !important; }
    #rc-mobile-menu.rc-drawer.rc-drawer--left { transition: none !important; }
    .rc-minicart { transition: none !important; }
    .rc-search-inline { transition: none !important; }
    .rc-search-btn { transition: none !important; }
    .rc-pd { transition: none !important; }
    .rc-nav-flyout { transition: none !important; }
}

/* ── Infinite scroll / load-more ────────────────────────────────────────── */
#rc-infinite-sentinel { display: flex; justify-content: center; padding: 2.5rem 0; }
.rc-load-more {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 2.5rem;
  border: 2px solid var(--rc-primary);
  border-radius: 9999px;
  font: inherit; font-size: 0.9375rem; font-weight: 700;
  background: transparent; color: var(--rc-primary);
  cursor: pointer; transition: background 200ms, color 200ms;
}
.rc-load-more:hover { background: var(--rc-primary); color: var(--rc-btn-text); }
.rc-infinite-spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--rc-border);
  border-top-color: var(--rc-primary);
  border-radius: 50%;
  animation: rc-spin 0.7s linear infinite;
}
@keyframes rc-spin { to { transform: rotate(360deg); } }
.rc-result-count { font-size: 0.875rem; color: var(--rc-muted); margin: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   POST-CART UPSELL DRAWER
   ══════════════════════════════════════════════════════════════════════════ */
.rc-upsell-drawer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 1100;
  pointer-events: none;
}
.rc-upsell-drawer--open { pointer-events: auto; }
.rc-upsell-drawer__backdrop {
  position: fixed; inset: 0; z-index: 0;
  top: var(--rc-header-h, 64px); /* don't cover the header — heart animation must land cleanly */
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(4px);
  opacity: 0; transition: opacity 320ms;
}
.rc-upsell-drawer--open .rc-upsell-drawer__backdrop { opacity: 1; }
.rc-upsell-drawer__panel {
  position: relative; z-index: 1;
  background: var(--rc-white);
  border-radius: 20px 20px 0 0;
  padding: 1.25rem 1.5rem 2rem;
  max-width: 640px;
  margin: 0 auto;
  transform: translateY(100%);
  transition: transform 380ms cubic-bezier(0.32, 0, 0.15, 1);
  box-shadow: 0 -8px 48px rgba(0,0,0,0.14);
  max-height: calc(100dvh - var(--rc-header-h, 64px)); /* can't grow past header bottom edge */
  overflow-y: auto;
  overflow-x: hidden;
}
.rc-upsell-drawer--open .rc-upsell-drawer__panel { transform: translateY(0); }

/* Countdown bar — restarts on each open via x-show toggling display:none */
.rc-upsell-drawer__timer {
  height: 3px;
  background: var(--rc-primary);
  transform-origin: left center;
  border-radius: 20px 20px 0 0;
  margin: -1.25rem -1.5rem 1.125rem;
  /* duration set via Alpine :style binding from RC.settings.upsellDrawerDuration */
  animation-name: rc-upsell-countdown;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
.rc-upsell-drawer__timer--paused { animation-play-state: paused; }
@keyframes rc-upsell-countdown {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

.rc-upsell-drawer__header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1rem;
}
.rc-upsell-drawer__title-wrap {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.9375rem; font-weight: 700; color: var(--rc-text);
  min-width: 0; flex: 1; overflow: hidden;
}
.rc-upsell-drawer__title-wrap > span {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rc-upsell-drawer__title-wrap svg { flex-shrink: 0; color: #16a34a; }
.rc-upsell-drawer__close {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: var(--rc-surface); border: none; border-radius: 50%;
  cursor: pointer; color: var(--rc-muted);
}
.rc-upsell-drawer__cta {
  display: flex; gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.rc-upsell-drawer__cta .rc-btn { flex: 1; justify-content: center; }
.rc-upsell-drawer__sub {
  font-size: 0.8125rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--rc-muted);
  margin: 0 0 0.875rem;
}

/* Upsell skeleton */
.rc-upsell-skeleton { display: flex; gap: 0.875rem; }
.rc-upsell-skel-card { flex: 1; min-width: 0; }

/* Upsell products */
.rc-upsell-products { display: flex; gap: 0.875rem; overflow-x: auto; padding-bottom: 4px; }
.rc-upsell-card {
  flex: 0 0 auto; width: 140px;
  display: flex; flex-direction: column;
  border: 1px solid var(--rc-border);
  border-radius: 12px; overflow: hidden;
  background: var(--rc-white);
  transition: box-shadow 200ms;
}
.rc-upsell-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.1); }
.rc-upsell-card__img-wrap { aspect-ratio: 1; overflow: hidden; position: relative; }
.rc-upsell-card__wishlist {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 2;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.42);
  border: none;
  color: var(--rc-white);
  cursor: pointer;
  transition: background 180ms ease;
}
.rc-upsell-card__wishlist:hover { background: rgba(0, 0, 0, 0.62); }
.rc-upsell-card__wishlist svg { transition: fill 200ms, stroke 200ms; }
.rc-upsell-card__wishlist--active svg { fill: var(--rc-error, #ef4444); stroke: var(--rc-error, #ef4444); }
.rc-upsell-card__wishlist:hover svg { fill: var(--rc-error, #ef4444); stroke: var(--rc-error, #ef4444); }
.rc-upsell-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms ease; }
.rc-upsell-card:hover .rc-upsell-card__img { transform: scale(1.05); }
.rc-upsell-card__body { padding: 0.5rem 0.625rem; flex: 1; }
.rc-upsell-card__title { font-size: 0.8125rem; font-weight: 600; color: var(--rc-text); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; display: block; }
.rc-upsell-card__price { font-size: 0.8125rem; font-weight: 700; color: var(--rc-primary); display: block; margin-top: 0.25rem; }
.rc-upsell-card__atc { margin: 0 0.625rem 0.625rem; width: calc(100% - 1.25rem); }
.rc-upsell-empty { font-size: 0.875rem; color: var(--rc-muted); text-align: center; padding: 1rem 0; }

.rc-account-rv { padding: 1.5rem 0 0; }

/* ══════════════════════════════════════════════════════════════════════════
   MY ACCOUNT — premium redesign
   ══════════════════════════════════════════════════════════════════════════ */

.rc-account-wrap { padding: 1.75rem 0 5rem; margin-top: 50px; }

/* ── Hero card ─────────────────────────────────────────────────────────── */
.rc-account-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding: 1.75rem 2rem;
  background: var(--rc-surface);
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius-lg);
  border-top: 3px solid var(--rc-primary);
  margin-bottom: 2rem;
  position: relative;
  overflow: hidden;
}
.rc-account-hero::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 240px; height: 100%;
  background: radial-gradient(ellipse at top right, color-mix(in srgb, var(--rc-primary) 8%, transparent), transparent 70%);
  pointer-events: none;
}

/* Identity (avatar + name + email + since) */
.rc-account-hero__identity { display: flex; align-items: center; gap: 1.125rem; position: relative; }
.rc-account-hero__avatar-ring {
  position: relative; flex-shrink: 0;
  width: 76px; height: 76px;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(135deg, var(--rc-primary), color-mix(in srgb, var(--rc-primary) 55%, #fff));
}
.rc-account-hero__avatar {
  width: 100% !important; height: 100% !important;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--rc-surface);
  display: block;
}
.rc-account-hero__name {
  font-size: 1.3125rem; font-weight: 800; margin: 0 0 0.2rem;
  letter-spacing: -0.025em; line-height: 1.2;
}
.rc-account-hero__email {
  display: block;
  font-size: 0.875rem; color: var(--rc-muted); margin-bottom: 0.35rem;
}
.rc-account-hero__since {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.75rem; color: var(--rc-muted); font-weight: 500;
}
.rc-account-hero__since svg { color: var(--rc-primary); flex-shrink: 0; }

/* Stats strip */
.rc-account-stats {
  display: flex; align-items: center; gap: 0;
  background: var(--rc-surface);
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius-lg);
  padding: 0 0.25rem;
  overflow: hidden;
}
.rc-account-stat {
  text-align: center;
  padding: 1rem 1.75rem;
  min-width: 100px;
}
.rc-account-stat__value {
  display: block;
  font-size: 1.5rem; font-weight: 800;
  color: var(--rc-primary);
  line-height: 1;
  margin-bottom: 0.3rem;
  letter-spacing: -0.03em;
}
.rc-account-stat__label {
  display: block;
  font-size: 0.6875rem; color: var(--rc-muted); font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
}
.rc-account-stat__sep {
  width: 1px; align-self: stretch;
  background: var(--rc-border); margin: 0.625rem 0; flex-shrink: 0;
}

@media (max-width: 680px) {
  .rc-account-hero { padding: 1.25rem; flex-direction: column; align-items: flex-start; }
  .rc-account-stats { width: 100%; }
  .rc-account-stat { flex: 1; padding: 0.875rem 0.75rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   CARD ANIMATIONS — magnetic tilt · holographic sheen · glitch · strip
   ══════════════════════════════════════════════════════════════════════════ */

/* Magnetic 3D tilt — smooth, not snappy */
.rc-card {
  will-change: transform;
  transition: transform 0.22s ease-out, box-shadow 0.28s ease;
}
.rc-card:hover {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(1.018);
  box-shadow: 0 24px 64px rgba(0,0,0,0.12), 0 8px 24px rgba(0,0,0,0.07);
}

/* Depth parallax — gentle float, not snappy */
.rc-card:hover .rc-card__cf-img--primary {
  transform: translateX(var(--px, 0px)) translateY(var(--py, 0px));
  transition: transform 0.18s ease-out;
}

/* Holographic sheen overlay — slow fade in, continuous hue-rotation */
.rc-card__holo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  background: conic-gradient(
    from 0deg at var(--mx, 50%) var(--my, 50%),
    hsl(0   85% 68% / 0.50),
    hsl(60  85% 68% / 0.50),
    hsl(120 85% 68% / 0.50),
    hsl(180 85% 68% / 0.50),
    hsl(240 85% 68% / 0.50),
    hsl(300 85% 68% / 0.50),
    hsl(0   85% 68% / 0.50)
  );
  mix-blend-mode: overlay;
  transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 5;
}
.rc-card:hover .rc-card__holo {
  opacity: 1;
  animation: rc-holo-spin 7s linear infinite;
}
@keyframes rc-holo-spin {
  from { filter: hue-rotate(0deg); }
  to   { filter: hue-rotate(360deg); }
}

/* ── Holo style variants ────────────────────────────────────────────────────── */

/* Gold shimmer */
body.rc-holo-gold .rc-card__holo {
  background: conic-gradient(
    from 0deg at var(--mx, 50%) var(--my, 50%),
    hsl(30  90% 62% / 0.55),
    hsl(45  95% 58% / 0.55),
    hsl(55  90% 60% / 0.55),
    hsl(45  95% 58% / 0.55),
    hsl(30  90% 62% / 0.55),
    hsl(20  85% 58% / 0.55),
    hsl(30  90% 62% / 0.55)
  );
}
body.rc-holo-gold .rc-card:hover .rc-card__holo {
  animation: rc-holo-gold-spin 4s ease-in-out infinite alternate;
}
@keyframes rc-holo-gold-spin {
  from { filter: hue-rotate(-12deg) brightness(1.05); }
  to   { filter: hue-rotate(12deg)  brightness(1.15); }
}

/* Silver shimmer */
body.rc-holo-silver .rc-card__holo {
  background: conic-gradient(
    from 0deg at var(--mx, 50%) var(--my, 50%),
    hsl(210 25% 88% / 0.55),
    hsl(200 15% 95% / 0.55),
    hsl(220 20% 90% / 0.55),
    hsl(205 10% 95% / 0.55),
    hsl(215 25% 88% / 0.55),
    hsl(200 15% 95% / 0.55),
    hsl(210 25% 88% / 0.55)
  );
}
body.rc-holo-silver .rc-card:hover .rc-card__holo {
  animation: rc-holo-silver-spin 5s ease-in-out infinite alternate;
}
@keyframes rc-holo-silver-spin {
  from { filter: hue-rotate(-15deg) brightness(1.08); }
  to   { filter: hue-rotate(15deg)  brightness(1.18); }
}

/* Subtle — same rainbow, half opacity */
body.rc-holo-subtle .rc-card:hover .rc-card__holo {
  opacity: 0.4;
  animation-duration: 10s;
}

/* Glitch flash — slow enough to read, fast enough to feel electric */
@keyframes rc-glitch-red {
  0%    { clip-path: inset(4% 0 90% 0); transform: translate(-5px, 0); opacity: 0; }
  8%    { opacity: 0.7; }
  18%   { clip-path: inset(22% 0 68% 0); transform: translate(5px, 0); }
  32%   { clip-path: inset(48% 0 42% 0); transform: translate(-4px, 0); }
  50%   { clip-path: inset(62% 0 28% 0); transform: translate(4px, 0); }
  68%   { clip-path: inset(76% 0 14% 0); transform: translate(-3px, 0); }
  84%   { clip-path: inset(88% 0 4%  0); transform: translate(2px, 0); opacity: 0.5; }
  100%  { clip-path: inset(0 0 96% 0); transform: translate(0, 0); opacity: 0; }
}
@keyframes rc-glitch-cyan {
  0%    { clip-path: inset(8% 0 84% 0); transform: translate(5px, 0); opacity: 0; }
  12%   { opacity: 0.6; }
  24%   { clip-path: inset(30% 0 60% 0); transform: translate(-5px, 0); }
  40%   { clip-path: inset(54% 0 36% 0); transform: translate(3px, 0); }
  58%   { clip-path: inset(70% 0 20% 0); transform: translate(-3px, 0); }
  76%   { clip-path: inset(82% 0 8%  0); transform: translate(2px, 0); opacity: 0.4; }
  100%  { clip-path: inset(0 0 98% 0); transform: translate(0, 0); opacity: 0; }
}
.rc-card--glitch::before,
.rc-card--glitch::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 10;
}
.rc-card--glitch::before {
  background: #ff003c44;
  animation: rc-glitch-red 0.55s ease-out forwards;
}
.rc-card--glitch::after {
  background: #00eeff44;
  animation: rc-glitch-cyan 0.55s ease-out 0.06s forwards;
}

/* Kinetic venetian-blind strip reveal on gallery change */
@keyframes rc-strip-in {
  from {
    mask-position: 0 -100%;
    -webkit-mask-position: 0 -100%;
  }
  to {
    mask-position: 0 0;
    -webkit-mask-position: 0 0;
  }
}
.rc-card__coverflow.rc-cf-strip {
  mask-image: repeating-linear-gradient(
    to bottom,
    black 0%, black 5%,
    transparent 5%, transparent 10%
  );
  -webkit-mask-image: repeating-linear-gradient(
    to bottom,
    black 0%, black 5%,
    transparent 5%, transparent 10%
  );
  mask-size: 100% 200%;
  -webkit-mask-size: 100% 200%;
  animation: rc-strip-in 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ══════════════════════════════════════════════════════════════════════════
   FILTER PILLS · SWATCHES · STAR RATING — shop sidebar
   ══════════════════════════════════════════════════════════════════════════ */

/* Hide search widget in shop sidebar */
.rc-shop-sidebar .widget_search,
.rc-shop-sidebar .widget-search,
.rc-shop-sidebar .woocommerce-widget-layered-nav-list .search-form { display: none !important; }

/* Pill row */
.rc-filter-pills {
  display: flex;
  gap: 0.375rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.rc-filter-pills::-webkit-scrollbar { display: none; }
.rc-filter-pills--wrap { flex-wrap: wrap; overflow-x: visible; }

/* Individual pill */
.rc-filter-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--rc-muted);
  background: var(--rc-surface);
  border: 1.5px solid var(--rc-border);
  border-radius: 999px;
  cursor: pointer;
  transition: color 160ms, background 160ms, border-color 160ms, transform 120ms;
  white-space: nowrap;
  line-height: 1;
}
.rc-filter-pill:hover {
  color: var(--rc-text);
  border-color: var(--rc-primary);
  transform: translateY(-1px);
}
.rc-filter-pill--active {
  background: var(--rc-primary);
  color: #fff !important;
  border-color: var(--rc-primary) !important;
}
.rc-filter-pill--active:hover { transform: translateY(-1px); }
@media (hover: none) and (pointer: coarse) {
  .rc-filter-pill { min-height: 44px; padding: 0.625rem 0.875rem; }
}

/* Star pills */
.rc-filter-pill--star .rc-filter-pill__stars {
  color: #f59e0b;
  letter-spacing: -0.05em;
}
.rc-filter-pill--star.rc-filter-pill--active .rc-filter-pill__stars { color: #fff; }

/* Discount pills */
.rc-filter-pill--discount { font-variant-numeric: tabular-nums; }

/* Color swatches */
.rc-filter-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.rc-filter-swatch {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2.5px solid var(--rc-border);
  cursor: pointer;
  position: relative;
  transition: transform 150ms, border-color 150ms;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rc-surface);
  overflow: hidden;
}
.rc-filter-swatch:hover { transform: scale(1.12); border-color: var(--rc-primary); }
.rc-filter-swatch--active {
  border-color: var(--rc-primary);
  box-shadow: 0 0 0 2px var(--rc-white), 0 0 0 4px var(--rc-primary);
}
.rc-filter-swatch__dot {
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  display: block;
}
.rc-filter-swatch__label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--rc-text);
  line-height: 1;
  padding: 0 2px;
  text-align: center;
}

/* Tag pills (brand / product_tag) */
.rc-filter-pill--tag { text-transform: capitalize; }

/* Tags collapsible wrapper — clips to ~2 rows, expands on toggle */
.rc-filter-pills-outer {
  max-height: 56px;  /* desktop: 2 rows (~22px pill + 6px gap) */
  overflow: hidden;
  transition: max-height 320ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: none) and (pointer: coarse) {
  .rc-filter-pills-outer { max-height: 100px; }  /* touch: 2 rows (44px pill + 6px gap) */
}
.rc-filter-pills-outer.is-expanded { max-height: 2000px; }

/* Show more / less toggle button */
.rc-filter-show-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 0.5rem;
  background: none;
  border: none;
  padding: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--rc-primary);
  cursor: pointer;
  line-height: 1;
}
.rc-filter-show-more:hover { opacity: 0.8; }

/* ══════════════════════════════════════════════════════════════════════════
   VARIATION SWATCHES ON PRODUCT CARDS
   ══════════════════════════════════════════════════════════════════════════ */

.rc-card__swatches {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 0.625rem;
  min-height: 26px; /* prevent layout shift on cards without swatches */
}

/* ── Colour circle ─────────────────────────────────────────────────────── */
.rc-card__swatch--color {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid var(--rc-border);
  padding: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: transform 150ms cubic-bezier(0.34,1.56,0.64,1),
              border-color 150ms ease,
              box-shadow 200ms ease;
}
.rc-card__swatch--color:hover {
  transform: scale(1.2);
  border-color: var(--rc-primary);
}
.rc-card__swatch--color.rc-card__swatch--active {
  border-color: var(--rc-primary);
  box-shadow: 0 0 0 2px var(--rc-white), 0 0 0 3.5px var(--rc-primary);
  transform: scale(1.15);
}
.rc-card__swatch-dot {
  display: block;
  width: 100%; height: 100%;
  border-radius: 50%;
  pointer-events: none;
}

/* ── Label / size pill ─────────────────────────────────────────────────── */
.rc-card__swatch--label {
  padding: 0.175rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--rc-muted);
  background: var(--rc-surface);
  border: 1.5px solid var(--rc-border);
  border-radius: 5px;
  cursor: pointer;
  line-height: 1.4;
  transition: color 130ms, border-color 130ms, background 130ms,
              transform 130ms cubic-bezier(0.34,1.56,0.64,1);
}
.rc-card__swatch--label:hover {
  color: var(--rc-text);
  border-color: var(--rc-primary);
  transform: translateY(-1px);
}
.rc-card__swatch--label.rc-card__swatch--active {
  background: var(--rc-primary);
  color: #fff;
  border-color: var(--rc-primary);
  transform: translateY(-1px);
}
.rc-card__swatch-label { pointer-events: none; }

/* ── "+N more" overflow chip ───────────────────────────────────────────── */
.rc-card__swatch--more {
  padding: 0.175rem 0.5rem;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--rc-muted);
  background: transparent;
  border: 1.5px dashed var(--rc-border);
  border-radius: 5px;
  cursor: pointer;
  line-height: 1.4;
  transition: color 130ms, border-color 130ms;
}
.rc-card__swatch--more:hover {
  color: var(--rc-primary);
  border-color: var(--rc-primary);
}

/* ══════════════════════════════════════════════════════════════════════════
   RECENTLY VIEWED — SHOP PAGE SECTION
   ══════════════════════════════════════════════════════════════════════════ */

.rc-shop-rv {
  padding: 2.5rem 0 0;
  border-top: 1px solid var(--rc-border);
  margin-top: 2.5rem;
}

.rc-shop-rv__head {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-bottom: 1.25rem;
}
.rc-shop-rv__title {
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--rc-text);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}
.rc-shop-rv__title svg { color: var(--rc-primary); flex-shrink: 0; }
.rc-shop-rv__count {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--rc-muted);
  background: var(--rc-surface);
  border: 1px solid var(--rc-border);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
}

/* ── Strip ─────────────────────────────────────────────────────────────── */
.rc-shop-rv__strip {
  display: flex;
  gap: 0.875rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 0.5rem;
}
.rc-shop-rv__strip::-webkit-scrollbar { display: none; }

/* ── Card ──────────────────────────────────────────────────────────────── */
.rc-shop-rv__card {
  flex: 0 0 156px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: var(--rc-surface);
  border: 1px solid var(--rc-border);
  border-radius: calc(var(--rc-radius) + 2px);
  overflow: hidden;
  transition: transform 260ms ease, box-shadow 260ms ease;
}
.rc-shop-rv__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
}

/* ── Image button ──────────────────────────────────────────────────────── */
.rc-shop-rv__img-btn {
  display: block;
  width: 100%;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.rc-shop-rv__img-wrap {
  aspect-ratio: 1/1;
  background: var(--rc-border);
  overflow: hidden;
  position: relative;
}
.rc-shop-rv__img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 360ms ease;
  display: block;
}
.rc-shop-rv__img-btn:hover .rc-shop-rv__img { transform: scale(1.07); }

/* Hover overlay: "View" pill */
.rc-shop-rv__img-btn::after {
  content: 'View';
  position: absolute;
  bottom: 0.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  border-radius: 999px;
  padding: 0.2rem 0.65rem;
  opacity: 0;
  transition: opacity 220ms ease, transform 220ms ease;
  pointer-events: none;
  white-space: nowrap;
}
.rc-shop-rv__img-btn:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Info ──────────────────────────────────────────────────────────────── */
.rc-shop-rv__info {
  padding: 0.5rem 0.6rem 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
}
.rc-shop-rv__name {
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--rc-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rc-shop-rv__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
  margin-top: auto;
}
.rc-shop-rv__price {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--rc-primary);
  line-height: 1;
}

/* ── Add-to-cart button ────────────────────────────────────────────────── */
.rc-shop-rv__atc {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--rc-border);
  background: var(--rc-white);
  color: var(--rc-muted);
  cursor: pointer;
  transition: background 180ms, border-color 180ms, color 180ms, transform 180ms;
}
.rc-shop-rv__atc:hover {
  border-color: var(--rc-primary);
  color: var(--rc-primary);
  transform: scale(1.12);
}
.rc-shop-rv__atc--added,
.rc-shop-rv__atc--added:hover {
  background: var(--rc-primary);
  border-color: var(--rc-primary);
  color: #fff;
  transform: scale(1.0);
}
.rc-shop-rv__atc:disabled { opacity: 0.55; cursor: default; transform: none; }

/* ── Nav arrows ────────────────────────────────────────────────────────── */
.rc-shop-rv__nav {
  display: flex;
  gap: 0.375rem;
  margin-left: auto;
}
.rc-shop-rv__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--rc-border);
  background: var(--rc-white);
  color: var(--rc-text);
  cursor: pointer;
  transition: background 180ms, border-color 180ms, color 180ms;
}
.rc-shop-rv__arrow:hover {
  background: var(--rc-primary);
  border-color: var(--rc-primary);
  color: #fff;
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .rc-shop-rv__card { flex: 0 0 130px; }
}

/* ─── 21. PRICE SLIDER ───────────────────────────────────────────────────── */

.rc-price-slider {
  padding: 0.5rem 0 0.25rem;
}

.rc-price-slider__track {
  position: relative;
  height: 4px;
  background: var(--rc-border);
  border-radius: 2px;
  margin: 1.25rem 0.5rem 1.5rem;
}

.rc-price-slider__fill {
  position: absolute;
  top: 0; height: 100%;
  background: var(--rc-primary);
  border-radius: 2px;
  pointer-events: none;
}

.rc-price-slider__thumb {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--rc-white);
  border: 2px solid var(--rc-primary);
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
  cursor: grab;
  touch-action: none;
  z-index: 2;
  padding: 0;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.rc-price-slider__thumb:active { cursor: grabbing; transform: translate(-50%, -50%) scale(1.2); box-shadow: 0 2px 8px rgba(0,0,0,.22); }
.rc-price-slider__thumb:focus-visible { outline: 2px solid var(--rc-primary); outline-offset: 2px; }
/* Expand touch target on touch devices without changing visual size */
@media (hover: none) and (pointer: coarse) {
  .rc-price-slider__thumb::after {
    content: '';
    position: absolute;
    inset: -13px;
    border-radius: 50%;
  }
}

.rc-price-slider__labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--rc-text);
  padding: 0 0.25rem;
}

/* ─── 22. SEARCH BACKDROP ───────────────────────────────────────────────── */
/* z-index 9: below rc-search-inline (10) so the bar stays readable above the dim */

.rc-search-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9;
  background: rgba(0,0,0,0);
  pointer-events: none;
  transition: background 300ms ease;
}
.rc-search-backdrop--active {
  background: rgba(0,0,0,0.38);
  pointer-events: auto;
}

/* ─── 23. PRODUCT CARD IMAGE HEIGHT ─────────────────────────────────────── */
/* Aspect-ratio classes on .rc-card__img-wrap control height — no max-height needed. */

/* ══════════════════════════════════════════════════════════════════════════
   24. MY ACCOUNT — deep polish
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Account RV section spacing ─────────────────────────────────────────── */
.rc-account-rv {
  margin-top: 2.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--rc-border);
}

/* ── Override any stale nav__greeting selectors still in earlier CSS ─────── */
.rc-account-nav__greeting { display: none !important; }

/* ── Order status badges ─────────────────────────────────────────────────── */
.woocommerce-account mark.order-status,
.woocommerce-orders-table__cell mark.order-status {
  background: var(--rc-surface);
  color: var(--rc-muted);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: inline-block;
  white-space: nowrap;
}
.woocommerce-account mark.order-status.status-completed  { background: #dcfce7; color: #15803d; }
.woocommerce-account mark.order-status.status-processing { background: #dbeafe; color: #1d4ed8; }
.woocommerce-account mark.order-status.status-on-hold    { background: #fef9c3; color: #a16207; }
.woocommerce-account mark.order-status.status-pending    { background: #fef3c7; color: #92400e; }
.woocommerce-account mark.order-status.status-cancelled  { background: #fee2e2; color: #b91c1c; }
.woocommerce-account mark.order-status.status-refunded   { background: #f3f4f6; color: #6b7280; }
.woocommerce-account mark.order-status.status-failed     { background: #fee2e2; color: #b91c1c; }

/* ── Orders table row hover ──────────────────────────────────────────────── */
.woocommerce-account table.shop_table tbody tr {
  transition: background 120ms;
}
.woocommerce-account table.shop_table tbody tr:hover td {
  background: color-mix(in srgb, var(--rc-primary) 4%, transparent);
}

/* ── Order action links → pill buttons ──────────────────────────────────── */
.woocommerce-account .woocommerce-orders-table__cell-order-actions { white-space: nowrap; }
.woocommerce-account .woocommerce-orders-table__cell-order-actions a {
  margin-right: 0.375rem;
  border-radius: 999px !important;
  font-size: 0.75rem !important;
  padding: 0.25rem 0.75rem !important;
}

/* ── Order details page ──────────────────────────────────────────────────── */
.woocommerce-account .woocommerce-order-details,
.woocommerce-account .woocommerce-customer-details {
  margin-top: 1.5rem;
}
.woocommerce-account .woocommerce-order-details__title,
.woocommerce-account .woocommerce-column__title {
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--rc-muted) !important;
  margin-bottom: 0.75rem !important;
}

/* ── Dashboard welcome paragraph ─────────────────────────────────────────── */
.woocommerce-account .woocommerce-MyAccount-content > p:first-child {
  background: color-mix(in srgb, var(--rc-primary) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--rc-primary) 18%, transparent);
  border-radius: var(--rc-radius);
  padding: 1rem 1.25rem;
  font-size: 0.9375rem;
  color: var(--rc-text);
  line-height: 1.6;
  margin-bottom: 1.75rem;
}

/* ── Dashboard quick-nav links (orders, address etc.) ───────────────────── */
.woocommerce-account .woocommerce-MyAccount-content > p:first-child a {
  color: var(--rc-primary);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--rc-primary) 35%, transparent);
  transition: border-color 150ms;
}
.woocommerce-account .woocommerce-MyAccount-content > p:first-child a:hover {
  border-bottom-color: var(--rc-primary);
}

/* ── Account page — content inner card ──────────────────────────────────── */
.rc-account-content .woocommerce {
  background: var(--rc-surface);
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius-lg);
  padding: 1.75rem 2rem;
}
@media (max-width: 599px) {
  .rc-account-content .woocommerce { padding: 1.25rem; }
}

/* ── Address cards — more polish ─────────────────────────────────────────── */
.woocommerce-account .woocommerce-Address {
  transition: box-shadow 200ms, border-color 200ms;
}
.woocommerce-account .woocommerce-Address:hover {
  border-color: var(--rc-primary);
  box-shadow: 0 4px 16px rgba(0,0,0,0.07);
}
.woocommerce-account .woocommerce-Address p { color: var(--rc-muted); }
.woocommerce-account .woocommerce-Address .button {
  margin-top: 0.5rem;
  font-size: 0.8125rem !important;
  height: 36px !important;
  padding: 0 1rem !important;
}

/* ── Edit account / password fieldsets ──────────────────────────────────── */
.woocommerce-account fieldset {
  border-radius: var(--rc-radius-lg) !important;
}
.woocommerce-account fieldset legend {
  color: var(--rc-primary);
}

/* ── Pagination on orders list ───────────────────────────────────────────── */
.woocommerce-account .woocommerce-pagination { margin-top: 1.5rem; }
.woocommerce-account .woocommerce-pagination ul {
  display: flex; gap: 0.375rem; list-style: none; padding: 0; margin: 0;
  flex-wrap: wrap;
}
.woocommerce-account .woocommerce-pagination li a,
.woocommerce-account .woocommerce-pagination li span {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: var(--rc-radius);
  border: 1.5px solid var(--rc-border);
  background: var(--rc-surface);
  font-size: 0.875rem; font-weight: 600; color: var(--rc-text);
  text-decoration: none;
  transition: background 150ms, border-color 150ms, color 150ms;
}
.woocommerce-account .woocommerce-pagination li a:hover {
  border-color: var(--rc-primary); color: var(--rc-primary);
}
.woocommerce-account .woocommerce-pagination li span.current {
  background: var(--rc-primary); border-color: var(--rc-primary);
  color: #fff;
}

/* ── Mobile: hide nav header label, collapse sidebar ────────────────────── */
@media (max-width: 767px) {
  .rc-account-layout { padding: 1.5rem 0 3rem; }
  .rc-account-nav__header { display: none; }
  .rc-account-content .woocommerce { padding: 1rem; }
  .rc-account-sidebar { position: static; }
}

/* ══════════════════════════════════════════════════════════════════════════
   25. MY ACCOUNT — zero-state, empty orders, nudge, buy-again
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Zero-order stat CTA ─────────────────────────────────────────────────── */
.rc-account-stat__cta {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--rc-primary);
  text-decoration: none;
  margin-top: 0.3rem;
  opacity: 0.8;
  transition: opacity 150ms;
}
.rc-account-stat__cta:hover { opacity: 1; }

/* ── Orders empty state ──────────────────────────────────────────────────── */
.rc-orders-empty {
  text-align: center;
  padding: 4rem 2rem;
  background: var(--rc-surface);
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius-lg);
}
.rc-orders-empty__icon {
  width: 76px; height: 76px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--rc-primary) 8%, transparent);
  color: var(--rc-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.375rem;
}
.rc-orders-empty__title {
  font-size: 1.1875rem; font-weight: 800; margin: 0 0 0.5rem;
  letter-spacing: -0.025em;
}
.rc-orders-empty__desc {
  font-size: 0.9375rem; color: var(--rc-muted); margin: 0 auto 2rem;
  max-width: 380px; line-height: 1.6;
}
.rc-orders-empty__cta {
  display: inline-flex; align-items: center; gap: 0.5rem;
  height: 44px; padding: 0 1.625rem;
  background: var(--rc-primary) !important; color: var(--rc-btn-text) !important;
  border-radius: var(--rc-radius);
  font-size: 0.9375rem; font-weight: 700;
  text-decoration: none;
  transition: opacity 150ms;
}
.rc-orders-empty__cta:hover { opacity: 0.85; color: var(--rc-btn-text) !important; }

/* ── Address completion nudge ────────────────────────────────────────────── */
.rc-account-nudge {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.375rem;
  background: color-mix(in srgb, var(--rc-primary) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--rc-primary) 22%, transparent);
  border-radius: var(--rc-radius-lg);
  margin-bottom: 2rem;
}
.rc-account-nudge__icon {
  flex-shrink: 0;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--rc-primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.rc-account-nudge__body { flex: 1; min-width: 0; }
.rc-account-nudge__body strong {
  display: block; font-size: 0.9375rem; font-weight: 700; margin-bottom: 0.2rem;
}
.rc-account-nudge__body p { font-size: 0.875rem; color: var(--rc-muted); margin: 0; }
.rc-account-nudge__btn {
  flex-shrink: 0;
  display: inline-flex; align-items: center;
  height: 38px; padding: 0 1.125rem;
  background: var(--rc-primary) !important; color: var(--rc-btn-text) !important;
  border-radius: var(--rc-radius);
  font-size: 0.8125rem; font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 150ms;
}
.rc-account-nudge__btn:hover { opacity: 0.85; color: var(--rc-btn-text) !important; }
@media (max-width: 540px) {
  .rc-account-nudge { flex-wrap: wrap; }
  .rc-account-nudge__btn { width: 100%; justify-content: center; }
}

/* ── "Buy again" (order-again) action button ─────────────────────────────── */
.woocommerce-account .rc-btn-reorder {
  background: var(--rc-primary) !important;
  border-color: var(--rc-primary) !important;
  color: var(--rc-btn-text) !important;
}
.woocommerce-account .rc-btn-reorder:hover {
  opacity: 0.85 !important;
  background: var(--rc-primary) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   26. PRODUCT INFO BLOCKS — FAQ tab, Returns & Care collapsibles
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Shared collapsible toggle (Returns + Care) ──────────────────────────── */
.rc-single__info-block {
  border-top: 1px solid var(--rc-border);
  margin-top: 0.75rem;
}
.rc-single__info-toggle {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  background: none;
  border: none;
  padding: 0.875rem 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--rc-text);
  cursor: pointer;
  text-align: left;
  transition: color 150ms;
}
.rc-single__info-toggle:hover { color: var(--rc-primary); }
.rc-single__info-toggle-icon {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--rc-primary) 8%, transparent);
  color: var(--rc-primary);
  display: flex; align-items: center; justify-content: center;
}
.rc-single__info-chevron {
  margin-left: auto;
  flex-shrink: 0;
  color: var(--rc-muted);
  transition: transform 220ms ease;
}
.rc-single__info-body {
  padding-bottom: 1rem;
}
.rc-single__info-content {
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--rc-muted);
}
.rc-single__info-content p  { margin: 0 0 0.5rem; }
.rc-single__info-content ul,
.rc-single__info-content ol { padding-left: 1.25rem; margin: 0 0 0.5rem; }
.rc-single__info-content li { margin-bottom: 0.25rem; }
.rc-single__info-content h3 {
  font-size: 0.875rem; font-weight: 700; color: var(--rc-text);
  margin: 0.75rem 0 0.25rem;
}
.rc-single__info-content h3:first-child { margin-top: 0; }
.rc-single__info-content strong { color: var(--rc-text); font-weight: 600; }

/* Care content: emoji lines get a bit more breathing room */
.rc-single__care-content p { margin-bottom: 0.625rem; }

/* ── FAQ tab panel ───────────────────────────────────────────────────────── */
.rc-faq__content { max-width: 720px; }
.rc-faq__content h3 {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--rc-text);
  margin: 0;
  padding: 1.1rem 0 0.75rem;
  border-top: 1px solid var(--rc-border);
  letter-spacing: -0.01em;
}
.rc-faq__content h3:first-child { border-top: none; padding-top: 0; }
.rc-faq__content p {
  font-size: 0.9375rem;
  color: var(--rc-muted);
  line-height: 1.7;
  margin: 0 0 0.75rem;
  padding-left: 0.125rem;
}
.rc-faq__content ul,
.rc-faq__content ol { padding-left: 1.375rem; margin: 0 0 0.75rem; color: var(--rc-muted); font-size: 0.9375rem; }
.rc-faq__content li { margin-bottom: 0.25rem; line-height: 1.65; }
.rc-faq__content strong { color: var(--rc-text); }

/* ── Shared content block prose (returns + care) also inherits figure styles */
.rc-single__info-content figure { display: block; width: 100%; overflow-x: auto; margin: 0 0 0.5rem; }
.rc-single__info-content table {
  width: 100%; min-width: 100%; border-collapse: collapse; font-size: 0.8125rem;
}
.rc-single__info-content table th {
  padding: 0.5rem 0.75rem; font-weight: 700; font-size: 0.75rem;
  text-transform: uppercase; letter-spacing: 0.04em;
  background: var(--rc-surface); border-bottom: 2px solid var(--rc-border); text-align: left;
}
.rc-single__info-content table td {
  padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--rc-border);
}
.rc-single__info-content table tr:last-child td { border-bottom: none; }

/* ══════════════════════════════════════════════════════════════════════════
   27. CUSTOM TAG BADGES (product_tag term meta)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Card: right-side tag badges ─────────────────────────────────────────── */
.rc-card__tag-badges {
  position: absolute;
  top: 0.625rem;
  right: 0.625rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3rem;
  z-index: 3;
  pointer-events: none;
}
.rc-card__tag-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.5rem;
  border-radius: 2rem;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fff;
  line-height: 1.2;
  white-space: nowrap;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
}
.rc-card__tag-badge > span { font-size: 0.8rem; line-height: 1; }

/* ── Single product: tag badge pills below title ─────────────────────────── */
.rc-single__tag-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.875rem;
}
.rc-single__tag-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.9rem;
  border-radius: 2rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #fff;
  line-height: 1;
  text-shadow: 0 1px 3px rgba(0,0,0,0.2);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  animation: rc-badge-pop 300ms cubic-bezier(0.34,1.56,0.64,1) both;
}
.rc-single__tag-badge > span { font-size: 1rem; line-height: 1; }

@keyframes rc-badge-pop {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1); }
}

/* ══════════════════════════════════════════════════════════════════════════
   28. MOBILE RESPONSIVE FIXES
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 28.1: Header — prevent cart icon clipping on narrow screens ─────────────
   1fr auto 1fr splits space equally around the logo auto column. When the
   text logo ("RaftaarCommerce") expands the auto column beyond ~180px the
   right 1fr collapses below 144px (3×48px buttons) and the cart clips.
   Switch to auto 1fr auto so buttons get their natural size; logo shrinks. */
@media (max-width: 767px) {
  .rc-header__inner {
    grid-template-columns: auto 1fr auto;
    padding: 0 0.875rem;
    gap: 0;
  }
  .rc-header__center {
    min-width: 0;
    overflow: hidden;
    padding: 0 0.5rem;
  }
  .rc-logo-text {
    font-size: 1.0625rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }
  .rc-header__logo .custom-logo { max-height: 28px; }
  /* Tighter icon buttons on mobile so 3 fit comfortably */
  .rc-btn-icon { width: 44px; height: 44px; border-radius: 10px; }
  .rc-menu-pill { height: 44px; padding: 0 0.625rem; }
}

/* ── 28.2: Sticky cart bar — sit above mobile bottom nav ─────────────────────
   Both .rc-sticky-cart and .rc-bottom-nav are position:fixed; bottom:0.
   sticky-cart z-index:850 beats bottom-nav z-index:400, making the nav
   invisible. Move sticky cart above the 60px nav bar on mobile. */
@media (max-width: 1023px) {
  .rc-sticky-cart {
    bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  }
}

/* ── 28.3: Upsell drawer — backdrop must cover sticky cart bar ───────────────
   The backdrop is position:fixed;z-index:0 which evaluates at the ROOT
   stacking level — below sticky cart at z-index:850. Raise it above. */
.rc-upsell-drawer__backdrop {
  z-index: 900;
}
.rc-upsell-drawer__panel {
  z-index: 901;
}

/* ── 28.4: Upsell drawer — extra bottom clearance on mobile ──────────────────
   Panel overflows behind mobile bottom nav when content is tall. */
@media (max-width: 1023px) {
  .rc-upsell-drawer__panel {
    padding-bottom: calc(1.5rem + 60px + env(safe-area-inset-bottom, 0px));
  }
}

/* ── 28.5: Page body — bottom padding so footer isn't hidden behind bottom nav */
@media (max-width: 1023px) {
  .rc-footer {
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  }
}

/* ── 28.6: Single product tabs — tighter padding on very narrow phones ────── */
@media (max-width: 400px) {
  .rc-tab-btn {
    padding: 0.875rem 0.75rem;
    font-size: 0.8125rem;
  }
}

/* ── 28.7: Single product — ATC row stacks cleanly on narrow phones ─────────*/
@media (max-width: 400px) {
  .rc-single__qty-atc { flex-direction: column; align-items: stretch; }
  .rc-single__qty-atc .rc-single__qty { width: 100%; justify-content: center; }
  .rc-single__qty-atc .rc-single__wishlist-icon-btn { align-self: flex-start; }
}

/* ── 28.8: Shop toolbar — wrap on mobile so sort+count don't overlap ─────── */
@media (max-width: 639px) {
  .rc-shop-toolbar {
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  .rc-shop-toolbar__right { flex-wrap: wrap; gap: 0.5rem; }
}

/* ── 28.9: Cart drawer — full viewport height on mobile ─────────────────────*/
@media (max-width: 767px) {
  .rc-cart-drawer { width: 100vw !important; max-width: 100vw !important; }
}

/* ── 28.10: Hero section — reduce empty space on mobile with no image ───────*/
@media (max-width: 767px) {
  .rc-home-hero { min-height: 50vh; }
  .rc-hero { padding: 3rem 0; }
}

/* ── 28.11: Recently viewed strip — prevent overflow on very narrow ──────────*/
@media (max-width: 400px) {
  .rc-shop-rv__card { min-width: 110px; }
  .rc-shop-rv__img-wrap { height: 110px; }
}

/* ── 28.12: Promo banner — stack layout on mobile ───────────────────────────*/
@media (max-width: 639px) {
  .rc-promo-banner__inner {
    flex-direction: column !important;
    text-align: center;
    gap: 1.5rem;
  }
  .rc-promo-banner__cta { margin: 0 auto; }
}

/* ── 28.13: Product card actions — show on mobile (hover doesn't exist) ─────*/
@media (hover: none) {
  /* Disable 3D perspective tilt + holographic sheen on touch — perspective()
     in a transform creates a 3D rendering context that overflows overflow:hidden */
  .rc-card:hover {
    transform: none;
    box-shadow: none;
  }
  .rc-card:hover .rc-card__holo { opacity: 0; animation: none; }
  .rc-card:hover .rc-card__cf-img--primary { transform: none; transition: none; }

  .rc-card__actions { opacity: 1 !important; transform: none !important; pointer-events: auto; }
  .rc-card__action-btn { opacity: 1 !important; pointer-events: auto; }

  /* Quick view and compare are desktop-only interactions */
  .rc-card__action-btn--quick-view,
  .rc-card__compare-btn { display: none !important; }

  /* ATC: drop the text label — icon carries the meaning; keep pill shape
     so it stays visually distinct as the primary action in the trio */
  .rc-card__action-btn--atc .rc-card__atc-label { display: none !important; }
  .rc-card__action-btn--atc span { display: none !important; }
  .rc-card__action-btn--atc {
    width: auto;
    min-width: 36px;
    padding: 0 1.375rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BETA BLOCKS — Icon Bar · Newsletter · Countdown Banner · Product Tabs
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Icon Bar ────────────────────────────────────────────────────────────── */
.rc-icon-bar {
  display: grid;
  grid-template-columns: repeat(var(--rc-ib-cols, 4), 1fr);
  gap: 1rem;
  padding: 1.5rem 0;
}
.rc-icon-bar__item {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1.125rem 1rem;
  border-radius: var(--rc-radius);
}
.rc-icon-bar--bordered .rc-icon-bar__item {
  border: 1px solid var(--rc-border);
}
.rc-icon-bar--boxed .rc-icon-bar__item {
  background: var(--rc-surface);
}
.rc-icon-bar__icon { color: var(--rc-primary); flex-shrink: 0; line-height: 0; }
.rc-icon-bar__copy { display: flex; flex-direction: column; gap: 0.125rem; }
.rc-icon-bar__text    { font-weight: 600; font-size: 0.9375rem; color: var(--rc-text); }
.rc-icon-bar__subtext { font-size: 0.8125rem; color: var(--rc-muted); }
@media (max-width: 767px) { .rc-icon-bar { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479px) { .rc-icon-bar { grid-template-columns: 1fr; } }

/* ── Newsletter Block ────────────────────────────────────────────────────── */
.rc-newsletter-blk {
  padding: 3rem 2rem;
  background: var(--rc-surface);
  text-align: center;
}
.rc-newsletter-blk--dark {
  background: var(--rc-primary);
  color: #fff;
}
.rc-newsletter-blk__title {
  font-size: clamp(1.375rem, 3vw, 2rem);
  font-weight: 700;
  margin: 0 0 0.5rem;
}
.rc-newsletter-blk__sub {
  font-size: 1rem;
  color: var(--rc-muted);
  margin: 0 0 1.5rem;
}
.rc-newsletter-blk--dark .rc-newsletter-blk__sub { color: rgba(255,255,255,0.75); }
.rc-newsletter-blk__form {
  display: flex;
  gap: 0.5rem;
  max-width: 480px;
  margin: 0 auto;
}
.rc-newsletter-blk__input {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius);
  font-size: 0.9375rem;
  background: var(--rc-surface);
  color: var(--rc-text);
  outline: none;
  transition: border-color 150ms;
}
.rc-newsletter-blk__input:focus { border-color: var(--rc-primary); }
.rc-newsletter-blk--dark .rc-newsletter-blk__input {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.3);
  color: #fff;
}
.rc-newsletter-blk--dark .rc-newsletter-blk__input::placeholder { color: rgba(255,255,255,0.5); }
.rc-newsletter-blk__btn {
  padding: 0.75rem 1.5rem;
  background: var(--rc-primary);
  color: #fff;
  border: none;
  border-radius: var(--rc-radius);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 150ms;
}
.rc-newsletter-blk--dark .rc-newsletter-blk__btn {
  background: var(--rc-white);
  color: var(--rc-primary);
}
.rc-newsletter-blk__btn:disabled { opacity: 0.6; cursor: not-allowed; }
.rc-newsletter-blk__msg { margin-top: 0.75rem; font-size: 0.875rem; font-weight: 500; }
.rc-newsletter-blk__msg--success { color: var(--rc-success, #22c55e); }
.rc-newsletter-blk__msg--error   { color: var(--rc-error,   #ef4444); }
@media (max-width: 479px) { .rc-newsletter-blk__form { flex-direction: column; } }

/* ── Countdown Banner ────────────────────────────────────────────────────── */
.rc-countdown-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  padding: 1.5rem 2rem;
  background: var(--rc-primary);
  color: var(--rc-btn-text);
}
.rc-countdown-banner__copy { flex: 1 1 auto; min-width: 180px; }
.rc-countdown-banner__heading {
  font-size: clamp(1.125rem, 2.5vw, 1.5rem);
  font-weight: 700;
  margin: 0;
  color: inherit;
}
.rc-countdown-banner__sub {
  font-size: 0.9375rem;
  opacity: 0.85;
  margin: 0.25rem 0 0;
  color: inherit;
}
.rc-countdown-banner__timer {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
}
.rc-countdown-banner__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 3.25rem;
}
.rc-countdown-banner__num {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.rc-countdown-banner__label {
  font-size: 0.6875rem;
  opacity: 0.75;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 0.2rem;
}
.rc-countdown-banner__sep {
  font-size: 1.75rem;
  font-weight: 700;
  opacity: 0.5;
  padding-bottom: 0.75rem;
}
.rc-countdown-banner__cta { flex-shrink: 0; }
.rc-countdown-banner__cta-btn {
  display: inline-block;
  padding: 0.75rem 1.75rem;
  background: var(--rc-white);
  color: var(--rc-primary);
  font-weight: 700;
  border-radius: var(--rc-radius);
  text-decoration: none;
  transition: opacity 150ms;
}
.rc-countdown-banner__cta-btn:hover { opacity: 0.9; color: var(--rc-primary); }
.rc-countdown-banner__expired { font-size: 1.125rem; font-weight: 600; opacity: 0.85; margin: 0; }
@media (max-width: 640px) {
  .rc-countdown-banner { padding: 1.25rem 1rem; gap: 1rem; }
  .rc-countdown-banner__num { font-size: 1.5rem; }
  .rc-countdown-banner__unit { min-width: 2.5rem; }
}

/* ── Product Tabs (homepage block) ───────────────────────────────────────── */
.rc-product-tabs__title {
  font-size: clamp(1.375rem, 3vw, 2rem);
  font-weight: 700;
  margin: 0 0 1.5rem;
}
.rc-product-tabs__nav { margin-bottom: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   SINGLE PRODUCT — GALLERY LAYOUT VARIANTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Thumbs-left layout ─────────────────────────────────────────────────── */
.rc-single__gallery--thumbs-left {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 0.75rem;
  align-items: start;
}
.rc-single__thumbs--left {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  max-height: 720px;
  overflow-y: auto;
  scrollbar-width: none;
}
.rc-single__thumbs--left::-webkit-scrollbar { display: none; }
.rc-single__thumbs--left .rc-single__thumb {
  width: 100px;
  height: 133px;
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .rc-single__gallery--thumbs-left {
    grid-template-columns: 1fr;
  }
  .rc-single__thumbs--left {
    flex-direction: row;
    max-height: none;
    overflow-x: auto;
    max-width: 100%;
  }
}

/* ── Stacked layout ─────────────────────────────────────────────────────── */
.rc-single__gallery--stacked {
  position: sticky;
  top: calc(var(--rc-header-h) + 1rem);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 85vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--rc-border) transparent;
  border-radius: var(--rc-radius);
}
.rc-single__stacked-img {
  position: relative;
  border-radius: var(--rc-radius);
  overflow: hidden;
  background: var(--rc-surface);
  flex-shrink: 0;
}
.rc-single__stacked-img .rc-single__img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.rc-single__stacked-img--first .rc-single__img { aspect-ratio: 3 / 4; }
@media (max-width: 767px) {
  .rc-single__gallery--stacked {
    position: relative;
    top: 0;
    max-height: none;
    overflow-y: visible;
  }
}

/* ── Coverflow layout: vertical 3D depth-stack rail + large image ─────────
   Rail shows only 3 items at once (prev/active/next); items further away
   stay in the DOM (auto-advance cycles through all of them) but are
   invisible and non-interactive. Large image gets its own scoped opacity
   transition on top of the existing shared hover-zoom transform, rather
   than editing the shared .rc-single__img rule other layouts also use. */
.rc-single__gallery--coverflow {
  display: grid;
  grid-template-columns: 148px 1fr;
  gap: 1rem;
  align-items: stretch;
}
.rc-single__coverflow {
  position: relative;
  min-height: 480px;
  perspective: 1200px;
}
.rc-single__coverflow-item {
  position: absolute;
  left: 50%;
  width: 116px;
  height: 155px;
  border-radius: 8px;
  overflow: hidden;
  border: none;
  padding: 0;
  cursor: pointer;
  background: var(--rc-surface);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  transition: top 450ms cubic-bezier(0.22, 1, 0.36, 1), transform 450ms cubic-bezier(0.22, 1, 0.36, 1), opacity 450ms ease, box-shadow 450ms ease;
}
.rc-single__coverflow-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Top offsets are percentages of the rail's own height (which stretches to
   match the large image via grid align-items:stretch above), so the 3
   visible items spread across the full available height instead of
   clustering in a small fixed-px band regardless of how tall the image is. */
.rc-single__coverflow-item--active {
  top: 50%;
  transform: translate(-50%, -50%) scale(1.18);
  opacity: 1;
  z-index: 3;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
  cursor: default;
}
.rc-single__coverflow-item--prev {
  top: 14%;
  transform: translate(-50%, -50%) scale(0.8) rotateX(30deg);
  opacity: 0.55;
  z-index: 2;
}
.rc-single__coverflow-item--next {
  top: 86%;
  transform: translate(-50%, -50%) scale(0.8) rotateX(-30deg);
  opacity: 0.55;
  z-index: 2;
}
.rc-single__coverflow-item--hidden {
  top: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}
.rc-single__coverflow-item--prev:hover { opacity: 0.8; }
.rc-single__coverflow-item--next:hover { opacity: 0.8; }
/* Coverflow's large-image transition (fade/slide/zoom/flip/Ken Burns) is handled by the
   shared .rc-transition-frame rules further down — see "GALLERY IMAGE TRANSITIONS". */

@media (max-width: 767px) {
  .rc-single__gallery--coverflow { grid-template-columns: 1fr; }
  .rc-single__coverflow {
    min-height: auto;
    perspective: none;
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0.25rem 0 0.75rem;
  }
  .rc-single__coverflow::-webkit-scrollbar { display: none; }
  .rc-single__coverflow-item,
  .rc-single__coverflow-item--active,
  .rc-single__coverflow-item--prev,
  .rc-single__coverflow-item--next,
  .rc-single__coverflow-item--hidden {
    position: relative;
    top: auto;
    left: auto;
    flex-shrink: 0;
    width: 64px;
    height: 85px;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    box-shadow: none;
  }
  .rc-single__coverflow-item--active { box-shadow: 0 0 0 2px var(--rc-primary); }
}

/* ── Grid layout: every image at once, 2 per row, no large image ──────────── */
.rc-single__gallery--grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.rc-single__grid-img {
  display: block;
  width: 100%;
  border: none;
  padding: 0;
  cursor: zoom-in;
  border-radius: var(--rc-radius);
  overflow: hidden;
  background: var(--rc-surface);
  aspect-ratio: 1 / 1;
}
.rc-single__grid-img .rc-single__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms var(--rc-ease);
}
.rc-single__grid-img:hover .rc-single__img { transform: scale(1.04); }

/* ═══════════════════════════════════════════════════════════════════════════
   GALLERY IMAGE TRANSITIONS — shared by every layout with a single changing
   "large" image (default, thumbs-left, coverflow, grid lightbox). Driven by
   data-transition (server-rendered from the Customizer setting) + data-dir
   (JS, direction of travel) on a .rc-transition-frame wrapper, toggling
   .is-changing for the ~220ms the old image is animating out before the src
   swaps and the new image animates back to rest. Kenburns is the exception —
   its pan/zoom is a continuous animation, not a change-triggered one.
   ═══════════════════════════════════════════════════════════════════════════ */
.rc-transition-frame[data-transition] > img,
.rc-transition-frame[data-transition] .rc-single__img {
  transition: opacity 380ms ease;
}
.rc-transition-frame[data-transition="slide"] > img,
.rc-transition-frame[data-transition="slide"] .rc-single__img,
.rc-transition-frame[data-transition="zoom"] > img,
.rc-transition-frame[data-transition="zoom"] .rc-single__img,
.rc-transition-frame[data-transition="flip"] > img,
.rc-transition-frame[data-transition="flip"] .rc-single__img {
  transition: opacity 380ms ease, transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}
.rc-transition-frame[data-transition="flip"] { perspective: 1200px; }

.rc-transition-frame[data-transition="fade"].is-changing > img,
.rc-transition-frame[data-transition="fade"].is-changing .rc-single__img { opacity: 0; }

.rc-transition-frame[data-transition="slide"][data-dir="1"].is-changing > img,
.rc-transition-frame[data-transition="slide"][data-dir="1"].is-changing .rc-single__img { opacity: 0; transform: translateX(-5%); }
.rc-transition-frame[data-transition="slide"][data-dir="-1"].is-changing > img,
.rc-transition-frame[data-transition="slide"][data-dir="-1"].is-changing .rc-single__img { opacity: 0; transform: translateX(5%); }

.rc-transition-frame[data-transition="zoom"].is-changing > img,
.rc-transition-frame[data-transition="zoom"].is-changing .rc-single__img { opacity: 0; transform: scale(0.92); }

.rc-transition-frame[data-transition="flip"].is-changing > img,
.rc-transition-frame[data-transition="flip"].is-changing .rc-single__img { opacity: 0; transform: rotateY(35deg) scale(0.96); }

.rc-transition-frame[data-transition="kenburns"] > img,
.rc-transition-frame[data-transition="kenburns"] .rc-single__img {
  animation: rc-kenburns 9s ease-in-out infinite alternate;
}
.rc-transition-frame[data-transition="kenburns"].is-changing > img,
.rc-transition-frame[data-transition="kenburns"].is-changing .rc-single__img { opacity: 0; }
@keyframes rc-kenburns {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.08) translate(-1.5%, -1.5%); }
}
@media (prefers-reduced-motion: reduce) {
  .rc-transition-frame[data-transition] > img,
  .rc-transition-frame[data-transition] .rc-single__img { transition: none !important; animation: none !important; }
}

/* ── Grid lightbox ──────────────────────────────────────────────────────── */
.rc-lightbox { position: fixed; inset: 0; z-index: 1200; }
.rc-lightbox-enter { transition: opacity 220ms ease; }
.rc-lightbox-enter-start, .rc-lightbox-enter-end { opacity: 1; }
.rc-lightbox-enter-start { opacity: 0; }
.rc-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  cursor: zoom-out;
}
.rc-lightbox__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 4rem 1.5rem;
}
.rc-lightbox__img-wrap {
  position: relative;
  max-width: min(90vw, 1000px);
  max-height: 100%;
  overflow: hidden;
  border-radius: var(--rc-radius);
}
.rc-lightbox__img { display: block; max-width: 100%; max-height: calc(100vh - 8rem); width: auto; height: auto; margin: 0 auto; object-fit: contain; }
.rc-lightbox__close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  cursor: pointer;
  transition: background 150ms;
}
.rc-lightbox__close:hover { background: rgba(255, 255, 255, 0.28); }
/* Logged-in admin bar sits at z-index:99999, above the lightbox's own 300 — without this the
   close button (top:1.25rem) falls directly under it and eats the click. Same offset values as
   .admin-bar .rc-header elsewhere in this file. */
.admin-bar .rc-lightbox__close { top: calc(32px + 1.25rem); }
@media screen and (max-width: 782px) {
  .admin-bar .rc-lightbox__close { top: calc(46px + 1.25rem); }
}
.rc-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  /* Fixed light/dark pair, not palette-linked: the lightbox backdrop is
     always the same dark overlay regardless of active color palette, so
     these buttons stay a fixed white circle + dark icon rather than
     inheriting .rc-single__nav's palette-aware `color: var(--rc-text)` —
     which, on a dark palette like Midnight, made the icon nearly the same
     color as this rule's white background (near-invisible). */
  background: rgba(255, 255, 255, 0.9);
  color: #18181b;
}
/* Same reasoning as above: .rc-single__nav:hover sets `background:
   var(--rc-white)`, which is a dark tone on dark palettes — override back
   to a fixed light hover state so the (also fixed) dark icon stays visible. */
.rc-lightbox__nav:hover { background: #ffffff; }
.rc-lightbox__nav--prev { left: 1rem; }
.rc-lightbox__nav--next { right: 1rem; }
@media (max-width: 767px) {
  .rc-lightbox__inner { padding: 3rem 0.75rem; }
  .rc-lightbox__nav--prev { left: 0.5rem; }
  .rc-lightbox__nav--next { right: 0.5rem; }
}

/* ── Sticky ATC info column ─────────────────────────────────────────────── */
.rc-sticky-atc__info {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}
.rc-sticky-atc__btn { min-width: 130px; justify-content: center; }

/* ══════════════════════════════════════════════════════════════════════════
   SHOP: Mobile filter drawer + active filter chips
   ══════════════════════════════════════════════════════════════════════════ */

/* Overlay behind drawer */
.rc-filter-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 199;
  cursor: pointer;
}
@media (min-width: 1024px) {
  .rc-filter-overlay { display: none !important; }
}

/* Mobile: sidebar becomes a fixed off-canvas drawer */
@media (max-width: 1023px) {
  .rc-shop-sidebar {
    position: fixed;
    /* Sit below the sticky header (z-index 500, always above this drawer's
       z-index 200) — same --rc-header-h convention every other overlay in
       this file uses (minicart, search, nav flyout). Without it the panel's
       own header row (FILTER title + close button) renders underneath the
       site header and is unreachable. */
    top: var(--rc-header-h, 64px);
    left: 0;
    /* Explicit height instead of bottom:0 — body overflow:hidden breaks the
       top+bottom constraint, making the sidebar expand to document height
       (1900px+) with no scrollable overflow and causing the scroll freeze. */
    height: calc(100vh - var(--rc-header-h, 64px));
    height: calc(100dvh - var(--rc-header-h, 64px));
    width: min(320px, 90vw);
    z-index: 200;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    padding: 1rem 1.25rem;
    /* Extra bottom clearance so the last filter section (and the "Show more"
       toggle) scrolls fully above the fixed bottom nav (60px + safe-area).
       The empty .rc-sidebar-widgets div contributes 16px margin-top after
       the filter panel, so the effective clearance needed is ~110px total. */
    padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px));
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.13);
    transform: translateX(-100%);
    transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
  }
  .rc-shop-sidebar--open {
    transform: translateX(0);
  }
}

/* Close button inside drawer header (mobile only) */
.rc-filter-panel__close {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--rc-muted);
  padding: 0.25rem;
  border-radius: var(--rc-radius);
  transition: color 150ms;
  margin-left: auto;
}
.rc-filter-panel__close:hover { color: var(--rc-text); }
@media (max-width: 1023px) {
  .rc-filter-panel__close { display: flex; align-items: center; }
}

/* Filter FAB — visible on mobile only */
.rc-filter-fab {
  display: none;
}
@media (max-width: 1023px) {
  .rc-filter-fab {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4375rem 0.875rem;
    background: var(--rc-surface);
    border: 1.5px solid var(--rc-border);
    border-radius: var(--rc-radius);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--rc-text);
    transition: border-color 150ms;
    white-space: nowrap;
  }
  .rc-filter-fab:hover { border-color: var(--rc-primary); }
}
.rc-filter-fab__badge {
  background: var(--rc-primary);
  color: #fff;
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 700;
  min-width: 1.125rem;
  height: 1.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.25rem;
  line-height: 1;
}

/* Active filter chips strip */
.rc-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.rc-active-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.25rem 0.625rem 0.25rem 0.75rem;
  background: var(--rc-surface);
  border: 1.5px solid var(--rc-primary);
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--rc-primary);
  cursor: pointer;
  transition: background 150ms, color 150ms;
  white-space: nowrap;
}
.rc-active-chip:hover {
  background: var(--rc-primary);
  color: #fff;
}
.rc-active-chip__x { opacity: 0.7; flex-shrink: 0; }
/* "Clear all" variant — filled primary */
.rc-active-chip--clear {
  background: var(--rc-primary);
  color: #fff;
  border-color: var(--rc-primary);
  font-weight: 600;
  margin-left: auto;
}
.rc-active-chip--clear:hover { opacity: 0.85; background: var(--rc-primary); color: #fff; }

/* Prevent body scroll when mobile drawer is open */
.rc-no-scroll { overflow: hidden; }

/* ═══════════════════════════════════════════════════════════════════════════
   CART PAGE
   ═══════════════════════════════════════════════════════════════════════════ */
.rc-cart-page {
  padding: 2rem 0 4rem;
}

/* Two-column layout */
.rc-cart-page__layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 2.5rem;
  align-items: start;
}
@media (max-width: 1023px) {
  .rc-cart-page__layout { grid-template-columns: 1fr; gap: 2rem; }
}

/* Items column header */
.rc-cart-page__items-header {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1.5px solid var(--rc-border);
}
.rc-cart-page__heading {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0;
}
.rc-cart-page__item-count {
  font-size: 0.875rem;
  color: var(--rc-text-muted);
  font-weight: 500;
}

/* Cart items — inherit drawer card style */
#rc-cart-page-body .rc-cart-item {
  border-radius: var(--rc-radius);
  border: 1.5px solid var(--rc-border);
  margin-bottom: 0.875rem;
  transition: border-color 150ms, box-shadow 150ms;
}
#rc-cart-page-body .rc-cart-item:hover {
  border-color: var(--rc-primary);
  box-shadow: 0 2px 16px rgba(0,0,0,.06);
}
#rc-cart-page-body .rc-cart-item__img { width: 80px; height: 108px; }

/* Coupon row — match drawer */
#rc-cart-page-body .rc-cart-coupon { margin-top: 1.5rem; }

/* Continue shopping */
.rc-cart-page__continue {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--rc-text-muted);
  text-decoration: none;
  transition: color 150ms;
}
.rc-cart-page__continue:hover { color: var(--rc-primary); }

/* Summary card (sticky on desktop) */
.rc-cart-page__col--summary { position: sticky; top: calc(var(--rc-header-h, 64px) + 1.5rem); }
@media (max-width: 1023px) { .rc-cart-page__col--summary { position: static; } }

.rc-cart-page__summary-card {
  background: var(--rc-surface);
  border: 1.5px solid var(--rc-border);
  border-radius: calc(var(--rc-radius) + 2px);
  padding: 1.5rem;
}
.rc-cart-page__summary-heading {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 1.25rem;
  padding-bottom: 0.875rem;
  border-bottom: 1.5px solid var(--rc-border);
}

/* (shipping bar inside summary is styled in the bar section above) */

/* Totals table */
.rc-cart-totals { margin-bottom: 1.25rem; }
.rc-cart-totals__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0;
  font-size: 0.9375rem;
  border-bottom: 1px solid var(--rc-border);
}
.rc-cart-totals__row:last-child { border-bottom: none; }
.rc-cart-totals__label { color: var(--rc-muted); }
.rc-cart-totals__value { font-weight: 500; }
.rc-cart-totals__value--savings { color: var(--rc-success); font-weight: 600; }
.rc-cart-totals__value--muted   { color: var(--rc-muted); font-size: 0.8125rem; }
.rc-cart-totals__free { color: var(--rc-success); font-weight: 600; }

.rc-cart-totals__row--total {
  padding-top: 0.875rem;
  margin-top: 0.25rem;
  border-bottom: none;
}
.rc-cart-totals__row--total .rc-cart-totals__label {
  font-size: 1rem;
  font-weight: 700;
  color: var(--rc-text);
}
.rc-cart-totals__value--total {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--rc-text);
  letter-spacing: -0.02em;
}

/* Checkout button */
.rc-cart-page__checkout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  padding: 0.875rem 1.5rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ORDER CARDS (my account orders list)
   ═══════════════════════════════════════════════════════════════════════════ */
.rc-orders-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.rc-order-card {
  background: var(--rc-surface);
  border: 1.5px solid var(--rc-border);
  border-radius: calc(var(--rc-radius) + 2px);
  overflow: hidden;
  transition: border-color 150ms, box-shadow 150ms;
}
.rc-order-card:hover {
  border-color: var(--rc-primary);
  box-shadow: 0 4px 20px rgba(0,0,0,.07);
}

/* Header row: order # + status | total + date */
.rc-order-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--rc-border);
}
.rc-order-card__id-wrap {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
}
.rc-order-card__number {
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--rc-text);
  text-decoration: none;
  letter-spacing: -0.015em;
}
.rc-order-card__number:hover { color: var(--rc-primary); }

.rc-order-card__summary {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.125rem;
}
.rc-order-card__total {
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.015em;
}
.rc-order-card__date {
  font-size: 0.8125rem;
  color: var(--rc-text-muted);
}

/* Status badge */
.rc-order-status {
  display: inline-flex;
  align-items: center;
  padding: 0.1875rem 0.625rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.rc-order-status--processing  { background: #dbeafe; color: #1d4ed8; }
.rc-order-status--completed   { background: #dcfce7; color: #166534; }
.rc-order-status--on-hold     { background: #fef3c7; color: #92400e; }
.rc-order-status--pending     { background: #f3f4f6; color: #6b7280; }
.rc-order-status--cancelled   { background: #fee2e2; color: #991b1b; }
.rc-order-status--refunded    { background: #ede9fe; color: #5b21b6; }
.rc-order-status--failed      { background: #fee2e2; color: #991b1b; }

/* Product thumbnail strip */
.rc-order-card__thumbs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid var(--rc-border);
}
.rc-order-card__thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: calc(var(--rc-radius) - 2px);
  border: 1px solid var(--rc-border);
  flex-shrink: 0;
}
.rc-order-card__thumb-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: calc(var(--rc-radius) - 2px);
  background: var(--rc-surface);
  border: 1.5px dashed var(--rc-border);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--rc-text-muted);
  flex-shrink: 0;
}

/* Actions row */
.rc-order-card__actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.875rem 1.25rem;
}

/* Pagination */
.rc-orders-pagination {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   POST CARD ENHANCEMENTS
   ═══════════════════════════════════════════════════════════════════════════ */
.rc-post-card__img-outer {
  position: relative;
  display: block;
}
.rc-post-card__cat-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  background: var(--rc-primary);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 999px;
  text-decoration: none;
  transition: background 150ms;
  z-index: 1;
  pointer-events: auto;
}
.rc-post-card__cat-badge:hover { background: color-mix(in srgb, var(--rc-primary) 80%, #000); }

.rc-post-card__avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1.5px solid var(--rc-border);
}
.rc-post-card__author {
  font-weight: 600;
  color: var(--rc-text);
  font-size: 0.8125rem;
}
.rc-post-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
}

/* Featured card: push category badge to larger position */
.rc-post-grid__item--featured .rc-post-card__cat-badge {
  top: 1rem;
  left: 1rem;
  font-size: 0.75rem;
  padding: 0.3125rem 0.75rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   404 REDESIGN
   ═══════════════════════════════════════════════════════════════════════════ */
.rc-404-main {
  min-height: 80vh;
  display: flex;
  align-items: center;
}
.rc-404-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  padding: 5rem 0;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 767px) {
  .rc-404-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding: 3rem 0;
    text-align: center;
  }
  .rc-404-quicklinks { justify-content: center; }
  .rc-404-search { max-width: 400px; margin: 0 auto; }
}

/* Visual column — giant glitch number */
.rc-404-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}
.rc-404-glitch {
  font-size: clamp(6rem, 16vw, 11rem);
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px var(--rc-border);
  position: relative;
}
.rc-404-glitch::before,
.rc-404-glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  -webkit-text-stroke: 2px var(--rc-primary);
  color: transparent;
  clip-path: inset(0 0 60% 0);
  animation: rc-glitch-top 3.5s infinite steps(1);
}
.rc-404-glitch::after {
  -webkit-text-stroke: 2px var(--rc-accent, var(--rc-primary));
  clip-path: inset(60% 0 0 0);
  animation: rc-glitch-bottom 3.5s infinite steps(1);
}
@keyframes rc-glitch-top {
  0%,90%,100% { transform: none; opacity: 0; }
  92%          { transform: translateX(-3px) skewX(-3deg); opacity: 1; }
  94%          { transform: translateX(3px) skewX(3deg); opacity: 1; }
  96%          { transform: none; opacity: 0; }
}
@keyframes rc-glitch-bottom {
  0%,90%,100% { transform: none; opacity: 0; }
  91%          { transform: translateX(3px) skewX(3deg); opacity: 1; }
  93%          { transform: translateX(-3px) skewX(-3deg); opacity: 1; }
  95%          { transform: none; opacity: 0; }
}

/* Content column */
.rc-404-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rc-primary);
  margin-bottom: 0.75rem;
}
.rc-404__title {
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 0 0 0.875rem;
}
.rc-404__desc {
  color: var(--rc-text-muted);
  font-size: 1rem;
  line-height: 1.65;
  margin: 0 0 1.75rem;
  max-width: 400px;
}
@media (max-width: 767px) { .rc-404__desc { margin-left: auto; margin-right: auto; } }

/* Quick links */
.rc-404-quicklinks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-bottom: 1.75rem;
}
.rc-404-quicklink {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.5rem 0.875rem;
  border: 1.5px solid var(--rc-border);
  border-radius: var(--rc-radius);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--rc-text);
  text-decoration: none;
  transition: border-color 150ms, color 150ms, background 150ms;
}
.rc-404-quicklink:hover {
  border-color: var(--rc-primary);
  color: var(--rc-primary);
  background: color-mix(in srgb, var(--rc-primary) 6%, transparent);
}
.rc-404-quicklink__icon {
  display: flex;
  align-items: center;
  opacity: 0.7;
}

/* Search bar */
.rc-404-search {
  display: flex;
  gap: 0.5rem;
  max-width: 440px;
}
.rc-404-search .rc-input {
  flex: 1;
  height: 44px;
}
.rc-404-search .rc-btn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CHECKOUT FORM POLISH
   ═══════════════════════════════════════════════════════════════════════════ */
.rc-checkout-wrap {
  padding: 2rem 0 5rem;
}
.rc-checkout-layout {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 3rem;
  align-items: start;
}
@media (max-width: 1023px) {
  .rc-checkout-layout { grid-template-columns: 1fr; gap: 2rem; }
  .rc-checkout-layout > *:last-child { order: -1; }
}
.rc-checkout-heading {
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 0 0 1.5rem;
  padding-bottom: 0.875rem;
  border-bottom: 1.5px solid var(--rc-border);
}
.rc-checkout-section {
  background: var(--rc-surface);
  border: 1.5px solid var(--rc-border);
  border-radius: calc(var(--rc-radius) + 2px);
  padding: 1.5rem;
  margin-bottom: 1.25rem;
}
.rc-checkout-section h3 {
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 1.25rem;
  color: var(--rc-text);
}

/* Floating labels for checkout fields */
.rc-field-wrap {
  position: relative;
  margin-bottom: 1.125rem;
}
.rc-field-wrap label {
  position: absolute;
  top: 50%;
  left: 0.875rem;
  transform: translateY(-50%);
  font-size: 0.9375rem;
  color: var(--rc-text-muted);
  pointer-events: none;
  transition: top 140ms ease, transform 140ms ease, font-size 140ms ease, color 140ms ease;
  z-index: 1;
  background: transparent;
  padding: 0 0.125rem;
}
.rc-field-wrap input:focus + label,
.rc-field-wrap input:not(:placeholder-shown) + label,
.rc-field-wrap select:focus + label,
.rc-field-wrap select:not([value=""]) + label {
  top: 0;
  transform: translateY(-50%);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--rc-primary);
  background: var(--rc-surface);
}
.rc-field-wrap input,
.rc-field-wrap select {
  width: 100%;
  height: 52px;
  padding: 1rem 0.875rem 0.25rem;
  border: 1.5px solid var(--rc-border);
  border-radius: var(--rc-radius);
  font-size: 0.9375rem;
  font-family: var(--rc-font);
  background: var(--rc-surface);
  color: var(--rc-text);
  outline: none;
  transition: border-color 150ms;
}
.rc-field-wrap input:focus,
.rc-field-wrap select:focus { border-color: var(--rc-primary); }

/* Order review sidebar */
.rc-checkout-order-review {
  background: var(--rc-surface);
  border: 1.5px solid var(--rc-border);
  border-radius: calc(var(--rc-radius) + 2px);
  padding: 1.5rem;
  position: sticky;
  top: calc(var(--rc-header-h, 64px) + 1.5rem);
}
@media (max-width: 1023px) { .rc-checkout-order-review { position: static; } }
.rc-checkout-order-review h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1.5px solid var(--rc-border);
}

/* WC form fields override */
.woocommerce-checkout .woocommerce-input-wrapper { display: block; }
.woocommerce-checkout .woocommerce-address-fields__field-wrapper,
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 639px) {
  .woocommerce-checkout .woocommerce-address-fields__field-wrapper,
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper { grid-template-columns: 1fr; }
}
.woocommerce-checkout .form-row { margin: 0 0 1rem; }
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row select {
  width: 100%;
  height: 48px;
  padding: 0 0.875rem;
  border: 1.5px solid var(--rc-border);
  border-radius: var(--rc-radius);
  font-size: 0.9375rem;
  font-family: var(--rc-font);
  background: var(--rc-surface);
  color: var(--rc-text);
  outline: none;
  transition: border-color 150ms;
}
.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row select:focus { border-color: var(--rc-primary); }
.woocommerce-checkout label { font-size: 0.8125rem; font-weight: 600; color: var(--rc-text); margin-bottom: 0.3125rem; display: block; }
.woocommerce-checkout .form-row.form-row-wide { grid-column: 1 / -1; }
.woocommerce-checkout #place_order {
  width: 100%;
  height: 52px;
  font-size: 1rem;
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MY ACCOUNT POLISH
   ═══════════════════════════════════════════════════════════════════════════ */
.rc-account-content .woocommerce-MyAccount-content > h2:first-child {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  margin-bottom: 1.5rem;
  padding-bottom: 0.875rem;
  border-bottom: 1.5px solid var(--rc-border);
}
/* WC address cards */
.woocommerce-Addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 639px) { .woocommerce-Addresses { grid-template-columns: 1fr; } }
.woocommerce-Address {
  background: var(--rc-surface);
  border: 1.5px solid var(--rc-border);
  border-radius: calc(var(--rc-radius) + 2px);
  padding: 1.25rem;
}
.woocommerce-Address-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.875rem; }
.woocommerce-Address-title h3 { font-size: 0.9375rem; font-weight: 700; margin: 0; }
.woocommerce-Address address { font-style: normal; font-size: 0.9rem; color: var(--rc-muted); line-height: 1.65; }

/* ═══════════════════════════════════════════════════════════════════════════
   WC BLOCKS — CART & CHECKOUT FULL REDESIGN
   Targets Gutenberg Cart/Checkout block classes to match RC design DNA.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Override WC Blocks color tokens ──────────────────────────────────────── */
:root {
  --wc-block-color-primary:            var(--rc-primary);
  --wc-block-color-primary-dark:       var(--rc-primary);
  --wc-block-color-background:         var(--rc-white);
  --wc-block-border-radius:            var(--rc-radius);
  --wc-block-border-color:             var(--rc-border);
  --wc-block-global-box-shadow:        none;
  --wc-block-checkout-step-number-bg:  var(--rc-primary);
  --wc-block-checkout-field-font-size: 0.9375rem;
}

/* ── WC Blocks page‑level wrapper ─────────────────────────────────────────── */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
  font-family: var(--rc-font) !important;
  color: var(--rc-text) !important;
  padding: 2.5rem 0 5rem !important;
}

/* ── Two‑column sidebar layout (WC uses flexbox, not grid) ───────────────── */
.wc-block-components-sidebar-layout {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 2rem !important;
  align-items: start !important;
}
.wc-block-components-main {
  flex: 1 1 0 !important;
  min-width: 280px !important;
}
/* Sticky sidebar on desktop */
.wc-block-components-sidebar {
  flex: 0 0 380px !important;
  width: 380px !important;
  position: sticky !important;
  top: calc(var(--rc-header-h, 64px) + 1.5rem) !important;
}
@media (max-width: 1023px) {
  .wc-block-components-sidebar {
    flex: 1 1 100% !important;
    width: 100% !important;
    position: static !important;
  }
}

/* ═══════════════════════════════════════════
   CART BLOCK
   ═══════════════════════════════════════════ */

/* Cart items — table → card rows */
.wc-block-cart-items {
  border-collapse: separate !important;
  border-spacing: 0 0.625rem !important;
  width: 100%;
}
.wc-block-cart-items__header { display: none !important; }
/* Row: transparent — borders live on td cells so border-radius works correctly */
.wc-block-cart-items__row {
  background: transparent !important;
}
/* All td: top + bottom border, no left/right */
.wc-block-cart-items__row td {
  border-top: 1.5px solid var(--rc-border) !important;
  border-bottom: 1.5px solid var(--rc-border) !important;
  border-left: none !important;
  border-right: none !important;
  background: var(--rc-white) !important;
  transition: border-color 160ms !important;
}
/* First td: left border + left rounded corners */
.wc-block-cart-items__row td:first-child {
  border-left: 1.5px solid var(--rc-border) !important;
  border-radius: var(--rc-radius) 0 0 var(--rc-radius) !important;
}
/* Last td: right border + right rounded corners */
.wc-block-cart-items__row td:last-child {
  border-right: 1.5px solid var(--rc-border) !important;
  border-radius: 0 var(--rc-radius) var(--rc-radius) 0 !important;
}
/* Hover: shift border colour on all tds */
.wc-block-cart-items__row:hover td {
  border-color: var(--rc-primary) !important;
}

/* Product image */
.wc-block-cart-item__image {
  padding: 1rem 0.5rem 1rem 1rem !important;
  width: 84px !important;
}
.wc-block-cart-item__image a { display: block; }
.wc-block-cart-item__image img {
  width: 72px !important;
  height: 96px !important;
  object-fit: cover !important;
  border-radius: calc(var(--rc-radius) - 2px) !important;
  display: block !important;
}

/* Product name + meta */
.wc-block-cart-item__product { padding: 1rem 0.75rem !important; vertical-align: middle !important; }
.wc-block-components-product-name {
  font-family: var(--rc-font) !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  color: var(--rc-text) !important;
  text-decoration: none !important;
  letter-spacing: -0.01em !important;
  display: block !important;
  margin-bottom: 0.25rem !important;
  line-height: 1.3 !important;
}
.wc-block-components-product-name:hover { color: var(--rc-primary) !important; }
.wc-block-cart-item__prices { margin: 0.25rem 0 !important; }
.wc-block-components-product-price { font-family: var(--rc-font) !important; }
.wc-block-components-product-price__regular {
  font-size: 0.8125rem !important;
  /* var(--rc-muted) alone measured 3.4:1 against the light cart/checkout
     summary background — under the 4.5:1 minimum. Mixed toward var(--rc-text)
     rather than a hardcoded black (or a hardcoded hex, which would only be
     right for one palette): this pushes darker on light-on-dark palettes and
     LIGHTER on light-on-dark ones like "Midnight" (light --rc-muted on a dark
     surface), instead of always darkening regardless of which direction
     actually improves contrast for the active palette. Verified against all
     5 built-in presets' own surfaces, accounting for the opacity below too. */
  color: color-mix(in srgb, var(--rc-muted) 45%, var(--rc-text)) !important;
  opacity: 0.8 !important;
}
.wc-block-components-product-price__value.is-discounted,
.wc-block-components-product-price__value { color: var(--rc-text) !important; font-weight: 600 !important; }
.wc-block-components-product-metadata__description {
  font-size: 0.8125rem !important;
  color: var(--rc-muted) !important;
  margin-top: 0.25rem !important;
}

/* Sale badge */
.wc-block-components-sale-badge {
  background: var(--rc-primary) !important;
  color: #fff !important;
  font-family: var(--rc-font) !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  padding: 0.125rem 0.5rem !important;
  border-radius: 999px !important;
  border: none !important;
  margin-left: 0.25rem !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.2em !important;
}
/* Adds space between "Save" text node and the price span */
.wc-block-components-sale-badge .woocommerce-Price-amount { margin-left: 0.15em !important; }

/* Qty selector — pill style */
.wc-block-cart-item__quantity { padding: 0 0.75rem !important; vertical-align: middle !important; }
.wc-block-components-quantity-selector {
  display: inline-flex !important;
  align-items: center !important;
  background: var(--rc-surface) !important;
  border: 1.5px solid var(--rc-border) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  height: 38px !important;
  box-shadow: none !important;
}
.wc-block-components-quantity-selector__button {
  width: 38px !important;
  height: 36px !important;
  background: none !important;
  border: none !important;
  font-size: 1.0625rem !important;
  font-weight: 400 !important;
  color: var(--rc-text) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 120ms !important;
  padding: 0 !important;
  border-radius: 0 !important;
  line-height: 1 !important;
}
.wc-block-components-quantity-selector__button:hover:not(:disabled) {
  background: var(--rc-border) !important;
}
.wc-block-components-quantity-selector__button:disabled { opacity: 0.3 !important; cursor: not-allowed !important; }
/* WC renders − and + as text nodes directly; no overrides needed for content */
.wc-block-components-quantity-selector__input {
  width: 36px !important;
  text-align: center !important;
  border: none !important;
  border-left: 1.5px solid var(--rc-border) !important;
  border-right: 1.5px solid var(--rc-border) !important;
  background: transparent !important;
  font-family: var(--rc-font) !important;
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  color: var(--rc-text) !important;
  padding: 0 !important;
  height: 100% !important;
  box-shadow: none !important;
  outline: none !important;
  -moz-appearance: textfield !important;
}
.wc-block-components-quantity-selector__input::-webkit-outer-spin-button,
.wc-block-components-quantity-selector__input::-webkit-inner-spin-button { -webkit-appearance: none !important; }

/* Remove button */
.wc-block-cart-item__remove-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.3rem !important;
  font-family: var(--rc-font) !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  color: var(--rc-muted) !important;
  text-decoration: none !important;
  margin-top: 0.625rem !important;
  padding: 0.25rem 0 !important;
  border: none !important;
  background: none !important;
  cursor: pointer !important;
  transition: color 140ms !important;
}
.wc-block-cart-item__remove-link:hover { color: var(--rc-error) !important; }

/* Item row total (right cell) */
.wc-block-cart-item__total { display: table-cell !important; padding: 1rem 1rem 1rem 0.5rem !important; text-align: right !important; vertical-align: middle !important; }
.wc-block-cart-item__total .wc-block-components-product-price__value {
  font-family: var(--rc-font) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--rc-text) !important;
}

/* ── Cart sidebar ─────────────────────────────────────────────────────────── */
.wc-block-cart__sidebar {
  background: var(--rc-surface) !important;
  border: 1.5px solid var(--rc-border) !important;
  border-radius: calc(var(--rc-radius) + 2px) !important;
  padding: 1.5rem !important;
  overflow: visible !important;
}
.wc-block-cart__totals-title {
  font-family: var(--rc-font) !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
  color: var(--rc-text) !important;
  margin: 0 0 1.125rem !important;
  padding-bottom: 0.875rem !important;
  border-bottom: 1.5px solid var(--rc-border) !important;
}

/* Coupon panel */
.wc-block-components-totals-coupon.wc-block-components-panel {
  border: none !important;
  padding: 0 !important;
  background: none !important;
}
.wc-block-components-panel__button {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  background: none !important;
  border: none !important;
  border-bottom: 1px solid var(--rc-border) !important;
  padding: 0.625rem 0 0.75rem !important;
  font-family: var(--rc-font) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: var(--rc-muted) !important;
  cursor: pointer !important;
  transition: color 140ms !important;
  margin-bottom: 0.5rem !important;
}
.wc-block-components-panel__button:hover { color: var(--rc-primary) !important; }
.wc-block-components-panel__button-icon { width: 16px !important; height: 16px !important; color: inherit !important; }
/* Coupon input + button row — compact */
.wc-block-components-totals-coupon__form {
  display: flex !important;
  gap: 0.375rem !important;
  margin-bottom: 0.75rem !important;
  align-items: center !important;
}
.wc-block-components-totals-coupon__input { flex: 1 !important; }
/* Override any text-input wrapper height that bleeds in */
.wc-block-components-totals-coupon__input.wc-block-components-text-input,
.wc-block-components-totals-coupon .wc-block-components-text-input {
  margin-bottom: 0 !important;
}
.wc-block-components-totals-coupon__input input,
.wc-block-components-totals-coupon .wc-block-components-text-input input {
  width: 100% !important;
  height: 36px !important;
  padding: 0 0.75rem !important;
  border: 1.5px solid var(--rc-border) !important;
  border-radius: var(--rc-radius-sm) !important;
  font-family: var(--rc-font) !important;
  font-size: 0.8125rem !important;
  background: var(--rc-white) !important;
  color: var(--rc-text) !important;
  outline: none !important;
  transition: border-color 150ms !important;
  box-shadow: none !important;
}
.wc-block-components-totals-coupon__input input:focus,
.wc-block-components-totals-coupon .wc-block-components-text-input input:focus { border-color: var(--rc-primary) !important; }
/* Hide floating label inside coupon input */
.wc-block-components-totals-coupon .wc-block-components-text-input label { display: none !important; }
.wc-block-components-totals-coupon__button {
  height: 36px !important;
  padding: 0 0.875rem !important;
  background: var(--rc-primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--rc-radius-sm) !important;
  font-family: var(--rc-font) !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: opacity 150ms !important;
  flex-shrink: 0 !important;
}
.wc-block-components-totals-coupon__button:hover { opacity: 0.82 !important; }

/* Totals rows — clean, borderless except footer */
.wc-block-components-totals-wrapper { padding: 0 !important; }
.wc-block-components-totals-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0.375rem 0 !important;
  border-bottom: none !important;
  font-family: var(--rc-font) !important;
  font-size: 0.9375rem !important;
}
.wc-block-components-totals-item__label {
  font-weight: 400 !important;
  color: var(--rc-muted) !important;
}
.wc-block-formatted-money-amount.wc-block-components-totals-item__value {
  font-weight: 600 !important;
  color: var(--rc-text) !important;
}
/* Grand total row */
.wc-block-components-totals-footer-item {
  border-top: 1.5px solid var(--rc-border) !important;
  border-bottom: none !important;
  padding: 0.875rem 0 0.5rem !important;
  margin-top: 0.25rem !important;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--rc-text) !important;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item-tax-value {
  font-size: 1.375rem !important;
  font-weight: 800 !important;
  color: var(--rc-text) !important;
  letter-spacing: -0.025em !important;
}

/* "Proceed to Checkout" button */
.wc-block-cart__submit-button,
a.wc-block-cart__submit-button,
.wc-block-cart__submit-container .wc-block-components-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 52px !important;
  background: var(--rc-primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--rc-radius) !important;
  font-family: var(--rc-font) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: opacity 160ms, box-shadow 160ms !important;
  box-shadow: 0 4px 18px rgba(var(--rc-primary-rgb), 0.28) !important;
  margin-top: 1.25rem !important;
}
.wc-block-cart__submit-button:hover,
a.wc-block-cart__submit-button:hover { opacity: 0.88 !important; box-shadow: 0 6px 24px rgba(var(--rc-primary-rgb), 0.4) !important; }
.wc-block-cart__submit-button .wc-block-components-button__text { font-weight: 700 !important; color: #fff !important; font-size: 1rem !important; }

/* Payment icons row below checkout button */
.wc-block-cart__payment-options {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 0.375rem !important;
  margin-top: 0.875rem !important;
  opacity: 0.5 !important;
}

/* Secure badge text */
.wc-block-components-totals-item__description {
  font-size: 0.8125rem !important;
  color: var(--rc-muted) !important;
}

/* ═══════════════════════════════════════════
   CHECKOUT BLOCK
   ═══════════════════════════════════════════ */

/* Counter-based step numbering — reset on the form container */
.wc-block-checkout__form {
  counter-reset: rc-checkout-step !important;
}

/* Step cards */
.wc-block-components-checkout-step {
  background: var(--rc-white) !important;
  border: 1.5px solid var(--rc-border) !important;
  border-radius: calc(var(--rc-radius) + 2px) !important;
  padding: 1.5rem !important;
  margin-bottom: 0.75rem !important;
  position: relative !important;
  counter-increment: rc-checkout-step !important;
}
/* Connector line — spans gap between step cards */
.wc-block-components-checkout-step:not(:last-child)::after {
  content: '' !important;
  position: absolute !important;
  left: calc(1.5rem + 13px) !important;
  bottom: -0.875rem !important;
  width: 2px !important;
  height: 0.875rem !important;
  background: var(--rc-border) !important;
  z-index: 2 !important;
  border-radius: 1px !important;
}
.wc-block-components-checkout-step__heading-container {
  margin-bottom: 1.25rem !important;
  padding-bottom: 0.875rem !important;
  border-bottom: 1.5px solid var(--rc-border) !important;
}
/* Heading: flex row so ::before circle sits left of the title */
.wc-block-components-checkout-step__heading {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  flex-direction: row !important;
}
/* Step number circle via CSS counter — appears before the title */
.wc-block-components-checkout-step__heading::before {
  content: counter(rc-checkout-step) !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  background: var(--rc-primary) !important;
  color: #fff !important;
  border-radius: 50% !important;
  font-family: var(--rc-font) !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  line-height: 28px !important;
  text-align: center !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rc-primary) 18%, transparent) !important;
  order: -1 !important;
}
/* Hide WC Blocks' own step indicator (empty span, managed by WC JS for checkmarks) */
.wc-block-components-checkout-step__heading-content {
  display: none !important;
}
.wc-block-components-checkout-step__title,
.wc-block-components-title {
  font-family: var(--rc-font) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
  color: var(--rc-text) !important;
}

/* Text inputs (floating label style) */
.wc-block-components-text-input {
  position: relative !important;
  margin-bottom: 0.875rem !important;
}
.wc-block-components-text-input input {
  width: 100% !important;
  height: 52px !important;
  padding: 1.25rem 0.875rem 0.25rem !important;
  border: 1.5px solid var(--rc-border) !important;
  border-radius: var(--rc-radius) !important;
  font-family: var(--rc-font) !important;
  font-size: 0.9375rem !important;
  background: var(--rc-white) !important;
  color: var(--rc-text) !important;
  outline: none !important;
  transition: border-color 150ms, box-shadow 150ms !important;
  box-shadow: none !important;
}
.wc-block-components-text-input input:focus {
  border-color: var(--rc-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rc-primary) 15%, transparent) !important;
}
.wc-block-components-text-input label {
  font-family: var(--rc-font) !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: var(--rc-muted) !important;
  pointer-events: none !important;
}
.wc-block-components-text-input.is-active label,
.wc-block-components-text-input input:focus ~ label { color: var(--rc-primary) !important; }

/* Country / state select */
.wc-blocks-components-select { margin-bottom: 0.875rem !important; }
.wc-blocks-components-select__select {
  width: 100% !important;
  height: 52px !important;
  padding: 1.125rem 2.5rem 0.25rem 0.875rem !important;
  border: 1.5px solid var(--rc-border) !important;
  border-radius: var(--rc-radius) !important;
  font-family: var(--rc-font) !important;
  font-size: 0.9375rem !important;
  background: var(--rc-white) !important;
  color: var(--rc-text) !important;
  outline: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer !important;
  transition: border-color 150ms !important;
}
.wc-blocks-components-select__select:focus {
  border-color: var(--rc-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rc-primary) 15%, transparent) !important;
}
.wc-blocks-components-select__label {
  font-family: var(--rc-font) !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  color: var(--rc-muted) !important;
  position: absolute !important;
  top: 0.4375rem !important;
  left: 0.9375rem !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
.wc-blocks-components-select__container { position: relative !important; background: var(--rc-white) !important; border-radius: var(--rc-radius) !important; }
.wc-blocks-components-select__expand {
  position: absolute !important;
  right: 0.875rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
  color: var(--rc-muted) !important;
}

/* Address form — 2-column grid */
.wc-block-components-address-form {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  column-gap: 0.875rem !important;
}
.wc-block-components-address-form__email,
.wc-block-components-address-form__phone,
.wc-block-components-address-form__address_1,
.wc-block-components-address-form__address_2-toggle,
.wc-block-components-address-form__address_2-hidden-input,
.wc-block-components-address-form__country { grid-column: 1 / -1 !important; }
@media (max-width: 599px) {
  .wc-block-components-address-form { grid-template-columns: 1fr !important; }
  .wc-block-components-address-form > * { grid-column: 1 !important; }
}

/* Checkbox */
.wc-block-components-checkbox {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  cursor: pointer !important;
}
/* The LABEL is the real flex container; the SVG mark is position:absolute inside it.
   position:relative is mandatory so the SVG overlays the checkbox, not escapes it. */
.wc-block-components-checkbox label {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  cursor: pointer !important;
}
.wc-block-components-checkbox__input[type="checkbox"] {
  flex-shrink: 0 !important;
  position: static !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 1.5px solid var(--rc-border) !important;
  border-radius: 4px !important;
  cursor: pointer !important;
}
.wc-block-components-checkbox__input[type="checkbox"]:checked {
  border-color: var(--rc-primary) !important;
}
.wc-block-components-checkbox__mark {
  fill: var(--rc-primary) !important;
}
.wc-block-components-checkbox__label {
  font-family: var(--rc-font) !important;
  font-size: 0.875rem !important;
  color: var(--rc-text) !important;
  line-height: 1.5 !important;
}

/* "Add a note" toggle */
.wc-block-checkout__add-note {
  padding-top: 0.25rem !important;
}
.wc-block-checkout__add-note .wc-block-components-checkbox {
  margin-bottom: 0.75rem !important;
}
/* The real structure is: div > label > input + svg + span.
   Make the label the flex row so input and text sit side-by-side. */
.wc-block-checkout__add-note .wc-block-components-checkbox label {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.75rem !important;
  cursor: pointer !important;
}
.wc-block-checkout__add-note .wc-block-components-checkbox__input {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  top: auto !important;
  float: none !important;
}
.wc-block-checkout__add-note .wc-block-components-checkbox__label {
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--rc-text) !important;
}

/* Payment section — no payment notice */
.wc-block-checkout__no-payment-methods-notice.wc-block-components-notice-banner {
  background: #fef9c3 !important;
  border: 1.5px solid #f59e0b !important;
  border-radius: var(--rc-radius) !important;
  color: #854d0e !important;
  font-family: var(--rc-font) !important;
  font-size: 0.875rem !important;
  padding: 0.875rem 1rem !important;
}

/* Terms line */
.wc-block-checkout__terms {
  font-family: var(--rc-font) !important;
  font-size: 0.8125rem !important;
  color: var(--rc-muted) !important;
  line-height: 1.55 !important;
}
.wc-block-checkout__terms a { color: var(--rc-primary) !important; }
.wc-block-checkout__terms--with-separator {
  padding-top: 0.875rem !important;
  margin-top: 0.5rem !important;
  border-top: 1px solid var(--rc-border) !important;
}

/* Actions row: return link + place order */
.wc-block-checkout__actions_row {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.875rem !important;
  padding-top: 0.5rem !important;
}

/* "← Return to cart" — outline secondary button using accent color */
.wc-block-components-checkout-return-to-cart-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.375rem !important;
  height: 44px !important;
  padding: 0 1.25rem !important;
  background: transparent !important;
  border: 1.5px solid var(--rc-accent, var(--rc-border)) !important;
  border-radius: var(--rc-radius) !important;
  font-family: var(--rc-font) !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: var(--rc-accent, var(--rc-muted)) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: background 140ms, color 140ms, border-color 140ms !important;
  width: 100% !important;
}
.wc-block-components-checkout-return-to-cart-button:hover {
  background: color-mix(in srgb, var(--rc-accent) 8%, transparent) !important;
  border-color: var(--rc-accent) !important;
  color: var(--rc-accent) !important;
}

/* "Place Order" button */
.wc-block-components-checkout-place-order-button,
button.wc-block-components-checkout-place-order-button {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 56px !important;
  background: var(--rc-primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--rc-radius) !important;
  font-family: var(--rc-font) !important;
  font-size: 1.0625rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: opacity 160ms, box-shadow 160ms !important;
  box-shadow: 0 4px 20px rgba(var(--rc-primary-rgb), 0.32) !important;
}
.wc-block-components-checkout-place-order-button:hover {
  opacity: 0.88 !important;
  box-shadow: 0 8px 28px rgba(var(--rc-primary-rgb), 0.44) !important;
}
.wc-block-components-checkout-place-order-button .wc-block-components-button__text,
.wc-block-components-checkout-place-order-button__text {
  font-size: 1.0625rem !important;
  font-weight: 700 !important;
  color: #fff !important;
}

/* ── Checkout order summary sidebar ──────────────────────────────────────── */
/* WC Blocks uses --wc-block-checkout--sidebar-width internally; override it here */
.wc-block-checkout { --wc-block-checkout--sidebar-width: 420px !important; }
.wc-block-checkout__sidebar {
  width: 420px !important;
  min-width: 420px !important;
  background: var(--rc-surface) !important;
  border: 1.5px solid var(--rc-border) !important;
  border-radius: calc(var(--rc-radius) + 2px) !important;
  padding: 1.5rem !important;
  overflow: hidden !important;
}
/* On mobile the sidebar stacks below the form — let it fill the container width */
@media (max-width: 1023px) {
  .wc-block-checkout { --wc-block-checkout--sidebar-width: 100% !important; }
  .wc-block-checkout__sidebar {
    width: 100% !important;
    min-width: 0 !important;
  }
  /* On mobile, WC Blocks renders the order summary inline in the step flow (not in our
     padded sidebar card). The coupon link, coupon form, each totals row and the
     grand-total wrapper all sit at full checkout width with zero horizontal padding.
     Add a consistent inset that matches what the order-items list already uses (16px). */
  .wp-block-woocommerce-checkout-order-summary-coupon-form-block,
  .wp-block-woocommerce-checkout-order-summary-subtotal-block,
  .wp-block-woocommerce-checkout-order-summary-discount-block,
  .wp-block-woocommerce-checkout-order-summary-fee-block,
  .wp-block-woocommerce-checkout-order-summary-shipping-block,
  .wc-block-checkout .wc-block-components-totals-wrapper,
  .wc-block-checkout .wc-block-components-totals-coupon {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}
/* Strip inner WC panel borders — only the outer card border + title divider remain */
.wc-block-checkout__sidebar .wc-block-components-panel,
.wc-block-checkout__sidebar .wc-block-components-panel__content,
.wc-block-checkout__sidebar .wc-block-components-totals-coupon,
.wc-block-checkout__sidebar .wc-block-components-totals-wrapper,
.wc-block-checkout__sidebar .wc-block-order-summary-coupon,
.wc-block-checkout__sidebar .wc-block-components-checkout-order-summary,
.wc-block-checkout__sidebar .wc-block-components-checkout-order-summary > * {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
/* Remove the panel toggle button's bottom border inside sidebar — no divider spam */
.wc-block-checkout__sidebar .wc-block-components-panel__button {
  border-bottom: none !important;
  padding-bottom: 0.375rem !important;
  margin-bottom: 0.25rem !important;
  color: var(--rc-muted) !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
}
/* Remove inter-item borders from order summary items */
.wc-block-checkout__sidebar .wc-block-components-order-summary-item,
.wc-block-checkout__sidebar .wc-block-components-totals-item {
  border-bottom: none !important;
  border-top: none !important;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}
/* Single divider above grand total only */
.wc-block-checkout__sidebar .wc-block-components-totals-footer-item {
  border-top: 1.5px solid var(--rc-border) !important;
  border-bottom: none !important;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}
/* Coupon row horizontal breathing room */
.wc-block-checkout__sidebar .wc-block-components-totals-coupon,
.wc-block-checkout__sidebar .wc-block-order-summary-coupon {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}

/* "Order summary · Rs 249" title bar */
.wc-block-components-checkout-order-summary__title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  cursor: pointer !important;
  padding-bottom: 0.875rem !important;
  border-bottom: 1.5px solid var(--rc-border) !important;
  margin-bottom: 0.875rem !important;
}
.wc-block-components-checkout-order-summary__title-text {
  font-family: var(--rc-font) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
  color: var(--rc-text) !important;
}
.wc-block-components-checkout-order-summary__title-price {
  font-family: var(--rc-font) !important;
  font-size: 1.125rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: var(--rc-text) !important;
}
.wc-block-components-checkout-order-summary__title-icon { display: none !important; }

/* Order summary items — no inter-item borders, just spacing */
.wc-block-components-order-summary-item {
  display: grid !important;
  grid-template-columns: 56px 1fr auto !important;
  gap: 0.625rem !important;
  align-items: center !important;
  padding: 0.5rem 0 !important;
  border-bottom: none !important;
}
.wc-block-components-order-summary-item__image { position: relative !important; }
.wc-block-components-order-summary-item__image img {
  width: 56px !important;
  height: 56px !important;
  object-fit: cover !important;
  border-radius: calc(var(--rc-radius) - 2px) !important;
  border: 1.5px solid var(--rc-border) !important;
  display: block !important;
}
/* Quantity badge on image — WC Blocks' own rule already positions this correctly
   with top:0;right:0;transform:translate(50%,-50%) (self-centers on the image
   corner regardless of size). This override used to also set top/right to a
   hardcoded -6px, which doesn't replace WC's transform — it stacks with it,
   pushing the badge further off-corner than either rule alone would. Only
   override branding (color/size/font) here, not position. */
.wc-block-components-order-summary-item__quantity {
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 0.25rem !important;
  background: var(--rc-primary) !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-family: var(--rc-font) !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}
.wc-block-components-order-summary-item__description .wc-block-components-product-name {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: var(--rc-text) !important;
  text-decoration: none !important;
}
.wc-block-components-order-summary-item__total-price .wc-block-components-product-price__value {
  font-family: var(--rc-font) !important;
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  color: var(--rc-text) !important;
}
.wc-block-components-order-summary-item__regular-individual-price {
  font-size: 0.75rem !important;
  color: var(--rc-muted) !important;
  text-decoration: line-through !important;
  opacity: 0.8 !important;
}
.wc-block-components-order-summary-item__individual-price {
  font-size: 0.8125rem !important;
  color: var(--rc-primary) !important;
  font-weight: 600 !important;
}
.wc-block-components-product-metadata__description {
  font-size: 0.75rem !important;
  color: var(--rc-muted) !important;
}

/* Coupon + totals in checkout sidebar */
.wc-block-checkout__sidebar .wc-block-components-totals-item { font-family: var(--rc-font) !important; }

/* ── Notices (errors, success) ───────────────────────────────────────────── */
.wc-block-components-notices .wc-block-components-notice-banner {
  border-radius: var(--rc-radius) !important;
  font-family: var(--rc-font) !important;
  font-size: 0.875rem !important;
  border-width: 1.5px !important;
  margin-bottom: 1rem !important;
}
.wc-block-components-notice-banner.is-error {
  background: #fef2f2 !important;
  border-color: #fca5a5 !important;
  color: #991b1b !important;
}
.wc-block-components-notice-banner.is-success {
  background: #f0fdf4 !important;
  border-color: #86efac !important;
  color: #166534 !important;
}

/* ── Validation error styles ─────────────────────────────────────────────── */
.wc-block-components-validation-error {
  color: #dc2626 !important;
  font-family: var(--rc-font) !important;
  font-size: 0.8125rem !important;
  margin-top: 0.25rem !important;
}
.wc-block-components-text-input.has-error input {
  border-color: #dc2626 !important;
}

/* ── Express payment (PayPal, Google Pay, etc.) ───────────────────────────── */
.wc-block-components-express-payment {
  margin-bottom: 1.25rem !important;
}
.wc-block-components-express-payment__title-container {
  display: flex !important;
  align-items: center !important;
  gap: 0.625rem !important;
  margin-bottom: 0.75rem !important;
}
.wc-block-components-express-payment__title-container::before,
.wc-block-components-express-payment__title-container::after {
  content: '' !important;
  flex: 1 !important;
  height: 1px !important;
  background: var(--rc-border) !important;
}
.wc-block-components-express-payment__title {
  font-family: var(--rc-font) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  color: var(--rc-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  white-space: nowrap !important;
}
.wc-block-components-express-payment-continue-rule {
  display: flex !important;
  align-items: center !important;
  gap: 0.625rem !important;
  margin: 0.875rem 0 !important;
  font-family: var(--rc-font) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--rc-muted) !important;
}
.wc-block-components-express-payment-continue-rule::before,
.wc-block-components-express-payment-continue-rule::after {
  content: '' !important;
  flex: 1 !important;
  height: 1px !important;
  background: var(--rc-border) !important;
}
.wc-block-components-express-payment__event-buttons {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
}

/* ── Payment method radio options ────────────────────────────────────────── */
.wc-block-components-payment-options {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
}
.wc-block-components-payment-option {
  border: 1.5px solid var(--rc-border) !important;
  border-radius: var(--rc-radius) !important;
  overflow: hidden !important;
  transition: border-color 150ms, box-shadow 150ms !important;
  background: var(--rc-white) !important;
}
.wc-block-components-payment-option.is-active,
.wc-block-components-payment-option:has(input:checked) {
  border-color: var(--rc-primary) !important;
  box-shadow: 0 0 0 1px var(--rc-primary) !important;
}
.wc-block-components-payment-option__label-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  padding: 0.875rem 1rem !important;
  cursor: pointer !important;
}
.wc-block-components-payment-option input[type="radio"] {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  flex-shrink: 0 !important;
  accent-color: var(--rc-primary) !important;
  margin: 0 !important;
  cursor: pointer !important;
}
.wc-block-components-payment-method-label {
  font-family: var(--rc-font) !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  color: var(--rc-text) !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  flex: 1 !important;
  cursor: pointer !important;
}
.wc-block-components-payment-method-label__category {
  font-size: 0.8125rem !important;
  color: var(--rc-muted) !important;
  font-weight: 400 !important;
}
.wc-block-components-radio-control-accordion-content {
  padding: 0 1rem 0.875rem !important;
  border-top: 1px solid var(--rc-border) !important;
  font-family: var(--rc-font) !important;
  font-size: 0.875rem !important;
  color: var(--rc-muted) !important;
  line-height: 1.55 !important;
}

/* ── Place Order: loading state ───────────────────────────────────────────── */
.wc-block-components-checkout-place-order-button[disabled],
.wc-block-components-checkout-place-order-button.wc-block-components-button--loading {
  opacity: 0.72 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}
.wc-block-components-checkout-place-order-button .wc-block-components-spinner {
  /* WC core makes this element fill the button (top:0;left:0;width:100%;height:100%)
     and centers its own ::after ring inside that box. We replace the ring with a
     real bordered circle at a fixed size instead, so top:0;left:0 must be
     overridden here too — otherwise the small circle stays pinned to the
     button's top-left corner instead of sitting in the middle. */
  width: 18px !important;
  height: 18px !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  border: 2.5px solid rgba(255, 255, 255, 0.3) !important;
  border-top-color: rgba(255, 255, 255, 0.9) !important;
  border-radius: 50% !important;
  animation: rc-spin 0.7s linear infinite !important;
  flex-shrink: 0 !important;
}

/* ── Trust strip below Place Order ───────────────────────────────────────── */
.wc-block-checkout__actions_row::after {
  content: 'Secure & Encrypted Checkout' !important;
  display: block !important;
  text-align: center !important;
  font-family: var(--rc-font) !important;
  font-size: 0.75rem !important;
  color: var(--rc-muted) !important;
  margin-top: 0.375rem !important;
  opacity: 0.8 !important;
  letter-spacing: 0.02em !important;
}

/* ── Product reviews ──────────────────────────────────────────────────────── */

/* Un-hide star ratings inside reviews (overrides the global loop hide rule) */
#rc-reviews .star-rating,
.woocommerce-product-rating .star-rating { display: inline-block !important; }

/* Star rating track */
.star-rating {
  overflow: hidden;
  position: relative;
  height: 1em;
  line-height: 1;
  font-size: 1em;
  width: 5.4em;
  font-family: "star";
  color: var(--rc-primary);
}
.star-rating::before {
  content: "\73\73\73\73\73";
  opacity: 0.25;
  float: left;
  top: 0;
  left: 0;
  position: absolute;
}
.star-rating span { overflow: hidden; float: left; top: 0; left: 0; position: absolute; padding-top: 1.5em; }
.star-rating span::before {
  content: "\53\53\53\53\53";
  top: 0;
  position: absolute;
  left: 0;
}

/* Product rating row (above add-to-cart) */
.woocommerce-product-rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.woocommerce-review-link {
  font-size: 0.875rem;
  color: var(--rc-muted);
  text-decoration: none;
}
.woocommerce-review-link:hover { color: var(--rc-text); text-decoration: underline; }

/* Reviews list */
#rc-reviews .commentlist.reviews {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
}
#rc-reviews .commentlist.reviews .review {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 1rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--rc-border);
}
#rc-reviews .commentlist.reviews .review:last-child { border-bottom: none; }

/* Gravatar */
#rc-reviews .comment_container .avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--rc-border);
  flex-shrink: 0;
}

/* Comment text column */
#rc-reviews .comment-text { min-width: 0; }

/* Rating inside each review */
#rc-reviews .comment-text .star-rating { margin-bottom: 0.375rem; }

/* Reviewer meta */
#rc-reviews .comment-text .meta {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  color: var(--rc-muted);
}
#rc-reviews .woocommerce-review__author {
  font-weight: 700;
  color: var(--rc-text);
  font-size: 0.9375rem;
}
#rc-reviews .woocommerce-review__verified {
  font-size: 0.8125rem;
  color: var(--rc-success-dark);
  font-style: normal;
}
#rc-reviews .woocommerce-review__dash { margin: 0 0.25rem; }
#rc-reviews .woocommerce-review__published-date { font-size: 0.8125rem; }

/* Review body text */
#rc-reviews .comment-text .description {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--rc-text);
  margin: 0;
}
#rc-reviews .comment-text .description p:last-child { margin-bottom: 0; }

/* "No reviews yet" message */
#rc-reviews .woocommerce-noreviews {
  color: var(--rc-muted);
  font-size: 0.9375rem;
  padding: 1.5rem 0;
}

/* Review count heading */
#rc-reviews #reviews > h2,
#rc-reviews .woocommerce-Reviews-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--rc-border);
}

/* Review form */
#rc-reviews #review_form_wrapper { margin-top: 2rem; }
#rc-reviews #review_form_wrapper h3,
#rc-reviews .comment-reply-title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 1rem;
}
#rc-reviews .comment-form label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.375rem;
  color: var(--rc-muted);
}
#rc-reviews .comment-form input[type="text"],
#rc-reviews .comment-form input[type="email"],
#rc-reviews .comment-form textarea {
  display: block;
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1.5px solid var(--rc-border);
  border-radius: var(--rc-radius);
  font-family: var(--rc-font);
  font-size: 0.9375rem;
  background: var(--rc-white);
  color: var(--rc-text);
  outline: none;
  transition: border-color 150ms;
  box-sizing: border-box;
}
#rc-reviews .comment-form input:focus,
#rc-reviews .comment-form textarea:focus { border-color: var(--rc-primary); }
#rc-reviews .comment-form textarea { min-height: 120px; resize: vertical; }
#rc-reviews .comment-form .form-submit { margin-top: 1rem; }
#rc-reviews .comment-form .submit {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 1.5rem;
  background: var(--rc-primary);
  color: var(--rc-btn-text);
  border: none;
  border-radius: var(--rc-radius);
  font-family: var(--rc-font);
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 150ms;
}
#rc-reviews .comment-form .submit:hover { opacity: 0.85; }

/* Star picker in review form */
#rc-reviews .comment-form-rating { margin-bottom: 1rem; }
#rc-reviews .comment-form-rating .stars { display: flex; gap: 0.25rem; margin-top: 0.375rem; }
#rc-reviews .comment-form-rating .stars a {
  font-size: 1.25rem;
  text-decoration: none;
  color: var(--rc-muted);
  transition: color 120ms;
}
#rc-reviews .comment-form-rating .stars a:hover,
#rc-reviews .comment-form-rating .stars a.active,
#rc-reviews .comment-form-rating .stars.selected a { color: var(--rc-primary); }

/* Rating <select> fallback — shown when JS star init fails */
#rc-reviews .comment-form-rating select#rating {
  display: block;
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1.5px solid var(--rc-border);
  border-radius: var(--rc-radius);
  background: var(--rc-white);
  color: var(--rc-text);
  font: inherit;
  font-size: 0.9375rem;
  outline: none;
  cursor: pointer;
}

/* Cookies consent checkbox row */
#rc-reviews .comment-form-cookies-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
  color: var(--rc-muted);
}
#rc-reviews .comment-form-cookies-consent input[type="checkbox"] {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  margin-top: 0.175rem;
  accent-color: var(--rc-primary);
  cursor: pointer;
}
#rc-reviews .comment-form-cookies-consent label {
  display: inline;
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--rc-muted);
  margin: 0;
  cursor: pointer;
}

/* Comment form two-col layout */
@media (min-width: 600px) {
  #rc-reviews .comment-form .comment-form-author,
  #rc-reviews .comment-form .comment-form-email {
    display: inline-block;
    width: calc(50% - 0.5rem);
    vertical-align: top;
    margin-right: 0.5rem;
  }
  #rc-reviews .comment-form .comment-form-email { margin-right: 0; }
}

/* ── Wishlist page layout ─────────────────────────────────────────────────── */
.rc-wishlist-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 2.5rem;
  padding: 3rem 0 5rem;
  align-items: start;
}
@media (max-width: 767px) {
  .rc-wishlist-layout { grid-template-columns: 1fr; gap: 1.5rem; padding: 1.5rem 0 3rem; }
}
.rc-wishlist-sidebar { position: sticky; top: 100px; }
@media (max-width: 767px) { .rc-wishlist-sidebar { position: static; } }
.rc-wishlist-content { min-width: 0; }

/* ── Native Wishlist Button (card hover action) ───────────────────────────── */
.rc-card__wishlist-btn svg { transition: fill 200ms, stroke 200ms; }
.rc-card__wishlist-btn--active svg,
.rc-card__wishlist-btn:hover svg {
  fill: var(--rc-error, #ef4444);
  stroke: var(--rc-error, #ef4444);
}

/* ── PDP / QV Wishlist Icon Button ──────────────────────────────────────── */
.rc-single__wishlist-icon-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: 1.5px solid var(--rc-border);
  border-radius: 50%;
  color: var(--rc-muted);
  cursor: pointer;
  transition: border-color 200ms, color 200ms, background 200ms;
  position: relative;
}
.rc-single__wishlist-icon-btn svg { transition: fill 200ms, stroke 200ms; }
.rc-single__wishlist-icon-btn:hover,
.rc-single__wishlist-icon-btn--active {
  border-color: var(--rc-error, #ef4444);
  color: var(--rc-error, #ef4444);
  background: #fef2f2;
}
.rc-single__wishlist-icon-btn--active svg,
.rc-single__wishlist-icon-btn:hover svg {
  fill: var(--rc-error, #ef4444);
  stroke: var(--rc-error, #ef4444);
}
/* Tooltip */
.rc-single__wishlist-icon-btn::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  background: rgba(0,0,0,0.82);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 500;
  border-radius: 5px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 150ms;
}
.rc-single__wishlist-icon-btn:hover::after { opacity: 1; }

/* ── ATC attention animation ─────────────────────────────────────────────── */
@keyframes rc-atc-attention {
  0%, 88%, 100% { transform: translateX(0) rotate(0deg); }
  90%  { transform: translateX(-3px) rotate(-1deg); }
  92%  { transform: translateX(3px)  rotate(1deg);  }
  94%  { transform: translateX(-3px) rotate(-1deg); }
  96%  { transform: translateX(3px)  rotate(1deg);  }
  98%  { transform: translateX(-1px) rotate(0deg);  }
}
@media (prefers-reduced-motion: no-preference) {
  .rc-btn--attention {
    animation: rc-atc-attention 4s ease-in-out 1.5s infinite;
  }
}

/* ── Wishlist Page ────────────────────────────────────────────────────────── */
.rc-wishlist-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0 0 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--rc-border);
}
.rc-wishlist-header__info { display: flex; flex-direction: column; gap: 0.25rem; }
.rc-wishlist-header__actions { display: flex; align-items: center; gap: 0.625rem; flex-shrink: 0; }
.rc-wishlist-count { margin: 0; font-size: 1.0625rem; color: var(--rc-text); font-weight: 700; }
.rc-wishlist-count strong { color: var(--rc-brand); }
.rc-wishlist-subtitle { margin: 0; font-size: 0.875rem; color: var(--rc-muted); }
.rc-wishlist-shop-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius);
  font-size: 0.8125rem;
  font-family: var(--rc-font);
  color: var(--rc-text);
  text-decoration: none;
  line-height: 1;
  transition: border-color 150ms, color 150ms, background 150ms;
}
.rc-wishlist-shop-link:hover { border-color: var(--rc-brand); color: var(--rc-brand); background: rgba(0,0,0,0.03); text-decoration: none; }
.rc-wishlist-clear-all {
  background: none;
  border: 1px solid var(--rc-border);
  color: var(--rc-muted);
  padding: 0.375rem 0.875rem;
  border-radius: var(--rc-radius);
  font-size: 0.8125rem;
  font-family: var(--rc-font);
  cursor: pointer;
  transition: border-color 150ms, color 150ms;
  line-height: 1;
}
.rc-wishlist-clear-all:hover { border-color: var(--rc-error, #ef4444); color: var(--rc-error, #ef4444); }
.rc-wishlist-discover {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rc-border);
  text-align: center;
}
.rc-wishlist-discover__text { margin: 0 0 1rem; font-size: 1rem; color: var(--rc-muted); }
@media (max-width: 767px) {
  .rc-wishlist-header { align-items: flex-start; }
  .rc-wishlist-header__actions { flex-wrap: wrap; }
}

/* Empty & guest states */
.rc-wishlist-empty,
.rc-wishlist-guest {
  text-align: center;
  padding: 4rem 1rem 5rem;
  color: var(--rc-muted);
}
.rc-wishlist-empty__icon,
.rc-wishlist-guest__icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 1.25rem;
  background: var(--rc-surface);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rc-muted);
}
.rc-wishlist-empty__title,
.rc-wishlist-guest__title {
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--rc-text);
  margin: 0 0 0.5rem;
}
.rc-wishlist-empty__text,
.rc-wishlist-guest__text {
  margin: 0 0 1.5rem;
  font-size: 0.9375rem;
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
}

/* ─── MIDNIGHT PALETTE OVERRIDES ──────────────────────────────────────────── */

/* Glass header: btn-icon and menu-pill use white on light themes intentionally,
   but on midnight the dark page bg makes white pills invisible. Override to
   surface-tinted dark. */
[data-rc-variant="midnight"] .rc-header--glass .rc-btn-icon,
[data-rc-variant="midnight"] .rc-header--glass .rc-menu-pill,
[data-rc-variant="midnight"] .rc-header--glass.rc-header--scrolled .rc-btn-icon,
[data-rc-variant="midnight"] .rc-header--glass.rc-header--scrolled .rc-menu-pill {
  background: color-mix(in srgb, var(--rc-surface) 92%, var(--rc-text));
  color: var(--rc-text);
}
[data-rc-variant="midnight"] .rc-header--glass .rc-btn-icon:hover,
[data-rc-variant="midnight"] .rc-header--glass .rc-menu-pill:hover,
[data-rc-variant="midnight"] .rc-header--glass.rc-header--scrolled .rc-btn-icon:hover,
[data-rc-variant="midnight"] .rc-header--glass.rc-header--scrolled .rc-menu-pill:hover {
  background: color-mix(in srgb, var(--rc-surface) 82%, var(--rc-text));
}

/* Blog post glass panel: inset white glow looks wrong on dark surface */
[data-rc-variant="midnight"] .rc-post-glass {
  box-shadow: 0 -4px 48px rgba(0,0,0,0.48), 0 0 0 1px rgba(255,255,255,0.04) inset;
}

/* Nav flyout glass-nav text must be readable on dark surface */
[data-rc-variant="midnight"] .rc-nav-flyout__glass-nav .rc-nav-flyout__list > li > a {
  color: var(--rc-text);
}

/* Midnight: hero inline color:#111827 override + auth form checkbox */
[data-rc-variant="midnight"] .rc-hero { color: var(--rc-text) !important; }

/* Auth drawer checkbox — native element needs accent-color in midnight */
[data-rc-variant="midnight"] .rc-drawer__body #loginform input[type="checkbox"] {
  accent-color: var(--rc-primary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   29. VARIATION SWATCHES
   BEM: .rc-swatches (group) › .rc-swatches__list › .rc-swatch (item)
   All sizing and color tokens come from --rc-swatch-* CSS vars
   (output in performance.php › rc_output_css_vars).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Group wrapper ──────────────────────────────────────────────────────── */
.rc-swatches {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-block: 10px;
}

.rc-swatches--archive {
  margin-block: 6px 0;
}

/* ── Header row (label + current value) ────────────────────────────────── */
.rc-swatches__header {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 0.8125rem;
  line-height: 1.4;
}

.rc-swatches__label {
  font-weight: 600;
  color: var(--rc-text);
  text-transform: capitalize;
}

.rc-swatches__value {
  color: var(--rc-muted, var(--rc-text));
  opacity: 0.72;
  font-weight: 400;
  min-height: 1em;
}

/* ── Swatch list ────────────────────────────────────────────────────────── */
.rc-swatches__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rc-swatch-gap);
  align-items: center;
}

/* ── Base swatch ────────────────────────────────────────────────────────── */
.rc-swatch {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: var(--rc-swatch-unsel-width) solid var(--rc-swatch-unsel-border);
  border-radius: 4px;
  padding: 0;
  background: transparent;
  transition: border-color 0.15s ease, outline-color 0.15s ease, opacity 0.15s ease, transform 0.1s ease;
  outline: 0 solid transparent;
  outline-offset: var(--rc-swatch-border-offset);
  flex-shrink: 0;
  vertical-align: middle;
}

.rc-swatch:focus-visible {
  outline: 2px solid var(--rc-primary);
  outline-offset: 2px;
}

/* ── Size tiers (color & image) ─────────────────────────────────────────── */
/* Image swatches — per-type vars override the tier; fallback = tier size */
.rc-swatch--image,
.rc-swatches--size-md .rc-swatch--image {
  width:  var(--rc-swatch-img-w, var(--rc-swatch-size-md));
  height: var(--rc-swatch-img-h, var(--rc-swatch-size-md));
}
.rc-swatches--size-xs .rc-swatch--image {
  width:  var(--rc-swatch-img-w, var(--rc-swatch-size-xs));
  height: var(--rc-swatch-img-h, var(--rc-swatch-size-xs));
}
.rc-swatches--size-sm .rc-swatch--image {
  width:  var(--rc-swatch-img-w, var(--rc-swatch-size-sm));
  height: var(--rc-swatch-img-h, var(--rc-swatch-size-sm));
}
.rc-swatches--size-lg .rc-swatch--image {
  width:  var(--rc-swatch-img-w, var(--rc-swatch-size-lg));
  height: var(--rc-swatch-img-h, var(--rc-swatch-size-lg));
}
.rc-swatches--size-xl .rc-swatch--image {
  width:  var(--rc-swatch-img-w, var(--rc-swatch-size-xl));
  height: var(--rc-swatch-img-h, var(--rc-swatch-size-xl));
}

/* Color swatches — per-type vars override the tier; fallback = tier size */
.rc-swatch--color,
.rc-swatches--size-md .rc-swatch--color {
  width:  var(--rc-swatch-color-w, var(--rc-swatch-size-md));
  height: var(--rc-swatch-color-h, var(--rc-swatch-size-md));
}
.rc-swatches--size-xs .rc-swatch--color {
  width:  var(--rc-swatch-color-w, var(--rc-swatch-size-xs));
  height: var(--rc-swatch-color-h, var(--rc-swatch-size-xs));
}
.rc-swatches--size-sm .rc-swatch--color {
  width:  var(--rc-swatch-color-w, var(--rc-swatch-size-sm));
  height: var(--rc-swatch-color-h, var(--rc-swatch-size-sm));
}
.rc-swatches--size-lg .rc-swatch--color {
  width:  var(--rc-swatch-color-w, var(--rc-swatch-size-lg));
  height: var(--rc-swatch-color-h, var(--rc-swatch-size-lg));
}
.rc-swatches--size-xl .rc-swatch--color {
  width:  var(--rc-swatch-color-w, var(--rc-swatch-size-xl));
  height: var(--rc-swatch-color-h, var(--rc-swatch-size-xl));
}

/* Text swatches — optional font-size override from Customizer */
.rc-swatch--label,
.rc-swatch--button,
.rc-swatch--radio {
  font-size: var(--rc-swatch-text-size, 0.8125rem);
}

/* ── Shape modifiers ────────────────────────────────────────────────────── */
.rc-swatch--color.rc-swatch--circle,
.rc-swatch--image.rc-swatch--circle {
  border-radius: 50%;
}
.rc-swatch--color.rc-swatch--rounded,
.rc-swatch--image.rc-swatch--rounded {
  border-radius: 4px;
}
.rc-swatch--color.rc-swatch--square,
.rc-swatch--image.rc-swatch--square {
  border-radius: 0;
}

/* Text swatch shapes: circle = pill, rounded = 6px soft, square = sharp */
.rc-swatch--label.rc-swatch--circle,
.rc-swatch--button.rc-swatch--circle,
.rc-swatch--radio.rc-swatch--circle,
.rc-swatch--checkbox.rc-swatch--circle { border-radius: 999px; }

.rc-swatch--label.rc-swatch--rounded,
.rc-swatch--button.rc-swatch--rounded,
.rc-swatch--radio.rc-swatch--rounded,
.rc-swatch--checkbox.rc-swatch--rounded { border-radius: 6px; }

.rc-swatch--label.rc-swatch--square,
.rc-swatch--button.rc-swatch--square,
.rc-swatch--radio.rc-swatch--square,
.rc-swatch--checkbox.rc-swatch--square { border-radius: 2px; }

/* ── Color swatch ───────────────────────────────────────────────────────── */
.rc-swatch--color {
  overflow: hidden;
}

.rc-swatch__inner {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

/* Diagonal split divider for dual-tone swatches */
.rc-swatch__split {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
}
.rc-swatch__split::after {
  content: '';
  position: absolute;
  top: -50%;
  left: 50%;
  width: 200%;
  height: 200%;
  background: transparent;
  border-left: 1px solid rgba(0,0,0,0.12);
  transform: rotate(-45deg) translateX(-50%);
  transform-origin: 0 50%;
}

/* ── Image swatch ───────────────────────────────────────────────────────── */
.rc-swatch--image {
  overflow: hidden;
}

.rc-swatch__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* ── Text-based swatches (label, button, radio, checkbox) ───────────────── */
.rc-swatch--label,
.rc-swatch--button,
.rc-swatch--radio,
.rc-swatch--checkbox {
  width: auto; /* reset any cascaded fixed width so content can size the chip */
  height: var(--rc-swatch-size);
  min-width: var(--rc-swatch-size);
  padding-inline: 12px;
  font-size: var(--rc-swatch-label-size);
  font-weight: var(--rc-swatch-label-weight);
  letter-spacing: var(--rc-swatch-label-tracking);
  text-transform: var(--rc-swatch-label-transform);
  color: var(--rc-text);
  white-space: nowrap;
}

.rc-swatches--size-xs .rc-swatch--label,
.rc-swatches--size-xs .rc-swatch--button,
.rc-swatches--size-xs .rc-swatch--radio,
.rc-swatches--size-xs .rc-swatch--checkbox {
  height: var(--rc-swatch-size-xs);
  min-width: var(--rc-swatch-size-xs);
  padding-inline: 8px;
}

.rc-swatches--size-sm .rc-swatch--label,
.rc-swatches--size-sm .rc-swatch--button,
.rc-swatches--size-sm .rc-swatch--radio,
.rc-swatches--size-sm .rc-swatch--checkbox {
  height: var(--rc-swatch-size-sm);
  min-width: var(--rc-swatch-size-sm);
  padding-inline: 10px;
}

.rc-swatches--size-lg .rc-swatch--label,
.rc-swatches--size-lg .rc-swatch--button,
.rc-swatches--size-lg .rc-swatch--radio,
.rc-swatches--size-lg .rc-swatch--checkbox {
  height: var(--rc-swatch-size-lg);
  min-width: var(--rc-swatch-size-lg);
  padding-inline: 14px;
}

.rc-swatches--size-xl .rc-swatch--label,
.rc-swatches--size-xl .rc-swatch--button,
.rc-swatches--size-xl .rc-swatch--radio,
.rc-swatches--size-xl .rc-swatch--checkbox {
  height: var(--rc-swatch-size-xl);
  min-width: var(--rc-swatch-size-xl);
  padding-inline: 16px;
}

.rc-swatch__text {
  pointer-events: none;
  line-height: 1;
}

/* ── Per-type visual differentiation ────────────────────────────────────── */

/* Label — frosted chip: barely-visible tint at rest, primary border + tint on hover/selected */
.rc-swatch--label {
  background: color-mix(in srgb, var(--rc-primary) 5%, transparent);
  border-color: transparent;
  color: var(--rc-muted);
  font-weight: 400;
}
.rc-swatch--label:hover {
  background: color-mix(in srgb, var(--rc-primary) 11%, transparent);
  border-color: color-mix(in srgb, var(--rc-primary) 45%, transparent);
  color: var(--rc-text);
  text-decoration: none;
}
.rc-swatch--label.rc-swatch--selected {
  background: color-mix(in srgb, var(--rc-primary) 14%, transparent);
  border-color: var(--rc-primary);
  color: var(--rc-primary);
  font-weight: 600;
  text-decoration: none;
  outline: none;
}

/* Button — bordered chip (default for most text swatches) */
/* Uses global .rc-swatch border + .rc-swatch--selected solid fill already set */
.rc-swatch--button {
  font-weight: 500;
}

/* Radio: circle indicator */
.rc-swatch--radio::before {
  content: '';
  display: inline-block;
  width: 0.875em;
  height: 0.875em;
  border-radius: 50%;
  border: 1.5px solid var(--rc-swatch-unsel-border);
  margin-inline-end: 5px;
  flex-shrink: 0;
  transition: background 0.15s ease, border-color 0.15s ease;
  vertical-align: -0.125em;
}
.rc-swatch--radio.rc-swatch--selected::before {
  background: var(--rc-swatch-border-color);
  border-color: var(--rc-swatch-border-color);
}

/* Checkbox: square indicator */
.rc-swatch--checkbox::before {
  content: '';
  display: inline-block;
  width: 0.875em;
  height: 0.875em;
  border-radius: 2px;
  border: 1.5px solid var(--rc-swatch-unsel-border);
  margin-inline-end: 5px;
  flex-shrink: 0;
  transition: background 0.15s ease, border-color 0.15s ease;
  vertical-align: -0.125em;
  background-image: none;
}
.rc-swatch--checkbox.rc-swatch--selected::before {
  background: var(--rc-swatch-border-color);
  border-color: var(--rc-swatch-border-color);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpolyline points='1,5 4.5,8.5 11,1' stroke='%23fff' stroke-width='1.75' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 70%;
  background-repeat: no-repeat;
  background-position: center;
}

/* ── Hover ──────────────────────────────────────────────────────────────── */
.rc-swatch:hover {
  border-color: var(--rc-swatch-hover-border);
  transform: scale(1.06);
  z-index: 1;
}

.rc-swatch--label:hover,
.rc-swatch--button:hover,
.rc-swatch--radio:hover,
.rc-swatch--checkbox:hover {
  transform: none;
}

/* ── Selected state ─────────────────────────────────────────────────────── */
.rc-swatch--selected {
  border-color: var(--rc-swatch-border-color) !important;
  border-width: var(--rc-swatch-border-width) !important;
  outline: var(--rc-swatch-border-width) solid var(--rc-swatch-border-color);
  outline-offset: var(--rc-swatch-border-offset);
}

.rc-swatch--selected:hover {
  transform: none;
}

.rc-swatch--label.rc-swatch--selected,
.rc-swatch--button.rc-swatch--selected,
.rc-swatch--radio.rc-swatch--selected,
.rc-swatch--checkbox.rc-swatch--selected {
  border-color: var(--rc-swatch-border-color) !important;
  background: color-mix(in srgb, var(--rc-swatch-border-color) 8%, transparent);
  outline: none;
}

/* ── Out-of-stock states ────────────────────────────────────────────────── */
.rc-swatch--unavailable {
  opacity: var(--rc-swatch-oos-opacity);
  cursor: not-allowed;
}

.rc-swatch--unavailable:hover {
  border-color: var(--rc-swatch-unsel-border);
  transform: none;
}

/* Cross overlay */
.rc-swatch__cross {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
}

.rc-swatch__cross::before,
.rc-swatch__cross::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 141.4%;
  height: var(--rc-swatch-cross-width);
  background: var(--rc-swatch-cross-color);
  transform-origin: center;
}

.rc-swatch__cross::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.rc-swatch__cross::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* Single diagonal (oos_cross_style = 'single') */
.rc-swatch__cross--single::after {
  display: none;
}

/* Strikethrough (text types) */
.rc-swatch--unavailable.rc-swatch--label .rc-swatch__text,
.rc-swatch--unavailable.rc-swatch--button .rc-swatch__text,
.rc-swatch--unavailable.rc-swatch--radio .rc-swatch__text,
.rc-swatch--unavailable.rc-swatch--checkbox .rc-swatch__text {
  text-decoration: line-through;
  text-decoration-color: var(--rc-swatch-cross-color);
}

/* ── Tooltip ────────────────────────────────────────────────────────────── */
.rc-swatch__tooltip {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: var(--rc-swatch-tooltip-bg);
  color: var(--rc-swatch-tooltip-color);
  font-size: var(--rc-swatch-tooltip-size);
  font-weight: 500;
  line-height: 1.2;
  padding: 3px 8px;
  border-radius: var(--rc-swatch-tooltip-radius);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 10;
}

.rc-swatch__tooltip--top {
  bottom: calc(100% + 6px);
}

.rc-swatch__tooltip--bottom {
  top: calc(100% + 6px);
}

/* Tooltip arrow */
.rc-swatch__tooltip--top::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--rc-swatch-tooltip-bg);
}

.rc-swatch__tooltip--bottom::after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-bottom-color: var(--rc-swatch-tooltip-bg);
}

.rc-swatch:hover .rc-swatch__tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(-2px);
}

.rc-swatch__tooltip--bottom {
  transform: translateX(-50%);
}

.rc-swatch:hover .rc-swatch__tooltip--bottom {
  transform: translateX(-50%) translateY(2px);
}

/* ── Dropdown swatch type ───────────────────────────────────────────────── */
.rc-swatch-dropdown {
  position: relative;
  display: inline-block;
  min-width: 160px;
}

.rc-swatch-dropdown__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  height: var(--rc-swatch-size);
  padding-inline: 12px;
  background: var(--rc-surface, var(--rc-white));
  border: 1px solid var(--rc-border);
  border-radius: 6px;
  font-size: var(--rc-swatch-label-size);
  color: var(--rc-text);
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.rc-swatch-dropdown__trigger:hover,
.rc-swatch-dropdown__trigger[aria-expanded="true"] {
  border-color: var(--rc-primary);
}

.rc-swatch-dropdown__selected {
  flex: 1;
  text-align: start;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rc-swatch-dropdown__arrow {
  flex-shrink: 0;
  font-size: 1.1em;
  transition: transform 0.15s ease;
  line-height: 1;
}

.rc-swatch-dropdown__trigger[aria-expanded="true"] .rc-swatch-dropdown__arrow {
  transform: rotate(90deg);
}

.rc-swatch-dropdown__panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--rc-white);
  border: 1px solid var(--rc-border);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  z-index: 100;
  overflow: hidden;
  max-height: 260px;
  overflow-y: auto;
}

.rc-swatch-dropdown__option {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 9px 14px;
  font-size: var(--rc-swatch-label-size);
  color: var(--rc-text);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: start;
  transition: background 0.1s ease;
}

.rc-swatch-dropdown__option:hover {
  background: color-mix(in srgb, var(--rc-primary) 8%, transparent);
}

.rc-swatch-dropdown__option--unavailable {
  opacity: var(--rc-swatch-oos-opacity);
  text-decoration: line-through;
  cursor: not-allowed;
}

.rc-swatch-dropdown__opt-label {
  pointer-events: none;
}

/* ── Archive context ────────────────────────────────────────────────────── */
.rc-swatches--archive .rc-swatches__list {
  gap: 5px;
}

.rc-swatches--archive .rc-swatch--color,
.rc-swatches--archive .rc-swatch--image {
  width: var(--rc-swatch-size-sm);
  height: var(--rc-swatch-size-sm);
}

.rc-swatches--archive .rc-swatch--label,
.rc-swatches--archive .rc-swatch--button,
.rc-swatches--archive .rc-swatch--radio,
.rc-swatches--archive .rc-swatch--checkbox {
  height: var(--rc-swatch-size-xs);
  min-width: var(--rc-swatch-size-xs);
  padding-inline: 7px;
  font-size: 0.6875rem;
}

/* Overflow badge (+N) */
.rc-swatches__overflow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--rc-swatch-size-sm);
  min-width: var(--rc-swatch-size-sm);
  padding-inline: 5px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--rc-text) 8%, transparent);
  color: var(--rc-text);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
}

.rc-swatches__overflow--dots {
  letter-spacing: 0.05em;
  font-size: 1em;
  line-height: 1;
  background: transparent;
}

/* ── Style presets ──────────────────────────────────────────────────────── */

/* Shopify-style: color/image = circles, text chips = clean rectangles, ring on select */
[data-swatch-preset="shopify"] .rc-swatch--color,
[data-swatch-preset="shopify"] .rc-swatch--image {
  border-radius: 50%;
  border-width: 1px;
}
[data-swatch-preset="shopify"] .rc-swatch--label,
[data-swatch-preset="shopify"] .rc-swatch--button,
[data-swatch-preset="shopify"] .rc-swatch--radio,
[data-swatch-preset="shopify"] .rc-swatch--checkbox {
  border-radius: 4px;
  border-width: 1px;
}
[data-swatch-preset="shopify"] .rc-swatch--selected {
  outline: 2px solid var(--rc-primary);
  outline-offset: 2px;
}
[data-swatch-preset="shopify"] .rc-swatch--label.rc-swatch--selected,
[data-swatch-preset="shopify"] .rc-swatch--button.rc-swatch--selected,
[data-swatch-preset="shopify"] .rc-swatch--radio.rc-swatch--selected,
[data-swatch-preset="shopify"] .rc-swatch--checkbox.rc-swatch--selected {
  background: var(--rc-primary);
  color: var(--rc-white);
  border-color: var(--rc-primary) !important;
  outline: none;
}

/* Minimal: square, no border, faint bg on text types */
[data-swatch-preset="minimal"] .rc-swatch--color,
[data-swatch-preset="minimal"] .rc-swatch--image {
  border-radius: 0;
  border-width: 1px;
  border-color: transparent;
}
[data-swatch-preset="minimal"] .rc-swatch--label,
[data-swatch-preset="minimal"] .rc-swatch--button {
  border: none;
  background: color-mix(in srgb, var(--rc-text) 6%, transparent);
  border-radius: 2px;
}
[data-swatch-preset="minimal"] .rc-swatch--selected {
  outline: none;
  border: none !important;
  background: var(--rc-primary) !important;
  color: var(--rc-white) !important;
}

/* Bold: large rounded, heavy selected ring */
[data-swatch-preset="bold"] .rc-swatch--color,
[data-swatch-preset="bold"] .rc-swatch--image {
  border-radius: 6px;
  width: var(--rc-swatch-size-lg);
  height: var(--rc-swatch-size-lg);
}
[data-swatch-preset="bold"] .rc-swatch--selected {
  outline-width: 3px;
  outline-offset: 3px;
}

/* Hyva-style: pill/rounded text, no border, strong selected bg */
[data-swatch-preset="hyva"] .rc-swatch--label,
[data-swatch-preset="hyva"] .rc-swatch--button {
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--rc-text) 18%, transparent);
}
[data-swatch-preset="hyva"] .rc-swatch--label.rc-swatch--selected,
[data-swatch-preset="hyva"] .rc-swatch--button.rc-swatch--selected {
  background: var(--rc-primary) !important;
  border-color: var(--rc-primary) !important;
  color: var(--rc-white) !important;
  outline: none;
}

/* ── Midnight palette overrides ─────────────────────────────────────────── */
[data-rc-variant="midnight"] .rc-swatch-dropdown__panel {
  background: var(--rc-white);
  border-color: color-mix(in srgb, var(--rc-white) 14%, transparent);
}

[data-rc-variant="midnight"] .rc-swatch-dropdown__trigger {
  background: var(--rc-white);
  border-color: color-mix(in srgb, var(--rc-white) 20%, transparent);
}

[data-rc-variant="midnight"] .rc-swatch--label,
[data-rc-variant="midnight"] .rc-swatch--button,
[data-rc-variant="midnight"] .rc-swatch--radio,
[data-rc-variant="midnight"] .rc-swatch--checkbox {
  border-color: color-mix(in srgb, var(--rc-white) 18%, transparent);
}

[data-rc-variant="midnight"] .rc-swatches__overflow {
  background: color-mix(in srgb, var(--rc-white) 10%, transparent);
}

/* ═══════════════════════════════════════════════════════════════════════════
   VARIABLE PRODUCT FORM — replaces WC <table class="variations">
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Flat attribute rows ─────────────────────────────────────────────────── */
.rc-var-attrs {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.rc-var-attr {
  display: flex;
  flex-direction: column;
}

/* Clear link — WC's woocommerce.css hides .reset_variations; we override and manage via Alpine */
.rc-var-clear {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--rc-muted);
  text-decoration: underline;
  cursor: pointer;
  align-self: flex-start;
  visibility: visible !important;
}
.rc-var-clear:hover { color: var(--rc-text); }

/* WC variation message div — suppress the default styled box */
.woocommerce-variation.single_variation {
  font-size: 0.8125rem;
  min-height: 0;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
}
.woocommerce-variation.single_variation:empty { display: none; }

/* ── Single-product swatch layout ───────────────────────────────────────── */
.rc-single__variations .rc-swatches {
  margin-block: 0;
  gap: 10px;   /* label → its own chips (tight = same group) */
}
.rc-single__variations .rc-swatches + .rc-swatches {
  margin-top: 22px;  /* group → next group (wide = clear separation) */
}

.rc-single__variations .rc-swatches__header {
  font-size: 0.8125rem;
  gap: 10px;
}

.rc-single__variations .rc-swatches__label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rc-muted);
}

.rc-single__variations .rc-swatches__value {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--rc-text);
  opacity: 1;
  letter-spacing: 0;
  text-transform: none;
}

.rc-single__variations .rc-swatches__list {
  gap: var(--rc-swatch-gap, 8px);
}

/* ── Premium chip (label / button) on single product ────────────────────── */
/* border-radius is controlled by shape modifier class (rc-swatch--circle/rounded/square) */
.rc-single__variations .rc-swatch--label,
.rc-single__variations .rc-swatch--button,
.rc-single__variations .rc-swatch--radio,
.rc-single__variations .rc-swatch--checkbox {
  width: auto;
  height: 38px;
  min-width: 44px;
  padding-inline: 18px;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  border: 1.5px solid var(--rc-border);
  background: transparent;
  color: var(--rc-text);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

/* Radio keeps ::before dot (it differentiates Radio from Button). Checkbox indicator hidden. */
.rc-single__variations .rc-swatch--checkbox::before {
  display: none;
}

/* Label on single product — frosted chip (mirrors global label style at full chip height) */
.rc-single__variations .rc-swatch--label {
  height: 38px;
  padding-inline: 18px;
  min-width: 44px;
  background: color-mix(in srgb, var(--rc-primary) 5%, transparent);
  border-color: transparent;
  color: var(--rc-muted);
  font-size: 0.8125rem;
  font-weight: 400;
}
.rc-single__variations .rc-swatch--label:hover {
  background: color-mix(in srgb, var(--rc-primary) 11%, transparent);
  border-color: color-mix(in srgb, var(--rc-primary) 45%, transparent);
  color: var(--rc-text);
  text-decoration: none;
}
.rc-single__variations .rc-swatch--label.rc-swatch--selected {
  background: color-mix(in srgb, var(--rc-primary) 14%, transparent);
  border-color: var(--rc-primary);
  color: var(--rc-primary);
  font-weight: 600;
  text-decoration: none;
  outline: none;
}

.rc-single__variations .rc-swatch--label:hover,
.rc-single__variations .rc-swatch--button:hover,
.rc-single__variations .rc-swatch--radio:hover,
.rc-single__variations .rc-swatch--checkbox:hover {
  border-color: var(--rc-text);
  transform: none;
}

/* Selected chip: solid fill */
.rc-single__variations .rc-swatch--label.rc-swatch--selected,
.rc-single__variations .rc-swatch--button.rc-swatch--selected,
.rc-single__variations .rc-swatch--radio.rc-swatch--selected,
.rc-single__variations .rc-swatch--checkbox.rc-swatch--selected {
  background: var(--rc-primary);
  color: var(--rc-white);
  border-color: var(--rc-primary) !important;
  outline: none;
  font-weight: 600;
}

/* ── Color swatches on single product ───────────────────────────────────── */
/* border-radius is controlled by shape modifier class (rc-swatch--circle/rounded/square) */
.rc-single__variations .rc-swatch--color {
  width: 36px;
  height: 36px;
  border: 2px solid transparent;
  outline: 1.5px solid var(--rc-border);
  outline-offset: 0px;
  transition: outline-color 0.15s ease, outline-offset 0.15s ease, outline-width 0.15s ease, transform 0.1s ease;
}

.rc-single__variations .rc-swatch--color:hover {
  outline-color: var(--rc-text);
  transform: scale(1.08);
}

.rc-single__variations .rc-swatch--color.rc-swatch--selected {
  outline: 2.5px solid var(--rc-primary) !important;
  outline-offset: 3px;
  border-color: transparent !important;
}

/* shape overrides for single product — ensure enough rounding on non-circle shapes */
.rc-single__variations .rc-swatch--color.rc-swatch--rounded { border-radius: 8px; }
.rc-single__variations .rc-swatch--color.rc-swatch--circle  { border-radius: 50%; }
.rc-single__variations .rc-swatch--color.rc-swatch--square  { border-radius: 2px; }

/* mobile */
@media (max-width: 480px) {
  .rc-single__variations .rc-swatch--color {
    width: 32px;
    height: 32px;
  }
}

/* ── Image swatches on single product — 70×60px, larger than color/chips ── */
.rc-single__variations .rc-swatch--image {
  width: 70px;
  height: 60px;
  border-radius: 6px;
  border: 1.5px solid var(--rc-border);
  overflow: hidden;
  transition: border-color 0.15s ease, transform 0.1s ease;
  flex-shrink: 0;
}

.rc-single__variations .rc-swatch--image .rc-swatch__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.rc-single__variations .rc-swatch--image:hover {
  border-color: var(--rc-text);
  transform: scale(1.04);
}

.rc-single__variations .rc-swatch--image.rc-swatch--selected {
  border: 2px solid var(--rc-primary) !important;
  outline: none;
}

/* hover thumbnail preview — larger image floats above on hover */
.rc-single__variations .rc-swatch--image {
  position: relative;
}
.rc-single__variations .rc-swatch--image::after {
  content: '';
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) scale(0.92);
  width: 140px;
  height: 120px;
  background: var(--sp, transparent) center top / cover;
  border-radius: 6px;
  border: 1px solid var(--rc-border);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 20;
}
.rc-single__variations .rc-swatch--image:hover::after {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* mobile: slightly smaller image swatches */
@media (max-width: 640px) {
  .rc-single__variations .rc-swatch--image {
    width: 58px;
    height: 50px;
  }
  .rc-single__variations .rc-swatch--image::after {
    display: none; /* no hover preview on touch */
  }
}

/* ── Variable product ATC button — full-width, bold ─────────────────────── */
.rc-single__variations .rc-single__qty-atc {
  margin-top: 1.5rem;
}

.rc-single__variations .rc-single__atc-btn {
  padding: 0.9375rem 1.5rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* Buy-now note text */
.rc-buy-now-note {
  text-align: center;
  font-size: 0.6875rem;
  color: var(--rc-muted);
  margin-top: 0.375rem;
  opacity: 0.75;
  letter-spacing: 0.01em;
}

/* Buy Now wrapper — tooltip variant */
.rc-buy-now-wrap { display: contents; }
.rc-buy-now-wrap--tooltip { display: block; position: relative; }
.rc-buy-now-wrap--tooltip .rc-single__buy-now[data-rc-tooltip]::after {
  content: attr(data-rc-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  max-width: 280px;
  white-space: normal;
  text-align: center;
  background: var(--rc-text);
  color: var(--rc-white);
  font-size: 0.6875rem;
  line-height: 1.35;
  padding: 6px 10px;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms ease;
  z-index: 10;
}
.rc-buy-now-wrap--tooltip .rc-single__buy-now[data-rc-tooltip]:hover::after {
  opacity: 1;
}
/* Caret */
.rc-buy-now-wrap--tooltip .rc-single__buy-now[data-rc-tooltip]::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--rc-text);
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms ease;
  z-index: 10;
}
.rc-buy-now-wrap--tooltip .rc-single__buy-now[data-rc-tooltip]:hover::before {
  opacity: 1;
}

/* ── Quick view: variable product inline swatches ────────────────────────── */
.rc-qv-content__vars .rc-single__qty-atc {
  margin-top: 0.75rem;
}

.rc-qv-content__vars .rc-swatches {
  margin-bottom: 0.75rem;
}

/* Strip the buy-now note in quick view (too compact for the extra copy) */
.rc-qv-content__vars .rc-buy-now-note {
  display: none;
}

.rc-qv-content__vars .rc-single__buy-now {
  margin-top: 0.5rem;
}

.rc-qv-content__vars .variations_form {
  margin: 0;
}

/* ── Image swatch: color-circle fallback when no image is set ───────────── */
/* Fills the image swatch box with a solid color (used when attribute is image-type
   but only some options have actual images — others fall back to their hex color) */
.rc-swatch--image .rc-swatch__inner--color {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

/* ── Size guide link in swatch header ───────────────────────────────────── */
.rc-swatches__size-guide-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--rc-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  margin-left: auto;
  transition: color 0.15s ease;
}

.rc-swatches__size-guide-link:hover {
  color: var(--rc-text);
}

/* ── Color+Label hybrid swatch ───────────────────────────────────────────── */
.rc-swatch--color-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: var(--rc-swatch-size);
  padding-inline: 12px;
  border: 1.5px solid var(--rc-border);
  background: transparent;
  color: var(--rc-text);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
  width: auto;
}

.rc-swatch--color-label .rc-swatch__dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(0,0,0,0.12);
}

.rc-swatch--color-label:hover {
  border-color: var(--rc-text);
}

.rc-swatch--color-label.rc-swatch--selected {
  background: var(--rc-primary);
  color: var(--rc-white);
  border-color: var(--rc-primary) !important;
  font-weight: 600;
}

.rc-swatch--color-label.rc-swatch--selected .rc-swatch__dot {
  border-color: rgba(255,255,255,0.35);
}

/* Shape modifiers for color-label */
.rc-swatch--color-label.rc-swatch--rounded { border-radius: 6px; }
.rc-swatch--color-label.rc-swatch--circle  { border-radius: 999px; }
.rc-swatch--color-label.rc-swatch--square  { border-radius: 2px; }

/* Single product overrides */
.rc-single__variations .rc-swatch--color-label {
  height: 38px;
  padding-inline: 14px;
  gap: 8px;
}

.rc-single__variations .rc-swatch--color-label .rc-swatch__dot {
  width: 14px;
  height: 14px;
}

/* ── Swatch overflow "+N more" expand / collapse ─────────────────────────── */
.rc-swatches__overflow-items {
  display: contents; /* renders children inline in the swatch flex list */
}

.rc-swatches__more,
.rc-swatches__less {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding-inline: 14px;
  border-radius: 6px;
  border: 1.5px dashed var(--rc-border);
  background: transparent;
  color: var(--rc-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}

.rc-swatches__more:hover,
.rc-swatches__less:hover {
  border-color: var(--rc-text);
  color: var(--rc-text);
}


/* ── WC legacy styles that may leak in — neutralise ─────────────────────── */
.rc-single__variations table.variations,
.rc-single__variations .variations td,
.rc-single__variations .variations th {
  display: block;
  border: none;
  padding: 0;
  width: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   NATIVE COMPARE — tray + drawer
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Compare tray ─────────────────────────────────────────────────────────── */
.rc-compare-tray {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1050;
  background: var(--rc-white);
  border-top: 1px solid var(--rc-border);
  box-shadow: 0 -4px 24px rgba(0,0,0,.10);
  transition: transform 280ms cubic-bezier(.4,0,.2,1);
}
.rc-compare-tray--enter { transition: transform 280ms cubic-bezier(.4,0,.2,1); }
.rc-compare-tray--hidden { transform: translateY(100%); }
.rc-compare-tray--visible { transform: translateY(0); }

.rc-compare-tray__inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.rc-compare-tray__products {
  display: flex;
  gap: 0.625rem;
  flex: 1;
}
.rc-compare-tray__product {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: var(--rc-radius-sm);
  border: 2px solid var(--rc-border);
  overflow: hidden;
  background: var(--rc-surface);
  flex-shrink: 0;
}
.rc-compare-tray__product--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rc-muted);
  opacity: .45;
  border-style: dashed;
}
.rc-compare-tray__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rc-compare-tray__remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(0,0,0,.55);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.rc-compare-tray__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}
.rc-compare-tray__count {
  font-size: 0.8125rem;
  color: var(--rc-muted);
  white-space: nowrap;
}
@media (max-width: 479px) {
  .rc-compare-tray__count { display: none; }
}
@media (max-width: 639px) {
  .rc-compare-tray__inner {
    overflow-x: auto;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }
  .rc-compare-tray__inner::-webkit-scrollbar { display: none; }
}

/* ── Compare drawer ───────────────────────────────────────────────────────── */
.rc-compare-drawer {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  pointer-events: none;
}
.rc-compare-drawer[x-show] { pointer-events: auto; }

.rc-compare-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  transition: opacity 250ms ease;
  pointer-events: auto;
}

.rc-compare-drawer__panel {
  position: relative;
  background: var(--rc-white);
  border-radius: 16px 16px 0 0;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  transition: transform 320ms cubic-bezier(.4,0,.2,1);
}
.rc-compare-drawer__panel--enter { transition: transform 320ms cubic-bezier(.4,0,.2,1); }
.rc-compare-drawer__panel--hidden { transform: translateY(100%); }
.rc-compare-drawer__panel--visible { transform: translateY(0); }

.rc-compare-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.125rem 1.5rem;
  border-bottom: 1px solid var(--rc-border);
  flex-shrink: 0;
}
.rc-compare-drawer__title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.rc-compare-drawer__product-count {
  font-weight: 400;
  color: var(--rc-muted);
  font-size: 0.875rem;
}
.rc-compare-drawer__header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.rc-compare-drawer__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--rc-border);
  background: none;
  cursor: pointer;
  color: var(--rc-text);
  transition: background 150ms;
}
.rc-compare-drawer__close:hover { background: var(--rc-surface); }

.rc-compare-drawer__body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.rc-compare-drawer__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  padding: 3rem 1.5rem;
  color: var(--rc-muted);
  font-size: 0.9375rem;
}

.rc-compare-drawer__table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Comparison table ─────────────────────────────────────────────────────── */
.rc-compare-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  table-layout: fixed;
}
.rc-compare-table__label-cell {
  width: 130px;
  min-width: 100px;
  padding: 0.875rem 1rem 0.875rem 1.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--rc-muted);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--rc-border);
  white-space: nowrap;
}
.rc-compare-table__product-cell,
.rc-compare-table__value-cell {
  padding: 0.875rem 1rem;
  font-size: 0.875rem;
  color: var(--rc-text);
  border-bottom: 1px solid var(--rc-border);
  vertical-align: top;
}
.rc-compare-table__product-cell { text-align: center; border-bottom: 2px solid var(--rc-primary); }

.rc-compare-table__header-row { background: var(--rc-surface); }
.rc-compare-table__row:nth-child(even) { background: rgba(0,0,0,.02); }

.rc-compare-table__product-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  color: inherit;
}
.rc-compare-table__product-img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: var(--rc-radius-sm);
  border: 1px solid var(--rc-border);
}
.rc-compare-table__product-name {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
}
.rc-compare-table__remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--rc-border);
  background: none;
  cursor: pointer;
  color: var(--rc-muted);
  margin: 0.5rem auto 0;
  transition: background 150ms, color 150ms;
}
.rc-compare-table__remove:hover { background: #fee2e2; color: #dc2626; border-color: #fca5a5; }

.rc-compare-table__instock  { color: #16a34a; font-weight: 600; }
.rc-compare-table__outofstock { color: #dc2626; font-weight: 600; }

.rc-compare-table__stars { color: var(--rc-primary); letter-spacing: 1px; }
.rc-compare-table__rating-text { font-size: 0.75rem; color: var(--rc-muted); margin-left: 4px; }

.rc-compare-table__value-cell--desc { font-size: 0.8125rem; color: var(--rc-muted); line-height: 1.55; }

.rc-compare-table__row--actions .rc-compare-table__value-cell { text-align: center; border-bottom: none; }

/* Active compare button on card */
.rc-card__compare-btn--active { color: var(--rc-primary) !important; background: color-mix(in srgb, var(--rc-primary) 12%, var(--rc-white)) !important; }

/* ══════════════════════════════════════════════════════════════════════════════
   29. WHATSAPP FLOATING BUTTON
   Position (bottom / side) is injected via performance.php → wp_add_inline_style
   so it respects the theme option values at runtime.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Wrapper — fixed, sits above all drawers */
.rc-wa {
    position: fixed;
    z-index: 9500;
    bottom: 24px;  /* fallback — overridden by performance.php inline style */
    right: 24px;
    left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    pointer-events: none; /* children handle their own events */
}
.rc-wa--left { align-items: flex-start; }

/* ── Main floating button ──────────────────────────────────────────────────── */
.rc-wa__btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25D366;
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.45);
    cursor: pointer;
    pointer-events: auto;
    text-decoration: none;
    flex-shrink: 0;
    /* Entry spring animation — fires once 0.6 s after page load */
    animation: rc-wa-entry 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s both;
    transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 220ms;
}
.rc-wa__btn svg { width: 30px; height: 30px; display: block; }
.rc-wa__btn:hover  { transform: scale(1.12); box-shadow: 0 8px 28px rgba(37, 211, 102, 0.6); }
.rc-wa__btn:active { transform: scale(0.92); }

/* Pulse ring — radiates 4 s after load, repeats every 30 s, CSS only.
   Animates transform+opacity only (compositor-friendly) rather than
   box-shadow — DevTools flags an animated box-shadow as a non-composited
   animation (TARGET_HAS_INVALID_COMPOSITING_STATE / UNSUPPORTED_CSS_PROPERTY),
   forcing main-thread work every frame and showing up as a CLSCulprits hit. */
.rc-wa__btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(37, 211, 102, 0.65);
    opacity: 0;
    animation: rc-wa-pulse 30s 4s infinite;
    pointer-events: none;
    will-change: transform, opacity;
}
.rc-wa--no-pulse .rc-wa__btn::before { animation: none; }

@keyframes rc-wa-entry {
    from { transform: scale(0) rotate(-30deg); opacity: 0; }
    to   { transform: scale(1) rotate(0deg);   opacity: 1; }
}

@keyframes rc-wa-pulse {
    /* Ring visible only in the first ~5 % of the 30 s cycle (≈1.5 s).
       0 % and 100 % both have opacity 0 so there is no flash on loop reset.
       scale(1.643) reproduces the old box-shadow's 18px spread at the
       button's 56px diameter: (56 + 2×18) / 56 ≈ 1.643. */
    0%, 100% { opacity: 0;    transform: scale(1); }
    1.5%      { opacity: 0.65; transform: scale(1); }
    5%        { opacity: 0;    transform: scale(1.643); }
}

/* ── Desktop hover-expand panel ───────────────────────────────────────────── */
.rc-wa__panel {
    pointer-events: auto;
    width: 288px;
    background: var(--rc-white);
    border-radius: 16px;
    padding: 1rem;
    margin-bottom: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.13), 0 0 0 1px rgba(0, 0, 0, 0.06);
    transform-origin: bottom right;
}
.rc-wa--left .rc-wa__panel { transform-origin: bottom left; }

.rc-wa__panel-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0.875rem;
}
.rc-wa__panel-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #25D366;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.rc-wa__panel-avatar svg { width: 22px; height: 22px; }
.rc-wa__panel-info { flex: 1; min-width: 0; }
.rc-wa__panel-name   { font-size: 0.875rem; font-weight: 600; color: var(--rc-text);   line-height: 1.25; }
.rc-wa__panel-status { font-size: 0.75rem;  color: var(--rc-muted); line-height: 1.25; }

.rc-wa__panel-close {
    margin-left: auto;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rc-muted);
    transition: background 140ms, color 140ms;
}
.rc-wa__panel-close:hover { background: var(--rc-surface-2, #f4f4f4); color: var(--rc-text); }

.rc-wa__panel-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--rc-border);
    border-radius: 10px;
    padding: 0.6rem 0.75rem;
    font-size: 0.875rem;
    font-family: inherit;
    color: var(--rc-text);
    background: var(--rc-surface);
    resize: none;
    line-height: 1.5;
    transition: border-color 150ms;
    margin-bottom: 0.75rem;
}
.rc-wa__panel-input:focus { outline: none; border-color: #25D366; }

.rc-wa__panel-send {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 0.625rem 1rem;
    border: none;
    border-radius: 10px;
    background: #25D366;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 140ms, transform 100ms;
}
.rc-wa__panel-send:hover  { background: #1db954; }
.rc-wa__panel-send:active { transform: scale(0.97); }

/* Panel enter / leave transitions (Alpine x-transition class hooks) */
.rc-wa-pe {
    transition: opacity 200ms ease-out, transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.rc-wa-pe--from { opacity: 0; transform: scale(0.86) translateY(8px); }
.rc-wa-pe--to   { opacity: 1; transform: scale(1)    translateY(0);   }
.rc-wa-pl {
    transition: opacity 160ms ease-in, transform 160ms ease-in;
}
.rc-wa-pl--from { opacity: 1; transform: scale(1)    translateY(0);   }
.rc-wa-pl--to   { opacity: 0; transform: scale(0.92) translateY(4px); }

/* Never show the expand panel on touch devices */
@media (hover: none) {
    .rc-wa__panel { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   60. CONTACT FORM BLOCK
   ═══════════════════════════════════════════════════════════════════════════ */

/* Standalone block wrapper — centers form, gives it room to breathe */
.rc-contact-form__standalone {
    max-width: 960px;
    margin: 0 auto;
    padding: 3rem 2.5rem;
    background: var(--rc-surface);
    border: 1.5px solid var(--rc-border);
    border-radius: var(--rc-radius-lg);
    box-shadow: var(--rc-shadow-sm);
}

.rc-contact-form { width: 100%; }

.rc-contact-form__fields {
    display: flex;
    flex-direction: column;
    gap: 1.375rem;
}

.rc-contact-form__row { display: flex; gap: 1.375rem; }
.rc-contact-form__row--two > .rc-contact-form__field { flex: 1; min-width: 0; }

.rc-contact-form__field { display: flex; flex-direction: column; gap: 0.4rem; flex: 1; }

.rc-contact-form__label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--rc-text);
    line-height: 1.4;
}

.rc-contact-form__req {
    color: var(--rc-primary);
    margin-left: 2px;
}

.rc-contact-form__input,
.rc-contact-form__textarea,
.rc-contact-form__select {
    width: 100%;
    padding: 0.8125rem 1rem;
    border: 1.5px solid var(--rc-border);
    border-radius: var(--rc-radius);
    background: var(--rc-white);
    color: var(--rc-text);
    font-size: 1rem;
    font-family: inherit;
    line-height: 1.5;
    transition: border-color 150ms, box-shadow 150ms;
    outline: none;
    box-sizing: border-box;
}

.rc-contact-form__input:focus,
.rc-contact-form__textarea:focus,
.rc-contact-form__select:focus {
    border-color: var(--rc-primary);
    box-shadow: 0 0 0 3px rgba(var(--rc-primary-rgb), 0.12);
}

.rc-contact-form__field--error .rc-contact-form__input,
.rc-contact-form__field--error .rc-contact-form__textarea,
.rc-contact-form__field--error .rc-contact-form__select {
    border-color: var(--rc-error);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.10);
}

.rc-contact-form__textarea { resize: vertical; min-height: 150px; }

.rc-contact-form__select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.75rem;
    cursor: pointer;
}

.rc-contact-form__checkbox-wrap {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    cursor: pointer;
    font-size: 0.9375rem;
    color: var(--rc-text);
    line-height: 1.55;
    padding-top: 2px;
}

.rc-contact-form__checkbox {
    width: 1.0625rem;
    height: 1.0625rem;
    accent-color: var(--rc-primary);
    flex-shrink: 0;
    margin-top: 3px;
    cursor: pointer;
}

.rc-contact-form__error {
    font-size: 0.8125rem;
    color: var(--rc-error);
    line-height: 1.4;
}

.rc-contact-form__global-error {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.125rem;
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: var(--rc-radius);
    color: #b91c1c;
    font-size: 0.9375rem;
    margin-bottom: 1.5rem;
}

.rc-contact-form__footer { margin-top: 2rem; }

.rc-contact-form__submit {
    min-width: 180px;
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
}

.rc-contact-form__submit[disabled] { opacity: 0.65; cursor: not-allowed; }

/* Success state */
.rc-contact-form__success {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    padding: 4rem 2rem;
    text-align: center;
    color: var(--rc-text);
}

.rc-contact-form__success-icon { color: var(--rc-primary); }

.rc-contact-form__success p {
    font-size: 1.125rem;
    line-height: 1.65;
    max-width: 400px;
    color: var(--rc-muted);
}

@media (max-width: 640px) {
    .rc-contact-form__standalone {
        padding: 2rem 1.25rem;
        border-radius: var(--rc-radius);
    }
    .rc-contact-form__row--two { flex-direction: column; }
    .rc-contact-form__submit { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   61. CONTACT PAGE BLOCK
   ═══════════════════════════════════════════════════════════════════════════ */

.rc-contact-page { padding: 4rem 0; }

.rc-contact-page__grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 4rem;
    align-items: start;
}

/* Info panel */
.rc-contact-page__info { padding-top: 0; }

.rc-contact-page .rc-contact-page__heading {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 700;
    color: var(--rc-text);
    margin: 0 0 0.75rem;
    line-height: 1.2;
}

.rc-contact-page__subtext {
    color: var(--rc-muted, #6b7280);
    line-height: 1.75;
    margin-bottom: 2rem;
    font-size: 1rem;
}

.rc-contact-page .rc-contact-page__details {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.rc-contact-page .rc-contact-page__detail {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    margin-bottom: 0;
}

.rc-contact-page__detail-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(var(--rc-primary-rgb), 0.10);
    color: var(--rc-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.rc-contact-page__detail-text,
.rc-contact-page__detail-link {
    font-size: 0.9375rem;
    color: var(--rc-text);
    line-height: 1.6;
    padding-top: 6px;
}

.rc-contact-page__detail-link {
    text-decoration: none;
    transition: color 150ms;
}
.rc-contact-page__detail-link:hover { color: var(--rc-primary); }

/* Social links */
.rc-contact-page__social {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin-bottom: 2rem;
}

.rc-contact-page__social-link {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 1.5px solid var(--rc-border);
    color: var(--rc-text);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 150ms, border-color 150ms, background 150ms;
    text-decoration: none;
}
.rc-contact-page__social-link:hover {
    color: var(--rc-primary);
    border-color: var(--rc-primary);
    background: color-mix(in srgb, var(--rc-primary) 6%, transparent);
}

/* Full-width map — sits below the info+form grid */
.rc-contact-page__map {
    margin-top: 3rem;
    border-radius: var(--rc-radius-lg);
    overflow: hidden;
    border: 1.5px solid var(--rc-border);
    box-shadow: var(--rc-shadow-sm);
}

.rc-contact-page__map iframe {
    display: block;
    width: 100%;
    height: 420px;
    border: none;
}

/* Form panel */
.rc-contact-page__form-panel {
    background: var(--rc-surface);
    border: 1.5px solid var(--rc-border);
    border-radius: var(--rc-radius-lg);
    padding: 2.5rem;
}

@media (max-width: 900px) {
    .rc-contact-page__grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .rc-contact-page__form-panel {
        padding: 1.75rem;
    }
}

@media (max-width: 480px) {
    .rc-contact-page { padding: 2.5rem 0; }
    .rc-contact-page__form-panel { padding: 1.25rem; border-radius: 12px; }
}

/* ── RC Accordion / FAQ Block ────────────────────────────────────────────────── */

.rc-accordion {
    width: 100%;
    padding: 3rem 0;
}

.rc-accordion__title {
    text-align: center;
    font-size: clamp(1.25rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--rc-primary);
    margin: 0 0 2rem;
}

/* Grid — handles 1 or 2 columns */
.rc-accordion__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 3rem;
}

.rc-accordion--cols-2 .rc-accordion__grid {
    grid-template-columns: repeat(2, 1fr);
}

/* Trigger base */
.rc-accordion__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-family: var(--rc-font);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    transition: background 0.2s ease, color 0.2s ease;
}

.rc-accordion__trigger:focus-visible {
    outline: 2px solid var(--rc-primary);
    outline-offset: 2px;
}

.rc-accordion__q {
    flex: 1;
    min-width: 0;
}
.rc-accordion--bold-q .rc-accordion__trigger { font-weight: 700; }

/* Answer body */
.rc-accordion__answer {
    line-height: 1.6;
    color: var(--rc-text);
}

.rc-accordion__answer > * + * {
    margin-top: 0.5em;
}

.rc-accordion__answer a {
    color: var(--rc-primary);
    text-decoration: underline;
}

/* ── Colored variant ─────────────────────────────────────────────────────────── */

.rc-accordion--colored .rc-accordion__item {
    margin-bottom: 0.375rem;
}

.rc-accordion--colored .rc-accordion__trigger {
    background: var(--rc-primary);
    color: #fff;
    font-weight: 700;
    padding: 0.875rem 1.25rem;
}

.rc-accordion--colored .rc-accordion__trigger:hover {
    background: var(--rc-primary-dark, var(--rc-primary));
}

/* +/− icon sits on the left for colored variant */
.rc-accordion--colored .rc-accordion__icon {
    flex-shrink: 0;
    order: -1;
    font-style: normal;
    font-size: 1.25rem;
    line-height: 1;
    font-weight: 300;
    width: 1.125rem;
    text-align: center;
}

.rc-accordion--colored .rc-accordion__icon::before {
    content: '+';
}

.rc-accordion--colored .rc-accordion__trigger[aria-expanded="true"] .rc-accordion__icon::before {
    content: '\2212'; /* − */
}

.rc-accordion--colored .rc-accordion__body {
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-top: none;
    background: var(--rc-white, #fff);
    margin-bottom: 0.375rem;
}

.rc-accordion--colored .rc-accordion__answer {
    padding: 1rem 1.25rem;
    font-weight: 500;
}

/* ── Minimal variant ─────────────────────────────────────────────────────────── */

.rc-accordion--minimal .rc-accordion__item {
    border-bottom: 1px solid var(--rc-border);
}

.rc-accordion--minimal .rc-accordion__col > .rc-accordion__item:first-child {
    border-top: 1px solid var(--rc-border);
}

/* Open item gets card treatment */
.rc-accordion--minimal .rc-accordion__item--open {
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius-sm);
    background: var(--rc-surface);
    margin: 0.375rem 0;
}

.rc-accordion--minimal .rc-accordion__item--open + .rc-accordion__item {
    border-top: none;
}

.rc-accordion--minimal .rc-accordion__trigger {
    color: var(--rc-text);
    font-weight: 500;
    padding: 1rem 0;
    gap: 1rem;
}

/* Active trigger shifts to brand color and gains padding */
.rc-accordion--minimal .rc-accordion__item--open .rc-accordion__trigger {
    color: var(--rc-primary);
    padding: 1rem 1.25rem;
}

/* Chevron icon sits on the right */
.rc-accordion--minimal .rc-accordion__icon {
    flex-shrink: 0;
    order: 2;
    display: block;
    width: 16px;
    height: 16px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);   /* ↓ */
    transition: transform 0.25s var(--rc-ease);
    margin-top: -3px;
}

.rc-accordion--minimal .rc-accordion__trigger[aria-expanded="true"] .rc-accordion__icon {
    transform: rotate(-135deg);  /* ↑ */
    margin-top: 3px;
}

.rc-accordion--minimal .rc-accordion__answer {
    padding: 0 0 1rem;
}

.rc-accordion--minimal .rc-accordion__item--open .rc-accordion__answer {
    padding: 0 1.25rem 1.25rem;
}

/* ── Responsive ──────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
    .rc-accordion--cols-2 .rc-accordion__grid {
        grid-template-columns: 1fr;
    }

    .rc-accordion--cols-2 .rc-accordion__col + .rc-accordion__col .rc-accordion__item:first-child {
        border-top: none;
    }
}