/* ==========================================================================
   Nile Market Place — public brochure site
   Loaded AFTER theme.css and reuses its CSS variables (--ms-primary, --ms-gold,
   --ms-pink, --ms-shadow-lg, …). Nothing here touches the panel shell.
   ========================================================================== */

/* ==========================================================================
   PUBLIC STOREFRONT PALETTE  (marketplace blue + warm amber)
   --------------------------------------------------------------------------
   Scoped to `body.site` ON PURPOSE. theme.css owns the --ms-* palette and is
   shared by the member panel, the admin panel and this site; it must not be
   edited. The public layout is the only one that puts `class="site"` on
   <body> (resources/views/site/layouts/app.blade.php), so redefining the
   tokens here repaints the storefront and leaves both panels on the original
   navy/green. Nothing in this file may target .ms-sidebar / .msu-* / admin
   markup — and site.css + catalog.css are loaded by the public layout only.

   Two blues, deliberately:
     --ms-primary  is the FILL blue  (buttons, bands, active chips)
     --site-ink    is the TEXT blue  (links, prices, headings, icons)
   In light mode they are the same value (#1A5CD0) because it clears 4.5:1
   both ways. In dark mode they must diverge: a fill needs to stay dark
   enough for white labels, while text needs to be light enough to read on a
   dark card. Every token below has a dark counterpart further down.

   Contrast (WCAG 2.1, sRGB):
     #1A5CD0 on #FFFFFF ........ 6.03:1   body text, links, prices      AA
     #1A5CD0 on #F1F3F6 ........ 5.42:1   the same on the page wash     AA
     #FFFFFF on #1A5CD0 ........ 6.03:1   primary button label          AA
     #1F2733 on #FFFFFF ........ 15.0:1   body copy                     AAA
     #5B6478 on #FFFFFF ........ 5.93:1   muted copy                    AA
     #5B6478 on #F1F3F6 ........ 5.34:1   muted copy on the page wash   AA
     #3A2400 on #FF9F00 ........ 7.13:1   text on the amber band        AA
     #3A2400 on #FFB627 ........ 8.36:1   text on the amber band (top)  AA
     #3A2400 on #FB7B1E ........ 5.55:1   text on the amber band (deep) AA
     #FFFFFF on #C1440E ........ 5.12:1   "OFF" pill label              AA
     #A03D00 on #FFFFFF ........ 6.64:1   discount figure as text       AA
     #E9C46A on #1349A0 ........ 5.05:1   gold figure on the deep band  AA
     #FFFFFF on #1349A0 ........ 8.44:1   copy on the deep blue band    AA
     #FFFFFF (.68) on #0A2540 .. 7.84:1   footer links                  AA
   Flipkart's own #2874F0 is only 4.33:1 on white, so it is NEVER used for
   text here — it survives as --site-blue-bright, for gradient stops and
   focus rings, where nothing has to be read against it.
   ========================================================================== */

body.site {
    /* --- shared tokens, repainted for the storefront ---------------- */
    --ms-primary:     #1A5CD0;   /* fill blue */
    --ms-primary-600: #1653BC;
    --ms-primary-700: #103F94;
    --ms-accent:      #1A5CD0;
    --ms-accent-soft: rgba(26, 92, 208, .10);

    /* The "deal" colour. Was the brand pink; a saffron-red keeps the
       discount cues in the warm family the reference uses and still
       carries white text at 5.12:1. */
    --ms-pink:        #C1440E;

    --ms-body-bg:     #F1F3F6;   /* very light grey-blue page wash */
    --ms-card-bg:     #FFFFFF;
    --ms-surface-2:   #EDF1F7;
    --ms-border:      #DDE2EA;
    --ms-text:        #1F2733;
    --ms-muted:       #5B6478;   /* darkened from #7D879C, which was 3.6:1 */

    --ms-shadow:      0 1px 3px rgba(20, 33, 61, .10);
    --ms-shadow-lg:   0 8px 24px rgba(20, 33, 61, .16);

    /* --- storefront-only tokens ------------------------------------- */
    --site-ink:         #1A5CD0;   /* brand blue AS TEXT */
    --site-ink-strong:  #103F94;
    --site-blue-bright: #2874F0;   /* decorative fills / rings only */

    /* warm secondary — the header band and the offer accents */
    --site-warm:        #FF9F00;
    --site-warm-deep:   #FB7B1E;
    --site-warm-light:  #FFB627;
    --site-on-warm:     #3A2400;   /* the only text colour used on amber */
    --site-warm-ink:    #A03D00;   /* warm accent as text on white */
    --site-on-deal:     #FFFFFF;   /* label on a filled --ms-pink pill */

    /* deep blue used by the brand bands that were deep green */
    --site-deep-1:      #06294F;
    --site-deep-2:      #0B3D7A;
    --site-deep-3:      #1349A0;
    --site-footer-bg:   #0A2540;

    /* brand-blue washes, one per alpha step the file already used */
    --site-tint-6:      rgba(26, 92, 208, .06);
    --site-tint-8:      rgba(26, 92, 208, .09);
    --site-tint-12:     rgba(26, 92, 208, .13);
    --site-tint-28:     rgba(26, 92, 208, .30);
    --site-deal-tint:   rgba(193, 68, 14, .12);
    /* gold stays a brand colour; only its INK has to move between modes */
    --site-gold-ink:    #6B5416;
    /* the veil over a sold-out card — must invert with the theme, or its
       label would sit on a white slab in dark mode */
    --site-scrim:       rgba(255, 255, 255, .78);

    /* neutral wells: zebra stripes, input wells, image mats */
    --site-stripe:      #F7F9FC;
    --site-well:        #F1F3F6;

    /* white chip sitting on the warm band (search pill, header buttons) */
    --site-chip-bg:     #FFFFFF;
    --site-chip-ink:    #1A5CD0;

    /* One card language for the whole storefront (moved here from the
       :root block further down so light and dark are stated together). */
    --site-card-bg:       var(--ms-card-bg);
    --site-card-border:   var(--ms-border);
    --site-card-shadow:   var(--ms-shadow);
    --site-card-shadow-h: var(--ms-shadow-lg);
    --site-card-hover:    var(--site-tint-28);
    --site-band:          #E7EDF7;

    background: var(--ms-body-bg);
    color: var(--ms-text);
}

/* Dark mode. `:root[data-theme="dark"] body.site` is (0,3,0) so it beats the
   (0,2,0) block above, and it still cannot reach a panel page because no
   panel <body> carries .site. Every token redefined above is redefined here —
   nothing is left with a light-only value. Ratios against the dark card
   (#18202F) / page (#0E1420):
     #E6EAF2 text .......... 13.5:1     #A6B0C2 muted ......... 7.47:1
     #7FB1FF ink ...........  7.49:1    #FFFFFF on #2D6FE0 .... 4.71:1
     #FFB077 warm ink ......  9.12:1    #2A1800 on #FFB454 .... 9.69:1
     #2A1800 on #FF8A5B ....  7.35:1                                     */
:root[data-theme="dark"] body.site {
    --ms-primary:     #2D6FE0;
    --ms-primary-600: #3B7DE8;
    --ms-primary-700: #1E5AC4;
    --ms-accent:      #7FB1FF;
    --ms-accent-soft: rgba(127, 177, 255, .16);

    --ms-pink:        #FF8A5B;

    --ms-body-bg:     #0E1420;
    --ms-card-bg:     #18202F;
    --ms-surface-2:   #212B3D;
    --ms-border:      #2C3648;
    --ms-text:        #E6EAF2;
    --ms-muted:       #A6B0C2;

    --ms-shadow:      0 1px 3px rgba(0, 0, 0, .5);
    --ms-shadow-lg:   0 12px 32px rgba(0, 0, 0, .62);

    --site-ink:         #7FB1FF;
    --site-ink-strong:  #A8C8FF;
    --site-blue-bright: #4A8CFF;

    --site-warm:        #FFB454;
    --site-warm-deep:   #F59433;
    --site-warm-light:  #FFC978;
    --site-on-warm:     #2A1800;
    --site-warm-ink:    #FFB077;
    --site-on-deal:     #2A1800;   /* the dark-mode deal fill is light */

    --site-deep-1:      #050F1E;
    --site-deep-2:      #0B2544;
    --site-deep-3:      #12386B;
    --site-footer-bg:   #070E19;

    --site-tint-6:      rgba(127, 177, 255, .08);
    --site-tint-8:      rgba(127, 177, 255, .12);
    --site-tint-12:     rgba(127, 177, 255, .18);
    --site-tint-28:     rgba(127, 177, 255, .40);
    --site-deal-tint:   rgba(255, 138, 91, .16);
    --site-gold-ink:    #F0D48A;
    --site-scrim:       rgba(14, 20, 32, .80);

    --site-stripe:      #141C2B;
    --site-well:        #212B3D;

    --site-chip-bg:     #18202F;
    --site-chip-ink:    #7FB1FF;

    --site-card-bg:       var(--ms-card-bg);
    --site-card-border:   var(--ms-border);
    --site-card-shadow:   var(--ms-shadow);
    --site-card-shadow-h: var(--ms-shadow-lg);
    --site-card-hover:    var(--site-tint-28);
    --site-band:          #141C2B;
}

/* One keyboard-focus ring for the whole storefront. This is the one place
   the bright Flipkart-family blue earns its keep: nothing is READ against
   it, so 4.33:1 on the page wash is comfortably over the 3:1 a non-text
   affordance needs. Controls on the amber band state their own ring
   (--site-on-warm) because blue on amber is only 2.7:1; those selectors are
   more specific, so they win. */
body.site :focus-visible {
    outline: 3px solid var(--site-blue-bright);
    outline-offset: 2px;
}

.site-anchor { scroll-margin-top: 120px; }
html { scroll-behavior: smooth; }

/* ---------------------------------------------------------- announcement */

/* The announcement strip is the top of the warm band the reference shows
   behind the whole header area, so it carries the deep end of the gradient
   and .site-header continues it. Text on amber is ALWAYS --site-on-warm:
   white would be 2.1:1 here, while #3A2400 is 5.55:1 on the deepest stop
   and 8.36:1 on the lightest. */
