/* Superflies v2 — 20-header.css (plan.md §7): header bars, search, actions, nav row + dropdown,
   mobile header, chip row, drawer + panels, lang/currency panel, top bars, breadcrumbs. */

/* ---- top notification / B2B bars (moved from inline <style>, M0-22) ---- */
.sf-topbar,.topnotificationbar,.b2btopbar{width:100%;padding:10px;color:#fff;text-align:center;font-size:16px;background-color:#ff5f51;position:relative;z-index:1}
.sf-topbar p,.topnotificationbar p,.b2btopbar p{margin:0!important}
@media (max-width:767px){.sf-topbar,.topnotificationbar,.b2btopbar{font-size:14px}}

/* ---- header shell ---- */
.sf-header{background:var(--sf-navy);color:var(--sf-white);position:relative;z-index:120}
.sf-header a{color:inherit;text-decoration:none}
.sf-header a:hover{text-decoration:none}
.sf-header__inner{max-width:var(--sf-container);margin:0 auto;padding:14px 40px;display:flex;align-items:center;gap:28px}
.sf-header__bar--mobile{display:none}
.sf-logo{display:inline-flex;align-items:center;flex:none;line-height:0}
.sf-logo__img{height:30px;width:auto;max-width:none;aspect-ratio:558/132.4}
.sf-logo--mobile .sf-logo__img{height:24px}
.sf-logo__text{font-size:20px;font-weight:700;color:var(--sf-white);line-height:1}
@media (min-width:768px){.sf-header{position:sticky;top:0}}

/* ---- search ---- */
.sf-header__search{flex:1;min-width:0}
.sf-search{position:relative;display:flex;align-items:center;height:44px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:var(--sf-r-8);margin:0;overflow:hidden}
.sf-search:focus-within{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.12)}
.sf-search__icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--sf-muted-2);display:inline-flex;pointer-events:none}
.sf-search__icon svg{width:14px;height:14px}
.sf-search .sf-search__input,.sf-search input[type=search]{flex:1;height:44px;border:0;border-radius:0;background:transparent;color:var(--sf-white);font-size:15px;padding:0 44px 0 38px;min-width:0;-webkit-appearance:none;appearance:none;outline:none}
.sf-search .sf-search__input::placeholder{color:var(--sf-muted-2)}
.sf-search input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}
.sf-search__btn{position:absolute;right:4px;top:4px;width:36px;height:36px;border-radius:var(--sf-r-6);display:grid;place-content:center;color:var(--sf-nav-text);background:transparent}
.sf-search__btn:hover{background:rgba(255,255,255,.12);color:var(--sf-white)}

/* ---- actions ---- */
.sf-header__actions{display:flex;gap:6px;align-items:center;color:var(--sf-nav-text);flex:none}
.sf-hbtn{display:flex;flex-direction:column;align-items:flex-start;line-height:1.2;padding:6px 8px;border:1px solid transparent;border-radius:var(--sf-r-6);text-decoration:none;color:var(--sf-white);background:transparent;cursor:pointer;text-align:left;white-space:nowrap}
.sf-hbtn:hover,.sf-hbtn.is-current,.sf-hbtn[aria-expanded=true]{border-color:rgba(255,255,255,.6)}
.sf-hbtn__top{font-size:11px;color:var(--sf-muted-2);display:inline-flex;align-items:center;gap:5px}
.sf-hbtn__top img{width:16px;height:11px;display:inline-block}
.sf-hbtn__main{font-size:14px;font-weight:700;color:var(--sf-white)}
.sf-cart{flex-direction:row;align-items:flex-end;gap:6px;padding:4px 8px}
.sf-cart__icon{position:relative;display:inline-block;width:34px;height:30px;line-height:0}
.sf-cart__icon svg{width:30px;height:30px}
.sf-cart__count{position:absolute;left:11px;top:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--sf-orange);color:var(--sf-ink);font-size:12px;font-weight:700;line-height:18px;text-align:center;display:inline-block;transition:transform .2s}
.sf-cart__count.is-bump{transform:scale(1.3)}
.sf-cart__label{line-height:1;padding-bottom:2px}

