/* ============================================================
   Масла.сайт — RESPONSIVE LAYER (load LAST on every page)
   Targets: laptop 1280, tablet/iPad 768–1024, phone ≤600 (~390)
   ============================================================ */

/* ---------- LAPTOP ≤1280 (tighten the widest grids) ---------- */
@media (max-width: 1320px) {
  .pgrid { grid-template-columns: repeat(4, 1fr); }
  .pdp-top { grid-template-columns: 420px 1fr 340px; gap: 24px; }
}

/* ---------- TABLET / iPad ≤1024 ---------- */
@media (max-width: 1024px) {
  .wrap { padding: 0 24px; }

  /* HEADER: drop utility bar, search to its own row, actions inline */
  .hd-util { display: none; }
  .hd-main .wrap { flex-wrap: wrap; row-gap: 12px; padding-top: 14px; padding-bottom: 14px; }
  .hd-logo { height: 34px; }
  .hd-search { order: 3; flex: 1 1 100%; }
  .hd-actions { order: 2; margin-left: auto; }

  /* sub-nav scrolls horizontally */
  .hd-sub > .wrap { overflow-x: auto; scrollbar-width: none; }
  .hd-sub > .wrap::-webkit-scrollbar { display: none; }
  .hd-sub > .wrap > a, .hd-sub > .wrap > .spacer { flex-shrink: 0; }
  .hd-sub > .wrap > .spacer { display: none; }

  /* compact-header overrides shouldn't fight the wrap */
  .hd.compact .hd-main .wrap { padding-top: 10px; padding-bottom: 10px; }

  /* grids */
  .pgrid { grid-template-columns: repeat(3, 1fr); }
  .vprops { grid-template-columns: repeat(2, 1fr); }
  .catgrid { grid-template-columns: repeat(2, 1fr); }
  .bigcats { grid-template-columns: repeat(2, 1fr); }
  .hub-apps { grid-template-columns: repeat(2, 1fr); }
  .brands { grid-template-columns: repeat(4, 1fr); }
  .arts { grid-template-columns: repeat(2, 1fr); }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-side { flex-direction: row; }
  .hero-promo { min-height: 200px; }
  .svc { grid-template-columns: 1fr; }
  .pdp-top { grid-template-columns: 1fr 320px; }
  .pdp-top .pg { grid-column: 1 / -1; }
}

/* ---------- disable hover mega/dropdowns on touch widths ---------- */
@media (max-width: 1024px) {
  .mega-overlay, .mega, .subdrop { display: none !important; }
}

/* ---------- SMALL TABLET ≤820 ---------- */
@media (max-width: 820px) {
  .pgrid { grid-template-columns: repeat(2, 1fr); }
  .pdp-top { grid-template-columns: 1fr; }
  .pdp-panel { grid-template-columns: 1fr; }
  .bb { position: static; }
  .ft-top .wrap { grid-template-columns: repeat(2, 1fr); }
  .ctastrip { grid-template-columns: 1fr; gap: 24px; }
  .cat-help { grid-template-columns: 1fr; gap: 24px; }
  .deliv-grid { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; gap: 28px; }
  .auth { grid-template-columns: 1fr; }
  .pay-grid { grid-template-columns: 1fr; }
}

