/* ==========================================================================
   Sail Teknoloji - Header & "All Categories" mega menu
   Loaded directly from head.tpl (outside the CCC cache) so changes apply instantly.
   Everything is namespaced with .sx- and prefixed with #header to win over legacy rules.
   ========================================================================== */

#header {
  --sx-blue: #0073ae;
  --sx-blue-600: #00659a;
  --sx-blue-700: #005482;
  --sx-blue-50: #f3f5f7;   /* neutral hover / active background */
  --sx-blue-100: #d6dbe0;
  --sx-ink: #1f2933;
  --sx-text: #3e4850;
  --sx-muted: #757e86;
  --sx-line: #e4e7ea;
  --sx-soft: #f6f7f8;
  --sx-accent: #0073ae;    /* no extra accent colour: brand blue only */
  --sx-radius: 6px;
  --sx-shadow: 0 8px 24px rgba(0, 0, 0, .08);
  --sx-rail-w: 280px;
  --sx-ease: cubic-bezier(.2, .7, .2, 1);

  position: relative;
  z-index: 1001;
  padding: 0;
  background: #fff;
  box-shadow: none;
}
#index #header { box-shadow: none; padding: 0; }

#header .sx-header {
  position: relative;
  color: var(--sx-ink);
  font-size: 14px;
  line-height: 1.4;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
}
#header .sx-header *,
#header .sx-header *::before,
#header .sx-header *::after { box-sizing: border-box; }
/* Resets use :where() so they never outweigh the component rules below */
#header .sx-header :where(a) { color: inherit; font-size: inherit; text-transform: none; text-decoration: none; }
#header .sx-header :where(ul) { margin: 0; padding: 0; list-style: none; overflow: visible; }
#header .sx-header :where(li) { margin: 0; padding: 0; border: 0; width: auto; }
#header .sx-header :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-transform: none; }
#header .sx-header :where(img) { max-width: 100%; }
#header .sx-header :where(p) { margin: 0; }

#header .sx-ico {
  width: 20px; height: 20px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
#header .sx-ico--chev { width: 14px; height: 14px; stroke-width: 2; transition: transform .18s var(--sx-ease); }

#header .sx-wrap {
  width: 100%;
  max-width: 1400px;            /* same box as the theme's .container (1400px, 15px gutters) */
  margin: 0 auto;
  padding: 0 15px;
}
#header .sx-hooks-extra:empty { display: none; }

/* ---------- 1. Top bar ---------- */
#header .sx-topbar {
  position: relative; z-index: 4;
  background: var(--sx-soft);
  border-bottom: 1px solid var(--sx-line);
  font-size: 12.5px;
  color: var(--sx-muted);
}
#header .sx-topbar__inner { display: flex; align-items: center; justify-content: space-between; height: 46px; }
#header .sx-topbar__left,
#header .sx-topbar__right { display: flex; align-items: center; gap: 22px; min-width: 0; }
#header .sx-topbar__right { gap: 18px; }
#header .sx-topbar__link { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--sx-muted); transition: color .15s; }
#header .sx-topbar__link .sx-ico { width: 15px; height: 15px; color: var(--sx-blue); }
#header .sx-topbar__link strong { color: var(--sx-ink); font-weight: 600; }
#header .sx-topbar__link:hover,
#header .sx-topbar__link:hover strong { color: var(--sx-blue); }
#header .sx-topbar__sep { width: 1px; height: 18px; background: var(--sx-line); }

/* Contact blocks: icon + two-line text (label / number) */
#header .sx-contact { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
#header .sx-contact__icon { width: 26px; height: 26px; flex: 0 0 26px; display: block; }
#header .sx-contact__text { display: flex; flex-direction: column; line-height: 1.2; }
#header .sx-contact__text small { font-size: 11.5px; color: var(--sx-muted); }
#header .sx-contact__text strong { font-size: 13.5px; font-weight: 600; color: var(--sx-ink); transition: color .15s; }
#header .sx-contact:hover .sx-contact__text strong { color: var(--sx-blue); }
#header .sx-topbar__btn {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px;
  color: var(--sx-ink); font-size: 13.5px; font-weight: 600;
  background: #fff; border: 1px solid #d3d9de; border-radius: 4px;
  transition: border-color .15s, color .15s;
}
#header .sx-topbar__btn:hover,
#header .sx-dd.is-open > .sx-topbar__btn { color: var(--sx-blue); border-color: var(--sx-blue); }

