/* ============================================================================
   gde-kupit.css — страницы «Где купить» Уролесан (аптеки 1876:2227 / онлайн 1876:2582).
   Поверх base.css + chrome.css. rem = px/16. Общий каркас двух страниц:
   заголовок · хлебные крошки · табы Аптеки/Онлайн · [карта | сетка] · форма «Задать вопрос».
   Координаты — из Figma REST (get node), baseline 1920. Сгенерировано ИИ 2026-07.
   ============================================================================ */

.gk { max-width: 120rem; margin-inline: auto; padding-inline: 5rem; padding-top: 11.4375rem; }

/* хлебные крошки (Главная • Где купить) */
.gk__crumbs {
  display: flex; align-items: center; justify-content: center; gap: 1.5rem;
  font-family: var(--wm-font); font-weight: 400; font-size: 0.875rem; color: var(--wm-ink);
}
.gk__crumbs a { color: inherit; text-decoration: none; opacity: 0.7; }
@media (hover: hover) { .gk__crumbs a:hover { opacity: 1; } }
.gk__crumbs .dot { width: 0.1875rem; height: 0.1875rem; border-radius: 50%; background: currentColor; opacity: 0.5; }

/* заголовок «где купить» */
.wm .gk__title {   /* .wm-префикс: перебить сброс base.css `.wm h1{margin:0}` (класс #27, иначе margin мёртв) */
  margin: 3.75rem 0 0; text-align: center;
  font-family: var(--wm-font-head); font-weight: 600;
  font-size: 5.125rem; line-height: 1.1; letter-spacing: -0.05125rem;   /* 82px */
  text-transform: uppercase; color: var(--wm-ink);
}

