/* Sportyadaki storefront — mobile first.
   1 Tokens · 2 Base · 3 Header, tab bar, sheet, footer · 4 Components
   5 Home sections · 6 Inner pages · 7 Motion */

@font-face { font-family: Vazirmatn; src: url("../fonts/Vazirmatn-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Vazirmatn; src: url("../fonts/Vazirmatn-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: Vazirmatn; src: url("../fonts/Vazirmatn-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: Vazirmatn; src: url("../fonts/Vazirmatn-ExtraBold.woff2") format("woff2"); font-weight: 800; font-display: swap; }

/* 1 · Tokens ================================================================ */

:root {
  /* Brand (navy and orange from the logo) */
  --navy-900: #0b1629;
  --navy-800: #0f1f38;
  --navy-700: #1b3358;
  --orange-500: #f26522;
  --orange-600: #d9531a;
  --red-500: #e11d48;
  --gold-500: #f5a524;

  /* Surfaces and text */
  --bg: #f4f6f9;
  --surface: #fff;
  --surface-2: #f7f8fa;
  --ink: #111827;
  --ink-2: #374151;
  --muted: #6b7280;
  --line: #e6e9ef;
  --line-strong: #d5dae3;
  --accent: var(--orange-500);
  --accent-dark: var(--orange-600);
  --accent-soft: rgb(242 101 34 / .1);
  --sale: var(--red-500);
  --dark: var(--navy-800);

  /* Shape */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius: 16px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --shadow-xs: 0 1px 2px rgb(15 31 56 / .06);
  --shadow: 0 1px 2px rgb(15 31 56 / .05), 0 6px 18px rgb(15 31 56 / .07);
  --shadow-lg: 0 2px 6px rgb(15 31 56 / .06), 0 18px 40px rgb(15 31 56 / .14);

  /* Spacing (4px scale) and type */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px;
  --text-xs: .75rem; --text-sm: .8125rem; --text-base: .9375rem; --text-md: 1rem;
  --text-lg: 1.125rem; --text-xl: 1.375rem;

  /* Motion */
  --ease-out: cubic-bezier(.22, .8, .24, 1);
  --dur-1: 120ms; --dur-2: 220ms; --dur-3: 420ms;

  /* Layout */
  --gutter: 16px;
  --gap: 12px;
  --header-h: 60px;
  --tabbar-h: 62px;
  --tap: 44px;
}
@media (min-width: 900px) {
  :root { --gutter: 24px; --gap: 18px; --header-h: 76px; }
}

/* 2 · Base ================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html:has(dialog[open]) { overflow: hidden; }
body {
  margin: 0;
  font-family: Vazirmatn, Tahoma, system-ui, sans-serif;
  font-size: var(--text-base);
  line-height: 1.75;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
/* Room for the fixed tab bar. */
@media (max-width: 899px) { body { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); } }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a, button, summary, label { -webkit-tap-highlight-color: transparent; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { line-height: 1.45; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[id] { scroll-margin-top: calc(var(--header-h) + var(--space-3)); }
[hidden] { display: none !important; }
::selection { background: rgb(242 101 34 / .2); }

.container { max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.meta { color: var(--muted); font-size: var(--text-xs); }
.icon { flex: none; width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.placeholder { width: 40%; max-width: 72px; fill: #d4d9e1; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); padding: clamp(16px, 3vw, 32px); }
.empty { text-align: center; color: var(--muted); padding: var(--space-12) var(--space-4); background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); }
.empty a:not(.btn) { display: inline-flex; align-items: center; min-height: var(--tap); margin-top: var(--space-2); color: var(--accent-dark); font-weight: 700; }

/* 3 · Header, tab bar, sheet, footer ======================================== */

.skip-link { position: absolute; inset-inline-start: var(--space-3); top: -100px; z-index: 50; padding: 10px 16px; border-radius: var(--radius-sm); background: var(--dark); color: #fff; font-weight: 700; }
.skip-link:focus { top: var(--space-3); }

.site-header {
  position: sticky; top: 0; z-index: 30;
  background: rgb(255 255 255 / .92);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  backdrop-filter: saturate(1.6) blur(16px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--dur-2) ease;
}
.site-header.is-scrolled { box-shadow: 0 8px 24px rgb(15 31 56 / .08); }
.site-header__bar { display: flex; align-items: center; gap: var(--space-6); height: var(--header-h); }
.logo { flex: none; display: flex; align-items: center; gap: 10px; color: var(--dark); font-size: var(--text-lg); font-weight: 800; }
.logo__img { height: 38px; width: auto; }
.logo__mark { width: 36px; height: 36px; border-radius: 10px; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: .82rem; letter-spacing: .5px; }
.nav { display: none; }
.header-phone {
  margin-inline-start: auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: var(--tap); height: var(--tap); padding-inline: 12px;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  color: var(--dark); font-size: var(--text-sm); font-weight: 700;
  transition: border-color var(--dur-2), color var(--dur-2), background-color var(--dur-2), transform var(--dur-1) var(--ease-out);
}
.header-phone .icon { width: 20px; height: 20px; color: var(--accent); }
.header-phone:active { transform: scale(.95); background: var(--surface-2); }
.header-phone__number { display: none; }
@media (min-width: 600px) {
  .header-phone { padding-inline: 16px; }
  .header-phone__number { display: inline; }
}
@media (hover: hover) { .header-phone:hover { border-color: var(--accent); color: var(--accent); } }
@media (min-width: 900px) {
  .logo__img { height: 46px; }
  .nav { display: flex; gap: 2px; }
  .nav a {
    position: relative; display: inline-flex; align-items: center; height: 40px; padding-inline: 14px;
    border-radius: var(--radius-pill); color: var(--ink-2); font-weight: 500;
    transition: color var(--dur-2), background-color var(--dur-2);
  }
  .nav a:hover { background: var(--surface-2); color: var(--dark); }
  .nav a.is-active { color: var(--accent-dark); font-weight: 700; }
  .nav a.is-active::after { content: ""; position: absolute; inset-inline: 14px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--accent); }
}

/* Bottom tab bar (phones) */
.tabbar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding-bottom: env(safe-area-inset-bottom);
  background: rgb(255 255 255 / .94);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  backdrop-filter: saturate(1.6) blur(16px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px rgb(15 31 56 / .06);
}
.tabbar__item {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: var(--tabbar-h);
  color: var(--muted); font-size: .6875rem; font-weight: 700; line-height: 1.2;
  transition: color var(--dur-2);
}
.tabbar__item .icon { width: 24px; height: 24px; transition: transform var(--dur-2) var(--ease-out); }
.tabbar__item:active .icon { transform: scale(.86); }
.tabbar__item.is-active { color: var(--accent); }
.tabbar__item.is-active .icon { stroke-width: 2.2; }
.tabbar__item.is-active::before { content: ""; position: absolute; top: 0; width: 28px; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent); }
@media (min-width: 900px) { .tabbar { display: none; } }

/* Bottom sheet */
.sheet {
  width: 100%; max-width: 560px; max-height: 88vh;
  margin: auto auto 0; padding: 0; border: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-lg);
}
.sheet::backdrop { background: rgb(11 22 41 / .45); }
.sheet[open] { animation: sheet-up var(--dur-3) var(--ease-out); }
.sheet[open]::backdrop { animation: fade-in var(--dur-3) ease; }
@media (min-width: 900px) { .sheet { margin: auto; border-radius: var(--radius-lg); } }
.sheet__body { padding: var(--space-2) var(--space-5) calc(var(--space-6) + env(safe-area-inset-bottom)); }
.sheet__handle { width: 40px; height: 4px; margin: 4px auto 10px; border-radius: 4px; background: var(--line-strong); }
.sheet__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.sheet__title { font-size: var(--text-lg); font-weight: 800; }
.sheet__title:focus { outline: none; }
.sheet__lead { margin-top: 2px; color: var(--muted); font-size: var(--text-sm); }
.sheet__actions { display: grid; gap: 10px; margin-top: var(--space-4); }
.sheet-action {
  display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: background-color var(--dur-2), border-color var(--dur-2), transform var(--dur-1) var(--ease-out);
}
.sheet-action:active { transform: scale(.98); background: var(--surface-2); }
@media (hover: hover) { .sheet-action:hover { border-color: var(--accent); } }
.sheet-action strong { display: block; font-size: var(--text-base); line-height: 1.5; }
.sheet-action small { color: var(--muted); font-size: var(--text-xs); }
.sheet-action__icon, .sheet-action__img { flex: none; width: 42px; height: 42px; border-radius: var(--radius-sm); }
.sheet-action__icon { display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.sheet-action__icon .icon { width: 22px; height: 22px; }
.icon-btn {
  flex: none; display: grid; place-items: center; width: var(--tap); height: var(--tap);
  border: 0; border-radius: 50%; background: var(--surface-2); color: var(--ink-2); cursor: pointer;
  transition: background-color var(--dur-2), transform var(--dur-1) var(--ease-out);
}
.icon-btn:active { transform: scale(.92); }
.icon-btn .icon { width: 20px; height: 20px; }

/* Footer */
.site-footer { margin-top: var(--space-12); padding-block: var(--space-10) var(--space-6); background: var(--dark); color: rgb(255 255 255 / .72); font-size: var(--text-sm); }
.site-footer__grid { display: grid; gap: var(--space-8); }
@media (min-width: 760px) { .site-footer__grid { grid-template-columns: 1.3fr 1fr 1.2fr; } }
.site-footer__name { margin-bottom: 6px; color: #fff; font-size: var(--text-lg); font-weight: 800; }
.site-footer__heading { margin-bottom: var(--space-2); color: #fff; font-size: var(--text-base); font-weight: 700; }
.site-footer__links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-4); }
.site-footer__links a { display: flex; align-items: center; min-height: var(--tap); color: rgb(255 255 255 / .8); transition: color var(--dur-2); }
.site-footer__links a:hover { color: #fff; }
.site-footer__copy { margin-top: var(--space-8); padding-top: var(--space-4); border-top: 1px solid rgb(255 255 255 / .1); color: rgb(255 255 255 / .55); font-size: var(--text-xs); }
.contact-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.contact-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0 16px;
  border-radius: var(--radius-pill); background: rgb(255 255 255 / .08); color: #fff; font-size: var(--text-sm); font-weight: 700;
  transition: background-color var(--dur-2), transform var(--dur-1) var(--ease-out);
}
.contact-btn:hover { background: var(--accent); color: #fff; }
.contact-btn:active { transform: scale(.96); }
.contact-btn img { flex: none; width: 24px; height: 24px; border-radius: 6px; }
.contact-btn--bale, .contact-btn--eitaa { padding-inline-start: 10px; }

/* 4 · Components ============================================================ */

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap); padding: 0 var(--space-5);
  border: 1.5px solid transparent; border-radius: var(--radius-pill);
  font-size: var(--text-base); font-weight: 700; line-height: 1.2; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-2), border-color var(--dur-2), color var(--dur-2), box-shadow var(--dur-2), transform var(--dur-1) var(--ease-out);
}
.btn:active { transform: scale(.97); }
.btn--lg { min-height: 50px; padding-inline: var(--space-6); font-size: var(--text-md); }
.btn--small { min-height: 40px; padding-inline: var(--space-4); font-size: var(--text-sm); }
.btn--primary { background: var(--accent); color: #fff; box-shadow: 0 8px 18px -8px rgb(242 101 34 / .7); }
.btn--ghost { border-color: rgb(255 255 255 / .55); background: rgb(255 255 255 / .06); color: #fff; }
.btn--outline { border-color: var(--line-strong); background: var(--surface); color: var(--ink); }
@media (hover: hover) {
  .btn--primary:hover { background: var(--accent-dark); }
  .btn--ghost:hover { background: rgb(255 255 255 / .16); }
  .btn--outline:hover { border-color: var(--accent); color: var(--accent); }
}

/* Chips and badges */
.chip { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent-dark); font-size: var(--text-xs); font-weight: 700; line-height: 1.6; }
a.chip { min-height: 36px; padding-inline: 14px; transition: background-color var(--dur-2), color var(--dur-2); }
a.chip:hover, a.chip:active { background: var(--accent); color: #fff; }
.chips { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.badge { position: absolute; top: var(--space-2); inset-inline-start: var(--space-2); padding: 2px 8px; border-radius: var(--radius-pill); color: #fff; font-size: var(--text-xs); font-weight: 800; line-height: 1.6; }
.badge--sale { background: var(--sale); box-shadow: 0 4px 10px -4px rgb(225 29 72 / .7); }

/* Cards */
.card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-xs);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2);
}
.card:active { transform: scale(.98); }
@media (hover: hover) {
  .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: transparent; }
}
.media { position: relative; overflow: hidden; }

.product-card__media { aspect-ratio: 1; display: grid; place-items: center; padding: var(--space-3); background: var(--surface-2); }
.product-card__media img { width: 100%; height: 100%; object-fit: contain; }
.product-card__body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: var(--space-3); }
.product-card__brand { color: var(--muted); font-size: var(--text-xs); font-weight: 500; line-height: 1.4; }
.product-card__title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 3.3em; font-size: .875rem; font-weight: 700; line-height: 1.65;
}

/* Price: everything aligned to the card's start edge, sale price in red. */
.price { margin-top: auto; padding-top: 2px; display: flex; flex-direction: column; align-items: flex-start; line-height: 1.45; }
.price del { color: var(--muted); font-size: var(--text-xs); }
.price strong { color: var(--ink); font-size: var(--text-md); font-weight: 800; }
.price small { color: var(--muted); font-size: .6875rem; font-weight: 500; }
.price--sale strong { color: var(--sale); }
.price__none { color: var(--muted); font-size: var(--text-sm); font-weight: 700; }

/* Star ratings. The gold row is clipped to the average; in RTL it grows from the right. */
.rating { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); line-height: 1; color: var(--muted); }
.stars { position: relative; display: inline-block; }
.stars__row { display: flex; gap: 1px; }
.stars__row svg { flex: none; width: 14px; height: 14px; fill: #dfe2e7; }
.stars__fill { position: absolute; inset-block: 0; inset-inline-start: 0; overflow: hidden; }
.stars__fill svg { fill: var(--gold-500); }
.rating__value { font-weight: 800; color: var(--ink); }
.rating--lg { gap: 8px; font-size: var(--text-base); }
.rating--lg .stars__row svg { width: 22px; height: 22px; }

/* Horizontal rails: swipe on touch, arrow buttons on desktop */
.rail {
  --cols: 2.2;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding-block: 4px 12px;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
/* Phones: rails run to the screen edges so the next card peeks in from the edge. */
@media (max-width: 899px) {
  .rail { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
}
@media (min-width: 600px) { .rail { --cols: 3.2; } }
@media (min-width: 900px) { .rail { --cols: 4; } }
@media (min-width: 1180px) { .rail { --cols: 5; } }

.rail-nav { display: none; gap: 6px; }
@media (min-width: 900px) { .rail-nav { display: flex; } }
.rail-btn {
  display: grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink); cursor: pointer;
  transition: border-color var(--dur-2), color var(--dur-2), transform var(--dur-1) var(--ease-out);
}
.rail-btn:hover { border-color: var(--accent); color: var(--accent); }
.rail-btn:active { transform: scale(.92); }
.rail-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Sections */
.section { margin-block: var(--space-8); }
@media (min-width: 900px) { .section { margin-block: var(--space-12); } }
.section__head { display: flex; align-items: center; gap: var(--space-3); min-height: var(--tap); margin-bottom: var(--space-3); }
.section__title { display: flex; align-items: center; gap: 10px; font-size: var(--text-lg); font-weight: 800; }
@media (min-width: 900px) { .section__title { font-size: 1.5rem; } }
.section__icon { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); }
.section__icon .icon { width: 20px; height: 20px; }
.section__more {
  margin-inline-start: auto; display: inline-flex; align-items: center; gap: 2px;
  min-height: 40px; padding-inline: 14px 8px; border-radius: var(--radius-pill);
  background: var(--accent-soft); color: var(--accent-dark); font-size: var(--text-sm); font-weight: 700;
  transition: background-color var(--dur-2), color var(--dur-2), transform var(--dur-1) var(--ease-out);
}
.section__more .icon { width: 18px; height: 18px; }
.section__more:active { transform: scale(.96); }
@media (hover: hover) { .section__more:hover { background: var(--accent); color: #fff; } }
.section__head .rail-nav { margin-inline-start: auto; }
.section__head .section__more + .rail-nav { margin-inline-start: 4px; }

/* Flash messages and pagination */
.messages { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.message { padding: 12px 16px; border-radius: var(--radius-sm); background: #e8f7ee; color: #146c3a; font-size: var(--text-sm); font-weight: 700; animation: rise var(--dur-3) var(--ease-out) backwards; }
.message--error { background: #fdecee; color: #b4232f; }
.pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-3); margin-block: var(--space-6); font-size: var(--text-sm); }
.pagination a { display: inline-flex; align-items: center; min-height: var(--tap); padding-inline: 18px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); font-weight: 700; transition: border-color var(--dur-2), color var(--dur-2); }
.pagination a:hover { border-color: var(--accent); color: var(--accent); }

/* 5 · Home sections ========================================================= */

/* Banners */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: flex-end;
  min-height: clamp(240px, 42vw, 460px);
  margin-block: var(--space-3) var(--space-6);
  border-radius: var(--radius-lg);
  background: linear-gradient(120deg, #3a1608, var(--dark) 60%);
  color: #fff;
  box-shadow: var(--shadow);
}
.hero--compact { min-height: clamp(190px, 26vw, 300px); align-items: center; }
.hero__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
/* No z-index of its own (position only): its children stack directly in
   .hero's context, so .hero__dots isn't trapped behind the -2 image layer. */
.hero__slideshow { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(10 11 14 / .85), rgb(10 11 14 / .2) 70%); }

/* Hero slideshow: slides crossfade, one .is-active at a time (site.js). The
   first slide is active by default so it works before JS runs. All slides
   share the image's usual -2 stacking slot (below the gradient/content);
   ordinary opacity crossfading between two opaque photos needs no z-index. */
.hero__slideshow img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.1s ease; }
.hero__slideshow img.is-active { opacity: 1; }
.hero__dots { position: absolute; z-index: 2; inset-inline: 0; bottom: var(--space-3); display: flex; justify-content: center; gap: 6px; }
.hero__dot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: rgb(255 255 255 / .45); cursor: pointer; transition: background-color var(--dur-2), width var(--dur-2); }
.hero__dot:hover { background: rgb(255 255 255 / .7); }
.hero__dot.is-active { width: 20px; border-radius: 4px; background: #fff; }
.hero__content { width: 100%; max-width: 600px; padding: var(--space-5); }
.hero__title { font-size: 1.35rem; font-weight: 800; line-height: 1.5; }
.hero--compact .hero__title { font-size: 1.2rem; }
.hero__subtitle { margin-top: 6px; color: rgb(255 255 255 / .8); font-size: var(--text-sm); line-height: 1.8; }
/* Phones: buttons share the row equally. */
.hero__actions { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--space-2); margin-top: var(--space-4); }
.hero__actions .btn { padding-inline: var(--space-3); }
/* Keep the subject of the photo (the side without text) in view when cropped. */
.hero--text-right .hero__img, .hero--text-right .hero__slideshow img { object-position: 20% center; }
.hero--text-left .hero__img, .hero--text-left .hero__slideshow img { object-position: 80% center; }
@media (max-width: 759px) {
  /* Phones: photo on top, text below it instead of covering it. */
  .hero--image { flex-direction: column; align-items: stretch; }
  .hero--image .hero__img { position: static; z-index: auto; height: auto; aspect-ratio: 16 / 9; }
  /* relative (not static): its slides are positioned absolute and need a containing block. */
  .hero--image .hero__slideshow { position: relative; z-index: auto; height: auto; aspect-ratio: 16 / 9; }
  .hero--image::before { display: none; }
}
@media (min-width: 760px) {
  .hero { align-items: center; margin-block: var(--space-6) var(--space-8); }
  /* A tall wide banner: pin the title/subtitle to the top and the buttons to
     the bottom instead of clumping everything in the vertical middle.
     Compact banners stay centered — they're short, nothing to spread out. */
  .hero:not(.hero--compact) { align-items: stretch; }
  .hero:not(.hero--compact) .hero__content { display: flex; flex-direction: column; }
  /* Sit closer to the top edge than the default padding would put it. */
  .hero:not(.hero--compact) .hero__content { padding-top: clamp(16px, 2.2vw, 26px); }
  .hero__content { padding: clamp(28px, 4vw, 48px); }
  .hero__title { font-size: clamp(1.6rem, 3.4vw, 2.6rem); }
  .hero--compact .hero__title { font-size: clamp(1.35rem, 2.6vw, 2rem); }
  .hero__subtitle { font-size: clamp(.95rem, 1.5vw, 1.1rem); }
  .hero__actions { display: flex; flex-wrap: wrap; }
  .hero__actions .btn { padding-inline: var(--space-6); }
  .hero:not(.hero--compact) .hero__actions { margin-top: auto; }
  /* Darken behind the text only. */
  .hero--text-right::before { background: linear-gradient(to left, rgb(10 11 14 / .85), rgb(10 11 14 / .35) 50%, transparent 80%); }
  .hero--text-left { justify-content: flex-end; }
  /* The content box sits flush left here, but RTL's own default alignment
     (text-align and flex justify-content both default to the right) would
     still hug the box's right/inner edge — pulling text and buttons back
     toward the banner's center. Mirror both to the box's outer (left) edge
     so they actually sit at the left side of the banner, not just the box. */
  .hero--text-left .hero__title, .hero--text-left .hero__subtitle { text-align: left; }
  .hero--text-left .hero__actions { justify-content: flex-end; }
  .hero--text-left::before { background: linear-gradient(to right, rgb(10 11 14 / .85), rgb(10 11 14 / .35) 50%, transparent 80%); }
}
@media (min-width: 1000px) {
  /* Match the wide banner artwork (about 1856×580) so it isn't cropped. */
  .hero--image:not(.hero--compact) { min-height: 0; aspect-ratio: 16 / 5; }
}

