/* Shehata Store — mobile storefront polish v11
   Deliberately loaded after every page stylesheet so these phone rules win
   without fighting the legacy storefront layers. */

.home-rail-pagination{display:none!important}
.mobile-product-dots{display:none!important}

@media (max-width:900px){
  /* Bottom navigation removed: reclaim the full phone viewport. */
  .mobile-tabs{display:none!important}
  body{padding-bottom:0!important}
  .footer-v3{padding-bottom:0!important}
  .footer-v3-bottom{padding-bottom:env(safe-area-inset-bottom)!important}
  .footer-v3-bottom .container{min-height:58px!important}

  /* Smart header: fixed while visible, hides only after intentional downward
     scrolling and returns quickly on upward scrolling. */
  html body .site-header{
    transform:translate3d(0,0,0)!important;
    transition:transform .24s cubic-bezier(.22,.61,.36,1),box-shadow .2s ease!important;
    will-change:transform;
    backface-visibility:hidden;
  }
  html body .site-header.mobile-smart-hidden-v6{
    transform:translate3d(0,calc(-100% - 3px),0)!important;
    box-shadow:none!important;
    pointer-events:none!important;
  }
  body.navigation-open .site-header,
  body.filters-open .site-header,
  body.mega-menu-open .site-header,
  body .site-header:focus-within{
    transform:translate3d(0,0,0)!important;
    pointer-events:auto!important;
  }

  /* With the bottom dock gone, both floating actions sit cleanly at the safe
     lower edge instead of hovering too high above the page. */
  .back-top{
    left:14px!important;
    bottom:calc(14px + env(safe-area-inset-bottom))!important;
    width:44px!important;
    height:44px!important;
  }
  .whatsapp-float,
  html[dir=ltr] .whatsapp-float{
    right:14px!important;
    left:auto!important;
    bottom:calc(14px + env(safe-area-inset-bottom))!important;
  }
}

@media (max-width:620px){
  /* Section banner: slightly shorter than the previous 900×560 crop.
     900×520 keeps it substantial on phones without dominating the section. */
  html body .home-department-section .container .home-department-banner,
  html body .home-extra-section .container .home-department-banner{
    width:100%!important;
    aspect-ratio:45 / 26!important; /* 900 / 520 */
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:hidden!important;
    border-radius:13px!important;
    background:#f5f2ef!important;
  }
  html body .home-department-section .container .home-department-banner img,
  html body .home-extra-section .container .home-department-banner img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    object-fit:cover!important;
    object-position:center!important;
  }

  /* Three complete products per visible phone row. The rail is kept flush to
     its section so no arrow or negative shell offset sits on top of a card. */
  html body .home-department-section .product-rail-shell{
    width:100%!important;
    max-width:100%!important;
    margin-inline:0!important;
    padding-inline:0!important;
    overflow:visible!important;
  }
  html body .home-department-section .product-rail.home-product-carousel{
    width:100%!important;
    box-sizing:border-box!important;
    grid-auto-columns:calc((100% - 12px) / 3)!important;
    gap:6px!important;
    margin:0!important;
    padding:3px 1px 7px!important;
    scroll-padding-inline:1px!important;
    transform:none!important;
    scroll-snap-type:x mandatory!important;
    overscroll-behavior-x:contain!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch;
  }
  html body .home-department-section .product-rail.home-product-carousel::-webkit-scrollbar{display:none!important}
  html body .home-department-section .home-product-carousel>.product-card-simple{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:auto!important;
    min-height:0!important;
    align-self:stretch;
    overflow:hidden!important;
    border-radius:10px!important;
    scroll-snap-align:start!important;
    box-shadow:0 2px 8px rgba(31,25,22,.035)!important;
  }
  html body .home-department-section .home-product-carousel>.product-card-tv{align-self:start}
  html body .home-department-section .home-product-carousel .product-card-media{
    aspect-ratio:10/9!important;
    padding:5px!important;
  }
  html body .home-department-section .home-product-carousel .product-card-tv .product-card-media{aspect-ratio:6/5!important;padding:32px 4px 0!important}
  html body .home-department-section .home-product-carousel .product-image{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    aspect-ratio:auto!important;
    padding:0!important;
    background:#fff!important;
  }
  html body .home-department-section .home-product-carousel .product-image img{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
  }
  html body .home-department-section .home-product-carousel .product-card-copy{
    gap:2px!important;
    padding:5px 6px 8px!important;
  }
  html body .home-department-section .home-product-carousel .product-card-tv .product-card-copy{flex:none}
  html body .home-department-section .home-product-carousel .product-brand-name{
    font-size:6.8px!important;
    line-height:1.2!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  html body .home-department-section .home-product-carousel .product-name{
    display:-webkit-box!important;
    min-height:27px!important;
    margin:0!important;
    overflow:hidden!important;
    color:#312b2b!important;
    font-size:8.2px!important;
    font-weight:700!important;
    line-height:1.52!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:2!important;
  }
  html body .home-department-section .home-product-carousel .product-card-price{
    gap:1px 3px!important;
    padding-top:3px!important;
  }
  html body .home-department-section .home-product-carousel .product-card-price strong{
    font-size:10.2px!important;
    line-height:1.25!important;
    white-space:nowrap!important;
  }
  html body .home-department-section .home-product-carousel .product-card-price del{
    font-size:6.8px!important;
    line-height:1.15!important;
    white-space:nowrap!important;
  }
  html body .home-department-section .home-product-carousel .product-card-quick-actions{
    display:none!important;
  }

  /* Phone controls: one pagination row only. Each dot is one possible one-card
     shift. With 3 visible cards: 6 products = 4 dots. */
  html body .home-department-section .product-rail-shell>.rail-arrow{
    display:none!important;
  }
  html body .home-department-section .mobile-product-dots{
    display:none!important;
  }
  html body .home-department-section .home-rail-pagination{
    display:flex!important;
    width:max-content!important;
    max-width:100%!important;
    align-items:center!important;
    justify-content:center!important;
    flex-wrap:nowrap!important;
    gap:6px!important;
    min-height:18px!important;
    margin:7px auto 0!important;
    padding:0 8px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch;
  }
  html body .home-department-section .home-rail-pagination::-webkit-scrollbar{display:none!important}
  html body .home-department-section .home-rail-pagination[hidden]{display:none!important}
  html body .home-department-section .home-rail-dot{
    appearance:none!important;
    -webkit-appearance:none!important;
    flex:0 0 7px!important;
    width:7px!important;
    min-width:7px!important;
    max-width:7px!important;
    height:7px!important;
    min-height:7px!important;
    max-height:7px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:50%!important;
    background:#d6d6d6!important;
    box-shadow:none!important;
    opacity:1!important;
    transform:none!important;
    transition:background-color .16s ease!important;
    cursor:pointer!important;
  }
  html body .home-department-section .home-rail-dot.active,
  html body .home-department-section .home-rail-dot[aria-current="true"]{
    flex-basis:7px!important;
    width:7px!important;
    min-width:7px!important;
    max-width:7px!important;
    height:7px!important;
    min-height:7px!important;
    max-height:7px!important;
    border-radius:50%!important;
    background:var(--red,#082c5d)!important;
    transform:none!important;
  }
  html body .home-department-section .home-rail-dot:focus-visible{
    outline:2px solid var(--red,#082c5d)!important;
    outline-offset:3px!important;
  }

}

@media (prefers-reduced-motion:reduce){
  html body .site-header{transition:none!important}
}