/*
 * Glass-Hot — City SEO v2
 * Extracted from city_seo.twig.
 * MASTER 15B-2A
 */

/* ===== FIRST_SCREEN ===== */

.gh-city-v2-first {
            margin: 18px 0 28px;
          }

          .gh-city-v2-first__grid {
            display: grid;
            grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
            gap: 18px;
            align-items: stretch;
          }

          .gh-city-v2-card {
            position: relative;
            overflow: hidden;
            padding: 24px;
            border: 1px solid #e5ebf2;
            border-radius: 24px;
            background: linear-gradient(
              145deg,
              #fff 0%,
              #f8fbff 62%,
              #f2f7fc 100%
            );
            box-shadow: 0 12px 34px rgba(22,42,69,.08);
          }

          .gh-city-v2-card:before {
            content: "";
            position: absolute;
            top: 0;
            left: 28px;
            right: 28px;
            height: 1px;
            background: linear-gradient(
              90deg,
              transparent,
              rgba(74,144,226,.38),
              transparent
            );
          }

          .gh-city-v2-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            min-height: 30px;
            padding: 5px 10px;
            border-radius: 999px;
            background: #eef6ff;
            color: #2e6fae;
            font-size: 12px;
            font-weight: 700;
          }

          .gh-city-v2-card h2 {
            margin: 14px 0 9px;
            color: #17202b;
            font-size: 24px;
            line-height: 1.2;
            font-weight: 700;
          }

          .gh-city-v2-lead {
            margin: 0;
            color: #5b6673;
            font-size: 15px;
            line-height: 1.55;
          }

          .gh-city-v2-checks {
            display: grid;
            gap: 9px;
            margin: 20px 0;
          }

          .gh-city-v2-check {
            display: flex;
            align-items: flex-start;
            gap: 9px;
            color: #2a3440;
            font-size: 14px;
            line-height: 1.45;
          }

          .gh-city-v2-check__icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 20px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #eaf8ef;
            color: #168c45;
            font-size: 12px;
            font-weight: 800;
          }

          .gh-city-v2-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 20px;
          }

          .gh-city-v2-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 44px;
            padding: 10px 18px;
            border-radius: 12px;
            color: #fff !important;
            font-size: 14px;
            font-weight: 700;
            text-decoration: none !important;
          }

          .gh-city-v2-btn--viber {
            background: #665cac;
            box-shadow: 0 7px 18px rgba(102,92,172,.18);
          }

          .gh-city-v2-btn--telegram {
            background: #229ed9;
            box-shadow: 0 7px 18px rgba(34,158,217,.18);
          }

          .gh-city-v2-route {
            margin: 18px 0;
            padding: 12px 14px;
            border: 1px solid #e7edf4;
            border-radius: 16px;
            background: #fff;
          }

          .gh-city-v2-route__svg {
            display: block;
            width: 100%;
            height: 46px;
          }

          .gh-city-v2-route__labels {
            display: flex;
            justify-content: space-between;
            gap: 12px;
            margin: -8px 3px 16px;
            color: #697583;
            font-size: 12px;
          }

          .gh-city-v2-route__labels strong {
            color: #283542;
          }

          .gh-city-v2-stats {
            display: grid;
            grid-template-columns: repeat(3,minmax(0,1fr));
            gap: 9px;
            margin-bottom: 14px;
          }

          .gh-city-v2-stat {
            padding: 11px 10px;
            border: 1px solid #e7edf4;
            border-radius: 14px;
            background: #fff;
          }

          .gh-city-v2-stat__label {
            display: block;
            margin-bottom: 4px;
            color: #788493;
            font-size: 11px;
          }

          .gh-city-v2-stat__value {
            display: block;
            color: #17202b;
            font-size: 17px;
            line-height: 1.2;
            font-weight: 700;
          }

          .gh-city-v2-default {
            display: flex;
            align-items: flex-start;
            gap: 9px;
            margin: 0 0 14px;
            padding: 11px 12px;
            border-radius: 13px;
            background: #f4f8fc;
            color: #4d5966;
            font-size: 13px;
            line-height: 1.45;
          }

          .gh-city-v2-departments {
            padding-top: 12px;
            border-top: 1px solid #e8edf3;
          }

          .gh-city-v2-departments summary {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            cursor: pointer;
            list-style: none;
            color: #226eae;
            font-size: 14px;
            font-weight: 700;
          }

          .gh-city-v2-departments summary::-webkit-details-marker {
            display: none;
          }

          .gh-city-v2-search {
            position: relative;
            margin-top: 13px;
          }

          .gh-city-v2-search input {
            width: 100%;
            height: 42px;
            padding: 8px 12px 8px 38px;
            border: 1px solid #dce5ee;
            border-radius: 12px;
            background: #fff;
            color: #25313d;
            font-size: 14px;
            outline: none;
          }

          .gh-city-v2-search svg {
            position: absolute;
            left: 13px;
            top: 50%;
            transform: translateY(-50%);
          }

          .gh-city-v2-search-meta {
            display: flex;
            justify-content: space-between;
            gap: 10px;
            margin: 8px 2px;
            color: #87919c;
            font-size: 11px;
          }

          .gh-city-v2-department-list {
            max-height: 265px;
            overflow-y: auto;
            padding-right: 4px;
          }

          .gh-city-v2-department {
            display: grid;
            grid-template-columns: 42px minmax(0,1fr);
            gap: 9px;
            align-items: start;
            padding: 10px 4px;
            border-bottom: 1px solid #edf1f5;
          }

          .gh-city-v2-department__number {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 27px;
            padding: 4px 6px;
            border-radius: 8px;
            background: #eef6ff;
            color: #2c72b3;
            font-size: 11px;
            font-weight: 800;
          }

          .gh-city-v2-department__address {
            color: #35414d;
            font-size: 12px;
            line-height: 1.45;
          }

          .gh-city-v2-empty {
            padding: 14px 4px;
            color: #7b8794;
            font-size: 13px;
          }

          @media (max-width: 767px) {
            .gh-city-v2-first {
              margin: 14px 0 22px;
            }

            .gh-city-v2-first__grid {
              grid-template-columns: 1fr;
              gap: 12px;
            }

            .gh-city-v2-card {
              padding: 18px;
              border-radius: 18px;
            }

            .gh-city-v2-card h2 {
              font-size: 20px;
            }

            .gh-city-v2-actions {
              display: grid;
              grid-template-columns: 1fr 1fr;
            }

            .gh-city-v2-stats {
              grid-template-columns: 1fr 1fr;
            }

            .gh-city-v2-stat:last-child {
              grid-column: 1 / -1;
            }

            .gh-city-v2-department-list {
              max-height: 235px;
            }
          }

          @media (max-width: 420px) {
            .gh-city-v2-actions {
              grid-template-columns: 1fr;
            }
          }

