/* ============================================================
   EUROAPPLIANCES — MOBILE CSS v2.0
   Full redesign for phones (≤768px) and tablets (≤1024px)
   ============================================================ */

/* ── 1. GLOBAL ──────────────────────────────────────────────── */
@media only screen and (max-width: 768px) {



*, *::before, *::after { box-sizing: border-box; }
.container { padding: 0 16px !important; max-width: 100% !important; }

/* ── 2. TOPBAR ──────────────────────────────────────────────── */
.topbar { display: none !important; }

/* ── 3. HEADER ──────────────────────────────────────────────── */
#site-header {
  position: sticky !important; top: 0 !important;
  z-index: 400 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.1) !important;
}
.header-inner {
  height: 60px !important;
  padding: 0 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
#site-nav { display: none !important; }
.hdr-cta { display: none !important; }
.mob-menu-btn { display: flex !important; order: 3 !important; }
.logo-link { flex: 1 !important; }
.logo-link svg, .logo-link img { width: 130px !important; height: auto !important; }
.hdr-right {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  order: 2 !important;
}
.ibtn { width: 38px !important; height: 38px !important; }
.hdr-cta-btn { display: none !important; }
.search-bar .container { padding: 10px 16px !important; }

/* ── 4. HERO ────────────────────────────────────────────────── */
.hero {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto !important;
  min-height: auto !important;
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
}
.hero-left {
  order: 1 !important;
  padding: 24px 20px 20px !important;
  border-right: none !important;
  border-bottom: 1px solid var(--border) !important;
  background: var(--off-white) !important;
}
.hero-tag { margin-bottom: 16px !important; }
h1.hero-title {
  font-size: 28px !important;
  line-height: 1.15 !important;
  margin-bottom: 4px !important;
}
.hero-title-it {
  font-size: 28px !important;
  line-height: 1.15 !important;
  margin-bottom: 16px !important;
}
.hero-sub {
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin-bottom: 20px !important;
}
.hero-acts {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-bottom: 20px !important;
}
.hero-acts .btn-primary,
.hero-acts .btn-outline {
  width: 100% !important;
  justify-content: center !important;
  padding: 13px 20px !important;
  font-size: 12px !important;
}
.hero-stats {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 0 !important;
  padding-top: 20px !important;
}
.stat-num { font-size: 24px !important; }
.stat-lbl { font-size: 10px !important; }
.hero-right {
  order: 2 !important;
  height: 220px !important;
  min-height: 220px !important;
  max-height: 220px !important;
}

/* ── 5. TRUST BAR ───────────────────────────────────────────── */
.trust-bar { overflow-x: auto !important; }
.trust-grid {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: max-content !important;
  min-width: 100% !important;
}
.trust-item {
  flex: 0 0 auto !important;
  min-width: 160px !important;
  padding: 14px 16px !important;
}
.trust-ttl { font-size: 12px !important; }
.trust-desc { font-size: 10px !important; }
.trust-icon { width: 32px !important; height: 32px !important; }


/* ── 6. BRANDS SECTION ──────────────────────────────────────── */
.brands-section { padding: 24px 0 !important; }
.brands-hdr { margin-bottom: 16px !important; }
.brands-hdr .eyebrow { font-size: 9px !important; }
.brands-hdr h2 { font-size: 20px !important; }
.brands-rail {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
}
.brand-tile {
  padding: 16px 8px 12px !important;
  flex-direction: column !important;
}
.brand-logo-box {
  height: 36px !important;
}
.brand-logo-box svg, .brand-logo-box img {
  max-width: 80px !important;
  max-height: 34px !important;
}
.brand-country, .brand-sku { display: none !important; }

/* ── 7. CATEGORIES ──────────────────────────────────────────── */
.categories-section { padding: 24px 0 !important; }
.sec-hdr {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin-bottom: 16px !important;
}
.sec-title { font-size: 24px !important; }
.cat-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  grid-template-rows: auto !important;
  gap: 8px !important;
}
.cat-tile {
  height: 160px !important;
  grid-column: span 1 !important;
}
.c3, .c4, .c5, .c7, .c12, .col {
  grid-column: span 1 !important;
}
.cat-name { font-size: 15px !important; }
.cat-meta { font-size: 11px !important; }
.cat-badge { font-size: 8px !important; }

/* ── 8. PRODUCTS ────────────────────────────────────────────── */
.products-section { padding: 24px 0 !important; }
.products-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 8px !important;
  background: transparent !important;
  border: none !important;
}
.pcard {
  border: 1px solid var(--border) !important;
  border-top: 2px solid transparent !important;
}
.pcard .pimg { height: 160px !important; }
.pcard .pname { font-size: 12px !important; }
.pcard .pprice { font-size: 15px !important; }
.pf-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-bottom: 16px !important;
}
.pf-btn {
  padding: 6px 12px !important;
  font-size: 10px !important;
}

