/* Cadaura x EasyOrders Luxify — Header Only v4
   Scope: header only. No footer/body/product/slider styling.
   Goal: keep existing layout, enlarge logo, modernize categories, hide compare icon.
*/

:root {
  --cd-cream: #F4EFEA;
  --cd-walnut: #3E2A20;
  --cd-rose: #C7A6A1;
  --cd-dash: #C3A6A0;
  --cd-brass: #B89B5E;
  --cd-white: #FFFDFC;
  --cd-line: rgba(62, 42, 32, 0.12);
  --cd-shadow: 0 18px 46px rgba(62, 42, 32, 0.10);
}

/* Remove Luxify upper strip/social row */
.luxify_top_header {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* Header background only */
.luxify_header {
  background: linear-gradient(180deg, #FFFDFC 0%, var(--cd-cream) 100%) !important;
  border-bottom: 1px solid var(--cd-line) !important;
  box-shadow: 0 10px 30px rgba(62, 42, 32, 0.05) !important;
}

/* Keep native layout, just make the pill cleaner */
.luxify_header_container {
  background: rgba(255, 253, 252, 0.94) !important;
  border: 1px solid rgba(62, 42, 32, 0.10) !important;
  border-radius: 999px !important;
  box-shadow: var(--cd-shadow) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

/* Bigger logo without changing header order */
.luxify_header_logo,
.luxify_header_logo a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 0 !important;
}

.luxify_header_logo img,
.luxify_header_logo svg {
  display: block !important;
  width: 200px !important;
  max-width: 200px !important;
  height: 50px !important;
  max-height: 50px !important;
  padding: 0 !important;
  margin: 0 !important;
  object-fit: contain !important;
  transition: transform 0.28s ease, filter 0.28s ease !important;
}

.luxify_header_logo:hover img,
.luxify_header_logo:hover svg {
  transform: scale(1.04) !important;
  filter: drop-shadow(0 8px 18px rgba(62, 42, 32, 0.14)) !important;
}

/* Category links — exact Luxify desktop category area + documented class fallback */
.luxify_header_links a,
.luxify_header_links button,
.luxify_header_container .hidden.flex-1.ms-12.lg\:block a,
.luxify_header_container .hidden.flex-1.ms-12.lg\:block button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--cd-walnut) !important;
  font-weight: 750 !important;
  font-size: 15px !important;
  letter-spacing: -0.01em !important;
  line-height: 1 !important;
  text-decoration: none !important;
  padding: 12px 17px !important;
  border-radius: 999px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  transform: translateY(0) scale(1) !important;
  transform-origin: center !important;
  transition:
    transform 0.22s ease,
    background-color 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease,
    box-shadow 0.22s ease !important;
  will-change: transform !important;
}

.luxify_header_links a:hover,
.luxify_header_links button:hover,
.luxify_header_container .hidden.flex-1.ms-12.lg\:block a:hover,
.luxify_header_container .hidden.flex-1.ms-12.lg\:block button:hover {
  color: var(--cd-walnut) !important;
  background: rgba(184, 155, 94, 0.15) !important;
  border-color: rgba(184, 155, 94, 0.24) !important;
  box-shadow: 0 8px 18px rgba(62, 42, 32, 0.08) !important;
  transform: translateY(-2px) scale(1.08) !important;
}

.luxify_header_links a:active,
.luxify_header_links button:active,
.luxify_header_container .hidden.flex-1.ms-12.lg\:block a:active,
.luxify_header_container .hidden.flex-1.ms-12.lg\:block button:active {
  transform: translateY(0) scale(1.02) !important;
}

/* Icons: keep same placement, only brand hover */
.luxify_header_container [class~="lg:ms-6"] > button,
.luxify_header_container [class~="lg:ms-6"] > a,
.luxify_header_container [class~="lg:ms-6"] > div {
  transition: transform 0.22s ease, color 0.22s ease, opacity 0.22s ease !important;
}

.luxify_header_container [class~="lg:ms-6"] > button:hover,
.luxify_header_container [class~="lg:ms-6"] > a:hover,
.luxify_header_container [class~="lg:ms-6"] > div:hover {
  transform: translateY(-1px) scale(1.06) !important;
}

.luxify_header_container [class~="lg:ms-6"] svg,
.luxify_header_container [class~="lg:ms-6"] i {
  color: var(--cd-walnut) !important;
  stroke: var(--cd-walnut) !important;
}

.luxify_header_container [class~="lg:ms-6"] > button:hover svg,
.luxify_header_container [class~="lg:ms-6"] > a:hover svg,
.luxify_header_container [class~="lg:ms-6"] > div:hover svg,
.luxify_header_container [class~="lg:ms-6"] > button:hover i,
.luxify_header_container [class~="lg:ms-6"] > a:hover i,
.luxify_header_container [class~="lg:ms-6"] > div:hover i {
  color: var(--cd-brass) !important;
  stroke: var(--cd-brass) !important;
}

/* Hide compare icon.
   Based on live DOM: search button = first button, compare button = second button inside the icon group. */
.luxify_header_container [class~="lg:ms-6"] > button.relative.p-2:nth-of-type(2),
.luxify_header_container [class~="lg:ms-6"] > button:nth-of-type(2),
.luxify_header_container button[aria-label*="compare" i],
.luxify_header_container button[title*="compare" i],
.luxify_header_container a[aria-label*="compare" i],
.luxify_header_container a[title*="compare" i],
.luxify_header_container [href*="compare" i],
.luxify_header_container [class*="compare" i],
.luxify_header_container [id*="compare" i] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
}

/* Mobile polish only */
@media (max-width: 768px) {
  .luxify_header_container {
    border-radius: 30px !important;
  }

  .luxify_header_logo img,
  .luxify_header_logo svg {
	width: 180px !important;
	max-width: 180px !important;
	height: 45px !important;
	max-height: 45px !important;
	padding: 0 !important;
	margin: 0 !important;
	object-fit: contain !important;
  }
}

/* =========================================================
   Cadaura x EasyOrders Luxify — Footer Color + Full Bleed Only
   Scope: footer only. Keeps footer structure/position unchanged.
   Changes: walnut background, cream text/icons, full-width/footer-edge coverage.
   ========================================================= */

.luxify_footer,
footer.luxify_footer,
footer:has(.footer_store_info) {
  background: var(--cd-walnut) !important;
  color: var(--cd-cream) !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-bottom: 0 !important;
  box-shadow: 0 100vmax 0 100vmax var(--cd-walnut) !important;
  clip-path: inset(0 -100vmax -100vmax -100vmax) !important;
}

.luxify_footer *,
footer.luxify_footer *,
footer:has(.footer_store_info) * {
  color: var(--cd-cream) !important;
  fill: var(--cd-cream) !important;
  stroke: var(--cd-cream) !important;
}

.luxify_footer a,
footer.luxify_footer a,
footer:has(.footer_store_info) a {
  color: var(--cd-cream) !important;
}

.luxify_footer svg,
footer.luxify_footer svg,
footer:has(.footer_store_info) svg,
.luxify_footer i,
footer.luxify_footer i,
footer:has(.footer_store_info) i {
  color: var(--cd-cream) !important;
  fill: var(--cd-cream) !important;
  stroke: var(--cd-cream) !important;
}

html,
body {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

@supports (overflow-x: clip) {
  html,
  body {
    overflow-x: clip !important;
  }
}