/* ============================================================
   LISTINGS — hero, search, filters, dropdowns, ad cards, detail
   ============================================================ */

/* ── Hero section (index) ── */
.hero-section {
    text-align: center;
    padding: 4rem 0;
    background-color: var(--surface-color);
    border-radius: var(--radius);
    margin-bottom: 2rem;
    box-shadow: var(--shadow);
}

.hero-section h1 {
    font-size: 2.5rem;
    color: var(--secondary-color);
    margin-bottom: 1rem;
}

.hero-section p {
    color: var(--text-muted);
    font-size: 1.1rem;
}

/* ── Section header (title + filters row) ── */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

/* ── Home page: honey-type circles + curated rails ───────────────────────────
   The H1 is visually hidden (it still exists for a11y). The visible hero is a
   row of circular shortcuts, one per named honey type, sitting on the seam
   between the header and the page. Rails are horizontal scrollers of product
   cards, keyboard-navigable.
   Markup: app/templates/index.html, partials/honey_type_chips.html,
           partials/rail.html
   ------------------------------------------------------------------------- */
.page-home .main-content {
    padding-top: 0;
}

.home-hero {
    /* H1 is visually hidden — section exists for a11y only. */
    padding: 0;
    margin-bottom: 0;
}

.home-hero__heading {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 2.85rem);
    color: var(--text-color);
    margin: 0 0 0.75rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.home-hero__positioning {
    color: var(--text-muted);
    font-size: 1.15rem;
    margin: 0 auto 1rem;
    max-width: 36rem;
    line-height: 1.5;
}

/* Circular shortcuts sit on the dark-to-cream seam: the top half of each
   circle is on the header band, the label sits on the page background. */
.honey-type-chips {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 1.15rem;
    margin-top: 0;
    padding-top: 0.5rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.honey-type-chips::-webkit-scrollbar {
    display: none;
}

.honey-type-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    flex: 0 0 auto;
    width: 8rem;
    color: inherit;
    text-decoration: none;
}

.honey-type-chip:hover .honey-type-chip__label {
    text-decoration: underline;
}

.honey-type-chip:focus-visible {
    outline: none;
}

.honey-type-chip:focus-visible .honey-type-chip__plate {
    box-shadow: var(--focus-ring);
}

.honey-type-chip__media {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
}

.honey-type-chip__plate {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    background: var(--plate-bg);
    border: 1px solid var(--hairline);
    color: var(--text-subtle);
}

.honey-type-chip__plate .icon {
    width: 38%;
    height: auto;
}

.honey-type-chip__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.honey-type-chip__label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-color);
    text-align: center;
    line-height: 1.25;
}

.honey-type-chip--empty {
    opacity: 0.45;
    cursor: default;
    pointer-events: none;
}

.honey-type-chip--empty .honey-type-chip__label {
    text-decoration: none;
}

/* ── Explore section ─────────────────────────────────────────────────────────
   Honey-type circle buttons on the home page, sitting on the header seam.
   --------------------------------------------------------------------------- */
.home-section {
    padding: 0 0 1rem;
}

/* ── Home page: first screen holds types + popular styles ───────────────────
   Types ~58 %, popular styles ~42 % of the viewport below the header so the
   two rows stay in balance: circles remain the visual weight, the style
   cards still have room for a proper section title. Circles are centred in
   the upper row so the dark band meets them at mid-height. JS pins
   --home-first-height to the measured remainder. */
.page-home .main-content {
    --home-first-height: calc(100svh - 5rem);
    --home-first-pad-top: clamp(1rem, 2.5vh, 1.75rem);
    --home-first-pad-bottom: clamp(1.5rem, 4vh, 2.5rem);
    --home-section-gap: clamp(1.5rem, 4vh, 2.75rem);
    --home-inner: calc(
        var(--home-first-height)
        - var(--home-first-pad-top)
        - var(--home-first-pad-bottom)
        - var(--home-section-gap)
    );
    --home-types-height: calc(var(--home-inner) * 0.58);
    --home-circle-size: min(22rem, 26vw, max(7.5rem, calc(var(--home-types-height) - 9rem)));
    /* Seam sits on the upper third of the centred circles, not the midline. */
    --home-band-depth: calc(
        var(--home-first-pad-top)
        + var(--home-types-height) * 0.5
        - var(--home-circle-size) * 0.22
    );
    padding-top: 0;
    background: linear-gradient(
        180deg,
        var(--header-band-end) 0,
        var(--header-band-end) var(--home-band-depth),
        var(--bg-color) var(--home-band-depth)
    );
}

.page-home .home-first-screen {
    display: grid;
    grid-template-rows: 7fr 5fr;
    height: var(--home-first-height);
    min-height: var(--home-first-height);
    gap: var(--home-section-gap);
    padding: var(--home-first-pad-top) 0 var(--home-first-pad-bottom);
    box-sizing: border-box;
}

.page-home .home-first-screen .home-section {
    padding: 0;
    min-height: 0;
    min-width: 0;
}

.page-home .explore-types {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.page-home .popular-styles {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.page-home .popular-styles .home-section__title {
    flex-shrink: 0;
    margin-bottom: clamp(0.75rem, 1.6vh, 1.15rem);
}

/* Three circle buttons: image fills the circle, description sits under it.
   Widths and diameters scale so the row stays on one line next to section 2. */
.honey-types-row {
    display: flex;
    justify-content: center;
    gap: clamp(1rem, 3.5vw, 4rem);
    padding: 0;
    flex-wrap: nowrap;
}

.honey-type-circle-btn {
    text-align: center;
    text-decoration: none;
    color: inherit;
    width: clamp(12rem, 28vw, 20rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.2s ease;
    min-width: 0;
}

.honey-type-circle-btn:hover {
    transform: translateY(-4px);
}

.honey-type-circle-btn__image-wrapper {
    width: var(--home-circle-size, 13.75rem);
    height: var(--home-circle-size, 13.75rem);
    border-radius: 50%;
    overflow: hidden;
    background-color: var(--plate-bg);
    border: 3px solid var(--primary-color);
    box-shadow: var(--shadow-md);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    flex-shrink: 0;
}

.honey-type-circle-btn__image-wrapper img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.honey-type-circle-btn:hover .honey-type-circle-btn__image-wrapper {
    border-color: var(--primary-hover);
    box-shadow: var(--shadow-primary-hover);
}

.honey-type-circle-btn:focus-visible {
    outline: none;
}

.honey-type-circle-btn:focus-visible .honey-type-circle-btn__image-wrapper {
    box-shadow: var(--focus-ring);
}

.honey-type-circle-btn__text {
    margin-top: 0.85rem;
}

.honey-type-circle-btn__text h3 {
    font-size: clamp(1.35rem, 2.6vh, 1.85rem);
    font-weight: 700;
    color: var(--secondary-color);
    margin-bottom: 0.4rem;
    line-height: 1.2;
}

.honey-type-circle-btn__text p {
    font-size: clamp(1rem, 1.85vh, 1.2rem);
    color: var(--text-color);
    line-height: 1.45;
    margin: 0;
}

[data-theme="high-contrast"] .honey-type-circle-btn__image-wrapper {
    border-width: 3px;
    border-color: var(--primary-color);
    box-shadow: none;
}

/* ── Popular Styles: large portrait image cards ─────────────────────────────
   Four tall cards in a 4-column (→2→1) grid. Each card is a clickable anchor
   whose background is a photo overlaid with a dark gradient so the white text
   at the bottom is always legible. The image is decorative — the card label
   in the DOM is the accessible name.
   ----------------------------------------------------------------------- */

.home-section__title,
.product-rail__title {
    font-size: clamp(1.5rem, 3.2vh, 2.1rem);
    font-weight: 700;
    color: var(--secondary-color);
    line-height: 1.2;
    margin: 0;
}

.home-section__title {
    margin-bottom: 0.75rem;
}

.home-section__subtitle {
    color: var(--text-muted);
    margin: 0 0 1rem;
    font-size: 0.95rem;
}

.popular-styles-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: clamp(0.75rem, 1.5vw, 1.5rem);
    padding: 0;
    flex: 1 1 auto;
    min-height: 0;
}

.popular-style-card {
    position: relative;
    height: 100%;
    min-height: 0;
    border-radius: var(--radius-lg);
    background-color: var(--secondary-color);
    text-decoration: none;
    display: flex;
    align-items: flex-end;
    padding: clamp(1rem, 2vh, 1.75rem);
    box-shadow: var(--shadow-md);
    transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1),
                box-shadow 0.3s ease;
    overflow: hidden;
}

/* Photo layer — blurred by default, sharpens on hover.
   inset: -8px oversizes the layer so blur edge artefacts stay hidden. */
.popular-style-card::before {
    content: '';
    position: absolute;
    inset: -8px;
    background-image: var(--bg-img);
    background-size: cover;
    background-position: center;
    filter: blur(3px);
    transition: filter 0.4s ease;
    z-index: 0;
}

.popular-style-card:hover::before {
    filter: blur(0);
}

/* Gradient scrim — sits above the photo, below the text */
.popular-style-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.65));
    z-index: 1;
    pointer-events: none;
}

.popular-style-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.popular-style-card:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 3px;
}

.popular-style-card__content {
    position: relative;
    z-index: 2;
    color: #ffffff;
}

