/* ================================================================
   RICHS GLOBAL — SARLA-INSPIRED PREMIUM UPGRADE
   /assets/css/richs.css  (replaces previous)

   Design language: Corporate storytelling, not e-commerce listing
   Reference: sarla-aviation.com — full-viewport, minimal nav,
   editorial type, luxury spacing, slow reveals
   ================================================================ */

/* ── GOOGLE FONTS (Cormorant + Plus Jakarta Sans) ── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,300;1,400;1,600;1,700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap');

/* ── TOKENS ── */
:root {
  /* Core palette — RICHS Design Language v2 */
  --black:        #121212;
  --near-black:   #181818;
  --ink:          #202124;
  --ink-soft:     #1A1A1E;
  --crimson:      #D32F2F;
  --crimson-deep: #7F0000;
  --crimson-mid:  #B71C1C;
  --gold:         #FFCC00;
  --gold-light:   #FFD740;
  --gold-pale:    #F5D97A;
  --ivory:        #F8F4EE;
  --warm-white:   #F8F4EE;
  --parchment:    #F2E8D0;
  --cool-grey:    #F8F6F2;
  --muted:        #6B5C4E;
  --faint:        #A89585;
  --surface:      #FFFBF0;
  --border:       #E5D8C4;
  --border-dark:  rgba(255,255,255,.08);

  /* Typography */
  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-body:    'Plus Jakarta Sans', -apple-system, system-ui, sans-serif;
  --font-mono:    'DM Mono', 'Courier New', monospace;

  /* Spacing scale — luxury = generous */
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;
  --sp-40: 10rem;

  /* Layout */
  --nav-h:    72px;
  --max-w:    1240px;
  --max-w-sm: 720px;

  /* Radii */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-2xl:  40px;
  --r-full: 9999px;

  /* Shadows */
  --sh-sm:     0 1px 3px rgba(8,4,2,.06), 0 2px 8px rgba(8,4,2,.04);
  --sh-md:     0 4px 16px rgba(8,4,2,.08), 0 2px 6px rgba(8,4,2,.04);
  --sh-lg:     0 16px 48px rgba(8,4,2,.10), 0 4px 14px rgba(8,4,2,.05);
  --sh-xl:     0 32px 80px rgba(8,4,2,.14);
  --sh-gold:   0 8px 32px rgba(255,204,0,.22);
  --sh-crimson:0 8px 32px rgba(211,47,47,.20);

  /* Motion — Sarla-inspired slow elegance */
  --ease:        cubic-bezier(.4,0,.2,1);
  --ease-out:    cubic-bezier(0,0,.2,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --dur-fast:    200ms;
  --dur-mid:     350ms;
  --dur-slow:    600ms;
  --dur-xslow:   900ms;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html {
  font-size:16px;
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
body {
  font-family:var(--font-body);
  background:var(--warm-white);
  color:var(--ink);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding-top:var(--nav-h);
}
body.no-nav-pad { padding-top:0; }
a { text-decoration:none; color:inherit; }
img,svg { max-width:100%; display:block; }
button { cursor:pointer; font-family:inherit; border:none; background:none; }
::selection { background:rgba(212,175,135,.2); color:var(--ink); }
.sr-only {
  position:absolute; width:1px; height:1px; padding:0;
  margin:-1px; overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

/* ═══════════════════════════════════════════
   NAV — Sarla pattern: transparent → solid
   ════════════════════════════════════════ */
#richs-nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 48px;
  background:transparent;
  transition:background var(--dur-mid) var(--ease),
             border-color var(--dur-mid) var(--ease),
             box-shadow var(--dur-mid) var(--ease),
             backdrop-filter var(--dur-mid) var(--ease);
  border-bottom:1px solid transparent;
}
#richs-nav.scrolled {
  background:rgba(13,5,0,.94);
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border-color:rgba(255,255,255,.05);
  box-shadow:0 1px 0 rgba(255,255,255,.04), 0 4px 24px rgba(0,0,0,.3);
}
/* When page background is light (non-hero pages) */
#richs-nav.nav-light { background:rgba(255,253,245,.92); border-color:rgba(229,216,196,.5); }
#richs-nav.nav-light.scrolled { background:rgba(255,253,245,.97); box-shadow:0 1px 0 var(--border), 0 4px 20px rgba(13,5,0,.06); }

/* Brand */
.nav-brand {
  display:flex; align-items:center; gap:10px; flex-shrink:0;
  text-decoration:none;
}
.nav-mark {
  width:36px; height:36px; border-radius:9px;
  background:linear-gradient(140deg,var(--crimson-deep),var(--crimson));
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 10px rgba(156,28,28,.25); flex-shrink:0;
}
.nav-mark-r {
  font-family:var(--font-display); font-size:1.35rem;
  font-weight:700; font-style:italic; color:var(--ivory);
  line-height:1;
}
.nav-wordmark {
  font-family:var(--font-display);
  font-size:1.15rem; font-weight:600;
  color:var(--ivory); letter-spacing:.01em; line-height:1.1;
}
.nav-wordmark em { color:var(--gold); font-style:italic; }
.nav-wordmark small {
  display:block; font-family:var(--font-body);
  font-size:.56rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.60); margin-top:1px;
}
.nav-light .nav-wordmark            { color:var(--ink); }
.nav-light .nav-wordmark em         { color:var(--crimson); }
.nav-light .nav-wordmark small      { color:var(--muted); }

/* Links */
.nav-links { display:flex; align-items:center; gap:2px; }
.nav-link {
  padding:7px 14px; border-radius:var(--r-sm);
  font-size:.82rem; font-weight:500;
  color:rgba(255,255,255,.88);
  letter-spacing:.01em;
  transition:background var(--dur-fast), color var(--dur-fast);
  white-space:nowrap; position:relative;
}
.nav-link:hover { background:rgba(255,255,255,.07); color:var(--ivory); }
.nav-link.active { color:var(--ivory); font-weight:600; }
.nav-link.active::after {
  content:''; position:absolute; bottom:4px; left:50%;
  transform:translateX(-50%); width:12px; height:1.5px;
  background:var(--gold); border-radius:2px;
}
.nav-light .nav-link            { color:var(--muted); }
.nav-light .nav-link:hover      { background:rgba(13,5,0,.05); color:var(--ink); }
.nav-light .nav-link.active     { color:var(--crimson); }
.nav-light .nav-link.active::after { background:var(--crimson); }

/* City button */
.nav-city-btn {
  display:flex; align-items:center; gap:5px;
  padding:6px 12px; border-radius:var(--r-sm);
  font-size:.75rem; font-weight:600;
  color:rgba(255,255,255,.80);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  cursor:pointer; font-family:var(--font-body);
  transition:background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
  white-space:nowrap; letter-spacing:.01em;
}
.nav-city-btn:hover {
  background:rgba(211,47,47,.12);
  border-color:rgba(211,47,47,.3);
  color:#fff;
}

/* Actions */
.nav-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.nav-cart {
  position:relative; padding:7px 12px; border-radius:var(--r-sm);
  font-size:.82rem; font-weight:500;
  color:rgba(255,255,255,.55);
  display:flex; align-items:center; gap:6px;
  transition:background var(--dur-fast), color var(--dur-fast);
}
.nav-cart:hover { background:rgba(255,255,255,.07); color:var(--ivory); }
.nav-cart-badge {
  position:absolute; top:5px; right:6px;
  min-width:16px; height:16px; border-radius:var(--r-full);
  background:var(--crimson); color:#fff;
  font-size:9px; font-weight:700;
  display:none; align-items:center; justify-content:center;
  padding:0 4px; border:1.5px solid var(--near-black);
}
.nav-cart-badge.visible { display:flex; }
@keyframes cartBounce { 0%,100%{transform:scale(1)} 30%{transform:scale(1.5)} 60%{transform:scale(.85)} 80%{transform:scale(1.15)} }
.nav-cart-badge.bounce { animation:cartBounce .45s cubic-bezier(.36,.07,.19,.97); }
.nav-light .nav-cart { color:var(--muted); }
.nav-light .nav-cart:hover { background:rgba(13,5,0,.05); color:var(--ink); }
.nav-light .nav-cart-badge { border-color:var(--warm-white); }

.nav-cta {
  height:36px; padding:0 18px;
  background:var(--crimson); color:#fff !important;
  border-radius:var(--r-sm); font-size:.8rem; font-weight:700;
  display:inline-flex; align-items:center; gap:6px;
  letter-spacing:.01em;
  transition:background var(--dur-fast), transform var(--dur-mid) var(--ease-spring);
}
.nav-cta:hover { background:var(--crimson-mid); transform:translateY(-1px); }

/* Hamburger */
.nav-ham {
  display:none; flex-direction:column; gap:5px;
  padding:8px; border-radius:var(--r-sm); cursor:pointer;
  transition:background var(--dur-fast);
}
.nav-ham:hover { background:rgba(255,255,255,.07); }
.nav-ham-b {
  width:22px; height:1.5px; background:var(--ivory);
  display:block; border-radius:2px;
  transition:all var(--dur-mid) var(--ease);
}
.nav-light .nav-ham-b { background:var(--ink); }
.nav-ham.open .nav-ham-b:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.nav-ham.open .nav-ham-b:nth-child(2) { opacity:0; transform:scaleX(0); }
.nav-ham.open .nav-ham-b:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }

