/* Sizeha shell and shared components on Taraz 0.2 (source file).
   From handoff-d2 README §2 to 4 and its frames; values are Taraz tokens. Sizes the tokens do not
   cover (page width, header height, thumbnails) are named once below. */

:root {
  --sz-page-max: 1088px;
  --sz-mega-max: 1040px;
  --sz-header-h: 72px;
  --sz-header-h-mobile: 64px;
  --sz-brand-mark: 32px;
  --sz-search-max: 640px;
  --sz-drawer-w: 320px;
  --sz-feature-media: 112px;
  --sz-thumb-w: 40px;
  --sz-thumb-h: 50px;
  --sz-row-thumb: 128px;
  --sz-row-h: 48px;
  --sz-row-h-lg: 56px;
  --sz-row-h-xl: 64px;
  --sz-story-md: 56px;
  --sz-story-lg: 72px;
  --sz-story-w-md: 62px;
  --sz-story-w-lg: 88px;
  --sz-seam: 2.5px;
  --sz-footer-col: 180px;
  --sz-toast-w: 420px;
  --sz-link-min: 24px;
  --sz-crumb-current: 4em;   /* the current page in the breadcrumb: at least this much room beside the links, else its own line */
}

/* ---------- base ---------- */
html { background: var(--bg-canvas); }
body.tz-root { margin: 0; min-height: 100vh; }
.tz-root [hidden] { display: none !important; }
.tz-root img { max-width: 100%; height: auto; }
.sz-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.sz-row { display: flex; }
.sz-minw0 { min-width: 0; }
.sz-main { max-width: var(--sz-page-max); margin: 0 auto; padding: var(--space-32) var(--space-24) 0; display: flex; flex-direction: column; gap: var(--space-48); }
html.sz-lock, html.sz-lock body { overflow: hidden; }
@keyframes sz-fade { from { opacity: 0; } }

/* ---------- header (README §2.1, §2.3) ---------- */
.sz-header { position: relative; z-index: var(--z-floating); background: var(--bg-surface); border-bottom: 1px solid var(--line-subtle); }
.sz-header__bar--desktop { max-width: var(--sz-page-max); margin: 0 auto; padding: 0 var(--space-24); height: var(--sz-header-h); display: flex; align-items: center; gap: var(--space-32); }
.sz-header__bar--mobile { height: var(--sz-header-h-mobile); padding: 0 var(--space-16); display: none; align-items: center; gap: var(--space-8); }
.sz-brand { flex: none; display: inline-flex; align-items: center; gap: var(--space-8); color: var(--text-primary); text-decoration: none; border-radius: var(--radius-indicator); }
.sz-brand--grow { flex: 1; min-width: 0; }
/* The mark beside the name, as in sizeha-logo-header-2x.png (160 x 40): 32 px box, ink 31 px, about 13 px of ink to ink. */
.sz-brand__mark { flex: none; display: block; width: var(--sz-brand-mark); height: var(--sz-brand-mark); }
.sz-brand__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sz-header__main { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-32); }
.sz-header__nav { flex: 1; min-width: 0; display: flex; gap: var(--space-8); }
.sz-header__actions { flex: none; display: flex; gap: var(--space-8); }
.sz-header__search { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-32); margin: 0; }
.sz-header__spacer { flex: 1; }
@media (max-width: 959.98px) {
  .sz-header__bar--desktop, .sz-mega { display: none !important; }
  .sz-header__bar--mobile { display: flex; }
}

/* ---------- search (README §2.2) ---------- */
.sz-search__anchor { position: relative; flex: 1; min-width: 0; max-width: var(--sz-search-max); height: var(--control-md); }
.sz-search__field .tz-field__help:empty { display: none; }
.sz-search__field .tz-field__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.sz-search__panel { position: absolute; top: calc(var(--control-md) + var(--space-16)); inset-inline: 0; z-index: var(--z-floating); display: grid; gap: var(--space-24); padding: var(--space-24);
  background: var(--bg-raised); border: 1px solid var(--line-default); border-radius: var(--radius-frame); box-shadow: var(--shadow-floating); }