/* ===== PRODUCTS / LIGHT NATIVE CAROUSEL ===== */

.gh-city-v2-products-headrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.gh-city-v2-products-headrow
.gh-city-v2-products-heading {
  min-width: 0;
  flex: 1 1 auto;
}


/* ---------------------------------------------------------
   NAVIGATION
   Только две статические стеклянные кнопки.
   Никакого backdrop-filter.
   --------------------------------------------------------- */

.gh-city-v2-carousel-nav {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.gh-city-v2-carousel-btn {
  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 40px;
  height: 40px;

  padding: 0;

  border:
    1px solid rgba(171, 210, 218, .72);

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse 80% 60% at 28% 8%,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,.68) 48%,
      rgba(255,255,255,0) 100%
    ),
    linear-gradient(
      155deg,
      rgba(255,255,255,.96) 0%,
      rgba(239,248,249,.90) 55%,
      rgba(218,236,239,.84) 100%
    );

  color: #27363d;

  font-size: 27px;
  line-height: 1;

  cursor: pointer;

  box-shadow:
    inset 0 2px 1px rgba(255,255,255,1),
    inset 0 -2px 3px rgba(62,91,98,.10),
    0 3px 7px rgba(30,66,75,.08),
    0 7px 16px rgba(30,66,75,.07);

  transform: translateY(0);

  transition:
    transform .16s ease,
    opacity .16s ease,
    border-color .16s ease,
    box-shadow .16s ease;
}

