/* Safety net: the vendor template positions several decorative elements (.use__prod,
   .use__item::after arrows, .promo__img) with position:absolute and can, on some
   window widths, sit a hair outside the container and force a horizontal scrollbar
   that clips text flush against the browser edge. This never adds visible cropping
   on its own — it only prevents that stray overflow from becoming visible/scrollable. */
html, body {
  overflow-x: hidden !important;
}

/* .use__prod (the product pack photo in the "Баланс, енергия..." / use-steps section)
   sits very close under the H2 title on wide screens — nudge it down for breathing room. */
.use__prod {
  margin-top: 36px !important;
}

/* The vendor template's .promo__title was built for a short 2-word headline ("DIAFLEX
   FORTE") at 70px in a fixed 250-310px box. The hero H1 now reads "DiaFlex Forte" (big,
   bold, uppercase — the brand) followed by a <small> tag carrying the per-market SEO
   keyword phrase (small, normal weight/case) — one H1 element, two visual sizes. The
   separate <h3 class="promo__subtitle"> under it was removed from the hero (its text
   is now inside the H1's <small>); the rule below still styles the one remaining
   .promo__subtitle instance in the page's closing CTA section. */
.promo__title {
  font-size: 34px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  width: 100% !important;
  max-width: 320px !important;
}
.promo__title small {
  display: block;
  font-size: 16px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: #5a5a5a;
  margin-top: 8px;
}
@media (min-width: 768px) {
  .promo__title {
    font-size: 44px !important;
    max-width: 100% !important;
  }
  .promo__title small {
    font-size: 19px !important;
  }
}
@media (min-width: 1025px) {
  .promo__title {
    font-size: 40px !important;
    max-width: 100% !important;
    padding-left: 0 !important;
  }
  .promo__title small {
    font-size: 18px !important;
  }
}
@media (min-width: 1220px) {
  .promo__title {
    font-size: 44px !important;
  }
  .promo__title small {
    font-size: 19px !important;
  }
}
.promo__subtitle {
  font-weight: 500 !important;
}
/* NOTE: .promo__description deliberately keeps the vendor template's own narrow
   max-width (373px at the widest breakpoint) here — the hero photo on the left is
   absolutely positioned and bleeds into this column's space by design, so widening
   this box (as an earlier revision did, to fit a long H1) makes the text overlap the
   photo. Only safe to widen this if the hero photo is removed or repositioned. */

/* Real product photo strip — the per-market inline sizing (~180-220px) rendered too small
   to see clearly on both mobile and desktop. Force a larger, consistent, sharp size. */
.real-photos {
  max-width: 1000px !important;
  gap: 20px !important;
}
.real-photos picture {
  display: block !important;
}
.real-photos img {
  width: 220px !important;
  max-width: 220px !important;
  height: 275px !important;
  object-fit: cover !important;
}
@media (min-width: 640px) {
  .real-photos img {
    width: 280px !important;
    max-width: 280px !important;
    height: 350px !important;
  }
}
@media (min-width: 1025px) {
  .real-photos img {
    width: 300px !important;
    max-width: 300px !important;
    height: 375px !important;
  }
}

/* Shared legal footer + GEO switcher — added on top of the vendor template, not part of it. */
.site-footer {
  background: #2b1210;
  color: #e9d6d3;
  padding: 32px 16px 24px;
  font-size: 13px;
  line-height: 1.6;
}
.site-footer__inner {
  max-width: 960px;
  margin: 0 auto;
}
.site-footer__disclaimer {
  color: #c9aeab;
  margin: 0 0 16px;
  font-size: 12px;
}
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-bottom: 14px;
}
.site-footer__links a {
  color: #f4c9c3;
  text-decoration: underline;
}
.site-footer__links a:hover {
  color: #fff;
}
.site-footer__geos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-bottom: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.site-footer__geos span:first-child {
  color: #c9aeab;
  margin-right: 4px;
}
.site-footer__geos a {
  color: #e9d6d3;
  text-decoration: none;
  padding: 3px 9px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
}
.site-footer__geos a:hover,
.site-footer__geos a.is-current {
  background: #e3331b;
  border-color: #e3331b;
  color: #fff;
}
.site-footer__copy {
  color: #9a807d;
  margin: 0;
  font-size: 12px;
}

/* Legal pages (privacy.html / terms.html) */
.legal-page {
  max-width: 820px;
  margin: 0 auto;
  padding: 40px 16px 60px;
  color: #2b2b2b;
  line-height: 1.65;
  font-family: Roboto, Arial, sans-serif;
}
.legal-page h1 {
  font-size: 28px;
  margin-bottom: 6px;
}
.legal-page .legal-updated {
  color: #777;
  font-size: 13px;
  margin-bottom: 28px;
}
.legal-page h2 {
  font-size: 19px;
  margin-top: 30px;
  color: #c52a15;
}
.legal-page a {
  color: #c52a15;
}
.legal-page__back {
  display: inline-block;
  margin-bottom: 24px;
  color: #c52a15;
  text-decoration: none;
  font-weight: 600;
}