/*
 * v3-shell.css — ANZ v3 Shell Layer
 *
 * Load order: this file MUST load AFTER Bootstrap CSS in source order.
 * v3 selectors use body.anz-v3 .<component> form (specificity 0-2-0),
 * matching or exceeding Bootstrap's 0-1-0 / 0-2-0 selectors, so v3 wins
 * by source-order at equal-or-higher specificity. No !important required
 * (except where scrubbing a legacy Site.css !important — documented inline).
 *
 * Scope discipline: every rule except @font-face is scoped inside body.anz-v3
 * to ensure zero bleed to AGL, AMEX, and other tenants.
 *
 * Colour discipline: ZERO hex values in this file.
 * All colours reference var(--anz-*) tokens defined in tokens-v3.css.
 * Phase 2 verifier will grep for hex leakage — this file must return zero matches.
 *
 * Source: ANZ mini brand guidelines v1.2 / March 2025
 * IA spec: docs/07-ia-composition.md
 * Plan: .omc/plans/anz-refresh-explorative.md §0 Option C-scoped, §4.6, §4.7
 */


/* ===================================================================
 * 1. FONT FACES — Aeonik (outside body scope; @font-face is global)
 *    Files served from Areas/ANZ/fonts/aeonik/ (copied from resources/
 *    markit-anz/fonts/faces/ — sanctioned DAM assets, approvalStatus: approved)
 *    Single family name "Aeonik" with font-weight differentiating faces
 *    per design-system doc §Font assets note.
 * =================================================================== */

