/* ============================================================
   PURE ESSENCE — Beauty E-Commerce
   Design system: soft cream + blush rose + champagne gold
   Fonts: Cormorant Garamond (display) + Jost (body)
   ============================================================ */

:root {
  /* Palette */
  --cream: #FBF7F2;
  --cream-2: #F6EFE7;
  --blush: #F4E4DF;
  --blush-2: #FBEFF1;
  --rose: #C98B8B;
  --rose-dark: #B06E70;
  --rose-deep: #9E5D60;
  --gold: #B99A6B;
  --gold-light: #E4D3B8;
  --ink: #3C312E;
  --ink-soft: #5C4F4A;
  --muted: #97877F;
  --line: #EADFD6;
  --white: #FFFFFF;
  --sage: #9BAE97;
  --green-soft: #E8EFE4;

  /* Semantic tokens (theme-aware) */
  --card: #FFFFFF;
  --glass: rgba(255, 255, 255, .92);
  --glass-soft: rgba(255, 255, 255, .5);
  --header-glass: rgba(251, 247, 242, .92);
  --overlay: rgba(60, 49, 46, .4);
  --accent-rgb: 201, 139, 139;
  --blob-1: #F9E8E4;
  --blob-2: #F0D5D2;
  --blob-3: #E5BFBC;
  --logo-g1: #E8C6C0;
  --blush-mid: #F7E9E6;
  --on-ink: var(--gold-light);
  --footer-text: #C9BCB2;
  --footer-border: #5C4F4A;
  --footer-line: #4A3D38;
  --footer-muted: #A89A90;
  --success: #4C6B4F;
  --danger: #B0503F;
  --danger-bg: #F6E4E1;
  --warn: #8A6D1F;
  --warn-bg: #FBF3D9;

  /* Status */
  --st-placed: #C98B8B;
  --st-confirmed: #B99A6B;
  --st-packed: #8FA7C9;
  --st-shipped: #7FA8A0;
  --st-out: #9B8FC0;
  --st-delivered: #7CA77E;
  --st-cancelled: #C4645A;

  /* Type */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Jost', 'Segoe UI', sans-serif;

  /* Shape */
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --shadow-sm: 0 2px 10px rgba(60, 49, 46, .06);
  --shadow: 0 8px 30px rgba(60, 49, 46, .10);
  --shadow-lg: 0 18px 50px rgba(60, 49, 46, .16);
  --shadow-rose: 0 10px 34px rgba(var(--accent-rgb), .28);

  --container: 1240px;
  --header-h: 74px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--ink);
  font-size: 15.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; font-size: 15px; color: var(--ink); }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; letter-spacing: .2px; }

h1 { font-size: clamp(40px, 6vw, 64px); }
h2 { font-size: clamp(30px, 4.4vw, 44px); }
h3 { font-size: clamp(20px, 2.6vw, 26px); }

.eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase;
  color: var(--rose-dark);
}
.section-title { text-align: center; margin-bottom: 8px; }
.section-sub { text-align: center; color: var(--muted); max-width: 520px; margin: 0 auto 44px; font-weight: 300; }

.italic { font-style: italic; }
.muted { color: var(--muted); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 30px; border-radius: 999px; font-weight: 500; font-size: 14.5px;
  letter-spacing: .06em; text-transform: uppercase; transition: all .28s ease;
  border: 1.5px solid transparent; white-space: nowrap;
}
.btn-primary { background: var(--ink); color: var(--cream); }
.btn-primary:hover { background: var(--rose-deep); transform: translateY(-2px); box-shadow: var(--shadow-rose); }

.btn-rose { background: var(--rose); color: #fff; }
.btn-rose:hover { background: var(--rose-dark); transform: translateY(-2px); box-shadow: var(--shadow-rose); }

.btn-outline { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-outline:hover { background: var(--ink); color: var(--cream); transform: translateY(-2px); }

.btn-ghost { color: var(--ink-soft); padding: 12px 18px; }
.btn-ghost:hover { color: var(--rose-deep); }

.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { transform: translateY(-2px); box-shadow: var(--shadow); }

.btn-danger { background: var(--danger-bg); color: var(--danger); }
.btn-danger:hover { background: #EFD3CE; }

.btn-sm { padding: 9px 20px; font-size: 12.5px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .5; pointer-events: none; }

/* ---------- Header ---------- */
.announce {
  background: var(--ink); color: var(--cream-2); text-align: center;
  font-size: 12.5px; letter-spacing: .22em; text-transform: uppercase;
  padding: 9px 16px; font-weight: 400;
}
.announce b { color: var(--on-ink); font-weight: 500; }

.site-header {
  position: sticky; top: 0; z-index: 900;
  background: var(--header-glass);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 16px; height: var(--header-h); }

.logo { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); flex-shrink: 0; }
.logo-mark {
  position: relative; width: 54px; height: 54px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--logo-g1), var(--rose) 70%);
  display: grid; place-items: center; color: #fff; font-size: 26px;
  box-shadow: inset 0 -3px 8px rgba(0,0,0,.12); flex-shrink: 0;
}
.logo-mark.logo-img { background: #fff; border: 1px solid var(--line); }
.logo-mark.logo-img img {
  position: absolute; inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px);
  object-fit: contain; border-radius: 12px; background: #fff;
}
.admin-side .logo .logo-mark { width: 40px; height: 40px; }
.logo-text {
  font-size: 24px; font-weight: 600; letter-spacing: .04em; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 38vw;
}
.logo-text em { font-style: italic; color: var(--rose-dark); }

.main-nav { display: flex; gap: 0; margin: 0 auto; min-width: 0; max-width: 50%; overflow-x: auto; scrollbar-width: none; }
.main-nav::-webkit-scrollbar { display: none; }
.main-nav a {
  padding: 7px 10px; font-size: 12.5px; font-weight: 500; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-soft); border-radius: 999px; transition: all .25s;
  position: relative; white-space: nowrap;
}
.main-nav a:hover { color: var(--rose-deep); background: var(--blush-2); }
.main-nav a.active { color: var(--rose-deep); background: var(--blush-2); }

.header-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.icon-btn {
  position: relative; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; transition: all .25s; color: var(--ink);
}
.icon-btn:hover { background: var(--blush); color: var(--rose-deep); transform: translateY(-1px); }
.icon-btn svg { width: 21px; height: 21px; }

.cart-badge {
  position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--rose-dark); color: #fff; font-size: 10.5px; font-weight: 600;
  border-radius: 999px; display: grid; place-items: center; border: 2px solid var(--cream);
}

.search-wrap { position: relative; }
.header-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 10px 7px 16px; min-width: 150px; transition: all .25s; flex-shrink: 1;
}
.header-search:focus-within { border-color: var(--rose); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .15); }
.header-search input { border: none; outline: none; background: none; width: 100px; font-size: 14px; }
.header-search svg { width: 16px; height: 16px; color: var(--muted); }
.header-search button { display: grid; place-items: center; color: var(--rose-dark); padding: 4px; }

/* Mobile menu */
.menu-toggle { display: none; }
.mobile-nav {
  display: none; position: fixed; inset: 0; background: var(--cream); z-index: 950;
  padding: 24px; flex-direction: column; gap: 8px;
}
.mobile-nav.open { display: flex; }
.mobile-nav a { font-size: 26px; font-family: var(--font-display); padding: 14px 8px; border-bottom: 1px solid var(--line); }
.mobile-nav-close { position: absolute; top: 20px; right: 20px; }

/* ---------- Cart drawer ---------- */
.drawer-overlay {
  position: fixed; inset: 0; background: var(--overlay); z-index: 980;
  opacity: 0; pointer-events: none; transition: opacity .3s;
}
.drawer-overlay.open { opacity: 1; pointer-events: auto; }

.cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 94vw);
  background: var(--cream); z-index: 990; display: flex; flex-direction: column;
  transform: translateX(105%); transition: transform .38s cubic-bezier(.32,.72,.32,1);
  box-shadow: var(--shadow-lg);
}
.cart-drawer.open { transform: translateX(0); }
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 26px; border-bottom: 1px solid var(--line);
}
.drawer-head h3 { font-size: 26px; }
.drawer-items { flex: 1; overflow-y: auto; padding: 18px 26px; display: flex; flex-direction: column; gap: 18px; }
.drawer-foot { padding: 20px 26px 26px;  border-top: 1px solid var(--line); background: var(--card); border-radius: 20px 20px 0 0; }

.mini-cart-item { display: flex; gap: 14px; align-items: center; }
.mini-cart-item img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; background: var(--card); }
.mini-cart-item .mi-info { flex: 1; min-width: 0; }
.mini-cart-item .mi-name { font-weight: 500; font-size: 14px; line-height: 1.3; }
.mini-cart-item .mi-meta { font-size: 12.5px; color: var(--muted); }
.qty-ctrl { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--line);  border-radius: 999px; padding: 4px 6px; background: var(--card); }
.qty-ctrl button { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; transition: background .2s; }
.qty-ctrl button:hover { background: var(--blush); }
.qty-ctrl span { min-width: 20px; text-align: center; font-weight: 500; font-size: 13.5px; }
.mini-remove { color: var(--muted); padding: 6px; border-radius: 50%; }
.mini-remove:hover { color: var(--danger); background: var(--danger-bg); }
.drawer-subtotal { display: flex; justify-content: space-between; font-weight: 500; margin-bottom: 14px; font-size: 16px; }
.drawer-subtotal span:last-child { font-family: var(--font-display); font-size: 22px; color: var(--rose-deep); }
.empty-drawer { text-align: center; padding: 60px 10px; color: var(--muted); }
.empty-drawer .ed-icon { font-size: 44px; margin-bottom: 12px; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; }
.hero-inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; padding: 64px 0 72px; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px; background: var(--blush-2);
  border: 1px solid var(--line); color: var(--rose-deep); padding: 8px 16px;
  border-radius: 999px; font-size: 12.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 22px;
}
.hero h1 { margin-bottom: 18px; }
.hero h1 em { font-style: italic; color: var(--rose-dark); }
.hero p.lead { color: var(--ink-soft); font-size: 17px; font-weight: 300; max-width: 460px; margin-bottom: 30px; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-trust { display: flex; gap: 26px; margin-top: 42px; flex-wrap: wrap; }
.hero-trust span { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); font-weight: 400; }
.hero-trust svg { width: 17px; height: 17px; color: var(--gold); }

