/* ============================================================
   VUNE — Luxury Fragrance Store  |  Design System v2
   ============================================================ */

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

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
  /* Core palette */
  --bg:            #f5f0e8;
  --bg-2:          #ede7db;
  --surface:       #ffffff;
  --surface-tint:  rgba(255,255,255,0.72);
  --text:          #1a1612;
  --text-2:        #3a342e;
  --muted:         #6b6259;
  --border:        rgba(100, 85, 70, 0.15);
  --border-focus:  rgba(150, 110, 70, 0.4);

  /* Gold accent system */
  --gold:          #c4954a;
  --gold-light:    #d9b87a;
  --gold-dark:     #9a7035;
  --gold-bg:       rgba(196, 149, 74, 0.08);
  --gold-glow:     rgba(196, 149, 74, 0.25);

  /* Accent (warm brown) */
  --accent:        #8b5e3c;
  --accent-dark:   #5c3b23;

  /* Status */
  --success:       #e4f5ec;
  --success-text:  #1a5e3a;
  --danger:        #fce8e8;
  --danger-text:   #8a2525;

  /* Shape */
  --radius-xl:     36px;
  --radius-lg:     28px;
  --radius-md:     18px;
  --radius-sm:     12px;
  --radius-xs:     8px;

  /* Shadow */
  --shadow-sm:     0 2px 12px rgba(0,0,0,0.04);
  --shadow:        0 8px 36px rgba(0,0,0,0.06);
  --shadow-lg:     0 20px 70px rgba(0,0,0,0.10);
  --shadow-gold:   0 8px 36px rgba(196,149,74,0.18);

  /* Layout */
  --container:     1360px;

  /* Animation */
  --ease:          cubic-bezier(.22,.61,.36,1);
  --ease-spring:   cubic-bezier(.34,1.56,.64,1);
  --ease-in:       cubic-bezier(.4,0,1,1);
  --ease-out:      cubic-bezier(0,0,.2,1);
  --dur-fast:      .18s;
  --dur:           .28s;
  --dur-slow:      .52s;
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: Inter, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a  { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(139,94,60,.30); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* ── Typography helpers ─────────────────────────────────────── */
.font-serif { font-family: 'Cormorant Garamond', Georgia, serif; }

/* ── Layout ─────────────────────────────────────────────────── */
.container {
  width: min(var(--container), calc(100% - 96px));
  margin: 0 auto;
}

/* ── Page load ──────────────────────────────────────────────── */
/* pageFadeIn uses transform — only for non-body elements (login card etc.) */
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.store-body {
  background:
    radial-gradient(ellipse at 80% 0%, rgba(196,149,74,.06), transparent 50%),
    radial-gradient(ellipse at 20% 100%, rgba(139,94,60,.05), transparent 50%),
    var(--bg);
}

/* ── Scroll-progress bar ────────────────────────────────────── */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-light));
  z-index: 100;
  transition: width .1s linear;
  box-shadow: 0 0 8px var(--gold-glow);
}

/* ═══════════════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════════════ */
.store-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(8, 10, 9, 0.97);
  border-bottom: 1px solid rgba(255,255,255,.05);
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.store-header.scrolled {
  background: rgba(6, 8, 7, 0.99);
  box-shadow: 0 4px 32px rgba(0,0,0,.3);
}
.store-header-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 22px;
  min-height: 82px;
}

/* Logo */
.store-logo { display: inline-flex; align-items: center; }
.store-logo-img {
  height: 48px;
  width: auto;
  object-fit: contain;
  display: block;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  /* Invert to white for dark navbar background */
  filter: brightness(0) invert(1);
}
.store-logo:hover .store-logo-img { opacity: .85; transform: scale(1.03); }
.store-logo-img-footer {
  height: 44px;
  filter: brightness(0) invert(1);
}

/* Nav menu */
.store-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(16px, 2.2vw, 44px);
}
.store-menu a {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .26em;
  color: rgba(255,255,255,.72);
  white-space: nowrap;
  position: relative;
  padding-bottom: 2px;
  transition: color var(--dur) var(--ease);
}
.store-menu a::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width var(--dur) var(--ease);
  box-shadow: 0 0 6px var(--gold-glow);
}
.store-menu a:hover { color: rgba(255,255,255,.98); }
.store-menu a:hover::after { width: 100%; }

