/* ============================================================
   ORVENA - Component layer
   Every component: variants + all interaction states + RTL behaviour.
   Documented in design/COMPONENTS.md
   ============================================================ */

/* ------------------------------------------------------------
   Structural spans
   Several components are authored as <a><span>…</span></a> so the
   whole card is one link target. Those spans are structural boxes,
   not inline text - without this they collapse and any aspect-ratio
   or height:100% inside them resolves to zero.
   ------------------------------------------------------------ */
.pcard__frame,
.pcard__brand, .pcard__name,
.pcard-row__frame,
.cat-tile__media, .cat-tile__body, .cat-tile__title, .cat-tile__sub,
.cat-circle__frame, .cat-circle__label,
.article-card__frame, .article-card__kicker, .article-card__title, .article-card__sub,
.brand-tile__media, .brand-tile__body,
.mega__feature-media, .mega__feature-body, .mega__feature-title, .mega__feature-sub,
.hero-mini__media, .hero-mini__body, .hero-mini__title,
.concern__frame, .gallery__thumb, .trust__icon { display: block; }

.hero-mini__body > .t-eyebrow { display: block; }
.pcard__name.clamp-1, .pcard__name.clamp-2 { display: -webkit-box; }

/* ============================================================
   BUTTON
   Four levels only. If a screen seems to need a fifth, the screen
   has too many competing actions.
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: var(--control-h);
  padding-inline: var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--fs-button);
  line-height: var(--lh-button);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-instant) var(--ease-out);
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { cursor: not-allowed; opacity: 1; }

/* -- Primary: the single most important action on the screen -- */
.btn--primary { background: var(--color-ink); color: var(--color-text-inverse); }
.btn--primary:hover:not(:disabled) { background: var(--color-ink-hover); }
.btn--primary:disabled { background: var(--color-surface-sunken); color: var(--color-text-muted); }

/* -- Secondary: the alternative path -- */
.btn--secondary {
  background: var(--color-background);
  color: var(--color-text);
  border-color: var(--color-border-strong);
}
.btn--secondary:hover:not(:disabled) { border-color: var(--color-ink); background: var(--color-surface); }
.btn--secondary:disabled { color: var(--color-text-muted); border-color: var(--color-border); }

/* -- Tertiary: low-emphasis, in-flow -- */
.btn--tertiary { background: var(--color-surface-alt); color: var(--color-text); }
.btn--tertiary:hover:not(:disabled) { background: var(--color-surface-sunken); }

/* -- Text: inline, no chrome -- */
.btn--text {
  min-height: auto;
  padding-inline: 0;
  color: var(--color-text-secondary);
  font-weight: var(--fw-semibold);
}
.btn--text:hover:not(:disabled) { color: var(--color-accent); }

/* -- Accent: reserved for editorial CTAs on dark/photo grounds -- */
.btn--accent { background: var(--color-accent); color: var(--color-text-onaccent); }
.btn--accent:hover:not(:disabled) { background: var(--color-accent-hover); }

/* -- On dark ground -- */
.btn--inverse { background: var(--color-background); color: var(--color-ink); }
.btn--inverse:hover:not(:disabled) { background: var(--color-surface-alt); }
.btn--ghost-inverse {
  background: transparent;
  color: var(--color-text-inverse);
  border-color: rgba(255, 255, 255, 0.55);
}
.btn--ghost-inverse:hover:not(:disabled) { background: rgba(255, 255, 255, 0.12); border-color: #fff; }

/* -- Sizes -- */
.btn--sm { min-height: var(--control-h-sm); padding-inline: var(--space-5); font-size: var(--fs-body-sm); }
.btn--lg { min-height: var(--control-h-lg); padding-inline: var(--space-8); font-size: var(--fs-body-lg); }
.btn--block { display: flex; width: 100%; }

/* -- Loading: label stays for width stability, opacity 0, spinner over -- */
.btn.is-loading { pointer-events: none; }
.btn.is-loading .btn__label { opacity: 0; }
.btn.is-loading::after {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-inline-start-color: transparent;
  border-radius: 50%;
  animation: orvena-spin 620ms linear infinite;
}
@keyframes orvena-spin { to { transform: rotate(360deg); } }

/* -- Icon button -- */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-h);
  height: var(--control-h);
  border-radius: var(--radius-md);
  color: var(--color-text);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn-icon:hover { background: var(--color-surface-alt); }
.btn-icon--sm { width: var(--control-h-sm); height: var(--control-h-sm); }
.btn-icon svg { width: 20px; height: 20px; }
.btn-icon--sm svg { width: 18px; height: 18px; }

/* Count bubble on the bag / wishlist icons */
.btn-icon { position: relative; }
.icon-count {
  position: absolute;
  inset-block-start: 4px;
  inset-inline-end: 2px;
  min-width: 17px; height: 17px;
  padding-inline: 4px;
  display: grid; place-items: center;
  background: var(--color-sale);
  color: #fff;
  border-radius: var(--radius-pill);
  font-family: var(--font-numeric);
  font-size: 10px;
  font-weight: var(--fw-bold);
  line-height: 1;
}
.icon-count.is-bumped { animation: orvena-bump var(--dur-slow) var(--ease-out); }
@keyframes orvena-bump {
  0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); }
}

/* ============================================================
   BADGE
   Max ONE badge per product card. Priority order is enforced in JS:
   soldout > exclusive > sale > new > best
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding-inline: var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-badge);
  line-height: var(--lh-badge);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  white-space: nowrap;
}
:lang(ar) .badge, :lang(fa) .badge { letter-spacing: 0; height: 22px; }

.badge--new       { background: var(--color-new); color: #fff; }
.badge--best      { background: var(--color-best); color: #fff; }
/* "−32%" is one LTR run. Without isolation the RTL paragraph direction
   pushes the minus sign to the far end and it reads "32%−". */
