/* Generated pages (pages/*.mjs): flavours, stores, composition, FAQ, company
   and documents. Tokens, header, footer, buttons and section headings come
   from styles/site.css. */
/* The current page, and "Вкусы" on the flavour pages below it. */
.site-nav a[aria-current] { background: var(--soft); color: var(--accent-text); }
.text-link { color: var(--accent-text); text-decoration: underline; text-underline-offset: .2em; }
.text-link:hover { text-decoration-thickness: 2px; }

.breadcrumbs { padding-top: 24px; font-size: 13px; color: var(--muted); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0; padding: 0; list-style: none; }
.breadcrumbs li + li::before { content: '/'; margin-inline: 10px; }
.breadcrumbs a { display: inline-block; padding-block: 12px; }
.breadcrumbs a:hover { color: var(--accent-text); }
.breadcrumbs [aria-current] { display: inline-block; padding-block: 12px; color: var(--ink); }

/* The square photo is capped by the screen height, so the heading, the lead
   and the photo fit the first screen together. */
.page-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, min(46%, max(280px, 100svh - 240px))); gap: clamp(32px, 5vw, 96px); align-items: center; padding-block: clamp(16px, 2vw, 32px) var(--space-section); }
.page-hero__copy { min-width: 0; }
.page-hero h1 { font-size: clamp(44px, 5vw, 80px); }
.page-lead { max-width: 560px; margin-top: 28px; font-size: 20px; line-height: 1.6; }
.page-hero__image img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; border-radius: var(--radius); }
/* Pages without a photo on the first screen: one text column. */
.page-hero--text { grid-template-columns: minmax(0, 1fr); padding-block-start: clamp(24px, 3vw, 48px); }
.page-hero--text .page-lead { max-width: 760px; }
.page-more { margin-top: 20px; color: var(--muted); font-size: 15px; }
/* A button placed straight into a grid cell keeps its own width instead of
   stretching across the column ("Все магазины" on flavours without a store). */
.buy-grid > .button { justify-self: start; align-self: center; }

.ingredient-list { display: grid; margin: 0; padding: 0; list-style: none; }
.ingredient-list li { display: grid; gap: 4px; padding-block: 14px; border-top: 1px solid var(--line); }
.ingredient-list li:last-child { border-bottom: 1px solid var(--line); }
.ingredient-list__name { font-size: 17px; }
.ingredient-list__note { color: var(--accent-text); font-size: 14px; }

.compare-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 15px; line-height: 1.55; }
.compare-table caption { padding-bottom: 16px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-align: left; text-transform: uppercase; }
.compare-table th, .compare-table td { padding: 14px 16px 14px 0; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.compare-table tbody tr:last-child > * { border-bottom: 1px solid var(--line); }
.compare-table thead th { font-size: clamp(18px, 1.6vw, 22px); font-weight: 500; letter-spacing: -.02em; }
.compare-table tbody th { width: 24%; color: var(--muted); font-weight: 400; }

.faq-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 96px); }
.faq-item { padding-block: 24px 28px; border-top: 1px solid var(--line); }
.faq-item h3 { margin-bottom: 10px; font-size: clamp(19px, 1.6vw, 22px); font-weight: 500; letter-spacing: -.02em; line-height: 1.35; }
.faq-item p { max-width: 640px; color: var(--muted); font-size: 16px; }
.faq-item a { color: var(--accent-text); }

.document { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.document__scan { display: grid; gap: 4px; padding: clamp(16px, 2vw, 24px); border: 1px solid var(--line); border-radius: var(--radius); cursor: zoom-in; transition: border-color .2s; }
.document__scan:hover { border-color: var(--accent-text); }
.document__scan img { width: 100%; height: auto; border-radius: 4px; }
.document__scan .document-zoom { margin-top: 12px; }

.contact-list { display: grid; margin: 0; padding: 0; list-style: none; }
.contact-list li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; padding-block: 14px; border-top: 1px solid var(--line); font-size: 17px; }
.contact-list li:last-child { border-bottom: 1px solid var(--line); }
.contact-list__label { color: var(--muted); font-size: 15px; }
.contact-list a:not(.text-link):hover { color: var(--accent-text); }

