:root {
    --teal: #063f3b;
    --deep: #022e2b;
    --cream: #f8f4ea;
    --gold: #c89b3c;
    --ink: #17332f;
    --muted: #63736f
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    color: var(--ink);
    font-family: "DM Sans",sans-serif;
    font-size: 17px;
    line-height: 1.6
}

.scroll-to-top {
    position: fixed;
    right: clamp(16px,3vw,34px);
    bottom: clamp(16px,3vw,34px);
    z-index: 80;
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border: 1px solid #d4af58;
    border-radius: 50%;
    background: var(--teal);
    color: #fff;
    box-shadow: 0 12px 30px #022e2b3d;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity .2s ease,transform .2s ease,background .2s ease
}

    .scroll-to-top.visible {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0)
    }

    .scroll-to-top:hover, .scroll-to-top:focus-visible {
        background: var(--gold)
    }

@media(prefers-reduced-motion:reduce) {
    .scroll-to-top {
        transition: none
    }
}

a {
    color: inherit;
    text-decoration: none
}

button {
    font: inherit
}

.announcement {
    height: 31px;
    padding: 9px;
    text-align: center;
    background: var(--deep);
    color: #dce8df;
    font-size: 15px;
    letter-spacing: .16em;
    text-transform: uppercase
}

    .announcement span {
        color: var(--gold);
        padding: 0 12px
    }