.badge--sale {
  background: var(--color-sale); color: #fff;
  font-family: var(--font-numeric);
  direction: ltr;
  unicode-bidi: isolate;
}
.badge--exclusive { background: var(--color-exclusive); color: #fff; }
.badge--soldout   { background: var(--color-soldout); color: #fff; }
.badge--outline   { background: transparent; border: 1px solid var(--color-border-strong); color: var(--color-text-secondary); }
.badge--soft      { background: var(--color-accent-soft); color: var(--color-accent-hover); }

/* ============================================================
   PRICE
   Sale price leads; original is struck and demoted. The discount
   percentage sits with the sale price, never as a separate badge
   on the same line - that is two shouts for one message.
   ============================================================ */
/* Persian prices are long: 129 AED renders as "1,006,200 تومان", and with a
   struck original and a discount badge the group runs past 220px. It wraps
   rather than pushing the row off the screen. */
.price {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  min-width: 0;
}
.price__current {
  font-size: var(--fs-price);
  line-height: var(--lh-price);
  font-weight: var(--fw-bold);
  color: var(--color-text);
}
.price__was {
  font-size: var(--fs-body-sm);
  color: var(--color-text-muted);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.price__off {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-bold);
  color: var(--color-sale);
}
.price.is-discounted .price__current { color: var(--color-sale); }
.price--lg .price__current { font-size: var(--fs-price-lg); line-height: var(--lh-price-lg); }
.price--lg .price__was, .price--lg .price__off { font-size: var(--fs-body-lg); }

/* ============================================================
   RATING
   ============================================================ */
.rating { display: inline-flex; align-items: center; gap: var(--space-2); }
.rating__stars { display: inline-flex; gap: 1px; color: var(--color-rating); }
.rating__stars svg { width: 13px; height: 13px; }
.rating--lg .rating__stars svg { width: 16px; height: 16px; }
.rating__value {
  font-family: var(--font-numeric);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
}
.rating__count { font-size: var(--fs-body-sm); color: var(--color-text-muted); }

/* ============================================================
   PRODUCT CARD
   Anatomy (top to bottom):
     frame  -> badge / wishlist / quick-add
     brand  -> name -> rating -> price -> promo note
   No border, no shadow, no heavy radius. The product image and the
   whitespace around it are the design.
   ============================================================ */
.pcard { position: relative; display: flex; flex-direction: column; min-width: 0; }

.pcard__frame {
  position: relative;
  aspect-ratio: var(--ratio-product);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-block-end: var(--space-4);
}
/* The two image layers are absolutely positioned boxes, not inline spans -
   an inline wrapper collapses to zero height and the SVG paints nothing. */
.pcard__frame .pcard__img-main,
.pcard__frame .pcard__img-alt { position: absolute; inset: 0; display: block; }
.pcard__frame img, .pcard__frame svg {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
/* Second image cross-fades in on hover. Falls back to a gentle scale
   when a product only has one image. */
.pcard__frame .pcard__img-alt { opacity: 0; }
@media (hover: hover) {
  .pcard:hover .pcard__img-alt { opacity: 1; }
  .pcard:hover .pcard__img-main { transform: scale(1.03); }
}

.pcard__badges {
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-start: var(--space-3);
  display: flex; gap: var(--space-2);
  z-index: var(--z-raised);
}
.pcard__rank {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  background: var(--color-ink);
  color: #fff;
  font-family: var(--font-numeric);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-bold);
  z-index: var(--z-raised);
}

/* Wishlist sits top-end (top-left in RTL) - logical, so it mirrors */
.pcard__wish {
  position: absolute;
  inset-block-start: var(--space-2);
  inset-inline-end: var(--space-2);
  /* 38px so the tap target clears the mobile minimum without the button
     growing large enough to compete with the product image. */
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  color: var(--color-text-secondary);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(6px);
  z-index: var(--z-raised);
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.pcard__wish svg { width: 18px; height: 18px; }
.pcard__wish:hover { color: var(--color-ink); background: #fff; }
.pcard__wish[aria-pressed="true"] { color: var(--color-sale); }
.pcard__wish[aria-pressed="true"] svg { fill: currentColor; }
.pcard__wish.is-animating svg { animation: orvena-pop var(--dur-slow) var(--ease-out); }
@keyframes orvena-pop {
  0% { transform: scale(1); } 45% { transform: scale(1.32); } 100% { transform: scale(1); }
}

/* Quick-add: desktop hover reveal; always visible on touch */
.pcard__quickadd {
  position: absolute;
  inset-inline: var(--space-3);
  inset-block-end: var(--space-3);
  min-height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-background);
  color: var(--color-text);
  border-radius: var(--radius-md);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  z-index: var(--z-raised);
}
@media (hover: hover) {
  .pcard:hover .pcard__quickadd, .pcard__quickadd:focus-visible { opacity: 1; transform: translateY(0); }
}
/* On touch there is no hover to reveal it, so the control becomes part of
   the card. It goes LAST (order:10) - placed where it renders in the DOM it
   would sit between the image and the brand name, splitting the card's
   reading order in half. Secondary weight, so the product still leads. */
@media (hover: none) {
  .pcard__quickadd {
    position: static; inset: auto;
    order: 10;
    opacity: 1; transform: none; box-shadow: none;
    margin-block-start: var(--space-4);
    min-height: var(--control-h-sm);
    background: var(--color-background);
    border: 1px solid var(--color-border-strong);
    color: var(--color-text);
  }
  .pcard__quickadd:disabled { color: var(--color-text-muted); border-color: var(--color-border); }
  /* meta must not consume the leftover space, or the button detaches
     from the price and floats at the bottom of a ragged card */
  .pcard__meta { margin-top: 0; }
}

.pcard__brand {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  margin-block-end: var(--space-1);
}
.pcard__name {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--color-text-secondary);
  margin-block-end: var(--space-3);
  min-height: calc(var(--fs-body-sm) * var(--lh-body-sm) * 2);
}
.pcard__meta { display: flex; flex-direction: column; gap: var(--space-2); margin-top: auto; }
.pcard__promo {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  /* Reserved whether or not the product has a promotion, so every card in a
     row keeps its rating and price on the same baseline. */
  min-height: calc(var(--fs-caption) * var(--lh-caption));
  color: var(--color-accent-hover);
  font-weight: var(--fw-semibold);
}
.pcard.is-soldout .pcard__frame { opacity: 0.55; }
.pcard.is-soldout .price__current { color: var(--color-text-muted); }

/* Compact view (listing toggle): square frame, tighter text */
.product-grid.is-compact .pcard__frame { aspect-ratio: var(--ratio-compact); }
.product-grid.is-compact .pcard__name { -webkit-line-clamp: 1; line-clamp: 1; min-height: 0; }

/* Horizontal card - cart drawer, wishlist rows, order summary */
.pcard-row { display: flex; gap: var(--space-5); align-items: flex-start; }
.pcard-row__frame {
  flex: 0 0 76px;
  aspect-ratio: 1 / 1;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.pcard-row__body { flex: 1 1 auto; min-width: 0; }

/* ============================================================
   CATEGORY CARDS
   Two forms: circular (compact discovery strip) and tile (editorial).
   ============================================================ */
.cat-circle { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); text-align: center; }
.cat-circle__frame {
  width: 100%;
  max-width: 116px;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-pill);
  background: var(--color-surface-alt);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out);
}
.cat-circle:hover .cat-circle__frame { transform: translateY(-4px); }
.cat-circle__label { font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); }

.cat-tile {
  position: relative;
  display: block;
  aspect-ratio: var(--ratio-category);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface-alt);
}
.cat-tile__media { position: absolute; inset: 0; }
.cat-tile__media svg, .cat-tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.cat-tile:hover .cat-tile__media svg, .cat-tile:hover .cat-tile__media img { transform: scale(1.04); }
.cat-tile__body {
  position: absolute;
  inset-block-end: 0; inset-inline: 0;
  padding: var(--space-6);
  background: linear-gradient(to top, rgba(26,22,20,.66), rgba(26,22,20,0));
  color: #fff;
}
.cat-tile__title { font-size: var(--fs-h4); font-weight: var(--fw-bold); }
.cat-tile__sub { font-size: var(--fs-body-sm); opacity: 0.86; margin-block-start: var(--space-1); }

/* ============================================================
   INPUT / FORM
   ============================================================ */
.field { display: block; }
.field__label {
  display: block;
  margin-block-end: var(--space-3);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
}
.field__hint { margin-block-start: var(--space-2); font-size: var(--fs-caption); color: var(--color-text-muted); }
.field__error {
  margin-block-start: var(--space-2);
  font-size: var(--fs-caption);
  color: var(--color-error);
  display: flex; align-items: center; gap: var(--space-2);
}

.input, .select, .textarea {
  width: 100%;
  min-height: var(--control-h);
  padding: var(--space-3) var(--control-px);
  background: var(--color-background);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  font-size: var(--fs-body);
  color: var(--color-text);
  text-align: start;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.input::placeholder, .textarea::placeholder { color: var(--color-text-muted); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--color-text-muted); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--color-ink);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}
.input:disabled, .select:disabled, .textarea:disabled {
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  cursor: not-allowed;
}
.input.is-error, .select.is-error { border-color: var(--color-error); }
.input.is-error:focus { box-shadow: 0 0 0 3px var(--color-error-soft); }
.textarea { min-height: 110px; }

/* Native select arrow is LTR-positioned by the UA; place our own so it
   sits on the correct side in both directions. */
