/* =========================================================================
   LIVA — Shared Responsive Overrides (mobile / tablet)
   Loaded on every frontend page AFTER the theme + page custom CSS so it wins.
   Targets the custom LIVA sections that the theme's Bootstrap grid doesn't cover.
   ========================================================================= */

/* never let anything cause a horizontal scrollbar on phones */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video { max-width: 100%; height: auto; }

/* ===== BIG / near-fullscreen image lightbox (Magnific Popup) — all pages ===== */
.mfp-bg { background: #0d0f12 !important; opacity: .96 !important; }
.mfp-img {
    max-width: 96vw !important;
    max-height: 92vh !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
}
.mfp-figure { display: flex; align-items: center; justify-content: center; min-height: 90vh; }
.mfp-figure::after { display: none !important; }            /* drop the small white box shadow */
.mfp-img-container .mfp-content { width: 100% !important; max-width: 100% !important; }
.mfp-figure figure { margin: 0 auto; }
.mfp-close { font-size: 34px !important; opacity: 1 !important; color: #fff !important; }
.mfp-arrow { opacity: .85 !important; transform: scale(1.3); }
.mfp-arrow:hover { opacity: 1 !important; }
.mfp-counter { font-size: 14px !important; color: #fff !important; }

/* ---------------------------------------------------------------- TABLET ≤ 991px */
@media (max-width: 991px) {

  /* Home — product showcase rows: stack image over text */
  .liva-prow, .liva-prow.rev { grid-template-columns: 1fr !important; }
  .liva-prow.rev .liva-pimg { order: 0 !important; }
  .liva-pinfo { padding: 30px 26px !important; }
  .liva-pimg img { width: 100% !important; }
  .liva-pfeat { grid-template-columns: 1fr 1fr !important; }

  /* Product detail — drop the sticky two-column to single column */
  .pdx-gallery { position: static !important; top: auto !important; }
  .pdx-statusline { font-size: 11px !important; }

  /* generic: any 2-col custom grid → keep 2 but tighten */
  .pdx-gstrip { gap: 10px !important; }
}

/* ---------------------------------------------------------------- PHONE ≤ 767px */
@media (max-width: 767px) {

  /* global section spacing trim (theme uses big paddings) */
  .space, .space-top { padding-top: 60px !important; }
  .space, .space-bottom { padding-bottom: 60px !important; }

  /* titles scale down so they don't overflow */
  .sec-title, .title-area .sec-title { font-size: 26px !important; line-height: 1.25 !important; }
  h1 { font-size: 30px !important; line-height: 1.2 !important; }
  h2 { font-size: 24px !important; }

  /* ---- Home: Why-Choose feature boxes ---- */
  .why-livabox { padding: 26px 22px !important; }
  .why-livaicon { width: 60px !important; height: 60px !important; font-size: 24px !important; margin-bottom: 18px !important; }

  /* ---- Home: product feature list one column ---- */
  .liva-pfeat { grid-template-columns: 1fr !important; }
  .liva-pinfo { padding: 26px 22px !important; }

  /* ---- Home: projects + services ---- */
  .project-box2, .service-block2 { margin-bottom: 18px; }

  /* ---- Brands grid ---- */
  .brand-card { height: 78px !important; }
  .brand-card .liva-brandimg { max-width: 120px !important; max-height: 56px !important; }

  /* ---- About page custom cards ---- */
  .abx-jcard, .abx-vcard, .abx-prod2-card { margin-bottom: 16px; }

  /* ---- Contact form ---- */
  .contact-form3 { padding: 24px 18px !important; }
  .contact-media { margin-bottom: 16px; }

  /* ---- Product listing cards (polaroid) ---- */
  .product-grid { margin-bottom: 22px; }

  /* ---- Product DETAIL hero/title ---- */
  .pdx-title { font-size: 30px !important; line-height: 1.18 !important; }
  .pdx-stage { aspect-ratio: 4 / 3.6 !important; }
  .pdx-stage-code { top: 10px !important; left: 10px !important; font-size: 11px !important; padding: 6px 8px !important; }
  .pdx-tagrow { gap: 14px !important; }
  .pdx-keyrow { flex-wrap: wrap !important; gap: 12px !important; }
  .pdx-btnrow, .pdx-cta-row { flex-direction: column !important; align-items: stretch !important; }
  .pdx-btn { width: 100% !important; justify-content: center !important; }
  .pdx-sw-row { flex-wrap: wrap !important; }
  .pdx-feat-grid, .pdx-specwrap { grid-template-columns: 1fr !important; }
  .pdx-relgrid { grid-template-columns: 1fr 1fr !important; }
  /* hide the heavy tech labels on small screens to keep it clean */
  .pdx-mlabel { display: none !important; }

  /* ---- Footer (home + inner) stack ---- */
  .footer-widget, .widget_about { margin-bottom: 28px; text-align: left; }

  /* ---- Inner page banners: shorter on phone ---- */
  .breadcumb-wrapper, .liva-inner-banner { min-height: 220px !important; padding: 70px 0 50px !important; }

  /* tap targets: buttons full-ish width & comfortable */
  .th-btn { padding: 14px 24px !important; }
}

/* ---------------------------------------------------------------- SMALL PHONE ≤ 480px */
@media (max-width: 480px) {
  .sec-title, .title-area .sec-title { font-size: 23px !important; }
  h1, .pdx-title { font-size: 26px !important; }
  .liva-pfeat { grid-template-columns: 1fr !important; }
  .pdx-relgrid { grid-template-columns: 1fr !important; }
  .why-livabox { padding: 22px 18px !important; }
  .brand-card .liva-brandimg { max-width: 100px !important; }
  .pdx-statusline { gap: 5px !important; font-size: 10px !important; }
}