/*
 * UIUX-008R — customer surfaces.
 *
 * Route and surface compositions that sit on top of the shared convergence
 * layer (uiux-008r-convergence.css, which owns the tokens used here):
 * filters, category directory, contextual cross-discovery, cards, PDP
 * supporting chapters and Connect. Presentation only; no behavior.
 */

/* ---------------------------------------------------------------------
 * F. Archive filters (owner amendment: filter UX architecture)
 *    >=900px with scripting: a compact horizontal toolbar of rounded facet
 *    triggers above the results; each opens an anchored multi-select
 *    popover. The permanent sidebar column is gone and its width goes to
 *    the product grid. <900px: the Filter & sort sheet, denser.
 * ------------------------------------------------------------------- */
.archive-filters__popover-actions {
    display: none;
}

@media (min-width: 900px) {
    html.js body:not(.aanya-admin) .archive-layout:has(> .archive-filters--toolbar) {
        display: block;
    }

    html.js body:not(.aanya-admin) .archive-layout:has(> .archive-filters--toolbar) > .archive-layout__results {
        width: 100%;
        min-width: 0;
    }

    html.js body:not(.aanya-admin) .archive-filters--toolbar {
        position: relative;
        top: auto;
        z-index: 40;
        margin: 0 0 .75rem;
        padding: 0;
        border: 0;
        background: transparent;
    }

    /* The heading still names the landmark; it takes no space here. */
    html.js body:not(.aanya-admin) .archive-filters--toolbar .archive-filters__sidebar-header {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        border: 0;
    }

    /* The toolbar is layout, not a card: triggers carry their own surfaces. */
    html.js body:not(.aanya-admin) .archive-filters--toolbar :is(.archive-filters__panel, form),
    html.js body:not(.aanya-admin) .archive-layout:has(> .archive-filters--toolbar) .archive-filters__toolbar {
        border: 0;
        background: transparent !important;
        box-shadow: none;
    }

    html.js body:not(.aanya-admin) .archive-filters--toolbar .archive-filters__sidebar-header h2 {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    html.js body:not(.aanya-admin) .archive-filters--toolbar .archive-filters__panel {
        position: static;
        display: block;
        margin: 0;
        overflow: visible;
    }

    html.js body:not(.aanya-admin) .archive-filters--toolbar form {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .5rem;
        margin: 0;
    }

    html.js body:not(.aanya-admin) .archive-filters--toolbar .archive-filters__group {
        position: relative;
        margin: 0;
        padding: 0;
        border: 0;
    }

    html.js body:not(.aanya-admin) .archive-filters--toolbar :is(.archive-filters__group > summary, .archive-filters__overflow-toggle) {
        display: inline-flex;
        min-height: 40px;
        align-items: center;
        gap: .4rem;
        padding: 0 .85rem 0 1rem;
        border: 1px solid var(--u8r-rule-strong);
        border-radius: 999px;
        background: #fff;
        color: var(--u8r-ink);
        font-size: .875rem;
        font-weight: 640;
        line-height: 1;
        list-style: none;
        white-space: nowrap;
        cursor: pointer;
        transition: border-color .16s ease, background-color .16s ease;
    }

    html.js body:not(.aanya-admin) .archive-filters--toolbar .archive-filters__group > summary::-webkit-details-marker {
        display: none;
    }

    html.js body:not(.aanya-admin) .archive-filters--toolbar :is(.archive-filters__group > summary, .archive-filters__overflow-toggle)::after {
        content: "";
        width: .42rem;
        height: .42rem;
        margin: -.2rem 0 0 .15rem;
        border-right: 1.6px solid currentColor;
        border-bottom: 1.6px solid currentColor;
        transform: rotate(45deg);
        transition: transform .16s ease;
    }

    html.js body:not(.aanya-admin) .archive-filters--toolbar :is(.archive-filters__group[open] > summary, .archive-filters__overflow.is-open > .archive-filters__overflow-toggle) {
        border-color: var(--u8r-ink);
        background: var(--u8r-surface-muted);
    }

    html.js body:not(.aanya-admin) .archive-filters--toolbar :is(.archive-filters__group[open] > summary, .archive-filters__overflow.is-open > .archive-filters__overflow-toggle)::after {
        margin-top: .2rem;
        transform: rotate(-135deg);
    }

    html.js body:not(.aanya-admin) .archive-filters--toolbar :is(.archive-filters__group > summary, .archive-filters__overflow-toggle):hover {
        border-color: var(--u8r-ink);
    }

    html.js body:not(.aanya-admin) .archive-filters--toolbar :is(.archive-filters__group > summary, .archive-filters__overflow-toggle):focus-visible {
        outline: 3px solid var(--u8r-focus);
        outline-offset: 2px;
    }

    /* Active facet: a compact "Brand · 2", marked by weight and edge only. */
    html.js body:not(.aanya-admin) .archive-filters--toolbar .archive-filters__group > summary:has(.archive-filters__group-count) {
        border-color: var(--u8r-ink);
        font-weight: 740;
    }

    html.js body:not(.aanya-admin) .archive-filters--toolbar .archive-filters__group-count {
        display: inline;
        min-width: 0;
        padding: 0;
        border-radius: 0;
        background: transparent;
        color: var(--u8r-ink);
        font-size: inherit;
        font-weight: 740;
        font-variant-numeric: tabular-nums;
    }

    /* Anchored popover. */
    html.js body:not(.aanya-admin) .archive-filters--toolbar .archive-filters__group > .archive-filters__popover {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        z-index: 60;
        display: flex;
        box-sizing: border-box;
        width: min(20rem, calc(100vw - 2rem));
        flex-direction: column;
        padding: .6rem;
        border: 1px solid var(--u8r-rule);
        border-radius: var(--u8r-radius-card);
        background: #fff;
        box-shadow: 0 18px 44px rgba(24, 26, 25, .16);
    }

    html.js body:not(.aanya-admin) .archive-filters--toolbar .archive-filters__group.is-flipped > .archive-filters__popover {
        right: 0;
        left: auto;
    }

    html.js body:not(.aanya-admin) .archive-filters--toolbar .archive-filters__popover fieldset {
        display: block;
        max-height: min(18rem, 50vh);
        margin: 0;
        padding: 0 .1rem;
        border: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    html.js body:not(.aanya-admin) .archive-filters--toolbar .archive-filters__facet-search {
        box-sizing: border-box;
        width: 100%;
        min-height: 38px;
        margin: 0 0 .4rem;
        padding: .45rem .75rem;
        border: 1px solid var(--u8r-rule-strong);
        border-radius: 10px;
        background: #fff;
        color: var(--u8r-ink);
        font: inherit;
        font-size: .875rem;
    }

    html.js body:not(.aanya-admin) .archive-filters--toolbar .archive-filters__popover .archive-filters__option {
        display: grid;
        grid-template-columns: 1.1rem minmax(0, 1fr);
        align-items: center;
        gap: .65rem;
        min-height: 40px;
        margin: 0;
        padding: .3rem .5rem;
        border-radius: 10px;
        background: transparent;
        color: var(--u8r-ink);
        font-size: .875rem;
    }

    html.js body:not(.aanya-admin) .archive-filters--toolbar .archive-filters__popover .archive-filters__option[hidden] {
        display: none;
    }

    html.js body:not(.aanya-admin) .archive-filters--toolbar .archive-filters__popover .archive-filters__option:hover {
        background: var(--u8r-surface-muted);
    }

    html.js body:not(.aanya-admin) .archive-filters--toolbar .archive-filters__more > summary {
        min-height: 36px;
        padding: .35rem .5rem;
        color: var(--u8r-ink);
        font-size: .8125rem;
        font-weight: 700;
        text-decoration: underline;
        text-underline-offset: .2em;
        cursor: pointer;
    }

    html.js body:not(.aanya-admin) .archive-filters--toolbar .archive-filters__more.is-expanded > summary {
        display: none;
    }

    html.js body:not(.aanya-admin) .archive-filters--toolbar .archive-filters__popover-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
        margin-top: .5rem;
        padding: .55rem .15rem 0;
        border-top: 1px solid var(--u8r-rule);
    }

    html.js body:not(.aanya-admin) .archive-filters--toolbar .archive-filters__facet-clear {
        min-height: 38px;
        padding: 0 .35rem;
        border: 0;
        background: transparent;
        color: var(--u8r-ink);
        font: inherit;
        font-size: .8125rem;
        font-weight: 650;
        text-decoration: underline;
        text-underline-offset: .2em;
        cursor: pointer;
    }

    html.js body:not(.aanya-admin) .archive-filters--toolbar .archive-filters__facet-apply {
        min-height: 38px;
        padding: .45rem 1.1rem;
        font-size: .8125rem;
    }

    html.js body:not(.aanya-admin) .archive-filters--toolbar :is(.archive-filters__facet-clear, .archive-filters__facet-apply):focus-visible {
        outline: 3px solid var(--u8r-focus);
        outline-offset: 2px;
    }

    /* The sheet's global actions belong to the sheet, not the toolbar. */
    html.js body:not(.aanya-admin) .archive-filters--toolbar > .archive-filters__panel .archive-filters__actions {
        display: none;
    }

    /* More filters: one panel listing the remaining facets as open groups. */
    html.js body:not(.aanya-admin) .archive-filters--toolbar .archive-filters__overflow {
        position: relative;
    }

    html.js body:not(.aanya-admin) .archive-filters--toolbar .archive-filters__overflow-panel {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        z-index: 60;
        display: none;
        width: min(36rem, calc(100vw - 2rem));
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .75rem;
        padding: .75rem;
        border: 1px solid var(--u8r-rule);
        border-radius: var(--u8r-radius-card);
        background: #fff;
        box-shadow: 0 18px 44px rgba(24, 26, 25, .16);
    }

    html.js body:not(.aanya-admin) .archive-filters--toolbar .archive-filters__overflow.is-open > .archive-filters__overflow-panel {
        display: grid;
    }

    html.js body:not(.aanya-admin) .archive-filters--toolbar .archive-filters__overflow-panel .archive-filters__group > summary {
        min-height: 32px;
        padding: 0 .25rem;
        border: 0;
        background: transparent;
        font-size: .75rem;
        font-weight: 760;
        letter-spacing: .06em;
        text-transform: uppercase;
        pointer-events: none;
    }

    html.js body:not(.aanya-admin) .archive-filters--toolbar .archive-filters__overflow-panel .archive-filters__group > summary::after {
        content: none;
    }

    html.js body:not(.aanya-admin) .archive-filters--toolbar .archive-filters__overflow-panel .archive-filters__popover {
        position: static;
        width: auto;
        padding: 0;
        border: 0;
        box-shadow: none;
    }

    /* Results head: count and Sort stay one semantically separate row. */
    html.js body:not(.aanya-admin) .archive-layout:has(> .archive-filters--toolbar) .archive-filters__toolbar {
        min-height: 44px;
        margin: 0 0 1rem;
        padding: 0 0 .75rem;
        border-bottom: 1px solid var(--u8r-rule);
    }

    /* Reclaimed width goes to the product grid. */
    html.js body:not(.aanya-admin) .archive-layout:has(> .archive-filters--toolbar) :is(.product-archive__grid, .entity-card-grid) {
        grid-template-columns: repeat(auto-fill, minmax(15.25rem, 1fr));
    }
}

/* Active filters: concise removable neutral chips, only when active. */
body:not(.aanya-admin) .archive-filters__active {
    gap: .4rem;
    margin: 0 0 1rem;
}

body:not(.aanya-admin) .archive-filters__active a {
    min-height: 34px;
    padding: .3rem .7rem;
    border: 1px solid var(--u8r-rule-strong);
    border-radius: 999px;
    background: #fff;
    color: var(--u8r-ink);
    font-size: .8125rem;
    font-weight: 640;
}

body:not(.aanya-admin) .archive-filters__active a:last-child {
    border-color: transparent;
    background: transparent;
    font-weight: 700;
}

body:not(.aanya-admin) .archive-filters__active a:focus-visible {
    outline: 3px solid var(--u8r-focus);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------
 * UIUX-009 canonical sort control (owner amendment: sort control geometry)
 *   Every customer sort renders `Sort [ Default ˅ ]`: a small field label
 *   outside a compact rounded trigger in the facet-pill language. The
 *   trigger stays a native <select> (native keyboard / assistive-tech
 *   selection); appearance:none removes the engine arrow, and exactly one
 *   decorative chevron (.aanya-sort-select__chevron) shares the select's
 *   grid cell: 16px, centred by align-self, inset 14px from the edge.
 *   Width is the select's own intrinsic size - Chromium, Firefox and WebKit
 *   all size a select to its widest option - so the trigger never resizes
 *   with the selection and is never wider than its longest label needs.
 *   Nothing may clamp it with a max-width (that is what clipped it before).
 *   The site-wide focus utility forces outline-color: var(--color-focus),
 *   so the control re-points that token to charcoal rather than forcing it.
 * ------------------------------------------------------------------- */
body:not(.aanya-admin) .aanya-sort-select {
    --color-focus: #1f2328;
    --aanya-sort-height: 40px;
    --aanya-sort-chevron: 16px;
    --aanya-sort-inset: 14px;
    --aanya-sort-pad-start: 1rem;
    position: relative;
    display: inline-grid;
    flex: 0 0 auto;
    align-items: center;
    min-width: 5.5rem;
    max-width: 100%;
    color: var(--u8r-ink);
    vertical-align: middle;
}

body:not(.aanya-admin) .aanya-sort-select > * {
    grid-area: 1 / 1;
}

body:not(.aanya-admin) .aanya-sort-select > select {
    appearance: none;
    -webkit-appearance: none;
    flex: none;
    width: auto;
    min-width: 0;
    max-width: none;
    height: var(--aanya-sort-height);
    min-height: var(--aanya-sort-height);
    margin: 0;
    padding: 0 calc(var(--aanya-sort-inset) + var(--aanya-sort-chevron) + .5rem) 0 var(--aanya-sort-pad-start);
    border: 1px solid var(--u8r-rule-strong);
    border-radius: 999px;
    background-color: #fff;
    background-image: none;
    box-shadow: none;
    color: inherit;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 640;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .16s ease, background-color .16s ease;
}

body:not(.aanya-admin) .aanya-sort-select__chevron {
    justify-self: end;
    align-self: center;
    width: var(--aanya-sort-chevron);
    height: var(--aanya-sort-chevron);
    margin-inline-end: var(--aanya-sort-inset);
    color: inherit;
    pointer-events: none;
    transition: transform .16s ease;
}

body:not(.aanya-admin) .aanya-sort-select > select:hover,
body:not(.aanya-admin) .aanya-sort-select > select:focus {
    border-color: var(--u8r-ink);
}

body:not(.aanya-admin) .aanya-sort-select > select:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
}

/* Open (where the engine exposes :open; :is() keeps the rule valid elsewhere). */
body:not(.aanya-admin) .aanya-sort-select > select:is(:open) {
    border-color: var(--u8r-ink);
    background-color: var(--u8r-surface-muted);
}

body:not(.aanya-admin) .aanya-sort-select:has(> select:is(:open)) > .aanya-sort-select__chevron {
    transform: rotate(180deg);
}

body:not(.aanya-admin) .aanya-sort-select > select:disabled {
    border-color: var(--u8r-rule);
    background-color: var(--u8r-surface-muted);
    cursor: not-allowed;
}

body:not(.aanya-admin) .aanya-sort-select:has(> select:disabled) {
    color: var(--u8r-muted);
}

/* The option list: neutral, never a green selected row. */
body:not(.aanya-admin) .aanya-sort-select option {
    background-color: #fff;
    color: var(--u8r-ink);
    font-weight: 500;
}

body:not(.aanya-admin) .aanya-sort-select option:checked {
    background-color: var(--u8r-surface-muted);
    font-weight: 700;
}

/* `Sort` sits outside the trigger as a small field label on one axis. */
body:not(.aanya-admin) :is(.archive-filters__sort-form, .search-page__sort) {
    flex-shrink: 0;
    align-items: center;
    gap: .5rem;
}

body:not(.aanya-admin) :is(.archive-filters__sort-form, .search-page__sort) > label {
    position: static;
    flex: 0 0 auto;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    color: var(--u8r-muted);
    font-size: .8125rem;
    font-weight: 620;
    line-height: 1;
    white-space: nowrap;
}

/* Filter & sort sheet: Sort is a native radio group (<900px only). At
   >=900px it is not displayed but still submits the current sort. */
body:not(.aanya-admin) .archive-filters__sort-group {
    --color-focus: #1f2328;
    margin: 0;
    padding: .35rem 0 .5rem;
    border: 0;
    border-radius: 0;
}

body:not(.aanya-admin) .archive-filters__sort-group > legend {
    position: static;
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: .75rem 0 .35rem;
    overflow: visible;
    clip: auto;
    color: var(--u8r-ink);
    font-size: .9375rem;
    font-weight: 720;
    line-height: 1.2;
    white-space: normal;
}

/* Its own neutral row grammar (not .archive-filters__option, whose checked
   state carries a legacy accent edge): 44px rows, weight marks the choice. */
body:not(.aanya-admin) .archive-filters__sort-group .archive-filters__sort-option {
    display: grid;
    grid-template-columns: 1.15rem minmax(0, 1fr);
    align-items: center;
    gap: .75rem;
    min-height: 44px;
    margin: 0;
    padding: 0 .25rem;
    border-radius: 10px;
    color: var(--u8r-ink);
    font-size: .9rem;
    cursor: pointer;
}

body:not(.aanya-admin) .archive-filters__sort-group .archive-filters__sort-option:hover {
    background: var(--u8r-surface-muted);
}

body:not(.aanya-admin) .archive-filters__sort-group .archive-filters__sort-option:has(input:checked) {
    font-weight: 700;
}

body:not(.aanya-admin) .archive-filters--toolbar .archive-filters__sort-group + .archive-filters__group {
    border-top: 1px solid var(--u8r-rule);
}

body:not(.aanya-admin) .archive-filters__sort-group input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    display: grid;
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
    border: 1.5px solid #7b847f;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
}

