/* ==========================================================================
   HOCO REDESIGN — 10 HEADER
   Global header + top utility bar + category-nav pills.
   Matches /test: thin brand-purple utility bar, white sticky header with a
   big rounded pill search, hoco logo, account/wishlist/cart side icons with a
   small purple cart bubble, and a horizontal category pills strip.
   Targets Woodmart's real header markup (.whb-header / .wd-header-*).
   RTL + responsive. Companion JS (10-header.js) injects the search form,
   utility texts, side icons and the pills strip.
   ========================================================================== */

/* ---------- sticky wrapper + subtle shadow ---------- */
.whb-header{
  background:#fff;
  box-shadow:0 2px 12px rgba(28,20,32,.05);
}
.whb-header .whb-main-header{background:#fff}

/* ==========================================================================
   TOP UTILITY BAR — thin brand purple
   ========================================================================== */
.whb-top-bar.whb-row{
  background:var(--hoco-brand) !important;
  border:0 !important;
  font-size:12.5px;
  font-weight:500;
}
.whb-top-bar .whb-top-bar-inner{min-height:40px}
.whb-top-bar,
.whb-top-bar a,
.whb-top-bar .nav-link-text,
.whb-top-bar .wd-tools-text,
.whb-top-bar .wd-social-icons a{color:#fff !important}
.whb-top-bar a:hover{opacity:.82}
.whb-top-bar .whb-col-left,
.whb-top-bar .whb-col-right{display:flex;align-items:center;gap:8px}
.whb-top-bar .wd-nav-secondary>li>a{padding-block:6px}
/* separators between top-bar items -> subtle white */
.whb-top-bar .wd-nav.wd-style-separated>li:not(:last-child):after{
  border-color:rgba(255,255,255,.28) !important;
}
.whb-top-bar .trp-flag-image{border-radius:2px}
/* account / wishlist are relocated into the white header -> drop the duplicates
   here, but ONLY after JS has injected the replacements (.hoco-hdr-on). */
.hoco-hdr-on .whb-top-bar .wd-header-wishlist,
.hoco-hdr-on .whb-top-bar .wd-header-my-account,
.hoco-hdr-on .whb-top-bar .wd-header-divider{display:none !important}

/* injected utility texts (shipping + cash-on-delivery) */
.hoco-util{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-weight:600}

/* ==========================================================================
   MAIN HEADER (white) — logo · pill search · side icons
   ========================================================================== */
.whb-general-header.whb-row{
  background:#fff !important;
  border:0 !important;
}
.whb-general-header .whb-general-header-inner{
  display:flex;
  align-items:center;
  gap:22px;
  min-height:76px;
}
.whb-general-header .whb-col-left,
.whb-general-header .whb-col-right{flex:0 0 auto;width:auto}
/* Native main-nav column is replaced by the pill search + pills strip — but only
   once JS has injected them. Until then the native header stays intact & usable. */
.hoco-hdr-on .whb-general-header .whb-col-center{display:none !important}
.hoco-hdr-on .whb-general-header .wd-header-main-nav{display:none !important}

/* logo */
.whb-general-header .site-logo img{max-height:46px;width:auto}

/* ---------- pill search (injected) ---------- */
.hoco-search{
  order:2;
  flex:1 1 auto;
  max-width:620px;
  display:flex;
  align-items:stretch;
  background:#f1eef4;
  border:1.5px solid transparent;
  border-radius:999px;
  transition:.2s;
}
.hoco-hdr-on .whb-general-header .whb-col-left{order:1}
.hoco-hdr-on .whb-general-header .whb-col-right{order:3}
.hoco-search:focus-within{border-color:var(--hoco-brand);background:#fff}
.hoco-search input[type="search"]{
  flex:1;min-width:0;border:0;background:transparent;outline:0;
  padding:12px 20px;font:inherit;font-size:15px;color:var(--hoco-ink);
}
.hoco-search input[type="search"]::placeholder{color:var(--hoco-muted);opacity:.9}
.hoco-search button{
  flex:0 0 auto;margin:4px;border:0;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;
  padding:0 26px;border-radius:999px;
  background:var(--hoco-brand);color:#fff;font:inherit;font-weight:700;font-size:14px;
  transition:.2s;
}
.hoco-search button:hover{background:var(--hoco-brand-dark)}
.hoco-search button svg{display:block}

/* ---------- side icons (compare/cart native + injected account/wishlist) ---------- */
/* Desktop only — must not override Woodmart's .whb-visible-lg hiding on mobile,
   otherwise the desktop tools column would leak into the mobile header. */
@media (min-width:1025px){
  .whb-general-header .whb-col-right{display:flex;align-items:center;gap:4px}
}
/* the full-screen search opener is replaced by the inline pill search (post-JS) */
.hoco-hdr-on .whb-general-header .wd-header-search{display:none !important}

.hoco-tool,
.whb-general-header .wd-header-compare>a,
.whb-general-header .wd-header-cart>a{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:12px;
  color:var(--hoco-ink);transition:.15s;
}
.hoco-tool:hover,
.whb-general-header .wd-header-compare>a:hover,
.whb-general-header .wd-header-cart>a:hover{background:#f4f1f6;color:var(--hoco-brand)}
.hoco-tool svg{width:23px;height:23px;display:block}
/* keep the tools compact: icon only */
.whb-general-header .wd-header-cart .wd-tools-text,
.whb-general-header .wd-header-compare .wd-tools-text{display:none !important}
.whb-general-header .wd-header-compare .wd-tools-icon,
.whb-general-header .wd-header-cart .wd-tools-icon{font-size:23px;line-height:1}

/* ---------- count bubbles (purple) ---------- */
.whb-header .wd-header-cart .wd-cart-number,
.whb-general-header .wd-header-compare .wd-tools-count{
  position:absolute;top:5px;inset-inline-start:5px;
  min-width:18px;height:18px;padding:0 5px;
  background:var(--hoco-brand);color:#fff;
  border:2px solid #fff;border-radius:999px;
  font-size:11px;font-weight:700;line-height:15px;text-align:center;
  white-space:nowrap;box-sizing:content-box;
}
.whb-header .wd-header-cart .wd-cart-number>span{display:none} /* hide the "items" word */

/* ==========================================================================
   CATEGORY PILLS STRIP (injected)
   ========================================================================== */
.hoco-catnav{
  background:#fff;
  border-top:1px solid var(--hoco-line);
  border-bottom:1px solid var(--hoco-line);
}
.hoco-catnav .hoco-catnav-in{
  display:flex;gap:8px;align-items:center;
  overflow-x:auto;scrollbar-width:none;
  padding-block:11px;
}
.hoco-catnav .hoco-catnav-in::-webkit-scrollbar{display:none}
.hoco-catnav a{
  white-space:nowrap;
  padding:7px 16px;border-radius:999px;
  font-weight:600;font-size:14px;
  color:#4a444e;background:#f4f1f6;transition:.18s;
}
.hoco-catnav a:hover{background:var(--hoco-brand-2);color:#fff}
.hoco-catnav a.is-active{background:var(--hoco-brand);color:#fff}

/* ==========================================================================
   RESPONSIVE — compact mobile header, search drops to its own full-width row
   ========================================================================== */
@media (max-width:1024px){
  /* Let the header row grow so the wrapped full-width search doesn't overflow
     onto the pills strip below it. */
  .whb-general-header,
  .whb-general-header .whb-general-header-inner{height:auto !important}
  .whb-general-header .whb-general-header-inner{
    flex-wrap:wrap;
    align-items:center;
    gap:10px 12px;
    min-height:0;
    padding-block:10px;
  }
  .whb-general-header .site-logo img{max-height:40px}
  /* Search is relocated by JS to its own full-width block row inside the header
     (.hoco-search--row), directly above the category pills. */
  .hoco-search--row{
    display:flex;order:0;flex:none;width:auto;max-width:none;
    margin:6px 15px 10px;
  }
  .hoco-search input[type="search"]{padding:11px 16px}
  .hoco-search button{padding:0 20px}
  .hoco-catnav .hoco-catnav-in{padding-block:9px}
}
@media (max-width:575px){
  .hoco-search button span{display:none}      /* icon-only search button */
  .hoco-search button{padding:0 16px}
}