/* ============================================================
   ORVENA - Page compositions
   Hero, editorial blocks, brand tiles, PDP, checkout, and the
   design-system playground chrome.
   ============================================================ */

/* ---------- Logo ---------- */
.logo { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--color-ink); }
.logo__mark { width: var(--logo-size, 26px); height: var(--logo-size, 26px); flex: 0 0 auto; }
.logo__word {
  font-size: calc(var(--logo-size, 26px) * 0.78);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-heading);
  line-height: 1;
}
/* The Arabic wordmark نور sits optically lower than Latin caps */
:lang(ar) .logo__word, :lang(fa) .logo__word { font-size: calc(var(--logo-size, 26px) * 0.92); letter-spacing: 0; }

/* ---------- Header extras ---------- */
.header__burger, .header__searchbtn { display: inline-flex; }
@media (min-width: 1024px) { .header__burger, .header__searchbtn { display: none; } }

.lang-switch {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--fs-caption);
  color: var(--color-text-secondary);
  transition: color var(--dur-fast) var(--ease-out);
}
.lang-switch:hover { color: var(--color-accent); }

.lang-option {
  width: 100%;
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
  min-width: 0;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-align: start;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.lang-option:hover { border-color: var(--color-border-strong); background: var(--color-surface); }
.lang-option.is-active { border-color: var(--color-ink); background: var(--color-surface); }
.lang-option__name { font-weight: var(--fw-semibold); }
.lang-option__meta {
  font-size: var(--fs-caption); color: var(--color-text-muted);
  font-family: var(--font-numeric);
  min-width: 0; overflow-wrap: anywhere;
}
.lang-option svg { width: 18px; height: 18px; margin-inline-start: auto; color: var(--color-accent); }

/* ============================================================
   HERO
   The campaign frame is a full-bleed composition; the copy block
   sits on the inline-start side so it lands where the eye starts
   in each direction with no per-language override.
   ============================================================ */
.hero { position: relative; background: var(--color-surface); overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__media svg { width: 100%; height: 100%; object-fit: cover; }
/* Campaign compositions are built with the subject mass on one side and
   negative space on the other. The copy block sits at inline-start, so in
   RTL the artwork must mirror too - otherwise the headline lands on top of
   the busiest part of the image. This is art direction, not a bidi flip:
   it applies to abstract/product compositions only, never to photography
   containing text, faces or hands. */
[dir="rtl"] .hero__media svg,
[dir="rtl"] .promo-band__media svg { transform: scaleX(-1); }
.hero__inner {
  position: relative;
  display: flex; align-items: center;
  min-height: 460px;
  padding-block: var(--space-11);
}
.hero__copy { max-width: 30rem; }
:lang(fa) .hero__copy { max-width: 32rem; }
.hero__title { margin-block: var(--space-4) var(--space-5); white-space: pre-line; }
.hero__body { color: var(--color-text-secondary); margin-block-end: var(--space-8); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }
@media (min-width: 768px)  { .hero__inner { min-height: 540px; } }
@media (min-width: 1280px) { .hero__inner { min-height: 620px; padding-block: var(--space-13); } }

/* Secondary campaign tiles beside the hero */
.hero-split { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--space-4); }
@media (min-width: 1024px) { .hero-split { grid-template-columns: 2fr 1fr; } }
.hero-mini {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 200px;
  padding: var(--space-7);
  border-radius: var(--radius-md);
  overflow: hidden;
  color: var(--color-text);
}
.hero-mini__media { position: absolute; inset: 0; }
.hero-mini__media svg { width: 100%; height: 100%; object-fit: cover; }
.hero-mini__body { position: relative; }
.hero-mini__title { font-size: var(--fs-h3); font-weight: var(--fw-bold); white-space: pre-line; margin-block: var(--space-2) var(--space-4); }
.hero-mini__link { font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); display: inline-flex; align-items: center; gap: var(--space-2); }
.hero-mini__link svg { width: 15px; height: 15px; }

/* Hero dots + slide indicators */
.hero__dots { position: absolute; inset-block-end: var(--space-7); inset-inline-start: 50%; transform: translateX(-50%); }
[dir="rtl"] .hero__dots { transform: translateX(50%); }