/* Language & currency: side-by-side segmented links (no dropdown) */
#header .sx-seg { display: inline-flex; align-items: stretch; height: 32px; border: 1px solid #d3d9de; border-radius: 4px; overflow: hidden; background: #fff; }
#header .sx-seg__item {
  display: inline-flex; align-items: center; gap: 6px; padding: 0 11px;
  font-size: 13px; font-weight: 600; letter-spacing: .2px; color: var(--sx-text);
  border-left: 1px solid #e4e7ea; transition: background .15s, color .15s;
}
#header .sx-seg__item:first-child { border-left: 0; }
#header .sx-seg__item:hover { color: var(--sx-blue); background: var(--sx-soft); }
#header .sx-seg__item.is-active { color: #fff; background: var(--sx-blue); }
#header .sx-seg__item.is-active:hover { color: #fff; }
#header .sx-seg .sx-flag { width: 18px; height: 12px; }
#header .sx-flag { width: 20px; height: 14px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
#header .sx-cur__sym { display: inline-block; min-width: 10px; font-weight: 600; color: var(--sx-blue); }

/* ---------- Generic dropdown ---------- */
#header .sx-dd { position: relative; }
#header .sx-dd__menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 30;
  min-width: 180px; padding: 6px;
  background: #fff; border: 1px solid var(--sx-line); border-radius: var(--sx-radius);
  box-shadow: var(--sx-shadow);
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity .14s var(--sx-ease), transform .14s var(--sx-ease), visibility 0s linear .14s;
}
#header .sx-dd__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; } /* hover bridge */
#header .sx-dd__menu--end { left: auto; right: 0; }
#header .sx-dd.is-open > .sx-dd__menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (hover: hover) and (min-width: 768px) {
  #header .sx-dd:hover > .sx-dd__menu,
  #header .sx-dd:focus-within > .sx-dd__menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  #header .sx-dd:hover .sx-dd__toggle .sx-ico--chev { transform: rotate(180deg); }
}
#header .sx-dd__item {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 7px;
  color: var(--sx-text); font-size: 13.5px; white-space: nowrap;
}
#header .sx-dd__item small { margin-left: auto; padding-left: 12px; color: var(--sx-muted); font-size: 12px; }
#header .sx-dd__item:hover { background: var(--sx-soft); color: var(--sx-blue); }
#header .sx-dd__item.is-active { color: var(--sx-blue); font-weight: 600; background: var(--sx-blue-50); }

/* Language & currency duplicate shown in the header on mobile only */
#header .sx-mprefs { display: none; }

/* ---------- 2. Main row ---------- */
#header .sx-main { position: relative; z-index: 3; background: #fff; }
#header .sx-main__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 40px;
  height: 88px;
}
#header .sx-burger { display: none; }
#header .sx-logo { display: flex; align-items: center; width: 190px; }
#header .sx-logo img { display: block; width: 100%; height: auto; max-height: 72px; object-fit: contain; }

/* Search (trsmartsearch module) - large & prominent */
#header .sx-search { min-width: 0; max-width: 780px; width: 100%; justify-self: center; }
#header .sx-search .trsmartsearch { float: none; width: 100%; max-width: none; margin: 0; }
#header .sx-search .trsmartsearch__form {
  min-height: 48px; border: 1px solid #cdd3d8; border-radius: 6px; background: #fff;
  box-shadow: none;
}
#header .sx-search .trsmartsearch__form:focus-within { border-color: var(--sx-blue); box-shadow: none; }
#header .sx-search .trsmartsearch__icon { margin-left: 16px; color: var(--sx-muted); }
#header .sx-search .trsmartsearch__input { height: 46px; padding: 10px 12px; font-size: 15px; color: var(--sx-ink); }
#header .sx-search .trsmartsearch__input::placeholder { color: #7d8a94; }
#header .sx-search .trsmartsearch__submit {
  min-height: 40px; margin: 3px; padding: 0 24px; border-radius: 4px;
  background: var(--sx-blue); color: #fff; font-size: 14.5px; font-weight: 600; letter-spacing: .2px;
  transition: background .15s;
}
#header .sx-search .trsmartsearch__submit:hover { background: var(--sx-blue-700); }
#header .sx-search .trsmartsearch__panel { z-index: 40; border-radius: 6px; }

/* Actions: account / favorites / cart */
#header .sx-actions { display: flex; align-items: center; gap: 6px; justify-self: end; }
#header .sx-action {
  position: relative; display: flex; align-items: center; gap: 10px;
  height: 52px; padding: 0 12px; border-radius: 6px;
  color: var(--sx-ink); white-space: nowrap; transition: background .15s, color .15s;
}
#header .sx-action:hover,
#header .sx-dd:hover > .sx-action,
#header .sx-dd.is-open > .sx-action { background: var(--sx-soft); color: var(--sx-blue); }
#header .sx-action__icon { position: relative; display: inline-flex; color: var(--sx-ink); }
#header .sx-action__icon .sx-ico { width: 26px; height: 26px; stroke-width: 1.6; }
#header .sx-action:hover .sx-action__icon { color: var(--sx-blue); }
#header .sx-action__text { display: flex; flex-direction: column; line-height: 1.25; }
#header .sx-action__text small { font-size: 12px; color: var(--sx-muted); font-weight: 400; }
#header .sx-action__text strong { font-size: 14px; font-weight: 600; color: inherit; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
#header .sx-dot { display: none; position: absolute; right: -1px; top: 0; width: 9px; height: 9px; border-radius: 50%; background: #1fa463; border: 2px solid #fff; }

