/* =============================================================================
   HOME PAGE — Phase 1d
   Partner stylesheet for Views/Home/Index.cshtml.
   Reference: Docs/Redesign/Approved/home/Daric Home (standalone).html

   REPLACES css/Index/Index.css, which was deleted with the sections it styled
   (the price-ticker split, the boxes strip, the irregular banner rows and the
   `.slider-top` instant-offer sidebar). Nothing in this file descends from it.

   WHY A HAND-WRITTEN STYLESHEET rather than Tailwind utilities in the markup:
   the same reason product-card.css and footer-redesign.css exist. The page is
   mostly things a utility class cannot express — corner brackets, hover sheens,
   gradient hairlines, a dotted category ground, a dashed roadmap connector — and
   writing those as arbitrary-value utilities makes the .cshtml unreadable. The
   view stays structural; the visual layer lives here.

   NAMESPACE. Every class is `home-`. Verified free across shop.css,
   header-merge.css, footer-redesign.css, product-card.css and shop.js before it
   was chosen. (`hp-` was rejected: css/PriceTickers/init-new.css uses it — that
   file is dead, but a dead file is a bad reason to risk a collision.)

   LOAD ORDER. Linked from the view's @section Styles, so it lands BEFORE
   Partials/_ProductCardStyles.cshtml, which _Layout renders last. That order is
   deliberate: the product card must keep winning every tie inside a home rail.

   TOKENS. Colours, radii, shadows and gutters come from --brand-* / --home-*
   declared in tailwind/input.css (STEP 11 block). No literal hex belongs here.

   PREFLIGHT IS OFF, so <button>, <h2>, <ul> and <img> keep their UA/Bootstrap
   defaults. Section 0 resets them inside the namespace only.

   SECTIONS
     0  Page shell, resets, section heads and shared atoms
     1  Hero slider
     2  Key actions
     3  Category showcase
     4  Banner slots (100% and 50/33)
     5  Flash offers, populated and empty
     6  Product rails (newest, bestsellers, recently viewed)
     7  Installments teaser
     8  Selected brands
     9  Trust zone: roadmap, badges
    10  Licence strip
    11  Mobile (<= 991.98px)
   ============================================================================= */


/* =============================================================================
   SECTION 0 — PAGE SHELL, RESETS AND SHARED ATOMS
   The page is ONE flex column with a gap. That is the whole "no empty gaps"
   mechanism the design specifies: a section that renders nothing contributes no
   box and therefore no gap, so hiding a section never leaves a hole. Do not
   convert this to margins on the sections.
   ============================================================================= */
.home-page {
    max-width: 1440px;
    margin: 0 auto;
    /* NO top padding at desktop, deliberately. The reference draws the page body with
       34px of air above the hero, but on the real site shop.js's setContentTopOffset()
       already adds a DESIGN GAP of +80px to .content-site's margin above the fixed
       header's height — every page gets it. Adding 34 on top produced ~114px of dead
       band between the header and the hero. The mobile rule in SECTION 11 does add its
       own top padding, because setContentTopOffset() reserves only the header's height
       below 992px and adds no gap there. */
    padding: 0 var(--home-gutter) 56px;
    box-sizing: border-box;
    color: var(--brand-text);
}

.home-sections {
    display: flex;
    flex-direction: column;
    gap: 64px;
}

/* Namespaced resets. Preflight is disabled site-wide, so these do not come free.
   :where() ZEROES the .home-page part of the selector, leaving each rule at the
   specificity of the bare type selector (0,0,1). That is load-bearing, not tidiness:
   written as `.home-page button` the reset is (0,1,1) and OUT-SPECIFIES every
   single-class component below it — `.home-nav__btn`, `.home-hero__nav` and
   `.home-notify__btn` all lost their border and background to it, rendering as bare
   chevrons and unstyled text. Anything with a class now wins automatically. */
:where(.home-page) h2,
:where(.home-page) h3 {
    margin: 0;
    font-weight: inherit;
}

:where(.home-page) button {
    border: 0;
    background: none;
    padding: 0;
    font-family: inherit;
    cursor: pointer;
}

/* shop.css:22-27 sets `img[alt] { display: flex }`, which turns every alt-bearing
   image into a flex container and breaks object-fit sizing. Undone in-namespace —
   and this one has to BEAT that rule, whose specificity is (0,1,1), so it is the
   one reset that keeps a class in the selector. */
.home-page img[alt],
:where(.home-page) img {
    display: block;
    max-width: 100%;
}

:where(.home-page) a {
    text-decoration: none;
}

/* ── Icons ────────────────────────────────────────────────────────────────────
   Every icon comes from Partials/Home/_HomeIcon.cshtml carrying only
   class="home-icon" and a viewBox. An <svg> with no width/height would lay out
   at the SVG default 300x150, so the size is set here — once as a default, then
   per context. That is what lets one icon definition serve a 24px action tile
   and a 20px trust badge. */
.home-icon {
    width: 16px;
    height: 16px;
    flex: none;
}

.home-action__icon .home-icon,
.home-flash__bolt .home-icon,
.home-flash__clock .home-icon,
.home-roadmap__icon .home-icon {
    width: 24px;
    height: 24px;
}

.home-badge__icon .home-icon {
    width: 20px;
    height: 20px;
}

.home-cat__medallion .home-icon {
    width: 42px;
    height: 42px;
}

.home-installments__mark .home-icon {
    width: 46px;
    height: 46px;
}

.home-head__all .home-icon,
.home-installments__badge .home-icon,
.home-installments__benefit .home-icon {
    width: 14px;
    height: 14px;
}

.home-nav__btn .home-icon,
.home-cat__chev .home-icon,
.home-brand__cta .home-icon,
.home-banner__chev .home-icon {
    width: 15px;
    height: 15px;
}

.home-hero__nav .home-icon {
    width: 18px;
    height: 18px;
}

.home-action__chev .home-icon {
    width: 18px;
    height: 18px;
}


/* ── Section head ──────────────────────────────────────────────────────────────
   Shared by categories, newest, bestsellers, brands, trust and recently viewed. */
