/**
 * SeKeys shared header — promo strip, sticky bar, category nav / mobile drawer.
 * Single source of truth: the homepage template and every other page render the same
 * markup (template-parts/sk-header.php) and load this file.
 *
 * The variables are declared on the components themselves, not on :root, so this file can
 * be loaded next to Elementor and the theme without leaking custom properties into them.
 */
.sk-top,.sk-head,.sk-nav,.sk-navbackdrop{--g:#1f7a45;--ink:#16213a;--mut:#5b6b86;--bg:#eef0f6;--line:#e3e7ef}

.sk-top{background:#0f2b52;color:#fff;text-align:center;font-size:14px;padding:9px 12px;line-height:1.5}
.sk-top b{color:#ffd85e}
.sk-top a{color:#fff;text-decoration:underline}

.sk-head{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:60}
.sk-head__in{display:flex;align-items:center;gap:14px;padding:11px 16px;max-width:1280px;margin:0 auto}
.sk-logo{display:flex;align-items:center}
.sk-logo img{width:132px;height:auto;display:block}

/* wrappers only — the search / cart widgets carry their own plugin styling */
.sk-search{flex:1;min-width:0;max-width:640px}
.sk-search .dgwt-wcas-search-wrapp{max-width:none;width:100%}
.sk-ico{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--mut);white-space:nowrap}
.sk-ico:hover{color:var(--g)}
.sk-cart{display:flex;align-items:center;position:relative}
.sk-cart .fkcart-shortcode-container{cursor:pointer;display:flex;align-items:center;gap:7px;line-height:1}
.sk-cart .fkcart-shortcode-icon-wrap{display:flex;align-items:center;position:relative}
.sk-cart .fkcart-shortcode-price{margin:0;font-size:14px}

/* account: the theme's own login panel is position:absolute with no offsets, so it needs a
   positioned parent or it anchors to the sticky bar and drifts across the page */
.sk-login{position:relative}
.sk-login>a{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--mut);white-space:nowrap;cursor:pointer}
.sk-login>a:hover{color:var(--g)}
.sk-login .sekeys-head-form{top:100%;inset-inline-start:0;inset-inline-end:auto;margin-top:12px;
 width:min(350px,calc(100vw - 24px));max-width:none}
/* Font Awesome's 400 weight is not loaded on this site (document.fonts.check → false), so the
   password "eye" rendered as an empty box. Draw it instead of relying on the icon font. */
.sk-login .pass-icon-sec i.fa-eye{width:19px;height:19px;opacity:.5;cursor:pointer;
 background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%235b6b86" stroke-width="1.8"><path d="M1.6 12S5.5 5 12 5s10.4 7 10.4 7-3.9 7-10.4 7S1.6 12 1.6 12Z"/><circle cx="12" cy="12" r="3"/></svg>') center/19px no-repeat}
.sk-login .pass-icon-sec i.fa-eye:before{content:""}

/* icon buttons — the site paints a pink ring on :focus for generic buttons, keep ours neutral */
/* the theme and WooCommerce both style bare <button>, and on non-home templates their rules
   won last — the icons came out filled green. These are ours; state them outright. */
.sk-head .sk-burger,.sk-head .sk-searchbtn{display:none;width:38px;height:38px;padding:0;
 border:1px solid var(--line)!important;background:#fff!important;border-radius:10px!important;
 cursor:pointer;place-items:center;color:#2b3a55!important;box-shadow:none!important;
 min-height:0;line-height:1;font-size:0}
.sk-head .sk-burger{align-content:center;gap:4px}
/* three bars */
.sk-head .sk-burger span{display:block;width:17px;height:2px;border-radius:2px;background:#2b3a55}
.sk-head .sk-burger:hover,.sk-head .sk-searchbtn:hover{border-color:var(--g)!important;color:var(--g)!important}
.sk-head .sk-burger:focus,.sk-head .sk-searchbtn:focus{outline:0;background:#fff!important;box-shadow:none!important}
.sk-head .sk-burger:focus-visible,.sk-head .sk-searchbtn:focus-visible{outline:2px solid var(--g);outline-offset:2px}
.sk-nav__head,.sk-navbackdrop{display:none}

/* nav + dropdown submenus. No overflow-x on the list: an ancestor with overflow:auto clips
   the absolutely positioned .sk-sub dropdowns. */
.sk-nav{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:57px;z-index:50}
.sk-nav>ul{display:flex;gap:2px;list-style:none;margin:0 auto;padding:0 16px;max-width:1280px;flex-wrap:wrap}
.sk-nav>ul>li{position:relative;flex:0 0 auto}
.sk-nav>ul>li>a{display:flex;align-items:center;gap:5px;padding:12px 14px;font-size:14.5px;font-weight:600;
 color:#2b3a55;white-space:nowrap;border-bottom:3px solid transparent}
.sk-nav>ul>li:hover>a,.sk-nav>ul>li:focus-within>a{color:var(--g);border-bottom-color:var(--g)}
.sk-nav>ul>li>a.is-current{color:var(--g);border-bottom-color:var(--g)}
.sk-nav svg{opacity:.55}
.sk-sub{position:absolute;inset-inline-start:0;top:100%;min-width:230px;background:#fff;
 border:1px solid var(--line);border-radius:0 0 12px 12px;box-shadow:0 12px 26px rgba(16,32,64,.13);
 padding:7px;margin:0;list-style:none;opacity:0;visibility:hidden;transform:translateY(-6px);
 transition:opacity .14s,transform .14s,visibility .14s}
.sk-nav>ul>li:hover .sk-sub,.sk-nav>ul>li:focus-within .sk-sub{opacity:1;visibility:visible;transform:none}
.sk-sub a{display:flex;justify-content:space-between;gap:10px;padding:8px 11px;border-radius:8px;
 font-size:14px;color:#2b3a55}
.sk-sub a:hover{background:#eaf3ee;color:var(--g)}

@media(max-width:900px){
 /* The closed drawer parks just past the right edge (translateX(101%)). On the homepage the
    template already clipped the body, but every other page grew its layout viewport to 446px
    on a 390px phone — the whole site rendered zoomed out. `clip` (not `hidden`) because
    hidden on html/body turns them into scroll containers and breaks position:sticky. */
 html,body{overflow-x:clip}
 /* the bar keeps only icons; the search field and the menu open from them */
 .sk-head .sk-searchbtn,.sk-head .sk-burger{display:grid}
 .sk-search{display:none;order:3;flex:1 0 100%;max-width:none;min-width:0}
 .sk-search.is-open{display:block}
 .sk-head__in{flex-wrap:wrap;gap:10px 12px}
 .sk-logo{margin-inline-end:auto}
 /* the nav was a horizontal scroll strip stuck under the header. It is a drawer now. */
 .sk-nav{position:fixed;top:0;right:0;bottom:0;left:auto;width:min(85vw,330px);z-index:200;
  border-bottom:0;border-inline-start:1px solid var(--line);box-shadow:-10px 0 30px rgba(16,32,64,.2);
  transform:translateX(101%);visibility:hidden;transition:transform .24s ease,visibility .24s;
  overflow-y:auto;overscroll-behavior:contain}
 .sk-nav.is-open{transform:none;visibility:visible}
 .sk-nav__head{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;
  background:#fff;padding:13px 16px;border-bottom:1px solid var(--line);font-weight:700;font-size:16px}
 .sk-navclose{border:0;background:none;font-size:27px;line-height:1;color:#5b6b86;cursor:pointer;padding:0 4px}
 .sk-nav>ul{display:block;padding:0 0 26px;max-width:none}
 .sk-nav>ul>li{border-bottom:1px solid var(--line)}
 .sk-nav>ul>li>a{justify-content:space-between;padding:13px 16px;font-size:15.5px;border-bottom:0}
 .sk-nav>ul>li>a svg{opacity:.75;transition:transform .18s}
 .sk-nav>ul>li.is-open>a svg{transform:rotate(180deg)}
 .sk-nav>ul>li:hover>a,.sk-nav>ul>li:focus-within>a{border-bottom-color:transparent}
 .sk-sub{position:static;display:none;opacity:1;visibility:visible;transform:none;min-width:0;
  border:0;border-radius:0;box-shadow:none;background:#f6f8fc;padding:2px 0 6px}
 .sk-nav>ul>li.is-open>.sk-sub{display:block}
 .sk-sub a{padding:10px 28px;font-size:14.5px}
 .sk-navbackdrop{display:block;position:fixed;inset:0;z-index:190;background:rgba(12,22,44,.45);
  opacity:0;pointer-events:none;transition:opacity .2s}
 .sk-navbackdrop.is-open{opacity:1;pointer-events:auto}
 body.sk-navlock{overflow:hidden}
 /* no room for a 350px panel beside the trigger — anchor it to the bar instead */
 .sk-login{position:static}
 .sk-login .sekeys-head-form{top:100%;inset-inline:12px;width:auto;margin-top:8px}
}

@media(max-width:520px){
 .sk-top{font-size:13px;padding:7px 10px}
 .sk-top__x{display:none}
 /* "התחבר / הרשמה" is 145px wide and pushed the cart onto a row of its own */
 .sk-login>a{font-size:0;gap:0}
 .sk-login>a i{font-size:17px}
}


/* The version-quiz bar is `position:sticky;top:0;z-index:999` and is printed BEFORE the header,
   so both stuck to the top and it covered the logo row (reported on a phone, 2026-09-09).
   It is promotional, not navigation — it scrolls away and the header keeps the top. */
body .quiz-head{position:static;z-index:1}