#header .sx-badge {
  position: absolute; top: -6px; right: -9px;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--sx-blue); color: #fff; border: 2px solid #fff;
  font-size: 11px; font-weight: 700; line-height: 15px; text-align: center;
  float: none; margin: 0; clear: none;
}
#header .sx-badge.is-empty { background: #a3abb2; }

/* Account dropdown */
#header .sx-acct__menu { width: 270px; padding: 16px; }
#header .sx-acct__intro { color: var(--sx-muted); font-size: 13px; line-height: 1.5; margin-bottom: 12px; }
#header .sx-acct__hello { padding: 4px 8px 12px; border-bottom: 1px solid var(--sx-line); margin-bottom: 6px; font-size: 13px; color: var(--sx-muted); }
#header .sx-acct__hello strong { display: block; color: var(--sx-ink); font-size: 15px; }
#header .sx-acct__list a { display: block; padding: 9px 8px; border-radius: 7px; color: var(--sx-text); font-size: 13.5px; }
#header .sx-acct__list a:hover { background: var(--sx-soft); color: var(--sx-blue); }
#header .sx-acct__logout { border-top: 1px solid var(--sx-line); margin-top: 6px !important; padding-top: 6px !important; }
#header .sx-acct__logout a { color: var(--sx-muted); }
#header .sx-acct__track { display: block; margin-top: 12px; text-align: center; font-size: 12.5px; color: var(--sx-blue) !important; }
#header .sx-acct__track:hover { text-decoration: underline; }

#header .sx-btn {
  display: flex; align-items: center; justify-content: center; width: 100%;
  height: 42px; padding: 0 16px; border-radius: 4px; font-size: 14px; font-weight: 600;
  transition: background .15s, color .15s, border-color .15s;
}
#header .sx-btn + .sx-btn { margin-top: 8px; }
#header .sx-btn--primary { background: var(--sx-blue); color: #fff !important; border: 1px solid var(--sx-blue); }
#header .sx-btn--primary:hover { background: var(--sx-blue-700); border-color: var(--sx-blue-700); }
#header .sx-btn--ghost { background: #fff; color: var(--sx-blue) !important; border: 1px solid var(--sx-blue-100); }
#header .sx-btn--ghost:hover { border-color: var(--sx-blue); background: var(--sx-blue-50); }
#header .sx-btn.is-disabled { opacity: .5; pointer-events: none; }

/* Cart + mini cart */
#header .sx-cart { position: relative; }
#header .sx-cart .blockcart { position: relative; float: none; margin: 0 !important; padding: 0; border: 0 !important; background: none !important; text-align: left; white-space: normal; }
#header .sx-cart .blockcart:hover { background: none !important; }
#header .sx-cart .sx-cart__link { background-image: none !important; padding: 0 12px !important; }
#header .sx-minicart {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 30;
  width: 360px; background: #fff; border: 1px solid var(--sx-line); border-radius: 6px; box-shadow: var(--sx-shadow);
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity .14s var(--sx-ease), transform .14s var(--sx-ease), visibility 0s linear .14s;
}
#header .sx-minicart::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
@media (hover: hover) and (min-width: 768px) {
  #header .sx-cart .blockcart:hover .sx-minicart,
  #header .sx-cart .blockcart:focus-within .sx-minicart { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
}
#header .sx-minicart__head { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 16px; border-bottom: 1px solid var(--sx-line); }
#header .sx-minicart__head strong { font-size: 15px; }
#header .sx-minicart__head span { color: var(--sx-muted); font-size: 12.5px; }
#header .sx-minicart__list { max-height: 300px; overflow-y: auto !important; padding: 6px 0 !important; }
#header .sx-minicart__item { display: flex !important; align-items: center; gap: 12px; padding: 8px 16px !important; }
#header .sx-minicart__img { flex: 0 0 56px; width: 56px; height: 56px; border: 1px solid var(--sx-line); border-radius: 4px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #fff; }
#header .sx-minicart__img img { width: 100%; height: 100%; object-fit: contain; }
#header .sx-minicart__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
#header .sx-minicart__name { font-size: 13px; line-height: 1.35; color: var(--sx-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#header .sx-minicart__name:hover { color: var(--sx-blue); }
#header .sx-minicart__price { font-size: 13.5px; font-weight: 700; color: var(--sx-ink); }
#header .sx-minicart__qty { font-weight: 500; color: var(--sx-muted); }
#header .sx-minicart__remove { flex: 0 0 auto; display: inline-flex; padding: 6px; border-radius: 6px; color: var(--sx-muted); }
#header .sx-minicart__remove:hover { color: var(--sx-ink); background: var(--sx-soft); }
#header .sx-minicart__remove .sx-ico { width: 17px; height: 17px; }
#header .sx-minicart__totals { padding: 12px 16px; border-top: 1px solid var(--sx-line); background: var(--sx-soft); }
#header .sx-minicart__line { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--sx-text); padding: 2px 0; }
#header .sx-minicart__line--total { font-size: 15px; font-weight: 700; color: var(--sx-ink); padding-top: 6px; }
#header .sx-minicart__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 16px 16px; }
#header .sx-minicart__actions .sx-btn + .sx-btn { margin-top: 0; }

