/* ============================================================
   Wazzanvet — header refresh v2 (site-wide, desktop >=1024px only)
   Mega-menu restructured via CSS: big photo columns -> small
   thumbnail + name + clean link list (matches approved preview).
   Search box -> rounded pill. Nav hover -> red underline.
   Mobile/tablet (<=1023px) completely untouched.
   No markup/JS/feature changes.
   ============================================================ */
@media (min-width:1024px){

/* ---------- MEGA PANEL: dark -> white card ---------- */
.wsmenu-list li > .shop-now{
  background:#fff !important;
  border-top:3px solid #e7342f !important;
  border-radius:0 0 16px 16px !important;
  box-shadow:0 26px 56px rgba(45,24,23,.22) !important;
  overflow:hidden !important;
}
/* columns: drop the dark overlay bg, add subtle separators */
.shop-now .menu-item{
  background:transparent !important;
  border-right:1px solid #f0e6d4 !important;
  padding:6px 0 14px !important;
}
.shop-now .menu-item:last-child{border-right:0 !important}
.shop-now .menu-item.active{background:#fbf5ea !important}

/* category header: full-bleed photo -> small thumb + name row */
.shop-now .menu-item a.main-link{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  padding:12px 14px !important;
  border-bottom:1px solid #efe4d2 !important;
}
.shop-now .menu-item a.main-link img.shop-menu-img{
  width:44px !important;
  height:44px !important;
  flex:0 0 44px !important;
  object-fit:cover !important;
  border-radius:10px !important;
  opacity:1 !important;
  box-shadow:0 2px 8px rgba(45,24,23,.18) !important;
}
/* name: absolute white-on-photo overlay -> static dark text */
.shop-now .menu-item a.main-link span{
  position:static !important;
  background:transparent !important;
  padding:0 !important;
  color:#2d1817 !important;
  font-size:14px !important;
  font-weight:700 !important;
  line-height:1.25 !important;
  text-align:left !important;
}
.shop-now .menu-item.active a.main-link span{background:transparent !important;color:#e7342f !important}
.shop-now .menu-item a.main-link:hover span{color:#e7342f !important}

/* subcategory links: white-on-dark -> dark-on-white */
.shop-now-sub li{background:transparent !important}
/* kill the hardcoded inline green highlight (Dog/Cat Food) */
.shop-now .shop-now-sub li[style]{background:transparent !important;background-color:transparent !important}
.shop-now-sub li a{
  color:#5b4a41 !important;
  border-bottom:1px solid #f4ede1 !important;
  padding:7px 6px 7px 20px !important;
  transition:color .15s, padding .15s !important;
}
.shop-now-sub li a:hover{background:transparent !important;color:#e7342f !important;padding-left:24px !important}
.shop-now-sub li a.active{background:transparent !important;color:#e7342f !important;font-weight:700}
/* the little arrows before links (if drawn via pseudo) */
.shop-now-sub li a::before,.shop-now-sub li a::after{border-color:#c9b49b !important;color:#c9b49b !important}
.shop-now-sub li a:hover::before,.shop-now-sub li a:hover::after{border-color:#e7342f !important;color:#e7342f !important}

/* ---------- SEARCH: square grey boxes -> one rounded pill ---------- */
.search-div{
  background:#fff !important;
  border-radius:999px !important;
  overflow:hidden !important;
  box-shadow:0 8px 22px rgba(0,0,0,.20) !important;
}
.search-sub select.form-control{
  background-color:#f4efe7 !important;
  color:#2d1817 !important;
  border:0 !important;
  border-right:1px solid #e6d9c2 !important;
  height:40px !important;
}
.search-input .form-control,
.search-input .form-control:hover,
.search-input .form-control:focus{
  height:40px !important;
  border:0 !important;
  padding:4px 14px 6px 14px !important;
}
.search-input button{
  height:40px !important;
  background:#e7342f !important;
  border:0 !important;
  transition:filter .2s !important;
}
.search-input button:hover{filter:brightness(.9)}
.search-input{margin:0 0 0 150px !important;padding:0 52px 0 0 !important}

/* ---------- NAV LINKS: red underline hover (like preview) ---------- */
.wsmenu-list > li > a{
  transition:color .18s, box-shadow .18s !important;
}
.wsmenu-list > li > a:hover,
.wsmenu-list > li.active > a{
  box-shadow:inset 0 -3px 0 #e7342f !important;
  color:#fff !important;
}

} /* end desktop scope */

/* ============================================================
   Wazzanvet — header v3: two-tier desktop layout (>=1024px only)
   Tier 1 (dark #2d1817): logo left | search pill middle | wishlist,
   cart, language, login right — all vertically centered.
   Tier 2: full-bleed nav strip #3a1f1c, 14px links, red 3px
   underline on hover (underline itself defined in v2 above).
   Pure-CSS re-layout: .navigation{display:contents} promotes
   .search-main and .wsmenucontainer to flex items of the .col-12
   flex row; the strip wraps to its own full-width line.
   No markup/JS changes. Mobile/tablet (<=1023px) untouched.
   ============================================================ */
@media (min-width:1024px){

/* header shell: full-width container with redesign side gutters */
header#header{padding:0 !important;--hgut:clamp(20px,5.5vw,112px);}
header#header > .container{max-width:100% !important;width:100% !important;padding-left:var(--hgut) !important;padding-right:var(--hgut) !important;}
header#header > .container > .row{margin-left:0 !important;margin-right:0 !important;}
header#header > .container > .row > .col-12{padding-left:0 !important;padding-right:0 !important;flex-wrap:wrap !important;align-items:center !important;}

/* dissolve .navigation so search + nav become direct flex items */
header#header .navigation{display:contents !important;}

/* ---- tier 1: logo hard-left ---- */
header#header .ani-mall{order:1 !important;width:200px !important;flex:0 0 200px !important;margin:4px 0 !important;align-items:center !important;}

/* ---- tier 1: search pill in the middle (flexible, max 640px) ---- */
header#header .search-main{order:2 !important;flex:1 1 260px !important;min-width:260px !important;max-width:640px !important;margin:4px 30px !important;}

/* ---- tier 1: right cluster — wishlist, cart, language, login ---- */
header#header .right-header{order:3 !important;float:none !important;margin:4px 0 !important;align-items:center !important;}
header#header .fav-lan-acnt-cart{float:none !important;margin:0 !important;display:flex !important;align-items:center !important;gap:20px !important;}
header#header .favourite-cart{float:none !important;order:1 !important;display:flex !important;align-items:center !important;}
header#header .lang-account{float:none !important;order:2 !important;display:flex !important;align-items:center !important;}
header#header .favourite-main,
header#header .cart-main{float:none !important;}

/* ---- tier 2: full-bleed nav strip below tier 1 ---- */
header#header .wsmenucontainer{
  order:4 !important;
  display:block !important;
  flex:0 0 calc(100% + var(--hgut) * 2) !important;
  width:auto !important;
  margin:0 calc(var(--hgut) * -1) !important;
  padding:0 var(--hgut) !important;
  background:#3a1f1c !important;
}
header#header .wsmenu-list > li > a{
  font-size:14px !important;
  line-height:20px !important;
  padding:7px 14px !important;
}
/* first link flush with the left content edge (LTR pages only) */
html:not([dir="rtl"]) header#header .wsmenu-list > li:first-child > a{padding-left:0 !important;}
/* drop the legacy 1px hover line; the v2 3px box-shadow underline remains */
header#header .wsmenu-list > li > a:hover::before,
header#header .wsmenu-list > li > a.nav-active::before,
header#header .wsmenu-list > li:hover > a::before{display:none !important;}

} /* end v3 desktop scope */

/* ===== v4: taller tier-2 nav strip + gap between fixed header and banner (desktop only) ===== */
@media (min-width:1024px){
  /* taller nav bar */
  header#header .wsmenu-list > li > a{padding-top:15px !important;padding-bottom:15px !important}
  /* push first content (banner) below the taller header + leave a visible gap — every page uses .banner-main */
  .banner-main{margin-top:128px !important}
}

/* ===== v5: search pill refined to match preview (taller + clean arrow) ===== */
@media (min-width:1024px){
  header#header .search-div{box-shadow:0 8px 22px rgba(0,0,0,.18) !important}
  header#header .search-sub select.form-control{
    height:46px !important;
    padding:4px 32px 6px 16px !important;
    background-color:#f1ece2 !important;
    background-image:linear-gradient(45deg,transparent 50%,#8a7d72 50%),linear-gradient(135deg,#8a7d72 50%,transparent 50%) !important;
    background-position:calc(100% - 18px) 21px,calc(100% - 13px) 21px !important;
    background-size:5px 5px,5px 5px !important;
    background-repeat:no-repeat !important;
    -webkit-appearance:none !important;appearance:none !important;
  }
  header#header .search-input .form-control,
  header#header .search-input .form-control:hover,
  header#header .search-input .form-control:focus{height:46px !important;font-size:14px !important}
  header#header .search-input button{height:46px !important;width:58px !important}
}

/* ===== add-to-cart click feedback: green tick, no popup (site-wide) ===== */
.add-to-cart{position:relative !important}
.add-to-cart.atc-done{background:#2e7d54 !important;border-color:#2e7d54 !important}
.add-to-cart.atc-done img{opacity:0 !important}
.add-to-cart.atc-done::after{content:"\2713";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:22px;font-weight:700;animation:atc-pop .35s ease}
@keyframes atc-pop{0%{transform:scale(0)}60%{transform:scale(1.3)}100%{transform:scale(1)}}
.addtocartDetailPage.atc-done{background:#2e7d54 !important;border-color:#2e7d54 !important}
.addtocartDetailPage.atc-done::after{content:" \2713";font-weight:700}

/* ===== v7: clearer vertical gap between header and the HOME banner ===== */
@media (min-width:1024px){
  .banner-main:not(.inner-banner-main){margin-top:158px !important}
}

/* ===== v8: wishlist/cart labels (like preview) + clean search icon ===== */
/* new search magnifier (all sizes) */
.search-input button img{display:none !important}
.search-input button{
  background:#e7342f url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23fff'%20stroke-width='2.2'%20stroke-linecap='round'%3E%3Ccircle%20cx='11'%20cy='11'%20r='7'/%3E%3Cline%20x1='21'%20y1='21'%20x2='16.5'%20y2='16.5'/%3E%3C/svg%3E") center center no-repeat !important;
  background-size:19px 19px !important;
}
@media (min-width:1024px){
  header#header .favourite-main,
  header#header .cart-main{
    position:relative !important;
    display:flex !important;flex-direction:column !important;align-items:center !important;
    padding:0 8px !important;cursor:pointer;
  }
  header#header .favourite-main::after{content:"Wishlist";font-size:10.5px;color:#c9b49b;margin-top:1px;white-space:nowrap;letter-spacing:.02em}
  header#header .cart-main::after{content:"Cart";font-size:10.5px;color:#c9b49b;margin-top:1px;white-space:nowrap;letter-spacing:.02em}
  html[lang="ar"] header#header .favourite-main::after{content:"المفضلة"}
  html[lang="ar"] header#header .cart-main::after{content:"العربة"}
  /* count -> small red corner badge on the icon */
  header#header .favourite-main .favourite-num,
  header#header .cart-main .cart-num{
    position:absolute !important;top:-5px !important;right:0 !important;left:auto !important;
    background:#e7342f !important;color:#fff !important;font-size:9.5px !important;font-weight:700 !important;
    min-width:16px !important;height:16px !important;line-height:16px !important;
    border-radius:999px !important;text-align:center !important;padding:0 3px !important;
    border:2px solid #2d1817 !important;box-sizing:content-box !important;
  }
}