/* ── DRAWER ── */
#richs-overlay {
  position:fixed; inset:0; z-index:1099;
  background:rgba(8,4,2,.7); backdrop-filter:blur(6px);
  opacity:0; pointer-events:none;
  transition:opacity var(--dur-mid) var(--ease);
}
#richs-overlay.open { opacity:1; pointer-events:auto; }
#richs-drawer {
  position:fixed; top:0; right:0; bottom:0; z-index:1100;
  width:min(300px,90vw); background:var(--near-black);
  transform:translateX(100%);
  transition:transform var(--dur-slow) var(--ease);
  display:flex; flex-direction:column; overflow-y:auto;
  border-left:1px solid rgba(255,255,255,.05);
}
#richs-drawer.open { transform:translateX(0); }
.dwr-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 20px 16px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.dwr-close {
  width:32px; height:32px; border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.4); font-size:18px; cursor:pointer;
  transition:background var(--dur-fast), color var(--dur-fast);
}
.dwr-close:hover { background:rgba(255,255,255,.06); color:var(--ivory); }
.dwr-links { padding:16px; flex:1; }
.dwr-link {
  display:flex; align-items:center; gap:12px;
  padding:13px 12px; border-radius:var(--r-md);
  font-size:.9rem; font-weight:500;
  color:rgba(255,255,255,.55);
  transition:background var(--dur-fast), color var(--dur-fast);
  margin-bottom:2px;
}
.dwr-link:hover { background:rgba(255,255,255,.05); color:var(--ivory); }
.dwr-link.active { color:var(--gold); font-weight:600; }
.dwr-link-icon { font-size:1rem; width:22px; text-align:center; flex-shrink:0; }
.dwr-foot { padding:12px 16px 24px; }
.dwr-cta {
  display:block; text-align:center;
  background:var(--crimson); color:#fff;
  padding:14px; border-radius:var(--r-md);
  font-weight:700; font-size:.9rem;
  transition:background var(--dur-fast);
}
.dwr-cta:hover { background:var(--crimson-mid); }