.home-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.home-head__title {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

/* The gold tick to the right of a heading (RTL), fading downward. */
.home-head__bar {
    flex: none;
    width: 3px;
    height: 24px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--brand-primary), transparent);
}

.home-head__text {
    font-size: 21px;
    font-weight: 800;
    line-height: 1.4;
    color: var(--brand-text);
}

.home-head__note {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--brand-text-soft);
}

.home-head__tools {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: none;
}

.home-head__all {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--brand-primary-deep);
    transition: color .2s ease;
}

.home-head__all:hover {
    color: var(--brand-text);
}

.home-head__sep {
    width: 1px;
    height: 22px;
    background: var(--brand-border);
}

/* ── Rail navigation buttons ───────────────────────────────────────────────── */
.home-nav {
    display: flex;
    gap: 8px;
}

.home-nav__btn {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    border: 1px solid var(--brand-border);
    background: var(--brand-card-face);
    color: var(--brand-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .2s ease, color .2s ease, opacity .2s ease;
}

.home-nav__btn:hover {
    border-color: var(--brand-primary);
    color: var(--brand-primary-deep);
}

/* Swiper adds this when there is nothing to scroll to. Kept visible but inert so
   the head does not reflow when a rail happens to fit. */
.home-nav__btn.swiper-button-disabled {
    opacity: .4;
    cursor: default;
}

/* ── The gold call-to-action, shared by the hero and the installments teaser ── */
.home-cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 50px;
    padding: 0 26px;
    border-radius: var(--radius-brand-lg);
    background: linear-gradient(145deg, var(--brand-primary-sun), var(--brand-primary) 46%, var(--brand-primary-sheen));
    color: var(--brand-primary-ink);
    border: 1px solid var(--brand-primary-frame-strong);
    font-size: 14px;
    font-weight: 700;
    box-shadow: var(--brand-shadow-cta-hero);
    transition: transform .18s ease;
}

.home-cta:hover {
    transform: translateY(-2px);
    color: var(--brand-primary-ink);
}

.home-cta--ghost {
    height: 50px;
    padding: 0 20px;
    border-radius: var(--radius-brand-lg);
    border: 1px solid var(--brand-primary-edge);
    background: var(--brand-surface-2);
    color: var(--brand-primary-deep);
    font-size: 13.5px;
    font-weight: 600;
    box-shadow: none;
}

.home-cta--ghost:hover {
    transform: none;
    background: var(--brand-surface-2);
    color: var(--brand-primary-deep);
    border-color: var(--brand-primary);
}

/* ── Corner brackets ───────────────────────────────────────────────────────────
   Drawn with physical properties on purpose. They are a decorative frame, not
   content: mirroring them under RTL would rotate the frame, not translate it.
   Same decision the product card's .pc-bracket-* rules record. */
.home-bracket {
    position: absolute;
    width: 20px;
    height: 20px;
    pointer-events: none;
}

.home-bracket--tr {
    top: 14px;
    right: 14px;
    border-top: 1px solid var(--brand-primary-bracket);
    border-right: 1px solid var(--brand-primary-bracket);
    border-top-right-radius: 5px;
}

.home-bracket--tl {
    top: 14px;
    left: 14px;
    border-top: 1px solid var(--brand-primary-bracket);
    border-left: 1px solid var(--brand-primary-bracket);
    border-top-left-radius: 5px;
}

.home-bracket--br {
    bottom: 14px;
    right: 14px;
    border-bottom: 1px solid var(--brand-primary-bracket);
    border-right: 1px solid var(--brand-primary-bracket);
    border-bottom-right-radius: 5px;
}

.home-bracket--bl {
    bottom: 14px;
    left: 14px;
    border-bottom: 1px solid var(--brand-primary-bracket);
    border-left: 1px solid var(--brand-primary-bracket);
    border-bottom-left-radius: 5px;
}

/* ── Hover sheen ───────────────────────────────────────────────────────────────
   A highlight band parked off-canvas that sweeps across on hover. `transition:
   background-position 0s` in the rest state is what makes it snap back instantly
   instead of sweeping backwards when the pointer leaves. */
.home-sheen {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(100deg, transparent 38%, var(--brand-sheen-sweep) 50%, transparent 62%);
    background-size: 260% 100%;
    background-position: 150% 0;
    background-repeat: no-repeat;
    transition: background-position 0s;
}

.home-hatch {
    background: repeating-linear-gradient(135deg, var(--brand-hatch-hero-a), var(--brand-hatch-hero-a) 9px, var(--brand-hatch-hero-b) 9px, var(--brand-hatch-hero-b) 18px);
}

/* ── Rails ────────────────────────────────────────────────────────────────────
   Every scrolling row on this page is a Swiper with slidesPerView:'auto', so the
   slide width is set HERE, once, from a token. Scoped to .home-rail so no other
   page's carousel is touched. overflow is visible vertically so a lifted card's
   shadow is not clipped, and hidden horizontally by the padded frame below. */
.home-rail {
    width: 100%;
    overflow: hidden;
    /* Room for the hover lift and its shadow, negated so the row still lines up. */
    padding: 4px 2px 10px;
    margin: -4px -2px -10px;
}

.home-rail .swiper-slide {
    width: var(--home-card-w);
    height: auto;
}

/* Swiper adds .swiper-container-locked (watchOverflow) when the slides fit without
   scrolling. Left start-aligned, three categories in a 1345px rail leave ~550px of
   void to their left, which reads as a broken row rather than a short one — the
   exact "looks empty" failure this redesign exists to remove. Centring is only ever
   applied when there is genuinely nothing to scroll, so a full rail is untouched. */
.home-rail.is-locked .swiper-wrapper {
    justify-content: center;
}


/* =============================================================================
   SECTION 1 — HERO
   Two-column slide: text at the start edge, artwork at the end edge. Fields the
   admin left empty are simply absent (the view does not render them), so a slide
   carrying only an image and a title collapses to headline + one button without
   any empty chip or blank line.
   ============================================================================= */
