/* CUSINIUM — стили всего сайта одним файлом.
   Цвета, шрифты, размеры и отступы — переменные в :root: дизайн меняется здесь, а не по всему файлу. */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* цвета: бумага каталога, чернила, сталь, сигнальный красный */
  --paper: #f5f3ee;
  --paper-deep: #ebe7de;
  --white: #ffffff;
  --ink: #16181b;
  --ink-2: #4a4e54;
  --ink-3: #62666c;   /* контраст 4.5:1 и выше на бумаге, белом и сером — WCAG AA */
  --line: #dcd7cc;
  --steel-hi: #f3f4f5;
  --steel-lo: #d3d7da;
  --steel-edge: #a3a9ae;
  --accent: #b8381d;

  /* шрифты */
  --font: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* размеры текста */
  --text: 16px;
  --text-sm: 14px;
  --text-xs: 12px;
  --h1: clamp(28px, 2.6vw, 38px);
  --h2: clamp(22px, 2vw, 28px);
  --h3: 18px;

  /* сетка и отступы */
  --wrap: 1160px;
  --gutter: clamp(16px, 3.5vw, 32px);
  --radius: 4px;
  --space: clamp(48px, 6vw, 80px);
  --gallery: 480px;           /* ширина фото на карточке товара */
}

/* ---------- основа ---------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

main { flex: 1; }

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

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }

ul[role="list"], ol, .plain { list-style: none; padding: 0; }

strong { font-weight: 650; }

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- типографика ---------- */

.display {
  font-weight: 750;
  font-stretch: 106%;
  font-size: var(--h1);
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.h2 {
  font-weight: 750;
  font-stretch: 106%;
  font-size: var(--h2);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.h2 a { text-decoration: none; }
.h2 a:hover { text-decoration: underline; }

.h3 {
  font-weight: 700;
  font-stretch: 104%;
  font-size: var(--h3);
  line-height: 1.25;
  margin-bottom: 16px;
}
.h4,
.eyebrow,
.label,
.footer-label {
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--text-xs);
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.h4 { margin: 28px 0 12px; }
.eyebrow { margin-bottom: 12px; }

.lead { font-size: 17px; line-height: 1.55; color: var(--ink-2); max-width: 52ch; }
.small { font-size: var(--text-sm); line-height: 1.5; color: var(--ink-2); }
.muted { color: var(--ink-3); }
.mono { font-family: var(--mono); font-weight: 500; font-size: 0.95em; }

/* ---------- кнопки ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 22px;
  background: var(--ink);
  color: var(--white);
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease;
}
.btn:hover { background: var(--accent); }

.link-arrow { font-weight: 600; font-size: 15px; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.link-arrow::after { content: " →"; }
.link-arrow:hover { color: var(--accent); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 28px; }

/* ---------- шапка ---------- */

.site-header { background: var(--paper); border-bottom: 1px solid var(--line); }

.header-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 32px; min-height: 64px; }

.wordmark {
  font-weight: 900;
  font-stretch: 125%;
  font-size: 18px;
  letter-spacing: 0.08em;
  text-decoration: none;
  line-height: 1;
}

.main-nav { display: flex; gap: 24px; margin-right: auto; }
.main-nav a { font-size: 14.5px; font-weight: 550; text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; }
.main-nav a:hover { border-bottom-color: var(--line); }
.main-nav a[aria-current] { border-bottom-color: var(--ink); }

.region-switch { display: inline-flex; margin-left: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.main-nav + .region-switch { margin-left: 0; }
.region-switch a { font-family: var(--mono); font-weight: 500; font-size: 11.5px; letter-spacing: 0.06em; padding: 6px 10px; text-decoration: none; color: var(--ink-2); }
.region-switch a + a { border-left: 1px solid var(--line); }
.region-switch a:hover { color: var(--ink); }
.region-switch a.is-elsewhere { color: var(--ink-3); }
.region-switch a[aria-current] { background: var(--ink); color: var(--white); border-radius: 3px; }

/* ---------- корень без JavaScript: список рынков ---------- */

.gate { padding-block: var(--space); }
.gate .lead { margin: 12px 0 20px; }
.gate-regions { display: flex; flex-wrap: wrap; gap: 12px; }
.gate-regions a { display: inline-block; padding: 12px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); font-weight: 600; text-decoration: none; }

/* ---------- главная региона ---------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
  padding-block: clamp(40px, 5vw, 64px);
}
.hero .lead { margin-top: 18px; }
.hero-media { position: relative; padding-bottom: 28px; }

/* белая «плашка» под фото: фото Amazon сняты на белом фоне */
.plate { display: block; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.plate img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.plate--hero img { padding: 7%; }

/* ярлык под фото, как бирка на образце */
.tag {
  position: absolute;
  left: -16px;
  bottom: 0;
  display: grid;
  gap: 4px;
  max-width: 300px;
  padding: 12px 16px;
  background: var(--white);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 4px 4px 0 var(--ink);
}
.tag-name { font-weight: 650; font-size: 14px; line-height: 1.3; }
.tag-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-family: var(--mono); font-weight: 500; font-size: 12px; color: var(--ink-2); }
.tag-price { color: var(--ink); }

.block { padding-bottom: var(--space); }
.block--tight { padding-top: 4px; }

.block-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px 40px;
  align-items: end;
  padding-top: 24px;
  margin-bottom: 28px;
  border-top: 1px solid var(--ink);
}
.block-head .eyebrow { margin-bottom: 8px; }
.block-intro { color: var(--ink-2); font-size: 15px; max-width: 52ch; justify-self: end; }

