/* ===================================================
   FreshRhythm Dark Mode Theme
   Black Cherry & Cream Vanilla — dark palette
   =================================================== */

html[data-theme="dark"] {
  --bg: #170A0D;
  --bg-soft: #210F13;
  --surface: #2B1217;
  --surface-hover: #391720;
  --text: #FDF4E5;
  --muted: #C9A8AC;
  --line: #431E26;
  --brand: #E85C78;
  --brand-strong: #C81F44;
  --on-strong: #FFFFFF;
  --shadow: 0 18px 46px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.75);
  --polaroid-bg: #26131A;
  --polaroid-border: #441F28;
}

/* Full-Screen Menu & Header in Dark Mode */
html[data-theme="dark"] header {
  background: rgba(24, 13, 17, 0.92);
  border-bottom: 1px solid var(--line);
}

html[data-theme="dark"] header.scrolled {
  background: rgba(24, 13, 17, 0.98);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] .menu-fullscreen {
  background: var(--bg);
}

html[data-theme="dark"] .dropdown-menu {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.55);
}

/* Buttons in Dark Mode */
html[data-theme="dark"] .primary,
html[data-theme="dark"] .subscribe {
  background: var(--brand-strong);
  color: #FFFFFF;
  border-color: var(--brand-strong);
  box-shadow: 0 8px 22px rgba(200, 31, 68, 0.4);
}

html[data-theme="dark"] .primary:hover,
html[data-theme="dark"] .subscribe:hover {
  background: #F04B6D;
  box-shadow: 0 12px 30px rgba(240, 75, 109, 0.55);
}

html[data-theme="dark"] .secondary,
html[data-theme="dark"] .login {
  background: rgba(232, 92, 120, 0.1);
  color: var(--brand);
  border-color: var(--brand);
}

html[data-theme="dark"] .secondary:hover,
html[data-theme="dark"] .login:hover {
  background: var(--brand);
  color: #FFFFFF;
}

html[data-theme="dark"] .icon {
  background: var(--surface);
  border-color: var(--line);
  color: var(--text);
}

html[data-theme="dark"] .icon:hover {
  background: var(--surface-hover);
  border-color: var(--brand);
  color: var(--brand);
}

/* Polaroids, Arched Frames & Creative Elements in Dark Mode */
html[data-theme="dark"] .polaroid-card {
  background: var(--polaroid-bg);
  border-color: var(--polaroid-border);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
}

html[data-theme="dark"] .polaroid-caption {
  color: var(--text);
}

html[data-theme="dark"] .arch-frame {
  border-color: var(--line);
}

html[data-theme="dark"] .arch-overlap-card {
  background: var(--surface);
  border-color: var(--line);
}

html[data-theme="dark"] .badge-pill,
html[data-theme="dark"] .float-badge {
  background: var(--surface);
  border-color: var(--line);
  color: var(--text);
}

html[data-theme="dark"] .number-card,
html[data-theme="dark"] .plan-editorial-card {
  background: var(--surface);
  border-color: var(--line);
}

html[data-theme="dark"] .number-card:hover,
html[data-theme="dark"] .plan-editorial-card:hover {
  border-color: var(--brand);
}

