/* ============================================================
   4Tex Spare Parts Shop — responsive.css
   Breakpoints: 1200 / 992 (nav) / 820 / 640 / 460
   Shop-grid specific rules live in shop.css; this file covers
   the shared header/footer/layout primitives ported from 4tex.at.
   ============================================================ */

@media (max-width: 1200px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-brand { grid-column: 1 / -1; margin-bottom: var(--sp-2); }
}

/* ---- <= 992px : mobile navigation (slide-in panel from right) --- */
@media (max-width: 992px) {
  .burger { display: flex; position: relative; z-index: 101; }
  .header-search { display: none; }
  .nav {
    position: fixed; inset: var(--header-h) 0 0 auto; width: min(360px, 86vw);
    z-index: 100;
    background: #FFFFFF; border-left: 1px solid #ECECEC;
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    padding: clamp(1.25rem, 4vw, 2rem); gap: 0;
    transform: translateX(100%); transition: transform .32s var(--ease);
    box-shadow: -18px 0 50px rgba(0,0,0,.12); overflow-y: auto;
    height: calc(100dvh - var(--header-h));
  }
  .nav.is-open { transform: translateX(0); }
  .nav__list { flex-direction: column; align-items: stretch; gap: 2px; width: 100%; }
  .nav__link { padding: .95rem .5rem; font-size: 1rem; border-bottom: 1px solid #F1F1F1; }
  .nav__link::after { left: .5rem; right: auto; width: 22px; bottom: .55rem; transform: scaleX(1); }
  .nav__link:not(.is-active)::after { opacity: 0; }
  .nav__mobile-extras { display: flex; flex-direction: column; align-items: flex-start;
    gap: 1.1rem; margin-top: clamp(1.5rem, 4vw, 2rem); }
  .nav__mobile-extras .header-search { display: block; width: 100%; }
  .nav__mobile-extras .header-search__input { width: 100%; }
  /* The dropdown defaults to width:min(420px,92vw) anchored at right:0,
     which is wider than this narrow drawer column and overflows off the
     left edge of the screen. Constrain it to exactly the input's width. */
  .nav__mobile-extras .search-results { left: 0; right: 0; width: 100%; }
  .header-actions { display: none; }
}

/* ---- <= 820px : stack grids -------------------------------- */
@media (max-width: 820px) {
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; gap: var(--sp-4); }
}

/* ---- <= 640px : single column ------------------------------- */
@media (max-width: 640px) {
  :root { --header-h: 60px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .brand__name { display: none; }
  .footer-bottom { flex-direction: column; }
}

@media (max-width: 400px) {
  .btn { width: 100%; }
}

@media print {
  .site-header, .site-footer, .burger, .nav, .cart-drawer, .back-to-top { display: none; }
  body { color: #000; }
}