/* ==========================================================================
   MFORN — Mobile Adaptation — v7.4.1
   Подключается ПОСЛЕ всех остальных CSS, перекрывает их через специфичность.
   Принцип: ничего не ломать на десктопе, плавно адаптировать ≤900px.
   ========================================================================== */

/* ==========================================================================
   00. ОБЩИЕ ПРАВИЛА (без media-query) — работают на всех ширинах
   ========================================================================== */

/* ── Скрываем звезду «В избранное» в превью карточек везде ──────────────── */
.product-img .fav-btn,
.product .fav-btn,
#home-base-grid .fav-btn,
#cat-grid .fav-btn {
  display: none !important;
}

/* ── Компактные баджи на превью карточек (вместо большой плашки) ────────── */
.product-img { position: relative; }

/* ВАЖНО: используем !important чтобы перебить оригинальный .product-img .ribbon
   из style.css (та же специфичность, побеждает только !important или порядок) */
.product-img .ribbon {
  position: absolute !important;
  top: 0.7rem !important;
  left: 0.7rem !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.55rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  padding: 0.28rem 0.55rem !important;
  background: #0A0A0A !important;
  color: #F4F1EA !important;
  z-index: 2;
  pointer-events: none;
  line-height: 1 !important;
  border-radius: 1px;
  width: auto !important;
  max-width: max-content !important;
  height: auto !important;
}
.product-img .ribbon--new {
  background: #0A0A0A !important;
  color: #F4F1EA !important;
}
.product-img .ribbon--limit {
  background: #C69E5A !important;
  color: #0A0A0A !important;
}

/* ATELIER бадж — золотой в правом верхнем углу */
.product-badge-atelier {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  background: #C69E5A;
  color: #0A0A0A;
  font-family: 'Inter', sans-serif;
  font-size: 0.55rem;
  letter-spacing: 0.22em;
  font-weight: 700;
  padding: 0.28rem 0.55rem;
  z-index: 3;
  pointer-events: none;
  text-transform: uppercase;
  line-height: 1;
  border-radius: 1px;
}

/* Скрываем зелёный «В наличии», оставляем только «Под заказ» */
.product-badge-stock--in-stock { display: none !important; }
.product-badge-stock--on-order {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.22rem 0.45rem;
  margin-top: 0.4rem;
  font-weight: 600;
  border: 1px solid currentColor;
  color: #8B6914;
  background: rgba(139, 105, 20, 0.06);
}

/* ── ФИКС: info-блок карточки превью — в столбик на мобиле ─────────────── */
/* Корень: .product-info { display: flex; justify-content: space-between }
   На узкой мобильной колонке артикул+название слева и цена справа
   сталкиваются и переносятся. Делаем flex-direction: column. */
@media (max-width: 768px) {
  .product .product-info,
  #home-base-grid .product-info,
  #cat-grid .product-info {
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 0.4rem !important;
    padding: 0.7rem 0 !important;
  }
  .product .product-info > div:first-child,
  #home-base-grid .product-info > div:first-child,
  #cat-grid .product-info > div:first-child {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }
  .product .product-info .product-code,
  #home-base-grid .product-info .product-code,
  #cat-grid .product-info .product-code {
    font-size: 0.62rem !important;
    letter-spacing: 0.16em !important;
    color: var(--muted, #757371) !important;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .product .product-info h4,
  #home-base-grid .product-info h4,
  #cat-grid .product-info h4 {
    font-size: 0.82rem !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
    margin: 0 !important;
  }
  /* Цена — обёртка price-wrap держит новую + старую в одной строке */
  .product .product-info .price-wrap,
  #home-base-grid .product-info .price-wrap,
  #cat-grid .product-info .price-wrap {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    gap: 0.4rem !important;
    flex-wrap: nowrap !important;
    margin-top: 0.2rem !important;
    width: 100%;
  }
  .product .product-info .price,
  #home-base-grid .product-info .price,
  #cat-grid .product-info .price {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: var(--ink, #0A0A0A) !important;
    letter-spacing: -0.005em !important;
    white-space: nowrap;
  }
  .product .product-info .price-old,
  #home-base-grid .product-info .price-old,
  #cat-grid .product-info .price-old {
    font-size: 0.78rem !important;
    color: var(--muted, #757371) !important;
    text-decoration: line-through;
    font-weight: 400 !important;
    margin: 0 !important;
    white-space: nowrap;
  }
  /* Фоллбэк для catalog.js (suits.html) — там price-old и price идут
     соседними span без обёртки. Заставляем .product-info НЕ переносить их:
     оборачиваем через display contents трюк не сработает, поэтому
     просто инлайним оба */
  #cat-grid .product-info > .price-old,
  #cat-grid .product-info > .price {
    display: inline !important;
    margin-top: 0 !important;
  }
}