.hero-visual { position: relative; }
.hero-visual .blob {
  position: absolute; inset: 4% 6%;  background: radial-gradient(circle at 35% 30%, var(--blob-1), var(--blob-2) 55%, var(--blob-3));
  border-radius: 46% 54% 58% 42% / 48% 42% 58% 52%;
  animation: blobFloat 9s ease-in-out infinite;
  z-index: 0;
}
@keyframes blobFloat {
  0%,100% { border-radius: 46% 54% 58% 42% / 48% 42% 58% 52%; transform: rotate(0deg) scale(1); }
  50% { border-radius: 55% 45% 42% 58% / 52% 58% 42% 48%; transform: rotate(3deg) scale(1.03); }
}
.hero-visual img {
  position: relative; z-index: 1; width: min(440px, 88%); margin: 0 auto;
  border-radius: 50% 50% 46% 46% / 42% 42% 58% 58%;
  box-shadow: 0 30px 70px rgba(var(--accent-rgb), .35);
  object-fit: cover; aspect-ratio: 1/1.12;
}
.hero-float {
  position: absolute; z-index: 2; background: var(--glass); backdrop-filter: blur(8px);
  border-radius: 16px; box-shadow: var(--shadow); padding: 12px 18px; display: flex; align-items: center; gap: 10px;
  font-size: 13px; animation: floaty 5s ease-in-out infinite;
}
.hero-float .ff-ico { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--blush-2); color: var(--rose-deep); }
.hero-float b { display: block; font-size: 13.5px; }
.hero-float span { color: var(--muted); font-size: 12px; }
.hero-float.f1 { top: 16%; left: 2%; }
.hero-float.f2 { bottom: 12%; right: 4%; animation-delay: 1.6s; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* Marquee ribbon */
.ribbon { background: var(--ink); color: var(--cream); padding: 13px 0; overflow: hidden; white-space: nowrap; }
.ribbon-track { display: inline-flex; gap: 44px; animation: scroll 26s linear infinite; font-size: 13px; letter-spacing: .3em; text-transform: uppercase; font-weight: 400; }
.ribbon-track span { display: inline-flex; align-items: center; gap: 44px; }
.ribbon-track i { color: var(--on-ink); font-style: normal; }
@keyframes scroll { to { transform: translateX(-50%); } }

/* ---------- Category tiles ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.cat-tile {
  position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/5;
  display: block; box-shadow: var(--shadow-sm); transition: all .35s ease; isolation: isolate;
}
.cat-tile:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.cat-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.cat-tile:hover img { transform: scale(1.07); }
.cat-tile .cat-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 22px; background: linear-gradient(to top, rgba(38,28,26,.72), transparent 62%);
  color: #fff;
}
.cat-tile .cat-overlay h3 { font-size: 25px; margin-bottom: 2px; }
.cat-tile .cat-overlay span { font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase; opacity: .85; display: flex; align-items: center; gap: 8px; }
.cat-tile .cat-overlay span::after { content: '→'; transition: transform .3s; }
.cat-tile:hover .cat-overlay span::after { transform: translateX(6px); }

/* ---------- Product cards ---------- */
.section-pad { padding: 84px 0; }
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }

.card {
  background: var(--card); border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-sm); transition: all .35s cubic-bezier(.2,.6,.3,1);
  display: flex; flex-direction: column; position: relative;
}
.card:hover { transform: translateY(-7px); box-shadow: var(--shadow-lg); }

