/** Shopify CDN: Minification failed

Line 4408:0 All "@import" rules must come first

**/
: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);
  }
}

/* =============================================================
   SECOVA — Design tokens and overrides (Phase 1)
   Appended after Dawn base.css. Token naming:
     --secova-*  for new tokens we own
     --color-*   for Dawn-compatible colors (shared namespace)
   ============================================================= */

:root {
  /* Brand palette — v2 mockup: warmer cream, richer beige, saturated lavender
     for header/why/footer band, softer cocoa, restrained gold. */
  --secova-cream: #F3EEE7;
  --secova-beige: #E8DED0;
  --secova-cocoa: #2B241F;
  --secova-lavender: #A192B5;
  --secova-gold: #C8AE7A;

  /* Accents beyond scheme colors */
  --color-accent: var(--secova-gold);
  --color-accent-hover: #B8985D;
  --color-lavender: var(--secova-lavender);
  --color-cream: var(--secova-cream);
  --color-beige: var(--secova-beige);
  --color-cocoa: var(--secova-cocoa);
  --color-sale: #B85A4C;
  --color-border-subtle: #E8DFD2;
  --color-border-strong: var(--secova-cocoa);

  /* Spacing scale (the MD spec) */
  --secova-space-1: 4px;
  --secova-space-2: 8px;
  --secova-space-3: 12px;
  --secova-space-4: 16px;
  --secova-space-5: 24px;
  --secova-space-6: 32px;
  --secova-space-7: 48px;
  --secova-space-8: 64px;
  --secova-space-9: 80px;
  --secova-space-10: 120px;

  /* Type scale — desktop sizes */
  --secova-text-display: 6.4rem;
  --secova-text-h1: 4.4rem;
  --secova-text-h2: 3.2rem;
  --secova-text-h3: 2.2rem;
  --secova-text-h4: 1.6rem;
  --secova-text-body: 1.5rem;
  --secova-text-small: 1.3rem;
  --secova-text-micro: 1.2rem;
  --secova-text-eyebrow: 1.1rem;
  --secova-text-nav: 1.3rem;

  /* Container + layout */
  --secova-container-max: 1440px;
  --secova-section-py-desktop: var(--secova-space-9);
  --secova-section-py-mobile: var(--secova-space-7);
  --secova-section-px-desktop: var(--secova-space-6);
  --secova-section-px-mobile: var(--secova-space-4);
}

/* Arabic typeface fallback — Manrope/Inter do not ship Arabic glyphs.
   Use well-supported Arabic system / Google fonts. */
html[lang="ar"] {
  font-family: "Noto Sans Arabic", "Cairo", "Tajawal", "Helvetica Neue", Arial, sans-serif;
}
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] h6 {
  font-family: "Cairo", "Noto Sans Arabic", "Tajawal", "Helvetica Neue", Arial, sans-serif;
}

/* Typography overrides — tighter display sizing per MD spec */
h1,
.h1 {
  font-size: var(--secova-text-h1);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
h2,
.h2 {
  font-size: var(--secova-text-h2);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
h3,
.h3 {
  font-size: var(--secova-text-h3);
  line-height: 1.25;
}
h4,
.h4 {
  font-size: var(--secova-text-h4);
  line-height: 1.3;
}
@media screen and (max-width: 749px) {
  h1, .h1 { font-size: 3.2rem; }
  h2, .h2 { font-size: 2.6rem; }
  h3, .h3 { font-size: 2rem; }
}

/* Utility classes */
.eyebrow {
  font-family: var(--font-heading-family);
  font-weight: 600;
  font-size: var(--secova-text-eyebrow);
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(var(--color-foreground));
}

.text-muted {
  color: rgba(var(--color-foreground), 0.6);
}

.text-accent {
  color: var(--color-accent);
}

.text-sale {
  color: var(--color-sale);
}

.secova-container {
  max-width: var(--secova-container-max);
  margin-inline: auto;
  padding-inline: var(--secova-section-px-mobile);
}
@media screen and (min-width: 750px) {
  .secova-container {
    padding-inline: var(--secova-section-px-desktop);
  }
}

.secova-section {
  padding-block: var(--secova-section-py-mobile);
}
@media screen and (min-width: 750px) {
  .secova-section {
    padding-block: var(--secova-section-py-desktop);
  }
}

/* Button overrides per MD §1.5.
   Dawn already gives us .button; we tighten the typography, spacing,
   and letter-spacing to match Shella-style confidence. */
.button,
.shopify-payment-button__button--unbranded {
  font-family: var(--font-heading-family);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  padding: 1.4rem 2.8rem;
  min-height: auto;
}
.button--small {
  padding: 1rem 2rem;
  font-size: 1.2rem;
}
.button--secondary {
  border-width: 1.5px;
}
.button--tertiary {
  text-decoration: underline;
  text-underline-offset: 4px;
  background: transparent;
  color: rgb(var(--color-foreground));
  padding-inline: 0;
}
.button--tertiary:hover {
  color: var(--color-accent);
}

/* Subtle hover lift on cards — MD §1.4 */
@media (hover: hover) {
  .card-wrapper:hover .card:not(.ratio) {
    transform: translateY(-2px);
    transition: transform 200ms ease;
  }
}


/* =============================================================
   SECOVA — Phase 2: Header
   ============================================================= */

/* Text-fallback wordmark — refined weight + tracking, premium minimal */
.secova-logo--text.secova-logo--header,
.header__heading-link .secova-logo--text {
  font-family: var(--font-heading-family);
  font-weight: 500;
  font-size: 1.9rem;
  letter-spacing: 0.18em;
  color: rgb(var(--color-foreground));
  text-transform: uppercase;
}

/* Header hairline */
.section-header .header {
  border-block-end: 1px solid var(--color-border-subtle);
}

/* Thinner header — reduce vertical padding to ~64px desktop / ~56px mobile */
.section-header .header {
  padding-block: 1.4rem;
}
@media screen and (min-width: 990px) {
  .section-header .header {
    padding-block: 1.8rem;
  }
}

/* Nav link typography — small, elegant, slightly tracked uppercase
   (Parachute / Aesop style — restrained and editorial) */
.header__menu-item,
.header__menu-item .header__active-menu-item {
  font-family: var(--font-heading-family);
  font-size: 1.2rem;
  font-weight: 450;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-block: 0.6rem;
}

/* Generous breathing room between nav items */
.header__inline-menu .list-menu--inline {
  gap: var(--secova-space-6);
}

/* Subtle underline on hover — luxury restraint */
.header__menu-item:hover,
.header__menu-item:focus-visible {
  text-decoration-thickness: 0.5px;
  text-underline-offset: 6px;
}

/* Announcement bar — removed entirely for SECOVA's luxury minimal header.
   We hide the section wrapper rather than removing the section file, so
   merchants can re-enable later via theme editor if needed. Targets both
   the standalone section class and any utility-bar fallback. */
.announcement-bar-section,
.utility-bar {
  display: none !important;
}

/* Header icons — slightly smaller, more refined */
.header__icon .icon,
.header__icon-wrapper .icon {
  width: 1.8rem;
  height: 1.8rem;
}
.header__icon {
  width: 3.6rem;
  height: 3.6rem;
}

/* Cart count bubble — smaller, soft gold, restrained */
.header__icon .cart-count-bubble {
  background: var(--color-accent);
  color: rgb(var(--color-background));
  min-width: 1.6rem;
  min-height: 1.6rem;
  font-size: 1rem;
  font-weight: 500;
}

/* Icon row — tighter, more deliberate spacing */
.header__icons {
  column-gap: var(--secova-space-2);
}

/* Logo block: keep tight vertical alignment */
.header__heading,
.header__heading-link {
  padding-block: 0;
}


/* =============================================================
   SECOVA — Phase 3: Hero / Image banner
   Dawn's flex-based banner content alignment is already RTL-aware
   (flex-start/flex-end mirror with dir). We only bold the typography.
   ============================================================= */

.banner__heading {
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

/* Match MD spec: eyebrow above heading */
.banner__content .eyebrow {
  margin-block-end: var(--secova-space-3);
}

.banner__text {
  font-size: 1.6rem;
  line-height: 1.6;
  max-width: 56rem;
  margin-inline: auto;
}

/* Desktop subheading copy wraps tighter */
@media screen and (min-width: 750px) {
  .banner__text {
    margin-inline: 0;
  }
}

/* Button row — logical spacing so buttons stay adjacent in RTL */
.banner__buttons {
  column-gap: var(--secova-space-3);
  row-gap: var(--secova-space-3);
}


/* =============================================================
   SECOVA — Phase 4: Product cards
   Dawn's card-product snippet already supports secondary-image hover,
   quick-add, and badge positioning. We polish typography + colors.
   ============================================================= */

/* Image wrapper — warm beige plinth, gentle rounded corners */
.card--standard .card__media .media,
.card--standard .card__media .media--transparent,
.card--card .card__media .media {
  background: var(--secova-card-media-bg, var(--secova-beige));
  border-radius: var(--secova-radius-soft);
}

/* Larger product image area on grid cards — let the photography breathe */
.card-wrapper .card__inner .card__content {
  padding-block-start: var(--secova-space-4);
}
.card-wrapper .card__inner {
  border: none;
  box-shadow: none;
}

/* Refined product title — elegant serif-friendly sans, sentence case */
.card__heading,
.card-information .card__heading {
  font-family: var(--font-heading-family);
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
}
.card__heading a,
.card-information .card__heading a {
  color: rgb(var(--color-foreground));
}

/* Vendor — quiet uppercase tag */
.card-information .caption-with-letter-spacing {
  font-family: var(--font-heading-family);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--color-foreground), 0.5);
}

/* Card info column — slightly tighter rhythm */
.card-information {
  row-gap: 0.4rem;
}

/* Price — refined, regular weight, warm tone */
.price .price-item {
  font-family: var(--font-heading-family);
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(var(--color-foreground), 0.75);
}
.price .price-item--sale,
.price .price-item--last {
  color: var(--color-sale);
}
.price .price-item--regular {
  color: rgba(var(--color-foreground), 0.4);
}

/* Badge — soft, lowercase, narrow */
.badge {
  font-family: var(--font-heading-family);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 0;
  padding: 0.35rem 0.9rem;
  border-width: 0;
}

/* Soft image transitions — slower, more editorial */
.card__media .media img {
  transition: opacity 500ms ease, transform 800ms ease;
}

/* Subtle zoom on hover — luxury feel without animation theatrics */
@media (hover: hover) {
  .card-wrapper:hover .card__media .media img.motion-reduce {
    transform: scale(1.03);
  }
  .card-wrapper:hover .card__media .media > img + img {
    opacity: 1;
  }
}

/* Quick-add button — reveal on hover, fully restrained */
@media (hover: hover) {
  .card-wrapper .quick-add {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 220ms ease, transform 220ms ease;
  }
  .card-wrapper:hover .quick-add,
  .card-wrapper:focus-within .quick-add {
    opacity: 1;
    transform: translateY(0);
  }
  .card-wrapper .quick-add .button {
    font-size: 1.15rem;
    letter-spacing: 0.12em;
    padding-block: 1.1rem;
    text-transform: uppercase;
  }
}

/* No card lift — luxury photography sits still */
.card-wrapper {
  transition: none;
}

/* Subtle title hover — luxury restraint, no underline noise */
@media (hover: hover) {
  .card__heading a,
  .card-information .card__heading a {
    transition: color 200ms ease;
  }
  .card-wrapper:hover .card__heading a {
    color: inherit;
  }
}

/* Dawn onboarding placeholder products — make them feel branded.
   Shown until the merchant assigns a real collection in the editor. */
.card-wrapper .card__media .placeholder-svg {
  fill: rgba(43, 37, 32, 0.18);
  width: 60%;
  height: 60%;
  margin: auto;
}
.card-wrapper .card__media .placeholder {
  display: grid;
  place-items: center;
  background: var(--secova-beige);
}


/* =============================================================
   SECOVA — Phase 5: Featured collection
   ============================================================= */

/* Centered serif title with "View all" link below — editorial luxury */
.collection .title-wrapper-with-link {
  margin-block-end: var(--secova-space-7);
  padding-inline: 0;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--secova-space-3);
}
@media screen and (min-width: 990px) {
  .collection .title-wrapper-with-link {
    margin-block-end: var(--secova-space-8);
  }
}
.collection .title {
  font-family: var(--font-display-family);
  font-size: 3rem;
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.1;
  text-align: center;
}
@media screen and (min-width: 990px) {
  .collection .title {
    font-size: 4rem;
  }
}
.collection .title-wrapper-with-link .link {
  font-family: var(--font-heading-family);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 6px;
  color: rgba(var(--color-foreground), 0.7);
  white-space: nowrap;
}
.collection .title-wrapper-with-link .link:hover {
  color: rgb(var(--color-foreground));
}