/* табы Аптеки / Онлайн (Frame 200, сегмент-контрол) */
.gk__tabs {
  display: inline-flex; gap: 1rem; margin: 5.0625rem auto 0;   /* +25px крошка→таб (истина Δ256) */
  padding: 0.5rem; border-radius: 1.5rem; background: #f4f4f4;   /* истина сегмент-контрола (раунд 2) */
}
.gk__tabsrow { display: flex; justify-content: center; }
.gk__tab {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1.375rem 2.5rem;                          /* сегмент ~165×73; гориз ужат под истину Δ165 (таб→таб) */
  border-radius: 1.25rem; text-decoration: none;
  font-family: var(--wm-font); font-weight: 500; font-size: 1.3125rem;   /* 21px */
  color: var(--wm-ink); white-space: nowrap;
}
.gk__tab--active { background: var(--wm-brand); color: #fff; }
@media (hover: hover) { .gk__tab:not(.gk__tab--active):hover { color: var(--wm-brand); } }

/* --- ЛОКАТОР аптек (Яндекс.Карты, node 1876:2242) --------------------------- */
.gk__locator {
  position: relative; margin: 3.75rem auto 0; max-width: 110.0625rem;
  aspect-ratio: 1761 / 882; border-radius: 1.625rem; overflow: hidden;
  background: #f2f3ef; box-shadow: 0 0.5rem 1.5rem rgba(49, 116, 54, 0.10);
}
.gk__map { position: absolute; inset: 0; width: 100%; height: 100%; }
.gk__locator-panel {
  position: absolute; z-index: 2; top: 1.25rem; bottom: 1.25rem; left: 1.25rem;
  width: 26.9375rem; display: grid; grid-template-rows: 5.5rem minmax(0, 1fr); gap: 0.75rem;
}
.gk__city-control { position: relative; z-index: 3; min-width: 0; }
.gk__city {
  display: flex; align-items: center; gap: 1rem; width: 100%; height: 100%; min-width: 0; padding: 0 1.625rem;
  border: 0; cursor: pointer; text-align: left;
  border-radius: 0.75rem; background: #fff; box-shadow: 0 0.25rem 1rem rgba(45, 52, 42, 0.08);
}
.gk__city-pin {
  flex: 0 0 auto; width: 1.125rem; height: 1.5rem;
  background: url('../img/gk-map-marker.svg') center / contain no-repeat;
}
.gk__city-value {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--wm-font); font-weight: 500; font-size: 1.25rem; color: #5f5f5f;
}
.gk__city-caret {
  flex: 0 0 auto; width: 0.75rem; height: 0.75rem;
  border-right: 0.125rem solid #5f5f5f; border-bottom: 0.125rem solid #5f5f5f;
  transform: rotate(45deg); transform-origin: center; transition: transform 0.2s ease; pointer-events: none;
}
.gk__city-control.is-open .gk__city-caret { transform: rotate(225deg); }
.gk__city-menu {
  position: absolute; top: calc(100% + 0.5rem); left: 0; width: 100%; padding: 0.5rem;
  border-radius: 0.75rem; background: #fff; box-shadow: 0 0.5rem 1.5rem rgba(45, 52, 42, 0.14);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-0.375rem);
  transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
}
.gk__city-control.is-open .gk__city-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.gk__city-option {
  display: block; width: 100%; padding: 0.875rem 1.125rem; border: 0; border-radius: 0.5rem;
  background: transparent; cursor: pointer; text-align: left;
  font-family: var(--wm-font); font-weight: 500; font-size: 1rem; color: #5f5f5f;
}
.gk__city-option:hover, .gk__city-option.is-selected { background: #f2f7ef; color: var(--wm-brand); }
.gk__shops-list {
  min-height: 0; padding: 0.75rem 0.5rem 0.75rem 1rem; overflow-y: auto;
  border-radius: 0.75rem; background: #fff; scrollbar-color: #5f5f5f transparent;
  scrollbar-width: thin; box-shadow: 0 0.25rem 1rem rgba(45, 52, 42, 0.08);
}
.gk__shops-list::-webkit-scrollbar { width: 0.25rem; }
.gk__shops-list::-webkit-scrollbar-thumb { border-radius: 1rem; background: #5f5f5f; }
.gk-locator__item {
  display: block; width: 100%; padding: 0.875rem 0.5rem; border: 0; border-radius: 0.5rem;
  background: transparent; text-align: left; cursor: pointer; color: #5f5f5f;
  font-family: var(--wm-font);
}
.gk-locator__item + .gk-locator__item { border-top: 0.0625rem solid #eeeeec; }
.gk-locator__item.is-active, .gk-locator__item:hover { background: #f5f5f5; }
.gk-locator__name { display: block; font-weight: 500; font-size: 1.25rem; line-height: 1.25; }
.gk-locator__address { display: block; margin-top: 0.625rem; font-size: 1rem; line-height: 1.35; color: #888; }
.gk-locator__phone { display: block; margin-top: 0.375rem; font-size: 1rem; line-height: 1.35; text-decoration: underline; }
.gk__map-status {
  display: none; position: absolute; z-index: 1; inset: 50% auto auto 50%; width: min(26rem, 80%);
  margin: 0; transform: translate(-50%, -50%); text-align: center;
  font-family: var(--wm-font); font-size: 1rem; color: var(--wm-ink);
}
.gk__locator.is-map-error .gk__map-status { display: block; }

/* --- СЕТКА онлайн-аптек (онлайн; плитки-логотипы со стрелкой, node 1876:2597…) - */
.gk__grid {
  margin: 5rem 0 0; list-style: none; padding: 0;                /* 80px переключатель→плитки (раунд 2, онлайн) */
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.875rem;   /* 14px; flex+center → неполный последний ряд центрируется (правка Веры «2 последние карточки по центру») */
}
.gk__shop {
  flex: 0 0 calc((100% - 3 * 0.875rem) / 4);          /* 4 в ряд как было; неполный ряд по центру */
  position: relative; display: block; list-style: none;
  aspect-ratio: 428 / 249; border-radius: 1.625rem;   /* плитка-рендер целиком (логотип + стрелка) */
  background: #f4f4f5; overflow: hidden;
}
.gk__shop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* --- ФОРМА «ЗАДАТЬ ВОПРОС» (общий блок, node 1876:2335) ---------------------- */
.gk-ask {
  position: relative; overflow: hidden;
  margin: 8.25rem auto 0; max-width: 110rem; min-height: 45.0625rem;   /* top −44+16 (Онлайн→форма) */
  border-radius: 1.5rem; padding: 1.4375rem 3.75rem 2.75rem;          /* pad-top 23px: канон формы = самое левое вхождение (правило «лево-направо» 09.07), «Получите» offset 216 от бокса. Зазор форма→футер = сквозной каркас (chrome, 264px канон Главной) */
  /* Фон блока = рендер кадра Веры 2129:726 (1760×721) 1:1, реш. Антона 13.07: градиент
     и ботаника запечены в gk-form-bg.jpg. Прежние отдельные ассеты (.gk-ask__flower /
     .gk-ask__pine) удалены. Линейный градиент — фолбэк на время загрузки картинки. */
  background:
    url('../img/gk-form-bg.jpg') center / cover no-repeat,
    linear-gradient(160deg, rgba(245, 255, 239, 1) 0%, rgba(237, 251, 221, 1) 100%);
}
.gk-ask__title {
  position: relative; z-index: 1; margin: 0; text-align: center;
  font-family: var(--wm-font-head); font-weight: 600;
  font-size: 5.125rem; line-height: 1.08; text-transform: uppercase; color: var(--wm-ink);
}
.gk-ask__accent { color: var(--wm-brand); }        /* слово «вопрос» фирменным зелёным (раунд 2) */
.wm .gk-ask__sub {   /* .wm-префикс: перебить `.wm p{margin:0}` (класс #27) */
  position: relative; z-index: 1; margin: 1rem 0 0; text-align: center;
  font-family: var(--wm-font); font-weight: 400; font-size: 1.125rem; color: var(--wm-ink);   /* 18px/400 по истине Figma */
}
.gk-form { position: relative; z-index: 1; margin: 5rem auto 0; max-width: 102.5rem; }   /* 1640px; +40 подзаголовок→поля (истина Δ344) */
.gk-form__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }       /* 20px */
.gk-field { margin-top: 1.25rem; }
.gk-form__row .gk-field:first-child, .gk-form__row .gk-field { margin-top: 0; }
.gk-field input, .gk-field textarea {
  width: 100%; height: 4.375rem;                        /* 70px */
  border: 0; border-radius: 1.25rem; background: #fff;
  padding: 0 2.5rem; box-sizing: border-box;
  font-family: var(--wm-font); font-weight: 400; font-size: 1rem; color: var(--wm-ink);
}
.gk-field textarea { height: 4.375rem; padding-top: 1.375rem; resize: vertical; }
.gk-field input::placeholder, .gk-field textarea::placeholder { color: var(--wm-ink); opacity: 0.55; }
.gk-form__wide { margin-top: 1.25rem; }
.gk-form__actions { display: flex; justify-content: center; margin-top: 3.5rem; }   /* +32 поля→Отправить (истина Δ344) */
.gk-submit {
  display: inline-flex; align-items: center; gap: 0.75rem;
  height: 3.75rem; padding: 0 0.375rem 0 2rem;          /* 60px, стрелка-кружок справа */
  border: 0; border-radius: 1.25rem; background: var(--wm-brand); cursor: pointer;
  font-family: var(--wm-font); font-weight: 500; font-size: 1rem; color: #fff;
}
.gk-submit img { width: 3rem; height: 3rem; }
@media (hover: hover) { .gk-submit:hover { filter: brightness(0.95); } }
.wm .gk-ask__consent {   /* .wm-префикс: перебить `.wm p{margin:0}` (класс #27) */
  position: relative; z-index: 1; margin: 1.75rem auto 0; max-width: 34rem; text-align: center;
  font-family: var(--wm-font); font-weight: 400; font-size: 0.875rem; line-height: 1.214;   /* 14px/17px (истина Figma; было 11px/1.4) */
  color: var(--wm-ink); opacity: 0.7;
}
.gk-form__done {
  display: none; margin: 1.5rem auto 0; max-width: 40rem; text-align: center;
  font-family: var(--wm-font); font-weight: 500; font-size: 1.125rem; color: var(--wm-brand);
}
.gk-form.is-sent .gk-form__grid { display: none; }
.gk-form.is-sent .gk-form__done { display: block; }

/* ============================================================================
   АДАПТИВ — сквозные блоки «Где купить» (табы, форма). Кадр 360: форма 2001:6570,
   поля 313×45 в стопку, кнопка НЕ на всю ширину. Ниже 1280 rem=px (base.css).
   ============================================================================ */

/* ── ПЛАНШЕТ 768–1279 ──────────────────────────────────────────────────────── */
@media (max-width: 1279px) and (min-width: 1001px) {
  .gk { padding-inline: 32px; padding-top: 128px; }
  .gk__title { font-size: 56px; margin-top: 40px; }
  .gk__tabs { margin-top: 40px; padding: 6px; }
  .gk__tab { padding: 14px 28px; font-size: 18px; }
  .gk__grid { grid-template-columns: repeat(2, 1fr); margin-top: 40px; gap: 14px; }
  .gk__locator { margin-top: 40px; max-width: none; }
  .gk__locator-panel { top: 12px; bottom: 12px; left: 12px; width: 38%; grid-template-rows: 60px minmax(0, 1fr); gap: 8px; }
  .gk__city { padding-inline: 18px; gap: 10px; }
  .gk__city-value { font-size: 16px; }
  .gk-locator__item { padding: 9px 6px; }
  .gk-locator__name { font-size: 15px; }
  .gk-locator__address, .gk-locator__phone { margin-top: 4px; font-size: 12px; }

  .gk-ask { margin-top: 120px; max-width: none; min-height: 0; padding: 40px 40px 48px; }
  .gk-ask__branch { width: 260px; right: -1rem; }
  .gk-ask__title { font-size: 56px; }
  .gk-form { margin-top: 40px; max-width: 560px; }
  .gk-form__row { grid-template-columns: 1fr; gap: 16px; }
  .gk-field { margin-top: 16px; }
  .gk-form__row .gk-field:first-child { margin-top: 0; }
  .gk-form__wide { margin-top: 16px; }
  .gk-field input, .gk-field textarea { height: 56px; border-radius: 12px; }
  .gk-form__actions { margin-top: 28px; }
  .gk-ask__consent { max-width: 420px; }
}

/* ── МОБИЛЬНЫЙ ≤767 (кадр 2001:6570) ───────────────────────────────────────── */
@media (max-width: 1000px) {
  main {
    background: linear-gradient(180deg, #FAFAFA 12.06%, #F4F4F4 19.01%), linear-gradient(180deg, #FAFAFA 12.06%, #F4F4F4 19.01%);
  }
  main.gk_online{background: #fff;}
  .wm .gk-ask__sub{margin: 1rem auto 0}
  .gk { padding-inline: 16px; padding-top: 96px; }
  .wm .gk__title { font-size: 34px; margin-top: 52px; line-height: 1.1; }
  .gk-submit{border-radius: 14px; padding: 4px 4px 4px 19px; font-size: 16px;}
  .gk-submit img{max-height: 100%; width: auto;}
  /* сегмент-табы: 2 равные части на всю ширину контента, fs16 (кадр 327/fs16) */
  .gk__tabs { display: flex; width: 100%; gap: 8px; margin-top: 52px; padding: 6px; border-radius: 16px; max-width: 220px; }
  .gk__tab { flex: 1; padding: 12px 0; font-size: 14px; border-radius: 12px; }

  .gk__grid { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 52px; gap: 14px; }
  .gk__locator { margin-top: 24px; max-width: none; aspect-ratio: auto; overflow: visible; background: transparent; box-shadow: none; }
  .gk__map { position: relative; inset: auto; height: auto; aspect-ratio: 654 / 1144; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 24px rgba(49,116,54,0.10); }
  .gk__locator-panel { position: static; width: auto; display: block; }
  /* выбор города */
  .gk__city-control { margin-top: 16px; }
  .gk__city {
    display: flex; align-items: center; gap: 8px; width: 100%;
    margin-top: 0; padding: 18px 25px; border-radius: 12px; background: #fff; box-shadow: none;
    border-bottom: 1px solid rgba(95,95,95,0.15); text-align: left;
  }
  .gk__city-pin { width: 14px; height: 18px; }
  .gk__city-value { font-weight: 500; font-size: 16px; color: var(--wm-ink); }
  .gk__city-caret { flex: 0 0 auto; width: 10px; height: 10px; border-right: 2px solid var(--wm-ink);
    border-bottom: 2px solid var(--wm-ink); opacity: 0.6; }
  .gk__city-menu { top: calc(100% + 4px); padding: 6px; }
  .gk__city-option { padding: 12px 14px; font-size: 14px; }
  /* список аптек */
  .gk__shops-list { margin: 8px 0 0; padding: 12px; max-height: 500px; border-radius: 12px;
    overflow-y: auto; background: #fff; box-shadow: none; -webkit-overflow-scrolling: touch; }
  .gk-locator__item { display: grid; grid-template-columns: 1fr auto; column-gap: 12px;
    padding: 14px 0; border-bottom: 1px solid rgba(95,95,95,0.12);
    border-radius: 0; background: transparent; font-family: var(--wm-font); }
  .gk-locator__item + .gk-locator__item { border-top: 0; }
  .gk-locator__item.is-active, .gk-locator__item:hover { background: transparent; }
  .gk-locator__name { grid-column: 1; font-weight: 600; font-size: 16px; color: var(--wm-ink); }
  .gk-locator__address { grid-column: 1; margin-top: 4px; font-weight: 400; font-size: 13px;
    line-height: 1.35; color: var(--wm-ink); opacity: 0.7; }
  .gk-locator__phone { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin-top: 0;
    font-weight: 500; font-size: 13px; color: var(--wm-brand); white-space: nowrap; }
  .gk__map-status { top: 38%; }

  /* форма: контейнер = ширина контента, поля в стопку 45px, кнопка НЕ на всю ширину */
  .gk-ask { margin-top: 100px; max-width: none; min-height: 0; padding: 34px 8px 18px; border-radius: 12px; }
  .gk-ask__branch { display: none; }                 /* декор-ветка на мобильном отсутствует в кадре */
  .gk-ask__title { font-size: 34px; line-height: 1.1; }
  .gk-ask__sub { max-width: 217px; margin-left: auto; margin-right: auto; font-size: 14px; color: rgba(44, 64, 43, 0.60)}
  .wm .gk-ask__sub { max-width: 217px; margin-left: auto; margin-right: auto; font-size: 14px; color: rgba(44, 64, 43, 0.60)}
  .gk-form { margin-top: 21px; max-width: none; }
  .gk-form__row { grid-template-columns: 1fr; gap: 11px; }
  .gk-field { margin-top: 11px; }
  .gk-form__row .gk-field:first-child { margin-top: 0; }
  .gk-form__wide { margin-top: 11px; }
  .gk-field input, .gk-field textarea { height: 45px; border-radius: 10px; padding: 0 20px; }
  .gk-field textarea { padding-top: 12px; }
  .gk-form__actions { margin-top: 21px; }
  .gk-submit { height: 42px; }                        /* не на всю ширину — центр */
  .gk-ask__consent { max-width: none; font-size: 10px; max-width: 180px; margin-left: auto; margin-right: auto; margin-top: 12px;}
  .wm .gk-ask__consent { max-width: none; font-size: 10px; max-width: 180px; margin-left: auto; margin-right: auto; margin-top: 12px;}
}