/* ── FOOTER ── */
#richs-footer {
  background:var(--black);
  padding:80px 0 36px;
  position:relative;
}
#richs-footer::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(212,175,135,.35),transparent);
}
.footer-inner {
  max-width:var(--max-w); margin:0 auto;
  padding:0 48px;
  display:grid; grid-template-columns:2fr 1fr 1fr;
  gap:64px; margin-bottom:56px;
}
.footer-logo { width:40px; height:40px; border-radius:10px;
  background:linear-gradient(140deg,var(--crimson-deep),var(--crimson));
  display:flex; align-items:center; justify-content:center;
  margin-bottom:14px;
}
.footer-logo-r {
  font-family:var(--font-display); font-size:1.5rem;
  font-weight:700; font-style:italic; color:var(--ivory);
}
.footer-name {
  font-family:var(--font-display); font-size:1.1rem; font-weight:600;
  color:var(--ivory); margin-bottom:8px;
}
.footer-desc { font-size:.78rem; color:rgba(255,255,255,.62); line-height:1.7; margin-bottom:20px; }
.footer-contacts { display:flex; flex-direction:column; gap:8px; }
.footer-contact {
  display:flex; align-items:center; gap:10px;
  font-size:.78rem; color:rgba(255,255,255,.72);
  transition:color var(--dur-fast);
}
.footer-contact:hover { color:var(--gold); }
.footer-contact-icon { font-size:.85rem; width:18px; text-align:center; flex-shrink:0; }
.footer-col-title {
  font-size:.6rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(255,255,255,.55);
  margin-bottom:18px;
}
.footer-links { display:flex; flex-direction:column; gap:10px; }
.footer-links a {
  font-size:.78rem; color:rgba(255,255,255,.75);
  transition:color var(--dur-fast), padding-left var(--dur-fast);
}
.footer-links a:hover { color:var(--gold); padding-left:4px; }
.footer-bottom {
  max-width:var(--max-w); margin:0 auto;
  padding:24px 48px 0;
  border-top:1px solid rgba(255,255,255,.04);
  display:flex; justify-content:space-between;
  align-items:center; flex-wrap:wrap; gap:12px;
  font-size:.7rem;
}
.footer-copy { color:rgba(255,255,255,.50); }
.footer-legal { display:flex; gap:18px; }
.footer-legal a { color:rgba(255,255,255,.50); transition:color var(--dur-fast); }
.footer-legal a:hover { color:rgba(255,255,255,.85); }

/* ── LAYOUT SYSTEM ── */
.wrap    { max-width:var(--max-w); margin:0 auto; padding:0 48px; }
.wrap-sm { max-width:var(--max-w-sm); margin:0 auto; padding:0 48px; }

/* Sarla-style section divider */
.s-rule {
  width:100%; height:1px;
  background:linear-gradient(90deg,transparent,var(--border),transparent);
  margin:0;
}
.s-rule-dark {
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
}

/* Horizontal divider style Sarla uses between sections */
.section-divider {
  padding:0; margin:0;
  height:1px; background:var(--border); width:100%;
}