/* Grid spacing — 16px horizontal, 48px vertical per MD spec
   (Dawn has --grid-desktop-horizontal/vertical-spacing driven by
   spacing_grid_* settings, already set in settings_data.json) */

/* Carousel mode: hide scrollbar on mobile, smooth snap */
.slider--tablet-up.contains-card,
.slider.contains-card {
  scroll-padding-inline: var(--secova-space-6);
}


/* =============================================================
   SECOVA — Phase 7: Image with text
   Dawn's image-with-text already uses semantic `layout: text_first|image_first`
   which mirrors correctly in RTL via flex order. We polish typography.
   ============================================================= */

.image-with-text__heading {
  font-family: var(--font-heading-family);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.image-with-text__content {
  padding-block: var(--secova-space-6);
  padding-inline: var(--secova-space-6);
}
@media screen and (min-width: 750px) {
  .image-with-text__content {
    padding-block: var(--secova-space-8);
    padding-inline: var(--secova-space-8);
  }
}

.image-with-text__text {
  font-size: var(--secova-text-body);
  line-height: 1.6;
}


/* =============================================================
   SECOVA — Phase 8: Footer
   Dawn footer is highly customizable via blocks. We polish typography,
   newsletter form radius continuity, and column heading style.
   ============================================================= */

/* Footer container — generous on desktop, restrained on mobile */
.footer {
  padding-block-start: var(--secova-space-7);
  padding-block-end: var(--secova-space-5);
}
@media screen and (min-width: 990px) {
  .footer {
    padding-block-start: var(--secova-space-10);
    padding-block-end: var(--secova-space-7);
  }
}

/* Logo/wordmark + tagline column reads larger and italic-serif on cocoa */
.footer .footer__content-top {
  border-block-end: 1px solid rgba(255, 255, 255, 0.08);
  padding-block-end: var(--secova-space-7);
  margin-block-end: var(--secova-space-6);
}

/* Wordmark in the footer */
.footer .secova-logo--text {
  font-family: var(--font-heading-family);
  font-weight: 500;
  font-size: 2.2rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Newsletter heading — serif, restrained */
.footer-block--newsletter .footer-block__heading {
  font-family: var(--font-display-family);
  font-size: 2.4rem;
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.15;
  margin-block-end: var(--secova-space-3);
  text-transform: none;
}

/* Newsletter subhead */
.footer-block--newsletter .footer-block__newsletter {
  font-size: 1.4rem;
  line-height: 1.65;
  max-width: 36rem;
  margin-inline: 0;
  color: rgba(var(--color-foreground), 0.7);
}

/* Newsletter form on dark background */
.footer-block__newsletter .newsletter-form__field-wrapper .field__input,
.footer-block__newsletter .field__input {
  border-start-start-radius: 2px;
  border-end-start-radius: 2px;
  border-start-end-radius: 0;
  border-end-end-radius: 0;
  background: transparent;
  border-color: rgba(var(--color-foreground), 0.3);
  color: rgb(var(--color-foreground));
  font-size: 1.4rem;
}
.footer-block__newsletter .field__input::placeholder {
  color: rgba(var(--color-foreground), 0.5);
}
.footer-block__newsletter .newsletter-form__button {
  border-start-end-radius: 2px;
  border-end-end-radius: 2px;
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

/* Footer column headings — small caps eyebrow */
.footer-block__heading {
  font-family: var(--font-heading-family);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgb(var(--color-foreground));
  margin-block-end: var(--secova-space-4);
  opacity: 0.85;
}

/* Footer link list — quiet, generous line-height, hover underline */
.footer-block__details-content .list-menu--inline,
.footer-block__details-content .list-menu {
  line-height: 2.2;
}
.footer-block__details-content a {
  font-family: var(--font-body-family);
  font-size: 1.35rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: rgba(var(--color-foreground), 0.75);
  text-decoration: none;
  transition: color 200ms ease;
}
.footer-block__details-content a:hover {
  color: rgb(var(--color-foreground));
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Social icons row — slimmer, more refined */
.footer .social-icons li {
  margin-inline: 0;
  margin-inline-end: var(--secova-space-3);
}
.footer .social-icons a {
  color: rgba(var(--color-foreground), 0.7);
  transition: color 200ms ease;
}
.footer .social-icons a:hover {
  color: rgb(var(--color-foreground));
}
.footer .social-icons svg {
  width: 1.8rem;
  height: 1.8rem;
}

/* Bottom row — hairline divider, fine print and payment icons quieter */
.footer__content-bottom-wrapper {
  border-block-start: 0;
  padding-block-start: var(--secova-space-5);
}
.copyright__content {
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  opacity: 0.6;
}
.footer .payment-icon {
  filter: brightness(0) saturate(100%) invert(96%) sepia(7%) saturate(170%) hue-rotate(335deg) brightness(106%) contrast(96%);
  opacity: 0.65;
}


/* =============================================================
   SECOVA — Phase 9: Product detail page
   Dawn's main-product is highly composable via block settings. We polish
   typography, sticky sidebar, pill variants, accordion rhythm.
   ============================================================= */

/* Product title */
.product__title h1,
.product__title > h1 {
  font-family: var(--font-heading-family);
  font-size: var(--secova-text-h2);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-block-end: var(--secova-space-3);
}

/* Vendor as eyebrow */
.product__text,
.product-vendor {
  font-family: var(--font-heading-family);
  font-size: var(--secova-text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(var(--color-foreground), 0.55);
  margin-block-end: var(--secova-space-3);
}

/* Price */
.product .price .price__regular,
.product .price .price__sale {
  font-size: 2.4rem;
  font-weight: 500;
}
.product .price .price-item--sale {
  color: var(--color-sale);
}

/* Sticky details column on desktop */
@media screen and (min-width: 990px) {
  .product__info-wrapper {
    position: sticky;
    inset-block-start: 9.6rem;
    align-self: start;
  }
}

/* Variant pills — squared, bold */
.product-form__input .variant-pills .variant-pill {
  border-radius: 2px;
  border-width: 1.5px;
  font-family: var(--font-heading-family);
  font-weight: 500;
  font-size: 1.3rem;
  letter-spacing: 0.02em;
}
.product-form__input .variant-pills .variant-pill--checked {
  background: rgb(var(--color-foreground));
  color: rgb(var(--color-background));
  border-color: rgb(var(--color-foreground));
}

/* Add to cart button — larger, stronger */
.product-form__buttons .product-form__submit {
  font-size: 1.5rem;
  padding-block: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Accordion rhythm */
.product__accordion summary,
.product .accordion summary {
  font-family: var(--font-heading-family);
  font-size: var(--secova-text-h4);
  font-weight: 600;
  padding-block: var(--secova-space-4);
  border-block-end: 1px solid var(--color-border-subtle);
}
.product__accordion summary .icon-caret {
  margin-inline-start: auto;
}

/* Gallery thumbnails — square, bolder selection */
.thumbnail {
  border-radius: 0;
}
.thumbnail[aria-current='true'] {
  border-color: rgb(var(--color-foreground));
  border-width: 1.5px;
}

/* Related products heading (You may also like) */
.product-recommendations h2 {
  font-size: var(--secova-text-h2);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-block-end: var(--secova-space-6);
}


/* =============================================================
   SECOVA — Phase 10: Luxury display typography + soft surfaces
   Adds the Cormorant Garamond serif used by new boutique sections.
   Scoped to .h-serif and SECOVA-prefixed classes — Dawn body type
   (Manrope / Inter) is unchanged.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600&display=swap');

:root {
  --font-display-family: 'Cormorant Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-display-weight: 400;
  --font-display-weight-medium: 500;

  --secova-text-hero-desktop: 6.8rem;
  --secova-text-hero-mobile: 3.8rem;

  --secova-radius-soft: 8px;
  --secova-radius-block: 16px;
  --secova-radius-tile: 12px;

  --secova-shadow-soft: 0 12px 40px rgba(43, 37, 32, 0.06);
}

.h-serif {
  font-family: var(--font-display-family);
  font-weight: var(--font-display-weight);
  letter-spacing: -0.005em;
  line-height: 1.08;
  font-style: normal;
}

.h-serif--medium {
  font-weight: var(--font-display-weight-medium);
}

/* Optional italic accent (used sparingly, e.g. "Luxury") */
.h-serif--italic {
  font-style: italic;
}

/* Soft-rounded block surface used by Why SECOVA + similar */
.secova-block {
  border-radius: var(--secova-radius-block);
}


/* =============================================================
   SECOVA — Phase 11: Global heading typography
   Push every storefront heading to Cormorant Garamond serif so the
   site reads as a luxury brand, not a styled Shopify theme. Buttons,
   nav, captions, and quick-add intentionally stay sans-serif.
   ============================================================= */

h1, h2, h3, h4,
.h0, .h1, .h2, .h3, .h4,
.banner__heading,
.banner__text-wrapper .h1,
.collection .title,
.title-wrapper-with-link .title,
.product__title h1,
.product__title > h1,
.product-recommendations h2,
.image-with-text__heading,
.rich-text__heading,
.multicolumn-list .title,
.collapsible-content__heading,
.card-information .card__heading,
.card-wrapper .card__heading,
.contact__title,
.footer-block--newsletter .footer-block__heading {
  font-family: var(--font-display-family);
  font-weight: var(--font-display-weight);
  letter-spacing: -0.005em;
  line-height: 1.1;
  font-style: normal;
}

/* Italic accent inside any heading — used for words like "Luxury" */
h1 em, h2 em, h3 em, h4 em,
.h0 em, .h1 em, .h2 em, .h3 em, .h4 em,
.banner__heading em,
.product__title em,
.collection .title em {
  font-style: italic;
  font-weight: var(--font-display-weight);
}

/* Body, captions, eyebrows, buttons, nav, quick-add — keep clean sans */
.eyebrow,
.caption,
.caption-with-letter-spacing,
.button,
.shopify-payment-button__button--unbranded,
.header__menu-item,
.footer-block__heading,
.footer-block__details-content a,
.copyright__content,
.quick-add .button,
.price .price-item,
.badge {
  font-family: var(--font-heading-family);
}

/* Body copy explicitly to the body family */
body,
p, li, dd, dt {
  font-family: var(--font-body-family);
}

/* Hero headline sizing now lives in section-secova-hero.css — full-width
   overlay layout owns its own type scale. */

/* Refined italic emphasis inside the hero headline */
.secova-hero__heading em {
  font-style: italic;
  font-weight: 400;
  color: rgb(var(--color-foreground));
}


/* =============================================================
   SECOVA — Phase 12: Boutique product card title
   Push Best Sellers / collection cards into editorial serif feel.
   ============================================================= */

.card-wrapper .card__heading,
.card-information .card__heading {
  font-family: var(--font-display-family);
  font-size: 1.7rem;
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.2;
  text-transform: none;
}
@media screen and (min-width: 990px) {
  .card-wrapper .card__heading,
  .card-information .card__heading {
    font-size: 1.9rem;
  }
}

/* Italic accent for the second line of a multi-line product title */
.card__heading em,
.card-information .card__heading em {
  font-style: italic;
}

/* Price reads boutique — small caps, balanced beside serif title */
.price .price-item {
  font-family: var(--font-heading-family);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}


/* =============================================================
   SECOVA — Phase 13: Editorial rhythm + header/footer/best-sellers polish
   Final pass to dissolve the residual Shopify-template feel.
   - Tighter, refined header nav typography
   - Generous editorial section padding between SECOVA blocks
   - Best Sellers (featured-collection) titles + grid breathing
   - Footer typography refinement on cocoa
   - Trust row premium tightening
   ============================================================= */

/* ----- Header: refined luxury wordmark + nav ----- */

/* Wordmark — slightly tighter tracking, more confident */
.header__heading-link .secova-logo--text,
.secova-logo--text.secova-logo--header {
  font-family: var(--font-display-family);
  font-weight: var(--font-display-weight-medium);
  font-size: 2.6rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  padding-inline-start: 0.32em; /* visual centering when letter-spaced */
}
@media screen and (min-width: 990px) {
  .header__heading-link .secova-logo--text,
  .secova-logo--text.secova-logo--header {
    font-size: 2.8rem;
  }
}

/* Nav links — small, uppercase, letter-spaced, sans */
.header__menu-item,
.header__menu-item .header__active-menu-item,
.header__menu-item span {
  font-family: var(--font-heading-family);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--color-foreground), 0.78);
}
.header__menu-item:hover,
.header__menu-item:hover span {
  color: rgb(var(--color-foreground));
}

/* Nav gap — more breathing, less Shopify-stock */
.header__inline-menu .list-menu--inline {
  column-gap: var(--secova-space-6);
}

/* Header hairline — softer warm-tone border */
.section-header .header {
  border-block-end: 1px solid var(--color-border-subtle);
  padding-block: 1.4rem;
}
@media screen and (min-width: 990px) {
  .section-header .header {
    padding-block: 1.8rem;
  }
}

/* Header icons — refined tap targets, logical gap */
.header__icons {
  column-gap: var(--secova-space-3);
}
.header__icon {
  color: rgba(var(--color-foreground), 0.82);
  transition: color 200ms ease;
}
.header__icon:hover {
  color: rgb(var(--color-foreground));
}

/* Cart bubble — neutral, refined (override Phase 2 gold) */
.header__icon .cart-count-bubble {
  background: rgb(var(--color-foreground));
  color: rgb(var(--color-background));
  font-family: var(--font-heading-family);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
}

/* Announcement bar — slimmer, more luxe */
.utility-bar .announcement-bar__message,
.announcement-bar-slider .announcement-bar__message {
  font-family: var(--font-heading-family);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-block: 1rem;
}

/* ----- Section rhythm — generous editorial spacing ----- */

/* Default for all SECOVA-built sections — more breathing than Dawn baseline */
.section-secova-hero,
.section-secova-benefits,
.section-secova-moments,
.section-secova-why,
.section-secova-testimonials,
.section-secova-trust,
.section-category-tiles {
  padding-block: 0;
}

/* Inside the section, the container handles padding */
.secova-benefits,
.secova-moments,
.secova-testimonials,
.secova-tiles,
.secova-why-wrap {
  padding-block: var(--secova-space-8);
}
@media screen and (min-width: 990px) {
  .secova-benefits,
  .secova-moments,
  .secova-testimonials,
  .secova-tiles,
  .secova-why-wrap {
    padding-block: var(--secova-space-10);
  }
}

/* Section heading rhythm — eyebrow tighter to heading, more space below */
.secova-benefits__header,
.secova-testimonials__header,
.secova-tiles__header,
.collection .title-wrapper-with-link {
  margin-block-end: var(--secova-space-7);
}

/* Section eyebrow — refined */
.eyebrow,
.secova-hero__eyebrow,
.secova-moments__eyebrow,
.secova-tiles__eyebrow,
.secova-benefits .eyebrow,
.secova-why__eyebrow,
.secova-testimonials__eyebrow {
  font-family: var(--font-heading-family);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--color-foreground), 0.55);
  margin-block-end: var(--secova-space-3);
}

/* Section H2 — editorial serif sized for impact */
.secova-benefits__heading,
.secova-moments__heading,
.secova-tiles__heading,
.secova-why__heading,
.secova-testimonials__heading,
.collection .title,
.title-wrapper-with-link .title,
.product-recommendations h2 {
  font-size: 3.2rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-block-end: 0;
}
@media screen and (min-width: 990px) {
  .secova-benefits__heading,
  .secova-moments__heading,
  .secova-tiles__heading,
  .secova-why__heading,
  .secova-testimonials__heading,
  .collection .title,
  .title-wrapper-with-link .title,
  .product-recommendations h2 {
    font-size: 4rem;
  }
}

/* ----- Best Sellers (featured-collection) polish ----- */

/* Centered title block, like the mockup */
.collection .title-wrapper-with-link {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--secova-space-3);
}
.collection .title {
  text-align: center;
}

/* View all — slim luxe link */
.collection .title-wrapper-with-link .link {
  font-family: var(--font-heading-family);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(var(--color-foreground), 0.65);
  border-block-end: 1px solid rgba(var(--color-foreground), 0.25);
  padding-block-end: 0.4rem;
  transition: color 200ms ease, border-color 200ms ease;
}
.collection .title-wrapper-with-link .link:hover {
  color: rgb(var(--color-foreground));
  border-block-end-color: rgb(var(--color-foreground));
}

/* Card image breathing room — luxury tint behind product photo */
.collection .grid__item .card-wrapper .card__inner,
.collection .grid__item .card-wrapper .card__media {
  background: var(--secova-cream);
}

/* Card vendor / caption / subtitle */
.card-information .caption-with-letter-spacing,
.card-information .caption {
  font-family: var(--font-heading-family);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--color-foreground), 0.5);
  margin-block-end: var(--secova-space-2);
}

