/* ===================== FONTS (Unbounded, self-hosted) ===================== */
@font-face {
  font-family: "Unbounded";
  src: url("../fonts/Unbounded/static/Unbounded-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Unbounded";
  src: url("../fonts/Unbounded/static/Unbounded-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Unbounded";
  src: url("../fonts/Unbounded/static/Unbounded-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Unbounded";
  src: url("../fonts/Unbounded/static/Unbounded-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Unbounded";
  src: url("../fonts/Unbounded/static/Unbounded-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Unbounded";
  src: url("../fonts/Unbounded/static/Unbounded-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Unbounded";
  src: url("../fonts/Unbounded/static/Unbounded-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ===================== ROOT / RESET ===================== */
:root {
  --green: #2E9F6B;
  --green-dark: #0A632D;
  --green-darker: #084d24;
  --cream: #F9F7EE;
  --ink: #12251b;
  --ink-soft: #4d5c53;
  --border: rgba(10, 99, 45, 0.12);
  --shadow: 0 20px 45px rgba(10, 60, 35, 0.10);
  --radius: 20px;
  --header-h: 84px;
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  /* the page only ever scrolls vertically — telling the browser that up front
     stops a stray sideways swipe from triggering edge-navigation or throwing
     the layout into a horizontally-scrolled state */
  touch-action: pan-y;
  overscroll-behavior-x: none;
}
body {
  margin: 0;
  font-family: "Unbounded", sans-serif;
  font-weight: 300;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  touch-action: pan-y;
  overscroll-behavior-x: none;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 { font-weight: 700; margin: 0; line-height: 1.15; }

.container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ===================== BUTTONS ===================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 12px 12px 24px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 400;
  white-space: nowrap;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.btn i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 13px;
  flex-shrink: 0;
  transition: transform .25s ease, background .25s ease;
}
.btn--primary {
  background: linear-gradient(135deg, var(--green) 0%, #22815a 100%);
  color: #fff;
  box-shadow: 0 8px 16px rgba(46, 159, 107, 0.22);
}
.btn--primary i { background: rgba(255,255,255,0.2); }
.btn--ghost {
  background: #fff;
  color: var(--ink);
  padding-left: 28px;
  border: 1.5px solid var(--border);
  box-shadow: 0 8px 20px rgba(10,60,35,.05);
}
.btn--ghost i { background: rgba(46,159,107,0.10); color: var(--green-dark); }
/* touch devices get a quick press-down instead of the hover lift below —
   :active releases the instant the finger lifts, so it can't get stuck the
   way a simulated :hover does on tap. */
.btn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover i { transform: translateX(3px); }
  .btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 22px rgba(46, 159, 107, 0.28); }
  .btn--primary:hover i { background: rgba(255,255,255,0.3); }
  .btn--ghost:hover { border-color: var(--green); color: var(--green-dark); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(10,60,35,.09); }
  .btn--ghost:hover i { background: rgba(46,159,107,0.18); }
}

/* ===================== REVEAL ANIMATION ===================== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ===================== HEADER ===================== */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  z-index: 100;
  background: rgba(249, 247, 238, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.header.is-scrolled {
  background: rgba(249, 247, 238, 0.92);
  border-bottom-color: var(--border);
  box-shadow: 0 8px 30px rgba(10,60,35,.06);
}
.header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
}
/* logo stays pinned left; everything from the nav onward is pushed to the
   right edge as one cluster instead of being spread evenly across the row
   (which used to leave the language switch stranded far from the menu it
   controls) — the auto margin claims the leftover space once, so nav and
   the language switch then sit at the row's normal 16px gap from each other. */
.nav { margin-left: auto; }
.header__logo { display: flex; align-items: center; gap: 9px; height: 40px; }
.header__logo-mark { height: 100%; width: auto; }
.header__logo-word { font-family: "Unbounded", sans-serif; font-weight: 700; font-size: 1.05rem; letter-spacing: .03em; color: var(--green); }

.nav__list {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 15px;
  border-radius: 100px;
  font-size: clamp(13.8px, calc(13.41px + 0.121vw), 14.5px);
  font-weight: 500;
  color: var(--ink);
  background: transparent;
  border: none;
  transition: background .2s ease, color .2s ease;
}
.nav__link.is-active { color: var(--green-dark); background: rgba(46,159,107,0.14); }
.nav__link:active { background: rgba(46,159,107,0.14); }
@media (hover: hover) and (pointer: fine) {
  .nav__link:hover { background: rgba(46,159,107,0.10); color: var(--green-dark); }
}
.nav__link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(46,159,107,0.25);
}
.nav__more-btn { padding: 10px 18px; }
.nav__item--more { position: relative; }
.nav__chevron { transition: transform .25s ease; }
.nav__item--more.is-open .nav__chevron { transform: rotate(180deg); }

.nav__dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
}
.nav__item--more.is-open .nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav__dropdown-note {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-soft);
  text-align: center;
}
.nav__dropdown-link {
  display: block;
  padding: 11px 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  text-align: left;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}
.nav__dropdown-link.is-active { background: rgba(46,159,107,0.12); color: var(--green-dark); }
.nav__dropdown-link:active { background: rgba(46,159,107,0.14); color: var(--green-dark); }
@media (hover: hover) and (pointer: fine) {
  .nav__dropdown-link:hover { background: rgba(46,159,107,0.10); color: var(--green-dark); }
}

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: rgba(46,159,107,0.10);
  border-radius: 100px;
  padding: 3px;
  flex-shrink: 0;
}
.lang-switch__opt {
  border: none;
  background: transparent;
  padding: 6px 12px;
  border-radius: 100px;
  font-family: "Unbounded", sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink-soft);
  transition: background .2s ease, color .2s ease;
}
.lang-switch__opt.is-active {
  background: #fff;
  color: var(--green-dark);
  box-shadow: 0 2px 6px rgba(10,60,35,.08);
}

.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  padding: 0;
}
.burger span {
  width: 22px;
  height: 2px;
  background: var(--ink);
  margin: 0 auto;
  transition: transform .3s ease, opacity .3s ease;
}
.burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===================== HERO ===================== */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  padding-top: var(--header-h);
  overflow: hidden;
  background: linear-gradient(180deg, #fdfcf7 0%, var(--cream) 60%);
}
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(55% 45% at 88% 10%, rgba(46,159,107,0.16), transparent 70%),
    radial-gradient(45% 40% at 8% 95%, rgba(46,159,107,0.10), transparent 70%);
}
.hero__dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(10,99,45,0.16) 1.4px, transparent 1.5px);
  background-size: 25px 25px;
  -webkit-mask-image: radial-gradient(52% 60% at 80% 32%, #000 0%, transparent 72%);
  mask-image: radial-gradient(52% 60% at 80% 32%, #000 0%, transparent 72%);
}
@media (max-width: 900px) {
  .hero__dots { -webkit-mask-image: radial-gradient(60% 40% at 50% 22%, #000 0%, transparent 75%); mask-image: radial-gradient(60% 40% at 50% 22%, #000 0%, transparent 75%); }
}
.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 40px;
  align-items: center;
  text-align: left;
  padding-top: 72px;
  padding-bottom: 80px;
}

.hero__content { max-width: 560px; }

.hero__title {
  font-size: clamp(1.92rem, calc(.883rem + 5.186vw), 3.8rem);
  font-weight: 800;
  color: var(--green-dark);
  margin-bottom: 18px;
  text-wrap: balance;
}
.hero__subtitle {
  font-family: "Unbounded", sans-serif;
  font-weight: 300;
  font-size: clamp(.85rem, calc(.778rem + 0.359vw), .98rem);
  color: var(--ink-soft);
  max-width: 440px;
  line-height: 1.6;
  margin-bottom: 34px;
}

.hero__facts { display: flex; flex-direction: column; gap: 16px; margin: 0 0 36px; }
.hero__fact { display: flex; align-items: center; gap: 14px; }
.hero__fact-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(46,159,107,0.10);
  color: var(--green-dark);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hero__fact-icon i { display: block; line-height: 1; }
/* the hero content block is centered as a whole on narrow screens, but that
   centering inherits into this text — when it wraps to a second line, each
   line gets centered independently and drifts sideways instead of staying
   flush with the first line, so pin it back to the left explicitly */
.hero__fact-text { font-size: clamp(.86rem, calc(.783rem + 0.386vw), 1rem); font-weight: 500; color: var(--ink); line-height: 1.3; text-align: left; }

.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 0; }

.hero__mark {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero__mark-img {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 380px;
  filter: drop-shadow(0 30px 55px rgba(10,60,35,.22));
  animation: heroMarkFloat 6s ease-in-out infinite;
}
.hero__mark-glow {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(46,159,107,0.30), transparent 72%);
  filter: blur(38px);
  z-index: 0;
}
@keyframes heroMarkFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-16px) rotate(1.2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__mark-img { animation: none; }
}