.select {
  appearance: none;
  padding-inline-end: var(--space-9);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B615A' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 18px;
  background-position: right var(--space-4) center;
}
[dir="rtl"] .select { background-position: left var(--space-4) center; }

/* Checkbox / radio */
.check { display: flex; align-items: center; gap: var(--space-4); cursor: pointer; }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check__box {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  display: grid; place-items: center;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.check__box svg { width: 12px; height: 12px; color: #fff; opacity: 0; transition: opacity var(--dur-instant); }
.check:hover .check__box { border-color: var(--color-ink); }
.check input:checked + .check__box { background: var(--color-ink); border-color: var(--color-ink); }
.check input:checked + .check__box svg { opacity: 1; }
.check input:focus-visible + .check__box { box-shadow: 0 0 0 3px var(--color-focus-ring); }
.check input:disabled ~ * { opacity: 0.45; }
.check__label { font-size: var(--fs-body-sm); }
.check__count { margin-inline-start: auto; font-family: var(--font-numeric); font-size: var(--fs-caption); color: var(--color-text-muted); }
.check--radio .check__box { border-radius: var(--radius-pill); }
.check--radio input:checked + .check__box { background: var(--color-background); border: 5px solid var(--color-ink); }
.check--radio input:checked + .check__box svg { display: none; }

/* Chip - a filter value that is toggled, or an active-filter pill */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-h-sm);
  padding-inline: var(--space-5);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-background);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.chip:hover { border-color: var(--color-ink); color: var(--color-text); }
.chip[aria-pressed="true"], .chip.is-active {
  background: var(--color-ink); border-color: var(--color-ink); color: #fff;
}
.chip--removable svg { width: 13px; height: 13px; opacity: 0.7; }

/* Quantity stepper */
.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.qty__btn {
  width: 40px; height: 42px;
  display: grid; place-items: center;
  color: var(--color-text);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.qty__btn:hover:not(:disabled) { background: var(--color-surface-alt); }
.qty__btn:disabled { color: var(--color-text-muted); cursor: not-allowed; }
.qty__btn svg { width: 15px; height: 15px; }
.qty__value {
  min-width: 42px;
  text-align: center;
  font-family: var(--font-numeric);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  border-inline: 1px solid var(--color-border);
  line-height: 42px;
}

/* ============================================================
   HEADER
   ============================================================ */
.announce {
  background: var(--color-ink);
  color: var(--color-text-inverse);
  font-size: var(--fs-caption);
  line-height: 1.3;
  min-height: var(--announce-h);
  overflow: hidden;
}
.announce .container {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-5);
  min-height: var(--announce-h);
  flex-wrap: nowrap;
}
/* One line, always. Persian announcement copy runs ~40% longer than Arabic
   and wrapped to three lines inside a 36px bar, clipping top and bottom. */
.announce__msg {
  display: flex; align-items: center; gap: var(--space-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.announce__msg svg { flex: 0 0 auto; }
/* Below the tablet breakpoint only the first message survives - three
   messages in 343px is three truncations. */
@media (max-width: 767px) {
  .announce .container > *:nth-child(n+2) { display: none; }
}
.announce__msg strong { color: var(--color-accent); }

.header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-header);
  background: var(--color-background);
  border-block-end: 1px solid var(--color-border);
}
.header__util {
  display: none;
  border-block-end: 1px solid var(--color-border);
  font-size: var(--fs-caption);
  color: var(--color-text-secondary);
}
@media (min-width: 1024px) {
  .header__util { display: block; }
  .header__util .container { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-6); height: 34px; }
  .header__util a:hover { color: var(--color-accent); }
}
.header__main {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  height: var(--header-h);
}
.header__logo { flex: 0 0 auto; display: inline-flex; align-items: center; }
.header__search { display: none; flex: 1 1 auto; max-width: 520px; margin-inline: auto; }
@media (min-width: 1024px) { .header__search { display: block; } }
.header__actions { display: flex; align-items: center; gap: var(--space-1); margin-inline-start: auto; }

/* Primary nav */
/* The nav bar is the positioning context for the mega panel, NOT the
   individual item: an item is ~80px wide, and a panel anchored to it would
   be 80px wide too, overflowing the document with its own grid. */
.header__nav { display: none; position: relative; border-block-start: 1px solid var(--color-border); }
@media (min-width: 1024px) { .header__nav { display: block; } }
.navbar {
  display: flex; align-items: center;
  /* Fifteen departments. Measured in Arabic: the full row is 1225px, which
     clears the 1320px bar at 1440 but not the 1217px bar at 1280, where two
     departments move into the priority+ overflow. Persian is wider still and
     English wider again - so the gap tightens below 1280 rather than trying to
     seat every language at every width, and whatever is left over goes to the
     More panel. */
  gap: var(--space-5);
  height: var(--header-nav-h);
  overflow-x: auto;
  scrollbar-width: none;
}
.navbar::-webkit-scrollbar { display: none; }
@media (min-width: 1280px) { .navbar { gap: var(--space-6); } }
.navbar__item { position: static; height: 100%; display: flex; align-items: center; flex: 0 0 auto; }
.navbar__link {
  font-size: var(--fs-nav);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  height: 100%;
  display: flex; align-items: center;
  border-block-end: 2px solid transparent;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.navbar__link:hover, .navbar__item.is-open .navbar__link { color: var(--color-accent); border-block-end-color: var(--color-accent); }
.navbar__link--hot { color: var(--color-sale); font-weight: var(--fw-bold); }

/* ============================================================
   MEGA MENU
   Four axes, not one wall of links: by product type, by skin/hair
   type, by concern, by ingredient - plus one featured visual.
   ============================================================ */
.mega {
  position: absolute;
  inset-block-start: 100%;
  inset-inline: 0;
  z-index: var(--z-dropdown);
  background: var(--color-background);
  border-block-start: 1px solid var(--color-border);
  box-shadow: var(--shadow-menu);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              visibility 0s linear var(--dur-base);
}
.navbar__item.is-open .mega,
.mega:hover {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition-delay: 0s;
}
.mega__inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) 280px;
  gap: var(--space-8);
  padding-block: var(--space-9);
}
.mega__col { min-width: 0; }
.mega__title {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  padding-block-end: var(--space-4);
  margin-block-end: var(--space-4);
  border-block-end: 1px solid var(--color-border);
}
.mega__list { display: flex; flex-direction: column; gap: var(--space-3); }
.mega__link {
  font-size: var(--fs-body-sm);
  color: var(--color-text-secondary);
  transition: color var(--dur-fast) var(--ease-out);
  display: inline-flex; align-items: center; gap: var(--space-3);
}
.mega__link:hover { color: var(--color-accent); }
.mega__link--all { color: var(--color-text); font-weight: var(--fw-semibold); }
.mega__feature { border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface); }
.mega__feature-media { aspect-ratio: 4 / 3; }
.mega__feature-media svg { width: 100%; height: 100%; object-fit: cover; }
.mega__feature-body { padding: var(--space-5); }
.mega__feature-title { font-size: var(--fs-body); font-weight: var(--fw-bold); margin-block-end: var(--space-2); }
.mega__feature-sub { font-size: var(--fs-caption); color: var(--color-text-secondary); }

/* ============================================================
   SEARCH
   ============================================================ */
.search { position: relative; }
.search__field { position: relative; display: flex; align-items: center; }
.search__input {
  width: 100%;
  min-height: 42px;
  padding-inline: var(--space-5) var(--space-11);
  background: var(--color-surface);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--fs-body-sm);
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.search__input::placeholder { color: var(--color-text-muted); }
.search__input:focus {
  outline: none;
  background: var(--color-background);
  border-color: var(--color-ink);
}
.search__submit {
  position: absolute;
  inset-inline-end: var(--space-2);
  width: 36px; height: 36px;
  display: grid; place-items: center;
  color: var(--color-text-secondary);
  border-radius: var(--radius-sm);
}
.search__submit:hover { color: var(--color-ink); }
.search__submit svg { width: 19px; height: 19px; }