/* Card title row spacing */
.card-information > * + * {
  margin-block-start: var(--secova-space-1);
}

/* Card grid — more vertical gap (Dawn drives via settings_data spacing_grid_*) */
.collection .product-grid {
  row-gap: var(--secova-space-7);
}

/* ----- Why Secova — premium lavender card ----- */

.secova-why {
  border-radius: var(--secova-radius-block);
  padding-inline: var(--secova-space-6);
  padding-block: var(--secova-space-8);
  box-shadow: var(--secova-shadow-soft);
}
@media screen and (min-width: 990px) {
  .secova-why {
    padding-inline: var(--secova-space-9);
    padding-block: var(--secova-space-10);
    border-radius: 24px;
  }
}

.secova-why__header {
  text-align: center;
  max-width: 64rem;
  margin-inline: auto;
  margin-block-end: var(--secova-space-8);
}

/* ----- Testimonials — refined italic serif quote ----- */

.secova-testimonials__quote p {
  font-family: var(--font-display-family);
  font-style: italic;
  font-weight: 400;
  font-size: 2rem;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: rgba(var(--color-foreground), 0.88);
}
@media screen and (min-width: 990px) {
  .secova-testimonials__quote p {
    font-size: 2.2rem;
  }
}

.secova-testimonials__name {
  font-family: var(--font-heading-family);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(var(--color-foreground));
}
.secova-testimonials__location {
  font-family: var(--font-heading-family);
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(var(--color-foreground), 0.5);
}

