/* ══════════════════════════════════════════════════════
   Moudera — Editorial Luxury Design System
   Warm cream palette · Cormorant Garamond · Tajawal
══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Montserrat:wght@300;400;500;600;700&family=Tajawal:wght@300;400;500;700&display=swap');

/* ── Variables ── */
:root {
  --cream:       #faf8f5;
  --cream-2:     #f5f0e8;
  --cream-3:     #ede8e0;
  --cream-4:     #e4ddd4;
  --charcoal:    #1a1a1a;
  --charcoal-2:  #3a3a3a;
  --charcoal-3:  #6b6b6b;
  --accent:      #c4a882;
  --accent-dk:   #a08860;
  --accent-lt:   #ddd0bb;
  --border:      #e8e4de;
  --border-dk:   #d4cfc8;
  --black:       #0c0c0c;
  --white:       #ffffff;
  --error:       #8B1A1A;

  /* Backwards-compat aliases so old inline styles still work */
  --bg:           var(--cream);
  --bg2:          var(--cream-2);
  --bg3:          var(--cream-3);
  --bg4:          var(--cream-4);
  --text:         var(--charcoal);
  --text2:        var(--charcoal-3);
  --text3:        #9a9a9a;
  --gold:         var(--accent);
  --gold-lt:      var(--accent-lt);
  --gold-dk:      var(--accent-dk);
  --gold-grad:    linear-gradient(135deg,#c4a882,#e8d5a3,#c4a882);
  --gold-glow:    0 4px 24px rgba(196,168,130,.2);
  --border-g:     rgba(196,168,130,.35);
  --radius:       4px;
  --radius-sm:    2px;
  --shadow:       0 4px 32px rgba(0,0,0,.08);
  --shadow-md:    0 8px 48px rgba(0,0,0,.12);
  --tr:           all .3s ease;

  --font-serif:   'Cormorant Garamond', Georgia, serif;
  --font-sans:    'Montserrat', system-ui, sans-serif;
  --font-ar:      'Tajawal', 'Segoe UI', sans-serif;
  --container:    1320px;
}

/* ── Reset ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family: var(--font-sans);
  background: var(--cream);
  color: var(--charcoal);
  min-height: 100vh;
  line-height: 1.7;
  overflow-x: hidden;
}
img { display:block; width:100%; object-fit:cover; }
a { text-decoration:none; color:inherit; }
button { font-family:inherit; }
svg { display:inline-block; vertical-align:middle; flex-shrink:0; }


/* ── Scrollbar ── */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--cream-2); }
::-webkit-scrollbar-thumb { background:var(--accent); border-radius:3px; }

/* ── Utility ── */
.container { max-width:var(--container); margin:0 auto; padding:0 2rem; }
.gold-text { color:var(--accent); }
.ar { font-family:var(--font-ar); }
.serif { font-family:var(--font-serif); }
.ni svg { vertical-align:middle; }
.stat-ic svg,.empty-ic svg { display:block; margin:0 auto; }
.cat-icon svg { display:block; margin:0 auto .4rem; }

/* ══════════════════════════════════════════════════════
   NAVBAR
══════════════════════════════════════════════════════ */
.navbar {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:rgba(250,248,245,.94);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
  transition:background .4s ease, border-color .4s ease;
}
.nav-inner {
  max-width:var(--container); margin:0 auto;
  padding:0 2rem; height:68px;
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
}
.nav-logo {
  font-family:var(--font-serif); font-size:1.55rem;
  font-weight:400; letter-spacing:10px;
  color:var(--charcoal); text-transform:uppercase;
  transition:color .3s ease;
}
.nav-links {
  display:flex; list-style:none; gap:2.5rem;
  font-size:.68rem; font-weight:600;
  letter-spacing:2.5px; text-transform:uppercase;
  font-family:var(--font-sans);
}
.nav-links a { color:var(--charcoal-2); transition:color .25s; }
.nav-links a:hover,.nav-links a.active { color:var(--accent); }
.nav-actions { display:flex; align-items:center; gap:1rem; }
.btn-nav-user {
  display:inline-flex; align-items:center; gap:.38rem;
  font-size:.68rem; font-weight:600; letter-spacing:2px;
  text-transform:uppercase; color:var(--charcoal-2);
  background:none; border:none; padding:0;
  transition:color .25s; white-space:nowrap;
}
.btn-nav-user:hover { color:var(--accent); }
.cart-btn {
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.68rem; font-weight:600; letter-spacing:2px;
  text-transform:uppercase; color:var(--charcoal);
  padding:.5rem 1.1rem;
  border:1.5px solid var(--charcoal);
  transition:var(--tr); white-space:nowrap; position:relative;
}
.cart-btn:hover { background:var(--charcoal); color:var(--cream); }
.cart-count {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 .3rem;
  background:var(--accent); color:var(--white);
  border-radius:50%; font-size:.58rem; font-weight:700;
}
/* Hamburger */
.menu-toggle {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; padding:6px;
  width:38px; height:38px; align-items:center; justify-content:center;
}
.menu-toggle span {
  display:block; width:22px; height:1.5px;
  background:var(--charcoal); transition:var(--tr);
}
/* Language toggle button */
.lang-btn {
  font-family:var(--font-sans); font-size:.58rem; font-weight:700;
  letter-spacing:2px; background:none;
  border:1px solid var(--border-dk);
  padding:.3rem .75rem; color:var(--charcoal-2);
  min-height:30px; transition:var(--tr);
}
.lang-btn:hover { border-color:var(--accent); color:var(--accent); }

