/* ==========================================================================
   MADE EASY Publications - New Home Page
   --------------------------------------------------------------------------
   Every rule is scoped under .nh-home so nothing leaks into the rest of the
   site (style.css / screens.css use very broad selectors).
   Fully responsive: 1440 / 1200 / 992 / 768 / 576 / 400 breakpoints.
   ========================================================================== */

/* The legacy left category rail. query.js still fills #categoryList and the
   header's CATEGORIES button toggles it, so the markup stays in the page — but
   on desktop the new "Popular Categories" chips replace it. Deliberately NOT
   scoped under .nh-home so the resets below never touch its old styling. */
.nh-legacy-catrail { display: none; }
@media (max-width: 893px) {
    .nh-legacy-catrail { display: block; width: 100%; }
    .nh-legacy-catrail .leftsection { float: none; width: 100%; margin: 0; }
    /* collapsed until the header's CATEGORIES button calls categoryHideShow() */
    .nh-legacy-catrail #categoryList { display: none; }
}

.nh-home {
    --nh-blue: #0d63c9;
    --nh-blue-dark: #0a4c9e;
    --nh-blue-mid: #1a7fe0;
    --nh-tint: #e6f0fc;
    --nh-tint-2: #f2f7fe;
    --nh-red: #e02b26;
    --nh-orange: #f97316;
    --nh-green: #128a4d;
    --nh-ink: #14213d;
    --nh-body: #3d4a63;
    --nh-muted: #6b7a94;
    --nh-line: #d8e4f5;
    --nh-card: #ffffff;
    --nh-radius: 10px;
    --nh-shadow: 0 2px 10px rgba(13, 99, 201, .07);
    --nh-shadow-hover: 0 8px 22px rgba(13, 99, 201, .16);

    width: 100%;
    float: left;
    background: #fff;
    font-family: "Open Sans", "Segoe UI", Arial, sans-serif;
    color: var(--nh-body);
    -webkit-font-smoothing: antialiased;
}

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

.nh-home a { text-decoration: none; color: inherit; }
.nh-home ul { list-style: none; margin: 0; padding: 0; }
.nh-home li { float: none; }
.nh-home img { max-width: 100%; display: block; border: 0; }

/* Only reset box metrics here. Colour and weight are set per component so a
   single-class component rule is never out-specified by this reset. */
.nh-home h1, .nh-home h2, .nh-home h3, .nh-home h4, .nh-home p {
    margin: 0;
    padding: 0;
    line-height: 1.4;
}
.nh-home button {
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    border: 0;
    background: none;
    -webkit-appearance: none;
    appearance: none;
}

/* ---------- layout shell ------------------------------------------------- */

/* Full-width layout: sections span the whole viewport, held off the glass by a
   fluid gutter only. Nothing is capped at 1170px any more. */
.nh-container {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding: 0 var(--me-gutter, clamp(12px, 2vw, 34px));
}

