/* =============================================================================
   Header merge — Phase 1b Step 1. STRUCTURAL ONLY, no restyling.

   Views/Shared/Partials/_Header.cshtml used to be two sibling <header> elements
   and wwwroot/js/shop.js:22-29 deleted whichever one did not match the window
   width at load time. It is now ONE <header class="header-site"> and this file
   does the switching, so the header responds to a live resize.

   Every rule here exists to REPRODUCE what the deleted JavaScript produced. None
   of it is new design — the Tailwind restyle is Step 2.

   Breakpoint: 991/992px, the site's sole existing breakpoint (shop.css).
   Load order: after shop.css, so the .header-site-scoped selectors win.
   ============================================================================= */

/* ---------- desktop: >= 992px ---------- */
@media only screen and (min-width: 992px) {
    /* was: $(".display-sm-block").remove() */
    .header-site .header-mobile-site {
        display: none;
    }
}

/* ---------- mobile: <= 991px ---------- */
@media only screen and (max-width: 991px) {
    /* The old .header-mobile-site had no position, i.e. it sat in normal flow and
       scrolled away with the page, while .header-site is position:fixed. Keep that:
       the merged header is only fixed on desktop. shop.js's inline margin-top on
       .content-site is suppressed at this width for the same reason. */
    .header-site {
        position: static;
    }

    /* was: $(".display-lg-block").remove() */
    .header-site .header-content {
        display: none;
    }

    /* .header-container is the desktop shell (inset, rounded bottom corners). At
       mobile width it is just the bar the old .header-mobile-site was, so it drops
       the desktop chrome and lets .header-mobile-site's own rules (background, 15px
       side padding, bottom border) define the look.
       Step 2: the literal #fff here became var(--brand-surface-2) — this rule is
       (0,2,0) and would otherwise outrank the bg-brand-surface-2 utility on the
       element. Show/hide logic below is unchanged. */
    .header-site .header-container {
        background-color: var(--brand-surface-2);
        max-width: 100%;
        border-radius: 0;
    }

    /* The ticker is now a single instance living in the desktop position. Give it the
       15px side inset the old mobile header's padding used to give it, and drop the
       desktop 10px top padding. */
    .header-site .banner-container {
        padding: 0 15px;
    }

    /* was: actionsForCurrentPage()'s header.addClass("active") */
    .header-site .header-mobile-site {
        display: block;
    }

    /* was: the cart-page header.remove() in shop.js's actionsForCurrentPage().
       The class is added by that same function, which no longer touches the DOM. */
    .header-site.hide-mobile-bar .header-mobile-site {
        display: none;
    }
}


/* =============================================================================
   SECTION 2 — shop.css NEUTRALIZERS (Phase 1b Step 2, the Tailwind restyle)
   -----------------------------------------------------------------------------
   WHY THIS SECTION EXISTS — read before "fixing" a utility that does nothing.

   tailwind.css is loaded LAST, so its utilities win specificity TIES only. Much of
   the header is styled by shop.css through selectors with two or more classes
   (.search-box input.txt-search, .user-info-content > a, .categories-ctn > ul > li > a),
   which a single-class utility CANNOT outrank. Putting bg-brand-surface-2 on those
   elements silently does nothing.

   So: Tailwind utilities carry the restyle wherever they win; these rules carry it
   where they can't. Each one names the shop.css declaration it replaces.

   RULES FOR EDITING THIS SECTION
   - Values are --brand-* tokens ONLY. No hex, ever — a tenant rebrands by
     overriding the custom properties (docs/frontend-tailwind.md).
   - No !important. tailwind.config.js records the decision not to add a third
     !important layer on top of Bootstrap and shop.css.
   - Logical properties (margin-inline-*, padding-inline-*), not the physical ones
     shop.css uses. The document is dir="rtl" since Step 1.
   - shop.css itself stays untouched. Layout (position, size, spacing) is left to
     it; only colour, border and radius are re-pointed at the token layer.
   ============================================================================= */

/* The header is position:fixed over the page, so it needs its own bottom edge or the
   content scrolls into it with nothing separating them. Hairline + a very soft lift,
   not a heavy shadow — this is a calm header. */
/* STEP 3: this moved from .header-site to .header-container. .header-site is the full-width fixed
   positioning shell; the container is the inset card that is actually visible (shop.css:691,
   max-width: calc(100% - 30px)). A border-bottom on .header-site drew a hairline right across the
   viewport, past both ends of the card. */
.header-site .header-container {
    border-bottom: 1px solid var(--brand-border);
    box-shadow: 0 4px 14px -12px rgba(0, 0, 0, .35);
}

@media only screen and (max-width: 991px) {
    /* At mobile width the container IS the full-width bar again, so the hairline belongs to the
       mobile header's own bottom border (below) and would double up here. */
    .header-site .header-container {
        border-bottom: 0;
        box-shadow: none;
    }
}


/* ---------------------------------------------------------------------------
   SHELL WIDTH — the header card lines up with the page beneath it.

   shop.css:691 gives .header-container `max-width: calc(100% - 30px)` and nothing
   else, so the header card grew with the viewport forever while everything below
   it stops at 1440: .home-page (home-redesign.css SECTION 0) and the footer panel
   (footer-redesign.css) are both `max-width: 1440px; margin: 0 auto`. Past a
   ~1470px viewport the header therefore overhung the page it sits on — 25px per
   side at 1536, ~215px per side on a 1920 monitor — which reads as "the header is
   full-bleed and the content is contained".

   min() rather than a flat 1440 so the gutter still governs every viewport BELOW
   the cap.

   PHASE 1e — THE WIDTH IS NOW THE PAGE FRAME'S. This block used to hard-code
   `min(1440px, calc(100% - 30px))` and noted that the 1440 was stated three times
   over and wanted to be one token. SECTION 9 introduced that token: the card now
   reads --frame-w and --frame-gutter, the same two values .page-frame reads, so
   the header card and the panel beneath it CANNOT disagree about where the page's
   edges are — which is the entire point of a visible frame. The side inset
   therefore went 15px -> 24px (--frame-gutter); .home-page and .footer-slab keep
   their own literal 1440 for now, since promoting those means editing the approved
   home and footer stylesheets for a rename.

   Scoped to >=992px on purpose. Below that the block above hands the container to
   .header-mobile-site's own full-bleed rules, and a cap there would inset the
   mobile bar from the screen edge — which is also exactly where the frame itself
   goes full-bleed (SECTION 9), so the two switch at the same width.

   WIDTH ONLY. .header-site itself stays full-width and position:fixed, so the
   sticky/collapse behaviour and shop.js's setContentTopOffset() — which measures
   the header's HEIGHT — are both untouched. The capped width is WIDER than the
   1410 the container already has at a 1440 viewport, so no row can start wrapping
   that was not already wrapping.
   --------------------------------------------------------------------------- */
@media only screen and (min-width: 992px) {
    .header-site .header-container {
        max-width: min(var(--frame-w), calc(100% - 2 * var(--frame-gutter)));
    }

    /* The read-progress strip is absolute against .header-site (full-width), so
       without the same cap it would run the whole viewport while the card's bottom
       edge stops at the frame. inset-inline:0 + max-width + auto margins centres it. */
    .header-site.header-compact .header-progress {
        max-width: min(var(--frame-w), calc(100% - 2 * var(--frame-gutter)));
        margin-inline: auto;
    }
}

/* ---------- the three rows ---------- */
/* Deliberate surface progression, lightest-to-warmest, so each row reads as its own band
   without needing heavy borders:
     ROW 1 info strip  -> --brand-surface-alt (soft gold tint)
     ROW 2 main bar    -> --brand-surface-2   (white, the focal band)
     ROW 3 nav         -> --brand-surface     (warm neutral, quietest)
   The search field then sits on white as a RECESSED warm fill, which is what finally
   gives it a visible edge. */

/* ROW 1 — info strip. shop.css:671 .banner-container { padding: 10px 0px 0 } was sized
   for the old banner slot. The three parts are laid out as: status chip | ticker (takes
   the slack) | phone chip — so the ticker no longer swallows the whole strip. */
.header-site .header-info-bar {
    padding-block: 0;
    padding-inline: 26px;
    column-gap: 20px;
    font-size: 12px;
    /* The design's strip is 52px. It fits now only because the pinned card was flattened to one
       line (~31px) in SECTION 3 — at its old two-line 50px this had to be 62px. If the card ever
       grows again, this number is the thing that breaks first. */
    min-height: 52px;
}

/* Market status + pinned 18k card as one group at the inline start, 14px apart — the design's
   own grouping. The 20px strip gap then separates this pair from the ticker. */
.header-site .header-info-lead {
    column-gap: 14px;
}

/* Phone + hairline + branches as one group at the inline end. Hidden as a UNIT below 992px:
   its children are already hidden there (.header-info-meta), and without this the empty wrapper
   would still occupy a flex slot and its 20px column gap. */
.header-site .header-info-actions {
    column-gap: 18px;
}

.header-site .header-info-divider {
    display: block;
    flex: none;
    width: 1px;
    height: 16px;
    background-color: var(--brand-border);
}

/* STEP 3 — the chip treatment these three blocks had is GONE. In the approved design ROW 1 is
   one quiet band: a pinned white card at the inline start is the only raised surface on it, and
   the market status / phone / branches blocks are plain inline text. Chips beside that card made
   the strip read as four competing pills. Only the shared metrics stay here. */
.header-site .header-info-meta {
    padding-block: 4px;
    line-height: 1.6;
    white-space: nowrap;
}

.header-site a.header-info-meta:hover {
    color: var(--brand-primary);
}

/* The LABEL stays muted in both states. An earlier pass turned "بازار باز" green to match its
   dot; the reference does not — only the dot carries the colour, and the label is
   `600 12px var(--muted)` open or closed. With the label green too, ROW 1 had two competing
   greens (this and the ticker's up-arrows) and the status read louder than the prices. */
.header-site .header-market-status {
    font-size: 12px;
    font-weight: 600;
}

/* Market-status dot. Driven by IWorkingHoursPolicy in _Header.cshtml — .is-closed is a
   real state, not decoration, so it must read as distinct from .is-open. */
.header-site .header-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.header-site .header-status-dot.is-open {
    background-color: var(--brand-success);
    box-shadow: 0 0 0 3px var(--brand-success-halo);
}

.header-site .header-status-dot.is-closed {
    background-color: var(--brand-text-soft);
    box-shadow: 0 0 0 3px var(--brand-soft-halo);
}

/* shop.css:675 .banner-container a
   { display: inline-block; width: 100%; border-radius: 15px; overflow: hidden; max-height: 42px }
   That rule targets the OLD banner image link, but ROW 1 *is* .banner-container (the class is
   kept deliberately — the mobile ticker rule and the isBannerTopsite ordering depend on it), so
   it also matched the phone <a> and forced it to width:100% (1857px measured). That crushed the
   ticker to a 28px vertical sliver and inflated the header to 362px. At (0,1,1) it outranks the
   Tailwind `flex`/`shrink-0` (0,1,0) on the element, so it needs a rule, not a utility.
   Scoped to the two REAL links on the strip — the banner-image link keeps shop.css's behaviour.
   .header-branches joined this list when it stopped being a disabled <span> and became the
   /info/contact-us link: as an <a> it is matched by that same legacy rule. */
.header-site .banner-container a.header-phone-link,
.header-site .banner-container a.header-branches {
    display: flex;
    width: auto;
    max-height: none;
    overflow: visible;
    border-radius: 0;
}

/* The ticker sits between the two meta blocks and takes the slack. */
.header-site .header-info-bar .pf-price-ticker {
    flex: 1 1 auto;
    min-width: 0;
}

/* ...but the pinned card is emitted in its OWN .pf-price-ticker block (so that every
   `.header-site .pf-price-ticker …` rule still reaches its internals) and that one must not
   grow — it is a fixed-width member of the lead group, not the elastic middle. */
.header-site .header-info-bar .pf-price-ticker.pf-pinned-only {
    flex: 0 0 auto;
}

/* ROW 2 — main bar. 88px in the design, held by min-height rather than symmetric padding so the
   row keeps its height whether or not the tenant's Description yields a tagline line. */
.header-site .header-main-bar {
    padding-block: 0;
    padding-inline: 26px;
    column-gap: 40px;
    min-height: 88px;
}

/* Brand and actions take EQUAL flex space so the search field lands on the true optical
   centre of the row. With margin:auto alone it drifted toward whichever side was
   narrower (brand 296px vs actions 332px put it ~200px off-centre).

   min-width is max-content, NOT 0 (screenshot pass 2 bug): with `flex: 1 1 0` the shrink
   weight is basis x shrink = 0, so neither block can shrink — their WIDTH is purely the
   grow share of the free space. Below ~1100px that share dropped under the content width
   and, with min-width:0, .header-brand-text simply overflowed its 92px box and slid UNDER
   the search field (measured at 1008px: box 859-950, text 609-884). max-content makes the
   content width the floor, so the SEARCH gives up the space instead — it is the only
   element here that can shrink meaningfully. Above ~1100px nothing changes and the field
   still lands on the optical centre. */
.header-site .header-brand,
.header-site .header-actions {
    flex: 1 1 0;
    min-width: max-content;
}

.header-site .header-actions {
    justify-content: flex-end;
}

/* shop.css:747 .btn-logo-site { max-width: 125px } / :767 img { max-height: 75px } — the
   old header gave the logo a lot of room. Here it is one element of a brand lockup. */
.header-site .header-brand .btn-logo-site {
    max-width: 46px;
    line-height: 0;
}

/* The design's mark is a 46px rounded square. Ours is whatever image the tenant uploaded, so the
   radius is applied here with overflow clipping rather than assuming the asset is pre-rounded. */
.header-site .header-brand .btn-logo-site img {
    max-height: 46px;
    border-radius: var(--radius-brand-lg);
    overflow: hidden;
}

.header-site .header-brand-name {
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.01em;
}

.header-site .header-brand-tagline {
    font-size: 11.5px;
    line-height: 1;
    margin-top: 4px;
    /* _Header.cshtml already reduces Description to its first paragraph; this clamp is the
       safety net for a tenant whose first line is still long. Wide enough that the live
       value ("خرید و فروش انواع سکه‌های بانکی (تمام، نیم، ربع، گرمی)") fits whole. */
    max-width: 330px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ROW 3 — nav bar, 56px in the design. */
.header-site .header-nav-bar {
    padding-block: 0;
    padding-inline: 26px;
    min-height: 56px;
    /* Mirrors shop.css:691 `.header-container { border-radius: 0 0 12px 12px }`. ROW 3 is the last
       row, so it is what actually paints the shell's bottom corners; the container cannot clip
       with overflow:hidden because the mega menu is an absolutely-positioned descendant. */
    border-radius: 0 0 12px 12px;
}

/* ---------- main bar shell ---------- */

/* shop.css:849 .search-result-content — a heavy 20%-black drop shadow. The bg/border/
   radius are handled by utilities on the element (that selector is a specificity tie);
   only the shadow needs a rule, and it has to be (0,2,0) to land. */
.header-site .search-result-content {
    box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .18);
}

/* ---------- search field ---------- */

/* shop.css:742/774 .search-box { width: 600px; display: inline-block } — a fixed width
   from the old layout. ROW 2 wants it to flex and sit as the optical centre, so it takes
   the slack between brand and actions and is capped rather than pinned. */
.header-site .header-main-bar .search-box {
    display: block;
    width: 100%;
    flex: 0 1 600px;
    max-width: 600px;
}

/* shop.css:781 .search-box .icon-search { color: #8d8d8d; right: 0; margin-right: 15px }
   NOTE the icon is pinned PHYSICALLY right, which in RTL is the INLINE-START side — so
   the input's text padding has to be on inline-start, not inline-end. */
.header-site .search-box .icon-search {
    color: var(--brand-text-soft);
    font-size: 17px;
    transition: color .2s ease;
}

.header-site .search-box:focus-within .icon-search {
    color: var(--brand-primary);
}

/* PROBLEM 1 — the field had no perceptible edge: border-brand-border on a white fill
   inside a white bar is invisible. Fixed by making it RECESSED — a warm --brand-surface
   fill against ROW 2's white, plus a real border and a subtle inner shadow. It now reads
   as an input well rather than empty space.
   Replaces shop.css:793 { border: 1px solid #eee; background-color: #e1e1e1;
   border-radius: 6px; padding: 10px 15px; padding-right: 50px }. */
/* THE APPROVED DESIGN, on close reading, is NOT a pill: it is a soft-cornered well with an inner
   shadow (`inset 0 1px 2px rgba(42,42,40,.045)`) — the shadow, not the shape, is what gives the
   field its edge, and a pill at 48px next to a 44px squircle cart button read as two unrelated
   shapes. Back to the brand radius + the inset, which also lets the fill be lighter
   (--brand-surface-recess) than the mixed grey a shapeless field needed.
   Replaces shop.css:793 { border: 1px solid #eee; background-color: #e1e1e1;
   border-radius: 6px; padding: 10px 15px; padding-right: 50px }. */
.header-site .search-box input.txt-search {
    background-color: var(--brand-surface-recess);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-brand-md);
    color: var(--brand-text);
    height: 48px;
    padding-block: 0;
    padding-inline-start: 48px;
    /* Clears the ⌘K keycap sitting at the inline end. */
    padding-inline-end: 76px;
    font-size: 13.5px;
    font-weight: 500;
    box-shadow: var(--brand-shadow-inset);
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.header-site .search-box input.txt-search:hover {
    border-color: color-mix(in srgb, var(--brand-text-soft) 45%, var(--brand-border));
}

/* shop.css:807 .search-box input.txt-search.focus { background-color: #fff }
   On focus the well lifts to white and takes the gold ring — the accent's only job here. */
.header-site .search-box input.txt-search.focus,
.header-site .search-box input.txt-search:focus {
    background-color: var(--brand-surface-2);
    /* Step 5: the mode channel, not --brand-primary. The reference names the focus ring among the
       surfaces that follow the active trade direction, so in sell mode the field rings green. Buy
       resolves to exactly the gold this rule always had. */
    border-color: var(--brand-mode);
    box-shadow: var(--brand-shadow-inset-focus), 0 0 0 3px var(--brand-mode-tint);
}

/* ---------- the ⌘K chip ---------- */
/* The design draws a keycap at the field's inline END. Absolutely positioned rather than laid
   out inline, because the DOM order it needs (input → .search-result-content → chip) is fixed by
   shop.js's `.next()` contract; see the note in _Header.cshtml. The input reserves room for it
   with padding-inline-end so a long query never slides underneath.
   pointer-events:none so a click near the chip still lands on the field. */
.header-site .search-box .search-hotkey {
    position: absolute;
    inset-inline-end: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 2px;
    z-index: 3;
    pointer-events: none;
}

.header-site .search-box .search-hotkey kbd {
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1;
    color: var(--brand-text-soft);
    background-color: var(--brand-surface-2);
    border: 1px solid var(--brand-border);
    border-radius: 5px;
    padding: 3px 6px;
}

/* The field is white on focus, so the chip's own white would disappear into it. */
.header-site .search-box:focus-within .search-hotkey kbd {
    background-color: var(--brand-surface-recess);
}

/* shop.css:108 ::placeholder { color: #8d8d8d } — a bare pseudo-element selector,
   so anything scoped beats it. */
.header-site .search-box input.txt-search::placeholder {
    color: var(--brand-text-soft);
    font-size: 13.5px;
}

/* ---------- user widget ---------- */

/* shop.css:1567 .user-info-content { margin-left: 10px } — physical, dir is rtl now;
   ROW 2's flex gap handles the spacing. */
.header-site .user-info-content {
    margin: 0;
}

/* shop.css:1572 .user-info-content > a
   { color: #525252; border: 1px solid #dedede; border-radius: 7px; min-width: 150px }

   In the approved design this is the QUIET half of the action pair: no fill, a transparent border
   that only materialises on hover, sized to match the gold cart button beside it (44px) so the two
   sit on one optical line. The border is declared transparent rather than absent so the hover does
   not shift the label by a pixel. */
.header-site .user-info-content > a {
    color: var(--brand-text);
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-brand-md);
    min-width: 0;
    height: 44px;
    padding-block: 0;
    padding-inline: 14px;
    column-gap: 8px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    align-items: center;
    justify-content: center;
    transition: color .2s ease, border-color .2s ease;
}

/* shop.css:1598 sizes the avatar svg at 22px/19px wide — a little large next to a 14px
   label once the button has a real height. */
.header-site .user-info-content > a > svg {
    width: 17px;
    height: 17px;
}

/* shop.css:1589 .user-info-content > a.active { background-color: #f0faf5 } (mint) */
.header-site .user-info-content > a.active {
    background-color: transparent;
    color: var(--brand-primary);
}

/* shop.css:1610 .user-info-content a:hover { border-color: #8d8d8d; color: #222222 }
   The design's hover is the hairline appearing, with the label staying ink — the gold is spent on
   the cart button next to it, and two golds side by side in a 2-item group cancel each other. */
.header-site .user-info-content > a:hover {
    background-color: transparent;
    border-color: var(--brand-border);
    color: var(--brand-text);
}

/* shop.css:1598 .user-info-content > a > i, > svg { fill: #888888 } */
.header-site .user-info-content > a > i,
.header-site .user-info-content > a > svg {
    fill: var(--brand-text);
    color: var(--brand-text);
}

/* Icon follows the label: ink on hover, not gold — see the note on the hover rule above. */
.header-site .user-info-content > a:hover > i,
.header-site .user-info-content > a:hover > svg {
    fill: var(--brand-text);
    color: var(--brand-text);
}

/* shop.css:1615 .user-info-content .user-content
   { background-color: #fff; box-shadow: 0 3px 8px 0 rgb(0 0 0 / 30%); border-radius: 7px } */
.header-site .user-info-content .user-content {
    background-color: var(--brand-surface-2);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-brand);
    box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .18);
}

/* shop.css:1715 .user-links-content li { border-bottom: 1px solid #dedede }
   shop.css:1723 .user-links-content li a:hover { background-color: #f0f0f1 } */
.header-site .user-links-content li {
    border-bottom-color: var(--brand-border);
}

.header-site .user-links-content li a:hover {
    background-color: var(--brand-surface);
}

/* ---------- cart button ---------- */

/* shop.css:1040 .btn-show-basket { background-color: #fff; border: 1px solid #d1d1d1;
   border-radius: 5px; max-width: 50%; min-width: 50px }

   THE SOLID GOLD BUTTON, per the approved design — which an earlier step had reversed to a bare
   glyph. The reference is unambiguous: ROW 2 ends in a filled gold pill carrying the cart glyph,
   the "سبد خرید" label and the count. It is the storefront's primary action and the only saturated
   gold above the fold, which is exactly why the login link beside it was stripped back to a
   hairline (see .user-info-content > a).
   The label is the component's own @title — "سبد خرید" / "سبد فروش" by OrderType — never a literal
   written here. */
.header-site .btn-show-basket {
    background-color: var(--brand-primary);
    border: 0;
    border-radius: var(--radius-brand-md);
    color: var(--brand-primary-ink);
    min-width: 0;
    max-width: none;
    height: 44px;
    padding-block: 0;
    padding-inline: 18px;
    column-gap: 9px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    align-items: center;
    justify-content: center;
    box-shadow: var(--brand-shadow-gold-sm);
    transition: filter .2s ease;
}

/* shop.css:1078 sets the label to font-size:0 at rest and :1086 reveals it at 14px on hover — the
   old hover-to-reveal trick. The label is permanent now, so both are replaced outright. */
.header-site .btn-show-basket > span {
    display: inline;
    font-size: 13px;
    font-weight: 700;
    color: var(--brand-primary-ink);
}

/* shop.css:1060 `.cart-content:hover .btn-show-basket { min-width: 125px }` — the width jump that
   went with the hover-reveal. The label is always there, so there is nothing to widen for; the
   hover is a brightness lift instead, matching the design. */
.header-site .cart-content:hover .btn-show-basket {
    min-width: 0;
    background-color: var(--brand-primary);
    filter: brightness(1.05);
    box-shadow: var(--brand-shadow-gold-sm);
}

.header-site .cart-content:hover .btn-show-basket > span {
    font-size: 13px;
}

/* shop.css:1070 .btn-show-basket .basket-content > i.fa { color: #888888 } */
.header-site .btn-show-basket .basket-content > i.fa,
.header-site .cart-content:hover .btn-show-basket .basket-content > i.fa {
    color: var(--brand-primary-ink);
    font-size: 18px;
}

/* shop.css:1101 .badge-manual { background-color: var(--secondary-color); color: #fff }
   INVERTED from the previous pass: with the button gold, a gold badge would vanish into it, so the
   badge takes the ink colour and white text — which is what the design shows. shop.css:1090 also
   pins it absolutely at top:-37%/right:-6px; the design has it inline at the end of the label, so
   the positioning is unwound here. */