/* Car brands */
.brand-rail { --cols: 4.3; }
@media (min-width: 600px) { .brand-rail { --cols: 6; } }
@media (min-width: 900px) { .brand-rail { grid-auto-flow: row; grid-template-columns: repeat(6, 1fr); overflow: visible; } }
.brand-tile {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: var(--space-3) var(--space-2) var(--space-2);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-xs);
  transition: border-color var(--dur-2), box-shadow var(--dur-2), transform var(--dur-2) var(--ease-out);
}
.brand-tile:active { transform: scale(.96); }
@media (hover: hover) { .brand-tile:hover { border-color: var(--accent); box-shadow: var(--shadow); transform: translateY(-2px); } }
/* Flex, not grid: percentage max-height on a grid item ignores the fixed box height. */
.brand-tile__logo { display: flex; align-items: center; justify-content: center; width: 100%; height: 44px; border-radius: var(--radius-xs); }
@media (min-width: 900px) { .brand-tile__logo { height: 72px; } }
.brand-tile__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.brand-tile__initial { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--surface-2); color: var(--muted); font-size: 1.2rem; font-weight: 800; }
.brand-tile__name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-xs); font-weight: 700; }
@media (min-width: 900px) { .brand-tile__name { font-size: var(--text-sm); } }

/* Highlights marquee. In RTL the strip moves rightward so each phrase's
   beginning enters first; shifting by 50% swaps in the identical clone group. */
