/* =====================================================================
 * KS-HEADER-V2 — single-source-of-truth header (2026-05-13)
 *
 * Replaces the v1 layered patches (v1→v10). One file, one design.
 *
 * Rows:
 *   .ks-row1 / .ks-trust-strip    36 px navy, 5 trust chips
 *   .ks-row2                       72 px navy, logo + search + icons
 *   .ks-row3 (mega menu)           untouched — handled by ks-iter.css
 *
 * Behaviors:
 *   - Sticky #header (z 100). On scroll >40 px trust strip hides.
 *   - Account block hover/focus → dropdown panel
 *   - Cart badge hidden when "(0)" (handled by ks-header-v2.js)
 *   - Search empty-state vs typing-state (button slides in on focus/typing)
 *   - .search_block_results killed unless inner autocomplete-suggestions
 *     is actively shown
 *   - Mobile: search collapses to icon-button → fullscreen overlay
 * ===================================================================== */

:root {
  --ks-hdr-bg:        #0f172a;
  --ks-hdr-bg-deep:   #0c1525;
  --ks-hdr-text:      #e2e8f0;
  --ks-hdr-text-soft: rgba(226, 232, 240, 0.72);
  --ks-hdr-text-bright: #f1f5f9;
  --ks-hdr-border:    rgba(255, 255, 255, 0.08);
  --ks-hdr-border-strong: rgba(255, 255, 255, 0.16);
  --ks-hdr-hover-bg:  rgba(255, 255, 255, 0.08);
  --ks-primary:       #f97316;
  --ks-primary-hover: #ea580c;
  --ks-success:       #22c55e;
  --ks-trust-h:       36px;
  --ks-main-h:        72px;
}

/* ============================================================
 * RESET / SHELL
 * ============================================================ */
body { margin: 0 !important; padding: 0 !important; }

/* PS classic renders <aside id="notifications"><div class="notifications-container">
 * </div></aside> on every page. When empty it still paints as a 26 px white
 * strip directly under the header. Collapse unless it actually contains alerts. */
body aside#notifications,
body .notifications-container {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}
body aside#notifications:empty,
body .notifications-container:empty {
  display: none !important;
}
body aside#notifications:not(:has(.alert)):not(:has(.notification)):not(:has(.js-notif)),
body .notifications-container:not(:has(.alert)):not(:has(.notification)):not(:has(.js-notif)) {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
html, body, body > main, section#wrapper { border-top: 0 !important; }
body .bg_overlay_search { display: none !important; }

#header {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  background: var(--ks-hdr-bg);
  margin: 0;
  border: 0;
  transition: box-shadow 0.18s ease;
}
#header.ks-scrolled { box-shadow: 0 4px 14px rgba(15, 23, 42, 0.20); }
#header .ks-row1,
#header .ks-row2,
#header .ks-row3,
#header .ks-trust-strip {
  background-color: var(--ks-hdr-bg);
  background-image: none;
  margin: 0 !important;
  border: 0 !important;
}

/* Capped at 1280 px, centered, with 24 px breathing room either side.
 * Full-width navy background but content is constrained for readability. */
#header .ks-row1 .container,
#header .ks-row2 .container,
#header .ks-row3 .container,
#header .ks-trust-strip .container {
  max-width: 1200px !important;
  width: 100% !important;
  padding: 0 20px !important;
  margin: 0 auto !important;
  box-sizing: border-box;
}
@media (max-width: 991px) {
  #header .ks-row1 .container,
  #header .ks-row2 .container,
  #header .ks-row3 .container { padding: 0 16px !important; }
}

/* ============================================================
 * ROW 1 — Trust strip
 * ============================================================ */
#header .ks-row1,
#header .ks-trust-strip {
  background: linear-gradient(180deg, var(--ks-hdr-bg) 0%, var(--ks-hdr-bg-deep) 100%) !important;
  height: var(--ks-trust-h);
  min-height: var(--ks-trust-h);
  border-bottom: 1px solid var(--ks-hdr-border) !important;
  display: flex;
  align-items: center;
}
#header .ks-trust-strip .container,
#header .ks-row1 .container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  flex-wrap: nowrap;
  height: 100%;
  font-size: 13px;
  color: var(--ks-hdr-text);
  font-weight: 500;
}
#header .ks-trust-strip-item {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ks-hdr-text);
  white-space: nowrap;
  flex-shrink: 0;
  padding: 0;
}
#header .ks-trust-strip-item .ks-trust-strip-check,
#header .ks-trust-strip-item svg,
#header .ks-trust-strip-item i { color: var(--ks-success); }

