/* WebKraft demo sites — shared mobile layout fixes (load after mobile-global.css) */

@media (max-width:767px){
  html{overflow-x:clip}
  body{overflow-x:clip;max-width:100%}

  /* ── Grid stacks ── */
  .about-split,.about__grid,.batches__grid,.batch-timetables__grid,.batches-schedule__grid,
  .billing-layout,.book-inner,.classes-grid,.contact-layout,.contact-layout-v2,.contact-split,
  .contact__layout,.courses__grid,.detail-layout,.f-grid,.facility-strip,.filter-bar,
  .footer-grid,.footer-in,.footer__container,.g-3:not(.g-3--keep),.g-4,.gallery-strip,
  .gallery__masonry,.intro-grid,.notices__layout,.package-card-v2,.plan-split,.programs-grid,
  .properties-grid,.rev-grid,.services-grid,.services-preview,.srv-grid,.team-grid,.values-grid,
  .widget-row{
    grid-template-columns:minmax(0,1fr)!important;
    min-width:0!important;
    max-width:100%!important;
    width:100%!important
  }
  .g-2{grid-template-columns:minmax(0,1fr)!important}

  /* Grid children must shrink (fixes dental .book-left 548px track on phone) */
  .about-split>.about-split__col,.about-split>*,.book-inner>*,.contact-layout>*,
  .contact-split>*,.detail-layout>*,.f-grid>*,.footer-in>*,.footer-grid>*,
  .g-2>*,.g-3>*,.g-4>*,.intro-grid>*,.plan-split>*,.programs-grid>*,
  .properties-grid>*,.srv-grid>*,.rev-grid>*,.services-grid>*{
    min-width:0!important;
    max-width:100%!important
  }

  /* Dental booking block */
  .book-inner{gap:28px!important}
  .book-left,.book-card{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box!important
  }
  .book-card{padding:24px!important}
  .bf-row{gap:16px!important;max-width:100%!important}
  .bf-text{min-width:0!important;max-width:100%!important;overflow-wrap:anywhere}

  /* E-commerce category chips — scroll instead of clip */
  .catalog-section__filters{
    display:flex!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch;
    max-width:100%!important;
    gap:8px!important;
    padding-bottom:6px;
    scrollbar-width:none
  }
  .catalog-section__filters::-webkit-scrollbar{display:none}
  .catalog-filter{flex:0 0 auto!important}

  /* ── Hero (dental / gym / classes — not full-bleed ecommerce / real estate cards) ── */
  .hero:not(.hero-card):not(.hero-card--screen):not(.hero-editorial):not(.hero-section){
    min-height:auto!important;
    padding-top:calc(72px + 20px)!important;
    padding-bottom:40px!important;
    margin-left:0!important;
    margin-right:0!important;
    overflow:hidden
  }
  .hero h1,.hero-section h1{
    font-size:clamp(1.85rem,8vw,2.5rem)!important;
    line-height:1.12!important;
    letter-spacing:-.02em!important
  }
  .hero-btns,.hero-actions,.hero-card__actions,.hero-card__footer{
    flex-direction:column!important;
    align-items:stretch!important;
    gap:12px!important;
    width:100%!important;
    max-width:100%!important
  }
  .hero-btns .btn,.hero-btns button,.hero-actions .btn,.hero-card__actions .btn{
    width:100%!important;
    justify-content:center!important;
    white-space:normal!important
  }

  /* Dental-style floating stats bar */
  .hero-stats-outer{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    margin:28px 0 0!important;
    padding:0!important;
    width:100%!important;
    max-width:100%!important
  }
  .hero-stats{
    flex-direction:column!important;
    max-width:100%!important;
    width:100%!important;
    border-radius:12px;
    overflow:hidden
  }
  .hstat{
    border-right:none!important;
    border-bottom:1px solid rgba(255,255,255,.08);
    padding:14px 16px!important
  }
  .hstat:last-child{border-bottom:none}

  /* Real estate full-screen hero */
  .hero-card--screen{
    min-height:100svh!important;
    min-height:100dvh!important
  }
  .hero-card{
    min-height:min(100svh,720px)!important;
    overflow:hidden
  }
  .hero-card__brand{
    font-size:clamp(2rem,10vw,3.25rem)!important;
    line-height:1.05!important
  }
  .hero-card__content{
    padding-left:max(16px,env(safe-area-inset-left))!important;
    padding-right:max(16px,env(safe-area-inset-right))!important
  }

  /* Cards & sections */
  .book-card,.rev-card,.srv-card{padding:20px!important}
  .page,.page-view,.page.active,.section,section,main{
    max-width:100%;
    overflow-x:clip
  }

  /* Nav / mobile menus */
  .mob-nav,.mobile-nav,.navbar__mobile,.nav-links.open{
    padding:12px max(16px,env(safe-area-inset-left)) max(20px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-right));
    max-height:min(85vh,520px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch
  }
  .mob-nav a,.mobile-nav a,.navbar__mobile-link{
    min-height:44px;
    display:flex;
    align-items:center
  }
  .navbar__inner,.nav-wr,.site-nav-inner,.topbar__inner,header nav{
    flex-wrap:wrap;
    gap:10px;
    padding-left:max(12px,env(safe-area-inset-left))!important;
    padding-right:max(12px,env(safe-area-inset-right))!important
  }
  .nav-actions,.navbar__actions{
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:8px
  }

  /* Ecommerce catalog (do not override hero-editorial — e-commerce.html handles that) */
  .product-grid,.product-grid--catalog{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px!important
  }
  .product-card__media{aspect-ratio:3/4}
  .product-card__media img{width:100%;height:100%;object-fit:cover}
  .checkout-lux__body,.checkout-lux__grid,.header-lux__inner,.nav-lux{
    grid-template-columns:1fr!important
  }
  .header-lux__actions{width:100%;justify-content:flex-end}
  .category-tiles{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important
  }

  /* Classes / coaching */
  .batch-timetables{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    margin-left:0;
    margin-right:0;
    padding-bottom:8px
  }
  .batch-timetables__tabs{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:4px
  }
  .batch-timetables__tab{flex:0 0 auto;white-space:nowrap}
  .batch-timetables__table{min-width:min(520px,100%)}
  .admission__layout,.faculty-detail__layout,.portal__layout,.portal-dashboard{
    grid-template-columns:1fr!important
  }
  .quick-nav__grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important
  }
  .classes-grid{max-width:100%!important}

  /* Salon */
  .package-card-v2{
    grid-template-columns:1fr!important
  }
  .package-card-v2 .package-visual{min-height:200px}
  .package-card-v2 .package-info{padding:1.5rem}
  .billing-item{
    grid-template-columns:72px 1fr!important;
    gap:.75rem!important
  }
  .billing-item .billing-qty,.billing-item [class*="qty"]{
    grid-column:1/-1;
    justify-self:start
  }
  .sidebar-drawer{width:min(100vw,320px)!important}
  .sidebar-toggle{
    left:max(0px,env(safe-area-inset-left))
  }
  .whatsapp-float{
    right:max(12px,env(safe-area-inset-right))!important;
    bottom:max(72px,env(safe-area-inset-bottom))!important
  }

  /* Gym */
  .trainer-card{flex-direction:column!important}
  .trainer-card .photo{width:100%!important;min-height:200px}
  .prog-card{min-height:260px}
  .footer-in{grid-template-columns:1fr!important;gap:1.5rem!important}

  /* Chat / modals — avoid 100vw horizontal scroll */
  .chat-panel,#chat-win,#chatWin,.chat-win{
    width:auto!important;
    max-width:calc(100% - 24px)!important;
    left:12px!important;
    right:12px!important;
    margin-left:0!important;
    margin-right:0!important
  }
  .modal,.modal-box,.modal-content,.auth-modal-panel{
    max-width:calc(100% - 24px)!important;
    margin-left:auto!important;
    margin-right:auto!important;
    max-height:min(90vh,90dvh);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch
  }

  /* Property / service cards */
  .property-card,.service-item,.service-preview-card{max-width:100%}
  .detail-specs{grid-template-columns:repeat(2,minmax(0,1fr))!important}

  /* Tables */
  .table-wrap,div[style*="overflow-x:auto"]{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    max-width:100%
  }

  /* Touch targets */
  .btn,.nav-cta,.navbar__cta,a.btn,button[type=submit]{
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center
  }

  /* Demo hub footer */
  #wc-demo-hub.wc-demo-hub{
    padding-left:max(1rem,env(safe-area-inset-left))!important;
    padding-right:max(1rem,env(safe-area-inset-right))!important
  }
}

