/* ===================================================================
   THE COMPOSED HOMEPAGE — REFERENCE A.

   WHAT THIS FILE IS. The visual layer of the front page, and only the
   front page: it is linked from home/index.blade.php's own
   @push('styles'), so no other page pays for it and no other page is
   changed by it. app.css is a 393KB built artefact and this server has
   no build tooling, so corrections live beside it rather than inside
   it — the same pattern brand.css, cart.css and product-page.css
   already use.

   WHAT IT IS NOT. It is not a second brand. Every colour, radius and
   weight below is the one already shipped across the modern Gidoroo
   surfaces — the product page, the membership pages, the account
   dashboard, the storefront header and footer: white and navy with a
   violet accent, hairline borders, rounded geometry, one loud call to
   action per band. The homepage was the last surface still wearing the
   vendor theme's chrome (a grey rule with a coloured tab under every
   heading, square art, 50px of air between every band). This file
   brings it into line; it invents nothing new.

   IT STYLES, IT NEVER DECIDES. Which sections exist and in what order
   is home_blocks.is_active and home_blocks.position, resolved once by
   HomePageComposition. Nothing here can show a block the Builder
   disabled or hide one it enabled — every rule below keys on a class
   the block templates already emit.

   THE ONE THING IT REACHES OUTSIDE THE STREAM is the category rail:
   .category-menu-wrapper.visible. That expanded state is produced by
   LayoutComposer for `request()->routeIs('home')` and exists on no
   other route, so styling it here is exactly as page-scoped as the
   rest of the file.

   The source under Themes/Cynoebook/assets/ and the published copy
   under public/themes/cynoebook/ are byte-identical; `cmp` proves it.
   =================================================================== */

/* --- tokens -------------------------------------------------------
   Declared here rather than hardcoded forty times, and deliberately
   the SAME values the rest of the site already uses. Every text pair
   below clears WCAG AA on its own background: #656c73 on white is
   5.3:1, #7c3aed on white is 5.7:1, white on #7c3aed is 5.7:1, and
   the navy is far past it. */

:root {
    --hb-navy: #1e2749;
    --hb-ink: #2a2f36;
    --hb-body: #4a5058;
    --hb-muted: #656c73;

    --hb-violet: #7c3aed;
    --hb-violet-dark: #6d28d9;
    --hb-violet-soft: #f5f3ff;
    --hb-violet-line: #ded4fb;

    --hb-border: #e6e8f0;
    --hb-line: #eef0f6;
    --hb-surface: #ffffff;
    --hb-canvas: #f8f9fc;

    --hb-radius: 12px;
    --hb-radius-lg: 16px;
    --hb-radius-pill: 999px;

    --hb-gap: 20px;
    --hb-gutter: 15px;

    --hb-shadow-sm: 0 1px 2px rgba(30, 39, 73, .05);
    --hb-shadow: 0 1px 2px rgba(30, 39, 73, .04), 0 8px 24px rgba(30, 39, 73, .07);
    --hb-shadow-lg: 0 12px 34px rgba(30, 39, 73, .12);

    --hb-speed: 140ms;
}

/* ===================================================================
   1. SECTION RHYTHM

   Reference A is a DENSER page than the theme shipped. The vendor puts
   50px above every band and nothing below, which on a young catalogue
   turns three sections into a very tall, very empty page. 44px reads
   as a deliberate rhythm at desktop and 32px at phone widths, and the
   hero keeps its own top edge tight to the navigation.
   =================================================================== */

.hb-block,
.hb-block.section-wrapper,
.hb-block.ebook-slider-wrapper,
.hb-block.category-tab {
    margin-top: 44px;
}

.hb-block.hb-hero {
    margin-top: 0;
}

/* The last band before the newsletter/footer should not collide with
   it; the vendor gives no bottom margin at all. */
.hb-block:last-child {
    margin-bottom: 8px;
}

@media screen and (max-width: 767px) {
    .hb-block,
    .hb-block.section-wrapper,
    .hb-block.ebook-slider-wrapper,
    .hb-block.category-tab {
        margin-top: 32px;
    }
}