.search-panel {
  position: absolute;
  inset-block-start: calc(100% + var(--space-3));
  inset-inline: 0;
  z-index: var(--z-dropdown);
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-menu);
  padding: var(--space-6);
  display: none;
  max-height: 70vh;
  overflow-y: auto;
}
.search.is-open .search-panel { display: block; }
/* Desktop: the panel is wider than the field, anchored to the field's
   start edge so it grows toward the page centre in both directions. */
@media (min-width: 1024px) {
  .search-panel { min-width: 620px; inset-inline-start: 0; inset-inline-end: auto; }
}
.search-panel__group + .search-panel__group { margin-block-start: var(--space-7); padding-block-start: var(--space-7); border-block-start: 1px solid var(--color-border); }
.search-panel__title {
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  color: var(--color-text-muted);
  margin-block-end: var(--space-4);
}
.search-panel__tags { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.search-suggest { display: flex; flex-direction: column; }
.search-suggest__item {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  margin-inline: calc(var(--space-4) * -1);
  border-radius: var(--radius-md);
  font-size: var(--fs-body-sm);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.search-suggest__item:hover { background: var(--color-surface); }
.search-suggest__item svg { width: 16px; height: 16px; color: var(--color-text-muted); flex: 0 0 auto; }
.search-suggest__item mark { background: none; color: var(--color-accent); font-weight: var(--fw-bold); }
.search-prod { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }
.search-prod__item .pcard__frame { margin-block-end: var(--space-3); }
.search-prod__item .pcard__name { -webkit-line-clamp: 2; line-clamp: 2; }

/* ============================================================
   BREADCRUMB
   ============================================================ */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); font-size: var(--fs-caption); color: var(--color-text-muted); }
.crumbs a { transition: color var(--dur-fast) var(--ease-out); }
.crumbs a:hover { color: var(--color-accent); }
.crumbs__sep { color: var(--color-border-strong); display: inline-flex; }
.crumbs__sep svg { width: 12px; height: 12px; }
.crumbs [aria-current="page"] { color: var(--color-text); }

/* ============================================================
   FILTERS
   ============================================================ */
.filter-group { border-block-end: 1px solid var(--color-border); }
.filter-group__head {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-5);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-bold);
  text-align: start;
}
.filter-group__head svg { width: 16px; height: 16px; color: var(--color-text-muted); transition: transform var(--dur-base) var(--ease-out); }
.filter-group[open] .filter-group__head svg { transform: rotate(180deg); }
.filter-group__body { padding-block-end: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.filter-group__search { margin-block-end: var(--space-2); }
.filter-group__more {
  min-height: var(--control-h-sm);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-accent);
  text-align: start;
}

.filter-bar {
  display: flex; align-items: center; gap: var(--space-4);
  flex-wrap: wrap;
  padding-block: var(--space-5);
  border-block: 1px solid var(--color-border);
  margin-block-end: var(--space-7);
}
.filter-bar__count { font-family: var(--font-numeric); font-size: var(--fs-body-sm); color: var(--color-text-secondary); }
/* The density toggle is a desktop refinement. On a 360px phone it is the
   fourth control competing for a row that only fits two, and the compact
   view it produces is not useful at two columns. */
.view-toggle { display: none; gap: var(--space-1); }
@media (min-width: 768px) { .view-toggle { display: flex; } }
.view-toggle button {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
}
.view-toggle button[aria-pressed="true"] { background: var(--color-surface-alt); color: var(--color-ink); }
.view-toggle svg { width: 17px; height: 17px; }

.active-filters { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-end: var(--space-7); }

/* Price range - dual handle, direction-aware */
.range { padding-block: var(--space-3); }
.range__track { position: relative; height: 3px; background: var(--color-surface-sunken); border-radius: var(--radius-pill); }
.range__fill { position: absolute; height: 100%; background: var(--color-ink); border-radius: var(--radius-pill); }
.range__values { display: flex; justify-content: space-between; margin-block-start: var(--space-5); font-family: var(--font-numeric); font-size: var(--fs-body-sm); }

/* ============================================================
   DRAWER (cart, mobile nav, mobile filters)
   ============================================================ */
.overlay {
  position: fixed; inset: 0;
  z-index: var(--z-overlay);
  background: var(--color-overlay);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
}
.overlay.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }

.drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: var(--z-drawer);
  width: min(420px, 100vw);
  display: flex; flex-direction: column;
  background: var(--color-background);
  box-shadow: var(--shadow-lg);
  /* translate uses a logical sign so the drawer leaves toward the
     inline-end edge in both LTR and RTL */
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--dur-drawer) var(--ease-out), visibility 0s linear var(--dur-drawer);
}
[dir="rtl"] .drawer { transform: translateX(-100%); }
.drawer.is-open { transform: translateX(0); visibility: visible; transition-delay: 0s; }
[dir="rtl"] .drawer.is-open { transform: translateX(0); }

.drawer--start { inset-inline-end: auto; inset-inline-start: 0; transform: translateX(-100%); }
[dir="rtl"] .drawer--start { transform: translateX(100%); }
.drawer--start.is-open, [dir="rtl"] .drawer--start.is-open { transform: translateX(0); }

/* Bottom sheet - mobile filters and sort */
.drawer--sheet {
  inset-inline: 0;
  inset-block: auto 0;
  width: 100%;
  max-height: 88vh;
  border-start-start-radius: var(--radius-xl);
  border-start-end-radius: var(--radius-xl);
  transform: translateY(100%);
}
[dir="rtl"] .drawer--sheet { transform: translateY(100%); }
.drawer--sheet.is-open, [dir="rtl"] .drawer--sheet.is-open { transform: translateY(0); }
.drawer--sheet::before {
  content: "";
  width: 38px; height: 4px;
  background: var(--color-border-strong);
  border-radius: var(--radius-pill);
  margin: var(--space-4) auto 0;
}

.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-6);
  border-block-end: 1px solid var(--color-border);
  flex: 0 0 auto;
}
.drawer__title { font-size: var(--fs-h4); font-weight: var(--fw-bold); }
.drawer__body { flex: 1 1 auto; overflow-y: auto; padding: var(--space-6); }
.drawer__foot {
  flex: 0 0 auto;
  padding: var(--space-6);
  padding-block-end: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
  border-block-start: 1px solid var(--color-border);
  background: var(--color-background);
}

/* ============================================================
   MODAL
   ============================================================ */
.modal {
  position: fixed;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  z-index: var(--z-modal);
  width: min(520px, calc(100vw - var(--space-8)));
  max-height: 84vh;
  overflow-y: auto;
  background: var(--color-background);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-8);
  transform: translate(-50%, -50%) scale(0.97);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
}
[dir="rtl"] .modal { transform: translate(50%, -50%) scale(0.97); }
.modal.is-open { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); transition-delay: 0s; }
[dir="rtl"] .modal.is-open { transform: translate(50%, -50%) scale(1); }

/* ============================================================
   TOAST
   ============================================================ */
.toast-stack {
  position: fixed;
  inset-block-end: var(--space-7);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: var(--space-3);
  width: min(400px, calc(100vw - var(--space-8)));
  pointer-events: none;
}
[dir="rtl"] .toast-stack { transform: translateX(50%); }
@media (max-width: 1023px) { .toast-stack { inset-block-end: calc(var(--bottomnav-h) + var(--space-5)); } }