.card-media { position: relative; aspect-ratio: 1/1.05; overflow: hidden; background: var(--cream-2); display: grid; place-items: center; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.card:hover .card-media img { transform: scale(1.06); }

.badge { position: absolute; top: 14px; left: 14px; z-index: 3; padding: 6px 12px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.badge-sale { background: var(--danger); }
.badge-new { background: var(--gold); }
.badge-best { background: var(--rose-deep); }

.wish-btn {
  position: absolute; top: 12px; right: 12px; z-index: 3; width: 36px; height: 36px;
  background: var(--glass); border-radius: 50%; display: grid; place-items: center;
  opacity: 0; transform: translateY(-6px); transition: all .3s; color: var(--ink-soft);
}
.card:hover .wish-btn { opacity: 1; transform: translateY(0); }
.wish-btn:hover { color: var(--danger); }
.wish-btn.active { color: var(--danger); opacity: 1; transform: none; }

.card-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.card-cat { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.card-title { font-family: var(--font-display); font-size: 21px; font-weight: 600; line-height: 1.2; }
.card-title a:hover { color: var(--rose-deep); }
.card-desc { font-size: 13.5px; color: var(--muted); font-weight: 300; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-price { display: flex; align-items: baseline; gap: 10px; margin-top: auto; padding-top: 8px; }
.price { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--rose-deep); }
.price-old { font-size: 14px; color: var(--muted); text-decoration: line-through; }
.price-disc { font-size: 12px; color: var(--danger); font-weight: 600; }

.stars { display: inline-flex; align-items: center; gap: 2px; color: var(--gold); font-size: 13px; }
.stars .sv { color: var(--muted); }
.stars small { color: var(--muted); margin-left: 6px; font-size: 12.5px; }

.card-actions { margin-top: 12px; }
.quick-add {
  width: 100%; padding: 11px; border-radius: 999px; border: 1.5px solid var(--ink);
  font-weight: 500; font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  transition: all .25s; background: transparent;
}
.quick-add:hover { background: var(--ink); color: var(--cream); }
.quick-add.added { background: var(--green-soft); border-color: var(--sage); color: var(--success); }

/* ---------- Value props ---------- */
.vp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.vp {
  background: var(--card); border-radius: var(--radius-lg); padding: 28px 22px; text-align: center;
  box-shadow: var(--shadow-sm); transition: all .3s; border: 1px solid var(--line);
}
.vp:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.vp .vp-ico {
  width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 50%;
  background: var(--blush-2); display: grid; place-items: center; color: var(--rose-deep);
}
.vp .vp-ico svg { width: 25px; height: 25px; }
.vp h4 { font-size: 20px; margin-bottom: 6px; }
.vp p { font-size: 13.5px; color: var(--muted); font-weight: 300; }

/* ---------- Bestsellers / featured ---------- */
.section-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 34px; gap: 20px; flex-wrap: wrap; }
.section-head .sh-left h2 { margin-top: 6px; }
.section-head .sh-left p { color: var(--muted); font-weight: 300; margin-top: 8px; }

/* ---------- Editorial banner ---------- */
.editorial { border-radius: var(--radius-lg); overflow: hidden; position: relative; display: grid; grid-template-columns: 1fr 1fr; box-shadow: var(--shadow); }
.editorial img { width: 100%; height: 100%; object-fit: cover; min-height: 380px; }
.editorial .ed-content { background: var(--ink); color: var(--cream); padding: 56px 52px; display: flex; flex-direction: column; justify-content: center; }
.editorial .ed-content .eyebrow { color: var(--on-ink); }
.editorial .ed-content h2 { margin: 12px 0 14px; font-size: clamp(28px, 3.4vw, 40px); }
.editorial .ed-content p {  color: var(--footer-text); font-weight: 300; margin-bottom: 26px; }

/* ---------- Testimonials ---------- */
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.testi {
  background: var(--card); border-radius: var(--radius-lg); padding: 30px 28px;
  box-shadow: var(--shadow-sm); border: 1px solid var(--line); position: relative; transition: all .3s;
}
.testi:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.testi .t-quote { position: absolute; top: 18px; right: 24px; font-family: var(--font-display); font-size: 64px; color: var(--blush); line-height: 1; }
.testi p { font-weight: 300; color: var(--ink-soft); margin: 10px 0 20px; }
.testi .t-user { display: flex; align-items: center; gap: 12px; }
.testi .t-ava { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; color: #fff; background: var(--rose); font-size: 16px; }
.testi .t-user b { display: block; font-size: 14.5px; }
.testi .t-user span { font-size: 12.5px; color: var(--muted); }

/* ---------- Newsletter ---------- */
.newsletter {  background: linear-gradient(135deg, var(--blush-2), var(--blush-mid) 55%, var(--blush)); border-radius: var(--radius-lg); padding: 64px 40px; text-align: center; position: relative; overflow: hidden; }
.newsletter::before, .newsletter::after { content: ''; position: absolute; border-radius: 50%;  background: var(--glass-soft); }
.newsletter::before { width: 220px; height: 220px; top: -80px; left: -60px; }
.newsletter::after { width: 160px; height: 160px; bottom: -60px; right: -30px; }
.newsletter > * { position: relative; z-index: 1; }
.newsletter h2 { margin: 10px 0 10px; }
.newsletter p { color: var(--ink-soft); font-weight: 300; margin-bottom: 28px; }
.nl-form { display: flex; gap: 10px; max-width: 460px; margin: 0 auto; }
.nl-form input { flex: 1; padding: 15px 22px; border-radius: 999px; border: 1px solid var(--line); outline: none; background: var(--card); }
.nl-form input:focus { border-color: var(--rose); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .15); }

/* ---------- Footer ---------- */
.site-footer {  background: var(--ink); color: var(--footer-text); margin-top: 90px; }
.footer-top { padding: 64px 0 40px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.footer-brand .logo-text { color: var(--cream); font-size: 30px; }
.footer-brand .logo-mark { width: 52px; height: 52px; }
.footer-brand p { font-weight: 300; margin: 16px 0 22px; font-size: 14px; max-width: 300px; }
.footer-col h4 { color: var(--cream); font-size: 19px; margin-bottom: 18px; }
.footer-col a, .footer-col li { display: block; font-size: 14px; padding: 5px 0; transition: all .25s; }
.footer-col a:hover { color: var(--gold-light); padding-left: 5px; }
.socials { display: flex; gap: 10px; }
.socials a { width: 38px; height: 38px; border-radius: 50%;  border: 1px solid var(--footer-border); display: grid; place-items: center; padding: 0; }
.socials a:hover { background: var(--rose-deep); border-color: var(--rose-deep); color: #fff; }
.socials svg { width: 16px; height: 16px; }
.footer-bottom {  border-top: 1px solid var(--footer-line); padding: 20px 0; display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 13px; }
.pay-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.pay-badges span {  border: 1px solid var(--footer-line); padding: 4px 12px; border-radius: 6px; font-size: 11px; letter-spacing: .1em; color: var(--footer-muted); }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { background: linear-gradient(180deg, var(--blush-2), var(--cream)); padding: 52px 0 40px; text-align: center; }
.page-hero h1 { font-size: clamp(34px, 5vw, 50px); }
.page-hero p { color: var(--muted); font-weight: 300; max-width: 540px; margin: 10px auto 0; }
.breadcrumb { display: flex; justify-content: center; gap: 8px; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.breadcrumb a:hover { color: var(--rose-deep); }
.breadcrumb span { color: var(--rose-dark); }

/* ---------- Products page ---------- */
.products-layout { display: grid; grid-template-columns: 260px 1fr; gap: 34px; padding: 44px 0 70px; align-items: start; }
.filter-panel { position: sticky; top: calc(var(--header-h) + 20px);  background: var(--card); border-radius: var(--radius-lg); padding: 26px 24px; box-shadow: var(--shadow-sm); border: 1px solid var(--line); }
.filter-panel h3 { font-size: 22px; margin-bottom: 18px; }
.f-group { padding: 16px 0; border-bottom: 1px solid var(--line); }
.f-group:last-child { border-bottom: none; }
.f-group h4 { font-size: 14px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 12px; font-family: var(--font-body); font-weight: 600; }
.f-option { display: flex; align-items: center; gap: 10px; padding: 6px 0; cursor: pointer; font-size: 14.5px; color: var(--ink-soft); }
.f-option input { accent-color: var(--rose-dark); width: 16px; height: 16px; cursor: pointer; }
.f-option:hover { color: var(--rose-deep); }
.f-option .count { margin-left: auto; font-size: 12px; color: var(--muted); }
.range-labels { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.f-clear { margin-top: 16px; width: 100%; }

.products-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 26px; flex-wrap: wrap; }
.products-toolbar .result-count { font-size: 14px; color: var(--muted); }
.products-toolbar .result-count b { color: var(--ink); }
.sort-select {  border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 10px 18px; outline: none; cursor: pointer; }
.sort-select:focus { border-color: var(--rose); }
.mobile-filters-btn { display: none; }
.products-grid-view { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.grid-3 { grid-template-columns: repeat(3, 1fr) !important; }
.no-results { text-align: center; padding: 70px 20px;  background: var(--card); border-radius: var(--radius-lg); border: 1px dashed var(--line); }
.no-results .nr-icon { font-size: 40px; margin-bottom: 10px; }
.no-results h3 { margin-bottom: 8px; }
.no-results p { color: var(--muted); font-weight: 300; margin-bottom: 18px; }

/* ---------- Product detail ---------- */
.pd-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; padding: 48px 0 70px; align-items: start; }
.pd-gallery { position: sticky; top: calc(var(--header-h) + 24px); }
.pd-main-img { border-radius: var(--radius-lg);  overflow: hidden; aspect-ratio: 1/1.05; background: var(--card); box-shadow: var(--shadow-sm); }
.pd-main-img img { width: 100%; height: 100%; object-fit: cover; }
.pd-thumbs { display: flex; gap: 12px; margin-top: 14px; }
.pd-thumbs img { width: 76px; height: 82px; border-radius: 12px; object-fit: cover; cursor: pointer; border: 2px solid transparent; opacity: .75; transition: all .25s; }
.pd-thumbs img:hover { opacity: 1; }
.pd-thumbs img.active { border-color: var(--rose); opacity: 1; }

.pd-info .eyebrow { margin-bottom: 10px; }
.pd-info h1 { font-size: clamp(30px, 3.6vw, 44px); margin-bottom: 12px; }
.pd-rating-line { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; font-size: 14px; }
.pd-rating-line a { color: var(--muted); text-decoration: underline; }
.pd-price-row { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; }
.pd-price-row .price { font-size: 34px; }
.pd-price-row .price-old { font-size: 18px; }
.pd-desc { color: var(--ink-soft); font-weight: 300; margin-bottom: 24px; max-width: 520px; }

.pd-block { margin-bottom: 24px; }
.pd-block h4 { font-family: var(--font-body); font-size: 13.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 12px; }

.variant-row { display: flex; gap: 10px; flex-wrap: wrap; }
.variant-chip { padding: 10px 20px; border-radius: 999px;  border: 1.5px solid var(--line); font-size: 14px; cursor: pointer; transition: all .22s; background: var(--card); }
.variant-chip:hover { border-color: var(--rose); }
.variant-chip.selected { border-color: var(--ink); background: var(--ink); color: var(--cream); }

.stock-line { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; padding: 8px 16px; border-radius: 999px; margin-bottom: 20px; }
.stock-in { background: var(--green-soft); color: var(--success); }
.stock-low { background: var(--warn-bg); color: var(--warn); }
.stock-out { background: var(--danger-bg); color: var(--danger); }
.stock-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

.pd-qty { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
.pd-qty .qty-ctrl { padding: 8px 10px; }
.pd-qty .qty-ctrl button { width: 30px; height: 30px; }
.pd-qty .qty-ctrl span { min-width: 30px; font-size: 16px; }

.pd-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 26px; }

.pd-perks { border-top: 1px solid var(--line); padding-top: 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pd-perk { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: var(--muted); }
.pd-perk svg { width: 18px; height: 18px; color: var(--rose-dark); flex-shrink: 0; margin-top: 2px; }

/* Tabs */
.pd-tabs { margin-top: 30px; }
.tab-bar { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 30px; }
.tab-btn { padding: 14px 22px; font-size: 14px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border-bottom: 2.5px solid transparent; margin-bottom: -1px; transition: all .25s; }
.tab-btn:hover { color: var(--rose-deep); }
.tab-btn.active { color: var(--rose-deep); border-color: var(--rose-dark); }
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fadeUp .4s ease; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.pd-tabs .desc-body { max-width: 680px; color: var(--ink-soft); font-weight: 300; }
.pd-tabs .desc-body p { margin-bottom: 12px; }

.review {  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; margin-bottom: 14px; }
.review .r-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.review .r-ava { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 600; font-size: 15px; background: var(--gold); }
.review .r-name { font-weight: 500; font-size: 14.5px; }
.review .r-date { font-size: 12px; color: var(--muted); }
.review p { font-weight: 300; font-size: 14.5px; }
.verified-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--success); background: var(--green-soft); padding: 3px 10px; border-radius: 999px; margin-left: auto; }

.review-form { background: var(--blush-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; margin-top: 26px; }
.review-form h4 { font-family: var(--font-display); font-size: 22px; margin-bottom: 14px; }
.rating-pick { display: flex; gap: 6px; font-size: 26px; color: var(--gold-light); margin-bottom: 14px; cursor: pointer; }
.rating-pick span { transition: transform .2s, color .2s; }
.rating-pick span:hover { transform: scale(1.15); }
.rating-pick span.on { color: var(--gold); }

/* ---------- Forms ---------- */
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; }
.field input, .field select, .field textarea {
  width: 100%;  padding: 14px 18px; border-radius: 12px; border: 1.5px solid var(--line);
  background: var(--card); outline: none; transition: all .25s; font-weight: 300;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--rose); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .15); }
.field .hint { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.field input.error { border-color: var(--danger); }
.field .err-msg { display: none; color: var(--danger); font-size: 12.5px; margin-top: 5px; }
.field.invalid .err-msg { display: block; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }

/* Payment options */
.pay-option { display: flex; align-items: center; gap: 14px; border: 1.5px solid var(--line);  border-radius: var(--radius); padding: 16px 18px; margin-bottom: 12px; cursor: pointer; transition: all .22s; background: var(--card); }
.pay-option:hover { border-color: var(--rose); }
.pay-option.selected { border-color: var(--rose-dark); background: var(--blush-2); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .12); }
.pay-option .po-radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); flex-shrink: 0; display: grid; place-items: center; transition: all .2s; }
.pay-option.selected .po-radio { border-color: var(--rose-dark); }
.pay-option.selected .po-radio::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--rose-dark); }
.pay-option .po-ico { font-size: 22px; }
.pay-option b { display: block; font-size: 15px; }
.pay-option span { font-size: 12.5px; color: var(--muted); }

