.ingredients-page__empty {
    margin: 0;
    color: var(--color-muted);
    font-style: italic;
}

.featured-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-md);
    align-items: stretch;
}

.featured-card {
    min-width: 0;
    height: 100%;
}

.featured-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(47, 42, 36, 0.04);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.featured-card__link:hover {
    border-color: #c8b9a5;
    box-shadow: 0 8px 24px rgba(47, 42, 36, 0.08);
    transform: translateY(-2px);
    text-decoration: none;
}

.featured-card__image-wrap {
    aspect-ratio: 16 / 9;
    background: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border);
}

.featured-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.featured-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-md);
    flex: 1;
}

.featured-card__meta {
    font-size: 0.82rem;
    color: var(--color-muted);
}

.featured-card__title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.08rem;
    line-height: 1.35;
}

.featured-card__description {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--color-muted);
}

.ingredient-search {
    margin-bottom: var(--space-lg);
}

.ingredient-search__form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: stretch;
}

.ingredient-search__input {
    flex: 1 1 16rem;
    min-width: 0;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font: inherit;
    background: var(--color-surface);
}

.ingredient-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: var(--space-md);
}

.ingredient-category-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.ingredient-category-card__link:hover {
    border-color: #c8b9a5;
    box-shadow: 0 8px 24px rgba(47, 42, 36, 0.08);
    transform: translateY(-2px);
    text-decoration: none;
}

.ingredient-category-card__image-wrap {
    aspect-ratio: 4 / 3;
    background: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border);
}

.ingredient-category-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ingredient-category-card__body {
    padding: var(--space-sm) var(--space-md) var(--space-md);
}

.ingredient-category-card__title {
    margin: 0 0 0.35rem;
    font-size: 1rem;
    line-height: 1.3;
}

.ingredient-category-card__description {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-muted);
    line-height: 1.45;
}

.ingredient-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: var(--space-md);
}

.ingredient-grid--collapsible {
    position: relative;
}

.ingredient-category-list + .ingredient-category-list {
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border);
}

.ingredient-category-list__toggle {
    margin-top: var(--space-md);
}

.ingredient-card__kind {
    margin: 0;
    font-size: 0.82rem;
    color: var(--color-muted);
    font-style: italic;
}

.ingredient-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.ingredient-card__link:hover {
    border-color: #c8b9a5;
    box-shadow: 0 8px 24px rgba(47, 42, 36, 0.08);
    transform: translateY(-2px);
    text-decoration: none;
}

.ingredient-card__image-wrap {
    aspect-ratio: 7 / 5;
    background: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border);
    overflow: hidden;
}

.ingredient-card__image-wrap--placeholder {
    background: linear-gradient(180deg, #f7f2ea 0%, #efe7dc 100%);
}

.ingredient-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ingredient-card__image--placeholder {
    object-fit: contain;
    padding: 0.75rem;
    background: transparent;
}

.ingredient-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: var(--space-sm) var(--space-md) var(--space-md);
    flex: 1;
}

.ingredient-card__title {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.3;
}

.ingredient-card__meta {
    margin: 0;
    font-size: 0.8rem;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ingredient-card__description {
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-muted);
    line-height: 1.45;
}

.ingredients-page__filter-label {
    font-weight: 400;
    color: var(--color-muted);
    font-size: 0.95em;
}

.ingredients-page__category-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: var(--space-md);
}

.ingredients-page__category-filter {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: 0.875rem;
    color: inherit;
    text-decoration: none;
    background: var(--color-surface-alt);
}

.ingredients-page__category-filter:hover,
.ingredients-page__category-filter.is-active {
    border-color: #c8b9a5;
    background: #f1eadc;
    text-decoration: none;
}

.ingredient-hero {
    --ingredient-hero-green: #3f5d3a;
    --ingredient-hero-green-soft: #eef4ea;
    --ingredient-hero-terracotta: #9a4f2e;
    --ingredient-hero-surface: #fffaf0;
    --ingredient-hero-surface-calm: #f7f3ea;
    --ingredient-hero-ink: #1f1a14;
    background: var(--ingredient-hero-surface);
    box-shadow: 0 1px 2px rgba(55, 40, 20, 0.04);
    margin-bottom: var(--space-md);
}

.ingredient-hero__layout {
    display: grid;
    gap: 0.55rem 1.25rem;
    align-items: start;
}