/* ---------- 3. Navigation bar ---------- */
#header .sx-nav { position: relative; z-index: 2; background: #fff; border-top: 1px solid var(--sx-line); border-bottom: 1px solid var(--sx-line); }
#header .sx-nav__inner { position: relative; display: flex; align-items: stretch; height: 50px; gap: 8px; }
#header .sx-allcats {
  display: flex; align-items: center; gap: 10px;
  flex: 0 0 var(--sx-rail-w); width: var(--sx-rail-w);
  margin: -1px 0; padding: 0 18px;
  background: var(--sx-blue); color: #fff;
  font-size: 14.5px; font-weight: 600; letter-spacing: .1px;
  border-radius: 0;
  transition: background .15s;
}
#header .sx-allcats span { flex: 1 1 auto; text-align: left; }
#header .sx-allcats:hover,
#header .sx-allcats[aria-expanded="true"] { background: var(--sx-blue-700); }
#header .sx-allcats[aria-expanded="true"] .sx-ico--chev { transform: rotate(180deg); }
#header .sx-header--home .sx-allcats .sx-ico--chev { display: none; }

#header .sx-links { display: flex; align-items: stretch; min-width: 0; margin-left: 8px !important; overflow: hidden; }
#header .sx-links li { display: flex; }
#header .sx-links__a {
  position: relative; display: flex; align-items: center; gap: 8px; padding: 0 16px;
  color: var(--sx-ink) !important; font-size: 14px; font-weight: 600; white-space: nowrap;
  transition: color .15s;
}
#header .sx-links__a::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: -1px; height: 2px;
  background: var(--sx-blue); border-radius: 2px; transform: scaleX(0); transition: transform .18s var(--sx-ease);
}
#header .sx-links__a:hover,
#header .sx-links__a.is-active { color: var(--sx-blue) !important; }
#header .sx-links__a:hover::after,
#header .sx-links__a.is-active::after { transform: scaleX(1); }

#header .sx-ship { display: flex; align-items: center; gap: 8px; margin-left: auto; padding-left: 12px; color: var(--sx-blue); white-space: nowrap; }
#header .sx-ship .sx-ico { width: 22px; height: 22px; }
#header .sx-ship__text { font-size: 13px; color: var(--sx-text); }
#header .sx-ship #pxcmsheaderblock { display: block !important; float: none; margin: 0; padding: 0; border: 0; }
#header .sx-ship #pxcmsheaderblock .freeship { padding: 0; background: none !important; }
#header .sx-ship #pxcmsheaderblock .text1 { display: flex; align-items: baseline; gap: 5px; }
#header .sx-ship #pxcmsheaderblock .text1-dec { font-size: 13px; color: var(--sx-text); font-weight: 400; text-transform: none; }
#header .sx-ship #pxcmsheaderblock .text2-dec { font-size: 13px; color: var(--sx-blue); font-weight: 700; line-height: inherit; }

/* ---------- Nav link icons (animated) ---------- */
#header .sx-li {
  width: 20px; height: 20px; flex: 0 0 auto; overflow: visible;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
#header .sx-li { color: var(--sx-muted); }   /* single neutral colour for all icons */
#header .sx-links__a:hover .sx-li,
#header .sx-links__a.is-active .sx-li { color: var(--sx-blue); }
#header .sx-li * { transform-box: fill-box; }

/* idle loops: short bursts with long rests, staggered so the bar feels alive but calm */
#header .sx-li__flame  { transform-origin: 50% 100%; animation: sxFlame 3.2s ease-in-out infinite; }
#header .sx-li__core   { fill: none; transform-origin: 50% 100%; animation: sxFlame 3.2s ease-in-out infinite reverse; }
#header .sx-li__star   { transform-origin: 50% 50%; animation: sxTwinkle 4s ease-in-out .6s infinite; }
#header .sx-li__spark  { fill: currentColor; transform-origin: 50% 50%; animation: sxSpark 2.4s ease-in-out infinite; }
#header .sx-li__spark--2 { animation-delay: 1.2s; }
#header .sx-li__tag    { transform-origin: 20% 20%; animation: sxSwing 4.5s ease-in-out 1.2s infinite; }
#header .sx-li__medal  { transform-origin: 50% 50%; animation: sxShine 5s ease-in-out 1.8s infinite; }
#header .sx-li__smoke  { fill: currentColor; fill-opacity: .55; stroke: none; animation: sxSmoke 2.8s ease-out infinite; }
#header .sx-li__smoke--2 { animation-delay: 1.4s; }

