/*
 * FORM FACTORS — viewport aspect ratio (width ÷ height), not device model.
 *
 *   mobile  — super-tall:  ar ≤ 0.72   @media (max-aspect-ratio: 18/25)
 *              phones ~9:16 ≈ 0.56; taller than classic 3:4 tablet
 *   tablet  — mid range:   0.72 < ar ≤ 1.10
 *              @media (min-aspect-ratio: 18/25) and (max-aspect-ratio: 11/10)
 *              ~3:4 portrait up to just past square
 *   desktop — wider:       ar ≥ 1.10   @media (min-aspect-ratio: 11/10)
 *              past square → 4:3, 16:9, ultrawide (phone landscape counts as desktop)
 *
 * Width-based queries below ~600px remain for “cramped horizontal space” tweaks
 * inside a form factor (font wrapping, footer columns), not device type.
 */

:root {
    --bg-page: #ffffff;
    --bg-surface: #ffffff;
    --bg-muted: #f4f6f8;
    --bg-header: #ffffff;
    --bg-nav: #C8D6E8;
    --bg-promo: linear-gradient(135deg, #f7f3ee 0%, #C8D6E8 100%);
    --bg-staff: #f4f6f8;
    --text: #111111;
    --text-muted: #444444;
    --text-on-nav-hover: #ffffff;
    --border: #111111;
    --border-soft: #dddddd;
    --shadow: rgba(0, 0, 0, 0.1);
    --btn-primary-bg: #111111;
    --btn-primary-text: #ffffff;
    --btn-secondary-bg: #C8D6E8;
    --input-bg: #ffffff;
    --menu-bg: #ffffff;
    --chip-on-bg: #e8f5e9;
    --danger: #8b1e1e;
    --overlay: rgba(0, 0, 0, 0.4);
    --icon-filter: none;
    /* Sage green from Purely Infused logo */
    --brand-green: #98bca8;
    --brand-green-deep: #6f9a86;
    --star-empty: #c8c4bc;
    --star-filled: var(--brand-green);
}

[data-theme="dark"] {
    --bg-page: #121418;
    --bg-surface: #1c1f26;
    --bg-muted: #161920;
    --bg-header: #161920;
    --bg-nav: #2a3340;
    --bg-promo: linear-gradient(135deg, #1e242c 0%, #2a3340 100%);
    --bg-staff: #161920;
    --text: #f0f2f5;
    --text-muted: #b0b6c0;
    --text-on-nav-hover: #ffffff;
    --border: #e8eaed;
    --border-soft: #3a404c;
    --shadow: rgba(0, 0, 0, 0.45);
    --btn-primary-bg: #e8eaed;
    --btn-primary-text: #121418;
    --btn-secondary-bg: #3a4a5c;
    --input-bg: #1c1f26;
    --menu-bg: #1c1f26;
    --chip-on-bg: #243328;
    --danger: #d45c5c;
    --overlay: rgba(0, 0, 0, 0.6);
    --icon-filter: invert(1) brightness(1.1);
}

@font-face {
    font-family: "Britannic Bold";
    src: url("../fonts/Britannic-Bold.ttf");
}

@font-face {
    font-family: "Ubuntu Bold";
    src: url("../fonts/Ubuntu-Bold.ttf");
}

@font-face {
    font-family: "Ubuntu Bold Italic";
    src: url("../fonts/Ubuntu-BoldItalic.ttf");
}

@font-face {
    font-family: "Ubuntu Italic";
    src: url("../fonts/Ubuntu-Italic.ttf");
}

@font-face {
    font-family: "Ubuntu Light";
    src: url("../fonts/Ubuntu-Light.ttf");
}

@font-face {
    font-family: "Ubuntu Light Italic";
    src: url("../fonts/Ubuntu-LightItalic.ttf");
}

@font-face {
    font-family: "Ubuntu Medium";
    src: url("../fonts/Ubuntu-Medium.ttf");
}

@font-face {
    font-family: "Ubuntu Medium Italic";
    src: url("../fonts/Ubuntu-MediumItalic.ttf");
}

@font-face {
    font-family: "Ubuntu Regular";
    src: url("../fonts/Ubuntu-Regular.ttf");
}

h1 {
    font-family: "Britannic Bold";
}

html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background: var(--bg-page);
    color: var(--text);
    font-family: "Ubuntu Regular", "Ubuntu", sans-serif;
}

/* Phones and tablets only. On desktop this swallows the mouse wheel. */
@media (max-aspect-ratio: 11/10) {
    html, body {
        overscroll-behavior-y: none;
    }
}

/* Body copy sitewide (Ubuntu); headings may still use Britannic/Medium where set */
p,
li,
td,
th,
dd,
dt,
blockquote,
label,
textarea,
input,
select,
button,
a,
span,
div,
.rich-text,
.product-detail-description,
.product-tabpanel,
.product-section-body,
.content-detail-body,
.content-card-preview,
.content-card-meta,
.content-card-location,
.product-card-link p,
.product-tag,
.out-of-season-label,
.in-cart-label,
.footer-col p,
.footer-links a,
.footer-copy,
.footer-heading,
.promo-copy,
.promo-eyebrow,
.home-hero-copy,
.auth-note,
.form-hint,
.form-field span,
.filter-label,
.filter-note,
.results-meta,
.empty-state,
.gift-options-copy,
.gift-checkbox-label,
.summary-note,
.policy-archive-meta,
.cart-line-details p,
.staff-archive-preview,
.section-kicker {
    font-family: "Ubuntu Regular", "Ubuntu", sans-serif;
}

.rich-text strong,
.rich-text b {
    font-family: "Ubuntu Bold", "Ubuntu Regular", sans-serif;
}

.rich-text em,
.rich-text i {
    font-family: "Ubuntu Italic", "Ubuntu Regular", sans-serif;
}

.rich-text strong em,
.rich-text em strong {
    font-family: "Ubuntu Bold Italic", "Ubuntu Bold", sans-serif;
}

header {
    position: sticky;
    top: 0;
    z-index: 2000;
    width: 100%;
    background: var(--bg-header);
    color: var(--text);
}

content {
    display: block;
    background: var(--bg-page);
    color: var(--text);
}

main {
    margin: 8px;
}

.header-top {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    background-color: var(--bg-header);
    width: 100%;
    box-sizing: border-box;
}

.nav-bar {
    /*
      Desktop: true viewport center via absolute + translate.
      (Grid 1fr/auto/1fr still looked off when Staff/extra links or mobile
      sibling nodes affected layout in some browsers.)
    */
    display: block;
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    min-height: 2.75rem;
    box-sizing: border-box;
    font-family: "Ubuntu Light";
    background: var(--bg-nav);
    text-align: center;
}

/* Desktop links only — pinned to geometric center of the full-width bar */
.nav-bar-inner.nav-bar-desktop {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.1rem 0.15rem;
    width: max-content;
    max-width: 100%;
    margin: 0;
    padding: 0 0.5rem;
    box-sizing: border-box;
    z-index: 1;
}

/* Mobile drawer extras: hidden on desktop so they never offset centering */
.nav-bar-mobile-extra {
    display: none !important;
}

.nav-bar a {
    color: var(--nav-text, var(--text-secondary, var(--text)));
    text-decoration: none;
    font-size: clamp(0.85rem, 1.2vw, 1.1rem);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0.85rem 0.95rem;
    flex: 0 0 auto;
    margin: 0;
}

.nav-bar a:hover {
    color: var(--text-on-nav-hover, var(--text-hover, var(--nav-text)));
}

/* Legacy class still used elsewhere */
.nav-bar .nav-mobile-only {
    display: none;
}

.box {
    /* vertical centering handled on .nav-bar a */
    padding: 0;
}

.logo-image {
    height: clamp(40px, 5vw, 56px);
    width: clamp(40px, 5vw, 56px);
    flex-shrink: 0;
}

.brand-name {
    flex-shrink: 0;
    line-height: 1.15;
}

.brand-title {
    font-family: "Britannic Bold";
    font-size: clamp(1.1rem, 2vw, 1.6rem);
}

.brand-tagline {
    font-family: "Ubuntu Light";
    font-size: clamp(0.75rem, 1.2vw, 0.95rem);
}

.home-searchbar-wrapper {
    position: relative;
    flex: 1;
    max-width: 420px;
    min-width: 0;
    z-index: 40;
}

.home-searchbar-form {
    position: relative;
    width: 100%;
}

.home-searchbar {
    width: 100%;
    height: 2.4rem;
    box-sizing: border-box;
    border: var(--border) solid 2px;
    border-radius: 999px;
    padding: 0 1rem 0 2.5rem;
    font-family: "Ubuntu Light";
    font-size: 0.95rem;
    background: var(--input-bg);
    color: var(--text);
}

.home-searchbar-wrapper.is-open .home-searchbar {
    border-color: var(--border);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

.search-icon {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    height: 1.1rem;
    width: 1.1rem;
    pointer-events: none;
    z-index: 1;
}

[data-theme="dark"] .search-icon {
    filter: brightness(0) invert(1);
}

/* Search overlay: desktop full-width under header; mobile full-screen under header */
.header-search-backdrop {
    display: none;
}

.header-search-panel {
    display: none;
}

.search-did-you-mean {
    margin: 0 0 0.75rem;
    padding: 0.65rem 0.85rem;
    border-radius: 10px;
    border: 1px solid var(--border-soft);
    background: var(--bg-muted, #f6f3ee);
    font-size: 0.98rem;
}

.search-did-you-mean a {
    color: inherit;
    font-weight: 600;
}

.search-did-you-mean em {
    font-style: italic;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Compact (mobile + tablet): full-screen search under sticky header */
@media (max-aspect-ratio: 11/10) {
    .header-search-backdrop {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        z-index: 40;
        background: rgba(12, 14, 18, 0.5);
    }

    .header-search-backdrop[hidden] {
        display: none !important;
    }

    body.search-overlay-open {
        overflow: hidden;
    }

    body.search-overlay-open .header {
        z-index: 55;
    }

    .header-search-panel {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 45;
        max-height: none;
        overflow: auto;
        border: none;
        border-radius: 0;
        background: var(--bg-page, #fff);
        box-shadow: none;
        box-sizing: border-box;
        /* top set by JS under header */
    }

    .header-search-panel[hidden] {
        display: none !important;
    }

    .header-search-panel-inner {
        padding: 1rem 0.85rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
        max-width: none;
        margin: 0;
    }

    .header-search-products,
    .header-search-product-rail {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 0.75rem;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding: 0.2rem 0 0.55rem;
        list-style: none;
        margin: 0;
    }

    .header-search-products > li {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    .header-search-product {
        width: 7.5rem;
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
        text-decoration: none;
        color: inherit;
    }

    .header-search-product-thumb {
        width: 7.5rem;
        height: 7.5rem;
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid var(--border-soft);
        background: var(--bg-muted);
    }

    .header-search-product-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .header-search-product-meta strong {
        font-size: 0.8rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .header-search-section + .header-search-section {
        margin-top: 1rem;
        padding-top: 0.85rem;
        border-top: 1px solid var(--border-soft);
    }

    .header-search-heading {
        margin: 0 0 0.45rem;
        font-size: 0.78rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--text-muted);
        font-family: "Ubuntu Medium", sans-serif;
    }

    .header-search-recent {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
    }

    .header-search-footer {
        margin-top: 1rem;
        padding-top: 0.75rem;
        border-top: 1px solid var(--border-soft);
        display: flex;
        justify-content: stretch;
    }

    .header-search-view-all {
        width: 100%;
    }
}

@media (min-aspect-ratio: 11/10) {
    .header-search-backdrop {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 35;
        background: rgba(20, 16, 12, 0.42);
        backdrop-filter: blur(1px);
    }

    .header-search-backdrop[hidden] {
        display: none !important;
    }

    body.search-overlay-open {
        overflow: hidden;
    }

    body.search-overlay-open .header {
        position: relative;
        z-index: 50;
    }

    .header-search-panel {
        display: block;
        position: fixed;
        left: 0.75rem;
        right: 0.75rem;
        z-index: 45;
        max-height: min(72vh, 36rem);
        overflow: auto;
        border: 2px solid var(--border-soft);
        border-radius: 16px;
        background: var(--bg-surface);
        box-shadow: 0 18px 48px rgba(0, 0, 0, 0.2);
        color: var(--text);
        box-sizing: border-box;
    }

    .header-search-panel[hidden] {
        display: none !important;
    }

    .header-search-panel-inner {
        padding: 1rem 1.15rem 0.9rem;
        max-width: 1200px;
        margin: 0 auto;
    }

    .header-search-section + .header-search-section {
        margin-top: 0.9rem;
        padding-top: 0.8rem;
        border-top: 1px solid var(--border-soft);
    }

    .header-search-heading-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
    }

    .header-search-heading {
        margin: 0 0 0.45rem;
        font-family: "Ubuntu Medium", sans-serif;
        font-size: 0.78rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--text-muted, #666);
    }

    .header-search-clear-recent {
        border: 0;
        background: transparent;
        color: var(--text-muted, #666);
        font-family: "Ubuntu", sans-serif;
        font-size: 0.8rem;
        cursor: pointer;
        text-decoration: underline;
        padding: 0;
    }

    /* Product galleries: horizontal left→right scroll (saves vertical space) */
    .header-search-products,
    .header-search-product-rail {
        list-style: none;
        margin: 0;
        padding: 0.15rem 0.1rem 0.5rem;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 0.85rem;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .header-search-products::-webkit-scrollbar,
    .header-search-product-rail::-webkit-scrollbar {
        height: 6px;
    }

    .header-search-products::-webkit-scrollbar-thumb,
    .header-search-product-rail::-webkit-scrollbar-thumb {
        background: var(--border-soft);
        border-radius: 999px;
    }

    .header-search-products > li {
        flex: 0 0 auto;
        list-style: none;
        scroll-snap-align: start;
    }

    .header-search-product,
    .header-search-rail-card {
        flex: 0 0 auto;
        width: 7.25rem;
        text-decoration: none;
        color: inherit;
        scroll-snap-align: start;
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
        padding: 0;
        border-radius: 0;
        background: transparent;
    }

    .header-search-product:hover .header-search-product-thumb,
    .header-search-product:focus-visible .header-search-product-thumb,
    .header-search-rail-card:hover .header-search-rail-thumb,
    .header-search-rail-card:focus-visible .header-search-rail-thumb {
        outline: none;
        box-shadow: 0 0 0 2px var(--border, #333);
    }

    .header-search-product-thumb,
    .header-search-rail-thumb {
        flex-shrink: 0;
        width: 7.25rem;
        height: 7.25rem;
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid var(--border-soft);
        background: var(--bg-muted, #eee);
    }

    .header-search-product-thumb img,
    .header-search-rail-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .header-search-product-thumb.is-empty,
    .header-search-rail-thumb.is-empty {
        background: linear-gradient(135deg, #ebe6df, #d9d2c8);
    }

    .header-search-product-meta {
        display: flex;
        flex-direction: column;
        gap: 0.12rem;
        min-width: 0;
        padding: 0 0.1rem;
    }

    .header-search-product-meta strong,
    .header-search-rail-name {
        font-family: "Ubuntu Medium", sans-serif;
        font-size: 0.8rem;
        line-height: 1.25;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .header-search-product-meta .form-hint {
        margin: 0;
        font-size: 0.72rem;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Recent search phrases: vertical list, clock + text + remove */
    .header-search-recent {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
    }

    .header-search-recent-row {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        min-width: 0;
        border-radius: 8px;
    }

    .header-search-recent-row:hover,
    .header-search-recent-row:focus-within {
        background: var(--bg-muted, #f3f1ed);
    }

    .header-search-recent-item {
        display: flex;
        align-items: center;
        gap: 0.55rem;
        flex: 1 1 auto;
        min-width: 0;
        text-align: left;
        border: 0;
        background: transparent;
        color: inherit;
        font-family: "Ubuntu", sans-serif;
        font-size: 0.92rem;
        padding: 0.45rem 0.35rem 0.45rem 0.4rem;
        border-radius: 8px;
        cursor: pointer;
    }

    .header-search-recent-item:hover,
    .header-search-recent-item:focus-visible {
        outline: none;
    }

    .header-search-recent-clock {
        flex-shrink: 0;
        display: inline-flex;
        color: var(--text-muted, #777);
        opacity: 0.9;
    }

    .header-search-recent-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .header-search-recent-remove {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        height: 2rem;
        margin-right: 0.15rem;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: var(--text-muted, #777);
        cursor: pointer;
    }

    .header-search-recent-remove:hover,
    .header-search-recent-remove:focus-visible {
        color: var(--text, #222);
        background: rgba(0, 0, 0, 0.06);
        outline: none;
    }

    .header-search-inline-suggestion {
        margin: 0.45rem 0 0;
        font-size: 0.92rem;
    }

    .header-search-suggestion-link {
        display: inline-block;
        color: inherit;
        font-size: 0.92rem;
    }

    .header-search-suggestion-link em {
        font-style: italic;
        text-decoration: underline;
        text-underline-offset: 2px;
    }

    .header-search-empty {
        margin: 0.15rem 0 0;
    }

    .header-search-footer {
        margin-top: 0.75rem;
        padding-top: 0.65rem;
        border-top: 1px solid var(--border-soft);
        display: flex;
        justify-content: flex-end;
    }

    [data-theme="dark"] .header-search-backdrop {
        background: rgba(0, 0, 0, 0.55);
    }

    [data-theme="dark"] .search-did-you-mean {
        background: rgba(255, 255, 255, 0.05);
    }

    [data-theme="dark"] .header-search-recent-row:hover,
    [data-theme="dark"] .header-search-recent-row:focus-within {
        background: rgba(255, 255, 255, 0.06);
    }

    [data-theme="dark"] .header-search-recent-remove:hover,
    [data-theme="dark"] .header-search-recent-remove:focus-visible {
        background: rgba(255, 255, 255, 0.1);
        color: var(--text, #eee);
    }
}

.icon-wrapper {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex-shrink: 0;
    margin-left: auto;
}

.icon-wrapper > a,
.icon-wrapper > .profile-menu {
    display: flex;
    align-items: center;
    padding: 0.2rem;
}

.loyalty-icon {
    height: clamp(28px, 3vw, 36px);
    filter: var(--icon-filter);
}

.profile-icon-desktop {
    height: clamp(30px, 3.2vw, 38px);
    width: auto;
    filter: var(--icon-filter);
    display: block;
    object-fit: cover;
}

/* Real photos must not inherit the monochrome icon filter */
.profile-icon-desktop.profile-icon-avatar,
img.profile-icon-avatar {
    filter: none !important;
    width: clamp(30px, 3.2vw, 38px);
    height: clamp(30px, 3.2vw, 38px);
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border);
}

.cart-icon-desktop {
    height: clamp(30px, 3.3vw, 38px);
    filter: var(--icon-filter);
}

.cart-count-desktop {
    position: absolute;
    top: -4px;
    right: -6px;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    font-family: "Ubuntu Bold";
    font-size: 0.65rem;
    border-radius: 999px;
    line-height: 1;
}

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

/* Profile dropdown */
.profile-menu {
    position: relative;
    display: flex;
    align-items: center;
}

.profile-menu-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 50%;
}

.profile-menu-trigger:focus-visible {
    outline: 2px solid var(--border);
    outline-offset: 3px;
}

.profile-menu-panel {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    min-width: 240px;
    background: var(--menu-bg);
    color: var(--text);
    border: 2px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 12px 28px var(--shadow);
    padding: 0.5rem 0;
    z-index: 2200;
}

.profile-menu-header {
    padding: 0.65rem 1rem 0.75rem;
    border-bottom: 1px solid var(--border-soft);
    margin-bottom: 0.25rem;
}

.profile-menu-name {
    margin: 0;
    font-family: "Ubuntu Medium";
    font-size: 0.95rem;
}

.profile-menu-email {
    margin: 0.2rem 0 0;
    font-size: 0.8rem;
    color: var(--text-muted);
    word-break: break-all;
}

.profile-menu-item {
    display: block;
    padding: 0.55rem 1rem;
    color: var(--text);
    text-decoration: none;
    font-family: "Ubuntu Regular";
    font-size: 0.92rem;
}

.profile-menu-item:hover {
    background: var(--bg-muted);
}

.profile-menu-theme {
    margin-top: 0.35rem;
    padding: 0.75rem 1rem 0.65rem;
    border-top: 1px solid var(--border-soft);
}

.profile-theme-label {
    display: block;
    font-family: "Ubuntu Medium";
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: 0.45rem;
}

.theme-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem;
    border: 2px solid var(--border);
    border-radius: 999px;
    padding: 0.2rem;
    background: var(--bg-muted);
}

.theme-btn {
    border: none;
    background: transparent;
    color: var(--text);
    font-family: "Ubuntu Medium";
    font-size: 0.85rem;
    padding: 0.4rem 0.5rem;
    border-radius: 999px;
    cursor: pointer;
}

.theme-btn.is-active {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
}

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: black;
  display: none;
  justify-content: space-around;
  align-items: center;
  z-index: 1002;
}

.bottom-nav a {
  color: white;
  text-decoration: none;
  font-size: 0.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bottom-nav .icon {
  font-size: 1.4rem;
}

/* Home: hero + copy as one unit, then products, then compact links */
.home-hero {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 1rem 0;
}

.home-hero-media {
    position: relative;
    width: 100%;
    height: clamp(200px, 36vh, 340px);
    overflow: hidden;
    border-radius: 18px;
    border: 2px solid var(--border);
    box-sizing: border-box;
}

.home-hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.home-hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        rgba(10, 12, 16, 0.78) 0%,
        rgba(10, 12, 16, 0.45) 48%,
        rgba(10, 12, 16, 0.15) 100%
    );
    pointer-events: none;
    z-index: 1;
}

.home-hero-copy[hidden] {
    display: none;
}

.home-hero-copy {
    position: absolute;
    left: 2.75rem;
    right: 2rem;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    z-index: 2;
    max-width: 34rem;
    color: #fff;
    text-align: left;
}

.home-hero-copy .promo-eyebrow {
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

.home-hero-copy h1 {
    margin: 0.25rem 0 0.4rem;
    font-size: clamp(1.35rem, 2.8vw, 1.95rem);
    line-height: 1.15;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}

.home-hero-copy .promo-copy {
    margin: 0 0 0.75rem;
    max-width: 42ch;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.92rem;
}

.home-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.btn-hero-secondary {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(4px);
}

.btn-hero-secondary:hover {
    background: rgba(255, 255, 255, 0.22);
}

.home-main {
    padding-top: 1rem;
}

.home-categories {
    margin-bottom: 1.25rem;
}

.home-content-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 2rem;
    margin: 2rem 0 1.5rem;
}

.home-content-col .section-heading {
    margin-bottom: 0.85rem;
}

.home-teaser-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.home-teaser-item {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.75rem;
    border: 2px solid var(--border-soft);
    border-radius: 14px;
    background: var(--bg-surface);
}

.home-teaser-thumb {
    flex: 0 0 4.5rem;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border-soft);
}

.home-teaser-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.home-teaser-body {
    min-width: 0;
    flex: 1 1 auto;
}

.home-teaser-meta {
    margin: 0 0 0.2rem;
    font-size: 0.78rem;
    color: var(--text-muted, #666);
}

.home-teaser-body h3 {
    margin: 0 0 0.25rem;
    font-size: 1rem;
    line-height: 1.25;
}

.home-teaser-body h3 a {
    color: inherit;
    text-decoration: none;
}

.home-teaser-body h3 a:hover {
    text-decoration: underline;
}

.home-teaser-body p {
    margin: 0;
    font-size: 0.88rem;
    color: var(--text-muted, #555);
}

@media (max-aspect-ratio: 18/25) {
    .home-content-split {
        grid-template-columns: 1fr;
    }
}

/* Product variants + reviews */
.product-variants {
    margin: 0.75rem 0 1rem;
}

.variant-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.4rem;
}

.variant-option {
    display: inline-flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.55rem 0.85rem;
    border: 2px solid var(--border-soft);
    border-radius: 12px;
    cursor: pointer;
    background: var(--bg-surface);
    min-width: 5.5rem;
    color: inherit;
    text-decoration: none;
}

.product-variant-name {
    margin: 0.15rem 0 0.35rem;
    font-family: "Ubuntu Medium", sans-serif;
    color: var(--text-muted);
}

.variant-edit-card {
    border: 2px solid var(--border-soft);
    border-radius: 14px;
    padding: 0.9rem 1rem 1rem;
    margin: 0 0 0.85rem;
    background: var(--bg-muted);
}

.variant-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.variant-option.is-selected,
.variant-option:has(input:checked) {
    border-color: var(--border);
    box-shadow: 0 0 0 1px var(--border);
}

.variant-option-label {
    font-family: "Ubuntu Medium", sans-serif;
    font-size: 0.9rem;
}

.variant-option-price {
    font-size: 0.82rem;
    color: var(--text-muted, #555);
}

.product-rating-summary {
    margin: 0.35rem 0 0.5rem;
    font-size: 0.92rem;
}

.product-rating-under-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    margin: 0.25rem 0 0.75rem;
}

/* Star ratings — static display + interactive hover input */
.star-rating {
    display: inline-flex;
    align-items: center;
    gap: 0.1rem;
    line-height: 1;
}

.star-rating .star {
    color: var(--star-empty, #c8c4bc);
    font-size: 1.15rem;
    transition: color 0.12s ease, transform 0.12s ease;
}

.star-rating .star.is-filled,
.star-rating .star.is-half {
    color: var(--star-filled, var(--brand-green, #98bca8));
}

.star-rating-sm .star {
    font-size: 0.95rem;
}

.star-rating-input {
    flex-wrap: wrap;
    gap: 0.15rem 0.2rem;
    margin-top: 0.25rem;
}

.star-rating-input .star {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    padding: 0.15rem 0.2rem;
    margin: 0;
    cursor: pointer;
    font-size: 1.75rem;
    color: var(--star-empty, #c8c4bc);
    line-height: 1;
}

.star-rating-input .star.is-filled {
    color: var(--star-filled, var(--brand-green, #98bca8));
}

.star-rating-input .star:hover,
.star-rating-input .star:focus-visible {
    transform: scale(1.12);
    outline: none;
}

.star-rating-caption {
    margin-left: 0.45rem;
    min-width: 7rem;
}

.review-breakdown {
    display: grid;
    grid-template-columns: minmax(7rem, auto) 1fr;
    gap: 1rem 1.5rem;
    align-items: center;
    margin: 0 0 1.5rem;
    padding: 1rem 1.1rem;
    border: 2px solid var(--border-soft);
    border-radius: 14px;
    background: var(--bg-surface);
}

.review-breakdown-avg {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

.review-breakdown-score {
    font-family: "Ubuntu Bold", "Ubuntu Medium", sans-serif;
    font-size: 2rem;
    line-height: 1;
}

.review-breakdown-bars {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    width: 100%;
}

.review-breakdown-row {
    display: grid;
    grid-template-columns: 4.5rem 1fr 2rem;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.88rem;
}

.review-breakdown-label {
    color: var(--text-muted, #555);
}

.review-breakdown-track {
    display: block;
    height: 0.55rem;
    border-radius: 999px;
    background: var(--bg-muted, #eee);
    overflow: hidden;
}

.review-breakdown-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--brand-green, #98bca8);
    min-width: 0;
}

.review-breakdown-count {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted, #555);
}

@media (max-width: 560px) {
    .review-breakdown {
        grid-template-columns: 1fr;
    }
}

.product-reviews {
    max-width: 1200px;
    margin: 2rem auto 0;
    padding: 0 0.25rem 2rem;
}

.review-form {
    margin-bottom: 1.5rem;
}

.review-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.review-card {
    border: 2px solid var(--border-soft);
    border-radius: 14px;
    padding: 1rem 1.1rem;
    background: var(--bg-surface);
}

.review-card-header {
    display: flex;
    gap: 0.65rem;
    align-items: center;
    margin-bottom: 0.5rem;
}

.review-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border-soft);
}

.review-avatar-sm {
    width: 1.75rem;
    height: 1.75rem;
}

.review-title {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
}

.review-body {
    margin: 0 0 0.65rem;
    white-space: pre-wrap;
}

.review-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.65rem;
}

.review-photos img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--border-soft);
}

.review-owner-reply {
    margin: 0.65rem 0;
    padding: 0.65rem 0.75rem;
    border-left: 3px solid var(--border);
    background: var(--bg-muted, #f6f6f6);
    border-radius: 0 10px 10px 0;
}

.review-helpful {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin: 0.5rem 0;
}

.review-vote-form {
    display: inline-flex;
    gap: 0.35rem;
}

.order-item-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
}

.order-review-btn {
    flex-shrink: 0;
}

.order-review-done {
    font-size: 0.85rem;
}

.home-lab-intro {
    margin: -0.35rem 0 0.85rem;
}

.home-favorites,
.home-new-arrivals,
.home-lab,
.product-row {
    margin-bottom: 1.25rem;
}

/* Home product rails: horizontal slide; dots below (no side arrows) */
.product-scroll {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    min-width: 0;
    overflow: visible;
}

.product-scroll-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    /* overflow-x:auto forces overflow-y to auto too — use border strokes on cards (not outline) */
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0.5rem;
    gap: 1rem !important;
    padding: 0.5rem 0.5rem 0.65rem;
    margin: 0;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
/* Inner row receives rubber-band transform (scroller itself stays untransformed) */
.product-scroll-rubber {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: inherit;
    flex: 0 0 auto;
    min-width: 100%;
    box-sizing: border-box;
    will-change: transform;
    transform: translateZ(0);
    transform-origin: center center;
}
.product-scroll-rubber.is-rubber-pull {
    transition: none !important;
}
.product-scroll-rubber.is-rubber-release {
    transition: transform 0.34s cubic-bezier(0.22, 1.12, 0.36, 1);
}
.product-scroll-track::-webkit-scrollbar {
    display: none;
    height: 0;
    width: 0;
}
@media (prefers-reduced-motion: reduce) {
    .product-scroll-rubber.is-rubber-release {
        transition: none;
    }
}

/* No left/right arrow controls on product rails */
.product-scroll > .product-scroll-btn,
.product-scroll .product-scroll-prev,
.product-scroll .product-scroll-next,
.product-scroll .product-scroll-end {
    display: none !important;
}

/* Dots sit under the tile row — only as wide as the dots (not full rail) */
.product-scroll-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.45rem;
    padding: 0.55rem 0.85rem 0.25rem;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    order: 2;
}
.product-scroll-track {
    order: 1;
}
.product-scroll-dots[hidden] {
    display: none !important;
}
.product-scroll-dot {
    width: 0.55rem;
    height: 0.55rem;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: var(--border, #ccc);
    cursor: pointer;
    transition: width 0.25s ease, background 0.2s ease;
    flex: 0 0 auto;
}
.product-scroll-dot.is-active {
    width: 1.35rem;
    background: var(--color-primary, #111);
}
.product-scroll-dot .hero-dot-fill {
    display: none;
}

.catalog-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
}
.results-per-page {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
}

/* Match medium shop tiles: wider, less tall/skinny than large rail cards */
.product-scroll-track > .product-card,
.product-scroll-track > .lab-card-item,
.product-scroll-track > article,
.product-scroll-rubber > .product-card,
.product-scroll-rubber > .lab-card-item,
.product-scroll-rubber > article {
    flex: 0 0 clamp(14.5rem, 22vw, 16.5rem);
    width: clamp(14.5rem, 22vw, 16.5rem);
    max-width: 17rem;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    min-width: 0;
    box-sizing: border-box;
    /* Stroke is ::after (above images); no outer box-shadow (clips in scroller) */
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    overflow: hidden;
}
.product-scroll-track.catalog-view-medium .product-card-body,
.product-scroll-track.home-product-grid .product-card-body {
    padding: 0.85rem 0.95rem 1rem;
}
.product-scroll-track.catalog-view-medium .product-card-link h3,
.product-scroll-track.home-product-grid .product-card-link h3 {
    font-size: 1.05rem;
    line-height: 1.25;
}
.product-scroll-track.catalog-view-medium .product-card-link p.product-card-desc,
.product-scroll-track.home-product-grid .product-card-link p.product-card-desc {
    -webkit-line-clamp: 2;
    font-size: 0.9rem;
}
.product-scroll-track .product-card-media {
    aspect-ratio: 5 / 4;
}
.product-scroll-track > .product-card:hover,
.product-scroll-track > .lab-card-item:hover,
.product-scroll-track > .product-card:focus-within,
.product-scroll-rubber > .product-card:hover,
.product-scroll-rubber > .lab-card-item:hover,
.product-scroll-rubber > .product-card:focus-within {
    box-shadow: none !important;
    outline: none !important;
    z-index: 2;
}
.product-scroll-track > .product-card:hover::after,
.product-scroll-track > .lab-card-item:hover::after,
.product-scroll-track > .product-card:focus-within::after,
.product-scroll-rubber > .product-card:hover::after,
.product-scroll-rubber > .lab-card-item:hover::after,
.product-scroll-rubber > .product-card:focus-within::after {
    border-width: 5px;
}

.product-scroll-btn {
    flex: 0 0 auto;
    align-self: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 999px;
    border: 2px solid var(--border);
    background: var(--bg-surface);
    color: var(--text);
    cursor: pointer;
    font-size: 1.35rem;
    line-height: 1;
    box-shadow: 0 2px 8px var(--shadow);
    z-index: 2;
}

.product-scroll-btn[hidden],
.product-scroll-see-more[hidden] {
    display: none !important;
}

.product-scroll-end {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    min-width: 2.5rem;
}

.product-scroll-see-more {
    white-space: nowrap;
    font-size: 0.9rem;
    padding: 0.55rem 0.9rem;
}

/* Section CTAs live in the heading row (right-aligned) on all breakpoints */
.section-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem 1.25rem;
    margin: 1rem 0 0.65rem;
}
.section-heading-text {
    min-width: 0;
    flex: 1 1 auto;
}
.section-heading-text h2 {
    margin: 0;
}
.section-cta,
.section-heading > .section-link {
    flex: 0 0 auto;
    margin-left: auto;
    align-self: center;
    white-space: nowrap;
    font-family: "Ubuntu Medium", system-ui, sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-primary, #111);
    text-decoration: none;
    padding: 0.35rem 0.15rem;
}
.section-cta:hover,
.section-heading > .section-link:hover {
    text-decoration: underline;
}
/* Keep legacy class harmless if still present */
.section-link-desktop-hide {
    display: inline;
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.75rem;
    /* Room for product-style stroke / hover ring (not clipped by grid edges) */
    padding: 0.4rem;
    margin: -0.4rem;
}

.category-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 110px;
    padding: 1rem;
    border-radius: var(--radius-card, 16px);
    background: var(--bg-surface);
    color: var(--text);
    text-decoration: none;
    position: relative;
    z-index: 0;
    box-sizing: border-box;
    border: none;
    box-shadow: none;
    outline: none;
    overflow: hidden;
    transition: z-index 0s;
}

/* Stroke above icons/content; absolute so hover width never reflows layout */
.category-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 2px solid var(--border);
    box-sizing: border-box;
    pointer-events: none;
    z-index: 4;
    transition: border-width 0.15s ease;
}
.category-card:hover,
.category-card:focus-visible {
    z-index: 2;
    outline: none;
    box-shadow: none;
}
.category-card:hover::after,
.category-card:focus-visible::after {
    border-width: 5px;
}

.category-card-title {
    font-family: "Britannic Bold";
    font-size: 1.05rem;
}

.category-card-cta {
    font-family: "Ubuntu Medium";
    font-size: 0.82rem;
    color: var(--text-muted);
}

.home-favorites .section-heading {
    margin-top: 0.25rem;
}

@media (max-aspect-ratio: 11/10) {
    .category-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 560px) {
    .category-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.section-kicker {
    margin: 0 0 0.15rem;
    font-family: "Ubuntu Medium";
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.section-link {
    color: var(--text);
    font-family: "Ubuntu Medium";
    text-decoration: none;
}

.section-link:hover {
    text-decoration: underline;
}

.home-links {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-top: 1.15rem;
}

.home-link-card {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem 1.1rem;
    border: 2px solid var(--border);
    border-radius: 14px;
    background: var(--bg-surface);
    color: var(--text);
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.home-link-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px var(--shadow);
}

.home-link-title {
    font-family: "Ubuntu Medium";
    font-size: 0.95rem;
}

.home-link-text {
    font-size: 0.82rem;
    color: var(--text-muted);
}

/* Legacy hero (if used elsewhere) */
hero {
    display: block;
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 1rem 0;
}

.hero-slider {
    position: relative;
    width: 100%;
    height: clamp(220px, 50vh, 480px);
    overflow: hidden;
    border-radius: 15px;
}

.slides {
    width: 100%;
    height: 100%;
}

.slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.8s ease;
    border-radius: 15px;
    border: 2px solid var(--border);
    box-sizing: border-box;
}

.slide.active {
    opacity: 1;
}

.arrow {
    position: absolute;
    background: rgba(0, 0, 0, 0.45);
    color: white;
    border: none;
    font-size: 1.5rem;
    padding: 0.4rem 0.75rem;
    margin: 0;
    cursor: pointer;
    z-index: 10;
    border-radius: 4px;
    top: 50%;
    transform: translateY(-50%);
}

.home-hero .arrow {
    z-index: 5;
}

.arrow.left {
    left: 0.75rem;
}

.arrow.right {
    right: 0.75rem;
}

.arrow:hover {
    background: rgba(0, 0, 0, 0.65);
}

@media (max-aspect-ratio: 18/25) {
    .home-links {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .home-links {
        grid-template-columns: 1fr;
    }
}

/* Layout helpers */
.page-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.1rem 1rem 5rem;
}

.content-page {
    background: var(--bg-surface);
    color: var(--text);
    border-radius: 16px;
    border: 2px solid var(--border);
    padding: 1.5rem;
    margin-top: 0.75rem;
}

/* Buttons */
.btn {
    display: inline-block;
    font-family: "Ubuntu Medium";
    border-radius: 999px;
    padding: 0.65rem 1.25rem;
    border: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
    font-size: 0.95rem;
}

.btn-primary {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
}

.btn-secondary {
    background: var(--btn-secondary-bg);
    color: var(--text);
}

.btn-outline {
    background: var(--bg-surface);
    color: var(--text);
    border-color: var(--border);
}

/* Promo & product grid */
.promo-banner {
    background: var(--bg-promo);
    border: 2px solid var(--border);
    border-radius: 18px;
    padding: 2rem;
    margin-top: 1rem;
}

.promo-eyebrow {
    font-family: "Ubuntu Medium";
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.8rem;
}

.promo-copy {
    max-width: 52ch;
}

/* section-heading base styles defined with home rail CTAs above */

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.25rem;
    padding: 0;
}

.product-card {
    background: var(--bg-surface);
    border: none;
    border-radius: var(--radius-card, 16px);
    /* Clip media to rounded corners; stroke is drawn above images via ::after */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 0;
    color: var(--text);
    box-shadow: none;
    transition: z-index 0s;
}

/* Ring sits above product images so photos can’t cover the stroke */
.product-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 2px solid var(--border);
    box-sizing: border-box;
    pointer-events: none;
    z-index: 5;
    transition: border-width 0.15s ease;
}

.product-card-media-col {
    position: relative;
    min-width: 0;
}

.product-card-media-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* Desktop: media sits above body text (column layout) */
.product-card-media-col {
    order: 0;
}

.product-card-body {
    order: 1;
}

/* Wishlist heart */
.wishlist-btn {
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
    z-index: 3;
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    border: 2px solid var(--border);
    border-radius: 999px;
    background: var(--bg-surface);
    color: var(--text);
    cursor: pointer;
    padding: 0;
    box-shadow: 0 2px 8px var(--shadow);
    transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.wishlist-btn:hover {
    transform: scale(1.06);
}

.wishlist-btn.is-active {
    background: #c62828;
    border-color: #c62828;
    color: #fff;
}

.wishlist-heart {
    width: 1.05rem;
    height: 1.05rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linejoin: round;
}

.wishlist-btn.is-active .wishlist-heart {
    fill: currentColor;
    stroke: currentColor;
}

.wishlist-btn-detail {
    position: static;
    width: auto;
    height: auto;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
}

.wishlist-btn-label {
    font-family: "Ubuntu Medium";
    font-size: 0.85rem;
}

.product-detail-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.product-card:hover,
.product-card:focus-within {
    z-index: 2;
    outline: none;
    box-shadow: none;
}
.product-card:hover::after,
.product-card:focus-within::after {
    border-width: 5px;
}

.product-card.is-out-of-season {
    opacity: 0.72;
}

.product-card.is-out-of-season:hover::after,
.product-card.is-out-of-season:focus-within::after {
    border-color: var(--text-muted);
}

.product-card-body {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    min-height: 0;
}

.product-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    flex: 1;
    min-width: 0;
}

.product-card-link:hover h3 {
    color: #4a6741;
}

.product-card-media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    /* Match the product-card outer radius so image corners don't look sharper */
    border-radius: var(--radius-card, 16px);
    margin-bottom: 0.5rem;
    flex-shrink: 0;
    background: #f4f4f4;
}

.product-card-media-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-muted, #eef1f4);
    color: var(--text-muted, #666);
    font-family: "Britannic Bold", "Ubuntu Medium", sans-serif;
    font-size: clamp(2rem, 8vw, 3rem);
    user-select: none;
}

/* Custom page images (rich text [img | …]) — text wraps around floats */
.custom-page-body {
    overflow: auto;
}
.custom-page-body::after {
    content: "";
    display: table;
    clear: both;
}
.custom-page-figure {
    margin: 1rem 0;
    max-width: 100%;
}
.custom-page-figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-card, 12px);
    border: 2px solid var(--border, #ddd);
    background: var(--bg-muted, #f4f4f4);
}
.custom-page-figcaption {
    margin-top: 0.4rem;
    font-size: 0.88rem;
    color: var(--text-muted, #555);
    line-height: 1.35;
}
.custom-page-figure.float-left {
    float: left;
    width: min(46%, 22rem);
    margin: 0.25rem 1.25rem 0.85rem 0;
}
.custom-page-figure.float-right {
    float: right;
    width: min(46%, 22rem);
    margin: 0.25rem 0 0.85rem 1.25rem;
}
.custom-page-figure.float-center {
    float: none;
    display: block;
    width: min(100%, 36rem);
    margin: 1.25rem auto;
}
.custom-page-figure.float-center img {
    margin: 0 auto;
}
.custom-page-figure.float-full {
    float: none;
    width: 100%;
    margin: 1.25rem 0;
}
@media (max-aspect-ratio: 18/25) {
    .custom-page-figure.float-left,
    .custom-page-figure.float-right {
        float: none;
        width: 100%;
        max-width: 100%;
        margin: 1rem 0;
    }
}

.catalog-view-large .product-card-media,
.catalog-view-medium .product-card-media {
    border-radius: var(--radius-card, 16px);
}

/* Chip overlays the image area (wishlist top-right on desktop) */
.product-card-media-col .purchase-chip-corner {
    top: 0.55rem;
    left: 0.55rem;
}

.product-card-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.45s ease;
}

.product-img-alt {
    opacity: 0;
}

.product-card:hover .product-img-primary,
.product-card:focus-within .product-img-primary {
    opacity: 0;
}

.product-card:hover .product-img-alt,
.product-card:focus-within .product-img-alt {
    opacity: 1;
}

.product-card-rating {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.15rem 0.35rem;
    margin: 0.15rem 0 0.2rem;
    line-height: 1;
}

.product-card-rating .star {
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

.product-card-rating-count {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    color: var(--text-muted, #666);
    position: relative;
    top: 0.05em; /* optical align with star glyphs */
}

.product-card-link h3 {
    margin: 0.15rem 0;
    font-family: "Britannic Bold";
    font-size: 1.05rem;
    transition: color 0.15s ease;
}

.product-card-link p.product-card-desc {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-card-link p.product-card-rating {
    /* don't inherit description clamp */
    display: inline-flex;
    -webkit-line-clamp: unset;
    overflow: visible;
}

.product-tag {
    font-family: "Ubuntu Light";
    font-size: 0.8rem;
    text-transform: uppercase;
}

.product-card-footer {
    margin-top: auto;
    padding-top: 0.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.product-card-action {
    min-width: 118px;
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
}

.product-card-action .btn,
.product-card-action .qty-stepper {
    margin: 0;
}

.qty-stepper {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 2px solid var(--border);
    border-radius: 999px;
    padding: 0.2rem 0.35rem;
    background: var(--bg-surface);
    color: var(--text);
}

.qty-stepper-large {
    padding: 0.35rem 0.5rem;
}

.qty-btn {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: #111;
    color: white;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.qty-btn:hover {
    background: #333;
}

.qty-count {
    min-width: 1.25rem;
    text-align: center;
    font-family: "Ubuntu Bold";
    font-size: 0.95rem;
}

.price {
    font-family: "Ubuntu Bold";
    flex-shrink: 0;
}

.price-large {
    font-size: 1.5rem;
}

/* Product detail page */
.product-detail-page .back-link {
    display: inline-block;
    margin-bottom: 1rem;
    color: var(--text);
    font-family: "Ubuntu Medium";
    text-decoration: none;
}

.product-detail-page .back-link:hover {
    text-decoration: underline;
}

.product-detail {
    display: grid;
    grid-template-columns: minmax(300px, 1.1fr) 1fr;
    gap: 2rem;
    align-items: start;
    background: var(--bg-surface);
    color: var(--text);
    border: 2px solid var(--border);
    border-radius: 18px;
    padding: 1.5rem;
}

/* Amazon-style product gallery */
.product-gallery {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 0.75rem;
    min-width: 0;
}

.gallery-thumbs-scroll {
    max-height: 420px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    padding-right: 2px;
}

.gallery-thumbs {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gallery-thumb {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    padding: 0;
    border: 2px solid var(--border-soft);
    border-radius: 8px;
    background: var(--bg-muted);
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

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

.gallery-thumb:hover,
.gallery-thumb.is-active {
    border-color: var(--border);
    box-shadow: 0 0 0 1px var(--border);
}

.gallery-stage {
    position: relative;
    min-width: 0;
}

.gallery-main {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border: 2px solid var(--border);
    border-radius: 14px;
    background: var(--bg-muted);
}

.gallery-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.gallery-slide.is-active {
    opacity: 1;
}

.gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--bg-surface);
    color: var(--text);
    border: 2px solid var(--border);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    cursor: pointer;
    z-index: 2;
    font-size: 1rem;
    line-height: 1;
    opacity: 0.95;
}

.gallery-prev { left: 0.65rem; }
.gallery-next { right: 0.65rem; }

.gallery-dots {
    display: none;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 0.65rem;
}

.gallery-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border-soft);
    transition: background 0.2s ease, transform 0.2s ease;
}

.gallery-dot.is-active {
    background: var(--border);
    transform: scale(1.15);
}

.product-detail-info {
    color: var(--text);
}

.product-detail-info h1 {
    margin-top: 0.25rem;
    color: var(--text);
}

/* Product description — slightly smaller so more text fits in view */
.product-detail-description {
    max-width: 50ch;
    color: var(--text);
    font-size: 0.9rem;
    line-height: 1.48;
}

.product-detail-action {
    margin-top: 1rem;
    min-height: 44px;
    justify-content: flex-start;
    gap: 0.75rem;
}

.product-sections {
    max-width: 1200px;
    margin: 1.5rem auto 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.product-section {
    background: var(--bg-surface);
    color: var(--text);
    border: 2px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
}

.product-section summary {
    cursor: pointer;
    list-style: none;
    padding: 0.9rem 1.1rem;
    font-family: "Ubuntu Medium";
    font-size: 1rem;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.product-section summary::-webkit-details-marker {
    display: none;
}

.product-section summary::after {
    content: "";
    width: 0.55rem;
    height: 0.55rem;
    flex-shrink: 0;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.28s ease;
    margin-top: -0.2rem;
}

.product-section[open] summary::after {
    transform: rotate(-135deg);
    margin-top: 0.15rem;
}

.product-section-body {
    padding: 0.85rem 1.1rem 1.1rem;
    border-top: 1px solid var(--border-soft);
    line-height: 1.55;
    color: var(--text);
}

/* Policy accordion expand/collapse */
.policy-panel-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.32s ease;
}

.policy-panel[open] > .policy-panel-content {
    grid-template-rows: 1fr;
}

.policy-panel-inner {
    overflow: hidden;
    min-height: 0;
    opacity: 0;
    transform: translateY(-0.35rem);
    transition: opacity 0.28s ease, transform 0.28s ease;
}

.policy-panel[open] > .policy-panel-content > .policy-panel-inner {
    opacity: 1;
    transform: translateY(0);
}

.policy-archive-meta {
    margin: 0 0 0.65rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.product-section-body.rich-text {
    font-family: "Ubuntu Regular";
    font-size: 0.95rem;
}

.product-section-body.rich-text strong {
    font-family: "Ubuntu Bold";
    font-weight: normal;
}

.product-section-body.rich-text em {
    font-family: "Ubuntu Italic";
    font-style: normal;
}

.product-section-body.rich-text u {
    text-decoration: underline;
    text-underline-offset: 0.12em;
}

.product-section-body p,
.product-section-links {
    margin: 0.75rem 0 0;
    line-height: 1.5;
    color: var(--text);
}

.product-section-body a,
.product-section-links a {
    color: var(--text);
    font-family: "Ubuntu Medium";
}

/* Sliding segment control for staff section tabs */
.staff-tabs,
.staff-subtabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0 0 1.25rem;
    padding: 0.25rem;
    border: 2px solid var(--border-soft);
    border-radius: 12px;
    background: var(--bg-muted, #f6f6f6);
    width: fit-content;
    max-width: 100%;
}

.staff-tab,
.staff-subtab {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.95rem;
    border-radius: 9px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted, #555);
    text-decoration: none;
    font-family: "Ubuntu Medium", sans-serif;
    font-size: 0.92rem;
    line-height: 1.2;
    cursor: pointer;
}

.staff-tab:hover,
.staff-subtab:hover {
    color: var(--text, #222);
    background: rgba(255, 255, 255, 0.65);
}

.staff-tab.is-active,
.staff-subtab.is-active {
    color: var(--text, #222);
    background: var(--bg-surface, #fff);
    border-color: var(--border-soft);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .staff-tabs,
[data-theme="dark"] .staff-subtabs {
    background: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .staff-tab.is-active,
[data-theme="dark"] .staff-subtab.is-active {
    background: var(--bg-surface, #1e1e1e);
}

/* Nested segment control (e.g. Content → Heros → Home/Lab) — tighter, no extra stacking */
.staff-tabs-nested {
    margin: 0 0 1rem;
    padding: 0.2rem;
    gap: 0.25rem;
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
    align-self: flex-start;
}

.staff-tabs-nested .staff-tab {
    padding: 0.4rem 0.85rem;
}

.staff-pages-editor > .staff-tabs-nested {
    /* Parent uses flex gap — avoid double vertical spacing with margin */
    margin-bottom: 0;
}

.staff-markup-hint code {
    font-size: 0.85em;
}

.staff-content-thumb {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.5rem 0 0.75rem;
}

.staff-content-thumb img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 10px;
    border: 2px solid var(--border-soft);
}

.content-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.25rem;
    margin-top: 1.25rem;
}

.content-card {
    background: var(--bg-surface);
    border: 2px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    color: var(--text);
}

.content-card-media {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--bg-muted);
}

.content-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* News images: designed for 1366×768 assets, shown fully (no crop) */
.content-card-media--news {
    aspect-ratio: 1366 / 768;
    background: var(--bg-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.content-card-media--news img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

.content-card-body {
    padding: 1rem 1.1rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1;
}

.content-card-body h2 {
    margin: 0;
    font-family: "Britannic Bold";
    font-size: 1.15rem;
}

.content-card-body h2 a {
    color: inherit;
    text-decoration: none;
}

.content-card-body h2 a:hover {
    text-decoration: underline;
}

.content-card-meta,
.content-card-location {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.content-card-preview {
    margin: 0.25rem 0 0.5rem;
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.content-detail-image {
    width: 100%;
    max-height: 360px;
    object-fit: cover;
    border-radius: 14px;
    border: 2px solid var(--border);
    margin-bottom: 1rem;
}

.content-detail-body {
    margin-top: 1rem;
    line-height: 1.6;
}

.content-detail-body a,
.rich-text a,
.product-detail-description a {
    color: var(--text);
    font-family: "Ubuntu Medium";
    text-decoration: underline;
    text-underline-offset: 0.12em;
}

.product-detail-description.rich-text {
    max-width: 52ch;
    margin: 0.5rem 0 0.75rem;
    font-size: 0.9rem;
    line-height: 1.48;
}

/* Product detail tabs */
.product-tabs {
    max-width: 1200px;
    margin: 1.5rem auto 0;
    background: var(--bg-surface);
    border: 2px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    color: var(--text);
}

.product-tablist {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-bottom: 2px solid var(--border);
    background: var(--bg-muted);
}

.product-tab {
    border: none;
    background: transparent;
    color: var(--text);
    font-family: "Ubuntu Medium";
    font-size: 0.92rem;
    padding: 0.85rem 1.1rem;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
}

.product-tab:hover {
    background: var(--bg-surface);
}

.product-tab.is-active {
    background: var(--bg-surface);
    border-bottom-color: var(--border);
}

.product-tabpanel {
    padding: 1.15rem 1.25rem 1.35rem;
    line-height: 1.55;
}

.product-tabpanel[hidden] {
    display: none !important;
}

/* Catalog view modes */
.results-toolbar,
.content-filters-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 1rem;
}

.content-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: flex-end;
    flex: 1;
}

.content-filters .form-field {
    margin: 0;
    min-width: 140px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.content-filters .form-field > span:first-of-type {
    min-height: 1.15rem;
    margin-bottom: 0.3rem;
}

.content-filters .form-field .input-with-icon {
    display: block;
    position: relative;
    width: 100%;
    margin: 0;
    height: 2.5rem;
}

.content-filters .form-field .input-with-icon .field-search-icon {
    top: 50%;
    transform: translateY(-50%);
}

.content-filters .form-field .input-with-icon input,
.content-filters .form-field > input,
.content-filters .form-field > select {
    width: 100%;
    height: 2.5rem;
    min-height: 2.5rem;
    box-sizing: border-box;
    margin: 0;
}

.view-switcher-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.view-btn {
    width: 2.2rem;
    height: 2.2rem;
    border: 2px solid var(--border);
    background: var(--bg-surface);
    color: var(--text);
    border-radius: 10px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.view-btn svg {
    width: 1.05rem;
    height: 1.05rem;
    display: block;
}

.view-btn.is-active {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border-color: var(--btn-primary-bg);
}

.view-btn:hover {
    background: var(--bg-muted);
}

.view-btn.is-active:hover {
    background: var(--btn-primary-bg);
}

.qty-stepper-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.qty-remove {
    width: 32px;
    height: 32px;
    border: 2px solid var(--danger);
    border-radius: 50%;
    background: var(--bg-surface);
    color: var(--danger);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
}

.qty-remove svg {
    width: 0.95rem;
    height: 0.95rem;
}

.qty-remove:hover {
    background: rgba(139, 30, 30, 0.1);
}

.catalog-view-list {
    grid-template-columns: 1fr !important;
}

.catalog-view-list .product-card-media,
.catalog-view-list .product-card-media-col,
.catalog-view-list .content-card-media,
.catalog-view-list .wishlist-btn {
    display: none !important;
}

.catalog-view-list .product-card {
    flex-direction: row;
    align-items: center;
}

.catalog-view-list .content-card {
    flex-direction: column;
    align-items: stretch;
}

.catalog-view-list .product-card-body {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5rem 1rem;
    align-items: center;
}

.catalog-view-list .content-card-body {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 0.35rem;
}

.catalog-view-list .content-card-body h2,
.catalog-view-list .content-card-preview,
.catalog-view-list .content-card-meta,
.catalog-view-list .content-card-location {
    width: 100%;
    text-align: left;
}

.catalog-view-list .product-card-footer {
    grid-column: 2;
    grid-row: 1 / span 3;
    flex-direction: column;
    align-items: flex-end;
}

/* Small icons: compact tiles, buttons must stay inside card */
.catalog-view-small {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
    gap: 0.85rem !important;
}

.catalog-view-small .product-card {
    overflow: hidden;
}

.catalog-view-small .product-card-body {
    padding: 0.65rem;
    gap: 0.35rem;
    min-width: 0;
}

.catalog-view-small .product-card-link p.product-card-desc,
.catalog-view-small .content-card-preview,
.catalog-view-small .product-card-link .product-tag {
    display: none;
}

/* Small tiles: hide made-to-order description (keep season badge on medium/large) */
.catalog-view-small .made-to-order-note,
.catalog-view-small .product-card-season-banner {
    display: none !important;
}

.catalog-view-small .product-card-link h3,
.catalog-view-small .content-card-body h2 {
    font-size: 0.85rem;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.catalog-view-small .product-card-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
    padding-top: 0.4rem;
}

.catalog-view-small .product-card-action {
    min-width: 0;
    width: 100%;
    justify-content: stretch;
}

.catalog-view-small .product-card-action .btn {
    width: 100%;
    box-sizing: border-box;
    padding: 0.4rem 0.45rem;
    font-size: 0.72rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.catalog-view-small .out-of-season-label {
    font-size: 0.72rem;
    text-align: center;
    width: 100%;
    display: block;
}

.catalog-view-small .qty-stepper-wrap {
    width: 100%;
    justify-content: space-between;
}

.catalog-view-small .qty-stepper {
    flex: 1;
    min-width: 0;
    padding: 0.1rem 0.2rem;
    gap: 0.15rem;
}

.catalog-view-small .qty-btn {
    width: 24px;
    height: 24px;
    font-size: 0.95rem;
}

.catalog-view-small .qty-remove {
    width: 26px;
    height: 26px;
}

.catalog-view-small .price {
    font-size: 0.85rem;
}

.catalog-view-small .product-card-media-col .wishlist-btn {
    width: 1.85rem;
    height: 1.85rem;
    top: 0.4rem;
    right: 0.4rem;
}

/* Medium = default product-grid sizing */
.catalog-view-medium.product-grid,
.catalog-view-medium.content-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

/* Large = fewer, bigger cards */
.catalog-view-large {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
    gap: 1.5rem !important;
}

.catalog-view-large .product-card-body {
    padding: 1.25rem;
}

.catalog-view-large .product-card-link h3,
.catalog-view-large .content-card-body h2 {
    font-size: 1.25rem;
}

.catalog-view-large .product-card-link p.product-card-desc {
    -webkit-line-clamp: 4;
    font-size: 0.98rem;
}

.catalog-view-large .content-card-media:not(.content-card-media--news) {
    aspect-ratio: 16 / 11;
}

.catalog-view-large .content-card-media--news {
    aspect-ratio: 1366 / 768;
}

.catalog-view-large .price {
    font-size: 1.15rem;
}

.catalog-view-large .product-card-action .btn {
    padding: 0.75rem 1.35rem;
    font-size: 1rem;
}

.events-archive {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 2px solid var(--border-soft);
}

.content-card.is-tbd .content-card-meta {
    color: var(--text-muted);
    font-style: italic;
}

.content-card-archived {
    opacity: 0.88;
}

#event-schedule-fields.is-disabled,
#news-custom-date.is-disabled {
    opacity: 0.45;
    pointer-events: none;
}

.policy-archive {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 2px solid var(--border-soft);
}

.policy-panel-archived {
    opacity: 0.92;
}

.staff-pages-editor {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.staff-page-form {
    max-width: 720px;
}

.staff-page-form h3 {
    margin-top: 0;
}

.scent-quiz-progress {
    margin: 0 0 1rem;
}

.scent-quiz-progress-track {
    height: 8px;
    background: var(--bg-muted, #f4f6f8);
    border: 1px solid var(--border, #111);
    border-radius: 999px;
    overflow: hidden;
}

.scent-quiz-landing {
    text-align: center;
    padding: 1.5rem 0 2rem;
}

.scent-quiz-lead {
    font-size: 1.15rem;
    margin: 0.35rem auto 1.25rem;
    max-width: 36rem;
}

.scent-quiz-landing-actions {
    justify-content: center;
}

.scent-quiz-progress-bar {
    height: 100%;
    width: 0;
    background: #98bca8;
    transition: width 0.35s ease;
}

.scent-quiz-viewport {
    overflow: hidden;
}

.scent-quiz-track {
    display: flex;
    align-items: flex-start;
    transition: transform 0.35s ease;
}

.scent-quiz-question {
    flex: 0 0 100%;
    min-width: 100%;
    box-sizing: border-box;
}

.scent-quiz-grid {
    margin-top: 0.75rem;
}

.scent-quiz-reason {
    margin: 0.4rem 0 0;
}

@media (prefers-reduced-motion: reduce) {
    .scent-quiz-progress-bar,
    .scent-quiz-track {
        transition: none;
    }
}

.scent-quiz-progress-label {
    margin: 0.4rem 0 0;
    font-size: 0.85rem;
}

.scent-quiz-question[hidden],
.scent-quiz[hidden],
.scent-quiz-result[hidden],
#scent-quiz-picks[hidden] {
    display: none;
}

.scent-quiz-question {
    border: 1px solid var(--border, #ddd);
    border-radius: 12px;
    margin: 0 0 1rem;
    padding: 0.75rem 1rem 1rem;
}

.scent-quiz-question legend {
    font-weight: 700;
    padding: 0 0.25rem;
}

.scent-quiz-option {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    margin: 0.45rem 0;
}

.scent-quiz-pick {
    margin: 0.75rem 0;
}

.scent-quiz-result {
    margin: 1.5rem 0;
}

.preview-banner {
    background: #fff3cd;
    color: #111;
    border: 2px solid #111;
    border-radius: 10px;
    padding: 0.65rem 1rem;
    font-family: "Ubuntu Medium", sans-serif;
    font-size: 0.9rem;
    margin: 0 0 1rem;
}

[data-theme="dark"] .preview-banner {
    background: #3a3218;
    color: #fff8e1;
    border-color: var(--border);
}

.staff-archive-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 820px;
}

.staff-archive-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.75rem;
    align-items: start;
    padding: 0.85rem 1rem;
    border: 2px solid var(--border-soft);
    border-radius: 12px;
    background: var(--bg-surface);
}

.staff-archive-meta h3 {
    margin: 0 0 0.25rem;
    font-size: 1rem;
    font-family: "Ubuntu Medium";
}

.staff-archive-meta p {
    margin: 0.15rem 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.staff-archive-preview {
    color: var(--text) !important;
    margin-top: 0.35rem !important;
}

.btn-icon-danger {
    width: 2.25rem;
    height: 2.25rem;
    border: 2px solid var(--danger);
    border-radius: 50%;
    background: var(--bg-surface);
    color: var(--danger);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.btn-icon-danger svg {
    width: 1rem;
    height: 1rem;
}

.btn-icon-danger:hover {
    background: rgba(139, 30, 30, 0.1);
}

.btn-danger-outline {
    border-color: var(--danger);
    color: var(--danger);
}

.btn-danger-outline:hover {
    background: rgba(139, 30, 30, 0.08);
}

.cart-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
}

.in-cart-label {
    font-family: "Ubuntu Light";
    font-size: 0.9rem;
    color: var(--text-muted);
}

.split-promo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}

.split-card {
    border: 2px solid var(--border);
    border-radius: 16px;
    padding: 1.5rem;
    background: var(--bg-surface);
    color: var(--text);
}

.lab-card {
    background: var(--bg-muted);
}

/* Shop */
.shop-layout {
    display: grid;
    grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
    gap: 1.5rem;
    max-width: 100%;
    min-width: 0;
}

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

.shop-filters {
    background: var(--bg-surface);
    border: 2px solid var(--border);
    border-radius: 14px;
    padding: 1rem;
    height: fit-content;
    color: var(--text);
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
}

.content-page,
.split-card {
    background: var(--bg-surface);
    color: var(--text);
}

.filter-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
}

.filter-list a {
    color: #111;
    text-decoration: none;
    display: block;
    padding: 0.35rem 0.5rem;
    border-radius: 8px;
}

.filter-list a:hover {
    background: #f0f4f8;
}

.filter-list a.is-active {
    background: #111;
    color: white;
    font-family: "Ubuntu Medium";
}

.filter-label {
    font-family: "Ubuntu Medium";
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0.75rem 0 0.35rem;
    color: #444;
}

.filter-note {
    font-size: 0.85rem;
    color: #555;
    margin: 0.5rem 0;
}

.filter-gift-btn {
    display: inline-block;
    margin-top: 0.25rem;
    font-size: 0.85rem;
    padding: 0.4rem 0.9rem;
}

.season-badge {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.1rem 0.4rem;
    font-size: 0.7rem;
    font-family: "Ubuntu Medium";
    text-transform: none;
    background: var(--bg-muted);
    border-radius: 999px;
    color: var(--text-muted);
    border: 1px solid var(--border-soft);
    vertical-align: middle;
}

.out-of-season-label {
    font-family: "Ubuntu Medium";
    font-size: 0.85rem;
    color: #666;
}

/* Cart / checkout gift options */
.gift-options,
.gift-options-box {
    background: #fff8ef;
    border: 2px solid #111;
    border-radius: 16px;
    padding: 1.25rem 1.35rem;
    margin-bottom: 1.5rem;
    box-sizing: border-box;
    overflow: visible;
    /* Override .checkout-section underline that cuts the box bottom */
    border-bottom: 2px solid #111 !important;
    padding-bottom: 1.25rem !important;
}

.gift-options.seasonal-wrap {
    border-color: #8b1e1e;
    border-bottom-color: #8b1e1e !important;
}

.gift-options h2 {
    margin: 0 0 0.35rem;
    text-align: left;
}

.gift-checkbox {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-top: 0.75rem;
    cursor: pointer;
    padding: 0.55rem 0.65rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.55);
    box-sizing: border-box;
}

.gift-checkbox.seasonal {
    background: rgba(139, 30, 30, 0.08);
}

.gift-checkbox input {
    width: 18px;
    height: 18px;
    margin: 0;
    flex-shrink: 0;
}

.gift-checkbox-label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.15rem;
    min-width: 0;
}

.gift-checkbox-label strong {
    line-height: 1.25;
}

.gift-checkbox-label small {
    display: block;
    color: #444;
    font-family: "Ubuntu Light";
    line-height: 1.35;
}

[data-theme="dark"] .gift-options,
[data-theme="dark"] .gift-options-box {
    background: var(--bg-muted);
    border-color: var(--border);
    border-bottom-color: var(--border) !important;
}

[data-theme="dark"] .gift-checkbox {
    background: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .gift-checkbox-label small {
    color: var(--text-muted);
}

.cart-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cart-line {
    display: grid;
    grid-template-columns: 96px 1fr auto;
    gap: 1rem;
    align-items: center;
    border-bottom: 1px solid #ddd;
    padding: 1rem 0;
}

/* Cart page: checkbox | image | text+actions (always to the right of the image) */
.cart-page .cart-line,
.cart-list .cart-line {
    display: grid;
    grid-template-columns: 2.25rem 88px minmax(0, 1fr);
    gap: 0.85rem 1rem;
    align-items: start;
}

.cart-page .cart-select,
.cart-list .cart-select {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 2rem;
    width: 2.25rem;
    grid-column: 1;
    grid-row: 1;
}

.cart-page .cart-select input,
.cart-list .cart-select input {
    width: 1.2rem;
    height: 1.2rem;
    margin: 0;
    flex-shrink: 0;
}

.cart-page .cart-line-media,
.cart-list .cart-line-media {
    width: 88px;
    grid-column: 2;
    grid-row: 1;
}

.cart-page .cart-line-main,
.cart-list .cart-line-main {
    grid-column: 3;
    grid-row: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding-left: 0.15rem;
}

.cart-page .cart-line-details,
.cart-list .cart-line-details {
    min-width: 0;
    padding-left: 0;
}

.cart-page .cart-line-actions,
.cart-list .cart-line-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
}

.cart-line-media {
    display: block;
    flex-shrink: 0;
}

.cart-line-media img,
.cart-line img {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid #111;
    display: block;
}

.cart-page .cart-line-media img,
.cart-list .cart-line-media img {
    width: 88px;
    height: 88px;
}

.cart-line-details h3 {
    margin: 0 0 0.25rem;
}

.cart-line-details h3 a {
    color: inherit;
    text-decoration: none;
}

.cart-line-details h3 a:hover {
    color: #4a6741;
}

.cart-line-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    flex-shrink: 0;
}

.cart-line-actions .line-total {
    font-family: "Ubuntu Bold";
}

.cart-summary {
    margin-top: 1.5rem;
    padding: 1.25rem;
    border: 2px solid var(--border);
    border-radius: 16px;
    background: var(--bg-page);
    color: var(--text);
}

.summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 1.15rem;
    margin-bottom: 1rem;
}

/* Lab — hero matches home (single stroke on media, not outer shell) */
.lab-page .lab-hero.home-hero {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
}

.lab-badge {
    display: inline-block;
    background: #5c3d2e;
    color: white;
    font-family: "Ubuntu Medium";
    font-size: 0.75rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    text-transform: uppercase;
    margin-bottom: 0.35rem;
    max-width: calc(100% - 0.5rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
    z-index: 2;
}

.lab-badge-corner {
    position: absolute;
    top: 0.55rem;
    left: 0.55rem;
    margin: 0;
    pointer-events: none;
}

.lab-card-item .product-card-media-col {
    position: relative;
}

.lab-card-item .product-card-link {
    position: relative;
}

.lab-card-item .product-card-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.65rem;
}

/* Lab star rating + would-buy radios */
.lab-star-fieldset,
.lab-buy-fieldset {
    border: none;
    margin: 0 0 1rem;
    padding: 0;
}
.lab-star-fieldset legend,
.lab-buy-fieldset legend {
    font-family: "Ubuntu Medium";
    margin-bottom: 0.45rem;
}
.lab-star-row {
    display: flex;
    gap: 0.15rem;
    flex-wrap: wrap;
}
.lab-star-option {
    cursor: pointer;
    margin: 0 !important;
}
.lab-star-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.lab-star-glyph {
    font-size: 1.85rem;
    line-height: 1;
    color: #cfcfcf;
    transition: color 0.12s ease, transform 0.12s ease;
}
.lab-star-option.is-on .lab-star-glyph,
.lab-star-option:hover .lab-star-glyph {
    color: #e6a817;
}
.lab-star-option:hover .lab-star-glyph {
    transform: scale(1.08);
}
.lab-star-desc {
    margin: 0.4rem 0 0;
    font-size: 0.95rem;
    color: var(--text-muted, #555);
}
.lab-buy-radios {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
}
.lab-buy-option {
    display: inline-flex !important;
    align-items: center;
    gap: 0.4rem;
    margin: 0 !important;
    padding: 0.45rem 0.85rem;
    border: 2px solid var(--border-soft, #ddd);
    border-radius: 999px;
    cursor: pointer;
    font-family: "Ubuntu Medium";
}
.lab-buy-option input {
    margin: 0;
}
.lab-buy-option:has(input:checked) {
    border-color: #5c3d2e;
    background: rgba(92, 61, 46, 0.08);
}

@media (max-aspect-ratio: 18/25), (max-width: 720px) {
    .lab-badge-corner {
        top: 0.4rem;
        left: 0.4rem;
        font-size: 0.68rem;
        padding: 0.15rem 0.45rem;
        max-width: min(42vw, 9rem);
    }
}

.lab-detail {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) 1fr;
    gap: 2rem;
    align-items: start;
}

.lab-detail .product-gallery .gallery-main,
.lab-detail .gallery-thumb.is-active {
    border-color: #5c3d2e;
}

.feedback-form label {
    display: block;
    margin-bottom: 0.75rem;
    font-family: "Ubuntu Medium";
}

.feedback-form select,
.feedback-form textarea {
    width: 100%;
    margin-top: 0.35rem;
    padding: 0.5rem;
    border: 2px solid #111;
    border-radius: 8px;
    font-family: "Ubuntu Regular";
    box-sizing: border-box;
}

.contact-form {
    max-width: none;
    margin: 1.25rem 0 0;
    width: 100%;
    box-sizing: border-box;
    padding: 0;
}

.contact-form label {
    display: block;
    margin-bottom: 0.85rem;
    font-family: "Ubuntu Medium";
    width: 100%;
    box-sizing: border-box;
    text-align: left;
}

.contact-form input,
.contact-form textarea {
    display: block;
    width: 100%;
    max-width: 100%;
    margin-top: 0.35rem;
    padding: 0.55rem 0.85rem;
    border: 2px solid var(--border);
    border-radius: 999px;
    font-family: "Ubuntu Regular";
    background: var(--input-bg);
    color: var(--text);
    box-sizing: border-box;
}

.contact-form textarea {
    border-radius: 14px;
    resize: vertical;
    min-height: 7rem;
}

/* All multi-line fields: vertical resize only */
textarea {
    resize: vertical;
    max-width: 100%;
    box-sizing: border-box;
}

/* Staff portal */
.staff-page {
    background: var(--bg-staff);
    border-radius: 18px;
    padding: 1.5rem;
    color: var(--text);
}

.staff-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.85rem;
    margin-bottom: 1.5rem;
    width: 100%;
}

/* Search sits alone above tabs — never shares a row with nav chips */
.staff-nav-search-wrap {
    width: 100%;
    max-width: 28rem;
    flex: 0 0 auto;
}

.staff-nav-searchbar-wrap {
    position: relative;
    width: 100%;
}

.staff-nav-searchbar-wrap .search-icon {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    height: 1.05rem;
    width: 1.05rem;
    pointer-events: none;
    z-index: 1;
}

.staff-nav-search.home-searchbar,
.staff-nav-search {
    width: 100%;
    height: 2.4rem;
    box-sizing: border-box;
    border: 2px solid var(--border);
    border-radius: var(--radius-chip, 999px);
    padding: 0 1rem 0 2.5rem;
    font-family: "Ubuntu Light", "Ubuntu", sans-serif;
    font-size: 0.95rem;
    background: var(--input-bg, var(--bg-surface));
    color: var(--text);
    margin: 0;
}

.staff-nav-search:focus {
    outline: none;
    border-color: var(--border);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

/* Sliding segment strip for all staff section links */
.staff-nav-tabs.staff-tabs {
    width: 100%;
    max-width: 100%;
    flex-wrap: wrap;
    margin: 0;
}

.staff-store-owner-tools .staff-nav-link {
    display: block;
    width: 100%;
    text-align: left;
    margin-bottom: 0.25rem;
}

[data-theme="dark"] .staff-store-owner-tools {
    border-top-color: rgba(255, 255, 255, 0.12) !important;
}

.staff-nav-tabs .staff-tab,
.staff-nav-tabs .staff-nav-link {
    border: 1px solid transparent;
    background: transparent;
    box-shadow: none;
    border-radius: 9px;
    padding: 0.45rem 0.9rem;
    font-size: 0.9rem;
}

.staff-nav-tabs .staff-tab.is-active,
.staff-nav-tabs .staff-tab.active,
.staff-nav-tabs .staff-nav-link.is-active,
.staff-nav-tabs .staff-nav-link.active {
    background: var(--bg-surface, #fff);
    color: var(--text, #222);
    border-color: var(--border-soft);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.staff-nav-link {
    text-decoration: none;
    color: var(--text-muted, var(--text));
    font-family: "Ubuntu Medium", sans-serif;
}

/* Legacy active class without breaking sliding tabs */
.staff-nav > .staff-nav-link {
    padding: 0.4rem 0.9rem;
    border: 2px solid var(--border);
    border-radius: var(--radius-chip, 999px);
    background: var(--bg-surface);
    color: var(--text);
}

.staff-nav > .staff-nav-link.active {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
}

.staff-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

.staff-card {
    background: var(--bg-surface);
    border: 2px solid var(--border);
    border-radius: 14px;
    padding: 1rem;
}

/* Account pages */
.profile-layout {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1.25rem;
    max-width: 860px;
    margin: 0 auto;
    align-items: start;
}

.profile-side-nav {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    background: var(--bg-surface);
    border: 2px solid var(--border);
    border-radius: 14px;
    padding: 0.75rem;
}

.profile-side-nav a {
    text-decoration: none;
    color: var(--text);
    padding: 0.5rem 0.65rem;
    border-radius: 8px;
    font-size: 0.92rem;
}

.profile-side-nav a:hover {
    background: var(--bg-muted);
}

.profile-side-nav a.is-active {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    font-family: "Ubuntu Medium";
}

.profile-field {
    text-align: left;
    margin: 0.75rem 0;
}

.profile-section-card {
    text-align: left;
}

@media (max-aspect-ratio: 18/25) {
    .profile-layout {
        grid-template-columns: 1fr;
    }

    .profile-side-nav {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

.staff-category-info {
    background: var(--bg-surface);
    color: var(--text);
    border: 2px solid var(--border);
    border-radius: 14px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.staff-category-info h2 {
    margin-top: 0;
}

.staff-subheading {
    margin: 1.5rem 0 0.5rem;
    font-family: "Ubuntu Medium";
    font-size: 1.05rem;
}

.staff-subheading:first-of-type {
    margin-top: 0.5rem;
}

.staff-category-info .staff-product-form {
    border: none;
    padding: 0;
    background: transparent;
}

.staff-product-layout {
    display: grid;
    grid-template-columns: minmax(280px, 420px) 1fr;
    gap: 1.5rem;
    align-items: start;
}

.staff-product-form,
.staff-product-list {
    background: var(--bg-surface);
    color: var(--text);
    border: 2px solid var(--border);
    border-radius: 14px;
    padding: 1.25rem;
}

.staff-product-form h2,
.staff-product-list h2 {
    margin-top: 0;
}

.form-field {
    display: block;
    margin-bottom: 0.85rem;
    text-align: left;
}

/* Only the direct label text — not nested wrappers like .input-with-icon */
.form-field > span:first-of-type {
    display: block;
    font-family: "Ubuntu Medium";
    font-size: 0.85rem;
    margin-bottom: 0.3rem;
}

.form-field > span.input-with-icon {
    margin-bottom: 0;
    font-family: inherit;
    font-size: inherit;
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="password"],
.form-field input[type="number"],
.form-field input[type="search"],
.form-field input[type="date"],
.form-field input[type="tel"],
.form-field input[type="file"],
.form-field select,
.form-field textarea,
.login-form input,
.return-form input,
.return-form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 0.55rem 0.85rem;
    border: 2px solid var(--border);
    border-radius: 999px;
    font-family: "Ubuntu Regular";
    font-size: 0.95rem;
    background: var(--input-bg);
    color: var(--text);
    min-height: 2.5rem;
}

.form-field textarea {
    border-radius: 14px;
    min-height: 5rem;
    padding: 0.65rem 0.85rem;
}

/* Search fields — glass icon like the header */
.input-with-icon {
    position: relative;
    display: block;
}

.input-with-icon .field-search-icon {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    height: 1.05rem;
    width: 1.05rem;
    pointer-events: none;
    opacity: 0.75;
}

.input-with-icon input[type="search"],
.input-with-icon input[type="text"] {
    padding-left: 2.4rem;
}

.return-form {
    max-width: 520px;
    margin: 1.25rem 0;
}

.return-form .btn {
    margin-top: 0.5rem;
}

/* Site footer */
.site-footer {
    background: var(--bg-header);
    color: var(--text);
    border-top: 2px solid var(--border);
    margin-top: 2rem;
    padding: 2.25rem 1rem 5.5rem;
}

.site-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem 1.25rem;
}

.footer-heading {
    margin: 0 0 0.65rem;
    font-family: "Ubuntu Medium";
    font-size: 0.95rem;
    letter-spacing: 0.02em;
}

.footer-col p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-muted);
}

.footer-col a {
    color: var(--text);
    text-decoration: none;
}

.footer-col a:hover {
    text-decoration: underline;
}

.footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-links li {
    margin: 0.35rem 0;
}

.footer-links a {
    font-size: 0.9rem;
}

.footer-payments {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.pay-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.4rem;
    padding: 0.3rem 0.45rem;
    border-radius: 6px;
    border: 1px solid var(--border-soft);
    background: var(--bg-surface);
    font-family: "Ubuntu Bold";
    font-size: 0.65rem;
    letter-spacing: 0.02em;
    color: var(--text);
    line-height: 1;
}

.pay-visa { color: #1a1f71; border-color: #1a1f71; }
.pay-mc { color: #eb001b; border-color: #eb001b; }
.pay-amex { color: #2e77bc; border-color: #2e77bc; }
.pay-discover { color: #ff6000; border-color: #ff6000; }
.pay-bank { color: #0a7c42; border-color: #0a7c42; }
.pay-apple { color: var(--text); }
.pay-google { color: var(--text); }
.pay-paypal { color: #003087; border-color: #003087; }

[data-theme="dark"] .pay-visa,
[data-theme="dark"] .pay-mc,
[data-theme="dark"] .pay-amex,
[data-theme="dark"] .pay-discover,
[data-theme="dark"] .pay-bank,
[data-theme="dark"] .pay-paypal {
    color: var(--text);
    border-color: var(--border-soft);
}

.checkout-climate-badge {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
    max-width: 100%;
    overflow: hidden;
}

.checkout-climate-badge iframe {
    max-width: 100%;
}

.footer-bottom {
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-soft);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.25rem;
}

/* Desktop: social → Climate badge → copyright */
.footer-bottom .footer-social {
    order: 1;
    flex: 0 1 auto;
}

.footer-bottom .footer-climate-badge {
    order: 2;
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    min-width: 0;
    margin-top: 0;
}



.footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.social-icon {
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--border);
    border-radius: 50%;
    color: var(--text);
    background: var(--bg-surface);
    text-decoration: none;
    transition: transform 0.15s ease, background 0.15s ease;
}

.social-icon:hover {
    transform: translateY(-2px);
    background: var(--bg-muted);
}

.social-icon svg {
    width: 1.05rem;
    height: 1.05rem;
}

.footer-copy-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
    order: 3;
    flex: 0 0 auto;
    margin-left: auto;
}

.footer-copy {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.footer-cookie-link {
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    font-family: "Ubuntu Regular", sans-serif;
    font-size: 0.78rem;
    color: var(--text-muted);
    text-decoration: underline;
    cursor: pointer;
}

.footer-cookie-link:hover {
    color: var(--text);
}

.footer-bottom .footer-copy-wrap {
    order: 3;
}

@media (max-aspect-ratio: 18/25) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.form-fieldset {
    border: 2px solid var(--border-soft);
    border-radius: 12px;
    padding: 0.75rem 1rem 1rem;
    margin: 0 0 1rem;
    color: var(--text);
    background: transparent;
}

.form-fieldset legend {
    font-family: "Ubuntu Medium";
    padding: 0 0.35rem;
    color: var(--text);
}

.form-hint {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0 0 0.5rem;
}

.checkbox-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.checkbox-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.65rem;
    border: 2px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.85rem;
    background: var(--bg-muted);
    color: var(--text);
}

.checkbox-pill input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    margin: 0;
    accent-color: var(--btn-primary-bg);
    flex-shrink: 0;
    cursor: pointer;
}

.checkbox-pill:has(input:checked) {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border-color: var(--btn-primary-bg);
}

.checkbox-pill:has(input:checked) input[type="checkbox"] {
    accent-color: var(--btn-primary-text);
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.staff-image-dropzone {
    border: 2px dashed var(--border-soft);
    border-radius: 12px;
    padding: 0.75rem;
    background: var(--bg-muted);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.staff-image-dropzone.is-dragover {
    border-color: var(--border);
    background: var(--bg-surface);
}

.staff-image-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    margin-top: 0.75rem;
}

.staff-image-empty {
    margin: 0.5rem 0;
    font-size: 0.9rem;
    color: var(--text-muted);
    text-align: center;
}

.staff-image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.65rem;
}

.staff-image-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 2px solid var(--border-soft);
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-surface);
}

.staff-image-tile.is-new-upload {
    border-color: #4a6741;
}

.staff-image-new-badge {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    background: #4a6741;
    color: #fff;
    font-family: "Ubuntu Medium";
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.staff-image-tile img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
}

.staff-image-grid.hero-slide-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.hero-slide-list .staff-image-tile {
    display: grid;
    grid-template-columns: 9.5rem minmax(0, 1fr);
    grid-template-areas:
        "photo fields"
        "controls fields";
    overflow: visible;
    padding: 0.65rem;
    gap: 0.45rem 0.75rem;
    align-items: start;
}

.hero-slide-list .staff-image-tile img {
    grid-area: photo;
    width: 100%;
    aspect-ratio: 16 / 9;
}

.hero-slide-list .staff-image-controls {
    grid-area: controls;
}

.hero-slide-list .hero-slide-fields {
    grid-area: fields;
    min-width: 0;
}

.hero-slide-list .hero-slide-fields .form-field {
    margin-bottom: 0.45rem;
}

.hero-slide-list .staff-image-new-badge {
    left: 0.85rem;
    right: auto;
    top: 2.2rem;
}

.staff-image-index {
    position: absolute;
    top: 0.35rem;
    left: 0.35rem;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.25rem;
    border-radius: 999px;
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    font-family: "Ubuntu Bold";
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.staff-image-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.2rem;
    padding: 0.3rem;
    background: var(--bg-muted);
}

.btn-img-control {
    border: 1px solid var(--border-soft);
    background: var(--bg-surface);
    color: var(--text);
    border-radius: 6px;
    font-size: 0.75rem;
    font-family: "Ubuntu Medium";
    padding: 0.25rem 0.2rem;
    cursor: pointer;
    line-height: 1.2;
}

.btn-img-control:hover {
    border-color: var(--border);
}

.btn-img-control.img-remove {
    grid-column: 1 / -1;
    color: var(--danger);
    border-color: var(--danger);
}

.staff-product-row {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid #ddd;
}

.staff-product-row:last-child {
    border-bottom: none;
}

.staff-product-thumb {
    width: 72px;
    height: 72px;
    border-radius: 10px;
    overflow: hidden;
    background: #eee;
}

.staff-product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.staff-product-meta h3 {
    margin: 0 0 0.25rem;
    font-family: "Britannic Bold";
    font-size: 1rem;
}

.staff-product-meta p {
    margin: 0.15rem 0;
    font-size: 0.85rem;
}

.staff-product-actions {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.btn-danger {
    background: #8b1e1e;
    color: white;
    border-color: #8b1e1e;
}

.season-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.chip {
    font-size: 0.7rem;
    text-transform: uppercase;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    border: 1px solid #ccc;
}

.chip.on {
    background: #e8f5e9;
    border-color: #4a6741;
    color: #2e4a2a;
}

.chip.off {
    background: #f5f5f5;
    color: #999;
}

.login-form {
    text-align: left;
    margin: 1.25rem 0;
}

.login-form .btn {
    width: 100%;
    margin-top: 0.5rem;
}

.auth-note {
    font-size: 0.85rem;
    color: #555;
}

.auth-note code {
    font-size: 0.8rem;
}

@media (max-aspect-ratio: 11/10) {
    .staff-product-layout {
        grid-template-columns: 1fr;
    }

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

    .staff-product-row {
        grid-template-columns: 64px 1fr;
    }

    .staff-product-actions {
        grid-column: 1 / -1;
        flex-direction: row;
    }
}

.pay-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
}

.pay-table th,
.pay-table td {
    border: 1px solid #ccc;
    padding: 0.6rem;
    text-align: left;
}

/* Auth */
.auth-card {
    max-width: 420px;
    margin: 2rem auto;
    padding: 2rem;
    border: 2px solid var(--border);
    border-radius: 18px;
    background: var(--bg-surface);
    color: var(--text);
    text-align: center;
    box-sizing: border-box;
    overflow: hidden;
}

.profile-layout .auth-card {
    margin: 0;
    max-width: none;
    overflow: visible;
}

.auth-card .login-form {
    text-align: left;
    width: 100%;
    box-sizing: border-box;
}

.auth-card .login-form .btn {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.15rem 0;
    color: var(--text-muted, #666);
    font-size: 0.85rem;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border-soft);
}

.auth-card .btn,
.auth-card a.btn {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.auth-card .btn-google {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: inline-flex;
    justify-content: center;
    white-space: normal;
}

.profile-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    margin-bottom: 1rem;
}

/* Toasts (bottom-right, auto-fade) */
/* Cookie consent banner */
.cookie-consent {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4000;
    padding: 0.85rem 1rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
    pointer-events: none;
}

.cookie-consent[hidden] {
    display: none !important;
}

.cookie-consent-panel {
    pointer-events: auto;
    max-width: 920px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.85rem 1.25rem;
    padding: 1rem 1.15rem;
    border: 2px solid var(--border);
    border-radius: 16px;
    background: var(--bg-surface);
    color: var(--text);
    box-shadow: 0 -4px 28px rgba(0, 0, 0, 0.14);
}

.cookie-consent-copy {
    flex: 1 1 16rem;
    min-width: 0;
}

.cookie-consent-title {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
    font-family: "Ubuntu Medium", sans-serif;
}

.cookie-consent-text {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--text-muted, #555);
}

.cookie-consent-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    flex: 0 0 auto;
}

.cookie-consent-btn {
    white-space: nowrap;
}

@media (max-width: 600px) {
    .cookie-consent {
        padding: 0.45rem 0.55rem calc(0.45rem + env(safe-area-inset-bottom, 0px));
    }

    .cookie-consent-panel {
        flex-direction: column;
        align-items: stretch;
        gap: 0.45rem;
        padding: 0.7rem 0.8rem 0.65rem;
        border-radius: 14px;
    }

    .cookie-consent-copy {
        flex: 0 0 auto;
    }

    .cookie-consent-title {
        margin: 0 0 0.15rem;
        font-size: 0.95rem;
    }

    .cookie-consent-text {
        font-size: 0.8rem;
        line-height: 1.35;
    }

    .cookie-consent-actions {
        width: 100%;
        margin-top: 0;
        gap: 0.4rem;
    }

    .cookie-consent-actions .btn {
        flex: 1 1 auto;
        text-align: center;
        justify-content: center;
        padding: 0.48rem 0.65rem;
        font-size: 0.84rem;
    }
}

.toast-container {
    position: fixed;
    bottom: 5rem;
    right: 1rem;
    z-index: 2500;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
    max-width: min(320px, calc(100vw - 2rem));
}

.toast {
    padding: 0.75rem 1rem;
    border-radius: 10px;
    border: 2px solid var(--border);
    background: var(--bg-surface);
    color: var(--text);
    font-family: "Ubuntu Medium";
    font-size: 0.9rem;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    box-shadow: 0 4px 12px var(--shadow);
}

.toast-visible {
    opacity: 1;
    transform: translateY(0);
}

.toast-fade {
    opacity: 0;
    transform: translateY(4px);
}

.toast-success { background: #e8f5e9; color: #111; }
.toast-warning { background: #fff8e1; color: #111; }
.toast-danger { background: #ffebee; color: #111; }
.toast-info { background: #e3f2fd; color: #111; }

[data-theme="dark"] .toast-success { background: #1e3a24; color: #e8f5e9; }
[data-theme="dark"] .toast-warning { background: #3a3218; color: #fff8e1; }
[data-theme="dark"] .toast-danger { background: #3a1c1c; color: #ffebee; }
[data-theme="dark"] .toast-info { background: #1a2a3a; color: #e3f2fd; }

[data-theme="dark"] .qty-btn {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
}

[data-theme="dark"] .hamburger span {
    background: var(--text);
}

[data-theme="dark"] .nav-overlay {
    background: var(--overlay);
}

[data-theme="dark"] .split-card,
[data-theme="dark"] .lab-card,
[data-theme="dark"] .gift-options,
[data-theme="dark"] .empty-state,
[data-theme="dark"] .success-card {
    background: var(--bg-surface);
    color: var(--text);
    border-color: var(--border);
}

/* Legacy flash container — hidden; main.js forwards to toasts */
.flash-messages {
    display: none;
}

/* Hamburger (mobile) */
.hamburger {
    display: none;
}

.nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 900;
}

.nav-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.cart-link {
    position: relative;
}

.bottom-cart-count {
    position: absolute;
    top: -4px;
    right: 8px;
    background: #C8D6E8;
    color: #111;
    font-size: 0.65rem;
    font-family: "Ubuntu Bold";
    border-radius: 999px;
    padding: 0.1rem 0.35rem;
}

.bottom-nav-icon {
    width: 22px;
    height: 22px;
}

.empty-state {
    padding: 2rem;
    text-align: center;
    border: 2px dashed #999;
    border-radius: 14px;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    grid-column: 1 / -1;
    display: block;
}

.page-main > .empty-state,
.cart-page > .empty-state,
.shop-results > .empty-state,
.content-page > .empty-state,
.catalog-grid > .empty-state,
.product-grid > .empty-state {
    width: 100%;
}

.success-card {
    text-align: center;
    padding: 3rem 1rem;
    border: 2px solid #111;
    border-radius: 18px;
    background: #f7f3ee;
}

/* —— Mobile product tiles: Amazon-style single-column list (all view modes) —— */
@media (max-aspect-ratio: 18/25) {
    .results-toolbar .view-switcher {
        display: none !important;
    }

    .catalog-grid.product-grid,
    .product-grid.product-grid-shop:not(.product-scroll-track):not(.home-product-grid),
    .catalog-view-list.product-grid,
    .catalog-view-small.product-grid,
    .catalog-view-medium.product-grid:not(.product-scroll-track):not(.home-product-grid),
    .catalog-view-large.product-grid:not(.product-scroll-track):not(.home-product-grid) {
        grid-template-columns: 1fr !important;
        gap: 0.85rem !important;
        width: 100% !important;
        max-width: none !important;
        margin-left: 0;
        margin-right: 0;
    }

    .shop-results,
    .shop-layout {
        width: 100%;
        max-width: none;
    }

    /* Full-bleed product tiles on shop/list (edge-to-edge within page padding).
       Home rails override these with vertical carousel tiles. */
    .shop-results .product-card,
    .shop-layout .product-card,
    .catalog-grid .product-card,
    .wishlist-page .product-card,
    main.page-main.shop-page .product-card {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        gap: 0.85rem;
        width: 100%;
        max-width: none;
        box-sizing: border-box;
        padding: 0.75rem;
        overflow: hidden;
        border-radius: 14px;
        min-width: 0;
    }

    .shop-results .product-card-media-col,
    .shop-layout .product-card-media-col,
    .catalog-grid .product-card-media-col,
    .wishlist-page .product-card-media-col,
    main.page-main.shop-page .product-card-media-col {
        flex: 0 0 42%;
        width: 42%;
        max-width: 11rem;
        min-width: 8.25rem;
        position: relative;
        align-self: stretch;
    }

    .shop-results .product-card-media,
    .shop-layout .product-card-media,
    .catalog-grid .product-card-media,
    .wishlist-page .product-card-media,
    main.page-main.shop-page .product-card-media {
        aspect-ratio: 2 / 3;
        width: 100%;
        height: 100%;
        min-height: 11.5rem;
        margin: 0;
        border-radius: 12px;
    }

    /* No second-image hover fade on mobile tiles */
    .product-card .product-img-alt {
        display: none !important;
    }

    .product-card:hover .product-img-primary,
    .product-card:focus-within .product-img-primary,
    .product-card:hover .product-img-alt,
    .product-card:focus-within .product-img-alt {
        opacity: 1 !important;
    }

    .product-card-media img {
        transition: none;
    }

    .product-card-media-col .purchase-chip-corner {
        top: 0.4rem;
        left: 0.4rem;
        max-width: calc(100% - 0.55rem);
        font-size: 0.72rem;
        padding: 0.28rem 0.5rem;
        white-space: nowrap;
        line-height: 1.2;
    }

    .product-card-media-col .wishlist-btn {
        top: auto;
        right: auto;
        left: 0.35rem;
        bottom: 0.35rem;
        width: 1.95rem;
        height: 1.95rem;
    }

    .product-card-body {
        flex: 1 1 auto;
        min-width: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
        padding: 0.1rem 0.15rem 0 0;
        overflow: hidden;
    }

    .product-card-link {
        flex: 1 1 auto;
        min-width: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    .product-card-link .product-tag {
        font-size: 0.72rem;
        margin: 0;
    }

    .product-card-link h3 {
        margin: 0;
        font-size: 1.05rem;
        line-height: 1.28;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Mobile Amazon stack: 1-line description → stars → price → cart */
    .product-card-link {
        display: flex;
        flex-direction: column;
    }

    .product-card-link .product-tag {
        order: 0;
    }

    .product-card-link h3 {
        order: 1;
    }

    .product-card-link .product-card-desc {
        order: 2;
        margin: 0;
        font-size: 0.84rem;
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
        -webkit-line-clamp: unset;
    }

    .product-card-link .product-card-rating {
        order: 3;
        margin: 0.05rem 0 0;
        gap: 0.08rem 0.3rem;
    }

    .product-card-link .season-countdown {
        order: 4;
    }

    .product-card-link .product-card-rating .star {
        font-size: 0.95rem;
    }

    .product-card-rating-count {
        font-size: 0.72rem;
    }

    .product-card-link .season-countdown {
        margin: 0;
        font-size: 0.72rem;
    }

    .product-card-footer {
        margin-top: auto;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0.4rem;
        padding: 0.2rem 0 0;
        min-width: 0;
        width: 100%;
        box-sizing: border-box;
    }

    .product-card-footer .price {
        margin: 0;
        text-align: left;
        font-size: 1.1rem;
        font-family: "Ubuntu Medium", sans-serif;
        flex: 0 0 auto;
        white-space: nowrap;
        width: 100%;
    }

    .product-card-action {
        flex: 0 0 auto;
        min-width: 0;
        max-width: none;
        width: 100%;
        justify-content: stretch;
    }

    .product-card-action .btn {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 0.5rem 0.65rem;
        font-size: 0.85rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .product-card-action .qty-stepper-wrap {
        width: 100%;
        max-width: 100%;
        justify-content: space-between;
    }

    .product-card .made-to-order-note {
        display: none !important;
    }

    .nav-bar {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        right: -80%;
        left: auto;
        /* Full viewport height — slides under bottom nav (z-index lower) */
        width: min(80%, 20rem);
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        max-height: none;
        background: #111;
        transition: right 0.3s ease;
        z-index: 1000; /* bottom-nav is 1002 so drawer goes behind it */
        justify-content: flex-start;
        align-items: stretch;
        padding-top: 4rem;
        /* Space so last items clear the bottom nav when scrolling */
        padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
        overflow-x: hidden;
        overflow-y: auto;
        box-sizing: border-box;
        text-align: left;
        transform: none;
    }

    .nav-bar.mobile-open {
        right: 0;
    }

    .nav-bar-inner.nav-bar-desktop {
        position: static;
        left: auto;
        top: auto;
        transform: none;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
        flex: 0 0 auto;
        text-align: left;
    }

    .nav-bar-mobile-extra {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        flex: 1 1 auto;
        min-height: 0;
        width: 100%;
    }

    .nav-bar a {
        color: white;
        font-size: 1.05rem;
        padding: 0.55rem 1.25rem;
        width: 100%;
        box-sizing: border-box;
        justify-content: flex-start;
    }

    .nav-bar .nav-mobile-only {
        display: inline-flex;
    }

    .nav-bar .nav-logout-link {
        margin-top: 0.5rem;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
        padding-top: 1rem !important;
        color: #f0c0c0 !important;
    }

    /* Appearance control: full width of drawer, not off to the side */
    .nav-bar .nav-mobile-theme {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        align-self: stretch;
        gap: 0.45rem;
        margin-top: auto;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 0;
        padding: 1rem 1.25rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid rgba(255, 255, 255, 0.15);
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        flex-shrink: 0;
        background: #111;
    }

    .nav-bar .nav-mobile-theme .profile-theme-label {
        color: rgba(255, 255, 255, 0.75);
        font-size: 0.8rem;
        width: 100%;
    }

    .nav-bar .nav-mobile-theme .theme-toggle {
        background: rgba(255, 255, 255, 0.08);
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.35rem;
        box-sizing: border-box;
    }

    .nav-bar .nav-mobile-theme .theme-btn {
        color: #fff;
        flex: 1;
        width: 100%;
        min-width: 0;
    }

    .nav-bar .nav-mobile-theme .theme-btn.is-active {
        background: rgba(255, 255, 255, 0.2);
        color: #fff;
    }

    .hamburger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 36px;
        height: 36px;
        position: absolute;
        right: 1rem;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        cursor: pointer;
        z-index: 1001;
    }

    .hamburger span {
        position: absolute;
        width: 100%;
        height: 4px;
        background: #111;
        border-radius: 3px;
        transition: all 0.3s ease;
        left: 0;
    }

    .hamburger span:nth-child(1) { top: 6px; }
    .hamburger span:nth-child(2) { top: 16px; }
    .hamburger span:nth-child(3) { top: 26px; }

    .hamburger.active span {
        background: white;
    }

    .hamburger.active span:nth-child(1) {
        transform: translateY(10px) rotate(45deg);
    }

    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active span:nth-child(3) {
        transform: translateY(-10px) rotate(-45deg);
    }

    .header {
        position: sticky;
        top: 0;
        z-index: 50;
    }

    .header-top {
        position: relative;
        /* Fade to fully transparent at the bottom */
        background: linear-gradient(
            to bottom,
            #b8cce4 0%,
            rgba(200, 214, 232, 0.85) 45%,
            rgba(200, 214, 232, 0) 100%
        );
        flex-wrap: wrap;
        padding: 0.5rem 3.5rem 0.75rem 0.75rem;
        gap: 0.5rem;
    }

    [data-theme="dark"] .header-top {
        background: linear-gradient(
            to bottom,
            #1a2838 0%,
            rgba(32, 48, 68, 0.92) 40%,
            rgba(18, 20, 24, 0) 100%
        );
    }

    .search-icon {
        filter: none;
    }

    [data-theme="dark"] .search-icon {
        filter: brightness(0) invert(1);
    }

    .logo-image {
        width: 48px;
        height: 48px;
    }

    .brand-name {
        display: none;
    }

    .bottom-nav {
        display: flex;
    }

    .home-searchbar-wrapper {
        flex: 1 1 100%;
        order: 3;
        max-width: none;
    }

    .home-searchbar {
        height: 2.5rem;
        font-size: 1rem;
        padding-left: 2.5rem;
    }

    .search-icon {
        height: 1.1rem;
        width: 1.1rem;
        left: 0.85rem;
    }

    .icon-wrapper {
        display: none;
    }

    content {
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    }

    .bottom-nav-fill {
        display: block;
    }

    hero {
        padding: 0.5rem 0.75rem 0;
    }

    .hero-slider {
        /* Slightly taller on mobile so hero text has breathing room */
        height: clamp(200px, 42vh, 340px);
    }

    .shop-layout {
        grid-template-columns: 1fr;
    }

    .lab-detail {
        grid-template-columns: 1fr;
    }

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

    .product-gallery {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
    }

    .gallery-thumbs-scroll {
        order: 2;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .gallery-thumbs {
        flex-direction: row;
        width: max-content;
        min-width: 100%;
    }

    .gallery-thumb {
        width: 56px;
        height: 56px;
    }

    .gallery-dots {
        display: flex;
    }

    .toast-container {
        bottom: 4.5rem;
    }
}

@media (min-aspect-ratio: 18/25) {
    .toast-container {
        bottom: 1.25rem;
    }
}
/* ===== Feature pack: categories, seasons, heros, mobile, inventory ===== */

.category-card {
    align-items: center;
    text-align: center;
    min-height: 0;
    padding: 1rem 0.75rem;
    gap: 0.45rem;
}

.category-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto;
}

.category-card-icon img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    display: block;
}

.category-card-title {
    display: block;
}

.category-icon-preview {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 10px;
    border: 1px solid var(--border-soft);
    background: var(--bg-muted);
}

.staff-category-row {
    align-items: center;
    gap: 0.75rem;
}

.staff-list-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--border-soft);
}

.staff-list-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.staff-list-meta h3 {
    margin: 0 0 0.2rem;
}

.staff-list-meta p {
    margin: 0.15rem 0;
}

.staff-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.is-low-stock {
    border-left: 3px solid #c45a5a;
    padding-left: 0.65rem;
}

/* Hero carousel */
.home-hero-media .home-hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.55s ease;
    pointer-events: none;
}

.home-hero-media .home-hero-image.is-active {
    opacity: 1;
    pointer-events: auto;
    position: absolute;
}

.home-hero-media {
    position: relative;
}

/* Arrows removed — progress dots only */
.hero-nav {
    display: none !important;
}

.hero-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.65rem;
    z-index: 3;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.45rem;
}

.hero-dot {
    position: relative;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    border: none;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    padding: 0;
    overflow: hidden;
    flex-shrink: 0;
    transition: width 0.35s ease, background 0.25s ease;
}

.hero-dot.is-active {
    width: 2rem;
    background: rgba(255, 255, 255, 0.35);
}

.hero-dot-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0%;
    border-radius: inherit;
    background: #fff;
    pointer-events: none;
}

/* CSS-driven fill timer (more reliable on mobile than rAF) */
.hero-dot-fill.is-running {
    animation: hero-dot-fill-anim 6s linear forwards;
}

@keyframes hero-dot-fill-anim {
    from { width: 0%; }
    to { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-dot-fill.is-running {
        animation: none;
        width: 100%;
    }
}

.footer-climate-badge {
    margin-top: 0;
    max-width: 100%;
    overflow: hidden;
}

.footer-climate-badge iframe {
    max-width: 100%;
    display: block;
}

.stripe-card-element {
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    background: var(--bg-surface);
    min-height: 2.75rem;
}

.card-element-wrap {
    margin-top: 0.85rem;
}

#card-element-error.is-error,
#card-element-error:not([hidden]) {
    color: #b42318;
    margin-top: 0.4rem;
}

.lab-page .lab-hero.home-hero {
    margin-bottom: 1.5rem;
    max-width: none;
    padding: 0;
}

.lab-page .lab-hero-media {
    min-height: clamp(180px, 32vh, 300px);
}

/* Out of season / made-to-order */
.product-card.is-out-of-season {
    opacity: 1;
    position: relative;
}

.product-card-season-banner {
    position: absolute;
    top: 0.65rem;
    left: 0.65rem;
    z-index: 2;
    max-width: calc(100% - 3.5rem);
    padding: 0.28rem 0.55rem;
    font-family: "Ubuntu Medium";
    font-size: 0.68rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(40, 40, 40, 0.88);
    border-radius: 999px;
    line-height: 1.2;
}

.season-badge-oos {
    background: #2b2b2b;
    color: #fff;
    border-color: #2b2b2b;
}

.made-to-order-note {
    margin: 0.15rem 0 0;
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.35;
}

.made-to-order-banner {
    margin: 0.5rem 0 0.85rem;
    padding: 0.75rem 0.9rem;
    border-radius: 12px;
    border: 2px solid var(--border);
    background: var(--bg-muted);
}

.made-to-order-banner p {
    margin: 0.25rem 0 0;
    font-size: 0.92rem;
    line-height: 1.45;
}

.season-countdown {
    margin: 0.35rem 0 0;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.season-countdown-detail {
    margin: 0.5rem 0 0.75rem;
    padding: 0.55rem 0.75rem;
    border-radius: 10px;
    background: var(--bg-muted);
    border: 1px solid var(--border-soft);
}

.season-countdown-label {
    display: block;
    font-family: "Ubuntu Medium";
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.15rem;
}

/* Profile avatar */
.profile-avatar-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.profile-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border);
}

.profile-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-muted);
    font-family: "Britannic Bold";
    font-size: 2rem;
    color: var(--text-muted);
}

.profile-avatar-form {
    width: 100%;
    max-width: 360px;
}

/* Policy accordion animation polish */
.policy-panel-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.34s ease;
}

.policy-panel-content.is-expanded,
.policy-panel[open] > .policy-panel-content {
    grid-template-rows: 1fr;
}

.policy-panel-inner {
    overflow: hidden;
    min-height: 0;
    opacity: 0;
    transform: translateY(-0.25rem);
    transition: opacity 0.28s ease 0.04s, transform 0.28s ease 0.04s;
}

.policy-panel[open] > .policy-panel-content > .policy-panel-inner,
.policy-panel-content.is-expanded > .policy-panel-inner {
    opacity: 1;
    transform: translateY(0);
}

/* Mobile bottom nav: Shop as primary half-circle button */
menubar {
    display: contents;
}

.bottom-nav {
    /* Compact bar — visualViewport JS pins it to the real visible bottom */
    --bottom-nav-height: 64px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: var(--bottom-nav-height);
    padding: 0 0.35rem;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-sizing: content-box;
    background: #111;
    overflow: visible;
}

/* Fills any gap between the nav and the browser chrome (does not raise the icons) */
.bottom-nav-fill {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0;
    background: #111;
    z-index: 1001;
    pointer-events: none;
}

.bottom-nav-avatar {
    width: 26px !important;
    height: 26px !important;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid rgba(255, 255, 255, 0.65);
}

.bottom-nav-lab-icon {
    object-fit: contain;
    filter: none;
}

.bottom-nav-item {
    position: relative;
    flex: 1;
    min-width: 0;
    color: #fff;
    text-decoration: none;
    font-size: 0.72rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    padding: 0.25rem 0.15rem;
}

.bottom-nav-primary {
    flex: 0 0 auto;
    margin-top: -1.75rem;
    z-index: 2;
}

.bottom-nav-primary-inner {
    width: 4.85rem;
    height: 4.85rem;
    border-radius: 50%;
    background: #C8D6E8;
    color: #111;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.12rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    border: 3px solid #111;
}

.bottom-nav-primary .label {
    color: #111;
    font-family: "Ubuntu Bold";
    font-size: 0.78rem;
    letter-spacing: 0.02em;
}

.bottom-nav-primary-icon {
    width: 26px;
    height: 26px;
    filter: none;
}

.bottom-nav-emoji {
    font-size: 1.25rem;
    line-height: 1;
}

.bottom-cart-count {
    right: 50%;
    transform: translateX(1.1rem);
    top: 0.1rem;
}

/* Filter chips (desktop sidebar still uses labels; chips work both places) */
.filter-chip-group {
    margin-bottom: 0.85rem;
    min-width: 0;
    max-width: 100%;
}

.filter-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    border: 1.5px solid var(--border);
    background: var(--bg-muted);
    color: var(--text);
    text-decoration: none;
    font-size: 0.85rem;
    white-space: normal;
    line-height: 1.2;
    max-width: 100%;
    box-sizing: border-box;
    word-break: break-word;
}

.filter-chip:hover {
    background: var(--bg-surface);
}

.filter-chip.is-active {
    background: #111;
    border-color: #111;
    color: #fff;
    font-family: "Ubuntu Medium";
}

.filter-chip-clear {
    border-style: dashed;
}

.shop-filters-toggle {
    display: none;
}

.shop-filters-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
}

.shop-filters-head h2 {
    margin: 0;
}

/* Desktop: filters body always visible */
.shop-filters-body {
    display: block;
}

/* Mobile layout fixes */
@media (max-aspect-ratio: 18/25) {
    /*
      Home product rails: keep horizontal carousel + dots (do not stack).
      Shop/list still uses Amazon-style rows elsewhere.
    */
    .product-scroll {
        display: flex;
        flex-direction: column;
        width: 100%;
        min-width: 0;
        padding-left: 0.85rem;
        padding-right: 0.85rem;
        box-sizing: border-box;
    }

    .product-scroll-btn,
    .product-scroll-end {
        display: none !important;
    }

    .product-scroll-dots {
        display: flex !important;
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.4rem;
        padding: 0.45rem 0 0.15rem;
    }

    .product-scroll-track {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        grid-template-columns: none !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory;
        gap: 0.75rem !important;
        padding: 0.4rem 0.15rem 0.5rem;
        width: 100%;
        -webkit-overflow-scrolling: touch;
    }

    .product-scroll-rubber {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        min-width: min-content;
        width: auto;
        gap: 0.75rem;
    }

    /* Vertical product tiles in rails (not Amazon list rows) */
    .product-scroll-track > .product-card,
    .product-scroll-track > .lab-card-item,
    .product-scroll-track > article,
    .product-scroll-rubber > .product-card,
    .product-scroll-rubber > .lab-card-item,
    .product-scroll-rubber > article {
        flex: 0 0 min(72vw, 15.5rem) !important;
        width: min(72vw, 15.5rem) !important;
        max-width: 15.5rem !important;
        min-width: 12.5rem !important;
        scroll-snap-align: start;
        scroll-snap-stop: always;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
    }

    .product-scroll .product-card-media-col {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        align-self: stretch;
        order: 0;
    }

    .product-scroll .product-card-media {
        aspect-ratio: 5 / 4 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        border-top-left-radius: var(--radius-card, 16px);
        border-top-right-radius: var(--radius-card, 16px);
    }

    .product-scroll .product-card-media img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        opacity: 1 !important;
    }

    .product-scroll .product-card-body {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: 100% !important;
        padding: 0.7rem 0.75rem 0.85rem !important;
        gap: 0.35rem !important;
        overflow: visible !important;
        order: 1;
    }

    .product-scroll .product-card-link {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.2rem !important;
        min-width: 0;
        width: 100%;
    }

    .product-scroll .product-card-link h3,
    .product-scroll .product-card-link .product-tag,
    .product-scroll .product-card-link .product-card-desc,
    .product-scroll .product-card-link .product-card-rating,
    .product-scroll .product-card-footer,
    .product-scroll .product-card-footer .price {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: var(--text);
        order: unset !important;
        white-space: normal !important;
    }

    .product-scroll .product-card-link h3 {
        font-size: 0.98rem !important;
        line-height: 1.25 !important;
        margin: 0 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .product-scroll .product-card-link .product-card-desc {
        font-size: 0.8rem !important;
        line-height: 1.3 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal !important;
    }

    /* Compact CTA under price — short pill, not a full-width bar */
    .product-scroll .product-card-footer {
        margin-top: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 0.3rem !important;
        padding-top: 0.3rem !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .product-scroll .product-card-footer .price {
        width: auto !important;
        flex: 0 0 auto !important;
        font-size: 0.95rem !important;
        margin: 0 !important;
        text-align: left !important;
    }

    .product-scroll .product-card-action {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        justify-content: flex-start !important;
        align-self: flex-start !important;
        box-sizing: border-box !important;
    }

    .product-scroll .product-card-action .btn {
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0.35rem 0.7rem !important;
        font-size: 0.74rem !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    .product-scroll .product-card-action .qty-stepper-wrap {
        width: auto !important;
        max-width: 100% !important;
        justify-content: flex-start !important;
        gap: 0.25rem !important;
        box-sizing: border-box !important;
    }

    .product-scroll .product-card-media-col .wishlist-btn {
        top: 0.4rem;
        right: 0.4rem;
        left: auto;
        bottom: auto;
    }

    /* Larger drag target for scrubbing — still only as wide as the dots row */
    .product-scroll-dots {
        touch-action: none;
        cursor: grab;
        user-select: none;
        -webkit-user-select: none;
        padding: 0.55rem 1rem 0.35rem !important;
        min-height: 1.75rem;
        gap: 0.5rem !important;
        width: fit-content !important;
        margin-left: auto;
        margin-right: auto;
    }
    .product-scroll-dots:active {
        cursor: grabbing;
    }
    .product-scroll-dot {
        width: 0.5rem;
        height: 0.5rem;
        pointer-events: none; /* drag is on the track; dots are visual */
    }
    .product-scroll-dot.is-active {
        width: 1.15rem;
    }

    .section-link-desktop-hide {
        display: inline;
    }

    .page-main,
    .home-hero {
        padding-left: 0.85rem;
        padding-right: 0.85rem;
        box-sizing: border-box;
        max-width: none;
        width: 100%;
    }

    .page-main {
        padding-top: 0.85rem;
        padding-bottom: 1.25rem;
    }

    .page-main.shop-page,
    .page-main.product-detail-page {
        max-width: none;
    }

    .home-main {
        padding-left: 0;
        padding-right: 0;
    }

    .home-main .section-heading,
    .home-main .home-lab-intro,
    .home-main .home-content-split,
    .home-main .home-categories > .section-heading {
        padding-left: 0.85rem;
        padding-right: 0.85rem;
        box-sizing: border-box;
    }

    .home-links,
    .category-grid,
    .shop-hero,
    .shop-results,
    .shop-layout,
    .cart-page h1,
    .checkout-page h1 {
        padding-left: 0;
        padding-right: 0;
        width: 100%;
        max-width: none;
        box-sizing: border-box;
    }

    .header-top {
        padding: 0.5rem 3.25rem 0.65rem 0.85rem;
        gap: 0.45rem;
    }

    .home-searchbar-wrapper {
        flex: 1 1 auto;
        order: 0;
        max-width: none;
        min-width: 0;
        width: auto;
        margin-right: 0.25rem;
    }

    .home-searchbar {
        height: 2.35rem;
        font-size: 0.9rem;
        padding-left: 2.35rem;
        width: 100%;
        min-width: 0;
    }

    .search-icon {
        left: 0.7rem;
        height: 1rem;
        width: 1rem;
    }

    .logo-image {
        width: 42px;
        height: 42px;
        flex-shrink: 0;
    }

    /* Slightly taller hero + more text breathing room */
    .home-hero {
        padding: 0.5rem 1rem 0;
        max-width: none;
    }

    .home-hero-media {
        height: clamp(200px, 36vh, 340px);
        border-radius: 14px;
    }

    .lab-page .lab-hero-media {
        min-height: 0;
        height: clamp(200px, 34vh, 280px);
    }

    /* Copy is inside .home-hero-media — bottom/top are relative to the image only */
    .home-hero-copy {
        left: 1rem;
        right: 0.85rem;
        top: 1.2rem; /* title a bit below the top edge */
        bottom: 1.85rem; /* ends above the carousel dots */
        transform: none;
        max-width: none;
        text-align: left;
        padding: 0;
        box-sizing: border-box;
        background: none;
        border-radius: 0;
        text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 0.35rem;
        pointer-events: none;
        z-index: 2;
    }

    .home-hero-copy > * {
        pointer-events: auto;
    }

    .home-hero-copy .promo-eyebrow {
        font-size: 0.72rem;
        margin: 0;
    }

    .home-hero-copy .promo-copy {
        /* Phone portrait: hide description (title + buttons remain) */
        display: none !important;
    }

    .home-hero-copy h1 {
        font-size: clamp(1.1rem, 5vw, 1.4rem);
        line-height: 1.2;
        margin: 0.15rem 0 0;
    }

    .home-hero-actions {
        gap: 0.4rem;
        flex-wrap: wrap;
        /* Sit at the bottom of the copy box = just above the dots */
        margin-top: auto;
        margin-bottom: 0;
    }

    .home-hero-actions .btn {
        font-size: 0.78rem;
        padding: 0.38rem 0.7rem;
    }

    .hero-dots {
        bottom: 0.45rem;
        z-index: 3;
    }

    /* Tighter vertical rhythm between headers / sections */
    .section-heading {
        margin-bottom: 0.55rem;
    }

    .section-heading h2 {
        margin: 0;
        font-size: 1.15rem;
    }

    .home-categories,
    .home-favorites,
    .product-row {
        margin-bottom: 1.1rem;
    }

    /* Slide category tiles right a bit so the first card’s left stroke fully shows */
    .category-grid-scroll {
        padding-left: 1.1rem;
        padding-right: 1.1rem;
        scroll-padding-inline: 1.1rem;
    }

    /* Arrows sit over the row (not in the flow); keep them clear of the first stroke */
    .category-scroll-prev {
        left: 0;
    }
    .category-scroll-next {
        right: 0;
    }

    .home-main {
        padding-top: 0.65rem;
        padding-left: 1rem;
        padding-right: 1rem;
        box-sizing: border-box;
    }

    .shop-hero {
        margin-bottom: 0.65rem;
    }

    .shop-hero h1 {
        margin: 0 0 0.25rem;
    }

    .shop-hero p {
        margin: 0;
        font-size: 0.9rem;
    }

    .page-main h1 {
        margin-top: 0;
        margin-bottom: 0.55rem;
    }

    /* Product grids: medium 2-wide, large 1-wide, small 3-wide (shop + home) */
    .catalog-view-medium.product-grid,
    .catalog-view-medium.content-card-grid,
    .product-grid-shop.catalog-view-medium,
    .home-product-grid,
    .home-favorites .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.75rem !important;
    }

    .catalog-view-large,
    .product-grid-shop.catalog-view-large {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    .catalog-view-small,
    .product-grid-shop.catalog-view-small {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 0.5rem !important;
    }

    .catalog-view-small .product-card-action .btn {
        font-size: 0.62rem;
        padding: 0.3rem 0.25rem;
    }

    /* Compact filter chips + collapsible panel */
    .shop-layout {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }

    .shop-filters {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 0.65rem 0.75rem;
        position: sticky;
        top: 0;
        z-index: 5;
        overflow: hidden;
    }

    .shop-filters-toggle {
        display: inline-flex;
    }

    .shop-filters-body {
        display: none;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .shop-filters.is-open .shop-filters-body {
        display: block;
        margin-top: 0.5rem;
    }

    /* Chips wrap inside the filter box — no horizontal overflow */
    .filter-chip-row {
        flex-wrap: wrap;
        overflow: visible;
        gap: 0.35rem;
        max-width: 100%;
        min-width: 0;
    }

    .filter-chip {
        flex: 0 1 auto;
        font-size: 0.78rem;
        padding: 0.4rem 0.7rem;
        max-width: 100%;
        white-space: normal;
    }

    .filter-label {
        margin: 0.45rem 0 0.3rem;
        font-size: 0.72rem;
    }

    .filter-chip-group {
        margin-bottom: 0.55rem;
        max-width: 100%;
    }

    /* Cart: subtotal above products, full width */
    .cart-layout,
    .cart-layout-simple,
    .cart-layout-stacked {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        gap: 0.85rem;
    }

    .cart-summary-top,
    .cart-layout-simple .cart-summary,
    .cart-layout .cart-summary {
        order: 0;
        position: static !important;
        margin-top: 0;
        width: 100%;
        max-width: none;
        box-sizing: border-box;
    }

    .cart-layout-simple .cart-main-col,
    .cart-layout .cart-items {
        order: 1;
        width: 100%;
    }

    .gift-options,
    .gift-options-box {
        padding: 1rem 1.1rem 1.15rem !important;
    }

    .gift-checkbox {
        align-items: center;
        text-align: left;
    }

    .gift-checkbox-label {
        text-align: left;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-bottom .footer-social,
    .footer-bottom .footer-climate-badge,
    .footer-bottom .footer-copy-wrap {
        order: unset;
        flex: none;
        margin-left: 0;
        width: 100%;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .footer-climate-badge {
        overflow: visible;
    }

    .footer-climate-badge iframe,
    .checkout-climate-badge iframe {
        width: min(380px, 100%);
        height: 96px;
    }

    .content-filters-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .content-filters {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.55rem;
        width: 100%;
    }

    .content-filters .form-field {
        min-width: 0;
        width: 100%;
    }

    .content-filters .form-field:first-child,
    .content-filters .btn {
        grid-column: 1 / -1;
    }

    .content-page,
    .auth-page,
    .product-detail-page {
        margin-left: 0;
        margin-right: 0;
    }

    content {
        padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
    }

    .category-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .category-card {
        min-height: 0;
        padding: 0.95rem 0.55rem;
    }

    .home-links {
        gap: 0.75rem;
        padding-bottom: 0.5rem;
    }

    .staff-nav {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 0.65rem;
    }

    .staff-nav-tabs.staff-tabs {
        gap: 0.25rem;
    }

    .staff-nav-tabs .staff-tab {
        font-size: 0.82rem;
        padding: 0.4rem 0.65rem;
    }
}

@media (max-width: 480px) {
    .page-main {
        padding-left: 0.9rem;
        padding-right: 0.9rem;
    }

    .home-hero {
        padding-left: 0.9rem;
        padding-right: 0.9rem;
    }

    .content-filters {
        grid-template-columns: 1fr;
    }

    .bottom-nav-primary {
        margin-top: -1.9rem;
    }

    .bottom-nav-primary-inner {
        width: 5.1rem;
        height: 5.1rem;
    }

    .bottom-nav-primary .label {
        font-size: 0.82rem;
    }

    .bottom-nav-primary-icon {
        width: 28px;
        height: 28px;
    }

    .home-hero-media,
    .lab-page .lab-hero-media {
        height: clamp(140px, 24vh, 180px);
    }
}

/* Cart shipping estimate */
.cart-shipping-block {
    margin: 0.85rem 0 1rem;
    padding: 0.85rem 0.95rem;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    background: var(--bg-muted);
}

.cart-shipping-heading {
    margin: 0 0 0.35rem;
    font-size: 1rem;
}

.cart-shipping-free-note {
    margin: 0 0 0.65rem;
}

.cart-ship-state {
    margin-bottom: 0.65rem;
}

.cart-shipping-options {
    list-style: none;
    margin: 0 0 0.5rem;
    padding: 0;
}

.shipping-option-row {
    padding: 0.25rem 0;
}

.shipping-eta {
    color: var(--text-muted);
    font-weight: normal;
}

.is-free-ship {
    color: #2d7a4f;
}

.shipping-option-fieldset {
    margin-bottom: 0.85rem;
}

/* Cart ship-to address form */
.cart-shipping-address {
    margin: 1.25rem 0;
    padding: 1rem 1.1rem;
    border: 2px solid var(--border);
    border-radius: 14px;
    background: var(--bg-surface);
}

.cart-shipping-address h2 {
    margin: 0 0 0.35rem;
    font-size: 1.15rem;
}

.ship-address-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem 0.85rem;
}

.ship-field-wide {
    grid-column: 1 / -1;
}

.shipping-message {
    color: #8a5a00;
}

@media (max-width: 560px) {
    .ship-address-grid {
        grid-template-columns: 1fr;
    }
}

/* Checkout + address book */
.checkout-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.9fr);
    gap: 1.5rem;
    align-items: start;
}

.checkout-address-panel,
.checkout-summary-panel {
    background: var(--bg-surface);
    border: 2px solid var(--border);
    border-radius: 16px;
    padding: 1.15rem 1.2rem 1.35rem;
}

.checkout-line-list {
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;
}

.address-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem;
    margin: 0.85rem 0 1.1rem;
}

.address-card {
    position: relative;
    text-align: left;
    border: 2px solid var(--border);
    border-radius: 14px;
    padding: 0.85rem 0.9rem;
    background: var(--bg-muted);
    color: var(--text);
}

button.address-card {
    cursor: pointer;
    font: inherit;
    width: 100%;
}

.address-card h3 {
    margin: 0 0 0.25rem;
    font-size: 1rem;
}

.address-card-name {
    margin: 0 0 0.25rem;
    font-family: "Ubuntu Medium";
}

.address-card-lines {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.4;
    color: var(--text-muted);
}

.address-card.is-selected,
.address-card.is-default {
    border-color: #111;
    box-shadow: 0 0 0 1px #111;
}

[data-theme="dark"] .address-card.is-selected,
[data-theme="dark"] .address-card.is-default {
    border-color: var(--border);
    box-shadow: 0 0 0 1px var(--border);
}

.address-default-badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    font-size: 0.65rem;
    font-family: "Ubuntu Medium";
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.4rem;
    border-radius: 999px;
    background: #111;
    color: #fff;
}

.address-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.65rem;
}

.checkout-save-address {
    margin: 0.75rem 0;
}

.stripe-embed-mount {
    margin-top: 1rem;
    min-height: 120px;
}

.stripe-embed-placeholder {
    margin-top: 1rem;
    padding: 1rem;
    border: 2px dashed var(--border-soft);
    border-radius: 12px;
}

#checkout-address-status.is-error {
    color: #b00020;
}

.footer-pay-hint {
    margin: 0.45rem 0 0;
    font-size: 0.75rem;
}

.pay-link { color: #00d66f; border-color: #00d66f; }
.pay-klarna { color: #ffb3c7; border-color: #0a0b09; background: #ffb3c7; color: #0a0b09; }
.pay-amazon { color: #ff9900; border-color: #232f3e; }
.pay-cashapp { color: #00d632; border-color: #00d632; }

[data-theme="dark"] .pay-klarna {
    background: #3a2a30;
    color: var(--text);
    border-color: var(--border-soft);
}

@media (max-aspect-ratio: 18/25) {
    .checkout-layout {
        grid-template-columns: 1fr;
    }
}

/* Cart layout with sticky summary */
.cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.85fr);
    gap: 1.25rem;
    align-items: start;
}

.cart-summary-sticky {
    position: sticky;
    top: 1rem;
}

.summary-total {
    margin-top: 0.5rem;
    padding-top: 0.65rem;
    border-top: 2px solid var(--border);
    font-size: 1.05rem;
}

.cart-ship-methods {
    margin: 0.65rem 0;
}

.ship-method-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.5rem;
    align-items: center;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--border-soft);
    cursor: pointer;
}

.ship-method-meta {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.ship-method-meta small,
.ship-eta {
    color: var(--text-muted);
    font-size: 0.78rem;
    display: block;
    line-height: 1.35;
}

.ship-eta-note,
.summary-eta {
    margin: 0.45rem 0 0;
    font-size: 0.85rem;
}

.wallet-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.55rem;
    margin-top: 0.5rem;
}

.wallet-card {
    display: flex;
    gap: 0.45rem;
    align-items: flex-start;
    border: 2px solid var(--border);
    border-radius: 12px;
    padding: 0.65rem 0.7rem;
    background: var(--bg-muted);
    cursor: pointer;
}

.wallet-card.is-selected {
    border-color: #111;
    box-shadow: 0 0 0 1px #111;
}

.wallet-card input {
    margin-top: 0.2rem;
}

.wallet-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.88rem;
}

.wallet-list-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.65rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-soft);
}

.wallet-card-element {
    margin: 0.75rem 0;
    padding: 0.75rem;
    border: 2px solid var(--border);
    border-radius: 12px;
    background: var(--bg-surface);
}

.checkout-payment-layout {
    grid-template-columns: minmax(240px, 0.85fr) minmax(0, 1.3fr);
}

.checkout-ship-to {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-soft);
}

.checkout-ship-to h3 {
    margin: 0 0 0.35rem;
    font-size: 0.95rem;
}

.checkout-stripe-panel {
    background: var(--bg-surface);
    border: 2px solid var(--border);
    border-radius: 16px;
    padding: 1.15rem 1.2rem 1.35rem;
}

@media (max-aspect-ratio: 18/25) {
    .cart-layout,
    .checkout-payment-layout {
        grid-template-columns: 1fr;
    }
    .cart-summary-sticky {
        position: static;
    }
}

/* Amazon-style thin �Ship to� strip on cart */
.cart-deliver-section {
    margin-bottom: 1.25rem;
    padding: 0.85rem 0 0.25rem;
}

.cart-deliver-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.15rem;
}

.cart-deliver-header h2 {
    margin: 0;
    font-size: 1.15rem;
}

.cart-deliver-hint {
    margin: 0 0 0.65rem;
}

.ship-to-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: stretch;
}

.ship-to-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.08rem;
    min-width: 9.5rem;
    max-width: 14rem;
    padding: 0.55rem 0.75rem 0.6rem;
    border: 2px solid var(--border);
    border-radius: 10px;
    background: var(--bg-surface);
    color: var(--text);
    text-align: left;
    font: inherit;
    cursor: pointer;
    line-height: 1.25;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.ship-to-card:hover {
    border-color: #555;
}

.ship-to-card.is-selected {
    border-color: #111;
    box-shadow: 0 0 0 1px #111;
    background: var(--bg-muted);
}

[data-theme="dark"] .ship-to-card.is-selected {
    border-color: var(--border);
    box-shadow: 0 0 0 1px var(--border);
}

.ship-to-label {
    font-size: 0.72rem;
    font-family: "Ubuntu Medium";
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.ship-to-name {
    font-family: "Ubuntu Medium";
    font-size: 0.92rem;
}

.ship-to-street,
.ship-to-city {
    font-size: 0.82rem;
    color: var(--text-muted);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ship-to-badge {
    position: absolute;
    top: 0.3rem;
    right: 0.35rem;
    font-size: 0.58rem;
    font-family: "Ubuntu Medium";
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.1rem 0.3rem;
    border-radius: 999px;
    background: #111;
    color: #fff;
}

.ship-to-card-add {
    align-items: center;
    justify-content: center;
    min-width: 7.5rem;
    max-width: 8.5rem;
    border-style: dashed;
    color: var(--text-muted);
    gap: 0.2rem;
}

.ship-to-card-add:hover {
    color: var(--text);
    background: var(--bg-muted);
}

.ship-to-add-icon {
    font-size: 1.55rem;
    font-weight: 300;
    line-height: 1;
}

.ship-to-add-text {
    font-family: "Ubuntu Medium";
    font-size: 0.82rem;
}

/* Address modal */
body.modal-open {
    overflow: hidden;
}

.address-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.address-modal[hidden] {
    display: none !important;
}

.address-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 12, 16, 0.55);
}

.address-modal-panel {
    position: relative;
    z-index: 1;
    width: min(520px, 100%);
    max-height: min(90vh, 720px);
    overflow: auto;
    background: var(--bg-surface);
    color: var(--text);
    border: 2px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);
}

.address-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.9rem 1.1rem;
    border-bottom: 1px solid var(--border-soft);
}

.address-modal-header h2 {
    margin: 0;
    font-size: 1.15rem;
}

.address-modal-close {
    border: none;
    background: transparent;
    color: var(--text);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.15rem 0.4rem;
    border-radius: 8px;
}

.address-modal-close:hover {
    background: var(--bg-muted);
}

.address-modal-body {
    padding: 1rem 1.1rem;
}

.address-modal-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.85rem 1.1rem 1.05rem;
    border-top: 1px solid var(--border-soft);
}

.address-modal-save-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    margin-top: 0.85rem;
}

.address-save-pill.is-disabled {
    opacity: 0.55;
    pointer-events: none;
}

.address-save-pill.is-disabled input {
    cursor: not-allowed;
}

.address-modal-error {
    color: #b00020;
    margin-top: 0.65rem;
}

.btn-sm {
    font-size: 0.82rem;
    padding: 0.35rem 0.7rem;
}

@media (max-width: 560px) {
    .ship-to-card {
        min-width: calc(50% - 0.35rem);
        max-width: none;
        flex: 1 1 calc(50% - 0.35rem);
    }
    .ship-to-card-add {
        min-width: calc(50% - 0.35rem);
        max-width: none;
    }
}

/* Simple cart: subtotal above products (stacked) */
.cart-layout-simple,
.cart-layout-stacked {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    grid-template-columns: none;
}

.cart-summary-top {
    position: static;
    width: 100%;
    box-sizing: border-box;
    margin-top: 0;
}

.flame-rewards-checkout {
    background: var(--bg-muted);
    border: 2px solid var(--border);
    border-bottom: 2px solid var(--border);
    border-radius: 14px;
    padding: 0.9rem 1rem 1.05rem;
    margin-bottom: 1.35rem;
    box-sizing: border-box;
    overflow: visible;
    transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease, filter 0.2s ease;
}

.flame-rewards-checkout.is-inactive {
    background: #e8e8e8;
    border-color: #c5c5c5;
    opacity: 0.78;
    filter: grayscale(0.35);
    color: #555;
}

.flame-rewards-checkout.is-inactive .form-hint,
.flame-rewards-checkout.is-inactive .gift-checkbox-label small {
    color: #666;
}

.flame-rewards-checkout.is-active {
    background: #f3f7f2;
    border-color: #4a6741;
    opacity: 1;
    filter: none;
}

.flame-rewards-checkout h2 {
    margin: 0 0 0.35rem;
}

.flame-balance-hint {
    margin: 0 0 0.45rem;
}

.flame-apply-row {
    margin-top: 0.35rem;
    margin-bottom: 0;
}

.flame-controls {
    margin-top: 0.65rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.flame-points-field {
    max-width: 12rem;
}

.flame-points-field input {
    width: 100%;
    box-sizing: border-box;
}

[data-theme="dark"] .flame-rewards-checkout {
    background: var(--bg-surface);
    border-color: var(--border);
}

[data-theme="dark"] .flame-rewards-checkout.is-inactive {
    background: #2a2a2a;
    border-color: #444;
    color: #aaa;
    filter: grayscale(0.45);
}

[data-theme="dark"] .flame-rewards-checkout.is-active {
    background: #243028;
    border-color: #6a8f62;
}

/* Loyalty redeem + QR */
.loyalty-code-input-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: stretch;
}

.loyalty-code-input-row input {
    flex: 1 1 12rem;
    min-width: 0;
}

.loyalty-scan-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.loyalty-scan-icon {
    font-size: 1.1rem;
    line-height: 1;
}

.loyalty-scan-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.loyalty-scan-modal[hidden] {
    display: none !important;
}

.loyalty-scan-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.loyalty-scan-panel {
    position: relative;
    z-index: 1;
    width: min(420px, 100%);
    background: var(--bg-surface);
    border: 2px solid var(--border);
    border-radius: 16px;
    padding: 1rem 1.1rem 1.15rem;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.loyalty-scan-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.65rem;
}

.loyalty-scan-header h2 {
    margin: 0;
    font-size: 1.15rem;
}

.loyalty-qr-reader {
    width: 100%;
    min-height: 240px;
    border-radius: 12px;
    overflow: hidden;
    background: #111;
}

.loyalty-scan-footer {
    margin-top: 0.75rem;
    display: flex;
    justify-content: flex-end;
}

.loyalty-code-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    align-items: center;
}

.loyalty-code-row.is-archived {
    opacity: 0.72;
}

.loyalty-code-check {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.loyalty-code-check input {
    width: 1.15rem;
    height: 1.15rem;
    cursor: pointer;
}

.loyalty-list-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.loyalty-list-header h2 {
    margin: 0;
}

.loyalty-select-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
}

.loyalty-selected-count {
    font-family: "Ubuntu Medium", sans-serif;
    min-width: 5.5rem;
}

.loyalty-select-all {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    cursor: pointer;
}

#loyalty-download-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Generate form: unit | amount | qty | note on one row */
.loyalty-generate-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.65rem 0.75rem;
    margin-bottom: 0.35rem;
}

.loyalty-field-value {
    flex: 0 1 auto;
    min-width: 10.5rem;
    margin: 0;
}

.loyalty-field-qty {
    flex: 0 0 7.5rem;
    margin: 0;
}

.loyalty-field-note {
    flex: 1 1 12rem;
    min-width: 10rem;
    margin: 0;
}

/* Unit dropdown (left) + amount input (right) */
.loyalty-amount-combo {
    display: flex;
    align-items: stretch;
    gap: 0;
    width: 100%;
    max-width: 12.5rem;
}

.loyalty-unit-dropdown {
    position: relative;
    flex: 0 0 auto;
    z-index: 5;
}

.loyalty-unit-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    width: 2.85rem;
    height: 100%;
    min-height: 2.5rem;
    margin: 0;
    padding: 0 0.2rem 0 0.3rem;
    border: 2px solid var(--border);
    border-right: none;
    border-radius: 999px 0 0 999px;
    background: var(--input-bg);
    color: var(--text);
    cursor: pointer;
    box-sizing: border-box;
}

.loyalty-unit-trigger:hover,
.loyalty-unit-dropdown.is-open .loyalty-unit-trigger {
    background: var(--bg-muted, #f3f3f3);
}

.loyalty-unit-caret {
    width: 0;
    height: 0;
    border-left: 3.5px solid transparent;
    border-right: 3.5px solid transparent;
    border-top: 4.5px solid currentColor;
    opacity: 0.55;
    flex-shrink: 0;
}

/* Collapsed trigger: only the active unit is visible */
.loyalty-amount-combo.is-points .loyalty-unit-trigger .loyalty-unit-dollar,
.loyalty-amount-combo.is-dollars .loyalty-unit-trigger .loyalty-unit-flame {
    display: none !important;
}

.loyalty-unit-trigger .loyalty-unit-flame[hidden],
.loyalty-unit-trigger .loyalty-unit-dollar[hidden] {
    display: none !important;
}

.loyalty-unit-flame {
    width: 1.1rem;
    height: 1.1rem;
    object-fit: contain;
    flex-shrink: 0;
}

.loyalty-unit-dollar,
.loyalty-unit-menu-dollar {
    font-family: "Ubuntu Bold", "Ubuntu Medium", sans-serif;
    font-size: 1.15rem;
    line-height: 1;
    color: var(--text);
}

.loyalty-unit-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    margin: 0;
    padding: 0.25rem;
    list-style: none;
    min-width: 2.85rem;
    border: 2px solid var(--border);
    border-radius: 12px;
    background: var(--bg-surface);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    z-index: 20;
}

.loyalty-unit-menu[hidden] {
    display: none !important;
}

.loyalty-unit-menu li {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.15rem;
    padding: 0.25rem;
    border-radius: 8px;
    cursor: pointer;
}

.loyalty-unit-menu li:hover,
.loyalty-unit-menu li.is-selected {
    background: var(--bg-muted, #eee);
}

.loyalty-amount-combo input[type="number"] {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    margin: 0;
    border-radius: 0 999px 999px 0;
    border-left: none;
}

/* Qty / note match the rounded combo height */
.loyalty-field-qty input,
.loyalty-field-note input {
    border-radius: 999px;
    min-height: 2.5rem;
}

@media (max-aspect-ratio: 18/25) {
    .loyalty-generate-row {
        flex-direction: column;
        align-items: stretch;
    }

    .loyalty-field-value,
    .loyalty-field-qty,
    .loyalty-field-note {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
    }

    .loyalty-amount-combo {
        max-width: none;
    }
}

.loyalty-download-bar {
    margin-top: 1rem;
    flex-direction: column;
    align-items: flex-start;
}

.loyalty-status {
    font-family: "Ubuntu Medium";
    font-size: 0.8rem;
}

.loyalty-status-open {
    color: #2e7d32;
}

.loyalty-status-inactive {
    color: #b36b00;
}

.loyalty-status-redeemed {
    color: #8b1e1e;
}

.loyalty-activate-form {
    max-width: 36rem;
}

.loyalty-activate-form input[name="code"] {
    font-family: "Ubuntu Medium", ui-monospace, monospace;
    font-size: 1.15rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    flex: 1 1 12rem;
}

/* Bulk product inventory */
.inventory-bulk-panel {
    max-width: 720px;
}

.inventory-bulk-composer {
    margin-bottom: 1.25rem;
    position: relative;
}

.bulk-product-results {
    list-style: none;
    margin: 0.35rem 0 0;
    padding: 0.35rem;
    border: 2px solid var(--border-soft);
    border-radius: 12px;
    background: var(--bg-surface);
    max-height: 16rem;
    overflow: auto;
    z-index: 5;
}

.bulk-product-results li {
    padding: 0.55rem 0.7rem;
    border-radius: 8px;
    cursor: pointer;
}

.bulk-product-results li:hover,
.bulk-product-results li:focus {
    background: var(--bg-muted, #f3f3f3);
    outline: none;
}

.bulk-product-empty {
    cursor: default !important;
    color: var(--text-muted, #666);
}

.inventory-bulk-add-row {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--border-soft);
}

.inventory-bulk-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 0.75rem;
    align-items: flex-end;
    margin-top: 0.5rem;
}

.inventory-bulk-mode {
    min-width: 8rem;
}

.inventory-bulk-amount {
    min-width: 8rem;
    flex: 1 1 8rem;
}

.inventory-bulk-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin: 0.75rem 0 1rem;
}

.inventory-bulk-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.inventory-bulk-trash {
    flex-shrink: 0;
    min-width: 2.5rem;
    font-size: 1.05rem;
    line-height: 1;
}

.inventory-bulk-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.loyalty-qr-muted img {
    opacity: 0.55;
    filter: grayscale(0.4);
}

.loyalty-code-qr-thumb img {
    display: block;
    width: 88px;
    height: 88px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
}

.loyalty-code-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-left: auto;
}

/* Purchase history chip — Amazon-style black “Bought Mon YYYY” */
.purchase-chip {
    display: inline-block;
    margin: 0;
    padding: 0.32rem 0.6rem;
    border-radius: 4px;
    border: none;
    font-size: 0.78rem;
    font-family: "Ubuntu Medium", sans-serif;
    letter-spacing: 0.01em;
    color: #fff;
    background: #111;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
    line-height: 1.2;
    max-width: calc(100% - 2.5rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.purchase-chip-corner {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 3;
    pointer-events: none;
}

.gallery-main .purchase-chip-corner {
    /* Sit on the main product image; stays put as slides change underneath */
    top: 0.65rem;
    left: 0.65rem;
    z-index: 4;
    pointer-events: none;
    font-size: 0.82rem;
    padding: 0.35rem 0.7rem;
}

[data-theme="dark"] .purchase-chip {
    background: #0a0a0a;
    color: #f5f5f5;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

.product-card.is-sold-out .product-media,
.product-card.is-sold-out .product-card-media {
    opacity: 0.72;
    filter: grayscale(0.25);
}

/* Out-of-stock stroke matches gray disabled button look */
.product-card.is-sold-out::after {
    border-color: #9a9a9a !important;
    box-shadow: none;
}
.product-card.is-sold-out:hover::after,
.product-card.is-sold-out:focus-within::after {
    border-color: #7a7a7a !important;
}

.cart-add-btn.is-sold-out,
.btn.is-sold-out,
button.cart-add-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    filter: grayscale(0.4);
    pointer-events: none;
    background: #9a9a9a !important;
    border-color: #9a9a9a !important;
    color: #fff !important;
}

.product-detail-lists {
    margin-top: 0.85rem;
}

/* Home news/events — entire tile clickable */
.home-teaser-card-link {
    display: flex;
    gap: 0.75rem;
    align-items: stretch;
    text-decoration: none;
    color: inherit;
    width: 100%;
}
.home-teaser-card-link:hover h3 {
    text-decoration: underline;
}
.home-teaser-card-link .home-teaser-thumb {
    display: block;
    flex: 0 0 auto;
}
.home-teaser-card-link .home-teaser-body {
    flex: 1 1 auto;
    min-width: 0;
}

/* Quick link background images */
.home-link-card {
    position: relative;
    overflow: hidden;
}
.home-link-card.has-bg {
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
    border-color: transparent;
}
.home-link-bg {
    position: absolute;
    inset: 0;
    background-image: var(--ql-bg);
    background-size: cover;
    background-position: center;
    z-index: 0;
}
.home-link-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.55));
}
.home-link-card.has-bg .home-link-title,
.home-link-card.has-bg .home-link-text {
    position: relative;
    z-index: 1;
}