.header-site .btn-show-basket .basket-content i.badge-manual {
    position: static;
    background-color: var(--brand-primary-ink);
    color: var(--brand-surface-2);
    border: 0;
    font-weight: 700;
    font-size: 11px;
    min-width: 20px;
    height: 20px;
    padding-block: 0;
    padding-inline: 5px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ORDER. The design reads glyph → label → count, but the markup nests the glyph and the count
   together inside .basket-content with the label as their SIBLING, so DOM order is
   glyph, count, label. `display: contents` dissolves that wrapper's box so all three become flex
   items of the button itself and `order` can interleave them — the same technique SECTION 4 uses
   to re-parent survivors into the compact bar. Nothing in the markup moves, so Cart/Default.cshtml
   and its component contract are untouched.
   (This is also why the badge above had to lose shop.css's absolute positioning: its containing
   block was .basket-content, which no longer generates a box.) */
.header-site .btn-show-basket {
    display: flex;
}

.header-site .btn-show-basket .basket-content {
    display: contents;
}

.header-site .btn-show-basket .basket-content > i.fa {
    order: 1;
}

.header-site .btn-show-basket > span {
    order: 2;
}

.header-site .btn-show-basket .basket-content i.badge-manual {
    order: 3;
}

/* ---------- ROW 3: category nav ---------- */
/* The old .nav-bar-container (#777 slab, 2px #484848 border) no longer exists — the
   redesign replaced it with .header-nav-bar, styled by utilities in the markup. */

/* shop.css:1520 .nav-bar-content { min-width: calc(100% - 200px) } — sized for the old
   layout; ROW 3 is a plain flex row now.
   STEP 3: `width: 100%` became `flex: 1 1 auto` so the feature-gated "خرید اقساطی" link that now
   sits AFTER this <nav> inside .header-nav-bar has somewhere to go; at 100% the nav consumed the
   row and pushed the link out of it. */
.header-site .nav-bar-content {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
}

/* The hairline between the trigger pill and the category links (emitted by Menu/Default.cshtml). */
.header-site .header-nav-divider {
    display: block;
    flex: none;
    width: 1px;
    height: 18px;
    background-color: var(--brand-border);
    margin-inline: 8px;
}

.header-site .categories-ctn > ul {
    display: flex;
    align-items: center;
    width: auto;
}

/* shop.css:1266 .categories-ctn > ul li { margin-left: 10px } — physical, and dir is
   rtl now. Spacing comes from the flex gap above instead. */
.header-site .categories-ctn > ul li {
    margin: 0;
}

/* shop.css:1277 .categories-ctn > ul > li > a { color: #ededed; padding: 6px 3px }
   This is the "همه دسته‌ها" trigger. It needs a rule rather than a utility because that
   shop.css selector is (0,1,3) and outranks anything written on the element.

   THE WHITE PILL, per the approved design — reversed from an earlier step that had made it bare
   gold text. It is the one raised surface on ROW 3, which is what tells you it opens something;
   the flat links beside it navigate, this one reveals. Ink label, not gold: the gold in this row
   belongs to the "خرید اقساطی" chip at the far end. */
.header-site .categories-ctn > ul > li > a {
    /* shop.css:1256 `.nav-bar-content > ul > li a { position: relative; display: inline-block }`
       (0,1,3) also matches this element and BEATS the `flex items-center gap-2` utilities the
       markup carries — Tailwind's `.flex` is only (0,1,0), so with the class column tied at 1
       the element column (3 vs 0) decides it for shop.css.

       The consequence was not subtle: the pill stayed an inline-block, so `align-items` and
       `gap` had nothing to apply to, and its three children (hamburger, label, chevron) were
       laid out as baseline-aligned inline boxes instead. Against a fixed 36px pill with an
       18.75px line-height that parked their optical centre ~10px ABOVE the pill's own centre,
       which is why adding a padding-top appeared to "fix" the alignment — it was pushing the
       content back down rather than centring it.

       So the layout the markup asks for is restored here, where it can actually win. The
       utilities are deliberately LEFT on the element: they state the intent, and they become
       live again the day shop.css's nav rules retire.

       The `gap` is the same 8px `gap-2` compiles to. Without it the spacing was whatever the
       inter-element whitespace happened to collapse to (~4px). */
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 8px;

    color: var(--brand-text);
    background-color: var(--brand-surface-2);
    border: 1px solid var(--brand-border);
    border-radius: 18px;
    height: 36px;
    padding-block: 0;
    padding-inline: 15px;
    font-weight: 700;
    font-size: 12.5px;
    line-height: 1;
    transition: color .2s ease, border-color .2s ease;
}

.header-site .categories-ctn > ul > li > a:hover,
.header-site .categories-ctn > ul > li.active > a {
    color: var(--brand-text);
    background-color: var(--brand-surface-2);
    /* Step 5: mode channel (reference ROW 3: style-hover="border-color:var(--mode-edge)"). */
    border-color: var(--brand-mode-edge);
}

.header-site .categories-ctn > ul > li > a .fa {
    font-size: 15px;
}

/* The chevron. Softer than the hamburger — it is a state hint, not the affordance. */
.header-site .categories-ctn > ul > li > a .fa.header-cat-pill-caret {
    font-size: 12px;
    color: var(--brand-text-soft);
}

/* shop.css:1288 .categories-ctn > ul > li > a span — the old sliding cyan underline.
   The pill carries its own fill now, so the underline is retired rather than recoloured. */
.header-site .categories-ctn > ul > li > a span {
    display: none;
}

/* Top-level category links (the <div class="header-nav-links"> sibling). Deliberately
   NOT list items — see the note in Menu/Default.cshtml. */
/* max-height clips a second row rather than letting ROW 3 grow when a tenant has many
   categories. It tracks the link box: 13px/1.35 text + 8px padding either side ≈ 36px. */
.header-site .header-nav-links {
    flex-wrap: wrap;
    overflow: hidden;
    max-height: 36px;
    gap: 4px;
}

/* Flat links with a hover CHIP, per the design — the punctuation separators an earlier step drew
   between them are gone, because the hover chip is what now delimits one link from the next and
   the two devices together read as clutter. */
.header-site .header-nav-link {
    display: inline-block;
    padding-block: 8px;
    padding-inline: 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--brand-text);
    white-space: nowrap;
    border-radius: 8px;
    transition: color .2s ease, background-color .2s ease;
}

/* Step 5: mode channel. --brand-surface-alt IS --brand-primary-band, so buy mode is unchanged; in
   sell mode the row's hover follows the header instead of staying gold under a green bar.
   (Reference ROW 3: style-hover="background:var(--mode-band);color:var(--mode-deep)".) */
.header-site .header-nav-link:hover {
    color: var(--brand-mode-deep);
    background-color: var(--brand-mode-band);
}

/* "خرید اقساطی" — the one call to action in ROW 3, so it is the only filled thing on the row.
   A soft gold chip rather than solid --brand-primary: ROW 2's cart badge already owns the solid
   gold, and two saturated golds one above the other fight. Sits at the inline END via ms-auto on
   the element; it is a SIBLING of <nav class="categories-ctn">, never inside it (shop.js's
   mega-menu hover selector). Rendered only inside <feature name="InstallmentPayment">. */
.header-site .header-installment-link {
    background-color: var(--brand-surface-alt);
    border: 1px solid var(--brand-primary-edge);
    color: var(--brand-primary-deep);
    height: 34px;
    padding-block: 0;
    padding-inline: 14px;
    border-radius: 17px;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
    transition: background-color .2s ease, color .2s ease;
}

/* Hover deepens the wash rather than flipping to solid gold: this chip and the cart button are the
   only gold surfaces in the header, and a solid one down here competed with the primary action. */
.header-site .header-installment-link:hover {
    background-color: var(--brand-primary-tint);
    color: var(--brand-primary-deep);
}

/* ---------- mega menu ---------- */

/* shop.css:1351 .orginal-menu > li { background-color: #fff }
   shop.css:1356 .orginal-menu > li > a { color: #555 }
   shop.css:1362 .orginal-menu > li.active > a { background-color: #f5f5f5 } */
.header-site .orginal-menu > li {
    background-color: var(--brand-surface-2);
}

.header-site .orginal-menu > li > a {
    color: var(--brand-text-muted);
}

.header-site .orginal-menu > li.active > a {
    background-color: var(--brand-surface-alt);
    color: var(--brand-primary);
}

/* shop.css:1446 .orginal-menu .submenu-children { background-color: #fff } */
.header-site .orginal-menu .submenu-children {
    background-color: var(--brand-surface-2);
}

/* shop.css:1431 .orginal-menu .menu-link a { color: #888 } */
.header-site .orginal-menu .menu-link a {
    color: var(--brand-primary);
}

/* shop.css:1460 ul.submenu a { color: #888 } */
.header-site ul.submenu a {
    color: var(--brand-text-muted);
}

.header-site ul.submenu a:hover {
    color: var(--brand-primary);
}


/* ---------- mobile: <= 991px ---------- */
/* STEP 7 emptied most of this block. It held token repaints for markup that no longer
   exists — the .seach-site / .search-mobile-content / .login-mobile wrappers and the
   .about-top-site phone glyph, all replaced by _HeaderMobileBar.cshtml — plus a rule
   hiding .header-info-lead, which the mobile price band now needs VISIBLE. Everything
   the mobile header does today is declared in SECTION 8 instead; keeping dead
   neutralisers here would only make the next reader hunt for markup that is gone.

   What survives is the one rule that is still about the SHELL rather than about the
   bar's contents. */
@media only screen and (max-width: 991px) {
    /* shop.css:4723 .header-mobile-site { border-bottom: 1px solid #dedede }.
       SECTION 8 re-orders the price band BELOW this element, so the bar's own bottom
       border would fall between the search row and the band; SECTION 8 removes it
       there. This keeps the token repaint for the case where the band is absent
       (PriceTickers off, or an empty cache) and the bar is the header's last row. */
    .header-site .header-mobile-site {
        border-bottom-color: var(--brand-border);
    }

    /* .header-info-actions is the ROW 1 end group (sell-mode flag, phone, branches).
       Still desktop-only: the mobile design gives the phone and the branches link to the
       drawer footer, and the sell-mode flag to the switch row that is always visible.
       Hidden as a UNIT — an empty wrapper still occupies a flex slot and spends the
       strip's column gap. */
    .header-site .header-info-actions {
        display: none;
    }
}


/* =============================================================================
   SECTION 3 — PRICE TICKER (Phase 1b Step 3 redesign)
   -----------------------------------------------------------------------------
   This replaces the temporary "harmonization" layer that lived here. The ticker is
   no longer ringfenced: these rules ARE its design, not a patch over someone else's.

   WHY THE STYLING IS HERE AND NOT IN price-ticker.css
   wwwroot/css/price-ticker.css is a self-contained "Dark Gold Theme" (navy slab, its
   own --pf-* token set). It is left untouched on purpose, exactly like shop.css:
   every selector below is scoped to .header-site, which makes it (0,3,0) against that
   file's (0,2,0), so the override always lands and nothing leaks. The home page's
   sidebar ticker is a different namespace (pf-sidebar-*, price-ticker-sidebar.css)
   and is unaffected either way.

   WHAT THE DESIGN ASKS FOR
   - The pinned 18-carat card is the strip's only raised surface: white, hairline,
     brand radius. Everything else is flat on the gold tint.
   - Rotating items are two lines — muted symbol name over a bold price — separated by
     hairlines rather than sitting in cards.
   - Dual buy/sell items put خرید and فروش SIDE BY SIDE, not stacked.

   COLOUR RULE — the green/red carry FINANCIAL MEANING and are not decoration:
   .pf-up / .pf-down / .pf-neutral and the خرید/فروش labels keep their semantics. Only
   the surrounding chrome is re-pointed at the token layer.
   ============================================================================= */

/* price-ticker.css:15 .pf-price-ticker { color: var(--pf-text); padding: 10px 14px } */
.header-site .pf-price-ticker {
    color: var(--brand-text);
    padding: 0;
}

.header-site .header-info-bar .pf-price-ticker {
    padding: 0;
}

/* 8px between the arrows and the track, per the design; the pinned card adds its own
   margin on top of this to reach the design's wider 20px break before the ticker proper. */
.header-site .pf-price-ticker .pf-container {
    gap: 8px;
    min-width: 0;
}

/* ---------- the pinned 18k card ---------- */
/* Emitted OUTSIDE .pf-track by Components/PriceTicker/Default.cshtml so it never scrolls.
   Identified in the view by PriceItemType.Xau_18k_750_UsdPerGramPreciousMetal.

   ONE LINE, per the approved design: title · hairline · price · change. The two-line
   head/value stack it had before measured 50px and was single-handedly holding ROW 1 at
   62px; flattened it is ~31px, which is what lets the strip sit at the design's 52px. */
.header-site .pf-price-ticker .pf-pinned {
    flex: 0 0 auto;
    background-color: var(--brand-surface-2);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-brand);
    padding-block: 6px 7px;
    padding-inline: 11px;
    margin-inline-end: 12px;
    line-height: 1.2;
}

.header-site .pf-price-ticker .pf-pinned-title {
    color: var(--brand-text-muted);
    font-size: 11.5px;
    font-weight: 500;
    white-space: nowrap;
}

/* The hairline inside the card. A real element rather than a border on the title, because the
   design insets it vertically (16px against a ~17px line box) and a border cannot be inset. */
.header-site .pf-price-ticker .pf-pinned-divider {
    display: block;
    flex: none;
    width: 1px;
    height: 16px;
    background-color: var(--brand-border);
}

/* The pinned price is the strip's headline number — one step above the rotating items. */
.header-site .pf-price-ticker .pf-pinned .pf-price {
    font-size: 14px;
    font-weight: 700;
    color: var(--brand-text);
    letter-spacing: 0.01em;
}

.header-site .pf-price-ticker .pf-pinned .pf-item-change {
    font-size: 11px;
    font-weight: 600;
}

.header-site .pf-price-ticker .pf-pinned .pf-item-change .pf-change-value {
    font-size: 11px;
}

/* ---------- the scrolling track ---------- */
/* price-ticker.css:41 .pf-track-wrapper
   { background: linear-gradient(...navy...); box-shadow: 0 6px 18px rgba(2,6,12,.45);
     border-radius: 10px; padding: 6px }
   An opaque card here made ROW 1 read as "ticker with scraps at the edges". Transparent, so the
   items float directly on the gold tint and the whole strip reads as one band. */
.header-site .pf-price-ticker .pf-track-wrapper {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    /* Positioning context for the two edge fades. Safe here: .orginal-menu — the one absolutely
       positioned element that must keep resolving against .header-site — lives in ROW 3 and is
       not a descendant of the ticker. */
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

/* Edge masks, so a half-cut item dissolves into the band instead of being sliced by the arrow.
   Physical `to left` / `to right` rather than logical: gradients have no logical keywords, and
   the element they live on carries dir="rtl" in the view, so the mapping is fixed —
   inline-start IS the right edge here. */
.header-site .pf-price-ticker .pf-fade {
    position: absolute;
    inset-block: 0;
    width: 44px;
    pointer-events: none;
    z-index: 1;
}

.header-site .pf-price-ticker .pf-fade-start {
    inset-inline-start: 0;
    background: linear-gradient(to left, var(--brand-surface-alt), transparent);
}

.header-site .pf-price-ticker .pf-fade-end {
    inset-inline-end: 0;
    background: linear-gradient(to right, var(--brand-surface-alt), transparent);
}

/* price-ticker.css:52 .pf-track { gap: var(--pf-gap); padding: 6px } — the gap belonged to a
   card layout. Items now supply their own inline padding and the hairline between them, so any
   gap here would double the spacing on one side of every divider. */
.header-site .pf-price-ticker .pf-track {
    gap: 0;
    padding-block: 2px;
    padding-inline: 0;
    align-items: stretch;
}

/* ---------- one rotating item ---------- */
/* price-ticker.css:77/135 .pf-item { background: ...; border: 1px solid ...; box-shadow: ...;
   border-radius: 8px; min-width: max-content } */
.header-site .pf-price-ticker .pf-item {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: var(--brand-text);
    padding-block: 0;
    padding-inline: 18px;
    line-height: 1.35;
    display: flex;
    align-items: center;
    /* Positioning context for the divider below. Not a row wrapper — see the note on
       .pf-track-wrapper about why that restriction does not reach here. */
    position: relative;
}

/* The divider. Adjacent-sibling means the line always falls BETWEEN two items and never on the
   outer edges. It is a pseudo-element rather than a border because the design INSETS it from the
   top and bottom of the track (a border always spans the full box).
   NOT plain --brand-border: #E7E1D6 on the gold strip is a ~3% step and measured as invisible in
   an earlier screenshot pass. Mixing in --brand-text-soft gives a line that actually reads,
   without inventing a colour outside the token layer. */
.header-site .pf-price-ticker .pf-item + .pf-item::before {
    content: "";
    position: absolute;
    inset-block: 3px;
    inset-inline-start: 0;
    width: 1px;
    background-color: color-mix(in srgb, var(--brand-text-soft) 35%, transparent);
}

/* price-ticker.css:237 .pf-item:hover { transform: translateY(-4px); box-shadow: ... }
   A card lift on something that is no longer a card. */
.header-site .pf-price-ticker .pf-item:hover {
    transform: none;
    box-shadow: none;
}

/* price-ticker.css:107 .pf-item-body { text-align: center } — the two lines read as a unit only
   when they share an edge, and in RTL that edge is the inline start. */
.header-site .pf-price-ticker .pf-item-body {
    text-align: start;
}

/* price-ticker.css:114/124 .pf-item-title { color: rgba(238,242,246,.95); font-size: .88rem;
   font-weight: 700 } — the symbol name is a label; the price leads. */
.header-site .pf-price-ticker .pf-item-title {
    color: var(--brand-text-soft);
    font-size: 11px;
    font-weight: 500;
    display: block;
    white-space: nowrap;
}

/* price-ticker.css:141 .pf-item-value { margin-top: 6px; align-items: baseline }
   The design aligns the price and its change on a shared BASELINE, not on centres — with a 12.5px
   number next to a 10.5px percentage, centring makes the small one float. */
.header-site .pf-price-ticker .pf-item-value {
    margin-top: 2px;
    align-items: baseline;
}

/* price-ticker.css:148 .pf-price { font-size: 1.02rem; font-weight: 800 }
   .pf-price sets no colour of its own, so this is what makes the live prices the
   highest-contrast thing on the strip. */
.header-site .pf-price-ticker .pf-price {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--brand-text);
    letter-spacing: 0;
    white-space: nowrap;
}

/* price-ticker.css:154 .pf-currency { opacity: .8 } — the unit matters (the strip mixes تومان
   and دلار rows) but must not compete with the number. */
.header-site .pf-price-ticker .pf-currency {
    color: var(--brand-text-soft);
    font-size: 10px;
    opacity: 1;
    margin-inline-start: 3px;
}

/* ---------- change indicator (FINANCIAL COLOUR — do not repoint) ---------- */
/* price-ticker.css:160 .pf-item-change { min-width: 72px; justify-content: flex-end } — sized for
   a separate column in the old card. It is inline after the price now, so it must not reserve
   72px of empty space in front of the next divider. */
.header-site .pf-price-ticker .pf-item-change {
    min-width: 0;
    gap: 2px;
    font-weight: 600;
    font-size: 10.5px;
}

.header-site .pf-price-ticker .pf-item-change .pf-arrow {
    font-size: 9px;
}

.header-site .pf-price-ticker .pf-item-change .pf-change-value {
    font-size: 10.5px;
}

/* THE HUE MOVES, THE MEANING DOES NOT. price-ticker.css:179-190 sets --pf-positive #6dd17f and
   --pf-negative #ff6b6b — picked for a navy slab, and on this pale gold band they are washed out
   to the point of being hard to read at 10.5px. Up stays green and down stays red; they are now
   the token layer's green and red, which is what the approved design uses and what the rest of
   the header already speaks. Scoped to .header-site, so the home page's ticker keeps its own. */
.header-site .pf-price-ticker .pf-item-change.pf-up {
    color: var(--brand-success);
}

.header-site .pf-price-ticker .pf-item-change.pf-down {
    color: var(--brand-danger);
}

.header-site .pf-price-ticker .pf-item-change.pf-neutral {
    color: var(--brand-text-soft);
    opacity: 1;
}

/* ---------- dual buy/sell items ---------- */
/* price-ticker.css has no rules for these at all — .pf-price-group/.pf-price-row inherit the
   flex column from nothing and stacked. The design wants them side by side.

   NOTE the rows are <a> elements INSIDE .banner-container, so shop.css:675
   `.banner-container a { display: inline-block; width: 100%; border-radius: 15px;
   overflow: hidden; max-height: 42px }` matches every one of them — the same legacy banner-image
   rule that once crushed the phone link. At (0,1,1) it beats any utility, so it needs a rule.
   Scoped through .pf-price-ticker so the banner-image link keeps shop.css's behaviour. */
.header-site .banner-container .pf-price-ticker a {
    display: inline-flex;
    width: auto;
    max-height: none;
    overflow: visible;
    border-radius: 0;
}

/* price-ticker.css:363 .pf-price-group { display: flex; flex-direction: COLUMN; gap: 4px }
   flex-direction has to be named explicitly — restating `display: flex` does not reset it, and
   the column is exactly what made the two rows stack. */
.header-site .pf-price-ticker .pf-price-group {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 12px;
}

/* price-ticker.css:369 .pf-price-row { justify-content: space-between; padding: 6px 10px;
   border-radius: 8px } — a tinted BOX per row. Two of those side by side turned one ticker entry
   into a pair of buttons and blew ROW 1 out to 122px tall. Flattened to plain inline text. */
.header-site .pf-price-ticker .pf-price-row {
    justify-content: flex-start;
    align-items: baseline;
    padding: 0;
    border-radius: 0;
    gap: 4px;
    white-space: nowrap;
}

/* price-ticker.css:381/394 .pf-buy-row / .pf-sell-row carry a tinted fill + border + their own
   hard-coded greens and reds (#008f00 / #b00000), and their :hover flips the text to a near-white
   that is invisible on this strip. The MEANING survives — خرید stays green, فروش stays red — but
   it moves onto the label alone, in the token layer.
   خرید = the price we buy at, فروش = the price we sell at; that pairing is financial, not
   decorative. Only the label is coloured: colouring the number too would collide with the
   up/down change indicator sitting beside it. */
.header-site .pf-price-ticker .pf-buy-row,
.header-site .pf-price-ticker .pf-sell-row,
.header-site .pf-price-ticker .pf-buy-row:hover,
.header-site .pf-price-ticker .pf-sell-row:hover {
    background-color: transparent;
    border: 0;
    transform: none;
}

.header-site .pf-price-ticker .pf-buy-row .pf-label {
    color: var(--brand-success);
    font-size: 9.5px;
    font-weight: 600;
}

.header-site .pf-price-ticker .pf-sell-row .pf-label {
    color: var(--brand-danger);
    font-size: 9.5px;
    font-weight: 600;
}

/* The خرید side with the Sell module OFF: a <span>, not an <a> (see the partials). It must sit
   exactly like its link twin — .pf-price-row already gives it the flex box, and shop.css's
   `.banner-container a` reset above cannot reach it because it is not an anchor, which is fine:
   a span was never subject to that rule. All that is left is to drop the pointer affordance. */
.header-site .pf-price-ticker .pf-price-row.is-static {
    cursor: default;
}

.header-site .pf-price-ticker .pf-price-row .pf-price,
.header-site .pf-price-ticker .pf-price-row .pf-currency {
    color: var(--brand-text);
}

.header-site .pf-price-ticker .pf-price-row .pf-currency {
    color: var(--brand-text-soft);
}

.header-site .pf-price-ticker .pf-price-row .pf-price {
    font-size: 12.5px;
}

/* On a dual item the unit was printed TWICE — "خرید ۳٬۸۱۵٬۰۰۰ تومان فروش ۳٬۸۶۸٬۰۰۰ تومان" — which
   is the noisiest thing on the strip and nothing the reference shows. It is dropped from the
   خرید side only: the item still declares its currency once, which the strip genuinely needs
   because it mixes تومان and دلار rows, and the design's two-number rhythm is restored.
   Hidden, not removed: it stays in the DOM as part of the item data contract. */
.header-site .pf-price-ticker .pf-buy-row .pf-currency {
    display: none;
}

/* ---------- prev/next controls ---------- */
/* price-ticker.css:208 .pf-controls .pf-btn
   { background: linear-gradient(...navy...); border: 1px solid rgba(212,175,55,.45);
     color: var(--pf-gold-2); width/height: 40px; border-radius: 8px; margin-left: 8px }
   The .pf-controls wrapper is gone — the approved design FLANKS the track with the two arrows
   instead of parking them side by side, so each button is now a direct child of .pf-container.
   Consequence: every price-ticker.css rule for them was scoped `.pf-controls .pf-btn` and no
   longer matches, so what follows is their whole appearance rather than an override.
   Keep BOTH in the DOM whatever else changes: price-ticker.js dereferences .pf-prev and .pf-next
   with no null check, so losing either one throws and kills auto-scroll for the whole ticker. */
.header-site .pf-price-ticker .pf-btn {
    background: var(--brand-surface-2);
    border: 1px solid var(--brand-border);
    color: var(--brand-text-muted);
    box-shadow: none;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    margin-inline: 0;
    padding: 0;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease;
}

/* The design's hover is a gilded edge, not a fill — the arrows are a quiet affordance beside
   live prices and should not start competing with them on hover. */
.header-site .pf-price-ticker .pf-btn:hover {
    background: var(--brand-surface-2);
    border-color: var(--brand-primary-edge);
    color: var(--brand-primary-deep);
    box-shadow: none;
}

/* The buttons carry `hidden lg:flex` in the view, but Tailwind's lg is 1024px while the header
   switches to its DESKTOP layout at 992px (header-merge.css hides .header-content below that).
   In the 992-1023px band the desktop strip therefore rendered with no arrows at all — the only
   affordance left was the 3s auto-scroll. Re-shown across that band only; below 992px the mobile
   strip keeps them hidden, which is what the design shows there.
   (0,3,0) so it outranks Tailwind's .hidden. */
@media only screen and (min-width: 992px) and (max-width: 1023.98px) {
    .header-site .pf-price-ticker .pf-btn {
        display: flex;
    }
}

/* ---------- scrollbar ---------- */
/* price-ticker.css:63-73 gives the track an 8px bar. The approved design has none, and in the
   screenshot pass it rendered as a long gold rule cutting across the bottom of the strip — with
   22 live symbols the thumb is wide enough to read as a graphic element rather than a control.
   Hidden, not disabled: the track is still scrollable by wheel/touch/keyboard, and the ‹ › buttons
   plus the 3s auto-scroll are the affordance the design uses instead. */
.header-site .pf-price-ticker .pf-track::-webkit-scrollbar {
    height: 0;
    width: 0;
}

.header-site .pf-price-ticker .pf-track {
    scrollbar-width: none;
}


/* ---------- mobile: <= 991px ---------- */
@media only screen and (max-width: 991px) {
    /* STEP 7 REVERSED THE STEP 3 DECISION HERE. The pinned 18k card used to be
       `display: none` at this width, because in Step 3 there was no mobile design and ROW 1
       was the ticker strip and nothing else. The approved mobile design PINS it — a market
       dot, "طلای ۱۸", the price and the change chip, then a hairline, then the scrolling
       ticker — so it is visible again and SECTION 8 sizes it. Nothing else in SECTION 3
       changes; the desktop card is untouched. */

    /* The fade masking the ticker's start edge. Narrower than the desktop 40px because the
       pinned card now sits against it and the band is only 390px wide. */
    .header-site .pf-price-ticker .pf-fade {
        width: 24px;
    }
}


