/* ============================================================
   KHAJURBHAI SINGTEL — DESIGN SYSTEM
   Global CSS Variables + Light/Dark Mode
   ============================================================ */

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

/* ---- LIGHT MODE (default) ---- */
:root {
  /* Brand */
  --brand-red:       #DA3F3F;
  --brand-red-dark:  #b83232;
  --brand-gold:      #C9973A;
  --brand-gold-light:#e8b860;
  --brand-cream:     #FDF8F0;

  /* Backgrounds */
  --bg-body:         #FAFAF8;
  --bg-surface:      #FFFFFF;
  --bg-surface-2:    #F5F2EC;
  --bg-surface-3:    #EDE8DF;
  --bg-nav:          rgba(253,248,240,0.92);
  --bg-footer:       #2A2118;
  --bg-card:         #FFFFFF;
  --bg-card-hover:   #FDF8F0;
  --bg-input:        #FFFFFF;
  --bg-overlay:      rgba(0,0,0,0.5);

  /* Text */
  --text-primary:    #1A1208;
  --text-secondary:  #5A4E3C;
  --text-muted:      #8C7D6B;
  --text-inverse:    #FFFFFF;
  --text-link:       #DA3F3F;

  /* Borders */
  --border-color:    #E8E0D4;
  --border-strong:   #C8BDB0;
  --border-focus:    #C9973A;

  /* Shadows */
  --shadow-sm:       0 1px 3px rgba(26,18,8,0.08);
  --shadow-md:       0 4px 16px rgba(26,18,8,0.10);
  --shadow-lg:       0 8px 32px rgba(26,18,8,0.14);
  --shadow-nav:      0 2px 20px rgba(26,18,8,0.12);

  /* Cart / Badge */
  --badge-bg:        #DA3F3F;
  --badge-text:      #FFFFFF;

  /* Button */
  --btn-primary-bg:      #1A1208;
  --btn-primary-text:    #FFFFFF;
  --btn-primary-hover:   #DA3F3F;
  --btn-secondary-bg:    transparent;
  --btn-secondary-text:  #1A1208;
  --btn-secondary-border:#1A1208;

  /* Status */
  --success:   #2E7D32;
  --warning:   #E65100;
  --error:     #C62828;
  --info:      #1565C0;

  /* Typography */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Jost', sans-serif;
  --font-gujarati:'Anek Gujarati', sans-serif;

  /* Spacing */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;

  /* Radius */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* Transitions */
  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;

  /* Nav height */
  --nav-height: 72px;
}

/* ---- DARK MODE ---- */
[data-theme="dark"] {
  --brand-red:       #E85555;
  --brand-gold:      #D4A84B;
  --brand-gold-light:#E8C472;
  --brand-cream:     #1E1610;

  --bg-body:         #120E08;
  --bg-surface:      #1C1610;
  --bg-surface-2:    #251D14;
  --bg-surface-3:    #2E2418;
  --bg-nav:          rgba(18,14,8,0.95);
  --bg-footer:       #0A0806;
  --bg-card:         #1C1610;
  --bg-card-hover:   #251D14;
  --bg-input:        #1C1610;

  --text-primary:    #F5EFE4;
  --text-secondary:  #C4B49E;
  --text-muted:      #7A6A58;
  --text-inverse:    #120E08;
  --text-link:       #E85555;

  --border-color:    #2E2418;
  --border-strong:   #3D3025;
  --border-focus:    #D4A84B;

  --shadow-sm:       0 1px 3px rgba(0,0,0,0.3);
  --shadow-md:       0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg:       0 8px 32px rgba(0,0,0,0.5);
  --shadow-nav:      0 2px 20px rgba(0,0,0,0.5);

  --btn-primary-bg:      #DA3F3F;
  --btn-primary-text:    #FFFFFF;
  --btn-primary-hover:   #E85555;
  --btn-secondary-bg:    transparent;
  --btn-secondary-text:  #F5EFE4;
  --btn-secondary-border:#3D3025;
}