.toast {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-ink);
  color: var(--color-text-inverse);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-size: var(--fs-body-sm);
  pointer-events: auto;
  animation: orvena-toast-in var(--dur-base) var(--ease-out);
}
@keyframes orvena-toast-in { from { opacity: 0; transform: translateY(10px); } }
.toast svg { width: 18px; height: 18px; flex: 0 0 auto; }
.toast--success svg { color: #7BD6AB; }
.toast__action { margin-inline-start: auto; font-weight: var(--fw-bold); color: var(--color-accent); }

/* ============================================================
   PAGINATION
   ============================================================ */
.pager { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin-block-start: var(--space-11); }
.pager__item {
  min-width: 40px; height: 40px;
  display: grid; place-items: center;
  padding-inline: var(--space-3);
  border-radius: var(--radius-md);
  font-family: var(--font-numeric);
  font-size: var(--fs-body-sm);
  color: var(--color-text-secondary);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.pager__item:hover { background: var(--color-surface-alt); color: var(--color-text); }
.pager__item[aria-current="page"] { background: var(--color-ink); color: #fff; font-weight: var(--fw-bold); }
.pager__item:disabled { opacity: 0.35; cursor: not-allowed; }
.pager__item svg { width: 16px; height: 16px; }

/* ============================================================
   TABS / ACCORDION
   ============================================================ */
.tabs { display: flex; gap: var(--space-8); border-block-end: 1px solid var(--color-border); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs__tab {
  padding-block: var(--space-5);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
  white-space: nowrap;
  border-block-end: 2px solid transparent;
  margin-block-end: -1px;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.tabs__tab:hover { color: var(--color-text); }
.tabs__tab[aria-selected="true"] { color: var(--color-text); border-block-end-color: var(--color-ink); }

.acc { border-block-end: 1px solid var(--color-border); }
.acc__head {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-6);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  text-align: start;
}
.acc__head svg { width: 18px; height: 18px; color: var(--color-text-muted); transition: transform var(--dur-base) var(--ease-out); flex: 0 0 auto; }
.acc[open] .acc__head svg { transform: rotate(180deg); }
.acc__body { padding-block-end: var(--space-6); color: var(--color-text-secondary); }

/* ============================================================
   SKELETON
   Geometry mirrors the real component, never generic grey bars.
   ============================================================ */
.sk {
  background: linear-gradient(90deg, var(--color-surface-alt) 25%, var(--color-surface-sunken) 37%, var(--color-surface-alt) 63%);
  background-size: 400% 100%;
  animation: orvena-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
[dir="rtl"] .sk { animation-direction: reverse; }
@keyframes orvena-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.sk--frame { aspect-ratio: var(--ratio-product); border-radius: var(--radius-md); margin-block-end: var(--space-4); }
.sk--line { height: 11px; }
.sk--brand { height: 11px; width: 38%; margin-block-end: var(--space-3); }
.sk--name  { height: 11px; width: 92%; margin-block-end: var(--space-2); }
.sk--name2 { height: 11px; width: 64%; margin-block-end: var(--space-4); }
.sk--price { height: 15px; width: 46%; }
.sk--circle { aspect-ratio: 1/1; border-radius: var(--radius-pill); }

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty { text-align: center; padding-block: var(--space-13); max-width: 420px; margin-inline: auto; }
.empty__icon {
  width: 64px; height: 64px;
  margin-inline: auto;
  margin-block-end: var(--space-6);
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
}
.empty__icon svg { width: 28px; height: 28px; }
.empty__title { font-size: var(--fs-h3); margin-block-end: var(--space-4); }
.empty__text { color: var(--color-text-secondary); margin-block-end: var(--space-7); }

/* ============================================================
   TRUST STRIP
   ============================================================ */
.trust { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-6) var(--space-5); }
@media (min-width: 768px) { .trust { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.trust__item { display: flex; align-items: center; gap: var(--space-4); }
.trust__icon { flex: 0 0 auto; color: var(--color-accent); }
.trust__icon svg { width: 22px; height: 22px; }
.trust__title { font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); }
.trust__sub { font-size: var(--fs-caption); color: var(--color-text-muted); }

/* ============================================================
   MOBILE BOTTOM NAV
   ============================================================ */
.bottomnav {
  position: fixed;
  inset-block-end: 0; inset-inline: 0;
  z-index: var(--z-sticky);
  display: flex;
  height: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px));
  padding-block-end: env(safe-area-inset-bottom, 0px);
  background: var(--color-background);
  border-block-start: 1px solid var(--color-border);
}
@media (min-width: 1024px) { .bottomnav { display: none; } }
.bottomnav__item {
  flex: 1 1 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  font-size: 10px;
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  position: relative;
  transition: color var(--dur-fast) var(--ease-out);
}
.bottomnav__item svg { width: 21px; height: 21px; }
.bottomnav__item[aria-current="page"] { color: var(--color-ink); }
.bottomnav__item .icon-count { inset-block-start: 4px; inset-inline-end: calc(50% - 20px); }

/* ============================================================
   STICKY PURCHASE BAR (mobile PDP)
   ============================================================ */
.buybar {
  position: fixed;
  inset-inline: 0;
  inset-block-end: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-sticky);
  display: flex; align-items: center; gap: var(--space-5);
  padding: var(--space-4) var(--gutter-sm);
  background: var(--color-background);
  border-block-start: 1px solid var(--color-border);
  box-shadow: 0 -4px 16px rgba(26,22,20,.06);
  transform: translateY(120%);
  transition: transform var(--dur-base) var(--ease-out);
}
.buybar.is-visible { transform: translateY(0); }
@media (min-width: 1024px) { .buybar { display: none; } }
.buybar .btn { flex: 1 1 auto; min-width: 0; }
/* A Persian price ("10,062,000 تومان" plus a struck original) is ~180px.
   Without shrink permission it pushes the CTA off a 360px screen. */
.buybar .price { flex: 0 1 auto; min-width: 0; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--color-surface); border-block-start: 1px solid var(--color-border); margin-block-start: var(--space-13); }
.footer__top { padding-block: var(--space-11); }
.footer__cols { display: grid; grid-template-columns: minmax(0,1fr); gap: 0; }
@media (min-width: 768px) {
  .footer__cols { grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--space-8); }
}
@media (min-width: 1280px) { .footer__cols { grid-template-columns: 1.4fr repeat(4, minmax(0,1fr)); gap: var(--space-9); } }
.footer__brandcol { margin-block-end: var(--space-9); }
@media (min-width: 768px) { .footer__brandcol { grid-column: 1 / -1; margin-block-end: var(--space-10); } }
@media (min-width: 1280px) { .footer__brandcol { grid-column: auto; margin-block-end: 0; } }

.footer__group { border-block-end: 1px solid var(--color-border); }
@media (min-width: 768px) { .footer__group { border: 0; } }
.footer__grouphead {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding-block: var(--space-5);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-bold);
  text-align: start;
}
.footer__grouphead svg { width: 16px; height: 16px; transition: transform var(--dur-base) var(--ease-out); }
@media (min-width: 768px) {
  .footer__grouphead { padding-block: 0 var(--space-5); pointer-events: none; }
  .footer__grouphead svg { display: none; }
}
.footer__group[open] .footer__grouphead svg { transform: rotate(180deg); }
.footer__list { display: flex; flex-direction: column; gap: var(--space-4); padding-block-end: var(--space-6); }
@media (min-width: 768px) { .footer__list { padding-block-end: 0; } }
.footer__list a { font-size: var(--fs-body-sm); color: var(--color-text-secondary); transition: color var(--dur-fast) var(--ease-out); }
.footer__list a:hover { color: var(--color-accent); }
.footer__bottom {
  border-block-start: 1px solid var(--color-border);
  padding-block: var(--space-7);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5);
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}
.pay-marks { display: flex; gap: var(--space-3); align-items: center; }
.pay-mark {
  height: 26px; min-width: 40px;
  display: grid; place-items: center;
  padding-inline: var(--space-3);
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-numeric);
  font-size: 9px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
}

