/** Shopify CDN: Minification failed

Line 2222:0 Unexpected "}"

**/
/* Remove "Powered by Shopify" */
a[href*="shopify.com"][rel="nofollow"] {
  display: none !important;
}

/* =========================================================
   GLOBAL IMAGE LOAD POLISH
========================================================= */

img.is-img-fade {
  opacity: 0;
  transition: opacity 0.4s ease;
}

img.is-img-fade.is-img-loaded {
  opacity: 1;
}

/* =========================================
   REMOVE ACCENT COLOR FLASH ON LOAD
========================================= */

:root {
  --color-accent: #000000 !important; /* neutral during load */
}

/* =========================================================
   DISABLE LOGO SHRINK ON SCROLL + NUDGE HEADER LOGO UP
========================================================= */
@media (min-width: 768px) {
  a.heading > img,
  .lux-desktop-logo-wrap .heading img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 180px !important;
    max-height: none !important;
    object-fit: contain !important;
    transition: none !important;
    filter: none !important;
    -webkit-filter: none !important;
  }

  a.heading {
    transition: none !important;
  }
}

@media (min-width: 768px) {
  .content-wrapper > .transition-all:first-child {
    justify-content: flex-start;
  }

  .content-wrapper > .contents.md\\:flex {
    justify-content: flex-end;
  }
}


.content-wrapper h2.heading {
  font-size: 1.75rem;        /* 28px */
  line-height: 1.22;
  letter-spacing: -0.015em;
}

@media (min-width: 768px) {
  .content-wrapper h2.heading {
    font-size: 2.75rem;      /* 44px */
    line-height: 1.18;
    letter-spacing: -0.02em;
  }
}



/* =========================================================
   RHODE-STYLE ANNOUNCEMENT BAR — EDITORIAL INSET
========================================================= */

#shopify-section-sections--20146969936071__announcement-bar > div > div {
  max-width: calc(100% - 64px);
  margin: 14px auto 18px; /* more space below on desktop */
  padding: 10px 22px;
  border-radius: 12px !important;

  background: #bfbfbf !important;
  color: #ffffff !important;

  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}

/* announcement text */
#shopify-section-sections--20146969936071__announcement-bar p {
  margin: 0 !important;
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1.2;
}

/* MOBILE */
@media (max-width: 767px) {
  #shopify-section-sections--20146969936071__announcement-bar {
    padding-bottom: 8px !important; /* creates breathing room below whole bar area */
  }

  #shopify-section-sections--20146969936071__announcement-bar > div > div {
    max-width: calc(100% - 30px);
    margin: 10px auto 18px; /* bigger space below */
    padding: 12px 18px;
    border-radius: 12px !important;

    font-size: 11px;
    letter-spacing: 0.05em;
  }

  #shopify-section-sections--20146969936071__announcement-bar p {
    font-size: 11.5px !important;
    line-height: 1.25 !important;
    letter-spacing: 0.05em;
  }
}

/* =========================================================
   RHODE-STYLE IMAGE BANNER — GLOBAL EDITORIAL INSET SYSTEM
   Applies to ALL image_banner sections
========================================================= */

/* Image banner section stays full width */
.shopify-section[id*="__image_banner"] {
  width: 100%;
  position: relative;
  background: transparent;
}

/* Framed banner wrapper — desktop */
.shopify-section[id*="__image_banner"]
> .relative.overflow-hidden {
  width: calc(100% - 64px);
  margin: 0 auto 24px;
  border-radius: 16px;
  overflow: hidden;
}

/* Mobile */
@media (max-width: 767px) {
  .shopify-section[id*="__image_banner"]
  > .relative.overflow-hidden {
    width: calc(100% - 30px) !important;
    margin: 0 auto 16px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }
}


/* =========================================================
   5799 IMAGE BANNER — MOBILE INSET WIDTH
========================================================= */
@media (max-width: 767px) {
  #shopify-section-template--20146968985799__image_banner
  > .relative.overflow-hidden {
    width: calc(100% - 30px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }
}


@media (min-width: 768px) {
  #shopify-section-template--20146968985799__image_banner
  > .relative.overflow-hidden {
    height: 93vh !important;
    max-height: 920px !important;
    min-height: 700px !important;
  }
}

/* 5799 IMAGE BANNER — MOBILE */
@media (max-width: 767px) {
  #shopify-section-template--20146968985799__image_banner
  > .relative.overflow-hidden {
    width: calc(100% - 30px) !important;
    margin-left: auto !important;
    margin-right: auto !important;

    height: 100vh !important;
    max-height: 760px !important;
    min-height: 620px !important;

    transform: translateY(10px) !important;

    border-radius: 16px !important;
    overflow: hidden !important;
  }
}

@media (max-width: 767px) {
  #shopify-section-template--20146968985799__image_banner .flex.max-w-\[500px\].flex-col.justify-center.gap-10.text-text-on-primary-bg {
    justify-content: flex-end !important;
    align-items: center !important;
    text-align: center !important;
    height: 100% !important;
    padding: 0 20px 34px !important;
    gap: 18px !important;
    margin: 0 auto !important;
  }

  #shopify-section-template--20146968985799__image_banner .flex.max-w-\[500px\].flex-col.justify-center.gap-10.text-text-on-primary-bg h2 {
    margin: 0 !important;
  }

  #shopify-section-template--20146968985799__image_banner .flex.max-w-\[500px\].flex-col.justify-center.gap-10.text-text-on-primary-bg .button {
    margin: 0 auto !important;
  }
}

/* =========================================================
   IMAGE WITH TEXT — REDUCE CENTER GAP
========================================================= */

#shopify-section-template--20146968985799__image_with_text_2
.content-wrapper.md\:grid.md\:grid-cols-2{
  gap: 28px !important; /* default is usually ~40px */
}


/* =========================================================
   HERO HEADING — EXACT 2-LINE WRAP
========================================================= */
@media (min-width: 1024px) {
  #shopify-section-template--20146968985799__image_banner
  .content-wrapper h2.heading {
    max-width: 300px !important;
    line-height: 1.08 !important;
    text-wrap: balance;
  }
}

/* Desktop */
@media (min-width: 768px) {
  #shopify-section-template--20146968985799__image_banner img {
    object-position: center 60%;
  }
}

/* Mobile */
@media (max-width: 767px) {
  #shopify-section-template--20146968985799__image_banner img {
    object-position: center 50%;
  }
}

/* =========================================================
   HERO BUTTON — PRIMARY
   Transparent default / white fill on hover
   White text default / grey text on hover
========================================================= */

.button.button--filled-primary {
  position: relative;
  background: transparent !important;
  border: 1px solid #808080 !important;
  color: #808080 !important;
  overflow: hidden !important;
  transition: color 0.4s ease;
  z-index: 1;
}

/* Ensure text is always visible */
.button.button--filled-primary,
.button.button--filled-primary span {
  color: #808080 !important;
}

/* SVG follows current text color */
.button.button--filled-primary svg,
.button.button--filled-primary svg path {
  fill: currentColor !important;
}

/* Optional: hide arrow icon cleanly */
.button.button--filled-primary .button__icon {
  display: none !important;
}

/* White fill layer */
.button.button--filled-primary::after {
  content: "";
  position: absolute;
  inset: -1px;
  background: #808080;
  border-radius: inherit;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  backface-visibility: hidden;
  z-index: -1;
}

/* Hover */
@media (hover: hover) {
  .button.button--filled-primary:hover,
  .button.button--filled-primary:hover span {
    color: #ffffff !important;
  }

  .button.button--filled-primary:hover svg,
  .button.button--filled-primary:hover svg path {
    fill: #ffffff !important;
  }

  .button.button--filled-primary:hover::after {
    transform: scaleY(1);
  }
}

.button--filled-secondary .button__icon{
  display: none !important;
}

/* Hero-specific secondary button color override only */
#shopify-section-template--20146968985799__image_banner .button.button--filled-secondary,
#shopify-section-template--20146968985799__image_banner .button.button--filled-secondary span {
  color: #ffffff !important;
  border-color: #ffffff !important;
}

#shopify-section-template--20146968985799__image_banner .button.button--filled-secondary::after {
  background: #ffffff !important;
}

@media (hover: hover) {
  #shopify-section-template--20146968985799__image_banner .button.button--filled-secondary:hover,
  #shopify-section-template--20146968985799__image_banner .button.button--filled-secondary:hover span {
    color: #808080 !important;
  }
}

/* =========================================================
   CAMELLIA IMAGE BANNER — MOBILE INSET WIDTH
========================================================= */
@media (max-width: 767px) {
  #shopify-section-template--20146968985799__image_banner_8QqpgU
  > .relative.overflow-hidden {
    width: calc(100% - 30px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 16px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }
}

/* =========================================================
   FOUNDER IMAGE — ALIGN TO GLOBAL LEFT EDGE ONLY
========================================================= */

@media (min-width: 768px) {
  #shopify-section-template--20146968985799__image_with_text_1
  .content-wrapper.m-auto.md\:grid.md\:grid-cols-2
  .relative.order-\[--image-order\] {
    margin-left: -98px; /* matches global inset system */
  }
}

/* =========================================================
   FOUNDER TEXT COLUMN — RHODE WIDTH CONTROL
========================================================= */

@media (min-width: 768px) {
  #shopify-section-template--20146968985799__image_with_text_1
  .text-column {
    max-width: 720px;
    margin-left: auto;
    margin-right: 0;
  }
}

/* =========================================================
   RHODE-STYLE FOUNDER TEXT PANEL — RIGHT ALIGNED FRAME
   (Scoped to image_with_text_1 ONLY)
========================================================= */

@media (min-width: 768px) {

  #shopify-section-template--20146968985799__image_with_text_1
  .content-wrapper.m-auto.md\:grid.md\:grid-cols-2
  .flex.flex-col.items-start.md\:self-center {
    background: #ECEDEF;
    border-radius: 16px;
    padding: 48px 48px 48px 40px;

    /* subtle Rhode edge */
    border: 1px solid rgba(0, 0, 0, 0.04);
  }
}

/* =========================================================
   FOUNDER SECTION — REDUCE CENTER GAP
========================================================= */

@media (min-width: 768px) {
  #shopify-section-template--20146968985799__image_with_text_1
  .content-wrapper.m-auto.md\:grid.md\:grid-cols-2 {
    gap: 28px !important;
  }
}


/* Center "learn more" button in founder section */
.content-wrapper.m-auto
.button.button--filled-primary {
  align-self: center;
}



/* =========================================================
   HIDE "FOLLOW ON SHOP" BUTTON — FOOTER ONLY
========================================================= */

footer button:has(svg[viewBox="0 0 60 25"]) {
  display: none !important;
}



/* Camellia banner — image positioning */
@media (min-width: 768px) {
  #shopify-section-template--20146968985799__image_banner_8QqpgU .faded-img {
    object-position: center 16% !important;
  }
}


@media (max-width: 767px) {
  #shopify-section-template--20146968985799__image_banner_8QqpgU .faded-img {
    object-position: center 6% !important;
  }
}

/* =========================================================
   HERO BUTTON — SECONDARY
   Transparent default / white fill on hover
   White text default / grey text on hover
========================================================= */

.button.button--filled-secondary {
  position: relative;
  background: transparent !important;
  border: 1px solid #ffffff !important;
  color: #ffffff !important;
  overflow: hidden !important;
  transition: color 0.4s ease;
  z-index: 1;
}

/* Ensure text is always visible */
.button.button--filled-secondary,
.button.button--filled-secondary span {
  color: #ffffff !important;
}

/* Safe even if SVG exists */
.button.button--filled-secondary svg,
.button.button--filled-secondary svg path {
  fill: currentColor !important;
}

/* White fill layer */
.button.button--filled-secondary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #ffffff;
  border-radius: inherit;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  backface-visibility: hidden;
  z-index: -1;
}

/* Hover */
@media (hover: hover) {
  .button.button--filled-secondary:hover,
  .button.button--filled-secondary:hover span {
    color: #808080 !important;
  }

  .button.button--filled-secondary:hover svg,
  .button.button--filled-secondary:hover svg path {
    fill: #808080 !important;
  }

  .button.button--filled-secondary:hover::after {
    transform: scaleY(1);
  }
}

/* Heading text */
.heading.text-4xl.leading-tight {
  color: #ffffff !important;
}

/* =========================================================
   IMAGE WITH TEXT 2 — IMAGE ALIGN TO GLOBAL RIGHT EDGE
========================================================= */

@media (min-width: 768px) {
  #shopify-section-template--20146968985799__image_with_text_2
  .content-wrapper.m-auto.md\:grid.md\:grid-cols-2
  .relative.order-\[--image-order\].overflow-hidden {
    margin-right: -98px; /* 👈 pulls image to global right inset */
  }
}

/* =========================================================
   IMAGE WITH TEXT 2 — RHODE-STYLE TEXT PANEL
   (Same styling as image_with_text_1)
========================================================= */

@media (min-width: 768px) {

  #shopify-section-template--20146968985799__image_with_text_2
  .content-wrapper.m-auto.md\:grid.md\:grid-cols-2
  .flex.flex-col.items-start.md\:self-center {
    background: #ECEDEF;
    border-radius: 16px;
    padding: 48px 48px 48px 40px;

    /* subtle Rhode edge */
    border: 1px solid rgba(0, 0, 0, 0.04);

    /* 👈 THIS is the key line */
    margin-left: -98px;

    /* editorial restraint */
    max-width: 720px;

  }

}

/* =========================================================
   IMAGE WITH TEXT 1 + 2 — SHORTER DESKTOP HEIGHT
========================================================= */
@media (min-width: 768px) {

  /* Shared shorter height */
  #shopify-section-template--20146968985799__image_with_text_1
  .content-wrapper.m-auto.md\:grid.md\:grid-cols-2,
  #shopify-section-template--20146968985799__image_with_text_2
  .content-wrapper.m-auto.md\:grid.md\:grid-cols-2 {
    height: 68vh !important;
    min-height: 520px;
    max-height: 700px;
    align-items: stretch;
  }

  /* Image side fills section height */
  #shopify-section-template--20146968985799__image_with_text_1
  .relative.order-\[--image-order\],
  #shopify-section-template--20146968985799__image_with_text_2
  .relative.order-\[--image-order\] {
    height: 100%;
  }

  #shopify-section-template--20146968985799__image_with_text_1
  .relative.order-\[--image-order\] > div,
  #shopify-section-template--20146968985799__image_with_text_2
  .relative.order-\[--image-order\] > div {
    height: 100%;
  }

  #shopify-section-template--20146968985799__image_with_text_1
  .relative.order-\[--image-order\] img,
  #shopify-section-template--20146968985799__image_with_text_2
  .relative.order-\[--image-order\] img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Text panel fills height too */
  #shopify-section-template--20146968985799__image_with_text_1
  .flex.flex-col.items-start.md\:self-center,
  #shopify-section-template--20146968985799__image_with_text_2
  .flex.flex-col.items-start.md\:self-center {
    height: 100%;
    display: flex;
    justify-content: center;
  }
}

/* =========================================================
   IMAGE WITH TEXT 2 — MOBILE EDITORIAL / RHODE-LIKE
   keeps inset side margins + soft text card
========================================================= */
@media (max-width: 767px) {

  /* section itself stays full width */
  #shopify-section-template--20146968985799__image_with_text_2 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* main inner layout gets same mobile inset language */
  #shopify-section-template--20146968985799__image_with_text_2
  .content-wrapper.m-auto.md\:grid.md\:grid-cols-2 {
    width: calc(100% - 30px) !important;
    margin: 0 auto !important;
    height: auto !important;
    min-height: unset !important;
    max-height: none !important;
    gap: 14px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* image block stays inset and rounded */
  #shopify-section-template--20146968985799__image_with_text_2
  .relative.order-\[--image-order\] {
    width: 100% !important;
    margin: 0 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
  }

  #shopify-section-template--20146968985799__image_with_text_2
  .relative.order-\[--image-order\] > div {
    width: 100% !important;
    height: auto !important;
  }

  #shopify-section-template--20146968985799__image_with_text_2
  .relative.order-\[--image-order\] img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 5 !important;
    object-fit: cover !important;
    border-radius: 18px !important;
  }

  /* soft text panel underneath */
  #shopify-section-template--20146968985799__image_with_text_2
  .content-wrapper.m-auto.md\:grid.md\:grid-cols-2
  .flex.flex-col.items-start.md\:self-center {
    background: #ECEDEF !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
    border-radius: 18px !important;
    padding: 28px 24px 30px !important;
    margin: 0 !important;
    max-width: none !important;
    height: auto !important;
    justify-content: center !important;
    align-items: flex-start !important;
  }

  /* heading */
  #shopify-section-template--20146968985799__image_with_text_2
  .flex.flex-col.items-start.md\:self-center h2 {
    width: 100% !important;
    text-align: center !important;
    font-size: clamp(30px, 8vw, 42px) !important;
    line-height: 1.04 !important;
    letter-spacing: -0.03em !important;
    margin: 0 0 14px !important;
  }

  /* body */
  #shopify-section-template--20146968985799__image_with_text_2
  .flex.flex-col.items-start.md\:self-center p {
    font-size: 16px !important;
    line-height: 1.55 !important;
    margin-bottom: 22px !important;
  }

  /* button centers nicely */
  #shopify-section-template--20146968985799__image_with_text_2
  .flex.flex-col.items-start.md\:self-center .button {
    align-self: center !important;
  }
}

/* =========================================================
   IMAGE WITH TEXT 1 — MOBILE EDITORIAL / RHODE-LIKE
   uses same inset system as banners
========================================================= */
@media (max-width: 767px) {

  /* section itself stays full width */
  #shopify-section-template--20146968985799__image_with_text_1 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* main inner layout gets same mobile inset language */
  #shopify-section-template--20146968985799__image_with_text_1
  .content-wrapper.m-auto.md\:grid.md\:grid-cols-2 {
    width: calc(100% - 30px) !important;
    margin: 0 auto !important;
    height: auto !important;
    min-height: unset !important;
    max-height: none !important;
    gap: 14px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* image block stays inset and rounded */
  #shopify-section-template--20146968985799__image_with_text_1
  .relative.order-\[--image-order\] {
    width: 100% !important;
    margin: 0 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
  }

  #shopify-section-template--20146968985799__image_with_text_1
  .relative.order-\[--image-order\] > div {
    width: 100% !important;
    height: auto !important;
  }

  #shopify-section-template--20146968985799__image_with_text_1
  .relative.order-\[--image-order\] img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 5 !important;
    object-fit: cover !important;
    border-radius: 18px !important;
  }

  /* soft text panel underneath */
  #shopify-section-template--20146968985799__image_with_text_1
  .content-wrapper.m-auto.md\:grid.md\:grid-cols-2
  .flex.flex-col.items-start.md\:self-center,
  #shopify-section-template--20146968985799__image_with_text_1
  .text-column {
    background: #ECEDEF !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
    border-radius: 18px !important;
    padding: 28px 24px 30px !important;
    margin: 0 !important;
    max-width: none !important;
    width: 100% !important;
    height: auto !important;
    justify-content: center !important;
    align-items: flex-start !important;
  }

  /* heading */
  #shopify-section-template--20146968985799__image_with_text_1
  .flex.flex-col.items-start.md\:self-center h2,
  #shopify-section-template--20146968985799__image_with_text_1
  .text-column h2 {
    width: 100% !important;
    text-align: center !important;
    font-size: clamp(30px, 8vw, 42px) !important;
    line-height: 1.04 !important;
    letter-spacing: -0.03em !important;
    margin: 0 0 14px !important;
  }

  /* body */
  #shopify-section-template--20146968985799__image_with_text_1
  .flex.flex-col.items-start.md\:self-center p,
  #shopify-section-template--20146968985799__image_with_text_1
  .text-column p {
    font-size: 16px !important;
    line-height: 1.55 !important;
    margin-bottom: 22px !important;
  }

  /* button centered */
  #shopify-section-template--20146968985799__image_with_text_1
  .flex.flex-col.items-start.md\:self-center .button,
  #shopify-section-template--20146968985799__image_with_text_1
  .text-column .button {
    align-self: center !important;
  }
}

/* Center "Shop now" button */
a.button.button--filled-primary {
  display: inline-flex;
  margin: 0 auto;
}

/* =========================================
   LUX SCROLL SCALE — IMAGE WITH TEXT
========================================= */

.lux-scroll-scale {
  overflow: hidden;
}

.lux-scroll-scale img {
  transform: scale(1.08);
  transform-origin: center center;
  backface-visibility: hidden;
  will-change: transform;
}


main .heading {
  color: #808080 !important;
}

#shopify-section-template--20146968985799__image_banner .heading {
  color: #ffffff !important;
}

/* =========================================================
   LUX SOCIAL CAROUSEL — IMAGE + VIDEO SUPPORT
========================================================= */

.lux-social-carousel {
  width: 100%;
  padding: 40px 0;
}

.lux-social-frame {
  width: calc(100% - 64px);
  margin: 0 auto;
  background: #ECEDEF;
  border-radius: 16px;
  padding: 42px 34px 34px;
  padding-bottom: 38px !important;
  overflow: hidden;
}

/* ================= HEADER ================= */

.lux-social-header {
  display: block;
  margin-bottom: 34px;
}

.lux-social-title {
  text-align: center;
  font-size: clamp(26px, 2.5vw, 38px);
  line-height: 0.95;
  font-weight: 700;
  color: #808080;
  margin: 0 0 2px !important;
  letter-spacing: -0.03em;
}

.lux-social-title strong {
  font-weight: 700;
}

.lux-social-title span {
  font-weight: 400;
  opacity: 0.7;
}

/* ================= BUTTON ================= */

.lux-social-btn {
  position: relative;
  display: flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 20px;
  border-radius: 999px !important;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  background: transparent !important;
  border: 1.2px solid #bfbfbf !important;
  color: #bfbfbf !important;
  opacity: 1 !important;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-decoration: none;
  transition:
    color 0.42s ease,
    border-color 0.35s ease,
    transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1;
  margin: 18px auto 0 !important;
}

.lux-social-btn,
.lux-social-btn:link,
.lux-social-btn:visited,
.lux-social-btn span {
  opacity: 1 !important;
  color: #808080 !important;
}

.lux-social-btn::after {
  content: "";
  position: absolute;
  inset: -1px;
  background: #bfbfbf;
  border-radius: inherit;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: -1;
}

@media (hover:hover) {
  .lux-social-btn:hover {
    color: #ffffff !important;
    transform: translateY(-1px);
  }

  .lux-social-btn:hover::after {
    transform: scaleY(1);
  }

  .lux-social-btn:active {
    transform: translateY(0);
  }
}

/* ================= CAROUSEL ================= */

.lux-social-track {
  overflow: hidden;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}

.lux-social-track.is-dragging {
  cursor: grabbing;
}

.lux-social-track.is-dragging .lux-social-inner {
  transition: none !important;
}

.lux-social-track.is-dragging a,
.lux-social-track.is-dragging img,
.lux-social-track.is-dragging video,
.lux-social-track.is-dragging source {
  pointer-events: none;
}

.lux-social-inner {
  display: flex;
  gap: 18px;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.lux-social-card {
  position: relative;
  flex: 0 0 calc((100% - (18px * 3)) / 4);
  flex-shrink: 0;
  aspect-ratio: 0.8 / 1;
  border-radius: 14px;
  overflow: hidden;
  background: transparent;
}

.lux-social-media {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}

.lux-social-image,
.lux-social-video {
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.lux-social-video {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
}

/* hide native media UI */
.lux-social-video::-webkit-media-controls,
.lux-social-video::-webkit-media-controls-enclosure,
.lux-social-video::-webkit-media-controls-panel,
.lux-social-video::-webkit-media-controls-play-button,
.lux-social-video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
}

@media (hover: hover) {
  .lux-social-card:hover .lux-social-image,
  .lux-social-card:hover .lux-social-video {
    transform: scale(1.03);
  }
}

/* ================= DIVIDER ================= */

.lux-social-divider {
  height: 1px;
  background: rgba(0,0,0,0.10);
  margin: 24px 0 18px;
}

/* ================= CONTROLS ================= */

.lux-social-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 6px;
}

.lux-arrow {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(191, 191, 191, 0.72);
  background: transparent;
  color: #808080;
  fill: currentColor;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.35s ease,
    border-color 0.35s ease,
    color 0.35s ease,
    transform 0.25s ease;
}

@media (hover: hover) {
  .lux-arrow:hover {
    background: rgba(255, 255, 255, 0.58);
    border-color: #808080;
    color: #808080;
    transform: translateY(-1px);
  }

  .lux-arrow:active {
    transform: translateY(0);
  }
}

/* ================= TABLET ================= */

@media (max-width: 1024px) {
  .lux-social-frame {
    padding: 28px 24px 20px;
  }

  .lux-social-inner {
    gap: 16px;
  }

  .lux-social-card {
    flex: 0 0 calc((100% - (16px * 2)) / 3);
    aspect-ratio: 0.82 / 1;
  }

  .lux-social-title {
    font-size: clamp(22px, 3vw, 30px);
  }
}

/* ================= MOBILE ================= */