/* ===================================================================
   2. THE BLOCK HEADING

   One heading treatment for every band: navy, 22px, no ornament, with
   the "view all" link pushed to the far end and the subheading on its
   own line beneath. The vendor draws a full-width grey rule with a
   two-pixel coloured tab under the title, which reads as a tab strip
   rather than a heading.

   THE CLEARFIX PSEUDO-ELEMENTS ARE SWITCHED OFF DELIBERATELY. The
   templates carry `clearfix`, whose ::before/::after are display:table
   — as flex children they would each take a gap, adding 32px of empty
   space inside every heading row.
   =================================================================== */

.hb-block .hb-header,
.theme-black .hb-block .hb-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    margin: 0 var(--hb-gutter) 20px;
    padding: 0 0 12px;
    border-top: 0;
    border-bottom: 1px solid var(--hb-line);
}

.hb-block .hb-header::before,
.hb-block .hb-header::after {
    display: none;
}

.hb-block .hb-header h3,
.theme-black .hb-block .hb-header h3 {
    float: none !important;
    display: block;
    margin: 0;
    padding: 0;
    border: 0 !important;
    color: var(--hb-navy);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.01em;
}

.hb-block .hb-header .hb-view-all {
    float: none !important;
    margin: 0 0 0 auto;
    padding: 6px 0;
    color: var(--hb-violet);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    transition: color var(--hb-speed) ease;
}

.hb-block .hb-header .hb-view-all:hover,
.hb-block .hb-header .hb-view-all:focus {
    color: var(--hb-violet-dark);
    text-decoration: none;
}

.hb-header .hb-view-all i { margin: 0 0 0 4px; }

.hb-block .hb-header .hb-subheading {
    flex: 1 0 100%;
    order: 3;
    clear: none;
    margin: 0;
    color: var(--hb-muted);
    font-size: 14px;
    line-height: 1.55;
}

/* RTL: the link goes to the other end, and the arrow points the other
   way. Both are single overrides rather than a mirrored stylesheet.

   KEYED ON body.rtl, NOT [dir="rtl"]. This theme never emits a `dir`
   attribute: public/layout.blade.php writes <html lang="en"> and marks
   direction with a class on <body> (and by swapping in app.rtl.css).
   Six rules written against [dir="rtl"] would have matched nothing —
   worst of all the two hero and promo scrims, which would have kept
   their dark end on the left while the caption sat on the right,
   putting white text over the transparent end of the gradient. */
body.rtl .hb-block .hb-header .hb-view-all { margin: 0 auto 0 0; }
body.rtl .hb-header .hb-view-all i { margin: 0 4px 0 0; transform: scaleX(-1); }

@media screen and (max-width: 767px) {
    .hb-block .hb-header h3 { font-size: 19px; }
}

/* ===================================================================
   3. THE HERO

   The slider's CONTENT is Modules\Slider's; this only frames it —
   rounded, lifted off the page, with arrows that are real 44px targets
   instead of the vendor's 20px transparent glyphs.

   THE SCRIM IS CONDITIONAL, and that is the point. A slide with no
   caption and no call to action is pure artwork, and darkening it
   would be damaging a picture to help text that is not there. The
   template marks only the slides that actually carry copy, and only
   those get the gradient that makes the copy legible.
   =================================================================== */

.hb-hero .home-slider {
    border-radius: var(--hb-radius-lg);
    box-shadow: var(--hb-shadow);
    overflow: hidden;
}

.hb-hero .home-slider .slider-content { height: 400px; }

.hb-hero .hb-slide-copy .slider-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(18, 24, 46, .78) 0%, rgba(18, 24, 46, .48) 46%, rgba(18, 24, 46, .06) 100%);
}

body.rtl .hb-hero .hb-slide-copy .slider-image::after {
    background: linear-gradient(270deg, rgba(18, 24, 46, .78) 0%, rgba(18, 24, 46, .48) 46%, rgba(18, 24, 46, .06) 100%);
}

.hb-hero .slider-content .caption-lg {
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.15;
}

.hb-hero .slider-content .btn-slider {
    border-radius: var(--hb-radius-pill);
    padding: 12px 26px;
    font-weight: 600;
    box-shadow: var(--hb-shadow-sm);
}

.hb-hero .slick-prev,
.hb-hero .slick-next {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    box-shadow: var(--hb-shadow);
    transition: background var(--hb-speed) ease, transform var(--hb-speed) ease;
    z-index: 2;
}