.site-header {
    height: 100px;
    padding: 0 clamp(22px,6vw,88px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #dfe7e3;
    position: relative;
    z-index: 10;
    background: #fff
}

.logo img {
    width: 225px;
    height: 88px;
    object-fit: contain
}

.site-header nav {
    display: flex;
    gap: 36px;
    font-size: 15px
}

    .site-header nav a:hover {
        color: var(--gold)
    }

.cart-trigger {
    border: 1px solid var(--teal);
    background: none;
    text-transform: uppercase;
    letter-spacing: .12em;
    padding: 12px 16px;
    font-size: 15px;
    cursor: pointer
}

    .cart-trigger span {
        background: var(--teal);
        color: #fff;
        border-radius: 50%;
        display: inline-grid;
        place-items: center;
        width: 20px;
        height: 20px;
        margin-left: 9px
    }

.hero {
    display: grid;
    grid-template-columns: 47% 53%;
    min-height: 690px;
    background: linear-gradient(120deg,#eef4ef,#f8f5ea)
}

.hero-copy {
    padding: 110px 6vw;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.eyebrow {
    text-transform: uppercase;
    color: #98742e;
    letter-spacing: .22em;
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 22px
}

.hero h1, .section h2, .story h2, .contact h2 {
    font: 500 clamp(56px,6vw,88px)/.96 "Playfair Display",serif;
    letter-spacing: -.04em;
    color: var(--teal);
    margin: 0
}

    .hero h1 em, .section h2 em, .mission h2 em, .story h2 em, .contact h2 em {
        color: var(--gold);
        font-weight: 500
    }

.lead {
    color: #49635e;
    max-width: 620px;
    font: 19px/1.7 "Playfair Display",serif;
    margin: 28px 0
}

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

.btn {
    display: inline-flex;
    padding: 16px 21px;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 15px;
    font-weight: 700;
    border: 0;
    cursor: pointer
}

.btn-gold {
    background: var(--gold);
    color: white
}

    .btn-gold:hover {
        background: #b7882f
    }

.btn-outline {
    border: 1px solid var(--gold);
    color: var(--teal)
}

.underlink {
    border-bottom: 1px solid #9caea8;
    padding: 10px 0;
    text-transform: uppercase;
    font-size: 15px;
    letter-spacing: .1em
}

.trust {
    display: flex;
    gap: 22px;
    margin-top: 38px;
    color: #58706b;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: 15px
}

    .trust span:before {
        content: "✓";
        color: var(--gold);
        margin-right: 7px
    }

.hero-visual {
    background: var(--deep) url(/images/vitalreach-hero-black-jacket.jpeg) center/cover no-repeat;
    position: relative
}

.promise {
    position: absolute;
    left: -30px;
    bottom: 55px;
    background: #fff;
    padding: 24px 28px;
    box-shadow: 0 18px 40px #0b2d2925
}

    .promise small {
        display: block;
        text-transform: uppercase;
        letter-spacing: .16em;
        color: #98742e;
        font-size: 15px;
        margin-bottom: 8px
    }

    .promise strong {
        font: 500 18px/1.35 "Playfair Display",serif;
        color: var(--teal)
    }

.mission {
    padding: 70px 7vw;
    background: var(--cream);
    display: grid;
    grid-template-columns: 135px 1fr auto;
    gap: 45px;
    align-items: center
}

.mission-badge {
    width: 120px;
    height: 120px;
    border: 1px solid var(--gold);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 7px #fff;
    text-align: center
}

    .mission-badge b {
        font: 32px "Playfair Display",serif;
        color: var(--gold)
    }

    .mission-badge span {
        font-size: 15px;
        letter-spacing: .12em;
        text-transform: uppercase
    }

.mission h2 {
    font: 500 clamp(36px,4vw,58px)/1.05 "Playfair Display",serif;
    color: var(--teal);
    margin: 0 0 17px
}

.mission p:last-child {
    font: 15px/1.65 "Playfair Display",serif;
    color: var(--muted);
    max-width: 720px
}

.ticker {
    height: 55px;
    background: var(--teal);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-around;
    text-transform: uppercase;
    letter-spacing: .2em;
    font-size: 15px
}

    .ticker i {
        color: var(--gold)
    }

.section {
    padding: 105px 6vw
}

.section-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-bottom: 48px
}

    .section-heading h2 {
        font-size: clamp(48px,5vw,68px)
    }

    .section-heading > p {
        max-width: 430px;
        color: var(--muted);
        font: 18px/1.7 "Playfair Display",serif
    }

.products {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 16px
}

.featured-carousel-controls {
    display: none
}

.product {
    min-height: 350px;
    display: flex;
    flex-direction: column;
    background: #f2f4ef;
    padding: 12px 12px 23px
}

    .product > a:first-child {
        display: block
    }

.product-art {
    height: 310px;
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg,#c8dbd1,#f0ead9)
}

.gold-product .product-art {
    background: linear-gradient(145deg,#f0dca8,#8c6a27)
}

.pearl-product .product-art {
    background: linear-gradient(145deg,#fbf7ed,#d5cdbd)
}

.berry-product .product-art {
    background: linear-gradient(145deg,#dfc4bf,#7e2942)
}

.halo {
    position: absolute;
    width: 170px;
    height: 170px;
    border: 1px solid #ffffffa6;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: white;
    font: italic 17px "Playfair Display",serif
}

.bottle {
    z-index: 1;
    width: 112px;
    height: 188px;
    background: #fdfcf5;
    border-radius: 12px 12px 20px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 13px 8px;
    box-shadow: 0 25px 35px #113c342c;
    position: relative
}

    .bottle:before {
        content: "";
        width: 64px;
        height: 16px;
        background: var(--gold);
        position: absolute;
        top: -13px;
        border-radius: 3px 3px 0 0
    }

    .bottle b {
        width: 32px;
        height: 32px;
        border: 1px solid var(--gold);
        border-radius: 50%;
        display: grid;
        place-items: center;
        color: var(--gold);
        background: var(--teal);
        font: 17px "Playfair Display",serif
    }

    .bottle small {
        color: var(--teal);
        font-size: 13px;
        letter-spacing: .12em;
        margin-top: 7px
    }

    .bottle i {
        text-align: center;
        color: var(--teal);
        font: italic 13px/1.1 "Playfair Display",serif;
        margin-top: 14px
    }

    .bottle span {
        margin-top: auto;
        font-size: 0.5rem;
        letter-spacing: .12em
    }

.category {
    color: #a17b31;
    text-transform: uppercase;
    letter-spacing: .15em;
    font-size: 15px;
    margin: 19px 8px 6px
}

.product h3 {
    font: 500 21px/1.2 "Playfair Display",serif;
    color: var(--teal);
    margin: 0 8px;
}

@media (min-width: 980px) {
    .product h3 {
     min-height: 51px
    }
}

.benefit {
    color: #73827e;
    font-size: 15px;
    margin: 7px 8px 17px
}

.product-card-footer {
    margin-top: auto;
    margin-bottom: 0
}

.price-row {
    margin: 0 8px 14px;
    padding-top: 13px;
    border-top: 1px solid #d5ddd8;
    display: flex;
    justify-content: space-between;
    align-items: center
}

    .price-row strong {
        font: 500 17px "Playfair Display",serif;
        color: var(--teal)
    }

    .price-row span {
        font-size: 15px;
        text-transform: uppercase;
        letter-spacing: .1em;
        color: #98742e
    }

.add-cart {
    display: flex;
    width: calc(100% - 16px);
    justify-content: space-between;
    margin: 0 8px;
    padding: 13px;
    background: var(--teal);
    color: #fff;
    border: 0;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 15px;
    cursor: pointer
}

    .add-cart:hover {
        background: var(--gold)
    }

.disclaimer {
    text-align: center;
    color: #7a8986;
    font-size: 15px;
    max-width: 800px;
    margin: 24px auto 0
}

.story {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 650px;
    background: var(--deep);
    color: white
}

.story-art {
    background: radial-gradient(circle at 50% 44%,#ffffff 0 22%,transparent 52%), linear-gradient(145deg,#f9f6ec,#dfeae4);
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden
}

.story-constellation {
    position: relative;
    width: min(88%,560px);
    aspect-ratio: 1;
    display: grid;
    place-items: center
}

    .story-constellation:before, .story-constellation:after {
        content: "";
        position: absolute;
        width: 150px;
        height: 200px;
        border: 1px solid #063f3b;
        border-radius: 100% 0 100% 0;
        transform: rotate(28deg)
    }

    .story-constellation:before {
        left: 2%;
        bottom: 13%
    }

    .story-constellation:after {
        right: 2%;
        top: 10%;
        transform: rotate(208deg)
    }

.story-orbit {
    position: absolute;
    border: 1px solid #063f3b;
    border-radius: 50%
}

.orbit-one {
    width: 88%;
    height: 88%;
}

.orbit-two {
    width: 100%;
    height: 100%;
    border-style: dashed
}

.story-logo-card {
    position: relative;
    z-index: 2;
    width: 80%;
    padding: 26px 22px 18px;
    background: #fffef9;
    box-shadow: 0 25px 65px #35534c38;
    text-align: center;
    transform: rotate(-2deg)
}

    .story-logo-card:after {
        content: "";
        position: absolute;
        inset: 8px;
        border: 1px solid #c99c3b4d;
        pointer-events: none
    }

    .story-logo-card img {
        position: relative;
        z-index: 1;
        display: block;
        width: 100%;
        aspect-ratio: 500/379;
        object-fit: contain
    }

    .story-logo-card small {
        position: relative;
        z-index: 1;
        display: block;
        color: #98742e;
        text-transform: uppercase;
        letter-spacing: .16em;
        font-size: 15px
    }

.story-value {
    position: absolute;
    z-index: 3;
    min-width: 250px;
    min-height: 90px;
    padding: 12px 14px;
    border: 1px solid #bf943b73;
    background: #fffdf2f2;
    box-shadow: 0 12px 30px #315b5140
}

    .story-value > span {
        float: left;
        margin: 1px 9px 15px 0;
        color: var(--gold)
    }

    .story-value b, .story-value small {
        display: block
    }

    .story-value b {
        color: var(--teal);
        font: 500 15px "Playfair Display",serif
    }

    .story-value small {
        margin-top: 3px;
        color: #657c76;
        font-size: 15px;
        text-transform: uppercase;
        letter-spacing: .08em
    }

        .story-value small:last-child {
            margin-left: 25px;
            margin-top: -5px;
        }

.story-value-care {
    left: -150px;
    top: 17%
}

.story-value-roots {
    right: -170px;
    top: 24%
}

.story-value-wellness {
    left: 25%;
    bottom: 0%
}

.story-art .seal {
    background: var(--teal);
    color: #fff
}

.seal {
    position: absolute;
    right: 0;
    bottom: 60px;
    background: var(--cream);
    color: var(--teal);
    padding: 25px 35px;
    font-size: 15px;
    letter-spacing: .14em;
    line-height: 1.7
}

.story-copy {
    padding: 90px 8vw 80px 7vw
}

.light {
    color: #dbbd73
}

.story h2, .contact h2 {
    color: #fff;
    font-size: clamp(48px,5vw,68px)
}

.story-copy > p:not(.eyebrow) {
    font: 16px/1.8 "Playfair Display",serif;
    color: #cad8d4
}

.founder {
    border-top: 1px solid #35605c;
    display: flex;
    gap: 13px;
    align-items: center;
    margin-top: 34px;
    padding-top: 24px
}

    .founder > span {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: var(--gold);
        display: grid;
        place-items: center;
        font: 17px "Playfair Display",serif
    }

    .founder div {
        display: flex;
        flex-direction: column;
        gap: 5px
    }

    .founder small {
        font-size: 15px;
        text-transform: uppercase;
        letter-spacing: .16em;
        color: #a9beb8
    }

.guide {
    background: var(--teal);
    color: #fff;
    padding: 90px 7vw;
    display: grid;
    grid-template-columns: 40% 60%;
    gap: 7vw
}

.guide-intro h2 {
    font: 500 clamp(42px,5vw,65px)/1.02 "Playfair Display",serif;
    margin: 0
}

.guide-intro > p:not(.eyebrow) {
    font: 16px/1.7 "Playfair Display",serif;
    color: #c8d8d4;
    margin: 24px 0 30px
}

.guide-list article {
    display: grid;
    grid-template-columns: 55px 1fr;
    gap: 20px;
    padding: 26px 0;
    border-top: 1px solid #47736e
}

    .guide-list article > b {
        color: var(--gold);
        font: 20px "Playfair Display",serif
    }

.guide-list small {
    color: #dbbd73;
    letter-spacing: .16em;
    font-size: 15px
}

.guide-list h3 {
    font: 500 25px "Playfair Display",serif;
    margin: 7px 0
}

.guide-list p {
    color: #c8d8d4;
    font: 15px/1.6 "Playfair Display",serif;
    margin: 0
}

.contact {
    background: #f5f1e6;
    padding: 85px 7vw;
    display: grid;
    grid-template-columns: 58% 42%;
    align-items: center
}

    .contact h2 {
        color: var(--teal)
    }

    .contact > div:last-child {
        border-left: 1px solid #c8d0c9;
        padding-left: 60px
    }

        .contact > div:last-child > p {
            font: 41px/1.7 "Playfair Display",serif;
            color: var(--muted)
        }

address, .phone {
    display: block;
    font-style: normal;
    font: 15px/1.6 "Playfair Display",serif;
    margin: 20px 0
}

.contact small {
    display: block;
    color: #98742e;
    text-transform: uppercase;
    letter-spacing: .17em;
    font: 700 15px "DM Sans",sans-serif
}

.phone {
    font-size: 22px
}

footer {
    padding: 60px 7vw 32px;
    background: #022724;
    color: #fff;
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 40px;
    align-items: center
}

    footer img {
        width: 225px;
        padding: 6px
    }

    footer p {
        font: italic 18px "Playfair Display",serif;
        color: #aabfba
    }

    footer > div {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        text-transform: uppercase;
        font-size: 15px;
        letter-spacing: .1em
    }

    footer > small {
        grid-column: 1/-1;
        padding-top: 23px;
        border-top: 1px solid #31504d;
        color: #75908a;
        font-size: 15px
    }

.cart-backdrop {
    position: fixed;
    inset: 0;
    background: #022e2b99;
    z-index: 90
}

.cart {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: min(460px,100%);
    background: #fbfaf5;
    z-index: 100;
    transform: translateX(100%);
    transition: .3s;
    display: flex;
    flex-direction: column;
    box-shadow: -20px 0 60px #022e2b33
}

    .cart.open {
        transform: none
    }

    .cart header {
        padding: 27px 30px;
        border-bottom: 1px solid #d9e1dd;
        display: flex;
        justify-content: space-between
    }

        .cart header small {
            text-transform: uppercase;
            letter-spacing: .16em;
            color: #98742e;
            font-size: 15px
        }

        .cart header h2 {
            margin: 5px 0 0;
            font: 500 30px "Playfair Display",serif;
            color: var(--teal)
        }

.cart-close, .dialog-close {
    border: 0;
    background: none;
    font-size: 32px;
    color: var(--teal);
    cursor: pointer
}

.cart-empty {
    text-align: center;
    margin: auto;
    padding: 35px
}

    .cart-empty > span {
        display: grid;
        place-items: center;
        margin: auto;
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background: var(--teal);
        color: var(--gold);
        font: 32px "Playfair Display",serif
    }

    .cart-empty h3 {
        font: 500 25px "Playfair Display",serif;
        margin: 20px 0 5px
    }

    .cart-empty p {
        color: var(--muted);
        font-size: 15px
    }

    .cart-empty .btn {
        margin-top: 15px
    }

.cart-items {
    overflow: auto;
    padding: 0 30px
}

.cart-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    padding: 21px 0;
    border-bottom: 1px solid #d9e1dd
}

    .cart-item h3 {
        font: 500 16px "Playfair Display",serif;
        margin: 0
    }

    .cart-item p {
        color: #98742e;
        font-size: 15px
    }

.quantity {
    display: flex;
    align-items: center;
    gap: 13px
}

    .quantity button {
        width: 26px;
        height: 26px;
        border: 1px solid #a9bbb6;
        background: white;
        cursor: pointer
    }

.remove {
    border: 0;
    background: none;
    color: #8b645a;
    font-size: 15px;
    text-decoration: underline;
    cursor: pointer
}

.cart-summary {
    margin-top: auto;
    padding: 25px 30px;
    background: #fff;
    border-top: 1px solid #d9e1dd
}

    .cart-summary > div {
        display: flex;
        justify-content: space-between;
        font: 500 20px "Playfair Display",serif
    }

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

.checkout {
    width: 100%;
    border: 0;
    background: var(--teal);
    color: #fff;
    padding: 16px;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 15px;
    cursor: pointer
}

.checkout-dialog {
    width: min(540px,calc(100% - 32px));
    border: 0;
    padding: 45px;
    color: var(--ink);
    box-shadow: 0 30px 90px #022e2b66
}

    .checkout-dialog::backdrop {
        background: #022e2baa
    }

.dialog-close {
    position: absolute;
    right: 18px;
    top: 12px
}

.checkout-dialog h2 {
    font: 500 38px "Playfair Display",serif;
    color: var(--teal);
    margin: 0
}

.checkout-dialog > p:not(.eyebrow) {
    font: 15px/1.7 "Playfair Display",serif;
    color: var(--muted);
    margin: 20px 0 28px
}

@media(max-width:980px) {
    .site-header nav {
        display: none
    }

    .hero {
        grid-template-columns: 1fr
    }

    .hero-copy {
        text-align: center;
        align-items: center;
        padding: 75px 8vw
    }

    .hero-visual {
        min-height: 70vw
    }

    .promise {
        left: 25px
    }

    .mission {
        grid-template-columns: 120px 1fr
    }

        .mission > a {
            grid-column: 2;
            width: max-content
        }

    .products {
        grid-template-columns: 1fr 1fr
    }

    .story {
        grid-template-columns: 1fr
    }

    .story-art {
        min-height: 430px
    }

    .story-constellation {
        width: min(82%,540px)
    }

    .guide {
        grid-template-columns: 1fr
    }

    .contact {
        grid-template-columns: 1fr;
        gap: 35px
    }

        .contact > div:last-child {
            border: 0;
            padding: 0
        }

    footer {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width:600px) {
    .site-header {
        height: 84px;
        padding: 0 17px
    }

    .logo img {
        width: 175px;
        height: 72px
    }

    .announcement {
        font-size: 15px
    }

    .hero-copy {
        padding: 60px 22px
    }

    .hero h1 {
        font-size: 51px
    }

    .lead {
        font-size: 15px
    }

    .actions {
        flex-direction: column
    }

    .trust {
        flex-wrap: wrap;
        justify-content: center
    }

    .hero-visual {
        min-height: 85vw
    }

    .promise {
        display: none
    }

    .mission {
        grid-template-columns: 1fr;
        padding: 55px 22px
    }

    a.btn, button {
        font-size: 15px;
    }

    .contact > div:last-child > p {
        font-size: 31px
    }

    .mission > a {
        grid-column: auto;
        width: 100%;
        justify-content: center
    }

    .mission-badge {
        width: 95px;
        height: 95px
    }

    .ticker span:nth-of-type(even), .ticker i:nth-of-type(even) {
        display: none
    }

    .section {
        padding: 75px 20px
    }

    .section-heading {
        display: block
    }

        .section-heading > p {
            margin-top: 20px
        }

    .products {
        grid-template-columns: 1fr
    }

    .featured-carousel {
        width: calc(100vw - 40px);
        overflow: hidden
    }

        .featured-carousel .products {
            display: flex;
            gap: 14px;
            overflow-x: auto;
            overscroll-behavior-x: contain;
            scroll-behavior: smooth;
            scroll-snap-type: x mandatory;
            scrollbar-width: none;
            touch-action: pan-x pan-y
        }

            .featured-carousel .products::-webkit-scrollbar {
                display: none
            }

            .featured-carousel .product {
                flex: 0 0 88%;
                scroll-snap-align: start;
                scroll-snap-stop: always
            }

    .featured-carousel-controls {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        margin-top: 24px
    }

        .featured-carousel-controls > button {
            display: grid;
            width: 46px;
            height: 46px;
            flex: 0 0 46px;
            padding: 0;
            place-items: center;
            border: 1px solid var(--teal);
            border-radius: 50%;
            background: #fff;
            color: var(--teal);
            cursor: pointer
        }

            .featured-carousel-controls > button:disabled {
                border-color: #b9c7c2;
                color: #9baba6;
                cursor: default
            }

    .featured-carousel-progress {
        display: grid;
        gap: 8px;
        justify-items: center;
        color: var(--teal);
        font-size: 15px;
        font-weight: 700
    }

    .featured-carousel-dots {
        display: flex;
        align-items: center;
        gap: 7px
    }

        .featured-carousel-dots button {
            width: 28px;
            height: 28px;
            padding: 0;
            border: 0;
            border-radius: 50%;
            background: transparent;
            cursor: pointer;
            position: relative
        }

            .featured-carousel-dots button::after {
                content: "";
                position: absolute;
                inset: 9px;
                border-radius: 50%;
                background: #b8c6c1;
                transition: transform .2s ease,background .2s ease
            }

            .featured-carousel-dots button.active::after {
                background: var(--gold);
                transform: scale(1.5)
            }

    .product-art {
        height: 250px
    }

    .product h3 {
        font-size: 17px;
        min-height: 0;
    }

    .benefit {
        font-size: 13px;
    }

    .story-copy, .guide, .contact {
        padding: 65px 22px
    }

    .story-art {
        min-height: 340px
    }

    .story-constellation {
        width: 96%;
        transform: scale(.88)
    }

    .story-logo-card {
        width: 76%;
        padding: 20px 16px 14px
    }

    .story-value {
        min-width: 125px;
        padding: 9px 10px
    }

        .story-value b {
            font-size: 15px
        }

    .story-value-roots {
        top: 18%
    }

    .story-value-wellness {
        left: 8%;
        bottom: 10%
    }

    .seal {
        bottom: 24px
    }

    .contact h2 {
        font-size: 43px
    }

    footer {
        grid-template-columns: 1fr;
        padding: 50px 22px 28px
    }

        footer > small {
            grid-column: auto
        }

    .checkout-dialog {
        padding: 36px 25px
    }

    .cart-trigger {
        padding: 10px
    }
}

/* Brand standards */
.ticker a {
    height: 100%;
    display: inline-flex;
    align-items: center;
    padding: 0 18px;
    transition: color .2s
}

    .ticker a:hover, .ticker a:focus-visible {
        color: #e6c675
    }

.standards {
    padding: 105px 6vw;
    background: #f8f4ea;
    scroll-margin-top: 100px
}

.standards-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 50px;
    margin-bottom: 52px
}

    .standards-heading h2 {
        font: 500 clamp(48px,5vw,68px)/.98 "Playfair Display",serif;
        letter-spacing: -.04em;
        color: var(--teal);
        margin: 0
    }

        .standards-heading h2 em {
            color: var(--gold);
            font-weight: 500
        }

    .standards-heading > p {
        max-width: 470px;
        margin: 0;
        color: var(--muted);
        font: 16px/1.75 "Playfair Display",serif
    }

.standards-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    border-top: 1px solid #cbd5ce;
    border-left: 1px solid #cbd5ce
}

    .standards-grid article {
        position: relative;
        min-height: 390px;
        padding: 42px 45px 38px;
        border-right: 1px solid #cbd5ce;
        border-bottom: 1px solid #cbd5ce;
        scroll-margin-top: 120px;
        background: #fff;
        display: flex;
        flex-direction: column
    }

        .standards-grid article > span {
            color: var(--gold);
            font: 500 20px "Playfair Display",serif
        }

.pillar-label {
    text-transform: uppercase;
    color: #98742e;
    letter-spacing: .18em;
    font-size: 15px;
    font-weight: 700;
    margin: 34px 0 14px
}

.standards-grid h3 {
    max-width: 510px;
    margin: 0 0 18px;
    color: var(--teal);
    font: 500 clamp(27px,3vw,38px)/1.12 "Playfair Display",serif
}

.standards-grid article > p:not(.pillar-label) {
    max-width: 590px;
    margin: 0;
    color: var(--muted);
    font: 15px/1.75 "DM Sans",sans-serif
}

.standards-grid article > a {
    margin-top: auto;
    padding-top: 28px;
    color: var(--teal);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 15px;
    font-weight: 700
}

    .standards-grid article > a b {
        color: var(--gold);
        font-size: 15px;
        margin-left: 8px
    }

.standards-grid article:hover {
    background: #fdfbf5
}

@media(max-width:900px) {
    .standards-heading {
        display: block
    }

        .standards-heading > p {
            margin-top: 22px
        }

    .standards-grid {
        grid-template-columns: 1fr
    }

    .desktop-nav {
        gap: 20px !important
    }
}

@media(max-width:600px) {
    .ticker a:nth-of-type(even), .ticker i:nth-of-type(even) {
        display: none
    }

    .ticker a {
        padding: 0 8px
    }

    .standards {
        padding: 70px 20px
    }

    .standards-heading {
        margin-bottom: 35px
    }

        .standards-heading h2 {
            font-size: 44px
        }

    .standards-grid article {
        min-height: 0;
        padding: 34px 27px
    }

        .standards-grid article > a {
            margin-top: 28px
        }
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 120;
    background: #022e2baa;
    display: grid;
    place-items: center;
    padding: 16px
}

    .modal-backdrop .checkout-dialog {
        display: block;
        width: min(540px,100%);
        background: #fff;
        position: relative
    }

#blazor-error-ui {
    display: none;
    position: fixed;
    inset: auto 0 0;
    z-index: 1000;
    background: #fff3cd;
    color: #664d03;
    padding: 12px 20px;
    text-align: center
}

    #blazor-error-ui .dismiss {
        float: right;
        border: 0;
        background: none
    }

.admin-header {
    height: 92px;
    padding: 0 6vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #dfe7e3;
    background: #fff
}

    .admin-header img {
        width: 200px;
        height: 78px;
        object-fit: contain
    }

    .admin-header > div {
        display: flex;
        align-items: center;
        gap: 18px;
        font-size: 15px
    }

        .admin-header > div a {
            color: #98742e;
            text-decoration: underline
        }

.admin-shell {
    min-height: calc(100vh - 92px);
    padding: 55px 6vw;
    background: #f8f4ea
}

.admin-title {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-bottom: 35px
}

    .admin-title h1, .admin-denied h1 {
        font: 500 clamp(38px,5vw,58px) "Playfair Display",serif;
        color: var(--teal);
        margin: 0
    }

    .admin-title > div > p:last-child {
        color: var(--muted)
    }

.admin-grid {
    display: grid;
    grid-template-columns: minmax(280px,34%) 1fr;
    gap: 22px
}

.admin-list, .admin-editor {
    background: #fff;
    border: 1px solid #dbe3de;
    padding: 24px
}

    .admin-list h2 {
        font: 500 24px "Playfair Display",serif;
        margin: 0
    }

.admin-list-heading {
    margin: 0 0 18px
}

    .admin-list-heading small {
        display: block;
        margin-top: 5px;
        color: var(--muted)
    }

.admin-product-row {
    width: 100%;
    display: grid;
    grid-template-columns: 28px minmax(0,1fr) 30px;
    align-items: center;
    border: 1px solid transparent;
    border-top-color: #dbe3de;
    background: #fff;
    padding: 5px
}

    .admin-product-row.selected {
        border-color: var(--gold);
        background: #fffbf0
    }

.admin-product-rank {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 50%;
    background: #edf3f0;
    color: var(--teal);
    font-size: 15px;
    font-weight: 700
}

.admin-product {
    min-width: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    text-align: left;
    border: 0;
    background: transparent;
    padding: 11px 6px;
    cursor: pointer
}

    .admin-product > span {
        display: flex;
        flex-direction: column;
        gap: 5px
    }

    .admin-product small {
        color: var(--muted)
    }

    .admin-product i {
        font-style: normal;
        font-size: 15px;
        text-transform: uppercase;
        letter-spacing: .1em;
        padding: 6px
    }

    .admin-product .published {
        color: #22695f;
        background: #e7f4ef
    }

    .admin-product .draft {
        color: #795d2d;
        background: #f5eddd
    }

.admin-rank-actions {
    display: grid;
    gap: 3px
}

    .admin-rank-actions button {
        width: 28px;
        height: 25px;
        border: 1px solid #c9d5d0;
        background: #fff;
        color: var(--teal);
        cursor: pointer
    }

        .admin-rank-actions button:hover:not(:disabled) {
            border-color: var(--gold);
            background: #fff8e8
        }

        .admin-rank-actions button:disabled {
            opacity: .3;
            cursor: default
        }

.admin-placeholder {
    padding: 50px;
    text-align: center;
    color: var(--muted)
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px
}

    .form-grid label {
        display: flex;
        flex-direction: column;
        gap: 7px;
        text-transform: uppercase;
        letter-spacing: .08em;
        font-size: 15px;
        font-weight: 700;
        color: #586d68
    }

    .form-grid .wide {
        grid-column: 1/-1
    }

    .form-grid input, .form-grid textarea, .form-grid select {
        width: 100%;
        border: 1px solid #bac9c3;
        background: #fff;
        padding: 12px;
        color: var(--ink);
        text-transform: none;
        letter-spacing: normal;
        font-size: 15px;
        font-weight: 400
    }

    .form-grid textarea {
        min-height: 90px;
        resize: vertical
    }

    .form-grid .check {
        flex-direction: row;
        align-items: center
    }

        .form-grid .check input {
            width: auto
        }

.form-actions {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-top: 25px
}

.danger-button {
    border: 0;
    background: none;
    color: #9a4037;
    text-decoration: underline;
    cursor: pointer
}

.validation-message, .validation-errors {
    color: #a02f27;
    font-size: 15px
}

.admin-message {
    background: #e5f1ed;
    color: #17564f;
    padding: 14px 18px;
    margin-bottom: 20px
}

.admin-denied {
    min-height: 70vh
}

    .admin-denied > p {
        max-width: 560px;
        margin-bottom: 28px;
        color: var(--muted)
    }

@media(max-width:800px) {
    .admin-grid {
        grid-template-columns: 1fr
    }

    .admin-title {
        align-items: start;
        gap: 20px
    }

    .form-grid {
        grid-template-columns: 1fr
    }

        .form-grid .wide {
            grid-column: auto
        }

    .admin-header > div span {
        display: none
    }
}

.admin-header nav {
    display: flex;
    gap: 25px;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: .1em
}

    .admin-header nav a {
        padding: 35px 0 8px;
        border-bottom: 2px solid transparent
    }

        .admin-header nav a.active {
            border-color: var(--gold);
            color: var(--teal)
        }

.admin-message.error {
    background: #f6e7e4;
    color: #8c3027
}

.access-add {
    background: #fff;
    border: 1px solid #dbe3de;
    padding: 25px;
    margin-bottom: 22px
}

.access-table {
    background: #fff;
    border: 1px solid #dbe3de
}

    .access-table > header, .access-table > article {
        display: grid;
        grid-template-columns: 2fr .7fr 1.2fr 1fr;
        gap: 20px;
        align-items: center;
        padding: 16px 22px;
        border-bottom: 1px solid #e0e7e3
    }

    .access-table > header {
        background: #edf3ef;
        text-transform: uppercase;
        letter-spacing: .1em;
        font-size: 15px;
        font-weight: 700
    }

    .access-table > article:last-child {
        border: 0
    }

    .access-table article > span:first-child {
        display: flex;
        flex-direction: column;
        gap: 4px
    }

    .access-table small {
        color: var(--muted)
    }

    .access-table i {
        font-style: normal;
        font-size: 15px;
        text-transform: uppercase;
        letter-spacing: .1em;
        padding: 6px
    }

    .access-table .published {
        color: #22695f;
        background: #e7f4ef
    }

    .access-table .draft {
        color: #795d2d;
        background: #f5eddd
    }

.access-actions {
    display: flex;
    gap: 12px
}

    .access-actions button {
        border: 0;
        background: none;
        color: var(--teal);
        text-decoration: underline;
        cursor: pointer
    }

    .access-actions .delete {
        color: #9a4037
    }

@media(max-width:800px) {
    .admin-header nav {
        gap: 12px
    }

    .access-table > header {
        display: none
    }

    .access-table > article {
        grid-template-columns: 1fr 1fr
    }

        .access-table > article > span:first-child {
            grid-column: 1/-1
        }
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 80;
    background: #fffffff5;
    backdrop-filter: blur(14px)
}

    .site-header .desktop-nav {
        gap: 36px;
        font-size: 15px;
        text-transform: uppercase;
        letter-spacing: .08em
    }

        .site-header .desktop-nav a {
            position: relative;
            padding: 12px 0
        }

            .site-header .desktop-nav a:after {
                content: "";
                position: absolute;
                left: 0;
                right: 100%;
                bottom: 4px;
                height: 1px;
                background: var(--gold);
                transition: right .22s
            }

            .site-header .desktop-nav a:hover:after {
                right: 0
            }

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px
}

.menu-trigger {
    width: 42px;
    height: 42px;
    border: 1px solid #b9c9c4;
    background: #fff;
    display: none;
    place-content: center;
    gap: 5px;
    cursor: pointer
}

    .menu-trigger span {
        display: block;
        width: 19px;
        height: 1px;
        background: var(--teal);
        transition: .2s
    }

    .menu-trigger.open span:first-child {
        transform: translateY(6px) rotate(45deg)
    }

    .menu-trigger.open span:nth-child(2) {
        opacity: 0
    }

    .menu-trigger.open span:last-child {
        transform: translateY(-6px) rotate(-45deg)
    }

.mobile-menu {
    position: fixed;
    z-index: 75;
    inset: 131px 0 0;
    background: var(--deep);
    color: #fff;
    padding: 40px 28px;
    display: flex;
    flex-direction: column;
    animation: menu-in .22s ease-out
}

    .mobile-menu > p {
        color: #dbbd73;
        text-transform: uppercase;
        letter-spacing: .2em;
        font-size: 15px
    }

    .mobile-menu > a {
        display: flex;
        align-items: center;
        gap: 18px;
        border-bottom: 1px solid #31504d;
        padding: 19px 0;
        font: 500 28px "Playfair Display",serif
    }

        .mobile-menu > a span {
            color: var(--gold);
            font: 15px "DM Sans",sans-serif;
            letter-spacing: .1em
        }

    .mobile-menu > div {
        margin-top: auto;
        display: flex;
        flex-direction: column;
        gap: 8px;
        color: #9eb4ae
    }

        .mobile-menu > div small {
            text-transform: uppercase;
            letter-spacing: .18em
        }

        .mobile-menu > div b {
            font: italic 16px "Playfair Display",serif
        }

@keyframes menu-in {
    from {
        opacity: 0;
        transform: translateY(-12px)
    }
}

@media(max-width:980px) {
    .site-header .desktop-nav {
        display: none
    }

    .menu-trigger {
        display: grid
    }
}

@media(max-width:600px) {
    .logo img {
        width: 155px
    }

    .mobile-menu {
        inset: 115px 0 0
    }

    .menu-trigger {
        width: 38px;
        height: 38px
    }

    .cart-trigger {
        padding: 9px 10px
    }
}

.legal-header {
    height: 92px;
    padding: 0 7vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #dfe7e3;
    background: #fff
}

    .legal-header img {
        width: 210px;
        height: 78px;
        object-fit: contain
    }

    .legal-header > a:last-child {
        text-transform: uppercase;
        letter-spacing: .1em;
        font-size: 15px;
        color: var(--teal);
        border-bottom: 1px solid var(--gold);
        padding-bottom: 5px
    }

.legal-page {
    background: #fbfaf5;
    padding: 80px max(22px,calc((100vw - 880px)/2)) 100px
}

    .legal-page > header {
        padding-bottom: 45px;
        border-bottom: 1px solid #d6e0db
    }

    .legal-page h1 {
        font: 500 clamp(48px,7vw,76px)/1 "Playfair Display",serif;
        color: var(--teal);
        margin: 0 0 20px
    }

    .legal-page > header > p:last-child {
        font: 17px/1.75 "Playfair Display",serif;
        color: #536b65;
        max-width: 800px
    }

.legal-date {
    text-transform: uppercase;
    letter-spacing: .13em;
    font-size: 15px;
    color: #98742e
}

.legal-page section {
    padding: 35px 0;
    border-bottom: 1px solid #dce4df
}

.legal-page h2 {
    font: 500 28px "Playfair Display",serif;
    color: var(--teal);
    margin: 0 0 16px
}

.legal-page h3 {
    font: 600 15px "DM Sans",sans-serif;
    color: var(--teal);
    margin: 25px 0 8px
}

.legal-page p, .legal-page li, .legal-page address {
    font: 15px/1.75 "DM Sans",sans-serif;
    color: #526762
}

.legal-page ul {
    padding-left: 20px
}

.legal-page li {
    margin: 7px 0
}

.legal-page a {
    color: #8d6b27;
    text-decoration: underline
}

.legal-page address {
    font-style: normal;
    background: #f1eee3;
    padding: 20px;
    margin-top: 20px
}

.legal-footer {
    display: flex;
    grid-template-columns: none;
    gap: 25px;
    padding: 30px 7vw;
    background: var(--deep);
    font-size: 15px
}

    .legal-footer span {
        margin-right: auto;
        color: #9eb4ae
    }

    .legal-footer a {
        text-transform: uppercase;
        letter-spacing: .08em
    }

@media(max-width:600px) {
    .legal-header {
        padding: 0 20px
    }

        .legal-header img {
            width: 165px
        }

    .legal-page {
        padding-top: 55px
    }

    .legal-footer {
        flex-wrap: wrap
    }

        .legal-footer span {
            width: 100%
        }
}

/* Health guide preview and dedicated guide */
.anchor-target {
    display: block;
    scroll-margin-top: 100px
}

.health-preview {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 650px;
    background: #f8f4ea
}

.health-preview-visual {
    min-height: 560px;
    background: linear-gradient(0deg,rgba(2,46,43,.12),rgba(2,46,43,.12)),url(/images/vitalreach-guide-hero-black.jpg) center/cover
}

.health-preview-copy {
    padding: clamp(65px,8vw,120px) 7vw;
    align-self: center
}

    .health-preview-copy h2 {
        margin: 0;
        color: var(--teal);
        font: 500 clamp(48px,5vw,72px)/.98 "Playfair Display",serif
    }

        .health-preview-copy h2 em {
            color: var(--gold);
            font-weight: 500
        }

    .health-preview-copy > p:not(.eyebrow) {
        max-width: 650px;
        margin: 26px 0;
        color: var(--muted);
        font: 18px/1.75 "Playfair Display",serif
    }

.health-preview-topics {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 0 28px;
    margin: 0 0 34px
}

    .health-preview-topics span {
        padding: 14px 0;
        border-bottom: 1px solid #d7d3c7;
        color: #36524f;
        font-size: 16px;
        font-weight: 600
    }

.health-preview-copy > small {
    display: block;
    margin-top: 20px;
    color: #788681;
    font-size: 15px
}

.health-guide-hero {
    min-height: 680px;
    padding: 105px 7vw;
    display: flex;
    align-items: center;
    color: #fff;
    background: linear-gradient(90deg,rgba(2,35,33,.98) 0%,rgba(2,46,43,.88) 43%,rgba(2,46,43,.3) 72%),url(/images/vitalreach-guide-hero-black.jpg) center/cover
}

    .health-guide-hero > div {
        max-width: 800px
    }

    .health-guide-hero h1 {
        margin: 0;
        color: #fff;
        font: 500 clamp(55px,7vw,94px)/.96 "Playfair Display",serif
    }

        .health-guide-hero h1 em {
            color: var(--gold);
            font-weight: 500
        }

    .health-guide-hero p:not(.eyebrow) {
        max-width: 700px;
        margin: 28px 0;
        color: #d6e2df;
        font: 19px/1.7 "Playfair Display",serif
    }

.health-guide-nav {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    padding: 0 7vw;
    background: var(--teal);
    color: #fff
}

    .health-guide-nav a {
        display: flex;
        gap: 15px;
        padding: 26px 20px;
        border-right: 1px solid #47736e;
        font-size: 15px;
        font-weight: 600
    }

        .health-guide-nav a:first-child {
            border-left: 1px solid #47736e
        }

    .health-guide-nav span {
        color: var(--gold);
        font-family: "Playfair Display",serif
    }

.health-guide-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8vw;
    padding: 105px 7vw
}

    .health-guide-intro h2, .health-guide-section > header h2, .health-guide-sources h2 {
        margin: 0;
        color: var(--teal);
        font: 500 clamp(46px,5vw,68px)/1 "Playfair Display",serif
    }

        .health-guide-intro h2 em {
            color: var(--gold);
            font-weight: 500
        }

    .health-guide-intro > div:last-child {
        color: var(--muted);
        font: 18px/1.8 "Playfair Display",serif
    }