/* ===================== СОГЛАСИЕ НА ОБРАБОТКУ ДАННЫХ (формы) ===================== */
.consent { display: flex; align-items: flex-start; gap: 10px; margin: 2px 0; font-size: .76rem; line-height: 1.5; font-weight: 400; color: var(--ink-soft); cursor: pointer; text-align: left; }
.consent input { appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0; border: 1.5px solid rgba(10,99,45,.4); border-radius: 6px; background: #fff; cursor: pointer; transition: background .2s, border-color .2s, box-shadow .2s; }
.consent input:checked { background: var(--green-dark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M1 5.2l3.2 3.2L11 1.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center; border-color: var(--green-dark); }
.consent input:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(46,159,107,.35); }
.consent.is-bad input { border-color: #d84a3a; box-shadow: 0 0 0 3px rgba(216,74,58,.14); }
.consent a { color: var(--green-dark); text-decoration: underline; text-underline-offset: 2px; }

/* ===================== SECTION SHARED ===================== */
.section { padding: 110px 0; }
.section__head { max-width: 640px; margin: 0 auto 56px; text-align: center; }
.section__eyebrow {
  display: inline-block;
  font-size: clamp(11px, calc(9.9px + 0.345vw), 13px);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--green-dark);
  margin-bottom: 14px;
}
.section__title { font-size: clamp(1.26rem, calc(.631rem + 3.145vw), 2.4rem); font-weight: 700; color: var(--ink); }
.section__text { margin-top: 16px; font-weight: 300; color: var(--ink-soft); line-height: 1.6; font-size: clamp(.86rem, calc(.783rem + 0.386vw), 1rem); }

/* ===================== ADVANTAGES ===================== */
.advantages { position: relative; background: #fff; overflow: hidden; }
.advantages__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(46% 70% at 12% 8%, rgba(46,159,107,0.07), transparent 70%),
    radial-gradient(40% 60% at 92% 95%, rgba(46,159,107,0.06), transparent 70%);
}
.advantages__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1040px;
  margin: 0 auto;
}
.advantage {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 18px;
  padding: 30px 22px;
  border-radius: 24px;
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: 0 12px 28px rgba(10,60,35,.06);
  color: inherit;
  font-family: inherit;
  cursor: pointer;
  transition: transform .3s ease, box-shadow .3s ease, background .3s ease, color .3s ease, border-color .3s ease;
}
/* only devices with a real mouse get the hover flip — on touch, :hover sticks
   after a tap (until the next tap elsewhere), which looked broken once the
   modal was already open over it */