/* Mobile trust strip: horizontal scroll w/ right-edge mask */
@media (max-width: 991px) {
  #header .ks-row1,
  #header .ks-trust-strip {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 32px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 32px), transparent 100%);
  }
  #header .ks-row1::-webkit-scrollbar,
  #header .ks-trust-strip::-webkit-scrollbar { display: none; }
  #header .ks-trust-strip .container,
  #header .ks-row1 .container {
    justify-content: flex-start;
    width: max-content !important;
    padding: 0 16px !important;
    gap: 16px;
  }
  #header .ks-trust-strip-item { font-size: 12px; }
}

/* Hide trust strip when scrolled past 40 px (also collapse height in case
 * a child rule keeps it in the flow). */
#header.ks-scrolled .ks-row1,
#header.ks-scrolled .ks-trust-strip {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}
/* Inlined critical CSS sets #header { min-height: 144px / 153px !important }
 * to prevent CLS. When scrolled the trust strip is gone, so the header
 * shouldn't reserve its 32 px slot. Collapse min-height. */
body #header.ks-scrolled,
html body #header.ks-scrolled {
  min-height: 0 !important;
  height: auto !important;
}

/* ============================================================
 * ROW 2 — MAIN BAR (logo, search, icons)
 * ============================================================ */
#header .ks-row2 {
  height: var(--ks-main-h);
  min-height: var(--ks-main-h);
  display: flex;
  align-items: center;
  width: 100%;
}
#header .ks-row2 .container,
#header .ks-row2 > .container {
  display: flex !important;
  align-items: center !important;
  gap: 24px;
  height: 100%;
}
#header .ks-row2-inner,
#header .ks-row2 > div:first-child {
  display: flex !important;
  align-items: center !important;
  gap: 24px;
  width: 100%;
  height: 100%;
}

/* --- Logo --- */
#header .ks-row2 .logo,
#header .ks-row2 img.logo,
#header .ks-row2 a[href="/"] img,
#header .ks-row2 .header-logo img {
  display: block;
  height: 36px;
  max-height: 36px;
  width: auto;
  flex-shrink: 0;
  transition: opacity 0.15s;
}
#header .ks-row2 a:has(img.logo):hover img { opacity: 0.85; }

/* --- Search bar (desktop) --- */
@media (min-width: 992px) {
  #header .ets_search_block_top,
  #header .ks-search {
    flex: 1 1 auto;
    max-width: 600px;
    margin: 0;
    padding: 0;
    width: auto !important;
    position: relative;
  }
  #header .ybc_searchbox,
  #header .ets_search_block_top form,
  #header form.ybc_searchbox {
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
    height: 44px;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid var(--ks-hdr-border-strong) !important;
    border-radius: 12px !important;
    overflow: hidden;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
    position: relative;
    box-shadow: none !important;
  }
  /* Leading magnifying glass icon — always visible */
  #header .ybc_searchbox::before,
  #header .ets_search_block_top form::before {
    content: '';
    flex: 0 0 auto;
    width: 40px;
    height: 100%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
    pointer-events: none;
    transition: background-image 0.15s;
  }
  #header .ybc_searchbox:focus-within,
  #header .ets_search_block_top form:focus-within {
    background: #ffffff !important;
    border-color: var(--ks-primary) !important;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.20) !important;
  }
  #header .ybc_searchbox:focus-within::before,
  #header .ets_search_block_top form:focus-within::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f97316' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
  }
  /* Input */
  #header .ybc_searchbox input[type="text"],
  #header .ets_search_block_top input[type="text"],
  #header input.search_query,
  #header input.ybc_search_query {
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--ks-hdr-text-bright) !important;
    font-size: 14.5px !important;
    font-family: inherit !important;
    padding: 0 12px 0 4px !important;
    outline: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    line-height: 44px !important;
  }
  #header .ybc_searchbox:focus-within input,
  #header .ets_search_block_top:focus-within input {
    color: #0f172a !important;
  }
  #header .ybc_searchbox input::placeholder,
  #header .ets_search_block_top input::placeholder {
    color: var(--ks-hdr-text-soft) !important;
    opacity: 1 !important;
    font-weight: 500 !important;
  }
  #header .ybc_searchbox:focus-within input::placeholder,
  #header .ets_search_block_top:focus-within input::placeholder {
    color: #94a3b8 !important;
  }
  /* Submit button — hidden by default, slides in when focused OR has typed value */
  #header .ybc_searchbox button[type="submit"],
  #header .ets_search_block_top button.button-search {
    flex: 0 0 auto !important;
    width: 0 !important;
    height: 100% !important;
    background: var(--ks-primary) !important;
    border: 0 !important;
    color: #fff !important;
    border-radius: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    opacity: 0;
    pointer-events: none;
    transition: width 0.18s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s, background 0.15s !important;
  }
  #header .ybc_searchbox:focus-within button[type="submit"],
  #header .ets_search_block_top form:focus-within button.button-search,
  #header .ybc_searchbox:has(input:not(:placeholder-shown)) button[type="submit"],
  #header .ets_search_block_top form:has(input:not(:placeholder-shown)) button.button-search {
    width: 56px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  #header .ybc_searchbox button:hover,
  #header .ets_search_block_top button.button-search:hover {
    background: var(--ks-primary-hover) !important;
  }
  #header .ybc_searchbox button svg,
  #header .ets_search_block_top button svg {
    width: 18px !important;
    height: 18px !important;
    color: #fff !important;
    fill: #fff !important;
    flex-shrink: 0;
  }
  #header .ybc_searchbox button i {
    font-size: 0;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
  }
}