/* Edge-to-edge band — no gutter at all (used by the hero + promo strip). */
.nh-bleed {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* The site header/footer wrap their contents in .main_wrapper, which is a fixed
   1170px. newhome.css only loads on the home page, so widening it here makes the
   menu strip full width on the home page without touching any other page. */
.main_wrapper {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    padding: 0 var(--me-gutter, clamp(12px, 2vw, 34px));
}

/* The header's logo / postal-button / search row is a non-wrapping flex row with
   a 366px logo, so it collides on small screens. Let it wrap and cap the logo. */
/* screens.css makes .searchfildcntr 100% wide below 1024px, so from there down
   the row must wrap and give the search field its own line instead of squeezing
   it (which pushed the submit button past the right edge). */
@media (max-width: 1024px) {
    .main_wrapper > div[style*="flex"] {
        flex-wrap: wrap;
        row-gap: 10px;
        padding: 8px 0;
    }
    .logo img { width: auto; max-width: 210px; height: auto; }
    /* flex would otherwise shrink the 100%-wide search field instead of wrapping */
    .searchfildcntr { box-sizing: border-box; flex: 0 0 100%; }
}
/* Below 480px screens.css absolutely positions the submit, so leave the text
   field full width there; above it, reserve room for the 42px button. */
@media (min-width: 481px) and (max-width: 1024px) {
    .searchfildcntr input[type="text"] { max-width: calc(100% - 48px); }
}

.nh-section { padding: 26px 0; }
.nh-section--tint { background: var(--nh-tint); }
.nh-section--soft { background: var(--nh-tint-2); }

/* Rounded card-style band, as in the new design */
.nh-band {
    background: var(--nh-tint);
    border-radius: 14px;
    padding: 22px 20px;
    margin: 18px 0;
}
.nh-band--plain {
    background: #fff;
    border: 1px solid var(--nh-line);
}

/* ---------- section heading --------------------------------------------- */

.nh-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}
.nh-head__title {
    font-size: 19px;
    font-weight: 700;
    color: var(--nh-ink);
    letter-spacing: -.2px;
}
.nh-head__title em {
    font-style: normal;
    color: var(--nh-red);
}
.nh-head__sub {
    display: block;
    font-size: 12.5px;
    font-weight: 400;
    color: var(--nh-muted);
    margin-top: 3px;
}
.nh-home .nh-viewall {
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 600;
    color: var(--nh-blue);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: gap .18s ease;
}
.nh-viewall:hover { gap: 11px; color: var(--nh-blue-dark); }
.nh-viewall svg { width: 15px; height: 15px; }

/* ======================================================================== */
/*  1. HERO SLIDER                                                          */
/* ======================================================================== */

/* The banner artwork carries its own headline and book shot, so the slider only
   supplies the stage: a soft tinted band the artwork sits on, pill pagination
   parked in the artwork's lower whitespace, and arrows that fade in on hover.
   Artwork is never cropped — anything off-ratio is fitted inside the stage and
   centred on the tint instead of being stretched or cut.

   Not full-bleed: --me-gutter is the exact variable the exam menu bar's own
   width comes from (newheader.css), and both boxes are measured from the same
   x=0 origin (body has no padding; <header> and .nh-home are both full-width
   with none either), so the slider's edges land on the menu's edges at every
   width. Margin, not padding — padding would stretch the tinted stage instead
   of narrowing it. Corners stay square, matching the artwork's own edges. */