/* ── SCROLL REVEAL (Sarla's slow drift-in) ── */
.reveal {
  opacity:0;
  transform:translateY(32px);
  transition:opacity var(--dur-xslow) var(--ease-out),
             transform var(--dur-xslow) var(--ease-out);
}
.reveal.in { opacity:1; transform:translateY(0); }
.reveal-fade {
  opacity:0;
  transition:opacity var(--dur-xslow) var(--ease-out);
}
.reveal-fade.in { opacity:1; }
.reveal-left {
  opacity:0; transform:translateX(-40px);
  transition:opacity var(--dur-xslow) var(--ease-out),
             transform var(--dur-xslow) var(--ease-out);
}
.reveal-left.in { opacity:1; transform:translateX(0); }
.reveal-right {
  opacity:0; transform:translateX(40px);
  transition:opacity var(--dur-xslow) var(--ease-out),
             transform var(--dur-xslow) var(--ease-out);
}
.reveal-right.in { opacity:1; transform:translateX(0); }
.rd1 { transition-delay:.1s; }
.rd2 { transition-delay:.2s; }
.rd3 { transition-delay:.3s; }
.rd4 { transition-delay:.4s; }

/* ── BUTTONS ── */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-body);
  white-space:nowrap; cursor:pointer;
  border:none; outline:none;
  transition:all var(--dur-mid) var(--ease);
  position:relative;
}
.btn:active { transform:scale(.98) !important; }

.btn-sm  { height:36px; padding:0 18px; border-radius:var(--r-sm);  font-size:.78rem; font-weight:600; }
.btn-md  { height:44px; padding:0 24px; border-radius:var(--r-md);  font-size:.875rem; font-weight:600; }
.btn-lg  { height:52px; padding:0 32px; border-radius:var(--r-lg); font-size:1rem; font-weight:600; }
.btn-xl  { height:60px; padding:0 40px; border-radius:var(--r-xl); font-size:1.05rem; font-weight:700; }

.btn-gold {
  background:var(--gold); color:var(--ink) !important;
  box-shadow:0 2px 0 #997700, var(--sh-gold);
}
.btn-gold:hover {
  background:var(--gold-light); transform:translateY(-2px);
  box-shadow:0 4px 0 #997700, 0 16px 36px rgba(255,204,0,.28);
}
.btn-primary {
  background:var(--crimson); color:var(--ivory) !important;
  box-shadow:0 2px 0 var(--crimson-deep), var(--sh-crimson);
}
.btn-primary:hover {
  background:var(--crimson-mid); transform:translateY(-2px);
  box-shadow:0 4px 0 var(--crimson-deep), 0 16px 36px rgba(156,28,28,.25);
}
.btn-outline-light {
  background:transparent; color:var(--ivory) !important;
  border:1px solid rgba(255,255,255,.3);
  border-radius:var(--r-sm);
}
.btn-outline-light:hover {
  background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.6);
}
.btn-outline-dark {
  background:transparent; color:var(--crimson) !important;
  border:1.5px solid var(--crimson);
}
.btn-outline-dark:hover {
  background:var(--crimson); color:var(--ivory) !important;
  transform:translateY(-1px); box-shadow:var(--sh-crimson);
}
.btn-ghost-dark {
  background:rgba(255,255,255,.07); color:rgba(255,253,245,.82) !important;
  border:1px solid rgba(255,255,255,.1);
}
.btn-ghost-dark:hover {
  background:rgba(255,255,255,.12); color:var(--ivory) !important;
  border-color:rgba(255,255,255,.25);
}
.btn-block { width:100%; justify-content:center; }

/* ── SECTION HEADER (Sarla-style) ── */
.sh { margin-bottom:64px; }
.sh-center { text-align:center; }
.sh-center .sh-sub { margin:0 auto; }

.sh-label {
  font-size:.65rem; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold);
  display:block; margin-bottom:16px;
}
.sh-label-dark { color:rgba(212,175,135,.6); }

.sh-title {
  font-family:var(--font-display);
  font-size:clamp(2.2rem,4vw,3.8rem);
  font-style:italic; font-weight:700;
  color:var(--ink); line-height:1.08;
  letter-spacing:-.02em; margin-bottom:20px;
}
.sh-title em { color:var(--crimson); }
.on-dark .sh-title { color:var(--ivory); }
.on-dark .sh-title em { color:var(--gold-light); }

.sh-sub {
  font-size:1rem; color:var(--muted);
  max-width:540px; line-height:1.8; font-weight:400;
}
.on-dark .sh-sub { color:rgba(255,255,255,.45); }

