/* ═══════════════════════════════════════════════════════════════
   PAFEX Mobile & Responsive Stylesheet
   Covers: all custom sections on index, about, services, contact,
           tracking, pickup, documents, login pages
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Viewport & base (mobile only — desktop untouched) ───── */
@media (max-width: 1024px) {
  *, *::before, *::after { box-sizing: border-box; }
  html, body { overflow-x: hidden !important; max-width: 100%; }
  img { max-width: 100%; height: auto; }

  app-root, app-header, app-footer,
  .container--fluid, section, main,
  app-home, app-will-love-us, app-sustainable-transport,
  app-logistics-flow, app-we-serve, app-we-can-deliver {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* ── Hide pafex / broken Angular sections on mobile only ── */

  /* Hero banner slider — empty white block on mobile */
  .home--banner, app-home-banner-slider, app-banner-slider { display: none !important; }

  /* pafex-branded sections */
  app-sustainable-transport  { display: none !important; }
  app-we-can-deliver         { display: none !important; }
  app-logistics-flow         { display: none !important; }
  app-will-love-us           { display: none !important; }
  app-insights-news-slider   { display: none !important; }
  app-customers-we-serve     { display: none !important; }
  app-business-enquiries     { display: none !important; }
  app-business-enquiry-form  { display: none !important; }

  /* "Important Update" sticky bar + chatbot */
  app-sticky-footer          { display: none !important; }
  .sticky--container         { display: none !important; }
  .sticky--btn               { display: none !important; }
  [class*="sticky--"]        { display: none !important; }
  app-lottie-animation       { display: none !important; }
}

/* ── 2. Always hidden on all screen sizes ───────────────────── */
app-will-love-us { display: none !important; }
app-home-banner-slider { display: none !important; }

/* ── Header — vertically center nav & icons relative to logo ── */
app-header .header--menus,
app-header .header--others-list {
  align-self: center !important;
}

/* ── Logo size — cap height so header stays compact (all screens) ── */
img.logo, img.logo-img {
  max-height: 90px !important;
  width: auto !important;
  height: auto !important;
}

/* ── 3. About page — fix horizontal overflow & layout ───────── */
@media (max-width: 1024px) {
  /* Clip the entire about page so overflowing SVGs don't add horizontal scroll */
  app-about-us, app-static-banner, app-about-vision,
  app-about-values, app-animate-numbers, app-timelines {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* Hide the decorative SVG curves that extend beyond the viewport */
  .static--banner-svg1, .static--banner-svg2,
  .about-animation-2, .svgc { display: none !important; }

  /* Hero section — stack vertically, shrink font */
  .static--banner {
    flex-direction: column !important;
    padding: 24px 20px 32px !important;
    align-items: flex-start !important;
  }
  .static--banner .width--two-50 {
    width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 24px !important;
  }
  .static--banner .fs--90 {
    font-size: 32px !important;
    line-height: 1.2 !important;
    margin-bottom: 16px !important;
  }
  .static--banner .fs--18 { font-size: 15px !important; }
  /* Truck / hero image */
  .static--banner > span.pl--80,
  .static--banner > span[class*="pl--"] {
    padding-left: 0 !important;
    width: 100% !important;
  }
  .static--banner > span img {
    width: 100% !important;
    max-width: 300px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
  }

  /* Vision / Mission / Purpose cards — stack vertically */
  .about--vision-card {
    flex-direction: column !important;
    width: 100% !important;
  }
  .about--vision-card-content {
    width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .about--vision-card-img {
    max-width: 100% !important;
    width: 100% !important;
    margin-top: 16px !important;
  }
  .about--vision-card .fs--46 {
    font-size: 22px !important;
    line-height: 1.4 !important;
  }
  /* Remove sticky stacking on mobile */
  .about--vision [style*="position: sticky"],
  [style*="position: sticky"][style*="top: 252px"] {
    position: relative !important;
    top: auto !important;
  }

  /* Values section — fix ul width: max-content that causes overflow */
  .about--values { flex-direction: column !important; }
  .about--values ul {
    width: 100% !important;
    justify-content: flex-start !important;
  }
  .about--values ul li { margin-bottom: 12px !important; }
  .about--values .fs--50 { font-size: 28px !important; }

  /* Slick carousel — clip the wide inline-width track */
  .willLoveUs--counts { overflow: hidden !important; }
  .willLoveUs--counts-carousel { overflow: hidden !important; }
  .slick-list { overflow: hidden !important; }

  /* Timeline section */
  .about--timelines { overflow-x: hidden !important; padding-top: 60px !important; }
  .about--timelines ul li { width: 90vw !important; }
  .about--timelines ul li .image { max-width: 100% !important; }
  .about--timelines .fs--50 { font-size: 26px !important; }
}

/* ── 3. Desktop nav hidden on mobile (≤1024px already handled)  */
/* Show hamburger on mobile */
@media (max-width: 1024px) {
  .header--menus { display: none !important; }
  .header--others-list { display: none !important; }
  .bg--primary-red.pl--25 { display: none !important; } /* desktop login btn */
}

/* ── 3. Page hero sections ──────────────────────────────────── */
@media (max-width: 768px) {
  /* Red hero banners */
  section[style*="linear-gradient(135deg,#ED1C24"] {
    padding: 48px 20px !important;
  }
  section[style*="linear-gradient(135deg,#ED1C24"] h1,
  section[style*="linear-gradient(135deg,#ED1C24"] h2 {
    font-size: 30px !important;
    line-height: 1.25 !important;
  }
  section[style*="linear-gradient(135deg,#ED1C24"] p {
    font-size: 15px !important;
  }
  section[style*="linear-gradient(135deg,#ED1C24"] div[style*="display:flex"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  section[style*="linear-gradient(135deg,#ED1C24"] a {
    text-align: center !important;
  }

  /* PAFEX hero strip on index */
  section[style*="linear-gradient(135deg,#ED1C24"] img {
    height: 52px !important;
  }
}

/* ── 4. Quick tracking bar ──────────────────────────────────── */
@media (max-width: 768px) {
  section[style*="background:#1a3a6b"] form[style*="display:flex"] {
    flex-direction: column !important;
    gap: 10px !important;
  }
  section[style*="background:#1a3a6b"] form input {
    min-width: unset !important;
    width: 100% !important;
  }
}

/* ── 5. Section headings ────────────────────────────────────── */
@media (max-width: 768px) {
  h2[style*="font-size:42px"],
  h2[style*="font-size:48px"],
  h2[style*="font-size:50px"],
  h2[style*="font-size:38px"] {
    font-size: 26px !important;
    line-height: 1.3 !important;
  }
  h2[style*="font-size:34px"],
  h2[style*="font-size:36px"] {
    font-size: 22px !important;
  }
  h2[style*="font-size:30px"] {
    font-size: 20px !important;
  }
}

/* ── 6. Service cards & content grids ──────────────────────── */
@media (max-width: 768px) {
  /* Service detail rows (services.html) */
  div[style*="display:flex;flex-wrap:wrap;align-items:center;gap:40px"] {
    flex-direction: column !important;
    padding: 28px 20px !important;
  }
  div[style*="display:flex;flex-wrap:wrap;align-items:center;gap:40px"] > img,
  div[style*="display:flex;flex-wrap:wrap;align-items:center;gap:40px"] > div[style*="width:100px"] {
    width: 72px !important;
    height: 72px !important;
    margin: 0 auto !important;
  }

  /* Small service cards grid (index What We Do) */
  div[style*="width:220px"] {
    width: calc(50% - 12px) !important;
    min-width: unset !important;
    padding: 20px 14px !important;
  }
  div[style*="width:260px"] {
    width: 100% !important;
    min-width: unset !important;
  }

  /* About vision cards */
  div[style*="width:180px"] {
    width: calc(50% - 8px) !important;
    min-width: unset !important;
  }
}

@media (max-width: 480px) {
  div[style*="width:220px"] {
    width: 100% !important;
  }
  div[style*="width:180px"] {
    width: 100% !important;
  }
}

/* ── 7. Stats bar ───────────────────────────────────────────── */
@media (max-width: 768px) {
  section[style*="background:#1a3a6b"][style*="padding:64px"] > div,
  div[style*="background:#1a3a6b"][style*="padding:64px"] > div {
    flex-wrap: wrap !important;
  }
  section[style*="background:#1a3a6b"][style*="padding:64px"] > div > div,
  .pafex-stat-item {
    min-width: 48% !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,.15) !important;
    padding: 16px !important;
  }
  div[style*="font-size:52px"] {
    font-size: 36px !important;
  }
}

/* ── 8. Why Choose PAFEX cards ──────────────────────────────── */
@media (max-width: 768px) {
  div[style*="border-left:5px solid #ED1C24"],
  div[style*="border-left:5px solid #1a3a6b"] {
    min-width: unset !important;
    width: 100% !important;
  }
}

/* ── 9. Contact strip (index) ───────────────────────────────── */
@media (max-width: 768px) {
  div[style*="display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between;align-items:center"] {
    flex-direction: column !important;
    padding: 32px 20px !important;
    gap: 24px !important;
    text-align: center !important;
  }
  div[style*="display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between"] > div:last-child a {
    display: block !important;
    margin-bottom: 10px !important;
  }
}

/* ── 10. Contact page ───────────────────────────────────────── */
@media (max-width: 768px) {
  /* Contact info + form side by side → stack */
  div[style*="flex:1;min-width:280px"],
  div[style*="flex:1.4;min-width:320px"] {
    min-width: 100% !important;
    width: 100% !important;
  }
  div[style*="display:flex;gap:16px;margin-bottom:16px"] {
    flex-direction: column !important;
    gap: 0 !important;
  }
  /* Contact info columns */
  div[style*="display:flex;flex-wrap:wrap;gap:40px"] {
    gap: 20px !important;
  }
  div[style*="width:1px;background:#eee"] {
    display: none !important;
  }
}

/* ── 11. Pickup page ────────────────────────────────────────── */
@media (max-width: 768px) {
  div[style*="flex:2;min-width:320px"],
  div[style*="flex:1;min-width:240px"] {
    min-width: 100% !important;
    width: 100% !important;
    flex: none !important;
  }
}

/* ── 12. Tracking info cards ────────────────────────────────── */
@media (max-width: 768px) {
  div[style*="flex:1;min-width:220px"] {
    min-width: calc(50% - 12px) !important;
  }
}
@media (max-width: 480px) {
  div[style*="flex:1;min-width:220px"] {
    min-width: 100% !important;
  }
}

/* ── 13. Documents page ─────────────────────────────────────── */
@media (max-width: 768px) {
  /* Document cards */
  div[style*="flex:1;min-width:260px"] {
    min-width: 100% !important;
    flex: none !important;
    width: 100% !important;
  }
  /* Table: horizontal scroll */
  div[style*="background:#fff;border-radius:20px;box-shadow"][style*="overflow:hidden"] {
    overflow-x: auto !important;
  }
  table[style*="width:100%;border-collapse"] {
    min-width: 540px !important;
  }
  /* Prohibited items columns */
  div[style*="display:flex;flex-wrap:wrap;gap:24px"] ul {
    min-width: 100% !important;
  }
}

/* ── 14. Login page ─────────────────────────────────────────── */
@media (max-width: 768px) {
  div[style*="flex:1;min-width:300px"],
  div[style*="flex:1.2;min-width:320px"] {
    min-width: 100% !important;
    flex: none !important;
    width: 100% !important;
    padding: 36px 24px !important;
  }
  div[style*="background:linear-gradient(160deg,#1a3a6b"] {
    border-radius: 24px 24px 0 0 !important;
  }
  div[style*="flex:1.2;min-width:320px"] {
    border-radius: 0 0 24px 24px !important;
  }
}

/* ── 15. About page — hero image ────────────────────────────── */
@media (max-width: 768px) {
  .home--we-can-card { padding: 40px 20px !important; }
  span.position--relative.z--index-5.pl--80 { padding-left: 0 !important; }
  span.position--relative.z--index-5.pl--80 img {
    width: 100% !important;
    height: auto !important;
    max-height: 280px !important;
    object-fit: cover !important;
  }
}

/* ── 16. Sticky header on mobile ────────────────────────────── */
@media (max-width: 1024px) {
  app-header {
    display: block !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important;
  }

  /* Smaller logo on mobile — overrides the 70px global rule above */
  img.logo, img.logo-img {
    max-height: 40px !important;
    width: auto !important;
  }
}

/* ── 16. Tools modal grid ───────────────────────────────────── */
@media (max-width: 540px) {
  .pafex-tools-grid { grid-template-columns: 1fr !important; }
  .pafex-modal { margin: 0 12px; }
}

/* ── 17. General section padding on mobile ──────────────────── */
@media (max-width: 768px) {
  section[style*="padding:80px 30px"],
  section[style*="padding:70px 30px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  section[style*="padding:64px 30px"] {
    padding: 40px 16px !important;
  }
  div[style*="max-width:1200px"],
  div[style*="max-width:1100px"],
  div[style*="max-width:1000px"],
  div[style*="max-width:960px"],
  div[style*="max-width:900px"],
  div[style*="max-width:860px"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Card padding */
  div[style*="border-radius:20px"][style*="padding:48px"] {
    padding: 28px 20px !important;
  }
  div[style*="border-radius:20px"][style*="padding:56px"] {
    padding: 28px 20px !important;
  }
}

/* ── 18. pafex existing sections mobile fixes ──────────────  */

/* ── weServe section (Express Logistics / Consultative Logistics) */
@media (max-width: 768px) {
  /* Stack the dark card + info panel */
  .home--expressDist.weServe {
    flex-direction: column !important;
    overflow: hidden !important;
  }
  .weServe--card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: unset !important;
    border-radius: 12px 12px 0 0 !important;
    padding: 24px 20px !important;
  }
  .weServe--card h2 {
    font-size: 28px !important;
    white-space: normal !important;
  }
  .home--weServe-info {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    padding: 20px !important;
  }
  .home--weServe-info h3 { font-size: 20px !important; }
  .home--weServe-info ul { flex-wrap: wrap !important; overflow-x: hidden !important; }
  .home--weServe-info-tag { white-space: normal !important; font-size: 13px !important; }
  .home--weServe-info-textCol { width: 100% !important; }
  .home--weServe-info-imageCol { display: none !important; }
}

/* ── willLoveUs fallback (if not hidden) ────────────────────── */
@media (max-width: 1024px) {
  .home--willLoveUs-container { flex-direction: column !important; }
  .home--willLoveUs-text {
    width: 100% !important;
    padding: 0 16px !important;
  }
  .home--willLoveUs-text h2 { font-size: 24px !important; white-space: normal !important; }
  .home--willLoveUs--map   { width: 100% !important; }
  .home--willLoveUs--counts-carousel { overflow-x: auto !important; }
}

/* ── Home banner / hero slider — FULLY HIDDEN (static snapshot) ──── */
/* .home--banner is hidden globally above; no additional rules needed  */

/* ── We-can section (Driven by Precision) ───────────────────── */
@media (max-width: 768px) {
  .home--we-can { padding: 40px 16px !important; overflow: hidden !important; }
  .home--we-can-text h2 { font-size: 30px !important; white-space: normal !important; }
  .home--we-can-text p  { font-size: 16px !important; }
  .home--we-can-card {
    width: 100% !important;
    padding: 30px 16px !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .home--we-can-card-container {
    flex-direction: column !important;
    width: 100% !important;
  }
  .home--we-can-card-container .img-block {
    width: 100% !important;
  }
  .home--we-can-card-container .img-block img {
    width: 100% !important;
    height: 200px !important;
    object-fit: cover !important;
    border-radius: 12px !important;
  }
  .home--we-can-card-container-decs { padding: 0 !important; }
  .home--we-can-card-container-decs h3 { font-size: 24px !important; white-space: normal !important; }
  .home--we-can-card-container-decs p  { font-size: 14px !important; }
  /* SVG decorative lines — hide on mobile */
  .new--svg, .svgc { display: none !important; }
}

/* ── Logistics flow / weServe industry tags ─────────────────── */
@media (max-width: 768px) {
  .home--weServe-info-tag-list { flex-wrap: wrap !important; }
  app-logistics-flow,
  app-sustainable-transport { overflow: hidden !important; display: block !important; }
  app-logistics-flow img,
  app-sustainable-transport img { max-width: 100% !important; }
}

/* ── Sticky footer / notification bar ──────────────────────── */
@media (max-width: 768px) {
  app-sticky-footer { display: none !important; } /* hide the "Important Update" bar */
}

/* ── Tool accordion ─────────────────────────────────────────── */
@media (max-width: 768px) {
  app-tool-accordion { width: 100% !important; }
}

/* ── General existing section fixes ────────────────────────── */
@media (max-width: 768px) {
  /* Sustainable section */
  .about--vision-card-img {
    width: 100% !important;
    height: 200px !important;
    object-fit: cover !important;
  }
  /* Journey timeline */
  #h3-1 { font-size: 32px !important; }
  /* Footer stacking */
  .footer--left { width: 100% !important; }
  .footer { flex-direction: column !important; }
  /* Slick number slider */
  .animate-number { font-size: 36px !important; }
  /* Any fixed/absolute positioned elements that break layout */
  [style*="position: sticky"] { position: relative !important; }
}

/* ── 19. Hamburger menu button (injected & visibility-controlled by pafex-ui.js) */
/* Visibility toggled via JS (style.setProperty) to avoid CSS !important conflicts */
#pafex-hamburger {
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: 1.5px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  padding: 10px;
  flex-shrink: 0;
  margin-left: 8px;
}

/* Mobile nav drawer (injected by pafex-ui.js) */
#pafex-nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 99998;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
#pafex-nav-overlay.open {
  opacity: 1;
  visibility: visible;
}
#pafex-nav-drawer {
  position: fixed;
  top: 0;
  right: -320px;
  width: 300px;
  max-width: 85vw;
  height: 100%;
  background: #fff;
  z-index: 99999;
  overflow-y: auto;
  transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -4px 0 30px rgba(0,0,0,0.15);
}
#pafex-nav-overlay.open #pafex-nav-drawer {
  right: 0;
}
#pafex-nav-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
}
#pafex-nav-drawer-close {
  width: 36px;
  height: 36px;
  border: none;
  background: #f5f5f5;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