.hb-hero .slick-prev:hover,
.hb-hero .slick-next:hover,
.hb-hero .slick-prev:focus,
.hb-hero .slick-next:focus {
    background: #fff;
    transform: translateY(-50%) scale(1.04);
}

.hb-hero .slick-prev::before,
.hb-hero .slick-next::before {
    color: var(--hb-navy);
    opacity: .95;
}

@media screen and (max-width: 991px) {
    .hb-hero .home-slider .slider-content { height: 320px; }
}

@media screen and (max-width: 767px) {
    .hb-hero .home-slider { border-radius: var(--hb-radius); }
    .hb-hero .home-slider .slider-content { height: 230px; }

    /* THE PHONE BAND TAKES THE PICTURES' OWN SHAPE. A 345px-wide band 230px
       high is far taller in proportion than a 1920×700 banner; "cover"
       blew the picture up to fill it and showed only its middle third,
       cut off at both sides. The template measures the slides and hands
       the ratio over as --hb-hero-ratio; with it, every slide is as tall
       as the picture needs and no taller, and the fixed height above is
       only the fallback for a picture that could not be measured. The
       inner content box goes to auto so it stops dictating the height,
       and keeps a floor so a slide that carries a caption still has room
       for it. */
    .hb-hero[style*="--hb-hero-ratio"] .home-slider .slide {
        aspect-ratio: var(--hb-hero-ratio);
    }
    .hb-hero[style*="--hb-hero-ratio"] .home-slider .slider-content {
        height: auto;
        min-height: 0;
    }
    .hb-hero[style*="--hb-hero-ratio"] .hb-slide-copy .slider-content {
        min-height: 160px;
    }
    .hb-hero .slick-prev,
    .hb-hero .slick-next { width: 38px; height: 38px; }
}

/* ===================================================================
   4. THE CATEGORY RAIL

   Reference A puts category discovery beside the hero rather than
   behind a menu, which is what LayoutComposer's expanded state already
   does on `/`. What it lacked was any card treatment: the vendor draws
   a bare white box with a hard 415px height, a per-item bottom border
   and a rule that removes the ninth one — geometry written for exactly
   the demo's nine categories.

   HEIGHT BECOMES CONTENT. `height: auto` is not decoration: a curated
   menu shorter than 415px currently ends in dead white space, and one
   longer than 415px is simply cut off.

   NO overflow HERE, ON PURPOSE. The sub-category flyouts are absolutely
   positioned children of these rows; any scroll container would clip
   them.
   =================================================================== */

/* THE "ALL CATEGORIES" CONTROL IS NOT TOUCHED, DELIBERATELY. It is a
   navigation item of the global storefront header, styled in brand.css
   with the same size, weight and violet hover as every other item in
   that row. Giving it a filled bar here would fork the header on one
   page — which is exactly the separate homepage brand this work is
   under instruction not to create. The panel BELOW it is the
   homepage's, and is the only thing restyled. */

.category-menu-wrapper.visible > .vertical-mega-menu,
.theme-black .category-menu-wrapper.visible > .vertical-mega-menu {
    height: auto;
    min-height: 0;
    padding: 8px 0;
    border-width: 1px;
    border-color: var(--hb-border);
    border-radius: var(--hb-radius);
    box-shadow: var(--hb-shadow);
}

.category-menu-wrapper.visible > .vertical-mega-menu > li {
    padding: 0 8px;
}

.category-menu-wrapper.visible > .vertical-mega-menu > li > a {
    display: block;
    padding: 11px 12px;
    border-bottom: 0 !important;
    border-radius: 8px;
    color: var(--hb-ink);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    transition: background var(--hb-speed) ease, color var(--hb-speed) ease;
}

.category-menu-wrapper.visible > .vertical-mega-menu > li > a:hover,
.category-menu-wrapper.visible > .vertical-mega-menu > li > a:focus {
    background: var(--hb-violet-soft);
    color: var(--hb-violet-dark);
    text-decoration: none;
}

