/* ============================================================
   mobile-home.css — ТЁМНАЯ мобильная тема ВИТРИНЫ (только главная index.html).
   Линкуется ТОЛЬКО из frontend/index.html → десктоп (>1024px) и админка,
   которые тоже используют style.css, НЕ затронуты.

   Принцип: весь тёмный слой живёт внутри @media(max-width:1024px) и
   ПЕРЕКРЫВАЕТ десктопные правила style.css (этот файл подключён ПОСЛЕ него),
   ничего в style.css не переписывая. Десктоп остаётся белым 1:1.

   Токены тёмной темы переопределяются в :root ВНУТРИ медиа-запроса — это
   безопасно, т.к. файл подключён лишь на главной.

   ДИСЦИПЛИНА ЛАЙМА: лайм только на логотипе, главном CTA, цене активного
   продукта, точке-индикаторе активного продукта и активном табе. Иконки
   ярлыков/продуктов — белые/серые. Плашка НОВОЕ — лайм-контур, не заливка.
   Лайм-glow — только на главном CTA и активном табе.
   ============================================================ */

/* Мобильные блоки скрыты на десктопе (и до открытия — оверлей листа). */
.m-only{display:none}
.m-sheet-overlay{display:none}

@media(max-width:1024px){

  /* ---------- ТОКЕНЫ ТЁМНОЙ ТЕМЫ ---------- */
  :root{
    --bg:#0A0B0D;
    --bg-soft:#14161A;
    --card:#14161A;
    --card-2:#1b1e24;
    --ink:#F5F7FA;
    --ink-soft:#8A8F98;
    --grey:#8A8F98;
    --line:#262A31;
    --line-dark:#262A31;
    --accent:#C6FF00;
    --accent-ink:#0A0B0D;
    --pink:#FF2D6F;
    --radius:20px;
    --radius-sm:16px;
  }
  body{background:var(--bg);color:var(--ink);position:relative}
  .m-only{display:block}

  /* ---------- АМБИЕНТНОЕ ЛАЙМОВОЕ СВЕЧЕНИЕ (эталон: слабое, фиксированное) ----------
     Единственный источник «цвета» на фоне. pointer-events:none — не ловит тапы. */
  body::before{
       content:'';position:fixed;top:-30vh;left:50%;transform:translateX(-50%);
       width:120vw;height:70vh;pointer-events:none;z-index:0;
       background:radial-gradient(closest-side, rgba(198,255,0,.07), rgba(198,255,0,.02) 55%, transparent 75%);
       filter:blur(20px)}
  body::after{
       content:'';position:fixed;bottom:-20vh;right:-20vw;
       width:80vw;height:50vh;pointer-events:none;z-index:0;
       background:radial-gradient(closest-side, rgba(198,255,0,.03), transparent 70%);
       filter:blur(30px)}
  /* контент — над свечением (.nav/.m-tabbar/.m-sheet-overlay уже имеют свой z-index) */
  .wrap{position:relative;z-index:1}

  /* ---------- ШАПКА: плавающая стеклянная капсула ----------
     Сама полоса .nav перестаёт быть фоном (прозрачная, без границы), капсулой
     становится внутренний .nav-in — он не приклеен к краям экрана. */
  .nav{background:transparent;border-bottom:none;
       backdrop-filter:none;-webkit-backdrop-filter:none;
       top:12px;padding:12px calc(20px + env(safe-area-inset-right)) 0 calc(20px + env(safe-area-inset-left))}
  .nav-in{gap:10px;padding:8px 8px 8px 14px;border-radius:999px;margin-bottom:34px;
       background:rgba(255,255,255,.055);
       backdrop-filter:blur(22px) saturate(160%);
       -webkit-backdrop-filter:blur(22px) saturate(160%);
       border:1px solid rgba(255,255,255,.10);
       box-shadow:0 8px 30px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.12)}
  .logo{color:var(--ink);font-size:15px}
  .logo-mark{background:#1b1e24}              /* подложка знака темнее, квадрат лайм */
  /* В шапке: знак+VIBE STUDIO слева, круглые стеклянные поиск+бургер справа.
     Меню/регистрацию/«Войти»/аватар прячем — вход и кабинет есть в
     бургер-меню и в нижнем таб-баре. */
  .nav-menu,.nav-register,.nav-login,.nav-account{display:none !important}
  .nav-spacer{flex:1}
  /* круглые стеклянные иконки справа (эталонный .iconbtn) */
  .burger,.search{width:38px;height:38px;border-radius:50%;padding:0;min-width:0;
       flex:none;display:grid;place-items:center;
       background:rgba(255,255,255,.06);
       backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
       border:1px solid rgba(255,255,255,.12);
       box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
  .burger{gap:4px;grid-auto-flow:row}
  .burger span{width:18px;height:2px;background:var(--ink);border-radius:2px}
  /* поиск: текст «🔍 Поиск ⌘K» гасим, рисуем белую лупу маской (как SVG эталона) */
  .search{display:grid !important;font-size:0;color:transparent}
  .search .kbd{display:none}
  .search::before{content:"";width:18px;height:18px;background:var(--ink);
       -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") center/contain no-repeat;
       mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") center/contain no-repeat}

  /* нет горизонтального скролла: ничего не вылезает за вьюпорт */
  html,body{overflow-x:hidden}

  /* ---------- HERO: компактный, по левому краю ---------- */
  /* Горизонтальный отступ задаём ТОЛЬКО longhand'ом (.wrap), а вертикальный —
     longhand'ом у .hero/.section, чтобы shorthand-правила не обнуляли боковой padding. */
  /* поля 20px + компенсация «чёлки» в ландшафте (viewport-fit=cover) */
  .wrap{padding-left:calc(20px + env(safe-area-inset-left));
        padding-right:calc(20px + env(safe-area-inset-right))}
  .hero{padding-top:0;padding-bottom:16px;text-align:left}
  .eyebrow{margin-bottom:14px;color:var(--accent);background:rgba(198,255,0,.10);
       border:1px solid rgba(198,255,0,.30);font-size:11.5px;padding:5px 11px}
  .eyebrow i{background:var(--accent);box-shadow:none}
  .hero h1{font-size:clamp(30px,8vw,40px);line-height:1.05;letter-spacing:-.03em;
       background:none;-webkit-text-fill-color:var(--ink);color:var(--ink)}
  .hero p{margin:12px 0 0;max-width:none;font-size:15px}
  .hero-cta{justify-content:flex-start;gap:10px;margin-top:18px}
  .hero-cta .btn-lg{padding:13px 22px;font-size:15px}
  /* главный CTA — лайм + единственный лайм-glow в hero */
  .hero-cta .btn-accent{background:var(--accent);color:var(--accent-ink);font-weight:800;
       box-shadow:0 8px 30px rgba(198,255,0,.30)}
  /* вторичная — прозрачная с границей */
  .hero-cta .btn-ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}

  /* ---------- ОБЩЕЕ ПО СЕКЦИЯМ (компактно) ---------- */
  .section{padding-top:16px;padding-bottom:16px}   /* только вертикаль; бок — от .wrap */
  .section-head{margin-bottom:18px;align-items:baseline}
  .section-head h2{font-size:19px;color:var(--ink);letter-spacing:-.02em}
  .section-head p{display:none}               /* подзаголовки секций прячем */
  .see-all{color:var(--ink-soft);font-size:13px}
  .see-all:hover{color:var(--ink)}

  /* ---------- НОВИНКИ: ряд из 2 ---------- */
  .banners{grid-template-columns:1fr 1fr;gap:10px}
  .banners .banner:nth-child(3){display:none} /* третий (Скоро) — вернём на шаге 2 (БД) */
  .banner{aspect-ratio:auto;height:104px;border-radius:16px;box-shadow:none} /* компактно: плашка сверху, заголовок снизу */
  .banner-body{padding:13px}
  .banner-body h3{font-size:14.5px;letter-spacing:-.01em}
  .banner-body span{display:none}
  .banner-tag{top:10px;left:10px;font-size:10px;padding:4px 9px}
  .tag-sale{background:var(--pink);color:#fff}                       /* акция — розовая плашка */
  .tag-new{background:transparent;color:var(--accent);border:1px solid var(--accent)} /* новинка — лайм-контур */

  /* ---------- ЯРЛЫКИ-РАЗДЕЛЫ: круглые стеклянные кнопки (эталон .sc/.sc-circle) ----------
     Разметку не меняем: .m-sc — прозрачный столбик, кругом становится .m-sc-ic,
     подпись .m-sc-label — под кругом. Сетка жёстко 4 в ряд, крупный зазор рядов. */
  /* padding-bottom:0 у секции — чтобы суммарный зазор до «Продуктов» был ~42px эталона,
     а не 26+16+16 */
  .m-shortcuts{padding-top:2px;padding-bottom:0}
  .m-sc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px 8px;margin-bottom:26px}
  .m-sc{display:flex;flex-direction:column;align-items:center;gap:8px;
       padding:0;background:none;border:none;border-radius:0;color:var(--ink)}
  /* Ярлык раздела, которого ещё нет (status=soon в админке «Главный экран»):
     видимая метка «СКОРО» поверх значка. Раньше о недоступности сообщала
     только шторка ПОСЛЕ тапа — человек жал и упирался в пустоту. */
  .m-sc[data-soon]{position:relative}
  .m-sc[data-soon] .m-sc-ic{opacity:.55}
  .m-sc[data-soon] .m-sc-label{color:var(--ink-soft)}
  .m-sc[data-soon]::after{content:"СКОРО";position:absolute;top:-2px;right:2px;
       font-size:9px;font-weight:800;letter-spacing:.06em;line-height:1;
       padding:4px 6px;border-radius:999px;color:var(--accent-ink);
       background:var(--accent);box-shadow:0 2px 8px rgba(0,0,0,.35)}
  .m-sc-ic{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;
       color:#F5F7FA;                                   /* иконки БЕЛЫЕ, все одинаковые */
       background:rgba(255,255,255,.055);
       backdrop-filter:blur(18px) saturate(150%);
       -webkit-backdrop-filter:blur(18px) saturate(150%);
       border:1px solid rgba(255,255,255,.11);
       box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 6px 18px rgba(0,0,0,.35);
       transition:transform .18s ease, background .18s ease}
  .m-sc:active .m-sc-ic{transform:scale(.93);background:rgba(255,255,255,.1)}
  .m-sc-ic svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.8;
       stroke-linecap:round;stroke-linejoin:round}
  .m-sc-label{font-size:11.5px;font-weight:600;color:var(--ink-soft);letter-spacing:-.01em}

  /* ---------- ПРОДУКТЫ: плитка 2 в ряд ---------- */
  .pgrid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));grid-auto-rows:auto;gap:14px}
  /* ПРОИЗВОДИТЕЛЬНОСТЬ: на карточках НИКАКОГО backdrop-filter — их много и они в
     длинном скролле; стекло живёт только на шапке, таб-баре и кругах ярлыков. */
  .pcard{min-height:auto;padding:16px;border-radius:20px;background:var(--card);border:1px solid var(--line);
       backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 8px 24px rgba(0,0,0,.32)}
  .pcard:hover{transform:none;border-color:var(--line)}
  .pcard.feature{grid-row:auto;grid-column:auto;flex-direction:column;background:var(--card)} /* без растяжки */
  /* Пресеты размера карточки (size_preset из БД):
     big — 2 клетки (на телефоне = вся строка); wide — вся строка, низкая «баннерная». */
  .pgrid .pcard.size-big{grid-column:span 2}
  .pgrid .pcard.size-wide{grid-column:1 / -1;flex-direction:row;align-items:center;gap:14px}
  .pcard.size-wide .pc-top{margin-bottom:0;flex-direction:column}
  .pcard.size-wide .pc-body{margin-top:0;flex:1}
  .pcard.size-wide .pc-foot{margin-top:0}

  .pcard.feature .pc-top{flex-direction:row}
  .pc-top{align-items:flex-start}
  /* --- ЧИСТАЯ плитка на главной (обложку НЕ показываем — она на странице продукта).
     Иконка = бренд-знак, тот же что в шапке (.logo-mark): тёмная плашка #1b1e24
     с лаймовым скруглённым квадратом. Один знак на всех продуктах. --- */
  .pc-icon{width:42px;height:42px;border-radius:13px;position:relative;
       font-size:0;color:transparent;background-image:none !important;
       background-color:#1b1e24;border:1px solid var(--line)}
  .pc-icon::before{content:"";width:18px;height:18px;border-radius:6px;background:var(--accent)}
  .pcard[data-soon] .pc-icon::before{background:var(--grey)}   /* soon — серый знак */
  .badge-soon{background:rgba(245,247,250,.06);color:var(--ink-soft);border:1px solid var(--line)} /* СКОРО серым */
  /* мелкие чипы/плашки лент — тоже без стекла (их много, дешевле сплошная заливка) */
  .tag-soon,.cc-tags span{backdrop-filter:none;-webkit-backdrop-filter:none}
  .pcard[data-soon]{opacity:.6}
  .pc-body{margin-top:14px}
  .pc-body h3{font-size:16px}
  .pcard.feature .pc-body h3{font-size:18px}
  .pc-body p{display:none}                     /* компактная плитка */
  .pc-foot{margin-top:12px}
  /* цена активного — ЛАЙМ */
  .price{color:var(--accent);font-weight:800;font-size:14px}
  .price small{color:var(--ink-soft);font-weight:600}
  /* кнопки в плитке прячем (карточка кликабельна целиком) — бережём дисциплину лайма */
  .pc-foot .btn-buy,.pc-foot .btn-soon{display:none}

  /* --- СЕРВЕРНАЯ плитка на главной: возвращаем ей мобильный вид (26.08.2026) ---
     С SEO-хвостов #home-products наполняет СЕРВЕР, и карточка приезжает такой же,
     как на /prices — с обложкой и модификатором .has-cover. На «Ценах» это и надо,
     а мобильная главная исторически показывает ЧИСТУЮ тёмную плитку с бренд-знаком.
     Ниже гасим ровно оформление обложки из product-cards.css — только внутри
     #home-products и только на мобиле. /prices и десктоп не затронуты.

     ⚠️ Правила стоят ЗДЕСЬ, ПОД базовыми .pcard/.pc-icon этого же медиазапроса —
     медиазапрос специфичность не повышает, и выше по файлу они бы не сработали
     (см. scripts/check_css_cascade.py). Селекторы с #home-products перебивают
     .pcard.has-cover из product-cards.css по специфичности (1,3,0 против 0,3,0). */
  #home-products .pc-img{display:none}                       /* саму картинку не показываем */
  #home-products .pcard.has-cover::before{display:none}      /* и градиент-скрим под неё */
  #home-products .pcard.has-cover{background-color:var(--card)}
  #home-products .pcard.has-cover .pc-icon{display:grid}     /* бренд-знак обратно (grid — как в style.css) */
  #home-products .pcard.has-cover.title-on-art .pc-body{display:block}  /* заголовок нужен: арта-то нет */
  #home-products .pcard.has-cover .pc-body h3,
  #home-products .pcard.has-cover .price{text-shadow:none}   /* тень под текст без картинки не нужна */

  /* ---------- НА МОБИЛЕ ПРЯЧЕМ ДЛИННУЮ ЛЕНТУ ---------- */
  #blog{display:none}
  .footer{display:none}
  /* запас снизу: плавающая капсула таб-бара не липнет к последнему ряду продуктов
     (100px давали пустую «дыру» под сеткой — капсула ниже и так в потоке) */
  #products{padding-bottom:24px}

  /* ---------- НИЖНИЙ ТАБ-БАР: плавающая стеклянная pill, sticky (НЕ fixed) ----------
     sticky, а не fixed: капсула уже не перекрывает последний ряд продуктов и не
     требует подпорок padding-bottom у body. Отступ от краёв + safe-area на iPhone. */
  .m-tabbar{position:sticky;bottom:calc(18px + env(safe-area-inset-bottom));z-index:40;
       display:flex;align-items:center;justify-content:space-around;gap:4px;
       width:calc(100% - 32px);max-width:400px;margin:18px auto 14px;padding:9px 8px;
       background:rgba(20,22,26,.72);border:1px solid rgba(255,255,255,.11);border-radius:999px;
       backdrop-filter:blur(26px) saturate(170%);
       -webkit-backdrop-filter:blur(26px) saturate(170%);
       box-shadow:0 12px 38px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.11)}
  .m-tab{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;
       padding:6px 0;border-radius:999px;color:var(--ink-soft);font-size:10px;font-weight:700}
  .m-tab svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.9;
       stroke-linecap:round;stroke-linejoin:round}
  .m-tab.active{color:var(--accent);background:rgba(198,255,0,.1)}    /* активный таб — лайм */
  .m-tab.active svg{filter:drop-shadow(0 0 6px rgba(198,255,0,.5))}   /* + единственный glow таба */

  /* ---------- BOTTOM-SHEET (SOON / меню) ---------- */
  .m-sheet-overlay.open{display:flex}
  body.m-noscroll{overflow:hidden}
}