/* где купить */
.where { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 64px; scroll-margin-top: 16px; }
.where > * { padding-top: 24px; border-top: 1px solid var(--ink); }
.where .h2 { margin-bottom: 12px; }
.where .lead { font-size: 16px; }
.where-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-self: start; }
.where-facts div { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line); }
.where-facts dt { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px; }
.where-facts dd { font-weight: 600; font-size: 15px; }

/* ---------- плитки товаров ---------- */

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 32px 20px; }

.card-link { display: flex; flex-direction: column; height: 100%; text-decoration: none; }
.card-body { display: flex; flex-direction: column; flex: 1; }
.card-price { margin-top: auto; }
.card-media { position: relative; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: border-color 0.15s ease; }
.card-media img { width: 100%; aspect-ratio: 1; object-fit: contain; padding: 9%; }
.card-link:hover .card-media { border-color: var(--ink); }

.pack-chip {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--white);
  font-weight: 700;
  font-size: 12.5px;
  line-height: 1.3;
}

.card-body { padding-top: 12px; }
.card-title { flex: none; }
.card-meta { font-family: var(--mono); font-weight: 500; font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.card-title { font-weight: 600; font-size: 15.5px; line-height: 1.35; margin-bottom: 8px; text-wrap: pretty; }
.card-link:hover .card-title { text-decoration: underline; }
.card-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.card-price .price { font-weight: 750; font-size: 18px; }
.card-price .tax { font-size: 12.5px; color: var(--ink-3); }

.rrp-tag {
  display: inline-block;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  line-height: 1;
  padding: 3px 5px 2px;
  color: var(--accent);
  border: 1px solid currentColor;
  border-radius: 3px;
  transform: translateY(-2px);
}

.price-note { margin-top: 36px; font-size: 13.5px; color: var(--ink-3); max-width: 70ch; }

/* ---------- категория ---------- */

.cat-head { padding-block: 20px 32px; }
.cat-head .lead { margin-top: 12px; font-size: 16px; }

/* ---------- хлебные крошки ---------- */

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  padding-top: 18px;
  font-size: 13px;
  color: var(--ink-3);
}
.breadcrumbs li + li::before { content: "/"; margin-right: 8px; color: var(--line); }
.breadcrumbs a { text-decoration: none; color: var(--ink-2); }
.breadcrumbs a:hover { color: var(--ink); text-decoration: underline; }
.breadcrumbs [aria-current] { color: var(--ink); }

/* ---------- карточка товара ---------- */