@media (hover: hover) and (pointer: fine) {

  .gh-city-v2-carousel-btn:not([disabled]):hover {
    transform: translateY(-1px);

    border-color:
      rgba(89, 199, 214, .74);

    box-shadow:
      inset 0 2px 1px rgba(255,255,255,1),
      inset 0 -2px 3px rgba(62,91,98,.10),
      0 4px 9px rgba(30,66,75,.10),
      0 9px 18px rgba(30,66,75,.09);
  }
}

.gh-city-v2-carousel-btn[disabled] {
  opacity: .28;
  cursor: default;
  transform: none;
}


/* ---------------------------------------------------------
   НАТИВНАЯ ГОРИЗОНТАЛЬНАЯ ЛЕНТА

   JS не нужен:
   - touch swipe нативный;
   - trackpad нативный;
   - существующие стрелки используют scrollLeft.
   --------------------------------------------------------- */

.gh-city-v2-product-block--carousel {
  display: flex;
  flex-wrap: nowrap;

  gap: 16px;

  width: 100%;

  overflow-x: auto;
  overflow-y: hidden;

  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;

  -webkit-overflow-scrolling: touch;

  overscroll-behavior-x: contain;

  scrollbar-width: none;
  -ms-overflow-style: none;
}

.gh-city-v2-product-block--carousel::-webkit-scrollbar {
  display: none;

  width: 0;
  height: 0;
}


/* Desktop: 3 карточки */

.gh-city-v2-product-block--carousel
> .product-layout {
  float: none;

  flex:
    0 0 calc((100% - 32px) / 3);

  width:
    calc((100% - 32px) / 3);

  max-width:
    calc((100% - 32px) / 3);

  min-width: 0;

  scroll-snap-align: start;
}


/* Tablet: 2 карточки */

@media (max-width: 991px) {

  .gh-city-v2-product-block--carousel
  > .product-layout {
    flex-basis:
      calc((100% - 16px) / 2);

    width:
      calc((100% - 16px) / 2);

    max-width:
      calc((100% - 16px) / 2);
  }
}


/* ---------------------------------------------------------
   Mobile: РОВНО 2 карточки в видимой области.

   Без 78%, без 84%, без "одна карточка + кусок второй".
   --------------------------------------------------------- */

@media (max-width: 767px) {

  .gh-city-v2-products-headrow {
    align-items: center;
    gap: 10px;
  }

  .gh-city-v2-carousel-nav {
    gap: 6px;
  }

  .gh-city-v2-carousel-btn {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    font-size: 24px;
  }

  .gh-city-v2-product-block--carousel {
    gap: 10px;
  }

  .gh-city-v2-product-block--carousel
  > .product-layout {
    flex-basis:
      calc((100% - 10px) / 2);

    width:
      calc((100% - 10px) / 2);

    max-width:
      calc((100% - 10px) / 2);
  }
}


/*
 * Даже на очень узких телефонах оставляем 2 карточки,
 * как утверждено для City SEO.
 */

@media (max-width: 420px) {

  .gh-city-v2-product-block--carousel {
    gap: 8px;
  }

  .gh-city-v2-product-block--carousel
  > .product-layout {
    flex-basis:
      calc((100% - 8px) / 2);

    width:
      calc((100% - 8px) / 2);

    max-width:
      calc((100% - 8px) / 2);
  }

  .gh-city-v2-carousel-btn {
    width: 32px;
    height: 32px;

    flex-basis: 32px;

    font-size: 23px;
  }
}

/* ===== SERVICES — GHS GLASS SYSTEM ===== */

/*
 * Визуальный материал карточек НЕ дублируем здесь.
 * Используются существующие:
 *
 * .ghs-section
 * .ghs-grid
 * .ghs-card
 * .ghs-glass
 * .ghs-glass--aqua
 * .ghs-glass--green
 * .ghs-badge
 *
 * из основного Glass-Hot Design System.
 */