/* =============================================================================
   SECTION 4 — STICKY MINIMIZING HEADER (Phase 1b Step 4)
   -----------------------------------------------------------------------------
   .header-compact is toggled on <header class="header-site"> by
   wwwroot/js/header-compact.js once the page is scrolled past ROW 1's height. The full
   three-row header collapses to ONE bar: small logo | market dot + pinned 18k card |
   compact search | login icon + cart.

   HOW THE SINGLE BAR IS BUILT — READ BEFORE EDITING
   The four survivors live at three different depths (the pinned card is inside
   .pf-container > .pf-price-ticker > .banner-container; the logo/search/actions are inside
   .header-main-bar > .header-content), so they can only share ONE flex line if the wrappers
   between them stop generating boxes. That is what the `display: contents` block below
   does — it re-parents the survivors onto .header-container, where `order` can sequence
   them. The alternative was a second compact bar in the markup, which would have meant a
   duplicate .search-box, a duplicate Cart component and duplicate ids — i.e. exactly the
   JS hooks this redesign is not allowed to disturb. NOTHING is added to, removed from or
   moved in the DOM here: only classes change, so every hook survives a collapse/expand.

   Verified safe to flatten: .search-box (shop.css:774), .cart-content (:1035) and
   .user-info-content (:1567) are each their own `position: relative` ancestor, so the
   search-suggestion panel and both dropdowns stay anchored to their own element.

   ACCESSIBILITY NOTE: `display: contents` drops .pf-price-ticker's role="region" from the
   a11y tree while compact. Acceptable — the ticker itself is hidden in that state and the
   pinned card carries its own aria-label. The market-status TEXT is clipped rather than
   display:none'd so the status stays readable to a screen reader.

   THE CONTENT-MARGIN CONTRACT: the header's height changes here, but .content-site's
   margin must not. .header-container's height comes from --header-full-height (published by
   header-compact.js) so the collapse animates between two real lengths, and shop.js's
   setContentTopOffset()/setProfileStickyOffset() ask that script for the EXPANDED height
   instead of measuring the live one. The compact bar floats over content space that never
   moves. Do not give this shell overflow:hidden to "help" the transition — the mega menu is
   an absolutely-positioned descendant and would be clipped; it is not needed anyway,
   because the hidden rows are display:none and there is nothing to clip.
   ============================================================================= */
@media only screen and (min-width: 992px) {
    /* The animated property. `height` (not min-height) because only an explicit length on
       BOTH sides animates — with height:auto in the expanded state the expand direction
       would snap. --header-full-height is re-measured on load, on webfont ready and on
       resize; the `auto` fallback keeps the header correct if the script never runs. */
    .header-site .header-container {
        height: var(--header-full-height, auto);
        transition: height .28s ease;
    }

    /* header-compact.js adds this for the duration of ONE synchronous layout read while it
       measures the expanded height. Without it the forced reflow starts a visible
       full -> compact -> full animation. */
    .header-site.header-measuring,
    .header-site.header-measuring .header-container {
        transition: none;
    }

    /* DIRECTION A — "gold-tinted band (recommended)" in the reference. 58px of --gold-band with a
       gilded bottom edge and a warm drop shadow, NOT the white bar this was before: while compact
       the header is a floating surface over the page, and direction A makes it read as branded
       chrome rather than as a second white page section.
       (0,3,0) so it outranks the bg-brand-surface utility on the element. */
    .header-site.header-compact .header-container {
        height: var(--header-compact-height, 58px);
        display: flex;
        align-items: center;
        column-gap: 18px;
        padding-inline: 26px;
        background-color: var(--brand-primary-band);
        border-bottom: 1px solid var(--brand-primary-edge);
        box-shadow: var(--brand-shadow-compact);
    }

    /* The re-parenting. Each of these wrappers keeps its children but stops generating a box,
       so its background/border/padding disappear with it — which is what makes the compact
       bar read as one surface instead of three stacked bands. */
    .header-site.header-compact .banner-container,
    .header-site.header-compact .pf-price-ticker,
    .header-site.header-compact .pf-price-ticker .pf-container,
    .header-site.header-compact .header-content,
    .header-site.header-compact .header-main-bar {
        display: contents;
    }

    /* Everything the compact bar drops. The ticker's own markup stays in the DOM — hidden,
       not removed — so price-ticker.js keeps its .pf-track/.pf-prev/.pf-next references and
       rotation resumes on expand (scrollBy on a display:none track is a harmless no-op).
       The brand TEXT stays: direction A keeps "داریک" beside the mark and drops only the
       strapline under it. */
    .header-site.header-compact .pf-track-wrapper,
    .header-site.header-compact .header-nav-bar,
    .header-site.header-compact .header-brand-tagline,
    .header-site.header-compact .header-login-label {
        display: none;
    }

    /* The phone and the branches links need the extra `.banner-container a` steps. The ROW 1
       width reset near the top of this file is (0,3,1) — it carries an element type because it
       has to outrank shop.css:675 `.banner-container a` — and at (0,3,0) the group above lost
       to its `display: flex`, leaving both links in the compact bar. (0,4,1) settles it.
       `.banner-container` is display:contents while compact, which does not break the
       descendant match: the element stays in the tree, it just generates no box. */
    .header-site.header-compact .banner-container a.header-phone-link,
    .header-site.header-compact .banner-container a.header-branches {
        display: none;
    }

    /* The arrows need the extra .pf-price-ticker step: the 992-1023px rule in SECTION 3 is
       (0,3,0) and would otherwise keep them visible in the compact bar. This targets .pf-btn
       directly now — the .pf-controls wrapper that used to hold them is gone, and with
       .pf-container on display:contents the buttons would otherwise land in the compact bar as
       unordered (order:0) children, i.e. ahead of the logo. */
    .header-site.header-compact .pf-price-ticker .pf-btn {
        display: none;
    }

    /* Same reasoning for the ROW 1 end group: its two links are hidden individually just above,
       but the wrapper itself would survive as an empty flex item still carrying `ms-auto`, which
       would shove the search field off the compact bar's centre. */
    .header-site.header-compact .header-info-actions {
        display: none;
    }

    /* The status text is clipped rather than hidden — the dot alone carries no accessible
       name, and "بازار باز"/"بازار بسته" is a real state readout. */
    .header-site.header-compact .header-market-status span:not(.header-status-dot) {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }

    /* RTL: the lowest order is the RIGHTMOST item. Direction A reads, right to left:
       mark + name | hairline | dot + 18k readout | search | login + cart.
       .header-info-lead is NOT in the display:contents list above, so it survives as a real box
       and IS the "dot + readout" group — which is exactly why ROW 1 groups them in the markup. */
    .header-site.header-compact .header-brand {
        order: 1;
    }

    .header-site.header-compact .header-info-lead {
        order: 2;
        column-gap: 8px;
    }

    .header-site.header-compact .search-box {
        order: 3;
    }

    .header-site.header-compact .header-actions {
        order: 4;
    }

    /* Brand and actions carry `flex: 1 1 0; min-width: max-content` for ROW 2's optical
       centring (SECTION 2). As direct children of the compact bar they must not grow — the
       search field is the only elastic element here. */
    .header-site.header-compact .header-brand,
    .header-site.header-compact .header-actions,
    .header-site.header-compact .header-info-lead {
        flex: 0 0 auto;
        min-width: 0;
    }

    .header-site.header-compact .header-actions {
        margin-inline-start: auto;
    }

    .header-site.header-compact .search-box {
        flex: 1 1 auto;
        max-width: 460px;
        margin-inline: auto;
    }

    /* ---------- compact sizing, per direction A ---------- */

    /* The mark: a 30px rounded chip. The design draws a gold tile with a "د" in it; ours is the
       tenant's uploaded logo, so it gets the chip's geometry and shadow but keeps its own image. */
    .header-site.header-compact .header-brand {
        column-gap: 10px;
    }

    .header-site.header-compact .header-brand .btn-logo-site {
        max-width: 30px;
    }

    .header-site.header-compact .header-brand .btn-logo-site img {
        max-height: 30px;
        border-radius: 9px;
        box-shadow: var(--brand-shadow-gold-chip);
    }

    .header-site.header-compact .header-brand-name {
        font-size: 16.5px;
    }

    /* The gilded hairline between the brand lockup and the price readout. A pseudo-element on
       .header-brand rather than a markup node: it exists only in this state, and .header-brand is
       already the flex container it needs to be the last child of. */
    .header-site.header-compact .header-brand::after {
        content: "";
        display: block;
        flex: none;
        width: 1px;
        height: 22px;
        background-color: var(--brand-primary-edge);
        margin-inline-start: 8px;
    }

    /* The 18k readout loses its card: on the gold band the white chip read as a second surface,
       and direction A sets it as plain text beside the dot. */
    .header-site.header-compact .pf-pinned {
        background-color: transparent;
        border: 0;
        padding: 0;
        margin-inline-end: 0;
        column-gap: 8px;
    }

    .header-site.header-compact .pf-pinned-divider {
        display: none;
    }

    .header-site.header-compact .pf-pinned-title {
        font-size: 11.5px;
        font-weight: 500;
    }

    .header-site.header-compact .pf-pinned .pf-price {
        font-size: 15px;
        font-weight: 700;
    }

    .header-site.header-compact .header-status-dot {
        width: 6px;
        height: 6px;
    }

    /* The change figure becomes a tinted pill here — at 10.5px on a gold band, bare coloured text
       was the one element that stopped reading. Mixed against white so the tint stays legible
       whichever way the price moved. */
    .header-site.header-compact .pf-pinned .pf-item-change {
        border-radius: 5px;
        padding: 2px 5px;
        font-size: 10.5px;
    }

    .header-site.header-compact .pf-pinned .pf-item-change.pf-up {
        background-color: color-mix(in oklab, var(--brand-success) 11%, #fff);
    }

    .header-site.header-compact .pf-pinned .pf-item-change.pf-down {
        background-color: color-mix(in oklab, var(--brand-danger) 11%, #fff);
    }

    .header-site.header-compact .pf-pinned .pf-item-change.pf-neutral {
        background-color: var(--brand-surface-2);
    }

    /* The search well flips from recessed-on-white to raised-on-band: white fill, hairline, soft
       lift. Same field, same hooks — only the skin changes with the surface under it. */
    .header-site.header-compact .search-box input.txt-search {
        height: 36px;
        padding-inline-start: 38px;
        padding-inline-end: 68px;
        font-size: 12.5px;
        background-color: var(--brand-surface-2);
        border-radius: var(--radius-brand);
        box-shadow: var(--brand-shadow-sm);
    }

    .header-site.header-compact .search-box .icon-search {
        font-size: 15px;
    }

    .header-site.header-compact .search-box .search-hotkey kbd {
        font-size: 10px;
        border-radius: 4px;
        padding: 2px 5px;
    }

    /* Both actions collapse to 36px squares. */
    .header-site.header-compact .header-actions {
        column-gap: 8px;
    }

    .header-site.header-compact .user-info-content > a {
        width: 36px;
        height: 36px;
        padding-inline: 0;
        column-gap: 0;
        border-radius: var(--radius-brand);
        color: var(--brand-text-muted);
    }

    .header-site.header-compact .user-info-content > a:hover {
        background-color: var(--brand-surface-2);
        border-color: var(--brand-border);
        color: var(--brand-text);
    }

    .header-site.header-compact .btn-show-basket {
        width: 36px;
        height: 36px;
        padding-inline: 0;
        column-gap: 0;
        border-radius: var(--radius-brand);
        box-shadow: var(--brand-shadow-gold-chip);
        /* The label is the button's accessible name, so it is clipped rather than dropped. */
        position: relative;
    }

    .header-site.header-compact .btn-show-basket > span {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }

    /* The count returns to a corner pip, ringed in the band colour so it reads as detached from
       the gold button underneath it. */
    .header-site.header-compact .btn-show-basket .basket-content i.badge-manual {
        position: absolute;
        top: -5px;
        inset-inline-start: -5px;
        min-width: 18px;
        height: 18px;
        padding-inline: 5px;
        border-radius: 9px;
        font-size: 10px;
        border: 2px solid var(--brand-primary-band);
    }
}

/* ---------- the read-progress strip ---------- */
/* Direction A's "58px + 2px read-progress".
   ABSOLUTE, not a flex item: the compact .header-container is a flex ROW, so an in-flow strip
   would line up beside the logo instead of running under the bar. It resolves against
   .header-site, which is already position:fixed — no new positioned ancestor is introduced, so
   .orginal-menu still resolves where it always did.
   Being out of flow also means it cannot contribute to --header-full-height, which is what
   .content-site's margin is computed from. `display: none` until compact so it is inert
   (and invisible) in the expanded header. */
.header-site .header-progress {
    display: none;
}

@media only screen and (min-width: 992px) {
    .header-site.header-compact .header-progress {
        display: block;
        position: absolute;
        inset-inline: 0;
        bottom: 0;
        height: 2px;
        background-color: color-mix(in oklab, var(--brand-primary) 18%, transparent);
    }

    .header-site.header-compact .header-progress-fill {
        height: 2px;
        width: 0;
        background-color: var(--brand-primary);
    }
}


/* =============================================================================
   SECTION 5 — THE THREE DESKTOP DROPDOWNS (Phase 1b Step 4)
   -----------------------------------------------------------------------------
   The mini-cart (.cart-menu), the mega menu (.orginal-menu) and the account panel
   (.user-content) all already existed and already opened; what they lacked was the
   token layer. Everything here comes from the approved references:
     Docs/Redesign/Approved/header/Daric {Mini Cart,Mega Menu,Account Menu}.

   They are ONE family by construction, and these are the shared invariants — change
   them together or not at all:
     · frame       1px solid var(--brand-primary-edge), radius var(--radius-brand-lg)
     · elevation   var(--brand-shadow-panel)  (--brand-shadow-panel-lg for the mega menu)
     · offset      top: calc(100% + 10~11px), with an 11x11 rotated pointer at top:-6px
     · head        var(--brand-primary-band) under a --brand-primary-edge hairline
     · entrance    dropIn .18s cubic-bezier(.4,0,.2,1)
     · hover row   background var(--brand-primary-band); color var(--brand-primary-deep)

   THREE STRUCTURAL RULES INHERITED FROM shop.css — read before editing:
   1. .cart-menu and .user-content are `left: 0` in shop.css, which is PHYSICAL. The
      document is dir="rtl", so both are unpinned here and re-pinned with
      inset-inline-end. Do not "fix" this by editing shop.css.
   2. shop.css puts `overflow: hidden` on both panels. The pointer sits OUTSIDE the
      panel box, so it would be clipped; overflow is moved onto the inner scroller and
      the panel keeps overflow:hidden only where the design's own corners need it.
   3. .orginal-menu is position:absolute against .header-site and shop.js writes INLINE
      display/flex-direction/overflow onto it on hover (shop.js:543-548), wiping any
      layout declared for it here. So the mega menu's columns are laid out on a
      DESCENDANT (.mega-panel), never on .orginal-menu itself.
   ============================================================================= */

@keyframes headerDropIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes headerColIn {
    from { opacity: 0; transform: translateX(6px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* shop.css:2 hides every scrollbar site-wide (`::-webkit-scrollbar{width:0;height:0}`).
   These panels are the first storefront surfaces that scroll INSIDE themselves, so the
   bar has to come back — scoped to them, so nothing else on the site changes. */
.header-site .header-scroller::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

.header-site .header-scroller::-webkit-scrollbar-thumb {
    background: var(--brand-scroll-thumb);
    border-radius: 3px;
}

/* The shared pointer. An 11x11 square rotated 45deg with only its two leading edges
   bordered, so it reads as a continuation of the panel's frame rather than a diamond.
   Its two inline-side properties are set per-panel below, because the cart and account
   panels hang from the inline END while the mega menu hangs from the inline START. */
.header-site .header-pop-arrow {
    position: absolute;
    top: -6px;
    /* `left: auto` is not redundant: the mega menu's pointer is inside
       `.nav-bar-content > ul > li`, where shop.css pins every span to `left: 50%`. With a width
       AND both inline offsets set the box is over-constrained and the wrong one survives. */
    left: auto;
    margin: 0;
    width: 11px;
    height: 11px;
    background-color: var(--brand-surface-2);
    transform: rotate(-45deg);
    border-start-end-radius: 2px;
    border-top: 1px solid var(--brand-primary-edge);
    border-inline-end: 1px solid var(--brand-primary-edge);
}


/* ---------- 5a · MINI-CART ---------- */

/* shop.css:1114 .cart-menu { top:100%; left:0; border-radius:5px; overflow:hidden;
   background:#fff; border:1px solid #d8d8d8; width:300px; transition:.0s .3s }
   The `transition: .0s .3s` is a 300ms DELAY on a 0s transition — it animated nothing
   and only made the panel feel late. Replaced by the shared dropIn entrance. */
.header-site .cart-menu {
    top: calc(100% + 11px);
    left: auto;
    inset-inline-end: -2px;
    width: 380px;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
    transition: none;
    z-index: 60;
}

/* .cart-content:hover > .cart-menu (shop.css:1133) still does the opening — this only
   animates the reveal. `both` holds the from-state so there is no first-frame flash. */
.header-site .cart-content:hover > .cart-menu {
    animation: headerDropIn .18s cubic-bezier(.4, 0, .2, 1) both;
}

/* The 11px gap between the button and the panel would break the hover chain — the
   pointer leaves .cart-content before it reaches .cart-menu and the panel closes
   mid-approach. This invisible bridge spans the gap so the hover survives it.
   It is inside .cart-menu, so it only exists while the panel does. */
.header-site .cart-menu::before {
    content: "";
    position: absolute;
    top: -13px;
    inset-inline: 0;
    height: 13px;
}

/* The reference draws this pointer in --card while the panel head beneath it is --gold-band,
   which leaves a visible white notch on the gold. Its sibling reference (Daric Account Menu,
   whose head is also gold-band) fills the pointer with --gold-band for exactly that reason, so
   the band is taken as the intent and applied here too. Flagged as a deliberate one-line
   deviation from the Mini Cart reference. */
.header-site .cart-menu .header-pop-arrow {
    inset-inline-end: 26px;
    background-color: var(--brand-primary-band);
}

/* Escape / click-outside. The panel is opened by `.cart-content:hover > .cart-menu`, which is
   pure CSS with no state to unset — so dismissal is a class that outranks the hover rule until
   the pointer leaves and comes back (header-dropdowns.js removes it on mouseleave). */
.header-site .cart-content.is-dismissed > .cart-menu {
    display: none;
}

/* In flight between the remove POST and the replaced fragment. Non-blocking on purpose: the
   panel stays readable, it just stops accepting a second click on a row that is going away. */
.header-site .cart-content.is-busy .cart-menu ul {
    opacity: .55;
    pointer-events: none;
}

.header-site .cart-panel {
    background-color: var(--brand-surface-2);
    border: 1px solid var(--brand-primary-edge);
    border-radius: var(--radius-brand-lg);
    overflow: hidden;
    box-shadow: var(--brand-shadow-panel);
}

/* shop.css:1137 .cart-body { border-bottom:1px solid #d8d8d8; padding:10px 15px } */
.header-site .cart-menu .cart-body {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px 11px;
    background-color: var(--brand-primary-band);
    border-bottom: 1px solid var(--brand-primary-edge);
}

.header-site .cart-panel-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--brand-text);
}

/* The Sell-mode tell. Only rendered for OrderType.Sell, and the one place in the panel
   that uses the danger family for something that is not destructive — it is a MODE
   marker, which is why it is the muted brick red and not the saturated one. */
.header-site .cart-mode-badge {
    font-size: 10px;
    font-weight: 700;
    color: var(--brand-danger);
    background-color: var(--brand-danger-wash-strong);
    border: 1px solid var(--brand-danger-edge);
    border-radius: 5px;
    padding: 2px 6px;
}

/* shop.css:1142 .count-product { font-size:13px } and :1146 bolds its last span.
   The design makes this a bordered pill at the inline end instead. */
.header-site .cart-menu .count-product {
    margin-inline-start: auto;
    font-size: 11px;
    font-weight: 600;
    color: var(--brand-primary-deep);
    background-color: var(--brand-surface-2);
    border: 1px solid var(--brand-primary-edge);
    border-radius: 20px;
    padding: 3px 9px;
    white-space: nowrap;
}

.header-site .cart-menu .count-product > span:last-child {
    font-size: 11px;
    font-weight: 600;
}

/* The empty panel's count pill is neutral, not gold: with nothing in the basket there is
   no quantity worth accenting. */
.header-site .cart-menu .count-product.is-empty {
    color: var(--brand-text-muted);
    border-color: var(--brand-border);
}

/* shop.css:1162 .cart-menu ul { max-height:250px; overflow:auto; display:inline-block;
   border-bottom:1px solid #d8d8d8 } */
.header-site .cart-menu ul {
    display: block;
    max-height: 264px;
    overflow-y: auto;
    border-bottom: 0;
}

/* shop.css:1172 .cart-menu ul li { list-style:none } + :1180 padding/border */
.header-site .cart-menu ul li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--brand-border);
    position: relative;
    transition: background-color .15s ease;
}

.header-site .cart-menu ul li:last-child {
    border-bottom: 0;
}

.header-site .cart-menu ul li:hover {
    background-color: var(--brand-surface-recess);
}

/* The whole row up to the price is one link; the remove button is its sibling, outside it,
   so the two hit areas never nest. */
.header-site .cart-menu ul li > a {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

/* shop.css:1186 .cart-image { width:100px } — far too wide for a 380px panel; the design
   frames a 54px square in the softer gold rule. */
.header-site .cart-menu .cart-image {
    flex: none;
    width: 54px;
    height: 54px;
    border-radius: var(--radius-brand);
    background-color: var(--brand-surface-recess);
    border: 1px solid var(--brand-primary-rule);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-site .cart-menu .cart-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Thumbnail is nullable on ProductUiSummeryDto and there is no placeholder convention in
   the storefront, so a missing image falls back to this gilded disc rather than a broken
   <img>. The markup omits the <img> entirely when Thumbnail is null. */
.header-site .cart-menu .cart-image-fallback {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: radial-gradient(circle at 36% 28%, #FDF7E8, var(--brand-avatar-from) 60%, var(--brand-avatar-to));
    border: 1px solid var(--brand-primary-rule);
}

/* shop.css:1192 .cart-info { width: calc(100% - 100px) } — sized against the old 100px
   thumbnail. Flex handles it now. */
.header-site .cart-menu .cart-info {
    flex: 1;
    min-width: 0;
    width: auto;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-top: 1px;
}

/* shop.css:1198 .cart-info p { font-size:13px; margin-bottom:5px } — two-line clamp so a
   long gold-product name cannot push the row height past the 264px scroller's rhythm. */
.header-site .cart-menu .cart-info p {
    margin: 0;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--brand-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.header-site .cart-menu .feature-row {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.header-site .cart-menu .cart-item-meta {
    font-size: 10.5px;
    font-weight: 500;
    color: var(--brand-text-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-site .cart-menu .cart-item-sep {
    flex: none;
    width: 1px;
    height: 10px;
    background-color: var(--brand-border);
}

.header-site .cart-menu .cart-item-qty {
    flex: none;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--brand-text-muted);
}

.header-site .cart-menu .cart-item-side {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 7px;
}

.header-site .cart-menu .cart-item-price {
    display: flex;
    align-items: baseline;
    gap: 3px;
}

.header-site .cart-menu .cart-item-price > .price-value {
    font-size: 13px;
    font-weight: 700;
    color: var(--brand-text);
    letter-spacing: .01em;
}

.header-site .cart-menu .cart-item-price > .price-unit {
    font-size: 9.5px;
    font-weight: 500;
    color: var(--brand-text-soft);
}

/* shop.css:1211 .frm-remove-cart { position:absolute; bottom:0; left:0 } — the old form
   was pinned to the row corner. It is a normal flex child now, so the pin is unwound. */
.header-site .cart-menu .frm-remove-cart {
    position: static;
    display: flex;
}

/* shop.css:1215 .btn-remove-cart { color:#b1b1b1; font-size:16px } */
.header-site .cart-menu .btn-remove-cart {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 7px;
    background-color: transparent;
    color: var(--brand-text-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

/* shop.css:1219 `.frm-remove-cart button i { font-size: 22px }` (0,1,3) — sized for the old
   trash icon pinned to the row corner. At 22px inside a 24px button the glyph fills the whole
   control and reads as a heavy black ✕ rather than the design's quiet 12px one. */
.header-site .cart-menu .btn-remove-cart > i.fa {
    font-size: 12px;
    line-height: 1;
}

.header-site .cart-menu .btn-remove-cart:hover {
    color: var(--brand-danger);
    background-color: var(--brand-danger-wash);
    border-color: var(--brand-danger-edge-strong);
}

/* ----- summary footer ----- */

/* shop.css:1235 .price-cart-content { padding:10px 15px } */
.header-site .cart-menu .price-cart-content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 11px;
    padding: 13px 15px 14px;
    background-color: var(--brand-surface-recess);
    border-top: 1px solid var(--brand-primary-rule);
}

.header-site .cart-menu .sum-price {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.header-site .cart-menu .price-label p {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--brand-text-muted);
}

.header-site .cart-menu .price-buy {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

/* The total. h5 is what Cart/Cart.js:51 writes into from the cart page
   (`.price-cart-content .price-buy h5`) — the tag is a contract, not a heading choice. */
.header-site .cart-menu .price-buy h5 {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: var(--brand-text);
    letter-spacing: .01em;
}

.header-site .cart-menu .price-buy .price-unit {
    font-size: 10.5px;
    font-weight: 500;
    color: var(--brand-text-muted);
}

.header-site .cart-foot-note {
    font-size: 10px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--brand-text-soft);
}

.header-site .cart-menu .btn-goto-cart-content {
    display: flex;
    gap: 8px;
    width: 100%;
}

/* shop.css:1246 .btn-goto-cart — the old single full-width button. The design pairs a
   primary and a secondary at a 1.6 : 1 ratio, which keeps تکمیل خرید unmistakably the
   main action without making مشاهده سبد look like an afterthought. */
.header-site .cart-menu .btn-goto-cart {
    flex: 1.6;
    height: 42px;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-brand-md);
    background-color: var(--brand-primary);
    color: var(--brand-primary-ink);
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--brand-shadow-gold-chip);
    transition: filter .2s ease;
}

.header-site .cart-menu .btn-goto-cart:hover {
    filter: brightness(1.05);
    color: var(--brand-primary-ink);
}

.header-site .cart-menu .btn-view-cart {
    flex: 1;
    height: 42px;
    min-width: 0;
    border: 1px solid var(--brand-primary-edge);
    border-radius: var(--radius-brand-md);
    background-color: var(--brand-surface-2);
    color: var(--brand-primary-deep);
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .2s ease;
}

.header-site .cart-menu .btn-view-cart:hover {
    background-color: var(--brand-primary-band);
    color: var(--brand-primary-deep);
}

/* ----- empty state ----- */

.header-site .cart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 30px 26px 26px;
    background-color: var(--brand-surface-2);
    text-align: center;
}

.header-site .cart-empty-medallion {
    width: 62px;
    height: 62px;
    margin-bottom: 9px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 30%, #FFFDF7, var(--brand-primary-band));
    border: 1px solid var(--brand-primary-rule);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-primary);
    font-size: 24px;
}

.header-site .cart-empty-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--brand-text);
}

.header-site .cart-empty-body {
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.8;
    color: var(--brand-text-muted);
    max-width: 250px;
    text-wrap: pretty;
}

.header-site .cart-empty-cta {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 18px;
    border: 1px solid var(--brand-primary-edge);
    border-radius: var(--radius-brand-md);
    background-color: var(--brand-primary-band);
    color: var(--brand-primary-deep);
    font-size: 12.5px;
    font-weight: 700;
    transition: background-color .2s ease;
}

.header-site .cart-empty-cta:hover {
    background-color: var(--brand-primary-tint);
    color: var(--brand-primary-deep);
}

/* The category strip under the empty state. Real top-level categories from the same
   Menu model, not invented links — see Components/Cart/Default.cshtml. */
.header-site .cart-empty-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 10px 15px;
    background-color: var(--brand-surface-recess);
    border-top: 1px solid var(--brand-border);
}

.header-site .cart-empty-links a {
    font-size: 11px;
    font-weight: 600;
    color: var(--brand-text-muted);
}

.header-site .cart-empty-links a:hover {
    color: var(--brand-primary-deep);
}

.header-site .cart-empty-links .cart-item-sep {
    height: 10px;
}


/* ---------- 5b · MEGA MENU ---------- */

/* THE SINGLE MOST DESTRUCTIVE PAIR OF RULES IN THIS SECTION. shop.css has TWO, and the second
   one is easy to miss:

     .nav-bar-content > ul > li span          (0,1,3)
       { position:absolute; bottom:0; left:50%; transform:translateX(-50%);
         width:0; height:2px; background-color:#00bfd6; margin:auto; transition:.3s .3s }
     .nav-bar-content > ul > li:hover span    (0,2,3)   <-- note the :hover
       { width: 100% }

   They are the retired sliding-underline slot for the old nav — the empty <span> still sitting
   in the trigger pill — but the subject is a bare `span`. The mega panel lives inside
   `.nav-bar-content > ul > li`, so EVERY span in it matches: category names, counts, column
   headings, level-3 bullets, the "زیرشاخه دارد" chips, the empty-state copy, the rail title.

   The second rule is the one that actually breaks the panel in use, and it only bites on a REAL
   pointer hover: it gives every span `width: 100%`, so `.mega-count` — which is `flex: none` —
   swells to the full width of its row and leaves zero free space for `.mega-name` (flex:1,
   flex-basis:0). Result: rows render as a bare number with the title squeezed out of existence.
   Rows with no count are unaffected, which is the tell.

   SPECIFICITY IS THE WHOLE FIX, so do not "simplify" this selector. It must outrank (0,2,3):
   three classes (.header-site + .nav-bar-content + .mega-panel) puts it at (0,3,0), and
   3 > 2 on the class column decides it before the element column is ever compared. An earlier
   attempt scoped this as `.header-site .mega-panel :where(span)` — (0,2,0) — which beat the base
   rule and looked correct in every scripted check, because jQuery's .trigger("mouseenter") does
   NOT set the CSS :hover state. Only a real mouse revealed it.

   :where() keeps the reset at (0,3,0) so the four exception rules below — which need real box
   values back — can win at (0,4,0). */
.header-site .nav-bar-content .mega-panel :where(span) {
    position: static;
    inset: auto;
    width: auto;
    height: auto;
    margin: 0;
    background-color: transparent;
    transform: none;
    transition: none;
}

/* The four panel spans that need a real box back after that reset. Each carries one class more
   than the reset, so it wins without needing !important. */
.header-site .nav-bar-content .mega-panel .mega-dot {
    width: 4px;
    height: 4px;
    background-color: var(--brand-primary-rule);
}

.header-site .nav-bar-content .mega-panel .mega-deeper {
    background-color: var(--brand-primary-band);
}

.header-site .nav-bar-content .mega-panel .mega-empty-medallion {
    width: 52px;
    height: 52px;
    background: radial-gradient(circle at 38% 30%, #FFFDF7, var(--brand-primary-band));
}

/* The pointer is a sibling of .mega-panel, not a descendant, so the reset does not cover it —
   but it IS inside `.nav-bar-content > ul > li`, so the same two shop.css rules flatten it to a
   0x2px bar on hover. Same escape, one class higher. */
.header-site .nav-bar-content .header-pop-arrow.mega-arrow {
    position: absolute;
    top: -6px;
    left: auto;
    margin: 0;
    width: 11px;
    height: 11px;
    background-color: var(--brand-surface-2);
    transition: none;
}

/* shop.css:1317 .orginal-menu { width: calc(100% - 30px); min-height:450px;
   background:#fff; box-shadow:0 7px 8px 0 rgba(0,0,0,.04); transition:.5s .3s; margin:auto;
   left:0; right:0 }

   Two things are being undone. The full-header WIDTH — the design anchors a fixed 1020px
   panel under the pill, not a full-bleed shelf. And the `transition: .5s .3s`, a half-second
   fade behind a 300ms delay, which is what made this menu feel sluggish; the entrance is the
   family's 180ms dropIn instead.

   NOT undone: display/flex-direction/flex/overflow-y. shop.js:543-548 writes those four INLINE
   on every open and inline wins, so this element is left as the column box it insists on being.
   The columns live on .mega-panel. */
.header-site .orginal-menu {
    width: 1020px;
    max-width: calc(100vw - 60px);
    min-height: 0;
    top: calc(100% + 10px);
    left: auto;
    right: auto;
    inset-inline-start: -6px;
    margin: 0;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transition: none;
    z-index: 60;
}

.header-site .categories-ctn > ul > li.active .orginal-menu {
    animation: headerDropIn .18s cubic-bezier(.4, 0, .2, 1) both;
}

/* shop.css:1346/1351 .orginal-menu > li { width:250px; background:#fff }
   There is exactly one li now and it is the panel host, not a category row. */
/* shop.css also gives `.categories-ctn > ul li` a 15px inline margin, which inset the panel from
   its own 1020px shell and shaved the third column. */
.header-site .orginal-menu > li.mega-host {
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: transparent;
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
}

/* The pill sits at the inline START of ROW 3, so this panel and its pointer hang from that
   side — the mirror of the cart and account panels. */
.header-site .mega-arrow {
    inset-inline-start: 30px;
    transform: rotate(45deg);
    border-start-end-radius: 0;
    border-start-start-radius: 2px;
    border-inline-end: 0;
    border-inline-start: 1px solid var(--brand-primary-edge);
}

/* Bridges the 10px gap between the pill and the panel so the pointer can travel without
   the hover dropping — same reason as the mini-cart's. */
.header-site .mega-host::before {
    content: "";
    position: absolute;
    top: -12px;
    inset-inline: 0;
    height: 12px;
}

.header-site .mega-panel {
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 452px;
    background-color: var(--brand-surface-2);
    border: 1px solid var(--brand-primary-edge);
    border-radius: var(--radius-brand-lg);
    overflow: hidden;
    box-shadow: var(--brand-shadow-panel-lg);
}

.header-site .mega-col {
    display: flex;
    flex-direction: column;
    padding: 10px 0;
    min-height: 0;
}

.header-site .mega-col-1 {
    flex: none;
    width: 252px;
    background-color: var(--brand-surface-recess);
    border-inline-end: 1px solid var(--brand-border);
    overflow-y: auto;
}

.header-site .mega-col-2 {
    flex: none;
    width: 262px;
    border-inline-end: 1px solid var(--brand-border);
    overflow-y: auto;
    animation: headerColIn .2s ease both;
}

.header-site .mega-col-3 {
    flex: 1;
    min-width: 0;
    padding: 0;
    animation: headerColIn .24s ease both;
}

.header-site .mega-col-head {
    font-size: 9.5px;
    font-weight: 700;
    color: var(--brand-text-soft);
    letter-spacing: .06em;
    padding: 4px 18px 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Rail rows. shop.css:1357 `.orginal-menu > li > a { padding:10px 15px; color:#555 }` no longer
   matches anything — these are not direct children of .orginal-menu. */
.header-site .mega-l1,
.header-site .mega-l2 {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
    margin: 0 8px;
    padding-inline: 12px 14px;
    border-radius: var(--radius-brand);
    color: var(--brand-text);
    background-color: transparent;
    transition: background-color .15s ease, color .15s ease;
}

.header-site .mega-l1 {
    height: 42px;
    font-size: 13px;
    font-weight: 600;
}

.header-site .mega-l2 {
    height: 40px;
    font-size: 12.5px;
    font-weight: 600;
}

.header-site .mega-l1.is-active,
.header-site .mega-l2.is-active {
    background-color: var(--brand-primary-band);
    color: var(--brand-primary-deep);
}

.header-site .mega-name {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-site .mega-count {
    flex: none;
    font-size: 10px;
    font-weight: 600;
    color: var(--brand-text-soft);
}

.header-site .mega-l1.is-active .mega-count,
.header-site .mega-l2.is-active .mega-count {
    color: var(--brand-primary-deep);
}

.header-site .mega-chev {
    flex: none;
    font-size: 12px;
    opacity: .5;
}

/* Only the deep block belonging to the active rail item is in the layout. Everything else is
   rendered but display:none — one query, no AJAX, no flash on hover. */
.header-site .mega-deep {
    display: none;
    flex: 1;
    min-width: 0;
}

.header-site .mega-deep.is-active {
    display: flex;
    align-items: stretch;
}

.header-site .mega-l3-block {
    display: none;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    padding-top: 10px;
}

.header-site .mega-l3-block.is-active {
    display: flex;
}

.header-site .mega-l3-list {
    display: flex;
    flex-direction: column;
    padding: 0 8px;
    overflow-y: auto;
    min-height: 0;
}

.header-site .mega-l3 {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: none;
    height: 38px;
    padding: 0 12px;
    border-radius: var(--radius-brand);
    color: var(--brand-text);
    font-size: 12.5px;
    font-weight: 500;
    transition: background-color .15s ease, color .15s ease;
}

.header-site .mega-l3:hover {
    background-color: var(--brand-primary-band);
    color: var(--brand-primary-deep);
}

.header-site .mega-dot {
    flex: none;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--brand-primary-rule);
}

/* "goes deeper than this panel". HaveChildren is true but the query stopped at level 3, so the
   link resolves to the category's own page instead of opening a fourth column. */
.header-site .mega-deeper {
    flex: none;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 9.5px;
    font-weight: 600;
    color: var(--brand-primary-deep);
    background-color: var(--brand-primary-band);
    border: 1px solid var(--brand-primary-rule);
    border-radius: 20px;
    padding: 2px 7px;
    white-space: nowrap;
}

.header-site .mega-l3-foot {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 12px 18px 13px;
    background-color: var(--brand-surface-recess);
    border-top: 1px solid var(--brand-border);
}

.header-site .mega-foot-note {
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1.7;
    color: var(--brand-text-soft);
    text-wrap: pretty;
}

.header-site .mega-foot-link {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--brand-primary-deep);
}

/* A level-2 with no level-3 under it. */
.header-site .mega-col-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 20px 30px 30px;
    text-align: center;
}

.header-site .mega-empty-medallion {
    width: 52px;
    height: 52px;
    margin-bottom: 6px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 30%, #FFFDF7, var(--brand-primary-band));
    border: 1px solid var(--brand-primary-rule);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-primary);
    font-size: 20px;
}