/* ============================================================
   CATEGORY STRIP
   ============================================================ */
.cat-strip { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--space-6) var(--space-4); }
@media (min-width: 768px)  { .cat-strip { grid-template-columns: repeat(8, minmax(0,1fr)); gap: var(--space-5); } }

/* ============================================================
   CONCERN / SKIN-TYPE PILLS
   ============================================================ */
.concern-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-4); }
@media (min-width: 768px)  { .concern-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.concern {
  position: relative;
  display: flex; align-items: center; gap: var(--space-5);
  padding: var(--space-5);
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.concern:hover { border-color: var(--color-ink); transform: translateY(-2px); }
.concern__frame { flex: 0 0 48px; height: 48px; border-radius: var(--radius-pill); overflow: hidden; }
.concern__label { font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); }
.concern__arrow { margin-inline-start: auto; color: var(--color-text-muted); }
.concern__arrow svg { width: 16px; height: 16px; }

/* ============================================================
   PROMOTIONAL BANNER
   ============================================================ */
.promo-band {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-ink);
  color: var(--color-text-inverse);
}
.promo-band__media { position: absolute; inset: 0; opacity: .32; }
.promo-band__media svg { width: 100%; height: 100%; object-fit: cover; }
.promo-band__inner {
  position: relative;
  display: flex; flex-direction: column; gap: var(--space-6);
  padding: var(--space-10) var(--space-7);
  text-align: center;
  align-items: center;
}
@media (min-width: 768px) {
  .promo-band__inner { flex-direction: row; text-align: start; padding: var(--space-11) var(--space-10); }
  .promo-band__actions { margin-inline-start: auto; }
}
.promo-band__title { font-size: var(--fs-h2); font-weight: var(--fw-bold); }
.promo-band__sub { color: rgba(255,255,255,.72); margin-block-start: var(--space-3); font-size: var(--fs-body); }

/* ============================================================
   BRAND TILES
   ============================================================ */
.brand-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-4); }
@media (min-width: 600px)  { .brand-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1024px) { .brand-grid { grid-template-columns: repeat(6, minmax(0,1fr)); } }
.brand-tile {
  display: block;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-background);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.brand-tile:hover { border-color: var(--color-ink); }
.brand-tile__media { aspect-ratio: 5 / 3; }
.brand-tile__media svg { width: 100%; height: 100%; }
.brand-tile__body { padding: var(--space-4) var(--space-5) var(--space-5); text-align: center; }
.brand-tile__name { font-size: var(--fs-body-sm); font-weight: var(--fw-bold); }
.brand-tile__count { font-size: var(--fs-caption); color: var(--color-text-muted); font-family: var(--font-numeric); }

/* ============================================================
   EDITORIAL
   ============================================================ */
.editorial-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--space-8); }
@media (min-width: 768px) { .editorial-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--grid-gap); } }
.article-card { display: block; }
.article-card__frame {
  aspect-ratio: var(--ratio-editorial);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-block-end: var(--space-5);
  background: var(--color-surface);
}
.article-card__frame svg { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.article-card:hover .article-card__frame svg { transform: scale(1.04); }
.article-card__kicker { font-size: var(--fs-caption); font-weight: var(--fw-bold); color: var(--color-accent); margin-block-end: var(--space-2); }
.article-card__title { font-size: var(--fs-h4); font-weight: var(--fw-bold); margin-block-end: var(--space-3); }
.article-card__sub { font-size: var(--fs-body-sm); color: var(--color-text-secondary); }

/* ============================================================
   PDP
   ============================================================ */
.gallery { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--space-4); }
@media (min-width: 768px) { .gallery { grid-template-columns: 76px minmax(0,1fr); } }
.gallery__thumbs { display: flex; gap: var(--space-3); order: 2; overflow-x: auto; scrollbar-width: none; }
.gallery__thumbs::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .gallery__thumbs { order: 0; flex-direction: column; overflow: visible; } }
.gallery__thumb {
  flex: 0 0 62px;
  aspect-ratio: 1/1;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
  transition: border-color var(--dur-fast) var(--ease-out);
}
@media (min-width: 768px) { .gallery__thumb { flex: none; width: 100%; } }
.gallery__thumb[aria-current="true"] { border-color: var(--color-ink); }
.gallery__main {
  position: relative;
  /* Same 4:5 as the product card frame. A 1:1 gallery left a 361px image
     sitting beside a 923px information column at 1024px - the two halves of
     a 50/50 layout have to carry comparable weight. */
  aspect-ratio: var(--ratio-product);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
}
.gallery__main svg { width: 100%; height: 100%; object-fit: cover; }

