/* ==========================================================================
   Hookah-Baza 2026 — Страница товара (темная)
   Источник: Figma node 121:237 + states 726:8491, 747:8872, 382:5256, 399:3988
              Адаптив: 1082:10550 (desk light), 890:6950 (tab dark),
                       521:3249 (mob dark), 1089:15772 (tab light),
                       1089:15177 (mob light)

   Адаптивные модификаторы (верстка сама подстраивается):
   • Поле под H2:    «Артикул: …» или «Модель: …» (произвольный текст)
   • Наличие:        .product-info__stock--inline-link  — однострочный с зелёной ссылкой
                     .product-info__stock--warehouse   — 2 строки (склад + в наличии)
                     .product-info__stock--out         — добавляет красный бейдж
   • Цена:           с .product-info__price-old + discount → 3 элемента
                     без них                           → просто цена
   • Вкладки:        .product-tab + (опц.) .product-tab__count (—muted для 0)
                     на mobile вкладки скрыты, контент показывается сразу
   ========================================================================== */

/* Layout: 3 main blocks (top → body → related) with 64px gap between them.
   Figma: outer frame has gap: 64px between top/body/related. */
.product-page { gap: 64px; }

/* ==========================================================================
   Top: gallery + info
   Desktop grid: thumbs(80) + main photo(392) + info(1fr=704)  with 24px gaps.
   Gallery wrapper holds main photo + thumbs; on desktop thumbs sit to the LEFT.
   ========================================================================== */
.product-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 64px; /* desktop: large horizontal gap photo ↔ info */
  align-items: start;
}

/* Gallery:
   — single: only main 392×440
   — multi: thumbs 80 left + main 392×440, gap 24
   DOM order: thumbs (if any) → photo */
.product-gallery {
  display: grid;
  gap: 24px;
  align-items: start;
  width: 100%;
}
.product-gallery--single {
  grid-template-columns: minmax(0, 392px);
  max-width: 392px;
}
.product-gallery--multi {
  grid-template-columns: 80px minmax(0, 392px);
  max-width: 496px;
  align-items: stretch; /* thumbs column = photo height */
}

/* Main photo — 392×440, radius 24; block size fixed, image fills frame edge-to-edge */
.product-photo {
  width: 100%;
  max-width: 392px;
  height: 440px;
  background: var(--bg);
  border: 1px solid var(--stroke);
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
}
.product-photo img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  border-radius: inherit;
}

/* Thumbnails — column height = large photo (440)
   Slot size always = 1/4 of list viewport (as if there were 4).
   ≤4: no arrows; 2–3 leave empty space below (no stretch)
   >4: arrows top+bottom; viewport shows 4, scroll by 1 */
.product-thumbs {
  --thumb-gap: 16px;
  --thumb-nav-h: 27px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 80px;
  height: 440px; /* same as .product-photo */
  max-height: 440px;
  min-height: 0;
  box-sizing: border-box;
  overflow: hidden;
}
.product-thumbs__list {
  --thumb-slot: calc((100% - 3 * var(--thumb-gap)) / 4);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: var(--thumb-gap);
  width: 80px;
  flex: 1 1 auto;
  min-height: 0; /* shrink between arrows — do NOT use height:100% */
  overflow: hidden;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.product-thumbs__list::-webkit-scrollbar { display: none; }

.product-thumbs__item {
  box-sizing: border-box;
  width: 80px;
  flex: 0 0 var(--thumb-slot);
  height: var(--thumb-slot);
  max-height: var(--thumb-slot);
  background: var(--bg);
  border: 1px solid var(--stroke);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--tr);
  padding: 0;
  font: inherit;
  color: inherit;
}
.product-thumbs__item:hover { border-color: var(--text-muted); }
.product-thumbs__item[aria-current="true"] {
  border-color: var(--red);
}
[data-theme="light"] .product-thumbs__item[aria-current="true"] {
  border-color: var(--red);
}
.product-thumbs__item img {
  width: auto;
  height: auto;
  max-width: 70%;
  max-height: 70%;
  object-fit: contain;
  border-radius: 12px;
  pointer-events: none;
}

