/* ШАПКА И ПОЛОСА ОБЪЯВЛЕНИЯ ПО КАНВАСУ (цикл 2 редизайна главной).
 *
 * Числа сняты с бордов HomeStyleDesktop / HomeStyleMobile:
 *   полоса   desktop 56, mobile 52 · фон #210048 · низ 1px rgba(255,255,255,.16)
 *            текст 13/600 uppercase, разрядка .12em
 *   шапка    desktop 72, поля 0 80, промежуток 32 · логотип 44
 *            пункты меню 14/600 uppercase, разрядка .02em, промежуток 28
 *            поиск 280×44, радиус 14, фон rgba(255,255,255,.06),
 *            рамка 1px rgba(255,255,255,.22)
 *   шапка    mobile 56, поля 0 6 · логотип 36 · иконки 44
 *   бейдж корзины: #F2FF00 на #2A005E, 11/800, 18 высотой, радиус 999
 *
 * ★ Файл грузится ПОСЛЕ зеркала темы — оно раздаёт шапке свои размеры
 *   правилами из base.css, и без !important частные значения темы
 *   выигрывают. Тот же приём, что у бейджей карточки и каруселей.
 * ★ Состав пунктов меню НЕ трогаем: замер показал, что он уже совпадает с
 *   канвасом (шесть видимых, седьмой — служебная плиточная выпадашка со
 *   скрытой подписью).
 */

/* ── Полоса объявления ────────────────────────────────────────────────── */
.utility-bar {
  background: #210048 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16) !important;
  min-height: 56px;
}
/* ★ Внутренняя сетка полосы — фиксированная колонка 1100 px с полями 50:
   на широком экране текст жался к центру этой колонки, а сама полоса
   выглядела «широкой из-за пустой синей ленты» справа от текста. Канвас
   центрует текст по всей ширине полосы. */
.utility-bar .utility-bar__grid {
  max-width: none !important;
  grid-template-columns: minmax(0, 1fr) !important;
  padding-left: 80px !important;
  padding-right: 80px !important;
  min-height: 56px;
  align-items: center;
}
.utility-bar .announcement-bar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
}
/* ★ Текст стоял НЕ по центру полосы: у сообщения от темы min-height 38 px,
   а сама строка занимает 16 — остаток уходил ВНИЗ. Замер: сверху 9 px,
   снизу 32. Отсюда и «сверху полоска маленькая, снизу огромная». */
