:root {
    --deep-navy: #062B3A;
    --dark-teal: #074B59;
    --primary-teal: #078EA0;
    --bright-aqua: #19B9C5;
    --mint-surface: #E3F7EF;
    --aqua-surface: #E2F7F8;
    --lavender-surface: #F1EAF8;
    --blush-surface: #FBE9E7;
    --cream-surface: #FBF8ED;
    --white: #FFFFFF;
    --text-primary: #092A35;
    --text-muted: #60747B;
    --border-color: #B8DBDC;
    --success: #218A68;
    --warning: #D2A94F;
    --error: #B94A48;
    --container: 1240px;
    --section-space: clamp(3.5rem,7vw,6.5rem);
    --card-radius: 22px;
    --button-radius: 999px;
    --input-radius: 13px;
    --border: 1px solid var(--border-color);
    --shadow-soft: 0 14px 38px rgba(6,43,58,.08);
    --shadow-hover: 0 20px 46px rgba(6,43,58,.13);
    --focus-ring: 0 0 0 4px rgba(25,185,197,.24);
    --topbar-height: 32px;
    --header-height: 86px;
    --product-media-ratio: 4 / 3;
    --title-size: clamp(2rem,4vw,3.25rem);
    --ink: var(--text-primary);
    --muted: var(--text-muted);
    --line: var(--border-color);
    --paper: var(--white);
    --soft: var(--cream-surface);
    --cyan: var(--primary-teal);
    --cyan-dark: var(--dark-teal);
    --cyan-light: var(--aqua-surface);
    --mint: var(--mint-surface);
    --navy: var(--deep-navy);
    --danger: var(--error);
    --shadow: var(--shadow-soft);
    --radius: var(--card-radius)
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth;
    overflow-x: clip
}

body {
    margin: 0;
    color: var(--ink);
    background: #fff;
    font-family: Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-wrap: break-word
}

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

img {
    display: block;
    max-width: 100%
}

button, input, select, textarea {
    font: inherit;
    color: inherit
}

button, a {
    transition: .2s ease
}

.container {
    width: min(var(--container),calc(100% - 40px));
    margin-inline: auto
}

main,
main > *,
.container {
    min-width: 0
}

:where(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid var(--cyan-dark);
    outline-offset: 3px
}

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

.topbar {
    background: var(--navy);
    color: #d8f3f5;
    font-size: 12px
}

.topbar-inner {
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.topbar-contact {
    display: inline-flex;
    align-items: center;
    gap: 7px
}

.topbar-contact a {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    font-weight: 700
}

.site-header {
    background: #fff;
    position: relative;
    z-index: 20;
    box-shadow: 0 1px 0 var(--line)
}

.header-main {
    min-height: 84px;
    display: grid;
    grid-template-columns: 92px minmax(190px,1fr) auto;
    align-items: center;
    gap: clamp(14px,2.2vw,32px)
}

.brand {
    display: inline-flex;
    align-items: center;
    min-width: 0
}

.brand-logo {
    display: block;
    width: 84px;
    height: 72px;
    max-width: 100%;
    object-fit: contain
}

.header-search {
    min-height: 46px;
    display: flex;
    flex: 1;
    max-width: 520px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #f8fbfb;
    overflow: hidden
}

    .header-search:focus-within {
        border-color: var(--cyan);
        box-shadow: 0 0 0 3px rgba(0,169,192,.1)
    }

    .header-search input {
        flex: 1;
        border: 0;
        background: transparent;
        padding: 0 21px;
        outline: 0;
        min-width: 0
    }

    .header-search button {
        width: 48px;
        border: 0;
        background: transparent;
        cursor: pointer;
        color: var(--cyan-dark);
        display: grid;
        place-items: center;
        flex: 0 0 48px
    }

.header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    min-width: 0
}

    .header-actions > a {
        position: relative;
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 46px;
        padding: 7px 9px;
        border-radius: 10px;
        font-size: 13px;
        font-weight: 700;
        white-space: nowrap
    }

        .header-actions > a:hover,
        .header-actions > a[aria-current="page"] {
            background: var(--cyan-light);
            color: var(--cyan-dark)
        }

    .header-actions small {
        display: block;
        color: var(--muted);
        font-size: 10px;
        font-weight: 500
    }

    .header-actions .rx-link {
        background: var(--cyan-light);
        color: var(--cyan-dark)
    }

.nav-icon {
    width: 21px;
    height: 21px;
    flex: 0 0 21px;
    display: block;
    color: var(--cyan-dark)
}

.header-actions .nav-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--cyan-dark);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1
}

.nav-badge[hidden],
[data-notification-count][hidden] {
    display: none !important
}

.cart-count {
    display: inline-grid !important;
    place-items: center;
    background: var(--cyan);
    color: #fff !important;
    border-radius: 999px;
    width: 20px;
    height: 20px;
    font-weight: 800
}

.menu-toggle {
    display: none;
    border: 0;
    background: transparent;
    cursor: pointer
}

.main-nav {
    border-top: 1px solid #eef3f3;
    background: #fff
}

.nav-inner {
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(12px,1.5vw,22px);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin
}

    .nav-inner a {
        font-size: 13px;
        font-weight: 700;
        color: #29444a
    }

        .nav-inner a:hover {
            color: var(--cyan-dark)
        }

.mobile-nav-search {
    display: none
}

.toast, .admin-alert {
    position: fixed;
    z-index: 99;
    right: 24px;
    top: 116px;
    padding: 14px 20px;
    border-radius: 12px;
    background: #0c6d5c;
    color: #fff;
    box-shadow: var(--shadow);
    animation: toast-in .35s ease both
}

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

.hero {
    background: linear-gradient(105deg,#daf6f8 0%,#ecfbfa 55%,#c9f3f6 100%);
    overflow: hidden
}

.hero--posters {
    position: relative;
    background: #e8f8f7
}

.hero-accessible-title {
    margin: -1px !important
}

.hero-poster-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 48 / 17;
    background: #e8f8f7
}

.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .9s ease
}

    .hero-slide.is-active {
        z-index: 1;
        opacity: 1
    }

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

.hero-poster-cta {
    position: relative;
    z-index: 3;
    border-top: 1px solid rgba(0,127,148,.14);
    background: linear-gradient(105deg,#d8f3f4,#eefafa)
}

    .hero-poster-cta .hero-actions {
        justify-content: center;
        gap: 12px;
        margin: 0 auto;
        padding-block: 18px
    }

    .hero-poster-cta .btn {
        min-height: 46px;
        white-space: nowrap
    }

.hero .hero-actions .btn-outline {
    border-color: #087b8d;
    background: #087b8d;
    color: #fff
}

    .hero .hero-actions .btn-outline:hover {
        border-color: #075e70;
        background: #075e70;
        color: #fff
    }

.hero-grid {
    min-height: 535px;
    display: grid;
    grid-template-columns: 1.02fr .98fr;
    align-items: center
}

.hero-copy {
    position: relative;
    z-index: 2;
    padding: 60px 0
}

.pill, .kicker {
    display: inline-block;
    font-size: 10px;
    letter-spacing: .19em;
    font-weight: 800;
    color: var(--cyan-dark)
}

.pill {
    background: rgba(255,255,255,.8);
    border: 1px solid rgba(0,127,148,.15);
    padding: 7px 12px;
    border-radius: 999px
}

.hero h1, .page-hero h1, .rx-hero h1 {
    font-size: clamp(40px,5vw,69px);
    line-height: 1.01;
    letter-spacing: -.045em;
    margin: 21px 0
}

    .hero h1 em {
        font-style: normal;
        color: var(--cyan-dark)
    }

.hero-copy > p {
    font-size: 18px;
    max-width: 560px;
    color: #3f6269
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 25px;
    margin: 31px 0
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 13px 22px;
    font-weight: 800;
    font-size: 13px;
    cursor: pointer
}

    .btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 24px rgba(16,44,53,.12)
    }

.btn-primary {
    background: var(--cyan);
    color: #fff
}

    .btn-primary:hover {
        background: var(--cyan-dark)
    }

.btn-dark {
    background: var(--navy);
    color: #fff
}

.btn-light {
    background: #fff;
    color: var(--cyan-dark)
}

.btn-outline {
    border-color: #b9d7d9;
    background: #fff;
    color: var(--ink)
}

.btn-small {
    width: 100%;
    padding: 10px 16px
}

.btn-block {
    width: 100%
}

.btn[disabled] {
    background: #e9efef;
    color: #91a1a4;
    cursor: not-allowed
}

.text-link {
    border: 0;
    background: none;
    color: var(--cyan-dark);
    font-weight: 800;
    font-size: 13px;
    cursor: pointer
}

.trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    color: #45666d;
    font-size: 12px;
    font-weight: 600
}

    .trust-row span::first-letter {
        color: #0f8e70
    }

.hero-art {
    position: relative;
    height: 100%;
    min-height: 535px
}

.sun {
    position: absolute;
    width: 430px;
    height: 430px;
    right: -20px;
    top: 45px;
    border-radius: 50%;
    background: #a6e8ee
}

.cross {
    position: absolute;
    right: 72px;
    top: 57px;
    color: rgba(255,255,255,.7);
    font-size: 145px;
    font-weight: 200
}

.hero-card {
    position: absolute;
    background: #fff;
    border-radius: 25px;
    box-shadow: 0 22px 60px rgba(10,91,103,.14)
}

.hero-card-a {
    left: 5px;
    bottom: 63px;
    width: 220px;
    padding: 23px
}

    .hero-card-a span {
        font-size: 11px;
        color: var(--cyan-dark);
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .1em
    }

    .hero-card-a strong {
        display: block;
        font-size: 19px;
        margin-top: 6px;
        line-height: 1.25
    }

.hero-card-b {
    right: 46px;
    bottom: 0;
    width: 280px;
    height: 350px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: linear-gradient(#eafafa,#fff)
}

    .hero-card-b img {
        width: 225px;
        height: 300px;
        object-fit: contain
    }

.leaf {
    position: absolute;
    width: 70px;
    height: 150px;
    background: #3faf8e;
    border-radius: 100% 0 100% 0;
    opacity: .6
}

.leaf-a {
    right: 1px;
    bottom: 27px;
    transform: rotate(20deg)
}

.leaf-b {
    right: 281px;
    top: 69px;
    transform: rotate(-31deg);
    opacity: .28
}

.benefits {
    border-bottom: 1px solid var(--line);
    background: #fff
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    padding: 23px 0
}

    .benefits-grid > div {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        padding: 0 20px;
        border-right: 1px solid var(--line)
    }

        .benefits-grid > div:last-child {
            border: 0
        }

.benefits i {
    font-style: normal;
    display: grid;
    place-items: center;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: var(--cyan-light);
    color: var(--cyan-dark);
    font-size: 17px
}

.benefits strong, .benefits small {
    display: block
}

.benefits strong {
    font-size: 13px
}

.benefits small {
    font-size: 10px;
    color: var(--muted)
}

.section {
    padding-top: 88px;
    padding-bottom: 88px
}

.section-soft {
    background: var(--soft)
}

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

    .section-head.centered {
        display: block;
        text-align: center
    }

    .section-head h2 {
        font-size: 34px;
        letter-spacing: -.035em;
        margin: 7px 0 3px
    }

    .section-head p {
        margin: 0;
        color: var(--muted)
    }

.category-grid {
    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap: 18px
}

.category-card {
    text-align: center;
    padding: 10px 4px
}

.category-image {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--soft);
    border: 1px solid #e7eeee;
    margin-bottom: 14px;
    overflow: hidden
}

.category-card:nth-child(even) .category-image {
    background: #ebf9f7
}

.category-card img {
    width: 70%;
    height: 70%;
    object-fit: contain
}

.category-card strong, .category-card small {
    display: block
}

.category-card strong {
    font-size: 13px
}

.category-card small {
    font-size: 10px;
    color: var(--muted);
    margin-top: 3px
}

.category-card:hover .category-image {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
    border-color: #bfe8ea
}

.category-image {
    transition: .2s ease
}

.home-category-grid {
    display: grid;
    grid-template-columns: repeat(7,minmax(0,1fr));
    gap: 14px 18px;
    overflow: visible
}

.home-categories {
    position: relative;
    z-index: 4;
    width: min(var(--container),calc(100% - 40px));
    padding-top: 64px;
    overflow: visible
}

.home-products .section-head h2 {
    margin-bottom: 0
}

.home-products .product-grid {
    grid-template-columns: repeat(4,minmax(0,1fr));
    align-items: stretch
}