/* Action icons */
.store-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  white-space: nowrap;
}
.store-actions a,
.store-actions button {
  width: 38px; height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.80);
  border-radius: 999px;
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
  padding: 0;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease-spring);
}
.store-actions a:hover,
.store-actions button:hover {
  color: #fff;
  border-color: rgba(196,149,74,.35);
  background: rgba(196,149,74,.08);
  transform: translateY(-2px) scale(1.08);
}
.store-actions svg {
  width: 20px; height: 20px;
  stroke: currentColor; fill: none;
  stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Cart badge */
.cart-link { position: relative; }
.cart-badge {
  position: absolute;
  top: -6px; right: -7px;
  min-width: 17px; height: 17px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--gold);
  color: #0e0b07;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 0 10px rgba(196,149,74,.5);
  animation: cartPop .3s var(--ease-spring) both;
}
@keyframes cartPop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.cart-badge.is-hidden { display: none; }

/* Hamburger — hidden on desktop, shown via responsive */
.store-menu-btn {
  display: none;
  width: 38px; height: 38px;
  align-items: center; justify-content: center;
  background: none;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  color: rgba(255,255,255,.8);
  flex-shrink: 0;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.store-menu-btn:hover {
  color: #fff;
  border-color: rgba(196,149,74,.35);
  background: rgba(196,149,74,.08);
}
.store-menu-btn svg {
  width: 20px; height: 20px;
  stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round;
}
.store-menu-btn .icon-close { display: none; }
.store-menu-btn.is-open .icon-open { display: none; }
.store-menu-btn.is-open .icon-close { display: block; }

/* Mobile nav fullscreen overlay */
.mobile-nav {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(8,10,9,.98);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px;
  opacity: 0; pointer-events: none;
  transition: opacity .28s ease;
}
.mobile-nav.is-open { opacity: 1; pointer-events: all; }
.mobile-nav a {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(38px, 10vw, 56px);
  font-weight: 300; line-height: 1.3;
  color: rgba(255,255,255,.65);
  letter-spacing: -.01em;
  text-decoration: none;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .35s var(--ease), transform .35s var(--ease), color .2s;
}
.mobile-nav.is-open a { opacity: 1; transform: translateY(0); }
.mobile-nav.is-open a:nth-child(1) { transition-delay: .04s; }
.mobile-nav.is-open a:nth-child(2) { transition-delay: .09s; }
.mobile-nav.is-open a:nth-child(3) { transition-delay: .14s; }
.mobile-nav.is-open a:nth-child(4) { transition-delay: .19s; }
.mobile-nav a:hover { color: #fff; }
.mobile-nav-footer {
  position: absolute; bottom: 36px;
  font-size: 11px; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(255,255,255,.2);
  opacity: 0; transition: opacity .4s .25s var(--ease);
}
.mobile-nav.is-open .mobile-nav-footer { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════
   MAIN & FOOTER
   ═══════════════════════════════════════════════════════════════ */
.store-main { padding: 0 0 72px; }
.store-main.no-bottom-pad { padding: 0; }

/* Flash messages */
.flash { margin: 24px 0; padding: 14px 18px; border-radius: var(--radius-sm); font-size: .9rem; border-left: 3px solid; }
.flash-success { background: var(--success); color: var(--success-text); border-color: var(--success-text); }
.flash-error   { background: var(--danger);  color: var(--danger-text);  border-color: var(--danger-text); }
.error-list { padding-left: 18px; }

/* Toast notification */
.ajax-toast {
  position: fixed;
  right: 24px; bottom: 24px;
  z-index: 80;
  max-width: min(360px, calc(100vw - 32px));
  padding: 14px 18px 14px 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, #18191e, #111114);
  color: #fff;
  font-size: .875rem;
  border: 1px solid rgba(196,149,74,.2);
  box-shadow: 0 16px 48px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05);
  opacity: 0;
  transform: translateY(12px) scale(.96);
  pointer-events: none;
  transition: opacity .22s var(--ease), transform .22s var(--ease);
}
.ajax-toast::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--gold);
  margin-right: 10px;
  vertical-align: middle;
  box-shadow: 0 0 6px var(--gold);
}
.ajax-toast.is-visible  { opacity: 1; transform: translateY(0) scale(1); }
.is-loading { opacity: .65; pointer-events: none; }

/* ═══════════════════════════════════════════════════════════════
   HERO (inner pages)
   ═══════════════════════════════════════════════════════════════ */