/* ---------- PHONE ≤600 (~iPhone 390) ---------- */
@media (max-width: 600px) {
  .wrap { padding: 0 16px; }
  .sec { padding-top: 40px; }
  .sec-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .sec-head .t { font-size: 23px; }

  /* HEADER phone: trim actions to the essentials */
  .hd-actions { gap: 0; }
  .hd-act { min-width: 50px; padding: 6px 8px; font-size: 10px; }
  .hd-actions .hd-act:nth-of-type(1),
  .hd-actions .hd-act:nth-of-type(2) { display: none; } /* hide Сравнить, Избранное */
  .hd-search .field { height: 44px; }
  .hd-search .go { padding: 0 14px; }
  .hd-search .go span, .hd-search .scope { font-size: 13px; }

  /* one-column everything */
  .pgrid, .vprops, .catgrid, .bigcats, .hub-apps, .arts,
  .principles, .aud-cards, .steps-row, .docs-grid, .deliv-options,
  .pi-keyspecs, .pi-features, .cat-grid, .ft-top .wrap { grid-template-columns: 1fr; }
  .brands { grid-template-columns: repeat(2, 1fr); }
  .stat-band { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .hero-side { flex-direction: column; }

  /* typography down a step */
  .hero-main h1 { font-size: 30px; }
  .hero-main { padding: 32px 24px; min-height: 0; }
  .hero-main .lede { font-size: 15px; }
  .hero-main .cta-row { gap: 10px; }
  .pg-hero h1, .hub-head h1, .cat-head h1 { font-size: 26px; }
  .pg-hero .lead { font-size: 15px; }
  .pi-title { font-size: 21px; }
  .pg-main { min-height: 300px; }
  .pg-main .pdrum { width: 110px; height: 232px; }
  .bb-price { font-size: 27px; }

  /* service band / spreads stack */
  .svc-text { padding: 32px 24px; min-width: 0; }
  .svc-text h2 { font-size: 28px; }
  .svc-text p { max-width: none; }
  .svc-text .steps { flex-direction: column; gap: 14px; }
  .svc-text .ctas { flex-wrap: wrap; }
  .svc-text .ctas .btn { flex: 1 1 auto; }

  /* closing CTA strip — stack the two large buttons */
  .ctastrip .acts { flex-wrap: wrap; width: 100%; }
  .ctastrip .acts .btn { flex: 1 1 100%; }

  /* account manager card — stack info + actions */
  .acc-manager { flex-direction: column; align-items: stretch; }
  .acc-manager .acts { flex-wrap: wrap; }
  .acc-manager .acts .btn { flex: 1 1 auto; }

  /* track + auth padding */
  .track-form, .auth-form, .auth-aside { padding: 26px 22px; }
  .track-form .field-row { flex-direction: column; }

  /* tabs / toolbars wrap */
  .pdp-tabs { gap: 2px; }
  .pdp-tab { padding: 11px 12px; font-size: 14px; }
  .cat-toolbar { gap: 10px; }
  .prail-tabs { overflow-x: auto; flex-wrap: nowrap; }
  .prail-tabs::-webkit-scrollbar { display: none; }
  .ptab { flex-shrink: 0; }

  /* footer base stack */
  .ft-base .wrap { flex-direction: column; gap: 10px; align-items: flex-start; }
  .foot-base, .ft-base { text-align: left; }
}

/* ---------- very small ≤380 ---------- */
@media (max-width: 380px) {
  .brands { grid-template-columns: 1fr; }
  .hd-logo { height: 30px; }
}

/* ============================================================
   MOBILE NAV DRAWER + MOBILE HEADER  (hamburger ≤820)
   ============================================================ */

/* Burger button — hidden on desktop, shown ≤820 */
.hd-burger {
  display: none;
  align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-left: -8px;
  border-radius: var(--r-sm); color: var(--masla-navy); flex-shrink: 0;
}
.hd-burger:hover { background: var(--soft); color: var(--cyan-700); }

/* Slide-in drawer + scrim (base — only visible when .show toggled by burger) */
.mnav-scrim {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(19,22,29,0.55);
  opacity: 0; visibility: hidden; transition: opacity 220ms var(--ease-out), visibility 220ms;
}
.mnav-scrim.show { opacity: 1; visibility: visible; }
.mnav {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 210;
  width: min(360px, 88vw);
  background: #fff; box-shadow: var(--el-pop);
  transform: translateX(-100%); transition: transform 260ms var(--ease-out);
  display: flex; flex-direction: column;
  font-family: var(--font-body); color: var(--masla-navy);
}
.mnav.show { transform: translateX(0); }
.mnav-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: var(--hairline); flex-shrink: 0;
}
.mnav-logo { height: 34px; }
.mnav-x { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-sm); color: var(--masla-navy); }
.mnav-x:hover { background: var(--soft); }
.mnav-body { flex: 1; overflow-y: auto; padding: 10px 12px 28px; -webkit-overflow-scrolling: touch; }