/* Mobile nav drawer */
.nav-drawer {
  display:none; position:fixed; inset:0; z-index:999;
}
.nav-drawer-bg {
  position:absolute; inset:0; background:rgba(0,0,0,.4);
}
.nav-drawer-panel {
  position:absolute; top:0; right:0; bottom:0; width:280px;
  background:var(--cream); padding:5rem 2rem 2rem;
  display:flex; flex-direction:column; gap:2rem;
  box-shadow: -8px 0 32px rgba(0,0,0,.12);
  transform:translateX(100%); transition:transform .35s ease;
}
.nav-drawer.open { display:block; }
.nav-drawer.open .nav-drawer-panel { transform:translateX(0); }
.nav-drawer .nav-links {
  flex-direction:column; gap:0;
  font-size:.78rem; letter-spacing:2px;
}
.nav-drawer .nav-links a {
  display:block; padding:.9rem 0;
  border-bottom:1px solid var(--border);
  font-family:var(--font-ar); font-size:.95rem; letter-spacing:.5px;
}
.nav-drawer .nav-actions {
  flex-direction:column; align-items:flex-start; gap:.8rem;
}
.nav-drawer-close {
  position:absolute; top:1.2rem; right:1.2rem;
  background:none; border:none; font-size:1.4rem;
  color:var(--charcoal-3); line-height:1;
}

/* ══════════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════════ */
.hero {
  display:grid; grid-template-columns:1fr 1fr;
  min-height:100vh; padding-top:68px;
}
.hero-text {
  display:flex; flex-direction:column; justify-content:center;
  padding:5rem 4rem 5rem 3rem;
  background:var(--cream);
}
.hero-eyebrow {
  font-family:var(--font-sans); font-size:.62rem; font-weight:600;
  letter-spacing:5px; text-transform:uppercase;
  color:var(--accent); margin-bottom:1.5rem;
}
.hero-title {
  font-family:var(--font-serif);
  font-size:clamp(3rem,5vw,5.5rem);
  font-weight:300; line-height:1.05; letter-spacing:-1px;
  color:var(--charcoal); margin-bottom:1.5rem;
}
.hero-title em { font-style:italic; color:var(--accent); }
.hero-sub {
  font-family:var(--font-ar); font-size:.92rem;
  color:var(--charcoal-3); line-height:1.9;
  max-width:380px; margin-bottom:2.5rem;
}
.hero-actions { display:flex; gap:1rem; flex-wrap:wrap; }
.hero-stats {
  display:flex; gap:2.5rem; margin-top:3rem;
  padding-top:2rem; border-top:1px solid var(--border);
}
.hero-stat-num {
  font-family:var(--font-serif); font-size:1.9rem;
  font-weight:300; color:var(--charcoal); line-height:1;
}
.hero-stat-lbl {
  font-family:var(--font-ar); font-size:.65rem;
  letter-spacing:.5px; color:var(--charcoal-3); margin-top:.3rem;
}
.hero-img {
  position:relative; overflow:hidden; min-height:500px;
}
.slide {
  position:absolute; inset:0;
  opacity:0; transition:opacity 1s ease;
}
.slide.active { opacity:1; }
.slide img {
  width:100%; height:100%; object-fit:cover;
}
.slide-dots {
  position:absolute; bottom:1.25rem; left:50%; transform:translateX(-50%);
  display:flex; gap:.5rem; z-index:10;
}
.slide-dot {
  width:8px; height:8px; border-radius:50%;
  background:rgba(255,255,255,.45); cursor:pointer;
  transition:background .3s, transform .3s;
  border:none; padding:0;
}
.slide-dot.active {
  background:#fff; transform:scale(1.3);
}

/* ══════════════════════════════════════════════════════
   MARQUEE
══════════════════════════════════════════════════════ */
.marquee-strip {
  background:var(--charcoal); overflow:hidden;
  white-space:nowrap; padding:.9rem 0;
}
.marquee-inner {
  display:inline-block;
  animation:marquee 32s linear infinite;
  font-family:var(--font-ar); font-size:.75rem;
  font-weight:500; letter-spacing:1px;
  color:var(--accent-lt);
}
.marquee-sep { color:var(--accent); margin:0 2rem; }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ══════════════════════════════════════════════════════
   SECTIONS
══════════════════════════════════════════════════════ */
.section-hd {
  text-align:center; max-width:600px;
  margin:0 auto 3.5rem; padding:0 1rem;
}
.section-tag {
  font-family:var(--font-sans); font-size:.6rem; font-weight:600;
  letter-spacing:5px; text-transform:uppercase;
  color:var(--accent); margin-bottom:.8rem;
}
.section-title {
  font-family:var(--font-serif);
  font-size:clamp(2rem,3.5vw,3.2rem);
  font-weight:300; line-height:1.1; color:var(--charcoal);
}
.section-title em { font-style:italic; color:var(--accent); }
.section-sub {
  font-family:var(--font-ar); font-size:.85rem;
  color:var(--charcoal-3); margin-top:.8rem; line-height:1.8;
}
.sep {
  display:flex; align-items:center; gap:1rem;
  max-width:180px; margin:1.5rem auto; color:var(--accent);
}
.sep::before,.sep::after {
  content:''; flex:1; height:1px; background:var(--border-dk);
}