.health-guide-section {
    padding: 100px 7vw;
    background: #f8f4ea
}

    .health-guide-section > header {
        display: grid;
        grid-template-columns: 1.1fr .9fr;
        gap: 24px 7vw;
        align-items: end;
        margin-bottom: 48px
    }

        .health-guide-section > header .eyebrow {
            grid-column: 1/-1;
            margin-bottom: 0
        }

        .health-guide-section > header > p:last-child {
            margin: 0;
            color: var(--muted);
            font: 17px/1.75 "Playfair Display",serif
        }

.health-risk-grid, .health-action-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    border-top: 1px solid #cbd5ce;
    border-left: 1px solid #cbd5ce
}

    .health-risk-grid article, .health-action-grid article {
        padding: 38px 32px;
        border-right: 1px solid #cbd5ce;
        border-bottom: 1px solid #cbd5ce;
        background: #fff
    }

    .health-risk-grid span, .health-action-grid span {
        color: var(--gold);
        font: 22px "Playfair Display",serif
    }

    .health-risk-grid h3, .health-action-grid h3 {
        margin: 25px 0 14px;
        color: var(--teal);
        font: 500 27px/1.15 "Playfair Display",serif
    }

    .health-risk-grid p, .health-action-grid p {
        margin: 0;
        color: var(--muted);
        font-size: 15px;
        line-height: 1.75
    }

