@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@500;600&display=swap');


/* ====================================================================
   01. FOUNDATIONS
   ==================================================================== */

:root {
    --color-bg: #ffffff;
    --color-bg-alt: #f3f3f3;
    --color-bg-promo: #f6f6f6;
    --color-text: #121212;
    --color-text-muted: #5c5c5c;
    --color-button: #121212;
    --color-button-label: #ffffff;
    --color-accent: #0195d8;
    --color-accent-text: #ffffff;
    --color-border: rgba(18, 18, 18, 0.12);
    --radius-button: 16px;
    --radius-card: 2px;
    --page-width: 1500px;
    --font-body: 'Assistant', sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--color-text);
    background: var(--color-bg);
    font-size: 19px;
    line-height: 1.65;
}

a {
    color: inherit;
}

.wrap {
    max-width: var(--page-width);
    margin: 0 auto;
    padding: 0 32px;
}


.section {
    padding: 48px 0;
}

.section-title {
    font-size: 40px;
    font-weight: 700;
    margin: 0 0 24px;
    letter-spacing: -0.01em;
}

.btn {
    display: inline-block;
    background: var(--color-button);
    color: var(--color-button-label);
    border: 3px solid var(--color-button);
    border-radius: var(--radius-button);
    padding: 10px 22px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.15s ease;
}

    .btn:hover {
        opacity: 0.85;
    }

    .btn.btn-accent {
        background: var(--color-accent);
        border-color: var(--color-accent);
    }

.loading {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--color-text-muted);
    padding: 32px 0;
    text-align: center;
}


.section-title.center {
    text-align: center;
}

.btn-pill {
    background: var(--color-button);
    color: var(--color-button-label);
    border: none;
    border-radius: 28px;
    padding: 16px 0;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    width: 100%;
    margin-top: 8px;
}

    .btn-pill:hover {
        opacity: 0.88;
    }


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


/* ====================================================================
   02. HEADER & NAVIGATION
   ==================================================================== */


.contact-banner {
    background: var(--color-accent);
    color: var(--color-accent-text);
    font-size: 19px;
    font-weight: 500;
}

    .contact-banner .wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding-top: 10px;
        padding-bottom: 10px;
        flex-wrap: wrap;
    }

    .contact-banner a {
        text-decoration: none;
    }

        .contact-banner a:hover {
            text-decoration: underline;
        }


.promo-banner {
    background: var(--color-bg-promo);
    color: #333333;
}

    .promo-banner .wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding-top: 10px;
        padding-bottom: 10px;
        font-weight: 600;
        font-size: 16px;
    }

.promo-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    vertical-align: middle;
}


/*  The phone and email strip, the Free Delivery banner and the header,
    pinned to the top while the page scrolls. js/site.js writes their height
    into --site-top-h, which the page's own sticky panels and anchor jumps
    use to clear it.  */
.site-top {
    position: sticky;
    top: 0;
    z-index: 40;
}

html {
    scroll-padding-top: var(--site-top-h, 0px);
}

header.site-header {
    border-bottom: 1px solid var(--color-border);
    position: relative;
    z-index: 5;
    background: #fff;
}

    header.site-header .wrap {
        display: flex;
        align-items: center;
        gap: 32px;
        padding-top: 2px;
        padding-bottom: 2px;
    }

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
}


nav.site-nav {
    display: flex;
    gap: 55px;
    font-weight: 700;
    font-size: 17px;
    flex: 1;
}

    nav.site-nav a {
        text-decoration: none;
        color: var(--color-text);
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 4px 0;
    }

        nav.site-nav a.active {
            text-decoration: underline;
            text-underline-offset: 4px;
        }

        nav.site-nav a:hover {
            color: var(--color-accent);
        }

        nav.site-nav a svg {
            opacity: 0.6;
        }


.nav-dropdown {
    position: relative;
}


.nav-dropdown-trigger {
    position: relative;
    transition: color 0.2s ease;
}

    .nav-dropdown-trigger svg {
        transition: transform 0.22s ease;
    }

.nav-dropdown:hover .nav-dropdown-trigger svg, .nav-dropdown.open .nav-dropdown-trigger svg {
    transform: rotate(180deg);
}


.dropdown-menu {
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    min-width: 260px;
    padding: 9px;
    background: #ffffff;
    border: 1px solid rgba(18, 18, 18, 0.10);
    border-radius: 14px;
    box-shadow: 0 18px 45px rgba(18, 18, 18, 0.12), 0 3px 10px rgba(18, 18, 18, 0.05);
    z-index: 30;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 8px) scale(0.98);
    transform-origin: top center;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}


    .dropdown-menu::before {
        content: "";
        position: absolute;
        top: -6px;
        left: 50%;
        width: 11px;
        height: 11px;
        background: #ffffff;
        border-left: 1px solid rgba(18, 18, 18, 0.10);
        border-top: 1px solid rgba(18, 18, 18, 0.10);
        transform: translateX(-50%) rotate(45deg);
    }


    .dropdown-menu::after {
        content: "";
        position: absolute;
        top: -15px;
        left: 0;
        right: 0;
        height: 15px;
    }


.nav-dropdown:hover .dropdown-menu, .nav-dropdown.open .dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0) scale(1);
}


.dropdown-menu a {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 14px 10px 15px;
    border-radius: 9px;
    color: var(--color-text);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    transition: background 0.16s ease, color 0.16s ease, padding-left 0.16s ease, transform 0.16s ease;
}


    .dropdown-menu a::before {
        content: "";
        width: 3px;
        height: 0;
        margin-right: 0;
        border-radius: 99px;
        background: var(--color-accent);
        opacity: 0;
        transition: height 0.16s ease, margin-right 0.16s ease, opacity 0.16s ease;
    }

    .dropdown-menu a:hover, .dropdown-menu a:focus-visible {
        background: rgba(1, 149, 216, 0.08);
        color: var(--color-accent);
        padding-left: 12px;
        outline: none;
        transform: translateX(1px);
    }

        .dropdown-menu a:hover::before, .dropdown-menu a:focus-visible::before {
            height: 20px;
            margin-right: 9px;
            opacity: 1;
        }


.nav-dropdown-trigger:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;
    border-radius: 4px;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-shrink: 0;
}


.icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text);
    display: flex;
    padding: 2px;
    position: relative;
}


.nav-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--color-text);
    cursor: pointer;
    padding: 4px;
}


.brand-mark {
    height: 60px;
    width: auto;
    display: block;
}


.cart-badge {
    position: absolute;
    top: -4px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--color-accent);
    color: var(--color-accent-text);
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}


.user-greeting {
    margin-right: .5rem;
    font-size: .95rem;
    font-weight: 600;
    color: #0195D8;
    white-space: nowrap;
    max-width: 16ch;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ====================================================================
   03. HOME PAGE
   ==================================================================== */
.home-hero {
    position: relative;
    overflow: hidden;
    background: #fff;
}


.home-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(circle at 12% 15%, rgba(1, 149, 216, .13) 0%, transparent 45%), radial-gradient(circle at 88% 85%, rgba(1, 149, 216, .09) 0%, transparent 42%);
}


.home-hero .home-hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 44px;
    align-items: center;
    padding-top: 72px;
    padding-bottom: 52px;
    padding-left: 32px;
    padding-right: 32px;
}

.home-hero-copy {
    max-width: 100%;
}

.home-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 16px 7px 12px;
    border: 1px solid rgba(1, 149, 216, .3);
    background: rgba(1, 149, 216, .07);
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-accent);
    margin-bottom: 22px;
}

.home-eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-accent);
}

.home-hero h1 {
    font-size: 54px;
    line-height: 1.06;
    letter-spacing: -0.03em;
    font-weight: 800;
    margin: 0 0 50px;
}

    .home-hero h1 .accent-text {
        color: var(--color-accent);
    }


.home-hero-copy p {
    font-size: 18px;
    line-height: 1.75;
    color: var(--color-text-muted);
    margin: 0;
    max-width: 100%;
}

.home-hero-media {
    position: relative;
    aspect-ratio: 3 / 2;
    width: 100%;
}

/* The canvas fills the stage; js/hero-dots.js draws the logo into it, and
   every 10 seconds fades it out for one play of the original SVG. */
.hero-dots canvas,
.hero-dots .hero-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
    transition: opacity .8s ease;
}

.hero-dots .hero-svg {
    opacity: 0;
    pointer-events: none;
}

.hero-dots.show-svg canvas,
.hero-dots.dots-away canvas {
    opacity: 0;
}

.hero-dots.show-svg .hero-svg {
    opacity: 1;
}


/* Christmas look (Index.cshtml; dates in Angel.Core/Seasons/HeroSeasons.cs).
   Every season keeps the hero's normal background. Christmas adds the
   trading hours under the copy, and two layers drawn by js/christmas-hero.js
   behind the heading and the logo, which sit on z-index 1: the snow and
   Santa's sleigh. */
.home-hero-copy .christmas-note {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    max-width: 520px;
    margin: 26px 0 0;
    padding: 14px 18px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid rgba(18, 18, 18, .1);
    box-shadow: 0 10px 28px rgba(1, 74, 120, .08);
    font-size: 15.5px;
    line-height: 1.5;
    color: #3a3a3a;
    text-align: left;
}

    .christmas-note b {
        color: var(--color-text);
    }

    .christmas-note svg {
        flex: none;
        margin-top: 2px;
        color: #b8322a;
    }

.christmas-snow,
.christmas-path {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.christmas-path {
    visibility: hidden;
}

.christmas-sleigh {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s ease;
    will-change: transform;
}

    .christmas-sleigh.is-flying {
        opacity: 1;
    }

    .christmas-sleigh svg {
        display: block;
    }

/* New Year, Australia Day and Easter (Index.cshtml; dates in
   Angel.Core/Seasons/HeroSeasons.cs). The trading box shares the Christmas
   one's look; js/new-year-hero.js draws the fireworks (behind the heading
   and the logo, like the snow) and fades the logo dots for the year,
   js/australia-day-hero.js the wattle and js/easter-hero.js the eggs. */
.home-hero.is-new-year .home-eyebrow {
    color: #8a6400;
    border-color: rgba(217, 162, 27, .45);
    background: rgba(246, 196, 83, .14);
}

.new-year-fireworks {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.home-hero.is-australia-day .home-eyebrow {
    color: #00703a;
    border-color: rgba(0, 132, 61, .3);
    background: rgba(0, 132, 61, .07);
}

.home-hero.is-easter .home-eyebrow {
    color: #7a5bc4;
    border-color: rgba(122, 91, 196, .3);
    background: rgba(201, 184, 240, .18);
}

.season-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: visible;
}

    .season-layer.is-front {
        z-index: 2;
    }

.season-wattle .stem { fill: none; stroke: #6b7a3a; stroke-width: 3; stroke-linecap: round; }
.season-wattle .leaf { fill: #5f8a4a; }
.season-wattle .puff-halo { fill: rgba(255, 205, 40, .35); }
.season-wattle .puff { fill: #f7c21a; }
.season-wattle .puff-hi { fill: #ffe680; }

.season-wattle .sway {
    animation: season-sway 5s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: 0 50%;
}

.season-eggs .grass { stroke: #8cc59a; stroke-width: 3; stroke-linecap: round; }
.season-eggs .blade { fill: none; stroke: #8cc59a; stroke-width: 2.4; stroke-linecap: round; }

.season-eggs .egg-1,
.season-eggs .egg-3 {
    animation: season-rock 3.2s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: 50% 100%;
}

.season-eggs .egg-3 {
    animation-delay: -1.6s;
}

@keyframes season-sway {
    0%, 100% { transform: rotate(-1.5deg); }
    50% { transform: rotate(1.5deg); }
}

@keyframes season-rock {
    0%, 100% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
}

@media (prefers-reduced-motion: reduce) {
    .season-wattle .sway,
    .season-eggs .egg-1,
    .season-eggs .egg-3 {
        animation: none;
    }
}


.home-hero .trust-row {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    padding-top: 8px;
    padding-bottom: 24px;
    padding-left: 32px;
    padding-right: 32px;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 6px 22px rgba(18, 18, 18, .07);
    transition: transform .15s ease, box-shadow .15s ease;
}

    .trust-item:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 30px rgba(18, 18, 18, .11);
    }


.trust-icon {
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent);
}


    .trust-icon svg, .trust-icon img {
        width: 35px;
        height: 35px;
        display: block;
        object-fit: contain;
    }

.trust-label {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-accent);
}

.home-gallery {
    padding: 64px 10px 40px;
}

.gallery-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}


    .gallery-viewport::-webkit-scrollbar {
        display: none;
    }

    .gallery-viewport:focus-visible {
        outline: 2px solid var(--color-accent);
        outline-offset: 4px;
        border-radius: 12px;
    }

.gallery-track {
    display: flex;
    gap: 18px;
}


.gallery-slide {
    flex: 0 0 calc(20% - 14.4px);
    min-width: 0;
    scroll-snap-align: start;
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    overflow: hidden;
    background: var(--color-bg-alt);
}

    .gallery-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }


.gallery-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 26px;
}

.gallery-arrow {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--color-bg-alt);
    color: var(--color-text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s ease;
}

    .gallery-arrow:hover {
        background: rgba(1, 149, 216, .14);
        color: var(--color-accent);
    }

.gallery-dots {
    display: flex;
    align-items: center;
    gap: 9px;
}

.gallery-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(18, 18, 18, .18);
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}

    .gallery-dot.active {
        background: var(--color-text);
        transform: scale(1.25);
    }


.discover-intro {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #eaf6fc 0%, #f5fbfd 100%);
    padding: 56px 0;
}

.discover-intro-inner {
    position: relative;
    z-index: 1;
    max-width: 1000px;
    text-align: center;
}

    .discover-intro-inner .section-title {
        margin-bottom: 20px;
    }

    .discover-intro-inner p {
        color: var(--color-text-muted);
        font-size: 19px;
        line-height: 1.85;
        margin: 0;
    }


/*  STORK FLY-PAST
    Lives inside .discover-intro, which is already position:relative and
    overflow:hidden, so the band itself clips the flight - the bird can
    start past the right edge without widening the page.

    Sized from the band's height rather than the viewport's width, because
    the clip is composed with the bird up top and the delivery landing at
    the bottom. Anchoring it to the bottom means the parcel always lands on
    the foot of the band, whatever height the paragraph happens to be.

    Driven by wwwroot/js/stork-flyby.js. The slide across finishes at 3.6s,
    which is where the clip's own dive begins; the fade runs the full 5.95s
    so it only lets go once the delivery has settled.  */

.discover-intro .stork-flyby {
    --stork-rest: 1vw;
    position: absolute;
    /*  Longhands first: the inset shorthand only landed in Safari 14.1, and
        without offsets this box would collapse and strand the bird.  */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 2;
}

.stork-flyby[hidden] {
    display: none;
}

.stork-flyby-clip {
    position: absolute;
    left: 0;
    bottom: 0;
    height: clamp(170px, 86%, 360px);
    width: auto;
    display: block;
    /*  Parked off-stage and invisible, so a dropped frame between the
        image going in and the class going on shows nothing.  */
    opacity: 0;
    transform: translate3d(110%, 0, 0);
    will-change: transform, opacity;
}

.stork-flyby.is-flying .stork-flyby-clip {
    animation: stork-cross 3.6s cubic-bezier(.3, .25, .45, 1) forwards, stork-fade 5.95s linear forwards;
}

@keyframes stork-cross {
    from {
        transform: translate3d(100vw, 0, 0);
    }

    to {
        transform: translate3d(var(--stork-rest), 0, 0);
    }
}

@keyframes stork-fade {
    0% {
        opacity: 0;
    }

    6% {
        opacity: 1;
    }

    86% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@media (max-width: 640px) {
    .discover-intro .stork-flyby {
        --stork-rest: 3vw;
    }

    .stork-flyby-clip {
        height: clamp(150px, 54%, 230px);
    }
}

/*  The script bails out on its own, but this covers the case where the
    setting is turned on after a flight has already started.  */
@media (prefers-reduced-motion: reduce) {
    .stork-flyby {
        display: none;
    }
}


/* ====================================================================
   04. CATALOGUE
   ==================================================================== */


.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 26px;
}

.product-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    border-radius: var(--radius-card);
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease;
}

    .product-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(18, 18, 18, .10);
    }

    .product-card .thumb {
        aspect-ratio: 1 / 1;
        background: #fff;
        border: 1px solid var(--color-border);
        border-bottom: none;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

        .product-card .thumb img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            display: block;
        }


    .product-card .product-body {
        background: var(--color-bg-alt);
        padding: 22px 18px 26px;
        text-align: center;
        display: flex;
        flex-direction: column;
        gap: 10px;
        flex: 1;
    }

    .product-card .name {
        margin: 0;
        font-size: 17px;
        font-weight: 700;
        line-height: 1.35;
    }

    .product-card .base-price {
        font-size: 19px;
        font-weight: 700;
    }

        .product-card .base-price small {
            font-size: 13px;
            font-weight: 500;
            color: var(--color-text-muted);
        }

        /*  Lighter and smaller than a real price. "Coming Soon" set in the
            same bold 19px as "From $12.50" reads as a price at a glance,
            which is the one thing it must not do.  */
        .product-card .base-price.is-coming-soon {
            font-size: 15px;
            font-weight: 600;
            color: var(--color-accent);
        }


.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.category-card {
    background: var(--color-bg-alt);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

    .category-card img {
        width: 100%;
        height: 400px;
        object-fit: cover;
        display: block;
        background: #e3e3e3;
    }

    .category-card .category-body {
        padding: 28px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        flex: 1;
    }

    .category-card h3 {
        margin: 0;
        font-size: 28px;
        font-weight: 700;
    }

    .category-card p {
        margin: 0;
        color: var(--color-text-muted);
        font-size: 18px;
        line-height: 1.7;
        flex: 1;
    }

    /*  min-width rather than more padding alone, so every Browse button is
        the same length whatever the card is called - padding would size each
        one to its own label.  */
    .category-card .btn {
        margin-top: 14px;
        min-width: 200px;
        padding: 13px 34px;
        font-size: 16px;
        text-align: center;
    }


.range-page {
    padding-top: 40px;
}

/* The visible breadcrumb trail (Pages/Shared/_Breadcrumbs). */
.breadcrumbs ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    margin: 0 0 30px;
    padding: 0;
    font-size: 14px;
    line-height: 1.4;
    color: var(--color-text-muted);
}

    .breadcrumbs li {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }

        .breadcrumbs li + li::before {
            content: "/";
            color: #9a9a9a;
        }

    .breadcrumbs a {
        color: var(--color-text-muted);
        text-decoration: none;
    }

        .breadcrumbs a:hover {
            color: var(--color-text);
            text-decoration: underline;
        }

    .breadcrumbs [aria-current] {
        color: var(--color-text);
        font-weight: 600;
        overflow-wrap: anywhere;
    }

/* A little more room above the product picture and the checkout title. */
.pd-page .breadcrumbs ol,
.checkout-head .breadcrumbs ol {
    margin-bottom: 24px;
}

.range-header h1 {
    font-size: 46px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 22px;
}

.range-header p {
    max-width: 1400px;
    margin: 0 0 48px;
    color: var(--color-text);
}


/* --------------------------------------------------------------------
   Category page: hero with fading product pictures, then range cards
   -------------------------------------------------------------------- */

.cat-hero {
    background: linear-gradient(180deg, #eef6fb 0%, #ffffff 100%);
    padding: 20px 0 32px;
}

.cat-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.cat-eyebrow {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    /* The accent blue darkened for small text: 4.9:1 on the pale ground. */
    color: var(--color-accent);
}

.cat-hero h1 {
    font-size: 50px;
    line-height: 1.04;
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 10px 0 14px;
    overflow-wrap: break-word;
}

.cat-hero-copy p {
    font-size: 19px;
    line-height: 1.6;
    color: var(--color-text-muted);
    margin: 0;
}

/*  All Products: one button per category under the intro. The chosen one
    fills in blue and carries an ×, since clicking it again clears it.  */
.cat-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.cat-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: 1.5px solid var(--color-border);
    border-radius: 999px;
    background: #fff;
    color: var(--color-text);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}

    .cat-filter-btn:hover {
        border-color: var(--color-accent);
        color: var(--color-accent);
        text-decoration: none;
    }

    .cat-filter-btn.is-active {
        background: var(--color-accent);
        border-color: var(--color-accent);
        color: #fff;
    }

    .cat-filter-btn:focus-visible {
        outline: 3px solid #005fcc;
        outline-offset: 2px;
    }

.cat-filter-x {
    font-size: 17px;
    font-weight: 400;
    line-height: 1;
}

.cat-badges {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 24px 0 0;
    padding: 0;
}

    /* A light tint of the brand blue. */
    .cat-badges li {
        display: flex;
        align-items: center;
        gap: 8px;
        background: #e6f4fb;
        border: 1px solid #bfe3f5;
        color: #0b4a6b;
        border-radius: 999px;
        padding: 8px 14px;
        font-size: 14px;
        font-weight: 600;
    }

    .cat-badges svg {
        color: var(--color-accent);
        flex: none;
    }

/* Range cards */

.cat-ranges {
    padding: 24px 0 72px;
}