.header-site .mega-empty-title {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--brand-text);
}

.header-site .mega-empty-body {
    font-size: 11px;
    font-weight: 500;
    line-height: 1.75;
    color: var(--brand-text-muted);
    max-width: 220px;
    text-wrap: pretty;
}

.header-site .mega-empty-cta {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 15px;
    border: 1px solid var(--brand-primary-edge);
    border-radius: var(--radius-brand-md);
    background-color: var(--brand-primary-band);
    color: var(--brand-primary-deep);
    font-size: 11.5px;
    font-weight: 700;
}

/* ----- the category preview rail ----- */

.header-site .mega-rail {
    flex: none;
    width: 236px;
    box-sizing: border-box;
    border-inline-start: 1px solid var(--brand-border);
    background-color: var(--brand-surface-recess);
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
}

.header-site .mega-rail-image {
    height: 184px;
    border-radius: var(--radius-brand-md);
    border: 1px solid var(--brand-primary-rule);
    overflow: hidden;
    background-color: var(--brand-surface-2);
}

.header-site .mega-rail-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.header-site .mega-rail-title {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--brand-text);
    text-wrap: pretty;
}

.header-site .mega-rail-cta {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 38px;
    border: 1px solid var(--brand-primary-edge);
    border-radius: var(--radius-brand-md);
    background-color: var(--brand-surface-2);
    color: var(--brand-primary-deep);
    font-size: 12px;
    font-weight: 700;
    transition: background-color .2s ease;
}

.header-site .mega-rail-cta:hover {
    background-color: var(--brand-primary-band);
    color: var(--brand-primary-deep);
}

/* ----- a level-1 category with no children at all ----- */

.header-site .mega-shallow {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 9px;
    padding: 34px 40px;
}

.header-site .mega-shallow-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--brand-text);
}

.header-site .mega-shallow-body {
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.9;
    color: var(--brand-text-muted);
    max-width: 420px;
    text-wrap: pretty;
}

.header-site .mega-shallow-actions {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 8px;
}

.header-site .mega-shallow-cta {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 40px;
    padding: 0 18px;
    border: 0;
    border-radius: var(--radius-brand-md);
    background-color: var(--brand-primary);
    color: var(--brand-primary-ink);
    font-size: 12.5px;
    font-weight: 700;
    box-shadow: var(--brand-shadow-gold-sm);
    transition: filter .2s ease;
}

.header-site .mega-shallow-cta:hover {
    filter: brightness(1.05);
    color: var(--brand-primary-ink);
}

/* The trigger pill takes the panel's own colours while it is open, so the two read as one
   object. .active is put on li.main-menu by shop.js:550. */
.header-site .categories-ctn > ul > li.active > a.header-cat-pill {
    background-color: var(--brand-primary-band);
    border-color: var(--brand-primary-edge);
    color: var(--brand-primary-deep);
}

.header-site .categories-ctn > ul > li.active > a.header-cat-pill .header-cat-pill-caret {
    transform: rotate(180deg);
}

.header-site .header-cat-pill .header-cat-pill-caret {
    transition: transform .18s ease;
}


/* ---------- 5c · ACCOUNT MENU ---------- */

/* ----- the two triggers ----- */

/* The reference's headline constraint: "same 44px height · both triggers min-width 152px ->
   zero layout shift on login". SECTION 2 already gave .user-info-content > a its 44px; the
   min-width is what stops the header reflowing when the guest link becomes the identity chip,
   so it goes on BOTH and is the reason neither rule may drop it. */
.header-site .user-info-content > a.header-login-link,
.header-site .user-info-content > a.header-account-trigger {
    box-sizing: border-box;
    min-width: 152px;
}

/* Guest. Quiet by default — the gold in ROW 2 is spent on the cart button — with the hairline
   and a recessed fill appearing on hover. */
.header-site .user-info-content > a.header-login-link {
    justify-content: center;
}

.header-site .user-info-content > a.header-login-link:hover {
    border-color: var(--brand-border);
    background-color: var(--brand-surface-recess);
    color: var(--brand-text);
}

.header-site .user-info-content > a.header-login-link > i.fa {
    font-size: 17px;
}

/* Signed in. A bordered chip rather than a bare glyph, because it now carries a name and has
   to read as a control that opens something. Capped at 200px so a long name truncates instead
   of pushing the cart button off the row — see .header-account-name. */
.header-site .user-info-content > a.header-account-trigger {
    max-width: 200px;
    padding-inline-start: 6px;
    padding-inline-end: 12px;
    column-gap: 9px;
    justify-content: flex-start;
    border-color: var(--brand-border);
    background-color: var(--brand-surface-2);
}

.header-site .user-info-content > a.header-account-trigger:hover {
    border-color: var(--brand-primary-edge);
    background-color: var(--brand-primary-band);
    color: var(--brand-text);
}

/* shop.js toggles .active on the trigger AND swaps its caret class, so the open state is
   addressable without any new hook. */
.header-site .user-info-content > a.header-account-trigger.active {
    background-color: var(--brand-primary-band);
    border-color: var(--brand-primary-edge);
    color: var(--brand-text);
}

.header-site .header-account-trigger .arrow-down {
    flex: none;
    font-size: 12px;
    color: var(--brand-text-soft);
    transition: transform .18s ease;
}

/* shop.js:365 swaps fa-angle-down -> fa-angle-up on open. Rotating the UP glyph rather than
   keying off .active keeps the caret in step with the class shop.js actually controls. */
.header-site .header-account-trigger .arrow-down.fa-angle-up {
    transform: rotate(180deg);
}

/* The monogram medallion. The ONLY avatar in this application — no user record carries a
   photo — so it is drawn, not fetched, and can never 404. */
.header-site .header-avatar {
    position: relative;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid var(--brand-primary-edge);
    background: linear-gradient(145deg, var(--brand-avatar-from), var(--brand-avatar-to));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    color: var(--brand-primary-ink);
}

.header-site .header-avatar-lg {
    width: 44px;
    height: 44px;
    font-size: 17px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), var(--brand-shadow-gold-sm);
}

/* Long names are the norm in Persian, so the trigger truncates and the full string lives in
   the title attribute and in the panel head. */