.site-ticker {
    background: linear-gradient(90deg, var(--site-warm-deep) 0%, var(--site-warm) 60%, var(--site-warm-light) 100%);
    color: var(--site-on-warm);
    font-size: .78rem;
    padding: .4rem 0;
    overflow: hidden;
}
.site-ticker a { color: var(--site-on-warm); }
.site-ticker a:hover { color: var(--site-on-warm); text-decoration: underline; }
.site-ticker__viewport { overflow: hidden; position: relative; flex: 1 1 auto; min-width: 0; }
.site-ticker__track {
    display: inline-flex;
    gap: 3rem;
    white-space: nowrap;
    padding-left: 100%;
    animation: ms-ticker 28s linear infinite;
}
.site-ticker:hover .site-ticker__track { animation-play-state: paused; }
.site-ticker__track b { color: var(--site-on-warm); font-weight: 800; }
.site-ticker__meta { white-space: nowrap; font-weight: 600; }
.site-ticker__meta i { color: var(--site-on-warm); }

@keyframes ms-ticker {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
    .site-ticker__track { animation: none; padding-left: 0; }
}

/* Warm band behind the top area, exactly as in the reference: the ticker
   above hands the gradient over and the brand row continues it. The second
   row (.site-header__nav) drops back to the card surface further down, so
   the blue active-link cue has a background it can legally sit on — blue on
   amber is only 2.7:1 and could never carry nav-sized text. */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: linear-gradient(180deg, var(--site-warm) 0%, var(--site-warm-light) 100%);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--ms-border);
    transition: box-shadow .2s ease, padding .2s ease;
}
.site-header.is-stuck { box-shadow: 0 4px 20px rgba(20, 33, 61, .18); }
.site-header .navbar-brand { display: flex; align-items: center; gap: .6rem; font-weight: 800; color: var(--site-on-warm); }
.site-header .navbar-brand img { height: 44px; width: auto; }
/* --ms-muted is 3.4:1 on amber, so the tagline takes the band's own ink. */
.site-header .navbar-brand small { display: block; font-size: .62rem; font-weight: 600; color: var(--site-on-warm); letter-spacing: .3px; }
.site-header .nav-link { font-weight: 600; font-size: .88rem; color: var(--ms-text); padding: .5rem .9rem; border-radius: 8px; }
.site-header .nav-link:hover { color: var(--site-ink); background: var(--site-tint-6); }
.site-header .nav-link.active { color: var(--site-ink); }

.site-offcanvas .offcanvas-header { border-bottom: 1px solid var(--ms-border); }

/* The offcanvas sits OUTSIDE <header> (see the note in the Blade), so every
   `.site-header .navbar-brand img` rule misses it and the logo rendered at its
   natural size — full width of the drawer. Size it here to match the header. */