/* Mobile: hide the desktop search, show icon trigger instead */
@media (max-width: 991px) {
  #header .ets_search_block_top,
  #header .ks-search,
  #header .ybc_searchbox,
  #header form.ybc_searchbox,
  #header input.search_query,
  #header .search_query {
    display: none !important;
  }
}

/* Live search container — used by ybc_search.
 * .search_block_results is an empty wrapper that renders as a white strip;
 * collapse it to zero. The actual results (.autocomplete-suggestions) get
 * appended to <body> by ybc_search JS and float on their own. */
#header .ets_search_block_top,
#header .ks-search,
#header .ybc_searchbox {
  position: relative !important;
}
/* High-specificity hide — ks-iter.css has #header .search_block_results:not(:empty)
 * with !important that beats single-class selectors. We repeat the class
 * three times to push specificity to (0,3,1,0). */
body #header .search_block_results.search_block_results.search_block_results,
body .search_block_results.search_block_results.search_block_results,
body #search_block_keyword.search_block_keyword,
html body #header .search_block_results,
html body .search_block_results {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  position: absolute !important;
  clip: rect(0,0,0,0) !important;
  clip-path: inset(50%) !important;
}
/* The actual results panel (rendered by ybc_search — appended to body) */
.autocomplete-suggestions,
body > .autocomplete-suggestions {
  background: #fff !important;
  border-radius: 12px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18) !important;
  padding: 6px !important;
  /* Must clear mega menu (z=998) and any sticky header element */
  z-index: 100000 !important;
  max-height: 60vh;
  overflow-y: auto;
}

/* ============================================================
 * ICONS CLUSTER (right side of Row 2)
 * ============================================================ */
#header .ks-icons,
#header .ks-row2 .ks-icons {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-shrink: 0 !important;
  margin-left: 0 !important;
  height: 44px;
  padding: 0;
}
/* Make search consume the slack space so icons sit right next to it */
@media (min-width: 992px) {
  #header .ets_search_block_top,
  #header .ks-search {
    flex: 1 1 0 !important;
    max-width: none !important;
  }
}

/* Each icon button */
#header .ks-icons > div,
#header .ks-icons > a,
#header #_desktop_user_info,
#header #_desktop_cart,
#header .user-info,
#header .blockcart {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 44px;
  min-width: 44px;
  padding: 0 12px;
  margin: 0;
  color: var(--ks-hdr-text) !important;
  text-decoration: none !important;
  border-radius: 10px;
  background: transparent;
  transition: background 0.15s, color 0.15s;
  font-size: 13.5px;
  font-weight: 500;
  gap: 8px;
  white-space: nowrap;
  position: relative !important;
  cursor: pointer;
}
#header .ks-icons > div:hover,
#header .ks-icons > a:hover,
#header #_desktop_user_info:hover,
#header #_desktop_cart:hover {
  background: var(--ks-hdr-hover-bg) !important;
  color: var(--ks-hdr-text-bright) !important;
}

