/* ================================================================
   RM BAKES — PREMIUM CAFE DESIGN SYSTEM v2
   Palette: Warm Honey · Light Amber · Deep Maroon
   
   STRUCTURE:
   1. Design Tokens (CSS Variables)
   2. Reset & Base
   3. Typography
   4. Animations
   5. Navbar
   6. Cafe Strip
   7. Flash / Toast System
   8. Buttons
   9. Inputs & Forms
  10. Cards
  11. Status Badges
  12. Footer
  13. Homepage (Hero · Carousel · Featured)
  14. Products Page (Desktop)
  15. Products Page (Mobile overrides)
  16. Product Detail
  17. Auth Pages
  18. Cart
  19. Checkout
  20. Orders
  21. Order Details Timeline
  22. Profile / Settings
  23. Notifications
  24. Dessert Studio
  25. Reviews
  26. About Page
  27. Shared Utilities
  28. Responsive — Tablet (≤900px)
  29. Responsive — Mobile (≤640px)
  30. Responsive — Small Mobile (≤400px)
================================================================ */


/* ─────────────────────────────────────────────
   1. DESIGN TOKENS
───────────────────────────────────────────── */
:root {
  /* Warm honey/amber as the main background — cafe vibe */
  --honey:         #FEF3D8;   /* main page bg — warm honey */
  --honey-2:       #FDEAB8;   /* secondary bg / borders */
  --honey-dark:    #F5D98A;   /* stronger border / divider */
  --card:          #FFFDF5;   /* card / input backgrounds */
  --card-alt:      #FFFBEC;   /* alternate card tint */

  /* Brand colours */
  --amber:         #C8923A;
  --amber-light:   #E0A84C;
  --amber-dark:    #A87428;
  --amber-pale:    #FDE8A0;   /* amber accent areas on honey bg */

  --maroon:        #5C1520;
  --maroon-2:      #7A2030;
  --maroon-pale:   #F5E8EA;

  /* Text */
  --text-dark:     #2C1A14;
  --text-body:     #4A3028;
  --text-muted:    #8B7B70;
  --text-faint:    #B5A89E;

  /* Greys (warm) */
  --grey:          #9B8E86;
  --grey-2:        #C4B8B0;

  /* Shadows */
  --shadow-sm:     0 2px 12px rgba(92,21,32,0.07);
  --shadow-md:     0 6px 28px rgba(92,21,32,0.11);
  --shadow-lg:     0 16px 52px rgba(92,21,32,0.15);
  --shadow-amber:  0 4px 20px rgba(200,146,58,0.25);

  /* Radii */
  --r-sm:  10px;
  --r-md:  18px;
  --r-lg:  24px;
  --r-xl:  36px;
  --r-2xl: 48px;
}


