/** Shopify CDN: Minification failed

Line 3834:0 Unexpected "}"

**/
:root {
  --alpha-button-background: 1;
  --alpha-button-border: 1;
  --alpha-link: 0.85;
  --alpha-badge-border: 0.1;
  --focused-base-outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  --focused-base-outline-offset: 0.3rem;
  --focused-base-box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
}

.product-card-wrapper .card,
.contains-card--product {
  --border-radius: var(--product-card-corner-radius);
  --border-width: var(--product-card-border-width);
  --border-opacity: var(--product-card-border-opacity);
  --shadow-horizontal-offset: var(--product-card-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--product-card-shadow-vertical-offset);
  --shadow-blur-radius: var(--product-card-shadow-blur-radius);
  --shadow-opacity: var(--product-card-shadow-opacity);
  --shadow-visible: var(--product-card-shadow-visible);
  --image-padding: var(--product-card-image-padding);
  --text-alignment: var(--product-card-text-alignment);
}

.collection-card-wrapper .card,
.contains-card--collection {
  --border-radius: var(--collection-card-corner-radius);
  --border-width: var(--collection-card-border-width);
  --border-opacity: var(--collection-card-border-opacity);
  --shadow-horizontal-offset: var(--collection-card-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--collection-card-shadow-vertical-offset);
  --shadow-blur-radius: var(--collection-card-shadow-blur-radius);
  --shadow-opacity: var(--collection-card-shadow-opacity);
  --shadow-visible: var(--collection-card-shadow-visible);
  --image-padding: var(--collection-card-image-padding);
  --text-alignment: var(--collection-card-text-alignment);
}

.article-card-wrapper .card,
.contains-card--article {
  --border-radius: var(--blog-card-corner-radius);
  --border-width: var(--blog-card-border-width);
  --border-opacity: var(--blog-card-border-opacity);
  --shadow-horizontal-offset: var(--blog-card-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--blog-card-shadow-vertical-offset);
  --shadow-blur-radius: var(--blog-card-shadow-blur-radius);
  --shadow-opacity: var(--blog-card-shadow-opacity);
  --shadow-visible: var(--blog-card-shadow-visible);
  --image-padding: var(--blog-card-image-padding);
  --text-alignment: var(--blog-card-text-alignment);
}

.contains-content-container,
.content-container {
  --border-radius: var(--text-boxes-radius);
  --border-width: var(--text-boxes-border-width);
  --border-opacity: var(--text-boxes-border-opacity);
  --shadow-horizontal-offset: var(--text-boxes-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--text-boxes-shadow-vertical-offset);
  --shadow-blur-radius: var(--text-boxes-shadow-blur-radius);
  --shadow-opacity: var(--text-boxes-shadow-opacity);
  --shadow-visible: var(--text-boxes-shadow-visible);
}

.contains-media,
.global-media-settings {
  --border-radius: var(--media-radius);
  --border-width: var(--media-border-width);
  --border-opacity: var(--media-border-opacity);
  --shadow-horizontal-offset: var(--media-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--media-shadow-vertical-offset);
  --shadow-blur-radius: var(--media-shadow-blur-radius);
  --shadow-opacity: var(--media-shadow-opacity);
  --shadow-visible: var(--media-shadow-visible);
}

/* base */

.page-width {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

body:has(.section-header .drawer-menu) .announcement-bar-section .page-width {
  max-width: 100%;
}

.page-width.drawer-menu {
  max-width: 100%;
}

.page-width-desktop {
  padding: 0;
  margin: 0 auto;
}

.utility-bar__grid.page-width {
  padding-left: 3rem;
  padding-right: 3rem;
}

@media screen and (min-width: 750px) {
  .page-width {
    padding: 0 5rem;
  }

  .header.page-width,
  .utility-bar__grid.page-width {
    padding-left: 3.2rem;
    padding-right: 3.2rem;
  }

  .page-width--narrow {
    padding: 0 9rem;
  }

  .page-width-desktop {
    padding: 0;
  }

  .page-width-tablet {
    padding: 0 5rem;
  }
}

@media screen and (min-width: 990px) {
  .header:not(.drawer-menu).page-width {
    padding-left: 5rem;
    padding-right: 5rem;
  }

  .page-width--narrow {
    max-width: 72.6rem;
    padding: 0;
  }

  .page-width-desktop {
    max-width: var(--page-width);
    padding: 0 5rem;
  }
}

.isolate {
  position: relative;
  z-index: 0;
}

.section + .section {
  margin-top: var(--spacing-sections-mobile);
}

@media screen and (min-width: 750px) {
  .section + .section {
    margin-top: var(--spacing-sections-desktop);
  }
}

.element-margin-top {
  margin-top: 5rem;
}

@media screen and (min-width: 750px) {
  .element-margin {
    margin-top: calc(5rem + var(--page-width-margin));
  }
}

.background-secondary {
  background-color: rgba(var(--color-foreground), 0.04);
}

.grid-auto-flow {
  display: grid;
  grid-auto-flow: column;
}

.page-margin,
.shopify-challenge__container {
  margin: 7rem auto;
}

.rte-width {
  max-width: 82rem;
  margin: 0 auto 2rem;
}

.list-unstyled {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hidden {
  display: none !important;
}

.visually-hidden {
  position: absolute !important;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  word-wrap: normal !important;
}

.visually-hidden--inline {
  margin: 0;
  height: 1em;
}

.overflow-hidden {
  overflow: hidden;
}

.skip-to-content-link:focus {
  z-index: 9999;
  position: inherit;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

.full-width-link {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
}

::selection {
  background-color: rgba(var(--color-foreground), 0.2);
}

.text-body {
  font-size: 1.5rem;
  letter-spacing: 0.06rem;
  line-height: calc(1 + 0.8 / var(--font-body-scale));
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
}

h1,
h2,
h3,
h4,
h5,
.h0,
.h1,
.h2,
.h3,
.h4,
.h5 {
  font-family: var(--font-heading-family);
  font-style: var(--font-heading-style);
  font-weight: var(--font-heading-weight);
  letter-spacing: calc(var(--font-heading-scale) * 0.06rem);
  color: rgb(var(--color-foreground));
  line-height: calc(1 + 0.3 / max(1, var(--font-heading-scale)));
  word-break: break-word;
}

.hxxl {
  font-size: clamp(calc(var(--font-heading-scale) * 5.6rem), 14vw, calc(var(--font-heading-scale) * 7.2rem));
  line-height: 1.1;
}

.hxl {
  font-size: calc(var(--font-heading-scale) * 5rem);
  line-height: calc(1 + 0.3 / max(1, var(--font-heading-scale)));
}

@media only screen and (min-width: 750px) {
  .hxl {
    font-size: calc(var(--font-heading-scale) * 6.2rem);
  }
}

.h0 {
  font-size: calc(var(--font-heading-scale) * 4rem);
}

@media only screen and (min-width: 750px) {
  .h0 {
    font-size: calc(var(--font-heading-scale) * 5.2rem);
  }
}

h1,
.h1 {
  font-size: calc(var(--font-heading-scale) * 3rem);
}

@media only screen and (min-width: 750px) {
  h1,
  .h1 {
    font-size: calc(var(--font-heading-scale) * 4rem);
  }
}

h2,
.h2 {
  font-size: calc(var(--font-heading-scale) * 2rem);
}

@media only screen and (min-width: 750px) {
  h2,
  .h2 {
    font-size: calc(var(--font-heading-scale) * 2.4rem);
  }
}

h3,
.h3 {
  font-size: calc(var(--font-heading-scale) * 1.7rem);
}

@media only screen and (min-width: 750px) {
  h3,
  .h3 {
    font-size: calc(var(--font-heading-scale) * 1.8rem);
  }
}

h4,
.h4 {
  font-family: var(--font-heading-family);
  font-style: var(--font-heading-style);
  font-size: calc(var(--font-heading-scale) * 1.5rem);
}

h5,
.h5 {
  font-size: calc(var(--font-heading-scale) * 1.2rem);
}

@media only screen and (min-width: 750px) {
  h5,
  .h5 {
    font-size: calc(var(--font-heading-scale) * 1.3rem);
  }
}

h6,
.h6 {
  color: rgba(var(--color-foreground), 0.75);
  margin-block-start: 1.67em;
  margin-block-end: 1.67em;
}

blockquote {
  font-style: italic;
  color: rgba(var(--color-foreground), 0.75);
  border-left: 0.2rem solid rgba(var(--color-foreground), 0.2);
  padding-left: 1rem;
}

@media screen and (min-width: 750px) {
  blockquote {
    padding-left: 1.5rem;
  }
}

.caption {
  font-size: 1rem;
  letter-spacing: 0.07rem;
  line-height: calc(1 + 0.7 / var(--font-body-scale));
}

@media screen and (min-width: 750px) {
  .caption {
    font-size: 1.2rem;
  }
}

.caption-with-letter-spacing {
  font-size: 1rem;
  letter-spacing: 0.13rem;
  line-height: calc(1 + 0.2 / var(--font-body-scale));
  text-transform: uppercase;
}

.caption-with-letter-spacing--medium {
  font-size: 1.2rem;
  letter-spacing: 0.16rem;
}

.caption-with-letter-spacing--large {
  font-size: 1.4rem;
  letter-spacing: 0.18rem;
}

.caption-large,
.customer .field input,
.customer select,
.field__input,
.form__label,
.select__select {
  font-size: 1.3rem;
  line-height: calc(1 + 0.5 / var(--font-body-scale));
  letter-spacing: 0.04rem;
}

.color-foreground {
  color: rgb(var(--color-foreground));
}

table:not([class]) {
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 1.4rem;
  border-style: hidden;
  box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 0.2);
  /* draws the table border  */
}

table:not([class]) td,
table:not([class]) th {
  padding: 1em;
  border: 0.1rem solid rgba(var(--color-foreground), 0.2);
}

@media screen and (max-width: 749px) {
  .small-hide {
    display: none !important;
  }
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .medium-hide {
    display: none !important;
  }
}

@media screen and (min-width: 990px) {
  .large-up-hide {
    display: none !important;
  }
}

.left {
  text-align: left;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

.uppercase {
  text-transform: uppercase;
}

.light {
  opacity: 0.7;
}

a:empty,
ul:empty,
dl:empty,
div:empty,
section:empty,
article:empty,
p:empty,
h1:empty,
h2:empty,
h3:empty,
h4:empty,
h5:empty,
h6:empty {
  display: none;
}

.link,
.customer a {
  cursor: pointer;
  display: inline-block;
  border: none;
  box-shadow: none;
  text-decoration: underline;
  text-underline-offset: 0.3rem;
  color: rgb(var(--color-link));
  background-color: transparent;
  font-size: 1.4rem;
  font-family: inherit;
}

.link--text {
  color: rgb(var(--color-foreground));
}

.link--text:hover {
  color: rgba(var(--color-foreground), 0.75);
}

.link-with-icon {
  display: inline-flex;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.1rem;
  text-decoration: none;
  margin-bottom: 4.5rem;
  white-space: nowrap;
}

.link-with-icon .icon {
  width: 1.5rem;
  margin-left: 1rem;
}

a:not([href]) {
  cursor: not-allowed;
}

.circle-divider::after {
  content: '\2022';
  margin: 0 1.3rem 0 1.5rem;
}

.circle-divider:last-of-type::after {
  display: none;
}

hr {
  border: none;
  height: 0.1rem;
  background-color: rgba(var(--color-foreground), 0.2);
  display: block;
  margin: 5rem 0;
}

@media screen and (min-width: 750px) {
  hr {
    margin: 7rem 0;
  }
}

.full-unstyled-link {
  text-decoration: none;
  color: currentColor;
  display: block;
}

.placeholder {
  background-color: rgba(var(--color-foreground), 0.04);
  color: rgba(var(--color-foreground), 0.55);
  fill: rgba(var(--color-foreground), 0.55);
}

details > * {
  box-sizing: border-box;
}

.break {
  word-break: break-word;
}

.visibility-hidden {
  visibility: hidden;
}

@media (prefers-reduced-motion) {
  .motion-reduce {
    transition: none !important;
    animation: none !important;
  }
}

:root {
  --duration-short: 100ms;
  --duration-default: 200ms;
  --duration-announcement-bar: 250ms;
  --duration-medium: 300ms;
  --duration-long: 500ms;
  --duration-extra-long: 600ms;
  --duration-extra-longer: 750ms;
  --duration-extended: 3s;
  --ease-out-slow: cubic-bezier(0, 0, 0.3, 1);
  --animation-slide-in: slideIn var(--duration-extra-long) var(--ease-out-slow) forwards;
  --animation-fade-in: fadeIn var(--duration-extra-long) var(--ease-out-slow);
}

.underlined-link,
.customer a,
.inline-richtext a {
  text-underline-offset: 0.3rem;
  text-decoration-thickness: 0.1rem;
  transition: text-decoration-thickness ease 100ms;
}

.underlined-link,
.customer a {
  color: rgba(var(--color-link), var(--alpha-link));
}

.inline-richtext a,
.rte.inline-richtext a {
  color: currentColor;
}

.underlined-link:hover,
.customer a:hover,
.inline-richtext a:hover {
  color: rgb(var(--color-link));
  text-decoration-thickness: 0.2rem;
}

.icon-arrow {
  width: 1.5rem;
}

h3 .icon-arrow,
.h3 .icon-arrow {
  width: calc(var(--font-heading-scale) * 1.5rem);
}

/* arrow animation */
.animate-arrow .icon-arrow path {
  transform: translateX(-0.25rem);
  transition: transform var(--duration-short) ease;
}

.animate-arrow:hover .icon-arrow path {
  transform: translateX(-0.05rem);
}

.svg-wrapper {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
}

.svg-wrapper > svg {
  height: 100%;
  width: 100%;
}

/* base-details-summary */
summary {
  cursor: pointer;
  list-style: none;
  position: relative;
}

summary .icon-caret {
  position: absolute;
  height: 0.6rem;
  right: 1.5rem;
  top: calc(50% - 0.2rem);
}

summary::-webkit-details-marker {
  display: none;
}

.disclosure-has-popup {
  position: relative;
}

.disclosure-has-popup[open] > summary::before {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: block;
  cursor: default;
  content: ' ';
  background: transparent;
}

.disclosure-has-popup > summary::before {
  display: none;
}

.disclosure-has-popup[open] > summary + * {
  z-index: 100;
}

@media screen and (min-width: 750px) {
  .disclosure-has-popup[open] > summary + * {
    z-index: 4;
  }

  .facets .disclosure-has-popup[open] > summary + * {
    z-index: 2;
  }
}

.placeholder-svg {
  height: 100%;
  width: 100%;
}

/* base-focus */
/*
  Focus ring - default (with offset)
*/

*:focus {
  outline: 0;
  box-shadow: none;
}

*:focus-visible {
  outline: var(--focused-base-outline);
  outline-offset: var(--focused-base-outline-offset);
  box-shadow: var(--focused-base-box-shadow);
}

/* Fallback - for browsers that don't support :focus-visible, a fallback is set for :focus */
.focused {
  outline: var(--focused-base-outline);
  outline-offset: var(--focused-base-outline-offset);
  box-shadow: var(--focused-base-box-shadow);
}

/*
  Focus ring - inset
*/

.focus-inset:focus-visible {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: -0.2rem;
  box-shadow: 0 0 0.2rem 0 rgba(var(--color-foreground), 0.3);
}

.focused.focus-inset {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: -0.2rem;
  box-shadow: 0 0 0.2rem 0 rgba(var(--color-foreground), 0.3);
}

/*
  Focus ring - none
*/

/* Dangerous for a11y - Use with care */
.focus-none {
  box-shadow: none !important;
  outline: 0 !important;
}

.focus-offset:focus-visible {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: 1rem;
  box-shadow: 0 0 0 1rem rgb(var(--color-background)), 0 0 0.2rem 1.2rem rgba(var(--color-foreground), 0.3);
}

.focus-offset.focused {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: 1rem;
  box-shadow: 0 0 0 1rem rgb(var(--color-background)), 0 0 0.2rem 1.2rem rgba(var(--color-foreground), 0.3);
}

/* component-title */
.title,
.title-wrapper-with-link {
  margin: 3rem 0 2rem;
}

.title-wrapper-with-link .title {
  margin: 0;
}

.title .link {
  font-size: inherit;
}

.title-wrapper {
  margin-bottom: 3rem;
}

.title-wrapper-with-link {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

.title--primary {
  margin: 4rem 0;
}

.title-wrapper--self-padded-tablet-down,
.title-wrapper--self-padded-mobile {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

@media screen and (min-width: 750px) {
  .title-wrapper--self-padded-mobile {
    padding-left: 0;
    padding-right: 0;
  }
}

@media screen and (min-width: 990px) {
  .title,
  .title-wrapper-with-link {
    margin: 5rem 0 3rem;
  }

  .title--primary {
    margin: 2rem 0;
  }

  .title-wrapper-with-link {
    align-items: center;
  }

  .title-wrapper-with-link .title {
    margin-bottom: 0;
  }

  .title-wrapper--self-padded-tablet-down {
    padding-left: 0;
    padding-right: 0;
  }
}

.title-wrapper-with-link .link-with-icon {
  margin: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.title-wrapper-with-link .link-with-icon .svg-wrapper {
  width: 1.5rem;
}

.title-wrapper-with-link a {
  margin-top: 0;
  flex-shrink: 0;
}

.title-wrapper--no-top-margin {
  margin-top: 0;
}

.title-wrapper--no-top-margin > .title {
  margin-top: 0;
}

.subtitle {
  font-size: 1.8rem;
  line-height: calc(1 + 0.8 / var(--font-body-scale));
  letter-spacing: 0.06rem;
  color: rgba(var(--color-foreground), 0.7);
}

.subtitle--small {
  font-size: 1.4rem;
  letter-spacing: 0.1rem;
}

.subtitle--medium {
  font-size: 1.6rem;
  letter-spacing: 0.08rem;
}

/* component-grid */
.grid {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 2rem;
  padding: 0;
  list-style: none;
  column-gap: var(--grid-mobile-horizontal-spacing);
  row-gap: var(--grid-mobile-vertical-spacing);
}

@media screen and (min-width: 750px) {
  .grid {
    column-gap: var(--grid-desktop-horizontal-spacing);
    row-gap: var(--grid-desktop-vertical-spacing);
  }
}

.grid:last-child {
  margin-bottom: 0;
}

.grid__item {
  width: calc(25% - var(--grid-mobile-horizontal-spacing) * 3 / 4);
  max-width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2);
  flex-grow: 1;
  flex-shrink: 0;
}

@media screen and (min-width: 750px) {
  .grid__item {
    width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
    max-width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }
}

.grid--gapless.grid {
  column-gap: 0;
  row-gap: 0;
}

@media screen and (max-width: 749px) {
  .grid__item.slider__slide--full-width {
    width: 100%;
    max-width: none;
  }
}

.grid--1-col .grid__item {
  max-width: 100%;
  width: 100%;
}

.grid--3-col .grid__item {
  width: calc(33.33% - var(--grid-mobile-horizontal-spacing) * 2 / 3);
}

@media screen and (min-width: 750px) {
  .grid--3-col .grid__item {
    width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3);
  }
}

.grid--2-col .grid__item {
  width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2);
}

@media screen and (min-width: 750px) {
  .grid--2-col .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }

  .grid--4-col-tablet .grid__item {
    width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
  }

  .grid--3-col-tablet .grid__item {
    width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3);
  }

  .grid--2-col-tablet .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }
}

@media screen and (max-width: 989px) {
  .grid--1-col-tablet-down .grid__item {
    width: 100%;
    max-width: 100%;
  }

  .slider--tablet.grid--peek {
    margin: 0;
    width: 100%;
  }

  .slider--tablet.grid--peek .grid__item {
    box-sizing: content-box;
    margin: 0;
  }

  .slider.slider--tablet .scroll-trigger.animate--slide-in,
  .slider.slider--mobile .scroll-trigger.animate--slide-in {
    animation: none;
    opacity: 1;
    transform: inherit;
  }

  .scroll-trigger:not(.scroll-trigger--offscreen) .slider--tablet {
    animation: var(--animation-slide-in);
  }
}

@media screen and (min-width: 990px) {
  .grid--6-col-desktop .grid__item {
    width: calc(16.66% - var(--grid-desktop-horizontal-spacing) * 5 / 6);
    max-width: calc(16.66% - var(--grid-desktop-horizontal-spacing) * 5 / 6);
  }

  .grid--5-col-desktop .grid__item {
    width: calc(20% - var(--grid-desktop-horizontal-spacing) * 4 / 5);
    max-width: calc(20% - var(--grid-desktop-horizontal-spacing) * 4 / 5);
  }

  .grid--4-col-desktop .grid__item {
    width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
    max-width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
  }

  .grid--3-col-desktop .grid__item {
    width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3);
    max-width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3);
  }

  .grid--2-col-desktop .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
    max-width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }

  .slider.slider--desktop .scroll-trigger.animate--slide-in {
    animation: none;
    opacity: 1;
    transform: inherit;
  }

  .scroll-trigger:not(.scroll-trigger--offscreen) .slider--desktop {
    animation: var(--animation-slide-in);
  }
}

@media screen and (min-width: 990px) {
  .grid--1-col-desktop {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .grid--1-col-desktop .grid__item {
    width: 100%;
    max-width: 100%;
  }
}

@media screen and (max-width: 749px) {
  .grid--peek.slider--mobile {
    margin: 0;
    width: 100%;
  }

  .grid--peek.slider--mobile .grid__item {
    box-sizing: content-box;
    margin: 0;
  }

  .grid--peek .grid__item {
    min-width: 35%;
  }

  .grid--peek.slider .grid__item:first-of-type {
    margin-left: 1.5rem;
  }

  /* Fix to show some space at the end of our sliders in all browsers */
  .grid--peek.slider:after {
    margin-left: calc(-1 * var(--grid-mobile-horizontal-spacing));
  }

  .grid--2-col-tablet-down .grid__item {
    width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2);
  }

  .slider--tablet.grid--peek.grid--2-col-tablet-down .grid__item,
  .grid--peek .grid__item {
    width: calc(50% - var(--grid-mobile-horizontal-spacing) - 3rem);
  }

  .slider--tablet.grid--peek.grid--1-col-tablet-down .grid__item,
  .slider--mobile.grid--peek.grid--1-col-tablet-down .grid__item {
    width: calc(100% - var(--grid-mobile-horizontal-spacing) - 3rem);
  }
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .slider--tablet.grid--peek .grid__item {
    width: calc(25% - var(--grid-desktop-horizontal-spacing) - 3rem);
  }

  .slider--tablet.grid--peek.grid--3-col-tablet .grid__item {
    width: calc(33.33% - var(--grid-desktop-horizontal-spacing) - 3rem);
  }

  .slider--tablet.grid--peek.grid--2-col-tablet .grid__item,
  .slider--tablet.grid--peek.grid--2-col-tablet-down .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing) - 3rem);
  }

  .slider--tablet.grid--peek .grid__item:first-of-type {
    margin-left: 1.5rem;
  }

  .grid--2-col-tablet-down .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }

  .grid--1-col-tablet-down.grid--peek .grid__item {
    width: calc(100% - var(--grid-desktop-horizontal-spacing) - 3rem);
  }
}

/* component-media */
.media {
  display: block;
  background-color: rgba(var(--color-foreground), 0.1);
  position: relative;
  overflow: hidden;
}

.media--transparent {
  background-color: transparent;
}