.secova-testimonials__star.is-filled {
  fill: var(--secova-gold);
}
.secova-testimonials__star {
  fill: rgba(var(--color-foreground), 0.15);
  width: 1.4rem;
  height: 1.4rem;
}

/* ----- Trust row — refined sub-footer band ----- */

.secova-trust__title {
  font-family: var(--font-heading-family);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0;
}
.secova-trust__subtitle {
  font-family: var(--font-body-family);
  font-size: 1.25rem;
  color: rgba(var(--color-foreground), 0.6);
  margin: 0;
  margin-block-start: 0.4rem;
}
.secova-trust__icon {
  color: rgba(var(--color-foreground), 0.7);
}

/* ----- Footer — cocoa luxury polish ----- */

/* On cocoa, the brand block reads as serif heading + soft sub-copy */
.color-scheme-3 .footer .footer-block__heading,
.footer.color-scheme-3 .footer-block__heading,
.footer .footer-block__heading {
  font-family: var(--font-heading-family);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-block-end: var(--secova-space-5);
}

/* Footer link list typography */
.footer-block__details-content a {
  font-family: var(--font-body-family);
  font-size: 1.35rem;
  font-weight: 400;
  letter-spacing: 0;
  opacity: 0.78;
  transition: opacity 180ms ease;
}
.footer-block__details-content a:hover {
  opacity: 1;
}
.footer-block__details-content .list-menu {
  line-height: 2.2;
}

/* Newsletter heading in footer reads as serif */
.footer-block--newsletter .footer-block__heading {
  font-family: var(--font-display-family);
  font-size: 2.4rem;
  font-weight: var(--font-display-weight);
  letter-spacing: -0.01em;
  text-transform: none;
  opacity: 1;
}
@media screen and (min-width: 990px) {
  .footer-block--newsletter .footer-block__heading {
    font-size: 2.8rem;
  }
}

/* Newsletter input on cocoa */
.footer-block__newsletter .newsletter-form__field-wrapper .field__input {
  background: transparent;
  border-color: rgba(var(--color-foreground), 0.3);
  color: rgb(var(--color-foreground));
}
.footer-block__newsletter .newsletter-form__field-wrapper .field__input::placeholder {
  color: rgba(var(--color-foreground), 0.5);
}

/* Brand block (first column with logo + copy) */
.footer .footer-block .rte p {
  font-family: var(--font-body-family);
  font-size: 1.4rem;
  line-height: 1.7;
  opacity: 0.75;
  max-width: 36rem;
}

/* Bottom row — payment icons + copyright + social */
.footer__content-bottom {
  border-block-start: 1px solid rgba(var(--color-foreground), 0.12);
  padding-block-start: var(--secova-space-5);
  margin-block-start: var(--secova-space-7);
}
.copyright__content {
  font-family: var(--font-heading-family);
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  opacity: 0.55;
}

/* Social icons — calmer */
.list-social__link svg {
  width: 1.8rem;
  height: 1.8rem;
  opacity: 0.7;
  transition: opacity 180ms ease;
}
.list-social__link:hover svg {
  opacity: 1;
}

/* ----- Subtle decorative divider above section headings (optional) ----- */

.secova-tiles__header,
.secova-testimonials__header,
.collection .title-wrapper-with-link {
  position: relative;
}
.secova-tiles__header::before,
.secova-testimonials__header::before,
.collection .title-wrapper-with-link::before {
  content: "";
  display: block;
  width: 4rem;
  height: 1px;
  background: var(--secova-gold);
  margin-inline: auto;
  margin-block-end: var(--secova-space-4);
  opacity: 0.7;
}

/* Override: when an eyebrow already exists, hide the decorative line
   (the eyebrow itself acts as the visual anchor). */
.secova-tiles__header:has(.secova-tiles__eyebrow)::before,
.secova-testimonials__header:has(.secova-testimonials__eyebrow)::before {
  display: none;
}