.ingredient-hero__eyebrow {
    grid-area: eyebrow;
    margin: 0;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.ingredient-hero__title {
    grid-area: title;
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(2rem, 3.4vw, 2.75rem);
    line-height: 1.12;
    color: var(--ingredient-hero-ink);
}

.ingredient-hero__category {
    grid-area: category;
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.45;
}

.ingredient-hero__category a,
.ingredient-hero__category-label {
    color: var(--ingredient-hero-green);
    text-decoration: none;
}

.ingredient-hero__category a:hover,
.ingredient-hero__category a:focus-visible {
    color: var(--ingredient-hero-terracotta);
    text-decoration: underline;
}

.ingredient-hero__intro {
    grid-area: intro;
    margin: 0;
    color: var(--color-muted);
    line-height: 1.55;
    max-width: 36rem;
}

.ingredient-hero__media {
    grid-area: media;
    margin: 0;
    min-width: 0;
}

.ingredient-hero__media--placeholder {
    background: linear-gradient(180deg, #f7f2ea 0%, #efe7dc 100%);
    border-radius: 12px;
    border: 1px solid var(--color-border);
    padding: 0.75rem;
}

.ingredient-hero__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    background: var(--color-surface-alt);
    object-fit: cover;
}

.ingredient-hero__image--placeholder {
    object-fit: contain;
    border-style: dashed;
    background: transparent;
}

.ingredient-hero__caption {
    margin-top: 0.35rem;
    font-size: 0.72rem;
    color: var(--color-muted);
    line-height: 1.35;
    opacity: 0.78;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.ingredient-hero__attribution {
    font-style: italic;
}

.ingredient-hero__ai-caption {
    font-size: 0.72rem;
    font-style: normal;
    text-transform: none;
    letter-spacing: normal;
    color: var(--color-muted);
}

/*
 * HERO-A — object / composed-stack
 * Visual order: eyebrow → media → H1 → categories → lead
 * FIX-UI-06A2: wider media, tighter caption rhythm, one composition
 */
.ingredient-hero--object.ingredient-hero--composed-stack,
.ingredient-hero--object {
    padding: 0.95rem 1.05rem 1.05rem;
}

.ingredient-hero--object .ingredient-hero__layout {
    grid-template-columns: 1fr;
    grid-template-areas:
        "eyebrow"
        "media"
        "title"
        "category"
        "intro";
    gap: 0.3rem;
}

.ingredient-hero--object .ingredient-hero__media {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0.05rem 0 0.1rem;
}

.ingredient-hero--object .ingredient-hero__image {
    aspect-ratio: auto;
    width: min(100%, 26rem);
    max-height: min(21rem, 48vh);
    margin-inline: auto;
    object-fit: contain;
    object-position: center;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.ingredient-hero--object .ingredient-hero__title {
    margin-top: 0.05rem;
}

.ingredient-hero--object .ingredient-hero__caption {
    text-align: center;
    max-width: 26rem;
    margin: 0.1rem auto 0;
    font-size: 0.62rem;
    line-height: 1.25;
    opacity: 0.58;
    gap: 0.05rem;
}

.ingredient-hero--object .ingredient-hero__ai-caption,
.ingredient-hero--object .ingredient-hero__attribution {
    font-size: 0.6rem;
    letter-spacing: 0.01em;
}

/*
 * HERO-B — scene / split-fused
 * Text left + scenic photo right in one card surface
 * FIX-UI-06A2: text-majority split, quieter caption
 * FIX-UI-06A4: scene media fills full right column height (no max-height blank)
 */
.ingredient-hero--scene.ingredient-hero--split-fused,
.ingredient-hero--scene {
    padding: 0;
    overflow: hidden;
}

.ingredient-hero--scene .ingredient-hero__layout {
    /* ~58% text / ~42% media — longer lead lines, shorter hero */
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    grid-template-areas:
        "eyebrow media"
        "title media"
        "category media"
        "intro media";
    column-gap: 0;
    row-gap: 0.35rem;
    align-items: stretch;
    min-height: 0;
}

.ingredient-hero--scene .ingredient-hero__eyebrow,
.ingredient-hero--scene .ingredient-hero__title,
.ingredient-hero--scene .ingredient-hero__category,
.ingredient-hero--scene .ingredient-hero__intro {
    position: relative;
    z-index: 2;
    padding-left: 1.15rem;
    padding-right: 0.7rem;
}

.ingredient-hero--scene .ingredient-hero__eyebrow {
    padding-top: 0.95rem;
}

.ingredient-hero--scene .ingredient-hero__intro {
    padding-bottom: 0.95rem;
    max-width: none;
}

.ingredient-hero--scene .ingredient-hero__media {
    position: relative;
    z-index: 1;
    align-self: stretch;
    display: block;
    min-height: 100%;
    height: 100%;
    /* FIX-UI-06A4: no max-height — stretch with the text column / grid row */
    max-height: none;
    /* FIX-UI-06A5: let scenic media underlap the copy zone for a softer fused boundary. */
    margin-left: -1.15rem;
    width: calc(100% + 1.15rem);
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: var(--ingredient-hero-surface);
}

.ingredient-hero--scene .ingredient-hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    aspect-ratio: auto;
    object-fit: cover;
    /* Portrait scenic asset (360×450): keep plate/product framing */
    object-position: 50% 42%;
    border: 0;
    border-radius: 0;
    background: transparent;
}

/* Soft fusion toward the text column (no standalone media card / border) */
.ingredient-hero--scene .ingredient-hero__media::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: clamp(3rem, 24%, 5.5rem);
    background: linear-gradient(
        to right,
        var(--ingredient-hero-surface) 0%,
        rgba(255, 250, 240, 0.72) 38%,
        rgba(255, 250, 240, 0.28) 68%,
        rgba(255, 250, 240, 0) 100%
    );
    pointer-events: none;
    z-index: 1;
}

/* Quiet bottom caption — no translucent overlay panel */
.ingredient-hero--scene .ingredient-hero__caption {
    position: absolute;
    left: 0.55rem;
    right: 0.45rem;
    bottom: 0.35rem;
    z-index: 2;
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    font-size: 0.58rem;
    line-height: 1.25;
    opacity: 0.88;
    max-width: none;
    color: rgba(255, 252, 246, 0.94);
    text-shadow:
        0 1px 2px rgba(20, 16, 10, 0.72),
        0 0 10px rgba(20, 16, 10, 0.35);
}

.ingredient-hero--scene .ingredient-hero__ai-caption,
.ingredient-hero--scene .ingredient-hero__attribution,
.ingredient-hero--scene .ingredient-hero__caption-text {
    color: inherit;
    font-size: inherit;
}

/* Neutral — safe editorial media, no special composition */
.ingredient-hero--neutral {
    padding: 1rem 1.15rem 1.15rem;
}

.ingredient-hero--neutral .ingredient-hero__layout {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr);
    grid-template-areas:
        "eyebrow media"
        "title media"
        "category media"
        "intro media";
    align-items: center;
}

.ingredient-hero--neutral .ingredient-hero__image {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* Compact intentional text hero when no real media */
.ingredient-hero--no-media {
    padding: 1rem 1.15rem 1.15rem;
}

.ingredient-hero--no-media .ingredient-hero__layout {
    grid-template-columns: 1fr;
    grid-template-areas:
        "eyebrow"
        "title"
        "category"
        "intro";
}

.ingredient-hero--no-media .ingredient-hero__title {
    font-size: clamp(1.85rem, 3vw, 2.35rem);
}

.ingredient-hero--no-media .ingredient-hero__intro {
    max-width: 40rem;
}

.ingredient-gallery {
    margin-bottom: var(--space-lg);
}

.ingredient-gallery__title {
    margin: 0 0 var(--space-sm);
    font-family: var(--font-heading);
    font-size: 1.1rem;
}

.ingredient-gallery__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-sm);
}

.ingredient-gallery__item {
    margin: 0;
}

.ingredient-gallery__thumb {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background: var(--color-surface-alt);
}

.ingredient-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr);
    gap: var(--space-lg);
    align-items: start;
    margin-bottom: var(--space-lg);
}

.ingredient-detail-grid__main,
.ingredient-detail-grid__sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.ingredient-info-card h2 {
    margin: 0 0 var(--space-sm);
    font-family: var(--font-heading);
    font-size: 1.2rem;
}

.ingredient-info-card p {
    margin: 0;
    line-height: 1.6;
}

.ingredient-info-card__empty {
    color: var(--color-muted);
    font-style: italic;
}

.ingredient-info-card__note,
.ingredient-info-card__source {
    margin: 0 0 0.75rem;
    color: var(--color-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

.ingredient-info-card__source {
    margin: 0.75rem 0 0;
}

.nutrition-table {
    width: 100%;
    border-collapse: collapse;
}

.nutrition-table th,
.nutrition-table td {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
}

.nutrition-table th {
    font-weight: 600;
    width: 55%;
}

.diet-flags__list {
    margin: 0;
}

.diet-flags__list > div {
    display: flex;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--color-border);
}

.diet-flags__list dt {
    margin: 0;
    font-weight: 600;
}

.diet-flags__list dd {
    margin: 0;
    color: var(--color-muted);
    text-align: right;
}

.diet-flags__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 0.9rem;
}

.diet-flag-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: #fff;
    color: var(--color-text);
    font-size: 0.82rem;
}

.diet-flag-chip strong {
    font-weight: 700;
}

.diet-flag-chip.is-positive {
    border-color: #b8dcc7;
    background: #f0faf4;
}

.diet-flag-chip.is-negative {
    border-color: #e7c5bd;
    background: #fff5f2;
}

.diet-flag-chip.is-unknown {
    color: var(--color-muted);
    background: #f8f8f8;
}

.ingredient-allergens {
    margin-top: 1rem;
}

.ingredient-allergens h3 {
    margin: 0 0 0.55rem;
    font-size: 1rem;
}

.ingredient-allergen-list {
    display: grid;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ingredient-allergen {
    padding: 0.55rem 0.65rem;
    border: 1px solid #e6c9a6;
    border-radius: var(--radius-sm);
    background: #fff8ed;
    color: var(--color-text);
}

.ingredient-allergen__note {
    display: block;
    margin-top: 0.2rem;
    color: var(--color-muted);
    font-size: 0.85rem;
}

.ingredient-substitutes-list {
    margin: var(--space-sm) 0 0;
    padding-left: 1.2rem;
}

.ingredient-substitutes-list__meta {
    display: block;
    font-size: 0.875rem;
    color: var(--color-muted);
}

.related-ingredients {
    margin-bottom: var(--space-lg);
}

.ingredient-detail__back {
    margin: 0 0 var(--space-lg);
}

.ingredient-category-page__back {
    margin: 0 0 var(--space-lg);
}

.ingredient-category-hero {
    margin-bottom: var(--space-lg);
}

.ingredient-category-hero__layout {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-lg);
    align-items: center;
}

.ingredient-category-hero__title {
    margin: 0 0 var(--space-sm);
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 3vw, 2.35rem);
    line-height: 1.2;
}