.store-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, #0c0f0d 0%, #1a2119 50%, #11180e 100%);
  color: #fff;
  padding: 56px 48px;
  box-shadow: var(--shadow-lg);
  isolation: isolate;
  margin-bottom: 32px;
}
/* Animated grain overlay */
.store-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 90% 20%, rgba(196,149,74,.12), transparent 35%),
    radial-gradient(ellipse at 10% 80%, rgba(139,94,60,.10), transparent 30%);
  pointer-events: none;
}
/* Floating decorative ring */
.store-hero::after {
  content: '';
  position: absolute;
  right: 5%; top: 15%;
  width: 200px; height: 200px;
  border-radius: 999px;
  border: 1px solid rgba(196,149,74,.18);
  animation: heroRing 12s ease-in-out infinite;
  pointer-events: none;
}
@keyframes heroRing {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33%  { transform: translate(12px, -20px) rotate(60deg); }
  66%  { transform: translate(-8px, 10px) rotate(120deg); }
}
.store-hero > * { position: relative; z-index: 1; }
.store-hero-glow {
  position: absolute;
  left: -60px; bottom: -60px;
  width: 220px; height: 220px;
  border-radius: 999px;
  background: rgba(196,149,74,.07);
  filter: blur(30px);
  animation: glowPulse 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
/* Second decorative orb */
.store-hero-orb {
  position: absolute;
  right: 12%; top: 50%;
  width: 80px; height: 80px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
  animation: floatXY 7s ease-in-out infinite 1s;
  pointer-events: none;
  z-index: 0;
}
@keyframes glowPulse {
  0%, 100% { opacity: .6; transform: scale(1); }
  50%       { opacity: 1; transform: scale(1.18); }
}
.store-kicker {
  margin-bottom: 12px;
  font-size: 11px;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--gold-light);
  opacity: .85;
}
.store-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(44px, 5.5vw, 80px);
  line-height: 1.01;
  font-weight: 300;
  letter-spacing: -.03em;
}
.store-subtitle {
  max-width: 680px;
  margin-top: 18px;
  color: rgba(255,255,255,.72);
  line-height: 1.78;
  font-size: .95rem;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION LAYOUT
   ═══════════════════════════════════════════════════════════════ */
.store-section { padding: 48px 0 0; }
.store-section-head { text-align: center; margin-bottom: 48px; }
.store-section-label {
  margin-bottom: 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .42em;
  color: var(--gold);
  opacity: .9;
}
.store-section-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(36px, 4.5vw, 62px);
  font-weight: 300;
  letter-spacing: -.025em;
  color: var(--text);
}

/* ── Panel / Card surfaces ─────────────────────────────────── */
.store-panel,
.summary-box,
.login-card,
.admin-card,
.product-detail-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}
.store-panel, .product-detail-card { padding: 28px; }

/* ── Grid layouts ──────────────────────────────────────────── */
.filters, .form-grid, .two-col, .checkout-grid, .grid-3, .grid-4, .stats-grid { display: grid; gap: 24px; }
.grid-3        { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4        { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.two-col       { grid-template-columns: 1.05fr 1fr; }
.checkout-grid { grid-template-columns: 1.4fr .9fr; }
.filters       { grid-template-columns: 1.4fr 1fr auto; align-items: end; }
.form-grid     { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid .full { grid-column: 1 / -1; }
.inline-row, .price-row, .table-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.price-row { margin-top: 10px; font-size: 14px; color: #514842; }
.old-price { color: #b4aca5; text-decoration: line-through; }

/* ── Form elements ─────────────────────────────────────────── */
label { display: grid; gap: 8px; font-size: .9rem; letter-spacing: .01em; }
input, select, textarea {
  width: 100%;
  min-height: 48px;
  border-radius: var(--radius-sm);
  border: 1px solid #dcd3c8;
  background: #fff;
  padding: 12px 16px;
  color: var(--text);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  outline: none;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(196,149,74,.12), 0 2px 8px rgba(196,149,74,.08);
}
textarea { min-height: 140px; resize: vertical; }

/* ── Buttons ───────────────────────────────────────────────── */
.button, .button-secondary, .button-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  position: relative;
  overflow: hidden;
  transition:
    transform var(--dur) var(--ease-spring),
    box-shadow var(--dur) var(--ease),
    background var(--dur) var(--ease),
    color var(--dur) var(--ease);
}
/* Shimmer on hover */
.button::before, .button-secondary::before, .button-danger::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 -60%;
  width: 40%;
  background: linear-gradient(to right, transparent, rgba(255,255,255,.18), transparent);
  transform: skewX(-20deg);
  opacity: 0;
  transition: none;
}
.button:hover::before, .button-secondary:hover::before, .button-danger:hover::before {
  animation: btnShimmer .55s ease forwards;
}
@keyframes btnShimmer {
  0%   { opacity: 0; left: -60%; }
  30%  { opacity: 1; }
  100% { opacity: 0; left: 140%; }
}
.button {
  background: linear-gradient(135deg, #1a1a1e, #111114);
  color: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,.20);
}
.button:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 28px rgba(0,0,0,.28);
}
.button-secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid #d8ccbf;
}
.button-secondary:hover {
  transform: translateY(-2px);
  border-color: var(--gold);
  color: var(--gold-dark);
  box-shadow: 0 4px 18px rgba(196,149,74,.12);
}
.button-danger {
  background: linear-gradient(135deg, #a73838, #8c2c2c);
  color: #fff;
}
.button-danger:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(160,50,50,.3);
}
.button-gold {
  background: linear-gradient(135deg, var(--gold-dark), var(--gold), var(--gold-light));
  color: #1a1208;
  box-shadow: 0 6px 22px var(--gold-glow);
}
.button-gold:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 32px var(--gold-glow);
}