/* The shots are stacked and cross-faded rather than shown one at a time.
   Keeping every one in layout is what lets the browser pick the right
   derivative for each: an element with no box resolves `sizes` against zero
   and gets handed the smallest file there is. */
.gallery__main .pimg {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
}
.gallery__main .pimg.is-active {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.gallery__zoom {
  position: absolute;
  inset-block-end: var(--space-5); inset-inline-end: var(--space-5);
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.9);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
}
.gallery__zoom svg { width: 18px; height: 18px; }

.pdp__brand { font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--color-accent-hover); }
.pdp__title { font-size: var(--fs-h2); line-height: var(--lh-h2); margin-block: var(--space-3) var(--space-5); }
.pdp__benefits { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block: var(--space-6); }
.pdp__coupon {
  display: flex; align-items: flex-start; gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-accent-soft);
  border-radius: var(--radius-md);
  font-size: var(--fs-body-sm);
}
.pdp__coupon svg { width: 18px; height: 18px; color: var(--color-accent-hover); flex: 0 0 auto; }
.pdp__actions { display: flex; gap: var(--space-4); margin-block-start: var(--space-7); }
.pdp__actions .btn { flex: 1 1 auto; }
.pdp__actions .btn-icon {
  flex: 0 0 auto; width: var(--control-h-lg); height: var(--control-h-lg);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
}
.pdp__trust { display: flex; flex-direction: column; gap: var(--space-4); margin-block-start: var(--space-8); }
.pdp__trustrow { display: flex; align-items: center; gap: var(--space-4); font-size: var(--fs-body-sm); color: var(--color-text-secondary); }
.pdp__trustrow svg { width: 18px; height: 18px; color: var(--color-accent); flex: 0 0 auto; }

.swatches { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.swatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding-inline: var(--space-5);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  font-size: var(--fs-body-sm);
  font-family: var(--font-numeric);
  transition: all var(--dur-fast) var(--ease-out);
}
.swatch:hover { border-color: var(--color-ink); }
/* A size that is stated rather than chosen: it keeps the chip's shape so the
   page does not change layout, and loses the affordances — no pointer, no
   hover — that would promise it can be pressed. */