/* ══════════════════════════════════════════════════════
   EDITORIAL CATEGORY GRID
══════════════════════════════════════════════════════ */
.editorial-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:2px; background:var(--border-dk);
  max-width:1100px; margin:0 auto;
}
.editorial-card {
  position:relative; overflow:hidden; aspect-ratio:3/4;
  background:var(--cream-3);
}
.editorial-card img {
  width:100%; height:100%; object-fit:cover;
  transition:transform .7s ease;
}
.editorial-card:hover img { transform:scale(1.08); }
.editorial-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(10,10,10,.72) 0%, transparent 55%);
  display:flex; flex-direction:column; justify-content:flex-end; padding:2rem;
}
.editorial-tag {
  font-family:var(--font-sans); font-size:.58rem; font-weight:600;
  letter-spacing:4px; text-transform:uppercase;
  color:var(--accent); margin-bottom:.5rem;
}
.editorial-title {
  font-family:var(--font-ar); font-size:1.7rem;
  font-weight:500; color:var(--white); line-height:1.2;
}
.editorial-link {
  display:inline-flex; align-items:center; gap:.4rem;
  margin-top:.8rem; font-family:var(--font-sans);
  font-size:.6rem; font-weight:600; letter-spacing:2.5px;
  text-transform:uppercase; color:var(--accent-lt);
  transition:gap .25s;
}
.editorial-card:hover .editorial-link { gap:.8rem; }

/* ══════════════════════════════════════════════════════
   CATEGORY CARDS (homepage)
══════════════════════════════════════════════════════ */
.cats-grid {
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:1px; background:var(--border);
  max-width:var(--container); margin:0 auto;
}
.cat-card {
  display:flex; flex-direction:column; align-items:center;
  gap:.7rem; padding:2.2rem 1rem; text-align:center;
  background:var(--white); transition:var(--tr);
}
.cat-card:hover { background:var(--cream-2); transform:translateY(-3px); }
.cat-icon { color:var(--accent); }
.cat-name {
  font-family:var(--font-ar); font-size:.8rem; font-weight:500;
  color:var(--charcoal-2); letter-spacing:.5px;
}

/* ══════════════════════════════════════════════════════
   FULL-WIDTH BANNER
══════════════════════════════════════════════════════ */
.full-banner {
  position:relative; height:440px; overflow:hidden;
  display:flex; align-items:center;
}
.full-banner > img {
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
  transition:transform .8s ease;
}
.full-banner:hover > img { transform:scale(1.04); }
.full-banner-overlay {
  position:absolute; inset:0; z-index:1;
  background:rgba(10,10,10,.45);
}
.full-banner-content {
  position:relative; z-index:2; width:100%;
  max-width:var(--container); margin:0 auto;
  padding:0 2rem; text-align:center;
}
.full-banner-content h2 {
  font-family:var(--font-serif);
  font-size:clamp(2.2rem,5vw,4.5rem);
  font-weight:300; color:var(--white); margin-bottom:1.5rem;
  letter-spacing:-0.5px;
}

/* ══════════════════════════════════════════════════════
   FEATURES / WHY US
══════════════════════════════════════════════════════ */
.features-grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  border:1px solid var(--border);
}
.feature-card {
  padding:3rem 2rem; text-align:center;
  border-right:1px solid var(--border);
  transition:background .3s;
}
.feature-card:last-child { border-right:none; }
.feature-card:hover { background:var(--cream-2); }
.feature-icon { color:var(--accent); margin:0 auto 1.2rem; }
.feature-card h3 {
  font-family:var(--font-serif); font-size:1.05rem;
  font-weight:400; margin-bottom:.5rem;
}
.feature-card p {
  font-family:var(--font-ar); font-size:.82rem;
  color:var(--charcoal-3); line-height:1.7;
}

/* ══════════════════════════════════════════════════════
   PAGE HEADER (internal pages)
══════════════════════════════════════════════════════ */
.page-hd {
  margin-top:68px; padding:4rem 2rem 3rem;
  background:var(--cream-2); text-align:center;
  border-bottom:1px solid var(--border);
}
.page-hd h1 {
  font-family:var(--font-serif);
  font-size:clamp(2rem,4vw,3.2rem);
  font-weight:300; color:var(--charcoal); letter-spacing:-.5px;
}
.page-hd p {
  font-family:var(--font-ar); font-size:.85rem;
  color:var(--charcoal-3); margin-top:.6rem;
}

/* ══════════════════════════════════════════════════════
   FILTER BAR
══════════════════════════════════════════════════════ */
.filter-bar {
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  max-width:var(--container); margin:0 auto;
  padding:1.4rem 2rem;
  border-bottom:1px solid var(--border);
  background:var(--white);
}
.search-box { position:relative; flex:1; min-width:200px; }
.search-box input {
  width:100%; padding:.65rem 1rem .65rem 2.4rem;
  border:1px solid var(--border-dk); background:var(--cream);
  font-family:var(--font-ar); font-size:.85rem; color:var(--charcoal);
  outline:none; transition:border-color .25s; border-radius:0;
}
.search-box input:focus { border-color:var(--accent); }
.search-box::before {
  content:''; position:absolute; left:.8rem; top:50%; transform:translateY(-50%);
  width:14px; height:14px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239a9a9a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") center/contain no-repeat;
}
.chips { display:flex; gap:.5rem; flex-wrap:wrap; }
.chip {
  padding:.42rem 1rem; border:1px solid var(--border-dk);
  background:var(--cream); font-family:var(--font-ar);
  font-size:.78rem; font-weight:500;
  color:var(--charcoal-2); transition:var(--tr); border-radius:0;
  min-height:36px; display:inline-flex; align-items:center;
}
.chip:hover,.chip.active { background:var(--charcoal); color:var(--cream); border-color:var(--charcoal); }
.sort-select {
  padding:.5rem 1rem; border:1px solid var(--border-dk);
  background:var(--cream); color:var(--charcoal);
  font-family:var(--font-sans); font-size:.78rem;
  outline:none; border-radius:0; min-height:36px;
}
#count-label {
  max-width:var(--container); margin:0 auto;
  padding:.8rem 2rem; font-size:.75rem;
  color:var(--charcoal-3); display:block;
}