.health-guide-callout {
    margin: 38px 0 0;
    padding: 24px 30px;
    border-left: 4px solid var(--gold);
    background: #fff;
    color: #36524f;
    font: 17px/1.7 "Playfair Display",serif
}

.health-tests {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 7vw;
    padding: 105px 7vw;
    background: var(--teal);
    color: #fff
}

    .health-tests header h2, .health-medication h2 {
        margin: 0;
        color: #fff;
        font: 500 clamp(44px,5vw,66px)/1 "Playfair Display",serif
    }

    .health-tests header > p:last-child, .health-medication > div > p:not(.eyebrow) {
        color: #c9d9d5;
        font-size: 16px;
        line-height: 1.75
    }

    .health-tests article {
        display: grid;
        grid-template-columns: 105px 1fr;
        gap: 30px;
        padding: 35px 0;
        border-top: 1px solid #47736e
    }

        .health-tests article > span {
            color: var(--gold);
            font: 500 35px "Playfair Display",serif
        }

        .health-tests article h3 {
            margin: 0 0 10px;
            color: #fff;
            font: 500 29px "Playfair Display",serif
        }

        .health-tests article p {
            color: #c9d9d5;
            font-size: 15px;
            line-height: 1.75
        }

        .health-tests article strong {
            display: block;
            color: #f2cc75;
            font-size: 15px
        }

