/* ============================================================
   ZURI COLLECTIONS — Design System v2.0
   Sleek · Modern · Premium Footwear
   ============================================================ */

/* ── Google Fonts are loaded in header ── */

:root {
  /* Brand */
  --gold:       #C9A96E;
  --gold-light: #E8D5A3;
  --gold-dim:   #8B6D3F;
  --dark:       #0C0C0E;
  --dark-2:     #141418;
  --dark-3:     #1C1C22;
  --dark-4:     #252530;
  --mid:        #6B6B7A;
  --muted:      #9090A0;
  --light:      #F5F4F0;
  --white:      #FFFFFF;

  /* Gender accents */
  --men:        #2563EB;
  --women:      #DB2777;
  --kids:       #059669;

  /* UI */
  --radius:     12px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --shadow:     0 4px 24px rgba(0,0,0,.35);
  --shadow-sm:  0 2px 8px rgba(0,0,0,.15);

  /* Transitions */
  --t:          0.22s cubic-bezier(0.4,0,0.2,1);
}

/* ── Reset ─────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { font-family:'DM Sans',sans-serif; background:var(--light); color:var(--dark); line-height:1.6; -webkit-font-smoothing:antialiased; }
img { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; }
button { cursor:pointer; border:none; background:none; font:inherit; }
input,textarea,select { font:inherit; }

/* ── Typography ─────────────────────────────────────────────── */
.font-cormorant { font-family:'Cormorant Garamond',serif; }
h1,h2,h3 { line-height:1.15; }

/* ── Buttons ────────────────────────────────────────────────── */
.btn-primary {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--dark); color:var(--white);
  font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  padding:14px 32px; border-radius:100px;
  transition:background var(--t), transform var(--t), box-shadow var(--t);
  white-space:nowrap;
}
.btn-primary:hover { background:var(--gold); color:var(--dark); transform:translateY(-1px); box-shadow:0 8px 24px rgba(201,169,110,.35); }

.btn-gold {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--gold); color:var(--dark);
  font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  padding:14px 32px; border-radius:100px;
  transition:all var(--t);
}
.btn-gold:hover { background:var(--gold-light); transform:translateY(-1px); box-shadow:0 8px 28px rgba(201,169,110,.4); }

.btn-outline {
  display:inline-flex; align-items:center; gap:8px;
  border:1.5px solid rgba(255,255,255,.25); color:var(--white);
  font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  padding:13px 30px; border-radius:100px;
  transition:all var(--t);
}
.btn-outline:hover { border-color:var(--gold); color:var(--gold); }

.btn-secondary {
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; color:var(--dark);
  border:1.5px solid rgba(0,0,0,.15);
  font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  padding:13px 30px; border-radius:100px;
  transition:all var(--t);
}
.btn-secondary:hover { border-color:var(--dark); background:var(--dark); color:var(--white); }

