/* Global reset + base typography, shared across every page type. */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Keep anchor-scrolled targets (e.g. table of contents links) clear
       of the sticky site header instead of landing underneath it. */
    scroll-padding-top: 120px;
    /* Always reserve space for the vertical scrollbar so short pages
       (e.g. an empty listing) don't render a few pixels wider than tall
       pages, which shifts the centered header/content sideways between
       page types. */
    scrollbar-gutter: stable;
    overflow-y: scroll;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--color-background);
    color: var(--color-on-surface);
    font-family: var(--font-family-base);
    font-size: var(--text-body-md-size);
    line-height: var(--text-body-md-line);
    font-weight: var(--text-body-md-weight);
}

main {
    flex: 1 0 auto;
    width: 100%;
}

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

a,
:where(a:visited) {
    color: inherit;
    text-decoration: none;
}

button,
input,
select {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

h1,
h2,
h3,
h4,
p {
    margin: 0;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Layout container: 1280px max width, responsive side margins */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--margin-mobile);
}

@media (min-width: 768px) {
    .container {
        padding-inline: var(--margin-desktop);
    }
}

/* Typography scale */
.text-display-lg {
    font-size: var(--text-display-lg-size);
    line-height: var(--text-display-lg-line);
    font-weight: var(--text-display-lg-weight);
    letter-spacing: var(--text-display-lg-tracking);
}

.text-headline-lg {
    font-size: var(--text-headline-lg-mobile-size);
    line-height: var(--text-headline-lg-mobile-line);
    font-weight: var(--text-headline-lg-mobile-weight);
}

@media (min-width: 768px) {
    .text-headline-lg {
        font-size: var(--text-headline-lg-size);
        line-height: var(--text-headline-lg-line);
        font-weight: var(--text-headline-lg-weight);
        letter-spacing: var(--text-headline-lg-tracking);
    }
}

.text-headline-md {
    font-size: var(--text-headline-md-size);
    line-height: var(--text-headline-md-line);
    font-weight: var(--text-headline-md-weight);
}

.text-title-lg {
    font-size: var(--text-title-lg-size);
    line-height: var(--text-title-lg-line);
    font-weight: var(--text-title-lg-weight);
}

.text-body-lg {
    font-size: var(--text-body-lg-size);
    line-height: var(--text-body-lg-line);
    font-weight: var(--text-body-lg-weight);
}

.text-body-md {
    font-size: var(--text-body-md-size);
    line-height: var(--text-body-md-line);
    font-weight: var(--text-body-md-weight);
}

.text-label-md {
    font-size: var(--text-label-md-size);
    line-height: var(--text-label-md-line);
    font-weight: var(--text-label-md-weight);
    letter-spacing: var(--text-label-md-tracking);
}

.text-caption {
    font-size: var(--text-caption-size);
    line-height: var(--text-caption-line);
    font-weight: var(--text-caption-weight);
}

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

.text-muted {
    color: var(--color-on-surface-variant);
}

/* Breadcrumbs (shared by category / subcategory / detail pages) */
.breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--color-on-surface-variant);
}

.breadcrumbs__link:hover {
    color: var(--color-primary);
}

.breadcrumbs__current {
    color: var(--color-on-surface);
    font-weight: 600;
}

.breadcrumbs .material-symbols-outlined {
    font-size: 16px;
    color: var(--color-outline);
}

/* Article prose (shared by blog article body and static/legal pages) */
.article-body {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.article-body__prose h2 {
    font-size: var(--text-headline-md-size);
    line-height: var(--text-headline-md-line);
    font-weight: var(--text-headline-md-weight);
    margin-top: 16px;
    margin-bottom: 16px;
}

.article-body__prose h3 {
    font-size: var(--text-title-lg-size);
    line-height: var(--text-title-lg-line);
    font-weight: 600;
    margin-top: 8px;
    margin-bottom: 12px;
}

.article-body__prose p {
    font-size: var(--text-body-lg-size);
    line-height: var(--text-body-lg-line);
    color: var(--color-on-surface-variant);
    margin-bottom: 16px;
}

.article-body__prose p:last-child {
    margin-bottom: 0;
}

.article-body__prose ul,
.article-body__prose ol {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
    padding-left: 0;
}

.article-body__prose ul {
    list-style: none;
}

.article-body__prose ul > li {
    position: relative;
    padding-left: 32px;
    font-size: var(--text-body-md-size);
    line-height: var(--text-body-md-line);
    color: var(--color-on-surface-variant);
}

.article-body__prose ul > li::before {
    content: "check_circle";
    font-family: "Material Symbols Outlined";
    font-weight: normal;
    font-style: normal;
    -webkit-font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-primary);
}