.swatch.is-static { cursor: default; border-color: var(--color-ink); background: var(--color-ink); color: #fff; }
.swatch.is-static:hover { border-color: var(--color-ink); }
.swatch[aria-pressed="true"] { border-color: var(--color-ink); background: var(--color-ink); color: #fff; }
.swatch:disabled { color: var(--color-text-muted); background: var(--color-surface-alt); text-decoration: line-through; cursor: not-allowed; }

/* The size being viewed, when there are others to switch to. Same filled chip
   as a size that is merely stated — the difference is its neighbours. */
.swatch.is-active { cursor: default; border-color: var(--color-ink); background: var(--color-ink); color: #fff; }
.swatch.is-active:hover { border-color: var(--color-ink); }

/* A size that exists and has nothing on the shelf. Still a link, because its
   page is where a shopper finds out when it is back. :disabled cannot do this
   — it only applies to form controls, and this is an anchor. */
.swatch.is-disabled { color: var(--color-text-muted); background: var(--color-surface-alt); text-decoration: line-through; }

/* Reviews: the summary is a single column on mobile, not half of a two-column
   grid with dead space beside it. */
.pdp-reviews { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-9); align-items: start; }
@media (min-width: 900px) { .pdp-reviews { grid-template-columns: 280px minmax(0, 1fr); gap: var(--space-11); } }

/* Review distribution bars */
.revbar { display: flex; align-items: center; gap: var(--space-4); font-size: var(--fs-body-sm); }
.revbar__track { flex: 1 1 auto; height: 6px; background: var(--color-surface-sunken); border-radius: var(--radius-pill); overflow: hidden; }
.revbar__fill { height: 100%; background: var(--color-rating); border-radius: var(--radius-pill); }
.revbar__n { font-family: var(--font-numeric); color: var(--color-text-muted); min-width: 3ch; text-align: end; }

/* ============================================================
   CHECKOUT
   ============================================================ */
.steps { display: flex; align-items: center; gap: var(--space-3); margin-block-end: var(--space-9); overflow-x: auto; scrollbar-width: none; }
.steps::-webkit-scrollbar { display: none; }
.step { display: flex; align-items: center; gap: var(--space-3); flex: 0 0 auto; }
.step__n {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-strong);
  font-family: var(--font-numeric);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  color: var(--color-text-muted);
}
.step__label { font-size: var(--fs-body-sm); color: var(--color-text-muted); }
.step.is-done .step__n { background: var(--color-success); border-color: var(--color-success); color: #fff; }
.step.is-done .step__label { color: var(--color-text); }
.step.is-current .step__n { background: var(--color-ink); border-color: var(--color-ink); color: #fff; }
.step.is-current .step__label { color: var(--color-text); font-weight: var(--fw-semibold); }
.step__line { width: 28px; height: 1px; background: var(--color-border-strong); flex: 0 0 auto; }

.summary { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-7); background: var(--color-surface); }
.summary__row { display: flex; justify-content: space-between; gap: var(--space-4); font-size: var(--fs-body-sm); margin-block-end: var(--space-4); }
.summary__total { display: flex; justify-content: space-between; gap: var(--space-4); padding-block-start: var(--space-5); border-block-start: 1px solid var(--color-border); font-weight: var(--fw-bold); font-size: var(--fs-body-lg); }

.pay-option {
  display: flex; align-items: center; gap: var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.pay-option:hover { border-color: var(--color-ink); }
.pay-option.is-selected { border-color: var(--color-ink); background: var(--color-surface); }

/* ============================================================
   DESIGN SYSTEM PLAYGROUND
   ============================================================ */
.ds-shell { display: grid; grid-template-columns: minmax(0,1fr); }
@media (min-width: 1024px) { .ds-shell { grid-template-columns: 232px minmax(0,1fr); } }
.ds-rail {
  display: none;
  position: sticky; inset-block-start: 0;
  height: 100vh; overflow-y: auto;
  padding: var(--space-8) var(--space-6);
  border-inline-end: 1px solid var(--color-border);
  background: var(--color-surface);
}
@media (min-width: 1024px) { .ds-rail { display: block; } }
.ds-rail__group { margin-block-end: var(--space-7); }
.ds-rail__title { font-size: var(--fs-caption); font-weight: var(--fw-bold); color: var(--color-text-muted); margin-block-end: var(--space-4); }
.ds-rail a { display: block; padding-block: var(--space-2); font-size: var(--fs-body-sm); color: var(--color-text-secondary); }
.ds-rail a:hover { color: var(--color-accent); }

.ds-main { padding: var(--space-8) var(--gutter-sm) var(--space-13); min-width: 0; }
@media (min-width: 1024px) { .ds-main { padding: var(--space-10) var(--space-10) var(--space-14); } }

.ds-topbar {
  position: sticky; inset-block-start: 0; z-index: var(--z-sticky);
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  padding: var(--space-5) var(--gutter-sm);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-block-end: 1px solid var(--color-border);
  margin: calc(var(--space-8) * -1) calc(var(--gutter-sm) * -1) var(--space-9);
}
@media (min-width: 1024px) { .ds-topbar { padding-inline: var(--space-10); margin: calc(var(--space-10) * -1) calc(var(--space-10) * -1) var(--space-10); } }

/* The playground's own documentation is written in English for the build
   team, so its chrome stays LTR while the component demos below it follow
   the language switch. Without this, English sentences end up with their
   full stops on the left. */
.ds-rail, .ds-topbar, .ds-section__head, .ds-section__note,
.ds-note, .ds-label, .ds-swatch__meta, .ds-type__meta,
.ds-main > header, .ds-main table { direction: ltr; text-align: start; }
.ds-main > header .t-display { letter-spacing: var(--tracking-display); }

.ds-section { padding-block-start: var(--space-11); scroll-margin-block-start: 76px; }
.ds-section:first-of-type { padding-block-start: 0; }
.ds-section__head { margin-block-end: var(--space-7); padding-block-end: var(--space-5); border-block-end: 1px solid var(--color-border); }
.ds-section__title { font-size: var(--fs-h2); }
.ds-section__note { margin-block-start: var(--space-3); color: var(--color-text-secondary); max-width: 68ch; font-size: var(--fs-body-sm); }

.ds-block { margin-block-end: var(--space-9); }
.ds-label {
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  color: var(--color-text-muted);
  margin-block-end: var(--space-4);
  font-family: var(--font-numeric);
}
.ds-canvas {
  padding: var(--space-7);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-background);
}
.ds-canvas--surface { background: var(--color-surface); }
.ds-canvas--ink { background: var(--color-ink); }
.ds-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); }