.home-hero {
    position: relative;
    border-radius: var(--radius-brand-section);
    overflow: hidden;
    border: 1px solid var(--brand-primary-rule);
    background: linear-gradient(150deg, var(--brand-surface-cream), color-mix(in oklab, var(--brand-primary-band) 30%, var(--brand-surface-cream)));
    box-shadow: var(--brand-shadow-hero);
}

.home-hero__viewport {
    width: 100%;
    overflow: hidden;
}

.home-hero__slide {
    height: 430px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 40px;
    padding: 0 62px;
    box-sizing: border-box;
}

.home-hero__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    min-width: 0;
}

.home-hero__kicker {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, .8);
    border: 1px solid var(--brand-primary-edge);
    color: var(--brand-primary-deep);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 11.5px;
    font-weight: 700;
    backdrop-filter: blur(4px);
}

.home-hero__kicker::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--brand-primary);
}

.home-hero__title {
    font-size: 40px;
    font-weight: 800;
    line-height: 1.42;
    letter-spacing: -.015em;
    max-width: 520px;
    text-wrap: pretty;
    color: var(--brand-text);
}

.home-hero__sub {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.9;
    color: var(--brand-text-muted);
    max-width: 460px;
    text-wrap: pretty;
}

.home-hero__ctas {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
    flex-wrap: wrap;
}

/* The artwork panel. The reference draws a hatched placeholder here labelled
   "hero shot"; the real banner image goes in exactly that box. The hatch stays
   as the backdrop so a slow-loading or portrait image never shows dead white. */
.home-hero__media {
    position: relative;
    height: 326px;
    border-radius: var(--radius-brand-panel);
    border: 1px solid var(--brand-primary-rule);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-hero__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--brand-primary-rule);
    background: rgba(255, 255, 255, .9);
    color: var(--brand-primary-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--brand-shadow-nav-btn);
    transition: background .2s ease, border-color .2s ease;
    z-index: 2;
}

.home-hero__nav:hover {
    background: var(--brand-surface-2);
    border-color: var(--brand-primary);
}

/* Physical, and deliberately so: in RTL "next" advances toward the LEFT edge,
   which is where the reference puts it. */
.home-hero__nav--next {
    left: 22px;
}

.home-hero__nav--prev {
    right: 22px;
}

.home-hero__dots {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    z-index: 2;
}

/* Swiper renders its own bullets; these restyle them into the reference's pills.
   The active one widens rather than changing colour alone. */
.home-hero__dots .swiper-pagination-bullet {
    width: 6px;
    height: 6px;
    margin: 0;
    border-radius: 3px;
    opacity: 1;
    background: color-mix(in oklab, var(--brand-primary) 30%, #FFFFFF);
    transition: width .3s ease, background .3s ease;
}

.home-hero__dots .swiper-pagination-bullet-active {
    width: 26px;
    background: var(--brand-primary);
}


/* =============================================================================
   SECTION 2 — KEY ACTIONS
   `flex: 1 1 320px` is what keeps the row balanced at three, two or one card:
   each card claims an equal share of whatever is left. The single-card case is
   the one flex cannot solve on its own — a lone card would stretch the full
   1360px — so it is capped and centred, driven by the server-rendered count.
   ============================================================================= */
.home-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.home-action {
    flex: 1 1 320px;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 24px;
    border-radius: var(--radius-brand-panel);
    background: var(--brand-card-face);
    border: 1px solid var(--brand-primary-rule);
    box-shadow: var(--brand-shadow-action);
    color: var(--brand-text);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1), border-color .28s ease, box-shadow .28s ease;
}

.home-action:hover {
    transform: translateY(-3px);
    border-color: var(--brand-primary);
    box-shadow: var(--brand-shadow-action-hover);
    color: var(--brand-text);
}

.home-actions[data-actions="1"] .home-action {
    max-width: 720px;
    margin: 0 auto;
}

.home-action__icon {
    flex: none;
    width: 54px;
    height: 54px;
    border-radius: var(--radius-brand-panel);
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, var(--brand-surface-gilt), var(--brand-primary-band));
    border: 1px solid var(--brand-primary-rule);
    color: var(--brand-primary-deep);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}

.home-action__text {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.home-action__title {
    font-size: 16px;
    font-weight: 700;
}

.home-action__sub {
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.7;
    color: var(--brand-text-muted);
}

.home-action__chev {
    margin-inline-start: auto;
    flex: none;
    color: var(--brand-primary-deep);
    display: flex;
}


/* =============================================================================
   SECTION 3 — CATEGORY SHOWCASE
   Two grounds: a photo when the category has a Thumbnail, and the gilded
   placeholder — dotted field, halo, ringed medallion — when it does not. The
   reference ships both and defaults to the placeholder; which one a tile gets is
   decided per category by the data, not by a page-wide switch.
   ============================================================================= */
.home-cat {
    position: relative;
    display: block;
    width: 252px;
    height: 308px;
    border-radius: var(--radius-brand-card-lg);
    overflow: hidden;
    border: 1px solid var(--brand-primary-rule);
    background: linear-gradient(165deg, var(--brand-card-well-from), var(--brand-surface-sand));
    color: var(--brand-text);
    box-shadow: var(--brand-shadow-tile);
    transition: transform .32s cubic-bezier(.4, 0, .2, 1), border-color .32s ease, box-shadow .32s ease;
}

.home-cat:hover {
    transform: translateY(-5px);
    border-color: var(--brand-primary);
    box-shadow: var(--brand-shadow-tile-hover);
    color: var(--brand-text);
}

.home-rail--cats .swiper-slide {
    width: 252px;
}

.home-cat__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}

.home-cat:hover .home-cat__photo {
    transform: scale(1.05);
}

.home-cat__dots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(var(--brand-primary-pale) 1px, transparent 1.1px);
    background-size: 15px 15px;
    opacity: .45;
}