.health-medication {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8vw;
    padding: 105px 7vw;
    background: #073f3b;
    color: #fff
}

    .health-medication aside {
        padding: 45px;
        background: #f8f4ea;
        color: var(--ink)
    }

        .health-medication aside h3 {
            margin: 0 0 25px;
            color: var(--teal);
            font: 500 36px/1.1 "Playfair Display",serif
        }

        .health-medication aside ol {
            margin: 0;
            padding-left: 24px
        }

        .health-medication aside li {
            padding: 11px 0 11px 8px;
            border-bottom: 1px solid #ddd7ca;
            color: #36524f;
            font-size: 15px
        }

.health-guide-sources {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8vw;
    padding: 95px 7vw;
    background: #fff
}

    .health-guide-sources > div:last-child > p {
        color: var(--muted);
        font: 17px/1.75 "Playfair Display",serif
    }

    .health-guide-sources a {
        display: block;
        padding: 15px 0;
        border-bottom: 1px solid #d7dfda;
        color: var(--teal);
        font-size: 15px;
        font-weight: 600
    }

@media(max-width:950px) {
    .health-preview, .health-guide-intro, .health-tests, .health-medication, .health-guide-sources {
        grid-template-columns: 1fr
    }

    .health-preview-visual {
        min-height: 520px
    }

    .health-guide-nav, .health-risk-grid, .health-action-grid {
        grid-template-columns: repeat(2,1fr)
    }
}

@media(max-width:650px) {
    .health-preview-copy, .health-guide-hero, .health-guide-intro, .health-guide-section, .health-tests, .health-medication, .health-guide-sources {
        padding: 65px 22px
    }

    .health-preview-visual {
        min-height: 420px
    }

    .health-preview-topics, .health-guide-nav, .health-risk-grid, .health-action-grid, .health-guide-section > header {
        grid-template-columns: 1fr
    }

    .health-guide-nav {
        padding: 0 22px
    }

        .health-guide-nav a, .health-guide-nav a:first-child {
            border-left: 0;
            border-right: 0;
            border-bottom: 1px solid #47736e
        }

    .health-guide-hero {
        min-height: 650px;
        align-items: flex-end;
        background-image: linear-gradient(0deg,rgba(2,35,33,.98),rgba(2,46,43,.72) 62%,rgba(2,46,43,.2)),url(/images/vitalreach-guide-hero-black.jpg)
    }

    .health-guide-section > header .eyebrow {
        grid-column: 1
    }

    .health-tests article {
        grid-template-columns: 1fr;
        gap: 8px
    }

    .health-medication aside {
        padding: 32px 25px
    }
}

/* Kidney Health Ghana content */
#ghana, #kidney-reading, #kidney-series, #journal, #contact {
    scroll-margin-top: 100px
}

.mission strong {
    display: block;
    color: #98742e;
    text-transform: uppercase;
    letter-spacing: .13em;
    font-size: 15px;
    margin-top: 18px
}

.kidney-series {
    padding: 105px 7vw;
    background: #f8f4ea
}

    .kidney-series > header {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px 7vw;
        margin-bottom: 50px
    }

        .kidney-series > header .eyebrow {
            grid-column: 1/-1;
            margin-bottom: 0
        }

        .kidney-series > header h2, .journal h2 {
            font: 500 clamp(48px,5vw,68px)/.98 "Playfair Display",serif;
            color: var(--teal);
            margin: 0
        }

            .kidney-series > header h2 em, .journal h2 em {
                color: var(--gold);
                font-weight: 500
            }

        .kidney-series > header > p:last-child, .journal > header > p:last-child {
            color: var(--muted);
            font: 16px/1.75 "Playfair Display",serif;
            margin: 0
        }

.episode-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    border-top: 1px solid #cbd5ce;
    border-left: 1px solid #cbd5ce
}

    .episode-grid article {
        padding: 38px 40px;
        border-right: 1px solid #cbd5ce;
        border-bottom: 1px solid #cbd5ce;
        background: #fff
    }

    .episode-grid span, .journal article small {
        color: #98742e;
        text-transform: uppercase;
        letter-spacing: .15em;
        font-size: 15px;
        font-weight: 700
    }

    .episode-grid h3, .journal article h3 {
        color: var(--teal);
        font: 500 27px/1.15 "Playfair Display",serif;
        margin: 13px 0
    }

    .episode-grid p, .journal article p {
        color: var(--muted);
        font: 15px/1.75 "DM Sans",sans-serif
    }

.kidney-questions {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 50px;
    margin-top: 45px;
    padding: 42px;
    background: var(--teal);
    color: #fff
}

    .kidney-questions h3 {
        font: 500 34px/1.15 "Playfair Display",serif;
        margin: 0
    }

    .kidney-questions ol {
        columns: 2;
        margin: 0;
        padding-left: 25px
    }

    .kidney-questions li {
        padding: 7px 12px;
        color: #d7e3df;
        font: 15px/1.5 "DM Sans",sans-serif;
        break-inside: avoid
    }

.medical-note {
    max-width: 1000px;
    margin: 28px auto 0;
    text-align: center;
    color: #778681;
    font-size: 15px;
    line-height: 1.7
}

    .medical-note a {
        color: #8d6b27;
        text-decoration: underline
    }

.journal {
    padding: 105px 7vw;
    background: #fff
}

    .journal > header {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px 7vw;
        align-items: end;
        margin-bottom: 48px
    }

        .journal > header .eyebrow {
            grid-column: 1/-1;
            margin-bottom: 0
        }

    .journal > div {
        display: grid;
        grid-template-columns: repeat(3,minmax(0,1fr));
        gap: 18px
    }

    .journal article {
        padding: 35px;
        background: #f2f4ef
    }

        .journal article > b {
            display: block;
            color: var(--gold);
            font: 500 22px "Playfair Display",serif;
            margin-bottom: 30px
        }

        .journal article > a {
            display: inline-block;
            margin-top: 18px;
            color: var(--teal);
            text-transform: uppercase;
            letter-spacing: .12em;
            font-size: 15px;
            font-weight: 700
        }

@media(max-width:800px) {
    .kidney-series > header, .journal > header {
        grid-template-columns: 1fr
    }

        .kidney-series > header .eyebrow, .journal > header .eyebrow {
            grid-column: auto
        }

    .episode-grid, .journal > div {
        grid-template-columns: 1fr
    }

    .kidney-questions {
        grid-template-columns: 1fr
    }

        .kidney-questions ol {
            columns: 1
        }
}

@media(max-width:600px) {
    .kidney-series, .journal {
        padding: 70px 22px
    }

    .episode-grid article {
        padding: 30px 26px
    }

    .kidney-questions {
        padding: 32px 25px
    }

    .guide-list article {
        grid-template-columns: 42px 1fr
    }
}

.product-image {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block
}

.admin-image-preview {
    min-height: 180px;
    padding: 15px;
    border: 1px solid #dbe3de;
    background: #f2f4ef;
    display: grid;
    gap: 12px;
    place-items: center
}

    .admin-image-preview img {
        display: block;
        max-width: 100%;
        max-height: 260px;
        object-fit: contain
    }

.admin-selected-image {
    padding: 12px 15px;
    background: #e7f4ef;
    color: #22695f;
    font-size: 15px
}

.admin-gallery-manager {
    padding: 18px;
    border: 1px solid #dbe3de;
    background: #fbfcfa
}

    .admin-gallery-manager > header b, .admin-gallery-manager > header small {
        display: block
    }

    .admin-gallery-manager > header small, .admin-gallery-empty, .admin-gallery-list small {
        margin-top: 4px;
        color: var(--muted);
        font-size: 15px
    }

.admin-gallery-upload {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 12px;
    align-items: end;
    margin: 18px 0
}

    .admin-gallery-upload label {
        display: grid;
        gap: 7px
    }

.admin-gallery-list {
    display: grid;
    gap: 9px;
    margin-top: 15px
}

    .admin-gallery-list article {
        display: grid;
        grid-template-columns: 76px minmax(0,1fr) auto;
        gap: 13px;
        align-items: center;
        padding: 9px;
        border: 1px solid #dbe3de;
        background: #fff
    }

    .admin-gallery-list img {
        width: 76px;
        height: 62px;
        object-fit: contain;
        background: #f2f4ef
    }

    .admin-gallery-list article > div:nth-child(2) {
        display: grid;
        gap: 4px
    }

.admin-gallery-actions {
    display: flex;
    gap: 5px
}

    .admin-gallery-actions button {
        border: 1px solid #c9d5d0;
        background: #fff;
        color: var(--teal);
        padding: 7px 9px;
        cursor: pointer
    }

        .admin-gallery-actions button.remove {
            color: #9a4037
        }

@media(max-width:800px) {
    .admin-gallery-upload {
        grid-template-columns: 1fr
    }

    .admin-gallery-list article {
        grid-template-columns: 62px 1fr
    }

    .admin-gallery-actions {
        grid-column: 1/-1
    }
}

.form-grid label small {
    color: var(--muted);
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none
}

.form-grid input[type=file] {
    padding: 9px;
    background: #f8faf8
}

/* Shopping, wellness center, and managed headquarters */
.settings-editor {
    max-width: 900px
}

.shop-all-link {
    display: block;
    width: max-content;
    margin: 28px auto 0;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--gold);
    color: var(--teal);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 15px;
    font-weight: 700
}

