/* ГЛАВНАЯ СТРАНИЦА ПО КАНВАСУ.
 * Файл накапливает блоки главной по циклам редизайна; каждый блок отделён
 * заголовком с номером цикла и числами, снятыми с бордов.
 * Грузится ПОСЛЕ зеркала темы (см. theme-global.tsx).
 */

/* ══ Цикл 3. Строка под баннерами: заголовок + чипсы ═══════════════════
 * desktop: высота 128, поля 0 80 20, сетка 1fr auto, промежуток 40
 *          H1 34/600 Chillax lh 1.12 · подзаголовок 16/1.6, ширина ≤ 560
 *          чипсы 44 высотой, поля 0 16, радиус 12, фон #2E005F,
 *          рамка 1px rgba(255,255,255,.16), 13/600, промежуток 10
 * mobile:  поля 18 16 16, колонка, промежуток 12 · H1 26/600 lh 1.18
 *          подзаголовок 15/1.6 · чипсы переносятся, промежуток 8
 *          кнопка «Shop Bestsellers» 48, контурная — ТОЛЬКО здесь
 */
.dz-hero-copy {
  background: #2a005e;
}
.dz-hc__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px;
  align-items: center;
  padding: 0 80px 20px;
  box-sizing: border-box;
  min-height: 128px;
}
.dz-hc__copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dz-hc__h1 {
  margin: 0;
  font-family: var(--dz-font-display, "Chillax", sans-serif);
  font-weight: 600;
  font-size: 34px;
  line-height: 1.12;
  color: #ffffff;
  letter-spacing: normal;
  text-transform: none;
}
.dz-hc__sub {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
  max-width: 560px;
}
.dz-hc__chips {
  display: flex;
  gap: 10px;
  align-items: center;
}
.dz-hc__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  background: #2e005f;
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
  box-sizing: border-box;
}
.dz-hc__ico {
  width: 16px;
  height: 16px;
  flex: none;
}
/* Кнопка мобильного ряда: контурная по TokensSpec. */
.dz-hc__cta {
  display: none;
}

@media screen and (max-width: 989px) {
  .dz-hc__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 18px 16px 16px;
    min-height: 0;
  }
  .dz-hc__h1 {
    font-size: 26px;
    line-height: 1.18;
  }
  .dz-hc__sub {
    font-size: 15px;
    max-width: none;
  }
  .dz-hc__chips {
    flex-wrap: wrap;
    gap: 8px;
  }
  .dz-hc__chip {
    min-height: 44px;
    height: auto;
    padding: 0 14px;
  }
  .dz-hc__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    border-radius: 12px;
    border: 1.5px solid #f2ff00;
    background: transparent;
    color: #f2ff00;
    font-family: var(--dz-font-display, "Chillax", sans-serif);
    font-weight: 600;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
    box-sizing: border-box;
  }
}

/* ══ Цикл 4. Категории ════════════════════════════════════════════════
 * desktop: контейнер 1280 (поля 80), сетка 5 колонок, gap 14
 *          чипс 76 высотой, радиус 12, фон #2E005F,
 *          рамка 1px rgba(255,255,255,.22), поля 0 14
 *          иконка 20×20 (обводка 2), зазор 8, текст 14/600 в одну строку
 *          шеврон 14×14, прозрачность .6, прижат вправо
 *          наведение: рамка #F2FF00, фон #38007A
 *          нажатие: фон #1E0045, текст и рамка #F2FF00
 * mobile:  контейнер 358 (поля 16), 3 колонки, gap 8
 *          плитка 104 высотой, иконка 24 сверху, зазор 6,
 *          подпись 12/600 по центру, до двух строк
 */