.header-site .header-account-name {
    flex: 1;
    min-width: 0;
    text-align: start;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 32px;
    color: var(--brand-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ----- the panel ----- */

/* shop.css:1615 .user-info-content .user-content { width:200px; background:#fff;
   box-shadow:0 3px 8px 0 rgb(0 0 0/30%); border-radius:7px; overflow:hidden; left:0 }

   `left: 0` is PHYSICAL and this document is dir="rtl", so the panel hung off the wrong edge
   of the trigger. It is unpinned and re-pinned with inset-inline-end. The box itself becomes a
   transparent wrapper so the pointer can sit outside it; .account-panel is the real surface.
   SECTION 2's rule (:503) still sets the old background/border/radius — overridden here rather
   than deleted, so that rule keeps documenting the shop.css declaration it replaced. */
.header-site .user-info-content .user-content {
    top: calc(100% + 11px);
    left: auto;
    inset-inline-end: -2px;
    width: 300px;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
    z-index: 60;
}

/* The panel is opened by jQuery slideToggle(0), which sets inline display — so the entrance
   has to be an animation, not a transition. */
.header-site .user-info-content > a.header-account-trigger.active + .user-content {
    animation: headerDropIn .18s cubic-bezier(.4, 0, .2, 1) both;
}

/* Unlike the other two, this pointer sits against the gold identity header, so it takes that
   fill rather than the card white. */
.header-site .header-account-arrow {
    inset-inline-end: 24px;
    background-color: var(--brand-primary-band);
}

.header-site .account-panel {
    background-color: var(--brand-surface-2);
    border: 1px solid var(--brand-primary-edge);
    border-radius: var(--radius-brand-lg);
    overflow: hidden;
    box-shadow: var(--brand-shadow-panel);
}

/* ----- identity header ----- */

.header-site .account-panel .profile-info {
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding: 14px 15px 13px;
    background-color: var(--brand-primary-band);
    border-bottom: 1px solid var(--brand-primary-edge);
}

.header-site .account-panel .profile-title {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.header-site .account-panel .profile-image {
    flex: none;
    width: auto;
    height: auto;
}

.header-site .account-panel .profile-name {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
}

.header-site .account-panel .profile-name .name {
    margin: 0;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--brand-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* dir="ltr" on the element itself; this only handles the type. */
.header-site .account-panel .profile-name .phone {
    margin: 0;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--brand-text-muted);
    letter-spacing: .02em;
    text-align: start;
}

/* ----- menu groups ----- */

.header-site .account-panel .user-links-content ul {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 6px 0;
    list-style: none;
}

/* shop.css:1715 .user-links-content li { border-bottom: 1px solid #dedede } — a rule per row
   made the panel a stack of boxes. The reference separates GROUPS, not rows. */
.header-site .account-panel .user-links-content li {
    border-bottom: 0;
}

.header-site .account-panel .user-links-group-2 {
    border-top: 1px solid var(--brand-border);
}

.header-site .account-panel .user-links-content li a {
    display: flex;
    align-items: center;
    gap: 11px;
    height: 40px;
    padding: 0 15px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--brand-text);
    transition: background-color .15s ease, color .15s ease;
}

/* SECTION 2 (:516) set this hover to --brand-surface. The dropdown family's hover is the gold
   band with gold-deep text — the same one the mega menu's rows and the ROW 3 links use. */
.header-site .account-panel .user-links-content li a:hover {
    background-color: var(--brand-primary-band);
    color: var(--brand-primary-deep);
}

.header-site .account-panel .user-links-content li a > i.fa:first-child {
    flex: none;
    font-size: 17px;
    opacity: .8;
}

.header-site .account-panel .user-links-content li a > label {
    flex: 1;
    min-width: 0;
    margin: 0;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-site .account-panel .account-go {
    flex: none;
    font-size: 12px;
    opacity: .45;
}

/* ----- logout ----- */

/* Its own recessed footer under a GOLD rule, not a grey one: the reference uses the softer
   gold hairline here to tie the destructive action back to the panel rather than fencing it
   off with a neutral line. */
.header-site .account-logout {
    padding: 8px 10px 10px;
    background-color: var(--brand-surface-recess);
    border-top: 1px solid var(--brand-primary-rule);
}

.header-site .account-logout-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 38px;
    padding: 0 11px;
    border: 1px solid transparent;
    border-radius: var(--radius-brand);
    background-color: transparent;
    color: var(--brand-text-muted);
    font-size: 12.5px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* Colourless at rest, danger only on hover — it is a real, irreversible action, but it is not
   an alarm sitting in the panel. */
.header-site .account-logout-btn:hover {
    background-color: var(--brand-danger-wash);
    border-color: var(--brand-danger-edge);
    color: var(--brand-danger);
}

.header-site .account-logout-btn > i.fa {
    flex: none;
    font-size: 16px;
    opacity: .85;
}


/* =============================================================================
   SECTION 6 — THE GLOBAL BUY/SELL MODE SWITCH (Phase 1b Step 5)
   -----------------------------------------------------------------------------
   Reference: Docs/Redesign/Approved/header/Daric Mode Switch (standalone).html
   Markup:    Views/Shared/Partials/_Header.cshtml (switch, ribbon, ROW 1 flag,
              reassurance notice) and Views/Shared/Components/Cart/Default.cshtml
              (the inactive-basket ghost).

   THE MODE CHANNEL. Nothing in this section names --brand-sell* except the switch's
   own sell segment. Every other mode-aware surface reads --brand-mode* (declared in
   tailwind/input.css :root, overridden under body.is-sell-mode), which is what lets a
   future mode-aware element join in by pointing at the channel instead of adding a
   second .is-sell-mode rule here.

   BUY MODE IS UNCHANGED BY DESIGN. --brand-mode resolves to --brand-primary and
   --brand-mode-wash to --brand-surface-2, so a buy-mode header renders exactly what it
   rendered before this step. That is the regression guard: if the buy header moved,
   something in here named a sell token where it should have named the channel.

   WHEN Sell IS OFF the switch, the ribbon, the ROW 1 flag, the ghost and the notice all
   emit nothing at all (<feature name="Sell"> / server-side conditions), and
   .has-mode-switch is absent from ROW 2 — so the layout rules below do not apply either
   and the row falls back to SECTION 2's two-child centring untouched.
   ============================================================================= */

/* ---------- ROW 2 layout with the switch present ---------- */

/* SECTION 2 (:259) gives .header-brand and .header-actions `flex: 1 1 0; min-width: max-content`
   so the search field lands on ROW 2's true OPTICAL centre. That balance assumes an action
   cluster of two children; the switch is a third and ~230px wide, which would shove the field
   far off-centre while still forcing it to shrink.

   The reference resolves this by abandoning optical centring once the switch is present: in its
   three-state comparison the search field is simply `flex: 1` between brand and actions, at 520px
   in buy mode and 420px in sell (the sell strip's flag chip is wider), and only in the feature-off
   state does it return to a centred 600px. So this rule reproduces the reference rather than
   preserving the old balance — and it is scoped to .has-mode-switch, which _Header.cshtml only
   emits when the Sell module is on. With Sell off, none of this matches and SECTION 2 stands. */
.header-site .header-main-bar.has-mode-switch .header-brand,
.header-site .header-main-bar.has-mode-switch .header-actions {
    flex: 0 0 auto;
    min-width: 0;
}

.header-site .header-main-bar.has-mode-switch .search-box {
    flex: 1 1 auto;
    /* The reference's buy-mode width. It is a cap, not a width: the field yields first as the
       viewport narrows, which is correct — it is the only element in the row that can lose space
       without losing meaning. */
    max-width: 520px;
}

/* The switch is the widest optional thing in the row, so the column-gap has to come down with it
   or the row overflows before the field has finished shrinking. 40px -> 26px is the reference's
   own ROW 2 inline padding, which keeps the rhythm consistent. */
.header-site .header-main-bar.has-mode-switch {
    column-gap: 26px;
}

/* The hairline between the switch and the account/cart pair. A real element rather than a border
   on a neighbour, so it disappears with the switch instead of leaving an orphaned edge. */
.header-site .header-actions-divider {
    flex: none;
    width: 1px;
    height: 26px;
    background-color: var(--brand-border);
}


/* ---------- the switch ---------- */

/* The track. 44px to match the cart pill and the login chip beside it — the three controls form
   one row of equal-height objects in the reference, and a 40px switch reads as a mistake next to
   them. The inset shadow is the same recessed treatment as the search well: this is a control you
   choose FROM, sunk into the bar, not a button that sits on it. */
.header-site .header-mode-switch {
    flex: none;
    height: 44px;
    padding: 3px;
    box-sizing: border-box;
    column-gap: 3px;
    background-color: var(--brand-surface-recess);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-brand-md);
    box-shadow: var(--brand-shadow-inset);
}

/* In sell mode the track's own hairline picks up the sell edge. The reference does this and it
   matters: it is what keeps the switch reading as one object once its active half is green,
   instead of a green pill sitting in an unrelated gold-era frame. */
body.is-sell-mode .header-site .header-mode-switch {
    border-color: var(--brand-sell-edge);
}

/* A segment. `height: 100%` inside a 44px track with 3px padding gives the reference's 38px pill;
   --radius-brand-inner (9px) is that pill's radius, concentric with the track's 12px. */
.header-site .header-mode-seg {
    height: 100%;
    padding-block: 0;
    padding-inline: 14px;
    border: 0;
    border-radius: var(--radius-brand-inner);
    box-sizing: border-box;
    white-space: nowrap;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--brand-text-muted);
    background-color: transparent;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

/* shop.css styles bare <a> hover colour site-wide, which would repaint the active segment's ink
   mid-hover. Pinning the decoration here keeps the segment's own colour rules authoritative. */
.header-site .header-mode-seg,
.header-site .header-mode-seg:hover,
.header-site .header-mode-seg:focus {
    text-decoration: none;
}

.header-site .header-mode-seg > i.fa {
    flex: none;
    font-size: 13px;
}

/* The INACTIVE side on hover. Not a fill — a fill would read as selected. The reference tints it
   toward the mode it would switch TO, which is the only preview a one-click control can give. */
.header-site .header-mode-seg:not(.is-active):hover {
    background-color: var(--brand-surface-2);
    color: var(--brand-text);
}

.header-site .header-mode-seg.is-sell:not(.is-active):hover {
    color: var(--brand-sell-deep);
    box-shadow: inset 0 0 0 1px var(--brand-sell-edge);
}

.header-site .header-mode-seg.is-buy:not(.is-active):hover {
    color: var(--brand-primary-deep);
    box-shadow: inset 0 0 0 1px var(--brand-primary-edge);
}

/* The ACTIVE side. Each half wears its OWN hue, not the mode channel: the sell segment has to look
   like sell while the customer is still in buy mode, otherwise the control cannot tell them what
   the other side does. This is the one deliberate exception to the channel rule at the top of this
   section. */
.header-site .header-mode-seg.is-buy.is-active {
    background-color: var(--brand-primary);
    color: var(--brand-primary-ink);
    font-weight: 700;
    box-shadow: var(--brand-shadow-gold-chip);
}

.header-site .header-mode-seg.is-sell.is-active {
    background-color: var(--brand-sell);
    color: var(--brand-sell-ink);
    font-weight: 700;
    box-shadow: var(--brand-shadow-sell-chip);
}

.header-site .header-mode-seg.is-active:hover {
    filter: brightness(1.05);
}

/* Keyboard focus. Preflight is off and shop.css strips outlines, so without this the switch looks
   unreachable to a keyboard user even though it is perfectly reachable. */
.header-site .header-mode-seg:focus-visible {
    outline: 2px solid var(--brand-mode-deep);
    outline-offset: 2px;
}

/* LABEL LENGTH. The full label carries the shop's name ("خرید از داریک"); below 1280px it drops to
   the enum's own "خرید از ما" / "فروش به ما". Never to a bare "خرید / فروش" — the reference is
   explicit that the DIRECTION of the trade must survive every truncation, and "خرید" alone does
   not say who is buying. Both spans are always in the DOM and CSS picks one, so the switch needs
   no JS and no second server-side branch. */
.header-site .header-mode-seg-short {
    display: none;
}

@media (max-width: 1279px) {
    .header-site .header-mode-seg-full {
        display: none;
    }

    .header-site .header-mode-seg-short {
        display: inline;
    }

    /* With the labels shortened the switch gives back ~60px; the search field takes it. */
    .header-site .header-main-bar.has-mode-switch .search-box {
        max-width: 460px;
    }
}


/* ---------- the sell ribbon ---------- */

/* 3px at the very top of the shell, sell mode only. The one element in the header that EXISTS in
   one mode and not the other — everything else merely changes hue, and hue alone is not a state
   indicator for a colour-blind customer. The gradient runs to the inline start (RTL: right to
   left) so it reads as a direction of travel, matching the switch's arrows. */
.header-site .header-mode-ribbon {
    height: 3px;
    background-image: linear-gradient(to left, var(--brand-sell), var(--brand-sell-edge));
}


/* ---------- ROW 1: the "sell mode is on" flag ---------- */

/* States in words what the ribbon states in colour and the switch states in position. The
   reference puts it in ROW 1 because that strip is already where a customer looks for market
   state, and because ROW 2 is full.

   .header-info-actions is hidden wholesale below 992px (SECTION 2), so the flag goes with it —
   correct for now: this pass ships no mobile switch, and a flag for a mode the mobile header
   cannot change would be a dead end. The ribbon still renders at both widths. */
.header-site .header-mode-flag {
    height: 28px;
    padding-inline: 11px;
    border-radius: 14px;
    background-color: var(--brand-sell-tint);
    border: 1px solid var(--brand-sell-edge);
    color: var(--brand-sell-deep);
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

.header-site .header-mode-flag > i.fa {
    font-size: 12px;
}


/* ---------- the inactive-basket ghost ---------- */

/* shop.css:1035 `.cart-content { display: inline-block }` — one child was all it ever held. The
   ghost is a second, so the box becomes a flex row. .cart-menu is position:absolute against this
   element and pinned with inset-inline-end (SECTION 5a), and the ghost is added at the inline
   START, so the panel's anchor edge does not move. */
.header-site .cart-content {
    display: inline-flex;
    align-items: center;
    column-gap: 12px;
}

/* Dashed and colourless: it must read as PARKED, not as a second live cart competing with the
   gold/green one beside it. The reference's own words — "سبد غیرفعال به‌شکل خط‌چین و بی‌رنگ". */
.header-site .header-cart-ghost {
    flex: none;
    height: 44px;
    padding-inline: 12px;
    border: 1px dashed var(--brand-border);
    border-radius: var(--radius-brand-md);
    background-color: transparent;
    color: var(--brand-text-muted);
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.header-site .header-cart-ghost:hover {
    border-style: solid;
    border-color: var(--brand-mode-edge);
    background-color: var(--brand-surface-2);
    color: var(--brand-text);
    text-decoration: none;
}

.header-site .header-cart-ghost > i.fa {
    flex: none;
    font-size: 15px;
}

.header-site .header-cart-ghost-count {
    min-width: 18px;
    height: 18px;
    padding-inline: 5px;
    box-sizing: border-box;
    border-radius: 9px;
    background-color: var(--brand-surface);
    border: 1px solid var(--brand-border);
    color: var(--brand-text-muted);
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* shop.css:1133 opens the mini-cart with `.cart-content:hover > .cart-menu`, and the ghost is now
   inside .cart-content — so hovering the PARKED basket would pop the ACTIVE one's panel, which is
   the most confusing thing this control could do. :has() suppresses it. Unsupported browsers fall
   back to the old behaviour (the panel opens), which is cosmetic, not broken. */
.header-site .cart-content:has(.header-cart-ghost:hover) > .cart-menu {
    display: none;
}


/* ---------- the cart pill follows the mode ---------- */

/* SECTION 2 (:532) painted these with --brand-primary directly. Re-pointed at the channel: in buy
   mode the value is identical, in sell mode the pill turns green and its label reads "سبد فروش"
   (the component's own title variable). This is the single most important mode signal in the
   header — the cart is where a customer checks which basket they are actually filling. */
.header-site .btn-show-basket,
.header-site .cart-content:hover .btn-show-basket {
    background-color: var(--brand-mode);
    color: var(--brand-mode-ink);
}

.header-site .btn-show-basket > span,
.header-site .cart-content:hover .btn-show-basket > span,
.header-site .btn-show-basket .basket-content > i.fa,
.header-site .cart-content:hover .btn-show-basket .basket-content > i.fa {
    color: var(--brand-mode-ink);
}

/* THE COUNT BADGE IS THE ONE THING THAT CANNOT USE THE CHANNEL. Its two colours must CONTRAST with
   the pill, and the pill's ink flips from dark to light between modes: buy is dark ink on a gold
   pill, so the badge is ink-filled with light text; sell is WHITE ink on a green pill, so an
   ink-filled badge would be white — and --brand-mode-wash text on it is near-white too. That is
   exactly the bug this replaced: a blank white disc where the item count should be, verified in the
   browser at /cart/Sell. Both pairs below are the reference's own values. */
.header-site .btn-show-basket .basket-content i.badge-manual {
    background-color: var(--brand-primary-ink);
    color: var(--brand-surface-2);
}

body.is-sell-mode .header-site .btn-show-basket .basket-content i.badge-manual {
    background-color: var(--brand-sell-ink);
    color: var(--brand-sell-deep);
}

/* The gold shadow under a green pill reads as dirt; SECTION 2's --brand-shadow-gold-sm is replaced
   by the sell-ink cast in sell mode only. */
body.is-sell-mode .header-site .btn-show-basket,
body.is-sell-mode .header-site .cart-content:hover .btn-show-basket {
    box-shadow: var(--brand-shadow-sell-sm);
}


/* ---------- the compact bar ---------- */

@media (min-width: 992px) {
    /* The switch is a child of .header-actions, not of the compact bar, so it inherits that
       block's `order: 4` for free (SECTION 4). What it does NOT get for free is a smaller size:
       the reference's compact switch is 34px with short labels, against the full bar's 44px. */
    .header-site.header-compact .header-mode-switch {
        height: 34px;
        padding: 2px;
        column-gap: 2px;
        border-radius: var(--radius-brand);
        background-color: var(--brand-surface-2);
    }

    .header-site.header-compact .header-mode-seg {
        padding-inline: 11px;
        border-radius: 8px;
        font-size: 11.5px;
    }

    .header-site.header-compact .header-mode-seg-full {
        display: none;
    }

    .header-site.header-compact .header-mode-seg-short {
        display: inline;
    }

    .header-site.header-compact .header-actions-divider {
        height: 20px;
    }

    /* The parked-basket ghost is dropped from the compact bar. At 58px the row is already carrying
       brand + market readout + search + login + cart, and the reference's compact bar shows only
       the switch and the active cart — the ghost is reassurance, and reassurance is what a
       space-constrained bar sheds first. The full bar still has it one scroll away. */
    .header-site.header-compact .header-cart-ghost {
        display: none;
    }

    /* .cart-content reverts to a single child up here, so its gap would otherwise leave a phantom
       12px beside the pill. */
    .header-site.header-compact .cart-content {
        column-gap: 0;
    }
}


/* ---------- the cart-switch reassurance notice ---------- */

/* WHY IT IS OUT OF FLOW. shop.js:7-22 setContentTopOffset() measures .header-site's height and
   writes .content-site's margin-top from it. The notice is a SIBLING of <header>, so it is not in
   that measurement — and if it took part in the flow it would push the page down by its own
   height with no margin accounting for it, so the whole page would jump on exactly the request
   that shows it. position:absolute keeps it a pure overlay.

   absolute, not fixed, so it scrolls away with the header it belongs to rather than following the
   customer down a category listing. */
.header-mode-notice {
    /* absolute against .header-site, which shop.css already makes position: fixed (it is the same
       positioned ancestor .orginal-menu hangs from). top:100% puts the notice immediately under the
       bar with no measurement and no JS, and keeps it out of .header-site's outerHeight() — which
       shop.js:7-22 uses to set .content-site's top margin, so the page cannot jump when it appears. */
    position: absolute;
    top: 100%;
    inset-inline: 0;
    z-index: 59;
    display: flex;
    justify-content: flex-start;
    padding-block-start: 12px;
    padding-inline: 26px;
    /* The wrapper spans the row so the panel can sit at the inline start, but it must not eat
       clicks on the header or the page behind it. The panel re-enables them for itself. */
    pointer-events: none;
}

.header-mode-notice-panel {
    pointer-events: auto;
    max-width: 640px;
    padding-block: 12px;
    padding-inline: 14px;
    background-color: var(--brand-surface-2);
    border: 1px solid var(--brand-mode-edge);
    border-radius: var(--radius-brand-md);
    box-shadow: var(--brand-shadow-notice);
    animation: headerDropIn .24s cubic-bezier(.4, 0, .2, 1) both;
}

.header-mode-notice-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-brand);
    background-color: var(--brand-mode-band);
    color: var(--brand-mode-deep);
    font-size: 15px;
}

.header-mode-notice-title {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--brand-text);
}

.header-mode-notice-body {
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--brand-text-muted);
    margin-top: 2px;
}

.header-mode-notice-action {
    height: 32px;
    padding-inline: 12px;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-brand-inner);
    background-color: var(--brand-surface-2);
    color: var(--brand-text);
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.header-mode-notice-action:hover {
    border-color: var(--brand-mode-edge);
    background-color: var(--brand-mode-band);
    color: var(--brand-mode-deep);
    text-decoration: none;
}

/* Preflight is off, so the <button> keeps its UA border and grey face without these. */
.header-mode-notice-close {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background-color: transparent;
    color: var(--brand-text-soft);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .15s ease, color .15s ease;
}

.header-mode-notice-close:hover {
    background-color: var(--brand-surface);
    color: var(--brand-text);
}

/* The mobile treatment of this notice moved to SECTION 8.9 in Step 7 and is no longer a
   single padding tweak. The rule that stood here assumed "this pass ships no mobile switch,
   so the notice cannot be triggered at that width" — Step 7 ships one, so the notice is now
   a first-class mobile surface (a full-bleed strip under the price band) rather than a
   desktop card being kept from overflowing. Deliberately not left in place: it would have
   been a contradicted rule two screens above the one that actually wins. */

/* =============================================================================
   SECTION 7 — THE DESKTOP SEARCH PANEL (Phase 1b Step 6)
   -----------------------------------------------------------------------------
   Reference: Docs/Redesign/Approved/header/Daric Search (standalone).html
   Markup:    Views/Shared/Components/SearchHistorySite/Default.cshtml
   Behaviour: wwwroot/js/header-search.js

   THIS PANEL JOINS THE SECTION 5 FAMILY. Same frame, same caret, same entrance,
   same row hover as the mini-cart / account / mega panels — it is the fourth
   member, not a new species. It is gold-only like the rest of the family: only
   the PRICES inside it follow buy/sell mode, because those are data, not chrome.

   -----------------------------------------------------------------------------
   IT MUST FIGHT shop.css:849-868, WHICH IS WHY SO MANY PROPERTIES ARE RESET.
   The original panel is `top:0; z-index:1; padding-top:46px; min-height:150px;
   max-height:510px; overflow:hidden` — i.e. it sits BEHIND the input (which is
   z-index:2) and clears it with padding, and it clips overflow with no scrollbar.
   Every one of those has to be undone here to anchor it BELOW the field like the
   rest of the family. Do not "simplify" the resets away.

   Rows built by header-search.js carry NO Tailwind utilities and cannot: the
   Tailwind content globs exclude wwwroot/**, so a class that only ever appears
   in a .js file is never generated. They are all styled from here.
   ============================================================================= */

/* -- 7a . the positioning shell ------------------------------------------- */

.header-site .search-box .search-result-content {
    /* Undo shop.css's behind-the-input placement. */
    top: calc(100% + 11px);
    left: auto;
    inset-inline: 0;
    padding-top: 0;
    min-height: 0;
    max-height: none;
    overflow: visible;
    border-radius: 0;
    border: 0;
    background-color: transparent;
    box-shadow: none;
    z-index: 60;
}

.header-site .search-box .search-result-content.opened {
    display: block;
    animation: headerDropIn .18s cubic-bezier(.4, 0, .2, 1) both;
}

/* The caret. Its fill has to match whatever the panel's FIRST row is, which for
   every state except the two empty ones is the recessed section-head strip. */
.header-site .search-pop-arrow {
    inset-inline-start: 30px;
    background-color: var(--brand-surface-recess);
    transform: rotate(45deg);
    border-start-end-radius: 0;
    border-start-start-radius: 2px;
    border-inline-end: 0;
    border-inline-start: 1px solid var(--brand-primary-edge);
}

/* States that open on a white block instead of a head strip. */
.header-site .search-result-content:has(.search-state[data-search-state="none"]:not([hidden])) .search-pop-arrow,
.header-site .search-result-content:has(.search-blank:not([hidden])) .search-pop-arrow {
    background-color: var(--brand-surface-2);
}

/* The frame — identical to .cart-panel / .account-panel / .mega-panel. */
.header-site .search-panel-frame {
    background-color: var(--brand-surface-2);
    border: 1px solid var(--brand-primary-edge);
    border-radius: var(--radius-brand-lg);
    overflow: hidden;
    box-shadow: var(--brand-shadow-panel);
}

/* The field and the panel read as one object while open. */
.header-site .search-box.is-open input.txt-search {
    border-color: var(--brand-primary-edge);
}

/* -- 7b . section heads and groups ---------------------------------------- */

.header-site .search-panel-frame .search-section-head {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 28px;
    padding: 0 14px;
    margin: 0;
    background-color: var(--brand-surface-recess);
    border-bottom: 1px solid var(--brand-border);
}

/* Every group after the first also gets a top rule — the reference has no
   separate divider element, the head strip IS the divider. */
.header-site .search-panel-frame .search-group + .search-group .search-section-head,
.header-site .search-panel-frame .search-result-group + .search-result-group .search-section-head {
    border-top: 1px solid var(--brand-border);
}

.header-site .search-panel-frame .search-section-title {
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .03em;
    color: var(--brand-text-muted);
    margin: 0;
    padding: 0;
}

.header-site .search-panel-frame .search-bullet {
    flex: none;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--brand-primary);
}

.header-site .search-panel-frame .search-section-count {
    margin-inline-start: auto;
    font-size: 10px;
    font-weight: 500;
    color: var(--brand-text-soft);
}

.header-site .search-panel-frame .search-clear-all {
    margin-inline-start: auto;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--brand-primary-deep);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: color .15s ease;
}

.header-site .search-panel-frame .search-clear-all:hover {
    color: var(--brand-text);
}

/* shop.css puts a border under every .history; the head strips already separate
   the groups, so a second rule would double up. */
.header-site .search-panel-frame .history:not(:last-of-type) {
    border-bottom: 0;
}

/* -- 7c . recent searches -------------------------------------------------- */

.header-site .search-panel-frame .search-recent-list {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 4px 0;
}

.header-site .search-panel-frame .search-recent-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 40px;
    padding: 0 14px;
    margin: 0;
    border: 0;
    border-radius: 0;
    transition: background-color .15s ease;
}

.header-site .search-panel-frame .search-recent-list li:hover,
.header-site .search-panel-frame .search-recent-list li.is-active {
    background-color: var(--brand-primary-band);
}

.header-site .search-panel-frame .search-recent-list li > a {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    padding: 0;
    color: var(--brand-text);
}

.header-site .search-panel-frame .search-recent-list li > a > i.fa {
    flex: none;
    font-size: 14px;
    color: var(--brand-text-muted);
    opacity: .5;
}

.header-site .search-panel-frame .search-recent-list li > a > label {
    flex: 1;
    min-width: 0;
    margin: 0;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-site .search-panel-frame .search-recent-remove {
    flex: none;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background-color: transparent;
    color: var(--brand-text-soft);
    font-size: 12px;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.header-site .search-panel-frame .search-recent-remove:hover {
    background-color: var(--brand-surface-2);
    color: var(--brand-danger);
}

/* -- 7d . trending chips --------------------------------------------------- */

.header-site .search-panel-frame .search-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 12px 14px;
}

.header-site .search-panel-frame .search-chip {
    display: flex;
    align-items: center;
    height: 30px;
    max-width: 210px;
    padding: 0 11px;
    border: 1px solid var(--brand-border);
    border-radius: 20px;
    background-color: var(--brand-surface-2);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--brand-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.header-site .search-panel-frame .search-chip:hover,
.header-site .search-panel-frame .search-chip.is-active {
    border-color: var(--brand-primary-edge);
    background-color: var(--brand-primary-band);
    color: var(--brand-primary-deep);
}

/* -- 7e . result rows ------------------------------------------------------ */

/* The scroll area. shop.css clipped at 510px with NO scrollbar; the family's
   .header-scroller gives it the same 5px thumb the other panels use. */
.header-site .search-panel-frame .search-result-scroller {
    max-height: 436px;
    overflow-y: auto;
    overflow-x: hidden;
}

.header-site .search-panel-frame .search-row-list {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 4px 0;
}

.header-site .search-panel-frame .search-row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 14px;
    color: var(--brand-text);
    transition: background-color .12s ease;
}

/* Hover and keyboard selection are the SAME state, exactly as the reference has
   it — there is no second, weaker hover treatment to reason about. The gold rail
   sits on the inline-END edge, which under dir="rtl" is the leading edge. */
.header-site .search-panel-frame .search-row:hover,
.header-site .search-panel-frame .search-row.is-active {
    background-color: var(--brand-primary-band);
    box-shadow: inset -3px 0 0 var(--brand-primary);
}

.header-site .search-panel-frame .search-row-thumb {
    position: relative;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-brand);
    overflow: hidden;
    border: 1px solid var(--brand-primary-edge);
    background-color: var(--brand-primary-band);
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-site .search-panel-frame .search-row-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* No image: a hatch, with the reference's gold coin on top. The coin reuses the
   account monogram's two stops so the two never drift apart. */
.header-site .search-panel-frame .search-row-thumb.is-empty {
    background: repeating-linear-gradient(135deg,
        var(--brand-hatch-a), var(--brand-hatch-a) 5px,
        var(--brand-hatch-b) 5px, var(--brand-hatch-b) 10px);
}

.header-site .search-panel-frame .search-row-coin {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--brand-avatar-from), var(--brand-avatar-to));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}

.header-site .search-panel-frame .search-row-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.header-site .search-panel-frame .search-row-name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--brand-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-site .search-panel-frame .search-row-meta {
    font-size: 10.5px;
    font-weight: 500;
    color: var(--brand-text-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The matched substring. A bare <mark> would inherit the UA's yellow, and
   Preflight is disabled in this project so nothing resets it — hence explicit
   colours rather than relying on a reset. */
.header-site .search-panel-frame mark.search-hit {
    font-weight: 800;
    color: var(--brand-primary-deep);
    background-color: var(--brand-primary-tint);
    border-radius: 3px;
    padding: 0 1px;
}

.header-site .search-panel-frame .search-row-side {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}

.header-site .search-panel-frame .search-row-price {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--brand-text);
    letter-spacing: .01em;
    white-space: nowrap;
}

.header-site .search-panel-frame .search-row-price-label {
    font-size: 9.5px;
    font-weight: 500;
    color: var(--brand-text-soft);
    white-space: nowrap;
}

/* The enter badge on the keyboard-selected row. */
.header-site .search-panel-frame .search-row-enter {
    flex: none;
    width: 20px;
    height: 20px;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background-color: var(--brand-surface-2);
    border: 1px solid var(--brand-primary-edge);
    color: var(--brand-primary-deep);
    font-size: 10px;
    line-height: 1;
}

.header-site .search-panel-frame .search-row.is-active .search-row-enter {
    display: flex;
}

/* Category and brand rows: lighter than a product row, same geometry. */
.header-site .search-panel-frame .search-row-lite {
    height: 44px;
    padding: 0 14px;
}

.header-site .search-panel-frame .search-row-tile {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--brand-border);
    background-color: var(--brand-surface-recess);
    color: var(--brand-text-muted);
    font-size: 13px;
}

.header-site .search-panel-frame .search-row-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Brands with no logo get the gold monogram the reference draws. */
.header-site .search-panel-frame .search-row-tile.is-brand {
    border-color: var(--brand-primary-edge);
    background: linear-gradient(145deg, var(--brand-avatar-from), var(--brand-avatar-to));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55);
    color: var(--brand-primary-ink);
    font-size: 12px;
    font-weight: 700;
}

.header-site .search-panel-frame .search-row-count {
    flex: none;
    font-size: 10.5px;
    font-weight: 500;
    color: var(--brand-text-soft);
}

.header-site .search-panel-frame .search-row-chevron {
    flex: none;
    font-size: 12px;
    color: var(--brand-text);
    opacity: .35;
}

/* -- 7f . the call to action + keyboard hints ------------------------------ */

.header-site .search-panel-frame .search-cta {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 46px;
    padding: 0 15px;
    background-color: var(--brand-primary-band);
    border-top: 1px solid var(--brand-primary-edge);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--brand-primary-deep);
    transition: background-color .15s ease, color .15s ease;
}

.header-site .search-panel-frame .search-cta:hover,
.header-site .search-panel-frame .search-cta.is-active {
    background-color: var(--brand-primary-tint);
    color: var(--brand-primary-ink);
}

.header-site .search-panel-frame .search-cta-label {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-site .search-panel-frame .search-cta-count {
    flex: none;
    font-size: 10px;
    font-weight: 700;
    color: var(--brand-primary-deep);
    background-color: var(--brand-surface-2);
    border: 1px solid var(--brand-primary-edge);
    border-radius: 20px;
    padding: 3px 8px;
}

.header-site .search-panel-frame .search-cta-chevron {
    flex: none;
    font-size: 13px;
    opacity: .6;
}

.header-site .search-panel-frame .search-hints {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 30px;
    padding: 0 15px;
    background-color: var(--brand-surface-recess);
    border-top: 1px solid var(--brand-primary-rule);
    font-size: 9.5px;
    font-weight: 500;
    color: var(--brand-text-soft);
}

.header-site .search-panel-frame .search-hints > span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.header-site .search-panel-frame .search-key {
    color: var(--brand-text-muted);
}

/* -- 7g . empty states ----------------------------------------------------- */

.header-site .search-panel-frame .search-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    padding: 28px 26px 22px;
    text-align: center;
}

.header-site .search-panel-frame .search-blank {
    padding: 34px 26px 32px;
}

.header-site .search-panel-frame .search-empty-medallion {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--brand-primary-band);
    border: 1px solid var(--brand-primary-edge);
    color: var(--brand-primary);
    font-size: 18px;
}

.header-site .search-panel-frame .search-empty-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--brand-text);
}

.header-site .search-panel-frame .search-empty-body {
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.8;
    color: var(--brand-text-muted);
    max-width: 300px;
    text-wrap: pretty;
}

.header-site .search-panel-frame .search-blank .search-empty-body {
    max-width: 280px;
}

/* -- 7h . the loading skeleton --------------------------------------------- */

.header-site .search-panel-frame .search-skeleton-list {
    display: flex;
    flex-direction: column;
    padding: 6px 0 8px;
}

.header-site .search-panel-frame .search-skeleton-row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 14px;
}

.header-site .search-panel-frame .sk,
.header-site .search-panel-frame .sk-flat {
    display: block;
    border-radius: 5px;
}

.header-site .search-panel-frame .sk {
    background: linear-gradient(90deg,
        var(--brand-skeleton-base) 25%,
        var(--brand-skeleton-sheen) 45%,
        var(--brand-skeleton-base) 65%);
    background-size: 280% 100%;
    animation: searchShimmer 1.3s linear infinite;
}

/* The meta bar deliberately does NOT shimmer: three moving bars per row reads as
   three separate things loading rather than one row. */
.header-site .search-panel-frame .sk-flat {
    background-color: var(--brand-skeleton-flat);
}

.header-site .search-panel-frame .sk-thumb {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-brand);
}

