/* ============================================================
   MANAII — V2.3 TRUE RESPONSIVE LAYER
   Source of truth: V2.1 Approved Desktop (inline styles, untouched).
   This layer does three things, in this order:
     1. GLOBAL FLUID SAFETY  — makes every box structurally incapable of
        exceeding its parent. This is what removes horizontal scroll, not
        overflow:hidden on the document.
     2. TOKENS               — one gutter / rhythm / type scale, centralised.
     3. RECOMPOSITION        — deliberate per-component mobile layouts,
        driven by semantic data-m hooks.
   No transform:scale. No zoom. No layout-correcting negative margins.
   Nothing here fires above 1024px, so the approved desktop cannot regress.
   ============================================================ */

/* ---------- 1. GLOBAL FLUID SAFETY (all widths) ---------- */

*, *::before, *::after { box-sizing: border-box; }

/* A flex/grid child's intrinsic content must never widen its track.
   This single rule removes the majority of RTL overflow bugs. */
:where(div, section, article, aside, nav, header, footer, form, label, a, span, p, ul, li) { min-width: 0; }

/* Media never exceeds its container, ever. */
:where(img, svg, video, canvas, iframe) { max-width: 100%; }
:where(img) { height: auto; }
/* …except media that is deliberately sized by its own box (covers, avatars). */
:where(img[style*="height:"]) { height: revert-layer; }

/* Long unbroken runs — order numbers, emails, URLs — wrap instead of pushing. */
:where(p, h1, h2, h3, h4, span, div, a, button, label, li, td) { overflow-wrap: anywhere; }
/* Persian prose wraps on words; only truly unbreakable runs use the fallback. */
:where(p, li) { overflow-wrap: break-word; }

/* Form controls inherit the box, never their UA intrinsic width. */
:where(input, select, textarea, button) { max-width: 100%; font-family: inherit; }

/* ---------- 2. TOKENS ---------- */

:root {
  /* gutter: fluid between 360 and 430, then fixed */
  --m-gutter: clamp(16px, 4.6vw, 24px);
  --m-section: 56px;      /* vertical rhythm between sections */
  --m-block: 24px;        /* gap between blocks inside a section */
  --m-card-pad: 18px;
  --m-radius: 20px;
  --m-radius-sm: 14px;
  --m-tap: 44px;
}
@media (max-width: 768px) { :root { --m-section: 52px; } }
@media (max-width: 390px) { :root { --m-section: 44px; --m-card-pad: 16px; } }

/* ============================================================
   3. RECOMPOSITION — ≤1024 tablet relief
   ============================================================ */
@media (max-width: 1024px) {
  [data-m~="wrap"] { padding-left: 28px !important; padding-right: 28px !important; }
  [data-m~="gap-lg"] { gap: 44px !important; }
  /* The About hero's decorative gold offset frame overhangs -26px past its
     image by design (matching the reference's own inline offset outline) —
     harmless at the full 1180px desktop container, but the tablet-relief
     gutter above (28px) isn't quite enough to absorb it at ≤1024, causing a
     real ~6px document overflow. Halve the overhang rather than remove it. */
  .hero__frame { right: -13px !important; }
  .about-hero .hero__frame { left: -9px !important; right: auto !important; }
  /* Same class of bug, different component: the Home hero's fact chip
     overhangs -34px past its image by design, and the ≤1024 gutter only
     absorbs 20px of it, leaving a genuine 14px document overflow at both
     768 and 1024 (confirmed via getBoundingClientRect: left=-14 at both).
     Halve the overhang, same approach as .hero__frame above. */
  .hero__chip { right: -17px !important; }
}

/* ============================================================
   THE HINGE — ≤900: desktop chrome gives way to mobile chrome
   ============================================================ */