@media (max-width:480px){
  .category-tiles,.product-grid,.product-grid--catalog,.quick-nav__grid{
    grid-template-columns:1fr!important
  }
  .hero-card__actions,.hero-card__footer{align-items:stretch!important}
  .hero-card__actions .btn{width:100%!important;flex:none!important;min-width:0!important}
  .detail-specs,.footer-in,.stats-row{grid-template-columns:1fr!important}
  .filter-bar{grid-template-columns:1fr!important}
  .gallery-strip{grid-template-columns:1fr 1fr!important}
  .g-4,.g-3{grid-template-columns:1fr!important}
  .nav-actions .btn{font-size:.75rem;padding:.5rem .75rem}
  .logo img,.navbar__logo-img{max-height:40px;width:auto}
}

@media (max-width:400px){
  .hero h1{font-size:clamp(1.65rem,8.5vw,2.15rem)!important}
  .section-title,.disp,.disp-lg{font-size:clamp(1.5rem,7.5vw,2rem)!important}
  .chat-fab,#chat-fab{
    right:max(12px,env(safe-area-inset-right))!important;
    bottom:max(12px,env(safe-area-inset-bottom))!important
  }
  .testimonial-card{flex:0 0 min(280px,92vw)!important}
  .billing-form-grid,.billing-form-grid-3{grid-template-columns:1fr!important}
}