/* ==========================================================================
   myduxtop.com styles
   ========================================================================== */

:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --panel: #f0f0f0;
  --panel-deep: #e2e2e2;
  --ink: #141414;
  --ink-soft: #3a3a3a;
  --steel: #b6bcc2;
  --steel-dark: #74797e;
  --text: #1a1a1a;
  --text-soft: #5c5c5c;
  --border: #dcdcdc;

  --shadow-sm: 0 2px 8px rgba(20, 20, 20, 0.06);
  --shadow-md: 0 10px 28px rgba(20, 20, 20, 0.10);
  --shadow-lg: 0 20px 48px rgba(20, 20, 20, 0.14);

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  --header-h: 64px;
  --utility-h: 34px;

  /* Inter for anything you actually read: measured x-height 54 vs
     Urbanist's 51 at the same px, so it renders ~6% larger lowercase and is
     drawn for screen text (open apertures, disambiguated I/l/1). Urbanist is
     a geometric display face - excellent for headings, weaker for long
     paragraphs, which is what the brand flagged. */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Urbanist", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  /* 60ch, not 68: the ch unit is the width of "0", which is wider than the
     average lowercase letter, so 68ch measured out at ~80 real characters
     per line. 60ch lands at ~70, inside the 45-75 comfort range. */
  --measure: 60ch;
  --container-w: 1266px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; height: auto; }
a { color: inherit; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 0 0 0.5em;
  color: var(--ink);
}
h1 { font-size: clamp(32px, 4.2vw, 44px); }
h2 { font-size: clamp(26px, 3.2vw, 36px); }
h3 { font-size: clamp(19px, 2.2vw, 24px); }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.3em; }
[hidden] { display: none !important; }

.container {
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 24px;
}

section { padding: 72px 0; scroll-margin-top: calc(var(--header-h) + var(--utility-h) + 16px); }
section.panel { background: var(--panel); }
section.tight { padding: 40px 0; }

.section-head { max-width: 720px; margin: 0 auto 40px; text-align: center; }
.eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 10px;
}
.section-head p { color: var(--text-soft); font-size: 17px; max-width: 62ch; margin-left: auto; margin-right: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-buy {
  background: var(--ink);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-buy:hover { box-shadow: var(--shadow-md); }
/* Надпись кнопки — картинка (правило владельца 2026-08-12). Высота задаётся
   ДОЛЕЙ от кегля кнопки, а не самим кеглем: кадр обрезан по чернилам
   (_tools/render-buy-labels.js), доля = высота чернил / кегль отрисовки.
   При height:1em буквы выходили на четверть мельче прежнего текста. */
.btn-buy .buy-label { height: calc(1em * .75); width: auto; display: inline-block; vertical-align: -0.08em; max-width: none; }
.btn-outline {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}
.btn-outline:hover { background: var(--ink); color: #fff; }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 13px 6px;
}
.btn-block { width: 100%; }

/* ---------- Utility bar ---------- */
.utility-bar {
  background: var(--ink);
  color: #d6d6d6;
  font-size: 13px;
  height: var(--utility-h);
}
.utility-bar .container { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.utility-bar a:not(.btn) { color: #d6d6d6; text-decoration: none; }
.utility-bar a:not(.btn):hover { color: #fff; }
.utility-links { display: flex; gap: 20px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow 0.2s ease;
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 20px; }

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { width: 52px; height: 52px; border-radius: 10px; flex: none; }  /* flex:none — the global img{max-width:100%} plus flex shrinking squashed
     the logo to 18px at 320px. Same family as the min-width:auto trap: a
     flex child will happily go below its stated size unless told not to. */

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
  padding: 6px 0;
}
.nav-links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

.header-actions { display: flex; align-items: center; gap: 14px; }

/* Real, working filter (not decorative): filters the product grid by name/category */
.site-search { position: relative; display: flex; align-items: center; }
.site-search input {
  width: 220px;
  padding: 9px 14px 9px 34px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-family: inherit;
  font-size: 13.5px;
  color: var(--text);
}
.site-search input:focus { outline: 2px solid var(--ink); border-color: var(--ink); }
.site-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--text-soft); pointer-events: none; }

.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  align-items: center; justify-content: center;
  cursor: pointer;
}
.nav-toggle span, .nav-toggle::before, .nav-toggle::after {
  content: ""; display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px;
}
.nav-toggle { flex-direction: column; gap: 4px; }

/* ---------- Hero carousel ---------- */
.hero-carousel { position: relative; padding: 48px 0 64px; overflow: hidden; }
.hero-track { display: flex; transition: transform 0.5s ease; }
.hero-slide { flex: 0 0 100%; }
.hero-slide .container { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; }
.hero-slide .eyebrow { color: var(--text-soft); }
.hero-slide p.lead { font-size: 18px; color: var(--text-soft); max-width: 480px; }
.hero-heading { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; margin: 0 0 0.5em; color: var(--ink); font-size: clamp(32px, 4.2vw, 44px); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.hero-visual {
  position: relative;
  aspect-ratio: 4 / 3.3;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--panel), var(--panel-deep));
  box-shadow: var(--shadow-lg);
  display: flex; align-items: center; justify-content: center;
  padding: 8%;
}
.hero-visual img { width: 82%; max-width: 460px; height: auto; }