.sz-search__group { display: grid; gap: var(--space-8); }
.sz-search__chips { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.sz-search__list { display: grid; }
.sz-search__row { display: flex; align-items: center; gap: var(--space-16); min-height: var(--sz-row-h-lg); padding: var(--space-8); margin: 0 calc(var(--space-8) * -1);
  border-radius: var(--radius-control); color: var(--text-primary); text-decoration: none; transition: background-color var(--duration-hover) var(--ease-standard); }
.sz-search__row:hover { background: var(--bg-hover); }
.sz-search__row--tutorial { min-height: var(--sz-row-h); }
.sz-search__thumb { position: relative; width: var(--sz-thumb-w); height: var(--sz-thumb-h); flex: none; border-radius: var(--radius-control); overflow: hidden; background: var(--bg-sunken); }
.sz-search__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sz-search__text { display: grid; flex: 1; min-width: 0; }
.sz-search__price { flex: none; }
.sz-search__tutorial-title { flex: 1; min-width: 0; }
.sz-search__none { display: grid; gap: var(--space-8); }
.sz-search__none p { margin: 0; }

.sz-msearch { position: fixed; inset: 0; z-index: var(--z-overlay); background: var(--bg-canvas); border-bottom: 1px solid var(--line-subtle); overflow-y: auto; }
.sz-msearch__form { display: flex; flex-direction: column; gap: var(--space-24); margin: 0; padding-block: var(--space-12) var(--space-24); padding-inline: var(--space-16) var(--space-24); }
.sz-msearch__top { display: flex; align-items: flex-start; gap: var(--space-8); }
.sz-msearch__top > .tz-field { flex: 1; min-width: 0; }
.sz-msearch__results { display: grid; gap: var(--space-24); padding-inline-end: var(--space-8); }
.sz-msearch .sz-search__row { min-height: var(--sz-row-h-xl); }
.sz-msearch .sz-search__row--tutorial { min-height: var(--sz-row-h); }

/* ---------- mega menu (README §2.1) ---------- */
.sz-mega { position: absolute; top: 100%; inset-inline: 0; padding: var(--space-8) var(--space-24) 0; }
.sz-mega__frame { max-width: var(--sz-mega-max); margin: 0 auto; padding: var(--space-24); background: var(--bg-raised); border: 1px solid var(--line-default);
  border-radius: var(--radius-frame); box-shadow: var(--shadow-floating); animation: sz-mega-in var(--duration-expand) var(--ease-enter); }
@keyframes sz-mega-in { from { opacity: 0; transform: translateY(calc(var(--travel-md) * -1)); } }
.sz-mega__panel { display: grid; gap: var(--space-24); }
.sz-mega__grid { display: grid; gap: var(--space-32); align-items: start; }
.sz-mega__grid--patterns { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr); }
.sz-mega__grid--tutorials { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); }
.sz-mega__col { display: grid; gap: var(--space-8); }
.sz-mega__list { display: grid; }
.sz-mega__row { display: flex; align-items: center; gap: var(--space-16); min-height: var(--sz-row-h); padding: 0 var(--space-8); margin: 0 calc(var(--space-8) * -1);
  border-radius: var(--radius-control); color: var(--text-primary); text-decoration: none; transition: background-color var(--duration-hover) var(--ease-standard); }
.sz-mega__row:hover { background: var(--bg-hover); }
.sz-mega__row-label { flex: 1; min-width: 0; }
/* Many categories (14 in the catalog of 23 Mehr 1405): two columns read top to bottom, so the
   panel stays within one screen at 960 and 1440 (EXCEPTIONS SZ-31). Up to 8 rows: one column as drawn. */
.sz-mega__grid--patterns:has(.sz-mega__row:nth-child(9)) { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.5fr); }
.sz-mega__list:has(> .sz-mega__row:nth-child(9)) { display: block; columns: 2; column-gap: var(--space-16); }
.sz-mega__list:has(> .sz-mega__row:nth-child(9)) > .sz-mega__row { break-inside: avoid; }
.sz-mega__form { display: grid; padding: var(--space-16) 0; border-bottom: 1px solid var(--line-subtle); }
.sz-mega__notice { padding-top: var(--space-8); }
.sz-mega__featured { display: flex; gap: var(--space-16); padding: var(--space-16); border: 1px solid var(--line-default); border-radius: var(--radius-control);
  color: var(--text-primary); text-decoration: none; transition: border-color var(--duration-hover) var(--ease-standard); }
.sz-mega__featured:hover { border-color: var(--line-control); }
.sz-mega__featured-media { flex: none; width: var(--sz-feature-media); aspect-ratio: 4 / 5; }
.sz-mega__featured-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-8); }
.sz-mega__featured-price { margin-top: auto; }
.sz-mega__tutorials { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-24); }
.sz-mega__tutorial { display: grid; gap: var(--space-8); align-content: start; padding: var(--space-8); margin: calc(var(--space-8) * -1); border-radius: var(--radius-control);
  color: var(--text-primary); text-decoration: none; transition: background-color var(--duration-hover) var(--ease-standard); }