.popular-style-card__content h3 {
    font-size: clamp(1.05rem, 1.8vh, 1.4rem);
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 0.35rem;
    line-height: 1.2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.popular-style-card__content p {
    font-size: clamp(0.8rem, 1.3vh, 0.95rem);
    opacity: 0.9;
    margin: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

[data-theme="high-contrast"] .popular-style-card {
    border: 2px solid var(--primary-color);
    box-shadow: none;
}

[data-theme="high-contrast"] .popular-style-card:hover {
    transform: none;
}

[data-theme="high-contrast"] .popular-style-card::before,
[data-theme="high-contrast"] .popular-style-card:hover::before {
    filter: none;
}

@media (max-width: 959px) {
    .popular-styles-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 599px) {
    .home-section__title {
        font-size: 1.25rem;
        text-align: left;
    }

    /* ── Flat background — eliminates gradient bleed over text on small screens.
       First screen fills the viewport below the header so section 3 stays
       below the fold; section 2 (1fr) absorbs the leftover height. */
    .page-home .main-content {
        --home-first-height: calc(100svh - 8.5rem);
        --home-first-pad-top: 1rem;
        --home-first-pad-bottom: 1rem;
        --home-section-gap: 1rem;
        background: var(--bg-color);
    }

    .page-home .main-content::before {
        content: '';
        display: block;
        height: 3.5rem;
        background: var(--header-band-end);
        margin-bottom: -3.5rem;
        pointer-events: none;
    }

    /* ── Section 1: keep 3 columns; scale so they fit at 320px ──────────────
       The previous clamp floor (6rem) forced ~96px × 3 plus gaps past the
       padded content box. Equal flex shares the row; min-width: 0 lets
       circles and type shrink instead of overflowing. */
    .page-home .explore-types {
        align-items: center;
    }

    .page-home .honey-types-row {
        gap: clamp(0.35rem, 2.5vw, 1rem);
        justify-content: center;
        width: 100%;
    }

    .page-home .honey-type-circle-btn {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        max-width: 9rem;
    }

    .page-home .honey-type-circle-btn__image-wrapper {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
        border-width: 2px;
    }

    .page-home .honey-type-circle-btn__text {
        margin-top: 0.4rem;
    }

    .page-home .honey-type-circle-btn__text h3 {
        font-size: clamp(0.68rem, 3.2vw, 1rem);
        margin-bottom: 0.15rem;
        overflow-wrap: break-word;
    }

    .page-home .honey-type-circle-btn__text p {
        font-size: clamp(0.58rem, 2.5vw, 0.8rem);
        line-height: 1.3;
        margin: 0;
        overflow-wrap: break-word;
    }

    /* ── First screen: fill the viewport; section 2 grows into the remainder */
    .page-home .home-first-screen {
        height: var(--home-first-height);
        min-height: var(--home-first-height);
        grid-template-rows: auto 1fr;
    }

    /* ── Section 2: full-bleed carousel (bleeds out of .container 16 px padding) */
    .page-home .popular-styles {
        margin-left: -1rem;
        margin-right: -1rem;
        overflow: visible;
        min-height: 0;
        height: 100%;
    }

    .page-home .popular-styles .home-section__title {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Carousel track — horizontal scroll snap */
    .page-home .popular-styles-grid {
        display: flex;
        flex-direction: row;
        overflow-x: scroll;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 0.75rem;
        /* padding-inline gives the first/last card a proper centered snap point */
        padding: 0.5rem 12.5vw 0.75rem;
        align-items: stretch;
        flex: 1 1 auto;
        min-height: 0;
    }

    .page-home .popular-styles-grid::-webkit-scrollbar {
        display: none;
    }

    /* Photo layer: always sharp on mobile — no desktop blur/unblur trick */
    .page-home .popular-style-card::before {
        filter: blur(0);
    }

    /* Disable desktop hover lift & unblur — tap would trigger both */
    .page-home .popular-style-card:hover::before {
        filter: blur(0);
    }

    .page-home .popular-style-card:hover {
        transform: none;
        box-shadow: var(--shadow-md);
    }

    /* Width stays 75vw (peek of the next card). Height follows the leftover
       first-screen space — no aspect-ratio, no max-height. */
    .page-home .popular-style-card {
        flex: 0 0 75vw;
        height: auto;
        min-height: 0;
        align-self: stretch;
        scroll-snap-align: center;
        padding: 0.85rem 1rem;
        transition: filter 0.35s ease,
                    opacity 0.35s ease,
                    transform 0.35s ease;
        will-change: filter, opacity, transform;
    }

    /* Side (peeking) cards — only after JS marks the grid as ready */
    .page-home .popular-styles-grid.is-ready .popular-style-card:not(.is-active) {
        filter: blur(4px);
        opacity: 0.55;
        transform: scale(0.92);
    }

    /* Active (center) card — always sharp */
    .page-home .popular-style-card.is-active {
        filter: blur(0);
        opacity: 1;
        transform: scale(1);
    }

    /* Top-rated: same centered peek carousel as popular styles */
    .page-home .top-rated {
        margin-left: -1rem;
        margin-right: -1rem;
        overflow: visible;
    }

    .page-home .top-rated .product-rail__header {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .page-home .top-rated .product-rail__track {
        margin-left: 0;
        margin-right: 0;
    }

    .page-home .top-rated .product-rail__scroller {
        padding: 0.5rem 12.5vw 0.75rem;
        scroll-padding-inline: 12.5vw;
        gap: 0.75rem;
    }

    .page-home .top-rated .product-rail__scroller > .top-rated-card {
        flex: 0 0 75vw;
        width: 75vw;
        max-width: none;
        scroll-snap-align: center;
    }

}

@media (max-height: 600px) {
    .page-home .main-content {
        --home-band-depth: calc(var(--home-first-pad-top) + var(--home-circle-size) * 0.3);
        --home-circle-size: clamp(5.25rem, 18vh, 9rem);
    }

    .page-home .home-first-screen {
        height: auto;
        min-height: 0;
        grid-template-rows: auto auto;
    }
}

/* Short desktop windows only — mobile cards fill leftover first-screen height. */
@media (max-height: 600px) and (min-width: 600px) {
    .popular-style-card {
        height: clamp(8.5rem, 24vh, 12rem);
    }
}

/* ── Top Rated on Melverum: ranked listing carousel ────────────────────────
   Six jars in the product-rail scroller. Hidden entirely when empty. Each
   card is one link; the rank chip sits on the photo. Gold is --primary-color
   so high-contrast theme still has a named token, not a one-off yellow.
   Markup: app/templates/partials/top_rated.html
   ----------------------------------------------------------------------- */

.top-rated__heading {
    min-width: 0;
    flex: 1;
}

.top-rated .product-rail__title {
    margin-bottom: 0.2rem;
}

.top-rated .home-section__subtitle {
    margin: 0;
}

.top-rated__discover {
    flex-shrink: 0;
    border-radius: 999px;
    padding: 0.4rem 1.2rem;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
}

.top-rated .product-rail__track {
    /* Overlay arrows sit on the last/first visible card, not in the header. */
    overflow: visible;
}

.top-rated.product-rail--scrollable .product-rail__arrow {
    position: absolute;
    top: 28%;
    z-index: 3;
    width: 2.5rem;
    height: 2.5rem;
    background: var(--surface-color);
    border: 1px solid var(--hairline);
    box-shadow: var(--shadow-md);
    color: var(--secondary-color);
}

.top-rated.product-rail--scrollable .product-rail__prev {
    left: -0.4rem;
}

.top-rated.product-rail--scrollable .product-rail__next {
    right: -0.4rem;
}

@media (min-width: 769px) {
    .top-rated .product-rail__scroller > .top-rated-card {
        flex: 0 0 auto;
        width: clamp(240px, calc((100% - 2 * 1rem) / 3), 340px);
        scroll-snap-align: start;
    }
}

.top-rated-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--surface-color);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.top-rated-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.top-rated-card:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 3px;
}

.top-rated-card__image-wrap {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    background-color: var(--plate-bg);
    overflow: hidden;
}

.top-rated-card__image-wrap > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.top-rated-card__rank {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 2;
    background-color: var(--primary-color);
    color: var(--text-on-primary);
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.4rem 0.8rem;
    border-radius: var(--radius-sm);
}

.top-rated-card__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--text-muted);
}

.top-rated-card__placeholder svg {
    width: 3rem;
    height: 3rem;
}

.top-rated-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    padding: 1rem 1.1rem 1.15rem;
    flex: 1 1 auto;
}

.top-rated-card__title-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    width: 100%;
}

.top-rated-card__title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--secondary-color);
    line-height: 1.3;
    min-width: 0;
}

.top-rated-card__verified {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.05rem;
    height: 1.05rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--secondary-color);
    color: #ffffff;
}

.top-rated-card__origin {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    color: var(--text-muted);
    font-size: 0.9rem;
    min-width: 0;
    width: 100%;
}

.top-rated-card__flag {
    flex-shrink: 0;
    line-height: 1.35;
}

.top-rated-card__place {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.top-rated-card__city,
.top-rated-card__region {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.top-rated-card__apiary {
    color: var(--text-color);
    font-size: 0.9rem;
}

.top-rated-card__type {
    color: var(--text-color);
    font-size: 0.95rem;
    font-weight: 600;
}

.top-rated-card__rating {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.top-rated-card__star {
    display: inline-flex;
    color: var(--secondary-color);
}

.top-rated-card__score {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--secondary-color);
}

.top-rated-card__count {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.top-rated-card__views {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.top-rated-card__views-icon {
    display: inline-flex;
    color: var(--text-muted);
}

[data-theme="high-contrast"] .top-rated-card {
    border-width: 2px;
    border-color: var(--primary-color);
    box-shadow: none;
}

[data-theme="high-contrast"] .top-rated-card:hover {
    transform: none;
}

/* ── Explore Honey Origins: horizontal landscape slider ─────────────────────
   Six cards in the product-rail scroller. Photo is optional: the plate colour
   and gradient scrim keep the type readable when /static/images/origins/ is
   still empty. Same arrow / edge-fade behaviour as listing rails.
   ----------------------------------------------------------------------- */

.origin-slider .product-rail__scroller > .origin-card {
    flex: 0 0 auto;
    width: clamp(240px, calc((100% - 2 * 1rem) / 3), 360px);
    scroll-snap-align: start;
}

.origin-card {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 18rem;
    padding: 1.25rem 1.35rem;
    border-radius: var(--radius-lg);
    background-color: var(--secondary-color);
    text-decoration: none;
    color: #ffffff;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.origin-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--secondary-color);
    background-image: var(--bg-img);
    background-size: cover;
    background-position: center;
    z-index: 0;
}

.origin-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.72));
    z-index: 1;
    pointer-events: none;
}

.origin-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.origin-card:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 3px;
}

.origin-card__body {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.origin-card__title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.2;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.origin-card__desc {
    font-size: 0.9rem;
    line-height: 1.4;
    opacity: 0.92;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.origin-card__honey {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--accent-color);
}

.origin-card__count {
    font-size: 0.8rem;
    opacity: 0.85;
}

[data-theme="high-contrast"] .origin-card {
    border: 2px solid var(--primary-color);
    box-shadow: none;
}

[data-theme="high-contrast"] .origin-card:hover {
    transform: none;
}

[data-theme="high-contrast"] .origin-card::after {
    background: rgba(0, 0, 0, 0.55);
}

@media (max-width: 600px) {
    .origin-slider .product-rail__scroller > .origin-card {
        min-height: 16rem;
    }
}

/* ── Product rail: a horizontal strip of cards ───────────────────────────────
   Nav: title on the left, [see all] + [←][→] arrows on the right.
   Arrows and edge fades are visible only when content overflows (JS adds
   .product-rail--scrollable). When all cards fit, the nav shows only the
   "see all" link and the header stays uncluttered.
   --------------------------------------------------------------------------- */
.product-rail {
    margin-bottom: 2rem;
}

.product-rail__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: clamp(0.75rem, 1.6vh, 1.15rem);
    padding: 0 0.25rem;
}

/* Right side of the header: see-all link + arrow pair. */
.product-rail__nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.product-rail__see-all {
    font-size: 0.9rem;
    color: var(--primary-color);
    text-decoration: none;
    margin-right: 0.25rem;
}

.product-rail__see-all:hover {
    text-decoration: underline;
}

/* Mobile footer variant — hidden by default, shown only on small screens */
.product-rail__see-all--footer {
    display: none;
}

/* Circular prev/next buttons.
   Hidden (display:none, no space in header) when all cards fit the viewport.
   JS adds .product-rail--scrollable when scrollWidth > clientWidth, which
   makes them appear. */
.product-rail__arrow {
    display: none;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 1px solid var(--hairline);
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease,
                background-color 0.15s ease;
    flex-shrink: 0;
}

.product-rail--scrollable .product-rail__arrow {
    display: inline-flex;
}

.product-rail__arrow:hover:not(:disabled) {
    border-color: var(--text-subtle);
    color: var(--text-color);
    background: var(--gray-100);
}

.product-rail__arrow:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.product-rail__arrow:disabled {
    opacity: 0.3;
    cursor: default;
}

/* Wrapper that carries the edge-fade gradients as pseudo-elements. */
.product-rail__track {
    position: relative;
}

/* Left and right gradient edges — they hint at off-screen content without
   forcing the user to notice a scrollbar. pointer-events:none lets clicks
   pass through to the cards beneath. */
.product-rail__track::before,
.product-rail__track::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3.5rem;
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.2s ease;
}

/* Left fade: invisible at start, appears when the user has scrolled. */
.product-rail__track::before {
    left: 0;
    background: linear-gradient(to right, var(--bg-color), transparent);
    opacity: 0;
}

/* Right fade: visible at start, disappears when the rail reaches the end. */
.product-rail__track::after {
    right: 0;
    background: linear-gradient(to left, var(--bg-color), transparent);
    opacity: 1;
}

.product-rail__track.is-scrolled::before  { opacity: 1; }
.product-rail__track.is-end::after        { opacity: 0; }

/* When there is no overflow at all (rail fits the viewport), both fades off. */
.product-rail:not(.product-rail--scrollable) .product-rail__track::before,
.product-rail:not(.product-rail--scrollable) .product-rail__track::after  { opacity: 0; }

.product-rail__scroller {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 0.25rem;
    padding: 0.25rem;
    -webkit-overflow-scrolling: touch;
    /* Scrollbar is hidden — the arrows and edge fades replace it. */
    scrollbar-width: none;
}

.product-rail__scroller::-webkit-scrollbar {
    display: none;
}

.product-rail__scroller:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.product-rail__scroller > .product-card {
    flex: 0 0 auto;
    /* Fluid: three cards across the container at desktop, matching the mockup
       shelf. Below ~900 px the floor kicks in and the scroller overflows. */
    width: clamp(200px, calc((100% - 2 * 1rem) / 3), 340px);
    scroll-snap-align: start;
}