.product {
  display: grid;
  grid-template-columns: minmax(0, var(--gallery)) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
  padding-block: 20px var(--space);
}

.plate--main img { padding: 6%; }

.thumbs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.plate--thumb { transition: border-color 0.15s ease; }
.plate--thumb img { padding: 8%; }
.plate--thumb:hover { border-color: var(--ink-3); }
.plate--thumb.is-active { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }

.product-info { max-width: 600px; }
.product-info .eyebrow { margin-bottom: 8px; }

.product-title { font-weight: 700; font-stretch: 104%; font-size: clamp(25px, 2.2vw, 32px); line-height: 1.15; letter-spacing: -0.01em; text-wrap: pretty; }

/* количество штук — главное отличие набора, поэтому отдельной заметной плашкой */
.product-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); font-size: 14px; font-weight: 550; }
.chip--pack { background: var(--accent); border-color: var(--accent); color: var(--white); font-weight: 700; }

.sizes { margin-top: 16px; }
.sizes .label { margin-bottom: 8px; }
.size-list { display: flex; flex-wrap: wrap; gap: 8px; }
.size { display: inline-block; min-width: 72px; padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); font-weight: 650; font-size: 15px; text-align: center; text-decoration: none; transition: border-color 0.15s ease; }
.size:hover { border-color: var(--ink-3); }
.size.is-current { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }

.buy-box {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  margin-top: 18px;
  padding: 16px 20px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.rrp-label { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.rrp-value { margin-top: 2px; font-weight: 750; font-stretch: 106%; font-size: 32px; line-height: 1.1; letter-spacing: -0.01em; }
.rrp-note { font-size: 13px; color: var(--ink-3); }
.seller-note { margin-top: 12px; }

/* характеристики — табличка, как на оборудовании */
.product-details {
  display: grid;
  grid-template-columns: minmax(0, var(--gallery)) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
  padding-bottom: var(--space);
}
.product-details > * { padding-top: 24px; border-top: 1px solid var(--ink); }

.spec-plate {
  --rivet: radial-gradient(circle at 40% 35%, #fff 0 1px, #aab0b5 1.5px 2.6px, #80878d 3px 3.6px, transparent 4px);
  padding: 18px 24px;
  border: 1px solid var(--steel-edge);
  border-radius: 6px;
  background:
    var(--rivet) left 8px top 8px / 10px 10px no-repeat,
    var(--rivet) right 8px top 8px / 10px 10px no-repeat,
    var(--rivet) left 8px bottom 8px / 10px 10px no-repeat,
    var(--rivet) right 8px bottom 8px / 10px 10px no-repeat,
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.35) 0 1px, rgba(0, 0, 0, 0.02) 1px 3px),
    linear-gradient(160deg, var(--steel-hi) 0%, var(--steel-lo) 60%, var(--steel-hi) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.spec-plate div { display: grid; grid-template-columns: minmax(110px, 0.8fr) minmax(0, 1.2fr); gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(22, 24, 27, 0.12); }
.spec-plate div:last-child { border-bottom: 0; }
.spec-plate dt { font-size: 13.5px; color: #4a4e54; }
.spec-plate dd { font-size: 14px; font-weight: 600; }
.spec-plate .muted { white-space: nowrap; color: #4a4e54; }
.spec-plate .spec-key dd { color: var(--accent); font-weight: 750; }

.prose { max-width: 64ch; color: var(--ink-2); }
.prose p + p { margin-top: 0.9em; }

.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags li { padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 13.5px; background: var(--white); }

/* ---------- подвал ---------- */

.site-footer { background: var(--ink); color: #cfccc5; font-size: 14px; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px 40px; padding-block: 40px 48px; }
.wordmark--footer { color: var(--white); font-size: 18px; margin-bottom: 10px; }
.site-footer .footer-label { color: #8f8c86; margin-bottom: 8px; }
.site-footer strong { color: var(--white); }
.footer-note p + p { margin-top: 10px; }
.footer-sellers li + li { margin-top: 4px; }

/* ---------- узкие экраны ---------- */

@media (max-width: 900px) {
  .hero,
  .product,
  .product-details,
  .where,
  .block-head { grid-template-columns: minmax(0, 1fr); }
  .hero-media { max-width: 440px; }
  .product-gallery { max-width: var(--gallery); }
  .block-intro { justify-self: start; }
  .where > * + *,
  .product-details > * + * { border-top: 0; padding-top: 0; }
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  :root { --h1: 25px; --h2: 22px; }
  .header-row { min-height: 0; padding-block: 12px; gap: 10px 16px; }
  .main-nav { order: 3; width: 100%; gap: 20px; overflow-x: auto; scrollbar-width: none; }
  .main-nav a { flex: none; white-space: nowrap; }
  .tag { left: 10px; right: 10px; max-width: none; }
  .thumbs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .plate--main img { max-height: 34vh; object-fit: contain; }
  .product { padding-block: 10px var(--space); }
  .breadcrumbs { margin-bottom: 8px; }
  .product-gallery { margin-bottom: 4px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
  .card-title { font-size: 14.5px; }
  .buy-box { padding: 16px; }
  .buy-box .btn { width: 100%; }
  .spec-plate { padding: 16px 18px; }
  .where-facts { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- каталог из многих категорий ---------- */

.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 24px 16px; }
.cat-tile { display: grid; gap: 4px; text-decoration: none; }
.cat-media { display: block; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 8px; transition: border-color 0.15s ease; }
.cat-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; padding: 8%; }
.cat-tile:hover .cat-media { border-color: var(--ink); }
.cat-name { font-weight: 650; font-size: 16px; line-height: 1.3; }
.cat-tile:hover .cat-name { text-decoration: underline; }
.cat-meta { font-size: 13px; color: var(--ink-3); }

.cat-nav { margin-bottom: 28px; }
.cat-nav ul { display: flex; flex-wrap: wrap; gap: 6px; }
.cat-nav a { display: inline-block; padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); font-size: 13.5px; text-decoration: none; color: var(--ink-2); }
.cat-nav a:hover { border-color: var(--ink-3); color: var(--ink); }
.cat-nav a[aria-current] { background: var(--ink); border-color: var(--ink); color: var(--white); }

.eyebrow a { text-decoration: none; }
.eyebrow a:hover { color: var(--ink); text-decoration: underline; }

/* модель — по ней сопоставляют товар, поэтому отдельной заметной плашкой */
.model-no { display: inline-flex; align-items: stretch; border: 1px solid var(--ink); border-radius: var(--radius); overflow: hidden; font-family: var(--mono); font-weight: 500; }
.model-label { padding: 5px 10px; background: var(--ink); color: var(--white); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; display: flex; align-items: center; }
.model-value { padding: 5px 12px; background: var(--white); font-size: 15px; letter-spacing: 0.03em; }

.card-model { margin: -4px 0 8px; font-size: 12.5px; color: var(--ink-3); }
.card-model .mono { color: var(--ink-2); }

.footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 1.1fr) minmax(0, 1fr); }
.footer-cats a { text-decoration: none; }
.footer-cats a:hover { color: var(--white); text-decoration: underline; }
.footer-cats li + li { margin-top: 4px; }

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
}

.product-details--specs-only { grid-template-columns: minmax(0, 620px); }

/* ---------- контакты ---------- */

.contact-intro { margin: -8px 0 16px; max-width: 70ch; }
.seller-table { width: 100%; border-collapse: collapse; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); font-size: 14.5px; }
.seller-table th, .seller-table td { text-align: left; vertical-align: top; padding: 14px 16px; border-top: 1px solid var(--line); }
.seller-table thead th { border-top: 0; font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.seller-table tbody th { font-weight: 600; white-space: nowrap; }
.seller-table tr.is-here { background: #fbfaf6; box-shadow: inset 3px 0 0 var(--ink); }
.seller-table a { text-decoration: none; }
.seller-table a:hover { text-decoration: underline; }

@media (max-width: 720px) {
  .seller-table thead { display: none; }
  .seller-table, .seller-table tbody, .seller-table tr, .seller-table th, .seller-table td { display: block; width: 100%; }
  .seller-table tr { border-top: 1px solid var(--line); padding: 8px 0; }
  .seller-table tr:first-child { border-top: 0; }
  .seller-table th, .seller-table td { border: 0; padding: 4px 16px; white-space: normal; }
  .seller-table td::before { content: attr(data-label); display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
}

/* ---------- состав набора на первом экране ---------- */

.box { margin-top: 16px; padding: 12px 16px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.box .label { margin-bottom: 6px; }
.box-items li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 14.5px; line-height: 1.35; }
.box-items li:first-child { border-top: 0; padding-top: 0; }
.box-qty { font-family: var(--mono); font-weight: 500; color: var(--accent); white-space: nowrap; }
.box-item { font-weight: 600; }
.box-details { display: block; font-weight: 400; font-size: 13.5px; color: var(--ink-2); }
/* деталь переносится целиком: «Ø 2.6 × 5 in (6.6 × 12.7 cm)» не рвётся посередине */
.box-details > span { display: inline-block; }

@media (max-width: 600px) {
  .box-items li { grid-template-columns: 44px minmax(0, 1fr); }
}

/* ---------- фильтр подкатегории ---------- */

.filters { display: grid; gap: 10px; margin-bottom: 28px; padding: 14px 16px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.filters[hidden], [data-filter-item][hidden] { display: none; }
.filter-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.filter-label { flex: none; width: 64px; font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.filter-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); font: inherit; font-size: 13.5px; line-height: 1.3; color: var(--ink); cursor: pointer; transition: border-color 0.15s ease; }
.filter-chip:hover { border-color: var(--ink-3); }
.filter-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }
.filter-chip:disabled { opacity: 0.4; cursor: default; border-color: var(--line); order: 2; }
.filter-label { order: -1; }
.filter-n { font-size: 12px; color: var(--ink-3); }
.filter-chip[aria-pressed="true"] .filter-n { color: rgba(255, 255, 255, 0.7); }
.filter-status { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--ink-2); }
.filter-reset { padding: 0; border: 0; background: none; font: inherit; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.filter-reset[hidden] { display: none; }

@media (max-width: 600px) {
  .filters { padding: 12px; }
  .filter-group { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .filter-group::-webkit-scrollbar { display: none; }
  .filter-label { width: auto; margin-right: 4px; }
  .filter-chip { flex: none; }
}

/* ---------- Legal и Privacy ---------- */

.legal-page > h2 { margin-top: 40px; }
.legal-page > h2:first-child { margin-top: 0; }
.legal-prose { max-width: 72ch; color: var(--ink-2); }
.legal-prose p + p { margin-top: 0.9em; }
.legal-prose h3 { margin-top: 1.6em; margin-bottom: 0.4em; color: var(--ink); }
.legal-prose code { font-family: var(--mono); font-size: 0.92em; padding: 1px 5px; background: var(--white); border: 1px solid var(--line); border-radius: 4px; }
.legal-facts { max-width: 72ch; margin: 14px 0 16px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.legal-facts div { display: grid; grid-template-columns: minmax(120px, 0.55fr) minmax(0, 1.45fr); gap: 12px; padding: 10px 16px; border-top: 1px solid var(--line); }
.legal-facts div:first-child { border-top: 0; }
.legal-facts dt { font-size: 13.5px; color: var(--ink-3); }
.legal-facts dd { font-weight: 600; color: var(--ink); }
.legal-date { margin-top: 18px; color: var(--ink-3); }
.footer-legal { margin-top: 6px; }

@media (max-width: 600px) {
  .legal-facts div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* ---------- доступность, соседние товары, таблица без описания ---------- */

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 10; padding: 10px 16px; background: var(--ink); color: var(--white); text-decoration: none; }
.skip-link:focus { left: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.block-more { margin-top: 24px; }

/* соседние товары: та же плитка, но без цены */
.related { padding-top: 0; }
.related h2 a { text-decoration: none; }
.related h2 a:hover { text-decoration: underline; }
.grid--related { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 20px; }

/* без описания таблица характеристик занимает всю ширину в две колонки */
.product-details--specs-only { grid-template-columns: minmax(0, 1fr); }
.product-details--specs-only .spec-plate { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 36px; align-content: start; }
.product-details--specs-only .spec-plate div { border-bottom: 0; border-top: 1px solid rgba(22, 24, 27, 0.12); }
.product-details--specs-only .spec-plate div:nth-child(1),
.product-details--specs-only .spec-plate div:nth-child(2) { border-top: 0; }

@media (max-width: 900px) {
  .grid--related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-details--specs-only .spec-plate { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- телефон: меню, порядок блоков, фильтр ---------- */

@media (max-width: 768px) {
  /* цена и кнопка — сразу под названием, состав и размеры ниже */
  .product-info { display: flex; flex-direction: column; }
  .product-info .eyebrow { order: 1; }
  .product-title { order: 2; }
  .product-meta { order: 3; }
  .buy-box { order: 4; margin-top: 18px; }
  .seller-note { order: 5; }
  .box { order: 6; }
  .sizes { order: 7; }
}

@media (max-width: 600px) {
  /* ни один пункт меню не прячем за краем экрана */
  .main-nav { flex-wrap: wrap; overflow: visible; gap: 8px 18px; }
  .main-nav a { font-size: 13.5px; }
  .filter-group { flex-wrap: wrap; overflow: visible; }
  .filter-chip { min-height: 40px; }
  .grid--related { gap: 24px 12px; }
}

/* ---------- прайс-лист рынка ---------- */

.price-date { margin-top: 10px; color: var(--ink-3); font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; }
.price-table { width: 100%; border-collapse: collapse; margin-top: 16px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); font-size: 14px; }
.price-table + .price-table { margin-top: 28px; }
.price-table caption { text-align: left; padding: 0 0 8px; font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.price-table th, .price-table td { text-align: left; vertical-align: top; padding: 10px 14px; border-top: 1px solid var(--line); }
.price-table thead th { border-top: 0; font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.price-table .num { text-align: right; white-space: nowrap; font-weight: 700; }
.price-table thead .num { font-weight: 500; }
.price-table td.mono { font-family: var(--mono); font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.price-table a { text-decoration: none; }
.price-table a:hover { text-decoration: underline; }

@media (max-width: 720px) {
  .price-table thead { display: none; }
  .price-table, .price-table tbody, .price-table tr, .price-table td { display: block; width: 100%; }
  .price-table caption { display: block; }
  .price-table tr { border-top: 1px solid var(--line); padding: 10px 14px; }
  .price-table tr:first-child { border-top: 0; }
  .price-table td { border: 0; padding: 2px 0; }
  .price-table td.num { text-align: left; font-size: 17px; }
  .price-table td::before { content: attr(data-label) ": "; color: var(--ink-3); font-size: 12.5px; }
  .price-table td[data-label="Product"]::before { content: none; }
}

/* ---------- печать: карточка и прайс-лист на бумаге ---------- */

@media print {
  .site-header, .site-footer, .filters, .cat-nav, .thumbs, .related, .skip-link, .region-switch { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .wrap { max-width: none; padding-inline: 0; }
  .product { display: block; }
  .product-gallery { max-width: 220px; margin: 0 0 16px; }
  .product-info { display: block; max-width: none; }
  .buy-box, .box, .spec-plate, .price-table { background: #fff; border: 1px solid #999; box-shadow: none; }
  .chip, .pack-chip { background: #fff !important; color: #000 !important; border: 1px solid #999; }
  .product-details { display: block; }
  .product-details > * { border-top: 1px solid #000; }
  /* из адресов печатаем только ссылку на Amazon: остальные на бумаге бесполезны */
  .btn { display: inline-block; padding: 0; background: none !important; color: #000 !important; font-weight: 700; }
  .btn span { display: none; }
  .buy-box .btn::after { content: " — " attr(href); font-weight: 400; font-size: 9pt; word-break: break-all; }
  .seller-note { margin-top: 8px; }
  section, tr, .card { break-inside: avoid; }
}