/* ---------- Cart page ---------- */
.cart-layout { display: grid; grid-template-columns: 1fr 360px; gap: 34px; padding: 48px 0 70px; align-items: start; }
.cart-items { display: flex; flex-direction: column; gap: 18px; }
.cart-item { display: grid; grid-template-columns: 100px 1fr auto; gap: 20px;  background: var(--card); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-sm); border: 1px solid var(--line); align-items: center; transition: all .3s; }
.cart-item:hover { box-shadow: var(--shadow); }
.cart-item img { width: 100px; height: 110px; object-fit: cover; border-radius: 12px; }
.ci-info { min-width: 0; }
.ci-info .ci-cat { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.ci-info .ci-name { font-family: var(--font-display); font-size: 21px; font-weight: 600; }
.ci-info .ci-meta { font-size: 13px; color: var(--muted); }
.ci-right { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.ci-price { font-family: var(--font-display); font-size: 21px; font-weight: 700; color: var(--rose-deep); }
.ci-remove { font-size: 12.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.ci-remove:hover { color: var(--danger); }

.summary-card {  background: var(--card); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-sm); border: 1px solid var(--line); position: sticky; top: calc(var(--header-h) + 20px); }
.summary-card h3 { font-size: 24px; margin-bottom: 20px; }
.sum-row { display: flex; justify-content: space-between; padding: 9px 0; font-size: 15px; color: var(--ink-soft); }
.sum-row.total { border-top: 1.5px dashed var(--line); margin-top: 10px; padding-top: 16px; font-weight: 600; color: var(--ink); font-size: 16px; }
.sum-row.total span:last-child { font-family: var(--font-display); font-size: 26px; color: var(--rose-deep); font-weight: 700; }
.sum-row .free { color: var(--success); font-weight: 500; }
.summary-card .btn { margin-top: 18px; }
.free-ship-bar { background: var(--blush-2); border-radius: 12px; padding: 12px 16px; font-size: 13px; margin-bottom: 18px; }
.free-ship-bar .fs-track {  height: 6px; background: var(--card); border-radius: 99px; margin-top: 8px; overflow: hidden; }
.free-ship-bar .fs-fill { height: 100%; background: linear-gradient(90deg, var(--rose), var(--gold)); border-radius: 99px; transition: width .4s; }

/* ---------- Checkout ---------- */
.checkout-layout { display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; padding: 48px 0 70px; align-items: start; }
.checkout-section {  background: var(--card); border-radius: var(--radius-lg); padding: 30px; box-shadow: var(--shadow-sm); border: 1px solid var(--line); margin-bottom: 22px; }
.checkout-section h3 { font-size: 24px; margin-bottom: 20px; display: flex; align-items: center; gap: 12px; }
.sec-num { width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--cream); display: grid; place-items: center; font-size: 14px; font-family: var(--font-body); }
.checkout-mini-item { display: flex; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.checkout-mini-item:last-child { border-bottom: none; }
.checkout-mini-item img { width: 54px; height: 54px; border-radius: 10px; object-fit: cover; }
.checkout-mini-item .cm-name { font-size: 14px; font-weight: 500; flex: 1; }
.checkout-mini-item .cm-qty { font-size: 12.5px; color: var(--muted); }
.checkout-mini-item .cm-price { font-weight: 600; font-size: 14px; }

/* ---------- Confirmation ---------- */
.confirm-wrap { padding: 60px 0 80px; max-width: 640px; margin: 0 auto; text-align: center; }
.confirm-icon { width: 92px; height: 92px; border-radius: 50%; background: var(--green-soft); color: var(--success); display: grid; place-items: center; margin: 0 auto 26px; animation: pop .5s cubic-bezier(.2,1.4,.4,1); }
.confirm-icon svg { width: 44px; height: 44px; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.order-no-box { display: inline-flex; align-items: center; gap: 14px; background: var(--ink); color: var(--cream); border-radius: 14px; padding: 16px 28px; margin: 24px 0; }
.order-no-box span { font-size: 12px; letter-spacing: .2em; text-transform: uppercase;  color: var(--muted); }
.order-no-box b { font-family: var(--font-display); font-size: 26px; letter-spacing: .08em; color: var(--on-ink); }
.confirm-card {  background: var(--card); border-radius: var(--radius-lg); padding: 30px; box-shadow: var(--shadow); text-align: left; margin-bottom: 22px; border: 1px solid var(--line); }
.confirm-card h4 { font-size: 22px; margin-bottom: 16px; }
.confirm-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }

/* ---------- Tracking ---------- */
.track-wrap { max-width: 780px; margin: 0 auto; padding: 48px 0 80px; }
.track-search {  background: var(--card); border-radius: var(--radius-lg); padding: 34px; box-shadow: var(--shadow-sm); border: 1px solid var(--line); text-align: center; margin-bottom: 34px; }
.track-search h2 { margin-bottom: 8px; }
.track-search p { color: var(--muted); font-weight: 300; margin-bottom: 22px; }
.track-form { display: flex; gap: 10px; max-width: 460px; margin: 0 auto; }
.track-form input { flex: 1; padding: 15px 20px; border-radius: 999px; border: 1.5px solid var(--line); outline: none; text-align: center; font-weight: 500; letter-spacing: .08em; }
.track-form input:focus { border-color: var(--rose); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .15); }

.track-card {  background: var(--card); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--line); overflow: hidden; }
.track-head { padding: 26px 30px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.track-head .th-no { font-family: var(--font-display); font-size: 24px; }
.track-head .th-date { font-size: 13px; color: var(--muted); }
.status-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: .06em; }

.timeline { padding: 34px 30px 14px; }
.tl-step { position: relative; padding-left: 44px; padding-bottom: 34px; }
.tl-step:last-child { padding-bottom: 10px; }
.tl-step::before { content: ''; position: absolute; left: 13px; top: 30px; bottom: 0; width: 2px; background: var(--line); }
.tl-step:last-child::before { display: none; }
.tl-step.done::before { background: var(--rose); }
.tl-dot { position: absolute; left: 0; top: 2px; width: 28px; height: 28px; border-radius: 50%;  background: var(--card); border: 2px solid var(--line); display: grid; place-items: center; z-index: 1; }
.tl-step.done .tl-dot { border-color: var(--rose); background: var(--rose); color: #fff; }
.tl-step.active .tl-dot { border-color: var(--rose-dark); background: var(--blush-2); color: var(--rose-deep); box-shadow: 0 0 0 5px rgba(var(--accent-rgb), .18); animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .16); } 50% { box-shadow: 0 0 0 8px rgba(var(--accent-rgb), .08); } }
.tl-dot svg { width: 13px; height: 13px; }
.tl-title { font-weight: 600; font-size: 15.5px; }
.tl-step.active .tl-title { color: var(--rose-deep); }
.tl-step.cancelled .tl-title { color: var(--danger); }
.tl-date { font-size: 12.5px; color: var(--muted); }
.tl-note { font-size: 13px; color: var(--muted); font-weight: 300; }

.track-items { padding: 0 30px 26px; }
.track-item { display: flex; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px dashed var(--line); }
.track-item:last-child { border-bottom: none; }
.track-item img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; }
.track-item .ti-name { font-weight: 500; font-size: 14.5px; flex: 1; }
.track-item .ti-qty { font-size: 13px; color: var(--muted); }
.track-item .ti-price { font-weight: 600; }
.track-foot { padding: 20px 30px; background: var(--blush-2); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;  border-top: 1px solid var(--line); }

/* ---------- Account ---------- */
.auth-layout { max-width: 430px; margin: 0 auto; padding: 60px 0 80px; }
.auth-card {  background: var(--card); border-radius: var(--radius-lg); padding: 40px 36px; box-shadow: var(--shadow); border: 1px solid var(--line); }
.auth-card h2 { text-align: center; margin-bottom: 8px; }
.auth-card .auth-sub { text-align: center; color: var(--muted); font-weight: 300; margin-bottom: 28px; }
.auth-alt { text-align: center; font-size: 14px; color: var(--muted); margin-top: 18px; }
.auth-alt a { color: var(--rose-deep); font-weight: 500; }
.demo-hint { background: var(--blush-2); border: 1px dashed #E5C0BD; border-radius: 12px; padding: 12px 16px; font-size: 12.5px; color: var(--rose-deep); text-align: center; margin-bottom: 24px; }

.dash-layout { max-width: 900px; margin: 0 auto; padding: 48px 0 80px; }
.dash-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 30px; flex-wrap: wrap; }
.dash-head .dh-user { display: flex; align-items: center; gap: 16px; }
.dash-ava { width: 58px; height: 58px; border-radius: 50%; background: linear-gradient(135deg, var(--rose), var(--gold)); color: #fff; display: grid; place-items: center; font-size: 24px; font-family: var(--font-display); }
.dash-head h1 { font-size: 30px; }
.dash-head p { color: var(--muted); font-size: 14px; }

.account-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin-bottom: 26px; }
.account-tab { padding: 12px 22px; font-size: 14px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border-bottom: 2.5px solid transparent; margin-bottom: -1px; }
.account-tab.active { color: var(--rose-deep); border-color: var(--rose-dark); }