/* High-contrast: arrows need the standard 2px border. */
[data-theme="high-contrast"] .product-rail__arrow {
    border-width: 2px;
}

/* ── Home empty state ── */
.home-empty {
    text-align: center;
    padding: 4rem 1rem;
    color: var(--text-muted);
}

.home-empty p {
    margin-bottom: 1.5rem;
}

/* ── Mobile adjustments for home ── */
@media (max-width: 768px) {
    .page-home .main-content {
        padding-top: 0;
    }

    .home-hero {
        padding: 0;
        margin-bottom: 0;
    }

    .home-hero__heading {
        font-size: 1.75rem;
    }

    .home-hero__positioning {
        font-size: 1.05rem;
    }

    .honey-types-row {
        gap: 1.25rem;
    }

    .honey-type-chips {
        justify-content: flex-start;
        overflow-x: auto;
        margin-top: 0;
        padding-top: 0.5rem;
        padding-bottom: 0.25rem;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .honey-type-chips::-webkit-scrollbar {
        display: none;
    }

    .honey-type-chip {
        flex: 0 0 6.25rem;
        width: 6.25rem;
        max-width: none;
    }

    .product-rail__header {
        justify-content: flex-start;
    }

    .product-rail__title {
        font-size: 1.25rem;
        text-align: left;
    }

    .product-rail__nav {
        display: none;
    }

    .top-rated__discover,
    .top-rated.product-rail--scrollable .product-rail__arrow {
        display: none;
    }

    .product-rail__scroller > .product-card {
        /* Two cards visible + peek of a third to signal scrollability. */
        width: clamp(150px, calc((100% - 1rem) / 2.2), 180px);
    }

    .product-rail__track::before,
    .product-rail__track::after {
        display: none;
    }

    .product-rail__see-all--footer {
        display: block;
        margin-top: 0.9rem;
        text-align: center;
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--primary-color);
        text-decoration: none;
        padding: 0.5rem 0;
    }

    .product-rail__see-all--footer:hover {
        text-decoration: underline;
    }

    /* ── Origin + top-rated: same snap carousel as popular styles ─────────── */
    .origin-slider .product-rail__track,
    .top-rated .product-rail__track {
        margin-left: -1rem;
        margin-right: -1rem;
        overflow: visible;
    }

    .origin-slider .product-rail__scroller,
    .top-rated .product-rail__scroller {
        display: flex;
        overflow-x: scroll;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 12.5vw;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 0.75rem;
        padding: 0.5rem 12.5vw 0.75rem;
        align-items: stretch;
    }

    .origin-slider .product-rail__scroller::-webkit-scrollbar,
    .top-rated .product-rail__scroller::-webkit-scrollbar {
        display: none;
    }

    .origin-slider .product-rail__scroller > .origin-card {
        flex: 0 0 75vw;
        width: 75vw;
        max-width: none;
        min-height: 13rem;
        scroll-snap-align: center;
        padding: 1rem;
        transition: filter 0.35s ease,
                    opacity 0.35s ease,
                    transform 0.35s ease;
        will-change: filter, opacity, transform;
    }

    .origin-slider .origin-card:hover {
        transform: none;
        box-shadow: var(--shadow-md);
    }

    .origin-slider .product-rail__scroller.is-ready .origin-card:not(.is-active) {
        filter: blur(4px);
        opacity: 0.55;
        transform: scale(0.92);
    }

    .origin-slider .origin-card.is-active {
        filter: blur(0);
        opacity: 1;
        transform: scale(1);
    }

    .top-rated .product-rail__scroller > .top-rated-card {
        flex: 0 0 75vw;
        width: 75vw;
        max-width: none;
        scroll-snap-align: center;
        transition: filter 0.35s ease,
                    opacity 0.35s ease,
                    transform 0.35s ease;
        will-change: filter, opacity, transform;
    }

    .top-rated .top-rated-card:hover {
        transform: none;
        box-shadow: var(--shadow-md);
    }

    .top-rated .product-rail__scroller.is-ready .top-rated-card:not(.is-active) {
        filter: blur(4px);
        opacity: 0.55;
        transform: scale(0.92);
    }

    .top-rated .top-rated-card.is-active {
        filter: blur(0);
        opacity: 1;
        transform: scale(1);
    }
}

/* ── Explore page ───────────────────────────────────────────────────────────
   A sticky rail of grouped facets on the left, results on the right, and the
   filters in force as chips above them. Same rules as the product card and the
   product page it sits beside: no card chrome, no shadows, hairlines only, and
   amber as an accent on what is *on* — never as a surface.

   The rail's job is to make the current filter state legible at a glance, which
   is what the chips are for: one per active filter, each removable on its own.

   Below 900px the rail becomes a sheet. It is opened by a checkbox and two
   labels — #explore-filters is the only state involved, so it works with the
   stylesheet alone and app/static/js/facets.js only adds Escape.
   Markup: app/templates/ads/list.html
   Content: app.presenters.facets
   ------------------------------------------------------------------------- */
.explore {
    /* Clears the sticky two-tier header, so a rail scrolled to the top is not
       filed underneath it. */
    --rail-offset: 7rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 1rem;
}

.explore__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.explore__head-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.explore__title {
    margin: 0;
    color: var(--text-color);
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 3vw, 2.1rem);
    font-weight: 600;
    letter-spacing: -0.02em;
}

/* The sheet's opener and its state: desktop has neither. */
.explore__sheet-open {
    display: none;
}

.explore__scrim {
    display: none;
}

.explore__layout {
    display: grid;
    grid-template-columns: 16rem minmax(0, 1fr);
    gap: 2.75rem;
    align-items: start;
}

.explore__results {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}

.explore__grid {
    margin-top: 0;
}

/* ── The rail ── */
.facet-rail {
    position: sticky;
    top: var(--rail-offset);
    max-height: calc(100vh - var(--rail-offset) - 1rem);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.facet-rail__form {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.facet-rail__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-bottom: 0.75rem;
}

.facet-rail__heading {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Only the sheet has anything to close. */
.facet-rail__close {
    display: none;
}

.facet-rail__apply {
    margin-top: 1rem;
}

.facet-location {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-top: 0.75rem;
}

.locate-field {
    position: relative;
    display: flex;
    align-items: stretch;
}

.locate-field__input {
    width: 100%;
    padding-right: 2.5rem;
}

.locate-field__btn {
    position: absolute;
    top: 50%;
    right: 0.25rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.locate-field__btn:hover,
.locate-field__btn:focus-visible {
    color: var(--primary-color);
    outline: none;
}

.locate-field__btn:focus-visible {
    box-shadow: var(--focus-ring);
}

.locate-field__btn.is-active {
    color: var(--primary-color);
}

.locate-field__btn:disabled {
    opacity: 0.6;
    cursor: wait;
}

.facet-location__input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    background: var(--surface-color);
    color: var(--text-color);
    font-family: inherit;
    font-size: 0.95rem;
}

.facet-location__input:focus-visible {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: var(--focus-ring);
}

.facet-location__input::placeholder {
    color: var(--text-subtle);
}

.facet-location__radius {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.facet-location__radius .apiary-radius-select {
    flex: 1 1 auto;
    min-width: 4.5rem;
}

/* ── One group ── */
.facet-group {
    padding: 0.9rem 0;
    border-top: 1px solid var(--hairline);
}

.facet-group:last-of-type {
    border-bottom: 1px solid var(--hairline);
}

.facet-group__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.facet-group__summary::-webkit-details-marker {
    display: none;
}

/* The chevron is the only thing that moves when a group opens. */
.facet-group__summary::after {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    margin-right: 0.15rem;
    border-right: 1.5px solid var(--text-muted);
    border-bottom: 1.5px solid var(--text-muted);
    transform: rotate(45deg) translate(-0.1rem, -0.1rem);
    transition: transform 0.2s ease;
}

.facet-group[open] > .facet-group__summary::after {
    transform: rotate(-135deg) translate(-0.15rem, -0.15rem);
}

.facet-group__summary:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: calc(var(--radius) - 6px);
}

.facet-group__label {
    color: var(--text-color);
    font-size: 0.95rem;
    font-weight: 600;
}

/* How many of this group's options are on — the count that lets a folded group
   still say it is doing something. */
.facet-group__count {
    margin-left: auto;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary-color) 16%, transparent);
    color: var(--primary-color);
    font-size: 0.72rem;
    font-weight: 700;
}

.facet-group--sort {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    border-top: 0;
    padding-top: 0;
}

.facet-sort__select {
    width: 100%;
    padding-block: 0.45rem;
    padding-left: 0.6rem;
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    background-color: var(--surface-color);
    color: var(--text-color);
    font-family: inherit;
    font-size: 0.9rem;
    cursor: pointer;
}

.facet-sort__select:focus-visible {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: var(--focus-ring);
}

.facet-group__options {
    margin: 0.6rem 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.facet-option {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.3rem 0.35rem;
    border-radius: calc(var(--radius) - 6px);
    color: var(--text-muted);
    font-size: 0.9rem;
    cursor: pointer;
    user-select: none;
}

.facet-option:hover {
    background: var(--gray-100);
    color: var(--text-color);
}

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

.facet-option:has(input:checked) .facet-option__label {
    color: var(--text-color);
    font-weight: 600;
}

.facet-option:focus-within {
    outline: none;
    box-shadow: var(--focus-ring);
}

.facet-range {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.6rem;
}

.facet-range__input {
    width: 100%;
    min-width: 0;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    background-color: var(--surface-color);
    color: var(--text-color);
    font-family: inherit;
    font-size: 0.9rem;
}

.facet-range__input:focus-visible {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: var(--focus-ring);
}

.facet-range__separator {
    color: var(--text-muted);
}

/* ── Beekeeper search input — free-text within the group ── */
.facet-beekeeper {
    margin-top: 0.75rem;
}

.facet-beekeeper__input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    background: var(--surface-color);
    color: var(--text-color);
    font-family: inherit;
    font-size: 0.95rem;
}

.facet-beekeeper__input:focus-visible {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: var(--focus-ring);
}

.facet-beekeeper__input::placeholder {
    color: var(--text-subtle);
}

/* ── Sub-category heading inside a facet options list ── */
/* Select-all for a honey-style group (Monofloral / Multifloral / Honeydew). */
.facet-group__subheading {
    margin: 0.65rem 0 0.15rem;
    padding: 0;
    list-style: none;
}

.facet-group__subheading:first-child {
    margin-top: 0.5rem;
}

.facet-group__subheading .facet-option__label {
    color: var(--text-subtle);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

/* ── Active filters, as chips ── */
.facet-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.facet-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    color: var(--text-color);
    font-size: 0.85rem;
    text-decoration: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.facet-chip:hover {
    border-color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 8%, transparent);
}

.facet-chip:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.facet-chip__group {
    color: var(--text-muted);
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.facet-chip__value {
    font-weight: 600;
}

.facet-chip__remove {
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1;
}

.facet-chip:hover .facet-chip__remove {
    color: var(--text-color);
}

.facet-chips__clear {
    color: var(--text-muted);
    font-size: 0.85rem;
    text-decoration: underline;
}

.facet-chips__clear:hover {
    color: var(--text-color);
}

/* ── High contrast: the theme's borders, for controls it has never met ── */
[data-theme="high-contrast"] .facet-sort__select,
[data-theme="high-contrast"] .facet-range__input,
[data-theme="high-contrast"] .facet-beekeeper__input,
[data-theme="high-contrast"] .facet-chip {
    border-width: 2px;
}

/* ── The rail as a sheet ────────────────────────────────────────────────────
   Below 900px a 15rem column would squeeze the grid to one card, so the rail
   slides in over the page instead and the grid keeps the full width. The state
   is the #explore-filters checkbox above the layout: the button that opens it
   and the two that close it are all <label for> — no script decides anything.
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .explore__sheet-open {
        display: inline-flex;
    }

    .explore__layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.25rem;
    }

    .facet-rail {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        /* Over the sticky header, which sits at 1100. */
        z-index: 1200;
        width: min(21rem, 88vw);
        max-height: none;
        padding: 1.25rem;
        background: var(--surface-color);
        border-right: 1px solid var(--hairline);
        transform: translateX(-100%);
        /* Off-screen is not closed: without this the facets stay in the tab
           order and in the accessibility tree, and tabbing past the results
           header drops the reader into a panel they cannot see. */
        visibility: hidden;
        transition: transform 0.25s ease, visibility 0.25s ease;
    }

    .explore__sheet-state:checked ~ .explore__layout .facet-rail {
        transform: none;
        visibility: visible;
    }

    .explore__scrim {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1150;
        background: rgba(0, 0, 0, 0.45);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }

    .explore__sheet-state:checked ~ .explore__layout .explore__scrim {
        opacity: 1;
        pointer-events: auto;
    }

    .facet-rail__close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        height: 2rem;
        margin: -0.25rem;
        border-radius: 50%;
        color: var(--text-muted);
        cursor: pointer;
    }

    .facet-rail__close svg {
        width: 1.1rem;
        height: 1.1rem;
    }

    .facet-rail__close:hover {
        background: var(--gray-100);
        color: var(--text-color);
    }
}