#pafex-nav-drawer-close:hover { background: #fee2e2; color: #ED1C24; }
#pafex-nav-drawer-links { padding: 12px 0 24px; }
#pafex-nav-drawer-links a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
  text-decoration: none;
  border-bottom: 1px solid #f9f9f9;
  transition: background 0.15s, color 0.15s;
}
#pafex-nav-drawer-links a:hover,
#pafex-nav-drawer-links a.active-nav {
  background: #fff5f5;
  color: #ED1C24;
}
#pafex-nav-drawer-links a .nav-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #f7f8fa;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
#pafex-nav-drawer-contact {
  margin: 16px 20px 0;
  background: linear-gradient(135deg, #ED1C24, #b01219);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  color: #fff;
}
#pafex-nav-drawer-contact p {
  font-size: 13px;
  opacity: 0.85;
  margin: 0 0 12px;
}
#pafex-nav-drawer-contact a {
  display: block;
  background: rgba(255,255,255,0.2);
  color: #fff;
  padding: 10px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  margin-bottom: 8px;
  border: 1px solid rgba(255,255,255,0.3);
}
#pafex-nav-drawer-contact a:last-child { margin-bottom: 0; }

@media (max-width: 1024px) {
  /* Ensure mobile header has proper padding */
  .header--container { padding: 0 8px !important; }
  /* Make header inner flex wrap properly */
  .header--container > div > .flex:first-child { flex: 1; min-width: 0; }
}

