/* ================================================================
   MIDAURA — Design System v5 "Artisan Luxury"
   Single source of truth — no duplicate selectors
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

/* ── VARIABLES ──────────────────────────────────────────────── */
:root {
  --ivory:        #FAFAF5;  --ivory-dk:    #F2EDE0;
  --cream:        #EDE0CC;  --cream-dk:    #E3D1B5;
  --sand:         #D4B896;
  --walnut:       #2C1810;  --walnut-lt:   #5C3C2C;
  --amber:        #C8831A;  --amber-dk:    #A56412;
  --amber-lt:     #FDF3E0;  --amber-glow:  rgba(200,131,26,.14);
  --forest:       #1E4032;  --forest-lt:   #EDF4F0;  --forest-dk: #142D23;
  --saffron:      #C8831A;  --saffron-dk:  #A56412;  --saffron-lt:#FDF3E0;
  --plum:         #6B2D5E;  --plum-dk:     #501F47;  --plum-lt:   #F5EEF4;
  --dark:         #1C0E07;  --green:       #2A6B3A;  --red:       #C0392B;
  --white:        #FFFFFF;
  --text:         #1C0E07;  --text-mid:    #5A3A28;  --text-light:#9A7A68;
  --border:       #DDD0BF;
  --shadow-sm:    0 2px 12px rgba(44,24,16,.07);
  --shadow-md:    0 8px 32px rgba(44,24,16,.11);
  --shadow-lg:    0 24px 72px rgba(44,24,16,.15);
  --shadow-amber: 0 8px 32px rgba(200,131,26,.25);
  --radius-sm:6px; --radius-md:12px; --radius-lg:20px; --radius-xl:36px;
  --font-serif:  'Playfair Display', Georgia, serif;
  --font-body:   'Plus Jakarta Sans', 'DM Sans', sans-serif;
  --transition:  all .22s cubic-bezier(.4,0,.2,1);
  --topbar-h:    38px;  --header-h:    72px;
  --header-total:calc(var(--topbar-h) + var(--header-h));
}

/* ── RESET ──────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html  { scroll-behavior:smooth; }
body  { font-family:var(--font-body); background:var(--ivory); color:var(--text); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img   { max-width:100%; height:auto; display:block; }
a     { color:inherit; text-decoration:none; }
button,input,select,textarea { font-family:inherit; }
ul    { list-style:none; }

/* ── TYPOGRAPHY ─────────────────────────────────────────────── */
h1,h2,h3 { font-family:var(--font-serif); font-weight:600; line-height:1.15; color:var(--walnut); }
h1 { font-size:clamp(2.2rem,5vw,3.8rem); }
h2 { font-size:clamp(1.6rem,3vw,2.6rem); }
h3 { font-size:clamp(1.2rem,2vw,1.7rem); }
h4 { font-size:1.05rem; font-weight:700; color:var(--walnut); font-family:var(--font-body); }
p  { color:var(--text-mid); line-height:1.75; }
.serif { font-family:var(--font-serif); }

/* ── LAYOUT ─────────────────────────────────────────────────── */
.container    { max-width:1240px; margin:0 auto; padding:0 24px; width:100%; box-sizing:border-box; }
.container-sm { max-width:820px;  margin:0 auto; padding:0 24px; }
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.grid-5 { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.flex         { display:flex; }
.flex-center  { display:flex; align-items:center; justify-content:center; }
.flex-between { display:flex; align-items:center; justify-content:space-between; }
.flex-wrap    { flex-wrap:wrap; }
.gap-8{gap:8px;} .gap-12{gap:12px;} .gap-16{gap:16px;} .gap-24{gap:24px;}
.section    { padding:72px 0; }
.section-sm { padding:44px 0; }

/* ── TOPBAR — animated ticker ───────────────────────────────── */
.topbar {
  background:var(--walnut);
  color:rgba(255,255,255,.82);
  font-size:11.5px; font-weight:500;
  position:sticky; top:0; z-index:1010;
  height:var(--topbar-h); overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.topbar-ticker-wrap { height:100%; display:flex; align-items:center; overflow:hidden; }
.topbar-ticker {
  display:flex; align-items:center; white-space:nowrap;
  animation:ticker-scroll 32s linear infinite;
}
.topbar-ticker:hover { animation-play-state:paused; }
.topbar-ticker span { padding:0 16px; font-size:11px; color:rgba(255,255,255,.75); letter-spacing:.3px; }
.topbar-sep { color:var(--amber) !important; font-size:8px !important; padding:0 4px !important; opacity:.7; }
@keyframes ticker-scroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
/* legacy aliases */
.topbar-inner  { max-width:1240px; margin:0 auto; padding:0 24px; height:100%; display:flex; align-items:center; }
.topbar-left   { display:flex; align-items:center; gap:6px; white-space:nowrap; overflow:hidden; font-size:11px; }
.topbar-right  { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.topbar-marquee{ font-size:11px; letter-spacing:.3px; color:rgba(255,255,255,.65); }
.topbar-selector { position:relative; }
.topbar-btn { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.85); padding:5px 10px; border-radius:6px; font-size:11px; font-weight:600; cursor:pointer; display:flex; align-items:center; gap:5px; transition:background .2s; white-space:nowrap; }
.topbar-btn:hover { background:rgba(255,255,255,.15); }
.topbar-btn .arrow { font-size:8px; opacity:.6; }
.topbar-drop { display:none; position:absolute; right:0; top:calc(100% + 8px); background:var(--white); border-radius:12px; box-shadow:0 12px 48px rgba(0,0,0,.18); min-width:200px; z-index:3000; border:1px solid var(--border); overflow:hidden; }
.topbar-drop.open { display:block; animation:fadeDown .15s ease; }
@keyframes fadeDown { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} }
.topbar-drop-item { width:100%; background:none; border:none; padding:10px 16px; text-align:left; display:flex; align-items:center; gap:10px; font-size:13px; cursor:pointer; transition:background .15s; color:var(--text); }
.topbar-drop-item:hover { background:var(--ivory-dk); }
.topbar-drop-item strong { min-width:32px; color:var(--amber); font-size:12px; }
.topbar-drop-item span   { color:var(--text-light); font-size:12px; }
.topbar-drop-item.active-currency,.topbar-drop-item.active-lang { background:var(--amber-lt); color:var(--amber-dk); }

/* ── HEADER ─────────────────────────────────────────────────── */
.header {
  position:sticky; top:var(--topbar-h); z-index:1000;
  background:rgba(250,250,245,.97);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--cream-dk);
  height:var(--header-h);
  transition:box-shadow .25s, border-color .25s;
}
.header.scrolled { box-shadow:0 4px 28px rgba(44,24,16,.09); border-color:transparent; }
.header-inner { display:flex; align-items:center; height:100%; max-width:1240px; margin:0 auto; padding:0 24px; gap:22px; }
.logo { display:flex; align-items:center; flex-shrink:0; text-decoration:none; margin-right:8px; }
.logo img { height:38px; width:auto; display:block; object-fit:contain; }
.nav { display:flex; align-items:center; gap:2px; flex:1; }
.nav a { padding:7px 14px; font-size:13.5px; font-weight:600; color:var(--text-mid); border-radius:8px; transition:var(--transition); white-space:nowrap; letter-spacing:.1px; }
.nav a:hover { color:var(--walnut); background:var(--ivory-dk); }
.nav a.active { color:var(--amber-dk); background:var(--amber-lt); }
.header-search { flex:1; max-width:260px; min-width:0; display:flex; align-items:center; background:var(--ivory-dk); border:1.5px solid transparent; border-radius:28px; padding:8px 16px; gap:8px; transition:border-color .2s,background .2s,max-width .3s,box-shadow .2s; margin-left:auto; }
.header-search:focus-within { border-color:var(--amber); background:#fff; max-width:320px; box-shadow:0 0 0 4px var(--amber-glow); }
.header-search input { border:none; background:transparent; outline:none; font-size:13px; width:100%; color:var(--text); }
.header-search input::placeholder { color:var(--text-light); }
.header-search svg { color:var(--text-light); flex-shrink:0; }
.header-actions { display:flex; align-items:center; gap:2px; flex-shrink:0; }
.btn-icon { width:42px; height:42px; border-radius:12px; border:none; background:transparent; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text-mid); transition:var(--transition); position:relative; }
.btn-icon:hover { background:var(--ivory-dk); color:var(--walnut); }
.cart-badge { position:absolute; top:4px; right:4px; min-width:18px; height:18px; background:var(--amber); color:#fff; font-size:9px; font-weight:700; border-radius:9px; display:flex; align-items:center; justify-content:center; padding:0 4px; border:2px solid var(--ivory); transition:transform .2s; }
.cart-badge:empty { display:none; }
.hamburger { display:none; width:42px; height:42px; border:none; background:transparent; cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px; border-radius:10px; }
.hamburger:hover { background:var(--ivory-dk); }
.hamburger span { display:block; width:20px; height:2px; background:var(--text); border-radius:2px; transition:var(--transition); }

/* ── SEARCH DROPDOWN ────────────────────────────────────────── */
#search-overlay { position:fixed; inset:0; background:rgba(28,14,7,.4); z-index:990; display:none; }
#search-dropdown { display:none; position:fixed; top:var(--header-total); left:0; right:0; background:#fff; border-bottom:2px solid var(--cream-dk); z-index:995; padding:20px 24px; max-height:68vh; overflow-y:auto; box-shadow:var(--shadow-lg); }
.search-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px; }
.search-item { display:flex; align-items:center; gap:12px; padding:12px; border-radius:10px; border:1px solid var(--border); background:var(--ivory); transition:var(--transition); cursor:pointer; }
.search-item:hover { border-color:var(--amber); background:var(--amber-lt); }
.search-item img { width:50px; height:50px; object-fit:contain; background:var(--ivory-dk); border-radius:8px; padding:4px; flex-shrink:0; }