.home-products .product-card {
    display: flex;
    height: 100%;
    flex-direction: column
}

.home-products .product-body {
    display: flex;
    flex: 1;
    flex-direction: column
}

.home-products .product-card-form,
.home-products .product-card-action {
    margin-top: auto
}

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

@media (max-width: 540px) {
    .home-products .product-grid {
        grid-template-columns: minmax(0,1fr);
        gap: 16px
    }
}

.home-category-group {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 160px;
    place-items: center;
    overflow: visible;
    z-index: 1
}

    .home-category-group:hover,
    .home-category-group:focus-within,
    .home-category-group.is-expanded {
        z-index: 110
    }

.home-category-main {
    position: relative;
    z-index: 3;
    display: flex;
    width: 140px;
    height: 140px;
    padding: 12px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid #d7ecea;
    border-radius: 50%;
    background: linear-gradient(145deg,#f3fbf9,#dff6ec);
    box-shadow: 0 14px 38px rgba(13,54,63,.1);
    text-align: center
}

.home-category-group:nth-child(even) .home-category-main {
    background: linear-gradient(145deg,#f5fcfc,#dff8fb)
}

.home-category-main:hover {
    border-color: #9edbde;
    box-shadow: 0 18px 46px rgba(13,54,63,.14);
    transform: translateY(-3px)
}

.home-category-image {
    display: grid;
    width: 48px;
    height: 48px;
    margin-bottom: 6px;
    place-items: center
}

    .home-category-image img {
        width: 100%;
        height: 100%;
        object-fit: contain
    }

.home-category-main strong,
.home-category-main small,
.home-category-main span {
    display: block
}

.home-category-main strong {
    max-width: 122px;
    font-size: 14px;
    line-height: 1.18
}

.home-category-main small {
    margin-top: 4px;
    color: var(--muted);
    font-size: 11px
}

.home-category-children {
    position: absolute;
    z-index: 4;
    inset: 0;
    overflow: visible;
    pointer-events: none
}

.home-category-child {
    --orbit-x: 0px;
    --orbit-y: -145px;
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    width: 84px;
    height: 84px;
    padding: 8px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid #bfe4e4;
    border-radius: 50%;
    background: rgba(255,255,255,.99);
    box-shadow: 0 10px 28px rgba(13,54,63,.13);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    text-align: center;
    transform: translate(calc(-50% + var(--orbit-x)),calc(-50% + var(--orbit-y))) scale(.72);
    transition: opacity .2s ease,visibility 0s linear .24s,transform .24s ease,border-color .2s ease,box-shadow .2s ease
}

.home-category-child--long {
    width: 96px;
    height: 96px;
    padding: 9px
}

.home-category-child strong {
    max-width: 100%;
    font-size: 10px;
    line-height: 1.12;
    overflow-wrap: anywhere
}

.home-category-child small {
    margin-top: 4px;
    color: var(--muted);
    font-size: 9px;
    line-height: 1.15
}

.home-category-child:hover {
    border-color: var(--cyan);
    box-shadow: 0 13px 31px rgba(0,127,148,.19)
}

.home-category-all {
    display: none
}

    .home-category-main:focus-visible,
    .home-category-child:focus-visible,
    .home-category-all:focus-visible {
        outline: 3px solid rgba(0,169,192,.32);
        outline-offset: 4px
    }

/*
 * CSP-safe desktop orbit map.
 * No inline style attributes and no JavaScript style mutation are required.
 *
 * UX rules requested:
 * - first/root-left category (Personal Care) opens entirely to the LEFT;
 * - last/root-right category (Medical Supplies) opens entirely to the RIGHT;
 * - two-child groups open one ABOVE and one BELOW;
 * - three-child groups (Everyday Essentials) open all three BELOW.
 */

/* One child: open above the parent. */
.orbit-count-1.orbit-index-0 {
    --orbit-x: 0px;
    --orbit-y: -145px
}

/* Two children: one above, one below. */
.orbit-count-2.orbit-index-0 {
    --orbit-x: 0px;
    --orbit-y: -145px
}

.orbit-count-2.orbit-index-1 {
    --orbit-x: 0px;
    --orbit-y: 145px
}

/* Three children: all below the parent (Everyday Essentials). */
.orbit-count-3.orbit-index-0 {
    --orbit-x: -110px;
    --orbit-y: 145px
}

.orbit-count-3.orbit-index-1 {
    --orbit-x: 0px;
    --orbit-y: 180px
}

.orbit-count-3.orbit-index-2 {
    --orbit-x: 110px;
    --orbit-y: 145px
}

/* FIRST ROOT: Personal Care -> children open LEFT */
.orbit-edge-left .orbit-count-8.orbit-index-0 {
    --orbit-x: -103px;
    --orbit-y: -170px;
}

.orbit-edge-left .orbit-count-8.orbit-index-1 {
    --orbit-x: -198px;
    --orbit-y: -170px;
}

.orbit-edge-left .orbit-count-8.orbit-index-2 {
    --orbit-x: -115px;
    --orbit-y: -58px;
}

.orbit-edge-left .orbit-count-8.orbit-index-3 {
    --orbit-x: -210px;
    --orbit-y: -58px;
}

.orbit-edge-left .orbit-count-8.orbit-index-4 {
    --orbit-x: -210px;
    --orbit-y: 58px;
}

.orbit-edge-left .orbit-count-8.orbit-index-5 {
    --orbit-x: -115px;
    --orbit-y: 58px;
}

.orbit-edge-left .orbit-count-8.orbit-index-6 {
    --orbit-x: -198px;
    --orbit-y: 170px;
}

.orbit-edge-left .orbit-count-8.orbit-index-7 {
    --orbit-x: -103px;
    --orbit-y: 170px;
}

/* LAST ROOT: Medical Supplies -> children open RIGHT */
.orbit-edge-right .orbit-count-6.orbit-index-0 {
    --orbit-x: 130px;
    --orbit-y: -115px;
}

.orbit-edge-right .orbit-count-6.orbit-index-1 {
    --orbit-x: 225px;
    --orbit-y: -115px;
}

.orbit-edge-right .orbit-count-6.orbit-index-2 {
    --orbit-x: 130px;
    --orbit-y: 0px;
}

.orbit-edge-right .orbit-count-6.orbit-index-3 {
    --orbit-x: 225px;
    --orbit-y: 0px;
}

.orbit-edge-right .orbit-count-6.orbit-index-4 {
    --orbit-x: 130px;
    --orbit-y: 115px;
}

.orbit-edge-right .orbit-count-6.orbit-index-5 {
    --orbit-x: 225px;
    --orbit-y: 115px;
}

/* Safe generic fallbacks if a group changes size later. */
.orbit-edge-center .orbit-count-4.orbit-index-0 {
    --orbit-x: -105px;
    --orbit-y: -125px
}

.orbit-edge-center .orbit-count-4.orbit-index-1 {
    --orbit-x: 105px;
    --orbit-y: -125px
}

.orbit-edge-center .orbit-count-4.orbit-index-2 {
    --orbit-x: -105px;
    --orbit-y: 125px
}

.orbit-edge-center .orbit-count-4.orbit-index-3 {
    --orbit-x: 105px;
    --orbit-y: 125px
}

.orbit-edge-center .orbit-count-5.orbit-index-0 {
    --orbit-x: -130px;
    --orbit-y: -115px
}

.orbit-edge-center .orbit-count-5.orbit-index-1 {
    --orbit-x: 0px;
    --orbit-y: -155px
}

.orbit-edge-center .orbit-count-5.orbit-index-2 {
    --orbit-x: 130px;
    --orbit-y: -115px
}

.orbit-edge-center .orbit-count-5.orbit-index-3 {
    --orbit-x: -95px;
    --orbit-y: 125px
}

.orbit-edge-center .orbit-count-5.orbit-index-4 {
    --orbit-x: 95px;
    --orbit-y: 125px
}

.orbit-edge-center .orbit-count-6.orbit-index-0 {
    --orbit-x: -145px;
    --orbit-y: -105px
}

.orbit-edge-center .orbit-count-6.orbit-index-1 {
    --orbit-x: 0px;
    --orbit-y: -160px
}

.orbit-edge-center .orbit-count-6.orbit-index-2 {
    --orbit-x: 145px;
    --orbit-y: -105px
}

.orbit-edge-center .orbit-count-6.orbit-index-3 {
    --orbit-x: -145px;
    --orbit-y: 105px
}

.orbit-edge-center .orbit-count-6.orbit-index-4 {
    --orbit-x: 0px;
    --orbit-y: 160px
}

.orbit-edge-center .orbit-count-6.orbit-index-5 {
    --orbit-x: 145px;
    --orbit-y: 105px
}

.orbit-edge-center .orbit-count-7.orbit-index-0 {
    --orbit-x: -150px;
    --orbit-y: -120px
}

.orbit-edge-center .orbit-count-7.orbit-index-1 {
    --orbit-x: 0px;
    --orbit-y: -175px
}

.orbit-edge-center .orbit-count-7.orbit-index-2 {
    --orbit-x: 150px;
    --orbit-y: -120px
}

.orbit-edge-center .orbit-count-7.orbit-index-3 {
    --orbit-x: -170px;
    --orbit-y: 20px
}

.orbit-edge-center .orbit-count-7.orbit-index-4 {
    --orbit-x: 170px;
    --orbit-y: 20px
}

.orbit-edge-center .orbit-count-7.orbit-index-5 {
    --orbit-x: -90px;
    --orbit-y: 155px
}

.orbit-edge-center .orbit-count-7.orbit-index-6 {
    --orbit-x: 90px;
    --orbit-y: 155px
}

.orbit-edge-center .orbit-count-8.orbit-index-0 {
    --orbit-x: -155px;
    --orbit-y: -125px
}

.orbit-edge-center .orbit-count-8.orbit-index-1 {
    --orbit-x: -55px;
    --orbit-y: -175px
}

.orbit-edge-center .orbit-count-8.orbit-index-2 {
    --orbit-x: 55px;
    --orbit-y: -175px
}

.orbit-edge-center .orbit-count-8.orbit-index-3 {
    --orbit-x: 155px;
    --orbit-y: -125px
}

.orbit-edge-center .orbit-count-8.orbit-index-4 {
    --orbit-x: -155px;
    --orbit-y: 125px
}

.orbit-edge-center .orbit-count-8.orbit-index-5 {
    --orbit-x: -55px;
    --orbit-y: 175px
}

.orbit-edge-center .orbit-count-8.orbit-index-6 {
    --orbit-x: 55px;
    --orbit-y: 175px
}

.orbit-edge-center .orbit-count-8.orbit-index-7 {
    --orbit-x: 155px;
    --orbit-y: 125px
}

@media(min-width:1024px) {
    .home-categories {
        isolation: isolate
    }

    .home-categories .home-category-grid,
    .home-categories .home-category-group {
        overflow: visible
    }

    .home-categories .home-category-group {
        min-height: 160px
    }

    .home-categories .home-category-main {
        width: 140px;
        height: 140px
    }

    .home-categories .home-category-group.is-expanded .home-category-main {
        border-color: var(--cyan);
        box-shadow: 0 18px 46px rgba(13,54,63,.16)
    }

    .home-categories .home-category-children {
        position: absolute;
        inset: 0;
        display: block;
        width: auto;
        height: auto;
        max-height: none;
        margin: 0;
        padding: 0;
        overflow: visible;
        border: 0;
        background: transparent;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        pointer-events: none;
        transform: none
    }

    .home-categories .home-category-all {
        display: none
    }

    .home-categories .home-category-child,
    .home-categories .home-category-child--long {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 82px;
        height: 82px;
        min-height: 0;
        padding: 7px;
        margin: 0;
        border-radius: 50%;
        box-shadow: 0 10px 28px rgba(13,54,63,.14);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translate(calc(-50% + var(--orbit-x,0px)),calc(-50% + var(--orbit-y,0px))) scale(.82)
    }

    .home-categories .home-category-child--long {
        width: 94px;
        height: 94px;
        padding: 8px
    }

    .home-categories .home-category-group:focus-within .home-category-children,
    .home-categories .home-category-group.is-expanded .home-category-children {
        pointer-events: auto
    }

    .home-categories .home-category-group:focus-within .home-category-child,
    .home-categories .home-category-group.is-expanded .home-category-child {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translate(calc(-50% + var(--orbit-x,0px)),calc(-50% + var(--orbit-y,0px))) scale(1)
    }

    /* Edge fans open outward; their parent columns are inset below. */
    .home-categories .orbit-edge-left .orbit-count-8.orbit-index-0 { --orbit-x: -103px; --orbit-y: -170px }
    .home-categories .orbit-edge-left .orbit-count-8.orbit-index-1 { --orbit-x: -198px; --orbit-y: -170px }
    .home-categories .orbit-edge-left .orbit-count-8.orbit-index-2 { --orbit-x: -115px; --orbit-y: -58px }
    .home-categories .orbit-edge-left .orbit-count-8.orbit-index-3 { --orbit-x: -210px; --orbit-y: -58px }
    .home-categories .orbit-edge-left .orbit-count-8.orbit-index-4 { --orbit-x: -210px; --orbit-y: 58px }
    .home-categories .orbit-edge-left .orbit-count-8.orbit-index-5 { --orbit-x: -115px; --orbit-y: 58px }
    .home-categories .orbit-edge-left .orbit-count-8.orbit-index-6 { --orbit-x: -198px; --orbit-y: 170px }
    .home-categories .orbit-edge-left .orbit-count-8.orbit-index-7 { --orbit-x: -103px; --orbit-y: 170px }

    .home-categories .orbit-edge-right .orbit-count-6.orbit-index-0 { --orbit-x: 130px; --orbit-y: -115px }
    .home-categories .orbit-edge-right .orbit-count-6.orbit-index-1 { --orbit-x: 225px; --orbit-y: -115px }
    .home-categories .orbit-edge-right .orbit-count-6.orbit-index-2 { --orbit-x: 130px; --orbit-y: 0px }
    .home-categories .orbit-edge-right .orbit-count-6.orbit-index-3 { --orbit-x: 225px; --orbit-y: 0px }
    .home-categories .orbit-edge-right .orbit-count-6.orbit-index-4 { --orbit-x: 130px; --orbit-y: 115px }
    .home-categories .orbit-edge-right .orbit-count-6.orbit-index-5 { --orbit-x: 225px; --orbit-y: 115px }

    .home-categories .orbit-count-2.orbit-index-0 { --orbit-x: 0px; --orbit-y: -155px }
    .home-categories .orbit-count-2.orbit-index-1 { --orbit-x: 0px; --orbit-y: 155px }
    .home-categories .orbit-count-1.orbit-index-0 { --orbit-x: 0px; --orbit-y: -155px }
    .home-categories .orbit-count-3.orbit-index-0 { --orbit-x: -105px; --orbit-y: 145px }
    .home-categories .orbit-count-3.orbit-index-1 { --orbit-x: 0px; --orbit-y: 205px }
    .home-categories .orbit-count-3.orbit-index-2 { --orbit-x: 105px; --orbit-y: 145px }
}

@media(min-width:1024px) and (hover:hover) and (pointer:fine) {
    .home-categories .home-category-group:hover .home-category-children {
        pointer-events: auto
    }

    .home-categories .home-category-group:hover .home-category-child {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translate(calc(-50% + var(--orbit-x,0px)),calc(-50% + var(--orbit-y,0px))) scale(1)
    }
}

@media(max-width:1200px) and (min-width:1001px) {
    .home-category-grid {
        grid-template-columns: repeat(4,minmax(0,1fr));
        gap: 16px 18px
    }
}

@media(max-width:1000px) and (min-width:901px) {
    .home-category-grid {
        grid-template-columns: repeat(3,minmax(0,1fr));
        gap: 16px 18px
    }
}

@media(max-width:1023px) {
    .home-category-grid {
        grid-template-columns: repeat(3,minmax(0,1fr));
        gap: 14px;
        align-items: start
    }

    .home-category-group {
        display: flex;
        min-height: 0;
        padding: 14px 12px;
        flex-direction: column;
        justify-content: flex-start;
        border: 1px solid #e0ecec;
        border-radius: 24px;
        background: #fbfdfd
    }

    .home-category-main {
        width: 132px;
        height: 132px;
        padding: 12px;
        flex: 0 0 auto
    }

    .home-category-image {
        width: 46px;
        height: 46px
    }

    .home-category-children {
        position: static;
        display: grid;
        width: 100%;
        max-height: 0;
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 8px;
        margin-top: 0;
        overflow: hidden;
        opacity: 0;
        pointer-events: none;
        transition: max-height .24s ease,margin-top .24s ease,opacity .2s ease;
        visibility: hidden
    }

    .home-category-group.is-expanded .home-category-children {
        max-height: 900px;
        margin-top: 16px;
        opacity: 1;
        pointer-events: auto;
        visibility: visible
    }

    .home-category-group.is-expanded {
        grid-column: 1 / -1
    }

        .home-category-child,
        .home-category-child--long,
        .home-category-group.is-expanded .home-category-child {
            position: static;
            width: auto;
            height: auto;
            min-height: 58px;
            padding: 10px 12px;
            border-radius: 14px;
            box-shadow: none;
            opacity: 1;
            transform: none;
            transition: border-color .2s ease,background .2s ease
        }

    .home-category-child {
        visibility: hidden
    }

    .home-category-group.is-expanded .home-category-child {
        visibility: visible;
        pointer-events: auto
    }

    .home-category-child strong {
        font-size: 11px
    }

    .home-category-child small {
        font-size: 9px
    }

    .home-category-all {
        display: block;
        grid-column: 1 / -1;
        padding: 9px 10px;
        border-radius: 12px;
        background: var(--cyan-light);
        color: var(--cyan-dark);
        font-size: 11px;
        font-weight: 800;
        text-align: center
    }
}

@media(max-width:700px) {
    .home-category-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 12px
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    .hero-slide {
        transition: none
    }

    .home-category-main,
    .home-category-child,
    .home-category-children {
        transition: none
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important
    }
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    align-items: stretch;
    gap: 20px
}

.product-card {
    position: relative;
    display: flex;
    min-width: 0;
    height: 100%;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #e3eded;
    border-radius: var(--radius);
    background: #fff;
    transition: .22s ease
}

    .product-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow);
        border-color: transparent
    }