@media (max-width: 767px) {
  .lux-social-carousel {
    padding: 26px 0 30px;
  }

  .lux-social-frame {
    width: calc(100% - 30px);
    padding: 28px 14px 28px;
    border-radius: 18px;
  }

  .lux-social-header {
    margin-bottom: 22px;
  }

  .lux-social-title {
    font-size: clamp(20px, 6vw, 24px);
    line-height: 0.96;
    letter-spacing: -0.035em;
    text-align: center;
  }

  .lux-social-title span {
    opacity: 0.72;
  }

  .lux-social-inner {
    gap: 12px;
  }

  .lux-social-card {
    flex: 0 0 78%;
    aspect-ratio: 0.8 / 1;
    border-radius: 16px;
  }

  .lux-social-divider {
    margin: 20px 0 16px;
  }

  .lux-social-controls {
    justify-content: center;
    gap: 10px;
    margin-top: 4px !important;
  }

  .lux-arrow {
    width: 36px;
    height: 36px;
    font-size: 13px;
  }

  .lux-social-btn {
    height: 32px;
    padding: 0 16px;
    font-size: 10px;
    letter-spacing: 0.08em;
    margin: 16px auto 0 !important;
  }
}

.lux-social-card video,
.lux-social-card .lux-social-video,
.lux-social-card .lux-social-video video,
.lux-social-card iframe,
.lux-social-card .shopify-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 0;
  pointer-events: none;
}

.lux-social-card video::-webkit-media-controls,
.lux-social-card video::-webkit-media-controls-panel,
.lux-social-card video::-webkit-media-controls-play-button,
.lux-social-card video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
}

/* =========================================================
   FOOTER — ELEVATED RHODE-INSPIRED FRAME
   Updated palette:
   - Frame: #BFBFBF
   - Card: #FFFFFF
   - Text: #2F2C27 / softened charcoal
   - Accent: #808080
========================================================= */

/* ------------------------------
   BREAK OUT OF THEME CONTAINERS
------------------------------ */
footer.footer,
footer.footer .content-wrapper {
  max-width: none !important;
}

footer.footer {
  width: 100%;
  background: transparent;
  padding: 0;
  margin: 0;
}

/* ------------------------------
   MAIN FRAMED CONTAINER
------------------------------ */
footer.footer .content-wrapper {
  width: calc(100% - 64px) !important;
  max-width: none !important;
  margin: 56px auto !important;

  background: #c4c4c4;
  border-radius: 16px;
  padding: 46px 40px 30px;
  overflow: hidden;

  border: 1px solid rgba(47, 44, 39, 0.05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.025);
}

/* ------------------------------
   TOP ROW STRUCTURE
------------------------------ */
@media (min-width: 768px) {
  footer.footer .content-wrapper > div:first-child {
    display: flex;
    align-items: flex-start;
    gap: 72px;
  }

  /* menus */
  footer.footer .content-wrapper > div:first-child > nav {
    order: 1;
    flex: 1.18;
    min-width: 0;
  }

  /* newsletter */
  footer.footer .content-wrapper > div:first-child > div:first-child {
    order: 2;
    flex: 0.82;
    min-width: 340px;
  }
}

/* ------------------------------
   NEWSLETTER CARD
------------------------------ */
footer.footer [class*="newsletter"] {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 34px 32px 28px;
  border: 1px solid rgba(47, 44, 39, 0.06);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

footer.footer [class*="newsletter"] h2,
footer.footer [class*="newsletter"] h3 {
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
  color: #1a1a1a;
}

footer.footer [class*="newsletter"] p {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(47, 44, 39, 0.72);
}

footer.footer [class*="newsletter"] input {
  min-height: 54px;
  border-radius: 12px !important;
  border: 1px solid rgba(47, 44, 39, 0.18) !important;
  background: #FFFFFF !important;
  color: #1a1a1a !important;
  box-shadow: none !important;
  transition: none !important;
}

footer.footer [class*="newsletter"] input::placeholder {
  color: rgba(47, 44, 39, 0.48) !important;
}

/* =========================================================
   FOOTER NEWSLETTER INPUT — KEEP BORDER CONSTANT
========================================================= */
footer.footer input.input__field.input__field--outline.bg-bg-500,
footer.footer input.input__field.input__field--outline.bg-bg-500:hover,
footer.footer input.input__field.input__field--outline.bg-bg-500:focus,
footer.footer input.input__field.input__field--outline.bg-bg-500:focus-visible,
footer.footer input.input__field.input__field--outline.bg-bg-500:active {
  border: 1px solid rgba(47, 44, 39, 0.18) !important;
  background: #ffffff !important;
  color: #1a1a1a !important;
  box-shadow: none !important;
  outline: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

footer.footer [class*="newsletter"] button,
footer.footer [class*="newsletter"] .button {
  min-height: 54px;
  border-radius: 12px !important;
  border: 1px solid #808080 !important;
  background: transparent !important;
  color: #808080 !important;
  transition:
    background-color 0.35s ease,
    color 0.35s ease,
    border-color 0.35s ease,
    transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

footer.footer [class*="newsletter"] button:hover,
footer.footer [class*="newsletter"] .button:hover {
  background: #808080 !important;
  color: #FFFFFF !important;
  border-color: #808080 !important;
  transform: translateY(-1px);
}

footer.footer [class*="newsletter"] button:active,
footer.footer [class*="newsletter"] .button:active {
  transform: translateY(0);
}

/* ------------------------------
   NAV AREA
------------------------------ */
footer.footer nav {
  gap: 52px;
}

footer.footer nav h2 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 16px;
  color: #1a1a1a;
}

footer.footer nav a {
  font-size: 14px;
  line-height: 1.55;
  opacity: 1;
  color: rgba(47, 44, 39, 0.78) !important;
  text-decoration: none;
  transition:
    opacity 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;
}

footer.footer nav a:hover {
  opacity: 1;
  color: #000000 !important;
  transform: translateX(1px);
}

/* logo / brand in left area */
footer.footer .content-wrapper img,
footer.footer .content-wrapper svg {
  opacity: 0.88;
}

/* ------------------------------
   DIVIDER + BOTTOM BAR
------------------------------ */
footer.footer .content-wrapper > div:last-child {
  margin-top: 42px;
  padding-top: 22px;
  border-top: 1px solid rgba(47, 44, 39, 0.08);
}

footer.footer .content-wrapper > div:last-child p,
footer.footer .content-wrapper > div:last-child span,
footer.footer .content-wrapper > div:last-child a {
  font-size: 13px;
  color: rgba(47, 44, 39, 0.72) !important;
}

/* country selector polish */
footer.footer select,
footer.footer .localization-form select,
footer.footer button[aria-haspopup="listbox"] {
  border-radius: 12px !important;
  min-height: 52px;
  border: 1px solid rgba(47, 44, 39, 0.18) !important;
  background: #FFFFFF !important;
  color: #1a1a1a !important;
  box-shadow: none !important;
}

/* ------------------------------
   GLOBAL FOOTER TYPE
------------------------------ */
footer.footer p {
  font-size: 13px;
  line-height: 1.6;
  opacity: 1;
  color: rgba(47, 44, 39, 0.72);
}

/* ------------------------------
   RENAME FOLLOW US → SOCIAL MEDIA
------------------------------ */
footer.footer #brand-information_label {
  position: relative;
  font-size: 0;
}

footer.footer #brand-information_label::after {
  content: "SOCIAL MEDIA";
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1a1a1a;
  display: block;
}

/* ------------------------------
   FOOTER — MOBILE REFINED
------------------------------ */
@media (max-width: 767px) {
  footer.footer .content-wrapper {
    width: calc(100% - 30px) !important;
    margin: 24px auto 20px !important;
    padding: 22px 16px 18px !important;
    border-radius: 16px !important;
  }

  footer.footer .content-wrapper > div:first-child {
    display: flex;
    flex-direction: column;
    gap: 20px !important;
  }

  footer.footer [class*="newsletter"] {
    padding: 20px 16px 16px !important;
    border-radius: 16px !important;
  }

  footer.footer [class*="newsletter"] h2,
  footer.footer [class*="newsletter"] h3 {
    font-size: 18px !important;
    line-height: 1.08 !important;
    margin-bottom: 14px !important;
  }

  footer.footer [class*="newsletter"] p {
    font-size: 12.5px !important;
    line-height: 1.55 !important;
  }

  footer.footer [class*="newsletter"] input,
  footer.footer [class*="newsletter"] button,
  footer.footer [class*="newsletter"] .button {
    min-height: 50px !important;
    border-radius: 12px !important;
  }

  footer.footer nav {
    gap: 24px !important;
  }

  footer.footer nav h2,
  footer.footer #brand-information_label::after {
    font-size: 11px !important;
    letter-spacing: 0.08em !important;
    margin-bottom: 10px !important;
  }

  footer.footer nav a {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  footer.footer .content-wrapper > div:last-child {
    margin-top: 24px !important;
    padding-top: 16px !important;
  }

  footer.footer .content-wrapper > div:last-child p,
  footer.footer .content-wrapper > div:last-child span,
  footer.footer .content-wrapper > div:last-child a {
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

  footer.footer select,
  footer.footer .localization-form select,
  footer.footer button[aria-haspopup="listbox"] {
    min-height: 48px !important;
    border-radius: 12px !important;
  }

  footer.footer img[src*="phonto.png"] {
    max-width: 180px !important;
    width: 100% !important;
    height: auto !important;
  }
}

/* ------------------------------
   FOOTER LOGO IMAGE — MAKE LARGER
------------------------------ */
footer.footer img[src*="phonto.png"] {
  max-width: 280px !important;
  width: 100% !important;
  height: auto !important;
}



/* =========================================================
   GLOBAL — REMOVE BREADCRUMBS
========================================================= */

[role="list"].truncate {
  display: none !important;
}

/* Solitaire — move this image crop upward */
.lux-scroll-scale img.faded-img{
  object-position: center 63% !important;
}

/* Founder image — push image upward */
#shopify-section-template--20146968985799__image_with_text_1
.relative.order-\[--image-order\].overflow-hidden .faded-img {
  object-position: center 23% !important;
}

/* =========================================================
   HERO STACK + HEADER — CLEAN FINAL
   - no image bleed above announcement bar
   - transparent header at top
   - hide on scroll down
   - filled reveal on scroll up
   - floating centered desktop logo
   - filled-state icon/logo color
========================================================= */


/* =========================================================
   1) STACK ORDER
========================================================= */
#shopify-section-sections--20146969936071__announcement-bar{
  position: relative !important;
  z-index: 3000 !important;
}

header.lux-header,
header.lux-header.sticky{
  z-index: 2500 !important;
}

#shopify-section-template--20146968985799__image_banner{
  position: relative !important;
  z-index: 1 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}


/* =========================================================
   2) HERO OFFSET BELOW HEADER STACK
   - keep structural spacing
   - use translate for visual nudge
========================================================= */
@media (min-width: 768px){
  #shopify-section-template--20146968985799__image_banner
  > .relative.overflow-hidden.color-scheme-6{
    margin-top: 86px !important;
    transform: translateY(3px);
    overflow: hidden !important;
    border-radius: 16px !important;
  }
}

@media (max-width: 767px){
  #shopify-section-template--20146968985799__image_banner
  > .relative.overflow-hidden.color-scheme-6{
    margin-top: 62px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }
}


/* =========================================================
   3) HEADER SHELL
========================================================= */
header.lux-header,
header.lux-header.sticky{
  position: fixed !important;
  top: 66px !important;
  left: 0 !important;
  right: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  overflow: visible !important;
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}


/* =========================================================
   4) HEADER MOTION
========================================================= */
/* Page load */
header.lux-header{
  opacity: 0;
  transform: translateY(-34px);
}

