/* ─── Typography — বাংলা + ল্যাটিন, self-hosted ──────────────────────────────
   BrandHeading = Baloo Da 2 (variable 400–800) — গোলগাল, বন্ধুত্বপূর্ণ heading
   BrandFont    = Hind Siliguri (400/500/600/700) — পরিষ্কার body

   subset আলাদা ফাইলে (unicode-range) — ল্যাটিন-only পেজে বাংলা ফাইল নামবে না।
   নতুন client-এ font বদলাতে: assets/fonts/-এ woff2 replace করে নিচের path মেলাও।
   ⚠️ বাংলা glyph নেই এমন font নেবে না (Jost, Poppins, Inter — কোনোটাতেই নেই)। */
@font-face {
  font-family: 'BrandHeading';
  src: url('/assets/fonts/brand-heading-bengali-400-800.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1;
}
@font-face {
  font-family: 'BrandHeading';
  src: url('/assets/fonts/brand-heading-latin-400-800.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'BrandFont';
  src: url('/assets/fonts/brand-font-bengali-400.woff2') format('woff2');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1;
}
@font-face {
  font-family: 'BrandFont';
  src: url('/assets/fonts/brand-font-latin-400.woff2') format('woff2');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'BrandFont';
  src: url('/assets/fonts/brand-font-bengali-700.woff2') format('woff2');
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1;
}
@font-face {
  font-family: 'BrandFont';
  src: url('/assets/fonts/brand-font-latin-700.woff2') format('woff2');
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ═══ THEME TOKENS — per-client theming happens HERE only ═══ */
  /* ── ChotoRannaGhor: Tin Toy & Cream Paper ─────────────────────────────────
     পুরোনো টিনের খেলনা + কাঠের ব্লক + কাগজের পাতা।
     পাইন-টিল = action · ভার্মিলিয়ন = ছাড় · গাঁদা = highlight · ক্রিম = কাগজ।
     টিল-কে brand করা হয়েছে যাতে লাল sale badge আলাদা করে চোখে পড়ে। */

  /* Brand blue ramp (primary, CTA, links) */
  --brand-50: #e8f4f1;
  --brand-100: #c6e4dd;
  --brand-300: #6dbfaf;
  --brand-500: #17786b;
  --brand-600: #126156;
  --brand-800: #0a3b34;

  /* Accent deal ramp (sale, offer, savings — কমলা) */
  --accent-50: #fdefea;
  --accent-500: #d94f2b;
  --accent-600: #b93f20;

  /* Marigold — তৃতীয় highlight (NEW badge, রেটিং তারা) */
  --marigold-50: #fff6e3;
  --marigold-500: #f0a81e;
  --marigold-600: #d18c0c;

  /* Core Colors */
  --bg-color: #fdfaf4;
  /* pure white page bg */
  --surface: #ffffff;
  /* cards / panels */
  --text-color: #241c16;
  /* cool near-black ink */
  --accent-color: #17786b;
  /* CTA/highlight = brand blue */
  --text-muted: #736355;
  /* cool gray subtext */
  --border-color: #e4dcd2;
  --border-light: #f1ece5;

  /* RGB channels — for rgba() overlays/shadows so they follow the brand */
  --ink-rgb: 36, 28, 22;
  --paper-rgb: 253, 250, 244;

  /* Ink ramp (text/graphics, dark → light, cool neutral) */
  --ink-900: #241c16;
  --ink-800: #372c23;
  --ink-700: #4b3d32;
  --ink-600: #5e4e41;
  --ink-500: #736355;
  --ink-380: #8a7a6c;
  --ink-350: #9b8b7d;
  --ink-300: #aea093;
  --ink-250: #c2b6ab;
  --ink-200: #d5ccc3;

  /* Line ramp (borders/dividers, cool) */
  --line-300: #dcd2c6;
  --line-250: #e4dcd2;
  --line-200: #ebe4db;
  --line-120: #f1ece5;
  --line-110: #f4f0ea;
  --line-80: #f8f5f0;

  /* Surface ramp (light backgrounds, cool white) */
  --surface-300: #f0e9de;
  --surface-200: #f5efe6;
  --surface-150: #f8f4ed;
  --surface-140: #faf7f1;
  --surface-100: #fcfaf6;
  --surface-50: #fdfcf9;

  /* Status colors (order timeline, alerts) */
  --status-success: #16a34a;
  /* success green */
  --status-success-alt: #10b981;
  /* discount/success accent (emerald) */
  --status-info: #3b82f6;
  --status-warning: #e8a53c;
  --status-processing: #ff8a00;
  --status-shipped: #8b5cf6;
  --status-danger: #dc2626;
  --status-danger-soft: #d23b28;
  --status-danger-deep: #b91c1c;
  --surface-alt: #f5efe6;
  /* neutral cancel/secondary button bg */
  --brand-google: #4285f4;
  /* Google sign-in blue (fixed brand) */
  --status-success-deep: #15803d;
  /* discount text (deep green) */
  --slate-heading: #372c23;
  /* spec-table heading text */

  /* Sale price — কমলা (নীল CTA থেকে আলাদা) */
  --sale-color: #b93f20;

  /* Status soft backgrounds (order status pills) */
  --status-warning-bg: #fdf4e3;
  --status-info-bg: #eff6ff;
  --status-processing-bg: #fff4e5;
  --status-shipped-bg: #f5f3ff;
  --status-success-bg: #eaf7ef;
  --status-danger-bg: #fdecec;

  --status-success-alt-bg: #e7f6ee;
  /* coupon/discount badge bg (light green) */

  /* Promo badge gradient (Free Delivery — brand blue) */
  --promo-from: #1f9182;
  --promo-to: #17786b;

  /* Skeleton loader (cool) */
  --skeleton-base: #efe8df;
  --skeleton-sheen: #f8f4ed;

  /* Elevation (soft) */
  --shadow-sm: 0 1px 3px rgba(var(--ink-rgb), 0.07);
  --shadow-md: 0 6px 20px rgba(var(--ink-rgb), 0.10);
  --shadow-lg: 0 14px 36px rgba(var(--ink-rgb), 0.14);

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

  /* Shapes — SHARP: ধারালো বক্সি কোণা (Border Radius 0px) */
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
  --radius-pill: 0px;
  --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;
}

html,
body {
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

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;
  /* Friendly-modern tracking for a fresh agro brand */
  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;
}

/* ═══ GLOBAL SHARP ARCHITECTURE — Strict 0px Border Radius ═══ */
button, input, select, textarea,
.btn, .btn-primary, .btn-secondary, .btn-outline,
.card, .product-card, .ts-card, .coll-pc,
.badge, .chip, .pill, .tag, .toast,
.modal, .dialog, .dropdown, .topbar-nav-dropdown, .topbar-search-dropdown,
.alert, .panel, .drawer, .accordion {
  border-radius: 0 !important;
}