/* =============================================================
   SECOVA — Phase 14: Collection page — editorial Scandinavian polish
   References: Tekla, Aesop, Parachute, Soho Home.
   Goals: dissolve Shopify defaults, increase whitespace sophistication,
   photography-forward grid, refined filter typography.
   Scoped to .collection-hero / .product-grid / .facets — Dawn core CSS
   is untouched.
   ============================================================= */

/* ----- Banner / hero strip ----- */

/* Tighter top air; description sits as elegant body copy under a single
   serif title. The banner reads as an editorial frontispiece, not a hero. */
.collection-hero {
  padding-block-start: var(--secova-space-3);
  padding-block-end: var(--secova-space-6);
}
@media screen and (min-width: 990px) {
  .collection-hero {
    padding-block-start: var(--secova-space-4);
    padding-block-end: var(--secova-space-8);
  }
}

/* Kill the global MainContent top padding on collection pages so the
   title sits close to the navbar. Compensated by larger
   padding-block-end on .collection-hero above so product grid stays put. */
body.template-collection main#MainContent {
  padding-block-start: var(--secova-space-4) !important;
}
@media screen and (min-width: 990px) {
  body.template-collection main#MainContent {
    padding-block-start: var(--secova-space-6) !important;
  }
}

/* Collapse the section-to-section gap between collection banner and product grid */
.collection-hero + .section,
.shopify-section:has(.collection-hero) + .shopify-section {
  margin-top: 0 !important;
}
.shopify-section:has(.collection-hero) + .shopify-section .product-grid-container {
  padding-top: 0 !important;
}

/* Breathing room between header and page content (every page) —
   matches hero's top padding so every page lands with the same air. */
main#MainContent {
  padding-block-start: var(--secova-space-6);
}
@media screen and (min-width: 990px) {
  main#MainContent {
    padding-block-start: var(--secova-space-8);
  }
}
/* Hero is full-bleed and has its own padding — don't double up */
main#MainContent:has(> .shopify-section:first-child .secova-hero),
main#MainContent:has(> .shopify-section:first-child .banner) {
  padding-block-start: 0;
}

/* ----- /collections (catalog) — list of collections as branded tiles ----- */
body.template-list-collections .title.title--primary,
.template-list-collections .title.title--primary {
  text-align: center;
  font-family: var(--font-display-family);
  font-weight: var(--font-display-weight);
  font-size: 3.2rem;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: rgb(var(--color-foreground));
  margin: 0 0 var(--secova-space-6);
  position: relative;
}
@media screen and (min-width: 750px) { .template-list-collections .title.title--primary { font-size: 4rem; } }
@media screen and (min-width: 990px) { .template-list-collections .title.title--primary { font-size: 4.6rem; margin-block-end: var(--secova-space-7); } }
/* Decorative gold dash above the catalog heading */
.template-list-collections .title.title--primary::before {
  content: "";
  display: block;
  width: 3.2rem;
  height: 1px;
  background: var(--secova-gold);
  margin: 0 auto var(--secova-space-4);
  opacity: 0.7;
}
/* Tile labels — premium uppercase */
.collection-list .card__heading,
.collection-list .card__heading a {
  font-family: var(--font-heading-family);
  font-size: 1.2rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgb(var(--color-foreground));
}
@media screen and (min-width: 990px) {
  .collection-list .card__heading,
  .collection-list .card__heading a {
    font-size: 1.3rem;
  }
}
/* Tile spacing on catalog page */
.collection-list {
  column-gap: var(--secova-space-4);
  row-gap: var(--secova-space-7);
}
@media screen and (min-width: 990px) {
  .collection-list {
    column-gap: var(--secova-space-5);
    row-gap: var(--secova-space-8);
  }
}
/* Smooth hover lift on collection tiles (no shadow border) */
@media (hover: hover) {
  .collection-list .card-wrapper {
    transition: transform 280ms ease;
  }
  .collection-list .card-wrapper:hover {
    transform: translateY(-3px);
  }
  .collection-list .card-wrapper:hover .card__media img {
    transform: scale(1.03);
  }
  .collection-list .card-wrapper .card__media img {
    transition: transform 600ms ease;
  }
}

.collection-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.collection-hero__text-wrapper {
  max-width: 64rem;
  margin-inline: auto;
}

.collection-hero__title {
  font-family: var(--font-display-family);
  font-weight: var(--font-display-weight);
  letter-spacing: -0.01em;
  line-height: 1.05;
  font-size: 2.8rem;
  margin: 0;
}
@media screen and (min-width: 750px) {
  .collection-hero__title {
    font-size: 3.6rem;
  }
}
@media screen and (min-width: 990px) {
  .collection-hero__title {
    font-size: 4.2rem;
  }
}

/* Slim gold hairline above the collection title — only when an image isn't
   already setting the visual anchor. */
.collection-hero:not(.collection-hero--with-image) .collection-hero__title::before {
  content: "";
  display: block;
  width: 3.2rem;
  height: 1px;
  background: var(--secova-gold);
  margin-inline: auto;
  margin-block-end: var(--secova-space-4);
  opacity: 0.7;
}

.collection-hero__description {
  margin-block-start: var(--secova-space-4);
  font-family: var(--font-body-family);
  font-size: 1.5rem;
  line-height: 1.7;
  color: rgba(var(--color-foreground), 0.65);
  max-width: 52rem;
  margin-inline: auto;
}
.collection-hero__description p { margin: 0; }
.collection-hero__description p + p { margin-block-start: var(--secova-space-2); }

/* ----- Filter / sort / product count strip ----- */

/* The whole utility strip dissolves into a slim hairline row above the grid. */
.collection .facets-container,
.collection .facets,
.collection .facets-wrapper {
  border-block: 1px solid var(--color-border-subtle);
  padding-block: var(--secova-space-4);
  margin-block-end: var(--secova-space-7);
}
@media screen and (min-width: 990px) {
  .collection .facets-container,
  .collection .facets,
  .collection .facets-wrapper {
    padding-block: var(--secova-space-5);
    margin-block-end: var(--secova-space-9);
  }
}

/* Filter label + summary triggers — uppercase, letter-spaced, calm */
.facet-filters__label,
.facets__heading,
.facets__summary,
.facet-filters .product-count__text,
.facets__disclosure-vertical .facets__summary,
.collection .facets__summary span,
.facet-filters__sort-label {
  font-family: var(--font-heading-family) !important;
  font-size: 1.15rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: rgba(var(--color-foreground), 0.65) !important;
}

/* Sort select reads as text, no chunky button feel */
.facets__form select,
.facet-filters__sort {
  font-family: var(--font-heading-family);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--color-foreground), 0.78);
  border: none;
  background: transparent;
  padding-inline: 0.6rem 2.4rem;
}

/* Facets header layout — proper spacing between label, sort, count */
.collection .facet-filters,
.collection .facets {
  display: flex;
  align-items: center;
  gap: var(--secova-space-4);
}
.collection .facet-filters__sort-label,
.collection .facets__form-label {
  margin-inline-end: 0.6rem;
  white-space: nowrap;
}
.collection .product-count {
  margin-inline-start: auto;
  white-space: nowrap;
}

/* Product count — quiet typographic count, no badge feel */
.product-count__text {
  font-family: var(--font-heading-family);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--color-foreground), 0.5);
}

/* Active filters row */
.active-facets__button,
.active-facets__button-remove {
  font-family: var(--font-heading-family);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 0;
  background: transparent;
  border: 1px solid var(--color-border-subtle);
  color: rgba(var(--color-foreground), 0.7);
}

/* ----- Product grid ----- */

/* More vertical air between rows; horizontal already governed by spacing tokens */
.collection .product-grid {
  column-gap: var(--secova-space-4);
  row-gap: var(--secova-space-8);
}
@media screen and (min-width: 990px) {
  .collection .product-grid {
    column-gap: var(--secova-space-5);
    row-gap: var(--secova-space-9);
  }
}

/* Card image — photography dominates; no border, no shadow, soft beige plinth */
.collection .grid__item .card,
.collection .grid__item .card-wrapper .card__inner,
.collection .grid__item .card-wrapper .card__media {
  border: none;
  box-shadow: none;
  background: var(--secova-cream);
}

/* Image ratio: stay with whatever the merchant set, but ensure object-cover
   doesn't crop weirdly */
.collection .card-wrapper .card__media img,
.collection .grid__item .card__media img {
  object-fit: cover;
  transition: opacity 600ms ease, transform 800ms ease;
}

/* Subtle hover lift — slow, restrained, premium */
@media (hover: hover) {
  .collection .card-wrapper:hover .card__media img {
    transform: scale(1.025);
  }
  .collection .card-wrapper:hover {
    transform: none; /* override Dawn lift in collection context */
  }
}

