/* ===== ANC FINAL BATCH FIXES 2026-09-08 ===== */
@media (max-width:768px){
  html,body{max-width:100%;overflow-x:hidden!important}
  /* shared eyebrow / red line alignment */
  .eyebrow,.eb,.hero-eyebrow-u,.hero-badge{align-items:center!important}
  .eyebrow .bar,.eb .bar,.hero-eyebrow-u .bar,.hero-badge::before{align-self:center!important;margin-top:0!important;transform:none!important}

  /* About long text: heading centered, body justified with natural last line */
  html[lang="ar"] .overview .ov-body h2{text-align:center!important}
  html[lang="ar"] .overview .ov-body p{direction:rtl!important;text-align:justify!important;text-align-last:auto!important;line-height:1.85!important}
  html[lang="en"] .overview .ov-body h2{text-align:center!important}
  html[lang="en"] .overview .ov-body p{text-align:justify!important;text-align-last:auto!important;line-height:1.85!important}

  /* About organisation/division cards: description centered, titles left as designed */
  .divisions .div-body p{display:block!important;width:100%!important;text-align:center!important;text-align-last:center!important;line-height:1.75!important;word-spacing:normal!important}
  .divisions .div-body>div:first-child{width:100%!important}

  /* Arabic customer reviews eyebrow on right */
  html[lang="ar"] .anc-reviews .rv-head>div:first-child{width:100%!important;text-align:right!important}
  html[lang="ar"] .anc-reviews .rv-head .eb{width:100%!important;direction:rtl!important;justify-content:flex-start!important;text-align:right!important}

  /* Certification cards: one consistent large card across product pages */
  .cert-row,.cert-grid,.certifications-grid{display:grid!important;grid-template-columns:1fr!important;gap:18px!important;width:min(100%,740px)!important;margin-left:auto!important;margin-right:auto!important}
  .cert-card{width:100%!important;max-width:none!important;min-height:300px!important;padding:34px 24px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;text-align:center!important}
  .cert-card .cert-logo,.cert-card .ic,.cert-logo{margin-left:auto!important;margin-right:auto!important}
  .cert-card h4,.cert-card p,.cert-card span{text-align:center!important;width:100%!important}

  /* Kitchen hood certification/info cards: icon centered in both languages */
  .cert-band{display:grid!important;grid-template-columns:1fr!important;gap:18px!important;width:100%!important}
  .cert-chip{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;text-align:center!important;width:100%!important;min-height:250px!important;padding:30px 24px!important}
  .cert-chip .ic{margin:0 auto 18px!important;display:flex!important;align-items:center!important;justify-content:center!important}
  .cert-chip>div:last-child,.cert-chip h4,.cert-chip span{width:100%!important;text-align:center!important}

  /* CTA / why feature icons centered in both languages */
  .cta-feat,.why-card{text-align:center!important}
  .cta-feat .ic,.why-card .ic{margin-left:auto!important;margin-right:auto!important;display:flex!important;align-items:center!important;justify-content:center!important}
  .cta-feat h4,.cta-feat p{text-align:center!important}

  /* Fire pump / product panel bullet icons inline at leading edge */
  html[lang="ar"] .panel-card .pc-list{display:flex!important;flex-direction:column!important;gap:14px!important;direction:rtl!important}
  html[lang="ar"] .panel-card .pc-list .row{display:flex!important;flex-direction:row!important;direction:rtl!important;align-items:flex-start!important;justify-content:flex-start!important;text-align:right!important;gap:10px!important}
  html[lang="ar"] .panel-card .pc-list .row i{order:0!important;margin:2px 0 0 8px!important;flex:0 0 auto!important}
  html[lang="ar"] .panel-card .pc-list .row span{text-align:right!important;flex:1 1 auto!important}

  /* interactive panels: natural flow, no giant empty gap */
  .tabs{display:block!important}
  .tabs-list{display:block!important}
  .tab-panels,.tab-panel,.panel-card,.panel-img{height:auto!important;min-height:0!important}
  .tab-panels{overflow:visible!important}
  .panel-card .pc-btn{margin-top:22px!important}

  /* Product image panel: image fills card, remove black footer slab */
  .panel-img{min-height:560px!important;background:transparent!important;align-items:flex-end!important}
  .panel-img img{width:100%!important;height:100%!important;object-fit:cover!important}
  .panel-img::after{background:linear-gradient(to top,rgba(10,10,11,.78) 0%,rgba(10,10,11,.34) 44%,rgba(10,10,11,.06) 74%)!important}
  .panel-img .pi-body{padding:28px 26px!important;width:100%!important}
  .panel-img h3{font-size:1.65rem!important;line-height:1.15!important}
  .panel-img p{font-size:.9rem!important;line-height:1.55!important}
  .panel-img .pi-feats{gap:9px 16px!important;margin-bottom:16px!important}

  /* Products page CTA buttons: same clean stacked shape in AR + EN */
  .cta-buttons{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:12px!important;width:100%!important}
  .cta-buttons>a{width:min(100%,390px)!important;min-height:52px!important;padding:13px 18px!important;justify-content:center!important;text-align:center!important;font-size:.94rem!important}

  /* Buttons globally: lighter mobile proportions */
  .btn,.fe-btn,.pc-btn,.product-cta,.cta-btn-white,.cta-btn-outline{font-size:.92rem!important;line-height:1.25!important}
  .fe-btn{width:min(100%,390px)!important;margin-left:auto!important;margin-right:auto!important;padding:13px 18px!important;min-height:50px!important;justify-content:center!important;text-align:center!important}

  /* Emergency-door features/applications: same one-column mobile design as sprinklers */
  .fe-cols{display:grid!important;grid-template-columns:1fr!important;gap:24px!important;width:100%!important}
  .fe-kb,.fe-ap{width:100%!important}
  .fe-b{display:flex!important;align-items:center!important;gap:10px!important;margin-bottom:13px!important}
  .fe-a{display:flex!important;align-items:center!important;gap:11px!important;background:#f7f7f8!important;border-radius:10px!important;padding:13px 16px!important;margin-bottom:11px!important}
  html[lang="ar"] .fe-b,html[lang="ar"] .fe-a{direction:rtl!important;text-align:right!important}

  /* Services hero: same comfortable margins and size as other pages */
  body[data-mobile-hero="services"] .hero,
  body[data-mobile-hero="services"] .sv-hero,
  .services-page .hero{min-height:auto!important}
  body[data-mobile-hero="services"] .hero-inner,
  body[data-mobile-hero="services"] .sv-hero-inner,
  .services-page .hero-inner{width:100%!important;padding-left:22px!important;padding-right:22px!important}
  body[data-mobile-hero="services"] .hero h1,
  body[data-mobile-hero="services"] .sv-hero h1,
  .services-page .hero h1{font-size:clamp(1.75rem,7.3vw,2.25rem)!important;line-height:1.25!important;max-width:100%!important;margin-left:auto!important;margin-right:auto!important}
  body[data-mobile-hero="services"] .hero p,
  .services-page .hero p{font-size:.94rem!important;line-height:1.7!important;max-width:100%!important}
  body[data-mobile-hero="services"] .hero-actions,
  .services-page .hero-actions{padding-left:0!important;padding-right:0!important}

  /* Projects hero CTA centered */
  .pj-hero .btn-primary,.pj-hero-ctas .btn,.pj-hero .hero-cta .btn{display:flex!important;width:min(100%,360px)!important;margin-left:auto!important;margin-right:auto!important;justify-content:center!important;text-align:center!important}

  /* Blog latest heading + view-all stacked */
  .articles .wide>div[style*="display:flex"]{display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;gap:8px!important}
  html[lang="ar"] .articles .wide>div[style*="display:flex"]{align-items:flex-end!important;text-align:right!important}
  .articles .wide>div[style*="display:flex"] .res-link{margin:0!important}

  /* Project / case-study card link breathing room under tags */
  .pj-card-link,.pj-scope,.case-link{margin-top:14px!important;padding-top:8px!important;display:inline-flex!important}

  /* Categories / Topics EN responsive repaired to match AR */
  .cat-grid{grid-template-columns:1fr!important;width:100%!important;gap:18px!important}
  .cat-card{width:100%!important;max-width:100%!important;min-width:0!important}
  .topics,.topics-wrap,.categories,.cat-grid{max-width:100%!important;overflow-x:hidden!important}

  /* Kitchen Hood title one line where possible */
  html[lang="en"] .product-card h3,
  html[lang="en"] .prod-card h3{font-size:clamp(1.28rem,5.4vw,1.6rem)!important;line-height:1.15!important}
}

/* desktop Arabic About hero image handled in markup */

/* v6 — Mobile product cards: clean white content area across all product pages (AR + EN) */
@media (max-width:768px){
  main .tabs .tab-panel.mobile-inline-panel .panel-img,
  main .tab-panel .panel-img{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    background:#fff!important;
    min-height:0!important;
    height:auto!important;
    overflow:hidden!important;
  }
  main .tabs .tab-panel.mobile-inline-panel .panel-img::after,
  main .tab-panel .panel-img::after{
    display:none!important;
    content:none!important;
  }
  main .tabs .tab-panel.mobile-inline-panel .panel-img>img,
  main .tab-panel .panel-img>img{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:auto!important;
    aspect-ratio:16/11!important;
    object-fit:cover!important;
    display:block!important;
    flex:0 0 auto!important;
  }
  main .tabs .tab-panel.mobile-inline-panel .pi-body,
  main .tab-panel .panel-img .pi-body{
    position:relative!important;
    z-index:2!important;
    width:100%!important;
    padding:18px 16px 16px!important;
    background:#fff!important;
    color:#17191b!important;
  }
  main .panel-img .kic{color:#8a8f96!important}
  main .panel-img h3{color:#17191b!important}
  main .panel-img p{color:#4f555b!important}
  main .panel-img .pi-feats span{color:#292d31!important}
  main .panel-img .pi-feats i{color:var(--primary)!important}
  html[lang="en"] main .panel-img .pi-body,
  html[lang="en"] main .panel-img .pi-body h3,
  html[lang="en"] main .panel-img .pi-body p{text-align:left!important}
  html[lang="ar"] main .panel-img .pi-body,
  html[lang="ar"] main .panel-img .pi-body h3,
  html[lang="ar"] main .panel-img .pi-body p{text-align:right!important;direction:rtl!important}
}

/* v9: Arabic blog latest articles heading/view-all — force physical right alignment on mobile */
@media (max-width:768px){
  html[lang="ar"] .articles .wide > div[style*="display:flex"]{
    width:100%!important;
    align-items:stretch!important;
    text-align:right!important;
    direction:rtl!important;
  }
  html[lang="ar"] .articles .wide > div[style*="display:flex"] > .eyebrow,
  html[lang="ar"] .articles .wide > div[style*="display:flex"] > .res-link{
    width:max-content!important;
    max-width:100%!important;
    margin-left:auto!important;
    margin-right:0!important;
    align-self:flex-end!important;
    text-align:right!important;
  }
  html[lang="ar"] .articles .wide > div[style*="display:flex"] > .res-link{
    display:inline-flex!important;
    flex-direction:row!important;
    direction:rtl!important;
    align-items:center!important;
    gap:8px!important;
  }
}