/* ── MOBILE NAV ─────────────────────────────────────────────── */
.mobile-nav { position:fixed; top:0; right:-100%; width:320px; max-width:90vw; height:100vh; background:#fff; z-index:2000; box-shadow:var(--shadow-lg); transition:right .3s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column; overflow-y:auto; }
.mobile-nav.open { right:0; }
.mobile-nav-overlay { position:fixed; inset:0; background:rgba(28,14,7,.45); z-index:1999; opacity:0; pointer-events:none; transition:opacity .3s; }
.mobile-nav-overlay.open { opacity:1; pointer-events:all; }
.mobile-nav-head { display:flex; align-items:center; justify-content:space-between; padding:20px; border-bottom:1px solid var(--cream-dk); }
.mobile-nav-body a { display:flex; align-items:center; gap:12px; padding:15px 20px; font-size:14.5px; font-weight:600; border-bottom:1px solid var(--ivory-dk); transition:var(--transition); color:var(--text); }
.mobile-nav-body a:hover { background:var(--amber-lt); color:var(--amber-dk); padding-left:26px; }
.announcement-bar { background:var(--forest); color:rgba(255,255,255,.85); text-align:center; padding:10px 24px; font-size:12px; font-weight:500; }
.announcement-bar a { color:var(--amber); font-weight:700; }

/* ── BUTTONS ─────────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 28px; border-radius:50px; font-size:14px; font-weight:700; border:2px solid transparent; cursor:pointer; transition:var(--transition); white-space:nowrap; letter-spacing:.2px; }
.btn:disabled { opacity:.55; cursor:not-allowed; pointer-events:none; }
.btn-primary  { background:var(--amber); color:#fff; border-color:var(--amber); box-shadow:0 4px 20px rgba(200,131,26,.28); }
.btn-primary:hover { background:var(--amber-dk); border-color:var(--amber-dk); transform:translateY(-2px); box-shadow:var(--shadow-amber); }
.btn-plum     { background:var(--walnut); color:#fff; border-color:var(--walnut); }
.btn-plum:hover    { background:var(--walnut-lt); transform:translateY(-2px); box-shadow:0 8px 28px rgba(44,24,16,.3); }
.btn-outline  { background:transparent; color:var(--walnut); border-color:var(--walnut); }
.btn-outline:hover { background:var(--walnut); color:#fff; }
.btn-ghost    { background:var(--ivory-dk); color:var(--text-mid); border-color:var(--ivory-dk); }
.btn-ghost:hover { background:var(--cream-dk); color:var(--walnut); }
.btn-ghost-dark { background:rgba(44,24,16,.07); border:1.5px solid rgba(44,24,16,.2); color:var(--walnut); }
.btn-ghost-dark:hover { background:rgba(44,24,16,.12); border-color:var(--walnut); }
.btn-s   { background:var(--ivory-dk); color:var(--text-mid); border:1px solid var(--cream-dk); }
.btn-s:hover { background:var(--cream-dk); }
.btn-sm  { padding:8px 18px; font-size:12.5px; }
.btn-lg  { padding:15px 38px; font-size:15px; }
.btn-full{ width:100%; }
.btn-loading { position:relative; color:transparent !important; }
.btn-loading::after { content:''; position:absolute; width:16px; height:16px; border:2px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; }

/* ── PRODUCT CARD ───────────────────────────────────────────── */
.product-card { background:#fff; border-radius:var(--radius-lg); border:1.5px solid var(--cream-dk); overflow:hidden; display:flex; flex-direction:column; transition:var(--transition); position:relative; }
.product-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:var(--amber); }
.product-card-img { position:relative; aspect-ratio:1; overflow:hidden; background:var(--ivory-dk); }
.product-card-img img { width:100%; height:100%; object-fit:contain; padding:16px; transition:transform .55s cubic-bezier(.4,0,.2,1); }
.product-card:hover .product-card-img img { transform:scale(1.08); }
.product-card-badges { position:absolute; top:12px; left:12px; display:flex; flex-direction:column; gap:5px; }
.badge { display:inline-flex; align-items:center; padding:3px 8px; border-radius:6px; font-size:9.5px; font-weight:800; letter-spacing:.3px; text-transform:uppercase; }
.badge-featured { background:var(--amber); color:#fff; }
.badge-sale     { background:var(--red); color:#fff; }
.badge-oos      { background:rgba(44,24,16,.65); color:#fff; }
.wishlist-btn { position:absolute; top:12px; right:12px; width:34px; height:34px; border-radius:50%; background:#fff; border:1.5px solid var(--cream-dk); cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--text-light); transition:var(--transition); }
.wishlist-btn:hover,.wishlist-btn.active { background:var(--red); color:#fff; border-color:var(--red); }
.quick-add { position:absolute; bottom:0; left:0; right:0; background:var(--walnut); color:#fff; border:none; padding:11px; font-size:12px; font-weight:700; cursor:pointer; transform:translateY(100%); transition:transform .28s cubic-bezier(.4,0,.2,1); }
.product-card:hover .quick-add { transform:translateY(0); }
.product-card-body { padding:16px; flex:1; display:flex; flex-direction:column; gap:7px; }
.product-card-cat  { font-size:9.5px; font-weight:700; color:var(--sand); text-transform:uppercase; letter-spacing:1px; }
.product-card-name { font-size:14px; font-weight:600; color:var(--walnut); line-height:1.4; font-family:var(--font-serif); }
.product-card-name a:hover { color:var(--amber-dk); }
.product-card-desc { font-size:12px; color:var(--text-light); line-height:1.55; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.product-card-rating { display:flex; align-items:center; gap:5px; }
.stars { color:var(--amber); font-size:12px; letter-spacing:1px; }
.rating-count { font-size:11px; color:var(--text-light); }
.product-card-price { margin-top:auto; display:flex; align-items:center; gap:7px; flex-wrap:wrap; padding-top:8px; border-top:1px solid var(--ivory-dk); }
.price-sale { font-weight:700; font-size:15px; color:var(--walnut); font-family:var(--font-serif); }
.price-mrp  { font-size:12px; color:var(--text-light); text-decoration:line-through; }
.price-off  { font-size:11px; font-weight:700; color:var(--forest); background:var(--forest-lt); padding:2px 6px; border-radius:4px; }
.price-gst  { font-size:10px; color:var(--text-light); margin-left:auto; }

/* ── HERO CAROUSEL ──────────────────────────────────────────── */
.hero-carousel { position:relative; overflow:hidden; }
.hero-slide { position:absolute; inset:0; opacity:0; transition:opacity .7s ease; background-size:cover; background-position:center; }
.hero-slide.active { opacity:1; position:relative; }
.hero-slide-overlay { position:absolute; inset:0; background:linear-gradient(to right,rgba(28,14,7,.75) 0%,rgba(28,14,7,.25) 100%); }
.hero-slide-content { position:relative; z-index:1; padding:100px 0; }
.hero-slide-content h1 { color:#fff; margin-bottom:16px; }
.hero-slide-content p  { color:rgba(255,255,255,.8); margin-bottom:28px; max-width:480px; }
.hero-dots { position:absolute; bottom:24px; left:50%; transform:translateX(-50%); display:flex; gap:8px; z-index:10; }
.hero-dot { width:8px; height:8px; border-radius:50%; border:none; background:rgba(255,255,255,.4); cursor:pointer; transition:all .3s; }
.hero-dot.active { width:24px; border-radius:4px; background:#fff; }
.hero-arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:10; width:48px; height:48px; border-radius:50%; border:2px solid rgba(255,255,255,.4); background:rgba(0,0,0,.3); color:#fff; font-size:24px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s; }
.hero-arrow:hover { background:rgba(0,0,0,.6); }
.hero-prev { left:20px; }
.hero-next { right:20px; }

/* ── HERO DEFAULT (split layout) ────────────────────────────── */
.hero {
  position:relative;
  background:linear-gradient(140deg,#FAF5EB 0%,#F5EDD8 45%,#EDE3CD 100%);
  overflow:visible;
}
.hero::before { content:''; position:absolute; inset:0; z-index:0; background-image:radial-gradient(circle,rgba(200,131,26,.08) 1px,transparent 1px); background-size:32px 32px; pointer-events:none; }
.hero .container { position:relative; z-index:1; }
.hero-split { display:grid; grid-template-columns:1fr 440px; align-items:center; gap:40px; padding:60px 0; min-height:calc(100vh - var(--header-total) - 2px); }
.hero-content { position:relative; z-index:1; }
.hero-tag { display:inline-flex; align-items:center; gap:8px; background:#fff; border:1.5px solid var(--amber); border-radius:24px; padding:6px 16px; font-size:10.5px; font-weight:700; color:var(--amber-dk); text-transform:uppercase; letter-spacing:1.2px; margin-bottom:24px; box-shadow:0 2px 16px rgba(200,131,26,.12); }
.hero-tag-dot { width:7px; height:7px; border-radius:50%; background:var(--amber); animation:pulse-dot 2s ease-in-out infinite; }
@keyframes pulse-dot { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.5);opacity:.6} }
.hero h1 { font-size:clamp(2.8rem,5.5vw,5rem); font-weight:600; color:var(--walnut); line-height:1.06; margin-bottom:20px; letter-spacing:-.5px; }
.hero h1 em { color:var(--amber-dk); font-style:italic; }
.hero p { font-size:16px; color:var(--text-mid); margin-bottom:34px; line-height:1.75; max-width:460px; }
.hero-btns { display:flex; gap:14px; flex-wrap:wrap; }
.hero-trust { display:flex; align-items:center; gap:20px; margin-top:40px; padding-top:28px; border-top:1px solid rgba(44,24,16,.1); flex-wrap:wrap; }
.hero-trust-item { display:flex; flex-direction:column; gap:2px; }
.hero-trust-num  { font-family:var(--font-serif); font-size:1.5rem; font-weight:700; color:var(--amber-dk); line-height:1; }
.hero-trust-item span:last-child { font-size:10px; color:var(--text-light); font-weight:700; text-transform:uppercase; letter-spacing:.6px; }
.hero-trust-sep  { width:1px; height:32px; background:rgba(44,24,16,.12); flex-shrink:0; }
.hero-visual { position:relative; display:flex; align-items:center; justify-content:center; }
.hero-img-ring { width:100%; max-width:420px; aspect-ratio:1; border-radius:50%; overflow:hidden; background:radial-gradient(circle,var(--amber-lt) 0%,var(--ivory-dk) 100%); border:3px solid rgba(200,131,26,.2); box-shadow:0 24px 80px rgba(200,131,26,.18); display:flex; align-items:center; justify-content:center; margin:0 auto; }
.hero-img-ring img { width:85%; height:85%; object-fit:contain; filter:drop-shadow(0 12px 40px rgba(44,24,16,.15)); }
.hero-badge { position:absolute; background:#fff; border-radius:24px; padding:8px 14px; font-size:11px; font-weight:700; color:var(--walnut); box-shadow:var(--shadow-md); white-space:nowrap; border:1px solid var(--cream-dk); z-index:2; animation:float-badge 4s ease-in-out infinite; }
.hero-badge-1 { top:10%;  left:-5%;  animation-delay:0s; }
.hero-badge-2 { bottom:15%; left:-8%; animation-delay:1.3s; }
.hero-badge-3 { top:5%;   right:-5%; animation-delay:2.6s; }
@keyframes float-badge { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

/* ── HERO BACKGROUND ORBS ───────────────────────────────────── */
.hero-bg-orb { position:absolute; border-radius:50%; pointer-events:none; z-index:0; filter:blur(80px); }
.hero-orb-1  { width:500px; height:500px; top:-100px; right:-50px; background:radial-gradient(circle,rgba(200,131,26,.12) 0%,transparent 70%); }
.hero-orb-2  { width:360px; height:360px; bottom:-80px; left:20%; background:radial-gradient(circle,rgba(107,45,94,.08) 0%,transparent 70%); }

/* ── SEMANTIC SECTION ALIASES ────────────────────────────────── */
.home-cats     { background:var(--ivory); }
.reviews-section { background:var(--ivory); }

/* ── USP MARQUEE STRIP ──────────────────────────────────────── */
.usp-marquee-wrap { background:var(--forest); overflow:hidden; height:44px; display:flex; align-items:center; border-top:1px solid rgba(255,255,255,.05); border-bottom:1px solid rgba(255,255,255,.05); }
.usp-marquee-track { display:flex; align-items:center; white-space:nowrap; animation:usp-scroll 40s linear infinite; }
.usp-marquee-wrap:hover .usp-marquee-track { animation-play-state:paused; }
.usp-marquee-item { font-size:11.5px; font-weight:600; color:rgba(255,255,255,.82); padding:0 18px; letter-spacing:.3px; white-space:nowrap; }
.usp-marquee-sep  { color:var(--amber); font-size:8px; padding:0 4px; opacity:.7; flex-shrink:0; }
@keyframes usp-scroll { 0%{transform:translateX(0)} 100%{transform:translateX(-33.333%)} }

/* legacy USP bar (for other pages that use it) */
.usp-bar { background:var(--forest); border-top:1px solid rgba(255,255,255,.04); border-bottom:1px solid rgba(255,255,255,.04); }
.usp-bar-inner { display:flex; max-width:1240px; margin:0 auto; padding:0 24px; }
.usp-bar-item { flex:1; display:flex; align-items:center; gap:14px; padding:20px 16px; color:#fff; transition:background .2s; }
.usp-bar-item:hover { background:rgba(255,255,255,.04); }
.usp-bar-divider { width:1px; background:rgba(255,255,255,.1); margin:12px 0; flex-shrink:0; }
.usp-bar-icon { width:44px; height:44px; border-radius:12px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--amber); }
.usp-bar-item strong { font-size:13px; font-weight:700; display:block; line-height:1.3; color:#fff; }
.usp-bar-item span   { font-size:11px; color:rgba(255,255,255,.55); display:block; line-height:1.4; margin-top:2px; }

/* ── SECTION HEAD ───────────────────────────────────────────── */
.section-head { text-align:center; margin-bottom:40px; }
.eyebrow { display:inline-block; font-size:11px; font-weight:700; color:var(--amber-dk); text-transform:uppercase; letter-spacing:2px; margin-bottom:10px; }
.section-head h2 { margin-bottom:12px; }
.section-head p  { max-width:480px; margin:0 auto; }
.home-section-head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:32px; gap:12px; flex-wrap:wrap; }
.home-section-head > div { flex:1; min-width:0; }

/* ── CATEGORY TILES ─────────────────────────────────────────── */
.cat-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:12px; }
.cat-tile { display:flex; flex-direction:column; align-items:center; background:#fff; border:1.5px solid var(--border); border-radius:var(--radius-md); padding:18px 10px 14px; transition:var(--transition); cursor:pointer; text-align:center; text-decoration:none; }
.cat-tile:hover { border-color:var(--amber); box-shadow:var(--shadow-amber); transform:translateY(-3px); }
.cat-tile-img { width:68px; height:68px; border-radius:50%; background:var(--ivory-dk); overflow:hidden; display:flex; align-items:center; justify-content:center; margin-bottom:10px; flex-shrink:0; }
.cat-tile-img img { width:100%; height:100%; object-fit:contain; padding:6px; }
.cat-tile-emoji { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:28px; }
.cat-tile-name  { font-size:12px; font-weight:700; color:var(--walnut); line-height:1.3; margin-bottom:3px; }
.cat-tile-count { font-size:10.5px; color:var(--text-light); font-weight:500; }
/* old cat-strip for products filter */
.cat-strip { display:flex; gap:10px; overflow-x:auto; padding:4px 2px; scrollbar-width:none; }
.cat-strip::-webkit-scrollbar { display:none; }
.cat-chip { display:flex; align-items:center; gap:7px; padding:8px 14px; border-radius:20px; border:1.5px solid var(--cream-dk); background:#fff; font-size:12px; font-weight:600; white-space:nowrap; cursor:pointer; transition:var(--transition); color:var(--text-mid); }
.cat-chip img  { width:22px; height:22px; object-fit:contain; border-radius:4px; }
.cat-chip:hover,.cat-chip.active { background:var(--walnut); color:#fff; border-color:var(--walnut); transform:translateY(-2px); box-shadow:0 6px 20px rgba(44,24,16,.2); }

/* ── FLASH PICKS ────────────────────────────────────────────── */
.home-flash { background:var(--walnut); }
.flash-row  { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px; }
.flash-card { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius-md); overflow:hidden; transition:var(--transition); display:flex; flex-direction:column; }
.flash-card:hover { background:rgba(255,255,255,.13); transform:translateY(-2px); }
.flash-img  { aspect-ratio:1; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.05); overflow:hidden; padding:8px; }
.flash-img img { width:100%; height:100%; object-fit:contain; }
.flash-name { font-size:11.5px; font-weight:600; color:rgba(255,255,255,.9); padding:8px 10px 4px; line-height:1.3; flex:1; }
.flash-foot { display:flex; align-items:center; justify-content:space-between; padding:4px 10px 10px; gap:6px; }
.flash-price{ font-size:13px; font-weight:700; color:var(--amber); }
.flash-add  { width:28px; height:28px; border-radius:50%; border:none; background:var(--amber); color:var(--walnut); font-size:16px; font-weight:900; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:var(--transition); flex-shrink:0; }
.flash-add:hover { background:var(--amber-dk); transform:scale(1.1); }

/* ── RAPID PICKS (legacy alias for flash) ───────────────────── */
.rapid-picks-row { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px; }
.rapid-card { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius-md); overflow:hidden; display:flex; flex-direction:column; }
.rapid-img-wrap { aspect-ratio:1; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:6px; }
.rapid-img-wrap img { width:100%; height:100%; object-fit:contain; }
.rapid-info { padding:8px 10px; }
.rapid-name { font-size:11.5px; font-weight:600; color:var(--walnut); line-height:1.3; margin-bottom:8px; }
.rapid-row  { display:flex; align-items:center; justify-content:space-between; }
.rapid-price{ font-size:13px; font-weight:700; color:var(--amber); }
.rapid-btn  { background:var(--walnut); color:#fff; border:none; padding:6px 10px; border-radius:6px; font-size:11px; font-weight:700; cursor:pointer; display:flex; align-items:center; gap:4px; transition:var(--transition); }
.rapid-btn:hover { background:var(--amber-dk); }

/* ── TRAY CTA ───────────────────────────────────────────────── */
.home-tray-cta { background:linear-gradient(135deg,var(--walnut-lt) 0%,var(--walnut) 100%); padding:72px 0; overflow:hidden; position:relative; }
.home-tray-cta::before { content:''; position:absolute; inset:0; z-index:0; background-image:radial-gradient(circle,rgba(255,255,255,.04) 1px,transparent 1px); background-size:28px 28px; pointer-events:none; }
.tray-cta-inner { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; position:relative; z-index:1; }
.tray-cta-text h2 { color:#fff; font-size:clamp(2rem,3.5vw,3rem); margin-bottom:14px; }
.tray-cta-text h2 em { color:var(--amber); font-style:italic; }
.tray-cta-text p  { color:rgba(255,255,255,.7); margin-bottom:28px; max-width:400px; }
.tray-cta-actions { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.tray-cta-meta    { display:flex; flex-direction:column; gap:4px; }
.tray-cta-meta span { font-size:12px; color:rgba(255,255,255,.55); }
.tray-cta-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.tray-cta-item { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius-md); padding:16px 12px; display:flex; flex-direction:column; align-items:center; gap:8px; transition:var(--transition); text-align:center; }
.tray-cta-item:hover { background:rgba(255,255,255,.14); transform:translateY(-2px); }
.tray-cta-item p { font-size:10.5px; color:rgba(255,255,255,.7); font-weight:600; line-height:1.3; margin:0; }

/* ── WHY SECTION ────────────────────────────────────────────── */
.why-section { background:var(--ivory-dk); }
.why-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.why-card { background:#fff; border-radius:var(--radius-lg); padding:28px 24px; border:1px solid var(--border); text-align:center; transition:var(--transition); }
.why-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--amber); }
.why-icon { font-size:36px; margin-bottom:14px; }
.why-card h4 { margin-bottom:8px; color:var(--walnut); font-size:15px; }
.why-card p  { font-size:13px; color:var(--text-light); margin:0; line-height:1.65; }

/* ── CATEGORY BANNERS ────────────────────────────────────────── */
.cat-banner-mosaic { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.cat-mosaic-card { position:relative; border-radius:var(--radius-lg); overflow:hidden; min-height:180px; display:flex; align-items:flex-end; transition:var(--transition); text-decoration:none; }
.cat-mosaic-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.cat-mosaic-img { position:absolute; right:0; top:0; bottom:0; width:45%; object-fit:contain; padding:16px; opacity:.9; }
.cat-mosaic-body { padding:24px; z-index:1; }
.cat-mosaic-body h3 { font-size:1.2rem; margin-bottom:3px; color:var(--walnut); }
.cat-mosaic-body p  { font-size:12px; color:var(--text-mid); margin-bottom:10px; }
.cat-mosaic-cta { font-size:12px; font-weight:700; color:var(--amber-dk); }
/* old cat-banner-card used on category page */
.cat-banner-card { display:flex; align-items:center; gap:22px; border-radius:20px; padding:28px; border:1px solid var(--cream-dk); transition:var(--transition); text-decoration:none; color:var(--text); background:#fff; }
.cat-banner-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--amber); }
.cat-banner-img { width:72px; height:72px; object-fit:contain; flex-shrink:0; }
.cat-banner-body { flex:1; }
.cat-banner-cta { font-size:13px; font-weight:700; color:var(--amber-dk); }

/* ── REVIEWS ────────────────────────────────────────────────── */
.reviews-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.review-card { background:var(--ivory); border:1.5px solid var(--border); border-radius:var(--radius-lg); padding:24px; transition:var(--transition); display:flex; flex-direction:column; gap:12px; }
.review-card:hover { border-color:var(--amber-dk); box-shadow:var(--shadow-sm); transform:translateY(-2px); }
.review-stars { color:var(--amber); font-size:15px; letter-spacing:1px; }
.review-text  { font-size:13.5px; line-height:1.7; color:var(--text); flex:1; margin:0; }
.review-author{ display:flex; align-items:center; gap:10px; margin-top:auto; }
.review-avatar{ width:38px; height:38px; border-radius:50%; background:var(--plum-lt); color:var(--plum); font-weight:700; font-size:15px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.review-name  { font-weight:700; font-size:13px; color:var(--walnut); }
.review-city  { font-size:11px; color:var(--text-light); }
/* product page review bars */
.rating-bar       { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.rating-bar-label { width:30px; font-size:12px; text-align:right; color:var(--text-light); }
.rating-bar-track { flex:1; height:8px; background:var(--ivory-dk); border-radius:4px; overflow:hidden; }
.rating-bar-fill  { height:100%; background:var(--amber); border-radius:4px; }

/* ── DELIVERY STRIP ─────────────────────────────────────────── */
.delivery-strip { background:var(--walnut); padding:64px 0; }
.delivery-strip-head { text-align:center; margin-bottom:40px; }
.delivery-strip-head h2 { color:#fff; }
.delivery-strip-head p  { max-width:480px; margin:8px auto 0; color:rgba(255,255,255,.6); }
.delivery-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; max-width:900px; margin:0 auto; }
.delivery-card  { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); border-radius:var(--radius-lg); padding:28px 20px; text-align:center; transition:var(--transition); }
.delivery-card:hover { background:rgba(255,255,255,.12); transform:translateY(-3px); }
.delivery-card-icon { font-size:32px; margin-bottom:10px; }
.delivery-card h4 { color:#fff; font-size:14px; margin-bottom:4px; }
.delivery-card p  { color:rgba(255,255,255,.5); font-size:12px; margin:0; }

/* ── INSTAGRAM GRID ─────────────────────────────────────────── */
.ig-section { background:var(--ivory-dk); }
.ig-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; max-width:900px; margin:0 auto; }
.ig-tile { aspect-ratio:1; border-radius:var(--radius-md); overflow:hidden; position:relative; display:block; background:var(--cream); transition:var(--transition); }
.ig-tile:hover { transform:scale(1.03); box-shadow:var(--shadow-md); }
.ig-tile img { width:100%; height:100%; object-fit:cover; transition:transform .3s; display:block; }
.ig-tile:hover img { transform:scale(1.06); }
.ig-tile-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:32px; background:linear-gradient(135deg,var(--cream) 0%,var(--ivory-dk) 100%); }
.ig-tile-overlay { position:absolute; inset:0; background:rgba(0,0,0,0); transition:background .25s; }
.ig-tile:hover .ig-tile-overlay { background:rgba(0,0,0,.25); }

/* ── NEWSLETTER ─────────────────────────────────────────────── */
.newsletter-section { background:linear-gradient(135deg,var(--amber-lt) 0%,#fff 100%); padding:64px 0; }
.newsletter-inner { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.newsletter-text h2 { margin-bottom:12px; }
.newsletter-text p  { color:var(--text-mid); max-width:360px; }
.newsletter-form { display:flex; border-radius:50px; overflow:hidden; box-shadow:var(--shadow-md); border:2px solid var(--cream-dk); background:#fff; }
.newsletter-form input  { flex:1; border:none; padding:14px 20px; font-size:14px; outline:none; background:transparent; color:var(--text); min-width:0; }
.newsletter-form button { border:none; background:var(--amber); color:#fff; padding:14px 24px; font-size:14px; font-weight:700; cursor:pointer; border-radius:0 50px 50px 0; white-space:nowrap; transition:background .2s; flex-shrink:0; }
.newsletter-form button:hover { background:var(--amber-dk); }
.newsletter-form-wrap { display:flex; flex-direction:column; }
.newsletter-note { font-size:12px; color:var(--text-light); margin-top:10px; }

/* ── CARD ───────────────────────────────────────────────────── */
.card { background:#fff; border-radius:var(--radius-md); border:1px solid var(--cream-dk); padding:24px; }
.card-elevated { background:#fff; border-radius:var(--radius-md); box-shadow:var(--shadow-md); padding:28px; }

/* ── TRAY BUILDER ───────────────────────────────────────────── */
.tray-builder { display:grid; grid-template-columns:1fr 300px; gap:28px; align-items:start; width:100%; min-width:0; }
.tray-builder > div { min-width:0; overflow:hidden; }
.tray-products-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; min-width:0; }
.tray-product-card { background:#fff; border:2px solid var(--cream-dk); border-radius:var(--radius-md); padding:14px; cursor:pointer; transition:var(--transition); text-align:center; position:relative; min-width:0; overflow:hidden; }
.tray-product-card:hover { border-color:var(--amber); transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.tray-product-card.selected { border-color:var(--walnut); background:var(--amber-lt); }
.tray-product-card img { width:72px; height:72px; object-fit:contain; margin:0 auto 8px; }
.tray-product-card .name { font-size:11px; font-weight:600; line-height:1.35; margin-bottom:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--walnut); }
.tray-qty-ctrl { display:flex; align-items:center; justify-content:center; gap:6px; }
.tray-qty-btn  { width:26px; height:26px; border-radius:50%; border:1.5px solid var(--cream-dk); background:var(--ivory-dk); cursor:pointer; font-size:14px; font-weight:700; display:flex; align-items:center; justify-content:center; transition:var(--transition); }
.tray-qty-btn:hover { background:var(--walnut); color:#fff; border-color:var(--walnut); }
.tray-qty-num { font-size:14px; font-weight:700; min-width:20px; text-align:center; }
.tray-summary { min-width:0; width:100%; max-width:100%; background:#fff; border:1.5px solid var(--cream-dk); border-radius:var(--radius-lg); padding:22px; position:sticky; top:calc(var(--header-total) + 16px); overflow:hidden; word-break:break-word; }
.tray-capacity-bar  { height:10px; background:var(--ivory-dk); border-radius:5px; overflow:hidden; margin:12px 0; }
.tray-capacity-fill { height:100%; background:linear-gradient(90deg,var(--amber),var(--walnut)); border-radius:5px; transition:width .4s ease; }
.tray-capacity-fill.danger { background:#c0392b; }
.tray-size-pills { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.tray-size-pill  { padding:8px 13px; border-radius:20px; border:1.5px solid var(--cream-dk); font-size:11px; font-weight:600; cursor:pointer; transition:var(--transition); background:var(--ivory-dk); min-width:0; }
.tray-size-pill.active { background:var(--walnut); color:#fff; border-color:var(--walnut); }
/* tray banner (other pages) */
.tray-banner-section { background:linear-gradient(135deg,var(--forest) 0%,#2D5A45 100%); color:#fff; overflow:hidden; position:relative; padding:72px 0; }
.tray-banner-inner   { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.tray-banner-grid    { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.tray-banner-item    { background:rgba(255,255,255,.08); border-radius:16px; padding:22px 16px; text-align:center; border:1px solid rgba(255,255,255,.12); transition:background .2s; }
.tray-banner-item:hover { background:rgba(255,255,255,.14); }

/* ── FORMS ──────────────────────────────────────────────────── */
.form-group label { font-size:13px; font-weight:600; color:var(--text-mid); }
.form-control { border:1.5px solid var(--cream-dk); border-radius:10px; padding:12px 16px; font-size:14px; background:#fff; color:var(--text); outline:none; transition:var(--transition); width:100%; }
.form-control:focus { border-color:var(--amber); box-shadow:0 0 0 4px var(--amber-glow); }
.form-control.error { border-color:var(--red); }
.form-hint  { font-size:12px; color:var(--text-light); }
.form-error { font-size:12px; color:var(--red); }
.form-row   { display:grid; grid-template-columns:1fr 1fr; gap:16px; }

/* ── OTP ────────────────────────────────────────────────────── */
.otp-inputs { display:flex; gap:10px; justify-content:center; }
.otp-input  { width:52px; height:60px; border:2px solid var(--cream-dk); border-radius:10px; text-align:center; font-size:22px; font-weight:700; color:var(--walnut); outline:none; transition:var(--transition); }
.otp-input:focus { border-color:var(--amber); box-shadow:0 0 0 4px var(--amber-glow); }

/* ── CART ───────────────────────────────────────────────────── */
.cart-item { display:grid; grid-template-columns:80px 1fr auto; gap:16px; align-items:start; padding:18px 0; border-bottom:1px solid var(--ivory-dk); }
.cart-item:last-child { border-bottom:none; }
.cart-item-img { width:80px; height:80px; background:var(--ivory-dk); border-radius:var(--radius-sm); overflow:hidden; }
.cart-item-img img { width:100%; height:100%; object-fit:contain; padding:8px; }
.cart-item-name    { font-weight:700; font-size:14px; margin-bottom:4px; font-family:var(--font-serif); color:var(--walnut); }
.cart-item-variant { font-size:12px; color:var(--text-light); margin-bottom:10px; }
.qty-control { display:flex; align-items:center; border:1.5px solid var(--cream-dk); border-radius:8px; overflow:hidden; width:fit-content; }
.qty-btn { width:34px; height:36px; border:none; background:var(--ivory-dk); cursor:pointer; font-size:16px; font-weight:700; display:flex; align-items:center; justify-content:center; color:var(--text); transition:var(--transition); }
.qty-btn:hover { background:var(--cream-dk); }
.qty-val { width:42px; height:36px; text-align:center; font-size:14px; font-weight:700; border:none; border-left:1.5px solid var(--cream-dk); border-right:1.5px solid var(--cream-dk); background:#fff; color:var(--text); }
.order-summary { background:#fff; border-radius:var(--radius-md); border:1px solid var(--cream-dk); padding:24px; position:sticky; top:calc(var(--header-total) + 16px); }
.summary-row { display:flex; justify-content:space-between; font-size:14px; padding:9px 0; border-bottom:1px solid var(--ivory-dk); }
.summary-row:last-child { border-bottom:none; }
.summary-row.total { font-size:17px; font-weight:700; color:var(--walnut); border-top:2px solid var(--walnut); margin-top:8px; padding-top:13px; }
.summary-row .free  { color:var(--forest); font-weight:700; }

/* ── TRACKING ───────────────────────────────────────────────── */
.tracking-timeline { position:relative; padding-left:28px; }
.tracking-timeline::before { content:''; position:absolute; left:10px; top:6px; bottom:6px; width:2px; background:var(--cream-dk); }
.tracking-event { position:relative; margin-bottom:24px; }
.tracking-event::before { content:''; position:absolute; left:-22px; top:4px; width:14px; height:14px; border-radius:50%; background:var(--cream-dk); border:3px solid #fff; box-shadow:0 0 0 2px var(--cream-dk); }
.tracking-event.current::before { background:var(--amber); box-shadow:0 0 0 3px rgba(200,131,26,.3); }
.tracking-event.done::before    { background:var(--forest); box-shadow:0 0 0 2px var(--forest); }
.order-stepper { display:flex; position:relative; padding:24px 0; }
.order-stepper::before { content:''; position:absolute; top:44px; left:8%; right:8%; height:3px; background:var(--cream-dk); }
.order-stepper-fill { position:absolute; top:44px; left:8%; height:3px; background:var(--amber); transition:width .8s ease; }
.order-step { flex:1; text-align:center; position:relative; z-index:1; }
.order-step-dot { width:40px; height:40px; border-radius:50%; background:var(--cream-dk); display:flex; align-items:center; justify-content:center; margin:0 auto 10px; font-size:18px; transition:var(--transition); }
.order-step.done   .order-step-dot { background:var(--forest); }
.order-step.active .order-step-dot { background:var(--amber); box-shadow:0 0 0 4px rgba(200,131,26,.25); }
.order-step-label { font-size:11px; font-weight:600; color:var(--text-light); line-height:1.3; }
.order-step.active .order-step-label { color:var(--walnut); font-weight:700; }

/* ── PRODUCT PAGE ───────────────────────────────────────────── */
.product-layout { display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:start; }
.product-description p   { margin-bottom:14px; font-size:15px; line-height:1.8; }
.product-description ul  { padding-left:20px; margin-bottom:14px; }
.product-description ul li { margin-bottom:8px; font-size:14px; color:var(--text-mid); list-style:disc; }
.product-description strong { color:var(--text); }
.product-description h3,.product-description h4 { font-family:var(--font-serif); margin:20px 0 10px; color:var(--walnut); }
#currency-charge-note { display:none; background:var(--amber-lt); border:1px solid var(--amber); border-radius:8px; padding:10px 14px; font-size:12px; color:var(--text-mid); margin-top:12px; }
.price-main { font-family:var(--font-serif); }

/* ── ADMIN ──────────────────────────────────────────────────── */
.admin-layout   { display:flex; min-height:100vh; }
.admin-sidebar  { width:240px; background:var(--walnut); flex-shrink:0; position:sticky; top:0; height:100vh; overflow-y:auto; display:flex; flex-direction:column; }
.admin-sidebar-logo { padding:20px 24px; border-bottom:1px solid rgba(255,255,255,.08); }
.admin-nav-section  { font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:rgba(255,255,255,.3); padding:16px 24px 6px; }
.admin-nav a        { display:flex; align-items:center; gap:10px; padding:11px 24px; font-size:13px; font-weight:500; color:rgba(255,255,255,.65); border-left:3px solid transparent; transition:var(--transition); }
.admin-nav a:hover  { color:#fff; background:rgba(255,255,255,.06); }
.admin-nav a.active { color:#fff; background:rgba(200,131,26,.12); border-left-color:var(--amber); }
.admin-main   { flex:1; display:flex; flex-direction:column; min-width:0; }
.admin-topbar { background:#fff; padding:0 28px; height:60px; border-bottom:1px solid var(--cream-dk); display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:100; }
.admin-topbar h1 { font-size:18px; font-weight:700; font-family:var(--font-body); }
.admin-content   { padding:28px; flex:1; }
.stat-card { background:#fff; border-radius:var(--radius-md); padding:22px; border:1px solid var(--cream-dk); }
.stat-card .stat-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--text-light); margin-bottom:8px; }
.stat-card .stat-value { font-size:28px; font-weight:700; font-family:var(--font-serif); color:var(--walnut); }
.stat-card .stat-sub   { font-size:12px; color:var(--text-light); margin-top:4px; }
.data-table-wrap { background:#fff; border-radius:var(--radius-md); border:1px solid var(--cream-dk); overflow:hidden; }
.data-table-head { padding:16px 20px; border-bottom:1px solid var(--cream-dk); display:flex; justify-content:space-between; align-items:center; }
table { width:100%; border-collapse:collapse; }
table th { text-align:left; padding:11px 18px; font-size:11px; font-weight:700; color:var(--text-light); text-transform:uppercase; letter-spacing:.5px; background:#fafaf5; border-bottom:1px solid var(--cream-dk); }
table td { padding:13px 18px; font-size:13px; border-bottom:1px solid #f5f0e8; vertical-align:middle; }
table tr:last-child td { border-bottom:none; }
table tr:hover td { background:#fafaf5; }
.order-status-badge { display:inline-flex; align-items:center; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:700; }
.status-placed       { background:#fff3cd; color:#856404; }
.status-confirmed    { background:#cff4fc; color:#055160; }
.status-processing   { background:#e2e3fe; color:#3730a3; }
.status-packed       { background:#d1ecf1; color:#0c5460; }
.status-dispatched,.status-in_transit { background:#d4edda; color:#155724; }
.status-out_for_delivery { background:#fff0d6; color:#7c4800; }
.status-delivered    { background:#d4edda; color:#155724; }
.status-cancelled    { background:#f8d7da; color:#721c24; }

/* ── TOAST ──────────────────────────────────────────────────── */
#toast-container { position:fixed; bottom:24px; right:24px; z-index:9999; display:flex; flex-direction:column; gap:10px; max-width:min(360px,90vw); }
.toast { background:var(--walnut); color:#fff; padding:14px 18px; border-radius:12px; font-size:14px; font-weight:500; box-shadow:var(--shadow-lg); display:flex; align-items:center; gap:10px; min-width:260px; max-width:360px; animation:slide-in .3s ease; }
.toast.success { background:var(--forest); }
.toast.error   { background:#c0392b; }
.toast.warning { background:var(--amber-dk); color:#fff; }
.toast-close   { margin-left:auto; cursor:pointer; opacity:.7; background:none; border:none; color:inherit; font-size:18px; padding:0; }

/* ── MODAL ──────────────────────────────────────────────────── */
.modal-overlay { position:fixed; inset:0; background:rgba(28,14,7,.65); z-index:5000; display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; pointer-events:none; transition:opacity .25s; }
.modal-overlay.open { opacity:1; pointer-events:all; }
.modal { background:#fff; border-radius:24px; width:100%; max-width:500px; max-height:90vh; overflow-y:auto; transform:translateY(24px) scale(.98); transition:transform .3s cubic-bezier(.4,0,.2,1); box-shadow:var(--shadow-lg); }
.modal-overlay.open .modal { transform:translateY(0) scale(1); }
.modal-head { padding:24px 28px 0; display:flex; align-items:center; justify-content:space-between; }
.modal-head h3 { font-size:20px; font-weight:700; font-family:var(--font-serif); }
.modal-close { width:36px; height:36px; border-radius:50%; border:none; background:var(--ivory-dk); cursor:pointer; font-size:18px; display:flex; align-items:center; justify-content:center; }
.modal-body { padding:24px 28px 32px; }

/* ── MISC ───────────────────────────────────────────────────── */
.breadcrumb { display:flex; align-items:center; gap:6px; font-size:13px; flex-wrap:wrap; }
.breadcrumb a { color:var(--text-light); } .breadcrumb a:hover { color:var(--amber-dk); }
.breadcrumb span { color:var(--text-light); } .breadcrumb .current { color:var(--text); font-weight:600; }
.pagination { display:flex; align-items:center; gap:6px; justify-content:center; padding:32px 0; }
.page-btn { width:40px; height:40px; border-radius:8px; border:1.5px solid var(--cream-dk); background:#fff; font-size:14px; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:var(--transition); }
.page-btn:hover,.page-btn.active { background:var(--walnut); color:#fff; border-color:var(--walnut); }
.empty-state { text-align:center; padding:80px 20px; background:#fff; border-radius:20px; border:1.5px dashed var(--cream-dk); }
.empty-state-icon { font-size:64px; margin-bottom:16px; }
.empty-state h3   { font-size:20px; margin-bottom:8px; }
.empty-state p    { max-width:320px; margin:0 auto 24px; }
.divider { height:1px; background:var(--cream-dk); margin:24px 0; }
.hidden  { display:none !important; } .sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── ANIMATIONS ─────────────────────────────────────────────── */
@keyframes spin     { to{transform:rotate(360deg)} }
@keyframes slide-in { from{transform:translateX(100px);opacity:0} to{transform:translateX(0);opacity:1} }
@keyframes fade-up  { from{transform:translateY(24px);opacity:0} to{transform:translateY(0);opacity:1} }
.animate-fade-up { animation:fade-up .55s ease both; }
.delay-1{animation-delay:.1s} .delay-2{animation-delay:.2s} .delay-3{animation-delay:.3s}
.fade-up { opacity:0; transform:translateY(20px); transition:opacity .6s ease,transform .6s ease; }
.fade-up.visible { opacity:1; transform:translateY(0); }
.skeleton { background:linear-gradient(90deg,#ede8e0 25%,#faf8f3 50%,#ede8e0 75%); background-size:200% 100%; animation:shimmer 1.5s infinite; border-radius:var(--radius-sm); }
@keyframes shimmer { from{background-position:-200% center} to{background-position:200% center} }

/* ── FOOTER ─────────────────────────────────────────────────── */
.footer { background:var(--walnut); color:rgba(255,255,255,.7); padding:64px 0 0; }
.footer-top { border-bottom:1px solid rgba(255,255,255,.08); padding-bottom:36px; margin-bottom:44px; }
.footer-trust-badges { display:flex; justify-content:center; gap:36px; flex-wrap:wrap; }
.footer-trust-item { display:flex; align-items:center; gap:10px; font-size:12px; font-weight:600; color:rgba(255,255,255,.6); }
.footer-trust-item span:first-child { font-size:22px; }
.footer-trust-item span:last-child { line-height:1.3; }
.footer-grid { display:grid; grid-template-columns:1.8fr 1fr 1fr 1fr 1.3fr; gap:36px; margin-bottom:44px; }
.footer-brand p   { font-size:14px; line-height:1.85; max-width:280px; }
.footer h4 { color:#fff; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; margin-bottom:18px; font-family:var(--font-body); }
.footer ul li { margin-bottom:11px; }
.footer ul li a { font-size:14px; color:rgba(255,255,255,.55); transition:var(--transition); }
.footer ul li a:hover { color:var(--amber); padding-left:4px; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.07); padding:22px 0; display:flex; justify-content:space-between; align-items:center; font-size:13px; flex-wrap:wrap; gap:12px; }
.social-links { display:flex; gap:10px; }
.social-link  { width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.55); transition:var(--transition); }
.social-link:hover { background:var(--amber); color:#fff; border-color:var(--amber); transform:translateY(-2px); }

/* ── ICON LABELS (header action icons) ─────────────────────── */
.btn-icon-labeled { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; width:auto; min-width:42px; height:auto; padding:6px 8px; }
.icon-label { font-size:9.5px; font-weight:700; color:var(--text-light); letter-spacing:.3px; line-height:1; }

/* ── RTL ────────────────────────────────────────────────────── */
[dir="rtl"] body,[dir="rtl"] .nav { direction:rtl; }
[dir="rtl"] .header-inner,[dir="rtl"] .topbar-inner { flex-direction:row-reverse; }
[dir="rtl"] .topbar-drop { right:auto; left:0; }
[dir="rtl"] .mobile-nav { right:auto; left:-100%; }
[dir="rtl"] .mobile-nav.open { left:0; right:auto; }
[dir="rtl"] #toast-container { right:auto; left:24px; }

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width:1200px) {
  .hero-split { grid-template-columns:1fr 360px; }
  .grid-4 { grid-template-columns:repeat(3,1fr); }
  .reviews-grid { grid-template-columns:repeat(2,1fr); }
  .delivery-cards { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:1.5fr 1fr 1fr; gap:28px; }
  .tray-builder { grid-template-columns:1fr 268px; }
  .newsletter-inner { gap:28px; }
}
@media (max-width:1024px) {
  .ig-grid { grid-template-columns:repeat(3,1fr); }
  .tray-cta-inner { grid-template-columns:1fr 1fr; gap:28px; }
}
@media (max-width:900px) {
  .nav,.header-search { display:none; }
  .hamburger { display:flex; }
  .hero-split { grid-template-columns:1fr; min-height:auto; padding:48px 0; }
  .hero-visual,.hero-badge { display:none; }
  .hero-content { max-width:100%; }
  .grid-3 { grid-template-columns:repeat(2,1fr); }
  .grid-4 { grid-template-columns:repeat(2,1fr); }
  .grid-5 { grid-template-columns:repeat(3,1fr); }
  .tray-builder { grid-template-columns:1fr; }
  .tray-summary { position:static; max-width:100%; }
  .tray-products-grid { grid-template-columns:repeat(3,1fr); }
  .footer-grid { grid-template-columns:1fr 1fr; }
  #products-layout { grid-template-columns:180px 1fr !important; gap:16px !important; }
  .why-grid { grid-template-columns:repeat(2,1fr); }
  .reviews-grid { grid-template-columns:repeat(2,1fr); }
  .tray-cta-inner { grid-template-columns:1fr; }
  .tray-cta-grid  { grid-template-columns:repeat(3,1fr); max-width:320px; margin:0 auto; }
  .delivery-cards { grid-template-columns:repeat(2,1fr); }
  .newsletter-inner { grid-template-columns:1fr; text-align:center; }
  .newsletter-text p { max-width:100%; }
  .newsletter-note { text-align:center; }
  .tray-banner-inner { grid-template-columns:1fr; gap:28px; }
  .tray-banner-grid  { grid-template-columns:repeat(4,1fr); gap:8px; }
  .home-section-head { flex-direction:column; align-items:flex-start; gap:6px; }
}
@media (max-width:768px) {
  .product-layout { grid-template-columns:1fr !important; gap:28px !important; }
  .reviews-layout { grid-template-columns:1fr !important; }
  #products-layout { grid-template-columns:1fr !important; }
  #sidebar-filter { display:none; }
  #sidebar-filter.open { display:block !important; position:fixed; top:0; left:0; right:0; bottom:0; z-index:3000; overflow-y:auto; border-radius:0; }
  #filter-toggle { display:flex !important; }
  #products-grid-area { grid-column:1 !important; }
  .cat-banner-mosaic { grid-template-columns:1fr; }
  .ig-grid { grid-template-columns:repeat(3,1fr); }
  .cat-banner-card { padding:18px; gap:14px; }
  .cat-banner-img  { width:52px; height:52px; }
}
@media (max-width:600px) {
  :root { --header-h:60px; --topbar-h:36px; }
  html,body { max-width:100%; overflow-x:hidden; }
  .container { padding:0 16px; }
  .section    { padding:44px 0; }
  .section-sm { padding:28px 0; }
  .grid-2,.grid-3,.grid-4,.grid-5 { grid-template-columns:repeat(2,1fr); gap:10px; }
  h1 { font-size:clamp(2rem,7vw,2.8rem); }
  h2 { font-size:clamp(1.5rem,5.5vw,2.2rem); }
  .hero-btns { flex-direction:column; gap:10px; }
  .hero-btns .btn { width:100%; justify-content:center; }
  .hero-trust { gap:12px; }
  .hero-trust-sep { display:none; }
  .btn-lg { padding:13px 24px; font-size:14px; }
  .form-row { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; gap:24px; }
  .footer-bottom { flex-direction:column; gap:12px; text-align:center; }
  .cart-item { grid-template-columns:64px 1fr; }
  .cart-item>:last-child { grid-column:2; }
  .order-stepper { overflow-x:auto; }
  .tray-products-grid { grid-template-columns:repeat(2,1fr); gap:8px; }
  .admin-sidebar { display:none; }
  #toast-container { bottom:12px; right:12px; left:12px; }
  .toast { min-width:0; max-width:100%; }
  section,.section,.section-sm { max-width:100%; overflow-x:hidden; }
  .cat-grid { grid-template-columns:repeat(3,1fr); gap:8px; }
  .cat-tile { padding:12px 8px 10px; }
  .cat-tile-img { width:52px; height:52px; }
  .cat-tile-name { font-size:11px; }
  .cat-tile-count { display:none; }
  .flash-row { grid-template-columns:repeat(2,1fr); }
  .why-grid  { grid-template-columns:1fr 1fr; gap:12px; }
  .why-card  { padding:18px 14px; }
  .reviews-grid { grid-template-columns:1fr; }
  .delivery-cards { grid-template-columns:1fr 1fr; gap:10px; }
  .ig-grid { grid-template-columns:repeat(3,1fr); gap:6px; }
  .newsletter-form { border-radius:14px; flex-direction:column; }
  .newsletter-form input  { padding:13px 16px; }
  .newsletter-form button { border-radius:0 0 12px 12px; width:100%; }
  .tray-cta-inner { gap:28px; }
  .tray-cta-grid  { grid-template-columns:repeat(3,1fr); }
  .tray-banner-grid { grid-template-columns:repeat(2,1fr); }
  .home-section-head .btn { align-self:flex-end; }
  .cat-banner-mosaic { grid-template-columns:1fr; }
}
@media (max-width:400px) {
  :root { --header-h:56px; }
  .otp-input { width:40px; height:50px; font-size:18px; }
  .header-inner { padding:0 12px; gap:8px; }
  .logo img { height:36px; }
  .flash-row { grid-template-columns:repeat(2,1fr); gap:8px; }
  .ig-grid { grid-template-columns:repeat(2,1fr); }
  .cat-grid { grid-template-columns:repeat(2,1fr); }
}