/* Card information block — generous breathing under the photo */
.collection .card-information {
  padding-block-start: var(--secova-space-4);
  padding-block-end: 0;
  text-align: start;
}

/* Card heading already serif via Phase 12 — collection page wants a touch
   smaller, more restrained */
.collection .card-wrapper .card__heading,
.collection .card-information .card__heading {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.005em;
}
@media screen and (min-width: 990px) {
  .collection .card-wrapper .card__heading,
  .collection .card-information .card__heading {
    font-size: 1.75rem;
  }
}

/* Price on collection card — quieter, smaller caps */
.collection .price .price-item,
.collection .card-information .price .price-item {
  font-family: var(--font-heading-family);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(var(--color-foreground), 0.7);
}

/* Vendor / caption */
.collection .card-information .caption-with-letter-spacing,
.collection .card-information .caption {
  font-family: var(--font-heading-family);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--color-foreground), 0.45);
  margin-block-end: 0.4rem;
}

/* Sale / sold-out badge — restrained typographic mark, not a sticker */
.collection .card .badge {
  border-radius: 0;
  border: none;
  background: transparent;
  color: rgba(var(--color-foreground), 0.65);
  font-family: var(--font-heading-family);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding-inline: 0;
}

/* ----- Pagination ----- */

.pagination {
  margin-block-start: var(--secova-space-9);
}
.pagination__item {
  font-family: var(--font-heading-family);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--color-foreground), 0.55);
  border-radius: 0;
}
.pagination__item--current,
.pagination__item:hover {
  color: rgb(var(--color-foreground));
}

/* ----- Empty state ----- */

.collection--empty .title-wrapper {
  margin-block: var(--secova-space-10);
}


/* =============================================================
   Phase 14b removed — wordmark + footer rules fully superseded by Phase 15.
   ============================================================= */


/* =============================================================
   SECOVA — Phase 15: Alignment + spacing system reset
   References: Tekla, Aesop, Parachute, Magniberg.
   Establishes ONE coherent grid: container max 1440, horizontal
   padding 20/40/72, section rhythm 56/96, alignment baselines.
   Overrides earlier ad-hoc spacing from Phases 12–14b.
   ============================================================= */

:root {
  /* System tokens — single source of truth for the homepage grid */
  --secova-page-max:        1320px;
  --secova-page-px-mobile:  20px;
  --secova-page-px-tablet:  32px;
  --secova-page-px-desktop: 48px;

  --secova-section-py-mobile:  40px;
  --secova-section-py-desktop: 64px;
}

/* ----- Canonical container — every homepage block reads on this grid ----- */

.page-width,
.secova-benefits .secova-benefits__inner,
.secova-bestsellers .secova-bestsellers__inner,
.secova-moments .secova-moments__inner,
.secova-why-wrap .secova-why-wrap__inner,
.secova-testimonials .secova-testimonials__inner,
.secova-tiles .secova-tiles__container,
.secova-trust .secova-trust__inner,
.collection-hero__inner,
.footer__content-top,
.footer__content-bottom {
  max-width: var(--secova-page-max);
  margin-inline: auto;
  padding-inline: var(--secova-page-px-mobile);
}
@media screen and (min-width: 750px) {
  .page-width,
  .secova-benefits .secova-benefits__inner,
  .secova-bestsellers .secova-bestsellers__inner,
  .secova-moments .secova-moments__inner,
  .secova-why-wrap .secova-why-wrap__inner,
  .secova-testimonials .secova-testimonials__inner,
  .secova-tiles .secova-tiles__container,
  .secova-trust .secova-trust__inner,
  .collection-hero__inner,
  .footer__content-top,
  .footer__content-bottom {
    padding-inline: var(--secova-page-px-tablet);
  }
}
@media screen and (min-width: 990px) {
  .page-width,
  .secova-benefits .secova-benefits__inner,
  .secova-bestsellers .secova-bestsellers__inner,
  .secova-moments .secova-moments__inner,
  .secova-why-wrap .secova-why-wrap__inner,
  .secova-testimonials .secova-testimonials__inner,
  .secova-tiles .secova-tiles__container,
  .secova-trust .secova-trust__inner,
  .collection-hero__inner,
  .footer__content-top,
  .footer__content-bottom {
    padding-inline: var(--secova-page-px-desktop);
  }
}

/* ----- Section rhythm — every SECOVA section shares one cadence ----- */

.secova-benefits,
.secova-bestsellers,
.secova-moments,
.secova-why-wrap,
.secova-testimonials,
.secova-tiles,
.secova-trust {
  padding-block: var(--secova-section-py-mobile);
}
@media screen and (min-width: 990px) {
  .secova-benefits,
  .secova-bestsellers,
  .secova-moments,
  .secova-why-wrap,
  .secova-testimonials,
  .secova-tiles,
  .secova-trust {
    padding-block: var(--secova-section-py-desktop);
  }
}

/* ----- Tightened transitions where two cream sections meet ----- */
/* Benefits → Best Sellers: collapse the empty band between them so the
   eye reads them as part of one continuous editorial column. */
.secova-benefits {
  padding-block-end: var(--secova-space-3) !important;
}
.secova-bestsellers {
  padding-block-start: var(--secova-space-4) !important;
}
@media screen and (min-width: 990px) {
  .secova-benefits {
    padding-block-end: var(--secova-space-4) !important;
  }
  .secova-bestsellers {
    padding-block-start: var(--secova-space-5) !important;
  }
}

/* Hero section padding governed by section-secova-hero.css
   (full-bleed overlay layout, no inner page-width container). */

/* ----- Header — larger, more confident, vertically balanced ----- */

.section-header .header {
  padding-block: 1.4rem;
  border-block-end: 1px solid var(--color-border-subtle);
  align-items: center;
}
@media screen and (min-width: 990px) {
  .section-header .header {
    padding-block: 1.8rem;
  }
}

/* Wordmark — refined centered presence, calmer tracking */
.header__heading-link .secova-logo--text,
.secova-logo--text.secova-logo--header {
  font-family: var(--font-display-family);
  font-weight: var(--font-display-weight-medium);
  font-size: 2.6rem;
  letter-spacing: 0.32em;
  line-height: 1;
  text-transform: uppercase;
}
@media screen and (min-width: 990px) {
  .header__heading-link .secova-logo--text,
  .secova-logo--text.secova-logo--header {
    font-size: 2.9rem;
    letter-spacing: 0.36em;
  }
}

/* Nav — proportionate to logo, balanced */
.header__menu-item,
.header__menu-item .header__active-menu-item,
.header__menu-item span {
  font-family: var(--font-heading-family);
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--color-foreground), 0.78);
}
.header__inline-menu .list-menu--inline {
  column-gap: var(--secova-space-6);
  align-items: center;
}

/* Icons — aligned to nav baseline, generous tap targets */
.header__icons {
  column-gap: var(--secova-space-3);
  align-items: center;
}
.header__icon {
  width: 3.6rem;
  height: 3.6rem;
  padding: 0.6rem;
}

/* ----- Best Sellers — enforce 4-col, equal heights, aligned baselines ----- */

.collection .product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--secova-space-3);
  row-gap: var(--secova-space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 990px) {
  .collection .product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--secova-space-4);
    row-gap: var(--secova-space-6);
  }
}

/* Equal card heights, price pinned to bottom baseline */
.collection .grid__item {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 100%;
}
.collection .grid__item .card-wrapper,
.collection .grid__item .card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.collection .grid__item .card-information {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-block-start: var(--secova-space-3);
}
.collection .grid__item .card-information .price {
  margin-block-start: auto;
}

/* Let Dawn's image_ratio setting (portrait / square / adapt) drive the
   card image aspect. Forcing an override was shrinking product photography. */
.collection .card__media img,
.collection .grid__item .card__media .media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Product title — slim, refined */
.collection .card-wrapper .card__heading,
.collection .card-information .card__heading {
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.25;
}
@media screen and (min-width: 990px) {
  .collection .card-wrapper .card__heading,
  .collection .card-information .card__heading {
    font-size: 1.55rem;
  }
}

/* Featured-collection "View all" link — re-aligned under centered heading */
.collection .title-wrapper-with-link {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--secova-space-3);
  margin-block-end: var(--secova-space-5);
}
@media screen and (min-width: 990px) {
  .collection .title-wrapper-with-link {
    margin-block-end: var(--secova-space-6);
  }
}

/* ----- Footer — compact lavender band, no newsletter ----- */

.footer {
  padding-block-start: 20px !important;
  padding-block-end: 8px !important;
}
@media screen and (min-width: 990px) {
  .footer {
    padding-block-start: 28px !important;
    padding-block-end: 12px !important;
  }
}

/* With newsletter removed, the link wrapper sits alone — keep it as the
   4-column grid it already is and tighten the gap between columns + trust row. */