.article-body__prose ol {
    counter-reset: article-ol;
    list-style: none;
}

.article-body__prose ol > li {
    counter-increment: article-ol;
    position: relative;
    padding-left: 32px;
    font-size: var(--text-body-md-size);
    line-height: var(--text-body-md-line);
    color: var(--color-on-surface-variant);
}

.article-body__prose ol > li::before {
    content: counter(article-ol) ".";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 700;
    color: var(--color-primary);
}

.article-body__prose a {
    color: var(--color-primary);
    text-decoration: underline;
}

.article-body__prose blockquote {
    margin: 8px 0;
    padding: 24px;
    background: var(--color-surface-container);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-lg);
    font-size: var(--text-title-lg-size);
    line-height: var(--text-title-lg-line);
    color: var(--color-primary);
    font-style: italic;
}

.article-body__prose hr {
    border: none;
    border-top: 1px solid var(--color-outline-variant);
    margin: 8px 0;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: var(--radius-lg);
    padding: 12px 24px;
    font-size: var(--text-label-md-size);
    font-weight: var(--text-label-md-weight);
    letter-spacing: var(--text-label-md-tracking);
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

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

.btn--primary:hover {
    background: var(--color-primary-container);
}

.btn--ghost {
    background: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}

.btn--ghost:hover {
    background: var(--color-primary);
    color: var(--color-on-primary);
}

/* Safety status chip, reused on cards, filters and detail hero */
.safety-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: var(--text-caption-size);
    font-weight: 700;
    text-transform: uppercase;
    border: 1px solid transparent;
    white-space: nowrap;
}

.safety-chip .material-symbols-outlined {
    font-size: 16px;
}

.safety-chip--safe {
    background: var(--color-safe-bg);
    color: var(--color-safe-text);
    border-color: var(--color-safe-border);
}

.safety-chip--caution {
    background: var(--color-caution-bg);
    color: var(--color-caution-text);
    border-color: var(--color-caution-border);
}

.safety-chip--danger {
    background: var(--color-danger-bg);
    color: var(--color-danger-text);
    border-color: var(--color-danger-border);
}

/* Left-border accent used on additive cards, colored by safety status */
.safety-border--safe {
    border-left: 4px solid var(--color-safe);
}

.safety-border--caution {
    border-left: 4px solid var(--color-caution);
}

.safety-border--danger {
    border-left: 4px solid var(--color-danger);
}

/* Category accent utility classes, applied server-side per category */
.accent--red {
    --accent: var(--color-accent-red);
    --accent-bg: var(--color-accent-red-bg);
    --accent-text: var(--color-accent-red-text);
    --accent-border: var(--color-accent-red-border);
}

.accent--orange {
    --accent: var(--color-accent-orange);
    --accent-bg: var(--color-accent-orange-bg);
    --accent-text: var(--color-accent-orange-text);
    --accent-border: var(--color-accent-orange-border);
}

.accent--green {
    --accent: var(--color-accent-green);
    --accent-bg: var(--color-accent-green-bg);
    --accent-text: var(--color-accent-green-text);
    --accent-border: var(--color-accent-green-border);
}

.accent--blue {
    --accent: var(--color-accent-blue);
    --accent-bg: var(--color-accent-blue-bg);
    --accent-text: var(--color-accent-blue-text);
    --accent-border: var(--color-accent-blue-border);
}