.center-callout {
    padding: 70px 7vw;
    background: linear-gradient(120deg,#063f3b,#022e2b);
    color: #fff;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 50px
}

    .center-callout h2 {
        font: 500 clamp(42px,5vw,64px)/1 "Playfair Display",serif;
        margin: 0;
        color: #fff
    }

        .center-callout h2 em {
            color: var(--gold);
            font-weight: 500
        }

    .center-callout p:not(.eyebrow) {
        max-width: 700px;
        color: #c7d8d3;
        font: 15px/1.7 "Playfair Display",serif
    }

    .center-callout .btn {
        flex: none
    }

.footer-identity p {
    margin-top: 0
}

.footer-identity address {
    margin: 18px 0 0;
    color: #aabfba;
    font: 15px/1.65 "DM Sans",sans-serif
}

    .footer-identity address b {
        display: block;
        margin-bottom: 6px;
        color: #dbbd73;
        text-transform: uppercase;
        letter-spacing: .13em;
        font-size: 15px
    }

    .footer-identity address a:hover {
        color: #fff
    }

.center-hero {
    min-height: 610px;
    padding: 105px 7vw;
    display: flex;
    align-items: center;
    color: #fff;
    background: linear-gradient(90deg,rgba(2,35,33,.96) 0%,rgba(2,46,43,.82) 38%,rgba(2,46,43,.18) 68%,rgba(2,46,43,.06) 100%),url(/images/wellness-center/wellness-center-reception.png) center/cover
}

    .center-hero > div {
        max-width: 760px
    }

    .center-hero h1 {
        font: 500 clamp(54px,7vw,92px)/.95 "Playfair Display",serif;
        margin: 0
    }

        .center-hero h1 em {
            color: var(--gold);
            font-weight: 500
        }

    .center-hero > div > p:not(.eyebrow) {
        max-width: 700px;
        color: #d1dfdb;
        font: 17px/1.75 "Playfair Display",serif
    }

.light-link {
    color: #fff;
    border-color: #8ca7a1
}

.center-intro {
    padding: 100px 7vw;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8vw
}

    .center-intro h2 {
        font: 500 clamp(45px,5vw,68px)/1 "Playfair Display",serif;
        color: var(--teal);
        margin: 0
    }

    .center-intro > div:last-child {
        color: var(--muted);
        font: 16px/1.8 "Playfair Display",serif
    }

.center-services {
    padding: 0 7vw 100px;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1px;
    background: #fff
}

    .center-services article {
        padding: 42px;
        background: #f2f4ef
    }

    .center-services span {
        color: var(--gold);
        font: 20px "Playfair Display",serif
    }

    .center-services h3 {
        color: var(--teal);
        font: 500 30px "Playfair Display",serif
    }

    .center-services p {
        min-height: 100px;
        color: var(--muted);
        font-size: 15px;
        line-height: 1.7
    }

    .center-services a {
        color: var(--teal);
        text-transform: uppercase;
        letter-spacing: .1em;
        font-size: 15px;
        font-weight: 700
    }

.center-experience {
    padding: 105px 7vw;
    background: #f7f3e9
}

    .center-experience > header {
        display: grid;
        grid-template-columns: 1.1fr .9fr;
        column-gap: 8vw;
        align-items: end;
        margin-bottom: 54px
    }

        .center-experience > header .eyebrow {
            grid-column: 1/-1
        }

        .center-experience > header h2 {
            margin: 0;
            color: var(--teal);
            font: 500 clamp(44px,5vw,68px)/1 "Playfair Display",serif
        }

            .center-experience > header h2 em {
                color: #b58a26;
                font-weight: 500
            }

        .center-experience > header > p:last-child {
            margin: 0;
            color: var(--muted);
            font: 16px/1.8 "Playfair Display",serif
        }

.center-experience-grid {
    display: grid;
    gap: 34px
}

    .center-experience-grid article {
        display: grid;
        grid-template-columns: minmax(0,1.15fr) minmax(360px,.85fr);
        background: #fff;
        overflow: hidden
    }

        .center-experience-grid article:nth-child(even) img {
            order: 2
        }

    .center-experience-grid img {
        width: 100%;
        height: 100%;
        min-height: 500px;
        object-fit: cover
    }

    .center-experience-grid article > div {
        padding: clamp(38px,5vw,70px);
        align-self: center
    }

    .center-experience-grid h3 {
        margin: 10px 0 20px;
        color: var(--teal);
        font: 500 clamp(34px,4vw,50px)/1.05 "Playfair Display",serif
    }

    .center-experience-grid article > div > p:not(.eyebrow) {
        color: var(--muted);
        font-size: 15px;
        line-height: 1.75
    }

    .center-experience-grid ul {
        margin: 26px 0 30px;
        padding: 0;
        list-style: none
    }

    .center-experience-grid li {
        position: relative;
        padding: 12px 0 12px 24px;
        border-bottom: 1px solid #e6dfcf;
        color: #36524f;
        font-size: 15px
    }

        .center-experience-grid li::before {
            content: "◆";
            position: absolute;
            left: 0;
            color: var(--gold);
            font-size: 15px
        }

    .center-experience-grid a {
        color: var(--teal);
        text-transform: uppercase;
        letter-spacing: .1em;
        font-size: 15px;
        font-weight: 700
    }

.center-visit {
    padding: 100px 7vw;
    display: grid;
    grid-template-columns: .75fr 1.25fr;
    gap: 8vw;
    background: #073f3b;
    color: #fff
}

.center-visit-heading h2 {
    margin: 0;
    color: #fff;
    font: 500 clamp(42px,5vw,65px)/1 "Playfair Display",serif
}

.center-visit ol {
    margin: 0;
    padding: 0;
    list-style: none
}

.center-visit li {
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 22px;
    padding: 25px 0;
    border-top: 1px solid #47736e
}

    .center-visit li > span {
        color: var(--gold);
        font: 21px "Playfair Display",serif
    }

    .center-visit li h3 {
        margin: 0 0 8px;
        color: #fff;
        font: 500 27px "Playfair Display",serif
    }

    .center-visit li p {
        margin: 0;
        color: #c9d9d5;
        font-size: 15px;
        line-height: 1.7
    }

.center-disclaimer {
    grid-column: 2;
    margin: -2vw 0 0 80px;
    color: #9eb9b4;
    font-size: 15px;
    line-height: 1.7
}

.center-location {
    position: relative;
    padding: 96px 7vw 80px;
    background: var(--cream);
    color: var(--teal);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8vw
}

    .center-location::before {
        content: "";
        position: absolute;
        top: 0;
        left: 7vw;
        right: 7vw;
        height: 1px;
        background: linear-gradient(to right, transparent, var(--gold) 20%, var(--gold) 80%, transparent);
        opacity: .7;
        pointer-events: none
    }

    .center-location h2 {
        font: 500 clamp(38px,4vw,56px) "Playfair Display",serif;
        margin: 0
    }

    .center-location > div {
        min-width: 0
    }

    .center-location-contacts, .center-location-map {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 18px
    }

    .center-location-contacts {
        margin-top: 28px
    }

    .center-location-map iframe {
        width: 100%;
        height: 340px;
        border: 0;
        background: #e9efeb
    }

        .center-location-contacts a, .center-location-map > a {
            padding-bottom: 12px;
            border-bottom: 1px solid #d6c7a5;
            color: var(--teal);
            font: 500 20px "Playfair Display",serif;
            overflow-wrap: anywhere
        }

.shop-hero {
    padding: 90px 7vw;
    background: var(--teal);
    color: #fff
}

    .shop-hero h1 {
        font: 500 clamp(54px,7vw,84px)/.95 "Playfair Display",serif;
        margin: 0
    }

        .shop-hero h1 em {
            color: var(--gold);
            font-weight: 500
        }

    .shop-hero > p:last-child {
        max-width: 650px;
        color: #c8d8d4;
        font: 16px/1.7 "Playfair Display",serif
    }

.shop-browser {
    padding: 75px 6vw 100px;
    display: grid;
    grid-template-columns: 230px 1fr;
    gap: 50px;
    background: #fbfaf5;
    scroll-margin-top: 95px
}

.shop-facets {
    align-self: start;
    position: sticky;
    top: 120px
}

    .shop-facet-mobile {
        display: none
    }

    .shop-facet-mobile-heading, .shop-facet-mobile .shop-facet-list a span small {
        display: none
    }

    .shop-facets h2 {
        font: 500 25px "Playfair Display",serif;
        color: var(--teal)
    }

    .shop-facets a {
        display: flex;
        justify-content: space-between;
        padding: 13px 4px;
        border-bottom: 1px solid #dbe3de;
        color: var(--muted);
        font-size: 15px
    }

        .shop-facets a.active {
            color: var(--teal);
            font-weight: 700;
            border-color: var(--gold)
        }

        .shop-facets a:focus-visible {
            outline: 0;
            background: #edf2ed;
            box-shadow: inset 3px 0 var(--gold)
        }

    .shop-facets b {
        color: #98742e
    }

.shop-search > label {
    display: block;
    margin-bottom: 8px;
    color: var(--teal);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 15px;
    font-weight: 700
}

.shop-facets a {
    padding: 3px 4px;
}

.shop-search > div {
    display: flex
}

.shop-search input {
    flex: 1;
    min-width: 100%;
    padding: 14px;
    border: 1px solid #b9c9c4;
    background: #fff;
    font: 15px "DM Sans",sans-serif
}

.shop-search button {
    padding: 0 23px;
    border: 0;
    background: var(--teal);
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: 15px;
    cursor: pointer
}

.results-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 22px 0
}

    .results-summary p {
        color: var(--muted);
        font-size: 15px
    }

    .results-summary a {
        color: #8d6b27;
        text-decoration: underline;
        font-size: 15px
    }

.shop-products {
    grid-template-columns: repeat(3,minmax(0,1fr))
}

.empty-results {
    padding: 70px 20px;
    text-align: center;
    background: #fff
}

    .empty-results h2 {
        font: 500 34px "Playfair Display",serif;
        color: var(--teal)
    }

.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 45px
}

    .pagination a {
        min-width: 38px;
        height: 38px;
        padding: 0 11px;
        display: grid;
        place-items: center;
        border: 1px solid #b9c9c4;
        color: var(--teal);
        font-size: 15px
    }

        .pagination a.active {
            background: var(--teal);
            color: #fff;
            border-color: var(--teal)
        }

.breadcrumbs {
    padding: 26px 7vw;
    color: var(--muted);
    font-size: 15px;
    display: flex;
    gap: 10px
}

    .breadcrumbs a {
        color: #8d6b27
    }

.pdp-main {
    padding: 55px 7vw 95px;
    display: grid;
    grid-template-columns: minmax(320px,1fr) minmax(340px,.9fr);
    gap: 7vw
}