.season-badge-sold-out {
    background: #6b6b6b;
    color: #fff;
}

.out-of-stock-banner {
    margin: 0.75rem 0 1rem;
    padding: 0.85rem 1rem;
    border: 2px solid var(--border-soft);
    border-radius: 12px;
    background: var(--bg-surface);
}

.out-of-stock-banner strong {
    display: block;
    margin-bottom: 0.25rem;
}

.out-of-stock-banner p {
    margin: 0 0 0.75rem;
}

.restock-notify-form {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    max-width: 22rem;
}

.restock-notify-check {
    /* Keep checkbox vertically centered with multi-line label text */
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border-radius: 12px;
    padding: 0.5rem 0.7rem;
    white-space: normal;
}

.restock-notify-check input[type="checkbox"] {
    align-self: center;
    flex-shrink: 0;
    margin: 0;
}

.restock-notify-check > span {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.35;
    text-align: left;
}

@media (max-aspect-ratio: 18/25) {
    .restock-notify-form {
        max-width: none;
        width: 100%;
    }

    .restock-notify-check {
        align-items: center;
        justify-content: flex-start;
    }
}

/* Free shipping progress on cart */
.free-ship-progress {
    margin: 0 0 1rem;
    padding: 0.75rem 0.85rem;
    border: 2px solid var(--border-soft);
    border-radius: 12px;
    background: var(--bg-surface);
}

