/* ============================================================
   ALPHA JO — HEADER + CATEGORY PHOTOS V4
   Desktop:
   LEFT   = compact search + favorites/cart/language underneath
   CENTER = ALPHA JO logo
   RIGHT  = category photo navigation
   Categories auto-shrink as category count grows.
   ============================================================ */

:root{
  --alpha-header-height:104px;
}

/* Keep the whole top navigation in one compact band. */
.site-header{
  background:rgba(255,255,255,.985)!important;
  border-bottom:1px solid #edf1f4!important;
}

.header-inner.alpha-header-layout{
  box-sizing:border-box!important;
  width:min(100% - 32px,1780px)!important;
  height:var(--alpha-header-height)!important;
  min-height:var(--alpha-header-height)!important;
  margin:0 auto!important;
  padding:7px 0!important;
  display:grid!important;
  grid-template-columns:minmax(280px,40%) minmax(118px,20%) minmax(420px,40%)!important;
  grid-template-areas:"left brand categories"!important;
  align-items:center!important;
  gap:0!important;
  direction:ltr!important;
  position:relative!important;
}

/* LEFT — compact search + actions */
.alpha-header-left{
  grid-area:left;
  min-width:0;
  width:100%;
  max-width:520px;
  justify-self:start;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:center;
  gap:6px;
  direction:rtl;
}

.alpha-header-left .search{
  box-sizing:border-box!important;
  position:static!important;
  inset:auto!important;
  order:0!important;
  display:flex!important;
  width:100%!important;
  height:40px!important;
  min-height:40px!important;
  margin:0!important;
  flex:none!important;
  overflow:hidden!important;
  border:2px solid var(--primary,#1f86d9)!important;
  border-radius:999px!important;
  background:#fff!important;
  box-shadow:none!important;
}
.alpha-header-left .search input{
  min-width:0!important;
  padding:0 15px!important;
  font-size:12.5px!important;
  font-weight:600!important;
}
.alpha-header-left .search button{
  min-width:58px!important;
  width:auto!important;
  padding:0 14px!important;
  font-size:10.5px!important;
  font-weight:900!important;
  border-radius:0!important;
}

.alpha-header-left .header-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:7px!important;
  min-height:35px!important;
  direction:rtl!important;
}
.alpha-header-left .action-btn,
.alpha-header-left .icon-btn{
  box-sizing:border-box!important;
  width:35px!important;
  min-width:35px!important;
  height:35px!important;
  min-height:35px!important;
  border-radius:50%!important;
  font-size:15px!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  background:#fff!important;
  border:1px solid #dfe6eb!important;
  box-shadow:0 3px 10px rgba(24,49,66,.06)!important;
}
.alpha-header-left .language-btn{
  width:46px!important;
  min-width:46px!important;
  border-radius:999px!important;
  font-size:10px!important;
  font-weight:900!important;
}
.alpha-header-left .action-btn b{
  width:17px!important;
  height:17px!important;
  top:-5px!important;
  left:-4px!important;
  font-size:8px!important;
}
.alpha-header-left .menu-btn{
  display:none!important;
}

/* CENTER — logo */
.alpha-header-brand{
  grid-area:brand;
  justify-self:center!important;
  align-self:center!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:0!important;
  width:118px!important;
  height:88px!important;
  padding:0!important;
  margin:0!important;
  text-decoration:none!important;
}
.alpha-header-brand:after{display:none!important}
.alpha-header-brand img{
  display:block!important;
  width:auto!important;
  max-width:106px!important;
  height:auto!important;
  max-height:82px!important;
  object-fit:contain!important;
  margin:0 auto!important;
}

/* RIGHT — category navigation */
.categories-bar.alpha-header-categories{
  grid-area:categories;
  box-sizing:border-box!important;
  width:100%!important;
  min-width:0!important;
  height:88px!important;
  min-height:88px!important;
  margin:0!important;
  padding:3px 0!important;
  border:0!important;
  background:transparent!important;
  display:grid!important;
  grid-template-columns:repeat(var(--alpha-cat-count,6),minmax(0,1fr))!important;
  align-items:start!important;
  justify-items:center!important;
  gap:clamp(2px,.35vw,7px)!important;
  overflow:hidden!important;
  scrollbar-width:none!important;
  direction:rtl!important;
}
.categories-bar.alpha-header-categories::-webkit-scrollbar{display:none!important}

.categories-bar .alpha-cat-circle{
  box-sizing:border-box!important;
  width:100%!important;
  min-width:0!important;
  max-width:var(--alpha-cat-cell,78px)!important;
  height:84px!important;
  min-height:84px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#1d2730!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:0!important;
  overflow:visible!important;
  cursor:pointer!important;
  transform:none!important;
}

.alpha-cat-photo{
  position:relative;
  box-sizing:border-box;
  width:var(--alpha-cat-photo,56px)!important;
  height:var(--alpha-cat-photo,56px)!important;
  flex:0 0 var(--alpha-cat-photo,56px)!important;
  border-radius:50%!important;
  padding:2px!important;
  background:linear-gradient(145deg,#fff,#e7eef3)!important;
  box-shadow:0 5px 14px rgba(31,55,72,.11),0 0 0 1px rgba(24,57,78,.06)!important;
}
.alpha-cat-photo::after{
  content:"";
  position:absolute;
  inset:2px;
  border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.58);
  pointer-events:none;
}
.alpha-cat-photo img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  border-radius:50%!important;
  object-fit:cover!important;
  background:#eef3f6!important;
}

