/* ============================================================
   MRB Auto — UI kit shared responsive helpers
   Mobile-first (majority mobile traffic). Breakpoints:
     mobile   < 720px
     tablet   720–1023px
     desktop  >= 1024px
   ============================================================ */

.kit-wrap {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 720px) { .kit-wrap { padding: 0 24px; } }

/* ---- visibility helpers ---- */
.only-desktop { display: none !important; }
.only-mobile  { display: flex; }
@media (min-width: 1024px) {
  .only-desktop { display: flex !important; }
  .only-mobile  { display: none !important; }
}

/* ---- Mobile sticky add-to-cart: compact layout (< 720px) ---- */
.sticky-cart-m { flex: 1 1 0; min-width: 0; max-width: 100%; }
@media (max-width: 719px) {
  .sticky-cart-m > div { gap: 10px !important; padding: 10px 14px !important; }
  .sticky-cart-m > div > div:first-child > div:first-child { display: none !important; } /* thumbnail */
  .sticky-cart-m > div > div:nth-child(2) > span:nth-child(2) { display: none !important; } /* old price */
  .sticky-cart-m > div > div:nth-child(3) { display: none !important; } /* qty stepper */
  .sticky-cart-m > div > button { min-width: 0 !important; padding: 0 18px !important; }
}

/* ---- Header ---- */
.mrb-topbar { display: none; }
@media (min-width: 1024px) { .mrb-topbar { display: block; } }

.mrb-header__main {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 60px;
}
@media (min-width: 1024px) {
  .mrb-header__main { gap: 24px; height: 76px; }
}

.mrb-header__search { display: none; }
@media (min-width: 1024px) { .mrb-header__search { display: flex; } }

.mrb-header__phone { display: none; }
@media (min-width: 1024px) { .mrb-header__phone { display: flex; } }

.mrb-header__nav { display: none; }
@media (min-width: 1024px) { .mrb-header__nav { display: block; } }

.mrb-header__mobilesearch { display: block; }
@media (min-width: 1024px) { .mrb-header__mobilesearch { display: none; } }

.mrb-burger { display: inline-flex; }
@media (min-width: 1024px) { .mrb-burger { display: none; } }

/* ---- Product grid ---- */
.prod-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 720px)  { .prod-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (min-width: 1024px) { .prod-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; } }

.prod-grid--3 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 720px)  { .prod-grid--3 { grid-template-columns: repeat(3, 1fr); gap: 16px; } }

/* ---- Catalog: sidebar + results ---- */
.catalog-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 1024px) {
  .catalog-layout { grid-template-columns: 264px 1fr; gap: 32px; align-items: start; }
}
.catalog-sidebar { display: none; }
@media (min-width: 1024px) {
  .catalog-sidebar { display: block; position: sticky; top: 96px; }
}

/* ---- Product detail: gallery + info ---- */
.product-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 900px) {
  .product-layout { grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: start; }
}
.product-info-sticky {}
@media (min-width: 900px) {
  .product-info-sticky { position: sticky; top: 96px; }
}

/* ---- generic responsive columns ---- */
.cols-2 { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 720px) { .cols-2 { grid-template-columns: 1fr 1fr; } }

.cols-4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 900px) { .cols-4 { grid-template-columns: repeat(4, 1fr); } }

/* ---- responsive display headings ---- */
.h-hero  { font-size: clamp(2.4rem, 8vw, 5.25rem); }
.h-page  { font-size: clamp(1.9rem, 6vw, 3rem); }
.h-sec   { font-size: clamp(1.6rem, 5vw, 2.5rem); }

/* ---- hide scrollbar for horizontal scrollers ---- */
.hscroll { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.hscroll > * { scroll-snap-align: start; flex: 0 0 auto; }
.hscroll::-webkit-scrollbar { height: 0; }

/* ---- mobile drawer ---- */
.drawer-backdrop {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(14,15,18,0.55);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
.drawer-backdrop[data-open="true"] { opacity: 1; pointer-events: auto; }
.drawer-panel {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 91;
  width: min(320px, 84vw);
  background: var(--surface-page);
  transform: translateX(-100%);
  transition: transform var(--dur-slow) var(--ease-out);
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.drawer-panel[data-open="true"] { transform: translateX(0); }
.drawer-panel--right { left: auto; right: 0; transform: translateX(100%); }
.drawer-panel--right[data-open="true"] { transform: translateX(0); }

/* ============================================================
   Homepage responsive grids (retrofit)
   ============================================================ */
.home-hero {
  display: grid; grid-template-columns: 1fr; gap: 32px;
  padding: 40px 16px 48px;
}
@media (min-width: 768px)  { .home-hero { padding: 56px 24px 64px; } }
@media (min-width: 1024px) { .home-hero { grid-template-columns: 1.1fr 0.9fr; gap: 56px; padding: 72px 24px 80px; align-items: center; } }

.trust-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 24px 16px; }
@media (min-width: 1024px) { .trust-grid { grid-template-columns: repeat(4, 1fr); gap: 28px; padding: 28px 24px; } }

.brand-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 560px)  { .brand-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; } }
@media (min-width: 900px)  { .brand-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1200px) { .brand-grid { grid-template-columns: repeat(6, 1fr); gap: 14px; } }

.cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 720px)  { .cat-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (min-width: 1024px) { .cat-grid { grid-template-columns: repeat(4, 1fr); } }

.why-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 560px)  { .why-grid { grid-template-columns: 1fr 1fr; gap: 18px; } }
@media (min-width: 1024px) { .why-grid { grid-template-columns: repeat(4, 1fr); } }

.testi-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 768px)  { .testi-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; } }

.news-box {
  display: grid; grid-template-columns: 1fr; gap: 28px;
  padding: 32px 24px;
}
@media (min-width: 900px) { .news-box { grid-template-columns: 1.1fr 0.9fr; gap: 40px; padding: 56px; align-items: center; } }

.sec-pad { padding: 48px 0; }
@media (min-width: 1024px) { .sec-pad { padding: var(--section-y) 0; } }

.foot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 24px; }
@media (min-width: 480px)  { .foot-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; } }
.foot-brand { grid-column: 1 / -1; }
@media (min-width: 900px)  { .foot-brand { grid-column: auto; } }