.cat-ranges-head {
    margin-bottom: 28px;
}

    .cat-ranges-head h2 {
        margin: 0;
        font-size: 24px;
        font-weight: 700;
        letter-spacing: -.01em;
    }

    .cat-ranges-head p {
        margin: 6px 0 0;
        color: var(--color-text-muted);
        font-size: 16px;
    }

/* Range and product cards: 5 across from 1280px, 4 from 1000px, 3 from
   800px and 2 below that (phones and small tablets). */
.range-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 24px;
}

@media (max-width: 1279px) {
    .range-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 20px;
    }
}

@media (max-width: 999px) {
    .range-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
    }
}

@media (max-width: 799px) {
    .range-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }
}

.range-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--color-text);
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 22px;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
}

    .range-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 18px 40px rgba(18, 18, 18, .10);
    }

    .range-card:focus-visible {
        outline: 3px solid #005fcc;
        outline-offset: 3px;
    }

.range-card-thumb {
    aspect-ratio: 1 / 1;
    background: #ffffff;
    border-bottom: 1px solid var(--color-border);
    overflow: hidden;
}

    .range-card-thumb img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
        transition: transform .35s ease;
    }

.range-card:hover .range-card-thumb img {
    transform: scale(1.05);
}

.range-card-body {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 16px 18px 18px;
    background-color:#f6f6f6;
}

.range-card-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.range-card-name {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: break-word;
}

.range-card-count {
    font-size: 14px;
    color: var(--color-text-muted);
}

.range-card-arrow {
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 50%;
    background: var(--color-button);
    color: var(--color-button-label);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .range-card-arrow svg {
        transition: transform .2s ease;
    }

.range-card:hover .range-card-arrow svg {
    transform: translateX(3px);
}

/* Product cards on a subcategory page: the range card with colours and a
   price. Bottom-aligned so the arrows line up when names wrap. */

.product-type-card .range-card-body {
    align-items: flex-end;
}

.product-type-card .range-card-text {
    gap: 6px;
}

.product-type-card .colour-dots {
    justify-content: flex-start;
    margin: 2px 0;
}

.range-card-price {
    font-size: 17px;
    font-weight: 700;
}

    /*  Lighter and smaller than a real price, so it never reads as one. */
    .range-card-price.is-coming-soon {
        font-size: 15px;
        font-weight: 600;
        color: var(--color-accent);
    }

.cat-ranges .listing-bar {
    padding-bottom: 20px;
}

@media (max-width: 900px) {
    .cat-hero {
        padding: 16px 0 24px;
    }



    .cat-hero h1 {
        font-size: 40px;
        margin: 10px 0 14px;
    }

    .cat-hero-copy p {
        font-size: 17px;
    }

    .cat-ranges {
        padding: 16px 0 48px;
    }

    .cat-ranges-head h2 {
        font-size: 20px;
    }

}

@media (max-width: 560px) {
    .cat-hero h1 {
        font-size: 34px;
    }

    .cat-badges li {
        font-size: 13px;
        padding: 7px 12px;
    }

    .range-card {
        border-radius: 18px;
    }

    .range-card-thumb {
        aspect-ratio: 1 / 1;
    }

    .range-card-body {
        padding: 12px;
        gap: 8px;
    }

    .range-card-name {
        font-size: 15px;
    }

    .range-card-count {
        font-size: 13px;
    }

    .range-card-price {
        font-size: 16px;
    }

    .product-type-card .colour-dot {
        width: 16px;
        height: 16px;
    }

    .range-card-arrow {
        width: 30px;
        height: 30px;
    }

        .range-card-arrow svg {
            width: 13px;
            height: 13px;
        }
}

@media (prefers-reduced-motion: reduce) {
    .range-card,
    .range-card-thumb img,
    .range-card-arrow svg {
        transition: none;
    }

    .range-card:hover,
    .range-card:hover .range-card-thumb img {
        transform: none;
    }
}


.listing-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 24px;
    padding-bottom: 28px;
}

.listing-bar:has(.sort-form) {
    justify-content: space-between;
}

.sort-form {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sort-form label {
    color: var(--color-text-muted);
    font-size: 15px;
    white-space: nowrap;
}

.sort-form select {
    appearance: none;
    -webkit-appearance: none;
    min-width: 200px;
    padding: 10px 40px 10px 14px;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23555' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center;
    color: inherit;
    font: inherit;
    font-size: 15px;
    cursor: pointer;
}

.sort-form select:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.sort-go {
    padding: 10px 16px;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    background: #fff;
    font: inherit;
    cursor: pointer;
}

@media (max-width: 560px) {
    .sort-form { width: 100%; }
    .sort-form select { flex: 1; min-width: 0; }
}

.product-count {
    color: var(--color-text-muted);
    font-size: 16px;
}

.empty-note {
    color: var(--color-text-muted);
    padding: 40px 0;
}


/* The colours on a listing card. Same fills as the product page swatches. */
.colour-dots {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: .3rem 0 .45rem;
}

.colour-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .25);
    background: #ccc;
    box-sizing: border-box;
    flex: none;
}

.colour-dot.pale {
    border-color: rgba(0, 0, 0, .45);
}

.colour-dot.translucent {
    background: linear-gradient(135deg, #f7fafc 0%, #dfe6ec 45%, #f7fafc 100%);
    border-color: rgba(0, 0, 0, .35);
}

.colour-dots-more {
    font-size: 13px;
    color: #4a5568;
    margin-left: 2px;
}


/* ====================================================================
   05. PRODUCT PAGE
   One photo on the left, the buy box on the right; specifications and
   key features under them, then one row of "More from" the category.
   Phones stack it, and the Add to cart box pins to the bottom.
   ==================================================================== */

.pd-page {
    padding-top: 20px;
    background: linear-gradient(180deg, #eef6fb 0%, #ffffff 420px);
}

/*  The photo is capped at 560px, or just under half the row on a smaller
    laptop. Wider, it dwarfed the buy box beside it; the space it gives up
    goes to the price table and Add to cart. */
.pd {
    display: grid;
    grid-template-columns: minmax(0, min(560px, 48%)) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
}

/* Sticky so the photo stays in view while the buy box scrolls past it. */
.pd-media {
    position: sticky;
    top: calc(var(--site-top-h, 0px) + 24px);
}

.pd-photo {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 28px;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .pd-photo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
    }

/* The second photo sits over the first, filling the same frame. */
.pd-photo {
    position: relative;
}

.pd-photo-alt {
    position: absolute;
    inset: 0;
    background: #ffffff;
}

/* Under the photo: the thumbnails on the left, the colour note beside them
   - or centred on its own when there is only one photo. */
.pd-media-foot {
    display: flex;
    align-items: center;
    gap: 8px 16px;
    margin-top: 12px;
}

.pd-thumbs {
    display: flex;
    gap: 10px;
    flex: none;
}

.pd-photo-note {
    flex: 1;
    margin: 0;
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--color-text-muted);
    text-align: center;
}

    .pd-thumbs + .pd-photo-note {
        text-align: right;
    }

.pd-thumb {
    width: 72px;
    height: 72px;
    padding: 4px;
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    cursor: pointer;
    overflow: hidden;
}

    .pd-thumb img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
    }

    .pd-thumb.is-active {
        border: 2px solid var(--color-accent);
        padding: 3px;
    }

    .pd-thumb:focus-visible {
        outline: 3px solid #005fcc;
        outline-offset: 2px;
    }

.pd-buy {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

.pd-head {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pd-code {
    margin: 0;
    font-size: 16px;
    color: var(--color-text-muted);
}

.pd-code-value {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--color-text);
    overflow-wrap: anywhere;
}

.pd-title {
    margin: 0;
    font-size: 46px;
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -0.02em;
    overflow-wrap: break-word;
    color: var(--color-accent);
}

.pd-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
}

.pd-price-value {
    font-size: 38px;
    font-weight: 800;
    line-height: 1.1;
}

.pd-price-note {
    font-size: 16px;
    color: var(--color-text-muted);
}

.pd-price .coming-soon-badge {
    margin: 0;
    font-size: 16px;
    padding: 8px 18px;
}

.pd-label {
    font-size: 15px;
    font-weight: 400;
}

    .pd-label strong {
        font-weight: 700;
    }

.pd-colours {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pd-colours .colour-options {
    gap: 14px;
    margin: 0;
}

.pd-colours .colour-swatch {
    width: 40px;
    height: 40px;
}

.pd-colours .colour-swatch.selected {
    box-shadow: 0 0 0 3px #ffffff, 0 0 0 5px var(--color-text);
}

.pd-colour-names {
    margin: 0;
    font-size: 14px;
    color: var(--color-text-muted);
}

.colour-options {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-top: .4rem;
}

/* PRICE TABLE
   One column per quantity band. Scrolls sideways rather than squashing
   if an item ever has more bands than fit. */

.pd-tiers {
    border: 1px solid var(--color-border);
    border-radius: 18px;
    overflow: hidden;
    background: #ffffff;
}

.pd-tiers-head {
    background: var(--color-bg-promo);
    padding: 11px 18px;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 12px;
}

    .pd-tiers-head span {
        color: var(--color-text-muted);
    }

.pd-tiers-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(96px, 1fr);
    overflow-x: auto;
}

.pd-tier {
    font: inherit;
    text-align: left;
    padding: 14px 18px;
    border: 0;
    background: #ffffff;
    color: var(--color-text);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    transition: background .15s ease;
}

    .pd-tier + .pd-tier {
        border-left: 1px solid var(--color-border);
    }

    .pd-tier:hover:not(:disabled) {
        background: #f3f9fd;
    }

    .pd-tier.is-active {
        background: #e6f4fb;
        box-shadow: inset 0 -3px 0 var(--color-accent);
    }

    .pd-tier:focus-visible {
        outline: 3px solid #005fcc;
        outline-offset: -3px;
    }

    /* A band the stock cannot reach. Still legible: it tells the customer
       the price exists, which is what prompts the phone call. */
    .pd-tier:disabled {
        cursor: default;
    }

    .pd-tier.is-out {
        opacity: .45;
    }

.pd-tier-range {
    font-size: 13px;
    color: var(--color-text-muted);
}

.pd-tier-price {
    font-size: 20px;
    font-weight: 800;
}

.pd-tier-save {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-accent);
}

/* QUANTITY, TOTAL, ADD TO CART */

.pd-cart {
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--color-bg-promo);
    border-radius: 22px;
    padding: 20px;
    margin: 0;
}

.pd-cart-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.pd-qty-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .pd-qty-wrap .pd-label {
        font-weight: 700;
    }

.pd-qty {
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid rgba(18, 18, 18, .15);
    border-radius: 999px;
    padding: 3px;
}

.pd-qty-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 0;
    background: var(--color-bg-alt);
    color: var(--color-text);
    font-family: inherit;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease;
}

    .pd-qty-btn:hover:not(:disabled) {
        background: #e6f4fb;
    }

    .pd-qty-btn:disabled {
        opacity: .35;
        cursor: not-allowed;
    }

    .pd-qty-btn:focus-visible {
        outline: 3px solid #005fcc;
        outline-offset: 2px;
    }

.pd-qty-input {
    width: 64px;
    border: 0;
    background: transparent;
    text-align: center;
    font-family: inherit;
    font-size: 17px;
    font-weight: 700;
    color: var(--color-text);
    padding: 0;
    -moz-appearance: textfield;
    appearance: textfield;
}

    .pd-qty-input::-webkit-outer-spin-button,
    .pd-qty-input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    .pd-qty-input:focus-visible {
        outline: 2px solid var(--color-accent);
        border-radius: 8px;
    }

    .pd-qty-input:disabled {
        color: var(--color-text-muted);
    }

.pd-sum {
    text-align: right;
    margin-left: auto;
}

.pd-sum-line {
    font-size: 14px;
    color: var(--color-text-muted);
}

.pd-sum-total {
    font-size: 26px;
    font-weight: 800;
}

.pd-cart-btn {
    font-family: inherit;
    font-size: 17px;
    font-weight: 700;
    color: var(--color-button-label);
    background: var(--color-button);
    border: 0;
    border-radius: 16px;
    padding: 17px 24px;
    min-height: 54px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: background .15s ease;
}

    .pd-cart-btn:hover:not(:disabled) {
        background: #333333;
    }

    .pd-cart-btn:disabled {
        opacity: .45;
        cursor: not-allowed;
    }

    .pd-cart-btn:focus-visible {
        outline: 3px solid #005fcc;
        outline-offset: 3px;
    }

.pd-buy .auth-error {
    margin: 0;
}

.pack-hint {
    background: rgba(1, 149, 216, 0.08);
    border: 1px solid rgba(1, 149, 216, 0.3);
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 14.5px;
    line-height: 1.55;
    margin: 0;
}

    .pack-hint[hidden] {
        display: none;
    }

.pack-hint-link,
a.pack-hint-link {
    font-weight: 700;
    color: var(--color-accent);
    text-decoration: underline;
    white-space: nowrap;
}

    .pack-hint-link:hover {
        opacity: .8;
    }

/* STOCK
   The state is written out in words - "Out of stock", "Low stock" - so
   nothing here depends on telling red from amber. */

.stock-box {
    border-radius: 14px;
    padding: 12px 16px;
    font-size: 15px;
    line-height: 1.55;
    margin: 0;
    color: var(--color-text);
}

    .stock-box.stock-out {
        background: rgba(163, 32, 21, 0.07);
        border: 1px solid rgba(163, 32, 21, 0.28);
    }

    .stock-box.stock-low {
        background: #fff6e5;
        border: 1px solid #f3d9a4;
        color: #5a3d00;
    }

    .stock-box.stock-out strong,
    .stock-box.stock-out a {
        color: #a32015;
    }

    .stock-box.stock-low strong,
    .stock-box.stock-low a {
        color: #8a5300;
    }

    /* A phone number broken across two lines is one nobody can read back. */
    .stock-box a {
        font-weight: 700;
        text-decoration: underline;
        white-space: nowrap;
    }

        .stock-box a:hover {
            opacity: .8;
        }

/* PRICE ON REQUEST: the pack sizes without figures, and a pointer to the
   quote page in place of the quantity box and Add to cart. */

.pd-tier-price.is-por {
    font-size: 16px;
    color: var(--color-accent);
}

.pd-tier-save.is-por {
    color: var(--color-text-muted);
    font-weight: 600;
}

.por-note {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0;
    background: #ffffff;
    border: 1px solid rgba(1, 149, 216, .3);
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 15px;
    line-height: 1.55;
}

    .por-note svg {
        flex: none;
        margin-top: 2px;
        color: var(--color-accent);
    }

    .por-note a {
        font-weight: 700;
        color: var(--color-accent);
        text-decoration: underline;
    }

        .por-note a:hover {
            opacity: .8;
        }

/* COMING SOON: stands in for the quantity box and Add to cart. */

.product-coming-soon {
    border: 1px solid rgba(1, 149, 216, .3);
    background: rgba(1, 149, 216, .06);
    border-radius: 18px;
    padding: 20px 22px;
}

    .product-coming-soon p {
        margin: 0;
        font-size: 16px;
        line-height: 1.65;
        color: var(--color-text-muted);
    }

.coming-soon-badge {
    display: inline-block;
    background: var(--color-accent);
    color: var(--color-accent-text);
    border-radius: 999px;
    padding: 6px 16px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .02em;
    margin-bottom: 14px;
}

/* SPECIFICATIONS AND KEY FEATURES
   <details> so they fold on a phone. On wider screens they are always
   open and the heading is just a heading. */

.pd-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 56px;
    align-items: start;
}

.pd-panel {
    background: var(--color-bg-promo);
    border-radius: 22px;
    padding: 30px;
    min-width: 0;
}

    .pd-panel > summary {
        list-style: none;
        cursor: default;
        pointer-events: none;
    }

        .pd-panel > summary::-webkit-details-marker {
            display: none;
        }

    .pd-panel h2 {
        margin: 0 0 12px;
        font-size: 22px;
        font-weight: 800;
        display: inline;
    }

/* ABOUT THIS PRODUCT: the office's description, across both columns. */

.pd-about {
    grid-column: 1 / -1;
}

    .pd-about h2 {
        display: block;
    }

    .pd-about p {
        margin: 0;
        font-size: 16.5px;
        line-height: 1.7;
    }

.pd-spec-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    margin-top: 12px;
}

    .pd-spec-table tr + tr {
        border-top: 1px solid rgba(18, 18, 18, .1);
    }

    .pd-spec-table th {
        text-align: left;
        font-weight: 500;
        color: var(--color-text-muted);
        padding: 11px 12px 11px 0;
        width: 40%;
        vertical-align: top;
    }

    .pd-spec-table td {
        padding: 11px 0;
        overflow-wrap: anywhere;
    }

.pd-mono {
    font-family: var(--font-mono);
    font-size: 14px;
}

.pd-datasheet {
    margin-top: 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    font-size: 15px;
    font-weight: 700;
    color: var(--color-accent);
    text-decoration: none;
}

    .pd-datasheet:hover {
        text-decoration: underline;
    }

    .pd-datasheet span {
        font-weight: 500;
        color: var(--color-text-muted);
    }

.pd-quote-note {
    margin: 10px 0 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--color-text-muted);
}

    .pd-quote-note a {
        color: var(--color-accent);
        font-weight: 700;
    }

.pd-features ul {
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 16px;
    line-height: 1.5;
}

.pd-features li {
    display: flex;
    gap: 10px;
}

    .pd-features li svg {
        flex: none;
        margin-top: 3px;
        color: var(--color-accent);
    }

/* MORE FROM THE CATEGORY: one row only. */

.pd-more {
    margin-top: 64px;
}

.pd-more-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

    .pd-more-head h2 {
        margin: 0;
        font-size: 30px;
        font-weight: 700;
    }

    .pd-more-head a {
        font-weight: 700;
        color: var(--color-accent);
        text-decoration: none;
    }

        .pd-more-head a:hover {
            text-decoration: underline;
        }

.pd-more-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 22px;
}

.pd-more-card .range-card-body {
    align-items: flex-start;
}

.pd-more-card .range-card-text {
    gap: 4px;
}

/* One row whatever the width: cards past the column count are hidden
   rather than wrapping onto a second row. */
@media (max-width: 1279px) {
    .pd-more-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 20px;
    }

        .pd-more-grid > :nth-child(n + 5) {
            display: none;
        }
}

@media (max-width: 999px) {
    .pd {
        gap: 36px;
    }

    .pd-title {
        font-size: 38px;
    }

    .pd-more-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
    }

        .pd-more-grid > :nth-child(n + 4) {
            display: none;
        }
}

