/* ═══ eFruit v4 — Design Tokens ══════════════════════════════════════════
   Mobile-first. Font: Plus Jakarta Sans 300/400/500/600/700. Icons: Lucide SVG inline.
   ═════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800&display=swap');

:root {
  /* Brand */
  --ef-orange:    #FA4F26;
  --ef-orange-d:  #d93d15;
  --ef-orange-l:  #fff3ef;
  --ef-yellow:    #FCD537;
  --ef-yellow-d:  #c9aa00;
  --ef-yellow-l:  #fffae6;

  /* Neutral */
  --ef-black: #111; --ef-900: #222; --ef-700: #444;
  --ef-500: #777;   --ef-400: #999; --ef-300: #ccc;
  --ef-200: #e8e8e8; --ef-100: #f5f5f5; --ef-white: #fff;

  /* Semantic */
  --ef-green: #22c55e; --ef-green-l: #dcfce7;
  --ef-red:   #ef4444; --ef-red-l:   #fee2e2;
  --ef-blue:  #3b82f6; --ef-blue-l:  #eff6ff;

  /* LANGA brand (usato solo nel modal SSO-ready) */
  --langa-orange:   #f37f0d;
  --langa-orange-l: #fff7ed;

  /* Font */
  --ef-font: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --ef-font-heading: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  /* Layout */
  --topbar-h:  56px;
  --search-h:  56px;
  --catnav-h:  64px;
  --sidebar-w: 280px;
  --cart-w:    280px;
  --max-w:     1400px;
  --bottombar-h: 60px;

  /* Alias ef- prefix (usati in layout.css e templates) */
  --ef-topbar-h:  56px;
  --ef-search-h:  56px;
  --ef-catnav-h:  64px;
  --ef-sidebar-w: 280px;
  --ef-cart-w:    280px;
  --ef-max-w:     1400px;
  --ef-bottombar-h: 60px;

  /* Radius */
  --r-xs: 4px; --r-sm: 8px; --r: 12px; --r-lg: 18px; --r-xl: 24px;

  /* Shadow */
  --sh-xs: 0 1px 3px rgba(0,0,0,.07);
  --sh-sm: 0 2px 8px rgba(0,0,0,.09);
  --sh:    0 4px 16px rgba(0,0,0,.11);
  --sh-lg: 0 8px 32px rgba(0,0,0,.16);

  /* Motion */
  --ease:     .18s cubic-bezier(.4,0,.2,1);
  --ease-out: .25s cubic-bezier(0,0,.2,1);
}