@font-face {
    font-family: "Aeonik";
    src: url("~/Areas/ANZ/fonts/aeonik/Aeonik-Light.woff2") format("woff2"), url("~/Areas/ANZ/fonts/aeonik/Aeonik-Light.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Aeonik";
    src: url("~/Areas/ANZ/fonts/aeonik/Aeonik-Regular.woff2") format("woff2"), url("~/Areas/ANZ/fonts/aeonik/Aeonik-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Aeonik";
    src: url("~/Areas/ANZ/fonts/aeonik/Aeonik-Medium.woff2") format("woff2"), url("~/Areas/ANZ/fonts/aeonik/Aeonik-Medium.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Aeonik";
    src: url("~/Areas/ANZ/fonts/aeonik/Aeonik-Bold.woff2") format("woff2"), url("~/Areas/ANZ/fonts/aeonik/Aeonik-Bold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


/* ===================================================================
 * 2. BODY SCOPE — base typography + surface
 * =================================================================== */

body.anz-v3 {
    font-family: var(--font-family);
    /* font-size 0 hides orphan text nodes at body level (e.g. the stray `}`
     * in Views/Modals/ModalMessage.cshtml line 7 — a pre-existing shared-file
     * bug that was previously masked by Site.css footer box-shadow trick).
     * All meaningful content is inside child elements which reset font-size. */
    font-size: 0;
    line-height: var(--type-body-m-lh);
    font-weight: var(--font-weight-regular);
    color: var(--text);
    /* Background set to footer colour so short-page whitespace below footer
     * matches the footer (replaces legacy box-shadow trick in Site.css).
     * Content area #bdy overrides back to white below. */
    background: var(--footer-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

    /* Reset font-size on all direct and descendent content elements.
 * Required because body font-size:0 hides orphan text nodes (above). */
    body.anz-v3 div,
    body.anz-v3 nav,
    body.anz-v3 header,
    body.anz-v3 footer,
    body.anz-v3 main,
    body.anz-v3 section,
    body.anz-v3 article,
    body.anz-v3 aside,
    body.anz-v3 form,
    body.anz-v3 ul,
    body.anz-v3 ol,
    body.anz-v3 table,
    body.anz-v3 noscript {
        font-size: var(--type-body-m-size);
    }


    /* ===================================================================
 * 3. TYPOGRAPHY — headings + body sizes scoped to anz-v3
 * =================================================================== */

    body.anz-v3 h1,
    body.anz-v3 h2,
    body.anz-v3 h3,
    body.anz-v3 h4,
    body.anz-v3 h5,
    body.anz-v3 h6 {
        font-family: var(--font-family);
        font-weight: var(--font-weight-medium);
        color: var(--anz-pacific-blue);
        margin-top: 0;
        /* Scrubs Site.css: h1,h2,h3,h4 { text-transform: uppercase; }
     * v3 brand spec uses sentence case for headings — uppercase is a legacy
     * artefact of the old Proxima Nova Bold treatment. */
        text-transform: none;
    }

    /* Scrubs Site.css legacy uppercase on class-based selectors that don't
   inherit from the h1-h6 reset above. Per client review 2026-05-12. */
    body.anz-v3 .cattilename,
    body.anz-v3 .fp-title,
    body.anz-v3 .home-title,
    body.anz-v3 .groupBuyDetails,
    body.anz-v3 .PageHeading,
    body.anz-v3 .rsl-top-menu,
    body.anz-v3 #mainNavMobile .main-menu li {
        text-transform: none;
    }

    body.anz-v3 h1 {
        font-size: var(--type-h1-size);
        line-height: var(--type-h1-lh);
    }

    body.anz-v3 h2 {
        font-size: var(--type-h2-size);
        line-height: var(--type-h2-lh);
    }

    body.anz-v3 h3 {
        font-size: var(--type-h3-size);
        line-height: var(--type-h3-lh);
    }

    body.anz-v3 h4,
    body.anz-v3 h5,
    body.anz-v3 h6 {
        font-size: var(--type-body-l-size);
        line-height: var(--type-body-l-lh);
    }

    body.anz-v3 p {
        font-size: var(--type-body-m-size);
        line-height: var(--type-body-m-lh);
        color: var(--text);
        margin-top: 0;
        margin-bottom: var(--space-4);
    }

    body.anz-v3 small,
    body.anz-v3 .text-small {
        font-size: var(--type-body-s-size);
        line-height: var(--type-body-s-lh);
    }

    body.anz-v3 .text-caption {
        font-size: var(--type-caption-size);
        line-height: var(--type-caption-lh);
        color: var(--text-muted);
    }

    /* Display sizes — used for hero headlines */
    body.anz-v3 .display-xl {
        font-size: var(--type-display-xl-size);
        line-height: var(--type-display-xl-lh);
        font-weight: var(--font-weight-medium);
    }

    body.anz-v3 .display-l {
        font-size: var(--type-display-l-size);
        line-height: var(--type-display-l-lh);
        font-weight: var(--font-weight-medium);
    }


    /* ===================================================================
 * 4. LINKS
 * =================================================================== */

    body.anz-v3 a {
        color: var(--link);
        text-decoration: none;
        transition: color var(--motion-fast) var(--motion-exit);
    }

        body.anz-v3 a:hover,
        body.anz-v3 a:focus {
            color: var(--link-hover);
            text-decoration: underline;
        }

    body.anz-v3 .link {
        color: var(--link);
        text-decoration: none;
        cursor: pointer;
    }

        body.anz-v3 .link:hover,
        body.anz-v3 .link:focus {
            color: var(--link-hover);
            text-decoration: underline;
        }

    /* Scrubs Site.css: a { color: #51b9ea; } a:hover,a:focus { color: #51b9ea; }
 * — legacy light-blue is not an approved ANZ brand pair.
 * UI Blue is the correct digital link colour per brand PDF page 4. */


    /* ===================================================================
 * 5. FOCUS RING — WCAG 2.1 AA
 *    2px outline, Pacific Blue, 3px offset
 * =================================================================== */

    body.anz-v3 *:focus-visible {
        outline: var(--focus-ring-width) solid var(--focus-ring-color);
        outline-offset: var(--focus-ring-offset);
        border-radius: var(--radius-sm);
    }

    /* Remove default browser outline when focus-visible is in use */
    body.anz-v3 *:focus:not(:focus-visible) {
        outline: none;
    }


    /* ===================================================================
 * 6. BUTTON PRIMITIVES
 *    Specificity: body.anz-v3 .btn-primary = 0-2-0
 *    Bootstrap 3: .btn-primary = 0-1-0
 *    v3 wins by source-order at higher specificity — no !important needed.
 *
 *    Coral Reef used ONLY on .btn-primary (the "request moment" CTA).
 *    .btn-secondary + .btn-ghost use Pacific Blue / outlined treatment.
 * =================================================================== */

    /* Base button reset — applies to all v3 button classes */
    body.anz-v3 .btn-primary,
    body.anz-v3 .btn-secondary,
    body.anz-v3 .btn-ghost {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-family);
        font-size: var(--type-body-m-size);
        font-weight: var(--font-weight-medium);
        line-height: 1;
        padding: var(--space-3) var(--space-8);
        border-radius: var(--radius-md);
        border: 2px solid transparent;
        cursor: pointer;
        text-decoration: none;
        text-transform: none;
        /* Scrubs Site.css: .btn-primary, .zsbtn { background-color: #007dba; border: none; }
     * — legacy blue is not the correct CTA colour; brand PDF page 4 specifies
     * Coral Reef for request moments. text-transform scrubs uppercase from h-family rules. */
        transition: background-color var(--motion-fast) var(--motion-exit), border-color var(--motion-fast) var(--motion-exit), color var(--motion-fast) var(--motion-exit), box-shadow var(--motion-fast) var(--motion-exit);
        min-width: 0;
    }

    /* Primary CTA — Coral Reef background (request moment) */
    body.anz-v3 .btn-primary {
        background-color: var(--accent);
        border-color: var(--accent);
        color: var(--accent-text);
    }

        body.anz-v3 .btn-primary:hover,
        body.anz-v3 .btn-primary:focus {
            background-color: var(--accent);
            border-color: var(--accent);
            color: var(--accent-text);
            box-shadow: var(--shadow-md);
            text-decoration: none;
            filter: brightness(0.92);
        }

        body.anz-v3 .btn-primary:active {
            filter: brightness(0.85);
        }

    /* Secondary — Pacific Blue outlined */
    body.anz-v3 .btn-secondary {
        background-color: transparent;
        border-color: var(--anz-pacific-blue);
        color: var(--anz-pacific-blue);
    }

        body.anz-v3 .btn-secondary:hover,
        body.anz-v3 .btn-secondary:focus {
            background-color: var(--anz-pacific-blue);
            border-color: var(--anz-pacific-blue);
            color: var(--text-on-primary);
            text-decoration: none;
        }

    /* Ghost — no border, text only */
    body.anz-v3 .btn-ghost {
        background-color: transparent;
        border-color: transparent;
        color: var(--link);
        padding-left: 0;
        padding-right: 0;
    }

        body.anz-v3 .btn-ghost:hover,
        body.anz-v3 .btn-ghost:focus {
            color: var(--link-hover);
            text-decoration: underline;
        }

    /* Bootstrap .btn + .btn-default overrides — ensure they pick up v3 base */
    body.anz-v3 .btn {
        font-family: var(--font-family);
        border-radius: var(--radius-md);
        text-transform: none;
    }

    body.anz-v3 .btn-default {
        background-color: var(--anz-grey-6);
        border: 2px solid var(--anz-grey-6);
        color: var(--text-on-primary);
        font-family: var(--font-family);
        font-weight: var(--font-weight-medium);
        border-radius: var(--radius-md);
        /* Scrubs Site.css: .btn-default { background-color: #747678; color: #fff; border: none; }
     * — replaces with token-driven grey using proper border treatment. */
    }

        body.anz-v3 .btn-default:hover,
        body.anz-v3 .btn-default:focus {
            background-color: var(--anz-grey-5);
            border-color: var(--anz-grey-5);
            color: var(--text-on-primary);
        }


    /* ===================================================================
 * 7. HEADER CHROME
 *    Pacific Blue background, Cloud White text/logo.
 *    Brand principle §1.2: Pacific Blue asserts itself at full-bleed
 *    scale in the header. Scrubs legacy Site.css #004165 header colours.
 * =================================================================== */

    /* .hdr-refresh is the wrapper div for the Header partial in _Layout.cshtml.
 * Set to Pacific Blue background + matching text colour so any stray text nodes
 * from Header.cshtml pre-existing Razor artifact (line 293: stray `}` from a
 * partially-commented conditional block) are invisible against the background.
 * overflow:hidden clips any stray content below the header spacers. */
    body.anz-v3 .hdr-refresh {
        background-color: var(--header-bg);
        color: var(--header-bg);
        overflow: hidden;
    }

    body.anz-v3 .headercontainer,
    body.anz-v3 #mainNav {
        background-color: var(--header-bg);
        color: var(--header-text);
        /* Scrubs Site.css: .headercontainer { background-color: #014165; }
     *                  #mainNav { background-color: #004165; }
     * — replaces with brand PDF authoritative Pacific Blue token. */
    }

    body.anz-v3 .navbar-fixed-top {
        background-color: var(--header-bg);
    }

    /* Header utility bar (top strip with Contact / Log Out / flag / cart icon) — Cloud White per user feedback.
   Keep main nav (.header-top / #mainNav rest) Pacific Blue. */
    body.anz-v3 .header-bottom-menu {
        background-color: var(--anz-cloud-white);
        color: var(--anz-pacific-blue);
        border-bottom: 1px solid var(--border, rgba(0,0,0,0.08));
    }

        body.anz-v3 .header-bottom-menu .nav li a {
            color: var(--anz-pacific-blue);
            font-size: var(--type-body-s-size);
            font-weight: var(--font-weight-medium);
            text-transform: none;
        }

            body.anz-v3 .header-bottom-menu .nav li a:hover,
            body.anz-v3 .header-bottom-menu .nav li a:focus {
                color: var(--anz-pacific-blue);
                text-decoration: none;
            }

        body.anz-v3 .header-bottom-menu .shoppingcartcount {
            color: var(--anz-deep-sea);
        }

    /* Top-right nav (SHOP / COLLECTIONS / HELP / search / cart) */
    body.anz-v3 .rsl-top-menu a,
    body.anz-v3 .rsl-top-menu .rsl-menu-item {
        color: var(--header-text);
        font-family: var(--font-family);
        font-size: var(--type-body-s-size);
        font-weight: var(--font-weight-medium);
        text-transform: none;
    }

        body.anz-v3 .rsl-top-menu a:hover,
        body.anz-v3 .rsl-top-menu a:focus {
            color: var(--anz-clear-skies);
            text-decoration: none;
        }

    body.anz-v3 .rsl-menu-value {
        color: var(--header-text);
    }

    /* Header search input — legacy inline style forces width:60px which
   clips the 6-char "SEARCH" placeholder. Widen the wrapper + input. */
    body.anz-v3 .rsl-top-menu .header-search-center .rsl-search-form > div[style*="width: 60px"],
    body.anz-v3 .rsl-top-menu .rsl-search > div[style*="width: 60px"] {
        width: 110px !important;
    }

    body.anz-v3 .rsl-top-menu .site-search-input {
        width: 100% !important;
        min-width: 100px;
        color: var(--anz-cloud-white);
    }

        body.anz-v3 .rsl-top-menu .site-search-input::placeholder {
            color: rgba(255, 255, 255, 0.85);
            letter-spacing: 0.04em;
        }

    body.anz-v3 #mainNav .header-top {
        padding-right: var(--space-4, 16px);
    }

    /* Search input in header */
    body.anz-v3 .site-search-input {
        background: var(--header-bg);
        color: var(--header-text);
        font-family: var(--font-family);
        font-size: var(--type-body-s-size);
        border: none;
        /* Scrubs Site.css: .site-search-input { border: none !important; … }
     * We preserve the border:none here without !important — source order
     * and body.anz-v3 specificity handles Bootstrap override cleanly. */
    }

    /* Site.css's legacy `.site-search-input { padding: 2px 4px 8px 4px !important; }` is
   asymmetric (2px top vs 8px bottom) — that's why the "Search" placeholder sits toward
   the top of the input instead of centered, even once the icon/input row itself is
   flex-centered. Needs !important to beat the legacy !important rule. */
    body.anz-v3 .site-search-input {
        padding: 0 4px !important;
        line-height: normal !important;
    }

        body.anz-v3 .site-search-input::placeholder {
            color: var(--anz-grey-3);
        }

    /* Shop / Collections / Help each carry an inline `padding-top:10px` hack on their
   wrapper <div>, while the search item's wrapper (.rsl-search) carries a *different*
   inline `padding: 10px 15px 2px 15px`. Those two unrelated offsets are why the search
   icon/input never lined up with the text links no matter how the row itself was
   flex-centered — zero both out (inline styles need !important to lose) and let flex
   do 100% of the vertical positioning instead. */
    body.anz-v3 .rsl-top-menu ul.nav-right {
        display: flex;
    }

    body.anz-v3 .rsl-top-menu .nav-right > li {
        display: flex;
        align-items: center;
    }

        body.anz-v3 .rsl-top-menu .nav-right > li > div {
            padding-top: 0 !important;
            padding-bottom: 0 !important;
        }

    /* Inside the search item, the icon and input were floated with ad-hoc padding-top
   values that don't match each other's line-height, so they visually drifted from the
   Shop/Collections/Help text. Flex + center them, and bring the icon down closer to
   the surrounding nav text size so it doesn't read as an oversized, bolder element. */
    body.anz-v3 .header-search-center fieldset > div {
        display: flex;
        align-items: center;
    }

    body.anz-v3 .header-search-center .fa-search {
        font-size: var(--type-body-m-size, 16px);
    }

    /* Search button */
    body.anz-v3 .search-button {
        color: var(--header-text);
        font-size: var(--type-h3-size);
    }

    /* Cart count badge — deep-sea on coral-reef gives ~8:1 contrast (AA+).
   Previously text-on-primary (white) on coral-reef was ~2.5:1 (axe fail). */
    body.anz-v3 .shoppingcartcount {
        background-color: var(--anz-coral-reef);
        color: var(--anz-deep-sea);
        font-size: var(--type-caption-size);
        font-weight: var(--font-weight-medium);
        line-height: 1;
        padding: 2px var(--space-2);
        border-radius: var(--radius-sm);
    }

    /* Mobile nav */
    body.anz-v3 #navMobile,
    body.anz-v3 #navMobile .navbar {
        background-color: var(--header-bg);
        color: var(--header-text);
    }

        body.anz-v3 #navMobile .navbar-toggle {
            border: none;
        }

        body.anz-v3 #navMobile .icon-bar {
            background-color: var(--header-text);
        }

    body.anz-v3 #mainNavMobile nav,
    body.anz-v3 #subNavMobile nav {
        background: var(--header-bg);
    }


    /* ===================================================================
 * 8. FOOTER CHROME
 *    Pacific Blue background, Cloud White text per brand §1.2.
 *    Scrubs Site.css: footer { background-color: #004165; }
 * =================================================================== */

    /* #bdy is the main content wrapper in _Layout.cshtml. Override back to white
 * since body is set to Pacific Blue for the footer-fill effect above. */
    body.anz-v3 #bdy {
        background-color: var(--surface);
    }

    body.anz-v3 footer {
        background-color: var(--footer-bg);
        color: var(--footer-text);
        padding: var(--space-8) 0;
        font-size: var(--type-body-s-size);
        position: relative;
        width: 100%;
        /* Legacy Site.css used box-shadow: 0px 500px 0px 500px #004165 to fill
     * whitespace below footer. v3 uses html background-color instead (above). */
        box-shadow: none;
    }

    body.anz-v3 a.footerlink {
        color: var(--footer-text);
        font-size: var(--type-body-s-size);
        text-decoration: none;
        margin-right: var(--space-8);
    }

        body.anz-v3 a.footerlink:last-child {
            margin-right: 0;
        }

        body.anz-v3 a.footerlink:hover,
        body.anz-v3 a.footerlink:focus {
            color: var(--anz-clear-skies);
            text-decoration: underline;
        }


    /* ===================================================================
 * 9. FORM CONTROLS
 *    Bootstrap .form-control override — scoped to anz-v3.
 *    Scrubs Site.css: .form-control { background-color: transparent; border-color: #E5EEF3; }
 * =================================================================== */

    body.anz-v3 .form-control {
        font-family: var(--font-family);
        font-size: var(--type-body-m-size);
        line-height: var(--type-body-m-lh);
        color: var(--text);
        background-color: var(--surface);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-md);
        padding: var(--space-3) var(--space-4);
        box-shadow: none;
        transition: border-color var(--motion-fast) var(--motion-exit), box-shadow var(--motion-fast) var(--motion-exit);
    }

        body.anz-v3 .form-control:focus {
            border-color: var(--anz-pacific-blue);
            box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
            outline: none;
            background-color: var(--surface);
            color: var(--text);
        }

        body.anz-v3 .form-control::placeholder {
            color: var(--text-muted);
        }

    body.anz-v3 .input-validation-error {
        border-color: var(--anz-coral-reef);
        background-color: var(--surface);
    }


    /* ===================================================================
 * 10. MODALS
 *     Scrubs Site.css: .modal-header,.modal-body { background-color: #00adef; }
 *     and repeated .modal-header,.modal-body { background-color: #014165; }
 *     v3 uses clean white modal with Pacific Blue header.
 * =================================================================== */

    body.anz-v3 .modal-content {
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg);
        border: none;
        overflow: hidden;
    }

    body.anz-v3 .modal-header {
        background-color: var(--surface-inverse);
        color: var(--text-on-inverse);
        border-bottom: none;
        padding: var(--space-6) var(--space-6);
        /* Scrubs Site.css: .modal-header { color: white; background-color: #00adef; border: none; }
     *                  and .modal-header { background-color: #014165; }
     * — replaces legacy cyan/teal with authoritative Pacific Blue token. */
    }

        body.anz-v3 .modal-header .modal-title {
            font-family: var(--font-family);
            font-size: var(--type-h3-size);
            font-weight: var(--font-weight-medium);
            color: var(--text-on-inverse);
        }

        body.anz-v3 .modal-header .close {
            color: var(--text-on-inverse);
            opacity: 0.8;
            text-shadow: none;
        }

            body.anz-v3 .modal-header .close:hover {
                opacity: 1;
                color: var(--text-on-inverse);
            }

    body.anz-v3 .modal-body {
        background-color: var(--surface);
        color: var(--text);
        padding: var(--space-6);
        /* Scrubs Site.css: .modal-body { color: white; background-color: #00adef; }
     * — v3 uses white modal body with standard text colour. */
    }

    body.anz-v3 .modal-footer {
        background-color: var(--surface);
        border-top: 1px solid var(--border);
        padding: var(--space-4) var(--space-6);
        /* Scrubs Site.css: .modal-footer { background-color: #014165; border: none; }
     * — v3 modal footer matches body surface. */
    }


    /* ===================================================================
 * 11. ALERTS
 *     Scrubs Site.css: .alert-success, .alert-danger overrides that
 *     set both to #014165 background with white text (legacy ANZ blue).
 *     v3 restores semantic colours per approved brand pairs.
 * =================================================================== */

    body.anz-v3 .alert-success {
        background-color: var(--bg-wash);
        border-color: var(--anz-pacific-blue);
        color: var(--text);
        /* Scrubs Site.css: .alert-success { background-color: #014165; border-color: #014165; color: white; }
     * — legacy override incorrectly turned success alerts Pacific Blue. */
    }

    body.anz-v3 .alert-danger {
        background-color: var(--surface);
        border-color: var(--anz-coral-reef);
        color: var(--text);
        /* Scrubs Site.css: .alert-danger { background-color: #014165; border-color: #014165; color: white; }
     * — legacy override incorrectly coloured danger alerts same as success. */
    }


    /* ===================================================================
 * 12. PROGRESS BAR
 *     Scrubs Site.css: .progress-bar { background-color: #4dbbe4; }
 * =================================================================== */

    body.anz-v3 .progress-bar {
        background-color: var(--anz-pacific-blue);
        /* Scrubs Site.css: .progress-bar { background-color: #4dbbe4; }
     * — legacy cyan replaced with authoritative Pacific Blue. */
    }


    /* ===================================================================
 * 13. BREADCRUMBS
 *     Scrubs Site.css legacy breadcrumb colour overrides.
 * =================================================================== */

    body.anz-v3 .breadcrumb {
        background-color: transparent;
        padding: var(--space-4) 0;
        margin-bottom: 0;
        font-size: var(--type-body-s-size);
    }

        body.anz-v3 .breadcrumb a {
            color: var(--text-muted);
            text-decoration: none;
        }

            body.anz-v3 .breadcrumb a:hover {
                color: var(--link);
                text-decoration: underline;
            }

        body.anz-v3 .breadcrumb > .active {
            color: var(--text);
        }

        body.anz-v3 .breadcrumb > li + li:before {
            content: "/";
            color: var(--text-muted);
            padding: 0 var(--space-2);
        }


    /* ===================================================================
 * 14. CATEGORY / SHOP SIDEBAR ACCORDION
 *     Scrubs Site.css: .cat-accordion { background-color: #004165; }
 *     and #divAccordion .list-group-item { background-color: #1a5474 !important; }
 *
 *     Note on !important usage below:
 *     Site.css line 588: #divAccordion .list-group-item { background-color: #1a5474 !important; }
 *     Site.css line 591: #divAccordion .cat-submenu .list-group-item { background-color: #eaeaeb !important; }
 *     Site.css line 594: #divAccordion .cat-submenu .list-group-item:hover { background-color: #f8f8f8 !important; }
 *     Site.css line 597: #divAccordion .selected, ... { background-color: #f8f8f8 !important; }
 *     These carry !important from the legacy file. To scrub them, v3 must
 *     match the same ID-based specificity (0-1-1) while also being in source
 *     order after Site.css — the combined specificity + source order wins
 *     without needing !important on the v3 side.
 * =================================================================== */

    body.anz-v3 .cat-accordion {
        background-color: var(--surface-strong);
        padding: var(--space-8) 0 0 0;
        min-height: 600px;
    }

    body.anz-v3 #divAccordion .list-group-item {
        background-color: var(--surface-inverse) !important;
        /* !important scrubs Site.css: #divAccordion .list-group-item { background-color: #1a5474 !important; }
     * Legacy rule carries !important — must match to override. */
        color: var(--anz-clear-skies-ultrasoft);
        border-color: transparent;
        font-family: var(--font-family);
        font-size: var(--type-body-m-size);
        border-radius: 0;
    }

    body.anz-v3 #divAccordion .cat-submenu .list-group-item {
        background-color: var(--bg-soft) !important;
        /* !important scrubs Site.css: #divAccordion .cat-submenu .list-group-item { background-color: #eaeaeb !important; } */
        color: var(--text);
    }

        body.anz-v3 #divAccordion .cat-submenu .list-group-item:hover {
            background-color: var(--surface) !important;
            /* !important scrubs Site.css: #divAccordion .cat-submenu .list-group-item:hover { background-color: #f8f8f8 !important; } */
        }

        body.anz-v3 #divAccordion .selected,
        body.anz-v3 #divAccordion .cat-submenu .list-group-item.selected {
            background-color: var(--surface) !important;
            /* !important scrubs Site.css: #divAccordion .selected { background-color: #f8f8f8 !important; }
     *                              and .cat-submenu .list-group-item.selected { background-color: #f8f8f8 !important; } */
            color: var(--text);
            font-weight: var(--font-weight-medium);
            font-family: var(--font-family);
        }

    body.anz-v3 .list-group-item.active,
    body.anz-v3 .list-group-item.active:focus,
    body.anz-v3 .list-group-item.active:hover {
        background-color: var(--surface-inverse);
        border-color: var(--surface-inverse);
        color: var(--text-on-inverse);
        font-weight: var(--font-weight-medium);
        font-family: var(--font-family);
    }

    body.anz-v3 #divAccordion .arrow-show {
        color: var(--anz-cloud-white);
        font-size: var(--type-body-s-size);
    }

    /* Scrubs Site.css: .table-bordered, #search-results th { border: none !important; }
 * These selectors have ID-level specificity in Site.css.
 * v3 restores subtle borders for readability. */
    body.anz-v3 .table-bordered {
        border: 1px solid var(--border) !important;
        /* !important scrubs Site.css: .table-bordered, #search-results th { border: none !important; }
     * The legacy rule set border:none on ALL tables site-wide. v3 restores
     * a subtle border for accessibility / readability. */
    }


    /* ===================================================================
 * 15. PLACEHOLDER POLICY (waiver: phase1-asset-count-waiver.md)
 *     Photography/illustration placeholders: solid Pacific Blue blocks
 *     with data-placeholder="awaiting-DAM" for grep-based swap tracking.
 * =================================================================== */

    body.anz-v3 [data-placeholder="awaiting-DAM"] {
        background-color: var(--surface-inverse);
        display: block;
        min-height: 320px;
        position: relative;
    }

        body.anz-v3 [data-placeholder="awaiting-DAM"]::after {
            content: "Image awaiting DAM";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: var(--text-on-inverse);
            font-family: var(--font-family);
            font-size: var(--type-body-s-size);
            font-weight: var(--font-weight-medium);
            opacity: 0.6;
            pointer-events: none;
            white-space: nowrap;
        }