/* ── Badge ─────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(196,149,74,.12), rgba(139,94,60,.08));
  color: var(--gold-dark);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid rgba(196,149,74,.2);
}
.muted { color: var(--muted); line-height: 1.8; }
.meta  { margin: 0 0 8px; font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: #8d8279; }

/* ═══════════════════════════════════════════════════════════════
   PRODUCT CARDS
   ═══════════════════════════════════════════════════════════════ */
.product-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition:
    transform var(--dur-slow) var(--ease),
    box-shadow var(--dur-slow) var(--ease),
    border-color var(--dur-slow) var(--ease);
  will-change: transform;
}
.product-card:hover {
  transform: translateY(-10px) scale(1.01);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(196,149,74,.12);
  border-color: rgba(196,149,74,.2);
}
/* Image wrapper with shimmer */
.product-thumb-wrap { position: relative; overflow: hidden; }
.product-thumb {
  width: 100%;
  height: 320px;
  object-fit: cover;
  transition: transform .7s var(--ease), filter .5s var(--ease);
}
.product-card:hover .product-thumb {
  transform: scale(1.06);
  filter: brightness(1.04);
}
/* Gold shimmer sweep on hover */
.product-thumb-wrap::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 -80%;
  width: 50%;
  background: linear-gradient(to right, transparent, rgba(196,149,74,.12), transparent);
  transform: skewX(-12deg);
  pointer-events: none;
  opacity: 0;
}
.product-card:hover .product-thumb-wrap::after {
  animation: goldShimmer .8s ease forwards;
}
@keyframes goldShimmer {
  0%   { opacity: 0; left: -80%; }
  25%  { opacity: 1; }
  100% { opacity: 0; left: 150%; }
}
/* Fallback for pages without the wrapper */
.product-thumb:not(.product-thumb-wrap > .product-thumb) {
  width: 100%;
  height: 320px;
  object-fit: cover;
}

.product-copy { padding: 22px; }
.product-category { margin: 0 0 8px; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: #8d8279; }
.product-title-link, .product-copy h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 22px;
  font-weight: 400;
  color: #1a1612;
  transition: color var(--dur) var(--ease);
}
.product-title-link:hover { color: var(--gold-dark); }

/* ═══════════════════════════════════════════════════════════════
   PRODUCT DETAIL
   ═══════════════════════════════════════════════════════════════ */
.detail-media img {
  width: 100%;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  transition: transform .6s var(--ease);
}
.detail-media img:hover { transform: scale(1.01); }

/* ═══════════════════════════════════════════════════════════════
   CART
   ═══════════════════════════════════════════════════════════════ */
.cart-row, .order-item {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid #ede5db;
}
.cart-row img {
  width: 110px; height: 110px;
  object-fit: cover;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease-spring);
}
.cart-row:hover img { transform: scale(1.04); }
.summary-box, .login-card, .admin-card { padding: 28px; }

/* ═══════════════════════════════════════════════════════════════
   TABLE
   ═══════════════════════════════════════════════════════════════ */
table { width: 100%; border-collapse: collapse; }
th, td {
  padding: 14px 14px;
  border-bottom: 1px solid #ede5db;
  text-align: left;
  vertical-align: top;
}
th {
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(196,149,74,.04);
}
tr { transition: background var(--dur-fast) var(--ease); }
tr:hover td { background: rgba(196,149,74,.03); }

/* ═══════════════════════════════════════════════════════════════
   ADMIN
   ═══════════════════════════════════════════════════════════════ */