/* ── 9. PROMO / DEALS ───────────────────────────────────────── */
.promo-section { padding: 28px 0 !important; }
.promo-inner {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}
.promo-header { padding-right: 0 !important; }
.promo-main-title { font-size: 24px !important; }
.promo-deals-grid {
  grid-template-columns: 1fr !important;
}
.promo-mini-deals {
  grid-template-columns: 1fr 1fr !important;
}
.promo-strip {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  padding: 28px 16px !important;
}
.promo-strip > * { text-align: center !important; }

/* ── 10. TESTIMONIALS ───────────────────────────────────────── */
.testi-section { padding: 28px 0 !important; }
.testi-hdr {
  flex-direction: column !important;
  gap: 10px !important;
  margin-bottom: 20px !important;
}
.testi-grid {
  display: flex !important;
  overflow-x: auto !important;
  gap: 12px !important;
  scroll-snap-type: x mandatory !important;
  scrollbar-width: none !important;
  padding-bottom: 8px !important;
}
.testi-grid::-webkit-scrollbar { display: none !important; }
.tcard {
  flex: 0 0 85vw !important;
  scroll-snap-align: start !important;
}


/* ── 11. CTA / FORM ─────────────────────────────────────────── */
.cta-section { padding: 28px 0 !important; }
.cta-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}
.cta-feats { order: 2 !important; }
.cta-grid > div:last-child { order: 1 !important; }
.cta-title { font-size: 22px !important; }
.cta-desc { font-size: 13px !important; }
.cta-feat { gap: 12px !important; }
.cta-feat-num { font-size: 26px !important; min-width: 32px !important; }
.cta-feat h4 { font-size: 13px !important; }
.cta-feat p { font-size: 12px !important; }
.form-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.finput {
  padding: 12px 14px !important;
  font-size: 16px !important; /* prevent iOS zoom */
  border-radius: 0 !important;
}
.fsubmit {
  width: 100% !important;
  padding: 14px !important;
  font-size: 12px !important;
}

/* ── 12. BLOG / TƯ VẤN ─────────────────────────────────────── */
.tu-van-section { padding: 24px 0 36px !important; }
.tv-header {
  flex-direction: column !important;
  gap: 8px !important;
  margin-bottom: 16px !important;
}
.tv-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
.tv-card { width: 100% !important; }
.tv-card.featured .tv-img-bg { height: 200px !important; }
.tv-img-bg { height: 170px !important; }
.tv-bottom-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin-top: 12px !important;
}
.tv-title { font-size: 16px !important; }
.tv-card.featured .tv-title { font-size: 20px !important; }

/* ── 13. FOOTER ─────────────────────────────────────────────── */
.footer-main {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  padding: 28px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
.footer-main > * { width: 100% !important; }
.flogo-area { margin-bottom: 4px !important; }
.flogo-name { font-size: 18px !important; }
.fabout { font-size: 13px !important; line-height: 1.6 !important; }
.flinks {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}
.flink { font-size: 13px !important; padding: 4px 0 !important; }
.fcol-ttl { font-size: 11px !important; margin-bottom: 12px !important; }
.fbrand-links {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
}
.fbl {
  padding: 8px 10px !important;
  font-size: 11px !important;
}
.fcontact { font-size: 12px !important; }
.footer-bottom {
  flex-direction: column !important;
  gap: 10px !important;
  text-align: center !important;
  padding: 16px 0 !important;
}
.fcopy { font-size: 11px !important; }
.flegals {
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}
.flegals a { font-size: 11px !important; }
.social-links { justify-content: center !important; }

/* ── 14. BRAND HERO BANNERS ─────────────────────────────────── */
.bo-hero, .si-hero, .ml-hero, .lh-hero {
  height: 65vw !important;
  max-height: 340px !important;
  min-height: 220px !important;
}
.bo-hero-content, .si-hero-content,
.ml-hero-content, .lh-hero-content {
  padding: 0 16px !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  padding-bottom: 60px !important;
}
.bo-hero-left, .si-hero-left-new,
.ml-hero-left, .lh-hero-left {
  flex: none !important;
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  justify-content: flex-end !important;
}
.bo-hero-h1, .si-hero-h1, .ml-hero-h1, .lh-hero-h1 {
  font-size: 24px !important;
  margin-bottom: 8px !important;
}
.bo-hero-sub, .si-hero-sub, .ml-hero-sub, .lh-hero-sub {
  display: none !important;
}
.bo-hero-acts, .si-hero-btns, .ml-hero-btns, .lh-hero-btns {
  gap: 8px !important;
  flex-wrap: wrap !important;
}
.bo-btn-primary, .si-btn-prim, .ml-btn-prim,
.lh-btn-prim, .bo-btn-ghost, .si-btn-ghost,
.ml-btn-ghost, .lh-btn-ghost {
  padding: 9px 18px !important;
  font-size: 10px !important;
}
.bo-hero-right-info, .si-hero-stats-wrap,
.ml-hero-stats-new, .lh-hero-stats { display: none !important; }
.bo-logo-area, .si-hero-logo-wrap,
.ml-hero-logo, .lh-logo-wrap { margin-bottom: 10px !important; }
.bo-logo-img, .lh-logo-img { height: 28px !important; }
.bo-hero-eyebrow, .si-hero-eyebrow,
.ml-hero-eyebrow, .lh-hero-eyebrow { font-size: 8px !important; margin-bottom: 8px !important; }

/* Arrows & dots */
.bo-arr, .si-arr, .ml-arr, .lh-arr {
  width: 36px !important; height: 36px !important;
}
.bo-arr svg, .si-arr svg, .ml-arr svg, .lh-arr svg {
  width: 16px !important; height: 16px !important;
}
.bo-dots, .si-dots, .ml-dots, .lh-dots {
  left: 16px !important; bottom: 10px !important;
}

/* ── 15. BRAND PAGES CONTENT ─────────────────────────────────── */
/* Serie / Tech bars */
.bo-serie-bar, .si-tech-bar, .lh-cat-nav {
  position: relative !important; top: 0 !important;
}
.bo-serie-tabs, .si-tech-tabs, .lh-cat-tabs {
  overflow-x: auto !important; scrollbar-width: none !important;
}
.bo-serie-tabs::-webkit-scrollbar,
.si-tech-tabs::-webkit-scrollbar { display: none !important; }
.bo-serie-tab, .si-tech-tab { padding: 12px 14px !important; }

/* Category carousels */
.bo-cat-scroll-outer, .si-cat-scroll-outer,
.ml-cat-scroll-outer { margin-bottom: 24px !important; }
.bo-cat-tile, .si-cat-tile, .ml-cat-tile {
  width: 140px !important;
}
.bo-cat-tile-box, .si-cat-tile-box, .ml-cat-tile-box {
  width: 140px !important; height: 140px !important;
}

/* Liebherr */
.lh-wrap { padding: 0 16px !important; }
.lh-cat-grid {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 8px !important;
}
.lh-tech-grid { grid-template-columns: 1fr !important; }
.lh-monolith-grid, .lh-why-grid {
  grid-template-columns: 1fr !important;
  gap: 24px !important;
}
.lh-monolith-img { height: 240px !important; }
.lh-prod-grid { grid-template-columns: repeat(2, 1fr) !important; }
.lh-section { padding: 36px 0 !important; }
.lh-title { font-size: 26px !important; }

/* Gaggenau */
.gg-hero { height: 65vw !important; max-height: 340px !important; }

/* Section headers */
.bo-section-header, .si-section-header,
.ml-section-header { flex-direction: column !important; gap: 10px !important; margin-bottom: 20px !important; }
.bo-products-grid, .si-products-grid,
.ml-products-grid {
  grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important;
}

/* ── 16. MOB NAV (ensure visible when open) ─────────────────── */
.mob-nav.open {
  display: block !important;
  visibility: visible !important;
  transform: translateX(0) !important;
}
.mob-nav-backdrop.mob-bkd-visible {
  display: block !important; opacity: 1 !important;
}

} /* end @media 768px */