/* ===================================================================
   5. EBOOK BANDS

   ONE card everywhere — the Phase-1 .gd-dc-card, with its access line,
   its price and its badge decided by the same services the catalogue
   and the product page use. Nothing here restyles the card; these
   rules place it.

   WHY A FLEX TRACK AND NOT A 4-COLUMN GRID. The catalogue is young.
   A fixed four-column grid draws one book at a quarter width with
   three empty cells beside it — a band that reads as broken rather
   than as new. The cells grow to fill whatever row they are given and
   stop at 270px.

   AND WHY IT IS CENTRED, ALWAYS. How many fit in a row is the
   viewport's answer, not a number written anywhere: five at the widest
   desktop, four on a small laptop, two on a phone. The last row is
   therefore ragged at most counts, and a ragged row against the left
   edge is the marooned card this track exists to stop — six books
   would draw five, then one alone on a 1110px row. A full row has no
   free space to distribute, so centring costs it nothing; a partial
   row reads as deliberate. No record is invented to fill a gap.
   =================================================================== */

.hb-ebook-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px var(--hb-gap);
    margin: 0 var(--hb-gutter);
    padding: 0;
}

.hb-ebook-cell {
    flex: 1 1 200px;
    min-width: 0;
    max-width: 270px;
}

@media screen and (max-width: 600px) {
    .hb-ebook-grid { gap: 18px 14px; }
    .hb-ebook-cell { flex-basis: 140px; max-width: none; }
}

/* The carousel band keeps slick — the class names are app.js's
   contract — and only gains the same gutter the grid uses. */
.hb-block .ebook-slider .col-md-3,
.hb-block .tab-ebook-slider .col-md-3 {
    padding: 0 10px;
}

.hb-block .ebook-slider,
.hb-block .tab-ebook-slider {
    margin: 0 5px;
}

/* ===================================================================
   6. CATEGORY TABS

   The tab strip is part of the heading row, so it inherits the flex
   header above and only needs its own pill treatment.
   =================================================================== */

.hb-category-tabs .hb-header .nav-tabs {
    float: none !important;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 0 auto;
    padding: 0;
    border: 0;
}

body.rtl .hb-category-tabs .hb-header .nav-tabs { margin: 0 auto 0 0; }

.hb-category-tabs .hb-header .nav-tabs > li { float: none; margin: 0; }

.hb-category-tabs .hb-header .nav-tabs > li > a {
    margin: 0;
    padding: 7px 14px;
    border: 1px solid transparent !important;
    border-radius: var(--hb-radius-pill);
    background: transparent;
    color: var(--hb-muted);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    transition: background var(--hb-speed) ease, color var(--hb-speed) ease;
}

.hb-category-tabs .hb-header .nav-tabs > li > a:hover,
.hb-category-tabs .hb-header .nav-tabs > li > a:focus {
    background: var(--hb-violet-soft);
    color: var(--hb-violet-dark);
}

.hb-category-tabs .hb-header .nav-tabs > li.active > a,
.hb-category-tabs .hb-header .nav-tabs > li.active > a:hover,
.hb-category-tabs .hb-header .nav-tabs > li.active > a:focus {
    background: var(--hb-violet);
    border-color: var(--hb-violet) !important;
    color: #fff;
}

/* ===================================================================
   7. BROWSE BY CATEGORY
   =================================================================== */

.hb-category-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 0 var(--hb-gutter);
}

@media (min-width: 768px) {
    .hb-category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
    .hb-category-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.hb-category-tile {
    position: relative;
    display: block;
    padding: 18px 16px;
    border: 1px solid var(--hb-border);
    border-radius: var(--hb-radius);
    background: var(--hb-surface);
    text-decoration: none;
    overflow: hidden;
    transition: box-shadow var(--hb-speed) ease, border-color var(--hb-speed) ease, transform var(--hb-speed) ease;
}

.hb-category-tile::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-start: 0;
    width: 3px;
    background: var(--hb-violet);
    opacity: 0;
    transition: opacity var(--hb-speed) ease;
}

.hb-category-tile:hover,
.hb-category-tile:focus {
    border-color: var(--hb-violet-line);
    box-shadow: var(--hb-shadow);
    transform: translateY(-1px);
    text-decoration: none;
}

.hb-category-tile:hover::before,
.hb-category-tile:focus::before { opacity: 1; }