.home-cat__halo {
    position: absolute;
    inset: 0;
    background: radial-gradient(52% 40% at 50% 34%, color-mix(in oklab, var(--brand-primary) 20%, #FFFFFF), transparent 72%);
}

.home-cat__ring {
    position: absolute;
    top: 108px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 118px;
    height: 118px;
    border-radius: 50%;
    border: 1px solid var(--brand-primary-bracket);
    opacity: .5;
}

.home-cat__medallion {
    position: absolute;
    top: 108px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: linear-gradient(150deg, var(--brand-surface-cream), color-mix(in oklab, var(--brand-primary) 12%, #FFFFFF));
    border: 1px solid var(--brand-primary-edge);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-primary-deep);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 14px 24px -18px rgba(120, 90, 20, .75);
    transition: transform .38s cubic-bezier(.4, 0, .2, 1);
}

.home-cat:hover .home-cat__medallion {
    transform: translate(-50%, -50%) scale(1.05);
}

/* Brackets on the tile sit closer in than the shared 14px default. */
.home-cat .home-bracket {
    width: 16px;
    height: 16px;
    top: 14px;
}

.home-cat__caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    background: var(--brand-scrim-tile);
}

.home-cat__name {
    font-size: 16px;
    font-weight: 800;
    color: var(--brand-caption-on-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-cat__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.home-cat__count {
    font-size: 11px;
    font-weight: 600;
    color: var(--brand-caption-on-dark-muted);
}

.home-cat__chev {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 253, 246, .16);
    border: 1px solid rgba(247, 234, 203, .4);
    color: var(--brand-caption-on-dark-soft);
    flex: none;
}

.home-cat:hover .home-sheen {
    background-position: -60% 0;
    transition: background-position 1.1s cubic-bezier(.35, 0, .2, 1);
}


/* =============================================================================
   SECTION 4 — BANNER SLOTS
   Both slots render NOTHING when the merchant has uploaded no banner of that
   type; the view omits the whole element, so the page column's gap closes.
   ============================================================================= */
.home-banner {
    display: block;
    border-radius: var(--radius-brand-section);
    background: var(--brand-card-face);
    border: 1px solid var(--brand-primary-rule);
    padding: 8px;
    box-sizing: border-box;
    box-shadow: var(--brand-shadow-tile);
    transition: transform .32s cubic-bezier(.4, 0, .2, 1), border-color .32s ease, box-shadow .32s ease;
}

.home-banner:hover {
    transform: translateY(-4px);
    border-color: var(--brand-primary);
    box-shadow: var(--brand-shadow-tile-hover);
}

.home-banner__frame {
    position: relative;
    display: block;
    border-radius: 13px;
    overflow: hidden;
}

/* THE FRAME'S RATIO IS THE UPLOADED ARTWORK'S RATIO, per banner type — the sizes
   CreateHandlre resizes to. The reference draws these slots at fixed heights
   (372px and 300px) because its contents are placeholders; forcing real artwork
   into those boxes with object-fit:cover cropped a 820x350 certificate scan to
   433x300 and cut the merchant's own text off. A slightly shorter slot is a much
   smaller deviation from the design than mangling the picture it exists to show. */
.home-banner--wide .home-banner__frame {
    aspect-ratio: 1346 / 210;
}

.home-banner--half .home-banner__frame {
    aspect-ratio: 820 / 300;
}

.home-banner--third .home-banner__frame {
    aspect-ratio: 820 / 350;
}

.home-banner__frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-banner__chev {
    position: absolute;
    bottom: 14px;
    right: 14px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 253, 248, .92);
    border: 1px solid var(--brand-primary-rule);
    color: var(--brand-primary-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px -14px rgba(120, 90, 20, .9);
}

.home-banner:hover .home-sheen {
    background-position: -60% 0;
    transition: background-position 1.15s cubic-bezier(.35, 0, .2, 1);
}

/* The 50/33 row. `flex: 1 1 0` with min-width:0 gives equal columns at any count,
   so two banners split the row in half and three into thirds with no per-count
   rule — the same reason the key-actions row needs no modifier. */
.home-banner-row {
    display: flex;
    gap: 20px;
}

.home-banner-row .home-banner {
    flex: 1 1 0;
    min-width: 0;
    border-radius: var(--radius-brand-card-lg);
    padding: 7px;
}

.home-banner-row .home-banner__frame {
    border-radius: 12px;
}

.home-banner-row .home-banner__chev {
    width: 34px;
    height: 34px;
    bottom: 13px;
    right: 13px;
}


/* =============================================================================
   SECTION 5 — FLASH OFFERS
   Two states, both from the reference. Populated: gilded panel, live countdown,
   a rail of discounted cards. Empty: a dashed panel with no timer at all — the
   design's own note is that a broken countdown over nothing is worse than no
   section, so the timer markup is not rendered rather than hidden.
   ============================================================================= */
.home-flash {
    border-radius: var(--radius-brand-section);
    border: 1px solid var(--brand-primary-edge);
    background: linear-gradient(140deg, var(--brand-primary-band), var(--brand-surface-cream) 55%, var(--brand-primary-band));
    padding: 28px;
    box-shadow: var(--brand-shadow-flash);
}

.home-flash__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.home-flash__brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.home-flash__bolt {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, var(--brand-primary-sun), var(--brand-primary) 50%, var(--brand-primary-sheen));
    color: var(--brand-primary-ink);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 12px 20px -14px rgba(120, 90, 20, .95);
    flex: none;
}

.home-flash__titles {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.home-flash__title {
    font-size: 21px;
    font-weight: 800;
}

.home-flash__note {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--brand-text-muted);
}

.home-flash__tools {
    display: flex;
    align-items: center;
    gap: 16px;
}

.home-flash__sep {
    width: 1px;
    height: 38px;
    background: var(--brand-primary-edge);
}

.home-flash .home-nav__btn {
    border-color: var(--brand-primary-rule);
    background: var(--brand-surface-2);
    color: var(--brand-primary-deep);
}

.home-flash .home-rail {
    padding-top: 24px;
    margin-top: 0;
}

/* ── Countdown ──────────────────────────────────────────────────────────────── */
.home-countdown {
    display: flex;
    align-items: center;
    gap: 8px;
}

.home-countdown__part {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.home-countdown__value {
    min-width: 54px;
    padding: 9px 6px;
    border-radius: 11px;
    background: linear-gradient(160deg, var(--brand-countdown-from), var(--brand-countdown-to));
    color: var(--brand-surface-2);
    font-size: 20px;
    font-weight: 800;
    text-align: center;
    font-variant-numeric: tabular-nums;
    box-shadow: var(--brand-shadow-countdown);
}

.home-countdown__label {
    font-size: 10px;
    font-weight: 600;
    color: var(--brand-text-muted);
}

/* ── Empty state ────────────────────────────────────────────────────────────── */
.home-flash--empty {
    border-style: dashed;
    background: linear-gradient(140deg, var(--brand-primary-band), var(--brand-surface-cream) 60%);
    box-shadow: none;
    padding: 44px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
}

.home-flash__clock {
    width: 52px;
    height: 52px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-surface-2);
    border: 1px solid var(--brand-primary-rule);
    color: var(--brand-primary-deep);
}

.home-flash__empty-title {
    font-size: 17px;
    font-weight: 700;
}

.home-flash__empty-body {
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.9;
    color: var(--brand-text-muted);
    max-width: 460px;
}

/* The «خبرم کن» sign-up. The reference draws a lone button; a button with no
   field cannot subscribe anyone, so the real email input the footer's newsletter
   uses sits beside it, styled to the same outline the reference gives the button. */
.home-notify {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    flex-wrap: wrap;
    justify-content: center;
}

.home-notify__input {
    height: 42px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid var(--brand-primary-edge);
    background: var(--brand-surface-2);
    color: var(--brand-text);
    font-family: inherit;
    font-size: 12.5px;
    min-width: 220px;
}

.home-notify__input:focus {
    outline: none;
    border-color: var(--brand-primary);
}

.home-notify__btn {
    height: 42px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 20px;
    border-radius: 12px;
    border: 1px solid var(--brand-primary);
    background: var(--brand-surface-2);
    color: var(--brand-primary-deep);
    font-size: 12.5px;
    font-weight: 700;
    transition: background .2s ease;
}

.home-notify__btn:hover {
    background: var(--brand-primary-band);
}

.home-notify__status {
    width: 100%;
    font-size: 12px;
    font-weight: 600;
    min-height: 18px;
}

/* footer.js drives this element for BOTH storefront newsletter forms; the class
   names are its contract, not a choice made here. */
.home-notify__status.is-ok {
    color: var(--brand-success);
}

.home-notify__status.is-error {
    color: var(--brand-danger);
}


/* =============================================================================
   SECTION 6 — PRODUCT RAILS
   The rails themselves are Section 0's .home-rail; this only wraps them with the
   shared head. Cards are the unified _ProductCard in its Slide layout, unchanged.
   ============================================================================= */
.home-section {
    display: flex;
    flex-direction: column;
    gap: 22px;
}


/* =============================================================================
   SECTION 7 — INSTALLMENTS TEASER
   Gated behind <feature name="InstallmentPayment">, which emits no wrapper, so
   when the module is off this element does not exist and the column closes up.
   ============================================================================= */
.home-installments {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 36px;
    align-items: center;
    padding: 36px 40px;
    border-radius: var(--radius-brand-section);
    background: linear-gradient(115deg, var(--brand-surface-2) 20%, var(--brand-primary-band));
    border: 1px solid var(--brand-primary-rule);
    box-shadow: var(--brand-shadow-flash);
}

.home-installments__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
}

.home-installments__badge {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--brand-surface-2);
    border: 1px solid var(--brand-primary-edge);
    color: var(--brand-primary-deep);
    border-radius: 999px;
    padding: 6px 13px;
    font-size: 11.5px;
    font-weight: 700;
}

