/* ==========================================================================
   CMS9 · Тема "Default" — P3 MOBILE polish (Claude-Design sec-mobile)
   Наближає адаптив десктопного DOM до мобільного макета MBHeaderM/MBFooterM:
     1. Мобільна шапка ≤900px: 2 ряди (бургер+лого+кошик / пошук-пілюля), sticky
     2. Bottom-sheet модалка кошика ≤640px (magnificPopup, CSS-only)
     3. Мобільний футер: акордеон колонок посилань (JS у footer.twig ставить
        .dt-acc на колонки і тогглить .is-open на .dt-footer__coltitle)
     4. dt-рестайл pushy-шухляди (.page__mobile — goodlook темна → біла)
     5. Дрібний полiш 390px: герой, статистика 2×2, сітки
   Специфічність: перекриваємо theme.css (.dt-search і т.п.) через
   .dt-header .cls / .page .cls (0,2,0) — без залежності від порядку файлів.
   ========================================================================== */

/* ==========================================================================
   1. MOBILE HEADER ≤900px (MBHeaderM: row1 burger+logo+cart, row2 search)
   ========================================================================== */
@media (max-width: 900px) {
  /* sticky: .page__hgroup — прямий нащадок .page__body (весь скрол-шлях).
     body overflow-x:hidden ламає sticky у Chromium → overflow-x:clip
     (не створює scroll container, кліпить так само). */
  body.page { overflow-x: clip; }
  .page .page__hgroup {
    position: sticky;
    top: 0;
    z-index: 101; /* як у goodlook: над .page__overlay(100), поруч із шухлядою */
    background: #fff !important;
    box-shadow: 0 2px 14px rgba(0, 0, 0, .08) !important; /* б'є theme.css box-shadow:none!important */
  }

  .dt-header .dt-topbar { display: none; }
  .dt-header .dt-catalog { display: none; } /* каталог відкриває бургер (pushy) */

  .dt-header .dt-headmain { flex-wrap: wrap; gap: 10px 12px; padding: 10px 0 12px; }

  /* row 1: burger | logo (по центру) | cart pill */
  .dt-header .dt-burger-wrap { order: 0; margin-right: 0; }
  .dt-header .dt-logo { order: 1; flex: 1 1 auto; justify-content: center; min-width: 0; gap: 9px; }
  .dt-header .dt-logo__img { width: 32px; height: 32px; }
  .dt-header .dt-logo__name { font-size: 16px; letter-spacing: .18em; }
  .dt-header .dt-logo__sub { letter-spacing: .3em; }
  .dt-header .dt-toolbar { order: 2; gap: 12px; }
  .dt-header .dt-tool { display: none; } /* wishlist / compare / login — у шухляді */

  /* cart pill: лише іконка + лічильник (текст прибираємо font-size:0,
     лічильник має власний font-size у theme.css) */
  .dt-header .dt-cart__btn { font-size: 0; gap: 6px; padding: 10px 13px; letter-spacing: 0; }
  .dt-header .dt-cart__count { font-size: 10px; }

  /* row 2: пошук-пілюля на всю ширину (theme.css ховає її ≤640 — повертаємо) */
  .dt-header .dt-search {
    display: flex;
    order: 3;
    flex: 1 1 100%;
    min-height: 42px;
    padding: 10px 18px;
  }
}
/* бургер не потрібен на десктопі 901–991px (там є кнопка каталогу) */
@media (min-width: 901px) {
  .dt-header .dt-burger-wrap { display: none; }
}

/* goodlook-іконки бургера/закриття були color:#fff — на білій шапці невидимі */
.dt-header .toolbar-element,
.dt-header .toolbar-element--active { color: var(--ink); }
.dt-header .toolbar-element__icon { color: var(--ink); width: 24px; height: 22px; }

/* ==========================================================================
   2. CART MODAL → BOTTOM SHEET ≤640px (CSS-only поверх magnificPopup)
   .mfp-wrap > .mfp-container > .mfp-content > .modal.dt.dt-cartmodal
   Модалку кріпимо fixed до низу в'юпорта — обгортки mfp не чіпаємо,
   клік по .mfp-container поза модалкою так само закриває.
   ========================================================================== */
@media (max-width: 640px) {
  .dt.dt-cartmodal {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    background: #fff;
    border-radius: 16px 16px 0 0;
    max-height: 85vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 -20px 60px rgba(0, 0, 0, .35);
    padding-bottom: env(safe-area-inset-bottom, 0);
    animation: dtSheetUp .28s ease-out;
  }
  /* grab-handle як у макеті (sec-mobile bottom sheet) */
  .dt.dt-cartmodal::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    border-radius: var(--pill);
    background: #ddd;
    margin: 10px auto 0;
  }
}
@keyframes dtSheetUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* ==========================================================================
   3. MOBILE FOOTER ≤640px — акордеон колонок посилань
   JS (footer.twig) ставить .dt-acc на колонки з .dt-footer__links і
   тогглить .is-open на .dt-footer__coltitle. Десктоп не зачеплено
   (усе в media query; JS no-op поза ≤640 через matchMedia).
   ========================================================================== */