header.lux-header.lux-header-ready{
  opacity: 1;
  transform: translateY(0);
  transition:
    transform 1.18s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hidden on scroll down */
header.lux-header.is-hidden{
  transform: translateY(calc(-100% - 72px)) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition:
    transform 0.68s cubic-bezier(0.32, 0, 0.2, 1),
    opacity 0.34s cubic-bezier(0.32, 0, 0.2, 1) !important;
}

/* Reveal on scroll up */
header.lux-header.is-visible{
  transform: translateY(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transition:
    transform 0.76s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.46s cubic-bezier(0.16, 1, 0.3, 1) !important;
}


/* =========================================================
   5) HEADER BACKING LAYER
========================================================= */
header.lux-header::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -92px;
  height: 118px;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background: #F7F8F9;
  transition: opacity 0.42s ease;
}

header.lux-header.is-filled::before{
  opacity: 1;
}


/* =========================================================
   6) HEADER FRAME
========================================================= */
header.lux-header .content-wrapper{
  width: calc(100% - 64px) !important;
  max-width: none !important;
  margin: 0 auto !important;
  min-height: 84px !important;
  padding: 16px 28px !important;
  border-radius: 16px !important;
  position: relative !important;
  overflow: visible !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition:
    background-color 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    backdrop-filter 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    -webkit-backdrop-filter 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

/* At very top */
header.lux-header.is-top .content-wrapper{
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Filled revealed state — slightly deeper, still soft + luxe */
header.lux-header.is-filled .content-wrapper{
  background: rgba(202, 204, 207, 0.94) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  backdrop-filter: blur(8px) saturate(110%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(110%) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05) !important;
}



/* =========================================================
   7) DESKTOP FLOATING LOGO SYSTEM — FINAL
========================================================= */
@media (min-width: 768px){

  .lux-desktop-logo-wrap{
    position: fixed !important;
    top: 66px !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 2600 !important;
    height: 1px !important;
    pointer-events: none !important;
  }

  .lux-desktop-logo-inner{
    position: absolute !important;
    inset-inline: 0 !important;
    top: 22px !important;  
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: fit-content !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    opacity: 0;
    transform: translateY(-12px);
    will-change: transform, opacity;
    transition:
      transform 0.78s cubic-bezier(0.16, 1, 0.3, 1),
      opacity 0.48s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .lux-desktop-logo-wrap .heading{
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 5 !important;
  }

  .lux-desktop-logo-wrap .heading img,
  .lux-desktop-logo-wrap .heading svg{
    display: block !important;
    pointer-events: none !important;
  }

  .lux-desktop-logo-wrap.is-top .lux-desktop-logo-inner,
  .lux-desktop-logo-wrap.is-visible .lux-desktop-logo-inner,
  .lux-desktop-logo-wrap.is-filled .lux-desktop-logo-inner,
  .lux-desktop-logo-wrap.lux-header-ready .lux-desktop-logo-inner{
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  .lux-desktop-logo-wrap.is-hidden .lux-desktop-logo-inner{
    opacity: 0 !important;
    transform: translateY(-30px) !important;
    pointer-events: none !important;
  }
}


/* =========================================================
   HEADER COLOR STATES
   Top = white
   Filled / scrolled up = still white
========================================================= */
@media (min-width: 768px){

  /* TOP OF PAGE — keep everything white */
  header.lux-header.is-top .content-wrapper,
  header.lux-header.is-top .content-wrapper a,
  header.lux-header.is-top .content-wrapper button,
  header.lux-header.is-top .content-wrapper span,
  header.lux-header.is-top .content-wrapper p {
    color: #ffffff !important;
  }

  header.lux-header.is-top .content-wrapper svg,
  header.lux-header.is-top .content-wrapper svg path {
    fill: #ffffff !important;
    stroke: #ffffff !important;
  }

  /* OPEN STATES AT TOP — menu/cart/search text stays white */
  header.lux-header.is-top [x-cloak],
  header.lux-header.is-top [role="dialog"],
  header.lux-header.is-top .drawer,
  header.lux-header.is-top .popup,
  header.lux-header.is-top .menu,
  header.lux-header.is-top .search,
  header.lux-header.is-top .cart {
    color: #ffffff !important;
  }

  header.lux-header.is-top [role="dialog"] *,
  header.lux-header.is-top .drawer *,
  header.lux-header.is-top .popup *,
  header.lux-header.is-top .menu *,
  header.lux-header.is-top .search *,
  header.lux-header.is-top .cart * {
    color: #ffffff !important;
  }

  header.lux-header.is-top [role="dialog"] svg,
  header.lux-header.is-top [role="dialog"] svg path,
  header.lux-header.is-top .drawer svg,
  header.lux-header.is-top .drawer svg path,
  header.lux-header.is-top .popup svg,
  header.lux-header.is-top .popup svg path {
    fill: #ffffff !important;
    stroke: #ffffff !important;
  }

  /* SCROLLED / FILLED STATE — pink-beige */
  header.lux-header.is-filled .content-wrapper,
  header.lux-header.is-filled .content-wrapper a,
  header.lux-header.is-filled .content-wrapper button,
  header.lux-header.is-filled .content-wrapper span,
  header.lux-header.is-filled .content-wrapper p {
    color: #ffffff !important;
  }

  header.lux-header.is-filled .content-wrapper svg,
  header.lux-header.is-filled .content-wrapper svg path {
    fill: #ffffff !important;
    stroke: #ffffff !important;
  }
}

@media (min-width: 768px) {
  .lux-desktop-logo-wrap.is-top .heading,
  .lux-desktop-logo-wrap.is-top .heading span,
  .lux-desktop-logo-wrap.is-filled .heading,
  .lux-desktop-logo-wrap.is-filled .heading span {
    color: #ffffff !important;
  }

  .lux-desktop-logo-wrap.is-top .heading svg,
  .lux-desktop-logo-wrap.is-top .heading svg path,
  .lux-desktop-logo-wrap.is-filled .heading svg,
  .lux-desktop-logo-wrap.is-filled .heading svg path {
    fill: #ffffff !important;
    stroke: #ffffff !important;
  }

  .lux-desktop-logo-wrap.is-hidden {
    pointer-events: none !important;
  }

  .lux-desktop-logo-wrap.is-hidden .lux-desktop-logo-inner,
  .lux-desktop-logo-wrap.is-hidden .heading,
  .lux-desktop-logo-wrap.is-hidden .heading * {
    pointer-events: none !important;
  }

  .lux-desktop-logo-wrap.is-hidden .lux-desktop-logo-inner {
    opacity: 0 !important;
    transform: translateY(-34px) !important;
    visibility: hidden !important;
  }

  .lux-desktop-logo-wrap.is-hidden .heading {
    opacity: 0 !important;
    visibility: hidden !important;
  }

  .lux-desktop-logo-inner {
    transition:
      transform 0.82s cubic-bezier(0.16, 1, 0.3, 1),
      opacity 0.52s cubic-bezier(0.16, 1, 0.3, 1),
      visibility 0s linear 0.52s !important;
  }

  .lux-desktop-logo-wrap.is-top .lux-desktop-logo-inner,
  .lux-desktop-logo-wrap.is-visible .lux-desktop-logo-inner,
  .lux-desktop-logo-wrap.is-filled .lux-desktop-logo-inner {
    visibility: visible !important;
    transition-delay: 0s !important;
  }
}

/* =========================================================
   MOBILE HEADER COLOR STATES
   Top = white
   Filled / scrolled = white
   Scoped to visible mobile header controls only
========================================================= */
@media (max-width: 767px) {

  /* visible mobile header shell */
  header.lux-header.is-top .content-wrapper,
  header.lux-header.is-filled .content-wrapper {
    color: #ffffff !important;
  }

  /* top-row clickable header controls only */
  header.lux-header.is-top .content-wrapper > div,
  header.lux-header.is-top .content-wrapper > div a,
  header.lux-header.is-top .content-wrapper > div button,
  header.lux-header.is-top .content-wrapper > div span,
  header.lux-header.is-filled .content-wrapper > div,
  header.lux-header.is-filled .content-wrapper > div a,
  header.lux-header.is-filled .content-wrapper > div button,
  header.lux-header.is-filled .content-wrapper > div span {
    color: #ffffff !important;
  }

  /* icons */
  header.lux-header.is-top .content-wrapper svg,
  header.lux-header.is-top .content-wrapper svg path,
  header.lux-header.is-filled .content-wrapper svg,
  header.lux-header.is-filled .content-wrapper svg path {
    fill: #ffffff !important;
    stroke: #ffffff !important;
  }

  /* mobile centered logo image */
  header.lux-header.is-top .col-start-3 img,
  header.lux-header.is-filled .col-start-3 img {
    opacity: 1 !important;
  }
}

/* =========================================================
   MOBILE HEADER — SPECIAL PAGES TRIGGERS = #808080
   Applies to:
   - Contact page
   - Product pages
   - Cart page
   - Policy pages
========================================================= */
@media (max-width: 767px) {

  /* ---------- page detection vars ---------- */
  body:has(#shopify-section-template--20146969280711__main),
  body.template-product,
  body:has(.button.button--ghost-primary.animate-on-transition[style*="display: none"]),
  body.template-cart,
  body:has(main form[action*="/cart"]),
  body:has(#shopify-section-template--20146968658119__cart-items),
  body.template-policy,
  body:has(.shopify-policy__container) {
    --lux-top-trigger-color-mobile: #808080;
    --lux-top-logo-filter-mobile: brightness(0) saturate(0%) opacity(0.62);
  }

  /* ---------- actual mobile trigger buttons / links ---------- */
  body:has(#shopify-section-template--20146969280711__main) header.lux-header #menu-desktop-initial .button,
  body:has(#shopify-section-template--20146969280711__main) header.lux-header #cart-desktop-initial .button,
  body:has(#shopify-section-template--20146969280711__main) header.lux-header #menu-desktop-initial a,
  body:has(#shopify-section-template--20146969280711__main) header.lux-header #cart-desktop-initial a,

  body.template-product header.lux-header #menu-desktop-initial .button,
  body.template-product header.lux-header #cart-desktop-initial .button,
  body.template-product header.lux-header #menu-desktop-initial a,
  body.template-product header.lux-header #cart-desktop-initial a,

  body:has(.button.button--ghost-primary.animate-on-transition[style*="display: none"]) header.lux-header #menu-desktop-initial .button,
  body:has(.button.button--ghost-primary.animate-on-transition[style*="display: none"]) header.lux-header #cart-desktop-initial .button,
  body:has(.button.button--ghost-primary.animate-on-transition[style*="display: none"]) header.lux-header #menu-desktop-initial a,
  body:has(.button.button--ghost-primary.animate-on-transition[style*="display: none"]) header.lux-header #cart-desktop-initial a,

  body.template-cart header.lux-header #menu-desktop-initial .button,
  body.template-cart header.lux-header #cart-desktop-initial .button,
  body.template-cart header.lux-header #menu-desktop-initial a,
  body.template-cart header.lux-header #cart-desktop-initial a,

  body:has(main form[action*="/cart"]) header.lux-header #menu-desktop-initial .button,
  body:has(main form[action*="/cart"]) header.lux-header #cart-desktop-initial .button,
  body:has(main form[action*="/cart"]) header.lux-header #menu-desktop-initial a,
  body:has(main form[action*="/cart"]) header.lux-header #cart-desktop-initial a,

  body:has(#shopify-section-template--20146968658119__cart-items) header.lux-header #menu-desktop-initial .button,
  body:has(#shopify-section-template--20146968658119__cart-items) header.lux-header #cart-desktop-initial .button,
  body:has(#shopify-section-template--20146968658119__cart-items) header.lux-header #menu-desktop-initial a,
  body:has(#shopify-section-template--20146968658119__cart-items) header.lux-header #cart-desktop-initial a,

  body.template-policy header.lux-header #menu-desktop-initial .button,
  body.template-policy header.lux-header #cart-desktop-initial .button,
  body.template-policy header.lux-header #menu-desktop-initial a,
  body.template-policy header.lux-header #cart-desktop-initial a,

  body:has(.shopify-policy__container) header.lux-header #menu-desktop-initial .button,
  body:has(.shopify-policy__container) header.lux-header #cart-desktop-initial .button,
  body:has(.shopify-policy__container) header.lux-header #menu-desktop-initial a,
  body:has(.shopify-policy__container) header.lux-header #cart-desktop-initial a {
    color: var(--lux-top-trigger-color-mobile) !important;
    background: transparent !important;
    border-color: transparent !important;
  }

  /* ---------- trigger shells ---------- */
  body:has(#shopify-section-template--20146969280711__main) header.lux-header #menu-desktop-initial .contrast-border,
  body:has(#shopify-section-template--20146969280711__main) header.lux-header #cart-desktop-initial .contrast-border,

  body.template-product header.lux-header #menu-desktop-initial .contrast-border,
  body.template-product header.lux-header #cart-desktop-initial .contrast-border,

  body:has(.button.button--ghost-primary.animate-on-transition[style*="display: none"]) header.lux-header #menu-desktop-initial .contrast-border,
  body:has(.button.button--ghost-primary.animate-on-transition[style*="display: none"]) header.lux-header #cart-desktop-initial .contrast-border,

  body.template-cart header.lux-header #menu-desktop-initial .contrast-border,
  body.template-cart header.lux-header #cart-desktop-initial .contrast-border,

  body:has(main form[action*="/cart"]) header.lux-header #menu-desktop-initial .contrast-border,
  body:has(main form[action*="/cart"]) header.lux-header #cart-desktop-initial .contrast-border,

  body:has(#shopify-section-template--20146968658119__cart-items) header.lux-header #menu-desktop-initial .contrast-border,
  body:has(#shopify-section-template--20146968658119__cart-items) header.lux-header #cart-desktop-initial .contrast-border,

  body.template-policy header.lux-header #menu-desktop-initial .contrast-border,
  body.template-policy header.lux-header #cart-desktop-initial .contrast-border,

  body:has(.shopify-policy__container) header.lux-header #menu-desktop-initial .contrast-border,
  body:has(.shopify-policy__container) header.lux-header #cart-desktop-initial .contrast-border {
    color: var(--lux-top-trigger-color-mobile) !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  /* ---------- icons ---------- */
  body:has(#shopify-section-template--20146969280711__main) header.lux-header #menu-desktop-initial svg,
  body:has(#shopify-section-template--20146969280711__main) header.lux-header #menu-desktop-initial svg path,
  body:has(#shopify-section-template--20146969280711__main) header.lux-header #cart-desktop-initial svg,
  body:has(#shopify-section-template--20146969280711__main) header.lux-header #cart-desktop-initial svg path,

  body.template-product header.lux-header #menu-desktop-initial svg,
  body.template-product header.lux-header #menu-desktop-initial svg path,
  body.template-product header.lux-header #cart-desktop-initial svg,
  body.template-product header.lux-header #cart-desktop-initial svg path,

  body:has(.button.button--ghost-primary.animate-on-transition[style*="display: none"]) header.lux-header #menu-desktop-initial svg,
  body:has(.button.button--ghost-primary.animate-on-transition[style*="display: none"]) header.lux-header #menu-desktop-initial svg path,
  body:has(.button.button--ghost-primary.animate-on-transition[style*="display: none"]) header.lux-header #cart-desktop-initial svg,
  body:has(.button.button--ghost-primary.animate-on-transition[style*="display: none"]) header.lux-header #cart-desktop-initial svg path,

  body.template-cart header.lux-header #menu-desktop-initial svg,
  body.template-cart header.lux-header #menu-desktop-initial svg path,
  body.template-cart header.lux-header #cart-desktop-initial svg,
  body.template-cart header.lux-header #cart-desktop-initial svg path,

  body:has(main form[action*="/cart"]) header.lux-header #menu-desktop-initial svg,
  body:has(main form[action*="/cart"]) header.lux-header #menu-desktop-initial svg path,
  body:has(main form[action*="/cart"]) header.lux-header #cart-desktop-initial svg,
  body:has(main form[action*="/cart"]) header.lux-header #cart-desktop-initial svg path,

  body:has(#shopify-section-template--20146968658119__cart-items) header.lux-header #menu-desktop-initial svg,
  body:has(#shopify-section-template--20146968658119__cart-items) header.lux-header #menu-desktop-initial svg path,
  body:has(#shopify-section-template--20146968658119__cart-items) header.lux-header #cart-desktop-initial svg,
  body:has(#shopify-section-template--20146968658119__cart-items) header.lux-header #cart-desktop-initial svg path,

  body.template-policy header.lux-header #menu-desktop-initial svg,
  body.template-policy header.lux-header #menu-desktop-initial svg path,
  body.template-policy header.lux-header #cart-desktop-initial svg,
  body.template-policy header.lux-header #cart-desktop-initial svg path,

  body:has(.shopify-policy__container) header.lux-header #menu-desktop-initial svg,
  body:has(.shopify-policy__container) header.lux-header #menu-desktop-initial svg path,
  body:has(.shopify-policy__container) header.lux-header #cart-desktop-initial svg,
  body:has(.shopify-policy__container) header.lux-header #cart-desktop-initial svg path {
    fill: var(--lux-top-trigger-color-mobile) !important;
    stroke: var(--lux-top-trigger-color-mobile) !important;
  }

  /* ---------- centered mobile logo ---------- */
  body:has(#shopify-section-template--20146969280711__main) header.lux-header .col-start-3 img,
  body.template-product header.lux-header .col-start-3 img,
  body:has(.button.button--ghost-primary.animate-on-transition[style*="display: none"]) header.lux-header .col-start-3 img,
  body.template-cart header.lux-header .col-start-3 img,
  body:has(main form[action*="/cart"]) header.lux-header .col-start-3 img,
  body:has(#shopify-section-template--20146968658119__cart-items) header.lux-header .col-start-3 img,
  body.template-policy header.lux-header .col-start-3 img,
  body:has(.shopify-policy__container) header.lux-header .col-start-3 img {
    filter: var(--lux-top-logo-filter-mobile) !important;
    opacity: 1 !important;
  }
}



/* =========================================================
   DESKTOP HEADER — CLOSED TOP-STATE TRIGGERS = #808080
   Applies to:
   - Contact page
   - Product pages
   - Cart page
   - Policy pages
   - Learn page

   Opened menu/search/cart panels keep their own styling
========================================================= */
@media (min-width: 768px) {

  /* ---------- page detection ---------- */
  body:has(#shopify-section-template--20146969280711__main),
  body:has(.button.button--ghost-primary.animate-on-transition[style*="display: none"]),
  body.template-cart,
  body:has(main form[action="/cart"]),
  body:has(.shopify-policy__container),
  body:has(a[href="/pages/learn"][aria-current="page"]) {
    --lux-top-trigger-color: #808080;
    --lux-top-logo-filter: brightness(0) saturate(0%) opacity(0.62);
  }

  /* ---------- closed top trigger columns only ---------- */
  body:has(#shopify-section-template--20146969280711__main) header.lux-header.is-top .content-wrapper > .transition-all:first-child,
  body:has(#shopify-section-template--20146969280711__main) header.lux-header.is-top .content-wrapper > .contents.md\:flex,

  body:has(.button.button--ghost-primary.animate-on-transition[style*="display: none"]) header.lux-header.is-top .content-wrapper > .transition-all:first-child,
  body:has(.button.button--ghost-primary.animate-on-transition[style*="display: none"]) header.lux-header.is-top .content-wrapper > .contents.md\:flex,

  body.template-cart header.lux-header.is-top .content-wrapper > .transition-all:first-child,
  body.template-cart header.lux-header.is-top .content-wrapper > .contents.md\:flex,

  body:has(main form[action="/cart"]) header.lux-header.is-top .content-wrapper > .transition-all:first-child,
  body:has(main form[action="/cart"]) header.lux-header.is-top .content-wrapper > .contents.md\:flex,

  body:has(.shopify-policy__container) header.lux-header.is-top .content-wrapper > .transition-all:first-child,
  body:has(.shopify-policy__container) header.lux-header.is-top .content-wrapper > .contents.md\:flex,

  body:has(a[href="/pages/learn"][aria-current="page"]) header.lux-header.is-top .content-wrapper > .transition-all:first-child,
  body:has(a[href="/pages/learn"][aria-current="page"]) header.lux-header.is-top .content-wrapper > .contents.md\:flex {
    color: var(--lux-top-trigger-color) !important;
  }

  /* text elements inside those trigger columns */
  body:has(#shopify-section-template--20146969280711__main) header.lux-header.is-top .content-wrapper > .transition-all:first-child :is(a, button, span),
  body:has(#shopify-section-template--20146969280711__main) header.lux-header.is-top .content-wrapper > .contents.md\:flex :is(a, button, span),

  body:has(.button.button--ghost-primary.animate-on-transition[style*="display: none"]) header.lux-header.is-top .content-wrapper > .transition-all:first-child :is(a, button, span),
  body:has(.button.button--ghost-primary.animate-on-transition[style*="display: none"]) header.lux-header.is-top .content-wrapper > .contents.md\:flex :is(a, button, span),

  body.template-cart header.lux-header.is-top .content-wrapper > .transition-all:first-child :is(a, button, span),
  body.template-cart header.lux-header.is-top .content-wrapper > .contents.md\:flex :is(a, button, span),

  body:has(main form[action="/cart"]) header.lux-header.is-top .content-wrapper > .transition-all:first-child :is(a, button, span),
  body:has(main form[action="/cart"]) header.lux-header.is-top .content-wrapper > .contents.md\:flex :is(a, button, span),

  body:has(.shopify-policy__container) header.lux-header.is-top .content-wrapper > .transition-all:first-child :is(a, button, span),
  body:has(.shopify-policy__container) header.lux-header.is-top .content-wrapper > .contents.md\:flex :is(a, button, span),

  body:has(a[href="/pages/learn"][aria-current="page"]) header.lux-header.is-top .content-wrapper > .transition-all:first-child :is(a, button, span),
  body:has(a[href="/pages/learn"][aria-current="page"]) header.lux-header.is-top .content-wrapper > .contents.md\:flex :is(a, button, span) {
    color: var(--lux-top-trigger-color) !important;
  }

  /* svg icons inside those trigger columns */
  body:has(#shopify-section-template--20146969280711__main) header.lux-header.is-top .content-wrapper > .transition-all:first-child :is(svg, svg path),
  body:has(#shopify-section-template--20146969280711__main) header.lux-header.is-top .content-wrapper > .contents.md\:flex :is(svg, svg path),

  body:has(.button.button--ghost-primary.animate-on-transition[style*="display: none"]) header.lux-header.is-top .content-wrapper > .transition-all:first-child :is(svg, svg path),
  body:has(.button.button--ghost-primary.animate-on-transition[style*="display: none"]) header.lux-header.is-top .content-wrapper > .contents.md\:flex :is(svg, svg path),

  body.template-cart header.lux-header.is-top .content-wrapper > .transition-all:first-child :is(svg, svg path),
  body.template-cart header.lux-header.is-top .content-wrapper > .contents.md\:flex :is(svg, svg path),

  body:has(main form[action="/cart"]) header.lux-header.is-top .content-wrapper > .transition-all:first-child :is(svg, svg path),
  body:has(main form[action="/cart"]) header.lux-header.is-top .content-wrapper > .contents.md\:flex :is(svg, svg path),

  body:has(.shopify-policy__container) header.lux-header.is-top .content-wrapper > .transition-all:first-child :is(svg, svg path),
  body:has(.shopify-policy__container) header.lux-header.is-top .content-wrapper > .contents.md\:flex :is(svg, svg path),

  body:has(a[href="/pages/learn"][aria-current="page"]) header.lux-header.is-top .content-wrapper > .transition-all:first-child :is(svg, svg path),
  body:has(a[href="/pages/learn"][aria-current="page"]) header.lux-header.is-top .content-wrapper > .contents.md\:flex :is(svg, svg path) {
    fill: var(--lux-top-trigger-color) !important;
    stroke: var(--lux-top-trigger-color) !important;
  }

  /* ---------- floating desktop logo ---------- */
  body:has(#shopify-section-template--20146969280711__main) .lux-desktop-logo-wrap.is-top .lux-desktop-logo-inner .heading img,
  body:has(.button.button--ghost-primary.animate-on-transition[style*="display: none"]) .lux-desktop-logo-wrap.is-top .lux-desktop-logo-inner .heading img,
  body.template-cart .lux-desktop-logo-wrap.is-top .lux-desktop-logo-inner .heading img,
  body:has(main form[action="/cart"]) .lux-desktop-logo-wrap.is-top .lux-desktop-logo-inner .heading img,
  body:has(.shopify-policy__container) .lux-desktop-logo-wrap.is-top .lux-desktop-logo-inner .heading img,
  body:has(a[href="/pages/learn"][aria-current="page"]) .lux-desktop-logo-wrap.is-top .lux-desktop-logo-inner .heading img {
    filter: var(--lux-top-logo-filter) !important;
  }
}



  /* =========================================================
     CONTACT PAGE — OPEN DESKTOP MENU SHOULD STAY WHITE
  ========================================================= */
  body:has(#shopify-section-template--20146969280711__main) #menu-desktop,
  body:has(#shopify-section-template--20146969280711__main) #menu-desktop * {
    color: #ffffff !important;
  }

  body:has(#shopify-section-template--20146969280711__main) #menu-desktop :is(svg, svg path) {
    fill: #ffffff !important;
    stroke: #ffffff !important;
  }

  body:has(#shopify-section-template--20146969280711__main) #menu-desktop .button,
  body:has(#shopify-section-template--20146969280711__main) #menu-desktop .button span {
    color: inherit !important;
  }
}




/* =========================================================
   SOLITAIRE — KEEP CLICK-OUTSIDE, REMOVE DIM ONLY
========================================================= */
.popup__overlay,
.popup__overlay--focused,
.popup__overlay--full-screen {
  background: transparent !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* =========================================================
   SHOPPING CART POPUP LABEL — WHITE AT TOP, PINK WHEN FILLED
========================================================= */
@media (min-width: 768px) {

  /* TOP OF PAGE */
  header.lux-header.is-top #popup-label,
  header.lux-header.is-top #popup-label span,
  header.lux-header.is-top #popup-label svg,
  header.lux-header.is-top #popup-label svg path {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
  }

  /* SCROLLED / REVEALED */
  header.lux-header.is-filled #popup-label,
  header.lux-header.is-filled #popup-label span,
  header.lux-header.is-filled #popup-label svg,
  header.lux-header.is-filled #popup-label svg path,
  header.lux-header.is-visible #popup-label,
  header.lux-header.is-visible #popup-label span,
  header.lux-header.is-visible #popup-label svg,
  header.lux-header.is-visible #popup-label svg path {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
  }
}

/* =========================================================
   MENU OPEN AT TOP — LOGIN / SIGNUP BUTTON STAYS WHITE
========================================================= */
@media (min-width: 768px){

  header.lux-header.is-top .menu .button.button--filled-primary,
  header.lux-header.is-top #menu-desktop .button.button--filled-primary,
  header.lux-header.is-top .resizable--menu .button.button--filled-primary{
    color: #ffffff !important;
    border-color: #ffffff !important;
    background: transparent !important;
  }

  header.lux-header.is-top .menu .button.button--filled-primary span,
  header.lux-header.is-top #menu-desktop .button.button--filled-primary span,
  header.lux-header.is-top .resizable--menu .button.button--filled-primary span{
    color: #ffffff !important;
  }

  header.lux-header.is-top .menu .button.button--filled-primary svg,
  header.lux-header.is-top .menu .button.button--filled-primary svg path,
  header.lux-header.is-top #menu-desktop .button.button--filled-primary svg,
  header.lux-header.is-top #menu-desktop .button.button--filled-primary svg path,
  header.lux-header.is-top .resizable--menu .button.button--filled-primary svg,
  header.lux-header.is-top .resizable--menu .button.button--filled-primary svg path{
    fill: #ffffff !important;
    stroke: #ffffff !important;
  }

  /* keep fill animation white too, if your button uses ::after */
  header.lux-header.is-top .menu .button.button--filled-primary::after,
  header.lux-header.is-top #menu-desktop .button.button--filled-primary::after,
  header.lux-header.is-top .resizable--menu .button.button--filled-primary::after{
    background: #ffffff !important;
  }
}

@media (hover: hover) and (min-width: 768px){

  header.lux-header.is-top .menu .button.button--filled-primary:hover,
  header.lux-header.is-top #menu-desktop .button.button--filled-primary:hover,
  header.lux-header.is-top .resizable--menu .button.button--filled-primary:hover{
    color: #808080 !important;
    border-color: #ffffff !important;
  }

  header.lux-header.is-top .menu .button.button--filled-primary:hover span,
  header.lux-header.is-top #menu-desktop .button.button--filled-primary:hover span,
  header.lux-header.is-top .resizable--menu .button.button--filled-primary:hover span{
    color: #808080 !important;
  }

  header.lux-header.is-top .menu .button.button--filled-primary:hover svg,
  header.lux-header.is-top .menu .button.button--filled-primary:hover svg path,
  header.lux-header.is-top #menu-desktop .button.button--filled-primary:hover svg,
  header.lux-header.is-top #menu-desktop .button.button--filled-primary:hover svg path,
  header.lux-header.is-top .resizable--menu .button.button--filled-primary:hover svg,
  header.lux-header.is-top .resizable--menu .button.button--filled-primary:hover svg path{
    fill: #808080 !important;
    stroke: #808080 !important;
  }
}

@media (min-width: 768px) and (hover: hover){

  header.lux-header.is-filled .resizable--menu .button.button--filled-primary:hover,
  header.lux-header.is-filled #menu-desktop .button.button--filled-primary:hover,
  header.lux-header.is-filled .resizable--menu .button.button--filled-primary:hover span,
  header.lux-header.is-filled #menu-desktop .button.button--filled-primary:hover span{
    color: #ffffff !important;
  }

  header.lux-header.is-filled .resizable--menu .button.button--filled-primary:hover svg,
  header.lux-header.is-filled .resizable--menu .button.button--filled-primary:hover svg path,
  header.lux-header.is-filled #menu-desktop .button.button--filled-primary:hover svg,
  header.lux-header.is-filled #menu-desktop .button.button--filled-primary:hover svg path{
    fill: #ffffff !important;
    stroke: #ffffff !important;
  }
}

/* =========================================================
   SPECIAL PAGES — KEEP HEADER TRIGGERS / LOGO = #808080
   INCLUDING DURING HIDE ANIMATION
========================================================= */

/* shared page vars */
body:has(#shopify-section-template--20146969280711__main),
body.template-product,
body:has(form[action*="/cart/add"]),
body.template-cart,
body:has(main form[action="/cart"]),
body.template-policy,
body:has(.shopify-policy__container) {
  --lux-special-trigger-color: #808080;
  --lux-special-logo-filter: brightness(0) saturate(0%) opacity(0.62);
}

/* =========================================================
   DESKTOP + MOBILE — include .is-hidden
========================================================= */
body:has(#shopify-section-template--20146969280711__main) header.lux-header:is(.is-top, .is-visible, .is-filled, .is-hidden) .content-wrapper > .transition-all:first-child,
body:has(#shopify-section-template--20146969280711__main) header.lux-header:is(.is-top, .is-visible, .is-filled, .is-hidden) .content-wrapper > .contents,

body.template-product header.lux-header:is(.is-top, .is-visible, .is-filled, .is-hidden) .content-wrapper > .transition-all:first-child,
body.template-product header.lux-header:is(.is-top, .is-visible, .is-filled, .is-hidden) .content-wrapper > .contents,

body:has(form[action*="/cart/add"]) header.lux-header:is(.is-top, .is-visible, .is-filled, .is-hidden) .content-wrapper > .transition-all:first-child,
body:has(form[action*="/cart/add"]) header.lux-header:is(.is-top, .is-visible, .is-filled, .is-hidden) .content-wrapper > .contents,

body.template-cart header.lux-header:is(.is-top, .is-visible, .is-filled, .is-hidden) .content-wrapper > .transition-all:first-child,
body.template-cart header.lux-header:is(.is-top, .is-visible, .is-filled, .is-hidden) .content-wrapper > .contents,

body:has(main form[action="/cart"]) header.lux-header:is(.is-top, .is-visible, .is-filled, .is-hidden) .content-wrapper > .transition-all:first-child,
body:has(main form[action="/cart"]) header.lux-header:is(.is-top, .is-visible, .is-filled, .is-hidden) .content-wrapper > .contents,

body.template-policy header.lux-header:is(.is-top, .is-visible, .is-filled, .is-hidden) .content-wrapper > .transition-all:first-child,
body.template-policy header.lux-header:is(.is-top, .is-visible, .is-filled, .is-hidden) .content-wrapper > .contents,

body:has(.shopify-policy__container) header.lux-header:is(.is-top, .is-visible, .is-filled, .is-hidden) .content-wrapper > .transition-all:first-child,
body:has(.shopify-policy__container) header.lux-header:is(.is-top, .is-visible, .is-filled, .is-hidden) .content-wrapper > .contents {
  color: var(--lux-special-trigger-color) !important;
}

body:has(#shopify-section-template--20146969280711__main) header.lux-header:is(.is-top, .is-visible, .is-filled, .is-hidden) .content-wrapper > .transition-all:first-child :is(a, button, span, p),
body:has(#shopify-section-template--20146969280711__main) header.lux-header:is(.is-top, .is-visible, .is-filled, .is-hidden) .content-wrapper > .contents :is(a, button, span, p),

body.template-product header.lux-header:is(.is-top, .is-visible, .is-filled, .is-hidden) .content-wrapper > .transition-all:first-child :is(a, button, span, p),
body.template-product header.lux-header:is(.is-top, .is-visible, .is-filled, .is-hidden) .content-wrapper > .contents :is(a, button, span, p),

body:has(form[action*="/cart/add"]) header.lux-header:is(.is-top, .is-visible, .is-filled, .is-hidden) .content-wrapper > .transition-all:first-child :is(a, button, span, p),
body:has(form[action*="/cart/add"]) header.lux-header:is(.is-top, .is-visible, .is-filled, .is-hidden) .content-wrapper > .contents :is(a, button, span, p),

body.template-cart header.lux-header:is(.is-top, .is-visible, .is-filled, .is-hidden) .content-wrapper > .transition-all:first-child :is(a, button, span, p),
body.template-cart header.lux-header:is(.is-top, .is-visible, .is-filled, .is-hidden) .content-wrapper > .contents :is(a, button, span, p),

body:has(main form[action="/cart"]) header.lux-header:is(.is-top, .is-visible, .is-filled, .is-hidden) .content-wrapper > .transition-all:first-child :is(a, button, span, p),
body:has(main form[action="/cart"]) header.lux-header:is(.is-top, .is-visible, .is-filled, .is-hidden) .content-wrapper > .contents :is(a, button, span, p),

body.template-policy header.lux-header:is(.is-top, .is-visible, .is-filled, .is-hidden) .content-wrapper > .transition-all:first-child :is(a, button, span, p),
body.template-policy header.lux-header:is(.is-top, .is-visible, .is-filled, .is-hidden) .content-wrapper > .contents :is(a, button, span, p),

body:has(.shopify-policy__container) header.lux-header:is(.is-top, .is-visible, .is-filled, .is-hidden) .content-wrapper > .transition-all:first-child :is(a, button, span, p),
body:has(.shopify-policy__container) header.lux-header:is(.is-top, .is-visible, .is-filled, .is-hidden) .content-wrapper > .contents :is(a, button, span, p) {
  color: var(--lux-special-trigger-color) !important;
}

body:has(#shopify-section-template--20146969280711__main) header.lux-header:is(.is-top, .is-visible, .is-filled, .is-hidden) .content-wrapper > .transition-all:first-child :is(svg, svg path),
body:has(#shopify-section-template--20146969280711__main) header.lux-header:is(.is-top, .is-visible, .is-filled, .is-hidden) .content-wrapper > .contents :is(svg, svg path),

body.template-product header.lux-header:is(.is-top, .is-visible, .is-filled, .is-hidden) .content-wrapper > .transition-all:first-child :is(svg, svg path),
body.template-product header.lux-header:is(.is-top, .is-visible, .is-filled, .is-hidden) .content-wrapper > .contents :is(svg, svg path),

body:has(form[action*="/cart/add"]) header.lux-header:is(.is-top, .is-visible, .is-filled, .is-hidden) .content-wrapper > .transition-all:first-child :is(svg, svg path),
body:has(form[action*="/cart/add"]) header.lux-header:is(.is-top, .is-visible, .is-filled, .is-hidden) .content-wrapper > .contents :is(svg, svg path),

body.template-cart header.lux-header:is(.is-top, .is-visible, .is-filled, .is-hidden) .content-wrapper > .transition-all:first-child :is(svg, svg path),
body.template-cart header.lux-header:is(.is-top, .is-visible, .is-filled, .is-hidden) .content-wrapper > .contents :is(svg, svg path),

body:has(main form[action="/cart"]) header.lux-header:is(.is-top, .is-visible, .is-filled, .is-hidden) .content-wrapper > .transition-all:first-child :is(svg, svg path),
body:has(main form[action="/cart"]) header.lux-header:is(.is-top, .is-visible, .is-filled, .is-hidden) .content-wrapper > .contents :is(svg, svg path),

body.template-policy header.lux-header:is(.is-top, .is-visible, .is-filled, .is-hidden) .content-wrapper > .transition-all:first-child :is(svg, svg path),
body.template-policy header.lux-header:is(.is-top, .is-visible, .is-filled, .is-hidden) .content-wrapper > .contents :is(svg, svg path),

body:has(.shopify-policy__container) header.lux-header:is(.is-top, .is-visible, .is-filled, .is-hidden) .content-wrapper > .transition-all:first-child :is(svg, svg path),
body:has(.shopify-policy__container) header.lux-header:is(.is-top, .is-visible, .is-filled, .is-hidden) .content-wrapper > .contents :is(svg, svg path) {
  fill: var(--lux-special-trigger-color) !important;
  stroke: var(--lux-special-trigger-color) !important;
}

/* desktop floating logo */
@media (min-width: 768px) {
  body:has(#shopify-section-template--20146969280711__main) .lux-desktop-logo-wrap:is(.is-top, .is-visible, .is-filled, .is-hidden) .lux-desktop-logo-inner .heading img,
  body.template-product .lux-desktop-logo-wrap:is(.is-top, .is-visible, .is-filled, .is-hidden) .lux-desktop-logo-inner .heading img,
  body:has(form[action*="/cart/add"]) .lux-desktop-logo-wrap:is(.is-top, .is-visible, .is-filled, .is-hidden) .lux-desktop-logo-inner .heading img,
  body.template-cart .lux-desktop-logo-wrap:is(.is-top, .is-visible, .is-filled, .is-hidden) .lux-desktop-logo-inner .heading img,
  body:has(main form[action="/cart"]) .lux-desktop-logo-wrap:is(.is-top, .is-visible, .is-filled, .is-hidden) .lux-desktop-logo-inner .heading img,
  body.template-policy .lux-desktop-logo-wrap:is(.is-top, .is-visible, .is-filled, .is-hidden) .lux-desktop-logo-inner .heading img,
  body:has(.shopify-policy__container) .lux-desktop-logo-wrap:is(.is-top, .is-visible, .is-filled, .is-hidden) .lux-desktop-logo-inner .heading img {
    filter: var(--lux-special-logo-filter) !important;
  }
}

/* mobile centered logo */
@media (max-width: 767px) {
  body:has(#shopify-section-template--20146969280711__main) header.lux-header:is(.is-top, .is-visible, .is-filled, .is-hidden) .col-start-3 img,
  body.template-product header.lux-header:is(.is-top, .is-visible, .is-filled, .is-hidden) .col-start-3 img,
  body:has(form[action*="/cart/add"]) header.lux-header:is(.is-top, .is-visible, .is-filled, .is-hidden) .col-start-3 img,
  body.template-cart header.lux-header:is(.is-top, .is-visible, .is-filled, .is-hidden) .col-start-3 img,
  body:has(main form[action="/cart"]) header.lux-header:is(.is-top, .is-visible, .is-filled, .is-hidden) .col-start-3 img,
  body.template-policy header.lux-header:is(.is-top, .is-visible, .is-filled, .is-hidden) .col-start-3 img,
  body:has(.shopify-policy__container) header.lux-header:is(.is-top, .is-visible, .is-filled, .is-hidden) .col-start-3 img {
    filter: var(--lux-special-logo-filter) !important;
  }
}



/* =========================================================
   MOBILE MENU OPEN AT TOP — MATCH DESKTOP OVERLAY STYLE
   - soft translucent panel
   - white menu text
   - white login/signup button
========================================================= */
@media (max-width: 767px) {

  /* main mobile menu panel */
  header.lux-header.is-top #menu nav[aria-label="Main menu"] {
    background: rgba(191, 191, 191, 0.78) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: none !important;
  }

  /* search area should blend in */
  header.lux-header.is-top #menu form[role="search"],
  header.lux-header.is-top #menu .menu__wrapper,
  header.lux-header.is-top #menu .menu__level,
  header.lux-header.is-top #menu .w-full.bg-bg-500.px-4.pb-2 {
    background: transparent !important;
  }

  /* menu heading */
  header.lux-header.is-top #menu .menu__heading,
  header.lux-header.is-top #menu #popup-label,
  header.lux-header.is-top #menu h2 {
    color: #ffffff !important;
  }

  /* menu links */
  header.lux-header.is-top #menu .menu__links a,
  header.lux-header.is-top #menu .menu__links a .link {
    color: #ffffff !important;
  }

  /* close icon / top icons */
  header.lux-header.is-top #menu button,
  header.lux-header.is-top #menu button svg,
  header.lux-header.is-top #menu button svg path {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
  }

  /* search input */
  header.lux-header.is-top #menu input[type="search"] {
    background: transparent !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.24) !important;
    box-shadow: none !important;
  }

  header.lux-header.is-top #menu input[type="search"]::placeholder {
    color: rgba(255, 255, 255, 0.9) !important;
  }

  /* search icon */
  header.lux-header.is-top #menu form[role="search"] svg,
  header.lux-header.is-top #menu form[role="search"] svg path {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
  }

  /* divider softer like desktop */
  header.lux-header.is-top #menu .divider {
    border-color: rgba(255, 255, 255, 0.16) !important;
    opacity: 1 !important;
  }

  /* login/signup button */
  header.lux-header.is-top #menu .button.button--filled-primary {
    color: #ffffff !important;
    border-color: #ffffff !important;
    background: transparent !important;
  }

  header.lux-header.is-top #menu .button.button--filled-primary,
  header.lux-header.is-top #menu .button.button--filled-primary span {
    color: #ffffff !important;
  }

  header.lux-header.is-top #menu .button.button--filled-primary svg,
  header.lux-header.is-top #menu .button.button--filled-primary svg path {
    fill: #ffffff !important;
    stroke: #ffffff !important;
  }

  header.lux-header.is-top #menu .button.button--filled-primary::after {
    background: #ffffff !important;
  }
}

@media (max-width: 767px) and (hover: hover) {
  header.lux-header.is-top #menu .button.button--filled-primary:hover,
  header.lux-header.is-top #menu .button.button--filled-primary:hover span {
    color: #808080 !important;
  }

  header.lux-header.is-top #menu .button.button--filled-primary:hover svg,
  header.lux-header.is-top #menu .button.button--filled-primary:hover svg path {
    fill: #808080 !important;
    stroke: #808080 !important;
  }
}

/* =========================================================
   ABOUT HERO — OFFSET BELOW HEADER STACK
   - keep structural spacing
   - use translate for visual nudge
========================================================= */

#shopify-section-template--20146969379015__image_banner_bmEPWM{
  position: relative !important;
  z-index: 1 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

@media (min-width: 768px){
  #shopify-section-template--20146969379015__image_banner_bmEPWM
  > .relative.overflow-hidden{
    margin-top: -64px !important;
    overflow: hidden !important;
  }
}

/* =========================================================
   ABOUT HERO — REFINED SHORTER HEIGHT
========================================================= */
@media (min-width: 768px){
  #shopify-section-template--20146969379015__image_banner_bmEPWM
  > .relative.overflow-hidden{
    height: 93vh !important;
    max-height: 920px !important;
    min-height: 700px !important;
  }
}

/* =========================================================
   ABOUT HERO — MOBILE OFFSET AT TOP
   negative margin-top version
========================================================= */

@media (max-width: 767px){
  #shopify-section-template--20146969379015__image_banner_bmEPWM
  > .relative.overflow-hidden{
    margin-top: -76px !important;   /* adjust to -20 / -24 / -30 if needed */
    overflow: hidden !important;

    height: 68vh !important;
    max-height: 620px !important;
    min-height: 460px !important;

    border-radius: 16px !important;
  }
}

/* =========================================================
   ABOUT IMAGE BANNER — PUSH DESKTOP IMAGE DOWN
========================================================= */

#shopify-section-template--20146969379015__image_banner_bmEPWM
img.max-md\:hidden{
  object-position: center 37% !important;
}

/* =========================================================
   LUX FOUNDER NOTE — SLIMMER / SLEEKER
========================================================= */

.lux-founder-note {
  width: 100%;
  padding: 0 0 20px;
}

.lux-founder-note__frame {
  width: calc(100% - 64px);
  margin: 0 auto 20px;
  background: #ECEDEF;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.025);
}

.lux-founder-note__inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 58px 42px 52px;
  text-align: center;
}

.lux-founder-note__eyebrow {
  margin: 0 0 20px;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-weight: 600;
  color: #6B6964;
}

.lux-founder-note__text {
  margin: 0 auto;
  max-width: 820px;
  font-size: clamp(24px, 2.8vw, 34px);
  line-height: 1.38;
  letter-spacing: -0.02em;
  font-weight: 400;
  color: #6B6964;
}

.lux-founder-note__signoff {
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.lux-founder-note__xo {
  font-size: 16px;
  line-height: 1;
  color: #7A7771;
  font-style: italic;
}

.lux-founder-note__signature {
  width: 110px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  opacity: 0.9;
}

/* =========================================================
   LUX FOUNDER NOTE — MOBILE REFINED
========================================================= */
@media (max-width: 767px) {
  .lux-founder-note {
    padding: 0 0 18px;
  }

  .lux-founder-note__frame {
    width: calc(100% - 30px) !important;
    margin: 0 auto 18px;
    border-radius: 16px;
    overflow: hidden;
  }

  .lux-founder-note__inner {
    padding: 36px 24px 34px;
    max-width: 100%;
  }

  .lux-founder-note__eyebrow {
    margin: 0 0 14px;
    font-size: 10.5px;
    line-height: 1;
    letter-spacing: 0.09em;
  }

  .lux-founder-note__text {
    max-width: 100%;
    font-size: clamp(17px, 5vw, 21px);
    line-height: 1.5;
    letter-spacing: -0.015em;
  }

  .lux-founder-note__signoff {
    margin-top: 22px;
    gap: 5px;
  }

  .lux-founder-note__xo {
    font-size: 14px;
    line-height: 1;
  }

  .lux-founder-note__signature {
    width: 94px;
  }
}

/* =========================================================
   KIM STORY SPLIT — RHODE-LIKE EDITORIAL IMAGE / TEXT
========================================================= */

.kim-story-split {
  width: 100%;
  padding: 0 0 24px;
}

.kim-story-split__frame {
  width: calc(100% - 64px);
  margin: 0 auto 24px;
  background: #ECEDEF;
  border-radius: 16px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  border: 1px solid rgba(0, 0, 0, 0.03);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.025);
}

.kim-story-split__media,
.kim-story-split__content {
  min-height: 520px;
}

.kim-story-split__media {
  position: relative;
  overflow: hidden;
}

.kim-story-split__image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 42%;
}

.kim-story-split__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 38px 64px 38px 80px;
}

.kim-story-split__eyebrow {
  margin: 0 0 18px;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: #6B6964;
}

.kim-story-split__lead {
  margin: 0 0 26px;
  font-size: clamp(28px, 2.8vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 500;
  color: #4F4C46;
  max-width: 14ch;
}

.kim-story-split__text {
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 46ch;
}

.kim-story-split__text p {
  margin: 0;
  font-size: 15px;
  line-height: 1.72;
  color: rgba(79, 76, 70, 0.88);
}

.kim-story-split__closing {
  margin-top: 4px;
  color: #4F4C46 !important;
  font-weight: 500;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {
  .kim-story-split__frame {
    grid-template-columns: 1fr 1fr;
  }

  .kim-story-split__media,
  .kim-story-split__content {
    min-height: 640px;
  }

  .kim-story-split__content {
    padding: 42px 34px;
  }

  .kim-story-split__lead {
    font-size: clamp(24px, 3.4vw, 34px);
    max-width: 15ch;
  }

  .kim-story-split__text {
    max-width: 100%;
  }

  .kim-story-split__text p {
    font-size: 14px;
    line-height: 1.68;
  }
}

/* =========================================================
   KIM STORY SPLIT — MOBILE REFINED
========================================================= */
@media (max-width: 767px) {
  .kim-story-split {
    padding: 0 0 18px;
  }

  .kim-story-split__frame {
    width: calc(100% - 30px) !important;
    margin: 0 auto 18px;
    grid-template-columns: 1fr;
    gap: 0 !important;
    border-radius: 16px;
    overflow: hidden;
  }

  .kim-story-split__media {
    min-height: 360px;
    height: 360px;
  }

  .kim-story-split__content {
    min-height: auto;
    padding: 28px 24px 30px;
  }

  .kim-story-split__eyebrow {
    margin: 0 0 12px;
    font-size: 10.5px;
    line-height: 1;
    letter-spacing: 0.09em;
  }

  .kim-story-split__lead {
    margin: 0 0 16px;
    font-size: clamp(24px, 7.2vw, 31px);
    line-height: 1.1;
    letter-spacing: -0.03em;
    max-width: 15.75ch;
  }

  .kim-story-split__text {
    gap: 12px;
    max-width: 100%;
  }

  .kim-story-split__text p {
    font-size: 14px;
    line-height: 1.68;
  }

  .kim-story-split__closing {
    margin-top: 2px;
  }

  #shopify-section-template--20146969379015__custom_liquid_XYQnyM .kim-story-split__image {
    object-position: center 34% !important;
  }
}

@media (min-width: 768px){
  .kim-story-split__frame {
    height: 680px;
    max-height: 680px;
  }
}

.kim-story-split__media {
  height: 100%;
}

.kim-story-split__image {
  height: 100%;
  object-fit: cover;
}

#shopify-section-template--20146969379015__custom_liquid_XYQnyM .kim-story-split__image {
  object-position: center 28% !important;
}

/* =========================================================
   KIM STORY SPLIT — CLEAN PAGE TURN
========================================================= */

.kim-story-pager {
  max-width: 46ch;
}

.kim-story-pager__viewport {
  position: relative;
  min-height: 210px;
  overflow: hidden;
  isolation: isolate;
}

.kim-story-pager__page {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  transform: translate3d(54px, 0, 0);
  pointer-events: none;
  transition:
    opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
  z-index: 1;
}

.kim-story-pager__page.is-active {
  position: relative;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
  z-index: 2;
}

.kim-story-pager__page.is-exit-left {
  opacity: 0;
  transform: translate3d(-54px, 0, 0);
  z-index: 1;
}

.kim-story-pager__page.is-exit-right {
  opacity: 0;
  transform: translate3d(54px, 0, 0);
  z-index: 1;
}

.kim-story-pager__page p {
  margin: 0;
  font-size: 15px;
  line-height: 1.72;
  color: rgba(79, 76, 70, 0.88);
  background: #ECEDEF; /* masks overlap cleanly */
}

.kim-story-pager__footer {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
}

.kim-story-pager__meta {
  min-width: 52px;
}

.kim-story-pager__count {
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: #6B6964;
}

.kim-story-pager__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(191, 191, 191, 0.72);
  border-radius: 999px;
  background: transparent;
  color: #808080;
  cursor: pointer;
  transition:
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.4s ease,
    border-color 0.4s ease,
    opacity 0.35s ease;
}

.kim-story-pager__nav span {
  font-size: 16px;
  line-height: 1;
  color: #808080;
}

.kim-story-pager__nav.is-disabled {
  opacity: 0.32;
  pointer-events: none;
}

@media (hover: hover) {
  .kim-story-pager__nav:hover {
    transform: translateY(-1px);
    background: rgba(128, 128, 128, 0.06);
    border-color: rgba(128, 128, 128, 0.34);
  }
}

@media (max-width: 767px) {
  .kim-story-pager {
    max-width: 100%;
  }

  .kim-story-pager__viewport {
    min-height: 190px;
  }

  .kim-story-pager__page p {
    font-size: 14px;
    line-height: 1.7;
  }
}

/* =========================================================
   KIM PURPOSE SPLIT — VIDEO + TEXT + CTA
   Rhode-like connected editorial block
========================================================= */

.kim-purpose-split {
  width: 100%;
  padding: 0 0 24px;
}

.kim-purpose-split__frame {
  width: calc(100% - 64px);
  margin: 0 auto 24px;
  background: #ECEDEF;
  border-radius: 16px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  border: 1px solid rgba(0, 0, 0, 0.03);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.025);
}

/* =========================================================
   KIM PURPOSE SPLIT — REFINED HEIGHT
========================================================= */

@media (min-width: 768px){
  .kim-purpose-split__frame {
    height: 820px;
    max-height: 820px;
  }

  .kim-purpose-split__media,
  .kim-purpose-split__content {
    height: 100%;
    min-height: 0;
  }
}

@media (max-width: 1024px) and (min-width: 768px){
  .kim-purpose-split__frame {
    height: 580px;
    max-height: 580px;
  }
}

@media (max-width: 767px){
  .kim-purpose-split__media {
    min-height: 360px;
  }

  .kim-purpose-split__content {
    min-height: auto;
  }
}

.kim-purpose-split__media {
  position: relative;
  overflow: hidden;
}

.kim-purpose-split__video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
}

.kim-purpose-split__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 56px 52px;
}

.kim-purpose-split__eyebrow {
  margin: 0 0 18px;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: #6B6964;
}

.kim-purpose-split__heading {
  margin: 0 0 22px;
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 500;
  color: #4F4C46;
  max-width: 13ch;
}

.kim-purpose-split__text {
  margin: 0 0 28px;
  max-width: 46ch;
  font-size: 16px;
  line-height: 1.72;
  color: rgba(79, 76, 70, 0.86);
}

.kim-purpose-split__button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid #808080;
  background: transparent;
  color: #808080;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  text-decoration: none;
  overflow: hidden;
  transition:
    color 0.4s ease,
    border-color 0.35s ease,
    transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1;
}

.kim-purpose-split__button::after {
  content: "";
  position: absolute;
  inset: -1px;
  background: #808080;
  border-radius: inherit;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: -1;
}

@media (hover: hover) {
  .kim-purpose-split__button:hover {
    color: #ffffff;
    transform: translateY(-1px);
  }

  .kim-purpose-split__button:hover::after {
    transform: scaleY(1);
  }

  .kim-purpose-split__button:active {
    transform: translateY(0);
  }
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {
  .kim-purpose-split__frame {
    grid-template-columns: 1fr 1fr;
  }

  .kim-purpose-split__media,
  .kim-purpose-split__content {
    min-height: 600px;
  }

  .kim-purpose-split__content {
    padding: 42px 34px;
  }

  .kim-purpose-split__heading {
    font-size: clamp(26px, 3.6vw, 36px);
    max-width: 14ch;
  }

  .kim-purpose-split__text {
    font-size: 15px;
    max-width: 36ch;
  }
}

/* =========================================================
   KIM PURPOSE SPLIT — MOBILE REFINED
========================================================= */
@media (max-width: 767px) {
  .kim-purpose-split {
    padding: 0 0 18px;
  }

  .kim-purpose-split__frame {
    width: calc(100% - 30px) !important;
    margin: 0 auto 18px;
    grid-template-columns: 1fr;
    gap: 0 !important;
    border-radius: 16px;
    overflow: hidden;
  }

  .kim-purpose-split__media {
    min-height: 350px;
    height: 350px;
  }

  .kim-purpose-split__content {
    min-height: auto;
    padding: 28px 24px 30px;
    align-items: flex-start;
  }

  .kim-purpose-split__eyebrow {
    margin: 0 0 12px;
    font-size: 10.5px;
    line-height: 1;
    letter-spacing: 0.09em;
  }

  .kim-purpose-split__heading {
    margin: 0 0 16px;
    font-size: clamp(24px, 7.2vw, 31px);
    line-height: 1.1;
    letter-spacing: -0.03em;
    max-width: 15.75ch;
  }

  .kim-purpose-split__text {
    max-width: 100%;
    margin: 0 0 22px;
    font-size: 14px;
    line-height: 1.68;
  }

  .kim-purpose-split__button {
    min-height: 40px;
    padding: 0 16px;
    font-size: 10px;
    letter-spacing: 0.07em;
    align-self: center;
  }
}

/* =========================================================
   KIM PURPOSE SPLIT — TEXT LEFT / VIDEO RIGHT
========================================================= */

.kim-purpose-split__content {
  order: 1;
}

.kim-purpose-split__media {
  order: 2;
}

/* =========================================================
   PURPOSE SPLIT VIDEO — SMOOTHER AUTOPLAY / LOOP RENDERING
========================================================= */

.kim-purpose-split__media {
  position: relative;
  overflow: hidden;
  background: #ECEDEF; /* soft fallback while video loads */
}

.kim-purpose-split__video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;

  /* helps reduce paint/flicker issues */
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform, opacity;

  /* smoother visual appearance */
  opacity: 1;
}

/* optional: if your reveal animation touches the parent,
   this helps the video stay stable */
.kim-purpose-split__media,
.kim-purpose-split__video {
  isolation: isolate;
}

/* =========================================================
   KIM PRODUCT EDITORIAL — SINGLE IMAGE / TEXT RIGHT
========================================================= */

.kim-product-editorial,
.kim-product-editorial *,
.kim-product-editorial *::before,
.kim-product-editorial *::after {
  box-sizing: border-box;
}

.kim-product-editorial {
  width: 100%;
  padding: 0 0 24px;
}

.kim-product-editorial__frame {
  width: calc(100% - 64px);
  margin: 0 auto 24px;
  background: #ECEDEF;
  border-radius: 16px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  border: 1px solid rgba(0, 0, 0, 0.03);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.025);
}

.kim-product-editorial__media,
.kim-product-editorial__content {
  min-height: 720px;
  align-self: stretch;
}

/* LEFT IMAGE */
.kim-product-editorial__media {
  position: relative;
  padding: 28px 0 28px 28px;
  display: flex;
  align-items: stretch;
}

.kim-product-editorial__single-image {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 16px;
  background: #F3F4F6;
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.kim-product-editorial__single-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
}

/* RIGHT TEXT */
.kim-product-editorial__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 56px 64px 56px 80px;
}

.kim-product-editorial__eyebrow {
  margin: 0 0 18px;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: #6B6964;
}

.kim-product-editorial__heading {
  margin: 0 0 22px;
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 500;
  color: #4F4C46;
  max-width: 13ch;
}

.kim-product-editorial__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 35ch;
  margin-bottom: 28px;
}

.kim-product-editorial__text p {
  margin: 0;
  font-size: 15px;
  line-height: 1.72;
  color: rgba(79, 76, 70, 0.88);
}

.kim-product-editorial__button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid #808080;
  background: transparent;
  color: #808080;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  text-decoration: none;
  overflow: hidden;
  transition:
    color 0.4s ease,
    transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1;
  isolation: isolate;
}

.kim-product-editorial__button::after {
  content: "";
  position: absolute;
  inset: -1px;
  background: #808080;
  border-radius: inherit;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: -1;
}

@media (hover: hover) {
  .kim-product-editorial__button:hover {
    color: #ffffff;
    transform: translateY(-1px);
  }

  .kim-product-editorial__button:hover::after {
    transform: scaleY(1);
  }

  .kim-product-editorial__button:active {
    transform: translateY(0);
  }
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {
  .kim-product-editorial__frame {
    grid-template-columns: 1fr 1fr;
  }

  .kim-product-editorial__media,
  .kim-product-editorial__content {
    min-height: 620px;
  }

  .kim-product-editorial__media {
    padding: 22px 0 22px 22px;
  }

  .kim-product-editorial__content {
    padding: 42px 34px;
  }

  .kim-product-editorial__heading {
    font-size: clamp(26px, 3.6vw, 36px);
    max-width: 14ch;
  }

  .kim-product-editorial__text {
    max-width: 100%;
  }

  .kim-product-editorial__text p {
    font-size: 14px;
    line-height: 1.68;
  }
}

/* =========================================================
   KIM PRODUCT EDITORIAL — MOBILE REFINED
========================================================= */
@media (max-width: 767px) {
  .kim-product-editorial {
    padding: 0 0 18px;
  }

  .kim-product-editorial__frame {
    width: calc(100% - 30px) !important;
    margin: 0 auto 18px;
    grid-template-columns: 1fr;
    gap: 0 !important;
    border-radius: 16px;
    overflow: hidden;
  }

  .kim-product-editorial__media {
    min-height: 450px;
    height: 450px;
    padding: 20px 20px 0;
    order: 1;
  }

  .kim-product-editorial__content {
    min-height: auto;
    padding: 24px 24px 30px;
    order: 2;
    align-items: flex-start;
  }

  .kim-product-editorial__single-image,
  .kim-product-editorial__single-image img {
    border-radius: 14px;
  }

  .kim-product-editorial__eyebrow {
    margin: 0 0 12px;
    font-size: 10.5px;
    line-height: 1;
    letter-spacing: 0.09em;
  }

  .kim-product-editorial__heading {
    margin: 0 0 16px;
    font-size: clamp(24px, 7.2vw, 31px);
    line-height: 1.1;
    letter-spacing: -0.03em;
    max-width: 16ch;
  }

  .kim-product-editorial__text {
    max-width: 100%;
    gap: 12px;
    margin-bottom: 22px;
  }

  .kim-product-editorial__text p {
    font-size: 14px;
    line-height: 1.68;
  }

  .kim-product-editorial__button {
    min-height: 40px;
    padding: 0 16px;
    font-size: 10px;
    letter-spacing: 0.07em;
    align-self: center;
  }
}

/* =========================================================
   DESKTOP LOCKED HEIGHT
========================================================= */

@media (min-width: 768px) {
  .kim-product-editorial__frame {
    height: 720px;
    max-height: 720px;
  }

  .kim-product-editorial__media,
  .kim-product-editorial__content,
  .kim-product-editorial__single-image,
  .kim-product-editorial__single-image img {
    height: 100%;
    min-height: 0;
  }
}

/* =========================================================
   ABOUT HERO — OFFSET BELOW HEADER STACK
   - keep structural spacing
   - use translate for visual nudge
========================================================= */

#shopify-section-template--20283037548743__image_banner_a9HAG8{
  position: relative !important;
  z-index: 1 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

@media (min-width: 768px){
  #shopify-section-template--20283037548743__image_banner_a9HAG8
  > .relative.overflow-hidden{
    margin-top: -64px !important;
    overflow: hidden !important;
  }
}


/* =========================================================
   ABOUT HERO — REFINED SHORTER HEIGHT
========================================================= */
@media (min-width: 768px){
  #shopify-section-template--20283037548743__image_banner_a9HAG8
  > .relative.overflow-hidden{
    height: 93vh !important;
    max-height: 920px !important;
    min-height: 700px !important;
  }
}

/* =========================================================
   ABOUT IMAGE BANNER — PUSH DESKTOP IMAGE DOWN
========================================================= */

#shopify-section-template--20283037548743__image_banner_a9HAG8
img.max-md\:hidden{
  object-position: center 45% !important;
}



/* Outer framed rectangle */
#shopify-section-template--20146969280711__main .content-wrapper.mx-auto {
  width: calc(100% - 64px);
  margin: 0 auto 24px;
  padding: 56px 56px 56px !important;
  background: #ECEDEF;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.03);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.025);
}

/* Page heading */
#shopify-section-template--20146969280711__main h1 {
  text-align: center;
  margin-bottom: 42px !important;
  font-size: clamp(34px, 4vw, 56px) !important;
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 500;
  color: #4F4C46 !important;
}

/* Two-column layout */
#shopify-section-template--20146969280711__main .flex.gap-y-7 {
  display: grid !important;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 28px;
  align-items: start;
}

/* Left info block */
#shopify-section-template--20146969280711__main .flex.gap-y-7 > div:first-child {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 12px 8px 0 0 !important;
}

/* Remove hardcoded grey card */
#shopify-section-template--20146969280711__main .flex.gap-y-7 > div:first-child[style] {
  background-color: transparent !important;
}

/* Left title */
#shopify-section-template--20146969280711__main .flex.gap-y-7 > div:first-child h2 {
  margin-bottom: 14px !important;
  font-size: 12px !important;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: #6B6964 !important;
}

/* Left content text */
#shopify-section-template--20146969280711__main .flex.gap-y-7 > div:first-child,
#shopify-section-template--20146969280711__main .flex.gap-y-7 > div:first-child p,
#shopify-section-template--20146969280711__main .flex.gap-y-7 > div:first-child .rte {
  font-size: 15px;
  line-height: 1.75;
  color: rgba(79, 76, 70, 0.88) !important;
  max-width: 32ch;
}

/* Right form column */
#shopify-section-template--20146969280711__main .flex.gap-y-7 > div:last-child {
  background: transparent;
}

/* Remove extra inner side padding if too much */
#shopify-section-template--20146969280711__main .md\:px-12 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Inputs + textarea */
#shopify-section-template--20146969280711__main .input__field {
  min-height: 58px;
  border-radius: 14px !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  background: #F5F5F5 !important;
  color: #4F4C46 !important;
  box-shadow: none !important;
  font-size: 15px;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

#shopify-section-template--20146969280711__main textarea.input__field {
  min-height: 150px;
  padding-top: 16px !important;
  padding-bottom: 16px !important;
  resize: vertical;
}

/* Placeholder */
#shopify-section-template--20146969280711__main .input__field::placeholder {
  color: rgba(79, 76, 70, 0.62);
}

/* Form spacing */
#shopify-section-template--20146969280711__main .mb-3 {
  margin-bottom: 14px !important;
}

#shopify-section-template--20146969280711__main .mt-7 {
  margin-top: 18px !important;
}

/* Button */
#shopify-section-template--20146969280711__main .button.button--filled-primary {
  min-height: 52px;
  width: 100%;
  border-radius: 999px !important;
  border: 1px solid #808080 !important;
  background: transparent !important;
  color: #808080 !important;
  overflow: hidden !important;
  position: relative;
  transition: color 0.4s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1;
}

#shopify-section-template--20146969280711__main .button.button--filled-primary::after {
  content: "";
  position: absolute;
  inset: -1px;
  background: #808080;
  border-radius: inherit;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: -1;
}

@media (hover: hover) {
  #shopify-section-template--20146969280711__main .button.button--filled-primary:hover {
    color: #ffffff !important;
    transform: translateY(-1px);
  }

  #shopify-section-template--20146969280711__main .button.button--filled-primary:hover::after {
    transform: scaleY(1);
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {
  #shopify-section-template--20146969280711__main .content-wrapper.mx-auto {
    width: calc(100% - 24px);
    margin: 0 auto 16px;
    padding: 30px 22px 28px !important;
    border-radius: 16px;
  }

  #shopify-section-template--20146969280711__main h1 {
    margin-bottom: 26px !important;
    font-size: clamp(28px, 8vw, 40px) !important;
  }

  #shopify-section-template--20146969280711__main .flex.gap-y-7 {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  #shopify-section-template--20146969280711__main .flex.gap-y-7 > div:first-child {
    padding: 0 !important;
  }

  #shopify-section-template--20146969280711__main .flex.gap-y-7 > div:first-child,
  #shopify-section-template--20146969280711__main .flex.gap-y-7 > div:first-child p,
  #shopify-section-template--20146969280711__main .flex.gap-y-7 > div:first-child .rte {
    max-width: 100%;
    font-size: 14px;
    line-height: 1.72;
  }

  #shopify-section-template--20146969280711__main .input__field {
    min-height: 54px;
    border-radius: 14px !important;
    font-size: 14px;
  }

  #shopify-section-template--20146969280711__main textarea.input__field {
    min-height: 130px;
  }
}