.product-media {
    position: relative;
    flex: 0 0 auto;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: linear-gradient(145deg,#f6fbfa,#edf6f5)
}

.product-image {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    padding: clamp(12px,1.5vw,22px);
    overflow: hidden
}

    .product-image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center
    }

.rx-badge {
    position: absolute;
    left: 12px;
    top: 12px;
    background: var(--navy);
    color: #fff;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .07em;
    font-weight: 800;
    padding: 6px 9px;
    border-radius: 999px
}

.product-body {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    padding: 16px
}

.eyebrow {
    display: block;
    color: var(--cyan-dark);
    font-size: 9px;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 800
}

.product-body h3 {
    font-size: 15px;
    line-height: 1.35;
    margin: 7px 0 5px;
    min-height: 2.7em;
    overflow: hidden;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2
}

.variant {
    font-size: 11px;
    color: var(--muted);
    margin: 0;
    min-height: 1.55em;
    overflow-wrap: anywhere
}

.product-meta {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 16px
}

    .product-meta strong {
        font-size: 17px
    }

    .product-meta del {
        display: block;
        color: #91a1a4;
        font-size: 10px
    }

.product-price {
    min-width: 0
}

.product-actions {
    margin-top: 13px
}

.product-card-form {
    margin: 0
}

.product-card-action {
    width: 100%;
    min-height: 44px
}

.stock {
    flex: 0 0 auto;
    font-size: 9px;
    font-weight: 800;
    padding: 5px 7px;
    border-radius: 999px
}

    .stock.in {
        color: #077c62;
        background: #e4f8f1
    }

    .stock.out {
        color: #9b3d45;
        background: #fdebee
    }

.out-of-stock-action {
    white-space: normal;
    line-height: 1.2
}

.promo-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 22px
}

.promo {
    min-height: 295px;
    position: relative;
    border-radius: 26px;
    padding: 42px;
    overflow: hidden;
    display: flex
}

    .promo > div {
        position: relative;
        z-index: 2;
        max-width: 60%
    }

    .promo h2 {
        font-size: 30px;
        line-height: 1.1;
        letter-spacing: -.035em;
        margin: 9px 0
    }

    .promo p {
        font-size: 14px
    }

    .promo img {
        position: absolute;
        width: 260px;
        height: 270px;
        object-fit: contain;
        right: 15px;
        bottom: -20px
    }

.promo-cyan {
    background: linear-gradient(120deg,#0ab4ca,#78dce4);
    color: #fff
}

    .promo-cyan .kicker {
        color: #dffbff
    }

.promo-mint {
    background: var(--mint)
}

    .promo-mint > div {
        max-width: 75%
    }

.promo-rx {
    position: absolute;
    font-weight: 900;
    font-size: 160px;
    color: rgba(0,128,112,.08);
    right: 20px;
    bottom: -41px
}

.values-band {
    background: var(--navy);
    color: #fff
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 70px
}

    .values-grid > div {
        position: relative;
        padding-left: 60px
    }

.big-number {
    position: absolute;
    left: 0;
    top: -8px;
    font-size: 40px;
    color: #2b7180;
    font-weight: 900
}

.values-grid h3 {
    margin: 0 0 8px
}

.values-grid p {
    margin: 0;
    color: #b4d1d5
}

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px
}

    .testimonial-grid blockquote {
        margin: 0;
        border: 1px solid var(--line);
        border-radius: 18px;
        padding: 27px;
        background: #fff;
        box-shadow: 0 7px 22px rgba(13,54,63,.04)
    }

        .testimonial-grid blockquote > p {
            font-family: Georgia,serif;
            font-size: 16px;
            line-height: 1.6
        }

.stars {
    color: #e9ad25;
    letter-spacing: 3px
}

.testimonial-grid footer {
    display: flex;
    align-items: center;
    gap: 11px
}

.avatar {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--cyan-light);
    color: var(--cyan-dark);
    font-weight: 900;
    font-size: 11px
}

.testimonial-grid strong, .testimonial-grid small {
    display: block
}

.testimonial-grid small {
    font-size: 10px;
    color: var(--muted)
}

.brand-strip {
    border-block: 1px solid var(--line);
    padding: 30px 0
}

    .brand-strip .container {
        display: flex;
        align-items: center;
        gap: 50px
    }

    .brand-strip span {
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: .14em;
        color: var(--muted)
    }

    .brand-strip div div {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex: 1;
        gap: 40px;
        color: #799096
    }

    .brand-strip b {
        font-size: 12px;
        letter-spacing: .04em
    }

.article-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 22px
}

    .article-grid article {
        border: 1px solid var(--line);
        border-radius: 18px;
        overflow: hidden;
        background: #fff
    }

        .article-grid article > div:last-child {
            padding: 22px
        }

    .article-grid h3 {
        font-size: 18px;
        line-height: 1.35;
        margin: 8px 0
    }

    .article-grid p {
        font-size: 13px;
        color: var(--muted)
    }

    .article-grid a {
        font-weight: 800;
        color: var(--cyan-dark);
        font-size: 12px
    }

    .article-grid small {
        font-size: 10px;
        color: var(--muted)
    }

.article-art {
    height: 185px;
    display: flex;
    align-items: end;
    padding: 20px;
    background-color: #dff5f2;
    background-size: cover
}

    .article-art span {
        font-size: 9px;
        font-weight: 800;
        background: #fff;
        padding: 5px 8px;
        border-radius: 999px
    }