/* ══════════════════════════════════════════════════════
   PRODUCTS GRID + CARDS
══════════════════════════════════════════════════════ */
.products-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px; background:var(--border);
  max-width:var(--container); margin:0 auto 4rem;
  padding:0 2rem;
}
.product-card {
  background:var(--white); position:relative;
  overflow:hidden; display:flex; flex-direction:column;
}
.product-img {
  height:300px; position:relative; overflow:hidden;
  background:var(--cream-2);
  display:flex; align-items:center; justify-content:center;
  font-size:5rem;
}
.product-img img {
  width:100%; height:100%; object-fit:cover;
  position:absolute; inset:0;
  transition:transform .6s ease;
}
.product-card:hover .product-img img { transform:scale(1.07); }
.product-img::after {
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to bottom,transparent 50%,rgba(0,0,0,.4) 100%);
  pointer-events:none;
}
/* Hover overlay */
.prod-overlay {
  position:absolute; inset:0; z-index:3;
  background:rgba(196,168,130,.9);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .35s ease;
}
.product-card:hover .prod-overlay { opacity:1; }
.prod-overlay-btn {
  font-family:var(--font-ar); font-size:.9rem; font-weight:500;
  color:var(--white); background:none;
  border:1.5px solid rgba(255,255,255,.7);
  padding:.75rem 1.8rem; transition:background .25s;
  white-space:nowrap;
}
.prod-overlay-btn:hover { background:rgba(255,255,255,.18); }
/* Mobile: always-visible add button */
.prod-mobile-btn {
  display:none;
  width:100%; padding:.7rem 1rem;
  background:var(--charcoal); color:var(--cream);
  font-family:var(--font-ar); font-size:.82rem; font-weight:500;
  border:none; border-top:1px solid var(--border);
  min-height:44px;
}

.product-badge {
  position:absolute; top:12px; left:12px; z-index:4;
  padding:.2rem .7rem; font-size:.58rem; font-weight:700;
  letter-spacing:2px; text-transform:uppercase;
  font-family:var(--font-sans);
}
.product-badge.sale,.product-badge.SALE { background:var(--charcoal); color:var(--cream); }
.product-badge.new,.product-badge.NEW  { background:var(--accent);   color:var(--white); }
.product-badge.hot,.product-badge.HOT  { background:var(--error);    color:var(--white); }