/* ── BRAND CARDS (upgraded, functional unchanged) ── */
.brand-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}
.brand-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  overflow:hidden;
  display:flex; flex-direction:column;
  position:relative;
  text-decoration:none;
  transition:transform var(--dur-slow) var(--ease-spring),
             box-shadow var(--dur-slow) var(--ease);
  will-change:transform;
}
/* Gold top accent line */
.brand-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,
    var(--brand-color,var(--crimson)),
    color-mix(in srgb,var(--brand-color,var(--crimson)) 50%,var(--gold)));
}
.brand-card:hover {
  transform:translateY(-10px) scale(1.01);
  box-shadow:0 28px 64px rgba(8,4,2,.12),
             0 0 0 1px rgba(212,175,135,.06),
             0 -6px 48px color-mix(in srgb,var(--brand-color,var(--crimson)) 10%,transparent);
}
.bc-thumb {
  height:130px;
  background:linear-gradient(135deg,
    color-mix(in srgb,var(--brand-color,var(--crimson)) 10%,#F5EDD8),
    color-mix(in srgb,var(--brand-color,var(--crimson)) 4%,#EDE0C8));
  display:flex; align-items:center; justify-content:center;
  font-size:3rem; position:relative; overflow:hidden;
  transition:transform var(--dur-slow) var(--ease);
}
.brand-card:hover .bc-thumb { transform:scale(1.07); }
.bc-glow {
  position:absolute; inset:0;
  background:radial-gradient(circle at center,
    color-mix(in srgb,var(--brand-color,var(--crimson)) 22%,transparent) 0%,
    transparent 70%);
  opacity:0; transition:opacity var(--dur-slow);
}
.brand-card:hover .bc-glow { opacity:1; }
.bc-body { padding:18px 20px 20px; flex:1; display:flex; flex-direction:column; }
.bc-type {
  font-size:.62rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--brand-color,var(--crimson));
  margin-bottom:4px;
}
.bc-name {
  font-family:var(--font-display); font-size:1.15rem; font-weight:600;
  color:var(--ink); line-height:1.2; margin-bottom:6px;
}
.bc-tag {
  font-size:.78rem; color:var(--muted); line-height:1.55;
  flex:1; margin-bottom:14px;
}
.bc-foot {
  display:flex; justify-content:space-between; align-items:center;
  padding-top:12px; border-top:1px solid var(--border);
}
.bc-meta { font-size:.7rem; color:var(--faint); }
.bc-cta {
  font-size:.72rem; font-weight:700;
  color:var(--brand-color,var(--crimson));
  display:flex; align-items:center; gap:2px;
  transition:gap var(--dur-fast);
}
.brand-card:hover .bc-cta { gap:7px; }

/* Highlight card (Section 4 — 3 featured brands) */
.highlight-card {
  background:var(--near-black);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--r-xl); overflow:hidden;
  display:flex; flex-direction:column;
  text-decoration:none; position:relative;
  transition:transform var(--dur-slow) var(--ease-spring),
             box-shadow var(--dur-slow) var(--ease);
}
.highlight-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--gold);
}
.highlight-card:hover {
  transform:translateY(-8px);
  box-shadow:0 24px 60px rgba(0,0,0,.4), 0 0 0 1px rgba(212,175,135,.1);
}
.hc-thumb {
  height:180px;
  background:linear-gradient(135deg,
    color-mix(in srgb,var(--brand-color,var(--crimson)) 20%,#1A0A00),
    color-mix(in srgb,var(--brand-color,var(--crimson)) 8%,#0D0500));
  display:flex; align-items:center; justify-content:center;
  font-size:4rem; position:relative; overflow:hidden;
}
.hc-thumb-glow {
  position:absolute; inset:0;
  background:radial-gradient(circle at center,
    color-mix(in srgb,var(--brand-color,var(--crimson)) 30%,transparent) 0%,
    transparent 65%);
}
.hc-body { padding:24px 24px 28px; flex:1; display:flex; flex-direction:column; }
.hc-type {
  font-size:.62rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold); margin-bottom:6px;
}
.hc-name {
  font-family:var(--font-display); font-size:1.4rem; font-weight:600;
  font-style:italic; color:var(--ivory); margin-bottom:8px;
}
.hc-desc { font-size:.82rem; color:rgba(255,255,255,.45); line-height:1.65; flex:1; margin-bottom:20px; }
.hc-cta {
  display:inline-flex; align-items:center; gap:6px;
  font-size:.78rem; font-weight:600;
  color:var(--gold);
  transition:gap var(--dur-fast);
}
.highlight-card:hover .hc-cta { gap:10px; }

/* ── SKELETON ── */
.skel {
  background:linear-gradient(90deg,var(--parchment) 0%,var(--warm-white) 50%,var(--parchment) 100%);
  background-size:200% 100%;
  animation:shimmer 1.6s ease-in-out infinite;
  border-radius:var(--r-xl);
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ── FORMS ── */
.form-group { display:flex; flex-direction:column; gap:6px; margin-bottom:18px; }
.form-label { font-size:.72rem; font-weight:600; letter-spacing:.04em; color:var(--ink-soft); }
.form-input {
  height:48px; padding:0 16px;
  border:1.5px solid var(--border); border-radius:var(--r-md);
  background:var(--ivory); font-family:var(--font-body);
  font-size:.875rem; color:var(--ink); width:100%;
  transition:border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.form-input:focus {
  outline:none; border-color:var(--crimson);
  box-shadow:0 0 0 3px rgba(156,28,28,.09);
}
.form-input::placeholder { color:var(--faint); }
.form-textarea {
  padding:14px 16px; min-height:140px; resize:vertical;
  border:1.5px solid var(--border); border-radius:var(--r-md);
  background:var(--ivory); font-family:var(--font-body);
  font-size:.875rem; color:var(--ink); width:100%;
  transition:border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.form-textarea:focus {
  outline:none; border-color:var(--crimson);
  box-shadow:0 0 0 3px rgba(156,28,28,.09);
}
.form-select {
  height:48px; padding:0 40px 0 16px;
  border:1.5px solid var(--border); border-radius:var(--r-md);
  background:var(--ivory) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%238B0000' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center;
  font-family:var(--font-body); font-size:.875rem;
  color:var(--ink); width:100%; appearance:none;
}
.form-select:focus {
  outline:none; border-color:var(--crimson);
  box-shadow:0 0 0 3px rgba(156,28,28,.09);
}

/* ── BADGES ── */
.badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 10px; border-radius:var(--r-full);
  font-size:.68rem; font-weight:600; line-height:1;
}
.badge-crimson { background:rgba(156,28,28,.08); color:var(--crimson); }
.badge-gold    { background:rgba(255,204,0,.12); color:#7A5800; }
.badge-green   { background:rgba(46,125,50,.1);  color:#2E7D32; }
.badge-gray    { background:var(--parchment);     color:var(--muted); }

/* ── TOAST ── */
#toast-container {
  position:fixed; bottom:32px; left:50%; transform:translateX(-50%);
  z-index:9999; display:flex; flex-direction:column; gap:8px;
  pointer-events:none;
}
.toast {
  background:var(--ink); color:var(--ivory);
  padding:12px 20px; border-radius:var(--r-lg);
  font-size:.875rem; font-weight:500;
  box-shadow:var(--sh-xl);
  animation:toastIn .35s var(--ease-spring) forwards;
  pointer-events:auto; min-width:220px; text-align:center;
  border:1px solid rgba(255,255,255,.06);
}
.toast.success { border-left:3px solid #4CAF50; }
.toast.error   { border-left:3px solid var(--crimson); }
@keyframes toastIn {
  from{opacity:0;transform:translateY(10px) scale(.96)}
  to  {opacity:1;transform:translateY(0) scale(1)}
}

/* ── CART BAR ── */
#cart-bar {
  position:fixed; bottom:0; left:0; right:0; z-index:500;
  padding:14px 20px max(14px, env(safe-area-inset-bottom));
  background:var(--ivory);
  border-top:1px solid var(--border);
  box-shadow:0 -6px 28px rgba(8,4,2,.1);
  display:flex; align-items:center; gap:16px;
  transform:translateY(100%);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1);
}
[data-theme="dark"] #cart-bar { background:#111; }
#cart-bar.visible { transform:translateY(0); }
.cart-bar-info    { flex:1; min-width:0; }
.cart-bar-count   { font-size:.68rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.cart-bar-total   { font-family:var(--font-mono); font-size:1.2rem; font-weight:700; color:var(--ink); line-height:1.2; }
.cart-bar-btn {
  background:var(--crimson); color:#fff;
  padding:13px 24px; border-radius:12px;
  font-size:.9rem; font-weight:700; text-decoration:none;
  white-space:nowrap; flex-shrink:0;
  transition:background .15s, transform .1s;
  display:flex; align-items:center; gap:6px;
}
.cart-bar-btn:hover { background:var(--crimson-mid); }
.cart-bar-btn:active { transform:scale(.97); }
@keyframes cartBarPulse { 0%,100%{transform:scale(1)} 40%{transform:scale(1.05)} }
.cart-bar-btn.pulse { animation:cartBarPulse .5s ease; }

/* ── ACTIVE ORDER BAR ── */
#active-order-bar {
  position:fixed; top:0; left:0; right:0; z-index:1100;
  background:#0B2E0B; border-bottom:1px solid rgba(76,175,80,.25);
  padding:8px 20px max(8px, env(safe-area-inset-top));
  display:flex; align-items:center; gap:12px;
  animation:aobSlide .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes aobSlide { from{transform:translateY(-100%)} to{transform:translateY(0)} }
body.has-active-bar #richs-nav { top:36px; }
body.has-active-bar .checkout-page,
body.has-active-bar .menu-page { padding-top:106px; }
.aob-dot {
  width:8px; height:8px; border-radius:50%; flex-shrink:0;
  background:#4CAF50;
  animation:aobPulse 1.8s ease-in-out infinite;
}
@keyframes aobPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.55;transform:scale(.8)} }
.aob-text { flex:1; min-width:0; }
.aob-label { color:rgba(255,255,255,.9); font-size:.75rem; font-weight:700; }
.aob-ref { color:rgba(255,255,255,.4); font-family:var(--font-mono); font-size:.68rem; margin-left:8px; }
.aob-track {
  color:#4CAF50; font-size:.75rem; font-weight:700;
  text-decoration:none; flex-shrink:0; white-space:nowrap;
}
.aob-track:hover { text-decoration:underline; }
.aob-close {
  background:none; border:none; color:rgba(255,255,255,.35);
  font-size:.85rem; cursor:pointer; padding:0; flex-shrink:0;
}

/* ── INLINE QUANTITY CONTROLS ── */
.qty-ctrl {
  display:flex; align-items:center; gap:0;
  background:var(--crimson); border-radius:8px; overflow:hidden;
  width:100%; height:34px;
}
.qty-btn {
  width:32px; height:34px; flex-shrink:0;
  background:none; border:none; color:#fff;
  font-size:1.15rem; font-weight:700; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s; font-family:inherit;
}
.qty-btn:hover { background:rgba(255,255,255,.2); }
.qty-btn:active { background:rgba(255,255,255,.3); }
.qty-val {
  flex:1; text-align:center;
  font-family:var(--font-mono); font-size:.9rem; font-weight:800; color:#fff;
}

/* ── RESPONSIVE ── */
@media(max-width:1100px) {
  .brand-grid { grid-template-columns:repeat(3,1fr); }
  .footer-inner { grid-template-columns:1.4fr 1fr 1fr; }
  .wrap { padding:0 32px; }
  .footer-inner { padding:0 32px; }
  .footer-bottom { padding:24px 32px 0; }
}
@media(max-width:900px) {
  :root { --nav-h:64px; }
  #richs-nav { padding:0 20px; }
  .nav-links { display:none; }
  .nav-ham   { display:flex; }
  .nav-city-btn { display:none; }
  .brand-grid { grid-template-columns:repeat(2,1fr); gap:14px; }
  .footer-inner { grid-template-columns:1fr; gap:32px; padding:0 20px; }
  .footer-bottom { padding:20px 20px 0; flex-direction:column; text-align:center; }
  .wrap { padding:0 20px; }
  .wrap-sm { padding:0 20px; }
  .sh { margin-bottom:40px; }
}
@media(max-width:540px) {
  .brand-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
  .bc-thumb { height:100px; font-size:2.4rem; }
  .bc-tag { display:none; }
  .bc-body { padding:12px 14px 14px; }
}


/* ── Dark Mode Variables ─────────────────────────────────────────────
   Add to END of assets/css/richs.css
   Triggered by: document.documentElement.setAttribute('data-theme','dark')
   ──────────────────────────────────────────────────────────────────── */

[data-theme="dark"] {
  --bg:        #0D0D0D;
  --ink:       #E8DFD0;
  --ivory:     #1A1510;
  --parchment: #111008;
  --border:    #2A2318;
  --muted:     #8A8070;
  --faint:     #3A3028;
  --gold:      #C8A85A;
  --amber:     #D4891A;
  /* Keep crimson — brand identity */
  /* --crimson stays #9C1C1C */
}

[data-theme="dark"] body {
  background: var(--bg);
  color: var(--ink);
}

[data-theme="dark"] .nav {
  background: rgba(13,13,13,0.97);
  border-bottom-color: var(--border);
}

[data-theme="dark"] .nav-light {
  background: rgba(13,13,13,0.97);
}

[data-theme="dark"] .form-card,
[data-theme="dark"] .summary-card,
[data-theme="dark"] .brand-card,
[data-theme="dark"] .item-card,
[data-theme="dark"] .auth-box {
  background: var(--ivory);
  border-color: var(--border);
}

[data-theme="dark"] .fi,
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: #111008;
  color: var(--ink);
  border-color: var(--border);
}

[data-theme="dark"] .fi:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
  border-color: var(--crimson);
}

/* Theme toggle button — add to nav */
#theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  padding: 4px 8px;
  border-radius: 8px;
  transition: background 0.2s;
  line-height: 1;
}
#theme-toggle:hover {
  background: rgba(156,28,28,0.1);
}