.media > *:not(.zoom):not(.deferred-media__poster-button),
.media model-viewer {
  display: block;
  max-width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.media > img {
  object-fit: cover;
  object-position: center center;
  transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.media--square {
  padding-bottom: 100%;
}

.media--portrait {
  padding-bottom: 125%;
}

.media--landscape {
  padding-bottom: 66.6%;
}

.media--cropped {
  padding-bottom: 56%;
}

.media--16-9 {
  padding-bottom: 56.25%;
}

.media--circle {
  padding-bottom: 100%;
  border-radius: 50%;
}

.media.media--hover-effect > img + img {
  opacity: 0;
}

@media screen and (min-width: 990px) {
  .media--cropped {
    padding-bottom: 63%;
  }
}

deferred-media {
  display: block;
}

/* component-button */
/* Button - default */

.button--secondary,
.button--tertiary {
  --color-button: var(--color-secondary-button);
  --color-button-text: var(--color-secondary-button-text);
}

.button--tertiary {
  --alpha-button-background: 0;
  --alpha-button-border: 0.2;
}

.button,
.shopify-challenge__button,
.customer button,
button.shopify-payment-button__button--unbranded {
  --shadow-horizontal-offset: var(--buttons-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--buttons-shadow-vertical-offset);
  --shadow-blur-radius: var(--buttons-shadow-blur-radius);
  --shadow-opacity: var(--buttons-shadow-opacity);
  --shadow-visible: var(--buttons-shadow-visible);
  --border-offset: var(--buttons-border-offset); /* reduce radius edge artifacts */
  --border-opacity: calc(1 - var(--buttons-border-opacity));
  border-radius: var(--buttons-radius-outset);
  position: relative;
}

.button,
.shopify-challenge__button,
.customer button,
button.shopify-payment-button__button--unbranded {
  min-width: calc(12rem + var(--buttons-border-width) * 2);
  min-height: calc(4.5rem + var(--buttons-border-width) * 2);
}

.button,
.shopify-challenge__button,
.customer button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 0;
  padding: 0 3rem;
  cursor: pointer;
  font: inherit;
  font-size: 1.5rem;
  text-decoration: none;
  color: rgb(var(--color-button-text));
  transition: box-shadow var(--duration-short) ease;
  -webkit-appearance: none;
  appearance: none;
  background-color: rgba(var(--color-button), var(--alpha-button-background));
}

.button:before,
.shopify-challenge__button:before,
.customer button:before,
.shopify-payment-button__button--unbranded:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  border-radius: var(--buttons-radius-outset);
  box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius)
    rgba(var(--color-shadow), var(--shadow-opacity));
}

.button:after,
.shopify-challenge__button:after,
.customer button:after,
.shopify-payment-button__button--unbranded:after {
  content: '';
  position: absolute;
  top: var(--buttons-border-width);
  right: var(--buttons-border-width);
  bottom: var(--buttons-border-width);
  left: var(--buttons-border-width);
  z-index: 1;
  border-radius: var(--buttons-radius);
  box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset))
      rgba(var(--color-button-text), var(--border-opacity)),
    0 0 0 var(--buttons-border-width) rgba(var(--color-button), var(--alpha-button-background));
  transition: box-shadow var(--duration-short) ease;
}

.button:not([disabled]):hover::after,
.shopify-challenge__button:hover::after,
.customer button:hover::after,
.shopify-payment-button__button--unbranded:hover::after {
  --border-offset: 1.3px;
  box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset))
      rgba(var(--color-button-text), var(--border-opacity)),
    0 0 0 calc(var(--buttons-border-width) + 1px) rgba(var(--color-button), var(--alpha-button-background));
}

.button--secondary:after {
  --border-opacity: var(--buttons-border-opacity);
}

.button:focus-visible,
.button:focus,
.button.focused,
.shopify-payment-button__button--unbranded:focus-visible,
.shopify-payment-button__button--unbranded:focus {
  outline: 0;
  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0 0.5rem rgba(var(--color-foreground), 0.5),
    0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
}

.button:focus:not(:focus-visible):not(.focused),
.shopify-payment-button__button--unbranded:focus:not(:focus-visible):not(.focused) {
  box-shadow: inherit;
}

.button::selection,
.shopify-challenge__button::selection,
.customer button::selection {
  background-color: rgba(var(--color-button-text), 0.3);
}

.button,
.button-label,
.shopify-challenge__button,
.customer button {
  font-size: 1.5rem;
  letter-spacing: 0.1rem;
  line-height: calc(1 + 0.2 / var(--font-body-scale));
}

.button--tertiary {
  font-size: 1.2rem;
  padding: 1rem 1.5rem;
  min-width: calc(9rem + var(--buttons-border-width) * 2);
  min-height: calc(3.5rem + var(--buttons-border-width) * 2);
}

.button--small {
  padding: 1.2rem 2.6rem;
}

/* Shopify Accelerated Checkout */

shopify-accelerated-checkout {
  --shopify-accelerated-checkout-button-border-radius: var(--buttons-radius-outset);
  --shopify-accelerated-checkout-button-box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius)
  rgba(var(--color-shadow), var(--shadow-opacity));
}
shopify-accelerated-checkout-cart {
  --shopify-accelerated-checkout-button-border-radius: var(--buttons-radius-outset);
  --shopify-accelerated-checkout-button-box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius)
  rgba(var(--color-shadow), var(--shadow-opacity));
}


/* Button - other */

.button:disabled,
.button[aria-disabled='true'],
.button.disabled,
.customer button:disabled,
.customer button[aria-disabled='true'],
.customer button.disabled,
.quantity__button.disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.button--full-width {
  display: flex;
  width: 100%;
}

.button.loading {
  color: transparent;
  position: relative;
}

@media screen and (forced-colors: active) {
  .button.loading {
    color: rgb(var(--color-foreground));
  }
}

.button.loading > .loading__spinner {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  height: 100%;
  display: flex;
  align-items: center;
}

.button.loading > .loading__spinner .spinner {
  width: fit-content;
}

.button.loading > .loading__spinner .path {
  stroke: rgb(var(--color-button-text));
}

/* Button - social share */

.share-button {
  display: block;
  position: relative;
}

.share-button details {
  width: fit-content;
}

.share-button__button {
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  color: rgb(var(--color-link));
  margin-left: 0;
  padding-left: 0;
  min-height: 4.4rem;
}

details[open] > .share-button__fallback {
  animation: animateMenuOpen var(--duration-default) ease;
}

.share-button__button:hover {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.share-button__button,
.share-button__fallback button {
  cursor: pointer;
  background-color: transparent;
  border: none;
}

.share-button__button .icon-share {
  height: 1.2rem;
  margin-right: 1rem;
  min-width: 1.3rem;
}

.share-button__fallback {
  display: flex;
  align-items: center;
  position: absolute;
  top: 3rem;
  left: 0.1rem;
  z-index: 3;
  width: 100%;
  min-width: max-content;
  border-radius: var(--inputs-radius);
  border: 0;
}

.share-button__fallback:after {
  pointer-events: none;
  content: '';
  position: absolute;
  top: var(--inputs-border-width);
  right: var(--inputs-border-width);
  bottom: var(--inputs-border-width);
  left: var(--inputs-border-width);
  border: 0.1rem solid transparent;
  border-radius: var(--inputs-radius);
  box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground), var(--inputs-border-opacity));
  transition: box-shadow var(--duration-short) ease;
  z-index: 1;
}

.share-button__fallback:before {
  background: rgb(var(--color-background));
  pointer-events: none;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: var(--inputs-radius-outset);
  box-shadow: var(--inputs-shadow-horizontal-offset) var(--inputs-shadow-vertical-offset)
    var(--inputs-shadow-blur-radius) rgba(var(--color-shadow), var(--inputs-shadow-opacity));
  z-index: -1;
}

.share-button__fallback button {
  width: 4.4rem;
  height: 4.4rem;
  padding: 0;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  right: var(--inputs-border-width);
}

.share-button__fallback button:hover {
  color: rgba(var(--color-foreground), 0.75);
}

.share-button__fallback button:hover .svg-wrapper {
  transform: scale(1.07);
}

.share-button__close:not(.hidden) + .share-button__copy {
  display: none;
}

.share-button__close,
.share-button__copy {
  background-color: transparent;
  color: rgb(var(--color-foreground));
}

.share-button__copy:focus-visible,
.share-button__close:focus-visible {
  background-color: rgb(var(--color-background));
  z-index: 2;
}

.share-button__copy:focus,
.share-button__close:focus {
  background-color: rgb(var(--color-background));
  z-index: 2;
}

.field:not(:focus-visible):not(.focused) + .share-button__copy:not(:focus-visible):not(.focused),
.field:not(:focus-visible):not(.focused) + .share-button__close:not(:focus-visible):not(.focused) {
  background-color: inherit;
}

.share-button__fallback .field:after,
.share-button__fallback .field:before {
  content: none;
}

.share-button__fallback .field {
  border-radius: 0;
  min-width: auto;
  min-height: auto;
  transition: none;
}

.share-button__fallback .field__input:focus,
.share-button__fallback .field__input:-webkit-autofill {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: 0.1rem;
  box-shadow: 0 0 0 0.1rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
}

.share-button__fallback .field__input {
  box-shadow: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  filter: none;
  min-width: auto;
  min-height: auto;
}

.share-button__fallback .field__input:hover {
  box-shadow: none;
}

.share-button__fallback .icon {
  width: 1.5rem;
  height: 1.5rem;
}

.share-button__message:not(:empty) {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  margin-top: 0;
  padding: 0.8rem 0 0.8rem 1.5rem;
  margin: var(--inputs-border-width);
}

.share-button__message:not(:empty):not(.hidden) ~ * {
  display: none;
}

/* component-form */
.field__input,
.select__select,
.customer .field input,
.customer select {
  -webkit-appearance: none;
  appearance: none;
  background-color: rgb(var(--color-background));
  color: rgb(var(--color-foreground));
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  font-size: 1.6rem;
  width: 100%;
  box-sizing: border-box;
  transition: box-shadow var(--duration-short) ease;
  border-radius: var(--inputs-radius);
  height: 4.5rem;
  min-height: calc(var(--inputs-border-width) * 2);
  min-width: calc(7rem + (var(--inputs-border-width) * 2));
  position: relative;
  border: 0;
}

.field:before,
.select:before,
.customer .field:before,
.customer select:before,
.localization-form__select:before {
  pointer-events: none;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: var(--inputs-radius-outset);
  box-shadow: var(--inputs-shadow-horizontal-offset) var(--inputs-shadow-vertical-offset)
    var(--inputs-shadow-blur-radius) rgba(var(--color-shadow), var(--inputs-shadow-opacity));
  z-index: -1;
}

.field:after,
.select:after,
.customer .field:after,
.customer select:after,
.localization-form__select:after {
  pointer-events: none;
  content: '';
  position: absolute;
  top: var(--inputs-border-width);
  right: var(--inputs-border-width);
  bottom: var(--inputs-border-width);
  left: var(--inputs-border-width);
  border: 0.1rem solid transparent;
  border-radius: var(--inputs-radius);
  box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground), var(--inputs-border-opacity));
  transition: box-shadow var(--duration-short) ease;
  z-index: 1;
}

.select__select {
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  font-size: 1.2rem;
  color: rgba(var(--color-foreground), 0.75);
}

.field:hover.field:after,
.select:hover.select:after,
.select__select:hover.select__select:after,
.customer .field:hover.field:after,
.customer select:hover.select:after,
.localization-form__select:hover.localization-form__select:after {
  box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width))
    rgba(var(--color-foreground), var(--inputs-border-opacity));
  outline: 0;
  border-radius: var(--inputs-radius);
}

.field__input:focus-visible,
.select__select:focus-visible,
.customer .field input:focus-visible,
.customer select:focus-visible,
.localization-form__select:focus-visible.localization-form__select:after {
  box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width)) rgba(var(--color-foreground));
  outline: 0;
  border-radius: var(--inputs-radius);
}

.field__input:focus,
.select__select:focus,
.customer .field input:focus,
.customer select:focus,
.localization-form__select:focus.localization-form__select:after {
  box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width)) rgba(var(--color-foreground));
  outline: 0;
  border-radius: var(--inputs-radius);
}

.localization-form__select:focus {
  outline: 0;
  box-shadow: none;
}

.text-area,
.select {
  display: flex;
  position: relative;
  width: 100%;
}

/* Select */

.select .svg-wrapper,
.customer select + .svg-wrapper {
  height: 0.6rem;
  width: 1rem;
  pointer-events: none;
  position: absolute;
  top: calc(50% - 0.2rem);
  right: 0;
}

.select__select,
.customer select {
  cursor: pointer;
  line-height: calc(1 + 0.6 / var(--font-body-scale));
  padding: 0 calc(var(--inputs-border-width) + 3rem) 0 2rem;
  margin: var(--inputs-border-width);
  min-height: calc(var(--inputs-border-width) * 2);
}

/* Field */

.field {
  position: relative;
  width: 100%;
  display: flex;
  transition: box-shadow var(--duration-short) ease;
}

.customer .field {
  display: flex;
}

.field--with-error {
  flex-wrap: wrap;
}

.field__input,
.customer .field input {
  flex-grow: 1;
  text-align: left;
  padding: 1.5rem;
  margin: var(--inputs-border-width);
  transition: box-shadow var(--duration-short) ease;
}

.field__label,
.customer .field label {
  font-size: 1.6rem;
  left: calc(var(--inputs-border-width) + 2rem);
  top: calc(1rem + var(--inputs-border-width));
  margin-bottom: 0;
  pointer-events: none;
  position: absolute;
  transition: top var(--duration-short) ease, font-size var(--duration-short) ease;
  color: rgba(var(--color-foreground), 0.75);
  letter-spacing: 0.1rem;
  line-height: 1.5;
}

.field__input:focus ~ .field__label,
.field__input:not(:placeholder-shown) ~ .field__label,
.field__input:-webkit-autofill ~ .field__label,
.customer .field input:focus ~ label,
.customer .field input:not(:placeholder-shown) ~ label,
.customer .field input:-webkit-autofill ~ label {
  font-size: 1rem;
  top: calc(var(--inputs-border-width) + 0.5rem);
  left: calc(var(--inputs-border-width) + 2rem);
  letter-spacing: 0.04rem;
}

.field__input:focus,
.field__input:not(:placeholder-shown),
.field__input:-webkit-autofill,
.customer .field input:focus,
.customer .field input:not(:placeholder-shown),
.customer .field input:-webkit-autofill {
  padding: 2.2rem 1.5rem 0.8rem 2rem;
  margin: var(--inputs-border-width);
}

.field__input::-webkit-search-cancel-button,
.customer .field input::-webkit-search-cancel-button {
  display: none;
}

.field__input::placeholder,
.customer .field input::placeholder {
  opacity: 0;
}

.field__button {
  align-items: center;
  background-color: transparent;
  border: 0;
  color: currentColor;
  cursor: pointer;
  display: flex;
  height: 4.4rem;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 4.4rem;
}

.field__button > .svg-wrapper {
  height: 2.5rem;
  width: 2.5rem;
}

.field__input:-webkit-autofill ~ .field__button,
.field__input:-webkit-autofill ~ .field__label,
.customer .field input:-webkit-autofill ~ label {
  color: rgb(0, 0, 0);
}

/* Text area */

.text-area {
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  min-height: 10rem;
  resize: none;
}

input[type='checkbox'] {
  display: inline-block;
  width: auto;
  margin-right: 0.5rem;
}

/* Form global */

.form__label {
  display: block;
  margin-bottom: 0.6rem;
}

.form__message {
  align-items: center;
  display: flex;
  font-size: 1.4rem;
  line-height: 1;
  margin-top: 1rem;
}

.form__message--large {
  font-size: 1.6rem;
}

.customer .field .form__message {
  font-size: 1.4rem;
  text-align: left;
}

.form__message .icon,
.customer .form__message .svg-wrapper {
  flex-shrink: 0;
  height: 1.3rem;
  margin-right: 0.5rem;
  width: 1.3rem;
}

.form__message--large .icon,
.customer .form__message .svg-wrapper {
  height: 1.5rem;
  width: 1.5rem;
  margin-right: 1rem;
}

.customer .field .form__message .svg-wrapper {
  align-self: start;
}

.form-status {
  margin: 0;
  font-size: 1.6rem;
}

.form-status-list {
  padding: 0;
  margin: 2rem 0 4rem;
}

.form-status-list li {
  list-style-position: inside;
}

.form-status-list .link::first-letter {
  text-transform: capitalize;
}

/* component-quantity */
.quantity {
  color: rgba(var(--color-foreground));
  position: relative;
  width: calc(14rem / var(--font-body-scale) + var(--inputs-border-width) * 2);
  display: flex;
  border-radius: var(--inputs-radius);
  min-height: calc((var(--inputs-border-width) * 2) + 4.5rem);
}

.quantity:after {
  pointer-events: none;
  content: '';
  position: absolute;
  top: var(--inputs-border-width);
  right: var(--inputs-border-width);
  bottom: var(--inputs-border-width);
  left: var(--inputs-border-width);
  border: 0.1rem solid transparent;
  border-radius: var(--inputs-radius);
  box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground), var(--inputs-border-opacity));
  transition: box-shadow var(--duration-short) ease;
  z-index: 1;
}

.quantity:before {
  background: rgb(var(--color-background));
  pointer-events: none;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: var(--inputs-radius-outset);
  box-shadow: var(--inputs-shadow-horizontal-offset) var(--inputs-shadow-vertical-offset)
    var(--inputs-shadow-blur-radius) rgba(var(--color-shadow), var(--inputs-shadow-opacity));
  z-index: -1;
}

.quantity__input {
  color: currentColor;
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  font-size: 1.6rem;
  font-weight: 500;
  opacity: 0.85;
  text-align: center;
  background-color: transparent;
  border: 0;
  padding: 0 0.5rem;
  width: 100%;
  flex-grow: 1;
  -webkit-appearance: none;
  appearance: none;
}

.quantity__button {
  width: calc(4.5rem / var(--font-body-scale));
  flex-shrink: 0;
  font-size: 1.8rem;
  border: 0;
  background-color: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(var(--color-foreground));
  padding: 0;
}

.quantity__button:first-child {
  margin-left: calc(var(--inputs-border-width));
}

.quantity__button:last-child {
  margin-right: calc(var(--inputs-border-width));
}

.quantity__button .svg-wrapper {
  width: 1rem;
  pointer-events: none;
}

.quantity__button:focus-visible,
.quantity__input:focus-visible {
  background-color: rgb(var(--color-background));
  z-index: 2;
}

.quantity__button:focus,
.quantity__input:focus {
  background-color: rgb(var(--color-background));
  z-index: 2;
}

.quantity__button:not(:focus-visible):not(.focused),
.quantity__input:not(:focus-visible):not(.focused) {
  box-shadow: inherit;
  background-color: inherit;
}

.quantity__input:-webkit-autofill,
.quantity__input:-webkit-autofill:hover,
.quantity__input:-webkit-autofill:active {
  box-shadow: 0 0 0 10rem rgb(var(--color-background)) inset !important;
  -webkit-box-shadow: 0 0 0 10rem rgb(var(--color-background)) inset !important;
}

.quantity__input::-webkit-outer-spin-button,
.quantity__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.quantity__input[type='number'] {
  -moz-appearance: textfield;
}

.quantity__rules {
  margin-top: 0.5rem;
  position: relative;
  font-size: 1.2rem;
}

.quantity__rules .caption {
  display: inline-block;
  margin-top: 0;
  margin-bottom: 0;
}

.quantity__rules .divider + .divider::before {
  content: '\2022';
  margin: 0 0.5rem;
}

.quantity__rules-cart {
  position: relative;
}

.product__info-container .loading__spinner:not(.hidden) ~ *,
.quantity__rules-cart .loading__spinner:not(.hidden) ~ * {
  visibility: hidden;
}

/* component-modal */
.modal__toggle {
  list-style-type: none;
}

.modal__toggle-close {
  display: none;
}

.modal__toggle-open {
  display: flex;
}

.modal__close-button.link {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0rem;
  height: 4.4rem;
  width: 4.4rem;
  background-color: transparent;
}

.modal__close-button .icon {
  width: 1.7rem;
  height: 1.7rem;
}

.modal__content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgb(var(--color-background));
  z-index: 4;
  display: flex;
  justify-content: center;
  align-items: center;
}

.media-modal {
  cursor: zoom-out;
}

.media-modal .deferred-media {
  cursor: initial;
}

/* component-cart-count-bubble */
.cart-count-bubble:empty {
  display: none;
}

.cart-count-bubble {
  position: absolute;
  background-color: rgb(var(--color-button));
  color: rgb(var(--color-button-text));
  height: 1.7rem;
  width: 1.7rem;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.9rem;
  bottom: 0.8rem;
  left: 2.2rem;
  line-height: calc(1 + 0.1 / var(--font-body-scale));
}

/* utility-bar */
.utility-bar {
  height: 100%;
}

.utility-bar--bottom-border {
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
}

@media screen and (min-width: 990px) {
  .utility-bar--bottom-border-social-only {
    border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
  }
}

.utility-bar__grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: 'announcements';
}

.utility-bar__grid .list-social {
  justify-content: flex-start;
  align-content: center;
  margin-left: -1.2rem;
  grid-area: social-icons;
}

@media screen and (max-width: 989px) {
  .utility-bar .utility-bar__grid .list-social {
    display: none;
  }
}

.utility-bar .list-social__item .icon {
  scale: 0.9;
}

@media screen and (min-width: 990px) {
  .utility-bar__grid--3-col {
    grid-template-columns: 3fr 4fr 3fr;
    grid-template-areas: 'social-icons announcements language-currency';
  }

  .utility-bar__grid--2-col {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 'social-icons language-currency';
  }

  .announcement-bar.announcement-bar--one-announcement,
  .announcement-bar--one-announcement .announcement-bar__link {
    width: fit-content;
    margin: auto;
  }
}

.announcement-bar,
.announcement-bar__announcement {
  color: rgb(var(--color-foreground));
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  grid-area: announcements;
}

.announcement-bar .slider--everywhere {
  margin-bottom: 0;
  scroll-behavior: auto;
}

.utility-bar__grid .announcement-bar-slider {
  width: 100%;
}

.utility-bar__grid .announcement-bar-slider {
  width: 100%;
}

.announcement-bar-slider,
.announcement-bar-slider .slider {
  width: 100%;
}

.announcement-bar .slider-button--next {
  margin-right: -1.5rem;
  min-width: 44px;
}

.announcement-bar .slider-button--prev {
  margin-left: -1.5rem;
  min-width: 44px;
}

.announcement-bar .slider-button--next:focus-visible,
.announcement-bar .slider-button--prev:focus-visible,
.utility-bar .list-social__link:focus-visible {
  outline-offset: -0.3rem;
  box-shadow: 0 0 0 -0.2rem rgb(var(--color-foreground));
}

.localization-wrapper {
  grid-area: language-currency;
  align-self: center;
  display: flex;
  justify-content: flex-end;
}

.localization-wrapper .localization-selector + .disclosure__list-wrapper {
  animation: animateMenuOpen var(--duration-default) ease;
}

.utility-bar .localization-wrapper .disclosure .localization-form__select,
.utility-bar .localization-wrapper .disclosure__link {
  font-size: calc(var(--font-heading-scale) * 1.3rem);
}

@media screen and (min-width: 990px) {
  body:has(.section-header .header:not(.drawer-menu)) .utility-bar .page-width {
    padding-left: 5rem;
    padding-right: 5rem;
  }

  .announcement-bar-slider {
    width: 60%;
  }

  .announcement-bar .slider-button {
    height: 3.8rem;
  }
}