.hb-category-name {
    display: block;
    color: var(--hb-navy);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    word-break: break-word;
}

.hb-category-count {
    display: block;
    margin-top: 5px;
    color: var(--hb-muted);
    font-size: 12px;
}

/* ===================================================================
   8. PROMO / CATEGORY SHOWCASE

   One reusable band, whatever it is advertising. The vendor's .overlay
   is a white hover wash, not a scrim, so copy sits directly on the
   artwork and its legibility depends on the picture. The gradient
   below is what makes white text readable over any upload; the wash
   is kept for its hover feel and softened so it cannot grey out the
   text underneath.
   =================================================================== */

.hb-promo-banner {
    position: relative;
    display: block;
    margin: 0 var(--hb-gutter);
    border-radius: var(--hb-radius-lg);
    min-height: 280px;
    overflow: hidden;
}

.hb-promo-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(18, 24, 46, .84) 0%, rgba(18, 24, 46, .55) 48%, rgba(18, 24, 46, .12) 100%);
    z-index: 0;
}

body.rtl .hb-promo-banner::before {
    background: linear-gradient(270deg, rgba(18, 24, 46, .84) 0%, rgba(18, 24, 46, .55) 48%, rgba(18, 24, 46, .12) 100%);
}

.hb-promo-banner .overlay { background: hsla(0, 0%, 100%, .12); }

.hb-promo-banner .display-table { position: relative; z-index: 1; }

.hb-promo-banner .banner-content {
    max-width: 560px;
    margin: 0;
    padding: 36px 40px;
}

.hb-promo-banner .banner-content > h2 {
    margin: 0;
    color: #fff;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.015em;
}

.hb-promo-banner .banner-content > p {
    margin-top: 10px;
    max-width: 44ch;
    color: rgba(255, 255, 255, .9);
    font-size: 15px;
    line-height: 1.6;
}

.hb-promo-banner .banner-content > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    padding: 11px 22px;
    border-radius: var(--hb-radius-pill);
    background: #fff;
    color: var(--hb-violet-dark);
    font-size: 14px;
    font-weight: 600;
}

.hb-promo-banner:hover .banner-content > span { background: var(--hb-violet-soft); }

body.rtl .hb-promo-banner .banner-content > span i { transform: scaleX(-1); }

@media screen and (max-width: 767px) {
    .hb-promo-banner { min-height: 220px; border-radius: var(--hb-radius); }
    .hb-promo-banner .banner-content { padding: 26px 22px; }
    .hb-promo-banner .banner-content > h2 { font-size: 24px; }
}

/* A banner with no configured link is a <div>, not a dead anchor, so
   it needs the same box and an honest cursor. */
div.hb-promo-banner { cursor: default; }

/* ===================================================================
   9. TRUST STRIP
   =================================================================== */

.hb-trust-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding: 0 var(--hb-gutter);
}

@media (min-width: 768px) {
    .hb-trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
    .hb-trust-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.hb-trust-item {
    padding: 22px 20px;
    border: 1px solid var(--hb-border);
    border-radius: var(--hb-radius);
    background: var(--hb-surface);
}

.hb-trust-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: var(--hb-violet-soft);
    color: var(--hb-violet-dark);
    font-size: 18px;
}

.hb-trust-title {
    margin: 0 0 5px;
    color: var(--hb-navy);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
}

.hb-trust-text {
    margin: 0;
    color: var(--hb-muted);
    font-size: 13px;
    line-height: 1.55;
}

/* ===================================================================
   10. THE TWO COPY BANDS
   =================================================================== */

.hb-text-cta-inner,
.hb-seller-cta-inner {
    margin: 0 var(--hb-gutter);
    padding: 30px 28px;
    border: 1px solid var(--hb-border);
    border-radius: var(--hb-radius-lg);
    background: linear-gradient(180deg, var(--hb-violet-soft) 0%, var(--hb-canvas) 100%);
}

.hb-seller-cta-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 26px;
}

.hb-seller-cta-media { flex: 0 0 auto; max-width: 170px; }

.hb-seller-cta-media img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: var(--hb-radius);
}

.hb-seller-cta-copy { flex: 1 1 260px; min-width: 0; }

