/* ==========================================================================
   Dekohair — base layer
   Grid, typography, header/menu, product cards, forms, footer, popups.
   Values mirror the original Tilda build (TildaSans, 1200px grid, 12 columns).
   ========================================================================== */

:root {
  --t-text-font: 'TildaSans', Arial, sans-serif;
  --t-headline-font: 'TildaSans', Arial, sans-serif;

  --brand: #0275c9;
  --brand-dark: #0160a8;
  --brand-soft: #4a90e2;
  --ink: #000;
  --muted: #bdbdbd;
}

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

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

body {
  margin: 0;
  font-family: var(--t-text-font);
  font-weight: 400;
  color: var(--ink);
  background: #fff;
  line-height: 1.55;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

/* Same element reset the original build ships with (tilda-grid-3.0):
   block spacing comes from the block styles, never from UA defaults. */
div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, code, img, b, u, i,
center, table, tr, th, td, video {
  margin: 0;
  padding: 0;
  border: 0;
}

a { color: inherit; }

button { font-family: inherit; }

/* --------------------------------------------------------------- layout --- */

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Tilda's `t-col_8 t-prefix_2` resolves to a 760px column centred in the grid. */
.container--narrow {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}

.section { position: relative; }

.align-center { text-align: center; }

/* ----------------------------------------------------------- typography --- */

.h-title-lg { font-size: 64px; line-height: 1.23; font-weight: 600; margin: 0; }
.h-title-md { font-size: 52px; line-height: 1.23; font-weight: 600; margin: 0; }
.h-heading-lg { font-size: 32px; line-height: 1.17; font-weight: 600; margin: 0; }
.h-heading-sm { font-size: 28px; line-height: 1.17; font-weight: 600; margin: 0; }
.h-name-xl { font-size: 24px; line-height: 1.35; margin: 0; }
.h-name-md { font-size: 20px; line-height: 1.35; margin: 0; }
.h-name-xs { font-size: 16px; line-height: 1.35; margin: 0; }
.h-descr-xs { font-size: 16px; line-height: 1.55; margin: 0; }
.h-descr-md { font-size: 20px; line-height: 1.55; margin: 0; }
.h-text-md { font-size: 20px; line-height: 1.55; margin: 0; }

@media screen and (max-width: 1200px) {
  .h-title-lg { font-size: 60px; }
  .h-title-md { font-size: 48px; }
  .h-heading-lg { font-size: 30px; }
  .h-heading-sm { font-size: 26px; }
  .h-name-xl { font-size: 22px; }
  .h-name-md { font-size: 18px; }
  .h-name-xs { font-size: 14px; }
  .h-descr-xs { font-size: 14px; }
  .h-descr-md { font-size: 18px; }
  .h-text-md { font-size: 18px; }
}

@media screen and (max-width: 640px) {
  .h-title-lg { font-size: 30px; }
  .h-title-md { font-size: 30px; }
  .h-heading-lg { font-size: 26px; }
  .h-heading-sm { font-size: 24px; }
  .h-name-xl { font-size: 20px; }
  .h-name-md { font-size: 16px; }
  .h-name-xs { font-size: 12px; }
  .h-descr-xs { font-size: 12px; line-height: 1.45; }
  .h-descr-md { font-size: 16px; line-height: 1.45; }
  .h-text-md { font-size: 16px; line-height: 1.45; }
}

/* --------------------------------------------------------------- buttons --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--btn-h, 45px);
  border: none;
  border-radius: 5px;
  background: var(--brand);
  color: #fff;
  font-family: var(--t-headline-font);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color .2s ease-in-out, color .2s ease-in-out,
              border-color .2s ease-in-out, opacity .2s ease-in-out;
}

.btn:hover { background: var(--brand-dark); }

.btn--sm { --btn-h: 45px; font-size: 14px; padding: 0 30px; }
.btn--md { --btn-h: 60px; font-size: 16px; padding: 0 60px; border-radius: 29px; }
.btn--xl {
  --btn-h: 80px;
  font-size: 26px;
  padding: 0 80px;
  border-radius: 30px;
  background: transparent;
  border: 3px solid var(--brand);
  color: var(--brand);
}

.btn--xl:hover { background: var(--brand); color: #fff; }

@media screen and (max-width: 1200px) {
  .btn--md { padding: 0 45px; }
  .btn--xl { padding: 0 65px; }
  .btn--sm { padding: 0 25px; }
}

@media screen and (max-width: 640px) {
  .btn--md { padding: 0 30px; }
  .btn--xl { font-size: 22px; padding: 0 50px; }
  .btn--sm { --btn-h: 50px; padding: 0 20px; }
}

/* ---------------------------------------------------------------- header --- */

.hdr {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 900;
  width: 100%;
  background: transparent;
}

.hdr__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  padding: 0 20px;
}

