/* ─── Premium Typography (Variable Fonts, self-hosted) ───────────────────── */
/* Brand-agnostic indirection: CSS জুড়ে শুধু `--font-primary` / `--font-heading`
   ব্যবহার হয়, কোথাও font-family hardcoded নেই। তাই নতুন client-এ **শুধু নিচের দুটো
   @font-face-এর src বদলালেই** পুরো storefront-এর টাইপোগ্রাফি বদলে যায়।

   Aparajita: Cormorant Garamond (heading — editorial/heritage)
            + Montserrat (body/UI — modern/clean)
            + Noto Serif Bengali (বাংলা লেখা — unicode-range দিয়ে বাঁধা)
   সবই variable font, self-hosted (Google-এ extra DNS+TLS round-trip নেই —
   BD থেকে লক্ষণীয় পার্থক্য)। */

/* Body / UI / navigation / price */
@font-face {
  font-family: 'BrandFont';
  src: url('/assets/fonts/montserrat.woff2') format('woff2-variations'),
    url('/assets/fonts/montserrat.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* Headings / hero / section titles / logo wordmark */
@font-face {
  font-family: 'BrandHeading';
  src: url('/assets/fonts/cormorant-garamond.woff2') format('woff2-variations'),
    url('/assets/fonts/cormorant-garamond.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* বাংলা — একই দুটো family-নামে বসানো, শুধু unicode-range আলাদা।
   ⚠️ ফাইলটা ১৮৭KB (বাংলা glyph-সেট বড়)। unicode-range থাকায় browser এটা
      **কেবল তখনই** download করে যখন পাতায় সত্যিই বাংলা অক্ষর আছে — ইংরেজি-only
      পাতায় খরচ শূন্য। এই range মুছে দিলে প্রতিটা পাতা ১৮৭KB ভারী হয়ে যাবে। */
@font-face {
  font-family: 'BrandFont';
  src: url('/assets/fonts/noto-serif-bengali.woff2') format('woff2-variations'),
    url('/assets/fonts/noto-serif-bengali.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+200C-200D, U+20B9, U+25CC;
}

@font-face {
  font-family: 'BrandHeading';
  src: url('/assets/fonts/noto-serif-bengali.woff2') format('woff2-variations'),
    url('/assets/fonts/noto-serif-bengali.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+200C-200D, U+20B9, U+25CC;
}

:root {
  /* ═══ THEME TOKENS — per-client theming happens HERE only ═══ */
  /* ── Aparajita: Dusty Rose & Warm Ivory ───────────────────────────────────
     Elegant · Feminine · Bengali heritage · modern luxury.
     Base palette (client-supplied — blueprint/design-system.md §2):
       Dusty Rose #A87578 · Deep Mauve #875B5E · Burgundy Brown #5A3D3F
       Muted Rose #815457 · Warm Ivory   #FBF5F1 · Soft Cream    #FFFDFC
       Blush Cream #F4E6E1 · Pale Blush  #E9D0CB · Rose Border   #DEC9C5
       Muted Gold #B38A52 · Champagne    #D2B27A · Warm Charcoal #403738
       Soft Taupe #756769 · Sage         #6F8779 · White         #FFFFFF
     Gold ইচ্ছে করেই কম — divider, hover, jewellery detail-এ। বড় surface-এ নয়।
     Ramp পূরণ করতে যে দুটো shade derive করা হয়েছে (client spec-এ নেই):
     --brand-300 ও --brand-700। */

  /* Brand dusty-rose ramp (primary, CTA, links, header/footer) */
  --brand-50: #f4e6e1;
  /* Blush Cream */
  --brand-100: #e9d0cb;
  /* Pale Blush */
  --brand-300: #c9a0a1;
  /* derived — mid tint */
  --brand-500: #a87578;
  /* Primary Dusty Rose */
  --brand-600: #875b5e;
  /* Deep Mauve — header/footer */
  --brand-700: #6e4a4c;
  /* derived */
  --brand-800: #5a3d3f;
  /* Burgundy Brown — darkest */

  /* Accent gold ramp (premium detail, divider, jewellery hover — sparingly) */
  --accent-50: #f6eee0;
  --accent-300: #d2b27a;
  /* Champagne Gold */
  --accent-500: #b38a52;
  /* Muted Gold */
  --accent-600: #96723f;

  /* Core Colors */
  --bg-color: #fbf5f1;
  /* Warm Ivory — main page canvas */
  --surface: #fffdfc;
  /* Soft Cream — cards/panels lift off the ivory */
  --text-color: #403738;
  /* Warm Charcoal ink */
  --accent-color: #a87578;
  /* CTA/highlight = Dusty Rose */
  --text-muted: #756769;
  /* Soft Taupe subtext */
  --border-color: #dec9c5;
  /* Soft Rose Border */
  --border-light: #e9d0cb;
  /* Pale Blush */

  /* RGB channels — for rgba() overlays/shadows so they follow the brand */
  --ink-rgb: 64, 55, 56;
  --paper-rgb: 251, 245, 241;

  /* Ink ramp (text/graphics, dark → light, warm neutral) */
  --ink-900: #403738;
  --ink-800: #4d4344;
  --ink-700: #5c5152;
  --ink-600: #6b5f60;
  --ink-500: #756769;
  --ink-400: #817476;
  --ink-380: #8b7e80;
  --ink-350: #9a8d8f;
  --ink-300: #a99d9f;
  --ink-250: #bcb1b3;
  --ink-200: #cfc6c7;

  /* Line ramp (borders/dividers — rose tints) */
  --line-300: #dec9c5;
  --line-250: #e4d2cf;
  --line-200: #e9d0cb;
  --line-120: #f0e2de;
  --line-110: #f4e6e1;
  --line-80: #f7eeea;

  /* Surface ramp (light backgrounds — ivory → blush) */
  --surface-300: #e9d0cb;
  /* Pale Blush — secondary section bg */
  --surface-200: #f0dfda;
  --surface-150: #f4e6e1;
  --surface-140: #f7ece8;
  --surface-100: #fbf5f1;
  --surface-50: #fdf9f6;

  /* Status colors (order timeline, alerts) — warm palette-এ muted, তবু আলাদা।
     brand এখন dusty rose, তাই success-এ client-এর Sage #6F8779 নেওয়া হলো —
     CTA-র সাথে গুলিয়ে যায় না, আবার palette-এর বাইরেও যায় না।
     ⚠️ Sage-এর contrast ivory-তে ≈3.6:1 — pill/badge-এ ঠিক আছে, কিন্তু body
        text-এ `--status-success-deep` (≈4.9:1) ব্যবহার করো। */
  --status-success: #6f8779;
  --status-success-alt: #7f9688;
  /* discount/success accent */
  --status-info: #3b6ea5;
  --status-warning: #c08a3e;
  --status-processing: #b38a52;
  --status-shipped: #6b5b95;
  --status-danger: #a8412f;
  --status-danger-soft: #b04a37;
  --status-danger-deep: #8c3527;
  --surface-alt: #f4e6e1;
  /* neutral cancel/secondary button bg */
  --brand-google: #4285f4;
  /* Google sign-in blue (fixed brand — বদলানো যাবে না) */
  --status-success-deep: #5a7263;
  /* discount text (deep sage) */
  --slate-heading: #815457;
  /* spec-table heading text */

  /* Sale price — deep bronze (Muted Gold-এরই গাঢ় রূপ)।
     ⚠️ কেন Muted Gold #b38a52 সরাসরি নয়: Warm Ivory #fbf5f1-এর উপর contrast
        ≈2.9:1 — text হিসেবে অপাঠ্য (WCAG AA লাগে 4.5:1)। #8a6a3b-তে ≈4.7:1 —
        একই gold family-তেই থাকল, অথচ পড়া যায়।
     Badge/divider-এ পূর্ণ Muted Gold (--accent-500) ব্যবহার করো, text-এ এটা। */
  --sale-color: #8a6a3b;

  /* Status soft backgrounds (order status pills) — cream-এর উপর বসে */
  --status-warning-bg: #f7efdf;
  --status-info-bg: #eaf0f7;
  --status-processing-bg: #f6eee0;
  --status-shipped-bg: #f0edf5;
  --status-success-bg: #e8efe9;
  --status-danger-bg: #f7e9e6;

  --status-success-alt-bg: #e8efe9;
  /* coupon/discount badge bg */

  /* Promo badge gradient (Free Delivery — dusty rose) */
  --promo-from: #b8868a;
  --promo-to: #a87578;

  /* Skeleton loader (warm) */
  --skeleton-base: #f0e2de;
  --skeleton-sheen: #f7eeea;

  /* Elevation (soft) */
  --shadow-sm: 0 1px 3px rgba(var(--ink-rgb), 0.06);
  --shadow-md: 0 4px 16px rgba(var(--ink-rgb), 0.08);
  --shadow-lg: 0 12px 32px rgba(var(--ink-rgb), 0.12);

  /* Typography */
  --font-primary: 'BrandFont', sans-serif;
  --font-heading: 'BrandHeading', 'BrandFont', sans-serif;

  /* Shapes — SHARP standard: zero radius everywhere (Cloco-style).
     Circles/pills (50%, --radius-pill) stay round for swatches/toggles/tags. */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --radius-none: 0px;

  /* Spacing System */
  --gap-section: 64px;
  /* Large gaps between major sections */
  --gap-section-sm: 40px;
  /* Mobile section gap */
  --gap-element-lg: 32px;
  /* Large element gap (e.g., between form sections) */
  --gap-element: 24px;
  /* Standard element gap (e.g., below section titles) */
  --gap-element-sm: 16px;
  /* Small element gap (e.g., between form inputs) */
  --gap-element-xs: 8px;
  /* Extra small gap (e.g., between labels and inputs) */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font-primary);
  background-color: var(--bg-color);
  color: var(--text-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Crisp text on macOS */
  line-height: 1.6;
  /* Better readability */
  text-rendering: optimizeLegibility;
}

/* ─── Typography Refinements (Premium Look) ────────────────────────────── */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  line-height: 1.2;
  letter-spacing: -0.01em;
  /* Tight, editorial tracking — Cormorant Garamond headings */
  font-weight: 600;
  color: var(--text-color);
}

a {
  text-decoration: none;
  color: var(--text-color);
}

ul {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: var(--font-primary);
  color: var(--text-color);
  display: flex;
  align-items: center;
  justify-content: center;
}

input,
select,
textarea,
button {
  font-family: inherit;
  font-size: 100%;
  /* Prevent iOS zoom */
}

/* ─── Mobile Form Resets (iOS/Safari Fixes) ────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
select,
textarea {
  appearance: none;
  -webkit-appearance: none;
  border-radius: var(--radius-sm);
  background-color: var(--bg-color);
}

/* ─── Touch & Selection ──────────────────────────────────────────────────── */
a,
button,
label,
[onclick],
[role="button"] {
  user-select: none;
  -webkit-touch-callout: none;
}

img {
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  /* NOTE: do NOT set `pointer-events: auto` here. `auto` is already the default,
     and this blanket rule overrode `pointer-events: none` on hidden overlay
     parents (e.g. the closed product lightbox), leaving an invisible image
     sitting fixed in the middle of the viewport that swallowed taps and killed
     touch-scroll. It was covering 21% of the Add to Cart button. */
}

@media (max-width: 768px) {
  body {
    /* Prevent the fixed mobile bottom bar from overlapping content at the very bottom */
    padding-bottom: 70px;
  }
}

/* Global Select Options Styling - Override default blue highlight with black */
select option {
  background-color: var(--bg-color);
  color: var(--ink-900);
  padding: 8px 12px;
}

select option:hover,
select option:focus,
select option:active,
select option:checked {
  background-color: var(--ink-900) !important;
  background: var(--ink-900) !important;
  color: var(--bg-color) !important;
  cursor: pointer;
}

/* Inset shadow trick to override default blue selection color on Chrome/Edge/Firefox where supported */
select option:checked {
  box-shadow: 0 0 10px 100px var(--ink-900) inset !important;
  -webkit-box-shadow: 0 0 10px 100px var(--ink-900) inset !important;
  color: var(--bg-color) !important;
}

/* ─── Bootstrap Icons optical centering ───────────────────────────────────
   Body line-height is 1.6 which makes bi-* glyphs visually off-center inside
   flex buttons/circles. Setting line-height:1 removes the extra space above
   and below the glyph so flex align-items:center works correctly.           */
i[class*="bi-"] {
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}