/* mobile.css — все мобильные правки тут.
   Подключается через <link media="(max-width: 980px)"> — браузер применяет ТОЛЬКО на мобиле/планшете.
   Внутри файла @media-обёртки НЕ нужны — все правила и так применятся только когда экран ≤ 980px.
*/

/* ===== Hero на мобилке: компактнее, кнопки в ряд, фото меньше =====
   aspect-ratio/max-height/overflow обязательны: desktop задаёт `aspect-ratio:1983/793;
   max-height:680px; overflow:hidden` — без override hero обрезается до ~140px и
   фото с CTA пропадают. */
.t-hero--banner{
  display:flex;flex-direction:column;background:var(--paper);
  aspect-ratio:auto;max-height:none;overflow:visible;
}
.t-hero__overlay{
  order:1;position:static;max-width:none;inset:auto;
  padding:18px 20px 14px;
  text-align:center;align-items:center;gap:10px;
  display:flex;flex-direction:column;
}
.t-hero--banner .t-hero__title{
  font-size:26px;line-height:1.1;letter-spacing:-.005em;
}
.t-hero--banner .t-hero__lede{
  font-size:13.5px;color:var(--ink-2);line-height:1.5;
  max-width:300px;margin:0 auto;
}
.t-hero--banner .t-hero__cta-inline{
  display:flex;flex-direction:row;gap:8px;
  width:100%;max-width:380px;margin:6px auto 0;
  justify-content:center;
}
.t-hero--banner .t-hero__cta-inline .btn{
  flex:1 1 0;height:46px;padding:0 14px;
  font-size:13px;display:flex;align-items:center;justify-content:center;
  border-radius:10px;
}

/* Фото снизу: компактнее, скругления, тень */
.t-hero--banner .t-hero__bg-pic{
  position:relative;order:2;
  width:calc(100% - 28px);margin:4px 14px 14px;
  aspect-ratio:16/9;
  border-radius:14px;overflow:hidden;
  box-shadow:0 8px 24px rgba(26,22,20,.10);
}
.t-hero--banner .t-hero__bg{
  width:100%;height:100%;object-fit:cover;object-position:right center;
}

/* ===== Footer: branded, центрованный, decorative-divider ===== */
footer{padding:32px 18px 22px;text-align:center}
.footer-inner{grid-template-columns:1fr;gap:24px;padding:0}
footer .about{padding-bottom:20px;border-bottom:1px solid var(--line)}
footer .about-head{justify-content:center;gap:12px;margin-bottom:10px}
footer .about-head img{
  width:48px;height:48px;
  border:2px solid var(--paper);
  box-shadow:0 4px 14px rgba(26,22,20,.14);
}
footer .about-head h4{font-size:18px;line-height:1.2;text-align:left}
footer .about p{
  font-size:14px;line-height:1.6;max-width:32ch;
  margin:0 auto;color:var(--ink-2);
}
footer h4{
  font-size:14px;margin-bottom:14px;letter-spacing:.04em;
  text-transform:uppercase;display:inline-block;position:relative;
  padding-bottom:8px;
}
footer h4::after{
  content:"";position:absolute;left:50%;bottom:0;
  transform:translateX(-50%);
  width:28px;height:2px;background:var(--bordo);
  border-radius:2px;opacity:.85;
}
footer .about-head h4{
  font-size:18px;text-transform:none;letter-spacing:.005em;
  padding-bottom:0;
}
footer .about-head h4::after{display:none}
footer a, footer span{
  font-size:14px;margin-bottom:5px;line-height:1.5;
}
.footer-bottom{
  margin:24px auto 0;padding-top:22px;font-size:12px;
  flex-direction:column;text-align:center;gap:8px;
  position:relative;border-top:1px solid var(--line);
}
.footer-bottom::before{
  content:"❖";position:absolute;top:-9px;left:50%;
  transform:translateX(-50%);
  background:var(--paper-3);padding:0 12px;
  color:var(--bordo);font-size:12px;opacity:.75;
}
.footer-bottom .warm{font-size:13.5px}

/* Placeholder реквизитов на мобиле — центруем как остальные секции, убираем
   отрицательный margin (на мобиле один столбец, baseline-сдвиг не нужен). */
.footer-legal--placeholder{
  align-items:center;text-align:center;
  margin-top:8px;padding:18px 20px;
}
.footer-legal--placeholder .t-placeholder-icon{margin:0 auto}
.footer-legal--placeholder .t-placeholder-text{text-align:center}

/* ===== A11y target sizes ≥44px на mobile (WCAG 2.5.8 AA) ===== */
.topbar-nav a{min-height:44px;display:inline-flex;align-items:center;padding:0 4px}
.card .heart-toggle{width:44px;height:44px}
.bc-inner a{padding:8px 4px}

/* Sidebar filter buttons — touch target ≥44px (был ~32px) */
.sb-btn{min-height:44px;padding:10px 12px}
.filter-toggle{min-height:44px}

/* ===== Single-column на узких экранах (320-360px) ===== */
.brands-list{grid-template-columns:1fr;gap:14px}
.care-grid{grid-template-columns:1fr;gap:14px}

/* ===== Card title clamp — длинные названия не ломают grid alignment ===== */
.card h3{
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;text-overflow:ellipsis;
}

/* ===== iPhone safe-area для cookie-banner и sticky topbar ===== */
#cookie-banner{padding-bottom:max(14px, env(safe-area-inset-bottom))}
.topbar{padding-top:env(safe-area-inset-top)}

/* ===== iOS tap highlight в бордовый — только на интерактивных, не на decorative ===== */
:where(a,button,[role=button],summary,label,input,select,textarea){-webkit-tap-highlight-color:rgba(122,24,24,.15)}

/* ===== Галерея товара: на мобиле скрываем стрелки, оставляем только свайп ===== */
.gm-nav{display:none}

/* ===== Catalog perf: отключаем cardFadeIn на 600+ карточках (OOM/crash на слабых GPU).
   Оставляем плавный fade-in только для сетки в целом, не на каждой карточке.
   Reveal-on-scroll: каждая карточка появляется по мере захода в viewport
   через IntersectionObserver (см. revealOnScroll() в app.js). ===== */
.card{
  animation:none !important;
  content-visibility:auto;
  contain-intrinsic-size: 0 340px;
}
.catalog{animation:cardFadeIn .35s ease-out backwards}
.js-cards-reveal .card,
.js-cards-reveal .brand-card{
  opacity:0;transform:translateY(28px) scale(.985);
  transition:opacity .55s cubic-bezier(.2,.75,.3,1),
             transform .55s cubic-bezier(.2,.75,.3,1);
  will-change:opacity,transform;
}
.js-cards-reveal .card.in-view,
.js-cards-reveal .brand-card.in-view{
  opacity:1;transform:translateY(0) scale(1);
}