.free-ship-progress.is-unlocked {
    border-color: #2e7d32;
}

.free-ship-progress-bar {
    height: 0.65rem;
    border-radius: 999px;
    background: var(--border-soft);
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.free-ship-progress-fill {
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #4a6741, #2e7d32);
    transition: width 0.25s ease;
}

.free-ship-progress-msg {
    margin: 0 0 0.25rem;
}

.free-ship-progress-note {
    margin: 0;
    font-size: 0.8rem;
}

/* Staff order line items */
.staff-order-items {
    margin: 0.65rem 0 0.5rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    background: var(--bg, #fafafa);
}

.staff-order-items-heading {
    margin: 0 0 0.4rem;
    font-size: 0.9rem;
}

.staff-order-item-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.staff-order-item-list li {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.65rem;
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--border-soft);
    font-size: 0.92rem;
}

.staff-order-item-list li:last-child {
    border-bottom: none;
}

.staff-order-item-qty {
    font-family: "Ubuntu Medium";
    min-width: 2rem;
}

.staff-order-item-price {
    margin-left: auto;
    color: var(--text-muted, #555);
    font-size: 0.85rem;
}

/* Inventory search + tags */
.inventory-list-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.inventory-list-header h2 {
    margin: 0;
}

.inventory-search-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.inventory-search-field {
    margin: 0;
    min-width: 12rem;
}

.inventory-search-field input {
    min-width: 12rem;
}

.inventory-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0.25rem 0 0;
}

.inventory-tag {
    display: inline-block;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    border: 1px solid var(--border-soft);
    font-size: 0.72rem;
    font-family: "Ubuntu Medium";
    background: var(--bg-surface);
}

.cart-items-header {
    margin-bottom: 0.75rem;
}

.cart-items-header h2 {
    margin: 0 0 0.25rem;
}

/* Fallback cart-line when not on cart page (prefer .cart-page .cart-line above) */
.cart-select {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
}

.cart-select input {
    width: 1.15rem;
    height: 1.15rem;
    accent-color: #111;
    cursor: pointer;
}

.cart-line.is-deselected {
    opacity: 0.55;
}

.cart-line.is-deselected .cart-line-details h3 a {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

.btn-place-order {
    width: 100%;
    font-size: 1.05rem;
    padding: 0.75rem 1rem;
}

.checkout-section {
    margin-bottom: 1.35rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-soft);
}

.checkout-section:last-of-type {
    border-bottom: none;
}

.checkout-place-actions {
    margin-top: 1rem;
    flex-direction: column;
    align-items: stretch;
}

.checkout-main-col {
    min-width: 0;
}

@media (max-aspect-ratio: 18/25) {
    .cart-page .cart-line,
    .cart-list .cart-line {
        grid-template-columns: 1.85rem 72px minmax(0, 1fr) !important;
        column-gap: 0.75rem;
        align-items: start;
    }

    .cart-page .cart-line-media,
    .cart-list .cart-line-media {
        width: 72px;
    }

    .cart-page .cart-line-media img,
    .cart-list .cart-line-media img {
        width: 72px;
        height: 72px;
    }

    .cart-page .cart-line-main,
    .cart-list .cart-line-main {
        grid-column: 3 !important;
        padding-left: 0.25rem;
    }

    .cart-page .cart-select,
    .cart-list .cart-select {
        padding-top: 1.35rem;
    }
}

.btn-primary:disabled,
.btn-primary.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(0.35);
}