/* ================================================================
   RICHS GLOBAL — MOBILE & iOS FIXES
   Append to end of assets/css/richs.css
   ================================================================ */

/* ── iOS Safari viewport fix ─────────────────────────────────── */
/* Use dvh instead of vh for proper Safari address bar handling */
.min-h-screen { min-height: 100dvh; }
.h-screen { height: 100dvh; }

/* ── iOS input zoom prevention ───────────────────────────────── */
/* iOS zooms in on inputs < 16px — force 16px minimum */
input, select, textarea, .fi {
  font-size: 16px !important;
}
/* But keep visual size smaller with transform */
@media (max-width: 768px) {
  input, select, textarea, .fi {
    font-size: 16px !important;
    transform-origin: left top;
  }
}

/* ── iOS safe area (notch/home bar) ──────────────────────────── */
#richs-nav {
  padding-top: env(safe-area-inset-top);
  padding-left: max(48px, env(safe-area-inset-left));
  padding-right: max(48px, env(safe-area-inset-right));
}
@media (max-width: 900px) {
  #richs-nav {
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }
}
#cart-bar, .pay-bar, .btn-checkout {
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}
#richs-footer {
  padding-bottom: max(36px, env(safe-area-inset-bottom));
}

/* ── iOS webkit scrolling ────────────────────────────────────── */
body {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: none;
}