.gh-city-v2-services {
  margin: 28px 0 30px;
}

.gh-city-v2-services > .ghs-section {
  margin: 0;
}


/*
 * Только раскладка контента:
 * кнопки двух карточек остаются на одном уровне.
 */

.gh-city-v2-services .ghs-card.ghs-glass {
  display: flex;
  flex-direction: column;
}

.gh-city-v2-services .ghs-card.ghs-glass > p {
  margin-bottom: 18px;
}

.gh-city-v2-services .gh-city-v2-service__link {
  align-self: flex-start;
  gap: 7px;
  margin-top: auto;
}

.gh-city-v2-service__arrow {
  display: inline-block;
  font-size: 16px;
  line-height: 1;
  transition: transform .18s ease;
}

@media (hover: hover) and (pointer: fine) {
  .gh-city-v2-service__link:hover
  .gh-city-v2-service__arrow {
    transform: translateX(3px);
  }
}

@media (max-width: 767px) {
  .gh-city-v2-services {
    margin: 22px 0 24px;
  }
}

/* ===== FAQ ===== */

.gh-city-v2-faq {
            margin: 28px 0 32px;
          }

          .gh-city-v2-faq__title {
            margin: 0 0 15px;
            color: #17202b;
            font-size: 24px;
            line-height: 1.25;
            font-weight: 700;
          }

          .gh-city-v2-faq__list {
            overflow: hidden;
            border: 1px solid #e3eaf2;
            border-radius: 20px;
            background: #fff;
            box-shadow: 0 10px 28px rgba(22,42,69,.06);
          }

          .gh-city-v2-faq__item {
            margin: 0;
            background: #fff;
          }

          .gh-city-v2-faq__item + .gh-city-v2-faq__item {
            border-top: 1px solid #edf1f5;
          }

          .gh-city-v2-faq__question {
            position: relative;
            display: block;
            padding: 18px 58px 18px 20px;
            color: #27313d;
            font-size: 15px;
            line-height: 1.45;
            font-weight: 700;
            cursor: pointer;
            list-style: none;
          }

          .gh-city-v2-faq__question::-webkit-details-marker {
            display: none;
          }

          .gh-city-v2-faq__question:after {
            content: "+";
            position: absolute;
            top: 50%;
            right: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            margin-top: -14px;
            border-radius: 50%;
            background: #eef6ff;
            color: #2e6fae;
            font-size: 20px;
            line-height: 1;
            font-weight: 500;
            transition: transform .18s ease;
          }

          .gh-city-v2-faq__item[open]
          .gh-city-v2-faq__question:after {
            transform: rotate(45deg);
          }

          .gh-city-v2-faq__answer {
            padding: 0 58px 18px 20px;
            color: #5b6673;
            font-size: 14px;
            line-height: 1.6;
          }

          @media (max-width: 767px) {
            .gh-city-v2-faq {
              margin: 22px 0 26px;
            }

            .gh-city-v2-faq__title {
              margin-bottom: 12px;
              font-size: 20px;
              line-height: 1.3;
            }

            .gh-city-v2-faq__list {
              border-radius: 16px;
            }

            .gh-city-v2-faq__question {
              padding: 16px 52px 16px 16px;
              font-size: 14px;
            }

            .gh-city-v2-faq__question:after {
              right: 15px;
              width: 26px;
              height: 26px;
              margin-top: -13px;
              font-size: 19px;
            }

            .gh-city-v2-faq__answer {
              padding: 0 16px 16px;
              font-size: 14px;
              line-height: 1.55;
            }
          }



/* =========================================================
   MASTER 15B-5C — CITY SERVICE CTA WHITE TEXT
   ========================================================= */

.gh-city-v2-services
.gh-city-v2-service__link,
.gh-city-v2-services
.gh-city-v2-service__link:visited,
.gh-city-v2-services
.gh-city-v2-service__link:hover,
.gh-city-v2-services
.gh-city-v2-service__link:focus,
.gh-city-v2-services
.gh-city-v2-service__link:active,
.gh-city-v2-services
.gh-city-v2-service__link span {
  color: #fff !important;
  text-decoration: none !important;
}