/* kept for any remaining references; primary rules above with .profile-icon-desktop */

.wallet-add-link {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 4.5rem;
}

/* —— Orders (Amazon-style) —— */
.orders-mobile {
    display: none;
}

.orders-desktop {
    display: block;
}

.order-block {
    border: 2px solid var(--border-soft);
    border-radius: 12px;
    margin-bottom: 1.25rem;
    overflow: hidden;
    background: var(--bg-surface);
}

.order-block.is-cancelled {
    opacity: 0.72;
}

.order-block-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    padding: 0.85rem 1rem;
    background: var(--bg-muted, #f4f6f8);
    border-bottom: 1px solid var(--border-soft);
}

/* Linear shipment progress: Ordered → Shipped → Out for Delivery → Delivered */
.order-progress {
    padding: 1rem 1.15rem 0.85rem;
    border-bottom: 1px solid var(--border-soft);
    background: var(--bg-surface);
}

.order-progress-track {
    position: relative;
    height: 3px;
    margin: 0.45rem 8% 0.65rem;
    background: var(--border-soft, #ddd);
    border-radius: 999px;
    overflow: hidden;
}

.order-progress-fill {
    display: block;
    height: 100%;
    background: var(--brand-green, #98bca8);
    border-radius: inherit;
    transition: width 0.35s ease;
    min-width: 0;
}

.order-progress-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    gap: 0.35rem;
}

.order-progress-step {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    text-align: center;
    min-width: 0;
    position: relative;
}

.order-progress-dot {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    border: 2px solid var(--border-soft, #ccc);
    background: var(--bg-surface, #fff);
    box-sizing: border-box;
    z-index: 1;
}

.order-progress-step.is-done .order-progress-dot,
.order-progress-step.is-current .order-progress-dot {
    border-color: var(--brand-green, #98bca8);
    background: var(--brand-green, #98bca8);
}

.order-progress-step.is-current .order-progress-dot {
    box-shadow: 0 0 0 3px rgba(152, 188, 168, 0.35);
}

.order-progress-label {
    font-size: 0.72rem;
    line-height: 1.2;
    color: var(--text-muted, #777);
    font-family: "Ubuntu Medium", sans-serif;
}

.order-progress-step.is-done .order-progress-label,
.order-progress-step.is-current .order-progress-label {
    color: var(--text, #111);
}

.order-progress-mobile {
    margin: 0 0 0.85rem;
    padding: 0.75rem 0.5rem 0.5rem;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
}

.order-progress-mobile .order-progress-label {
    font-size: 0.65rem;
}

.order-block-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem 1.5rem;
    flex: 1 1 auto;
    min-width: 0;
}

.order-meta-cell {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 5.5rem;
}

.order-meta-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted, #666);
    font-family: "Ubuntu Medium", sans-serif;
}

.order-meta-value {
    font-size: 0.92rem;
}

.order-block-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    justify-content: flex-end;
}

.order-status-pill {
    font-size: 0.78rem;
    font-family: "Ubuntu Medium", sans-serif;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--border-soft);
    background: var(--bg-surface);
}

.order-block-items {
    list-style: none;
    margin: 0;
    padding: 0.5rem 0.75rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.order-block-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.order-item-thumb {
    flex-shrink: 0;
    width: 4rem;
    height: 4rem;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-soft);
    background: var(--bg-muted);
    display: block;
}

.order-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.order-item-thumb.is-empty {
    background: linear-gradient(135deg, #ebe6df, #d9d2c8);
}

.order-item-name {
    font-family: "Ubuntu Medium", sans-serif;
    color: inherit;
    text-decoration: none;
}

.order-item-name:hover {
    text-decoration: underline;
}

.order-item-info {
    min-width: 0;
    flex: 1;
}

.order-item-info .form-hint {
    margin: 0.15rem 0 0.35rem;
}

.totp-setup-qr {
    margin: 0.75rem 0;
    padding: 0.75rem;
    display: inline-block;
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--border-soft);
}

.totp-secret {
    word-break: break-all;
    font-size: 0.9rem;
}

@media (max-aspect-ratio: 18/25) {
    .orders-desktop {
        display: none !important;
    }

    .orders-mobile {
        display: block;
    }

    .orders-mobile-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .orders-mobile-row {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        width: 100%;
        text-align: left;
        border: 2px solid var(--border-soft);
        border-radius: 12px;
        background: var(--bg-surface);
        padding: 0.65rem 0.7rem;
        cursor: pointer;
        color: inherit;
        font: inherit;
    }

    .orders-mobile-row-body {
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
        min-width: 0;
    }

    .orders-mobile-row-body .form-hint {
        margin: 0;
    }

    .order-detail-sheet {
        position: fixed;
        inset: 0;
        z-index: 1200;
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }

    .order-detail-sheet[hidden] {
        display: none !important;
    }

    .order-detail-sheet-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
    }

    .order-detail-sheet-panel {
        position: relative;
        z-index: 1;
        width: 100%;
        max-height: min(88vh, 40rem);
        overflow: auto;
        background: var(--bg-surface);
        border-radius: 16px 16px 0 0;
        padding: 0 0 calc(1rem + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.2);
    }

    .order-detail-sheet-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        padding: 0.85rem 1rem;
        border-bottom: 1px solid var(--border-soft);
        position: sticky;
        top: 0;
        background: var(--bg-surface);
        z-index: 1;
    }

    .order-detail-sheet-head h2 {
        margin: 0;
        font-size: 1.15rem;
    }

    .order-detail-sheet-body {
        padding: 0.85rem 1rem 1rem;
    }

    .order-detail-tracking {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem 0.75rem;
        margin: 0 0 0.85rem;
        padding: 0.75rem;
        border-radius: 12px;
        border: 2px solid var(--border-soft);
        background: var(--bg-muted);
    }

    .order-detail-actions {
        margin-top: 1rem;
        justify-content: flex-start;
    }

    body.order-sheet-open {
        overflow: hidden;
    }
}

.loyalty-balance-card {
    margin: 1rem 0 1.5rem;
    padding: 1.1rem 1.25rem;
    border: 2px solid var(--border);
    border-radius: 14px;
    background: var(--bg-muted);
}

.loyalty-points {
    margin: 0.25rem 0;
    font-family: "Britannic Bold";
    font-size: 2rem;
}

.loyalty-points span {
    font-size: 1rem;
    font-family: "Ubuntu Medium";
    color: var(--text-muted);
}

.gift-amount-pill {
    display: inline-flex;
    cursor: pointer;
}

.gift-amount-pill input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.gift-amount-pill span {
    display: inline-block;
    padding: 0.5rem 1rem;
    border: 2px solid var(--border);
    border-radius: 999px;
    margin: 0.25rem;
    font-family: "Ubuntu Medium";
}

.gift-amount-pill input:checked + span {
    background: #111;
    color: #fff;
    border-color: #111;
}

.order-card {
    border: 2px solid var(--border);
    border-radius: 14px;
    padding: 1rem;
    margin-bottom: 0.85rem;
    background: var(--bg-muted);
}

.order-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.order-card-top h2 {
    margin: 0;
    font-size: 1.1rem;
}

.order-status {
    font-size: 0.75rem;
    font-family: "Ubuntu Medium";
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    background: var(--bg-surface);
    border: 1px solid var(--border-soft);
}

.order-items {
    margin: 0.5rem 0;
    padding-left: 1.1rem;
}

.order-tracking {
    margin-top: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    align-items: center;
}

@media (max-aspect-ratio: 18/25) {
    .cart-page .cart-line,
    .cart-list .cart-line {
        grid-template-columns: 1.75rem 64px minmax(0, 1fr) !important;
        column-gap: 0.7rem;
    }

    .cart-page .cart-line-media,
    .cart-list .cart-line-media {
        width: 64px;
    }

    .cart-page .cart-line-media img,
    .cart-list .cart-line-media img {
        width: 64px;
        height: 64px;
    }

    .cart-page .cart-line-main {
        grid-column: 3 !important;
        padding-left: 0.2rem;
    }
}

/* ===== Product lists (profile + shared) ===== */
.list-create-form,
.list-rename-form,
.list-add-product-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.65rem 0.85rem;
    margin: 1rem 0 1.25rem;
}