.home-installments__title {
    font-size: 30px;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: -.01em;
    text-wrap: pretty;
}

.home-installments__body {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.9;
    color: var(--brand-text-muted);
    max-width: 520px;
    text-wrap: pretty;
}

.home-installments__benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 2px;
    list-style: none;
    padding: 0;
}

.home-installments__benefit {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--brand-surface-2);
    border: 1px solid var(--brand-primary-rule);
    border-radius: 12px;
    padding: 11px 15px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--brand-text);
}

.home-installments__benefit svg {
    color: var(--brand-primary-deep);
    flex: none;
}

.home-installments .home-cta {
    margin-top: 8px;
    height: 48px;
    padding: 0 24px;
    font-size: 13.5px;
}

.home-installments__visual {
    position: relative;
    height: 250px;
    border-radius: var(--radius-brand-panel);
    border: 1px solid var(--brand-primary-rule);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* The reference's right-hand panel is a labelled placeholder. There is no image
   in the data model for it, so rather than invent one the panel carries a gilded
   medallion — the same device the category tiles use for a category with no
   thumbnail, so it reads as this design's decoration rather than a missing asset. */
.home-installments__mark {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(150deg, var(--brand-surface-cream), color-mix(in oklab, var(--brand-primary) 12%, #FFFFFF));
    border: 1px solid var(--brand-primary-edge);
    color: var(--brand-primary-deep);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 14px 24px -18px rgba(120, 90, 20, .75);
}


/* =============================================================================
   SECTION 8 — SELECTED BRANDS
   A grid, not a carousel — the reference draws four fixed cards on desktop and a
   stacked list on mobile, and neither scrolls. auto-fit rather than repeat(4)
   because the count is admin-controlled: with a fixed four-column track, three
   configured brands would bunch against one edge and leave a visible hole.
   ============================================================================= */
.home-brands__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}

.home-brand {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px;
    border-radius: var(--radius-brand-card-lg);
    background: linear-gradient(150deg, var(--brand-surface-2), var(--brand-card-well-from));
    border: 1px solid var(--brand-primary-rule);
    box-sizing: border-box;
    color: var(--brand-text);
    box-shadow: var(--brand-shadow-tile);
    overflow: hidden;
    transition: transform .3s cubic-bezier(.4, 0, .2, 1), border-color .3s ease, box-shadow .3s ease;
}

.home-brand:hover {
    transform: translateY(-4px);
    border-color: var(--brand-primary);
    box-shadow: var(--brand-shadow-tile-hover);
    color: var(--brand-text);
}

.home-brand__rule {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2.5px;
    background: linear-gradient(90deg, transparent, var(--brand-primary) 24%, var(--brand-primary-crest) 50%, var(--brand-primary) 76%, transparent);
}

.home-brand__glow {
    position: absolute;
    top: -40px;
    left: -30px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in oklab, var(--brand-primary) 13%, transparent), transparent 68%);
    pointer-events: none;
}