.pdp-art {
    min-height: 590px;
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg,#c8dbd1,#f0ead9)
}

    .pdp-art.gold-product {
        background: linear-gradient(145deg,#f0dca8,#8c6a27)
    }

    .pdp-art.pearl-product {
        background: linear-gradient(145deg,#fbf7ed,#d5cdbd)
    }

    .pdp-art.berry-product {
        background: linear-gradient(145deg,#dfc4bf,#7e2942)
    }

    .pdp-art > img {
        width: auto;
        height: 600px;
        object-fit: contain
    }

    .pdp-art .bottle {
        transform: scale(1.45)
    }

.pdp-copy {
    align-self: center
}

    .pdp-copy h1 {
        font: 500 clamp(45px,5vw,68px)/1 "Playfair Display",serif;
        color: var(--teal);
        margin: 0
    }

.pdp-benefit {
    color: #98742e;
    font: italic 20px "Playfair Display",serif
}

.pdp-price {
    display: flex;
    justify-content: space-between;
    padding: 20px 0;
    border-top: 1px solid #dbe3de;
    border-bottom: 1px solid #dbe3de;
    margin: 28px 0
}

    .pdp-price strong {
        font: 500 25px "Playfair Display",serif;
        color: var(--teal)
    }

    .pdp-price span {
        color: var(--muted);
        font-size: 15px
    }

.pdp-copy > p:not(.eyebrow):not(.pdp-benefit):not(.pdp-note) {
    color: var(--muted);
    line-height: 1.8
}

.pdp-note {
    color: #7a8986;
    font-size: 15px;
    line-height: 1.6
}

.pdp-pagination {
    padding: 35px 7vw;
    border-top: 1px solid #dbe3de;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px
}

    .pdp-pagination a {
        display: flex;
        flex-direction: column;
        gap: 6px;
        color: var(--teal)
    }

        .pdp-pagination a.next {
            text-align: right
        }

    .pdp-pagination small {
        text-transform: uppercase;
        letter-spacing: .12em;
        color: #98742e;
        font-size: 15px
    }

.product-not-found {
    padding: 100px 7vw;
    min-height: 55vh
}

    .product-not-found h1 {
        font: 500 58px "Playfair Display",serif;
        color: var(--teal)
    }

.pdp-gallery {
    min-width: 0
}

.pdp-thumbnails {
    min-height: 96px;
    display: flex;
    gap: 12px;
    padding-top: 14px;
    overflow-x: auto
}

    .pdp-thumbnails button {
        width: 74px;
        height: 74px;
        flex: 0 0 74px;
        padding: 3px;
        border: 1px solid #d4ded9;
        background: #fff;
        cursor: pointer
    }

        .pdp-thumbnails button.active {
            border-color: var(--gold);
            box-shadow: 0 0 0 1px var(--gold)
        }

    .pdp-thumbnails img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

@media(max-width:1050px) {
    .shop-products {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .center-services {
        grid-template-columns: 1fr
    }

        .center-services p {
            min-height: 0
        }

    .center-experience-grid article {
        grid-template-columns: 1fr
    }

        .center-experience-grid article:nth-child(even) img {
            order: 0
        }

    .center-experience-grid img {
        min-height: 0;
        aspect-ratio: 16/9
    }
}

@media(max-width:800px) {
    .center-callout {
        display: block
    }

        .center-callout .btn {
            margin-top: 20px
        }

    .center-intro, .center-location, .pdp-main {
        grid-template-columns: 1fr
    }

    .center-experience > header, .center-visit {
        grid-template-columns: 1fr
    }

    .center-experience > header {
        gap: 24px
    }

    .center-disclaimer {
        grid-column: 1;
        margin: 0
    }

    .shop-browser {
        grid-template-columns: minmax(0,1fr)
    }

    .shop-facets, .shop-results {
        min-width: 0;
        width: 100%
    }

    .shop-facets {
        position: static;
        display: block
    }

    .shop-facet-desktop {
        display: none
    }

    .shop-facet-mobile {
        display: block
    }

        .shop-facets details > summary {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            min-height: 112px;
            padding: 20px 22px;
            border: 1px solid #b9c9c4;
            border-left: 4px solid var(--gold);
            background: linear-gradient(110deg,#fff,#f5f1e7);
            color: var(--teal);
            cursor: pointer;
            list-style: none;
            box-shadow: 0 12px 30px rgba(3,50,46,.08)
        }

            .shop-facets details > summary::-webkit-details-marker {
                display: none
            }

            .shop-facet-summary-copy {
                display: grid;
                gap: 3px
            }

            .shop-facet-summary-copy > small {
                color: #98742e;
                font-size: 15px;
                font-style: normal;
                font-weight: 700;
                letter-spacing: .12em;
                text-transform: uppercase
            }

            .shop-facet-summary-copy > strong {
                font: 500 28px "Playfair Display",serif
            }

            .shop-facet-summary-copy > em {
                color: var(--muted);
                font-size: 15px;
                font-style: normal
            }

            .shop-facets details > summary i {
                position: relative;
                width: 24px;
                height: 24px;
                flex: 0 0 24px;
                border-radius: 50%;
                background: var(--teal)
            }

                .shop-facets details > summary i::before, .shop-facets details > summary i::after {
                    content: "";
                    position: absolute;
                    top: 11px;
                    left: 5px;
                    width: 14px;
                    height: 2px;
                    background: #fff;
                    transition: transform .2s ease
                }

                .shop-facets details > summary i::after {
                    transform: rotate(90deg)
                }

        .shop-facets details[open] > summary {
            border-color: var(--gold);
            background: #f8f4ea;
            box-shadow: none
        }

            .shop-facets details[open] > summary i::after {
                transform: rotate(0)
            }

        .shop-facets details > summary:focus-visible {
            outline: 2px solid var(--teal);
            outline-offset: 2px
        }

    .shop-facet-list {
        display: none;
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 10px;
        padding: 18px;
        border: 1px solid #d8d2c4;
        border-top: 0;
        background: #fff
    }

    .shop-facets details[open] .shop-facet-list {
        display: grid
    }

    .shop-facet-mobile-heading {
        grid-column: 1/-1;
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 18px;
        padding: 4px 2px 14px;
        border-bottom: 1px solid #d8dfda
    }

        .shop-facet-mobile-heading > div {
            display: grid;
            gap: 2px
        }

        .shop-facet-mobile-heading span {
            color: #98742e;
            font-size: 15px;
            font-weight: 700;
            letter-spacing: .1em;
            text-transform: uppercase
        }

        .shop-facet-mobile-heading strong {
            color: var(--teal);
            font: 500 24px "Playfair Display",serif
        }

        .shop-facet-mobile-heading > small {
            color: var(--muted);
            font-size: 15px;
            text-align: right
        }

    .shop-facet-list > a {
        position: relative;
        min-height: 68px;
        padding: 12px 14px;
        border: 1px solid #dbe3de;
        background: #fbfaf5;
        transition: border-color .2s ease,background .2s ease,transform .2s ease
    }

        .shop-facet-list > a span {
            display: grid;
            color: var(--teal);
            font-weight: 600;
            line-height: 1.25
        }

            .shop-facet-list > a span small {
                display: block;
                margin-bottom: 3px;
                color: #7a8985;
                font-size: 15px;
                font-weight: 400
            }

        .shop-facet-list > a b {
            display: grid;
            min-width: 32px;
            height: 32px;
            padding: 0 7px;
            place-items: center;
            border-radius: 50%;
            background: #efe8d7;
            color: #876923
        }

        .shop-facet-list > a.active {
            border-color: var(--gold);
            background: #f5efdf;
            box-shadow: inset 4px 0 var(--gold)
        }

            .shop-facet-list > a.active::after {
                content: "Selected";
                position: absolute;
                right: 12px;
                bottom: 4px;
                color: #876923;
                font-size: 15px;
                font-weight: 700
            }

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

    .pdp-art {
        min-height: 450px
    }

    .admin-header nav {
        gap: 10px;
        font-size: 15px
    }
}

@media(max-width:600px) {
    .center-callout, .center-hero, .center-intro, .center-experience, .center-visit, .center-location {
        padding: 60px 22px
    }

    .center-hero {
        min-height: 620px;
        align-items: flex-end;
        background-position: 62% center;
        background-image: linear-gradient(0deg,rgba(2,35,33,.98) 0%,rgba(2,46,43,.86) 43%,rgba(2,46,43,.18) 78%,rgba(2,46,43,.08) 100%),url(/images/wellness-center/wellness-center-reception.png)
    }

        .center-hero .actions {
            align-items: flex-start
        }

    .center-services {
        padding: 0 22px 65px
    }

    .shop-facet-list {
        grid-template-columns: 1fr
    }

    .center-experience > header {
        margin-bottom: 35px
    }

    .center-experience-grid {
        gap: 22px
    }

        .center-experience-grid article > div {
            padding: 32px 24px 38px
        }

    .center-visit li {
        grid-template-columns: 44px 1fr;
        gap: 12px
    }

    .shop-hero {
        padding: 65px 22px
    }

    .shop-browser {
        padding: 50px 20px 70px
    }

    .shop-products {
        grid-template-columns: minmax(0,1fr)
    }

    .shop-products > * {
        min-width: 0
    }

    .shop-search > div {
        display: block
    }

    .shop-search button {
        width: 100%;
        padding: 14px
    }

    .pdp-main {
        padding: 35px 20px 65px
    }

    .pdp-art {
        min-height: 100vw
    }

    .pdp-pagination {
        padding: 28px 20px
    }

    .footer-identity address {
        font-size: 15px
    }

    .admin-header nav a {
        font-size: 15px
    }
}
/* Contact form and admin inbox */
.contact-page-hero {
    padding: 90px 7vw;
    background: var(--teal);
    color: #fff
}

    .contact-page-hero h1 {
        font: 500 clamp(54px,7vw,84px)/.95 "Playfair Display",serif;
        margin: 0
    }

        .contact-page-hero h1 em {
            color: var(--gold);
            font-weight: 500
        }

    .contact-page-hero > p:last-child {
        max-width: 680px;
        color: #c8d8d4;
        font: 17px/1.7 "Playfair Display",serif
    }

.contact-page-content {
    padding: 80px 7vw 100px;
    display: grid;
    grid-template-columns: minmax(0,1.2fr) minmax(320px,.8fr);
    gap: 50px;
    background: #fbfaf5
}

.contact-form-panel {
    padding: 45px;
    background: #fff;
    border: 1px solid #dbe3de
}

    .contact-form-panel h2 {
        font: 500 clamp(34px,4vw,48px)/1.05 "Playfair Display",serif;
        color: var(--teal);
        margin: 0 0 30px
    }

.contact-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 25px
}

    .contact-form-grid label {
        display: flex;
        flex-direction: column;
        gap: 8px;
        color: #586d68;
        text-transform: uppercase;
        letter-spacing: .09em;
        font-size: 15px;
        font-weight: 700
    }

    .contact-form-grid .wide {
        grid-column: 1/-1
    }

    .contact-form-grid input, .contact-form-grid textarea {
        width: 100%;
        padding: 13px;
        border: 1px solid #b9c9c4;
        background: #fff;
        color: var(--ink);
        font: 16px "DM Sans",sans-serif;
        letter-spacing: normal;
        text-transform: none
    }

    .contact-form-grid textarea {
        resize: vertical
    }

    .contact-form-grid .validation-message {
        font-size: 15px;
        text-transform: none;
        letter-spacing: 0
    }

.contact-honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important
}

.form-status {
    margin: 0 0 22px;
    padding: 15px 18px;
    background: #e5f1ed;
    color: #17564f;
    font-size: 15px
}

    .form-status.error {
        background: #f6e7e4;
        color: #8c3027
    }

.contact-map {
    position: relative;
    min-height: 650px;
    overflow: hidden;
    background: #dce5e0;
    border: 1px solid #d2ddd7
}

    .contact-map iframe {
        display: block;
        width: 100%;
        height: 100%;
        min-height: 650px;
        border: 0
    }

.contact-details {
    width: 70%;
    position: absolute;
    right: 22px;
    bottom: 22px;
    left: 22px;
    padding: 24px 26px;
    background: var(--teal);
    color: #fff;
    box-shadow: 0 18px 45px #022e2b4d
}

    .contact-details h2 {
        font: 500 25px/1.1 "Playfair Display",serif;
        margin: 5px 0 12px
    }

    .contact-details address {
        margin: 0;
        color: #d1dfdb;
        font-size: 15px;
        line-height: 1.55
    }

.contact-detail-links {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 16px;
    margin: 13px 0 8px
}

    .contact-detail-links a {
        color: #fff;
        font: 500 15px "Playfair Display",serif
    }

.contact-details > p:not(.eyebrow) {
    margin: 8px 0 13px;
    color: #a9beb8;
    font-size: 15px;
    line-height: 1.5
}

.contact-details .underlink {
    font-size: 15px
}

.contact-submissions {
    display: grid;
    gap: 18px
}

    .contact-submissions article {
        padding: 25px;
        background: #fff;
        border: 1px solid #dbe3de;
        border-left: 5px solid #9cb0aa
    }

        .contact-submissions article.unread {
            border-left-color: var(--gold)
        }

        .contact-submissions article > header {
            display: flex;
            justify-content: space-between;
            gap: 30px;
            padding-bottom: 18px;
            border-bottom: 1px solid #e0e7e3
        }

    .contact-submissions header span {
        color: #98742e;
        text-transform: uppercase;
        letter-spacing: .12em;
        font-size: 15px;
        font-weight: 700
    }

    .contact-submissions h2 {
        font: 500 26px "Playfair Display",serif;
        color: var(--teal);
        margin: 6px 0
    }

    .contact-submissions header p {
        margin: 0;
        color: var(--muted);
        font-size: 15px
    }

    .contact-submissions header > div:last-child {
        display: flex;
        flex-direction: column;
        gap: 8px;
        text-align: right;
        color: #8d6b27;
        font-size: 15px
    }

    .contact-submissions article > p {
        white-space: pre-wrap;
        color: #526762;
        line-height: 1.7
    }

.contact-submission-actions {
    display: flex;
    gap: 18px
}

    .contact-submission-actions button {
        border: 0;
        background: none;
        padding: 0;
        color: var(--teal);
        text-decoration: underline;
        cursor: pointer
    }

        .contact-submission-actions button.delete {
            color: #9a4037
        }

@media(max-width:800px) {
    .contact-page-content {
        grid-template-columns: 1fr
    }

    .contact-submissions article > header {
        display: block
    }

    .contact-submissions header > div:last-child {
        margin-top: 12px;
        text-align: left
    }

    .contact-map, .contact-map iframe {
        min-height: 560px
    }
}

@media(max-width:600px) {
    .contact-page-hero {
        padding: 65px 22px
    }

    .contact-page-content {
        padding: 50px 20px 70px
    }

    .contact-form-panel {
        padding: 30px 24px
    }

    .contact-details {
        width: auto;
        right: 12px;
        bottom: 12px;
        left: 12px;
        padding: 21px 20px
    }

    .contact-map, .contact-map iframe {
        min-height: 520px
    }

        .contact-map iframe {
            height: 680px;
            min-height: 680px;
            transform: translateY(-105px)
        }

    .contact-form-grid {
        grid-template-columns: 1fr
    }

        .contact-form-grid .wide {
            grid-column: auto
        }

    .admin-header nav {
        overflow-x: auto;
        max-width: 55vw
    }
}
/* Shared administration portal */
.admin-portal {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 250px minmax(0,1fr);
    background: #f8f4ea
}

.admin-sidenav {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 25px 18px;
    background: #073f3a;
    color: #fff
}

.admin-brand {
    display: block;
    padding: 0 12px 25px;
    border-bottom: 1px solid rgba(255,255,255,.13)
}

    .admin-brand img {
        width: 180px;
        height: 72px;
        object-fit: contain;
    }

.admin-sidenav nav {
    display: grid;
    gap: 7px;
    margin-top: 28px
}

    .admin-sidenav nav a {
        display: flex;
        align-items: center;
        gap: 13px;
        padding: 13px 15px;
        border-radius: 3px;
        color: #c7d9d5;
        font-size: 15px;
        text-transform: uppercase;
        letter-spacing: .09em
    }

        .admin-sidenav nav a > span:first-child {
            width: 20px;
            color: var(--gold);
            font-size: 18px;
            text-align: center
        }

        .admin-sidenav nav a:hover, .admin-sidenav nav a.active {
            background: rgba(255,255,255,.1);
            color: #fff
        }

        .admin-sidenav nav a.active {
            box-shadow: inset 3px 0 var(--gold)
        }

.admin-account {
    margin-top: auto;
    padding: 20px 12px 5px;
    border-top: 1px solid rgba(255,255,255,.13);
    display: flex;
    flex-direction: column;
    gap: 7px;
    overflow: hidden
}

    .admin-account small {
        color: #9fb9b4;
        text-transform: uppercase;
        letter-spacing: .1em;
        font-size: 15px
    }

    .admin-account span {
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 15px
    }

    .admin-account a {
        color: #d9b45a;
        font-size: 15px;
        text-decoration: underline
    }

.admin-workspace {
    min-width: 0
}

    .admin-workspace > .admin-shell {
        min-height: 100vh;
        padding: 55px clamp(25px,5vw,75px)
    }

.admin-mobilebar, .admin-mobile-nav {
    display: none
}

.admin-stat-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 18px;
    margin-bottom: 45px
}

    .admin-stat-grid > a {
        display: flex;
        min-height: 175px;
        flex-direction: column;
        padding: 25px;
        background: #fff;
        border: 1px solid #dbe3de;
        transition: transform .2s,border-color .2s
    }

        .admin-stat-grid > a:hover {
            transform: translateY(-3px);
            border-color: var(--gold)
        }

    .admin-stat-grid span {
        color: #647873;
        text-transform: uppercase;
        letter-spacing: .1em;
        font-size: 15px;
        font-weight: 700
    }

    .admin-stat-grid strong {
        margin: auto 0 5px;
        color: var(--teal);
        font: 500 52px/1 "Playfair Display",serif
    }

        .admin-stat-grid strong.status-word {
            font-size: 29px
        }

    .admin-stat-grid small {
        color: var(--muted)
    }

.admin-quick-actions {
    padding: 35px;
    background: #fff;
    border: 1px solid #dbe3de
}

    .admin-quick-actions > header h2 {
        margin: 5px 0 28px;
        color: var(--teal);
        font: 500 31px "Playfair Display",serif
    }

    .admin-quick-actions > div {
        display: grid;
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 1px;
        background: #dbe3de
    }

    .admin-quick-actions a {
        display: flex;
        min-height: 160px;
        flex-direction: column;
        padding: 25px;
        background: #fff
    }

    .admin-quick-actions b {
        color: var(--teal);
        font: 500 22px "Playfair Display",serif
    }

    .admin-quick-actions span {
        margin: 10px 0 20px;
        color: var(--muted);
        font-size: 15px;
        line-height: 1.6
    }

    .admin-quick-actions em {
        margin-top: auto;
        color: #98742e;
        font-style: normal;
        font-size: 15px;
        text-transform: uppercase;
        letter-spacing: .08em
    }

@media(max-width:1050px) {
    .admin-stat-grid {
        grid-template-columns: repeat(2,1fr)
    }
}

@media(max-width:800px) {
    .admin-portal {
        display: block
    }

    .admin-sidenav {
        display: none
    }

    .admin-mobilebar {
        height: 64px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 22px;
        background: #073f3a;
        color: #fff
    }

        .admin-mobilebar a {
            color: #fff;
            font: 500 20px "Playfair Display",serif
        }

        .admin-mobilebar button {
            border: 1px solid rgba(255,255,255,.45);
            background: transparent;
            padding: 8px 12px;
            color: #fff;
            text-transform: uppercase;
            letter-spacing: .1em;
            font-size: 15px
        }

    .admin-mobile-nav {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        background: #0b4a44;
        padding: 8px 14px
    }

        .admin-mobile-nav a {
            padding: 10px;
            color: #fff;
            font-size: 15px;
            text-align: center
        }

    .admin-workspace > .admin-shell {
        min-height: calc(100vh - 64px);
        padding: 38px 22px
    }

    .admin-stat-grid {
        grid-template-columns: repeat(2,1fr)
    }

    .admin-quick-actions > div {
        grid-template-columns: 1fr
    }
}

@media(max-width:520px) {
    .admin-stat-grid {
        grid-template-columns: 1fr
    }

        .admin-stat-grid > a {
            min-height: 145px
        }

    .admin-mobile-nav {
        grid-template-columns: repeat(2,1fr)
    }

    .admin-title {
        display: block
    }

        .admin-title > .btn, .admin-title > button {
            margin-top: 20px
        }

    .admin-quick-actions {
        padding: 24px 18px
    }
}

/* Catalog variants and commerce */
.catalog-filters { display: grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap: 12px; padding: 20px; background: #f8f4ea; border-radius: 12px; margin-bottom: 20px; }
.catalog-filters label, .variant-picker { display: flex; flex-direction: column; gap: 7px; font-size: .85rem; font-weight: 600; }
.catalog-filters input, .catalog-filters select, .variant-picker select, .variant-picker input { width: 100%; min-width: 0; border: 1px solid #c9d5d0; border-radius: 7px; background: white; padding: 10px; font: inherit; color: #17332f; }
.variant-editor { min-width: 0; }
.variant-editor fieldset { min-width: 0; border: 1px solid #d2dbd6; border-radius: 12px; padding: 18px; margin: 16px 0; }
.variant-editor legend { font-weight: 700; padding: 0 8px; }
.variant-editor p, .variant-editor small { color: #63736f; }
.variant-picker { margin: 12px 0; }
.product-card-footer .variant-picker { font-size: .75rem; }
.commerce-page { max-width: 1100px; margin: auto; padding: 48px 24px; min-height: 65vh; }
.commerce-page h1 { font-family: 'Playfair Display', serif; font-size: clamp(2rem,5vw,3.5rem); }
.commerce-line { display: flex; gap: 20px; align-items: center; border-bottom: 1px solid #d2dbd6; padding: 24px 0; }
.commerce-line > div:first-child { flex: 1; }
.commerce-line h2 { font-size: 1.2rem; }
.commerce-order { border: 1px solid #d2dbd6; border-radius: 12px; padding: 24px; margin: 24px 0; }
.commerce-page .form-grid { margin: 24px 0; }
.commerce-page .underlink { margin: 16px; }
.preserve-lines { white-space: pre-line; }
button:disabled { cursor: not-allowed; opacity: .5; }
@media(max-width: 640px) { .commerce-line { flex-wrap: wrap; } .commerce-line > div:first-child { flex-basis: 100%; } .catalog-filters { grid-template-columns: 1fr; } }