/* =========================================================
   MASTER 15B-6C — CAROUSEL OVERLAY GLASS ARROWS

   Лёгкая реализация:
   - никаких backdrop-filter;
   - никаких анимаций blur;
   - существующий native horizontal scroll;
   - существующий JS scrollLeft.
   ========================================================= */

.gh-city-v2-carousel-shell {
  position: relative;
  width: 100%;
  min-width: 0;
}


/*
 * Навигация лежит поверх карусели,
 * но сама не перехватывает touch/swipe.
 */

.gh-city-v2-carousel-shell
.gh-city-v2-carousel-nav {
  position: absolute;
  z-index: 12;

  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  display: block;

  pointer-events: none;
}


/*
 * Стеклянная кнопка.
 * Эффект сделан только gradient + border + shadow,
 * без тяжёлого backdrop-filter.
 */

.gh-city-v2-carousel-shell
.gh-city-v2-carousel-btn {
  position: absolute;

  top: 50%;

  width: 44px;
  height: 44px;

  margin: 0;
  padding: 0;

  border:
    1px solid rgba(255,255,255,.92);

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 31% 24%,
      rgba(255,255,255,.94) 0%,
      rgba(255,255,255,.52) 28%,
      rgba(255,255,255,.20) 61%,
      rgba(226,244,247,.24) 100%
    );

  color: rgba(35,54,61,.90);

  font-size: 32px;
  font-weight: 300;
  line-height: 1;

  cursor: pointer;

  pointer-events: auto;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 2px rgba(69,111,120,.09),
    0 3px 10px rgba(36,73,82,.10),
    0 8px 22px rgba(36,73,82,.08);

  transform: translateY(-50%);

  transition:
    opacity .16s ease,
    border-color .16s ease,
    box-shadow .16s ease;
}


/* Левая стрелка */

.gh-city-v2-carousel-shell
[data-gh-city-v2-carousel-prev] {
  left: 8px;
}


/* Правая стрелка */

.gh-city-v2-carousel-shell
[data-gh-city-v2-carousel-next] {
  right: 8px;
}


@media (hover: hover) and (pointer: fine) {

  .gh-city-v2-carousel-shell
  .gh-city-v2-carousel-btn:not([disabled]):hover {
    border-color:
      rgba(98,207,219,.92);

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,1),
      0 4px 12px rgba(36,73,82,.12),
      0 9px 24px rgba(36,73,82,.10);
  }
}


/*
 * На краю ленты стрелка почти растворяется,
 * но остаётся визуально понятной.
 */

.gh-city-v2-carousel-shell
.gh-city-v2-carousel-btn[disabled] {
  opacity: .16;

  cursor: default;

  pointer-events: none;
}


/* Mobile */

@media (max-width: 767px) {

  .gh-city-v2-carousel-shell
  .gh-city-v2-carousel-btn {
    width: 36px;
    height: 36px;

    font-size: 27px;
  }

  .gh-city-v2-carousel-shell
  [data-gh-city-v2-carousel-prev] {
    left: 4px;
  }

  .gh-city-v2-carousel-shell
  [data-gh-city-v2-carousel-next] {
    right: 4px;
  }
}


/* Very narrow mobile */

@media (max-width: 420px) {

  .gh-city-v2-carousel-shell
  .gh-city-v2-carousel-btn {
    width: 34px;
    height: 34px;

    font-size: 25px;
  }
}


/* =========================================================
   MASTER 15B-6D — YOUTUBE STYLE CAROUSEL ARROWS

   Только CSS.
   Native scroll + существующий JS остаются без изменений.
   ========================================================= */


/*
 * YouTube-like floating navigation:
 * круглая светлая кнопка поверх края ленты.
 */