/* Nav arrows — 80×27, radius 8; only when >4 */
.product-thumbs__nav {
  display: none;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: var(--thumb-nav-h);
  background: var(--bg);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: background var(--tr), opacity var(--tr);
  flex: 0 0 var(--thumb-nav-h);
  padding: 0;
}
.product-thumbs--scrollable .product-thumbs__nav { display: flex; }
.product-thumbs__nav:hover { background: var(--bg-2); }
.product-thumbs__nav[aria-disabled="true"] {
  opacity: 0.35;
  pointer-events: none;
  cursor: default;
}
.product-thumbs__nav img {
  width: 27px;
  height: 27px;
  display: block;
}
.product-thumbs__nav--prev img { transform: scaleY(-1); }

/* Info block (right column)
   Figma: padding 31px top/bottom, gap auto-fill between head and price-block,
   price-block has justify-content: flex-end (pushed to bottom of info). */
.product-info {
  width: 100%;
  min-height: 440px;
  padding: 31px 0;
  display: flex;
  flex-direction: column;
}
.product-info__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.product-info__price-block {
  margin-top: auto;              /* push to bottom; gap to head will be ≥ 137px */
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.product-info__title {
  font-size: 36px; font-weight: 700;
  line-height: var(--lh-1);
  color: var(--text);
  margin: 0;
}
.product-info__sku {
  font-size: 18px; font-weight: 500;
  line-height: var(--lh-2);
  color: var(--text);
}

/* Stock variants */
.product-info__stock {
  font-size: 16px; font-weight: 500;
  line-height: var(--lh-2);
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.product-info__stock--inline-link { flex-direction: row; gap: 0; }
.product-info__stock-link {
  color: var(--green);
  text-decoration: underline;
}
.product-info__stock-warehouse { color: var(--text); }
.product-info__stock-in {
  color: var(--green);
}
.product-info__stock-out {
  color: var(--red);
}

/* Price block (also defined above with margin-top: auto) */
.product-info__price-row {
  display: flex;
  align-items: flex-end;
  gap: 16px;
}
.product-info__price {
  font-size: 28px; font-weight: 500;
  line-height: var(--lh-1);
  color: var(--text);
}
.product-info__price-old {
  font-size: 16px; font-weight: 500;
  line-height: var(--lh-2);
  color: var(--text-muted);
  text-decoration: line-through;
  padding-bottom: 4px;
}
.product-info__discount {
  font-size: 16px; font-weight: 500;
  line-height: var(--lh-2);
  color: var(--green);
  padding-bottom: 4px;
}

/* Add-to-cart — gradient fill (active) by default
   Figma component 154:957 (active=Yes):
   fill = button_hover gradient, stroke = accent gradient */
.product-info__cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 184px;
  padding: 16px 24px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(116deg, #4D1C2F 18%, #0A5630 65%);
  color: var(--text);
  font-size: 18px; font-weight: 500;
  line-height: var(--lh-1);
  text-decoration: none;
  cursor: pointer;
  position: relative;
  isolation: isolate;
  transition: background var(--tr);
}
.product-info__cart::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(116deg, #8F1743 38%, #0F9C4D 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
  transition: background 0.2s;
}
.product-info__cart:hover::before {
  background: conic-gradient(from var(--grad-angle),
    #8F1743 0%, #0F9C4D 25%, #8F1743 50%, #0F9C4D 75%, #8F1743 100%);
  animation: flow-along-border var(--spin-duration) linear infinite;
}
.product-info__cart > * { position: relative; z-index: 1; }

/* Light theme: add-to-cart fill + gradient border */
[data-theme="light"] .product-info__cart:not(.product-card__cart--in-cart) {
  background: #FDF9F8;
  color: #060814;
}
[data-theme="light"] .product-info__cart:not(.product-card__cart--in-cart)::before {
  background: linear-gradient(92.9deg, #8F1743 38.27%, #0F9C4D 98.78%);
  animation: none;
}
[data-theme="light"] .product-info__cart:not(.product-card__cart--in-cart):hover {
  background: linear-gradient(92.9deg, #F9CADB 18.57%, #B2ECCC 65.01%);
}
[data-theme="light"] .product-info__cart:not(.product-card__cart--in-cart):hover::before {
  background: linear-gradient(92.9deg, #8F1743 38.27%, #0F9C4D 98.78%);
  animation: none;
}

.product-info__cart.product-card__cart--in-cart {
  background: #060814;
  border: 1px solid #605E7B;
  color: #fff;
}
.product-info__cart.product-card__cart--in-cart::before { display: none; }
[data-theme="light"] .product-info__cart.product-card__cart--in-cart {
  background: #BCBBCA;
  border-color: #605E7B;
  color: #060814;
}

/* ==========================================================================
   Tabs — О товаре / Вопрос-ответ N
   ========================================================================== */
.product-body {
  display: flex;
  flex-direction: column;
  gap: 34px;
}
.product-tabs {
  display: flex;
  gap: 64px;
}
.product-tab {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 16px 0;
  font-size: 20px; font-weight: 500;
  line-height: var(--lh-1);
  color: var(--text);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color var(--tr);
}
.product-tab[aria-current="true"] {
  box-shadow: inset 0 -2px 0 0 var(--red);
}
.product-tab__count {
  font-size: 16px; font-weight: 500;
  line-height: var(--lh-2);
  color: var(--green);
}
.product-tab__count--muted { color: var(--text-muted); }

.product-tab__panel { display: none; }
.product-tab__panel[aria-hidden="false"] { display: contents; }
/* `display: contents` lets the panel's children participate in .product-body's gap
   so the gap between description and specs equals the body's 34px — matches Figma. */

/* FAQ accordion (Вопрос-ответ) */
.product-faq {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 800px;
  width: 100%;
}
.product-faq__item {
  background: var(--bg-2);
  border: 1px solid var(--stroke);
  border-radius: var(--r-4);
  overflow: hidden;
}
.product-faq__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 16px 20px;
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--tr);
}
.product-faq__head:hover { background: rgba(143, 23, 67, 0.08); }
.product-faq__question {
  flex: 1 1 auto;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text);
}
.product-faq__arrow {
  width: 27px;
  height: 27px;
  flex: none;
  transition: transform var(--tr);
}
.product-faq__item[data-expanded="true"] .product-faq__arrow { transform: scaleY(-1); }
.product-faq__body { display: none; }
.product-faq__item[data-expanded="true"] .product-faq__body { display: block; }
.product-faq__answer {
  padding: 0 20px 18px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-muted);
}
[data-theme="light"] .product-faq__item {
  background: #fff;
}
[data-theme="light"] .product-faq__head:hover {
  background: rgba(143, 23, 67, 0.06);
}
.product-faq__empty {
  color: var(--text-muted);
}

.product-description {
  max-width: 699px;
  font-size: 16px; font-weight: 500;
  line-height: var(--lh-2);
  color: var(--text);
  margin: 0;
}

/* Characteristics: two 496px columns with 64px gap */
.product-specs {
  display: flex;
  align-items: flex-start;
  gap: 64px;
}
.product-specs__col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 496px;
  max-width: 100%;
}
.product-specs__row {
  display: flex;
  align-items: center;
  gap: 4px;
}
.product-specs__name,
.product-specs__value {
  font-size: 18px; font-weight: 500;
  line-height: var(--lh-2);
  color: var(--text);
  background: var(--bg);
  padding: 0 4px;
  z-index: 1;
  white-space: nowrap;
}
.product-specs__value { margin-left: auto; }
.product-specs__dots {
  flex: 1;
  height: 1em;
  border-bottom: 0.5px dotted var(--text-muted);
  opacity: 0.5;
}

/* ==========================================================================
   Related products — "Покупают вместе"
   ========================================================================== */
.product-related {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.product-related__title {
  font-size: 36px; font-weight: 700;
  line-height: var(--lh-1);
  color: var(--text);
  margin: 0;
}

/* ==========================================================================
   Responsive — Tablet (≤ 1199px)
   Source: Figma 890:6950 / 1089:15772
   - Top: 2 columns. Gallery on the left: main photo on top, thumbs in a
     HORIZONTAL strip below. Info on the right (title, sku, stock, price, button).
   - Body: tabs + description + specs full-width.
   - Specs: 2 columns kept (each ~330px).
   ========================================================================== */
@media (max-width: 1199px) {
  .product-page { gap: 48px; }

  .product-top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start; /* like desktop — info column does not stretch to gallery height */
  }

  /* Gallery: photo on top, thumbs horizontal below */
  .product-gallery,
  .product-gallery--single,
  .product-gallery--multi {
    grid-template-columns: 1fr;
    max-width: none;
    gap: 16px;
  }
  .product-gallery--multi .product-photo { order: -1; }
  .product-photo {
    max-width: 100%;
    height: auto;
    aspect-ratio: 310 / 319;
    padding: 0;
    border-radius: 20px;
  }
  .product-photo img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    border-radius: inherit;
  }

  /* Horizontal strip — 4 slots; height ∝ photo (392:440), radius smaller */
  .product-thumbs {
    --thumb-gap: 12px;
    --thumb-radius: 8px;
    width: 100%;
    height: auto;
    max-height: none;
    overflow: visible;
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }
  .product-thumbs__list {
    --thumb-slot: calc((100% - 3 * var(--thumb-gap)) / 4);
    flex-direction: row;
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
    height: auto;
    overflow: hidden;
  }
  .product-thumbs:not(.product-thumbs--scrollable) .product-thumbs__item,
  .product-thumbs--scrollable .product-thumbs__item {
    flex: 0 0 var(--thumb-slot);
    width: var(--thumb-slot);
    height: auto;
    max-height: none;
    aspect-ratio: 392 / 440; /* proportional to large photo */
    border-radius: var(--thumb-radius);
  }
  .product-thumbs__item img {
    max-width: 85%;
    max-height: 85%;
    border-radius: var(--thumb-radius);
  }
  .product-thumbs__nav {
    width: 27px;
    height: auto;
    align-self: stretch;
    flex: 0 0 27px;
  }
  .product-thumbs__nav--prev img { transform: rotate(90deg); }
  .product-thumbs__nav--next img { transform: rotate(-90deg); }

  /* Info: same layout as desktop — head top, price/cart at bottom, 32px gaps */
  .product-info {
    min-height: 390px;
    padding: 31px 0;
    justify-content: flex-start;
    gap: 0;
  }
  .product-info__head { gap: 8px; }
  .product-info__title { font-size: 26px; }
  .product-info__sku { font-size: 16px; }
  .product-info__price-block {
    margin-top: auto;
    gap: 32px;
  }

  /* Tabs gap and description width relax */
  .product-tabs { gap: 32px; }
  .product-description { max-width: 100%; }

  /* Specs: still 2 columns, narrower */
  .product-specs { gap: 32px; }
  .product-specs__col { width: calc(50% - 16px); }
  .product-specs__name,
  .product-specs__value { font-size: 16px; }

  .product-related__title { font-size: 28px; }
}