/* =========================================================
   CONTACT PAGE — MATCH WIDTH TO OTHER CUSTOM LIQUID SECTIONS
========================================================= */

#shopify-section-template--20146969280711__main {
  width: 100%;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent;
}

/* Outer framed rectangle */
#shopify-section-template--20146969280711__main .content-wrapper.mx-auto {
  width: calc(100% - 64px) !important;
  max-width: none !important;
  margin: 0 auto 24px !important;
  padding: 56px 56px 56px !important;
  background: #bfbfbf;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.03);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.025);
  box-sizing: border-box !important;
}

/* prevent inner theme constraints */
#shopify-section-template--20146969280711__main .content-wrapper,
#shopify-section-template--20146969280711__main .mx-auto {
  max-width: none !important;
}



/* =========================================================
   CONTACT PAGE — CENTER REMAINING FORM COLUMN
========================================================= */

/* Make the layout one column now that left block is hidden */
#shopify-section-template--20146969280711__main .flex.gap-y-7 {
  display: block !important;
}

/* Center the remaining form wrapper */
#shopify-section-template--20146969280711__main .flex-1 {
  width: 100%;
  max-width: 720px;
  margin: 0 auto !important;
}

/* Keep inner form centered too */
#shopify-section-template--20146969280711__main .flex-1 .md\:px-12 {
  max-width: 720px;
  margin: 0 auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Hide empty Contact info box */