.marquee {
  overflow: hidden;
  margin-block: var(--space-6);
  padding-block: 10px;
  border-radius: var(--radius);
  background: var(--dark);
  color: #fff;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}
.marquee__track { display: flex; width: max-content; animation: marquee 36s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; align-items: center; gap: 40px; margin: 0; padding: 0; padding-inline-end: 40px; list-style: none; }
.marquee__item { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; font-size: var(--text-sm); font-weight: 700; }
@media (min-width: 900px) { .marquee__item { font-size: var(--text-md); } }
.marquee__icon { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgb(242 101 34 / .18); color: var(--accent); }
.marquee__icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@keyframes marquee { to { transform: translateX(50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee__track { animation: none; width: auto; justify-content: center; }
  .marquee__group { flex-wrap: wrap; justify-content: center; gap: 10px 32px; padding-inline: 16px; }
  .marquee__group--clone, .marquee__item--repeat { display: none; }
}

/* Sale offers band */
.offers {
  display: grid; gap: var(--space-4);
  padding: var(--space-5) var(--gutter);
  border-radius: var(--radius-lg);
  background: radial-gradient(130% 150% at 100% 0%, #ff7a3d 0%, #f0541e 40%, #d61f45 100%);
  color: #fff;
  box-shadow: 0 18px 40px -20px rgb(214 31 69 / .6);
}
.offers__intro { display: flex; align-items: center; gap: var(--space-3); }
.offers__icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-sm); background: rgb(255 255 255 / .18); }
.offers__icon .icon { width: 24px; height: 24px; }
.offers__text { min-width: 0; }
.offers__title { font-size: var(--text-xl); font-weight: 800; line-height: 1.35; }
.offers__lead { color: rgb(255 255 255 / .85); font-size: var(--text-sm); }
.offers .rail-nav { margin-inline-start: auto; }
.offers .rail { --cols: 2.2; }
.offers .rail-btn { border-color: rgb(255 255 255 / .45); background: rgb(255 255 255 / .15); color: #fff; }
.offers .rail-btn:hover { background: #fff; color: var(--sale); }
/* Phones: the band runs edge to edge. */
@media (max-width: 899px) { .offers { margin-inline: calc(-1 * var(--gutter)); border-radius: 0; box-shadow: none; } }
@media (min-width: 600px) { .offers .rail { --cols: 3.2; } }
@media (min-width: 900px) {
  .offers { grid-template-columns: 210px 1fr; align-items: center; padding: var(--space-8); }
  .offers__intro { flex-direction: column; align-items: flex-start; }
  .offers .rail-nav { margin-inline-start: 0; }
  .offers .rail { --cols: 3.4; }
}
@media (min-width: 1180px) { .offers .rail { --cols: 4.4; } }

/* Articles */
.article-rail { --cols: 1.3; }
@media (min-width: 600px) { .article-rail { --cols: 2.3; } }
@media (min-width: 900px) { .article-rail { --cols: 3; } }
@media (min-width: 1180px) { .article-rail { --cols: 4; } }
.article-card__media { aspect-ratio: 16 / 10; display: grid; place-items: center; background: #e9ecf1; }
.article-card__media img { width: 100%; height: 100%; object-fit: cover; }
.article-card__body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-3) var(--space-4) var(--space-4); }
.article-card__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--text-base); font-weight: 700; line-height: 1.7; }
.article-card__meta { display: inline-flex; align-items: center; gap: 4px; margin-top: auto; }
.article-card__meta .icon { width: 15px; height: 15px; }

/* 6 · Inner pages =========================================================== */

.breadcrumbs { margin-block: var(--space-4); color: var(--muted); font-size: var(--text-sm); }
.breadcrumbs a { transition: color var(--dur-2); }
.breadcrumbs a:hover { color: var(--accent); }
.page-title { font-size: clamp(1.3rem, 3vw, 1.9rem); font-weight: 800; }
.grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); }
.grid--articles { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
/* Phones: two product cards per row instead of one oversized card. */
@media (max-width: 599px) {
  .grid:not(.grid--articles), .browser__results .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

/* Product detail */
.product-detail { display: grid; gap: var(--space-6); }
@media (min-width: 900px) { .product-detail { grid-template-columns: 1fr 1fr; gap: var(--space-10); } }
.product-detail__image { aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border-radius: var(--radius); background: var(--surface-2); }
.product-detail__image img { width: 100%; height: 100%; object-fit: contain; }
.gallery { display: flex; gap: var(--space-2); margin-top: 10px; overflow-x: auto; }
.gallery img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; }
.product-detail__info { display: flex; flex-direction: column; gap: var(--space-3); }
.product-detail__info .price { margin-top: 0; }
.product-detail__info .price strong { font-size: 1.5rem; }
.product-detail__title { font-size: clamp(1.25rem, 2.6vw, 1.75rem); font-weight: 800; }
.fitment h2 { font-size: var(--text-base); font-weight: 700; }
.order-cta { display: grid; gap: 10px; padding-top: var(--space-4); border-top: 1px solid var(--line); }
.order-cta .contact-btn { background: var(--surface-2); color: var(--ink); }

.product-rating { display: grid; gap: 10px; padding-block: 14px; border-block: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + var(--space-6)); }
.rate-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 14px; }
.star-input { margin: 0; padding: 0; border: 0; }
.star-input legend { margin-bottom: 4px; padding: 0; font-size: var(--text-sm); font-weight: 700; }
/* Inputs run 5→1 in the markup and row-reverse puts 1 on the right, so
   "this star and the ones after it" (~) are the lower stars. */