.site-offcanvas .navbar-brand {
    display: flex; align-items: center; gap: .55rem;
    font-weight: 800; color: var(--site-ink);
    min-width: 0; margin-right: 0;
}
.site-offcanvas .navbar-brand img {
    height: 40px; width: auto; max-width: 40px;
    object-fit: contain; flex: 0 0 auto;
}
.site-offcanvas .navbar-brand span {
    font-size: .95rem; line-height: 1.2;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.site-offcanvas { background: var(--ms-card-bg); color: var(--ms-text); }
/* The drawer sits outside <header>, so the header nav rules miss it and its
   links fell back to the Bootstrap link blue (#0D6EFD, 3.7:1 on white).
   Stating them here puts the drawer on the same pair as the desktop nav. */
.site-offcanvas .nav-link { padding: .65rem .25rem; border-bottom: 1px solid var(--ms-border); border-radius: 0; color: var(--ms-text); font-weight: 600; }
.site-offcanvas .nav-link:hover { color: var(--site-ink); }
.site-offcanvas .nav-link.active { color: var(--site-ink); }

/* ---------------------------------------------------------------- hero */

.site-hero { position: relative; }
.site-hero .carousel-item { height: 560px; }
.site-hero__slide {
    position: relative;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
}
.site-hero__slide::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(4, 18, 36, .94) 0%, rgba(6, 41, 79, .82) 45%, rgba(6, 41, 79, .35) 100%);
}
.site-hero__inner { position: relative; z-index: 2; color: #fff; max-width: 660px; padding: 2rem 0; }

/* ---- hero: artwork only, no text laid over it -------------------------
   Owner's call 2026-08-26. Every slide's artwork already carries its own
   headline and offer, so the badge/heading/subtitle rendered on top of it
   were duplicating the image and colliding with it — on desktop especially,
   where the copy sat directly over the artwork. The admin's title/subtitle
   are still stored and still drive the <h1>/<p> markup (and the slide's
   accessible name); they are simply not painted over the picture.
   The two calls to action stay — they are the point of the slide.
   To bring the copy back, delete this one block. --------------------- */
/* With no text to keep legible, the scrim only muddied the artwork. A much
   lighter wash remains so the buttons keep their contrast against a busy
   image. */
.site-hero__slide::before {
    background: linear-gradient(180deg, rgba(4, 18, 36, .10) 0%, rgba(4, 18, 36, .55) 100%);
}
.site-hero__inner { padding: 0 0 1.25rem; display: flex; align-items: flex-end; min-height: 100%; }
.site-hero__inner > .d-flex { margin-top: auto; }
.site-hero__badge {
    display: inline-flex; align-items: center; gap: .5rem;
    background: rgba(233, 196, 106, .18);
    border: 1px solid rgba(233, 196, 106, .45);
    color: var(--ms-gold);
    font-size: .76rem; font-weight: 700; letter-spacing: .3px;
    padding: .38rem .9rem; border-radius: 30px; margin-bottom: 1.1rem;
}
.site-hero__inner h1 {
    font-size: 2.9rem; font-weight: 800; line-height: 1.18;
    letter-spacing: -1px; margin-bottom: .9rem;
}
.site-hero__inner h1 span { color: var(--ms-gold); }
.site-hero__inner p { color: rgba(255, 255, 255, .82); font-size: 1rem; max-width: 520px; margin-bottom: 1.6rem; }

.site-hero .carousel-indicators { margin-bottom: 1.6rem; }
.site-hero .carousel-indicators [data-bs-target] {
    width: 30px; height: 4px; border-radius: 4px; border: 0;
    background: rgba(255, 255, 255, .4); opacity: 1;
}
.site-hero .carousel-indicators .active { background: var(--ms-gold); }
.site-hero .carousel-control-prev, .site-hero .carousel-control-next { width: 6%; opacity: .55; }
.site-hero .carousel-control-prev:hover, .site-hero .carousel-control-next:hover { opacity: 1; }

/* ---------------------------------------------------------- trust strip */

.site-trust { background: var(--ms-primary); padding: 1.4rem 0; }
.site-trust__item { display: flex; align-items: center; gap: .75rem; color: #fff; justify-content: center; }
.site-trust__item i { color: var(--site-warm-light); font-size: 1.6rem; flex: 0 0 auto; }
.site-trust__item span { font-size: .86rem; font-weight: 600; line-height: 1.25; }

/* ------------------------------------------------------------- sections */

.site-section { padding: 4.5rem 0; }
/* A slightly deeper sage than body.site so alternating sections still read
   as distinct bands now that the base page is green instead of white. */
.site-section--tint { background: var(--site-band); }

.site-eyebrow {
    display: inline-block;
    font-size: .71rem; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase;
    color: var(--site-ink); background: var(--site-tint-6);
    padding: .32rem .85rem; border-radius: 30px; margin-bottom: .8rem;
}
.site-title { font-size: 2.05rem; font-weight: 800; letter-spacing: -.6px; margin-bottom: .55rem; }
.site-title span { color: var(--site-ink); }
.site-lead { color: var(--ms-muted); font-size: .95rem; max-width: 640px; }
.site-lead--center { margin-left: auto; margin-right: auto; }

/* ------------------------------------------------------------- products */

.product-card {
    position: relative;
    background: var(--ms-card-bg);
    border: 1px solid var(--ms-border);
    border-radius: var(--ms-radius);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.product-card:hover { transform: translateY(-6px); box-shadow: var(--ms-shadow-lg); border-color: var(--site-tint-28); }

.product-card__tile {
    height: 230px;
    min-height: 230px;
    max-height: 230px;
    overflow: hidden;
    display: grid;
    place-items: center;
    padding: 1.4rem;
    background: radial-gradient(circle at 50% 42%, var(--site-tint-8) 0%, var(--site-well) 62%, var(--site-well) 100%);
}
.product-card--pink .product-card__tile { background: radial-gradient(circle at 50% 42%, var(--site-deal-tint) 0%, var(--site-well) 62%, var(--site-well) 100%); }
.product-card--green .product-card__tile { background: radial-gradient(circle at 50% 42%, var(--site-tint-12) 0%, var(--site-well) 62%, var(--site-well) 100%); }
/* The tile is a fixed-height grid track, but a grid item's default
   min-height:auto lets an oversized image's intrinsic size win over
   max-height in some browsers, spilling the image past the 230px tile
   and visually overlapping the title/price text below it. min-height:0
   plus display:block (images default to inline, which adds a few px of
   baseline gap that also contributed to the overlap) close that gap. */
.product-card__tile img {
    display: block;
    max-height: 100%;
    max-width: 100%;
    min-height: 0;
    min-width: 0;
    object-fit: contain;
    transition: transform .25s ease;
}
.product-card:hover .product-card__tile img { transform: scale(1.06); }

/* This ribbon is the public site's one literal "income figure in a box" —
   it states the rupee activation value, so it gets the pink
   treatment the client asked for income boxes. */
.product-card__ribbon {
    position: absolute; top: 14px; left: 0; z-index: 3;
    background: var(--ms-pink); color: var(--site-on-deal);
    font-size: .7rem; font-weight: 800; letter-spacing: .2px;
    padding: .32rem .8rem .32rem .7rem;
    border-radius: 0 20px 20px 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}
.product-card__pack {
    position: absolute; top: 14px; right: 14px; z-index: 3;
    background: rgba(6, 41, 79, .92); color: #fff;
    font-size: .68rem; font-weight: 700;
    padding: .26rem .6rem; border-radius: 30px;
}
.product-card__body { padding: 1.15rem 1.2rem 1.35rem; display: flex; flex-direction: column; flex: 1 1 auto; }
.product-card__body h6 { font-weight: 700; font-size: .96rem; margin-bottom: .3rem; line-height: 1.35; }
.product-card__body p { font-size: .82rem; color: var(--ms-muted); margin-bottom: .85rem; }
.product-card__price { display: flex; align-items: baseline; gap: .45rem; margin-bottom: 1rem; }
.product-card__price .now { font-weight: 800; font-size: 1.2rem; color: var(--site-ink); }
.product-card__price .was { text-decoration: line-through; color: var(--ms-muted); font-size: .84rem; }
.product-card__price .off { font-size: .7rem; font-weight: 700; color: var(--site-warm-ink); background: var(--site-deal-tint); padding: .14rem .45rem; border-radius: 20px; }
.product-card__body .btn { margin-top: auto; }

/* ------------------------------------------------------ activation band */

.site-activation {
    position: relative; overflow: hidden;
    background: linear-gradient(120deg, var(--site-deep-1) 0%, var(--site-deep-2) 50%, var(--site-deep-3) 100%);
    color: #fff; padding: 3.2rem 0;
}
.site-activation::before, .site-activation::after {
    content: ''; position: absolute; border-radius: 50%;
    background: radial-gradient(circle, rgba(233, 196, 106, .24) 0%, transparent 70%);
}
.site-activation::before { width: 420px; height: 420px; top: -170px; right: -100px; }
.site-activation::after { width: 320px; height: 320px; bottom: -150px; left: -90px; }
.site-activation .container { position: relative; z-index: 2; }
.site-activation__ribbon {
    display: inline-block; background: var(--ms-gold); color: #3D2E00;
    font-weight: 800; font-size: .74rem; letter-spacing: 1.2px; text-transform: uppercase;
    padding: .35rem 1rem; border-radius: 4px; margin-bottom: .9rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}
.site-activation h3 { font-weight: 800; font-size: 2.1rem; letter-spacing: -.6px; margin-bottom: .5rem; }
.site-activation h3 span { color: var(--ms-gold); }
.site-activation p { color: rgba(255, 255, 255, .8); margin-bottom: 0; }
.site-activation__price {
    display: inline-grid; place-items: center;
    width: 148px; height: 148px; border-radius: 50%;
    border: 3px dashed rgba(233, 196, 106, .6);
    background: rgba(233, 196, 106, .12);
}
.site-activation__price b { font-size: 2.3rem; font-weight: 800; color: var(--ms-gold); line-height: 1; }
.site-activation__price small { font-size: .7rem; color: rgba(255, 255, 255, .75); letter-spacing: .6px; text-transform: uppercase; }

/* --------------------------------------------------------- income heads */

.income-card {
    height: 100%; background: var(--ms-card-bg);
    border: 1px solid var(--ms-border); border-radius: var(--ms-radius);
    padding: 1.7rem 1.45rem; position: relative; overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.income-card:hover { transform: translateY(-5px); box-shadow: var(--ms-shadow-lg); border-color: var(--site-tint-28); }
.income-card__no {
    position: absolute; top: .6rem; right: 1rem;
    font-size: 3rem; font-weight: 800; line-height: 1;
    color: var(--site-tint-6); letter-spacing: -2px;
}
.income-card__icon {
    width: 56px; height: 56px; border-radius: 16px;
    display: grid; place-items: center; font-size: 1.55rem; color: #fff;
    margin-bottom: 1.05rem; position: relative; z-index: 2;
}
.income-card h5 { font-weight: 800; font-size: 1.05rem; margin-bottom: .45rem; }
.income-card p { font-size: .855rem; color: var(--ms-muted); margin: 0; }

/* Small projected-earning tiles ("Per Month" / "12 Months" on the level-plan
   summary) — a real rupee income figure in its own card, so it gets the
   pink accent the gold-icon .ms-stat tiles use elsewhere on the panels. */
.income-figure-card { border-top: 3px solid var(--ms-pink); }
.income-figure-card .ms-stat__value { color: var(--ms-pink); }

/* ----------------------------------------------------------- plan table */

.plan-wrap { border: 1px solid var(--ms-border); border-radius: var(--ms-radius); overflow: hidden; background: var(--ms-card-bg); }
.plan-table { width: 100%; margin: 0; font-size: .86rem; border-collapse: collapse; }
.plan-table thead th {
    background: var(--site-deep-2); color: var(--ms-gold);
    font-size: .73rem; text-transform: uppercase; letter-spacing: .6px; font-weight: 700;
    padding: .75rem .9rem; border: 0; white-space: nowrap;
}
.plan-table tbody td { padding: .62rem .9rem; border-bottom: 1px solid var(--ms-border); white-space: nowrap; }
.plan-table tbody tr:nth-child(even) { background: var(--site-stripe); }
.plan-table tbody tr:hover { background: rgba(233, 196, 106, .09); }
/* Totals row is the table's income figure — pink wash instead of the
   default gold, dark brand text stays for legibility. */
.plan-table tfoot td { background: var(--site-deal-tint); font-weight: 800; padding: .75rem .9rem; }
.plan-table .lvl {
    display: inline-grid; place-items: center;
    width: 26px; height: 26px; border-radius: 8px;
    background: var(--site-tint-8); color: var(--site-ink);
    font-weight: 800; font-size: .75rem;
}

/* ------------------------------------------------------------ pool cards */

.stage-card {
    border: 1px solid var(--ms-border); border-radius: var(--ms-radius);
    overflow: hidden; height: 100%; background: var(--ms-card-bg);
    display: flex; flex-direction: column;
    transition: transform .18s ease, box-shadow .18s ease;
}
.stage-card:hover { transform: translateY(-5px); box-shadow: var(--ms-shadow-lg); }
.stage-card__head {
    background: linear-gradient(135deg, var(--site-deep-1) 0%, var(--site-deep-2) 100%);
    color: #fff; padding: 1.1rem 1.2rem; position: relative; overflow: hidden;
}
.stage-card__head::after {
    content: ''; position: absolute; width: 170px; height: 170px; border-radius: 50%;
    background: radial-gradient(circle, rgba(233, 196, 106, .25) 0%, transparent 70%);
    right: -60px; top: -70px;
}
.stage-card__head h5 { margin: 0; font-weight: 800; font-size: 1.02rem; color: var(--ms-gold); position: relative; z-index: 2; }
.stage-card__head small { color: rgba(255, 255, 255, .75); position: relative; z-index: 2; }
/* Pool total / upgrade amount are income figures, so the footer badge gets
   a pink wash (text stays --ms-primary — it already has strong contrast on
   any light tint here, and pink text at this size/weight would be borderline
   on AA contrast). */
.stage-card__foot {
    margin-top: auto; background: var(--site-deal-tint);
    padding: .8rem 1.2rem; font-size: .82rem; font-weight: 700; color: var(--site-ink);
    display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap;
}

/* ------------------------------------------------------------- why join */

.why-item { display: flex; gap: .95rem; align-items: flex-start; }
.why-item__icon {
    flex: 0 0 46px; width: 46px; height: 46px; border-radius: 14px;
    background: var(--site-tint-8); color: var(--site-ink);
    display: grid; place-items: center; font-size: 1.2rem;
}
.why-item h6 { font-weight: 700; font-size: .95rem; margin-bottom: .22rem; }
.why-item p { font-size: .84rem; color: var(--ms-muted); margin: 0; }

/* ---------------------------------------------------------- how it works */

.step-card { text-align: center; position: relative; padding: 0 .5rem; }
.step-card__no {
    width: 62px; height: 62px; border-radius: 50%; margin: 0 auto 1rem;
    display: grid; place-items: center;
    background: var(--site-deep-2); color: var(--ms-gold);
    font-weight: 800; font-size: 1.3rem;
    box-shadow: 0 0 0 6px var(--site-tint-8);
    position: relative; z-index: 2;
}
.step-card h6 { font-weight: 700; font-size: .95rem; margin-bottom: .3rem; }
.step-card p { font-size: .83rem; color: var(--ms-muted); margin: 0; }
.step-row { position: relative; }
.step-row::before {
    content: ''; position: absolute; top: 31px; left: 12%; right: 12%;
    border-top: 2px dashed var(--ms-border); z-index: 1;
}

/* ------------------------------------------------------------------ CTA */

.site-cta {
    background: linear-gradient(135deg, var(--site-deep-2) 0%, var(--site-deep-3) 100%);
    color: #fff; border-radius: 18px; padding: 2.8rem 2.4rem;
    position: relative; overflow: hidden;
}
.site-cta::after {
    content: ''; position: absolute; width: 340px; height: 340px; border-radius: 50%;
    background: radial-gradient(circle, rgba(233, 196, 106, .22) 0%, transparent 70%);
    right: -110px; top: -120px;
}
.site-cta > * { position: relative; z-index: 2; }
.site-cta h3 { font-weight: 800; font-size: 1.7rem; letter-spacing: -.4px; }

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

.site-footer { background: var(--site-footer-bg); color: rgba(255, 255, 255, .68); padding: 3.4rem 0 0; font-size: .86rem; }
.site-footer h6 { color: #fff; font-weight: 700; font-size: .88rem; margin-bottom: 1rem; letter-spacing: .3px; }
.site-footer a { color: rgba(255, 255, 255, .68); display: block; padding: .22rem 0; }
.site-footer a:hover { color: var(--site-warm-light); }
.site-footer__brand img { height: 48px; margin-bottom: .9rem; }
.site-footer__social { display: flex; gap: .5rem; margin-top: 1rem; }
.site-footer__social a {
    width: 36px; height: 36px; border-radius: 50%; padding: 0;
    display: grid; place-items: center;
    background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .8);
}
.site-footer__social a:hover { background: var(--site-warm-light); color: var(--site-on-warm); }
.site-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, .1);
    margin-top: 2.4rem; padding: 1.1rem 0;
    font-size: .78rem; color: rgba(255, 255, 255, .5);
}

/* -------------------------------------------------------- scroll to top */

.site-totop {
    position: fixed; right: 20px; bottom: 20px; z-index: 1035;
    width: 44px; height: 44px; border-radius: 50%; border: 0;
    background: var(--site-deep-2); color: var(--ms-gold);
    display: grid; place-items: center; font-size: 1.1rem;
    box-shadow: var(--ms-shadow-lg);
    opacity: 0; visibility: hidden; transform: translateY(12px);
    transition: all .22s ease;
}
.site-totop.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.site-totop:hover { background: var(--site-deep-1); }

/* ---------------------------------------------------------- page header */

.site-pagehead {
    background: linear-gradient(120deg, var(--site-deep-1) 0%, var(--site-deep-2) 100%);
    color: #fff; padding: 3rem 0; position: relative; overflow: hidden;
}
.site-pagehead::after {
    content: ''; position: absolute; width: 380px; height: 380px; border-radius: 50%;
    background: radial-gradient(circle, rgba(233, 196, 106, .2) 0%, transparent 70%);
    right: -120px; top: -140px;
}
.site-pagehead .container { position: relative; z-index: 2; }
.site-pagehead h1 { font-weight: 800; font-size: 2.1rem; letter-spacing: -.6px; margin: 0; }
.site-pagehead .breadcrumb { margin: .5rem 0 0; font-size: .82rem; }
.site-pagehead .breadcrumb a { color: var(--ms-gold); }
.site-pagehead .breadcrumb-item + .breadcrumb-item::before { color: rgba(255, 255, 255, .45); }
.site-pagehead .breadcrumb-item.active { color: rgba(255, 255, 255, .75); }

/* ------------------------------------------------------------- cms copy */

.site-prose { font-size: .93rem; line-height: 1.8; color: var(--ms-text); }
.site-prose h2, .site-prose h3, .site-prose h4 { font-weight: 700; margin: 1.6rem 0 .7rem; color: var(--site-ink); }
.site-prose h2 { font-size: 1.3rem; }
.site-prose h3 { font-size: 1.1rem; }
.site-prose ul, .site-prose ol { padding-left: 1.2rem; }
.site-prose li { margin-bottom: .4rem; }

/* ---------------------------------------------------------- responsive */

@media (max-width: 991.98px) {
    .site-hero .carousel-item { height: 480px; }
    .site-hero__inner h1 { font-size: 2.2rem; }
    .step-row::before { display: none; }
}

@media (max-width: 767.98px) {
    .site-section { padding: 3rem 0; }
    .site-title { font-size: 1.6rem; }
    /* ---- mobile hero: banner ON TOP, text BELOW it --------------------
       On a phone the slide's artwork and the overlaid headline/CTAs fought
       each other — the banner was unreadable behind the text and the text
       was unreadable over the banner. Stacking them fixes both: the image
       gets its own band at the top of the slide, and the copy sits under it
       on a solid panel. The image still comes from the inline
       background-image the admin's Banner row sets, so nothing about how
       slides are managed changes. --------------------------------------- */
    .site-hero .carousel-item { height: auto; }
    .site-hero__slide {
        display: block;
        height: auto;
        background-size: 100% 190px;     /* the banner band */
        background-position: top center;
        background-color: var(--ms-primary-700, var(--site-deep-1));
    }
    /* The full-bleed scrim would tint the banner band too — keep it under
       the copy only, so the artwork stays true to colour. */
    .site-hero__slide::before { inset: 190px 0 0 0; background: none; }
    .site-hero__inner {
        margin-top: 190px;
        max-width: none;
        padding: .9rem 0 1.1rem;
        background: linear-gradient(180deg, rgba(6, 41, 79, .97) 0%, rgba(19, 73, 160, .97) 100%);
    }
    /* Badge/heading/subtitle are hidden at every width — see the global rule
       below. Kept here only so the copy panel sizing stays obvious. */
    .site-hero__inner .btn { width: 100%; justify-content: center; }
    .site-hero__inner .btn + .btn { margin-top: .55rem; }
    .site-hero .carousel-indicators { margin-bottom: .5rem; }
    .site-hero .carousel-control-prev, .site-hero .carousel-control-next { display: none; }
    .site-activation h3 { font-size: 1.5rem; }
    .site-cta { padding: 2rem 1.4rem; }
    .site-cta h3 { font-size: 1.35rem; }
    .product-card__tile { height: 200px; }
}

/* ==========================================================================
   STOREFRONT SHELL — app-style header + marketplace home page
   --------------------------------------------------------------------------
   Layered on top of everything above and reuses the same tokens
   (--ms-primary / --ms-gold / --ms-pink / --ms-border / --ms-shadow…).
   Nile LOOKS like a shopping app but is browse-only: there is no cart and no
   checkout, so no cart affordance exists anywhere in here by design.
   ========================================================================== */

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

.site-header__bar { padding: .55rem 0; }

.site-header__row { display: flex; align-items: center; gap: 1rem; }

.site-header .navbar-brand { flex: 0 0 auto; margin-right: 0; }
.site-header .navbar-brand img { height: 40px; }

.site-header__actions { margin-left: auto; display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; }

/* Everything that sits ON the warm band is either the band's own ink
   (--site-on-warm, >= 5.55:1 on every gradient stop) or a "chip": an OPAQUE
   --site-chip-bg surface carrying --site-chip-ink at 6.0:1.

   Every chip also takes a 1px --site-on-warm EDGE, and that edge is not
   decoration. A white pill sitting straight on the amber is only 1.75:1
   against it, so the control would have no boundary a low-vision user
   could find (WCAG 1.4.11 asks for 3:1 there). The dark edge reads 8.4:1
   against the band and 13:1 against the pill, so the component is
   unambiguous from both sides. Never white-on-amber as TEXT either — that
   pairing is 2.1:1. */

.site-header__burger {
    border: 1px solid var(--site-on-warm); padding: 0;
    width: 42px; height: 42px; border-radius: 12px;
    background: var(--site-chip-bg); color: var(--site-chip-ink);
    display: grid; place-items: center; font-size: 1.4rem; line-height: 1;
}
.site-header__burger:hover { background: var(--site-chip-bg); color: var(--site-ink-strong); }

/* Header buttons. theme.css paints .btn-brand / .btn-outline-brand /
   .btn-gold for every surface in the app; on the amber band those pairings
   fall under 3:1, so they are restated here. The selector is anchored on
   .site-header__actions, which exists only in the public header, so the
   member and admin panels keep the buttons theme.css gives them. */
.site-header__actions .btn-brand,
.site-header__actions .btn-gold {
    background: var(--site-chip-bg);
    border-color: var(--site-on-warm);
    color: var(--site-chip-ink);
    font-weight: 700;
}
.site-header__actions .btn-brand:hover,  .site-header__actions .btn-brand:focus,
.site-header__actions .btn-gold:hover,   .site-header__actions .btn-gold:focus {
    background: var(--site-chip-bg);
    border-color: var(--site-on-warm);
    color: var(--site-ink-strong);
}
.site-header__actions .btn-outline-brand {
    background: transparent;
    border-color: var(--site-on-warm);
    color: var(--site-on-warm);
    font-weight: 700;
}
.site-header__actions .btn-outline-brand:hover,
.site-header__actions .btn-outline-brand:focus {
    background: var(--site-chip-bg);
    border-color: var(--site-on-warm);
    color: var(--site-chip-ink);
}
.site-header__actions .btn:focus-visible {
    outline: 3px solid var(--site-on-warm);
    outline-offset: 2px;
    box-shadow: none;
}

/* catalogue search — submits to the products listing as ?q=.
   A white pill floating on the warm band, as in the reference. */
.site-search {
    flex: 1 1 auto;
    max-width: 620px;
    display: flex; align-items: center; gap: .55rem;
    background: var(--site-chip-bg);
    border: 1px solid var(--site-on-warm);
    border-radius: 999px;
    padding: .25rem .3rem .25rem 1rem;
    transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
/* The focus ring is the band's ink, not the blue: blue on amber is 2.7:1,
   #3A2400 on amber is 5.55:1 and clears the 3:1 non-text minimum easily. */
.site-search:focus-within {
    background: var(--site-chip-bg);
    border-color: var(--site-on-warm);
    box-shadow: 0 0 0 3px var(--site-on-warm);
}
.site-search > i { color: var(--ms-muted); font-size: 1rem; flex: 0 0 auto; }
.site-search input {
    flex: 1 1 auto; min-width: 0;
    border: 0; background: transparent; outline: none;
    padding: .48rem 0; font-size: .88rem; color: var(--ms-text);
}
.site-search input::placeholder { color: var(--ms-muted); }
.site-search input::-webkit-search-cancel-button { cursor: pointer; }
.site-search__btn {
    flex: 0 0 auto; border: 0; border-radius: 999px;
    background: var(--ms-primary); color: #fff;
    font-size: .8rem; font-weight: 700; letter-spacing: .2px;
    padding: .5rem 1.15rem; white-space: nowrap;
}
.site-search__btn:hover { background: var(--ms-primary-700); }
.site-search--mobile { max-width: none; margin: .15rem 0 .6rem; }

/* Second row: back on the card surface, so the active link can be blue. */
.site-header__nav {
    border-top: 1px solid var(--ms-border);
    background: var(--ms-card-bg);
}
.site-header__nav .navbar-nav {
    flex-direction: row; flex-wrap: nowrap;
    gap: .1rem; margin: 0; padding: 0; list-style: none;
    overflow-x: auto; scrollbar-width: none;
}
.site-header__nav .navbar-nav::-webkit-scrollbar { display: none; }
.site-header__nav .nav-link { white-space: nowrap; padding: .55rem .85rem; }
.site-header__nav .nav-link.active {
    color: var(--site-ink);
    border-radius: 8px 8px 0 0;
    box-shadow: inset 0 -3px 0 0 var(--site-ink);
}
.site-header__nav .dropdown-menu {
    --bs-dropdown-bg: var(--ms-card-bg);
    --bs-dropdown-color: var(--ms-text);
    --bs-dropdown-border-color: var(--ms-border);
    --bs-dropdown-link-color: var(--ms-text);
    --bs-dropdown-link-hover-bg: var(--site-tint-6);
    --bs-dropdown-link-hover-color: var(--site-ink);
    --bs-dropdown-link-active-bg: var(--ms-primary);
    --bs-dropdown-link-active-color: #fff;
}

/* ------------------------------------------------------ rounded hero */

.site-hero--rounded { padding-top: .25rem; }
.site-hero--rounded .carousel {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--ms-shadow-lg);
}
.site-hero--rounded .carousel-item { height: 400px; }
.site-hero--rounded .site-hero__slide { padding: 1.5rem 2.4rem; }
.site-hero--rounded .site-hero__inner { max-width: 620px; padding: 0; }
.site-hero--rounded .site-hero__inner h1 { font-size: 2.1rem; margin-bottom: .7rem; }
.site-hero--rounded .site-hero__inner p { font-size: .92rem; margin-bottom: 1.2rem; }
.site-hero--rounded .carousel-indicators { margin-bottom: 1rem; }

/* ------------------------------------------------------ category strip */

.cat-strip {
    display: flex; gap: .9rem;
    overflow-x: auto;
    padding: .25rem .15rem .9rem;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
}
.cat-strip::-webkit-scrollbar { height: 6px; }
.cat-strip::-webkit-scrollbar-thumb { background: var(--site-tint-12); border-radius: 6px; }

.cat-tile { flex: 0 0 auto; width: 92px; text-align: center; scroll-snap-align: start; }
.cat-tile__art {
    width: 76px; height: 76px; margin: 0 auto .5rem;
    border-radius: 22px; overflow: hidden;
    background: var(--ms-card-bg); border: 1px solid var(--ms-border);
    box-shadow: var(--ms-shadow);
    display: grid; place-items: center;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cat-tile__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cat-tile__art i { font-size: 1.7rem; color: var(--site-ink); }
.cat-tile:hover .cat-tile__art { transform: translateY(-3px); box-shadow: var(--ms-shadow-lg); border-color: var(--site-ink); }
.cat-tile__label { display: block; font-size: .76rem; font-weight: 600; line-height: 1.25; color: var(--ms-text); }
.cat-tile:hover .cat-tile__label { color: var(--site-ink); }

/* ------------------------------------------------- storefront sections */

.shop-section { padding: 2.6rem 0; }
.shop-section--tight { padding: 1.6rem 0; }
.shop-section--tint { background: var(--site-band); }

.shop-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 1rem; margin-bottom: 1.25rem;
}
.shop-head--center { justify-content: center; text-align: center; }
.shop-head__title { font-size: 1.4rem; font-weight: 800; letter-spacing: -.4px; margin: 0 0 .2rem; color: var(--ms-text); }
.shop-head__sub { font-size: .86rem; color: var(--ms-muted); margin: 0; max-width: 640px; }
.shop-head--center .shop-head__sub { margin-left: auto; margin-right: auto; }
.shop-head__link { flex: 0 0 auto; font-size: .82rem; font-weight: 700; color: var(--site-ink); white-space: nowrap; }
.shop-head__link:hover { color: var(--ms-primary-700); }

/* --------------------------------------------------------- product grid */

.shop-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }

.shop-card {
    display: flex; flex-direction: column; height: 100%;
    background: var(--ms-card-bg); color: inherit;
    border: 1px solid var(--ms-border); border-radius: 16px;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.shop-card:hover { transform: translateY(-4px); box-shadow: var(--ms-shadow-lg); border-color: var(--site-tint-28); }

.shop-card__media {
    position: relative;
    aspect-ratio: 1 / 1;
    background: radial-gradient(circle at 50% 42%, var(--site-tint-8) 0%, var(--site-well) 62%, var(--site-well) 100%);
    display: grid; place-items: center;
    padding: .9rem;
}
.shop-card__media img {
    display: block;
    max-width: 100%; max-height: 100%;
    min-width: 0; min-height: 0;
    object-fit: contain;
    transition: transform .25s ease;
}
.shop-card:hover .shop-card__media img { transform: scale(1.05); }

.shop-card__off {
    position: absolute; top: .55rem; left: .55rem; z-index: 2;
    background: var(--ms-pink); color: var(--site-on-deal);
    font-size: .66rem; font-weight: 800; letter-spacing: .2px;
    padding: .2rem .5rem; border-radius: 999px;
}

.shop-card__body { flex: 1 1 auto; display: flex; flex-direction: column; padding: .75rem .85rem .9rem; }
.shop-card__name {
    font-size: .88rem; font-weight: 700; line-height: 1.35; margin: 0 0 .2rem;
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.shop-card__meta { font-size: .74rem; color: var(--ms-muted); margin: 0 0 .35rem; }
.shop-card__price { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.shop-card__price .now { font-size: 1rem; font-weight: 800; color: var(--site-ink); }
.shop-card__price .was { font-size: .76rem; color: var(--ms-muted); text-decoration: line-through; }
.shop-card__view {
    margin-top: auto; padding-top: .6rem;
    font-size: .78rem; font-weight: 700; color: var(--site-ink);
    display: inline-flex; align-items: center; gap: .05rem;
}
.shop-card__view i { font-size: 1.1rem; transition: transform .18s ease; }
.shop-card:hover .shop-card__view i { transform: translateX(3px); }

/* ---------------------------------------------------- activation band */

.shop-activation {
    position: relative; overflow: hidden;
    border-radius: 18px; padding: 2.2rem;
    color: #fff;
    background: linear-gradient(120deg, var(--site-deep-1) 0%, var(--site-deep-2) 55%, var(--site-deep-3) 100%);
    display: flex; align-items: center; gap: 1.8rem; flex-wrap: wrap;
}
.shop-activation::after {
    content: ''; position: absolute; width: 340px; height: 340px; border-radius: 50%;
    background: radial-gradient(circle, rgba(233, 196, 106, .22) 0%, transparent 70%);
    right: -110px; top: -120px;
}
.shop-activation > * { position: relative; z-index: 2; }
.shop-activation__copy { flex: 1 1 380px; }
.shop-activation__ribbon {
    display: inline-block; margin-bottom: .8rem;
    background: var(--ms-gold); color: #3D2E00;
    font-size: .72rem; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase;
    padding: .3rem .9rem; border-radius: 6px;
}
.shop-activation h2 { font-size: 1.7rem; font-weight: 800; letter-spacing: -.5px; margin-bottom: .5rem; }
.shop-activation h2 span { color: var(--ms-gold); }
.shop-activation p { font-size: .9rem; color: rgba(255, 255, 255, .82); margin: 0; max-width: 620px; }
.shop-activation__price {
    flex: 0 0 auto; margin-left: auto; margin-right: auto;
    width: 150px; height: 150px; border-radius: 50%;
    display: grid; place-items: center; align-content: center; text-align: center;
    border: 3px dashed rgba(233, 196, 106, .6);
    background: rgba(233, 196, 106, .12);
}
.shop-activation__price b { font-size: 2.1rem; font-weight: 800; line-height: 1; color: var(--ms-gold); }
.shop-activation__price small {
    margin-top: .35rem; font-size: .66rem; letter-spacing: .6px; text-transform: uppercase;
    color: rgba(255, 255, 255, .75);
}

/* --------------------------------------------------------- benefits */

.shop-benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
.shop-benefit {
    height: 100%;
    background: var(--ms-card-bg); border: 1px solid var(--ms-border); border-radius: 16px;
    padding: 1.25rem 1.1rem; box-shadow: var(--ms-shadow);
}
.shop-benefit__icon {
    width: 46px; height: 46px; border-radius: 14px; margin-bottom: .75rem;
    background: var(--site-tint-8); color: var(--site-ink);
    display: grid; place-items: center; font-size: 1.25rem;
}
.shop-benefit h3 { font-size: .95rem; font-weight: 700; margin: 0 0 .25rem; }
.shop-benefit p { font-size: .82rem; color: var(--ms-muted); margin: 0; }

/* --------------------------------------------------------- closing CTA */

.shop-cta {
    position: relative; overflow: hidden;
    border-radius: 18px; padding: 2.2rem;
    color: #fff;
    background: linear-gradient(135deg, var(--site-deep-2) 0%, var(--site-deep-3) 100%);
    display: flex; align-items: center; justify-content: space-between;
    gap: 1.4rem; flex-wrap: wrap;
}
.shop-cta::after {
    content: ''; position: absolute; width: 340px; height: 340px; border-radius: 50%;
    background: radial-gradient(circle, rgba(233, 196, 106, .22) 0%, transparent 70%);
    right: -110px; top: -120px;
}
.shop-cta > * { position: relative; z-index: 2; }
.shop-cta h2 { font-size: 1.6rem; font-weight: 800; letter-spacing: -.4px; margin: 0 0 .4rem; }
.shop-cta p { font-size: .92rem; color: rgba(255, 255, 255, .82); margin: 0; max-width: 640px; }
.shop-cta__meta { font-size: .78rem; color: rgba(255, 255, 255, .62); margin-top: .55rem; }
.shop-cta__action { flex: 0 0 auto; }

/* ------------------------------------------------------- storefront rwd */

@media (min-width: 576px) {
    .shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
}

@media (min-width: 992px) {
    .shop-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.15rem; }
    .shop-benefits { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.15rem; }
}

@media (max-width: 991.98px) {
    .site-hero--rounded .carousel-item { height: 340px; }
    .site-hero--rounded .site-hero__inner h1 { font-size: 1.75rem; }
}

@media (max-width: 767.98px) {
    .shop-section { padding: 1.9rem 0; }
    .shop-section--tight { padding: 1.2rem 0; }
    .shop-head { margin-bottom: 1rem; }
    .shop-head__title { font-size: 1.15rem; }
    .shop-head__sub { font-size: .8rem; }

    .site-hero--rounded .carousel { border-radius: 14px; }
    .site-hero--rounded .carousel-item { height: 290px; }
    .site-hero--rounded .site-hero__slide { padding: 1.1rem 1.25rem; }
    .site-hero--rounded .site-hero__inner h1 { font-size: 1.3rem; }
    .site-hero--rounded .site-hero__badge { font-size: .68rem; margin-bottom: .7rem; }
    .site-hero--rounded .site-hero__inner p { display: none; }

    .cat-tile { width: 78px; }
    .cat-tile__art { width: 66px; height: 66px; border-radius: 20px; }

    .shop-activation, .shop-cta { padding: 1.5rem 1.25rem; border-radius: 16px; }
    .shop-activation h2, .shop-cta h2 { font-size: 1.3rem; }
    .shop-activation__price { width: 120px; height: 120px; }
    .shop-activation__price b { font-size: 1.65rem; }
    .shop-cta__action { width: 100%; }
    .shop-cta__action .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .shop-card, .shop-card__media img, .cat-tile__art, .shop-card__view i { transition: none; }
    .shop-card:hover { transform: none; }
    .shop-card:hover .shop-card__media img { transform: none; }
    .cat-tile:hover .cat-tile__art { transform: none; }
}

/* ==========================================================================
   PHONE + CONSISTENCY LAYER
   --------------------------------------------------------------------------
   Appended last on purpose: everything here is the *single* answer for a
   question the rules above (and the per-page <style> blocks that used to live
   in plan/about/contact/page.blade.php) each used to answer differently —
   card radius, border, shadow, section rhythm, heading sizes, type floor and
   touch-target sizes.

   Rules of the layer:
     - no new colours: every value is an --ms-* token or an existing shade;
     - nothing may make the document scroll sideways at 360px;
     - no interactive control smaller than 44x44 on a touch screen;
     - no body copy below 14px on a phone.
   ========================================================================== */

/* ----------------------------------------------------------- site tokens */

:root {
    /* One card language. Everything that reads as a "card" or "panel" on the
       public site uses these values and nothing else. */
    --site-radius-sm:   12px;
    --site-radius:      16px;
    --site-radius-lg:   18px;
    --site-pill:        999px;

    /* The card-surface tokens and --site-band used to be literal colours
       here. They now live in the `body.site` palette at the top of this
       file, next to the --ms-* overrides and their dark counterparts, so a
       storefront colour is stated exactly once and can never be defined in
       light mode only. Only non-colour values remain in this :root block. */

    /* Vertical rhythm — one step, three widths. */
    --site-section-y: 1.9rem;
    --site-gap:       .85rem;

    /* Type scale (mobile first). --site-text is the body-copy floor:
       .9rem against the 16px root = 14.4px. */
    --site-h1:      1.5rem;
    --site-h2:      1.3rem;
    --site-h3:      1.05rem;
    --site-h4:      1rem;
    --site-text:    .9rem;
    --site-text-sm: .8rem;
    --site-text-xs: .72rem;

    --site-tap: 44px;
}

@media (min-width: 768px) {
    :root {
        --site-section-y: 2.75rem;
        --site-gap: 1rem;
        --site-h1: 2rem;
        --site-h2: 1.75rem;
        --site-h3: 1.15rem;
        --site-h4: 1.05rem;
    }
}

@media (min-width: 1200px) {
    :root { --site-section-y: 3.4rem; --site-gap: 1.15rem; }
}

/* ------------------------------------------------- horizontal-overflow net

   Root causes are fixed individually below; this is only the backstop so a
   future long string can never turn the page into a sideways scroller.
   `clip` (not `hidden`) is deliberate: it does not create a scroll container,
   so the sticky .site-header keeps working.                                 */

html { overflow-x: clip; }
body.site img { max-width: 100%; }

/* Long unbroken strings — support email, referral links, SKUs, admin-entered
   banner titles — break instead of pushing the page wide. */
.site-footer a,
.site-hero__inner h1,
.cat-crumbs,
.cat-crumbs a,
.cat-crumbs span,
.cat-detail__title,
.cat-specs li span,
.nmp-tile__value,
.nmp-fact__meta p,
.nmp-channel__meta p,
.site-prose,
.nmp-prose,
.cat-prose { overflow-wrap: break-word; word-break: break-word; min-width: 0; }

/* Flex/grid children that carry text need min-width:0, or their min-content
   width props the row open. */
.shop-activation__copy,
.shop-cta > div,
.shop-head > div,
.nmp-tile__meta,
.nmp-fact__meta,
.nmp-channel__meta { min-width: 0; }

/* The level table is wide by design (4 nowrap columns). .plan-wrap used to
   say overflow:hidden, which beat theme.css's .ms-table-wrap{overflow-x:auto}
   in the cascade and simply amputated the last column on a phone. */
.plan-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.plan-table { font-size: var(--site-text-sm); }

/* -------------------------------------------------------------- rhythm */

.site-section,
.shop-section,
.nmp-about,
.nmp-contact,
.nmp-page,
.nmp-plan > section {
    padding-top: var(--site-section-y);
    padding-bottom: var(--site-section-y);
}
.shop-section--tight {
    padding-top: calc(var(--site-section-y) * .62);
    padding-bottom: calc(var(--site-section-y) * .62);
}
.site-section--tint,
.shop-section--tint,
.nmp-plan > section.is-tint { background: var(--site-band); }

/* ------------------------------------------------------- heading scale */

.site-pagehead { padding: 2rem 0; }
.site-pagehead h1 { font-size: var(--site-h1); line-height: 1.25; overflow-wrap: break-word; }
.site-pagehead .breadcrumb { font-size: var(--site-text-sm); flex-wrap: wrap; }

.site-title,
.shop-head__title,
.nmp-title {
    font-size: var(--site-h2);
    font-weight: 800;
    letter-spacing: -.4px;
    line-height: 1.28;
    margin: 0 0 .35rem;
}

/* Headings on the dark brand bands read at the same step as a section
   heading, not at one of their own. */
.site-cta h3,
.shop-activation h2,
.shop-cta h2,
.nmp-cta h2 {
    font-size: var(--site-h2);
    font-weight: 800;
    letter-spacing: -.4px;
    line-height: 1.28;
    margin: 0 0 .45rem;
}

/* Panel / card headers. */
.cat-heading,
.nmp-card__head h2,
.nmp-page__head h2,
.nmp-panel__head h3 {
    font-size: var(--site-h3);
    font-weight: 800;
    letter-spacing: -.2px;
    line-height: 1.35;
    margin: 0;
    color: var(--site-ink);
}
.cat-heading { margin-bottom: .9rem; display: flex; align-items: center; gap: .45rem; }
.cat-heading i { color: var(--site-warm-ink); }

.site-eyebrow,
.nmp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: var(--site-text-xs);
    font-weight: 800;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--site-ink);
    background: var(--site-tint-8);
    border-radius: var(--site-pill);
    padding: .32rem .8rem;
    margin-bottom: .75rem;
}

.site-lead,
.shop-head__sub,
.nmp-lead {
    font-size: var(--site-text);
    line-height: 1.7;
    color: var(--ms-muted);
    max-width: 660px;
    margin: 0;
}

.site-title span, .nmp-title span, .shop-head__title span { color: var(--site-ink); }

.nmp-head { text-align: center; margin-bottom: var(--site-gap); }
.nmp-head .nmp-lead { margin-left: auto; margin-right: auto; }
.nmp-head--start { text-align: left; }
.nmp-head--start .nmp-lead { margin-left: 0; }
@media (min-width: 768px) { .nmp-head { margin-bottom: 2rem; } }

/* --------------------------------------------------------- one card look

   Every boxed surface on the public site — home benefit tiles, plan tiles /
   steps / income heads / panels, about facts, contact channels, CMS page
   card, catalogue toolbar and product panel — shares one radius, border,
   shadow and hover.                                                        */

.shop-benefit,
.nmp-card,
.nmp-panel,
.nmp-page__card,
.nmp-tile,
.nmp-step,
.nmp-income,
.nmp-fact,
.nmp-channel,
.nmp-gallery__item,
.cat-toolbar,
.cat-panel,
.cat-empty {
    background: var(--site-card-bg);
    border: 1px solid var(--site-card-border);
    border-radius: var(--site-radius);
    box-shadow: var(--site-card-shadow);
}
.cat-empty { border-style: dashed; box-shadow: none; }

.nmp-card,
.nmp-panel,
.nmp-page__card,
.nmp-gallery__item { overflow: hidden; }

.nmp-card__head,
.nmp-page__head,
.nmp-panel__head {
    padding: .95rem 1.1rem;
    border-bottom: 1px solid var(--site-card-border);
    background: linear-gradient(180deg, var(--site-tint-6) 0%, rgba(26, 92, 208, 0) 100%);
}
.nmp-card__head p,
.nmp-page__head p,
.nmp-panel__head p {
    margin: .2rem 0 0;
    font-size: var(--site-text-sm);
    color: var(--ms-muted);
    font-weight: 600;
}
.nmp-card__body,
.nmp-page__body { padding: 1.15rem; }
@media (min-width: 768px) {
    .nmp-card__head, .nmp-page__head, .nmp-panel__head { padding: 1.1rem 1.6rem; }
    .nmp-card__body, .nmp-page__body { padding: 1.6rem; }
}

/* Hover lift, stated once. */
@media (hover: hover) {
    .shop-benefit:hover,
    .nmp-tile:hover,
    .nmp-income:hover,
    .nmp-fact:hover,
    .nmp-channel:hover,
    .nmp-gallery__item:hover {
        transform: translateY(-3px);
        box-shadow: var(--site-card-shadow-h);
        border-color: var(--site-card-hover);
    }
}
/* A phone has no pointer to leave, so a tapped card keeps its hover state
   until the next tap somewhere else. Kill every lift on touch. */
@media (hover: none) {
    .shop-card:hover, .cat-card:hover,
    .product-card:hover, .income-card:hover, .stage-card:hover,
    .shop-benefit:hover, .nmp-tile:hover, .nmp-income:hover,
    .nmp-fact:hover, .nmp-channel:hover, .nmp-gallery__item:hover {
        transform: none;
        box-shadow: var(--site-card-shadow);
    }
    .cat-tile:hover .cat-tile__art { transform: none; }
    .shop-card:hover .shop-card__media img,
    .cat-card:hover .cat-card__media img { transform: none; }
}

/* ============================================================ product card

   ONE product card, used by the home grids, the catalogue listing and the
   "you may also like" row on the detail page. .cat-* stays as an alias so
   any older markup lands on exactly the same design.                       */

.shop-grid, .cat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--site-gap);
}
@media (min-width: 576px)  { .shop-grid, .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 992px)  { .shop-grid, .cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .shop-grid, .cat-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.shop-card, .cat-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
    background: var(--site-card-bg);
    color: inherit;
    border: 1px solid var(--site-card-border);
    border-radius: var(--site-radius);
    box-shadow: var(--site-card-shadow);
    overflow: hidden;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
@media (hover: hover) {
    .shop-card:hover, .cat-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--site-card-shadow-h);
        border-color: var(--site-card-hover);
        color: inherit;
    }
}