/* hover: livelier version of the same motion */
#header .sx-links__a:hover .sx-li__flame,
#header .sx-links__a:hover .sx-li__core  { animation-duration: .7s; }
#header .sx-links__a:hover .sx-li__star  { animation: sxSpin .7s var(--sx-ease); }
#header .sx-links__a:hover .sx-li__spark { animation-duration: .8s; }
#header .sx-links__a:hover .sx-li__tag   { animation: sxSwing 1s ease-in-out infinite; }
#header .sx-links__a:hover .sx-li__medal { animation: sxPop .5s var(--sx-ease); }
#header .sx-links__a:hover .sx-li__smoke { animation-duration: 1.2s; }
#header .sx-li { transition: transform .2s var(--sx-ease); }

@keyframes sxFlame {
  0%, 60%, 100% { transform: scale(1, 1) skewX(0); }
  68% { transform: scale(.94, 1.08) skewX(-4deg); }
  76% { transform: scale(1.04, .95) skewX(3deg); }
  84% { transform: scale(.97, 1.05) skewX(-2deg); }
}
@keyframes sxTwinkle {
  0%, 70%, 100% { transform: scale(1) rotate(0); }
  80% { transform: scale(1.18) rotate(18deg); }
  90% { transform: scale(.94) rotate(0); }
}
@keyframes sxSpark {
  0%, 100% { opacity: .2; transform: scale(.5); }
  50% { opacity: 1; transform: scale(1.15); }
}
@keyframes sxSpin { from { transform: rotate(0) scale(1); } 50% { transform: rotate(90deg) scale(1.2); } to { transform: rotate(180deg) scale(1); } }
@keyframes sxSwing {
  0%, 70%, 100% { transform: rotate(0); }
  76% { transform: rotate(-14deg); }
  84% { transform: rotate(10deg); }
  91% { transform: rotate(-5deg); }
}
@keyframes sxShine {
  0%, 80%, 100% { transform: scale(1); }
  88% { transform: scale(1.14); }
  94% { transform: scale(.97); }
}
@keyframes sxPop { 0% { transform: scale(1); } 45% { transform: scale(1.22) rotate(-8deg); } 100% { transform: scale(1); } }
@keyframes sxSmoke {
  0% { opacity: 0; transform: translate(0, 2px) scale(.6); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translate(2px, -5px) scale(1.4); }
}


/* ---------- Brands dropdown (hover on "Markalar") ---------- */
#header .sx-links li.sx-brands { position: static; }          /* panel is positioned against .sx-nav__inner */
#header .sx-brands__chev { width: 12px; height: 12px; margin-left: -2px; color: var(--sx-muted); }
#header .sx-brandmenu {
  position: absolute; top: 100%; left: 15px; right: 15px; z-index: 25;
  padding: 18px 22px 22px;
  background: #fff; border: 1px solid var(--sx-line); border-top: 0;
  border-radius: 0 0 var(--sx-radius) var(--sx-radius);
  box-shadow: var(--sx-shadow);
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity .15s var(--sx-ease), transform .15s var(--sx-ease), visibility 0s linear .15s;
}
@media (hover: hover) and (min-width: 992px) {
  #header .sx-brands:hover .sx-brandmenu,
  #header .sx-brands:focus-within .sx-brandmenu { opacity: 1; visibility: visible; transform: none; transition-delay: .08s; }
  #header .sx-brands:hover .sx-brands__chev { transform: rotate(180deg); color: var(--sx-blue); }
  #header .sx-brands:hover > .sx-links__a { color: var(--sx-blue) !important; }
  #header .sx-brands:hover > .sx-links__a::after { transform: scaleX(1); }
}
#header .sx-brandmenu__head { display: flex; align-items: baseline; gap: 10px; padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--sx-line); }
#header .sx-brandmenu__head strong { font-size: 16px; font-weight: 700; color: var(--sx-ink); }
#header .sx-brandmenu__head span { font-size: 12.5px; color: var(--sx-muted); }
#header .sx-brandmenu__all { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--sx-blue) !important; }
#header .sx-brandmenu__all .sx-ico { width: 16px; height: 16px; }
#header .sx-brandmenu__grid {
  display: grid !important; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px;
  max-height: min(60vh, 420px); overflow-y: auto !important; overscroll-behavior: contain; scrollbar-width: thin;
}
#header .sx-brand {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 12px 10px 10px; border: 1px solid var(--sx-line); border-radius: var(--sx-radius);
  background: #fff; text-align: center; transition: border-color .15s, box-shadow .15s;
}
#header .sx-brand:hover { border-color: var(--sx-blue); box-shadow: 0 2px 8px rgba(0, 0, 0, .06); }
#header .sx-brand__logo { display: flex; align-items: center; justify-content: center; width: 100%; height: 52px; }
#header .sx-brand__logo img { max-width: 100%; max-height: 52px; width: auto; height: auto; object-fit: contain; display: block; }
#header .sx-brand__initial { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: var(--sx-soft); color: var(--sx-muted); font-size: 18px; font-weight: 700; }
#header .sx-brand__name { font-size: 12.5px; font-weight: 600; color: var(--sx-text); line-height: 1.3; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#header .sx-brand:hover .sx-brand__name { color: var(--sx-blue); }
@media (max-width: 991px) {
  #header .sx-brandmenu, #header .sx-brands__chev { display: none; }
}