body:not(.aanya-admin) .archive-filters__sort-group input[type="radio"]:checked {
    border-color: var(--u8r-charcoal);
    background: var(--u8r-charcoal);
    box-shadow: inset 0 0 0 .22rem #fff;
}

body:not(.aanya-admin) .archive-filters__sort-group input[type="radio"]:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
}

@media (min-width: 900px) {
    body:not(.aanya-admin) .archive-filters__sort-group {
        display: none;
    }
}

@media (max-width: 899px) {
    /* Search results: the label stays beside its trigger, not across the row. */
    body:not(.aanya-admin) .search-page__sort {
        justify-content: flex-start;
    }
}

/* Filter & sort sheet (<900px): consistent columns, tighter rhythm. */
@media (max-width: 899px) {
    body:not(.aanya-admin) .archive-filters--toolbar .archive-filters__toggle {
        min-height: 44px;
        gap: .45rem;
        padding: .5rem 1rem;
        border: 1px solid var(--u8r-rule-strong);
        border-radius: 999px;
        background: #fff;
        color: var(--u8r-ink);
        font-size: .875rem;
        font-weight: 700;
    }

    body:not(.aanya-admin) .archive-filters--toolbar .archive-filters__toggle-count {
        display: inline-grid;
        min-width: 1.35rem;
        height: 1.35rem;
        place-items: center;
        border-radius: 999px;
        background: var(--u8r-charcoal);
        color: #fff;
        font-size: .72rem;
    }

    body:not(.aanya-admin) .archive-filters--toolbar .archive-filters__overflow-toggle {
        display: none;
    }

    body:not(.aanya-admin) .archive-filters--toolbar :is(.archive-filters__overflow, .archive-filters__overflow-panel, .archive-filters__popover) {
        display: contents;
    }

    body:not(.aanya-admin) .archive-filters--toolbar .archive-filters__sheet-header {
        padding: .85rem 1rem;
        border-bottom: 1px solid var(--u8r-rule);
    }

    body:not(.aanya-admin) .archive-filters--toolbar .archive-filters__sheet-header h2 {
        margin: 0;
        color: var(--u8r-ink);
        font-size: 1.05rem;
        font-weight: 740;
    }

    body:not(.aanya-admin) .archive-filters--toolbar .archive-filters__close {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
        border: 1px solid var(--u8r-rule);
        border-radius: 50%;
        background: #fff;
        color: var(--u8r-ink);
        font-size: 1.35rem;
    }

    body:not(.aanya-admin) .archive-filters--toolbar .archive-filters__panel form {
        padding: .25rem 1rem 0;
    }

    body:not(.aanya-admin) .archive-filters--toolbar .archive-filters__group {
        margin: 0;
        padding: .35rem 0 .5rem;
        border-top: 1px solid var(--u8r-rule);
    }

    body:not(.aanya-admin) .archive-filters--toolbar .archive-filters__group:first-of-type {
        border-top: 0;
    }

    body:not(.aanya-admin) .archive-filters--toolbar .archive-filters__group > summary {
        display: flex;
        min-height: 44px;
        align-items: center;
        justify-content: space-between;
        padding: 0;
        color: var(--u8r-ink);
        font-size: .9375rem;
        font-weight: 720;
        cursor: pointer;
    }

    body:not(.aanya-admin) .archive-filters--toolbar .archive-filters__group-count {
        margin-inline: .35rem auto;
        padding: 0;
        background: transparent;
        color: var(--u8r-muted);
        font-weight: 700;
    }

    body:not(.aanya-admin) .archive-filters--toolbar fieldset {
        display: block;
        margin: 0;
        padding: 0;
        border: 0;
    }

    body:not(.aanya-admin) .archive-filters--toolbar fieldset .archive-filters__option {
        display: grid;
        grid-template-columns: 1.15rem minmax(0, 1fr);
        align-items: center;
        gap: .75rem;
        min-height: 44px;
        margin: 0;
        padding: 0 .25rem;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: var(--u8r-ink);
        font-size: .9rem;
    }

    body:not(.aanya-admin) .archive-filters--toolbar fieldset .archive-filters__option > span {
        display: flex;
        min-width: 0;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
    }

    body:not(.aanya-admin) .archive-filters--toolbar .archive-filters__more > summary {
        display: inline-flex;
        min-height: 44px;
        align-items: center;
        padding: 0 .25rem;
        color: var(--u8r-ink);
        font-size: .8125rem;
        font-weight: 700;
        text-decoration: underline;
        text-underline-offset: .2em;
        list-style: none;
        cursor: pointer;
    }

    body:not(.aanya-admin) .archive-filters--toolbar .archive-filters__actions {
        grid-template-columns: 1fr 1.4fr;
        gap: .6rem;
        margin: .5rem -1rem 0;
        padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--u8r-rule);
        background: #fff;
    }

    body:not(.aanya-admin) .archive-filters--toolbar .archive-filters__actions .archive-filters__clear {
        order: -1;
    }

    body:not(.aanya-admin) .archive-filters--toolbar .archive-filters__actions .btn {
        min-height: 46px;
    }
}

/* Shared option grammar (sheet + popover + no-JS form). */
body:not(.aanya-admin) .archive-filters--toolbar input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
    border: 1.5px solid #7b847f;
    border-radius: 5px;
}

body:not(.aanya-admin) .archive-filters--toolbar input[type="checkbox"]:checked {
    border-color: var(--u8r-charcoal);
    background: var(--u8r-charcoal);
}

body:not(.aanya-admin) .archive-filters--toolbar input[type="checkbox"]:focus-visible {
    outline: 3px solid var(--u8r-focus);
    outline-offset: 2px;
}

body:not(.aanya-admin) .archive-filters--toolbar .archive-filters__option--unavailable {
    color: #8b928e;
    cursor: not-allowed;
}

body:not(.aanya-admin) .archive-filters--toolbar .archive-filters__option--unavailable input[type="checkbox"] {
    border-color: #c6ccc8;
    background: #f4f5f5;
}

@media (prefers-reduced-motion: reduce) {
    html.js body:not(.aanya-admin) .archive-filters--toolbar :is(.archive-filters__group > summary, .archive-filters__overflow-toggle),
    html.js body:not(.aanya-admin) .archive-filters--toolbar :is(.archive-filters__group > summary, .archive-filters__overflow-toggle)::after {
        transition: none;
    }
}

/* ---------------------------------------------------------------------
 * C. Catalogue density (owner amendment, blocking)
 *    Compact identity (title + count on one line, description beneath),
 *    facets and Sort in one toolbar row, products immediately after, and
 *    one canonical gap after the results. Applies to every surface built
 *    on product-discovery-header / archive-layout.
 * ------------------------------------------------------------------- */
body:not(.aanya-admin) .product-discovery-header {
    margin: 0 0 1rem;
    padding: 0;
    border: 0;
}

/* One identity row: [icon] H1 description ........ count */
body:not(.aanya-admin) .product-discovery-header__identity {
    display: flex;
    /* An older mobile rule turned this into a column, which made the
       24rem flex-basis below a 384px height. */
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .9rem;
    margin: 0;
    padding: 0;
    border: 0;
}