/* ── Tap highlight removal (Android/iOS) ─────────────────────── */
* {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
a, button, [onclick] {
  -webkit-tap-highlight-color: rgba(156,28,28,0.1);
}

/* ── Touch target minimum size (Apple HIG: 44px) ─────────────── */
button, .btn, .nav-link, .dwr-link, .nav-cart, .nav-cta {
  min-height: 44px;
  min-width: 44px;
}

/* ── Mobile-first app-like layout ───────────────────────────── */
@media (max-width: 768px) {
  /* Body feels like an app */
  body {
    overscroll-behavior: none;
    -webkit-user-select: none;
    user-select: none;
  }
  /* Allow text selection in inputs */
  input, textarea, [contenteditable] {
    -webkit-user-select: text;
    user-select: text;
  }

  /* Nav — app header style */
  #richs-nav {
    height: 56px;
    padding: 0 16px;
    background: rgba(5,5,5,0.97) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }
  body { padding-top: 56px; }

  /* Larger touch targets on mobile */
  .btn-sm  { height: 44px; padding: 0 20px; }
  .btn-md  { height: 48px; padding: 0 24px; }
  .btn-lg  { height: 52px; padding: 0 28px; }

  /* Cards — full width with breathing room */
  .brand-card { border-radius: 16px; }
  .bc-thumb { height: 110px; }

  /* Footer — simplified on mobile */
  #richs-footer { padding: 40px 0 20px; }
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 0 20px;
  }

  /* Forms — app style */
  .form-input, .fi {
    height: 52px;
    border-radius: 12px;
    padding: 0 16px;
  }
  .form-textarea, textarea.fi {
    border-radius: 12px;
    padding: 14px 16px;
  }

  /* Sections — tighter on mobile */
  .wrap, .wrap-sm { padding: 0 16px; }
  .sh { margin-bottom: 32px; }
  .sh-title { font-size: clamp(1.8rem, 8vw, 2.8rem); }
}