@media (hover: hover) and (pointer: fine) {
  .advantage:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow);
    background: var(--green-dark);
    color: #fff;
    border-color: transparent;
  }
  .advantage:hover .advantage__icon { background: rgba(255,255,255,0.18); color: #fff; }
  .advantage:hover .advantage__arrow { opacity: 1; transform: translateY(0); }
}
/* touch feedback: a quick press-down that always resolves on release, so it
   can't get stuck the way a simulated :hover does */
.advantage:active {
  transform: scale(.97);
  background: var(--green-dark);
  color: #fff;
  border-color: transparent;
}
.advantage:active .advantage__icon { background: rgba(255,255,255,0.18); color: #fff; }
.advantage:active .advantage__arrow { opacity: 1; transform: translateY(0); }
.advantage__icon {
  width: 72px; height: 72px;
  border-radius: 22px;
  background: linear-gradient(150deg, rgba(46,159,107,0.18), rgba(46,159,107,0.06));
  color: var(--green-dark);
  font-size: 28px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .3s ease, color .3s ease;
}
.advantage__title { font-size: clamp(.9rem, calc(.817rem + 0.414vw), 1.05rem); font-weight: 700; margin: 0; line-height: 1.3; }
.advantage__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .25s ease, transform .25s ease;
}

/* ===================== INFO MODAL ===================== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  visibility: hidden;
  opacity: 0;
  transition: opacity .25s ease, visibility .25s ease;
}
.modal.is-open { visibility: visible; opacity: 1; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(10,37,27,0.55); backdrop-filter: blur(2px); }
.modal__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(10,37,27,.3);
  transform: translateY(16px) scale(.97);
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.modal.is-open .modal__panel { transform: translateY(0) scale(1); }
.modal__media {
  position: relative;
  width: 100%;
  height: 374px;
  flex-shrink: 0;
  background: var(--cream);
}
.modal__media[hidden] { display: none; }
.modal__image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 23%; opacity: 0; transition: opacity .35s ease; }
.modal__image.is-loaded { opacity: 1; }
.modal__close {
  position: absolute;
  top: 16px; right: 16px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(6px);
  border: none;
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(10,37,27,.14);
  transition: background .2s ease, color .2s ease;
}
.modal__close:active { background: #fff; color: var(--green-dark); }
.modal__body { padding: 26px 32px 32px; overflow-y: auto; }
.modal__title { font-size: clamp(1.14rem, calc(1.052rem + 0.441vw), 1.3rem); font-weight: 700; margin: 0 0 12px; color: var(--green-dark); }
.modal__text { font-size: clamp(.87rem, calc(.826rem + 0.221vw), .95rem); font-weight: 300; color: var(--ink-soft); line-height: 1.6; margin: 0; text-align: justify; text-justify: inter-word; hyphens: none; }
.modal__links { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 20px; }
.modal__links[hidden] { display: none; }
.modal__link { display: inline-flex; align-items: center; gap: 8px; color: var(--green-dark); font-weight: 600; font-size: 14px; }
.modal__link i { display: flex; align-items: center; justify-content: center; font-size: 12px; transition: transform .25s ease; }
.modal__link:active i { transform: translateX(3px); }
@media (hover: hover) and (pointer: fine) {
  .modal__close:hover { background: #fff; color: var(--green-dark); }
  .modal__link:hover { text-decoration: underline; }
  .modal__link:hover i { transform: translateX(3px); }
}
.modal__link[hidden] { display: none; }
body.no-scroll { overflow: hidden; position: fixed; left: 0; right: 0; }

/* ===================== SHOPS ===================== */
.shops { position: relative; overflow: hidden; }
.shops::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(38% 55% at 90% 4%, rgba(46,159,107,0.08), transparent 70%),
    radial-gradient(34% 50% at 2% 92%, rgba(46,159,107,0.06), transparent 70%);
  pointer-events: none;
}
.shops__layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 72px;
  align-items: center;
}
.shops__card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 28px;
  box-shadow: 0 16px 40px rgba(10,60,35,.06);
}
.shops__intro { padding: 44px 44px 60px; }
.shops__map-card {
  display: flex;
  align-items: center;
  justify-content: center;
}
.shops__map-card .shops__map { width: 100%; max-width: 460px; }