.ingredient-category-hero__intro {
    margin: 0;
    max-width: 36rem;
    color: var(--color-muted);
    line-height: 1.6;
}

.ingredient-category-hero__media {
    margin: 0;
}

.ingredient-category-hero__image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    background: var(--color-surface-alt);
    object-fit: cover;
}

@media (max-width: 900px) {
    .ingredient-category-hero__layout {
        grid-template-columns: 1fr;
    }

    .ingredient-category-hero__media {
        order: -1;
    }
}

@media (max-width: 900px) {
    .ingredient-detail-grid {
        grid-template-columns: 1fr;
    }

    /* HERO-A mobile: composed stack (eyebrow → media → H1 → categories → lead) */
    .ingredient-hero--object .ingredient-hero__layout {
        grid-template-columns: 1fr;
        grid-template-areas:
            "eyebrow"
            "media"
            "title"
            "category"
            "intro";
        gap: 0.25rem;
    }

    .ingredient-hero--object {
        padding: 0.8rem 0.85rem 0.9rem;
    }

    .ingredient-hero--object .ingredient-hero__image {
        width: min(100%, 92%);
        max-height: min(17rem, 42vh);
    }

    .ingredient-hero--object .ingredient-hero__caption {
        margin-top: 0.05rem;
        font-size: 0.58rem;
        opacity: 0.55;
    }

    /*
     * HERO-B mobile (ETAP-UI-HERO-B-02 + FIX-UI-06A6):
     * Grid ~54% text / ~46% media + ~2rem underlap → scenic visual ~52–55% of card.
     * Copy (H1/category, light intro) may extend ~0.75–1.4rem past the text column
     * into the cream fusion edge — controlled local overlap, not full-bleed text-on-photo.
     */
    .ingredient-hero--scene .ingredient-hero__layout {
        grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr);
        grid-template-areas:
            "eyebrow media"
            "title media"
            "category media"
            "intro media";
        min-height: 0;
        row-gap: 0.3rem;
        align-items: stretch;
        overflow: visible;
    }

    .ingredient-hero--scene .ingredient-hero__eyebrow,
    .ingredient-hero--scene .ingredient-hero__title,
    .ingredient-hero--scene .ingredient-hero__category,
    .ingredient-hero--scene .ingredient-hero__intro {
        position: relative;
        z-index: 3;
        padding-left: 0.9rem;
        padding-right: 0.95rem;
    }

    .ingredient-hero--scene .ingredient-hero__eyebrow {
        padding-top: 0.8rem;
    }

    /*
     * FIX-UI-06A6: extend visual copy box past the grid text column into the soft
     * scenic edge. Net exit past old column boundary ≈ clamp − residual padding
     * (~0.75–1.4rem for title/category; intro stays lighter).
     */
    .ingredient-hero--scene .ingredient-hero__title,
    .ingredient-hero--scene .ingredient-hero__category {
        width: calc(100% + clamp(1.05rem, 4.5vw, 1.55rem));
        max-width: none;
        padding-right: 0.2rem;
        justify-self: start;
    }

    .ingredient-hero--scene .ingredient-hero__intro {
        width: calc(100% + clamp(0.5rem, 2.5vw, 0.85rem));
        max-width: none;
        padding-right: 0.45rem;
        padding-bottom: 0.8rem;
        justify-self: start;
    }

    /* FIX-UI-06A4 fill + HERO-B-02 deeper underlap under copy zone (size held for 06A6) */
    .ingredient-hero--scene .ingredient-hero__media {
        max-height: none;
        height: 100%;
        align-self: stretch;
        margin-left: -2rem;
        width: calc(100% + 2rem);
        z-index: 1;
    }

    .ingredient-hero--scene .ingredient-hero__image {
        object-fit: cover;
        /* Slightly right/up: fuller plate/scene, less tight meat crop */
        object-position: 54% 38%;
    }

    /* Cream fusion under the copy-overlap zone for contrast */
    .ingredient-hero--scene .ingredient-hero__media::before {
        width: clamp(3.5rem, 44%, 6.25rem);
        background: linear-gradient(
            to right,
            var(--ingredient-hero-surface) 0%,
            rgba(255, 250, 240, 0.92) 18%,
            rgba(255, 250, 240, 0.68) 40%,
            rgba(255, 250, 240, 0.32) 66%,
            rgba(255, 250, 240, 0) 100%
        );
        z-index: 2;
    }

    .ingredient-hero--scene .ingredient-hero__caption {
        font-size: 0.55rem;
        bottom: 0.28rem;
        left: 0.4rem;
        right: 0.35rem;
        background: transparent;
        padding: 0;
    }

    /* Neutral mobile: stack text then media */
    .ingredient-hero--neutral .ingredient-hero__layout {
        grid-template-columns: 1fr;
        grid-template-areas:
            "eyebrow"
            "title"
            "category"
            "intro"
            "media";
        gap: 0.45rem;
    }

    .ingredient-hero--neutral .ingredient-hero__image {
        aspect-ratio: 4 / 3;
        max-height: min(13.5rem, 34vh);
    }

    .ingredient-hero--no-media {
        padding: 0.85rem 0.95rem 0.95rem;
    }

    .ingredient-hero__title {
        font-size: clamp(1.85rem, 8vw, 2.35rem);
        overflow-wrap: anywhere;
    }

    .ingredient-hero--scene .ingredient-hero__title {
        font-size: clamp(1.7rem, 7.2vw, 2.15rem);
    }

    .ingredient-hero__category {
        font-size: 0.86rem;
    }

    .ingredient-hero__caption {
        font-size: 0.68rem;
    }

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

/* HERO-B very narrow: stack to protect readability (only <=380px; keep split at ~400–430px) */
@media (max-width: 380px) {
    .ingredient-hero--scene .ingredient-hero__layout {
        grid-template-columns: 1fr;
        grid-template-areas:
            "eyebrow"
            "title"
            "category"
            "intro"
            "media";
        min-height: 0;
        row-gap: 0.35rem;
        overflow: visible;
    }

    .ingredient-hero--scene .ingredient-hero__eyebrow,
    .ingredient-hero--scene .ingredient-hero__title,
    .ingredient-hero--scene .ingredient-hero__category,
    .ingredient-hero--scene .ingredient-hero__intro {
        /* FIX-UI-06A6: zero copy-overlap / normal full-width stack */
        width: 100%;
        max-width: none;
        padding-right: 0.9rem;
        justify-self: stretch;
    }

    .ingredient-hero--scene .ingredient-hero__intro {
        padding-bottom: 0.3rem;
    }

    .ingredient-hero--scene .ingredient-hero__media {
        position: relative;
        min-height: 0;
        height: auto;
        max-height: none;
        margin-left: 0;
        width: 100%;
    }

    .ingredient-hero--scene .ingredient-hero__image {
        position: static;
        inset: auto;
        width: 100%;
        height: auto;
        min-height: 9.5rem;
        max-height: min(12.5rem, 38vh);
        aspect-ratio: 16 / 9;
        object-fit: cover;
        object-position: 55% 40%;
    }

    .ingredient-hero--scene .ingredient-hero__media::before {
        display: none;
    }

    .ingredient-hero--scene .ingredient-hero__caption {
        position: static;
        background: transparent;
        color: var(--color-muted);
        text-shadow: none;
        opacity: 0.65;
        font-size: 0.58rem;
        padding: 0.25rem 0.9rem 0.75rem;
        max-width: none;
    }
}

@media (max-width: 720px) {
    .featured-row {
        grid-template-columns: 1fr;
    }
}