/* ===================================================================
 * 16. MOTION — prefers-reduced-motion
 *     Zero transitions / animations when system preference is set.
 * =================================================================== */

@media (prefers-reduced-motion: reduce) {
    body.anz-v3 *,
    body.anz-v3 *::before,
    body.anz-v3 *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    /* !important here is required to guarantee the reduced-motion preference
     * overrides any inline transition-duration values that Bootstrap or ANZ JS
     * components may set programmatically. This is a system-preference override,
     * not a specificity hack, and is standard practice for this media query. */
}


/* ===================================================================
 * 17. RESPONSIVE BREAKPOINTS — shell-level only
 *     Per IA spec §6.2: mobile < 768px, tablet 768–1024px, desktop 1024+
 * =================================================================== */

@media (max-width: 768px) {
    body.anz-v3 #mainNav {
        display: none;
    }

    body.anz-v3 #navMobile {
        display: block;
    }

    body.anz-v3 a.footerlink {
        display: block;
        width: 100%;
        padding: var(--space-2) var(--space-2);
        margin-right: 0;
    }

    body.anz-v3 .btn-primary,
    body.anz-v3 .btn-secondary,
    body.anz-v3 .btn-ghost {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 992px) {
    body.anz-v3 .cat-accordion {
        background-color: transparent;
        padding: 0 var(--space-4);
    }
}