body:not(.aanya-admin) .product-discovery-header__identity > div {
    display: flex;
    flex-direction: row;
    min-width: 0;
    flex: 1 1 24rem;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .2rem .9rem;
}

body:not(.aanya-admin) .product-discovery-header__icon {
    display: inline-grid;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 50%;
    background: var(--discovery-green, #98d8a1);
    color: var(--u8r-ink);
}

body:not(.aanya-admin) .product-discovery-header__icon[data-accent="ochre"] { background: var(--discovery-yellow, #f4d45a); }
body:not(.aanya-admin) .product-discovery-header__icon[data-accent="terracotta"] { background: var(--discovery-coral, #ffa58d); }
body:not(.aanya-admin) .product-discovery-header__icon[data-accent="violet"] { background: var(--discovery-lilac, #c7b2ef); }
body:not(.aanya-admin) .product-discovery-header__icon[data-accent="blue"] { background: var(--discovery-cyan, #72d5ed); }
body:not(.aanya-admin) .product-discovery-header__icon[data-accent="teal"] { background: var(--discovery-aqua, #7ddace); }

body:not(.aanya-admin) .product-discovery-header__icon :is(svg, .category-illustration) {
    width: 24px;
    height: 24px;
}

body:not(.aanya-admin) .product-discovery-header h1 {
    margin: 0;
    font-size: clamp(1.75rem, 2.6vw, 2.35rem);
    line-height: 1.1;
}

body:not(.aanya-admin) .product-discovery-header__description {
    min-width: 0;
    max-width: 60ch;
    margin: 0;
    color: var(--u8r-muted);
    font-size: .9375rem;
    line-height: 1.45;
}

body:not(.aanya-admin) .product-discovery-header__count {
    flex: 0 0 auto;
    margin: 0 0 0 auto;
    color: var(--u8r-muted);
    font-size: .9375rem;
    font-weight: 620;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

body:not(.aanya-admin) :is(.product-archive, .product-category-archive) .breadcrumbs,
body:not(.aanya-admin) :is(.product-archive, .product-category-archive) nav[aria-label="Breadcrumb"] {
    margin-block: .75rem .5rem;
}

@media (min-width: 900px) {
    /* Facets left, Sort right, one row; the results wrapper yields its
       children to the same grid so nothing is re-ordered in the DOM. */
    html.js body:not(.aanya-admin) .archive-layout:has(> .archive-filters--toolbar) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        column-gap: 1rem;
        /* The legacy sidebar layout's 2rem row gap stacked with the grid
           margin into a blank band above the first product row. */
        row-gap: 0;
    }

    html.js body:not(.aanya-admin) .archive-layout:has(> .archive-filters--toolbar) > .archive-layout__results {
        display: contents;
    }

    html.js body:not(.aanya-admin) .archive-layout:has(> .archive-filters--toolbar) > .archive-filters--toolbar {
        grid-column: 1;
        grid-row: 1;
        margin: 0;
    }

    html.js body:not(.aanya-admin) .archive-layout:has(> .archive-filters--toolbar) > .archive-layout__results > * {
        grid-column: 1 / -1;
    }

    html.js body:not(.aanya-admin) .archive-layout:has(> .archive-filters--toolbar) > .archive-layout__results > .archive-filters__toolbar {
        grid-column: 2;
        grid-row: 1;
        /* UIUX-009: when facets wrap, Sort stays on the first facet row. */
        align-self: start;
        min-height: 0;
        margin: 0;
        padding: 0;
        border: 0;
    }

    /* The heading carries the live, focusable count; this duplicate stays
       available to assistive technology and reappears if focused. */
    html.js body:not(.aanya-admin) .archive-layout:has(> .archive-filters--toolbar) .archive-filters__toolbar .archive-filters__result-count:not(:focus) {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    /* UIUX-009: no max-width clamp on Sort - the canonical control sizes to
       its widest option (a 11rem/9rem clamp clipped "Alphabetical A–Z"). */

    html.js body:not(.aanya-admin) .archive-layout:has(> .archive-filters--toolbar) > .archive-layout__results > .archive-filters__active {
        margin: .75rem 0 0;
    }

    html.js body:not(.aanya-admin) .archive-layout:has(> .archive-filters--toolbar) > .archive-layout__results > :is(.product-archive__grid, .entity-section) {
        margin: 1.25rem 0 0;
        padding: 0;
    }

    html.js body:not(.aanya-admin) .archive-layout:has(> .archive-filters--toolbar) > .archive-layout__results > .entity-section > .entity-card-grid {
        margin: 0;
    }
}

/* Narrower desktop: compact trigger metrics keep facets + Sort on one row. */
@media (min-width: 900px) and (max-width: 1279px) {
    html.js body:not(.aanya-admin) .archive-filters--toolbar form {
        gap: .35rem;
    }

    html.js body:not(.aanya-admin) .archive-filters--toolbar :is(.archive-filters__group > summary, .archive-filters__overflow-toggle) {
        min-height: 36px;
        padding: 0 .6rem 0 .75rem;
        font-size: .8125rem;
    }

    /* UIUX-009: Sort follows the compact trigger metrics (36px, 13px type). */
    html.js body:not(.aanya-admin) .archive-layout:has(> .archive-filters--toolbar) .aanya-sort-select {
        --aanya-sort-height: 36px;
        --aanya-sort-pad-start: .85rem;
    }

    html.js body:not(.aanya-admin) .archive-layout:has(> .archive-filters--toolbar) .aanya-sort-select > select {
        font-size: .8125rem;
    }
}

/* One canonical gap between results and what follows. */
body:not(.aanya-admin) :is(.product-archive, .product-category-archive, .health-goal-taxonomy, .search-page) {
    padding-bottom: clamp(2.5rem, 4vw, 3.5rem);
}

body:not(.aanya-admin) :is(.product-archive, .product-category-archive) :is(.archive-layout, .archive-layout__results, .entity-section) {
    margin-bottom: 0;
    padding-bottom: 0;
    min-height: 0;
}

body:not(.aanya-admin) :is(.product-archive, .product-category-archive) :is(.pagination, .navigation.pagination) {
    margin: 1.5rem 0 0;
}

/* The results toolbar is layout, not a band; its count duplicates the
   heading's live count, which stays focusable for filter feedback. */
body:not(.aanya-admin) :is(.product-archive, .product-category-archive) .archive-filters__toolbar {
    background: transparent;
}

body:not(.aanya-admin) :is(.product-archive, .product-category-archive):has(.product-discovery-header__count) .archive-filters__toolbar .archive-filters__result-count:not(:focus) {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@media (max-width: 899px) {
    body:not(.aanya-admin) .product-discovery-header h1 {
        font-size: clamp(1.6rem, 7vw, 2rem);
    }

    body:not(.aanya-admin) .product-discovery-header__identity > div {
        flex-basis: calc(100% - 60px);
    }

    body:not(.aanya-admin) .product-discovery-header:not(.product-discovery-header--identity) .product-discovery-header__identity > div {
        flex-basis: 100%;
    }

    body:not(.aanya-admin) .product-discovery-header__count {
        margin-left: 0;
    }

    body:not(.aanya-admin) :is(.product-archive, .product-category-archive) .archive-filters__toolbar {
        min-height: 0;
        margin: 0;
        padding: 0;
        border: 0;
    }

    body:not(.aanya-admin) :is(.product-archive, .product-category-archive) .archive-layout__results > :is(.product-archive__grid, .entity-section) {
        margin-top: .75rem;
        padding-top: 0;
    }

    body:not(.aanya-admin) .product-category-archive .archive-layout__results > .entity-section > .entity-card-grid {
        margin-top: 0;
    }
}

/* ---------------------------------------------------------------------
 * A. Authentication family (owner amendments: composition, ecosystem image
 *    panel, icon-only password visibility, form density, global-ready
 *    federated sign-in, complete auth-family convergence)
 *    One design system, task-specific compositions: Login/Register pair a
 *    form region with the ecosystem story (--signin/--register); short
 *    security and recovery tasks (--task: forgot/reset password, email
 *    verification, MFA, provider continuation) are one compact panel with
 *    a task heading and no promotional imagery. Shared primitives: fields,
 *    password visibility, provider buttons, status, related links.
 *    One clean form region + one image-led AANYA ecosystem story. Neither
 *    is framed inside the other and the outer shell carries no frame. The
 *    form comes first in DOM and on narrow screens; from 1024px the story
 *    takes the leading column. Heights are content-driven: no min-heights
 *    on the composition, the form or the story. Logical properties keep the
 *    layout structurally RTL-ready. Scoped to Login/Register; the shared
 *    auth-shell/auth-card used by checkout, MFA and recovery is untouched
 *    except for the shared password-visibility control (section A2).
 * ------------------------------------------------------------------- */
body:not(.aanya-admin) .auth-page:is(.auth-page--signin, .auth-page--register, .auth-page--task) {
    /* Content-driven: the legacy 70vh floor left an empty lower region. */
    min-height: 0;
    padding: clamp(1rem, 2.5vw, 2rem) 0 clamp(2rem, 4vw, 3rem);
}

body:not(.aanya-admin) .auth-page:is(.auth-page--signin, .auth-page--register, .auth-page--task) .auth-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    align-items: start;
    gap: 1.5rem;
    min-height: 0;
    width: 100%;
    max-width: var(--u8r-page-max, 90rem);
    margin-inline: auto;
    padding-block: 0;
    overflow: visible;
    /* The R2 reset frames every auth-shell with !important; these two pages
       are one open composition, not a box around a box. */
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* The one form region: layout only, never a framed card. */
body:not(.aanya-admin) .auth-page:is(.auth-page--signin, .auth-page--register, .auth-page--task) .auth-card {
    container: auth-form / inline-size;
    order: 0;
    width: 100%;
    max-width: 30rem;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body:not(.aanya-admin) .auth-page:is(.auth-page--signin, .auth-page--register, .auth-page--task) .auth-intro {
    display: block;
    order: 0;
    max-width: none;
    margin: 0 0 1.125rem;
    padding: 0;
    border: 0;
    background: transparent !important;
    box-shadow: none;
}

body:not(.aanya-admin) .auth-page:is(.auth-page--signin, .auth-page--register, .auth-page--task) .auth-intro h1 {
    max-width: none;
    margin: 0;
    color: var(--u8r-ink);
    font-size: clamp(1.625rem, 2.4vw, 2rem);
    font-weight: 740;
    line-height: 1.12;
    letter-spacing: -.025em;
}

body:not(.aanya-admin) .auth-page:is(.auth-page--signin, .auth-page--register, .auth-page--task) .auth-intro > p {
    max-width: none;
    margin: .3rem 0 0;
    color: var(--u8r-muted);
    font-size: .9375rem;
    line-height: 1.45;
}

/* Off-screen in the inline-start direction, so an RTL document never gains
   a scrollable overflow from the honeypot. */
body:not(.aanya-admin) .auth-page:is(.auth-page--signin, .auth-page--register, .auth-page--task) .auth-honeypot {
    left: auto;
    inset-inline-start: -10000px;
}

body:not(.aanya-admin) .auth-page:is(.auth-page--signin, .auth-page--register, .auth-page--task) .auth-status {
    margin: 0 0 .875rem;
}

/* The error summary receives programmatic focus for screen readers; only a
   keyboard-visible focus draws the ring. */
body:not(.aanya-admin) .auth-page:is(.auth-page--signin, .auth-page--register, .auth-page--task) .auth-status:focus {
    outline: none;
}

body:not(.aanya-admin) .auth-page:is(.auth-page--signin, .auth-page--register, .auth-page--task) .auth-status:focus-visible {
    outline: 2px solid var(--u8r-focus);
    outline-offset: 2px;
}

/* Form rhythm: 6px label -> field, 14px between groups, one system. */
body:not(.aanya-admin) .auth-page:is(.auth-page--signin, .auth-page--register, .auth-page--task) .auth-form {
    display: grid;
    gap: .875rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

body:not(.aanya-admin) .auth-page:is(.auth-page--signin, .auth-page--register, .auth-page--task) .auth-form[hidden] {
    display: none;
}

body:not(.aanya-admin) .auth-page:is(.auth-page--signin, .auth-page--register, .auth-page--task) .form-field {
    display: grid;
    align-content: start;
    gap: .375rem;
    min-width: 0;
    margin: 0;
}

body:not(.aanya-admin) .auth-page:is(.auth-page--signin, .auth-page--register, .auth-page--task) .form-field > label {
    color: var(--u8r-ink);
    font-size: .875rem;
    font-weight: 660;
    line-height: 1.3;
}

/* The shared customer input rule is (0,7,2); the compact auth geometry
   matches its :not() chain instead of reaching for !important. */
body:not(.aanya-admin) .auth-page:is(.auth-page--signin, .auth-page--register, .auth-page--task) .form-field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]) {
    width: 100%;
    height: auto;
    min-height: 44px;
    box-sizing: border-box;
    padding: .5rem .875rem;
    border: 1px solid var(--u8r-rule-strong);
    border-radius: 12px;
    background: #fff;
    color: var(--u8r-ink);
    font-size: 1rem;
    line-height: 1.5;
}

body:not(.aanya-admin) .auth-page:is(.auth-page--signin, .auth-page--register, .auth-page--task) .form-field input:focus-visible {
    border-color: var(--u8r-ink);
    outline: 3px solid var(--u8r-focus);
    outline-offset: 2px;
}

body:not(.aanya-admin) .auth-page:is(.auth-page--signin, .auth-page--register, .auth-page--task) .form-field input[aria-invalid="true"] {
    border-color: #9d433f;
}

/* Validation text appears with its field only when there is something to
   say; an empty message never reserves space. */
body:not(.aanya-admin) .auth-page:is(.auth-page--signin, .auth-page--register, .auth-page--task) .form-error:empty {
    display: none;
}

body:not(.aanya-admin) .auth-page:is(.auth-page--signin, .auth-page--register, .auth-page--task) .form-error:not(:empty) {
    min-height: 0;
    color: #9d433f;
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.35;
}

body:not(.aanya-admin) .auth-page:is(.auth-page--signin, .auth-page--register, .auth-page--task) .field-help {
    margin: 0;
    color: var(--u8r-muted);
    font-size: .8125rem;
    line-height: 1.35;
}

/* Register: Full name + Username share a row only when the form is wide
   enough for both labels to stay on one line. */
body:not(.aanya-admin) .auth-page--register .auth-form__pair {
    display: grid;
    align-items: start;
    gap: .875rem;
}

@container auth-form (min-width: 26rem) {
    body:not(.aanya-admin) .auth-page--register .auth-form__pair {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

body:not(.aanya-admin) .auth-page--register .auth-form__consents {
    display: grid;
    gap: .375rem;
}

body:not(.aanya-admin) .auth-page:is(.auth-page--signin, .auth-page--register, .auth-page--task) .auth-check {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    min-height: 24px;
    margin: 0;
    color: #2c322f;
    font-size: .875rem;
    line-height: 1.45;
}

body:not(.aanya-admin) .auth-page:is(.auth-page--signin, .auth-page--register, .auth-page--task) .auth-check input {
    flex: none;
    width: 1.05rem;
    height: 1.05rem;
    margin: .12rem 0 0;
    accent-color: var(--u8r-charcoal);
}

/* Login: Remember me + recovery share one compact row. */
body:not(.aanya-admin) .auth-page--signin .auth-form__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .25rem 1rem;
    margin-block: -.125rem;
}

body:not(.aanya-admin) .auth-page--signin .auth-form__recover,
body:not(.aanya-admin) .auth-page:is(.auth-page--signin, .auth-page--register, .auth-page--task) .auth-related a {
    color: var(--u8r-ink);
    font-size: .875rem;
    font-weight: 660;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
}

body:not(.aanya-admin) .auth-page:is(.auth-page--signin, .auth-page--register, .auth-page--task) .auth-submit {
    width: 100%;
    min-height: 46px;
    justify-content: center;
    margin-top: .125rem;
    font-size: 1rem;
}

body:not(.aanya-admin) .auth-page:is(.auth-page--signin, .auth-page--register, .auth-page--task) [data-webauthn-login-trigger] {
    width: 100%;
    min-height: 44px;
    justify-content: center;
    border-radius: 12px;
}

body:not(.aanya-admin) .auth-page:is(.auth-page--signin, .auth-page--register, .auth-page--task) .auth-divider {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 0;
    color: var(--u8r-muted);
    font-size: .8125rem;
    line-height: 1.3;
    text-align: center;
}

body:not(.aanya-admin) .auth-page:is(.auth-page--signin, .auth-page--register, .auth-page--task) .auth-divider::before,
body:not(.aanya-admin) .auth-page:is(.auth-page--signin, .auth-page--register, .auth-page--task) .auth-divider::after {
    flex: 1;
    height: 1px;
    background: var(--u8r-rule);
    content: "";
}

body:not(.aanya-admin) .auth-page:is(.auth-page--signin, .auth-page--register, .auth-page--task) .auth-related {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem 1rem;
    margin: 1rem 0 0;
    padding: 0;
    border: 0;
    color: var(--u8r-muted);
    font-size: .875rem;
}

body:not(.aanya-admin) .auth-page--register .auth-related {
    justify-content: flex-start;
}

/* Federated sign-in: one compact provider grid above "or continue with
   email". Only configured, runtime-enabled providers render (see
   AuthProviderRegistry); labels wrap rather than truncate, so long
   translations grow the row instead of overflowing it. */
body:not(.aanya-admin) .auth-page:is(.auth-page--signin, .auth-page--register, .auth-page--task) .auth-federated {
    display: grid;
    gap: .875rem;
    margin: 0 0 .875rem;
}

body:not(.aanya-admin) .auth-page:is(.auth-page--signin, .auth-page--register, .auth-page--task) .auth-providers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

body:not(.aanya-admin) .auth-page:is(.auth-page--signin, .auth-page--register, .auth-page--task) .auth-provider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .625rem;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    box-sizing: border-box;
    margin: 0;
    padding: .5rem .875rem;
    border: 1px solid var(--u8r-rule-strong);
    border-radius: 12px;
    background: #fff;
    color: #1f1f1f;
    font-size: .9375rem;
    font-weight: 620;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: background-color .16s ease, border-color .16s ease;
}

body:not(.aanya-admin) .auth-page:is(.auth-page--signin, .auth-page--register, .auth-page--task) .auth-provider:hover {
    border-color: var(--u8r-ink);
    background: #f7f7f7;
}

body:not(.aanya-admin) .auth-page:is(.auth-page--signin, .auth-page--register, .auth-page--task) .auth-provider:focus-visible {
    outline: 3px solid var(--u8r-focus);
    outline-offset: 2px;
}

body:not(.aanya-admin) .auth-page:is(.auth-page--signin, .auth-page--register, .auth-page--task) .auth-provider__glyph {
    display: grid;
    flex: none;
    width: 20px;
    height: 20px;
    place-items: center;
}

body:not(.aanya-admin) .auth-page:is(.auth-page--signin, .auth-page--register, .auth-page--task) .auth-provider__glyph :is(img, svg) {
    width: 20px;
    height: 20px;
}

/* The ecosystem story: one image-led region, text in HTML over a
   controlled scrim. Contrast is verified against the rendered crops. */
body:not(.aanya-admin) .auth-page:is(.auth-page--signin, .auth-page--register, .auth-page--task) .auth-story {
    position: relative;
    display: grid;
    align-content: end;
    width: 100%;
    max-width: 30rem;
    box-sizing: border-box;
    overflow: hidden;
    isolation: isolate;
    border-radius: var(--u8r-radius-panel, 20px);
    background: #2b302d;
    color: #fff;
}

body:not(.aanya-admin) .auth-page:is(.auth-page--signin, .auth-page--register, .auth-page--task) .auth-story__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
}

body:not(.aanya-admin) .auth-page:is(.auth-page--signin, .auth-page--register, .auth-page--task) .auth-story::after {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top, rgba(18, 21, 19, .9) 0%, rgba(18, 21, 19, .8) 36%, rgba(18, 21, 19, .34) 68%, rgba(18, 21, 19, .08) 100%);
    content: "";
}

body:not(.aanya-admin) .auth-page:is(.auth-page--signin, .auth-page--register, .auth-page--task) .auth-story__copy {
    max-width: 34rem;
    padding: 5.5rem clamp(1.25rem, 3vw, 2.5rem) clamp(1.25rem, 3vw, 2.25rem);
}

body:not(.aanya-admin) .auth-page:is(.auth-page--signin, .auth-page--register, .auth-page--task) .auth-story__title {
    margin: 0;
    color: #fff;
    font-size: clamp(1.375rem, 2.2vw, 2rem);
    font-weight: 720;
    line-height: 1.15;
    letter-spacing: -.02em;
    text-wrap: balance;
}

body:not(.aanya-admin) .auth-page:is(.auth-page--signin, .auth-page--register, .auth-page--task) .auth-story__lede {
    margin: .625rem 0 0;
    color: rgba(255, 255, 255, .94);
    font-size: clamp(.9375rem, 1.1vw, 1.0625rem);
    line-height: 1.55;
}

body:not(.aanya-admin) .auth-page:is(.auth-page--signin, .auth-page--register, .auth-page--task) .auth-story__note {
    margin: .875rem 0 0;
    padding-top: .75rem;
    border-top: 1px solid rgba(255, 255, 255, .3);
    color: rgba(255, 255, 255, .92);
    font-size: .875rem;
    line-height: 1.5;
}

/* Desktop: story leads, form balances beside it. */
@media (min-width: 1024px) {
    body:not(.aanya-admin) .auth-page:is(.auth-page--signin, .auth-page--register) .auth-shell {
        grid-template-columns: minmax(0, 1fr) minmax(25rem, 28rem);
        justify-items: stretch;
        align-items: center;
        gap: clamp(2.5rem, 5vw, 5rem);
    }

    body:not(.aanya-admin) .auth-page--register .auth-shell {
        align-items: start;
    }

    body:not(.aanya-admin) .auth-page:is(.auth-page--signin, .auth-page--register) .auth-card {
        max-width: none;
        padding-block: .5rem;
    }

    body:not(.aanya-admin) .auth-page:is(.auth-page--signin, .auth-page--register) .auth-story {
        order: -1;
        align-self: stretch;
        max-width: none;
    }
}

/* Touch and narrow layouts: slightly taller controls, form first. */
@media (max-width: 767px), (pointer: coarse) {
    body:not(.aanya-admin) .auth-page:is(.auth-page--signin, .auth-page--register, .auth-page--task) .form-field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
    body:not(.aanya-admin) .auth-page:is(.auth-page--signin, .auth-page--register, .auth-page--task) :is(.auth-provider, [data-webauthn-login-trigger]) {
        min-height: 46px;
    }

    body:not(.aanya-admin) .auth-page:is(.auth-page--signin, .auth-page--register, .auth-page--task) .auth-submit {
        min-height: 48px;
    }
}

@media (max-width: 1023px) {
    body:not(.aanya-admin) .auth-page:is(.auth-page--signin, .auth-page--register, .auth-page--task) .auth-story__copy {
        padding-top: 4rem;
    }

    /* The short band puts copy over most of the crop, including bright
       window light: the scrim stays strong from top to bottom (verified
       against the rendered crops, not a nominal overlay colour). */
    body:not(.aanya-admin) .auth-page:is(.auth-page--signin, .auth-page--register, .auth-page--task) .auth-story::after {
        background: linear-gradient(to top, rgba(18, 21, 19, .9) 0%, rgba(18, 21, 19, .8) 55%, rgba(18, 21, 19, .68) 100%);
    }
}

@media (max-width: 479px) {
    body:not(.aanya-admin) .auth-page:is(.auth-page--signin, .auth-page--register, .auth-page--task) .auth-story {
        border-radius: 16px;
    }

    body:not(.aanya-admin) .auth-page:is(.auth-page--signin, .auth-page--register, .auth-page--task) .auth-story__lede {
        font-size: .875rem;
    }
}


/* Utility tasks: one compact panel in the canonical container. The panel is
   the only frame (the shell stays open); height is content-driven. */
body:not(.aanya-admin) .auth-page--task {
    padding: clamp(1.5rem, 4vw, 3rem) 0 clamp(2.5rem, 5vw, 4rem);
}

body:not(.aanya-admin) .auth-page.auth-page--task .auth-card.auth-task {
    max-width: 28rem;
    padding: clamp(1.5rem, 3.5vw, 2.25rem) !important;
    border: 1px solid var(--u8r-rule) !important;
    border-radius: var(--u8r-radius-panel, 20px) !important;
    background: #fff !important;
}

body:not(.aanya-admin) .auth-page--task .auth-task__icon {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    margin: 0 0 .875rem;
    border: 1px solid var(--u8r-rule-strong);
    border-radius: 50%;
    background: #fff;
    color: var(--u8r-ink);
}

body:not(.aanya-admin) .auth-page--task .auth-task__icon svg {
    width: 20px;
    height: 20px;
}

body:not(.aanya-admin) .auth-page.auth-page--task .auth-intro.auth-task__header h1 {
    font-size: clamp(1.5rem, 2.2vw, 1.75rem);
}

body:not(.aanya-admin) .auth-page--task .auth-task__note {
    margin: 0;
    color: var(--u8r-muted);
    font-size: .875rem;
    line-height: 1.5;
}

body:not(.aanya-admin) .auth-page--task .auth-status {
    padding: .75rem .875rem;
    border-radius: 12px;
    font-size: .9375rem;
}

body:not(.aanya-admin) .auth-page--task .auth-related .btn {
    width: 100%;
    justify-content: center;
}

body:not(.aanya-admin) .auth-page--task .auth-related {
    justify-content: flex-start;
}

body:not(.aanya-admin) .auth-page:is(.auth-page--signin, .auth-page--register, .auth-page--task) .auth-related__back {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

body:not(.aanya-admin) .auth-page:is(.auth-page--signin, .auth-page--register, .auth-page--task) .auth-related__back svg {
    width: 16px;
    height: 16px;
}

body:not(.aanya-admin) .auth-page:is(.auth-page--signin, .auth-page--register, .auth-page--task) .auth-related__back > span {
    display: grid;
    place-items: center;
}

/* MFA alternatives: quiet disclosures, not extra panels or divider lines. */
body:not(.aanya-admin) .auth-page--task .auth-mfa-recovery {
    margin: .875rem 0 0;
    padding: 0;
    border: 0;
}

body:not(.aanya-admin) .auth-page--task .auth-mfa-recovery > summary {
    display: flex;
    align-items: center;
    min-height: 44px;
    color: var(--u8r-ink);
    font-size: .875rem;
    font-weight: 660;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
    cursor: pointer;
}

body:not(.aanya-admin) .auth-page--task .auth-mfa-recovery > summary:focus-visible {
    outline: 3px solid var(--u8r-focus);
    outline-offset: 2px;
    border-radius: 6px;
}

body:not(.aanya-admin) .auth-page--task .auth-mfa-recovery[open] > :not(summary) {
    margin-top: .5rem;
}

body:not(.aanya-admin) .auth-page--task .auth-mfa-recovery .btn {
    width: 100%;
    min-height: 44px;
    justify-content: center;
}

body:not(.aanya-admin) .auth-page--task .auth-form .auth-check {
    font-size: .875rem;
}

@media (max-width: 479px) {
    body:not(.aanya-admin) .auth-page--task {
        padding-top: 1rem;
    }

    body:not(.aanya-admin) .auth-page.auth-page--task .auth-card.auth-task {
        padding: 1.25rem 1rem !important;
        border-radius: 16px !important;
    }
}

/* ---------------------------------------------------------------------
 * A2. Password visibility (owner amendment) — every customer auth form
 *     An icon-only eye / eye-off control inside the trailing edge of the
 *     field: 20px glyph, 40px target, name + tooltip change with state.
 * ------------------------------------------------------------------- */
body:not(.aanya-admin) .password-field {
    position: relative;
    display: block;
    min-width: 0;
}

body:not(.aanya-admin) .password-field input {
    width: 100%;
    padding-inline-end: 3.25rem !important;
}

/* One visibility control: suppress the browser's own reveal button. */
body:not(.aanya-admin) .password-field input::-ms-reveal,
body:not(.aanya-admin) .password-field input::-ms-clear {
    display: none;
}

body:not(.aanya-admin) .password-field .password-toggle {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: .25rem;
    display: grid;
    width: 40px;
    height: 40px;
    min-height: 0;
    place-items: center;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #3f4541;
    font-size: 0;
    text-decoration: none;
    transform: translateY(-50%);
    cursor: pointer;
    transition: background-color .16s ease, color .16s ease;
}

body:not(.aanya-admin) .password-field .password-toggle:hover {
    background: #f0f0f0;
    color: var(--u8r-ink);
}

body:not(.aanya-admin) .password-field .password-toggle:focus-visible {
    outline: 3px solid var(--u8r-focus);
    outline-offset: 0;
    background: #f0f0f0;
    color: var(--u8r-ink);
}

body:not(.aanya-admin) .password-field .password-toggle__icon {
    display: grid;
    place-items: center;
}

body:not(.aanya-admin) .password-field .password-toggle__icon svg {
    width: 20px;
    height: 20px;
}

body:not(.aanya-admin) .password-field .password-toggle__icon--hide,
body:not(.aanya-admin) .password-field .password-toggle[data-password-visible] .password-toggle__icon--show {
    display: none;
}

body:not(.aanya-admin) .password-field .password-toggle[data-password-visible] .password-toggle__icon--hide {
    display: grid;
}

/* The tooltip opens above the trailing edge so it never covers the next
   label; it follows the shared transient tooltip lifecycle. */
body:not(.aanya-admin) .password-field .password-toggle[data-aanya-tooltip] > .aanya-tooltip {
    top: auto;
    bottom: calc(100% + .35rem);
    left: auto;
    right: 0;
    font-size: .75rem;
    transform: translateY(.2rem);
}

body:not(.aanya-admin) .password-field .password-toggle[data-aanya-tooltip]:is(:hover, :focus-visible) > .aanya-tooltip {
    transform: none;
}

:is([dir="rtl"] body, body[dir="rtl"], body [dir="rtl"]):not(.aanya-admin) .password-field .password-toggle[data-aanya-tooltip] > .aanya-tooltip {
    right: auto;
    left: 0;
}

@media (prefers-reduced-motion: reduce) {
    body:not(.aanya-admin) .password-field .password-toggle {
        transition: none;
    }
}

/* ---------------------------------------------------------------------
 * FT. Public footer (owner amendment: complete footer redesign)
 *    A light consumer continuation, not a dark room: white/true-neutral
 *    surfaces, charcoal type, one continuation area (proposition, Connect,
 *    email updates), six readable navigation groups, a Stay Connected +
 *    Market strip and a quiet legal tier. The dark layers that used to
 *    paint it were removed at their source.
 * ------------------------------------------------------------------- */
body:not(.aanya-admin) .site-footer {
    --footer-text: var(--u8r-ink);
    --footer-text-muted: var(--u8r-muted);
    --footer-text-soft: var(--u8r-muted);
    --footer-accent: var(--u8r-ink);
    padding: clamp(2.5rem, 4.5vw, 3.75rem) 0 calc(clamp(1.5rem, 3vw, 2rem) + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--u8r-rule);
    background: #f6f6f6;
    color: var(--u8r-ink);
}

/* One inner inset for every footer zone: the continuation panel's padding.
   Link columns, the social/market row, trust line and legal tier all start
   on the same line as the panel's content inside the canonical container. */
body:not(.aanya-admin) .site-footer .site-footer__shell {
    --u8r-footer-inset: clamp(1rem, 2.4vw, 1.75rem);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 2rem;
    row-gap: 0;
}

body:not(.aanya-admin) .site-footer .site-footer__shell > * {
    grid-column: 1 / -1;
}

body:not(.aanya-admin) .site-footer :is(.site-footer__grid, .site-footer__connect-strip, .site-footer__trust-band, .site-footer__legal-row, .site-footer__disclaimer, .site-footer__copyright) {
    padding-inline: var(--u8r-footer-inset);
}

body:not(.aanya-admin) .site-footer :is(h2, h3, summary, strong) {
    color: var(--u8r-ink);
}

body:not(.aanya-admin) .site-footer :is(p, small) {
    color: var(--u8r-muted);
}

/* Continuation area: proposition | Connect | email updates. */
body:not(.aanya-admin) .site-footer .site-footer__value-bar {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .95fr) minmax(0, 1.1fr);
    align-items: start;
    gap: clamp(1.25rem, 3vw, 2.5rem);
    margin: 0 0 clamp(1.75rem, 3vw, 2.25rem);
    padding: var(--u8r-footer-inset);
    border: 1px solid var(--u8r-rule);
    border-radius: var(--u8r-radius-panel);
    background: #fff;
    box-shadow: none;
}

body:not(.aanya-admin) .site-footer .site-footer__brand-compact {
    display: grid;
    gap: .75rem;
}

body:not(.aanya-admin) .site-footer .site-footer__logo {
    width: 104px;
    height: auto;
}

body:not(.aanya-admin) .site-footer .site-footer__brand-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 730;
    line-height: 1.3;
}

body:not(.aanya-admin) .site-footer .site-footer__brand-copy,
body:not(.aanya-admin) .site-footer .site-footer__connect-callout p,
body:not(.aanya-admin) .site-footer .site-footer__newsletter-preview > p {
    margin: .35rem 0 0;
    font-size: .9rem;
    line-height: 1.55;
}

body:not(.aanya-admin) .site-footer :is(.site-footer__callout-title, .site-footer__newsletter-title) {
    margin: 0;
    color: var(--u8r-ink);
    font-size: 1rem;
    font-weight: 730;
    letter-spacing: 0;
    text-transform: none;
}

body:not(.aanya-admin) .site-footer .site-footer__callout-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: .75rem;
    color: var(--u8r-ink);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: .22em;
}

body:not(.aanya-admin) .site-footer .site-footer__callout-link svg {
    width: 1rem;
    height: 1rem;
}

body:not(.aanya-admin) .site-footer .site-footer__newsletter-preview {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

/* Two tracks: a dominant input beside its submit (the assistive label is
   absolutely positioned and takes no track). */
body:not(.aanya-admin) .site-footer .site-footer__newsletter-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .5rem;
    margin-top: .75rem;
}

body:not(.aanya-admin) .site-footer .site-footer__newsletter-form input[type="email"] {
    min-width: 0;
    min-height: 46px;
    flex: 1 1 auto;
    padding: .6rem .85rem;
    border: 1px solid var(--u8r-rule-strong);
    border-radius: 12px;
    background: #fff;
    color: var(--u8r-ink);
}

body:not(.aanya-admin) .site-footer .site-footer__newsletter-form input[type="email"]:focus-visible {
    outline: 3px solid var(--u8r-focus);
    outline-offset: 2px;
}

body:not(.aanya-admin) .site-footer .site-footer__newsletter-form .btn {
    min-height: 46px;
    flex: 0 0 auto;
}

body:not(.aanya-admin) .site-footer .site-footer__newsletter-consent {
    margin: .6rem 0 0;
    font-size: .75rem;
    line-height: 1.5;
}

/* Navigation groups. */
body:not(.aanya-admin) .site-footer .site-footer__grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1.5rem clamp(1rem, 2vw, 2rem);
    margin: 0;
    padding-block: 0 clamp(1.5rem, 2.5vw, 2rem);
    border: 0;
}

body:not(.aanya-admin) .site-footer .site-footer__column {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

body:not(.aanya-admin) .site-footer .site-footer__column-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 1.25rem;
    margin: 0 0 .6rem;
    padding: 0;
    color: var(--u8r-ink);
    font-size: .78rem;
    font-weight: 740;
    letter-spacing: .06em;
    line-height: 1.25rem;
    text-transform: uppercase;
    list-style: none;
}

body:not(.aanya-admin) .site-footer .site-footer__column-summary::-webkit-details-marker {
    display: none;
}

/* One row rhythm for every link, planned or not. */
body:not(.aanya-admin) .site-footer .site-footer__links {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

body:not(.aanya-admin) .site-footer .site-footer__links > li {
    display: block;
    min-height: 30px;
    padding-block: .3rem;
    box-sizing: border-box;
    line-height: 1.35;
}

body:not(.aanya-admin) .site-footer .site-footer__links a,
body:not(.aanya-admin) .site-footer .site-footer__links li > span:not(.visually-hidden) {
    display: inline;
    min-height: 0;
    color: #2c322f;
    font-size: .9rem;
    line-height: 1.35;
    text-decoration: none;
}

body:not(.aanya-admin) .site-footer .site-footer__links a:hover {
    color: var(--u8r-ink);
    text-decoration: underline;
    text-underline-offset: .22em;
}

body:not(.aanya-admin) .site-footer a:focus-visible,
body:not(.aanya-admin) .site-footer summary:focus-visible,
body:not(.aanya-admin) .site-footer button:focus-visible {
    outline: 3px solid var(--u8r-focus);
    outline-offset: 2px;
    border-radius: 6px;
}

body:not(.aanya-admin) .site-footer .site-footer__links > li.site-footer__item--planned {
    display: block;
}

body:not(.aanya-admin) .site-footer .site-footer__item--planned > :is(a, span):first-child {
    color: var(--u8r-muted);
}

/* Planned is stated in text, never by a coloured dot alone. */
body:not(.aanya-admin) .site-footer .site-footer__planned-dot {
    display: none;
}

/* The visible chip is decorative; the existing visually-hidden "Planned"
   text keeps announcing the state, so the chip uses empty alt text. */
body:not(.aanya-admin) .site-footer .site-footer__item--planned::after {
    content: "Planned" / "";
    display: inline-block;
    vertical-align: 1px;
    margin: 0 0 0 .4rem;
    padding: .05rem .45rem;
    border: 1px dashed var(--u8r-rule-strong);
    border-radius: 999px;
    color: var(--u8r-muted);
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
}

/* Stay Connected + Market strip. */
body:not(.aanya-admin) .site-footer .site-footer__connect-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 2rem;
    padding-block: .35rem;
    border-top: 1px solid var(--u8r-rule);
    border-bottom: 0;
}

body:not(.aanya-admin) .site-footer .site-footer__social {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin: 0;
    padding: 0;
    border: 0;
}

body:not(.aanya-admin) .site-footer .site-footer__social h2 {
    margin: 0;
    color: var(--u8r-ink);
    font-size: .8125rem;
    font-weight: 760;
    letter-spacing: .04em;
    text-transform: uppercase;
}

body:not(.aanya-admin) .site-footer .site-footer__social ul {
    display: flex;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

body:not(.aanya-admin) .site-footer .site-footer__social-link {
    position: relative;
    display: inline-grid;
    width: 44px;
    height: 44px;
    place-items: center;
    padding: 0;
    color: var(--u8r-ink);
    text-decoration: none;
}

body:not(.aanya-admin) .site-footer .site-footer__social-glyph {
    display: inline-grid;
    box-sizing: border-box;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid var(--u8r-rule-strong);
    border-radius: 50%;
    background: #fff;
    color: var(--u8r-ink);
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

body:not(.aanya-admin) .site-footer .site-footer__social-glyph svg {
    width: 15px;
    height: 15px;
}

body:not(.aanya-admin) .site-footer .site-footer__social-link--facebook { --u8r-brand: #1877f2; }
body:not(.aanya-admin) .site-footer .site-footer__social-link--instagram { --u8r-brand: #d6249f; }
body:not(.aanya-admin) .site-footer .site-footer__social-link--linkedin { --u8r-brand: #0a66c2; }
body:not(.aanya-admin) .site-footer .site-footer__social-link--youtube { --u8r-brand: #e62117; }
body:not(.aanya-admin) .site-footer .site-footer__social-link--x { --u8r-brand: #000; }

body:not(.aanya-admin) .site-footer .site-footer__social-link:is(:hover, :focus-visible) .site-footer__social-glyph {
    border-color: var(--u8r-brand, var(--u8r-ink));
    background-color: var(--u8r-brand, var(--u8r-ink));
    color: #fff;
}

body:not(.aanya-admin) .site-footer .site-footer__social-link--instagram:is(:hover, :focus-visible) .site-footer__social-glyph {
    border-color: transparent;
    background-image: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 42%, #d6249f 62%, #285aeb 92%);
}

body:not(.aanya-admin) .site-footer .site-footer__social-link:focus-visible {
    border-radius: 50%;
}

body:not(.aanya-admin) .site-footer .site-footer__social-link > .aanya-tooltip {
    top: auto;
    bottom: calc(100% + 4px);
}

body:not(.aanya-admin) .site-footer .site-footer__market-entry {
    display: flex;
    align-items: center;
    gap: .6rem;
}

body:not(.aanya-admin) .site-footer .site-footer__market-label {
    color: var(--u8r-ink);
    font-size: .8125rem;
    font-weight: 760;
    letter-spacing: .04em;
    text-transform: uppercase;
}

body:not(.aanya-admin) .site-footer .site-footer__market-btn {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    gap: .4rem;
    padding: .35rem .9rem;
    border: 1px solid var(--u8r-rule-strong);
    border-radius: 999px;
    background: #fff;
    color: var(--u8r-ink);
    font: inherit;
    font-size: .875rem;
    font-weight: 640;
    cursor: pointer;
}

body:not(.aanya-admin) .site-footer .site-footer__market-btn span {
    color: inherit;
}

/* Differentiators: one quiet line, not a boxed row. */
body:not(.aanya-admin) .site-footer .site-footer__trust-band {
    margin: 0;
    padding-block: .7rem;
    border: 0;
    border-top: 1px solid var(--u8r-rule);
    background: transparent;
    box-shadow: none;
}

body:not(.aanya-admin) .site-footer .site-footer__trust-list {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1.1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

body:not(.aanya-admin) .site-footer .site-footer__trust-list li {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: var(--u8r-muted);
    font-size: .75rem;
    line-height: 1.5;
}

body:not(.aanya-admin) .site-footer .site-footer__trust-list li span {
    color: var(--u8r-muted);
}

body:not(.aanya-admin) .site-footer .site-footer__trust-icon,
body:not(.aanya-admin) .site-footer .site-footer__trust-icon svg {
    width: 14px;
    height: 14px;
    color: var(--u8r-ink);
}

/* Legal tier: compact, always visible, quieter than navigation. */
/* Legal tier: links, then disclaimer (left) and copyright (right) on one
   final row. Always visible, never inside an accordion. */
body:not(.aanya-admin) .site-footer .site-footer__legal-row {
    margin: 0;
    padding-block: .7rem .35rem;
    border: 0;
    border-top: 1px solid var(--u8r-rule);
}

body:not(.aanya-admin) .site-footer .site-footer__legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: .1rem 1.1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

body:not(.aanya-admin) .site-footer .site-footer__legal-links :is(a, span) {
    color: #3b423e;
    font-size: .8125rem;
    line-height: 1.8;
}

body:not(.aanya-admin) .site-footer :is(.site-footer__disclaimer, .site-footer__copyright) {
    margin: 0;
    color: var(--u8r-muted);
    font-size: .75rem;
    line-height: 1.5;
}

body:not(.aanya-admin) .site-footer .site-footer__shell > .site-footer__disclaimer {
    grid-column: 1;
    max-width: 70ch;
    padding-top: .15rem;
}

body:not(.aanya-admin) .site-footer .site-footer__shell > .site-footer__copyright {
    grid-column: 2;
    align-self: end;
    padding-top: .15rem;
    white-space: nowrap;
}

@media (max-width: 1199px) {
    body:not(.aanya-admin) .site-footer .site-footer__value-bar {
        grid-template-columns: 1fr 1fr;
    }

    body:not(.aanya-admin) .site-footer .site-footer__newsletter-preview {
        grid-column: 1 / -1;
    }

    body:not(.aanya-admin) .site-footer .site-footer__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Mobile: collapsed native disclosure groups (existing contract); Contact,
   Connect, social, market and legal stay visible outside the accordions. */
@media (max-width: 767px) {
    body:not(.aanya-admin) .site-footer .site-footer__value-bar {
        grid-template-columns: 1fr;
    }

    body:not(.aanya-admin) .site-footer .site-footer__newsletter-form {
        grid-template-columns: minmax(0, 1fr);
    }

    body:not(.aanya-admin) .site-footer .site-footer__grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    body:not(.aanya-admin) .site-footer .site-footer__column {
        border-bottom: 1px solid var(--u8r-rule);
    }

    body:not(.aanya-admin) .site-footer .site-footer__column-summary {
        min-height: 48px;
        margin: 0;
        cursor: pointer;
    }

    body:not(.aanya-admin) .site-footer .site-footer__column-summary svg {
        width: 16px;
        height: 16px;
        transition: transform .16s ease;
    }

    body:not(.aanya-admin) .site-footer .site-footer__column[open] > .site-footer__column-summary svg {
        transform: rotate(180deg);
    }

    body:not(.aanya-admin) .site-footer .site-footer__column-nav {
        padding-bottom: .75rem;
    }

    body:not(.aanya-admin) .site-footer .site-footer__grid {
        padding-bottom: 1rem;
    }

    /* Social icons and Market share one compact row where they fit. */
    body:not(.aanya-admin) .site-footer .site-footer__connect-strip {
        align-items: flex-end;
        padding-block: .6rem .4rem;
    }

    body:not(.aanya-admin) .site-footer .site-footer__social {
        flex-direction: column;
        align-items: flex-start;
        gap: .25rem;
    }

    body:not(.aanya-admin) .site-footer .site-footer__social ul {
        gap: 0;
        margin-left: -5px;
    }

    body:not(.aanya-admin) .site-footer .site-footer__market-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    body:not(.aanya-admin) .site-footer .site-footer__trust-list {
        gap: .1rem .9rem;
    }

    body:not(.aanya-admin) .site-footer .site-footer__shell > :is(.site-footer__disclaimer, .site-footer__copyright) {
        grid-column: 1 / -1;
        white-space: normal;
    }
}

@media (min-width: 768px) {
    body:not(.aanya-admin) .site-footer .site-footer__column-summary svg {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    body:not(.aanya-admin) .site-footer .site-footer__social-glyph,
    body:not(.aanya-admin) .site-footer .site-footer__column-summary svg {
        transition: none;
    }
}

/* Route stylesheets that style every <details> must not box the footer. */
body:not(.aanya-admin) .site-footer .site-footer__column {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* ---------------------------------------------------------------------
 * P. PDP supporting chapters and shared cards
 *    Decision-first order and every chapter's semantics are unchanged;
 *    headings get a readable measure instead of an 11ch column, discrete
 *    items use compact neutral marks, editorial labels are neutral.
 * ------------------------------------------------------------------- */
body:not(.aanya-admin) .pdp-chapter__title {
    max-width: 28ch;
    text-wrap: balance;
}

body:not(.aanya-admin) .pdp-chapter__head {
    max-width: 48rem;
}

body:not(.aanya-admin) .pdp-brand-chip__mark {
    position: static;
    display: inline-grid;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    place-items: center;
    margin: 0 auto .5rem;
    border: 1px solid var(--u8r-rule);
    border-radius: 12px;
    background: var(--u8r-surface-muted);
    color: var(--u8r-ink);
    font-size: 1rem;
    font-weight: 760;
    line-height: 1;
}

body:not(.aanya-admin) .pdp-brand-chip__mark::before,
body:not(.aanya-admin) .pdp-brand-chip__mark::after {
    content: none;
}

body:not(.aanya-admin) .pdp-brand-chip {
    border: 1px solid var(--u8r-rule);
    border-radius: var(--u8r-radius-tile);
    background: #fff;
    box-shadow: none;
}

body:not(.aanya-admin) .pdp-brand-chip a {
    color: var(--u8r-ink);
    font-weight: 700;
}

/* Editorial labels are neutral; colour is not a status here. */
body:not(.aanya-admin) .guide-badge {
    border-radius: 999px;
    background: var(--u8r-charcoal);
    color: #fff;
}

body:not(.aanya-admin) :is(.guide-card, .guide-card__body, .guide-content) {
    border-left-color: var(--u8r-rule);
}

/* Brand and ingredient detail heroes: content-driven, not a 608px empty
   panel with a 96px title (it pushed brand products below the fold). */
body:not(.aanya-admin) .entity-experience .entity-hero {
    min-height: 0;
    margin-block: clamp(1rem, 2vw, 1.5rem) clamp(1.5rem, 3vw, 2.25rem);
    padding: clamp(1.5rem, 3.2vw, 2.75rem);
    border: 1px solid var(--u8r-rule);
    border-radius: var(--u8r-radius-panel);
    background: #fff;
    box-shadow: none;
}

body:not(.aanya-admin) .entity-experience .entity-hero h1 {
    max-width: 22ch;
    font-size: clamp(2.1rem, 3.6vw, 3.25rem);
    line-height: 1.05;
    letter-spacing: -.03em;
}

body:not(.aanya-admin) .entity-experience .entity-hero p {
    max-width: 60ch;
}

/* Search results: the same compact result-heading contract. */
body:not(.aanya-admin) .search-page .search-page__header {
    margin-bottom: 1rem;
    padding-block: .75rem 0;
}

body:not(.aanya-admin) .search-page .search-page__heading {
    max-width: none;
    margin: 0;
    font-size: clamp(1.75rem, 2.6vw, 2.35rem);
    line-height: 1.1;
}

body:not(.aanya-admin) .search-page .search-page__summary {
    margin: .4rem 0 .9rem;
    padding: 0;
    border: 0;
}

/* ---------------------------------------------------------------------
 * R. Shop by Category rail (owner amendments: calm icon states; selected
 *    state model)
 *    Rest: outlined neutral circle, charcoal glyph. Hover: the category's
 *    canonical accent fills the whole circle with the highest-contrast
 *    glyph ink for that accent. Current (aria-current, resolved from the
 *    route/taxonomy): the same complete accent fill, persisting without
 *    hover, plus a bolder underlined label — never an outer ring, so it
 *    cannot read as focus. Keyboard focus: the canonical focus outline
 *    around the control, independent of any fill, so current + focus =
 *    filled circle + separate focus outline. Colours only transition.
 * ------------------------------------------------------------------- */

/* Highest-contrast glyph ink per accent family. Every rail accent is a
   light discovery hue, where charcoal measures 8.3-10.8:1 and white only
   1.5-1.9:1; a darker accent added later would set white here. The rail
   spec verifies the chosen ink is the better of the two for every item. */
body:not(.aanya-admin) .category-rail__item {
    --category-accent-ink: #1f2421;
}
body:not(.aanya-admin) .category-rail {
    border-bottom: 1px solid var(--u8r-rule);
    background: #fff;
}

body:not(.aanya-admin) .category-rail .category-rail__link {
    gap: .55rem;
    border-radius: 12px;
    background: transparent;
    color: var(--u8r-ink);
}

body:not(.aanya-admin) .category-rail .category-rail__link:hover,
body:not(.aanya-admin) .category-rail .category-rail__link:focus-visible {
    background: transparent;
}

/* Focus is an outline around the whole control (circle + label), inset so
   the scroll viewport never clips it; it never replaces the fill. */
body:not(.aanya-admin) .category-rail .category-rail__link:focus-visible {
    outline: 3px solid var(--u8r-focus);
    outline-offset: -3px;
}

body:not(.aanya-admin) .category-rail .category-illustration {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border: 0;
    border-radius: 50%;
    background: #fff !important;
    box-shadow: inset 0 0 0 1px var(--u8r-rule-strong);
    color: var(--u8r-ink);
    transition: background-color .18s ease, box-shadow .18s ease;
}

body:not(.aanya-admin) .category-rail .category-illustration svg {
    width: 18px;
    height: 18px;
}

body:not(.aanya-admin) .category-rail .category-rail__link:is(:hover, :focus-visible, [aria-current="page"]) .category-illustration {
    background: var(--category-accent, var(--discovery-green, #98d8a1)) !important;
    box-shadow: inset 0 0 0 1px var(--category-accent, var(--discovery-green, #98d8a1));
    color: var(--category-accent-ink, #1f2421);
}

body:not(.aanya-admin) .category-rail .category-rail__label {
    color: var(--u8r-ink);
    font-weight: 640;
}

body:not(.aanya-admin) .category-rail .category-rail__link[aria-current="page"] .category-rail__label {
    font-weight: 720;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: .3em;
}

body:not(.aanya-admin) .category-rail .category-rail__link:hover .category-rail__label {
    text-decoration: underline;
    text-underline-offset: .3em;
}

body:not(.aanya-admin) .category-rail :is(.category-rail__context, .category-rail__scroll) {
    border-color: var(--u8r-rule);
    color: var(--u8r-ink);
}

body:not(.aanya-admin) .category-rail .category-rail__context {
    color: var(--u8r-muted);
    font-size: .6875rem;
    letter-spacing: .06em;
}

body:not(.aanya-admin) .category-rail .category-rail__scroll:hover:not(:disabled) {
    background: var(--u8r-surface-muted);
}

body:not(.aanya-admin) .category-rail .category-rail__scroll:disabled {
    color: #b7bfb9;
}

@media (max-width: 767px) {
    body:not(.aanya-admin) .category-rail .category-illustration {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body:not(.aanya-admin) .category-rail .category-illustration {
        transition: none;
    }
}

/* ---------------------------------------------------------------------
 * H. Homepage hero — top-aligned standing-person composition with six
 *    stationary AANYA intelligence signals and Admin-managed people
 *    (owner corrections). The left grid cell stretches to the row the
 *    carousel defines and clips at its own boundary (overflow: hidden), so
 *    people and signals can never cross into the right half, the header or
 *    the page edge, and the hero never grows for them.
 *
 *    People layers are absolutely stacked, so a rotation only changes
 *    opacity: nothing reflows. Each person is framed by metadata from
 *    Admin (crop box, ratio, alignment, scale) through custom properties;
 *    there are no image-specific selectors.
 * ------------------------------------------------------------------- */
body:not(.aanya-admin) .homepage-hero__copy--editorial {
    position: relative;
    min-width: 0;
    overflow: hidden;
}

/* The tablet sizer exists only for 768–1023 (see below). */
body:not(.aanya-admin) .homepage-hero__routes--sizer {
    display: none;
}

body:not(.aanya-admin) .homepage-hero__visual {
    position: relative;
    min-width: 0;
}

body:not(.aanya-admin) .homepage-hero__person {
    position: absolute;
    inset: 0;
    margin: 0;
    pointer-events: none;
}

/* Person framing lives in assets/css/components/hero-person.css (shared
   with the Admin preview); this section owns placement only. */

/* Initial layers render only on the device class they were chosen for. */
@media (min-width: 1024px) {
    body:not(.aanya-admin) .hero-person:not([data-devices~="desktop"]) { display: none; }
}

@media (min-width: 768px) and (max-width: 1023px) {
    body:not(.aanya-admin) .hero-person:not([data-devices~="tablet"]) { display: none; }
}

@media (max-width: 767px) {
    body:not(.aanya-admin) .hero-person:not([data-devices~="mobile"]) { display: none; }
}

/* Seven intelligence signals: live links, stationary while people rotate. */
body:not(.aanya-admin) .homepage-hero__signals {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    pointer-events: none;
}

body:not(.aanya-admin) .homepage-hero__signal {
    --signal-accent: #2f6f4f;
    position: absolute;
    top: var(--signal-y, 0);
    right: var(--signal-right, auto);
    left: var(--signal-x, auto);
    display: none;
    pointer-events: auto;
}

body:not(.aanya-admin) .homepage-hero__signal--certifications { --signal-accent: #2f6f4f; }
body:not(.aanya-admin) .homepage-hero__signal--product-intelligence { --signal-accent: #4a55a2; }
body:not(.aanya-admin) .homepage-hero__signal--ingredients { --signal-accent: #5b7a1e; }
body:not(.aanya-admin) .homepage-hero__signal--nutrition { --signal-accent: #a4640f; }
body:not(.aanya-admin) .homepage-hero__signal--allergen-safety { --signal-accent: #b4432a; }
body:not(.aanya-admin) .homepage-hero__signal--health-goals { --signal-accent: #a8325e; }
body:not(.aanya-admin) .homepage-hero__signal--regulatory-intelligence { --signal-accent: #2f5a87; }

body:not(.aanya-admin) .homepage-hero__signal a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .4375rem;
    min-height: 34px;
    padding: .25rem .75rem .25rem .3125rem;
    border: 1px solid rgb(17 24 39 / 12%);
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 2px rgb(17 24 39 / 6%), 0 4px 14px rgb(17 24 39 / 6%);
    color: #1f2328;
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.1;
    white-space: nowrap;
    text-decoration: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}

body:not(.aanya-admin) .homepage-hero__signal-icon {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--signal-accent) 11%, #fff);
    color: var(--signal-accent);
}

body:not(.aanya-admin) .homepage-hero__signal-icon svg {
    width: 14px;
    height: 14px;
}

body:not(.aanya-admin) .homepage-hero__signal a:hover,
body:not(.aanya-admin) .homepage-hero__signal a:focus-visible {
    border-color: color-mix(in srgb, var(--signal-accent) 55%, #fff);
    box-shadow: 0 1px 2px rgb(17 24 39 / 8%), 0 8px 20px rgb(17 24 39 / 10%);
}

body:not(.aanya-admin) .homepage-hero__signal a:focus-visible {
    outline: 2px solid var(--signal-accent);
    outline-offset: 2px;
}

/* The explanatory phrase is part of the accessible name and appears as a
   small tooltip on hover and focus. */
body:not(.aanya-admin) .homepage-hero__signal-note {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

body:not(.aanya-admin) .homepage-hero__signal a:is(:hover, :focus-visible) .homepage-hero__signal-note {
    top: calc(100% + 6px);
    left: 0;
    z-index: 2;
    width: auto;
    height: auto;
    padding: .3125rem .5rem;
    border-radius: 6px;
    background: #1f2328;
    color: #fff;
    font-size: .75rem;
    font-weight: 500;
    clip-path: none;
}

body:not(.aanya-admin) .homepage-hero__signal[data-side="right"] a:is(:hover, :focus-visible) .homepage-hero__signal-note {
    right: 0;
    left: auto;
}

/* Compact pathways (icon + label; the descriptor stays for screen readers). */
body:not(.aanya-admin) .homepage-hero__copy--editorial .homepage-hero__routes:not(.homepage-hero__routes--sizer) {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
}

body:not(.aanya-admin) .homepage-hero__copy--editorial .homepage-hero__routes:not(.homepage-hero__routes--sizer) a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    min-height: 44px;
    padding: .375rem .75rem .375rem .375rem;
    border-radius: 999px;
}

body:not(.aanya-admin) .homepage-hero__copy--editorial .homepage-hero__routes:not(.homepage-hero__routes--sizer) a > span:first-child {
    flex: none;
    width: 32px;
    height: 32px;
}

body:not(.aanya-admin) .homepage-hero__copy--editorial .homepage-hero__routes:not(.homepage-hero__routes--sizer) small {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Desktop: one balanced, top-aligned hero (owner correction). The left
   composition is authoritative: a normalized person zone (fixed width, fixed
   0.47 aspect, so every rotating person fills it identically) beside the
   copy. The product card stretches to that row, and its media region takes
   what the product copy and controls leave — the same for a real product
   image and the neutral missing-media state. LEFT/RIGHT is 54/46 (chosen
   over 52/48, where the pathways wrap, and 56/44, which starves the card). */
@media (min-width: 1024px) {
    body:not(.aanya-admin) .homepage-hero__layout {
        grid-template-columns: minmax(0, 54fr) minmax(0, 46fr);
        align-items: stretch;
        min-height: 0;
    }

    body:not(.aanya-admin) .homepage-hero__copy--editorial {
        display: grid;
        grid-template-columns: minmax(0, clamp(13rem, 20vw, 18.5rem)) minmax(0, 1fr);
        grid-template-rows: auto;
        align-self: stretch;
        align-items: start;
        column-gap: clamp(1rem, 2vw, 1.75rem);
    }

    body:not(.aanya-admin) .homepage-hero__visual {
        align-self: start;
        aspect-ratio: .47;
        height: auto;
    }

    body:not(.aanya-admin) .homepage-hero__catalog .homepage-hero-feature {
        min-height: 0;
    }

    body:not(.aanya-admin) .homepage-hero__catalog .homepage-hero-feature__media {
        position: relative;
        height: auto;
        min-height: 0;
    }

    body:not(.aanya-admin) .homepage-hero__catalog .homepage-hero-feature__media img {
        position: absolute;
        inset: 0;
    }

    body:not(.aanya-admin) .homepage-hero__copy--editorial .homepage-hero__content {
        min-width: 0;
    }

    body:not(.aanya-admin) .homepage-hero__copy--editorial h1 {
        max-width: 11ch;
        margin-top: 0;
        font-size: clamp(2.25rem, 3.2vw, 3rem);
        line-height: 1.02;
    }

    body:not(.aanya-admin) .homepage-hero__copy--editorial .homepage-hero__lead {
        max-width: 30rem;
        font-size: clamp(.9375rem, 1.1vw, 1.0625rem);
    }

    body:not(.aanya-admin) .homepage-hero__copy--editorial .homepage-hero__actions {
        flex-direction: column;
        align-items: stretch;
        gap: .5rem;
        max-width: 20rem;
    }

    body:not(.aanya-admin) .homepage-hero__copy--editorial .homepage-hero__actions :is(.btn, .homepage-hero__search-action) {
        width: 100%;
        min-height: 46px;
    }

    body:not(.aanya-admin) .homepage-hero__copy--editorial .homepage-hero__actions .btn {
        justify-content: center;
    }

    body:not(.aanya-admin) .homepage-hero__copy--editorial .homepage-hero__routes:not(.homepage-hero__routes--sizer) {
        margin-top: clamp(1rem, 1.8vw, 1.5rem);
    }

    /* 1024–1279: the three most useful signals. The person column (~185px)
       is too narrow for anything beside the head, hands or grocery bag, so
       they sit on the right hip, on the left above the bag, and on the right
       leg — clear on every starter-library person. */
    body:not(.aanya-admin) .homepage-hero__signal:is([data-tier="1"], [data-tier="2"]) { display: block; }
    body:not(.aanya-admin) .homepage-hero__signal--certifications { --signal-x: auto; --signal-right: 0; --signal-y: 38%; }
    body:not(.aanya-admin) .homepage-hero__signal--ingredients { --signal-x: 0; --signal-y: 45%; }
    body:not(.aanya-admin) .homepage-hero__signal--allergen-safety { --signal-x: auto; --signal-right: 0; --signal-y: 62%; }

    body:not(.aanya-admin) .homepage-hero__signal:is(.homepage-hero__signal--certifications, .homepage-hero__signal--allergen-safety) a:is(:hover, :focus-visible) .homepage-hero__signal-note {
        right: 0;
        left: auto;
    }
}

/* ≥1280 the content column has slack, so the headline opens a few pixels
   below the person's head (1024–1279 has none: that column is exactly as
   tall as the carousel). */
@media (min-width: 1280px) {
    body:not(.aanya-admin) .homepage-hero__copy--editorial .homepage-hero__content {
        padding-top: .5rem;
    }
}

/* ≥1280: all six, asymmetric around the shopper — upper, near the
   product, lower — clear of face, hands, package, bag contents and feet.
   Checked against every starter-library person (people framed by the
   analyzer share head-top, hands and bag zones). */
@media (min-width: 1280px) {
    body:not(.aanya-admin) .homepage-hero__signal { display: block; }
    body:not(.aanya-admin) .homepage-hero__signal--certifications { --signal-x: 0; --signal-right: auto; --signal-y: 1%; }
    /* Seven signals: Certifications at the top, then one even 8% left/right
       zig-zag (L27 R35 L43 R51 L59 R67) so no two badges touch even where the
       1280px visual is shortest, and none covers the face, headline or CTA. */
    body:not(.aanya-admin) .homepage-hero__signal--ingredients { --signal-x: 0; --signal-y: 27%; }
    body:not(.aanya-admin) .homepage-hero__signal--product-intelligence { --signal-right: 0; --signal-y: 35%; }
    body:not(.aanya-admin) .homepage-hero__signal--allergen-safety { --signal-x: 0; --signal-right: auto; --signal-y: 43%; }
    body:not(.aanya-admin) .homepage-hero__signal--nutrition { --signal-right: 0; --signal-y: 51%; }
    body:not(.aanya-admin) .homepage-hero__signal--regulatory-intelligence { --signal-x: 0; --signal-right: auto; --signal-y: 59%; }
    body:not(.aanya-admin) .homepage-hero__signal--health-goals { --signal-right: 0; --signal-y: 67%; }

    body:not(.aanya-admin) .homepage-hero__signal:is(.homepage-hero__signal--certifications, .homepage-hero__signal--allergen-safety) a:is(:hover, :focus-visible) .homepage-hero__signal-note {
        right: auto;
        left: 0;
    }
}

/* 768–1023: the stacked copy column shares the row with the carousel, so
   its height decides the carousel's. A hidden sizer (an invisible copy of the
   pathways in their original presentation, see hero.php) keeps the column at
   exactly its pre-correction height at every width; the compact pathways and
   the upper-body crop share the space that frees. 768–799 stacks the crop
   above the pathways (a fixed three-pill stack); from 800 the pathways take a
   narrow track and the person stands beside them. Two signals at 768–799;
   none from 800, where the person track is too narrow for a badge that would
   not cover the face. */
@media (min-width: 768px) and (max-width: 1023px) {
    body:not(.aanya-admin) .homepage-hero__copy--editorial {
        display: grid;
        grid-template-columns: max-content minmax(0, 1fr);
        grid-template-rows: auto auto auto auto;
        align-self: stretch;
        align-content: start;
        column-gap: .75rem;
    }

    body:not(.aanya-admin) .homepage-hero__copy--editorial .homepage-hero__content {
        display: contents;
    }

    body:not(.aanya-admin) .homepage-hero__copy--editorial :is(h1, .homepage-hero__lead, .homepage-hero__actions) {
        grid-column: 1 / -1;
    }

    body:not(.aanya-admin) .homepage-hero__copy--editorial .homepage-hero__routes--sizer {
        display: flex;
        grid-row: 4;
        grid-column: 1 / -1;
        visibility: hidden;
    }

    /* A fixed three-pill stack (3 × 44 + 2 × 6 = 144px) so the person above
       it can take exactly the rest of the row. */
    body:not(.aanya-admin) .homepage-hero__copy--editorial .homepage-hero__routes:not(.homepage-hero__routes--sizer) {
        grid-row: 4;
        grid-column: 1 / -1;
        flex-direction: column;
        align-items: flex-start;
        align-self: end;
        gap: .375rem;
        margin: 0;
        padding: 0;
        border: 0;
    }

    body:not(.aanya-admin) .homepage-hero__copy--editorial .homepage-hero__routes:not(.homepage-hero__routes--sizer) a {
        height: 2.75rem;
        min-height: 0;
    }

    body:not(.aanya-admin) .homepage-hero__visual {
        grid-row: 4;
        grid-column: 1 / -1;
        align-self: start;
        height: calc(100% - 9.75rem);
        margin-top: .75rem;
    }

    body:not(.aanya-admin) .homepage-hero__signal[data-tier="1"] { display: block; }
    body:not(.aanya-admin) .homepage-hero__signal--certifications { --signal-right: 0; --signal-y: 22%; }
    body:not(.aanya-admin) .homepage-hero__signal--ingredients { --signal-right: 0; --signal-y: 52%; }

    body:not(.aanya-admin) .homepage-hero__signal a:is(:hover, :focus-visible) .homepage-hero__signal-note {
        right: 0;
        left: auto;
    }
}

@media (min-width: 800px) and (max-width: 1023px) {
    body:not(.aanya-admin) .homepage-hero__copy--editorial .homepage-hero__routes:not(.homepage-hero__routes--sizer) {
        grid-column: 1;
        align-self: start;
        margin-top: .75rem;
    }

    body:not(.aanya-admin) .homepage-hero__visual {
        grid-column: 2;
        align-self: stretch;
        height: auto;
    }

    body:not(.aanya-admin) .homepage-hero__signal[data-tier] {
        display: none;
    }
}

@media (max-width: 767px) {
    body:not(.aanya-admin) .homepage-hero__copy--editorial {
        display: flex;
        flex-direction: column;
    }

    body:not(.aanya-admin) .homepage-hero__copy--editorial .homepage-hero__content {
        display: contents;
    }

    body:not(.aanya-admin) .homepage-hero__copy--editorial h1 { order: 0; }
    body:not(.aanya-admin) .homepage-hero__copy--editorial .homepage-hero__lead { order: 1; }
    body:not(.aanya-admin) .homepage-hero__copy--editorial .homepage-hero__actions { order: 2; }

    body:not(.aanya-admin) .homepage-hero__visual {
        order: 3;
        height: 11rem;
        margin: .75rem 0 .25rem;
    }

    body:not(.aanya-admin) .homepage-hero__signal[data-tier="1"] { display: block; }
    body:not(.aanya-admin) .homepage-hero__signal--certifications { --signal-x: 50%; --signal-y: 24%; }
    body:not(.aanya-admin) .homepage-hero__signal--ingredients { --signal-x: 50%; --signal-y: 54%; }

    /* Keep the single swipeable pathway strip mobile already had. */
    body:not(.aanya-admin) .homepage-hero__copy--editorial .homepage-hero__routes:not(.homepage-hero__routes--sizer) {
        order: 4;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    body:not(.aanya-admin) .homepage-hero__copy--editorial .homepage-hero__routes:not(.homepage-hero__routes--sizer) a {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}

/* Compact (≤1023) renditions: the upper-body crop (same values as
   .hero-person--compact in the shared component). Stacked layouts are flex columns,
   where margins no longer collapse, so the headline drops its bottom
   margin and the lead's larger top margin alone gives the spacing block flow
   gave it. */
@media (max-width: 1023px) {
    body:not(.aanya-admin) .hero-person {
        --hp-x: var(--hp-compact-x);
        --hp-y: var(--hp-compact-y);
        --hp-w: var(--hp-compact-w);
        --hp-h: var(--hp-compact-h);
        --hp-ratio: var(--hp-compact-ratio);
        --hp-align: 0;
        --hp-scale: 1;
    }

    body:not(.aanya-admin) .hero-person__crop {
        -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent);
        mask-image: linear-gradient(to bottom, #000 72%, transparent);
    }

    /* Emulate the collapsed headline/lead margin (max of the two) that the
       original block layout had. */
    body:not(.aanya-admin) .homepage-hero__copy--editorial h1 {
        margin-bottom: 0;
    }
}

/* ---------------------------------------------------------------------
 * WEB-VISUAL-003 — inner customer routes (non-PDP).
 * Compare, directory intros and Connect application continuity.
 * ------------------------------------------------------------------- */

body:not(.aanya-admin) .compare-page .compare-page__frame {
    padding-block: clamp(1.25rem, 3vw, 2rem);
}

body:not(.aanya-admin) .compare-page :is(.compare-empty-state, .compare-partial-state, .compare-notice) {
    border-radius: var(--u8r-radius-panel);
    border: 1px solid var(--u8r-rule);
    background: #fff;
    box-shadow: none;
}

body:not(.aanya-admin) .compare-page .compare-empty-state,
body:not(.aanya-admin) .compare-page .compare-partial-state {
    border-style: dashed;
}

body:not(.aanya-admin) .category-directory__intro {
    padding-bottom: clamp(0.75rem, 2vw, 1rem);
    border-bottom: 1px solid var(--u8r-rule);
}

body:not(.aanya-admin) .health-goals-directory .entity-hero {
    margin-bottom: clamp(1rem, 2.5vw, 1.5rem);
}

body:not(.aanya-admin) .connect-application-page .connect-application-lead {
    max-width: 60ch;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--u8r-rule);
}

/* PRELAUNCH-007: the approved product photographs are square. A wide card
   plate reduced the visible food to less than half the card width. Keep the
   complete image and a consistent plate on every shared card surface. */
body:not(.aanya-admin) .product-card .product-image {
    aspect-ratio: 1 / 1;
    min-height: 0;
}

body:not(.aanya-admin) .product-card .product-image img {
    object-fit: contain;
}

/* The homepage rail gives empty plates a separate aspect rule. Keep those
   placeholders aligned with the cards that now have approved imagery. */
body:not(.aanya-admin).home .new-products-rail__item.is-media-missing .product-card .product-image {
    aspect-ratio: 1 / 1;
}

/* The PDP recommendation row has its own shorter frame and height cap. */
body:not(.aanya-admin) .single-product-page.pdp-journey .pdp-discover-products .product-card .product-image {
    aspect-ratio: 1 / 1;
    max-height: none;
}

/* Keep each square source complete in the homepage catalog carousel. The
   media row may grow with the image rather than cropping it to a wide slot. */
.home .homepage-hero__catalog .homepage-hero-feature {
    grid-template-rows: auto auto;
    min-height: 0;
}

.home .homepage-hero__catalog .homepage-hero-feature__media {
    height: auto;
    min-height: 0;
    aspect-ratio: 1 / 1;
}

.home .homepage-hero__catalog .homepage-hero-feature__media img {
    position: static;
    display: block;
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain;
}

@media (max-width: 767px) {
    .home .homepage-hero__catalog .homepage-hero-feature {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto;
    }

    .home .homepage-hero__catalog .homepage-hero-feature__media {
        height: auto;
        aspect-ratio: 1 / 1;
    }

    .home .homepage-hero__catalog .homepage-hero-feature__body {
        align-self: stretch;
    }
}

/* Keep the editorial half's grid size intact while shortening only the
   carousel. The right item's bottom margin holds its former grid contribution;
   the card, media, copy and controls themselves end sooner. */
body:not(.aanya-admin).home .homepage-hero__catalog {
    --hero-product-media-height: min(30rem, 34vw);
    align-self: start;
    margin-bottom: calc(100% - 2px - var(--hero-product-media-height));
}

body:not(.aanya-admin).home .homepage-hero__catalog .homepage-hero-feature__media {
    height: var(--hero-product-media-height);
    min-height: 0;
    aspect-ratio: auto;
}

@media (max-width: 1023px) {
    body:not(.aanya-admin).home .homepage-hero__catalog {
        --hero-product-media-height: min(22.5rem, 44vw);
    }
}

@media (max-width: 767px) {
    body:not(.aanya-admin).home .homepage-hero__catalog {
        --hero-product-media-height: min(20rem, 84vw);
        margin-bottom: 0;
    }
}