.shops__tabs { display: flex; gap: 8px; margin: 28px 0 20px; }
.shops__tab {
  background: #fff;
  border: 1px solid var(--border);
  color: var(--ink);
  font-family: "Unbounded", sans-serif;
  font-size: clamp(12.3px, calc(11.64px + 0.207vw), 13.5px);
  font-weight: 500;
  padding: 10px 18px;
  border-radius: 100px;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.shops__tab span { color: inherit; opacity: .6; margin-left: 4px; }
.shops__tab.is-active { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }

.shops__list { display: flex; flex-direction: column; }
.shops__list[hidden] { display: none; }
.shops__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--border);
  border-radius: 12px;
  color: inherit;
  transition: background .2s ease, padding-left .2s ease, padding-right .2s ease;
}
.shops__row-address { font-size: clamp(.79rem, calc(.718rem + 0.359vw), .92rem); font-weight: 500; color: var(--ink); margin: 0; line-height: 1.5; transition: color .2s ease; }
.shops__row-arrow {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(46,159,107,0.10);
  color: var(--green-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .shops__row:hover { background: rgba(46,159,107,0.06); padding-left: 12px; padding-right: 12px; }
  .shops__row:hover .shops__row-address { color: var(--green-dark); }
  .shops__row:hover .shops__row-arrow { background: var(--green-dark); color: #fff; transform: translateX(3px); }
}
.shops__row:active { background: rgba(46,159,107,0.1); }
.shops__row:active .shops__row-arrow { background: var(--green-dark); color: #fff; }

.shops__map {
  position: relative;
  width: 100%;
  color: rgba(46,159,107,0.16);
}
.shops__map-svg { width: 100%; height: auto; display: block; }
.shops__map-svg path { fill: currentColor; }
/* the pin's left/top% must always point at the DOT, not the dot+label block —
   centering the whole stack (dot + label) here means any future change to the
   label's size/spacing silently drags the dot off its real map coordinate */
.shops__pin { position: absolute; display: flex; flex-direction: column; align-items: center; transform: translateX(-50%); opacity: .4; transition: opacity .4s ease; }
.shops__pin.is-active { opacity: 1; }
.shops__pin-dot {
  position: relative;
  width: 12px; height: 12px;
  margin-top: -6px;
  border-radius: 50%;
  background: var(--green-dark);
  border: 2px solid #fff;
  box-shadow: 0 0 0 4px rgba(46,159,107,0.25);
  transform: scale(.8);
  transition: transform .45s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease;
}
.shops__pin.is-active .shops__pin-dot {
  transform: scale(1.15);
  box-shadow: 0 0 0 6px rgba(46,159,107,0.3);
}
.shops__pin-dot::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: var(--green-dark);
  opacity: 0;
}
.shops__pin.is-active .shops__pin-dot::after {
  opacity: .6;
  animation: pinPulse 2s ease-out infinite;
}
.shops__pin-label {
  margin-top: 12px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-soft);
  background: #fff;
  padding: 4px 10px;
  border-radius: 100px;
  box-shadow: var(--shadow);
  white-space: nowrap;
  transform: translateY(0);
  transition: color .35s ease, background .35s ease, transform .45s cubic-bezier(.34,1.56,.64,1);
}
.shops__pin.is-active .shops__pin-label {
  color: var(--green-dark);
  background: #fff;
  transform: translateY(2px);
}
@keyframes pinPulse {
  0% { transform: scale(1); opacity: .6; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* ===================== DELIVERY ===================== */
.delivery { position: relative; overflow: hidden; background: var(--cream); }
.delivery::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(42% 60% at 6% 15%, rgba(46,159,107,0.09), transparent 70%),
    radial-gradient(38% 55% at 96% 90%, rgba(46,159,107,0.07), transparent 70%);
  pointer-events: none;
}
.delivery__inner { position: relative; z-index: 1; }
.delivery__inner {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 60px;
  align-items: center;
}
.delivery__visual {
  position: relative;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.delivery__visual-img {
  width: 160px;
  height: auto;
}
.delivery__list { margin: 28px 0; display: flex; flex-direction: column; gap: 16px; }
.delivery__list li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  font-size: clamp(.86rem, 1vw, .95rem);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.5;
}
/* two variants of steps 2 and 3 — the full wording on desktop, a shorter
   one on phones — swapped by display, not content, so the KZ translation
   toggle still finds and updates whichever one is visible */
.delivery__step-short { display: none; }
.delivery__num {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(46,159,107,0.12);
  color: var(--green-dark);
  font-weight: 700;
  font-size: .85rem;
  display: flex; align-items: center; justify-content: center;
  /* the circle (32px) is taller than a single line of the list text (~23px) —
     flex-start would align its top edge with the text's top, but since it's
     taller than one line that leaves it looking sunk below the text's center.
     Centering it on the first line instead keeps single-line items looking
     centered while still reading close to "top-aligned" once text wraps. */
  margin-top: calc((clamp(.86rem, 1vw, .95rem) * 1.5 - 32px) / 2);
}
.delivery__stores { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--ink);
  color: #fff;
  padding: 11px 20px;
  border-radius: 14px;
  transition: transform .25s ease, background .25s ease;
}
.store-badge:active { transform: scale(.96); background: var(--green-dark); }
@media (hover: hover) and (pointer: fine) {
  .store-badge:hover { transform: translateY(-2px); background: var(--green-dark); }
}
.store-badge i { font-size: 24px; display: flex; align-items: center; justify-content: center; line-height: 1; }
.store-badge span { display: flex; flex-direction: column; font-size: .92rem; font-weight: 600; line-height: 1.2; }
.store-badge small { font-size: .68rem; font-weight: 400; opacity: .75; }

/* ===================== CATEGORIES ===================== */
.categories { position: relative; overflow: hidden; background: #fff; }
.categories::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(40% 55% at 92% 8%, rgba(46,159,107,0.07), transparent 70%),
    radial-gradient(36% 50% at 4% 96%, rgba(46,159,107,0.06), transparent 70%);
  pointer-events: none;
}
.categories .container { position: relative; z-index: 1; }
.categories__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 840px;
  margin: 0 auto;
  gap: 18px;
}
/* an orphan card alone in the last row (item count not divisible by 3)
   would otherwise sit stuck to the left edge with two empty slots next to
   it — bumping it into the middle column centers it instead. Only fires
   when there's exactly one leftover, which is the only case the 3-column
   grid can produce right now. */