.utility-bar .announcement-bar__message {
  min-height: 0 !important;
  line-height: 1.25 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.announcement-bar__message {
  padding: 0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #ffffff !important;
  margin: 0;
  text-align: center;
}
@media screen and (max-width: 989px) {
  .utility-bar {
    min-height: 52px;
  }
  .announcement-bar__message {
    letter-spacing: 0.1em;
  }
}

/* ── Шапка ────────────────────────────────────────────────────────────── */
.header-wrapper {
  background: #210048 !important;
}

@media screen and (min-width: 990px) {
  .header {
    max-width: none !important;
    padding: 0 80px !important;
    min-height: 72px;
    align-items: center;
    column-gap: 32px;
  }
  .header__heading-link {
    padding: 0 !important;
    margin: 0 !important;
  }
  .header__heading-logo {
    max-width: none !important;
    height: 44px !important;
    width: auto !important;
  }
  /* ★ Высоту шапки задавала не подпись пункта, а сам контейнер меню: при
     пунктах в 33 px навигация занимала 94. Поэтому высоту держим у трёх
     блоков шапки, а не у текста внутри. */
  .header__inline-menu {
    margin: 0 !important;
    height: 44px;
    display: flex;
    align-items: center;
  }
  .header__inline-menu > .list-menu {
    margin: 0 !important;
    padding: 0 !important;
    align-items: center;
  }
  .header__icons {
    height: 44px;
    align-items: center;
  }
  .header__inline-menu .list-menu--inline {
    gap: 28px;
  }
  /* ★ Галочки-стрелки у пунктов на канвасе НЕТ, а нам они добавляли по
     15 px на пункт плюс зазор — из-за них меню (771 px) не влезало в
     строку на 1280 и 1440 и переносило «CONTACT» вниз. */
  .header__inline-menu .header__menu-item svg,
  .header__inline-menu .header__menu-item .icon-caret {
    display: none !important;
  }
  /* ★ Третий пункт — служебная плиточная выпадашка со скрытой подписью.
     Сам <li> оставался в потоке шириной 0 и съедал ЦЕЛЫЙ зазор: между
     PRODUCTS и COLLECTIONS было вдвое больше, чем между остальными. */
  .header__inline-menu > .list-menu > li:has(> header-menu > details > summary.grid-image-menu) {
    display: none;
  }
  .header__inline-menu .header__menu-item {
    padding: 8px 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }
  /* ══ Цикл F (2026-09-01). Выпадающие панели меню — по UX e-commerce.
     Владелец: «что это разве красиво нормально? надо это реорганизовать всё
     и переделать с точки зрения UX правильного для екомерса — но структуру
     сохрани такую же». Было: панель 250 с градиентом маджента→фиолет,
     радиус 25, пункты капсом без боковых полей, 11 пунктов столбиком,
     вложенные размеры — только после второго клика.
     Стало: панель #1E0045, рамка, радиус 16, тень, поля 12, отступ 8 от
     шапки; пункты Outfit 15/500 обычным регистром, строка 40, поля 14,
     наведение #2E005F; PRODUCTS — три колонки по группам, COLLECTIONS —
     две колонки, вложенные размеры видны сразу. Раскладка панелей — в
     desktop-menu.tsx (MenuPanel). */
  .header__inline-menu .header__submenu.dz-submenu {
    background: #1e0045 !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 16px !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
    padding: 12px !important;
    margin-top: 8px;
    min-width: 200px; /* HOT DEALS с «1+1» иначе выходит панелью в 106 px */
    width: max-content;
    max-width: calc(100vw - 160px);
    left: 0;
  }
  .header__inline-menu .dz-submenu__body {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .dz-menu__list,
  .dz-menu__sub {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 2px;
  }
  .dz-menu--cols-2 .dz-menu__list {
    grid-template-columns: repeat(2, minmax(200px, 1fr));
    column-gap: 12px;
  }
  .dz-menu--mega {
    display: grid;
    /* колонок столько, сколько групп (7-OH & Pseudo / Delta / Mushroom / More) */
    grid-auto-flow: column;
    grid-auto-columns: minmax(190px, max-content);
    column-gap: 24px;
    align-items: start;
  }
  .dz-menu__kicker {
    font-family: var(--dz-font-body, "Outfit", sans-serif);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #f49bf9;
    padding: 8px 14px 6px;
  }
  .header__inline-menu .dz-menu__link,
  .header__inline-menu .dz-menu__label {
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 14px;
    border-radius: 8px;
    font-family: var(--dz-font-body, "Outfit", sans-serif);
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    color: #ffffff;
    text-decoration: none;
    white-space: nowrap;
  }
  .header__inline-menu .dz-menu__link:hover,
  .header__inline-menu .dz-menu__link:focus-visible {
    background: #2e005f;
    text-decoration: none;
    outline: none;
  }
  .header__inline-menu .dz-menu__label {
    cursor: default;
  }
  .header__inline-menu .dz-menu__link--sub {
    height: 34px;
    padding-left: 28px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
  }
  .header__inline-menu .dz-menu__link--all {
    color: #f2ff00;
    font-weight: 600;
  }
  .header__inline-menu .dz-menu__link--all::after {
    content: "→";
    margin-left: 8px;
  }
  /* Открытый пункт верхнего уровня — жёлтым, без подчёркивания темы. */
  .header__inline-menu details[open] > .header__menu-item,
  .header__inline-menu details[open]:hover > .header__menu-item {
    color: #f2ff00;
    text-decoration: none;
  }
  .header__inline-menu details[open] > .header__menu-item span {
    text-decoration: none;
  }
  /* Поиск на десктопе — поле, а не голая лупа. Кликабельная область та же
     <summary>, модальное окно поиска не тронуто. */
  .header__search .header__icon--search {
    /* ★ Без inline-flex тема оставляет кнопке inline-block, и подпись
       поля вываливалась ПОД рамку (замер: поле y=61, подпись y=104). */
    display: inline-flex !important;
    align-items: center;
    width: 280px !important;
    height: 44px !important;
    justify-content: flex-start;
    gap: 10px;
    padding: 0 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-sizing: border-box;
  }
  /* Значок поиска ровно 18 px по канвасу: у темы он 30 и съедал место,
     из-за чего подпись обрезалась на первой букве. */
  .header__search .header__icon--search > span:not(.dz-search-ph) {
    width: 18px;
    height: 18px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .header__search .header__icon--search svg {
    width: 18px;
    height: 18px;
  }
  .header__search .header__icon--search {
    text-decoration: none;
  }
  .dz-search-ph {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    /* Тема добавляет разрядку 0.6 px каждой букве — на строке из тридцати
       двух знаков это лишние 19 px, и подпись переставала помещаться в
       поле (замер: нужно 226 px при доступных 222). */
    letter-spacing: 0;
    line-height: 1.2;
    flex: 1 1 auto;
    white-space: nowrap;
    /* На узком десктопе поле 200 px, а подпись просит 229 — обрезаем
       многоточием, а не выпускаем за рамку. */
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  .header__search .header__icon--search {
    overflow: hidden;
  }
  .header__icons {
    gap: 20px;
    padding-right: 0 !important;
  }
}

@media screen and (max-width: 989px) {
  .header {
    padding: 0 6px !important;
    min-height: 56px;
    align-items: center;
  }
  .header__heading-logo {
    max-width: none !important;
    height: 36px !important;
    width: auto !important;
  }
  /* На узком экране поиск остаётся иконкой — подпись прячем.
     ★ Селектор с родителем и !important: тема объявляет
     `.header__icon span { display: flex }`, и голый класс ей проигрывает. */
  .header__search .dz-search-ph {
    display: none !important;
  }
  .header__heading-link {
    padding: 0 !important;
  }
  /* ★ Колонка иконок в сетке шапки была уже своего содержимого (76 px при
     двух кнопках по 44) — корзину срезало на 6 px правым краем экрана.
     Замер: cart right=396 при окне 390. Ширина по содержимому лечит. */
  /* ★ Колонка иконок в сетке шапки была уже своего содержимого: три
     равные колонки по 94.5 px, а иконок на 88 px при поле 6 — корзину
     срезало правым краем (замер: cart right=396 при окне 390). Лечится
     не шириной иконок, а колонками: бургер по содержимому, логотип
     резиновый, иконки по содержимому. */
  .header {
    /* ★ Колонки заданы ЧИСЛАМИ, а не auto: при auto средняя колонка не
       ужималась (логотип держал 270 px), крайним оставалось 76 при
       нужных 88 — и корзину срезало краем экрана (замер: cart right=396
       при окне 390). 44 + 92 + остаток = ровно ширина содержимого. */
    grid-template-columns: 44px minmax(0, 1fr) 92px !important;
  }
  .header__icons {
    height: 44px;
    align-items: center;
    padding-right: 0 !important;
    /* Тема ставит блоку justify-self: end, и он ужимался до 76 px, а два
       значка занимают 88 — правый вылезал за экран. Растягиваем блок на
       свою колонку и прижимаем значки к правому краю внутри неё. */
    justify-self: stretch !important;
    width: 100%;
    justify-content: flex-end;
  }
  /* ★ И последнее: у самой корзины margin-right: −12px из темы (компенсация
     её прежних полей). Именно эти 12 px выносили значок за край экрана. */
  .header__icons .header__icon--cart {
    margin-right: 0 !important;
  }
}

/* ── Счётчик корзины ──────────────────────────────────────────────────── */
.cart-count-bubble {
  background: #f2ff00 !important;
  color: #2a005e !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px !important;
  box-sizing: border-box;
}

/* ── Узкий десктоп 990–1439: канвасные 80 px полей и зазор 28 не влезают
 * ─────────────────────────────────────────────────────────────────────
 * ★ Замер: на 1280 сумма логотипа, шести пунктов, поля поиска и значков
 * даёт 1243 px при доступных 1120 — «CONTACT» уезжал во вторую строку.
 * Ужимаем поля страницы, зазор меню и поле поиска; кегли из спеки не
 * трогаем — их видно, а пустоту нет.
 * ★ Блок стоит В КОНЦЕ файла НАМЕРЕННО: при равной специфичности
 * выигрывает правило, объявленное позже, а общий блок 990+ задаёт полю
 * поиска 280 px с !important.
 */
@media screen and (min-width: 990px) and (max-width: 1439px) {
  .header {
    padding: 0 40px !important;
    column-gap: 20px;
  }
  .header__inline-menu .list-menu--inline {
    gap: 16px;
  }
  .header__search .header__icon--search {
    width: 200px !important;
  }
  .header__icons {
    gap: 12px;
  }
  .utility-bar .utility-bar__grid {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}

/* ── 990–1439: поиск значком ───────────────────────────────────────────
 * ★ Канвасное поле 280 px с подписью «Search vapes, gummies, prerolls…»
 * живёт только на 1440 и шире. Ниже подпись не помещается ФИЗИЧЕСКИ:
 * замер на 1280 — тексту нужно 222 px, а в ужатом поле остаётся 164.
 * Обрезанная надпись хуже её отсутствия, поэтому здесь поиск сворачивается
 * в значок, как на телефоне, и меню встаёт в одну строку.
 */
@media screen and (min-width: 990px) and (max-width: 1439px) {
  .header {
    padding: 0 24px !important;
    column-gap: 16px;
  }
  .header__inline-menu .list-menu--inline {
    gap: 12px;
  }
  .header__search .header__icon--search {
    width: 44px !important;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: none;
  }
  .header__search .dz-search-ph {
    display: none !important;
  }
}


/* ── МОБИЛЬНОЕ МЕНЮ (партия 9, 2026-09-16) — канвас claude.ai/artifact/DhyeDwoTsBPUeM2iuu9jb7 v9.
   Панель на весь экран, порталом в <body>. Числа с артбордов: верх 60, поиск 48, акции 44,
   строка группы 56, плитка 52 (текстовая 48), чип 44, низ закреплён. */
html.dz-mm-lock, html.dz-mm-lock body { overflow: hidden !important; }
.dz-mm__burger {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 0; margin: 0; color: #ffffff; cursor: pointer; border-radius: 12px;
}
.dz-mm {
  position: fixed; inset: 0; z-index: 10050; display: flex; flex-direction: column;
  background: #210048; color: #ffffff; font-family: var(--dz-font-body, "Outfit", system-ui, sans-serif);
  animation: dz-mm-in 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
  overscroll-behavior: contain; -webkit-tap-highlight-color: transparent;
}
@keyframes dz-mm-in { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes dz-mm-acc { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .dz-mm, .dz-mm__group-body { animation: none !important; } }
@media screen and (min-width: 990px) { .dz-mm { display: none; } }
.dz-mm a { text-decoration: none; }
.dz-mm a:focus-visible, .dz-mm button:focus-visible, .dz-mm input:focus-visible, .dz-mm__burger:focus-visible {
  outline: 2px solid #f2ff00; outline-offset: 2px;
}
.dz-mm__top { height: 60px; flex: none; display: flex; align-items: center; padding: 0 8px 0 6px; }
.dz-mm__top-side { flex: 1 1 0; display: flex; }
.dz-mm__top-side--end { justify-content: flex-end; }
.dz-mm__iconbtn {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 0; color: #ffffff; cursor: pointer; border-radius: 12px;
}
.dz-mm__logo { display: flex; align-items: center; height: 44px; padding: 0 8px; }
.dz-mm__logo img { width: 90px; height: 32px; display: block; }
.dz-mm__body {
  flex: 1 1 0; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 20px; padding: 4px 16px 20px;
}
.dz-mm__search { position: relative; display: flex; margin: 0; }
.dz-mm__search-ico { position: absolute; left: 14px; top: 13px; display: flex; color: rgba(255,255,255,0.72); pointer-events: none; }
.dz-mm__search input {
  width: 100%; height: 48px; box-sizing: border-box; padding: 0 14px 0 44px; margin: 0;
  background: #2e005f; border: 1px solid rgba(255,255,255,0.16); border-radius: 14px;
  color: #ffffff; font-family: inherit; font-size: 16px; appearance: none; -webkit-appearance: none;
}
.dz-mm__search input::placeholder { color: rgba(255,255,255,0.62); }
.dz-mm__deals { display: flex; flex-direction: column; gap: 10px; }
.dz-mm__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: #f49bf9; }
.dz-mm__deals-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dz-mm__deal {
  display: flex; align-items: center; justify-content: center; height: 44px; box-sizing: border-box;
  border-radius: 22px; background: #f2ff00; border: 1px solid #f2ff00; color: #2a005e !important;
  font-size: 14px; font-weight: 700; letter-spacing: 0.2px;
}
.dz-mm__deal--outline { background: transparent; color: #f2ff00 !important; }
.dz-mm__groups { display: flex; flex-direction: column; border-top: 1px solid rgba(255,255,255,0.10); }
.dz-mm__group { border-bottom: 1px solid rgba(255,255,255,0.10); }
.dz-mm__group-btn {
  width: 100%; height: 56px; display: flex; align-items: center; gap: 12px; background: none; border: 0; padding: 0;
  color: #ffffff; cursor: pointer; text-align: left;
  font-family: var(--dz-font-display, "Chillax", "Outfit", system-ui, sans-serif); font-weight: 600; font-size: 18px;
}
.dz-mm__group-ico {
  width: 36px; height: 36px; flex: none; display: flex; align-items: center; justify-content: center;
  background: #2e005f; border-radius: 10px; color: #f2ff00;
}
.dz-mm__group-label { flex: 1 1 auto; }
.dz-mm__group-chev { display: flex; color: rgba(255,255,255,0.72); transition: transform 0.2s ease; }
.dz-mm__group-btn[aria-expanded="true"] .dz-mm__group-chev { transform: rotate(180deg); }
.dz-mm__group-body { display: flex; flex-direction: column; gap: 8px; padding: 0 0 16px; animation: dz-mm-acc 0.18s ease; }
.dz-mm__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dz-mm__tile {
  display: flex; align-items: center; gap: 8px; height: 52px; box-sizing: border-box; padding: 0 12px;
  background: #2e005f; border: 1px solid rgba(255,255,255,0.22); border-radius: 12px;
  color: #ffffff !important; font-size: 14px; font-weight: 600; line-height: 1.2;
}
.dz-mm__tile:active { background: #1e0045; border-color: #f2ff00; }
.dz-mm__tile--text { height: 48px; padding: 0 14px; }
.dz-mm__tile--wide { grid-column: span 2; }
.dz-mm__tile--accent { color: #f2ff00 !important; height: 48px; padding: 0 14px; }
.dz-mm__tile-ico { display: flex; flex: none; }
.dz-mm__tile-label { flex: 1 1 auto; min-width: 0; }
.dz-mm__tile-chev { display: flex; flex: none; opacity: 0.6; }
.dz-mm__tile--accent .dz-mm__tile-chev { opacity: 1; }
/* партия 10: бейдж акции на плитке — как бейдж корзины (11/800, радиус 999) */
.dz-mm__tile-deal {
  display: flex; align-items: center; flex: none; height: 20px; padding: 0 7px; border-radius: 999px;
  background: #f2ff00; color: #2a005e; font-size: 11px; font-weight: 800; letter-spacing: 0.2px;
}
.dz-mm__chiprow { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; }
.dz-mm__chiprow-label { font-size: 12px; font-weight: 600; letter-spacing: 0.3px; color: rgba(255,255,255,0.72); }
.dz-mm__chips { display: grid; gap: 6px; }
.dz-mm__chip {
  display: flex; align-items: center; justify-content: center; height: 44px; box-sizing: border-box; padding: 0 4px;
  border: 1px solid rgba(255,255,255,0.24); border-radius: 22px; color: #ffffff !important;
  font-size: 14px; font-weight: 600; white-space: nowrap;
}
.dz-mm__chip:active { border-color: #f2ff00; color: #f2ff00 !important; }
.dz-mm__more { display: flex; flex-direction: column; gap: 8px; }
.dz-mm__shopall {
  display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px;
  border: 1px solid rgba(255,255,255,0.24); border-radius: 14px; color: #ffffff !important; font-size: 15px; font-weight: 600;
}
.dz-mm__links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dz-mm__link {
  display: flex; align-items: center; justify-content: center; height: 44px; border-radius: 12px;
  color: rgba(255,255,255,0.86) !important; font-size: 14px; font-weight: 500;
}
.dz-mm__foot {
  flex: none; display: flex; flex-direction: column; gap: 10px;
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px)); background: #1e0045; border-top: 1px solid rgba(255,255,255,0.10);
}
.dz-mm__account {
  display: flex; align-items: center; justify-content: center; gap: 10px; height: 48px;
  background: #2e005f; border-radius: 14px; color: #ffffff !important; font-size: 15px; font-weight: 600;
}
.dz-mm__trust { text-align: center; font-size: 12px; color: rgba(255,255,255,0.72); }