@media (prefers-reduced-motion: reduce) {
    .facet-rail,
    .explore__scrim {
        transition: none;
    }

    .explore .product-card__image,
    .explore .product-card__placeholder {
        transition: none;
    }

    .explore .product-card:hover .product-card__image,
    .explore .product-card:hover .product-card__placeholder {
        transform: none;
    }
}

/* ── Checkbox label (profile forms) ── */
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    border-radius: calc(var(--radius) - 2px);
    font-size: 0.9rem;
    color: var(--text-color);
    cursor: pointer;
    user-select: none;
}

.checkbox-label:hover {
    background: var(--gray-100);
}

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

/* ── Ads grid — curated shelf: fewer columns, more air ── */
.ads-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
    gap: 2.75rem 2rem;
    margin-top: 2rem;
}

/* Explore catalog: roomier shelf (max ~3 columns on a 1200px content width). */
.explore[data-layout-root] .ads-grid,
.explore .explore__grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
    gap: 3rem 2.25rem;
    margin-top: 0.5rem;
}

/* Desktop list: one white card per row — photo, copy, rating/price.
   `auto` uses this above 900px (the explore sheet breakpoint); `list` always
   can. Tiles below 900px are in the max-width block further down. */
@media (min-width: 901px) {
    .explore:is([data-layout="list"], [data-layout="auto"]) .ads-grid {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }

    .explore:is([data-layout="list"], [data-layout="auto"]) .product-card {
        display: grid;
        grid-template-columns: 7.5rem minmax(0, 1fr) 9.75rem;
        grid-template-rows: auto auto auto 1fr;
        align-items: start;
        column-gap: 1.35rem;
        row-gap: 0.2rem;
        padding: 1.2rem 1.4rem;
        background: var(--surface-color);
        border-radius: 1rem;
        box-shadow: var(--shadow-sm);
        border-bottom: none;
    }

    .explore:is([data-layout="list"], [data-layout="auto"]) .product-card:hover {
        background-color: var(--surface-color);
        box-shadow: var(--shadow-md);
    }

    .explore:is([data-layout="list"], [data-layout="auto"]) .product-card:hover .product-card__title {
        text-decoration: none;
    }

    .explore:is([data-layout="list"], [data-layout="auto"]) .product-card__plate {
        grid-column: 1;
        grid-row: 1 / -1;
        width: 7.5rem;
        aspect-ratio: 3 / 4;
        align-self: stretch;
        background: transparent;
        border-radius: 0.6rem;
    }

    .explore:is([data-layout="list"], [data-layout="auto"]) .product-card__image,
    .explore:is([data-layout="list"], [data-layout="auto"]) .product-card__placeholder {
        object-fit: contain;
        object-position: center;
        transition: transform 0.35s ease;
    }

    .explore:is([data-layout="list"], [data-layout="auto"]) .product-card:hover .product-card__image,
    .explore:is([data-layout="list"], [data-layout="auto"]) .product-card:hover .product-card__placeholder {
        transform: scale(1.06);
    }

    .explore:is([data-layout="list"], [data-layout="auto"]) .product-card__body {
        display: contents;
    }

    .explore:is([data-layout="list"], [data-layout="auto"]) .product-card__provenance {
        grid-column: 2;
        grid-row: 1;
        min-height: 0;
        color: var(--text-muted);
        font-size: 0.92rem;
    }

    .explore:is([data-layout="list"], [data-layout="auto"]) .product-card__title {
        grid-column: 2;
        grid-row: 2;
        min-height: 0;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        font-size: 1.2rem;
        font-weight: 700;
    }

    .explore:is([data-layout="list"], [data-layout="auto"]) .product-card__signals {
        display: none;
    }

    .explore:is([data-layout="list"], [data-layout="auto"]) .product-card__detail {
        grid-column: 2;
        grid-row: 3;
        min-height: 0;
    }

    .explore:is([data-layout="list"], [data-layout="auto"]) .product-card__foot {
        display: inline-flex;
        grid-column: 2;
        grid-row: 4;
        align-items: center;
        align-self: start;
        gap: 0.45rem;
        max-width: 100%;
        margin-top: 0.55rem;
        padding: 0.4rem 0.7rem;
        background: var(--plate-bg);
        border-radius: 0.5rem;
        color: var(--text-color);
        font-size: 0.78rem;
        line-height: 1.35;
    }

    .explore:is([data-layout="list"], [data-layout="auto"]) .product-card__foot-icon {
        display: inline-flex;
        flex-shrink: 0;
        color: var(--primary-color);
    }

    .explore:is([data-layout="list"], [data-layout="auto"]) .product-card__foot-icon .icon {
        fill: currentColor;
        stroke: currentColor;
    }

    .explore:is([data-layout="list"], [data-layout="auto"]) .product-card__foot-text {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .explore:is([data-layout="list"], [data-layout="auto"]) .product-card__slots {
        grid-column: 3;
        grid-row: 1 / span 2;
        display: flex;
        justify-content: flex-end;
        align-items: flex-start;
        min-height: 0;
    }

    .explore:is([data-layout="list"], [data-layout="auto"]) .product-card__rating {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 0.15rem;
        text-align: right;
    }

    .explore:is([data-layout="list"], [data-layout="auto"]) .product-card__rating-score {
        padding: 0;
        border-radius: 0;
        background: none;
        font-family: var(--font-display);
        font-size: 1.85rem;
        font-weight: 700;
        line-height: 1;
        letter-spacing: -0.03em;
    }

    .explore:is([data-layout="list"], [data-layout="auto"]) .product-card__stars {
        display: block;
    }

    .explore:is([data-layout="list"], [data-layout="auto"]) .product-card__rating-count {
        font-size: 0.75rem;
    }

    .explore:is([data-layout="list"], [data-layout="auto"]) .product-card__badge {
        display: none;
    }

    .explore:is([data-layout="list"], [data-layout="auto"]) .product-card__price-row {
        grid-column: 3;
        grid-row: 3 / span 2;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: flex-end;
        align-self: end;
        gap: 0.1rem;
        margin: 0;
        text-align: right;
    }

    .explore:is([data-layout="list"], [data-layout="auto"]) .product-card:not(:has(.product-card__slots)) .product-card__price-row {
        grid-row: 1 / span 4;
        align-self: center;
    }

    .explore:is([data-layout="list"], [data-layout="auto"]) .product-card__price {
        font-size: 1.2rem;
        font-weight: 700;
    }

    .explore:is([data-layout="list"], [data-layout="auto"]) .product-card__unit-price {
        font-size: 0.75rem;
    }
}

@media (max-width: 640px) {
    .explore[data-layout="list"] .product-card__body {
        grid-template-columns: 1fr;
        grid-template-areas:
            "provenance"
            "title"
            "slots"
            "detail"
            "price";
    }

    .explore[data-layout="list"] .product-card__price-row {
        align-items: flex-start;
        text-align: left;
        flex-direction: row;
        gap: 0.5rem;
    }

    .explore[data-layout="list"] .product-card__plate {
        width: 5.5rem;
    }
}

@media (max-width: 900px) {
    .explore[data-layout="list"] .ads-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .explore[data-layout="list"] .product-card {
        flex-direction: row;
        align-items: center;
        gap: 1rem;
        padding: 0.9rem;
        background: var(--surface-color);
        border-radius: 1rem;
        box-shadow: var(--shadow-sm);
        border-bottom: none;
    }

    .explore[data-layout="list"] .product-card__plate {
        width: 6rem;
        flex-shrink: 0;
        aspect-ratio: 3 / 4;
        background: transparent;
    }

    .explore[data-layout="list"] .product-card__image {
        object-fit: contain;
    }

    .explore[data-layout="list"] .product-card__body {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Mobile tiles: photo + rating/price on top, name below, proof bar at
       the foot. Applies to the auto default and to an explicit grid choice.
       List stays rows. */
    .explore:is([data-layout="auto"], [data-layout="grid"]) .ads-grid.explore__grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .explore:is([data-layout="auto"], [data-layout="grid"]) .product-card {
        display: grid;
        grid-template-columns: 6.75rem minmax(0, 1fr);
        grid-template-rows: auto auto auto auto auto auto auto;
        align-items: start;
        column-gap: 0.85rem;
        row-gap: 0.15rem;
        padding: 1rem;
        background: var(--surface-color);
        border-radius: 1rem;
        box-shadow: var(--shadow-sm);
        border-bottom: none;
    }

    .explore:is([data-layout="auto"], [data-layout="grid"]) .product-card:has(.product-card__foot) {
        padding-bottom: 0;
    }

    .explore:is([data-layout="auto"], [data-layout="grid"]) .product-card:hover {
        box-shadow: var(--shadow-md);
    }

    .explore:is([data-layout="auto"], [data-layout="grid"]) .product-card:hover .product-card__title {
        text-decoration: none;
    }

    .explore:is([data-layout="auto"], [data-layout="grid"]) .product-card__plate {
        grid-column: 1;
        grid-row: 1 / span 2;
        width: 6.75rem;
        aspect-ratio: 3 / 4;
        flex-shrink: 0;
        align-self: stretch;
        background: transparent;
        border-radius: 0.5rem;
    }

    .explore:is([data-layout="auto"], [data-layout="grid"]) .product-card__image {
        object-fit: contain;
        object-position: center;
    }

    .explore:is([data-layout="auto"], [data-layout="grid"]) .product-card__body {
        display: contents;
    }

    .explore:is([data-layout="auto"], [data-layout="grid"]) .product-card__slots {
        grid-column: 2;
        grid-row: 1;
        display: flex;
        justify-content: flex-end;
        align-items: flex-start;
        min-height: 0;
    }

    .explore:is([data-layout="auto"], [data-layout="grid"]) .product-card__rating {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 0.12rem;
        text-align: right;
    }

    .explore:is([data-layout="auto"], [data-layout="grid"]) .product-card__rating-score {
        padding: 0;
        border-radius: 0;
        background: none;
        font-family: var(--font-display);
        font-size: 1.7rem;
        font-weight: 700;
        line-height: 1;
        letter-spacing: -0.03em;
    }

    .explore:is([data-layout="auto"], [data-layout="grid"]) .product-card__stars {
        display: block;
    }

    .explore:is([data-layout="auto"], [data-layout="grid"]) .product-card__rating-count {
        font-size: 0.72rem;
    }

    .explore:is([data-layout="auto"], [data-layout="grid"]) .product-card__badge {
        display: none;
    }

    .explore:is([data-layout="auto"], [data-layout="grid"]) .product-card__price-row {
        grid-column: 2;
        grid-row: 2;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: flex-end;
        gap: 0.1rem;
        margin: 0;
        text-align: right;
        align-self: end;
    }

    .explore:is([data-layout="auto"], [data-layout="grid"]) .product-card:not(:has(.product-card__slots)) .product-card__price-row {
        grid-row: 1 / span 2;
        align-self: center;
    }

    .explore:is([data-layout="auto"], [data-layout="grid"]) .product-card__price {
        font-size: 1.15rem;
        font-weight: 700;
    }

    .explore:is([data-layout="auto"], [data-layout="grid"]) .product-card__unit-price {
        font-size: 0.72rem;
    }

    .explore:is([data-layout="auto"], [data-layout="grid"]) .product-card__provenance {
        grid-column: 1 / -1;
        grid-row: 3;
        margin-top: 0.85rem;
        min-height: 0;
        font-size: 0.92rem;
        color: var(--text-color);
        white-space: nowrap;
    }

    .explore:is([data-layout="auto"], [data-layout="grid"]) .product-card__title {
        grid-column: 1 / -1;
        grid-row: 4;
        min-height: 0;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        font-size: 1.05rem;
        font-weight: 700;
    }

    .explore:is([data-layout="auto"], [data-layout="grid"]) .product-card__signals {
        display: none;
    }

    .explore:is([data-layout="auto"], [data-layout="grid"]) .product-card__detail {
        grid-column: 1 / -1;
        grid-row: 5;
        min-height: 0;
        margin-bottom: 0.35rem;
    }

    .explore:is([data-layout="auto"], [data-layout="grid"]) .product-card__foot {
        display: flex;
        grid-column: 1 / -1;
        grid-row: 6;
        align-items: flex-start;
        gap: 0.5rem;
        margin: 0.5rem -1rem 0;
        padding: 0.7rem 1rem;
        background: var(--plate-bg);
        border-radius: 0 0 1rem 1rem;
        color: var(--text-color);
        font-size: 0.78rem;
        line-height: 1.35;
    }

    .explore:is([data-layout="auto"], [data-layout="grid"]) .product-card__foot-icon {
        display: inline-flex;
        flex-shrink: 0;
        margin-top: 0.05rem;
        color: var(--primary-color);
    }

    .explore:is([data-layout="auto"], [data-layout="grid"]) .product-card__foot-icon .icon {
        fill: currentColor;
        stroke: currentColor;
    }
}

/* ── Product card ──────────────────────────────────────────────────────────
   The buyer-facing card. No border, no shadow, no button: the card is the link
   and the photo is the only thing with a surface of its own. Every text row
   reserves its height whether or not it has content, so a grid of cards lines
   up and nothing shifts when the rating and badge slots start filling.
   Markup: app/templates/partials/product_card.html
   Content: app.presenters.product_card
   ------------------------------------------------------------------------- */
.product-card {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 0.5rem;
    border-radius: var(--radius);
    color: inherit;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.product-card:hover {
    background-color: transparent;
}

.product-card:hover .product-card__title {
    text-decoration: underline;
}

.product-card:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.product-card__plate {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 5;
    /* No padding: cover fills the plate edge-to-edge. */
    padding: 0;
    background-color: var(--plate-bg);
    border-radius: calc(var(--radius) - 4px);
    overflow: hidden;
}

/* Overlay (honey type + flag) is markup on every card so the template stays
   one component. It is hidden everywhere except the home rails. */
.product-card__overlay {
    display: none;
}

.product-card__overlay-passport {
    display: none;
}

.product-rail .product-card {
    padding: 0;
    gap: 0.6rem;
}

.product-rail .product-card:hover {
    background-color: transparent;
}

.product-rail .product-card:hover .product-card__title {
    text-decoration: underline;
}

.product-rail .product-card__plate {
    border-radius: 1.5rem;
    aspect-ratio: 4 / 3;
}

.product-rail .product-card__plate::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.5) 0%,
        rgba(0, 0, 0, 0.18) 38%,
        transparent 62%
    );
    pointer-events: none;
}