.hero-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 20px;
  color: var(--ink);
  z-index: 5;
  box-shadow: var(--shadow-sm);
}
.hero-nav.prev { left: 8px; }
.hero-nav.next { right: 8px; }
.hero-dots { display: flex; gap: 8px; justify-content: center; margin-top: 28px; }
.hero-dots button {
  width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0;
  background: var(--border); cursor: pointer;
}
.hero-dots button.is-active { background: var(--ink); width: 22px; border-radius: 4px; }

/* ---------- Tagline strip ---------- */
.tagline-strip { padding: 22px 0; text-align: center; }
.tagline-strip p {
  margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-soft);
}

/* ---------- Category tiles ---------- */
.tile-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.tile {
  text-decoration: none;
  color: var(--text);
  text-align: center;
  display: block;
}
.tile-thumb {
  /* Panel gray, not white: sits on a plain white (non-panel) section with
     no resting shadow, so the generic --border alone (1.37:1 against white)
     isn't enough definition. Matches the panel-gray "photo tray" used for
     every other transparent-photo container (product-card thumb, gallery,
     blog covers, hero-visual). */
  aspect-ratio: 1; border-radius: var(--radius-md); background: var(--panel); border: 1px solid var(--border);
  overflow: hidden; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; padding: 12%;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.tile:hover .tile-thumb { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.tile-thumb img { width: 100%; height: 100%; object-fit: contain; }
.tile span { font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }

/* ---------- Feature strip ---------- */
.feature-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.feature-item { text-align: left; }
.feature-item .mark {
  width: 40px; height: 40px; border-radius: 10px; background: var(--ink); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; margin-bottom: 16px;
}
.feature-item p { color: var(--text-soft); font-size: 15px; margin: 0; }

/* ---------- Trust banner ---------- */
.trust-banner { background: var(--ink); color: #eaeaea; }
.trust-banner h2 { color: #fff; }
.trust-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.trust-banner p { color: #c4c4c4; }
.trust-stats { display: flex; flex-wrap: wrap; gap: 24px 32px; }
/* 26px, not 30: the widest stat value is a full date ("2026-08-03"), and at
   30px with the larger body type it no longer fit the stats column, pushing
   the third stat onto its own row on desktop. Wrapping is still allowed and
   still kicks in on narrow screens, where it is the right behaviour. */
.trust-stats .stat b { display: block; font-size: 26px; font-weight: 800; color: #fff; }
.trust-stats .stat span { font-size: 12.5px; color: #a3a3a3; text-transform: uppercase; letter-spacing: 0.05em; }
.trust-banner .btn-outline { border-color: #fff; color: #fff; margin-top: 20px; }
.trust-banner .btn-outline:hover { background: #fff; color: var(--ink); }

/* ---------- Collection banner ---------- */
.collection-banner { background: var(--panel); }
.collection-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.collection-visual {
  aspect-ratio: 4/3.2; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-md);
  display: flex; align-items: center; justify-content: center; padding: 8%;
}
.collection-visual img { width: 78%; max-width: 420px; }

/* ---------- About ---------- */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.about-points { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 14px; }
.about-points li { display: flex; gap: 12px; align-items: flex-start; font-weight: 600; font-size: 15px; }
.check {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--ink); color: #fff; font-size: 13px;
  display: flex; align-items: center; justify-content: center; margin-top: 2px;
}
.about-card {
  background: var(--surface); border-radius: var(--radius-lg); padding: 32px;
  box-shadow: var(--shadow-md); border: 1px solid var(--border);
}
.about-card .stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 20px; }
.stat { text-align: left; }
.stat b { display: block; font-size: 28px; font-weight: 800; color: var(--ink); }
.stat span { font-size: 12.5px; color: var(--text-soft); }

/* ---------- Article ---------- */
.article { max-width: var(--measure); margin: 0 auto; }
/* Опоры внутри длинного текста (правило владельца 2026-08-15): кадр, таблица
   и строка цифр разбивают прозу, поэтому им нужны собственные поля, а таблице
   внутри колонки в одну меру — возможность быть шире неё. */
.article-figure { margin: 26px 0; }
.article-figure img { display: block; width: 100%; max-width: 1000px; height: auto; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.article-figure figcaption { margin-top: 9px; font-size: 13.5px; color: var(--text-soft); }
.article .table-wrap { margin: 26px 0; }
.article .stat-row { margin: 26px 0; }
table.compare caption { caption-side: bottom; text-align: left; padding-top: 10px; font-size: 13.5px; color: var(--text-soft); }
.article h3 { margin-top: 1.6em; }
.article p { color: var(--text-soft); font-size: 17.5px; line-height: 1.7; }
.article .drop { font-size: 18px; color: var(--text); }

/* ---------- Buying guide ---------- */
.pick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.pick-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 22px; box-shadow: var(--shadow-sm); }
.pick-card h3 { font-size: 14.5px; color: var(--text-soft); font-weight: 700; margin-bottom: 10px; letter-spacing: 0; }
.pick-card .pick-model { display: block; font-size: 17px; font-weight: 800; color: var(--ink); margin-bottom: 8px; }
.pick-card p { font-size: 15px; color: var(--text-soft); margin: 0; }

/* ---------- Products (horizontal cards) ---------- */
.product-toolbar { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 32px; flex-wrap: wrap; }
.filter-tab {
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  padding: 9px 18px; border-radius: 999px; font-size: 13px; font-weight: 700;
  cursor: pointer; text-transform: uppercase; letter-spacing: 0.03em;
}
.filter-tab.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }

.product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.product-card {
  background: var(--surface);
  /* Sits on the panel-gray section background (#f0f0f0): the generic
     --border (#dcdcdc) is a bare 1.37:1 there, barely legible as a line.
     steel-dark clears 3.86:1 against panel and 4.39:1 against plain white,
     re-verified after the 2026-08-04 cream-to-gray palette swap — still
     comfortably above the ~3:1 target. Single lever (darker border), not
     stacked with a background or shadow change. */
  border: 1px solid var(--steel-dark);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.18s ease;
}
.product-card:hover { box-shadow: var(--shadow-md); }
.product-card .thumb { flex: 0 0 38%; background: var(--panel); display: flex; align-items: center; justify-content: center; padding: 6%; }
.product-card .thumb img { width: 100%; height: 100%; object-fit: contain; }
.product-card .body { padding: 20px 22px; display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 6px; }
.product-card .tag {
  align-self: flex-start; font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-soft);
}
.product-card h3 { font-size: 17px; margin: 2px 0 4px; letter-spacing: -0.01em; }
.product-card p.blurb { font-size: 15px; color: var(--text-soft); margin-bottom: 10px; }
.product-card .specs { list-style: none; padding: 0; margin: 0 0 14px; font-size: 13.5px; color: var(--text-soft); display: grid; gap: 3px; }
/* Пробел внутри "\2022 " НЕ печатается: в CSS он терминирует hex-эскейп, и
   буллет прилипал к тексту ("•1800W total"). Отступ задаётся margin, а не
   пробелом в content. */
.product-card .specs li::before { content: "\2022"; color: var(--ink); font-weight: 700; margin-right: 7px; }
.product-card 
/* ---- ratings and reviews (real data, owner decision 2026-08-09) ---- */
.rating{display:inline-flex;align-items:baseline;gap:8px;margin:2px 0 10px;font-size:.9rem}
.rating-stars{color:#c8892a;letter-spacing:1px;font-size:1rem;line-height:1}
.rating-value{font-weight:700}
.rating-count{color:#6b6b6b}
.rating-count::before{content:"("}
.rating-count::after{content:" ratings)"}

/* align-items:start — карточка по своему тексту. По умолчанию сетка тянет все
   карточки строки до самой высокой, а подпись прибита к низу (margin-top:auto),
   и под коротким отзывом зияла пустая треть карточки. Рваный низ у ряда
   читается нормально, дырка внутри рамки — нет. */
.review-grid{display:grid;gap:18px;align-items:start;grid-template-columns:repeat(3,minmax(0,1fr))}
.review{
  margin:0;display:flex;flex-direction:column;gap:10px;min-width:0;
  background:#fff;border:1px solid #e6e1d8;border-radius:14px;padding:20px 20px 18px;
}
.review-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.review-stars{color:#c8892a;letter-spacing:2px;font-size:1rem;line-height:1}
.review-verified{
  font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#4a6b46;background:#eaf1e8;border-radius:999px;padding:3px 9px;
}
.review-title{margin:0;font-weight:700;font-size:.98rem;line-height:1.35}
.review-quote{
  margin:0;font-size:.93rem;line-height:1.6;color:#33312e;
  border-left:3px solid #e0d8c9;padding-left:14px;
}
.review-more{color:#8a8279;font-weight:700}
.review-foot{
  display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;
  margin-top:auto;padding-top:6px;font-size:.82rem;color:#6b6b6b;
}
.review-name{font-weight:700;color:#33312e}
.review-product{margin-left:auto}
.review-note{margin-top:18px;font-size:.82rem;color:#6b6b6b}
@media (max-width:900px){.review-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .review-grid{grid-template-columns:minmax(0,1fr)}
  .review-product{margin-left:0}
}

.price-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; }
.product-card .price { font-size: 20px; font-weight: 800; color: var(--ink); }
.product-card .price-unavailable { font-size: 13.5px; font-weight: 700; color: var(--text-soft); }
.product-card .btn { padding: 10px 20px; font-size: 12.5px; }

/* ---------- Catalog gallery ---------- */
.gallery-group { margin-bottom: 28px; }
.gallery-group h3 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 16px; }
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.gallery figure { margin: 0; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); background: var(--surface); border: 1px solid var(--border); }
.gallery img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.gallery figcaption { padding: 12px 14px; font-size: 13px; color: var(--text-soft); font-weight: 600; }

/* ---------- Comparison table ---------- */
/* Сравнение бренда: третья колонка тише, это типовая боль, а не обвинение. */
.cmp { width: 100%; border-collapse: collapse; font-size: .95rem; }
.cmp th, .cmp td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: top; text-align: left; }
.cmp thead th { font-size: .78rem; letter-spacing: .07em; text-transform: uppercase; color: var(--text-soft); }
.cmp .cmp-other { color: var(--text-soft); }
@media (max-width: 760px) { .cmp thead { display: none; } .cmp tr { display: block; border-bottom: 1px solid var(--border); padding: 10px 0; } .cmp td { display: block; border: 0; padding: 4px 0; } .cmp td::before { content: attr(data-label) ": "; font-weight: 700; } }
.table-wrap { overflow-x: auto; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); border: 1px solid var(--border); }
table.compare { width: 100%; border-collapse: collapse; min-width: 640px; background: var(--surface); }
table.compare th, table.compare td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--border); font-size: 15.5px; }
table.compare thead th { background: var(--panel); font-weight: 800; }
table.compare th:first-child, table.compare td:first-child { font-weight: 700; color: var(--text-soft); width: 30%; }
table.compare td.yes { font-weight: 700; color: var(--ink); }
table.compare tbody tr:last-child td { border-bottom: none; }
table.compare .col-duxtop { background: rgba(20, 20, 20, 0.03); }

/* ---------- FAQ ---------- */
.faq-list { max-width: 800px; margin: 0 auto; display: grid; gap: 10px; }
.faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.faq-item summary {
  padding: 18px 22px; cursor: pointer; font-weight: 700; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; font-size: 20px; color: var(--ink); flex: none; transition: transform 0.2s ease; font-weight: 400;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-a { padding: 0 22px 20px; color: var(--text-soft); font-size: 16px; line-height: 1.7; max-width: var(--measure); }

/* ---------- Quality/safety ---------- */
.quality-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.quality-card {
  background: var(--surface); border-radius: var(--radius-md); padding: 24px;
  border: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
.quality-card .icon {
  width: 42px; height: 42px; border-radius: 10px; background: var(--panel);
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px; font-size: 20px;
}
.quality-card h3 { font-size: 16px; }
.quality-card p { font-size: 15px; color: var(--text-soft); margin: 0; }
.quality-disclaimer {
  margin-top: 24px; font-size: 13.5px; color: var(--text-soft); text-align: center;
  max-width: 720px; margin-left: auto; margin-right: auto;
}

/* ---------- Blog: feature + grid ---------- */
.blog-feature {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: var(--surface);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); margin-bottom: 24px;
  text-decoration: none; color: var(--text); border: 1px solid var(--border);
}
.blog-feature .thumb { aspect-ratio: 4/3.2; background: var(--panel); }
.blog-feature .thumb img { width: 100%; height: 100%; object-fit: cover; }
.blog-feature .body { padding: 40px; display: flex; flex-direction: column; justify-content: center; }
.blog-feature h3 { font-size: clamp(22px, 3vw, 28px); }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.blog-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  overflow: hidden; text-decoration: none; color: var(--text); box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; transition: box-shadow 0.18s ease;
}
.blog-card:hover { box-shadow: var(--shadow-md); }
.blog-card .thumb { aspect-ratio: 16/10; background: var(--panel); overflow: hidden; }
.blog-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.blog-card .body { padding: 18px; flex: 1; display: flex; flex-direction: column; }
.blog-card .cat { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-soft); }
.blog-card h3 { font-size: 16px; margin: 8px 0; }
.blog-card p { font-size: 14.5px; color: var(--text-soft); flex: 1; }
.blog-card .read-more { font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; margin-top: 10px; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
/* min-width:0 on the tracks and the fields themselves. A text input carries an
   intrinsic min-content width (from its default size attribute, which scales
   with font-size), and a grid item's default min-width:auto refuses to shrink
   below it - so raising the base type pushed the contact block ~53px past the
   container at 320px. Same trap as the flex min-width:auto case in the
   playbook, but on a grid track. */
.contact-grid > * { min-width: 0; }
.contact-form input, .contact-form textarea { min-width: 0; }
.contact-info { background: var(--surface); border-radius: var(--radius-lg); padding: 34px; border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.contact-info a.email { display: inline-block; margin-top: 8px; font-size: 21px; font-weight: 800; color: var(--ink); text-decoration: none; }
.contact-form { display: grid; gap: 16px; }
.contact-form label { font-size: 13px; font-weight: 700; color: var(--text-soft); display: block; margin-bottom: 6px; }
.contact-form input, .contact-form textarea {
  width: 100%; padding: 13px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  font-family: inherit; font-size: 15px; background: var(--surface); color: var(--text);
}
.contact-form input:focus, .contact-form textarea:focus { outline: 2px solid var(--ink); border-color: var(--ink); }
.form-note { font-size: 14px; color: var(--text-soft); }
.form-success { display: none; background: var(--panel); color: var(--ink); padding: 14px 18px; border-radius: var(--radius-sm); font-weight: 700; font-size: 14px; }
.form-success.show { display: block; }

/* ---------- Footer ---------- */
.site-footer { background: var(--panel-deep); color: var(--ink); padding: 56px 0 24px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.footer-brand img { width: 32px; height: 32px; border-radius: 8px; }
.footer-brand span { font-weight: 800; font-size: 20px; color: var(--ink); }
.site-footer p { color: var(--ink-soft); font-size: 15px; max-width: 42ch; }
.site-footer h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 16px; color: var(--ink); }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
/* :not(.btn) matters. A bare ".site-footer a" (specificity 0,1,1) outranks
   ".btn-buy" (0,1,0), so it repainted the footer's buy button's white label
   to --ink-soft: measured 1.62:1 against the button's own near-black fill,
   effectively invisible. Buttons carry their own colour by design; a
   contextual link rule must never paint over a button component. Same
   guard on .utility-bar a for the same latent reason. */
.site-footer a:not(.btn) { color: var(--ink-soft); text-decoration: none; font-size: 15px; }
.site-footer a:not(.btn):hover { color: var(--ink); text-decoration: underline; }
.footer-bottom { border-top: 1px solid rgba(20,20,20,.12); margin-top: 36px; padding-top: 22px; font-size: 13.5px; color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 4px 14px; padding-top: 14px; }
.footer-legal a { font-size: 13.5px; }

/* ---------- Blog article page ---------- */
.post-hero { padding: 44px 0 20px; }
.post-hero .container { max-width: 780px; }
.breadcrumb { font-size: 14px; color: var(--text-soft); margin-bottom: 18px; }
.breadcrumb a { color: var(--ink); text-decoration: none; font-weight: 700; }
.post-body { max-width: var(--measure); margin: 0 auto; padding-bottom: 60px; }
.post-body h2 { margin-top: 1.7em; }
.post-body p { color: var(--text-soft); font-size: 18px; line-height: 1.7; }
.post-body ul li { color: var(--text-soft); font-size: 17.5px; line-height: 1.7; margin-bottom: 8px; }
.post-cover { border-radius: var(--radius-lg); overflow: hidden; margin: 24px 0 8px; box-shadow: var(--shadow-md); }
.post-meta { font-size: 14px; color: var(--text-soft); font-weight: 600; }
.post-cta { margin-top: 40px; padding: 30px; background: var(--panel); border-radius: var(--radius-lg); text-align: center; }

/* ---------- Legal pages ---------- */
.legal-body { max-width: var(--measure); margin: 0 auto; padding: 44px 0 80px; }
.legal-body p { color: var(--text-soft); font-size: 17px; line-height: 1.7; }

/* ---------- 404 ---------- */
.error-page { padding: 120px 0; text-align: center; }
.error-page .code { font-size: 15vw; font-weight: 800; color: var(--ink); line-height: 1; }
.error-page h1 { font-size: 28px; margin-top: 12px; }
.error-page p { color: var(--text-soft); margin-bottom: 28px; }

/* ---------- Responsive ---------- */
/* The desktop header needs roughly 940px to lay out brand + nav + search +
   buy button without colliding, but it only collapsed to the mobile layout
   at 760px. Between those, .header-actions overflowed the viewport and the
   whole page picked up ~113px of horizontal scroll (measured at 768px, a
   very ordinary tablet width). Pre-existing; surfaced while re-measuring
   the header after the logo change. The search box is the widest and least
   essential item there (the products section has its own filter pills), so
   it gives way first and the nav stays until the real mobile breakpoint. */
@media (max-width: 979px) {
  .site-search { display: none; }
}

@media (max-width: 980px) {
  .hero-slide .container { grid-template-columns: 1fr; }
  .hero-visual { max-width: 420px; margin: 0 auto; }
  .about-grid { grid-template-columns: 1fr; }
  .pick-grid { grid-template-columns: repeat(2, 1fr); }
  .tile-grid { grid-template-columns: repeat(3, 1fr); }
  .feature-strip { grid-template-columns: 1fr; gap: 24px; }
  .trust-grid { grid-template-columns: 1fr; text-align: center; }
  .trust-stats { justify-content: center; }
  .collection-grid { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: 1fr; }
  .product-card { flex-direction: column; }
  .product-card .thumb { flex: none; aspect-ratio: 4/3; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .quality-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-feature { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  section { padding: 52px 0; }
  .nav-links, .site-search, .utility-links { display: none; }
  .nav-toggle { display: flex; }
  /* Header on mobile carries logo + buy button + menu toggle. Trimming the
     header button's own padding (not the logo, and not .btn globally) keeps
     all three clear of each other down to 320px. */
  .header-actions .btn { padding: 11px 12px; font-size: 12.5px; }
  .header-actions { gap: 10px; }
  .site-header.nav-open .nav-links {
    display: flex; position: absolute; top: var(--header-h); left: 0; right: 0;
    background: var(--surface); flex-direction: column; padding: 20px 24px; gap: 18px;
    border-bottom: 1px solid var(--border); box-shadow: var(--shadow-md);
  }
  .tile-grid { grid-template-columns: repeat(2, 1fr); }
  .quality-grid { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-nav { width: 36px; height: 36px; font-size: 16px; }
}

@media (max-width: 560px) {
  .pick-grid { grid-template-columns: 1fr; }
  .tile-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Skip link / a11y ---------- */
.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff;
  padding: 10px 18px; z-index: 200; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ---------- Brand story (§9.6) ---------- */
/* Композиция вместо простыни в пол-ширины: лид, врезка, чередование текст/фото.
   Фотографии 1000x750 и обязаны ужиматься по ширине колонки. */
.brand-story { max-width: none; }
.b-lede { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; max-width: 62ch; color: var(--text); }
.b-quote { margin: 22px 0 30px; padding: 14px 0 14px 20px; border-left: 3px solid var(--ink);
  font-family: var(--font-display); font-size: clamp(18px, 2vw, 24px); line-height: 1.3; max-width: 56ch; color: var(--ink); }
.b-row { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: center; margin: 30px 0; }
.b-row .b-text { min-width: 0; }
.b-row .b-text h3 { margin: 0 0 0.5em; }
.b-photo { margin: 0; min-width: 0; }
.b-photo img { display: block; width: 100%; height: auto; border-radius: var(--radius-md); background: var(--panel); }
.b-photo figcaption { margin-top: 8px; font-size: 14px; color: var(--text-soft); }
@media (max-width: 860px) {
  .b-row { grid-template-columns: 1fr; gap: 18px; }
  .b-row .b-photo { order: 2; }
  .b-row .b-text { order: 1; }
}

/* ---------- Lazy fade ---------- */
/* Серая подложка на время загрузки — для фотографий. Надпись кнопки покупки
   тоже ленивая, но она прозрачная: подложка рисовалась под ней светлым
   прямоугольником НАВСЕГДА (не только на время загрузки) и на тёмной кнопке
   выглядела наклейкой. Прод 2026-08-12/13. */
img[loading="lazy"]:not(.buy-label) { background: var(--panel); }

/* Trust banner: below ~1200px the half-width stats column can't hold three
   stats on one row (the widest value is a full date), so the banner stacks
   and the stats get the container's full width instead. Appended as a
   self-contained block at the end of the stylesheet on purpose - inserting
   a media query mid-file previously swallowed the rules that followed it. */
@media (max-width: 1200px) {
  .trust-grid { grid-template-columns: 1fr; text-align: center; }
  .trust-stats { justify-content: center; }
}