.flex-1.rounded-md.px-5.py-7.md\:p-12 {
  display: none !important;
}

@media (max-width: 767px) {
  #shopify-section-template--20146969280711__main .content-wrapper.mx-auto {
    width: calc(100% - 30px) !important;
    margin: 0 auto 16px !important;
    padding: 30px 22px 28px !important;
    box-sizing: border-box !important;
  }

  #shopify-section-template--20146969280711__main .flex.gap-y-7 {
    display: block !important;
  }

  #shopify-section-template--20146969280711__main .flex-1 {
    width: 100%;
    max-width: 100%;
    margin: 0 auto !important;
  }

  #shopify-section-template--20146969280711__main .flex-1 .md\:px-12 {
    max-width: 100%;
    margin: 0 auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* =========================================================
   CAMELLIA BANNER — BUTTERY SLIDE-UP REVEAL
========================================================= */

#shopify-section-template--20146968985799__image_banner_8QqpgU .lux-reveal-up {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
  transition:
    opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.15s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

#shopify-section-template--20146968985799__image_banner_8QqpgU .lux-reveal-up.is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* stagger inner content */
#shopify-section-template--20146968985799__image_banner_8QqpgU .lux-reveal-up > * {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.95s cubic-bezier(0.16, 1, 0.3, 1);
}

#shopify-section-template--20146968985799__image_banner_8QqpgU .lux-reveal-up.is-in > *:nth-child(1) {
  opacity: 1;
  transform: translate3d(0,0,0);
  transition-delay: 0.10s;
}

#shopify-section-template--20146968985799__image_banner_8QqpgU .lux-reveal-up.is-in > *:nth-child(2) {
  opacity: 1;
  transform: translate3d(0,0,0);
  transition-delay: 0.20s;
}

#shopify-section-template--20146968985799__image_banner_8QqpgU .lux-reveal-up.is-in > *:nth-child(3) {
  opacity: 1;
  transform: translate3d(0,0,0);
  transition-delay: 0.30s;
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  #shopify-section-template--20146968985799__image_banner_8QqpgU .lux-reveal-up,
  #shopify-section-template--20146968985799__image_banner_8QqpgU .lux-reveal-up > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =========================================================
   CAMELLIA BANNER — CINEMATIC SECTION REVEAL
   animate the full framed section, not just text
========================================================= */

#shopify-section-template--20146968985799__image_banner_8QqpgU > .relative.overflow-hidden {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  transition:
    opacity 1.05s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.28s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

#shopify-section-template--20146968985799__image_banner_8QqpgU > .relative.overflow-hidden.is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  #shopify-section-template--20146968985799__image_banner_8QqpgU > .relative.overflow-hidden {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =========================================================
   GLOBAL CINEMATIC REVEAL
   Apply class: lux-cinematic-reveal
========================================================= */

.lux-cinematic-reveal {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  transition:
    opacity 1.05s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.28s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.lux-cinematic-reveal.is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .lux-cinematic-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =========================================================
   FEATURED COLLECTION — 3 CLEAN RHODE-STYLE CARDS
   - no outer block background
   - 3 cards in one exact row on desktop
   - outer width matches your other sections
   - each card has ECEDEF background
========================================================= */

#shopify-section-template--20283037548743__featured_collection_TH8GhR {
  width: 100%;
  background: transparent;
}

#shopify-section-template--20283037548743__featured_collection_TH8GhR > div {
  width: 100% !important;
  max-width: none !important;
  padding: 0 0 24px !important;
  background: transparent !important;
}

/* section width = same language as your other framed sections */
#shopify-section-template--20283037548743__featured_collection_TH8GhR .slider.slider--full-width {
  width: calc(100% - 64px) !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* remove empty heading row */
#shopify-section-template--20283037548743__featured_collection_TH8GhR .slider__header {
  display: none !important;
}

/* IMPORTANT: force a true 3-column layout */
@media (min-width: 768px) {
  #shopify-section-template--20283037548743__featured_collection_TH8GhR .slider__slides {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 24px !important;
    overflow: visible !important;
    padding: 0 !important;
    width: 100% !important;
  }

  #shopify-section-template--20283037548743__featured_collection_TH8GhR .slider__slide {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* mobile keeps swipe feel */
@media (max-width: 767px) {
  #shopify-section-template--20283037548743__featured_collection_TH8GhR .slider.slider--full-width {
    width: calc(100% - 24px) !important;
  }

  #shopify-section-template--20283037548743__featured_collection_TH8GhR .slider__slides {
    padding: 0 !important;
    gap: 14px !important;
  }

  #shopify-section-template--20283037548743__featured_collection_TH8GhR .slider__slide {
    padding: 0 !important;
  }
}

/* remove theme spacer */
#shopify-section-template--20283037548743__featured_collection_TH8GhR .card-product .h-0.w-0 {
  display: none !important;
}

/* each card */
#shopify-section-template--20283037548743__featured_collection_TH8GhR .card-product article {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  overflow: hidden !important;
  padding: 22px 22px 20px !important;
  min-height: 100% !important;
}

/* image area — no white background */
#shopify-section-template--20283037548743__featured_collection_TH8GhR .card-product .relative.overflow-hidden.rounded-md.bg-\[--fade-in-bg\] {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
}

/* inner image holder */
#shopify-section-template--20283037548743__featured_collection_TH8GhR .card-product .aspect-product {
  aspect-ratio: 1 / 1 !important;
  padding: 0 !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* main product image */
#shopify-section-template--20283037548743__featured_collection_TH8GhR .card-product img.card-primary-image {
  width: 100% !important;
  height: 100% !important;
  max-width: 76% !important;
  max-height: 76% !important;
  object-fit: contain !important;
  mix-blend-mode: normal !important;
}

/* hover image */
#shopify-section-template--20283037548743__featured_collection_TH8GhR .card-hover-image {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain !important;
}

/* text area */
#shopify-section-template--20283037548743__featured_collection_TH8GhR .card-product .relative.flex.flex-1.flex-col {
  padding-top: 18px !important;
}

#shopify-section-template--20283037548743__featured_collection_TH8GhR .mt-4 {
  margin-top: 0 !important;
}

#shopify-section-template--20283037548743__featured_collection_TH8GhR .mt-3 {
  margin-top: 10px !important;
}

#shopify-section-template--20283037548743__featured_collection_TH8GhR .card-product h2 {
  margin: 0 !important;
  max-width: 16ch !important;
  font-size: clamp(16px, 1.15vw, 20px) !important;
  line-height: 1.18 !important;
  letter-spacing: -0.02em !important;
  font-weight: 500 !important;
  color: #808080 !important;
}

#shopify-section-template--20283037548743__featured_collection_TH8GhR .price__element,
#shopify-section-template--20283037548743__featured_collection_TH8GhR .price__element .text-primary-600 {
  font-size: 15px !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;
  color: #808080 !important;
}

/* mobile card tuning */
@media (max-width: 767px) {
  #shopify-section-template--20283037548743__featured_collection_TH8GhR .card-product article {
    border-radius: 14px !important;
    padding: 16px 16px 16px !important;
  }

  #shopify-section-template--20283037548743__featured_collection_TH8GhR .card-product img.card-primary-image {
    max-width: 78% !important;
    max-height: 78% !important;
  }

  #shopify-section-template--20283037548743__featured_collection_TH8GhR .card-product h2 {
    font-size: 14px !important;
    max-width: 100% !important;
  }

  #shopify-section-template--20283037548743__featured_collection_TH8GhR .price__element,
  #shopify-section-template--20283037548743__featured_collection_TH8GhR .price__element .text-primary-600 {
    font-size: 14px !important;
  }
}

/* =========================================================
   FEATURED COLLECTION — FORCE TRUE 3-UP DESKTOP ROW
========================================================= */
@media (min-width: 768px) {

  #shopify-section-template--20283037548743__featured_collection_TH8GhR .slider__slides {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    gap: 24px !important;

    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;

    overflow: visible !important;
    transform: none !important;
    scroll-snap-type: none !important;
  }

  #shopify-section-template--20283037548743__featured_collection_TH8GhR .slider__slide {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: unset !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  #shopify-section-template--20283037548743__featured_collection_TH8GhR .slider__slide:nth-child(1),
  #shopify-section-template--20283037548743__featured_collection_TH8GhR .slider__slide:nth-child(2),
  #shopify-section-template--20283037548743__featured_collection_TH8GhR .slider__slide:nth-child(3) {
    grid-row: 1 !important;
  }

  #shopify-section-template--20283037548743__featured_collection_TH8GhR .card-product {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  #shopify-section-template--20283037548743__featured_collection_TH8GhR .card-product > a,
  #shopify-section-template--20283037548743__featured_collection_TH8GhR .card-product article {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* =========================================================
   FEATURED COLLECTION — MEDIUM DESKTOP CARD HEIGHT
========================================================= */
@media (min-width: 768px) {

  #shopify-section-template--20283037548743__featured_collection_TH8GhR .slider.slider--full-width {
    width: calc(100% - 120px) !important;
  }

  #shopify-section-template--20283037548743__featured_collection_TH8GhR .slider__slides {
    gap: 20px !important;
  }

  #shopify-section-template--20283037548743__featured_collection_TH8GhR .card-product article {
    padding: 17px 17px 15px !important;
    border-radius: 14px !important;
  }

  /* slightly taller image area */
  #shopify-section-template--20283037548743__featured_collection_TH8GhR .card-product .relative.overflow-hidden.rounded-md.bg-\[--fade-in-bg\] {
    aspect-ratio: 1 / 0.8 !important;
  }

  #shopify-section-template--20283037548743__featured_collection_TH8GhR .card-product .aspect-product {
    aspect-ratio: 1 / 0.8 !important;
  }

  /* slightly larger product image inside */
  #shopify-section-template--20283037548743__featured_collection_TH8GhR .card-product img.card-primary-image {
    max-width: 66% !important;
    max-height: 66% !important;
  }

  /* text spacing */
  #shopify-section-template--20283037548743__featured_collection_TH8GhR .card-product .relative.flex.flex-1.flex-col {
    padding-top: 12px !important;
  }

  #shopify-section-template--20283037548743__featured_collection_TH8GhR .card-product h2 {
    font-size: clamp(15px, 1vw, 18px) !important;
    line-height: 1.14 !important;
    max-width: 15ch !important;
  }

  #shopify-section-template--20283037548743__featured_collection_TH8GhR .price__element,
  #shopify-section-template--20283037548743__featured_collection_TH8GhR .price__element .text-primary-600 {
    font-size: 14px !important;
  }
}

/* =========================================================
   FEATURED COLLECTION — MOBILE IMAGE LARGER
========================================================= */
@media (max-width: 767px) {

  /* slightly taller image area */
  #shopify-section-template--20283037548743__featured_collection_TH8GhR .card-product .relative.overflow-hidden.rounded-md.bg-\[--fade-in-bg\] {
    aspect-ratio: 1 / 1.14 !important;
  }

  #shopify-section-template--20283037548743__featured_collection_TH8GhR .card-product .aspect-product {
    aspect-ratio: 1 / 1.14 !important;
  }

  /* make product image visibly larger */
  #shopify-section-template--20283037548743__featured_collection_TH8GhR .card-product img.card-primary-image,
  #shopify-section-template--20283037548743__featured_collection_TH8GhR .card-product .aspect-product img {
    max-width: 92% !important;
    max-height: 92% !important;
  }

  /* tighten text block a little so image feels more dominant */
  #shopify-section-template--20283037548743__featured_collection_TH8GhR .card-product .relative.flex.flex-1.flex-col {
    padding-top: 12px !important;
  }

  #shopify-section-template--20283037548743__featured_collection_TH8GhR .card-product h2 {
    font-size: 13px !important;
    line-height: 1.14 !important;
  }

  #shopify-section-template--20283037548743__featured_collection_TH8GhR .price__element,
  #shopify-section-template--20283037548743__featured_collection_TH8GhR .price__element .text-primary-600 {
    font-size: 13px !important;
  }
}

/* Hide mobile quick add bag icon in featured collection */
@media (max-width: 767px) {
  #shopify-section-template--20283037548743__featured_collection_TH8GhR .card-product button.absolute.end-0.text-2xl.text-primary-500.md\:hidden[aria-label="Add to cart"] {
    display: none !important;
  }
}

/* =========================================================
   FEATURED COLLECTION — MOBILE PRICE IN PLACE OF BAG ICON
========================================================= */
@media (max-width: 767px) {

  /* make text area the anchor */
  #shopify-section-template--20283037548743__featured_collection_TH8GhR .card-product .relative.flex.flex-1.flex-col {
    position: relative !important;
    padding-top: 12px !important;
    min-height: 108px !important;
  }

  /* keep title on left and leave room for price on right */
  #shopify-section-template--20283037548743__featured_collection_TH8GhR .card-product h2 {
    max-width: calc(100% - 74px) !important;
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.14 !important;
  }

  /* move price up to the top-right where the bag icon was */
  #shopify-section-template--20283037548743__featured_collection_TH8GhR .price__element {
    position: absolute !important;
    top: 12px !important;
    right: 0 !important;
    margin-top: 0 !important;
    padding: 0 !important;
    display: block !important;
    text-align: right !important;
    line-height: 1 !important;
  }

  #shopify-section-template--20283037548743__featured_collection_TH8GhR .price__element,
  #shopify-section-template--20283037548743__featured_collection_TH8GhR .price__element .text-primary-600 {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #6B6964 !important;
  }

  /* remove old push-down spacing */
  #shopify-section-template--20283037548743__featured_collection_TH8GhR .mt-3 {
    margin-top: 0 !important;
  }
}

/* =========================================================
   FEATURED COLLECTION — MOBILE WIDTH MATCH IMAGE BANNER
========================================================= */
@media (max-width: 767px) {

  /* outer section wrapper */
  #shopify-section-template--20283037548743__featured_collection_TH8GhR {
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: hidden !important;
  }

  /* remove any extra wrapper spacing */
  #shopify-section-template--20283037548743__featured_collection_TH8GhR > div {
    width: 100% !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* exact same visible width language as your banner */
  #shopify-section-template--20283037548743__featured_collection_TH8GhR .slider.slider--full-width {
    width: calc(100% - 30px) !important;
    max-width: calc(100% - 30px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: visible !important;
  }

  /* track should not add side width */
  #shopify-section-template--20283037548743__featured_collection_TH8GhR .slider__slides {
    display: flex !important;
    gap: 14px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* card width */
  #shopify-section-template--20283037548743__featured_collection_TH8GhR .slider__slide {
    flex: 0 0 calc((100% - 14px) / 1.35) !important;
    width: calc((100% - 14px) / 1.35) !important;
    max-width: calc((100% - 14px) / 1.35) !important;
    min-width: calc((100% - 14px) / 1.35) !important;
    padding: 0 !important;
    margin: 0 !important;
    scroll-snap-align: start !important;
  }
}

/* =========================================================
   FEATURED COLLECTION — HIDE MOBILE HORIZONTAL SCROLLBAR
========================================================= */
@media (max-width: 767px) {
  #shopify-section-template--20283037548743__featured_collection_TH8GhR .slider__slides {
    scrollbar-width: none !important;      /* Firefox */
    -ms-overflow-style: none !important;   /* IE/old Edge */
  }

  #shopify-section-template--20283037548743__featured_collection_TH8GhR .slider__slides::-webkit-scrollbar {
    display: none !important;              /* Safari/Chrome */
    width: 0 !important;
    height: 0 !important;
  }
}

/* =========================================================
   SHOP PAGE — FEATURED COLLECTION
   remove hover zoom and hover border highlight
========================================================= */

#shopify-section-template--20283037548743__featured_collection_TH8GhR .card-hover,
#shopify-section-template--20283037548743__featured_collection_TH8GhR .card-product,
#shopify-section-template--20283037548743__featured_collection_TH8GhR .card-product article,
#shopify-section-template--20283037548743__featured_collection_TH8GhR .card-product .relative.overflow-hidden,
#shopify-section-template--20283037548743__featured_collection_TH8GhR .card-product .aspect-product,
#shopify-section-template--20283037548743__featured_collection_TH8GhR .card-product img {
  transition: none !important;
  animation: none !important;
  transform: none !important;
  box-shadow: none !important;
}

/* kill image zoom on hover */
#shopify-section-template--20283037548743__featured_collection_TH8GhR .group:hover .aspect-product,
#shopify-section-template--20283037548743__featured_collection_TH8GhR .group:hover .transition-transform,
#shopify-section-template--20283037548743__featured_collection_TH8GhR .md\:group-hover\:scale-105:hover,
#shopify-section-template--20283037548743__featured_collection_TH8GhR .group:hover .md\:group-hover\:scale-105 {
  transform: none !important;
}


/* keep primary image stable */
#shopify-section-template--20283037548743__featured_collection_TH8GhR .card-primary-image,
#shopify-section-template--20283037548743__featured_collection_TH8GhR .card-product img.faded-img {
  opacity: 1 !important;
  transform: none !important;
}

/* =========================================================
   FEATURED COLLECTION — KILL REMAINING HOVER RING
   keep cards white, remove theme hover/focus outline
========================================================= */

/* clickable wrapper */
#shopify-section-template--20283037548743__featured_collection_TH8GhR .card-product > a.card-hover,
#shopify-section-template--20283037548743__featured_collection_TH8GhR .card-product > a.card-hover:hover,
#shopify-section-template--20283037548743__featured_collection_TH8GhR .card-product > a.card-hover:focus,
#shopify-section-template--20283037548743__featured_collection_TH8GhR .card-product > a.card-hover:focus-visible,
#shopify-section-template--20283037548743__featured_collection_TH8GhR .card-product > a.card-hover:active {
  outline: none !important;
  box-shadow: none !important;
  border: 0 !important;
  background: transparent !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* pseudo layers that often create the “ring” */
#shopify-section-template--20283037548743__featured_collection_TH8GhR .card-product > a.card-hover::before,
#shopify-section-template--20283037548743__featured_collection_TH8GhR .card-product > a.card-hover::after,
#shopify-section-template--20283037548743__featured_collection_TH8GhR .card-product article::before,
#shopify-section-template--20283037548743__featured_collection_TH8GhR .card-product article::after,
#shopify-section-template--20283037548743__featured_collection_TH8GhR .contrast-border::before,
#shopify-section-template--20283037548743__featured_collection_TH8GhR .contrast-border::after {
  content: none !important;
  display: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* =========================================================
   CART PAGE / CART PANEL — KILL PRODUCT CARD HOVER
   removes image zoom, lift, border/focus ring, hover motion
========================================================= */

/* ---------- OUTER ITEM CARD ---------- */
#CartForm .card-hover.group,
#CartForm .card-hover.group:hover,
#CartForm .card-hover.group:focus,
#CartForm .card-hover.group:focus-visible,
#CartForm .card-hover.group:active {
  transform: none !important;
  transition: none !important;
  animation: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* ---------- CLICKABLE CARD WRAPPER ---------- */
#CartForm .card-hover.group > a,
#CartForm .card-hover.group > a:hover,
#CartForm .card-hover.group > a:focus,
#CartForm .card-hover.group > a:focus-visible,
#CartForm .card-hover.group > a:active {
  transform: none !important;
  transition: none !important;
  animation: none !important;
  box-shadow: none !important;
  outline: none !important;
  border: 0 !important;
  background: transparent !important;
  filter: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* ---------- PSEUDO RINGS / OVERLAYS ---------- */
#CartForm .card-hover.group::before,
#CartForm .card-hover.group::after,
#CartForm .card-hover.group > a::before,
#CartForm .card-hover.group > a::after {
  content: none !important;
  display: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* ---------- IMAGE WRAPPERS ---------- */
#CartForm .card-hover.group .overflow-hidden,
#CartForm .card-hover.group .relative.overflow-hidden.rounded-xs,
#CartForm .card-hover.group .bg-\[--fade-in-bg\],
#CartForm .card-hover.group .transition-transform,
#CartForm .card-hover.group .aspect-product,
#CartForm .card-hover.group img {
  transform: none !important;
  transition: none !important;
  animation: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* ---------- KILL THE ACTUAL THEME HOVER SCALE ---------- */
#CartForm .card-hover.group:hover .transition-transform,
#CartForm .card-hover.group:hover .md\:group-hover\:scale-105,
#CartForm .group:hover .transition-transform,
#CartForm .group:hover .md\:group-hover\:scale-105,
#CartForm .md\:group-hover\:scale-105:hover {
  transform: none !important;
}

/* ---------- KEEP IMAGES STABLE ---------- */
#CartForm .card-hover.group img,
#CartForm .card-hover.group img:hover,
#CartForm .card-hover.group img:focus,
#CartForm .card-hover.group img:active {
  transform: none !important;
  opacity: 1 !important;
  box-shadow: none !important;
  filter: none !important;
}

/* ---------- REMOVE ANY FOCUS RING FROM CARD CHILDREN ---------- */
#CartForm .card-hover.group *,
#CartForm .card-hover.group *:focus,
#CartForm .card-hover.group *:focus-visible {
  outline: none !important;
}

/* ---------- SAFETY: NO HOVER BORDER / SHADOW STATE ---------- */
#CartForm .card-hover.group:hover,
#CartForm .card-hover.group:hover > a,
#CartForm .card-hover.group:hover .overflow-hidden,
#CartForm .card-hover.group:hover .relative.overflow-hidden.rounded-xs {
  border-color: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