.category:last-child:nth-child(3n+1) { grid-column: 2 / 3; }
.category {
  width: 100%;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  color: inherit;
  font-family: inherit;
  cursor: pointer;
  transition: transform .3s ease, box-shadow .3s ease, background .3s ease, color .3s ease;
}
.category__icon {
  width: 58px; height: 58px;
  border-radius: 16px;
  background: rgba(46,159,107,0.10);
  color: var(--green-dark);
  font-size: 26px;
  display: flex; align-items: center; justify-content: center;
  transition: background .3s ease, color .3s ease;
}
.category__title { font-size: clamp(.85rem, calc(.795rem + 0.276vw), .95rem); font-weight: 500; }
@media (hover: hover) and (pointer: fine) {
  .category:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow);
    background: var(--green-dark);
    color: #fff;
  }
  .category:hover .category__icon { background: rgba(255,255,255,0.16); color: #fff; }
}
.category:active {
  transform: scale(.97);
  background: var(--green-dark);
  color: #fff;
}
.category:active .category__icon { background: rgba(255,255,255,0.16); color: #fff; }

/* категории на главной: фото-карточки, 4 колонки × 3 ряда (на телефоне 2 × 6) — без пустых мест */
.icats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; max-width: 1000px; margin: 0 auto; }
.icat { position: relative; display: block; padding-top: 58px; overflow: hidden; border-radius: 22px; background: var(--tone, #fbf1da); color: var(--ink); transition: transform .3s ease, box-shadow .3s ease; }
.icat picture { position: relative; display: block; aspect-ratio: 1 / 1.14;   /* форма области фото близка к самому фото (3:4): предметы не срезаются, как бы ни менялась ширина карточки */ -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26%); mask-image: linear-gradient(to bottom, transparent 0, #000 26%); }   /* фото под названием, плавно проявляется — подпись не лежит на предметах */
.icat img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: 62% 100%; transition: transform .5s ease; }
.icat__t { position: absolute; z-index: 1; top: 15px; left: 16px; right: 12px; font-size: clamp(.95rem, calc(.9rem + .25vw), 1.1rem); font-weight: 500; line-height: 1.2; }
.icat:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .icat:hover { transform: translateY(-6px); box-shadow: var(--shadow); } .icat:hover img { transform: scale(1.05); } }
@media (max-width: 860px) { .icats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .icat { border-radius: 18px; } .icat__t { top: 12px; left: 13px; } }

/* ===================== FOOTER ===================== */
.footer {
  background: var(--green-darker);
  color: rgba(255,255,255,0.82);
  padding: 80px 0 0;
}
.footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.footer__logo { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.footer__logo-mark { height: 34px; width: auto; }
.footer__logo-word { font-family: "Unbounded", sans-serif; font-weight: 700; font-size: 1.15rem; letter-spacing: .02em; color: #fff; }
.footer__social { display: flex; margin-top: 4px; }
.footer__social .social:not(:last-child) { margin-right: 10px; }
.social {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 16px;
  transition: background .25s ease, transform .25s ease;
}
.social:active { background: var(--green); transform: scale(.92); }
.social__icon { width: 18px; height: 18px; object-fit: contain; display: block; }
.footer__heading { font-size: clamp(.76rem, calc(.727rem + 0.166vw), .82rem); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #fff; margin-bottom: 20px; }
.footer__list { display: flex; flex-direction: column; gap: 12px; }
.footer__list a, .footer__list li { font-size: clamp(.82rem, calc(.787rem + 0.166vw), .88rem); font-weight: 300; }
.footer__list a:active { color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .social:hover { background: var(--green); transform: translateY(-3px); }
  .footer__list a:hover { color: #fff; }
}
.footer__bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 26px;
  padding-bottom: 26px;
  font-size: .8rem;
  font-weight: 300;
  color: rgba(255,255,255,0.55);
}
.footer__cities { color: rgba(255,255,255,0.85); font-weight: 500; }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 1080px) {
  .footer__top { grid-template-columns: 1.2fr 1fr 1fr; }
}

@media (max-width: 900px) {
  .advantages__grid { grid-template-columns: repeat(2, 1fr); }
  .hero__inner { grid-template-columns: 1fr; text-align: center; padding-top: 56px; }
  .hero__content { max-width: 520px; margin: 0 auto; }
  .hero__subtitle { margin-left: auto; margin-right: auto; }
  .hero__facts { width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; }
  .hero__actions { justify-content: center; }
  .hero__mark { order: -1; margin-bottom: 8px; }
  .hero__mark-img { max-width: 220px; }

  .delivery__inner { grid-template-columns: 1fr; text-align: center; }
  .delivery__visual { max-width: 280px; gap: 14px; margin-bottom: 8px; }
  .delivery__visual-img { width: 130px; height: auto; }
  .delivery__list { text-align: left; }
  .delivery__stores { flex-wrap: nowrap; gap: 8px; }
  .store-badge { flex: 1 1 0; min-width: 0; gap: 8px; justify-content: center; padding: 13px 10px; }
  .store-badge i { font-size: 23px; }
  .store-badge span { font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
  .store-badge small { font-size: .68rem; font-weight: 500; }
  /* a bare 1fr track's implicit minimum is min-content, not 0 — a long
     enough word/run could still bubble up through the grid item and
     stretch this whole card past the viewport without it. */
  .shops__layout { grid-template-columns: 1fr; gap: 40px; padding-left: 0; padding-right: 0; }
  /* full-bleed on mobile — flush to both edges instead of floating in the
     container's usual gutter — buys the address column the extra ~48px
     that padding was taking, which is the actual fix for long addresses
     instead of truncating them. A little rounding survives on the top
     corners only (the ones that sit right under the map, in view without
     scrolling) so the card doesn't start on a hard, jarring square edge. */
  .shops__intro { min-width: 0; border-radius: 20px 20px 0 0; border-left: none; border-right: none; }
  .shops__map-card { max-width: 420px; margin: 0 auto; order: -1; }
  /* the section's own bottom padding used to leave a band of bare page
     background between the last address row and the footer, on top of
     the row's own padding — with the card now full-bleed that band reads
     as an unstyled gap rather than intentional breathing room. */
  .section.shops { padding-bottom: 0; }
  /* Навигация and Контакты pair up two-per-row same as desktop; the third
     nav column (A-STORE) would otherwise dangle alone with an empty gap
     beside it, so it spans the full row instead of getting its own
     half-empty one. */
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__col:last-child { grid-column: 1 / -1; }
}

/* the full desktop nav (5 pills) plus the logo and language switch simply
   don't fit next to each other below ~900px — logo and nav have no
   flex-shrink guard, so the flex row silently squashes the logo box
   narrower than its own "STORE" text, which then paints past its box and
   overlaps the nav. Collapsing to the burger menu earlier (960px instead
   of 720px) keeps every tablet width out of that dead zone entirely. */
@media (max-width: 960px) {
  /* the nav is taken out of flow below, so its margin-left:auto no longer
     does anything — the language switch picks up that job instead, so it
     (and the burger next to it) still sit pinned to the right edge. */
  .lang-switch { margin-left: auto; }
  .nav { position: fixed; top: var(--header-h); left: 0; right: 0; background: var(--cream);
    border-bottom: 1px solid var(--border); box-shadow: 0 12px 24px rgba(10,60,35,.08);
    transform: translateY(-8px); opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease; }
  .nav.is-open { opacity: 1; transform: translateY(0); visibility: visible; pointer-events: auto; }
  .nav__list { flex-direction: column; align-items: stretch; padding: 12px; gap: 4px; }
  .nav__link { width: 100%; justify-content: space-between; padding: 14px 16px; }
  .nav__item--more { width: 100%; }
  .nav__dropdown { position: static; margin-top: 4px; box-shadow: none; border: none; background: rgba(46,159,107,0.06); padding: 6px; }
  .burger { display: flex; }
}

/* the Усть-Каменогорск pin sits at 88% across the map, so a label centered
   on it can run past the map/viewport edge — but only somewhere in the
   middle of the responsive range, depending on exactly how wide the map
   itself renders at that breakpoint (which layout is active, container
   padding, etc), and only by a few px even then. A width breakpoint here
   can only ever guess at that — and a fixed correction large enough to be
   safe drags the label needlessly far from the dot on widths where it
   barely needed one. script.js measures the actual overflow on load/resize
   and nudges the label left by exactly that many px via an inline style,
   so it stays centered under the dot everywhere that's safe and only ever
   shifts as far as it truly has to. */

@media (max-width: 720px) {
  :root { --header-h: 68px; }

  .hero__inner { padding-top: 40px; padding-bottom: 56px; }
  .hero__mark-img { max-width: 168px; }

  .delivery__visual { max-width: 220px; gap: 10px; }
  .delivery__visual-img { width: 105px; height: auto; }
  .delivery__step-full { display: none; }
  .delivery__step-short { display: inline; }
  .hero__actions { flex-direction: column; align-items: center; width: 100%; gap: 16px; }
  .hero__actions .btn { width: 100%; justify-content: space-between; }

  .section { padding: 70px 0; }
  .advantages__grid { gap: 14px; }
  .advantage { padding: 16px 14px; gap: 10px; border-radius: 18px; }
  .advantage__icon { width: 64px; height: 64px; border-radius: 18px; font-size: 26px; }
  .categories__grid { grid-template-columns: repeat(2, 1fr); }
  /* the centering trick above is 3-column math — irrelevant on the 2-column
     mobile grid, where the row already fills out evenly */
  .category:last-child:nth-child(3n+1) { grid-column: auto; }
  .shops__intro { padding: 26px 22px; }
  .shops__tabs { flex-wrap: wrap; }
  /* on a phone every extra px matters for fitting the address on one line —
     a smaller arrow + tighter gap buys back room without losing the "tap
     here" affordance entirely */
  .shops__row { gap: 8px; padding: 14px 2px; }
  /* the forced line-break before "ТД «Валентина»..." only applies here —
     on desktop the same text has room to wrap naturally wherever it likes,
     same as before */
  .shops__row-address { min-width: 0; white-space: pre-line; }
  .shops__row-arrow { width: 24px; height: 24px; font-size: 11px; }
  /* mobile-only reorder of the Усть-Каменогорск list: "ул. Багдат
     Шаяхметов" (currently last in the markup) moves up to right after
     "пр. Каныша Сатпаева, 15Б" — flex order, not a markup change, so
     desktop keeps the original DOM sequence untouched. */
  .shops__list[data-city-panel="ukg"] .shops__row:nth-child(1) { order: 1; }
  .shops__list[data-city-panel="ukg"] .shops__row:nth-child(2) { order: 2; }
  .shops__list[data-city-panel="ukg"] .shops__row:nth-child(3) { order: 3; }
  .shops__list[data-city-panel="ukg"] .shops__row:nth-child(6) { order: 4; }
  .shops__list[data-city-panel="ukg"] .shops__row:nth-child(4) { order: 5; }
  .shops__list[data-city-panel="ukg"] .shops__row:nth-child(5) { order: 6; }
  .footer { padding-top: 56px; }
  .footer__top { grid-template-columns: 1fr 1fr; column-gap: 20px; row-gap: 32px; padding-bottom: 44px; }
  .footer__brand { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .footer__logo { margin-bottom: 0; }
  .footer__social { margin-top: 0; }

  .modal { padding: 14px; }
  .modal__body { padding: 22px 16px 26px; }
  /* whole words only, no hyphen breaks — so the column is widened as far as
     the padding allows to fit more words per line, which keeps justify's
     word-gaps small without needing to split any word. */
  .modal__text { hyphens: none; -webkit-hyphens: none; }
}

@media (max-width: 480px) {
  /* the logo word, language switch and burger measured with comfortable
     room to spare in testing here, and it still visually stuck together on
     a real phone anyway — real-device font metrics for the logo's webfont
     clearly run wider than this environment's renderer shows, so trimming
     sizes by a guessed amount keeps failing the same way. Dropping the
     "STORE" wordmark and keeping just the mark is the one change that
     can't lose the bet: it frees ~80px unconditionally, independent of how
     any particular device measures the remaining text. */
  .header__logo-word { display: none; }
  .lang-switch__opt { padding: 9px 11px; font-size: 11.3px; min-height: 34px; }
  .burger { width: 36px; height: 36px; }

  /* the store badges' generous mobile size (set at the 900px breakpoint)
     stops fitting "Google Play" on one line below ~480px — only this
     narrowest tier needs to fall back to the tighter size. */
  .delivery__stores { gap: 6px; }
  .store-badge { gap: 6px; padding: 12px 5px; }
  .store-badge i { font-size: 20px; }
  .store-badge span { font-size: .76rem; }
  .store-badge small { font-size: .62rem; }
}


/* подзаголовки секций: строки делятся поровну, «A-Store» не рвётся по дефису */
.section__text { text-wrap: balance; }

/* ===================== МЯГКИЕ ПЕРЕХОДЫ МЕЖДУ БЛОКАМИ ГЛАВНОЙ =====================
   Цвета фона соседних секций сходятся на стыке (кремовый и белый переливаются друг в друга),
   а декоративные свечения гаснут у верхнего и нижнего краёв, чтобы не обрываться линией. */
.advantages { background: linear-gradient(180deg, var(--cream) 0%, #fff 16%, #fff 84%, var(--cream) 100%); }
.categories { background: linear-gradient(180deg, #fff 0%, #fff 90%, var(--cream) 100%); }
.advantages__bg, .delivery::before, .categories::before, .shops::before {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
}
.hero__bg { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%); }
.footer { border-radius: 40px 40px 0 0; }
@media (max-width: 800px) { .footer { border-radius: 28px 28px 0 0; } }