.nh-hero {
    position: relative;
    /* style.css:27 sets `header, section { display: inline-block; width: 100% }`
       and this is a <section>, so that explicit width has to be cleared first —
       otherwise the box stays viewport-wide and the margin below just shoves it
       right, overflowing the page by one gutter instead of narrowing it. */
    display: block;
    width: auto;
    margin: 0 var(--me-gutter, clamp(12px, 2vw, 34px));
    border-radius: 0;
    /* One fixed stage for every slide. BOOK_BANNER uploads are hand-cut, so they
       are close to but never exactly one size — the current set runs 914-916 wide
       by 393, 394 and 398 tall. With `width:100%; height:auto` each slide sized
       itself off its own file, the tallest one set the shared flex track (398/393
       is an 11px jump once scaled to full width) and the rest sat inside it with
       a gap, so the slider changed height as it advanced. Nothing stops a future
       upload from being further off. Taking the height from a ratio instead makes
       the stage identical on every slide whatever the admin uploads; the ratio is
       the artwork spec (915x393), so on-spec banners fill it exactly. Retune it
       here if that spec changes — stage height and the dots both follow. */
    --nh-hero-ratio: 915 / 393;
    aspect-ratio: var(--nh-hero-ratio);
    overflow: hidden;
    /* echoes the artwork's own backdrop, so letterboxing on an off-ratio
       banner reads as part of the design rather than as a gap */
    background:
        radial-gradient(120% 150% at 88% 8%, #eaf1ff 0%, rgba(234, 241, 255, 0) 55%),
        linear-gradient(107deg, #e8f1ff 0%, #f7fbff 46%, #eef4ff 100%);
    box-shadow: inset 0 -1px 0 var(--nh-line);
    /* No min-height. The ratio above always yields one, and a floor actively
       breaks the alignment: below ~330px the floor beats the ratio's height, and
       the ratio then works backwards and widens the box to match it — measured
       6.66px past the menu bar's right edge at 320px. */
}
.nh-hero__track {
    display: flex;
    align-items: stretch;         /* every slide is exactly the stage height */
    height: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.nh-hero__track::-webkit-scrollbar { display: none; }
.nh-hero__slide {
    flex: 0 0 100%;
    /* a flex item defaults to min-width:auto, so an oversized banner could push
       the slide wider than the stage and knock the scroll snapping out of step */
    min-width: 0;
    scroll-snap-align: start;
}
.nh-home .nh-hero__link { display: block; height: 100%; }
.nh-hero__slide img {
    width: 100%;
    height: 100%;
    /* contain, not cover: the artwork carries its own headline and book shot, so
       filling an off-ratio upload would crop the copy out. It is fitted whole and
       centred on the tint instead — that is what the gradient behind it is for. */
    object-fit: contain;
    object-position: center;
}

/* ---- pill pagination --------------------------------------------------- */
.nh-hero__dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: clamp(9px, 1.5vw, 24px);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: clamp(6px, .7vw, 11px);
    padding: 0 14px;
    z-index: 2;
}
.nh-home .nh-hero__dot {
    position: relative;
    width: clamp(22px, 2.4vw, 40px);
    height: clamp(7px, .7vw, 10px);
    border-radius: 999px;
    background: #c9cee4;
    border: 0;
    padding: 0;
    transition: background .22s ease, width .22s ease, transform .22s ease;
}
/* keeps the tap target at 44px without fattening the pill itself */
.nh-home .nh-hero__dot:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    min-width: 44px;
    height: 44px;
}
.nh-home .nh-hero__dot:hover { background: #a9b1d0; }
.nh-home .nh-hero__dot.is-active {
    width: clamp(34px, 3.6vw, 58px);
    background: var(--nh-blue);
}
.nh-home .nh-hero__dot:focus-visible {
    outline: 2px solid var(--nh-blue-dark);
    outline-offset: 3px;
}

/* ---- arrows ------------------------------------------------------------ */
.nh-home .nh-hero__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 4px 16px rgba(20, 33, 61, .16);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--nh-ink);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease, background .2s ease, color .2s ease;
    z-index: 2;
}
.nh-hero:hover .nh-hero__nav,
.nh-home .nh-hero__nav:focus-visible {
    opacity: 1;
    visibility: visible;
}
.nh-home .nh-hero__nav:hover {
    background: var(--nh-blue);
    color: #fff;
}
.nh-hero__nav--prev { left: clamp(8px, 1.4vw, 22px); }
.nh-hero__nav--next { right: clamp(8px, 1.4vw, 22px); }
.nh-hero__nav svg { width: 18px; height: 18px; }