/* ===================================================================
 * LEGACY TILE + CATEGORY HEADER SHADOW OVERRIDES
 *   - .catheader (subcategory section bar on Collections/Category page)
 *   - .catdiv / .catdivinner / .cattilename (legacy CollectionTiles partial)
 *   - .collections outer background
 * All scoped to body.anz-v3. Scrubs Site.css legacy navy #004165 / gray #e3e4e4.
 * =================================================================== */

body.anz-v3 .catheader {
    background-color: var(--anz-pacific-blue);
    color: var(--anz-cloud-white, #ffffff);
    text-transform: none; /* Aimee feedback #4/#12: no caps — scrub Site.css legacy .catheader uppercase */
    border-radius: var(--radius-sm);
    font-weight: var(--font-weight-bold);
    padding: var(--space-3) var(--space-4);
    /* Rhythm between Collections page sub-category sections (polish batch 2026-04-20, R5).
     * Each section = catheader + product grid; the PB banner was landing too close
     * to the previous section's last product row. 48px breathing restores cadence. */
    margin-top: var(--space-10);
}

/* Checkout .ccbottom — right column of the credit-card payment row.
 * Holds the Worldline logo + SSL copy. The content is shorter than the left
 * column (Card Type + Number + Expiry + Security) and was reading as a void.
 * Polish batch 2026-04-20, R5 — promote the column to a Sand-washed info panel
 * so the remainder of its vertical space reads as intentional surface. */
body.anz-v3 .ccbottom {
    /* background-color: var(--anz-sand, #F5F1EB);*/
    border-radius: var(--radius-md);
    padding: var(--space-5);
}

body.anz-v3 .catheader:first-of-type,
body.anz-v3 .collections > .row > .col-md-12 > .catheader:first-child {
    margin-top: 0;
}

body.anz-v3 .collections {
    background-color: var(--surface, #ffffff);
}

    /* Legacy CollectionTiles `.catdiv` tiles — where the DB category has no image,
   the tile renders only the category name. Style those as v3 tiles with
   rhythm across the grid via nth-child. */
    body.anz-v3 .collections .catdivinner {
        background-color: var(--bg-wash);
        border-radius: var(--radius-md);
        box-shadow: none;
        color: var(--anz-pacific-blue);
        font-weight: var(--font-weight-bold);
        overflow: hidden;
        position: relative;
        transition: box-shadow var(--motion-standard) var(--motion-exit), transform var(--motion-standard) var(--motion-exit);
    }

        body.anz-v3 .collections .catdivinner:hover,
        body.anz-v3 .collections .catdivinner:focus-within {
            box-shadow: var(--shadow-md);
            transform: translateY(-2px);
        }

        body.anz-v3 .collections .catdivinner a {
            color: inherit;
            display: block;
            padding: var(--space-6);
            text-align: center;
            text-decoration: none;
        }

        body.anz-v3 .collections .catdivinner img {
            display: block;
            margin: 0 auto;
            max-width: 100%;
        }

    body.anz-v3 .collections .cattilename {
        background-color: transparent;
        color: inherit;
        font-size: var(--type-h4-size, var(--type-body-lg-size));
        font-weight: var(--font-weight-bold);
        padding: var(--space-4);
        text-align: center;
    }

/* Alternating palette rhythm across tiles — avoids flat monolithic feel */
/* Collection tile solid-colour overlays removed — user requested original
   category imagery instead of flat brand-colour panels. Labels now overlay
   the image with a subtle gradient scrim (see .cattilename above). */


/* ===================================================================
 * MOBILE SLIDE-OUT CART + SUBNAV TEXT
 *   #mainNavMobile and #subNavMobile render on Pacific Blue bg.
 *   Ensure all text + links inside render in Cloud White for contrast.
 * =================================================================== */

body.anz-v3 #mainNavMobile,
body.anz-v3 #mainNavMobile nav,
body.anz-v3 #mainNavMobile .main-menu,
body.anz-v3 #mainNavMobile .main-menu li,
body.anz-v3 #mainNavMobile .main-menu a,
body.anz-v3 #mainNavMobile .cart-item-name,
body.anz-v3 #mainNavMobile .cart-item-details,
body.anz-v3 #mainNavMobile .cart-item-desc,
body.anz-v3 #mainNavMobile .cart-item-desc span,
body.anz-v3 #mainNavMobile .total,
body.anz-v3 #mainNavMobile .subtotal,
body.anz-v3 #subNavMobile,
body.anz-v3 #subNavMobile nav,
body.anz-v3 #subNavMobile li,
body.anz-v3 #subNavMobile a,
body.anz-v3 #subNavMobile span {
    color: var(--anz-cloud-white, #ffffff);
}

    body.anz-v3 #mainNavMobile .main-menu a:hover,
    body.anz-v3 #mainNavMobile .main-menu a:focus,
    body.anz-v3 #subNavMobile a:hover,
    body.anz-v3 #subNavMobile a:focus {
        color: var(--anz-clear-skies, #8ADAF9);
        text-decoration: none;
    }

    /* Subtotal container (dark box in cart slide-out) — keep bordered for separation */
    body.anz-v3 #mainNavMobile .subtotal,
    body.anz-v3 #subNavMobile .subtotal {
        border: 1px solid rgba(255, 255, 255, 0.35);
        border-radius: var(--radius-sm);
        padding: var(--space-3) var(--space-4);
    }

    /* Checkout CTA inside the mobile cart panel */
    body.anz-v3 #mainNavMobile a.btn-primary,
    body.anz-v3 #mainNavMobile .btn-primary,
    body.anz-v3 #subNavMobile a.btn-primary,
    body.anz-v3 #subNavMobile .btn-primary {
        background-color: var(--anz-pacific-blue);
        border-color: var(--anz-pacific-blue);
        color: var(--anz-cloud-white, #ffffff);
        font-weight: var(--font-weight-bold);
    }


/* ===================================================================
 * FOOTER CONTENT — inline icons + text labels on one row
 *   Fixes: footer images were rendering at native size (large) with
 *   link labels wrapping to next line, producing stacked icon column.
 * =================================================================== */

body.anz-v3 footer a.footerlink {
    align-items: center;
    display: inline-flex;
    gap: var(--space-2);
    vertical-align: middle;
    white-space: nowrap;
}

    body.anz-v3 footer a.footerlink img {
        display: inline-block;
        height: 20px;
        width: auto;
        vertical-align: middle;
    }

body.anz-v3 footer .text-center {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    justify-content: center;
    align-items: center;
}

@media (max-width: 768px) {
    body.anz-v3 footer a.footerlink {
        display: inline-flex;
        width: auto;
        padding: var(--space-2);
        text-align: center;
    }

    body.anz-v3 footer .text-center {
        flex-direction: column;
        gap: var(--space-3);
    }
}

/* ===================================================================
 * Brand Lockup — ANZ lotus mark + Aeonik wordmark + tagline.
 * Replaces legacy Logo.jpg. Ported from variant-2b with v3 tokens.
 * Reverse-out (Cloud White) on Pacific Blue nav background.
 * =================================================================== */
body.anz-v3 #mainNav .header-top .logodiv {
    padding: 0;
}