/* ── Form elements ──────────────────────────────────────────── */
.form-label {
  display:block; font-size:10px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--mid);
  margin-bottom:6px;
}
.form-input {
  width:100%; border:1.5px solid #E2E2E8;
  border-radius:var(--radius); padding:11px 16px;
  font-size:14px; font-weight:400; color:var(--dark);
  background:var(--white); outline:none;
  transition:border-color var(--t), box-shadow var(--t);
}
.form-input:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,169,110,.12); }
.form-input::placeholder { color:var(--muted); }
select.form-input { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B6B7A' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; -webkit-appearance:none; appearance:none; padding-right:36px; }
textarea.form-input { resize:vertical; min-height:100px; }

/* ── Product card ───────────────────────────────────────────── */
.product-card { position:relative; overflow:hidden; border-radius:var(--radius-lg); background:var(--white); transition:transform var(--t), box-shadow var(--t); }
.product-card:hover { transform:translateY(-4px); box-shadow:0 20px 48px rgba(0,0,0,.12); }
.product-card-img { aspect-ratio:4/5; overflow:hidden; background:#F0EEE8; position:relative; }
.product-card-img img { width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(0.4,0,0.2,1); }
.product-card:hover .product-card-img img { transform:scale(1.06); }
.product-card-info { padding:14px 16px 16px; }
.product-card-brand { font-size:9px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:3px; }
.product-card-name { font-size:14px; font-weight:600; color:var(--dark); line-height:1.35; margin-bottom:8px; }
.product-card-price { font-size:14px; font-weight:700; color:var(--dark); }
.product-card-old-price { font-size:12px; color:var(--muted); text-decoration:line-through; margin-left:6px; }
.flash-badge { position:absolute; top:12px; left:12px; background:var(--dark); color:var(--white); font-size:9px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; padding:4px 10px; border-radius:100px; }
.flash-badge.sale { background:#E53E3E; }
.flash-badge.new { background:var(--dark); }
.size-badge { position:absolute; bottom:12px; right:12px; background:rgba(255,255,255,.9); backdrop-filter:blur(8px); font-size:10px; font-weight:700; padding:4px 10px; border-radius:100px; color:var(--dark); }

/* Quick add overlay */
.quick-add-overlay {
  position:absolute; inset:0; background:rgba(12,12,14,.5);
  backdrop-filter:blur(4px); opacity:0; transition:opacity var(--t);
  display:flex; align-items:center; justify-content:center;
}
.product-card:hover .quick-add-overlay { opacity:1; }
.quick-add-btn {
  background:var(--white); color:var(--dark);
  font-size:10px; font-weight:800; letter-spacing:.15em; text-transform:uppercase;
  padding:10px 22px; border-radius:100px;
  transform:translateY(8px); transition:transform var(--t);
}
.product-card:hover .quick-add-btn { transform:translateY(0); }
.quick-add-btn:hover { background:var(--gold); }
.out-of-stock-overlay { position:absolute; inset:0; background:rgba(12,12,14,.5); display:flex; align-items:center; justify-content:center; }
.out-of-stock-overlay span { font-size:10px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.6); }

/* ── Size buttons ───────────────────────────────────────────── */
.size-btn {
  min-width:44px; height:44px; border-radius:10px;
  border:1.5px solid #E2E2E8; background:var(--white);
  font-size:12px; font-weight:700; color:var(--dark);
  display:inline-flex; align-items:center; justify-content:center;
  transition:all var(--t); cursor:pointer; padding:0 10px;
}
.size-btn:hover { border-color:var(--dark); }
.size-btn.selected, .size-btn.active { background:var(--dark); color:var(--white); border-color:var(--dark); }
.size-btn:disabled { opacity:.35; cursor:not-allowed; }

/* ── Color swatches ─────────────────────────────────────────── */
.color-swatch {
  width:32px; height:32px; border-radius:50%; cursor:pointer;
  border:2px solid transparent; transition:all var(--t);
  position:relative; flex-shrink:0;
}
.color-swatch:hover,.color-swatch.selected { border-color:var(--dark); box-shadow:0 0 0 3px var(--white), 0 0 0 5px var(--dark); }

/* ── Page link / pagination ─────────────────────────────────── */
.page-link {
  min-width:38px; height:38px; border-radius:10px; border:1.5px solid #E2E2E8;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:600; color:var(--mid);
  transition:all var(--t);
}
.page-link:hover, .page-link.active { background:var(--dark); color:var(--white); border-color:var(--dark); }

/* ── Toast ──────────────────────────────────────────────────── */
#toast-container { position:fixed; bottom:24px; right:24px; z-index:9999; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
.toast {
  background:var(--dark); color:var(--white);
  padding:12px 18px; border-radius:var(--radius); font-size:13px; font-weight:500;
  display:flex; align-items:center; gap:10px; min-width:220px; max-width:340px;
  box-shadow:var(--shadow); pointer-events:auto;
  animation:toastIn .3s cubic-bezier(0.4,0,0.2,1);
  border-left:3px solid var(--gold);
}
.toast.error { border-left-color:#E53E3E; }
.toast.success { border-left-color:#38A169; }
@keyframes toastIn { from { transform:translateX(24px); opacity:0; } to { transform:none; opacity:1; } }

/* ── Qty stepper ────────────────────────────────────────────── */
.qty-stepper { display:flex; align-items:center; border:1.5px solid #E2E2E8; border-radius:100px; overflow:hidden; height:50px; }
.qty-stepper button { width:44px; height:100%; font-size:20px; font-weight:300; color:var(--mid); transition:color var(--t), background var(--t); display:flex; align-items:center; justify-content:center; }
.qty-stepper button:hover { color:var(--dark); background:#F5F4F0; }
.qty-stepper input { width:52px; text-align:center; border:none; font-size:15px; font-weight:700; color:var(--dark); -moz-appearance:textfield; background:transparent; }
.qty-stepper input::-webkit-outer-spin-button,.qty-stepper input::-webkit-inner-spin-button { -webkit-appearance:none; }

/* ── Marquee ────────────────────────────────────────────────── */
@keyframes marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }
.marquee-track { animation:marquee 28s linear infinite; display:flex; width:max-content; }
.marquee-track:hover { animation-play-state:paused; }
.marquee-wrap { overflow:hidden; }

/* ── Spinner ────────────────────────────────────────────────── */
.spinner { width:16px; height:16px; border:2px solid rgba(255,255,255,.3); border-top-color:currentColor; border-radius:50%; animation:spin .7s linear infinite; display:inline-block; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ── Header ─────────────────────────────────────────────────── */
#site-header { transition:background var(--t), box-shadow var(--t); }
#site-header.scrolled { background:rgba(12,12,14,.97) !important; box-shadow:0 1px 0 rgba(255,255,255,.06); }

/* Cart drawer */
#cart-drawer-overlay { background:rgba(0,0,0,.6); backdrop-filter:blur(4px); }
#cart-drawer { transform:translateX(100%); transition:transform .35s cubic-bezier(0.4,0,0.2,1); }
#cart-drawer.open { transform:none; }

/* Search overlay */
#search-overlay { backdrop-filter:blur(16px); background:rgba(12,12,14,.97); transition:opacity var(--t); }

/* ── Admin common ───────────────────────────────────────────── */
.admin-nav-link {
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; border-radius:10px;
  font-size:13px; font-weight:500; color:rgba(255,255,255,.5);
  transition:all var(--t); white-space:nowrap;
}
.admin-nav-link:hover { background:rgba(255,255,255,.06); color:rgba(255,255,255,.85); }
.admin-nav-link.active { background:rgba(201,169,110,.15); color:var(--gold); }
.admin-nav-link svg { flex-shrink:0; opacity:.7; }
.admin-nav-link.active svg { opacity:1; }

.admin-nav-group-label {
  font-size:9px; font-weight:800; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,255,255,.2); padding:18px 12px 6px;
}

.stat-card { background:var(--white); border-radius:var(--radius-lg); border:1px solid #EBEBF0; padding:22px 24px; }
.stat-card-value { font-size:28px; font-weight:800; color:var(--dark); line-height:1; margin-bottom:4px; }
.stat-card-label { font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--mid); }
.stat-card-delta { font-size:11px; font-weight:700; }
.stat-card-delta.up { color:#38A169; }
.stat-card-delta.down { color:#E53E3E; }

/* ── Utilities ──────────────────────────────────────────────── */
.text-gold { color:var(--gold); }
.text-mid { color:var(--mid); }
.text-muted { color:var(--muted); }
.text-dark { color:var(--dark); }
.bg-dark { background:var(--dark); }
.bg-dark-2 { background:var(--dark-2); }
.scrollbar-hide { scrollbar-width:none; -ms-overflow-style:none; }
.scrollbar-hide::-webkit-scrollbar { display:none; }
.line-clamp-1 { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.line-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* WA button */
.bg-wa { background:#25D366; }

/* ── Gender badge ───────────────────────────────────────────── */
.gender-men   { background:rgba(37,99,235,.1);  color:var(--men);   }
.gender-women { background:rgba(219,39,119,.1); color:var(--women); }
.gender-kids  { background:rgba(5,150,105,.1);  color:var(--kids);  }
.gender-badge { font-size:9px; font-weight:800; letter-spacing:.15em; text-transform:uppercase; padding:3px 9px; border-radius:100px; }

/* ── Prose ──────────────────────────────────────────────────── */
.prose { max-width:none; }
.prose p { margin-bottom:1em; }
.prose ul { list-style:disc; padding-left:1.5em; margin-bottom:1em; }
.prose h3 { font-family:'Cormorant Garamond',serif; font-size:1.25em; font-weight:600; margin-bottom:.5em; }

/* ── Animations ─────────────────────────────────────────────── */
@keyframes fadeUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:none; } }
.animate-fade-up { animation:fadeUp .6s cubic-bezier(0.4,0,0.2,1) both; }
@keyframes float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }
.animate-float { animation:float 3.5s ease-in-out infinite; }

/* ── Responsive helpers ─────────────────────────────────────── */
@media (max-width:640px) {
  .btn-primary, .btn-gold, .btn-outline, .btn-secondary { padding:12px 24px; font-size:10px; }
}