/* PHONES AND SMALL TABLETS */
@media (max-width: 799px) {
    .pd-page {
        padding-top: 12px;
    }

    .pd {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /*  Not quite edge to edge, so the name and price start higher up. */
    .pd-media {
        position: static;
        width: 85%;
        margin-inline: auto;
    }

    .pd-photo {
        border-radius: 22px;
    }

    .pd-buy {
        gap: 20px;
    }

    .pd-title {
        font-size: 32px;
        line-height: 1.08;
    }

    .pd-price-value {
        font-size: 30px;
    }

    .pd-price-note {
        font-size: 14px;
    }

    .pd-tiers {
        border-radius: 16px;
    }

    .pd-tiers-head {
        padding: 10px 14px;
    }

    .pd-tier {
        padding: 12px 12px;
    }

    .pd-tier-range {
        font-size: 12px;
    }

    .pd-tier-price {
        font-size: 17px;
    }

    .pd-tier-save {
        font-size: 11px;
    }

    /* Pinned to the bottom of the screen while there is something to buy. */
    .pd-cart.is-buyable {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 50;
        background: #ffffff;
        border-radius: 0;
        border-top: 1px solid var(--color-border);
        box-shadow: 0 -10px 30px rgba(18, 18, 18, .08);
        padding: 10px 16px calc(14px + env(safe-area-inset-bottom, 0px));
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "sum sum"
            "hint hint"
            "qty btn";
        gap: 8px 10px;
        align-items: center;
    }

        .pd-cart.is-buyable .pd-cart-row {
            display: contents;
        }

        .pd-cart.is-buyable .pd-sum {
            grid-area: sum;
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            gap: 12px;
            text-align: left;
            margin: 0;
        }

        .pd-cart.is-buyable .pd-sum-total {
            font-size: 17px;
        }

        .pd-cart.is-buyable .pd-qty-wrap {
            grid-area: qty;
        }

            .pd-cart.is-buyable .pd-qty-wrap .pd-label {
                position: absolute;
                width: 1px;
                height: 1px;
                overflow: hidden;
                clip: rect(0 0 0 0);
                white-space: nowrap;
            }

        .pd-cart.is-buyable .pack-hint {
            grid-area: hint;
            font-size: 13px;
            padding: 8px 12px;
        }

        .pd-cart.is-buyable .pd-cart-btn {
            grid-area: btn;
            min-height: 50px;
            padding: 12px 16px;
            font-size: 16px;
        }

    .pd-qty-btn {
        width: 44px;
        height: 44px;
    }

    .pd-qty-input {
        width: 48px;
        font-size: 16px;
    }

    .pd-details {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-top: 24px;
    }

    .pd-panel {
        border-radius: 18px;
        padding: 16px 18px;
    }

        .pd-panel > summary {
            pointer-events: auto;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            min-height: 32px;
        }

            .pd-panel > summary::after {
                content: "";
                width: 10px;
                height: 10px;
                border-right: 2px solid currentColor;
                border-bottom: 2px solid currentColor;
                transform: rotate(45deg);
                margin: -4px 4px 0 12px;
                transition: transform .2s ease;
            }

        .pd-panel[open] > summary::after {
            transform: rotate(-135deg);
            margin-top: 4px;
        }

        .pd-panel h2 {
            font-size: 17px;
            margin: 0;
        }

    .pd-spec-table {
        font-size: 14px;
        margin-top: 8px;
    }

        .pd-spec-table th {
            width: 42%;
            padding: 9px 10px 9px 0;
        }

        .pd-spec-table td {
            padding: 9px 0;
        }

    .pd-features ul {
        margin-top: 12px;
        font-size: 15px;
    }

    .pd-more {
        margin-top: 32px;
    }

    .pd-more-head {
        align-items: baseline;
        margin-bottom: 12px;
    }

        .pd-more-head h2 {
            font-size: 22px;
        }

        .pd-more-head a {
            font-size: 14px;
        }

    .pd-more-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

        .pd-more-grid > :nth-child(n + 3) {
            display: none;
        }

    /* Room under the footer so the pinned box never covers its last line. */
    body:has(.pd-cart.is-buyable) {
        padding-bottom: 150px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pd-tier,
    .pd-qty-btn,
    .pd-cart-btn,
    .pd-panel > summary::after {
        transition: none;
    }
}

/* Shared with the cart and quote pages. */

.qty-btn:disabled {
    opacity: .3;
    cursor: not-allowed;
}

    .qty-btn:disabled:hover {
        background: none;
    }

.qty-btn {
    width: 34px;
    height: 38px;
    border: none;
    background: #fff;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    color: var(--color-text, #16181d);
    font-family: inherit;
}

    .qty-btn:hover {
        background: rgba(1, 149, 216, .09);
        color: var(--color-accent, #0195d8);
    }

.qty-input {
    color: var(--color-text);
    background: #fff;
    width: 50px;
    height: 38px;
    border: none !important;
    border-left: 1px solid var(--color-border, #dfe2e8) !important;
    border-right: 1px solid var(--color-border, #dfe2e8) !important;
    text-align: center;
    font-size: 14.5px;
    font-weight: 700;
    font-family: inherit;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    -moz-appearance: textfield;
}

    .qty-input::-webkit-outer-spin-button, .qty-input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

.qty-input:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
}

.btn-cart {
    width: 100%;
    background: var(--color-button);
    color: var(--color-button-label);
    border: none;
    border-radius: 6px;
    padding: 22px 0;
    font-family: var(--font-body);
    font-size: 19px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .15s ease;
}

    .btn-cart:hover {
        opacity: .88;
    }

.btn-cart:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.colour-swatch {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .25);
    background: #ccc;
    display: inline-block;
    box-sizing: border-box;
}

a.colour-swatch {
    position: relative;
    text-decoration: none;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
}

    a.colour-swatch::after {
        content: "";
        position: absolute;
        inset: -6px;
    }

    a.colour-swatch:hover {
        transform: scale(1.08);
    }

.colour-swatch.selected {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px currentColor;
}

a.colour-swatch:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 3px;
}

.colour-swatch.pale {
    border-color: rgba(0, 0, 0, .45);
}

.colour-swatch.translucent {
    background: linear-gradient(135deg, #f7fafc 0%, #dfe6ec 45%, #f7fafc 100%);
    border-color: rgba(0, 0, 0, .35);
}



/* ====================================================================
   06. CART
   ==================================================================== */

.cart-gst-note {
    font-size: 13.5px;
    color: var(--color-text-muted);
    text-align: right;
    margin: 6px 0 0;
}

.cart-page {
    padding-top: 40px;
}

.cart-title {
    font-size: 46px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 32px;
}


.cart-alert {
    background: var(--color-bg-alt);
    border-radius: var(--radius-card);
    padding: 14px 18px;
    margin: 0 0 24px;
    font-size: 15px;
}

.cart-alert-error {
    background: rgba(200, 30, 30, .08);
    border: 1px solid rgba(200, 30, 30, .3);
}


.cart-empty {
    padding: 60px 0 80px;
    text-align: center;
    color: var(--color-text-muted);
}

    .cart-empty p {
        font-size: 19px;
        margin: 0 0 24px;
    }


.cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 48px;
    align-items: start;
}


.cart-line {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr) auto auto;
    gap: 24px;
    align-items: center;
    padding: 24px 0;
    border-bottom: 1px solid var(--color-border);
}

    .cart-line:first-child {
        border-top: 1px solid var(--color-border);
    }

.cart-line-thumb {
    display: block;
    width: 110px;
    aspect-ratio: 1 / 1;
    border: 1px solid var(--color-border);
    background: #fff;
    overflow: hidden;
}

    .cart-line-thumb img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
    }

.cart-line-main {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.cart-line-sku {
    color: var(--color-accent);
    font-weight: 700;
    font-size: 14px;
}

.cart-line-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-accent);
    text-decoration: none;
}

    .cart-line-name:hover {
        text-decoration: underline;
    }

.cart-line-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 2px 0;
}

.cart-meta-item {
    background: var(--color-bg-alt);
    border-radius: 20px;
    padding: 3px 11px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
}

.cart-meta-pack {
    font-weight: 600;
    color: var(--color-text);
}

.cart-line-unit {
    color: var(--color-text-muted);
    font-size: 15px;
}

.cart-remove-form {
    margin-top: 4px;
}

.cart-remove {
    background: none;
    border: none;
    padding: 0;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    color: #c81e1e;
    text-decoration: underline;
    cursor: pointer;
}

    .cart-remove:hover {
        color: #9c1616;
    }


.cart-line-qty-cell {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 260px;
}

.cart-stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    overflow: hidden;
    width: max-content;
}

.cart-qty-btn {
    background: none;
    border: none;
    width: 40px;
    height: 46px;
    font-size: 19px;
    font-family: var(--font-body);
    color: var(--color-text);
    cursor: pointer;
}

    .cart-qty-btn:hover:not(:disabled) {
        background: var(--color-bg-alt);
    }

    .cart-qty-btn:disabled {
        opacity: .3;
        cursor: not-allowed;
    }

.cart-qty-input {
    width: 62px;
    height: 46px;
    border: none;
    border-left: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    text-align: center;
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--color-text);
    background: #fff;
    -moz-appearance: textfield;
}

    .cart-qty-input::-webkit-outer-spin-button, .cart-qty-input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }


.cart-line-qty.saving .cart-stepper {
    opacity: .55;
}


.pack-dialog {
    border: none;
    border-radius: 6px;
    padding: 0;
    max-width: 440px;
    width: calc(100% - 40px);
    box-shadow: 0 12px 40px rgba(18, 18, 18, .22);
    color: var(--color-text);
}

    .pack-dialog::backdrop {
        background: rgba(18, 18, 18, .45);
    }

    .pack-dialog form {
        padding: 28px 30px 24px;
    }

.pack-dialog-title {
    font-size: 21px;
    font-weight: 700;
    margin: 0 0 12px;
}

.pack-dialog-text {
    font-size: 16px;
    line-height: 1.6;
    margin: 0 0 26px;
    color: var(--color-text);
}

.pack-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.pack-dialog-cancel, .pack-dialog-ok {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 600;
    border-radius: var(--radius-card);
    padding: 12px 26px;
    cursor: pointer;
}

.pack-dialog-cancel {
    background: none;
    border: 1px solid var(--color-border);
    color: var(--color-text);
}

    .pack-dialog-cancel:hover {
        border-color: var(--color-text);
    }

.pack-dialog-ok {
    background: var(--color-button);
    border: 1px solid var(--color-button);
    color: var(--color-button-label);
}

    .pack-dialog-ok:hover {
        opacity: .88;
    }


.cart-update {
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    height: 40px;
    padding: 0 14px;
    font-family: var(--font-body);
    font-size: 15px;
    cursor: pointer;
}

.cart-line-total {
    font-size: 19px;
    font-weight: 700;
    min-width: 100px;
    text-align: right;
}


.cart-summary {
    background: var(--color-bg-alt);
    border-radius: var(--radius-card);
    padding: 30px 28px;
    position: sticky;
    top: calc(var(--site-top-h, 0px) + 24px);
}

    .cart-summary h2 {
        font-size: 21px;
        font-weight: 700;
        margin: 0 0 22px;
    }

.cart-summary-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    font-size: 16px;
}

    .cart-summary-row .muted {
        color: var(--color-text-muted);
        font-size: 15px;
    }

.cart-summary-total {
    border-top: 1px solid var(--color-border);
    margin-top: 10px;
    padding-top: 18px;
    font-size: 21px;
    font-weight: 800;
}

.cart-note {
    font-size: 14px;
    color: var(--color-text-muted);
    margin: 14px 0 0;
}

.cart-summary .btn-cart {
    margin-top: 24px;
    display: block;
    text-align: center;
    text-decoration: none;
    padding: 18px 0;
    font-size: 17px;
}

.cart-continue {
    display: block;
    text-align: center;
    margin-top: 16px;
    color: var(--color-text-muted);
    font-size: 15px;
}


/* ====================================================================
   07. CHECKOUT
   ==================================================================== */

.checkout-page, .confirmation-page {
    padding-top: 36px;
}

.checkout-head {
    margin-bottom: 30px;
}

.checkout-title {
    font-size: 42px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 14px 0 0;
}

.checkout-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 370px;
    gap: 40px;
    align-items: start;
}

.checkout-main {
    display: flex;
    flex-direction: column;
    gap: 20px;
}


.checkout-card {
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 26px 28px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.checkout-card-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

    .checkout-card-head h2 {
        font-size: 20px;
        font-weight: 700;
        margin: 0 0 4px;
    }


.step-badge {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--color-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    margin-top: 2px;
}

.checkout-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.checkout-grid-3 {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
}

.checkout-hint {
    font-size: 14px;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin: 0;
}

.checkout-guest-note {
    padding: 12px 15px;
    background: var(--color-bg-alt);
    border-radius: var(--radius-card);
}

.field-hint {
    font-size: 12.5px;
    color: var(--color-text-muted);
}

.req {
    color: #c81e1e;
    font-weight: 700;
}

.locked-field {
    position: relative;
    display: flex;
    align-items: center;
}

    .locked-field .account-input {
        background: var(--color-bg-alt);
        color: var(--color-text-muted);
        padding-right: 42px;
        cursor: default;
    }

        .locked-field .account-input:focus {
            outline: none;
        }

.locked-icon {
    position: absolute;
    right: 14px;
    color: var(--color-text-muted);
    pointer-events: none;
}


.shipping-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.shipping-option {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}

    .shipping-option:hover {
        border-color: var(--color-text);
    }

    .shipping-option:has(input:checked) {
        border-color: var(--color-accent);
        background: rgba(1, 149, 216, .05);
    }

    .shipping-option input {
        accent-color: var(--color-accent);
        width: 18px;
        height: 18px;
        flex: none;
    }

.shipping-option-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .shipping-option-text small {
        color: var(--color-text-muted);
        font-size: 13px;
    }

.shipping-option-price {
    font-weight: 700;
    font-size: 17px;
    white-space: nowrap;
}


.checkout-summary {
    background: var(--color-bg-alt);
    border-radius: 6px;
    padding: 26px 24px;
    position: sticky;
    top: calc(var(--site-top-h, 0px) + 24px);
}

    .checkout-summary h2 {
        font-size: 20px;
        font-weight: 700;
        margin: 0 0 18px;
    }

.checkout-lines {
    list-style: none;
    margin: 0 0 18px;
    padding: 0 0 16px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

    .checkout-lines li {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 15px;
    }


.checkout-line-thumb {
    position: relative;
    flex: none;
    width: 52px;
    height: 52px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: #fff;
    overflow: visible;
}

    .checkout-line-thumb img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
    }

.checkout-line-badge {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: var(--color-text);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

.checkout-line-name {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.35;
}

.checkout-line-qty {
    color: var(--color-text-muted);
    font-size: 12.5px;
}

.checkout-line-total {
    white-space: nowrap;
    font-weight: 700;
}

.checkout-summary .btn-cart {
    margin-top: 22px;
}

.checkout-trust {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    font-size: 12.5px;
    color: var(--color-text-muted);
}

.checkout-note {
    font-size: 12.5px;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin: 12px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
}


.checkout-peek {
    display: none;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-bg-alt);
    overflow: hidden;
}

    .checkout-peek > summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 15px 16px;
        cursor: pointer;
        list-style: none;
        font-size: 15px;
    }


        .checkout-peek > summary::-webkit-details-marker {
            display: none;
        }

.checkout-peek-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--color-accent);
}

    .checkout-peek-label::after {
        content: "";
        width: 7px;
        height: 7px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg) translate(-2px, -2px);
        transition: transform .15s ease;
    }

.checkout-peek[open] .checkout-peek-label::after {
    transform: rotate(-135deg) translate(-3px, -3px);
}

.checkout-peek-label small {
    font-weight: 500;
    color: var(--color-text-muted);
}

.checkout-peek-total {
    font-weight: 800;
    font-size: 17px;
}

.checkout-peek-lines {
    margin: 0;
    padding: 0 16px 16px;
    border-bottom: none;
    border-top: 1px solid var(--color-border);
    padding-top: 16px;
}


.confirmation-head {
    text-align: center;
    padding: 20px 0 44px;
}

.confirmation-tick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: rgba(24, 140, 60, .10);
    color: #14743a;
    font-size: 26px;
    margin-bottom: 18px;
}

.confirmation-head h1 {
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 8px;
}

.confirmation-number {
    font-size: 19px;
    font-weight: 700;
    color: var(--color-accent);
    margin: 0 0 10px;
}

.confirmation-sub {
    color: var(--color-text-muted);
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.6;
}

.confirmation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
    align-items: start;
}

.confirmation-address {
    font-style: normal;
    line-height: 1.7;
    margin: 18px 0 0;
}

.confirmation-note {
    font-size: 14px;
    color: var(--color-text-muted);
    margin: 14px 0 0;
    line-height: 1.6;
}

.confirmation-subhead {
    margin-top: 28px !important;
}

.confirmation-keep {
    text-align: center;
    color: var(--color-text-muted);
    font-size: 15px;
    margin: 40px 0 0;
}

.shipping-unquotable p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
}

    .shipping-unquotable p + p {
        margin-top: 8px;
    }

.thanks {
    display: flex;
    justify-content: center;
    padding: 70px 20px 90px;
}

.thanks-inner {
    max-width: 560px;
    text-align: center;
}

.thanks-icon {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

    .thanks-icon svg {
        width: 32px;
        height: 32px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.thanks-icon-ok {
    background: rgba(24, 140, 60, .12);
    color: #14743a;
}

.thanks-icon-wait {
    background: rgba(1, 149, 216, .12);
    color: #0176a9;
}


.thanks-icon-alert {
    background: rgba(200, 140, 20, .14);
    color: #8a5a00;
}

.thanks h1 {
    font-size: 30px;
    font-weight: 800;
    margin: 0 0 16px;
    letter-spacing: -0.02em;
}

.thanks-lead {
    font-size: 17px;
    line-height: 1.7;
    margin: 0 0 16px;
}

.thanks p {
    font-size: 15.5px;
    line-height: 1.75;
    margin: 0 0 16px;
    color: var(--color-text);
}

.thanks-slow {
    background: rgba(1, 149, 216, .07);
    border: 1px solid rgba(1, 149, 216, .2);
    border-radius: var(--radius-card);
    padding: 16px 20px;
    font-size: 14.5px !important;
    text-align: left;
}


.thanks-reference {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    background: #f6f6f6;
    border-radius: var(--radius-card);
    padding: 16px 28px;
    margin: 8px 0 22px;
}

    .thanks-reference span {
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--color-text-muted, #6a7280);
        font-weight: 700;
    }

    .thanks-reference strong {
        font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
        font-size: 19px;
        letter-spacing: .06em;
        user-select: all;
    }

.thanks-contact {
    font-size: 14px !important;
    color: var(--color-text-muted, #6a7280) !important;
}


.shipping-option-price.is-free {
    color: #2f855a;
    font-weight: 700;
    letter-spacing: .02em;
    display: inline-flex;
    align-items: baseline;
    gap: .45rem;
}



.free-shipping-note {
    margin: .75rem 0 0;
    padding: .6rem .8rem;
    border-radius: 6px;
    background: #f0f5fa;
    border: 1px solid #d6e2ee;
    color: #2c5282;
    font-size: .9rem;
}


    .free-shipping-note.earned {
        background: #f0faf4;
        border-color: #c6ebd6;
        color: #276749;
        font-weight: 600;
    }

.shipping-unquotable {
    background: rgba(200, 30, 30, .06);
    border: 1px solid rgba(200, 30, 30, .25);
    border-radius: var(--radius-card);
    padding: 16px 18px;
    border-left: 4px solid #d69e2e;
}


/* ====================================================================
   08. ACCOUNT & IDENTITY
   ==================================================================== */


.auth-page {
    padding: 56px 0 80px;
}

.auth-page-inner {
    text-align: center;
    max-width: 620px;
}

.auth-page h1 {
    font-size: 40px;
    font-weight: 800;
    margin: 0 0 16px;
}

.auth-page-subtitle {
    color: var(--color-text-muted);
    font-size: 17px;
    line-height: 1.6;
    margin: 0 0 32px;
}

.auth-page-card {
    background: var(--color-bg-alt);
    border-radius: 8px;
    padding: 40px;
    text-align: left;
}

.auth-page-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

    .auth-page-form input[type="email"], .auth-page-form input[type="password"], .auth-page-form input[type="text"] {
        border: 1px solid var(--color-border);
        border-radius: 0;
        padding: 14px 16px;
        font-size: 15px;
        font-family: var(--font-body);
        background: #fff;
        color: var(--color-text);
        width: 100%;
    }

    .auth-page-form input:focus {
        outline: 2px solid var(--color-accent);
        outline-offset: 1px;
    }

.forgot-link {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-accent);
    text-decoration: underline;
    margin-top: -6px;
}

.auth-page-switch {
    text-align: center;
    font-size: 15px;
    color: var(--color-text-muted);
    margin: 8px 0 0;
}

    .auth-page-switch a {
        color: var(--color-accent);
        font-weight: 700;
        text-decoration: underline;
        margin-left: 4px;
    }

.auth-success {
    background: rgba(1,149,216,0.08);
    border: 1px solid rgba(1,149,216,0.3);
    color: var(--color-accent);
    font-size: 14px;
    padding: 12px 14px;
    border-radius: 4px;
    line-height: 1.5;
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}


.auth-page-form .auth-input {
    border: 1px solid var(--color-border);
    border-radius: 0;
    padding: 14px 16px;
    font-size: 15px;
    font-family: var(--font-body);
    background: #fff;
    color: var(--color-text);
    width: 100%;
}

    .auth-page-form .auth-input:focus {
        outline: 2px solid var(--color-accent);
        outline-offset: 1px;
    }


.auth-error {
    color: #c81e1e;
    font-size: 14px;
    line-height: 1.5;
}

    .auth-error:empty, .auth-error.validation-summary-valid {
        display: none;
    }

    .auth-error ul {
        margin: 0;
        padding-left: 18px;
    }


.auth-error-text {
    color: #c81e1e;
    font-size: 13px;
    line-height: 1.4;
}

    .auth-error-text:empty {
        display: none;
    }


.auth-remember {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 15px;
    color: var(--color-text-muted);
    cursor: pointer;
    margin-top: -4px;
}

.auth-checkbox {
    width: 17px;
    height: 17px;
    accent-color: var(--color-accent);
    cursor: pointer;
}

.auth-hint {
    font-size: 13px;
    color: var(--color-text-muted);
    line-height: 1.5;
    margin: 4px 0 0;
}

.business-fields {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

    .business-fields[hidden] {
        display: none;
    }

.account-page {
    padding-top: 40px;
}

.account-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 56px;
    align-items: start;
}


.account-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: sticky;
    top: calc(var(--site-top-h, 0px) + 24px);
}

.account-nav-heading {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin: 24px 0 8px;
    padding: 0 14px;
}

.account-nav-link {
    display: block;
    padding: 11px 14px;
    border-radius: var(--radius-card);
    color: var(--color-text);
    text-decoration: none;
    font-size: 15px;
    border-left: 3px solid transparent;
}

    .account-nav-link:hover {
        background: var(--color-bg-alt);
    }

    .account-nav-link.active {
        background: #e6f4fb;
        border-left-color: var(--color-accent);
        color: #0172a8;
        font-weight: 700;
    }


.account-content {
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.account-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: 30px 32px;
    background: #fff;
}

    .account-card h2 {
        font-size: 22px;
        font-weight: 700;
        margin: 0 0 6px;
    }

.account-card-note {
    color: var(--color-text-muted);
    font-size: 15px;
    margin: 0 0 24px;
}


.account-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 22px;
    max-width: 460px;
}

.account-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.account-label {
    font-size: 14px;
    font-weight: 700;
}

.account-input {
    border: 1px solid var(--color-border);
    border-radius: 0;
    padding: 13px 15px;
    font-size: 15px;
    font-family: var(--font-body);
    background: #fff;
    color: var(--color-text);
    width: 100%;
}

    .account-input:focus {
        outline: 2px solid var(--color-accent);
        outline-offset: 1px;
    }