/* Equal side wrappers keep the logo optically centred. */
.hdr__side {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 120px;
}

.hdr__side--right { justify-content: flex-end; }

.hdr__center {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
}

.hdr__logo { display: block; }

.hdr__logo img {
  display: block;
  width: 150px;
  max-width: 150px;
  height: auto;
}

.burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.burger span {
  display: block;
  width: 100%;
  height: 3px;
  border-radius: 1px;
  background: #000;
  transition: transform .3s ease, opacity .3s ease;
}

.hdr__phone {
  display: block;
  width: 30px;
  height: 30px;
}

.hdr__phone svg { display: block; width: 30px; height: 30px; }

.hdr__account {
  display: block;
  width: 28px;
  height: 28px;
  margin-right: 14px;
  color: #000;
  transition: color .2s;
}

.hdr__account svg { display: block; width: 28px; height: 28px; }
.hdr__account:hover,
.hdr__account.is-active { color: var(--brand); }

/* Promo-code feedback under the order-form field */
.form__promo-hint {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.4;
}
.form__promo-hint.is-ok { color: #2e9e44; }
.form__promo-hint.is-err { color: #d33; }
.form__promo-note { margin-top: 6px; font-size: 13px; line-height: 1.4; color: #777; }

/* ------------------------------------------------------ language switcher --- */

.hdr__lang {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--t-headline-font);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
}

.hdr__lang-link {
  color: #000;
  text-decoration: none;
  opacity: .45;
  transition: opacity .2s ease, color .2s ease;
}

.hdr__lang-link:hover { opacity: 1; color: var(--brand); }

.hdr__lang-link.is-active { opacity: 1; color: var(--brand); }

.hdr__lang-sep { color: #000; opacity: .3; }

@media screen and (max-width: 640px) {
  .hdr__side { flex-basis: 96px; gap: 6px; }
  .hdr__lang { font-size: 13px; }
}

/* ---------------------------------------------------- slide-in side menu --- */

.sidemenu {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  width: 300px;
  max-width: 85vw;
  height: 100%;
  padding: 90px 40px 40px;
  background: #fff;
  box-shadow: 0 0 40px rgba(0, 0, 0, .12);
  transform: translateX(-101%);
  transition: transform .35s ease;
  overflow-y: auto;
}

.sidemenu.is-open { transform: translateX(0); }

.sidemenu__close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.sidemenu__close::before,
.sidemenu__close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 28px;
  height: 2px;
  background: #000;
}

.sidemenu__close::before { transform: rotate(45deg); }
.sidemenu__close::after { transform: rotate(-45deg); }

.sidemenu__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidemenu__list li { margin-bottom: 18px; }

.sidemenu__link {
  font-family: var(--t-headline-font);
  font-size: 20px;
  line-height: 1.35;
  color: #000;
  text-decoration: none;
}

.sidemenu__link:hover { color: var(--brand); }

.sidemenu__extra { margin-top: auto; padding-top: 40px; }

/* The original block prints this phone number in white on the white sidebar —
   kept as-is so the panel matches the live site. */
.sidemenu__phone {
  display: block;
  margin-bottom: 20px;
  font-size: 20px;
  color: #fff;
  text-decoration: none;
}

.sidemenu__social { display: block; width: 30px; height: 30px; }
.sidemenu__social svg { display: block; width: 30px; height: 30px; }

.overlay {
  position: fixed;
  inset: 0;
  z-index: 990;
  background: rgba(0, 0, 0, .4);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
}

.overlay.is-open { opacity: 1; visibility: visible; }

/* ------------------------------------------------------------ hero banner --- */

/* The live site delivers this block as one flat image with the copy baked in.
   Here it is real markup, so it translates and scales like any other section.
   Colours sampled from the original artwork: brand #0072c8, cyan glow #41a9d1,
   badge bar #a9cce6, "121%" gradient #4abeda → #0157b4. */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  padding: 110px 0 70px;
  overflow: hidden;
  background:
    radial-gradient(70% 46% at 0% 108%, rgba(56, 165, 208, .95) 0%, rgba(65, 169, 209, .35) 42%, rgba(65, 169, 209, 0) 72%),
    linear-gradient(165deg, #f7f9fb 0%, #eef1f4 60%, #e8ecef 100%);
}

/* Flat designer banner. The section shows the per-language image and nothing
   else; if the file is missing, the inline onerror adds .hero--fallback and
   the markup version takes over. */
.hero__flat { display: block; width: 100%; }
.hero__flat img { display: block; width: 100%; height: auto; }

.hero:not(.hero--fallback) {
  min-height: 0;
  /* The fixed header is transparent, so the banner needs its own clearance. */
  padding: 80px 0 0;
  background: #f5f6f8;
}

.hero:not(.hero--fallback) .hero__inner { display: none; }
.hero--fallback .hero__flat { display: none; }

.hero__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.hero__copy { flex: 1 1 46%; min-width: 0; }

.hero__brand {
  font-family: var(--t-headline-font);
  font-size: clamp(38px, 5.4vw, 76px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.01em;
  color: #0072c8;
}

.hero__claim {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.4vw, 22px);
  margin-top: clamp(20px, 3vw, 46px);
}

.hero__claim-text {
  max-width: 7em;
  font-family: var(--t-headline-font);
  font-size: clamp(20px, 2.9vw, 42px);
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
  color: #0072c8;
}

.hero__pct {
  font-family: var(--t-headline-font);
  font-size: clamp(48px, 8vw, 116px);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.02em;
  background: linear-gradient(100deg, #4abeda 0%, #2a8ed0 45%, #0157b4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__offer {
  max-width: 12em;
  margin-top: clamp(22px, 3.4vw, 54px);
  font-family: var(--t-headline-font);
  font-size: clamp(15px, 1.85vw, 27px);
  font-weight: 500;
  line-height: 1.25;
  text-transform: uppercase;
  color: #2f86cf;
}

.hero__offer strong { font-weight: 800; color: #0072c8; }

.hero__btn {
  display: inline-block;
  margin-top: clamp(18px, 2.4vw, 34px);
  padding: clamp(10px, 1.1vw, 16px) clamp(22px, 2.4vw, 36px);
  border: 2px solid rgba(255, 255, 255, .9);
  border-radius: 14px;
  background: #0072c8;
  color: #fff;
  font-family: var(--t-headline-font);
  font-size: clamp(14px, 1.5vw, 24px);
  font-weight: 500;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color .2s ease, transform .2s ease;
}

.hero__btn:hover { background: var(--brand-dark); transform: translateY(-2px); }

.hero__visual {
  position: relative;
  flex: 1 1 54%;
  min-width: 0;
}

/* The product shot sits on a flat grey backdrop. Multiplying it into the page
   and feathering the edges hides the seam, so the bottles read as if they were
   photographed on the hero's own gradient. */
.hero__photo {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(66% 68% at 50% 50%, #000 48%, rgba(0, 0, 0, .8) 70%, transparent 92%);
  mask-image: radial-gradient(66% 68% at 50% 50%, #000 48%, rgba(0, 0, 0, .8) 70%, transparent 92%);
}

.hero__badge {
  position: absolute;
  top: 6%;
  left: 24%;
  z-index: 2;
  width: max-content;
  max-width: 76%;
  padding: clamp(3px, .5vw, 7px) clamp(10px, 1.4vw, 20px);
  background: rgba(169, 204, 230, .9);
  color: #0072c8;
  font-family: var(--t-headline-font);
  font-size: clamp(12px, 1.5vw, 24px);
  font-weight: 700;
  white-space: nowrap;
}

/* The two dots that top and tail the bar in the original artwork. */
.hero__badge::before,
.hero__badge::after {
  content: '';
  position: absolute;
  width: clamp(8px, 1.1vw, 17px);
  height: clamp(8px, 1.1vw, 17px);
  border-radius: 50%;
  background: #1f7fc8;
}

.hero__badge::before { top: -35%; left: -4%; }
.hero__badge::after { bottom: -35%; right: -4%; }

@media screen and (max-width: 960px) {
  .hero {
    min-height: 0;
    padding: 110px 0 50px;
  }

  .hero__inner {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }

  .hero__copy { flex: 0 0 auto; width: 100%; }

  .hero__brand { font-size: clamp(40px, 9vw, 64px); }

  .hero__claim { justify-content: center; gap: 10px; }

  .hero__claim-text { font-size: clamp(20px, 4.6vw, 34px); }

  .hero__pct { font-size: clamp(52px, 13vw, 96px); }

  .hero__offer {
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(15px, 3.2vw, 22px);
  }

  .hero__btn { font-size: clamp(14px, 2.8vw, 20px); padding: 12px 28px; }

  .hero__visual { flex: 0 0 auto; width: 100%; max-width: 460px; }

  .hero__badge {
    top: 2%;
    left: 6%;
    font-size: clamp(12px, 2.6vw, 18px);
  }

  .hero__badge::before,
  .hero__badge::after { width: 10px; height: 10px; }
}

/* ------------------------------------------------------------ blue strip --- */

.strip {
  padding: 8px 0 3px;
  background: var(--brand-soft);
  text-align: center;
}

.strip__title {
  margin: 0;
  font-family: var(--t-headline-font);
  font-size: 38px;
  line-height: 1.23;
  font-weight: 600;
  color: #fff;
}

@media screen and (max-width: 640px) {
  .strip__title { font-size: 24px; }
}

/* --------------------------------------------------------------- products --- */

.products { padding: 30px 0; }

/* The 20px column gutters live on the items, so the row bleeds into the
   container padding — that reproduces Tilda's 1200px/12-column geometry. */
.products__row {
  display: flex;
  flex-wrap: wrap;
  row-gap: 90px;
  margin: 0 -20px;
}

.product {
  flex: 0 0 calc(33.3333% - 40px);
  margin: 0 20px;
  text-align: center;
}

.product__link { display: block; text-decoration: none; color: inherit; }

.product__imgwrap {
  position: relative;
  width: 100%;
  margin-bottom: 20px;
  padding-bottom: 110%;
}

.product__img {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.product__markwrap {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  display: table;
}

.product__mark {
  display: table-cell;
  width: 50px;
  height: 50px;
  padding: 0 10px;
  border-radius: 50px;
  background: #ff4a4a;
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
}

.product__textwrap { margin-bottom: 19px; }

.product__title { font-weight: 700; }

.product__prices { margin-top: 12px; }

.product__price,
.product__price-old { display: inline-block; vertical-align: middle; }

.product__price { margin-right: 3px; }

.product__price-old {
  position: relative;
  color: var(--muted);
}

.product__price-old::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -1px;
  left: -1px;
  width: 100%;
  border-top: 1px solid;
}

@media screen and (max-width: 1200px) {
  .products__row { row-gap: 60px; }
}

@media screen and (max-width: 960px) {
  .products__row { margin: 0 -10px; }
  .product { flex-basis: calc(50% - 20px); margin: 0 10px; }
}

@media screen and (max-width: 640px) {
  .products__row { row-gap: 40px; margin: 0; }
  .product { flex-basis: 100%; margin: 0; }
}

/* ---------------------------------------------------- certificates (t668) --- */

.certs { padding: 15px 0; background: #eee; }

.cert {
  margin-bottom: 2px;
  background: #fff;
}

.cert__button {
  position: relative;
  display: block;
  width: 100%;
  padding: 25px 30px;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.cert__title {
  display: inline-block;
  padding-right: 30px;
  font-family: var(--t-headline-font);
  font-weight: 600;
}

.cert__icon {
  position: absolute;
  top: 50%;
  right: 18px;
  width: 24px;
  height: 24px;
  transform: translateY(-50%);
}

.cert__icon::before,
.cert__icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 24px;
  height: 1px;
  background: #222;
  transition: transform .3s ease, opacity .3s ease;
}

.cert__icon::after { transform: rotate(90deg); }

.cert.is-open .cert__icon::after { opacity: 0; }

.cert__content {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease;
}

.cert__text { padding: 0 30px 20px; }

@media screen and (max-width: 640px) {
  .cert__button { padding: 20px; }
  .cert__icon { right: 8px; }
  .cert__text { padding: 0 20px 20px; }
}

/* ------------------------------------------------------- icon cards (t490) --- */

.features { padding: 0; }

.features__row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -20px;
}

.feature {
  flex: 0 0 calc(25% - 40px);
  margin: 0 20px;
  text-align: center;
}

.feature__icon {
  width: 100px;
  height: 100px;
  max-width: 100%;
  margin: 0 auto 25px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.feature__title {
  margin: 18px 0 25px;
  font-family: var(--t-headline-font);
  font-weight: 600;
  line-height: 1;
}

.feature__descr { line-height: 1; }

@media screen and (max-width: 960px) {
  .features__row { margin: 0 -10px; }
  .feature { flex-basis: calc(50% - 20px); margin: 0 10px 40px; }
}

@media screen and (max-width: 640px) {
  .features__row { margin: 0; }
  .feature { flex-basis: 100%; margin: 0 0 40px; }
}

/* ------------------------------------------------------------ forms (t678) --- */

.order-form { padding: 105px 0; }

.form__group { margin-bottom: 25px; }

.form__label {
  display: block;
  font-size: 20px;
  font-weight: 300;
  line-height: 1.55;
  padding-bottom: 8px;
}

.form__sublabel {
  display: block;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.55;
  opacity: .7;
  padding-bottom: 8px;
}

.form__input {
  width: 100%;
  height: 60px;
  padding: 0 20px;
  border: 1px solid #000;
  border-radius: 0;
  background: #fff;
  color: #000;
  font-family: var(--t-text-font);
  font-size: 16px;
}

.form__input::placeholder { color: #000; opacity: .5; }

.form__input:focus { outline: 2px solid var(--brand); outline-offset: -2px; }

.radio-row { display: flex; flex-wrap: wrap; gap: 12px 30px; }

.radio {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  cursor: pointer;
}

.radio input { position: absolute; opacity: 0; width: 0; height: 0; }

.radio__mark {
  position: relative;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border: 1px solid #000;
  border-radius: 50%;
}

.radio input:checked + .radio__mark::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: #000;
}

.radio input:focus-visible + .radio__mark { outline: 2px solid var(--brand); outline-offset: 2px; }

.qty { display: flex; align-items: center; }

.qty__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border: 1px solid #000;
  background: #fff;
  cursor: pointer;
}

.qty__btn:first-child { border-right: none; }
.qty__btn:last-child { border-left: none; }

.qty input {
  width: 100%;
  height: 60px;
  border: 1px solid #000;
  border-radius: 0;
  background: #fff;
  color: #000;
  font-family: var(--t-text-font);
  font-size: 16px;
  text-align: center;
  -moz-appearance: textfield;
}

.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.form__errors {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  color: #d4503a;
  font-size: 16px;
}

.form__errors:empty { display: none; }

.form__success {
  padding: 20px 0;
  color: var(--brand);
  font-size: 20px;
  line-height: 1.55;
}

.form__submit { margin-top: 30px; }

.compound { padding: 15px 0 0; }

.compound__row { display: flex; justify-content: center; }

@media screen and (max-width: 640px) {
  .order-form { padding: 60px 0; }
  .form__label { font-size: 16px; }
  .btn--xl { width: 100%; }
}

/* ------------------------------------------------------------ cover (t716) --- */

.cover {
  position: relative;
  height: 110vh;
  min-height: 640px;
  overflow: hidden;
}

.cover__carrier {
  position: absolute;
  inset: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.cover__video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
}

.cover__filter {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, .3), rgba(0, 0, 0, .3));
}

.cover__wrapper {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 110vh;
  min-height: 640px;
  padding: 0 20px;
}

.cover__main { width: 100%; max-width: 960px; text-align: center; }

.cover__textwrap { margin-bottom: 44px; }

.cover__title { color: #fff; }

.cover__descr {
  margin-top: 24px;
  font-size: 20px;
  font-weight: 500;
  color: #fff;
}

.cover .form__label { color: #fff; }

.cover__form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 25px 20px;
}

.cover__form .form__group {
  flex: 1 1 200px;
  margin-bottom: 0;
  text-align: left;
}

.cover__form .form__input {
  height: 56px;
  border: none;
  border-radius: 3px;
}

.cover__form .form__submit { margin-top: 0; }

.cover__form .btn--md {
  --btn-h: 56px;
  padding: 0 40px;
  border-radius: 30px;
}

.cover__consent { flex: 1 1 100%; text-align: left; }

.cover__consent .consent__text,
.cover__consent .consent__text a { color: #fff; }

.cover__consent .consent__box { border-color: #fff; }

.cover .form__success { color: #fff; }

@media screen and (max-width: 960px) {
  .cover__form { flex-direction: column; align-items: stretch; }
  .cover__form .form__submit .btn { width: 100%; }
}

/* ------------------------------------------------------------ footer (t555) --- */

.footer { padding: 150px 0; }

.footer__row {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: stretch;
}

.footer__col--info { flex: 0 0 460px; max-width: 460px; display: flex; align-items: center; }
.footer__col--map { flex: 1 1 660px; min-width: 0; }

.footer__title { margin-bottom: 30px; }

.footer__text { line-height: 31px; }

.footer__text a { text-decoration: none; }

.footer__text a:hover { color: var(--brand); }

.footer__social { display: flex; gap: 8px; margin-top: 30px; }

.footer__social a { display: block; width: 30px; height: 30px; }
.footer__social svg { display: block; width: 30px; height: 30px; }

.footer__map {
  height: 400px;
  box-shadow: 0 0 20px rgba(0, 0, 0, .1);
  overflow: hidden;
}

.footer__map iframe { display: block; width: 100%; height: 100%; border: 0; }

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-top: 40px;
  font-size: 14px;
  color: #6b6b6b;
}

.footer__legal button {
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  font-size: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.footer__legal a { color: inherit; }

@media screen and (max-width: 960px) {
  .footer { padding: 80px 0; }
  .footer__col--info,
  .footer__col--map { flex: 1 1 100%; max-width: 100%; }
}

@media screen and (max-width: 640px) {
  .footer { padding: 50px 0; }
}

/* -------------------------------------------------------------- popup (t390) --- */

.popup {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: none;
  padding: 40px 20px;
  background: rgba(0, 0, 0, .8);
  overflow-y: auto;
}

.popup.is-open { display: block; }

.popup__container {
  position: relative;
  max-width: 560px;
  margin: 0 auto;
  padding: 40px;
  background: #fbfbf9;
}

.popup__container--wide { max-width: 800px; }

.popup__close {
  position: absolute;
  top: -34px;
  right: 0;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.popup__close::before,
.popup__close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 24px;
  height: 2px;
  background: #fff;
}

.popup__close::before { transform: rotate(45deg); }
.popup__close::after { transform: rotate(-45deg); }

.popup__title {
  margin: 0 0 20px;
  font-family: var(--t-headline-font);
  font-size: 32px;
  line-height: 1.17;
  font-weight: 600;
  text-align: center;
}

.popup__body { font-size: 16px; line-height: 1.55; }

.popup__body p { margin: 0 0 6px; }

@media screen and (max-width: 640px) {
  .popup__container { padding: 24px 18px; }
  .popup__title { font-size: 24px; }
}

/* ------------------------------------------- Romanian-specific corrections --- */

/* «ESTE RECOMANDAT DE MEDICI» is wider than the Russian original, and the
   section heading is set to `white-space: nowrap` below 480px — let it wrap
   instead of being clipped. */
@media screen and (max-width: 480px) {
  html[lang="ro"] .hp-acc__title,
  html[lang="ro"] .hp-acc__subtitle {
    white-space: normal;
    font-size: 21px;
  }
}

/* «CUMPĂRĂ 5 FLACOANE, PRIMEȘTE UNUL CADOU» needs one more line than the
   Russian copy — give the hero offer a little more room. */
html[lang="ro"] .hero__offer { max-width: 14em; }

/* «ESTE RECOMANDAT DE MEDICI TRIHOLOGI» needs ~960px at the block's 42px, but
   the section container is 800px. Rather than shrinking the type, let just this
   line break out of the container where the viewport has room to spare; below
   that it wraps normally. */
@media screen and (min-width: 1060px) {
  html[lang="ro"] .hp-acc__subtitle {
    margin-left: -110px;
    margin-right: -110px;
  }
}