.list-create-form .form-field,
.list-rename-form .form-field,
.list-add-product-form .form-field {
    flex: 1 1 14rem;
    margin: 0;
}

.product-lists {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.product-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0.9rem;
    border: 2px solid var(--border-soft);
    border-radius: 12px;
    background: var(--bg-muted);
}

.product-list-row-main {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}

.product-list-row-main:hover strong {
    text-decoration: underline;
}

.list-share-panel {
    margin: 1.25rem 0;
    padding: 1rem;
    border: 2px solid var(--border-soft);
    border-radius: 14px;
    background: var(--bg-muted);
}

.list-share-panel h2 {
    margin: 0 0 0.4rem;
    font-size: 1.05rem;
}

.list-share-url-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.5rem 0;
}

.list-share-url {
    flex: 1 1 12rem;
    min-width: 0;
    font-size: 0.85rem;
    padding: 0.45rem 0.6rem;
    border: 2px solid var(--border-soft);
    border-radius: 8px;
    background: var(--input-bg);
    color: var(--text);
}

.list-share-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.list-product-items {
    list-style: none;
    margin: 0.75rem 0 1.25rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.list-product-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    padding: 0.75rem;
    border: 2px solid var(--border-soft);
    border-radius: 14px;
    background: var(--bg-surface);
}

