/* ==========================================================================
   90-mobile.css  —  HOCO redesign · MOBILE-ONLY polish
   Owner prefix: 90-*  (loads late → gentle mobile-wide corrections)
   Scope: everything here is inside a mobile media query so it never
   collides with the desktop CSS other agents own.
   Design ref: /test/index.php  ·  tokens from 00-core.css :root
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) MOBILE BOTTOM TOOLBAR  (.wd-toolbar) — clean brand bar like /test
   Woodmart shows this fixed bar only <=1024px (display:none above).
   Items present: Shop · Filters · Wishlist · Cart · My account.
   -------------------------------------------------------------------------- */
@media (max-width:1024px){

  .wd-toolbar.wd-toolbar-label-show,
  .wd-toolbar{
    height:auto;
    min-height:58px;
    padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));
    background:#fff;
    border-top:1px solid var(--hoco-line,#ececf0);
    box-shadow:0 -4px 18px rgba(40,10,50,.10);
    border-start-start-radius:16px;
    border-start-end-radius:16px;
    overflow:visible;
  }

  /* even 5-up layout, comfortable tap targets */
  .wd-toolbar > a,
  .wd-toolbar > div{
    flex:1 1 20%;
    min-width:0;
    display:flex;
    align-items:stretch;
    justify-content:center;
  }
  .wd-toolbar > a,
  .wd-toolbar > div a{
    height:auto;
    min-height:46px;               /* >=44px tap target */
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    padding:4px 2px;
    color:var(--hoco-ink,#1c1420);
    border-radius:12px;
    transition:color .18s,background .18s,transform .12s;
  }
  .wd-toolbar.wd-toolbar-label-show > a,
  .wd-toolbar.wd-toolbar-label-show > div a{
    padding-bottom:4px;            /* undo Woodmart's absolute-label padding */
  }

  /* icons — brand ink, larger, crisp */
  .wd-toolbar .wd-tools-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    line-height:1;
  }
  .wd-toolbar .wd-tools-icon:before,
  .wd-toolbar .wd-tools-icon:after{
    font-size:22px;
    line-height:1;
  }

  /* labels — inline flow (not absolute), small & readable */
  .wd-toolbar .wd-toolbar-label{
    position:static;
    inset:auto;
    display:block;
    font-size:10.5px;
    font-weight:600;
    line-height:1.1;
    color:var(--hoco-muted,#6f6676);
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    padding:0;
    transition:color .18s;
  }

  /* active / pressed → brand accent */
  .wd-toolbar > a:hover,
  .wd-toolbar > a:active,
  .wd-toolbar > div a:hover,
  .wd-toolbar > div a:active,
  .wd-toolbar > div a:focus{
    color:var(--hoco-brand,#540457);
  }
  .wd-toolbar > a:active,
  .wd-toolbar > div a:active{
    background:rgba(84,4,87,.06);
    transform:translateY(1px);
  }
  .wd-toolbar a:hover .wd-toolbar-label,
  .wd-toolbar a:active .wd-toolbar-label{
    color:var(--hoco-brand,#540457);
  }

  /* cart count → brand pill */
  .wd-toolbar .wd-cart-number.wd-tools-count{
    background:var(--hoco-brand,#540457);
    color:#fff;
    font-weight:700;
    border-radius:999px;
  }

  /* keep the page content clear of the fixed bar (Woodmart assumes 55px) */
  .sticky-toolbar-on{
    padding-bottom:calc(60px + env(safe-area-inset-bottom,0px)) !important;
  }
}

/* --------------------------------------------------------------------------
   2) FLOATING WHATSAPP — never overlap the bottom toolbar
   (.hoco-wa-float injected by cards JS; Woodmart's own sticky buttons too)
   Only the vertical offset is overridden; horizontal side is left intact.
   -------------------------------------------------------------------------- */
@media (max-width:1024px){
  .hoco-wa-float{
    bottom:calc(66px + env(safe-area-inset-bottom,0px)) !important;
    z-index:340;               /* below toolbar's 350 */
  }
}

/* --------------------------------------------------------------------------
   3) PRODUCT GRID = 2 columns on phones (safety net)
   -------------------------------------------------------------------------- */
@media (max-width:575px){
  .wd-products.elements-grid > .product-grid-item,
  .products.elements-grid > .product-grid-item{
    width:50%;
    flex:0 0 50%;
    max-width:50%;
  }
}

/* --------------------------------------------------------------------------
   4) NO HORIZONTAL OVERFLOW
   -------------------------------------------------------------------------- */
@media (max-width:768px){
  html,body{
    max-width:100%;
    overflow-x:hidden;
  }
  img,video{max-width:100%;height:auto}
}

/* --------------------------------------------------------------------------
   5) COMPACT HEADER on phones + readable Arabic sizes
   -------------------------------------------------------------------------- */
@media (max-width:768px){
  /* trim excess header vertical padding */
  .whb-header .whb-general-header .wd-header-inner,
  .whb-header .whb-row{
    min-height:0;
  }

  /* readable Arabic body & product titles */
  .wd-products .wd-entities-title,
  .products .wd-entities-title{
    font-size:13.5px;
    line-height:1.5;
  }
  .wd-products .price,
  .products .price{
    font-size:15px;
  }

  /* page / section titles not oversized on small screens */
  .page-title .entry-title,
  .wd-page-title .entry-title,
  h1.entry-title{
    font-size:22px;
    line-height:1.3;
  }
}

@media (max-width:575px){
  body{font-size:14.5px;line-height:1.6}
}