.admin-shell { background: #f0ebe3; min-height: 100vh; }
.admin-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(18, 20, 24, 0.97);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,.06);
  color: #fff;
}
.admin-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 72px;
}
.admin-nav { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.admin-nav a, .store-menu a, .admin-nav a {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .24em;
}
.admin-nav a { color: rgba(255,255,255,.75); transition: color var(--dur) var(--ease); }
.admin-nav a:hover { color: var(--gold-light); }
.admin-content { padding: 32px 0 64px; }
.stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.admin-card {
  border-radius: var(--radius-lg);
  padding: 24px;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.admin-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* Login */
.login-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse at top-left, rgba(196,149,74,.15), transparent 45%),
    linear-gradient(135deg, #13151a, #3b2b1e);
  padding: 24px;
}
.login-card {
  width: min(480px, 100%);
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: 0 32px 80px rgba(0,0,0,.22);
  animation: pageFadeIn .45s var(--ease) both;
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════ */
.store-footer {
  margin-top: 80px;
  background: #0e0e11;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.store-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), var(--gold-dark), var(--gold), transparent);
  opacity: .4;
}
.store-footer::after {
  content: '';
  position: absolute;
  right: -80px; top: -80px;
  width: 320px; height: 320px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(196,149,74,.06), transparent 70%);
  pointer-events: none;
}
.store-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding: 60px 0;
  position: relative;
  z-index: 1;
}
.store-social-row { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px; }
.store-social-link {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.72);
  text-decoration: none;
  transition: background .25s var(--ease), color .25s var(--ease), transform .3s var(--ease-spring), border-color .25s var(--ease);
}
.store-social-link:hover { background: var(--gold); color: #0a0a0a; transform: translateY(-3px) scale(1.1); border-color: var(--gold); }
.store-logo-footer { color: #fff; }
.store-footer-title {
  margin: 0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .32em;
  color: var(--gold-light);
  opacity: .8;
}
.store-footer-copy {
  margin-top: 18px;
  font-size: 14px;
  line-height: 1.82;
  color: rgba(255,255,255,.58);
}
.store-footer-list {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.store-footer-list li {
  margin-bottom: 10px;
  font-size: 14px;
  color: rgba(255,255,255,.75);
  transition: color var(--dur) var(--ease);
}
.store-footer-list a { transition: color var(--dur) var(--ease); }
.store-footer-list a:hover { color: var(--gold-light); }
.store-footer-bottom {
  border-top: 1px solid rgba(255,255,255,.07);
  padding: 20px 0;
  text-align: center;
  font-size: 13px;
  color: rgba(255,255,255,.38);
  position: relative;
  z-index: 1;
}

/* ═══════════════════════════════════════════════════════════════
   REVEAL ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(28px) scale(.985);
  transition: opacity .75s var(--ease), transform .75s var(--ease);
  will-change: opacity, transform;
}
.reveal.revealed { opacity: 1; transform: translateY(0) scale(1); }

.reveal-left  { transform: translateX(-32px) scale(.99); }
.reveal-right { transform: translateX(32px)  scale(.99); }
.reveal-left.revealed, .reveal-right.revealed { transform: translateX(0) scale(1); }

.reveal-zoom  { transform: scale(1.06); opacity: 0; }
.reveal-zoom.revealed { transform: scale(1); opacity: 1; }

.reveal-up    { transform: translateY(48px); opacity: 0; }
.reveal-up.revealed { transform: translateY(0); opacity: 1; }

/* Stagger delays */
.delay-1 { transition-delay: .10s; }
.delay-2 { transition-delay: .20s; }
.delay-3 { transition-delay: .30s; }
.delay-4 { transition-delay: .40s; }
.delay-5 { transition-delay: .50s; }

/* ═══════════════════════════════════════════════════════════════
   KEYFRAME LIBRARY
   ═══════════════════════════════════════════════════════════════ */
@keyframes floatXY  { 0%,100% { transform: translate(0,0); }       50% { transform: translate(10px,-18px); } }
@keyframes floatY   { 0%,100% { transform: translateY(0); }         50% { transform: translateY(-10px); } }
@keyframes pulse    { 0%,100% { transform: scale(1); opacity:.7; }  50% { transform: scale(1.18); opacity:1; } }
@keyframes spin     { to { transform: rotate(360deg); } }
@keyframes shimmer  { 0% { left:-80%; opacity:0; } 30% { opacity:.35; } 100% { left:150%; opacity:0; } }
@keyframes breathe  { 0%,100% { transform: scale(1); }              50% { transform: scale(1.04); } }
@keyframes slideUp  { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@keyframes kb1 { 0% { transform:scale(1.0) translate(0,0); } 100% { transform:scale(1.14) translate(-1.5%,1%); } }
@keyframes kb2 { 0% { transform:scale(1.08) translate(1%,0); } 100% { transform:scale(1.0) translate(-1%,1.5%); } }
@keyframes kb3 { 0% { transform:scale(1.0) translate(0,1%); } 100% { transform:scale(1.12) translate(1.2%,-1%); } }
@keyframes kb4 { 0% { transform:scale(1.12) translate(-1%,-1%); } 100% { transform:scale(1.0) translate(1%,0.5%); } }
@keyframes dotProgress { to { width: 100%; } }
@keyframes heroBgDrift { from { transform:scale(1.06) translate(0,0); } to { transform:scale(1.12) translate(-1.5%,1%); } }
@keyframes btnShimmerFade { 0% { opacity:0; left:-60%; } 30% { opacity:1; } 100% { opacity:0; left:140%; } }

/* ═══════════════════════════════════════════════════════════════
   STOREFRONT — PAGE BANNER (inner pages)
   ═══════════════════════════════════════════════════════════════ */
.page-banner {
  background: linear-gradient(135deg, #0b0d0c 0%, #111410 100%);
  padding: 72px 0 64px;
  position: relative; overflow: hidden;
}
.page-banner::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 80% 50%, rgba(196,149,74,.07), transparent 55%),
    radial-gradient(ellipse at 15% 80%, rgba(90,60,30,.1), transparent 40%);
  pointer-events: none;
}
.page-banner-inner { position: relative; z-index: 1; }

/* Breadcrumb */
.breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .32em;
  color: rgba(255,255,255,.38); margin-bottom: 24px;
}
.breadcrumb a { transition: color .2s; }
.breadcrumb a:hover { color: var(--gold-light); }
.breadcrumb-sep { opacity: .3; }
.breadcrumb-current { color: var(--gold-light); opacity: .85; }

/* Page title block */
.page-kicker {
  font-size: 11px; text-transform: uppercase; letter-spacing: .5em;
  color: var(--gold-light); opacity: .8; margin-bottom: 16px;
}
.page-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(44px, 6vw, 80px);
  font-weight: 300; line-height: 1.02; letter-spacing: -.025em;
  background: linear-gradient(160deg, #fff 30%, rgba(196,149,74,.7) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  margin-bottom: 16px;
}
.page-subtitle {
  font-size: 16px; line-height: 1.8; color: rgba(255,255,255,.52);
  max-width: 540px;
}

/* ═══════════════════════════════════════════════════════════════
   STOREFRONT — SECTION HEAD
   ═══════════════════════════════════════════════════════════════ */
.section-head { text-align: center; margin-bottom: 52px; }
.section-label {
  margin-bottom: 12px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .44em; color: var(--gold); opacity: .9;
}
.section-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(40px, 4.5vw, 68px);
  font-weight: 300; letter-spacing: -.025em; color: var(--text);
}
.section-gap { padding: 96px 0; }
.section-pad { padding: 48px 0 0; }

/* Product card size pills */
.product-sizes {
  margin-top: 7px;
  font-size: 10.5px;
  letter-spacing: .12em;
  color: var(--muted);
  opacity: .75;
}

/* ── Size Picker Modal ───────────────────────────────────── */
.size-modal-backdrop {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(10,8,6,.52);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0; pointer-events: none;
  transition: opacity .25s;
}
.size-modal-backdrop.is-open { opacity: 1; pointer-events: all; }
.size-modal {
  background: #fff;
  border-radius: 24px;
  padding: 36px 32px 32px;
  width: 100%; max-width: 400px;
  box-shadow: 0 24px 80px rgba(0,0,0,.18);
  transform: translateY(16px);
  transition: transform .3s cubic-bezier(.22,1,.36,1);
  position: relative;
}
.size-modal-backdrop.is-open .size-modal { transform: translateY(0); }
.size-modal-close {
  position: absolute; top: 16px; right: 16px;
  width: 32px; height: 32px; border-radius: 999px;
  background: rgba(120,100,80,.08); border: none; cursor: pointer;
  display: grid; place-items: center; color: var(--muted);
  font-size: 16px; line-height: 1;
  transition: background .2s;
}
.size-modal-close:hover { background: rgba(120,100,80,.16); }
.size-modal-kicker {
  font-size: 10px; letter-spacing: .36em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 6px;
}
.size-modal-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 26px; font-weight: 400; color: var(--text);
  margin-bottom: 22px; line-height: 1.2;
}
.size-modal-label {
  font-size: 10px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 12px;
}
.size-modal-options { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.size-modal-btn {
  flex: 1; min-width: 90px;
  padding: 12px 8px; border-radius: 14px;
  border: 1.5px solid rgba(120,100,80,.2);
  background: var(--bg); cursor: pointer; text-align: center;
  transition: border-color .2s, background .2s;
}
.size-modal-btn:hover { border-color: var(--gold); }
.size-modal-btn.active { border-color: var(--gold); background: rgba(196,149,74,.07); }
.size-modal-btn-size {
  display: block; font-size: 15px; font-weight: 500; color: var(--text); margin-bottom: 3px;
}
.size-modal-btn-price {
  display: block; font-size: 12px; color: var(--gold-dark);
}
.size-modal-add {
  width: 100%; height: 52px; border-radius: 999px;
  background: linear-gradient(135deg, #1a1a1e, #111114);
  color: #fff; font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
  border: none; cursor: pointer; font-weight: 500;
  transition: opacity .2s, transform .2s;
}
.size-modal-add:hover { opacity: .88; transform: translateY(-1px); }
.size-modal-add:disabled { opacity: .4; cursor: not-allowed; transform: none; }

/* ═══════════════════════════════════════════════════════════════
   STOREFRONT — PRODUCT GRID (home-page style cards)
   ═══════════════════════════════════════════════════════════════ */
.products-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

/* Media wrapper with overlay for home-style cards */
.product-media {
  height: 300px; position: relative; overflow: hidden; background: #f0ebe4;
}
.product-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease), filter .5s var(--ease);
}
.product-card:hover .product-media img { transform: scale(1.07); filter: brightness(1.04); }
.shimmer {
  position: absolute; inset: 0 auto 0 -70%;
  width: 45%; pointer-events: none;
  background: linear-gradient(to right, transparent, rgba(196,149,74,.14), transparent);
  transform: skewX(-12deg); opacity: 0;
}
.product-card:hover .shimmer { animation: shimmer 1s ease-in-out; }
.product-overlay {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 16px; opacity: 0; transform: translateY(20px);
  transition: opacity .32s var(--ease), transform .32s var(--ease);
}
.product-card:hover .product-overlay { opacity: 1; transform: translateY(0); }
.product-btn {
  width: 100%; background: #fff; color: #0a0a0a;
  min-height: 50px; letter-spacing: .18em; font-size: 11.5px; text-transform: uppercase;
  border-radius: 999px; border: none; cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,.16);
  transition: transform .25s var(--ease-spring), background .2s, box-shadow .25s var(--ease);
}
.product-btn:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 10px 28px rgba(0,0,0,.2); }
.product-btn.is-loading { opacity: .65; pointer-events: none; }
.product-category { margin-bottom: 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .34em; color: #8d8279; }

/* ═══════════════════════════════════════════════════════════════
   STOREFRONT — FILTER BAR
   ═══════════════════════════════════════════════════════════════ */
.filter-section { padding: 40px 0 0; }
.filter-bar {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  margin-bottom: 36px;
}
.filter-search-wrap { flex: 1; min-width: 240px; position: relative; }
.filter-search-icon {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  color: var(--muted); pointer-events: none;
}
.filter-search-icon svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.filter-search {
  width: 100%; height: 48px; padding: 0 18px 0 44px;
  border-radius: 999px; border: 1.5px solid var(--border);
  background: var(--surface); font-family: Inter, sans-serif;
  font-size: 14px; color: var(--text); outline: none;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.filter-search::placeholder { color: var(--muted); }
.filter-search:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-glow); }
.filter-cats { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.filter-pill {
  height: 48px; padding: 0 22px; border-radius: 999px;
  border: 1.5px solid var(--border); background: var(--surface);
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted); cursor: pointer; white-space: nowrap;
  text-decoration: none; display: inline-flex; align-items: center;
  transition: border-color .22s var(--ease), background .22s var(--ease), color .22s var(--ease);
}
.filter-pill:hover { border-color: rgba(196,149,74,.4); background: rgba(196,149,74,.06); color: var(--text); }
.filter-pill.active { background: var(--text); border-color: var(--text); color: #fff; box-shadow: 0 6px 20px rgba(26,22,18,.18); }

/* Products count */
.products-count { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: 28px; }
.products-count strong { color: var(--text); font-weight: 500; }

/* Empty state */
.products-empty {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 80px 24px; text-align: center; gap: 16px;
  background: var(--surface); border-radius: var(--radius-xl); border: 1px solid var(--border);
}
.products-empty-icon { font-size: 48px; opacity: .2; }
.products-empty-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 32px; font-weight: 300; }
.products-empty-sub { font-size: 14px; color: var(--muted); line-height: 1.7; max-width: 360px; }