.header-site .search-panel-frame .sk-lines {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.header-site .search-panel-frame .sk-title { width: 62%; height: 11px; }
.header-site .search-panel-frame .sk-meta  { width: 34%; height: 9px; }
.header-site .search-panel-frame .sk-price { flex: none; width: 74px; height: 11px; }

.header-site .search-panel-frame .search-skeleton-row:nth-child(2) .sk-title { width: 48%; }
.header-site .search-panel-frame .search-skeleton-row:nth-child(2) .sk-meta  { width: 28%; }
.header-site .search-panel-frame .search-skeleton-row:nth-child(3) .sk-title { width: 56%; }
.header-site .search-panel-frame .search-skeleton-row:nth-child(3) .sk-meta  { width: 24%; }

.header-site .search-panel-frame .search-spinner {
    flex: none;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 1.6px solid var(--brand-primary-rule);
    border-top-color: var(--brand-primary);
    animation: searchSpin .7s linear infinite;
}

/* Named to avoid colliding with the `rotate` keyframes in shop.css, which the
   old .history.loading spinner still uses on the mobile path. */
@keyframes searchSpin {
    to { transform: rotate(360deg); }
}

@keyframes searchShimmer {
    0%   { background-position: 120% 0; }
    100% { background-position: -120% 0; }
}

/* -- 7i . the page scrim --------------------------------------------------- */

/* NOT scoped under .header-site: header-search.js appends the scrim to <body>, so a
   descendant selector never matches it and it renders as an unstyled, invisible
   static div. z-index 2 puts it BELOW .header-site (z-index 3) on purpose — the
   header, the field and the panel must stay lit and clickable while the page behind
   them dims. It is the same layer shop.css's old .backward-absolute scrim used. */
.search-scrim {
    position: fixed;
    inset: 0;
    z-index: 2;
    background-color: var(--brand-scrim);
    animation: headerFadeIn .2s ease both;
}

@keyframes headerFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Respect a reduced-motion preference: the panel still opens, it just arrives
   rather than sliding, and the skeleton stops pulsing. */
@media (prefers-reduced-motion: reduce) {
    .header-site .search-box .search-result-content.opened,
    .search-scrim { animation: none; }

    .header-site .search-panel-frame .sk,
    .header-site .search-panel-frame .search-spinner { animation: none; }
}

/* The `hidden` ATTRIBUTE only works here if a rule says so. Preflight is disabled in this
   project, so the sole `[hidden] { display: none }` on the page comes from the UA stylesheet —
   and ANY author rule beats a UA rule regardless of specificity. `.search-cta { display: flex }`
   therefore un-hid a `hidden` call-to-action. Every state and control in this panel is toggled
   with the attribute, so it is restated here, last in the section, at a specificity that wins
   over the layout rules above it. */
.header-site .search-panel-frame [hidden],
.header-site .search-result-content [hidden] {
    display: none;
}


/* =============================================================================
   SECTION 8 — THE MOBILE HEADER (Phase 1b Step 7)
   -----------------------------------------------------------------------------
   References:
     Docs/Redesign/Approved/header/Daric Header Mobile (standalone).html   — the bar
     …/Daric Mega Menu (standalone).html      — the off-canvas drill-down
     …/Daric Mini Cart (standalone).html      — the bottom sheet
     …/Daric Account Menu (standalone).html   — the account sheet
     …/Daric Search (standalone).html         — the full-screen overlay
     …/Daric Mode Switch (standalone).html    — the switch row + sell treatment

   Those six files contain NO media queries at all: each is a fixed 390px phone-frame
   mockup built from inline styles. So none of this is ported breakpoint logic — the
   numbers below are the mockups' measurements, re-expressed as one @media block.

   EVERYTHING IN THIS SECTION IS INSIDE @media (max-width: 991px).
   That is not tidiness, it is the guarantee that Step 7 cannot touch the approved
   desktop header. The two exceptions are marked where they occur, and both are
   keyframes/attribute rules that no desktop selector uses.

   THE ROW ORDER. The design stacks
       top bar (52) · search (50) · [switch (53)] · price band (44)
   but in the DOM .banner-container (the price band) is the FIRST child of
   .header-container and .header-mobile-site is the third. They are re-seated with
   `order` on a flex-column .header-container rather than by moving markup: the band
   carries #pfPriceTicker, both <feature name="PriceTickers"> gates and the pinned
   card, and `order` moves nothing any script can observe. SECTION 4 already uses the
   same technique for the desktop compact bar.

   POSITIONING — READ THIS BEFORE CHANGING IT.
   Step 1 made the mobile header `position: static` to reproduce the pre-merge
   behaviour (the old .header-mobile-site scrolled away with the page). Step 7 makes
   it `fixed`, like the desktop header, because the design has a sticky compact bar:
     · `static`  — the header scrolls away, so there is no compact state at all.
     · `sticky`  — the element still occupies its ORIGINAL box in flow, and collapsing
                   it while stuck shrinks that box, which pulls the whole page up under
                   the scroll position. A visible content jump on every collapse.
     · `fixed`   — the header is out of flow, shop.js reserves the EXPANDED height as
                   .content-site's margin-top, and the compact bar floats over space
                   that never moves. Nothing jumps. This is what desktop already does.
   The margin is written by shop.js:setContentTopOffset(), which now has a mobile
   branch using the expanded height WITHOUT the desktop +80 (that gap is a desktop
   design choice, not a measurement).
   ============================================================================= */

/* ─── MARKED EXCEPTION #1 — the only SECTION 8 rule outside the @media block ───
   The Cart and HeaderUserContent components each emit two controls that exist
   ONLY for the mobile bottom sheet: the drag grip and the close button. They are
   inside .cart-panel / .account-panel, which are also the approved DESKTOP
   dropdowns, so they must be hidden at every width except this step's.

   Hiding them here rather than showing them in 8.8 is deliberate. `hidden` was
   not an option: Preflight is disabled in this project, so `[hidden]` carries no
   author rule and ANY `display` declaration beats the UA one — the same trap
   SECTION 7 documents. And a default of "visible, hidden above 992px" would flash
   them into the desktop panel for one frame on a slow stylesheet. Default off,
   switched on inside the media block, cannot.

   This adds three selectors to the desktop cascade that match NOTHING that existed
   before Step 7, so the finished desktop header is unaffected by construction.

   The mobile search overlay is here for a related reason: it must be display:none at
   EVERY width by default, and only 8.10 — inside the media block — turns it into a
   flex column when it is open. Relying on its `hidden` attribute alone would not do,
   again because Preflight is off. */
.hm-sheet-grip,
.hm-sheet-close,
.hm-search-overlay {
    display: none;
}

@media only screen and (max-width: 991px) {

    /* ─────────────────────────────────────────────────────────────────────────
       8.0  THE SHELL
       ───────────────────────────────────────────────────────────────────────── */

    /* Overrides SECTION 1's `position: static`. shop.css:625 already declares
       `position: fixed; top: 0; left: 0; right: 0; z-index: 3` on .header-site, so
       this only has to stop cancelling it. */
    .header-site {
        position: fixed;
    }

    /* The rows are laid out in `order`, so the container has to be a column flexbox.
       SECTION 1 already drops the desktop card chrome (max-width, radius) here. */
    .header-site .header-container {
        display: flex;
        flex-direction: column;
    }

    .header-site .header-mode-ribbon { order: 0; }
    .header-site .header-mobile-site { order: 1; }
    .header-site .banner-container   { order: 2; }

    /* The bar's own bottom border would land BETWEEN the search row and the price
       band once the band moves below it. The band draws its own top hairline. */
    .header-site .header-mobile-site {
        border-bottom: 0;
        padding-inline: 0;   /* shop.css:4721 padding-left/right:15px — the rows pad themselves */
    }

    /* The header sits over the page, so it needs its own bottom edge. SECTION 2
       removes .header-container's border/shadow at this width (the old mobile bar
       drew its own); with the price band now last, the edge belongs to the shell. */
    .header-site .header-container {
        box-shadow: 0 4px 14px -12px rgba(0, 0, 0, .35);
    }

    /* ─────────────────────────────────────────────────────────────────────────
       8.1  SHARED PRIMITIVES
       The bar, the drawer, both sheets and the search overlay all reuse these.
       ───────────────────────────────────────────────────────────────────────── */

    /* The 36×36 icon button. The reference gives every one of them an INVISIBLE
       44×44 hit target via ::after rather than growing the visible box, so the
       control still reads as 36px while meeting the touch-target minimum. */
    .header-site .hm-icon-btn,
    .header-site .hm-actions .btn-show-basket,
    .header-site .hm-user .header-account-trigger,
    .header-site .hm-user .header-login-link {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: none;
        width: 36px;
        height: 36px;
        padding: 0;
        border: 1px solid transparent;
        border-radius: var(--radius-brand);
        background: transparent;
        color: var(--brand-text);
        font-size: 17px;
        line-height: 1;
        text-decoration: none;
        transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    }

    .header-site .hm-icon-btn::after,
    .header-site .hm-actions .btn-show-basket::after,
    .header-site .hm-user .header-account-trigger::after,
    .header-site .hm-user .header-login-link::after {
        content: "";
        position: absolute;
        top: 50%;
        inset-inline-start: 50%;
        width: 44px;
        height: 44px;
        transform: translate(50%, -50%);   /* RTL: inset-inline-start is the RIGHT edge */
    }

    .header-site .hm-icon-btn:hover,
    .header-site .hm-icon-btn:focus-visible {
        background-color: var(--brand-surface);
        border-color: var(--brand-border);
        color: var(--brand-text);
    }

    /* ─────────────────────────────────────────────────────────────────────────
       8.2  ROW A — the top bar (52px)
       ───────────────────────────────────────────────────────────────────────── */

    /* NOWRAP is load-bearing on both rows. shop.css's .row-manual-fixed sets
       `flex-flow: wrap` AND `align-items: center`, and both bite at 390px: wrap lets one
       long word push a row onto two lines and break its fixed height, and `align-items:
       center` on a COLUMN flexbox (ROW B below) shrinks children to their content width
       instead of stretching them — which is what collapsed the search field to about half
       the bar on the first pass. */
    .header-site .top-mobile-site {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
        height: 52px;
        padding: 0 10px;
        justify-content: flex-start;   /* shop.css:4732 space-between — the brand takes the slack now */
    }

    /* shop.css:4738 .btn-menu-mobile { max-width: 33.33% } sized the old three-up bar. */
    .header-site .top-mobile-site .btn-menu-mobile {
        max-width: none;
        flex: none;
        display: flex;
    }

    /* shop.css:4746 sets font-size:25px / line-height:0 / color:#555 on this anchor. */
    .header-site .top-mobile-site .btn-menu-mobile a {
        font-size: 17px;
        line-height: 1;
        max-width: none;
        color: var(--brand-text);
    }

    /* ---- brand ---- */
    .header-site .hm-brand {
        display: flex;
        align-items: center;
        gap: 9px;
        min-width: 0;
        flex: none;
        text-decoration: none;
    }

    /* shop.css:4752 .logo-mobile-site { width: 95px; max-width: 33.33% } — the old bar's
       centred logo. The design's mark is a 29px chip. img[alt] is display:flex from
       shop.css:22, hence object-fit rather than a background. */
    .header-site .hm-brand .logo-mobile-site {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: none;
        width: 29px;
        height: 29px;
        max-width: none;
        border-radius: 9px;
        overflow: hidden;
        background-color: var(--brand-primary-band);
        border: 1px solid var(--brand-primary-edge);
    }

    .header-site .hm-brand .logo-mobile-site img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        margin: 0;
    }

    .header-site .hm-wordmark {
        font-size: 17px;
        font-weight: 800;
        line-height: 1;
        color: var(--brand-text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ---- the action cluster ---- */
    .header-site .hm-actions {
        display: flex;
        align-items: center;
        gap: 4px;
        flex: none;
        margin-inline-start: auto;
    }

    /* shop.css scopes nothing at .user-info-content inside the mobile bar, but SECTION 2's
       desktop rules are .header-site-scoped and DO reach it. Reset the parts that assume
       ROW 2's 44px pill. */
    .header-site .hm-user {
        position: relative;
        display: flex;
        align-items: center;
        flex: none;
        min-width: 0;
        border: 0;
        background: transparent;
        padding: 0;
    }

    /* The signed-in trigger collapses to the gilded monogram alone — no name, no chevron.
       Both are in the sheet, and 390px has no room for a name beside three buttons. */
    .header-site .hm-user .header-account-name,
    .header-site .hm-user .header-account-trigger .arrow-down,
    .header-site .hm-user .header-login-label {
        display: none;
    }

    .header-site .hm-user .header-avatar {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }

    /* Guest keeps the plain icon (see the report's D8: a bottom sheet holding one link is
       worse than the link). */
    .header-site .hm-user .header-login-link {
        min-width: 0;
        font-size: 17px;
        color: var(--brand-text);
    }

    /* BOTH triggers have to be un-sized, not just the guest one. SECTION 2 gives them
       `min-width: 152px` through `.header-site .user-info-content > a.header-…` — (0,3,1),
       one element more specific than 8.1's `.header-site .hm-user .header-…` (0,3,0) — so
       8.1's 36x36 lost and the signed-in chip stayed 152px wide, eating the bar. It went
       unnoticed because the signed-in state was never opened at 390px: as a guest the
       header renders .header-login-link, which the rule above already reset.
       These selectors match SECTION 2's shape exactly and add .hm-user, so they win. */
    .header-site .hm-user .user-info-content > a.header-account-trigger,
    .header-site .hm-user.user-info-content > a.header-account-trigger,
    .header-site .hm-user.user-info-content > a.header-login-link {
        min-width: 0;
        max-width: none;
        padding: 0;
        column-gap: 0;
        justify-content: center;
        border-color: transparent;
        background-color: transparent;
    }

    /* ---- cart trigger ---- */
    /* The design's cart is the ONE filled control in the bar: a gold square, so the basket
       is findable without reading. Mode channel, so it turns green in sell mode. */
    .header-site .hm-actions .cart-content {
        position: static;   /* the sheet is fixed to the viewport, not to this button */
        display: flex;
        align-items: center;
        flex: none;
        border: 0;
        background: transparent;
        padding: 0;
        margin: 0;
    }

    .header-site .hm-actions .btn-show-basket {
        background-color: var(--brand-mode);
        color: var(--brand-mode-ink);
        border-color: transparent;
        box-shadow: var(--brand-shadow-gold-sm);
    }

    /* The label ("سبد خرید") is desktop copy; the icon plus the count is the whole control here. */
    .header-site .hm-actions .btn-show-basket > span {
        display: none;
    }

    .header-site .hm-actions .btn-show-basket .basket-content {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
    }

    .header-site .hm-actions .btn-show-basket .basket-content > i.fa {
        font-size: 16px;
        color: var(--brand-mode-ink);
    }

    /* The count pip. It must contrast with the pill it sits on, and the pill's ink runs
       dark (gold) → light (sell), so this is one of the documented pairs that CANNOT come
       from the --brand-mode channel: --brand-mode-ink on --brand-mode-wash renders white
       on white in sell mode. Both halves are declared explicitly, buy here and sell in 8.9.
       (docs/conventions-and-known-issues.md, 2026-08-30.) */
    .header-site .hm-actions .btn-show-basket .basket-content i.badge-manual {
        position: absolute;
        top: -6px;
        inset-inline-start: -6px;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 17px;
        height: 17px;
        padding-inline: 4px;
        border-radius: 9px;
        border: 2px solid var(--brand-mode-wash);
        background-color: var(--brand-primary-ink);
        color: var(--brand-surface-2);
        font-size: 9.5px;
        font-weight: 700;
        font-style: normal;
        line-height: 1;
    }

    /* The inactive basket's dashed ghost. ROW 2 renders it as a labelled chip; at 390px it
       is a second, colourless icon button beside the live one — which is exactly what the
       Mode Switch reference draws ("the other mode's cart: dashed outline, muted"). */
    .header-site .hm-actions .header-cart-ghost {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: none;
        width: 36px;
        height: 36px;
        border: 1px dashed var(--brand-border);
        border-radius: var(--radius-brand);
        background: transparent;
        color: var(--brand-text-soft);
        font-size: 14px;
        text-decoration: none;
    }

    .header-site .hm-actions .header-cart-ghost > span:not(.header-cart-ghost-count) {
        display: none;
    }

    .header-site .hm-actions .header-cart-ghost .header-cart-ghost-count {
        position: absolute;
        top: -6px;
        inset-inline-start: -6px;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 16px;
        height: 16px;
        padding-inline: 4px;
        border-radius: 8px;
        border: 2px solid var(--brand-mode-wash);
        background-color: var(--brand-surface);
        color: var(--brand-text-muted);
        font-size: 9px;
        font-weight: 700;
        line-height: 1;
    }

    /* ─────────────────────────────────────────────────────────────────────────
       8.3  ROW B — the search field (39px + 11px)
       ───────────────────────────────────────────────────────────────────────── */

    /* shop.css:4763 .search-bar-mobile { padding: 10px 0; justify-content: space-between }.
       align-items MUST be overridden — see the note on ROW A: .row-manual-fixed centres its
       children, and on a column flexbox that is the CROSS axis, so the field would size to
       its text instead of filling the bar. */
    .header-site .search-bar-mobile {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 8px;
        padding: 0 12px 11px;
    }

    /* The recessed well, identical in construction to ROW 2's desktop field: a warm fill
       sunk into the white bar with an inset shadow, so the edge is visible without a
       heavy border. */
    .header-site .hm-search {
        display: flex;
        align-items: center;
        gap: 9px;
        height: 39px;
        margin: 0;
        padding: 0 12px;
        background-color: var(--brand-surface-recess);
        border: 1px solid var(--brand-border);
        border-radius: var(--radius-brand-md);
        box-shadow: var(--brand-shadow-inset);
        transition: border-color .15s ease, box-shadow .15s ease;
    }

    /* :focus-within, not :focus — the ring belongs to the well, and the focus is on the
       input inside it. Mode channel: the ring turns green in sell mode with the rest. */
    .header-site .hm-search:focus-within {
        border-color: var(--brand-mode);
        box-shadow: 0 0 0 3px var(--brand-mode-tint);
    }

    .header-site .hm-search > .fa-search {
        flex: none;
        font-size: 14px;
        color: var(--brand-text-soft);
    }

    .header-site .hm-search .text {
        flex: 1;
        min-width: 0;
        height: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        background: transparent;
        font-size: 13px;
        font-weight: 500;
        color: var(--brand-text);
    }

    .header-site .hm-search .text::placeholder {
        color: var(--brand-text-soft);
    }

    /* ---- the listing pages' sort/filter chips ---- */
    .header-site .filtering-mobile {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .header-site .hm-filter-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 32px;
        padding: 0 11px;
        border: 1px solid var(--brand-border);
        border-radius: 20px;
        background-color: var(--brand-surface-2);
        color: var(--brand-text-muted);
        font-size: 11.5px;
        font-weight: 600;
        text-decoration: none;
        white-space: nowrap;
    }

    .header-site .hm-filter-chip label {
        margin: 0;
        cursor: pointer;
    }

    /* ─────────────────────────────────────────────────────────────────────────
       8.4  ROW C — the buy/sell switch (42px + 11px)
       The whole row is inside <feature name="Sell">, so with the module off none of
       this matches anything and the bar is two rows.

       TWO MOUNT POINTS. The identical switch is emitted a second time inside the
       off-canvas drawer (_HeaderMobileMenu.cshtml's .hm-drawer-mode), which is NOT
       inside .header-site — so each selector below carries a .menu-mobile-content
       twin. Add any new .hm-mode-* rule to BOTH halves or the drawer's copy silently
       falls back to bare anchors. The single deliberate difference, the drawer's 38px
       track, is overridden in 8.7.
       ───────────────────────────────────────────────────────────────────────── */

    .header-site .hm-mode-row {
        padding: 0 12px 11px;
    }

    .header-site .hm-mode-switch,
    .menu-mobile-content .hm-mode-switch {
        display: flex;
        align-items: center;
        gap: 3px;
        height: 42px;
        padding: 3px;
        box-sizing: border-box;
        background-color: var(--brand-surface-recess);
        border: 1px solid var(--brand-mode-edge);
        border-radius: var(--radius-brand-md);
        box-shadow: var(--brand-shadow-sm) inset;
    }

    .header-site .hm-mode-seg,
    .menu-mobile-content .hm-mode-seg {
        display: flex;
        flex: 1 1 0;
        min-width: 0;
        align-items: center;
        justify-content: center;
        gap: 6px;
        height: 100%;
        /* --radius-brand-inner (9px), not --radius-brand: the pill is inset by the track's
           3px padding, and a nested radius has to shrink by that inset to stay concentric
           (12 − 3 = 9). */
        border-radius: var(--radius-brand-inner);
        color: var(--brand-text-muted);
        font-size: 12.5px;
        font-weight: 600;
        text-decoration: none;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: background-color .16s ease, color .16s ease, box-shadow .16s ease;
    }

    .header-site .hm-mode-seg > span,
    .menu-mobile-content .hm-mode-seg > span {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .header-site .hm-mode-seg .fa,
    .menu-mobile-content .hm-mode-seg .fa {
        flex: none;
        font-size: 12px;
    }

    /* Only the ACTIVE segment takes the mode colour. Both segments read the channel, so the
       buy pill is gold and the sell pill green with one rule instead of two. */
    .header-site .hm-mode-seg.is-active,
    .menu-mobile-content .hm-mode-seg.is-active {
        background-color: var(--brand-mode);
        color: var(--brand-mode-ink);
        font-weight: 700;
        box-shadow: var(--brand-shadow-gold-sm);
    }

    /* ─────────────────────────────────────────────────────────────────────────
       8.5  THE PRICE BAND (ROW 1, re-ordered to last — 44px)
       ───────────────────────────────────────────────────────────────────────── */

    .header-site .header-info-bar {
        display: flex;
        align-items: center;
        gap: 0;
        height: 44px;
        min-height: 44px;
        padding: 0 12px;
        border-top: 1px solid var(--brand-mode-edge);
        border-bottom: 1px solid var(--brand-mode-edge);
        overflow: hidden;
    }

    /* The pinned group: market dot + طلای ۱۸ + price + change. UN-hidden in Step 7 — see
       the note in SECTION 3's mobile block. */
    .header-site .header-info-lead {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: none;
        max-width: 62%;
    }

    .header-site .header-info-lead .header-market-status {
        display: flex;
        align-items: center;
        gap: 6px;
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 10.5px;
        font-weight: 600;
        white-space: nowrap;
    }

    /* Keep the DOT (its colour is the entire market signal) and drop the words — but ONLY
       when the pinned 18k card is actually there to take their place. The card is absent
       whenever the PriceTickers cache is empty or the module is off, and a lone unlabelled
       dot on a 44px band says nothing at all; then the band becomes the market readout and
       the words stay.

       :has() rather than a server-side flag because the condition is "did the component
       emit a card", which only the DOM knows — PriceTickerViewComponent reads the cache and
       the view decides. If a browser does not support :has() the whole rule is dropped and
       the label SHOWS, which is the harmless direction to fail in. */
    .header-site .header-info-lead:has(.pf-pinned) .header-status-label {
        display: none;
    }

    /* The reference's pulse. Purely decorative, and switched off under
       prefers-reduced-motion at the end of this section. */
    .header-site .header-info-lead .header-status-dot {
        width: 6px;
        height: 6px;
        animation: hmDot 2.4s ease-in-out infinite;
    }

    .header-site .pf-price-ticker.pf-pinned-only {
        flex: none;
        min-width: 0;
    }

    .header-site .pf-price-ticker .pf-pinned {
        display: flex;
        align-items: baseline;
        gap: 6px;
        min-width: 0;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .header-site .pf-price-ticker .pf-pinned-title {
        flex: none;
        font-size: 10.5px;
        font-weight: 600;
        color: var(--brand-text-muted);
        white-space: nowrap;
    }

    /* The vertical hairline between the pinned card and the ticker. */
    .header-site .pf-price-ticker .pf-pinned-divider {
        flex: none;
        width: 1px;
        height: 18px;
        margin-inline: 4px;
        background-color: var(--brand-mode-edge);
        align-self: center;
    }

    .header-site .pf-price-ticker .pf-pinned .pf-price {
        font-size: 15px;
        font-weight: 800;
        color: var(--brand-text);
    }

    .header-site .pf-price-ticker .pf-pinned .pf-currency {
        display: none;   /* 390px: the band cannot spend 3 characters on "تومان" */
    }

    .header-site .pf-price-ticker .pf-pinned .pf-item-change {
        flex: none;
        padding: 2px 4px;
        border-radius: 4px;
        font-size: 9.5px;
        font-weight: 700;
    }

    .header-site .pf-price-ticker .pf-pinned .pf-item-change.pf-up {
        background-color: var(--brand-success-wash);
    }

    .header-site .pf-price-ticker .pf-pinned .pf-item-change.pf-down {
        background-color: var(--brand-danger-wash-strong);
    }

    /* The rotating track takes whatever the pinned group leaves. */
    .header-site #pfPriceTicker {
        flex: 1 1 auto;
        min-width: 0;
    }

    .header-site #pfPriceTicker .pf-item {
        padding-inline: 10px;
    }

    .header-site #pfPriceTicker .pf-item-title {
        font-size: 10.5px;
    }

    .header-site #pfPriceTicker .pf-price {
        font-size: 11.5px;
    }

    /* ─────────────────────────────────────────────────────────────────────────
       8.6  THE COMPACT (STICKY) BAR — 50px + a 2px read-progress strip
       Toggled by wwwroot/js/header-compact.js, which from Step 7 runs at BOTH widths
       with the same 110/60 hysteresis the approved design specifies.
       ───────────────────────────────────────────────────────────────────────── */

    /* `display: contents` dissolves the row wrappers so the four survivors — hamburger,
       brand, pinned price, cart — become direct children of one flex ROW. Nothing is
       added to, removed from or moved in the DOM, so every JS hook stays on its own
       element across a collapse/expand cycle. Same technique as SECTION 4. */
    .header-site.header-compact .header-container {
        flex-direction: row;
        align-items: center;
        gap: 8px;
        height: 50px;
        padding: 0 10px;
        background-color: var(--brand-mode-band);
        border-bottom: 1px solid var(--brand-mode-edge);
        box-shadow: var(--brand-shadow-compact);
    }

    .header-site.header-compact .header-mobile-site,
    .header-site.header-compact .top-mobile-site,
    .header-site.header-compact .header-info-bar {
        display: contents;
    }

    /* What the compact bar drops. The ribbon goes because the compact bar states the mode
       with a pill instead (the reference's own choice); the ticker goes because a
       scrolling track inside a 50px bar is unreadable while the page is moving. */
    .header-site.header-compact .search-bar-mobile,
    .header-site.header-compact .hm-mode-row,
    .header-site.header-compact .hm-user,
    .header-site.header-compact .header-mode-ribbon,
    .header-site.header-compact #pfPriceTicker,
    .header-site.header-compact .header-cart-ghost {
        display: none;
    }

    .header-site.header-compact .btn-menu-mobile { order: 1; }
    .header-site.header-compact .hm-brand        { order: 2; }
    .header-site.header-compact .header-info-lead { order: 3; flex: 1 1 auto; max-width: none; }
    .header-site.header-compact .hm-actions      { order: 4; margin-inline-start: 0; }

    /* Everything shrinks one notch, per the reference: icons 36→34, logo 29→27,
       price 15→14, badge 17→16. */
    .header-site.header-compact .hm-icon-btn,
    .header-site.header-compact .btn-show-basket {
        width: 34px;
        height: 34px;
    }

    .header-site.header-compact .hm-brand .logo-mobile-site {
        width: 27px;
        height: 27px;
    }

    .header-site.header-compact .hm-wordmark {
        display: none;   /* the price is what the compact bar is for */
    }

    .header-site.header-compact .header-info-lead {
        gap: 7px;
    }

    .header-site.header-compact .pf-price-ticker .pf-pinned .pf-price {
        font-size: 14px;
    }

    .header-site.header-compact .btn-show-basket .basket-content i.badge-manual {
        min-width: 16px;
        height: 16px;
        font-size: 9px;
        border-color: var(--brand-mode-band);
    }

    /* A hairline between the brand and the price readout, as the reference draws. */
    .header-site.header-compact .hm-brand::after {
        content: "";
        width: 1px;
        height: 17px;
        margin-inline-start: 9px;
        background-color: var(--brand-mode-edge);
    }

    /* ---- the 2px read-progress strip ---- */
    /* SECTION 4 declares `.header-site .header-progress { display: none }` unscoped and its
       visible rules inside @media (min-width: 992px), so the strip is inert here until this
       block turns it on. It is ABSOLUTE against .header-site (already position:fixed), so
       it adds nothing to the measured header height. */
    .header-site.header-compact .header-progress {
        display: block;
        position: absolute;
        inset-inline: 0;
        bottom: 0;
        height: 2px;
        /* Mode-aware, and written inline rather than as a token: a :root declaration reading
           var(--brand-mode) would substitute the GOLD value at :root, and body.is-sell-mode
           redeclares --brand-mode on <body>, a descendant. Resolved here, on the element, it
           follows the mode. SECTION 4 writes the same expression with --brand-primary. */
        background-color: color-mix(in oklab, var(--brand-mode) 18%, transparent);
    }

    .header-site.header-compact .header-progress-fill {
        height: 2px;
        width: 0;
        background-color: var(--brand-mode);
    }

    /* ---- the mode pill ---- */
    /* Only in sell mode, and only while compact: it answers "which direction am I in?" once
       the switch row has scrolled out of view. In buy mode the answer is the default and the
       gold band already says it. Emitted by _HeaderMobileBar? No — it is the ROW 1 sell flag
       (.header-mode-flag) re-used, which is why .header-info-actions is un-hidden here. */
    .header-site.header-compact .header-info-actions {
        display: contents;
    }

    .header-site.header-compact .header-info-actions .header-info-meta,
    .header-site.header-compact .header-info-actions .header-info-divider {
        display: none;
    }

    .header-site.header-compact .header-mode-flag {
        order: 3;
        display: flex;
        align-items: center;
        gap: 5px;
        flex: none;
        height: 26px;
        padding: 0 9px;
        margin: 0;
        border: 0;
        border-radius: 13px;
        background-color: var(--brand-mode);
        color: var(--brand-mode-ink);
        font-size: 10.5px;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        max-width: 40%;
    }

    .header-site.header-compact .header-mode-flag span {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ─────────────────────────────────────────────────────────────────────────
       8.7  THE OFF-CANVAS DRAWER  —  Daric Mega Menu, its mobile drill-down
       -------------------------------------------------------------------------
       SCOPED TO .menu-mobile-content, NOT to .header-site. The drawer is emitted
       by _HeaderMobileMenu.cshtml as a SIBLING of the header (it has to be: in
       _ProfileLayout it sits inside .container-manual), so every `.header-site …`
       rule in this file is blind to it. That is the same trap that made
       header-search.js's scrim invisible — see the 2026-08-30 gotchas entry.

       WHAT DRIVES IT, AND WHAT MUST KEEP WORKING WITHOUT US
       shop.js:351 opens the drawer (adds .opened, animates .menu-mobile-container's
       `right` from -320px to 0) and shop.js:298 closes it on a scrim tap. Both are
       untouched. header-mobile.js adds the drill-down on top and flags itself with
       .hm-js on #hm-drawer; EVERY drill-down rule below is gated on that class, so
       if that file never loads the drawer is still shop.js's nested accordion.

       WHY THERE IS NO `drawerIn` KEYFRAME (a deliberate deviation from the plan's
       D12). shop.js animates the panel's `right` with jQuery, which writes an
       INLINE style every frame. A CSS transform animation on the same element would
       run alongside it and the panel would arrive twice. The slide already exists
       and already matches the reference's direction; adding a second one to match
       its exact easing would mean fighting an inline style for a 220ms difference.
       The scrim's fade is CSS because shop.js does not animate that.
       ───────────────────────────────────────────────────────────────────────── */

    /* ---- the scrim ---- */
    /* shop.css:4920 gives this rgba(0,0,0,.3) — a cold grey over a warm page. */
    .menu-mobile-content {
        background-color: var(--brand-scrim-strong);
    }

    .menu-mobile-content.opened {
        animation: headerFadeIn .2s ease both;
    }

    /* ---- the panel ---- */
    /* shop.css:4938 sets width:80%; max-width:300px; right:-320px; background:#fff.
       Only the first three change: `right` is shop.js's animation target and must
       stay -320px so the closed panel is fully off-screen at any width up to 320. */
    .menu-mobile-content > .menu-mobile-container {
        display: flex;
        flex-direction: column;
        width: min(88vw, 320px);
        max-width: none;
        background-color: var(--brand-surface-2);
        box-shadow: var(--brand-shadow-drawer);
        overflow: hidden;   /* the BODY scrolls, not the panel — head and foot are pinned */
    }

    /* ---- head ---- */
    .menu-mobile-content .hm-drawer-head {
        flex: none;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 14px 14px 13px;
        background-color: var(--brand-primary-band);
        border-bottom: 1px solid var(--brand-primary-edge);
    }

    .menu-mobile-content .hm-drawer-back,
    .menu-mobile-content .hm-drawer-close {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: none;
        padding: 0;
        border: 1px solid var(--brand-primary-edge);
        border-radius: var(--radius-brand);
        background-color: var(--brand-surface-2);
        cursor: pointer;
        line-height: 1;
    }

    /* The same invisible 44x44 hit target 8.1 gives the bar's buttons, for the same
       reason: the visible control is smaller than a fingertip. */
    .menu-mobile-content .hm-drawer-back::after,
    .menu-mobile-content .hm-drawer-close::after {
        content: "";
        position: absolute;
        top: 50%;
        inset-inline-start: 50%;
        width: 44px;
        height: 44px;
        transform: translate(50%, -50%);   /* RTL: inset-inline-start is the RIGHT edge */
    }

    .menu-mobile-content .hm-drawer-back {
        width: 34px;
        height: 34px;
        color: var(--brand-primary-deep);
        font-size: 15px;
    }

    .menu-mobile-content .hm-drawer-close {
        width: 32px;
        height: 32px;
        color: var(--brand-text-muted);
        font-size: 14px;
    }

    /* The brand chip, shown only at the root level (header-mobile.js toggles [hidden]).
       Same treatment as the bar's 29px chip in 8.2 — band fill, gilded hairline,
       object-fit — one size up, because the drawer head has room for it. */
    .menu-mobile-content .hm-drawer-mark {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: none;
        width: 34px;
        height: 34px;
        border-radius: var(--radius-brand);
        overflow: hidden;
        background-color: var(--brand-primary-band);
        border: 1px solid var(--brand-primary-edge);
    }

    .menu-mobile-content .hm-drawer-mark img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        margin: 0;
    }

    .menu-mobile-content .hm-drawer-titles {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    /* Both ellipse: the title becomes the drilled category's name and the crumb grows a
       segment per level, and neither may push the close button off the head. */
    .menu-mobile-content .hm-drawer-title,
    .menu-mobile-content .hm-drawer-crumb {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .menu-mobile-content .hm-drawer-title {
        font-size: 15px;
        font-weight: 800;
        line-height: 1.3;
        color: var(--brand-text);
    }

    .menu-mobile-content .hm-drawer-crumb {
        font-size: 10px;
        font-weight: 500;
        line-height: 1.3;
        color: var(--brand-text-muted);
    }

    /* ---- market status ---- */
    /* The words the price band has no room for. .header-status-dot already carries the
       dot's size, halo and pulse from SECTION 3 — but that rule is .header-site-scoped,
       so the drawer's copy needs its own. */
    .menu-mobile-content .hm-drawer-status {
        flex: none;
        display: flex;
        align-items: center;
        gap: 7px;
        padding: 9px 15px;
        background-color: var(--brand-surface-recess);
        border-bottom: 1px solid var(--brand-border);
        font-size: 11px;
        font-weight: 600;
        color: var(--brand-text-muted);
    }

    .menu-mobile-content .hm-drawer-status .header-status-dot {
        flex: none;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: var(--brand-text-soft);
        box-shadow: 0 0 0 3px var(--brand-soft-halo);
    }

    .menu-mobile-content .hm-drawer-status .header-status-dot.is-open {
        background-color: var(--brand-success);
        box-shadow: 0 0 0 3px var(--brand-success-halo);
    }

    /* ---- the mode block ---- */
    .menu-mobile-content .hm-drawer-mode {
        flex: none;
        display: flex;
        flex-direction: column;
        gap: 7px;
        padding: 11px 12px;
        border-bottom: 1px solid var(--brand-border);
    }

    .menu-mobile-content .hm-drawer-mode-label {
        font-size: 10.5px;
        font-weight: 600;
        color: var(--brand-text-muted);
    }

    .menu-mobile-content .hm-drawer-mode-note {
        font-size: 10.5px;
        font-weight: 500;
        line-height: 1.7;
        color: var(--brand-text-soft);
    }

    /* The switch itself is the SAME component as ROW C's. 8.4 was written
       .header-site-scoped, which cannot reach the drawer (it is not inside the header —
       see the head of 8.7), so each of its five selectors now carries a
       .menu-mobile-content twin rather than being duplicated here: one set of values,
       two mount points. Only the track height differs, and that override lives here.
       38px, not 42px — the drawer head, status row and mode label are already tall and
       the reference's drawer switch is the more compact of the two. */
    .menu-mobile-content .hm-mode-switch {
        height: 38px;
    }

    /* ---- the drill-down viewport ---- */
    .menu-mobile-content .hm-drawer-body {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;   /* a flick at the end must not scroll the page behind */
        padding: 10px 10px 16px;
        -webkit-overflow-scrolling: touch;
    }

    /* shop.css:2 zeroes every scrollbar site-wide; SECTION 5's rule that brings one back
       is .header-site-scoped and cannot reach the drawer. Same 5px thumb. */
    .menu-mobile-content .header-scroller::-webkit-scrollbar {
        width: 5px;
        height: 5px;
    }

    .menu-mobile-content .header-scroller::-webkit-scrollbar-thumb {
        background: var(--brand-scroll-thumb);
        border-radius: 3px;
    }

    /* -------------------------------------------------------------------------
       THE DRILL-DOWN ITSELF.  .hm-js only — see the head of 8.7.

       HOW ONE LEVEL AT A TIME IS ACHIEVED WITHOUT MOVING MARKUP, and why the
       obvious way does not work. A nested level is a DESCENDANT of its parent
       level, so `display: none` on the parent would take the open child with it —
       no amount of positioning escapes a display:none ancestor. So every <ul>
       stays displayed and contributes nothing but its children, and it is the
       ROWS (the <a>s) that are hidden. The one level carrying .hm-level-open shows
       its rows; every other level shows none. header-mobile.js never moves,
       clones or rebuilds a node.
       ------------------------------------------------------------------------- */

    /* Beats shop.css's `.sibling { display: none }` and `ul.sibling { padding-right: 20px }`
       — the indent is an accordion idea, and a drill-down has no nesting to express. */
    .menu-mobile-content.hm-js .hm-level {
        display: block;
        margin: 0;
        padding: 0;
        background: transparent;
        border: 0;
        list-style: none;
    }

    .menu-mobile-content.hm-js .hm-level > li {
        display: block;
        list-style: none;
    }

    /* Every row of every level that is not the current one. */
    .menu-mobile-content.hm-js .hm-level:not(.hm-level-open) > li > a {
        display: none;
    }

    /* ---- a row ---- */
    /* shop.css:4979 `.menu-mobile-content ul li a` (0,1,3) sets padding:10px 15px,
       justify-content:space-between, color:#252525, font-weight:300, font-size:12px.
       These selectors are (0,4,2) and up, so they win outright. */
    .menu-mobile-content.hm-js .hm-level-open > li > .hm-row {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        height: 50px;
        padding: 0 12px;
        margin-bottom: 2px;
        border-radius: var(--radius-brand);
        background-color: transparent;
        color: var(--brand-text);
        font-size: 13.5px;
        text-decoration: none;
        transition: background-color .15s ease, color .15s ease;
    }

    .menu-mobile-content.hm-js .hm-level-open > li > .hm-row-branch { font-weight: 600; }
    .menu-mobile-content.hm-js .hm-level-open > li > .hm-row-leaf   { font-weight: 500; }

    .menu-mobile-content.hm-js .hm-level-open > li > .hm-row:hover,
    .menu-mobile-content.hm-js .hm-level-open > li > .hm-row:focus-visible {
        background-color: var(--brand-primary-band);
    }

    .menu-mobile-content.hm-js .hm-level-open > li > .hm-row-leaf:hover,
    .menu-mobile-content.hm-js .hm-level-open > li > .hm-row-leaf:focus-visible {
        color: var(--brand-primary-deep);
    }

    /* The label is the flexible column; everything else is flex:none. shop.css puts no
       rules on <label> inside these rows, but it is display:block by default here. */
    .menu-mobile-content.hm-js .hm-level-open > li > .hm-row > label {
        flex: 1;
        min-width: 0;
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font: inherit;
        cursor: inherit;
    }

    /* The leaf's 4px gold bullet — the drill-down's only depth cue now the indent is gone. */
    .menu-mobile-content.hm-js .hm-row-bullet {
        flex: none;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background-color: var(--brand-primary-rule);
    }

    /* The child count on a branch row. */
    .menu-mobile-content.hm-js .hm-row-count {
        flex: none;
        font-size: 10.5px;
        font-weight: 600;
        color: var(--brand-text-soft);
    }

    /* "زیرشاخه دارد" — a level-3 row whose children exist in the database but were not
       loaded (EfCategoryUiQueryService includes three levels; HaveChildren is correct
       there). The reference draws this as a pill, not as a count. */
    .menu-mobile-content.hm-js .hm-row-more {
        flex: none;
        padding: 2px 7px;
        border: 1px solid var(--brand-primary-rule);
        border-radius: 20px;
        background-color: var(--brand-primary-band);
        color: var(--brand-primary-deep);
        font-size: 9.5px;
        font-weight: 600;
        white-space: nowrap;
    }

    /* The trailing chevron. shop.css:4992 forces `font-size: 20px` on it (0,1,4).
       A BRANCH row must keep the literal `fa-angle-down` class — shop.js:362 reads
       `here.children("i.fa").attr("class")` with no null check — but in a drill-down it
       points FORWARD, so it is rotated rather than swapped. In RTL, forward is left:
       -90deg takes a down-chevron there. */
    .menu-mobile-content.hm-js .hm-level-open > li > .hm-row > i.fa {
        flex: none;
        font-size: 13px;
        line-height: 1;
        color: var(--brand-text-soft);
    }

    .menu-mobile-content.hm-js .hm-level-open > li > .hm-row-branch > i.fa {
        font-size: 14px;
        color: var(--brand-primary-deep);
        transform: rotate(-90deg);
    }

    /* ---- the "همهٔ موارد …" self link ---- */
    /* shop.css:5001 makes this `display: inline-block; width: 100%`. */
    .menu-mobile-content.hm-js .hm-level-open > li.link-all > .hm-row-all {
        display: flex;
        align-items: center;
        gap: 9px;
        width: auto;
        margin: 2px 4px 8px;
        padding: 12px;
        border: 1px solid var(--brand-primary-rule);
        border-radius: var(--radius-brand);
        background-color: var(--brand-primary-band);
        color: var(--brand-primary-deep);
        font-size: 12.5px;
        font-weight: 700;
        text-decoration: none;
    }

    .menu-mobile-content.hm-js .hm-level-open > li.link-all > .hm-row-all > label {
        flex: 1;
        min-width: 0;
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font: inherit;
        cursor: inherit;
    }

    /* shop.css:5006 adds `margin-right: 5px` to this icon. */
    .menu-mobile-content.hm-js .hm-level-open > li.link-all > .hm-row-all > i.fa {
        flex: none;
        margin: 0;
        font-size: 13px;
        line-height: 1;
    }

    /* ---- the childless state ---- */
    .menu-mobile-content .hm-drawer-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 7px;
        padding: 36px 24px;
        text-align: center;
    }

    .menu-mobile-content .hm-drawer-empty-medallion {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 56px;
        height: 56px;
        margin-bottom: 6px;
        border-radius: 50%;
        border: 1px solid var(--brand-primary-rule);
        /* #FFFDF7, not --brand-surface-2: the three medallions already in this file (SECTIONS
           5a, 5c, 7) use this exact warm-white as their highlight, and a pure #FFFFFF centre
           reads cold against the gold band. Same role as the mixing anchors in input.css. */
        background: radial-gradient(circle at 38% 30%, #FFFDF7, var(--brand-primary-band));
        color: var(--brand-primary);
        font-size: 22px;
    }

    .menu-mobile-content .hm-drawer-empty-title {
        font-size: 13px;
        font-weight: 700;
        color: var(--brand-text);
    }

    .menu-mobile-content .hm-drawer-empty-body {
        max-width: 230px;
        font-size: 11.5px;
        font-weight: 500;
        line-height: 1.8;
        color: var(--brand-text-muted);
    }

    /* ---- foot ---- */
    /* env() on TOP of the reference's fixed 18px: the references use plain px and no
       safe-area handling at all, so on a notched phone this row sits under the home
       indicator. Everything sticky or bottom-anchored in SECTION 8 gets the same. */
    .menu-mobile-content .hm-drawer-foot {
        flex: none;
        display: flex;
        flex-direction: column;
        gap: 9px;
        padding: 12px 14px calc(18px + env(safe-area-inset-bottom, 0px));
        background-color: var(--brand-surface-recess);
        border-top: 1px solid var(--brand-border);
    }

    .menu-mobile-content .hm-drawer-cta {
        display: flex;
        align-items: center;
        gap: 8px;
        height: 44px;
        padding: 0 13px;
        border: 1px solid var(--brand-primary-edge);
        border-radius: 11px;
        background-color: var(--brand-primary-band);
        color: var(--brand-primary-deep);
        font-size: 13px;
        font-weight: 700;
        text-decoration: none;
    }

    .menu-mobile-content .hm-drawer-cta > span { flex: 1; min-width: 0; }

    .menu-mobile-content .hm-drawer-cta-go {
        flex: none;
        font-size: 14px;
    }

    .menu-mobile-content .hm-drawer-foot-links {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }

    .menu-mobile-content .hm-drawer-foot-link {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 2px;
        color: var(--brand-text-muted);
        font-size: 12px;
        font-weight: 500;
        text-decoration: none;
    }

    .menu-mobile-content .hm-drawer-foot-divider {
        width: 1px;
        height: 12px;
        background-color: var(--brand-border);
    }

    /* ─────────────────────────────────────────────────────────────────────────
       8.8  THE TWO BOTTOM SHEETS  —  Daric Mini Cart · Daric Account Menu
       -------------------------------------------------------------------------
       NO NEW PANEL MARKUP. Both sheets are the SAME components the desktop
       dropdowns are built from — Cart/Default.cshtml and
       HeaderUserContent/Default.cshtml, invoked a second time inside
       .header-mobile-site (D4) — re-shaped from a dropdown into a sheet by CSS
       alone. That is why the mini-cart keeps working after an AJAX refresh drops a
       new fragment into $('.cart-content'): there is no state and no binding on the
       markup, only rules that match it.

       WHAT OPENS THEM. A class on <body> (hm-cart-open / hm-account-open) written
       by header-mobile.js. On <body> and not on the panel, because .cart-content is
       replaced wholesale and any state living inside it would be lost mid-open.

       WHAT HAD TO BE SUPPRESSED. shop.css:1133 opens the mini-cart with
       `.cart-content:hover > .cart-menu`, and a tap on a touch screen leaves a
       sticky :hover — so the panel would hang open after the sheet was dismissed.
       The mobile copy is therefore forced closed by a MORE specific selector and
       reopened only by the body class.

       SCROLL. Each sheet is a flex column: head fixed, one flex:1 scroll region,
       foot fixed. overscroll-behavior:contain stops a flick at the end of the list
       from scrolling the locked page behind it.
       ───────────────────────────────────────────────────────────────────────── */

    @keyframes hmSheetIn {
        from { transform: translateY(102%); }
        to   { transform: translateY(0); }
    }

    /* ---- the affordances the desktop dropdown does not have ---- */
    /* Default-hidden by the marked exception above the @media block. */
    .header-site .header-mobile-site .hm-sheet-grip {
        display: block;
        flex: none;
        width: 44px;
        height: 4px;
        margin: 9px auto 3px;
        border-radius: 2px;
        background-color: var(--brand-primary-rule);
    }

    .header-site .header-mobile-site .hm-sheet-close {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: none;
        margin-inline-start: auto;
        width: 32px;
        height: 32px;
        padding: 0;
        border: 1px solid var(--brand-border);
        border-radius: var(--radius-brand);
        background-color: var(--brand-surface-2);
        color: var(--brand-text-muted);
        font-size: 15px;
        line-height: 1;
        cursor: pointer;
    }

    .header-site .header-mobile-site .hm-sheet-close::after {
        content: "";
        position: absolute;
        top: 50%;
        inset-inline-start: 50%;
        width: 44px;
        height: 44px;
        transform: translate(50%, -50%);
    }

    /* ---- closed by default, whatever :hover thinks ---- */
    /* (0,3,0) and (0,4,0) — both beat shop.css:1133's (0,2,0). */
    .header-site .header-mobile-site .cart-content > .cart-menu,
    .header-site .header-mobile-site .user-info-content > .user-content {
        display: none;
    }

    .header-site .header-mobile-site .cart-content:hover > .cart-menu {
        display: none;
    }

    /* ---- the scrim ---- */
    /* The wrapper element becomes the backdrop: it is inset:0, so header-mobile.js's
       "e.target === this" test is exactly "the tap landed outside the sheet". */
    body.hm-cart-open .header-site .header-mobile-site .cart-content > .cart-menu,
    body.hm-account-open .header-site .header-mobile-site .user-info-content > .user-content {
        display: block;
        position: fixed;
        inset: 0;
        top: 0;
        left: 0;
        inset-inline-end: 0;
        width: auto;
        max-height: none;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        overflow: visible;
        background-color: var(--brand-scrim-strong);
        box-shadow: none;
        animation: headerFadeIn .2s ease both;
        z-index: 70;
    }

    /* The desktop pointer triangle has no meaning on a sheet anchored to the screen. */
    .header-site .header-mobile-site .cart-menu > .header-pop-arrow,
    .header-site .header-mobile-site .user-content > .header-pop-arrow {
        display: none;
    }

    /* The hover bridge that keeps the desktop dropdown alive across its 11px gap would
       be a 13px dead strip across the top of the scrim here. */
    .header-site .header-mobile-site .cart-menu::before {
        content: none;
    }

    /* ---- the sheet itself ---- */
    .header-site .header-mobile-site .cart-panel,
    .header-site .header-mobile-site .account-panel {
        position: absolute;
        inset-inline: 0;
        bottom: 0;
        top: auto;
        display: flex;
        flex-direction: column;
        width: auto;
        border: 0;
        border-top: 1px solid var(--brand-primary-edge);
        border-radius: var(--radius-brand-sheet) var(--radius-brand-sheet) 0 0;
        background-color: var(--brand-surface-2);
        box-shadow: var(--brand-shadow-sheet);
        overflow: hidden;
    }

    /* THE ENTRANCE IS DECLARED ON THE OPEN STATE, NOT ABOVE. Do not move it into the
       base rule — that was the first attempt and it fails in a way worth recording.
       `animation-fill-mode: both` also fills BACKWARDS, so an animation that is
       declared while the element is display:none, and therefore has not started, pins
       the element at its `from` frame: the sheet sat at translateY(102%), fully off
       the bottom of the screen, permanently. Declaring the animation in the same rule
       that flips `display` starts it at the moment of opening — which is exactly what
       SECTION 5a's `.cart-content:hover > .cart-menu` already does with headerDropIn. */
    body.hm-cart-open .header-site .header-mobile-site .cart-panel,
    body.hm-account-open .header-site .header-mobile-site .account-panel {
        animation: hmSheetIn .26s cubic-bezier(.4, 0, .2, 1) both;
    }

    /* The reference's two heights, and they differ on purpose: the account sheet's rows
       are a known short list that should not need scrolling, the cart's is unbounded. */
    .header-site .header-mobile-site .cart-panel    { max-height: 82%; }
    .header-site .header-mobile-site .account-panel { max-height: 84%; }

    /* =================== the mini-cart sheet =================== */

    .header-site .header-mobile-site .cart-menu .cart-body {
        flex: none;
        padding: 8px 16px 12px;
        background-color: transparent;   /* the grip sits above it; a gold strip here reads as two heads */
        border-bottom: 1px solid var(--brand-primary-rule);
    }

    .header-site .header-mobile-site .cart-panel-title {
        font-size: 14.5px;
    }

    /* The scroll region. shop.css:1162 `.cart-menu ul` and SECTION 5a size this for a
       380px dropdown with its own max-height; in a sheet it takes the slack instead. */
    .header-site .header-mobile-site .cart-panel > ul {
        flex: 1;
        min-height: 0;
        max-height: none;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .header-site .header-mobile-site .cart-menu .price-cart-content {
        flex: none;
        padding: 14px 16px calc(20px + env(safe-area-inset-bottom, 0px));
        background-color: var(--brand-surface-recess);
        border-top: 1px solid var(--brand-primary-rule);
    }

    /* The two CTAs stack at 390px instead of sharing a row — full-width targets, and the
       primary action is not competing for width with a secondary one. */
    .header-site .header-mobile-site .cart-menu .btn-goto-cart-content {
        display: flex;
        flex-direction: column;
        gap: 11px;
    }

    /* `flex: none` is NOT tidiness. SECTION 5a gives these `flex: 1.6 1 0%` and `1 1 0%`
       to split the desktop row — and once the container becomes a COLUMN, flex-basis:0
       applies to the MAIN axis, which is now height. The declared heights below were
       therefore ignored and the two buttons collapsed to a 1.6:1 split of whatever height
       the foot happened to have: 21px and 22px. Resetting flex hands the axis back. */
    .header-site .header-mobile-site .cart-menu .btn-goto-cart,
    .header-site .header-mobile-site .cart-menu .btn-view-cart {
        flex: none;
    }

    .header-site .header-mobile-site .cart-menu .btn-goto-cart {
        height: 48px;
        font-size: 14px;
    }

    .header-site .header-mobile-site .cart-menu .btn-view-cart {
        height: 44px;
        font-size: 13.5px;
    }

    /* ---- the empty state ---- */
    .header-site .header-mobile-site .cart-empty {
        padding: 34px 26px 30px;
    }

    .header-site .header-mobile-site .cart-empty-medallion {
        width: 68px;
        height: 68px;
        margin-bottom: 10px;
        font-size: 26px;
    }

    .header-site .header-mobile-site .cart-empty-cta {
        width: 100%;
        box-sizing: border-box;
        height: 46px;
        margin-top: 16px;
        justify-content: center;
        /* The empty sheet has no .price-cart-content, so the safe area has to be paid
           here or the CTA sits on the home indicator. */
        margin-bottom: env(safe-area-inset-bottom, 0px);
    }

    /* =================== the account sheet =================== */

    /* The identity block is the sheet's gold head. */
    .header-site .header-mobile-site .account-panel .header-user {
        flex: none;
        padding: 10px 16px 14px;
        background-color: var(--brand-primary-band);
        border-bottom: 1px solid var(--brand-primary-edge);
    }

    .header-site .header-mobile-site .account-panel .profile-title {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 12px;
    }

    .header-site .header-mobile-site .account-panel .header-avatar-lg {
        width: 52px;
        height: 52px;
        font-size: 20px;
    }

    .header-site .header-mobile-site .account-panel .profile-name {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .header-site .header-mobile-site .account-panel .profile-name .name {
        font-size: 15px;
        line-height: 1.5;
    }

    .header-site .header-mobile-site .account-panel .profile-name .phone {
        font-size: 12px;
        line-height: 1.4;
    }

    /* The two link groups share the one scroll region between head and logout. */
    .header-site .header-mobile-site .account-panel .user-links-content {
        flex: 0 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 6px 0;
    }

    .header-site .header-mobile-site .account-panel .user-links-content ul li a {
        height: 52px;
        gap: 12px;
        padding: 0 16px;
        font-size: 13.5px;
    }

    .header-site .header-mobile-site .account-panel .account-logout {
        flex: none;
        padding: 12px 16px calc(22px + env(safe-area-inset-bottom, 0px));
        background-color: var(--brand-surface-recess);
        border-top: 1px solid var(--brand-primary-rule);
    }

    .header-site .header-mobile-site .account-panel .account-logout-btn {
        width: 100%;
        height: 48px;
        justify-content: center;
        gap: 9px;
        font-size: 13.5px;
    }

    /* ─────────────────────────────────────────────────────────────────────────
       8.9  SELL MODE  —  Daric Mode Switch, its 390px "sell" frame
       -------------------------------------------------------------------------
       MOST OF SELL MODE COSTS NOTHING HERE, and that is the design working as
       intended. The --brand-mode channel (tailwind/input.css) is redeclared under
       body.is-sell-mode, so the switch's active pill, the price band's fill and
       borders, the cart button and the compact bar all turn green through rules
       already written in 8.2–8.6 with no sell-specific selector. What is left is
       the short list the channel provably CANNOT carry:

         · the 3px ribbon      — markup that exists in one mode only
                                 (_Header.cshtml:205, @@if (isSellMode)), already
                                 order:0 in 8.0 and styled at both widths in
                                 SECTION 5. Nothing to add.
         · the top-bar wash    — .header-mobile-site carries bg-brand-mode-wash,
                                 which resolves to the reference's
                                 color-mix(in oklab, var(--sell) 4%, #FFFFFF).
                                 Nothing to add.
         · the dashed ghost    — the inactive basket, already built in 8.2.
         · the cart count pip  — DOES need a rule. See below.
         · the reassurance     — needs a 390px treatment. See below.
       ───────────────────────────────────────────────────────────────────────── */

    /* THE OTHER HALF OF THE PAIR 8.2 PROMISED ("sell in 8.9").
       The pip cannot read from --brand-mode-ink: that token is near-black gold ink in
       buy mode and WHITE in sell mode, and the pip's own fill is --brand-mode-wash —
       so a channel-driven pip renders white on white the moment sell mode turns on.
       Both halves are therefore literal. The reference specifies --sell-deep with a
       white glyph and a white ring, which is what this is.
       (docs/conventions-and-known-issues.md, 2026-08-30.) */
    body.is-sell-mode .header-site .hm-actions .btn-show-basket .basket-content i.badge-manual {
        background-color: var(--brand-sell-deep);
        color: var(--brand-sell-ink);
        border-color: var(--brand-surface-2);
    }

    /* ---- the reassurance strip ---- */
    /* "Your other cart is safe", shown once after a switch. On desktop it is a floating
       card inset 26px from the header's inline edges; at 390px the reference makes it a
       full-width strip directly under the price band. .header-site is position:fixed, so
       `top: 100%` already lands it there — only the box needs re-proportioning. */
    .header-mode-notice {
        padding-block-start: 0;
        padding-inline: 0;
    }

    .header-mode-notice-panel {
        display: flex;
        flex-wrap: wrap;
        max-width: none;
        width: 100%;
        padding-block: 10px;
        padding-inline: 12px;
        border-inline: 0;
        border-radius: 0;
        border-top: 1px solid var(--brand-mode-edge);
        /* A full-bleed strip needs no lift — the shadow only made it read as a second,
           detached surface hanging off the header. */
        box-shadow: none;
    }

    .header-mode-notice-title { font-size: 11.5px; }

    .header-mode-notice-body  { font-size: 10.5px; line-height: 1.7; }

    /* The undo link wraps onto its own line rather than squeezing the message to two
       words; ms-auto (a Tailwind utility in the markup) still pushes it to the far edge. */
    .header-mode-notice-action {
        font-size: 11.5px;
        margin-block-start: 2px;
    }

    /* ─────────────────────────────────────────────────────────────────────────
       8.10  THE FULL-SCREEN SEARCH OVERLAY  —  Daric Search, its 390px frames
       -------------------------------------------------------------------------
       MOST OF THIS SECTION IS NOT HERE, AND THAT IS THE POINT. The overlay's body
       carries the class `search-panel-frame`, and it is emitted INSIDE .header-site
       — so every SECTION 7 rule (`.header-site .search-panel-frame …`) already
       styles its rows, chips, skeletons, highlight marks and empty states. The
       overlay is the desktop panel's contents in a different box.

       What follows is therefore only: the fixed shell, the 60px head, the group
       heads the reference restyles for 390px, the row sizes it changes, and the
       sticky CTA bar the dropdown does not have. Each override adds
       .hm-search-overlay to a SECTION 7 selector, so it outranks it by specificity
       rather than by source order.

       BEHAVIOUR lives in header-search.js, which re-points its $box/$input/$panel/
       $frame at this markup while the overlay is open. Same debounce, same
       AbortController, same LRU cache, same Persian folding, same history store.
       ───────────────────────────────────────────────────────────────────────── */

    /* Default-hidden by the marked exception above the @media block; opened by
       header-search.js removing the `hidden` attribute. */
    .header-site .hm-search-overlay:not([hidden]) {
        display: flex;
        flex-direction: column;
        position: fixed;
        inset: 0;
        /* Above the drawer (6) and the two sheets (70): the overlay is the only surface
           that can be opened from inside the header while the header is still visible. */
        z-index: 80;
        background-color: var(--brand-surface-2);
    }

    /* ---- head ---- */
    .header-site .hm-search-head {
        flex: none;
        display: flex;
        align-items: center;
        gap: 8px;
        height: 60px;
        padding: 0 10px;
        background-color: var(--brand-surface-2);
        border-bottom: 1px solid var(--brand-primary-edge);
    }

    /* A REAL 44x44, not a glyph with padding. This is the only way out of a full-screen
       view, so the reference sizes the control itself rather than faking the target. */
    .header-site .hm-search-back {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: none;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 0;
        border-radius: var(--radius-brand-md);
        background: transparent;
        color: var(--brand-text);
        font-size: 17px;
        line-height: 1;
        cursor: pointer;
    }

    .header-site .hm-search-back:hover,
    .header-site .hm-search-back:focus-visible {
        background-color: var(--brand-primary-band);
        color: var(--brand-primary-deep);
    }

    /* The ring is permanent, not :focus-within. While the overlay is open this field IS
       the focused thing — a ring that came and went would only ever read as a glitch. */
    .header-site .hm-search-field {
        display: flex;
        align-items: center;
        gap: 9px;
        flex: 1;
        min-width: 0;
        height: 44px;
        margin: 0;
        padding: 0 13px;
        background-color: var(--brand-surface-2);
        border: 1px solid var(--brand-primary-edge);
        border-radius: var(--radius-brand-md);
        box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand-primary) 14%, transparent);
    }

    .header-site .hm-search-field > i.fa {
        flex: none;
        font-size: 15px;
        color: var(--brand-text-soft);
    }

    /* shop.css:849-868 styles `.text` heavily (height, border, background, padding). */
    .header-site .hm-search-field input {
        flex: 1;
        min-width: 0;
        width: auto;
        height: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        color: var(--brand-text);
        font-size: 14px;
        font-weight: 500;
        outline: none;
    }

    .header-site .hm-search-field input::placeholder {
        color: var(--brand-text-soft);
        font-weight: 500;
    }

    .header-site .hm-search-clear {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: none;
        width: 24px;
        height: 24px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background-color: var(--brand-surface-recess);
        color: var(--brand-text-muted);
        font-size: 11px;
        line-height: 1;
        cursor: pointer;
    }

    .header-site .hm-search-clear[hidden] { display: none; }

    /* ---- the scrolling body ---- */
    .header-site .hm-search-body {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        /* Room for the sticky CTA bar, which is a sibling and would otherwise cover the
           last row. Only paid when the bar is actually there — see below. */
        padding: 0;
    }

    .header-site .hm-search-overlay .search-panel-frame::-webkit-scrollbar { width: 5px; }

    .header-site .hm-search-overlay .search-panel-frame::-webkit-scrollbar-thumb {
        background: var(--brand-scroll-thumb);
        border-radius: 3px;
    }

    /* ---- group heads ---- */
    /* The reference turns SECTION 7's inline heading into a full-bleed 34px band on the
       recess fill — at 390px a section break has to be a band or it does not read. */
    .header-site .hm-search-group-head {
        display: flex;
        align-items: center;
        gap: 8px;
        height: 34px;
        padding: 0 16px;
        background-color: var(--brand-surface-recess);
        border-top: 1px solid var(--brand-border);
        border-bottom: 1px solid var(--brand-border);
    }

    /* The first band in a state has nothing above it to separate from. */
    .header-site .hm-search-state > *:first-child > .hm-search-group-head {
        border-top: 0;
    }

    .header-site .hm-search-group-head .search-section-title {
        font-size: 11px;
        font-weight: 700;
        color: var(--brand-text-muted);
        letter-spacing: .03em;
        margin: 0;
    }

    .header-site .hm-search-group-head .search-bullet {
        flex: none;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background-color: var(--brand-primary);
    }

    .header-site .hm-search-clear-all {
        margin-inline-start: auto;
        font-size: 11px;
        font-weight: 700;
        color: var(--brand-primary-deep);
        text-decoration: none;
    }

    /* The same band styling for the group heads header-search.js BUILDS inside the
       results state — that markup is SECTION 7's .search-section-head, not this class. */
    .header-site .hm-search-overlay .search-panel-frame .search-section-head {
        height: 34px;
        padding: 0 16px;
        margin: 0;
        background-color: var(--brand-surface-recess);
        border-top: 1px solid var(--brand-border);
        border-bottom: 1px solid var(--brand-border);
    }

    .header-site .hm-search-overlay .search-panel-frame .search-section-title {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .03em;
    }

    .header-site .hm-search-overlay .search-panel-frame .search-result-group:first-child .search-section-head {
        border-top: 0;
    }

    /* ---- recent rows ---- */
    .header-site .hm-search-recent {
        margin: 0;
        padding: 4px 0;
        list-style: none;
    }

    .header-site .hm-search-recent > li {
        display: flex;
        align-items: center;
        gap: 11px;
        height: 52px;
        padding: 0 16px;
        list-style: none;
    }

    .header-site .hm-search-recent > li > a {
        display: flex;
        align-items: center;
        gap: 11px;
        flex: 1;
        min-width: 0;
        padding: 0;
        color: var(--brand-text);
        font-size: 13.5px;
        font-weight: 500;
        text-decoration: none;
    }

    .header-site .hm-search-recent > li > a > i.fa {
        flex: none;
        font-size: 14px;
        color: var(--brand-text-soft);
    }

    .header-site .hm-search-recent > li > a > label {
        flex: 1;
        min-width: 0;
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font: inherit;
        cursor: inherit;
    }

    /* 44x44, per the reference — a delete control needs the full target. */
    .header-site .hm-search-recent .search-recent-remove {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: none;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--brand-text-soft);
        font-size: 13px;
        cursor: pointer;
    }

    /* ---- trending chips ---- */
    .header-site .hm-search-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 14px 16px;
    }

    .header-site .hm-search-overlay .search-panel-frame .search-chip {
        height: 36px;
        padding: 0 13px;
        border-radius: 20px;
        font-size: 12.5px;
        font-weight: 600;
    }

    /* ---- result rows, resized for 390px ---- */
    .header-site .hm-search-overlay .search-panel-frame .search-row {
        gap: 12px;
        padding: 10px 16px;
        border-radius: 0;   /* full-bleed rows, not inset cards */
    }

    /* The reference marks the active row with a gold inline-end rail rather than the
       desktop panel's rounded fill — a rounded highlight inside a full-bleed list reads
       as a floating chip. RTL: the rail is on the trailing (left) edge, hence -3px. */
    .header-site .hm-search-overlay .search-panel-frame .search-row:hover,
    .header-site .hm-search-overlay .search-panel-frame .search-row.is-active {
        background-color: var(--brand-primary-band);
        box-shadow: inset -3px 0 0 var(--brand-primary);
    }

    .header-site .hm-search-overlay .search-panel-frame .search-row-thumb {
        width: 50px;
        height: 50px;
        border-radius: var(--radius-brand);
    }

    .header-site .hm-search-overlay .search-panel-frame .search-row-lite {
        height: 52px;
        padding: 0 16px;
    }

    .header-site .hm-search-overlay .search-panel-frame .search-row-tile {
        width: 34px;
        height: 34px;
        border-radius: 9px;
    }

    /* The ↵ affordance is a keyboard hint. There is no keyboard here. */
    .header-site .hm-search-overlay .search-panel-frame .search-row-enter {
        display: none;
    }

    .header-site .hm-search-overlay .search-panel-frame .search-row-list {
        padding: 4px 0;
    }

    /* ---- the no-results "browse" link ---- */
    .header-site .hm-search-browse {
        display: flex;
        align-items: center;
        gap: 9px;
        height: 46px;
        margin: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px));
        padding: 0 13px;
        border: 1px solid var(--brand-primary-edge);
        border-radius: var(--radius-brand-md);
        background-color: var(--brand-primary-band);
        color: var(--brand-primary-deep);
        font-size: 13.5px;
        font-weight: 700;
        text-decoration: none;
    }

    .header-site .hm-search-browse > span { flex: 1; min-width: 0; }

    /* ---- the sticky "all results" bar ---- */
    /* A SIBLING of the scroll body, not inside it: it has to stay above the results and,
       on a real phone, above the on-screen keyboard. */
    .header-site .hm-search-cta {
        flex: none;
        display: flex;
        align-items: center;
        height: calc(88px + env(safe-area-inset-bottom, 0px));
        padding: 12px 16px calc(22px + env(safe-area-inset-bottom, 0px));
        background-color: var(--brand-primary-band);
        border-top: 1px solid var(--brand-primary-edge);
        box-shadow: var(--brand-shadow-cta-bar);
        text-decoration: none;
    }

    .header-site .hm-search-cta[hidden] { display: none; }

    .header-site .hm-search-cta-inner {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        flex: 1;
        min-width: 0;
        height: 52px;
        border-radius: var(--radius-brand-md);
        background-color: var(--brand-primary);
        color: var(--brand-primary-ink);
        font-size: 13.5px;
        font-weight: 700;
        box-shadow: var(--brand-shadow-gold-sm);
    }

    .header-site .hm-search-cta .search-cta-label {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .header-site .hm-search-cta .search-cta-count {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: none;
        min-width: 22px;
        height: 22px;
        padding: 0 6px;
        border-radius: 11px;
        background-color: var(--brand-primary-ink);
        /* --brand-surface-2 IS this palette's #FFFFFF. Reading a surface token as ink looks
           odd, but the alternative is a raw hex, and this chip inverts the desktop one:
           SECTION 7's count is gold-deep on white, the reference's mobile count is white on
           gold-ink. There is no dedicated inverse-ink token and one chip does not earn one. */
        color: var(--brand-surface-2);
        font-size: 10.5px;
        font-weight: 700;
    }

    .header-site .hm-search-cta .search-cta-count[hidden] { display: none; }

    /* ---- states ---- */
    /* SECTION 7 pads its states for a floating panel; the overlay is edge-to-edge. */
    .header-site .hm-search-overlay .search-panel-frame .search-state {
        padding: 0;
        max-height: none;
    }

    .header-site .hm-search-overlay .search-panel-frame .search-skeleton-list {
        padding: 4px 16px;
    }

    .header-site .hm-search-overlay .search-panel-frame .search-empty {
        padding: 34px 26px 24px;
    }

    /* Preflight is off, so [hidden] carries no author rule and any `display` above beats
       the UA one. Restated last and scoped tightly enough to win — SECTION 7 does exactly
       the same for the desktop panel, and for the same reason. */
    .header-site .hm-search-overlay [hidden] { display: none; }
}