.gh-city-v2-carousel-shell
.gh-city-v2-carousel-btn {
  width: 42px;
  height: 42px;

  border:
    1px solid rgba(219,229,232,.96);

  border-radius: 50%;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.94) 0%,
      rgba(255,255,255,.78) 52%,
      rgba(236,246,248,.76) 100%
    );

  color: transparent !important;

  font-size: 0 !important;

  box-shadow:
    0 1px 2px rgba(15,23,42,.08),
    0 3px 10px rgba(15,23,42,.13),
    inset 0 1px 0 rgba(255,255,255,.98);

  transition:
    opacity .14s ease,
    box-shadow .14s ease,
    background .14s ease;

  overflow: hidden;
}


/*
 * Рисуем собственный тонкий chevron.
 * Никаких иконок, SVG-библиотек или шрифтов.
 */

.gh-city-v2-carousel-shell
.gh-city-v2-carousel-btn::before {
  content: "";

  position: absolute;

  top: 50%;
  left: 50%;

  width: 9px;
  height: 9px;

  border-top:
    2px solid rgba(24,31,35,.88);

  border-right:
    2px solid rgba(24,31,35,.88);
}


/* LEFT */

.gh-city-v2-carousel-shell
[data-gh-city-v2-carousel-prev] {
  left: 6px;
}

.gh-city-v2-carousel-shell
[data-gh-city-v2-carousel-prev]::before {
  transform:
    translate(-38%, -50%)
    rotate(-135deg);
}


/* RIGHT */

.gh-city-v2-carousel-shell
[data-gh-city-v2-carousel-next] {
  right: 6px;
}

.gh-city-v2-carousel-shell
[data-gh-city-v2-carousel-next]::before {
  transform:
    translate(-62%, -50%)
    rotate(45deg);
}


/*
 * Hover — как у интерфейсных каруселей:
 * без прыжков и тяжёлых эффектов.
 */

@media (hover: hover) and (pointer: fine) {

  .gh-city-v2-carousel-shell
  .gh-city-v2-carousel-btn:not([disabled]):hover {
    background:
      rgba(255,255,255,.98);

    border-color:
      rgba(202,217,221,.98);

    box-shadow:
      0 2px 4px rgba(15,23,42,.10),
      0 5px 15px rgba(15,23,42,.16),
      inset 0 1px 0 rgba(255,255,255,1);
  }
}


/*
 * Как у YouTube:
 * если дальше листать нельзя — кнопки вообще нет.
 */

.gh-city-v2-carousel-shell
.gh-city-v2-carousel-btn[disabled] {
  opacity: 0 !important;

  visibility: hidden;

  pointer-events: none;

  box-shadow: none;
}


/* MOBILE */

@media (max-width: 767px) {

  .gh-city-v2-carousel-shell
  .gh-city-v2-carousel-btn {
    width: 36px;
    height: 36px;
  }

  .gh-city-v2-carousel-shell
  .gh-city-v2-carousel-btn::before {
    width: 8px;
    height: 8px;

    border-top-width: 2px;
    border-right-width: 2px;
  }

  .gh-city-v2-carousel-shell
  [data-gh-city-v2-carousel-prev] {
    left: 3px;
  }

  .gh-city-v2-carousel-shell
  [data-gh-city-v2-carousel-next] {
    right: 3px;
  }
}


@media (max-width: 420px) {

  .gh-city-v2-carousel-shell
  .gh-city-v2-carousel-btn {
    width: 34px;
    height: 34px;
  }
}


/* =========================================================
   MASTER 15B-6E — CITY CAROUSEL FINAL 4 / 3 / 2
   Desktop: 4
   Tablet: 3
   Mobile: 2
   ========================================================= */


/* DESKTOP — 4 */

.gh-city-v2-carousel-shell
.gh-city-v2-product-block--carousel
> .product-layout {
  float: none !important;

  flex:
    0 0 calc((100% - 48px) / 4) !important;

  width:
    calc((100% - 48px) / 4) !important;

  max-width:
    calc((100% - 48px) / 4) !important;

  min-width: 0 !important;
}


/* TABLET — 3 */