.home-brand__head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.home-brand__logo {
    flex: none;
    width: 78px;
    height: 78px;
    border-radius: var(--radius-brand-panel);
    background: linear-gradient(160deg, var(--brand-surface-cream), var(--brand-surface-parchment));
    border: 1px solid var(--brand-primary-rule);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}

.home-brand__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 10px;
    box-sizing: border-box;
}

/* No logo uploaded: the plate keeps its frame and shows the brand's initial,
   which is real data — rather than a broken <img> or an empty box. */
.home-brand__initial {
    font-size: 26px;
    font-weight: 800;
    color: var(--brand-primary-deep);
}

.home-brand__names {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.home-brand__name {
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-brand__tag {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--brand-primary-deep);
    background: var(--brand-primary-band);
    border: 1px solid var(--brand-primary-rule);
    border-radius: 999px;
    padding: 4px 10px;
    width: max-content;
}

.home-brand__tag::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--brand-primary);
}

/* min-height keeps every card's divider on the same line whether a brand has a
   description or not — the equal-height trick the product card uses for specs. */
.home-brand__desc {
    position: relative;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.85;
    color: var(--brand-text-muted);
    text-wrap: pretty;
    min-height: 45px;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.home-brand__divider {
    position: relative;
    margin-top: auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--brand-primary-hairline) 30%, var(--brand-primary-hairline) 70%, transparent);
}

.home-brand__foot {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.home-brand__cta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--brand-primary-deep);
}


/* =============================================================================
   SECTION 9 — TRUST ZONE
   Roadmap, then assurance badges, then the DB-driven licence strip (Section 10).
   ============================================================================= */
.home-trust {
    display: flex;
    flex-direction: column;
    gap: 26px;
    padding: 34px 36px;
    border-radius: var(--radius-brand-section);
    background: var(--brand-card-face);
    border: 1px solid var(--brand-primary-rule);
    box-shadow: var(--brand-shadow-trust);
}

/* padding: 0 is not cosmetic. Preflight is off, so an <ol> keeps the UA's
   `padding-inline-start: 40px`; without this the whole roadmap sat 40px off its
   panel's start edge and the connector — positioned from the SAME edge — missed the
   medallions by exactly that much at both widths. */
.home-roadmap {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding: 8px 0 0;
    list-style: none;
    margin: 0;
}

/* The dashed connector. Inset 11% at both ends so it starts and stops inside the
   first and last medallion instead of running off the panel. */
.home-roadmap::before {
    content: "";
    position: absolute;
    top: 36px;
    right: 11%;
    left: 11%;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--brand-primary-hairline) 0 8px, transparent 8px 16px);
}

.home-roadmap__step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

/* The 6px spread ring in the card's own colour is what "erases" the dashed line
   behind each medallion — cheaper and more robust than segmenting the connector. */
.home-roadmap__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-surface-cream);
    border: 1px solid var(--brand-primary-edge);
    color: var(--brand-primary-deep);
    box-shadow: 0 0 0 6px var(--brand-card-face), inset 0 1px 0 rgba(255, 255, 255, .9), 0 12px 22px -18px rgba(120, 90, 20, .9);
    position: relative;
    z-index: 1;
    flex: none;
}

.home-roadmap__text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    text-align: center;
    padding: 0 14px;
}

.home-roadmap__title {
    font-size: 14px;
    font-weight: 700;
}

.home-roadmap__desc {
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.7;
    color: var(--brand-text-muted);
}

.home-trust__rule {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--brand-primary-hairline) 20%, var(--brand-primary-hairline) 80%, transparent);
}

.home-badges {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.home-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-radius: var(--radius-brand-lg);
    background: var(--brand-surface-recess);
    border: 1px solid var(--brand-border);
}

.home-badge__icon {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-primary-band);
    border: 1px solid var(--brand-primary-rule);
    color: var(--brand-primary-deep);
}

.home-badge__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.home-badge__title {
    font-size: 13px;
    font-weight: 700;
}

.home-badge__desc {
    font-size: 11px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--brand-text-muted);
}


/* =============================================================================
   SECTION 10 — LICENCE STRIP
   Rendered by Views/Shared/Components/StoreLicenses/HomeStrip.cshtml from the
   StoreLicense aggregate. The component renders nothing when none is configured,
   so this whole row disappears and the trust panel ends at the badges.
   ============================================================================= */
.home-licences {
    display: flex;
    align-items: center;
    /* Centred, not start-aligned. The count is admin-controlled: seven 96px tiles
       occupy 744px of a 1286px strip, and packed to the start edge that leaves a
       540px void that reads as a broken row. The reference fills it with a mock-up
       annotation, which is not real copy. */
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 18px 20px;
    border-radius: var(--radius-brand-lg);
    background: linear-gradient(120deg, var(--brand-surface-2), var(--brand-primary-band));
    border: 1px dashed var(--brand-primary-edge);
}

.home-licences__label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--brand-text-muted);
}