.art-one {
    background-image: radial-gradient(circle at 70% 40%,#7ad6dc 0 16%,transparent 17%),linear-gradient(135deg,#cff1ed,#edfafa)
}

.art-two {
    background-image: linear-gradient(135deg,rgba(13,166,183,.2),rgba(51,157,105,.25)),repeating-linear-gradient(45deg,transparent 0 25px,rgba(255,255,255,.2) 26px 27px)
}

.art-three {
    background-image: radial-gradient(circle at 25% 40%,#fff 0 12%,transparent 13%),linear-gradient(135deg,#dff7fa,#b7e5ec)
}

.newsletter {
    background: #dff5f6
}

.newsletter-inner {
    min-height: 230px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px
}

.newsletter h2 {
    font-size: 32px;
    margin: 7px 0
}

.newsletter p {
    margin: 0;
    color: var(--muted)
}

.newsletter form {
    display: flex;
    background: #fff;
    border-radius: 999px;
    padding: 6px;
    width: 460px
}

.newsletter input {
    border: 0;
    outline: 0;
    flex: 1;
    padding: 0 18px;
    min-width: 0
}

.footer {
    background: #082d37;
    color: #c0d7da;
    padding: 70px 0 20px
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr repeat(3,1fr);
    gap: 60px
}

.footer h3 {
    color: #fff;
    font-size: 13px;
    margin: 0 0 17px
}

.footer section > a {
    display: block;
    color: #b7ced2;
    font-size: 12px;
    margin: 10px 0
}

.footer p {
    font-size: 12px;
    line-height: 1.8
}

.footer-brand > p {
    max-width: 350px
}

.footer-brand > .brand,
.admin-sidebar > .brand {
    width: max-content;
    min-width: 0;
    padding: 8px;
    border-radius: 12px;
    background: #fff
}

.location-pill {
    display: inline-block;
    border: 1px solid #28515a;
    border-radius: 999px;
    padding: 8px 13px;
    font-size: 11px
}

.footer-bottom {
    border-top: 1px solid #234852;
    margin-top: 50px;
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    font-size: 10px
}

.page-hero {
    background: linear-gradient(120deg,#e2f8f9,#f5fbfa);
    padding: clamp(42px,5vw,64px) 0
}

    .page-hero.compact {
        padding: clamp(32px,4vw,46px) 0
    }

    .page-hero h1 {
        font-size: clamp(34px,4vw,47px);
        line-height: 1.08;
        overflow-wrap: anywhere;
        margin: 8px 0
    }

    .page-hero p {
        color: var(--muted);
        font-size: 17px;
        margin: 0
    }

    .page-hero .btn {
        margin-top: 20px
    }

.shop-layout {
    display: grid;
    grid-template-columns: 235px 1fr;
    gap: 40px;
    padding-top: 55px;
    padding-bottom: 90px
}

.filters {
    border-right: 1px solid var(--line);
    padding-right: 28px;
    min-width: 0
}

    .filters > summary {
        display: none
    }

    .filters form {
        display: block;
        position: sticky;
        top: 20px
    }

    .filters h2 {
        font-size: 19px;
        margin-top: 0
    }

    .filters label, .auth-card label, .panel label, .admin-panel label {
        display: block;
        font-size: 11px;
        font-weight: 750;
        margin: 17px 0 6px
    }

    .filters input, .filters select, .auth-card input, .panel input, .panel select, .panel textarea, .admin-panel input, .admin-panel select, .admin-panel textarea, .admin-title select {
        display: block;
        width: 100%;
        min-width: 0;
        min-height: 44px;
        border: 1px solid #cfdedf;
        background: #fff;
        border-radius: 10px;
        padding: 11px 12px;
        outline: none
    }

        .filters input:focus, .filters select:focus, .auth-card input:focus, .panel input:focus, .panel select:focus, .panel textarea:focus, .admin-panel input:focus {
            border-color: var(--cyan);
            box-shadow: 0 0 0 3px rgba(0,169,192,.09)
        }

.price-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px
}

.check {
    display: flex !important;
    align-items: center;
    gap: 8px
}

    .check input {
        width: auto !important;
        margin: 0
    }

.filters .btn {
    width: 100%;
    margin-top: 15px
}

.filter-reset {
    display: block;
    text-align: center;
    font-size: 11px;
    color: var(--muted);
    margin-top: 10px
}

.shop-results {
    min-width: 0;
    scroll-margin-top: 24px
}

    .shop-results:focus {
        outline: none
    }

.active-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px
}

    .active-filters strong {
        color: var(--navy);
        font-size: 12px
    }

    .active-filters span {
        padding: 6px 10px;
        border: 1px solid #cce7e6;
        border-radius: 999px;
        background: #f2fbf9;
        color: var(--cyan-dark);
        font-size: 11px;
        font-weight: 700
    }

.results-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px
}

.results-summary {
    margin: 0;
    color: var(--muted);
    font-size: 13px
}

    .results-summary strong {
        color: var(--navy)
    }

.results-controls {
    display: flex;
    align-items: end;
    gap: 10px
}

    .results-controls label {
        display: grid;
        gap: 5px;
        color: var(--muted);
        font-size: 10px;
        font-weight: 800
    }

.results-controls select {
        border: 1px solid var(--line);
        border-radius: 9px;
        padding: 8px 12px;
        background: #fff;
        min-height: 44px
    }

.results-apply {
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fff;
    color: var(--cyan-dark);
    font-size: 11px;
    font-weight: 800;
    cursor: pointer
}

.shop-grid {
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 16px
}

.pagination {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 40px
}

    .pagination a {
        display: grid;
        place-items: center;
        width: 38px;
        height: 38px;
        border: 1px solid var(--line);
        border-radius: 50%;
        font-weight: 700
    }

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

.shop-results .pagination {
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px
}

.pagination-pages {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    color: inherit
}

.shop-results .pagination a,
.shop-results .pagination .pagination-page,
.shop-results .pagination .pagination-direction {
    display: grid;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--navy);
    font-size: 12px;
    font-weight: 800
}

.shop-results .pagination .pagination-page {
    width: 38px;
    padding: 0
}

    .shop-results .pagination a:hover {
        border-color: var(--cyan);
        color: var(--cyan-dark)
    }

.shop-results .pagination .is-current {
    border-color: var(--cyan);
    background: var(--cyan);
    color: #fff
}

.shop-results .pagination .is-disabled {
    border-color: #e4ecec;
    background: #f7f9f9;
    color: #9aabad;
    cursor: default
}

.shop-results .pagination .pagination-ellipsis {
    min-width: 20px;
    padding: 0;
    color: var(--muted);
    text-align: center
}

.pagination-mobile-summary {
    display: none
}

.empty-state {
    text-align: center;
    padding: 48px 20px;
    background: var(--soft);
    border: 1px dashed #cbdcdd;
    border-radius: 22px
}

    .empty-state > span {
        font-size: 42px;
        color: var(--cyan-dark);
        font-weight: 900
    }

    .empty-state h1, .empty-state h2 {
        margin: 10px 0
    }

    .empty-state p {
        color: var(--muted)
    }

    .empty-state.wide {
        grid-column: 1/-1
    }

    .empty-state.standalone {
        margin-block: 100px
    }

.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    padding-top: 28px;
    font-size: 11px;
    color: var(--muted)
}

.breadcrumbs > * {
    min-width: 0;
    overflow-wrap: anywhere
}

.product-detail {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 80px;
    padding-top: 30px;
    padding-bottom: 70px
}

.detail-main-image {
    height: 550px;
    background: var(--soft);
    border-radius: 25px;
    display: grid;
    place-items: center;
    position: relative
}

    .detail-main-image img {
        width: 80%;
        height: 80%;
        object-fit: contain
    }

.thumbs {
    display: flex;
    gap: 10px;
    margin-top: 12px
}

    .thumbs button {
        width: 75px;
        height: 75px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: #fff
    }

    .thumbs img {
        width: 100%;
        height: 100%;
        object-fit: contain
    }

.detail-copy {
    min-width: 0;
    padding-top: 30px
}

    .detail-copy h1 {
        font-size: 44px;
        line-height: 1.08;
        letter-spacing: -.04em;
        overflow-wrap: anywhere;
        margin: 12px 0
    }

.lead {
    font-size: 17px;
    color: var(--muted)
}

.product-facts {
    border-block: 1px solid var(--line);
    padding: 18px 0
}

    .product-facts div {
        display: flex;
        justify-content: space-between;
        margin: 7px 0
    }

    .product-facts dt {
        color: var(--muted)
    }

    .product-facts dd {
        margin: 0;
        font-weight: 700
    }

.buy-box {
    background: var(--soft);
    border-radius: 17px;
    padding: 20px;
    margin-top: 22px
}

    .buy-box > label {
        display: block;
        font-weight: 750;
        font-size: 11px;
        margin-bottom: 7px
    }

    .buy-box select {
        width: 100%;
        min-height: 44px;
        border: 1px solid var(--line);
        padding: 12px;
        border-radius: 10px;
        background: #fff
    }

.buy-row {
    display: grid;
    grid-template-columns: 75px 1fr;
    gap: 10px;
    margin-top: 10px
}

    .buy-row input {
        min-width: 0;
        min-height: 44px;
        border: 1px solid var(--line);
        border-radius: 999px;
        text-align: center
    }

.rx-notice, .privacy-note {
    border-radius: 15px;
    padding: 17px;
    margin-top: 18px;
    background: #e1f8f3;
    border: 1px solid #bdebdc
}

    .rx-notice p, .privacy-note p {
        font-size: 12px;
        margin: 5px 0
    }

    .rx-notice a {
        color: var(--cyan-dark);
        font-weight: 800;
        font-size: 12px
    }

.delivery-notes {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    font-size: 10px;
    color: var(--muted)
}

.detail-description {
    border-top: 1px solid var(--line);
    padding-block: 55px;
    display: grid;
    grid-template-columns: 1fr 330px;
    gap: 70px
}

    .detail-description h2 {
        grid-column: 1
    }

    .detail-description p {
        color: var(--muted)
    }

    .detail-description aside {
        background: #fff9e8;
        padding: 20px;
        border-radius: 16px
    }

.cart-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 45px;
    padding-block: 55px 90px
}

.cart-lines {
    display: flex;
    flex-direction: column;
    gap: 14px
}

.cart-line {
    display: grid;
    grid-template-columns: 90px 1fr 110px 90px 30px;
    align-items: center;
    gap: 18px;
    border: 1px solid var(--line);
    padding: 14px;
    border-radius: 16px
}

    .cart-line > * {
        min-width: 0
    }

    .cart-line img {
        width: 90px;
        height: 90px;
        object-fit: contain;
        background: var(--soft);
        border-radius: 11px
    }

    .cart-line h2 {
        margin: 0 0 4px;
        font-size: 15px;
        line-height: 1.3;
        overflow-wrap: anywhere
    }

    .cart-line p {
        margin: 0 0 8px;
        color: var(--muted);
        font-size: 12px
    }

    .cart-line input {
        width: 62px;
        min-height: 42px;
        border: 1px solid var(--line);
        border-radius: 9px;
        padding: 7px
    }

    .cart-line form button {
        min-height: 44px;
        border: 0;
        background: transparent;
        color: var(--cyan-dark);
        cursor: pointer
    }

.order-summary, .checkout-summary {
    background: var(--navy);
    color: #fff;
    border-radius: 19px;
    padding: 27px;
    height: max-content;
    position: sticky;
    top: 20px
}

    .order-summary h2 {
        margin-top: 0
    }

    .summary-row, .order-summary > div {
        display: flex;
        justify-content: space-between;
        padding: 10px 0
    }

        .summary-total, .summary-row.total {
            border-top: 1px solid rgba(255,255,255,.2);
            font-size: 18px;
            margin-top: 8px;
            padding-top: 18px !important
        }

.checkout-layout {
    display: grid;
    grid-template-columns: 1fr 370px;
    gap: 45px;
    padding-block: 55px 90px
}

.panel, .admin-panel {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    padding: 27px;
    margin-bottom: 20px
}

    .panel h2, .admin-panel h2 {
        margin-top: 0;
        font-size: 20px
    }

.step {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--cyan-light);
    color: var(--cyan-dark);
    font-size: 10px;
    font-weight: 900;
    margin-bottom: 12px
}

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

    .form-grid.three {
        grid-template-columns: repeat(3,1fr)
    }

.payment-option {
    display: flex !important;
    gap: 12px;
    align-items: flex-start !important;
    border: 1px solid var(--line);
    border-radius: 12px;
    min-height: 52px;
    padding: 14px !important
}

    .payment-option input {
        width: auto
    }

    .payment-option strong, .payment-option small {
        display: block
    }

    .payment-option small {
        color: var(--muted);
        font-weight: 400
    }

.checkout-summary > p {
    font-size: 10px;
    color: #a8c8cd;
    text-align: center
}

.checkout-line small {
    color: #b7d3d7
}

.success-page {
    text-align: center;
    padding-block: 110px
}

.success-icon {
    display: grid;
    place-items: center;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #dff6ec;
    color: #058366;
    font-size: 30px;
    margin: 0 auto 20px
}

.success-page h1 {
    font-size: 45px;
    margin: 9px
}

.success-page p {
    color: var(--muted);
    font-size: 17px;
    max-width: 600px;
    margin: 0 auto 30px
}

.narrow-list {
    max-width: 900px;
    padding-block: 50px 90px
}

.order-row {
    display: grid;
    grid-template-columns: 1fr auto 130px 25px;
    align-items: center;
    gap: 25px;
    border-bottom: 1px solid var(--line);
    padding: 23px 7px
}

    .order-row:hover {
        padding-left: 15px
    }

    .order-row h2 {
        font-size: 17px;
        margin: 4px 0
    }

    .order-row p {
        font-size: 11px;
        color: var(--muted);
        margin: 0
    }