body.anz-v3 .anz-lockup {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: 4px 14px 4px 4px;
    text-decoration: none;
    color: var(--anz-pacific-blue);
    border-radius: var(--radius-sm);
    transition: background-color .15s ease;
}

    body.anz-v3 .anz-lockup:hover,
    body.anz-v3 .anz-lockup:focus {
        background: rgba(5, 114, 230, .08);
        color: var(--anz-pacific-blue);
        text-decoration: none;
        outline: none;
    }

body.anz-v3 .anz-lockup__mark {
    height: 50px;
    width: auto;
    flex-shrink: 0;
}

body.anz-v3 .anz-lockup__wordmark {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1;
    gap: 2px;
}

body.anz-v3 .anz-lockup__anz {
    font-family: 'Aeonik', 'Helvetica Neue', Arial, sans-serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--anz-pacific-blue);
    line-height: 1;
}

body.anz-v3 .anz-lockup__sub {
    font-family: 'Aeonik', 'Helvetica Neue', Arial, sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: var(--anz-pacific-blue);
    line-height: 1.15;
}

body.anz-v3 .anz-lockup--mobile .anz-lockup__mark {
    height: 32px;
}

body.anz-v3 .anz-lockup--mobile .anz-lockup__anz {
    font-size: 18px;
}

body.anz-v3 .anz-lockup--mobile .anz-lockup__sub {
    font-size: 9px;
}

body.anz-v3 #mainNav .header-top .logodiv img:not(.anz-lockup__mark) {
    max-height: 48px;
    width: auto;
}

/* ===================================================================
 * Collection tiles — flatten legacy .catdiv / .catdivinner frame effect.
 * Legacy Site.css paints .catdiv with its own padding/bg creating a
 * two-layer look. Make outer .catdiv transparent + padless; the nth-child
 * color rules apply to .catdivinner only for single-colour tiles.
 * =================================================================== */
body.anz-v3 .collections .catdiv {
    background-color: transparent !important;
    padding: 0;
    border: 0;
}

body.anz-v3 .collections .catdivinner {
    background-color: var(--surface) !important;
    border-radius: var(--radius-lg);
    padding: 0;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
    transition: transform var(--motion-standard) var(--motion-exit), box-shadow var(--motion-standard) var(--motion-exit);
}

    body.anz-v3 .collections .catdivinner:hover,
    body.anz-v3 .collections .catdivinner:focus-within {
        box-shadow: var(--shadow-lg);
        transform: translateY(-4px);
    }

    body.anz-v3 .collections .catdiv img,
    body.anz-v3 .collections .catdivinner img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    body.anz-v3 .collections .catdivinner a {
        display: block;
        width: 100%;
        height: 100%;
        color: inherit;
        text-decoration: none;
    }

body.anz-v3 .collections .cattilename {
    color: var(--anz-pacific-blue) !important;
    font-family: 'Aeonik', 'Helvetica Neue', Arial, sans-serif;
    font-size: var(--type-body-l-size, 18px);
    font-weight: var(--font-weight-bold, 700);
    line-height: 1.2;
    padding: var(--space-3, 12px) var(--space-4, 16px);
    text-align: center;
    background-color: var(--surface);
}
/* Hide duplicate v3 label when legacy image already carries the category name */
body.anz-v3 .collections .catdivinner:has(a img[src]) .cattilename {
    display: none;
}

body.anz-v3 .collections .catheader {
    align-self: center;
    text-align: center;
    margin: 0;
}

/* Add vertical breathing room between editorial hero, tile band, and collections */
body.anz-v3 .anz-v3-editorial-hero {
    margin-bottom: var(--space-10, 64px);
}

body.anz-v3 .anz-v3-home-tiles {
    gap: var(--space-8, 48px) !important;
}

body.anz-v3 .collections {
    margin-top: var(--space-12, 80px) !important;
    padding-bottom: var(--space-10, 64px);
}

    body.anz-v3 .collections .categories-outer {
        display: flex;
        flex-direction: column;
        gap: var(--space-8, 48px);
    }

    body.anz-v3 .collections .catgrid,
    body.anz-v3 .collections .cat-grid,
    body.anz-v3 .collections .row {
        gap: var(--space-6, 32px);
    }

/* ===================================================================
 * Category banner + hero — legacy .banners-category carries a CMS image
 * that reads as stale product-photography. Apply a Pacific Blue veil so
 * the hero band feels branded on /Product/Category/*.
 * =================================================================== */