.hb-text-cta-heading,
.hb-seller-cta-heading {
    margin: 0 0 8px;
    color: var(--hb-navy);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.01em;
}

.hb-text-cta-body,
.hb-seller-cta-body {
    margin: 0 0 18px;
    max-width: 68ch;
    color: var(--hb-body);
    font-size: 15px;
    line-height: 1.65;
    /* Admin-authored copy is escaped, never parsed as markup — so a
       long unbroken string must wrap rather than widen the page. */
    overflow-wrap: break-word;
}

.hb-text-cta-btn,
.hb-seller-cta-btn {
    margin: 0;
    padding: 12px 26px;
    border-radius: var(--hb-radius-pill);
    font-weight: 600;
}

/* ===================================================================
   11. PEOPLE BANDS

   The author and account cards are shared partials used on their own
   index pages too, so they are NOT restyled here — these rules place
   them and lift the vendor's cream tile onto the same white surface
   as everything else on this page.
   =================================================================== */

.hb-top-authors .our-author,
.hb-top-users .our-author {
    margin-bottom: var(--hb-gap);
    border: 1px solid var(--hb-border);
    border-radius: var(--hb-radius-lg);
    background-color: var(--hb-surface);
    box-shadow: var(--hb-shadow-sm);
    transition: box-shadow var(--hb-speed) ease, transform var(--hb-speed) ease;
}

.hb-top-authors .our-author:hover,
.hb-top-users .our-author:hover {
    box-shadow: var(--hb-shadow);
    transform: translateY(-2px);
}

.hb-top-authors .our-author .name a,
.hb-top-users .our-author .name a { color: var(--hb-navy); }

.hb-top-authors .our-author .total,
.hb-top-users .our-author .total { color: var(--hb-muted); }

.hb-top-authors .m-t-20,
.hb-top-users .m-t-20 { margin-top: 0 !important; }

/* ===================================================================
   12. READER MEMBERSHIP

   FOUR DECLARATIONS, AND THAT IS THE WHOLE POINT. The band renders the
   canonical plan-cards component — the same one /membership renders —
   so the card, the billing selector, the ribbon, the trial wording, the
   Stripe line, and "three across, two on a tablet, one on a phone with
   a scroll track beyond that" all arrive already decided, in brand.css,
   from the surface that owns them.

   This block used to carry its own flex row here, which was a second
   opinion about the same geometry. What is left is placement: the gutter
   the rest of this page uses, and the selector centred because the band
   has no heading beside it to sit opposite.
   =================================================================== */

.hb-membership-plans { margin: 0 var(--hb-gutter); }

/* No heading in the bar — the band's own header is above it — so the
   canonical space-between has nothing to push against. */
.hb-membership .gd-rm-plans-bar {
    justify-content: center;
    margin: 0 0 20px;
}

/* ===================================================================
   THE RAIL AND THE HERO SHARE ONE EDGE — homepage only.

   The category panel is an absolutely positioned dropdown hanging from
   the navbar; the hero is a normal-flow column inside the content
   container. Two reference boxes, two widths (the header container is
   1320px wide at >=1200px, the content container 1170px), so their
   edges never met: a white gap of roughly 90px beside the rail on wide
   screens, the rail starting 16px above the slider, and a rail whose
   height followed its contents while the slider stood at 400px.

   Scoped by .category-menu-wrapper.visible (which exists only on the
   homepage) and by :has(.hb-hero) for the container, so no other page's
   line lengths or layout change. Where :has() is not understood the
   rule is skipped and the page is exactly as it was.
   =================================================================== */
@media (min-width: 992px) {
    .category-menu-wrapper.visible > .vertical-mega-menu {
        /* 20px nav margin + 1px border − 5px vendor slider margin */
        top: calc(100% + 16px);
        margin-top: 0;
        min-height: 400px;
    }

    /* The vendor's -8px slider margin broke the gutter symmetry the rail
       is now aligned to. */
    .hb-hero.col-md-offset-3 .home-slider { margin-left: 0; }
    body.rtl .hb-hero.col-md-offset-3 .home-slider { margin-right: 0; margin-left: 0; }
}

@media (min-width: 1200px) {
    .content-wrapper .container:has(.hb-hero) {
        width: min(1320px, 100%);
        max-width: 1320px;
    }
}