#header #_desktop_user_info > *:not(.ks-account-menu),
#header #_desktop_cart > *,
#header .user-info,
#header .blockcart,
#header .blockcart .header {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: transparent !important;
  border: 0 !important;
  height: 100%;
  padding: 0;
  margin: 0;
  text-decoration: none;
  color: inherit !important;
  position: relative !important;
}

/* ============================================================
 * CUSTOM ICONS — replace PS material-icons / FontAwesome with
 * modern Lucide-style stroke SVGs injected via ::before.
 *
 * Strategy:
 *   - Hide the existing <i.material-icons> and FontAwesome <i> tags
 *     inside header buttons (they render ugly Material font icons)
 *   - Inject a new icon as a ::before pseudo on the parent container
 * ============================================================ */
#header .ks-icons i.material-icons,
#header .ks-icons i.icon,
#header .ks-icons i.fa,
#header .ks-icons [class*="material-icons"],
#header #_desktop_user_info i.material-icons,
#header #_desktop_cart i.material-icons,
#header .blockcart .material-icons {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  font-size: 0 !important;
}

/* Person icon — account/user (Lucide user) */
#header #_desktop_user_info::before {
  content: '';
  display: inline-flex;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e2e8f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin-right: 6px;
  transition: background-image 0.15s;
}
#header #_desktop_user_info:hover::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>");
}

/* Shopping bag icon — cart (Lucide shopping-bag, modern not material).
 * Use ONLY .blockcart::before (the inner element) — the outer
 * #_desktop_cart wraps it and we don't want both pseudos firing. */
#header #_desktop_cart .blockcart::before,
#header .blockcart::before {
  content: '';
  display: inline-flex;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e2e8f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/><path d='M3 6h18'/><path d='M16 10a4 4 0 0 1-8 0'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin-right: 6px;
}
#header #_desktop_cart:hover .blockcart::before,
#header .blockcart:hover::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/><path d='M3 6h18'/><path d='M16 10a4 4 0 0 1-8 0'/></svg>");
}
/* Explicitly DO NOT render the outer cart's pseudo */
#header #_desktop_cart::before {
  content: none !important;
  display: none !important;
}

/* Header chat button — redundant with bottom-right live chat widget. Hide. */
#header .ks-header-chat-btn,
#header .ks-chat-btn,
#header .ks-icons .ks-header-chat-btn,
#header .ks-icons .ks-chat-btn {
  display: none !important;
}
/* (Legacy SVG override no longer needed, button is hidden) */
#header .ks-header-chat-btn svg,
#header .ks-chat-btn svg {
  display: none !important;
}
#header .ks-header-chat-btn::before,
#header .ks-chat-btn::before {
  content: '';
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e2e8f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: background-image 0.15s;
}
#header .ks-header-chat-btn:hover::before,
#header .ks-chat-btn:hover::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/></svg>");
}

/* SVGs from other modules that we DO want kept (e.g. logo SVG) — opt-out */
#header .ks-row2 .logo svg,
#header .ks-row2 a[href="/"] svg,
#header .header-logo svg {
  display: inline-block !important;
  visibility: visible !important;
  width: auto !important;
  height: auto !important;
}

#header .ks-icons .hidden-sm-down,
#header #_desktop_user_info span,
#header #_desktop_cart span {
  font-size: 13.5px;
  font-weight: 500;
  color: inherit !important;
  white-space: nowrap;
  line-height: 1.2;
}

/* ---- Account: chevron + dropdown ---- */
#header #_desktop_user_info::after {
  content: '⌄';
  font-size: 14px;
  line-height: 1;
  color: var(--ks-hdr-text-soft);
  margin-left: 2px;
  transform: translateY(-1px);
  flex-shrink: 0;
  transition: color 0.15s, transform 0.15s;
}
#header #_desktop_user_info:hover::after,
#header #_desktop_user_info:focus-within::after {
  color: var(--ks-hdr-text-bright);
  transform: translateY(-1px) rotate(180deg);
}
/* Stacking context: .ks-row2 must paint ABOVE .ks-row3 (mega menu z=998 in
 * ks-iter.css), otherwise the absolutely-positioned account dropdown is
 * painted under the mega menu strip. Hoist row2 above all header rows. */
