/* E-Care v3 header inside Woodmart pages — wave 2 (DEC-ECARE-HEADER-FOOTER-2026-11-13).
   Every rule is scoped to header.ech / nav.ech-cat so it cannot touch the Woodmart page, and resets what Woodmart
   sets on form / input / button / a so it looks the same as the header of the v3 product pages. Light only. */
header.ech,nav.ech-cat{--white:#fff;--tint:#F4F8FC;--line:#E1E8F0;--line2:#CBD7E4;--ink:#16202E;--muted:#4F5B6B;--navy:#01205A;--blue:#0B5BA0;--blue-d:#084A84;--sky:#2C8EC1;--wa:#0E7A43;--r-s:10px;
  --f-h:"Readex Pro","IBM Plex Sans Arabic",Tahoma,sans-serif;--f-b:"IBM Plex Sans Arabic","Readex Pro",Tahoma,sans-serif;
  display:block;background:var(--white);color:var(--ink);font:400 16px/1.65 var(--f-b);direction:rtl;text-align:start;letter-spacing:0;text-transform:none;margin:0}
header.ech *,header.ech *::before,header.ech *::after,nav.ech-cat *,nav.ech-cat *::before,nav.ech-cat *::after{box-sizing:border-box}
header.ech .ech-in,nav.ech-cat .ech-in{max-width:1280px;margin-inline:auto;padding-inline:clamp(16px,3vw,32px)}
header.ech .ic,nav.ech-cat .ic{flex:none;display:block;fill:none;stroke:currentColor}
header.ech a,nav.ech-cat a{text-decoration:none;letter-spacing:0;text-transform:none}
header.ech a:focus-visible,header.ech button:focus-visible,header.ech input:focus-visible,nav.ech-cat a:focus-visible{outline:3px solid var(--sky);outline-offset:2px;border-radius:6px}
header.ech .ech-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
header.ech{border-bottom:1px solid var(--line);position:sticky;top:env(safe-area-inset-top,0px);z-index:390}
header.ech>.ech-in{display:flex;align-items:center;gap:20px;min-height:84px}
header.ech .ech-logo a{display:block}
header.ech .ech-logo img{max-height:58px;width:auto;height:auto;display:block}
header.ech .ech-search{flex:1;display:flex;align-items:center;max-width:620px;margin:0 auto;background:var(--tint);border:1.5px solid var(--line2);border-radius:999px;padding:4px;transition:border-color .15s}
header.ech .ech-search:focus-within{border-color:var(--blue);background:#fff}
header.ech .ech-search input[type=search]{flex:1;min-width:0;height:auto;margin:0;border:0;border-radius:0;box-shadow:none;background:transparent;font:400 15px/1.4 var(--f-b);padding:9px 16px;color:var(--ink)}
header.ech .ech-search input[type=search]:focus{outline:0;box-shadow:none}
header.ech .ech-search input[type=search]::placeholder{color:var(--muted);opacity:1}
header.ech .ech-search button{flex:none;margin:0;border:0;background:var(--blue);color:#fff;width:44px;height:44px;min-height:0;padding:0;border-radius:999px;display:grid;place-items:center;cursor:pointer;box-shadow:none}
header.ech .ech-search button:focus-visible{outline:3px solid var(--sky)!important;outline-offset:2px}
header.ech .ech-search button:hover{background:var(--blue-d);color:#fff}
header.ech .ech-help{display:flex;align-items:center;gap:10px;color:var(--navy);line-height:1.25}
header.ech .ech-help .ic{color:var(--wa)}
header.ech .ech-help small{display:block;color:var(--muted);font-size:12.5px}
header.ech .ech-help b{font:600 14.5px/1.25 var(--f-h)}
header.ech .ech-icon{position:relative;flex:none;width:46px;height:46px;border-radius:999px;display:grid;place-items:center;color:var(--navy);border:1px solid var(--line)}
header.ech .ech-icon:hover{background:var(--tint);color:var(--blue)}
header.ech .ech-cc{position:absolute;top:-4px;inset-inline-end:-4px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--blue);color:#fff;font:600 12px/20px var(--f-b);text-align:center}
header.ech .ech-cc[hidden]{display:none}
nav.ech-cat{border-bottom:1px solid var(--line);position:relative}
nav.ech-cat .ech-in{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
nav.ech-cat .ech-in::-webkit-scrollbar{display:none}
nav.ech-cat a{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;padding:13px 14px;color:var(--ink);font:500 14.5px/1 var(--f-h);border-bottom:2.5px solid transparent}
nav.ech-cat a .ic{color:var(--blue)}
nav.ech-cat a:hover{color:var(--blue);border-bottom-color:var(--sky)}
nav.ech-cat a.all{background:var(--blue);color:#fff;border-radius:var(--r-s) var(--r-s) 0 0;border-bottom-color:var(--blue)}
nav.ech-cat a.all .ic{color:#fff}
@media (max-width:1180px){header.ech .ech-help{display:none}}
/* six sections: on phones the row scrolls, a fade on the far edge says there is more */
/* 1280 review: the seven links measured 1390px in a 1280px row — tighter on desktop so they fit at 1280+ */
@media (min-width:901px){nav.ech-cat .ech-in{gap:0}nav.ech-cat a{padding-inline:10px;font-size:14px}}
@media (max-width:1279px){nav.ech-cat::after{content:"";position:absolute;inset-block:0;inset-inline-end:0;width:40px;pointer-events:none;background:linear-gradient(to left,rgba(255,255,255,0),var(--white))}}
@media (max-width:640px){
  header.ech>.ech-in{gap:8px;min-height:0;padding-block:8px}
  header.ech .ech-logo img{max-height:38px}
  header.ech .ech-search{flex:1 1 auto;min-width:0;padding:3px}
  header.ech .ech-search input[type=search]{font-size:14px;padding:8px 10px}
  header.ech .ech-search button{width:40px;height:40px}
  header.ech .ech-icon{width:40px;height:40px}
  header.ech .ech-icon .ic{width:21px;height:21px}
}
@media (prefers-reduced-motion:reduce){header.ech .ech-search{transition:none}}