.list-product-item.is-purchased {
    opacity: 0.78;
}

.list-product-thumb {
    flex: 0 0 4.5rem;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border-soft);
    background: var(--bg-muted);
}

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

.list-product-meta {
    flex: 1 1 10rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.list-product-meta a {
    color: inherit;
    text-decoration: none;
}

.list-product-meta a:hover {
    text-decoration: underline;
}

.list-product-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.list-purchased-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-family: "Ubuntu Medium", sans-serif;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    background: var(--chip-on-bg);
    color: var(--text);
    width: fit-content;
}

.list-delete-form {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-soft);
}

.add-to-list-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem 0.75rem;
    margin: 0.35rem 0 0.75rem;
}

.add-to-list-form .add-to-list-field {
    flex: 1 1 9rem;
    margin: 0;
    min-width: 0;
}

.add-to-list-form .add-to-list-field span {
    font-size: 0.78rem;
}

/* ===== Seasonal decorations ===== */
.seasonal-snow,
.seasonal-hearts,
.seasonal-petals {
    pointer-events: none;
    position: fixed;
    inset: 0;
    z-index: 1800;
    overflow: hidden;
}

.seasonal-snowflake,
.seasonal-heart,
.seasonal-petal {
    position: absolute;
    top: -2rem;
    color: #fff;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
    animation-name: seasonal-fall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.seasonal-heart {
    color: #e88a9a;
}

.seasonal-petal {
    color: #e8b4c8;
}

@keyframes seasonal-fall {
    0% {
        transform: translate3d(0, -10vh, 0) rotate(0deg);
    }
    100% {
        transform: translate3d(12vw, 110vh, 0) rotate(360deg);
    }
}

.seasonal-web {
    pointer-events: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1900;
    width: min(220px, 42vw);
    color: rgba(40, 40, 40, 0.45);
}

[data-theme="dark"] .seasonal-web {
    color: rgba(230, 230, 230, 0.35);
}

.seasonal-web-svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Web sits under header edge, over page content only */
@media (max-aspect-ratio: 18/25) {
    .seasonal-web {
        top: 3.5rem;
        width: min(160px, 48vw);
    }
}

.seasonal-sparkle-corner {
    pointer-events: none;
    position: fixed;
    top: 4.5rem;
    right: 0.75rem;
    z-index: 1800;
    font-size: 1.4rem;
    color: #d4a017;
    opacity: 0.55;
    animation: seasonal-twinkle 2.4s ease-in-out infinite;
}

@keyframes seasonal-twinkle {
    0%, 100% { opacity: 0.35; transform: scale(1); }
    50% { opacity: 0.75; transform: scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
    .seasonal-snowflake,
    .seasonal-heart,
    .seasonal-petal,
    .seasonal-sparkle-corner {
        animation: none !important;
    }
}

/* ===== Multi-store theme tokens (fallbacks if no store CSS injected) ===== */
:root {
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-btn: 999px;
    --radius-card: 16px;
    --radius-input: 12px;
    --radius-chip: 999px;
    --font-heading: "Britannic Bold", "Ubuntu", sans-serif;
    --font-body: "Ubuntu", sans-serif;
    --heading-color: var(--text);
    --body-color: var(--text);
}

.btn,
button.btn {
    border-radius: var(--radius-btn);
}

.product-card,
.content-card,
.auth-card,
.header-search-panel {
    border-radius: var(--radius-card);
}

.home-searchbar,
input[type="text"],
input[type="email"],
input[type="search"],
input[type="password"],
select,
textarea {
    border-radius: var(--radius-input);
}

/* Marketplace */
.marketplace-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.5rem 1rem 2rem;
}

.marketplace-hero {
    margin-bottom: 1.5rem;
}

.marketplace-search {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: flex-end;
    margin-top: 1rem;
}

.marketplace-search .form-field {
    flex: 1 1 12rem;
    margin: 0;
}

.marketplace-store-list {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem;
}

.marketplace-store-list li {
    border: 2px solid var(--border-soft);
    border-radius: var(--radius-card);
    padding: 0.75rem 1rem;
    background: var(--bg-surface);
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.marketplace-seller-badge {
    margin: 0 0 0.35rem;
    font-size: 0.78rem;
    font-family: "Ubuntu Medium", sans-serif;
}

.marketplace-seller-badge a {
    color: var(--color-secondary, var(--text-muted));
    text-decoration: none;
}

.marketplace-seller-badge a:hover {
    text-decoration: underline;
}

.marketplace-cart-group {
    margin: 1.25rem 0;
    padding: 1rem;
    border: 2px solid var(--border-soft);
    border-radius: var(--radius-card);
    background: var(--bg-surface);
}

.marketplace-cart-group-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.marketplace-cart-group-header h2 {
    margin: 0;
    font-size: 1.15rem;
}

/* Store switcher chip (dev) */
.store-dev-switcher {
    position: fixed;
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    left: 0.75rem;
    z-index: 1500;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    max-width: min(420px, 90vw);
    pointer-events: none;
}

.store-dev-switcher a {
    pointer-events: auto;
    font-size: 0.72rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-chip);
    background: var(--bg-surface);
    border: 1px solid var(--border-soft);
    color: var(--text);
    text-decoration: none;
    box-shadow: 0 2px 8px var(--shadow);
}

@media (min-aspect-ratio: 11/10) {
    .store-dev-switcher {
        bottom: 1rem;
    }
}

/* ===== Store onboarding ===== */
.onboard-page {
    max-width: 720px;
    margin: 0 auto;
    padding: 1rem 1.25rem 2.5rem;
}

.onboard-progress {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 1.5rem;
}

.onboard-step {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: var(--text-muted);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-chip);
    border: 1px solid var(--border-soft);
}