#header .ks-row2,
#header .ks-row2-inner {
  position: relative !important;
  z-index: 9999 !important;
}
#header #_desktop_user_info {
  position: relative !important;
  z-index: 10010 !important;
}
/* Keep mega menu row BELOW row2 so the dropdown can clear it */
#header .ks-row3 {
  position: relative;
  z-index: 50 !important;
}
/* Dropdown panel: rendered by ks-header-v2.js as .ks-account-menu */
#header #_desktop_user_info .ks-account-menu {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  left: auto !important;
  background: #fff !important;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22), 0 4px 12px rgba(15, 23, 42, 0.08);
  padding: 8px !important;
  min-width: 260px;
  width: auto !important;
  height: auto !important;
  max-height: none !important;
  /* Above mega menu (z-index 9990 in ks-iter.css) and everything else */
  z-index: 10010 !important;
  list-style: none;
  margin: 0 !important;
  display: none !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.15s, transform 0.15s;
  pointer-events: none;
}
#header #_desktop_user_info:hover .ks-account-menu,
#header #_desktop_user_info:focus-within .ks-account-menu,
#header #_desktop_user_info .ks-account-menu.is-open {
  display: flex !important;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
#header #_desktop_user_info .ks-account-menu li {
  list-style: none;
  display: block !important;
  width: 100%;
  margin: 0;
  padding: 0;
}
/* Section heading inside dropdown ("Konto", "Pomoc", etc.) */
#header #_desktop_user_info .ks-account-menu .ks-account-menu__heading {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b !important;
  padding: 8px 12px 6px !important;
  background: transparent !important;
  cursor: default;
}
#header #_desktop_user_info .ks-account-menu a {
  display: flex !important;
  align-items: center;
  gap: 10px;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 10px 12px;
  font-size: 14px;
  color: #0f172a !important;
  text-decoration: none;
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
  font-weight: 500;
  background: transparent !important;
  white-space: nowrap;
  min-width: 0;
}
#header #_desktop_user_info .ks-account-menu a:hover {
  background: rgba(249, 115, 22, 0.08) !important;
  color: var(--ks-primary) !important;
}
/* Primary action ("Zaloguj się" when logged out) — orange filled */
#header #_desktop_user_info .ks-account-menu a.ks-account-menu__primary {
  background: var(--ks-primary) !important;
  color: #fff !important;
  margin: 2px 0;
  font-weight: 600;
}
#header #_desktop_user_info .ks-account-menu a.ks-account-menu__primary:hover {
  background: var(--ks-primary-hover, #ea580c) !important;
  color: #fff !important;
}
#header #_desktop_user_info .ks-account-menu hr {
  border: 0;
  border-top: 1px solid #e2e8f0;
  margin: 6px 4px;
}
/* Lucide-style icons next to each menu item */
#header #_desktop_user_info .ks-account-menu__icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.75;
}
#header #_desktop_user_info .ks-account-menu a:hover .ks-account-menu__icon { opacity: 1; }
#header #_desktop_user_info .ks-account-menu__primary .ks-account-menu__icon { filter: brightness(0) invert(1); opacity: 1; }

.ks-account-menu__icon--login {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/><polyline points='10 17 15 12 10 7'/><line x1='15' y1='12' x2='3' y2='12'/></svg>");
}
.ks-account-menu__icon--logout {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/><polyline points='16 17 21 12 16 7'/><line x1='21' y1='12' x2='9' y2='12'/></svg>");
}
.ks-account-menu__icon--user-plus {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/><circle cx='8.5' cy='7' r='4'/><line x1='20' y1='8' x2='20' y2='14'/><line x1='23' y1='11' x2='17' y2='11'/></svg>");
}
.ks-account-menu__icon--user {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>");
}
.ks-account-menu__icon--home {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2h-4a1 1 0 0 1-1-1v-7h-4v7a1 1 0 0 1-1 1H5a2 2 0 0 1-2-2z'/></svg>");
}
.ks-account-menu__icon--package {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16.5 9.4 7.55 4.24'/><path d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/><polyline points='3.27 6.96 12 12.01 20.73 6.96'/><line x1='12' y1='22.08' x2='12' y2='12'/></svg>");
}
.ks-account-menu__icon--help {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/><line x1='12' y1='17' x2='12.01' y2='17'/></svg>");
}
.ks-account-menu__icon--mail {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/><polyline points='22,6 12,13 2,6'/></svg>");
}
.ks-account-menu__icon--book {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/><path d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/></svg>");
}
.ks-account-menu__icon--map-pin {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/><circle cx='12' cy='10' r='3'/></svg>");
}
.ks-account-menu__icon--tag {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20.59 13.41 13.42 20.58a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/><line x1='7' y1='7' x2='7.01' y2='7'/></svg>");
}