/* primary catalog toggle */
.mnav-cat-toggle {
  display: flex; align-items: center; gap: 12px;
  background: var(--cyan); color: #fff; font-weight: 600; font-size: 15px;
  padding: 14px 16px; border-radius: var(--r-md); margin-bottom: 8px;
}
.mnav-cat-toggle .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5px; width: 16px; height: 16px; flex-shrink: 0; }
.mnav-cat-toggle .grid i { background: #fff; border-radius: 1.5px; }
.mnav-cat-toggle .t { flex: 1; }
.mnav-cev { color: rgba(255,255,255,0.85); transition: transform 180ms; }
.mnav-cev.up { transform: rotate(180deg); }

.mnav-cats { display: flex; flex-direction: column; padding: 4px 0 10px; }
.mnav-cats a {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 14px; font-size: 14.5px; color: var(--masla-navy); border-radius: var(--r-sm);
}
.mnav-cats a:hover { background: var(--soft); }
.mnav-cats a .ic { color: var(--cyan); flex-shrink: 0; }
.mnav-cats a .ct { margin-left: auto; font-size: 12px; color: var(--neutral-400); font-variant-numeric: tabular-nums; }

.mnav-grp { display: flex; flex-direction: column; border-top: var(--hairline); padding: 8px 0; }
.mnav-grp a {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px; font-size: 15.5px; font-weight: 600; color: var(--masla-navy); border-radius: var(--r-sm); min-height: 44px;
}
.mnav-grp a:hover { background: var(--soft); color: var(--cyan-700); }
.mnav-grp a .ic { color: var(--cyan); flex-shrink: 0; }
.mnav-grp.links a { font-weight: 500; font-size: 14.5px; color: var(--neutral-700); padding: 12px 14px; min-height: 0; }

/* account / utility action chips (2-col) */
.mnav-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  border-top: var(--hairline); padding: 12px 0 8px;
}
.mnav-actions .ma {
  position: relative; display: flex; align-items: center; gap: 9px;
  padding: 12px 14px; border-radius: var(--r-sm); background: var(--soft);
  font-size: 14px; font-weight: 600; color: var(--masla-navy); min-height: 46px;
}
.mnav-actions .ma:hover { background: var(--soft-2); }
.mnav-actions .ma svg { color: var(--cyan); flex-shrink: 0; }
.mnav-actions .ma.req { background: var(--cyan-50); color: var(--cyan-900); }
.mnav-actions .ma.req svg { color: var(--cyan-900); }
.mnav-actions .ma .cnt {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cyan); color: #fff; font-size: 11px; font-weight: 700; border-radius: var(--r-pill);
}
.mnav-actions .ma.req .cnt { background: var(--bronze); }

.mnav-call {
  display: flex; align-items: center; gap: 12px; margin-top: 14px;
  padding: 14px 16px; border-radius: var(--r-md); background: var(--masla-navy); color: #fff;
}
.mnav-call svg { color: var(--cyan); flex-shrink: 0; }
.mnav-call b { display: block; font-size: 17px; }
.mnav-call small { display: block; font-size: 12px; color: rgba(255,255,255,0.7); margin-top: 2px; }

/* ---- activate mobile header ≤820 ---- */
@media (max-width: 820px) {
  .hd-burger { display: inline-flex; }

  /* nav lives in the drawer now — drop the chip subnav row */
  .hd-sub { display: none; }

  /* search must shrink: kill the input's intrinsic min-width */
  .hd-search input { min-width: 0; }
  .hd-search { flex: 1 1 100%; order: 3; }

  /* trim header actions to the single primary action (rest in drawer) */
  .hd-actions .hd-act:nth-of-type(1),
  .hd-actions .hd-act:nth-of-type(2) { display: none; }
  .hd-actions { margin-left: auto; }
}

/* ---- phone search simplification ≤600 ---- */
@media (max-width: 600px) {
  .hd-search .scope { display: none; }
  .hd-search .go { padding: 0 14px; margin-right: 5px; }
  .hd-search .go span { display: none; }   /* icon-only submit */
  .hd-search input { padding: 0 14px; font-size: 16px; }  /* 16px = no iOS zoom-on-focus */
  .hd-search .field { height: 46px; }
}

/* ---- overflow safety net (clip any stray full-bleed child) ---- */
.mk { overflow-x: clip; }

/* ============================================================
   MOBILE BOTTOM NAV (.bnav / .bcontact / .bsheet)
   Реализовано в ПЛАГИНЕ — модуль BottomMenu, вид "modern".
   Здесь намеренно отсутствует (раньше было в дизайн-исходнике).
   ============================================================ */
/* ---- override inline grid-template + collapse split items ---- */
@media (max-width: 820px) {
  /* Agents.jsx forces repeat(4,1fr) inline → beat it with !important */
  .principles { grid-template-columns: repeat(2, 1fr) !important; }
  /* split text+visual grid items must be allowed to shrink */
  .split > * { min-width: 0; }
  .split-visual .quote { max-width: 100%; }
}
@media (max-width: 600px) {
  .principles { grid-template-columns: 1fr !important; }
  .split-visual { min-height: 240px; }
  /* wide spec table → horizontal scroll instead of clip */
  .md-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .md-table { min-width: 460px; }
  .tds-table { min-width: 620px; }
}

/* ---- Drawer каталог-аккордеон (серверный рендер): свёрнут по умолчанию, JS-тоггл .open ---- */
.mnav-cats { display: none; }
.mnav-cats.open { display: flex; }

/* ---- Пока шторка открыта — прячем нижнее меню плагина (модуль BottomMenu),
   чтобы оно не торчало сквозь затемнение (z-index бара выше scrim шторки). ---- */
.cwt-drawer-open .wpaic-bmenu,
.cwt-drawer-open .wpaic-bmenu__overlay { display: none !important; }