/* ─────────────────────────────────────────────
   2. RESET & BASE
───────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
/* FIX #7: Remove browser default blue tap highlight on all devices */
* {
  -webkit-tap-highlight-color: transparent;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
a, button, input, select, textarea { outline: none; }
*:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
html { scroll-behavior:smooth; }

body {
  font-family: 'DM Sans', 'Inter', system-ui, sans-serif;
  background: var(--honey);       /* warm honey background */
  color: var(--text-body);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width:100%; display:block; }
a   { text-decoration:none; color:inherit; }


/* ─────────────────────────────────────────────
   3. TYPOGRAPHY
───────────────────────────────────────────── */
h1, h2, h3 {
  font-family: 'Playfair Display', Georgia, serif;
  color: var(--maroon);
  line-height: 1.2;
}
h4, h5, h6 { font-family: 'DM Sans', sans-serif; color: var(--text-dark); }
p  { line-height: 1.7; }


/* ─────────────────────────────────────────────
   4. ANIMATIONS
───────────────────────────────────────────── */
/* Page entry — opacity ONLY, no transform (transforms break position:fixed children) */
body { animation: pageIn .55s ease both; }
@keyframes pageIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Page transition overlay */
.page-transition {
  position:fixed; inset:0; z-index:999999;
  background:var(--honey); opacity:0;
  pointer-events:none; transition:opacity .45s ease;
}
.page-transition.active { opacity:1; }

/* Shimmer skeleton */
@keyframes shimmer { from{background-position:200% 0} to{background-position:-200% 0} }
.shimmer {
  background: linear-gradient(90deg, var(--honey-2) 25%, var(--honey) 50%, var(--honey-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite linear;
}


/* ─────────────────────────────────────────────
   5. NAVBAR
───────────────────────────────────────────── */
.rm-navbar {
  position: sticky; top:0; z-index:9000;
  background: rgba(254,243,216,0.95);   /* honey semi-transparent */
  backdrop-filter: blur(20px);
  border-bottom: 1.5px solid var(--honey-dark);
  height: 76px;
  padding: 0 clamp(14px,3.5vw,48px);
  display: flex; align-items:center; justify-content:space-between; gap:20px;
  box-shadow: 0 2px 16px rgba(92,21,32,0.06);
}

/* Logo */
.rm-logo {
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem; font-weight:700;
  color: var(--maroon); letter-spacing:2px;
  display:flex; align-items:center; gap:10px;
  white-space:nowrap; flex-shrink:0;
}
.rm-logo img { height:54px; width:auto; object-fit:contain; max-width:220px; }
.rm-logo .logo-text { font-size:1.3rem; }

/* Desktop nav links — hidden on mobile */
.rm-nav-links {
  display:flex; align-items:center; gap:2px;
  list-style:none;
}
.rm-nav-links a {
  padding: 8px 14px; border-radius: 99px;
  font-size: 0.88rem; font-weight:500;
  color: var(--text-body); transition: all .2s;
}
.rm-nav-links a:hover { color:var(--maroon); background:var(--maroon-pale); }
.rm-nav-links .active-link { color:var(--maroon); font-weight:700; }

/* Right action group */
.rm-nav-actions { display:flex; align-items:center; gap:8px; }

.rm-nav-icon-btn {
  width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; border:1.5px solid transparent;
  transition:all .2s; cursor:pointer; background:none;
  color: var(--text-body); position:relative;
}
.rm-nav-icon-btn:hover {
  border-color:var(--amber); color:var(--amber);
  background: var(--amber-pale);
}

/* Hamburger (mobile only) */
.rm-hamburger {
  display:none; flex-direction:column; gap:5px;
  cursor:pointer; padding:8px; background:none; border:none;
}
.rm-hamburger span {
  width:22px; height:2px; background:var(--maroon);
  border-radius:99px; display:block; transition:all .3s;
}
.rm-hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.rm-hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.rm-hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.rm-mobile-menu {
  /* FIX #5: Drop-DOWN animation using visibility+opacity+scale, NOT display:none */
  position: fixed;
  top: 76px; left: 0; right: 0; bottom: 0;
  height: calc(100dvh - 76px);
  max-height: calc(100dvh - 76px);
  z-index: 8999;
  background: var(--honey);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex;              /* Always flex — visibility controls show/hide */
  flex-direction: column;
  padding: 20px 16px 40px;
  gap: 4px;
  border-top: 1.5px solid var(--honey-dark);
  box-shadow: 0 12px 40px rgba(92,21,32,.15);
  /* Hidden state */
  visibility: hidden;
  opacity: 0;
  transform: translateY(-14px) scale(0.97);
  transform-origin: top center;
  pointer-events: none;
  transition:
    visibility 0s linear .3s,
    opacity .28s ease,
    transform .32s cubic-bezier(0.34, 1.5, 0.64, 1);
}
.rm-mobile-menu.open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
  transition:
    visibility 0s linear 0s,
    opacity .26s ease,
    transform .34s cubic-bezier(0.34, 1.56, 0.64, 1);  /* spring bounce */
}
.rm-mobile-menu a,
.rm-mobile-menu button.mobile-link {
  display:block; padding:14px 16px; border-radius:var(--r-md);
  font-size:1rem; font-weight:500; color:var(--text-body);
  background:none; border:none; text-align:left; cursor:pointer; width:100%;
  transition:all .2s;
}
.rm-mobile-menu a:hover,
.rm-mobile-menu button.mobile-link:hover { background:var(--maroon-pale); color:var(--maroon); }
.rm-mobile-divider { height:1px; background:var(--honey-2); margin:6px 0; }

/* Notification badge dot */
.rm-badge {
  position:absolute; top:-3px; right:-3px;
  min-width:18px; height:18px; padding:0 4px;
  border-radius:99px; background:var(--maroon);
  color:#fff; font-size:.65rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}

/* Small inline count badge for the RM Bakes notifications tab */
.notif-badge-count {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:17px; height:17px; padding:0 4px; margin-left:5px;
  border-radius:99px; background:var(--maroon);
  color:#fff; font-size:.68rem; font-weight:700; line-height:1;
  vertical-align:middle;
}


/* ─────────────────────────────────────────────
   6. CAFE STRIP
───────────────────────────────────────────── */
.cafe-strip {
  background:var(--maroon);
  color:rgba(255,255,255,.7);
  text-align:center; font-size:.75rem;
  letter-spacing:2.5px; text-transform:uppercase;
  padding:8px 16px;
}


/* ─────────────────────────────────────────────
   7. FLASH / TOAST SYSTEM
───────────────────────────────────────────── */

/* Flash messages (server-side) */
.rm-flash-area {
  position:fixed; top:80px; right:16px; z-index:99999;
  display:flex; flex-direction:column; gap:8px;
  width:min(340px, calc(100vw - 32px));
  pointer-events:none;
}
.rm-flash {
  padding:14px 16px; border-radius:var(--r-md);
  background:var(--card); border:1.5px solid var(--honey-dark);
  box-shadow:var(--shadow-md); color:var(--text-dark);
  font-size:.88rem; pointer-events:all;
  display:flex; align-items:flex-start; gap:10px;
  animation:flashIn .35s ease both;
}
.rm-flash .flash-close {
  margin-left:auto; background:none; border:none;
  color:var(--grey); cursor:pointer; font-size:1rem; flex-shrink:0;
}
@keyframes flashIn {
  from { opacity:0; transform:translateX(20px); }
  to   { opacity:1; transform:translateX(0); }
}

/* JS-triggered toasts — fixed at TOP, independent of page scroll
   FIX: use translate3d instead of translateY to trigger GPU compositing
        which avoids stacking context interference from body opacity animation */
.custom-toast {
  position: fixed;
  top: 88px;              /* below navbar 76px + buffer */
  left: 50%;
  /* Start: shifted up + invisible */
  transform: translate3d(-50%, -20px, 0);
  z-index: 9999999;
  background: var(--maroon);
  color: #fff;
  padding: 12px 22px;
  border-radius: 16px;
  font-size: .9rem; font-weight: 600;
  letter-spacing: .2px;
  opacity: 0;
  pointer-events: none;
  /* FIX: nowrap forced long messages past the container's max-width,
     pushing text outside the visible background. Wrapping + a fixed
     cap keeps every message contained regardless of length. */
  white-space: pre-line;
  word-wrap: break-word;
  overflow-wrap: break-word;
  width: max-content;
  max-width: min(380px, calc(100vw - 24px));
  text-align: center;
  line-height: 1.45;
  box-shadow: 0 8px 28px rgba(92,21,32,.45), 0 2px 8px rgba(0,0,0,.15);
  transition: opacity .28s ease, transform .28s cubic-bezier(0.34,1.56,0.64,1);
  will-change: transform, opacity;
}
.custom-toast.show {
  opacity: 1;
  transform: translate3d(-50%, 0, 0);
}
/* Pop animation when toast is shown */
@keyframes toastPop {
  0%   { transform: translate3d(-50%, -20px, 0) scale(.85); opacity:0; }
  70%  { transform: translate3d(-50%, 2px, 0) scale(1.03); opacity:1; }
  100% { transform: translate3d(-50%, 0, 0) scale(1); opacity:1; }
}
.custom-toast.show { animation: toastPop .35s cubic-bezier(0.34,1.56,0.64,1) both; }


/* ─────────────────────────────────────────────
   8. BUTTONS
───────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding:12px 24px; border-radius:99px;
  font-size:.88rem; font-weight:600; cursor:pointer;
  border:none; transition:all .25s; text-decoration:none;
  white-space:nowrap; font-family:'DM Sans',sans-serif;
}
.btn:disabled { opacity:.5; cursor:not-allowed; }

.btn-primary { background:var(--maroon); color:#fff; }
.btn-primary:hover:not(:disabled) {
  background:var(--maroon-2);
  box-shadow:0 4px 16px rgba(92,21,32,.35);
  transform:translateY(-1px);
}

.btn-amber { background:var(--amber); color:#fff; }
.btn-amber:hover:not(:disabled) {
  background:var(--amber-light);
  box-shadow:var(--shadow-amber);
  transform:translateY(-1px);
}

.btn-outline {
  background:transparent; color:var(--maroon);
  border:1.5px solid var(--maroon);
}
.btn-outline:hover { background:var(--maroon-pale); }

.btn-ghost {
  background:transparent; color:var(--text-body);
  border:1.5px solid var(--honey-dark);
}
.btn-ghost:hover { border-color:var(--maroon); color:var(--maroon); }

.btn-danger { background:#DC2626; color:#fff; }
.btn-danger:hover { background:#B91C1C; }

.btn-sm  { padding:8px 16px; font-size:.8rem; }
.btn-lg  { padding:14px 32px; font-size:.95rem; }
.btn-full { width:100%; }


/* ─────────────────────────────────────────────
   9. INPUTS & FORMS
───────────────────────────────────────────── */
.rm-input {
  width:100%; padding:13px 16px; border-radius:var(--r-md);
  border:1.5px solid var(--honey-dark); background:var(--card);
  font-size:.92rem; font-family:'DM Sans',sans-serif;
  color:var(--text-dark); transition:all .2s; outline:none;
  display:block; margin-bottom:14px;
}
.rm-input:focus { border-color:var(--amber); box-shadow:0 0 0 3px rgba(200,146,58,.14); }
.rm-input::placeholder { color:var(--grey); }
textarea.rm-input { resize:vertical; min-height:110px; }
select.rm-input   { appearance:none; cursor:pointer; }

.rm-input-group { position:relative; margin-bottom:14px; }
.rm-input-group .rm-input { margin-bottom:0; }
.rm-input-eye {
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer;
  color:var(--grey); font-size:1rem; padding:4px;
}

.rm-label {
  display:block; font-size:.78rem; font-weight:700;
  color:var(--text-muted); margin-bottom:6px;
  letter-spacing:.5px; text-transform:uppercase;
}

.pw-rules {
  background:var(--honey-2); border-radius:var(--r-md);
  padding:12px 16px; margin-bottom:14px;
  font-size:.82rem; color:var(--text-muted); line-height:1.9;
}
.pw-rules strong { color:var(--maroon); }


/* ─────────────────────────────────────────────
  10. CARDS
───────────────────────────────────────────── */
.rm-card {
  background:var(--card); border:1.5px solid var(--honey-dark);
  border-radius:var(--r-lg); padding:26px;
  box-shadow:var(--shadow-sm); transition:box-shadow .2s;
}
.rm-card:hover { box-shadow:var(--shadow-md); }

.section-card { margin-bottom:22px; }
.section-title {
  font-family:'Playfair Display',serif; font-size:1.35rem;
  color:var(--maroon); margin-bottom:18px; padding-bottom:12px;
  border-bottom:1px solid var(--honey-2);
}

.rm-card-amber {
  background:var(--amber-pale);
  border:1.5px solid rgba(200,146,58,.25);
  border-radius:var(--r-lg); padding:22px;
}

.rm-divider {
  width:56px; height:2px; background:var(--amber);
  border-radius:99px; margin:0 auto;
}


/* ─────────────────────────────────────────────
  11. STATUS BADGES
───────────────────────────────────────────── */
.status-badge {
  display:inline-flex; align-items:center;
  padding:4px 12px; border-radius:99px;
  font-size:.72rem; font-weight:700;
  letter-spacing:.5px; text-transform:uppercase;
}
.status-queued    { background:#FEF9C3; color:#854D0E; }
.status-approved  { background:#DCFCE7; color:#166534; }
.status-preparing { background:#DBEAFE; color:#1E40AF; }
.status-baking    { background:#FEE2E2; color:#991B1B; }
.status-packaging { background:#F3E8FF; color:#6B21A8; }
.status-out_for_delivery { background:#DBEAFE; color:#1D4ED8; }
.status-delivered { background:#DCFCE7; color:#15803D; }
.status-cancelled { background:#FEE2E2; color:#B91C1C; }
.status-pending   { background:#FEF3C7; color:#92400E; }
.status-reviewing { background:#E0F2FE; color:#075985; }
.status-quoted    { background:#F3E8FF; color:#6B21A8; }
.status-rejected  { background:#FEE2E2; color:#B91C1C; }


/* ─────────────────────────────────────────────
  12. FOOTER
───────────────────────────────────────────── */
.rm-footer {
  background:var(--maroon);
  color:rgba(255,255,255,.72);
  padding:56px clamp(16px,4vw,60px) 40px;
  text-align:center;
}
.rm-footer-brand { margin-bottom:28px; }
.rm-footer-brand h2 {
  font-family:'Playfair Display',serif;
  font-size:1.8rem; color:#fff; letter-spacing:4px; margin-bottom:8px;
}
.rm-footer-brand p { font-size:.82rem; letter-spacing:1.5px; opacity:.6; }
.rm-footer-divider { width:56px; height:1px; background:var(--amber); margin:0 auto 28px; }
.rm-footer-socials { display:flex; gap:14px; justify-content:center; margin-bottom:24px; }
.rm-footer-social {
  width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1rem; transition:all .3s;
}
.rm-footer-social:hover { background:var(--amber); border-color:var(--amber); }
.rm-footer-links { display:flex; gap:22px; justify-content:center; margin-bottom:24px; flex-wrap:wrap; }
.rm-footer-links a { font-size:.8rem; letter-spacing:1px; text-transform:uppercase; opacity:.55; transition:opacity .2s; }
.rm-footer-links a:hover { opacity:1; }
.rm-footer-copy { font-size:.76rem; opacity:.4; }

/* Main content wrapper */
.rm-main { max-width:1200px; margin:0 auto; padding:30px clamp(14px,3.5vw,48px) 100px; }


/* ─────────────────────────────────────────────
  13. HOMEPAGE — Hero · Carousel · Featured
───────────────────────────────────────────── */

/* ── DESKTOP layout: carousel · combined quick-access/studio card ── */
.home-hero-grid {
  display:grid; grid-template-columns:1.6fr 1.3fr;
  gap:18px; margin-bottom:52px; align-items:stretch;
}

/* Carousel shell */
.rm-carousel-shell {
  border-radius:var(--r-xl); overflow:hidden;
  box-shadow:var(--shadow-lg);
}

/* ── KEY FIX: natural image ratio, not fixed ── */
.rm-carousel-item { position:relative; }
.rm-carousel-img {
  width:100%;
  height:auto;          /* natural aspect ratio */
  max-height:400px;     /* prevent extremely tall images */
  object-fit:cover;
  display:block;
}

.rm-carousel-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(28,0,0,.75) 0%, transparent 55%);
  display:flex; flex-direction:column;
  justify-content:flex-end; padding:22px;
}
.rm-carousel-text { min-width:0; }
.rm-carousel-category {
  font-size:.7rem; font-weight:700; letter-spacing:2px;
  text-transform:uppercase; color:var(--amber-light); margin-bottom:7px;
}
.rm-carousel-title {
  font-family:'Playfair Display',serif;
  font-size:1.35rem; color:#fff; margin-bottom:7px; line-height:1.2;
}
.rm-carousel-desc { color:rgba(255,255,255,.75); font-size:.86rem; margin-bottom:14px; }

/* Dots */
.rm-carousel-dots { display:flex; gap:6px; padding:12px; justify-content:center; }
.rm-carousel-dot {
  width:6px; height:6px; border-radius:99px;
  background:var(--honey-2); border:none; cursor:pointer; padding:0; transition:all .3s;
}
.rm-carousel-dot.active { background:var(--amber); width:20px; }

/* ── Combined Quick Access + Dessert Studio card (desktop only) ──
   One card, split into two unequal zones so it reads as a single
   deliberate panel rather than two separate boxes crammed together.
   Quick Access (fewer actions) gets the narrower cream zone;
   Dessert Studio (heading + copy + two actions) gets the wider
   maroon zone. */
.hero-combo-card {
  display:flex; flex-direction:row;
  border-radius:var(--r-lg); overflow:hidden;
  border:1.5px solid var(--honey-dark);
  box-shadow:var(--shadow-sm);
  min-height:230px;
}
.combo-zone { display:flex; flex-direction:column; padding:22px 20px; }
.combo-zone-quick { flex:0 0 42%; background:var(--card); }
.combo-zone-studio { flex:1 1 58%; background:var(--maroon); color:rgba(255,255,255,.85); }

.combo-zone h3 {
  font-family:'Playfair Display',serif;
  font-size:1.05rem; flex-shrink:0; margin-bottom:0;
}
.combo-zone-quick h3 { color:var(--maroon); }
.combo-zone-studio h3 { color:#fff; }
.combo-zone-studio p {
  font-size:.84rem; opacity:.8; line-height:1.6; margin:12px 0 0;
}

/* Action buttons always centre in whatever vertical space is left
   under the heading (and, for Dessert Studio, the copy) — so a
   short zone and a tall zone still look intentional side by side. */
.combo-actions {
  display:flex; flex-direction:column; gap:10px;
  margin-top:auto; margin-bottom:auto;
}
.combo-zone-studio .combo-actions { gap:8px; }

.studio-btn-main {
  display:block; text-align:center;
  padding:10px 16px; border-radius:99px;
  background:var(--amber); color:#fff;
  font-size:.86rem; font-weight:600; transition:all .25s;
}
.studio-btn-main:hover { background:var(--amber-light); }
.studio-btn-sec {
  display:block; text-align:center;
  padding:10px 16px; border-radius:99px;
  background:rgba(255,255,255,.12); color:rgba(255,255,255,.85);
  font-size:.84rem; font-weight:500;
  border:1px solid rgba(255,255,255,.18); transition:all .25s;
}
.studio-btn-sec:hover { background:rgba(255,255,255,.2); }

/* ── Section header ── */
.rm-section-header { text-align:center; margin-bottom:32px; }
.rm-section-header h2 { font-size:clamp(1.5rem,3vw,2.1rem); margin-bottom:8px; }
.rm-section-header p  { color:var(--text-muted); font-size:.92rem; }
.rm-section-header .rm-divider { margin:14px auto 0; }

/* Featured product cards */
.featured-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:18px;
}
.featured-card {
  background:var(--card); border:1.5px solid var(--honey-dark);
  border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--shadow-sm); transition:all .3s;
  text-decoration:none; display:block;
}
.featured-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.featured-card-img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.featured-card-body { padding:16px; }
.featured-badge-pill {
  display:inline-block; background:var(--amber-pale);
  color:var(--amber-dark); font-size:.68rem; font-weight:700;
  letter-spacing:1px; text-transform:uppercase;
  padding:3px 10px; border-radius:99px; margin-bottom:6px;
}
.featured-card-tag { font-size:.72rem; color:var(--grey); text-transform:uppercase; letter-spacing:.5px; margin-bottom:5px; }
.featured-card-name { font-family:'Playfair Display',serif; font-size:1.05rem; color:var(--maroon); margin-bottom:5px; }
.featured-card-desc { font-size:.82rem; color:var(--text-muted); margin-bottom:10px; }
.featured-card-footer { display:flex; align-items:center; justify-content:space-between; }
.featured-card-price { font-size:1.05rem; font-weight:700; color:var(--maroon); }
.featured-card-link  { font-size:.83rem; font-weight:600; color:var(--amber); }

/* ── Mobile studio banner (hidden on desktop) ── */
.home-mobile-studio {
  display:none;
  background:var(--maroon); border-radius:var(--r-lg);
  padding:24px; color:rgba(255,255,255,.85);
  margin-top:40px;     /* appears AFTER featured products */
}
.home-mobile-studio h3 { color:#fff; font-family:'Playfair Display',serif; margin-bottom:8px; }
.home-mobile-studio p  { font-size:.87rem; opacity:.8; margin-bottom:14px; }


/* ─────────────────────────────────────────────
  14. PRODUCTS PAGE — DESKTOP
───────────────────────────────────────────── */
.products-hero { text-align:center; padding:44px 20px 36px; }
.products-hero h1 { font-size:clamp(1.9rem,5vw,3.2rem); margin-bottom:8px; }
.products-hero p  { color:var(--text-muted); max-width:480px; margin:0 auto 16px; }

/* ── Search ── */
.rm-search-bar { position:relative; max-width:540px; margin:0 auto 28px; }
.rm-search-bar input {
  width:100%; padding:12px 18px 12px 46px;
  border-radius:99px; border:1.5px solid var(--honey-dark);
  background:var(--card); font-size:.9rem; outline:none;
  transition:all .2s; color:var(--text-dark); font-family:'DM Sans',sans-serif;
}
.rm-search-bar input:focus { border-color:var(--amber); box-shadow:0 0 0 3px rgba(200,146,58,.12); }
.rm-search-icon {
  position:absolute; left:17px; top:50%;
  transform:translateY(-50%); color:var(--grey); font-size:.9rem;
}

/* ── Category chips ── */
.category-scroll-wrapper { margin-bottom:28px; overflow-x:auto; padding-bottom:4px; }
.category-scroll { display:flex; gap:8px; width:max-content; padding:2px 0; }
.cat-chip {
  padding:8px 16px; border-radius:99px;
  border:1.5px solid var(--honey-dark); background:var(--card);
  font-size:.83rem; font-weight:500; cursor:pointer; color:var(--text-body);
  transition:all .2s; white-space:nowrap; display:flex; align-items:center; gap:5px;
}
.cat-chip:hover { border-color:var(--amber); color:var(--amber); background:var(--amber-pale); }
.cat-chip.active { background:var(--maroon); color:#fff; border-color:var(--maroon); }
.cat-chip-count { font-size:.72rem; opacity:.65; }

/* ── Featured scroll rows (seasonal / festive / newly launched —
   products.html only) ── */
.featured-scroll-section { margin-bottom:36px; }
.featured-scroll-title {
  font-family:'Playfair Display',serif; font-size:clamp(1.3rem,2.6vw,1.8rem);
  font-weight:700; font-style:normal; text-align:center;
  color:var(--maroon); margin-bottom:22px;
}
.featured-scroll-row { display:flex; gap:14px; overflow-x:auto; padding-bottom:6px; }
.featured-scroll-row::-webkit-scrollbar { height:4px; }
.featured-scroll-row::-webkit-scrollbar-thumb { background:var(--honey-2); border-radius:99px; }

/* ── Launching Soon row (index.html only) — its own classes so
   spacing/typography tweaks here never touch the Festival/Seasonal/
   Newly Launched rows on products.html, and vice versa. ── */
.launch-soon-section { margin-top:56px; margin-bottom:80px; }
.launch-soon-title {
  font-family:'Playfair Display',serif; font-size:clamp(1.3rem,2.6vw,1.8rem);
  font-weight:700; font-style:normal; text-align:center;
  color:var(--maroon); margin-bottom:22px;
}
.launch-soon-row { display:flex; gap:14px; overflow-x:auto; padding-bottom:6px; }
.launch-soon-row::-webkit-scrollbar { height:4px; }
.launch-soon-row::-webkit-scrollbar-thumb { background:var(--honey-2); border-radius:99px; }
.fscroll-card {
  min-width:190px; border-radius:var(--r-md); overflow:hidden; flex-shrink:0;
  background:var(--card); border:1.5px solid var(--honey-dark); box-shadow:var(--shadow-sm);
}
.fscroll-img  { width:100%; height:115px; object-fit:cover; display:block; }
.fscroll-body { padding:10px 12px; }
.fscroll-name { font-size:.86rem; font-weight:600; color:var(--text-dark); margin-bottom:7px; line-height:1.3; }
.fscroll-footer { display:flex; align-items:center; justify-content:space-between; }
.fscroll-price { font-size:.88rem; font-weight:700; color:var(--maroon); }
.fscroll-link  { font-size:.78rem; color:var(--amber); font-weight:600; }

/* ── Category section headers ── */
.category-section { margin-bottom:44px; }
.category-label {
  display: flex; align-items: center;
  gap: 16px; margin-bottom: 18px;
  justify-content: center;   /* FIX: centered */
}
.category-label span {
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem; color: var(--maroon);
  font-style: italic;
  font-weight: 700;           /* FIX: bold */
  white-space: nowrap; text-align: center;
}
/* Lines on BOTH sides */
.category-label::before { content:''; flex:1; height:1px; background:var(--honey-dark); }
.category-label::after  { content:''; flex:1; height:1px; background:var(--honey-dark); }

/* ── DESKTOP product cards (vertical, grid) ── */
.products-grid {
  display:grid; gap:20px;
  grid-template-columns:repeat(auto-fill, minmax(240px,1fr));
}
.product-card {
  background:var(--card); border:1.5px solid var(--honey-dark);
  border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--shadow-sm); transition:all .3s;
}
.product-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }

.product-card-img-wrap { position:relative; overflow:hidden; flex-shrink:0; }
.product-card-img {
  width:100%; aspect-ratio:1; object-fit:cover;
  display:block; transition:transform .4s;
}
.product-card:hover .product-card-img { transform:scale(1.04); }

/* Chip stickers on image */
.product-chip-stack {
  position:absolute; top:8px; left:8px;
  display:flex; flex-direction:column; gap:3px;
}
.product-chip {
  display:inline-block; padding:3px 9px; border-radius:99px;
  font-size:.66rem; font-weight:700; letter-spacing:.4px; text-transform:uppercase;
}
.chip-launch   { background:#FEF3C7; color:#92400E; }
.chip-seasonal { background:#D1FAE5; color:#065F46; }
.chip-festive  { background:#EDE9FE; color:#5B21B6; }

.fav-overlay {
  position:absolute; top:8px; right:8px;
  width:30px; height:30px; border-radius:50%;
  background:rgba(255,255,255,.9);
  display:flex; align-items:center; justify-content:center; font-size:.85rem;
}
.featured-overlay {
  position:absolute; bottom:0; left:0; right:0;
  background:linear-gradient(transparent, rgba(92,21,32,.55));
  padding:18px 10px 6px;
}
.featured-overlay-badge { font-size:.68rem; font-weight:700; color:var(--amber-light); letter-spacing:1px; text-transform:uppercase; }

.product-card-body { padding:14px; min-width:0; overflow:hidden; }
.product-card-tag  { font-size:.7rem; color:var(--grey); text-transform:uppercase; letter-spacing:.4px; margin-bottom:5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.product-card-name { font-family:'Playfair Display',serif; font-size:1rem; color:var(--maroon); margin-bottom:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.product-card-price { font-size:.93rem; font-weight:700; color:var(--text-dark); }
.product-card-unit  { font-size:.72rem; color:var(--grey); }
.product-card-actions { display:flex; gap:7px; margin-top:12px; }
.product-card-actions .btn { flex:1; padding:9px 10px; font-size:.8rem; border-radius:10px; }

/* Skeleton loaders */
.skeleton-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:18px; }
.skeleton-card { background:var(--card); border:1.5px solid var(--honey-dark); border-radius:var(--r-lg); overflow:hidden; }
.skeleton-img  { width:100%; aspect-ratio:1; }
.skeleton-body { padding:14px; }
.skeleton-line { height:13px; border-radius:99px; margin-bottom:9px; }
.skeleton-line.short { width:60%; }

/* Empty state */
.products-empty { text-align:center; padding:70px 20px; }
.products-empty .empty-icon { font-size:2.8rem; margin-bottom:14px; }
.products-empty h2 { font-size:1.3rem; color:var(--maroon); margin-bottom:7px; }
.products-empty p  { color:var(--text-muted); }

/* ── Floating favourites button (products page only) ── */
.float-fav-btn {
  position: fixed; bottom: 28px; left: 28px;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--card); color: var(--maroon);
  border: 2px solid var(--honey-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; cursor: pointer;
  z-index: 8000;   /* FIX: high enough to be above all page content */
  box-shadow: var(--shadow-md); transition: all .3s;
}
.float-fav-btn:hover   { border-color:var(--maroon); }
.float-fav-btn.active  { background:var(--maroon); color:#fff; border-color:var(--maroon); }
.float-fav-count {
  position:absolute; top:-4px; right:-4px;
  min-width:20px; height:20px; border-radius:99px;
  background:var(--amber); color:#fff;
  font-size:.64rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; padding:0 4px;
}


/* ─────────────────────────────────────────────
  15. PRODUCTS PAGE — MOBILE OVERRIDES
  Horizontal card layout on narrow screens.
───────────────────────────────────────────── */

/* Applied at ≤640px via responsive section at bottom */


/* ─────────────────────────────────────────────
  16. PRODUCT DETAIL
───────────────────────────────────────────── */
.detail-back-btn {
  display:inline-flex; align-items:center; gap:6px;
  color:var(--text-muted); font-size:.86rem; margin-bottom:22px; transition:color .2s;
}
.detail-back-btn:hover { color:var(--maroon); }

.detail-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:36px; margin-bottom:28px;
}
.detail-image {
  width:100%; aspect-ratio:1; object-fit:cover;
  border-radius:var(--r-xl); box-shadow:var(--shadow-md);
}

.detail-badges  { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:12px; }
.detail-tag     { font-size:.73rem; color:var(--grey); text-transform:uppercase; letter-spacing:.4px; margin-bottom:5px; }
.detail-title   { font-size:clamp(1.5rem,3vw,2.1rem); margin-bottom:10px; }
.detail-price-row { display:flex; align-items:baseline; gap:7px; margin-bottom:18px; }
.detail-price   { font-size:1.7rem; font-weight:700; color:var(--maroon); }
.detail-unit    { font-size:.88rem; color:var(--grey); }

.detail-review-summary {
  background:var(--amber-pale); border:1.5px solid rgba(200,146,58,.2);
  border-radius:var(--r-md); padding:13px 16px;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:10px; margin-bottom:22px;
}
.detail-rating      { font-size:1.05rem; font-weight:700; color:var(--maroon); }
.detail-review-stats{ display:flex; gap:10px; font-size:.8rem; color:var(--text-muted); }
.detail-review-link { font-size:.83rem; font-weight:600; color:var(--amber); }
.detail-review-link:hover { color:var(--maroon); }
.detail-actions { display:flex; gap:10px; flex-wrap:wrap; }
.btn-fav.active { background:var(--maroon-pale); color:var(--maroon); border-color:var(--maroon); }

.detail-desc-card {
  background:var(--card); border:1.5px solid var(--honey-dark);
  border-radius:var(--r-lg); padding:24px; box-shadow:var(--shadow-sm);
}
.detail-desc-label { font-size:.73rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--amber); margin-bottom:10px; }
.detail-desc { color:var(--text-body); line-height:1.85; }


/* ─────────────────────────────────────────────
  17. AUTH PAGES
───────────────────────────────────────────── */
.auth-page {
  min-height:100vh; background:var(--honey);
  display:flex; align-items:center; justify-content:center; padding:40px 16px;
}
.auth-card {
  width:100%; max-width:430px;
  background:var(--card); border:1.5px solid var(--honey-dark);
  border-radius:var(--r-xl); padding:38px 34px; box-shadow:var(--shadow-lg);
}
.auth-logo    { font-family:'Playfair Display',serif; font-size:1.45rem; font-weight:700; color:var(--maroon); letter-spacing:3px; text-align:center; margin-bottom:5px; }
.auth-tagline { text-align:center; font-size:.8rem; color:var(--grey); margin-bottom:28px; }
.auth-title   { font-size:1.35rem; color:var(--maroon); margin-bottom:3px; }
.auth-sub     { font-size:.86rem; color:var(--text-muted); margin-bottom:24px; }
.auth-divider { height:1px; background:var(--honey-2); margin:18px 0; }
.auth-footer  { text-align:center; font-size:.84rem; color:var(--text-muted); }
.auth-footer a { color:var(--amber); font-weight:600; }
.auth-link-danger { color:#B91C1C; font-weight:600; font-size:.8rem; }
.auth-flash {
  padding:11px 14px; border-radius:var(--r-md);
  margin-bottom:14px; font-size:.86rem; line-height:1.5;
}
.auth-flash.success { background:#D1FAE5; color:#065F46; }
.auth-flash.danger  { background:#FEE2E2; color:#B91C1C; }
.auth-flash.error   { background:#FEE2E2; color:#B91C1C; }
.auth-flash.info    { background:#DBEAFE; color:#1E40AF; }
.otp-input  { text-align:center; letter-spacing:14px; font-size:1.5rem; font-weight:700; padding:14px 20px; }
.otp-timer  { text-align:center; font-size:.83rem; color:var(--text-muted); margin-top:12px; }
.otp-resend { text-align:center; margin-top:8px; font-size:.83rem; color:var(--text-muted); }
.otp-resend a { color:var(--amber); font-weight:600; }


/* ─────────────────────────────────────────────
  18. CART
───────────────────────────────────────────── */
.cart-layout {
  display:grid; grid-template-columns:1fr 308px;
  gap:24px; align-items:start;
}

.cart-item-card {
  background:var(--card); border:1.5px solid var(--honey-dark);
  border-radius:var(--r-lg); padding:18px; margin-bottom:14px;
  display:grid; grid-template-columns:110px 1fr;
  gap:16px; box-shadow:var(--shadow-sm);
}
.cart-item-img    { width:100%; aspect-ratio:1; object-fit:cover; border-radius:var(--r-md); }
.cart-item-cat    { font-size:.7rem; color:var(--grey); text-transform:uppercase; letter-spacing:.4px; margin-bottom:4px; }
.cart-item-name   { font-family:'Playfair Display',serif; font-size:1.02rem; color:var(--maroon); margin-bottom:4px; }
.cart-item-price  { font-size:.86rem; color:var(--text-muted); margin-bottom:10px; }
.cart-item-total  { font-size:.88rem; font-weight:700; color:var(--text-dark); margin-bottom:10px; }

.qty-selector {
  display:inline-flex; align-items:center;
  border:1.5px solid var(--honey-dark); border-radius:99px;
  overflow:hidden; margin-bottom:10px;
}
.qty-btn {
  width:33px; height:33px; border:none; background:none;
  cursor:pointer; font-size:1rem; color:var(--maroon);
  transition:background .2s; display:flex; align-items:center; justify-content:center;
}
.qty-btn:hover { background:var(--amber-pale); }
.qty-count { min-width:30px; text-align:center; font-weight:700; font-size:.88rem; color:var(--text-dark); }

.cart-note-area {
  width:100%; padding:9px 12px; border-radius:var(--r-md);
  border:1.5px solid var(--honey-dark); font-size:.83rem;
  font-family:'DM Sans',sans-serif; resize:none; outline:none;
  transition:border-color .2s; min-height:66px; color:var(--text-dark); background:var(--card);
}
.cart-note-area:focus { border-color:var(--amber); }
.cart-note-actions { display:flex; gap:7px; margin-top:5px; }

.cart-empty-state { text-align:center; padding:70px 20px; }
.cart-empty-state h2 { font-size:1.35rem; color:var(--maroon); margin-bottom:7px; }
.cart-empty-state p  { color:var(--text-muted); margin-bottom:22px; }

/* Guest cart banner */
.guest-cart-banner {
  background:var(--amber-pale); border:1.5px solid rgba(200,146,58,.3);
  border-radius:var(--r-lg); padding:16px 20px; margin-bottom:20px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.guest-cart-banner p { flex:1; font-size:.88rem; color:var(--text-body); line-height:1.6; }

.cart-summary-card {
  background:var(--card); border:1.5px solid var(--honey-dark);
  border-radius:var(--r-lg); padding:22px; box-shadow:var(--shadow-md);
  position:sticky; top:88px;
}
.cart-summary-title  { font-family:'Playfair Display',serif; font-size:1.05rem; color:var(--maroon); margin-bottom:14px; }
.cart-total-display  { font-size:1.55rem; font-weight:700; color:var(--maroon); margin-bottom:18px; }


/* ─────────────────────────────────────────────
  19. CHECKOUT
───────────────────────────────────────────── */
.checkout-item { display:flex; gap:14px; align-items:center; padding:14px 0; border-bottom:1px solid var(--honey-2); }
.checkout-item:last-child { border-bottom:none; }
.checkout-item-img { width:68px; height:68px; object-fit:cover; border-radius:var(--r-sm); flex-shrink:0; }
.checkout-item-img-placeholder { width:68px; height:68px; background:var(--honey-2); border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; font-size:1.4rem; flex-shrink:0; }
.checkout-item-name  { font-weight:600; color:var(--text-dark); margin-bottom:3px; }
.checkout-item-meta  { font-size:.8rem; color:var(--text-muted); }
.checkout-item-note  { font-size:.78rem; color:var(--amber); margin-top:3px; }
.checkout-item-total { margin-left:auto; font-weight:700; color:var(--maroon); white-space:nowrap; }

.checkout-totals { border-top:1px solid var(--honey-2); margin-top:14px; padding-top:14px; }
.total-line { display:flex; justify-content:space-between; align-items:center; padding:7px 0; font-size:.88rem; color:var(--text-body); }
.total-line strong { color:var(--text-dark); }
.total-line.grand { font-size:1.02rem; font-weight:700; color:var(--maroon); padding-top:12px; border-top:1px solid var(--honey-2); }
.total-savings { color:#16A34A; }

.coupon-input-row { display:flex; gap:9px; }
.coupon-input-row input { flex:1; }
.coupon-applied-badge { display:flex; align-items:center; gap:8px; padding:9px 13px; background:#D1FAE5; border:1px solid #86EFAC; border-radius:var(--r-md); color:#166534; font-size:.84rem; font-weight:600; margin-bottom:14px; }

.delivery-detail-line { display:flex; gap:10px; padding:9px 0; border-bottom:1px solid var(--honey-2); font-size:.88rem; }
.delivery-detail-label { color:var(--text-muted); min-width:100px; flex-shrink:0; }
.delivery-detail-value { color:var(--text-dark); font-weight:500; }
.incomplete-alert { background:#FEF2F2; border:1px solid #FECACA; border-radius:var(--r-md); padding:13px 15px; margin-bottom:18px; color:#B91C1C; font-size:.86rem; line-height:1.65; }

.order-overlay {
  position:fixed; inset:0; z-index:999999;
  background:#000;
  display:none; align-items:center; justify-content:center;
  overflow:hidden;
}
.order-overlay.active { display:flex; }

/* Order animation: separate mobile/desktop Lottie containers — JS
   picks the right one for the current viewport and loads only that
   animation into it, then adds .active-viewport to show it. */
.order-lottie { width:100vw; height:100vh; display:none; }
.order-lottie.active-viewport { display:block; }


/* ─────────────────────────────────────────────
  20. ORDERS
───────────────────────────────────────────── */
.orders-filter-tabs { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:26px; }
.order-filter-btn {
  padding:8px 18px; border-radius:99px; border:1.5px solid var(--honey-dark);
  background:var(--card); font-size:.83rem; font-weight:500;
  cursor:pointer; color:var(--text-body); transition:all .2s;
}
.order-filter-btn:hover  { border-color:var(--amber); color:var(--amber); }
.order-filter-btn.active { background:var(--maroon); color:#fff; border-color:var(--maroon); }

.order-card-wrap { background:var(--card); border:1.5px solid var(--honey-dark); border-radius:var(--r-lg); padding:22px; margin-bottom:14px; box-shadow:var(--shadow-sm); }
.order-card-top  { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.order-num       { font-size:.78rem; font-weight:700; color:var(--amber); letter-spacing:1px; text-transform:uppercase; margin-bottom:4px; }
.order-date      { font-size:.8rem; color:var(--text-muted); margin-top:5px; }
.studio-tag      { display:inline-flex; align-items:center; gap:5px; padding:4px 11px; border-radius:99px; background:var(--amber-pale); color:var(--amber-dark); font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.8px; margin-top:7px; }

.order-product-preview { display:flex; gap:11px; align-items:center; padding:11px 0; border-bottom:1px solid var(--honey-2); }
.order-product-preview:last-child { border-bottom:none; }
.order-thumb { width:56px; height:56px; object-fit:cover; border-radius:var(--r-sm); flex-shrink:0; }
.order-thumb-placeholder { width:56px; height:56px; border-radius:var(--r-sm); background:var(--honey-2); display:flex; align-items:center; justify-content:center; font-size:1.3rem; flex-shrink:0; }
.order-product-name { font-weight:600; font-size:.88rem; color:var(--text-dark); }
.order-product-meta { font-size:.78rem; color:var(--text-muted); margin-top:2px; }

.order-card-bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; margin-top:18px; padding-top:14px; border-top:1px solid var(--honey-2); }
.order-grand   { font-size:1.05rem; font-weight:700; color:var(--maroon); }
.order-actions { display:flex; gap:7px; flex-wrap:wrap; }

.custom-order-preview { background:var(--amber-pale); border:1.5px solid rgba(200,146,58,.2); border-radius:var(--r-md); padding:14px; margin:14px 0; }
.custom-preview-img   { width:100%; border-radius:var(--r-md); margin-bottom:10px; max-height:180px; object-fit:cover; }

.empty-order-state { text-align:center; padding:56px 20px; background:var(--card); border:1.5px solid var(--honey-dark); border-radius:var(--r-lg); }
.empty-order-state .empty-icon { font-size:2.3rem; margin-bottom:12px; }
.empty-order-state h2 { font-size:1.15rem; color:var(--maroon); margin-bottom:5px; }
.empty-order-state p  { color:var(--text-muted); font-size:.88rem; }

/* Payment pill — "Prepaid" (Online) vs "Cash on Delivery"
   Used in orders.html (order-card-top) and order_details.html
   (delivery details payment row). Styled like .status-badge for
   visual consistency with the order-status pill. */
.payment-pill {
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 12px; border-radius:99px;
  font-size:.72rem; font-weight:700;
  letter-spacing:.5px; text-transform:uppercase;
  white-space:nowrap;
}
.payment-pill-prepaid { background:#DCFCE7; color:#15803D; }
.payment-pill-cod      { background:var(--amber-pale); color:var(--amber-dark); }


/* ─────────────────────────────────────────────
  21. ORDER DETAILS — TIMELINE
───────────────────────────────────────────── */
.production-timeline { padding:4px 0; }
.timeline-step { display:flex; gap:14px; position:relative; padding-bottom:18px; }
.timeline-step:not(:last-child)::before {
  content:''; position:absolute; left:15px; top:34px;
  width:2px; height:calc(100% - 18px); background:var(--honey-2);
}
.timeline-icon {
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:.88rem; background:var(--honey-2); border:2px solid var(--card);
  box-shadow:0 0 0 2px var(--honey-2);
}
.timeline-step.completed .timeline-icon { background:var(--amber-pale); box-shadow:0 0 0 2px var(--amber-light); }
.timeline-step.active .timeline-icon    { background:var(--maroon); color:#fff; box-shadow:0 0 0 3px rgba(92,21,32,.15); }
.timeline-title { font-weight:600; font-size:.9rem; color:var(--text-dark); margin-bottom:4px; }
.timeline-desc  { font-size:.8rem; color:var(--text-muted); line-height:1.6; }

/* Payment verification badge — "Payment Complete" vs
   "Payment not verified!" shown next to the payment pill in
   order_details.html, driven by the payment_verified column. */
.payment-verify-badge {
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 11px; border-radius:99px;
  font-size:.74rem; font-weight:600; white-space:normal;
  text-align:left; line-height:1.4;
}
.payment-verify-badge.verify-ok  { background:#DCFCE7; color:#15803D; }
.payment-verify-badge.verify-bad { background:#FEE2E2; color:#B91C1C; }

/* Transaction details rows (inside the body-appended overlay
   built by openTransactionOverlay() in order_details.html) */
.txn-detail-row {
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:14px; padding:10px 0; border-bottom:1px solid var(--honey-2);
  font-size:.84rem;
}
.txn-detail-row:last-child { border-bottom:none; }
.txn-detail-label { color:var(--text-muted); flex-shrink:0; }
.txn-detail-value { color:var(--text-dark); font-weight:600; text-align:right; word-break:break-word; }


/* ─────────────────────────────────────────────
  22. PROFILE / SETTINGS
───────────────────────────────────────────── */
.profile-hero {
  background:var(--maroon); border-radius:var(--r-xl);
  padding:34px; text-align:center; color:#fff; margin-bottom:26px;
}
.profile-hero h1 { color:#fff; font-size:1.75rem; margin-bottom:4px; }
.profile-hero p  { opacity:.72; font-size:.88rem; margin-bottom:14px; }
.member-badge {
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 14px; border-radius:99px;
  background:rgba(200,146,58,.2); color:var(--amber-light);
  font-size:.76rem; font-weight:700; letter-spacing:.8px; text-transform:uppercase;
}

.profile-quick-grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:10px; margin-bottom:26px;
}
.quick-btn {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:7px; padding:15px 10px; border-radius:var(--r-lg);
  background:var(--card); border:1.5px solid var(--honey-dark);
  text-decoration:none; color:var(--text-body); font-size:.8rem; font-weight:500;
  transition:all .2s; text-align:center; box-shadow:var(--shadow-sm); cursor:pointer;
}
.quick-btn:hover { border-color:var(--maroon); color:var(--maroon); box-shadow:var(--shadow-md); }
.quick-btn-icon  { font-size:1.35rem; }

.profile-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.settings-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:22px; }


/* ─────────────────────────────────────────────
  23. NOTIFICATIONS
───────────────────────────────────────────── */
.notif-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:22px; }
.notif-header h1 { font-size:1.75rem; color:var(--maroon); }

.notif-tabs { display:flex; gap:7px; margin-bottom:22px; }
.notif-tab {
  padding:8px 18px; border-radius:99px;
  border:1.5px solid var(--honey-dark); background:var(--card);
  font-size:.83rem; font-weight:500; cursor:pointer; color:var(--text-body); transition:all .2s;
}
.notif-tab:hover  { border-color:var(--amber); color:var(--amber); }
.notif-tab.active { background:var(--maroon); color:#fff; border-color:var(--maroon); }
.notif-tab-content { display:none; animation:fadeTab .3s ease; }
.notif-tab-content.active { display:block; }
@keyframes fadeTab { from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:translateY(0)} }

.notif-card {
  display:flex; gap:14px; padding:18px;
  background:var(--card); border:1.5px solid var(--honey-dark);
  border-radius:var(--r-lg); margin-bottom:10px; box-shadow:var(--shadow-sm);
}
.notif-icon   { width:44px; height:44px; border-radius:50%; background:var(--maroon-pale); display:flex; align-items:center; justify-content:center; font-size:1.05rem; flex-shrink:0; }
.notif-body   { flex:1; }
.notif-title  { font-weight:700; color:var(--text-dark); margin-bottom:4px; font-size:.93rem; }
.notif-text   { font-size:.84rem; color:var(--text-muted); line-height:1.65; margin-bottom:7px; white-space:pre-line; }
.notif-meta   { font-size:.74rem; color:var(--grey); }
.notif-order-type { display:inline-block; padding:2px 9px; border-radius:99px; font-size:.7rem; font-weight:700; background:var(--honey-2); color:var(--text-muted); margin-bottom:5px; }
.notif-order-type.custom { background:var(--amber-pale); color:var(--amber); }
.notif-actions { display:flex; gap:7px; margin-top:10px; flex-wrap:wrap; }

.global-notif-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px; }
.global-notif-card { background:var(--card); border:1.5px solid var(--honey-dark); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .3s; }
.global-notif-card:hover { transform:translateY(-3px); }
.global-notif-banner { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.global-notif-body { padding:18px; }
.notif-type-badge { display:inline-block; padding:3px 9px; border-radius:99px; font-size:.68rem; font-weight:700; background:var(--honey-2); color:var(--text-muted); margin-bottom:9px; text-transform:uppercase; letter-spacing:.4px; }
.notif-featured-badge { display:inline-block; padding:2px 9px; border-radius:99px; background:var(--amber-pale); color:var(--amber); font-size:.68rem; font-weight:700; margin-left:5px; }
.notif-coupon-box { margin-top:12px; padding:11px 15px; background:var(--maroon); border-radius:var(--r-md); color:#fff; font-weight:700; font-size:.95rem; letter-spacing:2px; text-align:center; }
.notif-info-box   { margin-top:10px; padding:9px 13px; background:var(--honey-2); border-radius:var(--r-md); font-size:.83rem; color:var(--text-body); }

.notif-empty { text-align:center; padding:70px 20px; background:var(--card); border:1.5px solid var(--honey-dark); border-radius:var(--r-lg); }
.notif-empty .empty-icon { font-size:2.3rem; margin-bottom:11px; }
.notif-empty h2 { font-size:1.15rem; color:var(--maroon); margin-bottom:5px; }
.notif-empty p  { color:var(--text-muted); font-size:.88rem; }


/* ─────────────────────────────────────────────
  24. DESSERT STUDIO
───────────────────────────────────────────── */
.studio-page { min-height:100vh; background:var(--honey); }
.studio-topbar {
  background:rgba(254,243,216,.95); backdrop-filter:blur(20px);
  border-bottom:1.5px solid var(--honey-dark); padding:0 clamp(14px,3.5vw,48px);
  height:62px; display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:100; box-shadow:var(--shadow-sm);
}
.studio-page-wrap { max-width:800px; margin:0 auto; padding:38px clamp(14px,3.5vw,48px) 80px; }
.studio-hero { text-align:center; margin-bottom:38px; }
.studio-hero h1  { font-size:clamp(1.9rem,5vw,2.9rem); margin-bottom:9px; }
.studio-hero .studio-quote { font-style:italic; color:var(--amber); font-size:.95rem; margin-top:14px; }

.studio-form-card { background:var(--card); border:1.5px solid var(--honey-dark); border-radius:var(--r-xl); padding:34px; box-shadow:var(--shadow-md); }
.studio-form-title { font-family:'Playfair Display',serif; font-size:1.6rem; color:var(--maroon); margin-bottom:28px; }
.studio-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }

.upload-box {
  border:2px dashed rgba(200,146,58,.4); border-radius:var(--r-lg);
  padding:26px 18px; text-align:center; background:var(--amber-pale);
  transition:all .3s; cursor:pointer;
}
.upload-box:hover { border-color:var(--amber); }
.upload-box p { color:var(--text-muted); font-size:.86rem; margin-bottom:10px; }
/* pointer-events gets set to none via JS once a file is chosen —
   this is the "disable duplicate uploads" behaviour */
.upload-preview { margin-top:14px; display:none; position:relative; }
.upload-preview img { width:100%; border-radius:var(--r-md); border:1.5px solid var(--honey-dark); max-height:220px; object-fit:cover; }
/* × button, floats over the top-right corner of the preview image */
.upload-remove-btn {
  position:absolute; top:10px; right:10px; z-index:2;
  width:28px; height:28px; border-radius:50%; border:none;
  background:rgba(0,0,0,.65); color:#fff; font-size:1.1rem; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .2s;
}
.upload-remove-btn:hover { background:rgba(0,0,0,.85); }
/* Shows the picked file's name under the preview thumbnail */
.upload-filename {
  margin-top:8px; font-size:.82rem; color:var(--text-dark);
  display:flex; align-items:center; gap:6px; word-break:break-all;
}

/* ── Upload progress bar (real XHR upload.onprogress, not fake) ── */
.submit-progress-wrap { margin-top:14px; }
.submit-progress-track {
  width:100%; height:9px; border-radius:99px;
  background:var(--honey-2); overflow:hidden;
}
/* width is set by JS as % complete; the gradient + shimmer keyframe
   below just give it a moving "loading" look while it fills */
.submit-progress-bar {
  height:100%; width:0%; border-radius:99px;
  transition:width .2s ease;
  background:linear-gradient(90deg, var(--amber) 0%, var(--amber-light) 50%, var(--amber) 100%);
  background-size:200% 100%;
  animation:submitProgressShimmer 1.1s linear infinite;
}
@keyframes submitProgressShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.submit-progress-label {
  margin-top:6px; font-size:.78rem; color:var(--text-muted); text-align:center;
}

.my-studio-page { max-width:1200px; margin:0 auto; padding:38px clamp(14px,3.5vw,48px) 80px; }
.studio-orders-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:22px; }
.studio-order-card { background:var(--card); border:1.5px solid var(--honey-dark); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:all .3s; }
.studio-order-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
.studio-order-img { width:100%; height:210px; object-fit:cover; cursor:pointer; transition:transform .4s; }
.studio-order-card:hover .studio-order-img { transform:scale(1.03); }
.studio-order-no-img { width:100%; height:210px; background:var(--honey-2); display:flex; align-items:center; justify-content:center; font-size:2.8rem; }
.studio-order-body { padding:20px; }
.studio-order-code  { font-size:.73rem; color:var(--amber); font-weight:700; letter-spacing:2px; text-transform:uppercase; margin-bottom:3px; }
.studio-order-title { font-family:'Playfair Display',serif; font-size:1.25rem; color:var(--maroon); margin-bottom:10px; }
.studio-order-meta  { font-size:.83rem; color:var(--text-muted); margin-bottom:14px; line-height:1.7; }
.studio-order-date  { font-size:.73rem; color:var(--grey); margin-top:12px; }

.studio-detail-wrap { max-width:1080px; margin:0 auto; padding:38px clamp(14px,3.5vw,48px) 80px; }
.studio-detail-hero { display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start; margin-bottom:28px; }
.studio-hero-img { width:100%; border-radius:var(--r-xl); box-shadow:var(--shadow-lg); object-fit:cover; }
.studio-no-img { width:100%; aspect-ratio:1; background:var(--honey-2); border-radius:var(--r-xl); display:flex; align-items:center; justify-content:center; font-size:3.5rem; }
.studio-detail-content { background:var(--card); border:1.5px solid var(--honey-dark); border-radius:var(--r-lg); padding:26px; box-shadow:var(--shadow-sm); }
.studio-code { font-size:.72rem; color:var(--amber); font-weight:700; letter-spacing:2px; text-transform:uppercase; margin-bottom:7px; }
.studio-detail-title { font-size:1.9rem; margin-bottom:10px; }
.studio-meta-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:18px; }
.studio-meta-box   { background:var(--honey-2); border-radius:var(--r-md); padding:12px; }
.studio-meta-label { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:var(--grey); margin-bottom:4px; }
.studio-meta-value { font-size:.88rem; color:var(--text-dark); line-height:1.6; }
.studio-quote-card { background:var(--amber-pale); border:1.5px solid rgba(200,146,58,.25); border-radius:var(--r-lg); padding:22px; }
.studio-quote-price { font-size:1.9rem; font-weight:700; color:var(--maroon); margin-bottom:10px; }
.studio-quote-actions { display:flex; gap:9px; flex-wrap:wrap; margin-top:16px; }

.studio-timeline { position:relative; padding-left:26px; }
.studio-timeline::before { content:''; position:absolute; left:8px; top:0; width:2px; height:100%; background:linear-gradient(to bottom, var(--amber), var(--honey-2)); }
.studio-event { position:relative; margin-bottom:26px; padding-left:20px; }
.studio-dot { position:absolute; left:-25px; top:4px; width:17px; height:17px; border-radius:50%; background:var(--amber); border:3px solid var(--card); box-shadow:0 0 0 2px var(--amber-light); }
.studio-event-title { font-weight:700; font-size:.9rem; color:var(--text-dark); margin-bottom:4px; }
.studio-event-desc  { font-size:.8rem; color:var(--text-muted); line-height:1.65; margin-bottom:5px; }
.studio-event-time  { font-size:.73rem; color:var(--grey); }

.img-modal { position:fixed; inset:0; background:rgba(0,0,0,.9); z-index:99999; display:none; align-items:center; justify-content:center; padding:20px; }
.img-modal img { max-width:95%; max-height:92vh; border-radius:var(--r-lg); }
.img-modal-close { position:absolute; top:18px; right:18px; width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.1); color:#fff; font-size:1.15rem; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; }


/* ─────────────────────────────────────────────
  25. REVIEWS
───────────────────────────────────────────── */
.review-wrap { max-width:760px; margin:0 auto; }
.star-row { display:flex; gap:9px; justify-content:center; margin:14px 0; }
.rv-star {
  width:50px; height:50px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.55rem; cursor:pointer; background:var(--honey-2);
  border:2px solid transparent; transition:all .25s;
}
.rv-star:hover { transform:scale(1.1); }
.rv-star.filled { background:var(--amber-pale); border-color:var(--amber); }
.rv-star.filled::after { content:'⭐'; }
.rv-star:not(.filled)::after { content:'☆'; font-size:1.45rem; color:var(--grey); }

.review-card-display { background:var(--card); border:1.5px solid var(--honey-dark); border-radius:var(--r-xl); padding:34px; text-align:center; box-shadow:var(--shadow-md); }
.rv-rating-display { font-size:1.9rem; margin:14px 0; }
.rv-text { background:var(--honey-2); border-radius:var(--r-lg); padding:18px; margin:14px 0; font-size:.95rem; line-height:1.85; color:var(--text-body); }
.rv-date { font-size:.8rem; color:var(--text-muted); }
.rv-admin-reply { background:var(--amber-pale); border:1.5px solid rgba(200,146,58,.25); border-radius:var(--r-md); padding:16px; margin-top:18px; text-align:left; }
.rv-reply-title { font-size:.78rem; font-weight:700; color:var(--amber); text-transform:uppercase; letter-spacing:.8px; margin-bottom:7px; }
.rv-reply-text  { font-size:.88rem; color:var(--text-body); line-height:1.7; }
.rv-reply-meta  { font-size:.74rem; color:var(--text-muted); margin-top:7px; }
.rv-actions { display:flex; gap:9px; justify-content:center; margin-top:22px; }

.reviews-header { text-align:center; margin-bottom:28px; }
.avg-rating-big { font-size:2.4rem; font-weight:700; color:var(--maroon); }
.rv-count-row   { display:flex; gap:14px; justify-content:center; font-size:.86rem; color:var(--text-muted); margin-top:7px; }
.rv-grid { display:flex; flex-direction:column; gap:14px; }
.rv-item-card { background:var(--card); border:1.5px solid var(--honey-dark); border-radius:var(--r-lg); padding:20px; box-shadow:var(--shadow-sm); }
.rv-item-stars  { font-size:1.05rem; margin-bottom:10px; }
.rv-item-text   { font-size:.92rem; line-height:1.8; color:var(--text-body); margin-bottom:12px; }
.rv-rating-only { color:var(--text-muted); font-style:italic; font-size:.88rem; }
.rv-item-footer { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:7px; font-size:.8rem; color:var(--text-muted); }
.rv-verified    { color:#16A34A; font-weight:600; margin-left:7px; }

.leave-review-wrap { max-width:740px; margin:0 auto; }
.review-section-card { background:var(--card); border:1.5px solid var(--honey-dark); border-radius:var(--r-lg); padding:24px; margin-bottom:18px; box-shadow:var(--shadow-sm); }
.choice-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }


/* ─────────────────────────────────────────────
  26. ABOUT PAGE
───────────────────────────────────────────── */
.about-page { min-height:100vh; background:var(--honey); }
.about-wrap { max-width:1060px; margin:0 auto; padding:60px clamp(14px,4vw,60px) 100px; }
.about-hero { text-align:center; margin-bottom:64px; }
.about-hero h1 { font-size:clamp(2.5rem,7vw,5rem); letter-spacing:6px; margin-bottom:22px; }
.about-hero p  { max-width:660px; margin:0 auto; color:var(--text-muted); line-height:2; font-size:1rem; }
.about-story-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px; margin-bottom:64px; }
.story-card { background:var(--card); border:1.5px solid var(--honey-dark); border-radius:var(--r-xl); padding:34px; box-shadow:var(--shadow-sm); transition:all .3s; }
.story-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-md); }
.story-icon   { font-size:1.9rem; margin-bottom:18px; }
.story-card h2{ font-size:1.45rem; margin-bottom:14px; }
.story-card p { color:var(--text-muted); line-height:2; }
.about-quote  { background:var(--maroon); border-radius:var(--r-xl); padding:56px 36px; text-align:center; color:#fff; margin-bottom:52px; }
.about-quote blockquote { font-family:'Playfair Display',serif; font-size:clamp(1.1rem,2.5vw,1.7rem); line-height:1.85; font-style:italic; margin-bottom:22px; opacity:.92; }
.about-quote cite { font-size:.8rem; letter-spacing:3px; text-transform:uppercase; opacity:.5; }
.about-back { text-align:center; }


/* ─────────────────────────────────────────────
   26b. CONTACT PAGE
───────────────────────────────────────────── */
.contact-page { min-height:100vh; background:var(--honey); }
.contact-wrap { max-width:1000px; margin:0 auto; padding:56px clamp(14px,4vw,60px) 90px; }
.contact-hero { text-align:center; margin-bottom:40px; }
.contact-hero h1 { font-size:clamp(2.2rem,6vw,4rem); letter-spacing:5px; margin-bottom:16px; }
.contact-hero p  { max-width:560px; margin:0 auto; color:var(--text-muted); line-height:1.8; font-size:1rem; }

.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-bottom:40px; align-items:stretch; }

.contact-card { background:var(--card); border:1.5px solid var(--honey-dark); border-radius:var(--r-xl); padding:28px; box-shadow:var(--shadow-sm); }
.contact-card h2 { font-size:1.25rem; margin-bottom:18px; color:var(--maroon); }

.contact-btn {
  display:flex; align-items:center; gap:15px;
  padding:15px 16px; border-radius:var(--r-lg);
  background:var(--honey-2); border:1.5px solid var(--honey-dark);
  text-decoration:none; color:var(--text-dark); margin-bottom:12px;
  transition:transform .25s, box-shadow .25s;
}
.contact-btn:last-child { margin-bottom:0; }
.contact-btn:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
.contact-btn .contact-btn-icon {
  font-size:1.4rem; width:42px; height:42px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; color:#fff;
}
.contact-btn strong { display:block; font-size:.95rem; margin-bottom:2px; }
.contact-btn span   { display:block; font-size:.78rem; color:var(--text-muted); }

.contact-btn-whatsapp  .contact-btn-icon { background:#25D366; }
.contact-btn-phone     .contact-btn-icon { background:var(--maroon); }
.contact-btn-instagram .contact-btn-icon { background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
.contact-btn-facebook  .contact-btn-icon { background:#1877F2; }

.contact-address { display:flex; align-items:center; gap:8px; color:var(--text-muted); font-size:.88rem; margin-bottom:14px; }

.map-embed-wrap {
  width:100%; aspect-ratio:1/1; max-width:300px; margin:0 auto;
  border-radius:var(--r-lg); overflow:hidden; border:1.5px solid var(--honey-dark);
  box-shadow:var(--shadow-sm);
}
.map-embed-wrap iframe { width:100%; height:100%; border:0; display:block; }

@media (max-width: 780px) {
  .contact-grid   { grid-template-columns:1fr; }
  .contact-wrap   { padding:40px 14px 70px; }
  .map-embed-wrap { max-width:220px; }
}


/* ─────────────────────────────────────────────
  27. PAGE HERO (shared)
───────────────────────────────────────────── */
.rm-page-hero { text-align:center; padding:38px 20px 28px; margin-bottom:28px; }
.rm-page-hero h1 { font-size:clamp(1.7rem,4vw,2.6rem); margin-bottom:9px; }
.rm-page-hero p  { color:var(--text-muted); font-size:.95rem; max-width:460px; margin:0 auto; }


/* ─────────────────────────────────────────────
  28. RESPONSIVE — TABLET (≤900px)
───────────────────────────────────────────── */
@media (max-width:900px) {

  /* Nav: hide desktop links, show hamburger */
  .rm-nav-links  { display:none; }
  .rm-hamburger  { display:flex; }

  /* Homepage: single column, hide desktop side cards */
  .home-hero-grid { grid-template-columns:1fr; }
  .hero-combo-card { display:none; }
  .home-mobile-studio { display:block; }
  /* Show mobile quick access strip */
  .mobile-quick-access { display:flex; }

  /* Carousel overlay: text bottom-left, CTA bottom-right, so the
     image itself stays visible instead of being covered by a tall
     stacked text block. */
  .rm-carousel-overlay {
    flex-direction:row; align-items:flex-end; justify-content:space-between;
    gap:12px;
  }
  .rm-carousel-text { flex:1; min-width:0; }
  .rm-carousel-title {
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .rm-carousel-cta { flex-shrink:0; }

  /* Product detail: stack vertically */
  .detail-grid { grid-template-columns:1fr; }

  /* Cart: stack vertically */
  .cart-layout { grid-template-columns:1fr; }
  .cart-summary-card { position:static; }

  /* Profile: single column */
  .profile-grid { grid-template-columns:1fr; }

  /* Studio detail: single column */
  .studio-detail-hero { grid-template-columns:1fr; }
}


/* ─────────────────────────────────────────────
  29. RESPONSIVE — MOBILE (≤640px)
  KEY: Horizontal product cards
───────────────────────────────────────────── */
@media (max-width:640px) {

  /* ── STUDIO TOPBAR: prevent overflow/overlap on narrow screens
     when the right-side button text is long (e.g. "My Studio Orders") ── */
  .studio-topbar {
    padding: 0 10px;
    gap: 6px;
  }
  .studio-topbar > a.btn,
  .studio-topbar > button.btn {
    padding: 7px 10px;
    font-size: .72rem;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .studio-topbar .rm-logo {
    font-size: .82rem !important;
    letter-spacing: 1px !important;
    white-space: nowrap;
  }

  /* ── HERO CAROUSEL: shorter text, bottom-left,
     CTA bottom-right, more of the image left visible ── */
  .rm-carousel-overlay {
    padding: 14px 16px;
    background: linear-gradient(to top, rgba(20,0,0,.85) 0%, rgba(20,0,0,.38) 42%, transparent 68%);
  }
  .rm-carousel-category { font-size:.6rem; letter-spacing:1.5px; margin-bottom:4px; }
  .rm-carousel-title {
    font-size:1rem; margin-bottom:0;
    -webkit-line-clamp:1;
  }
  .rm-carousel-desc { display:none; }
  .rm-carousel-cta { padding:9px 16px; font-size:.76rem; }

  /* ── HORIZONTAL PRODUCT CARDS ──────────────
     Based on reference wireframe (image 7):
     [Image] | [Tags · Name · Price · Buttons]
     Reduces vertical scroll, modern mobile UX
  ─────────────────────────────────────────── */
  .products-grid {
    grid-template-columns: 1fr;   /* one card per row */
    gap: 10px;
  }

  /* FIX #2: Use flexbox instead of grid — prevents text from bleeding behind image */
  .product-card {
    display: flex;
    flex-direction: row;
    height: 155px;
    border-radius: var(--r-md);
    overflow: hidden;
    align-items: stretch;
  }

  .product-card-img-wrap {
    width: 128px;
    min-width: 128px;      /* flex-shrink must NOT shrink the image column */
    flex-shrink: 0;
    height: 155px;
    overflow: hidden;
    position: relative;
  }

  .product-card-img {
    width: 128px;
    height: 155px;
    object-fit: cover;
    aspect-ratio: unset;
    display: block;
    transition: transform .35s;
  }
  .product-card:hover .product-card-img { transform:scale(1.06); }

  /* Chips stay at top-left of image */
  .product-chip-stack { top:6px; left:6px; flex-direction:row; flex-wrap:wrap; gap:3px; }
  .product-chip { font-size:.58rem; padding:2px 6px; }

  /* Fav overlay: top-right of image */
  .fav-overlay { top:6px; right:6px; width:26px; height:26px; font-size:.75rem; }

  /* Featured overlay: bottom of image */
  .featured-overlay { padding:12px 8px 5px; }
  .featured-overlay-badge { font-size:.6rem; }

  /* Content column */
  /* FIX #2: flex:1 + min-width:0 ensures text column never bleeds behind image */
  .product-card-body {
    flex: 1;
    min-width: 0;
    padding: 11px 10px 11px 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
  }

  .product-card-tag   { font-size:.66rem; margin-bottom:3px; }
  .product-card-name  { font-size:.92rem; margin-bottom:3px; line-height:1.2; }
  .product-card-price { font-size:.88rem; }
  .product-card-unit  { font-size:.68rem; }

  /* Actions: side by side, compact */
  .product-card-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
  }
  .product-card-actions .btn {
    flex: 1;
    padding: 7px 6px;
    font-size: .73rem;
    border-radius: 8px;
  }

  /* ── Other mobile fixes ── */
  .profile-quick-grid { grid-template-columns:repeat(2,1fr); }
  .studio-grid        { grid-template-columns:1fr; }
  .studio-orders-grid { grid-template-columns:1fr; }
  .studio-meta-grid   { grid-template-columns:1fr; }
  .global-notif-grid  { grid-template-columns:1fr; }
  .order-card-top     { flex-direction:column; align-items:flex-start; }
  .detail-review-summary { flex-direction:column; align-items:flex-start; }
  .detail-actions     { flex-direction:column; }
  .detail-actions .btn{ width:100%; }
  .cart-item-card     { grid-template-columns:88px 1fr; }
  .choice-grid        { grid-template-columns:1fr; }
  .auth-card          { padding:26px 18px; }
  .rm-main            { padding:22px 12px 90px; }

  /* Toast: smaller on mobile */
  .custom-toast { font-size:.82rem; padding:10px 18px; max-width:calc(100vw - 24px); }

  /* Featured grid: 1 col */
  .featured-grid { grid-template-columns:1fr; }
  .skeleton-grid { grid-template-columns:1fr; }
}


/* ─────────────────────────────────────────────
  30. RESPONSIVE — SMALL MOBILE (≤400px)
───────────────────────────────────────────── */
@media (max-width:400px) {

  .product-card { grid-template-columns:100px 1fr; }

  .rm-logo .logo-text { font-size:1.1rem; }

  .star-row { gap:5px; }
  .rv-star  { width:42px; height:42px; font-size:1.3rem; }

  .about-hero h1 { font-size:2.2rem; letter-spacing:3px; }
}

/* ── MOBILE QUICK ACCESS (index.html only, above featured) ── */
.mobile-quick-access {
  display: none;            /* hidden on desktop; shown via JS on mobile */
  gap: 10px;
  margin-bottom: 28px;
  flex-wrap: nowrap;
}
.mobile-quick-btn {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  padding: 14px 8px; border-radius: var(--r-lg);
  background: var(--card); border: 1.5px solid var(--honey-dark);
  font-size: .78rem; font-weight: 600; color: var(--text-body);
  text-decoration: none; box-shadow: var(--shadow-sm); transition: all .2s;
  cursor: pointer;
}
.mobile-quick-btn:hover,
.mobile-quick-btn:active { border-color: var(--maroon); color: var(--maroon); background: var(--maroon-pale); }
.mobile-quick-btn .mqb-icon { font-size: 1.3rem; }


/* ── STUDIO COMPACT ORDER CARD (orders.html custom-order cards) ── */
.studio-compact-card {
  display: grid;
  grid-template-columns: 1fr 120px;   /* details left, image right */
  gap: 0;
  background: var(--card); border: 1.5px solid var(--honey-dark);
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-sm); margin-bottom: 14px;
  transition: box-shadow .2s;
}
.studio-compact-card:hover { box-shadow: var(--shadow-md); }
.studio-compact-left {
  padding: 18px;
  display: flex; flex-direction: column; gap: 8px;
}
.studio-compact-right {
  width: 120px; flex-shrink: 0;
  align-self: stretch;           /* FIX: stretch to full card height */
  overflow: hidden; position: relative;
  min-height: 170px;             /* FIX: guarantee minimum height */
}
.studio-compact-img {
  width: 100%;
  height: 100%;
  min-height: 170px;             /* FIX: must match parent min-height */
  object-fit: cover; display: block;
  transition: transform .4s;
}
.studio-compact-card:hover .studio-compact-img { transform: scale(1.05); }
.studio-compact-no-img {
  width: 100%; height: 100%; min-height: 170px;
  background: var(--honey-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.2rem;
}
.studio-compact-actions { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 4px; }

@media (max-width: 480px) {
  .studio-compact-card { grid-template-columns: 1fr 100px; }
  .studio-compact-right { width: 100px; }
}

/* ════════════════════════════════════════
   DARK MODE — Night Cafe Theme
   Applied via html.dark-mode class (set in <head> script)
   Default: light (warm honey)
   ════════════════════════════════════════ */
html.dark-mode {
  --honey:      #1C1510;
  --honey-2:    #2A1D12;
  --honey-dark: #3D2C1C;
  --card:       #231A0D;
  --card-alt:   #2A1E0F;
  --amber-pale: #3B2A0E;
  --maroon-pale:#3D1018;
  --text-dark:  #F0E6D0;
  --text-body:  #D5C4A4;
  --text-muted: #A08A68;
  --grey:       #806A50;
  --grey-2:     #4A3828;
  --shadow-sm:  0 2px 12px rgba(0,0,0,.35);
  --shadow-md:  0 6px 28px rgba(0,0,0,.45);
  --shadow-lg:  0 16px 52px rgba(0,0,0,.55);
}
html.dark-mode body { background: var(--honey); color: var(--text-body); }
html.dark-mode .rm-navbar {
  background: rgba(28,21,16,.97);
  border-bottom-color: var(--honey-dark);
}
html.dark-mode .rm-mobile-menu { background: var(--honey); }
html.dark-mode .cafe-strip  { background: #100C06; }
html.dark-mode .rm-footer   { background: #100C06; }
html.dark-mode .rm-input    { background: var(--card); color: var(--text-dark); border-color: var(--honey-dark); }
html.dark-mode .rm-card,
html.dark-mode .rm-card-amber,
html.dark-mode .featured-card,
html.dark-mode .product-card,
html.dark-mode .cart-item-card,
html.dark-mode .cart-summary-card,
html.dark-mode .order-card-wrap,
html.dark-mode .studio-compact-card,
html.dark-mode .rv-item-card,
html.dark-mode .notif-card,
html.dark-mode .global-notif-card,
html.dark-mode .fscroll-card,
html.dark-mode .review-card-display { background: var(--card); border-color: var(--honey-dark); }
html.dark-mode .rm-carousel-shell { box-shadow: 0 16px 52px rgba(0,0,0,.6); }

/* FIX: --maroon isn't remapped for dark mode, so anything using it as
   plain text/border on a dark card (rather than as a solid fill) reads
   with poor contrast. Retint those specific cases to the warm amber
   accent that's already used elsewhere in dark mode. */
html.dark-mode .combo-zone-quick h3 { color: var(--amber-light); }

/* ── Contact / About / Dessert Studio: heading contrast fix ──
   These headings inherit the sitewide h1/h2/h3 rule, which uses a
   fixed --maroon that isn't remapped for dark mode. Scoped overrides
   here (rather than a blanket html.dark-mode h1,h2,h3 rule) so the
   intentionally-white Dessert Studio hero-card heading is untouched. */
html.dark-mode .contact-hero h1,
html.dark-mode .contact-card h2,
html.dark-mode .about-hero h1,
html.dark-mode .story-card h2,
html.dark-mode .studio-hero h1,
html.dark-mode .studio-form-title,
html.dark-mode .studio-detail-title,
html.dark-mode .section-title,
html.dark-mode .studio-quote-price {
  color: var(--amber-light);
}

/* Dessert Studio topbar — standalone page, no shared navbar, so its
   background was hardcoded rather than reusing the navbar's own
   dark-mode override. */
/* Dessert Studio pages have no hamburger drawer, so their theme
   toggle must stay visible on small screens too — unlike the main
   navbar's toggle, which moves into the drawer below 600px instead. */
.studio-topbar .theme-toggle-btn { display:flex !important; }

html.dark-mode .studio-topbar {
  background: rgba(28,21,16,.95);
  border-bottom-color: var(--honey-dark);
}
html.dark-mode .btn-outline {
  color: var(--amber-light);
  border-color: var(--amber-light);
}
html.dark-mode .btn-outline:hover { background: rgba(224,168,76,.14); }
html.dark-mode .btn-ghost:hover {
  border-color: var(--amber-light);
  color: var(--amber-light);
}
html.dark-mode .auth-card,
html.dark-mode .studio-form-card,
html.dark-mode .studio-detail-content,
html.dark-mode .detail-desc-card { background: var(--card); }
html.dark-mode .combo-zone-studio { background: #0F0905; }
html.dark-mode .guest-cart-banner { background: var(--amber-pale); }
html.dark-mode .category-label::before,
html.dark-mode .category-label::after { background: var(--honey-dark); }
html.dark-mode .rm-search-bar input { background: var(--card); color: var(--text-dark); border-color: var(--honey-dark); }
html.dark-mode .cat-chip { background: var(--card); border-color: var(--honey-dark); }
html.dark-mode .qty-selector { border-color: var(--honey-dark); }
html.dark-mode .skeleton-card { background: var(--card); }
html.dark-mode .about-page,
html.dark-mode .contact-page,
html.dark-mode .studio-page { background: var(--honey); }

/* Theme toggle button */
.theme-toggle-btn {
  background: none; border: 1.5px solid var(--honey-dark);
  border-radius: 50%; width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 1rem; transition: all .2s;
  flex-shrink: 0; color: var(--text-body);
}
.theme-toggle-btn:hover { border-color: var(--amber); background: var(--amber-pale); }


/* ── MOBILE NAVBAR OVERFLOW FIX (Fix #4) ──
   On small phones, theme toggle and Register hidden from nav bar.
   Both are accessible via hamburger menu. */
@media (max-width: 600px) {
  .theme-toggle-btn { display: none; }      /* in hamburger drawer instead */
  .nav-register-btn { display: none; }      /* in hamburger drawer instead */
  /* Tighten up remaining nav actions */
  .rm-nav-actions { gap: 5px; }
  .rm-nav-actions .btn-sm { padding: 8px 14px; font-size: .8rem; }
}

/* ── EXPLORE MENU CARD (index.html — replaces 3-button strip) ── */
.explore-menu-wrap {
  display: none;            /* hidden desktop; shown by JS on mobile */
  margin-bottom: 28px;
}
.explore-menu-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: var(--card);
  border: 1.5px solid var(--honey-dark);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  width: 100%;
}
.explore-card-info { min-width: 0; }
.explore-card-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem; font-weight: 700;
  color: var(--maroon); margin-bottom: 4px;
}
.explore-card-desc {
  font-size: .82rem; color: var(--text-muted);
  line-height: 1.5;
}
@media (max-width: 900px) {
  .explore-menu-wrap { display: flex; }
  /* Hide old mobile quick access if still present */
  .mobile-quick-access { display: none !important; }
}

/* ── FIX 3: Dark mode logo switching ──
   .rm-logo-light shown by default, hidden in dark mode
   .rm-logo-dark  hidden by default, shown in dark mode        */
.rm-logo-light { display: block !important; }
.rm-logo-dark  { display: none  !important; }

html.dark-mode .rm-logo-light { display: none  !important; }
html.dark-mode .rm-logo-dark  { display: block !important; }

/* ════════════════════════════════════════
   HOMEPAGE TESTIMONIALS MARQUEE (Fix #4)
   ════════════════════════════════════════ */
.testimonials-section { margin: 48px 0 0; }
.testimonials-marquee-outer {
  overflow: hidden;
  padding: 12px 0 16px;
  /* Fade edges for a polished infinite feel */
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 7%, black 93%, transparent 100%);
  mask-image:          linear-gradient(to right, transparent 0, black 7%, black 93%, transparent 100%);
}
.testimonials-marquee-track {
  display: flex;
  gap: 18px;
  width: max-content;
  animation: marqueeScroll 38s linear infinite;
}
.testimonials-marquee-track:hover { animation-play-state: paused; }
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }  /* -50% because cards are duplicated */
}
.testimonial-card {
  min-width: 270px;
  max-width: 290px;
  background: var(--card);
  border: 1.5px solid var(--honey-dark);
  border-radius: var(--r-lg);
  padding: 20px 18px;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
  transition: box-shadow .2s;
}
.testimonial-card:hover { box-shadow: var(--shadow-md); }
.testimonial-stars { font-size: .95rem; margin-bottom: 8px; }
.testimonial-text {
  font-size: .86rem; color: var(--text-body);
  line-height: 1.75; margin-bottom: 12px;
  font-style: italic;
  display: -webkit-box; -webkit-line-clamp: 4;
  -webkit-box-orient: vertical; overflow: hidden;
}
.testimonial-footer { display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; }
.testimonial-name   { font-size: .82rem; font-weight: 700; color: var(--maroon); }
.testimonial-product{ font-size: .72rem; color: var(--text-muted); margin-top: 2px; }
.testimonial-date   { font-size: .7rem; color: var(--grey); flex-shrink: 0; }

/* Rating-only testimonials (no text) */
.testimonial-rating-only {
  font-size: .82rem; color: var(--text-muted);
  font-style: italic; margin-bottom: 12px;
  min-height: 3.5em;
}

/* Coupon viewer overlay (Fix #5) */
.coupon-viewer-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.6);
  display: none;
  align-items: center; justify-content: center;
  padding: 16px;
}
.coupon-viewer-overlay.active { display: flex; }
.coupon-viewer-box {
  background: var(--card);
  border-radius: var(--r-xl);
  padding: 26px;
  max-width: 480px; width: 100%;
  max-height: 80vh; overflow-y: auto;
  box-shadow: var(--shadow-lg);
}
.coupon-viewer-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 18px;
}
.coupon-viewer-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem; color: var(--maroon);
}
.coupon-item {
  border: 1.5px solid var(--honey-dark);
  border-radius: var(--r-md);
  padding: 16px;
  margin-bottom: 12px;
  background: var(--honey);
  transition: border-color .2s;
}
.coupon-item:hover { border-color: var(--amber); }
.coupon-item-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.coupon-discount-badge {
  font-size: .72rem; color: var(--amber-dark); font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; margin-bottom: 3px;
}
.coupon-item-title {
  font-family: 'Playfair Display', serif;
  font-size: 1rem; color: var(--maroon); margin-bottom: 3px;
}
.coupon-item-desc { font-size: .8rem; color: var(--text-muted); margin-bottom: 8px; line-height: 1.5; }
.coupon-code-pill {
  display: inline-block; background: var(--amber-pale);
  color: var(--maroon); font-weight: 800; font-size: .9rem;
  letter-spacing: 2px; padding: 4px 14px; border-radius: var(--r-sm);
}
.coupon-min-note { font-size: .72rem; color: var(--text-muted); margin-top: 4px; }