.announcement-bar__link {
  display: flex;
  width: 100%;
  text-decoration: none;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.announcement-bar__link:hover {
  text-decoration: underline;
}

.announcement-bar__link .icon-arrow {
  display: inline-block;
  pointer-events: none;
  margin-left: 0.8rem;
  vertical-align: middle;
  margin-bottom: 0.2rem;
}

.announcement-bar__message {
  text-align: center;
  padding: 1rem 0;
  margin: 0;
  letter-spacing: 0.1rem;
  min-height: 3.8rem;
}

.announcement-bar-slider--fade-in-next .announcement-bar__message,
.announcement-bar-slider--fade-in-previous .announcement-bar__message,
.announcement-bar-slider--fade-out-next .announcement-bar__message,
.announcement-bar-slider--fade-out-previous .announcement-bar__message {
  animation-duration: var(--duration-announcement-bar);
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

.announcement-bar-slider--fade-in-next .announcement-bar__message {
  --announcement-translate-from: -1.5rem;
  /* Prevent flicker */
  opacity: 0;
  animation-name: translateAnnouncementSlideIn;
  animation-delay: var(--duration-announcement-bar);
}

.announcement-bar-slider--fade-in-previous .announcement-bar__message {
  --announcement-translate-from: 1.5rem;
  /* Prevent flicker */
  opacity: 0;
  animation-name: translateAnnouncementSlideIn;
  animation-delay: var(--duration-announcement-bar);
}

.announcement-bar-slider--fade-out-next .announcement-bar__message {
  --announcement-translate-to: 1.5rem;
  animation-name: translateAnnouncementSlideOut;
}

.announcement-bar-slider--fade-out-previous .announcement-bar__message {
  --announcement-translate-to: -1.5rem;
  animation-name: translateAnnouncementSlideOut;
}

@keyframes translateAnnouncementSlideIn {
  0% {
    opacity: 0;
    transform: translateX(var(--announcement-translate-from));
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes translateAnnouncementSlideOut {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(var(--announcement-translate-to));
  }
}

/* section-header */
.section-header.shopify-section-group-header-group {
  z-index: 3;
}

.shopify-section-header-sticky {
  position: sticky;
  top: 0;
}

.shopify-section-header-hidden {
  top: calc(-1 * var(--header-height));
}

.shopify-section-header-hidden.menu-open {
  top: 0;
}

.section-header.animate {
  transition: top 0.15s ease-out;
}

.shopify-section-group-header-group {
  z-index: 4;
}

.section-header ~ .shopify-section-group-header-group {
  z-index: initial;
}

/* Main Header Layout */
.header-wrapper {
  display: block;
  position: relative;
  background-color: rgb(var(--color-background));
}

.header-wrapper--border-bottom {
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
}

.header {
  display: grid;
  grid-template-areas: 'left-icons heading icons';
  grid-template-columns: 1fr 2fr 1fr;
  align-items: center;
}

@media screen and (max-width: 749px) {
  .header--has-app {
    grid-template-columns: auto 1fr auto;
  }
}

@media screen and (min-width: 990px) {
  .header {
    grid-template-columns: 1fr auto 1fr;
  }

  .header--top-left,
  .header--middle-left:not(.header--has-menu) {
    grid-template-areas:
      'heading icons'
      'navigation navigation';
    grid-template-columns: 1fr auto;
  }

  .header--top-left.drawer-menu,
  .header--middle-left.drawer-menu {
    grid-template-areas: 'navigation heading icons';
    grid-template-columns: auto 1fr auto;
    column-gap: 1rem;
  }

  .header--middle-left {
    grid-template-areas: 'heading navigation icons';
    grid-template-columns: auto auto 1fr;
    column-gap: 2rem;
  }

  .header--middle-center:not(.drawer-menu) {
    grid-template-areas: 'navigation heading icons';
    grid-template-columns: 1fr auto 1fr;
    column-gap: 2rem;
  }

  .header--middle-center a.header__heading-link {
    text-align: center;
  }

  .header--top-center {
    grid-template-areas:
      'left-icons heading icons'
      'navigation navigation navigation';
  }

  .header--top-center.drawer-menu {
    grid-template-areas: 'left-icons heading icons';
    grid-template-columns: 1fr auto 1fr;
  }

  .header:not(.header--middle-left, .header--middle-center) .header__inline-menu {
    margin-top: 1.05rem;
  }
}

.header *[tabindex='-1']:focus {
  outline: none;
}

.header__heading {
  margin: 0;
  line-height: 0;
}

.header > .header__heading-link {
  line-height: 0;
}

.header__heading,
.header__heading-link {
  grid-area: heading;
  justify-self: center;
}

.header__heading-link {
  display: inline-block;
  padding: 0.75rem;
  text-decoration: none;
  word-break: break-word;
}

.header__heading-link:hover .h2 {
  color: rgb(var(--color-foreground));
}

.header__heading-link .h2 {
  line-height: 1;
  color: rgba(var(--color-foreground), 0.75);
}

.header__heading-logo {
  height: auto;
  max-width: 100%;
}

.header__heading-logo-wrapper {
  width: 100%;
  display: inline-block;
  transition: width 0.3s cubic-bezier(0.52, 0, 0.61, 0.99);
}

@media screen and (max-width: 989px) {
  .header__heading,
  .header__heading-link {
    text-align: center;
  }

  .header--mobile-left .header__heading,
  .header--mobile-left .header__heading-link {
    text-align: left;
    justify-self: start;
  }

  .header--mobile-left {
    grid-template-columns: auto 2fr 1fr;
  }
}

@media screen and (min-width: 990px) {
  .header--middle-left .header__heading-link,
  .header--top-left .header__heading-link {
    margin-left: -0.75rem;
  }

  .header__heading,
  .header__heading-link {
    justify-self: start;
  }

  .header--middle-center .header__heading-link,
  .header--middle-center .header__heading {
    justify-self: center;
    text-align: center;
  }

  .header--top-center .header__heading-link,
  .header--top-center .header__heading {
    justify-self: center;
    text-align: center;
  }
}

/* Header icons */
.header__icons {
  display: flex;
  grid-area: icons;
  justify-self: end;
  padding-right: 0.8rem;
}

.header__icons .shopify-app-block {
  max-width: 4.4rem;
  max-height: 4.4rem;
  overflow: hidden;
}

.header__icon:not(.header__icon--summary),
.header__icon span {
  display: flex;
  align-items: center;
  justify-content: center;
}

.header__icon {
  color: rgb(var(--color-foreground));
}

.header__icon span {
  height: 100%;
}

.header__icon .svg-wrapper {
  width: 44px;
  height: 44px;
}

.header__icon::after {
  content: none;
}

.header__icon:hover .icon,
.modal__close-button:hover .icon {
  transform: scale(1.07);
}

.header__icon .icon {
  height: 2rem;
  width: 2rem;
  fill: none;
  vertical-align: middle;
}

.header__icon,
.header__icon--cart .icon {
  height: 4.4rem;
  width: 4.4rem;
  padding: 0;
}

.header__icon--cart {
  position: relative;
  margin-right: -1.2rem;
}

.header__icon--menu[aria-expanded='true']::before {
  content: '';
  top: 100%;
  left: 0;
  height: calc(var(--viewport-height, 100vh) - (var(--header-bottom-position, 100%)));
  width: 100%;
  display: block;
  position: absolute;
  background: rgba(var(--color-foreground), 0.5);
}

.header__icon--account shop-user-avatar {
  --shop-avatar-size: 2.8rem;
}

details .header__icon-close {
  display: none;
}

details[open] .header__icon-close {
  display: inline-block;
}

account-icon {
  display: flex;
}

/* Search */
menu-drawer + .header__search {
  display: none;
}

.header > .header__search {
  grid-area: left-icons;
  justify-self: start;
}

.header--top-center.drawer-menu > .header__search {
  margin-left: 3.2rem;
}

.header--top-center header-drawer {
  grid-area: left-icons;
}

.header:not(.header--has-menu) * > .header__search {
  display: none;
}

.header__search {
  display: inline-flex;
  line-height: 0;
}

.header--top-center > .header__search {
  display: none;
}

.header--top-center * > .header__search {
  display: inline-flex;
}

@media screen and (min-width: 990px) {
  .header:not(.header--top-center) * > .header__search,
  .header--top-center > .header__search {
    display: inline-flex;
  }

  .header:not(.header--top-center) > .header__search,
  .header--top-center * > .header__search {
    display: none;
  }
}

details[open] > .search-modal {
  opacity: 1;
  animation: animateMenuOpen var(--duration-default) ease;
}

details[open] .modal-overlay {
  display: block;
}

details[open] .modal-overlay::after {
  position: absolute;
  content: '';
  background-color: rgb(var(--color-foreground), 0.5);
  top: 100%;
  left: 0;
  right: 0;
  height: 100vh;
}

.search-modal {
  opacity: 0;
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
  min-height: calc(100% + var(--inputs-margin-offset) + (2 * var(--inputs-border-width)));
  height: 100%;
}

.search-modal__content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0 5rem 0 1rem;
  line-height: calc(1 + 0.8 / var(--font-body-scale));
  position: relative;
}

.search-modal__content-bottom {
  bottom: calc((var(--inputs-margin-offset) / 2));
}

.search-modal__content-top {
  top: calc((var(--inputs-margin-offset) / 2));
}

.search-modal__form {
  width: 100%;
}

.search-modal__close-button {
  position: absolute;
  right: 0.3rem;
}

@media screen and (min-width: 750px) {
  .search-modal__close-button {
    right: 1rem;
  }

  .search-modal__content {
    padding: 0 6rem;
  }
}

@media screen and (min-width: 990px) {
  .search-modal__form {
    max-width: 74.2rem;
  }

  .search-modal__close-button {
    position: initial;
    margin-left: 0.5rem;
  }
}

/* Header menu drawer */
.header__icon--menu .icon {
  display: block;
  position: absolute;
  opacity: 1;
  transform: scale(1);
  transition: transform 150ms ease, opacity 150ms ease;
}

details:not([open]) > .header__icon--menu .icon-close,
details[open] > .header__icon--menu .icon-hamburger {
  visibility: hidden;
  opacity: 0;
  transform: scale(0.8);
}

.js details[open]:not(.menu-opening) > .header__icon--menu .icon-close {
  visibility: hidden;
}

.js details[open]:not(.menu-opening) > .header__icon--menu .icon-hamburger {
  visibility: visible;
  opacity: 1;
  transform: scale(1.07);
}

.js details > .header__submenu {
  opacity: 0;
  transform: translateY(-1.5rem);
}

details[open] > .header__submenu {
  animation: animateMenuOpen var(--duration-default) ease;
  animation-fill-mode: forwards;
  z-index: 1;
}

@media (prefers-reduced-motion) {
  details[open] > .header__submenu {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Header menu */
.header__inline-menu {
  margin-left: -1.2rem;
  grid-area: navigation;
  display: none;
}

.header--top-center .header__inline-menu,
.header--top-center .header__heading-link {
  margin-left: 0;
}

@media screen and (min-width: 990px) {
  .header__inline-menu {
    display: block;
  }

  .header--top-center .header__inline-menu {
    justify-self: center;
  }

  .header--top-center .header__inline-menu > .list-menu--inline {
    justify-content: center;
  }

  .header--middle-left .header__inline-menu {
    margin-left: 0;
  }
}

.header__menu {
  padding: 0 1rem;
}

.header__menu-item {
  padding: 1.2rem;
  text-decoration: none;
  color: rgba(var(--color-foreground), 0.75);
}

.header__menu-item:hover {
  color: rgb(var(--color-foreground));
}

.header__menu-item span {
  transition: text-decoration var(--duration-short) ease;
}

.header__menu-item:hover span {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

details[open] > .header__menu-item {
  text-decoration: underline;
}

details[open]:hover > .header__menu-item {
  text-decoration-thickness: 0.2rem;
}

details[open] > .header__menu-item .icon-caret {
  transform: rotate(180deg);
}

.header__active-menu-item {
  transition: text-decoration-thickness var(--duration-short) ease;
  color: rgb(var(--color-foreground));
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.header__menu-item:hover .header__active-menu-item {
  text-decoration-thickness: 0.2rem;
}

.header__submenu {
  transition: opacity var(--duration-default) ease, transform var(--duration-default) ease;
}

.global-settings-popup,
.header__submenu.global-settings-popup {
  border-radius: var(--popup-corner-radius);
  border-color: rgba(var(--color-foreground), var(--popup-border-opacity));
  border-style: solid;
  border-width: var(--popup-border-width);
  box-shadow: var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius)
    rgba(var(--color-shadow), var(--popup-shadow-opacity));
  z-index: -1;
}

.header__submenu.list-menu {
  padding: 1rem 0;
}

.header__submenu .header__submenu {
  background-color: rgba(var(--color-foreground), 0.03);
  padding: 1rem 0;
  margin: 1rem 0;
}

.header__submenu .header__menu-item:after {
  right: 2rem;
}

.header__submenu .header__menu-item {
  justify-content: space-between;
  padding: 0.8rem 2rem;
}

.header__submenu .header__menu-item:hover {
  text-decoration-line: underline;
}

.header__menu-item .icon-caret {
  right: 0.8rem;
}

.header__submenu .icon-caret {
  flex-shrink: 0;
  margin-left: 1rem;
  position: static;
}

header-menu > details,
details-disclosure > details {
  position: relative;
}

@keyframes animateMenuOpen {
  0% {
    opacity: 0;
    transform: translateY(-1.5rem);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.overflow-hidden-mobile,
.overflow-hidden-tablet,
.overflow-hidden-desktop {
  overflow: hidden;
}

@media screen and (min-width: 750px) {
  .overflow-hidden-mobile {
    overflow: auto;
  }
}

@media screen and (min-width: 990px) {
  .overflow-hidden-tablet {
    overflow: auto;
  }
}

.badge {
  border: 1px solid transparent;
  border-radius: var(--badge-corner-radius);
  display: inline-block;
  font-size: 1.2rem;
  letter-spacing: 0.1rem;
  line-height: 1;
  padding: 0.5rem 1.3rem 0.6rem 1.3rem;
  text-align: center;
  background-color: rgb(var(--color-badge-background));
  border-color: rgba(var(--color-badge-border), var(--alpha-badge-border));
  color: rgb(var(--color-badge-foreground));
  word-break: break-word;
}

.gradient {
  background: rgb(var(--color-background));
  background: var(--gradient-background);
  background-attachment: fixed;
}

@media screen and (forced-colors: active) {
  .icon {
    color: CanvasText;
    fill: CanvasText !important;
  }

  .icon-close-small path {
    stroke: CanvasText;
  }
}

.ratio {
  display: flex;
  position: relative;
  align-items: stretch;
}

.ratio::before {
  content: '';
  width: 0;
  height: 0;
  padding-bottom: var(--ratio-percent);
}

.content-container {
  border-radius: var(--text-boxes-radius);
  border: var(--text-boxes-border-width) solid rgba(var(--color-foreground), var(--text-boxes-border-opacity));
  position: relative;
}

.content-container:after {
  content: '';
  position: absolute;
  top: calc(var(--text-boxes-border-width) * -1);
  right: calc(var(--text-boxes-border-width) * -1);
  bottom: calc(var(--text-boxes-border-width) * -1);
  left: calc(var(--text-boxes-border-width) * -1);
  border-radius: var(--text-boxes-radius);
  box-shadow: var(--text-boxes-shadow-horizontal-offset) var(--text-boxes-shadow-vertical-offset)
    var(--text-boxes-shadow-blur-radius) rgba(var(--color-shadow), var(--text-boxes-shadow-opacity));
  z-index: -1;
}

.content-container--full-width:after {
  left: 0;
  right: 0;
  border-radius: 0;
}

@media screen and (max-width: 749px) {
  .content-container--full-width-mobile {
    border-left: none;
    border-right: none;
    border-radius: 0;
  }
  .content-container--full-width-mobile:after {
    display: none;
  }
}

.global-media-settings {
  position: relative;
  border: var(--media-border-width) solid rgba(var(--color-foreground), var(--media-border-opacity));
  border-radius: var(--media-radius);
  overflow: visible !important;
  background-color: rgb(var(--color-background));
}

.global-media-settings:after {
  content: '';
  position: absolute;
  top: calc(var(--media-border-width) * -1);
  right: calc(var(--media-border-width) * -1);
  bottom: calc(var(--media-border-width) * -1);
  left: calc(var(--media-border-width) * -1);
  border-radius: var(--media-radius);
  box-shadow: var(--media-shadow-horizontal-offset) var(--media-shadow-vertical-offset) var(--media-shadow-blur-radius)
    rgba(var(--color-shadow), var(--media-shadow-opacity));
  z-index: -1;
  pointer-events: none;
}

.global-media-settings--no-shadow {
  overflow: hidden !important;
}

.global-media-settings--no-shadow:after {
  content: none;
}

.global-media-settings img,
.global-media-settings iframe,
.global-media-settings model-viewer,
.global-media-settings video,
.global-media-settings .placeholder-svg {
  border-radius: calc(var(--media-radius) - var(--media-border-width));
}

.content-container--full-width,
.global-media-settings--full-width,
.global-media-settings--full-width img,
.global-media-settings--full-width video,
.global-media-settings--full-width iframe,
.global-media-settings--full-width .placeholder-svg {
  border-radius: 0;
  border-left: none;
  border-right: none;
}

/* check for flexbox gap in older Safari versions */
@supports not (inset: 10px) {
  .grid {
    margin-left: calc(-1 * var(--grid-mobile-horizontal-spacing));
  }

  .grid__item {
    padding-left: var(--grid-mobile-horizontal-spacing);
    padding-bottom: var(--grid-mobile-vertical-spacing);
  }

  @media screen and (min-width: 750px) {
    .grid {
      margin-left: calc(-1 * var(--grid-desktop-horizontal-spacing));
    }

    .grid__item {
      padding-left: var(--grid-desktop-horizontal-spacing);
      padding-bottom: var(--grid-desktop-vertical-spacing);
    }
  }

  .grid--gapless .grid__item {
    padding-left: 0;
    padding-bottom: 0;
  }

  @media screen and (min-width: 749px) {
    .grid--peek .grid__item {
      padding-left: var(--grid-mobile-horizontal-spacing);
    }
  }

  .product-grid .grid__item {
    padding-bottom: var(--grid-mobile-vertical-spacing);
  }

  @media screen and (min-width: 750px) {
    .product-grid .grid__item {
      padding-bottom: var(--grid-desktop-vertical-spacing);
    }
  }
}

.font-body-bold {
  font-weight: var(--font-body-weight-bold);
}

/* outline and border styling for Windows High Contrast Mode */
@media (forced-colors: active) {
  .button,
  .shopify-challenge__button,
  .customer button {
    border: transparent solid 1px;
  }

  .button:focus-visible,
  .button:focus,
  .button.focused,
  .shopify-payment-button__button--unbranded:focus-visible,
  .shopify-payment-button [role='button']:focus-visible,
  .shopify-payment-button__button--unbranded:focus,
  .shopify-payment-button [role='button']:focus {
    outline: solid transparent 1px;
  }

  .field__input:focus,
  .select__select:focus,
  .customer .field input:focus,
  .customer select:focus,
  .localization-form__select:focus.localization-form__select:after {
    outline: transparent solid 1px;
  }

  .localization-form__select:focus {
    outline: transparent solid 1px;
  }
}

.rte:after {
  clear: both;
  content: '';
  display: block;
}

.rte > *:first-child {
  margin-top: 0;
}

.rte > *:last-child {
  margin-bottom: 0;
}

.rte table {
  table-layout: fixed;
}

@media screen and (min-width: 750px) {
  .rte table td {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }
}

.rte img {
  height: auto;
  max-width: 100%;
  border: var(--media-border-width) solid rgba(var(--color-foreground), var(--media-border-opacity));
  border-radius: var(--media-radius);
  box-shadow: var(--media-shadow-horizontal-offset) var(--media-shadow-vertical-offset) var(--media-shadow-blur-radius)
    rgba(var(--color-shadow), var(--media-shadow-opacity));
  margin-bottom: var(--media-shadow-vertical-offset);
}

.rte ul,
.rte ol {
  list-style-position: inside;
  padding-left: 2rem;
}

.rte li {
  list-style: inherit;
}

.rte li:last-child {
  margin-bottom: 0;
}

.rte a {
  color: rgba(var(--color-link), var(--alpha-link));
  text-underline-offset: 0.3rem;
  text-decoration-thickness: 0.1rem;
  transition: text-decoration-thickness var(--duration-short) ease;
}

.rte a:hover {
  color: rgb(var(--color-link));
  text-decoration-thickness: 0.2rem;
}

.rte blockquote {
  display: inline-flex;
}

.rte blockquote > * {
  margin: -0.5rem 0 -0.5rem 0;
}

/* Image mask global styles */

.shape--mask {
  display: block;
  height: 0;
  width: 0;
}

.shape--arch {
  clip-path: url('#Shape-Arch');
}

.shape--blob {
  clip-path: polygon(var(--shape--blob-1));
}

.shape--chevronleft {
  clip-path: polygon(100% 0%, 85% 50%, 100% 100%, 15% 100%, 0% 50%, 15% 0%);
}

.shape--chevronright {
  clip-path: polygon(85% 0%, 100% 50%, 85% 100%, 0% 100%, 15% 50%, 0% 0%);
}

.shape--circle {
  clip-path: circle(closest-side);
}

.shape--diamond {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.shape--parallelogram {
  clip-path: polygon(15% 0, 100% 0%, 85% 100%, 0% 100%);
}

.shape--round {
  clip-path: ellipse(45% 45% at 50% 50%);
}

/* Fixed background */
.animate--fixed {
  clip-path: inset(0);
}

.animate--fixed > img:not(.zoom):not(.deferred-media__poster-button),
.animate--fixed > svg:not(.zoom):not(.deferred-media__poster-button) {
  position: fixed;
  height: 100vh;
}

/* Zoom in image on scroll */
.animate--zoom-in {
  --zoom-in-ratio: 1;
}

.animate--zoom-in > img,
.animate--zoom-in > .svg-wrapper {
  transition: scale var(--duration-short) linear;
  scale: var(--zoom-in-ratio);
}

/* Animations */

@media (prefers-reduced-motion: no-preference) {
  .animate--ambient > img,
  .animate--ambient > .svg-wrapper {
    animation: animateAmbient 30s linear infinite;
  }

  @keyframes animateAmbient {
    0% {
      transform: rotate(0deg) translateX(1em) rotate(0deg) scale(1.2);
    }
    100% {
      transform: rotate(360deg) translateX(1em) rotate(-360deg) scale(1.2);
    }
  }

  .scroll-trigger.animate--fade-in,
  .scroll-trigger.animate--slide-in {
    opacity: 0.01;
  }

  .scroll-trigger.animate--slide-in {
    transform: translateY(2rem);
  }

  .scroll-trigger:not(.scroll-trigger--offscreen).animate--fade-in {
    opacity: 1;
    animation: var(--animation-fade-in);
  }

  .scroll-trigger:not(.scroll-trigger--offscreen).animate--slide-in {
    animation: var(--animation-slide-in);
    animation-delay: calc(var(--animation-order) * 75ms);
  }

  .scroll-trigger.scroll-trigger--design-mode.animate--fade-in,
  .scroll-trigger.scroll-trigger--design-mode.animate--slide-in,
  .scroll-trigger.scroll-trigger--design-mode .slider,
  .scroll-trigger:not(.scroll-trigger--offscreen).scroll-trigger--cancel {
    opacity: 1;
    animation: none;
    transition: none;
    transform: none;
  }

  .scroll-trigger.scroll-trigger--design-mode.animate--slide-in {
    transform: translateY(0);
  }

  @keyframes slideIn {
    from {
      transform: translateY(2rem);
      opacity: 0.01;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  @keyframes fadeIn {
    from {
      opacity: 0.01;
    }
    to {
      opacity: 1;
    }
  }
}

/* Element Hovers: Vertical Lift, 3d Lift */

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .animate--hover-3d-lift .card-wrapper .card--card,
  .animate--hover-3d-lift .card-wrapper .card--standard .card__inner,
  .animate--hover-3d-lift .button:not(.button--tertiary),
  .animate--hover-3d-lift .shopify-challenge__button,
  .animate--hover-3d-lift .customer button,
  .animate--hover-3d-lift .shopify-payment-button__button,
  .animate--hover-3d-lift .deferred-media .deferred-media__poster-button {
    transition: transform var(--duration-long) ease, box-shadow var(--duration-long) ease;
    transform-origin: center;
  }

  .animate--hover-3d-lift .card-wrapper:hover .card--card,
  .animate--hover-3d-lift .card-wrapper:hover .card--standard .card__inner,
  .animate--hover-3d-lift .button:not(.button--tertiary):not([disabled]):hover,
  .animate--hover-3d-lift .shopify-challenge__button:not([disabled]):hover,
  .animate--hover-3d-lift .customer button:not([disabled]):hover,
  .animate--hover-3d-lift .shopify-payment-button__button:hover,
  .animate--hover-3d-lift .deferred-media:hover .deferred-media__poster-button {
    transition: transform var(--duration-extended) ease, box-shadow var(--duration-long) ease; /* Slow the card transition speed while hover is active. */
    transform: rotate(1deg);
    box-shadow: -1rem -1rem 1rem -1rem rgba(0, 0, 0, 0.05), 1rem 1rem 1rem -1rem rgba(0, 0, 0, 0.05),
      0 0 0.5rem 0 rgba(255, 255, 255, 0), 0 2rem 3.5rem -2rem rgba(0, 0, 0, 0.5);
  }

  .animate--hover-3d-lift .deferred-media:hover .deferred-media__poster-button {
    transform: translate(-50%, -50%) scale(1.05); /* Apply a specialized transform to the video play button. */
  }

  .animate--hover-3d-lift .collage__item .card-wrapper:hover .card--card,
  .animate--hover-3d-lift .collage__item .card-wrapper:hover .card--standard .card__inner {
    transform: rotate(0.5deg); /* Less intense rotation for collage items. */
  }

  .animate--hover-3d-lift .product-grid .grid__item:hover,
  .animate--hover-3d-lift .collection-list .grid__item:hover,
  .animate--hover-3d-lift .collage__item:hover,
  .animate--hover-3d-lift .blog-articles .article:hover,
  .animate--hover-3d-lift .complementary-slide li:hover {
    z-index: 2; /* Make sure the hovered card is the topmost card. */
  }

  .animate--hover-3d-lift .product-grid {
    isolation: isolate; /* Ensure z-index changes here don't negatively effect other UI stacking. */
  }

  .animate--hover-3d-lift .card-wrapper .card--shape.card--standard:not(.card--text) .card__inner {
    box-shadow: none;
    transition: transform var(--duration-long) ease, filter var(--duration-long) ease;
  }

  .animate--hover-3d-lift .card-wrapper:hover .card--shape.card--standard:not(.card--text) .card__inner {
    transition: transform calc(2 * var(--duration-extended)) ease, filter var(--duration-long) ease; /* Slow the card transition speed while hover is active. */
    filter: drop-shadow(0rem 2rem 2rem rgba(0, 0, 0, 0.15)) drop-shadow(0rem 1rem 1rem rgba(0, 0, 0, 0.15));
  }

  .animate--hover-3d-lift .card-wrapper:hover .card--card:after,
  .animate--hover-3d-lift .card-wrapper:hover .card--standard .card__inner:after,
  .animate--hover-3d-lift
    .card-wrapper:hover
    .card--shape.card--standard:not(.card--text)
    .card__inner
    .card__media:before {
    background-image: var(--easter-egg);
    background-size: 250px 250px;
    mix-blend-mode: color-dodge;
    pointer-events: none;
    z-index: 2;
  }

  .animate--hover-3d-lift
    .card-wrapper:hover
    .card--shape.card--standard:not(.card--text)
    .card__inner
    .card__media:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .animate--hover-3d-lift .card-wrapper .card--card:before,
  .animate--hover-3d-lift .card-wrapper .card--standard .card__media:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
    transition: background-position calc(2 * var(--duration-extended)) ease, opacity var(--duration-default) ease;
    mix-blend-mode: overlay;
    background-size: 400% 100%;
    background-position: 90% 0;
    background-repeat: no-repeat;
    background-image: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0) 45%,
      rgba(255, 255, 255, 1) 50%,
      rgba(255, 255, 255, 0) 55%
    );
  }

  .animate--hover-3d-lift .card-wrapper:hover .card--card:before,
  .animate--hover-3d-lift .card-wrapper:hover .card--standard .card__media:after {
    opacity: 0.2;
    transition: background-position 6s ease, opacity var(--duration-long) ease;
    background-position: left;
    z-index: 2;
  }

  :root {
    --easter-egg: none;
    --sparkle: url('./sparkle.gif');
  }

  .animate--hover-vertical-lift .button:not(.button--tertiary),
  .animate--hover-vertical-lift .shopify-challenge__button,
  .animate--hover-vertical-lift .customer button,
  .animate--hover-vertical-lift .shopify-payment-button__button {
    transition: transform var(--duration-default) var(--ease-out-slow);
  }

  .animate--hover-vertical-lift .card-wrapper .card--card,
  .animate--hover-vertical-lift .card-wrapper .card--standard .card__inner {
    transition: transform var(--duration-medium) var(--ease-out-slow);
  }

  .animate--hover-vertical-lift .card-wrapper:hover .card--card,
  .animate--hover-vertical-lift .card-wrapper:hover .card--standard .card__inner {
    transform: translateY(-0.75rem);
  }

  .animate--hover-vertical-lift .card-wrapper:active .card--card,
  .animate--hover-vertical-lift .card-wrapper:active .card--standard .card__inner {
    transform: translateY(-0.5rem);
  }

  .animate--hover-vertical-lift .button:not(.button--tertiary):not([disabled]):hover,
  .animate--hover-vertical-lift .shopify-challenge__button:not([disabled]):hover,
  .animate--hover-vertical-lift .customer button:not([disabled]):hover,
  .animate--hover-vertical-lift .shopify-payment-button__button:hover {
    transform: translateY(-0.25rem);
  }

  .animate--hover-vertical-lift .button:not(.button--tertiary):not([disabled]):active,
  .animate--hover-vertical-lift .shopify-challenge__button:not([disabled]):active,
  .animate--hover-vertical-lift .customer button:not([disabled]):active,
  .animate--hover-vertical-lift .shopify-payment-button__button:active {
    transform: translateY(0);
  }

  .animate--hover-vertical-lift .button:not([disabled]):hover:after,
  .animate--hover-vertical-lift .customer button:not([disabled]):hover:after,
  .animate--hover-vertical-lift .shopify-payment-button__button:not([disabled]):hover:after {
    --border-offset: 0.3px; /* Default is 1.3px as defined above in this file. This removes 1px to prevent the border from growing on buttons when this effect is on.  */
    box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset))
        rgba(var(--color-button-text), var(--border-opacity)),
      0 0 0 var(--buttons-border-width) rgba(var(--color-button), var(--alpha-button-background));
  }

  .animate--hover-vertical-lift .button:not([disabled]).button--secondary:hover:after {
    --border-offset: 0px; /* Prevent the border from growing on buttons when this effect is on. */
  }
}

/* Loading spinner */
.loading__spinner {
  position: absolute;
  z-index: 1;
  width: 1.8rem;
}

.loading__spinner {
  width: 1.8rem;
  display: inline-block;
}

.spinner {
  animation: rotator 1.4s linear infinite;
}

@keyframes rotator {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(270deg);
  }
}

.path {
  stroke-dasharray: 280;
  stroke-dashoffset: 0;
  transform-origin: center;
  stroke: rgb(var(--color-foreground));
  animation: dash 1.4s ease-in-out infinite;
}

@media screen and (forced-colors: active) {
  .path {
    stroke: CanvasText;
  }
}

@keyframes dash {
  0% {
    stroke-dashoffset: 280;
  }
  50% {
    stroke-dashoffset: 75;
    transform: rotate(135deg);
  }
  100% {
    stroke-dashoffset: 280;
    transform: rotate(450deg);
  }
}

.loading__spinner:not(.hidden) + .cart-item__price-wrapper,
.loading__spinner:not(.hidden) ~ cart-remove-button {
  opacity: 50%;
}

.loading__spinner:not(.hidden) ~ cart-remove-button {
  pointer-events: none;
  cursor: default;
}

/* Progress bar */
.progress-bar-container {
  width: 100%;
  margin: auto;
}

.progress-bar {
  height: 0.13rem;
  width: 100%;
}

.progress-bar-value {
  width: 100%;
  height: 100%;
  background-color: rgb(var(--color-foreground));
  animation: indeterminateAnimation var(--duration-extra-longer) infinite ease-in-out;
  transform-origin: 0;
}

.progress-bar .progress-bar-value {
  display: block;
}

@keyframes indeterminateAnimation {
  0% {
    transform: translateX(-20%) scaleX(0);
  }
  40% {
    transform: translateX(30%) scaleX(0.7);
  }
  100% {
    transform: translateX(100%) scaleX(0);
  }
}

/* =============================================
   LUMÉ AMANI. Product Card System
   assets/base.css · replace previous LUMÉ block
============================================= */

/* ---- Card heading ---- */
.card__heading {
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  line-height: 1.28;
  font-weight: 600;
  color: #1a1a1a;
}

.card__heading a {
  text-decoration: none;
  color: inherit;
  transition: color 0.25s ease;
}

.card__heading a:hover {
  color: #8C5934;
}

/* ---- Signature line (character tags) ---- */
.product-card-signature {
  display: block;
  margin-top: 0.5rem;
  margin-bottom: 0.9rem;
  font-size: 0.72rem;
  line-height: 1.4;
  letter-spacing: 0.08em;
  font-style: italic;
  opacity: 0.58;
  color: rgb(var(--color-foreground));
}

/* ---- Price ---- */
.price {
  font-size: 1.0rem;
  letter-spacing: 0.04em;
  font-weight: 500;
  opacity: 1;
  color: #1a1a1a;
}

/* ---- Card information padding ---- */
.card__information {
  padding-top: 1.1rem;
  padding-bottom: 0.25rem;
}

/* Card wrapper · hover lift */
.card-wrapper {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  padding-bottom: 0.1rem;
}

.card-wrapper:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 32px rgba(184, 134, 11, 0.07),
              0 2px 8px rgba(0, 0, 0, 0.04);
}

/* ---- Image scale on hover ---- */
.media img {
  transition: transform 0.65s ease;
}

.card-wrapper:hover .media img {
  transform: scale(1.025);
}

/* ---- Studio shadow under product images ---- */
.card .media img {
  filter: drop-shadow(0 16px 22px rgba(0, 0, 0, 0.07))
          drop-shadow(0 3px 5px rgba(0, 0, 0, 0.04));
}

/* Card border · precision edge */
.card--card,
.card--standard {
  border: 1px solid #ebebeb;
  border-radius: 0;
  box-shadow: none;
  transition: border-color 0.35s ease;
}

.card-wrapper:hover .card--card,
.card-wrapper:hover .card--standard {
  border-color: #B57A48;
}


.card .media {
  margin-bottom: 0;
}

/* ---- Collection heading spacing ---- */
.featured-collection .title-wrapper,
.featured-collection .title-wrapper--self-padded {
  padding-bottom: 0;
  margin-bottom: 0.8rem;
}

.featured-collection h2.title {
  margin-bottom: 0.3rem;
}

.featured-collection .collection__description {
  margin-top: 0.2rem;
  margin-bottom: 0.8rem;
}

/* ---- LUMÉ bronze gradient divider ---- */
.lume-divider {
  width: 120px;
  height: 1px;
  margin: 2.8rem auto;
  background: linear-gradient(
    90deg,
    rgba(181, 122, 72, 0) 0%,
    rgba(181, 122, 72, 0.85) 50%,
    rgba(181, 122, 72, 0) 100%
  );
}

/* ---- Mobile ---- */
@media screen and (max-width: 749px) {
  .banner__heading,
  .rich-text__heading,
  .rich-text h2 {
    line-height: 1.1;
  }

  .banner__heading {
    font-size: 2.4rem !important;
  }

  #shopify-section-template--21809361551449__rich_text_xabDDy .rich-text__heading,
  #shopify-section-template--21809361551449__rich_text_xabDDy h2 {
    font-size: 2.1rem !important;
  }

  .grid.product-grid,
  ul.product-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    column-gap: 0.75rem !important;
    row-gap: 1.8rem !important;
  }

  .grid.product-grid > .grid__item,
  ul.product-grid > li {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
  }

  .card__heading {
    font-size: 0.82rem;
    letter-spacing: 0.03em;
  }

  .price {
    font-size: 0.85rem;
  }

  .product-card-signature {
    font-size: 0.65rem;
  }
}
/* ---- LUMÉ Contact form fields ---- */
.template-contact .field__input,
.template-contact .field__textarea,
.template-contact input[type="text"],
.template-contact input[type="email"],
.template-contact input[type="tel"],
.template-contact textarea {
  border: 1px solid #e0e0e0 !important;
  border-radius: 0 !important;
  background-color: #fafafa !important;
  font-family: 'Lora', Georgia, serif !important;
  font-size: 0.9rem !important;
  color: #1a1a1a !important;
  padding: 14px 16px !important;
}