.shop-card__media, .cat-card__media {
    position: relative;
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    padding: .8rem;
    overflow: hidden;
    background: radial-gradient(circle at 50% 42%, var(--site-tint-8) 0%, var(--site-well) 62%, var(--site-well) 100%);
}
/* width/height 100% + object-fit:contain rather than max-width/max-height:
   it letterboxes instead of cropping (product packs must stay whole) and it
   is immune to an uploaded SVG that carries a viewBox but no intrinsic
   width/height, which would otherwise fall back to the 300x150 default and
   spill out of the tile. */
.shop-card__media img, .cat-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    object-fit: contain;
    transition: transform .25s ease;
}
@media (hover: hover) {
    .shop-card:hover .shop-card__media img,
    .cat-card:hover .cat-card__media img { transform: scale(1.05); }
}

/* corner badges — pink states the discount, gold flags an editorial pick */
.shop-card__off, .cat-off,
.shop-card__flag, .cat-flag {
    position: absolute;
    top: .5rem;
    z-index: 2;
    font-size: var(--site-text-xs);
    font-weight: 800;
    letter-spacing: .2px;
    line-height: 1.35;
    padding: .18rem .5rem;
    border-radius: var(--site-pill);
}
.shop-card__off, .cat-off { left: .5rem; background: var(--ms-pink); color: var(--site-on-deal); }
.shop-card__flag, .cat-flag { right: .5rem; background: var(--ms-gold); color: #3D2E00; text-transform: uppercase; }

.shop-card__oos, .cat-oos {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: grid;
    place-items: center;
    background: var(--site-scrim);
    font-size: var(--site-text-sm);
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--ms-text);
}