/* ── Reset ────────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0 }

/* ── Global minimal scrollbar ─────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px }
::-webkit-scrollbar-track { background: transparent }
::-webkit-scrollbar-thumb { background: var(--ef-500, #737373); border-radius: 5px }
::-webkit-scrollbar-thumb:hover { background: var(--ef-600, #525252) }
::-webkit-scrollbar-button { display: none !important; width: 0 !important; height: 0 !important }
::-webkit-scrollbar-corner { display: none }
@supports not selector(::-webkit-scrollbar) { * { scrollbar-width: thin; scrollbar-color: var(--ef-500, #737373) transparent } }
/* Lighter scrollbar inside white containers */
.ef-sidebar-block__scroll::-webkit-scrollbar-thumb,
.ef-sitemap__body::-webkit-scrollbar-thumb,
.ef-filter-sheet__body::-webkit-scrollbar-thumb,
.ef-cart-drawer__body::-webkit-scrollbar-thumb,
.efco-recap-list::-webkit-scrollbar-thumb,
.ef-cart-panel__body::-webkit-scrollbar-thumb { background: var(--ef-200, #e5e5e5) }
.ef-sidebar-block__scroll::-webkit-scrollbar-thumb:hover,
.ef-sitemap__body::-webkit-scrollbar-thumb:hover,
.ef-filter-sheet__body::-webkit-scrollbar-thumb:hover,
.ef-cart-drawer__body::-webkit-scrollbar-thumb:hover,
.efco-recap-list::-webkit-scrollbar-thumb:hover,
.ef-cart-panel__body::-webkit-scrollbar-thumb:hover { background: var(--ef-300, #d4d4d4) }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100% }
body {
  font-family: var(--ef-font); font-weight: 400;
  color: var(--ef-black); background: var(--ef-100);
  line-height: 1.6; -webkit-font-smoothing: antialiased; min-height: 100vh; overflow-x: hidden;
}
a { color: inherit; text-decoration: none }
img, video { max-width: 100%; display: block }
button, input, select, textarea { font-family: var(--ef-font); font-size: inherit; line-height: inherit }
input:not([type=radio]):not([type=checkbox]), textarea { -webkit-appearance: none }
ul, ol { list-style: none }
h1,h2,h3,h4,h5,h6 { font-weight: 700; line-height: 1.25 }
table { border-collapse: collapse; width: 100% }

/* ── Lucide icon system ───────────────────────────────────────────────── */
.i { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 1 }
.i svg { width: 1em; height: 1em; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; display: block }
/* i-xs base */
.i-xs svg { width: 12px; height: 12px } .i-sm svg { width: 15px; height: 15px }
/* BazarAI mode btn icon: slightly larger */
#ef-header-ai-btn .i-xs svg,
.ef-search-mode-btn[data-mode="ai"] .i-xs svg { width: 18px; height: 18px; }
.i-md svg { width: 20px; height: 20px } .i-lg svg { width: 26px; height: 26px }
.i-catnav svg { width: 28px; height: 28px }
.i-xl svg { width: 36px; height: 36px } .i-2xl svg { width: 48px; height: 48px }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 20px; border: none; border-radius: var(--r-sm);
  font-family: var(--ef-font); font-weight: 600; font-size:.9375rem;
  cursor: pointer; white-space: nowrap; transition: all var(--ease); line-height: 1; text-decoration: none;
}
.btn-primary  { background: var(--ef-orange);  color: #fff }
.btn-primary:hover { background: var(--ef-orange-d) }
.btn-black    { background: var(--ef-black);   color: #fff }
.btn-black:hover { opacity: .85 }
.btn-yellow   { background: var(--ef-yellow);  color: var(--ef-black) }
.btn-yellow:hover { background: var(--ef-yellow-d) }
.btn-outline  { background: none; border: 1.5px solid var(--ef-300); color: var(--ef-black) }
.btn-outline:hover { border-color: var(--ef-black) }
.btn-ghost    { background: none; color: var(--ef-700) }
.btn-ghost:hover { color: var(--ef-orange) }
.btn-sm { padding: 7px 14px; font-size:.875rem }
.btn-lg { padding: 14px 28px; font-size:1.0625rem }
.btn-full { width: 100% }
.btn:disabled { opacity: .5; cursor: not-allowed }

/* ── Form elements ────────────────────────────────────────────────────── */
.ef-label { display: block; font-size:.8125rem; font-weight: 600; color: var(--ef-700); margin-bottom: 5px }
.ef-input {
  width: 100%; padding: 11px 14px;
  border: 1.5px solid var(--ef-300); border-radius: var(--r-sm);
  font-family: var(--ef-font); font-size:.9375rem; font-weight: 300;
  color: var(--ef-black); background: #fff; outline: none;
  transition: border-color var(--ease);
}
.ef-input:focus { border-color: var(--ef-orange) }
.ef-input::placeholder { color: var(--ef-400); font-weight: 300 }
.ef-input.is-error { border-color: var(--ef-red) }
.ef-select {
  width: 100%; padding: 11px 36px 11px 14px;
  border: 1.5px solid var(--ef-300); border-radius: var(--r-sm);
  font-family: var(--ef-font); font-size:.9375rem; font-weight: 300;
  color: var(--ef-black); outline: none; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center;
  transition: border-color var(--ease);
}
.ef-select:focus { border-color: var(--ef-orange) }
.ef-textarea {
  width: 100%; padding: 11px 14px; min-height: 80px;
  border: 1.5px solid var(--ef-300); border-radius: var(--r-sm);
  font-family: var(--ef-font); font-size:.9375rem; font-weight: 300;
  color: var(--ef-black); background: #fff; outline: none; resize: vertical;
  transition: border-color var(--ease);
}
.ef-textarea:focus { border-color: var(--ef-orange) }
.ef-input-row {
  display: flex; align-items: center;
  border: 1.5px solid var(--ef-300); border-radius: var(--r-sm);
  overflow: hidden; background: #fff; transition: border-color var(--ease);
}
.ef-input-row:focus-within { border-color: var(--ef-orange) }
.ef-input-row .ef-input { border: none; flex: 1 }
.ef-input-row__pfx { padding: 0 11px; color: var(--ef-500); display: flex; align-items: center; flex-shrink: 0; font-size:.9375rem; font-weight: 500 }
.ef-input-row__btn { background: none; border: none; cursor: pointer; padding: 10px 11px; color: var(--ef-500); display: flex; align-items: center; transition: color var(--ease) }
.ef-input-row__btn:hover { color: var(--ef-orange) }
.ef-check { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; font-size:.875rem; font-weight: 300; color: var(--ef-700) }
.ef-check input { accent-color: var(--ef-orange); width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; cursor: pointer }
.ef-check a { color: var(--ef-orange); font-weight: 600 }
.ef-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px }
.ef-field:last-child { margin-bottom: 0 }
.ef-error-msg { font-size:.875rem; color: var(--ef-red); font-weight: 500 }

/* ── Badges & Tags ────────────────────────────────────────────────────── */
.ef-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 20px; font-size:.75rem; font-weight: 600; line-height: 1 }
.badge-green  { background: var(--ef-green-l); color: #15803d }
.badge-orange { background: var(--ef-orange-l); color: var(--ef-orange) }
.badge-yellow { background: var(--ef-yellow-l); color: #92700a }
.badge-gray   { background: var(--ef-200); color: var(--ef-700) }
.badge-red    { background: var(--ef-red-l); color: var(--ef-red) }
.badge-blue   { background: var(--ef-blue-l); color: var(--ef-blue) }
.ef-tag { display: inline-block; padding: 4px 11px; border: 1.5px solid var(--ef-300); border-radius: 20px; font-size:.8125rem; font-weight: 500; cursor: pointer; transition: all var(--ease); background: #fff }
.ef-tag.on { background: var(--ef-orange); color: #fff; border-color: var(--ef-orange) }

/* ── Stars ────────────────────────────────────────────────────────────── */
.ef-stars { display: inline-flex; gap: 2px; color: var(--ef-yellow-d) }
.ef-stars { display:inline-flex; gap:1px; }
.ef-stars .ef-star--on, .ef-stars .ef-star--off { display:inline-flex; }
.ef-stars .ef-star--on svg, .ef-stars .ef-star--on polygon { width: 13px; height: 13px; fill: var(--ef-orange) !important; stroke: var(--ef-orange) !important }
.ef-stars .ef-star--off svg, .ef-stars .ef-star--off polygon { width: 13px; height: 13px; fill: var(--ef-200) !important; stroke: var(--ef-200) !important }
.ef-stars .empty { color: var(--ef-300) }

/* ── Notices ──────────────────────────────────────────────────────────── */
.ef-notice { display: flex; align-items: flex-start; gap: 10px; padding: 12px 15px; border-radius: var(--r-sm); font-size:.875rem }
.notice-info    { background: var(--ef-blue-l);   color: #1d4ed8; border-left: 3px solid var(--ef-blue) }
.notice-success { background: var(--ef-green-l);  color: #15803d; border-left: 3px solid var(--ef-green) }
.notice-warn    { background: var(--ef-yellow-l); color: #92400e; border-left: 3px solid var(--ef-yellow-d) }
.notice-error   { background: var(--ef-red-l);    color: #b91c1c; border-left: 3px solid var(--ef-red) }

/* ── Empty state ──────────────────────────────────────────────────────── */
.ef-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; text-align: center; gap: 10px; color: var(--ef-500) }
.ef-empty .i { color: var(--ef-300) }
.ef-empty__title { font-weight: 600; font-size: 1rem; color: var(--ef-black) }
.ef-empty__sub { font-size:.875rem; font-weight: 300; color: var(--ef-500); margin-top: 8px; max-width: 320px; line-height: 1.5 }

/* ── Dividers ─────────────────────────────────────────────────────────── */
.ef-hr { border: none; border-top: 1px solid var(--ef-200); margin: 14px 0 }
.ef-divider { position: relative; text-align: center; font-size:.8125rem; font-weight: 300; color: var(--ef-500); margin: 16px 0 }
.ef-divider::before,.ef-divider::after { content: ''; position: absolute; top: 50%; width: calc(50% - 24px); height: 1px; background: var(--ef-200) }
.ef-divider::before { left: 0 } .ef-divider::after { right: 0 }

/* ── Toast ────────────────────────────────────────────────────────────── */
.ef-toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(80px);
  z-index: 9999; min-width: 200px; max-width: calc(100vw - 32px);
  background: var(--ef-900); color: #fff;
  padding: 12px 20px; border-radius: var(--r-sm);
  font-size:.9375rem; font-weight: 500; box-shadow: var(--sh-lg);
  display: flex; align-items: center; gap: 10px;
  opacity: 0; transition: all .3s var(--ease-out); pointer-events: none;
}
.ef-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: all }
.ef-toast.t-ok   { border-left: 4px solid var(--ef-green) }
.ef-toast.t-err  { border-left: 4px solid var(--ef-red) }
.ef-toast.t-info { border-left: 4px solid var(--ef-blue) }

/* ── Qty stepper ──────────────────────────────────────────────────────── */
.ef-qty { display: inline-flex; align-items: center; border: 1.5px solid var(--ef-300); border-radius: var(--r-sm); overflow: hidden }
.ef-qty__btn { background: none; border: none; padding: 8px 12px; cursor: pointer; color: var(--ef-700); font-size: 1rem; transition: background var(--ease) }
.ef-qty__btn:hover { background: var(--ef-100); color: var(--ef-orange) }
.ef-qty__val { font-weight: 600; font-size:.9375rem; min-width: 32px; text-align: center }

/* ── Skeleton ─────────────────────────────────────────────────────────── */
@keyframes ef-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.ef-skel { background: var(--ef-200); border-radius: var(--r-sm); animation: ef-pulse 1.4s ease infinite }

/* ══════════════════════════════════════════════════════════════════
   B2B MODE — body.is-b2b
   Home: sfondo giallo #FCD537, topbar nera
   Shop/pagine: giallo con elementi neri
   ══════════════════════════════════════════════════════════════════ */
body.is-b2b {
  --ef-orange:    #FCD537;
  --ef-orange-d:  #e6bc00;
  --ef-orange-l:  #fffde6;
  --ef-black:     #000;
  --ef-text:      #000;
}

/* Hero home B2B — sfondo giallo */
body.is-b2b .ef-hero {
  background-color: #FCD537 !important;
  color: #000 !important;
}
body.is-b2b .ef-hero .ef-hero__headline,
body.is-b2b .ef-hero .ef-hero__sub,
body.is-b2b .ef-hero .ef-hero__topnav-left a { color: rgba(0,0,0,.7) !important; }
body.is-b2b .ef-hero .ef-hero__topnav-left a:hover { color: #000 !important; }

/* Topbar B2B home → nera */
body.is-b2b .ef-topbar { background: #000 !important; }
body.is-b2b .ef-topbar .ef-topbar__addr-lbl,
body.is-b2b .ef-topbar .ef-topbar__addr-val,
body.is-b2b .ef-topbar .ef-topbar__access { color: #fff !important; }
body.is-b2b .ef-topbar .ef-topbar__addr-pin { color: #FCD537 !important; }
body.is-b2b .ef-topbar .ef-topbar__addr:hover { background: rgba(255,255,255,.1) !important; }
body.is-b2b .ef-topbar .ef-topbar__user-btn { background: rgba(255,255,255,.1) !important; color: #fff !important; }
body.is-b2b .ef-topbar .ef-topbar__user-btn:hover { background: rgba(255,255,255,.2) !important; }

/* Usermenu dropdown B2B */
body.is-b2b .ef-usermenu__item:hover { background: var(--ef-orange-l, #fffde6) !important; color: #000 !important; }
body.is-b2b .ef-usermenu__item--danger { color: #b91c1c !important; }
body.is-b2b .ef-usermenu__item--danger:hover { background: #fffde6 !important; color: #b91c1c !important; }
body.is-b2b .ef-usermenu__item svg { stroke: currentColor !important; }

/* Searchbar B2B */
body.is-b2b .ef-smart-search__bar { border-color: rgba(0,0,0,.2); background: #fff; }
body.is-b2b .ef-smart-search__ai-pill { background: #000; color: #FCD537; }
body.is-b2b .ef-smart-search__btn,
body.is-b2b .btn-primary { background: #000 !important; color: #FCD537 !important; }
body.is-b2b .ef-hero__tag { border-color: rgba(0,0,0,.2); color: #000; background: rgba(0,0,0,.06); }
body.is-b2b .ef-hero__tag:hover { background: rgba(0,0,0,.12); color: #000 !important; }
body.is-b2b .ef-search-mode-btn.is-active { background: #FCD537 !important; color: #000 !important; }
body.is-b2b .ef-search-mode-btn.is-active svg { stroke: #000 !important; }

/* Mode toggle B2B */
body.is-b2b .ef-hero__mode-slider { background: #000 !important; }
body.is-b2b .ef-hero__mode-btn { color: rgba(0,0,0,.6) !important; }
body.is-b2b .ef-hero__mode-btn.is-on { color: #FCD537 !important; }

/* Hero footer testi B2B */
body.is-b2b .ef-hero__footer { color: rgba(0,0,0,.6); }
body.is-b2b .ef-hero__footer-top { border-color: rgba(0,0,0,.15); }

/* Pulsanti globali B2B */
body.is-b2b .btn-primary,
body.is-b2b .ef-btn--orange { background: #000 !important; color: #FCD537 !important; border-color: #000 !important; }
body.is-b2b a.btn-primary:hover { background: #222 !important; }

/* Accenti */
body.is-b2b .ef-tag.on { background: #000; color: #FCD537; border-color: #000; }
body.is-b2b .ef-check input { accent-color: #000; }

/* B2B leak fixes — LANGA req */
body.is-b2b .ef-prod-vheader__star svg,
body.is-b2b .ef-prod-vheader__star polygon,
body.is-b2b .ef-single__rating-row .ef-star--on svg,
body.is-b2b .ef-single__rating-row .ef-star--on polygon,
body.is-b2b .ef-rev-summary__stars .ef-star--on svg,
body.is-b2b .ef-rev-summary__stars .ef-star--on polygon,
body.is-b2b .ef-rev-bar__label svg,
body.is-b2b .ef-rev-bar__label polygon,
body.is-b2b .ef-rev-item__stars .ef-star--on svg,
body.is-b2b .ef-rev-item__stars .ef-star--on polygon { fill: #c9aa00 !important; stroke: #c9aa00 !important; }
body.is-b2b .ef-prod-vheader__avatar--init,
body.is-b2b .ef-rev-item__avatar { background: #000 !important; color: #FCD537 !important; }
body.is-b2b .ef-single__add,
body.is-b2b .ef-rev-cta__btn { background: #000 !important; color: #FCD537 !important; }
body.is-b2b .ef-single__add:hover,
body.is-b2b .ef-rev-cta__btn:hover { background: #1a1a1a !important; }
body.is-b2b .ef-single__badge-sale { background: #000 !important; color: #FCD537 !important; }
body.is-b2b .ef-single__wish:hover,
body.is-b2b .ef-single__wish.is-on,
body.is-b2b .ef-single__thumb-mini:hover,
body.is-b2b .ef-single__thumb-mini.is-on { color: #c9aa00 !important; border-color: #c9aa00 !important; }
body.is-b2b .ef-modal__step.is-done,
body.is-b2b .ef-modal__step.is-active { color: #000 !important; border-bottom-color: #FCD537 !important; }
body.is-b2b .ef-modal__step.is-done .ef-modal__step__num { background: #000 !important; color: #FCD537 !important; }
body.is-b2b .ef-unit-pill:hover,
body.is-b2b .ef-unit-pill.is-active { border-color: #000 !important; background: #FCD537 !important; color: #000 !important; }
body.is-b2b .ef-variation-row input:focus,
body.is-b2b .ef-gallery-slot:hover { border-color: #FCD537 !important; box-shadow: 0 0 0 3px rgba(252,213,55,.25) !important; }
body.is-b2b .ef-mode-toggle__btn.is-active { background: #000 !important; color: #FCD537 !important; }
body.is-b2b .ef-ssr-empty__btn--ai { border-color: rgba(0,0,0,.3) !important; color: #000 !important; background: rgba(0,0,0,.05) !important; }
body.is-b2b .ef-ssr-empty__btn--ai:hover { background: rgba(0,0,0,.12) !important; }
body.is-b2b .ef-stories-header__add { color: #000 !important; background: rgba(252,213,55,.25) !important; border-color: rgba(0,0,0,.2) !important; }
body.is-b2b .ef-story__ring { background: linear-gradient(135deg,#000 0%,#FCD537 100%) !important; }
body.is-b2b .ef-story__ring:hover { box-shadow: 0 4px 16px rgba(0,0,0,.35) !important; }
body.is-b2b .ef-story-viewer__cta { background: #000 !important; color: #FCD537 !important; }
body.is-b2b .ef-reels-nav-btn:hover { border-color: #000 !important; color: #000 !important; background: rgba(252,213,55,.2) !important; }
body.is-b2b .ef-content-item--add:hover { border-color: #000 !important; background: rgba(252,213,55,.18) !important; }
body.is-b2b .ef-lang-option.is-active,
body.is-b2b .ef-currency-option.is-active { border-color: #000 !important; background: rgba(252,213,55,.25) !important; }
body.is-b2b .ef-country-btn:hover:not(:disabled) { border-color: #000 !important; background: rgba(252,213,55,.18) !important; }
body.is-b2b .ef-country-btn.is-active { border-color: #000 !important; background: rgba(252,213,55,.3) !important; }
body.is-b2b .ef-nudge__cta--orange { background: rgba(0,0,0,.85) !important; color: #FCD537 !important; }
body.is-b2b .ef-sponsor-step.is-active { border-color: #000 !important; background: #FCD537 !important; color: #000 !important; }
body.is-b2b .ef-sponsor-prod-card:has(.ef-sp-prod-cb:checked) { border-color: #000 !important; background: rgba(252,213,55,.18) !important; }
body.is-b2b-shop .ef-prod-vheader__star svg,
body.is-b2b-shop .ef-prod-vheader__star polygon,
body.is-b2b-shop .ef-single__rating-row .ef-star--on svg,
body.is-b2b-shop .ef-single__rating-row .ef-star--on polygon { fill: #c9aa00 !important; stroke: #c9aa00 !important; }
body.is-b2b-shop .ef-single__add { background: #000 !important; color: #FCD537 !important; }
body.is-b2b-shop .ef-single__add:hover { background: #1a1a1a !important; }

/* Header b2b toggle in stile hero */
.ef-header__mode-toggle { display: inline-flex; background: rgba(0,0,0,.08); border-radius: 50px; padding: 3px; position: relative; cursor: pointer; user-select: none; height: 32px; align-items: center; border: 1px solid rgba(0,0,0,.1); margin-left: 8px; vertical-align: middle; }
.ef-header__mode-slider { position: absolute; top: 3px; left: 3px; width: calc(50% - 3px); height: calc(100% - 6px); background: #fff; border-radius: 50px; transition: transform .28s cubic-bezier(.4,0,.2,1); z-index: 0; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.ef-header__mode-toggle.is-b2b .ef-header__mode-slider { transform: translateX(100%); }
.ef-header__mode-btn { position: relative; z-index: 1; padding: 0 14px; font-size: .72rem; font-weight: 700; color: rgba(0,0,0,.55); transition: color .25s; background: none; border: none; cursor: pointer; font-family: var(--ef-font); min-width: 44px; text-align: center; height: 100%; letter-spacing: .04em; text-transform: uppercase; }
.ef-header__mode-btn.is-on { color: #FA4F26; font-weight: 800; }
body.is-b2b .ef-header__mode-toggle { background: rgba(0,0,0,.15); border-color: rgba(0,0,0,.2); }
body.is-b2b .ef-header__mode-slider { background: #000 !important; }
body.is-b2b .ef-header__mode-btn { color: rgba(0,0,0,.6) !important; }
body.is-b2b .ef-header__mode-btn.is-on { color: #FCD537 !important; }
body.is-b2b .ef-topbar .ef-header__mode-toggle,
body.is-b2b-shop .ef-topbar .ef-header__mode-toggle { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.15); }
body.is-b2b .ef-topbar .ef-header__mode-btn,
body.is-b2b-shop .ef-topbar .ef-header__mode-btn { color: rgba(255,255,255,.6) !important; }
body.is-b2b .ef-topbar .ef-header__mode-btn.is-on,
body.is-b2b-shop .ef-topbar .ef-header__mode-btn.is-on { color: #FCD537 !important; }