.product-rail .product-card__overlay {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    position: absolute;
    top: 0.85rem;
    left: 0.9rem;
    z-index: 1;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
    pointer-events: none;
}

.product-rail .product-card__overlay-name {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.product-rail .product-card__overlay-flag {
    font-size: 1.15rem;
    line-height: 1;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
}

.product-rail .product-card__overlay-passport {
    display: inline-flex;
    align-items: center;
    margin-top: 0.15rem;
    padding: 0.12rem 0.45rem;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.28);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-shadow: none;
}

.product-rail .product-card__passport {
    display: none;
}

.product-rail .product-card__provenance,
.product-rail .product-card__slots,
.product-rail .product-card__detail {
    display: none;
}

.product-rail .product-card__completeness {
    display: inline-flex;
}

.product-rail .product-card__body {
    padding: 0 0.35rem 0.2rem;
    gap: 0.15rem;
}

.product-rail .product-card__title {
    min-height: 0;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    font-size: 0.95rem;
}

.product-rail .product-card__price-row {
    margin-top: 0;
}

[data-theme="high-contrast"] .product-rail .product-card__overlay-name {
    background: #000;
    color: #fff;
    padding: 0.1rem 0.35rem;
    text-shadow: none;
}

[data-theme="high-contrast"] .product-rail .product-card__overlay-passport {
    background: #000;
    border-color: #fff;
    color: #fff;
}

[data-theme="high-contrast"] .product-rail .product-card__plate::after {
    display: none;
}

.product-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Missing photo is a designed state, not a hole with the word "No Image" in it.
   The plate has no padding when an image fills it, so the placeholder carries
   its own inset so the icon is not pressed into the corners. */
.product-card__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38%;
    padding: 1.5rem;
    color: var(--text-subtle);
    opacity: 0.55;
}

.product-card__placeholder svg {
    width: 100%;
    height: auto;
}