.facts-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.55; }
.facts-table caption { padding-bottom: 16px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-align: left; text-transform: uppercase; }
.facts-table th, .facts-table td { padding: 14px 0; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.facts-table tr:last-child > * { border-bottom: 1px solid var(--line); }
.facts-table th { width: 34%; padding-right: 24px; color: var(--muted); font-weight: 400; }

.composition { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.composition__text { max-width: 720px; font-size: 20px; line-height: 1.6; }

.facts { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.facts:not(:has(.product-photos)) { grid-template-columns: minmax(0, 1fr); }
.product-photos { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.product-photos img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; border-radius: var(--radius); }

/* Three columns even for two cards, so the photos never grow to half a screen. */
.flavor-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.flavor-card { display: grid; gap: 12px; height: 100%; padding: clamp(16px, 2vw, 24px); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .2s, color .2s; }
.flavor-card img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; border-radius: calc(var(--radius) - 8px); }
.flavor-card__name { font-size: clamp(22px, 2vw, 28px); font-weight: 500; letter-spacing: -.035em; line-height: 1.3; }
.flavor-card__details { color: var(--muted); font-size: 14px; line-height: 1.5; }
.flavor-card__more { display: inline-flex; align-items: center; gap: 8px; color: var(--accent-text); font-size: 14px; font-weight: 500; }
.flavor-card__more .icon { width: 18px; height: 18px; }
.flavor-card:hover, .flavor-card:focus-visible { border-color: var(--accent-text); color: var(--accent-text); }

.store-list { display: grid; margin: 0; padding: 0; list-style: none; }
.store { display: flex; align-items: center; gap: 20px; min-height: 96px; padding-block: 16px; border-bottom: 1px solid var(--line); font-size: clamp(22px, 2.4vw, 32px); letter-spacing: -.035em; line-height: 1.2; }
.store-list li:first-child .store, .store-list > .store:first-child { border-top: 1px solid var(--line); }
.store--link { transition: color .2s, border-color .2s; }
.store--link:hover, .store--link:focus-visible { color: var(--accent-text); border-color: var(--accent-text); }
.store__logo { width: 44px; height: 44px; flex-shrink: 0; background: center / contain no-repeat; }
.store__logo--wildberries { background-image: url('../assets/icons/wildberries-sign-logo.svg'); }
.store__logo--ozon { background-image: url('../assets/icons/ozon-icon-logo.svg'); }
.store__logo--yandex-market { background-image: url('../assets/icons/yandex-market-sign-logo.svg'); }
.store__name { min-width: 0; }
.store__details { display: block; margin-top: 6px; color: var(--muted); font-size: 15px; letter-spacing: 0; line-height: 1.5; }
.store__status { margin-left: auto; padding-left: 12px; color: var(--muted); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.store--link .store__status { color: var(--accent-text); }

@media (max-width: 850px) {
  .page-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 40%); gap: 32px; padding-bottom: 64px; }
  .page-lead { font-size: 18px; }
  .composition, .facts { grid-template-columns: minmax(0, 1fr); }
  .composition__text { font-size: 18px; }
  .store { gap: 16px; font-size: 22px; }
  .store__logo { width: 36px; height: 36px; }
  .faq-list { grid-template-columns: minmax(0, 1fr); }
  .document { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 600px) {
  /* Headings here are longer than on the main page ("Характеристики"): the
     section number moves below instead of pushing the page wider. */
  .page .section-top { flex-wrap: wrap; }
  .page .section-top h2 { font-size: clamp(32px, 10vw, 40px); }
  .page-hero { grid-template-columns: minmax(0, 1fr); padding-top: 0; }
  .page-hero h1 { font-size: clamp(40px, 12vw, 64px); }
  .facts-table th, .facts-table td { display: block; width: auto; }
  .facts-table th { padding-bottom: 0; padding-right: 0; }
  .facts-table td { padding-top: 4px; border-top: 0; }
  .facts-table tr:last-child th { border-bottom: 0; }
  .product-photos, .flavor-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .flavor-card { padding: 12px; }
  .flavor-card__name { font-size: 18px; }
  .flavor-card__more { font-size: 13px; }
  .flavor-card__details { font-size: 13px; }
  /* Cards with a details line (catalogue) are too long for half a phone
     screen: one column, photo on the left. */
  .flavor-cards:has(.flavor-card__details) { grid-template-columns: minmax(0, 1fr); }
  .flavor-card:has(.flavor-card__details) { grid-template-columns: 112px minmax(0, 1fr); align-items: center; column-gap: 16px; row-gap: 6px; }
  .flavor-card:has(.flavor-card__details) picture { grid-row: 1 / span 3; }
  .flavor-card__more .icon { display: none; }
  /* The status moves under the store name, aligned with it (logo + gap). */
  .store { flex-wrap: wrap; row-gap: 4px; }
  .store__name { flex: 1 1 0; }
  .store--link .store__status { flex-basis: 100%; margin-left: 52px; padding-left: 0; }
  .document { grid-template-columns: minmax(0, 1fr); }
  .document__scan { max-width: 240px; }
  .contact-list li { grid-template-columns: 80px minmax(0, 1fr); gap: 12px; font-size: 16px; }
  .contact-list li > :last-child { overflow-wrap: anywhere; }
  /* The comparison becomes one block per row: the row name, then a line per
     flavour labelled from data-label. */
  .compare-table, .compare-table tbody, .compare-table tr, .compare-table th, .compare-table td { display: block; width: auto; }
  .compare-table caption { display: block; }
  .compare-table thead { display: none; }
  .compare-table tbody tr { padding-block: 12px; border-top: 1px solid var(--line); }
  .compare-table tbody tr:last-child { border-bottom: 1px solid var(--line); }
  .compare-table tbody th, .compare-table td { padding: 2px 0; border: 0 !important; }
  .compare-table tbody th { width: auto; margin-bottom: 6px; }
  .compare-table td::before { content: attr(data-label) ': '; color: var(--muted); }
}