/* =========================================================
   FEATURED COLLECTION — RHODE-LIKE IMAGE HOVER ONLY
   no card lift, just premium zoom
========================================================= */

@media (hover: hover) and (min-width: 768px) {

  /* keep card stable */
  #shopify-section-template--20283037548743__featured_collection_TH8GhR
  .card-product article {
    transition:
      box-shadow 0.8s cubic-bezier(0.16, 1, 0.3, 1),
      border-color 0.5s ease !important;
  }

  /* image mask */
  #shopify-section-template--20283037548743__featured_collection_TH8GhR
  .card-product .relative.overflow-hidden.rounded-md.bg-\[--fade-in-bg\] {
    overflow: hidden !important;
  }

  /* scaling layer */
#shopify-section-template--20283037548743__featured_collection_TH8GhR
.card-product .bg-\[--fade-in-bg\].aspect-product {
  transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1) !important;
  transform: scale(1) translateZ(0) !important;
  transform-origin: center center !important;
  backface-visibility: hidden;
}

  /* main image */
  #shopify-section-template--20283037548743__featured_collection_TH8GhR
  .card-product img.card-primary-image {
    transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1) !important;
    transform: scale(1) translateZ(0) !important;
    transform-origin: center center !important;
    will-change: transform;
    backface-visibility: hidden;
  }

  /* hover image */
  #shopify-section-template--20283037548743__featured_collection_TH8GhR
  .card-product .card-hover-image {
    transition:
      transform 1s cubic-bezier(0.16, 1, 0.3, 1),
      opacity 0.55s ease !important;
    transform: scale(1) translateZ(0) !important;
    transform-origin: center center !important;
    will-change: transform;
    backface-visibility: hidden;
  }

  /* hover = image zoom only */
  #shopify-section-template--20283037548743__featured_collection_TH8GhR
  .card-product > a:hover .bg-\[--fade-in-bg\].aspect-product {
    transform: scale(1.018) translateZ(0) !important;
  }

  #shopify-section-template--20283037548743__featured_collection_TH8GhR
  .card-product > a:hover img.card-primary-image {
    transform: scale(1.04) translateZ(0) !important;
  }

  #shopify-section-template--20283037548743__featured_collection_TH8GhR
  .card-product > a:hover .card-hover-image {
    transform: scale(1.04) translateZ(0) !important;
  }
}



/* =========================================================
   DESKTOP MENU PANEL — UNIFIED TOP + FILLED STATE
   Same appearance on page load, top state, and scrolled state
========================================================= */
@media (min-width: 768px) {

  /* main glass shell */
  header.lux-header.is-top .resizable--menu.resizable--visible #menu-desktop .menu__wrapper,
  header.lux-header.is-filled .resizable--menu.resizable--visible #menu-desktop .menu__wrapper,
  header.lux-header.is-visible.is-filled .resizable--menu.resizable--visible #menu-desktop .menu__wrapper {
    background: rgba(202, 204, 207, 0.94) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 16px !important;
    backdrop-filter: blur(8px) saturate(110%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(110%) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05) !important;

    padding: 10px 12px 18px !important;
    overflow: hidden !important;
  }

  /* top spacing */
  header.lux-header.is-top .resizable--menu.resizable--visible #menu-desktop .menu__header-container,
  header.lux-header.is-filled .resizable--menu.resizable--visible #menu-desktop .menu__header-container,
  header.lux-header.is-visible.is-filled .resizable--menu.resizable--visible #menu-desktop .menu__header-container {
    padding: 6px 6px 2px !important;
  }

  /* link area */
  header.lux-header.is-top .resizable--menu.resizable--visible #menu-desktop .menu__links,
  header.lux-header.is-filled .resizable--menu.resizable--visible #menu-desktop .menu__links,
  header.lux-header.is-visible.is-filled .resizable--menu.resizable--visible #menu-desktop .menu__links {
    padding: 2px 6px 0 !important;
  }

  /* breathing room above login/signup button */
  header.lux-header.is-top .resizable--menu.resizable--visible #menu-desktop .md\:mt-\[88px\],
  header.lux-header.is-filled .resizable--menu.resizable--visible #menu-desktop .md\:mt-\[88px\],
  header.lux-header.is-visible.is-filled .resizable--menu.resizable--visible #menu-desktop .md\:mt-\[88px\] {
    margin-top: 96px !important;
  }

  /* softer dividers */
  header.lux-header.is-top .resizable--menu.resizable--visible #menu-desktop .divider,
  header.lux-header.is-filled .resizable--menu.resizable--visible #menu-desktop .divider,
  header.lux-header.is-visible.is-filled .resizable--menu.resizable--visible #menu-desktop .divider {
    opacity: 0.22 !important;
  }

  /* bottom fixed area */
  header.lux-header.is-top .resizable--menu.resizable--visible #menu-desktop-fixed,
  header.lux-header.is-filled .resizable--menu.resizable--visible #menu-desktop-fixed,
  header.lux-header.is-visible.is-filled .resizable--menu.resizable--visible #menu-desktop-fixed {
    padding: 0 12px 14px !important;
    box-sizing: border-box !important;
  }

  /* bottom button wrapper */
  header.lux-header.is-top .resizable--menu.resizable--visible #menu-desktop-fixed > div,
  header.lux-header.is-filled .resizable--menu.resizable--visible #menu-desktop-fixed > div,
  header.lux-header.is-visible.is-filled .resizable--menu.resizable--visible #menu-desktop-fixed > div,
  header.lux-header.is-top .resizable--menu.resizable--visible #menu-desktop .w-full.bg-bg-500.px-4.pb-2.md\:w-\[--menu-width\].md\:rounded-md.md\:pb-4,
  header.lux-header.is-filled .resizable--menu.resizable--visible #menu-desktop .w-full.bg-bg-500.px-4.pb-2.md\:w-\[--menu-width\].md\:rounded-md.md\:pb-4,
  header.lux-header.is-visible.is-filled .resizable--menu.resizable--visible #menu-desktop .w-full.bg-bg-500.px-4.pb-2.md\:w-\[--menu-width\].md\:rounded-md.md\:pb-4 {
    background: transparent !important;
    padding: 0 10px 10px !important;

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }

  /* actual login/signup button */
  header.lux-header.is-top .resizable--menu.resizable--visible #menu-desktop-fixed > div > a.button.button--filled-primary,
  header.lux-header.is-filled .resizable--menu.resizable--visible #menu-desktop-fixed > div > a.button.button--filled-primary,
  header.lux-header.is-visible.is-filled .resizable--menu.resizable--visible #menu-desktop-fixed > div > a.button.button--filled-primary {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    border: 1px solid #ffffff !important;
  }

  /* keep white fill layer */
  header.lux-header.is-top .resizable--menu.resizable--visible #menu-desktop-fixed .button.button--filled-primary::after,
  header.lux-header.is-filled .resizable--menu.resizable--visible #menu-desktop-fixed .button.button--filled-primary::after,
  header.lux-header.is-visible.is-filled .resizable--menu.resizable--visible #menu-desktop-fixed .button.button--filled-primary::after {
    background: #ffffff !important;
  }

  /* hover text/icons on button */
  header.lux-header.is-top .resizable--menu.resizable--visible #menu-desktop-fixed .button.button--filled-primary:hover,
  header.lux-header.is-top .resizable--menu.resizable--visible #menu-desktop-fixed .button.button--filled-primary:hover span,
  header.lux-header.is-filled .resizable--menu.resizable--visible #menu-desktop-fixed .button.button--filled-primary:hover,
  header.lux-header.is-filled .resizable--menu.resizable--visible #menu-desktop-fixed .button.button--filled-primary:hover span,
  header.lux-header.is-visible.is-filled .resizable--menu.resizable--visible #menu-desktop-fixed .button.button--filled-primary:hover,
  header.lux-header.is-visible.is-filled .resizable--menu.resizable--visible #menu-desktop-fixed .button.button--filled-primary:hover span {
    color: #808080 !important;
  }

  header.lux-header.is-top .resizable--menu.resizable--visible #menu-desktop-fixed .button.button--filled-primary:hover svg,
  header.lux-header.is-top .resizable--menu.resizable--visible #menu-desktop-fixed .button.button--filled-primary:hover svg path,
  header.lux-header.is-filled .resizable--menu.resizable--visible #menu-desktop-fixed .button.button--filled-primary:hover svg,
  header.lux-header.is-filled .resizable--menu.resizable--visible #menu-desktop-fixed .button.button--filled-primary:hover svg path,
  header.lux-header.is-visible.is-filled .resizable--menu.resizable--visible #menu-desktop-fixed .button.button--filled-primary:hover svg,
  header.lux-header.is-visible.is-filled .resizable--menu.resizable--visible #menu-desktop-fixed .button.button--filled-primary:hover svg path {
    fill: #808080 !important;
    stroke: #808080 !important;
  }
}

/* =========================================================
   FILLED MENU PANEL LOGIN BUTTON — HOVER TEXT GREY
========================================================= */
@media (min-width: 768px) and (hover: hover) {
  header.lux-header.is-filled .resizable--menu.resizable--visible #menu-desktop-fixed .button.button--filled-primary:hover,
  header.lux-header.is-visible.is-filled .resizable--menu.resizable--visible #menu-desktop-fixed .button.button--filled-primary:hover {
    color: #808080 !important;
    border-color: #ffffff !important;
  }

  header.lux-header.is-filled .resizable--menu.resizable--visible #menu-desktop-fixed .button.button--filled-primary:hover span,
  header.lux-header.is-visible.is-filled .resizable--menu.resizable--visible #menu-desktop-fixed .button.button--filled-primary:hover span {
    color: #808080 !important;
  }

  header.lux-header.is-filled .resizable--menu.resizable--visible #menu-desktop-fixed .button.button--filled-primary:hover svg,
  header.lux-header.is-filled .resizable--menu.resizable--visible #menu-desktop-fixed .button.button--filled-primary:hover svg path,
  header.lux-header.is-visible.is-filled .resizable--menu.resizable--visible #menu-desktop-fixed .button.button--filled-primary:hover svg,
  header.lux-header.is-visible.is-filled .resizable--menu.resizable--visible #menu-desktop-fixed .button.button--filled-primary:hover svg path {
    fill: #808080 !important;
    stroke: #808080 !important;
  }
}

/* =========================================================
   MENU PANEL LOGIN BUTTON — WHITE BORDER
========================================================= */

@media (min-width: 768px) {
  #menu-desktop-fixed .button.button--filled-primary,
  #menu-desktop-fixed .button.button--filled-primary:hover,
  #menu-desktop-fixed .button.button--filled-primary:focus,
  #menu-desktop-fixed .button.button--filled-primary:focus-visible {
    border: 1px solid #ffffff !important;
  }

  #menu-desktop-fixed .button.button--filled-primary::after {
    background: #ffffff !important;
  }
}

/* Cart popup only — remove blue outline from View cart */
#popup-label ~ * a.link.link--ghost,
#popup-label ~ * a.link.link--ghost:hover,
#popup-label ~ * a.link.link--ghost:focus,
#popup-label ~ * a.link.link--ghost:focus-visible,
#popup-label ~ * a.link.link--ghost:active {
  outline: none !important;
  box-shadow: none !important;
  border: 0 !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* =========================================================
   DESKTOP CART PANEL — MATCH MENU GLASS PANEL
========================================================= */
@media (min-width: 768px) {

  /* main cart shell */
  #cart-desktop #cart > .contents > .flex.flex-col.gap-5.rounded-md {
  background: rgba(202, 204, 207, 0.96) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 16px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05) !important;
  overflow: hidden !important;
}

  /* sticky header area */
  #cart-desktop .sticky.top-0.z-10 {
    background: transparent !important;
    padding: 18px 20px 12px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
  }

  /* cart item scrolling area */
  #cart-desktop .md\:overflow-auto.md\:max-h-\[calc\(100dvh-225px\)\].md\:px-4 {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 14px !important;
  }

  /* cart totals portal block */
  #cart-desktop-fixed > .relative,
  #cart-desktop [x-ref="CartTotals"] {
    background: transparent !important;
  }

  /* order summary dropdown panel */
  #cart-desktop [x-ref="CartTotals"] .absolute.end-0.start-0.top-0 .flex.flex-col.gap-4.bg-bg-500,
#cart-desktop-fixed .absolute.end-0.start-0.top-0 .flex.flex-col.gap-4.bg-bg-500 {
  background: rgba(202, 204, 207, 0.96) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

  /* note dropdown panel */
  #cart-desktop [x-ref="CartTotals"] textarea.input__field,
  #cart-desktop-fixed textarea.input__field {
    background: rgba(255, 255, 255, 0.72) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
  }

  /* bottom checkout area */
  #cart-desktop .pointer-events-none.px-3.relative.-mx-4.rounded-b-md.bg-bg-500,
  #cart-desktop-fixed .pointer-events-none.px-3.relative.-mx-4.rounded-b-md.bg-bg-500 {
    background: transparent !important;
    padding: 14px 20px 18px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
  }

  /* order total row */
  #cart-desktop form#cart_form > .flex.items-center.justify-between,
  #cart-desktop-fixed form#cart_form > .flex.items-center.justify-between {
    background: transparent !important;
    padding: 0 0 14px !important;
  }

  /* button row spacing */
  #cart-desktop .mt-2.flex.flex-col.gap-4.rounded-b-xl,
  #cart-desktop-fixed .mt-2.flex.flex-col.gap-4.rounded-b-xl {
    background: transparent !important;
    margin-top: 10px !important;
    gap: 14px !important;
    padding: 0 !important;
  }

  /* dividers softer */
  #cart-desktop .divider,
  #cart-desktop-fixed .divider {
    opacity: 0.22 !important;
  }

  /* view cart link cleanup */
  #cart-desktop a.link.link--ghost,
  #cart-desktop-fixed a.link.link--ghost {
    outline: none !important;
    box-shadow: none !important;
    border: 0 !important;
    text-decoration: none !important;
  }

  #cart-desktop a.link.link--ghost:focus,
  #cart-desktop a.link.link--ghost:focus-visible,
  #cart-desktop-fixed a.link.link--ghost:focus,
  #cart-desktop-fixed a.link.link--ghost:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border: 0 !important;
  }
}

/* =========================================================
   DESKTOP CART — REMOVE NOTES, KEEP ONLY TOTAL + CHECKOUT
========================================================= */
@media (min-width: 768px) {



  /* clean fixed footer wrapper */
  #cart-desktop-fixed > .contents > .relative[x-ref="CartTotals"] {
    position: relative !important;
    min-height: auto !important;
    padding: 0 !important;
  }

  /* order summary expandable top panel */
  #cart-desktop-fixed > .contents > .relative[x-ref="CartTotals"] 
  > .absolute.end-0.start-0.top-0.origin-bottom.transition-all {
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    transform: translateY(-44px) !important;
    z-index: 3 !important;
  }

  /* keep summary panel clean */
  #cart-desktop-fixed > .contents > .relative[x-ref="CartTotals"]
  > .absolute .flex.flex-col.gap-4.bg-bg-500 {
    padding: 18px 20px 14px !important;
    border-radius: 16px 16px 0 0 !important;
    min-height: auto !important;
  }

  /* main lower footer slab */
  #cart-desktop-fixed .pointer-events-none.px-3.relative.-mx-4.rounded-b-md.bg-bg-500 {
    margin: 52px 0 0 !important;
    padding: 18px 20px 20px !important;
    border-radius: 0 0 16px 16px !important;
    box-sizing: border-box !important;
  }

  /* order total row */
  #cart-desktop-fixed form#cart_form > .flex.items-center.justify-between {
    padding: 0 0 14px !important;
    margin: 0 !important;
    min-height: 44px !important;
    border-bottom: 1px solid rgba(255,255,255,0.12);
  }

  /* only keep checkout row */
  #cart-desktop-fixed .mt-2.flex.flex-col.gap-4.rounded-b-xl {
    margin-top: 16px !important;
    gap: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  #cart-desktop-fixed .mt-2.flex.flex-col.gap-4.rounded-b-xl > .flex.gap-4 {
    display: block !important;
  }

  /* checkout button full width */
  #cart-desktop-fixed .button.button--filled-primary.h-11.w-full {
    width: 100% !important;
    min-height: 54px !important;
    margin: 0 !important;
  }

  /* remove any leftover divider weirdness */
  #cart-desktop-fixed .divider {
    opacity: 0.22 !important;
  }
}

/* =========================================================
   DESKTOP CART — HIDE ORDER SUMMARY TOGGLE BUTTON ONLY
========================================================= */
@media (min-width: 768px) {
  #cart-desktop-fixed form#cart_form
  .button.button--outline-secondary.icon-button.icon-button--size-xs,
  #cart-desktop-fixed [x-ref="CartTotals"]
  .button.button--outline-secondary.icon-button.icon-button--size-xs {
    display: none !important;
  }
}

/* =========================================================
   CART CHECKOUT BUTTON — FORCE WHITE OUTLINE
========================================================= */
@media (min-width: 768px) {
  #cart-desktop-fixed button.button.button--filled-primary.h-11.w-full,
  #cart-desktop-fixed button.button.button--filled-primary.h-11.w-full:hover,
  #cart-desktop-fixed button.button.button--filled-primary.h-11.w-full:focus,
  #cart-desktop-fixed button.button.button--filled-primary.h-11.w-full:focus-visible,
  #cart-desktop-fixed button.button.button--filled-primary.h-11.w-full:active {
    border: 1px solid #ffffff !important;
  }

  #cart-desktop-fixed button.button.button--filled-primary.h-11.w-full::after {
    border-color: #ffffff !important;
  }
}

/* =========================================================
   CART — MAKE ORDER TOTAL AREA DARKER / MORE LEGIBLE
========================================================= */
@media (min-width: 768px) {
  #cart-desktop-fixed > .contents > div:last-child,
  #cart-desktop-fixed .pointer-events-none.px-3.relative.-mx-4.rounded-b-md.bg-bg-500 {
    background: rgba(185, 185, 185, 0.98) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* order total row */
  #cart-desktop-fixed .pointer-events-none.px-3.relative.-mx-4.rounded-b-md.bg-bg-500
  > form > div {
    background: rgba(185, 185, 185, 0.94) !important;
  }

  /* stronger divider feeling above footer area */
  #cart-desktop-fixed .pointer-events-none.px-3.relative.-mx-4.rounded-b-md.bg-bg-500::before {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    top: 0;
    height: 1px;
    background: rgba(255,255,255,0.22);
    pointer-events: none;
  }

  /* make text inside more readable */
  #cart-desktop-fixed h2,
  #cart-desktop-fixed p,
  #cart-desktop-fixed span,
  #cart-desktop-fixed button {
    color: #ffffff !important;
  }
}

@media (min-width: 768px) {
  .resizable--menu:not(.resizable--visible) #menu-desktop .menu__links,
  .resizable--menu:not(.resizable--visible) #menu-desktop .menu__links * {
    opacity: 0 !important;
    visibility: hidden !important;
    transition: none !important;
    pointer-events: none !important;
  }
}

/* Fallback */
.cart-page h1.flex.items-center.text-lg.text-text-500,
main h1.flex.items-center.text-lg.text-text-500 {
  display: none !important;
}



/* =========================================
   PERFORMANCE SAFETY — REDUCE HEAVY EFFECTS
========================================= */
@media (prefers-reduced-motion: reduce) {
  .lux-cinematic-reveal,
  .lux-reveal-up,
  .lux-desktop-logo-inner,
  header.lux-header,
  header.lux-header::before,
  .kim-story-pager__page,
  .lux-social-inner,
  .button::after,
  .kim-purpose-split__button::after,
  .kim-product-editorial__button::after,
  .lux-social-btn::after {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}

/* Safari / lower-power friendly fallback */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  header.lux-header.is-filled .content-wrapper,
  header.lux-header.is-top .resizable--menu.resizable--visible #menu-desktop .menu__wrapper,
  header.lux-header.is-filled .resizable--menu.resizable--visible #menu-desktop .menu__wrapper,
  header.lux-header.is-visible.is-filled .resizable--menu.resizable--visible #menu-desktop .menu__wrapper,
  #cart-desktop #cart > .contents > .flex.flex-col.gap-5.rounded-md {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(202, 204, 207, 0.96) !important;
  }
}

/* CART DRAWER / POPUP — quantity controls outline */
#cart-desktop .flex.max-w-min.items-center.gap-3 .button.button--outline-secondary,
#cart-desktop .flex.max-w-min.items-center.gap-3 .input__field,
#cart-desktop-fixed .flex.max-w-min.items-center.gap-3 .button.button--outline-secondary,
#cart-desktop-fixed .flex.max-w-min.items-center.gap-3 .input__field {
  border: 1px solid #808080 !important;
  color: #808080 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  transition: border-color 0.25s ease, color 0.25s ease, background-color 0.25s ease !important;
}

#cart-desktop .flex.max-w-min.items-center.gap-3 .button.button--outline-secondary svg,
#cart-desktop .flex.max-w-min.items-center.gap-3 .button.button--outline-secondary svg path,
#cart-desktop-fixed .flex.max-w-min.items-center.gap-3 .button.button--outline-secondary svg,
#cart-desktop-fixed .flex.max-w-min.items-center.gap-3 .button.button--outline-secondary svg path {
  fill: #808080 !important;
  stroke: #808080 !important;
}

/* softer hover / focus state */
#cart-desktop .flex.max-w-min.items-center.gap-3 .button.button--outline-secondary:hover,
#cart-desktop .flex.max-w-min.items-center.gap-3 .button.button--outline-secondary:focus,
#cart-desktop .flex.max-w-min.items-center.gap-3 .button.button--outline-secondary:focus-visible,
#cart-desktop .flex.max-w-min.items-center.gap-3 .input__field:hover,
#cart-desktop .flex.max-w-min.items-center.gap-3 .input__field:focus,
#cart-desktop .flex.max-w-min.items-center.gap-3 .input__field:focus-visible,
#cart-desktop-fixed .flex.max-w-min.items-center.gap-3 .button.button--outline-secondary:hover,
#cart-desktop-fixed .flex.max-w-min.items-center.gap-3 .button.button--outline-secondary:focus,
#cart-desktop-fixed .flex.max-w-min.items-center.gap-3 .button.button--outline-secondary:focus-visible,
#cart-desktop-fixed .flex.max-w-min.items-center.gap-3 .input__field:hover,
#cart-desktop-fixed .flex.max-w-min.items-center.gap-3 .input__field:focus,
#cart-desktop-fixed .flex.max-w-min.items-center.gap-3 .input__field:focus-visible {
  border-color: rgba(128, 128, 128, 0.48) !important;
  box-shadow: none !important;
  outline: none !important;
}



/* =========================================================
   DESKTOP MENU PANEL — KEEP TEXT WHITE DURING HEADER HIDE
   fixes brown/grey color flash while header slides up
========================================================= */
@media (min-width: 768px) {

  /* menu links stay white in all visible/open header states */
  header.lux-header.is-top .resizable--menu.resizable--visible #menu-desktop,
  header.lux-header.is-top .resizable--menu.resizable--visible #menu-desktop a,
  header.lux-header.is-top .resizable--menu.resizable--visible #menu-desktop span,
  header.lux-header.is-top .resizable--menu.resizable--visible #menu-desktop p,

  header.lux-header.is-visible .resizable--menu.resizable--visible #menu-desktop,
  header.lux-header.is-visible .resizable--menu.resizable--visible #menu-desktop a,
  header.lux-header.is-visible .resizable--menu.resizable--visible #menu-desktop span,
  header.lux-header.is-visible .resizable--menu.resizable--visible #menu-desktop p,

  header.lux-header.is-filled .resizable--menu.resizable--visible #menu-desktop,
  header.lux-header.is-filled .resizable--menu.resizable--visible #menu-desktop a,
  header.lux-header.is-filled .resizable--menu.resizable--visible #menu-desktop span,
  header.lux-header.is-filled .resizable--menu.resizable--visible #menu-desktop p,

  header.lux-header.is-hidden .resizable--menu.resizable--visible #menu-desktop,
  header.lux-header.is-hidden .resizable--menu.resizable--visible #menu-desktop a,
  header.lux-header.is-hidden .resizable--menu.resizable--visible #menu-desktop span,
  header.lux-header.is-hidden .resizable--menu.resizable--visible #menu-desktop p {
    color: #ffffff !important;
  }

  /* menu icons stay white */
  header.lux-header.is-top .resizable--menu.resizable--visible #menu-desktop svg,
  header.lux-header.is-top .resizable--menu.resizable--visible #menu-desktop svg path,

  header.lux-header.is-visible .resizable--menu.resizable--visible #menu-desktop svg,
  header.lux-header.is-visible .resizable--menu.resizable--visible #menu-desktop svg path,

  header.lux-header.is-filled .resizable--menu.resizable--visible #menu-desktop svg,
  header.lux-header.is-filled .resizable--menu.resizable--visible #menu-desktop svg path,

  header.lux-header.is-hidden .resizable--menu.resizable--visible #menu-desktop svg,
  header.lux-header.is-hidden .resizable--menu.resizable--visible #menu-desktop svg path {
    fill: #ffffff !important;
    stroke: #ffffff !important;
  }

  /* login / signup button stays white */
  header.lux-header.is-top .resizable--menu.resizable--visible #menu-desktop-fixed .button.button--filled-primary,
  header.lux-header.is-visible .resizable--menu.resizable--visible #menu-desktop-fixed .button.button--filled-primary,
  header.lux-header.is-filled .resizable--menu.resizable--visible #menu-desktop-fixed .button.button--filled-primary,
  header.lux-header.is-hidden .resizable--menu.resizable--visible #menu-desktop-fixed .button.button--filled-primary {
    color: #ffffff !important;
    border-color: #ffffff !important;
    background: transparent !important;
  }

  header.lux-header.is-top .resizable--menu.resizable--visible #menu-desktop-fixed .button.button--filled-primary span,
  header.lux-header.is-visible .resizable--menu.resizable--visible #menu-desktop-fixed .button.button--filled-primary span,
  header.lux-header.is-filled .resizable--menu.resizable--visible #menu-desktop-fixed .button.button--filled-primary span,
  header.lux-header.is-hidden .resizable--menu.resizable--visible #menu-desktop-fixed .button.button--filled-primary span {
    color: #ffffff !important;
  }

  header.lux-header.is-top .resizable--menu.resizable--visible #menu-desktop-fixed .button.button--filled-primary svg,
  header.lux-header.is-top .resizable--menu.resizable--visible #menu-desktop-fixed .button.button--filled-primary svg path,
  header.lux-header.is-visible .resizable--menu.resizable--visible #menu-desktop-fixed .button.button--filled-primary svg,
  header.lux-header.is-visible .resizable--menu.resizable--visible #menu-desktop-fixed .button.button--filled-primary svg path,
  header.lux-header.is-filled .resizable--menu.resizable--visible #menu-desktop-fixed .button.button--filled-primary svg,
  header.lux-header.is-filled .resizable--menu.resizable--visible #menu-desktop-fixed .button.button--filled-primary svg path,
  header.lux-header.is-hidden .resizable--menu.resizable--visible #menu-desktop-fixed .button.button--filled-primary svg,
  header.lux-header.is-hidden .resizable--menu.resizable--visible #menu-desktop-fixed .button.button--filled-primary svg path {
    fill: #ffffff !important;
    stroke: #ffffff !important;
  }

  /* keep the button fill layer white too */
  header.lux-header.is-top .resizable--menu.resizable--visible #menu-desktop-fixed .button.button--filled-primary::after,
  header.lux-header.is-visible .resizable--menu.resizable--visible #menu-desktop-fixed .button.button--filled-primary::after,
  header.lux-header.is-filled .resizable--menu.resizable--visible #menu-desktop-fixed .button.button--filled-primary::after,
  header.lux-header.is-hidden .resizable--menu.resizable--visible #menu-desktop-fixed .button.button--filled-primary::after {
    background: #ffffff !important;
  }
}