.product-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.product-card__provenance,
.product-card__detail {
    min-height: 1.35em;
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-card__origin-flag {
    margin-right: 0.35rem;
}

.product-card__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    min-height: 2.6em;
    overflow: hidden;
    color: var(--text-color);
    font-family: var(--font-display);
    font-size: 1.08rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.product-card__harvest {
    color: var(--text-muted);
    font-weight: 400;
}

/* Reserved only when the template renders the row (rating and/or badge). */
.product-card__slots {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.product-card__signals {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.product-card__passport {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.5rem;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    background: var(--surface-color);
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.product-card__completeness {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 0.1rem 0.45rem;
    border-radius: 6px;
    background-color: var(--gray-100);
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}

.product-card__rating {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.product-card__stars {
    display: none;
    position: relative;
    width: 4.35rem;
    height: 0.85rem;
}

.product-card__stars-track,
.product-card__stars-fill {
    display: flex;
    align-items: center;
    gap: 0.05rem;
    position: absolute;
    inset: 0;
    color: var(--gray-200);
}

.product-card__stars-fill {
    overflow: hidden;
    color: var(--primary-color);
}

.product-card__stars .icon {
    fill: currentColor;
    stroke: currentColor;
    flex-shrink: 0;
}

.product-card__foot {
    display: none;
}

.product-card__rating-score {
    padding: 0.1rem 0.45rem;
    border-radius: 6px;
    background-color: var(--gray-100);
    font-size: 0.85rem;
    font-weight: 700;
}

.product-card__rating-count {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.product-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.55rem;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    background: var(--surface-color);
    color: var(--text-color);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.product-card__badge .icon {
    color: var(--verified-color, #2a7732);
}

.product-card__price-row {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-top: 0.15rem;
}

.product-card__price {
    color: var(--text-color);
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.product-card__unit-price {
    color: var(--text-muted);
    font-size: 0.8rem;
}

/* ── Listing card (owner-facing: dashboard, which carries actions) ── */
.listing-card {
    background: var(--surface-color);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    border: 1px solid var(--hairline);
    transition: transform 0.2s, box-shadow 0.2s;
}

.listing-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
}

.listing-image {
    height: 200px;
    background-color: var(--plate-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.listing-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.no-image {
    color: var(--text-subtle);
    font-weight: 500;
    font-family: var(--font-ui);
}

.listing-content {
    padding: 1.5rem;
}

.listing-content h3 {
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
    font-family: var(--font-display);
}

.listing-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.honey-tag {
    background-color: var(--badge-bg);
    color: var(--badge-color);
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: var(--font-ui);
}

.ads-grid--owner .listing-card--hidden {
    opacity: 0.72;
}

.listing-hidden-badge {
    background: color-mix(in srgb, var(--text-muted) 16%, transparent);
    color: var(--text-muted);
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: var(--font-ui);
}

.listing-price {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--secondary-color);
    font-size: 1.15rem;
}

.listing-views {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-top: 0.5rem;
    font-family: var(--font-ui);
}

/* Owner ads as Explore list rows — same hairline grammar, room for actions. */
.ads-grid--owner {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 1rem;
}

.ads-grid--owner .listing-card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    border: none;
    border-bottom: 1px solid var(--hairline);
    background: transparent;
    overflow: visible;
}

.ads-grid--owner .listing-card:hover {
    transform: none;
    box-shadow: none;
    background: color-mix(in srgb, var(--plate-bg) 55%, transparent);
}

.ads-grid--owner .listing-image {
    width: 7.5rem;
    flex-shrink: 0;
    height: auto;
    aspect-ratio: 1;
    border-radius: var(--radius);
    overflow: hidden;
    margin: 1.15rem 0 1.15rem 0.25rem;
    background: var(--plate-bg);
}

.ads-grid--owner .listing-content {
    flex: 1 1 auto;
    min-width: 0;
    padding: 1.15rem 0.35rem 1.15rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.ads-grid--owner .listing-content h3 {
    margin: 0;
}

.ads-grid--owner .listing-content h3 a:hover {
    text-decoration: underline;
}

.ads-grid--owner .listing-views {
    margin-top: 0;
}

.ads-grid--owner .listing-badge-status {
    margin-top: 0.35rem;
}

.ads-grid--owner .listing-actions {
    margin-top: 0.5rem;
}

@media (max-width: 640px) {
    .ads-grid--owner .listing-card {
        flex-direction: column;
        padding: 1rem 0;
    }

    .ads-grid--owner .listing-image {
        width: 100%;
        max-width: 12rem;
        aspect-ratio: 4 / 3;
        margin: 0 0 0.75rem;
    }

    .ads-grid--owner .listing-content {
        padding: 0;
    }
}

/* Owner list rows: no lift/shadow chrome in high-contrast — hairline only. */
[data-theme="high-contrast"] .ads-grid--owner .listing-card {
    border: none;
    border-bottom: 2px solid var(--gray-200);
    box-shadow: none;
}

[data-theme="high-contrast"] .ads-grid--owner .listing-card:hover {
    background: transparent;
}

[data-theme="dark"] .ads-grid--owner .listing-card:hover {
    background: color-mix(in srgb, var(--plate-bg) 70%, transparent);
}

/* ── Owner badge status (#23) — icon + text, not colour alone ── */
.listing-badge-status {
    margin-top: 0.85rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    background: var(--plate-bg, var(--surface-color));
}

.listing-badge-status--ok {
    border-color: color-mix(in srgb, var(--verified-color) 45%, var(--hairline));
    background: color-mix(in srgb, var(--verified-color) 12%, var(--plate-bg, var(--surface-color)));
}

.listing-badge-status--warning {
    border-color: var(--alert-warning-border);
    background: var(--alert-warning-bg);
}

.listing-badge-status__summary {
    cursor: pointer;
    list-style: none;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.listing-badge-status__summary::-webkit-details-marker {
    display: none;
}

.listing-badge-status--ok .listing-badge-status__summary-icon {
    color: var(--verified-color);
}

.listing-badge-status--warning .listing-badge-status__summary-icon {
    color: var(--alert-warning-text);
}

.listing-badge-status--ok .listing-badge-status__summary {
    color: var(--verified-color);
}

.listing-badge-status--warning .listing-badge-status__summary {
    color: var(--alert-warning-text);
}

.listing-badge-status__banner {
    margin: 0.65rem 0 0;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--alert-warning-text);
    background: var(--alert-warning-bg);
    border: 1px solid var(--alert-warning-border);
    border-radius: calc(var(--radius) - 2px);
    padding: 0.45rem 0.55rem;
}

.listing-badge-status__rows {
    list-style: none;
    margin: 0.65rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.listing-badge-status__row {
    padding: 0.45rem 0.5rem;
    border-left: 3px solid var(--hairline);
    background: transparent;
}

.listing-badge-status__row--badged {
    border-left-color: var(--verified-color);
    background: color-mix(in srgb, var(--verified-color) 10%, transparent);
}

.listing-badge-status__row--not-badged {
    border-left-color: var(--alert-warning-text);
    background: var(--alert-warning-bg);
}

.listing-badge-status__row--badged .listing-badge-status__icon {
    color: var(--verified-color);
}

.listing-badge-status__row--not-badged .listing-badge-status__icon {
    color: var(--alert-warning-text);
}

.listing-badge-status__head {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-color);
    gap: 0.35rem;
}

.listing-badge-status__state {
    margin: 0.25rem 0 0 1.35rem;
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--verified-color);
    font-weight: 600;
}

.listing-badge-status__reason {
    margin: 0.25rem 0 0 1.35rem;
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--alert-warning-text);
}

.listing-badge-status__value {
    color: var(--text-muted);
    font-weight: 500;
}

.listing-badge-status__value::before {
    content: ' · ';
}

.listing-actions {
    margin-top: 1rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.listing-actions form {
    display: contents;
}

.listing-actions .delete-confirm {
    flex: 0 0 auto;
    max-width: none;
}

/* ── Pagination ── */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
    gap: 1rem;
}

.page-info {
    font-weight: 500;
    color: var(--gray-800);
}

/* ── Product page ──────────────────────────────────────────────────────────
   The page about one honey. Same rules as the product card it grew out of: no
   card chrome, no shadow, one loud CTA, the photo on a neutral plate with room
   around it, and hairlines instead of boxes. Amber appears on the facts icons
   and nowhere else — it is an accent here, not a surface.
   Markup: app/templates/ads/detail.html
   Content: app.presenters.product_page
   ------------------------------------------------------------------------- */
.product-page {
    display: flex;
    flex-direction: column;
    gap: 2.75rem;
    margin-top: 2rem;
}

/* ── Hero band ── */
.product-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
}

.product-hero__plate {
    display: flex;
    align-items: center;
    justify-content: center;
    /* No fixed aspect-ratio: the plate sizes itself to the image's natural
       proportions. This keeps the frame honest — a portrait photo gets a
       portrait frame, a landscape photo gets a landscape frame. */
    padding: 2rem;
    background-color: var(--plate-bg);
    border-radius: var(--radius);
    overflow: hidden;
}

.product-hero__image {
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* A missing photo is a designed state, not a hole with words in it.
   min-height keeps the plate from collapsing to zero when there is no image. */
.product-hero__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30%;
    min-height: 18rem;
    color: var(--text-subtle);
    opacity: 0.55;
}

.product-hero__placeholder svg {
    width: 100%;
    height: auto;
}

.product-hero__body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.product-hero__apiary {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    width: fit-content;
    color: var(--text-muted);
    font-weight: 600;
    text-decoration: none;
}

.product-hero__apiary:hover .product-hero__apiary-name {
    color: var(--text-color);
    text-decoration: underline;
}

.product-hero__apiary-photo {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    object-fit: cover;
}

.product-hero__title {
    margin: 0;
    color: var(--text-color);
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3.5vw, 2.35rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.product-hero__harvest {
    color: var(--text-muted);
    font-weight: 400;
}

.translation-robot {
    display: inline-flex;
    align-items: center;
    vertical-align: -0.15em;
    margin-inline-start: 0.2em;
}

.translation-toggle-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 0.85rem;
    margin: 0;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.translation-toggle-bar__label {
    line-height: 1.4;
}

.translation-toggle-bar__btn {
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-color);
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.15em;
    cursor: pointer;
}

.translation-toggle-bar__btn:hover,
.translation-toggle-bar__btn:focus-visible {
    color: var(--accent-color);
}

.product-hero__provenance {
    margin: 0;
    color: var(--text-muted);
}

/* Reserved: the rating. Absent today, and absent means absent — no empty row. */
.product-hero__rating {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.product-hero__rating-score {
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    background-color: var(--gray-100);
    font-weight: 700;
}

.product-hero__rating-count {
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Verification: one badge per measured metric, stacked vertically. */
.product-hero__verification {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.product-hero__badge {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    background-color: var(--gray-100);
    color: var(--text-color);
    font-size: 0.85rem;
    font-weight: 400;
}

.product-hero__badge-main {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex: 1;
}

.product-hero__badge-value {
    font-family: var(--font-ui);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--secondary-color);
    line-height: 1.2;
}

.product-hero__badge-label {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.35;
}

/* Qualitative badge without a hard number — label takes the primary role. */
.product-hero__badge-label--solo {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-color);
}

.product-hero__badge-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    align-self: center;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background-color: var(--gray-100);
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: default;
}

.product-hero__badge-chip .icon {
    color: var(--verified-color, #2a7732);
}

/* ⓘ button — pure HTML <details>, no JS */
.product-hero__badge-info {
    flex-shrink: 0;
    position: relative;
}

.product-hero__badge-info-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 1px solid var(--hairline);
    border-radius: 50%;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    list-style: none;
    margin-top: 0.35rem;
}

.product-hero__badge-info-trigger::-webkit-details-marker {
    display: none;
}

.product-hero__badge-info-trigger:hover {
    color: var(--text-color);
    border-color: var(--text-muted);
}

.product-hero__badge-info-text {
    position: absolute;
    right: 0;
    top: calc(100% + 0.4rem);
    width: 18rem;
    /* Hard cap so the popover never overflows the viewport regardless of icon
       position — safety net for every context that inherits this rule. */
    max-width: min(18rem, calc(100vw - 2.5rem));
    margin: 0;
    padding: 0.75rem 1rem;
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    background-color: var(--gray-100);
    box-shadow: var(--shadow-md);
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.5;
    z-index: 10;
}

.product-hero__price {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin: 0.35rem 0 0;
    color: var(--secondary-color);
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3vw, 2rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.product-hero__unit-price {
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 400;
}

.product-variants {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0.85rem 0 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.product-variants__legend {
    padding: 0;
    margin: 0 0 0.35rem;
    font-family: var(--font-ui);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gray-800);
}

.product-variants__option {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-sm);
    background: var(--surface-color);
    cursor: pointer;
}

.product-variants__option:has(input:checked) {
    border-color: var(--primary-color);
    box-shadow: var(--focus-ring);
}

.product-variants__option input {
    margin: 0;
    flex-shrink: 0;
}

.product-variants__copy {
    display: flex;
    flex: 1;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    min-width: 0;
}

.product-variants__name {
    font-weight: 600;
}

.product-variants__price {
    color: var(--secondary-color);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.product-variants__stock {
    flex-shrink: 0;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}

.product-variants__stock--out {
    color: var(--text-color);
    font-weight: 600;
}

.product-hero__stock {
    margin: 0.35rem 0 0;
    font-size: 0.9rem;
}

.product-hero__cta {
    align-self: flex-start;
    margin-top: 0.25rem;
}

.product-hero__buy {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.product-hero__buy .form-group {
    margin: 0;
    flex: 0 1 auto;
}

.product-hero__buy .form-group label {
    font-weight: 500;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

/* `.form-group input` (forms.css) would stretch and re-border the digit. */
.product-hero__buy .qty-stepper input[type="number"].qty-input {
    width: 2.25rem;
    padding: 0;
    border: 0;
}

/* Button + ⓘ sit on the same baseline as the quantity input (not the label). */
.product-hero__buy-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
}

.product-hero__buy .product-hero__cta {
    align-self: auto;
    margin-top: 0;
    min-height: 2.35rem;
    padding: 0.4rem 1.15rem;
    border: 0;
    border-radius: 999px;
    font-size: 0.9rem;
}

/* Solid dark brown pill, matching the cart quantity control. */
.product-hero__buy .btn-outline {
    background: var(--secondary-color);
    color: var(--bg-color);
}

.product-hero__buy .btn-outline:hover {
    background: var(--secondary-color);
    color: var(--bg-color);
    filter: brightness(1.12);
}

/* Same grammar as cart checkout: gold, the louder of the two. */
.product-hero__buy .btn-pill {
    background: var(--primary-color);
    color: var(--text-on-primary);
    font-weight: 700;
    letter-spacing: 0.04em;
}

.product-hero__buy .btn-pill:hover {
    background: var(--primary-hover);
    color: var(--text-on-primary);
}

/* ── Facts table ── */
.product-facts {
    margin: 0;
}

.product-facts__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--hairline);
}

.product-facts__row:first-child {
    border-top: 1px solid var(--hairline);
}

.product-facts__label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    color: var(--text-muted);
}

.product-facts__icon {
    flex-shrink: 0;
    width: 1.15rem;
    height: 1.15rem;
    color: var(--primary-color);
}

.product-facts__value {
    margin: 0;
    color: var(--secondary-color);
    font-family: var(--font-ui);
    font-weight: 700;
    text-align: right;
}

/* ── Sections below the facts ── */
.product-section {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.product-section__heading {
    margin: 0;
    color: var(--text-muted);
    font-family: var(--font-ui);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.product-section__text {
    margin: 0;
    color: var(--text-color);
    font-family: var(--font-ui);
    line-height: 1.7;
    white-space: pre-wrap;
}

/* ── Composite indicators row ── */

.passport-indicators {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

@media (max-width: 600px) {
    .passport-indicators {
        grid-template-columns: 1fr;
    }
}

/* Bee-Origin Score™ — "N / M" counter + checklist */

.passport-score {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem 1.25rem;
    background: var(--surface-color);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
}

.passport-score__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.passport-score__label {
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.passport-score__value {
    font-family: var(--font-ui);
    font-size: clamp(1.75rem, 3vw, 2.1rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--secondary-color);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.passport-score__components {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.passport-score__component {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-ui);
    font-size: 0.83rem;
    color: var(--text-muted);
}

.passport-score__component--met {
    color: var(--text-color);
}

.passport-score__comp-icon {
    flex-shrink: 0;
    color: var(--text-muted);
}

.passport-score__component--met .passport-score__comp-icon {
    color: var(--verified-color);
}

.passport-score__disclaimer {
    margin: 0.25rem 0 0;
    font-size: 0.72rem;
    color: var(--text-muted);
    font-style: italic;
    line-height: 1.5;
    border-top: 1px solid var(--hairline);
    padding-top: 0.5rem;
    font-family: var(--font-ui);
}

/* Colony Welfare Indicator — signal dots, different widget */

.passport-welfare {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.15rem 1.25rem;
    background: var(--plate-bg);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
}

.passport-welfare__label {
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.passport-welfare__signals {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.passport-welfare__signal {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--font-ui);
    font-size: 0.83rem;
}

.passport-welfare__signal-dot {
    flex-shrink: 0;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--text-muted);
}

.passport-welfare__signal--ok .passport-welfare__signal-dot {
    background: var(--verified-color);
}

.passport-welfare__signal-text {
    flex: 1;
    color: var(--text-color);
}

.passport-welfare__signal-status {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}

.passport-welfare__signal--ok .passport-welfare__signal-status {
    color: var(--verified-color);
}

.passport-welfare__disclaimer {
    margin: 0.25rem 0 0;
    font-size: 0.72rem;
    color: var(--text-muted);
    font-style: italic;
    line-height: 1.5;
    border-top: 1px solid var(--hairline);
    padding-top: 0.5rem;
}

[data-theme="high-contrast"] .passport-score,
[data-theme="high-contrast"] .passport-welfare {
    border-width: 2px;
}

[data-theme="high-contrast"] .passport-welfare__signal-dot {
    border: 2px solid currentColor;
    background: transparent;
}

[data-theme="high-contrast"] .passport-welfare__signal--ok .passport-welfare__signal-dot {
    background: var(--verified-color);
}

/* ── Passport hero entry badge ── */

.passport-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    align-self: flex-start;
    padding: 0.4rem 0.85rem 0.4rem 0.65rem;
    background: var(--badge-bg);
    border: 1px solid rgba(var(--primary-rgb), 0.25);
    border-radius: 999px;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}

.passport-hero-badge:hover {
    background: rgba(var(--primary-rgb), 0.22);
    border-color: rgba(var(--primary-rgb), 0.45);
}

.passport-hero-badge__icon {
    flex-shrink: 0;
    color: var(--badge-color);
}

.passport-hero-badge__label {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--badge-color);
    white-space: nowrap;
}

.passport-hero-badge__arrow {
    flex-shrink: 0;
    color: var(--badge-color);
    opacity: 0.65;
}

[data-theme="high-contrast"] .passport-hero-badge {
    background: transparent;
    border: 2px solid var(--badge-color);
}

/* ── Melverum Bee Passport™ panel ── */

.product-passport {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.75rem 0;
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
}

/* Conflict banner */
.passport-conflict {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    background: var(--primary-light);
    border-left: 3px solid var(--primary-color);
    border-radius: 0 4px 4px 0;
}

.passport-conflict__icon {
    flex-shrink: 0;
    margin-top: 0.1rem;
    color: var(--primary-color);
}

.passport-conflict__text {
    margin: 0;
    font-size: 0.88rem;
    color: var(--text-color);
    line-height: 1.5;
}

/* Frame container — measured and declared share the same wrapper */
.passport-frame {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-radius: var(--radius);
    overflow: hidden;
}

.passport-frame__heading {
    margin: 0 0 0.1rem;
    padding: 0.75rem 1.1rem 0.6rem;
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ── Measured frame — denser plate: sensors are the hero ── */
.passport-frame--measured {
    background: var(--surface-color);
    border: 1px solid var(--hairline);
}

.passport-frame--measured .passport-frame__heading {
    border-bottom: 1px solid var(--hairline);
}

.passport-measured {
    margin: 0;
}

.passport-measured__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--hairline);
}

.passport-measured__row:last-child {
    border-bottom: none;
}

.passport-measured__row--overridden {
    opacity: 0.7;
}

.passport-measured__label {
    margin: 0;
    font-family: var(--font-ui);
    font-size: 0.9rem;
    color: var(--text-muted);
    font-weight: 500;
}

.passport-measured__value {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    margin: 0;
    justify-content: flex-end;
}

.passport-measured__number {
    font-family: var(--font-ui);
    font-size: clamp(1.35rem, 2.5vw, 1.65rem);
    font-weight: 700;
    color: var(--secondary-color);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.passport-measured__date {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
    font-family: var(--font-ui);
}

/* Badge chip inside measured row */
.passport-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    background: var(--badge-bg);
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
}

.passport-badge__icon {
    flex-shrink: 0;
    color: var(--badge-color);
}

.passport-badge__label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--badge-color);
}

/* Overridden label (no badge) */
.passport-overridden {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    background: var(--gray-100);
    border-radius: 999px;
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
}

/* ── Declared frame — soft plate separates beekeeper voice from telemetry ── */
.passport-frame--declared {
    background: var(--plate-bg);
    border: 1px solid var(--hairline);
}

.passport-frame--declared .passport-frame__heading {
    border-bottom: 1px solid var(--hairline);
}

.passport-declared__block {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--hairline);
}

.passport-declared__block:last-child {
    border-bottom: none;
}

.passport-declared__label {
    margin: 0 0 0.4rem;
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.passport-declared__text {
    margin: 0;
    color: var(--text-color);
    font-family: var(--font-ui);
    font-size: 1.02rem;
    line-height: 1.7;
    white-space: pre-wrap;
}

/* ── High-contrast overrides ── */
[data-theme="high-contrast"] .passport-frame--measured,
[data-theme="high-contrast"] .passport-frame--declared {
    border-width: 2px;
}

[data-theme="high-contrast"] .passport-badge {
    border: 2px solid var(--badge-color);
    background: transparent;
}

[data-theme="high-contrast"] .passport-conflict {
    border-left-width: 4px;
    background: transparent;
    border-top: 2px solid var(--primary-color);
    border-right: 2px solid var(--primary-color);
    border-bottom: 2px solid var(--primary-color);
}

.product-apiary__row {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
}

.product-apiary__photo img {
    display: block;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    object-fit: cover;
}

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

.product-apiary__name {
    color: var(--text-color);
    font-size: 1.15rem;
    font-weight: 700;
    text-decoration: none;
}

.product-apiary__name:hover {
    text-decoration: underline;
}

.product-apiary__location,
.product-apiary__contact {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.product-apiary__monitored {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-color);
}

.product-apiary__monitored .icon {
    flex-shrink: 0;
    color: var(--verified-color, #2a7732);
}

/* Other harvests: the same card the grids render, in a tighter strip. */
.product-siblings {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 1.5rem;
    margin-top: 0;
}

.product-page__footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--hairline);
}

@media (max-width: 768px) {
    .hero-section {
        padding: 2.5rem 1.25rem;
    }

    .hero-section h1 {
        font-size: 1.75rem;
    }

    .hero-section p {
        font-size: 1rem;
    }

    .section-header {
        flex-direction: column;
        align-items: stretch;
    }

    .ads-grid {
        gap: 2rem 1.25rem;
    }

    .explore[data-layout-root] .ads-grid,
    .explore .explore__grid {
        gap: 2rem 1.25rem;
    }

    .explore:is([data-layout="auto"], [data-layout="grid"]) .ads-grid.explore__grid {
        gap: 0.75rem;
    }

    .product-page {
        gap: 2rem;
    }

    .product-hero {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .product-hero__plate {
        padding: 1.25rem;
    }

    .product-hero__title {
        font-size: 1.6rem;
    }

    .product-hero__price {
        font-size: 1.5rem;
    }

    .product-hero__cta,
    .product-hero__buy .btn {
        width: 100%;
    }
}

/* ── Trade info (pickup & payment) ── */
.trade-info {
    display: grid;
    gap: 1.25rem;
    margin: 1.5rem 0;
    padding: 1.5rem;
    background: var(--plate-bg);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
}

.trade-info-heading {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.trade-info-heading .product-hero__badge-info-trigger {
    margin-top: 0;
}

/* The payment heading ("Płatność") is short so the ⓘ lands near the left edge.
   With right:0 the popover would grow leftward off-screen on mobile.
   Flip to left:0 so it opens rightward and stays within the viewport. */
.trade-info-heading .product-hero__badge-info-text {
    left: 0;
    right: auto;
}

.trade-info-block h3 {
    margin: 0 0 0.5rem;
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--secondary-color);
}

.trade-disclaimer {
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.trade-option-list {
    margin: 0;
    padding-left: 1.25rem;
    color: var(--gray-800);
    font-family: var(--font-ui);
}

.trade-option-list li + li {
    margin-top: 0.35rem;
}

.trade-option-desc {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--text-muted);
}

.trade-notes {
    margin: 0.75rem 0 0;
    font-size: 0.9rem;
    color: var(--text-muted);
    white-space: pre-wrap;
    font-family: var(--font-ui);
}

.trade-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0.5rem 0;
}

.trade-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.trade-badge-pickup {
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
    color: var(--primary-color);
    border: 1px solid color-mix(in srgb, var(--primary-color) 25%, transparent);
}

.trade-badge-payment {
    background: color-mix(in srgb, var(--secondary-color) 12%, transparent);
    color: var(--secondary-color);
    border: 1px solid color-mix(in srgb, var(--secondary-color) 25%, transparent);
}

/* ── Passport evidence view — hive mass curve chart (#22) ── */

.passport-frame--evidence {
    gap: 0;
    background: var(--plate-bg);
    border: 1px solid var(--hairline);
}

.passport-frame--evidence .passport-frame__heading {
    border-bottom: 1px solid var(--hairline);
}

.passport-year-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem 1rem;
    margin: 0;
    padding: 0.85rem 1.1rem 0.35rem;
}

.passport-year-nav__years {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.passport-year-nav__link,
.passport-year-nav__current,
.passport-year-nav__step {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.85rem;
    line-height: 1.4;
    text-decoration: none;
}

.passport-year-nav__link,
.passport-year-nav__step {
    color: var(--text-color);
    border: 1px solid var(--hairline);
}

.passport-year-nav__link:hover,
.passport-year-nav__step:hover {
    border-color: color-mix(in srgb, var(--primary-color) 45%, var(--hairline));
}

.passport-year-nav__current {
    font-weight: 600;
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary-color) 25%, transparent);
}

.passport-year-nav__step[aria-disabled="true"] {
    opacity: 0.4;
}

[data-theme="high-contrast"] .passport-year-nav__current {
    background: transparent;
    border-width: 2px;
}

/* Responsive SVG container: fills the frame width, maintains aspect ratio */
.passport-evidence {
    display: block;
    margin: 0;
    padding: 1rem 1.1rem 0.65rem;
}

.passport-evidence__chart {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

/* Plot border */
.passport-evidence__frame {
    stroke: var(--hairline);
    stroke-width: 1;
}

/* Grid lines */
.passport-evidence__grid {
    stroke: var(--hairline);
    stroke-width: 1;
    stroke-dasharray: 3 3;
    opacity: 0.85;
}

.passport-evidence__grid--v {
    opacity: 0.55;
}

/* Harvest-window highlight rect — must read on cream plate in light theme
   (badge-bg ≈ plate-bg, so a primary tint is required). */
.passport-evidence__window {
    fill: rgba(var(--primary-rgb), 0.22);
    opacity: 1;
}

/* One colour per honey variety. Two windows of the same variety share it. */
.passport-evidence__window[data-honey="Acacia"],
.passport-evidence__legend-swatch[data-honey="Acacia"] { --window-color: #c4a035; }
.passport-evidence__window[data-honey="Linden"],
.passport-evidence__legend-swatch[data-honey="Linden"] { --window-color: #5f8f3a; }
.passport-evidence__window[data-honey="Wildflower"],
.passport-evidence__legend-swatch[data-honey="Wildflower"] { --window-color: #d4654a; }
.passport-evidence__window[data-honey="Buckwheat"],
.passport-evidence__legend-swatch[data-honey="Buckwheat"] { --window-color: #7a4e32; }
.passport-evidence__window[data-honey="Rapeseed"],
.passport-evidence__legend-swatch[data-honey="Rapeseed"] { --window-color: #d4a017; }
.passport-evidence__window[data-honey="Honeydew"],
.passport-evidence__legend-swatch[data-honey="Honeydew"] { --window-color: #2f6f5e; }
.passport-evidence__window[data-honey="Heather"],
.passport-evidence__legend-swatch[data-honey="Heather"] { --window-color: #8d5a86; }
.passport-evidence__window[data-honey="Goldenrod"],
.passport-evidence__legend-swatch[data-honey="Goldenrod"] { --window-color: #c46b1a; }
.passport-evidence__window[data-honey="Other"],
.passport-evidence__legend-swatch[data-honey="Other"] { --window-color: #6e6a64; }

.passport-evidence__window[data-honey] {
    fill: color-mix(in srgb, var(--window-color) 32%, transparent);
}

.passport-evidence__legend-swatch[data-honey] {
    background: color-mix(in srgb, var(--window-color) 40%, transparent);
    border-color: var(--window-color);
}

/* Mass curve polyline */
.passport-evidence__line {
    stroke: var(--primary-color);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

/* Y-axis and X-axis tick labels */
.passport-evidence__ylabel,
.passport-evidence__xlabel {
    fill: var(--text-muted);
    font-size: 10px;
    font-family: inherit;
}

/* Twelve month labels are dense — keep them compact */
.passport-evidence__xlabel {
    font-size: 9px;
}

/* Axis titles ("Masa miodu w ulu (kg)", "Miesiąc") */
.passport-evidence__axis-title {
    fill: var(--text-color);
    font-size: 11px;
    font-family: inherit;
    font-weight: 600;
}

/* Legend row below the chart */
.passport-evidence__apiary-link {
    margin: 0;
    padding: 0 1.1rem 1rem;
    font-size: 0.9rem;
}

.passport-evidence__legends {
    border-top: 1px solid var(--hairline);
    padding: 0.75rem 1.1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.passport-evidence__legend {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    padding: 0.75rem 1.1rem 1rem;
    border-top: 1px solid var(--hairline);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-color);
}

.passport-evidence__legends .passport-evidence__legend {
    border-top: none;
    padding: 0;
}

.passport-evidence__legend-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    background: rgba(var(--primary-rgb), 0.28);
    border: 1px solid var(--primary-color);
    flex-shrink: 0;
}

/* Mass / DH switch — native radios, no JS. Hidden inputs stay in the
   tab order so arrow keys move between charts. */
.passport-evidence-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0;
    padding: 0.65rem 1.1rem 0;
}

.passport-evidence-tab {
    appearance: none;
    background: transparent;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-sm);
    padding: 0.4rem 0.85rem;
    font-family: var(--font-ui);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
}

.passport-evidence-tab:hover {
    color: var(--text-color);
    background: color-mix(in srgb, var(--primary-color) 8%, transparent);
}

#passport-evidence-mass:checked ~ .passport-evidence-tabs label[for="passport-evidence-mass"],
#passport-evidence-humidity:checked ~ .passport-evidence-tabs label[for="passport-evidence-humidity"] {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--text-on-primary);
    font-weight: 600;
}

#passport-evidence-mass:focus-visible ~ .passport-evidence-tabs label[for="passport-evidence-mass"],
#passport-evidence-humidity:focus-visible ~ .passport-evidence-tabs label[for="passport-evidence-humidity"] {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.passport-evidence-panel--mass,
.passport-evidence-panel--humidity {
    display: none;
}

#passport-evidence-mass:checked ~ .passport-evidence-panel--mass,
#passport-evidence-humidity:checked ~ .passport-evidence-panel--humidity {
    display: block;
}

.passport-evidence-windows {
    margin: 0;
    padding: 0.85rem 1.1rem 1rem;
    border-top: 1px solid var(--hairline);
}

.passport-evidence-windows__heading {
    margin: 0 0 0.65rem;
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.passport-evidence-windows__group + .passport-evidence-windows__group {
    margin-top: 0.75rem;
}

.passport-evidence-windows__label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.3rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-color);
}

.passport-evidence-windows__swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    flex-shrink: 0;
}

.passport-evidence-windows__swatch--harvest {
    background: rgba(var(--primary-rgb), 0.28);
    border: 1px solid var(--primary-color);
}

.passport-evidence-windows__swatch--feeding {
    background: color-mix(in srgb, var(--secondary-color) 28%, transparent);
    border: 1px solid var(--secondary-color);
}

.passport-evidence-windows__list {
    margin: 0;
    padding: 0 0 0 1.05rem;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-color);
}

.passport-evidence-windows__list li + li {
    margin-top: 0.15rem;
}

/* Dark theme — slightly stronger amber wash on dark plate */
[data-theme="dark"] .passport-evidence__window {
    fill: rgba(var(--primary-rgb), 0.28);
}

[data-theme="dark"] .passport-evidence__legend-swatch {
    background: rgba(var(--primary-rgb), 0.35);
}

/* High-contrast theme */
[data-theme="high-contrast"] .passport-evidence__window {
    fill: transparent;
    stroke: var(--primary-color);
    stroke-width: 2;
    opacity: 1;
}

[data-theme="high-contrast"] .passport-evidence__window[data-honey] {
    stroke: var(--window-color);
}

[data-theme="high-contrast"] .passport-evidence__line {
    stroke-width: 3;
}

[data-theme="high-contrast"] .passport-evidence__ylabel,
[data-theme="high-contrast"] .passport-evidence__xlabel,
[data-theme="high-contrast"] .passport-evidence__axis-title {
    fill: var(--text-color);
}

[data-theme="high-contrast"] .passport-evidence__grid {
    stroke: var(--text-muted);
    stroke-dasharray: none;
    opacity: 1;
}

[data-theme="high-contrast"] .passport-evidence__frame {
    stroke: var(--text-color);
    stroke-width: 2;
}

[data-theme="high-contrast"] .passport-evidence-tab {
    border-color: var(--text-color);
}

[data-theme="high-contrast"] #passport-evidence-mass:checked ~ .passport-evidence-tabs label[for="passport-evidence-mass"],
[data-theme="high-contrast"] #passport-evidence-humidity:checked ~ .passport-evidence-tabs label[for="passport-evidence-humidity"] {
    background: var(--primary-color);
    border-color: var(--text-color);
    color: var(--text-on-primary);
}

[data-theme="high-contrast"] .passport-evidence-windows__swatch--harvest,
[data-theme="high-contrast"] .passport-evidence-windows__swatch--feeding {
    background: transparent;
}

/* Bee Landscape — land-cover composition donut (#28)
   Same plate / hairline language as measured + evidence frames. */
.passport-frame--landscape {
    margin-top: 1.25rem;
    background: var(--plate-bg);
    border: 1px solid var(--hairline);
    /* Allow the heading ⓘ popover to escape the plate */
    overflow: visible;
}

.passport-frame--landscape .passport-frame__heading-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.75rem 1.1rem 0.6rem;
    border-bottom: 1px solid var(--hairline);
}

.passport-frame--landscape .passport-frame__heading {
    margin: 0;
    padding: 0;
    border-bottom: none;
    flex: 0 1 auto;
    min-width: 0;
}

.passport-landscape__info {
    flex-shrink: 0;
}

.passport-landscape__info .product-hero__badge-info-trigger {
    margin-top: 0;
    width: 1.4rem;
    height: 1.4rem;
}

/* Hover / focus (keyboard) — no click required; keep click/[open] as fallback */
.passport-landscape__info > .product-hero__badge-info-text {
    display: none;
    left: 0;
    right: auto;
    top: 100%;
    width: min(20rem, calc(100vw - 2.5rem));
    z-index: 20;
}

/* On narrow viewports the icon sits near the right edge — anchor to the right
   so the popover grows leftward and stays fully on screen. */
@media (max-width: 600px) {
    .passport-landscape__info > .product-hero__badge-info-text {
        left: auto;
        right: 0;
    }
}

.passport-landscape__info:hover > .product-hero__badge-info-text,
.passport-landscape__info:focus-within > .product-hero__badge-info-text,
.passport-landscape__info[open] > .product-hero__badge-info-text {
    display: block;
}

.passport-landscape {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.35rem 1.75rem;
    padding: 1.15rem 1.1rem 1.15rem;
}

.passport-landscape__visual {
    flex-shrink: 0;
    display: grid;
    place-items: center;
}

.passport-landscape__chart {
    position: relative;
    width: 9.25rem;
    height: 9.25rem;
    border-radius: 50%;
    /* Soft amber lift — matches badge / evidence accent without loud glow */
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 10px 28px rgba(var(--primary-rgb), 0.14),
        inset 0 0 0 1px color-mix(in srgb, var(--text-color) 8%, transparent);
}

/* Donut hole — plate fill so the chart sits in the frame, not a solid pie */
.passport-landscape__chart::after {
    content: '';
    position: absolute;
    inset: 26%;
    border-radius: 50%;
    background: var(--plate-bg);
    box-shadow:
        0 0 0 1px var(--hairline),
        inset 0 1px 2px rgba(0, 0, 0, 0.04);
}

.passport-landscape__legend {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 0 1 20rem;
    width: 100%;
    max-width: 20rem;
    display: flex;
    flex-direction: column;
}

.passport-landscape__item {
    display: grid;
    grid-template-columns: 0.7rem minmax(0, 1fr);
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--hairline);
    font-size: 0.9rem;
}

.passport-landscape__item:last-child {
    border-bottom: none;
    padding-bottom: 0.15rem;
}

.passport-landscape__item:first-child {
    padding-top: 0.15rem;
}

.passport-landscape__swatch {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-color) 12%, transparent);
}