.template-contact .field__input:focus,
.template-contact input:focus,
.template-contact textarea:focus {
  border-color: #B57A48 !important;
  outline: none !important;
  box-shadow: none !important;
}

.template-contact .field__label,
.template-contact label {
  font-family: 'Lora', serif !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #6a6a6a !important;
}

.template-contact textarea,
.template-contact .field__textarea {
  min-height: 180px !important;
  height: 180px !important;
  resize: vertical !important;
  line-height: 1.7 !important;
}

.template-contact button[type="submit"],
.template-contact .button {
  font-family: 'Lora', serif !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  background-color: #1a1a1a !important;
  color: #ffffff !important;
  border: 1px solid #1a1a1a !important;
  border-radius: 0 !important;
  padding: 15px 44px !important;
}

.template-contact button[type="submit"]:hover {
  background-color: #ffffff !important;
  color: #1a1a1a !important;
}
}

/* ---- LUMÉ Contact textarea height ---- */
textarea {
  min-height: 180px !important;
  height: 180px !important;
  resize: vertical !important;
}

/* ================================================
   LUMÉ AMANI. Cycle of Light Page
   Session 013 | May 7 2026
   Do not edit above this line
   ================================================ */

/* ---- Design tokens ---- */
.cycle-of-light-page {
  --lume-pearl: #F2E3D0;
  --lume-bronze-light: #B57A48;
  --lume-bronze-dark: #8C5934;
  --lume-ivory: #FAF5EF;
  --lume-charcoal: #2C2318;
  --lume-charcoal-mid: #4A3C2E;
  --lume-charcoal-light: #7A6A58;
  --lume-gold-line: #C49A5E;
}

/* ---- Hero ---- */
.cycle-hero {
  background: var(--lume-ivory);
  width: 100%;
  padding: 80px 20px 80px;
  position: relative;
  text-align: center;
}

.cycle-hero__top-rule {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #8C5934, #B57A48, #8C5934);
}

.cycle-hero__content {
  max-width: 800px;
  margin: 0 auto;
}

.cycle-eyebrow {
  font-family: var(--font-body-family);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lume-bronze-dark);
  text-align: center;
  margin-bottom: 32px;
}

.cycle-headline {
  font-family: var(--font-heading-family);
  font-size: 72px;
  font-weight: 400;
  line-height: 1.1;
  color: var(--lume-charcoal);
  text-align: center;
  margin-bottom: 16px;
}

.cycle-subtitle {
  font-family: var(--font-body-family);
  font-size: 16px;
  font-weight: 400;
  color: var(--lume-charcoal-mid);
  text-align: center;
  margin-bottom: 40px;
}

.cycle-short-rule {
  width: 80px;
  height: 1px;
  background: var(--lume-gold-line);
  margin: 0 auto 48px;
  border: none;
}

.cycle-section-header {
  font-family: var(--font-heading-family);
  font-style: italic;
  font-size: 24px;
  font-weight: 400;
  color: var(--lume-charcoal);
  text-align: center;
  margin-bottom: 32px;
}

.cycle-locked-lines {
  max-width: 560px;
  margin: 0 auto;
  background: var(--lume-pearl);
  padding: 32px 40px;
  border-left: 2px solid var(--lume-bronze-light);
  text-align: left;
}

.cycle-locked-lines p {
  font-family: var(--font-body-family);
  font-style: italic;
  font-size: 15px;
  line-height: 1.7;
  color: var(--lume-charcoal-mid);
  margin-bottom: 20px;
}

.cycle-locked-lines p:last-child {
  margin-bottom: 0;
}

.cycle-bridging {
  font-family: var(--font-body-family);
  font-size: 14px;
  line-height: 1.8;
  color: var(--lume-charcoal-mid);
  text-align: center;
  max-width: 560px;
  margin: 32px auto 0;
}

/* ---- Fragrance sections ---- */
.cycle-frag {
  background: var(--lume-ivory);
  padding: 80px 20px 40px;
  text-align: center;
}

.cycle-frag__time {
  font-family: var(--font-body-family);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lume-bronze-dark);
  margin-bottom: 16px;
}

.cycle-frag__name {
  font-family: var(--font-heading-family);
  font-size: 72px;
  font-weight: 400;
  line-height: 1.1;
  color: var(--lume-charcoal);
  margin-bottom: 24px;
}

.cycle-frag__body {
  max-width: 600px;
  margin: 0 auto;
}

.cycle-frag__body p {
  font-family: var(--font-body-family);
  font-size: 15px;
  line-height: 1.8;
  color: var(--lume-charcoal-mid);
  text-align: center;
  margin: 0 auto 16px;
}

.cycle-frag__body p:last-child {
  margin-bottom: 0;
}

.cycle-frag__tags {
  font-family: var(--font-body-family);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--lume-bronze-dark);
  text-align: center;
  margin-top: 24px;
  margin-bottom: 24px;
}

.cycle-frag__cta {
  font-family: var(--font-body-family);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lume-charcoal);
  text-decoration: none;
  border-bottom: 1px solid var(--lume-charcoal);
  padding-bottom: 2px;
  display: inline-block;
  margin-bottom: 80px;
}

.cycle-frag__cta:hover {
  color: var(--lume-bronze-dark);
  border-bottom-color: var(--lume-bronze-light);
}

.cycle-closing {
  text-align: center;
  padding: 60px 20px;
  background: var(--lume-ivory);
}

.cycle-closing__quote {
  font-family: var(--font-body-family);
  font-style: italic;
  font-size: 17px;
  line-height: 1.7;
  color: var(--lume-charcoal-mid);
  text-align: center;
  max-width: 520px;
  margin: 0 auto 32px;
}

.cycle-closing__cta {
  font-family: var(--font-body-family);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lume-charcoal);
  text-decoration: none;
  border-bottom: 1px solid var(--lume-charcoal);
  padding-bottom: 2px;
  display: inline-block;
}

.cycle-closing__cta:hover {
  color: var(--lume-bronze-dark);
  border-bottom-color: var(--lume-bronze-light);
}

/* ---- Product grid section ---- */
.cycle-grid-section {
  background: var(--lume-ivory);
  padding: 80px 20px;
}

.cycle-grid-heading {
  font-family: var(--font-heading-family);
  font-size: 56px;
  font-weight: 400;
  color: var(--lume-charcoal);
  text-align: center;
  margin-bottom: 40px;
  letter-spacing: 0.12em;
}

.cycle-product-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

.cycle-card {
  display: flex;
  flex-direction: column;
  border: 0.5px solid rgba(196, 154, 94, 0.35);
  background: #FDFAF6;
  text-decoration: none;
  transition: border-color 0.3s ease;
}

.cycle-card:hover {
  border-color: rgba(196, 154, 94, 0.7);
}

.lume-card-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  background: var(--lume-pearl);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.lume-card-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cycle-card__photo-label {
  font-family: var(--font-body-family);
  font-size: 11px;
  color: var(--lume-bronze-dark);
  opacity: 0.6;
  letter-spacing: 0.08em;
}

.cycle-card__name {
  font-family: var(--font-heading-family);
  font-size: 14px;
  font-weight: 400;
  color: var(--lume-charcoal);
  text-align: center;
  padding: 16px 12px 0;
  min-height: 2.6em;
  line-height: 1.3;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin: 0;
}

.cycle-card__tags {
  font-family: var(--font-body-family);
  font-style: italic;
  font-size: 12px;
  color: var(--lume-bronze-dark);
  text-align: center;
  padding: 8px 12px 0;
  margin: 0;
}

.cycle-card__price {
  font-family: var(--font-body-family);
  font-size: 13px;
  color: var(--lume-charcoal);
  text-align: center;
  padding: 12px 12px 16px;
  margin-top: auto;
}

/* ---- Mobile responsive ---- */
@media screen and (max-width: 749px) {
  .cycle-headline,
  .cycle-frag__name {
    font-size: 48px;
  }

  .cycle-grid-heading {
    font-size: 36px;
  }

  .cycle-locked-lines {
    padding: 24px 20px;
  }

  .cycle-product-grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 0 16px;
    gap: 12px;
  }

  .cycle-grid-section {
    padding: 60px 16px;
  }

  .cycle-frag__name {
    font-size: 40px;
  }
}

/* ================================================
   LUMÉ AMANI. The Complete Cycle Page
   Session 014 | May 8 2026
   Do not edit above this line
   ================================================ */

/* --- Design tokens --- */
.complete-cycle-page {
  --lume-pearl: #F2E3D0;
  --lume-bronze-light: #B57A48;
  --lume-bronze-dark: #8C5934;
  --lume-ivory: #FAF5EF;
  --lume-charcoal: #2C2318;
  --lume-charcoal-mid: #4A3C2E;
  --lume-charcoal-light: #7A6A58;
  --lume-gold-line: #C49A5E;
  background: var(--lume-ivory);
  display: block;
}

/* --- Hero --- */
.cc-hero {
  position: relative;
  padding: 144px 0 72px;
  background: var(--lume-ivory);
}

.cc-hero__gradient-rule {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #8C5934, #B57A48, #8C5934);
}

.cc-hero__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 64px;
  text-align: center;
}

.cc-eyebrow {
  font-family: 'Lora', serif;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lume-bronze-dark);
  margin: 0 0 40px;
}

.cc-headline {
  font-family: 'Playfair Display', serif;
  font-size: 84px;
  font-weight: 400;
  line-height: 1.04;
  text-align: center;
  color: var(--lume-charcoal);
  margin: 0;
}

.cc-short-rule {
  width: 80px;
  height: 1px;
  background: var(--lume-gold-line);
  margin: 36px auto 28px;
  border: none;
}

.cc-subtitle {
  font-family: 'Lora', serif;
  font-size: 16px;
  text-align: center;
  color: var(--lume-charcoal-mid);
  margin: 0;
}

.cc-arc-block {
  margin-top: 52px;
  text-align: center;
}

.cc-arc-times {
  font-family: 'Lora', serif;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lume-charcoal-light);
  margin: 0 0 10px;
}

.cc-arc-names {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 13px;
  color: var(--lume-bronze-dark);
  margin: 0;
}

/* --- Philosophy --- */
.cc-philosophy {
  background: var(--lume-ivory);
  padding: 72px 0 80px;
  text-align: center;
}

.cc-philosophy__header {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 24px;
  font-weight: 400;
  color: var(--lume-charcoal);
  margin: 0 0 28px;
}

.cc-philosophy__body {
  font-family: 'Lora', serif;
  font-size: 14px;
  line-height: 1.8;
  color: var(--lume-charcoal-mid);
  max-width: 560px;
  margin: 0 auto;
}

/* --- Copy block --- */
.cc-copy-block {
  background: var(--lume-ivory);
  padding: 72px 0 80px;
}

.cc-copy-block__inner {
  max-width: 560px;
  margin: 0 auto;
  background: #F2E3D0;
  padding: 32px 40px;
  border-left: 2px solid var(--lume-bronze-light);
}

.cc-copy-block__para {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 15px;
  line-height: 1.7;
  color: var(--lume-charcoal-mid);
  margin: 0;
}

.cc-copy-block__para + .cc-copy-block__para {
  margin-top: 20px;
}

/* --- Grid sections --- */
.cc-grid-section {
  background: var(--lume-ivory);
  padding: 72px 0 96px;
}

.cc-grid-heading {
  font-family: 'Playfair Display', serif;
  font-size: 38px;
  font-weight: 400;
  text-align: center;
  color: var(--lume-charcoal);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 14px;
}

.cc-grid-subheading {
  font-family: 'Lora', serif;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  color: var(--lume-charcoal-light);
  margin: 0 0 56px;
}

.cc-product-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 64px;
}

/* --- Product cards --- */
.cc-card {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(196, 154, 94, 0.28);
  border-radius: 2px;
  padding: 16px 16px 28px;
  text-decoration: none;
  color: inherit;
  background: var(--lume-ivory);
}

.cc-card .lume-card-photo {
  aspect-ratio: 4 / 5;
  background: var(--lume-pearl);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  overflow: hidden;
  position: relative;
}

.cc-card .lume-card-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lume-card-photo__label {
  font-family: 'Lora', serif;
  font-size: 11px;
  color: var(--lume-bronze-dark);
}

.cc-card__name {
  font-family: 'Playfair Display', serif;
  font-size: 13px;
  font-weight: 400;
  text-align: center;
  color: var(--lume-charcoal);
  min-height: calc(13px * 1.35 * 2);
  margin: 0 0 8px;
}

.cc-card__tags {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 11px;
  color: var(--lume-bronze-dark);
  text-align: center;
  margin: 0 0 14px;
}

.cc-card__price {
  font-family: 'Lora', serif;
  font-size: 12px;
  color: var(--lume-charcoal);
  text-align: center;
  margin-top: auto;
}

/* --- Closing --- */
.cc-closing {
  background: var(--lume-ivory);
  padding: 32px 0 144px;
  text-align: center;
}

.cc-closing__rule {
  height: 1px;
  background: var(--lume-gold-line);
  opacity: 0.30;
  margin: 0 0 96px;
  border: none;
}

.cc-closing__statement {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 17px;
  line-height: 1.7;
  color: var(--lume-charcoal-mid);
  text-align: center;
  max-width: 520px;
  margin: 0 auto 32px;
}