/* =========================================================
   DESKTOP CART PANEL — KEEP TEXT WHITE DURING HEADER HIDE
   fixes brown/grey color flash while header slides up
========================================================= */
@media (min-width: 768px) {

  /* cart panel text stays white in all visible/open header states */
  header.lux-header.is-top #cart-desktop,
  header.lux-header.is-top #cart-desktop a,
  header.lux-header.is-top #cart-desktop span,
  header.lux-header.is-top #cart-desktop p,
  header.lux-header.is-top #cart-desktop h2,
  header.lux-header.is-top #cart-desktop h3,
  header.lux-header.is-top #cart-desktop label,
  header.lux-header.is-top #cart-desktop input,
  header.lux-header.is-top #cart-desktop button,

  header.lux-header.is-visible #cart-desktop,
  header.lux-header.is-visible #cart-desktop a,
  header.lux-header.is-visible #cart-desktop span,
  header.lux-header.is-visible #cart-desktop p,
  header.lux-header.is-visible #cart-desktop h2,
  header.lux-header.is-visible #cart-desktop h3,
  header.lux-header.is-visible #cart-desktop label,
  header.lux-header.is-visible #cart-desktop input,
  header.lux-header.is-visible #cart-desktop button,

  header.lux-header.is-filled #cart-desktop,
  header.lux-header.is-filled #cart-desktop a,
  header.lux-header.is-filled #cart-desktop span,
  header.lux-header.is-filled #cart-desktop p,
  header.lux-header.is-filled #cart-desktop h2,
  header.lux-header.is-filled #cart-desktop h3,
  header.lux-header.is-filled #cart-desktop label,
  header.lux-header.is-filled #cart-desktop input,
  header.lux-header.is-filled #cart-desktop button,

  header.lux-header.is-hidden #cart-desktop,
  header.lux-header.is-hidden #cart-desktop a,
  header.lux-header.is-hidden #cart-desktop span,
  header.lux-header.is-hidden #cart-desktop p,
  header.lux-header.is-hidden #cart-desktop h2,
  header.lux-header.is-hidden #cart-desktop h3,
  header.lux-header.is-hidden #cart-desktop label,
  header.lux-header.is-hidden #cart-desktop input,
  header.lux-header.is-hidden #cart-desktop button {
    color: #ffffff !important;
  }

  /* cart panel icons stay white */
  header.lux-header.is-top #cart-desktop svg,
  header.lux-header.is-top #cart-desktop svg path,
  header.lux-header.is-visible #cart-desktop svg,
  header.lux-header.is-visible #cart-desktop svg path,
  header.lux-header.is-filled #cart-desktop svg,
  header.lux-header.is-filled #cart-desktop svg path,
  header.lux-header.is-hidden #cart-desktop svg,
  header.lux-header.is-hidden #cart-desktop svg path {
    fill: #ffffff !important;
    stroke: #ffffff !important;
  }

  /* checkout button stays white */
  header.lux-header.is-top #cart-desktop .button.button--filled-primary,
  header.lux-header.is-visible #cart-desktop .button.button--filled-primary,
  header.lux-header.is-filled #cart-desktop .button.button--filled-primary,
  header.lux-header.is-hidden #cart-desktop .button.button--filled-primary {
    color: #ffffff !important;
    border-color: #ffffff !important;
    background: transparent !important;
  }

  header.lux-header.is-top #cart-desktop .button.button--filled-primary span,
  header.lux-header.is-visible #cart-desktop .button.button--filled-primary span,
  header.lux-header.is-filled #cart-desktop .button.button--filled-primary span,
  header.lux-header.is-hidden #cart-desktop .button.button--filled-primary span {
    color: #ffffff !important;
  }

  header.lux-header.is-top #cart-desktop .button.button--filled-primary svg,
  header.lux-header.is-top #cart-desktop .button.button--filled-primary svg path,
  header.lux-header.is-visible #cart-desktop .button.button--filled-primary svg,
  header.lux-header.is-visible #cart-desktop .button.button--filled-primary svg path,
  header.lux-header.is-filled #cart-desktop .button.button--filled-primary svg,
  header.lux-header.is-filled #cart-desktop .button.button--filled-primary svg path,
  header.lux-header.is-hidden #cart-desktop .button.button--filled-primary svg,
  header.lux-header.is-hidden #cart-desktop .button.button--filled-primary svg path {
    fill: #ffffff !important;
    stroke: #ffffff !important;
  }

  header.lux-header.is-top #cart-desktop .button.button--filled-primary::after,
  header.lux-header.is-visible #cart-desktop .button.button--filled-primary::after,
  header.lux-header.is-filled #cart-desktop .button.button--filled-primary::after,
  header.lux-header.is-hidden #cart-desktop .button.button--filled-primary::after {
    background: #ffffff !important;
  }
}

/* =========================================================
   MOBILE HEADER TRIGGERS — KEEP MENU + CART ICONS WHITE
   while header changes state / hides on scroll
========================================================= */
@media (max-width: 767px) {

  /* menu + cart trigger buttons stay white in all header states */
  header.lux-header.is-top #menu-desktop-initial .button,
  header.lux-header.is-top #cart-desktop-initial .button,
  header.lux-header.is-visible #menu-desktop-initial .button,
  header.lux-header.is-visible #cart-desktop-initial .button,
  header.lux-header.is-filled #menu-desktop-initial .button,
  header.lux-header.is-filled #cart-desktop-initial .button,
  header.lux-header.is-hidden #menu-desktop-initial .button,
  header.lux-header.is-hidden #cart-desktop-initial .button,

  header.lux-header.is-top #menu-desktop-initial a,
  header.lux-header.is-top #cart-desktop-initial a,
  header.lux-header.is-visible #menu-desktop-initial a,
  header.lux-header.is-visible #cart-desktop-initial a,
  header.lux-header.is-filled #menu-desktop-initial a,
  header.lux-header.is-filled #cart-desktop-initial a,
  header.lux-header.is-hidden #menu-desktop-initial a,
  header.lux-header.is-hidden #cart-desktop-initial a {
    color: #ffffff !important;
    border-color: transparent !important;
  }

  /* menu + cart trigger icons stay white */
  header.lux-header.is-top #menu-desktop-initial svg,
  header.lux-header.is-top #menu-desktop-initial svg path,
  header.lux-header.is-top #cart-desktop-initial svg,
  header.lux-header.is-top #cart-desktop-initial svg path,

  header.lux-header.is-visible #menu-desktop-initial svg,
  header.lux-header.is-visible #menu-desktop-initial svg path,
  header.lux-header.is-visible #cart-desktop-initial svg,
  header.lux-header.is-visible #cart-desktop-initial svg path,

  header.lux-header.is-filled #menu-desktop-initial svg,
  header.lux-header.is-filled #menu-desktop-initial svg path,
  header.lux-header.is-filled #cart-desktop-initial svg,
  header.lux-header.is-filled #cart-desktop-initial svg path,

  header.lux-header.is-hidden #menu-desktop-initial svg,
  header.lux-header.is-hidden #menu-desktop-initial svg path,
  header.lux-header.is-hidden #cart-desktop-initial svg,
  header.lux-header.is-hidden #cart-desktop-initial svg path {
    fill: #ffffff !important;
    stroke: #ffffff !important;
  }

  /* prevent theme ghost/secondary styles from tinting them */
  header.lux-header.is-top #menu-desktop-initial .contrast-border,
  header.lux-header.is-top #cart-desktop-initial .contrast-border,
  header.lux-header.is-visible #menu-desktop-initial .contrast-border,
  header.lux-header.is-visible #cart-desktop-initial .contrast-border,
  header.lux-header.is-filled #menu-desktop-initial .contrast-border,
  header.lux-header.is-filled #cart-desktop-initial .contrast-border,
  header.lux-header.is-hidden #menu-desktop-initial .contrast-border,
  header.lux-header.is-hidden #cart-desktop-initial .contrast-border {
    color: #ffffff !important;
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}



/* =========================================================
   PRODUCT PAGE — TITLE + PRICE = #808080
========================================================= */

/* product title */
.product-details h1.heading.text-text-500,
.product-details form h1.heading.text-text-500,
.product-details .heading.mb-1.ps-4.text-md.leading-tight.text-text-500 {
  color: #808080 !important;
}

/* price wrapper */
.product-details .price__element,
.product-details .price__element.text-text-500,
.product-details [id^="price-"] .price__element {
  color: #808080 !important;
}

/* actual price text */
.product-details .price__element .text-primary-600,
.product-details [id^="price-"] .text-primary-600 {
  color: #808080 !important;
}

/* =========================================================
   PRODUCT PAGE — SHARE BUTTON FIX
   remove inner seam / keep one clean outline
========================================================= */

/* OUTER real button only */
#template--20146969608391__main-share-btn {
  position: relative;
  background: transparent !important;
  border: 1px solid #808080 !important;
  color: #808080 !important;
  overflow: hidden !important;
  transition: color 0.4s ease !important;
  z-index: 1;
  box-shadow: none !important;
  outline: none !important;
}

/* inner wrapper = no border/background of its own */
#template--20146969608391__main-share-btn .button {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  position: static !important;
  overflow: visible !important;
  padding: 0 !important;
  min-height: auto !important;
}

/* text */
#template--20146969608391__main-share-btn,
#template--20146969608391__main-share-btn span,
#template--20146969608391__main-share-btn .button,
#template--20146969608391__main-share-btn .button span {
  color: #808080 !important;
}

/* icon */
#template--20146969608391__main-share-btn svg,
#template--20146969608391__main-share-btn svg path {
  fill: currentColor !important;
}

/* single fill layer on outer button only */
#template--20146969608391__main-share-btn::after {
  content: "";
  position: absolute;
  inset: -1px;
  background: #808080 !important;
  border-radius: inherit;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  backface-visibility: hidden;
  z-index: -1;
}

/* hover */
@media (hover: hover) {
  #template--20146969608391__main-share-btn:hover,
  #template--20146969608391__main-share-btn:hover span {
    color: #ffffff !important;
  }

  #template--20146969608391__main-share-btn:hover svg,
  #template--20146969608391__main-share-btn:hover svg path {
    fill: #ffffff !important;
  }

  #template--20146969608391__main-share-btn:hover::after {
    transform: scaleY(1);
  }
}

/* focus */
#template--20146969608391__main-share-btn:focus,
#template--20146969608391__main-share-btn:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* hover */
@media (hover: hover) {
  #template--20146969608391__main-share-btn:hover,
  #template--20146969608391__main-share-btn:hover span,
  #template--20146969608391__main-share-btn .button:hover,
  #template--20146969608391__main-share-btn .button:hover span {
    color: #ffffff !important;
  }

  #template--20146969608391__main-share-btn:hover svg,
  #template--20146969608391__main-share-btn:hover svg path,
  #template--20146969608391__main-share-btn .button:hover svg,
  #template--20146969608391__main-share-btn .button:hover svg path {
    fill: #ffffff !important;
  }

  #template--20146969608391__main-share-btn:hover::after,
  #template--20146969608391__main-share-btn .button:hover::after {
    transform: scaleY(1);
  }
}

/* focus state */
#template--20146969608391__main-share-btn:focus,
#template--20146969608391__main-share-btn:focus-visible,
#template--20146969608391__main-share-btn .button:focus,
#template--20146969608391__main-share-btn .button:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* =========================================================
   PRODUCT CARD — TITLE LEFT / PRICE RIGHT, SAME BASELINE
========================================================= */

/* main bottom content wrapper */
.card-product .relative.flex.flex-1.flex-col {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  min-height: 0 !important;
}

/* title block */
.card-product .mt-4.flex.flex-1.flex-col.gap-1 {
  display: block !important;
  flex: 0 0 auto !important;
  margin-top: 18px !important;
  margin-bottom: 0 !important;
  padding-right: 140px !important; /* room for price on right */
  position: relative !important;
}

/* title */
.card-product h2.text-md.text-text-500 {
  margin: 0 !important;
  max-width: 100% !important;
  line-height: 1.12 !important;
}

/* price row becomes absolutely positioned to align with title area */
.card-product .flex.items-end.flex-grow.gap-3.mt-3 {
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  margin: 0 !important;
  width: auto !important;
  flex-grow: 0 !important;
  align-items: flex-end !important;
  justify-content: flex-end !important;
}

/* price styling */
.card-product .price__element,
.card-product .price__element.z-10.flex.items-center.gap-2.text-text-500.text-md.mt-3 {
  margin: 0 !important;
  padding: 0 !important;
  text-align: right !important;
  justify-content: flex-end !important;
  white-space: nowrap !important;
  line-height: 1.12 !important;
}

/* keep quick add from interfering */
.card-product .mt-4.flex.flex-1.flex-col.gap-1 .absolute.end-0.text-2xl {
  top: 0 !important;
  right: 0 !important;
}

/* mobile stays stacked */
@media (max-width: 767px) {
  .card-product .mt-4.flex.flex-1.flex-col.gap-1 {
    padding-right: 48px !important;
  }

  .card-product .flex.items-end.flex-grow.gap-3.mt-3 {
    position: static !important;
    margin-top: 12px !important;
    justify-content: flex-start !important;
  }

  .card-product .price__element,
  .card-product .price__element.z-10.flex.items-center.gap-2.text-text-500.text-md.mt-3 {
    text-align: left !important;
    justify-content: flex-start !important;
  }
}

/* =========================================================
   POLICY PAGE — bordered section/container
========================================================= */
.shopify-policy__container {
  width: calc(100% - 64px) !important;
  max-width: none !important;
  margin: 88px auto 24px !important;
  padding: 34px 40px 44px !important;
  background: #ECEDEF;
  border-radius: 16px;
}

.shopify-policy__title {
  margin: 0 0 26px !important;
  text-align: center;
}

.shopify-policy__title h1 {
  margin: 0 !important;
  font-size: clamp(34px, 4vw, 56px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.03em !important;
  font-weight: 500 !important;
  color: #4F4C46 !important;
}

@media (max-width: 767px) {
  .shopify-policy__container {
    width: calc(100% - 24px) !important;
    margin: 40px auto 16px !important;
    padding: 24px 20px 28px !important;
    border-radius: 16px;
  }

  .shopify-policy__title h1 {
    font-size: clamp(28px, 8vw, 40px) !important;
  }
}

:root {
  --lux-gutter-desktop: 64px;
  --lux-gutter-mobile: 24px;
  --lux-frame-max: 1440px;
}

@media (min-width: 768px) {
  .lux-social-frame,
  .kim-purpose-split__frame,
  .kim-story-split__frame,
  .kim-product-editorial__frame,
  .lux-founder-note__frame,
  .shopify-policy__container,
  #shopify-section-template--20146969280711__main .content-wrapper.mx-auto,
  #shopify-section-template--20283037548743__featured_collection_TH8GhR .slider.slider--full-width,
  footer.footer .content-wrapper,
  header.lux-header .content-wrapper,
  .shopify-section[id*="__image_banner"] > .relative.overflow-hidden {
    width: min(calc(100% - var(--lux-gutter-desktop)), var(--lux-frame-max)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* =========================================================
   GLOBAL MOBILE SHARED SECTION WIDTH — 100% - 30px
========================================================= */
@media (max-width: 767px) {
  :root {
    --lux-gutter-mobile: 30px;
  }

  .lux-social-frame,
  .kim-purpose-split__frame,
  .kim-story-split__frame,
  .kim-product-editorial__frame,
  .lux-founder-note__frame,
  .shopify-policy__container,
  #shopify-section-template--20146969280711__main .content-wrapper.mx-auto,
  #shopify-section-template--20283037548743__featured_collection_TH8GhR .slider.slider--full-width,
  footer.footer .content-wrapper,
  header.lux-header .content-wrapper,
  .shopify-section[id*="__image_banner"] > .relative.overflow-hidden {
    width: calc(100% - var(--lux-gutter-mobile)) !important;
    max-width: calc(100% - var(--lux-gutter-mobile)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
/* =========================================================
   PRODUCT PAGE — LOW STOCK NOTE
========================================================= */
.product-stock-note__text {
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: 0;
  font-weight: 500;
  color: #808080;
  margin: 0;
}

@media (min-width: 768px) {
  .product-stock-note__text {
    font-size: 15px;
  }
}

/* =========================================================
  MOBILE HEADER ICONS — FORCE WHITE ON HERO
========================================================= */
@media (max-width: 767px) {

 /* menu + cart trigger buttons */
 .lux-header.is-top .resizable--menu > .resizable__wrapper > .resizable__content--trigger .button,
 .lux-header.is-top .resizable--cart > .resizable__wrapper > .resizable__content--trigger .button,
 .lux-header.is-top .resizable--cart > .resizable__wrapper > .resizable__content--trigger a {
   color: #ffffff !important;
   border-color: transparent !important;
   background: transparent !important;
 }

 /* svg icon color */
 .lux-header.is-top .resizable--menu > .resizable__wrapper > .resizable__content--trigger .button svg,
 .lux-header.is-top .resizable--menu > .resizable__wrapper > .resizable__content--trigger .button svg path,
 .lux-header.is-top .resizable--cart > .resizable__wrapper > .resizable__content--trigger a svg,
 .lux-header.is-top .resizable--cart > .resizable__wrapper > .resizable__content--trigger a svg path {
   fill: #ffffff !important;
   color: #ffffff !important;
   stroke: none !important;
 }

 /* if any icon wrapper is inheriting theme brown */
 .lux-header.is-top .resizable--menu .contents,
 .lux-header.is-top .resizable--cart .contents {
   color: #ffffff !important;
 }
}



/* =========================================================
  MOBILE HEADER LOGO — FIX STRETCH / DISTORTION
========================================================= */
@media (max-width: 767px) {

 /* mobile center logo wrapper */
 header.lux-header .col-start-3 {
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   min-width: 0 !important;
 }

 header.lux-header .col-start-3 > a {
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   padding: 0 !important;
   width: auto !important;
   max-width: 100% !important;
 }

 /* actual mobile logo image */
 header.lux-header .col-start-3 img,
 header.lux-header .col-start-3 a img,
 header.lux-header .col-start-3 .faded-img {
   height: auto !important;
   width: auto !important;
   max-width: 146px !important;
   max-height: 40px !important;
   object-fit: contain !important;
   object-position: center !important;
   display: block !important;
 }

 /* specifically override inline height:100px */
 header.lux-header .col-start-3 img[style] {
   height: auto !important;
   max-height: 52px !important;
 }
}

/* Center empty cart message on mobile */
@media (max-width: 767px) {
  .max-h-80.pb-4.md\:px-6 p {
    text-align: center !important;
    width: 100% !important;
    margin: 0 auto !important;
  }
}

/* Mobile — center Shopping cart heading */
@media (max-width: 767px) {
  h1#popup-label.flex.items-center.text-lg.text-text-500.md\:text-md {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

/* =========================================================
   HERO HEADING — MOBILE 2-LINE LOCKUP
========================================================= */
@media (max-width: 767px) {
  #shopify-section-template--20146968985799__image_banner h2.heading.text-4xl.leading-tight.md\:text-6xl.md\:leading-tight {
    font-size: clamp(27px, 7vw, 34px) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.04em !important;
    font-weight: 400 !important;
    text-align: center !important;
    max-width: 13ch !important;
    margin: 0 auto !important;
    color: rgba(255, 255, 255, 1) !important;
    text-wrap: balance !important;
  }
}

/* =========================================================
   MOBILE MENU POPUP — FULLY LOCK WIDTH / STOP EXPANDING
========================================================= */
@media (max-width: 767px) {

  /* outer popup / portal layers */
  #menu-desktop,
  #menu,
  #menu .contents,
  #menu .menu__wrapper,
  #menu .menu__level,
  #menu .menu__header,
  #menu .menu__links,
  #popup-content-portal,
  #popup-fixed-content-portal {
    box-sizing: border-box !important;
  }

  /* force the actual mobile menu container to stay inset */
  #menu {
    width: calc(100% - 30px) !important;
    max-width: calc(100% - 30px) !important;
    margin: 0 auto !important;
  }

  /* keep nav from growing wider than its parent */
  #menu nav[aria-label="Main menu"] {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    background: #ECEDEF !important;
  }

  /* also constrain the scroll/portal shell */
  #menu-desktop,
  #menu-desktop .resizable__scroll,
  #menu .menu__wrapper,
  #menu .menu__level {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* search row */
  #menu form[role="search"] {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    left: auto !important;
    right: auto !important;
    margin: 0 auto !important;
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
  }

  /* kill anything creating visual overshoot */
  #menu .divider.-mx-5,
  #menu .-mx-5,
  #menu .-mx-3,
  #menu .-mx-4,
  #menu .-mx-2 {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* keep inner spacing clean */
  #menu .menu__header,
  #menu .menu__links,
  #menu .h-20.md\:hidden {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* bottom login area */
  #menu .w-full.bg-bg-500.px-4.pb-2 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-bottom: 16px !important;
    background: #ECEDEF !important;
  }

  /* prevent hidden overflow from making it feel like it scales out */
  #menu,
  #menu-desktop,
  #menu .menu__wrapper,
  #menu .menu__level {
    overflow-x: clip !important;
  }
}

@media (max-width: 767px) {
  .popup__main,
  .popup__wrapper,
  .resizable__content--portal,
  .resizable__scroll {
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: clip !important;
  }
}

/* =========================================================
   MOBILE MENU — CENTER MENU ITEMS
========================================================= */
@media (max-width: 767px) {
  #menu .menu__links {
    text-align: center !important;
  }

  #menu .menu__links li {
    display: block !important;
  }

  #menu .menu__links a {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #menu .menu__links a .link {
    max-width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    border-bottom: 0 !important;
  }
}



@media (max-width: 768px) {
  .menu__heading.menu__heading--root {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
  }
}

/* ABOUT / OUR STORY IMAGE BANNER — MOBILE */
@media (max-width: 767px) {
  #shopify-section-template--20146969379015__image_banner_bmEPWM
  > .relative.overflow-hidden {
    width: calc(100% - 30px) !important;
    margin-left: auto !important;
    margin-right: auto !important;

    height: 78vh !important;
    max-height: 700px !important;
    min-height: 540px !important;

    transform: translateY(12px) !important;

    border-radius: 16px !important;
    overflow: hidden !important;
  }
}

/* =========================================================
   IMAGE BANNER — MOVE IMAGE UP
========================================================= */

/* desktop */
#shopify-section-template--20283037548743__image_banner_a9HAG8 img.max-md\:hidden {
  object-position: center 57% !important;
}

/* mobile */
#shopify-section-template--20283037548743__image_banner_a9HAG8 img.md\:hidden {
  object-position: center 100% !important;
}

/* SHOP IMAGE BANNER a9HAG8 — MOBILE */
@media (max-width: 767px) {
  #shopify-section-template--20283037548743__image_banner_a9HAG8
  > .relative.overflow-hidden {
    width: calc(100% - 30px) !important;
    margin-left: auto !important;
    margin-right: auto !important;

    height: 78vh !important;
    max-height: 700px !important;
    min-height: 540px !important;

    transform: translateY(-64px) !important;

    border-radius: 16px !important;
    overflow: hidden !important;
  }
}

/* =========================================================
   MINICART HEADER — KEEP "View cart (1)" ON ONE LINE
========================================================= */