/* Faza 2: hierarchia kategorii, chipy, tagi */
.ingredient-category-card__subcategories {
    list-style: none;
    margin: 0;
    padding: 0.5rem 1rem 0.9rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.ingredient-subcategory-link {
    display: inline-block;
    font-size: 0.8rem;
    color: var(--color-text-muted, #556);
    background: var(--color-surface-muted, #f1f3f6);
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.ingredient-subcategory-link:hover {
    background: var(--color-accent-soft, #e3ecff);
    color: var(--color-accent, #2f5bd0);
}

.ingredient-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: var(--color-text-muted, #556);
}

.ingredient-breadcrumb a {
    color: var(--color-accent, #2f5bd0);
    text-decoration: none;
}

.ingredient-breadcrumb a:hover {
    text-decoration: underline;
}

.ingredient-breadcrumb__sep {
    color: var(--color-border, #ccd);
}

.ingredient-breadcrumb__current {
    font-weight: 600;
    color: var(--color-text, #223);
}

.ingredient-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.ingredient-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: var(--color-text, #223);
    background: var(--color-surface-muted, #f1f3f6);
    border: 1px solid var(--color-border, #e2e6ee);
    border-radius: 999px;
    padding: 0.25rem 0.7rem;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

a.ingredient-chip:hover {
    background: var(--color-accent-soft, #e3ecff);
    border-color: var(--color-accent, #2f5bd0);
    color: var(--color-accent, #2f5bd0);
}

.ingredient-chip__count {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-text-muted, #667);
    background: #fff;
    border-radius: 999px;
    padding: 0 0.4rem;
    min-width: 1.2rem;
    text-align: center;
}

.ingredient-chip--tag {
    background: #fff;
}

.ingredient-chip.is-active {
    background: var(--color-accent, #2f5bd0);
    border-color: var(--color-accent, #2f5bd0);
    color: #fff;
}

.ingredient-tag-filter__group,
.ingredient-tags__group {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
}

.ingredient-tag-filter__group-label,
.ingredient-tags__group-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-muted, #556);
    min-width: 8rem;
}

.ingredient-tag-filter__active {
    font-size: 0.9rem;
    margin-bottom: 0.8rem;
}

.ingredient-tag-filter__clear {
    margin-left: 0.4rem;
    color: var(--color-accent, #2f5bd0);
}

.ingredient-classification__list {
    margin: 0;
    display: grid;
    gap: 0.7rem;
}

.ingredient-classification__list dt {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-muted, #667);
    margin-bottom: 0.2rem;
}

.ingredient-classification__list dd {
    margin: 0;
    font-size: 0.95rem;
}

.ingredient-tags__group {
    flex-direction: column;
    align-items: flex-start;
}

.ingredient-tags__group-label {
    min-width: 0;
    margin-bottom: 0.15rem;
}

.ingredient-subcategory-link--more {
    font-weight: 600;
    color: var(--color-accent, #2f5bd0);
    background: var(--color-accent-soft, #e3ecff);
}

.ingredient-classification__main {
    display: inline-block;
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-accent, #2f5bd0);
    text-decoration: none;
    padding: 0.15rem 0.6rem;
    border-radius: 6px;
    background: var(--color-accent-soft, #e3ecff);
}

.ingredient-classification__main:hover {
    text-decoration: underline;
}

.ingredient-classification__units {
    font-size: 0.9rem;
    color: var(--color-text-muted, #667);
    line-height: 1.4;
}

.ingredient-classification__units strong {
    color: var(--color-text, #223);
}

.ingredient-conversion-list {
    display: grid;
    gap: 0.35rem;
    margin: 0 0 0.65rem;
    padding: 0;
    list-style: none;
    font-size: 0.9rem;
    color: var(--color-text, #223);
}

.ingredient-conversion-list li {
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--color-border, #e5e0d8);
    border-radius: var(--radius-sm, 8px);
    background: #fffaf2;
}

@media (max-width: 720px) {
    .ingredient-tag-filter__group,
    .ingredient-tags__group {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.3rem;
    }

    .ingredient-tag-filter__group-label {
        min-width: 0;
    }
}

/* ING-UI-01 — publiczny detail Gold P0 */
.ingredient-hero__alt-names {
    margin: 0.25rem 0 0.5rem;
    font-size: 0.92rem;
    color: var(--color-muted);
}

.ingredient-hero__category-sep {
    margin: 0 0.35rem;
    color: var(--color-muted);
}

.ingredient-quick-info__list,
.ingredient-shopping__list {
    display: grid;
    gap: 0.75rem;
    margin: 0;
}

.ingredient-quick-info__list > div,
.ingredient-shopping__list > div {
    display: grid;
    gap: 0.2rem;
}

.ingredient-quick-info__list dt,
.ingredient-shopping__list dt {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ingredient-quick-info__list dd,
.ingredient-shopping__list dd {
    margin: 0;
}

.ingredient-info-card__block + .ingredient-info-card__block {
    margin-top: 1rem;
}

.ingredient-info-card__block h3 {
    margin: 0 0 0.35rem;
    font-size: 1rem;
}

.ingredient-grouped-section__paragraph + .ingredient-grouped-section__paragraph,
.ingredient-grouped-section__paragraph + .ingredient-grouped-section__subsection,
.ingredient-grouped-section__subsection + .ingredient-grouped-section__paragraph,
.ingredient-grouped-section__list + .ingredient-grouped-section__paragraph,
.ingredient-grouped-section__structured {
    margin-top: 0.85rem;
}

.ingredient-grouped-section__list {
    margin: 0.5rem 0 0;
    padding-left: 1.2rem;
}

.ingredient-grouped-section__list li + li {
    margin-top: 0.25rem;
}

/* UI-07A-FIX — chip styling only for Kategorie / Tagi (scoped; leave global .ingredient-chip alone) */
.ingredient-meta-card {
    --ingredient-meta-green: #355236;
    --ingredient-meta-green-soft: #eef3ea;
    --ingredient-meta-green-chip: #f2f5ee;
    --ingredient-meta-green-border: #d0dbc8;
    --ingredient-meta-terracotta: #9a4f2e;
    --ingredient-meta-tag-bg: #faf3ee;
    --ingredient-meta-tag-border: #e0c4b4;
    --ingredient-meta-tag-ink: #6f3f2c;
    --ingredient-meta-ink: #1f1a14;
    padding: 0.95rem 1rem 1.05rem;
}

.ingredient-meta-card__header {
    margin: 0 0 0.55rem;
}

.ingredient-meta-card__header h2 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.15rem;
    line-height: 1.3;
    color: var(--ingredient-meta-ink);
}

.ingredient-meta-card__chips {
    gap: 0.5rem;
}

/* Categories: cream-green editorial pills (not Phase-2 cool gray badges) */
.ingredient-meta-card--categories .ingredient-meta-card__chip {
    color: var(--ingredient-meta-green);
    background: var(--ingredient-meta-green-chip);
    border: 1px solid var(--ingredient-meta-green-border);
    border-radius: 999px;
    font-size: 0.84rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.25;
    padding: 0.35rem 0.85rem;
}

.ingredient-meta-card--categories a.ingredient-meta-card__chip:hover,
.ingredient-meta-card--categories a.ingredient-meta-card__chip:focus-visible {
    background: var(--ingredient-meta-green-soft);
    border-color: #b7c7b2;
    color: var(--ingredient-meta-green);
    outline: none;
}

.ingredient-meta-card--categories a.ingredient-meta-card__chip:focus-visible {
    box-shadow: 0 0 0 2px rgba(53, 82, 54, 0.2);
}

/* Tags: small editorial labels (UI-07A3) — not the same pill as categories */
.ingredient-meta-card--tags .ingredient-meta-card__chip {
    color: var(--ingredient-meta-tag-ink);
    background: var(--ingredient-meta-tag-bg);
    border: 1px solid var(--ingredient-meta-tag-border);
    border-radius: 0.65rem;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.3;
    padding: 0.22rem 0.55rem;
}

/* UI-07A3 — clear vertical pause chips → browse link (no divider) */
.ingredient-meta-card--categories .ingredient-meta-card__browse {
    margin: 1.1rem 0 0;
    padding-top: 0;
    border-top: none;
    line-height: 1.5;
}

.ingredient-meta-card__browse {
    margin: 0.85rem 0 0;
}

.ingredient-meta-card__browse a {
    color: var(--ingredient-meta-terracotta);
    text-decoration: none;
    font-weight: 500;
    line-height: inherit;
}

.ingredient-meta-card__browse a:hover,
.ingredient-meta-card__browse a:focus-visible {
    color: #7d3f24;
    text-decoration: underline;
    outline: none;
}

@media (max-width: 900px) {
    .ingredient-meta-card {
        padding: 0.85rem 0.9rem 0.95rem;
    }

    .ingredient-meta-card__header {
        margin-bottom: 0.5rem;
    }

    .ingredient-meta-card__header h2 {
        font-size: 1.18rem;
    }

    .ingredient-meta-card__chips {
        gap: 0.45rem;
    }

    .ingredient-meta-card--categories .ingredient-meta-card__chip {
        font-size: 0.83rem;
        padding: 0.32rem 0.8rem;
    }

    .ingredient-meta-card--tags .ingredient-meta-card__chip {
        font-size: 0.79rem;
        padding: 0.2rem 0.5rem;
        border-radius: 0.6rem;
    }
}

@media (min-width: 901px) {
    .ingredient-meta-card {
        padding: 1.15rem;
    }

    .ingredient-meta-card__header {
        margin-bottom: 0.6rem;
    }

    .ingredient-meta-card__header h2 {
        font-size: 1.2rem;
    }

    .ingredient-meta-card--categories .ingredient-meta-card__chip {
        padding: 0.38rem 0.9rem;
    }

    .ingredient-meta-card--tags .ingredient-meta-card__chip {
        padding: 0.24rem 0.6rem;
        border-radius: 0.7rem;
    }
}

/* FIX-UI-05A — static editorial section cards (no accordion) */
.ingredient-grouped-section--editorial {
    padding: 0.95rem 1rem 1.05rem;
}

.ingredient-grouped-section__header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0 0 0.55rem;
}

.ingredient-grouped-section__header h2 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.15rem;
    line-height: 1.3;
    flex: 1;
    min-width: 0;
}

.ingredient-grouped-section__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 0.45rem;
    background: #eef4ea;
    color: #3f5d3a;
}

.ingredient-grouped-section__icon svg {
    width: 1.05rem;
    height: 1.05rem;
    display: block;
}

.ingredient-grouped-section--editorial[data-section-accent="terracotta"] > .ingredient-grouped-section__header .ingredient-grouped-section__icon {
    background: #f6eee6;
    color: #9a4f2e;
}

.ingredient-grouped-section--editorial[data-section-accent="blue"] > .ingredient-grouped-section__header .ingredient-grouped-section__icon {
    background: #eaf1f7;
    color: #3d5f7a;
}

.ingredient-grouped-section__body {
    padding: 0;
}

.ingredient-grouped-section__body > :first-child {
    margin-top: 0;
}

/* UI-07B — first subsection needs a pause from the section header;
   keep the general first-child reset so plain paragraphs stay flush. */
.ingredient-grouped-section__body > .ingredient-grouped-section__subsection:first-child {
    margin-top: 0.8rem;
}

@media (max-width: 900px) {
    .ingredient-grouped-section--editorial {
        padding: 0.85rem 0.9rem 0.95rem;
    }

    .ingredient-grouped-section__header {
        gap: 0.5rem;
        margin-bottom: 0.52rem;
    }

    .ingredient-grouped-section__header h2 {
        font-size: 1.18rem;
    }

    /* UI-07B1 — slightly smaller section icon + more header→body pause on mobile */
    .ingredient-grouped-section__icon {
        width: 1.42rem;
        height: 1.42rem;
        border-radius: 0.4rem;
    }

    .ingredient-grouped-section__icon svg {
        width: 0.8rem;
        height: 0.8rem;
    }
}

@media (min-width: 901px) {
    .ingredient-grouped-section--editorial {
        padding: 1.15rem;
    }

    .ingredient-grouped-section__header {
        margin-bottom: 0.45rem;
        gap: 0.7rem;
    }

    .ingredient-grouped-section__header h2 {
        font-size: 1.2rem;
    }

    .ingredient-grouped-section__icon {
        width: 1.75rem;
        height: 1.75rem;
    }

    .ingredient-grouped-section__icon svg {
        width: 1rem;
        height: 1rem;
    }
}

/* DECOR-MULTI-01 — approved decorative sketch watermark for allocated editorial sections */
.ingredient-grouped-section--editorial.ingredient-grouped-section--has-decorative-sketch {
    position: relative;
    overflow: hidden;
}

.ingredient-grouped-section--editorial.ingredient-grouped-section--has-decorative-sketch > .ingredient-grouped-section__header,
.ingredient-grouped-section--editorial.ingredient-grouped-section--has-decorative-sketch > .ingredient-grouped-section__body {
    position: relative;
    z-index: 1;
}

.ingredient-grouped-section__decorative-sketch {
    position: absolute;
    right: 0.15rem;
    top: 52%;
    transform: translateY(-50%);
    z-index: 0;
    width: clamp(6rem, 22vw, 8.5rem);
    height: auto;
    opacity: 0.19;
    pointer-events: none;
    user-select: none;
}

@media (max-width: 900px) {
    .ingredient-grouped-section__decorative-sketch {
        width: clamp(7rem, 30vw, 9rem);
        right: 0.45rem;
        top: 50%;
        opacity: 0.26;
    }

    .ingredient-grouped-section--editorial.ingredient-grouped-section--has-decorative-sketch > .ingredient-grouped-section__header,
    .ingredient-grouped-section--editorial.ingredient-grouped-section--has-decorative-sketch > .ingredient-grouped-section__body {
        padding-right: 4.25rem;
    }
}

@media (max-width: 380px) {
    .ingredient-grouped-section__decorative-sketch {
        width: clamp(5.25rem, 28vw, 6rem);
        right: 0;
        opacity: 0.20;
    }

    .ingredient-grouped-section--editorial.ingredient-grouped-section--has-decorative-sketch > .ingredient-grouped-section__header,
    .ingredient-grouped-section--editorial.ingredient-grouped-section--has-decorative-sketch > .ingredient-grouped-section__body {
        padding-right: 0;
    }
}

.ingredient-shopping__grid {
    display: grid;
    gap: var(--space-md);
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.ingredient-shopping__card {
    padding: var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 8px);
    background: var(--color-surface-alt, #faf8f5);
}

.ingredient-shopping__card h3 {
    margin: 0 0 0.65rem;
    font-size: 1.05rem;
}

.ingredient-relations__group + .ingredient-relations__group {
    margin-top: 1rem;
}

.ingredient-relations__group h3 {
    margin: 0 0 0.45rem;
    font-size: 1rem;
}

.ingredient-relations__list {
    margin: 0;
    padding-left: 1.1rem;
}

.ingredient-relations__note {
    display: block;
    font-size: 0.85rem;
    color: var(--color-muted);
}

@media (max-width: 900px) {
    .ingredient-shopping__grid {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================================
   ALPHA-UI-INGREDIENT-LIST-03B — Variant 3
   Public ingredient catalog only. Namespaced to .alpha-ingredients-page.
   ========================================================================== */

.alpha-ingredients-page {
    --alpha-list-green: #264b37;
    --alpha-list-green-deep: #173a2c;
    --alpha-list-green-soft: #edf3e9;
    --alpha-list-terracotta: #a95632;
    --alpha-list-terracotta-soft: #f6eee6;
    --alpha-list-gold: #b98b2e;
    --alpha-list-blue: #496f72;
    --alpha-list-cream: #fffaf0;
    --alpha-list-paper: #fffdf8;
    --alpha-list-paper-soft: #f7f3ea;
    --alpha-list-line: #d8cbb6;
    --alpha-list-ink: #251e18;
    --alpha-list-muted: #6f6257;
}

.alpha-ingredients-page > .alpha-ingredients-page__container {
    max-width: 1180px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.alpha-ingredients-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(19rem, 0.85fr);
    grid-template-areas:
        "copy scene"
        "search search";
    gap: 1.2rem 1.5rem;
    margin-bottom: 1.2rem;
    padding: 1.45rem 1.55rem 1.2rem;
    overflow: hidden;
    background:
        linear-gradient(115deg, rgba(255, 253, 248, 0.98) 0%, rgba(255, 250, 240, 0.98) 58%, rgba(246, 238, 230, 0.76) 100%);
    border: 1px solid var(--alpha-list-line);
    border-radius: 0.9rem;
    box-shadow:
        inset 0 0 0 4px rgba(247, 243, 234, 0.55),
        0 8px 28px rgba(55, 40, 20, 0.045);
}

.alpha-ingredients-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 87% 16%, rgba(38, 75, 55, 0.07), transparent 26%),
        radial-gradient(circle at 72% 84%, rgba(169, 86, 50, 0.06), transparent 30%);
    pointer-events: none;
}

.alpha-ingredients-hero__copy {
    grid-area: copy;
    position: relative;
    z-index: 2;
    align-self: center;
    max-width: 42rem;
}

.alpha-ingredients-hero__eyebrow,
.alpha-ingredients-section__eyebrow {
    margin: 0 0 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--alpha-list-terracotta);
}

.alpha-ingredients-hero h1 {
    margin: 0;
    max-width: 40rem;
    font-family: var(--font-heading);
    font-size: clamp(2.35rem, 5vw, 4.15rem);
    line-height: 0.98;
    letter-spacing: -0.035em;
    color: var(--alpha-list-green-deep);
}

.alpha-ingredients-hero__lead {
    margin: 0.8rem 0 0;
    max-width: 38rem;
    font-size: 1.02rem;
    line-height: 1.55;
    color: var(--alpha-list-muted);
}

.alpha-ingredients-hero__scene {
    grid-area: scene;
    position: relative;
    z-index: 1;
    min-height: 11.5rem;
    align-self: stretch;
}

.alpha-ingredients-hero__scene::before {
    content: "";
    position: absolute;
    right: -1.2rem;
    bottom: -1rem;
    width: 22rem;
    height: 11.5rem;
    border-radius: 50% 0 0 0;
    background:
        radial-gradient(ellipse at 65% 70%, rgba(84, 96, 65, 0.11), transparent 58%),
        linear-gradient(to left, rgba(255, 250, 240, 0), rgba(255, 250, 240, 0.9));
}

.alpha-ingredients-hero__art {
    position: absolute;
    object-fit: contain;
    filter: saturate(0.88) sepia(0.08);
    user-select: none;
    pointer-events: none;
}

.alpha-ingredients-hero__art--herbs {
    width: 9.2rem;
    right: 10.4rem;
    bottom: 0.15rem;
    opacity: 0.8;
    transform: rotate(-8deg);
}

.alpha-ingredients-hero__art--alliums {
    width: 9.8rem;
    right: 4.6rem;
    bottom: -0.15rem;
    z-index: 3;
}

.alpha-ingredients-hero__art--oil {
    width: 8.7rem;
    right: -0.2rem;
    bottom: 0.2rem;
    z-index: 2;
    opacity: 0.92;
}

.alpha-ingredients-hero__note {
    position: absolute;
    top: 0.35rem;
    right: 0.4rem;
    width: 10rem;
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.02rem;
    font-style: italic;
    line-height: 1.25;
    color: rgba(112, 80, 55, 0.6);
    transform: rotate(-5deg);
}

.alpha-ingredients-search {
    grid-area: search;
    position: relative;
    z-index: 4;
    margin: 0;
}

.alpha-ingredients-search__form {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0;
    align-items: center;
    padding: 0.38rem;
    background: rgba(255, 253, 248, 0.96);
    border: 1px solid var(--alpha-list-line);
    border-radius: 0.72rem;
    box-shadow: 0 4px 18px rgba(55, 40, 20, 0.045);
}

.alpha-ingredients-search__icon {
    position: relative;
    display: block;
    width: 2.65rem;
    height: 2.65rem;
}

.alpha-ingredients-search__icon::before {
    content: "";
    position: absolute;
    left: 0.82rem;
    top: 0.72rem;
    width: 0.72rem;
    height: 0.72rem;
    border: 2px solid var(--alpha-list-green-deep);
    border-radius: 50%;
}

.alpha-ingredients-search__icon::after {
    content: "";
    position: absolute;
    left: 1.52rem;
    top: 1.48rem;
    width: 0.58rem;
    height: 2px;
    border-radius: 99px;
    background: var(--alpha-list-green-deep);
    transform: rotate(45deg);
    transform-origin: left center;
}

.alpha-ingredients-search__input {
    min-width: 0;
    height: 2.75rem;
    padding: 0 0.55rem;
    border: 0;
    border-radius: 0;
    outline: 0;
    background: transparent;
    color: var(--alpha-list-ink);
    box-shadow: none;
}

.alpha-ingredients-search__input:focus {
    outline: 0;
    box-shadow: none;
}

.alpha-ingredients-search__button {
    min-width: 7.4rem;
    height: 2.75rem;
    padding: 0 1.2rem;
    border: 0;
    border-radius: 0.55rem;
    background: var(--alpha-list-green-deep);
    color: #fffdf8;
    font-family: var(--font-heading);
    font-size: 1rem;
    box-shadow: none;
}

.alpha-ingredients-search__button:hover,
.alpha-ingredients-search__button:focus-visible {
    background: var(--alpha-list-green);
    filter: none;
}

.alpha-ingredients-section {
    position: relative;
    margin-top: 1.1rem;
    padding: 1.15rem 1.2rem 1.25rem;
    background: rgba(255, 253, 248, 0.8);
    border: 1px solid var(--alpha-list-line);
    border-radius: 0.85rem;
    box-shadow: 0 4px 16px rgba(55, 40, 20, 0.035);
}

.alpha-ingredients-section__heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.95rem;
}

.alpha-ingredients-section__heading h2 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(1.55rem, 2.6vw, 2.15rem);
    line-height: 1.08;
    color: var(--alpha-list-ink);
}

.alpha-ingredients-section__hint,
.alpha-ingredients-count {
    margin: 0;
    max-width: 28rem;
    font-size: 0.82rem;
    line-height: 1.35;
    color: var(--alpha-list-muted);
    text-align: right;
}

.alpha-ingredients-count {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid #d9cdb9;
    border-radius: 999px;
    background: #f7f3ea;
    white-space: nowrap;
}

.alpha-category-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.7rem;
}

.alpha-category-card {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 6.35rem;
    padding: 0.85rem 5.3rem 0.85rem 0.85rem;
    overflow: hidden;
    border: 1px solid var(--alpha-list-line);
    border-radius: 0.72rem;
    background:
        linear-gradient(105deg, rgba(255, 253, 248, 0.98) 0%, rgba(255, 250, 240, 0.92) 64%, rgba(247, 243, 234, 0.85) 100%);
    color: inherit;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(55, 40, 20, 0.035);
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.alpha-category-card::after {
    content: "";
    position: absolute;
    right: -0.55rem;
    bottom: -0.8rem;
    width: 6.4rem;
    height: 6.4rem;
    background-image: var(--alpha-category-art);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.18;
    filter: sepia(0.16) saturate(0.8);
    pointer-events: none;
}

.alpha-category-card[href]:hover,
.alpha-category-card[href]:focus-visible {
    transform: translateY(-2px);
    border-color: #c8b9a5;
    box-shadow: 0 8px 22px rgba(55, 40, 20, 0.075);
    text-decoration: none;
}

.alpha-category-card__icon {
    position: relative;
    z-index: 2;
    display: grid;
    flex: 0 0 auto;
    width: 2.65rem;
    height: 2.65rem;
    margin-right: 0.75rem;
    border: 1px solid #cad7c5;
    border-radius: 0.65rem;
    background: var(--alpha-list-green-soft);
    place-items: center;
}

.alpha-category-card:nth-child(4n + 2) .alpha-category-card__icon {
    border-color: #dfc1b0;
    background: var(--alpha-list-terracotta-soft);
}

.alpha-category-card:nth-child(4n + 3) .alpha-category-card__icon {
    border-color: #ccd9d9;
    background: #eaf0f0;
}

.alpha-category-card:nth-child(4n) .alpha-category-card__icon {
    border-color: #e2d3ad;
    background: #f6f0df;
}

.alpha-category-card__leaf {
    position: relative;
    width: 1.12rem;
    height: 1.45rem;
    border: 2px solid var(--alpha-list-green);
    border-radius: 100% 0 100% 0;
    transform: rotate(-35deg);
}

.alpha-category-card__leaf::after {
    content: "";
    position: absolute;
    left: 0.43rem;
    top: 0.15rem;
    width: 1px;
    height: 1.25rem;
    background: var(--alpha-list-green);
    transform: rotate(25deg);
    transform-origin: top;
}

.alpha-category-card:nth-child(4n + 2) .alpha-category-card__leaf,
.alpha-category-card:nth-child(4n + 2) .alpha-category-card__leaf::after {
    border-color: var(--alpha-list-terracotta);
    background-color: var(--alpha-list-terracotta);
}

.alpha-category-card:nth-child(4n + 2) .alpha-category-card__leaf {
    background-color: transparent;
}

.alpha-category-card:nth-child(4n + 3) .alpha-category-card__leaf,
.alpha-category-card:nth-child(4n + 3) .alpha-category-card__leaf::after {
    border-color: var(--alpha-list-blue);
    background-color: var(--alpha-list-blue);
}

.alpha-category-card:nth-child(4n + 3) .alpha-category-card__leaf {
    background-color: transparent;
}

.alpha-category-card:nth-child(4n) .alpha-category-card__leaf,
.alpha-category-card:nth-child(4n) .alpha-category-card__leaf::after {
    border-color: var(--alpha-list-gold);
    background-color: var(--alpha-list-gold);
}

.alpha-category-card:nth-child(4n) .alpha-category-card__leaf {
    background-color: transparent;
}

.alpha-category-card__copy {
    position: relative;
    z-index: 2;
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.2rem;
}

.alpha-category-card__copy strong {
    font-family: var(--font-heading);
    font-size: 1.03rem;
    line-height: 1.18;
    color: var(--alpha-list-ink);
}

.alpha-category-card__copy small {
    color: var(--alpha-list-muted);
    font-size: 0.78rem;
}

.alpha-ingredient-grid {
    gap: 0.75rem;
}

.alpha-ingredient-grid--popular {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.alpha-ingredient-grid--catalog,
.alpha-ingredient-grid--search {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.alpha-ingredient-tile {
    min-width: 0;
}

.alpha-ingredients-page .alpha-ingredient-tile .ingredient-card {
    height: 100%;
}

.alpha-ingredients-page .alpha-ingredient-tile .ingredient-card__link {
    position: relative;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--alpha-list-line);
    border-radius: 0.72rem;
    background: var(--alpha-list-paper);
    box-shadow: 0 1px 2px rgba(55, 40, 20, 0.035);
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.alpha-ingredients-page .alpha-ingredient-tile .ingredient-card__link:hover,
.alpha-ingredients-page .alpha-ingredient-tile .ingredient-card__link:focus-visible {
    transform: translateY(-2px);
    border-color: #c7b7a2;
    box-shadow: 0 9px 24px rgba(55, 40, 20, 0.08);
}

.alpha-ingredients-page .alpha-ingredient-tile .ingredient-card__image-wrap {
    position: relative;
    aspect-ratio: 16 / 9;
    border-bottom-color: #ddd0bd;
    background:
        linear-gradient(135deg, #f8f3ea 0%, #f2ebdf 100%);
}

.alpha-ingredients-page .alpha-ingredient-tile .ingredient-card__image-wrap--placeholder {
    display: grid;
    place-items: center;
}

.alpha-ingredients-page .alpha-ingredient-tile .ingredient-card__image-wrap--placeholder::before {
    content: "";
    position: absolute;
    inset: 0.45rem;
    background-image: var(--alpha-category-art);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.72;
    filter: sepia(0.08) saturate(0.86);
}

.alpha-ingredients-page .alpha-ingredient-tile .ingredient-card__image--placeholder {
    opacity: 0;
}

.alpha-ingredients-page .alpha-ingredient-tile .ingredient-card__body {
    gap: 0.28rem;
    min-height: 7.25rem;
    padding: 0.68rem 0.72rem 0.75rem;
}

.alpha-ingredients-page .alpha-ingredient-tile .ingredient-card__title {
    font-family: var(--font-heading);
    font-size: 1.02rem;
    line-height: 1.18;
    color: var(--alpha-list-ink);
}

.alpha-ingredients-page .alpha-ingredient-tile .ingredient-card__kind,
.alpha-ingredients-page .alpha-ingredient-tile .ingredient-card__meta {
    align-self: flex-start;
    max-width: 100%;
    margin: 0;
    padding: 0.18rem 0.42rem;
    border: 1px solid #d5dfcf;
    border-radius: 999px;
    background: var(--alpha-list-green-soft);
    color: #52634d;
    font-size: 0.66rem;
    font-style: normal;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.alpha-ingredients-page .alpha-ingredient-tile:nth-child(3n + 2) .ingredient-card__kind,
.alpha-ingredients-page .alpha-ingredient-tile:nth-child(3n + 2) .ingredient-card__meta {
    border-color: #e5cdbf;
    background: var(--alpha-list-terracotta-soft);
    color: #8e553b;
}

.alpha-ingredients-page .alpha-ingredient-tile .ingredient-card__description {
    display: -webkit-box;
    margin-top: 0.1rem;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--alpha-list-muted);
    font-size: 0.78rem;
    line-height: 1.35;
}

.alpha-ingredient-grid--popular .ingredient-card__body {
    min-height: 6.4rem !important;
}

.alpha-ingredient-grid--popular .ingredient-card__description {
    -webkit-line-clamp: 1 !important;
}

.alpha-ingredients-more {
    margin-top: 0.9rem;
}

.alpha-ingredients-more__toggle {
    display: flex;
    width: min(15rem, 100%);
    min-height: 2.9rem;
    margin: 0 auto;
    padding: 0.65rem 1.1rem;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    border: 0;
    border-radius: 0.62rem;
    background: var(--alpha-list-green-deep);
    color: #fffdf8;
    font-family: var(--font-heading);
    font-size: 1rem;
    list-style: none;
    cursor: pointer;
}

.alpha-ingredients-more__toggle::-webkit-details-marker {
    display: none;
}

.alpha-ingredients-more__toggle::marker {
    content: "";
}

.alpha-ingredients-more__toggle:hover,
.alpha-ingredients-more__toggle:focus-visible {
    background: var(--alpha-list-green);
    filter: none;
}

.alpha-ingredients-more__open {
    display: none;
}

.alpha-ingredients-more[open] .alpha-ingredients-more__closed {
    display: none;
}

.alpha-ingredients-more[open] .alpha-ingredients-more__open {
    display: inline;
}

.alpha-ingredients-more__chevron {
    width: 0.55rem;
    height: 0.55rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-0.12rem);
    transition: transform 150ms ease;
}

.alpha-ingredients-more[open] .alpha-ingredients-more__chevron {
    transform: rotate(225deg) translate(-0.08rem, -0.08rem);
}

.alpha-ingredient-grid--more {
    margin-top: 0.85rem;
}

.alpha-ingredients-search-results {
    border-color: #dfc8ba;
    background: linear-gradient(180deg, rgba(255, 253, 248, 0.96), rgba(246, 238, 230, 0.58));
}

@media (max-width: 1100px) {
    .alpha-category-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .alpha-ingredient-grid--popular {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .alpha-ingredient-grid--catalog,
    .alpha-ingredient-grid--search {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .alpha-ingredients-hero {
        grid-template-columns: minmax(0, 1.05fr) minmax(15rem, 0.95fr);
        padding-inline: 1.2rem;
    }

    .alpha-ingredients-hero__art--herbs {
        width: 7.6rem;
        right: 8.2rem;
    }

    .alpha-ingredients-hero__art--alliums {
        width: 8.1rem;
        right: 3.7rem;
    }

    .alpha-ingredients-hero__art--oil {
        width: 7.2rem;
    }

    .alpha-ingredients-hero__note {
        width: 8rem;
        font-size: 0.9rem;
    }

    .alpha-ingredient-grid--catalog,
    .alpha-ingredient-grid--search {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .alpha-ingredients-page > .alpha-ingredients-page__container {
        padding: 0 0.75rem;
    }

    .alpha-ingredients-hero {
        grid-template-columns: 1fr;
        grid-template-areas:
            "copy"
            "scene"
            "search";
        gap: 0.55rem;
        margin-bottom: 0.85rem;
        padding: 1rem 1rem 0.9rem;
        border-radius: 0.78rem;
    }

    .alpha-ingredients-hero h1 {
        max-width: 19rem;
        font-size: clamp(2rem, 10vw, 2.65rem);
        line-height: 0.98;
    }

    .alpha-ingredients-hero__lead {
        margin-top: 0.6rem;
        font-size: 0.93rem;
        line-height: 1.5;
    }

    .alpha-ingredients-hero__scene {
        min-height: 7.4rem;
        margin-inline: -0.25rem;
    }

    .alpha-ingredients-hero__scene::before {
        right: -1rem;
        bottom: -0.5rem;
        width: 18rem;
        height: 8.2rem;
    }

    .alpha-ingredients-hero__art--herbs {
        width: 6.8rem;
        right: 8.6rem;
        bottom: -0.05rem;
    }

    .alpha-ingredients-hero__art--alliums {
        width: 7.6rem;
        right: 3.7rem;
    }

    .alpha-ingredients-hero__art--oil {
        width: 6.3rem;
        right: -0.1rem;
        bottom: 0.05rem;
    }

    .alpha-ingredients-hero__note {
        left: 0.15rem;
        right: auto;
        top: 0.45rem;
        width: 8.8rem;
        font-size: 0.86rem;
        transform: rotate(-4deg);
    }

    .alpha-ingredients-search__form {
        grid-template-columns: auto minmax(0, 1fr) auto;
        padding: 0.28rem;
    }

    .alpha-ingredients-search__button {
        min-width: 5.7rem;
        padding-inline: 0.8rem;
    }

    .alpha-ingredients-section {
        margin-top: 0.8rem;
        padding: 0.9rem;
        border-radius: 0.75rem;
    }

    .alpha-ingredients-section__heading {
        align-items: flex-start;
        margin-bottom: 0.8rem;
    }

    .alpha-ingredients-section__heading h2 {
        font-size: 1.55rem;
    }

    .alpha-ingredients-section__hint {
        display: none;
    }

    .alpha-ingredients-section__heading--catalog {
        flex-direction: column;
        gap: 0.45rem;
    }

    .alpha-ingredients-count {
        align-self: flex-start;
        text-align: left;
    }

    .alpha-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.55rem;
    }

    .alpha-category-card {
        min-height: 5.55rem;
        padding: 0.65rem 3.8rem 0.65rem 0.6rem;
    }

    .alpha-category-card::after {
        right: -0.7rem;
        bottom: -0.65rem;
        width: 5.1rem;
        height: 5.1rem;
        opacity: 0.15;
    }

    .alpha-category-card__icon {
        width: 2.25rem;
        height: 2.25rem;
        margin-right: 0.55rem;
        border-radius: 0.55rem;
    }

    .alpha-category-card__leaf {
        width: 0.92rem;
        height: 1.15rem;
    }

    .alpha-category-card__copy strong {
        font-size: 0.94rem;
    }

    .alpha-category-card__copy small {
        font-size: 0.7rem;
    }

    .alpha-ingredient-grid--popular,
    .alpha-ingredient-grid--catalog,
    .alpha-ingredient-grid--search {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.55rem;
    }

    .alpha-ingredients-page .alpha-ingredient-tile .ingredient-card__body {
        min-height: 6.8rem;
        padding: 0.55rem 0.58rem 0.62rem;
    }

    .alpha-ingredients-page .alpha-ingredient-tile .ingredient-card__title {
        font-size: 0.94rem;
    }

    .alpha-ingredients-page .alpha-ingredient-tile .ingredient-card__description {
        font-size: 0.72rem;
    }

    .alpha-ingredients-more__toggle {
        width: 100%;
    }
}

@media (max-width: 360px) {
    .alpha-ingredients-search__form {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .alpha-ingredients-search__button {
        grid-column: 1 / -1;
        width: 100%;
        margin-top: 0.28rem;
    }

    .alpha-category-grid,
    .alpha-ingredient-grid--popular,
    .alpha-ingredient-grid--catalog,
    .alpha-ingredient-grid--search {
        grid-template-columns: 1fr;
    }

    .alpha-ingredients-hero__scene {
        min-height: 6.6rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .alpha-category-card,
    .alpha-ingredients-page .alpha-ingredient-tile .ingredient-card__link,
    .alpha-ingredients-more__chevron {
        transition: none;
    }
}


/* ALPHA-UI-INGREDIENT-LIST-03B — visual correction pass 01 */
@media (max-width: 768px) {
    .alpha-category-card {
        padding-right: 2.75rem;
    }

    .alpha-category-card::after {
        right: -0.85rem;
        width: 4.25rem;
        height: 4.25rem;
        opacity: 0.13;
    }

    .alpha-category-card__copy strong {
        font-size: 0.9rem;
        line-height: 1.08;
    }
}

@media (max-width: 420px) and (min-width: 361px) {
    .alpha-category-card {
        min-height: 5.25rem;
        padding-left: 0.52rem;
        padding-right: 2.2rem;
    }

    .alpha-category-card__icon {
        width: 2rem;
        height: 2rem;
        margin-right: 0.42rem;
    }

    .alpha-category-card__copy strong {
        font-size: 0.84rem;
    }

    .alpha-category-card__copy small {
        font-size: 0.66rem;
    }

    .alpha-category-card::after {
        width: 3.7rem;
        height: 3.7rem;
    }
}