/* ---- language / currency panel ---- */
.sf-lang{position:relative}
.sf-lang__panel{display:none;background:var(--sf-white);color:var(--sf-ink);border:1px solid var(--sf-border);border-radius:var(--sf-r-10);box-shadow:var(--sf-shadow-card);padding:16px;gap:20px;z-index:200;text-align:left}
.sf-lang__panel--panel{position:absolute;top:calc(100% + 8px);left:0;width:280px;grid-template-columns:1fr 1fr}
.sf-lang__panel.is-open{display:grid}
.sf-lang__panel--inline{position:static;width:auto;box-shadow:none;border:0;border-top:1px solid var(--sf-border);border-radius:0;padding:12px 16px 4px;grid-template-columns:1fr 1fr}
.sf-lang__panel--inline.is-open{display:grid}
.sf-lang__block .sf-eyebrow{font-size:11px;margin-bottom:8px}
.sf-lang__block ul,.sf-lang__block .sub-menu{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.sf-lang__block .lang-item a{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:var(--sf-r-6);font-size:14px;color:var(--sf-ink);text-decoration:none}
.sf-lang__block .lang-item a:hover{background:var(--sf-surface-3)}
.sf-lang__block .lang-item.current-lang a{font-weight:600;background:var(--sf-surface-2)}
.sf-lang__block .lang-item img{width:16px;height:11px;flex:none}
.sf-lang__block .lang-item span{margin:0!important}
.sf-lang__block .woocommerce-currency-switcher-form{margin:0}
.sf-lang__block select.woocommerce-currency-switcher{width:100%;border:1px solid var(--sf-border-2);border-radius:var(--sf-r-6);padding:7px 30px 7px 10px;font-size:14px;background-color:var(--sf-white);color:var(--sf-ink)}
.sf-footer .sf-lang__panel--panel{top:auto;bottom:calc(100% + 8px)}

/* ---- primary nav row ---- */
.sf-nav{background:var(--sf-navy);border-top:1px solid rgba(255,255,255,.1);color:var(--sf-nav-text);position:relative;z-index:110}
.sf-nav__wrap{position:relative}
.sf-nav__scroll{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-behavior:smooth} /* dropdowns are positioned against .sf-nav (outside this box) so they are not clipped */
.sf-nav__scroll::-webkit-scrollbar{display:none}
.sf-nav__list{list-style:none;margin:0;padding:0;display:inline-flex;min-width:100%;flex-wrap:nowrap;gap:0 26px;align-items:stretch}
.sf-nav__item{position:static}
.sf-nav__caret{position:absolute;top:0;bottom:0;width:56px;z-index:3;display:grid;place-content:center;color:var(--sf-white);border:0;cursor:pointer;padding:0}
.sf-nav__caret[hidden]{display:none}
.sf-nav__caret--right{right:0;background:linear-gradient(90deg,rgba(15,28,46,0),var(--sf-navy) 45%);justify-items:end;padding-right:6px}
.sf-nav__caret--left{left:0;background:linear-gradient(270deg,rgba(15,28,46,0),var(--sf-navy) 45%);justify-items:start;padding-left:6px}
.sf-nav__caret .sf-icon{width:28px;height:28px;padding:6px;border-radius:50%;background:rgba(255,255,255,.14);transition:background .15s}
.sf-nav__caret:hover .sf-icon{background:var(--sf-green)}
.sf-nav__caret--right .sf-icon{animation:sf-nav-nudge 1.6s ease-in-out 3}
@keyframes sf-nav-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}
.sf-nav__item>a{display:block;padding:13px 0;border-bottom:2px solid transparent;font-size:14px;font-weight:500;color:var(--sf-nav-text);white-space:nowrap;text-decoration:none}
.sf-nav__item>a:hover,.sf-nav__item.is-open>a,.sf-nav__item:focus-within>a,.sf-nav__item.is-current>a{border-bottom-color:var(--sf-nav-hover);color:var(--sf-white)}
.sf-nav__item--highlight>a{color:var(--sf-orange-2)}
.sf-nav__item--first-highlight{margin-left:auto}
.sf-nav__dropdown{display:none;position:absolute;top:100%;left:var(--sf-dd-left,0);min-width:220px;background:var(--sf-white);color:var(--sf-ink);border:1px solid var(--sf-border);border-radius:var(--sf-r-10);box-shadow:var(--sf-shadow-card);padding:8px;z-index:210}
.sf-nav__item--parent:hover .sf-nav__dropdown,.sf-nav__item--parent:focus-within .sf-nav__dropdown,.sf-nav__item.is-open .sf-nav__dropdown{display:block}
.sf-nav__item--highlight .sf-nav__dropdown{left:auto;right:var(--sf-dd-right,0)}
.sf-nav__dropdown ul{list-style:none;margin:0;padding:0}
.sf-nav__dropdown li a{display:block;padding:8px 12px;border-radius:var(--sf-r-6);font-size:14px;color:var(--sf-ink);text-decoration:none;white-space:nowrap}
.sf-nav__dropdown li a:hover{background:var(--sf-surface-3)}
.sf-nav__dropdown li.is-current>a{font-weight:600;background:var(--sf-surface-2)}
.sf-nav__all>a{font-weight:600}
.sf-nav__all{border-bottom:1px solid var(--sf-border-3);margin-bottom:4px;padding-bottom:4px}
.sf-nav__sub{padding-left:14px!important}
.sf-nav__sub li a{font-size:13px;color:var(--sf-text-2)}
/* live-menu structure: "Categories ▾" container → list dropdown with flyouts (old theme behaviour) */
.sf-nav__chev{display:inline-block;margin-left:6px;vertical-align:-1px;opacity:.8}
.sf-nav__dropdown--menu{min-width:250px;padding:6px}
.sf-nav__dropdown--menu>ul>li{position:relative}
.sf-nav__dropdown .sf-nav__row>a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 10px;font-size:14px;line-height:1.3}
.sf-nav__row>a .sf-icon{flex:none;color:var(--sf-muted-2)}
.sf-nav__row--parent:hover>a,.sf-nav__row--parent:focus-within>a,.sf-nav__row.is-open>a{background:var(--sf-surface-3)}
.sf-nav__flyout{display:none;position:absolute;left:calc(100% + 2px);top:-7px;min-width:220px;background:var(--sf-white);border:1px solid var(--sf-border);border-radius:var(--sf-r-10);box-shadow:var(--sf-shadow-card);padding:6px;z-index:2}
.sf-nav__row--parent:hover>.sf-nav__flyout,.sf-nav__row--parent:focus-within>.sf-nav__flyout,.sf-nav__row.is-open>.sf-nav__flyout{display:block}
.sf-nav__flyout li a{padding:7px 10px}
.sf-nav__flyout .sf-nav__all{border-bottom:0;border-top:1px solid var(--sf-border-3);margin:4px 0 0;padding:4px 0 0}
.sf-nav__item--parent .sf-nav__dropdown::before{content:"";position:absolute;left:0;right:0;top:-8px;height:8px}
@media (hover:none){.sf-nav__row--parent:hover>.sf-nav__flyout{display:none}.sf-nav__row.is-open>.sf-nav__flyout{display:block}}
@media (hover:none){.sf-nav__item--parent:hover .sf-nav__dropdown{display:none}.sf-nav__item.is-open .sf-nav__dropdown{display:block}}