/* ── 20. Welcome gallery responsive ─────────────────────────── */
@media (max-width: 600px) {
  img[src*="pafex.co.in/welcome/"] {
    width: calc(50% - 8px) !important;
    height: 100px !important;
  }
}

/* ── 21. PAFEX modal responsive ─────────────────────────────── */
@media (max-width: 600px) {
  #pafex-overlay { padding-top: 0 !important; align-items: flex-end !important; }
  .pafex-modal { border-radius: 20px 20px 0 0 !important; max-height: 90vh !important; }
}

/* ── 22. pafex-pro.css section responsive overrides ─────────── */
@media (max-width: 768px) {
  /* Grid: 2 col → 1 col */
  .pafex-grid-2  { grid-template-columns: 1fr !important; }
  .pafex-grid-3  { grid-template-columns: 1fr !important; }
  .pafex-grid-4  { grid-template-columns: 1fr 1fr !important; }

  /* Stats bar: 2 col on mobile */
  .pafex-stats-grid { grid-template-columns: 1fr 1fr !important; }
  .pafex-stat-item  { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,.15) !important; }

  /* Section padding */
  .pafex-section { padding: 48px 16px !important; }
  .pafex-section-title { font-size: 28px !important; }
  .pafex-section-subtitle { font-size: 15px !important; margin-bottom: 32px !important; }

  /* Page banner */
  .pafex-page-banner { padding: 48px 16px !important; }
  .pafex-page-banner h1 { font-size: 28px !important; }
  .pafex-page-banner p  { font-size: 15px !important; }

  /* CTA strip */
  .pafex-cta-strip { padding: 56px 16px !important; }
  .pafex-cta-strip h2 { font-size: 26px !important; }
  .pafex-cta-buttons { flex-direction: column; align-items: stretch !important; }
  .pafex-cta-buttons .pafex-btn { justify-content: center !important; text-align: center; }

  /* Stat numbers */
  .pafex-stat-number { font-size: 38px !important; }

  /* Cards */
  .pafex-card { padding: 24px 18px !important; }

  /* Service cards grid 4 → 2 */
  .pafex-service-card { padding: 20px 14px !important; }
  .pafex-service-card img { width: 56px !important; height: 56px !important; }
  .pafex-service-card h3 { font-size: 14px !important; }

  /* Testimonials */
  .pafex-testimonial { padding: 24px 18px !important; }

  /* Partners logos */
  .pafex-partners-logos { gap: 12px !important; }
  .pafex-partners-logos .logo-pill { padding: 8px 14px !important; font-size: 12px !important; }

  /* Steps tracker */
  .pafex-steps { flex-wrap: wrap; gap: 12px !important; }
  .pafex-steps::before { display: none !important; }
  .pafex-step { flex: 0 0 calc(33.333% - 8px) !important; }
}