.alpha-cat-label{
  position:relative;
  z-index:2;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:max-content!important;
  max-width:calc(var(--alpha-cat-cell,78px) + 8px)!important;
  min-height:22px!important;
  margin-top:-2px!important;
  padding:3px 6px!important;
  border-radius:10px!important;
  background:rgba(255,255,255,.98)!important;
  border:1px solid #e7edf1!important;
  color:#1d2730!important;
  font-size:var(--alpha-cat-font,8.8px)!important;
  line-height:1.12!important;
  font-weight:900!important;
  text-align:center!important;
  white-space:normal!important;
  box-shadow:0 4px 11px rgba(27,48,62,.08)!important;
}

.categories-bar .alpha-cat-circle:hover,
.categories-bar .alpha-cat-circle.active{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  transform:none!important;
}
.categories-bar .alpha-cat-circle:hover .alpha-cat-photo{
  box-shadow:0 7px 17px rgba(31,55,72,.15),0 0 0 2px rgba(31,134,217,.10)!important;
}
.categories-bar .alpha-cat-circle.active .alpha-cat-photo{
  background:linear-gradient(145deg,var(--primary,#1f86d9),#75bff0 58%,#f4a023)!important;
  box-shadow:0 7px 18px rgba(31,134,217,.20),0 0 0 2px rgba(31,134,217,.08)!important;
}
.categories-bar .alpha-cat-circle.active .alpha-cat-label{
  color:#fff!important;
  border-color:transparent!important;
  background:linear-gradient(135deg,var(--primary,#1f86d9),var(--accent,#1269ad))!important;
}
.categories-bar .alpha-cat-circle.active:after{display:none!important}

/* English layout: physical positions stay the same by design. */
html[dir="ltr"] .alpha-header-left{direction:ltr!important}
html[dir="ltr"] .alpha-header-left .header-actions{direction:ltr!important}
html[dir="ltr"] .categories-bar.alpha-header-categories{direction:ltr!important}
html[dir="ltr"] .alpha-header-left .search input{text-align:left!important;direction:ltr!important}

/* Reward strip remains directly below the compact header. */
.reward-progress{
  margin:0!important;
}

/* Medium desktop / tablet:
   keep the same left-center-right logic but slightly tighter. */
@media(max-width:1250px){
  :root{--alpha-header-height:98px}
  .header-inner.alpha-header-layout{
    width:min(100% - 20px,1220px)!important;
    grid-template-columns:minmax(245px,37%) minmax(100px,18%) minmax(390px,45%)!important;
  }
  .alpha-header-left{max-width:430px}
  .alpha-header-brand{width:100px!important;height:82px!important}
  .alpha-header-brand img{max-width:88px!important;max-height:74px!important}
  .categories-bar.alpha-header-categories{height:82px!important;min-height:82px!important}
  .categories-bar .alpha-cat-circle{height:79px!important;min-height:79px!important}
}

/* Mobile:
   Search/actions and logo remain clean, categories become a compact horizontal strip.
   This keeps category labels usable on narrow phones. */
@media(max-width:900px){
  :root{--alpha-header-height:auto}
  .header-inner.alpha-header-layout{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    padding:6px 8px!important;
    display:grid!important;
    grid-template-columns:1fr auto!important;
    grid-template-areas:
      "left brand"
      "categories categories"!important;
    gap:5px 8px!important;
  }
  .alpha-header-left{
    max-width:none!important;
    width:100%!important;
    gap:5px!important;
  }
  .alpha-header-left .search{
    height:38px!important;
    min-height:38px!important;
  }
  .alpha-header-left .header-actions{
    min-height:32px!important;
    gap:6px!important;
  }
  .alpha-header-left .action-btn,
  .alpha-header-left .icon-btn{
    width:32px!important;
    min-width:32px!important;
    height:32px!important;
    min-height:32px!important;
    font-size:14px!important;
  }
  .alpha-header-left .language-btn{
    width:43px!important;
    min-width:43px!important;
  }
  .alpha-header-left .menu-btn{display:grid!important}

  .alpha-header-brand{
    width:78px!important;
    height:76px!important;
  }
  .alpha-header-brand img{
    max-width:72px!important;
    max-height:70px!important;
  }

  .categories-bar.alpha-header-categories{
    height:73px!important;
    min-height:73px!important;
    display:flex!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
    gap:6px!important;
    padding:2px 4px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x proximity!important;
  }
  .categories-bar .alpha-cat-circle{
    flex:0 0 64px!important;
    width:64px!important;
    min-width:64px!important;
    max-width:64px!important;
    height:69px!important;
    min-height:69px!important;
    scroll-snap-align:center;
  }
  .alpha-cat-photo{
    width:48px!important;
    height:48px!important;
    flex-basis:48px!important;
  }
  .alpha-cat-label{
    max-width:70px!important;
    min-height:20px!important;
    padding:2px 5px!important;
    font-size:8px!important;
  }
}

@media(max-width:520px){
  .header-inner.alpha-header-layout{
    grid-template-columns:minmax(0,1fr) 68px!important;
  }
  .alpha-header-left .search button{
    min-width:49px!important;
    padding:0 10px!important;
  }
  .alpha-header-left .search input{
    padding:0 11px!important;
    font-size:11px!important;
  }
}