.ds-swatches { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-4); }
@media (min-width: 600px)  { .ds-swatches { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (min-width: 1280px) { .ds-swatches { grid-template-columns: repeat(6, minmax(0,1fr)); } }
.ds-swatch { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.ds-swatch__chip { height: 62px; }
.ds-swatch__meta { padding: var(--space-4); }
.ds-swatch__name { font-size: var(--fs-caption); font-weight: var(--fw-semibold); }
.ds-swatch__hex { font-family: var(--font-numeric); font-size: 10px; color: var(--color-text-muted); text-transform: uppercase; }

.ds-type { border-block-end: 1px dashed var(--color-border); padding-block: var(--space-5); }
.ds-type__meta { font-family: var(--font-numeric); font-size: var(--fs-caption); color: var(--color-text-muted); margin-block-start: var(--space-2); }

.ds-scale { display: flex; align-items: flex-end; gap: var(--space-3); flex-wrap: wrap; }
.ds-scale__item { text-align: center; }
.ds-scale__bar { background: var(--color-accent-soft); border: 1px solid var(--color-accent); border-radius: var(--radius-sm); }
.ds-scale__n { font-family: var(--font-numeric); font-size: 10px; color: var(--color-text-muted); margin-block-start: var(--space-2); }

.ds-note {
  padding: var(--space-5);
  background: var(--color-info-soft);
  border-inline-start: 3px solid var(--color-info);
  border-radius: var(--radius-sm);
  font-size: var(--fs-body-sm);
  margin-block-start: var(--space-5);
}
.ds-note--warn { background: var(--color-warning-soft); border-inline-start-color: var(--color-warning); }

.ds-anatomy { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-7); align-items: start; }
@media (min-width: 768px) { .ds-anatomy { grid-template-columns: 280px minmax(0, 1fr); gap: var(--space-9); } }

/* Flex items default to min-width:auto and refuse to shrink below their
   content, so the 375px device mock pushed the playground wider than the
   phone it was demonstrating. */
.ds-row > * { min-width: 0; }

.ds-device {
  width: 100%; max-width: 375px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--color-background);
  box-shadow: var(--shadow-md);
}
.ds-device__screen { height: 620px; overflow-y: auto; position: relative; }

.ds-swap { display: flex; gap: var(--space-2); background: var(--color-surface-alt); padding: 3px; border-radius: var(--radius-pill); }
.ds-swap button {
  min-height: var(--control-h-sm);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-pill);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
  transition: all var(--dur-fast) var(--ease-out);
}
.ds-swap button[aria-pressed="true"] { background: var(--color-background); color: var(--color-text); box-shadow: var(--shadow-sm); }

/* ============================================================
   AUTH / ACCOUNT
   ============================================================ */
.auth-card { padding: var(--space-9) var(--space-7); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
@media (min-width: 600px) { .auth-card { padding: var(--space-10); } }

/* ============================================================
   404
   ============================================================ */
.notfound { text-align: center; padding-block: var(--space-13); }
.notfound__code {
  font-family: var(--font-numeric);
  font-size: clamp(5rem, 18vw, 9rem);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--color-surface-sunken);
  letter-spacing: -0.04em;
}