.sz-mega__tutorial:hover { background: var(--bg-hover); }
.sz-media-16x9 { aspect-ratio: 16 / 9; }
.sz-mega__foot { display: flex; align-items: center; gap: var(--space-8); padding-top: var(--space-24); border-top: 1px solid var(--line-subtle); }

/* ---------- mobile menu (README §2.3) ---------- */
.sz-scrim { position: fixed; inset: 0; z-index: var(--z-overlay); background: var(--scrim); animation: sz-fade var(--duration-page) var(--ease-standard); }
.sz-drawer { position: fixed; top: 0; bottom: 0; inset-inline-start: 0; z-index: calc(var(--z-overlay) + 1); width: min(var(--sz-drawer-w), 100%);
  display: flex; flex-direction: column; gap: var(--space-24); padding: var(--space-16) var(--space-24) var(--space-24); overflow-y: auto;
  background: var(--bg-surface); border-inline-end: 1px solid var(--line-subtle); border-start-end-radius: var(--radius-frame); border-end-end-radius: var(--radius-frame);
  box-shadow: var(--shadow-overlay); animation: sz-drawer-in var(--duration-page) var(--ease-enter); }
@keyframes sz-drawer-in { from { transform: translateX(-100%); } }
[dir="rtl"] .sz-drawer { animation-name: sz-drawer-in-rtl; }
@keyframes sz-drawer-in-rtl { from { transform: translateX(100%); } }
.sz-drawer__head { display: flex; align-items: center; gap: var(--space-8); min-height: var(--control-md); }
.sz-drawer__brand { flex: 1; }
.sz-drawer__nav { display: grid; }
.sz-drawer__link { display: flex; align-items: center; gap: var(--space-16); min-height: var(--sz-row-h-lg); padding: 0 var(--space-8); margin: 0 calc(var(--space-8) * -1);
  border-radius: var(--radius-control); border-bottom: 1px solid var(--line-subtle); color: var(--text-primary); text-decoration: none;
  transition: background-color var(--duration-hover) var(--ease-standard); }
.sz-drawer__link:hover { background: var(--bg-hover); }
.sz-drawer__link > span:first-child { flex: 1; min-width: 0; }
.sz-drawer__chevron { color: var(--text-tertiary); }
.sz-drawer__social { margin-top: auto; }
.sz-social { display: flex; flex-wrap: wrap; gap: var(--space-8); }

@media (prefers-reduced-motion: reduce) {
  .sz-mega__frame, .sz-drawer, .sz-scrim { animation: sz-fade 100ms linear; }
}

/* ---------- ShippingNotice (README §4.3) ---------- */
.sz-notice__text { display: grid; gap: 0; }
.sz-notice__title { font-weight: 600; }
.sz-notice__body { text-wrap: pretty; }

/* ---------- footer (README §2.4 and the later SiteFooter) ---------- */
.sz-footer { margin-top: var(--space-48); background: var(--bg-surface); border-top: 1px solid var(--line-subtle); }
.sz-footer__grid { max-width: var(--sz-page-max); margin: 0 auto; padding: var(--space-48) var(--space-24) var(--space-32); display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--sz-footer-col)), 1fr)); gap: var(--space-32) var(--space-48); align-items: start; }
.sz-footer__col, .sz-footer__nav { display: grid; gap: var(--space-8); justify-items: start; min-width: 0; }
.sz-footer__link { display: inline-flex; align-items: center; min-height: var(--sz-link-min); color: var(--text-secondary); text-decoration: none; border-radius: var(--radius-indicator);
  transition: color var(--duration-hover) var(--ease-standard); }
.sz-footer__link:hover { color: var(--text-primary); }
.sz-footer__phone { justify-self: start; color: var(--text-primary); text-decoration: none; }
a.sz-footer__phone:hover { text-decoration: underline; }
.sz-footer__enamad { min-width: 0; }
.sz-footer__legal { max-width: var(--sz-page-max); margin: 0 auto; padding: 0 var(--space-24); }
.sz-footer__legal-row { border-top: 1px solid var(--line-subtle); padding: var(--space-16) 0 var(--space-24); }

/* ---------- story bar (README §3.1) ---------- */
.sz-stories { display: flex; gap: var(--space-16); overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; padding-block: var(--space-4); margin-block: calc(var(--space-4) * -1); }
.sz-stories::-webkit-scrollbar { display: none; }
.sz-story { --ring: var(--sz-story-md); flex: none; display: flex; flex-direction: column; align-items: center; gap: var(--space-8); width: var(--sz-story-w-md);
  padding: 0; border: 0; background: transparent; color: var(--text-primary); font: inherit; cursor: pointer; border-radius: var(--radius-control); -webkit-tap-highlight-color: transparent; }