.status {
    display: inline-block;
    background: #e7f7f2;
    color: #087760;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 10px;
    font-weight: 800
}

.status-cancelled, .status-refunded {
    background: #fdecef;
    color: #a63c48
}

.order-detail-layout {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 30px;
    padding-block: 50px 90px
}

.order-item {
    display: grid;
    grid-template-columns: 1fr 170px 100px;
    gap: 15px;
    align-items: center;
    border-bottom: 1px solid var(--line);
    padding: 16px 0
}

    .order-item small {
        display: block;
        color: var(--muted)
    }

.timeline {
    position: relative
}

.timeline-item {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 14px;
    position: relative;
    padding-bottom: 23px
}

    .timeline-item:before {
        content: "";
        position: absolute;
        width: 1px;
        background: #c7e7e1;
        left: 6px;
        top: 14px;
        bottom: -2px
    }

    .timeline-item:last-child:before {
        display: none
    }

    .timeline-item > span {
        width: 13px;
        height: 13px;
        border-radius: 50%;
        background: var(--cyan);
        margin-top: 4px;
        z-index: 1
    }

    .timeline-item p {
        margin: 3px 0;
        color: var(--muted)
    }

    .timeline-item small {
        color: #83979a
    }

.back-link {
    font-size: 12px;
    color: var(--cyan-dark);
    font-weight: 800;
    display: block;
    margin-bottom: 10px
}

.rx-hero {
    background: var(--navy);
    color: #fff
}

    .rx-hero > .container {
        min-height: 340px;
        display: flex;
        align-items: center;
        justify-content: space-between
    }

    .rx-hero > div > div:first-child {
        max-width: 700px
    }

    .rx-hero .pill {
        color: #a6ecf1;
        background: #124854;
        border-color: #27626e
    }

    .rx-hero p {
        color: #b9d6da;
        font-size: 17px
    }

.rx-shield {
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: linear-gradient(145deg,#0faac0,#056f7f);
    display: grid;
    place-content: center;
    text-align: center;
    box-shadow: 0 25px 60px rgba(0,0,0,.25)
}

    .rx-shield span {
        font-size: 55px;
        font-weight: 900
    }

    .rx-shield small {
        font-size: 9px;
        text-transform: uppercase;
        letter-spacing: .1em
    }

.upload-layout {
    display: grid;
    grid-template-columns: 1fr 330px;
    gap: 35px;
    max-width: 1000px;
    padding-block: 55px 90px
}

.dropzone {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    border: 2px dashed #abd7da;
    border-radius: 18px;
    padding: 45px !important;
    background: #f6fbfb;
    text-align: center;
    cursor: pointer
}

    .dropzone input {
        position: absolute !important;
        opacity: 0;
        pointer-events: none
    }

    .dropzone small {
        color: var(--muted);
        margin: 5px 0 17px
    }

.upload-icon {
    font-size: 30px;
    color: var(--cyan-dark)
}

.file-list {
    font-size: 12px;
    margin: 10px 0
}

    .file-list div {
        padding: 8px;
        background: var(--soft);
        border-radius: 8px;
        margin: 5px
    }

.secure-files {
    display: flex;
    flex-direction: column;
    gap: 9px
}

    .secure-files a {
        display: grid;
        grid-template-columns: 46px 1fr auto;
        align-items: center;
        gap: 12px;
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 12px
    }

        .secure-files a > span {
            display: grid;
            place-items: center;
            height: 40px;
            border-radius: 8px;
            background: var(--cyan-light);
            font-size: 9px;
            font-weight: 900;
            color: var(--cyan-dark)
        }

    .secure-files small {
        display: block;
        color: var(--muted)
    }

    .secure-files b {
        font-size: 11px;
        color: var(--cyan-dark)
    }

.auth-shell {
    min-height: calc(100vh - 175px);
    display: grid;
    grid-template-columns: 1fr 1fr
}

.auth-art {
    background: linear-gradient(140deg,#0b4f5d,#08a8be);
    color: #fff;
    padding: 10vw;
    position: relative;
    overflow: hidden
}

    .auth-art h1 {
        font-size: 50px;
        line-height: 1.05;
        letter-spacing: -.04em
    }

    .auth-art p {
        color: #cef1f4;
        max-width: 500px
    }

.auth-art-mint {
    background: linear-gradient(140deg,#146b63,#3ebd99)
}

.auth-cross {
    position: absolute;
    right: 3vw;
    bottom: -100px;
    font-size: 400px;
    font-weight: 100;
    color: rgba(255,255,255,.08)
}

.auth-card {
    width: min(470px,calc(100% - 50px));
    align-self: center;
    justify-self: center;
    padding-block: 50px
}

    .auth-card h2 {
        font-size: 30px;
        margin: 0 0 5px
    }

    .auth-card > p {
        color: var(--muted)
    }

        .auth-card > p a {
            color: var(--cyan-dark);
            font-weight: 800
        }

    .auth-card label {
        margin-top: 14px
    }

.secure-note {
    display: block;
    text-align: center;
    color: var(--muted);
    margin-top: 17px
}

.validation {
    background: #fff0f1;
    color: #a13b45;
    border: 1px solid #f3ced2;
    border-radius: 10px;
    padding: 10px 13px;
    margin-bottom: 15px
}

.field-validation-error {
    color: #b3424d;
    font-size: 10px
}

.account-layout {
    display: grid;
    grid-template-columns: 210px 1fr;
    gap: 35px;
    padding-block: 50px 90px
}

.account-nav {
    display: flex;
    flex-direction: column;
    height: max-content;
    border: 1px solid var(--line);
    border-radius: 15px;
    overflow: hidden
}

    .account-nav a, .account-nav button {
        border: 0;
        background: #fff;
        text-align: left;
        min-height: 44px;
        padding: 13px 16px;
        font-weight: 700;
        font-size: 12px
    }

        .account-nav a.active {
            background: var(--cyan-light);
            color: var(--cyan-dark)
        }

    .account-nav form {
        border-top: 1px solid var(--line)
    }

.panel-head, .admin-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between
}

    .panel-head p, .admin-panel-head p {
        margin: 0;
        color: var(--muted);
        font-size: 12px
    }

.address-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px
}

    .address-grid article {
        border: 1px solid var(--line);
        border-radius: 13px;
        padding: 17px
    }

    .address-grid strong {
        display: block;
        margin: 10px 0 3px
    }

    .address-grid p {
        font-size: 12px;
        color: var(--muted)
    }

.mini-empty {
    background: var(--soft);
    padding: 20px;
    border-radius: 12px;
    color: var(--muted)
}

.notification {
    display: grid;
    grid-template-columns: 8px 1fr auto;
    gap: 17px;
    padding: 20px;
    border-bottom: 1px solid var(--line)
}

    .notification > span {
        width: 8px;
        height: 8px;
        background: var(--cyan);
        border-radius: 50%;
        margin-top: 8px
    }

    .notification.read > span {
        background: #c4d0d1
    }

    .notification h2 {
        font-size: 15px;
        margin: 0
    }

    .notification p {
        margin: 4px 0;
        color: var(--muted)
    }

    .notification small {
        color: #8ca0a3
    }

.admin-body {
    background: #f3f7f7
}

.admin-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 245px;
    background: #082f39;
    color: #bcd4d7;
    padding: 25px 18px;
    z-index: 30;
    display: flex;
    flex-direction: column
}

    .admin-sidebar .brand {
        padding: 8px;
        margin-bottom: 28px
    }

    .admin-sidebar nav {
        display: flex;
        flex-direction: column
    }

        .admin-sidebar nav > span {
            font-size: 8px;
            font-weight: 900;
            letter-spacing: .2em;
            color: #638a92;
            margin: 18px 12px 7px
        }

        .admin-sidebar nav a {
            padding: 10px 12px;
            border-radius: 9px;
            font-size: 12px;
            font-weight: 650
        }

            .admin-sidebar nav a:hover {
                background: #12444f;
                color: #fff
            }

        .admin-sidebar nav b {
            float: right;
            background: var(--cyan);
            color: #fff;
            border-radius: 999px;
            padding: 1px 6px
        }

.sidebar-foot {
    margin-top: auto;
    border-top: 1px solid #24505a;
    padding-top: 16px
}

    .sidebar-foot a, .sidebar-foot button {
        display: block;
        color: #afcbd0;
        background: transparent;
        border: 0;
        font-size: 11px;
        padding: 8px;
        cursor: pointer
    }

.admin-shell {
    margin-left: 245px;
    min-height: 100vh
}

.admin-header {
    height: 70px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    color: var(--muted);
    font-size: 11px
}

    .admin-header > button {
        display: none
    }

.admin-online {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #20ac78;
    margin-right: 6px
}

.admin-user {
    display: flex;
    align-items: center;
    gap: 9px
}

    .admin-user > span {
        display: grid;
        place-items: center;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: var(--cyan-light);
        color: var(--cyan-dark);
        font-weight: 900
    }

.admin-main {
    padding: 35px;
    max-width: 1500px;
    margin: auto
}

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

    .admin-title h1 {
        font-size: 32px;
        letter-spacing: -.03em;
        margin: 4px 0
    }

    .admin-title p {
        color: var(--muted);
        margin: 0
    }

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap: 14px;
    margin-bottom: 20px
}

    .kpi-grid article {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 15px;
        padding: 17px;
        display: grid
    }

    .kpi-grid small {
        font-size: 10px;
        color: var(--muted);
        margin-top: 10px
    }

    .kpi-grid strong {
        font-size: 26px
    }

    .kpi-grid em {
        font-style: normal;
        color: #8da0a3;
        font-size: 9px
    }

.kpi-icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    font-weight: 900
}

    .kpi-icon.cyan {
        background: #dff8fb;
        color: #078ba0
    }

    .kpi-icon.amber {
        background: #fff2d6;
        color: #a47100
    }

    .kpi-icon.mint {
        background: #e1f8ef;
        color: #087f61
    }

    .kpi-icon.red {
        background: #fde9ec;
        color: #b9444f
    }

    .kpi-icon.blue {
        background: #e8efff;
        color: #4469ae
    }

    .kpi-icon.violet {
        background: #f0eafa;
        color: #7250a5
    }

.admin-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px
}

    .admin-grid .span-two {
        min-width: 0
    }

.admin-panel {
    box-shadow: 0 7px 30px rgba(13,54,63,.04)
}

.admin-panel-head {
    margin-bottom: 18px
}

    .admin-panel-head h2 {
        margin-bottom: 3px
    }

    .admin-panel-head a {
        color: var(--cyan-dark);
        font-weight: 800;
        font-size: 11px
    }

.table-wrap {
    overflow: auto
}

table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 12px
}

th {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #7a9094;
    background: #f7fafa
}

th, td {
    padding: 13px 12px;
    border-bottom: 1px solid #e9f0f0
}

    td strong, td small {
        display: block
    }

    td small {
        color: var(--muted)
    }

    td > a {
        color: var(--cyan-dark);
        font-weight: 800
    }

.quick-actions > a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid var(--line)
}

    .quick-actions > a > span {
        display: grid;
        place-items: center;
        width: 37px;
        height: 37px;
        border-radius: 10px;
        background: var(--cyan-light);
        color: var(--cyan-dark);
        font-weight: 900
    }

.quick-actions strong, .quick-actions small {
    display: block
}

.quick-actions small {
    font-size: 10px;
    color: var(--muted)
}

.revenue-card {
    margin-top: 18px;
    padding: 18px;
    border-radius: 13px;
    background: var(--navy);
    color: #fff
}

    .revenue-card small, .revenue-card strong {
        display: block
    }

    .revenue-card strong {
        font-size: 24px;
        margin-top: 4px
    }

.table-search {
    max-width: 240px;
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 9px 12px
}

.row-actions {
    display: flex;
    gap: 10px
}

    .row-actions button {
        border: 0;
        background: none;
        color: var(--danger);
        font-size: 11px;
        cursor: pointer
    }

.admin-form {
    max-width: 1100px
}

    .admin-form > .admin-panel h2 {
        border-bottom: 1px solid var(--line);
        padding-bottom: 13px
    }

.variant-editor {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 0 12px;
    background: var(--soft);
    padding: 15px;
    border-radius: 12px;
    margin-top: 10px
}

.toggle-row {
    display: flex;
    gap: 25px
}

