/* ==========================================================================
   custom-home.css
   Loaded last on the theme2 homepage so these rules win without editing
   any of the existing pdf-phase*.css files.

   Contents
     1. Shop By Category ....... manual arrow scrolling only
     2. Category rails ......... rectangular images with soft corners
     5. Brand strip ............ continuous marquee, pauses on hover
     6. Testimonials ........... centred, continuous marquee, pauses on hover
   ========================================================================== */


/* ==========================================================================
   1. SHOP BY CATEGORY - manual scrolling
   The auto-carousel class is no longer applied by the JS, but these rules
   guarantee sane layout even if a cached script still adds it.
   ========================================================================== */

.pdf2-category-track.is-auto-carousel {
    justify-content: flex-start;
}

/* The theme hides an arrow the moment it is disabled (opacity: 0), which meant
   the left arrow was invisible at scroll position 0. Keep both arrows on screen
   at all times; a dimmed arrow simply means that end is reached. */
.pdf2-category-shell .pdf2-scroll-btn,
.pdf2-category-shell .pdf2-scroll-btn:disabled,
.pdf2-category-shell .pdf2-scroll-btn.is-hidden {
    width: 38px;
    height: 58px;
    opacity: 1;
    pointer-events: auto;
    transition: opacity .18s ease, box-shadow .18s ease;
}

.pdf2-category-shell .pdf2-scroll-btn:disabled,
.pdf2-category-shell .pdf2-scroll-btn.is-hidden {
    opacity: .4;
    cursor: default;
}

/* Give the arrows room so they never sit on top of the first or last card. */
.pdf2-category-shell {
    padding-right: 46px;
    padding-left: 46px;
}

.pdf2-category-shell .pdf2-scroll-prev {
    left: 0;
}

.pdf2-category-shell .pdf2-scroll-next {
    right: 0;
}

@media (max-width: 767.98px) {
    .pdf2-category-shell {
        padding-right: 34px;
        padding-left: 34px;
    }

    .pdf2-category-shell .pdf2-scroll-btn,
    .pdf2-category-shell .pdf2-scroll-btn:disabled,
    .pdf2-category-shell .pdf2-scroll-btn.is-hidden {
        width: 28px;
        height: 48px;
    }
}


/* ==========================================================================
   2. CATEGORY RAILS - rectangle with rounded corners
   Applies to the Benefit Pack / School Item / Toys Item rails rendered by
   sections/phase3_category_showcase.blade.php.
   ========================================================================== */

.pdf3-rail-image-wrap {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 0.84;
    padding: 8px;
    border: 1px solid rgba(15, 42, 62, .07);
    border-radius: 14px;
}

/* contain keeps the whole product visible; the wrap supplies the tinted card. */
.pdf3-rail-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

@media (max-width: 1199.98px) {
    .pdf3-rail-image-wrap {
        width: 100%;
        height: auto;
        border-radius: 13px;
    }
}

@media (max-width: 767.98px) {
    .pdf3-rail-image-wrap {
        width: 100%;
        height: auto;
        padding: 7px;
        border-radius: 12px;
    }
}

@media (max-width: 575.98px) {
    .pdf3-rail-image-wrap {
        width: 100%;
        height: auto;
        padding: 6px;
        border-radius: 11px;
    }
}

@media (max-width: 390px) {
    .pdf3-rail-image-wrap {
        width: 100%;
        height: auto;
        border-radius: 10px;
    }
}


/* ==========================================================================
   5. BRAND STRIP - continuous marquee, pauses on hover
   ========================================================================== */

.pdf4-partners {
    overflow: hidden;
}