/* ============================================================
   NEWSLETTER
   ============================================================ */
.newsletter { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.newsletter .input { flex: 1 1 220px; min-width: 0; }

/* ============================================================
   CAROUSEL CONTROLS
   ============================================================ */
.carousel { position: relative; }
.carousel__nav {
  position: absolute;
  inset-block-start: 50%;
  translate: 0 -50%;
  width: 40px; height: 40px;
  display: none;
  place-items: center;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  color: var(--color-text);
  z-index: var(--z-raised);
  transition: background-color var(--dur-fast) var(--ease-out);
}
@media (min-width: 1024px) { .carousel:hover .carousel__nav { display: grid; } }
.carousel__nav:hover { background: var(--color-surface-alt); }
.carousel__nav svg { width: 17px; height: 17px; }
.carousel__nav--prev { inset-inline-start: calc(var(--space-7) * -1); }
.carousel__nav--next { inset-inline-end: calc(var(--space-7) * -1); }
.carousel__track > * { width: 46%; }
@media (min-width: 600px)  { .carousel__track > * { width: 30%; } }
@media (min-width: 1024px) { .carousel__track > * { width: calc((100% - var(--grid-gap) * 3) / 4); } }
.carousel__track { gap: var(--grid-gap-sm); }
@media (min-width: 1024px) { .carousel__track { gap: var(--grid-gap); } }

/* Dots */
.dots { display: flex; justify-content: center; gap: var(--space-3); margin-block-start: var(--space-6); }
.dots button { width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--color-border-strong); transition: all var(--dur-base) var(--ease-out); }
.dots button[aria-current="true"] { width: 20px; background: var(--color-ink); }

/* Currency codes are Latin runs inside RTL chrome - same isolation the
   brand name needs, for the same reason. */
.cur-code {
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

/* Coming-soon reads as anticipation, not unavailability: ink-on-cream rather
   than the muted grey a sold-out card gets. */
.badge--soon { background: var(--color-ink); color: var(--color-surface); }

/* Priority+ overflow trigger. Matches a nav link exactly so the row reads as
   one sequence rather than "links, then a control". */
.navbar__item--more > .navbar__link {
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
/* The overflow panel is a single column, so it should not stretch the full
   mega width - it would read as an empty department. It also has to sit under
   its trigger: the More item is always the last in the bar, so the column is
   pushed to the inline-end. Aligned to the inline-start instead - the default
   for a block - it lands at the far end of the bar from the button that opened
   it: the right edge in Arabic, under nothing. */
.mega--compact .mega__inner { display: block; max-width: 260px; margin-inline-start: auto; }
.mega--compact .mega__list  { padding-block: var(--space-2); }

/* ------------------------------------------------------------
   PRODUCT IMAGERY
   One component covers both cases: a photograph, and the
   generated artwork standing in until there is one. Both occupy
   exactly the same box, so a catalogue that is half photographed
   does not sit at two different heights.
   ------------------------------------------------------------ */
.pimg { display: block; position: relative; }
.pimg img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* The gallery's own frames. The main image is the largest thing on the page
   and the one a shopper is waiting for, so it gets its box reserved by
   width/height on the element rather than by a guess in CSS. */
.gallery__main .pimg,
.gallery__main .pimg img { width: 100%; height: 100%; }

.gallery__thumb .pimg,
.gallery__thumb .pimg img { width: 100%; height: 100%; }

/* A quiet status line: a reset link sent, an account signed out. Not an error,
   and deliberately not a toast — it has to survive the redirect that caused it
   and still be there when the page it lands on is read, which a toast is not.
   The accent rule sits on the inline-start so it reads as a margin mark in
   both directions rather than flipping to the wrong side of the text. */
.note {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  border-inline-start: 3px solid var(--color-accent);
  font-size: var(--fs-body-sm);
  color: var(--color-text);
}

/* The same box, marked as a fault rather than an outcome. */
.note--error {
  border-inline-start-color: var(--color-error);
  background: color-mix(in srgb, var(--color-error) 7%, var(--color-surface));
}

/* Error states borrow the empty-state skeleton but signal fault rather than
   absence: the icon sits on a warning tint instead of the neutral surface. */
.empty--error .empty__icon--error {
  background: color-mix(in srgb, var(--color-error) 10%, var(--color-surface));
  color: var(--color-error);
}

/* ------------------------------------------------------------
   LIST VIEW
   The same .pcard reflowed into a row - not a second component.
   The card's own children are re-placed on a two-column grid, so
   every state it already supports (sold out, coming soon, sale,
   wishlist, quick add) keeps working with no extra markup.
   ------------------------------------------------------------ */
.product-grid.is-list { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }

.product-grid.is-list .pcard {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  grid-template-areas:
    "frame brand"
    "frame name"
    "frame meta";
  align-content: start;
  gap: var(--space-1) var(--space-6);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.product-grid.is-list .pcard__frame { grid-area: frame; align-self: start; }
.product-grid.is-list .pcard__brand { grid-area: brand; }
.product-grid.is-list .pcard__name  { grid-area: name; }
.product-grid.is-list .pcard__meta  { grid-area: meta; margin-block-start: var(--space-3); }
/* In a row the name has room for a third line before it starts to crowd. */
.product-grid.is-list .pcard__name { -webkit-line-clamp: 3; }

/* The wishlist button is positioned against the card in grid view; in list
   view it belongs at the far end of the row, which inset-inline handles
   without a direction override. */
.product-grid.is-list .pcard__wish {
  inset-block-start: var(--space-5);
  inset-inline-end: var(--space-5);
  inset-inline-start: auto;
}
/* Quick add stops being a hover reveal over the image and becomes a real
   button in the row - there is space for it, and hiding it would waste it. */
.product-grid.is-list .pcard__quickadd {
  position: static;
  grid-area: meta;
  justify-self: end;
  align-self: center;
  width: auto;
  min-width: 8.5rem;
  opacity: 1;
  transform: none;
}
@media (min-width: 768px) {
  .product-grid.is-list .pcard {
    grid-template-columns: 148px minmax(0, 1fr) auto;
    grid-template-areas:
      "frame brand cta"
      "frame name  cta"
      "frame meta  cta";
    align-items: start;
    padding: var(--space-6);
  }
  .product-grid.is-list .pcard__quickadd { grid-area: cta; align-self: center; }
}

/* ------------------------------------------------------------
   Filter rail additions
   ------------------------------------------------------------ */
.range-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.input--sm { min-height: var(--control-h-sm); padding-block: var(--space-2); font-size: var(--fs-body-sm); }

/* A facet that would return nothing is dimmed and disabled rather than
   hidden. Removing it makes the rail jump on every click and hides the fact
   that the option exists at all; dimming says "not with your current
   selection", which is the true statement. */
.check.is-empty { opacity: .42; cursor: not-allowed; }
.check.is-empty input { cursor: not-allowed; }

/* Completed checkout steps are buttons; the current and future ones are not.
   They must still sit on the same baseline as the spans beside them. */
button.step { background: none; border: 0; font: inherit; color: inherit; cursor: pointer; }
button.step:hover .step__label { color: var(--color-ink); }
.step.is-done .step__n { background: var(--color-success); border-color: var(--color-success); color: #fff; }
.step.is-done .step__n svg { width: 13px; height: 13px; }
.step__line.is-done { background: var(--color-success); }

/* A field the shopper must revisit. Colour alone is not the signal - the
   error message above the actions says what is wrong in words. */
.input.is-error, .textarea.is-error { border-color: var(--color-error); }
.field__error { color: var(--color-error); font-size: var(--fs-body-sm); }

/* ============================================================================
   ADVISOR — the beauty advisor panel

   Logical properties throughout (inline-start, not left). This panel has to
   sit in the corner nearest the reader's thumb, and in Arabic and Persian that
   is the other corner; `left: 24px` would have pinned it to the wrong side of
   the screen in two of this shop's three languages.
   ========================================================================= */

.advisor-open {
  position: fixed;
  inset-block-end: var(--space-7);
  inset-inline-end: var(--space-7);
  z-index: var(--z-drawer);
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-background);
  color: var(--color-text);
  font: inherit;
  font-size: var(--fs-caption);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
}

.advisor-open:hover { border-color: var(--color-border-strong); }
.advisor-open__mark { color: var(--color-accent); display: inline-flex; }

.advisor[hidden] { display: none; }

.advisor {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
}

.advisor__scrim {
  position: absolute;
  inset: 0;
  background: var(--color-overlay);
}

.advisor__panel {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  display: flex;
  flex-direction: column;
  width: min(420px, 100%);
  max-height: min(680px, 100%);
  height: 100%;
  background: var(--color-background);
  border-inline-start: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
}

@media (min-width: 768px) {
  .advisor__panel {
    inset-block-end: var(--space-7);
    inset-inline-end: var(--space-7);
    height: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
  }
}

.advisor__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-6);
  border-block-end: 1px solid var(--color-border);
}

.advisor__title { font-size: var(--fs-body); margin: 0; }
.advisor__sub { margin: var(--space-1) 0 0; }
.advisor__head-actions { display: flex; gap: var(--space-2); flex-shrink: 0; }

.advisor__icon {
  display: inline-flex;
  padding: var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
}

.advisor__icon:hover { background: var(--color-surface); color: var(--color-text); }

.advisor__thread {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.advisor__msg { max-width: 92%; }
.advisor__msg p { margin: 0 0 var(--space-3); }
.advisor__msg p:last-child { margin-block-end: 0; }
.advisor__greet { font-weight: var(--fw-medium); }

.advisor__msg--them {
  align-self: flex-start;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.advisor__msg--me {
  align-self: flex-end;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-ink);
  color: var(--color-text-inverse);
}

.advisor__msg--trouble {
  align-self: stretch;
  max-width: 100%;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-warning-soft);
  color: var(--color-text);
}

/* Three dots while the advisor is thinking. A tool round trip takes seconds,
   and a panel that does nothing for five of them reads as broken. */
.advisor__wait { display: inline-flex; gap: var(--space-2); align-items: center; }

.advisor__wait span {
  width: 5px;
  height: 5px;
  border-radius: var(--radius-pill);
  background: var(--color-text-muted);
  animation: advisor-pulse 1.2s infinite ease-in-out;
}

.advisor__wait span:nth-child(2) { animation-delay: 0.15s; }
.advisor__wait span:nth-child(3) { animation-delay: 0.3s; }

@keyframes advisor-pulse {
  0%, 60%, 100% { opacity: 0.25; }
  30% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .advisor__wait span { animation: none; opacity: 0.5; }
}

/* ---------------------------------------------------------------- the picks */

.advisor__picks {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.advisor__pick {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-background);
  color: inherit;
  text-decoration: none;
}

.advisor__pick:hover { border-color: var(--color-border-strong); background: var(--color-surface); }

.advisor__pick-img {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
}

.advisor__pick-body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.advisor__pick-brand { text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.advisor__pick-name { font-size: var(--fs-caption); }
.advisor__pick-price { font-size: var(--fs-caption); font-weight: var(--fw-medium); }

/* -------------------------------------------------------- chips and the box */

.advisor__chips {
  display: flex;
  gap: var(--space-3);
  padding: 0 var(--space-6) var(--space-5);
  overflow-x: auto;
  scrollbar-width: none;
}

.advisor__chips[hidden] { display: none; }
.advisor__chips::-webkit-scrollbar { display: none; }

.advisor__chip {
  flex: 0 0 auto;
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-background);
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--fs-caption);
  cursor: pointer;
}