.product-body {
  padding:1.1rem 1.2rem 1.4rem;
  border-top:1px solid var(--border);
  display:flex; flex-direction:column; flex:1;
}
.product-cat {
  font-family:var(--font-ar); font-size:.6rem; font-weight:600;
  letter-spacing:1px; text-transform:uppercase;
  color:var(--accent); margin-bottom:.4rem;
}
.product-name {
  font-family:var(--font-ar); font-size:.95rem; font-weight:500;
  line-height:1.4; color:var(--charcoal); margin-bottom:.3rem;
}
.product-desc {
  font-family:var(--font-ar); font-size:.78rem;
  color:var(--charcoal-3); line-height:1.6;
  flex:1; margin-bottom:.9rem;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.product-ft { display:flex; align-items:center; justify-content:space-between; }
.price-wrap { display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap; }
.price-now { font-family:var(--font-sans); font-size:.95rem; font-weight:700; color:var(--charcoal); }
.price-old { font-family:var(--font-sans); font-size:.75rem; color:var(--text3); text-decoration:line-through; }
.btn-add-cart {
  width:34px; height:34px; background:var(--charcoal); color:var(--cream);
  border:none; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; font-weight:300; transition:var(--tr); flex-shrink:0;
}
.btn-add-cart:hover { background:var(--accent); }

/* ══════════════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.85rem 2rem;
  font-family:var(--font-sans); font-size:.68rem;
  font-weight:700; letter-spacing:2.5px; text-transform:uppercase;
  border:none; transition:var(--tr); white-space:nowrap;
  border-radius:0; min-height:44px;
}
.btn-gold { background:var(--charcoal); color:var(--cream); }
.btn-gold:hover { background:var(--accent); color:var(--white); }
.btn-outline { background:transparent; border:1.5px solid var(--charcoal); color:var(--charcoal); }
.btn-outline:hover { background:var(--charcoal); color:var(--cream); }
.btn-ghost { background:transparent; color:var(--charcoal-2); border:1px solid var(--border-dk); }
.btn-ghost:hover { border-color:var(--charcoal); color:var(--charcoal); }
.btn-danger { background:var(--error); color:var(--white); }
.btn-danger:hover { background:#6B0000; }
.btn-sm { padding:.5rem 1.2rem; font-size:.62rem; min-height:36px; }
.btn-icon { padding:.45rem .6rem; min-height:36px; }

/* ══════════════════════════════════════════════════════
   FORMS
══════════════════════════════════════════════════════ */
.form-group { margin-bottom:1.2rem; }
.form-group label {
  display:block; margin-bottom:.4rem;
  font-family:var(--font-ar); font-size:.75rem; font-weight:700;
  letter-spacing:.5px; color:var(--charcoal-2);
}
.form-group input,.form-group select,.form-group textarea {
  width:100%; padding:.8rem 1rem;
  border:1px solid var(--border-dk); background:var(--white);
  color:var(--charcoal); font-family:var(--font-ar); font-size:.88rem;
  outline:none; transition:border-color .25s; border-radius:0;
  resize:vertical; min-height:44px;
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus { border-color:var(--accent); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-card {
  background:var(--white); border:1px solid var(--border); padding:2rem;
}
.form-card-title {
  font-family:var(--font-ar); font-size:1rem; font-weight:700;
  color:var(--charcoal); margin-bottom:1.5rem;
  padding-bottom:1rem; border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:.5rem;
}

/* ══════════════════════════════════════════════════════
   CART
══════════════════════════════════════════════════════ */
.cart-layout {
  display:grid; grid-template-columns:1fr 360px;
  gap:2rem; align-items:start;
  max-width:var(--container); margin:0 auto;
  padding:3rem 2rem 5rem;
}
.cart-item {
  display:grid;
  grid-template-columns:auto 1fr auto auto auto;
  align-items:center; gap:1.2rem;
  padding:1.4rem 0; border-bottom:1px solid var(--border);
}
.cart-emoji { font-size:2rem; flex-shrink:0; }
.cart-info {}
.cart-item-name { font-family:var(--font-ar); font-size:.95rem; font-weight:500; }
.cart-item-unit { font-family:var(--font-ar); font-size:.78rem; color:var(--charcoal-3); margin-top:.2rem; }
.cart-item-total { font-family:var(--font-sans); font-weight:700; font-size:.95rem; white-space:nowrap; }
.qty-ctrl { display:flex; align-items:center; gap:.5rem; }
.qty-btn {
  width:32px; height:32px; min-height:32px;
  border:1px solid var(--border-dk); background:var(--cream);
  color:var(--charcoal); display:flex; align-items:center;
  justify-content:center; transition:var(--tr); border-radius:0;
  flex-shrink:0;
}
.qty-btn:hover { border-color:var(--charcoal); background:var(--charcoal); color:var(--cream); }
.qty-num { min-width:28px; text-align:center; font-size:.9rem; font-weight:500; }
.cart-remove {
  width:32px; height:32px;
  background:none; border:none; color:var(--text3);
  display:flex; align-items:center; justify-content:center;
  transition:color .25s; flex-shrink:0;
}
.cart-remove:hover { color:var(--error); }

/* Summary box */
.summary-box {
  background:var(--cream-2); border:1px solid var(--border);
  padding:2rem; position:sticky; top:88px;
}
.summary-box h3 {
  font-family:var(--font-serif); font-size:1.2rem; font-weight:400;
  margin-bottom:1.5rem; padding-bottom:1rem; border-bottom:1px solid var(--border);
}
.sum-row {
  display:flex; justify-content:space-between;
  font-family:var(--font-ar); font-size:.85rem;
  padding:.5rem 0; color:var(--charcoal-2);
}
.sum-total {
  display:flex; justify-content:space-between;
  font-weight:700; font-size:1.05rem;
  padding:1rem 0 1.5rem; margin-top:.5rem;
  border-top:1px solid var(--border-dk);
}
.gold { color:var(--accent); }

/* ══════════════════════════════════════════════════════
   CHECKOUT
══════════════════════════════════════════════════════ */
.checkout-layout {
  display:grid; grid-template-columns:1fr 360px;
  gap:2rem; align-items:start;
  max-width:var(--container); margin:0 auto;
  padding:3rem 2rem 5rem;
}
.order-items { display:flex; flex-direction:column; gap:.6rem; margin-bottom:1.5rem; }
.order-item {
  display:flex; align-items:center; gap:.8rem;
  padding:.85rem; background:var(--cream-3); border:1px solid var(--border);
}
.order-item-emoji { font-size:1.4rem; flex-shrink:0; }
.order-item-info { flex:1; }
.order-item-name { font-family:var(--font-ar); font-size:.85rem; font-weight:500; }
.order-item-qty { font-size:.72rem; color:var(--charcoal-3); }
.order-item-price { font-family:var(--font-sans); font-weight:700; font-size:.9rem; color:var(--accent); white-space:nowrap; }

/* Success */
.success-wrap {
  max-width:600px; margin:0 auto;
  text-align:center; padding:5rem 2rem 6rem;
}
.success-ic { margin-bottom:1.5rem; color:var(--accent); }
.success-wrap h1 {
  font-family:var(--font-serif); font-size:2.5rem;
  font-weight:300; margin-bottom:.8rem;
}
.success-wrap p { font-family:var(--font-ar); color:var(--charcoal-3); margin-bottom:.5rem; }

/* ══════════════════════════════════════════════════════
   ACCOUNT
══════════════════════════════════════════════════════ */
.account-grid {
  display:grid; grid-template-columns:340px 1fr;
  gap:2rem; max-width:var(--container);
  margin:0 auto; padding:3rem 2rem 5rem; align-items:start;
}
.account-card { background:var(--white); border:1px solid var(--border); overflow:hidden; }
.account-card-hd {
  padding:1.2rem 1.5rem; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
}
.account-card-hd h3 {
  font-family:var(--font-ar); font-size:.95rem; font-weight:700;
  color:var(--charcoal); display:flex; align-items:center; gap:.4rem;
}
.account-card-body { padding:1.5rem; }
.avatar {
  width:72px; height:72px; border-radius:50%;
  background:var(--cream-2); border:1.5px solid var(--border-dk);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 1.2rem; color:var(--accent);
}
.user-email {
  text-align:center; font-size:.8rem; color:var(--charcoal-3);
  margin-bottom:1.5rem; padding-bottom:1.2rem; border-bottom:1px solid var(--border);
}
.order-row {
  display:flex; align-items:center; gap:1rem;
  padding:.9rem 1.2rem; border-bottom:1px solid var(--border);
  transition:background .2s;
}
.order-row:last-child { border-bottom:none; }
.order-row:hover { background:var(--cream-2); }
.order-row-id { font-size:.7rem; font-family:monospace; color:var(--text3); min-width:80px; }
.order-row-info { flex:1; }
.order-row-date { font-family:var(--font-ar); font-size:.78rem; color:var(--charcoal-2); }
.order-row-items { font-family:var(--font-ar); font-size:.72rem; color:var(--text3); margin-top:.15rem; }
.order-row-total { font-family:var(--font-sans); font-weight:700; color:var(--accent); font-size:.95rem; }
.order-arrow { color:var(--accent); }
.od-item {
  display:flex; align-items:center; gap:.75rem;
  background:var(--cream-2); padding:.75rem; margin-bottom:.5rem;
}
.od-emoji { font-size:1.5rem; min-width:40px; text-align:center; }
.od-name { font-family:var(--font-ar); font-size:.85rem; font-weight:500; }
.od-qty { font-size:.72rem; color:var(--text3); }
.od-price { font-family:var(--font-sans); font-weight:700; color:var(--accent); font-size:.88rem; }

/* ══════════════════════════════════════════════════════
   STATUS BADGES
══════════════════════════════════════════════════════ */
.badge {
  display:inline-block; padding:.2rem .7rem;
  font-family:var(--font-sans); font-size:.58rem;
  font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
}
.badge-pending    { background:#fef3c7; color:#92400e; }
.badge-processing { background:#dbeafe; color:#1e40af; }
.badge-shipped    { background:#d1fae5; color:#065f46; }
.badge-delivered  { background:var(--cream-3); color:var(--accent-dk); }
.badge-cancelled  { background:#fee2e2; color:#991b1b; }

/* ══════════════════════════════════════════════════════
   TOAST
══════════════════════════════════════════════════════ */
.toast-container {
  position:fixed; bottom:5rem; right:1.5rem; z-index:9000;
  display:flex; flex-direction:column; gap:.6rem;
}
@media (min-width:769px) { .toast-container { bottom:2rem; } }
.toast {
  background:var(--charcoal); color:var(--cream);
  padding:.85rem 1.3rem;
  display:flex; align-items:center; gap:.8rem;
  font-family:var(--font-ar); font-size:.85rem;
  animation:toastIn .3s ease;
  box-shadow:var(--shadow-md); min-width:220px; max-width:340px;
}
.toast.error   { background:var(--error); }
.toast.success,.toast.cart { border-left:3px solid var(--accent); }
@keyframes toastIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

/* ══════════════════════════════════════════════════════
   LOADING / EMPTY / MODAL
══════════════════════════════════════════════════════ */
.loader { display:flex; justify-content:center; padding:4rem; grid-column:1/-1; }
.spinner {
  width:28px; height:28px;
  border:1.5px solid var(--border-dk); border-top-color:var(--accent);
  border-radius:50%; animation:spin 1s linear infinite;
}
@keyframes spin { to{transform:rotate(360deg)} }

.empty-state {
  display:flex; flex-direction:column; align-items:center;
  text-align:center; padding:5rem 2rem; grid-column:1/-1;
}
.empty-ic { margin-bottom:1.5rem; color:var(--accent); }
.empty-state h3 {
  font-family:var(--font-serif); font-size:1.6rem; font-weight:300; margin-bottom:.5rem;
}
.empty-state p { font-family:var(--font-ar); font-size:.85rem; color:var(--charcoal-3); margin-bottom:1.5rem; }

.modal-bg {
  display:none; position:fixed; inset:0; z-index:2000;
  background:rgba(10,10,10,.5); backdrop-filter:blur(4px);
  align-items:center; justify-content:center; padding:1rem;
}
.modal-bg.open { display:flex; }
.modal {
  background:var(--white); border:1px solid var(--border);
  max-width:560px; width:100%; max-height:90vh;
  display:flex; flex-direction:column;
  animation:modalIn .28s ease;
}
@keyframes modalIn { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
.modal-hd {
  display:flex; align-items:center; justify-content:space-between;
  padding:1.2rem 1.5rem; border-bottom:1px solid var(--border);
}
.modal-hd h3 { font-family:var(--font-ar); font-size:1rem; font-weight:700; }
.modal-close {
  background:none; border:none; font-size:1.4rem; color:var(--text3);
  line-height:1; width:32px; height:32px;
  display:flex; align-items:center; justify-content:center; transition:color .2s;
}
.modal-close:hover { color:var(--charcoal); }
.modal-body { padding:1.5rem; overflow-y:auto; flex:1; }
.modal-ft {
  padding:1rem 1.5rem; border-top:1px solid var(--border);
  display:flex; justify-content:flex-end; gap:.6rem;
}

/* ══════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════ */
.footer { background:var(--black); color:var(--cream); }
.footer-grid {
  max-width:var(--container); margin:0 auto;
  padding:5rem 2rem 2rem;
  display:grid; grid-template-columns:2fr 1fr 1fr; gap:5rem;
}
.footer-brand .logo {
  font-family:var(--font-serif); font-size:1.8rem; font-weight:300;
  letter-spacing:10px; color:var(--accent); margin-bottom:1rem;
}
.footer-brand p {
  font-family:var(--font-ar); font-size:.82rem;
  color:rgba(250,248,245,.45); line-height:1.8;
}
.footer-col h4 {
  font-family:var(--font-sans); font-size:.58rem; font-weight:700;
  letter-spacing:4px; text-transform:uppercase;
  color:var(--accent); margin-bottom:1.4rem;
}
.footer-col ul { list-style:none; }
.footer-col ul li { margin-bottom:.7rem; }
.footer-col ul a {
  font-family:var(--font-ar); font-size:.82rem;
  color:rgba(250,248,245,.4); transition:color .25s;
}
.footer-col ul a:hover { color:var(--cream); }
.footer-bot {
  text-align:center; font-family:var(--font-sans);
  font-size:.65rem; letter-spacing:1.5px;
  color:rgba(250,248,245,.2); padding:1.5rem 2rem;
  border-top:1px solid rgba(255,255,255,.04);
  max-width:var(--container); margin:0 auto;
}

/* ══════════════════════════════════════════════════════
   BOTTOM NAV (mobile only)
══════════════════════════════════════════════════════ */
.bottom-nav {
  display:none; position:fixed; bottom:0; left:0; right:0; z-index:900;
  background:var(--white); border-top:1px solid var(--border);
  padding:.5rem 0 env(safe-area-inset-bottom,.5rem);
  grid-template-columns:repeat(4,1fr);
}
.bottom-nav-item {
  display:flex; flex-direction:column; align-items:center; gap:.25rem;
  padding:.4rem; color:var(--charcoal-3); transition:color .2s;
  font-family:var(--font-ar); font-size:.62rem; font-weight:500;
}
.bottom-nav-item.active,.bottom-nav-item:hover { color:var(--accent); }

/* Login page compat */
.login-wrap {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:var(--cream-2); padding:1rem;
}
.login-card {
  background:var(--white); border:1px solid var(--border);
  padding:2.5rem; width:100%; max-width:400px;
}

/* ══════════════════════════════════════════════════════
   ADMIN COMPATIBILITY
══════════════════════════════════════════════════════ */
.admin-wrap { display:flex; min-height:100vh; }
.admin-sidebar {
  width:220px; min-width:220px; background:var(--charcoal);
  color:var(--cream); position:sticky; top:0; height:100vh;
  overflow-y:auto; flex-shrink:0; transition:transform .3s;
}
.sidebar-logo {
  padding:1.5rem 1.4rem; border-bottom:1px solid rgba(255,255,255,.08);
}
.sidebar-logo a {
  font-family:var(--font-serif); font-size:1.3rem;
  letter-spacing:6px; color:var(--accent); display:block;
}
.sidebar-logo p { font-size:.6rem; letter-spacing:2px; color:rgba(255,255,255,.3); margin-top:.3rem; }
.admin-nav { list-style:none; padding:.8rem 0; }
.admin-nav a {
  display:flex; align-items:center; gap:.7rem;
  padding:.85rem 1.4rem; font-size:.75rem; font-weight:500;
  letter-spacing:1.5px; text-transform:uppercase;
  color:rgba(255,255,255,.5); transition:var(--tr);
}
.admin-nav a:hover,.admin-nav a.active {
  background:rgba(196,168,130,.12); color:var(--accent);
}
.admin-main { flex:1; background:var(--cream); overflow-y:auto; }
.admin-topbar {
  padding:1.2rem 1.5rem; background:var(--white);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:100;
}
.admin-topbar h1 {
  font-family:var(--font-serif); font-size:1.3rem; font-weight:400;
}
.admin-section { display:none; padding:1.5rem; }
.admin-section.active { display:block; }
.admin-card {
  background:var(--white); border:1px solid var(--border);
  overflow:hidden; margin-bottom:1.5rem;
}
.admin-card-hd {
  padding:1.1rem 1.4rem; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
}
.admin-card-hd h3 { font-family:var(--font-serif); font-size:1rem; font-weight:400; }
.stats-grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:var(--border); margin-bottom:1.5rem;
}
.stat-card {
  background:var(--white); padding:1.8rem;
  text-align:center; transition:background .2s;
}
.stat-card:hover { background:var(--cream); }
.stat-ic { margin-bottom:1rem; }
.stat-val { font-family:var(--font-serif); font-size:2rem; font-weight:300; color:var(--charcoal); }
.stat-lbl { font-size:.65rem; letter-spacing:2px; text-transform:uppercase; color:var(--charcoal-3); margin-top:.3rem; }
.tbl-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:.82rem; }
thead tr { border-bottom:2px solid var(--border); }
th { padding:.8rem 1rem; text-align:left; font-size:.62rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--charcoal-3); }
td { padding:.85rem 1rem; border-bottom:1px solid var(--border); vertical-align:middle; }
tr:last-child td { border-bottom:none; }
tr:hover td { background:var(--cream); }
#sidebar-toggle { display:none; }

/* ══════════════════════════════════════════════════════
   RESPONSIVE — 1024px (tablet)
══════════════════════════════════════════════════════ */
@media (max-width:1024px) {
  .hero { grid-template-columns:1fr; min-height:auto; }
  .hero-text { padding:4rem 2rem; order:2; }
  .hero-img { order:1; min-height:55vw; }
  .hero-title { font-size:clamp(2.2rem,5vw,4rem); }
  .hero-stats { gap:1.5rem; }

  .products-grid { grid-template-columns:repeat(2,1fr); }

  .cats-grid { grid-template-columns:repeat(4,1fr); }

  .editorial-grid { grid-template-columns:1fr 1fr; }
  .editorial-grid .editorial-card:last-child { grid-column:1/-1; aspect-ratio:16/6; }

  .cart-layout,.checkout-layout { grid-template-columns:1fr; }
  .summary-box { position:static; }

  .account-grid { grid-template-columns:1fr; }

  .features-grid { grid-template-columns:repeat(2,1fr); }
  .feature-card { border-right:none; border-bottom:1px solid var(--border); }
  .feature-card:nth-child(odd) { border-right:1px solid var(--border); }
  .feature-card:last-child { border-bottom:none; }

  .footer-grid { grid-template-columns:1fr 1fr; gap:3rem; }
  .footer-brand { grid-column:1/-1; }

  .stats-grid { grid-template-columns:repeat(2,1fr); }
  #sidebar-toggle { display:flex; }
  .admin-sidebar { position:fixed; left:0; top:0; bottom:0; z-index:500; transform:translateX(-100%); }
  .admin-sidebar.open { transform:translateX(0); }
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE — 768px (mobile)
══════════════════════════════════════════════════════ */
@media (max-width:768px) {
  :root { --container: 100%; }

  /* Navbar */
  .nav-links { display:none; }
  .nav-inner { padding:0 1rem; height:58px; }
  .nav-logo { font-size:1.3rem; letter-spacing:6px; }
  .btn-nav-user { display:none; }
  .menu-toggle { display:flex; }
  .cart-btn { padding:.45rem .9rem; font-size:.6rem; }

  /* Page header */
  .page-hd { margin-top:58px; padding:2.5rem 1rem 2rem; }

  /* Hero */
  .hero { padding-top:58px; }
  .hero-text { padding:2.5rem 1rem 2rem; }
  .hero-title { font-size:clamp(2rem,8vw,3rem); }
  .hero-sub { max-width:100%; }
  .hero-actions { flex-direction:column; }
  .hero-actions .btn { width:100%; justify-content:center; }
  .hero-stats { gap:1.2rem; }
  .hero-img { min-height:60vw; order:1; }
  .hero-text { order:2; }

  /* Products */
  .products-grid {
    grid-template-columns:repeat(2,1fr);
    padding:0; margin-bottom:5rem;
  }
  .product-img { height:200px; }
  /* Show add button on mobile, hide overlay */
  .prod-overlay { display:none; }
  .prod-mobile-btn { display:block; }

  /* Filter */
  .filter-bar { padding:1rem; gap:.6rem; }
  .chips { gap:.4rem; }
  .chip { font-size:.72rem; padding:.38rem .75rem; }
  .search-box { min-width:100%; flex:none; width:100%; order:-1; }
  .form-row { grid-template-columns:1fr; }

  /* Cart */
  .cart-layout { padding:1.5rem 1rem 6rem; gap:1.5rem; }
  .cart-item { grid-template-columns:auto 1fr auto; gap:.8rem; }
  .cart-item-total,.cart-remove { display:none; }
  .cart-item-unit::after { content:attr(data-total); display:block; font-weight:700; color:var(--charcoal); font-size:.88rem; }

  /* Checkout */
  .checkout-layout { padding:1.5rem 1rem 6rem; gap:1.5rem; }

  /* Account */
  .account-grid { padding:1.5rem 1rem 6rem; }

  /* Section headings */
  .section-title { font-size:1.8rem; }
  .cats-grid { grid-template-columns:repeat(3,1fr); }

  /* Editorial */
  .editorial-grid { grid-template-columns:1fr; }
  .editorial-grid .editorial-card { aspect-ratio:4/3; grid-column:auto; }

  /* Features */
  .features-grid { grid-template-columns:1fr; }
  .feature-card { border-right:none; border-bottom:1px solid var(--border); }
  .feature-card:last-child { border-bottom:none; }
  .feature-card { padding:2rem 1.5rem; }

  /* Banner */
  .full-banner { height:300px; }
  .full-banner-content h2 { font-size:1.8rem; }

  /* Footer */
  .footer-grid { grid-template-columns:1fr; gap:2rem; padding:3rem 1.5rem 6rem; }

  /* Bottom nav */
  .bottom-nav { display:grid; }

  /* Modals */
  .modal { max-height:85vh; }
  .modal-bg { padding:.5rem; align-items:flex-end; }
  .modal { border-radius:12px 12px 0 0; }

  /* Admin */
  .admin-sidebar { width:260px; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .tbl-wrap { overflow-x:auto; }
  .admin-section { padding:.8rem; }
}

/* ══════════════════════════════════════════════════════
   AUTH (login.html) - applies to new design
══════════════════════════════════════════════════════ */
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--cream-2); padding:1rem; }
.login-card { background:var(--white); border:1px solid var(--border); padding:2.5rem; width:100%; max-width:400px; }