/* Touch screens have no hover and swipe the track instead — the pills stay. */
@media (max-width: 767px) {
    .nh-home .nh-hero__nav { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .nh-home .nh-hero__dot,
    .nh-home .nh-hero__nav { transition: none; }
}

/* Promo strip (discount / catalogue banners) — sits under the hero and shares its
   edges, so it reads the same --me-gutter the hero and the exam menu bar use
   rather than running full-bleed past them. Margin with width:auto, not
   width:100% plus margin: the latter keeps the grid viewport-wide and pushes it
   two gutters past the right edge. The gutter is fluid and floors at 12px on
   phones, so the strip stays aligned at every width the column count changes at
   (4 columns, 2 from 991px down). The top margin lifts the tiles off the banner
   so the two bands read as separate cards; nothing at the bottom, .nh-finder
   below already brings its own 18px. */
.nh-promos {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    width: auto;
    margin: clamp(10px, 1vw, 16px) var(--me-gutter, clamp(12px, 2vw, 34px)) 0;
}
.nh-promos a {
    border-right: 1px solid var(--nh-line);
    border-bottom: 1px solid var(--nh-line);
    overflow: hidden;
    background: #fff;
    display: flex;
    align-items: center;
    transition: box-shadow .2s ease, transform .2s ease;
}
.nh-promos a:last-child { border-right: 0; }
.nh-promos img { width: 100%; height: auto; }
.nh-promos a:hover { box-shadow: var(--nh-shadow-hover); transform: translateY(-2px); }

/* ======================================================================== */
/*  2. FIND YOUR EXAM                                                       */
/* ======================================================================== */

.nh-finder {
    background: var(--nh-tint);
    border-radius: 14px;
    padding: 26px 20px 30px;
    margin: 18px 0;
    text-align: center;
}
.nh-finder__title {
    font-size: 27px;
    font-weight: 700;
    color: var(--nh-blue);
    letter-spacing: -.4px;
}
.nh-finder__sub {
    font-size: 14px;
    font-weight: 400;
    color: var(--nh-body);
    margin-top: 5px;
}
.nh-finder__form {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 20px;
}
.nh-field { position: relative; }
.nh-field select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 190px;
    height: 42px;
    padding: 0 34px 0 15px;
    font-size: 14px;
    font-weight: 600;
    color: var(--nh-ink);
    background: #fff;
    border: 1px solid var(--nh-line);
    border-radius: 8px;
    cursor: pointer;
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.nh-field select:focus,
.nh-field select:hover { border-color: var(--nh-blue-mid); }
.nh-field select:focus { box-shadow: 0 0 0 3px rgba(26, 127, 224, .16); }
.nh-field select:disabled { color: var(--nh-muted); background: #f4f7fb; cursor: not-allowed; }
.nh-field:after {
    content: "";
    position: absolute;
    right: 14px;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -5px;
    border-right: 2px solid var(--nh-muted);
    border-bottom: 2px solid var(--nh-muted);
    transform: rotate(45deg);
    pointer-events: none;
}
.nh-home .nh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    padding: 0 22px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background: var(--nh-blue);
    border-radius: 8px;
    transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.nh-btn:hover {
    background: var(--nh-blue-dark);
    box-shadow: 0 6px 16px rgba(13, 99, 201, .28);
    transform: translateY(-1px);
    color: #fff;
}
.nh-btn svg { width: 16px; height: 16px; }
.nh-finder__error {
    display: none;
    margin-top: 10px;
    font-size: 13px;
    color: var(--nh-red);
}
.nh-finder__error.is-shown { display: block; }

/* ======================================================================== */
/*  3. BOOK ROW  (scroll-snap carousel, no JS library needed)                */
/* ======================================================================== */

.nh-row { position: relative; }
.nh-row__track {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding: 2px 2px 12px;
    scrollbar-width: thin;
}
.nh-row__track::-webkit-scrollbar { height: 5px; }
.nh-row__track::-webkit-scrollbar-thumb { background: #c9d8ee; border-radius: 4px; }
.nh-row__track::-webkit-scrollbar-track { background: transparent; }

/* 6 cards visible on desktop */
.nh-row__track > * {
    flex: 0 0 calc((100% - (5 * 14px)) / 6);
    scroll-snap-align: start;
}

.nh-home .nh-row__nav {
    position: absolute;
    top: 38%;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--nh-line);
    box-shadow: 0 3px 12px rgba(20, 33, 61, .14);
    color: var(--nh-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
}
.nh-row__nav[hidden] { display: none; }
.nh-row__nav--prev { left: -13px; }
.nh-row__nav--next { right: -13px; }
.nh-row__nav svg { width: 15px; height: 15px; }
.nh-row__nav:hover { background: var(--nh-blue); color: #fff; border-color: var(--nh-blue); }

.nh-row__empty {
    padding: 26px 0;
    text-align: center;
    font-size: 13.5px;
    color: var(--nh-muted);
}

/* ---------- book card --------------------------------------------------- */

.nh-book {
    background: var(--nh-card);
    border: 1px solid var(--nh-line);
    border-radius: var(--nh-radius);
    padding: 10px;
    display: flex;
    flex-direction: column;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.nh-book:hover {
    box-shadow: var(--nh-shadow-hover);
    border-color: #bcd5f2;
    transform: translateY(-3px);
}
.nh-book__media {
    position: relative;
    display: block;
    border-radius: 7px;
    overflow: hidden;
    background: #f4f7fb;
}
.nh-book__media img {
    width: 100%;
    height: 178px;
    object-fit: contain;
    object-position: center;
    transition: transform .3s ease;
}
.nh-book:hover .nh-book__media img { transform: scale(1.04); }
.nh-book__flag {
    position: absolute;
    top: 7px;
    left: 7px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    padding: 4px 7px;
    border-radius: 4px;
    color: #fff;
    background: var(--nh-red);
    letter-spacing: .3px;
    text-transform: uppercase;
}
.nh-book__flag--pre { background: #670e6c; }
.nh-book__flag--out { background: #8a8f99; }

.nh-home .nh-book__title {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--nh-ink);
    line-height: 1.42;
    margin: 9px 0 4px;
    min-height: 36px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.nh-book__isbn {
    font-size: 10.5px;
    color: var(--nh-muted);
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nh-book__foot {
    margin-top: auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
}
.nh-book__price { min-width: 0; }
.nh-book__cost {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--nh-ink);
    display: block;
}
.nh-book__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 2px;
}
.nh-book__mrp {
    font-size: 11.5px;
    color: var(--nh-muted);
    text-decoration: line-through;
}
.nh-book__off {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--nh-green);
    white-space: nowrap;
}
.nh-book__off small { font-size: inherit; }

.nh-home .nh-cart {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 7px;
    background: var(--nh-blue);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .18s ease, transform .18s ease;
}
.nh-cart:hover { background: var(--nh-blue-dark); transform: scale(1.07); color: #fff; }
.nh-cart svg { width: 16px; height: 16px; }
.nh-cart--pre { background: #670e6c; }
.nh-cart--pre:hover { background: #520a56; }
.nh-cart--out { background: #b9c0cc; cursor: not-allowed; }
.nh-cart--out:hover { background: #b9c0cc; transform: none; }

.nh-home .nh-book__sample {
    display: inline-block;
    margin-top: 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--nh-blue);
}
.nh-book__sample:hover { text-decoration: underline; }

/* ======================================================================== */
/*  4. BESTSELLERS                                                          */
/* ======================================================================== */

.nh-best {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
.nh-best__card {
    background: #fff;
    border: 1px solid var(--nh-line);
    border-radius: var(--nh-radius);
    padding: 12px;
    display: flex;
    flex-direction: column;
    transition: box-shadow .2s ease, transform .2s ease;
}
.nh-best__card:hover { box-shadow: var(--nh-shadow-hover); transform: translateY(-3px); }
.nh-best__media {
    background: #dbeafe;
    border-radius: 8px;
    height: 92px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.nh-best__media img { height: 100%; width: auto; max-width: 100%; object-fit: contain; }
.nh-best__name {
    font-size: 13px;
    font-weight: 600;
    color: var(--nh-ink);
    line-height: 1.4;
    margin: 10px 0 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 37px;
}
.nh-best__price {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}
.nh-best__mrp { color: var(--nh-muted); text-decoration: line-through; font-weight: 400; }
.nh-best__cost { color: var(--nh-ink); font-weight: 700; }

/* ======================================================================== */
/*  5. POPULAR CATEGORIES (chip tabs)                                       */
/* ======================================================================== */

.nh-chips { position: relative; padding-right: 34px; }
.nh-chips__track {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding: 3px 2px 8px;
    scrollbar-width: none;
}
.nh-chips__track::-webkit-scrollbar { display: none; }
.nh-home .nh-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    background: #fff;
    border: 1px solid var(--nh-line);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--nh-ink);
    white-space: nowrap;
    transition: all .18s ease;
}
.nh-chip__ico {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    background: var(--nh-tint);
    color: var(--nh-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.nh-chip__ico svg { width: 13px; height: 13px; }
.nh-chip:hover { border-color: var(--nh-blue-mid); color: var(--nh-blue); }
.nh-chip.is-active {
    background: var(--nh-orange);
    border-color: var(--nh-orange);
    color: #fff;
    box-shadow: 0 4px 12px rgba(249, 115, 22, .3);
}
.nh-chip.is-active .nh-chip__ico { background: rgba(255, 255, 255, .28); color: #fff; }
.nh-home .nh-chips__more {
    position: absolute;
    right: 0;
    top: 4px;
    width: 32px;
    height: 40px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--nh-line);
    color: var(--nh-blue);
    display: flex;
    align-items: center;
    justify-content: center;
}
.nh-chips__more:hover { background: var(--nh-blue); color: #fff; border-color: var(--nh-blue); }
.nh-chips__more svg { width: 15px; height: 15px; }

/* Stream filter that sits beside a category heading */
.nh-streamfilter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--nh-muted);
    font-weight: 600;
}
.nh-streamfilter select {
    height: 34px;
    padding: 0 8px 0 10px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--nh-ink);
    background: #fff;
    border: 1px solid var(--nh-line);
    border-radius: 7px;
    cursor: pointer;
    outline: none;
    min-width: 150px;
    max-width: 230px;
}
.nh-streamfilter select:focus { border-color: var(--nh-blue-mid); }
.nh-head__tools {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 0 0 auto;
    flex-wrap: wrap;
}

/* Category panels (only the active one is rendered visible) */
.nh-catpanel { display: none; }
.nh-catpanel.is-active { display: block; }

/* ======================================================================== */
/*  6. WHY STUDENTS TRUST                                                   */
/* ======================================================================== */

.nh-trust {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
.nh-trust__card {
    background: #fff;
    border: 1px solid var(--nh-line);
    border-radius: var(--nh-radius);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: box-shadow .2s ease, transform .2s ease;
}
.nh-trust__card:hover { box-shadow: var(--nh-shadow-hover); transform: translateY(-3px); }
.nh-trust__ico {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--nh-tint);
    color: var(--nh-blue);
    display: flex;
    align-items: center;
    justify-content: center;
}
.nh-trust__ico svg { width: 21px; height: 21px; }
.nh-trust__body { min-width: 0; }
.nh-trust__t {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--nh-ink);
    margin-bottom: 2px;
}
.nh-trust__d {
    display: block;
    font-size: 11.5px;
    font-weight: 400;
    color: var(--nh-muted);
    line-height: 1.45;
}

/* ======================================================================== */
/*  7. OUR INITIATIVES                                                      */
/* ======================================================================== */

.nh-init { padding: 30px 0 36px; }
.nh-init__head {
    text-align: center;
    font-size: 30px;
    font-weight: 700;
    color: var(--nh-red);
    letter-spacing: -.5px;
    margin-bottom: 6px;
}
.nh-init__head span { color: var(--nh-blue); }
.nh-init__rule {
    width: 190px;
    height: 3px;
    background: var(--nh-blue);
    border-radius: 3px;
    margin: 0 auto 24px;
    opacity: .45;
}
.nh-init__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
.nh-init__card {
    background: #f4f6f8;
    border: 1px solid #e6eaef;
    border-radius: var(--nh-radius);
    padding: 16px 12px 14px;
    text-align: center;
    transition: box-shadow .2s ease, transform .2s ease, background .2s ease;
}
.nh-init__card:hover { background: #fff; box-shadow: var(--nh-shadow-hover); transform: translateY(-3px); }
.nh-init__logo {
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}
.nh-init__logo img { max-height: 100%; width: auto; }
.nh-init__label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.4;
}

/* ======================================================================== */
/*  RESPONSIVE                                                              */
/* ======================================================================== */

/* ---- very wide screens: let the row grow rather than stretch the cards ---- */
@media (min-width: 1900px) {
    .nh-row__track > * { flex-basis: calc((100% - (8 * 14px)) / 9); }
    .nh-best { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (min-width: 1600px) and (max-width: 1899px) {
    .nh-row__track > * { flex-basis: calc((100% - (7 * 14px)) / 8); }
    .nh-best { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 1367px) and (max-width: 1599px) {
    .nh-row__track > * { flex-basis: calc((100% - (6 * 14px)) / 7); }
}

/* ---- large desktop: 5 books per row ---- */
@media (max-width: 1280px) {
    .nh-row__track > * { flex-basis: calc((100% - (4 * 14px)) / 5); }
}

/* ---- small desktop / large tablet ---- */
@media (max-width: 1024px) {
    .nh-row__track > * { flex-basis: calc((100% - (3 * 14px)) / 4); }
    .nh-book__media img { height: 165px; }
    /* 2 x 2 — with four cards a 3-col grid would leave one orphan on row 2 */
    .nh-init__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nh-promos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nh-promos a:nth-child(2n) { border-right: 0; }
    .nh-row__nav--prev { left: -6px; }
    .nh-row__nav--next { right: -6px; }
}

/* ---- tablet ---- */
@media (max-width: 900px) {
    .nh-best { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nh-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nh-finder__title { font-size: 24px; }
    .nh-init__head { font-size: 26px; }
}

@media (max-width: 768px) {
    .nh-section { padding: 20px 0; }
    .nh-band, .nh-finder { padding: 20px 15px; border-radius: 12px; margin: 14px 0; }
    .nh-row__track > * { flex-basis: calc((100% - (2 * 12px)) / 3); }
    .nh-row__track { gap: 12px; }
    .nh-head { flex-wrap: wrap; align-items: flex-start; }
    .nh-head__title { font-size: 17px; }
    .nh-head__tools { width: 100%; justify-content: space-between; }
    .nh-streamfilter select { max-width: 100%; }
    /* touch scrolling replaces the arrows */
    .nh-row__nav { display: none !important; }
    /* the margin stays — the menu bar keeps its gutter on tablet/mobile too, so
       resetting it here would push the slider back out past the menu's edges */
    .nh-hero__nav { display: none !important; }
    .nh-init__head { font-size: 22px; }
    .nh-init__rule { width: 140px; margin-bottom: 18px; }
}

/* ---- large phone ---- */
@media (max-width: 576px) {
    /* no .nh-container padding override — --me-gutter already floors at 12px */
    .nh-row__track > * { flex-basis: calc((100% - 12px) / 2); }
    .nh-book__media img { height: 150px; }
    .nh-finder__title { font-size: 21px; }
    .nh-finder__sub { font-size: 13px; }
    .nh-finder__form { flex-direction: column; gap: 10px; }
    .nh-finder__form .nh-field,
    .nh-finder__form .nh-field select,
    .nh-finder__form .nh-btn { width: 100%; }
    .nh-best { gap: 12px; }
    .nh-best__media { height: 80px; }
    .nh-trust { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .nh-init__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .nh-init { padding: 22px 0 26px; }
    .nh-promos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
    .nh-promos a:nth-child(2n) { border-right: 0; }
    .nh-hero__dots { bottom: 8px; }
    .nh-hero__dot { width: 16px; height: 4px; }
    .nh-hero__dot.is-active { width: 22px; }
}

/* ---- small phone ---- */
@media (max-width: 400px) {
    .nh-row__track > * { flex-basis: 78%; }
    .nh-book__media img { height: 158px; }
    .nh-best { grid-template-columns: minmax(0, 1fr); }
    .nh-init__grid { grid-template-columns: minmax(0, 1fr); }
    .nh-head__title { font-size: 16px; }
}

/* ---- print / reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .nh-home * { transition: none !important; }
    .nh-row__track, .nh-chips__track, .nh-hero__track { scroll-behavior: auto; }
}