/* ============================================================
   GLOBAL RESETS & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-body);
  color: var(--text-primary);
  line-height: 1.6;
  transition: background-color var(--duration-slow) var(--ease),
              color var(--duration-slow) var(--ease);
  min-height: 100vh;
}

body.no-scroll { overflow: hidden; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
ul, ol { list-style: none; }

/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 12px 28px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.03em;
  transition: all var(--duration-base) var(--ease);
  white-space: nowrap;
}

.btn-primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border: 2px solid var(--btn-primary-bg);
}
.btn-primary:hover {
  background: var(--btn-primary-hover);
  border-color: var(--btn-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-secondary {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  border: 2px solid var(--btn-secondary-border);
}
.btn-secondary:hover {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border-color: var(--btn-primary-bg);
}

.btn-ghost {
  background: transparent;
  color: var(--text-primary);
  border: 2px solid var(--border-color);
}
.btn-ghost:hover {
  border-color: var(--text-primary);
}

/* Section heading */
.section-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.section-subtitle {
  font-family: var(--font-gujarati);
  font-size: 16px;
  color: var(--text-muted);
  margin-top: var(--space-2);
}

.section-border {
  height: 1px;
  background: var(--border-color);
  margin: var(--space-10) 0;
}

/* Toast notifications */
.kb-toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.kb-toast {
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--brand-gold);
  padding: 14px 20px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-size: 14px;
  font-weight: 500;
  max-width: 320px;
  pointer-events: all;
  animation: toastIn 0.3s var(--ease-bounce) both;
  display: flex;
  align-items: center;
  gap: 10px;
}

.kb-toast.success { border-left-color: var(--success); }
.kb-toast.error   { border-left-color: var(--error); }
.kb-toast.warning { border-left-color: var(--warning); }

.kb-toast.removing {
  animation: toastOut 0.3s var(--ease) forwards;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(40px); }
}

/* Cart Drawer Overlay */
.cart-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-overlay);
  z-index: 8000;
  opacity: 0;
  visibility: hidden;
  transition: all var(--duration-base) var(--ease);
}
.cart-overlay.open {
  opacity: 1;
  visibility: visible;
}

/* ═══════════════════════════════════════════════════════════════
   Variant pills — add these rules to your all-product.css
   They style the size/variant buttons on group product cards.
═══════════════════════════════════════════════════════════════ */

/* Pill container */
.variant-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 10px;
}

/* Individual pill */
.variant-pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  border: 1.5px solid var(--border-color, #e3e8f0);
  background: var(--surface-color, #fff);
  color: var(--text-primary, #1a2035);
  text-decoration: none;
  transition: border-color 0.13s, background 0.13s, color 0.13s;
  cursor: pointer;
  white-space: nowrap;
}

.variant-pill:hover {
  border-color: var(--accent-color, #3d6df8);
  background: var(--accent-bg, #eef2fe);
  color: var(--accent-color, #3d6df8);
  text-decoration: none;
}

/* Out-of-stock pill */
.variant-pill--oos {
  opacity: 0.4;
  text-decoration: line-through;
  cursor: default;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════
   Home page variant pills — add to your home page / index CSS
═══════════════════════════════════════════════════════════════ */

/* Pill row inside home product card */
.home-variant-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 5px 0 7px;
}

/* Individual pill — plain link styled as a button */
.home-variant-pill {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
  border: 1.5px solid var(--border-color, #e3e8f0);
  background: var(--surface-color, #fff);
  color: var(--text-secondary, #6b7a99);
  text-decoration: none;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
  white-space: nowrap;
}

.home-variant-pill:hover {
  border-color: var(--accent-color, #3d6df8);
  background: var(--accent-bg, #eef2fe);
  color: var(--accent-color, #3d6df8);
  text-decoration: none;
}

.home-variant-pill--oos {
  opacity: 0.4;
  text-decoration: line-through;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════
   Variant selector on product detail page — add to product.css
   (the JS injects these classes inline too, but CSS gives you
   theme-aware colours via variables)
═══════════════════════════════════════════════════════════════ */
#variant-selector .qty-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary, #6b7a99);
  margin-bottom: 8px;
  display: block;
}