.sz-story__ring { position: relative; display: block; width: var(--ring); height: var(--ring); flex: none; }
.sz-story__line { position: absolute; inset: 0; border-radius: var(--radius-full); }
.sz-story.is-unseen .sz-story__line { border: var(--sz-seam) dashed var(--brand-text); }
.sz-story.is-seen .sz-story__line { border: 1px solid var(--line-default); }
.sz-story__spinner { position: absolute; inset: 0; width: auto; height: auto; color: var(--brand-text); display: none; }
.sz-story.is-loading .sz-story__spinner { display: block; }
.sz-story.is-loading .sz-story__line { display: none; }
.sz-story__cover { position: absolute; inset: var(--space-4); border-radius: var(--radius-full); overflow: hidden; background: var(--bg-sunken); }
.sz-story__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sz-story.is-loading .sz-story__cover img { visibility: hidden; }
.sz-story__label { max-width: 100%; text-align: center; text-wrap: balance; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sz-story.is-seen .sz-story__label { color: var(--text-secondary); }
.sz-story.is-loading .sz-story__label { color: var(--text-tertiary); }
@media (min-width: 960px) { .sz-story { --ring: var(--sz-story-lg); width: var(--sz-story-w-lg); } }

/* ---------- ProductCard (README §3.3) ---------- */
.sz-card__layout { display: flex; flex-direction: column; gap: var(--space-16); }
.sz-card__media { aspect-ratio: 4 / 5; }
/* A picture fills its frame: .tz-root img (height: auto) comes after Taraz's .tz-card__media > img and would keep the file's own ratio. */
.sz-card__media > img, .sz-card-row__media > img, .sz-cart__media > img, .sz-mega__featured-media > img, .sz-media-16x9 > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sz-card__content { display: flex; flex-direction: column; gap: var(--space-16); min-width: 0; }
.sz-card__head { display: grid; gap: var(--space-8); }
.sz-card__title { margin: 0; }
/* The whole card leads to the product, in every state (owner, 6 Mehr 1405), and nothing looks
   different (owner: no UI change): the name is a link in the name's own colour, without underline,
   and a click elsewhere on the card follows it (shell.js). Nothing is laid over the card: a
   transparent layer changed how Chrome drew the text under it. */
.sz-card__link { color: inherit; text-decoration: none; }
.sz-card, .sz-card-row { cursor: pointer; }
.sz-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); }
/* The size range never breaks inside; when it does not fit beside the badge, it moves whole. */
.sz-card__range { white-space: nowrap; }
.sz-card__prices { display: grid; }
.sz-card-price { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-16); padding: var(--space-8) 0; border-top: 1px solid var(--line-subtle); }
.sz-card-price__amount { display: flex; align-items: baseline; gap: var(--space-4); }
.sz-card-price.is-out .tz-numeric { color: var(--text-tertiary); }
.sz-card__soon { margin: 0; padding: var(--space-8) 0; border-top: 1px solid var(--line-subtle); }
@container tz-card (max-width: 229.98px) {
  .sz-card-price { flex-direction: column; align-items: flex-start; gap: 0; }
}
@container tz-card (min-width: 430px) {
  .sz-card__layout { flex-direction: row; align-items: flex-start; }
  .sz-card__media { flex: 0 0 40%; }
  .sz-card__content { flex: 1 1 0; }
}
/* row layout (EXCEPTIONS TR-1: raw tz-card) */
.sz-card-row { height: 100%; }
.sz-card-row__inner { flex: 1 1 auto; display: flex; gap: var(--space-16); align-items: stretch; min-height: 0; }
.sz-card-row__media { flex: none; align-self: stretch; aspect-ratio: 4 / 5; min-width: var(--sz-row-thumb); max-width: 45%; }
.sz-card-row__media > img { position: absolute; inset: 0; }
.sz-card-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-8); }
.sz-card-row__action { margin-top: auto; display: flex; }

/* ---------- NotifyForm (README §3.4) ---------- */
.sz-notify__form { display: flex; flex-direction: column; gap: var(--space-16); margin: 0; }
.sz-notify__for { display: flex; align-items: center; gap: var(--space-8); }
.sz-notify__title { margin: 0; text-wrap: pretty; }
/* Field and button in one row, the button beside the field's box: the label has a row of its
   own above both and the help (the error) one below the box, so neither moves the button. */