/* ------------------------------------------------------------
   Hub grids - concerns and skin types
   Wider than the homepage strip because these pages are the
   destination rather than a teaser, so the cards can breathe.
   ------------------------------------------------------------ */
.hub-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  margin-block-end: var(--space-11);
}
@media (min-width: 640px)  { .hub-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); } }
@media (min-width: 1024px) { .hub-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ============================================================
   ORDER TRACKING
   ============================================================ */
.track-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-9); }
@media (min-width: 1024px) { .track-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-10); align-items: start; } }
.track-aside { position: sticky; top: calc(var(--header-h) + var(--space-5)); }

.track-form {
  display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-end;
  margin-block-end: var(--space-9);
}

.track-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-7);
  background: var(--color-background);
}
.track-card__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-5);
  margin-block-end: var(--space-8);
}
.track-card__eta {
  display: flex; align-items: center; gap: var(--space-3);
  margin-block-start: var(--space-7); padding-block-start: var(--space-6);
  border-block-start: 1px solid var(--color-border);
  font-size: var(--fs-body-sm); color: var(--color-text-secondary);
}
.track-card__eta svg { width: 17px; height: 17px; flex: 0 0 auto; }

/* ---------- timeline ----------
   The connector is drawn on the marker with a pseudo-element rather than as
   a border on the list item, so it never inherits the item's inline padding
   and therefore cannot land off-centre when the direction flips. */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline__step { position: relative; display: flex; gap: var(--space-5); padding-block-end: var(--space-7); }
.timeline__step:last-child { padding-block-end: 0; }
.timeline__marker {
  position: relative;
  flex: 0 0 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid var(--color-border-strong);
  background: var(--color-background);
  display: grid; place-items: center;
  color: var(--color-text-inverse);
}
.timeline__marker svg { width: 12px; height: 12px; }
.timeline__step:not(:last-child) .timeline__marker::after {
  content: "";
  position: absolute;
  inset-block-start: 22px;
  /* Centred on the marker in both directions without a start/end offset. */
  inset-inline-start: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: calc(100% + var(--space-7) - 22px);
  background: var(--color-border);
}
[dir="rtl"] .timeline__step:not(:last-child) .timeline__marker::after { transform: translateX(50%); }

.timeline__step.is-done .timeline__marker { background: var(--color-success); border-color: var(--color-success); }
.timeline__step.is-done:not(:last-child) .timeline__marker::after { background: var(--color-success); }
.timeline__step.is-current .timeline__marker {
  border-color: var(--color-ink);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-ink) 12%, transparent);
}
.timeline__body { display: flex; flex-direction: column; gap: var(--space-1); padding-block-start: 1px; }
.timeline__label { font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); }
.timeline__step:not(.is-done):not(.is-current) .timeline__label { color: var(--color-text-muted); font-weight: var(--fw-regular); }
.timeline__time { font-size: var(--fs-caption); color: var(--color-text-muted); font-family: var(--font-numeric); }

/* ============================================================
   HERO SLIDER
   Slides cross-fade in place instead of sliding a track. A
   translated track needs its sign flipped for RTL and its swipe
   maths inverted; a fade has no direction to get wrong, and on a
   full-bleed campaign image the transition reads as editorial
   rather than mechanical.
   ============================================================ */
.hero-slider { position: relative; border-radius: var(--radius-md); overflow: hidden; }
.hero-slider__track { position: relative; display: grid; }
/* Every slide occupies the same grid cell, so the slider is exactly as tall
   as its tallest slide and never reflows the page as it advances. */
.hero-slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);
}
.hero-slide.is-active { opacity: 1; visibility: visible; transition-delay: 0s, 0s; }

.hero-slider__nav {
  position: absolute;
  inset-block-start: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  display: none; place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-background) 86%, transparent);
  color: var(--color-ink);
  box-shadow: var(--shadow-sm);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.hero-slider__nav:hover { background: var(--color-background); }