.star-input__stars { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.star-input__stars input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.star-input__stars > label.star-input__star { padding: 2px; border-radius: 6px; line-height: 0; color: #d4d7dd; cursor: pointer; }
.star-input__stars svg { width: 30px; height: 30px; fill: currentColor; transition: transform .1s; }
.star-input__stars input:checked ~ label { color: var(--gold-500); }
.star-input__stars:hover > label.star-input__star { color: #d4d7dd; }
.star-input__stars > label.star-input__star:hover,
.star-input__stars > label.star-input__star:hover ~ label.star-input__star { color: var(--gold-500); }
.star-input__stars > label.star-input__star:hover svg { transform: scale(1.12); }
.star-input__stars input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Brand and car model pages */
.brand-head { display: flex; align-items: center; gap: var(--space-5); margin-bottom: var(--space-2); }
.brand-head__logo { width: 88px; height: 88px; object-fit: contain; }
.brand-head .meta { margin-top: 4px; font-size: var(--text-sm); }
.brand-head__links { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.grid--models { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.model-card__media { aspect-ratio: 4 / 3; display: grid; place-items: center; padding: var(--space-3); background: var(--surface-2); }
.model-card__media img { width: 100%; height: 100%; object-fit: contain; }
.placeholder--car { width: 46%; max-width: 96px; fill: none; stroke: #c3c8d0; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.model-card__body { display: grid; gap: 2px; padding: 10px 14px 14px; }
.model-card__title { font-size: var(--text-md); font-weight: 800; }
.model-card--empty { opacity: .7; }

/* Articles */
.article-detail { display: grid; justify-items: start; gap: 10px; max-width: 800px; margin-inline: auto; }
.article-detail__title { font-size: clamp(1.4rem, 3.4vw, 2.2rem); font-weight: 800; }
.article-detail__cover { width: 100%; margin-block: var(--space-2); border-radius: var(--radius); }
.prose { line-height: 2; overflow-wrap: anywhere; }
.prose > * + * { margin-top: 1em; }
.prose h2, .prose h3 { margin-top: 1.4em; }
.prose img { height: auto; border-radius: var(--radius-sm); }
.prose a { color: var(--accent-dark); text-decoration: underline; }

/* Sport / accessory browser */
.browser-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.kind-switch { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); box-shadow: var(--shadow-xs); }
.kind-switch a { display: inline-flex; align-items: center; min-height: 36px; padding-inline: 18px; border-radius: var(--radius-pill); color: var(--muted); font-size: var(--text-sm); font-weight: 700; transition: background-color var(--dur-2), color var(--dur-2); }
.kind-switch a.is-active { background: var(--accent); color: #fff; }

.browser { display: grid; align-items: start; gap: var(--gap); }
@media (min-width: 900px) {
  .browser { grid-template-columns: 290px minmax(0, 1fr); }
  .browser__cars { position: sticky; top: calc(var(--header-h) + var(--space-3)); max-height: calc(100vh - var(--header-h) - var(--space-6)); overflow-y: auto; }
}
.browser__cars.panel { padding: var(--space-3); }
.browser__toggle { display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: var(--tap); padding: 6px 4px; border: 0; background: none; color: var(--ink); text-align: start; cursor: pointer; }
.browser__toggle-label { color: var(--muted); font-size: var(--text-sm); }
.browser__toggle::after { content: ""; margin-inline-start: auto; width: 8px; height: 8px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform var(--dur-2); }
.browser__toggle[aria-expanded="true"]::after { transform: rotate(-135deg); }

.car-picker { display: none; margin-top: 10px; }
.car-picker.is-open { display: block; }
@media (min-width: 900px) {
  .browser__toggle { display: none; }
  .car-picker { display: block; margin-top: 0; }
}
.car-picker ul { list-style: none; margin: 0; padding: 0; }
.car-picker__search { width: 100%; min-height: var(--tap); padding: .6rem .9rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--ink); font: inherit; }
.car-picker__search:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.car-picker__fits { display: grid; gap: 2px; margin-block: 10px !important; padding-bottom: 10px !important; border-bottom: 1px solid var(--line); }
.car-picker__heading { padding: 2px 10px 6px; color: var(--muted); font-size: var(--text-xs); font-weight: 700; }
.car-picker__note { padding: 6px 10px; color: var(--muted); font-size: var(--text-sm); }
.car-picker a { display: flex; align-items: center; gap: var(--space-2); padding: 7px 10px; border-radius: 10px; font-size: .9rem; transition: background-color var(--dur-2); }
.car-picker a:hover { background: var(--surface-2); }
.car-picker a small { display: block; color: var(--muted); font-size: .72rem; line-height: 1.4; }
.car-picker a.is-active { background: var(--accent-soft); color: var(--accent-dark); font-weight: 700; }
.car-picker a.is-empty { color: var(--muted); }
.count { min-width: 26px; margin-inline-start: auto; padding: 0 8px; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--muted); font-size: var(--text-xs); text-align: center; }
.car-picker a.is-active .count { background: #fff; }
.car-picker summary { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; font-size: .92rem; font-weight: 700; list-style: none; cursor: pointer; transition: background-color var(--dur-2); }
.car-picker summary::-webkit-details-marker { display: none; }
.car-picker summary::after { content: ""; margin-inline-start: auto; width: 7px; height: 7px; border: solid var(--muted); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform var(--dur-2); }
.car-picker details[open] > summary::after { transform: rotate(-135deg); }
.car-picker summary:hover { background: var(--surface-2); }
.car-picker summary img { width: 28px; height: 28px; object-fit: contain; }
.brand-dot { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2); color: var(--muted); font-size: .8rem; }
.car-picker details ul { padding-inline-start: 26px; padding-block: 2px 6px; }

.filters { display: grid; gap: var(--space-3); padding: 14px; }
.filters__search { display: flex; gap: var(--space-2); }
.filters__search input { flex: 1; min-width: 0; }
.filters input[type="search"], .filters select { min-height: var(--tap); padding: .55rem .9rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--ink); font: inherit; }
.filters__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; font-size: var(--text-sm); }
.filters__row label { display: inline-flex; align-items: center; gap: var(--space-2); }
.check input { width: 18px; height: 18px; accent-color: var(--accent); }
.filters__clear { margin-inline-start: auto; color: var(--accent-dark); font-weight: 700; }

.results-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-block: 18px 12px; }
.results-head h2 { font-size: 1.05rem; font-weight: 800; }
.results-head h2 small { color: var(--muted); font-size: var(--text-xs); font-weight: 500; }
.browser__results .grid { grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); }