.sticky-actions {
    position: sticky;
    bottom: 0;
    background: rgba(243,247,247,.92);
    backdrop-filter: blur(10px);
    padding: 15px 0;
    display: flex;
    justify-content: flex-end;
    gap: 10px
}

.inline-form {
    display: flex;
    gap: 5px
}

    .inline-form input {
        width: 75px !important;
        padding: 7px !important
    }

        .inline-form input[name=reason] {
            width: 130px !important
        }

    .inline-form button {
        border: 0;
        background: var(--cyan);
        color: #fff;
        border-radius: 8px;
        padding: 7px 10px
    }

.low-stock {
    background: #fffafb
}

.notification-admin-list {
    padding: 0
}

.admin-alert {
    position: static;
    margin-bottom: 20px;
    width: max-content
}

.footer + script {
    display: none
}

@media(max-width:1100px) {
    .header-main {
        grid-template-columns: 78px minmax(150px,1fr) auto;
        gap: 12px
    }

    .brand-logo {
        width: 72px;
        height: 66px
    }

    .header-actions > a {
        padding-inline: 7px
    }

    .header-actions small {
        display: none
    }

    .nav-inner {
        gap: 19px
    }

    .category-grid {
        grid-template-columns: repeat(3,1fr)
    }

    .product-grid {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .product-media {
        aspect-ratio: 16 / 10
    }

    .kpi-grid {
        grid-template-columns: repeat(3,1fr)
    }

    .promo > div {
        max-width: 70%
    }

    .admin-sidebar {
        width: 210px
    }

    .admin-shell {
        margin-left: 210px
    }

    .admin-main {
        padding: 25px
    }

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

@media(max-width:820px) {
    .container {
        width: min(100% - 28px,var(--container))
    }

    .topbar-message {
        display: none
    }

    .topbar-inner {
        min-height: 28px;
        justify-content: center
    }

    .header-main {
        min-height: 64px;
        display: grid;
        grid-template-columns: 54px minmax(0,1fr);
        gap: 6px;
        padding-block: 5px
    }

    .header-main > .brand {
        width: 54px;
        align-self: stretch;
        justify-content: center
    }

    .header-main > .brand .brand-logo {
        width: 52px;
        height: 52px
    }

    .header-search {
        display: none
    }

    .header-actions {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(4,minmax(0,1fr));
        gap: 2px
    }

    .header-actions > .notifications-action {
        display: none
    }

    .header-actions > a,
    .header-actions .rx-link,
    .header-actions .menu-toggle {
        min-width: 0;
        min-height: 48px;
        padding: 3px 2px;
        flex-direction: column;
        justify-content: center;
        gap: 2px;
        border-radius: 8px;
        font-size: 10px;
        line-height: 1.1;
        text-align: center;
        white-space: nowrap
    }

    .header-actions small {
        display: none
    }

    .header-actions .rx-link {
        display: flex;
        background: transparent
    }

    .header-actions .nav-icon {
        width: 19px;
        height: 19px;
        flex-basis: 19px
    }

    .header-actions .cart-count,
    .header-actions .nav-badge {
        position: absolute;
        top: 1px;
        right: max(1px,calc(50% - 22px))
    }

    .menu-toggle {
        display: flex;
        align-items: center
    }

    .main-nav {
        display: none;
        position: static;
        background: #fff;
        width: 100%;
        border-top: 1px solid var(--line);
        box-shadow: 0 12px 24px rgba(13,54,63,.1)
    }

        .main-nav.open {
            display: block
        }

    .nav-inner {
        height: auto;
        min-height: 0;
        display: grid;
        grid-template-columns: repeat(2,minmax(0,1fr));
        align-items: stretch;
        padding-block: 14px 18px;
        gap: 4px 8px;
        overflow: visible
    }

        .nav-inner a {
            display: flex;
            min-height: 44px;
            align-items: center;
            padding: 9px 11px;
            border-radius: 9px
        }

        .nav-inner a:hover,
        .nav-inner a:focus-visible {
            background: var(--cyan-light)
        }

    .mobile-nav-search {
        grid-column: 1 / -1;
        display: flex;
        min-height: 44px;
        margin-bottom: 6px;
        border: 1px solid var(--line);
        border-radius: 999px;
        overflow: hidden
    }

        .mobile-nav-search input {
            min-width: 0;
            flex: 1;
            border: 0;
            padding: 0 16px;
            outline: 0
        }

        .mobile-nav-search button {
            width: 48px;
            border: 0;
            background: var(--cyan-light);
            color: var(--cyan-dark);
            display: grid;
            place-items: center
        }

    .hero-grid {
        grid-template-columns: 1fr;
        min-height: auto
    }

    .hero-copy {
        padding: 44px 0
    }

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

    .hero-poster-cta .hero-actions {
        display: grid;
        width: min(calc(100% - 24px),var(--container));
        grid-template-columns: repeat(3,minmax(0,1fr));
        gap: 10px;
        padding-block: 12px
    }

    .hero-grid .hero-actions {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(3,minmax(0,1fr));
        gap: 10px
    }

    .hero-poster-cta .hero-actions .btn,
    .hero-grid .hero-actions .btn {
        width: 100%;
        min-width: 0;
        padding-inline: 10px;
        font-size: clamp(11px,1.8vw,14px)
    }

    .benefits-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0
    }

        .benefits-grid > div {
            justify-content: flex-start;
            padding: 15px;
            border-bottom: 1px solid var(--line)
        }

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

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

    .testimonial-grid, .article-grid {
        grid-template-columns: 1fr
    }

    .values-grid {
        grid-template-columns: 1fr;
        gap: 40px
    }

    .brand-strip .container {
        display: block
    }

    .brand-strip div div {
        flex-wrap: wrap;
        margin-top: 20px;
        justify-content: flex-start
    }

    .newsletter-inner {
        display: block;
        padding-block: 50px
    }

    .newsletter form {
        width: 100%;
        margin-top: 25px
    }

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

    .shop-layout {
        grid-template-columns: 1fr;
        gap: 20px;
        padding-block: 30px 60px
    }

    .filters {
        border: 0;
        padding: 0
    }

        .filters > summary {
            min-height: 48px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 14px;
            border: 1px solid var(--line);
            border-radius: 12px;
            background: #fff;
            color: var(--navy);
            font-weight: 800;
            cursor: pointer;
            list-style: none
        }

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

        .filters[open] > summary {
            border-radius: 12px 12px 0 0;
            background: var(--cyan-light)
        }

        .filters[open] > summary span:last-child {
            transform: rotate(45deg)
        }

        .filters form {
            position: static
        }

        .filters:not([open]) > form {
            display: none
        }

        .filters[open] > form {
            display: block;
            padding: 4px 14px 16px;
            border: 1px solid var(--line);
            border-top: 0;
            border-radius: 0 0 12px 12px;
            background: #fff
        }

    .product-detail, .detail-description, .cart-layout, .checkout-layout, .order-detail-layout, .upload-layout, .account-layout {
        grid-template-columns: minmax(0,1fr)
    }

    .product-detail,
    .detail-description,
    .cart-layout,
    .checkout-layout,
    .order-detail-layout,
    .upload-layout,
    .account-layout,
    .narrow-list {
        gap: 24px;
        padding-block: 36px 64px
    }

    .detail-main-image {
        height: 420px
    }

    .order-summary, .checkout-summary {
        position: static
    }

    .auth-shell {
        min-height: auto;
        grid-template-columns: 1fr
    }

    .auth-art {
        display: none
    }

    .auth-card {
        padding-block: 38px 56px
    }

    .auth-card h2 {
        margin-top: 0
    }

    .rx-hero > .container {
        min-height: 0;
        display: block;
        padding-block: 44px
    }

    .rx-shield {
        display: none
    }

    .upload-layout {
        max-width: var(--container)
    }

    .account-nav {
        display: grid;
        grid-template-columns: repeat(2,minmax(0,1fr));
        height: auto
    }

    .account-nav form {
        border-top: 0
    }

    .admin-sidebar {
        transform: translateX(-100%);
        transition: .2s
    }

        .admin-sidebar.open {
            transform: none
        }

    .admin-shell {
        margin-left: 0
    }

    .admin-header > button {
        display: block;
        border: 0;
        background: none
    }

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

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

    .form-grid.three, .variant-editor {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width:540px) {
    .container {
        width: min(100% - 24px,var(--container))
    }

    .topbar-location,
    .topbar-separator {
        display: none
    }

    .topbar-contact a {
        min-height: 28px
    }

    .header-actions {
        gap: 0
    }

    .results-bar {
        align-items: stretch;
        flex-direction: column
    }

    .results-controls {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%
    }

        .results-controls select {
            width: 100%
        }

    .results-apply {
        grid-column: 1 / -1
    }

    .active-filters {
        gap: 6px
    }

    .shop-results .pagination {
        justify-content: space-between;
        gap: 6px
    }

    .pagination-pages {
        display: none
    }

    .shop-results .pagination .pagination-mobile-summary {
        display: block;
        padding: 0 4px;
        color: var(--muted);
        font-size: 12px;
        font-weight: 800;
        white-space: nowrap
    }

    .shop-results .pagination .pagination-direction {
        min-width: 0;
        padding-inline: 11px
    }

    .hero h1, .page-hero h1, .rx-hero h1 {
        font-size: clamp(30px,9vw,36px)
    }

    .hero-actions {
        align-items: center;
        flex-direction: column
    }

    .hero-poster-cta .hero-actions {
        display: grid;
        width: min(100% - 24px,var(--container));
        grid-template-columns: 1fr;
        gap: 10px;
        padding-block: 10px
    }

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

        .hero-poster-cta .hero-actions .btn {
            width: 100%
        }

    .hero-card-a {
        left: 0
    }

    .hero-card-b {
        right: -55px
    }

    .section {
        padding-block: 44px
    }

    .home-categories {
        padding-top: 36px
    }

    .home-category-group {
        padding: 10px;
        border-radius: 16px
    }

    .home-category-main {
        width: 100%;
        height: 106px;
        border-radius: 14px;
        box-shadow: 0 8px 20px rgba(13,54,63,.08)
    }

    .home-category-image {
        width: 38px;
        height: 38px;
        margin-bottom: 5px
    }

    .home-category-main strong {
        font-size: 12px
    }

    .home-products .section-head {
        align-items: center;
        flex-direction: row
    }

    .section-head {
        align-items: flex-start;
        gap: 15px
    }

        .section-head h2 {
            font-size: 28px
        }

    .category-grid {
        grid-template-columns: repeat(3,1fr);
        gap: 8px
    }

    .category-card strong {
        font-size: 11px
    }

    .product-grid {
        grid-template-columns: minmax(0,1fr);
        gap: 16px
    }

    .product-grid .product-card {
        display: grid;
        grid-template-columns: minmax(104px,34%) minmax(0,1fr);
        align-items: stretch
    }

    .product-media {
        aspect-ratio: 1 / 1;
        align-self: start
    }

    .product-image {
        padding: 12px
    }

    .product-body {
        padding: 13px
    }

        .product-body h3 {
            font-size: 15px
        }

    .product-meta {
        display: flex
    }

    .promo {
        min-height: 240px;
        padding: 26px
    }

        .promo > div {
            max-width: 76%
        }

        .promo h2 {
            font-size: 24px
        }

        .promo img {
            width: 180px;
            right: -30px
        }

    .testimonial-grid {
        gap: 12px
    }

    .brand-strip div div {
        gap: 18px
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px
    }

    .footer-bottom {
        display: block
    }

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

    .shop-layout {
        padding-block: 24px 50px
    }

    .product-detail {
        gap: 25px
    }

    .detail-main-image {
        height: auto;
        aspect-ratio: 1 / 1
    }

    .detail-copy h1 {
        font-size: 32px;
        overflow-wrap: anywhere
    }

    .delivery-notes {
        display: block
    }

        .delivery-notes span {
            display: block;
            margin: 6px
        }

    .order-row {
        grid-template-columns: 1fr auto
    }

        .order-row > strong, .order-row > span:last-child {
            display: none
        }

    .order-item {
        grid-template-columns: 1fr auto
    }

        .order-item > span {
            display: none
        }

    .form-grid, .form-grid.three, .variant-editor {
        grid-template-columns: 1fr
    }

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

    .auth-card {
        width: min(470px,calc(100% - 24px));
        padding-block: 30px 48px
    }

    .page-hero,
    .page-hero.compact {
        padding-block: 30px
    }

    .page-hero p {
        font-size: 15px
    }

    .rx-hero > .container {
        padding-block: 34px
    }

    .rx-hero p {
        font-size: 15px
    }

    .panel,
    .upload-card {
        padding: 18px
    }

    .dropzone {
        padding: 26px 16px !important
    }

    .prescription-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 9px
    }

    .prescription-actions .btn {
        width: 100%
    }

    .empty-state {
        padding: 32px 18px
    }

    .empty-state.standalone {
        margin-block: 44px
    }

    .cart-line {
        grid-template-columns: 72px minmax(0,1fr) 44px;
        gap: 10px;
        padding: 12px
    }

    .cart-line img {
        width: 72px;
        height: 72px
    }

    .cart-line > form:first-of-type {
        grid-column: 2;
        display: flex;
        align-items: center;
        gap: 8px
    }

    .cart-line > strong {
        grid-column: 2;
        font-size: 14px
    }

    .cart-line > form:last-child {
        grid-column: 3;
        grid-row: 1;
        align-self: start
    }

    .account-nav {
        grid-template-columns: 1fr
    }

    .success-page {
        padding-block: 64px
    }

    .success-page h1 {
        font-size: 34px
    }

    .admin-main {
        padding: 18px
    }

    .kpi-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px
    }

        .kpi-grid article {
            padding: 13px
        }

    .admin-title {
        align-items: flex-start;
        gap: 15px;
        flex-direction: column
    }

    .panel, .admin-panel {
        padding: 18px
    }

    .inline-form {
        min-width: 280px
    }
}