.passport-landscape__label {
    color: var(--text-color);
    font-weight: 500;
    min-width: 0;
}

.passport-landscape__value {
    font-size: 0.95rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    color: var(--text-color);
    white-space: nowrap;
}

.passport-landscape__radius {
    margin: 0 0 0.45rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-color);
    line-height: 1.4;
}

.passport-landscape__source {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.45;
}

[data-theme="dark"] .passport-landscape__chart {
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.35),
        0 10px 28px rgba(var(--primary-rgb), 0.18),
        inset 0 0 0 1px color-mix(in srgb, var(--text-color) 14%, transparent);
}

[data-theme="high-contrast"] .passport-landscape__chart {
    box-shadow: inset 0 0 0 2px var(--text-color);
}

[data-theme="high-contrast"] .passport-landscape__chart::after {
    box-shadow: 0 0 0 2px var(--text-color);
}

[data-theme="high-contrast"] .passport-landscape__swatch {
    box-shadow: inset 0 0 0 1px var(--text-color);
}

/* ── Section 5: Marketing Passport ─────────────────────────────────────────
   Luxury trust-builder banner. Dark card with gold accents and a radial
   gradient highlights the Bee-Origin Passport™ value proposition.
   Markup: app/templates/index.html
   ------------------------------------------------------------------------- */