.footer .footer__content-top {
  margin-block-end: var(--secova-space-3);
  padding-block-end: var(--secova-space-3);
}

/* Column block spacing — newsletter sits as the 4th column on desktop */
.footer__content-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--secova-space-4) var(--secova-space-4);
  align-items: start;
  margin-block-end: var(--secova-space-4);
}
@media screen and (min-width: 750px) {
  .footer__content-top {
    grid-template-columns: 1.6fr 1fr 1fr 1fr 1.4fr;
    gap: var(--secova-space-5);
  }
}

/* Newsletter — own column, left-aligned typography */
.footer-block--newsletter {
  text-align: start;
  max-width: none;
  margin-inline: 0;
  padding-block: 0;
}
.footer-block--newsletter .footer-block__newsletter {
  max-width: none;
  margin-inline: 0;
}

/* Newsletter heading — small caps to match other column headings, left-aligned */
.footer-block--newsletter .footer-block__heading {
  font-family: var(--font-heading-family);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.82;
  margin-block-end: var(--secova-space-2);
}

/* Input + button — slim */
.footer-block__newsletter .newsletter-form__field-wrapper .field__input {
  font-size: 1.3rem;
  padding-block: 0.9rem;
}
.footer-block__newsletter .newsletter-form__button {
  padding-block: 0;
  min-width: 4.2rem;
}

/* Column headings — slim */
.footer .footer-block__heading {
  font-family: var(--font-heading-family);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.72;
  margin-block-end: var(--secova-space-2);
}

/* Brand block (first column with subtext) */
.footer-block .rte p,
.footer-block__text p {
  font-family: var(--font-body-family);
  font-size: 1.25rem;
  line-height: 1.65;
  opacity: 0.7;
  max-width: 28rem;
}

/* Footer link list — slim, calm rhythm */
.footer-block__details-content a {
  font-family: var(--font-body-family);
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: 0;
  opacity: 0.72;
}
.footer-block__details-content .list-menu {
  line-height: 1.9;
}

/* Bottom row — compact legal / payment / social row */
.footer__content-bottom {
  border-block-start: 1px solid rgba(var(--color-foreground), 0.12);
  padding-block-start: var(--secova-space-2);
  margin-block-start: var(--secova-space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--secova-space-2);
}
@media screen and (min-width: 990px) {
  .footer__content-bottom {
    padding-block-start: var(--secova-space-3);
    margin-block-start: var(--secova-space-4);
  }
}

.copyright__content {
  font-family: var(--font-heading-family);
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  opacity: 0.55;
}

/* ----- Global typographic body — restrained, readable, calm ----- */

body {
  font-size: 1.4rem;
  line-height: 1.6;
}
@media screen and (min-width: 990px) {
  body {
    font-size: 1.45rem;
  }
}


/* =============================================================
   SECOVA — Phase 16: Lavender header + utility bar + logo tab
   Matches v2 mockup: saturated lavender utility bar + lavender header
   with a white "logo tab" dropping below the header line.
   ============================================================= */

/* ----- Utility bar (announcement) ----- */

.utility-bar.color-scheme-4,
.announcement-bar-section .utility-bar {
  background: var(--secova-lavender);
  color: var(--secova-cream);
  padding-block: 0.6rem;
}
.utility-bar .announcement-bar__message,
.announcement-bar-slider .announcement-bar__message {
  font-family: var(--font-heading-family);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--secova-cream);
  padding-block: 0.6rem;
}

/* ----- Header — cream bg, cocoa nav + icons (lavender reserved for Why card) ----- */

.section-header .header-wrapper,
.section-header .header {
  background: var(--secova-cream);
  color: var(--secova-cocoa);
  border-block-end: 1px solid rgba(43, 36, 31, 0.08);
}

.section-header .header {
  position: relative;
  padding-block: 1rem;
}
@media screen and (min-width: 990px) {
  .section-header .header {
    padding-block: 1.2rem;
  }
}

/* Nav links and icons read in cocoa on cream */
.section-header .header__menu-item,
.section-header .header__menu-item span,
.section-header .header__icon {
  color: rgba(43, 36, 31, 0.78);
}
.section-header .header__menu-item:hover,
.section-header .header__menu-item:hover span,
.section-header .header__icon:hover {
  color: var(--secova-cocoa);
}

/* Cart bubble — cocoa on cream */
.section-header .header__icon .cart-count-bubble {
  background: var(--secova-cocoa);
  color: var(--secova-cream);
}

/* Localization form colors */
.section-header .localization-form__select,
.section-header .disclosure__button {
  color: rgba(43, 36, 31, 0.78);
}

/* ----- Logo — flush in-line wordmark (cream header, no tab/drop) ----- */

.section-header .header__heading,
.section-header .header__heading-link {
  position: relative;
  z-index: 5;
}

.section-header .header__heading-link {
  background: transparent;
  color: var(--secova-cocoa);
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  transform: none;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  line-height: 1;
}

/* Wordmark inside the tab */
.section-header .header__heading-link .secova-logo--text {
  font-family: var(--font-display-family);
  font-weight: var(--font-display-weight-medium);
  font-size: 1.9rem;
  letter-spacing: 0.26em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--secova-cocoa);
  padding-inline-start: 0.26em; /* visual centering for letter-spaced text */
}
@media screen and (min-width: 990px) {
  .section-header .header__heading-link .secova-logo--text {
    font-size: 2.1rem;
    letter-spacing: 0.28em;
  }
}

/* Tagline below the wordmark, inside the tab */
.section-header .header__heading-link .secova-logo--text::after {
  content: "EFFORTLESS LUXURY";
  display: block;
  font-family: var(--font-heading-family);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  color: rgba(43, 36, 31, 0.55);
  margin-block-start: 0.4rem;
  padding-inline-start: 0;
}
@media screen and (min-width: 990px) {
  .section-header .header__heading-link .secova-logo--text::after {
    font-size: 0.85rem;
    letter-spacing: 0.34em;
  }
}

/* Hide the line separator that Phase 13 added — lavender header doesn't need it */
.section-header .header-wrapper--border-bottom {
  border-block-end: none;
}

/* Header no longer has a dropping tab — no extra clearance needed */
.section-header {
  padding-block-end: 0;
}
@media screen and (min-width: 990px) {
  .section-header {
    padding-block-end: 0;
  }
}


/* ----- Inline trust row inside footer (Phase 16 continued) ----- */

.secova-trust-inline {
  padding-block: var(--secova-space-5) var(--secova-space-3);
  margin-block-end: var(--secova-space-2);
}
@media screen and (min-width: 990px) {
  .secova-trust-inline {
    padding-block: var(--secova-space-6) var(--secova-space-4);
    margin-block-end: var(--secova-space-2);
  }
}

.secova-trust-inline__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--secova-space-4) var(--secova-space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 750px) {
  .secova-trust-inline__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--secova-space-5);
  }
}

.secova-trust-inline__item {
  display: flex;
  align-items: center;
  gap: var(--secova-space-3);
  color: var(--secova-cream);
}

.secova-trust-inline__icon {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  color: var(--secova-cream);
  flex-shrink: 0;
  opacity: 0.95;
}
.secova-trust-inline__icon svg {
  width: 100%;
  height: 100%;
}

.secova-trust-inline__text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.secova-trust-inline__title {
  margin: 0;
  font-family: var(--font-heading-family);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--secova-cream);
}
.secova-trust-inline__subtitle {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.4;
  color: rgba(243, 238, 231, 0.72);
}


/* ----- Lavender footer adjustments — Phase 15 footer rules rewritten for
   white-on-lavender contrast. Overrides earlier cocoa-tuned colors. ----- */

.footer .footer-block .rte p,
.footer .footer-block .rte,
.footer-block__text p {
  color: rgba(243, 238, 231, 0.82);
}

.footer .footer-block__heading {
  color: var(--secova-cream);
  opacity: 0.82;
}

.footer-block--newsletter .footer-block__heading {
  color: var(--secova-cream);
  opacity: 1;
}

.footer-block__details-content a {
  color: rgba(243, 238, 231, 0.78);
}
.footer-block__details-content a:hover {
  color: var(--secova-cream);
  opacity: 1;
}

/* Newsletter input on lavender */
.footer-block__newsletter .newsletter-form__field-wrapper .field__input {
  background: transparent;
  border-color: rgba(243, 238, 231, 0.35);
  color: var(--secova-cream);
}
.footer-block__newsletter .newsletter-form__field-wrapper .field__input::placeholder {
  color: rgba(243, 238, 231, 0.55);
}
.footer-block__newsletter .newsletter-form__field-wrapper label {
  color: rgba(243, 238, 231, 0.55);
}
.footer-block__newsletter .newsletter-form__button {
  color: var(--secova-cream);
}