/* ═══════════════════════════════════════════════════════════════
   STOREFRONT — PAGINATION
   ═══════════════════════════════════════════════════════════════ */
.pagination-wrap { margin-top: 56px; display: flex; justify-content: center; }
.pagination-wrap nav { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; }
.pagination-wrap a,
.pagination-wrap span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 44px; padding: 0 14px;
  border-radius: 999px; border: 1.5px solid var(--border);
  background: var(--surface); font-size: 13px; color: var(--muted);
  text-decoration: none;
  transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.pagination-wrap a:hover { border-color: rgba(196,149,74,.4); background: rgba(196,149,74,.06); color: var(--text); }
.pagination-wrap span[aria-current="page"] { background: var(--text); border-color: var(--text); color: #fff; font-weight: 500; }

/* ═══════════════════════════════════════════════════════════════
   STOREFRONT — SHARED HERO BUTTONS
   ═══════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 54px; padding: 0 30px; border-radius: 999px;
  font-size: 12px; text-transform: uppercase; letter-spacing: .26em;
  position: relative; overflow: hidden; border: none; cursor: pointer;
  transition: transform .28s var(--ease-spring), box-shadow .28s var(--ease), background .28s var(--ease);
}
.btn-dark { background: linear-gradient(135deg, #1a1a1e, #111114); color: #fff; }
.btn-dark:hover { transform: translateY(-3px); box-shadow: 0 10px 32px rgba(0,0,0,.3); }
.btn-gold { background: linear-gradient(135deg, var(--gold-dark), var(--gold), var(--gold-light)); color: #1a1208; box-shadow: 0 8px 28px var(--gold-glow); }
.btn-gold:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 14px 40px var(--gold-glow); }
.btn-light { background: #fff; color: #0a0a0a; }
.btn-light:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 14px 40px rgba(255,255,255,.2); }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

/* ── Large tablets / small desktops ── */
@media (max-width: 1200px) {
  .grid-4, .products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .store-footer-grid { grid-template-columns: 1fr 1fr 1fr; }
}

/* ── Tablets ── */
@media (max-width: 1024px) {
  .store-footer-grid { grid-template-columns: 1fr 1fr; }
  .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .checkout-grid { grid-template-columns: 1fr; }
  .two-col { grid-template-columns: 1fr; }
}

/* ── Mobile nav breakpoint ── */
@media (max-width: 992px) {
  /* Header: keep 3-col layout, hide text nav, show hamburger */
  .store-menu { display: none; }
  .store-menu-btn { display: inline-flex; }
  .store-header-row { min-height: 68px; gap: 10px; }

  /* Grids collapse to single column */
  .filters,
  .form-grid,
  .grid-3,
  .grid-4,
  .stats-grid,
  .store-footer-grid { grid-template-columns: 1fr; }

  .store-hero { padding: 40px 32px; }
  .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filter-bar { flex-direction: column; align-items: stretch; }
  .filter-search-wrap { min-width: unset; }
}

/* ── Small phones ── */
@media (max-width: 720px) {
  .container { width: min(var(--container), calc(100% - 40px)); }
  .store-hero { padding: 32px 22px; }
  .cart-row { grid-template-columns: 80px 1fr auto; gap: 12px; }
  .cart-row img { width: 80px; height: 80px; }
  .order-item { grid-template-columns: 80px 1fr; gap: 12px; }
  .store-footer-grid { grid-template-columns: 1fr; padding: 40px 0; }
  .page-banner { padding: 48px 0 40px; }
  .store-panel, .product-detail-card { padding: 20px; }
  .summary-box { padding: 20px; }
  .csb-item { grid-template-columns: 64px 1fr auto; gap: 10px; }
  .csb-item-img { width: 64px; height: 64px; }
}

/* ── Extra small phones ── */
@media (max-width: 480px) {
  .container { width: min(var(--container), calc(100% - 24px)); }
  .products-grid { grid-template-columns: 1fr; }
  .product-media { height: 260px; }
  .store-logo-img { height: 40px; }
  .store-header-row { min-height: 60px; }
  .page-kicker, .store-kicker { letter-spacing: .25em; }
  .page-banner { padding: 36px 0 28px; }
  .form-grid { grid-template-columns: 1fr; }
}