@media (max-width: 767px) {
  .sticky.top-0.z-10 .link.link--ghost {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
  }

  .sticky.top-0.z-10 .link.link--ghost span {
    display: inline !important;
    white-space: nowrap !important;
    margin-left: 0 !important;
  }
}

/* =========================================================
   PRODUCT PAGE MOBILE IMAGE HOLDER — ALL SLIDES MATCH
   shared 100% - 30px width + same framed container
========================================================= */
@media (max-width: 767px) {

  /* outer mobile product media wrapper */
  #shopify-section-template--20146969608391__main
  .product-details
  > .contents.md\:hidden
  .grid__item.product__media-wrapper {
    width: calc(100% - 30px) !important;
    max-width: calc(100% - 30px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* slider */
  #shopify-section-template--20146969608391__main
  .product-details
  > .contents.md\:hidden
  .grid__item.product__media-wrapper
  .slider {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* track */
  #shopify-section-template--20146969608391__main
  .product-details
  > .contents.md\:hidden
  .slider__slides {
    width: 100% !important;
  }

  /* each mobile slide */
  #shopify-section-template--20146969608391__main
  .product-details
  > .contents.md\:hidden
  .slider__slide {
    width: 100% !important;
    min-width: 100% !important;
  }

  /* ALL image holders across all slides */
  #shopify-section-template--20146969608391__main
  .product-details
  > .contents.md\:hidden
  .slider__slide > div,
  #shopify-section-template--20146969608391__main
  .product-details
  > .contents.md\:hidden
  .slider__slide .aspect-product {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    background: #ECEDEF !important;
  }

  /* inner wrappers inside every slide */
  #shopify-section-template--20146969608391__main
  .product-details
  > .contents.md\:hidden
  .slider__slide .bg-\[--fade-in-bg\],
  #shopify-section-template--20146969608391__main
  .product-details
  > .contents.md\:hidden
  .slider__slide .bg-\[--fade-in-bg\].flex,
  #shopify-section-template--20146969608391__main
  .product-details
  > .contents.md\:hidden
  .slider__slide .hide-unless-transition {
    background: #ECEDEF !important;
    border-radius: 16px !important;
  }

  /* all images inside mobile product slider */
  #shopify-section-template--20146969608391__main
  .product-details
  > .contents.md\:hidden
  .slider__slide img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
  }
}

/* =========================================================
   PRODUCT PAGE MOBILE SLIDER ARROWS — ICON + BORDER #808080
========================================================= */
@media (max-width: 767px) {
  #shopify-section-template--20146969608391__main
  .product-details
  > .contents.md\:hidden
  .slider__actions .button {
    color: #808080 !important;
    border-color: #808080 !important;
  }

  #shopify-section-template--20146969608391__main
  .product-details
  > .contents.md\:hidden
  .slider__actions .button svg,
  #shopify-section-template--20146969608391__main
  .product-details
  > .contents.md\:hidden
  .slider__actions .button svg path {
    fill: #808080 !important;
    stroke: #808080 !important;
  }
}

/* =========================================================
   PRODUCT PAGE DESKTOP SLIDER ARROWS — ICON + BORDER #808080
========================================================= */
@media (min-width: 768px) {
  #shopify-section-template--20146969608391__main
  .product__media-wrapper
  .slider__actions .button {
    color: #808080 !important;
    border-color: #808080 !important;
  }

  #shopify-section-template--20146969608391__main
  .product__media-wrapper
  .slider__actions .button svg,
  #shopify-section-template--20146969608391__main
  .product__media-wrapper
  .slider__actions .button svg path {
    fill: #808080 !important;
    stroke: #808080 !important;
  }
}

/* remove desktop arrow hover background change */
@media (min-width: 768px) {
  #shopify-section-template--20146969608391__main
  .product__media-wrapper
  .slider__actions .button:hover,
  #shopify-section-template--20146969608391__main
  .product__media-wrapper
  .slider__actions .button:focus,
  #shopify-section-template--20146969608391__main
  .product__media-wrapper
  .slider__actions .button:focus-visible,
  #shopify-section-template--20146969608391__main
  .product__media-wrapper
  .slider__actions .button:active {
    background: transparent !important;
    box-shadow: none !important;
  }
}

/* =========================================================
   MOBILE MENU LINKS — CLICK AREA FITS TEXT ONLY
========================================================= */
@media (max-width: 767px) {
  #menu-sections .menu__links li {
    margin-bottom: 14px !important;
  }

  #menu-sections .menu__links a {
    display: inline-flex !important;
    width: auto !important;
    min-height: 0 !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #menu-sections .menu__links a .link {
    display: inline-block !important;
    width: auto !important;
    max-width: none !important;
    white-space: nowrap !important;
  }
}

/* =========================================================
   MOBILE MENU LINKS PANEL — ROUND ONLY THE LINKS AREA
========================================================= */
@media (max-width: 767px) {

  /* keep outer wrapper clean */
  #menu-sections {
    width: 100% !important;
    background: #F7F8F9 !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* do not style the heading/header row */
  #menu-sections .menu__header {
    background: #F7F8F9 !important;
    border: 0 !important;
    box-shadow: none !important;
  }


  /* center items nicely inside */
  #menu-sections .menu__links > li {
    display: flex !important;
    justify-content: center !important;
  }

  /* cleaner spacing between rows */
  #menu-sections .menu__links a {
    min-height: auto !important;
    padding: 12px 0 !important;
  }
}

/* =========================================================
   MENU PANEL — WHITE BACKGROUND MOBILE ONLY
========================================================= */
@media (max-width: 767px) {
  #menu-sections .menu__level {
    background: #F7F8F9 !important;
  }
}

/* =========================================================
   MENU HEADER — REMOVE DIVIDER UNDER "ALL CATEGORIES"
========================================================= */
#menu-sections .menu__header .divider {
  display: none !important;
}

/* =========================================================
   MOBILE MENU POPUP — NUDGE DOWN SLIGHTLY
   keeps bottom content intact
========================================================= */
@media (max-width: 767px) {
  .popup__wrapper.popup__wrapper--visible {
    transform: translateY(15px) !important;
  }
}

/* =========================================================
   MOBILE MENU — HIDE "ALL CATEGORIES" HEADING
========================================================= */
@media (max-width: 767px) {
  #menu-sections .menu__heading {
    display: none !important;
  }
}

/* =========================================================
   MOBILE MINICART HEADER — NUDGE "SHOPPING CART" LEFT
========================================================= */
@media (max-width: 767px) {
  #cart .flex.items-center.justify-between.bg-\[--bg-500\],
  #cart .flex.items-center.justify-between.bg-bg-500 {
    align-items: flex-start !important;
  }

  #cart h1#popup-label {
    margin-left: -105px !important;
  }
}

/* =========================================================
   MOBILE MENU — MOVE PAGE LINKS UP
========================================================= */
@media (max-width: 767px) {
  #menu-sections .menu__links {
    margin-top: -44px !important;
  }
}

@media (max-width: 767px) {
  .price__element.text-lg,
  .price__element.text-lg .text-primary-600 {
    color: #808080 !important;
  }
}

@media (max-width: 767px) {
  .\[\&\>p\+p\]\:mt-5 {
    text-align: center !important;
  }
}

/* =========================================================
   MENU / POPUP OVERLAY — REMOVE GRAY BACKDROP
========================================================= */

/* desktop resizable menu background */
.resizable--menu .resizable__bg {
  background: transparent !important;
  box-shadow: none !important;
  opacity: 0 !important;
}

/* if the wrapper itself is tinting */
.resizable--menu .resizable__wrapper,
.resizable--menu .resizable__content,
.resizable--menu .resizable__scroll,
.resizable--menu .resizable__fixed {
  background: transparent !important;
}

/* mobile/fullscreen popup overlay dim */
.popup__overlay,
.popup__overlay--full-screen,
.popup__overlay--focused {
  background: transparent !important;
  opacity: 0 !important;
}

/* safety: remove any pseudo overlay tint */
.resizable--menu .resizable__bg::before,
.resizable--menu .resizable__bg::after,
.popup__overlay::before,
.popup__overlay::after {
  display: none !important;
  content: none !important;
}

/* =========================================================
   MOBILE HEADER — LEARN PAGE ONLY = #808080
========================================================= */
@media (max-width: 767px) {

  /* page detection */
  body:has(nav.breadcrumbs.page\.learn) {
    --lux-top-trigger-color-mobile: #808080;
    --lux-top-logo-filter-mobile: brightness(0) saturate(0%) opacity(0.62);
  }

  /* menu + cart trigger shells */
  body:has(nav.breadcrumbs.page\.learn) header.lux-header #menu-desktop-initial .contrast-border,
  body:has(nav.breadcrumbs.page\.learn) header.lux-header #cart-desktop-initial .contrast-border {
    color: var(--lux-top-trigger-color-mobile) !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  /* trigger buttons / links */
  body:has(nav.breadcrumbs.page\.learn) header.lux-header #menu-desktop-initial .button,
  body:has(nav.breadcrumbs.page\.learn) header.lux-header #cart-desktop-initial .button,
  body:has(nav.breadcrumbs.page\.learn) header.lux-header #menu-desktop-initial a,
  body:has(nav.breadcrumbs.page\.learn) header.lux-header #cart-desktop-initial a {
    color: var(--lux-top-trigger-color-mobile) !important;
    background: transparent !important;
    border-color: transparent !important;
  }

  /* icons */
  body:has(nav.breadcrumbs.page\.learn) header.lux-header #menu-desktop-initial svg,
  body:has(nav.breadcrumbs.page\.learn) header.lux-header #menu-desktop-initial svg path,
  body:has(nav.breadcrumbs.page\.learn) header.lux-header #cart-desktop-initial svg,
  body:has(nav.breadcrumbs.page\.learn) header.lux-header #cart-desktop-initial svg path {
    fill: var(--lux-top-trigger-color-mobile) !important;
    stroke: var(--lux-top-trigger-color-mobile) !important;
  }

  /* centered mobile logo */
  body:has(nav.breadcrumbs.page\.learn) header.lux-header .col-start-3 img {
    filter: var(--lux-top-logo-filter-mobile) !important;
    opacity: 1 !important;
  }
}

/* =========================================================
   CART PAGE — CENTER EMPTY CART TEXT
========================================================= */
#cart .max-h-0.pb-0.opacity-0,
#cart .opacity-1.max-h-80.pb-4.md\:px-6 {
  text-align: center !important;
  justify-content: center !important;
  align-items: center !important;
}

#cart .max-h-0.pb-0.opacity-0 p,
#cart .opacity-1.max-h-80.pb-4.md\:px-6 p {
  text-align: center !important;
  width: 100% !important;
  margin: 0 auto !important;
}

/* =========================================================
   SEARCH PAGE — CENTER EMPTY / NO-QUERY STATE
========================================================= */
#shopify-section-template--20146969706695__main article[aria-label="Search details"] {
  display: flex !important;
  justify-content: center !important;
  text-align: center !important;
}

#shopify-section-template--20146969706695__main article[aria-label="Search details"] > div {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

#shopify-section-template--20146969706695__main .heading.text-lg,
#shopify-section-template--20146969706695__main article[aria-label="Search details"] p,
#shopify-section-template--20146969706695__main p.py-5 {
  text-align: center !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* =========================================================
   SEARCH PAGE — CLOSED HEADER TRIGGERS = #808080
   desktop + mobile
========================================================= */

/* ================= DESKTOP ================= */
@media (min-width: 768px) {

  /* ---------- page detection ---------- */
  body.template-search,
  body:has(#shopify-section-template--20146969706695__main),
  body:has(#ProductGridContainer[aria-label="Product search results"]) {
    --lux-top-trigger-color: #808080;
    --lux-top-logo-filter: brightness(0) saturate(0%) opacity(0.62);
  }

  /* ---------- closed top trigger columns only ---------- */
  body.template-search header.lux-header.is-top .content-wrapper > .transition-all:first-child,
  body.template-search header.lux-header.is-top .content-wrapper > .contents.md\:flex,

  body:has(#shopify-section-template--20146969706695__main) header.lux-header.is-top .content-wrapper > .transition-all:first-child,
  body:has(#shopify-section-template--20146969706695__main) header.lux-header.is-top .content-wrapper > .contents.md\:flex,

  body:has(#ProductGridContainer[aria-label="Product search results"]) header.lux-header.is-top .content-wrapper > .transition-all:first-child,
  body:has(#ProductGridContainer[aria-label="Product search results"]) header.lux-header.is-top .content-wrapper > .contents.md\:flex {
    color: var(--lux-top-trigger-color) !important;
  }

  /* ---------- text inside trigger columns ---------- */
  body.template-search header.lux-header.is-top .content-wrapper > .transition-all:first-child :is(a, button, span),
  body.template-search header.lux-header.is-top .content-wrapper > .contents.md\:flex :is(a, button, span),

  body:has(#shopify-section-template--20146969706695__main) header.lux-header.is-top .content-wrapper > .transition-all:first-child :is(a, button, span),
  body:has(#shopify-section-template--20146969706695__main) header.lux-header.is-top .content-wrapper > .contents.md\:flex :is(a, button, span),

  body:has(#ProductGridContainer[aria-label="Product search results"]) header.lux-header.is-top .content-wrapper > .transition-all:first-child :is(a, button, span),
  body:has(#ProductGridContainer[aria-label="Product search results"]) header.lux-header.is-top .content-wrapper > .contents.md\:flex :is(a, button, span) {
    color: var(--lux-top-trigger-color) !important;
  }

  /* ---------- icons inside trigger columns ---------- */
  body.template-search header.lux-header.is-top .content-wrapper > .transition-all:first-child :is(svg, svg path),
  body.template-search header.lux-header.is-top .content-wrapper > .contents.md\:flex :is(svg, svg path),

  body:has(#shopify-section-template--20146969706695__main) header.lux-header.is-top .content-wrapper > .transition-all:first-child :is(svg, svg path),
  body:has(#shopify-section-template--20146969706695__main) header.lux-header.is-top .content-wrapper > .contents.md\:flex :is(svg, svg path),

  body:has(#ProductGridContainer[aria-label="Product search results"]) header.lux-header.is-top .content-wrapper > .transition-all:first-child :is(svg, svg path),
  body:has(#ProductGridContainer[aria-label="Product search results"]) header.lux-header.is-top .content-wrapper > .contents.md\:flex :is(svg, svg path) {
    fill: var(--lux-top-trigger-color) !important;
    stroke: var(--lux-top-trigger-color) !important;
  }

  /* ---------- floating desktop logo ---------- */
  body.template-search .lux-desktop-logo-wrap.is-top .lux-desktop-logo-inner .heading img,
  body:has(#shopify-section-template--20146969706695__main) .lux-desktop-logo-wrap.is-top .lux-desktop-logo-inner .heading img,
  body:has(#ProductGridContainer[aria-label="Product search results"]) .lux-desktop-logo-wrap.is-top .lux-desktop-logo-inner .heading img {
    filter: var(--lux-top-logo-filter) !important;
  }
}


/* ================= MOBILE ================= */
@media (max-width: 767px) {

  /* ---------- page detection vars ---------- */
  body.template-search,
  body:has(#shopify-section-template--20146969706695__main),
  body:has(#ProductGridContainer[aria-label="Product search results"]) {
    --lux-top-trigger-color-mobile: #808080;
    --lux-top-logo-filter-mobile: brightness(0) saturate(0%) opacity(0.62);
  }

  /* ---------- actual mobile trigger buttons / links ---------- */
  body.template-search header.lux-header #menu-desktop-initial .button,
  body.template-search header.lux-header #cart-desktop-initial .button,
  body.template-search header.lux-header #menu-desktop-initial a,
  body.template-search header.lux-header #cart-desktop-initial a,

  body:has(#shopify-section-template--20146969706695__main) header.lux-header #menu-desktop-initial .button,
  body:has(#shopify-section-template--20146969706695__main) header.lux-header #cart-desktop-initial .button,
  body:has(#shopify-section-template--20146969706695__main) header.lux-header #menu-desktop-initial a,
  body:has(#shopify-section-template--20146969706695__main) header.lux-header #cart-desktop-initial a,

  body:has(#ProductGridContainer[aria-label="Product search results"]) header.lux-header #menu-desktop-initial .button,
  body:has(#ProductGridContainer[aria-label="Product search results"]) header.lux-header #cart-desktop-initial .button,
  body:has(#ProductGridContainer[aria-label="Product search results"]) header.lux-header #menu-desktop-initial a,
  body:has(#ProductGridContainer[aria-label="Product search results"]) header.lux-header #cart-desktop-initial a {
    color: var(--lux-top-trigger-color-mobile) !important;
    background: transparent !important;
    border-color: transparent !important;
  }

  /* ---------- trigger shells ---------- */
  body.template-search header.lux-header #menu-desktop-initial .contrast-border,
  body.template-search header.lux-header #cart-desktop-initial .contrast-border,

  body:has(#shopify-section-template--20146969706695__main) header.lux-header #menu-desktop-initial .contrast-border,
  body:has(#shopify-section-template--20146969706695__main) header.lux-header #cart-desktop-initial .contrast-border,

  body:has(#ProductGridContainer[aria-label="Product search results"]) header.lux-header #menu-desktop-initial .contrast-border,
  body:has(#ProductGridContainer[aria-label="Product search results"]) header.lux-header #cart-desktop-initial .contrast-border {
    color: var(--lux-top-trigger-color-mobile) !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  /* ---------- icons ---------- */
  body.template-search header.lux-header #menu-desktop-initial svg,
  body.template-search header.lux-header #menu-desktop-initial svg path,
  body.template-search header.lux-header #cart-desktop-initial svg,
  body.template-search header.lux-header #cart-desktop-initial svg path,

  body:has(#shopify-section-template--20146969706695__main) header.lux-header #menu-desktop-initial svg,
  body:has(#shopify-section-template--20146969706695__main) header.lux-header #menu-desktop-initial svg path,
  body:has(#shopify-section-template--20146969706695__main) header.lux-header #cart-desktop-initial svg,
  body:has(#shopify-section-template--20146969706695__main) header.lux-header #cart-desktop-initial svg path,

  body:has(#ProductGridContainer[aria-label="Product search results"]) header.lux-header #menu-desktop-initial svg,
  body:has(#ProductGridContainer[aria-label="Product search results"]) header.lux-header #menu-desktop-initial svg path,
  body:has(#ProductGridContainer[aria-label="Product search results"]) header.lux-header #cart-desktop-initial svg,
  body:has(#ProductGridContainer[aria-label="Product search results"]) header.lux-header #cart-desktop-initial svg path {
    fill: var(--lux-top-trigger-color-mobile) !important;
    stroke: var(--lux-top-trigger-color-mobile) !important;
  }

  /* ---------- centered mobile logo ---------- */
  body.template-search header.lux-header .col-start-3 img,
  body:has(#shopify-section-template--20146969706695__main) header.lux-header .col-start-3 img,
  body:has(#ProductGridContainer[aria-label="Product search results"]) header.lux-header .col-start-3 img {
    filter: var(--lux-top-logo-filter-mobile) !important;
    opacity: 1 !important;
  }
}

/* Native quantity + ATC — refined */
.product-native-actions{
  display: flex;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  flex-wrap: nowrap;
}

.product-native-qty{
  display: flex;
  align-items: stretch;
  flex: 0 0 auto;
}

/* minus / plus buttons */
.product-native-qty__btn{
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #808080;
  background: transparent;
  color: #6F6F6F;
  cursor: pointer;
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease,
    transform 0.22s ease;
}

/* pill ends */
.product-native-qty__btn:first-child{
  border-radius: 999px 0 0 999px;
}

.product-native-qty__btn:last-child{
  border-radius: 0 999px 999px 0;
}

@media (hover: hover){
  .product-native-qty__btn:hover{
    background: rgba(128, 128, 128, 0.06);
    border-color: #808080;
    color: #3A3834;
  }
}

.product-native-qty__btn:active{
  transform: scale(0.985);
}

.product-native-qty__btn svg{
  width: 16px;
  height: 16px;
}

/* number input */
.product-native-qty__input{
  width: 60px;
  height: 46px;
  border-top: 1px solid #808080;
  border-bottom: 1px solid #808080;
  border-left: 0;
  border-right: 0;
  background: transparent;
  text-align: center;
  font-size: 14px;
  line-height: 1;
  font-weight: 400;
  color: #3A3834;
  padding: 0;
  appearance: textfield;
  -moz-appearance: textfield;
}

.product-native-qty__input::-webkit-outer-spin-button,
.product-native-qty__input::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}

.product-native-qty__input:focus{
  outline: none;
}

/* keep ATC aligned */
.product-native-actions > .button,
.product-native-actions > button.button{
  min-height: 46px;
  flex: 1 1 auto;
}

/* mobile */
@media (max-width: 767px){
  .product-native-actions{
    flex-direction: column;
    gap: 12px;
  }

  .product-native-qty{
    justify-content: center;
    width: 100%;
  }

  .product-native-qty__btn{
    width: 44px;
    height: 44px;
  }

  .product-native-qty__input{
    width: 68px;
    height: 44px;
    font-size: 14px;
  }

  .product-native-actions > .button,
  .product-native-actions > button.button{
    width: 100%;
    min-height: 44px;
  }
}

/* =========================================================
   PRODUCT PAGE — MOBILE IMAGE FILL FIX
   Makes portrait product images fill the mobile media area
========================================================= */
@media (max-width: 767px){

  /* mobile media slide wrapper */
  .product__media-wrapper .aspect-product,
  .product__media-wrapper [x-element-transition-dest="mobile-img"] .aspect-product{
    aspect-ratio: auto !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  /* inner wrapper holding the actual image */
  .product__media-wrapper [x-element-transition-dest="mobile-img"] .bg-\[--fade-in-bg\].flex.items-center.justify-center.w-full{
    height: 100% !important;
    min-height: 100% !important;
    align-items: stretch !important;
    justify-content: stretch !important;
  }

  /* actual mobile image */
  .product__media-wrapper img[id$="-mobile-image"]{
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
  }

  /* transition image too, so it matches during swaps */
  .product__media-wrapper .hide-unless-transition img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
}

/* =========================================================
   ART OF ANIME — ADD-ON CARD
   Balanced desktop + mobile
========================================================= */

.kim-addon-card{
  margin: 18px 0 24px;
  padding: 18px 20px;
  background: #F6F7F8;
  border: 1px solid rgba(128,128,128,0.22);
  border-radius: 16px;
}

/* center the whole module inside the card */
.kim-addon-card{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.kim-addon-card__label{
  margin: 0 0 14px;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: #808080;
  text-align: center;
}

.kim-addon-card__inner{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  width: 100%;
}

.kim-addon-card__media{
  display: block;
  width: 120px;
  height: 120px;
  border-radius: 14px;
  overflow: hidden;
  background: #ECEDEF;
  text-decoration: none;
  flex: 0 0 auto;
}

.kim-addon-card__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.kim-addon-card__content{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
  min-width: 0;
}

.kim-addon-card__meta{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  min-width: 0;
}

.kim-addon-card__title{
  display: inline-block;
  margin: 0 0 6px;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 500;
  color: #4F4C46;
  text-decoration: none;
  white-space: nowrap;
}

.kim-addon-card__price{
  font-size: 15px;
  line-height: 1;
  color: #808080;
  font-weight: 500;
}

.kim-addon-card__form{
  margin: 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.kim-addon-card__button{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  min-width: 118px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid #808080;
  background: transparent;
  color: #808080;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  transition:
    color 0.4s ease,
    background 0.35s ease,
    transform 0.25s ease;
}

@media (hover:hover){
  .kim-addon-card__button:hover{
    background: #808080;
    color: #ffffff;
    transform: translateY(-1px);
  }
}

/* MOBILE — keep it elegant and compact */
@media (max-width: 767px){
  .kim-addon-card{
    margin: 16px 0 22px;
    padding: 16px;
  }

  .kim-addon-card__label{
    margin-bottom: 12px;
  }

  .kim-addon-card__inner{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
  }

  .kim-addon-card__media{
    width: 96px;
    height: 96px;
    border-radius: 10px;
  }

  .kim-addon-card__content{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
  }

  .kim-addon-card__meta{
    text-align: left;
  }

  .kim-addon-card__title{
    font-size: 14px;
    line-height: 1.28;
    margin-bottom: 5px;
    white-space: normal;
  }

  .kim-addon-card__price{
    font-size: 13px;
  }

  .kim-addon-card__form{
    width: 100%;
    justify-content: flex-start;
    align-items: center;
  }

  .kim-addon-card__button{
    min-height: 38px;
    min-width: 96px;
  }
}

.kim-addon-card{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.kim-addon-card__label{
  margin: 0 0 14px;
  text-align: right;
}

.kim-addon-card__inner{
  width: auto;
  max-width: 100%;
}

@media (max-width: 767px){
  .kim-addon-card{
    align-items: center !important;
  }

  .kim-addon-card__label{
    width: 100%;
    text-align: center !important;
    padding-right: 0 !important;
  }

  .kim-addon-card__inner{
    width: 100%;
    justify-content: center !important;
    padding-right: 0 !important;
  }

  .kim-addon-card__content{
    align-items: center !important;
    text-align: center !important;
  }

  .kim-addon-card__meta{
    align-items: center !important;
    text-align: center !important;
  }

  .kim-addon-card__form{
    width: auto !important;
    justify-content: center !important;
  }
}

@media (min-width: 768px){
  .kim-addon-card__inner{
    transform: translateX(-195px);
  }

  .kim-addon-card__label{
    transform: translateX(-195px);
  }
}