/* ---------- Mega menu ---------- */
#header .sx-mega {
  position: absolute; top: 100%; left: 15px; right: 15px; z-index: 20;
  display: block; pointer-events: none;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .16s var(--sx-ease), transform .16s var(--sx-ease), visibility 0s linear .16s;
}
#header .sx-mega.is-open,
#header .sx-mega.is-pinned { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
#header .sx-mega.is-open .sx-mega__rail,
#header .sx-mega.is-pinned .sx-mega__rail,
#header .sx-mega .sx-panel.is-active { pointer-events: auto; }

#header .sx-mega__rail {
  position: relative; width: var(--sx-rail-w);
  height: var(--sx-rail-h, auto); max-height: var(--sx-panel-max, 70vh);
  background: #fff; border: 1px solid var(--sx-line); border-top: 0;
  border-radius: 0 0 0 var(--sx-radius);
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin;
}
#header .sx-mega.is-open:not(.has-panel) .sx-mega__rail { border-radius: 0 0 var(--sx-radius) var(--sx-radius); box-shadow: var(--sx-shadow); }
#header .sx-mega.is-pinned .sx-mega__rail { border: 1px solid var(--sx-line); border-radius: var(--sx-radius); box-shadow: none; }
#header .sx-mega.is-pinned.has-panel .sx-mega__rail { border-radius: var(--sx-radius) 0 0 var(--sx-radius); }

#header .sx-rail { display: flex; flex-direction: column; min-height: 100%; padding: 6px 0 !important; }
#header .sx-mega.is-pinned .sx-mega__rail { overflow-y: auto; }
#header .sx-mega.is-pinned .sx-rail { padding: 4px 0 !important; }
#header .sx-mega.is-pinned .sx-rail__item { flex: 1 1 0; display: flex; min-height: 0; }
#header .sx-mega.is-pinned .sx-rail__link { min-height: 0; padding-top: 6px; padding-bottom: 6px; }
#header .sx-rail__item { position: relative; }
#header .sx-rail__link {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 14px 10px 18px; min-height: 52px;
  color: var(--sx-ink); transition: background .12s, color .12s;
}
#header .sx-rail__link::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--sx-blue); transform: scaleY(0); transition: transform .15s var(--sx-ease);
}
#header .sx-rail__text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; gap: 2px; }
#header .sx-rail__name { font-size: 14.5px; font-weight: 600; line-height: 1.3; }
#header .sx-rail__hint { font-size: 12px; color: var(--sx-muted); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#header .sx-rail__chev { width: 16px; height: 16px; color: #a7b2ba; transition: transform .15s, color .15s; }
#header .sx-rail__item:hover > .sx-rail__link,
#header .sx-rail__item.is-active > .sx-rail__link { background: var(--sx-blue-50); color: var(--sx-blue); }
#header .sx-rail__item.is-active > .sx-rail__link::before { transform: scaleY(1); }
#header .sx-rail__item.is-active .sx-rail__chev { color: var(--sx-blue); transform: translateX(2px); }
#header .sx-mega--compact .sx-rail__hint { display: none; }
#header .sx-mega--compact .sx-rail__link { min-height: 40px; padding-top: 8px; padding-bottom: 8px; }

#header .sx-mega__panels { position: absolute; top: 0; left: var(--sx-rail-w); right: 0; }
#header .sx-panel {
  display: none;
  min-height: var(--sx-rail-h, 100%);
  max-height: var(--sx-panel-max, 70vh);
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  padding: 22px 28px 26px;
  background: #fff; border: 1px solid var(--sx-line); border-left: 0;
  border-radius: 0 0 var(--sx-radius) 0;
  box-shadow: var(--sx-shadow);
  animation: sxFade .16s var(--sx-ease);
}
#header .sx-mega.is-pinned .sx-panel { border-radius: 0 var(--sx-radius) var(--sx-radius) 0; border-left: 1px solid var(--sx-line); }
#header .sx-panel.is-active { display: block; }
@keyframes sxFade { from { opacity: 0; } to { opacity: 1; } }

#header .sx-panel__head { display: flex; align-items: baseline; gap: 12px; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--sx-line); }
#header .sx-panel__title { font-size: 18px; font-weight: 700; color: var(--sx-ink); letter-spacing: -.1px; }
#header .sx-panel__title:hover { color: var(--sx-blue); }
#header .sx-panel__meta { font-size: 12.5px; color: var(--sx-muted); }
#header .sx-panel__all { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--sx-blue) !important; }
#header .sx-panel__all .sx-ico { width: 16px; height: 16px; transition: transform .15s; }
#header .sx-panel__all:hover .sx-ico { transform: translateX(3px); }

