@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;
}


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%;
}

.hero-anim {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    opacity: 0;
    transition: opacity .7s ease;
    pointer-events: none;
}

    .hero-anim.is-active {
        opacity: 1;
    }


.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;
}

.go-back {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--color-accent);
    font-weight: 600;
    text-decoration: none;
    margin-bottom: 36px;
}

    .go-back:hover {
        text-decoration: underline;
    }

.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);
}


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

.subcategory-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;
}

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

    .subcategory-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;
    }


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

    .subcategory-card .label {
        background: var(--color-bg-alt);
        padding: 20px 18px;
        font-weight: 700;
        font-size: 17px;
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 1;
    }

        .subcategory-card .label .arrow {
            transition: transform .15s ease;
        }

    .subcategory-card:hover .label .arrow {
        transform: translateX(4px);
    }


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

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

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


.colour-count {
    font-size: 15px;
    color: #4a5568;
    margin: .15rem 0 .35rem;
}


/* ====================================================================
   05. PRODUCT PAGE
   ==================================================================== */


.download-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
}

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

.product-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 64px;
    align-items: start;
}


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

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


.product-sku {
    color: var(--color-accent);
    font-weight: 700;
    font-size: 19px;
    letter-spacing: 0.02em;
}

.product-title {
    color: var(--color-accent);
    font-size: 44px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 10px 0 28px;
    line-height: 1.1;
}

.option-block {
    margin-bottom: 26px;
}

.option-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 12px;
}


.pack-options {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.pack-pill {
    border: 1px solid var(--color-border);
    border-radius: 28px;
    background: #fff;
    padding: 13px 24px;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

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

    .pack-pill.selected {
        background: #d9d9d9;
        border-color: #d9d9d9;
    }

    .pack-pill:focus-visible {
        outline: 2px solid var(--color-accent);
        outline-offset: 2px;
    }


.qty-stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    overflow: hidden;
}

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


.product-price {
    font-size: 36px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 32px 0 4px;
}

.price-note {
    color: var(--color-text-muted);
    font-size: 15px;
    margin: 0 0 28px;
    min-height: 22px;
}


.add-to-cart-form {
    margin-bottom: 36px;
}

.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;
    }


.key-features {
    background: var(--color-bg-alt);
    border-radius: 4px;
    padding: 30px 34px;
}

    .key-features h2 {
        font-size: 20px;
        font-weight: 700;
        margin: 0 0 14px;
    }

    .key-features ul {
        margin: 0;
        padding-left: 22px;
    }

    .key-features li {
        margin-bottom: 8px;
    }

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

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

.pack-hint-link {
    background: none;
    border: none;
    padding: 0;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 700;
    color: var(--color-accent);
    text-decoration: underline;
    cursor: pointer;
    white-space: nowrap;
}

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

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

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

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

.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;
    }

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

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


.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);
}
.stock-box {
    border-radius: 4px;
    padding: 14px 16px;
    font-size: 15px;
    line-height: 1.55;
    margin: 0 0 24px;
    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: rgba(138, 83, 0, 0.08);
        border: 1px solid rgba(138, 83, 0, 0.3);
    }

    /*  Colour on the status and the links only. A whole paragraph in red reads as
    an error page; the sentence is ordinary text carrying an ordinary offer.
 
    The state is also written out in words - "Out of stock", "Low stock" - so
    nothing here depends on telling red from amber.  */
    .stock-box.stock-out strong,
    .stock-box.stock-out a {
        color: #a32015;
    }

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

    /*  Matched to .pack-hint-link, including the nowrap: a phone number broken
    across two lines is a phone number nobody can read back.  */
    .stock-box a {
        font-weight: 700;
        text-decoration: underline;
        white-space: nowrap;
    }

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

/*  The hint's own links are anchors now, not only buttons. Reset so they do
    not fall back to the browser's default blue.  */
a.pack-hint-link {
    color: var(--color-accent);
    text-decoration: underline;
}

/*  A pack the stock cannot fill. Still legible rather than ghosted away: it
    tells the customer the size exists and is simply not available today, which
    is the thing that prompts the phone call.  */
.pack-pill:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

    .pack-pill:disabled:hover {
        border-color: var(--color-border);
        background: none;
    }
 

/*  COMING SOON
    Stands in for the price, quantity stepper and Add to cart button on a
    product that has no price yet. Those controls are still in the markup,
    hidden, so product.js has everything it expects to find.  */

.product-coming-soon {
    border: 1px solid rgba(1, 149, 216, .3);
    background: rgba(1, 149, 216, .06);
    border-radius: 6px;
    padding: 26px 28px;
    margin: 32px 0 36px;
}

.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;
}

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


@media (max-width: 560px) {
    .product-coming-soon {
        padding: 20px 18px;
    }
}


/* ====================================================================
   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: inherit;
    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;
    color: var(--color-text-muted);
}

.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: 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: 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;
}


.shipping-option-was {
    color: #718096;
    font-weight: 400;
    font-size: .85em;
    text-decoration: line-through;
}


.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: 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: var(--color-bg-alt);
        border-left-color: var(--color-accent);
        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-hero-panel {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    color: #fff;
    background-color: #036fa3;
    background-image: url("/images/angel-products-account-banner.jpg");
    background-size: cover;
    background-position: center;
}


    /*  Ends at 64% rather than carrying a .25 tint all the way across, so
        the right-hand third of the banner is the photograph itself. Solid
        under the name, the email and the badges, which all finish well
        inside 40%.  */
    .account-hero-panel::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(100deg, rgba(1, 149, 216, .97) 0%, rgba(1, 149, 216, .94) 24%, rgba(56, 173, 227, .78) 38%, rgba(118, 200, 238, .54) 49%, rgba(180, 223, 245, .30) 58%, rgba(226, 242, 251, .12) 66%, rgba(255, 255, 255, 0) 74%);
    }