.sz-notify__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-8); align-items: start; }
.sz-notify__field, .sz-notify__field > .tz-field { display: contents; }
.sz-notify__row .tz-field__label { grid-column: 1 / -1; grid-row: 1; }
.sz-notify__row .tz-field__box { grid-column: 1; grid-row: 2; min-width: 0; }
.sz-notify__row .tz-field__help { grid-column: 1; grid-row: 3; }
.sz-notify__row .tz-field__help:empty { display: none; }
.sz-notify__submit { grid-column: 2; grid-row: 2; }

/* ---------- Breadcrumb (README §4.1) ---------- */
.sz-breadcrumb { min-width: 0; }
.sz-breadcrumb__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-8); min-width: 0; }
.sz-breadcrumb__item { display: flex; align-items: center; gap: var(--space-8); min-width: 0; }
/* The current page takes the rest of the line and ends in «…» (README: one line with …).
   Whether it moves to a line of its own depends on the links only, never on its own
   length, so the swap from the fallback font to Peyda cannot move it (layout shift). */
.sz-breadcrumb__item--current { display: block; flex: 1 1 var(--sz-crumb-current); max-width: 100%; }
.sz-breadcrumb__link { display: inline-flex; align-items: center; min-height: var(--sz-link-min); color: var(--text-secondary); text-decoration: none; border-radius: var(--radius-indicator); }
.sz-breadcrumb__link:hover { color: var(--text-primary); text-decoration: underline; }
.sz-breadcrumb__sep { display: flex; color: var(--text-tertiary); }
.sz-breadcrumb__current { display: block; color: var(--text-primary); }

/* ---------- SizeTable (README §3.5) ---------- */
.sz-sizetable { container: sz-sizetable / inline-size; min-width: 0; display: grid; gap: var(--space-8); }
/* Positioned, so the visually hidden full labels of columns scrolled out of view stay inside the box
   instead of widening the page. */
.sz-sizetable__scroll { position: relative; overflow-x: auto; overflow-y: hidden; min-width: 0; border: 1px solid var(--line-subtle); border-radius: var(--radius-control); background: var(--bg-surface); }
.sz-sizetable__table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: max-content; }
.sz-sizetable__table th, .sz-sizetable__table td { padding: var(--space-8) var(--space-16); border-bottom: 1px solid var(--line-subtle); text-align: start; white-space: nowrap; }
.sz-sizetable__table thead th { background: var(--bg-sunken); color: var(--text-secondary); }
.sz-sizetable__corner, .sz-sizetable__size { position: sticky; inset-inline-start: 0; border-inline-end: 1px solid var(--line-subtle); }
.sz-sizetable__corner { z-index: var(--z-raised); }
.sz-sizetable__size { background: var(--bg-surface); }
.sz-sizetable__cell { font-weight: 400; }
.sz-sizetable__short { display: none; }
@container sz-sizetable (max-width: 559.98px) {
  .sz-sizetable__full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .sz-sizetable__short { display: inline; }
}

/* ---------- CartFeedback (README §4.2, EXCEPTIONS TR-2) ---------- */
.sz-toast-host { position: fixed; z-index: var(--z-toast); top: calc(var(--sz-header-h) + var(--space-8)); inset-inline-end: var(--space-24); width: min(var(--sz-toast-w), calc(100% - var(--space-48))); display: grid; gap: var(--space-8); pointer-events: none; }
.sz-toast-host > * { pointer-events: auto; }
.sz-toast { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-16); min-width: 0; padding: var(--space-16); border-radius: var(--radius-control);
  background: var(--bg-raised); border: 1px solid var(--line-default); box-shadow: var(--shadow-floating); animation: sz-fade var(--duration-hover) var(--ease-enter); }
.sz-toast__main { flex: 1 1 200px; min-width: 0; display: flex; align-items: flex-start; gap: var(--space-8); }
.sz-toast__icon { display: flex; margin-top: 2px; }
.sz-toast__icon--success { color: var(--success); }
.sz-toast__icon--error { color: var(--danger); }
.sz-toast__text { display: grid; min-width: 0; }
.sz-toast__actions { display: flex; gap: var(--space-8); flex: none; }
@media (max-width: 959.98px) {
  .sz-toast-host { top: auto; bottom: var(--space-16); inset-inline: var(--space-16); width: auto; }
}

/* ---------- skeleton (README §3.6) ---------- */
.sz-skel { display: block; background: var(--bg-sunken); border-radius: var(--radius-indicator); }