#header .sx-panel__body { display: flex; gap: 28px; }
#header .sx-panel__cols { flex: 1 1 auto; min-width: 0; column-width: 210px; column-gap: 36px; column-fill: balance; }
#header .sx-group { break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; padding-bottom: 18px; }
#header .sx-group__title { display: inline-block; font-size: 14px; font-weight: 700; color: var(--sx-ink); line-height: 1.35; margin-bottom: 6px; }
#header .sx-group__title:hover { color: var(--sx-blue); }
#header .sx-group__list li a { display: inline-block; padding: 3px 0; font-size: 13.5px; line-height: 1.45; color: var(--sx-text); transition: color .12s; }
#header .sx-group__list li a:hover { color: var(--sx-blue); }
#header .sx-group__more a { font-weight: 600; color: var(--sx-blue) !important; font-size: 12.5px !important; }
#header .sx-panel__media { flex: 0 0 220px; display: flex; flex-direction: column; gap: 12px; }
#header .sx-panel__media img { width: 100%; border-radius: 4px; display: block; }

/* ---------- Overlay ---------- */
#header .sx-overlay {
  position: fixed; inset: 0; z-index: 1;
  background: rgba(0, 0, 0, .35);
  opacity: 0; visibility: hidden;
  transition: opacity .2s var(--sx-ease), visibility 0s linear .2s;
}
#header .sx-overlay.is-visible { opacity: 1; visibility: visible; transition-delay: 0s; }
#header .sx-header.is-drawer-open .sx-overlay { z-index: 9; }

/* ---------- 4. Drawer ---------- */
#header .sx-drawer {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 10;
  width: min(88vw, 380px);
  display: flex; flex-direction: column;
  background: #fff; box-shadow: 0 0 24px rgba(0, 0, 0, .15);
  transform: translateX(-102%); visibility: hidden;
  transition: transform .26s var(--sx-ease), visibility 0s linear .26s;
}
#header .sx-drawer.is-open { transform: none; visibility: visible; transition-delay: 0s; }
#header .sx-drawer__head { display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 12px 0 16px; border-bottom: 1px solid var(--sx-line); flex: 0 0 auto; }
#header .sx-drawer__logo img { height: 44px; width: auto; }
#header .sx-drawer__close { display: inline-flex; padding: 10px; border-radius: 8px; color: var(--sx-ink); }
#header .sx-drawer__close:hover { background: var(--sx-soft); }
#header .sx-drawer__close .sx-ico { width: 22px; height: 22px; }
#header .sx-drawer__body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 8px 0 32px; }
#header .sx-drawer__title { padding: 18px 18px 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--sx-muted); }

#header .sx-acc__row { display: flex; align-items: stretch; border-bottom: 1px solid #eef1f3; }
#header .sx-acc__link { flex: 1 1 auto; display: flex; align-items: center; min-height: 50px; padding: 10px 18px; font-size: 15px; font-weight: 600; color: var(--sx-ink); }
#header .sx-acc__toggle { flex: 0 0 52px; display: inline-flex; align-items: center; justify-content: center; color: var(--sx-muted); border-left: 1px solid #eef1f3 !important; }
#header .sx-acc__toggle .sx-ico { transition: transform .2s var(--sx-ease); }
#header .sx-acc__item.is-open > .sx-acc__row > .sx-acc__toggle .sx-ico { transform: rotate(180deg); color: var(--sx-blue); }
#header .sx-acc__item.is-open > .sx-acc__row > .sx-acc__link { color: var(--sx-blue); }
#header .sx-acc__sub { display: none; background: var(--sx-soft); }
#header .sx-acc__item.is-open > .sx-acc__sub { display: block; }
#header .sx-acc__all { display: block; padding: 12px 18px 12px 30px; font-size: 13px; font-weight: 600; color: var(--sx-blue) !important; border-bottom: 1px solid #e8ecef; }
#header .sx-acc--l1 .sx-acc__link { min-height: 46px; padding-left: 30px; font-size: 14px; font-weight: 500; }
#header .sx-acc--l1 .sx-acc__all { padding-left: 42px; }
#header .sx-acc--l2 { background: #eceff2; }
#header .sx-acc--l2 .sx-acc__link { min-height: 42px; padding-left: 42px; font-size: 13.5px; font-weight: 400; color: var(--sx-text); }
#header .sx-acc--l2 .sx-acc__all { padding-left: 54px; }
#header .sx-acc--l3 { background: #e4e8ec; }
#header .sx-acc--l3 .sx-acc__link { min-height: 40px; padding-left: 54px; font-size: 13px; font-weight: 400; color: var(--sx-text); }