.cub-marquee {
    position: relative;
    overflow: hidden;
    width: 100%;
    /* Soft fade at both edges so cards enter and leave gently. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.cub-marquee-track {
    display: flex;
    width: max-content;
    flex-wrap: nowrap;
    align-items: center;
    gap: 26px;
    will-change: transform;
}

/* Marquee movement is driven by JS (requestAnimationFrame) rather than a CSS
   animation so the pause-on-hover is instant and resumes from the same spot. */

/* The theme sets `.phase1-home .pdf4-partner-track { display: grid }`, which is
   more specific than a single class. Without these overrides the strip renders
   as a 6-column grid and the marquee clones stack into rows. */
.pdf4-partners .cub-marquee-track,
.phase1-home .pdf4-partners .cub-marquee-track,
.phase1-home .pdf4-partner-track.cub-marquee-track {
    display: flex !important;
    width: max-content !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    gap: 26px;
}

.pdf4-partners .cub-marquee-track .pdf4-partner-card,
.phase1-home .pdf4-partners .cub-marquee-track .pdf4-partner-card {
    width: 150px;
    flex: 0 0 150px;
    min-width: 150px;
}

@media (max-width: 767.98px) {

    .pdf4-partners .cub-marquee-track .pdf4-partner-card,
    .phase1-home .pdf4-partners .cub-marquee-track .pdf4-partner-card {
        width: 120px;
        flex-basis: 120px;
        min-width: 120px;
    }
}

@media (max-width: 767.98px) {
    .cub-marquee-track {
        gap: 18px;
    }
}


/* ==========================================================================
   6. TESTIMONIALS - centred + continuous marquee
   ========================================================================== */

.pdf4-testimonials .pdf4-section-heading--center {
    text-align: center;
}

.cub-testimonial-marquee .cub-marquee-track {
    align-items: stretch;
    gap: 22px;
    padding: 6px 2px 10px;
}

.cub-testimonial-marquee .pdf4-testimonial-card {
    display: flex;
    width: 360px;
    max-width: 82vw;
    flex: 0 0 360px;
    flex-direction: column;
    text-align: center;
}

/* Centre the quote and the author block within each card. */
.cub-testimonial-marquee .pdf4-testimonial-stars {
    justify-content: center;
}

.cub-testimonial-marquee .pdf4-testimonial-quote {
    flex: 1 1 auto;
    text-align: center;
}

.cub-testimonial-marquee .pdf4-testimonial-author {
    justify-content: center;
    text-align: left;
}

/* When the cards do not overflow there is nothing to scroll, so centre them. */
.cub-marquee.is-static .cub-marquee-track {
    width: 100%;
    justify-content: center;
    transform: none !important;
}

/* A single approved testimonial was rendering as one narrow card adrift in a
   wide row. Let it breathe so the section still looks deliberate. */
.cub-testimonial-marquee.is-static .pdf4-testimonial-card {
    width: min(560px, 92vw) !important;
    flex-basis: min(560px, 92vw) !important;
    max-width: 92vw !important;
}

.cub-testimonial-marquee.is-static .cub-marquee-track {
    padding-bottom: 4px;
}

@media (max-width: 767.98px) {
    .cub-testimonial-marquee .pdf4-testimonial-card {
        width: 300px;
        max-width: 86vw;
        flex-basis: 300px;
    }

    .cub-testimonial-marquee .cub-marquee-track {
        gap: 16px;
    }
}

@media (max-width: 575.98px) {
    .cub-testimonial-marquee .pdf4-testimonial-card {
        width: 272px;
        flex-basis: 272px;
    }
}


/* ==========================================================================
   Reduced motion - honour the OS setting for every animation above.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .cub-marquee-track {
        transform: none !important;
    }

    .cub-marquee {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}


/* ==========================================================================
   7. CATEGORY RAILS - bigger cards, visible arrows, View More
   Benefit Pack / School Item / Toys Item rails.
   ========================================================================== */

/* --- bigger cards --------------------------------------------------------- */

.pdf3-rail-item {
    flex: 0 0 184px;
}

.pdf3-rail-item-title {
    font-size: 13px;
}

@media (max-width: 1199.98px) {
    .pdf3-rail-item {
        flex-basis: 168px;
    }
}

@media (max-width: 767.98px) {
    .pdf3-rail-item {
        flex-basis: 142px;
    }

    .pdf3-rail-item-title {
        font-size: 12px;
    }
}

@media (max-width: 575.98px) {
    .pdf3-rail-item {
        flex-basis: 132px;
    }
}

@media (max-width: 390px) {
    .pdf3-rail-item {
        flex-basis: 122px;
    }
}

/* --- arrows always visible ------------------------------------------------ */

.pdf3-rail-shell .pdf3-scroll-btn,
.pdf3-rail-shell .pdf3-scroll-btn:disabled,
.pdf3-rail-shell .pdf3-scroll-btn.is-hidden {
    width: 38px;
    height: 58px;
    opacity: 1;
    pointer-events: auto;
    transition: opacity .18s ease, box-shadow .18s ease;
}

.pdf3-rail-shell .pdf3-scroll-btn:disabled,
.pdf3-rail-shell .pdf3-scroll-btn.is-hidden {
    opacity: .4;
    cursor: default;
}

.pdf3-rail-shell {
    padding-right: 46px;
    padding-left: 46px;
}

.pdf3-rail-shell .pdf3-scroll-prev {
    left: 0;
}

.pdf3-rail-shell .pdf3-scroll-next {
    right: 0;
}

/* When expanded there is no horizontal scrolling left to do. */
.pdf3-rail-shell.is-expanded .pdf3-scroll-btn {
    display: none;
}

.pdf3-rail-shell.is-expanded {
    padding-right: 0;
    padding-left: 0;
}

/* --- expanded state: wrap into a grid ------------------------------------- */

.pdf3-rail-shell.is-expanded .pdf3-rail-track {
    display: grid;
    overflow: visible;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 18px;
}

.pdf3-rail-shell.is-expanded .pdf3-rail-item {
    flex: 0 0 auto;
    width: 100%;
}

@media (max-width: 767.98px) {
    .pdf3-rail-shell {
        padding-right: 34px;
        padding-left: 34px;
    }

    .pdf3-rail-shell .pdf3-scroll-btn,
    .pdf3-rail-shell .pdf3-scroll-btn:disabled,
    .pdf3-rail-shell .pdf3-scroll-btn.is-hidden {
        width: 28px;
        height: 48px;
    }

    .pdf3-rail-shell.is-expanded .pdf3-rail-track {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 12px;
    }
}

/* --- View More control ---------------------------------------------------- */

.cub-rail-more {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding-top: 12px;
    gap: 14px;
}

.cub-rail-more-btn {
    display: inline-flex;
    align-items: center;
    padding: 8px 20px;
    border: 1px solid #d7dee7;
    border-radius: 999px;
    background: #fff;
    color: #16304d;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    gap: 8px;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.cub-rail-more-btn:hover,
.cub-rail-more-btn:focus-visible {
    border-color: #16304d;
    background: #eef2f7;
    color: #0f2036;
}

.cub-rail-more-btn i {
    font-size: 11px;
    transition: transform .2s ease;
}

.cub-rail-more-btn[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.cub-rail-all-link {
    color: #5a5a5a;
    font-size: 12.5px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cub-rail-all-link:hover {
    color: #16304d;
}

/* The script unhides this only when the rail actually overflows. */
.cub-rail-more {
    display: none;
}

.cub-rail-more.is-visible {
    display: flex;
}


/* ==========================================================================
   8. MOBILE RAILS - override home-responsive-fix.css
   That file forces the rails into a 3-column grid with `!important` below
   576px, which removes the horizontal scroll, hides the arrows and squashes
   the images into small squares. These rules restore the scrolling row and
   make the cards noticeably larger, matching the desktop behaviour.
   ========================================================================== */

@media (max-width: 767.98px) {

    /* Collapsed rails scroll sideways again. */
    .phase1-home .pdf3-rail-shell:not(.is-expanded) .pdf3-rail-track,
    .pdf3-rail-shell:not(.is-expanded) .pdf3-rail-track {
        display: flex !important;
        overflow-x: auto !important;
        width: auto !important;
        flex-wrap: nowrap !important;
        grid-template-columns: none !important;
        gap: 12px !important;
        padding: 10px 2px 6px !important;
        scroll-behavior: smooth;
    }

    /* Bigger cards: roughly two and a half per screen instead of three. */
    .phase1-home .pdf3-rail-shell:not(.is-expanded) .pdf3-rail-item,
    .pdf3-rail-shell:not(.is-expanded) .pdf3-rail-item {
        width: auto !important;
        max-width: none !important;
        flex: 0 0 min(40vw, 158px) !important;
    }

    /* Rectangle, not the forced square. */
    .phase1-home .pdf3-rail-image-wrap,
    .pdf3-rail-shell .pdf3-rail-image-wrap {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 0.84 !important;
        padding: 7px !important;
        border-radius: 12px !important;
        margin-inline: 0;
    }

    .phase1-home .pdf3-rail-item-title,
    .pdf3-rail-shell .pdf3-rail-item-title {
        min-height: 34px;
        font-size: 12px;
    }

    /* Expanded rails wrap into a two-column grid on the narrowest screens. */
    .phase1-home .pdf3-rail-shell.is-expanded .pdf3-rail-track,
    .pdf3-rail-shell.is-expanded .pdf3-rail-track {
        display: grid !important;
        overflow: visible !important;
        width: 100% !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    .phase1-home .pdf3-rail-shell.is-expanded .pdf3-rail-item,
    .pdf3-rail-shell.is-expanded .pdf3-rail-item {
        width: 100% !important;
        flex: none !important;
    }
}

@media (max-width: 575.98px) {

    .phase1-home .pdf3-rail-shell:not(.is-expanded) .pdf3-rail-item,
    .pdf3-rail-shell:not(.is-expanded) .pdf3-rail-item {
        flex: 0 0 min(44vw, 150px) !important;
    }

    .phase1-home .pdf3-rail-shell.is-expanded .pdf3-rail-track,
    .pdf3-rail-shell.is-expanded .pdf3-rail-track {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    /* Keep the arrows clear of the first and last card. */
    .phase1-home .pdf3-category-rail {
        padding-inline: 4px !important;
    }
}

/* The floating chat dock sits bottom-right; give the View More row enough
   clearance that the buttons never cover it on a phone. */
@media (max-width: 767.98px) {
    .cub-rail-more {
        padding-right: 72px;
        padding-bottom: 4px;
    }
}


/* ==========================================================================
   9. DISCOUNTS & OFFERS - restrained header and tabs
   The brand map recoloured the old blue title bar to solid red, which reads as
   a heavy slab across the full width. This replaces it with a white header, a
   red accent rule, and underline-style tabs - the same treatment the rest of
   the storefront uses for section headings.
   ========================================================================== */

.pdf2-quick-deal-panel {
    border: 1px solid #e6e9ec !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 3px rgba(20, 25, 30, .05);
}

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

/* Discounts & Offers heading band and underline are defined once, in section 12,
   so this block only handles the lightning glyph beside the title. */
.pdf2-quick-deal-titlebar h2 span {
    margin-left: 5px;
    font-size: 17px;
}

/* --- tabs ----------------------------------------------------------------- */

.pdf2-deal-tabs {
    padding: 0 8px !important;
    border-bottom: 1px solid #eef1f3 !important;
    gap: 2px !important;
}

.pdf2-deal-tab {
    position: relative;
    min-height: 42px !important;
    padding: 11px 15px !important;
    border-right: 0 !important;
    background: transparent !important;
    color: #5b646c !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    transition: color .16s ease;
}

.pdf2-deal-tab:hover,
.pdf2-deal-tab:focus-visible {
    background: transparent !important;
    color: #e30613 !important;
}

/* Active tab: dark label plus a red underline, no filled block. */
.pdf2-deal-tab.is-active,
.pdf2-deal-tab.is-active:hover,
.pdf2-deal-tab.is-active:focus-visible {
    background: transparent !important;
    color: #14181c !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}

.pdf2-deal-tab.is-active::after {
    position: absolute;
    right: 12px;
    bottom: -1px;
    left: 12px;
    height: 3px;
    border-radius: 2px 2px 0 0;
    background: #e30613;
    content: "";
}

.pdf2-deal-tab:focus-visible {
    outline: 2px solid #e30613 !important;
    outline-offset: -3px;
    border-radius: 6px;
}

@media (max-width: 767.98px) {
    .pdf2-deal-tab {
        min-height: 38px !important;
        padding: 10px 12px !important;
        font-size: 11.5px !important;
    }
}


/* ==========================================================================
   10. CATEGORY RAIL HEADER - filled navy pill, white text in both states
   Covers Benefit Pack / School Item / Toys Item / Lifestyle, plus the
   View More button and the "See all ..." link beneath each rail.

   Two problems this fixes:
     - resting state had been flattened to an outline with dark text
     - on hover the pill filled navy but the label stayed red, so the text
       became unreadable against the dark background
   White text is forced in every state so the label can never disappear.
   ========================================================================== */

.pdf3-rail-title,
.pdf3-rail-title-wrap .pdf3-rail-title,
.pdf3-category-rail .pdf3-rail-title {
    min-width: 150px !important;
    min-height: 38px !important;
    padding: 8px 18px !important;
    border: 1px solid #16304d !important;
    border-radius: 8px !important;
    background: #16304d !important;
    color: #fff !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    letter-spacing: .01em !important;
    text-decoration: none !important;
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

/* The label sits inside the anchor in some builds, so force the colour on
   descendants too - otherwise an inherited red wins and the text vanishes. */
.pdf3-rail-title *,
.pdf3-rail-title-wrap .pdf3-rail-title * {
    color: #fff !important;
}

.pdf3-rail-title:hover,
.pdf3-rail-title:focus-visible,
.pdf3-rail-title:active,
.pdf3-rail-title-wrap .pdf3-rail-title:hover,
.pdf3-category-rail .pdf3-rail-title:hover {
    border-color: #0f2036 !important;
    background: #0f2036 !important;
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(15, 32, 54, .22) !important;
}

.pdf3-rail-title:hover *,
.pdf3-rail-title:focus-visible * {
    color: #fff !important;
}

.pdf3-rail-title:focus-visible {
    outline: 2px solid #5c7ea6 !important;
    outline-offset: 2px !important;
}


/* --- "View All" button on the right of the rail header -------------------- */

.pdf3-rail-title-wrap .pdf3-view-all,
.pdf3-section-head .pdf3-view-all,
.pdf3-view-all {
    padding: 8px 18px !important;
    border: 1px solid #c9d3df !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #16304d !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    text-decoration: none !important;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease !important;
}

.pdf3-view-all:hover,
.pdf3-view-all:focus-visible {
    border-color: #16304d !important;
    background: #16304d !important;
    color: #fff !important;
}

.pdf3-view-all:hover *,
.pdf3-view-all:focus-visible * {
    color: #fff !important;
}


/* --- View More toggle and "See all ..." link ------------------------------ */

.cub-rail-more-btn {
    border: 1px solid #c9d3df !important;
    background: #fff !important;
    color: #16304d !important;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease !important;
}

.cub-rail-more-btn:hover,
.cub-rail-more-btn:focus-visible {
    border-color: #16304d !important;
    background: #16304d !important;
    color: #fff !important;
}

.cub-rail-more-btn:hover i,
.cub-rail-more-btn:focus-visible i,
.cub-rail-more-btn:hover .cub-rail-more-text,
.cub-rail-more-btn:focus-visible .cub-rail-more-text {
    color: #fff !important;
}

.cub-rail-all-link {
    padding: 7px 14px !important;
    border-radius: 8px !important;
    color: #16304d !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    transition: background-color .18s ease, color .18s ease !important;
}

.cub-rail-all-link:hover,
.cub-rail-all-link:focus-visible {
    background: #16304d !important;
    color: #fff !important;
    text-decoration: none !important;
}

@media (max-width: 767.98px) {

    .pdf3-rail-title,
    .pdf3-rail-title-wrap .pdf3-rail-title {
        min-width: 128px !important;
        min-height: 34px !important;
        padding: 7px 14px !important;
        font-size: 12.5px !important;
    }

    .pdf3-view-all {
        padding: 7px 13px !important;
        font-size: 12px !important;
    }
}


/* ==========================================================================
   11. SPOTLIGHT TITLE - same filled pill as the category rails
   The Lifestyle row uses .pdf3-spotlight-title rather than .pdf3-rail-title,
   so it missed the treatment in section 10 and ended up with dark text on a
   navy fill.
   ========================================================================== */

.pdf3-spotlight-title,
.pdf3-spotlight-head .pdf3-spotlight-title,
.pdf3-spotlight .pdf3-spotlight-title {
    display: inline-flex !important;
    min-width: 150px !important;
    min-height: 38px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 18px !important;
    border: 1px solid #16304d !important;
    border-radius: 8px !important;
    background: #16304d !important;
    color: #fff !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

.pdf3-spotlight-title *,
.pdf3-spotlight-title:hover,
.pdf3-spotlight-title:hover *,
.pdf3-spotlight-title:focus-visible,
.pdf3-spotlight-title:focus-visible * {
    color: #fff !important;
}

.pdf3-spotlight-title:hover,
.pdf3-spotlight-title:focus-visible {
    border-color: #0f2036 !important;
    background: #0f2036 !important;
    box-shadow: 0 3px 10px rgba(15, 32, 54, .22) !important;
}


/* ==========================================================================
   12. SECTION HEADINGS - centred, no slab
   The grey band behind every title read as a heavy full-width slab. This drops
   it and follows the pattern the testimonials block already used well: centred
   uppercase title, short rule beneath, subtitle under that, clean white behind.

   Also fixes the testimonials subtitle. Making the heading a flex row turned
   "Clients are Happy with our Service" into a flex item, which pushed it out to
   the right. It now wraps to its own full-width line below the title.
   ========================================================================== */

.pdf2-section-heading,
.pdf3-section-head,
.pdf4-section-heading,
.pdf2-quick-deal-titlebar {
    position: relative !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    min-height: 0 !important;
    padding: 18px 20px 16px !important;
    border-bottom: 0 !important;
    border-radius: 10px 10px 0 0 !important;
    background: #16304d !important;
    gap: 0 12px !important;
}

/* Remove the old left accent bar wherever it is drawn. */
.pdf2-section-heading::before,
.pdf3-section-head::before,
.pdf4-section-heading::before,
.pdf2-section-heading h2::before,
.pdf3-section-head h2::before,
.pdf4-section-heading h2::before,
.phase1-home .pdf2-section-heading::before,
.phase1-home .pdf3-section-head h2::before,
.pdf2-section-heading::after,
.pdf3-section-head::after,
.pdf4-section-heading::after,
.pdf2-quick-deal-titlebar::after {
    display: none !important;
    content: none !important;
}

.pdf2-section-heading h2,
.pdf3-section-head h2,
.pdf4-section-heading h2,
.pdf2-quick-deal-titlebar h2 {
    flex: 1 1 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #ffffff !important;
    font-size: 21px !important;
    font-weight: 750 !important;
    letter-spacing: .035em !important;
    line-height: 1.25 !important;
    text-align: center !important;
    text-transform: uppercase !important;
}

/* Short rule directly beneath the title text. */
.pdf2-section-heading h2::after,
.pdf3-section-head h2::after,
.pdf4-section-heading h2::after,
.pdf2-quick-deal-titlebar h2::after {
    display: block !important;
    width: 56px !important;
    height: 3px !important;
    margin: 9px auto 0 !important;
    border-radius: 2px !important;
    background: rgba(255, 255, 255, .85) !important;
    content: "" !important;
}

/* Discounts & Offers is the promotional block, so its rule stays red. */
.pdf2-quick-deal-titlebar h2::after {
    background: #ff4b57 !important;
}

/* Subtitle drops onto its own centred line instead of floating right. */
.pdf4-section-heading p,
.pdf3-section-head p,
.pdf2-section-heading p,
.pdf4-section-heading--center p {
    flex: 0 0 100% !important;
    width: 100% !important;
    margin: 9px 0 0 !important;
    color: rgba(255, 255, 255, .78) !important;
    font-size: 14px !important;
    text-align: center !important;
}

/* Right-hand actions keep their size. */
.pdf2-section-heading > a,
.pdf3-section-head > a,
.pdf4-section-heading > a,
.pdf2-section-heading .pdf2-view-all,
.pdf3-section-head .pdf3-view-all {
    flex: 0 0 auto !important;
}

/* Balance the title when a View All sits on the right. */
.pdf3-section-head:has(> a)::before,
.pdf2-section-heading:has(> a)::before {
    display: block !important;
    flex: 0 0 auto !important;
    width: 88px !important;
    height: 1px !important;
    background: none !important;
    content: "" !important;
}

@media (max-width: 767.98px) {

    .pdf2-section-heading,
    .pdf3-section-head,
    .pdf4-section-heading,
    .pdf2-quick-deal-titlebar {
        padding: 17px 13px 12px !important;
    }

    .pdf2-section-heading h2,
    .pdf3-section-head h2,
    .pdf4-section-heading h2,
    .pdf2-quick-deal-titlebar h2 {
        font-size: 16.5px !important;
        letter-spacing: .02em !important;
    }

    .pdf2-section-heading h2::after,
    .pdf3-section-head h2::after,
    .pdf4-section-heading h2::after,
    .pdf2-quick-deal-titlebar h2::after {
        width: 44px !important;
        margin-top: 7px !important;
    }

    .pdf4-section-heading p,
    .pdf3-section-head p,
    .pdf2-section-heading p {
        font-size: 13px !important;
    }

    .pdf3-section-head:has(> a)::before,
    .pdf2-section-heading:has(> a)::before {
        display: none !important;
    }
}


/* ==========================================================================
   13. LOW-CONTRAST TEXT
   "Only 10 left in stock" and similar were pale grey on white, which is hard
   to read and fails normal contrast guidance. Stock warnings now use a warm
   amber that reads as urgency; in-stock stays a calm green.
   ========================================================================== */

.pdf2-stock-text,
.pdf3-stock-text,
.pdf3-stock-note {
    font-size: 12px !important;
    font-weight: 600 !important;
}

/* Healthy stock reads as reassurance, not warning. */
.pdf2-stock-text.cub-stock-ok {
    color: #1d7a4c !important;
}

/* Low stock is the only state that should feel urgent. */
.pdf2-stock-text.cub-stock-low,
.pdf3-stock-note {
    color: #9a5b00 !important;
}

.pdf2-stock-text.cub-stock-out {
    color: #b02a20 !important;
}

/* Any card that has not picked up the modifier yet stays readable grey
   rather than inheriting an alarming colour. */
.pdf2-stock-text:not(.cub-stock-ok):not(.cub-stock-low):not(.cub-stock-out),
.pdf3-stock-text {
    color: #55606b !important;
}

/* Product names were mid-grey; darken for comfortable scanning. */
.pdf2-product-name,
.pdf3-product-name,
.pdf2-product-card .pdf2-product-name,
.pdf3-product-card .pdf3-product-name {
    color: #1f2933 !important;
    font-weight: 500 !important;
}

.pdf2-category-name,
.pdf3-rail-item-title {
    color: #253140 !important;
    font-weight: 600 !important;
}


/* ==========================================================================
   14. ACTIONS ON THE DARK HEADING BAND
   View All and similar buttons now sit on navy, so they need a light outline
   rather than the dark-on-white styling used elsewhere.
   ========================================================================== */

.pdf2-section-heading > a,
.pdf3-section-head > a,
.pdf4-section-heading > a,
.pdf2-section-heading .pdf2-view-all,
.pdf3-section-head .pdf3-view-all {
    padding: 7px 16px !important;
    border: 1px solid rgba(255, 255, 255, .55) !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: #fff !important;
    font-size: 12.5px !important;
    font-weight: 650 !important;
    text-decoration: none !important;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease !important;
}

.pdf2-section-heading > a:hover,
.pdf3-section-head > a:hover,
.pdf4-section-heading > a:hover,
.pdf3-section-head .pdf3-view-all:hover,
.pdf2-section-heading > a:focus-visible,
.pdf3-section-head > a:focus-visible {
    border-color: #fff !important;
    background: #fff !important;
    color: #16304d !important;
}

.pdf2-section-heading > a:hover *,
.pdf3-section-head > a:hover *,
.pdf3-section-head .pdf3-view-all:hover * {
    color: #16304d !important;
}

/* The lightning glyph beside Discounts & Offers stays bright on the dark band. */
.pdf2-quick-deal-titlebar h2 span {
    filter: brightness(1.15);
}

/* Round the panel below so it meets the dark band cleanly. */
.pdf2-quick-deal-panel,
.pdf2-category-panel {
    overflow: hidden !important;
    border-radius: 10px !important;
}

@media (max-width: 767.98px) {

    .pdf2-section-heading > a,
    .pdf3-section-head > a,
    .pdf4-section-heading > a,
    .pdf3-section-head .pdf3-view-all {
        padding: 6px 12px !important;
        font-size: 11.5px !important;
    }
}


/* ==========================================================================
   15. HEADING BAND - specificity backstop and pills on the dark band

   Two faults this corrects:

   a) Titles stayed dark on the navy band. custom-brand.css carried a
      `.pdf2-section-heading h2 { color: #101418 }` rule that matched the same
      specificity. Discounts & Offers was unaffected because its selector was not in
      that list, which is why one heading looked right and the rest did not.
      That rule is gone, and these `.phase1-home` prefixed copies raise
      specificity so nothing can quietly win again.

   b) The Lifestyle pill sat navy-on-navy. The spotlight head IS a
      .pdf3-section-head, so it received the dark band, and the pill inside it
      is the same navy. On the band the pill inverts to white with navy text.
   ========================================================================== */

.phase1-home .pdf2-section-heading h2,
.phase1-home .pdf3-section-head h2,
.phase1-home .pdf4-section-heading h2,
.phase1-home .pdf2-quick-deal-titlebar h2,
.phase1-storefront .pdf2-section-heading h2,
.phase1-storefront .pdf3-section-head h2,
.phase1-storefront .pdf4-section-heading h2 {
    color: #ffffff !important;
    text-align: center !important;
}

.phase1-home .pdf2-section-heading h2::after,
.phase1-home .pdf3-section-head h2::after,
.phase1-home .pdf4-section-heading h2::after {
    background: rgba(255, 255, 255, .85) !important;
}

/* Subtitle onto its own centred line, not floated to the right. */
.phase1-home .pdf4-section-heading p,
.phase1-home .pdf3-section-head p,
.phase1-home .pdf2-section-heading p,
.phase1-storefront .pdf4-section-heading p {
    flex: 0 0 100% !important;
    order: 9 !important;
    width: 100% !important;
    margin: 9px 0 0 !important;
    color: rgba(255, 255, 255, .78) !important;
    text-align: center !important;
}

.phase1-home .pdf2-section-heading,
.phase1-home .pdf3-section-head,
.phase1-home .pdf4-section-heading,
.phase1-home .pdf2-quick-deal-titlebar {
    flex-wrap: wrap !important;
    background: #16304d !important;
}

/* --- pills sitting on the dark band invert to white ---------------------- */

.pdf3-section-head .pdf3-spotlight-title,
.phase1-home .pdf3-section-head .pdf3-spotlight-title,
.pdf3-spotlight-head .pdf3-spotlight-title {
    border: 1px solid #ffffff !important;
    background: #ffffff !important;
    color: #16304d !important;
}

.pdf3-section-head .pdf3-spotlight-title *,
.pdf3-spotlight-head .pdf3-spotlight-title * {
    color: #16304d !important;
}

.pdf3-section-head .pdf3-spotlight-title:hover,
.pdf3-section-head .pdf3-spotlight-title:focus-visible,
.pdf3-spotlight-head .pdf3-spotlight-title:hover {
    border-color: #ffffff !important;
    background: rgba(255, 255, 255, .88) !important;
    color: #0f2036 !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .18) !important;
}

.pdf3-section-head .pdf3-spotlight-title:hover *,
.pdf3-spotlight-head .pdf3-spotlight-title:hover * {
    color: #0f2036 !important;
}

/* Category rails keep their own light header, so their navy pill still reads
   correctly there - only pills on the dark band are inverted. */
.pdf3-rail-title-wrap {
    background: linear-gradient(90deg, #f7fbfe 0%, #ffffff 72%) !important;
}

/* ========================================================================== 
   HOME NEWSLETTER - active conversion section
   ========================================================================== */
.cub-home-newsletter { position:relative; padding:clamp(28px,4vw,54px) 0; background:#f5f8fb; }
.cub-home-newsletter__shell { position:relative; isolation:isolate; overflow:hidden; border:1px solid rgba(22,48,77,.14); border-radius:24px; background:linear-gradient(135deg,#16304d 0%,#10273f 58%,#0f2036 100%); box-shadow:0 18px 46px rgba(15,32,54,.16); }
.cub-home-newsletter__shell::before { content:""; position:absolute; inset:0; z-index:-1; opacity:.36; background-image:radial-gradient(circle at 15% 25%,rgba(255,255,255,.18) 0 1px,transparent 1.5px),radial-gradient(circle at 80% 65%,rgba(255,255,255,.14) 0 1px,transparent 1.5px); background-size:26px 26px,34px 34px; }
.cub-home-newsletter__content { position:relative; z-index:2; display:grid; grid-template-columns:auto minmax(0,1fr) minmax(340px,.92fr); align-items:center; gap:22px; min-height:190px; padding:clamp(28px,4vw,48px); }
.cub-home-newsletter__icon { display:inline-flex; align-items:center; justify-content:center; width:70px; height:70px; border:1px solid rgba(255,255,255,.18); border-radius:20px; background:rgba(255,255,255,.11); box-shadow:inset 0 1px 0 rgba(255,255,255,.16); color:#fff; font-size:34px; animation:cub-home-newsletter-icon 3.2s ease-in-out infinite; }
.cub-home-newsletter__copy { min-width:0; }
.cub-home-newsletter__eyebrow { display:inline-flex; align-items:center; gap:6px; margin-bottom:7px; color:#b9d2ec; font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.cub-home-newsletter__copy h2 { margin:0 0 8px; color:#fff!important; font-size:clamp(25px,2.35vw,38px); font-weight:800; line-height:1.12; letter-spacing:-.02em; }
.cub-home-newsletter__copy h2 span { color:#cfe4f8!important; }
.cub-home-newsletter__copy p { max-width:610px; margin:0; color:rgba(255,255,255,.72); font-size:14px; line-height:1.65; }
.cub-home-newsletter__action { min-width:0; }
.phase1-storefront .cub-home-newsletter__form.cub-newsletter-form { display:flex; align-items:center; gap:8px; width:100%; min-height:58px; padding:6px; border:1px solid rgba(255,255,255,.22); border-radius:16px; background:#fff; box-shadow:0 10px 28px rgba(0,0,0,.14); transition:border-color .22s ease,box-shadow .22s ease,transform .22s ease; }
.phase1-storefront .cub-home-newsletter__form.cub-newsletter-form:focus-within { border-color:#8fb6db; background:#fff; box-shadow:0 13px 34px rgba(0,0,0,.18),0 0 0 4px rgba(143,182,219,.16); transform:translateY(-2px); }
.cub-home-newsletter__input-wrap { display:flex; align-items:center; flex:1 1 auto; min-width:0; gap:9px; padding-left:11px; }
.cub-home-newsletter__input-wrap>i { flex:0 0 auto; color:#5c7ea6; font-size:19px; }
.phase1-storefront .cub-home-newsletter__form input { width:100%; min-width:0; height:44px; padding:0; border:0; outline:0; background:transparent!important; color:#17283b!important; font-size:14px; font-weight:600; }
.phase1-storefront .cub-home-newsletter__form input::placeholder { color:#8b99aa!important; font-weight:500; }
.phase1-storefront .cub-home-newsletter__form button { position:relative; overflow:hidden; display:inline-flex!important; align-items:center; justify-content:center; flex:0 0 auto; gap:7px; min-width:132px; min-height:46px; padding:0 18px; border:0; border-radius:12px; background:#16304d!important; color:#fff!important; font-size:13px; font-weight:800; box-shadow:0 7px 16px rgba(22,48,77,.22); transition:background-color .2s ease,transform .2s ease,box-shadow .2s ease; }
.phase1-storefront .cub-home-newsletter__form button::before { content:""; position:absolute; top:-60%; left:-45%; width:34%; height:220%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.33),transparent); transform:rotate(18deg); transition:left .55s ease; }
.phase1-storefront .cub-home-newsletter__form button:hover,.phase1-storefront .cub-home-newsletter__form button:focus-visible { background:#0f2036!important; transform:translateY(-1px); box-shadow:0 9px 20px rgba(15,32,54,.30); }
.phase1-storefront .cub-home-newsletter__form button:hover::before,.phase1-storefront .cub-home-newsletter__form button:focus-visible::before { left:120%; }
.phase1-storefront .cub-home-newsletter__form button>i { font-size:18px; transition:transform .2s ease; }
.phase1-storefront .cub-home-newsletter__form button:hover>i { transform:translateX(3px); }
.phase1-storefront .cub-home-newsletter__form button.is-loading { pointer-events:none; opacity:.72; }
.phase1-storefront .cub-home-newsletter__form button.is-loading>i { animation:cub-newsletter-spin .8s linear infinite; }
.phase1-storefront .cub-home-newsletter__form.is-success { animation:cub-home-newsletter-success .72s ease; }
.cub-home-newsletter .cub-newsletter-message { min-height:20px; margin:7px 2px 0; padding:0; font-size:12px; font-weight:700; }
.cub-home-newsletter .cub-newsletter-message.is-success { color:#c9f7d7; }
.cub-home-newsletter .cub-newsletter-message.is-error { color:#ffd3d7; }
.cub-home-newsletter__privacy { display:flex; align-items:center; gap:5px; margin:2px 3px 0!important; color:rgba(255,255,255,.57)!important; font-size:11px!important; line-height:1.4!important; }
.cub-home-newsletter__glow { position:absolute; z-index:0; display:block; border-radius:999px; pointer-events:none; filter:blur(1px); }
.cub-home-newsletter__glow--one { top:-85px; right:14%; width:190px; height:190px; background:rgba(92,126,166,.22); animation:cub-home-newsletter-float 7s ease-in-out infinite; }
.cub-home-newsletter__glow--two { bottom:-105px; left:5%; width:225px; height:225px; background:rgba(255,255,255,.08); animation:cub-home-newsletter-float 9s ease-in-out infinite reverse; }
@keyframes cub-home-newsletter-icon { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-5px) rotate(-3deg)} }
@keyframes cub-home-newsletter-float { 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(12px,-10px,0) scale(1.06)} }
@keyframes cub-home-newsletter-success { 0%,100%{box-shadow:0 10px 28px rgba(0,0,0,.14)} 45%{box-shadow:0 10px 28px rgba(0,0,0,.14),0 0 0 5px rgba(201,247,215,.22)} }
@media (max-width:991.98px) { .cub-home-newsletter__content{grid-template-columns:auto minmax(0,1fr)} .cub-home-newsletter__action{grid-column:1/-1;width:100%} }
@media (max-width:575.98px) { .cub-home-newsletter{padding:22px 0} .cub-home-newsletter__shell{border-radius:18px} .cub-home-newsletter__content{grid-template-columns:1fr;gap:14px;padding:24px 16px;text-align:center} .cub-home-newsletter__icon{width:56px;height:56px;margin:0 auto;border-radius:16px;font-size:27px} .cub-home-newsletter__copy p{margin-inline:auto} .phase1-storefront .cub-home-newsletter__form.cub-newsletter-form{display:grid;grid-template-columns:1fr;gap:7px;padding:7px;border-radius:14px} .cub-home-newsletter__input-wrap{min-height:45px;padding:0 10px} .phase1-storefront .cub-home-newsletter__form button{width:100%;min-height:45px} .cub-home-newsletter__privacy{justify-content:center} }
@media (prefers-reduced-motion:reduce) { .cub-home-newsletter__icon,.cub-home-newsletter__glow,.phase1-storefront .cub-home-newsletter__form,.phase1-storefront .cub-home-newsletter__form button,.phase1-storefront .cub-home-newsletter__form button::before,.phase1-storefront .cub-home-newsletter__form button>i{animation:none!important;transition:none!important} }

/* ========================================================================== 
   NEWSLETTER PLACEMENT + CONTACT INTEGRATION
   Brand strip -> newsletter/contact -> footer. Keeps the old footer subscribe
   row out of the layout and makes the conversion block work on all widths.
   ========================================================================== */
.phase1-storefront .cub-newsletter-after-brands .cub-home-newsletter {
    padding: clamp(22px, 3vw, 36px) 0;
    background: linear-gradient(180deg, #f7fafc 0%, #f3f7fa 100%);
}
.phase1-storefront .cub-home-newsletter__content {
    grid-template-columns: minmax(280px, .86fr) minmax(0, 1.35fr);
    gap: clamp(24px, 4vw, 58px);
    min-height: 0;
    padding: clamp(28px, 3.5vw, 44px);
}
.phase1-storefront .cub-home-newsletter__intro {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr);
    align-items: center;
    gap: 20px;
    min-width: 0;
}
.phase1-storefront .cub-home-newsletter__action {
    align-self: center;
}
.phase1-storefront .cub-home-newsletter__meta-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-top: 6px;
}
.phase1-storefront .cub-home-newsletter__privacy {
    flex: 0 1 auto;
    margin: 0 0 2px !important;
    white-space: nowrap;
}
.phase1-storefront .cub-home-newsletter__support {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
}
.phase1-storefront .cub-home-newsletter__contact {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    max-width: 260px;
    padding: 8px 11px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 12px;
    background: rgba(255,255,255,.075);
    color: #fff;
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
    transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}
.phase1-storefront .cub-home-newsletter__contact:hover,
.phase1-storefront .cub-home-newsletter__contact:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(255,255,255,.28);
    background: rgba(255,255,255,.12);
    color: #fff;
}
.phase1-storefront .cub-home-newsletter__contact-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(255,255,255,.12);
    color: #fff;
    font-size: 14px;
}
.phase1-storefront .cub-home-newsletter__contact-copy {
    display: grid;
    min-width: 0;
    line-height: 1.18;
}
.phase1-storefront .cub-home-newsletter__contact-copy small {
    margin-bottom: 3px;
    color: rgba(255,255,255,.58);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.phase1-storefront .cub-home-newsletter__contact-copy strong {
    overflow: hidden;
    color: #fff;
    font-size: 11px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 1199.98px) {
    .phase1-storefront .cub-home-newsletter__content {
        grid-template-columns: minmax(250px, .8fr) minmax(0, 1.2fr);
        gap: 24px;
    }
    .phase1-storefront .cub-home-newsletter__meta-row {
        align-items: stretch;
        flex-direction: column;
    }
    .phase1-storefront .cub-home-newsletter__support {
        justify-content: flex-start;
    }
}

@media (max-width: 991.98px) {
    .phase1-storefront .cub-home-newsletter__content {
        grid-template-columns: 1fr;
        gap: 22px;
    }
    .phase1-storefront .cub-home-newsletter__intro {
        grid-template-columns: 64px minmax(0, 1fr);
    }
    .phase1-storefront .cub-home-newsletter__icon {
        width: 64px;
        height: 64px;
        border-radius: 18px;
        font-size: 30px;
    }
    .phase1-storefront .cub-home-newsletter__meta-row {
        flex-direction: row;
        align-items: center;
    }
    .phase1-storefront .cub-home-newsletter__support {
        margin-left: auto;
    }
}

@media (max-width: 767.98px) {
    .phase1-storefront .cub-home-newsletter__meta-row {
        align-items: stretch;
        flex-direction: column;
    }
    .phase1-storefront .cub-home-newsletter__support {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        margin-left: 0;
    }
    .phase1-storefront .cub-home-newsletter__contact {
        width: 100%;
        max-width: none;
    }
}

@media (max-width: 575.98px) {
    .phase1-storefront .cub-newsletter-after-brands .cub-home-newsletter {
        padding: 16px 0 20px;
    }
    .phase1-storefront .cub-home-newsletter__shell {
        border-radius: 16px;
    }
    .phase1-storefront .cub-home-newsletter__content {
        gap: 18px;
        padding: 22px 14px;
        text-align: left;
    }
    .phase1-storefront .cub-home-newsletter__intro {
        grid-template-columns: 50px minmax(0, 1fr);
        gap: 12px;
    }
    .phase1-storefront .cub-home-newsletter__icon {
        width: 50px;
        height: 50px;
        margin: 0;
        border-radius: 14px;
        font-size: 24px;
    }
    .phase1-storefront .cub-home-newsletter__copy h2 {
        font-size: clamp(23px, 7vw, 30px);
    }
    .phase1-storefront .cub-home-newsletter__copy p {
        margin: 0;
        font-size: 12px;
    }
    .phase1-storefront .cub-home-newsletter__eyebrow {
        font-size: 10px;
    }
    .phase1-storefront .cub-home-newsletter__privacy {
        justify-content: flex-start;
        white-space: normal;
    }
    .phase1-storefront .cub-home-newsletter__support {
        grid-template-columns: 1fr;
        gap: 7px;
    }
    .phase1-storefront .cub-home-newsletter__contact {
        padding: 9px 10px;
    }
    .phase1-storefront .cub-home-newsletter__contact-copy strong {
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .phase1-storefront .cub-home-newsletter__contact {
        transition: none !important;
    }
}