.onboard-step.is-current {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border-color: var(--btn-primary-bg);
}

.onboard-step.is-done {
    border-color: var(--brand-green, #98bca8);
    color: var(--text);
}

.onboard-hero h1 {
    margin-top: 0.25rem;
}

.onboard-benefits {
    display: grid;
    gap: 0.85rem;
    margin: 1.5rem 0;
}

.onboard-benefits article {
    padding: 0.85rem 1rem;
    border: 2px solid var(--border-soft);
    border-radius: var(--radius-card);
    background: var(--bg-surface);
}

.onboard-benefits h2 {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
}

.onboard-preset-grid {
    border: none;
    padding: 0;
    margin: 0 0 1rem;
    display: grid;
    gap: 0.65rem;
}

.onboard-preset-card {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.75rem 0.9rem;
    border: 2px solid var(--border-soft);
    border-radius: var(--radius-card);
    cursor: pointer;
}

.onboard-preset-card:has(input:checked) {
    border-color: var(--color-primary, #111);
    box-shadow: 0 0 0 1px var(--color-primary, #111);
}

.onboard-review {
    display: grid;
    gap: 0.65rem;
    margin: 1rem 0 1.5rem;
}

.onboard-review > div {
    display: grid;
    grid-template-columns: 8rem 1fr;
    gap: 0.5rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--border-soft);
}

.onboard-review dt {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0;
}

.onboard-review dd {
    margin: 0;
}

.onboard-next-steps {
    margin: 1rem 0 1.5rem;
    padding-left: 1.2rem;
}

.onboard-account-card {
    padding: 1rem;
    border: 2px solid var(--border-soft);
    border-radius: var(--radius-card);
    margin: 1rem 0;
}

.staff-store-switcher {
    width: 100%;
    padding: 0.5rem 0.75rem 0.75rem;
    box-sizing: border-box;
}

.staff-store-switcher select {
    width: 100%;
    max-width: 100%;
    font-size: 0.9rem;
}

/* Hero placeholder when no images uploaded */
.home-hero-placeholder {
    width: 100%;
    height: 100%;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--bg-muted, #f4f6f8) 0%, var(--bg-nav, #C8D6E8) 100%);
    color: var(--text-muted, #666);
    font-family: var(--font-heading, sans-serif);
    font-size: clamp(1.25rem, 3vw, 2rem);
    text-align: center;
    padding: 1.5rem;
    box-sizing: border-box;
}

.home-section-empty {
    padding: 1.25rem;
    border: 2px dashed var(--border-soft);
    border-radius: var(--radius-card, 14px);
    background: var(--bg-muted);
}

.theme-dynamic-rows {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0.5rem 0 0.75rem;
}

.theme-dynamic-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.theme-dynamic-row input,
.theme-dynamic-row select {
    flex: 1 1 8rem;
    min-width: 0;
}

.theme-banner-row .rt-editor {
    flex: 1 1 100%;
}

.scent-suggest {
    position: fixed;
    left: 50%;
    bottom: 1.25rem;
    transform: translateX(-50%);
    z-index: 80;
    width: min(36rem, calc(100% - 1.5rem));
    background: var(--bg-page, #fff);
    color: var(--text, #111);
    border: 1px solid #98bca8;
    border-radius: 12px;
    padding: 0.75rem 0.9rem 0.85rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.scent-suggest-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.45rem;
}
.scent-suggest-close {
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}
.scent-suggest-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.scent-suggest-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.scent-suggest-item img {
    width: 42px;
    height: 42px;
    object-fit: cover;
    border-radius: 6px;
    flex: 0 0 auto;
}
.scent-suggest-copy {
    flex: 1 1 auto;
    min-width: 0;
}
.scent-suggest-copy a {
    color: inherit;
    font-weight: 600;
}
.scent-suggest-reason {
    display: block;
    font-size: 0.82rem;
    opacity: 0.8;
}
@media (max-aspect-ratio: 11/10) {
    .scent-suggest {
        bottom: 5.6rem;
    }
}

.staff-server-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.45);
}
.staff-server-modal[hidden] {
    display: none;
}
.staff-server-panel {
    width: min(52rem, 100%);
    max-height: min(80vh, 40rem);
    overflow: auto;
    background: var(--bg-page, #fff);
    color: var(--text, #111);
    border-radius: 14px;
    padding: 1rem 1rem 1.1rem;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
}
.staff-server-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.staff-server-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
    gap: 0.6rem;
}
.staff-server-choice {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    border: 1px solid var(--border-soft, #ddd);
    background: var(--bg-surface, #fff);
    color: inherit;
    border-radius: 8px;
    padding: 0.35rem;
    cursor: pointer;
    text-align: left;
}
.staff-server-choice img {
    width: 100%;
    height: 5.5rem;
    object-fit: cover;
    border-radius: 4px;
}
.staff-server-choice span {
    font-size: 0.75rem;
    word-break: break-word;
}
.staff-server-preview img {
    display: block;
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 6px;
    margin-top: 0.35rem;
}
.staff-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}
.staff-media-card {
    border: 1px solid var(--border-soft, #ddd);
    border-radius: 8px;
    padding: 0.4rem;
    background: var(--bg-surface, #fff);
}
.staff-media-card img {
    width: 100%;
    height: 6rem;
    object-fit: cover;
    border-radius: 4px;
}
.staff-media-card p {
    margin: 0.35rem 0 0;
    font-size: 0.75rem;
    word-break: break-word;
}

.theme-section-card {
    border: 2px solid var(--border-soft);
    border-radius: var(--radius-card, 14px);
    padding: 0.85rem 1rem 1rem;
    margin: 0 0 0.85rem;
    background: var(--bg-surface);
}

.theme-section-card legend {
    padding: 0 0.35rem;
    font-weight: 600;
}

.social-icon-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    font-size: 0.75rem;
    font-weight: 700;
}

.staff-store-switcher-label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted, #666);
    margin-bottom: 0.25rem;
}

.staff-store-switcher-hint {
    margin: 0.35rem 0 0;
    font-size: 0.72rem;
    line-height: 1.35;
}

.staff-view-only-banner {
    margin: 0.35rem 0.75rem 0.65rem;
    padding: 0.45rem 0.65rem;
    font-size: 0.78rem;
    border-radius: 8px;
    background: rgba(180, 140, 40, 0.15);
    border: 1px solid rgba(180, 140, 40, 0.45);
    color: var(--text);
}

/* Full-width staff catalog + product modal */
.staff-page-wide .staff-catalog-full {
    width: 100%;
    max-width: none;
}

.staff-catalog-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.staff-catalog-toolbar h2 {
    margin: 0;
}

.staff-icon-btn {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    line-height: 1;
    border-radius: 999px;
}

.staff-catalog-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 2px solid var(--border);
    border-radius: var(--radius-card, 14px);
    background: var(--bg-surface);
}

.staff-catalog-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.staff-catalog-table th,
.staff-catalog-table td {
    padding: 0.65rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border-soft);
    vertical-align: middle;
}

.staff-catalog-table th {
    font-family: "Ubuntu Medium", sans-serif;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    background: var(--bg-muted);
}

.staff-catalog-thumb img {
    width: 2.75rem;
    height: 2.75rem;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

.staff-col-actions {
    white-space: nowrap;
    text-align: right !important;
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 2px solid var(--border-soft);
    border-radius: 8px;
    background: var(--bg-surface);
    color: var(--text);
    cursor: pointer;
    text-decoration: none;
    vertical-align: middle;
}

.btn-icon:hover {
    background: var(--bg-muted);
}

.btn-icon-danger {
    color: var(--danger, #8b1e1e);
    border-color: var(--danger, #8b1e1e);
}

.inline-form {
    display: inline;
}

.staff-modal {
    position: fixed;
    inset: 0;
    /* Above site header (5000) so dimmer covers the whole page */
    z-index: 8000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    /* Extra top padding so panel title isn’t under the sticky site header */
    padding: max(4.5rem, 8vh) 1rem 2rem;
    overflow: auto;
    overscroll-behavior: contain;
}

.staff-modal[hidden] {
    display: none !important;
}

.staff-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    background: rgba(0, 0, 0, 0.55);
    /* Ensure full viewport dim including over header */
    min-height: 100vh;
    min-height: 100dvh;
}

.staff-modal-panel {
    position: relative;
    z-index: 1;
    width: min(720px, 100%);
    max-height: calc(100vh - 6rem);
    max-height: calc(100dvh - 6rem);
    overflow: auto;
    /* Keep scrollbar from sitting under the close (X) button */
    scrollbar-gutter: stable;
    background: var(--bg-surface);
    color: var(--text);
    border: 2px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
    padding: 0 0 1.25rem;
    display: flex;
    flex-direction: column;
    margin-top: 0;
}

.staff-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0;
    /* Extra right padding so X sits left of the scrollbar track */
    padding: 1rem 2.25rem 0.85rem 1.25rem;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border, #e5e7eb);
    border-radius: 16px 16px 0 0;
    position: sticky;
    top: 0;
    z-index: 3;
    box-shadow: 0 1px 0 var(--bg-surface);
}

.staff-modal-header .btn-icon,
.staff-modal-header [data-close-modal] {
    flex-shrink: 0;
    margin-right: 0.15rem;
    position: relative;
    z-index: 4;
}

/* When product modal is open, never let site header paint above the dimmer */
body.modal-open .header,
body.modal-open .site-header {
    z-index: 1 !important;
}

/* POS full-screen shell — no storefront chrome */
body.pos-fullscreen .header,
body.pos-fullscreen .site-header,
body.pos-fullscreen footer,
body.pos-fullscreen .site-footer,
body.pos-fullscreen .footer,
body.pos-fullscreen .bottom-nav,
body.pos-fullscreen .mobile-nav,
body.pos-fullscreen #cookie-consent,
body.pos-fullscreen .cookie-banner {
    display: none !important;
}

body.pos-fullscreen content,
body.pos-fullscreen .page-main {
    max-width: none;
    margin: 0;
    padding: 0;
}

.staff-modal-header h2 {
    margin: 0;
}

.staff-modal-form,
.staff-modal-panel > form,
.staff-modal-panel .staff-product-form {
    /* Match header: leave room so scrollbar doesn’t crowd controls */
    padding: 0.85rem 1.75rem 0 1.25rem;
}

.product-variants-inline {
    margin: 0.35rem 0 0.75rem;
}

.product-add-variant-btn {
    margin-top: 0.35rem;
}

.product-kind-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: 0.55rem;
}

.product-kind-card {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.65rem 0.75rem;
    border: 2px solid var(--border-soft);
    border-radius: 12px;
    cursor: pointer;
}

.product-kind-card:has(input:checked) {
    border-color: var(--color-primary, #111);
    box-shadow: 0 0 0 1px var(--color-primary, #111);
}

.staff-form-full {
    max-width: none;
    width: 100%;
}

/* Top footer columns: centered content (Contact / Address / Info / Payments) */
.footer-grid {
    justify-items: center;
    text-align: center;
}

.footer-col {
    text-align: center;
    max-width: 18rem;
}

.footer-links {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-payments {
    justify-content: center;
}

/* Bottom row: social left · Climate center · copyright right */
.footer-bottom {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    text-align: left;
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-soft);
}

.footer-bottom .footer-social {
    flex: 1 1 10rem;
    display: flex;
    justify-content: flex-start;
    margin: 0;
}

.footer-bottom .footer-climate-badge {
    flex: 0 1 auto;
    display: flex;
    justify-content: center;
    margin: 0 auto;
}

.footer-bottom .footer-copy-wrap {
    flex: 1 1 10rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    margin: 0;
}

@media (max-aspect-ratio: 18/25) {
    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
    .footer-bottom .footer-social,
    .footer-bottom .footer-climate-badge,
    .footer-bottom .footer-copy-wrap {
        justify-content: center;
        align-items: center;
        text-align: center;
        width: 100%;
    }
}

/* ===== Feature pack: multi-store UX upgrades ===== */

a:hover,
.section-link:hover,
.footer-links a:hover,
.box:hover,
.nav-bar a:hover {
    color: var(--text-hover, var(--color-hover, var(--brand-green)));
}

.site-footer {
    background: var(--bg-footer, var(--bg-muted));
}

/* Prefer theme header color on desktop only — do not override mobile gradient header */
@media (min-aspect-ratio: 11/10) {
    .header-top {
        background: var(--bg-header, transparent);
    }
}

.footer-info-centered,
.footer-layout-centered .footer-grid {
    text-align: center;
    justify-items: center;
}
.footer-layout-centered .footer-col {
    text-align: center;
}
.footer-layout-centered .footer-links {
    display: inline-block;
    text-align: left;
}
.footer-layout-compact .footer-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.product-card {
    border-radius: var(--radius-card, 16px);
}
.product-card-media-col,
.product-card-media-link {
    border-radius: var(--radius-card, 16px) var(--radius-card, 16px) 0 0;
    overflow: hidden;
}
.product-card-media img {
    border-radius: inherit;
}

.product-card-store-logo {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 4;
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-surface);
    border: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    justify-content: center;
}
.product-card-store-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.marketplace-store-grid {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
    gap: 1rem;
}
.marketplace-store-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--text);
    padding: 0.75rem;
    border: 2px solid var(--border-soft);
    border-radius: var(--radius-card, 12px);
    background: var(--bg-surface);
}
.marketplace-store-logo {
    width: 72px;
    height: 72px;
    object-fit: contain;
    border-radius: 10px;
}
.marketplace-store-name {
    font-family: var(--font-body);
    font-size: 0.85rem;
    text-align: center;
}

.category-scroll {
    position: relative;
    display: block;
    /* Don’t clip category card strokes on the sides */
    overflow: visible;
}
.category-grid-scroll {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 0.75rem;
    /*
      overflow-x:auto clips box-shadow. Extra left padding slides the first
      tile right so its stroke isn’t cut by the viewport / arrow controls.
    */
    padding: 0.55rem 2.5rem 0.75rem 0.85rem;
    scroll-padding-inline: 0.85rem 2.5rem;
    margin: 0;
    box-sizing: border-box;
    grid-template-columns: none;
    width: 100%;
    -webkit-overflow-scrolling: touch;
}
.category-grid-scroll .category-card {
    flex: 0 0 min(10.5rem, 70vw);
    scroll-snap-align: start;
}
/* Overlay arrows so they don’t steal row width / cover the first tile stroke */
.category-scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    border: 2px solid var(--border);
    background: var(--bg-surface);
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    box-shadow: 0 2px 8px var(--shadow);
}
.category-scroll-btn[hidden] {
    display: none !important;
}
.category-scroll-prev {
    left: 0.15rem;
}
.category-scroll-next {
    right: 0.15rem;
}

/* Locked ribbon: logo green (#98bca8) and swallowtail ends. Staff cannot pick another color. */
.store-promo-banners {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    margin: 0.7rem auto 0.35rem;
    padding: 0 1.35rem;
}
.store-promo-banner {
    position: relative;
    width: min(48rem, 100%);
    box-sizing: border-box;
    background: #98bca8;
    color: #111;
    text-align: center;
    padding: 0.6rem 1.9rem;
    font-size: 0.92rem;
    line-height: 1.35;
    clip-path: polygon(
        0 0,
        100% 0,
        calc(100% - 1.05rem) 50%,
        100% 100%,
        0 100%,
        1.05rem 50%
    );
    filter: drop-shadow(0 3px 0 #6f9a86);
}
.store-promo-banner-text,
.store-promo-banner-text p {
    margin: 0;
    color: #111;
}
.store-promo-banner a {
    color: #111;
    text-decoration: underline;
}
[data-theme="dark"] .store-promo-banner,
[data-theme="dark"] .store-promo-banner-text,
[data-theme="dark"] .store-promo-banner-text p,
[data-theme="dark"] .store-promo-banner a {
    background: transparent;
    color: #111;
}
[data-theme="dark"] .store-promo-banner {
    background: #98bca8;
}

.logo-image-mobile { display: none; }
@media (max-aspect-ratio: 11/10) {
    .logo-image-mobile { display: block; }
    .header-logo-link .logo-image-desktop:not(:only-child) { display: none; }
    .header-logo-link:has(.logo-image-mobile) .logo-image-desktop { display: none; }
}

.header-notifications {
    position: relative;
}
.header-notify-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text);
    padding: 0.25rem;
    display: inline-flex;
    align-items: center;
    position: relative;
}
.header-notify-badge {
    position: absolute;
    top: -2px;
    right: -4px;
    min-width: 1rem;
    height: 1rem;
    border-radius: 999px;
    background: #c62828;
    color: #fff;
    font-size: 0.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.2rem;
}
.header-notify-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 0.35rem);
    width: min(18rem, 80vw);
    background: var(--bg-surface);
    border: 2px solid var(--border);
    border-radius: var(--radius-md, 12px);
    box-shadow: 0 8px 24px var(--shadow, rgba(0,0,0,0.12));
    padding: 0.65rem;
    z-index: 60;
}