.advisor__chip:hover { border-color: var(--color-accent); color: var(--color-text); }

.advisor__ask {
  display: flex;
  gap: var(--space-3);
  padding: 0 var(--space-6);
  align-items: center;
}

.advisor__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-background);
  color: var(--color-text);
  font: inherit;
  font-size: var(--fs-caption);
}

.advisor__send {
  flex-shrink: 0;
  display: inline-flex;
  padding: var(--space-4);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-text-inverse);
  cursor: pointer;
}

.advisor__send:disabled { background: var(--color-border-strong); cursor: default; }

/* The arrow points the way the language runs. In Arabic and Persian the send
   button pointing right would point back at the text somebody just typed. */
[dir="rtl"] .advisor__send svg { transform: scaleX(-1); }

.advisor__foot {
  margin: 0;
  padding: var(--space-5) var(--space-6);
  color: var(--color-text-muted);
  text-align: center;
}

/* ----------------------------------------------------------------------------
   PICKER — language and currency, on the phone

   The util bar that holds these on a desktop is display:none below 1024px, so
   this is the only way to reach either one on a handset. Hidden at the width
   where the util bar comes back, so the shop never offers the same control
   twice on one screen.
   ------------------------------------------------------------------------- */

.picker { position: relative; }
.picker > summary { list-style: none; cursor: pointer; }
.picker > summary::-webkit-details-marker { display: none; }
.picker > summary::marker { content: ""; }

@media (min-width: 1024px) {
  .picker { display: none; }
}

.picker__menu {
  position: absolute;
  inset-block-start: calc(100% + var(--space-3));
  inset-inline-end: 0;
  z-index: var(--z-dropdown);
  min-width: 180px;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-background);
  box-shadow: var(--shadow-menu);
}

.picker__item {
  display: block;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  color: var(--color-text);
  text-decoration: none;
}

.picker__item:hover { background: var(--color-surface); }

/* The current language stays on the list rather than being dropped from it:
   a menu that hides where you are makes you guess whether it worked. */
.picker__item.is-active { color: var(--color-accent); font-weight: var(--fw-medium); }

.picker__money {
  display: flex;
  gap: var(--space-2);
  margin-block-start: var(--space-3);
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--color-border);
}

.picker__select {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-background);
  color: var(--color-text);
  font: inherit;
  font-size: var(--fs-caption);
}

.picker__go {
  flex-shrink: 0;
  padding: var(--space-2) var(--space-4);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-ink);
  color: var(--color-text-inverse);
  font: inherit;
  font-size: var(--fs-caption);
  cursor: pointer;
}

/* ----------------------------------------------------------------------------
   HOME BANNERS — photographs at the top of the shop

   The hero already had a media layer for its generated scene; a photograph
   takes the same slot rather than a new one, so the copy, the padding and the
   rounding all still apply.
   ------------------------------------------------------------------------- */

.hero__media--photo { overflow: hidden; }

/* A banner with no words over it.

   The hero takes its height from the copy block and lays the media over the
   top, so a picture on its own left the whole section zero pixels tall. Here
   the picture is in flow instead and its own proportions set the height —
   which also means the hero is exactly as tall as the image is, at every
   width, with no aspect ratio guessed in CSS. */
.hero--bare .hero__media--photo { position: static; }
.hero--bare .hero__media--photo img { height: auto; }

.hero__media--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* A banner with no words still has to be a way into the shop. Covers the whole
   hero rather than sitting in a corner, because the picture is the link. */