/* ==========================================================================
   Responsive — Mobile (≤ 767px)
   Source: Figma 521:3249 / 1089:15177
   - Everything in 1 column.
   - Header is compact (handled globally).
   - No tabs: description + specs shown immediately, panels all visible.
   - Compact paddings, smaller font for related title.
   ========================================================================== */
@media (max-width: 767px) {
  .product-page { gap: 48px; } /* more space cart → description */

  .product-top {
    grid-template-columns: 1fr;
    gap: 32px; /* more space gallery → title */
  }

  .product-gallery,
  .product-gallery--single,
  .product-gallery--multi {
    width: 100%;
    max-width: none;
    gap: 24px; /* Figma: photo → thumbs */
  }
  /* Full content width; image fills frame edge-to-edge */
  .product-photo {
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 320 / 319;
    padding: 0;
    border-radius: 20px;
  }
  .product-photo img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    border-radius: inherit;
  }

  /* Horizontal strip: 4 slots, taller ∝ photo, smaller radius */
  .product-thumbs {
    --thumb-gap: 12px;
    --thumb-radius: 8px;
    width: 100%;
    height: auto;
    max-height: none;
    overflow: visible;
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }
  .product-thumbs__list {
    --thumb-slot: calc((100% - 3 * var(--thumb-gap)) / 4);
    flex-direction: row;
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
    height: auto;
    overflow: hidden;
  }
  .product-thumbs:not(.product-thumbs--scrollable) .product-thumbs__item,
  .product-thumbs--scrollable .product-thumbs__item {
    flex: 0 0 var(--thumb-slot);
    width: var(--thumb-slot);
    height: auto;
    max-height: none;
    aspect-ratio: 392 / 440;
    border-radius: var(--thumb-radius);
  }
  .product-thumbs__item img {
    max-width: 85%;
    max-height: 85%;
    border-radius: var(--thumb-radius);
  }
  .product-thumbs__nav {
    width: 27px;
    height: auto;
    align-self: stretch;
    flex: 0 0 27px;
  }
  .product-thumbs__nav--prev img { transform: rotate(90deg); }
  .product-thumbs__nav--next img { transform: rotate(-90deg); }

  /* Info: compact, single column, head and price block flow naturally */
  .product-info {
    min-height: auto;
    padding: 0;
    gap: 16px;
  }
  .product-info__head { gap: 4px; }
  .product-info__title { font-size: 22px; }
  .product-info__sku { font-size: 14px; }

  .product-info__price-block {
    margin-top: 0;
    gap: 12px;
  }
  .product-info__price { font-size: 20px; }
  .product-info__price-old,
  .product-info__discount { font-size: 14px; }
  .product-info__cart {
    width: 100%;
    padding: 14px 20px;
    font-size: 16px;
  }

  /* Tabs hidden on mobile; show all panels directly. */
  .product-tabs { display: none; }
  .product-tab__panel { display: block !important; }
  .product-tab__panel[aria-hidden="true"] { display: block !important; }

  .product-body { gap: 20px; }

  .product-description { max-width: 100%; }
  /* Panel is block on mobile → body gap doesn't apply between desc/specs */
  .product-description + .product-specs { margin-top: 32px; }
  .product-faq { max-width: 100%; margin-top: 8px; }
  .product-faq__question { font-size: 16px; }
  .product-faq__head { padding: 14px 16px; }
  .product-faq__answer { padding: 0 16px 14px; font-size: 14px; }
  .product-faq__arrow { width: 22px; height: 22px; }

  /* Specs: 1 column on mobile */
  .product-specs {
    flex-direction: column;
    gap: 16px;
  }
  .product-specs__col { width: 100%; gap: 12px; }
  .product-specs__name,
  .product-specs__value { font-size: 14px; }

  .product-related__title { font-size: 22px; }
}

