/* ==========================================================================
   Utkal Samagri — public site design system
   One stylesheet for every public page (replaces bootstrap/main/animate/
   font-awesome/swiper/meanmenu). Tokens first; use them, not literals.
   ========================================================================== */

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces.woff2") format("woff2");
  font-weight: 500 700;
  font-display: optional;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/jakarta.woff2") format("woff2");
  font-weight: 400 700;
  font-display: optional;
}
/* Metric-matched fallbacks keep layout stable while the web fonts swap in */
@font-face { font-family: "Fraunces Fallback"; src: local("Georgia"); size-adjust: 104%; ascent-override: 92%; descent-override: 24%; }
@font-face { font-family: "Jakarta Fallback"; src: local("Arial"); size-adjust: 103%; ascent-override: 98%; descent-override: 22%; }

:root {
  /* Brand colour (from the Utkal Samagri logo) */
  --ink: #1a0a02;          /* headings */
  --body: #120a04;         /* paragraph text: near-black, per client */
  --muted: #2a1c12;        /* secondary text, still near-black */
  --bg: #fffdf5;           /* cream page */
  --bg-2: #fff6dc;         /* soft gold band */
  --surface: #ffffff;
  --line: #efdfb8;
  --maroon: #7a1e1e;
  --saffron: #e8751a;
  --saffron-deep: #b8322a; /* red end of the saffron gradient, AA on cream */
  --marigold: #d4a017;
  --vermilion: #c0392b;
  --leaf: #2d6a4f;
  --leaf-deep: #1b4332;
  --gold: #d4a017;
  --gold-deep: #a07010;
  --wa: #0f7a40;

  /* Gradients (exact logo / product colours) */
  --g-dark: linear-gradient(135deg, #0e0602 0%, #1e0c04 25%, #2e1608 55%, #3B2314 80%, #1a0a02 100%);
  --g-cream: radial-gradient(ellipse at 30% 50%, #fffdf0 0%, #fff8d8 35%, #f5dfa0 70%, #e8c860 100%);
  --g-primary: linear-gradient(150deg, #E8751A, #C0392B);
  --g-leaf: linear-gradient(150deg, #2D6A4F, #1B4332);
  --g-gold: linear-gradient(150deg, #D4A017, #a07010);
  /* aliases used across the stylesheet */
  --g-temple: var(--g-dark);
  --g-dawn: var(--g-cream);
  --g-gold-text: linear-gradient(150deg, #E8751A, #C0392B);

  /* Type */
  --ff-head: "Fraunces", "Fraunces Fallback", Georgia, serif;
  --ff-body: "Plus Jakarta Sans", "Jakarta Fallback", "Segoe UI", Arial, sans-serif;
  --fs-display: clamp(2.25rem, 1.55rem + 3.2vw, 4rem);
  --fs-h1: clamp(2rem, 1.5rem + 2.3vw, 3.25rem);
  --fs-h2: clamp(1.75rem, 1.35rem + 1.8vw, 2.75rem);
  --fs-h3: clamp(1.2rem, 1.1rem + .45vw, 1.45rem);
  --fs-h4: 1.125rem;
  --fs-lead: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  --fs-body: clamp(1rem, .97rem + .12vw, 1.0625rem);
  --fs-sm: .9375rem;
  --fs-xs: .8125rem;

  /* Space, shape, depth */
  --gutter: clamp(1rem, .6rem + 2vw, 2rem);
  --section: clamp(3.5rem, 2.4rem + 4.5vw, 6.5rem);
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 24px;
  --shadow-sm: 0 1px 2px rgba(42, 20, 8, .06), 0 2px 8px rgba(42, 20, 8, .05);
  --shadow: 0 2px 6px rgba(42, 20, 8, .05), 0 12px 32px -8px rgba(42, 20, 8, .14);
  --shadow-lg: 0 24px 60px -18px rgba(90, 30, 10, .35);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --header-h: 72px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
html, body { overflow-x: clip; }
body {
  margin: 0;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--body);
  background: var(--bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, svg, video, iframe { display: block; max-width: 100%; }
img { -webkit-user-drag: none; }
input, textarea, select, [contenteditable] { -webkit-user-select: text; user-select: text; }
img { height: auto; }
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .5em;
  font-family: var(--ff-head);
  font-weight: 600;
  line-height: 1.15;
  color: var(--ink);
  letter-spacing: -.01em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.3; }
h4 { font-size: var(--fs-h4); line-height: 1.35; }
p { margin: 0 0 1em; color: var(--body); }
p:last-child { margin-bottom: 0; }
a { color: var(--saffron-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--maroon); }
ul, ol { margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--marigold); outline-offset: 3px; border-radius: 6px; }
::selection { background: #ffd99a; color: var(--ink); }
.icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon--fill { fill: currentColor; stroke: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 1rem; top: -100px; z-index: 1000; background: var(--ink); color: #fff; padding: .75rem 1rem; border-radius: var(--r-sm); }
.skip-link:focus { top: 1rem; color: #fff; }

/* Cross-document view transitions: page-to-page navigation cross-fades instead of flashing */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .25s; }

/* ---------- Layout ---------- */
.container { width: min(100% - 2 * var(--gutter), 1240px); margin-inline: auto; }
.container--narrow { width: min(100% - 2 * var(--gutter), 860px); margin-inline: auto; }
.section { padding-block: var(--section); }
.section--tint { background: var(--bg-2); }
.section--tight { padding-block: calc(var(--section) * .6); }
.section-head { max-width: 760px; margin: 0 auto clamp(2rem, 1.5rem + 2vw, 3.25rem); text-align: center; }
.section-head--left { margin-inline: 0; text-align: left; }
.section-head p { color: var(--muted); font-size: var(--fs-lead); margin-top: .75rem; }
.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  margin-bottom: .9rem;
  font-family: var(--ff-body); font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--saffron-deep);
}
.eyebrow::before, .section-head .eyebrow::after { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--g-primary); }
.section-head--left .eyebrow::after { display: none; }
.text-gradient { background: var(--g-gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.grid { display: grid; gap: clamp(1rem, .7rem + 1.2vw, 1.75rem); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.split { display: grid; gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; }
@media (min-width: 992px) { .split { grid-template-columns: 1.1fr .9fr; } .split--even { grid-template-columns: 1fr 1fr; } }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--g-primary);
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 48px; padding: .8rem 1.5rem;
  border: 0; border-radius: 999px;
  background: var(--btn-bg); color: #fff;
  font-weight: 700; font-size: var(--fs-sm); letter-spacing: .01em; line-height: 1.2;
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 8px 22px -10px rgba(192, 57, 43, .7);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .18);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), filter .2s;
}
.btn:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(163, 38, 26, .75); filter: saturate(1.1); }
.btn:active { transform: translateY(0); }
.btn .icon { transition: transform .2s var(--ease); }
.btn:hover .icon--arrow { transform: translateX(3px); }
.btn--leaf { --btn-bg: var(--g-leaf); box-shadow: 0 8px 22px -10px rgba(27, 67, 50, .7); }
.btn--gold { --btn-bg: var(--g-gold); color: #1a0a02; box-shadow: 0 8px 22px -10px rgba(160, 112, 16, .75); }
.btn--gold:hover { color: #1a0a02; }
.btn--dark { --btn-bg: var(--g-dark); box-shadow: none; }
.btn--light { --btn-bg: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }
.btn--light:hover { color: var(--maroon); }
.btn--ghost { --btn-bg: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn--ghost:hover { color: var(--maroon); box-shadow: inset 0 0 0 1.5px var(--saffron); }
.btn--wa { --btn-bg: var(--wa); box-shadow: 0 8px 22px -10px rgba(18, 140, 74, .7); }
.btn--sm { min-height: 40px; padding: .55rem 1.1rem; font-size: var(--fs-xs); }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }
@media (max-width: 575.98px) {
  .btn-row { flex-wrap: nowrap; gap: .5rem; }
  .btn-row > .btn { flex: 1 1 0; min-width: 0; padding-inline: .75rem; font-size: .8125rem; white-space: normal; text-align: center; }
  .btn-row > .btn .icon { width: 1.1em; height: 1.1em; }
}

/* ---------- Top bar + header ---------- */
.topbar { background: var(--g-dark); color: #f3e3cf; font-size: var(--fs-xs); }
.topbar .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 40px; }
.topbar ul { display: flex; gap: 1.5rem; list-style: none; }
.topbar p { margin: 0; line-height: 1.3; }
.topbar a { display: inline-flex; align-items: center; gap: .4rem; line-height: 1.3; color: inherit; text-decoration: none; }
.topbar a:hover { color: var(--marigold); }
.topbar .icon { width: 1rem; height: 1rem; color: var(--marigold); }
@media (max-width: 991.98px) { .topbar { display: none; } }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 251, 244, .86);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s, box-shadow .2s;
}
.site-header.is-scrolled { border-color: var(--line); box-shadow: 0 6px 24px -18px rgba(42, 20, 8, .5); }
.site-header .container { display: flex; align-items: center; gap: 1.5rem; min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: .6rem; flex: none; text-decoration: none; }
.brand img { width: auto; }
.brand__mark { height: 46px; }
.brand__word { height: 40px; }
@media (max-width: 400px) { .brand__word { height: 32px; } .brand__mark { height: 40px; } }

.nav { margin-left: auto; }
.nav > ul { display: flex; align-items: center; gap: .25rem; list-style: none; }
.nav a, .nav__toggle {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .55rem .85rem; border: 0; border-radius: 999px; background: none;
  color: var(--ink); font-weight: 600; font-size: var(--fs-sm); text-decoration: none;
  transition: background-color .2s, color .2s;
}
.nav a:hover, .nav__toggle:hover, .nav a[aria-current="page"] { background: #fbe6cc; color: var(--maroon); }
.nav__toggle .icon { width: 1rem; height: 1rem; transition: transform .2s; }
.nav__item { position: relative; }
.nav__menu {
  position: absolute; top: calc(100% + 8px); left: 50%; min-width: 220px;
  padding: .5rem; list-style: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translate(-50%, 6px);
  transition: opacity .18s, transform .18s var(--ease), visibility .18s;
}
.nav__menu a { display: flex; border-radius: var(--r-sm); padding: .65rem .85rem; }
.nav__item:hover .nav__menu, .nav__item:focus-within .nav__menu, .nav__toggle[aria-expanded="true"] + .nav__menu {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
}
.nav__item:hover .nav__toggle .icon, .nav__toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.header-cta { flex: none; }
.menu-btn {
  display: none; place-items: center; width: 46px; height: 46px; margin-left: auto;
  border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink);
}
.menu-btn .icon { width: 22px; height: 22px; }
@media (max-width: 1099.98px) {
  .nav, .header-cta { display: none; }
  .menu-btn { display: grid; }
}
/* Phones: the header floats as a glass capsule with a gold hairline and a dark menu button */
@media (max-width: 767.98px) {
  :root { --header-h: 80px; }
  .site-header {
    top: 10px; margin: 10px 12px; border: 1px solid rgba(212, 160, 23, .32); border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 253, 245, .9), rgba(255, 246, 220, .82));
    -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 10px 30px -14px rgba(42, 20, 8, .38), 0 2px 6px rgba(42, 20, 8, .06);
    transition: box-shadow .3s var(--ease), background .3s, border-color .3s;
  }
  .site-header.is-scrolled {
    border-color: rgba(212, 160, 23, .5);
    background: linear-gradient(180deg, rgba(255, 253, 245, .96), rgba(255, 246, 220, .92));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 18px 40px -16px rgba(42, 20, 8, .55), 0 2px 8px rgba(42, 20, 8, .08);
  }
  .site-header .container { min-height: 58px; padding-inline: .5rem .4rem; gap: .75rem; }
  .brand__mark { height: 42px; }
  .brand__word { height: 34px; }
  .menu-btn {
    width: 46px; height: 46px; border: 1px solid rgba(212, 160, 23, .45); background: var(--g-dark); color: #f0c24a;
    box-shadow: 0 8px 18px -8px rgba(26, 10, 2, .7), inset 0 1px 0 rgba(255, 246, 220, .14);
    transition: transform .2s var(--ease);
  }
  .menu-btn:active { transform: scale(.94); }
}
@media (max-width: 400px) { .brand__word { height: 30px; } .brand__mark { height: 40px; } }

/* Mobile drawer (native <dialog>): dark temple panel, gold hairlines, cream type */
.drawer {
  margin: 0 0 0 auto; padding: 0; width: min(90vw, 400px); max-width: none; height: 100dvh; max-height: none;
  border: 0; border-left: 1px solid rgba(212, 160, 23, .28); border-radius: 28px 0 0 28px;
  background: var(--g-dark); color: #f3e3c6;
  box-shadow: -30px 0 80px -20px rgba(0, 0, 0, .6);
}
.drawer::backdrop { background: rgba(14, 6, 2, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.drawer__inner { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: .9rem; min-height: 100%; padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom)); }
.drawer__wheel { position: absolute; right: -90px; top: 22%; width: 300px; color: var(--marigold); opacity: .07; pointer-events: none; }
.drawer__top { position: relative; display: flex; align-items: center; justify-content: space-between; padding-bottom: .8rem; border-bottom: 1px solid rgba(255, 246, 220, .1); }
.drawer__top img { width: 128px; height: auto; }
.drawer__close { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255, 246, 220, .18); border-radius: 50%; background: rgba(255, 246, 220, .06); color: #fff6dc; transition: background .2s, transform .2s var(--ease); }
.drawer__close:hover, .drawer__close:active { background: rgba(255, 246, 220, .14); transform: rotate(90deg); }
.drawer nav { position: relative; }
.drawer ul { list-style: none; }
.drawer__nav > li > a, .drawer__nav summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: .68rem .25rem; border-bottom: 1px solid rgba(255, 246, 220, .08);
  color: #fff6dc; font-family: var(--ff-head); font-size: 1.3rem; font-weight: 600; line-height: 1.2; text-decoration: none;
  transition: color .2s, padding-left .25s var(--ease);
}
.drawer__nav > li > a .icon, .drawer__nav summary .icon { width: 1.05rem; height: 1.05rem; color: rgba(255, 246, 220, .35); transition: transform .25s var(--ease), color .2s; }
.drawer__nav > li > a:hover, .drawer__nav > li > a:active { padding-left: .5rem; color: #fff; }
.drawer__nav > li > a:hover .icon, .drawer__nav > li > a:active .icon { transform: translateX(4px); color: var(--marigold); }
.drawer__nav > li > a[aria-current="page"] { color: #f0c24a; }
.drawer__nav > li > a[aria-current="page"]::before { content: ""; flex: none; width: 6px; height: 6px; margin-right: .6rem; border-radius: 50%; background: var(--g-primary); box-shadow: 0 0 0 4px rgba(232, 117, 26, .18); }
.drawer__nav > li > a[aria-current="page"] .icon { margin-left: auto; color: var(--marigold); }
.drawer__nav summary { cursor: pointer; list-style: none; }
.drawer__nav summary::-webkit-details-marker { display: none; }
.drawer__nav details[open] > summary { color: #f0c24a; border-bottom-color: transparent; }
.drawer__nav details[open] > summary .icon { transform: rotate(180deg); color: var(--marigold); }
.drawer__nav details > ul { padding: .15rem 0 .9rem; border-bottom: 1px solid rgba(255, 246, 220, .08); }
.drawer__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.drawer__tiles a {
  display: grid; gap: .1rem; height: 100%; padding: .8rem; border: 1px solid rgba(255, 246, 220, .12); border-radius: var(--r);
  background: linear-gradient(160deg, rgba(255, 246, 220, .09), rgba(255, 246, 220, .02));
  color: #fff6dc; text-decoration: none; transition: border-color .2s, transform .2s var(--ease);
}
.drawer__tiles a:hover, .drawer__tiles a:active, .drawer__tiles a[aria-current="page"] { border-color: rgba(212, 160, 23, .6); transform: translateY(-2px); }
.drawer__tiles b { font-family: var(--ff-head); font-size: .98rem; font-weight: 600; line-height: 1.25; }
.drawer__tiles small { font-size: .75rem; color: #d9b98e; }
.drawer__ico { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: .45rem; border-radius: 11px; background: var(--g-primary); color: #fff; box-shadow: 0 8px 18px -8px rgba(232, 117, 26, .7); }
.drawer__ico--leaf { background: var(--g-leaf); box-shadow: 0 8px 18px -8px rgba(45, 106, 79, .8); }
.drawer__ico .icon { width: 20px; height: 20px; }
.drawer__sub { display: grid; gap: .15rem; }
.drawer__sub a { display: block; padding: .6rem .9rem; border-radius: var(--r-sm); color: #f3e3c6; font-size: 1.05rem; font-weight: 600; text-decoration: none; }
.drawer__sub a:hover, .drawer__sub a:active { background: rgba(255, 246, 220, .08); color: #fff; }
.drawer__sub a[aria-current="page"] { background: rgba(255, 246, 220, .08); color: #f0c24a; }
@media (prefers-reduced-motion: no-preference) { .drawer__nav details[open] > ul { animation: drawer-item .3s var(--ease) both; } }
.drawer__foot { position: relative; display: grid; gap: .9rem; margin-top: auto; padding-top: .5rem; }
.drawer__actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.drawer__actions a { display: grid; justify-items: center; gap: .35rem; padding: .7rem .2rem; border: 1px solid rgba(255, 246, 220, .12); border-radius: 14px; background: rgba(255, 246, 220, .05); color: #f3e3c6; font-size: .6875rem; font-weight: 600; letter-spacing: .04em; text-decoration: none; transition: background .2s, border-color .2s; }
.drawer__actions a:hover, .drawer__actions a:active { background: rgba(255, 246, 220, .12); border-color: rgba(212, 160, 23, .5); }
.drawer__actions .icon { width: 20px; height: 20px; color: #f0c24a; }
.drawer__addr { margin: 0; text-align: center; font-size: .75rem; color: #d9b98e; }
.drawer :focus-visible { outline: 2px solid #f0c24a; outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .drawer[open] { animation: drawer-in .38s var(--ease); }
  .drawer[open] .drawer__nav > li, .drawer[open] .drawer__foot { animation: drawer-item .45s var(--ease) both; }
  .drawer[open] .drawer__nav > li:nth-child(2) { animation-delay: .04s; }
  .drawer[open] .drawer__nav > li:nth-child(3) { animation-delay: .08s; }
  .drawer[open] .drawer__nav > li:nth-child(4) { animation-delay: .12s; }
  .drawer[open] .drawer__nav > li:nth-child(5) { animation-delay: .16s; }
  .drawer[open] .drawer__nav > li:nth-child(6) { animation-delay: .2s; }
  .drawer[open] .drawer__nav > li:nth-child(7) { animation-delay: .24s; }
  .drawer[open] .drawer__nav > li:nth-child(8) { animation-delay: .28s; }
  .drawer[open] .drawer__foot { animation-delay: .32s; }
}
@keyframes drawer-in { from { transform: translateX(100%); } }
@keyframes drawer-item { from { opacity: 0; transform: translateX(18px); } }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--g-dawn); }
.hero .container { display: grid; gap: 2.5rem; align-items: center; padding-block: clamp(3rem, 2rem + 5vw, 6.5rem); }
@media (min-width: 992px) { .hero .container { grid-template-columns: 1.15fr .85fr; } }
.hero__pill {
  display: inline-flex; align-items: center; gap: .55rem; width: fit-content;
  padding: .4rem .9rem; margin-bottom: 1.25rem;
  border: 1px solid rgba(184, 50, 42, .22); border-radius: 999px; background: rgba(255, 255, 255, .7);
  color: var(--vermilion); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.hero__pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--saffron); box-shadow: 0 0 0 4px rgba(232, 117, 26, .2); }
.hero h1 { font-size: var(--fs-display); letter-spacing: -.02em; margin-bottom: .35em; }
.hero__odia { display: block; margin-top: .6rem; font-family: var(--ff-body); font-size: clamp(1rem, .9rem + .5vw, 1.35rem); font-weight: 600; letter-spacing: .08em; color: var(--vermilion); }
.hero__lead { max-width: 560px; font-size: var(--fs-lead); color: var(--body); margin-bottom: 1.75rem; }
.trust-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.75rem; list-style: none; }
.trust-row li {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .8rem; border-radius: 999px; background: rgba(255, 255, 255, .75); border: 1px solid var(--line);
  font-size: var(--fs-xs); font-weight: 700; color: var(--ink);
}
.trust-row .icon { width: 1rem; height: 1rem; color: var(--leaf); stroke-width: 2.4; }
.hero__visual { position: relative; display: grid; gap: 1rem; justify-items: center; }
.wheel { width: min(78%, 340px); aspect-ratio: 1; }
@media (prefers-reduced-motion: no-preference) { .wheel--spin { animation: spin 60s linear infinite; will-change: transform; } }
@keyframes spin { to { transform: rotate(360deg); } }
.hero__halo { position: absolute; inset: 0; margin: auto; width: min(100%, 460px); aspect-ratio: 1; border-radius: 50%; border: 1px dashed rgba(122, 30, 30, .15); pointer-events: none; }
.hero__cats { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; width: 100%; max-width: 420px; }
.hero-cat {
  display: grid; gap: .15rem; padding: 1rem; border-radius: var(--r);
  background: rgba(255, 255, 255, .8); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  text-decoration: none; transition: transform .2s var(--ease), box-shadow .2s;
}
.hero-cat:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.hero-cat strong { font-family: var(--ff-head); font-size: 1.05rem; color: var(--ink); }
.hero-cat span { font-size: var(--fs-xs); color: var(--muted); }
.hero-cat .icon { width: 1.6rem; height: 1.6rem; margin-bottom: .35rem; color: var(--saffron-deep); }
.hero-cat--leaf .icon { color: var(--leaf); }
@media (max-width: 991.98px) {
  .hero__visual { order: -1; }
  .wheel { width: 132px; }
  .hero__halo, .hero__cats { display: none; }
}

/* Inner-page hero */
.page-hero { position: relative; overflow: hidden; background: var(--g-dawn); padding-block: clamp(2.75rem, 2rem + 4vw, 5rem); text-align: center; }
.page-hero h1 { margin-bottom: .3em; }
.page-hero p { max-width: 680px; margin-inline: auto; color: var(--muted); font-size: var(--fs-lead); }
.crumbs { display: flex; justify-content: center; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; list-style: none; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: .4rem; opacity: .5; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--maroon); }
.page-hero .wheel-bg { position: absolute; right: -60px; top: -60px; width: 260px; opacity: .08; pointer-events: none; }

/* ---------- Cards ---------- */
.card {
  position: relative; display: flex; flex-direction: column; gap: .75rem;
  padding: clamp(1.4rem, 1.1rem + 1vw, 2rem);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: #e2c9a8; }
.card h3 { margin: 0; }
.card p { color: var(--muted); }
.card__icon {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px;
  background: linear-gradient(150deg, #fff4d6, #fbe2a8); color: var(--vermilion);
}
.card__icon .icon { width: 28px; height: 28px; }
.card__icon--leaf { background: linear-gradient(135deg, #e6f2ea, #cfe6d8); color: var(--leaf); }
.card__icon--maroon { background: linear-gradient(135deg, #fbe3df, #f5cdc6); color: var(--maroon); }
.card__icon img { width: 30px; height: 30px; object-fit: contain; }
.ticks { display: grid; gap: .45rem; list-style: none; margin-top: auto; padding-top: .75rem; border-top: 1px dashed var(--line); }
.ticks li { display: flex; align-items: center; gap: .55rem; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.ticks .icon { width: 1.05rem; height: 1.05rem; color: var(--leaf); stroke-width: 2.4; }

/* Category feature cards (home) */
.cat {
  display: grid; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
}
.cat__head { position: relative; padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem); color: #fff; background: var(--g-primary); overflow: hidden; }
.cat--leaf .cat__head { background: var(--g-leaf); }
.cat__head h3 { color: #fff; font-size: clamp(1.4rem, 1.2rem + .8vw, 1.85rem); margin-bottom: .2rem; }
.cat__head p { color: rgba(255, 255, 255, .85); font-size: var(--fs-sm); }
.cat__head .icon { width: 2.25rem; height: 2.25rem; margin-bottom: .75rem; color: #ffe3b8; }
.cat__head::after { content: ""; position: absolute; right: -40px; bottom: -60px; width: 180px; height: 180px; border-radius: 50%; border: 22px solid rgba(255, 255, 255, .08); }
.cat__body { display: flex; flex-direction: column; gap: 1.1rem; padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem); }
.cat__body p { color: var(--muted); }
.pills { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; }
.pills li { padding: .35rem .8rem; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line); font-size: var(--fs-xs); font-weight: 600; color: var(--ink); }
.link-arrow { display: inline-flex; align-items: center; gap: .4rem; margin-top: auto; font-weight: 700; color: var(--saffron-deep); text-decoration: none; }
.link-arrow:hover { gap: .65rem; color: var(--maroon); }
.cat--leaf .link-arrow { color: var(--leaf); }

/* About panel (dark) */
.panel-dark {
  position: relative; overflow: hidden; padding: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
  border-radius: var(--r-lg); background: var(--g-temple); color: #f3e3cf; box-shadow: var(--shadow-lg);
}
.panel-dark .odia { font-size: var(--fs-sm); color: var(--marigold); letter-spacing: .12em; }
.panel-dark .wordmark { font-family: var(--ff-head); font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); font-weight: 700; color: #fff; letter-spacing: .06em; margin: .2rem 0 .1rem; }
.panel-dark .tag { font-size: var(--fs-xs); letter-spacing: .16em; text-transform: uppercase; color: #d9b98e; margin-bottom: 1.5rem; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.stat { padding: 1rem; border-radius: var(--r); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); }
.stat b { display: block; font-family: var(--ff-head); font-size: clamp(1.35rem, 1.2rem + .6vw, 1.75rem); color: #fff; line-height: 1.1; }
.stat span { font-size: var(--fs-xs); color: #d9b98e; letter-spacing: .06em; }
.panel-dark .wheel-bg { position: absolute; right: -70px; bottom: -70px; width: 240px; opacity: .1; }

/* Process steps */
.steps { counter-reset: step; }
/* Number + icon share the top row; title and text span below with tighter side padding */
.step { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; align-content: start; gap: .6rem .75rem; padding: 1.4rem 1.1rem; }
.step > h3, .step > p { grid-column: 1 / -1; }
.step > h3 { margin-top: .35rem; font-size: clamp(1.1rem, 1.05rem + .25vw, 1.25rem); }
.step > p { font-size: var(--fs-sm); line-height: 1.6; }
.step .card__icon { width: 48px; height: 48px; border-radius: 14px; }
.step .card__icon .icon { width: 24px; height: 24px; }
.step__num { font-family: var(--ff-head); font-size: 2.25rem; font-weight: 700; line-height: 1; background: var(--g-gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (min-width: 1100px) {
  .steps { grid-template-columns: repeat(5, 1fr); }
  .step:not(:last-child)::after {
    content: ""; position: absolute; top: 46px; right: -22px; width: 26px; height: 2px;
    background: repeating-linear-gradient(90deg, var(--saffron) 0 4px, transparent 4px 8px); z-index: 1;
  }
}

/* Certification cards */
.cert { align-items: flex-start; }
.cert__badge { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 20px; background: var(--bg-2); border: 1px solid var(--line); }
.cert__badge img { width: 60px; height: 60px; object-fit: contain; }
.status { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .7rem; border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; }
.status--ok { background: #e3f1e8; color: var(--leaf-deep); }
.status--soon { background: #fff1d6; color: #8a5a00; }
.status .icon { width: 14px; height: 14px; }
/* Home "Shop online": marketplace tiles in an integrations-grid style */
.shop-on__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.75rem, .5rem + 1vw, 1.25rem); list-style: none; }
.shop-tile {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; height: 100%; padding: 1.25rem;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); color: var(--ink); text-decoration: none; overflow: hidden;
  box-shadow: var(--shadow-sm); transition: transform .25s var(--ease), box-shadow .25s, border-color .25s;
}
.shop-tile::before { content: ""; position: absolute; inset: 0 0 auto; height: 70px; background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 12%, transparent), transparent); pointer-events: none; }
.shop-tile:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); box-shadow: 0 22px 44px -24px color-mix(in srgb, var(--brand) 60%, transparent); }
.shop-tile__logo { position: relative; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 10px 22px -14px color-mix(in srgb, var(--brand) 80%, transparent); }
.shop-tile__logo img { width: 44px; height: 44px; border-radius: 12px; }
.shop-tile__name { display: grid; gap: .15rem; font-family: var(--ff-head); font-size: 1.3rem; font-weight: 700; line-height: 1.15; }
.shop-tile__name small { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--ff-body); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; color: var(--leaf-deep); }
.shop-tile__name small i { width: 7px; height: 7px; border-radius: 50%; background: #2fbf71; box-shadow: 0 0 0 3px rgba(47, 191, 113, .2); }
.shop-tile__cta { display: inline-flex; align-items: center; gap: .4rem; margin-top: auto; padding: .55rem 1rem; border-radius: 999px; background: var(--cta, var(--brand)); color: var(--cta-ink, #fff); font-size: var(--fs-sm); font-weight: 700; transition: gap .2s var(--ease); }
.shop-tile__cta .icon { width: 16px; height: 16px; }
.shop-tile:hover .shop-tile__cta { gap: .65rem; }
.shop-on__wa { display: flex; align-items: center; gap: .9rem; margin-top: clamp(1.25rem, 1rem + 1vw, 1.75rem); padding: .85rem .9rem .85rem 1rem; border: 1px dashed rgba(37, 211, 102, .55); border-radius: 999px; background: color-mix(in srgb, #25d366 6%, var(--surface)); }
.shop-on__wa-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(150deg, #25d366, #128c7e); color: #fff; }
.shop-on__wa-icon .icon { width: 22px; height: 22px; }
.shop-on__wa p { flex: 1; margin: 0; font-size: var(--fs-sm); color: var(--body); }
.shop-on__wa b { color: var(--ink); }
.shop-on__wa .btn { flex: none; }
@media (max-width: 899.98px) { .shop-on__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599.98px) {
  .shop-tile { gap: .6rem; padding: .9rem; border-radius: var(--r); }
  .shop-tile::before { height: 54px; }
  .shop-tile__logo { width: 48px; height: 48px; border-radius: 14px; }
  .shop-tile__logo img { width: 36px; height: 36px; border-radius: 10px; }
  .shop-tile__name { font-size: 1.08rem; }
  .shop-tile__cta { width: 100%; justify-content: center; padding: .5rem .6rem; font-size: var(--fs-xs); }
  .shop-tile__cta .icon { display: none; }
  .shop-on__wa { flex-wrap: wrap; border-radius: var(--r); }
  .shop-on__wa p { flex-basis: calc(100% - 56px); }
  .shop-on__wa .btn { width: 100%; justify-content: center; }
}

/* Business Partners: dark hero with the four marketplace icons orbiting the Konark wheel,
   featured cards for live listings, notify-me rows for the ones coming */
.mp-hero { position: relative; overflow: hidden; background: var(--g-dark); color: #f3e3c6; }
.mp-hero::after { content: ""; position: absolute; inset: auto -10% -40% 40%; height: 80%; background: radial-gradient(closest-side, rgba(232, 117, 26, .22), transparent); pointer-events: none; }
.mp-hero .container { position: relative; z-index: 1; display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem); align-items: center; padding-block: clamp(2.5rem, 1.6rem + 4vw, 5.5rem); }
@media (min-width: 992px) { .mp-hero .container { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.mp-hero .crumbs { justify-content: flex-start; }
.mp-hero .crumbs a, .mp-hero .crumbs li { color: #d9b98e; }
.mp-hero h1 { margin: .9rem 0 .5rem; color: #fff6dc; font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.6rem); letter-spacing: -.02em; }
.mp-hero p { max-width: 560px; color: #ead8bb; font-size: var(--fs-lead); }
.mp-hero .btn-row { margin-top: 1.75rem; }
.mp-hero__pill { display: inline-flex; align-items: center; gap: .55rem; padding: .4rem .85rem; border: 1px solid rgba(255, 246, 220, .18); border-radius: 999px; background: rgba(255, 246, 220, .06); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; color: #f0c24a; }
.mp-hero__pill i { width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 4px rgba(61, 220, 132, .2); }
.mp-orbit { position: relative; width: min(100%, 420px); aspect-ratio: 1; margin-inline: auto; }
.mp-orbit__ring { position: absolute; inset: 6%; border: 1px dashed rgba(240, 194, 74, .35); border-radius: 50%; }
.mp-orbit__ring--in { inset: 27%; border-style: solid; border-color: rgba(240, 194, 74, .14); background: radial-gradient(closest-side, rgba(240, 194, 74, .12), transparent); }
.mp-orbit__wheel { position: absolute; inset: 33%; width: 34%; height: 34%; opacity: .95; filter: drop-shadow(0 10px 30px rgba(232, 117, 26, .35)); }
.mp-orbit__icon { position: absolute; width: 22%; height: 22%; border-radius: 26%; background: #fff; box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .7), 0 0 0 4px rgba(255, 246, 220, .08); }
.mp-orbit__icon--0 { top: -5%; left: 39%; }
.mp-orbit__icon--1 { top: 39%; right: -5%; }
.mp-orbit__icon--2 { bottom: -5%; left: 39%; }
.mp-orbit__icon--3 { top: 39%; left: -5%; }
@media (prefers-reduced-motion: no-preference) {
  .mp-orbit__wheel { animation: spin 60s linear infinite; }
  .mp-orbit__icon { animation: mp-float 6s var(--ease) infinite alternate; }
  .mp-orbit__icon--1 { animation-delay: -1.5s; } .mp-orbit__icon--2 { animation-delay: -3s; } .mp-orbit__icon--3 { animation-delay: -4.5s; }
}
@keyframes mp-float { to { transform: translateY(-8px); } }
@media (max-width: 991.98px) { .mp-orbit { width: min(66%, 260px); } }

.mp-section .section-head p { max-width: 560px; margin-inline: auto; }
.mp-live { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(1rem, .7rem + 1vw, 1.4rem); }
@media (min-width: 1100px) { .mp-live { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mp-card {
  position: relative; display: flex; flex-direction: column; gap: 1.1rem; padding: 1.25rem; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: linear-gradient(160deg, color-mix(in srgb, var(--brand) 9%, #fff) 0%, #fff 45%); color: var(--ink); text-decoration: none;
  box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s, border-color .3s;
}
.mp-card:hover { transform: translateY(-5px); box-shadow: 0 26px 50px -24px color-mix(in srgb, var(--brand) 55%, transparent); border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); }
.mp-card__head { display: flex; align-items: center; gap: .85rem; }
.mp-card__head img { width: 56px; height: 56px; border-radius: 16px; box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--brand) 80%, transparent); }
.mp-card__head span { display: grid; gap: .15rem; }
.mp-card__head b { font-family: var(--ff-head); font-size: 1.45rem; line-height: 1.1; color: var(--brand); }
.mp-card__head small { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; color: var(--leaf-deep); }
.mp-card__head small i { width: 7px; height: 7px; border-radius: 50%; background: #2fbf71; box-shadow: 0 0 0 3px rgba(47, 191, 113, .2); }
.mp-card__product { display: flex; align-items: center; gap: .9rem; padding: .7rem; border: 1px solid var(--line); border-radius: var(--r); background: rgba(255, 255, 255, .8); }
.mp-card__product img { flex: none; width: 76px; height: 76px; border-radius: 12px; object-fit: cover; }
.mp-card__product span { display: grid; gap: .1rem; min-width: 0; }
.mp-card__product small { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; }
.mp-card__product b { font-size: 1.02rem; line-height: 1.3; }
.mp-card__product em { font-style: normal; font-size: var(--fs-xs); color: var(--muted); }
.mp-card__cta { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: auto; padding: .85rem 1rem; border-radius: 999px; background: var(--cta, var(--brand)); color: var(--cta-ink, #fff); font-weight: 700; box-shadow: 0 12px 24px -14px var(--cta, var(--brand)); transition: gap .25s var(--ease), filter .2s; }
.mp-card__cta--notify { background: transparent; color: #128c4a; box-shadow: inset 0 0 0 1.5px #25d366; }
.mp-card--soon { background: var(--surface); border-style: dashed; }
.mp-card--soon .mp-card__head small { color: #8a5a00; } .mp-card--soon .mp-card__head small i { background: #f0a500; box-shadow: 0 0 0 3px rgba(240, 165, 0, .2); }
.mp-card--soon .mp-card__product { opacity: .75; }
.mp-card--soon:hover .mp-card__cta--notify { background: #25d366; color: #fff; }
.mp-card__cta .icon { width: 18px; height: 18px; }
.mp-card:hover .mp-card__cta { gap: .8rem; filter: brightness(1.06); }

.mp-perks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 1px; margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--line); list-style: none; }
.mp-perks li { display: grid; grid-template-columns: auto 1fr; column-gap: .8rem; align-items: center; padding: 1.1rem 1.2rem; background: var(--bg-2); }
.mp-perks li > span { grid-row: span 2; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #fff; color: var(--saffron-deep); box-shadow: var(--shadow-sm); }
.mp-perks .icon { width: 20px; height: 20px; }
.mp-perks b { font-size: var(--fs-sm); color: var(--ink); }
.mp-perks small { font-size: var(--fs-xs); color: var(--muted); }
@media (max-width: 639.98px) {
  .mp-hero .btn-row .btn { flex: 1 1 auto; justify-content: center; }
}
.status--wait { background: #fdf0d9; color: #8a4b0a; }

/* Marquee ribbon */
.ribbon { overflow: hidden; background: var(--g-primary); color: #fff; padding-block: .9rem; }
.ribbon__track { display: flex; gap: 2.5rem; width: max-content; font-family: var(--ff-head); font-size: clamp(1.1rem, 1rem + .6vw, 1.5rem); font-weight: 600; white-space: nowrap; }
.ribbon__track span { display: inline-flex; align-items: center; gap: 2.5rem; }
.ribbon__track span::after { content: "✦"; color: var(--marigold); font-size: .8em; }
@media (prefers-reduced-motion: no-preference) { .ribbon__track { animation: marquee 32s linear infinite; } }
@keyframes marquee { to { transform: translateX(-50%); } }

/* CTA band */
.cta {
  position: relative; overflow: hidden; display: grid; gap: 1.5rem; align-items: center;
  padding: clamp(2rem, 1.4rem + 3vw, 3.75rem);
  border-radius: var(--r-lg); background: var(--g-temple); color: #f3e3cf; box-shadow: var(--shadow-lg);
}
@media (min-width: 900px) { .cta { grid-template-columns: 1fr auto; } }
.cta h2 { color: #fff; margin-bottom: .35em; }
.cta p { color: #ead6bd; max-width: 620px; }
.cta .eyebrow { color: var(--marigold); }
.cta .wheel-bg { position: absolute; right: -90px; top: -90px; width: 320px; opacity: .09; pointer-events: none; }

/* ---------- Mobile carousels ----------
   Any .rail becomes a swipeable scroll-snap row under 768px (grid above).
   Dots are added by site.js for rails with [data-dots]. */
@media (max-width: 767.98px) {
  .rail {
    display: flex !important; gap: .9rem;
    margin-inline: calc(-1 * var(--gutter)); padding: .5rem var(--gutter) 1.25rem;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter); scrollbar-width: none;
  }
  .rail::-webkit-scrollbar { display: none; }
  .rail > * { flex: 0 0 84%; scroll-snap-align: start; }
  .rail--sm > * { flex-basis: 70%; }
  .rail > .card:hover { transform: none; }
}
.dots { display: none; justify-content: center; gap: 0; margin-top: .25rem; }
@media (max-width: 767.98px) { .dots { display: flex; } }
.dots button { position: relative; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; background: none; }
.dots button::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: #dcc6a8; transition: width .25s var(--ease), background-color .25s; }
.dots button[aria-current="true"] { width: 34px; }
.dots button[aria-current="true"]::before { width: 26px; background: var(--saffron-deep); }

/* ---------- Forms ---------- */
.form-card { padding: clamp(1.5rem, 1.1rem + 2vw, 2.75rem); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.form-grid { display: grid; gap: 1.1rem; }
@media (min-width: 640px) { .form-grid { grid-template-columns: 1fr 1fr; } .form-grid .full { grid-column: 1 / -1; } }
.field { display: grid; gap: .4rem; }
.field label { font-size: var(--fs-sm); font-weight: 700; color: var(--ink); }
.field label .req { color: var(--vermilion); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 50px; padding: .8rem 1rem;
  border: 1.5px solid var(--line); border-radius: var(--r-sm); background: #fffdf9;
  font-size: 1rem; color: var(--ink);
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.field textarea { min-height: 120px; resize: vertical; }
.field select { appearance: none; padding-right: 2.5rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a1e1e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .9rem center; background-size: 18px; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #dcc3a2; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--saffron); background: #fff; box-shadow: 0 0 0 4px rgba(232, 117, 26, .15); }
.field input::placeholder, .field textarea::placeholder { color: #9a8573; }
.check { display: flex; align-items: flex-start; gap: .6rem; font-size: var(--fs-sm); }
.check input { width: 20px; height: 20px; margin-top: .15rem; flex: none; accent-color: var(--saffron-deep); }
.alert { padding: 1rem 1.2rem; margin-bottom: 1.25rem; border-radius: var(--r-sm); font-weight: 600; font-size: var(--fs-sm); }
.alert--error { background: #fdecea; color: #8c1d18; border: 1px solid #f5c2bd; }
.alert--ok { background: #e6f4ea; color: #14532d; border: 1px solid #b7dfc3; }

/* Contact info tiles */
.info-tile { display: flex; gap: 1rem; align-items: flex-start; }
/* Partner page: form + a pitch column that sits on the left and stays in view on desktop */
.partner { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 3rem); align-items: start; }
.partner__aside { display: grid; gap: 1.1rem; }
.partner .info-tile { flex-direction: row; align-items: center; }
.next-steps { counter-reset: n; display: grid; gap: 1rem; list-style: none; margin-top: 1rem; }
.next-steps li { counter-increment: n; display: grid; grid-template-columns: 2.25rem 1fr; column-gap: .9rem; align-items: start; }
.next-steps li::before { content: counter(n); grid-row: span 2; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--g-primary); color: #fff; font-weight: 700; font-size: var(--fs-sm); }
.next-steps b { color: var(--ink); }
.next-steps span { font-size: var(--fs-sm); color: var(--muted); }
@media (min-width: 992px) {
  .partner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .partner__aside { order: -1; position: sticky; top: calc(var(--header-h) + 24px); }
  .partner .field textarea { min-height: 96px; }
}
.info-tile .card__icon { width: 48px; height: 48px; border-radius: 14px; flex: none; }
.info-tile .card__icon .icon { width: 22px; height: 22px; }
.info-tile small { display: block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: .2rem; }
.info-tile a { color: var(--ink); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.info-tile a:hover { color: var(--maroon); }
.map { overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--line); box-shadow: var(--shadow-sm); min-height: 360px; height: 100%; background: var(--bg-2); }
.map { position: relative; }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 360px; border: 0; }
.map__facade { display: grid; place-content: center; justify-items: center; gap: .4rem; height: 100%; min-height: 360px; padding: 1.5rem; text-align: center; text-decoration: none; color: var(--ink);
  background: radial-gradient(circle at 50% 40%, #fff 0, rgba(255,255,255,0) 60%), repeating-linear-gradient(45deg, #f6ebdc 0 14px, #f1e3d0 14px 28px); }
.map__facade .icon { width: 42px; height: 42px; color: var(--vermilion); }
.map__facade span:not(.btn) { color: var(--muted); font-size: var(--fs-sm); max-width: 28ch; }
.map__facade .btn { margin-top: .5rem; }

/* ---------- FAQ (native details) ---------- */
.faq { display: grid; gap: .75rem; }
.cat-guide h2 { margin-bottom: .75rem; }
.cat-guide__lead { font-size: var(--fs-lead, 1.1rem); color: var(--ink); }
.cat-guide__items { display: grid; gap: .6rem; margin: 1.5rem 0 2rem; padding: 0; list-style: none; }
.cat-guide__items li { display: grid; gap: .2rem; padding: .9rem 1.1rem; border: 1px solid var(--line); border-left: 4px solid var(--saffron); border-radius: var(--r); background: var(--surface); }
.cat-guide__items b { color: var(--ink); }
.cat-guide h3 { margin: 0 0 1rem; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); transition: box-shadow .2s, border-color .2s; }
.faq details[open] { border-color: #e2c9a8; box-shadow: var(--shadow-sm); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.25rem; cursor: pointer; list-style: none;
  font-family: var(--ff-head); font-size: clamp(1.05rem, 1rem + .25vw, 1.2rem); font-weight: 600; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--bg-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c2410c' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 16px no-repeat;
  transition: transform .25s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 1.25rem 1.25rem; color: var(--muted); }

/* ---------- Prose (legal pages, blog body, product description) ---------- */
.prose { color: var(--body); }
.prose h2 { font-size: clamp(1.4rem, 1.25rem + .7vw, 1.8rem); margin-top: 2.25rem; }
.prose h3 { margin-top: 2rem; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul, .prose ol { margin: 0 0 1.25em 1.25em; }
.prose li { margin-bottom: .45em; padding-left: .25em; }
.prose ul li::marker { color: var(--saffron); }
.prose img { border-radius: var(--r); margin-block: 1.5rem; }
.prose table { width: 100%; border-collapse: collapse; margin-block: 1.5rem; font-size: var(--fs-sm); }
.prose th, .prose td { border: 1px solid var(--line); padding: .6rem .8rem; text-align: left; }
.prose blockquote { margin: 1.5rem 0; padding: 1rem 1.25rem; border-left: 4px solid var(--saffron); background: var(--bg-2); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.meta-line { display: flex; flex-wrap: wrap; gap: .5rem 1rem; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.meta-line .tag { color: var(--saffron-deep); text-decoration: none; }

/* Sitemap link groups */
.link-groups { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.link-groups ul { list-style: none; display: grid; gap: .35rem; }
.link-groups a { display: inline-flex; align-items: center; gap: .4rem; color: var(--body); text-decoration: none; font-weight: 600; }
.link-groups a:hover { color: var(--maroon); }
.link-groups .icon { width: 1rem; height: 1rem; color: var(--saffron); }

/* ---------- Products ---------- */
.shop { display: grid; gap: 2rem; }
@media (min-width: 992px) { .shop { grid-template-columns: 260px 1fr; align-items: start; } .shop__side { position: sticky; top: calc(var(--header-h) + 20px); } }
.filter { padding: 1.25rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.filter + .filter { margin-top: 1rem; }
.filter h2 { font-size: 1.05rem; margin-bottom: .75rem; }
.chips { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; }
.chips a {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 38px; padding: .4rem .9rem;
  border-radius: 999px; border: 1px solid var(--line); background: #fffdf9;
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink); text-decoration: none;
}
.chips a span { font-size: var(--fs-xs); color: var(--muted); }
.chips a:hover { border-color: var(--saffron); }
.chips a[aria-current="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.chips a[aria-current="true"] span { color: #e6cfb2; }
@media (max-width: 991.98px) {
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -1.25rem; padding-inline: 1.25rem; }
  .chips li { flex: none; }
}
.range { position: relative; height: 28px; }
.range input[type="range"] { position: absolute; inset: 0; width: 100%; margin: 0; background: none; pointer-events: none; appearance: none; -webkit-appearance: none; }
.range input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: var(--line); border-radius: 4px; }
.range input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 22px; height: 22px; margin-top: -9px; border-radius: 50%; background: #fff; border: 3px solid var(--saffron-deep); box-shadow: var(--shadow-sm); cursor: grab; }
.range input[type="range"]::-moz-range-thumb { pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--saffron-deep); cursor: grab; }
.range-out { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-top: .75rem; font-weight: 700; color: var(--ink); font-size: var(--fs-sm); }
.products { display: grid; gap: clamp(.75rem, .5rem + 1vw, 1.5rem); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .products { grid-template-columns: repeat(3, 1fr); } }
.product {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.product:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.product__img { aspect-ratio: 1; background: var(--bg-2); overflow: hidden; }
.product__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.product__img img.is-logo { object-fit: contain; padding: 18%; }
.product__img[data-cycle] { position: relative; }
.product__img img.is-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .9s var(--ease), transform .5s var(--ease); }
.product__img img.is-slide.is-on { opacity: 1; }
.product__dots { position: absolute; left: 50%; bottom: .6rem; z-index: 1; display: flex; gap: .3rem; padding: .3rem .45rem; border-radius: 999px; background: rgba(26, 10, 2, .35); transform: translateX(-50%); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.product__dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .55); transition: width .3s var(--ease), background .3s; }
.product__dots i.is-on { width: 16px; border-radius: 999px; background: #fff; }
.product:hover .product__img img { transform: scale(1.04); }
.product__body { display: flex; flex-direction: column; gap: .35rem; padding: clamp(.8rem, .6rem + .6vw, 1.15rem); flex: 1; }
.product h3 { font-family: var(--ff-body); font-size: clamp(.9375rem, .9rem + .2vw, 1.05rem); font-weight: 700; line-height: 1.35; margin: 0; }
.product h3 a { color: var(--ink); text-decoration: none; }
.product h3 a::after { content: ""; position: absolute; inset: 0; } /* whole card clickable */
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .5rem; margin-top: auto; font-weight: 800; color: var(--maroon); font-size: clamp(1rem, .95rem + .3vw, 1.15rem); }
.price s { font-size: .82em; font-weight: 500; color: var(--muted); }
.price--ask { font-size: var(--fs-sm); color: var(--saffron-deep); }
.oos { position: absolute; top: .75rem; left: .75rem; z-index: 1; padding: .25rem .6rem; border-radius: 999px; background: #fff; color: var(--vermilion); font-size: var(--fs-xs); font-weight: 700; box-shadow: var(--shadow-sm); }
.pager { display: flex; justify-content: center; flex-wrap: wrap; gap: .4rem; margin-top: 2.5rem; list-style: none; }
.pager a, .pager span {
  display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 .8rem;
  border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
  font-weight: 700; color: var(--ink); text-decoration: none;
}
.pager a:hover { border-color: var(--saffron); color: var(--maroon); }
.pager [aria-current="page"] { background: var(--g-primary); color: #fff; border-color: transparent; }
.pager .is-disabled { opacity: .4; }
.pager .icon { width: 1.1rem; height: 1.1rem; }
.empty { padding: 3rem 1.5rem; text-align: center; border: 1.5px dashed var(--line); border-radius: var(--r-lg); color: var(--muted); }

/* Product detail */
.pd { display: grid; gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); align-items: start; }
@media (min-width: 992px) { .pd { grid-template-columns: minmax(0, 480px) minmax(0, 1fr); } .pd__gallery { position: sticky; top: calc(var(--header-h) + 20px); } }
.section--pd { padding-top: clamp(1rem, .6rem + 1.6vw, 2rem); }
.section--pd .crumbs { margin-bottom: clamp(.75rem, .5rem + 1vw, 1.25rem); }
.pd__stage { position: relative; }
.pd__main { aspect-ratio: 1; overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--bg-2); box-shadow: var(--shadow-sm); }
.pd__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; outline: none; }
.pd__track::-webkit-scrollbar { display: none; }
.pd__track:focus-visible { box-shadow: 0 0 0 3px var(--saffron); }
.pd__slide { flex: 0 0 100%; margin: 0; overflow: hidden; scroll-snap-align: start; scroll-snap-stop: always; cursor: zoom-in; }
.pd__slide img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--ease); }
.pd__slide img.is-logo { object-fit: contain; padding: 18%; }
.pd__slide.is-zooming img { transform: scale(2.2); transition: transform .1s linear; }
.pd__nav, .pd__zoom {
  position: absolute; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(255, 253, 245, .9); color: var(--ink); box-shadow: 0 6px 18px -6px rgba(42, 20, 8, .45);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: transform .2s var(--ease), background .2s, opacity .25s;
}
.pd__nav { top: 50%; margin-top: -22px; }
.pd__nav--prev { left: .75rem; } .pd__nav--next { right: .75rem; }
.pd__nav .icon, .zoombox__nav .icon { width: 22px; height: 22px; }
.pd__nav--prev .icon, .zoombox__nav--prev .icon { transform: rotate(90deg); }
.pd__nav--next .icon, .zoombox__nav--next .icon { transform: rotate(-90deg); }
.pd__nav:hover, .pd__zoom:hover { background: #fff; transform: scale(1.06); }
.pd__zoom { right: .75rem; bottom: .75rem; width: 40px; height: 40px; }
.pd__zoom .icon { width: 19px; height: 19px; }
.pd__count { position: absolute; left: .75rem; bottom: .75rem; z-index: 2; padding: .3rem .65rem; border-radius: 999px; background: rgba(26, 10, 2, .62); color: #fff6dc; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pd__count b { color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .pd__nav { opacity: 0; }
  .pd__stage:hover .pd__nav, .pd__nav:focus-visible { opacity: 1; }
}
.pd__thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(.4rem, .3rem + .4vw, .65rem); margin-top: .8rem; list-style: none; }
.pd__thumbs button { display: block; width: 100%; aspect-ratio: 1; padding: 0; overflow: hidden; border-radius: var(--r-sm); border: 2px solid transparent; background: var(--bg-2); opacity: .62; transition: opacity .2s, border-color .2s, transform .2s var(--ease); box-shadow: 0 0 0 1px var(--line); }
.pd__thumbs button:hover { opacity: .9; }
.pd__thumbs button[aria-pressed="true"] { opacity: 1; border-color: var(--saffron-deep); box-shadow: 0 6px 16px -8px rgba(184, 50, 42, .6); }
.pd__thumbs img { width: 100%; height: 100%; object-fit: cover; }
/* Full-screen viewer: tap or click the image to zoom, move to look around */
/* "Order on WhatsApp" pincode check: a centred card on desktop, a bottom sheet on phones */
.pin-check { width: min(92vw, 440px); max-width: none; padding: 1.5rem; border: 0; border-radius: var(--r-lg); background: var(--surface); color: var(--body); box-shadow: 0 30px 80px -20px rgba(26, 10, 2, .55); }
.pin-check::backdrop { background: rgba(14, 6, 2, .6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.pin-check__close { position: absolute; top: .8rem; right: .8rem; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink); }
.pin-check__close .icon { width: 18px; height: 18px; }
.pin-check__head { display: flex; gap: .9rem; align-items: flex-start; padding-right: 2.5rem; margin-bottom: 1.25rem; }
.pin-check__badge { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(150deg, #25d366, #128c7e); color: #fff; box-shadow: 0 10px 22px -10px rgba(18, 140, 126, .8); }
.pin-check__badge .icon { width: 26px; height: 26px; }
.pin-check h2 { margin: 0 0 .2rem; font-size: 1.35rem; }
.pin-check__head p { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.pin-check__form label { display: block; margin-bottom: .4rem; font-size: var(--fs-sm); font-weight: 700; color: var(--ink); }
.pin-check__row { display: flex; gap: .5rem; }
.pin-check__row input { flex: 1; min-width: 0; padding: .8rem 1rem; border: 1.5px solid var(--line); border-radius: 999px; background: var(--bg); font-size: 1.1rem; font-weight: 700; letter-spacing: .12em; color: var(--ink); }
.pin-check__row input:focus { outline: none; border-color: var(--saffron); box-shadow: 0 0 0 4px rgba(232, 117, 26, .15); }
.pin-check__row .btn { flex: none; }
.pin-check__error { margin: .5rem 0 0; font-size: var(--fs-sm); color: var(--saffron-deep); }
.pin-check__result { display: grid; gap: .8rem; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px dashed var(--line); }
.pin-check__result[hidden] { display: none; }
.pin-check__status { display: flex; gap: .6rem; align-items: flex-start; margin: 0; font-size: var(--fs-sm); color: var(--ink); }
.pin-check__status .icon { flex: none; width: 22px; height: 22px; padding: 3px; border-radius: 50%; color: #fff; }
.pin-check__result--ok .pin-check__status .icon { background: #1f9d55; }
.pin-check__result--no .pin-check__status .icon { background: var(--saffron-deep); }
.pin-check__result small, .pin-check__sub { margin: 0; font-size: var(--fs-xs); color: var(--muted); }
.pin-check__markets { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.pin-check__markets .market { gap: .5rem; padding: .55rem .6rem; }
.pin-check__markets .market img { width: 32px; height: 32px; border-radius: 9px; }
.pin-check__markets .market b { font-size: .98rem; }
@media (max-width: 599.98px) {
  .pin-check { width: 100vw; margin: auto 0 0; border-radius: 22px 22px 0 0; padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: no-preference) { .pin-check[open] { animation: fade-in .25s var(--ease); } }
/* Order step: details, quantity, required location, then the saved order ref */
.pin-check { max-height: calc(100dvh - 2rem); overflow-y: auto; overscroll-behavior: contain; }
.pin-order { display: grid; gap: .85rem; }
.pin-order[hidden], .pin-done[hidden] { display: none; }
.pin-order__field label, .pin-order__qty > span { display: block; margin-bottom: .35rem; font-size: var(--fs-sm); font-weight: 700; color: var(--ink); }
.pin-order__field input, .pin-order__field textarea { width: 100%; padding: .75rem 1rem; border: 1.5px solid var(--line); border-radius: 14px; background: var(--bg); font: inherit; color: var(--ink); resize: vertical; }
.pin-order__field input:focus, .pin-order__field textarea:focus { outline: none; border-color: var(--saffron); box-shadow: 0 0 0 4px rgba(232, 117, 26, .15); }
.pin-order__err { display: block; margin-top: .3rem; font-size: var(--fs-xs); font-weight: 600; color: var(--saffron-deep); }
.pin-order__err[hidden] { display: none; }
.pin-order__field [aria-invalid="true"] { border-color: var(--saffron-deep); background: rgba(184, 50, 42, .04); }
.pin-order__qty { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.pin-order__qty > span { margin: 0; }
.qty { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: 999px; background: var(--bg); }
.qty button { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; font-size: 1.25rem; font-weight: 700; color: var(--ink); cursor: pointer; }
.qty button:hover { background: var(--surface); color: var(--saffron-deep); }
.qty output { min-width: 2ch; text-align: center; font-weight: 800; color: var(--ink); }
.pin-loc { display: flex; align-items: center; gap: .75rem; padding: .8rem; border: 1.5px dashed var(--line); border-radius: 16px; background: var(--bg); transition: border-color .2s, background .2s; }
.pin-loc__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(232, 117, 26, .12); color: var(--saffron-deep); }
.pin-loc__icon .icon { width: 20px; height: 20px; }
.pin-loc__text { flex: 1; min-width: 0; display: grid; gap: .1rem; }
.pin-loc__text b { font-size: var(--fs-sm); color: var(--ink); }
.pin-loc__text small { font-size: var(--fs-xs); color: var(--muted); }
.pin-loc .btn { flex: none; }
.pin-loc .btn[hidden] { display: none; }
.pin-loc[data-state="busy"] .pin-loc__icon { animation: pin-pulse 1s ease-in-out infinite alternate; }
.pin-loc[data-state="ok"] { border-style: solid; border-color: rgba(31, 157, 85, .5); background: rgba(31, 157, 85, .07); }
.pin-loc[data-state="ok"] .pin-loc__icon { background: #1f9d55; color: #fff; }
.pin-loc[data-state="denied"], .pin-loc[data-state="error"] { border-style: solid; border-color: rgba(190, 60, 30, .45); background: rgba(190, 60, 30, .06); }
@keyframes pin-pulse { to { transform: scale(.88); opacity: .6; } }
.pin-order .btn[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; }
.pin-order .btn.is-busy { opacity: .7; cursor: progress; }
.pin-order > small { margin: -.25rem 0 0; font-size: var(--fs-xs); color: var(--muted); text-align: center; }
.pin-done { display: grid; gap: .6rem; text-align: center; }
.pin-done p { margin: 0; font-size: var(--fs-sm); }
.pin-done__ref { padding: .7rem; border-radius: 14px; background: rgba(31, 157, 85, .08); color: var(--ink); }
.pin-done__ref b { font-size: 1.15rem; letter-spacing: .06em; }
.zoombox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(14, 6, 2, .94); color: #fff6dc; }
.zoombox::backdrop { background: rgba(14, 6, 2, .7); }
.zoombox[open] { display: grid; place-items: center; }
.zoombox__frame { width: min(92vw, 88dvh); aspect-ratio: 1; overflow: hidden; border-radius: var(--r); background: #fff; touch-action: none; cursor: zoom-in; }
.zoombox__frame img { width: 100%; height: 100%; object-fit: contain; transition: transform .3s var(--ease); user-select: none; }
.zoombox__frame.is-zoomed { cursor: zoom-out; }
.zoombox__frame.is-zoomed img { transform: scale(2.6); transition: transform .12s linear; }
.zoombox__close, .zoombox__nav { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(255, 246, 220, .25); border-radius: 50%; background: rgba(255, 246, 220, .1); color: #fff6dc; }
.zoombox__close { top: max(1rem, env(safe-area-inset-top)); right: 1rem; }
.zoombox__close .icon { width: 22px; height: 22px; }
.zoombox__nav { top: 50%; margin-top: -24px; }
.zoombox__nav--prev { left: max(.75rem, 2vw); } .zoombox__nav--next { right: max(.75rem, 2vw); }
.zoombox__hint { position: absolute; bottom: max(1rem, env(safe-area-inset-bottom)); left: 0; right: 0; margin: 0; text-align: center; font-size: var(--fs-xs); color: #d9b98e; }
@media (prefers-reduced-motion: no-preference) { .zoombox[open] { animation: fade-in .25s var(--ease); } }
@keyframes fade-in { from { opacity: 0; } }
/* Marketplace buy buttons (Flipkart, Shopsy), brand logos from each site's own icon */
.buy-on { margin: 1.5rem 0 1rem; }
.buy-on__label { display: block; margin-bottom: .55rem; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.buy-on__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .75rem; }
@media (min-width: 768px) {
  .buy-on__row { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; gap: .6rem; }
  .buy-on__row .market { gap: .55rem; padding: .6rem .65rem; }
  .buy-on__row .market img { width: 34px; height: 34px; border-radius: 10px; }
  .buy-on__row .market b { font-size: 1rem; }
  .buy-on__row .market .icon { display: none; }
}
.market {
  display: flex; align-items: center; gap: .8rem; padding: .7rem .9rem .7rem .75rem; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); color: var(--ink); text-decoration: none; box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), box-shadow .2s, border-color .2s;
}
.market img { flex: none; width: 40px; height: 40px; border-radius: 12px; }
.market span { display: grid; line-height: 1.15; }
.market small { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; }
.market b { font-size: 1.12rem; letter-spacing: -.01em; }
.market .icon { width: 18px; height: 18px; margin-left: auto; color: var(--muted); transition: transform .2s var(--ease), color .2s; }
.market:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.market:hover .icon { transform: translateX(3px); }
.market--flipkart b { color: #2874f0; }
.market--flipkart:hover { border-color: #2874f0; } .market--flipkart:hover .icon { color: #2874f0; }
.market--shopsy b { color: #5a32f0; }
.market--shopsy:hover { border-color: #5a32f0; } .market--shopsy:hover .icon { color: #5a32f0; }
.product__markets { position: relative; z-index: 2; display: flex; flex-wrap: nowrap; align-items: center; gap: .4rem; margin-top: auto; padding-top: .6rem; }
.product__markets > span { margin-right: .15rem; font-size: var(--fs-xs); font-weight: 700; color: var(--muted); white-space: nowrap; }
.market-chip { display: inline-grid; place-items: center; flex: 0 1 38px; min-width: 0; aspect-ratio: 1; padding: 0; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: var(--fs-xs); font-weight: 700; text-decoration: none; transition: border-color .2s, transform .2s var(--ease); }
.market-chip img { width: 70%; height: auto; aspect-ratio: 1; border-radius: 8px; }
/* Narrow cards (phones, 3-up grids on small laptops): drop the "Buy on" word so the logos fit */
.product__body { container-type: inline-size; }
@container (max-width: 250px) { .product__markets > span { display: none; } .product__markets { gap: .3rem; } }
.market-chip--flipkart { color: #2874f0; } .market-chip--shopsy { color: #5a32f0; } .market-chip--amazon { color: #c45500; } .market-chip--meesho { color: #9f2089; }
.market--amazon b { color: #c45500; } .market--amazon:hover { border-color: #e47911; } .market--amazon:hover .icon { color: #e47911; }
.market--meesho b { color: #9f2089; } .market--meesho:hover { border-color: #9f2089; } .market--meesho:hover .icon { color: #9f2089; }
.market-chip:hover { transform: translateY(-1px); border-color: currentColor; }
/* Same white ring as the marketplace logos, with the WhatsApp mark as a green tile the size of a logo */
.market-chip--wa { color: #128c4a; }
.market-chip--wa .icon { width: 70%; height: auto; aspect-ratio: 1; padding: 15%; border-radius: 8px; background: linear-gradient(150deg, #25d366, #128c7e); color: #fff; box-sizing: border-box; }
.pin-check__markets .market[hidden] { display: none; }
.pd h1 { font-size: var(--fs-h1); margin: .25rem 0; }
.pd .price { font-size: clamp(1.5rem, 1.3rem + .8vw, 2rem); margin: 1rem 0; }
.spec { display: grid; gap: .5rem; margin: 1.5rem 0; padding: 1.1rem 1.25rem; list-style: none; border-radius: var(--r); background: var(--bg-2); font-size: var(--fs-sm); }
.spec li { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px dashed var(--line); padding-bottom: .5rem; }
.spec li:last-child { border: 0; padding: 0; }
.spec b { color: var(--ink); }
.in-stock { color: var(--leaf); font-weight: 700; }
.no-stock { color: var(--vermilion); font-weight: 700; }

/* ---------- Blog ---------- */
.blog-layout { display: grid; gap: 2.5rem; }
@media (min-width: 992px) { .blog-layout { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } .blog-layout aside { position: sticky; top: calc(var(--header-h) + 20px); } }
.posts { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.post { position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.post:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
/* Shorter image area; the whole 3:4 thumbnail is shown (contain), never cropped */
.post__img { display: flex; align-items: center; justify-content: center; height: clamp(220px, 120px + 12vw, 280px); padding: .75rem; overflow: hidden; background: var(--bg-2); }
.post__img img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px; box-shadow: 0 6px 18px -10px rgba(26, 10, 2, .45); transition: transform .5s var(--ease); }
.post__img img.is-logo { object-fit: contain; padding: 20%; }
.post:hover .post__img img { transform: scale(1.04); }
.post__body { display: flex; flex-direction: column; gap: .6rem; padding: 1.25rem; flex: 1; }
.post h3, .post .post__title { font-size: 1.2rem; margin: 0; }
.post h3 a, .post__title a { color: var(--ink); text-decoration: none; }
.post h3 a::after, .post__title a::after { content: ""; position: absolute; inset: 0; }
.post p { color: var(--muted); font-size: var(--fs-sm); }
.post .meta-line { position: relative; z-index: 1; }
.side-box { padding: 1.4rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.side-box + .side-box { margin-top: 1rem; }
.side-box h2 { font-size: 1.15rem; margin-bottom: 1rem; }
.mini-posts { display: grid; gap: 1rem; list-style: none; }
.mini-posts a { display: flex; gap: .85rem; align-items: center; text-decoration: none; }
.mini-posts img, .mini-posts .ph { width: 64px; height: 64px; flex: none; border-radius: var(--r-sm); object-fit: cover; background: var(--bg-2); }
.mini-posts strong { display: block; font-size: var(--fs-sm); line-height: 1.4; color: var(--ink); }
.mini-posts time { font-size: var(--fs-xs); color: var(--muted); }
.mini-posts a:hover strong { color: var(--maroon); }
.cat-list { list-style: none; display: grid; gap: .25rem; }
.cat-list a { display: flex; justify-content: space-between; padding: .55rem .75rem; border-radius: var(--r-sm); color: var(--ink); font-weight: 600; text-decoration: none; font-size: var(--fs-sm); }
.cat-list a:hover, .cat-list a[aria-current="true"] { background: var(--bg-2); color: var(--maroon); }
.cat-list span { color: var(--muted); font-weight: 500; }
.article__banner { overflow: hidden; border-radius: var(--r-lg); margin-bottom: 2rem; }
.answer-box { margin: 0 0 1.75rem; padding: 1.1rem 1.25rem; border-left: 4px solid var(--saffron); border-radius: 0 var(--r-sm) var(--r-sm) 0; background: var(--bg-2); font-size: var(--fs-lead); color: var(--ink); }
.author-box { display: grid; gap: .25rem; margin-top: 3rem; padding: 1.1rem 1.25rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); font-size: var(--fs-sm); }
.author-box b { color: var(--ink); }
.article__banner img { width: 100%; }
.article h1 { font-size: var(--fs-h1); margin: .75rem 0 1.5rem; }

/* ---------- Status pages (thank-you, coming soon, 404) ---------- */
.status-page { display: grid; place-items: center; min-height: 62vh; text-align: center; padding-block: var(--section); background: var(--g-dawn); }
.status-page .wheel { width: 150px; margin: 0 auto 1.75rem; }
.status-page p { max-width: 520px; margin: 0 auto 1.75rem; color: var(--muted); font-size: var(--fs-lead); }
.status-page .btn-row { justify-content: center; }
.gate { position: fixed; inset: 0; z-index: 90; overflow-y: auto; }

/* ---------- Footer ---------- */
.site-footer { position: relative; overflow: hidden; margin-top: var(--section); background: var(--g-temple); color: #e6d2b9; }
.site-footer .wheel-bg { position: absolute; left: -120px; bottom: -120px; width: 420px; opacity: .05; pointer-events: none; }
.footer-grid { display: grid; gap: 2.5rem 2rem; padding-block: clamp(3rem, 2rem + 4vw, 5rem); }
.footer-grid { grid-template-columns: 1fr 1fr; }
.footer-grid > :first-child, .footer-grid > :last-child { grid-column: 1 / -1; }
@media (min-width: 1024px) { .footer-grid > :first-child, .footer-grid > :last-child { grid-column: auto; } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.5fr .8fr .8fr 1.2fr; } }
.site-footer h2 { font-family: var(--ff-body); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--marigold); margin-bottom: 1.1rem; }
.site-footer p { font-size: var(--fs-sm); color: #d4bea3; }
.site-footer ul { list-style: none; display: grid; gap: .6rem; }
.site-footer a { color: #f3e3cf; text-decoration: none; font-size: var(--fs-sm); }
.site-footer a:hover { color: var(--marigold); }
.footer-logo { height: 75px; width: auto; margin-bottom: 1.1rem; }
.legal-ids { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; list-style: none; }
.legal-ids li { padding: .35rem .75rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .15); font-size: var(--fs-xs); color: #e6d2b9; }
.legal-ids b { color: #fff; }
.site-footer .contact-list a { display: flex; gap: .65rem; align-items: flex-start; }
.site-footer .contact-list .icon { width: 1.1rem; height: 1.1rem; margin-top: .2rem; color: var(--marigold); }
.site-footer .socials { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 1.25rem; list-style: none; }
.socials li { display: flex; }
.socials a { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); transition: background-color .2s, transform .2s var(--ease); }
.socials a:hover { background: var(--saffron-deep); transform: translateY(-2px); color: #fff; }
.socials .icon { width: 20px; height: 20px; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .1); padding-block: 1.25rem; font-size: var(--fs-xs); color: #cdb597; }
.footer-bottom .container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; }
.footer-bottom a { font-size: inherit; color: var(--marigold); }

/* ---------- Phone bottom bar (replaces the floating WhatsApp button under 768px) ---------- */
.tabbar { display: none; }
@media (max-width: 767.98px) {
  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: repeat(5, 1fr);
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: rgba(255, 253, 245, .92); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
    border-top: 1px solid var(--line); box-shadow: 0 -8px 24px -18px rgba(42, 20, 8, .5);
  }
  .tabbar a, .tabbar button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px;
    border: 0; border-radius: 12px; background: none; color: var(--muted); font-size: .6875rem; font-weight: 700; text-decoration: none;
  }
  .tabbar { transition: transform .3s var(--ease); }
  .tabbar.is-hidden { transform: translateY(110%); }
  .tabbar .icon { width: 22px; height: 22px; }
  .tabbar [aria-current="page"] { color: var(--saffron-deep); background: rgba(232, 117, 26, .1); }
  .tabbar__fab > span:first-child { display: grid; place-items: center; width: 48px; height: 48px; margin-top: -24px; border-radius: 50%; background: linear-gradient(150deg, #25d366, #128c7e); color: #fff; box-shadow: 0 10px 22px -8px rgba(18, 140, 126, .8), 0 0 0 4px var(--bg); }
  .tabbar__fab .icon { width: 26px; height: 26px; }
  body .wa { display: none; } /* beats the .wa rule further down */
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  /* Collect.chat launcher sits bottom-right: lift it clear of the bar */
  #chat-bot-launcher-container { bottom: calc(72px + env(safe-area-inset-bottom)) !important; }
}

/* ---------- Floating WhatsApp ---------- */
.wa { position: fixed; left: 1rem; bottom: 1rem; z-index: 60; display: grid; justify-items: start; gap: .75rem; }
.wa__fab {
  display: grid; place-items: center; width: 58px; height: 58px; border: 0; border-radius: 50%;
  background: #25d366; color: #fff; box-shadow: 0 12px 28px -8px rgba(18, 140, 74, .65);
  transition: transform .2s var(--ease);
}
.wa__fab:hover { transform: scale(1.06); }
.wa__fab .icon { width: 30px; height: 30px; }
.wa__fab .i-close { display: none; width: 24px; height: 24px; }
.wa.is-open .wa__fab .i-wa { display: none; }
.wa.is-open .wa__fab .i-close { display: block; }
.wa__box {
  width: min(86vw, 300px); overflow: hidden; border-radius: var(--r-lg); background: var(--surface);
  box-shadow: var(--shadow-lg); border: 1px solid var(--line);
  opacity: 0; visibility: hidden; transform: translateY(10px) scale(.98); transform-origin: bottom left;
  transition: opacity .2s, transform .2s var(--ease), visibility .2s;
}
.wa.is-open .wa__box { opacity: 1; visibility: visible; transform: none; }
.wa__head { padding: 1rem 1.1rem; background: var(--wa); color: #fff; }
.wa__head strong { display: block; font-size: 1.05rem; }
.wa__head span { font-size: var(--fs-xs); opacity: .9; }
.wa__contact { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.1rem; color: var(--ink); text-decoration: none; }
.wa__contact:hover { background: var(--bg-2); color: var(--ink); }
.wa__contact img { width: 44px; height: 44px; border-radius: 50%; background: var(--ink); padding: 5px; object-fit: contain; }
.wa__contact b { display: block; }
.wa__contact small { color: var(--wa); font-weight: 700; }

/* ---------- Scroll reveal (CSS only, progressive) ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
    @keyframes reveal { from { opacity: 0; transform: translateY(28px); } }
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Paragraph colour on the dark logo gradient */
.cta p, .panel-dark p, .site-footer p, .topbar p, .cat__head p, .wa__head span { color: inherit; }
.cta p { color: #f1dfc4; }
.site-footer p { color: #e3cdae; }
.cat__head p { color: rgba(255, 255, 255, .9); }

/* Dark "Supply partner?" box in the blog sidebar */
.side-box--dark { background: var(--g-dark); border: 0; color: #fff; }
.side-box--dark h2, .side-box--dark p { color: #fff; }
.side-box--dark p { font-size: var(--fs-sm); opacity: .92; }