.hero-slider__nav svg { width: 20px; height: 20px; }
/* chevStart/chevEnd are already logical icons; the *positions* are what needs
   the direction, and inset-inline does that without a [dir] override. */
.hero-slider__nav--prev { inset-inline-start: var(--space-6); }
.hero-slider__nav--next { inset-inline-end: var(--space-6); }
@media (min-width: 768px) {
  .hero-slider__nav { display: grid; }
  /* The arrows are overlaid on the slide, so the copy has to be inset past
     them or the headline runs underneath the control. 44px button + 20px
     inset + 20px breathing room. Only applies where the arrows exist. */
  .hero-slider .hero__inner { padding-inline: var(--space-11); }
}

.hero-slider__dots {
  position: absolute;
  inset-block-end: var(--space-7);
  inset-inline-start: var(--space-8);
  display: flex; gap: var(--space-3);
}
.hero-slider__dot {
  width: 28px; height: 3px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-ink) 22%, transparent);
  transition: background-color var(--dur-base) var(--ease-out), width var(--dur-base) var(--ease-out);
}
.hero-slider__dot.is-active { background: var(--color-ink); width: 44px; }

@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
}

/* ------------------------------------------------------------
   ACCOUNT — order rows
   ------------------------------------------------------------ */
.order-row {
  display: block;
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.order-row:hover { border-color: var(--color-ink); }
.order-row__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-5); margin-block-end: var(--space-5);
}
.order-row__thumbs { display: flex; gap: var(--space-3); margin-block-end: var(--space-5); }
.order-row__thumb {
  width: 52px; height: 52px; flex: 0 0 auto;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-surface);
}
.order-row__thumb svg { width: 100%; height: 100%; object-fit: cover; }
.order-row__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-5);
  padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--color-border);
}

/* ------------------------------------------------------------
   ACCOUNT — stat tiles
   Three tiles across a 360px phone gives each ~145px, and a
   Persian toman total ("16,672,000 تومان") needs 163px at
   heading size. So the row stacks below 560px rather than
   forcing a figure to overflow its tile, and the number scales
   with the viewport instead of sitting at a fixed --fs-h1.
   ------------------------------------------------------------ */
.stats-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  margin-block-end: var(--space-9);
}
@media (min-width: 560px) {
  .stats-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
}
.stat { min-width: 0; }
.stat__n {
  font-size: clamp(var(--fs-h3), 4.4vw, var(--fs-h1));
  font-weight: var(--fw-bold);
  line-height: 1.1;
  /* A long converted total wraps rather than escaping the tile. */
  overflow-wrap: anywhere;
}
.stat__l {
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
  margin-block-start: var(--space-2);
}

/* ------------------------------------------------------------
   ACCOUNT — order rows
   ------------------------------------------------------------ */
.order-row {
  display: block;
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.order-row:hover { border-color: var(--color-ink); }
.order-row__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-5); margin-block-end: var(--space-5);
}
.order-row__thumbs { display: flex; gap: var(--space-3); margin-block-end: var(--space-5); }
.order-row__thumb {
  width: 52px; height: 52px; flex: 0 0 auto;
  border-radius: var(--radius-sm); overflow: hidden;
  background: var(--color-surface);
}
.order-row__thumb svg { width: 100%; height: 100%; object-fit: cover; }
.order-row__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-5);
  padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--color-border);
}

/* Stat tiles. Three across a 360px phone gives each ~145px, and a Persian
   toman total needs 163px at heading size — so the row stacks below 560px and
   the number scales, rather than a figure overflowing its tile. */
.stats-row {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4); margin-block-end: var(--space-9);
}
@media (min-width: 560px) {
  .stats-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
}
.stat { min-width: 0; }
.stat__n {
  font-size: clamp(var(--fs-h3), 4.4vw, var(--fs-h1));
  font-weight: var(--fw-bold); line-height: 1.1;
  overflow-wrap: anywhere;
}
.stat__l { font-size: var(--fs-caption); color: var(--color-text-muted); margin-block-start: var(--space-2); }

/* ------------------------------------------------------------
   ORDER TRACKING
   ------------------------------------------------------------ */