.accent--purple {
    --accent: var(--color-accent-purple);
    --accent-bg: var(--color-accent-purple-bg);
    --accent-text: var(--color-accent-purple-text);
    --accent-border: var(--color-accent-purple-border);
}

.accent--indigo {
    --accent: var(--color-accent-indigo);
    --accent-bg: var(--color-accent-indigo-bg);
    --accent-text: var(--color-accent-indigo-text);
    --accent-border: var(--color-accent-indigo-border);
}

.accent--teal {
    --accent: var(--color-accent-teal);
    --accent-bg: var(--color-accent-teal-bg);
    --accent-text: var(--color-accent-teal-text);
    --accent-border: var(--color-accent-teal-border);
}

/* Pagination, shared by any listing page (subcategory grid, search results).
   The page-number list must always be rendered from a paginator's elided
   range (Paginator.get_elided_page_range), never the raw page_range — a
   bare page_range renders one link per page (e.g. 37), which flex-shrinks
   every button down to a sliver instead of showing "1 2 3 … 37". */
.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 48px;
}

.pagination__control,
.pagination__page {
    border: 0;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    background: transparent;
    color: var(--color-on-surface-variant);
    cursor: pointer;
    font: inherit;
}

.pagination__control:hover,
.pagination__page:hover {
    background: var(--color-surface-container);
}

.pagination__page--active {
    background: var(--color-primary);
    color: var(--color-on-primary);
}

.pagination__page--active:hover {
    background: var(--color-primary);
}

.pagination__ellipsis {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-on-surface-variant);
}

/* Card shadow shared by cards across page types */
.card-shadow {
    box-shadow: var(--shadow-card);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

@media (hover: hover) {
    .card-shadow:hover {
        box-shadow: var(--shadow-card-hover);
    }
}

/* Filter chip pill — used by the additive category safety filter, the
   global additive list, and the blog rubric filter. */
.filter-chip {
    border: 0;
    padding: 8px 16px;
    border-radius: var(--radius-full);
    font-size: var(--text-label-md-size);
    font-weight: var(--text-label-md-weight);
    background: var(--color-surface-container-lowest);
    box-shadow: inset 0 0 0 1px var(--color-outline-variant);
    color: var(--color-on-surface-variant);
    cursor: pointer;
    transition: box-shadow 0.2s ease, background-color 0.2s ease;
}

.filter-chip:hover {
    box-shadow: inset 0 0 0 1px var(--color-primary);
}

.filter-chip--safe {
    background: var(--color-safe-bg);
    color: var(--color-safe-text);
    box-shadow: inset 0 0 0 1px var(--color-safe-border);
}

.filter-chip--caution {
    background: var(--color-caution-bg);
    color: var(--color-caution-text);
    box-shadow: inset 0 0 0 1px var(--color-caution-border);
}

.filter-chip--danger {
    background: var(--color-danger-bg);
    color: var(--color-danger-text);
    box-shadow: inset 0 0 0 1px var(--color-danger-border);
}

.filter-chip--active {
    box-shadow: inset 0 0 0 2px currentColor;
}

/* Additive card + grid — shared by the per-category listing and the
   global "Список пищевых добавок" page. Each page adds its own largest
   breakpoint column count on top of this. */
.additive-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gutter);
}

.additive-grid__empty {
    grid-column: 1 / -1;
    padding: 48px;
    text-align: center;
}

.additive-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
    padding: 24px;
    background: var(--color-surface-container-lowest);
    border-radius: var(--radius-xl);
    gap: 12px;
}

.additive-card__badge {
    position: absolute;
    top: 24px;
    right: 24px;
}

.additive-card__heading {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.additive-card__code {
    color: var(--color-primary);
}

.additive-card__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.additive-card__excerpt {
    flex: 1;
}

.additive-card__foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid var(--color-outline-variant);
}

.additive-card__foot .material-symbols-outlined {
    font-size: 20px;
}

@media (hover: hover) {
    .additive-card:hover .additive-card__foot .material-symbols-outlined {
        color: var(--color-primary);
    }
}

@media (min-width: 640px) {
    .additive-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}