/* ============================================================
   Password show / hide control
   ============================================================ */

.password-field {
    position: relative;
    width: 100%;
}

    .password-field input[type="password"],
    .password-field input[type="text"] {
        width: 100%;
        padding-right: 48px;
    }

.password-toggle {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    padding: 0;
    z-index: 2;
    transition: background .18s ease,color .18s ease,transform .18s ease;
}

    .password-toggle:hover {
        background: var(--cyan-light);
        color: var(--cyan-dark);
    }

    .password-toggle:active {
        transform: translateY(-50%) scale(.96);
    }

    .password-toggle:focus-visible {
        outline: 2px solid var(--cyan);
        outline-offset: 2px;
    }

    .password-toggle svg {
        width: 20px;
        height: 20px;
        display: block;
        pointer-events: none;
    }

    .password-toggle [data-password-icon] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        pointer-events: none;
    }

/* Keep validation text outside the password input wrapper */
.password-field + .field-message,
.password-field + .field-validation-error,
.password-field + span[data-valmsg-for] {
    display: block;
    margin-top: 5px;
}

/* Prevent browser-native password reveal controls from overlapping ours */
.password-field input::-ms-reveal,
.password-field input::-ms-clear {
    display: none;
}

/* Mobile spacing */
@media(max-width:540px) {
    .password-field input[type="password"],
    .password-field input[type="text"] {
        padding-right: 44px;
    }

    .password-toggle {
        right: 4px
    }
}

/* ============================================================
   Premium botanical storefront system
   ============================================================ */

body {
    background: var(--cream-surface);
    color: var(--text-primary)
}

main {
    overflow: clip
}

::selection {
    background: var(--bright-aqua);
    color: var(--deep-navy)
}

:where(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid var(--bright-aqua);
    outline-offset: 3px;
    box-shadow: var(--focus-ring)
}

.topbar {
    min-height: var(--topbar-height);
    background: linear-gradient(90deg,var(--deep-navy),var(--dark-teal));
    color: #dff8f5
}

.topbar-inner {
    min-height: var(--topbar-height)
}

.topbar-contact a:hover {
    color: var(--white)
}

.site-header {
    background: rgba(255,255,255,.97);
    box-shadow: 0 1px 0 rgba(7,75,89,.13),0 8px 26px rgba(6,43,58,.04)
}

.header-main {
    min-height: var(--header-height)
}

.header-search,
.mobile-nav-search {
    border-color: var(--border-color);
    background: var(--cream-surface)
}

.header-search:focus-within,
.mobile-nav-search:focus-within {
    border-color: var(--primary-teal);
    box-shadow: var(--focus-ring)
}

.header-actions > a:hover,
.header-actions > a[aria-current="page"] {
    background: var(--mint-surface);
    color: var(--dark-teal)
}

.header-actions .rx-link {
    border: 1px solid rgba(7,142,160,.2);
    background: var(--aqua-surface)
}

.nav-badge,
.cart-count {
    background: var(--primary-teal)
}

.main-nav {
    border-top-color: rgba(7,75,89,.1);
    background: var(--white)
}

.nav-inner a {
    position: relative;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    color: var(--dark-teal)
}

.nav-inner a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    border-radius: 999px 999px 0 0;
    background: var(--bright-aqua);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 180ms ease
}

.nav-inner a:hover::after,
.nav-inner a[aria-current="page"]::after {
    transform: scaleX(1)
}

.hero--posters {
    padding-top: clamp(12px,2vw,24px);
    background:
        radial-gradient(circle at 8% 20%,rgba(227,247,239,.95),transparent 25%),
        radial-gradient(circle at 92% 15%,rgba(241,234,248,.85),transparent 26%),
        var(--cream-surface)
}

.hero-poster-stage {
    width: min(var(--container),calc(100% - 40px));
    margin-inline: auto;
    overflow: hidden;
    border: 1px solid rgba(7,142,160,.16);
    border-radius: var(--card-radius);
    background: var(--aqua-surface);
    box-shadow: var(--shadow-soft)
}

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

.detail-price del {
    color: var(--text-muted);
    font-size: 14px
}

.detail-price .stock {
    width: max-content
}

.hero-slide img {
    object-fit: contain
}

.hero-carousel-controls {
    position: absolute;
    z-index: 4;
    top: clamp(12px,2vw,24px);
    left: 50%;
    width: min(var(--container),calc(100% - 40px));
    aspect-ratio: 48 / 17;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px;
    pointer-events: none;
    transform: translateX(-50%)
}

.hero-carousel-arrow,
.hero-carousel-dot {
    border: 1px solid rgba(7,75,89,.17);
    background: rgba(255,255,255,.88);
    color: var(--dark-teal);
    box-shadow: 0 7px 20px rgba(6,43,58,.1);
    cursor: pointer;
    pointer-events: auto;
    backdrop-filter: blur(8px)
}

.hero-carousel-arrow {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 18px
}

.hero-carousel-arrow:hover {
    border-color: var(--primary-teal);
    background: var(--deep-navy);
    color: var(--white)
}

.hero-carousel-dots {
    position: absolute;
    bottom: 13px;
    left: 50%;
    display: flex;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.82);
    transform: translateX(-50%);
    pointer-events: auto;
    backdrop-filter: blur(8px)
}

.hero-carousel-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--border-color);
    box-shadow: none
}

.hero-carousel-dot.is-active {
    width: 28px;
    border-radius: 999px;
    background: var(--primary-teal)
}

.hero-poster-cta {
    border-top: 0;
    background: transparent
}

.hero-poster-cta .hero-actions {
    padding-block: 20px 24px
}

.hero-actions .btn {
    min-height: 48px
}

.btn {
    min-height: 44px;
    border-radius: var(--button-radius);
    transition: color 180ms ease,background-color 180ms ease,border-color 180ms ease,box-shadow 180ms ease,transform 180ms ease
}

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

.btn-primary:hover {
    background: var(--dark-teal)
}

.btn-outline,
.btn-secondary {
    border-color: var(--border-color);
    background: var(--white);
    color: var(--dark-teal)
}

.btn-outline:hover,
.btn-secondary:hover {
    border-color: var(--primary-teal);
    background: var(--aqua-surface)
}

.benefits {
    border-block: 1px solid rgba(7,75,89,.12);
    background: rgba(255,255,255,.88)
}

.benefits i {
    background: var(--mint-surface);
    color: var(--dark-teal)
}

.benefits-grid > div:nth-child(2) i {
    background: var(--aqua-surface)
}

.benefits-grid > div:nth-child(3) i {
    background: var(--lavender-surface)
}

.benefits-grid > div:nth-child(4) i {
    background: var(--blush-surface)
}

.section {
    padding-block: var(--section-space)
}

.section-soft {
    background:
        radial-gradient(circle at 5% 5%,rgba(227,247,239,.8),transparent 24%),
        radial-gradient(circle at 95% 95%,rgba(241,234,248,.72),transparent 26%),
        var(--cream-surface)
}

.section-head h2 {
    color: var(--deep-navy)
}

.home-categories {
    margin-block: clamp(34px,6vw,76px);
    padding: clamp(42px,6vw,72px) clamp(16px,2.5vw,32px);
    border: 1px solid rgba(7,142,160,.14);
    border-radius: calc(var(--card-radius) + 8px);
    background:
        radial-gradient(circle at 12% 18%,rgba(255,255,255,.9),transparent 25%),
        radial-gradient(circle at 86% 22%,rgba(241,234,248,.8),transparent 24%),
        linear-gradient(135deg,var(--mint-surface),var(--aqua-surface) 52%,var(--cream-surface));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8)
}

.home-categories.section {
    padding-bottom: clamp(42px,6vw,72px)
}

.home-category-main {
    border-color: rgba(7,142,160,.26);
    background: rgba(255,255,255,.86);
    box-shadow: 0 12px 28px rgba(6,43,58,.08)
}

.home-category-group:nth-child(3n+2) .home-category-main {
    background: rgba(241,234,248,.82)
}

.home-category-group:nth-child(3n+3) .home-category-main {
    background: rgba(251,248,237,.88)
}

.home-category-child {
    border-color: rgba(7,142,160,.26);
    background: var(--white)
}

.product-grid {
    gap: clamp(16px,2vw,24px)
}

.product-card {
    border-color: rgba(7,142,160,.22);
    border-radius: var(--card-radius);
    background: var(--white);
    box-shadow: 0 8px 24px rgba(6,43,58,.055);
    transition: border-color 190ms ease,box-shadow 190ms ease,transform 190ms ease
}

.product-grid > .product-card:nth-child(5n+1) .product-media {
    background: var(--mint-surface)
}

.product-grid > .product-card:nth-child(5n+2) .product-media {
    background: var(--aqua-surface)
}

.product-grid > .product-card:nth-child(5n+3) .product-media {
    background: var(--lavender-surface)
}

.product-grid > .product-card:nth-child(5n+4) .product-media {
    background: var(--blush-surface)
}

.product-grid > .product-card:nth-child(5n) .product-media {
    background: var(--cream-surface)
}

.product-media {
    aspect-ratio: var(--product-media-ratio);
    border-bottom: 1px solid rgba(7,142,160,.12)
}

.product-body {
    background: linear-gradient(180deg,var(--white),#fffdf8)
}

.product-body h3 {
    color: var(--deep-navy)
}

.product-meta strong {
    color: var(--deep-navy)
}

.eyebrow,
.kicker {
    color: var(--primary-teal)
}

.stock.in,
.status {
    background: var(--mint-surface);
    color: #176c53
}

.stock.out,
.status-cancelled,
.status-refunded {
    background: var(--blush-surface);
    color: #943d3b
}

.rx-badge {
    background: var(--deep-navy);
    color: var(--white)
}

.product-card-action {
    border-color: var(--primary-teal);
    background: var(--primary-teal);
    color: var(--white)
}

.product-card-action:hover {
    border-color: var(--dark-teal);
    background: var(--dark-teal);
    color: var(--white)
}

.product-card-action[disabled] {
    border-color: #d8e2e1;
    background: #edf1ef;
    color: #718388
}

.page-hero,
.rx-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 9% 30%,rgba(255,255,255,.88),transparent 24%),
        radial-gradient(circle at 88% 15%,rgba(241,234,248,.88),transparent 25%),
        linear-gradient(120deg,var(--mint-surface),var(--aqua-surface) 58%,var(--cream-surface));
    color: var(--text-primary)
}

.page-hero::after,
.rx-hero::after {
    content: "";
    position: absolute;
    right: -70px;
    bottom: -120px;
    width: 300px;
    height: 300px;
    border: 55px solid rgba(7,142,160,.055);
    border-radius: 55% 45% 62% 38%;
    transform: rotate(28deg)
}

.page-hero > .container,
.rx-hero > .container {
    position: relative;
    z-index: 1
}

.page-hero h1,
.rx-hero h1 {
    color: var(--deep-navy);
    font-size: var(--title-size)
}

.page-hero p,
.rx-hero p {
    color: var(--text-muted)
}

.rx-hero .pill {
    border-color: rgba(7,142,160,.25);
    background: rgba(255,255,255,.72);
    color: var(--dark-teal)
}