.track-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-9); }
@media (min-width: 1024px) {
  .track-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-10); align-items: start; }
}
.track-aside { position: sticky; top: calc(var(--header-h) + var(--space-5)); }

.track-form {
  display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-end;
  margin-block-end: var(--space-9);
}

.track-card {
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: var(--space-7); background: var(--color-background);
}
.track-card__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-5); margin-block-end: var(--space-8);
}
.track-card__eta {
  display: flex; align-items: center; gap: var(--space-3);
  margin-block-start: var(--space-7); padding-block-start: var(--space-6);
  border-block-start: 1px solid var(--color-border);
  font-size: var(--fs-body-sm); color: var(--color-text-secondary);
}
.track-card__eta svg { width: 17px; height: 17px; flex: 0 0 auto; }

/* The connector is drawn on the marker rather than as a border on the list
   item, so it never inherits the item's inline padding and cannot land
   off-centre when the direction flips. */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline__step { position: relative; display: flex; gap: var(--space-5); padding-block-end: var(--space-7); }
.timeline__step:last-child { padding-block-end: 0; }
.timeline__marker {
  position: relative; flex: 0 0 22px; height: 22px;
  border-radius: 50%; border: 2px solid var(--color-border-strong);
  background: var(--color-background);
  display: grid; place-items: center; color: var(--color-text-inverse);
}
.timeline__marker svg { width: 12px; height: 12px; }
.timeline__step:not(:last-child) .timeline__marker::after {
  content: ""; position: absolute; inset-block-start: 22px;
  inset-inline-start: 50%; transform: translateX(-50%);
  width: 2px; height: calc(100% + var(--space-7) - 22px);
  background: var(--color-border);
}
[dir="rtl"] .timeline__step:not(:last-child) .timeline__marker::after { transform: translateX(50%); }
.timeline__step.is-done .timeline__marker { background: var(--color-success); border-color: var(--color-success); }
.timeline__step.is-done:not(:last-child) .timeline__marker::after { background: var(--color-success); }
.timeline__step.is-current .timeline__marker {
  border-color: var(--color-ink);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-ink) 12%, transparent);
}
.timeline__body { display: flex; flex-direction: column; gap: var(--space-1); padding-block-start: 1px; }
.timeline__label { font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); }
.timeline__step:not(.is-done):not(.is-current) .timeline__label { color: var(--color-text-muted); font-weight: var(--fw-regular); }
.timeline__time { font-size: var(--fs-caption); color: var(--color-text-muted); font-family: var(--font-numeric); }

/* Error-state icon: signals fault rather than absence. */
.empty__icon--error {
  background: color-mix(in srgb, var(--color-error) 10%, var(--color-surface));
  color: var(--color-error);
}

/* ---------------------------------------------------------------- printing

   A handover manifest is a real piece of paper here: the driver signs it and
   the shop keeps it. So one admin page is laid out to leave the screen — the
   navigation, the buttons and the link colours drop out, and what is left is a
   list somebody can tick down the side of a van.

   Everything else in the application prints as whatever the browser makes of
   it, which is the right amount of effort for a page nobody prints. */
@media print {
  .no-print,
  body > header,
  .footer { display: none !important; }

  body { background: #fff; color: #000; }

  /* A link is an underline and a colour on screen and neither on paper: on a
     sheet there is nothing to click, and the decoration is noise over a number
     somebody is reading out loud. */
  .print-plain { color: inherit; text-decoration: none; }

  /* A parcel split across two pages is a parcel somebody misses. */
  .manifest tr { break-inside: avoid; }

  .manifest table { font-size: 11pt; }
  .manifest th, .manifest td { padding: 6pt 4pt; }
}

/* ---------- Paying with FIB ----------
   The app link first on a phone, where a QR code on the same screen cannot be
   scanned; the code first on a larger screen, where the phone is the scanner.
   Swapped by width rather than by guessing the device. */
.pay-fib {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  margin-block-start: var(--space-5);
}
.pay-fib__qr {
  width: min(220px, 70vw);
  height: auto;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}
@media (min-width: 768px) {
  .pay-fib__qr { order: -1; }
}