#header .sx-drawer__links a { display: block; padding: 12px 18px; font-size: 14.5px; color: var(--sx-ink); border-bottom: 1px solid #eef1f3; }
#header .sx-drawer__links a:hover { color: var(--sx-blue); background: var(--sx-soft); }
#header .sx-drawer__prefs { display: grid; gap: 14px; padding: 18px; }
#header .sx-pref__label { display: block; margin-bottom: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--sx-muted); }
#header .sx-pref__chips { display: flex; flex-wrap: wrap; gap: 8px; }
#header .sx-pref__chips a { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 1px solid var(--sx-line); border-radius: 18px; font-size: 13.5px; color: var(--sx-text); }
#header .sx-pref__chips a.is-active { border-color: var(--sx-blue); color: var(--sx-blue); background: var(--sx-blue-50); font-weight: 600; }
#header .sx-drawer__contact { display: grid; gap: 4px; padding: 6px 18px 0;  margin-bottom: 95px;}
#header .sx-drawer__contact a { font-size: 13.5px; color: var(--sx-blue) !important; padding: 4px 0; }

html.sx-lock, html.sx-lock body { overflow: hidden; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1279px) {
  #header .sx-main__inner { column-gap: 28px; }
  #header .sx-logo { width: 160px; }
  #header .sx-action__text small { display: none; }
  #header .sx-action { padding: 0 10px; }
  #header .sx-links__a { padding: 0 12px; }
  #header .sx-links__a::after { left: 12px; right: 12px; }
}
@media (max-width: 1159px) {
  #header { --sx-rail-w: 250px; }
  #header .sx-ship { display: none; }
  #header .sx-action__text { display: none; }
}

/* Tablet: categories move to the drawer */
@media (max-width: 991px) {
  #header .sx-mega { display: none !important; }
  #header .sx-allcats { flex-basis: auto; width: auto; border-radius: 4px; margin: 7px 0; height: 36px; }
  #header .sx-allcats .sx-ico--chev { display: none; }
  #header .sx-nav__inner { height: 50px; }
  #header .sx-links { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  #header .sx-links::-webkit-scrollbar { display: none; }
  #header .sx-contact__text small { display: none; }
}

/* Mobile */
@media (max-width: 767px) {
  #header .sx-topbar { display: none; }
  #header .sx-main__inner {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);   /* logo centred */
    grid-template-areas: "burger logo actions" "prefs prefs prefs" "search search search";
    height: auto; row-gap: 10px; column-gap: 6px; padding-top: 8px; padding-bottom: 12px;
  }
  #header .sx-burger { grid-area: burger; justify-self: start; display: inline-flex; padding: 9px; margin-left: -8px; border-radius: 8px; color: var(--sx-ink); }
  #header .sx-burger .sx-ico { width: 24px; height: 24px; }
  #header .sx-logo { grid-area: logo; justify-self: center; width: 120px; }
  #header .sx-logo img { max-height: 52px; }
  #header .sx-search { grid-area: search; max-width: none; }
  #header .sx-search .trsmartsearch__form { min-height: 46px; border-width: 1px; border-radius: 6px; }
  #header .sx-search .trsmartsearch__input { height: 42px; font-size: 16px; }
  #header .sx-search .trsmartsearch__submit { min-height: 36px; padding: 0 16px; }
  #header .sx-actions { grid-area: actions; justify-self: end; gap: 0; }
  #header .sx-action { height: 44px; padding: 0 2px !important; }
  #header .sx-action__icon .sx-ico { width: 25px; height: 25px; }
  #header .sx-acct .sx-dd__menu,
  #header .sx-minicart { display: none; }
  #header .sx-mprefs { grid-area: prefs; justify-self: end; display: flex; align-items: center; gap: 6px; margin:5px 0 5px; }
  #header .sx-mprefs .sx-seg { height: 30px; }
  #header .sx-mprefs .sx-seg__item { padding: 0 9px; font-size: 12.5px; }
  #header .sx-mprefs .sx-topbar__btn { height: 30px; padding: 0 10px; gap: 6px; font-size: 12.5px; }
  #header .sx-mprefs .sx-ico--chev { width: 11px; height: 11px; }
  #header .sx-mprefs .sx-dd__menu { min-width: 150px; top: calc(100% + 6px); z-index: 40; }
  #header .sx-mprefs .sx-dd.is-open .sx-ico--chev { transform: rotate(180deg); }
  #header .sx-li { width: 16px; height: 16px; }
  #header .sx-links__a { gap: 6px; }
  #header .sx-nav { border-top: 0; }
  #header .sx-nav__inner { height: 46px; padding-right: 0; }
  #header .sx-allcats { display: none; }
  #header .sx-links { margin-left: 0 !important; gap: 8px; align-items: center; padding-right: 16px !important; }
  #header .sx-links li { flex: 0 0 auto; }
  #header .sx-links__a { height: 32px; padding: 0 12px; border: 1px solid var(--sx-line); border-radius: 4px; font-size: 13px; font-weight: 500; }
  #header .sx-links__a::after { display: none; }
  #header .sx-links__a.is-active { border-color: var(--sx-blue); background: var(--sx-blue-50); }
}

@media (prefers-reduced-motion: reduce) {
  #header .sx-header *, #header .sx-header *::before, #header .sx-header *::after { transition: none !important; animation: none !important; }
}