/* 7 · Motion ================================================================ */

@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes sheet-up { from { transform: translateY(100%); } }
@keyframes shimmer { to { background-position: -200% 0; } }

/* Sections fade up as they scroll into view; their cards follow in a short stagger.
   "backwards" fill only applies before each animation starts, so hover and
   press transforms keep working afterwards. */
.js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 560ms var(--ease-out), transform 560ms var(--ease-out); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }
.js [data-reveal].is-visible .rail > * { animation: rise 520ms var(--ease-out) backwards; }
.js [data-reveal].is-visible .rail > :nth-child(2) { animation-delay: 60ms; }
.js [data-reveal].is-visible .rail > :nth-child(3) { animation-delay: 120ms; }
.js [data-reveal].is-visible .rail > :nth-child(4) { animation-delay: 180ms; }
.js [data-reveal].is-visible .rail > :nth-child(5) { animation-delay: 240ms; }
.js [data-reveal].is-visible .rail > :nth-child(n+6) { animation-delay: 300ms; }

/* Banner text eases in on first paint. */
.hero__content > * { animation: rise 600ms var(--ease-out) backwards; }
.hero__content > :nth-child(2) { animation-delay: 80ms; }
.hero__content > :nth-child(3) { animation-delay: 160ms; }

/* Image placeholders shimmer until the image has loaded, then it fades in. */
.js img[data-fade] { opacity: 0; transition: opacity var(--dur-3) ease; }
.js img[data-fade].is-loaded { opacity: 1; }
.js .media:has(> img[data-fade]:not(.is-loaded)) {
  background-image: linear-gradient(90deg, transparent 0%, rgb(255 255 255 / .7) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: shimmer 1.3s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* 8 · Commerce: forms, cart, checkout, orders, account ======================= */

@keyframes pop { from { opacity: 0; transform: scale(.6); } }
@keyframes pulse { 50% { box-shadow: 0 0 0 9px rgb(242 101 34 / .08); } }

.container--narrow { max-width: 560px; }
.page-title--spaced { margin-block: var(--space-4); }
.page-lead { margin-top: 4px; font-size: var(--text-sm); }
.btn--block { width: 100%; }
.btn .icon { width: 20px; height: 20px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; }
.message--warning { background: #fff5e6; color: #9a5a00; }
.message--info { background: #eaf2ff; color: #1f4f8f; }

/* Header actions and count badges */
.header-actions { margin-inline-start: auto; display: flex; align-items: center; gap: var(--space-2); }
.header-actions .header-phone { margin-inline-start: 0; }
.header-icon { position: relative; display: none; place-items: center; width: var(--tap); height: var(--tap); border: 1px solid var(--line); border-radius: 50%; color: var(--dark); transition: border-color var(--dur-2), color var(--dur-2); }
.header-icon .icon { width: 22px; height: 22px; }
.header-icon:hover, .header-icon.is-active { border-color: var(--accent); color: var(--accent); }
@media (min-width: 900px) { .header-icon--desktop { display: grid; } }
.count-badge { position: absolute; top: -4px; inset-inline-end: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--sale); color: #fff; font-size: 10px; font-weight: 800; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px #fff; animation: pop 350ms var(--ease-out); }
.tabbar__icon { position: relative; display: grid; place-items: center; }
.tabbar__icon .count-badge { top: -6px; inset-inline-end: -10px; }

/* Floating order-tracking button (homepage) */
.fab {
  position: fixed; z-index: 26; inset-inline-end: var(--gutter);
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 14px);
  display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding-inline: 16px 18px;
  border-radius: var(--radius-pill); background: var(--dark); color: #fff; font-size: var(--text-sm); font-weight: 700;
  /* White ring keeps it distinct over dark sections such as the marquee. */
  box-shadow: 0 0 0 2px rgb(255 255 255 / .9), 0 12px 26px -10px rgb(15 31 56 / .6);
  transition: transform var(--dur-1) var(--ease-out), background-color var(--dur-2);
}
.fab .icon { width: 22px; height: 22px; color: var(--accent); }
.fab:active { transform: scale(.95); }
@media (hover: hover) { .fab:hover { background: var(--navy-700); } }
@media (min-width: 900px) { .fab { bottom: var(--space-6); } }

/* Forms */
.form-stack { display: grid; gap: var(--space-4); }
.form-row { display: grid; gap: var(--space-4); }
@media (min-width: 600px) {
  .form-row { grid-template-columns: 1fr 1fr; }
  .form-row--3 { grid-template-columns: repeat(3, 1fr); }
}
.form-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.field { display: grid; gap: 6px; min-width: 0; }
.field__label { color: var(--ink-2); font-size: var(--text-sm); font-weight: 700; }
.field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 10px 14px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink);
  font: inherit; font-size: 16px; /* 16px stops iOS zooming into the field */
  transition: border-color var(--dur-2), box-shadow var(--dur-2);
}
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgb(242 101 34 / .18); }
.field--error input, .field--error select, .field--error textarea { border-color: var(--sale); }
.field__help { color: var(--muted); font-size: var(--text-xs); }
.field__error { color: #c0263a; font-size: var(--text-xs); font-weight: 700; }
.field__static { display: flex; align-items: center; min-height: 48px; padding-inline: 14px; border-radius: var(--radius-sm); background: var(--surface-2); }
.check { display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap); font-size: var(--text-sm); cursor: pointer; }
.notice { padding: 12px 14px; border-radius: var(--radius-sm); font-size: var(--text-sm); line-height: 1.8; }
.notice--error { background: #fdecee; color: #b4232f; }
.notice--warning { background: #fff5e6; color: #9a5a00; }
.notice--action { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.link-btn { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 4px; border: 0; background: none; color: var(--accent-dark); font: inherit; font-size: var(--text-sm); font-weight: 700; cursor: pointer; }
.link-btn .icon { width: 18px; height: 18px; }
.link-btn--danger { color: #c0263a; }

/* Checkout steps */
.steps { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: flex; align-items: center; gap: var(--space-2); color: var(--muted); font-size: var(--text-xs); font-weight: 700; }
.steps__item { flex: 1; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.steps__item:last-child { flex: none; }
.steps__item:not(:last-child)::after { content: ""; flex: 1; height: 2px; border-radius: 2px; background: var(--line); }
.steps__item.is-done { color: var(--ink); }
.steps__item.is-done:not([aria-current]):not(:last-child)::after { background: var(--accent); }
.steps__dot { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--line); color: var(--muted); }
.steps__item.is-done .steps__dot { background: var(--accent); color: #fff; }

/* Cart and checkout layout */
.checkout-layout { display: grid; align-items: start; gap: var(--space-4); }
@media (min-width: 900px) {
  .checkout-layout { grid-template-columns: minmax(0, 1fr) 360px; gap: var(--space-6); }
  .summary { position: sticky; top: calc(var(--header-h) + var(--space-4)); }
}
.cart-items, .checkout-main { display: grid; gap: var(--space-3); }
.cart-item { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3); transition: border-color var(--dur-2); }
.cart-item--problem { border-color: rgb(225 29 72 / .45); background: #fffafa; }
.cart-item__media { display: grid; place-items: center; width: 84px; height: 84px; overflow: hidden; border-radius: var(--radius-sm); background: var(--surface-2); }
.cart-item__media img { width: 100%; height: 100%; object-fit: contain; }
.cart-item__body { display: grid; align-content: start; gap: 4px; min-width: 0; }
.cart-item__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--text-sm); font-weight: 700; line-height: 1.6; }
.cart-item .price { flex-direction: row; align-items: baseline; gap: 8px; margin: 0; padding: 0; }
.cart-item__actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: 6px; }
.cart-item__total { grid-column: 1 / -1; display: flex; justify-content: space-between; padding-top: var(--space-2); border-top: 1px dashed var(--line); font-weight: 800; }
.cart-item__total::before { content: "جمع"; color: var(--muted); font-weight: 500; }
.cart-item__total small { color: var(--muted); font-size: .7rem; font-weight: 500; }
@media (min-width: 600px) {
  .cart-item { grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; }
  .cart-item__media { width: 96px; height: 96px; }
  .cart-item__total { grid-column: auto; padding: 0; border: 0; }
  .cart-item__total::before { content: none; }
}

.qty { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--surface); }
.qty__btn { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; color: var(--accent-dark); font-size: 1.25rem; font-weight: 700; cursor: pointer; transition: background-color var(--dur-2), transform var(--dur-1) var(--ease-out); }
.qty__btn:active { transform: scale(.88); background: var(--accent-soft); }
.qty__btn .icon { width: 18px; height: 18px; }
.qty__value { min-width: 28px; font-weight: 800; text-align: center; }
.qty--input .qty__btn { width: 44px; height: 48px; }
.qty__input { width: 44px; min-height: 44px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 16px; font-weight: 800; text-align: center; -moz-appearance: textfield; }
.qty__input::-webkit-outer-spin-button, .qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.summary { display: grid; gap: var(--space-3); }
.summary__title { font-size: var(--text-md); font-weight: 800; }
.summary__items { list-style: none; margin: 0; padding: 0 0 var(--space-3); display: grid; gap: 8px; border-bottom: 1px solid var(--line); font-size: var(--text-sm); }
.summary__items li { display: flex; justify-content: space-between; gap: 12px; }
.summary__hint { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--ink-2); font-size: var(--text-xs); font-weight: 700; }
.summary__hint .icon { width: 18px; height: 18px; color: var(--accent); }
.summary__hint--ok { background: #e8f7ee; color: #146c3a; }
.summary__hint--ok .icon { color: #146c3a; }
.summary__secure { color: var(--muted); font-size: var(--text-xs); text-align: center; }

/* Free-shipping progress: how close the cart is to the amount threshold. */
.ship-bar { display: grid; gap: 8px; padding: 12px; border-radius: var(--radius-sm); background: var(--surface-2); }
.ship-bar__track { height: 8px; border-radius: var(--radius-pill); background: var(--line); overflow: hidden; }
.ship-bar__fill {
  display: block; height: 100%; border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--accent), var(--accent-dark));
  transition: width var(--dur-3) var(--ease-out);
}
.ship-bar__text { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: var(--text-xs); font-weight: 700; }
.ship-bar__text .icon { flex: none; width: 18px; height: 18px; color: var(--accent); }
.ship-bar__text strong { color: var(--accent-dark); }
.ship-bar--done { background: #e8f7ee; }
.ship-bar--done .ship-bar__fill { background: #1a9350; }
.ship-bar--done .ship-bar__text, .ship-bar--done .ship-bar__text .icon { color: #146c3a; }
@media (prefers-reduced-motion: reduce) { .ship-bar__fill { transition: none; } }

/* Checkout cross-sell: a product card with a one-click add under it. The card
   takes the leftover height so buttons line up however tall the titles and
   prices run (a sale price adds a line). */
.suggest-card { display: grid; grid-template-rows: 1fr auto; gap: 8px; }
.suggest-card .btn { gap: 6px; }
.suggest-card .btn .icon { width: 16px; height: 16px; }

/* The cross-sell sheet sizes its rail to the dialog, not the viewport: the
   dialog stops at 560px, so the viewport-based column counts are far too many. */
.sheet--suggest .sheet__body { max-height: 88vh; overflow-y: auto; }
.sheet--suggest .rail { --cols: 1.7; margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; }
@media (min-width: 600px) { .sheet--suggest .rail { --cols: 2.2; } }
.sheet--suggest .sheet__lead strong { color: var(--accent-dark); }
.sheet--suggest .sheet__head { gap: var(--space-2); }
.sheet--suggest .sheet__title { flex: 1; }  /* groups the rail arrows next to the close button */
.totals { margin: 0; display: grid; gap: 8px; font-size: var(--text-sm); }
.totals__row { display: flex; justify-content: space-between; gap: 12px; }
.totals dt { color: var(--muted); }
.totals dd { margin: 0; font-weight: 700; }
.totals small { color: var(--muted); font-size: .7rem; font-weight: 500; }
.totals__row--total { padding-top: 10px; border-top: 1px solid var(--line); font-size: var(--text-md); }
.totals__row--total dt { color: var(--ink); font-weight: 800; }
.totals__row--total dd { font-weight: 800; }
.totals__free { color: #146c3a; font-weight: 800; }

/* Sticky action bar above the tab bar (phones) */
.sticky-cta {
  position: fixed; inset-inline: 0; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); z-index: 25;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: 10px var(--gutter);
  background: rgb(255 255 255 / .96); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgb(15 31 56 / .08);
  animation: sheet-up var(--dur-3) var(--ease-out);
}
.sticky-cta__total { display: grid; line-height: 1.35; }
.sticky-cta__total strong { font-size: var(--text-md); font-weight: 800; }
.sticky-cta__total small { color: var(--muted); font-size: .7rem; font-weight: 500; }
.sticky-cta .price { margin: 0; padding: 0; }
@media (max-width: 899px) { body:has(.sticky-cta) { padding-bottom: calc(var(--tabbar-h) + 76px + env(safe-area-inset-bottom)); } }
@media (min-width: 900px) { .sticky-cta { display: none; } }

/* Address choice at checkout */
.choice-list { display: grid; gap: 10px; }
.choice { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border: 1.5px solid var(--line); border-radius: var(--radius); cursor: pointer; transition: border-color var(--dur-2), background-color var(--dur-2); }
.choice input { flex: none; width: 20px; height: 20px; margin-top: 3px; accent-color: var(--accent); }
.choice:has(input:checked) { border-color: var(--accent); background: rgb(242 101 34 / .04); }
.choice__body { display: grid; gap: 2px; font-size: var(--text-sm); }
.choice__body strong { font-size: var(--text-base); }

/* Panels */
.panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.panel__title { display: flex; align-items: center; gap: 8px; font-size: var(--text-md); font-weight: 800; }
.panel > .panel__title, .panel > form > .panel__title { margin-bottom: var(--space-3); }
.panel__title .icon { width: 20px; height: 20px; color: var(--accent); }
.panel--row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.panel-grid { display: grid; gap: var(--space-4); }
@media (min-width: 700px) { .panel-grid { grid-template-columns: 1fr 1fr; } }
.empty--compact { padding: var(--space-6) var(--space-4); }
.empty--icon { display: grid; justify-items: center; gap: var(--space-3); }
.empty__icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--surface-2); color: var(--muted); }
.empty__icon .icon { width: 30px; height: 30px; }

/* Payment result */
.result { display: grid; justify-items: center; gap: var(--space-3); margin-top: var(--space-4); padding-block: var(--space-10); text-align: center; }
.result__icon { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); animation: pop 500ms var(--ease-out) backwards; }
.result__icon .icon { width: 36px; height: 36px; stroke-width: 2.2; }
.result--success .result__icon { background: #e8f7ee; color: #15803d; }
.result--failed .result__icon { background: #fdecee; color: #c0263a; }
.result__title { font-size: var(--text-xl); font-weight: 800; }
.result__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-2); }