body.anz-v3 .banners-category {
    background-color: var(--anz-pacific-blue);
    position: relative;
}

    body.anz-v3 .banners-category::after {
        background: linear-gradient(180deg, rgba(5,114,230,0.55) 0%, rgba(5,114,230,0.85) 100%);
        content: "";
        inset: 0;
        pointer-events: none;
        position: absolute;
        z-index: 0;
    }

    body.anz-v3 .banners-category > * {
        position: relative;
        z-index: 1;
    }

    body.anz-v3 .banners-category img {
        filter: saturate(0.75) brightness(0.9);
        mix-blend-mode: luminosity;
        opacity: 0.7;
    }

/* Category page headline — override legacy .catcollections-title legacy
   sizing (24pt / Proxima) with v3 editorial typography. */
body.anz-v3 .catcollections-title,
body.anz-v3 .catmerchandise-title {
    background-color: transparent !important;
    background-image: none !important;
    color: var(--anz-cloud-white) !important;
    font-family: 'Aeonik', 'Helvetica Neue', Arial, sans-serif !important;
    font-size: var(--type-h1-size, 40px);
    font-weight: var(--font-weight-bold, 700);
    height: auto;
    letter-spacing: 0.02em;
    padding: var(--space-8, 48px) var(--space-6, 24px);
}

/* Section header band — .catheader already Pacific Blue; add stronger
   editorial anchor with wider padding and eyebrow-like treatment. */
body.anz-v3 .catheader {
    padding: var(--space-4, 16px) var(--space-5, 20px) !important;
    font-size: var(--type-body-m-size, 16px);
}

/* Category names come from catalogue data in Title Case (e.g. "Staff Rewards") —
   render as sentence case visually without touching the underlying data. */
body.anz-v3 .catheader {
    text-transform: lowercase;
}
body.anz-v3 .catheader::first-letter {
    text-transform: uppercase;
}

/* Ghost-inverse override — force visible outline on editorial hero
   (buttons.css may load before page-level overrides; use !important) */
body.anz-v3 .anz-v3-editorial-hero .anz-v3-btn-ghost-inverse,
body.anz-v3 a.anz-v3-btn-ghost-inverse,
body.anz-v3 .anz-v3-btn-ghost-inverse {
    background-color: transparent !important;
    border: 2px solid var(--anz-cloud-white) !important;
    color: var(--anz-cloud-white) !important;
}

    body.anz-v3 .anz-v3-editorial-hero .anz-v3-btn-ghost-inverse:hover,
    body.anz-v3 a.anz-v3-btn-ghost-inverse:hover,
    body.anz-v3 .anz-v3-btn-ghost-inverse:hover,
    body.anz-v3 .anz-v3-editorial-hero .anz-v3-btn-ghost-inverse:focus,
    body.anz-v3 a.anz-v3-btn-ghost-inverse:focus,
    body.anz-v3 .anz-v3-btn-ghost-inverse:focus {
        background-color: var(--anz-cloud-white) !important;
        border-color: var(--anz-cloud-white) !important;
        color: var(--anz-pacific-blue) !important;
    }

/* Bootstrap .form-control default height (34px) clips select text.
   Apply to every v3-scoped select regardless of whether it carries the
   .anz-v3-select class (Checkout Address, Payment, BriefSheet etc. use
   raw .form-control or .anz-v3-input). */
body.anz-v3 select.anz-v3-select,
body.anz-v3 select.anz-v3-select.form-control,
body.anz-v3 .anz-v3-select.form-control,
body.anz-v3 select.form-control,
body.anz-v3 select.anz-v3-input {
    height: auto !important;
    min-height: 48px !important;
    line-height: 1.5 !important;
    padding: 12px 44px 12px 16px !important;
    font-size: 15px !important;
    white-space: normal !important;
    box-sizing: border-box !important;
}

    body.anz-v3 .anz-v3-select option,
    body.anz-v3 select.anz-v3-select option,
    body.anz-v3 select.form-control option,
    body.anz-v3 select.anz-v3-input option {
        padding: 8px 12px !important;
        min-height: 32px !important;
        white-space: normal !important;
    }
/* Clear Skies wash on all Bootstrap .form-control fields in ANZ scope
 * (IA §3.3 — tertiary wash on form field backgrounds).
 * Covers Checkout shipping-info, address forms, search inputs, any
 * shared partial that renders `.form-control` without being forked
 * to Tier-2 `.anz-v3-input`. Keeps wash on :focus so focus state
 * only signals via border + focus-ring, not background flash. */