.account-submit {
    width: auto;
    min-width: 180px;
    align-self: flex-start;
    padding: 14px 32px;
}


.account-readonly {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 22px 32px;
    margin: 0;
}

    .account-readonly dt {
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--color-text-muted);
        margin-bottom: 5px;
    }

    .account-readonly dd {
        margin: 0;
        font-size: 16px;
    }

/*  The awaiting-payment list on the 30-day account page. Its own class
    because the order number is a heading everywhere else in this list -
    12px, uppercase, muted - and here it is the thing you click.  */
.invoice-list dt {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-accent);
    margin-bottom: 6px;
}

.invoice-order-link {
    color: var(--color-accent);
    text-decoration: none;
}

    .invoice-order-link:hover,
    .invoice-order-link:focus-visible {
        text-decoration: underline;
    }


.account-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
}

.account-badge-approved {
    background: rgba(24, 140, 60, .10);
    color: #14743a;
}

.account-badge-pending {
    background: rgba(1, 149, 216, .10);
    color: var(--color-accent);
}

.account-link-action {
    display: inline-block;
    margin-top: 24px;
    color: var(--color-accent);
    font-weight: 700;
    text-decoration: underline;
}


.account-content .alert {
    border-radius: var(--radius-card);
    padding: 14px 18px;
    font-size: 15px;
    margin: 0;
}

.account-content .alert-success {
    background: rgba(24, 140, 60, .08);
    border: 1px solid rgba(24, 140, 60, .3);
    color: #14743a;
}

.account-content .alert-danger {
    background: rgba(200, 30, 30, .08);
    border: 1px solid rgba(200, 30, 30, .3);
    color: #c81e1e;
}

.account-inline-link {
    margin-left: 10px;
    font-size: 14px;
    color: var(--color-accent);
    text-decoration: underline;
}

.account-current-email {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 18px;
    background: var(--color-bg-alt);
    border-radius: var(--radius-card);
    margin-bottom: 6px;
}

.account-current-email-value {
    font-size: 17px;
    font-weight: 700;
    word-break: break-all;
}

.account-hint {
    font-size: 14px;
    color: var(--color-text-muted);
    line-height: 1.55;
    margin: -6px 0 0;
}

.account-secondary-btn {
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: 11px 20px;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--color-text);
    cursor: pointer;
    align-self: flex-start;
}

    .account-secondary-btn:hover {
        border-color: var(--color-text);
    }

.password-form {
    max-width: 480px;
}


.password-field {
    position: relative;
    display: flex;
    align-items: center;
}

    .password-field .account-input {
        padding-right: 72px;
    }

.password-toggle {
    position: absolute;
    right: 8px;
    background: none;
    border: none;
    padding: 6px 8px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    color: var(--color-accent);
    cursor: pointer;
    text-decoration: underline;
}

    .password-toggle:hover {
        opacity: .8;
    }


.password-rules {
    list-style: none;
    margin: 10px 0 0;
    padding: 14px 16px;
    background: var(--color-bg-alt);
    border-radius: var(--radius-card);
    display: grid;
    gap: 7px;
    font-size: 14px;
    color: var(--color-text-muted);
}

    .password-rules li {
        display: flex;
        align-items: center;
        gap: 10px;
    }

.rule-mark {
    flex: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid rgba(18, 18, 18, .25);
    position: relative;
}

.password-rules li.met {
    color: #14743a;
}

    .password-rules li.met .rule-mark {
        background: #14743a;
        border-color: #14743a;
    }

        .password-rules li.met .rule-mark::after {
            content: "";
            position: absolute;
            left: 5px;
            top: 2px;
            width: 4px;
            height: 8px;
            border: solid #fff;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }


.password-match {
    font-size: 14px;
    margin: 8px 0 0;
    color: #c81e1e;
}

    .password-match.ok {
        color: #14743a;
    }

    .password-match[hidden] {
        display: none;
    }

.close-account-contact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin: 26px 0 8px;
}

.close-account-method {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 20px 22px;
    background: var(--color-bg-alt);
    border-radius: var(--radius-card);
}

.close-account-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.close-account-method a {
    font-size: 17px;
    font-weight: 700;
    color: var(--color-accent);
    text-decoration: none;
    word-break: break-all;
}

    .close-account-method a:hover {
        text-decoration: underline;
    }

.close-account-hours {
    font-size: 13px;
    color: var(--color-text-muted);
}

.close-account-subhead {
    font-size: 17px;
    font-weight: 700;
    margin: 30px 0 12px;
}

.close-account-steps {
    margin: 0;
    padding-left: 20px;
    font-size: 15px;
    line-height: 1.7;
}

    .close-account-steps li {
        margin-bottom: 6px;
    }


.account-hero {
    max-width: var(--page-width);
    margin: 0 auto;
    padding: 28px 32px 0;
}



.account-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 18px;
}

.stat-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 24px 26px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, transform .15s ease;
}

.tint-skyblue {
    border-color: #0195D8;
}

.stat-card:not(.stat-card-static):hover {
    border-color: var(--color-accent);
    transform: translateY(-2px);
}

.stat-value {
    font-size: 34px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--color-accent);
}

.stat-value-small {
    font-size: 24px;
}

.stat-label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}


.account-field-narrow {
    max-width: 280px;
}

.order-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 20px;
}

.order-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 20px 0;
    border-top: 1px solid var(--color-border);
}

    .order-row:last-child {
        border-bottom: 1px solid var(--color-border);
    }

.order-row-main {
    flex: 1;
    min-width: 0;
}

.order-row-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 8px;
}

.order-number {
    font-size: 17px;
    font-weight: 700;
    color: var(--color-accent);
    text-decoration: none;
}

    .order-number:hover {
        text-decoration: underline;
    }

.order-date {
    font-size: 13px;
    color: var(--color-text-muted);
}

.order-items {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
    font-size: 14px;
    line-height: 1.7;
}

.order-item-meta {
    color: var(--color-text-muted);
}

.order-item-more {
    color: var(--color-text-muted);
    font-style: italic;
}

.order-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.account-badge-neutral {
    background: var(--color-bg-alt);
    color: var(--color-text-muted);
}

.order-row-side {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

.order-total {
    font-size: 19px;
    font-weight: 800;
    white-space: nowrap;
}

.order-invoice-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border: 1px solid #121212;
    border-radius: var(--radius-card);
    background: #f6f6f6;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}

    .order-invoice-btn:hover {
        background: #121212;
        color: #ffffff;
    }

    .order-invoice-btn:focus-visible {
        outline: 3px solid #005fcc;
        outline-offset: 2px;
    }

/*  A grey strip across the top of an account card, edge to edge, holding
    the heading and its note (Order history). Pulls out by the card's own
    padding so it meets the card's border.  */
.account-card-head {
    background: #f6f6f6;
    margin: -30px -32px 24px;
    padding: 26px 32px 22px;
    border-bottom: 1px solid var(--color-border);
}

    .account-card-head .account-card-note {
        margin: 0;
    }

    /*  The strip already draws the line above the first order.  */
    .account-card-head + .order-list {
        margin-top: -24px;
    }

        .account-card-head + .order-list > .order-row:first-child {
            border-top: 0;
        }

    /*  With no orders yet the strip is the whole card.  */
    .account-card-head:last-child {
        margin-bottom: -30px;
        border-bottom: 0;
    }


.order-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
}

    .order-detail-head h2 {
        margin: 0;
    }

.order-table {
    width: 100%;
    border-collapse: collapse;
    margin: 22px 0 20px;
    font-size: 15px;
}

    .order-table th {
        text-align: left;
        font-size: 11px;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--color-text-muted);
        padding-bottom: 10px;
        border-bottom: 1px solid var(--color-text);
    }

    .order-table td {
        padding: 13px 0;
        border-bottom: 1px solid var(--color-border);
        vertical-align: top;
    }

    .order-table .num {
        text-align: right;
        white-space: nowrap;
        padding-left: 16px;
    }

.order-table-name {
    display: block;
    font-weight: 600;
    line-height: 1.35;
}

.order-table-meta {
    display: block;
    font-size: 12.5px;
    color: var(--color-text-muted);
    margin-top: 2px;
}


/*  PRODUCT NAMES AS LINKS
    A faint underline at rest rather than accent colour: in a list where every
    row carries one, colouring them all turns the page blue and nothing stands
    out. The underline is enough to say "clickable" and the colour arrives on
    hover.

    inline-block, not the block that .order-table-name is otherwise, so the
    clickable area is the width of the words rather than the whole cell.  */

a.order-table-name,
.order-item-link {
    display: inline-block;
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(18, 18, 18, .25);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color .15s ease, text-decoration-color .15s ease;
}

    a.order-table-name:hover,
    .order-item-link:hover {
        color: var(--color-accent);
        text-decoration-color: currentColor;
    }

    a.order-table-name:focus-visible,
    .order-item-link:focus-visible {
        outline: 2px solid var(--color-accent);
        outline-offset: 2px;
        border-radius: 3px;
        text-decoration-color: transparent;
    }

@media (prefers-reduced-motion: reduce) {
    a.order-table-name,
    .order-item-link {
        transition: none;
    }
}

.order-totals {
    max-width: 340px;
    margin-left: auto;
}

.address-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

    .address-head h2 {
        margin: 0;
    }

.address-add-btn {
    flex: none;
    width: auto;
    padding: 12px 24px;
    font-size: 15px;
    text-decoration: none;
    text-align: center;
    /*  Flex so the + sits on the text's baseline row rather than wrapping.
        justify-content matters at the narrow width below, where this button
        goes full width and text-align no longer centres flex children.  */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

    .address-add-btn .btn-icon {
        width: 16px;
        height: 16px;
        flex: none;
    }

.address-empty {
    padding: 44px 0 20px;
    text-align: center;
    color: var(--color-text-muted);
}

    .address-empty p {
        margin: 0 0 20px;
        font-size: 17px;
    }

    .address-empty .btn-pill {
        width: auto;
        display: inline-block;
        padding: 13px 28px;
        text-decoration: none;
    }

.address-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
    margin-top: 24px;
}

.address-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}


    .address-card.is-default {
        border-color: black;
        background: #f6f6f6;
    } 

.address-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.address-label {
    font-size: 17px;
    font-weight: 700;
}

.address-body {
    font-style: normal;
    font-size: 14.5px;
    line-height: 1.7;
    margin: 0;
    color: var(--color-text);
}

.address-phone {
    color: var(--color-text-muted);
}

.address-instructions {
    font-size: 13px;
    color: var(--color-text-muted);
    background: var(--color-bg-alt);
    border-radius: var(--radius-card);
    padding: 9px 12px;
    margin: 0;
    line-height: 1.5;
}

.address-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-top: auto;
    padding-top: 6px;
    font-size: 14px;
}

    .address-actions a {
        color: var(--color-accent);
        font-weight: 600;
        text-decoration: underline;
    }

    .address-actions form {
        display: inline;
    }

.address-link-btn {
    background: none;
    border: none;
    padding: 0;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-accent);
    text-decoration: underline;
    cursor: pointer;
}

    .address-link-btn.danger {
        color: #c81e1e;
    }

    .address-link-btn:hover {
        opacity: .8;
    }


.address-form {
    max-width: 640px;
}

.address-form-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

    .address-form-actions .account-submit {
        width: auto;
    }

    .address-form-actions .account-secondary-btn {
        text-decoration: none;
        display: inline-flex;
        align-items: center;
    }

.saved-addresses {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.saved-address {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 14px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}

    .saved-address:hover {
        border-color: var(--color-text);
    }

    .saved-address.selected {
        border-color: var(--color-accent);
        background: rgba(1, 149, 216, .05);
    }

    .saved-address input {
        accent-color: var(--color-accent);
        width: 17px;
        height: 17px;
        flex: none;
        margin-top: 2px;
    }

.saved-address-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.saved-address-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 15px;
}

.saved-address-default {
    background: rgba(24, 140, 60, .10);
    color: #14743a;
    border-radius: 20px;
    padding: 2px 9px;
    font-size: 11px;
    font-weight: 700;
}

.saved-address-lines {
    font-size: 13.5px;
    color: var(--color-text-muted);
    line-height: 1.5;
}

.saved-address-new .saved-address-label {
    color: var(--color-accent);
}


.address-fields {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

    .address-fields[hidden] {
        display: none;
    }


.save-address-block {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 4px;
}

    .save-address-block[hidden] {
        display: none;
    }

#save-address-label[hidden] {
    display: none;
}

.auth-page-art {
    display: block;
    width: clamp(9rem, 38vw, 14rem);
    height: auto;
    margin: 0 auto;
}

/*  REORDER
    The button beside , and the dialog it opens. The quantity
    stepper deliberately reuses .cart-stepper / .cart-qty-btn / .cart-qty-input
    so it is the same control the customer already knows from the cart, not a
    second one that looks nearly the same.  */

.order-head-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.order-reorder-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-card);
    background: var(--color-accent);
    color: var(--color-accent-text);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity .15s ease;
}

    .order-reorder-btn:hover {
        opacity: .88;
    }

    .order-reorder-btn:focus-visible {
        outline: 2px solid var(--color-accent);
        outline-offset: 3px;
    }

    .order-reorder-btn[hidden] {
        display: none;
    }


/*  Fallback for a browser with no showModal() - Safari before 15.4. The
    element is shown by setting its open attribute, which renders it in the
    normal flow, so these rules put it back in the middle of the screen with
    something standing in for the backdrop it will not get.  */
.reorder-dialog.is-fallback {
    display: block;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    box-shadow: 0 18px 50px rgba(18, 18, 18, .3), 0 0 0 100vmax rgba(18, 18, 18, .5);
}


/*  Shown instead of the list when every line on the order has gone or lost
    its price. An answer, where rendering nothing was not.  */
.reorder-none {
    margin: 18px 0 6px;
    padding: 16px 18px;
    border: 1px dashed var(--color-border);
    border-radius: 8px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-text-muted);
}

    .reorder-none a {
        color: var(--color-accent);
        font-weight: 600;
    }


.reorder-dialog {
    border: none;
    border-radius: 10px;
    padding: 0;
    width: calc(100% - 32px);
    max-width: 560px;
    max-height: 86vh;
    box-shadow: 0 18px 50px rgba(18, 18, 18, .26);
    color: var(--color-text);
    overflow: hidden;
}

    .reorder-dialog::backdrop {
        background: rgba(18, 18, 18, .5);
    }

/*  Head and foot hold still, the list between them scrolls. On a long order
    the Add to cart button stays reachable without scrolling to the bottom.  */
.reorder-form {
    display: flex;
    flex-direction: column;
    max-height: 86vh;
}

.reorder-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px 16px;
    border-bottom: 1px solid var(--color-border);
}

    .reorder-head h2 {
        margin: 0;
        font-size: 22px;
        font-weight: 700;
    }

.reorder-sub {
    margin: 2px 0 0;
    font-size: 14px;
    color: var(--color-text-muted);
}

.reorder-close {
    flex: none;
    background: none;
    border: none;
    padding: 4px;
    margin: -4px -4px 0 0;
    color: var(--color-text-muted);
    cursor: pointer;
    line-height: 0;
    border-radius: 6px;
}

    .reorder-close:hover {
        color: var(--color-text);
        background: var(--color-bg-alt);
    }

.reorder-body {
    overflow-y: auto;
    padding: 4px 24px;
    -webkit-overflow-scrolling: touch;
}

.reorder-line {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--color-border);
}

    .reorder-line:last-child {
        border-bottom: none;
    }

    .reorder-line.is-blocked {
        opacity: .55;
    }

    /*  An unticked row keeps its number but stops looking live.  */
    .reorder-line[data-off] .reorder-main,
    .reorder-line[data-off] .reorder-qty {
        opacity: .5;
    }

.reorder-pick {
    display: flex;
    align-items: center;
    justify-content: center;
}

.reorder-check {
    width: 20px;
    height: 20px;
    accent-color: var(--color-accent);
    cursor: pointer;
}

.reorder-pick-blank {
    width: 20px;
    height: 20px;
}

.reorder-main {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.reorder-name {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    cursor: pointer;
}

.reorder-meta {
    font-size: 13.5px;
    color: var(--color-text-muted);
}

.reorder-pack {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-accent);
}

    .reorder-pack:empty {
        display: none;
    }

.reorder-blocked-note {
    font-size: 13px;
    font-weight: 600;
    color: #b3261e;
}

.reorder-qty {
    justify-self: end;
}

.reorder-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px 24px 20px;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-alt);
}

.reorder-count {
    margin: 0;
    font-size: 14px;
    color: var(--color-text-muted);
}

.reorder-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.reorder-cancel {
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: 12px 20px;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
}

    .reorder-cancel:hover {
        border-color: var(--color-text);
    }

.reorder-submit {
    background: var(--color-button);
    border: 1px solid var(--color-button);
    border-radius: var(--radius-card);
    padding: 12px 24px;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 700;
    color: var(--color-button-label);
    cursor: pointer;
    transition: opacity .15s ease;
}

    .reorder-submit:hover:not(:disabled) {
        opacity: .88;
    }

    .reorder-submit:disabled {
        opacity: .4;
        cursor: not-allowed;
    }

/*  A phone gets a full-height sheet rather than a small box floating in the
    middle, and the quantity drops under the name so neither has to shrink.  */