.dz-categories {
  background: #2a005e;
  padding: 0 80px 24px;
  box-sizing: border-box;
}
.dz-cat__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  max-width: 1280px;
  margin: 0 auto;
}
.dz-cat__chip {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 76px;
  padding: 0 14px;
  border-radius: 12px;
  background: #2e005f;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #ffffff;
  text-decoration: none;
  box-sizing: border-box;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.dz-cat__ico {
  width: 20px;
  height: 20px;
  flex: none;
}
.dz-cat__label {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dz-cat__chev {
  width: 14px;
  height: 14px;
  flex: none;
  margin-left: auto;
  opacity: 0.6;
}
.dz-cat__chip:hover {
  border-color: #f2ff00;
  background: #38007a;
  color: #ffffff;
}
.dz-cat__chip:active {
  background: #1e0045;
  border-color: #f2ff00;
  color: #f2ff00;
}
/* Чипс без коллекции не притворяется ссылкой. */
.dz-cat__chip--nolink {
  cursor: default;
}
.dz-cat__chip--nolink:hover {
  border-color: rgba(255, 255, 255, 0.22);
  background: #2e005f;
}

@media screen and (max-width: 989px) {
  .dz-categories {
    padding: 0 16px 20px;
  }
  .dz-cat__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .dz-cat__chip {
    height: 104px;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 8px;
    text-align: center;
  }
  .dz-cat__ico {
    width: 24px;
    height: 24px;
  }
  .dz-cat__label {
    font-size: 12px;
    white-space: normal;
    overflow: visible;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* Шеврон — приём десктопной строки, на плитке он лишний. */
  .dz-cat__chev {
    display: none;
  }
}

/* ══ Цикл 5. Ряд акции «Buy 3, Get 1 Free» ════════════════════════════
 * Геометрия канваса: поля страницы 80, сетка 1280, четыре колонки с
 * промежутком 24 → карточка ровно 302 (4×302 + 3×24 = 1280).
 * ★ Ширину режут ДВА контейнера сразу: сама секция (max-width 1200,
 *   поля 50) и slider-component.page-width-desktop внутри неё (те же 1200
 *   и 50). Правка одного давала 244 вместо 302 — поля складывались.
 *   Поэтому поля живут только на секции, а внутренние обнулены.
 */
:is(#shopify-section-template--dz_deal_row_b3g1, #shopify-section-template--dz_deal_row_b2g1, #shopify-section-template--dz_deal_row_b1g1).shopify-section {
  max-width: none !important;
  padding-left: 80px !important;
  padding-right: 80px !important;
}
:is(#shopify-section-template--dz_deal_row_b3g1, #shopify-section-template--dz_deal_row_b2g1, #shopify-section-template--dz_deal_row_b1g1) .page-width,
:is(#shopify-section-template--dz_deal_row_b3g1, #shopify-section-template--dz_deal_row_b2g1, #shopify-section-template--dz_deal_row_b1g1) .page-width-desktop,
:is(#shopify-section-template--dz_deal_row_b3g1, #shopify-section-template--dz_deal_row_b2g1, #shopify-section-template--dz_deal_row_b1g1) slider-component {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
:is(#shopify-section-template--dz_deal_row_b3g1, #shopify-section-template--dz_deal_row_b2g1, #shopify-section-template--dz_deal_row_b1g1) #product-grid,
:is(#shopify-section-template--dz_deal_row_b3g1, #shopify-section-template--dz_deal_row_b2g1, #shopify-section-template--dz_deal_row_b1g1) .grid {
  gap: 24px !important;
  column-gap: 24px !important;
}
/* ★ Сетка темы — не grid, а flex со слайдерной арифметикой:
   li { max-width: calc(25% - 6px) } посчитано под промежуток 8. С нашим
   промежутком 24 карточка выходила 314 и ряд переполнялся. Ширина обязана
   считаться от того же промежутка: 25% − 18 при gap 24. */
:is(#shopify-section-template--dz_deal_row_b3g1, #shopify-section-template--dz_deal_row_b2g1, #shopify-section-template--dz_deal_row_b1g1) #product-grid > li,
:is(#shopify-section-template--dz_deal_row_b3g1, #shopify-section-template--dz_deal_row_b2g1, #shopify-section-template--dz_deal_row_b1g1) .grid > li {
  max-width: calc(25% - 18px) !important;
  width: calc(25% - 18px) !important;
}
:is(#shopify-section-template--dz_deal_row_b3g1, #shopify-section-template--dz_deal_row_b2g1, #shopify-section-template--dz_deal_row_b1g1) .collection__title h2 {
  font-size: 26px;
  line-height: 1.15;
  margin: 0;
}
/* ★ Канвас показывает статичный ряд из четырёх: стрелок и полосы прокрутки
   под ним нет. Заголовок ряда прижат влево, как на борде. */
.vp2-home .slider-buttons,
.vp2-home .slider-counter,
.vp2-home .slider__button,
.vp2-home .collection__slider-progress-bar,
.vp2-home progress.slider-progress-bar {
  display: none !important;
}
.vp2-home .collection__title,
.vp2-home .collection__title h2,
.vp2-home .title-wrapper--self-padded-tablet-down {
  text-align: left !important;
  justify-content: flex-start !important;
}

@media screen and (max-width: 989px) {
  /* ряд «More prerolls» под тройкой: на мобильном карточки начинались на x=27 при
     секции на 16 — тот же контейнер, что у рядов акций */
  #shopify-section-template--featured_collection_NQkVkD.shopify-section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  #shopify-section-template--featured_collection_NQkVkD .page-width,
  #shopify-section-template--featured_collection_NQkVkD .page-width-desktop,
  #shopify-section-template--featured_collection_NQkVkD slider-component {
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  :is(#shopify-section-template--dz_deal_row_b3g1, #shopify-section-template--dz_deal_row_b2g1, #shopify-section-template--dz_deal_row_b1g1).shopify-section {
    padding-left: 16px !important;
    padding-right: 16px !important;
    /* тема даёт padding_top/bottom только ≥861px; на мобильном три ряда подряд
       слипались (кнопка «Shop the deal» в 4 px от заголовка следующего ряда) */
    padding-bottom: 22px !important;
  }
  :is(#shopify-section-template--dz_deal_row_b3g1, #shopify-section-template--dz_deal_row_b2g1, #shopify-section-template--dz_deal_row_b1g1) #product-grid,
  :is(#shopify-section-template--dz_deal_row_b3g1, #shopify-section-template--dz_deal_row_b2g1, #shopify-section-template--dz_deal_row_b1g1) .grid {
    gap: 12px !important;
    column-gap: 12px !important;
  }
  :is(#shopify-section-template--dz_deal_row_b3g1, #shopify-section-template--dz_deal_row_b2g1, #shopify-section-template--dz_deal_row_b1g1) #product-grid > li,
  :is(#shopify-section-template--dz_deal_row_b3g1, #shopify-section-template--dz_deal_row_b2g1, #shopify-section-template--dz_deal_row_b1g1) .grid > li {
    max-width: calc(50% - 6px) !important;
    width: calc(50% - 6px) !important;
  }
  :is(#shopify-section-template--dz_deal_row_b3g1, #shopify-section-template--dz_deal_row_b2g1, #shopify-section-template--dz_deal_row_b1g1) .collection__title h2 {
    font-size: 22px;
  }
}

/* ══ Цикл 6. Полоса доверия и отзывов ═════════════════════════════════
 * desktop: карточка 80 высотой, фон #1E0045, рамка 1px rgba(255,255,255,.16),
 *          радиус 20, поля 0 28, промежуток 24
 *          звёзды 18 (#FFD400), обещание 13/600 с щитом 15
 *          разделитель 1×44 rgba(255,255,255,.2)
 *          кружок инициалов 40, фон #2E005F, рамка rgba(255,255,255,.22), 13/800
 *          цитата 14/1.4 rgba(255,255,255,.92) · подпись 12 rgba(255,255,255,.65)
 * mobile:  карточка 172, колонка, поля 14 16, промежуток 7, звёзды 16,
 *          отзывы одной строкой 13/1.45 с «— Имя»
 */
.dz-reviews {
  background: #2a005e;
  padding: 8px 80px 24px;
  box-sizing: border-box;
}
.dz-rv__card {
  max-width: 1280px;
  margin: 0 auto;
  height: 80px;
  background: #1e0045;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 28px;
  box-sizing: border-box;
}
.dz-rv__promise {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: none;
}
.dz-rv__stars {
  display: flex;
  gap: 3px;
  align-items: center;
}
.dz-rv__star {
  width: 18px;
  height: 18px;
  flex: none;
}
.dz-rv__promise-txt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
}
.dz-rv__shield {
  width: 15px;
  height: 15px;
  flex: none;
}
.dz-rv__divider {
  width: 1px;
  height: 44px;
  background: rgba(255, 255, 255, 0.2);
  flex: none;
}
.dz-rv__item {
  display: flex;
  gap: 12px;
  align-items: center;
  flex: 1;
  min-width: 0;
}
.dz-rv__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #2e005f;
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: #ffffff;
  flex: none;
  box-sizing: border-box;
}
.dz-rv__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.dz-rv__quote {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.92);
}
.dz-rv__name {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
}
.dz-rv__line {
  display: none;
}

@media screen and (max-width: 989px) {
  .dz-reviews {
    padding: 8px 16px 16px;
  }
  .dz-rv__card {
    height: auto;
    min-height: 172px;
    flex-direction: column;
    align-items: stretch;
    gap: 7px;
    padding: 14px 16px;
    border-radius: 20px;
  }
  .dz-rv__promise {
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }
  .dz-rv__star {
    width: 16px;
    height: 16px;
  }
  .dz-rv__stars {
    gap: 2px;
  }
  .dz-rv__divider {
    display: none;
  }
  .dz-rv__item {
    display: block;
    flex: none;
  }
  /* На узком экране кружок и двухстрочный блок уступают место строке. */
  .dz-rv__avatar,
  .dz-rv__body {
    display: none;
  }
  .dz-rv__line {
    display: block;
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.92);
  }
  .dz-rv__line-name {
    color: rgba(255, 255, 255, 0.65);
  }
}

/* ══ Цикл 7. «Shop by collections» — лента из двадцати чипсов ══════════
 * desktop: блок 132, поля 20 0 8 80, промежуток 14
 *          H2 26/600 Chillax · круглая стрелка 40, рамка 1.5px #F2FF00
 *          чипс 44, поля 0 16, радиус 12, фон #2E005F,
 *          рамка 1px rgba(255,255,255,.22), 14/600, промежуток 10
 * mobile:  блок 118, поля 16 0 8 16, H2 22, чипсы те же
 * ★ Последний чипс обрезан краем — это и есть указатель прокрутки.
 */
.dz-collections {
  background: #2a005e;
  padding: 20px 0 8px 80px;
  box-sizing: border-box;
}
.dz-col__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  padding-right: 80px;
}
.dz-col__title {
  margin: 0;
  font-family: var(--dz-font-display, "Chillax", sans-serif);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.1;
  color: #ffffff;
  text-transform: none;
  letter-spacing: normal;
}
.dz-col__more {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 999px;
  border: 1.5px solid #f2ff00;
  color: #f2ff00;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.dz-col__more svg {
  width: 18px;
  height: 18px;
}
.dz-col__strip {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  overflow-x: auto;
  overflow-y: hidden; /* иначе колесо листает ленту, а не страницу */
  scrollbar-width: none;
  padding-bottom: 4px;
}
.dz-col__strip::-webkit-scrollbar {
  display: none;
}
.dz-col__chip {
  flex: none;
  height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  background: #2e005f;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #ffffff;
  text-decoration: none;
  box-sizing: border-box;
}
.dz-col__chip:hover {
  border-color: #f2ff00;
  background: #38007a;
}

@media screen and (max-width: 989px) {
  .dz-collections {
    padding: 16px 0 8px 16px;
  }
  .dz-col__head {
    height: 32px;
    padding-right: 16px;
  }
  .dz-col__title {
    font-size: 22px;
  }
  .dz-col__more {
    width: 32px;
    height: 32px;
  }
  .dz-col__strip {
    margin-top: 10px;
  }
}

/* ══ Цикл 8. Промо-блоки (шесть пар «текст + ряд карточек») ════════════
 * Канвас показывает ОДИН такой блок — «The new 3.5g Smashers are here» —
 * и владелец сказал: «также должны выглядеть все остальны такие же блоки».
 * Поэтому правила общие для всех промо-блоков главной, а не для одного id.
 *
 * desktop: блок 420, поля 28 80, сетка 1fr 520, промежуток 40
 *          кикер 12/800 ls .1em #F49BF9
 *          H2 Chillax 600 · 32 · lh 1.12
 *          текст 15/1.55 rgba(255,255,255,.92), ширина ≤ 440
 *          цена: From Chillax 600 22 · зачёркнутая 14 · Save 13/800 #F2FF00
 *          кнопка контурная 52, поля 0 28, радиус 12, рамка 1.5px #F2FF00
 *          картинка ≤ 364 в высоту
 *   ряд:   поля 8 80 24, заголовок 22, сетка 4 колонки, промежуток 24
 * mobile:  одна колонка, поля 16, H2 24, кнопка 48
 */
/* ★★ Портированная секция кладёт картинку и текст СТОЛБИКОМ: её сетка —
   flex-wrap, и media-item занимает всю ширину (940×940). Канвас требует
   两 колонки: текст слева, картинка справа 520. Поэтому сетку переводим в
   grid принудительно, а «резиновую» подложку картинки (padding-bottom +
   абсолютное позиционирование) отключаем — иначе высота блока считается от
   пропорций картинки, а не от содержимого. */
/* ★★ Доводка 2026-09-01 по снимкам владельца: «картинка вправо сдвинута, а
   текст и кнопка влево — не нравится». Сетка 1fr 520 на всю ширину 1280
   разводила половины по краям, посередине оставалось ~500 px пустоты.
   Теперь блок — ПАНЕЛЬ шириной ≤ 1200 (фон #1E0045, рамка, радиус 20 —
   словарь FAQ/отзывов), колонки 1fr 440 с промежутком 48: картинка стоит
   вплотную к текстовой колонке, а не к краю экрана. */
.vp2-home div[class*="image_with_text"] .page-width {
  max-width: 1360px !important; /* 1200 панели + поля 80 с двух сторон */
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 80px !important;
  padding-right: 80px !important;
}
.vp2-home .image-with-text {
  max-width: none !important;
  margin: 0 !important;
  background: #1e0045;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  padding: 40px 56px;
  box-sizing: border-box;
}
.vp2-home .image-with-text__grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 440px;
  gap: 48px;
  align-items: center;
  min-height: 0;
}
/* ★ Ритм: над панелью было 80 px + пустота центровки внутри блока 420 —
   владелец: «очень большие расстояния сверху и снизу». Панель сама несёт
   воздух (поля 40), поэтому зазор до соседей меньше: сверху 48, а ряд
   карточек под панелью начинается через 24. */
.vp2-home [class*="image_with_text"][class*="-padding"] {
  padding-top: 48px !important;
  padding-bottom: 0 !important;
}
.vp2-home [class*="featured_collection_"][class*="-padding"] {
  padding-top: 24px !important;
}
/* ★ Ряд карточек перед панелью тащит за собой margin 25 от `.collection`
   темы — над панелью получалось 73 вместо 48. Снимаем только у рядов, за
   которыми идёт промо-блок: остальные швы страницы не трогаем. */
.vp2-home .section-featured-product:has(+ [id*="image_with_text"]) .collection,
.vp2-home .section-featured-product:has(+ [id*="image_with_text"]) .grid {
  margin-bottom: 0 !important;
}
/* ★ Два экземпляра везли из Shopify custom_css с `text-align: right` и
   `<strong>` в заголовке — блоки выглядели по-разному. Один вид на все. */
.vp2-home .image-with-text__content > *,
.vp2-home .image-with-text__content .image-with-text__text {
  text-align: left !important;
  align-self: flex-start !important;
}
.vp2-home .image-with-text__heading strong {
  font-weight: inherit;
}
.vp2-home .image-with-text__media-item {
  order: 2;
  max-width: none !important;
  width: auto !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vp2-home .image-with-text__text-item {
  order: 1;
  max-width: none !important;
  width: auto !important;
}
.vp2-home .image-with-text__media {
  position: static !important;
  padding-bottom: 0 !important;
  height: auto !important;
  background: transparent !important;
}
.vp2-home .image-with-text__media img {
  position: static !important;
  width: auto !important;
  height: auto !important;
  max-height: 320px;
  max-width: 100%;
  object-fit: contain;
}
.vp2-home .image-with-text__content {
  gap: 12px;
  padding: 0;
  align-items: flex-start;
}
.vp2-home .image-with-text__heading {
  font-family: var(--dz-font-display, "Chillax", sans-serif) !important;
  font-weight: 600 !important;
  font-size: 32px !important;
  line-height: 1.12 !important;
  margin: 0;
  text-transform: none;
}
/* ★ Тема даёт тексту margin 20px 140px — на канвасе абзац стоит по одной
   левой кромке с заголовком и кнопкой, поэтому боковые поля снимаем. */
.vp2-home .image-with-text__text {
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
  max-width: 440px;
  margin: 0 !important;
}
.vp2-home .image-with-text__heading {
  margin-bottom: 0 !important;
}
/* ★ У двух блоков кнопка уезжала вправо на 567 px: это поле из
   собственного custom_css экземпляра секции, доехавшего с Shopify.
   Канвас держит кнопку по левой кромке, поэтому боковые поля снимаем. */
.vp2-home .image-with-text__content .button {
  margin: 4px 0 0 0 !important;
}
.vp2-home .image-with-text__content .button {
  height: 52px;
  padding: 0 28px;
  border-radius: 12px;
  border: 1.5px solid #f2ff00 !important;
  background: transparent !important;
  color: #f2ff00 !important;
  font-family: var(--dz-font-display, "Chillax", sans-serif) !important;
  font-weight: 600;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
}
.dz-promo-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.dz-promo-price__from {
  font-family: var(--dz-font-display, "Chillax", sans-serif);
  font-weight: 600;
  font-size: 22px;
  color: #ffffff;
}
.dz-promo-price__was {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: line-through;
}
.dz-promo-price__save {
  color: #f2ff00;
  font-size: 13px;
  font-weight: 800;
}
.vp2-home .image-with-text__media img {
  max-height: 320px;
  width: auto;
  height: auto;
  object-fit: contain;
}

@media screen and (max-width: 989px) {
  .vp2-home div[class*="image_with_text"] .page-width {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .vp2-home .image-with-text__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    min-height: 0;
  }
  .vp2-home .image-with-text__media-item {
    order: 1;
  }
  .vp2-home .image-with-text__text-item {
    order: 2;
  }
  .vp2-home .image-with-text {
    padding: 20px 16px;
    border-radius: 16px;
  }
  .vp2-home .image-with-text__media img {
    max-height: 240px;
  }
  .vp2-home .image-with-text__content {
    padding: 0;
  }
  .vp2-home [class*="image_with_text"][class*="-padding"] {
    padding-top: 32px !important;
  }
  /* Тема центрирует абзац и цену на мобильном, заголовок при этом слева —
     один край на всё. */
  .vp2-home .image-with-text__content *,
  .vp2-home .image-with-text__text p {
    text-align: left !important;
  }
  .vp2-home .image-with-text__heading {
    font-size: 24px !important;
  }
  .vp2-home .image-with-text__content .button {
    height: 48px;
    font-size: 15px;
  }
}


/* ══ Цикл 11. Тройки промо-баннеров (2026-09-12) ═══════════════════════
 * Замена шести блоков image-with-text: один широкий баннер + две плитки,
 * та же сетка, что у hero (1500 / промежуток 12 / радиус 10), чтобы
 * читались одной семьёй. Картинка без текста; заголовок, подпись и
 * кнопка — HTML снизу по центру, как у hero-баннеров.
 * ★ Пропорции карточек фиксированы aspect-ratio — иначе до загрузки
 *   картинки блок схлопывается и страница прыгает (CLS).
 * ★ Подложка-градиент снизу держит контраст текста на любом фоне.
 */
.vp2-home .dz-promo {
  /* тот же контейнер, что у рядов карточек (поля 80 → сетка 1280): ревью 2026-09-12
     поймало «тройка во всю ширину, ряд под ней в контейнере» */
  max-width: none;
  margin: 0 auto;
  /* 2026-09-16 партия 8: воздух сверху 56 — тройка открывает пару «тройка + её ряд»,
     а ряд под ней (padding 0, кнопка «View all» упирается в низ секции) даёт лишь 8 px;
     раньше между парами было 8/4 px, внутри пары 24 — группы слипались не там */
  padding: 56px 80px 8px;
  box-sizing: border-box;
}
.vp2-home .dz-promo__head { padding: 0 0 12px; }
.vp2-home .dz-promo__title {
  font-family: var(--dz-font-display, "Chillax", sans-serif);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.15;
  margin: 0;
  color: #fff;
  text-align: left;
}
.vp2-home .dz-promo__grid {
  display: grid;
  /* ★ minmax(0, 1fr): с голым 1fr колонка не ужимается ниже min-content, а у
     широкой карточки min-content = ширина по aspect-ratio от высоты ряда
     (818 при плитках по 345). Как в hero: широкая берёт высоту плиток,
     картинка режется по бокам (object-fit: cover), пропорция только на
     мобильном, где она одна в столбце. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}
.vp2-home .dz-promo__tiles {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
}
.vp2-home .dz-promo__card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 10px;
  background: #4d008c;
  isolation: isolate;
  text-decoration: none;
  color: #fff;
  min-width: 0;
}
.vp2-home .dz-promo__card--big { aspect-ratio: auto; min-height: 0; }
.vp2-home .dz-promo__card--tile { aspect-ratio: 880 / 1168; }
.vp2-home .dz-promo__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.vp2-home .dz-promo__card:hover .dz-promo__img { transform: scale(1.025); }
.vp2-home .dz-promo__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(18, 0, 48, .55) 0%, rgba(18, 0, 48, .2) 14%, rgba(18, 0, 48, 0) 28%);
  pointer-events: none;
}
.vp2-home .dz-promo__txt {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 5.5%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}
.vp2-home .dz-promo__headline {
  font-family: var(--dz-font-display, "Chillax", sans-serif);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.02;
  letter-spacing: .01em;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .35), 0 6px 18px rgba(0, 0, 0, .45);
  text-wrap: balance;
}
.vp2-home .dz-promo__card--big .dz-promo__headline { font-size: clamp(24px, 3.4vw, 54px); }
.vp2-home .dz-promo__card--tile .dz-promo__headline { font-size: clamp(16px, 1.75vw, 30px); }
/* заголовок запечён в картинку (стиль hero): в HTML остаётся только для
   читалок и как текст ссылки — визуально скрыт, без display:none */
.vp2-home .dz-promo__headline--baked {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.vp2-home .dz-promo__card--baked .dz-promo__txt { bottom: 4.5%; gap: 0; }
.vp2-home .dz-promo__card--baked .dz-promo__sub { display: none; }
.vp2-home .dz-promo__sub {
  font-family: var(--dz-font-body, "Outfit", sans-serif);
  font-weight: 500;
  color: rgba(255, 255, 255, .9);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
}
.vp2-home .dz-promo__card--big .dz-promo__sub { font-size: clamp(13px, 1.1vw, 18px); }
.vp2-home .dz-promo__card--tile .dz-promo__sub { font-size: clamp(11px, .85vw, 14px); }
.vp2-home .dz-promo__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin-top: 4px;
  height: 44px; /* = кнопка hero: одна семья на странице */
  padding: 0 26px;
  border-radius: var(--dz-r-ctl, 12px);
  background: var(--dz-accent, #f2ff00);
  color: var(--dz-on-accent, #2a005e);
  font-family: var(--dz-font-display, "Chillax", sans-serif);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: var(--dz-cta-shadow, 0 1px 2px rgba(0, 0, 0, .25));
  transition: background .15s, transform .15s;
}
.vp2-home .dz-promo__card--tile .dz-promo__cta { height: 44px; padding: 0 22px; font-size: 15px; }
/* заголовок запечён в картинку → снизу остаётся только кнопка, на той же высоте, что у hero */
.vp2-home .dz-promo__card--baked .dz-promo__txt { bottom: 16px; }
.vp2-home .dz-promo__card:hover .dz-promo__cta { background: var(--dz-accent-hover, #ffd400); transform: translateY(-1px); }

@media screen and (max-width: 989px) {
  .vp2-home .dz-promo { padding: 48px 16px 8px; }
  .vp2-home .dz-promo__cta { height: 36px; padding: 0 16px; font-size: 12px; }
  .vp2-home .dz-promo__card--tile .dz-promo__cta { height: 32px; padding: 0 12px; font-size: 11px; }
  .vp2-home .dz-promo__card--baked .dz-promo__txt { bottom: 12px; }
  .vp2-home .dz-promo__title { font-size: 22px; }
}
@media screen and (max-width: 749px) {
  .vp2-home .dz-promo { padding: 40px 16px 8px; }
  .vp2-home .dz-promo__grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  /* мобильная картинка широкой карточки — своя, почти квадратная (1000×1100):
     в 16:9 при ширине 366 текст съедал бы половину высоты */
  /* 2026-09-16 (владелец): широкий баннер тройки на мобильном = пропорция hero-слайда (1765/1000), та же 16:9-картинка, что на десктопе */
  .vp2-home .dz-promo__card--big { aspect-ratio: 1765 / 1000; }
  /* 2026-09-14 (владелец): на мобильном в тройке только широкий баннер; hero не трогаем */
  .vp2-home .dz-promo__tiles { display: none; }
  .vp2-home .dz-promo__card--big .dz-promo__headline { font-size: clamp(22px, 7vw, 34px); }
  .vp2-home .dz-promo__card--big .dz-promo__sub { font-size: 13px; }
  .vp2-home .dz-promo__card--big .dz-promo__cta { height: 24px; padding: 0 10px; font-size: 10px; }
  .vp2-home .dz-promo__card--tile .dz-promo__headline { font-size: clamp(13px, 4.2vw, 18px); }
  .vp2-home .dz-promo__card--tile .dz-promo__sub { display: none; }
  .vp2-home .dz-promo__card--tile .dz-promo__cta { height: 28px; padding: 0 10px; font-size: 10px; }
  .vp2-home .dz-promo__txt { gap: 4px; bottom: 5%; }
  .vp2-home .dz-promo__card--baked .dz-promo__txt { bottom: 6px; }
}

/* ── Партия 12 (2026-09-16): на мобильном блок категорий стоит ПОД отзывами, на ПК — где был.
   Владелец: «блок меню в мобильном перенеси в область под отзывы… на пк пусть будет где есть».
   Разметка и index.json не тронуты: обёртка .vp2-home (в page.tsx у неё inline display: contents)
   на ≤749 становится колонкой-flex, порядок задаётся order: всё до отзывов = 0, категории = 1,
   всё после отзывов = 2. Откат — удалить этот блок. */
@media screen and (max-width: 749px) {
  .vp2-home.dz-page { display: flex !important; flex-direction: column; }
  /* у троек margin: 0 auto — во flex-колонке авто-поля отменяют растяжение, секция сжималась до 119 px */
  .vp2-home.dz-page > * { width: 100%; min-width: 0; flex: none; }
  /* + 12 px сверху: между карточкой отзывов и плитками было 17 px — тесно рядом с 46 px под блоком */
  .vp2-home > #shopify-section-template--dz_categories_main { order: 1; padding-top: 12px; }
  .vp2-home > #shopify-section-template--dz_reviews_main ~ * { order: 2; }
}