/* ==========================================================================
   Stock branches modal (Figma 338:679 / 1056:10760 / 1056:10728)
   ========================================================================== */
.modal--stock {
  max-width: 1144px;
  width: 100%;
  padding: 40px 64px 64px;
  background: var(--bg);
  border: 0;
  border-radius: var(--r-4);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}
.modal--stock .modal__close,
.stock-modal__close {
  position: static;
  width: 57px;
  height: 57px;
  flex: none;
}
.modal--stock .modal__close img {
  width: 36px;
  height: 36px;
}

.stock-modal {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.stock-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.stock-modal__title {
  margin: 0;
  font-family: var(--font-main);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--text);
}

.stock-modal__body {
  display: flex;
  align-items: flex-start;
  gap: 25px;
}
.stock-modal__cities {
  flex: 0 0 392px;
  width: 392px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.stock-modal__aside {
  flex: 1 1 599px;
  width: 599px;
  max-width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.stock-modal__map {
  width: 100%;
  height: 558px;
  border: 1px solid var(--stroke);
  border-radius: var(--r-4);
  overflow: hidden;
  background: var(--bg-2);
}
.stock-modal__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: invert(0.92) hue-rotate(180deg) brightness(0.95) contrast(0.95);
}
[data-theme="light"] .stock-modal__map iframe { filter: none; }

/* Compact «Перейти в магазин» inside expanded branch contacts */
.stock-modal__go {
  display: none;
  margin-top: 4px;
  align-self: flex-start;
  width: auto;
  min-height: 0;
  padding: 8px 14px;
  gap: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  color: #fff;
  border-radius: 10px;
}
.stock-modal .city-card__address.is-active .stock-modal__go {
  display: inline-flex;
}
.stock-modal__go span {
  color: inherit;
  font: inherit;
}
[data-theme="light"] .stock-modal__go {
  background: linear-gradient(116deg, #F9CADB 18%, #B2ECCC 65%);
  color: var(--text);
}
[data-theme="light"] .stock-modal__go::before {
  background: linear-gradient(116deg, #8F1743 38%, #0F9C4D 100%);
}

/* Address rows: label + qty; contacts via .is-active (home.css) */
.stock-modal .city-card__address {
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.stock-modal .city-card__address-main {
  flex: 1 1 auto;
  width: 100%;
}
.stock-modal .city-card__address-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}
.stock-modal .city-card__address-qty {
  flex: none;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-muted);
  white-space: nowrap;
}
.stock-modal .city-card__address--active,
.stock-modal .city-card__address.is-active {
  background: rgba(15, 156, 77, 0.08);
}
.stock-modal .tag--green {
  color: var(--green);
  background: transparent;
  padding: 3px 7px;
  font-weight: 400;
  line-height: 1.5;
}
[data-theme="light"] .stock-modal .tag--green {
  color: var(--green-dark);
  border-color: var(--green-dark);
}

/* ---------- TABLET (max-width: 1199px) — Figma 1056:10760 ---------- */
@media (max-width: 1199px) {
  #stock-branches.modal {
    padding: 0;
    align-items: stretch;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .modal--stock {
    max-width: none;
    width: 100%;
    min-height: 100%;
    max-height: none; /* page scrolls via #stock-branches.modal */
    border-radius: 0;
    padding: 40px;
    overflow: visible;
  }
  .modal--stock .modal__close,
  .stock-modal__close {
    width: 35px;
    height: 35px;
  }
  .modal--stock .modal__close img {
    width: 28px;
    height: 28px;
  }

  .stock-modal {
    gap: 24px;
    min-height: auto;
    justify-content: flex-start;
  }
  .stock-modal__title { font-size: 26px; }

  .stock-modal__body {
    flex-direction: column;
    gap: 16px;
  }
  .stock-modal__aside {
    display: contents;
    width: auto;
    flex: none;
  }
  .stock-modal__map {
    order: 1;
    height: 320px;
    border-radius: 12px;
  }
  .stock-modal__cities {
    order: 2;
    flex: none;
    width: 100%;
  }
  .stock-modal .city-card { border-radius: 12px; }
  .stock-modal .city-card__name { font-size: 18px; }
  .stock-modal .city-card__head { padding: 12px 8px; }
  .stock-modal .city-card__address-text { font-size: 15px; }
  .stock-modal .tag--lg { font-size: 12px; }
}

/* ---------- MOBILE (max-width: 767px) — Figma 1056:10728 ---------- */
@media (max-width: 767px) {
  .modal--stock { padding: 32px 20px; }
  .stock-modal { gap: 24px; }
  .stock-modal__title {
    font-size: 24px;
    max-width: 11em;
  }
  .stock-modal__map { height: 221px; }
  .stock-modal__cities { gap: 8px; }
  .stock-modal .city-card__name { font-size: 16px; }
  .stock-modal .city-card__address-text { font-size: 16px; }
  .stock-modal__go { padding: 8px 12px; font-size: 13px; }
}