/* =============================================================================
   SECTION 9 — THE PAGE FRAME (Phase 1e)

   Reference: Docs/Redesign/Approved/home/Daric Home v2 - Page Frame (standalone).html
   Tokens:    tailwind/input.css, the STEP 12 block.

   The whole storefront — header, content and footer — sits inside ONE centred
   1440px rounded panel floating on a deeper page background, full-bleed below
   992px. Markup: `<div class="page-frame">` in Views/Shared/_Layout.cshtml and
   Areas/Profile/Views/Shared/_ProfileLayout.cshtml.

   WHY THIS LIVES IN header-merge.css rather than a new stylesheet: this file is
   linked from Partials/_HeaderStyles.cshtml, which is included by exactly the two
   layouts that render the header and the footer — i.e. exactly the two layouts
   that get the frame. It also already loads after shop.css (so it can beat
   `.body { background-color: #f5f5f5 }`) and it already owns the shell-width cap
   and every compact-bar rule the frame has to touch. A separate sheet would need
   a fourth <link>, its own load-order argument, and would split the frame's
   header half from its body half.

   THE HARD PART, AND HOW IT IS SOLVED. .header-site is position:fixed
   (shop.css:626), so no ancestor contains it — its containing block is the
   viewport, and it is NOT inside the panel in the DOM (it is a SIBLING; see the
   comments in both layouts). It is made to LOOK contained by giving its card the
   frame's four properties: the same width expression, the same side insets, the
   frame's hairline continued up its left/right/top edges, and the frame's top
   corners. Everything else about the header — height, fills, shadow, the collapse
   — is untouched approved design.

   NOTHING HERE MAY DECLARE transform / filter / backdrop-filter / perspective /
   contain / will-change on .page-frame or any ancestor of it. Any one of those
   makes the frame a containing block for fixed descendants, which would re-anchor
   .header-site and the mobile search overlay to the panel instead of the viewport.
   _Header.cshtml:75-76 and :523-526 both carry the same warning.
   ============================================================================= */