@media (max-width: 991px) {

  .gh-city-v2-carousel-shell
  .gh-city-v2-product-block--carousel
  > .product-layout {
    flex:
      0 0 calc((100% - 32px) / 3) !important;

    width:
      calc((100% - 32px) / 3) !important;

    max-width:
      calc((100% - 32px) / 3) !important;
  }
}


/* MOBILE — EXACTLY 2 */

@media (max-width: 767px) {

  .gh-city-v2-carousel-shell
  .gh-city-v2-product-block--carousel {
    gap: 10px !important;
  }

  .gh-city-v2-carousel-shell
  .gh-city-v2-product-block--carousel
  > .product-layout {
    flex:
      0 0 calc((100% - 10px) / 2) !important;

    width:
      calc((100% - 10px) / 2) !important;

    max-width:
      calc((100% - 10px) / 2) !important;
  }
}


@media (max-width: 420px) {

  .gh-city-v2-carousel-shell
  .gh-city-v2-product-block--carousel {
    gap: 8px !important;
  }

  .gh-city-v2-carousel-shell
  .gh-city-v2-product-block--carousel
  > .product-layout {
    flex:
      0 0 calc((100% - 8px) / 2) !important;

    width:
      calc((100% - 8px) / 2) !important;

    max-width:
      calc((100% - 8px) / 2) !important;
  }
}


/* =========================================================
   YOUTUBE-LIKE FLOATING ARROWS
   ========================================================= */

.gh-city-v2-carousel-shell {
  position: relative !important;
  width: 100% !important;
}


.gh-city-v2-carousel-shell
.gh-city-v2-carousel-nav {
  position: absolute !important;

  z-index: 40 !important;

  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;

  display: block !important;

  pointer-events: none !important;
}


/* ACTIVE BUTTON */

.gh-city-v2-carousel-shell
.gh-city-v2-carousel-btn:not([disabled]) {
  position: absolute !important;

  z-index: 41 !important;

  top: 50% !important;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  width: 42px !important;
  height: 42px !important;

  margin: 0 !important;
  padding: 0 !important;

  border:
    1px solid rgba(218,230,233,.90) !important;

  border-radius: 50% !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.93),
      rgba(239,248,250,.78)
    ) !important;

  box-shadow:
    0 2px 5px rgba(24,40,45,.10),
    0 5px 15px rgba(24,40,45,.14),
    inset 0 1px 0 rgba(255,255,255,1) !important;

  opacity: 1 !important;
  visibility: visible !important;

  pointer-events: auto !important;

  transform:
    translateY(-50%) !important;

  overflow: hidden !important;

  color: transparent !important;
  font-size: 0 !important;

  cursor: pointer !important;
}


/* CHEVRON */

.gh-city-v2-carousel-shell
.gh-city-v2-carousel-btn:not([disabled])::before {
  content: "" !important;

  position: absolute !important;

  top: 50% !important;
  left: 50% !important;

  display: block !important;

  width: 9px !important;
  height: 9px !important;

  border-top:
    2px solid rgba(27,37,41,.92) !important;

  border-right:
    2px solid rgba(27,37,41,.92) !important;
}


/* LEFT */

.gh-city-v2-carousel-shell
[data-gh-city-v2-carousel-prev]:not([disabled]) {
  left: 6px !important;
}

.gh-city-v2-carousel-shell
[data-gh-city-v2-carousel-prev]:not([disabled])::before {
  transform:
    translate(-38%, -50%)
    rotate(-135deg) !important;
}


/* RIGHT */

.gh-city-v2-carousel-shell
[data-gh-city-v2-carousel-next]:not([disabled]) {
  right: 6px !important;
}

.gh-city-v2-carousel-shell
[data-gh-city-v2-carousel-next]:not([disabled])::before {
  transform:
    translate(-62%, -50%)
    rotate(45deg) !important;
}


/* EDGE: HIDE */

.gh-city-v2-carousel-shell
.gh-city-v2-carousel-btn[disabled] {
  display: none !important;

  opacity: 0 !important;
  visibility: hidden !important;

  pointer-events: none !important;
}


