/* --- Self-hosted Inter: cyrillic + latin subsets via unicode-range. --- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/Inter-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/Inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Reset & global typography --- */
*, *::before, *::after { box-sizing: border-box; }
a, button { -webkit-tap-highlight-color: rgba(0,0,0,0); }

html {
  scroll-behavior: smooth;
  /* Disable Safari's automatic text inflation (otherwise pill text drifts). */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Inter', 'Segoe UI', Tahoma, Arial, sans-serif;
  color: #1a1a1a;
  background: #f5f5f5;
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
a:hover { color: #B8860B; }

/* --- Header --- */
.site-header {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  position: relative;
  overflow: hidden;
  padding-top: 6px;
}
.site-header::before {
  content: '';
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; /* `inset:0` is CSS4 — IE11 needs explicit sides */
  background: url('Ions.jpg') repeat;
  background-size: 105px 140px;                /* match main sotas size for cell-grid stitching */
  background-position: calc(50% - 307px) 14px; /* tile boundary aligns with main sotas top-left edge (12 gap + 2 border) */
  opacity: 0.10;
  pointer-events: none;
}
.site-header::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background: linear-gradient(90deg, #FFD700, #B8860B 40%, #FFD700);
  pointer-events: none;
}
.site-header > * { position: relative; }
.header-inner {
  max-width: 1050px;
  margin: 0 auto;
  /* 6px top/bottom padding gives sotas a 6px gap from the gold stripe and
     a matching 6px gap from header bottom — works in flex AND non-flex
     browsers (no reliance on `align-items: center`). */
  padding: 6px 20px;
  min-height: 144px; /* sotas content (140 height + 4 border) */
  position: relative;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
@supports (display: grid) {
  .header-inner {
    display: grid;
    /* 0.65:1 fr-ratio biases brand ~55px left of geometric center — keeps
       optical balance with the email block flush right (justify-self:end). */
    grid-template-columns: 0.65fr auto 1fr;
    justify-content: initial;
    text-align: initial;
  }
}
.header-brand {
  /* Old-browser fallback: inline-block so text-align:center on parent works.
     IE10+ overrides to inline-flex; modern Grid below resets to flex. */
  display: inline-block;
  display: inline-flex;
  align-items: center;
  gap: 0;
  text-decoration: none;
  vertical-align: middle;
  grid-column: 2;
}
@supports (display: grid) {
  .header-brand { display: flex; vertical-align: initial; }
}
.header-sotas {
  display: block;
  box-sizing: content-box; /* keep image at native 105x140, border outside */
  width: 105px;          /* native aspect 0.749, matches pattern tile size */
  height: 140px;
  object-fit: cover;
  object-position: top;
  border: 2px solid #444;
}
.header-brand-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
  padding: 0 0 0 16px;
}
.header-brand-logo {
  display: block;
  border: none;
  max-width: 100%;
  height: auto;
  mix-blend-mode: multiply;
}
.header-brand-tagline {
  font-size: 13px; /* metadata tier — legal entity subtitle under main logo, smaller than body */
  font-weight: 500;
  color: #555;
  margin-top: 6px;
  line-height: 1.4;
  max-width: 380px;
}
.tagline-long { display: inline; }
.tagline-short { display: none; }
.header-info {
  /* Old-browser fallback: absolute-position to the right edge so the brand
     can be center-aligned via text-align without info disturbing it. Modern
     Grid resets to a normal cell-3 item below. */
  position: absolute;
  top: 50%;
  right: 20px;
  margin-top: -36px;
  text-align: right;
  grid-column: 3;
  justify-self: end;
}
@supports (display: grid) {
  .header-info {
    position: static;
    top: auto;
    right: auto;
    margin-top: 0;
  }
}
.header-emails {
  font-size: 14px;
  line-height: 1.85;
}
.header-emails .elabel { font-weight: 600; }
.header-emails a {
  color: #B8860B;
  text-decoration: none;
}
.header-emails a:hover { text-decoration: underline; }

/* --- Contact strip (phones) --- */
.contact-strip {
  background: #FFFDE7;
  border-top: 1px solid #e8e0b0;
  border-bottom: 4px solid #FFD700;
}
.contact-strip-inner {
  max-width: 1150px; /* wider than main 1050px container — pushes Тольятти/Томск outward so 14px text still has comfortable gap; Москва stays centered */
  margin: 0 auto;
  padding: 8px 20px;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  flex-wrap: nowrap;
  gap: 0;
}
.contact-strip-inner > div {
  white-space: nowrap;
}
.contact-strip .city { font-weight: 600; }
.contact-strip a {
  color: #1a1a1a;
  text-decoration: none;
}
.contact-strip a:hover { color: #B8860B; }

/* --- Nav --- */
.site-nav {
  background: #f7f7f7;
  border-bottom: 1px solid #e8e8e8;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 6px rgba(0,0,0,0.07);
}
.site-nav-inner {
  max-width: 1050px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: center;
  gap: 0;
}
.site-nav .nav-home {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  color: #555;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  border-right: 1px solid #e0e0e0;
  transition: color 0.15s;
  flex-shrink: 0;
}
.site-nav .nav-home:hover { color: #B8860B; }
.site-nav .nav-home svg { display: block; }
.site-nav a {
  display: block;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.site-nav a.active {
  color: #1a1a1a;
  border-bottom-color: #FFD700;
}
/* :hover only on real-hover devices — iOS Safari touch :hover sticks otherwise. */
@media (hover: hover) {
  .site-nav a:hover {
    color: #1a1a1a;
    border-bottom-color: #FFD700;
  }
}
.nav-right {
  display: flex;
  margin-left: 24px;
  padding-left: 16px;
  border-left: 1px solid #e0e0e0;
}

/* --- Hero --- */
.hero {
  background: linear-gradient(180deg, #fff 0%, #f9f9f9 100%);
  border-bottom: 4px solid #FFD700;
}
.hero-inner {
  max-width: 1050px;
  margin: 0 auto;
  padding: 48px 20px 20px;
  text-align: center;
}
.hero h1 {
  font-family: 'Inter', sans-serif;
  margin: 0 0 4px;
}
.hero h1, .page-h1 {
  font-size: 26px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.3;
  letter-spacing: -0.2px;
}
.hero h1 span.for-text {
  font-size: 20px;
  font-weight: 500;
  color: #1a1a1a;
  display: block;
  margin-top: 6px;
  letter-spacing: 0;
}
.hero-subtypes {
  /* Base layout works in IE11: flex row with subtypes on a single line. */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
  color: #1a1a1a;
  margin: 10px 0 0;
  width: 100%;
}
/* Modern browsers: grid balances both subtype groups symmetrically around the hyphen. */
@supports (display: grid) {
  .hero-subtypes {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }
}
.hero-subtypes .subtypes-left {
  text-align: right;
  white-space: nowrap;
}
.hero-subtypes .subtypes-right {
  text-align: left;
  white-space: nowrap;
}
.hero-subtypes .subtypes-hyphen {
  text-align: center;
  padding: 0 1px;
}
.hero-subtypes .sep {
  color: #FFD700;
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
  vertical-align: middle;
}
.hero-divider {
  width: 48px;
  height: 3px;
  background: #FFD700;
  border-radius: 2px;
  margin: 14px auto 14px;
}
/* --- A-Z Pills --- */
.az-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  padding: 4px 0 8px;
}
.az-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  background: #f0f0f0;
  color: #1a1a1a;
  border: 1px solid #d8d8d8;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
/* Hover только у активных пилюль — неактивные .az-pill это <span> без href. */
.az-pill.has-catalog {
  background: #FFF9C4;
  border-color: #E6C800;
  color: #1a1a1a;
}
.az-pill.has-catalog:hover {
  background: #FFF176;
  border-color: #C8A800;
}
.az-pill svg {
  flex-shrink: 0;
  opacity: 0.7;
}
.az-legend {
  margin: 14px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: #8a6000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.az-legend-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  background: #FFF9C4;
  border: 1px solid #E6C800;
  border-radius: 10px;
  flex-shrink: 0;
}

/* --- Product sections --- */
.products {
  max-width: 1050px;
  margin: 40px auto 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 20px 48px;
}
.prod-section {
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  border-radius: 4px;
  overflow: hidden;
  /* Leave 4px below the sticky nav for the .flash highlight ring to be visible. */
  scroll-margin-top: 52px;
}
.prod-section-title {
  font-size: 20px;
  font-weight: 700;
  color: #1a1a1a;
  padding: 16px 24px 14px;
  border-bottom: 2px solid #FFD700;
  margin: 0;
}
.prod-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px 16px;
}
.prod-card {
  display: flex;
  gap: 16px;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  padding: 14px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.prod-card:hover {
  box-shadow: 0 2px 12px rgba(0,0,0,0.10);
  border-color: #FFD700;
}
.prod-card img {
  width: 100px;
  height: 80px;
  object-fit: contain;
  border-radius: 4px;
  flex-shrink: 0;
  background: #fff;
  padding: 4px;
}
.prod-card-body { flex: 1; }
.prod-card-name {
  font-size: 16px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 6px;
}
.prod-card-desc {
  font-size: 14px;
  color: #555;
  margin: 0 0 10px;
  line-height: 1.5;
}
.prod-card-more {
  font-size: 14px;
  font-weight: 600;
  color: #B8860B;
}

/* --- Inner page H1 (typography unified with .hero h1 above) --- */
.page-h1 { margin: 0 0 8px; }

/* Highlight a product section when user jumps to it via nav */
@keyframes prod-flash-section {
  0%   { box-shadow: 0 0 0 4px rgba(255,215,0,.9), 0 0 24px rgba(255,215,0,.5); }
  100% { box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
}
.prod-section:target,
.prod-section.flash {
  animation: prod-flash-section 4s ease-out;
}

/* --- Brand closing block (bottom of index) ---
   Mirrors the header: 4px yellow top stripe + faint соты pattern background.
   Doubles as a buffer so #parts/#tools naturally reach the scrollspy threshold. */
.brand-closing {
  position: relative;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  border-radius: 4px;
  overflow: hidden;
}
.brand-closing::before {
  content: '';
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: url('Ions.jpg') repeat;
  background-size: 105px 140px;
  background-position: center top;
  opacity: 0.10;
  pointer-events: none;
}
.brand-closing::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, #FFD700, #B8860B 40%, #FFD700);
  pointer-events: none;
}
.brand-closing-inner {
  position: relative;
  text-align: center;
  padding: 36px 24px 48px;
}
.brand-closing-year {
  font-size: 28px;
  font-weight: 700;
  color: #1a1a1a;
  letter-spacing: -0.3px;
  margin: 0;
  line-height: 1.1;
}
.brand-closing-year::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background: #FFD700;
  border-radius: 2px;
  margin: 14px auto 0;
}
.brand-closing-lead {
  max-width: 620px;
  margin: 20px auto 22px;
  font-size: 16px;
  line-height: 1.6;
  color: #555;
}
.brand-closing-cities {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 6px;
}
.brand-closing-cities .sep {
  color: #FFD700;
  font-weight: 900;
  margin: 0 10px;
  font-size: 18px;
  vertical-align: middle;
}
.brand-closing-shipping {
  font-size: 14px;
  font-weight: 500;
  color: #555;
  margin-bottom: 22px;
}
.brand-closing-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #B8860B;
  padding: 8px 20px;
  border: 1px solid #E6C800;
  border-radius: 20px;
  background: #FFFDE7;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.brand-closing-cta:hover {
  background: #FFF9C4;
  border-color: #B8860B;
}

/* --- Inner page content --- */
.page-content {
  background: #fff;
}
.page-content-inner {
  max-width: 1050px;
  margin: 0 auto;
  padding: 28px 20px 48px;
}
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #B8860B;
  text-decoration: none;
  padding: 6px 12px 6px 8px;
  border: 1px solid #E6C800;
  border-radius: 20px;
  background: #FFFDE7;
  margin-bottom: 20px;
  transition: background 0.15s, border-color 0.15s;
}
.back-btn:hover {
  background: #FFF9C4;
  border-color: #B8860B;
  color: #B8860B;
}

/* --- Footer --- */
.site-footer { background: #4a4a4a; color: #fff; }
.site-footer-inner > div:last-child { justify-self: end; }
.site-footer-inner {
  max-width: 1050px;
  margin: 0 auto;
  padding: 36px 20px 28px 20px;
  /* IE11 fallback: 3-column flex row with grow factors 1:1.6:1
     mimicking Grid's 1fr/1.6fr/1fr ratio. */
  display: flex;
  align-items: flex-start;
}
.site-footer-inner > * { flex: 1 0 0px; min-width: 0; padding-right: 24px; }
.site-footer-inner > *:nth-child(2) { flex: 1.6 0 0px; }
.site-footer-inner > *:last-child { padding-right: 0; }
@supports (display: grid) {
  .site-footer-inner {
    display: grid;
    grid-template-columns: 1fr 1.6fr 1fr;
    gap: 28px 40px;
    align-items: start;
  }
  .site-footer-inner > * { flex: initial; padding-right: 0; }
}
.footer-cities {
  /* IE11 fallback: three equal flex columns with margin gaps. */
  display: flex;
  align-items: flex-start;
}
.footer-cities > * { flex: 1 1 0px; min-width: 0; padding-right: 30px; }
.footer-cities > *:last-child { padding-right: 0; }
@supports (display: grid) {
  .footer-cities {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 30px;
    align-items: start;
  }
  .footer-cities > * { flex: initial; padding-right: 0; }
}
.footer-col-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .9px;
  color: #FFD700;
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.footer-col-title svg { flex-shrink: 0; }
.footer-company-name { font-size: 14px; font-weight: 700; color: #fff; margin: 0 0 8px; }
.footer-company-desc { font-size: 12px; color: #ccc; line-height: 1.6; margin: 0 0 14px; }
.footer-iso {
  font-size: 12px; color: #aaa; line-height: 1.55;
  border-left: 2px solid #FFD700; padding-left: 10px;
}
.footer-phone {
  display: block; font-size: 14px; color: #ddd;
  text-decoration: none; line-height: 1.9; white-space: nowrap;
}
.footer-phone:hover { color: #FFD700; }
.footer-email-row { display: flex; align-items: baseline; gap: 6px; margin: 4px 0; }
.footer-email-row a { font-size: 14px; color: #ddd; text-decoration: none; }
.footer-email-row a:hover { color: #FFD700; }
.footer-email-city { font-size: 12px; color: #aaa; }
.footer-web { margin-top: 12px; }
.footer-web a { font-size: 14px; color: #FFD700; text-decoration: none; }
.footer-web a:hover { text-decoration: underline; }
.site-footer-bottom {
  border-top: 1px solid #666;
  text-align: center;
  padding: 12px 20px;
  font-size: 12px;
  color: #aaa;
  max-width: 1050px;
  margin: 0 auto;
}
.footer-tm { margin-bottom: 4px; }
.footer-tm sup { font-style: normal; font-weight: 700; color: #FFD700; font-family: 'Arial','Helvetica',sans-serif; font-size: 0.8em; }

/* --- Copy-email (inline in header) --- */
.header-emails .copy-btn { vertical-align: middle; margin-left: 4px; }
.copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  color: #777;
  transition: color .12s, background .12s, border-color .12s;
  flex-shrink: 0;
}
.copy-btn:hover { color: #B8860B; background: #FFFDE7; border-color: #e8de9a; }
.copy-btn.copied { color: #2e7d32; background: #e8f5e9; border-color: #c8e6c9; }
.copy-btn svg { width: 13px; height: 13px; pointer-events: none; }

/* --- Copy-email (split container on Contacts page) --- */
.email-split {
  display: flex;
  align-items: stretch;
  background: #fafafa;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  overflow: hidden;
  min-height: 44px;
  margin-bottom: 12px;
}
.em-zone {
  flex: 0 0 auto;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  background: #fff;
}
.em-link {
  font-size: 14px;
  font-weight: 600;
  color: #B8860B;
  text-decoration: none;
}
.em-link:hover { text-decoration: underline; }
.copy-zone {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  background: #fafafa;
  border-left: 1px solid #e0e0e0;
  color: #555;
  font-size: 12px;
  cursor: pointer;
  transition: background .12s, color .12s;
  user-select: none;
}
.copy-zone:hover { background: #FFFDE7; color: #B8860B; }
.copy-zone.copied { background: #e8f5e9; color: #2e7d32; }
.copy-zone svg { width: 14px; height: 14px; flex-shrink: 0; pointer-events: none; }

/* Toast */
.copy-toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #1a1a1a;
  color: #fff;
  padding: 10px 18px;
  border-radius: 4px;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 1000;
}
.copy-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* --- Scroll to top --- */
#to-top {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 44px;
  height: 44px;
  background: #FFD700;
  color: #1a1a1a;
  border: none;
  border-radius: 50%;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  transition: background 0.15s, transform 0.15s;
  z-index: 200;
  line-height: 1;
}
#to-top:hover { background: #f0c800; transform: translateY(-2px); }

/* --- Burger button (mobile only — fixed top-right of viewport) --- */
.nav-burger {
  position: fixed;
  top: 14px;
  right: 12px;
  width: 44px;
  height: 44px;
  background: rgba(255,255,255,0.92);
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  cursor: pointer;
  color: #1a1a1a;
  padding: 10px;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
}
.nav-burger:hover { color: #B8860B; }
.nav-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 40px;
  height: 40px;
  border: none;
  background: none;
  font-size: 26px;
  color: #555;
  cursor: pointer;
  line-height: 1;
  display: none;
  z-index: 5;
}


/* --- Legacy browser warning bar (injected by script.js when CSS Grid is unsupported). */
#legacy-browser-bar {
  background: #FFFDE7;
  border-bottom: 1px solid #E6C800;
  color: #5a4000;
  font-size: 14px;
  line-height: 1.5;
  padding: 10px 48px 10px 20px;
  /* Pinned to top — JS sets body.paddingTop and burger.top to match its height. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  text-align: center;
}
#legacy-browser-bar button {
  position: absolute;
  top: 4px;
  right: 8px;
  background: none;
  border: none;
  color: #8a6000;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 10px;
}
#legacy-browser-bar button:hover {
  color: #1a1a1a;
}


/* --- A-Z details: collapsed on mobile, force-open on desktop (via JS) --- */
.az-details > summary { list-style: none; cursor: pointer; }
.az-details > summary::-webkit-details-marker { display: none; }
.az-details-summary { display: none; }


/* --- Page subtitle: short intro paragraph below H1 (Tools, Parts, Tubes). */
.page-subtitle { font-size: 14px; color: #555; line-height: 1.6; margin: 0 0 28px; }


/* --- Auxiliary product pages (F-01 cleaning, Antikor 2020 rust inhibitor). */
.aux-subtitle { font-size:14px; color:#555; margin:0 0 28px; line-height:1.6; }

/* Hero */
.aux-hero { display:flex; gap:28px; align-items:flex-start; background:linear-gradient(135deg,#FFFDE7 0%,#FFF9C4 100%); border:1px solid #F0E58A; border-radius:8px; padding:28px; margin-bottom:28px; }
.aux-hero-img { flex-shrink:0; background:#fff; border:1px solid #e8e8e8; border-radius:4px; padding:10px; }
.aux-hero-img img { display:block; }
.aux-hero-body { flex:1; min-width:0; }
.aux-badges { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.aux-badge { display:inline-block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; border-radius:3px; padding:3px 8px; }
.aux-badge-gold { background:#FFD700; color:#1a1a1a; }
.aux-badge-neutral { background:#fff; color:#555; border:1px solid #d8d8d8; }
.aux-name { font-size:22px; font-weight:700; color:#1a1a1a; margin-bottom:8px; }
.aux-name-alt { font-size:14px; font-weight:400; color:#777; }
.aux-pitch { font-size:14px; color:#555; line-height:1.6; margin:0 0 16px; }
.aux-surfaces { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:18px; }
.aux-surface-label { font-size: 12px; color:#777; margin-right:4px; text-transform:uppercase; letter-spacing:.4px; font-weight:600; }
.aux-surface-tag { font-size:12px; color:#1a1a1a; background:#fff; border:1px solid #d8d8d8; border-radius:3px; padding:4px 10px; font-weight:500; }
.aux-cta { display:inline-flex; align-items:center; gap:10px; font-size:14px; font-weight:600; color:#B8860B; padding:8px 12px; border:1px solid #e8de9a; border-radius:4px; background:#fff; text-decoration:none; transition:background .12s,border-color .12s; }
.aux-cta::before { content:'PDF'; font-size:10px; font-weight:700; background:#B8860B; color:#fff; padding:2px 6px; border-radius:3px; flex-shrink:0; }
.aux-cta:hover { background:#FFF9C4; border-color:#E6C800; }

/* Content blocks */
.aux-block { background:#fff; border:1px solid #e8e8e8; border-left:3px solid #FFD700; border-radius:4px; padding:20px 24px; margin-bottom:16px; }
.aux-block-warn { border-left-color:#C95A00; background:#FFF8F0; }
.aux-block-title { display:flex; align-items:center; gap:8px; font-size:16px; font-weight:700; color:#1a1a1a; margin:0 0 12px; }
.aux-warn-icon { flex-shrink:0; }
.aux-block-text { font-size:14px; color:#555; line-height:1.7; margin:0; }

/* Application steps */
.aux-steps { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; }
.aux-steps li { display:flex; gap:14px; align-items:flex-start; }
.aux-step-num { flex-shrink:0; width:28px; height:28px; border-radius:50%; background:#FFD700; color:#1a1a1a; font-weight:700; font-size:14px; display:flex; align-items:center; justify-content:center; }
.aux-step-body { flex:1; padding-top:2px; }
.aux-step-name { font-size:14px; font-weight:700; color:#1a1a1a; margin-bottom:2px; }
.aux-step-text { font-size:14px; color:#555; line-height:1.6; margin:0; }

/* Safety bullets */
.aux-safety { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px; }
.aux-safety li { font-size:14px; color:#555; line-height:1.5; padding-left:18px; position:relative; }
.aux-safety li::before { content:''; position:absolute; left:0; top:8px; width:6px; height:6px; border-radius:50%; background:#C95A00; }

/* Related products */
.aux-related-title { font-size:16px; font-weight:700; color:#1a1a1a; margin:28px 0 12px; padding-bottom:8px; border-bottom:2px solid #FFD700; }


/* --- Lightbox (zoom-in for images): shared by History and Filters pages.
   Page-specific tweaks stay inline as small overrides. */
.lightbox { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,.82); z-index: 1000; align-items: center; justify-content: center; cursor: zoom-out; }
.lightbox.active { display: flex; }
.lightbox img { width: auto; height: auto; max-width: 88vw; max-height: 88vh; object-fit: contain; border-radius: 6px; box-shadow: 0 8px 40px rgba(0,0,0,.5); }
.lightbox-close { position: absolute; top: 18px; right: 24px; font-size: 32px; color: #fff; cursor: pointer; line-height: 1; user-select: none; }


/* --- Mobile: phone portrait + landscape + small tablets (≤932px) --- */
@media (max-width: 932px) {

  /* Prevent off-screen drawer from creating horizontal scroll.
     `clip` (not `hidden`) — `hidden` creates a scroll-container that breaks
     position:sticky on descendants. */
  html, body { overflow-x: clip; }

  /* Lock page scroll when drawer is open. */
  html.nav-open, body.nav-open {
    overflow: hidden;
  }

  /* --- Header: compact, sotas 60×80, logo centered. --- */
  .site-header {
    padding-top: 6px;
  }
  .header-inner {
    display: flex;
    grid-template-columns: none;
    justify-content: center;            /* centers brand horizontally */
    align-items: center;
    min-height: 96px;                   /* 80 sotas + 4 border + 6 top gap + 6 bottom gap (parity with desktop ratio) */
    padding: 0 60px;                    /* symmetric padding leaves room for fixed burger */
  }
  .header-brand { gap: 0; align-items: center; }
  .header-sotas {
    width: 60px; height: 80px; flex-shrink: 0;
    box-sizing: content-box;
    border: 1px solid #444;
  }
  .header-brand-text {
    padding: 0 0 0 10px;
    justify-content: center;
    align-items: center;
  }
  .header-brand-logo { max-width: 180px; width: 180px; }
  .header-brand-tagline {
    display: block;
    font-size: 11px;
    line-height: 1.3;
    color: #555;
    margin-top: 4px;
    font-weight: 500;
    white-space: nowrap;
    text-align: center;
  }
  .header-info { display: none; }
  /* Burger visible on mobile */
  .nav-burger { display: inline-flex; }
  .nav-close { display: block; }
  /* Pattern background — align tile top with main sotas content top (12px = 4 padding + 6 gap + 2 border) */
  .site-header::before { background-size: 60px 80px; background-position: 0 12px; }

  /* --- Contact strip: only first city (Тольятти HQ), centered --- */
  .contact-strip-inner {
    padding: 6px 8px;
    gap: 0;
    justify-content: center;
    font-size: 12px;
  }
  .contact-strip-inner > div + div { display: none; }

  /* --- Site nav: drawer on the right, hidden by default --- */
  .site-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: min(80vw, 320px);
    transform: translateX(100%);
    transition: transform 0.25s ease;
    z-index: 300;
    box-shadow: -4px 0 16px rgba(0,0,0,0.15);
    overflow-y: auto;
    padding: 0;
  }
  body.nav-open .site-nav { transform: translateX(0); }
  /* Overlay */
  body.nav-open::before {
    content: '';
    position: fixed; top: 0; right: 0; bottom: 0; left: 0;
    background: rgba(0,0,0,0.4);
    z-index: 250;
    cursor: pointer;
  }
  .site-nav-inner {
    flex-direction: column;
    align-items: stretch;
    padding: 56px 0 16px;
    max-width: none;
    gap: 0;
  }
  .site-nav .nav-home {
    padding: 14px 20px;
    border-right: none;
    border-bottom: 1px solid #eee;
    justify-content: flex-start;
    gap: 12px;
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
    min-height: 48px;
  }
  .site-nav .nav-home::after {
    content: 'Главная';
  }
  .site-nav a {
    padding: 14px 20px;
    border-bottom: 1px solid #eee;
    border-bottom-color: #eee;
    font-size: 16px;
    min-height: 48px;
    display: flex;
    align-items: center;
  }
  /* :hover only on real-hover devices. Touch tap-feedback handled by :active. */
  @media (hover: hover) {
    .site-nav a:hover {
      border-bottom-color: #FFD700;
      background: #FFFDE7;
    }
  }
  /* Brief tap-feedback for touch devices. */
  .site-nav a {
    -webkit-tap-highlight-color: rgba(255, 215, 0, 0.3);
  }
  .site-nav a:active {
    background: #FFFDE7;
  }
  /* Drawer: hide .active highlight — tap itself is the user's confirmation. */
  .site-nav a.active {
    border-bottom-color: #eee;
    background: transparent;
    color: inherit;
  }
  .nav-right {
    flex-direction: column;
    margin-left: 0;
    padding-left: 0;
    border-left: none;
    border-top: 8px solid #f7f7f7;
  }
  /* --- Hero: smaller fonts/paddings --- */
  .hero-inner { padding: 28px 16px 16px; }
  .hero h1, .page-h1 { font-size: 22px; }
  .hero h1 span.for-text { font-size: 16px; }
  .hero-subtypes {
    display: block;
    font-size: 14px;
    text-align: center;
    margin: 10px 0 0;
  }
  .hero-subtypes .subtypes-left,
  .hero-subtypes .subtypes-right { display: inline; white-space: normal; }
  .hero-subtypes .subtypes-hyphen { display: inline; }
  .hero-subtypes .sep { font-size: 20px; }
  .hero-divider { margin: 12px auto; }
  .az-pill { padding: 8px 12px; font-size: 12px; }

  /* A-Z details: show summary as a button, content collapsed by default */
  .az-details-summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 10px auto 0;
    padding: 10px 18px;
    background: #FFFDE7;
    border: 1px solid #E6C800;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    color: #B8860B;
    user-select: none;
  }
  .az-details-summary::after {
    content: '+';
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    margin-left: 4px;
  }
  .az-details[open] .az-details-summary::after { content: '−'; }
  .az-details[open] > .az-pills { margin-top: 14px; }

  /* --- Product cards on index --- */
  .products { margin-top: 24px; padding: 0 12px 32px; gap: 12px; }
  .prod-section-title { font-size: 18px; padding: 14px 16px 12px; }
  .prod-cards { padding: 12px; gap: 8px; }
  .prod-card { padding: 12px; gap: 12px; }
  .prod-card img { width: 80px; height: 60px; }
  .prod-card-name { font-size: 14px; }
  .prod-card-desc { font-size: 12px; }

  /* --- Brand closing block: tighter on phone --- */
  .brand-closing-inner { padding: 28px 16px 24px; }
  .brand-closing-year { font-size: 22px; }
  .brand-closing-year::after { margin-top: 12px; }
  .brand-closing-lead { font-size: 14px; margin: 16px auto 18px; }
  .brand-closing-cities { font-size: 14px; }
  .brand-closing-cities .sep { margin: 0 8px; font-size: 16px; }
  .brand-closing-shipping { font-size: 12px; margin-bottom: 18px; }
  .brand-closing-cta { font-size: 14px; padding: 8px 16px; }

  /* --- Inner page content --- */
  .page-content-inner { padding: 20px 12px 32px; }

  /* --- Page-specific grids: 1 column / column flex on mobile --- */
  .city-cards { grid-template-columns: 1fr; gap: 10px; }
  .bdra-lines { grid-template-columns: 1fr; }
  .bdra-hero, .tw-hero, .resin-hero, .moly-hero, .kspark-hero, .aux-hero,
  .fl-card {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
  /* Product page hero images: cap at 220px and center on mobile/landscape.
     Class names vary across pages — list all actual ones. */
  .bdra-hero-left, .bdra-hero-photo,
  .tw-hero-img, .resin-hero-img, .moly-hero-img,
  .kspark-hero-img, .aux-hero-img, .hero-img {
    width: 100%;
    max-width: 220px;
    margin: 0 auto;
    flex: 0 0 auto;
    align-self: center;
  }
  .bdra-hero-left img, .bdra-hero-photo img,
  .tw-hero-img img, .resin-hero-img img, .moly-hero-img img,
  .kspark-hero-img img, .aux-hero-img img, .hero-img img {
    max-width: 100%;
    width: 100%;
    height: auto;
  }
  /* F-01 / Антикор: натив 125×160 — не растягивать, иначе мыльно. */
  .aux-hero-img { max-width: 145px; }
  .aux-hero-img img { width: auto; max-width: 100%; }
  /* Bedra badges — не наследуют width:100%, иначе бейджи разъезжаются. */
  .bdra-hero-marks { flex-wrap: wrap; padding: 10px; gap: 10px; }
  .bdra-hero-marks img.bdra-badge-logo,
  .bdra-hero-marks img.bdra-badge-germany {
    width: auto;
    max-width: 45%;
    height: auto;
    max-height: 44px;
    object-fit: contain;
  }
  .lib-books { grid-template-columns: 1fr; }
  .tools-card { flex-direction: column; gap: 14px; }
  .tools-card-media { width: 100%; }
  /* Cap brand-photo width to avoid upscaling (e.g. 3R 280×100). Selector
     specificity overrides .page-content-inner img { max-width:100% }. */
  .tools-card-media .tools-brand-photo { max-width: 220px; margin-left: auto; margin-right: auto; }
  .tm-grid { gap: 10px; }

  /* --- Filters page: machine-nav has negative margins on desktop, remove on mobile --- */
  .machine-nav {
    grid-template-columns: 1fr;
    margin-left: 0;
    margin-right: 0;
    gap: 12px;
  }

  /* Filter-models / filter-note: full text, slightly smaller on phone */
  .filter-models { font-size: 12px; line-height: 1.55; }
  .filter-note { font-size: 12px; line-height: 1.45; }

  /* --- Tubes page: types-grid and spec-row are wide on desktop --- */
  .types-grid, .spec-row, .moly-values, .moly-section {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* --- Wide tables: horizontal scroll inside --- */
  .parts-guide-table,
  .page-content-inner table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }

  /* --- Catch-all: any image inside page-content shouldn't overflow --- */
  .page-content-inner img { max-width: 100%; height: auto; }

  /* --- KSPARK page: hero is GRID 220px+1fr, override to 1 column --- */
  .kspark-hero {
    grid-template-columns: 1fr;
    padding: 14px 14px;
    gap: 14px;
  }
  .kspark-hero-img { max-width: 220px; margin: 0 auto; }
  .kspark-badges { gap: 6px; }
  .kspark-badge { font-size: 11px; padding: 4px 10px; }

  /* --- Molybdenum High-Speed: hero + values + related cards --- */
  .moly-hero { display: block; }
  .moly-values { grid-template-columns: 1fr; gap: 8px; }
  .moly-related { grid-template-columns: 1fr; gap: 10px; }
  .moly-related .prod-card { padding: 10px; gap: 10px; }

  /* --- Tungsten: spec tables wrapped in horizontal scroll --- */
  .tw-table-block {
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }
  .tw-table { min-width: 480px; }

  /* --- Tubes: top section (classes are .hero-block/.hero-img/.hero-body) --- */
  .hero-block {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
  .hero-img { width: 100%; max-width: 180px; margin: 0 auto; align-self: center; }
  .hero-img img { width: 100%; max-width: 180px; }
  .types-title { font-size: 16px; }
  .types-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .type-card { padding: 10px; }
  .type-letter { font-size: 22px; }
  .spec-row { gap: 6px; }
  .spec-pill { font-size: 12px; padding: 6px 10px; }
  .dia-val-grid { grid-template-columns: repeat(4, 1fr); font-size: 12px; }

  /* --- Filters: brand grid 1 col on phone (override desktop nth-child rules). --- */
  .machine-nav { grid-template-columns: 1fr; margin: 0 0 24px; }
  .machine-brands,
  .machine-nav > :nth-child(1) .machine-brands,
  .machine-nav > :nth-child(2) .machine-brands,
  .machine-nav > :nth-child(3) .machine-brands { grid-template-columns: 1fr; gap: 6px; }
  .brand-btn { font-size: 12px; padding: 6px 10px; white-space: normal; }

  /* --- Fluide cards: float image left so text wraps under it. --- */
  .fl-cards { grid-template-columns: 1fr; }
  .fl-card {
    display: block;
    padding: 14px;
  }
  .fl-card-img,
  .fl-card-img.fl-card-img-lg {
    float: left;
    width: 90px;
    max-width: 90px;
    margin: 0 12px 6px 0;
  }
  .fl-card-img img {
    max-width: 100%;
    width: 100%;
    height: auto;
  }
  .fl-card-body { font-size: 14px; min-width: 0; }
  .fl-card-body::after { content: ''; display: block; clear: both; }
  .fl-card > .fl-docs { clear: both; padding-top: 10px; }
  .fl-name { font-size: 16px; }
  .fl-pack { font-size: 12px; }
  .fl-desc { font-size: 14px; line-height: 1.55; }

  /* DIK-206 / fl-desc feature list — bullet rows with subtle separators */
  .fl-feats {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    font-size: 14px;
    color: #555;
    line-height: 1.45;
  }
  .fl-feats > li {
    padding: 8px 0 8px 18px;
    border-top: 1px solid #f0f0f0;
    position: relative;
  }
  .fl-feats > li:first-child { border-top: none; }
  .fl-feats > li::before {
    content: '\2022';
    position: absolute;
    left: 4px; top: 8px;
    color: #FFD700;
    font-weight: 700;
  }

  /* --- KSPARK type-head: plates above title on narrow phone. --- */
  .kspark-type-head {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 6px;
  }
  .kspark-type-tags { margin-left: 0; }

  /* --- Tungsten tables → cards on mobile (data labels via nth-child) --- */
  .tw-tables { grid-template-columns: 1fr; gap: 16px; }
  .tw-table-block { overflow-x: visible; }
  .tw-table, .tw-table thead, .tw-table tbody, .tw-table tr,
  .tw-table th, .tw-table td { display: block; min-width: 0; }
  .tw-table thead { display: none; }
  .tw-table tr {
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 8px;
    background: #fff;
  }
  .tw-table td {
    padding: 4px 0;
    border: none;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
    text-align: right;
  }
  .tw-table td:first-child {
    font-size: 14px;
    text-align: left;
    padding-bottom: 6px;
    margin-bottom: 6px;
    border-bottom: 1px solid #f0f0f0;
    display: block;
  }
  .tw-table td:nth-child(2)::before { content: 'Диаметр'; color: #777; font-weight: 500; text-align: left; }
  .tw-table td:nth-child(3)::before { content: 'Прочность'; color: #777; font-weight: 500; text-align: left; }
  .tw-table td:nth-child(4)::before { content: 'Катушка'; color: #777; font-weight: 500; text-align: left; }

  /* --- Parts: stack table under images (no horizontal scroll, full mobile width). --- */
  .parts-photos {
    gap: 6px;
    justify-content: center;
  }
  .parts-photos img {
    width: 90px;
    height: 90px;
  }
  .parts-cat-main { font-size: 14px; padding: 10px 16px; }
  .parts-cat-brand { font-size: 14px; padding: 8px 12px; }
  /* Guide block: stack imgs above, table below */
  .parts-guide-block {
    flex-direction: column;
    gap: 14px;
    padding: 14px;
  }
  .parts-guide-imgs {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }
  .parts-guide-imgs > * { flex: 0 0 auto; }
  .parts-guide-body { width: 100%; }
  .parts-guide-table th,
  .parts-guide-table td {
    font-size: 12px;
    padding: 6px 6px;
    white-space: normal;
  }
  .parts-guide-table { table-layout: auto; }

  /* --- Footer: stacked --- */
  .site-footer-inner {
    flex-direction: column;       /* IE11 fallback */
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 28px 16px 18px;
  }
  .site-footer-inner > * { padding-right: 0; }
  .site-footer-inner > div:last-child { justify-self: start; }
  .footer-cities {
    flex-direction: column;       /* IE11 fallback */
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .footer-cities > * { padding-right: 0; }
  .site-footer-bottom { padding: 12px 16px; }
}

/* Narrow phone (≤640): use short tagline. */
@media (max-width: 640px) {
  .tagline-long { display: none; }
  .tagline-short { display: inline; }
}

/* --- Landscape phone / small tablet (641-932px) --- */
@media (min-width: 641px) and (max-width: 932px) {
  /* Landscape card ~600px wide: 280px brand-photo = natural 3R width. */
  .tools-card-media .tools-brand-photo { max-width: 280px; }

  /* Header: min-height = 88 sotas + 2 border + 6+6 gap. */
  .header-inner {
    justify-content: space-between;
    min-height: 102px;
    padding: 0 60px 0 40px;
  }
  .header-sotas { width: 60px; height: 88px; }
  /* Pattern aligned with sotas top (6+6+1 = 13). */
  .site-header::before { background-size: 60px 88px; background-position: 40px 13px; }
  .header-brand-logo { max-width: 190px; width: 190px; }
  .header-brand-tagline { display: block; font-size: 11px; line-height: 1.3; }
  .header-info {
    display: block;
    position: static;           /* override desktop fallback so flex space-between layout works */
    top: auto; right: auto; margin-top: 0;
  }
  .header-emails { font-size: 11px; line-height: 1.5; }

  /* Contact strip: show all 3 cities in a row, smaller */
  .contact-strip-inner {
    justify-content: center;
    gap: 0 28px;
    flex-wrap: wrap;
    font-size: 11px;
    padding: 4px 10px;
  }
  .contact-strip-inner > div + div { display: block; }

  /* Drawer: 2 rows sliding down from top, full width 6-col grid. */
  .site-nav {
    top: 0; right: 0; bottom: auto; left: 0;
    width: 100%;
    height: auto;
    transform: translateY(-100%);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  }
  body.nav-open .site-nav { transform: translateY(0); }
  .site-nav-inner {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 44px;
    gap: 4px 8px;
    padding: 52px 60px 16px 24px;
    align-content: flex-start;
  }
  .site-nav .nav-home,
  .site-nav-inner > a {
    padding: 10px 10px;
    min-height: 44px;
    border-bottom: 1px solid #eee;
    border-right: none;
    font-size: 14px;
    box-sizing: border-box;
    display: flex; align-items: center;
  }
  .nav-right {
    display: contents;
  }
  .nav-right > a {
    padding: 10px 10px;
    min-height: 44px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
    box-sizing: border-box;
    display: flex; align-items: center;
  }
  .nav-close {
    top: 12px;
    right: 16px;
  }

  /* Footer landscape: 3 колонки (компания+iso / города / email). */
  .site-footer-inner {
    display: grid;
    grid-template-columns: 1fr 1.4fr 1fr;
    gap: 14px 20px;
    padding: 20px 20px;
  }
  .footer-cities { grid-template-columns: repeat(3, 1fr); gap: 0 12px; }
  .footer-phone { font-size: 13px; }
  /* Скрываем длинный текст, ::before показывает короткую версию (DOM сохранён для SEO). */
  .footer-iso { font-size: 0; margin: 8px 0 0; }
  .footer-iso::before {
    content: 'СМК — ГОСТ Р ИСО 9001-2015';
    font-size: 11px;
    line-height: 1.4;
    display: block;
  }
  .footer-iso br { display: none; }
  /* Компактные margin'ы */
  .footer-company-name { margin: 0 0 4px; }
  .footer-company-desc { margin: 0 0 6px; }
  .footer-col-title { margin: 0 0 8px; }

  /* Hero & page content: compact paddings/typo to match desktop proportions */
  .hero-inner { padding: 22px 24px 16px; }
  .hero h1, .page-h1 { font-size: 20px; }
  .hero-subtypes { font-size: 14px; margin: 8px 0 0; }

  /* Page content: balanced — has breathing room, but doesn't feel zoomed */
  .page-content-inner { padding: 22px 32px 32px; max-width: 860px; margin: 0 auto; }
  .back-btn { font-size: 12px; padding: 6px 12px; margin-bottom: 12px; }

  /* Product cards: 2 columns on landscape */
  .prod-cards { padding: 12px; gap: 8px; }
  .prod-section-title { padding: 12px 16px 10px; }

  /* Product hero on landscape: restore row layout (image left, body right). */
  .bdra-hero, .tw-hero, .resin-hero, .moly-hero, .kspark-hero, .aux-hero {
    flex-direction: row;
    display: flex;
    align-items: flex-start;
    gap: 24px;
  }
  .bdra-hero-left, .bdra-hero-photo,
  .tw-hero-img, .resin-hero-img, .moly-hero-img,
  .kspark-hero-img, .aux-hero-img, .hero-img {
    width: 180px;
    max-width: 180px;
    margin: 0;
    align-self: flex-start;
    flex: 0 0 180px;
  }
  /* Tubes uses generic .hero-block / .hero-img */
  .hero-block { flex-direction: row; align-items: flex-start; gap: 20px; }
  /* KSPARK is grid 220px+1fr — keep, restore from mobile 1fr override */
  .kspark-hero {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 22px;
    padding: 18px 20px;
  }
  .kspark-hero-img { width: 100%; max-width: none; flex: none; }

  /* KSPARK type-head: tags BACK on the right (like desktop) — phone uses column-reverse */
  .kspark-type-head {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .kspark-type-tags { margin-left: auto; }

  /* Fluide cards on landscape: keep float layout, slightly larger image */
  .fl-card { padding: 18px; }
  .fl-card-img { width: 120px; max-width: 120px; margin: 0 16px 8px 0; }
  .fl-card-img.fl-card-img-lg { width: 140px; max-width: 140px; margin: 0 18px 8px 0; }

  /* Restore tables (mobile turned them into stacked cards) — they fit fine on landscape */
  .tw-table, .tw-table thead, .tw-table tbody, .tw-table tr,
  .tw-table th, .tw-table td {
    display: revert;
  }
  .tw-table { display: table; }
  .tw-table thead { display: table-header-group; }
  .tw-table tbody { display: table-row-group; }
  .tw-table tr { display: table-row; background: transparent; border: none; padding: 0; margin: 0; }
  .tw-table th, .tw-table td {
    display: table-cell;
    border-bottom: 1px solid #f0f0f0;
    padding: 6px 10px;
    text-align: left;
    font-size: 14px;
    margin: 0;
  }
  .tw-table td:first-child { font-size: 14px; border-bottom: 1px solid #f0f0f0; }
  .tw-table td:nth-child(2)::before,
  .tw-table td:nth-child(3)::before,
  .tw-table td:nth-child(4)::before { content: none; }
  /* Restore 2-col table grid on landscape */
  .tw-tables { grid-template-columns: 1fr 1fr; gap: 20px; }
  /* Other product-page grids: 2 columns where they fit */
  .moly-values { grid-template-columns: repeat(3, 1fr); }
  .moly-related { grid-template-columns: 1fr 1fr; }
  .types-grid { grid-template-columns: repeat(3, 1fr); }
  .fl-cards { grid-template-columns: 1fr 1fr; }
  .city-cards { grid-template-columns: 1fr 1fr; }
  .lib-books { grid-template-columns: 1fr 1fr; }
  .bdra-lines { grid-template-columns: 1fr 1fr; }
  .machine-brands { grid-template-columns: 1fr 1fr; }

  /* Tighter typography to match desktop proportions (avoid "zoomed" feel) */
  .page-h1, .hero h1 { font-size: 20px; }
  .tw-subtitle, .bdra-subtitle, .resin-subtitle, .moly-subtitle, .fl-subtitle { font-size: 14px; }
  .tw-table-title, .bdra-line-name, .filter-name { font-size: 14px; }
  .fl-name { font-size: 16px; }
  .fl-pack, .fl-desc, .fl-feats { font-size: 14px; }
  .prod-card-name { font-size: 14px; }
  .prod-section-title { font-size: 16px; }
  .tw-hero-body, .bdra-hero-body, .resin-hero-body, .moly-hero-body, .kspark-hero-body { font-size: 14px; }

  /* Filter-models: no clamp on landscape, full text in compact form */
  .filter-models {
    display: block;
    -webkit-line-clamp: none;
    overflow: visible;
    max-height: none;
    font-size: 14px;
  }
  .filter-models::after { display: none; }
}


/* --- Print: clean A4 output ---
   Hide chrome (nav, drawer, burger, scroll-to-top, Metrika),
   flatten backgrounds to save ink, expand URLs in links so the
   printed page is a self-contained reference. */
@media print {
  /* Reset background and ensure max contrast */
  html, body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11pt;
    line-height: 1.45;
  }
  /* Hide all interactive chrome */
  .nav-burger,
  .nav-close,
  .site-nav,
  .contact-strip,
  #to-top,
  .back-btn,
  noscript {
    display: none !important;
  }
  /* Compact header: keep logo + company line only */
  .site-header {
    box-shadow: none !important;
    border-bottom: 1px solid #000;
    padding: 0 0 6mm !important;
    margin-bottom: 8mm;
  }
  .site-header::before, .site-header::after { display: none !important; }
  .header-inner {
    display: flex !important;
    grid-template-columns: none !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding: 0 !important;
    min-height: 0 !important;
    gap: 12px;
  }
  .header-sotas { width: 36px !important; height: 48px !important; }
  .header-brand-logo { max-width: 160px !important; width: 160px !important; }
  .header-brand-tagline,
  .header-info { display: none !important; }
  /* Page content uses full width */
  .page-content-inner,
  .products,
  .hero-inner {
    padding: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  /* Headings: stay together with following content */
  h1, h2, h3, .page-h1, .prod-section-title,
  .tw-table-title, .resin-section-title,
  .bdra-section-title, .fl-section-title,
  .moly-section-title, .filter-group-title {
    page-break-after: avoid;
    break-after: avoid;
    color: #000 !important;
    border-bottom: 1.5pt solid #000 !important;
  }
  /* Tables / cards don't split mid-row */
  table, tr, .filter-card, .fl-card, .bdra-line,
  .resin-pack-block, .parts-guide-block {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  /* Flatten cards/backgrounds (saves ink) */
  .resin-hero, .resin-comp-box, .resin-pack-block,
  .fl-card, .filter-card, .bdra-line,
  .tools-card, .parts-guide-block,
  .city-card {
    background: #fff !important;
    border: 1pt solid #999 !important;
    box-shadow: none !important;
  }
  .resin-note, .filter-note, .resin-comp-head {
    background: #fff !important;
    border-left: 2pt solid #000 !important;
  }
  /* Tables: visible borders */
  table { border-collapse: collapse; }
  th, td { border-bottom: 0.5pt solid #999 !important; padding: 3pt 6pt !important; }
  thead tr { border-bottom: 1pt solid #000 !important; }
  /* Show URL after each absolute/internal link — reference info on paper.
     Skip for anchor (#hash), tel:, mailto: where label is enough. */
  a[href]:not([href^="#"]):not([href^="tel:"]):not([href^="mailto:"])::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #555;
    word-break: break-all;
  }
  /* Hide redundant PDF-badge pseudo on doc links — the URL itself already follows */
  .fl-doc::before, .resin-doc::before, .tw-doc::before,
  .bdra-doc::before, .moly-doc::before, .parts-doc::before,
  .filter-pdf::before {
    background: #000 !important;
    color: #fff !important;
  }
  /* Footer: compact one-liner */
  .site-footer {
    margin-top: 10mm;
    padding-top: 4mm;
    border-top: 1pt solid #000;
  }
  .site-footer-inner { padding: 0 !important; gap: 6mm !important; }
  .footer-iso, .site-footer-bottom { font-size: 9pt; }
  /* No yellow gradients on heading underlines — black instead */
  .prod-section-title::after,
  .resin-section-title,
  .tw-table-title,
  .moly-section-title { border-bottom-color: #000 !important; }
  /* Drop shadows everywhere */
  * { box-shadow: none !important; text-shadow: none !important; }
  /* Page margins via @page */
  @page { margin: 15mm 12mm; }
}