/* ---------- 9.1 the page ground ---------- */

/* shop.css:47 paints .body #f5f5f5 — a cold grey that reads as "unstyled" behind a
   warm panel. --brand-page-bg is the reference's #EBE4D8, ~4% darker than the
   panel surface, which is what makes the panel read as lifted.

   html carries the DEEPER tone: it is what shows in overscroll rubber-banding and
   behind a mobile status bar. body then needs min-height to guarantee its own
   lighter ground still covers a short page — once html has a background of its
   own, body's no longer propagates to the canvas. */
html {
    background-color: var(--brand-page-bg-deep);
}

.body {
    background-color: var(--brand-page-bg);
    min-height: 100vh;
}

/* ---------- 9.2 the panel ---------- */

.page-frame {
    /* ONE expression covers all three of the reference's bands: 1440 centred with
       >=44px of ground per side from ~1488px up, and a 24px gutter below that.
       The header card reads the identical expression (the SHELL WIDTH block near
       the top of this file), which is what keeps the two edges aligned. */
    width: min(var(--frame-w), calc(100% - 2 * var(--frame-gutter)));
    margin: var(--frame-top) auto var(--frame-bottom);
    box-sizing: border-box;
    background-color: var(--brand-surface);
    border: 1px solid var(--brand-grey-rule);
    border-radius: var(--radius-brand-frame);
    box-shadow: var(--brand-shadow-frame);
    /* `clip`, NOT `hidden`. hidden makes the panel a scroll container, and the
       Profile sidebar (.right-side-panel .links-profile-content, shop.css:2941)
       is position:sticky against the viewport — inside a non-scrolling scroll
       container it would never stick again. clip does the same corner masking
       without creating one. */
    overflow: clip;
}

/* Below 992px the panel is full-bleed — no gutter, no corners, no edge, no cast.
   The reference specifies this at 768px; 992 is used instead because that is where
   the approved mobile header takes over and goes full-bleed itself. At 768 the two
   would disagree between 768 and 991: a full-bleed header sitting on an inset
   panel. Aligning them is the only value that needs no change to the approved
   mobile header. */
@media only screen and (max-width: 991px) {
    .page-frame {
        width: 100%;
        margin: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
}

/* ---------- 9.3 the footer closes the panel ---------- */

/* THE ONE FRAME RULE THAT IS NOT IN THIS FILE. .footer-site's background is the
   panel's closing band (the reference's #F8F4EC), and it is declared in
   footer-redesign.css instead — that sheet owns the selector, sets it to
   `background: none`, and _Layout.cshtml links it AFTER this file, so it wins
   every equal-specificity tie. Declared here it was silently overridden. See the
   comment on .footer-site in footer-redesign.css SECTION 1.

   The panel's own 24px bottom corners come from the `overflow: clip` above, so
   the footer needs no radius of its own — exactly as the reference specifies. */

/* ---------- 9.4 the fixed header as the panel's top slab ---------- */

@media only screen and (min-width: 992px) {
    /* THE FRAME'S EDGE, CONTINUED UP THROUGH THE HEADER. The card sits at exactly
       the panel's width and inset, so these three borders land on exactly the same
       pixels as the panel's own left/right/top border — one hairline, not two. The
       panel's box-shadow needs no help: the panel's box extends UP behind the
       header (same width, starting at the same y), so its side and top cast are
       already drawn around the header region and nothing covers them. */
    .header-site .header-container {
        border-top: 1px solid var(--brand-grey-rule);
        border-inline: 1px solid var(--brand-grey-rule);

        /* THE 32px OF PAGE GROUND ABOVE THE PANEL. The header does not move — the
           CARD is pushed down by the same margin the panel carries, so the card's
           top edge and the panel's top edge are always the same y.

           margin-top on .header-container rather than `top` on .header-site, for
           three reasons:
             1. .header-site carries a blanket `transition: .3s` (shop.css:637); a
                per-frame `top` write would ease and visibly lag the scroll. This
                element's transition list is `height` only (SECTION 4), so a margin
                here is never animated.
             2. header-compact.js's measureFullHeight() reads container.offsetHeight,
                which EXCLUDES this margin — so --header-full-height stays the card's
                real height and shop.js's setContentTopOffset() is untouched.
             3. The +80 design gap survives untouched at every scroll position: the
                panel's margin-top and the card's margin-top are the same value, so
                content-top minus header-bottom is still exactly +80.

           --header-inset is written by header-compact.js as max(0, --frame-top -
           scrollY), so the gap closes as the panel's top edge reaches the top of
           the screen. The fallback is the full gap, which is the top-of-page state —
           i.e. with no JavaScript at all this renders the design's rest position. */
        margin-top: var(--header-inset, var(--frame-top));

        /* The panel's top corners, tracking the gap: 24px while the gap is open,
           0 the instant the card docks against the screen edge — which is what the
           reference's scrolled artboard specifies («گوشه‌های بالای آن صاف می‌شود»).
           min() does it with no JS branch and no second class. */
        border-start-start-radius: min(var(--radius-brand-frame), var(--header-inset, var(--frame-top)));
        border-start-end-radius: min(var(--radius-brand-frame), var(--header-inset, var(--frame-top)));
    }

    /* .header-container CANNOT take overflow:hidden — it would clip the mega menu,
       the mini-cart, the account panel and the search panel, all of which are
       absolutely positioned descendants (see SECTION 4's note at the top). So the
       top corners are repeated on whichever row is topmost, exactly the way ROW 3
       repeats the card's BOTTOM corners rather than being clipped to them (see the
       .header-nav-bar rule in SECTION 2). :first-child rather than a named row,
       because ROW 1 is .header-mode-ribbon in sell mode and .banner-container in
       buy mode. */
    .header-site .header-container > *:first-child {
        border-start-start-radius: inherit;
        border-start-end-radius: inherit;
    }

    /* THE DOCKED STATE. By the time the header collapses (COLLAPSE_AT = 110px,
       header-compact.js) --header-inset is long since 0, so the margin and the top
       corners are already gone; these restate both so the state cannot depend on a
       script having run. The bottom corners are the reference's rail: the bar is
       flush to the screen edge, so it is square on top and rounded underneath, and
       the page ground shows either side of it because its width is the panel's. */
    .header-site.header-compact .header-container {
        margin-top: 0;
        border-radius: 0 0 var(--radius-brand-bar) var(--radius-brand-bar);
    }

    /* The 2px read-progress strip sits on the bar's bottom edge, so it has to take
       the same corners or its square ends poke out past them. */
    .header-site.header-compact .header-progress {
        border-radius: 0 0 var(--radius-brand-bar) var(--radius-brand-bar);
    }
}