/* ── ФИКС: счётчик корзины — скрыть когда пусто (0) ──────────────────── */
.cart-count:empty,
.cart-count[data-count="0"] {
  display: none !important;
}

/* ==========================================================================
   0. ГЛОБАЛЬНЫЙ FIX — никакого горизонтального скролла на мобиле
   ========================================================================== */
@media (max-width: 900px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
    position: relative;
  }
  /* Любая секция гарантированно не выходит за viewport */
  section, header, footer, main {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  /* Контейнеры внутри секций — тоже */
  .container,
  .home-atelier-inner,
  .home-process-grid,
  .home-stats-grid,
  .footer-inner {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Изображения и видео — не больше своей колонки */
  img, video {
    max-width: 100%;
    height: auto;
  }
  /* Watermark-тексты ATELIER/MFORN — точно скрываем на мобиле */
  .hero-v4::before,
  .home-atelier::before,
  .atelier-cover::before {
    display: none !important;
    content: none !important;
  }
  /* HERO видео и фон тоже не могут вылезти за viewport */
  .hero-v4,
  .hero-v4 .hero-bg,
  .hero-v4 .hero-video,
  .home-atelier,
  .home-atelier-bg,
  .home-base,
  .home-process,
  .home-stats,
  .home-lookbook {
    max-width: 100vw !important;
    width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  /* Контейнеры с padding не должны добавлять ширину сверху 100vw */
  .home-base .container,
  .home-process .container,
  .home-stats .container,
  .home-lookbook .container,
  .cat-grid-section .container,
  .cat-topbar-section .container,
  .cat-header .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Грид-сетки — не вытаскивают через минимальный размер ребёнка */
  .product-grid,
  #home-base-grid,
  #cat-grid {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .product-grid > *,
  #home-base-grid > *,
  #cat-grid > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* ==========================================================================
   1. ГАМБУРГЕР И МОБИЛЬНОЕ МЕНЮ
   ========================================================================== */

/* Кнопка-гамбургер — по умолчанию скрыта, появляется на ≤900px */
.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--line, #D0D0CD);
  cursor: pointer;
  padding: 0;
  position: relative;
  border-radius: 0;
  transition: border-color 0.2s ease;
}
.menu-toggle:hover { border-color: var(--ink, #0A0A0A); }
.menu-toggle-line {
  position: absolute;
  left: 10px;
  right: 10px;
  height: 1.5px;
  background: var(--ink, #0A0A0A);
  transition: transform 0.3s ease, opacity 0.2s ease, top 0.3s ease;
}
.menu-toggle-line:nth-child(1) { top: 14px; }
.menu-toggle-line:nth-child(2) { top: 21px; }
.menu-toggle-line:nth-child(3) { top: 28px; }

/* На тёмных страницах ATELIER гамбургер тоже виден */
.page-atelier .menu-toggle { border-color: rgba(244,241,234,0.18); }
.page-atelier .menu-toggle-line { background: #F4F1EA; }

/* Открытое состояние — X */
.menu-toggle.is-open .menu-toggle-line:nth-child(1) {
  top: 21px;
  transform: rotate(45deg);
}
.menu-toggle.is-open .menu-toggle-line:nth-child(2) {
  opacity: 0;
}
.menu-toggle.is-open .menu-toggle-line:nth-child(3) {
  top: 21px;
  transform: rotate(-45deg);
}

/* Мобильный оверлей с пунктами */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  height: 100dvh;
  background: #FFFFFF;
  z-index: 999;
  padding: 5rem 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  transform: translateY(-100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
}
.mobile-menu.is-open {
  transform: translateY(0);
}
.mobile-menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mobile-menu-item {
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.mobile-menu-item a {
  display: block;
  padding: 1.4rem 0;
  font-family: var(--font-display, 'Inter Tight');
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #0A0A0A;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.2s ease;
}
.mobile-menu-item a:hover,
.mobile-menu-item a.is-active {
  color: #C69E5A;
}
.mobile-menu-item--atelier a {
  color: #C69E5A;
}
.mobile-menu-item--atelier a::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #C69E5A;
  margin-right: 0.6rem;
  vertical-align: middle;
  transform: translateY(-2px);
}
.mobile-menu-bottom {
  margin-top: auto;
  padding-top: 2rem;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  color: rgba(0,0,0,0.5);
  text-align: center;
  text-transform: uppercase;
}
.mobile-menu-bottom a {
  color: rgba(0,0,0,0.7);
  text-decoration: none;
  margin: 0 0.4rem;
}

/* На мобиле блокируем скролл body когда меню открыто */
body.mobile-menu-open {
  overflow: hidden;
}

@media (max-width: 900px) {
  .menu-toggle { display: inline-flex; }
  /* nav-links уже скрывается через существующий медиа-запрос в style.css */
  .nav .nav-actions { gap: 0.4rem; }
}

/* ==========================================================================
   2. HERO ГЛАВНОЙ — финальная правка мобильного заголовка
   ========================================================================== */
@media (max-width: 768px) {
  /* Гарантируем что весь HERO контент центрирован и не выезжает */
  .hero-v4 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: hidden;
  }
  .hero-v4 .hero-content {
    padding: 0 1rem !important;
    max-width: 100% !important;
    width: 100%;
    margin: 0 auto !important;
    box-sizing: border-box;
    text-align: center;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }
  .hero-title--wide {
    width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 0.5rem;
    box-sizing: border-box;
    text-align: center;
  }
  .hero-title--wide .hero-line { white-space: normal; }
}

@media (max-width: 600px) {
  .hero-v4 .hero-content { padding: 0 1rem; }
  .hero-title--wide {
    font-size: clamp(1.5rem, 8.5vw, 2.4rem) !important;
    gap: 0.15rem;
    margin: 1rem auto 1.4rem !important;
  }
  .hero-title--wide .hero-line { white-space: normal; }
  .hero-title--wide .hero-plus { font-size: 0.5em; }
  .hero-sub {
    font-size: 0.82rem !important;
    line-height: 1.55 !important;
    padding: 0 0.5rem;
  }
  .hero-actions {
    flex-direction: column;
    gap: 0.6rem;
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
  }
  .hero-actions .btn {
    width: 100%;
    justify-content: center;
    padding: 0.9rem 1rem;
    font-size: 0.7rem;
  }
}

/* ==========================================================================
   3. БЛОК ATELIER НА ГЛАВНОЙ — финальный мобильный вид
   ========================================================================== */
@media (max-width: 600px) {
  .home-atelier { padding: 3rem 0; }
  .home-atelier-inner { padding: 0 1.2rem; gap: 1.8rem; }
  .ha-title { font-size: clamp(2rem, 9vw, 3rem) !important; }
  .ha-essay { font-size: 0.88rem; }
  .ha-stats { gap: 1.5rem; padding-top: 1rem; }
  .ha-stat-value { font-size: 1.1rem; }
  .home-atelier::before { font-size: 6rem !important; bottom: -1rem; }
}

/* ==========================================================================
   3.5. БАЗОВЫЙ ГАРДЕРОБ НА ГЛАВНОЙ — жёсткая сетка, без overflow
   ========================================================================== */
@media (max-width: 900px) {
  .home-base {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100vw !important;
    overflow: hidden;
  }
  .home-base .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
  }
  .home-base .section-head {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .home-base-intro {
    text-align: left !important;
    margin: 0 0 1.5rem !important;
    padding: 0 1rem !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  #home-base-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.7rem !important;
    padding: 0 1rem !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  #home-base-grid .product {
    max-width: 100%;
    min-width: 0;
  }
  #home-base-grid .product-img {
    aspect-ratio: 3/4;
    overflow: hidden;
  }
  #home-base-grid .product-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* ==========================================================================
   4. КАТАЛОГ (suits.html) — фильтры, грид, нет обрезки
   ========================================================================== */
@media (max-width: 900px) {
  /* Топбар над сеткой — отключаем sticky на мобиле (был баг с обрезкой грида) */
  .cat-topbar-section {
    position: static !important;
    top: auto !important;
    padding: 0.8rem 0 !important;
  }
  .cat-topbar {
    padding: 0 1rem !important;
    gap: 0.6rem !important;
  }

  /* Контейнеры в каталоге — без выхода за viewport */
  .cat-grid-section,
  .cat-topbar-section,
  .cat-header {
    max-width: 100vw !important;
    overflow-x: hidden;
  }
  .cat-grid-section .container,
  .cat-topbar-section .container,
  .cat-header .container {
    max-width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    box-sizing: border-box;
    margin: 0 auto;
  }

  /* Главная сетка каталога — жёстко 2 колонки, ничего не выезжает */
  #cat-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.7rem !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  #cat-grid .product {
    max-width: 100%;
    min-width: 0;  /* критично для grid items — иначе колонки раздуваются */
  }
  #cat-grid .product-img {
    aspect-ratio: 3/4;
    overflow: hidden;
  }
  #cat-grid .product-img img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: cover;
  }
}

@media (max-width: 600px) {
  .catalog-filter, .filter-bar, .filters {
    gap: 0.4rem !important;
    flex-wrap: wrap;
  }
  .filter-btn, .catalog-filter button, .filters button {
    padding: 0.55rem 0.9rem !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.1em !important;
  }
  .catalog-head, .page-head {
    padding-top: 5rem;
  }
  /* Хлебные крошки и описание */
  .breadcrumbs { font-size: 0.7rem; margin-bottom: 0.6rem; }
}

/* ==========================================================================
   5. КАРТОЧКА ОБЫЧНОГО ТОВАРА (product.html)
   ========================================================================== */
@media (max-width: 768px) {
  /* ── ФУНДАМЕНТАЛЬНЫЙ ФИКС: layout карточки не выходит за viewport ─────── */
  .product-page,
  #product-page {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box;
  }
  .product-page-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    padding: 5rem 1rem 4rem !important;  /* gutter заменён на фикс 1rem */
    max-width: 100vw !important;
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  .product-gallery,
  .product-details {
    position: static !important;
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Характеристики — текст значения не вылезает */
  .spec-row {
    gap: 1rem !important;
    align-items: flex-start;
  }
  .spec-val {
    max-width: 60% !important;
    text-align: right;
    word-break: break-word;
    overflow-wrap: anywhere;
    font-size: 0.8rem !important;
  }
  .spec-key {
    flex-shrink: 0;
    font-size: 0.68rem !important;
  }
  /* Кнопки действий — на всю ширину, текст не обрезается */
  .product-actions {
    width: 100% !important;
    max-width: 100% !important;
  }
  .product-actions .btn,
  .product-actions .btn-large {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 1rem 0.8rem !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.12em !important;
    white-space: normal !important;
    text-align: center;
  }
}

@media (max-width: 768px) {
  /* Главное фото — на всю ширину минус gutter */
  .product-detail-photo, .pd-main { width: 100%; }

  /* Миниатюры — 4 в ряд */
  .pd-thumbs, .product-thumbs {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0.4rem !important;
  }

  /* Размеры — крупнее для тапа */
  .size-grid, .sizes {
    gap: 0.4rem !important;
  }
  .size-option, .size-btn {
    min-width: 48px !important;
    min-height: 48px !important;
    padding: 0.7rem 0.8rem !important;
    font-size: 0.85rem !important;
  }

  /* Кнопка «В корзину» — на всю ширину */
  .product-buy-btn,
  .add-to-cart-btn,
  .btn-buy {
    width: 100% !important;
    padding: 1rem !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.2em !important;
  }

  /* Блок цены — column, чтобы лид-тайм ушёл под цену и ₽ не отрывался */
  .product-price-block {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
    padding: 1rem 0 !important;
  }
  .product-price {
    font-size: clamp(1.4rem, 6vw, 1.8rem) !important;
    white-space: nowrap;
    line-height: 1.2;
  }
  .product-lead {
    margin-left: 0 !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.12em !important;
    text-align: left;
  }

  /* Карточка info-блок — отступы */
  .product-detail-info, .pd-info {
    padding: 1.2rem 0 !important;
  }
}

/* ==========================================================================
   6. КАРТОЧКА ATELIER — главная задача: селектор 100 номеров
   ========================================================================== */

/* Десктоп держим 10 колонок, на планшете 8, на мобиле 5×20 */
@media (max-width: 768px) {
  .number-picker-grid {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 5px !important;
    padding: 0.6rem !important;
  }
  .number-cell {
    font-size: 0.78rem !important;
    min-height: 44px !important;
    border-radius: 2px;
  }
  .number-picker-head {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 0.8rem;
  }
  .number-picker-random {
    font-size: 0.7rem !important;
    padding: 0.4rem 0 !important;
  }
  .number-picker-selected {
    font-size: 1.2rem !important;
  }
  /* Размеры в ATELIER — крупнее */
  .atelier-size-option {
    min-width: 56px !important;
    min-height: 48px !important;
    padding: 0.8rem 0.6rem !important;
    font-size: 0.8rem !important;
  }
  /* Кнопки */
  .atelier-btn-primary, .atelier-btn-secondary {
    padding: 1.1rem 1rem !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.22em !important;
  }
  /* Цена */
  .atelier-price-value {
    font-size: 1.8rem !important;
  }
  /* Заголовок */
  .atelier-product-title {
    font-size: clamp(1.6rem, 7vw, 2.2rem) !important;
  }
}

@media (max-width: 600px) {
  .atelier-product-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    padding: 0 1rem !important;
  }
  .atelier-product-photo-main {
    aspect-ratio: 3 / 4 !important;
  }
  .atelier-product-thumbs {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0.4rem !important;
  }
  .atelier-product-info { padding: 0.5rem 0 !important; }
  .atelier-product-section { margin-top: 3rem; padding-top: 2rem; }
  /* На самых маленьких экранах — 5 колонок всё ещё ок, но ячейки чуть мельче */
  .number-cell {
    font-size: 0.72rem !important;
    min-height: 42px !important;
  }
}

/* ==========================================================================
   7. МОДАЛКА БРОНИРОВАНИЯ ATELIER
   ========================================================================== */
@media (max-width: 600px) {
  .atelier-modal-overlay {
    padding: 0.5rem !important;
    align-items: flex-end !important;
  }
  .atelier-modal {
    padding: 1.5rem 1.2rem 2rem !important;
    max-height: 92vh !important;
    border-radius: 8px 8px 0 0;
    width: 100%;
  }
  .atelier-modal-title { font-size: 1.5rem !important; }
  .atelier-modal-subtitle { margin-bottom: 1.4rem !important; }
  .atelier-reserve-form .form-row { margin-bottom: 0.9rem !important; }
  .atelier-reserve-form input {
    padding: 0.85rem 0.9rem !important;
    font-size: 1rem !important; /* >= 16px чтобы iOS не зумил */
  }
  .atelier-reserve-form .form-summary {
    font-size: 0.82rem !important;
    line-height: 1.5;
  }
  .atelier-reserve-disclaimer { font-size: 0.72rem !important; padding: 0.8rem !important; }
}

/* ==========================================================================
   8. ОБЛОЖКА ATELIER (atelier.html) — мета-блок не разваливался
   ========================================================================== */
@media (max-width: 600px) {
  .atelier-cover { padding: 5rem 1.2rem 4rem !important; }
  .atelier-cover-title { font-size: clamp(3rem, 14vw, 5rem) !important; }
  .atelier-cover-roman { font-size: 0.6em !important; }
  .atelier-cover-essay { font-size: 0.85rem; padding: 0 0.5rem; }
  .atelier-cover-meta {
    grid-template-columns: 1fr !important;
    gap: 0.6rem;
    padding: 1rem 0 !important;
  }
  .atelier-cover-meta-item {
    border-right: none !important;
    border-bottom: 1px solid rgba(244, 241, 234, 0.06);
    padding: 0.6rem 0;
  }
  .atelier-cover-meta-item:last-child { border-bottom: none; }
  .meta-value { font-size: 1.1rem !important; }

  .atelier-section-title { font-size: clamp(1.5rem, 7vw, 2.4rem) !important; }
  .atelier-section-head { padding: 0 1rem !important; gap: 0.4rem !important; }
  .atelier-grid { padding: 0 1rem !important; gap: 1rem !important; }
  .atelier-card { aspect-ratio: 3/4 !important; }
  .atelier-card-title { font-size: 1.2rem !important; }
}

/* ==========================================================================
   9. ИНПУТЫ — везде >= 16px чтобы iOS Safari не зумил при фокусе
   ========================================================================== */
@media (max-width: 768px) {
  input[type="text"],
  input[type="tel"],
  input[type="email"],
  input[type="number"],
  input[type="search"],
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* ==========================================================================
   10. ОБЩИЕ — отступы шапки, чтобы контент не залетал под navbar
   ========================================================================== */
@media (max-width: 900px) {
  /* Шапка — гарантируем правильный grid: гамбургер | бренд | actions
     Боковые колонки фиксированной равной ширины — тогда бренд строго по центру */
  header.nav,
  header.site-header,
  .nav {
    grid-template-columns: 60px 1fr 60px !important;
    align-items: center !important;
    gap: 0.4rem !important;
  }
  .site-header, .nav, .nav--atelier {
    padding-top: 0.7rem !important;
    padding-bottom: 0.7rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Бренд — по центру, полностью видимый */
  .brand {
    font-size: 1.3rem !important;
    text-align: center;
    justify-self: center;
    white-space: nowrap;
    line-height: 1;
  }
  .brand sup {
    font-size: 0.5rem !important;
    margin-left: 2px;
    vertical-align: top;
  }

  /* Гамбургер — слева, actions — справа */
  .menu-toggle { justify-self: start; }
  .nav-actions { justify-self: end; }

  /* Внутренний <nav> не должен ломать layout */
  header.nav > nav,
  header.site-header > nav {
    grid-column: 1;
    margin: 0;
    padding: 0;
    display: contents;
  }

  /* ── nav-actions: на мобиле прячем «Поиск» и «Избранное», оставляем корзину ── */
  .nav-actions button:not(.cart-link button):not(:has(.cart-count)),
  .nav-actions > button:nth-of-type(1),  /* "Поиск" */
  .nav-actions > button:nth-of-type(2) { /* "Избранное" */
    display: none !important;
  }
  /* Контейнер корзины — превращаем в кружок-иконку */
  .nav-actions .cart-link,
  .nav-actions a[href*="cart"] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    text-decoration: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 6h2l2.5 12h11L21 9H6'/><circle cx='9' cy='20' r='1.4'/><circle cx='17' cy='20' r='1.4'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
  }
  .nav-actions .cart-link button,
  .nav-actions a[href*="cart"] button {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    width: 100%;
    height: 100%;
    cursor: pointer;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    color: transparent !important;
  }
  /* Текстовая подпись «Корзина» — спрятать */
  .nav-actions .label {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
  }
  /* Цифра корзины — внутри иконки, НЕ вылезает за край экрана */
  .nav-actions .cart-count {
    position: absolute !important;
    top: 2px !important;
    right: 2px !important;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    background: #0A0A0A;
    color: #F4F1EA;
    font-family: 'Inter', sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    pointer-events: none;
  }
  /* Гарантируем что контейнер корзины не обрезает бейдж */
  .nav-actions .cart-link,
  .nav-actions a[href*="cart"] {
    overflow: visible !important;
  }
  /* Шапка не должна обрезать вылезающие бейджи */
  header.nav, .nav {
    overflow: visible !important;
  }
  /* Тёмная страница ATELIER — иконка корзины белая */
  .page-atelier .nav-actions .cart-link,
  .page-atelier .nav-actions a[href*="cart"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23F4F1EA' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 6h2l2.5 12h11L21 9H6'/><circle cx='9' cy='20' r='1.4'/><circle cx='17' cy='20' r='1.4'/></svg>");
  }
  .page-atelier .nav-actions .cart-count {
    background: #C69E5A;
    color: #0A0A0A;
  }
}