.marketing-passport {
    padding: 4rem 0;
    display: flex;
    justify-content: center;
}

.marketing-passport__card {
    background-color: var(--secondary-color);
    color: #ffffff;
    border-radius: var(--radius-lg);
    border: 1px solid var(--primary-color);
    padding: 4rem 3rem;
    text-align: center;
    max-width: 900px;
    width: 100%;
    box-shadow: var(--shadow-lg);
    background-image: radial-gradient(circle at top right, rgba(var(--primary-rgb), 0.15), transparent 60%);
}

.marketing-passport__title {
    margin: 0 0 1.5rem;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    color: var(--primary-color);
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.marketing-passport__subtitle {
    margin: 0 0 2.5rem;
    font-size: 1.15rem;
    opacity: 0.9;
    line-height: 1.65;
}

.marketing-passport__badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px dashed rgba(var(--primary-rgb), 0.35);
    padding: 2rem;
    border-radius: var(--radius-md);
    margin-bottom: 2.5rem;
}

.marketing-passport__badge .icon {
    color: var(--primary-color);
    opacity: 0.9;
}

.marketing-passport__highlight {
    margin: 0;
    font-size: 1.1rem;
    color: #ffffff;
    font-weight: 500;
    line-height: 1.55;
}

.marketing-passport__footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--primary-color);
    letter-spacing: 1px;
}

.marketing-passport__lookup {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 34rem;
    gap: 0.45rem;
    text-align: start;
}

.marketing-passport__lookup-label {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #ffffff;
}

.marketing-passport__lookup-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.5rem;
}

.marketing-passport__lookup-input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    background: #ffffff;
    color: var(--text-color);
}

.btn.btn-primary.marketing-passport__lookup-submit {
    flex-shrink: 0;
    gap: 0.4rem;
    letter-spacing: 0;
    background: var(--primary-color);
    color: var(--secondary-color);
}

.btn.btn-primary.marketing-passport__lookup-submit:hover {
    background: var(--primary-hover);
    color: var(--secondary-color);
}

.marketing-passport__lookup-hint {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0;
    color: rgba(255, 255, 255, 0.62);
    line-height: 1.4;
}

/* Dark theme: the card already has a dark background locked in — no change needed.
   High-contrast: replace the gradient and dashed border with solid outlines. */
[data-theme="high-contrast"] .marketing-passport__card {
    background-image: none;
    border-width: 2px;
}

[data-theme="high-contrast"] .marketing-passport__badge {
    border-style: solid;
    border-width: 2px;
}

[data-theme="high-contrast"] .marketing-passport__lookup-input {
    border-width: 2px;
}

@media (max-width: 768px) {
    .marketing-passport {
        padding: 2.5rem 0;
    }

    .marketing-passport__card {
        padding: 2.5rem 1.5rem;
    }

    .marketing-passport__badge {
        padding: 1.5rem 1rem;
    }

    .marketing-passport__footer {
        font-size: 1rem;
        letter-spacing: 0.5px;
    }

    .marketing-passport__lookup-row {
        flex-direction: column;
    }

    .marketing-passport__lookup-submit {
        width: 100%;
    }
}