/* Bottom row dividers + copyright on lavender */
.footer__content-bottom {
  border-block-start-color: rgba(243, 238, 231, 0.18) !important;
}
.copyright__content {
  color: rgba(243, 238, 231, 0.75);
}

/* Localization selectors on lavender footer */
.footer .localization-form__select,
.footer .disclosure__button {
  color: rgba(243, 238, 231, 0.85);
}

/* Payment icons — keep their original treatment but slightly muted */
.list-payment .list-payment__item svg {
  opacity: 0.85;
}

/* Social icons on lavender */
.footer .list-social__link svg {
  color: rgba(243, 238, 231, 0.82);
}
.footer .list-social__link:hover svg {
  color: var(--secova-cream);
}


/* =============================================================
   SECOVA — Phase 17: Modern polish
   - Gold-hairline dividers between cream sections for editorial rhythm
   - Restrained hover micro-lifts on Best Sellers cards + tile reveal
   ============================================================= */

/* Section hairlines — subtle 1px gold rule above the page-width container,
   only on the cream-on-cream transitions where sections would otherwise
   blend into each other. */
.section-secova-bestsellers .secova-bestsellers__inner::before,
.section-secova-testimonials .secova-testimonials__inner::before {
  content: "";
  display: block;
  width: 4rem;
  height: 1px;
  background: var(--secova-gold);
  margin-inline: auto;
  margin-block-end: var(--secova-space-5);
  opacity: 0.6;
}

/* Suppress the gold hairline when an eyebrow already serves as a section
   anchor (avoids two visual anchors stacked). */
.section-secova-bestsellers .secova-bestsellers__inner:has(.secova-bestsellers__eyebrow)::before {
  display: none;
}

/* Best Sellers card — refined hover micro-lift */
@media (hover: hover) {
  .secova-bestsellers__card {
    transition: transform 220ms ease;
  }
  .secova-bestsellers__card:hover {
    transform: translateY(-4px);
  }
}

/* Shop by Collection — hover reveal on Shop now link */
@media (hover: hover) {
  .secova-tile__subtitle {
    position: relative;
    display: inline-block;
    transition: color 220ms ease;
  }
  .secova-tile__subtitle::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-end: -3px;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform-origin: left;
    transform: scaleX(0);
    transition: transform 280ms ease;
  }
  .secova-tile:hover .secova-tile__subtitle::after {
    transform: scaleX(1);
  }
  .secova-tile:hover .secova-tile__title {
    color: var(--secova-cocoa);
  }
}

/* Smooth ::after transition for cream theme (no reverse origin in RTL) */
[dir="rtl"] .secova-tile__subtitle::after {
  transform-origin: right;
}


/* =============================================================
   SECOVA — Phase 18: Header refinement
   - Modern nav typography (refined weight + tracking)
   - Custom thin-stroke icons (search / account / cart) via CSS mask
   - Tight, balanced alignment across utility row + nav + icons
   ============================================================= */

/* ----- Nav links: lighter weight, finer tracking ----- */
.section-header .header__menu-item,
.section-header .header__menu-item span,
.section-header .header__active-menu-item {
  font-family: var(--font-heading-family);
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  line-height: 1;
  padding-block: 0.6rem;
}
.section-header .header__menu-item {
  transition: color 180ms ease;
}

/* Active state — refined gold underline instead of plain text-underline */
.section-header .header__active-menu-item {
  text-decoration: none !important;
  position: relative;
}
.section-header .header__active-menu-item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.4rem;
  height: 1px;
  background: var(--secova-gold);
  opacity: 0.85;
}
/* Suppress hover underline / thickness on the CURRENTLY ACTIVE menu item
   so only one indicator (the gold ::after) shows on the active page. */
.section-header .header__menu-item:hover .header__active-menu-item,
.section-header .header__menu-item:focus-visible .header__active-menu-item {
  text-decoration: none !important;
  text-decoration-thickness: 0 !important;
}

/* ----- Right-side icons: hide stock SVG fill, render thin-stroke custom icons via mask ----- */

.section-header .header__icon {
  width: 3.6rem;
  height: 3.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.section-header .header__icon .svg-wrapper,
.section-header .header__icon svg {
  /* Hide Dawn's stock icon — we render our own via ::before */
  display: none !important;
}

.section-header .header__icon::before {
  content: "";
  display: block;
  width: 2rem;
  height: 2rem;
  background-color: rgba(43, 36, 31, 0.78);
  transition: background-color 180ms ease;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.section-header .header__icon:hover::before {
  background-color: var(--secova-cocoa);
}

/* Search */
.section-header .header__icon--search::before,
.section-header summary.header__icon--search::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='10.5' cy='10.5' r='6.5'/><line x1='15.4' y1='15.4' x2='20' y2='20'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='10.5' cy='10.5' r='6.5'/><line x1='15.4' y1='15.4' x2='20' y2='20'/></svg>");
}

/* Account */
.section-header .header__icon--account::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8.5' r='3.6'/><path d='M4.5 20c0-4 3.3-6.5 7.5-6.5s7.5 2.5 7.5 6.5'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8.5' r='3.6'/><path d='M4.5 20c0-4 3.3-6.5 7.5-6.5s7.5 2.5 7.5 6.5'/></svg>");
}

/* Mobile: absolute-center the logo regardless of left/right cluster widths.
   Default Dawn grid (1fr 2fr 1fr) makes the logo drift left when the right
   side has more icons than the left. Anchor the logo to the viewport center. */
@media screen and (max-width: 989px) {
  .section-header .header {
    position: relative;
  }
  .section-header .header__heading {
    position: absolute;
    inset-inline-start: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    margin: 0;
    padding: 0;
    grid-area: unset;
  }
  .section-header .header__heading-link {
    margin: 0;
    padding: 0;
  }
  /* Make sure left/right clusters sit above the absolutely-positioned logo */
  .section-header .header__icons,
  .section-header .header__icon--menu {
    z-index: 2;
    position: relative;
  }
  /* Tighten icon padding on small screens so 3 icons + hamburger fit cleanly */
  .section-header .header__icon {
    width: 3.2rem;
    height: 3.2rem;
  }
}

/* Hamburger / Menu (mobile + tablet) */
.section-header .header__icon--menu::before,
.section-header summary.header__icon--menu::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'><line x1='4' y1='7' x2='20' y2='7'/><line x1='4' y1='12' x2='20' y2='12'/><line x1='4' y1='17' x2='20' y2='17'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'><line x1='4' y1='7' x2='20' y2='7'/><line x1='4' y1='12' x2='20' y2='12'/><line x1='4' y1='17' x2='20' y2='17'/></svg>");
}
/* Close X — shown when drawer is open */
.section-header details[open] > summary.header__icon--menu::before,
.section-header details[open] > .header__icon--menu::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'><line x1='6' y1='6' x2='18' y2='18'/><line x1='18' y1='6' x2='6' y2='18'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'><line x1='6' y1='6' x2='18' y2='18'/><line x1='18' y1='6' x2='6' y2='18'/></svg>");
}

/* Cart — refined tote/bag silhouette */
.section-header .header__icon--cart::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5.5 8h13l-1.2 11.2a1.5 1.5 0 0 1-1.5 1.3H8.2a1.5 1.5 0 0 1-1.5-1.3L5.5 8Z'/><path d='M9 8V6.5a3 3 0 0 1 6 0V8'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5.5 8h13l-1.2 11.2a1.5 1.5 0 0 1-1.5 1.3H8.2a1.5 1.5 0 0 1-1.5-1.3L5.5 8Z'/><path d='M9 8V6.5a3 3 0 0 1 6 0V8'/></svg>");
}

/* Cart count bubble — refined small pill on cocoa */
.section-header .header__icon--cart .cart-count-bubble {
  position: absolute;
  top: 0.2rem;
  inset-inline-end: 0.2rem;
  inset-inline-start: auto;
  min-width: 1.6rem;
  height: 1.6rem;
  padding-inline: 0.4rem;
  border-radius: 999px;
  background: var(--secova-cocoa);
  color: var(--secova-cream);
  font-family: var(--font-heading-family);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ----- Localization (English / Currency) — refined to match nav weight ----- */
.section-header .localization-form__select,
.section-header .disclosure__button {
  font-family: var(--font-body-family);
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ----- Right-side cluster: align icon row with localization ----- */
.section-header .header__icons {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.section-header .header__icons .header-localization,
.section-header .header__icons .localization-wrapper {
  margin-inline-end: 0.6rem;
}

/* ----- Inline menu container alignment: flush vertical center across all 3 zones ----- */
.section-header .header {
  align-items: center;
}
.section-header .header__inline-menu .list-menu--inline {
  gap: 2.8rem;
  align-items: center;
}
@media screen and (min-width: 990px) {
  .section-header .header__inline-menu .list-menu--inline {
    gap: 3.2rem;
  }
}