/* ═════════════════════════════════════════════════════════════════════
   Artlor.art Inspired Floating Round-Icon Header & Pill Navigation
   Palette: Beige · Brown · Purple · Chocolate Brown
   ═════════════════════════════════════════════════════════════════════ */

/* ── Top padding to prevent header covering top content on non-hero pages ── */
body:not(.home).knb-has-floating-header,
body:not(.home).knb-has-floating-header .website-wrapper,
body:not(.home).knb-has-floating-header .main-page-wrapper {
  padding-top: 86px !important;
}

/* ── Force Zero Space Gap Above Header on Homepage ── */
body.home,
body.home .website-wrapper,
body.home .main-page-wrapper,
body.knb-cinematic,
body.knb-cinematic .website-wrapper,
body.knb-cinematic .main-page-wrapper {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Hide WoodMart placeholder spacing elements on homepage completely */
body.home .whb-sticked-placeholder,
body.home .whb-placeholder,
body.home .whb-space,
body.home .whb-clone,
body.knb-cinematic .whb-sticked-placeholder,
body.knb-cinematic .whb-placeholder,
body.knb-cinematic .whb-space {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ── Hide generic legacy top bars & non-knb default headers ── */
.topbar-wrapp,
.whb-top-bar,
.whb-border-bottom,
.header-banner,
header.whb-header:not(.knb-artlor-header) {
  display: none !important;
}

/* ── Remove extra background rectangle sitewide behind floating header ── */
.whb-header,
.whb-main-header,
.whb-row,
.whb-general-header,
.whb-header-bottom,
.whb-top-bar,
.whb-sticked-placeholder,
.whb-placeholder,
.whb-space,
.whb-flex-row,
.whb-clone,
.whb-sticked,
.whb-sticky-header:not(.knb-artlor-header),
.woodmart-header,
.site-header-wrapper,
header.whb-header:not(.knb-artlor-header),
.whb-header-bottom .container,
.whb-main-header .container,
.whb-general-header .container {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* ── Universal Reset for Header Lists & Bullets ── */
.knb-artlor-header ul,
.knb-artlor-header ol,
.knb-artlor-header li,
.knb-artlor-header .menu,
.knb-artlor-header .knb-pill-menu {
  list-style: none !important;
  list-style-type: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.knb-artlor-header ul::before,
.knb-artlor-header li::before {
  content: none !important;
}

/* ── Floating Header Shell ── */
.knb-artlor-header,
header.whb-header.knb-artlor-header,
header.site-header.knb-artlor-header {
  position: fixed !important;
  top: 16px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: calc(100% - 32px) !important;
  max-width: 1200px !important;
  height: auto !important;
  min-height: 58px !important;
  z-index: 10000 !important;
  background: rgba(var(--knb-cream-rgb), 0.88) !important;
  backdrop-filter: blur(18px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.4) !important;
  border: 1px solid rgba(var(--knb-chocolate-rgb), 0.12) !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 36px rgba(var(--knb-chocolate-rgb), 0.12), 0 0 1px rgba(var(--knb-purple-rgb), 0.2) !important;
  transition: all 300ms cubic-bezier(.2,.8,.2,1) !important;
  padding: 6px 16px !important;
}

.knb-artlor-header.is-scrolled,
.knb-artlor-header.knb-scrolled,
header.whb-header.knb-artlor-header.is-scrolled {
  top: 10px !important;
  background: rgba(var(--knb-cream-rgb), 0.96) !important;
  box-shadow: 0 12px 40px rgba(var(--knb-chocolate-rgb), 0.16), var(--knb-shadow-purple) !important;
  border-color: rgba(var(--knb-purple-rgb), 0.25) !important;
}

/* ── Inner Flex Layout ── */
.knb-artlor-header__inner {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
}

/* ── Left Brand & Mobile Menu Toggle Group ── */
.knb-header-left-group,
.knb-mobile-toggle-wrap {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.65rem !important;
  flex-shrink: 0 !important;
}

.knb-mobile-toggle,
.knb-artlor-header .knb-mobile-toggle,
.knb-artlor-header .wd-header-mobile-nav,
.knb-artlor-header .wd-tools-element.wd-header-mobile-nav {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  background: var(--knb-purple) !important;
  color: #ffffff !important;
  border: 1.5px solid var(--knb-gold) !important;
  box-shadow: 0 4px 14px rgba(76, 28, 70, 0.38) !important;
  cursor: pointer !important;
  transition: all 240ms cubic-bezier(.2,.8,.2,1) !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.knb-mobile-toggle svg,
.knb-mobile-toggle svg line,
.knb-mobile-toggle svg path {
  stroke: #ffffff !important;
  color: #ffffff !important;
  stroke-width: 2.5px !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.knb-mobile-toggle:hover {
  background: var(--knb-chocolate-brown) !important;
  color: #ffffff !important;
  border-color: var(--knb-gold) !important;
  transform: scale(1.08) !important;
  box-shadow: 0 6px 20px rgba(76, 28, 70, 0.5) !important;
}

/* ── Circular Logo ── */
.knb-artlor-header__logo {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  text-decoration: none !important;
}

.knb-circle-logo,
.knb-artlor-header__logo img {
  width: 44px !important;
  height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid var(--knb-brown-warm) !important;
  box-shadow: 0 4px 14px rgba(var(--knb-purple-rgb), 0.22) !important;
  transition: transform 260ms cubic-bezier(.2,.8,.2,1), box-shadow 260ms ease !important;
}

/* ── Hero Center Emblem — override the 44px header logo constraint ── */
.knb-hero-center-logo.knb-circle-logo,
.knb-hero__logo-emblem .knb-circle-logo,
img.knb-hero-center-logo {
  width: 240px !important;
  height: 240px !important;
  max-width: 240px !important;
  max-height: 240px !important;
  border: 3px solid var(--knb-gold) !important;
  box-shadow: 0 10px 32px rgba(76,28,70,0.45), var(--knb-shadow-glow) !important;
}

@media (max-width: 768px) {
  .knb-hero-center-logo.knb-circle-logo,
  .knb-hero__logo-emblem .knb-circle-logo,
  img.knb-hero-center-logo {
    width: 160px !important;
    height: 160px !important;
    max-width: 160px !important;
    max-height: 160px !important;
  }
}

.knb-artlor-header__logo:hover img,
.knb-circle-logo:hover {
  transform: scale(1.08) rotate(4deg) !important;
  box-shadow: 0 6px 20px rgba(var(--knb-purple-rgb), 0.4) !important;
}

/* ── Center Nav Links (Desktop Pills) ── */
.knb-artlor-header__nav {
  display: flex !important;
  align-items: center !important;
}

.knb-artlor-header__nav .menu,
.knb-artlor-header__nav ul,
.knb-pill-menu {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.knb-artlor-header__nav li {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.knb-artlor-header__nav li a {
  display: inline-flex !important;
  align-items: center !important;
  height: 38px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  font-family: var(--knb-font-sans) !important;
  font-weight: 600 !important;
  font-size: 0.8125rem !important;
  color: var(--knb-chocolate-brown) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: all 220ms ease !important;
}

.knb-artlor-header__nav li a:hover,
.knb-artlor-header__nav li.current-menu-item > a,
.knb-artlor-header__nav li.current_page_item > a {
  color: var(--knb-cream) !important;
  background: var(--knb-purple) !important;
  box-shadow: 0 4px 14px rgba(var(--knb-purple-rgb), 0.3) !important;
}

/* ── Submenus / Dropdowns ── */
.knb-pill-menu .sub-menu,
.knb-artlor-header__nav .sub-menu {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  min-width: 200px !important;
  margin-top: 8px !important;
  padding: 10px 0 !important;
  list-style: none !important;
  background: rgba(var(--knb-cream-rgb), 0.96) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(var(--knb-chocolate-rgb), 0.12) !important;
  border-radius: 16px !important;
  box-shadow: 0 14px 36px rgba(var(--knb-chocolate-rgb), 0.15) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(10px) !important;
  transition: all 240ms cubic-bezier(.2,.8,.2,1) !important;
  z-index: 10001 !important;
}

.knb-artlor-header__nav li:hover > .sub-menu,
.knb-artlor-header__nav li:focus-within > .sub-menu {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

.knb-artlor-header__nav .sub-menu li a {
  display: block !important;
  padding: 8px 18px !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  color: var(--knb-chocolate-brown) !important;
  text-decoration: none !important;
  transition: background 180ms ease, color 180ms ease !important;
}

.knb-artlor-header__nav .sub-menu li a:hover {
  background: rgba(var(--knb-purple-rgb), 0.1) !important;
  color: var(--knb-purple) !important;
}

/* ── Right Round Action Icons (Artlor Style) ── */
.knb-artlor-header__tools {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
}

.knb-round-tool {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: 38px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  background: rgba(var(--knb-chocolate-rgb), 0.06) !important;
  color: var(--knb-chocolate-brown) !important;
  border: 1px solid rgba(var(--knb-chocolate-rgb), 0.12) !important;
  transition: transform 220ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms ease, background 220ms ease, color 220ms ease !important;
  position: relative !important;
  text-decoration: none !important;
  gap: 5px !important;
}

.knb-tool-text {
  font-family: var(--knb-font-sans) !important;
  font-size: 0.725rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: inherit !important;
  line-height: 1 !important;
  display: inline-block !important;
}

.knb-round-tool:hover {
  transform: translateY(-2px) scale(1.05) !important;
  background: var(--knb-purple) !important;
  color: var(--knb-cream) !important;
  border-color: var(--knb-purple) !important;
  box-shadow: 0 6px 18px rgba(var(--knb-purple-rgb), 0.35) !important;
}

.knb-cart-badge {
  position: absolute !important;
  top: -4px !important;
  right: -4px !important;
  width: 18px !important;
  height: 18px !important;
  line-height: 18px !important;
  border-radius: 50% !important;
  background: var(--knb-gold) !important;
  color: var(--knb-chocolate-brown) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-align: center !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2) !important;
}

/* ── Mobile Viewport Adjustments (Screen Width <= 991px) ── */
@media (max-width: 991px) {
  .knb-artlor-header__nav,
  .knb-artlor-header nav,
  .knb-artlor-header .knb-artlor-header__nav {
    display: none !important;
  }

  /* Hide text labels inside header tool buttons on mobile to prevent text overlapping */
  .knb-tool-text {
    display: none !important;
  }

  .knb-round-tool {
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    gap: 0 !important;
  }

  .knb-mobile-toggle {
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    gap: 0 !important;
  }

  .knb-mobile-toggle-wrap {
    display: inline-flex !important;
  }

  .knb-artlor-header {
    width: calc(100% - 24px) !important;
    top: 10px !important;
    padding: 6px 12px !important;
    min-height: 52px !important;
  }

  .knb-artlor-header__inner {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .knb-artlor-header__tools {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .knb-round-tool {
    width: 36px !important;
    height: 36px !important;
  }

  .knb-circle-logo,
  .knb-artlor-header__logo img {
    width: 38px !important;
    height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
  }
}