.pickup-map-block {
    margin: 1rem 0 1.25rem;
    padding: 0.85rem;
    border: 2px solid var(--border-soft);
    border-radius: var(--radius-card, 12px);
    background: var(--bg-muted);
}
.pickup-map-heading {
    margin: 0 0 0.35rem;
    font-size: 1rem;
}
.pickup-map-frame-wrap {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border-soft);
    aspect-ratio: 16 / 10;
    max-height: 260px;
}
.pickup-map-frame {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.bottom-nav {
    background: var(--bg-bottom-nav, var(--bg-nav, #232f3e));
}

/* Tablet (~3:4 → just past square): bottom nav + larger icons; hide header account/cart */
@media (min-aspect-ratio: 18/25) and (max-aspect-ratio: 11/10) {
    html {
        font-size: 106%;
    }

    /* Account + cart live in bottom nav — don't duplicate in the header */
    .header .profile-menu,
    .header .cart-link {
        display: none !important;
    }

    .bottom-nav {
        display: flex !important;
        --bottom-nav-height: 4.85rem;
        height: var(--bottom-nav-height);
        padding: 0 0.2rem;
        padding-bottom: env(safe-area-inset-bottom, 0);
        box-sizing: content-box;
        justify-content: space-evenly;
        gap: 0;
    }

    .bottom-nav-item {
        flex: 1 1 0;
        min-width: 0;
        max-width: 5.5rem;
        gap: 0.28rem;
        padding: 0.3rem 0.1rem;
        font-size: 0.8rem;
    }

    .bottom-nav-item .label {
        font-size: 0.8rem;
    }

    .bottom-nav-icon {
        width: 1.85rem !important;
        height: 1.85rem !important;
    }

    .bottom-nav-avatar {
        width: 1.85rem !important;
        height: 1.85rem !important;
    }

    .bottom-nav-primary {
        margin-top: -2rem;
        max-width: none;
        flex: 0 0 auto;
    }

    .bottom-nav-primary-inner {
        width: 5.35rem;
        height: 5.35rem;
        gap: 0.15rem;
    }

    .bottom-nav-primary-icon {
        width: 1.85rem !important;
        height: 1.85rem !important;
    }

    .bottom-nav-primary .label {
        font-size: 0.85rem;
    }

    .bottom-nav-fill {
        display: block;
    }

    content {
        padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
    }

    .toast-container {
        bottom: 5.25rem;
    }

    .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
    .product-card-media {
        aspect-ratio: 1 / 1;
    }
    .home-hero {
        min-height: 280px;
    }
    .home-hero-copy h1 {
        font-size: clamp(1.45rem, 2.6vw, 2rem);
    }
}

@media (max-aspect-ratio: 18/25) {
    /* Hide supporting hero paragraph on phone portrait (title + CTAs stay) */
    .home-hero-copy .promo-copy,
    .lab-hero-copy .promo-copy {
        display: none !important;
    }

    .nav-bar .box {
        padding-top: 0.55rem;
        padding-bottom: 0.55rem;
    }
    .nav-bar {
        overflow-y: auto;
        /* Full height behind bottom nav — do not shorten with max-height */
        max-height: none;
        height: 100dvh;
        padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
    }
    .nav-bar .nav-mobile-theme {
        margin-top: auto;
        margin-bottom: 0;
        /* Stay in document flow at end of flex column — not sticky/side-offset */
        position: relative;
        bottom: auto;
        left: auto;
        right: auto;
        width: 100%;
    }
    .home-hero {
        min-height: 0;
    }
    .home-hero-copy {
        left: 1rem;
        right: 0.85rem;
        top: 1.15rem;
        bottom: 1.85rem;
        transform: none;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
    .home-hero-actions {
        margin-top: auto;
        margin-bottom: 0;
    }
    .home-searchbar-wrapper {
        max-width: calc(100% - 7.5rem);
    }
}

/* Theme section tabs share the same sliding segment graphic as staff-tabs */
.staff-theme-tabs.staff-tabs {
    margin: 0 0 1.25rem;
    max-width: 100%;
}
.staff-theme-colors {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.staff-section-spaced,
.staff-theme-form .form-field,
.staff-theme-form .checkbox-pill,
.staff-theme-form h2,
.onboard-form .form-field,
.onboard-form .checkbox-pill {
    margin-bottom: 0.85rem;
}
.staff-theme-form h2 {
    margin-top: 1.75rem;
}

/* Header layout presets */
.header-layout-centered .header-top {
    flex-wrap: wrap;
    justify-content: center;
}
.header-layout-centered .header-logo-link,
.header-layout-centered .brand-name {
    order: 0;
}
.header-layout-centered .home-searchbar-wrapper {
    order: 2;
    flex: 1 1 100%;
    max-width: 36rem;
    margin: 0.35rem auto 0;
}
.header-layout-centered .icon-wrapper {
    order: 1;
}
.header-layout-minimal .brand-name {
    display: none;
}
.header-layout-minimal .logo-image {
    height: 2.5rem;
    width: 2.5rem;
}
/* logo_left_nav: same absolute center as standard */
.header-layout-logo_left_nav .nav-bar {
    padding-left: 0;
}
.header-layout-logo_left_nav .nav-bar-inner.nav-bar-desktop {
    left: 50%;
    transform: translate(-50%, -50%);
    justify-content: center;
}

/* Footer layout presets */
.footer-layout-standard .footer-grid {
    text-align: left;
    justify-items: start;
}
.footer-layout-standard .footer-col {
    text-align: left;
}
.footer-layout-compact .footer-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}
.bottom-nav-slot-editor {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: 0.75rem;
    margin: 0.75rem 0 1.25rem;
}
.theme-live-preview {
    border: 2px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    max-width: 420px;
    background: var(--tlp-bg, #fff);
    color: var(--tlp-text, #111);
}
.tlp-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.65rem;
    background: var(--tlp-header, #fff);
}
.tlp-search {
    flex: 1;
    height: 1.1rem;
    border-radius: 999px;
    background: var(--tlp-muted, #eee);
}
.tlp-nav {
    height: 1.4rem;
    background: var(--tlp-nav, #232f3e);
}
.tlp-hero {
    min-height: 5.5rem;
    padding: 0.85rem;
    background: linear-gradient(120deg, var(--tlp-primary, #111), var(--tlp-secondary, #456));
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.25rem;
}
.tlp-cats {
    display: flex;
    gap: 0.4rem;
    padding: 0.65rem;
}
.tlp-cats span {
    flex: 1;
    height: 2.2rem;
    border-radius: 8px;
    background: var(--tlp-muted, #eee);
    border: 1px solid var(--tlp-border, #ccc);
}
.tlp-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
    padding: 0 0.65rem 0.65rem;
}
.tlp-card {
    aspect-ratio: 1;
    border-radius: 8px;
    background: var(--tlp-surface, #fafafa);
    border: 1px solid var(--tlp-border, #ccc);
}
.tlp-footer {
    height: 2rem;
    background: var(--tlp-footer, #f4f6f8);
}

body.not-found-page content {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding-bottom: 0 !important;
}

.not-found {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.25rem;
    padding: 2.5rem 1.25rem;
    color: #111;
}

.not-found-art {
    display: block;
    width: min(100%, 28rem);
    height: auto;
    color: #111;
}

[data-theme="dark"] .not-found,
[data-theme="dark"] .not-found-art {
    color: #fff;
}

.not-found-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
}

.hero-sizing-chart {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 0 1rem;
    border-radius: 0.5rem;
}

.hero-dim-graphic {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 1rem 0;
}
.hero-dim-frame {
    border: 2px dashed var(--border);
    border-radius: 10px;
    background: var(--bg-muted);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-dim-desktop { height: 7rem; }
.hero-dim-tablet { height: 6rem; flex: 1; }
.hero-dim-mobile { height: 7.5rem; width: 5.5rem; }
.hero-dim-row { display: flex; gap: 0.75rem; align-items: flex-end; }
.hero-dim-safe {
    border: 2px solid var(--brand-green, #98bca8);
    background: rgba(152, 188, 168, 0.15);
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    font-size: 0.75rem;
}
.hero-dim-label {
    position: absolute;
    top: 0.35rem;
    left: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}
.staff-resource-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.staff-resource-item {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-soft);
}

/* Accessibility panel */
.a11y-panel {
    position: fixed;
    right: 1rem;
    bottom: 5.5rem;
    z-index: 80;
    width: min(18rem, calc(100vw - 2rem));
    background: var(--bg-surface);
    border: 2px solid var(--border);
    border-radius: 12px;
    padding: 0.85rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.a11y-panel[hidden] { display: none !important; }
html.a11y-text-lg { font-size: 112.5%; }
html.a11y-text-xl { font-size: 125%; }
html.a11y-contrast {
    --text: #000 !important;
    --bg-page: #fff !important;
    --border: #000 !important;
}
html.a11y-reduce-motion *,
html.a11y-reduce-motion *::before,
html.a11y-reduce-motion *::after {
    animation: none !important;
    transition: none !important;
}

/* —— Mobile/tablet: disable hover lift/transform animations —— */
@media (hover: none), (pointer: coarse), (max-aspect-ratio: 11/10) {
  .product-card:hover,
  .category-card:hover,
  .home-link-card:hover,
  .wishlist-btn:hover,
  .qty-btn:hover,
  .arrow:hover,
  .filter-chip:hover,
  .btn:hover,
  a:hover {
    transform: none !important;
    box-shadow: inherit;
  }
  .product-card:hover .product-img-primary,
  .product-card:hover .product-img-alt {
    opacity: inherit;
  }
  .product-card:hover,
  .category-card:hover {
    z-index: auto;
  }
}

/* Content page filters (news/events) — same collapse pattern as shop */
.content-page-filters {
  margin: 0 0 1rem;
  padding: 0.65rem 0.85rem;
  border: 2px solid var(--border);
  border-radius: 14px;
  background: var(--bg-surface);
}
.content-page-filters .shop-filters-head {
  margin-bottom: 0;
}
.content-page-filters .content-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: flex-end;
}
.cart-line-media-flame {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  background: var(--bg-muted, #f0f2f5);
  border-radius: 10px;
  min-width: 4rem;
  min-height: 4rem;
}
.loyalty-buy-form .flame-buy-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}
/* Account menu above page chrome (including POS) */
.header,
.header .icon-wrapper,
.header .profile-menu {
  position: relative;
  z-index: 5000;
}
.profile-menu-panel {
  z-index: 5100 !important;
}

/* —— In-app confirm dialog —— */
.pi-confirm {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.pi-confirm[hidden] {
  display: none !important;
}
.pi-confirm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}
.pi-confirm-panel {
  position: relative;
  z-index: 1;
  width: min(100%, 24rem);
  background: var(--bg, #fff);
  color: var(--text, #111);
  border-radius: 14px;
  padding: 1.15rem 1.25rem 1.1rem;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22);
  border: 1px solid var(--border-soft, #e5e5e5);
}
.pi-confirm-title {
  margin: 0 0 0.45rem;
  font-size: 1.15rem;
}
.pi-confirm-message {
  margin: 0 0 1rem;
  color: var(--text-muted, #555);
  line-height: 1.45;
  font-size: 0.95rem;
}
.pi-confirm-actions {
  display: flex;
  gap: 0.55rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}
body.pi-confirm-open {
  overflow: hidden;
}

/* —— Staff portal chrome —— */
body.staff-theme .cart-link,
body.staff-theme .header-loyalty-link,
body.staff-theme .header-notifications,
body.staff-theme .brand-name,
body.staff-theme .bottom-nav,
body.staff-theme .bottom-nav-fill,
body.staff-theme .site-footer .footer-grid,
body.staff-theme .site-footer .footer-social,
body.staff-theme .site-footer .footer-climate-badge,
body.staff-theme .site-footer .footer-payments,
body.staff-theme .cookie-banner {
  display: none !important;
}

/* Desktop/tablet: no blue storefront nav strip; staff tabs + settings search */
@media (min-width: 721px) {
  body.staff-theme .nav-bar {
    display: none !important;
  }
  body.staff-theme .staff-nav-tabs.staff-tabs {
    display: flex !important;
    flex-wrap: wrap;
  }
  body.staff-theme .home-searchbar-wrapper {
    display: flex !important;
    flex: 1 1 auto;
    max-width: 28rem;
  }
  body.staff-theme .staff-nav-search-wrap {
    display: none !important;
  }
}

body.staff-theme .site-footer .footer-bottom {
  padding: 0.75rem 0 1rem;
  gap: 0.35rem;
}
body.staff-theme .header-top {
  justify-content: space-between;
}

/* Staff settings search results (header) */
.staff-settings-results {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 0.35rem);
  z-index: 5200;
  background: var(--bg, #fff);
  border: 1px solid var(--border-soft, #ddd);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
  max-height: min(60vh, 22rem);
  overflow: auto;
  padding: 0.35rem;
}
.staff-settings-results[hidden] {
  display: none !important;
}
.staff-settings-hit {
  display: block;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  border: 1px solid transparent;
}
.staff-settings-hit:hover,
.staff-settings-hit.is-active {
  background: var(--bg-muted, #f4f4f4);
  border-color: var(--border-soft, #e5e5e5);
}
.staff-settings-hit-title {
  font-family: "Ubuntu Medium";
  font-size: 0.92rem;
}
.staff-settings-hit-path {
  font-size: 0.78rem;
  color: var(--text-muted, #666);
}

/*
  Mobile staff: same hamburger as the storefront (right slide-out, dark drawer).
  Only change: hide the horizontal staff tab strip; links live in the drawer.
*/
@media (max-width: 720px) {
  body.staff-theme .staff-nav-tabs.staff-tabs {
    display: none !important;
  }
  body.staff-theme .home-searchbar-wrapper {
    display: none !important;
  }
  body.staff-theme .staff-nav-search-wrap {
    display: block !important;
  }
  body.staff-theme .hamburger {
    display: flex !important;
  }
  /* Do not override drawer position/color — reuse normal .nav-bar mobile styles */
  body.staff-theme .nav-bar .nav-bar-desktop {
    display: none !important; /* hide Shop/Lab storefront links on staff */
  }
}

/* Footer Info column — one centered list on phones, two columns from tablet up */
.footer-col-info {
  text-align: center;
}
.footer-col-info .footer-heading {
  text-align: center;
}
.footer-col-info .footer-links {
  display: inline-block;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 700px) {
  .footer-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.45fr) minmax(0, 1fr);
  }
  .footer-col.footer-col-info {
    max-width: 26rem;
    width: 100%;
  }
  .footer-col-info .footer-links,
  .footer-layout-centered .footer-col-info .footer-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1.5rem;
    row-gap: 0.15rem;
    width: 100%;
    text-align: center;
    justify-items: center;
    align-items: start;
  }
  .footer-col-info .footer-links li {
    margin: 0.2rem 0;
  }
}

/* Footer mobile — tighter bottom stack */
@media (max-aspect-ratio: 18/25), (max-width: 480px) {
  .footer-bottom {
    gap: 0.45rem;
    padding-top: 0.75rem;
    padding-bottom: 0.65rem;
  }
  .footer-bottom .footer-social {
    margin: 0;
    gap: 0.45rem;
  }
  .footer-bottom .footer-climate-badge {
    margin: 0.15rem 0;
  }
  .footer-bottom .footer-copy-wrap {
    margin: 0;
    padding-top: 0.15rem;
  }
}