html[data-hu="0"] .sf-util { display: none }
html[data-hst="0"] .sf-head { position: relative }

html[data-hs="minimal"] .sf-head { background: var(--surface); backdrop-filter: none; border-bottom: 0; box-shadow: 0 1px 0 color-mix(in oklch, var(--ink), transparent 94%) }
html[data-hs="minimal"] .sf-head.is-stuck { box-shadow: 0 8px 24px -20px rgba(0, 0, 0, .35) }
html[data-hs="minimal"] .sf-head .sf-act { background: transparent; border-color: transparent; box-shadow: none }
html[data-hs="minimal"] .sf-head .sf-act:hover { background: var(--surface2); border-color: transparent; transform: none }
html[data-hs="minimal"] .sf-head .sf-act.cart { background: var(--green); color: #fff }
html[data-hs="minimal"] .sf-head .sf-search-box { background: var(--surface2); border-color: transparent; box-shadow: none }
html[data-hs="minimal"] .sf-head .sf-brand-mark { border-radius: 10px; box-shadow: none }
html[data-hs="minimal"] .sf-util { background: transparent; border-bottom: 0 }
html[data-hs="minimal"] .sf-navbar { border-bottom: 0; box-shadow: 0 1px 0 color-mix(in oklch, var(--ink), transparent 94%) }

@media (min-width: 901px) {
  html[data-hs="two"] .sf-head-in { flex-wrap: wrap; height: auto; padding-block: 12px; row-gap: 12px }
  html[data-hs="two"] .sf-head .sf-brand { order: 1 }
  html[data-hs="two"] .sf-head .sf-actions { order: 2 }
  html[data-hs="two"] .sf-head .sf-search { order: 3; flex: 1 0 100%; max-width: 100%; width: 100% }
}

html[data-hs="dark"] .sf-head,
html[data-hs="dark"] .sf-util,
html[data-hs="dark"] .sf-navbar { background: #15161b; color: #eceef4; border-color: #262831 }
html[data-hs="dark"] .sf-util { color: #aeb2c0 }
html[data-hs="dark"] .sf-util a, html[data-hs="dark"] .sf-util span { color: inherit }
html[data-hs="dark"] .sf-util a:hover { color: #fff }
html[data-hs="dark"] .sf-head .sf-brand { color: #fff }
html[data-hs="dark"] .sf-head .sf-brand small { color: #9ca1b0 }
html[data-hs="dark"] .sf-head .sf-act { background: #1e2028; border-color: #2d303a; color: #cfd3df }
html[data-hs="dark"] .sf-head .sf-act:hover { border-color: var(--green); color: #fff }
html[data-hs="dark"] .sf-head .sf-act.cart { background: var(--green); border-color: var(--green); color: #fff }
html[data-hs="dark"] .sf-head .sf-search-box { background: #1e2028; border-color: #2d303a }
html[data-hs="dark"] .sf-head .sf-search-box input,
html[data-hs="dark"] .sf-head .sf-search-box select { color: #eceef4; background: transparent }
html[data-hs="dark"] .sf-head .sf-search-box input::placeholder { color: #8c91a1 }
html[data-hs="dark"] .sf-head .sf-search-ic, html[data-hs="dark"] .sf-head .sf-search-clear { color: #8c91a1 }
html[data-hs="dark"] .sf-head .sf-burger { background: #1e2028; border-color: #2d303a }
html[data-hs="dark"] .sf-head .sf-burger i { background: #eceef4 }
html[data-hs="dark"] .sf-navbar a, html[data-hs="dark"] .sf-navbar .sfnav-link { color: #cfd3df }
html[data-hs="dark"] .sf-navbar .sf-nav-extra a { color: #aeb2c0 }
html[data-hs="dark"] .sf-navbar .sfnav-item:hover > .sfnav-link { background: #1e2028; color: #fff }

html[data-hs="brand"] { --hb-bg: var(--green); --hb-fg: var(--pl-on-primary, #fff) }
html[data-hs="brand"] .sf-head { background: var(--hb-bg); color: var(--hb-fg); border-bottom-color: transparent; backdrop-filter: none }
html[data-hs="brand"] .sf-util { background: var(--hb-bg); color: var(--hb-fg); border-bottom: 1px solid color-mix(in oklch, var(--hb-fg), transparent 82%) }
html[data-hs="brand"] .sf-util a, html[data-hs="brand"] .sf-util span { color: inherit; opacity: .9 }
html[data-hs="brand"] .sf-util a:hover { color: inherit; opacity: 1; text-decoration: underline }
html[data-hs="brand"] .sf-util .dot { background: var(--hb-fg) }
html[data-hs="brand"] .sf-head .sf-brand,
html[data-hs="brand"] .sf-head .sf-brand-txt { color: var(--hb-fg) }
html[data-hs="brand"] .sf-head .sf-brand small { color: var(--hb-fg); opacity: .78 }
html[data-hs="brand"] .sf-head .sf-brand-mark { background: var(--hb-fg); background-image: none; color: var(--green); box-shadow: none }
html[data-hs="brand"] .sf-head .sf-act,
html[data-hs="brand"] .sf-head .sf-act .lbl,
html[data-hs="brand"] .sf-head .sf-act .sf-i,
html[data-hs="brand"] .sf-head .sf-act svg { color: var(--hb-fg) }
html[data-hs="brand"] .sf-head .sf-act { background: color-mix(in oklch, var(--hb-fg), transparent 84%); background-image: none; border-color: transparent; box-shadow: none }
html[data-hs="brand"] .sf-head .sf-act:hover { background: color-mix(in oklch, var(--hb-fg), transparent 72%); border-color: transparent; transform: none }
html[data-hs="brand"] .sf-head .sf-act.cart,
html[data-hs="brand"] .sf-head .sf-act.cart:hover,
html[data-hs="brand"] .sf-head .sf-act.cart:focus-visible { background: var(--hb-fg); background-image: none; border-color: transparent; box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .35); filter: none }
html[data-hs="brand"] .sf-head .sf-act.cart,
html[data-hs="brand"] .sf-head .sf-act.cart .lbl,
html[data-hs="brand"] .sf-head .sf-act.cart .sf-i,
html[data-hs="brand"] .sf-head .sf-act.cart svg,
html[data-hs="brand"] .sf-head .sf-act.cart:hover .lbl,
html[data-hs="brand"] .sf-head .sf-act.cart:hover .sf-i,
html[data-hs="brand"] .sf-head .sf-act.cart:hover svg { color: var(--green) }
html[data-hs="brand"] .sf-head .sf-act-user .lbl,
html[data-hs="brand"] .sf-head .sf-act-login .lbl { color: var(--hb-fg) }
html[data-hs="brand"] .sf-head .sf-search-box { background: var(--surface); border-color: transparent; box-shadow: 0 6px 18px -12px rgba(0, 0, 0, .4) }
html[data-hs="brand"] .sf-head .sf-search-go,
html[data-hs="brand"] .sf-head .sf-search-go:hover { background: var(--hb-bg); background-image: none; color: var(--hb-fg); filter: none }
html[data-hs="brand"] .sf-head .sf-burger { background: color-mix(in oklch, var(--hb-fg), transparent 84%); border-color: transparent }
html[data-hs="brand"] .sf-head .sf-burger i { background: var(--hb-fg) }
html[data-hs="brand"] .sf-head.is-stuck { box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .55) }
html[data-hs="brand"] .sf-navbar .sfnav-link:hover,
html[data-hs="brand"] .sf-navbar .sfnav-item:hover > .sfnav-link,
html[data-hs="brand"] .sf-navbar .sfnav-item.on > .sfnav-link { color: var(--green); background: color-mix(in oklch, var(--green), var(--surface) 90%) }

html[data-hs="float"] .sf-head {
  top: 10px;
  width: calc(100% - 32px);
  max-width: 1280px;
  margin: 10px auto 0;
  border: 1px solid color-mix(in oklch, var(--ink), transparent 90%);
  border-radius: 24px;
  background: color-mix(in oklch, var(--surface), transparent 22%);
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  box-shadow: 0 16px 40px -22px rgba(10, 14, 22, .45);
}
html[data-hs="float"] .sf-head-in { padding-inline: 18px }
html[data-hs="float"] .sf-head.is-stuck { box-shadow: 0 20px 44px -20px rgba(10, 14, 22, .55) }
html[data-hs="float"] .sf-head .sf-search-box { background: color-mix(in oklch, var(--surface2), transparent 25%) }
html[data-hs="float"] .sf-navbar { background: transparent; border-bottom: 0 }
@media (max-width: 900px) {
  html[data-hs="float"] .sf-head { width: calc(100% - 16px); margin-top: 8px; top: 8px; border-radius: 20px }
}

html[data-hc="1"] { --hc-bg: var(--hdr-bg); --hc-fg: var(--hdr-fg); --hc-ac: var(--hdr-ac) }
html[data-hc="1"] .sf-head,
html[data-hc="1"] .sf-util,
html[data-hc="1"] .sf-navbar { background: var(--hc-bg); color: var(--hc-fg); backdrop-filter: none; border-color: color-mix(in oklch, var(--hc-fg), transparent 85%) }
html[data-hc="1"] .sf-util a, html[data-hc="1"] .sf-util span,
html[data-hc="1"] .sf-head .sf-brand, html[data-hc="1"] .sf-head .sf-brand-txt,
html[data-hc="1"] .sf-navbar a, html[data-hc="1"] .sf-navbar .sfnav-link { color: var(--hc-fg) }
html[data-hc="1"] .sf-head .sf-brand small { color: var(--hc-fg); opacity: .72 }
html[data-hc="1"] .sf-head .sf-act, html[data-hc="1"] .sf-head .sf-act .lbl,
html[data-hc="1"] .sf-head .sf-act .sf-i, html[data-hc="1"] .sf-head .sf-act svg { color: var(--hc-fg) }
html[data-hc="1"] .sf-head .sf-act { background: color-mix(in oklch, var(--hc-fg), transparent 90%); border-color: color-mix(in oklch, var(--hc-fg), transparent 82%) }
html[data-hc="1"] .sf-head .sf-act.cart,
html[data-hc="1"] .sf-head .sf-act.cart:hover { background: var(--hc-ac); background-image: none; border-color: transparent }
html[data-hc="1"] .sf-head .sf-act.cart, html[data-hc="1"] .sf-head .sf-act.cart .lbl,
html[data-hc="1"] .sf-head .sf-act.cart .sf-i, html[data-hc="1"] .sf-head .sf-act.cart svg { color: var(--hdr-ac-fg, #fff) }
html[data-hc="1"] .sf-head .sf-search-box { background: color-mix(in oklch, var(--hc-fg), transparent 90%); border-color: color-mix(in oklch, var(--hc-fg), transparent 82%) }
html[data-hc="1"] .sf-head .sf-search-box input { color: var(--hc-fg) }
html[data-hc="1"] .sf-head .sf-search-box input::placeholder, html[data-hc="1"] .sf-head .sf-search-ic { color: var(--hc-fg); opacity: .6 }
html[data-hc="1"] .sf-head .sf-search-go, html[data-hc="1"] .sf-head .sf-search-go:hover { background: var(--hc-ac); background-image: none; color: var(--hdr-ac-fg, #fff) }
html[data-hc="1"] .sf-head .sf-burger { background: color-mix(in oklch, var(--hc-fg), transparent 90%); border-color: transparent }
html[data-hc="1"] .sf-head .sf-burger i { background: var(--hc-fg) }

html[data-hh="compact"] { --sf-head-h: 58px }
html[data-hh="tall"] { --sf-head-h: 90px }
html[data-hh="compact"] .sf-head .sf-act { height: 38px; min-width: 38px }
html[data-hh="compact"] .sf-head .sf-search-box { height: 42px }
html[data-hh="compact"] .sf-head .sf-brand-mark { width: 36px; height: 36px }
html[data-hh="tall"] .sf-head .sf-search-box { height: 56px }
html[data-hh="tall"] .sf-head .sf-brand-mark { width: 48px; height: 48px }

html[data-hr="square"] .sf-head .sf-act, html[data-hr="square"] .sf-head .sf-search-box,
html[data-hr="square"] .sf-head .sf-brand-mark { border-radius: 6px }
html[data-hr="square"] .sf-head .sf-search-go { border-radius: 4px }
html[data-hr="pill"] .sf-head .sf-act, html[data-hr="pill"] .sf-head .sf-search-box { border-radius: 99px }
html[data-hr="pill"] .sf-head .sf-search-go { border-radius: 99px }
html[data-hr="pill"] .sf-head .sf-brand-mark { border-radius: 50% }

html[data-hsr="line"] .sf-head .sf-search-box { background: transparent; border-color: transparent; border-bottom: 2px solid color-mix(in oklch, currentColor, transparent 78%); border-radius: 0; box-shadow: none }
html[data-hsr="line"] .sf-head .sf-search-box:focus-within { border-bottom-color: var(--green) }
html[data-hsr="line"] .sf-head .sf-search-go { background: transparent; color: var(--green); background-image: none }

html[data-hsh="none"] .sf-head, html[data-hsh="none"] .sf-head.is-stuck { box-shadow: none }
html[data-hsh="deep"] .sf-head { box-shadow: 0 14px 34px -18px rgba(10, 14, 22, .5) }
html[data-hbd="0"] .sf-head, html[data-hbd="0"] .sf-navbar, html[data-hbd="0"] .sf-util { border-bottom: 0 }

html[data-hn="0"] .sf-navbar { display: none }
html[data-hth="0"] .sf-head .sf-theme { display: none }
html[data-hbell="0"] .sf-head .nc-bell { display: none }
html[data-hcl="0"] .sf-head .sf-act.cart .lbl { display: none }
html[data-hsc="0"] .sf-head .sf-scope { display: none }
html[data-hsg="0"] .sf-head .sf-search-go { display: none }
html[data-hc="1"] .sf-head .sf-scope { color: var(--hc-fg); background: transparent; opacity: .85 }
html[data-hc="1"] .sf-head .sf-scope option { color: var(--ink); background: var(--surface) }
html[data-hc="1"] .sf-navbar .sf-all,
html[data-hc="1"] .sf-navbar .sf-all:hover { background: var(--hc-ac); background-image: none; color: var(--hdr-ac-fg, #fff) }
html[data-hc="1"] .sf-navbar .sf-all .sf-i, html[data-hc="1"] .sf-navbar .sf-all svg { color: inherit }
html[data-hc="1"] .sf-navbar .sfnav-item:hover > .sfnav-link { background: color-mix(in oklch, var(--hc-fg), transparent 88%); color: var(--hc-fg) }