.account-hero-inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 38px 40px;
}

.account-avatar {
    flex: none;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    border: 2px solid rgba(255, 255, 255, .5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 27px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.account-hero-text {
    flex: 1;
    min-width: 0;
}

    .account-hero-text h1 {
        font-size: 32px;
        font-weight: 800;
        letter-spacing: -0.02em;
        margin: 0 0 4px;
        color: #fff;
    }

.account-hero-email {
    margin: 0;
    font-size: 15px;
    color: rgba(255, 255, 255, .88);
    overflow-wrap: anywhere;
}

.account-hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.hero-badge {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, .55);
    font-size: 13px;
    font-weight: 600;
}

.hero-badge-solid {
    background: #fff;
    border-color: #fff;
    color: #036fa3;
    font-weight: 700;
}

.account-hero-logout {
    flex: none;
}

/*  Dark rather than the old white .14, because this button now sits on the
    uncovered part of the banner. A white wash on a pale photograph leaves
    white text on near-white; a dark one gives it something to sit on
    wherever it lands.  */
.hero-logout-btn {
    background: rgba(8, 44, 66, .45);
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 24px;
    color: #fff;
    padding: 11px 24px;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 2px 10px rgba(8, 44, 66, .28);
    /*  Takes the busyness out of whatever is behind it. Ignored where it is
        not supported, which only loses the blur - the fill still carries it. */
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

    .hero-logout-btn:hover {
        background: rgba(8, 44, 66, .62);
    }


.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 var(--color-border);
    border-radius: var(--radius-card);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
    white-space: nowrap;
}

    .order-invoice-btn:hover {
        border-color: var(--color-accent);
        color: var(--color-accent);
    }


.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: var(--color-accent);
        background: rgba(1, 149, 216, .035);
    }

.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 Tax invoice, 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: 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: clamp(30px, 2rem + 1.6vw, 46px);
    font-weight: 800;
    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: 48px;
}

    footer.site-footer .wrap {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
        padding-top: 40px;
        padding-bottom: 32px;
    }

    footer.site-footer h4 {
        font-size: 18px;
        letter-spacing: 0.06em;
        margin: 0 0 12px;
    }

    footer.site-footer p, footer.site-footer a {
        font-size: 17px;
        opacity: 0.92;
        text-decoration: none;
        line-height: 2;
        color: #FAF9F6;
    }

        footer.site-footer a:hover {
            text-decoration: underline;
            color: white;
        }


.social-links {
    display: flex;
    align-items: center;
    gap: 12px;
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
}

    .social-links a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        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: 19px;
        height: 19px;
        display: block;
    }


.footer-logo {
    height: 72px;
    width: auto;
    margin-bottom: 16px;
    display: block;
}

footer.site-footer h4:first-of-type {
    margin-top: 0;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 14px;
    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: 14px;
    padding: 16px 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: 32px;
    }
}

@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;
    }

        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: 28px;
    }

    .auth-page-card {
        padding: 28px;
    }


    footer.site-footer .wrap > div + div {
        border-top: 1px solid rgba(255, 255, 255, 0.42);
        padding-top: 24px;
    }

    .product-detail {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .product-title {
        font-size: 32px;
    }

    .product-price {
        font-size: 28px;
    }

    .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;
    }

    .subcategory-grid,
    .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: rgba(1, 149, 216, .07);
            color: var(--color-accent);
        }

            .account-nav-link.active::after {
                border-color: var(--color-accent);
            }


    .account-card {
        padding: 22px 18px;
    }

        .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;
    }

    .account-hero-inner {
        padding: 28px 26px;
        gap: 18px;
    }

    .account-hero-text h1 {
        font-size: 26px;
    }

    .account-avatar {
        width: 60px;
        height: 60px;
        font-size: 22px;
    }

    .hero-logout-btn {
        padding: 10px 20px;
        font-size: 14px;
    }
}

@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: 38px;
            height: 38px;
        }

    .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-panel::before {
        /*  #0195D8, same as the wide layout. Still mostly opaque: on a phone
            the name, the email and the badges fill the whole panel, so there
            is no spare width to open up for the photograph.  */
        background: linear-gradient(160deg, rgba(1, 149, 216, .96) 0%, rgba(1, 149, 216, .88) 55%, rgba(86, 190, 232, .74) 100%);
    }

    .account-hero {
        padding: 16px 16px 0;
    }

    .account-hero-inner {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 14px;
        padding: 22px 20px;
    }

    .account-avatar {
        width: 48px;
        height: 48px;
        font-size: 18px;
        border-width: 1.5px;
    }

    .account-hero-text {
        flex: 1 1 auto;
        min-width: 0;
    }

        .account-hero-text h1 {
            font-size: 21px;
            line-height: 1.2;
        }

    .account-hero-email {
        font-size: 13px;
    }

    .account-hero-badges {
        margin-top: 9px;
    }

    .hero-badge {
        padding: 4px 11px;
        font-size: 12px;
    }


    .account-hero-logout {
        flex: 0 0 auto;
        width: auto;
        margin-left: 62px;
    }

    .hero-logout-btn {
        width: auto;
        padding: 8px 18px;
        font-size: 13px;
    }


    .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: 52px 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: clamp(30px, 2rem + 1.6vw, 46px);
    font-weight: 800;
    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: 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: 90px;
}

    .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: 90px;
    }

        .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;
    }
}

/* ====================================================================
   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;
    padding: 9px 12px;
    border-radius: 8px;
    line-height: 1.35;
    cursor: pointer;
}

    .site-search-row.is-active {
        background: rgba(1, 149, 216, .10);
    }

.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: 11px;
    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;
        }
}