html[data-theme="dark"] .quote-band {
  background: linear-gradient(135deg, #18080C 0%, #280C16 100%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

html[data-theme="dark"] .quote-editorial-card {
  background: rgba(45, 23, 32, 0.95);
  border-color: var(--line);
}

html[data-theme="dark"] .cta-editorial-box {
  background: linear-gradient(135deg, #2B121A 0%, #18080C 100%);
  border-color: var(--line);
}

html[data-theme="dark"] footer {
  background: #100608;
  border-top: 1px solid var(--line);
}

html[data-theme="dark"] .top {
  background: var(--brand-strong);
  color: #FFFFFF;
  box-shadow: 0 8px 24px rgba(200, 31, 68, 0.45);
}

/* Home Page 2 (Pantry Edition) Dark Mode */
html[data-theme="dark"] .hero-wine-frame {
  background: #170A0D;
  border: 1px solid #3F1723;
}

html[data-theme="dark"] .moodboard-canvas {
  background: #1D0C11;
  border-color: #3B1B22;
}

html[data-theme="dark"] .moodboard-top-block h2.moodboard-title {
  color: #E85C78;
}

html[data-theme="dark"] .moodboard-inset-card {
  background: #28111A;
  border-color: #3B1B22;
}

html[data-theme="dark"] .passport-widget {
  background: #170A0D;
  border: 1px solid #3F1723;
}

html[data-theme="dark"] .polaroid-corner-canvas {
  background: linear-gradient(135deg, #3A0F1A 0%, #220711 100%);
  border: 1px solid #571A2A;
}

html[data-theme="dark"] .arch-pantry-card {
  background: #2B1217;
  border-color: #3B1B22;
}

html[data-theme="dark"] .arch-pantry-price strong {
  color: #E85C78;
}

html[data-theme="dark"] .faq-typographic-sidebar h2 {
  color: #FDF4E5;
}

html[data-theme="dark"] .faq-hairline-item {
  border-color: #3B1B22;
}

html[data-theme="dark"] .faq-hairline-item:hover {
  background: #231018;
}

html[data-theme="dark"] .faq-num-tag {
  color: #E85C78;
}

html[data-theme="dark"] .frosted-overlay-card {
  background: rgba(36, 17, 24, 0.88);
  border-color: rgba(232, 92, 120, 0.25);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.6);
}

html[data-theme="dark"] .frosted-nested-photo {
  border-color: #2B121A;
}

html[data-theme="dark"] .frosted-overlay-card h2 {
  color: #FDF4E5;
}

html[data-theme="dark"] .refill-flow-step {
  background: #2B1217;
  border-color: #3B1B22;
}

html[data-theme="dark"] .refill-step-badge {
  background: #C81F44;
  color: #FFFFFF;
}

html[data-theme="dark"] .refill-metrics-banner {
  background: #1A0810;
  border-color: #3B1B22;
}

html[data-theme="dark"] .refill-metric-val {
  color: #E85C78;
}

html[data-theme="dark"] .photo-ribbon-section {
  background: linear-gradient(135deg, #230A13 0%, #140409 100%);
  border: 1px solid #3D1420;
}

/* About Us Page Dark Mode */
html[data-theme="dark"] .arched-manifesto-card {
  background: #1D0C11;
  border-color: #3B1B22;
}

html[data-theme="dark"] .manifesto-arch-img {
  border-color: #2B121A;
}

html[data-theme="dark"] .pillar-card-gold {
  background: #241019;
  border-color: #C5A059;
}

html[data-theme="dark"] .split-dark-block {
  background: #17070C;
}

html[data-theme="dark"] .split-light-block {
  background: #2B1217;
}

html[data-theme="dark"] .split-light-block h3 {
  color: #FDF4E5;
}

html[data-theme="dark"] .grower-moodboard {
  background: #1D0C11;
  border-color: #3B1B22;
}

html[data-theme="dark"] .sustainability-item {
  border-color: #3B1B22;
}

html[data-theme="dark"] .sustainability-item:hover {
  background: #241018;
}

html[data-theme="dark"] .sustainability-num {
  color: #E85C78;
}

html[data-theme="dark"] .milestone-card {
  background: #2B1217;
  border-color: #3B1B22;
}

html[data-theme="dark"] .milestone-year-badge {
  background: #351320;
  color: #E85C78;
}

html[data-theme="dark"] .about-finale-section {
  background: linear-gradient(135deg, #4A1226 0%, #2B0C16 100%);
  border: 1px solid #571A2A;
}

/* Plans Page Dark Mode Styles */
html[data-theme="dark"] .plans-hero {
  background: linear-gradient(135deg, #170A0D 0%, #210F13 50%, #170A0D 100%);
}

html[data-theme="dark"] .plans-hero::before {
  background: radial-gradient(circle at 30% 50%, rgba(232, 92, 120, 0.15) 0%, transparent 50%);
}

html[data-theme="dark"] .plans-hero::after {
  opacity: 0.3;
}

html[data-theme="dark"] .hero-pill {
  background: var(--surface);
  border-color: var(--line);
  color: var(--brand);
}

html[data-theme="dark"] .hero-pill:hover {
  border-color: var(--brand);
  box-shadow: 0 12px 32px rgba(232, 92, 120, 0.25);
}

html[data-theme="dark"] .hero-main-box {
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
}

html[data-theme="dark"] .hero-box-badge {
  background: var(--brand-strong);
  color: #FFFFFF;
}

html[data-theme="dark"] .floating-produce {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
}

html[data-theme="dark"] .box-display-stage {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}

html[data-theme="dark"] .box-floating-badge {
  background: var(--brand-strong);
  color: #FFFFFF;
}

html[data-theme="dark"] .box-spec {
  background: rgba(232, 92, 120, 0.08);
}

html[data-theme="dark"] .feature-tag {
  background: rgba(232, 92, 120, 0.12);
  color: var(--brand);
}

html[data-theme="dark"] .plan-crate {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
}

html[data-theme="dark"] .plan-crate.popular {
  border-color: var(--brand);
  box-shadow: 0 20px 50px rgba(232, 92, 120, 0.3);
}

html[data-theme="dark"] .popular-badge {
  background: var(--brand);
  color: #FFFFFF;
}

html[data-theme="dark"] .crate-header {
  border-bottom-color: var(--line);
}

html[data-theme="dark"] .category-node {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] .central-basket {
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
}

html[data-theme="dark"] .basket-label {
  background: var(--brand-strong);
  color: #FFFFFF;
}

html[data-theme="dark"] .path-line {
  stroke: var(--line);
}

html[data-theme="dark"] .stop-circle {
  background: var(--brand);
  color: #FFFFFF;
  box-shadow: 0 8px 20px rgba(232, 92, 120, 0.4);
}

html[data-theme="dark"] .stop-badge {
  background: rgba(232, 92, 120, 0.1);
  color: var(--text);
}

html[data-theme="dark"] .testimonial-featured {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] .testimonial-image {
  border-color: var(--brand);
}

html[data-theme="dark"] .testimonial-card {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .cta-premium-block {
  background: linear-gradient(135deg, #2B121A 0%, #18080C 100%);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
}

html[data-theme="dark"] .cta-overlay {
  background: var(--brand);
  color: #FFFFFF;
}

html[data-theme="dark"] .cta-content .tagline {
  color: var(--on-strong);
}

html[data-theme="dark"] .cta-content h2 {
  color: var(--on-strong);
}

html[data-theme="dark"] .cta-content > p {
  color: color-mix(in srgb, var(--on-strong) 75%, transparent);
}

html[data-theme="dark"] .cta-feature {
  color: var(--on-strong);
}

html[data-theme="dark"] .cta-buttons .primary {
  background: var(--on-strong);
  color: var(--brand-strong);
  border-color: var(--on-strong);
}

html[data-theme="dark"] .cta-buttons .primary:hover {
  background: var(--bg);
  color: var(--brand-strong);
  border-color: var(--bg);
}

html[data-theme="dark"] .cta-buttons .secondary {
  background: transparent;
  color: var(--on-strong);
  border-color: var(--on-strong);
}

html[data-theme="dark"] .cta-buttons .secondary:hover {
  background: color-mix(in srgb, var(--on-strong) 15%, transparent);
}

/* How It Works Page Dark Mode Styles */
html[data-theme="dark"] .hiw-hero-overlay {
  background: linear-gradient(135deg, rgba(200, 31, 68, 0.5) 0%, rgba(23, 10, 13, 0.8) 100%);
}

html[data-theme="dark"] .hiw-hero-eyebrow,
html[data-theme="dark"] .hiw-hero-title,
html[data-theme="dark"] .hiw-hero-text {
  color: var(--on-strong);
}

html[data-theme="dark"] .hiw-hero-btns .btn {
  background: var(--on-strong);
  color: var(--brand-strong);
}

html[data-theme="dark"] .hiw-hero-btns .secondary {
  color: var(--on-strong);
  border-color: var(--on-strong);
}

html[data-theme="dark"] .hiw-hero-btns .secondary:hover {
  background: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .hiw-hero-number {
  color: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .hiw-curved-line {
  border-color: rgba(255, 255, 255, 0.15);
}

html[data-theme="dark"] .stage-icon {
  background: var(--surface);
  border-color: var(--brand);
}

html[data-theme="dark"] .stage-icon:hover {
  background: var(--brand);
  color: var(--on-strong);
}

html[data-theme="dark"] .step-basket-image {
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}

html[data-theme="dark"] .floating-ingredient {
  border-color: var(--surface);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] .box-type {
  border-bottom-color: var(--line);
}

html[data-theme="dark"] .rhythm-pattern {
  background: var(--surface);
  border-color: var(--line);
}

html[data-theme="dark"] .rhythm-pattern:hover {
  border-color: var(--brand);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] .flow-action {
  background: var(--surface);
  border-color: var(--line);
}

html[data-theme="dark"] .flow-action:hover {
  border-color: var(--brand);
}

html[data-theme="dark"] .flow-image {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] .delivery-overlay {
  background: linear-gradient(135deg, rgba(200, 31, 68, 0.6) 0%, rgba(23, 10, 13, 0.85) 100%);
}

html[data-theme="dark"] .step-label {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.15);
}

html[data-theme="dark"] .life-image {
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}

html[data-theme="dark"] .action-line {
  background: var(--brand);
}

html[data-theme="dark"] .finale-overlay {
  background: linear-gradient(135deg, rgba(200, 31, 68, 0.7) 0%, rgba(23, 10, 13, 0.9) 100%);
}

html[data-theme="dark"] .finale-footer-links {
  border-top-color: rgba(255, 255, 255, 0.15);
}

html[data-theme="dark"] .finale-footer-links a {
  color: rgba(255, 255, 255, 0.7);
}

html[data-theme="dark"] .circular-arrow {
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.25);
}

html[data-theme="dark"] .hiw-journey {
  background: var(--bg);
}

html[data-theme="dark"] .hiw-step-1 {
  background: var(--bg-soft);
}

html[data-theme="dark"] .hiw-step-2 {
  background: var(--bg);
}

html[data-theme="dark"] .hiw-step-3 {
  background: var(--bg-soft);
}

html[data-theme="dark"] .hiw-life-changes {
  background: var(--bg);
}

/* Dark mode for new animations and effects */
html[data-theme="dark"] .hiw-hero-bg::after {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="25" cy="25" r="1" fill="%23FFFFFF" opacity="0.2"/><circle cx="75" cy="75" r="1" fill="%23FFFFFF" opacity="0.15"/><circle cx="50" cy="10" r="0.5" fill="%23FFFFFF" opacity="0.18"/><circle cx="10" cy="60" r="0.8" fill="%23FFFFFF" opacity="0.15"/><circle cx="90" cy="40" r="0.6" fill="%23FFFFFF" opacity="0.2"/></svg>');
}

html[data-theme="dark"] .flow-action::before {
  background: linear-gradient(90deg, transparent, rgba(232, 92, 120, 0.15), transparent);
}

html[data-theme="dark"] .action-line::after {
  background: var(--brand);
}

html[data-theme="dark"] .stage-icon::after {
  border-color: var(--brand);
}

html[data-theme="dark"] .rhythm-dot:hover {
  fill: var(--brand-strong);
}

html[data-theme="dark"] .delivery-step {
  animation: deliveryStepFloat 3s ease-in-out infinite;
}

html[data-theme="dark"] .step-label {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.15);
}

html[data-theme="dark"] .step-label:hover {
  background: rgba(255, 255, 255, 0.2);
}

html[data-theme="dark"] .life-image::before {
  background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, transparent 50%);
}

/* ==========================================================
   HOW IT WORKS — DARK MODE REFINEMENT
   Keep the page deep and rich, not flat-black.
   ========================================================== */
html[data-theme="dark"] .page-how-it-works {
  --hiw-dark-bg: #21151a;
  --hiw-dark-soft: #2a1a20;
  --hiw-dark-surface: #342027;
  --hiw-dark-line: #57343e;
}

html[data-theme="dark"] .page-how-it-works .hiw-hero {
  background: #25181b;
}

html[data-theme="dark"] .page-how-it-works .hiw-hero-overlay {
  background:
    linear-gradient(90deg, rgba(24,10,14,.94) 0%, rgba(35,15,21,.78) 34%, rgba(35,15,21,.35) 60%, rgba(24,10,14,.12) 100%);
}

html[data-theme="dark"] .page-how-it-works .hiw-hero-image {
  filter: brightness(.82) saturate(1.12) contrast(1.02);
}

html[data-theme="dark"] .page-how-it-works .hiw-hero-title,
html[data-theme="dark"] .page-how-it-works .hiw-hero-text,
html[data-theme="dark"] .page-how-it-works .hiw-hero-meta,
html[data-theme="dark"] .page-how-it-works .hiw-hero-eyebrow {
  color: #fff7ec;
}

html[data-theme="dark"] .page-how-it-works .hiw-hero-title span,
html[data-theme="dark"] .page-how-it-works .hiw-hero-meta i,
html[data-theme="dark"] .page-how-it-works .hiw-hero-eyebrow {
  color: var(--brand);
}

html[data-theme="dark"] .page-how-it-works .hiw-hero-number {
  color: rgba(255,247,236,.09);
}

html[data-theme="dark"] .page-how-it-works .hiw-journey {
  background:
    radial-gradient(circle at 15% 25%, rgba(232,92,120,.10), transparent 30%),
    var(--hiw-dark-bg);
}

html[data-theme="dark"] .page-how-it-works .hiw-step-1,
html[data-theme="dark"] .page-how-it-works .hiw-step-3,
html[data-theme="dark"] .page-how-it-works .hiw-life-changes {
  background:
    radial-gradient(circle at 20% 25%, rgba(200,149,67,.09), transparent 30%),
    radial-gradient(circle at 80% 70%, rgba(83,111,82,.12), transparent 32%),
    var(--hiw-dark-soft);
}

html[data-theme="dark"] .page-how-it-works .box-type {
  border-bottom-color: var(--hiw-dark-line);
}

html[data-theme="dark"] .page-how-it-works .box-name,
html[data-theme="dark"] .page-how-it-works .step-heading,
html[data-theme="dark"] .page-how-it-works .step-description,
html[data-theme="dark"] .page-how-it-works .hiw-kicker,
html[data-theme="dark"] .page-how-it-works .hiw-box-note,
html[data-theme="dark"] .page-how-it-works .action-label {
  color: #fff3e6;
}

html[data-theme="dark"] .page-how-it-works .box-type:hover .box-name,
html[data-theme="dark"] .page-how-it-works .box-type.active .box-name,
html[data-theme="dark"] .page-how-it-works .box-arrow,
html[data-theme="dark"] .page-how-it-works .box-index,
html[data-theme="dark"] .page-how-it-works .hiw-kicker {
  color: var(--brand);
}

html[data-theme="dark"] .page-how-it-works .hiw-box-image-frame,
html[data-theme="dark"] .page-how-it-works .flow-image,
html[data-theme="dark"] .page-how-it-works .life-image {
  box-shadow: 0 28px 65px rgba(0,0,0,.42);
}

html[data-theme="dark"] .page-how-it-works .visual-ring {
  border-color: rgba(232,92,120,.24);
}

html[data-theme="dark"] .page-how-it-works .ring-b {
  border-color: rgba(200,149,67,.24);
}

html[data-theme="dark"] .page-how-it-works .hiw-step-2 {
  background: #24181d;
}

html[data-theme="dark"] .page-how-it-works .rhythm-pattern {
  border-bottom-color: var(--hiw-dark-line);
}

html[data-theme="dark"] .page-how-it-works .rhythm-pattern p,
html[data-theme="dark"] .page-how-it-works .stage-desc {
  color: #d9c3c4;
}

html[data-theme="dark"] .page-how-it-works .hiw-step-4 {
  background: #24171c;
}

html[data-theme="dark"] .page-how-it-works .delivery-image {
  filter: brightness(.76) saturate(1.1);
}

html[data-theme="dark"] .page-how-it-works .delivery-overlay {
  background: linear-gradient(90deg, rgba(23,10,13,.60), rgba(90,30,47,.34) 58%, rgba(23,10,13,.24));
}

html[data-theme="dark"] .page-how-it-works .life-description {
  color: #d9c3c4;
}

html[data-theme="dark"] .page-how-it-works .hiw-finale {
  background: #24171c;
}

html[data-theme="dark"] .page-how-it-works .finale-image {
  filter: brightness(.72) saturate(1.08);
}

html[data-theme="dark"] .page-how-it-works .finale-overlay {
  background: linear-gradient(120deg, rgba(23,10,13,.64), rgba(91,30,47,.42) 58%, rgba(23,10,13,.28));
}

html[data-theme="dark"] .page-how-it-works .finale-description {
  color: rgba(255,248,233,.88);
}

/* =========================================================
   HOW IT WORKS — DARK MODE FINAL CONTRAST
   ========================================================= */

html[data-theme="dark"] .page-how-it-works .hiw-hero {
  background: #170A0D;
}

html[data-theme="dark"] .page-how-it-works .hiw-hero-image {
  filter: brightness(.72) saturate(1.12);
}

html[data-theme="dark"] .page-how-it-works .hiw-hero-overlay {
  background:
    linear-gradient(90deg,
      rgba(12,4,7,.88) 0%,
      rgba(23,10,13,.70) 38%,
      rgba(23,10,13,.24) 70%,
      rgba(23,10,13,.10) 100%);
}

html[data-theme="dark"] .page-how-it-works .hiw-hero-title,
html[data-theme="dark"] .page-how-it-works .hiw-hero-title span,
html[data-theme="dark"] .page-how-it-works .hiw-hero-text,
html[data-theme="dark"] .page-how-it-works .hiw-hero-meta {
  color: #FFF7E8;
}

html[data-theme="dark"] .page-how-it-works .hiw-hero-meta i {
  color: #F5C96A;
}

/* Step 1 */
html[data-theme="dark"] .page-how-it-works .hiw-step-1 {
  background:
    radial-gradient(circle at 15% 30%, rgba(232,92,120,.10), transparent 28%),
    radial-gradient(circle at 85% 70%, rgba(110,145,100,.10), transparent 30%),
    #210F13;
}

/* Sample-inspired Step 3 / Customize */
html[data-theme="dark"] .page-how-it-works .customize-editorial-panel {
  background:
    radial-gradient(circle at 15% 15%, rgba(232,92,120,.18), transparent 28%),
    linear-gradient(145deg, #64142C 0%, #430E20 100%);
}

html[data-theme="dark"] .page-how-it-works .customize-editorial-panel h2,
html[data-theme="dark"] .page-how-it-works .customize-lead,
html[data-theme="dark"] .page-how-it-works .customize-action-list strong {
  color: #FFF7E8;
}

html[data-theme="dark"] .page-how-it-works .customize-action-list em {
  color: rgba(255,247,232,.72);
}

html[data-theme="dark"] .page-how-it-works .customize-editorial-visual {
  background:
    radial-gradient(circle at 70% 25%, rgba(232,92,120,.12), transparent 26%),
    #1B0C10;
}

html[data-theme="dark"] .page-how-it-works .customize-polaroid {
  background: #FFF7E8;
}

html[data-theme="dark"] .page-how-it-works .customize-polaroid span {
  color: #430E20;
}

html[data-theme="dark"] .page-how-it-works .customize-adjust {
  color: #F2B8C5;
}

/* Section 6: text always sits on an adaptive light/dark surface */
html[data-theme="dark"] .page-how-it-works .hiw-delivery-editorial,
html[data-theme="dark"] .page-how-it-works .delivery-editorial-visual {
  background: #170A0D;
}

html[data-theme="dark"] .page-how-it-works .delivery-editorial-copy {
  background:
    radial-gradient(circle at 20% 25%, rgba(232,92,120,.10), transparent 30%),
    #241116;
}

html[data-theme="dark"] .page-how-it-works .delivery-editorial-copy h2,
html[data-theme="dark"] .page-how-it-works .delivery-road strong {
  color: #FFF7E8;
}

html[data-theme="dark"] .page-how-it-works .delivery-lead,
html[data-theme="dark"] .page-how-it-works .delivery-road small {
  color: #DCC1C5;
}

html[data-theme="dark"] .page-how-it-works .delivery-road > div {
  border-color: #4A242D;
}

html[data-theme="dark"] .page-how-it-works .delivery-photo-small {
  background: #FFF7E8;
}

/* Sample Box page — dark-mode readability after final visual fixes */
html[data-theme="dark"] .sb-hero {
  background:
    linear-gradient(100deg, rgba(15,5,8,.86) 0%, rgba(15,5,8,.68) 48%, rgba(15,5,8,.35) 100%),
    url('../images/fresh-produce-market-stand.jpg') center 54% / cover no-repeat;
}
html[data-theme="dark"] .sb-slider-section,
html[data-theme="dark"] .sb-ingredients-section,
html[data-theme="dark"] .sb-journey-section,
html[data-theme="dark"] .sb-freshness-section,
html[data-theme="dark"] .sb-cta-section {
  color: var(--text);
}

html[data-theme="dark"] .sb-stage-description,
html[data-theme="dark"] .sb-cta-description {
  color: rgba(255,244,232,.78);
}
html[data-theme="dark"] .sb-cta-section {
  background:
    radial-gradient(circle at 78% 35%, rgba(232,92,120,.16), transparent 30%),
    linear-gradient(135deg, #18090e 0%, #281018 100%);
}
/* =====================================================================
   SAMPLE BOX PAGE — dark mode (merged from the former sample-box.css)
   ===================================================================== */

/* ===================================================
   Sample Box Page - Premium Interactive Experience
   FreshRhythm Grocery Subscription Service
   =================================================== */

/* Base Setup */

/* Custom Cursor for Desktop */

/* ===================================================
   SECTION 1 — HALF-VIEWPORT SAMPLE BOX BANNER
   Layout: Layered composition with parallax
   Animation: Parallax + Staggered Text + Curtain Reveal
   =================================================== */

/* Floating Produce Elements */

/* CTA Button Effects */

/* Parallax Effect */

/* Responsive Design */

/* ===================================================
   SECTION 2 — INTERACTIVE SAMPLE BOX IMAGE SLIDER
   Layout: Large central image with preview strip
   Animation: Wipe Reveal + Ripple + 3D Tilt
   =================================================== */

/* Wipe Effect */

/* Shimmer Effect on Image */

/* Navigation Controls */

/* Border Trace Effect */

/* Image Counter */

/* Image Caption */

/* Preview Strip */

/* Responsive Design */

/* Touch-friendly swipe indicator */

/* ===================================================
   SECTION 4 — SAMPLE BOX JOURNEY / SCROLL STORY
   Layout: Vertical scrollytelling with sticky stages
   Animation: Scroll Reveal + Sticky + SVG Path Drawing
   =================================================== */

/* Journey Path */

/* Journey Stages */

/* Alternating Layout */

/* Stage Number */

/* Stage Content */

/* Stage Visual */

/* Background Changes */

/* Counter Animation */

/* Responsive Design */

/* Responsive Design */

/* ===================================================
   SECTION 6 — FRESHNESS & QUALITY
   Layout: Typography + Photography with spotlight
   Animation: Kinetic Typography + Spotlight + Liquid Motion
   =================================================== */

/* Large Typography */

/* Kinetic Marquee */

/* Photography Grid */

/* Spotlight Effect */

/* Floating Labels */

/* Supporting Points */

/* Liquid Blob Background */

/* Typewriter Effect */

/* Responsive Design */

/* ===================================================
   SECTION 7 — FINAL SAMPLE BOX CTA
   Layout: Premium conversion with layered composition
   Animation: Curtain Reveal + Ripple + Glow + 3D Tilt
   =================================================== */

/* CTA Content */

/* Counter */

/* CTA Buttons */

/* Ripple Effect */

/* CTA Visual */

/* Emerging Products */

/* Particle Effects */

/* Decorative Lines */

/* Glow Effect */

/* Responsive Design */

/* ===================================================
   REDUCED MOTION SUPPORT
   =================================================== */

/* ===================================================
   ACCESSIBILITY ENHANCEMENTS
   =================================================== */

/* Focus States */

/* High Contrast Mode Support */

/* ===================================================
   RTL SUPPORT
   =================================================== */

/* Hero Section RTL */

/* Slider Section RTL */

/* Exploded Section RTL */

/* Journey Section RTL */

/* Freshness Section RTL */

/* CTA Section RTL */

/* RTL Responsive Adjustments */

/* ===================================================
   DARK MODE SUPPORT
   =================================================== */

/* Hero Section Dark Mode */

html[data-theme="dark"] .sb-hero {
  background: linear-gradient(135deg, var(--bg-soft) 0%, var(--bg) 100%);
}

html[data-theme="dark"] .sb-hero::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="1" fill="%23E85C78" opacity="0.12"/><circle cx="80" cy="80" r="1.5" fill="%23E85C78" opacity="0.08"/><circle cx="50" cy="10" r="0.8" fill="%23E85C78" opacity="0.1"/><circle cx="10" cy="70" r="1.2" fill="%23E85C78" opacity="0.08"/><circle cx="90" cy="30" r="0.6" fill="%23E85C78" opacity="0.12"/></svg>');
}

html[data-theme="dark"] .sb-hero-box-main {
  background: linear-gradient(135deg, var(--surface) 0%, var(--bg-soft) 100%);
  border-color: var(--line);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.6);
}

html[data-theme="dark"] body.sample-box-page .floating-produce {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] .sb-hero-title {
  color: var(--text);
}

html[data-theme="dark"] .sb-hero-description {
  color: var(--muted);
}

/* Slider Section Dark Mode */

html[data-theme="dark"] .sb-slider-section {
  background: var(--surface);
}

html[data-theme="dark"] .sb-slider-main {
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}

html[data-theme="dark"] .sb-slider-wipe {
  background: var(--surface);
}

html[data-theme="dark"] .sb-slider-nav {
  background: var(--surface);
  border-color: var(--line);
  color: var(--text);
}

html[data-theme="dark"] .sb-slider-nav:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--surface-hover);
}

html[data-theme="dark"] .sb-slider-thumb {
  border-color: var(--line);
  background: var(--surface);
}

html[data-theme="dark"] .sb-slider-thumb.active {
  border-color: var(--brand);
}

/* Exploded Section Dark Mode */

/* Journey Section Dark Mode */

html[data-theme="dark"] .sb-journey-section {
  background: var(--bg);
}

html[data-theme="dark"] .sb-journey-path {
  background: var(--line);
}

html[data-theme="dark"] .sb-journey-progress {
  background: var(--brand);
}

html[data-theme="dark"] .sb-stage-number {
  background: var(--surface);
  border-color: var(--line);
  color: var(--text);
}

html[data-theme="dark"] .sb-journey-stage.active .sb-stage-number {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-strong);
}

html[data-theme="dark"] .sb-stage-title {
  color: var(--text);
}

html[data-theme="dark"] .sb-stage-description {
  color: var(--muted);
}

html[data-theme="dark"] .sb-journey-visual {
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}

html[data-theme="dark"] .sb-journey-stage:nth-child(1) {
  background: linear-gradient(90deg, transparent 40%, var(--bg-soft) 40%);
}

html[data-theme="dark"] .sb-journey-stage:nth-child(2) {
  background: linear-gradient(90deg, var(--bg-soft) 60%, transparent 60%);
}

html[data-theme="dark"] .sb-journey-stage:nth-child(3) {
  background: linear-gradient(90deg, transparent 40%, var(--bg-soft) 40%);
}

html[data-theme="dark"] .sb-journey-stage:nth-child(4) {
  background: linear-gradient(90deg, var(--bg-soft) 60%, transparent 60%);
}

html[data-theme="dark"] .sb-journey-stage:nth-child(5) {
  background: linear-gradient(90deg, transparent 40%, var(--bg-soft) 40%);
}

/* Dark Mode RTL Support for Journey Section */

html[data-theme="dark"][dir="rtl"] .sb-journey-stage:nth-child(1) {
  background: linear-gradient(270deg, transparent 40%, var(--bg-soft) 40%);
}

html[data-theme="dark"][dir="rtl"] .sb-journey-stage:nth-child(2) {
  background: linear-gradient(270deg, var(--bg-soft) 60%, transparent 60%);
}

html[data-theme="dark"][dir="rtl"] .sb-journey-stage:nth-child(3) {
  background: linear-gradient(270deg, transparent 40%, var(--bg-soft) 40%);
}

html[data-theme="dark"][dir="rtl"] .sb-journey-stage:nth-child(4) {
  background: linear-gradient(270deg, var(--bg-soft) 60%, transparent 60%);
}

html[data-theme="dark"][dir="rtl"] .sb-journey-stage:nth-child(5) {
  background: linear-gradient(270deg, transparent 40%, var(--bg-soft) 40%);
}

/* Dark Mode RTL Support for Hero Section */

html[data-theme="dark"][dir="rtl"] .sb-hero {
  background: linear-gradient(225deg, var(--bg-soft) 0%, var(--bg) 100%);
}

/* Freshness Section Dark Mode */

html[data-theme="dark"] .sb-freshness-section {
  background: var(--surface);
}

html[data-theme="dark"] .sb-freshness-heading {
  color: var(--text);
}

html[data-theme="dark"] .sb-kinetic-text {
  color: var(--brand);
}

html[data-theme="dark"] .sb-freshness-photo {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .sb-freshness-label {
  background: rgba(45, 23, 32, 0.95);
  color: var(--text);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .sb-freshness-point {
  background: var(--bg-soft);
  border-color: var(--line);
}

html[data-theme="dark"] .sb-freshness-point:hover {
  border-color: var(--brand);
  background: var(--surface);
}

html[data-theme="dark"] .sb-freshness-point i {
  color: var(--brand);
}

html[data-theme="dark"] .sb-freshness-point h4 {
  color: var(--text);
}

html[data-theme="dark"] .sb-freshness-point p {
  color: var(--muted);
}

html[data-theme="dark"] .sb-liquid-blob {
  background: linear-gradient(135deg, rgba(232, 92, 120, 0.15) 0%, rgba(232, 92, 120, 0.08) 100%);
}

html[data-theme="dark"] .sb-typewriter {
  color: var(--muted);
}

/* CTA Section Dark Mode */

html[data-theme="dark"] .sb-cta-section {
  background: linear-gradient(135deg, var(--bg-soft) 0%, var(--bg) 100%);
}

html[data-theme="dark"] .sb-cta-curtain {
  background: var(--bg);
}

html[data-theme="dark"] .sb-cta-title {
  color: var(--text);
}

html[data-theme="dark"] .sb-cta-description {
  color: var(--muted);
}

html[data-theme="dark"] .sb-counter-number {
  color: var(--brand);
}

html[data-theme="dark"] .sb-counter-label {
  color: var(--text);
}

html[data-theme="dark"] .sb-cta-box {
  background: linear-gradient(135deg, var(--surface) 0%, var(--bg-soft) 100%);
  border-color: var(--line);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.7);
}

html[data-theme="dark"] .sb-emerging-product {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] .sb-cta-particle {
  background: var(--brand);
}

html[data-theme="dark"] .sb-decorative-line {
  background: var(--line);
}

html[data-theme="dark"] .sb-glow {
  background: radial-gradient(circle, rgba(232, 92, 120, 0.2) 0%, transparent 70%);
}

/* Dark Mode Glow Enhancement */

html[data-theme="dark"] .sb-hero-box-main::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(232, 92, 120, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

html[data-theme="dark"] .sb-slider-main::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(232, 92, 120, 0.05) 0%, transparent 60%);
  pointer-events: none;
  z-index: 2;
}

/* Dark Mode Image Filters */

html[data-theme="dark"] .sb-hero-box-img {
  filter: brightness(0.9) saturate(1.1);
}

html[data-theme="dark"] .sb-slider-image img {
  filter: brightness(0.9) saturate(1.1);
}

html[data-theme="dark"] .sb-journey-visual img {
  filter: brightness(0.9) saturate(1.1);
}

html[data-theme="dark"] .sb-freshness-photo img {
  filter: brightness(0.9) saturate(1.1);
}

html[data-theme="dark"] .sb-cta-box img {
  filter: brightness(0.9) saturate(1.1);
}

/* Dark Mode Custom Cursor */

html[data-theme="dark"] body.sample-box-page .custom-cursor {
  border-color: var(--brand);
}

html[data-theme="dark"] body.sample-box-page .cursor-follower {
  background: var(--brand);
}

/* Section 3 (ingredient cards) — dark mode */
html[data-theme="dark"] .sb-ingredients-section {
  background:
    radial-gradient(circle at 50% 0%, rgba(198, 31, 68, .16), transparent 46%),
    linear-gradient(180deg, var(--surface) 0%, var(--bg-soft) 100%);
}
html[data-theme="dark"] .sb-ing-card {
  background: #24151a;
  border-color: rgba(255, 255, 255, .14);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .45);
}
html[data-theme="dark"] .sb-ing-card:hover {
  border-color: var(--ing-color);
  box-shadow: 0 24px 54px rgba(0, 0, 0, .6);
}
html[data-theme="dark"] .sb-ing-chip {
  background: #24151a;
  border-color: rgba(255, 255, 255, .18);
  color: var(--text);
}
html[data-theme="dark"] .sb-ing-chip[aria-pressed="true"] {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

/* Section 5 (choose your box) — dark mode */
html[data-theme="dark"] .sb-variations-section {
  background:
    radial-gradient(circle at 12% 28%, rgba(198, 31, 68, .16), transparent 38%),
    radial-gradient(circle at 92% 82%, rgba(255, 215, 106, .07), transparent 36%),
    linear-gradient(180deg, var(--bg-soft) 0%, var(--surface) 100%);
}
html[data-theme="dark"] .sb-vx-blob {
  background: var(--surface);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .6);
}
html[data-theme="dark"] .sb-vx-img {
  filter: brightness(.92) saturate(1.05);
}
html[data-theme="dark"] .sb-vx-ring {
  border-color: rgba(255, 255, 255, .28);
}
html[data-theme="dark"] .sb-vx-ring-inner {
  border-color: rgba(255, 215, 106, .55);
}
html[data-theme="dark"] .sb-vx-list,
html[data-theme="dark"] .sb-vx-list > li {
  border-color: rgba(255, 255, 255, .16);
}
html[data-theme="dark"] .sb-vx-name {
  color: color-mix(in srgb, var(--text) 50%, transparent);
}
html[data-theme="dark"] .sb-vx-item:hover .sb-vx-name {
  color: color-mix(in srgb, var(--text) 85%, transparent);
}
html[data-theme="dark"] .sb-vx-item.is-active .sb-vx-name {
  color: var(--text);
}
html[data-theme="dark"] .sb-vx-tag,
html[data-theme="dark"] .sb-vx-price,
html[data-theme="dark"] .sb-vx-item.is-active .sb-vx-num {
  color: #FF7A96;
}
html[data-theme="dark"] .sb-vx-bar {
  background: #FF7A96;
}
html[data-theme="dark"] .sb-vx-marquee-track span {
  -webkit-text-stroke-color: rgba(255, 255, 255, .26);
}

/* ==========================================================
   HOW IT WORKS — SECTION 6 (Customize) dark mode
   The section background was hard-coded cream, so the cream
   heading text ("Keep the rhythm.") disappeared in dark mode.
   ========================================================== */
html[data-theme="dark"] .page-how-it-works .fr-hiw-s6 {
  background: var(--hiw-dark-soft, #2a1a20);
}

html[data-theme="dark"] .page-how-it-works .fr-hiw-s6 .fr-s6-intro h2 {
  color: var(--text);
}

html[data-theme="dark"] .page-how-it-works .fr-hiw-s6 .fr-s6-intro h2 em {
  color: var(--brand);
}