@media (max-width: 560px) {
    .reorder-dialog {
        width: 100%;
        max-width: none;
        max-height: 100%;
        height: 100%;
        margin: 0;
        border-radius: 0;
    }

    .reorder-form {
        max-height: 100%;
        height: 100%;
    }

    .reorder-head,
    .reorder-foot {
        padding-left: 18px;
        padding-right: 18px;
    }

    .reorder-body {
        padding-left: 18px;
        padding-right: 18px;
        flex: 1;
    }

    .reorder-line {
        grid-template-columns: 26px minmax(0, 1fr);
        row-gap: 10px;
    }

    .reorder-qty {
        grid-column: 2;
        justify-self: start;
    }

    .reorder-foot {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .reorder-actions {
        flex-direction: column-reverse;
    }

    .reorder-cancel,
    .reorder-submit {
        width: 100%;
        padding-top: 14px;
        padding-bottom: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .order-reorder-btn,
    .reorder-submit {
        transition: none;
    }
}


/* ====================================================================
   09. QUOTE REQUEST
   ==================================================================== */

.quote {
    max-width: 1440px;
    margin: 0 auto;
    padding: 48px 40px 50px;
}


.quote-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 44px;
}

    .quote-header h1 {
        font-size: 40px;
        font-weight: 700;
        margin: 0 0 16px;
        letter-spacing: -0.03em;
    }

    .quote-header p {
        font-size: 17px;
        line-height: 1.7;
        margin: 0;
        color: var(--color-text-muted, #6a7280);
    }

.quote-body {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
}


.quote-card {
    background: #f6f6f6;
    border-radius: 18px;
    padding: 38px 38px 34px;
}


.quote-form .field {
    margin-bottom: 22px;
    flex: 1;
    min-width: 0;
}

.quote-form label {
    display: block;
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--color-text, #16181d);
}

    .quote-form label i {
        color: #d2453c;
        font-style: normal;
        margin-left: 2px;
    }

.quote-form input[type="text"], .quote-form input[type="email"], .quote-form input[type="tel"], .quote-form select, .quote-form textarea {
    width: 100%;
    border: 1px solid var(--color-border, #dfe2e8);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 15px;
    font-family: inherit;
    background: #fff;
    box-sizing: border-box;
    transition: border-color .12s ease, box-shadow .12s ease;
}

    .quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus {
        outline: none;
        border-color: var(--color-accent, #0195d8);
        box-shadow: 0 0 0 3px rgba(1, 149, 216, .13);
    }

.quote-form textarea {
    resize: vertical;
    line-height: 1.65;
}

.field-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.field-narrow {
    flex: 0 0 116px;
}


.field-group {
    margin-bottom: 22px;
}

.field-group-label {
    display: block;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--color-text-muted, #6a7280);
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border, #dfe2e8);
}

.quote-form span.field-validation-error {
    display: block;
    font-size: 13px;
    color: #a01818;
    margin-top: 6px;
}

.quote-errors:not(:empty) {
    background: rgba(210, 69, 60, .08);
    border: 1px solid rgba(210, 69, 60, .25);
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 24px;
    font-size: 14.5px;
    color: #8c1c1c;
}

.quote-errors ul {
    margin: 0;
    padding-left: 18px;
}


.picker {
    position: relative;
    margin-bottom: 14px;
}

.picker-search {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--color-border, #dfe2e8);
    border-radius: 8px;
    padding: 0 14px;
    background: #fff;
    transition: border-color .12s ease, box-shadow .12s ease;
}

    .picker-search:focus-within {
        border-color: var(--color-accent, #0195d8);
        box-shadow: 0 0 0 3px rgba(1, 149, 216, .13);
    }

    .picker-search svg {
        width: 19px;
        height: 19px;
        flex: none;
        fill: none;
        stroke: var(--color-text-muted, #6a7280);
        stroke-width: 1.8;
        stroke-linecap: round;
    }

    .picker-search input {
        flex: 1;
        border: none !important;
        outline: none;
        padding: 13px 0 !important;
        font-size: 15px;
        font-family: inherit;
        background: none;
        box-shadow: none !important;
    }

.picker-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 20;
    list-style: none;
    margin: 0;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--color-border, #dfe2e8);
    border-radius: 12px;
    box-shadow: 0 14px 34px rgba(17, 19, 21, .15);
    max-height: 300px;
    overflow-y: auto;
}

.picker-result {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 10px 12px;
    border-radius: 7px;
    cursor: pointer;
}

    .picker-result:hover, .picker-result.is-active {
        background: rgba(1, 149, 216, .09);
    }

    .picker-result strong {
        font-size: 14.5px;
        font-weight: 600;
    }

    .picker-result span {
        font-size: 12.5px;
        color: var(--color-text-muted, #6a7280);
        font-family: ui-monospace, Consolas, monospace;
    }

.picker-none {
    padding: 14px 12px;
    font-size: 14px;
    color: var(--color-text-muted, #6a7280);
}


.picked {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.picked-line {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid var(--color-border, #dfe2e8);
    border-radius: 10px;
    padding: 11px 13px;
}


    .picked-line.is-bumped {
        border-color: var(--color-accent, #0195d8);
        box-shadow: 0 0 0 3px rgba(1, 149, 216, .15);
        transition: box-shadow .3s ease, border-color .3s ease;
    }

.picked-detail {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

    .picked-detail strong {
        font-size: 14.5px;
        font-weight: 600;
        word-break: break-word;
    }

    .picked-detail span {
        font-size: 12.5px;
        color: var(--color-text-muted, #6a7280);
        font-family: ui-monospace, Consolas, monospace;
    }

.qty {
    display: flex;
    align-items: center;
    border: 1px solid var(--color-border, #dfe2e8);
    border-radius: 8px;
    overflow: hidden;
    flex: none;
    background: #fff;
}

.picked-remove {
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    color: var(--color-text-muted, #6a7280);
}

    .picked-remove:hover {
        background: rgba(210, 69, 60, .1);
        color: #a01818;
    }

    .picked-remove svg {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
    }

.picked-empty {
    font-size: 14px;
    color: var(--color-text-muted, #6a7280);
    margin: 12px 0 0;
    line-height: 1.6;
}

.quote-submit {
    width: 100%;
    margin-top: 8px;
}

.quote-foot {
    font-size: 14px;
    color: var(--color-text-muted, #6a7280);
    margin-top: 18px;
    text-align: center;
}


.quote-aside {
    position: sticky;
    top: calc(var(--site-top-h, 0px) + 28px);
    padding-top: 10px;
}

.quote-aside-image img {
    width: 100%;
    height: auto;
    display: block;
    max-height: 480px;
    object-fit: contain;
    background-color: #f6f6f6;
}

.quote-aside-points {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 30px;
    max-width: 420px;
}

.quote-point {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 15px 4px;
}

    .quote-point svg {
        width: 22px;
        height: 22px;
        flex: none;
        margin-top: 2px;
        fill: none;
        stroke: var(--color-accent, #0195d8);
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .quote-point div {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .quote-point strong {
        font-size: 15px;
        font-weight: 700;
    }

    .quote-point span {
        font-size: 13.5px;
        line-height: 1.55;
        color: var(--color-text-muted, #6a7280);
    }


.quote-done {
    text-align: center;
    padding: 30px 0;
}

.quote-done-icon {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: rgba(24, 140, 60, .12);
    color: #14743a;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

    .quote-done-icon svg {
        width: 33px;
        height: 33px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.quote-done h2 {
    font-size: 27px;
    font-weight: 800;
    margin: 0 0 14px;
}

.quote-done-lead {
    font-size: 16px;
    line-height: 1.7;
    margin: 0 0 14px;
}

.quote-muted {
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--color-text-muted, #6a7280);
    margin: 0;
}

.quote-done .btn-cart {
    margin-top: 20px;
    display: inline-block;
}


/* ====================================================================
   10. CONTENT PAGES
   ==================================================================== */


.info-hero {
    padding: 40px 0 0;
}

.info-hero-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 460px;
    background: var(--color-bg-alt);
}


    .info-hero-split.wide-text {
        grid-template-columns: 1.2fr 1fr;
    }

.info-hero-text {
    padding: 56px 56px 56px 0;
    margin-left: 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .info-hero-text h1 {
        font-size: 40px;
        font-weight: 700;
        margin: 0 0 20px;
    }

    .info-hero-text h2 {
        font-size: 40px;
        font-weight: 700;
        margin: 0 0 20px;
    }

.info-hero strong {
    font-weight: 700;
    font-size: 20px;
}


.info-hero-text p {
    color: var(--color-text-muted);
    font-size: 18px;
    line-height: 1.75;
    margin: 0 0 14px;
    text-align: left;
}

.contact-label {
    margin: 18px 0 4px;
    font-size: 17px;
    font-weight: bolder;
    color: var(--color-text);
}

.contact-link {
    color: var(--color-accent);
    text-decoration: underline;
    font-weight: 600;
}

.info-hero-list {
    margin: 0 0 14px;
    padding-left: 22px;
    color: var(--color-text-muted);
    font-size: 18px;
    line-height: 1.8;
}

    .info-hero-list li {
        margin-bottom: 4px;
    }

.info-hero-image {
    background: var(--color-bg-alt);
}

    .info-hero-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        min-height: 460px;
        background-color: #fafafa;
    }


        .info-hero-image img[src$=".svg"] {
            object-fit: contain;
            padding: 40px;
        }


.community-section {
    padding: 48px 0;
}

.community-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    overflow: hidden;
}

.community-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    min-height: 360px;
}

.community-text {
    padding: 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .community-text h2 {
        font-size: 30px;
        font-weight: 700;
        margin: 0 0 20px;
    }


    .community-text p {
        color: var(--color-text-muted);
        font-size: 18px;
        line-height: 1.75;
        margin: 0 0 16px;
        text-align: left;
    }


.info-hero-image .contact-map,
.info-hero-image .contact-map-frame {
    height: 100%;
    width: 100%;
}

.info-hero-image .contact-map-frame {
    position: relative;
    border: 0;
    border-radius: 0;
    overflow: hidden;
    background: #dfe8ee;
    min-height: 320px;
}

    .info-hero-image .contact-map-frame iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
        display: block;
    }


.info-hero-split:has(.contact-map) .info-hero-text .contact-label {
    margin: 1.6rem 0 .2rem;
}

    .info-hero-split:has(.contact-map) .info-hero-text .contact-label + p {
        margin-bottom: 0;
    }

.info-hero-split:has(.contact-map) .info-hero-text h1 {
    margin-bottom: .85rem;
}

.info-hero-split:has(.contact-map) .info-hero-text p {
    line-height: 1.7;
    max-width: 62ch;
}


.info-hero-split:has(.contact-map) .info-hero-text .contact-link {
    display: inline-block;
    padding: .2rem 0;
}


@media (max-width: 1024px) {
    .info-hero-image .contact-map,
    .info-hero-image .contact-map-frame {
        height: auto;
    }

    .info-hero-image .contact-map-frame {
        aspect-ratio: 16 / 10;
        min-height: 260px;
    }
}


@media (max-width: 560px) {
    .info-hero-image .contact-map-frame {
        aspect-ratio: 4 / 3;
        min-height: 240px;
    }

    .info-hero-split:has(.contact-map) .info-hero-text .contact-label {
        margin-top: 1.35rem;
    }
}


@media print {
    .info-hero-image .contact-map {
        display: none;
    }
}


.faq-hero {
    background: linear-gradient(180deg, #eaf6fc 0%, #f5fbfd 100%);
    padding: 20px 0 20px;
}


.faq-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
    max-width: 1100px;
    margin-inline: auto;
}

.faq-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 16px 7px 12px;
    border: 1px solid rgba(1, 149, 216, .3);
    background: rgba(255, 255, 255, .7);
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-accent);
    margin-bottom: 18px;
}

.faq-eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-accent);
}

.faq-hero h1 {
    font-size: 43px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0 0 14px;
}

.faq-lead {
    font-size: 18px;
    line-height: 1.7;
    color: var(--color-text-muted);
    margin: 0 0 26px;
    max-width: 52ch;
}


.faq-search {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 460px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 0 18px;
    box-shadow: 0 6px 20px rgba(18, 18, 18, .06);
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .faq-search:focus-within {
        border-color: var(--color-accent);
        box-shadow: 0 6px 22px rgba(1, 149, 216, .18);
    }

    .faq-search svg {
        flex: none;
        width: 19px;
        height: 19px;
        color: var(--color-text-muted);
    }

    .faq-search input {
        flex: 1;
        min-width: 0;
        border: 0;
        outline: 0;
        background: none;
        padding: 15px 12px;
        font-family: var(--font-body);
        font-size: 16px;
        color: var(--color-text);
    }


        .faq-search input::-webkit-search-cancel-button {
            cursor: pointer;
        }

.faq-count {
    margin: 12px 0 0;
    font-size: 14px;
    color: var(--color-text-muted);
}


.faq-hero-art {
    display: flex;
    justify-content: center;
}

    .faq-hero-art img {
        width: 100%;
        max-width: 380px;
        height: auto;
        display: block;
    }


.faq-main {
    padding: 52px 0 76px;
}

.faq-list {
    max-width: 860px;
}

.faq-group + .faq-group {
    margin-top: 44px;
}

.faq-group-title {
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--color-accent);
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}


    .faq-group-title::after {
        content: "";
        flex: 1;
        height: 1px;
        background: var(--color-border);
    }


.faq-item {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    margin-bottom: 10px;
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .faq-item:hover {
        border-color: rgba(1, 149, 216, .45);
    }

    .faq-item[open] {
        border-color: rgba(1, 149, 216, .45);
        box-shadow: 0 8px 26px rgba(18, 18, 18, .07);
    }

    .faq-item > summary {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 18px 20px;
        cursor: pointer;
        list-style: none;
        font-size: 17px;
        font-weight: 600;
        line-height: 1.45;
        color: var(--color-text);
    }

        .faq-item > summary::-webkit-details-marker {
            display: none;
        }

        .faq-item > summary:focus-visible {
            outline: 2px solid var(--color-accent);
            outline-offset: -2px;
            border-radius: 12px;
        }

.faq-q {
    flex: 1;
    min-width: 0;
}


.faq-chev {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(1, 149, 216, .08);
    position: relative;
    transition: background .15s ease, transform .2s ease;
}

    .faq-chev::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 8px;
        height: 8px;
        border-right: 2px solid var(--color-accent);
        border-bottom: 2px solid var(--color-accent);
        transform: translate(-50%, -70%) rotate(45deg);
    }

.faq-item[open] .faq-chev {
    background: rgba(1, 149, 216, .16);
    transform: rotate(180deg);
}


.faq-answer {
    padding: 0 20px 20px;
    animation: faq-reveal .22s ease;
}

    .faq-answer p,
    .faq-answer ul {
        font-size: 16px;
        line-height: 1.75;
        color: var(--color-text-muted);
        margin: 0 0 12px;
    }

    .faq-answer ul {
        padding-left: 22px;
    }

    .faq-answer li {
        margin-bottom: 6px;
    }

    .faq-answer > :last-child {
        margin-bottom: 0;
    }

.faq-link {
    color: var(--color-accent);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

    .faq-link:hover {
        text-decoration: none;
    }


@keyframes faq-reveal {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}


.faq-empty {
    margin: 8px 0 0;
    padding: 24px;
    border: 1px dashed var(--color-border);
    border-radius: 12px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 16px;
}


.faq-cta {
    margin-top: 48px;
    padding: 32px;
    border-radius: 16px;
    background: linear-gradient(180deg, #eaf6fc 0%, #f5fbfd 100%);
    border: 1px solid rgba(1, 149, 216, .18);
    text-align: center;
}

    .faq-cta h2 {
        font-size: 24px;
        font-weight: 700;
        margin: 0 0 6px;
    }

    .faq-cta p {
        margin: 0 0 22px;
        color: var(--color-text-muted);
        font-size: 16px;
    }

.faq-cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.faq-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 22px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: #fff;
    color: var(--color-text);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

    .faq-cta-btn svg {
        width: 18px;
        height: 18px;
        flex: none;
        color: var(--color-accent);
    }

    .faq-cta-btn:hover {
        border-color: var(--color-accent);
        transform: translateY(-1px);
        box-shadow: 0 6px 18px rgba(18, 18, 18, .08);
    }

    .faq-cta-btn:focus-visible {
        outline: 2px solid var(--color-accent);
        outline-offset: 2px;
    }

.faq-cta-btn-primary {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

    .faq-cta-btn-primary svg {
        color: #fff;
    }

    .faq-cta-btn-primary:hover {
        border-color: var(--color-accent);
    }


@media (min-width: 1200px) {
    .faq-hero-inner {
        max-width: 1280px;
    }

    .faq-list {
        max-width: 1280px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 40px 44px;
        align-items: start;
    }


    .faq-group + .faq-group,
    .faq-cta {
        margin-top: 0;
    }


    .faq-empty {
        grid-column: 1 / -1;
    }


    .faq-cta {
        align-self: stretch;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}


@media (max-width: 1024px) {
    .faq-hero {
        padding: 40px 0 36px;
    }

    .faq-hero-inner {
        grid-template-columns: 1fr;
        gap: 28px;
    }


    .faq-hero-art {
        display: none;
    }

    .faq-lead {
        max-width: none;
    }

    .faq-search {
        max-width: none;
    }

    .faq-main {
        padding: 40px 0 60px;
    }
}


@media (max-width: 640px) {
    .faq-hero {
        padding: 32px 0 30px;
    }

    .faq-item > summary {
        padding: 16px;
        gap: 12px;
        font-size: 16px;
    }

    .faq-chev {
        width: 26px;
        height: 26px;
    }

    .faq-answer {
        padding: 0 16px 18px;
    }

        .faq-answer p,
        .faq-answer ul {
            font-size: 15.5px;
        }

    .faq-group + .faq-group {
        margin-top: 34px;
    }

    .faq-cta {
        padding: 26px 20px;
    }

    .faq-cta-actions {
        flex-direction: column;
    }

    .faq-cta-btn {
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .faq-answer {
        animation: none;
    }

    .faq-chev,
    .faq-cta-btn {
        transition: none;
    }
}


@media print {
    .faq-hero-art,
    .faq-search,
    .faq-count,
    .faq-cta {
        display: none;
    }

    .faq-answer {
        display: block !important;
        animation: none;
    }

    .faq-item {
        break-inside: avoid;
        box-shadow: none;
    }
}

/*  ERROR PAGES
    One page behind every HTTP error status, wired up with
    UseStatusCodePagesWithReExecute. Centred, generous, and short - somebody
    who has hit a dead end wants a way out of it, not a paragraph.  */

.error-page {
    padding: 56px 0 84px;
}

.error-inner {
    max-width: 620px;
    text-align: center;
}

.error-art {
    margin: 0 auto 10px;
    max-width: 440px;
}

    /*  max-height and contain together, because the shape of the artwork is
        not this stylesheet's to assume. A wide SVG fills the width; a tall or
        square one is held to 340px and letterboxed rather than pushing the
        heading off the screen.  */
    .error-art img {
        display: block;
        width: 100%;
        height: auto;
        max-height: 340px;
        object-fit: contain;
        margin: 0 auto;
    }

.error-code {
    margin: 0 0 8px;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.error-heading {
    margin: 0 0 14px;
    font-size: clamp(28px, 1.6rem + 1.6vw, 42px);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.12;
}

.error-message {
    margin: 0 auto 30px;
    max-width: 48ch;
    font-size: 17.5px;
    line-height: 1.7;
    color: var(--color-text-muted);
}

.error-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

    .error-actions .btn {
        min-width: 190px;
        padding: 14px 28px;
        font-size: 16px;
        text-align: center;
    }

.error-btn-quiet {
    background: #fff;
    border-color: var(--color-border);
    color: var(--color-text);
}

    .error-btn-quiet:hover {
        border-color: var(--color-text);
        opacity: 1;
    }

.error-help {
    margin: 30px 0 0;
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--color-text-muted);
}

    .error-help a {
        color: var(--color-accent);
        font-weight: 600;
    }

@media (max-width: 560px) {
    .error-page {
        padding: 32px 0 56px;
    }

    .error-art {
        max-width: 300px;
    }

        .error-art img {
            max-height: 240px;
        }

    .error-message {
        font-size: 16.5px;
    }

    .error-actions {
        flex-direction: column;
        align-items: stretch;
    }

        .error-actions .btn {
            width: 100%;
        }
}

/* ====================================================================
   11. FOOTER
   ==================================================================== */


footer.site-footer {
    background: var(--color-accent);
    color: #fff;
    margin-top: 40px;
}

    footer.site-footer .wrap {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 28px;
        padding-top: 26px;
        padding-bottom: 20px;
    }

    footer.site-footer h4 {
        font-size: 16px;
        letter-spacing: 0.06em;
        margin: 0 0 6px;
    }

    footer.site-footer p, footer.site-footer a {
        font-size: 15.5px;
        opacity: 0.92;
        text-decoration: none;
        line-height: 1.55;
        color: #FAF9F6;
    }

    footer.site-footer p {
        margin: 0 0 12px;
    }

        footer.site-footer a:hover {
            text-decoration: underline;
            color: white;
        }


.social-links {
    display: flex;
    align-items: center;
    gap: 12px;
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
}

    .social-links a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .14);
        color: #fff;
        transition: background .15s ease, transform .15s ease;
    }

        .social-links a:hover {
            background: rgba(255, 255, 255, .28);
            transform: translateY(-2px);
        }


        .social-links a:focus-visible {
            outline: 2px solid #fff;
            outline-offset: 3px;
        }

    .social-links svg {
        width: 17px;
        height: 17px;
        display: block;
    }


.footer-logo {
    height: 52px;
    width: auto;
    margin-bottom: 10px;
    display: block;
}

footer.site-footer h4:first-of-type {
    margin-top: 0;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-decoration: Underline;
}

    .footer-links a {
        text-decoration: none;
    }

        .footer-links a:hover {
            text-decoration: underline;
        }

.copyright-bar {
    border-top: 1px solid rgba(255,255,255,0.25);
    text-align: center;
    font-size: 13px;
    padding: 10px 0;
    opacity: 0.85;
}


/* ====================================================================
   12. RESPONSIVE
   ==================================================================== */

@media (min-width: 981px) {
    .nav-dropdown .dropdown-menu {
        left: 50%;
    }

    .nav-dropdown:hover .dropdown-menu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translate(-50%, 0) scale(1);
    }

    footer.site-footer .wrap > div + div {
        border-left: 1px solid rgba(255, 255, 255, 0.42);
        padding-left: 28px;
    }
}

@media (max-width: 1200px) {
    .gallery-slide {
        flex: 0 0 calc(25% - 13.5px);
    }
}

@media (max-width: 1100px) {
    .quote {
        padding: 40px 24px 70px;
    }

    .quote-body {
        grid-template-columns: 1fr;
        gap: 34px;
    }


    .quote-aside {
        position: static;
        order: 2;
        padding-top: 0;
    }

    .quote-aside-image {
        display: none;
    }

    .quote-aside {
        background: #f6f6f6;
        border-radius: 12px;
        padding: 1.5rem;
    }

    .quote-aside-points {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 0 24px;
        max-width: none;
        margin-top: 22px;
    }

    .quote-header h1 {
        font-size: 33px;
    }
}


@media (max-width: 1024px) {
    .info-hero-split,
    .info-hero-split.wide-text,
    .community-split {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .info-hero-text {
        margin-left: 0;
        padding: 36px 24px;
    }


        .info-hero-text p,
        .info-hero-list {
            max-width: none;
        }

    .info-hero-text,
    .community-text {
        order: 1;
    }

    .info-hero-image,
    .community-image {
        order: 2;
    }


        .info-hero-image img,
        .community-image img {
            min-height: 0;
            height: auto;
            aspect-ratio: 16 / 10;
        }

            .info-hero-image img[src$=".svg"] {
                aspect-ratio: 4 / 3;
                padding: 24px;
            }

    .community-text {
        padding: 32px 24px;
    }
}

@media (max-width: 980px) {
    .nav-dropdown {
        width: 100%;
    }

    .dropdown-menu {
        position: static !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        overflow: hidden;
    }

        .dropdown-menu a {
            width: 100%;
            box-sizing: border-box;
            white-space: normal;
        }


    .home-hero .home-hero-inner {
        grid-template-columns: 1fr;
        gap: 32px;
        padding-top: 56px;
        padding-bottom: 40px;
        padding-left: 24px;
        padding-right: 24px;
    }

    .home-hero-copy {
        max-width: 100%;
    }

    .home-hero h1 {
        font-size: 42px;
    }

    .home-hero-copy p {
        font-size: 17px;
    }

    .home-hero h1 {
        margin-bottom: 24px;
    }

    .home-hero-media {
        aspect-ratio: 16 / 10;
        max-width: 620px;
        margin: 0 auto;
    }

    .home-hero .trust-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        padding-top: 4px;
        padding-bottom: 20px;
        padding-left: 24px;
        padding-right: 24px;
    }

    .trust-item {
        padding: 15px 18px;
        gap: 13px;
    }

    .trust-icon {
        width: 46px;
        height: 46px;
        border-radius: 12px;
    }

    .trust-label {
        font-size: 15px;
    }


    .gallery-slide {
        flex: 0 0 calc(33.333% - 12px);
    }

    .home-gallery {
        padding: 48px 10px 50px;
    }

    .wrap {
        padding: 0 20px;
    }

    header.site-header .wrap {
        justify-content: space-between;
        position: relative;
    }

    .nav-toggle {
        display: flex;
    }

    nav.site-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        border-bottom: 1px solid var(--color-border);
        box-shadow: 0 8px 16px rgba(18,18,18,0.08);
        flex-direction: column;
        gap: 0;
        padding: 8px 20px 16px;
        z-index: 20;
        max-height: calc(100vh - var(--site-top-h, 0px));
        overflow-y: auto;
    }

        nav.site-nav.open {
            display: flex;
        }

        nav.site-nav a {
            padding: 12px 0;
            border-bottom: 1px solid var(--color-border);
            width: 100%;
        }

            nav.site-nav a:last-child {
                border-bottom: none;
            }

    .nav-dropdown {
        width: 100%;
    }

        .nav-dropdown .dropdown-menu {
            display: flex;
            flex-direction: column;
            gap: 0;
            position: static;
            opacity: 1;
            visibility: visible;
            transform: none;
            transition: none;
            box-shadow: none;
            border: none;
            border-radius: 0;
            background: var(--color-bg-alt);
            margin: 6px 0 0;
            padding: 4px;
            max-height: 0;
            overflow: hidden;
            padding-top: 0;
            padding-bottom: 0;
            transition: max-height 0.25s ease, padding 0.25s ease;
        }

    .dropdown-menu::before {
        display: none;
    }

    .nav-dropdown.open .dropdown-menu {
        max-height: 400px;
        padding: 4px;
    }

    .dropdown-menu a {
        padding: 11px 14px;
        font-size: 15px;
        border-radius: 6px;
    }

        .dropdown-menu a:hover {
            padding-left: 14px;
        }


    .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }

    footer.site-footer .wrap {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .auth-page-card {
        padding: 28px;
    }


    footer.site-footer .wrap > div + div {
        border-top: 1px solid rgba(255, 255, 255, 0.42);
        padding-top: 16px;
    }

    .cart-layout {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .cart-summary {
        position: static;
    }

    .cart-title {
        font-size: 34px;
    }

    .checkout-layout {
        grid-template-columns: 1fr;
        gap: 22px;
    }


    .checkout-summary {
        position: static;
    }

    .checkout-peek {
        display: block;
    }

    .checkout-title {
        font-size: 34px;
    }
}

@media (max-width: 900px) {
    .range-header h1 {
        font-size: 34px;
    }

    .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 16px;
    }

    .account-page {
        padding-top: 26px;
    }

    .account-layout {
        grid-template-columns: 1fr;
        gap: 26px;
    }


    .account-nav {
        position: static;
        flex-direction: column;
        gap: 0;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-card);
        overflow: hidden;
        background: #fff;
    }

    .account-nav-heading {
        display: block;
        width: 100%;
        margin: 0;
        padding: 12px 18px 8px;
        background: var(--color-bg-alt);
        border-top: 1px solid var(--color-border);
        border-bottom: 1px solid var(--color-border);
        font-size: 11px;
    }

    .account-nav-link {
        position: relative;
        border-left: none;
        border-radius: 0;
        padding: 15px 40px 15px 18px;
        font-size: 15px;
        border-bottom: 1px solid var(--color-border);
    }

        .account-nav-link:last-child {
            border-bottom: none;
        }


        .account-nav-link::after {
            content: "";
            position: absolute;
            right: 20px;
            top: 50%;
            width: 7px;
            height: 7px;
            margin-top: -4px;
            border-right: 2px solid rgba(18, 18, 18, .3);
            border-bottom: 2px solid rgba(18, 18, 18, .3);
            transform: rotate(-45deg);
        }

        .account-nav-link.active {
            border-left: none;
            background: #e6f4fb;
            color: #0172a8;
        }

            .account-nav-link.active::after {
                border-color: var(--color-accent);
            }


    .account-card {
        padding: 22px 18px;
    }

    .account-card-head {
        margin: -22px -18px 18px;
        padding: 20px 18px 18px;
    }

        .account-card-head:last-child {
            margin-bottom: -22px;
        }

        .account-card h2 {
            font-size: 19px;
        }

    .account-content {
        gap: 18px;
    }

    .account-form {
        max-width: 100%;
        margin-top: 18px;
        gap: 16px;
    }

    .account-submit {
        width: 100%;
        min-width: 0;
    }

    .account-readonly {
        grid-template-columns: 1fr;
        gap: 16px;
    }


        .account-readonly > div {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            gap: 16px;
            padding-bottom: 14px;
            border-bottom: 1px solid var(--color-border);
        }

            .account-readonly > div:last-child {
                border-bottom: none;
                padding-bottom: 0;
            }

        .account-readonly dt {
            margin-bottom: 0;
            flex: none;
        }

        .account-readonly dd {
            text-align: right;
            font-size: 15px;
            overflow-wrap: anywhere;
        }

    .account-hero {
        padding: 20px 20px 0;
    }

}

@media (max-width: 860px) {
    .user-greeting {
        display: none;
    }
}

@media (max-width: 760px) {
    .quote {
        padding: 28px 16px 56px;
    }

    .quote-header {
        margin-bottom: 26px;
    }

        .quote-header h1 {
            font-size: 26px;
        }

        .quote-header p {
            font-size: 15.5px;
        }

    .quote-card {
        padding: 22px 18px 20px;
        border-radius: 14px;
    }


    .quote-aside-image {
        display: none;
    }

    .quote-aside-points {
        grid-template-columns: 1fr;
        margin-top: 4px;
    }

    .quote-point {
        padding: 11px 2px;
    }


    .field-row {
        display: block;
    }

        .field-row .field,
        .field-row .field-narrow {
            width: 100%;
            flex: none;
        }

    .quote-form .field {
        margin-bottom: 16px;
    }

    .quote-form label {
        font-size: 14.5px;
    }


    .quote-form input[type="text"],
    .quote-form input[type="email"],
    .quote-form input[type="tel"],
    .quote-form select,
    .quote-form textarea,
    .picker-search input {
        font-size: 16px;
    }

    .field-group-label {
        margin-bottom: 12px;
    }


    .picked-line {
        flex-wrap: wrap;
        gap: 10px;
    }

    .picked-detail {
        flex: 1 1 100%;
    }

    .picker-results {
        max-height: 240px;
    }

    .quote-done {
        padding: 16px 0;
    }

        .quote-done h2 {
            font-size: 23px;
        }
}

@media (max-width: 700px) {
    .gallery-slide {
        flex: 0 0 calc(50% - 6px);
    }

    .gallery-track {
        gap: 12px;
    }

    .home-hero-copy {
        text-align: center;
    }

        .home-hero-copy p {
            margin-left: auto;
            margin-right: auto;
        }
}

@media (max-width: 640px) {
    .home-hero .home-hero-inner {
        padding-top: 46px;
        padding-bottom: 30px;
        padding-left: 16px;
        padding-right: 16px;
        gap: 26px;
    }

    .home-hero h1 {
        font-size: 32px;
    }

    .home-hero-copy p {
        font-size: 16.5px;
        line-height: 1.7;
    }

    .home-eyebrow {
        font-size: 12px;
        padding: 6px 13px 6px 10px;
        margin-bottom: 18px;
    }

    .home-hero-media {
        aspect-ratio: 4 / 3;
        max-width: 100%;
    }

    .home-hero .trust-row {
        grid-template-columns: 1fr;
        gap: 10px;
        padding-bottom: 12px;
        padding-left: 16px;
        padding-right: 16px;
    }

    .trust-item {
        padding: 13px 16px;
        gap: 12px;
        border-radius: 12px;
    }

        .trust-item:hover {
            transform: none;
        }

    .trust-icon {
        width: 42px;
        height: 42px;
        border-radius: 11px;
    }

        .trust-icon svg,
        .trust-icon img {
            width: 22px;
            height: 22px;
        }

    .trust-label {
        font-size: 14.5px;
    }

    .gallery-slide {
        border-radius: 10px;
    }

    .gallery-nav {
        margin-top: 18px;
        gap: 14px;
    }

    .gallery-arrow {
        width: 38px;
        height: 38px;
    }

    .home-gallery {
        padding: 38px 10px 34px;
    }

    .social-links {
        gap: 10px;
    }

        .social-links a {
            width: 34px;
            height: 34px;
        }

    .wrap {
        padding: 0 16px;
    }

    .contact-banner .wrap,
    .promo-banner .wrap {
        flex-direction: column;
        gap: 4px;
        text-align: center;
        font-size: calc(19px * 0.85);
    }


    .section-title {
        font-size: 21px;
    }

    .product-grid {
        grid-template-columns: 1fr;
    }

    .auth-page h1 {
        font-size: 28px;
    }

    .auth-page-subtitle {
        font-size: 14.5px;
    }

    .auth-page-card {
        padding: 20px;
    }

    .account-type-toggle {
        flex-direction: column;
        gap: 10px;
    }

    .info-hero-text h1 {
        font-size: 28px;
    }

    .community-text h2 {
        font-size: 24px;
    }

    .info-hero-text, .community-text {
        padding: 24px 16px;
    }


    .info-hero-image img,
    .community-image img {
        aspect-ratio: 4 / 3;
    }

        .info-hero-image img[src$=".svg"] {
            padding: 16px;
        }


    .discover-intro {
        padding: 40px 0;
    }

    .discover-intro-inner p {
        font-size: 16px;
    }

    .cart-line {
        grid-template-columns: 80px minmax(0, 1fr);
        gap: 16px;
    }

    .cart-line-thumb {
        width: 80px;
    }

    .cart-line-qty-cell,
    .cart-line-total {
        grid-column: 2;
        justify-self: start;
        text-align: left;
    }


    .account-hero {
        padding: 16px 16px 0;
    }



    .account-stats {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .stat-card {
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        gap: 14px;
        padding: 16px 18px;
    }

    .stat-value,
    .stat-value-small {
        font-size: 24px;
    }

    .stat-label {
        font-size: 12px;
        text-align: right;
    }

    .checkout-page,
    .confirmation-page {
        padding-top: 24px;
    }

    .checkout-title {
        font-size: 28px;
    }

    .checkout-card {
        padding: 20px 16px;
        gap: 14px;
    }

    .checkout-card-head {
        gap: 11px;
    }

        .checkout-card-head h2 {
            font-size: 18px;
        }

    .step-badge {
        width: 26px;
        height: 26px;
        font-size: 13px;
    }

    .checkout-grid,
    .checkout-grid-3 {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .account-field-narrow {
        max-width: 100%;
    }

    .shipping-option {
        padding: 14px;
        gap: 11px;
    }

    .shipping-option-price {
        font-size: 16px;
    }

    .checkout-summary {
        padding: 20px 16px;
    }

    .checkout-line-thumb {
        width: 44px;
        height: 44px;
    }

    .confirmation-head h1 {
        font-size: 25px;
    }

    .order-row {
        flex-direction: column;
        gap: 14px;
    }

    .order-row-side {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    .order-detail-head {
        flex-direction: column;
        gap: 14px;
    }


    .order-table th:nth-child(3),
    .order-table td:nth-child(3) {
        display: none;
    }

    .order-totals {
        max-width: 100%;
    }

    .address-head {
        flex-direction: column;
        gap: 14px;
    }

    .address-add-btn {
        width: 100%;
    }

    .address-grid {
        grid-template-columns: 1fr;
    }

    .address-form-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

        .address-form-actions .account-submit,
        .address-form-actions .account-secondary-btn {
            width: 100%;
            justify-content: center;
            text-align: center;
        }
}

@media (max-width: 600px) {
    .thanks {
        padding: 44px 18px 60px;
    }

        .thanks h1 {
            font-size: 25px;
        }

    .thanks-lead {
        font-size: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}


/*  CATEGORY CARDS ON SMALLER SCREENS
    Two to a row below 1000px. Pinned to exactly two rather than left to
    auto-fit, which was giving three cramped cards in the 950-1000px band
    and dropping to one on a phone.

    999.98px rather than 999px: a browser at 90% zoom, or a device with an
    odd pixel ratio, can report a fractional width that falls between the
    two and matches neither rule.  */

@media (max-width: 999.98px) {
    .category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /*  The 400px fixed height was set for a full-width card. At half the
            width it crops the photo into a tall portrait, so the image keeps
            a shape instead of a height from here down.  */
    .category-card img {
        height: auto;
        aspect-ratio: 4 / 3;
    }
}

@media (max-width: 640px) {
    .category-grid {
        gap: 14px;
    }

    .category-card .category-body {
        padding: 20px 14px 24px;
        gap: 9px;
    }

    .category-card h3 {
        font-size: 21px;
    }

    .category-card p {
        font-size: 15px;
        line-height: 1.55;
    }

    /*  A 200px button will not fit in a half-width phone card, so it
            gives up the fixed length and fills the card instead.  */
    .category-card .btn {
        min-width: 0;
        width: 100%;
        padding: 12px 8px;
        font-size: 15px;
        margin-top: 10px;
    }
}

/*  Below 450px two cards leave about 130px each, which is narrower than
    the description needs, so the grid gives up and goes to one. A single
    full-width card has the room for the heading and body text to come
    back up; the button stays full width, which is what you want as the
    only thing to tap in the card.  */

@media (max-width: 449.98px) {
    .category-grid {
        grid-template-columns: 1fr;
    }

    .category-card .category-body {
        padding: 24px 20px 26px;
    }

    .category-card h3 {
        font-size: 24px;
    }

    .category-card p {
        font-size: 16.5px;
        line-height: 1.65;
    }
}


/* ====================================================================
   13. LEGAL PAGES
   ==================================================================== */

.legal-hero {
    background: linear-gradient(180deg, #eaf6fc 0%, #f5fbfd 100%);
    padding: 40px 0 46px;
}

.legal-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 16px 7px 12px;
    border: 1px solid rgba(1, 149, 216, .3);
    background: rgba(255, 255, 255, .7);
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-accent);
    margin-bottom: 18px;
}

.legal-eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-accent);
}

.legal-hero h1 {
    font-size:43px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0 0 14px;
}

.legal-lead {
    font-size: 18px;
    line-height: 1.7;
    color: var(--color-text-muted);
    margin: 0 0 26px;
}

.legal-search {
    display: flex;
    align-items: center;
    max-width: 520px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 0 18px;
    box-shadow: 0 6px 20px rgba(18, 18, 18, .06);
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .legal-search:focus-within {
        border-color: var(--color-accent);
        box-shadow: 0 6px 22px rgba(1, 149, 216, .18);
    }

    .legal-search svg {
        flex: none;
        width: 19px;
        height: 19px;
        color: var(--color-text-muted);
    }

    .legal-search input {
        flex: 1;
        min-width: 0;
        border: 0;
        outline: 0;
        background: none;
        padding: 15px 12px;
        font-family: var(--font-body);
        font-size: 16px;
        color: var(--color-text);
    }

.legal-count {
    margin: 12px 0 0;
    font-size: 14px;
    color: var(--color-text-muted);
}

.legal-empty {
    margin: 0;
    padding: 24px;
    border: 1px dashed var(--color-border);
    border-radius: 14px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 16px;
}

    .legal-empty a {
        color: var(--color-accent);
        font-weight: 600;
    }

.legal-updated {
    margin: 16px 0 0;
    font-size: 14px;
    color: var(--color-text-muted);
}

.legal-main {
    padding: 48px 0 76px;
}

.legal-layout {
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr);
    gap: 60px;
    align-items: start;
}

.legal-toc {
    position: sticky;
    top: calc(var(--site-top-h, 0px) + 24px);
}

.legal-toc-title {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--color-text-muted);
}

.legal-toc ol {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: toc;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.legal-toc li {
    line-height: 1.45;
}

.legal-toc a {
    display: flex;
    gap: 9px;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 15px;
    color: var(--color-text-muted);
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: color .15s ease, background .15s ease, border-color .15s ease;
}

    .legal-toc a::before {
        counter-increment: toc;
        content: counter(toc) ".";
        flex: none;
        width: 16px;
        color: var(--color-text-muted);
        font-variant-numeric: tabular-nums;
    }

    .legal-toc a.is-current::before {
        color: var(--color-accent);
    }

    .legal-toc a:hover {
        color: var(--color-accent);
        background: rgba(1, 149, 216, .06);
    }

    .legal-toc a:focus-visible {
        outline: 2px solid var(--color-accent);
        outline-offset: 2px;
    }

    .legal-toc a.is-current {
        color: var(--color-accent);
        font-weight: 600;
        border-left-color: var(--color-accent);
        background: rgba(1, 149, 216, .07);
    }

.legal-doc {
    counter-reset: clause;
}

.legal-clause {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 28px 32px;
    margin-bottom: 14px;
    scroll-margin-top: 20px;
}

    .legal-clause h2 {
        display: flex;
        align-items: baseline;
        gap: 14px;
        font-size: 24px;
        font-weight: 700;
        letter-spacing: -0.01em;
        margin: 0 0 14px;
        scroll-margin-top: 20px;
    }

        .legal-clause h2::before {
            counter-increment: clause;
            content: counter(clause);
            flex: none;
            width: 34px;
            height: 34px;
            border-radius: 10px;
            background: rgba(1, 149, 216, .1);
            color: var(--color-accent);
            font-size: 15px;
            font-weight: 700;
            line-height: 34px;
            text-align: center;
            align-self: center;
        }

    .legal-clause p {
        font-size: 17px;
        line-height: 1.8;
        color: var(--color-text-muted);
        margin: 0 0 14px;
        max-width: 80ch;
    }

        .legal-clause p:last-child {
            margin-bottom: 0;
        }

    /*  Written by the script on load. A counter only counts what is rendered,
    so filtering would renumber the clauses - and these are numbers people
    cite. The attribute pins them; the counter stays as the fallback for
    when the script has not run, which is exactly when nothing can be
    filtered anyway.  */
    .legal-clause h2[data-n]::before {
        content: attr(data-n);
    }

.legal-toc a[data-n]::before {
    content: attr(data-n) ".";
}

.legal-more a {
    color: var(--color-accent);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

    .legal-more a:hover {
        text-decoration: none;
    }

.legal-help {
    margin-top: 40px;
    padding: 26px 28px;
    border-radius: 14px;
    background: linear-gradient(180deg, #eaf6fc 0%, #f5fbfd 100%);
    border: 1px solid rgba(1, 149, 216, .18);
}

    .legal-help h2 {
        font-size: 19px;
        font-weight: 700;
        margin: 0 0 8px;
    }

    .legal-help p {
        margin: 0;
        font-size: 16px;
        line-height: 1.7;
        color: var(--color-text-muted);
    }

    .legal-help a {
        color: var(--color-accent);
        font-weight: 600;
        text-decoration: underline;
        text-underline-offset: 2px;
    }

@media (max-width: 1024px) {
    .legal-hero {
        padding: 38px 0 32px;
    }

    .legal-main {
        padding: 34px 0 56px;
    }

    .legal-layout {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .legal-toc {
        position: static;
        padding: 20px 22px;
        border: 1px solid var(--color-border);
        border-radius: 12px;
        background: var(--color-bg-alt);
    }

    .legal-doc {
        max-width: none;
    }
}

@media (max-width: 640px) {
    .legal-lead {
        font-size: 17px;
    }

    .legal-clause {
        padding-bottom: 26px;
        margin-bottom: 26px;
    }

        .legal-clause h2 {
            font-size: 21px;
            gap: 11px;
        }

            .legal-clause h2::before {
                width: 29px;
                height: 29px;
                line-height: 29px;
                font-size: 14px;
            }

        .legal-clause p {
            font-size: 16px;
        }

    .legal-help {
        padding: 22px 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .legal-toc a {
        transition: none;
    }
}

@media print {
    .legal-hero {
        background: none;
        padding: 0 0 18px;
    }

    .legal-eyebrow,
    .legal-toc,
    .legal-help {
        display: none;
    }

    .legal-main {
        padding: 0;
    }

    .legal-layout {
        display: block;
    }

    .legal-clause {
        break-inside: avoid;
    }

        .legal-clause p {
            color: #000;
        }
}

/*  Lists inside a legal section, and a highlighted aside under them. The
    Terms have neither yet; the Privacy page needs both.  */
.legal-list {
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
    max-width: 80ch;
}

    .legal-list li {
        position: relative;
        padding-left: 26px;
        margin-bottom: 8px;
        font-size: 17px;
        line-height: 1.7;
        color: var(--color-text-muted);
    }

        .legal-list li::before {
            content: "";
            position: absolute;
            left: 4px;
            top: .7em;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--color-accent);
        }

.legal-clause p.legal-note {
    padding: 14px 18px;
    border-left: 3px solid var(--color-accent);
    border-radius: 0 10px 10px 0;
    background: rgba(1, 149, 216, .06);
    color: var(--color-text);
}


/* --- Privacy page ------------------------------------------------- */

/*  Room at the bottom for the cards that overlap the hero's lower edge.  */
.privacy-hero {
    padding-bottom: 74px;
}

.privacy-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
}

.privacy-hero-text .legal-lead {
    max-width: 62ch;
}

.privacy-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 22px;
}

.privacy-download {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 22px;
    font-size: 15px;
}

    .privacy-download svg {
        width: 18px;
        height: 18px;
        flex: none;
    }

/*  A square illustration: shown whole, never cropped.  */
.privacy-hero-image img {
    display: block;
    width: 100%;
    max-width: 440px;
    height: auto;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    object-fit: contain;
}

.privacy-glance {
    margin-top: -26px;
    position: relative;
}

.privacy-glance-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.privacy-glance-card {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 22px 24px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(18, 18, 18, .05);
}

    .privacy-glance-card h2 {
        margin: 0 0 4px;
        font-size: 18px;
        font-weight: 700;
        line-height: 1.3;
    }

    .privacy-glance-card p {
        margin: 0;
        font-size: 15px;
        line-height: 1.6;
        color: var(--color-text-muted);
    }

.privacy-glance-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(1, 149, 216, .1);
    color: var(--color-accent);
}

    .privacy-glance-icon svg {
        width: 24px;
        height: 24px;
    }

.privacy-main {
    padding-top: 40px;
}

@media (max-width: 1024px) {
    .privacy-hero-inner {
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: 36px;
    }

    .privacy-glance-list {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

@media (max-width: 768px) {
    .privacy-hero-inner {
        grid-template-columns: 1fr;
    }

    /*  Decoration. On a phone it would only push the policy further down.  */
    .privacy-hero-image {
        display: none;
    }

    .privacy-hero {
        padding-bottom: 32px;
    }

    .privacy-glance {
        margin-top: 0;
        padding-top: 24px;
    }
}

@media (max-width: 640px) {
    .privacy-download {
        width: 100%;
        justify-content: center;
    }

    .privacy-glance-card {
        padding: 18px;
    }

    .legal-list li {
        font-size: 16px;
    }
}

@media print {
    .privacy-hero-image,
    .privacy-actions,
    .privacy-glance {
        display: none;
    }
}

/* --- 30-day account application ---------------------------------- */

.acct-hero {
    padding-bottom: 74px;
}

.acct-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
}

.acct-hero-image img {
    display: block;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
}

.acct-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

    .acct-benefits li {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 14px;
        background: #fff;
        border: 1px solid rgba(1, 149, 216, .25);
        border-radius: 999px;
        font-size: 14px;
        font-weight: 600;
    }

    .acct-benefits svg {
        width: 16px;
        height: 16px;
        color: var(--color-accent);
    }

.acct-download {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 22px;
    font-size: 15px;
}

    .acct-download svg {
        width: 18px;
        height: 18px;
    }

.acct-eligibility {
    margin-top: -26px;
    position: relative;
}

.acct-elig-card {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 36px;
    align-items: center;
    padding: 20px 26px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(18, 18, 18, .05);
}

    .acct-elig-card h2 {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0;
        font-size: 18px;
        font-weight: 700;
        white-space: nowrap;
    }

/* The question mark beside "Who can apply?". */
.acct-q {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--color-accent);
    color: #fff;
    font-size: 16px;
    font-weight: 800;
}

.acct-elig-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .acct-elig-list li {
        display: flex;
        gap: 9px;
        align-items: center;
        font-size: 15px;
        line-height: 1.4;
        color: var(--color-text-muted);
    }

    .acct-elig-list b {
        color: var(--color-text);
    }

.acct-tick {
    flex: none;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(1, 149, 216, .12);
    color: var(--color-accent);
    font-size: 13px;
    font-weight: 800;
}

.acct-main {
    padding: 44px 0 76px;
}

.acct-wizard {
    max-width: 920px;
    margin: 0 auto;
}

/* Steps: one at a time once the script has run; all at once without it. */
.acct-form.is-wizard .acct-step {
    display: none;
}

    .acct-form.is-wizard .acct-step.is-active {
        display: block;
        animation: acct-step-in .28s ease both;
    }

@keyframes acct-step-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

.acct-progress {
    margin: 0 0 18px;
    padding: 20px 24px 18px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    scroll-margin-top: 24px;
}

    .acct-progress[hidden] {
        display: none;
    }

    .acct-progress ol {
        display: flex;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .acct-progress li {
        position: relative;
        flex: 1;
        min-width: 0;
    }

        /* The line joining each step to the next. */
        .acct-progress li + li::before {
            content: "";
            position: absolute;
            top: 17px;
            right: calc(50% + 22px);
            left: calc(-50% + 22px);
            height: 2px;
            border-radius: 2px;
            background: var(--color-border);
        }

        .acct-progress li.is-done + li::before,
        .acct-progress li.is-done + li.is-current::before {
            background: var(--color-accent);
        }

    .acct-progress button {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        width: 100%;
        padding: 0 4px;
        border: 0;
        background: none;
        color: var(--color-text-muted);
        font: inherit;
        font-size: 13.5px;
        font-weight: 600;
        cursor: pointer;
    }

        .acct-progress button:disabled {
            cursor: default;
        }

        .acct-progress button:focus-visible {
            outline: none;
        }

            .acct-progress button:focus-visible .acct-progress-dot {
                box-shadow: 0 0 0 3px rgba(1, 149, 216, .3);
            }

.acct-progress-dot {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 2px solid var(--color-border);
    border-radius: 50%;
    background: #fff;
    color: var(--color-text-muted);
    font-size: 14px;
    font-weight: 800;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.acct-progress-label {
    max-width: 100%;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.acct-progress li.is-done .acct-progress-dot {
    border-color: var(--color-accent);
    background: rgba(1, 149, 216, .1);
    color: var(--color-accent);
}

.acct-progress li.is-done .acct-progress-label {
    color: var(--color-text);
}

.acct-progress li.is-current .acct-progress-dot {
    border-color: var(--color-accent);
    background: var(--color-accent);
    color: #fff;
    box-shadow: 0 4px 12px rgba(1, 149, 216, .35);
}

.acct-progress li.is-current .acct-progress-label {
    color: var(--color-accent);
}

/* Focus moves to the step heading so screen readers announce it; no ring. */
.acct-card-head:focus {
    outline: none;
}

.acct-progress-caption {
    display: none;
    margin: 12px 0 0;
    text-align: center;
    font-size: 15px;
    color: var(--color-text-muted);
}

.acct-progress-bar {
    height: 6px;
    margin-top: 16px;
    border-radius: 6px;
    background: var(--color-bg-alt);
    overflow: hidden;
}

    .acct-progress-bar span {
        display: block;
        width: 20%;
        height: 100%;
        border-radius: 6px;
        background: var(--color-accent);
        transition: width .3s ease;
    }

.acct-step-nav,
.acct-submit-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
}

.acct-step-nav {
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border);
}

    .acct-step-nav[hidden],
    .acct-back[hidden] {
        display: none;
    }

    .acct-step-nav .btn,
    .acct-submit .btn {
        padding: 13px 30px;
        font-size: 16px;
    }

.acct-back {
    padding: 12px 18px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-button);
    background: #fff;
    color: var(--color-text);
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

    .acct-back:hover {
        border-color: var(--color-text);
    }

.acct-req {
    color: #c0392b;
}

.acct-form-intro {
    margin-bottom: 18px;
}

    .acct-form-intro h2 {
        margin: 0;
        font-size: 28px;
        font-weight: 800;
        letter-spacing: -.01em;
    }

    .acct-form-intro p {
        margin: 4px 0 0;
        font-size: 15px;
        color: var(--color-text-muted);
    }

.acct-alert {
    margin-bottom: 16px;
    padding: 14px 18px;
    border: 1px solid #f1b8b1;
    border-radius: 12px;
    background: #fff5f4;
    color: #9b2c20;
    font-size: 15px;
    font-weight: 600;
}

.acct-card {
    min-width: 0;
    margin: 0 0 16px;
    padding: 26px 30px 28px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    scroll-margin-top: 20px;
}

.acct-card-head {
    display: flex;
    gap: 14px;
    align-items: center;
    float: left;
    width: 100%;
    margin-bottom: 20px;
    padding: 0;
    font-size: 21px;
    font-weight: 700;
}

    .acct-card-head + * {
        clear: both;
    }

    .acct-card-head small {
        display: block;
        font-size: 14px;
        font-weight: 400;
        color: var(--color-text-muted);
    }

.acct-num {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(1, 149, 216, .1);
    color: var(--color-accent);
    font-weight: 800;
}

.acct-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px 18px;
}

.acct-c2 { grid-column: span 2; }
.acct-c3 { grid-column: span 3; }
.acct-c4 { grid-column: span 4; }
.acct-c6 { grid-column: span 6; }

.acct-field label,
.acct-label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
}

.acct-field input {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 13px;
    border: 1px solid #cfd6dc;
    border-radius: 10px;
    background: #fff;
    color: var(--color-text);
    font: inherit;
    font-size: 16px;
}

    .acct-field input:focus {
        outline: none;
        border-color: var(--color-accent);
        box-shadow: 0 0 0 3px rgba(1, 149, 216, .15);
    }

    .acct-field input.input-validation-error {
        border-color: #c0392b;
        background: #fff8f7;
    }

.acct-hint {
    display: block;
    margin-top: 5px;
    font-size: 13px;
    color: var(--color-text-muted);
}

.acct-err {
    display: block;
    margin-top: 5px;
    font-size: 13px;
    font-weight: 600;
    color: #c0392b;
}

    .acct-err:empty {
        display: none;
    }

.acct-money {
    position: relative;
}

    .acct-money span {
        position: absolute;
        left: 13px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--color-text-muted);
    }

    .acct-money input {
        padding-left: 26px;
    }

.acct-row {
    margin-bottom: 12px;
    padding: 16px 18px;
    border: 1px dashed #cfd6dc;
    border-radius: 12px;
}

    .acct-row[hidden] {
        display: none;
    }

.acct-row-title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.acct-remove {
    padding: 0;
    border: 0;
    background: none;
    color: #c0392b;
    font: inherit;
    font-size: 13px;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
}

.acct-add {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1.5px dashed var(--color-accent);
    border-radius: 10px;
    background: none;
    color: var(--color-accent);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

    .acct-add[hidden] {
        display: none;
    }

.acct-terms {
    max-height: 240px;
    overflow: auto;
    margin-bottom: 18px;
    padding: 4px 18px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-bg-alt);
}

    .acct-terms details {
        padding: 12px 0;
        border-bottom: 1px solid var(--color-border);
    }

        .acct-terms details:last-child {
            border-bottom: 0;
        }

    .acct-terms summary {
        font-size: 15px;
        font-weight: 700;
        cursor: pointer;
    }

    .acct-terms details p {
        margin: 8px 0 0;
        font-size: 14.5px;
        line-height: 1.7;
        color: var(--color-text-muted);
    }

.acct-check {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-top: 10px;
    padding: 14px 16px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    font-size: 15px;
    line-height: 1.6;
    cursor: pointer;
}

    .acct-check input {
        flex: none;
        width: 20px;
        height: 20px;
        margin-top: 3px;
        accent-color: var(--color-accent);
    }

.acct-sign-grid {
    margin-top: 18px;
}

.acct-sign {
    position: relative;
    height: 170px;
    border: 1.5px dashed #b9c3cb;
    border-radius: 12px;
    background: #fcfdfe;
}

    .acct-sign canvas {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 12px;
        touch-action: none;
        cursor: crosshair;
    }

.acct-sign-placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 0 20px;
    text-align: center;
    color: #9aa6b0;
    font-size: 15px;
    pointer-events: none;
}

.acct-sign.has-ink .acct-sign-placeholder {
    display: none;
}

.acct-sign-clear {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 5px 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.acct-date {
    padding: 11px 13px;
    border: 1px solid #e3e7ea;
    border-radius: 10px;
    background: var(--color-bg-alt);
    font-size: 16px;
}

.acct-submit {
    margin-top: 22px;
    padding: 20px 22px;
    border: 1px solid rgba(1, 149, 216, .18);
    border-radius: 12px;
    background: linear-gradient(180deg, #eaf6fc 0%, #f5fbfd 100%);
}

    .acct-submit p {
        margin: 0 0 16px;
        font-size: 14.5px;
        line-height: 1.6;
        color: var(--color-text-muted);
    }

    .acct-submit-actions .btn:only-child {
        margin-left: auto;
    }

.acct-done {
    max-width: 720px;
    margin: 0 auto;
    padding: 40px 36px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: #fff;
    text-align: center;
    box-shadow: 0 8px 24px rgba(18, 18, 18, .05);
}

    .acct-done h2 {
        margin: 14px 0 10px;
        font-size: 24px;
    }

    .acct-done p {
        margin: 0;
        line-height: 1.7;
        color: var(--color-text-muted);
    }

.acct-done-icon {
    display: inline-grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #e3f5e8;
    color: #14743a;
    font-size: 26px;
    font-weight: 800;
}

@media (max-width: 1024px) {
    .acct-hero-inner {
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: 32px;
    }

}

@media (max-width: 768px) {
    .acct-hero {
        padding-bottom: 32px;
    }

    .acct-hero-inner {
        grid-template-columns: 1fr;
    }

    .acct-hero-image {
        display: none;
    }

    .acct-eligibility {
        margin-top: 0;
        padding-top: 20px;
    }

    .acct-elig-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 18px 20px;
    }

    .acct-elig-list {
        flex-direction: column;
        gap: 8px;
    }

        .acct-elig-list li {
            align-items: flex-start;
        }

    .acct-grid {
        grid-template-columns: 1fr;
    }

    .acct-c2, .acct-c3, .acct-c4, .acct-c6 {
        grid-column: span 1;
    }

    .acct-card {
        padding: 20px 18px 22px;
    }

    .acct-form-intro h2 {
        font-size: 24px;
    }

    .acct-download {
        width: 100%;
        justify-content: center;
    }

    /* Dots only, with the step named in the caption above the bar. */
    .acct-progress {
        padding: 16px 14px 14px;
    }

    .acct-progress-caption {
        display: block;
    }

    .acct-progress-label {
        display: none;
    }

    .acct-progress-dot {
        width: 30px;
        height: 30px;
        font-size: 13px;
    }

    .acct-progress li + li::before {
        top: 14px;
        right: calc(50% + 18px);
        left: calc(-50% + 18px);
    }

    .acct-step-nav,
    .acct-submit-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

        .acct-step-nav > span:empty {
            display: none;
        }

        .acct-step-nav .btn,
        .acct-submit .btn,
        .acct-back {
            width: 100%;
            justify-content: center;
            text-align: center;
        }
}

@media (prefers-reduced-motion: reduce) {
    .acct-form.is-wizard .acct-step.is-active {
        animation: none;
    }

    .acct-progress-bar span,
    .acct-progress-dot {
        transition: none;
    }
}

@media print {
    .acct-hero-image,
    .acct-progress,
    .acct-step-nav,
    .acct-download {
        display: none;
    }
}

/* ====================================================================
   14. SITE SEARCH
   ==================================================================== */

/*  A magnifier in the header actions that drops the field down as a
    panel underneath. Not a field sitting open in the header: measured at
    every width from 1024 to 1500, there is no room for one. The six nav
    items want 675px on their own, the logo takes 200, and a signed-in
    customer's greeting and icons take another 450 - which already fills
    the 1436px the page allows itself at its widest. A 250px field in
    there pushes the header 22px off the side of a 1400px laptop and
    188px off a 1200px one.

    Two triggers, one icon, and only ever one of them on screen:

      .site-search-link    an ordinary link to /search. What shows when
                           there is no JavaScript, and the page it leads
                           to has a working form of its own.
      .site-search-toggle  the button that opens the panel in place.
                           Hidden in the markup; search.js reveals it and
                           hides the link.

    So the header looks the same either way, and nothing on it is ever a
    control that does nothing.  */

/*  MAKING ROOM FOR IT
    The icon and its gap cost 42px, and the header had none to spare.
    Measured before search existed, with a customer signed in: 66px over
    the page at 1100px wide, 142px over at 1024px, 18px over at 360px.
    The six nav items want 675px on their own and the logo another 200.

    So these four reductions are not only paying for the magnifier, they
    close an overflow that was already there. Nothing changes above
    1280px, where the header has always had room.  */

@media (min-width: 981px) and (max-width: 1279.98px) {
    /*  Only while the nav is still a row. Below 981px it is a stacked
        panel and their own gap:0 must stand.  */
    nav.site-nav {
        gap: 30px;
    }
}

@media (max-width: 1279.98px) {
    .header-actions {
        gap: 14px;
    }

    .user-greeting {
        max-width: 10ch;
    }
}

@media (max-width: 1099.98px) {
    /*  The account icon is right beside it and carries the email in its
        tooltip, so the name is the cheapest thing to drop.  */
    .user-greeting {
        display: none;
    }
}

@media (max-width: 640px) {
    .brand-mark {
        height: 48px;
    }

    .header-actions {
        gap: 12px;
    }
}

/*  Down to a 320px phone. Four icons, a logo and the page gutters add up
    to more than the screen, so everything in the row gives a little.  */
@media (max-width: 400px) {
    .brand-mark {
        height: 40px;
    }

    .header-actions {
        gap: 9px;
    }

    /*  The header row only. The rest of the page keeps its 20px gutter.  */
    header.site-header .wrap {
        gap: 8px;
        padding-left: 14px;
        padding-right: 14px;
    }
}


.site-search {
    position: relative;
    display: flex;
    align-items: center;
}

.site-search-link,
.site-search-toggle {
    display: flex;
}

    .site-search-link[hidden],
    .site-search-toggle[hidden] {
        display: none;
    }

/*  Hangs off the right of the icon. Capped so a wide screen gets a
    sensible panel rather than one the width of the page.  */
.site-search-form {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    display: none;
    align-items: center;
    gap: 8px;
    width: min(420px, calc(100vw - 72px));
    padding: 10px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    box-shadow: 0 14px 34px rgba(18, 18, 18, .14);
    z-index: 25;
}

.site-search.is-open .site-search-form {
    display: flex;
}

.site-search-field {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.site-search-icon {
    position: absolute;
    left: 12px;
    color: var(--color-text-muted);
    pointer-events: none;
}

.site-search-input {
    width: 100%;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.3;
    color: var(--color-text);
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 24px;
    padding: 10px 14px 10px 38px;
    -webkit-appearance: none;
    appearance: none;
}

    .site-search-input::placeholder {
        color: var(--color-text-muted);
    }

    .site-search-input:focus {
        outline: 2px solid var(--color-accent);
        outline-offset: 0;
        border-color: var(--color-accent);
    }

.site-search-go {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-accent-text);
    cursor: pointer;
    transition: opacity .15s ease;
}

    .site-search-go:hover {
        opacity: .88;
    }

    .site-search-go:focus-visible {
        outline: 2px solid var(--color-text);
        outline-offset: 2px;
    }


/*  SUGGESTIONS
    Built by search.js and appended to the form, which is why it is
    positioned against the form rather than the header.  */

.site-search-list {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: min(60vh, 420px);
    overflow-y: auto;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(18, 18, 18, .16);
    z-index: 30;
}

    .site-search-list[hidden] {
        display: none;
    }

.site-search-row {
    display: block;
    border-radius: 8px;
    line-height: 1.35;
}

    .site-search-row.is-active {
        background: rgba(1, 149, 216, .10);
    }

/*  The whole row is the link, so anywhere on it opens the product and a
    right-click anywhere on it gets the browser's link menu.  */
.site-search-row-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: inherit;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

    .site-search-row-link:hover {
        color: inherit;
        text-decoration: none;
    }

.site-search-row-img {
    flex: none;
    width: 48px;
    height: 48px;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 6px;
}

.site-search-row-text {
    min-width: 0;
}

.site-search-row-name {
    display: block;
    font-size: 15px;
    font-weight: 700;
}

.site-search-row-meta {
    display: block;
    font-size: 13px;
    color: var(--color-text-muted);
    margin-top: 1px;
}

.site-search-row mark {
    background: rgba(1, 149, 216, .22);
    color: inherit;
    border-radius: 3px;
    padding: 0 1px;
}

/*  The way through to the full results, so the dropdown is never the
    end of the road.  */
.site-search-more {
    margin-top: 5px;
    padding-top: 2px;
    border-top: 1px solid var(--color-border);
    border-radius: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-accent);
}

/*  Not a choice, so it does not look like one.  */
.site-search-none {
    padding: 12px;
    font-size: 14px;
    color: var(--color-text-muted);
    cursor: default;
}


/*  NARROW: a bar across the header instead of a panel off the icon.

    The magnifier is not near the right-hand edge - the menu, account and
    cart icons sit between it and the gutter - so a panel hung off its
    right corner runs 100px off the left of a 390px screen. Dropping
    position:relative hands the job to header .wrap, which their own
    mobile rules already make a positioning parent for the nav panel.
    Search then drops down the same way the menu does.  */

@media (max-width: 980px) {
    .site-search {
        position: static;
    }

    .site-search-form {
        top: 100%;
        left: 0;
        right: 0;
        width: auto;
        border-top: none;
        border-radius: 0 0 14px 14px;
        box-shadow: 0 8px 20px rgba(18, 18, 18, .12);
    }
}


/*  THE RESULTS PAGE  */

.search-page {
    padding-top: 40px;
}

.search-title {
    font-size: 46px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 24px;
}

.search-page-form {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 640px;
    margin: 0 0 36px;
}

.search-page-field {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.search-page-icon {
    position: absolute;
    left: 17px;
    color: var(--color-text-muted);
    pointer-events: none;
}

.search-page-input {
    width: 100%;
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.3;
    color: var(--color-text);
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 30px;
    padding: 14px 18px 14px 47px;
    -webkit-appearance: none;
    appearance: none;
}

    .search-page-input::placeholder {
        color: var(--color-text-muted);
    }

    .search-page-input:focus {
        outline: 2px solid var(--color-accent);
        outline-offset: 0;
        border-color: var(--color-accent);
    }

.search-page-go {
    flex: none;
    padding: 13px 30px;
    font-size: 16px;
}

/*  A result has no breadcrumb above it, so the card says which range it
    came out of.  */
.search-result-range {
    font-size: 14px;
    color: var(--color-text-muted);
    margin: -2px 0 0;
}

.search-empty {
    max-width: 640px;
    padding: 8px 0 56px;
}

    .search-empty h2 {
        font-size: 26px;
        font-weight: 700;
        margin: 0 0 12px;
    }

    .search-empty p {
        color: var(--color-text-muted);
        font-size: 17px;
        margin: 0 0 24px;
    }

.search-empty-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 26px;
}

    .search-empty-actions .btn {
        padding: 13px 28px;
        font-size: 16px;
    }

.search-empty-call {
    font-size: 16px;
}

    .search-empty-call a {
        color: var(--color-accent);
        font-weight: 700;
    }

@media (max-width: 560px) {
    .search-title {
        font-size: 34px;
    }

    .search-page-form {
        flex-direction: column;
        align-items: stretch;
    }

    .search-page-go {
        width: 100%;
    }

    .search-empty-actions {
        flex-direction: column;
    }

        .search-empty-actions .btn {
            text-align: center;
        }
}


/* ====================================================================
   ACCOUNT PAGES
   Log in, Create account, and every page around them: forgot / reset
   password, confirm email, two-step code, lockout, access denied, sign
   out. One white card on a light blue fade, a round badge on top whose
   colour says what kind of page it is (blue: to do, green: done, amber:
   wait, red: failed), labelled boxes with icons, black main buttons.
   Log in and Create account share one card with a sliding blue panel.
   ==================================================================== */

.acc-page {
    padding: 56px 0 88px;
    background: linear-gradient(180deg, #eef6fb 0%, #ffffff 460px);
}

.acc-card {
    max-width: 520px;
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid rgba(18, 18, 18, .10);
    border-radius: 28px;
    box-shadow: 0 24px 64px rgba(1, 60, 90, .10);
    padding: 44px 44px 36px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* --- Badge -------------------------------------------------------- */

.acc-badge {
    position: relative;
    width: 76px;
    height: 76px;
    margin: 0 auto;
    flex: none;
}

    .acc-badge.has-rings {
        width: 92px;
        height: 92px;
    }

.acc-badge-dot {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, #0195d8 0%, #0172a8 100%);
    box-shadow: 0 12px 28px rgba(1, 149, 216, .32);
}

    .acc-badge-dot svg {
        width: 34px;
        height: 34px;
    }

.acc-badge.is-green .acc-badge-dot {
    background: linear-gradient(160deg, #1f9d6a 0%, #157a52 100%);
    box-shadow: 0 12px 28px rgba(31, 157, 106, .3);
}

.acc-badge.is-red .acc-badge-dot {
    background: linear-gradient(160deg, #c2412d 0%, #a32015 100%);
    box-shadow: 0 12px 28px rgba(194, 65, 45, .3);
}

.acc-badge.is-amber .acc-badge-dot {
    background: linear-gradient(160deg, #e39b1b 0%, #b8770a 100%);
    box-shadow: 0 12px 28px rgba(227, 155, 27, .3);
}

.acc-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(1, 149, 216, .45);
    animation: acc-ripple 3.2s cubic-bezier(.2, .6, .3, 1) infinite;
}

    .acc-ring + .acc-ring {
        animation-delay: 1.6s;
    }

@keyframes acc-ripple {
    from { transform: scale(1); opacity: .8; }
    to { transform: scale(1.9); opacity: 0; }
}

/* The illustration used on Account locked and Access denied. */
.acc-art {
    display: block;
    width: auto;
    height: 190px;
    margin: 0 auto;
}

/* --- Headings and text ------------------------------------------- */

.acc-head {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: center;
}

    .acc-head h1 {
        margin: 0;
        font-size: 34px;
        line-height: 1.1;
        font-weight: 800;
        letter-spacing: -0.02em;
    }

.acc-lead {
    margin: 0 auto;
    max-width: 420px;
    font-size: 16.5px;
    line-height: 1.6;
    color: var(--color-text-muted);
}

    .acc-lead strong {
        color: var(--color-text);
        overflow-wrap: anywhere;
    }

.acc-eyebrow {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.acc-switch {
    margin: 0;
    text-align: center;
    font-size: 15px;
    color: var(--color-text-muted);
}

    .acc-switch a,
    .acc-note a,
    .acc-fine a {
        color: #0172a8;
        font-weight: 700;
    }

.acc-fine {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-text-muted);
}

.acc-hint {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--color-text-muted);
}

    .acc-hint.is-flush {
        margin-top: -6px;
        font-size: 13px;
    }

.acc-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* --- Forms -------------------------------------------------------- */

.acc-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
}

    .acc-form.is-tight {
        gap: 13px;
    }

.acc-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    text-align: left;
}

.acc-label {
    font-size: 14px;
    font-weight: 700;
}

.acc-label-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.acc-small-link {
    font-size: 14px;
    font-weight: 700;
    color: #0172a8;
    text-decoration: none;
}

    .acc-small-link:hover {
        text-decoration: underline;
    }

.acc-input {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    background: #ffffff;
    border: 1px solid rgba(18, 18, 18, .18);
    border-radius: 14px;
    padding: 0 6px 0 14px;
    color: var(--color-text-muted);
    transition: border-color .2s ease, box-shadow .2s ease;
}

    .acc-input > svg {
        flex: none;
    }

    .acc-input:focus-within {
        border-color: var(--color-accent);
        box-shadow: 0 0 0 4px rgba(1, 149, 216, .15);
    }

    .acc-input input {
        flex: 1;
        min-width: 0;
        height: 100%;
        border: 0;
        outline: 0;
        background: transparent;
        font: inherit;
        font-size: 16px;
        color: var(--color-text);
        padding: 0;
        box-shadow: none;
    }

    .acc-input.is-code {
        height: 60px;
        padding: 0 14px;
    }

        .acc-input.is-code input {
            font-family: var(--font-mono);
            font-size: 24px;
            letter-spacing: .35em;
            text-align: center;
        }

    .acc-input.is-code.is-small input {
        font-size: 18px;
        letter-spacing: .2em;
    }

.acc-eye {
    width: 40px;
    height: 40px;
    flex: none;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .acc-eye:hover,
    .acc-eye[aria-pressed="true"] {
        background: var(--color-bg-alt);
        color: var(--color-text);
    }

.acc-check {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    cursor: pointer;
    min-height: 28px;
    text-align: left;
}

    .acc-check input {
        width: 20px;
        height: 20px;
        margin: 0;
        accent-color: var(--color-text);
    }

.acc-err {
    font-size: 13.5px;
    color: #a32015;
    font-weight: 600;
}

    .acc-err.field-validation-valid,
    .acc-err[hidden] {
        display: none;
    }

/* The error box at the top of a form (wrong password and the like). */
.acc-alert {
    background: rgba(163, 32, 21, .07);
    border: 1px solid rgba(163, 32, 21, .28);
    border-radius: 14px;
    padding: 12px 14px;
    font-size: 15px;
    line-height: 1.5;
    color: #7d1a11;
    text-align: left;
}

    .acc-alert ul {
        margin: 0;
        padding-left: 18px;
    }

    .acc-alert.validation-summary-valid,
    .acc-alert[hidden] {
        display: none;
    }

.acc-row2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

    .acc-row2.is-wide-first {
        grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    }

/* Individual / Hospital-Business, with a white pill under the choice. */
.acc-seg {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    background: var(--color-bg-alt);
    border: 0;
    border-radius: 14px;
    padding: 4px;
    margin: 0;
    min-width: 0;
}

    .acc-seg label {
        position: relative;
        z-index: 1;
        cursor: pointer;
    }

    .acc-seg input {
        position: absolute;
        opacity: 0;
        inset: 0;
        margin: 0;
        cursor: pointer;
    }

    .acc-seg label span {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 42px;
        border-radius: 11px;
        font-size: 15px;
        font-weight: 700;
        color: var(--color-text-muted);
        transition: color .25s ease;
        text-align: center;
    }

    .acc-seg input:checked + span {
        color: var(--color-text);
    }

    .acc-seg input:focus-visible + span {
        outline: 3px solid #005fcc;
        outline-offset: 2px;
    }

.acc-seg-pill {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc(50% - 4px);
    background: #ffffff;
    border-radius: 11px;
    box-shadow: 0 2px 8px rgba(18, 18, 18, .12);
    transition: transform .35s cubic-bezier(.65, 0, .35, 1);
}

.acc-seg:has(input[value="Business"]:checked) .acc-seg-pill {
    transform: translateX(100%);
}

.acc-business {
    display: flex;
    flex-direction: column;
    gap: 10px;
    animation: acc-drop .35s ease;
}

    .acc-business[hidden] {
        display: none;
    }

@keyframes acc-drop {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: none; }
}

/* --- Buttons ------------------------------------------------------ */

.acc-btn {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 54px;
    padding: 0 20px;
    border: 1.5px solid var(--color-button);
    border-radius: 16px;
    background: var(--color-button);
    color: var(--color-button-label);
    font-family: inherit;
    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
    transition: background .15s ease, color .15s ease;
}

    .acc-btn:hover {
        background: #333333;
        color: #ffffff;
    }

    .acc-btn.is-ghost {
        background: #ffffff;
        color: var(--color-text);
    }

        .acc-btn.is-ghost:hover {
            background: var(--color-text);
            color: #ffffff;
        }

    .acc-btn:focus-visible,
    .acc-tab:focus-visible,
    .acc-panel-btn:focus-visible {
        outline: 3px solid #005fcc;
        outline-offset: 3px;
    }

.acc-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

    .acc-actions .acc-btn {
        font-size: 16px;
        min-height: 52px;
    }

/* --- Notes and steps --------------------------------------------- */

.acc-note {
    margin: 0;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    text-align: left;
    background: var(--color-bg-promo);
    border-radius: 14px;
    padding: 12px 14px;
    font-size: 15px;
    line-height: 1.55;
    color: #3b3b3b;
}

    .acc-note > svg {
        flex: none;
        margin-top: 2px;
        color: #0172a8;
        width: 18px;
        height: 18px;
    }

    .acc-note.is-error {
        background: rgba(163, 32, 21, .07);
        border: 1px solid rgba(163, 32, 21, .28);
    }

        .acc-note.is-error > svg {
            color: #a32015;
        }

    .acc-note.is-dev {
        background: #fff6e5;
        border: 1px solid #f3d9a4;
    }

.acc-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
}

    .acc-steps li {
        display: flex;
        align-items: center;
        gap: 14px;
        background: var(--color-bg-promo);
        border-radius: 14px;
        padding: 12px 16px;
        font-size: 16px;
        line-height: 1.4;
    }

.acc-step-num {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #e6f4fb;
    color: #0172a8;
    font-weight: 800;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.acc-secure {
    margin: 22px 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--color-text-muted);
    text-align: center;
}

    .acc-secure svg {
        width: 16px;
        height: 16px;
        flex: none;
    }

/* --- Log in / Create account: the sliding card -------------------- */

.acc-slider {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 1120px;
    min-height: 700px;
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid rgba(18, 18, 18, .10);
    border-radius: 32px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(1, 60, 90, .12);
}

.acc-pane {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    padding: 52px 56px;
    min-width: 0;
    transition: opacity .45s ease, transform .6s cubic-bezier(.77, 0, .18, 1);
}

.acc-pane-login {
    grid-column: 1;
    grid-row: 1;
}

.acc-pane-register {
    grid-column: 2;
    grid-row: 1;
    padding: 40px 52px;
    gap: 16px;
}

    .acc-pane-login .acc-head,
    .acc-pane-register .acc-head {
        text-align: left;
    }

    .acc-pane .acc-lead {
        margin: 0;
    }

.acc-h1-sm {
    font-size: 30px !important;
}

/* The side not in use fades back under the panel. */
.acc-slider .acc-pane-register,
.acc-slider.is-register .acc-pane-login {
    opacity: 0;
    transform: translateX(40px);
    pointer-events: none;
}

.acc-slider.is-register .acc-pane-login {
    transform: translateX(-40px);
}

.acc-slider .acc-pane-login,
.acc-slider.is-register .acc-pane-register {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition-delay: .3s, 0s;
}

.acc-slider.is-register .acc-pane-register {
    pointer-events: auto;
}

/* The blue panel. Its inner edge curves, and flips as it crosses, so it
   reads like water rolling over. */
.acc-panel {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 50%;
    z-index: 2;
    overflow: hidden;
    color: #ffffff;
    background: linear-gradient(160deg, #0195d8 0%, #26a4df 55%, #4fb6e6 100%);
    transform: translateX(100%);
    border-radius: 220px 0 0 220px / 50% 0 0 50%;
    transition: transform .8s cubic-bezier(.77, 0, .18, 1),
                border-radius .8s cubic-bezier(.77, 0, .18, 1);
}

.acc-slider.is-register .acc-panel {
    transform: translateX(0);
    border-radius: 0 220px 220px 0 / 0 50% 50% 0;
}

/* Water ripples across the panel after a button press, drawn by
   js/auth-water.js into this canvas, under the panel's text and button. */
.acc-water {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}

.acc-panel-copy {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 56px;
    text-align: center;
    transition: opacity .4s ease, transform .5s ease;
}

    .acc-panel-copy h2 {
        margin: 0;
        max-width: 380px;
        font-size: 34px;
        line-height: 1.12;
        font-weight: 800;
        letter-spacing: -0.01em;
    }

    .acc-panel-copy p {
        margin: 0;
        max-width: 360px;
        font-size: 16px;
        line-height: 1.6;
        color: #ffffff;
    }

.acc-panel-eyebrow {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .8);
}

.acc-panel-for-register,
.acc-slider.is-register .acc-panel-for-login {
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition-delay: 0s;
}

.acc-panel-for-login,
.acc-slider.is-register .acc-panel-for-register {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition-delay: .4s;
}

.acc-panel-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 28px;
    border: 1.5px solid rgba(255, 255, 255, .85);
    border-radius: 16px;
    color: #ffffff;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    transition: background .2s ease, color .2s ease;
}

    .acc-panel-btn:hover {
        background: #ffffff;
        color: #0172a8;
    }

/* Click splashes, made by auth-slider.js. */
.acc-splash {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    background: rgba(255, 255, 255, .35);
    pointer-events: none;
    animation: acc-splash .7s ease-out forwards;
}

@keyframes acc-splash {
    to { transform: scale(1); opacity: 0; }
}

/* Tabs and phone-only links: phones only. */
.acc-tabs,
.acc-phone-only {
    display: none;
}

@media (max-width: 899px) {
    .acc-slider {
        display: block;
        min-height: 0;
        border-radius: 24px;
        padding: 12px;
    }

    .acc-panel {
        display: none;
    }

    .acc-tabs {
        position: relative;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        background: var(--color-bg-alt);
        border-radius: 14px;
        padding: 4px;
    }

    .acc-tabs-pill {
        position: absolute;
        top: 4px;
        bottom: 4px;
        left: 4px;
        width: calc(50% - 4px);
        background: #ffffff;
        border-radius: 11px;
        box-shadow: 0 2px 8px rgba(18, 18, 18, .12);
        transition: transform .35s cubic-bezier(.65, 0, .35, 1);
    }

    .acc-slider.is-register .acc-tabs-pill {
        transform: translateX(100%);
    }

    .acc-tab {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 44px;
        border-radius: 11px;
        font-weight: 700;
        font-size: 15px;
        color: var(--color-text-muted);
        text-decoration: none;
    }

        .acc-tab[aria-selected="true"] {
            color: var(--color-text);
        }

    .acc-phone-only {
        display: block;
    }

    .acc-pane,
    .acc-pane-register {
        padding: 24px 8px 12px;
        gap: 16px;
    }

        .acc-slider .acc-pane-register,
        .acc-slider.is-register .acc-pane-login {
            display: none;
        }

        .acc-slider .acc-pane-login,
        .acc-slider.is-register .acc-pane-register {
            display: flex;
            animation: acc-drop .35s ease;
        }
}

/* --- Phones ------------------------------------------------------- */

@media (max-width: 560px) {
    .acc-page {
        padding: 24px 0 56px;
    }

    .acc-card {
        padding: 30px 20px 24px;
        border-radius: 22px;
        gap: 18px;
    }

    .acc-head h1 {
        font-size: 28px;
    }

    .acc-h1-sm {
        font-size: 26px !important;
    }

    .acc-lead {
        font-size: 16px;
    }

    .acc-actions,
    .acc-row2,
    .acc-row2.is-wide-first {
        grid-template-columns: 1fr;
    }

    .acc-art {
        height: 150px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .acc-ring {
        animation: none;
        opacity: 0;
    }

    .acc-panel,
    .acc-pane,
    .acc-panel-copy,
    .acc-seg-pill,
    .acc-tabs-pill {
        transition-duration: .01ms;
        transition-delay: 0s;
    }

    .acc-business,
    .acc-pane {
        animation: none;
    }
}


/* ====================================================================
   ACCOUNT AREA: WELCOME BANNER AND PROFILE STAT CARDS
   The banner is the photograph with the name centred and a white Log out
   button; it heads every account page. The four stat cards sit on a
   light brand-blue fill with a small icon each.
   ==================================================================== */

.account-welcome {
    border-radius: 6px;
    background: #dfe5ea url("/images/angel-products-account-banner.jpg") center right / cover no-repeat;
    text-align: center;
    padding: 52px 24px 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

    .account-welcome h1 {
        margin: 0;
        font-size: 40px;
        font-weight: 800;
        line-height: 1.15;
        color: var(--color-text);
        overflow-wrap: anywhere;
    }

    .account-welcome p {
        margin: 0;
        max-width: 660px;
        font-size: 19px;
        line-height: 1.6;
        color: #2b2b2b;
    }

    .account-welcome form {
        margin: 8px 0 0;
    }

.account-welcome-logout {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    color: #0172a8;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 16px;
    border: 0;
    border-radius: 6px;
    padding: 15px 30px;
    box-shadow: 0 2px 10px rgba(18, 18, 18, .06);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

    .account-welcome-logout:hover {
        background: var(--color-accent);
        color: #ffffff;
    }

    .account-welcome-logout:focus-visible {
        outline: 3px solid #005fcc;
        outline-offset: 3px;
    }

.account-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.account-tile {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 20px 22px;
    border: 1px solid #9cc4f5;
    border-radius: var(--radius-card);
    background: #f0f6ff;
    color: inherit;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}

a.account-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(1, 149, 216, .12);
}

a.account-tile:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 3px;
}

.account-tile-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 8px;
    border-radius: 10px;
    background: #ffffff;
    color: #0172a8;
    display: flex;
    align-items: center;
    justify-content: center;
}

.account-tile-value {
    font-size: 30px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--color-text);
    overflow-wrap: anywhere;
}

    .account-tile-value.is-small {
        font-size: 22px;
    }

.account-tile-label {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/*  One light tint per card, the same pastels as the admin dashboard's
    stat cards (admin.css, TINTS), each with a matching border and icon.  */
.account-tile.is-blue { background: #f0f6ff; border-color: #9cc4f5; }
.account-tile.is-green { background: #f2fbef; border-color: #a6d894; }
.account-tile.is-amber { background: #fff8ef; border-color: #f0bf85; }
.account-tile.is-violet { background: #f8f1ff; border-color: #c8a2ef; }

.account-tile.is-blue .account-tile-icon { background: #dbe9ff; color: #1b579c; }
.account-tile.is-green .account-tile-icon { background: #dcf2d3; color: #3a7429; }
.account-tile.is-amber .account-tile-icon { background: #ffe7cc; color: #96591b; }
.account-tile.is-violet .account-tile-icon { background: #ecdcfb; color: #63368f; }

a.account-tile.is-blue:hover { border-color: #5e9ee8; }
a.account-tile.is-green:hover { border-color: #79c060; }
a.account-tile.is-amber:hover { border-color: #e2a052; }

@media (max-width: 1100px) {
    .account-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .account-welcome {
        padding: 32px 18px 30px;
        background-position: 38% center;
    }

        .account-welcome h1 {
            font-size: 28px;
        }

        .account-welcome p {
            font-size: 16px;
        }

    .account-welcome-logout {
        padding: 13px 26px;
    }

    .account-tiles {
        gap: 12px;
    }

    .account-tile {
        padding: 16px;
    }

    .account-tile-value {
        font-size: 26px;
    }

        .account-tile-value.is-small {
            font-size: 19px;
        }
}

@media (prefers-reduced-motion: reduce) {
    .account-tile,
    .account-welcome-logout {
        transition: none;
    }
}