body.anz-v3 .form-control,
body.anz-v3 .form-control:focus {
    background-color: var(--bg-wash, #E2F6FD);
}

/* Select2 widget (loaded by Checkout) — align its rendered size with v3 tokens */
body.anz-v3 .select2-container--default .select2-selection--single {
    height: 48px !important;
    padding: 6px 8px !important;
    border: 1px solid var(--border-strong, #c9d2d9) !important;
    border-radius: var(--radius-md, 8px) !important;
    background-color: var(--bg-wash, #E2F6FD) !important;
}

    body.anz-v3 .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 36px !important;
        padding-left: 8px !important;
        padding-right: 28px !important;
        color: var(--text, #1D164C) !important;
    }

    body.anz-v3 .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 48px !important;
    }

body.anz-v3 .select2-dropdown {
    border-radius: var(--radius-md, 8px) !important;
}

body.anz-v3 .select2-results__option {
    padding: 8px 12px !important;
    white-space: normal !important;
}

/* Bottom collection row (.col-md-12 inside .collections) — user asked
   for v3 brand palette on Sports / Staff Rewards / Apparel / Surprise.
   Mirror the white-bordered shell of the upper tiles while filling the
   inner with a brand colour and vertically centring the label. */
body.anz-v3 .collections .col-md-12 .catdiv {
    background-color: var(--anz-cloud-white);
    border-radius: var(--radius-lg);
    padding: var(--space-2, 8px) !important;
    box-shadow: var(--shadow-sm);
}

    body.anz-v3 .collections .col-md-12 .catdiv .catdivinner {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 260px;
        padding: var(--space-8, 32px) var(--space-5, 20px) !important;
        border-radius: var(--radius-md);
        background-color: var(--anz-pacific-blue) !important;
        overflow: hidden;
        position: relative;
        text-align: center;
    }

    body.anz-v3 .collections .col-md-12 .catdiv:nth-child(4n+1) .catdivinner {
        background-color: var(--anz-pacific-blue) !important;
    }

    body.anz-v3 .collections .col-md-12 .catdiv:nth-child(4n+2) .catdivinner {
        background-color: var(--anz-coral-reef) !important;
    }

    body.anz-v3 .collections .col-md-12 .catdiv:nth-child(4n+3) .catdivinner {
        background-color: var(--anz-deep-sea) !important;
    }

    body.anz-v3 .collections .col-md-12 .catdiv:nth-child(4n) .catdivinner {
        background-color: var(--anz-clear-skies) !important;
    }

/* Mobile collection tiles — edge-to-edge with radius-lg to match home tiles. */
@media (max-width: 768px) {
    body.anz-v3 .collections .col-md-12 .catdiv {
        background-color: transparent !important;
        padding: 0 !important;
        box-shadow: none !important;
        border-radius: 0;
    }

        body.anz-v3 .collections .col-md-12 .catdiv .catdivinner {
            border-radius: var(--radius-lg, 12px) !important;
            box-shadow: var(--shadow-sm);
        }
}
/* Anchor becomes an invisible click-target covering the whole tile;
   image inside it stays hidden. Label (cattilename) renders on top. */
body.anz-v3 .collections .col-md-12 .catdiv .catdivinner a {
    position: absolute !important;
    inset: 0;
    z-index: 1;
    font-size: 0;
    line-height: 0;
    color: transparent;
}

    body.anz-v3 .collections .col-md-12 .catdiv .catdivinner a img {
        display: none !important;
    }

body.anz-v3 .collections .col-md-12 .catdiv .catdivinner .cattilename {
    display: block !important;
    position: static !important;
    background: transparent !important;
    color: var(--anz-cloud-white) !important;
    font-family: 'Aeonik', 'Helvetica Neue', Arial, sans-serif;
    font-size: var(--type-h4-size, 20px) !important;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
}

body.anz-v3 .collections .col-md-12 .catdiv:nth-child(4n) .catdivinner .cattilename,
body.anz-v3 .collections .col-md-12 .catdiv:nth-child(4n+2) .catdivinner .cattilename {
    color: var(--anz-deep-sea) !important;
}

/* ===================================================================
 * Design polish pass
 * =================================================================== */

/* FAQ sub-headings — Pacific Blue per PM feedback (was inheriting --text Deep Sea) */
body.anz-v3 .faq-question {
    color: var(--anz-pacific-blue);
    font-weight: var(--font-weight-medium);
}

/* Heading-class text on order-complete + other shared views — Pacific Blue
 * per PM feedback ("Thanks for your order!" + Order No / Total / Card No
 * labels were inheriting --text Deep Sea). */
body.anz-v3 .PageHeading {
    color: var(--anz-pacific-blue);
    font-weight: bold;
}

body.anz-v3 .order-confirm-box label,
body.anz-v3 .order-confirm-box-title {
    color: var(--anz-pacific-blue);
    font-weight: var(--font-weight-medium);
}

body.anz-v3 .panel-default > .panel-heading {
    color: var(--anz-pacific-blue);
}

/* Spotlight + general product-card name/price — Pacific Blue per PM feedback.
 * Matches v2's product card treatment (medium-weight Aeonik, body size).
 * Site.css legacy `font-weight: bold` was rendering with thin stroke at small
 * size making the Pacific Blue read as dark grey; explicit medium weight on
 * Aeonik fixes both colour perception and brand consistency. */
body.anz-v3 .prodname .name,
body.anz-v3 .proddivinner .name,
body.anz-v3 .prodname .price,
body.anz-v3 .proddivinner .price,
body.anz-v3 .featured-products-outer .prodname .name,
body.anz-v3 .featured-products-outer .prodname .price,
body.anz-v3 .featured-products-outer .featuredproduct .name,
body.anz-v3 .featured-products-outer .featuredproduct .price {
    color: var(--anz-pacific-blue) !important;
    font-family: 'Aeonik', 'Helvetica Neue', Arial, sans-serif;
    font-weight: var(--font-weight-medium, 500);
    font-size: var(--type-body-l-size, 18px);
    letter-spacing: 0.01em;
}

/* Product names come from catalogue data in Title Case (e.g. "Sports Backpack") —
   render as sentence case visually without touching the underlying data. */
body.anz-v3 .prodname .name,
body.anz-v3 .proddivinner .name,
body.anz-v3 .featured-products-outer .prodname .name,
body.anz-v3 .featured-products-outer .featuredproduct .name {
    display: inline-block;
    text-transform: lowercase;
}

    body.anz-v3 .prodname .name::first-letter,
    body.anz-v3 .proddivinner .name::first-letter,
    body.anz-v3 .featured-products-outer .prodname .name::first-letter,
    body.anz-v3 .featured-products-outer .featuredproduct .name::first-letter {
        text-transform: uppercase;
    }

/* "Featured Products" subtitle under Spotlight — Aeonik Medium, sentence case. */
body.anz-v3 .featured-products-outer .featured-products > p {
    font-family: 'Aeonik', 'Helvetica Neue', Arial, sans-serif;
    font-weight: var(--font-weight-medium, 500);
    text-transform: lowercase;
}

    body.anz-v3 .featured-products-outer .featured-products > p::first-letter {
        text-transform: uppercase;
    }

/* Centre product thumbnails within their card — images vary in intrinsic
   width/whitespace, so centring the container is the reliable lever here. */
body.anz-v3 .prodimg {
    text-align: center;
}

/* Unified section-title treatment (Spotlight / Get inspired etc.) */
body.anz-v3 .anz-v3-section-title {
    font-family: 'Aeonik', 'Helvetica Neue', Arial, sans-serif;
    font-size: var(--type-h3-size, 26px);
    font-weight: 700;
    color: var(--anz-pacific-blue);
    margin: 0 0 var(--space-3, 12px);
}

/* SPOTLIGHT section breathing room */
body.anz-v3 .featured-products-outer {
    margin-top: var(--space-10, 48px) !important;
    padding: var(--space-8, 32px) var(--space-4, 16px);
}

    body.anz-v3 .featured-products-outer .fp-title,
    body.anz-v3 .featured-products-outer .home-title {
        color: var(--anz-pacific-blue);
        font-family: 'Aeonik', 'Helvetica Neue', Arial, sans-serif;
        font-size: var(--type-caption-size, 12px);
        font-weight: 500;
        text-align: center;
        margin: 0 auto var(--space-5, 20px);
    }

    /* Featured product card polish */
    body.anz-v3 .featured-products-outer .fp-item,
    body.anz-v3 .featured-products-outer .featuredproduct {
        transition: transform var(--motion-standard, .2s) var(--motion-exit, ease-out), box-shadow var(--motion-standard, .2s) var(--motion-exit, ease-out);
    }

        body.anz-v3 .featured-products-outer .fp-item:hover,
        body.anz-v3 .featured-products-outer .featuredproduct:hover {
            transform: translateY(-3px);
        }

/* Subtle hover on the 3 top editorial tiles for better interaction signal */
body.anz-v3 a.anz-v3-home-tile {
    transition: transform var(--motion-standard, .2s) var(--motion-exit, ease-out), box-shadow var(--motion-standard, .2s) var(--motion-exit, ease-out), filter var(--motion-standard, .2s) var(--motion-exit, ease-out);
}

    body.anz-v3 a.anz-v3-home-tile:hover {
        filter: brightness(1.05);
        transform: translateY(-2px);
    }

/* Bottom collection tile hover — lift + brighten */
body.anz-v3 .collections .col-md-12 .catdiv {
    transition: transform var(--motion-standard, .2s) var(--motion-exit, ease-out), box-shadow var(--motion-standard, .2s) var(--motion-exit, ease-out);
    cursor: pointer;
}

    body.anz-v3 .collections .col-md-12 .catdiv:hover {
        box-shadow: var(--shadow-lg, 0 12px 32px rgba(29,22,76,0.18));
        transform: translateY(-3px);
    }

/* Footer — slightly less cramped, tokenised gaps */
body.anz-v3 footer {
    padding: var(--space-6, 24px) var(--space-4, 16px) !important;
}

    body.anz-v3 footer .text-center {
        gap: var(--space-6, 24px);
    }

    body.anz-v3 footer a.footerlink {
        align-items: center;
        color: var(--anz-cloud-white);
        display: inline-flex;
        font-weight: 500;
        gap: var(--space-2, 8px);
        padding: var(--space-2, 8px) var(--space-3, 12px);
    }

        body.anz-v3 footer a.footerlink:hover,
        body.anz-v3 footer a.footerlink:focus {
            color: var(--anz-clear-skies, #8ADAF9);
            text-decoration: none;
        }

/* Editorial hero — subtle eyebrow/body contrast tune-up */
body.anz-v3 .anz-v3-editorial-hero__eyebrow {
    opacity: 1;
}

body.anz-v3 .anz-v3-editorial-hero__body {
    max-width: 540px;
}

/* ===================================================================
 * Home editorial hero — flat Pacific Blue fill (no gradient/bubbles).
 * =================================================================== */
body.anz-v3 .anz-v3-editorial-hero {
    background-color: var(--anz-pacific-blue) !important;
    background-image: none !important;
}

/* Smooth header to hero — ensure main nav background and hero background
   share the same Pacific Blue and remove the hairline separator so the
   two panels read as one continuous band. */
body.anz-v3 #mainNav,
body.anz-v3 .navbar-fixed-top {
    border-bottom: 0 !important;
    box-shadow: none !important;
}

    body.anz-v3 #mainNav .header-top {
        background-color: var(--anz-pacific-blue) !important;
    }

body.anz-v3 .banners-outer + .anz-v3-editorial-hero,
body.anz-v3 .anz-v3-editorial-hero {
    margin-top: 0;
}
    /* Override the dark-to-light gradient overlay on home hero — it was
   tuned for photo backgrounds and dims the bubbles unnecessarily. */
    body.anz-v3 .anz-v3-editorial-hero::after {
        background: transparent !important;
    }

/* Hide the legacy "category summary details are stored here…" placeholder
   copy rendered by Views/PartialView/Categories.cshtml until real content
   ships in DB. Keeping it scoped to body.anz-v3 so other tenants still see
   their own copy. */
body.anz-v3 .prodcatSummaryItem {
    display: none !important;
}

/* Form controls — user wants white surface everywhere, not Clear Skies Ultrasoft */
body.anz-v3 select.anz-v3-select,
body.anz-v3 select.anz-v3-select.form-control,
body.anz-v3 .anz-v3-select.form-control,
body.anz-v3 select.form-control,
body.anz-v3 select.anz-v3-input,
body.anz-v3 .anz-v3-select,
body.anz-v3 .anz-v3-input,
body.anz-v3 input.anz-v3-input,
body.anz-v3 textarea.anz-v3-textarea {
    background-color: var(--anz-cloud-white) !important;
}

    body.anz-v3 .anz-v3-select:focus,
    body.anz-v3 select.form-control:focus,
    body.anz-v3 select.anz-v3-input:focus,
    body.anz-v3 .anz-v3-input:focus {
        background-color: var(--anz-cloud-white) !important;
    }
/* Select2 widget — also white */
body.anz-v3 .select2-container--default .select2-selection--single {
    background-color: var(--anz-cloud-white) !important;
}

/* Register page (shared ~/Views/Account/Register.cshtml, no ANZ-specific fork yet) —
 * scoped to .registrationcontainer only, so this doesn't bleed into other pages'
 * plain .form-control usage. Inputted text + dropdown text in Deep Sea per feedback. */
body.anz-v3 .registrationcontainer .form-control {
    color: var(--anz-deep-sea) !important;
}

/* PDP info column polish — less cramped card with clean padding + breathing
   room between fields. Variation + purchase-reason + CTAs sit inside the
   same outlined card; give it air. */
body.anz-v3 .anz-v3-pdp-purchase {
    padding: var(--space-6, 24px) !important;
    border-radius: var(--radius-lg, 12px) !important;
    background-color: var(--anz-cloud-white) !important;
}

body.anz-v3 .anz-v3-pdp-info-col .anz-v3-field {
    margin-bottom: var(--space-4, 16px);
}

body.anz-v3 .anz-v3-pdp-info-col {
    padding-left: var(--space-6, 24px);
}

body.anz-v3 .anz-v3-pdp-gallery-col .anz-v3-gallery__main {
    border: 1px solid var(--border, #E5EEF3);
    padding: var(--space-4, 16px);
}

/* ---------------------------------------------------------------
 * Instant-search no-match state — polish batch 2026-04-20 R9
 * Upstream markup added guidance text + clear-search CTA; brand
 * them here so the dropdown reads as a first-class empty state
 * instead of a bare heading.
 * --------------------------------------------------------------- */
body.anz-v3 #NoMatchFoundDiv {
    padding: var(--space-8, 32px) var(--space-6, 24px);
    text-align: center;
    background-color: var(--anz-cloud-white, #ffffff);
    border: 1px solid var(--border, #E5EEF3);
    border-radius: var(--radius-lg, 12px);
    margin: var(--space-5, 20px) auto;
    max-width: 560px;
}

    body.anz-v3 #NoMatchFoundDiv .anz-v3-no-match-icon {
        color: var(--anz-pacific-blue, #0572E6);
        font-size: 32px;
        margin-bottom: var(--space-3, 12px);
    }

    body.anz-v3 #NoMatchFoundDiv h3 {
        color: var(--anz-pacific-blue, #0572E6);
        font-family: 'Aeonik', 'Helvetica Neue', Arial, sans-serif;
        font-weight: 600;
        margin: 0 0 var(--space-2, 8px);
    }

    body.anz-v3 #NoMatchFoundDiv .anz-v3-no-match-hint {
        color: var(--text-secondary);
        margin: 0 0 var(--space-4, 16px);
        line-height: var(--type-body-m-lh, 1.5);
    }

    body.anz-v3 #NoMatchFoundDiv .anz-v3-no-match-cta a {
        color: var(--anz-pacific-blue, #0572E6);
        font-weight: 500;
        text-decoration: underline;
    }

        body.anz-v3 #NoMatchFoundDiv .anz-v3-no-match-cta a:hover {
            color: var(--anz-pacific-blue, #0572E6);
        }

/* ---------------------------------------------------------------
 * PDP stock-out pill — polish batch 2026-04-20 R9
 * The OOS indicator markup was rendering as plain text with no
 * visual weight; give it a proper warning pill so shoppers
 * immediately register the availability signal.
 * --------------------------------------------------------------- */
body.anz-v3 .anz-v3-pdp-stock-oos {
    margin-top: var(--space-3, 12px);
    margin-bottom: var(--space-3, 12px);
}

    body.anz-v3 .anz-v3-pdp-stock-oos .out-of-stock {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2, 8px);
        padding: var(--space-2, 8px) var(--space-3, 12px);
        background-color: var(--anz-coral-reef, #FF746A);
        color: var(--anz-deep-sea, #1D164C);
        border-radius: var(--radius-pill, 999px);
        font-family: 'Aeonik', 'Helvetica Neue', Arial, sans-serif;
        font-weight: 600;
        font-size: var(--type-body-s-size, 14px);
    }

        body.anz-v3 .anz-v3-pdp-stock-oos .out-of-stock::before {
            content: "\f071"; /* fa-exclamation-triangle */
            font-family: FontAwesome;
            font-size: 0.95em;
        }

body.anz-v3 .anz-v3-pdp-stock {
    margin-top: var(--space-3, 12px);
    margin-bottom: var(--space-3, 12px);
    color: var(--text-secondary);
    font-size: var(--type-body-s-size, 14px);
}

/* ===================================================================
 * ROUND 6: Catch-all override for tenant Areas/ANZ/Content/Site.css's
 * unscoped `color: black` rules that override our --text inheritance
 * for legacy markup that v3 still reuses (cart payment / address forms).
 * =================================================================== */
body.anz-v3 .prod-description,
body.anz-v3 .prod-description p,
body.anz-v3 .prod-description strong,
body.anz-v3 .prod-description span,
body.anz-v3 .prod-description b,
body.anz-v3 .prod-description em,
body.anz-v3 .prod_det_col2,
body.anz-v3 .prod_det_col2 p,
body.anz-v3 .prod_det_col2 strong,
body.anz-v3 .prod_det_col2 span,
body.anz-v3 .prod_det_col2 td,
body.anz-v3 .prod_det_col2 th,
body.anz-v3 .prod_det_col2 label,
body.anz-v3 .productdetailsprices,
body.anz-v3 .productdetailsprices *,
body.anz-v3 .SubHeading,
body.anz-v3 .panel-body,
body.anz-v3 .panel-body p,
body.anz-v3 .panel-body strong,
body.anz-v3 .panel-body span,
body.anz-v3 .panel-body label,
body.anz-v3 .panel-body td,
body.anz-v3 .panel-body th,
body.anz-v3 .checkoutaddress,
body.anz-v3 .checkoutaddress label,
body.anz-v3 .checkoutaddress span,
body.anz-v3 .checkoutaddress td,
body.anz-v3 .checkoutaddress th,
body.anz-v3 .checkoutaddress strong,
body.anz-v3 .countdown .cdtitle,
body.anz-v3 .time_circles > div > h4,
body.anz-v3 .breadcrumb-item,
body.anz-v3 .breadcrumb a,
body.anz-v3 .smalltext {
    color: var(--anz-pacific-blue) !important;
}

    body.anz-v3 #FormUpdateCart input,
    body.anz-v3 .checkoutaddress .form-control,
    body.anz-v3 .panel-body .form-control,
    body.anz-v3 input[type="text"],
    body.anz-v3 input[type="email"],
    body.anz-v3 input[type="tel"],
    body.anz-v3 input[type="number"],
    body.anz-v3 input[type="password"],
    body.anz-v3 textarea,
    body.anz-v3 select,
    body.anz-v3 option {
        color: var(--anz-pacific-blue) !important;
    }

/* Navigation menu & Header: Pacific Blue text on Cloud White background */
body.anz-v3 #mainNav {
    background-color: var(--anz-pacific-blue) !important;
}

    body.anz-v3 #mainNav .header-top {
        background-color: var(--anz-cloud-white) !important;
    }

body.anz-v3 .rsl-top-menu {
    background-color: var(--anz-cloud-white);
}

    body.anz-v3 .rsl-top-menu a,
    body.anz-v3 .rsl-top-menu .rsl-menu-item,
    body.anz-v3 .rsl-menu-value {
        color: var(--anz-pacific-blue);
    }

        body.anz-v3 .rsl-top-menu a:hover,
        body.anz-v3 .rsl-top-menu a:focus {
            color: var(--anz-deep-sea);
        }

/* Search styling: Pacific Blue on Cloud White */
body.anz-v3 .rsl-search {
    background-color: var(--anz-cloud-white) !important;
}

body.anz-v3 .header-search i {
    color: var(--anz-pacific-blue) !important;
}

body.anz-v3 .site-search-input {
    background-color: var(--anz-cloud-white) !important;
    color: var(--anz-pacific-blue) !important;
    font-family: var(--font-family) !important;
}

    body.anz-v3 .site-search-input::placeholder {
        color: var(--anz-pacific-blue) !important;
    }