/* ---------- ПЛАНШЕТ: «большая мобилка» (та же тёмная тема, шире) ---------- */
@media(min-width:600px) and (max-width:1024px){
  .hero{max-width:75%}                         /* hero ~75% ширины */
  .hero h1{font-size:clamp(34px,5vw,48px)}
  .wrap{padding-left:28px;padding-right:28px}
  .m-sc-grid{max-width:520px}                  /* круги не растягиваем на всю ширину планшета */
  .m-tabbar{max-width:440px}                   /* капсула по центру (margin:auto — из базы) */
  /* сетки сами добавят колонки (auto-fit/minmax): ярлыки/продукты — больше в ряд */
}

/* Оверлей и карточка листа — позиционирование в базе (вне медиа), цвет через
   переменные (на мобиле они тёмные). Открывается лишь на мобиле (JS из .m-only). */
.m-sheet-overlay{position:fixed;inset:0;z-index:200;align-items:flex-end;
     background:rgba(0,0,0,.55);opacity:0;transition:opacity .2s ease}
.m-sheet-overlay.open{opacity:1}
.m-sheet-card{width:100%;background:var(--card);border:1px solid var(--line);border-bottom:none;
     border-radius:22px 22px 0 0;padding:24px 22px calc(22px + env(safe-area-inset-bottom));
     text-align:center;transform:translateY(100%);
     transition:transform .26s cubic-bezier(.2,.8,.2,1)}
.m-sheet-overlay.open .m-sheet-card{transform:translateY(0)}
.m-sheet-grip{width:40px;height:4px;border-radius:999px;background:var(--line);margin:0 auto 18px}
.m-sheet-ic{width:54px;height:54px;border-radius:16px;margin:0 auto 14px;display:grid;
     place-items:center;background:rgba(198,255,0,.12);color:var(--accent)}     /* лайм-иконка листа */
.m-sheet-ic svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:2;
     stroke-linecap:round;stroke-linejoin:round}
.m-sheet-title{font-size:19px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.m-sheet-text{font-size:14px;color:var(--ink-soft);margin:8px 0 20px;font-weight:500;line-height:1.5}
.m-sheet-ok{width:100%;background:var(--accent);color:var(--accent-ink);font-weight:800;border:none;
     border-radius:999px;padding:13px 28px;font-size:14.5px;font-family:inherit;cursor:pointer}
.m-menu-list{text-align:left;margin-top:2px}
.m-menu-list a{display:flex;align-items:center;gap:12px;padding:14px 6px;
     border-bottom:1px solid var(--line);color:var(--ink);font-size:15px;font-weight:600}
.m-menu-list a:last-child{border-bottom:none}