/* ---- breadcrumbs ---- */
.sf-breadcrumbs{font-size:13px;color:var(--sf-muted);padding:20px 0 0}
.sf-breadcrumbs a{color:var(--sf-muted);text-decoration:none}
.sf-breadcrumbs a:hover{color:var(--sf-ink)}
.sf-breadcrumbs .breadcrumb_last{color:var(--sf-ink);font-weight:700}
.sf-breadcrumbs__sep{margin:0 6px}
.sf-breadcrumbs+.sf-main .sf-page{padding-top:14px}
@media (max-width:767px){.sf-breadcrumbs{padding-top:12px;white-space:nowrap;overflow-x:auto;scrollbar-width:none}.sf-breadcrumbs::-webkit-scrollbar{display:none}}

/* ---- checkout header variant ---- */
.sf-header__inner--checkout{display:grid;grid-template-columns:1fr auto 1fr;padding:16px 40px}
.sf-header--checkout .sf-logo__img{height:28px}
.sf-header__back{display:inline-flex;align-items:center;gap:4px;font-size:14px;color:var(--sf-nav-text)}
.sf-header__back:hover{color:var(--sf-white)}
.sf-header__secure{justify-self:end;display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--sf-muted-2)}

/* ---- mobile header ---- */
.sf-mheader{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:14px 16px}
.sf-mheader__btn{display:inline-grid;place-content:center;color:var(--sf-white);line-height:0;padding:0;background:transparent;border:0;min-width:32px;min-height:32px}
.sf-mheader>.sf-mheader__btn{justify-self:start} /* grid items stretch by default → the burger sat in the middle of the left column (bug report P5) */
.sf-mheader .sf-logo{justify-self:center}
.sf-mheader__actions{display:flex;align-items:center;gap:14px;justify-self:end}
.sf-cart--mobile{padding:0;align-items:center}
.sf-cart--mobile .sf-cart__icon{width:30px;height:26px}
.sf-cart--mobile .sf-cart__icon svg{width:26px;height:26px}
.sf-cart--mobile .sf-cart__count{left:10px;top:-6px;min-width:17px;height:17px;line-height:17px;font-size:11px;padding:0 4px}
.sf-mheader__search{padding:0 16px 14px}
.sf-mheader__search .sf-search .sf-search__input{font-size:14px}
.sf-mobile-nav{display:none;gap:8px;padding:12px 16px;overflow-x:auto;white-space:nowrap;background:var(--sf-surface);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.sf-mobile-nav::-webkit-scrollbar{display:none}
.sf-mobile-nav .sf-chip{flex:none;padding:8px 12px;font-size:13px;font-weight:500;color:var(--sf-ink)}
.sf-mobile-nav .sf-chip--highlight{color:var(--sf-warning);border-color:var(--sf-warn-border)}

/* ---- drawer ---- */
.sf-drawer__backdrop{position:fixed;inset:0;background:rgba(15,28,46,.55);z-index:1290}
.sf-drawer__backdrop[hidden]{display:none}
.sf-drawer{color:var(--sf-ink);overflow:hidden}
.sf-drawer__bar{background:var(--sf-navy);color:var(--sf-white);padding:14px 16px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;flex:none}
.sf-drawer__bar .sf-logo{justify-self:center}
.sf-drawer__bar--panel{display:flex;gap:12px}
.sf-drawer__panel-title{font-size:16px;font-weight:600;flex:1;color:var(--sf-white)}
.sf-drawer__x,.sf-drawer__back{display:inline-grid;place-content:center;color:var(--sf-white);line-height:0;min-width:32px;min-height:32px;justify-self:start}
.sf-drawer__bar--panel .sf-drawer__x{justify-self:end}
.sf-drawer__search{background:var(--sf-navy);padding:0 16px 14px;flex:none}
.sf-drawer__account{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--sf-surface-2);border-bottom:1px solid var(--sf-border);font-size:14px;color:var(--sf-ink);flex:none}
.sf-drawer__avatar{width:32px;height:32px;border:2px solid var(--sf-navy);border-radius:50%;display:inline-grid;place-content:center;color:var(--sf-navy);flex:none}
.sf-drawer__account-text{display:flex;flex-direction:column;line-height:1.35}
.sf-drawer__account-text b{font-weight:700}
.sf-drawer__account-text span{font-size:12px;color:var(--sf-muted)}
.sf-drawer__chev{margin-left:auto;color:var(--sf-muted-2);display:inline-flex;flex:none}
.sf-drawer__scroll{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column}
.sf-drawer__eyebrow{padding:16px 16px 6px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--sf-muted);flex:none}
.sf-drawer__eyebrow--more{padding-top:20px}
.sf-drawer__row{display:flex;align-items:center;gap:12px;padding:0 16px;min-height:52px;border-bottom:1px solid var(--sf-border-3);font-size:16px;font-weight:600;color:var(--sf-ink);width:100%;text-align:left;background:var(--sf-white);flex:none;text-decoration:none}
.sf-drawer__row:hover{background:var(--sf-surface)}
.sf-drawer__row.is-current{background:var(--sf-surface-2)}
.sf-drawer__row.is-current .sf-drawer__label{color:var(--sf-link)}
.sf-drawer__thumb{width:40px;height:40px;border-radius:var(--sf-r-8);object-fit:cover;flex:none;background:var(--sf-surface-2);display:block}
.sf-drawer__thumb--empty{background:repeating-linear-gradient(135deg,#dde3ea 0 8px,#d2d9e1 8px 16px)}
.sf-drawer__label{flex:1;min-width:0}
.sf-drawer__count{font-weight:400;color:var(--sf-muted-2);font-size:13px;white-space:nowrap}
.sf-drawer__row--more{min-height:48px;font-size:15px;font-weight:500}
.sf-drawer__row--more.is-highlight{color:var(--sf-warning)}
.sf-drawer__row--sub{min-height:50px;font-size:15px;font-weight:500}
.sf-drawer__row--sub .sf-drawer__count{margin-left:auto}
.sf-drawer__all{display:flex;align-items:center;justify-content:space-between;padding:0 16px;min-height:56px;background:var(--sf-surface-2);border-bottom:1px solid var(--sf-border);font-size:16px;font-weight:700;color:var(--sf-ink);flex:none;text-decoration:none}
.sf-drawer__all .sf-drawer__count{color:var(--sf-muted)}
.sf-drawer__chips{display:flex;flex-wrap:wrap;gap:8px;padding:6px 16px 20px;flex:none}
.sf-chip--lg{padding:10px 14px;font-size:14px}
.sf-drawer__guides{margin:auto 16px 20px;flex:none}
.sf-drawer__bottom{border-top:1px solid var(--sf-border);background:var(--sf-surface);flex:none}
.sf-drawer__lang{display:flex;align-items:center;gap:12px;padding:0 16px;min-height:52px;font-size:15px;font-weight:600;border-bottom:1px solid var(--sf-border);width:100%;text-align:left;color:var(--sf-ink)}
.sf-drawer__flag{display:inline-flex;line-height:0}
.sf-drawer__flag img{width:20px;height:14px}
.sf-drawer__change{margin-left:auto;font-size:12px;font-weight:500;color:var(--sf-link)}
.sf-drawer__links{display:flex;gap:16px;padding:12px 16px 18px;font-size:13px;color:var(--sf-muted);flex-wrap:wrap}
.sf-drawer__links a{color:var(--sf-muted);text-decoration:none}
.sf-drawer__panel{position:absolute;inset:0;background:var(--sf-white);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .25s;visibility:hidden;z-index:2}
.sf-drawer__panel.is-open{transform:translateX(0);visibility:visible}

/* ---- mini-cart (widget only; not rendered by v2 chrome) ---- */
.sf-minicart{list-style:none;margin:0;padding:0}
.sf-minicart li{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--sf-border-3);font-size:13px;position:relative}
.sf-minicart img{width:48px;height:auto;border-radius:var(--sf-r-6)}
.sf-minicart .remove{position:absolute;right:0;top:8px;color:var(--sf-muted)}
.sf-minicart__foot{padding-top:10px}
.sf-minicart__foot .buttons{display:flex;gap:8px}

/* ---- responsive switch ---- */
@media (max-width:767px){
  .sf-header__bar--desktop,.sf-nav{display:none}
  .sf-header__bar--mobile{display:block}
  .sf-mobile-nav{display:flex}
  .sf-header__inner--checkout{padding:14px 16px}
  .sf-header--checkout .sf-logo__img{height:24px}
  .sf-header__back span{display:none}
  .sf-header__secure span{display:none}
}