.shop-card__body, .cat-card__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .22rem;
    padding: .7rem .8rem .85rem;
}
.shop-card__name, .cat-card__name {
    margin: 0;
    font-size: var(--site-text);
    font-weight: 700;
    line-height: 1.35;
    color: var(--ms-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.shop-card__meta, .cat-card__meta {
    margin: 0;
    font-size: var(--site-text-sm);
    color: var(--ms-muted);
    line-height: 1.35;
    min-height: 1.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.shop-card__price, .cat-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: auto;
    padding-top: .3rem;
}
.shop-card__price .now, .cat-price .now { font-size: 1rem; font-weight: 800; color: var(--site-ink); }
.shop-card__price .was, .cat-price .was { font-size: var(--site-text-sm); color: var(--ms-muted); text-decoration: line-through; }
.shop-card__price .off, .cat-price .pct { font-size: var(--site-text-xs); font-weight: 800; color: var(--site-warm-ink); }

/* Browse-only marketplace: the cue links to the detail page. There is no
   cart control on this site, by design. */
.shop-card__view, .cat-card__cue {
    margin-top: .5rem;
    font-size: var(--site-text-sm);
    font-weight: 700;
    color: var(--site-ink);
    display: inline-flex;
    align-items: center;
    gap: .1rem;
}
.shop-card__view i, .cat-card__cue i { font-size: 1.05rem; transition: transform .18s ease; }
@media (hover: hover) {
    .shop-card:hover .shop-card__view i,
    .cat-card:hover .cat-card__cue i { transform: translateX(3px); }
}

/* ------------------------------------------------------------ type floor

   Nothing a visitor actually reads drops below 14px on a phone. Badges,
   ribbons and uppercase micro-labels are allowed down to --site-text-xs.   */

.shop-benefit p,
.nmp-step p,
.nmp-income p,
.nmp-note,
.cat-note,
.cat-count,
.cat-specs,
.site-footer,
.site-prose,
.nmp-prose,
.cat-prose { font-size: var(--site-text); }

.site-prose, .nmp-prose, .cat-prose { line-height: 1.8; color: var(--ms-text); }
.site-prose > :first-child, .nmp-prose > :first-child, .cat-prose > :first-child { margin-top: 0; }
.site-prose img, .nmp-prose img, .cat-prose img { max-width: 100%; height: auto; border-radius: var(--site-radius-sm); }
.site-prose pre, .nmp-prose pre, .cat-prose pre { overflow-x: auto; }

/* An unwrapped CMS / product-description table scrolls inside itself rather
   than widening the page. page.blade.php and product.blade.php also wrap
   tables in a .nmp-table-scroll box at runtime; this is the no-JS floor. */
.nmp-prose > table,
.cat-prose > table,
.site-prose > table {
    display: block;
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.shop-cta__meta, .nmp-page__foot, .site-footer__bottom, .cat-crumbs { font-size: var(--site-text-sm); }
.shop-cta p, .shop-activation p, .nmp-cta p { font-size: var(--site-text); line-height: 1.7; }

/* ------------------------------------------------------------ tap targets

   44x44 minimum on anything a thumb has to hit. Scoped to the touch
   breakpoints so desktop density is untouched.                             */

@media (max-width: 991.98px) {
    .site-header__burger { width: var(--site-tap); height: var(--site-tap); }

    .site-header__actions .btn,
    .site-offcanvas .btn {
        min-height: var(--site-tap);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .site-offcanvas .nav-link {
        min-height: var(--site-tap);
        display: flex;
        align-items: center;
        font-size: var(--site-text);
        padding: .55rem .25rem;
    }

    .site-search { padding: .2rem .25rem .2rem .9rem; }
    .site-search input { min-height: 40px; font-size: var(--site-text); }
    .site-search__btn { min-height: 38px; }

    /* Footer: link rows were ~28px tall, and the support address ran past the
       column edge — which is what actually scrolled the page sideways. */
    /* Block (not flex): the address and support e-mail have to be able to
       wrap inside the column, and an anonymous flex text item cannot. */
    .site-footer a {
        display: block;
        min-height: var(--site-tap);
        padding: .6rem 0;
        line-height: 1.5;
    }
    .site-footer__social a { padding: 0; }
    .site-footer__social a { width: var(--site-tap); height: var(--site-tap); display: grid; }

    .cat-chip {
        min-height: var(--site-tap);
        padding: .5rem 1rem;
        font-size: var(--site-text-sm);
    }
    .cat-sort, .cat-search input[type="search"] { min-height: var(--site-tap); }

    .cat-pager .page-link {
        min-width: var(--site-tap);
        min-height: var(--site-tap);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: var(--site-text);
    }

    .shop-head__link {
        display: inline-flex;
        align-items: center;
        min-height: var(--site-tap);
        font-size: var(--site-text-sm);
    }

    .cat-crumbs { row-gap: .15rem; }
    .cat-crumbs a { display: inline-flex; align-items: center; min-height: 32px; }

    .site-hero .btn, .site-cta .btn, .shop-cta .btn,
    .shop-activation .btn, .nmp-cta .btn, .cat-empty .btn, .site-btn-pill {
        min-height: var(--site-tap);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .nmp-page__foot a { display: inline-flex; align-items: center; min-height: var(--site-tap); }
}

/* Bootstrap ships the carousel indicators with transparent top/bottom borders
   so the 3px bar still has a real hit area; the rule above zeroed the border
   and left a 30x4px target. Put the hit area back. */
.site-hero .carousel-indicators [data-bs-target] {
    height: 4px;
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    background-clip: padding-box;
}

/* ---------------------------------------------------- shared pill button */

.site-btn-pill {
    border-radius: var(--site-pill);
    font-weight: 700;
    padding: .6rem 1.4rem;
}

/* -------------------------------------------------------- phone polish */

@media (max-width: 767.98px) {
    /* 300px keeps badge + headline + two stacked 44px buttons inside the
       slide even on a 320px-wide handset. */
    .site-hero--rounded .carousel-item { height: 300px; }
    .site-hero--rounded .site-hero__slide { padding: 1.1rem; }
    .site-hero--rounded .site-hero__inner h1 { font-size: var(--site-h2); line-height: 1.25; }
    .site-hero--rounded .carousel-control-prev,
    .site-hero--rounded .carousel-control-next { display: none; }

    .shop-head { margin-bottom: .9rem; align-items: center; }
    .shop-head__title { margin-bottom: .15rem; }

    .shop-activation, .shop-cta, .site-cta, .nmp-cta {
        padding: 1.4rem 1.15rem;
        border-radius: var(--site-radius-lg);
    }
    .shop-activation__price { width: 118px; height: 118px; margin-top: .25rem; }
    .shop-cta__action, .shop-cta__action .btn { width: 100%; }

    .cat-toolbar, .cat-panel, .nmp-card, .nmp-panel, .nmp-page__card { border-radius: var(--site-radius); }
}

@media (max-width: 575.98px) {
    /* The rounded hero has room for a headline and the buttons, not a
       paragraph, once the type sits at its 14px floor. */
    .site-hero--rounded .site-hero__inner p { display: none; }

    .site-cta .btn, .shop-cta .btn, .nmp-cta .btn, .cat-empty .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .shop-card, .cat-card, .shop-benefit,
    .nmp-tile, .nmp-income, .nmp-fact, .nmp-channel, .nmp-gallery__item,
    .shop-card__media img, .cat-card__media img { transition: none; }
}

/* ------------------------------------------------------- shared prose

   One long-form reading style for every source of admin/CMS copy: the About
   page, the CMS page template, and the product description. Previously each
   template shipped its own heading sizes and spacing in a <style> block. */

.site-prose h1, .nmp-prose h1, .cat-prose h1,
.site-prose h2, .nmp-prose h2, .cat-prose h2,
.site-prose h3, .nmp-prose h3, .cat-prose h3,
.site-prose h4, .nmp-prose h4, .cat-prose h4,
.site-prose h5, .nmp-prose h5, .cat-prose h5 {
    font-weight: 800;
    letter-spacing: -.3px;
    color: var(--site-ink);
    margin: 1.6rem 0 .65rem;
    scroll-margin-top: 120px;
    line-height: 1.35;
}
.site-prose h1, .nmp-prose h1, .cat-prose h1 { font-size: var(--site-h2); }
.site-prose h2, .nmp-prose h2, .cat-prose h2 { font-size: 1.2rem; }
.site-prose h3, .nmp-prose h3, .cat-prose h3 { font-size: 1.08rem; }
.site-prose h4, .nmp-prose h4, .cat-prose h4,
.site-prose h5, .nmp-prose h5, .cat-prose h5 { font-size: 1rem; }
@media (min-width: 768px) {
    .site-prose h2, .nmp-prose h2, .cat-prose h2 { font-size: 1.35rem; }
    .site-prose h3, .nmp-prose h3, .cat-prose h3 { font-size: 1.15rem; }
}

.site-prose p, .nmp-prose p, .cat-prose p { margin-bottom: 1rem; }
.site-prose ul, .nmp-prose ul, .cat-prose ul,
.site-prose ol, .nmp-prose ol, .cat-prose ol { padding-left: 1.2rem; margin-bottom: 1rem; }
.site-prose li, .nmp-prose li, .cat-prose li { margin-bottom: .4rem; }
.site-prose a, .nmp-prose a, .cat-prose a { color: var(--site-ink); font-weight: 600; text-decoration: underline; }
.site-prose a:hover, .nmp-prose a:hover, .cat-prose a:hover { color: var(--ms-primary-700); }
.site-prose hr, .nmp-prose hr, .cat-prose hr { border: 0; border-top: 1px solid var(--site-card-border); margin: 1.6rem 0; }
.site-prose blockquote, .nmp-prose blockquote, .cat-prose blockquote {
    margin: 1.2rem 0;
    padding: .85rem 1.1rem;
    border-left: 3px solid var(--ms-gold);
    background: rgba(233, 196, 106, .12);
    border-radius: 0 var(--site-radius-sm) var(--site-radius-sm) 0;
    color: var(--ms-text);
}
.site-prose blockquote p:last-child,
.nmp-prose blockquote p:last-child,
.cat-prose blockquote p:last-child { margin-bottom: 0; }
.site-prose code, .nmp-prose code, .cat-prose code {
    background: var(--site-tint-6);
    border-radius: 6px;
    padding: .1rem .35rem;
    font-size: .86em;
    color: var(--ms-primary-700);
}
.site-prose pre, .nmp-prose pre, .cat-prose pre {
    border-radius: var(--site-radius-sm);
    padding: 1rem;
    background: var(--site-stripe);
}

/* Runtime-wrapped wide tables (page.blade.php / product.blade.php). */
.nmp-table-scroll, .cat-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--site-card-border);
    border-radius: var(--site-radius-sm);
    margin: 1.2rem 0;
}
.nmp-table-scroll > table, .cat-table-scroll > table { min-width: 460px; }
.nmp-prose table, .site-prose table, .cat-prose table {
    width: 100%;
    font-size: var(--site-text-sm);
    border-collapse: collapse;
    margin: 0;
}
.nmp-prose table th, .nmp-prose table td,
.site-prose table th, .site-prose table td,
.cat-prose table th, .cat-prose table td {
    padding: .55rem .8rem;
    border-bottom: 1px solid var(--site-card-border);
    text-align: left;
}
.nmp-prose table th, .site-prose table th, .cat-prose table th {
    background: var(--ms-primary);
    color: #fff;
    font-weight: 700;
    white-space: nowrap;
}
.nmp-prose table tbody tr:nth-child(even),
.site-prose table tbody tr:nth-child(even),
.cat-prose table tbody tr:nth-child(even) { background: var(--site-stripe); }

/* -------------------------------------------------------- brand bands */

.site-cta { border-radius: var(--site-radius-lg); }
.site-cta__text,
.nmp-cta p { color: rgba(255, 255, 255, .82); margin: 0; }
.site-cta__text { font-size: var(--site-text); line-height: 1.7; }

/* --------------------------------------------------- plan page tables */

.nmp-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.nmp-scroll::-webkit-scrollbar { height: 6px; }
.nmp-scroll::-webkit-scrollbar-thumb { background: var(--site-tint-28); border-radius: 4px; }

.nmp-table { width: 100%; min-width: 520px; margin: 0; border-collapse: collapse; font-size: var(--site-text-sm); }
.nmp-table thead th {
    background: var(--ms-primary);
    color: #fff;
    font-weight: 700;
    font-size: var(--site-text-xs);
    letter-spacing: .4px;
    text-transform: uppercase;
    padding: .7rem .9rem;
    white-space: nowrap;
}
.nmp-table tbody td {
    padding: .62rem .9rem;
    border-bottom: 1px solid var(--site-card-border);
    white-space: nowrap;
    vertical-align: middle;
}
.nmp-table tbody tr:nth-child(even) { background: var(--site-stripe); }
.nmp-table td.wrap { white-space: normal; min-width: 190px; }
.nmp-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.nmp-table .strong { font-weight: 700; }

.nmp-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 24px;
    padding: 0 .45rem;
    border-radius: var(--site-pill);
    background: var(--site-tint-8);
    color: var(--site-ink);
    font-weight: 800;
    font-size: var(--site-text-xs);
}
.nmp-badge--gold  { background: rgba(233, 196, 106, .35); color: var(--site-gold-ink); }
.nmp-badge--pink  { background: var(--site-deal-tint); color: var(--site-warm-ink); }
.nmp-badge--muted { background: rgba(125, 135, 156, .14); color: var(--ms-muted); }

/* "swipe the table" affordance — only meaningful where the table scrolls */
.nmp-hint {
    display: flex;
    gap: .5rem;
    align-items: center;
    padding: .55rem 1.1rem;
    font-size: var(--site-text-sm);
    color: var(--ms-muted);
    border-top: 1px solid var(--site-card-border);
    background: var(--site-stripe);
}
@media (min-width: 992px) { .nmp-hint { display: none; } }

/* ------------------------------------------------- remaining alignments

   Last pass over the storefront pieces that were written before the tokens
   existed, so radius / gap / type agree with everything above.             */

.site-ticker { font-size: var(--site-text); padding: .45rem 0; }
.site-ticker__track { gap: 2.4rem; }

.site-hero--rounded .carousel { border-radius: var(--site-radius-lg); }
.site-hero__badge { font-size: var(--site-text-xs); }

.cat-tile__label { font-size: var(--site-text-sm); }
.cat-strip { gap: .75rem; }

.shop-benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--site-gap); }
@media (min-width: 992px) { .shop-benefits { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.shop-benefit { padding: 1.15rem 1rem; }
.shop-benefit__icon {
    width: 46px; height: 46px; border-radius: var(--site-radius-sm); margin-bottom: .75rem;
    background: var(--site-tint-8); color: var(--site-ink);
    display: grid; place-items: center; font-size: 1.25rem;
}
.shop-benefit h3 { font-size: var(--site-h4); font-weight: 700; margin: 0 0 .25rem; }
.shop-benefit p { color: var(--ms-muted); margin: 0; line-height: 1.6; }

.shop-activation, .shop-cta { border-radius: var(--site-radius-lg); gap: 1.2rem 1.8rem; }
.shop-activation__ribbon { font-size: var(--site-text-xs); }

/* iOS Safari zooms the whole page in when a focused form control renders
   below 16px, and the page is then left scrolled sideways. Every field the
   visitor can focus on a phone therefore renders at exactly 1rem. */
@media (max-width: 991.98px) {
    .site-search input,
    .cat-search input[type="search"],
    .cat-sort { font-size: 1rem; }
}

/* Bootstrap's .form-control default is .875rem-ish via theme.css; the public
   contact form sets its own 1rem on touch (see contact.blade.php). */


/* ==========================================================================
   MOBILE OVERFLOW GUARD
   --------------------------------------------------------------------------
   Reported 2026-08-26: on a phone the page sat wider than the viewport, so
   there was dead space down the left and the header/content ran off the
   right edge.

   `overflow-x: clip` — NOT `hidden` — is deliberate: `hidden` turns the
   element into a scroll container, which silently breaks `position: sticky`
   on the header. `clip` crops without that side effect.

   The brand block is the usual offender: "Nile Market Place Private Limited"
   plus its tagline cannot shrink unless the flex item is allowed to, hence
   the `min-width: 0` — flex items default to `min-width: auto` and refuse to
   go below their content width.
   ====================================================================== */
html, body.site { max-width: 100%; overflow-x: clip; }

body.site img, body.site svg, body.site video, body.site iframe { max-width: 100%; }

.site-header .container, .site-ticker .container { min-width: 0; }
.site-header .navbar-brand, .site-brand { min-width: 0; }
.site-header .navbar-brand span, .site-brand__text { min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 575.98px) {
    /* Long legal name + tagline crowd out the search box on a small phone.
       The logo still identifies the brand, and the full name stays in the
       drawer and the footer. */
    .site-header .navbar-brand span { font-size: .9rem; line-height: 1.15; }
    .site-header .navbar-brand small { display: none; }
}

/* ==========================================================================
   HERO: ARTWORK ONLY - nothing painted over the slide
   --------------------------------------------------------------------------
   Owner's call, 2026-08-26. Each slide's artwork already carries its own
   headline, price and call to action, so the badge, heading, subtitle AND the
   two buttons were all duplicating the image and sitting on top of it. Every
   overlay element is now hidden; the slide shows the picture and nothing else.

   This block lives at the END of the file ON PURPOSE. An earlier attempt sat
   above `.site-hero__badge { display: inline-flex; ... }` and lost on source
   order - identical specificity, last one wins. Hence the position, and the
   !important as belt-and-braces against a future append.

   The <h1> is CLIPPED rather than removed, so the slide keeps an accessible
   name for screen readers while showing nothing on screen.

   Slides stay clickable wherever the admin set a link on the banner row, so no
   call to action is actually lost.

   To restore the copy and buttons: delete this block. The admin's title and
   subtitle are still stored and still rendered into the markup.
   ====================================================================== */
.site-hero__badge,
.site-hero__inner p,
.site-hero__inner .btn,
.site-hero__inner .d-flex { display: none !important; }

.site-hero__inner h1 {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

/* No text left to keep legible, so the darkening wash only muddied the
   artwork. Removed entirely - the picture shows exactly as uploaded. */
.site-hero__slide::before { background: none !important; }