/* MOBILE ARROWS */

@media (max-width: 767px) {

  .gh-city-v2-carousel-shell
  .gh-city-v2-carousel-btn:not([disabled]) {
    width: 36px !important;
    height: 36px !important;
  }

  .gh-city-v2-carousel-shell
  [data-gh-city-v2-carousel-prev]:not([disabled]) {
    left: 3px !important;
  }

  .gh-city-v2-carousel-shell
  [data-gh-city-v2-carousel-next]:not([disabled]) {
    right: 3px !important;
  }
}


/* =========================================================
   MASTER 15B-6F — YOUTUBE EDGE CHEVRONS

   Без круга.
   Без рамки.
   Без box-shadow.
   Без blur.

   Только большой chevron + лёгкое затухание края.
   ========================================================= */


/* Общая кликабельная зона */

.gh-city-v2-carousel-shell
.gh-city-v2-carousel-btn:not([disabled]) {
  position: absolute !important;

  top: 50% !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 48px !important;
  height: 92px !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  box-shadow: none !important;

  opacity: 1 !important;
  visibility: visible !important;

  transform:
    translateY(-50%) !important;

  pointer-events: auto !important;

  overflow: visible !important;

  color: transparent !important;
  font-size: 0 !important;

  cursor: pointer !important;
}


/* LEFT — лёгкое белое затухание от края */

.gh-city-v2-carousel-shell
[data-gh-city-v2-carousel-prev]:not([disabled]) {
  left: 0 !important;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.94) 0%,
      rgba(255,255,255,.72) 38%,
      rgba(255,255,255,0) 100%
    ) !important;
}


/* RIGHT */

.gh-city-v2-carousel-shell
[data-gh-city-v2-carousel-next]:not([disabled]) {
  right: 0 !important;

  background:
    linear-gradient(
      270deg,
      rgba(255,255,255,.94) 0%,
      rgba(255,255,255,.72) 38%,
      rgba(255,255,255,0) 100%
    ) !important;
}


/* Сам chevron */

.gh-city-v2-carousel-shell
.gh-city-v2-carousel-btn:not([disabled])::before {
  content: "" !important;

  position: absolute !important;

  top: 50% !important;
  left: 50% !important;

  display: block !important;

  width: 16px !important;
  height: 16px !important;

  border-top:
    3px solid rgba(90,96,100,.62) !important;

  border-right:
    3px solid rgba(90,96,100,.62) !important;
}


/* LEFT CHEVRON */

.gh-city-v2-carousel-shell
[data-gh-city-v2-carousel-prev]:not([disabled])::before {
  transform:
    translate(-28%, -50%)
    rotate(-135deg) !important;
}


/* RIGHT CHEVRON */

.gh-city-v2-carousel-shell
[data-gh-city-v2-carousel-next]:not([disabled])::before {
  transform:
    translate(-72%, -50%)
    rotate(45deg) !important;
}


/* Hover — только чуть темнее стрелка */

@media (hover: hover) and (pointer: fine) {

  .gh-city-v2-carousel-shell
  .gh-city-v2-carousel-btn:not([disabled]):hover {
    border: 0 !important;
    box-shadow: none !important;
  }

  .gh-city-v2-carousel-shell
  .gh-city-v2-carousel-btn:not([disabled]):hover::before {
    border-top-color:
      rgba(55,61,65,.82) !important;

    border-right-color:
      rgba(55,61,65,.82) !important;
  }
}


/* На конце карусели кнопки нет */

.gh-city-v2-carousel-shell
.gh-city-v2-carousel-btn[disabled] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}


/* MOBILE */

@media (max-width: 767px) {

  .gh-city-v2-carousel-shell
  .gh-city-v2-carousel-btn:not([disabled]) {
    width: 38px !important;
    height: 74px !important;
  }

  .gh-city-v2-carousel-shell
  .gh-city-v2-carousel-btn:not([disabled])::before {
    width: 12px !important;
    height: 12px !important;

    border-top-width: 2px !important;
    border-right-width: 2px !important;
  }
}