@media (max-width: 640px) {
  .dt-footer .dt-footer__cols { gap: 14px; padding: 26px 0 0; }

  .dt-footer .dt-acc { border: 1px solid var(--line); border-radius: 10px; padding: 0 14px; }
  .dt-footer .dt-acc > .dt-footer__coltitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 13px 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  /* шеврон */
  .dt-footer .dt-acc > .dt-footer__coltitle::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 1.5px solid var(--ink);
    border-bottom: 1.5px solid var(--ink);
    transform: rotate(45deg);
    transition: transform .2s ease;
    flex: none;
    margin-top: -3px;
  }
  .dt-footer .dt-acc > .dt-footer__coltitle.is-open::after {
    transform: rotate(-135deg);
    margin-top: 3px;
  }
  /* згорнуто за замовчуванням, розкриття анімоване */
  .dt-footer .dt-acc > .dt-footer__links {
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease;
  }
  .dt-footer .dt-acc > .dt-footer__coltitle.is-open + .dt-footer__links {
    max-height: 640px;
    padding-bottom: 13px;
  }

  .dt-footer .dt-footer__bottom { margin-top: 22px; }
  .dt-footer .dt-footer__bottom-inner { flex-direction: column; gap: 8px; padding: 14px 0 16px; text-align: center; }
}

/* ==========================================================================
   4. PUSHY DRAWER (.page__mobile) — dt-рестайл goodlook темної шухляди
   (біле тло, ink-текст, --line роздільники, accent для активного).
   Ширину 250px не чіпаємо — transform:translateX(250px) захардкоджено
   у final.min.css (.page__mobile--js-open).
   ========================================================================== */
.page .page__mobile {
  background: #fff;
  color: var(--ink);
  font-family: var(--font);
  box-shadow: 8px 0 30px rgba(0, 0, 0, .14);
}
.page__mobile a { color: var(--ink); }
.page__mobile .mobile-nav__item { border-bottom: 1px solid var(--line); }
.page__mobile .mobile-nav__link {
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 500;
  height: 46px;
  line-height: 46px;
  padding: 0 20px;
}
.page__mobile .mobile-nav__link:hover { color: var(--accent); }
.page__mobile .mobile-nav__item--separator {
  background: var(--surface);
  color: var(--ink);
  margin-top: 18px;
  padding: 9px 20px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
}
.page__mobile .mobile-nav__link--view-all { color: var(--muted); }
.page__mobile .mobile-nav__link--go-back { color: var(--ink-2); padding-left: 38px; }
.page__mobile .mobile-nav__has-children { color: #bbb; }
.page__mobile .mobile-nav__link--active,
.page__mobile .mobile-nav__item--active > .mobile-nav__link,
.page__mobile .mobile-nav__link.active { color: var(--accent); font-weight: 600; }
.page__mobile .mobile-nav__list--drop { background: #fff; }

/* ==========================================================================
   5. 390px POLISH — герой, статистика 2×2, сітки/картки
   ========================================================================== */
@media (max-width: 640px) {
  /* герой-картка як у макеті: компактні відступи, CTA на всю ширину */
  .dt .dt-hero__inner { padding: 20px 18px 26px; min-height: 0; }
  .dt .dt-hero__eyebrow { font-size: 9.5px; }
  .dt .dt-hero__title { font-size: 21px; margin-top: 8px; }
  .dt .dt-hero__text { font-size: 12.5px; }
  .dt .dt-hero__cta { flex-wrap: wrap; gap: 10px; margin-top: 16px; }
  .dt .dt-hero__cta .dt-btn { width: 100%; min-height: 46px; }
  .dt .dt-hero__arrow { display: none; } /* лишаються крапки, як у макеті */
  .dt .dt-dots { bottom: 10px; }

  /* статистика: рядок із 4 → сітка 2×2 бордер-картками (макет sec-mobile) */
  .dt .dt-stats { flex-wrap: wrap; gap: 10px; padding: 0; border: 0; border-radius: 0; }
  .dt .dt-stats__sep { display: none; }
  .dt .dt-stats__col {
    flex: 1 1 calc(50% - 5px);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px;
  }
  .dt .dt-stats__num { font-size: 16px; }
  .dt .dt-stats__lbl { font-size: 9.5px; }

  /* сітки/картки: щільніші ґепи й компактніші картки на вузькому екрані */
  .dt .dt-grid--4, .dt .dt-grid--3 { gap: 12px; }
  .dt .dt-card__media { height: 150px; }
  .dt .dt-card__body { padding: 10px 12px 12px; }
  .dt .dt-card__title { font-size: 12.5px; min-height: 34px; }
  .dt .dt-card__buy { width: 36px; height: 36px; } /* tap target */

  /* секції-CTA, що лишались десктопно-широкими */
  .dt .dt-help { padding: 22px 18px; }
  .dt .dt-loyalty { padding: 18px 16px; }
  .dt .dt-loyalty__title { font-size: 17px; }
  .dt .dt-sectitle { font-size: 17px; }
}