/* Approved warm-white / navy direction. Presentation only; order state stays
   in the existing storefront. Dark information panels retain local contrast. */
:root {
  --paper: #faf6ef;
  --navy: #172e4b;
  --ink: #172e4b;
  --ink-soft: #526073;
  --surface-cream: #faf6ef;
  --surface-paper: #fffcf7;
  --surface-sage: #e7edf0;
  --paper-border: #d4d5d2;
  --accent: #193b60;
  --accent-hover: #28527c;
  --accent-glow: rgba(25,59,96,.1);
  --radius: 4px;
}
body { background: var(--paper); color: var(--navy); }
.brand-masthead { max-width: 1280px; margin: auto; padding: 30px 40px; display: flex; align-items: center; gap: 40px; }
.brand-wordmark { color: var(--navy); font: italic 700 44px/1 var(--font-display); text-decoration: none; }
.brand-wordmark span { display: block; font: 700 10px/2.3 var(--font-body); letter-spacing: .45em; text-align: center; }
.brand-masthead p { color: var(--ink-soft); font-size: 12px; line-height: 1.7; }
.masthead-story { margin-left: auto; color: var(--navy); text-decoration: none; font-size: 14px; padding: 12px; }
.promo-banner { background: var(--navy); font-size: 12px; padding: 12px 50px 12px 24px; }
.sticky-nav { background: rgba(250,246,239,.97); border-block: 1px solid var(--paper-border); box-shadow: none; }
.nav-link { color: var(--ink-soft); }
.nav-link:hover, .nav-link.active { color: var(--navy); }
.quick-call { color: var(--navy); }
.user-btn { background: var(--navy); color: #fff; }
.user-menu { color: #fff7ec; }
.cart-fab, .cart-fab.has-items { background: var(--navy); border-color: #738499; box-shadow: 0 4px 14px #172e4b25; }
.hero { max-width: 1280px; margin: auto; padding: 56px 40px 42px; background: none; display: grid; grid-template-columns: 1fr 1fr; gap: 52px; overflow: visible; min-height: 0; }
.hero::before { display: none; }
.hero-content { width: 100%; min-width: 0; }
.hero-badge { color: var(--ink-soft); background: none; border: 0; padding: 0; font-size: 10px; letter-spacing: .14em; }
.hero h1 { color: var(--navy); font-size: clamp(58px,6.7vw,90px); font-weight: 700; letter-spacing: -.045em; line-height: .98; margin: 14px 0 22px; }
.hero h1 em { color: var(--navy); }
.hero-sub { color: var(--navy); font: 500 19px/1.5 var(--font-body); max-width: 370px; }
.hero-desc { color: var(--ink-soft); font-size: 13px; max-width: 400px; }
.hero-cta { border-radius: 3px; min-height: 50px; }
.hero-cta.secondary { color: var(--navy); border-color: var(--paper-border); background: none; font-weight: 500; }
.hero-cta.secondary:hover { color: var(--navy); background: #e7edf0; border-color: var(--navy); }
.hero-proof { gap: 6px; margin-top: 20px; }
.hero-proof-item { padding: 4px 0; background: none; border: 0; border-radius: 0; color: var(--ink-soft); font-size: 11px; font-weight: 400; }
.hero-proof-item strong { color: var(--navy); }
.hero-proof-item + .hero-proof-item::before { content: '·'; margin-right: 5px; }
.hero-photo { min-width: 0; align-self: center; }
.hero-photo img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; display: block; }
.hero-photo figcaption { display: flex; align-items: center; justify-content: space-between; font: italic 600 23px/1.4 var(--font-display); padding: 13px 0 0; }
.hero-photo figcaption span { font-size: 34px; }
.table-ritual { display: flex; justify-content: center; align-items: center; gap: 35px; padding: 21px 20px; border-block: 1px solid #9eabba; font-size: 13px; }
.shop-introduction { max-width: 1280px; margin: auto; padding: 65px 40px 46px; }
.editorial-eyebrow { text-align: center; text-transform: uppercase; letter-spacing: .2em; font-size: 10px; margin-bottom: 10px; }
.shop-introduction h2 { text-align: center; font: 700 clamp(38px,4.5vw,58px)/1.05 var(--font-display); margin-bottom: 32px; letter-spacing: -.03em; }
.shop-paths { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.shop-paths a { text-decoration: none; color: var(--navy); }
.shop-paths img { display: block; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; transition: filter .2s; }
.shop-paths a:hover img { filter: brightness(1.06); }
.shop-paths span { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--paper-border); padding: 16px 0; font: 700 25px/1.15 var(--font-display); }
.shop-paths b { font: 400 20px var(--font-body); }
.trust-bar, .info-strip, .rewards-callout { background: #f1eee7; border-color: var(--paper-border); }
.trust-item { background: none; border: none; }
.trust-icon { color: var(--navy); background: #e0e7eb; }
.rewards-callout-text strong, .rewards-callout-text span { color: var(--ink-soft); }
.main { padding-top: 46px; }
.category-section { padding-top: 60px; }
.category-title { font-size: 42px; }
.product-card { box-shadow: none; border: 0; border-bottom: 1px solid var(--paper-border); border-radius: 0; background: transparent; }
.product-card:hover { box-shadow: none; border-color: var(--navy); transform: translateY(-2px); }
.product-info { padding: 20px 0 26px; }
.product-name { font-size: 25px; }
.product-korean { color: var(--ink-soft); font-weight: 500; }
.add-btn, .buy-again-add { background: var(--navy); border-color: var(--navy); border-radius: 3px; }
.popular-bundle, .credit-section, .hero-membership, footer { background: var(--navy); color: #fff7ec; }
.popular-bundle { border-radius: 4px; box-shadow: none; }
.hero-membership { box-shadow: none; }
.buy-again-heading { background: var(--navy); }
.story-section, .reviews-section { --text-primary: #172e4b; --text-secondary: #526073; --text-muted: #526073; --gold: #526073; color: var(--navy); }
.story-title, .reviews-title { font-weight: 700; }
.order-section { background: #e7edf0; }
.order-card { box-shadow: none; }
.review-card { border-color: var(--paper-border); }
/* Light interactive surfaces use their own tokens, without changing state,
   availability, focus management, drawer size, or form/benefit copy. */
.cart-drawer, .modal-overlay, .popup-overlay {
  --bg-primary: #faf6ef; --bg-secondary: #faf6ef; --bg-card: #fffcf7;
  --text-primary: #172e4b; --text-secondary: #43546a; --text-muted: #596777;
  --gold: #725621; --border: #cdd3d8; --border-hover: #738499;
  color: var(--text-primary);
}
.cart-header h3 { font-size: 34px; font-weight: 700; }
.cart-drawer { background: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none; }
.toast { background: var(--navy); color: #fff; }
.checkout-btn, .checkout-btn:hover { background: var(--navy); box-shadow: 0 -8px 16px #faf6ef; }
.checkout-marketing-consent { background: #edf1f3; }
.checkout-marketing-consent strong { color: var(--navy); }
.checkout-marketing-consent small { color: var(--ink-soft); }
.pickup-error { color: #8d2828; background: #fff0eb; }
/* Existing inline pickup/benefit colors were authored for dark surfaces. */
.cart-drawer [style*="color:#cbd5e1"],
.cart-drawer [style*="color:#94a3b8"],
.cart-drawer [style*="color:#e2e8f0"],
.cart-drawer [style*="color:#60a5fa"] { color: #43546a !important; }
.cart-drawer [style*="color:#fbbf24"],
.cart-drawer [style*="color:#fef3c7"] { color: #79541c !important; }
.cart-drawer [style*="color:#5eead4"] { color: #176052 !important; }
#pickupNotice { color: #79541c !important; }
#pickupDate, #pickupTime, #pickupName, #pickupPhone { background: #fffcf7 !important; color: #172e4b !important; border-color: #9eabba !important; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #6383a3; outline-offset: 3px; }
@media (max-width: 760px) {
  .promo-banner { padding: 6px 44px 6px 14px; line-height: 1.3; }
  .brand-masthead { padding: 22px 20px; gap: 20px; }
  .brand-wordmark { font-size: 36px; }
  .brand-masthead p { display: none; }
  .masthead-story { display: none; }
  .hero { padding: 32px 20px; grid-template-columns: 1fr; gap: 24px; }
  .hero h1 { max-width: none; font-size: clamp(54px,11vw,76px); }
  .hero-content { padding-right: 0; }
  .hero-sub, .hero-desc { max-width: none; }
  .hero-sub { font-size: 16px; }
  .hero #heroDesc { display: none; }
  .hero-proof { display: none; }
  .hero-content > .hero-desc:last-child { margin-bottom: 0; font-size: 12px; }
  .hero-photo img { aspect-ratio: 5/4; }
  .hero-photo figcaption { font-size: 21px; }
  .hero-actions { gap: 8px; }
  .hero-cta { padding: 12px 15px; font-size: 12px; }
  .table-ritual { gap: 12px; font-size: 10px; text-align: center; }
  .shop-introduction { padding: 40px 20px 20px; }
  .shop-paths { gap: 12px; }
  .shop-paths span { font-size: 18px; padding: 12px 0; }
  .shop-paths b { display: none; }
  .category-title { font-size: 33px; }
  .main { padding-inline: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}