.hero__whole {
  position: absolute;
  inset: 0;
  z-index: var(--z-raised);
}

.banner-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-block-start: var(--space-5);
}

@media (min-width: 768px) {
  .banner-strip { grid-template-columns: repeat(2, 1fr); }
}

.banner-strip__item {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-md);
  color: var(--color-text-inverse);
  text-decoration: none;
}

.banner-strip__item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform var(--dur-base) var(--ease-out);
}

.banner-strip__item:hover img { transform: scale(1.02); }

@media (prefers-reduced-motion: reduce) {
  .banner-strip__item img { transition: none; }
  .banner-strip__item:hover img { transform: none; }
}

/* Only drawn when there are words. A scrim over a picture nobody wrote on
   would dim it for nothing. */
.banner-strip__label {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  padding: var(--space-8) var(--space-6) var(--space-5);
  background: linear-gradient(to top, rgba(26, 22, 20, 0.62), transparent);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
}

/* ----------------------------------------------------------------------------
   ADMIN SPLIT — a wide table beside a narrow form

   .listing is 248px of rail plus the rest, which is right for filters next to
   a product wall and wrong for every admin screen that pairs a table with a
   form: the table ends up in the rail behind a scrollbar while the form gets
   space it has no use for. This is the other way round.
   ------------------------------------------------------------------------- */

.admin-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}

@media (min-width: 1024px) {
  .admin-split {
    /* The table takes what it needs; the form gets enough for an email
       address and no more. */
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--space-9);
  }
}

/* Rows sized by their content. Without this a table in a grid cell inherits
   the stretched height of the tallest track and the rows drift apart. */
.admin-split table { height: auto; }
.admin-split td, .admin-split th { vertical-align: top; }

/* ----------------------------------------------------------------------------
   SLIDER — the pictures at the top of the shop

   Scroll-snap, not transforms. The track is a real horizontally scrolling
   element, so with no JavaScript at all it still scrolls, snaps, and answers
   the keyboard and a touch swipe. The buttons are an enhancement; a carousel
   whose only mechanism is a script is a blank hole at the top of the shop
   whenever the script is slow.

   Logical properties throughout, so the first slide sits on the right in
   Arabic and Persian without a second code path.
   ------------------------------------------------------------------------- */

.slider { position: relative; }

.slider__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  border-radius: var(--radius-md);

  /* The scrollbar is the mechanism, not the interface. */
  scrollbar-width: none;
}

.slider__track::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: reduce) {
  .slider__track { scroll-behavior: auto; }
}

.slider__slide {
  position: relative;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  /* A column, so a shorter caption shares out the height its row was given
     by a longer one instead of leaving a gap under it. */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-md);
  color: var(--color-text);
  text-decoration: none;
  background: var(--color-surface);
}

.slider__slide img {
  display: block;
  width: 100%;
  height: auto;
}

/* Words only where a banner carries them, as a strip under the picture.
   They used to sit on it behind a dark scrim, which covered the catalogue's
   own typography on a wide screen and the whole spread on a phone. */
.slider__copy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-7);
  flex: 1;
  padding: var(--space-5) var(--space-7);
}

.slider__words {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1 1 20rem;
  min-width: 0;
}

.slider__headline { font-size: var(--fs-h4); font-weight: var(--fw-bold); }
.slider__body { font-size: var(--fs-body-sm); color: var(--color-text-secondary); max-width: 70ch; }
.slider__cta { flex: none; pointer-events: none; }

@media (max-width: 767px) {
  .slider__copy { padding: var(--space-4) var(--space-5); }
}

.slider__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-block-start: var(--space-4);
}

.slider__controls[hidden] { display: none; }

.slider__arrow {
  display: inline-flex;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-background);
  color: var(--color-text);
  cursor: pointer;
}

.slider__arrow:hover:not(:disabled) { border-color: var(--color-border-strong); }

/* Disabled rather than hidden at the ends: a control that disappears moves
   everything beside it, and the count would jump on every last slide. */
.slider__arrow:disabled { opacity: 0.35; cursor: default; }

/* The arrows point the way the language runs. */
[dir="rtl"] .slider__arrow svg { transform: scaleX(-1); }

.slider__count {
  font-size: var(--fs-caption);
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
  min-width: 4ch;
  text-align: center;
}

/* --------------------------------------------- departments with a photograph */

.cat-circle__frame--photo { overflow: hidden; }

.cat-circle__frame--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================================
   LISTING FILTERS - one floating button, and the panel it opens
   ============================================================ */

/* Room under the last row, so the button never sits on a card's own. */
.listing--fab { padding-block-end: var(--space-13); }

/* The corner nearest the reader's thumb that the advisor does not use: it
   takes inline-end, so this takes inline-start - the right in Arabic and
   Persian, the left in English. */
.filter-fab {
  position: fixed;
  inset-block-end: calc(var(--space-7) + env(safe-area-inset-bottom, 0px));
  inset-inline-start: var(--space-7);
  z-index: var(--z-sticky);
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 48px;
  padding-inline: var(--space-6);
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-text-inverse);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  box-shadow: var(--shadow-lg);
}
.filter-fab svg { width: 18px; height: 18px; flex: none; }
.filter-fab__count {
  min-width: 20px; height: 20px;
  padding-inline: 6px;
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  background: var(--color-background);
  color: var(--color-ink);
  font-family: var(--font-numeric);
  font-size: 11px;
  font-weight: var(--fw-bold);
  line-height: 1;
}

/* Open on :target without a script, on .is-open with one. */
.filters {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  visibility: hidden;
  transition: visibility 0s linear var(--dur-drawer);
}
.filters:target, .filters.is-open { visibility: visible; transition-delay: 0s; }

.filters__scrim {
  position: absolute;
  inset: 0;
  background: var(--color-overlay);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.filters:target .filters__scrim, .filters.is-open .filters__scrim { opacity: 1; }

/* A sheet from the bottom on a phone... */
.filters__panel {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  display: flex;
  flex-direction: column;
  max-height: 88vh;
  max-height: 88dvh;
  background: var(--color-background);
  border-start-start-radius: var(--radius-xl);
  border-start-end-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  transform: translateY(100%);
  transition: transform var(--dur-drawer) var(--ease-out);
}
.filters:target .filters__panel, .filters.is-open .filters__panel { transform: none; }

/* ...and a panel from the button's own side on anything wider. */
@media (min-width: 768px) {
  .filters__panel {
    inset-block: 0;
    inset-inline-start: 0;
    inset-inline-end: auto;
    width: min(400px, 100vw);
    max-height: none;
    border-radius: 0;
    transform: translateX(-100%);
  }
  [dir="rtl"] .filters__panel { transform: translateX(100%); }
  .filters:target .filters__panel, .filters.is-open .filters__panel { transform: none; }
}

.filters__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-block-end: 1px solid var(--color-border);
}
.filters__title { font-size: var(--fs-h4); font-weight: var(--fw-bold); }

.filters__body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-inline: var(--space-6);
}
.filters .filter-group__head { cursor: pointer; list-style: none; }
.filters .filter-group__head::-webkit-details-marker { display: none; }
.filters .filter-group__head .t-caption { margin-inline-end: auto; font-weight: var(--fw-regular); }

.filters__price { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }

/* Forty brands in a department is ordinary; the list scrolls on its own
   rather than pushing everything under it out of reach. */
.filters__scroll {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-height: 260px;
  overflow-y: auto;
  padding-inline-end: var(--space-2);
}
.filters .check[hidden] { display: none; }

.filters__foot {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  padding-block-end: calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
  border-block-start: 1px solid var(--color-border);
}

@media (prefers-reduced-motion: reduce) {
  .filters, .filters__panel, .filters__scrim { transition: none; }
}