/* Order status, progress and shipment */
.status { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--ink-2); font-size: var(--text-xs); font-weight: 800; white-space: nowrap; }
.status--pending { background: #f1f3f6; color: #4b5563; }
.status--paid { background: rgb(27 51 88 / .1); color: var(--navy-700); }
.status--processing { background: #eaf2ff; color: #1f5fae; }
.status--shipped { background: var(--accent-soft); color: var(--accent-dark); }
.status--delivered { background: #e8f7ee; color: #15803d; }
.status--cancelled, .status--failed { background: #fdecee; color: #c0263a; }

.progress { list-style: none; margin: var(--space-4) 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.progress__step { position: relative; display: grid; justify-items: center; gap: 6px; color: var(--muted); font-size: var(--text-xs); font-weight: 700; text-align: center; }
/* Connector from this step to the next one (towards inline-end, i.e. left in RTL). */
.progress__step::before { content: ""; position: absolute; top: 9px; inset-inline-start: 50%; width: 100%; height: 3px; background: var(--line); }
.progress__step:last-child::before { display: none; }
.progress__step.is-done:not(.is-current)::before { background: var(--accent); }
.progress__dot { position: relative; width: 20px; height: 20px; border: 3px solid var(--line); border-radius: 50%; background: var(--surface); }
.progress__step.is-done { color: var(--ink); }
.progress__step.is-done .progress__dot { border-color: var(--accent); background: var(--accent); }
.progress__step.is-current .progress__dot { box-shadow: 0 0 0 5px rgb(242 101 34 / .18); animation: pulse 2.4s ease-in-out infinite; }

.shipment { display: grid; gap: var(--space-3); margin-top: var(--space-3); padding: var(--space-3); border-radius: var(--radius); background: var(--surface-2); }
.shipment__info { margin: 0; display: grid; gap: 8px; }
.shipment__info div { display: flex; justify-content: space-between; gap: 12px; font-size: var(--text-sm); }
.shipment__info dt { color: var(--muted); }
.shipment__info dd { margin: 0; font-weight: 800; }
.shipment__code { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; letter-spacing: .5px; user-select: all; }
.shipment__pending { display: flex; align-items: center; gap: 8px; margin-top: var(--space-3); }
.shipment__pending .icon { width: 18px; height: 18px; color: var(--accent); }

.track-form { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.track-form[aria-busy="true"] .btn { opacity: .7; }
.track-result:empty { display: none; }
.track-result { margin-top: var(--space-4); animation: rise var(--dur-3) var(--ease-out) backwards; }
.track-card { padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius); }
.track-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }

/* Sign in / sign up */
.auth { margin-top: var(--space-6); }
.auth__icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: var(--space-3); border-radius: var(--radius); background: var(--accent-soft); color: var(--accent); }
.auth__icon .icon { width: 26px; height: 26px; }
.auth .form-stack { margin-top: var(--space-5); }
.auth__switch { margin-top: var(--space-4); color: var(--muted); font-size: var(--text-sm); text-align: center; }
.auth__switch a { color: var(--accent-dark); font-weight: 700; }

/* Account area */
.account-head { display: flex; align-items: center; gap: var(--space-3); margin-block: var(--space-5) var(--space-4); }
.account-head--simple { flex-wrap: wrap; justify-content: space-between; }
.account-head__avatar { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--dark); color: #fff; font-size: var(--text-lg); font-weight: 800; }
.account-layout { display: grid; align-items: start; gap: var(--space-4); }
.account-main { display: grid; gap: var(--space-4); min-width: 0; }
.account-nav { display: flex; gap: var(--space-2); margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter); overflow-x: auto; scrollbar-width: none; }
.account-nav::-webkit-scrollbar { display: none; }
.account-nav form { display: contents; }
.account-nav a, .account-nav button {
  display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0 14px;
  border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface);
  color: var(--ink-2); font: inherit; font-size: var(--text-sm); font-weight: 700; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-2), color var(--dur-2), border-color var(--dur-2);
}
.account-nav .icon { width: 20px; height: 20px; }
.account-nav a.is-active { border-color: transparent; background: var(--accent-soft); color: var(--accent-dark); }
.account-nav button { color: #c0263a; }
@media (min-width: 900px) {
  .account-layout { grid-template-columns: 240px minmax(0, 1fr); gap: var(--space-6); }
  .account-nav { position: sticky; top: calc(var(--header-h) + var(--space-4)); flex-direction: column; margin: 0; padding: var(--space-2); overflow: visible; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
  .account-nav a, .account-nav button { width: 100%; border-color: transparent; border-radius: var(--radius-sm); }
  .account-nav a:hover { background: var(--surface-2); }
}

.order-rows { display: grid; }
.panel.order-rows { padding-block: var(--space-1); }
.order-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: var(--space-3) 0; border-bottom: 1px solid var(--line); transition: opacity var(--dur-2); }
.order-row:last-child { border-bottom: 0; }
.order-row:active { opacity: .7; }
.order-row__main, .order-row__side { display: grid; gap: 2px; }
.order-row__side { justify-items: end; }
.order-row__total { font-size: var(--text-sm); font-weight: 800; }
.order-row__total small { color: var(--muted); font-size: .7rem; font-weight: 500; }
.order-row__track { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: var(--text-xs); }
.order-row__track .icon { width: 16px; height: 16px; color: var(--accent); }
.order-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.line-items { list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.line-item { display: flex; justify-content: space-between; gap: 12px; padding-block: 10px; border-bottom: 1px solid var(--line); font-size: var(--text-sm); }
.line-item__name { display: grid; gap: 2px; font-weight: 700; }
.line-item__total { font-weight: 800; white-space: nowrap; }
.line-item__total small { color: var(--muted); font-size: .7rem; font-weight: 500; }
.kv { margin: 0; display: grid; gap: 8px; font-size: var(--text-sm); }
.kv div { display: flex; justify-content: space-between; gap: 12px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-weight: 700; }
.order-help { text-align: center; }

.address-cards { display: grid; gap: var(--space-3); }
@media (min-width: 700px) { .address-cards { grid-template-columns: 1fr 1fr; } }
.address-card { display: grid; align-content: start; gap: 6px; }
.address-card.is-default { border-color: rgb(21 128 61 / .35); }
.address-card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.address-card__title { display: flex; align-items: center; gap: 6px; font-size: var(--text-md); font-weight: 800; }
.address-card__title .icon { width: 18px; height: 18px; color: var(--accent); }
.address-card__actions { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--line); }
.address-card__actions form { display: contents; }

/* Product page buy box */
.buy-box { display: grid; gap: 8px; padding-block: var(--space-2); }
.buy-box__row { display: flex; gap: var(--space-2); }
.buy-box__submit { flex: 1; }
.buy-box__stock { color: #b45309; font-size: var(--text-xs); font-weight: 700; }