.home-licences__tiles {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.home-licence-tile {
    width: 96px;
    height: 56px;
    border-radius: 8px;
    background: repeating-linear-gradient(135deg, var(--brand-hatch-warm-a), var(--brand-hatch-warm-a) 7px, var(--brand-hatch-warm-b) 7px, var(--brand-hatch-warm-b) 14px);
    border: 1px solid var(--brand-border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: border-color .2s ease;
}

.home-licence-tile:hover {
    border-color: var(--brand-primary);
}

.home-licence-tile img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}


/* =============================================================================
   SECTION 11 — MOBILE (<= 991.98px)
   ONE responsive tree: everything below re-lays the SAME elements. There is no
   second markup branch and no width-based JS DOM switching anywhere on this page
   — that is the defect this rebuild exists to remove.

   991.98 rather than 767.98 because it is the breakpoint the header, the footer
   and shop.css's own `.display-*` rules already pivot on.
   ============================================================================= */
@media (max-width: 991.98px) {
    .home-page {
        padding: 20px 0 40px;
    }

    .home-sections {
        gap: 34px;
    }

    /* Sections that are full-bleed cards keep the gutter as a margin; rails run
       edge to edge and pad their own first/last slide instead, which is what lets
       a card peek in from the screen edge. */
    .home-actions,
    .home-hero,
    .home-flash,
    .home-installments,
    .home-trust,
    .home-banner-row,
    .home-banner--wide {
        margin-inline: var(--home-gutter-sm);
    }

    .home-head,
    .home-brands__grid {
        padding-inline: var(--home-gutter-sm);
    }

    .home-rail {
        padding-inline: var(--home-gutter-sm);
        margin-inline: 0;
    }

    /* ── Heads ─────────────────────────────────────────────────────────────── */
    .home-head__text {
        font-size: 16px;
    }

    .home-head__bar {
        height: 19px;
    }

    /* The arrow pair is pointer affordance; a touch rail scrolls by drag. The
       «مشاهده همه» link stays — it is the only way to the full list. */
    .home-head__note,
    .home-head__sep,
    .home-nav {
        display: none;
    }

    .home-head__all {
        font-size: 12px;
    }

    /* ── Hero ──────────────────────────────────────────────────────────────── */
    .home-hero {
        border-radius: var(--radius-brand-panel);
        box-shadow: var(--brand-shadow-hero-sm);
    }

    .home-hero__slide {
        height: auto;
        min-height: 250px;
        grid-template-columns: 1fr;
        gap: 11px;
        padding: 22px 20px 34px;
        align-content: center;
    }

    .home-hero__text {
        gap: 11px;
    }

    .home-hero__kicker {
        padding: 5px 11px;
        font-size: 10px;
    }

    .home-hero__title {
        font-size: 20px;
        line-height: 1.55;
    }

    .home-hero__sub {
        font-size: 11.5px;
        line-height: 1.8;
    }

    .home-cta,
    .home-cta--ghost {
        height: 42px;
        padding: 0 18px;
        border-radius: 12px;
        font-size: 12.5px;
    }

    /* The artwork panel is dropped at phone width rather than stacked: the
       reference's mobile hero is text-only, and a 326px image above a 20px
       headline would push the CTA below the fold on a 390x844 screen. */
    .home-hero__media {
        display: none;
    }

    .home-hero__nav {
        display: none;
    }

    .home-hero__dots {
        bottom: 12px;
        gap: 6px;
    }

    .home-hero__dots .swiper-pagination-bullet {
        height: 5px;
    }

    /* ── Key actions ───────────────────────────────────────────────────────── */
    .home-actions {
        flex-direction: column;
        gap: 11px;
    }

    .home-action {
        flex: none;
        gap: 14px;
        padding: 15px 16px;
        border-radius: var(--radius-brand-lg);
        box-shadow: var(--brand-shadow-tile-sm);
    }

    .home-actions[data-actions="1"] .home-action {
        max-width: none;
        margin: 0;
    }

    .home-action__icon {
        width: 44px;
        height: 44px;
        border-radius: var(--radius-brand-lg);
    }

    .home-action__title {
        font-size: 14px;
    }

    .home-action__sub {
        font-size: 11.5px;
        line-height: 1.6;
    }

    /* ── Categories ────────────────────────────────────────────────────────── */
    .home-section,
    .home-brands {
        gap: 14px;
    }

    .home-rail--cats .swiper-slide {
        width: 152px;
    }

    .home-cat {
        width: 152px;
        height: 230px;
        border-radius: var(--radius-brand-card-sm);
        box-shadow: var(--brand-shadow-tile-sm);
    }

    .home-cat__dots {
        background-size: 13px 13px;
    }

    .home-cat__ring {
        top: 78px;
        width: 88px;
        height: 88px;
    }

    .home-cat__medallion {
        top: 78px;
        width: 70px;
        height: 70px;
    }

    .home-cat .home-bracket {
        width: 12px;
        height: 12px;
        top: 10px;
    }

    .home-cat .home-bracket--tr {
        right: 10px;
    }

    .home-cat .home-bracket--tl {
        left: 10px;
    }

    .home-cat__caption {
        padding: 16px 12px 12px;
        gap: 5px;
    }

    .home-cat__name {
        font-size: 13.5px;
    }

    .home-cat__count {
        font-size: 10px;
    }

    .home-cat__chev {
        display: none;
    }

    /* ── Banners ───────────────────────────────────────────────────────────── */
    .home-banner {
        border-radius: var(--radius-brand-panel);
        padding: 6px;
        box-shadow: var(--brand-shadow-tile-sm);
    }

    .home-banner__frame {
        border-radius: 11px;
    }

    .home-banner__chev {
        display: none;
    }

    /* Stacked at phone width, each keeping its own ratio from the rules above —
       squeezing three of them into a 390px row would make each unreadable. */
    .home-banner-row {
        flex-direction: column;
        gap: 14px;
    }

    /* ── Flash ─────────────────────────────────────────────────────────────── */
    .home-flash {
        border-radius: var(--radius-brand-panel);
        padding: 16px 0;
        box-shadow: none;
    }

    .home-flash__head {
        padding-inline: var(--home-gutter-sm);
        gap: 10px;
        flex-wrap: nowrap;
    }

    .home-flash__brand {
        gap: 10px;
        min-width: 0;
    }

    .home-flash__bolt {
        width: 34px;
        height: 34px;
        border-radius: 11px;
        box-shadow: none;
    }

    .home-flash__title {
        font-size: 15px;
    }

    .home-flash__note {
        font-size: 10.5px;
    }

    .home-flash__tools {
        margin-inline-start: auto;
        gap: 5px;
    }

    .home-flash__sep {
        display: none;
    }

    .home-countdown {
        gap: 5px;
    }

    .home-countdown__value {
        min-width: 34px;
        padding: 6px 4px;
        border-radius: 8px;
        font-size: 13px;
        box-shadow: none;
    }

    /* The unit captions go: four labels under four 34px chips is unreadable, and
       the chips read as HH:MM:SS by position. */
    .home-countdown__label {
        display: none;
    }

    .home-flash .home-rail {
        padding-top: 16px;
    }

    .home-flash--empty {
        padding: 28px 20px;
        margin-inline: var(--home-gutter-sm);
        gap: 10px;
    }

    .home-flash__clock {
        width: 44px;
        height: 44px;
        border-radius: 13px;
    }

    .home-flash__empty-title {
        font-size: 14px;
    }

    .home-flash__empty-body {
        font-size: 11.5px;
        line-height: 1.8;
    }

    .home-notify__input {
        min-width: 0;
        flex: 1 1 160px;
    }

    /* ── Product rails ─────────────────────────────────────────────────────── */
    .home-rail .swiper-slide {
        width: var(--home-card-w-sm);
    }

    /* ── Installments ──────────────────────────────────────────────────────── */
    .home-installments {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 20px;
        border-radius: var(--radius-brand-panel);
        box-shadow: none;
    }

    .home-installments__text {
        gap: 14px;
    }

    .home-installments__title {
        font-size: 19px;
        line-height: 1.6;
    }

    /* Dropped rather than stacked, matching the reference's mobile teaser. */
    .home-installments__body,
    .home-installments__visual {
        display: none;
    }

    .home-installments__benefits {
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }

    .home-installments__benefit {
        background: none;
        border: 0;
        padding: 0;
        font-size: 12px;
    }

    .home-installments .home-cta {
        width: 100%;
        justify-content: center;
        height: 46px;
        margin-top: 4px;
    }

    /* ── Brands ────────────────────────────────────────────────────────────── */
    .home-brands__grid {
        grid-template-columns: 1fr;
        gap: 11px;
    }

    /* The card turns into a row: logo, names, chevron. The description and the
       footer rule go — at 390px they would double the card's height for text the
       brand page repeats anyway. */
    .home-brand {
        flex-direction: row;
        align-items: center;
        gap: 13px;
        padding: 14px;
        border-radius: var(--radius-brand-card-sm);
        box-shadow: var(--brand-shadow-tile-sm);
    }

    .home-brand__rule {
        height: 2px;
    }

    .home-brand__glow,
    .home-brand__desc,
    .home-brand__divider {
        display: none;
    }

    .home-brand__head {
        flex: 1;
        min-width: 0;
    }

    .home-brand__logo {
        width: 56px;
        height: 56px;
        border-radius: 13px;
    }

    .home-brand__name {
        font-size: 13.5px;
    }

    .home-brand__foot {
        margin-top: 0;
        flex: none;
    }

    /* The full label does not fit; the chevron alone carries the affordance. */
    .home-brand__cta span {
        display: none;
    }

    /* ── Trust ─────────────────────────────────────────────────────────────── */
    .home-trust {
        gap: 18px;
        padding: 20px 18px;
        border-radius: var(--radius-brand-panel);
        box-shadow: none;
    }

    /* The roadmap turns from a horizontal track into a vertical one. The
       connector moves with it — top/bottom inset instead of left/right, and
       positioned from the START edge so it stays under the medallions in RTL. */
    .home-roadmap {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    /* The LOGICAL pair is the whole rule: inset-inline-start maps to `right` under RTL,
       which both places the line on the medallions' centre line (22px = half of the 44px
       circle) AND overrides the desktop rule's `right: 11%`; inset-inline-end: auto
       cancels its `left: 11%`. Writing `left: auto; right: auto` alongside them — which
       this rule originally did — resets the very properties the logical ones had just
       set, and the connector drifted off the circles entirely. */
    .home-roadmap::before {
        top: 14px;
        bottom: 14px;
        inset-inline-start: 21px;
        inset-inline-end: auto;
        width: 2px;
        height: auto;
        background: repeating-linear-gradient(180deg, var(--brand-primary-hairline) 0 6px, transparent 6px 12px);
    }

    .home-roadmap__step {
        flex-direction: row;
        align-items: center;
        gap: 14px;
    }

    .home-roadmap__icon {
        width: 44px;
        height: 44px;
        box-shadow: 0 0 0 5px var(--brand-card-face);
    }

    .home-roadmap__text {
        align-items: flex-start;
        text-align: start;
        padding: 0;
        gap: 3px;
    }

    .home-roadmap__title {
        font-size: 13px;
    }

    .home-roadmap__desc {
        font-size: 11px;
    }

    .home-badges {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .home-badge {
        gap: 9px;
        padding: 11px;
        border-radius: 12px;
    }

    .home-badge__icon {
        width: 32px;
        height: 32px;
        border-radius: 9px;
    }

    .home-badge__title {
        font-size: 11px;
        line-height: 1.5;
    }

    /* Two-up tiles have no room for a second line. */
    .home-badge__desc {
        display: none;
    }

    /* ── Licences ──────────────────────────────────────────────────────────── */
    .home-licences {
        gap: 10px;
        padding: 12px;
        border-radius: 12px;
    }

    .home-licences__label {
        display: none;
    }

    .home-licences__tiles {
        gap: 10px;
        width: 100%;
        flex-wrap: nowrap;
    }

    .home-licence-tile {
        flex: 1;
        width: auto;
        height: 48px;
        border-radius: 7px;
    }
}

/* Between tablet and desktop the five-across trust rows are too tight, and the
   hero's two columns leave the headline three words wide. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .home-page {
        padding-inline: 24px;
    }

    .home-hero__slide {
        padding: 0 36px;
        gap: 28px;
    }

    .home-hero__title {
        font-size: 32px;
    }

    .home-badges {
        grid-template-columns: repeat(3, 1fr);
    }
}