.rx-shield {
    background: linear-gradient(145deg,var(--primary-teal),var(--dark-teal));
    box-shadow: 0 22px 55px rgba(6,43,58,.18)
}

.shop-layout,
.cart-layout,
.checkout-layout,
.product-detail,
.detail-description,
.order-detail-layout,
.narrow-list,
.account-layout,
.upload-layout {
    position: relative
}

.filters {
    border-right-color: rgba(7,142,160,.2)
}

.filters form {
    padding: 22px;
    border: 1px solid rgba(7,142,160,.2);
    border-radius: var(--card-radius);
    background: rgba(255,255,255,.84);
    box-shadow: 0 10px 28px rgba(6,43,58,.05)
}

.filters input,
.filters select,
.auth-card input,
.auth-card textarea,
.panel input,
.panel select,
.panel textarea,
.results-controls select {
    border-color: var(--border-color);
    border-radius: var(--input-radius);
    background: var(--white)
}

.filters input:focus,
.filters select:focus,
.auth-card input:focus,
.auth-card textarea:focus,
.panel input:focus,
.panel select:focus,
.panel textarea:focus,
.results-controls select:focus {
    border-color: var(--primary-teal);
    box-shadow: var(--focus-ring)
}

.active-filters span {
    border-color: var(--border-color);
    background: var(--mint-surface);
    color: var(--dark-teal)
}

.pagination a,
.shop-results .pagination a,
.shop-results .pagination .pagination-page,
.shop-results .pagination .pagination-direction {
    border-color: var(--border-color);
    background: var(--white)
}

.shop-results .pagination .is-current {
    border-color: var(--primary-teal);
    background: var(--primary-teal);
    color: var(--white)
}

.breadcrumbs {
    color: var(--text-muted)
}

.breadcrumbs a {
    color: var(--dark-teal);
    font-weight: 700
}

.detail-main-image {
    overflow: hidden;
    border: 1px solid rgba(7,142,160,.2);
    background: linear-gradient(145deg,var(--mint-surface),var(--aqua-surface));
    box-shadow: var(--shadow-soft)
}

.detail-copy {
    align-self: start;
    padding: clamp(24px,3vw,38px);
    border: 1px solid rgba(7,142,160,.18);
    border-radius: var(--card-radius);
    background: rgba(255,255,255,.92);
    box-shadow: var(--shadow-soft)
}

.buy-box {
    border: 1px solid rgba(7,142,160,.15);
    background: var(--cream-surface)
}

.detail-description aside {
    border: 1px solid rgba(210,169,79,.28);
    background: #fff7df
}

.panel,
.upload-card,
.cart-line,
.address-grid article,
.order-row,
.notification {
    border-color: rgba(7,142,160,.2);
    background: rgba(255,255,255,.92);
    box-shadow: 0 9px 28px rgba(6,43,58,.055)
}

.panel,
.upload-card {
    border-radius: var(--card-radius)
}

.cart-line {
    background: var(--white)
}

.cart-line img {
    background: var(--aqua-surface)
}

.order-summary,
.checkout-summary {
    border: 1px solid rgba(25,185,197,.25);
    background: linear-gradient(155deg,var(--deep-navy),var(--dark-teal));
    box-shadow: var(--shadow-soft)
}

.order-summary .btn-primary,
.checkout-summary .btn-primary {
    background: var(--bright-aqua);
    color: var(--deep-navy)
}

.payment-option:hover,
.payment-option:focus-within {
    border-color: var(--primary-teal);
    background: var(--aqua-surface)
}

.step {
    background: var(--mint-surface);
    color: var(--dark-teal)
}

.empty-state,
.mini-empty {
    border-color: var(--border-color);
    background:
        radial-gradient(circle at 20% 0,rgba(255,255,255,.9),transparent 34%),
        linear-gradient(135deg,var(--mint-surface),var(--cream-surface));
    box-shadow: 0 10px 28px rgba(6,43,58,.045)
}

.rx-notice,
.privacy-note {
    border-color: rgba(33,138,104,.24);
    background: var(--mint-surface)
}

.upload-card fieldset {
    min-width: 0;
    margin: 0 0 22px;
    padding: 18px;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: var(--cream-surface)
}

.upload-card legend {
    color: var(--dark-teal)
}

.dropzone,
.image-upload {
    border-color: var(--primary-teal);
    background: var(--aqua-surface)
}

.auth-shell {
    min-height: calc(100vh - var(--topbar-height) - var(--header-height));
    grid-template-columns: minmax(0,1fr) minmax(380px,480px);
    gap: clamp(24px,5vw,70px);
    padding: clamp(36px,6vw,82px) max(20px,calc((100vw - var(--container))/2));
    background:
        radial-gradient(circle at 8% 8%,rgba(227,247,239,.95),transparent 30%),
        radial-gradient(circle at 95% 20%,rgba(241,234,248,.9),transparent 28%),
        linear-gradient(145deg,var(--aqua-surface),var(--cream-surface))
}

.auth-art {
    min-height: 520px;
    padding: clamp(36px,6vw,76px);
    border-radius: calc(var(--card-radius) + 8px);
    background: linear-gradient(145deg,var(--dark-teal),var(--primary-teal));
    box-shadow: var(--shadow-soft)
}

.auth-art-mint {
    background: linear-gradient(145deg,#176955,var(--primary-teal))
}

.auth-card {
    width: 100%;
    padding: clamp(28px,4vw,46px);
    border: 1px solid rgba(7,142,160,.18);
    border-radius: calc(var(--card-radius) + 4px);
    background: rgba(255,255,255,.94);
    box-shadow: var(--shadow-soft)
}

.account-nav {
    border-color: rgba(7,142,160,.2);
    border-radius: 18px;
    box-shadow: 0 9px 26px rgba(6,43,58,.05)
}

.account-nav a.active {
    background: var(--mint-surface);
    color: var(--dark-teal)
}

.order-row {
    margin-bottom: 12px;
    padding: 20px;
    border: 1px solid rgba(7,142,160,.18);
    border-radius: 16px
}

.order-row:hover {
    padding-left: 24px;
    border-color: var(--primary-teal);
    box-shadow: var(--shadow-soft)
}

.notification {
    border-radius: 16px
}

.values-band {
    background:
        radial-gradient(circle at 90% 15%,rgba(25,185,197,.1),transparent 25%),
        linear-gradient(135deg,var(--deep-navy),var(--dark-teal));
    color: var(--white)
}

.big-number {
    color: var(--bright-aqua)
}

.footer {
    position: relative;
    overflow: hidden;
    padding-top: clamp(58px,7vw,88px);
    background:
        radial-gradient(circle at 12% 0,rgba(25,185,197,.1),transparent 30%),
        linear-gradient(145deg,#041f2b,var(--deep-navy));
    color: #bfd5d9
}

.footer::after {
    content: "";
    position: absolute;
    right: -130px;
    bottom: -210px;
    width: 430px;
    height: 430px;
    border: 75px solid rgba(25,185,197,.035);
    border-radius: 55% 45% 62% 38%;
    transform: rotate(24deg)
}

.footer-grid,
.footer-bottom {
    position: relative;
    z-index: 1
}

.footer h3 {
    color: var(--white);
    letter-spacing: .08em;
    text-transform: uppercase
}

.footer section > a,
.footer p {
    color: #bfd5d9
}

.footer section > a {
    min-height: 30px;
    display: flex;
    align-items: center
}

.footer section > a:hover {
    color: var(--bright-aqua);
    transform: translateX(3px)
}

.footer-brand > .brand {
    background: var(--white)
}

.location-pill {
    border-color: rgba(184,219,220,.35);
    color: var(--white)
}

.footer-bottom {
    border-top-color: rgba(184,219,220,.22)
}

@media (hover:hover) and (pointer:fine) {
    .product-card:hover {
        border-color: var(--primary-teal);
        box-shadow: var(--shadow-hover);
        transform: translateY(-5px)
    }
}

@media(max-width:1100px) {
    :root {
        --header-height: 76px
    }

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

@media(max-width:820px) {
    :root {
        --header-height: 64px
    }

    .header-actions .rx-link {
        border-color: transparent;
        background: transparent
    }

    .nav-inner a::after {
        display: none
    }

    .hero-carousel-controls,
    .hero-poster-stage {
        width: calc(100% - 28px)
    }

    .hero-carousel-arrow {
        width: 40px;
        height: 40px
    }

    .home-categories {
        width: calc(100% - 28px);
        margin-block: 28px;
        padding: 34px 14px
    }

    .filters form {
        padding: 4px 14px 16px;
        border: 0;
        border-radius: 0;
        box-shadow: none
    }

    .auth-shell {
        display: block;
        padding: 34px 14px 54px
    }

    .auth-card {
        width: min(540px,100%);
        margin-inline: auto
    }
}

@media(max-width:540px) {
    .hero--posters {
        padding-top: 12px
    }

    .hero-poster-stage,
    .hero-carousel-controls {
        top: 12px;
        width: calc(100% - 24px);
        border-radius: 16px
    }

    .hero-carousel-controls {
        padding: 7px
    }

    .hero-carousel-arrow {
        width: 36px;
        height: 36px;
        font-size: 15px
    }

    .hero-carousel-dots {
        bottom: 6px;
        padding: 5px 8px
    }

    .hero-carousel-dot {
        width: 8px;
        height: 8px
    }

    .hero-carousel-dot.is-active {
        width: 20px
    }

    .benefits-grid > div {
        min-width: 0;
        padding: 13px 9px
    }

    .benefits strong {
        font-size: 12px
    }

    .benefits small {
        font-size: 9px
    }

    .home-category-grid {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .home-category-group:last-child:nth-child(odd) {
        grid-column: 1 / -1
    }

    .product-grid .product-card {
        display: flex;
        grid-template-columns: none
    }

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

    .product-media {
        width: 100%;
        aspect-ratio: var(--product-media-ratio)
    }

    .product-body {
        padding: 17px
    }

    .product-meta {
        align-items: center
    }

    .detail-copy {
        padding: 22px
    }

    .detail-description {
        gap: 24px
    }

    .footer-grid {
        gap: 34px
    }

    .footer section > a {
        min-height: 40px;
        margin-block: 2px
    }

    .footer-bottom span + span {
        display: block;
        margin-top: 8px
    }
}

/* Homepage category orbit direction and document-flow spacing. */
.home-categories {
    --category-flow-space: 4px;
    margin-bottom: 0
}

.home-categories.section {
    padding-bottom: var(--category-flow-space)
}

.home-products.section {
    padding-top: 26px
}

@media(min-width:1024px) {
    .home-categories {
        transition: padding-bottom .24s ease
    }

    .home-categories:has(.home-category-group:is(.is-expanded,:focus-within,:hover) .orbit-count-2) {
        --category-flow-space: 122px
    }

    .home-categories:has(.home-category-group:is(.is-expanded,:focus-within,:hover) .orbit-count-3) {
        --category-flow-space: 172px
    }

    .home-categories:has(.home-category-group:is(.is-expanded,:focus-within,:hover) .orbit-count-4),
    .home-categories:has(.home-category-group:is(.is-expanded,:focus-within,:hover) .orbit-count-5) {
        --category-flow-space: 92px
    }

    .home-categories:has(.home-category-group:is(.is-expanded,:focus-within,:hover) .orbit-count-6) {
        --category-flow-space: 127px
    }

    .home-categories:has(.home-category-group:is(.is-expanded,:focus-within,:hover) .orbit-count-7) {
        --category-flow-space: 122px
    }

    .home-categories:has(.home-category-group:is(.is-expanded,:focus-within,:hover) .orbit-count-8) {
        --category-flow-space: 142px
    }

    .home-categories:has(.home-category-group.orbit-edge-left:is(.is-expanded,:focus-within,:hover) .orbit-count-8) {
        --category-flow-space: 137px
    }

    .home-categories:has(.home-category-group.orbit-edge-right:is(.is-expanded,:focus-within,:hover) .orbit-count-6) {
        --category-flow-space: 82px
    }
}

@media(min-width:1024px) and (max-width:1399px) {
    .home-category-grid {
        grid-template-columns: repeat(4,minmax(0,1fr));
        padding-inline: 132px
    }

    .home-categories:has(.home-category-group:nth-child(-n+4):is(.is-expanded,:focus-within,:hover) .home-category-child) {
        --category-flow-space: 4px
    }
}

@media(min-width:1400px) {
    .home-category-grid {
        padding-inline: 105px
    }
}