/* ---- Cart badge ---- */
#header #_desktop_cart .cart-products-count,
#header .blockcart .cart-products-count {
  position: absolute !important;
  /* Position OVER the bag icon's top-right corner, not over "Koszyk" text.
   * Cart button: padding 0 12px, then 22px icon + 6px gap = icon's right edge at 32-34px. */
  top: 2px !important;
  left: 24px !important;
  right: auto !important;
  bottom: auto !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px !important;
  border-radius: 999px !important;
  background: var(--ks-primary) !important;
  color: #fff !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  line-height: 14px !important;
  text-align: center !important;
  border: 2px solid var(--ks-hdr-bg) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  box-sizing: content-box !important;
  z-index: 2;
  pointer-events: none;
}
/* JS hides this when cart is empty by adding .ks-hidden */
#header .cart-products-count.ks-hidden { display: none !important; }

/* ---- Chat button ---- */
#header .ks-header-chat-btn,
#header .ks-chat-btn {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border: 0 !important;
  background: var(--ks-hdr-hover-bg) !important;
  border-radius: 50% !important;
  color: var(--ks-hdr-text) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background 0.15s, color 0.15s !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
}
#header .ks-header-chat-btn:hover,
#header .ks-chat-btn:hover {
  background: var(--ks-primary) !important;
  color: #fff !important;
}
#header .ks-header-chat-btn svg,
#header .ks-chat-btn svg { width: 20px !important; height: 20px !important; }

/* ============================================================
 * MOBILE — Hide account + dropdown, hide chat (drawer), show
 * search icon trigger that opens a fullscreen overlay
 * ============================================================ */
@media (max-width: 991px) {
  #header .ks-row2 {
    height: 64px;
    min-height: 64px;
  }
  #header .ks-row2 .container,
  #header .ks-row2 > .container {
    gap: 8px;
  }
  #header .ks-row2 .logo,
  #header .ks-row2 img.logo {
    height: 30px;
    max-height: 30px;
  }
  /* Account block hidden on mobile (use hamburger drawer) */
  #header #_desktop_user_info {
    display: none !important;
  }
  /* Cart icon stays — label hidden, just icon */
  #header #_desktop_cart .hidden-sm-down,
  #header #_desktop_cart span:not(.cart-products-count) {
    display: none !important;
  }
  #header #_desktop_cart {
    padding: 0 10px !important;
    min-width: 40px;
  }
  /* Inject a search icon button on mobile via ::before */
  #header .ks-icons::before {
    content: '';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e2e8f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
    cursor: pointer;
    order: -1;
  }
}

/* ============================================================
 * MOBILE SEARCH OVERLAY — fullscreen panel injected by JS
 * ============================================================ */
.ks-mobile-search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1000;
  display: none;
  flex-direction: column;
  padding: 20px 16px;
}
.ks-mobile-search-overlay.is-open { display: flex; }
.ks-mobile-search-overlay__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border-radius: 12px;
  padding: 0 14px;
  height: 48px;
}
.ks-mobile-search-overlay__bar input {
  flex: 1;
  border: 0;
  outline: 0;
  font-size: 16px;
  color: #0f172a;
  background: transparent;
}
.ks-mobile-search-overlay__bar input::placeholder { color: #94a3b8; }
.ks-mobile-search-overlay__close {
  width: 40px;
  height: 40px;
  border: 0;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  color: #fff;
  font-size: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.ks-mobile-search-overlay__close:hover { background: rgba(255, 255, 255, 0.16); }
.ks-mobile-search-overlay__topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

/* ============================================================
 * SCROLLED COMPACT STATE
 * ============================================================ */
@media (min-width: 992px) {
  #header.ks-scrolled .ks-row2 {
    height: 60px;
    min-height: 60px;
  }
  #header.ks-scrolled .ks-row2 .logo,
  #header.ks-scrolled .ks-row2 img.logo {
    height: 30px;
    max-height: 30px;
  }
  #header.ks-scrolled {
    background: rgba(15, 23, 42, 0.96);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
}

/* ============================================================
 * SCROLL ANCHOR (so #section links don't hide under sticky)
 * ============================================================ */
body { scroll-padding-top: calc(var(--ks-trust-h) + var(--ks-main-h) + 8px); }
[id]:target { scroll-margin-top: calc(var(--ks-trust-h) + var(--ks-main-h) + 8px); }

/* ============================================================
 * REDUCED MOTION
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
  #header,
  #header * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}