/* ── 480px: small phones ─────────────────────────────────────── */
@media only screen and (max-width: 480px) {
  h1.hero-title, .hero-title-it { font-size: 24px !important; }
  .hero-right { height: 180px !important; min-height: 180px !important; max-height: 180px !important; }
  .hero-acts { flex-direction: column !important; }
  .hero-acts .btn-primary, .hero-acts .btn-outline { width: 100% !important; }
  .cat-grid { grid-template-columns: 1fr 1fr !important; }
  .cat-tile { height: 145px !important; }
  .brands-rail { grid-template-columns: repeat(2, 1fr) !important; }
  .products-grid { grid-template-columns: 1fr 1fr !important; }
  .trust-item { min-width: 140px !important; }
  .bo-hero, .si-hero, .ml-hero, .lh-hero { height: 75vw !important; max-height: 300px !important; }
  .lh-cat-grid { grid-template-columns: 1fr 1fr !important; }
  .tv-bottom-grid { grid-template-columns: 1fr !important; }
  .fbrand-links { grid-template-columns: 1fr !important; }
  .tcard { flex: 0 0 90vw !important; }
}


/* ══ BRAND PAGES SHARED MOBILE ══ */
/* ═══════════════════════════════════════════════════════
   SHARED: Brand page product cards mobile
═══════════════════════════════════════════════════════ */
@media screen and (max-width:768px){
/* Touch: disable hover transforms */
.bo-cat-tile:hover .bo-cat-tile-box,
.si-cat-tile:hover .si-cat-tile-box,
.ml-cat-tile:hover .ml-cat-tile-box,
.lh-cat-tile:hover,
.gg-cat-box:hover,
.vz-cat-tile:hover .vz-cat-tile-box{
  transform:none!important;
}
/* Touch active state */
.bo-cat-tile:active .bo-cat-tile-box,
.si-cat-tile:active .si-cat-tile-box,
.vz-cat-tile:active .vz-cat-tile-box{
  transform:scale(.97)!important;
}
}

/* Homepage products grid - mobile 2 cols */
@media only screen and (max-width:768px){
  #productsGrid{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:1px !important;
    background:var(--border) !important;
    border:1px solid var(--border) !important;
    overflow:hidden !important;
    width:100% !important;
  }
  #productsGrid .pcard{
    background:#fff !important;
    border:none !important;
    min-width:0 !important;
    width:100% !important;
  }
}