@media (max-width: 480px) {
  .pafex-grid-4 { grid-template-columns: 1fr 1fr !important; }
  .pafex-grid-3 { grid-template-columns: 1fr !important; }
  .pafex-step   { flex: 0 0 calc(50% - 8px) !important; }

  /* Pickup / contact two-col grids */
  [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  [style*="display:grid;grid-template-columns:1fr 1fr"] {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Login panel split */
  [style*="flex:0 0 42%"] { flex: none !important; width: 100% !important; }
  [style*="flex:1;background:#f7f8fa;padding:60px 50px"] {
    padding: 32px 20px !important;
  }
  [style*="background:linear-gradient(160deg"] {
    padding: 40px 20px !important;
  }

  /* Hero images on about/index */
  .pafex-grid-2 img { border-radius: 14px !important; }
}

/* ── 23. Overflow cleanup for pafex-pro inline blocks ────────── */
@media (max-width: 1024px) {
  /* Flex rows inside custom sections → wrap */
  [style*="display:flex;flex-wrap:wrap;gap:32px"],
  [style*="display:flex;flex-wrap:wrap;gap:48px"],
  [style*="display:flex;flex-wrap:wrap;gap:60px"],
  [style*="display:flex;gap:32px"],
  [style*="display:flex;gap:48px"] {
    flex-wrap: wrap !important;
  }
  /* Fixed-width flex children → full width */
  [style*="flex:0 0 340px"],
  [style*="flex:0 0 380px"],
  [style*="flex:0 0 300px"] {
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 600px) {
  /* All sections: prevent any overflow */
  section, div[style*="pafex-section"],
  .pafex-section, .pafex-container {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  /* Login page: stack panels */
  [style*="flex:0 0 42%"],
  [style*="min-height:calc(100vh"] > div {
    flex: none !important;
    width: 100% !important;
    min-width: 100% !important;
  }
}