.cc-closing__cta {
  font-family: 'Lora', serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lume-charcoal);
  text-decoration: none;
  border-bottom: 1px solid var(--lume-charcoal);
  padding-bottom: 2px;
  display: inline-block;
}

.cc-closing__cta:hover {
  color: var(--lume-bronze-dark);
  border-bottom-color: var(--lume-bronze-light);
}

/* --- Complete Cycle mobile responsive --- */
@media screen and (max-width: 749px) {
  .cc-headline {
    font-size: 48px;
  }

  .cc-hero__inner {
    padding: 0 24px;
  }

  .cc-product-grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 0 16px;
    gap: 12px;
  }

  .cc-grid-section {
    padding: 60px 0 72px;
  }

  .cc-copy-block__inner {
    margin: 0 20px;
    padding: 24px 24px;
  }
}

/* ============================================================
   LUMÉ AMANI · base.css SESSION 015 BLOCK
   Landing Page Redesign. Sections A through H
   Date: May 8 2026
   Append after Session 014 block.
   ============================================================ */

/* ---------- Section 015 tokens (scoped via :where so they
   never collide with theme :root or earlier sessions) ------- */
:where(.lume-section-announcement,
       .lume-section-philosophy-home,
       .lume-section-craft,
       .lume-section-collection-grid-home,
       .lume-section-philosophy-dark,
       .lume-section-social-proof,
       .lume-section-origin,
       .lume-section-newsletter-home,
       .lume-diamond) {
  --lume-bg-primary:    #FAF5EF;
  --lume-bg-secondary:  #F2E3D0;
  --lume-bg-dark:       #1a1510;
  --lume-text:          #1a1510;
  --lume-text-on-dark:  #f4f1ec;
  --lume-text-body:     #3a3028;
  --lume-bronze:        #B57A48;
  --lume-bronze-deep:   #8C5934;
  --lume-gold-light:    #c9a84c;

  --lume-font-heading:  "Playfair Display", Georgia, serif;
  --lume-font-body:     "Lora", Georgia, serif;

  --lume-page-max:      1200px;
  --lume-content-max:   640px;

  --lume-pad-y-d:       96px;
  --lume-pad-y-m:       64px;
  --lume-pad-x:         24px;

  font-family: var(--lume-font-body);
  color: var(--lume-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Shared primitives ------------------------------- */
.lume-gold-rule {
  width: 40px;
  height: 1px;
  background: var(--lume-bronze);
  border: 0;
  margin: 0 auto 24px;
  display: block;
}
.lume-gold-rule--gold { background: var(--lume-gold-light); }
.lume-gold-rule--left { margin-left: 0; }

.lume-diamond {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 40px 0;
  background: var(--lume-bg-primary);
}
.lume-diamond svg { display: block; flex-shrink: 0; }
.lume-diamond--dark { background: var(--lume-bg-dark); }

.lume-text-link {
  font-family: var(--lume-font-body);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--lume-bronze-deep);
  text-decoration: none;
  border: 0;
  background: transparent;
  padding-bottom: 2px;
  transition: color 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.lume-text-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.lume-text-link--gold { color: #8C5934; }

/* ============================================================
   A · ANNOUNCEMENT BAR
   ============================================================ */
.lume-announcement {
  background: #1a1510;
  color: #f4f1ec;
  font-family: "Lora", Georgia, serif;
  font-size: 13px;
  letter-spacing: 0.12em;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px;
  position: relative;
  overflow: hidden;
}
.lume-announcement__track {
  position: relative;
  width: 100%;
  height: 100%;
}
.lume-announcement__msg {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  padding: 0 8px;
  line-height: 1.3;
}
.lume-announcement__msg.is-active {
  opacity: 1;
  pointer-events: auto;
}
@media (max-width: 749px) {
  .lume-announcement { height: 44px; font-size: 12px; letter-spacing: 0.1em; }
}
@media (prefers-reduced-motion: reduce) {
  .lume-announcement__msg { transition: none; }
}

/* ============================================================
   B · PHILOSOPHY HOME
   ============================================================ */
.lume-philosophy-home {
  background: var(--lume-bg-primary);
  padding: 96px 24px;
}
.lume-philosophy-home__inner {
  max-width: var(--lume-page-max);
  margin: 0 auto;
  text-align: center;
}
.lume-philosophy-home__heading {
  font-family: var(--lume-font-heading);
  font-weight: 500;
  font-size: clamp(29px, 3vw, 38px);
  color: var(--lume-text);
  margin: 0 0 32px;
  line-height: 1.2;
}
.lume-philosophy-home__body {
  max-width: 580px;
  margin: 0 auto;
}
.lume-philosophy-home__body p {
  font-family: var(--lume-font-body);
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.8;
  color: var(--lume-text-body);
  margin: 0 0 20px;
  text-wrap: pretty;
}
.lume-philosophy-home__body p:last-child { margin-bottom: 0; }
@media (max-width: 749px) {
  .lume-philosophy-home { padding: 64px 24px; }
}

/* ============================================================
   C · CRAFT STATEMENT
   ============================================================ */
.lume-craft {
  background: var(--lume-bg-secondary);
  padding: 96px 24px;
}
.lume-craft__inner {
  max-width: var(--lume-page-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}
@media (min-width: 750px) {
  .lume-craft__inner {
    grid-template-columns: minmax(260px, 1fr) 1.4fr;
    gap: 64px;
  }
}
.lume-craft__quote-col { max-width: 320px; }
.lume-craft__quote {
  font-family: var(--lume-font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(26px, 2.5vw, 35px);
  color: var(--lume-bronze-deep);
  line-height: 1.2;
  margin: 0;
  text-wrap: balance;
}
.lume-craft__body p {
  font-family: var(--lume-font-body);
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.8;
  color: var(--lume-text-body);
  margin: 0 0 18px;
  text-wrap: pretty;
}
.lume-craft__body p:last-child { margin-bottom: 0; }
@media (max-width: 749px) {
  .lume-craft { padding: 64px 24px; }
  /* Correction 1: centre gold rule on mobile */
  .lume-craft .lume-gold-rule--left { margin-left: auto; }
}

/* ============================================================
   D · COLLECTION GRID (HOME)
   Re-uses cc-card / lume-card-photo classes from Complete Cycle
   ============================================================ */
/* Correction 4: scoped to homepage */
.lume-section-collection-grid-home .cc-grid-section {
  background: var(--lume-bg-primary);
  padding: 96px 24px;
}
.cc-grid-section__inner {
  max-width: var(--lume-page-max);
  margin: 0 auto;
  text-align: center;
}
.cc-grid-heading {
  font-family: var(--lume-font-heading);
  font-weight: 400;
  font-size: clamp(29px, 3vw, 38px);
  color: var(--lume-text);
  margin: 0 0 12px;
  line-height: 1.15;
}
.cc-grid-heading--home {
  /* Homepage variant: sentence case, not all-caps */
  /* Correction 3: restore natural serif tracking */
  text-transform: none;
  letter-spacing: 0.01em;
}
.cc-grid-subheading {
  font-family: var(--lume-font-body);
  font-style: italic;
  font-size: clamp(15px, 1.5vw, 17px);
  color: var(--lume-text-body);
  margin: 0 auto 48px;
  max-width: 560px;
  text-wrap: pretty;
}

.cc-product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: stretch;
}
@media (min-width: 550px) {
  .cc-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .cc-product-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
}

.cc-card {
  background: var(--lume-bg-primary);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  padding: 12px 12px 24px;
  border-radius: 0;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.cc-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 20px rgba(26, 21, 16, 0.10);
}
.lume-card-photo {
  background: #E8E0D5;
  /* S037e: min-height 280px removed. It beat aspect-ratio and forced 0.602
     instead of 4:5 on every card. aspect-ratio cannot collapse, so no floor
     is needed. */
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  overflow: hidden;
  position: relative;
}
.lume-card-photo > img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.lume-card-photo__label {
  font-family: var(--lume-font-body);
  font-variant-caps: small-caps;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--lume-bronze-deep);
}
.cc-card__name {
  font-family: var(--lume-font-heading);
  font-weight: 400;
  font-size: 16px;
  color: var(--lume-text);
  margin: 0 0 8px;
  text-align: center;
  line-height: 1.3;
}
.cc-card__sep { color: #8C5934; margin: 0 0.25em; }
.cc-card__tags {
  font-family: var(--lume-font-body);
  font-style: italic;
  font-size: 14px;
  color: var(--lume-bronze-deep);
  margin: 0 0 14px;
  text-align: center;
}
.cc-card__price {
  font-family: var(--lume-font-body);
  font-weight: 400;
  font-size: 14px;
  color: var(--lume-bronze-deep);
  margin: 0;
  text-align: center;
  margin-top: auto;
}
.cc-grid-cta {
  margin: 48px 0 0;
  text-align: center;
}
@media (max-width: 749px) {
  .lume-section-collection-grid-home .cc-grid-section { padding: 64px 24px; }
}

/* ============================================================
   E · PHILOSOPHY DARK
   ============================================================ */
.lume-philosophy-dark {
  background: var(--lume-bg-dark);
  padding: 96px 24px;
}
.lume-philosophy-dark__inner {
  max-width: var(--lume-content-max);
  margin: 0 auto;
  text-align: center;
}
.lume-philosophy-dark__line {
  font-family: var(--lume-font-body);
  font-style: italic;
  font-size: clamp(17px, 1.8vw, 21px);
  line-height: 2;
  color: var(--lume-text-on-dark);
  max-width: 640px;
  margin: 0 auto 28px;
  text-wrap: pretty;
}
.lume-philosophy-dark__line:last-of-type { margin-bottom: 40px; }
.lume-philosophy-dark__cta-wrap {
  margin: 0;
}
@media (max-width: 749px) {
  .lume-philosophy-dark { padding: 72px 24px; }
}

/* ============================================================
   F · SOCIAL PROOF
   ============================================================ */
.lume-social-proof {
  background: var(--lume-bg-primary);
  padding: 96px 24px;
}
.lume-social-proof__inner {
  max-width: var(--lume-page-max);
  margin: 0 auto;
  text-align: center;
}
.lume-social-proof__heading {
  font-family: var(--lume-font-heading);
  font-weight: 400;
  font-size: clamp(22px, 2.5vw, 30px);
  color: var(--lume-text);
  margin: 0 0 56px;
  line-height: 1.2;
}
.lume-social-proof__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  text-align: left;
  max-width: 920px;
  margin: 0 auto;
}
@media (min-width: 750px) {
  .lume-social-proof__grid {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
  }
}
.lume-field-note {
  margin: 0;
  padding: 0;
}
@media (max-width: 749px) {
  .lume-field-note + .lume-field-note {
    border-top: 1px solid rgba(181, 122, 72, 0.25);
    padding-top: 32px;
  }
}
.lume-field-note__quote {
  font-family: var(--lume-font-body);
  font-style: italic;
  font-size: clamp(15px, 1.5vw, 18px);
  color: var(--lume-text);
  margin: 0;
  line-height: 1.6;
  text-wrap: pretty;
}
.lume-field-note__attr {
  font-family: var(--lume-font-body);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--lume-bronze-deep);
  margin-top: 12px;
}
.lume-social-proof__signal {
  font-family: var(--lume-font-body);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--lume-bronze-deep);
  text-align: center;
  margin: 56px 0 0;
}
@media (max-width: 749px) {
  .lume-social-proof { padding: 64px 24px; }
}

/* ============================================================
   G · ORIGIN
   ============================================================ */
.lume-origin {
  background: var(--lume-bg-secondary);
  padding: 96px 24px;
}
.lume-origin__inner {
  max-width: var(--lume-page-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
@media (min-width: 750px) {
  .lume-origin__inner {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
  }
}
.lume-origin__copy { max-width: 480px; }
.lume-origin__heading {
  font-family: var(--lume-font-heading);
  font-weight: 500;
  font-size: clamp(22px, 2.5vw, 30px);
  color: var(--lume-text);
  margin: 0 0 24px;
  line-height: 1.2;
}
.lume-origin__body p {
  font-family: var(--lume-font-body);
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.8;
  color: var(--lume-text-body);
  margin: 0 0 18px;
  text-wrap: pretty;
}
.lume-origin__body p:last-child { margin-bottom: 0; }
.lume-card-photo--origin {
  background: #D4C8B8;
  /* S037e: min-height 320px removed for the same reason, so the 4:3 holds. */
  aspect-ratio: 4 / 3;
  margin-bottom: 0;
}
@media (max-width: 749px) {
  .lume-origin { padding: 64px 24px; }
}

/* ============================================================
   H · NEWSLETTER (HOME)
   ============================================================ */
.lume-newsletter {
  background: var(--lume-bg-dark);
  padding: 96px 24px;
}
.lume-newsletter__inner {
  max-width: var(--lume-content-max);
  margin: 0 auto;
  text-align: center;
}
.lume-newsletter__heading {
  font-family: var(--lume-font-heading);
  font-weight: 400;
  font-size: clamp(29px, 3vw, 38px);
  color: var(--lume-text-on-dark);
  margin: 0 0 16px;
  line-height: 1.2;
}
.lume-newsletter__body {
  font-family: var(--lume-font-body);
  font-size: clamp(14px, 1.5vw, 16px);
  color: rgba(244, 241, 236, 0.72);
  margin: 0 0 32px;
  line-height: 1.6;
}
.lume-newsletter__form { margin: 0 auto; max-width: 520px; }
.lume-newsletter__label {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  border: 0; clip: rect(0 0 0 0);
  overflow: hidden;
}
.lume-newsletter__row {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (min-width: 550px) {
  .lume-newsletter__row {
    flex-direction: row;
    gap: 0;
    justify-content: center;
  }
}
.lume-newsletter__input {
  font-family: var(--lume-font-body);
  font-size: 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(244, 241, 236, 0.3);
  color: var(--lume-text-on-dark);
  padding: 14px 20px;
  border-radius: 0;
  width: 100%;
  max-width: 400px;
  min-height: 44px;
  outline: none;
  transition: border-color 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.lume-newsletter__input::placeholder {
  font-family: var(--lume-font-body);
  color: rgba(244, 241, 236, 0.45);
}
.lume-newsletter__input:focus {
  border-color: var(--lume-gold-light);
}
.lume-newsletter__submit {
  font-family: var(--lume-font-body);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  background: var(--lume-bronze);
  color: var(--lume-text-on-dark);
  border: 0;
  padding: 14px 28px;
  border-radius: 0;
  min-height: 44px;
  cursor: pointer;
  transition: background-color 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.lume-newsletter__submit:hover { background: var(--lume-bronze-deep); }
.lume-newsletter__feedback {
  font-family: var(--lume-font-body);
  font-size: 14px;
  margin: 16px 0 0;
  color: rgba(244, 241, 236, 0.85);
}
.lume-newsletter__feedback--err { color: #e8a48a; }
@media (max-width: 749px) {
  .lume-newsletter { padding: 72px 24px; }
}

/* ============================================================
   END SESSION 015 BLOCK
   ============================================================ */

/* ============================================================
   LUMÉ AMANI. ANNOUNCEMENT BAR OVERRIDE (Dawn native)
   Applied globally via base.css · all pages
   Session 015 Fix | May 8 2026
   Targets Dawn native .announcement-bar classes
   ============================================================ */

/* Hide Dawn's default announcement bar styling entirely */
.announcement-bar {
  background: #1a1510 !important;
  color: #f4f1ec !important;
  min-height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 24px !important;
  position: relative !important;
  overflow: hidden !important;
}

.announcement-bar__message,
.announcement-bar p,
.announcement-bar span,
.announcement-bar a {
  font-family: "Lora", Georgia, serif !important;
  font-size: 13px !important;
  letter-spacing: 0.12em !important;
  color: #f4f1ec !important;
  text-decoration: none !important;
  line-height: 1.3 !important;
}

@media screen and (max-width: 749px) {
  .announcement-bar {
    min-height: 44px !important;
    font-size: 12px !important;
    letter-spacing: 0.1em !important;
  }
}

/* ============================================================
   END ANNOUNCEMENT BAR OVERRIDE
   ============================================================ */

/* ============================================================
   LUMÉ AMANI. FOOTER NEWSLETTER OVERRIDE (Dawn native)
   Applied globally via base.css · all pages
   Session 015 Fix | May 8 2026
   Targets Dawn native footer newsletter classes
   ============================================================ */

/* Footer base */
.footer {
  background: #1a1510 !important;
  color: #f4f1ec !important;
  margin-top: 0 !important;
}

/* Footer newsletter heading */
.footer__newsletter .footer-block__heading,
.footer .footer-block__heading {
  font-family: "Playfair Display", Georgia, serif !important;
  font-weight: 400 !important;
  font-size: 29px !important;
  color: #f4f1ec !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
  text-align: center !important;
}

/* Footer newsletter subtext / paragraph */
.footer__newsletter p,
.footer .newsletter-form__subtext {
  font-family: "Lora", Georgia, serif !important;
  font-size: 14px !important;
  color: rgba(244, 241, 236, 0.72) !important;
  text-align: center !important;
  margin-bottom: 24px !important;
}

/* Email input */
.footer .field__input,
.footer .newsletter-form__field-wrapper input {
  font-family: "Lora", Georgia, serif !important;
  font-size: 14px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(244, 241, 236, 0.3) !important;
  color: #f4f1ec !important;
  border-radius: 0 !important;
}

.footer .field__input::placeholder {
  font-family: "Lora", Georgia, serif !important;
  color: rgba(244, 241, 236, 0.45) !important;
}

.footer .field__input:focus {
  border-color: #c9a84c !important;
  outline: none !important;
}

/* Submit button */
.footer .newsletter-form__button,
.footer button[type="submit"] {
  font-family: "Lora", Georgia, serif !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  background: #B57A48 !important;
  color: #f4f1ec !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 14px 28px !important;
  cursor: pointer !important;
  transition: background-color 320ms ease !important;
}

.footer .newsletter-form__button:hover,
.footer button[type="submit"]:hover {
  background: #8C5934 !important;
}

/* Footer links and text */
.footer a,
.footer .footer__content-bottom-link {
  color: rgba(244, 241, 236, 0.65) !important;
  font-family: "Lora", Georgia, serif !important;
  font-size: 12px !important;
}

.footer a:hover {
  color: #f4f1ec !important;
}

/* Footer legal / bottom bar */
.footer__content-bottom {
  border-top: 1px solid rgba(244, 241, 236, 0.12) !important;
  color: rgba(244, 241, 236, 0.5) !important;
}

.footer__content-bottom p,
.footer__content-bottom span {
  font-family: "Lora", Georgia, serif !important;
  font-size: 11px !important;
  color: rgba(244, 241, 236, 0.5) !important;
}

/* Payment icons · show on dark bg */
.footer .payment-icons .icon {
  filter: brightness(0) invert(1) opacity(0.5) !important;
}

/* Newsletter form centering · override Dawn flex-split layout */

/* Force the top content area to stack vertically and center everything */
.footer__content-top {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 0 !important;
}

/* Constrain and center the newsletter block */
.footer-block--newsletter {
  width: 100% !important;
  max-width: 480px !important;
  margin: 0 auto !important;
}

/* Center the form field wrapper */
.footer__newsletter .newsletter-form__field-wrapper,
.newsletter-form__field-wrapper {
  justify-content: center !important;
  display: flex !important;
  width: 100% !important;
}

/* Keep input + button side by side at all viewports · no stacking */
.footer .field {
  display: flex !important;
  flex-direction: row !important;
  width: 100% !important;
  max-width: 480px !important;
}

.footer .field__input {
  flex: 1 !important;
  min-width: 0 !important;
}

/* End newsletter form centering */

/* ============================================================
   END FOOTER OVERRIDE
   ============================================================ */

/* ============================================================
   LUMÉ AMANI. GRID SUBHEADING TEXT-TRANSFORM FIX
   Session 015 Fix | May 8 2026
   Prevents cascade uppercase from Complete Cycle page
   ============================================================ */

.lume-section-collection-grid-home .cc-grid-subheading {
  text-transform: none !important;
  font-style: italic !important;
}

/* ============================================================
   END GRID SUBHEADING FIX
   ============================================================ */

/* ============================================================
   LUMÉ AMANI · base.css SESSION 015 BLOCK
   Section: lume-hero-slideshow
   Date: May 8 2026
   Append this block to the end of assets/base.css
   ============================================================ */

/* --- Container --- */
.lume-hero-slideshow {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #1a1510;

  /* Match the large banner height from the existing image_banner */
  min-height: 56vw;
  max-height: 100vh;

  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (min-width: 750px) {
  .lume-hero-slideshow {
    min-height: 520px;
  }
}

/* --- Track & Slides --- */
.lume-hero-slideshow__track {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.lume-hero-slideshow__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
  pointer-events: none;
}

.lume-hero-slideshow__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* Static fallback: always visible */
.lume-hero-slideshow--static .lume-hero-slideshow__slide {
  opacity: 1;
}

.lume-hero-slideshow__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* --- Overlay --- */
/* S037e. The type selector is load bearing, do not simplify it back to the
   class alone. This element is an empty div, so it matches the stock Dawn rule
   at the top of this file, "a:empty, ul:empty, div:empty, ..." which sets
   display none at specificity 0-1-1. A bare class is 0-1-0 and loses, which is
   why this scrim has never rendered since S015 and why the hero text has been
   sitting on the raw photograph the whole time. Prefixing the type raises this
   rule to 0-1-1 and it wins on document order, with no !important added. */
div.lume-hero-slideshow__overlay {
  display: block;
  position: absolute;
  inset: 0;
  /* Transparent at the top and bottom, so the photograph outside the text is
     exactly as it renders today, and 0.58 across the text band, which is what
     the measurements require for the subheading to clear 4.5 to 1 against the
     brightest five per cent of its background, with margin. 0.53 was the bare
     minimum and left slide 1 at 375 sitting on 4.50, which is too thin to
     ship. */
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 18%,
    rgba(0, 0, 0, 0.58) 34%,
    rgba(0, 0, 0, 0.58) 66%,
    rgba(0, 0, 0, 0) 82%,
    rgba(0, 0, 0, 0) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* The text block occupies most of the hero at narrow widths, so the band has to
   widen or it stops covering the subheading. Same 0.58 anchor value. */
@media screen and (max-width: 749px) {
  div.lume-hero-slideshow__overlay {
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.58) 14%,
      rgba(0, 0, 0, 0.58) 86%,
      rgba(0, 0, 0, 0) 100%
    );
  }
}

/* --- Content --- */
.lume-hero-slideshow__content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 40px 20px;
  width: 100%;
}

.lume-hero-slideshow__box {
  display: inline-block;
  max-width: 760px;
}

.lume-hero-slideshow__heading {
  font-family: "Playfair Display", Georgia, serif;
  /* S037e. The root is 10px, because Dawn sets font-size 62.5% on html. These
     rem values were authored against an assumed 16px root, so they resolved to
     62.5 per cent of intent: 50px at 1920 where 80px was specified. Rewritten
     against the real root. The 8rem ceiling restores the specified 80px at
     1920. The floor is 3.2rem rather than the author's 4.48rem equivalent,
     because 44.8px filled a 246px hero at 375, wrapped the heading to two
     lines and left the photograph behind the scrim. 32px is well clear of the
     readable floor. */
  font-size: clamp(3.2rem, 6vw, 8rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.1;
  color: #f4f1ec;
  margin: 0 0 16px;
}

/* S037e. Option C. One subheading shows per breakpoint. display none rather
   than visibility or opacity, so the hidden line stays out of the accessibility
   tree and is never announced twice. The seam is 750px, the same width the
   container geometry already changes at. */
.lume-hero-slideshow__subheading--narrow {
  display: none;
}

@media screen and (max-width: 749px) {
  .lume-hero-slideshow__subheading--wide {
    display: none;
  }

  .lume-hero-slideshow__subheading--narrow {
    display: block;
  }
}

.lume-hero-slideshow__subheading {
  font-family: "Lora", Georgia, serif;
  /* S037e. Same 10px root correction as the heading. Was resolving to 12px at
     1920 and 10px at 375, below the readable floor. clamp(1.6rem, 2vw, 1.92rem)
     is 16px to 19.2px, which is what the author specified. Note this stays
     below the WCAG large text threshold of 24px at normal weight, so it needs
     4.5 to 1 contrast, not 3 to 1. */
  font-size: clamp(1.6rem, 2vw, 1.92rem);
  letter-spacing: 0.1em;
  line-height: 1.6;
  color: rgba(244, 241, 236, 0.88);
  margin: 0;
}

/* --- Navigation Dots --- */
.lume-hero-slideshow__dots {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 10px;
  align-items: center;
}

.lume-hero-slideshow__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(244, 241, 236, 0.4);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.3s ease, transform 0.3s ease;
  -webkit-appearance: none;
  appearance: none;
}

.lume-hero-slideshow__dot.is-active {
  background: #c9a84c;
  transform: scale(1.35);
}

.lume-hero-slideshow__dot:hover {
  background: rgba(244, 241, 236, 0.75);
}

@media screen and (max-width: 749px) {
  .lume-hero-slideshow__dots {
    bottom: 16px;
  }

  .lume-hero-slideshow__dot {
    width: 7px;
    height: 7px;
  }
}

/* ============================================================
   END SESSION 015 BLOCK
   ============================================================ */

/* ============================================================
   LUMÉ AMANI. HERO SLIDESHOW BACKGROUND FIX
   Session 015 Final Fix | May 8 2026
   Replaces dark #1a1510 fallback with Pearl Beige when no image loaded
   ============================================================ */

/* Override the dark default background · show Pearl Beige when no image */
#lume-hero-slideshow {
  background: #F2E3D0;
}

/* When slide count is 0 (no images loaded), suppress the dark overlay
   so the heading reads clearly on the Pearl Beige background */
.lume-hero-slideshow[data-slide-count="0"] .lume-hero-slideshow__overlay {
  opacity: 0 !important;
}

/* Heading and subheading should read as dark text on Pearl Beige */
.lume-hero-slideshow[data-slide-count="0"] .lume-hero-slideshow__heading {
  color: #1a1510;
}

.lume-hero-slideshow[data-slide-count="0"] .lume-hero-slideshow__subheading {
  color: rgba(26, 21, 16, 0.72);
}

/* When real images ARE loaded (data-slide-count > 0), restore white text
 · the overlay handles legibility against the image */
.lume-hero-slideshow:not([data-slide-count="0"]) .lume-hero-slideshow__heading {
  color: #f4f1ec;
}

.lume-hero-slideshow:not([data-slide-count="0"]) .lume-hero-slideshow__subheading {
  /* S037e. Was rgba(244, 241, 236, 0.88). The 0.88 alpha cost measurable
     contrast against a photograph and bought nothing visually, since the text
     sits on its own gradient. Opaque, which lowers the scrim the subheading
     needs from 0.58 to 0.53. */
  color: #f4f1ec;
}

/* ============================================================
   END HERO SLIDESHOW BACKGROUND FIX
   ============================================================ */

/* ============================================================
   LUMÉ AMANI. ANNOUNCEMENT BAR FULL WIDTH FIX
   Session 015 Final Fix | May 8 2026
   Removes page-width constraint from Shopify section wrapper
   ============================================================ */

#shopify-section-lume-announcement-bar {
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
}

#shopify-section-lume-announcement-bar .lume-announcement {
  width: 100%;
  max-width: 100%;
  padding-left: 24px;
  padding-right: 24px;
}

/* When rendered globally via theme.liquid (section group wrapper may differ) */
.shopify-section-group-header-group #shopify-section-lume-announcement-bar,
[id*="lume-announcement-bar"] {
  width: 100% !important;
  max-width: 100% !important;
}

/* ============================================================
   END ANNOUNCEMENT BAR FULL WIDTH FIX
   ============================================================ */

/* ============================================================
   LUMÉ AMANI. FOOTER NEWSLETTER BODY TEXT
   Session 015 Final Fix | May 8 2026
   Styles the injected paragraph in sections/footer.liquid
   ============================================================ */

.lume-footer-body {
  font-family: "Lora", Georgia, serif;
  font-size: 14px;
  color: rgba(244, 241, 236, 0.72);
  text-align: center;
  margin: 0 auto 24px;
  max-width: 600px;
  line-height: 1.6;
  letter-spacing: 0.04em;
}

/* ============================================================
   END FOOTER NEWSLETTER BODY TEXT
   ============================================================ */

/* ============================================================
   LUMÉ AMANI · base.css SESSION 015 MICRO FIX
   Card placeholder height + grid subheading size
   May 8 2026
   ============================================================ */

/* Correction 1 was: min-height 280px !important on the card photo, added at
   S015 so the empty placeholder would not collapse, because Dawn's 62.5% root
   font size compressed the rem based min-height.

   Removed at S037e. The card now carries a real product image and the
   container carries aspect-ratio 4 / 5, which derives height from width and so
   cannot collapse. The floor is no longer needed and had become harmful: at
   375 the card computed 168.7 by 280, a ratio of 0.60, because the important
   flag beat the later aspect-ratio and over cropped every card. If an image
   ever fails to resolve, aspect-ratio still holds the box open, so the
   original S015 problem cannot return. */

/* Correction 2: restore grid subheading to legible size.
   Same Dawn rem scaling issue. Explicit px value. */
.lume-section-collection-grid-home .cc-grid-subheading {
  font-size: 15px !important;
}

/* ============================================================
   END SESSION 015 MICRO FIX
   ============================================================ */

/* ============================================================
   LUMÉ AMANI · base.css SESSION 015 ABOUT BLOCK · BEGIN
   File: assets/base.css (append after Session 015 landing block)
   Date: May 9 2026
   Scope: .lume-section-about · About page only
   All font-size values use px or clamp(px, vw, px). No rem units.
   ============================================================ */

:where(.lume-section-about) {
  --lume-bg-primary:    #FAF5EF;
  --lume-bg-secondary:  #F2E3D0;
  --lume-text:          #1a1510;
  --lume-text-body:     #3a3028;
  --lume-bronze:        #B57A48;
  --lume-bronze-deep:   #8C5934;
  --lume-gold-light:    #c9a84c;
  --lume-divider:       #e8e2d8;

  --lume-font-heading:  "Playfair Display", Georgia, serif;
  --lume-font-body:     "Lora", Georgia, serif;

  --lume-content-max:   640px;
  --lume-page-max:      780px;

  background: var(--lume-bg-primary);
  font-family: var(--lume-font-body);
  color: var(--lume-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Block scaffolding ----------------------------- */
.lume-about { display: block; background: var(--lume-bg-primary); }

.lume-about__block {
  padding: 80px 24px;
  background: var(--lume-bg-primary);
}
.lume-about__block--opening { padding-top: 96px; }

.lume-about__inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.lume-about__inner--wide { max-width: 780px; }

@media (max-width: 749px) {
  .lume-about__block { padding: 56px 24px; }
  .lume-about__block--opening { padding-top: 64px; }
}

/* ---------- Shared type primitives ------------------------ */
.lume-about__label {
  font-family: var(--lume-font-body);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--lume-bronze-deep);
  margin: 0 0 20px;
  text-align: center;
}

.lume-about__heading {
  font-family: var(--lume-font-heading);
  font-weight: 400;
  font-size: clamp(29px, 4vw, 38px);
  line-height: 1.2;
  color: var(--lume-text);
  margin: 0 0 24px;
  text-align: center;
  letter-spacing: 0;
}

.lume-about .lume-diamond {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 40px 0;
  background: var(--lume-bg-primary);
}
.lume-about .lume-diamond svg { display: block; flex-shrink: 0; }

.lume-about .lume-gold-rule {
  width: 40px;
  height: 1px;
  background: var(--lume-bronze);
  border: 0;
  margin: 0 auto 32px;
  display: block;
}

.lume-about__lede,
.lume-about__body p {
  font-family: var(--lume-font-body);
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.85;
  color: var(--lume-text-body);
  margin: 0 0 18px;
}
.lume-about__lede { margin-bottom: 32px; }

.lume-about__body { text-align: center; }
.lume-about__body--narrow {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.lume-about__body p:last-child { margin-bottom: 0; }

/* ---------- Section 1 · Philosophy two-column cards ------- */
.lume-about__philosophy {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 0 auto 32px;
  max-width: 640px;
  text-align: left;
}

.lume-about__philosophy-card {
  background: var(--lume-bg-secondary);
  border-left: 3px solid var(--lume-bronze);
  padding: 20px 28px;
}
.lume-about__philosophy-card--left {
  border-right: 1px solid var(--lume-divider);
}
.lume-about__philosophy-card p {
  font-family: var(--lume-font-body);
  font-style: italic;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.7;
  color: var(--lume-text-body);
  margin: 0;
}

@media (max-width: 749px) {
  .lume-about__philosophy { grid-template-columns: 1fr; }
  .lume-about__philosophy-card--left { border-right: 0; }
}

/* ---------- Pull quote (Sections 2 + 4) ------------------- */
.lume-about__pullquote {
  background: var(--lume-bg-secondary);
  border-left: 3px solid var(--lume-bronze);
  padding: 20px 28px;
  max-width: 560px;
  margin: 32px auto 0;
  text-align: left;
}
.lume-about__pullquote p {
  font-family: var(--lume-font-body);
  font-style: italic;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.7;
  color: var(--lume-text-body);
  margin: 0;
}

/* ---------- Section 5 · Choosing Your Orientation --------- */
.lume-about__choice-subheading {
  font-family: var(--lume-font-body);
  font-style: italic;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.7;
  color: var(--lume-text-body);
  text-align: center;
  margin: 0 auto 48px;
  max-width: 560px;
}

.lume-about__compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  position: relative;
  text-align: left;
  max-width: 780px;
  margin: 0 auto;
}
.lume-about__compare::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--lume-divider);
  transform: translateX(-0.5px);
}

.lume-about__compare-col { min-width: 0; }

.lume-about__compare-label {
  font-family: var(--lume-font-body);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lume-bronze-deep);
  margin: 0 0 16px;
}

.lume-about__compare-heading {
  font-family: var(--lume-font-heading);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.25;
  color: var(--lume-text);
  margin: 0 0 20px;
}

.lume-about__compare-body p {
  font-family: var(--lume-font-body);
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.85;
  color: var(--lume-text-body);
  margin: 0 0 18px;
}
.lume-about__compare-body p:last-child { margin-bottom: 0; }

.lume-about__compare-forward {
  font-style: italic;
  color: var(--lume-bronze-deep) !important;
}

@media (max-width: 749px) {
  .lume-about__compare {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .lume-about__compare::before { display: none; }
  .lume-about__compare-col + .lume-about__compare-col {
    border-top: 1px solid var(--lume-divider);
    padding-top: 40px;
  }
}

/* ---------- Closing copy + signature line ----------------- */
.lume-about__body--closing {
  margin-top: 48px;
  text-align: center;
}

.lume-about__signature {
  display: block;
  font-family: var(--lume-font-body);
  font-style: italic;
  font-size: 15px;
  letter-spacing: 0.15em;
  color: var(--lume-bronze-deep);
  text-align: center;
  margin: 64px auto 80px;
  padding: 0 24px;
}

@media (max-width: 749px) {
  .lume-about__signature { margin: 48px auto 64px; }
}


/* Philosophy card border correction (Session 015 Assessment Fix) */
/* Single bronze left border on the container, not on individual cards */
.lume-about__philosophy {
  border-left: 3px solid var(--lume-bronze);
}
.lume-about__philosophy-card {
  border-left: none; /* remove per-card bronze border · container handles it */
}
.lume-about__philosophy-card--left {
  border-right: 1px solid var(--lume-divider); /* internal column divider */
}
/* End philosophy card border correction */

/* ============================================================
   LUMÉ AMANI · base.css SESSION 015 ABOUT BLOCK · END
   ============================================================ */

/* ============================================================
   LUMÉ AMANI · base.css SESSION 015 MOBILE FIX
   Origin section collapse + Cycle of Light grid single-column
   May 9 2026
   NOTE: Issue 2 class corrected from cc-product-grid to
   cycle-product-grid · the Cycle of Light page uses
   cycle-product-grid / cycle-card, not the cc-* namespace.
   ============================================================ */

/* ── FIX 1: Homepage Origin section · force single column on mobile ──────── */

@media (max-width: 749px) {

  /* Force the grid to single column · override any cascade */
  .lume-origin__inner {
    grid-template-columns: 1fr !important;
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* Ensure copy column fills full width and does not retain desktop max-width */
  .lume-origin__copy {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Ensure photo placeholder fills full width and does not overflow */
  .lume-card-photo--origin {
    width: 100% !important;
    max-width: 100% !important;
    /* S037e: 240px floor removed so aspect-ratio governs the box */
    aspect-ratio: 4 / 3 !important;
    overflow: hidden !important;
  }

  /* Prevent any child element from exceeding viewport width */
  .lume-section-origin,
  #shopify-section-lume-origin {
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

}

/* ── FIX 2: Cycle of Light page · force single column card grid on mobile ── */

@media (max-width: 549px) {

  /* Target the cycle-product-grid used on the Cycle of Light page */
  .cycle-product-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Ensure each card fills full width */
  .cycle-card {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Ensure photo placeholder fills card width */
  .cycle-card .lume-card-photo {
    width: 100% !important;
    /* S037e: 240px floor removed so aspect-ratio governs the box */
  }

}

@media (min-width: 550px) and (max-width: 899px) {

  /* Two columns on tablet · matches the Complete Cycle page behaviour */
  .cycle-product-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }

}

/* ============================================================
   END SESSION 015 MOBILE FIX
   ============================================================ */

/* ============================================================
   LUMÉ AMANI · base.css SESSION 015 CONTACT BLOCK · BEGIN
   File: assets/base.css (append after Session 015 About block)
   Date: May 9 2026
   Scope: Contact page sections + .lume-section-contact-header
   All px values. No rem units.
   ============================================================ */

/* ---------- Page background (both contact sections) -------- */

#shopify-section-template--21809361485913__main,
#shopify-section-template--21809361485913__form,
.lume-section-contact-header {
  background: #FAF5EF !important;
}

/* Remove Dawn's color-scheme-1 gradient on the form section */
#shopify-section-template--21809361485913__form .color-scheme-1 {
  background: #FAF5EF !important;
}

/* Reinforce hidden Dawn page title */
.contact-page .page-title,
.main-page-title {
  display: none !important;
}

/* ---------- Header section ---------------------------------- */

.lume-section-contact-header {
  display: block;
}

.lume-contact-header {
  background: #FAF5EF;
  padding: 80px 24px;
  font-family: "Lora", Georgia, serif;
  color: #1a1510;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.lume-contact-header__inner {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}

.lume-contact-header__label {
  font-family: "Lora", Georgia, serif;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #8C5934;
  margin: 0 0 20px;
  text-align: center;
}

.lume-contact-header__heading {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 500;
  font-size: clamp(29px, 4vw, 38px);
  line-height: 1.2;
  letter-spacing: 0;
  color: #1a1510;
  margin: 0 0 20px;
  text-align: center;
}

.lume-contact-header__rule {
  display: block;
  width: 40px;
  height: 1px;
  background: #B57A48;
  border: 0;
  margin: 0 auto 28px;
}

.lume-contact-header__subheading {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.7;
  color: #3a3028;
  margin: 0 0 16px;
  text-align: center;
}

.lume-contact-header__body {
  font-family: "Lora", Georgia, serif;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.75;
  color: #3a3028;
  margin: 0;
  text-align: center;
}

@media (max-width: 749px) {
  .lume-contact-header {
    padding: 56px 24px;
  }
}

/* ---------- Form container width + spacing ----------------- */

.contact.page-width {
  max-width: 560px !important;
  padding-top: 0 !important;
  padding-bottom: 80px !important;
}

@media (max-width: 749px) {
  .contact.page-width {
    padding-bottom: 56px !important;
  }
}

/* ---------- Field inputs and textarea ---------------------- */

.contact .field__input,
.contact .text-area {
  font-family: "Lora", Georgia, serif;
  font-size: 15px;
  background: #FAF5EF !important;
  border: 1px solid rgba(26, 21, 16, 0.25) !important;
  border-radius: 0 !important;
  color: #1a1510 !important;
  padding: 14px 16px !important;
  transition: border-color 280ms ease !important;
}

.contact .field__input:focus,
.contact .text-area:focus {
  border-color: #B57A48 !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Field labels */
.contact .field__label {
  font-family: "Lora", Georgia, serif !important;
  font-size: 13px !important;
  color: #3a3028 !important;
  letter-spacing: 0.04em !important;
}

/* Placeholder text */
.contact .field__input::placeholder,
.contact .text-area::placeholder {
  font-family: "Lora", Georgia, serif !important;
  color: rgba(26, 21, 16, 0.4) !important;
}

/* ---------- Send button ------------------------------------ */

.contact [type="submit"],
.contact button[type="submit"] {
  font-family: "Lora", Georgia, serif !important;
  font-size: 13px !important;
  font-variant: small-caps !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  background: #B57A48 !important;
  color: #f4f1ec !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 14px 40px !important;
  cursor: pointer !important;
  transition: background-color 280ms ease !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.contact [type="submit"]:hover,
.contact button[type="submit"]:hover {
  background: #8C5934 !important;
}

/* ============================================================
   LUMÉ AMANI · base.css SESSION 015 CONTACT BLOCK · END
   ============================================================ */

/* ============================================================
   LUMÉ AMANI · base.css SESSION 015 FAQ BLOCK · BEGIN
   File: assets/base.css (append after Session 015 Contact block)
   Date: May 9 2026
   Scope: .lume-section-faq · FAQ page only
   All px / clamp(px, vw, px) values. No rem.
   ============================================================ */

:where(.lume-section-faq) {
  --lume-bg-primary:    #FAF5EF;
  --lume-bg-secondary:  #F2E3D0;
  --lume-text:          #1a1510;
  --lume-text-body:     #3a3028;
  --lume-bronze:        #B57A48;
  --lume-bronze-deep:   #8C5934;
  --lume-gold-light:    #c9a84c;
  --lume-divider:       #e8e2d8;

  --lume-font-heading:  "Playfair Display", Georgia, serif;
  --lume-font-body:     "Lora", Georgia, serif;

  background: var(--lume-bg-primary);
  font-family: var(--lume-font-body);
  color: var(--lume-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Container ------------------------------------ */
.lume-faq {
  background: var(--lume-bg-primary);
  max-width: 780px;
  margin: 0 auto;
  padding: 80px 24px;
  box-sizing: border-box;
}

@media (max-width: 749px) {
  .lume-faq { padding: 56px 24px; }
}

/* ---------- Page header --------------------------------- */
.lume-faq__header {
  max-width: 680px;
  margin: 0 auto 56px;
  text-align: center;
  padding: 16px 0 24px;
}

.lume-faq__label {
  font-family: var(--lume-font-body);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--lume-bronze-deep);
  margin: 0 0 20px;
}

.lume-faq__heading {
  font-family: var(--lume-font-heading);
  font-weight: 500;
  font-size: clamp(29px, 4vw, 38px);
  line-height: 1.2;
  color: var(--lume-text);
  margin: 0 0 24px;
  letter-spacing: 0;
}

.lume-faq__rule {
  display: block;
  width: 40px;
  height: 1px;
  background: var(--lume-bronze);
  border: 0;
  margin: 0 auto 28px;
}

.lume-faq__subheading {
  font-family: var(--lume-font-body);
  font-style: italic;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.7;
  color: var(--lume-text-body);
  margin: 0;
}

@media (max-width: 749px) {
  .lume-faq__header { margin-bottom: 40px; }
}

/* ---------- Diamond separator (between categories) ------- */
.lume-faq .lume-diamond {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 32px 0;
  background: var(--lume-bg-primary);
}
.lume-faq .lume-diamond svg { display: block; flex-shrink: 0; }

/* ---------- Category block ------------------------------- */
.lume-faq__category {
  padding: 0 0 48px;
}

.lume-faq__category-label {
  font-family: var(--lume-font-body);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--lume-bronze-deep);
  margin: 0 0 32px;
}

/* ---------- Single Q&A item ------------------------------ */
.lume-faq__item { margin: 0; }

.lume-faq__question {
  font-family: var(--lume-font-heading);
  font-weight: 400;
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.45;
  color: var(--lume-text);
  margin: 0 0 12px;
  letter-spacing: 0;
}

.lume-faq__answer,
.lume-faq__answer p {
  font-family: var(--lume-font-body);
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.85;
  color: var(--lume-text-body);
  margin: 0;
}

.lume-faq__answer + .lume-faq__answer--post {
  margin-top: 12px;
}

.lume-faq__divider {
  display: block;
  height: 1px;
  background: var(--lume-divider);
  border: 0;
  margin: 32px 0;
}

/* ---------- Inline link ---------------------------------- */
.lume-faq__link {
  color: var(--lume-bronze-deep);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 280ms cubic-bezier(0.16, 1, 0.3, 1), color 280ms cubic-bezier(0.16, 1, 0.3, 1);
}
.lume-faq__link:hover,
.lume-faq__link:focus-visible {
  color: var(--lume-bronze-deep);
  border-bottom-color: var(--lume-bronze-deep);
  outline: none;
}

/* ---------- Ingredients list ----------------------------- */
.lume-faq__ingredients {
  background: var(--lume-bg-secondary);
  border-left: 3px solid var(--lume-bronze);
  padding: 16px 24px;
  margin: 16px 0;
}

.lume-faq__ingredients p {
  font-family: var(--lume-font-body);
  font-style: italic;
  font-size: clamp(14px, 1.5vw, 16px);
  line-height: 1.7;
  color: var(--lume-text-body);
  margin: 0;
}
.lume-faq__ingredients p + p { margin-top: 4px; }

/* ---------- Formats two-column comparison ---------------- */
.lume-faq__formats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--lume-bg-secondary);
  padding: 20px 24px;
  margin: 16px 0;
  position: relative;
}
.lume-faq__formats::before {
  content: "";
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 50%;
  width: 1px;
  background: var(--lume-divider);
  transform: translateX(-0.5px);
}

.lume-faq__formats-col {
  padding: 0 16px;
  min-width: 0;
}
.lume-faq__formats-col:first-child { padding-left: 0; }
.lume-faq__formats-col:last-child  { padding-right: 0; }

.lume-faq__formats-label {
  font-family: var(--lume-font-body);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lume-bronze-deep);
  margin: 0 0 8px;
}

.lume-faq__formats-size {
  font-family: var(--lume-font-heading);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.25;
  color: var(--lume-text);
  margin: 0 0 6px;
}

.lume-faq__formats-descriptor {
  font-family: var(--lume-font-body);
  font-style: italic;
  font-size: 14px;
  line-height: 1.55;
  color: var(--lume-text-body);
  margin: 0;
}

@media (max-width: 549px) {
  .lume-faq__formats {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .lume-faq__formats::before {
    top: auto;
    bottom: auto;
    left: 20px;
    right: 20px;
    width: auto;
    height: 1px;
    transform: none;
    top: 50%;
  }
  .lume-faq__formats-col,
  .lume-faq__formats-col:first-child,
  .lume-faq__formats-col:last-child { padding: 0; }
}

/* ---------- Closing zone --------------------------------- */
.lume-faq__closing {
  padding-top: 24px;
  text-align: center;
}

.lume-faq__maison-panel {
  background: var(--lume-bg-secondary);
  border-left: 3px solid var(--lume-bronze);
  padding: 20px 28px;
  margin: 40px auto;
  max-width: 480px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
}

.lume-faq__maison-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lume-faq__maison-label {
  font-family: var(--lume-font-body);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lume-bronze-deep);
  margin: 0;
}

.lume-faq__maison-value {
  font-family: var(--lume-font-body);
  font-size: clamp(14px, 1.5vw, 15px);
  line-height: 1.6;
  color: var(--lume-text-body);
  margin: 0;
}

.lume-faq__maison-value .lume-faq__link {
  color: var(--lume-bronze-deep);
}

/* ---------- Closing signature ---------------------------- */
.lume-faq__signature {
  font-family: var(--lume-font-body);
  font-style: italic;
  font-size: 15px;
  letter-spacing: 0.15em;
  color: var(--lume-bronze-deep);
  text-align: center;
  margin: 48px auto 0;
  padding: 0 24px;
}

@media (max-width: 749px) {
  .lume-faq__maison-panel {
    margin: 32px auto;
    padding: 18px 22px;
  }
  .lume-faq__signature { margin-top: 40px; }
}

/* ============================================================
   LUMÉ AMANI · base.css SESSION 015 FAQ BLOCK · END
   ============================================================ */

/* ============================================================
   LUMÉ AMANI · base.css SESSION 015 POLICY BLOCK · BEGIN
   File: assets/base.css (append after Session 015 FAQ block)
   Date: May 9 2026
   Scope: Shopify native policy pages
          (.shopify-policy__container · .shopify-policy__title
           · .shopify-policy__body)
          Applies to Terms of Service, Refund Policy, and
          Shipping Policy simultaneously.
   All px / clamp(px, vw, px) values. No rem.
   ============================================================ */

/* Page background override (Dawn ships #ffffff) */
body:has(.shopify-policy__container) {
  background: #FAF5EF !important;
}

/* ---------- Container ------------------------------------- */
.shopify-policy__container {
  background: #FAF5EF !important;
  max-width: 720px !important;
  margin: 0 auto !important;
  padding: 80px 24px !important;
  font-family: "Lora", Georgia, serif !important;
  color: #3a3028 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;

  /* Drives auto-numbered "01 · 02 · 03" eyebrows on each H2 */
  counter-reset: lume-policy !important;
}

/* ---------- Page title (H1) ------------------------------- */
.shopify-policy__title {
  font-family: "Playfair Display", Georgia, serif !important;
  font-weight: 500 !important;
  font-size: clamp(29px, 4vw, 38px) !important;
  line-height: 1.2 !important;
  color: #1a1510 !important;
  text-align: center !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  letter-spacing: 0 !important;
}

/* "LUMÉ Amani" maison label above the title */
.shopify-policy__title::before {
  content: "LUMÉ Amani";
  display: block;
  font-family: "Lora", Georgia, serif;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #8C5934;
  margin: 0 0 16px;
}

/* Hairline gold rule below the title */
.shopify-policy__title::after {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  background: #B57A48;
  margin: 20px auto 40px;
}

/* ---------- Body wrapper ---------------------------------- */
.shopify-policy__body {
  font-family: "Lora", Georgia, serif !important;
  font-size: clamp(15px, 1.5vw, 17px) !important;
  line-height: 1.85 !important;
  color: #3a3028 !important;
}

.shopify-policy__body.rte > * + * {
  margin-top: 0;
}

/* ---------- Headings -------------------------------------- */
.shopify-policy__body h1,
.shopify-policy__body h2 {
  font-family: "Playfair Display", Georgia, serif !important;
  font-weight: 400 !important;
  font-size: clamp(22px, 2.5vw, 28px) !important;
  line-height: 1.25 !important;
  color: #1a1510 !important;
  border-top: 1px solid #e8e2d8 !important;
  padding-top: 48px !important;
  margin-top: 48px !important;
  margin-bottom: 8px !important;
  letter-spacing: 0 !important;
}

/* Auto-numbered "01 · 02 · 03" eyebrow above each policy H2 */
.shopify-policy__body h2 {
  counter-increment: lume-policy !important;
}
.shopify-policy__body h2::before {
  content: counter(lume-policy, decimal-leading-zero);
  display: block;
  font-family: "Lora", Georgia, serif;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #8C5934;
  margin: 0 0 12px;
}

/* The very first H2 sits flush with the navigation block;
   no border or extra spacing above it. */
.shopify-policy__body > h2:first-child,
.shopify-policy__body > h1:first-child {
  border-top: 0 !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.shopify-policy__body h3 {
  font-family: "Playfair Display", Georgia, serif !important;
  font-weight: 400 !important;
  font-size: clamp(17px, 1.8vw, 20px) !important;
  line-height: 1.3 !important;
  color: #1a1510 !important;
  margin-top: 32px !important;
  margin-bottom: 12px !important;
  letter-spacing: 0 !important;
}

/* ---------- Body prose ------------------------------------ */
.shopify-policy__body p {
  font-family: "Lora", Georgia, serif !important;
  font-size: clamp(15px, 1.5vw, 17px) !important;
  line-height: 1.85 !important;
  color: #3a3028 !important;
  margin: 0 0 20px !important;
}

.shopify-policy__body strong,
.shopify-policy__body b {
  font-weight: 500 !important;
  color: #1a1510 !important;
}

.shopify-policy__body em,
.shopify-policy__body i {
  font-style: italic !important;
}

/* ---------- Lists ----------------------------------------- */
.shopify-policy__body ul,
.shopify-policy__body ol {
  font-family: "Lora", Georgia, serif !important;
  font-size: clamp(15px, 1.5vw, 17px) !important;
  line-height: 1.85 !important;
  color: #3a3028 !important;
  padding-left: 24px !important;
  margin: 0 0 20px !important;
}

.shopify-policy__body li {
  margin-bottom: 8px !important;
}

.shopify-policy__body ul li::marker {
  color: #8C5934 !important;
}

/* ---------- Links ----------------------------------------- */
.shopify-policy__body a {
  color: #8C5934 !important;
  text-decoration: none !important;
  border-bottom: 1px solid transparent !important;
  transition: color 320ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 320ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.shopify-policy__body a:hover {
  color: #8C5934 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* ---------- Mobile ---------------------------------------- */
@media (max-width: 749px) {
  .shopify-policy__container {
    padding: 56px 24px !important;
  }

  .shopify-policy__body h1,
  .shopify-policy__body h2 {
    padding-top: 40px !important;
    margin-top: 40px !important;
  }

  .shopify-policy__body h3 {
    margin-top: 28px !important;
  }
}

/* ---------- Reduced motion -------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .shopify-policy__body a {
    transition: none !important;
  }
}

/* LUMÉ AMANI · base.css SESSION 015 POLICY BLOCK · END */

/* ============================================================
   LUMÉ AMANI · base.css SESSION 015 PRODUCT BLOCK · BEGIN
   File: assets/base.css (append after Session 015 Policy block)
   Date: May 9 2026
   Scope: All five fragrance product pages
          sections/main-product.liquid + product-recommendations
   All px values. No rem units.
   ============================================================ */

/* ── 1. Page background ───────────────────────────────────────── */

/* Override Dawn's color-scheme-1 (white) on the product section */
.section-main-product .color-scheme-1,
.gradient.color-scheme-1:has(.product__info-wrapper),
[class*="__main-padding"].gradient.color-scheme-1 {
  background: #FAF5EF !important;
}

/* Fallback: target the product grid directly */
.product.grid {
  background: #FAF5EF !important;
}

/* ── 2. Product vendor / collection label ─────────────────────── */

/* "LUMÉ Amani" label above the product title */
.product__vendor,
.product__vendor a {
  font-family: "Lora", Georgia, serif !important;
  font-size: 11px !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: #8C5934 !important;
  text-decoration: none !important;
}

/* ── 3. Product title ─────────────────────────────────────────── */

.product__title {
  font-family: "Playfair Display", Georgia, serif !important;
  font-weight: 400 !important;
  font-size: clamp(22px, 3vw, 32px) !important;
  color: #1a1510 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}

/* ── 4. Price ─────────────────────────────────────────────────── */

.price__regular .price-item,
.price__regular .price-item--regular,
.price-item--regular {
  font-family: "Lora", Georgia, serif !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  color: #3a3028 !important;
}

.price--large .price-item {
  font-size: 19px !important;
}

/* ── 5. Variant pills ─────────────────────────────────────────── */

/* Unselected pill */
.product-form__input--pill .button,
.product-form__input--pill label {
  font-family: "Lora", Georgia, serif !important;
  font-size: 13px !important;
  letter-spacing: 0.08em !important;
  color: #3a3028 !important;
  border: 1px solid #B57A48 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 10px 20px !important;
  transition: background-color 220ms ease, color 220ms ease !important;
  cursor: pointer !important;
}

/* Selected / checked pill */
.product-form__input--pill input[type="radio"]:checked + label,
.product-form__input--pill .button[aria-checked="true"] {
  background: #B57A48 !important;
  color: #f4f1ec !important;
  border-color: #B57A48 !important;
}

/* Hover on unselected pill */
.product-form__input--pill label:hover {
  background: #F2E3D0 !important;
  color: #1a1510 !important;
}

/* ── 6. Quantity stepper ──────────────────────────────────────── */

.quantity__button,
.quantity__input {
  font-family: "Lora", Georgia, serif !important;
  font-size: 15px !important;
  color: #1a1510 !important;
  border-color: rgba(26, 21, 16, 0.25) !important;
  border-radius: 0 !important;
  background: #FAF5EF !important;
}

/* ── 7. Add to Cart button ────────────────────────────────────── */

.product-form__submit,
.product-form__submit.button,
.product-form__submit.button--secondary {
  font-family: "Lora", Georgia, serif !important;
  font-size: 13px !important;
  font-variant: small-caps !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  background: #B57A48 !important;
  color: #f4f1ec !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 16px 32px !important;
  cursor: pointer !important;
  transition: background-color 280ms ease !important;
  -webkit-appearance: none !important;
}

.product-form__submit:hover {
  background: #8C5934 !important;
}

.product-form__submit[disabled],
.product-form__submit.disabled {
  background: rgba(181, 122, 72, 0.4) !important;
  cursor: not-allowed !important;
}

/* ── 8. Buy with Shop Pay button ──────────────────────────────── */

/* Constrain the Shop Pay button to not visually dominate */
.shopify-payment-button__button--branded {
  border-radius: 0 !important;
}

/* "More payment options" link */
.shopify-payment-button__more-options {
  font-family: "Lora", Georgia, serif !important;
  font-size: 12px !important;
  color: #8C5934 !important;
  text-decoration: underline !important;
}

/* ── 9. Product description ───────────────────────────────────── */

.product__description {
  font-family: "Lora", Georgia, serif !important;
  font-size: clamp(15px, 1.5vw, 17px) !important;
  line-height: 1.85 !important;
  color: #3a3028 !important;
}

.product__description p {
  font-family: "Lora", Georgia, serif !important;
  font-size: clamp(15px, 1.5vw, 17px) !important;
  line-height: 1.85 !important;
  color: #3a3028 !important;
  margin-bottom: 18px !important;
}

/* Section headings (Scent Profile, The Ritual, Composition) */
.product__description strong {
  font-family: "Playfair Display", Georgia, serif !important;
  font-weight: 500 !important;
  font-size: clamp(15px, 1.5vw, 17px) !important;
  color: #1a1510 !important;
  letter-spacing: 0.01em !important;
}

/* Pull quote / essence line (border-left inline style in description) */
.product__description p[style*="border-left"] {
  border-left: 2px solid #B57A48 !important;
  padding-left: 18px !important;
  font-style: italic !important;
  color: #3a3028 !important;
  opacity: 0.85 !important;
}

/* Composition text (smaller, lower opacity) */
.product__description p[style*="0.9em"],
.product__description p[style*="font-size: 0.9"] {
  font-size: 14px !important;
  opacity: 0.75 !important;
  color: #3a3028 !important;
}

/* ── 10. Share button ─────────────────────────────────────────── */

.share-button__button {
  font-family: "Lora", Georgia, serif !important;
  font-size: 13px !important;
  color: #8C5934 !important;
}

/* ── 11. Related products · "You might also carry" section ────── */

/* Section background */
product-recommendations,
.related-products {
  background: #FAF5EF !important;
}

/* Section heading */
.related-products__heading,
.related-products h2,
product-recommendations h2 {
  font-family: "Playfair Display", Georgia, serif !important;
  font-weight: 400 !important;
  font-size: clamp(22px, 2.5vw, 28px) !important;
  color: #1a1510 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Card wrappers in related section */
product-recommendations .card-wrapper,
product-recommendations .card {
  background: #FAF5EF !important;
  border-radius: 0 !important;
}

/* Card image area background */
product-recommendations .card__media,
product-recommendations .media {
  background: #E8E0D5 !important;
  border-radius: 0 !important;
}

/* Card product name */
product-recommendations .card__heading,
product-recommendations .card__heading a {
  font-family: "Playfair Display", Georgia, serif !important;
  font-weight: 400 !important;
  font-size: clamp(15px, 1.5vw, 17px) !important;
  color: #1a1510 !important;
  text-decoration: none !important;
  letter-spacing: 0 !important;
}

/* Card tags / meta (Fresh · Clean · Softly green) */
product-recommendations .card__information .meta,
product-recommendations .card__information [class*="meta"] {
  font-family: "Lora", Georgia, serif !important;
  font-style: italic !important;
  font-size: 13px !important;
  color: #8C5934 !important;
}

/* Card price */
product-recommendations .price__regular .price-item,
product-recommendations .price-item {
  font-family: "Lora", Georgia, serif !important;
  font-size: 14px !important;
  color: #3a3028 !important;
}

/* Card hover */
product-recommendations .card-wrapper:hover .card {
  box-shadow: 0 4px 20px rgba(26, 21, 16, 0.08) !important;
  transform: translateY(-2px) !important;
  transition: box-shadow 280ms ease, transform 280ms ease !important;
}

/* ── 12. Mobile overrides ─────────────────────────────────────── */

@media (max-width: 749px) {

  .product__title {
    font-size: 22px !important;
  }

  .product__description {
    font-size: 15px !important;
  }

  .product-form__submit {
    font-size: 12px !important;
    padding: 14px 24px !important;
  }

  product-recommendations .card__heading {
    font-size: 14px !important;
  }

}

.product__description blockquote {
  border-left: 2px solid #B57A48;
  padding-left: 18px;
  margin: 0 0 28px;
}

.product__description blockquote p {
  font-style: italic;
  color: #3a3028;
  opacity: 0.82;
  margin: 0;
}

/* ============================================================
   LUMÉ AMANI · base.css SESSION 015 PRODUCT BLOCK · END
   ============================================================ */

/* ============================================================
   LUMÉ AMANI · base.css SESSION 015 PRODUCT BG DEFINITIVE
   Root cause: --color-background set by inline <style> tag.
   CSS custom properties cannot be overridden via !important
   in external stylesheets. Fix: target background-color
   directly with high-specificity selectors that bypass
   the variable resolution entirely.
   May 10 2026
   ============================================================ */

/* Target every gradient element inside the product section
   using background-color (not background shorthand).
   background-color beats background: rgb(var(...)) when
   specificity is equal or higher. */

section#shopify-section-template--21809361649753__main .gradient,
section[id*="__main"] product-info .gradient,
product-info.gradient,
product-info .gradient {
  background-color: #FAF5EF !important;
}

/* The product-media-container uses .gradient · target it directly */
section[id*="__main"] .product-media-container,
section[id*="__main"] .product__media-wrapper,
section[id*="__main"] media-gallery,
section[id*="__main"] slider-component,
section[id*="__main"] .product__media-list,
section[id*="__main"] .product.grid {
  background-color: #FAF5EF !important;
}

/* Override the .gradient class background shorthand specifically
   by targeting the global-media-settings gradient combo */
.global-media-settings.gradient {
  background-color: #FAF5EF !important;
}

/* Desktop-specific override · at min-width 750px Dawn may re-apply
   color-scheme backgrounds via media queries */
@media screen and (min-width: 750px) {
  section[id*="__main"] product-info .gradient,
  section[id*="__main"] .product-media-container,
  section[id*="__main"] .product__media-wrapper,
  section[id*="__main"] media-gallery {
    background-color: #FAF5EF !important;
  }
}

@media screen and (min-width: 990px) {
  section[id*="__main"] product-info .gradient,
  section[id*="__main"] .product-media-container,
  section[id*="__main"] .product__media-wrapper,
  section[id*="__main"] media-gallery {
    background-color: #FAF5EF !important;
  }
}

/* ============================================================
   END SESSION 015 PRODUCT BG DEFINITIVE
   ============================================================ */

/* ============================================================
   PRODUCT RECOMMENDATION GRID. cc-card ALIGNMENT
   Session 015. May 10 2026.
   Brings <product-recommendations> cards into the Claude Design
   system. Option B: ivory-on-ivory with hover-defined lift.
   ============================================================ */

/* Section wrapper and heading */
product-recommendations,
.product-recommendations {
  background: #FAF5EF !important;
  padding: 64px 24px !important;
}

product-recommendations .product-recommendations__heading,
product-recommendations h2 {
  font-family: "Playfair Display", Georgia, serif !important;
  font-weight: 400 !important;
  font-size: clamp(22px, 3vw, 32px) !important;
  color: #1a1510 !important;
  text-align: left !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  margin: 0 0 40px !important;
  padding: 0 !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Grid container */
product-recommendations .grid,
product-recommendations .product-recommendations__inner-list,
product-recommendations ul {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  list-style: none !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
}

product-recommendations .grid__item,
product-recommendations li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Card frame. Option B: ivory background, defined by hover */
product-recommendations .card-wrapper,
product-recommendations .card {
  background: #FAF5EF !important;
  border: 1px solid rgba(181, 122, 72, 0.12) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Hover lift. Brand shadow. Border deepens */
product-recommendations .card-wrapper:hover,
product-recommendations .card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 4px 20px rgba(26, 21, 16, 0.10) !important;
  border-color: rgba(181, 122, 72, 0.28) !important;
}

/* Photo container. Mirror lume-card-photo treatment */
product-recommendations .card__inner,
product-recommendations .card__media,
product-recommendations .media {
  background: #F2E3D0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  position: relative !important;
}

product-recommendations .card__media .media,
product-recommendations .media {
  aspect-ratio: 1 / 1 !important;
}

product-recommendations .card__media img,
product-recommendations .media img {
  object-fit: contain !important;
  padding: 16px !important;
}

/* Card information block. Padded text region */
product-recommendations .card__content,
product-recommendations .card__information {
  padding: 20px 24px 24px !important;
  background: #FAF5EF !important;
  text-align: left !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Product name. Playfair Display, sentence case */
product-recommendations .card__heading,
product-recommendations .card__information .card__heading,
product-recommendations h3.card__heading {
  font-family: "Playfair Display", Georgia, serif !important;
  font-weight: 400 !important;
  font-size: clamp(16px, 1.8vw, 19px) !important;
  color: #1a1510 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  margin: 0 0 8px !important;
  line-height: 1.3 !important;
}

product-recommendations .card__heading a {
  color: #1a1510 !important;
  text-decoration: none !important;
}

product-recommendations .card__heading a:hover {
  color: #8C5934 !important;
}

/* Tag line under product name. Lora italic bronze */
product-recommendations .card__information .meta,
product-recommendations .card__information .card-information,
product-recommendations .price__container,
product-recommendations .price__regular {
  font-family: "Lora", Georgia, serif !important;
}

/* Price treatment. Lora, bronze */
product-recommendations .price,
product-recommendations .price__regular,
product-recommendations .price-item--regular,
product-recommendations .price-item {
  font-family: "Lora", Georgia, serif !important;
  font-size: clamp(13px, 1.4vw, 15px) !important;
  color: #8C5934 !important;
  font-weight: 400 !important;
  margin: 0 !important;
  padding: 0 !important;
  letter-spacing: 0 !important;
}

/* Suppress Dawn's price gradients and pill borders if present */
product-recommendations .price {
  background: transparent !important;
  border: none !important;
}

/* Vendor label. Hidden in recommendation cards. Page already shows it elsewhere */
product-recommendations .card__information .caption-with-letter-spacing,
product-recommendations .card__information .card__vendor {
  display: none !important;
}

/* Mobile responsive. Single column below 550px, two columns 550 to 899 */
@media (max-width: 899px) {
  product-recommendations .grid,
  product-recommendations .product-recommendations__inner-list,
  product-recommendations ul {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
}

@media (max-width: 549px) {
  product-recommendations,
  .product-recommendations {
    padding: 48px 16px !important;
  }

  product-recommendations .grid,
  product-recommendations .product-recommendations__inner-list,
  product-recommendations ul {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  product-recommendations .product-recommendations__heading,
  product-recommendations h2 {
    font-size: clamp(20px, 4vw, 24px) !important;
    margin-bottom: 28px !important;
  }
}

/* ============================================================
   END PRODUCT RECOMMENDATION GRID. cc-card ALIGNMENT
   ============================================================ */

/* ============================================================
   LUMÉ RECOMMENDATIONS SECTION. cc-card SYSTEM
   Session 015. May 10 2026.
   Custom section replacing Dawn's product-recommendations.
   Renders the four other Cycle of Light fragrances on every
   product page. Option B: ivory-on-ivory with hover-defined
   lift. Pearl Beige photo containers.
   ============================================================ */

/* Section wrapper */
.lume-recommendations {
  background: #FAF5EF;
  padding: 64px 24px;
}

.lume-recommendations__inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* Section heading */
.lume-recommendations__heading {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 400;
  font-size: clamp(22px, 3vw, 32px);
  color: #1a1510;
  text-align: left;
  letter-spacing: 0.01em;
  text-transform: none;
  margin: 0 0 40px;
  padding: 0;
}

/* Grid container */
.lume-recommendations__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.lume-recommendations__item {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Card. Option B: ivory background, defined by hover */
.lume-recommendations__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #FAF5EF;
  border: 1px solid rgba(181, 122, 72, 0.12);
  border-radius: 0;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.lume-recommendations__card:hover,
.lume-recommendations__card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 4px 20px rgba(26, 21, 16, 0.10);
  border-color: rgba(181, 122, 72, 0.28);
  outline: none;
}

/* Photo container. Pearl Beige frame, 1:1 aspect ratio */
.lume-recommendations__photo {
  background: #F2E3D0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lume-recommendations__photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 16px;
  box-sizing: border-box;
  display: block;
}

.lume-recommendations__photo-placeholder {
  width: 100%;
  height: 100%;
  background: #E8DDC9;
}

/* Info block. Padded text region */
.lume-recommendations__info {
  padding: 20px 24px 24px;
  background: #FAF5EF;
  text-align: left;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Product name. Playfair Display, sentence case */
.lume-recommendations__name {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 400;
  font-size: clamp(16px, 1.8vw, 19px);
  color: #1a1510;
  letter-spacing: 0.01em;
  text-transform: none;
  margin: 0;
  line-height: 1.3;
}

/* Optional tag line. Lora italic bronze */
.lume-recommendations__tags {
  font-family: "Lora", Georgia, serif;
  font-style: italic;
  font-size: clamp(12px, 1.3vw, 14px);
  color: #8C5934;
  margin: 0;
  letter-spacing: 0;
  opacity: 0.85;
}

/* Price. Lora, bronze */
.lume-recommendations__price {
  font-family: "Lora", Georgia, serif;
  font-style: normal;
  font-weight: 400;
  font-size: clamp(13px, 1.4vw, 15px);
  color: #8C5934;
  margin: 4px 0 0;
  letter-spacing: 0;
}

/* Hover state on text. Name shifts to bronze */
.lume-recommendations__card:hover .lume-recommendations__name {
  color: #8C5934;
}

/* Tablet 550 to 899px. Two columns */
@media (max-width: 899px) {
  .lume-recommendations__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

/* Mobile below 550px. Single column */
@media (max-width: 549px) {
  .lume-recommendations {
    padding: 48px 16px;
  }

  .lume-recommendations__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .lume-recommendations__heading {
    font-size: clamp(20px, 4vw, 24px);
    margin-bottom: 28px;
  }

  .lume-recommendations__info {
    padding: 16px 20px 20px;
  }
}

/* ============================================================
   END LUMÉ RECOMMENDATIONS SECTION. cc-card SYSTEM
   ============================================================ */

/* ============================================================
   FRAGRANCE MOMENT INDICATOR
   Session 015. May 10 2026.
   Renders below product title on Cycle of Light product pages.
   Roman numeral position linked to /pages/the-cycle-of-light.
   ============================================================ */

.lume-moment-indicator {
  margin: 6px 0 16px;
  padding: 0;
  line-height: 1;
}

.lume-moment-indicator__link {
  font-family: "Lora", Georgia, serif;
  font-size: 11px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #8C5934;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0;
  transition: color 0.2s ease;
}

.lume-moment-indicator__link:hover,
.lume-moment-indicator__link:focus-visible {
  color: #8C5934;
  text-decoration: underline;
  text-underline-offset: 3px;
  outline: none;
}

.lume-moment-indicator__position {
  font-variant-numeric: normal;
}

.lume-moment-indicator__sep {
  color: rgba(181, 122, 72, 0.5);
  letter-spacing: 0;
  padding: 0 2px;
}

.lume-moment-indicator__moment {
  font-variant-numeric: normal;
}

/* Mobile. Size holds · no adjustment needed at narrow viewport */
@media (max-width: 549px) {
  .lume-moment-indicator {
    margin: 4px 0 12px;
  }
}

/* ============================================================
   END FRAGRANCE MOMENT INDICATOR
   ============================================================ */

/* ============================================================
   CUSTOM LIQUID BLOCK STYLING. Session 015.
   lume-product-note used for both blocks.
   Size differentiation applied via :first-of-type / :last-of-type
   if blocks are adjacent, or uniform 11px if not distinguishable.
   ============================================================ */

.lume-product-note,
.lume-product-note p {
  font-family: "Lora", Georgia, serif !important;
  font-size: 11px !important;
  color: #8C5934 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.6 !important;
  font-style: normal !important;
  margin: 6px 0 0 !important;
}

.lume-product-note a,
.lume-product-note p a {
  color: #8C5934 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

.lume-product-note a:hover,
.lume-product-note p a:hover {
  color: #8C5934 !important;
}

/* ============================================================
   END CUSTOM LIQUID BLOCK STYLING. Session 015.
   ============================================================ */

/* ============================================================
   PARIS MOOD NOTE. SESSION 016.
   Private page, password-protected, deletable post-shoot.
   Scoped under .lume-paris-mood-page so the block does not
   leak tokens or rules to the rest of the theme.
   ============================================================ */

.lume-paris-mood-page {
  /* Local brand palette, mirrors the LUMÉ Amani design system.
     Hex values derived from the brand color spec. */
  --lpm-ivory:           #FAF4EA;
  --lpm-pearl-beige:     #F2E3D0;
  --lpm-frosted-glass:   #EFE6D8;
  --lpm-bronze-light:    #C58A4F;
  --lpm-bronze:          #B57A48;
  --lpm-bronze-mid:      #A06A3E;
  --lpm-bronze-deep:     #8C5934;
  --lpm-foil-matt-gold:  #B89B6A;
  --lpm-foil-copper:     #B8703A;
  --lpm-rule:            rgba(140, 89, 52, 0.18);
  --lpm-rule-soft:       rgba(140, 89, 52, 0.08);

  --lpm-font-display: "Playfair Display", "Cormorant Garamond", "Times New Roman", serif;
  --lpm-font-body:    "Lora", Georgia, serif;

  display: block;
  width: 100%;
  background: var(--lpm-ivory);
  color: var(--lpm-bronze-deep);
  font-family: var(--lpm-font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Block reset for elements that Dawn styles globally. */
.lume-paris-mood-page p,
.lume-paris-mood-page h1,
.lume-paris-mood-page h2,
.lume-paris-mood-page h3,
.lume-paris-mood-page h4,
.lume-paris-mood-page blockquote,
.lume-paris-mood-page figure,
.lume-paris-mood-page figcaption,
.lume-paris-mood-page hr,
.lume-paris-mood-page cite {
  margin: 0;
  padding: 0;
}

.lume-paris-mood-page img {
  max-width: 100%;
  display: block;
}

.lume-paris-mood-page * {
  box-sizing: border-box;
}

/* ---------- Section markers (matches product page register) ---------- */
.lume-paris-mood-roman {
  font-family: var(--lpm-font-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--lpm-bronze-deep);
  margin: 0;
}

.lume-paris-mood-dot {
  opacity: 0.6;
  padding: 0 6px;
}

.lume-paris-mood-section-title {
  font-family: var(--lpm-font-display);
  font-weight: 500;
  font-size: clamp(32px, 3.6vw, 44px);
  line-height: 1.16;
  letter-spacing: 0.01em;
  color: var(--lpm-bronze-deep);
  margin: 18px 0 10px;
  text-wrap: balance;
}

.lume-paris-mood-section-sub {
  font-family: var(--lpm-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.45;
  color: var(--lpm-bronze-mid);
  margin: 0 0 28px;
}

.lume-paris-mood-prose {
  max-width: 620px;
  margin: 0 auto 56px;
  padding: 0 32px;
}

.lume-paris-mood-intro-p {
  font-family: var(--lpm-font-body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--lpm-bronze-mid);
  margin: 0;
  text-align: center;
  text-wrap: pretty;
}

/* ---------- Masthead ---------- */
.lume-paris-mood-masthead {
  padding: 140px 32px 80px;
  text-align: center;
  background: var(--lpm-ivory);
}

.lume-paris-mood-masthead-inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.lume-paris-mood-sun-mark {
  width: 56px;
  height: 56px;
  display: block;
}

.lume-paris-mood-eyebrow {
  font-family: var(--lpm-font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--lpm-bronze-deep);
  margin: 0;
}

.lume-paris-mood-eyebrow .lume-paris-mood-dot {
  padding: 0 8px;
}

.lume-paris-mood-masthead-title {
  font-family: var(--lpm-font-display);
  font-weight: 500;
  font-size: clamp(44px, 5.6vw, 68px);
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--lpm-bronze-deep);
  margin: 0;
  text-wrap: balance;
}

.lume-paris-mood-masthead-sub {
  font-family: var(--lpm-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.5;
  color: var(--lpm-bronze-mid);
  margin: 0;
  max-width: 540px;
  text-wrap: balance;
}

.lume-paris-mood-rule {
  width: 70px;
  height: 1px;
  background: rgba(140, 89, 52, 0.45);
  border: 0;
  margin: 6px 0;
}

.lume-paris-mood-confidential {
  font-family: var(--lpm-font-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--lpm-bronze-deep);
  margin: 12px 0 0;
}

.lume-paris-mood-confidential .lume-paris-mood-dot {
  padding: 0 8px;
}

/* ---------- Opening note ---------- */
.lume-paris-mood-opening {
  padding: 32px 32px 96px;
  background: var(--lpm-ivory);
}

.lume-paris-mood-opening-inner {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}

.lume-paris-mood-opening-inner p {
  font-family: var(--lpm-font-body);
  font-size: 17px;
  line-height: 1.75;
  color: var(--lpm-bronze-mid);
  margin: 0 0 22px;
  text-wrap: pretty;
}

.lume-paris-mood-opening-inner p:last-of-type {
  margin-bottom: 36px;
}

.lume-paris-mood-ornament {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin: 8px 0;
}

.lume-paris-mood-ornament-dot {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--lpm-foil-copper);
  opacity: 0.85;
}

.lume-paris-mood-ornament-line {
  width: 48px;
  height: 1px;
  background: rgba(140, 89, 52, 0.35);
}

/* ---------- Numbered section header ---------- */
.lume-paris-mood-section-head {
  text-align: center;
  padding: 96px 32px 56px;
}

.lume-paris-mood-section-head .lume-paris-mood-roman {
  display: block;
}

/* ---------- Image grids ---------- */
.lume-paris-mood-image-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin: 0 auto 56px;
  max-width: 1080px;
  padding: 0 32px;
}

.lume-paris-mood-image-grid--single {
  grid-template-columns: 1fr;
}

.lume-paris-mood-ref-image {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lume-paris-mood-frame {
  position: relative;
  background: var(--lpm-frosted-glass);
  border: 1px solid var(--lpm-foil-matt-gold);
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow:
    0 18px 50px rgba(184, 112, 58, 0.10),
    0 1px 2px rgba(140, 89, 52, 0.05);
}

.lume-paris-mood-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lume-paris-mood-ref-image--wide .lume-paris-mood-frame {
  aspect-ratio: 3 / 2;
}

.lume-paris-mood-caption {
  font-family: var(--lpm-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--lpm-bronze-mid);
  text-align: center;
  margin: 0 auto;
  max-width: 38ch;
  text-wrap: balance;
}

/* ---------- Bronze-accented light-notes block ---------- */
.lume-paris-mood-notes-block {
  max-width: 720px;
  margin: 8px auto 56px;
  padding: 40px 48px;
  background: var(--lpm-pearl-beige);
  border: 1px solid var(--lpm-foil-matt-gold);
  border-radius: 8px;
  box-shadow: 0 18px 60px rgba(184, 112, 58, 0.08);
}

.lume-paris-mood-notes-eyebrow {
  font-family: var(--lpm-font-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--lpm-foil-copper);
  margin: 0 0 18px;
  text-align: center;
}

.lume-paris-mood-notes-line {
  width: 36px;
  height: 1px;
  background: var(--lpm-foil-matt-gold);
  border: 0;
  margin: 0 auto 22px;
}

.lume-paris-mood-notes-block p {
  font-family: var(--lpm-font-body);
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--lpm-bronze-deep);
  margin: 0 0 16px;
  text-wrap: pretty;
}

.lume-paris-mood-notes-block p:last-child {
  margin-bottom: 0;
}

/* ---------- Pull quote ---------- */
.lume-paris-mood-pull-quote {
  padding: 120px 32px;
  text-align: center;
  background: var(--lpm-ivory);
}

.lume-paris-mood-pull-quote-inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.lume-paris-mood-q-mark {
  width: 28px;
  height: 28px;
  color: var(--lpm-foil-copper);
  opacity: 0.7;
}

.lume-paris-mood-pull-quote blockquote {
  font-family: var(--lpm-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 36px);
  line-height: 1.35;
  letter-spacing: 0.005em;
  color: var(--lpm-bronze-deep);
  margin: 0;
  max-width: 720px;
  text-wrap: balance;
}

.lume-paris-mood-pull-quote cite {
  font-family: var(--lpm-font-body);
  font-style: normal;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--lpm-bronze-deep);
}

/* ---------- Wardrobe two-column ---------- */
.lume-paris-mood-wardrobe-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  max-width: 1000px;
  margin: 0 auto 48px;
  padding: 0 32px;
}

.lume-paris-mood-wardrobe-col {
  border-top: 1px solid rgba(140, 89, 52, 0.25);
  padding-top: 28px;
}

.lume-paris-mood-wardrobe-col h4 {
  font-family: var(--lpm-font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--lpm-bronze-deep);
  margin: 0 0 22px;
  font-style: normal;
}

.lume-paris-mood-wardrobe-col-dot {
  opacity: 0.5;
  font-weight: 400;
  padding: 0 4px;
}

.lume-paris-mood-wardrobe-col p {
  font-family: var(--lpm-font-body);
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--lpm-bronze-mid);
  margin: 0 0 16px;
  text-wrap: pretty;
}

.lume-paris-mood-wardrobe-col p:last-child {
  margin-bottom: 0;
}

/* ---------- Closing ---------- */
.lume-paris-mood-closing {
  padding: 120px 32px 80px;
  text-align: center;
  background: var(--lpm-ivory);
}

.lume-paris-mood-closing-inner {
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.lume-paris-mood-closing-rule {
  width: 90px;
  height: 1px;
  background: rgba(140, 89, 52, 0.4);
  border: 0;
  margin: 0 0 8px;
}

.lume-paris-mood-closing-quote {
  font-family: var(--lpm-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.45;
  color: var(--lpm-bronze-deep);
  margin: 0;
  max-width: 580px;
  text-wrap: balance;
}

.lume-paris-mood-closing-sign {
  font-family: var(--lpm-font-display);
  font-weight: 500;
  font-size: 28px;
  color: var(--lpm-bronze-deep);
  margin: 8px 0 0;
  letter-spacing: 0.02em;
}

/* ---------- Footer ---------- */
.lume-paris-mood-footer-bar {
  background: var(--lpm-ivory);
  padding: 32px;
  text-align: center;
  border-top: 1px solid var(--lpm-rule-soft);
}

.lume-paris-mood-footer-bar p {
  font-family: var(--lpm-font-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--lpm-bronze-deep);
  margin: 0;
}

.lume-paris-mood-footer-bar .lume-paris-mood-dot {
  padding: 0 8px;
}

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  .lume-paris-mood-masthead {
    padding: 96px 24px 56px;
  }

  .lume-paris-mood-opening {
    padding: 24px 24px 72px;
  }

  .lume-paris-mood-section-head {
    padding: 72px 24px 40px;
  }

  .lume-paris-mood-image-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 0 24px;
  }

  .lume-paris-mood-wardrobe-cols {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 0 24px;
  }

  .lume-paris-mood-notes-block {
    padding: 32px 28px;
    margin: 8px 24px 56px;
  }

  .lume-paris-mood-pull-quote {
    padding: 80px 24px;
  }

  .lume-paris-mood-closing {
    padding: 88px 24px 64px;
  }

  .lume-paris-mood-prose {
    padding: 0 24px;
  }
}

/* ============================================================
   END PARIS MOOD NOTE. SESSION 016.
   ============================================================ */


/* ============================================================
   LUMÉ AMANI. S037e 4.3. Mobile card scroller.
   Behaviour is Dawn's slider-component from global.js. Only the
   presentation lives here, because Dawn's grid--peek widths are written
   for Dawn's grid__item and these are bespoke card grids. Desktop is
   untouched: five across, as it already was. A numeric counter is used
   rather than dot indicators, per the S037e evidence constraint.
   ============================================================ */

.lume-card-slider { display: block; }
.lume-card-slider__controls { display: none; }

@media (max-width: 749px) {
  .lume-card-slider__track.cc-product-grid,
  .lume-card-slider__track.cycle-product-grid {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: 16px;
    padding: 0 16px 8px;
    margin: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .lume-card-slider__track.cc-product-grid::-webkit-scrollbar,
  .lume-card-slider__track.cycle-product-grid::-webkit-scrollbar { display: none; }

  /* 66% shows one card plus half of the next, so the row reads as scrollable */
  .lume-card-slider__track > .cc-card,
  .lume-card-slider__track > .cycle-card {
    flex: 0 0 66%;
    width: 66% !important;
    max-width: 66% !important;
    scroll-snap-align: start;
    margin: 0;
  }

  .lume-card-slider__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
  }
  .lume-card-slider__controls .slider-counter {
    font-family: var(--lume-font-body, "Lora", Georgia, serif);
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--lume-bronze-deep, #8C5934);
    min-width: 48px;
    text-align: center;
  }
  .lume-card-slider__controls .slider-button {
    background: transparent;
    border: 0;
    color: var(--lume-bronze-deep, #8C5934);
    padding: 8px;
    cursor: pointer;
  }
  .lume-card-slider__controls .slider-button[disabled] { opacity: 0.3; cursor: default; }
  .lume-card-slider__controls .slider-button .svg-wrapper { width: 14px; height: 14px; display: block; }
  .lume-card-slider__controls .slider-button--prev .svg-wrapper { transform: rotate(90deg); }
  .lume-card-slider__controls .slider-button--next .svg-wrapper { transform: rotate(-90deg); }
}

@media (prefers-reduced-motion: reduce) {
  .lume-card-slider__track.cc-product-grid,
  .lume-card-slider__track.cycle-product-grid { scroll-behavior: auto; }
}


/* ============================================================
   LUMÉ AMANI. S037e. Fault 6 and Fault 7.
   ============================================================ */

/* Fault 6. The recommendation card image sat in a 1 by 1 container with
   object-fit contain, so a 4:5 image letterboxed and the Pearl Beige ground
   showed as bars above and below. The card rectangle is now 4:5, matching the
   gallery and the other three card surfaces, and the image covers it. */
.lume-recommendations__photo {
  aspect-ratio: 4 / 5;
  background: none;
  padding: 0;
  overflow: hidden;
  display: block;
  width: 100%;
}
.lume-recommendations__photo img,
.lume-recommendations__photo > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Same treatment on the other three card surfaces. aspect-ratio governs the
   box, the image covers it, and no ground shows through. */
.lume-card-photo {
  background: none;
  padding: 0;
}
.lume-card-photo > img,
.lume-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* The placeholder still needs a visible ground, but only when it is showing. */
.lume-card-photo:not(:has(img)) {
  background: #E8E0D5;
}

/* Fault 7. Dawn sizes the lightbox image by width alone, so at a uniform 4:5
   a 1685 wide image resolved to 2106 tall inside a 1080 tall viewport and
   opened roughly twice as tall as the screen. The 4:5 normalisation exposed
   this rather than causing it. The image now opens fit to viewport. Zoom is
   still available from there, because the modal keeps overflow auto and the
   browser's own zoom is unaffected. */
.product-media-modal__content img,
.product-media-modal__content .media img {
  max-height: calc(100vh - 4rem);
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   LUMÉ AMANI. S037e. LIGHTBOX, ONE IMAGE AT A TIME
   Option A. The media list is a horizontal snapping track wrapped in Dawn's
   slider-component, each slide exactly one track width.

   This lays the items out horizontally, which is the same axis as the fault
   removed just above. The difference is the constraint. There, an unbounded
   flex row held items sized to 100 per cent of the container and produced
   3143px of overflow with three neighbours on screen. Here each slide is
   flex 0 0 100 per cent of the track with scroll-snap-align, so exactly one
   slide occupies the viewport at rest.
   ============================================================ */

/* Dawn hides every non active child of the content element below 750px and
   restores them above it. Both rules are now wrong for this markup, because the
   direct child is slider-component, which never carries the active class, so
   the whole slider would be hidden. The type and class together give 0-2-1,
   which beats Dawn's 0-2-0 regardless of stylesheet order. No !important. */
.product-media-modal__content > slider-component.product-media-modal__slider {
  display: block;
  position: relative;
  width: 100%;
}

.product-media-modal__list {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  /* S037e. No scroll-behavior here, deliberately. Dawn's setSlidePosition calls
     scrollTo with no behavior argument, so it inherits whatever this element
     declares. With smooth, that animation contended with mandatory snapping and
     the track stranded between snap points: a next click settled at 30 and a
     scrollLeft 0 assignment settled at 2520, neither a multiple of the 1700
     slide width. Because the image is 832px inside a 1700px slide, a stranded
     position puts roughly 868px of empty gutter in the middle of the screen,
     which is the blank frame the Founder reported. Instant scrolling lands
     exactly on the requested offset and renders no intermediate frame at all.
     Do not reintroduce smooth here. */
  scrollbar-width: none;
}

.product-media-modal__list::-webkit-scrollbar {
  display: none;
}

.product-media-modal__slide {
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  scroll-snap-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Arrows sit over the image at the sides and the counter at the foot. Dawn's
   .slider-buttons centres its children and sits below the track, which is off
   screen here because the content fills the viewport. Each control is therefore
   positioned individually rather than relying on that flex row. Two classes
   give 0-2-0, which beats Dawn's single class rules without !important. */
.product-media-modal__slider .product-media-modal__buttons {
  position: static;
  display: block;
  pointer-events: none;
}

.product-media-modal__slider .slider-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: auto;
  background: rgba(26, 21, 16, 0.55);
  border-radius: 50%;
  width: 4.4rem;
  height: 4.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.product-media-modal__slider .slider-button--prev {
  left: 2rem;
}

.product-media-modal__slider .slider-button--next {
  right: 2rem;
}

.product-media-modal__slider .slider-button:hover {
  background: rgba(26, 21, 16, 0.78);
}

.product-media-modal__slider .slider-button .icon,
.product-media-modal__slider .slider-button svg {
  color: #f4f1ec;
}

.product-media-modal__slider .slider-button[disabled] {
  opacity: 0.35;
}

.product-media-modal__slider .product-media-modal__counter {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: auto;
  color: #f4f1ec;
  background: rgba(26, 21, 16, 0.55);
  border-radius: 2rem;
  padding: 0.4rem 1.2rem;
  z-index: 2;
}

@media screen and (max-width: 749px) {
  .product-media-modal__slider .slider-button--prev {
    left: 0.6rem;
  }

  .product-media-modal__slider .slider-button--next {
    right: 0.6rem;
  }
}

/* S037e. There was a display flex block here with align-items and
   justify-content centre. It is removed, not moved. Dawn renders every media
   item in this one container and, at 750px and up, un-hides all of them into a
   vertical column that the container scrolls. flex-direction defaults to row,
   so those three declarations turned that column into a horizontal strip:
   scrollWidth 3143 against clientWidth 1905, three images visible at once, the
   third bleeding off the right edge. The centring they were meant to provide is
   already handled by the margin-left and margin-right auto on the image above.
   Do not reintroduce them. One image at a time on desktop is a separate change
   that needs its own navigation controls, because this scroll column is
   currently the only route to the other images. */

/* ============================================================
   LUMÉ AMANI. S037g. THE TEXT WRAPS THE GALLERY.

   One continuous column of prose that begins beside the gallery
   and widens to full width where the gallery ends. Not a second
   block placed underneath it.

   Dawn ships the product container as flex, by way of .grid, and
   a float is ignored on a flex child. So the container becomes a
   flow-root, which both contains the floats and lets its children
   float. That is the one structural change.

   The mechanism, and it is worth stating because it is easy to
   undo by accident:

     the gallery floats left
     every block above the prose becomes its own formatting
       context, so it keeps to the channel beside the gallery
       instead of running underneath it
     the prose alone stays in plain flow, because only plain flow
       content wraps around a float. A block that establishes a
       formatting context is rectangular and cannot.

   The description must be last in block_order for this to read
   correctly. If it is moved above the buy buttons, the buttons
   are what widens past the gallery, which is wrong.

   Specificity, not important. Dawn's own rules sit at 0-3-0 and
   load after this file, so a bare class here would lose on
   document order. The product-info type selector takes these to
   0-3-1 and they win outright. This is the S037f lesson applied
   before the fact rather than after it.
   ============================================================ */

.lume-triad {
  font-family: var(--lume-font-body, "Lora", Georgia, serif);
  font-style: italic;
  font-size: 1.5rem;
  letter-spacing: 0.06em;
  color: var(--lume-bronze-deep, #8C5934);
  margin: 0 0 1.2rem;
}

@media screen and (min-width: 990px) {
  product-info .product.grid {
    display: flow-root;
  }

  product-info .product--medium:not(.product--no-media) .product__media-wrapper {
    float: left;
    width: 55%;
    max-width: 55%;
    margin-right: 4rem;
  }

  product-info .product--medium:not(.product--no-media) .product__info-wrapper {
    float: none;
    width: auto;
    max-width: none;
    padding-left: 0;
  }

  /* Dawn caps this at 60rem, which held every child inside the
     gallery's own column and pushed the lot below it. */
  product-info .product__info-container {
    width: auto;
    max-width: none;
  }

  product-info .product__info-container > *:not(.product__description) {
    display: flow-root;
  }

  product-info .product__info-container > .product__description {
    display: block;
  }

  /* The wrap point is fixed by position, not left to flow.

     Without these two rules it lands wherever the prose happens to
     reach the gallery's bottom edge, which is a different place in
     every product, and a paragraph widens partway through itself.

     Every child of the description becomes its own formatting
     context, so it is rectangular and keeps the channel width for
     its whole height. It may extend below the gallery, which is
     correct, but it can no longer widen at the edge. Below the
     gallery the same rule costs nothing, because there is no float
     left to shrink against.

     The first blockquote clears the gallery, so it is always the
     first element at the extended width. It sits flush with the
     gallery's bottom edge whenever the prose above it is shorter
     than the gallery, and directly below that prose when it is
     not. Those are the only two possibilities. It cannot be forced
     flush in the second case without overlapping the paragraph
     above it. */
  product-info .product__description > * {
    display: flow-root;
  }

  product-info .product__description > blockquote:first-of-type {
    clear: left;
  }
}

/* ============================================================
   LUMÉ AMANI. S037g. MOBILE ORDER, RESTORED.

   The desktop wrap requires the description last in block_order,
   or the buy buttons are what widens past the gallery. Block
   order lives in the template, so unlike every rule above it is
   not guarded by a media query, and it moved the description on
   mobile from above Add to Cart to below the Share link.

   A flex column and one order value put it back. Everything
   keeps order 0 except the buy buttons, the shipping note and
   the share control, so the description falls into its original
   slot immediately after the quantity.

   The four rules that follow are not decoration. A flex item
   establishes its own formatting context, so child margins that
   used to collapse out of it are now contained inside it, which
   made the variant picker 12px taller and the buy block 50px
   taller. The two margins that were escaping are zeroed, and the
   container gaps live actually renders, 25px around the
   description and above the shipping note, are restored
   explicitly because flex does not collapse them either.
   ============================================================ */

@media screen and (max-width: 989px) {
  product-info .product__info-container {
    display: flex;
    flex-direction: column;
  }

  product-info .product__info-container > * + * {
    margin-top: 1.5rem;
    margin-bottom: 0;
  }

  product-info .product__info-container > variant-selects > fieldset {
    margin-bottom: 0;
  }

  product-info .product__info-container > div:has(.product-form) > .product-form {
    margin: 0;
  }

  product-info .product__info-container > .product__description {
    margin-top: 2.5rem;
    margin-bottom: 0;
  }

  product-info .product__info-container > div:has(.product-form),
  product-info .product__info-container > p.lume-product-note:last-of-type {
    margin-top: 2.5rem;
  }

  product-info .product__info-container > div:has(.product-form),
  product-info .product__info-container > p.lume-product-note:last-of-type,
  product-info .product__info-container > share-button {
    order: 1;
  }
}