@media (max-width: 900px) {
  /* header: purpose-built mobile bar — logo + three controls, nothing crowded */
  [data-m~="desktop-only"] { display: none !important; }
  [data-m~="mobile-only"] { display: flex !important; }
  [data-m~="hdr"] { height: 68px !important; }
  [data-m~="hdr"] > * { padding-left: var(--m-gutter) !important; padding-right: var(--m-gutter) !important; }
  [data-m~="logo"], [data-m~="logo"] > img { width: 48px !important; height: 48px !important; }
  [data-m~="promo"] { height: auto !important; min-height: 46px !important; padding: 8px var(--m-gutter) !important; text-align: center; }
  [data-m~="promo"] > span { font-size: 13px !important; line-height: 1.7 !important; }
  [data-m~="promo"] > svg { display: none !important; }

  /* every editorial / form / summary grid becomes one column */
  [data-m~="stack"] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--m-block) !important;
  }
  /* explicit mobile source order */
  [data-m~="order-1"] { order: 1 !important; }
  [data-m~="order-2"] { order: 2 !important; }
  [data-m~="order-3"] { order: 3 !important; }

  /* side rails stop being rails */
  [data-m~="rail"] { position: static !important; width: auto !important; top: auto !important; }

  /* card grids: 3/4-up become 2-up on tablet */
  [data-m~="grid-3"], [data-m~="grid-4"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [data-m~="grid-2"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* rhythm */
  [data-m~="section"] { padding-top: 64px !important; padding-bottom: 64px !important; }
  [data-m~="wave"] { height: 58px !important; }
}

/* ============================================================
   PHONE — ≤600 (390 is the canonical design width)
   ============================================================ */
@media (max-width: 600px) {

  /* -- container: one gutter rule for the whole site -- */
  [data-m~="wrap"] {
    max-width: 100% !important;
    padding-left: var(--m-gutter) !important;
    padding-right: var(--m-gutter) !important;
  }

  /* -- rhythm -- */
  [data-m~="section"] { padding-top: var(--m-section) !important; padding-bottom: var(--m-section) !important; }
  [data-m~="wave"] { height: 40px !important; }

  /* -- all card grids go single-column; the card carries the weight -- */
  [data-m~="grid-2"], [data-m~="grid-3"], [data-m~="grid-4"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
  }
  /* except the 2-up shop grid, which is a documented decision (see MOBILE-SHOP) */
  [data-m~="grid-shop"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
  /* The approved 2-up card is compact: two-line subtitle, price row on one
     line (the price clips before the stock pill ever breaks letter by letter),
     small chips that never wrap. */
  [data-m~="grid-shop"] > [data-m~="card"] { padding: 12px; min-width: 0; }
  [data-m~="grid-shop"] h3 { font-size: 16px; line-height: 1.5; }
  [data-m~="grid-shop"] .sub, [data-m~="grid-shop"] .speaker { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; }
  /* Price on its own line (never clipped), availability pill under it. */
  [data-m~="grid-shop"] .card__pricerow { flex-wrap: wrap; gap: 6px; }
  [data-m~="grid-shop"] .card__pricerow .price-now .manaii-price__amount { font-size: 16px; }
  [data-m~="grid-shop"] .card__pricerow .price-now .manaii-price__unit { font-size: 12px; }
  /* On sale, the card's discount flag already says so; the narrow card keeps
     only the price actually charged. */
  [data-m~="grid-shop"] .card__pricerow del.price-was { display: none; }
  [data-m~="grid-shop"] .card__pricerow .pill { flex: none; white-space: nowrap; font-size: 11px; padding: 4px 8px; }
  [data-m~="grid-shop"] .media-chip { max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; padding: 5px 10px; }
  [data-m~="grid-shop"] .event-card__pills { flex-wrap: wrap; gap: 6px; margin-top: 10px; }
  [data-m~="grid-shop"] .event-card__pills .meta-pill { white-space: nowrap; font-size: 11px; padding: 4px 8px; }

  /* -- fixed desktop widths surrender to the container -- */
  [data-m~="fluid"] { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
  [data-m~="fluid-h"] { height: auto !important; }

  /* -- cards -- */
  [data-m~="card"] { border-radius: var(--m-radius) !important; padding: var(--m-card-pad) !important; }
  [data-m~="panel"] { border-radius: var(--m-radius) !important; padding: 22px 18px !important; }

  /* -- intentional in-component horizontal scroll (never the document) -- */
  [data-m~="scroller"] {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    /* bleed to the screen edge so the row reads as scrollable */
    margin-left: calc(var(--m-gutter) * -1) !important;
    margin-right: calc(var(--m-gutter) * -1) !important;
    padding: 2px var(--m-gutter) 6px !important;
  }
  [data-m~="scroller"]::-webkit-scrollbar { display: none; }
  [data-m~="scroller"] > * { flex: 0 0 auto !important; scroll-snap-align: start; }
  [data-m~="scroller-card"] > * { flex: 0 0 78% !important; max-width: 78% !important; }

  /* -- flex rows that must wrap rather than overflow -- */
  [data-m~="wrap-row"] { flex-wrap: wrap !important; row-gap: 14px !important; }

  /* -- table-ish rows become stacked cards -- */
  [data-m~="row"] {
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) !important;
    column-gap: 14px !important; row-gap: 12px !important;
    align-items: start !important;
  }
  [data-m~="row-full"] { grid-column: 1 / -1 !important; }
  [data-m~="row-media"] { width: 72px !important; height: 72px !important; }

  /* -- touch -- */
  [data-m~="tap"] { min-height: var(--m-tap) !important; }
  [data-m~="btn-full"] { width: 100% !important; justify-content: center !important; }

  /* -- page needs room for the mini player + safe area -- */
  [data-m~="page"] { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; }

  /* -- artwork: sized against the viewport, never against desktop coordinates -- */
  [data-m~="art"] { width: 100% !important; max-width: 100% !important; height: auto !important; }
  [data-m~="art-hero"] { aspect-ratio: 4 / 5 !important; height: auto !important; }
  [data-m~="art-sq"] { aspect-ratio: 1 / 1 !important; height: auto !important; }
  [data-m~="art-wide"] { aspect-ratio: 16 / 10 !important; height: auto !important; }
  [data-m~="art-hide"] { display: none !important; }

  /* -- decorative offset frames: keep, but they must not widen the document -- */
  [data-m~="frame-offset"] { inset-inline-start: -8px !important; inset-inline-end: auto !important; top: 10px !important; bottom: auto !important; }
  [data-m~="clip"] { overflow: hidden !important; }

  /* Decorative offset arch outlines (position:absolute + a 2px brand border) are part of the
     art direction and are KEPT — but on a phone their outward offset would widen the document,
     so they are pulled inside their own box instead of being removed. */
  /* React serialises inline styles with spaces, so both forms are matched. */
  [style*="border: 2px solid rgb(245, 193, 0)"],
  [style*="border:2px solid #F5C100"] {
    left: 0 !important; right: 0 !important;
    top: 8px !important; bottom: auto !important;
    width: 100% !important;
  }
  /* About timeline: the desktop centre axis becomes a start-edge journey line.
     Chapter node diamonds move onto that line instead of hanging off a card. */
  [data-m~="tl"] { padding-inline-start: 26px !important; position: relative; }
  [data-m~="tl-line"] { inset-inline-start: 5px !important; right: auto !important; left: auto !important; }
  [data-m~="tl-node"] {
    inset-inline-start: -26px !important; inset-inline-end: auto !important;
    top: 26px !important; transform: rotate(45deg) !important;
  }
  [data-m~="tl-marker"] { text-align: start !important; align-items: flex-start !important; }

  /* Small chips that overhang a frame corner come back inside on a phone. */
  [data-m~="chip-inside"] { inset-inline-start: 10px !important; bottom: 10px !important; inset-inline-end: auto !important; }

  /* -- the account sidebar becomes a horizontal tab strip, not a tall list -- */
  [data-m~="acct-nav"] {
    display: flex !important; gap: 8px !important;
    padding: 10px !important; border-radius: var(--m-radius-sm) !important;
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    margin-left: calc(var(--m-gutter) * -1) !important;
    margin-right: calc(var(--m-gutter) * -1) !important;
    padding-left: var(--m-gutter) !important; padding-right: var(--m-gutter) !important;
    border-radius: 0 !important;
  }
  [data-m~="acct-nav"]::-webkit-scrollbar { display: none; }
  [data-m~="acct-nav"] > * { flex: 0 0 auto !important; white-space: nowrap; min-height: var(--m-tap) !important; }
  [data-m~="acct-nav"] > [style*="height:1px"] { display: none !important; }
}

/* ============================================================
   TYPE SCALE — rebuilt, not shrunk. Persian line-height protected.
   ============================================================ */
@media (max-width: 900px) {
  [data-m~="t-display"] { font-size: clamp(30px, 8.6vw, 40px) !important; line-height: 1.3 !important; }
  [data-m~="t-h1"]      { font-size: clamp(26px, 7.2vw, 34px) !important; line-height: 1.34 !important; }
  [data-m~="t-h2"]      { font-size: clamp(22px, 5.9vw, 28px) !important; line-height: 1.4 !important; }
  [data-m~="t-h3"]      { font-size: clamp(18px, 4.9vw, 22px) !important; line-height: 1.5 !important; }
  [data-m~="t-lead"]    { font-size: 16px !important; line-height: 2 !important; }
  [data-m~="t-body"]    { font-size: 15px !important; line-height: 1.95 !important; }
  [data-m~="t-price"]   { font-size: 19px !important; }
  [data-m~="t-btn"]     { font-size: 15px !important; }
  [data-m~="t-caption"] { font-size: 13px !important; line-height: 1.8 !important; }
  /* headings should not leave a single orphaned word */
  [data-m~="t-display"], [data-m~="t-h1"], [data-m~="t-h2"] { text-wrap: pretty; }
}

/* ============================================================
   MINI PLAYER / BOTTOM SHEETS — viewport-anchored, safe-area aware
   z-index: header 100 · search 97 · sheet backdrop 125 · sheet 130
            mini-player 120 · expanded player 140 · drawer 150
   ============================================================ */
@media (max-width: 900px) {
  [data-m~="player-desktop"] { display: none !important; }
  [data-m~="player-mobile"] { display: block !important; }
  [data-m~="safe-bottom"] { padding-bottom: env(safe-area-inset-bottom, 0px) !important; }
}
@media (min-width: 901px) {
  [data-m~="mobile-only"], [data-m~="player-mobile"], [data-m~="sheet"], [data-m~="drawer"] { display: none !important; }
}


/* ============================================================
   V2.4 — MEASURED FIXES (from the boundary / collision scanners)
   ============================================================ */
@media (max-width: 900px) {
  /* Anything marked as a control gets a real thumb target, even inline links. */
  [data-m~="tap"] {
    min-height: var(--m-tap) !important;
    display: inline-flex !important;
    align-items: center;
  }
  /* The footer link row stops being an inline sentence and becomes a 2-up
     tap grid — four 23px-tall links in a wrapping row were unusable. */
  [data-m~="footlinks"] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px 18px !important;
    width: 100%;
    text-align: center;
  }
  [data-m~="footlinks"] > span { display: none !important; }
  [data-m~="footlinks"] > a { justify-content: center; }
}
@media (max-width: 390px) {
  [data-m~="footlinks"] { grid-template-columns: minmax(0, 1fr) !important; }
}

@media (max-width: 900px) {
  /* Spec / attribute rows: the 1fr/3fr pair stacks, and the row stops being
     a fixed 50px box so two lines cannot collide. */
  [data-m~="specrow"] {
    grid-template-columns: minmax(0, 1fr) !important;
    height: auto !important;
    min-height: 0 !important;
    row-gap: 2px;
    padding: 12px 0 !important;
  }

  /* Desktop image heights do not survive into mobile: ratio, not pixels. */
  [data-m~="media-tall"] { height: auto !important; aspect-ratio: 4 / 5; }
  [data-m~="media-card"] { height: auto !important; aspect-ratio: 4 / 3; }
  /* The offset gold arch outline is a desktop flourish. On mobile it keeps a
     VERTICAL offset only — a horizontal one overhangs the gutter and widens
     the layout (measured: +6px at 768). The flourish survives, the overflow does not. */
  [data-m~="frame-offset"] { top: 14px !important; left: 0 !important; right: 0 !important; }

  /* Product tab strip: pills scroll horizontally inside their own component. */
  [data-m~="scroller"] {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none;
    padding-bottom: 20px !important;
    margin-left: calc(var(--m-gutter) * -1) !important;
    margin-right: calc(var(--m-gutter) * -1) !important;
    padding-left: var(--m-gutter) !important;
    padding-right: var(--m-gutter) !important;
    -webkit-overflow-scrolling: touch;
  }
  [data-m~="scroller"]::-webkit-scrollbar { display: none; }
  [data-m~="scroller"] > * { flex: none !important; }
}
@media (max-width: 430px) {
  [data-m~="media-tall"] { aspect-ratio: 1 / 1; }
}

@media (max-width: 900px) {
  /* Quantity steppers and remove: the cart's primary controls clear the thumb floor. */
  [data-m~="qty"] { width: 44px !important; height: 44px !important; font-size: 19px !important; }

  /* A 16px checkbox is not a target. The box keeps its size (visual weight is
     correct) and its LABEL becomes the 44px hit area. */
  [data-m~="check"] { width: 20px !important; height: 20px !important; flex: none; }
  label:has([data-m~="check"]) { min-height: var(--m-tap) !important; align-items: center !important; }
  [data-m~="check"] + span,
  label:has([data-m~="check"]) > span { padding-block: 10px; }
}


/* ============================================================
   V2.4b — VERTICAL TEXT COLLAPSE (root-cause fix)
   Symptom: Persian text rendering one character per line inside narrow
   columns (account band, event speaker/guest, sort control, chapter years).
   Cause: the global `min-width: 0` needed for overflow safety also lets a
   text-bearing flex child shrink to the width of its widest glyph, at which
   point every character wraps.
   Fix: below the hinge, flex ROWS wrap instead of squeezing, so a collapsed
   column becomes a full-width row. Scrollers keep nowrap via !important.
   ============================================================ */
@media (max-width: 900px) {
  /* every inline-styled flex row may wrap rather than crush its children */
  [style*="display:flex"]:not([data-m~="scroller"]) { flex-wrap: wrap; }

  /* a wrapped text child takes the line it lands on, instead of max-content */
  [style*="display:flex"] > [style*="flex:1"] { flex-basis: 100% !important; }

  /* Account band: avatar, then name, then counters — each on its own row. */
  [data-m~="acct-band"] {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    row-gap: 18px;
  }
  [data-m~="acct-band"] > [data-m~="acct-stats"] {
    grid-column: 1 / -1 !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }

  /* Speaker / guest / media rows: portrait above the text, not beside it. */
  [data-m~="person"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    row-gap: 18px;
  }
  [data-m~="person"] > img { width: 108px !important; height: 108px !important; }

  /* About timeline: one column of chronology — marker above its card, the
     dashed spine at the start edge, each diamond on its card's start edge. */
  .about-timeline .timeline { padding-inline-start: 26px; }
  .timeline__axis { right: 6px; top: -40px; bottom: -80px; }
  .chapter { grid-template-columns: 1fr !important; gap: 20px !important; }
  .chapter > .chapter__marker, .chapter--flip > .chapter__marker { grid-column: 1 !important; grid-row: 1 !important; text-align: right !important; }
  .chapter > .chapter__card, .chapter--flip > .chapter__card { grid-column: 1 !important; grid-row: 2 !important; }
  .chapter__marker-in, .chapter--flip .chapter__marker-in { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
  .chapter__headline { width: 100%; max-width: none; }
  .chapter__node, .chapter--flip .chapter__node { left: auto; right: -27px; top: 28px; transform: rotate(45deg); }
  .chapter__card img { height: 220px; }
  .timeline-closer__pill { font-size: 19px; padding: 16px 28px; }

  /* Sort control: the label was a fixed-width box that collapsed. */
  [data-m~="sortctl"] { width: 100% !important; }
  [data-m~="sortctl"] > span { flex: 1 1 auto !important; }

  /* About chapter marker: the ghost year and headline become a row ABOVE the
     card instead of a squeezed side column. */
  [data-m~="chapter-marker"] { text-align: right !important; }
  [data-m~="chapter-marker"] > * {
    flex-direction: row !important;
    align-items: baseline !important;
    flex-wrap: wrap !important;
    gap: 12px;
  }
}

@media (max-width: 900px) {
  /* the greeting is a headline, not a hero — two lines at most on a phone */
  [data-m~="acct-greet"] { font-size: 24px !important; line-height: 1.45 !important; }
}
@media (max-width: 390px) {
  [data-m~="acct-greet"] { font-size: 21px !important; }
}

@media (max-width: 900px) {
  /* The timeline diamond hung 45px outside the card to meet the desktop CENTRE
     axis. On mobile the axis is at the start edge, so the node sits on the card's
     own start edge instead of off-screen. */
  [data-m~="chapter-node"] {
    right: auto !important;
    left: auto !important;
    inset-inline-start: -7px !important;
    top: 28px !important;
    transform: rotate(45deg) !important;
  }
}


/* ============================================================
   V2.4c — STRAY COLOUR BLOCK BELOW A WAVE
   A wave divider is always the LAST child of its section and sits flush on the
   section's bottom edge. The generic mobile rhythm rule added padding-bottom to
   every section, which left a band of the section's own background BELOW the
   wave — reading as a broken green rectangle. A section that ends in a wave has
   no bottom padding, at any width.
   ============================================================ */
[data-m~="section"]:has(> [data-m~="wave"]:last-child) { padding-bottom: 0 !important; }
section:has(> [data-m~="wave"]:last-child) { padding-bottom: 0 !important; }

/* The thin footer rule is a stroke, not a fill — it must not be stretched to
   the divider height. */
@media (max-width: 900px) {
  [data-m~="wave"][style*="wave-rule"] { height: 22px !important; }
}

/* Narrowest phones: the 2-up shop card's one-line price still fits. */
@media (max-width: 380px) {
  [data-m~="grid-shop"] .card__pricerow .price-now .manaii-price__amount { font-size: 15px; }
}

/* About hero on phones: the frame follows the portrait's own 420:380 box
   (the Home hero's 4:5 phone box must not apply here). */
@media (max-width: 900px) {
  .about-hero [data-m~="art-hero"], .about-hero .hero__media { aspect-ratio: auto !important; height: auto !important; }
}