.table-wrap {  background: var(--card); border-radius: var(--radius-lg); border: 1px solid var(--line); overflow: hidden; box-shadow: var(--shadow-sm); }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 560px; }
th { text-align: left; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); padding: 16px 20px; border-bottom: 1px solid var(--line); font-weight: 600; }
td { padding: 16px 20px; border-bottom: 1px solid var(--line); font-size: 14.5px; vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tbody tr { transition: background .2s; }
tbody tr:hover { background: var(--blush-2); }
td .td-strong { font-weight: 500; }

.notif-item { display: flex; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--line); align-items: flex-start; }
.notif-item:last-child { border-bottom: none; }
.notif-item .n-ico { width: 38px; height: 38px; border-radius: 50%; background: var(--blush-2); color: var(--rose-deep); display: grid; place-items: center; flex-shrink: 0; }
.notif-item .n-text b { font-weight: 500; font-size: 14.5px; }
.notif-item .n-text p { font-size: 13.5px; color: var(--muted); font-weight: 300; }
.notif-item .n-date { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* ---------- Admin ---------- */
.admin-body { background: #F4EFEA; }

/* Admin theme — Light (off-white) / Dark (black). data-admin-theme on <body> */
body[data-admin-theme="dark"] {
  --card: #211C1C;
  --cream: #211C1C;
  --cream-2: #2A2423;
  --blush: #37292B;
  --blush-2: #35262A;
  --blush-mid: #312527;
  --line: #3D3331;
  --ink: #F2E9E4;
  --ink-soft: #D8CCC5;
  --muted: #A3908A;
  --shadow-sm: 0 2px 10px rgba(0,0,0,.35);
  --shadow: 0 8px 30px rgba(0,0,0,.5);
  --shadow-lg: 0 18px 50px rgba(0,0,0,.6);
  --glass: rgba(33,28,28,.92);
  --header-glass: rgba(33,28,28,.92);
  --overlay: rgba(0,0,0,.65);
  --green-soft: #24342A;
  --warn-bg: #3A3320;
  --danger-bg: #442B28;
  --gold: #D4B183;
  --gold-light: #C9B18C;
  --logo-g1: #4A3236;
}
body[data-admin-theme="dark"] .admin-body,
body[data-admin-theme="dark"] { background: #171313; }
body[data-admin-theme="dark"] .admin-main { color: var(--ink); }
body[data-admin-theme="dark"] .admin-panel,
body[data-admin-theme="dark"] .stat-card,
body[data-admin-theme="dark"] .admin-toolbar .at-search,
body[data-admin-theme="dark"] .icon-btn-sm,
body[data-admin-theme="dark"] .modal { background: var(--card); }
body[data-admin-theme="dark"] .modal-head { background: var(--card); }
body[data-admin-theme="dark"] tbody tr:hover { background: #2B2423; }
body[data-admin-theme="dark"] .sales-bar-row .sbr-track { background: #332B29; }
body[data-admin-theme="dark"] .field input, body[data-admin-theme="dark"] .field select, body[data-admin-theme="dark"] .field textarea { background: #262020; color: var(--ink); }
body[data-admin-theme="dark"] .field label { color: var(--ink-soft); }
body[data-admin-theme="dark"] .stock-editable input { background: #262020; color: var(--ink); }
body[data-admin-theme="dark"] .stock-editable input.low { background: var(--warn-bg); color: #E0B45A; }
body[data-admin-theme="dark"] .stock-editable input.out { background: var(--danger-bg); color: #E07A6A; }
body[data-admin-theme="dark"] .rv-row { border-color: var(--line); }
body[data-admin-theme="dark"] .rv-empty { color: var(--muted); }
body[data-admin-theme="dark"] .toast { background: #2B2423; border: 1px solid var(--line); }
body[data-admin-theme="dark"] .auth-card { background: var(--card); }
body[data-admin-theme="dark"] .demo-hint { background: #35262A; border-color: #5A3A3E; }
body[data-admin-theme="dark"] .auth-alt a { color: #D89A9C; }
body[data-admin-theme="dark"] .btn-outline { border-color: var(--ink); color: var(--ink); }
body[data-admin-theme="dark"] .btn-outline:hover { background: var(--ink); color: #171313; }
body[data-admin-theme="dark"] .btn-ghost { color: var(--ink-soft); }
body[data-admin-theme="dark"] .admin-hamburger { background: #262020 !important; border-color: var(--line) !important; }
body[data-admin-theme="dark"] .od-step.pending .od-dot { background: #332B29; color: var(--muted); }
body[data-admin-theme="dark"] .admin-side { background: #120F0F; }
body[data-admin-theme="dark"] .admin-nav button:hover { background: #2B2423; }
body[data-admin-theme="dark"] .icon-btn-sm.danger:hover { background: var(--danger-bg); }
body[data-admin-theme="dark"] .modal-overlay { background: rgba(0,0,0,.7); }
body[data-admin-theme="dark"] .sc-3 .sc-ico { background: #2A3242; color: #93A7CF; }
body[data-admin-theme="dark"] .stock-editable input.low { border-color: #B8860B; }
body[data-admin-theme="dark"] .stock-editable input.out { border-color: #C4543F; }
body[data-admin-theme="dark"] .pill[data-pill="out"] { background: #442B28 !important; color: #E58A7A !important; }
body[data-admin-theme="dark"] .pill[data-pill="low"] { background: #3A3320 !important; color: #E0B45A !important; }
body[data-admin-theme="dark"] .pill[data-pill="best"] { background: #35262A !important; color: #D89A9C !important; }
body[data-admin-theme="dark"] .pill[data-pill="active"] { background: #24342A !important; color: #8FB893 !important; }

/* Admin theme toggle card in Settings */
.at-theme-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; max-width: 560px; }
.at-theme-card {
  border: 2px solid var(--line); border-radius: 16px; padding: 16px 18px; cursor: pointer;
  display: flex; align-items: center; gap: 14px; transition: all .25s; background: var(--card);
}
.at-theme-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.at-theme-card.active { border-color: var(--rose-deep); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .2); }
.at-theme-card .atc-swatch { width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center; font-size: 18px; border: 1px solid var(--line); }
.at-theme-card.light .atc-swatch { background: #F4EFEA; color: #3C312E; }
.at-theme-card.dark .atc-swatch { background: #171313; color: #F2E9E4; }
.at-theme-card b { display: block; font-size: 15px; }
.at-theme-card span { font-size: 12.5px; color: var(--muted); }
.at-theme-card .atc-check { margin-left: auto; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--blush-2); color: var(--rose-deep); font-size: 13px; }
.admin-shell { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }
.admin-side { background: var(--ink); color: #C9BCB2; padding: 26px 18px; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; }
.admin-side .logo-text { color: var(--cream); font-size: 23px; max-width: 150px; }
.admin-side .logo { padding: 0 10px 24px; border-bottom: 1px solid #4A3D38; margin-bottom: 20px; }
.admin-nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.admin-nav button { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 12px; font-size: 14.5px; color: #C9BCB2; transition: all .22s; text-align: left; width: 100%; }
.admin-nav button:hover { background: #4A3D38; color: #fff; }
.admin-nav button.active { background: var(--rose-deep); color: #fff; }
.admin-nav svg { width: 18px; height: 18px; flex-shrink: 0; }
.admin-nav .nav-count { margin-left: auto; background: rgba(255,255,255,.15); border-radius: 999px; padding: 2px 10px; font-size: 12px; }
.admin-nav button.active .nav-count { background: rgba(255,255,255,.25); }
.admin-side .admin-user { border-top: 1px solid #4A3D38; padding-top: 16px; display: flex; align-items: center; gap: 12px; }
.admin-side .admin-user .au-ava { width: 38px; height: 38px; border-radius: 50%; background: var(--gold); display: grid; place-items: center; color: var(--ink); font-weight: 700; }
.admin-side .admin-user b { display: block; font-size: 13.5px; color: var(--cream); }
.admin-side .admin-user span { font-size: 11.5px; }

.admin-main { padding: 30px 36px 60px; min-width: 0; }
.admin-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; gap: 16px; flex-wrap: wrap; }
.admin-topbar h1 { font-size: 32px; }
.admin-topbar .sub { color: var(--muted); font-size: 14px; }

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 26px; }
.stat-card { background: #fff; border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm); border: 1px solid var(--line); position: relative; overflow: hidden; transition: all .3s; }
.stat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.stat-card .sc-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 14px; }
.stat-card .sc-ico svg { width: 21px; height: 21px; }
.stat-card .sc-label { font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.stat-card .sc-value { font-family: var(--font-display); font-size: 32px; font-weight: 700; margin-top: 4px; }
.stat-card .sc-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.sc-1 .sc-ico { background: var(--blush-2); color: var(--rose-deep); }
.sc-2 .sc-ico { background: var(--green-soft); color: var(--success); }
.sc-3 .sc-ico { background: #EDF0F8; color: #5B6E9C; }
.sc-4 .sc-ico { background: var(--warn-bg); color: var(--warn); }

.admin-grid-2 { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; margin-bottom: 26px; }
.admin-panel {  background: var(--card); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--line); overflow: hidden; }
.admin-panel .ap-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.admin-panel .ap-head h3 { font-size: 20px; }
.admin-panel .ap-body { padding: 20px 24px; }

.sales-bar-row { display: flex; align-items: center; gap: 14px; padding: 9px 0; }
.sales-bar-row .sbr-label { width: 90px; font-size: 13.5px; font-weight: 500; }
.sales-bar-row .sbr-track { flex: 1; height: 10px; background: var(--cream-2); border-radius: 99px; overflow: hidden; }
.sales-bar-row .sbr-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--rose), #E2A9A9); transition: width .8s ease; }
.sales-bar-row .sbr-val { width: 70px; text-align: right; font-size: 13px; color: var(--muted); }

.pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .05em; }

.admin-hamburger { display: none; }
.admin-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.admin-toolbar .at-search { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 10px 16px; min-width: 260px; }
.admin-toolbar .at-search input { border: none; outline: none; background: none; flex: 1; font-size: 14px; }

.admin-actions { display: flex; gap: 8px; }
.icon-btn-sm { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; transition: all .2s; border: 1px solid var(--line); background: #fff; }
.icon-btn-sm:hover { border-color: var(--rose); color: var(--rose-deep); }
.icon-btn-sm.danger:hover { border-color: var(--danger); color: var(--danger); background: #FBEDEB; }
.icon-btn-sm svg { width: 16px; height: 16px; }

.stock-editable { display: inline-flex; align-items: center; gap: 8px; }
.stock-editable input { width: 74px; padding: 8px 10px; border-radius: 10px; border: 1.5px solid var(--line); text-align: center; font-weight: 500; }
.stock-editable input:focus { border-color: var(--rose); outline: none; }
.stock-editable input.low { border-color: #E0A32E; background: var(--warn-bg); color: var(--warn); }
.stock-editable input.out { border-color: var(--danger); background: #FBEDEB; color: #B0503F; }

/* Modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(60,49,46,.5); z-index: 1000; display: grid; place-items: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity .25s; }
.modal-overlay.open { opacity: 1; pointer-events: auto; }
.modal { background: var(--cream); border-radius: var(--radius-lg); width: min(560px, 100%); max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-lg); transform: translateY(24px) scale(.97); transition: transform .3s cubic-bezier(.2,.8,.3,1); }
.modal-overlay.open .modal { transform: none; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 24px 28px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--cream); z-index: 2; }
.modal-head h3 { font-size: 24px; }
.modal-body { padding: 26px 28px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 12px; padding: 20px 28px; border-top: 1px solid var(--line); }

/* Order detail modal */
.od-status-history { display: flex; flex-direction: column; gap: 0; margin-bottom: 22px; }
.od-step { display: flex; gap: 14px; position: relative; padding-bottom: 20px; }
.od-step::before { content: ''; position: absolute; left: 13px; top: 30px; bottom: 2px; width: 2px; background: var(--line); }
.od-step:last-child::before { display: none; }
.od-dot { width: 28px; height: 28px; border-radius: 50%; background: var(--green-soft); color: var(--success); display: grid; place-items: center; font-size: 12px; }
.od-step.pending .od-dot { background: var(--cream-2); color: var(--muted); }
.od-step b { font-size: 14.5px; display: block; }
.od-step span { font-size: 12.5px; color: var(--muted); }

/* ---------- Toasts ---------- */
.toast-wrap { position: fixed; bottom: 26px; right: 26px; z-index: 1100; display: flex; flex-direction: column; gap: 12px; }
.toast {
  display: flex; align-items: center; gap: 14px; background: var(--ink); color: var(--cream);
  padding: 15px 22px; border-radius: 16px; box-shadow: var(--shadow-lg); min-width: 300px; max-width: 380px;
  animation: toastIn .4s cubic-bezier(.2,1.2,.4,1); position: relative; overflow: hidden;
}
.toast.out { animation: toastOut .35s ease forwards; }
@keyframes toastIn { from { transform: translateX(120%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes toastOut { to { transform: translateX(120%); opacity: 0; } }
.toast .t-ico { width: 38px; height: 38px; border-radius: 50%; background: var(--rose-deep); display: grid; place-items: center; flex-shrink: 0; }
.toast.success .t-ico { background: var(--success); }
.toast.error .t-ico { background: var(--danger); }
.toast .t-ico svg { width: 19px; height: 19px; }
.toast b { display: block; font-size: 14.5px; }
.toast span { font-size: 13px; color: #C9BCB2; }
.toast .t-bar { position: absolute; bottom: 0; left: 0; height: 3px; background: var(--rose); animation: tbar linear forwards; }
.toast.success .t-bar { background: #7CA77E; }
@keyframes tbar { from { width: 100%; } to { width: 0; } }

/* ---------- Back to top ---------- */
.to-top { position: fixed; bottom: 26px; left: 26px;  width: 46px; height: 46px; border-radius: 50%; background: var(--card); box-shadow: var(--shadow); display: grid; place-items: center; opacity: 0; pointer-events: none; transition: all .3s; z-index: 800; border: 1px solid var(--line); }
.to-top.show { opacity: 1; pointer-events: auto; }
.to-top:hover { background: var(--ink); color: var(--cream); transform: translateY(-3px); }

/* ---------- WhatsApp floating button ---------- */
.wa-float { position: fixed; right: 22px; bottom: 22px; width: 62px; height: 62px; border-radius: 50%; background: #25D366; color: #fff; display: grid; place-items: center; box-shadow: 0 10px 26px rgba(37,211,102,.5); z-index: 860; transition: transform .25s ease; }
.wa-float:hover { transform: scale(1.09) translateY(-3px); }
.wa-float::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: rgba(37,211,102,.55); z-index: -1; animation: waPulse 2.2s ease-out infinite; }
@keyframes waPulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.75); opacity: 0; } }
.wa-float .wa-tip { position: absolute; right: 76px; top: 50%; transform: translateY(-50%) translateX(6px); background: var(--ink); color: var(--cream); font-size: 13px; font-weight: 500; padding: 8px 14px; border-radius: 999px; white-space: nowrap; opacity: 0; pointer-events: none; transition: all .25s ease; box-shadow: var(--shadow); }
.wa-float:hover .wa-tip { opacity: 1; transform: translateY(-50%) translateX(0); }
.wa-demo { display: inline-flex; align-items: center; gap: 10px; background: #25D366; color: #fff; padding: 13px 22px; border-radius: 999px; font-weight: 600; font-size: 15px; box-shadow: 0 8px 20px rgba(37,211,102,.4); transition: transform .2s; }
.wa-demo:hover { transform: translateY(-2px); color: #fff; }

/* ============================================================
   THEMES — selectable store themes (data-theme on <html>)
   ============================================================ */

/* ---------- Lavender Dream ---------- */
[data-theme="lavender"] {
  --cream: #FAF8FD; --cream-2: #F2EEF9; --blush: #EDE4F7; --blush-2: #F4EEFB; --blush-mid: #E4D6F3;
  --rose: #A78CC8; --rose-dark: #8E6FB5; --rose-deep: #7858A1;
  --gold: #B99A6B; --gold-light: #E4D3B8; --on-ink: #E4D3B8;
  --ink: #39324A; --ink-soft: #574E68; --muted: #948BA6; --line: #E7DFF0;
  --sage: #97A894; --green-soft: #E8EFE4;
  --card: #FFFFFF; --glass: rgba(255,255,255,.92); --glass-soft: rgba(255,255,255,.5);
  --header-glass: rgba(250,248,253,.92); --overlay: rgba(39,32,52,.42);
  --accent-rgb: 167, 140, 200;
  --blob-1: #EFE5F9; --blob-2: #E3D4F5; --blob-3: #D5C0EC;
  --logo-g1: #D8C4F0;
  --footer-text: #C9BCB2; --footer-border: #574E68; --footer-line: #453D55; --footer-muted: #A99FB8;
  --success: #4C6B4F; --danger: #B0503F; --danger-bg: #F6E4E1; --warn: #8A6D1F; --warn-bg: #FBF3D9;
}

/* ---------- Sakura Pink ---------- */
[data-theme="sakura"] {
  --cream: #FDF7F7; --cream-2: #F9EEF0; --blush: #F7E2E8; --blush-2: #FDEEF1; --blush-mid: #F2D3DC;
  --rose: #E79AAD; --rose-dark: #D97B93; --rose-deep: #C25E7C;
  --gold: #D9A26B; --gold-light: #F0DFC9; --on-ink: #F0DFC9;
  --ink: #432F36; --ink-soft: #62484F; --muted: #A08890; --line: #F1DFE4;
  --sage: #9BAE97; --green-soft: #E8EFE4;
  --card: #FFFFFF; --glass: rgba(255,255,255,.92); --glass-soft: rgba(255,255,255,.5);
  --header-glass: rgba(253,247,247,.92); --overlay: rgba(43,28,33,.42);
  --accent-rgb: 231, 154, 173;
  --blob-1: #FCE4EA; --blob-2: #F7D3DC; --blob-3: #EFBDCA;
  --logo-g1: #F0C8D3;
  --footer-text: #C9BCB2; --footer-border: #62484F; --footer-line: #4E3A41; --footer-muted: #B3A0A7;
  --success: #4C6B4F; --danger: #B0503F; --danger-bg: #F6E4E1; --warn: #8A6D1F; --warn-bg: #FBF3D9;
}

/* ---------- Peach Nectar ---------- */
[data-theme="peach"] {
  --cream: #FDF8F4; --cream-2: #FAF0E9; --blush: #F8E4D8; --blush-2: #FDF0E8; --blush-mid: #F3D8C6;
  --rose: #E8A884; --rose-dark: #DE8F68; --rose-deep: #C96F45;
  --gold: #D9A26B; --gold-light: #F0DFC9; --on-ink: #F0DFC9;
  --ink: #432F28; --ink-soft: #63483E; --muted: #A08B7E; --line: #F2E2D8;
  --sage: #9BAE97; --green-soft: #E8EFE4;
  --card: #FFFFFF; --glass: rgba(255,255,255,.92); --glass-soft: rgba(255,255,255,.5);
  --header-glass: rgba(253,248,244,.92); --overlay: rgba(43,30,24,.42);
  --accent-rgb: 232, 168, 132;
  --blob-1: #FCE7D9; --blob-2: #F7D8C4; --blob-3: #EFC3A9;
  --logo-g1: #F5CFBA;
  --footer-text: #C9BCB2; --footer-border: #63483E; --footer-line: #4F3A30; --footer-muted: #B3A196;
  --success: #4C6B4F; --danger: #B0503F; --danger-bg: #F6E4E1; --warn: #8A6D1F; --warn-bg: #FBF3D9;
}

/* ---------- Golden Hour ---------- */
[data-theme="golden"] {
  --cream: #FBF6EF; --cream-2: #F7EEE0; --blush: #F3E5D0; --blush-2: #FAF0E0; --blush-mid: #EEDCC0;
  --rose: #CE9B63; --rose-dark: #B88446; --rose-deep: #9A6A2E;
  --gold: #C9A45C; --gold-light: #F0E2C4; --on-ink: #F0E2C4;
  --ink: #3F3224; --ink-soft: #5F4F3C; --muted: #9C8C74; --line: #EFE3CE;
  --sage: #9BAE97; --green-soft: #E8EFE4;
  --card: #FFFFFF; --glass: rgba(255,255,255,.92); --glass-soft: rgba(255,255,255,.5);
  --header-glass: rgba(251,246,239,.92); --overlay: rgba(44,35,22,.42);
  --accent-rgb: 206, 155, 99;
  --blob-1: #F7E8D2; --blob-2: #F2DCBC; --blob-3: #E9CB9F;
  --logo-g1: #F0D5AC;
  --footer-text: #C9BCB2; --footer-border: #5F4F3C; --footer-line: #4B3D2C; --footer-muted: #AFA08A;
  --success: #4C6B4F; --danger: #B0503F; --danger-bg: #F6E4E1; --warn: #8A6D1F; --warn-bg: #FBF3D9;
}

/* ---------- Emerald Glow ---------- */
[data-theme="emerald"] {
  --cream: #F6FAF5; --cream-2: #ECF4EA; --blush: #E2EEE0; --blush-2: #EAF4EC; --blush-mid: #D3E6D1;
  --rose: #7FA98A; --rose-dark: #5F8A6B; --rose-deep: #4C7359;
  --gold: #C09A5C; --gold-light: #E9D9B8; --on-ink: #E9D9B8;
  --ink: #2F3A31; --ink-soft: #4E5C51; --muted: #87947F; --line: #DEE8DB;
  --sage: #8FAD93; --green-soft: #E4F0E4;
  --card: #FFFFFF; --glass: rgba(255,255,255,.92); --glass-soft: rgba(255,255,255,.5);
  --header-glass: rgba(246,250,245,.92); --overlay: rgba(30,38,32,.42);
  --accent-rgb: 127, 169, 138;
  --blob-1: #E3F1E1; --blob-2: #D4E8D2; --blob-3: #C2DDBE;
  --logo-g1: #CBE2C6;
  --footer-text: #C9BCB2; --footer-border: #4E5C51; --footer-line: #3C473E; --footer-muted: #A8B5A4;
  --success: #3E6B46; --danger: #B0503F; --danger-bg: #F6E4E1; --warn: #8A6D1F; --warn-bg: #FBF3D9;
}

/* ---------- Ocean Breeze ---------- */
[data-theme="ocean"] {
  --cream: #F3F9FA; --cream-2: #E9F2F4; --blush: #DFEEF2; --blush-2: #E7F2F5; --blush-mid: #CFE5EA;
  --rose: #7FB6C4; --rose-dark: #5E9EAF; --rose-deep: #43849A;
  --gold: #C9A45C; --gold-light: #EFE2C2; --on-ink: #EFE2C2;
  --ink: #2E3B40; --ink-soft: #4C5C62; --muted: #86999F; --line: #DCEAEE;
  --sage: #8FB5AE; --green-soft: #E4F1F0;
  --card: #FFFFFF; --glass: rgba(255,255,255,.92); --glass-soft: rgba(255,255,255,.5);
  --header-glass: rgba(243,249,250,.92); --overlay: rgba(28,38,42,.42);
  --accent-rgb: 127, 182, 196;
  --blob-1: #DFF1F4; --blob-2: #D0E7EC; --blob-3: #BEDCE3;
  --logo-g1: #C8E2E8;
  --footer-text: #C9BCB2; --footer-border: #4C5C62; --footer-line: #3A484D; --footer-muted: #A3B2B7;
  --success: #3E6B62; --danger: #B0503F; --danger-bg: #F6E4E1; --warn: #8A6D1F; --warn-bg: #FBF3D9;
}

/* ---------- Midnight Noir (dark luxury) ---------- */
[data-theme="midnight"] {
  --cream: #161214; --cream-2: #1E191C; --blush: #2A2226; --blush-2: #251E22; --blush-mid: #2F262B;
  --rose: #C98B8B; --rose-dark: #D39A9D; --rose-deep: #B9747B;
  --gold: #D4B483; --gold-light: #E9D9B8; --on-ink: #A98A55;
  --ink: #F3ECE6; --ink-soft: #C9BCB2; --muted: #9B8B83; --line: #332A2D;
  --sage: #9BAE97; --green-soft: #24302A;
  --card: #241E21; --glass: rgba(36,30,33,.92); --glass-soft: rgba(36,30,33,.55);
  --header-glass: rgba(22,18,20,.85); --overlay: rgba(0,0,0,.62);
  --accent-rgb: 201, 139, 139;
  --blob-1: #2C2225; --blob-2: #36292D; --blob-3: #413034;
  --logo-g1: #4A3A3E;
  --footer-text: #6B5D55; --footer-border: #4A3D38; --footer-line: #3A302C; --footer-muted: #8A7A72;
  --success: #8FBF97; --danger: #E59A90; --danger-bg: #3A2320; --warn: #E3C273; --warn-bg: #3B3120;
  --st-placed: #C98B8B; --st-confirmed: #D4B483; --st-packed: #8FA7C9; --st-shipped: #7FA8A0;
  --st-out: #9B8FC0; --st-delivered: #7CA77E; --st-cancelled: #C4645A;
}

/* ---------- Theme picker (floating) ---------- */
.theme-fab {
  position: fixed; bottom: 84px; left: 26px; width: 46px; height: 46px; border-radius: 50%;
  background: var(--card); box-shadow: var(--shadow); display: grid; place-items: center;
  z-index: 850; border: 1px solid var(--line); color: var(--ink-soft); transition: all .3s;
}
.theme-fab:hover { transform: translateY(-3px) rotate(12deg); color: var(--rose-deep); box-shadow: var(--shadow-lg); }
.theme-fab svg { width: 21px; height: 21px; }

.theme-panel {
  position: fixed; bottom: 142px; left: 26px; width: 236px; background: var(--card);
  border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lg);
  padding: 16px; z-index: 860; opacity: 0; pointer-events: none; transform: translateY(14px);
  max-height: calc(100vh - 170px); overflow-y: auto;
  transition: opacity .28s ease, transform .28s cubic-bezier(.2,1,.3,1);
}
.theme-panel.open { opacity: 1; pointer-events: auto; transform: none; }
.tp-head { font-family: var(--font-display); font-size: 19px; font-weight: 600; margin-bottom: 12px; }
.tp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tp-opt {
  display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 12px;
  border: 1.5px solid var(--line); cursor: pointer; background: transparent;
  transition: all .2s; text-align: left; width: 100%;
}
.tp-opt:hover { border-color: var(--rose); transform: translateY(-1px); }
.tp-opt.active { border-color: var(--rose-dark); background: var(--blush-2); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .12); }
.tp-swatch { display: flex; flex-shrink: 0; }
.tp-swatch i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.7); margin-left: -4px; }
.tp-swatch i:first-child { margin-left: 0; }
.tp-opt span { font-size: 12.5px; font-weight: 500; color: var(--ink-soft); line-height: 1.2; }
.tp-opt.active span { color: var(--rose-deep); }
.tp-foot { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 10px; text-align: center; }
.tp-reset { font-size: 12.5px; color: var(--muted); padding: 4px 10px; border-radius: 999px; transition: all .2s; }
.tp-reset:hover { color: var(--danger); background: var(--danger-bg); }

@media (max-width: 520px) {
  .theme-fab { left: 16px; bottom: 78px; width: 42px; height: 42px; }
  .theme-panel { left: 16px; bottom: 132px; width: min(236px, calc(100vw - 32px)); }
}

/* ---------- Admin: banners & categories ---------- */
.switch { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider { position: absolute; cursor: pointer; inset: 0; background: var(--line); border-radius: 999px; transition: .25s; }
.switch .slider::before { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .25s; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.switch input:checked + .slider { background: var(--rose-deep); }
.switch input:checked + .slider::before { transform: translateX(18px); }

.b-list { display: flex; flex-direction: column; gap: 12px; }
.b-item { display: flex; align-items: center; gap: 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; transition: all .25s; }
.b-item:hover { box-shadow: var(--shadow-sm); }
.b-item img { width: 84px; height: 64px; object-fit: cover; border-radius: 10px; background: var(--cream-2); flex-shrink: 0; }
.b-item .bi-info { flex: 1; min-width: 0; }
.b-item .bi-info b { display: block; font-size: 15px; }
.b-item .bi-info span { display: block; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-item.b-off { opacity: .6; }
.b-empty { text-align: center; padding: 34px 16px; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--radius); }
@media (max-width: 600px) {
  .b-item { flex-wrap: wrap; }
  .b-item img { width: 64px; height: 52px; }
}

/* ============================================================
   FONTS — selectable font pairs (data-font on <html>)
   ============================================================ */
[data-font="playfair"] { --font-display: 'Playfair Display', Georgia, serif; --font-body: 'Lato', 'Segoe UI', sans-serif; }
[data-font="modern"]  { --font-display: 'Poppins', 'Segoe UI', sans-serif; --font-body: 'Inter', 'Segoe UI', sans-serif; }
[data-font="soft"]    { --font-display: 'Quicksand', 'Segoe UI', sans-serif; --font-body: 'Nunito Sans', 'Segoe UI', sans-serif; }
[data-font="romantic"]{ --font-display: 'Great Vibes', cursive; --font-body: 'Montserrat', 'Segoe UI', sans-serif; }
[data-font="bold"]    { --font-display: 'Montserrat', 'Segoe UI', sans-serif; --font-body: 'Open Sans', 'Segoe UI', sans-serif; }

/* Font options inside the theme panel */
.tp-divider { height: 1px; background: var(--line); margin: 14px 0; }
.tp-minihead { font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.fp-opt { padding: 8px 10px; }
.fp-sample { font-size: 19px; width: 30px; text-align: center; color: var(--ink); line-height: 1; flex-shrink: 0; }

/* ---------- Purchase popups (social proof, top of screen) ---------- */
.pp-wrap {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  z-index: 1300; display: flex; flex-direction: column; gap: 10px;
  pointer-events: none; width: min(400px, calc(100vw - 24px));
}
.pp-item {
  pointer-events: auto; display: flex; align-items: center; gap: 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 12px 14px; box-shadow: var(--shadow-lg);
  animation: ppIn .45s cubic-bezier(.2,1.2,.4,1);
}
.pp-item.out { animation: ppOut .4s ease forwards; }
.pp-item img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: var(--cream-2); }
.pp-item .pp-txt { font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); min-width: 0; }
.pp-item .pp-txt b { color: var(--ink); font-weight: 600; }
.pp-item .pp-txt .pp-review { display: block; margin-top: 3px; color: var(--ink); font-style: italic; }
.pp-item .pp-txt .pp-review.ur { font-style: normal; font-family: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', 'Urdu Typesetting', serif; line-height: 1.7; direction: rtl; text-align: right; font-size: 15px; }
.pp-item .pp-txt .pp-review.re { font-style: italic; }
.pp-item .pp-txt .pp-prod { color: var(--rose-deep); font-weight: 500; }
.pp-item .pp-meta { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; }
.pp-close {
  margin-left: auto; color: var(--muted); width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; flex-shrink: 0; transition: all .2s;
}
.pp-close:hover { background: var(--blush); color: var(--danger); }
@keyframes ppIn { from { opacity: 0; transform: translateY(-18px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes ppOut { to { opacity: 0; transform: translateY(-14px) scale(.96); } }

/* Admin: reviews list inside modal */
.rv-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; max-height: 260px; overflow-y: auto; }
.rv-row { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--card); }
.rv-row .rv-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.rv-row .rv-head b { font-size: 14px; }
.rv-row .rv-head .stars { font-size: 12px; }
.rv-row .rv-head span { font-size: 12px; color: var(--muted); margin-left: auto; }
.rv-row p { font-size: 13.5px; color: var(--ink-soft); font-weight: 300; }
.rv-del {
  margin-left: auto; color: var(--muted); width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center; transition: all .2s; flex-shrink: 0;
}
.rv-del:hover { background: var(--danger-bg); color: var(--danger); }
.rv-empty { text-align: center; color: var(--muted); padding: 20px; font-size: 13.5px; }
@media (max-width: 520px) {
  .wa-float { right: 16px; bottom: 16px; width: 54px; height: 54px; }
  .wa-float svg { width: 26px; height: 26px; }
}

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1259px) {
  /* Header collapses to the mobile menu before the content grids do, so the
     bigger logo + one-line brand name + all nav links never overflow mid-width screens.
     Search stays visible until 1080px (it lives in the mobile menu below that).
     Search stays visible in the 1081-1259px band and collapses with the mobile
     menu below 1080px. The hide rule is scoped to .header-inner so the hero
     search and mobile-menu search (which reuse .header-search) stay visible. */
  .main-nav { display: none; }
  .menu-toggle { display: grid; }
  .header-inner { gap: 8px; }
  .logo-mark { width: 44px; height: 44px; font-size: 21px; }
  .logo { gap: 8px; }
  .logo-text { font-size: 17px; max-width: 32vw; }
  .header-actions { gap: 0; }
  .header-actions .icon-btn { width: 32px; height: 32px; }
  .header-actions .icon-btn svg { width: 17px; height: 17px; }
  .menu-toggle { width: 38px; height: 38px; }
}

@media (max-width: 400px) {
  /* Very narrow screens: hide the track icon (it lives in the mobile menu too)
     and shrink logo/actions so nothing overflows */
  .header-actions .icon-track { display: none; }
  .header-inner { gap: 4px; }
  .logo-mark { width: 38px; height: 38px; font-size: 18px; }
  .logo { gap: 6px; }
  .logo-text { font-size: 14.5px; max-width: 34vw; }
  .header-actions .icon-btn { width: 28px; height: 28px; }
  .header-actions .icon-btn svg { width: 15px; height: 15px; }
  .menu-toggle { width: 34px; height: 34px; }
}

@media (max-width: 1080px) {
  .product-grid, .products-grid-view { grid-template-columns: repeat(3, 1fr); }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .vp-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .admin-grid-2 { grid-template-columns: 1fr; }
  .header-inner > .header-search { display: none; }
  .hero-inner { grid-template-columns: 1fr; text-align: center; padding: 48px 0 60px; }
  .hero p.lead, .hero-trust { margin-left: auto; margin-right: auto; }
  .hero-cta { justify-content: center; }
  .hero-visual img { width: min(360px, 80%); }
  .hero-float.f1 { left: 4%; }
  .hero-float.f2 { right: 4%; }
  .editorial { grid-template-columns: 1fr; }
  .editorial img { min-height: 260px; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .cart-layout { grid-template-columns: 1fr; }
  .checkout-layout { grid-template-columns: 1fr; }
  .pd-layout { grid-template-columns: 1fr; gap: 34px; }
  .pd-gallery { position: static; }
  .products-layout { grid-template-columns: 1fr; }
  .filter-panel { position: static; display: none; }
  .filter-panel.open { display: block; }
  .mobile-filters-btn { display: inline-flex; }
  .admin-shell { grid-template-columns: 1fr; }
  .admin-side { position: fixed; left: 0; top: 0; bottom: 0; width: 250px; z-index: 900; transform: translateX(-105%); transition: transform .3s; }
  .admin-side.open { transform: none; }
  .admin-hamburger { display: grid; }
}

@media (max-width: 720px) {
  .product-grid, .products-grid-view { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .testi-grid { grid-template-columns: 1fr; }
  .vp-grid { grid-template-columns: 1fr; }
  .section-pad { padding: 60px 0; }
  .hero-float { display: none; }
  .cart-item { grid-template-columns: 80px 1fr; }
  .cart-item img { width: 80px; height: 92px; }
  .ci-right { grid-area: auto; align-items: flex-start; }
  .form-grid-2 { grid-template-columns: 1fr; }
  .confirm-actions .btn { width: 100%; }
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .footer-top { grid-template-columns: 1fr; gap: 30px; }
  .admin-main { padding: 22px 18px 50px; }
  .admin-topbar h1 { font-size: 26px; }
  .toast-wrap { left: 16px; right: 16px; }
  .toast { min-width: 0; max-width: none; }
  /* Tabs + thumbs: horizontal scroll instead of overflowing the screen */
  .tab-bar { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .tab-bar::-webkit-scrollbar { display: none; }
  .tab-btn { padding: 12px 16px; font-size: 12.5px; white-space: nowrap; }
  .pd-thumbs { overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  .pd-thumbs::-webkit-scrollbar { display: none; }
  .account-tabs { overflow-x: auto; scrollbar-width: none; }
  .account-tabs::-webkit-scrollbar { display: none; }
  .account-tab { padding: 11px 16px; font-size: 12.5px; white-space: nowrap; }
  .breadcrumb { flex-wrap: wrap; }
  .hero-search { max-width: 100% !important; }
  .pd-actions .btn { flex: 1 1 46%; }
  .order-no-box { flex-wrap: wrap; justify-content: center; }
  .hero-badge { font-size: 11px; letter-spacing: .1em; }
}

@media (max-width: 480px) {
  .product-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .card-body { padding: 14px; }
  .card-title { font-size: 18px; }
  .quick-add { font-size: 11.5px; padding: 10px 6px; }
  .track-form { flex-direction: column; }
  .nl-form { flex-direction: column; }
  .pd-actions .btn { flex: 1 1 100%; }
  .pd-desc { font-size: 14.5px; }
  .auth-card { padding: 30px 22px; }
  .checkout-section { padding: 24px 20px; }
  .summary-card { padding: 22px 18px; }
  .track-search, .track-head, .timeline, .track-items, .track-foot { padding-left: 18px; padding-right: 18px; }
  .tl-step { padding-left: 38px; }
  .confirm-card { padding: 24px 20px; }
  .page-hero { padding: 38px 0 30px; }
  .newsletter { padding: 48px 22px; }
  .cart-item { padding: 16px; gap: 14px; }
  .footer-bottom { flex-direction: column; text-align: center; }
}

/* ============================================================
   NEW FEATURES — search suggestions, lang toggle, sales chart,
   coupons, wishlist badge, invoice
   ============================================================ */

/* Live search suggestions */
.search-wrap { position: relative; }
.search-suggest {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 950;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-lg); overflow: hidden; display: none;
}
.search-suggest.open { display: block; animation: fadeUp .2s ease; }
.search-suggest .ss-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; transition: background .18s; }
.search-suggest .ss-item:hover { background: var(--blush-2); }
.search-suggest .ss-item img { width: 40px; height: 40px; border-radius: 9px; object-fit: cover; flex-shrink: 0; }
.search-suggest .ss-info { min-width: 0; }
.search-suggest .ss-info b { display: block; font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-suggest .ss-info span { font-size: 12.5px; color: var(--rose-deep); font-weight: 600; }
.search-suggest .ss-empty { padding: 14px; font-size: 13px; color: var(--muted); text-align: center; }

/* Language toggle (EN / اردو) */
.lang-toggle { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; margin: 0 6px; flex-shrink: 0; }
.lang-toggle .lang-btn { padding: 6px 10px; font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--muted); transition: all .2s; }
.lang-toggle .lang-btn.active { background: var(--ink); color: var(--cream); }
.lang-toggle .lang-btn:not(.active):hover { color: var(--rose-deep); }
html.lang-ur .lang-toggle .lang-btn { font-size: 12px; }

/* Wishlist badge */
.wish-badge { background: var(--gold) !important; }

/* Sales analytics chart */
.sales-chart { display: flex; align-items: flex-end; gap: 3px; height: 170px; }
.sales-chart .sc-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-width: 0; }
.sales-chart .sc-bar-wrap { flex: 1; display: flex; align-items: flex-end; }
.sales-chart .sc-bar {
  width: 100%; min-height: 2px; border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg, var(--rose), #E2A9A9);
  transition: height .6s ease; opacity: .85;
}
.sales-chart .sc-col:hover .sc-bar { opacity: 1; }
.sales-chart .sc-day { text-align: center; font-size: 9.5px; color: var(--muted); margin-top: 6px; white-space: nowrap; }
.sales-chart .sc-day.today { color: var(--rose-deep); font-weight: 700; }

/* Coupons (admin) */
.coupon-row { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); flex-wrap: wrap; }
.coupon-row.cp-off { opacity: .55; }
.coupon-row .cp-code { font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: .06em; color: var(--rose-deep); min-width: 110px; }
.coupon-row .cp-val { font-size: 13px; font-weight: 600; background: var(--green-soft); color: #4C6B4F; padding: 4px 12px; border-radius: 999px; }
.coupon-row .cp-exp { font-size: 12.5px; color: var(--muted); flex: 1; min-width: 90px; }

/* Coupon box (checkout) */
.coupon-box { border: 1.5px dashed var(--line); border-radius: 12px; padding: 10px 12px; background: var(--blush-2); }
.coupon-applied { display: flex; align-items: center; justify-content: space-between; font-size: 13.5px; }
.coupon-applied b { color: var(--success); }
.coupon-remove { color: var(--danger); font-weight: 700; padding: 4px 8px; border-radius: 8px; }
.coupon-remove:hover { background: var(--danger-bg); }

/* Mobile search suggestions anchor */
.mobile-nav .header-search { position: relative; }
@media (max-width: 720px) {
  .search-suggest { top: calc(100% + 6px); }
  .lang-toggle { margin: 0 2px; }
  .lang-toggle .lang-btn { padding: 5px 8px; font-size: 10.5px; }
  .sales-chart { height: 130px; }
}

/* Ad channel tags (orders + dashboard) */
.ch-tag {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px;
  border-radius: 999px; font-size: 11.5px; font-weight: 600; color: #fff; letter-spacing: .03em;
}
.ch-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; display: inline-block; }

/* ============ Admin live-database indicator (sync.js) ============ */
.sync-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
  padding: 7px 12px; border-radius: 999px; white-space: nowrap;
  background: var(--cream-2); color: var(--muted); border: 1px solid var(--line);
}
.sync-pill.live { background: #EAF4EC; color: #3E6B46; border-color: #CBE2CF; }
.sync-pill.local { background: #FBF0E2; color: #8A5A22; border-color: #EFDCC0; }
body[data-admin-theme='dark'] .sync-pill { background: #241E1E; color: #C9BCB2; border-color: #3A3030; }
body[data-admin-theme='dark'] .sync-pill.live { background: #1E2B20; color: #9FD0A8; border-color: #2E4432; }
body[data-admin-theme='dark'] .sync-pill.local { background: #2E2518; color: #E0B878; border-color: #46351E; }
@media (max-width: 720px) {
  .sync-pill { display: none; }
}