/* ── Small phones (iPhone SE, etc) ──────────────────────────── */
@media (max-width: 375px) {
  .wrap, .wrap-sm { padding: 0 14px; }
  .brand-grid { grid-template-columns: repeat(2,1fr); gap: 8px; }
  .bc-body { padding: 10px 12px 12px; }
  .bc-name { font-size: 1rem; }
}

/* ── Landscape mobile ────────────────────────────────────────── */
@media (max-width: 900px) and (orientation: landscape) {
  body { padding-top: 48px; }
  #richs-nav { height: 48px; }
}

/* ── Desktop — premium website feel ─────────────────────────── */
@media (min-width: 1024px) {
  /* Hover effects only on desktop */
  .brand-card:hover {
    transform: translateY(-10px) scale(1.01);
  }
  .btn-gold:hover { transform: translateY(-2px); }
  .btn-primary:hover { transform: translateY(-2px); }
}

/* ── Cross-browser flex fixes ────────────────────────────────── */
.nav-links, .nav-actions, .bc-foot, .footer-contacts {
  display: -webkit-flex;
  display: flex;
}

/* ── Android Chrome address bar fix ──────────────────────────── */
@supports (height: 100dvh) {
  .full-height { height: 100dvh; }
}
@supports not (height: 100dvh) {
  .full-height { height: 100vh; }
}

/* ── iOS momentum scrolling for scrollable areas ─────────────── */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.scroll-y { overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* ── Fix button appearance on iOS ────────────────────────────── */
button, .btn, input[type="submit"], input[type="button"] {
  -webkit-appearance: none;
  appearance: none;
}

/* ── Prevent double-tap zoom on buttons ──────────────────────── */
button, a, .btn {
  touch-action: manipulation;
}

/* ── PWA standalone mode (installed on home screen) ──────────── */
@media (display-mode: standalone) {
  body {
    padding-top: calc(56px + env(safe-area-inset-top));
  }
  #richs-nav {
    padding-top: env(safe-area-inset-top);
    height: calc(56px + env(safe-area-inset-top));
  }
}