/** Shopify CDN: Minification failed

Line 2878:95 Unexpected "\\n"
Line 2878:141 Expected ":"
Line 2878:156 Expected ":"
Line 2878:195 Expected ":"
Line 2878:213 Expected ":"
Line 2878:269 Expected ":"
Line 2878:289 Expected ":"
Line 2878:307 Expected ":"
Line 2878:344 Expected ":"
Line 2878:364 Expected ":"
... and 26 more hidden warnings

**/
* {
  box-sizing: border-box;
}

body {
  color: var(--color-foreground);
  background: var(--color-background);
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 100svh;
  font-variation-settings: 'slnt' 0;
}

:root {
  --hover-transition-duration: 0.25s;
  --hover-transition-timing: ease-out;
  --submenu-animation-speed: 360ms;
}

html {
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--color-foreground-rgb) / var(--opacity-40)) var(--color-background);
  scroll-behavior: smooth;
}

@media (min-width: 990px) {
  html:has(.page-wrapper),
  html:has(.page-wrapper) body {
    height: 100dvh;
    overflow: hidden;
  }
}

html[scroll-lock],
html[scroll-lock] .page-wrapper {
  overflow: hidden;
}

.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  transition: margin-inline-end var(--animation-speed) var(--animation-timing-fade-out);
}

@media (min-width: 990px) {
  .page-wrapper {
    height: 100dvh;
    overflow-y: auto;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--color-foreground-rgb) / var(--opacity-40)) var(--color-background);
  }

  .page-wrapper--drawer-open shopify-account::part(dialog) {
    translate: calc(-1 * var(--theme-drawer-width, var(--sidebar-width)));
  }

  /* The theme drawer opens from the inline-end edge, so the shift mirrors in RTL */
  [dir='rtl'] .page-wrapper--drawer-open shopify-account::part(dialog) {
    translate: var(--theme-drawer-width, var(--sidebar-width));
  }
}

.page-wrapper--drawer-open {
  margin-inline-end: var(--theme-drawer-width, var(--sidebar-width));
  transition-timing-function: var(--animation-timing-fade-in);
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

img {
  width: 100%;
  height: auto;
}

input,
textarea,
select {
  font: inherit;
  border-radius: var(--style-border-radius-inputs);
}

/** override ios and firefox defaults */
select {
  background-color: var(--color-background);
  color: currentcolor;
}

.product-card,
.collection-card,
.predictive-search-results__card--product,
.predictive-search-results__card {
  position: relative;
  transition: transform var(--hover-transition-duration) var(--hover-transition-timing),
    box-shadow var(--hover-transition-duration) var(--hover-transition-timing);
  z-index: var(--layer-flat);
}

.product-card__link {
  position: absolute;
  inset: 0;
}

.product-card__content {
  position: relative;
  cursor: pointer;
}

dialog {
  /* the ::backdrop inherits from the originating element, custom properties must be set on the dialog element */
  --backdrop-color-rgb: var(--color-shadow-rgb);

  background-color: var(--color-background);
  color: var(--color-foreground);
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

.wrap-text {
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

p:empty {
  display: none;
}

:first-child:is(p, h1, h2, h3, h4, h5, h6),
:first-child:empty + :where(p, h1, h2, h3, h4, h5, h6) {
  margin-block-start: 0;
}

/* Remove bottom margin from last text item, or previous to last if the last is empty */
:last-child:is(p, h1, h2, h3, h4, h5, h6),
:where(p, h1, h2, h3, h4, h5, h6):nth-child(2):has(+ :last-child:empty) {
  margin-block-end: 0;
}

/* view transitions */

/*
 * The cross-document (MPA) opt-in `@view-transition { navigation: auto }` is declared per-layout
 * (layout/theme.liquid and layout/password.liquid), because this stylesheet is shared by both layouts
 * and a static stylesheet can't read theme settings.
 * It is gated on the same `settings.page_transition_enabled or settings.transition_to_main_product` condition as the
 * render blocker, so the opt-in and its opt-out switch can never disagree. The rules below only
 * take effect once an `@view-transition` opt-in is active, so they are inert without it.
 */
@media (prefers-reduced-motion: no-preference) {
  /* Keep page interactive while view transitions are running */
  :root {
    view-transition-name: none;
  }

  /* Have the root transition during page navigation */
  html:active-view-transition-type(page-navigation),
  html:active-view-transition-type(product-image-transition) {
    view-transition-name: root-custom;
  }

  ::view-transition {
    pointer-events: none;
  }

  html:active-view-transition-type(page-navigation) main[data-page-transition-enabled='true'] {
    view-transition-name: main-content;
  }

  html:active-view-transition-type(page-navigation) main[data-product-transition='true'][data-template*='product'] {
    view-transition-name: none;
  }

  ::view-transition-old(main-content) {
    animation: var(--view-transition-old-main-content);
  }

  ::view-transition-new(main-content) {
    animation: var(--view-transition-new-main-content);
  }

  html:active-view-transition-type(product-image-transition) {
    [data-view-transition-type='product-image-transition'] {
      view-transition-name: product-image-transition;
    }

    [data-view-transition-type='product-details'] {
      view-transition-name: product-details;
    }
  }

  ::view-transition-group(product-image-transition) {
    z-index: 1;
  }

  ::view-transition-group(product-image-transition),
  ::view-transition-group(product-details) {
    animation-duration: var(--animation-speed);
    animation-timing-function: var(--animation-easing);
  }

  ::view-transition-old(product-image-transition),
  ::view-transition-new(product-image-transition) {
    block-size: 100%;
    overflow: hidden;
    object-fit: cover;
    animation-duration: 0.25s;
    animation-timing-function: var(--animation-easing);
  }

  ::view-transition-new(product-details) {
    animation: var(--view-transition-new-main-content);
  }
}

/* Focus */
*:focus-visible {
  outline: var(--focus-outline-width) solid currentcolor;
  outline-offset: var(--focus-outline-offset);
}

@supports not selector(:focus-visible) {
  *:focus {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }
}

.focus-inset {
  outline-offset: calc(var(--focus-outline-width) * -1);
}

/* Layout */
.content-for-layout {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.content-for-layout > .shopify-section:last-child {
  flex-grow: 1;
}

/* Set up page widths & margins. Gutters grow to the device safe-area insets (viewport-fit=cover)
   so section backgrounds bleed edge-to-edge while content stays clear of the notch; taking the
   larger of both insets keeps the centered page grid symmetric. */
.page-width-wide,
.page-width-normal,
.page-width-narrow,
.page-width-content {
  --page-margin: max(16px, var(--safe-area-inset-left, 0px), var(--safe-area-inset-right, 0px));
}

@media screen and (min-width: 750px) {
  .page-width-wide,
  .page-width-normal,
  .page-width-narrow,
  .page-width-content {
    --page-margin: max(40px, var(--safe-area-inset-left, 0px), var(--safe-area-inset-right, 0px));
  }
}

.page-width-wide {
  /* NOTE: This results in a page width of 2400px because of how we set up margins with grid */
  --page-content-width: var(--wide-page-width);
  --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
}

.page-width-normal {
  --page-content-width: var(--normal-page-width);
  --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
}

.page-width-narrow {
  /* NOTE: This results in a page width of 1400px because of how we set up margins with grid */
  --page-content-width: var(--narrow-page-width);
  --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
}

.page-width-content {
  --page-content-width: var(--normal-content-width);
  --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
}

/* Section width full vs. page
   The reason we use a grid to contain the section is to allow for the section to have a
   full-width background image even if the section content is constrained by the page width. Do not try
   to rewrite this to max-width: --page-width; margin: 0 auto;, it doesn't work. */
.section {
  --full-page-grid-central-column-width: min(
    var(--page-width) - var(--page-margin) * 2,
    calc(100% - var(--page-margin) * 2)
  );
  --full-page-grid-margin: minmax(var(--page-margin), 1fr);
  --full-page-grid-with-margins: var(--full-page-grid-margin) var(--full-page-grid-central-column-width)
    var(--full-page-grid-margin);

  /* Utility variable gives the grid's first column width. Provides an offset width for components like carousels */
  --util-page-margin-offset: max(
    var(--page-margin),
    calc((100% - min(var(--page-content-width), 100% - var(--page-margin) * 2)) / 2)
  );

  /* Offset for full-width sections to account for the page margin,
  used for Marquee — note that --util-page-margin-offset doesn't work here */
  --full-page-margin-inline-offset: calc(((100vw - var(--full-page-grid-central-column-width)) / 2) * -1);

  width: 100%;

  /* This is required to make background images work, which are <img> rendered absolutely */
  position: relative;

  /* Set up the grid */
  display: grid;
  grid-template-columns: var(--full-page-grid-with-margins);
  min-height: var(--section-min-height, 'auto');
}

/* Place all direct children in the center column by default */
.section > * {
  grid-column: 2;
}

/* Make the actual section background transparent, and instead apply it to a separate sibling element to enable stacking with hero shadow  */
.shopify-section:not(.header-section) :is(.section, .cart-summary) {
  background: transparent;
}

.shopify-section:not(.header-section):has(.section) {
  position: relative;
}

.shopify-section:not(.header-section) .section-background {
  content: '';
  position: absolute;
  inset: 0;
  z-index: var(--layer-section-background);
  background-color: var(--color-background);
}

/* For page-width sections, all content goes in the center column */
.section--page-width > * {
  grid-column: 2;
}

/* For full-width sections, content spans all columns */
.section--full-width > * {
  grid-column: 1 / -1;
}

@media screen and (max-width: 749px) {
  .section--mobile-full-width > * {
    grid-column: 1 / -1;
  }
}

/* For full-width sections with margin, content still spans full width but with space on the sides */
.section--full-width.section--full-width-margin > * {
  grid-column: 1 / -1;

  @media screen and (min-width: 750px) {
    padding-inline: var(--page-margin);
  }
}

/* Some section content break out to full width of the page */
.section > .force-full-width {
  grid-column: 1 / -1;
}

.section--height-small {
  --section-min-height: var(--section-height-small);
}

.section--height-medium {
  --section-min-height: var(--section-height-medium);
}

.section--height-large {
  --section-min-height: var(--section-height-large);
}

.section--height-full-screen {
  --section-min-height: 100svh;
}

.section-content-wrapper.section-content-wrapper {
  min-height: calc(var(--section-min-height, 'auto') - var(--section-height-offset, 0px));
  position: relative;
  width: 100%;
  height: 100%;
}

/* Utility */

.hidden {
  /* stylelint-disable-next-line declaration-no-important */
  display: none !important;
}

@media screen and (max-width: 749px) {
  .hidden--mobile,
  .mobile\:hidden {
    /* stylelint-disable-next-line declaration-no-important */
    display: none !important;
  }
}

@media screen and (min-width: 750px) {
  .hidden--desktop,
  .desktop\:hidden {
    /* stylelint-disable-next-line declaration-no-important */
    display: none !important;
  }
}

.hide-when-empty:empty {
  /* stylelint-disable-next-line declaration-no-important */
  display: none !important;
}

.visually-hidden:not(:focus, :active) {
  /* stylelint-disable-next-line declaration-no-important */
  position: absolute !important;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  /* stylelint-disable-next-line declaration-no-important */
  word-wrap: normal !important;
}

.contents {
  display: contents;
}

.flex {
  display: flex;
  gap: var(--gap-md);
}

.grid {
  --centered-column-number: 12;
  --full-width-column-number: 14;
  --centered: column-1 / span var(--centered-column-number);
  --full-width: column-0 / span var(--full-width-column-number);

  display: flex;
  flex-direction: column;
}

@media screen and (min-width: 750px) {
  .grid {
    display: grid;
    gap: 0;
    grid-template-columns: var(--margin-4xl) repeat(var(--centered-column-number), minmax(0, 1fr)) var(--margin-4xl);
    grid-template-areas: 'column-0 column-1 column-2 column-3 column-4 column-5 column-6 column-7 column-8 column-9 column-10 column-11 column-12 column-13';
  }
}

@media screen and (min-width: 1400px) {
  .grid {
    grid-template-columns:
      1fr repeat(
        var(--centered-column-number),
        minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number)))
      )
      1fr;
  }
}

.flip-x {
  scale: -1 1;
}

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

.text-left {
  --text-align: start;

  text-align: start;
}

.text-center {
  --text-align: center;

  text-align: center;
}

.text-right {
  --text-align: end;

  text-align: end;
}

.text-inherit {
  color: inherit;
}

.user-select-text {
  user-select: text;
}

.justify-left {
  justify-content: flex-start;
}

.justify-center {
  justify-content: center;
}

.justify-right {
  justify-content: flex-end;
}

.svg-wrapper {
  color: currentcolor;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  pointer-events: none;
}

.svg-wrapper--smaller {
  width: var(--icon-size-2xs);
  height: var(--icon-size-2xs);
}

.svg-wrapper--small {
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
}

.svg-wrapper > svg {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
}

.relative {
  position: relative;
}

/* Icons */
.icon-success,
.icon-error {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  flex-shrink: 0;
}

.icon-success {
  color: var(--color-success);
}

.icon-error {
  fill: var(--color-error);
}

.icon-default {
  fill: currentColor;
}

[data-placeholder='true'] * {
  cursor: default;
}

/* Base text and heading styles */
body,
.paragraph:not(.button),
.paragraph > *,
.text-block.paragraph :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-paragraph--family);
  font-style: var(--font-paragraph--style);
  font-weight: var(--font-paragraph--weight);
  font-size: var(--font-paragraph--size);
  line-height: var(--font-paragraph--line-height);
  text-transform: var(--font-paragraph--case);
  -webkit-font-smoothing: antialiased;
  color: var(--color, var(--color-foreground));
}

/* Ensure inputs with type presets maintain minimum 16px on mobile to prevent iOS zoom */
@media screen and (max-width: 1200px) {
  input.paragraph.paragraph,
  input.paragraph.paragraph:not([type]),
  textarea.paragraph.paragraph,
  select.paragraph.paragraph {
    font-size: max(1rem, var(--font-paragraph--size));
  }
}

.paragraph > small {
  font-size: smaller;
}

/* Typography presets */

h1,
.h1.h1,
.text-block.h1 > *,
.text-block.h1 :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-h1--family);
  font-style: var(--font-h1--style);
  font-weight: var(--font-h1--weight);
  font-size: var(--font-h1--size);
  line-height: var(--font-h1--line-height);
  letter-spacing: var(--font-h1--letter-spacing);
  text-transform: var(--font-h1--case);
  color: var(--color);
}

@media screen and (max-width: 1200px) {
  input.h1.h1,
  textarea.h1.h1,
  select.h1.h1 {
    font-size: max(1rem, var(--font-h1--size));
  }
}

h2,
.h2.h2,
.text-block.h2 > *,
.text-block.h2 :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-h2--family);
  font-style: var(--font-h2--style);
  font-weight: var(--font-h2--weight);
  font-size: var(--font-h2--size);
  line-height: var(--font-h2--line-height);
  letter-spacing: var(--font-h2--letter-spacing);
  text-transform: var(--font-h2--case);
  color: var(--color);
}

@media screen and (max-width: 1200px) {
  input.h2.h2,
  textarea.h2.h2,
  select.h2.h2 {
    font-size: max(1rem, var(--font-h2--size));
  }
}

h3,
.h3,
.h3.h3,
.text-block.h3 > *,
.text-block.h3 :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-h3--family);
  font-style: var(--font-h3--style);
  font-weight: var(--font-h3--weight);
  font-size: var(--font-h3--size);
  line-height: var(--font-h3--line-height);
  letter-spacing: var(--font-h3--letter-spacing);
  text-transform: var(--font-h3--case);
  color: var(--color);
}

@media screen and (max-width: 1200px) {
  input.h3,
  textarea.h3,
  select.h3 {
    font-size: max(1rem, var(--font-h3--size));
  }
}

h4,
.h4.h4,
.text-block.h4 > *,
.text-block.h4 :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-h4--family);
  font-style: var(--font-h4--style);
  font-weight: var(--font-h4--weight);
  font-size: var(--font-h4--size);
  line-height: var(--font-h4--line-height);
  letter-spacing: var(--font-h4--letter-spacing);
  text-transform: var(--font-h4--case);
  color: var(--color);
}

@media screen and (max-width: 1200px) {
  input.h4.h4,
  textarea.h4.h4,
  select.h4.h4 {
    font-size: max(1rem, var(--font-h4--size));
  }
}

h5,
.h5.h5,
.text-block.h5 > *,
.text-block.h5 :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-h5--family);
  font-style: var(--font-h5--style);
  font-weight: var(--font-h5--weight);
  font-size: var(--font-h5--size);
  line-height: var(--font-h5--line-height);
  letter-spacing: var(--font-h5--letter-spacing);
  text-transform: var(--font-h5--case);
  color: var(--color);
}

@media screen and (max-width: 1200px) {
  input.h5.h5,
  textarea.h5.h5,
  select.h5.h5 {
    font-size: max(1rem, var(--font-h5--size));
  }
}

h6,
.h6.h6,
.text-block.h6 > *,
.text-block.h6 :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-h6--family);
  font-style: var(--font-h6--style);
  font-weight: var(--font-h6--weight);
  font-size: var(--font-h6--size);
  line-height: var(--font-h6--line-height);
  letter-spacing: var(--font-h6--letter-spacing);
  text-transform: var(--font-h6--case);
  color: var(--color);
}

@media screen and (max-width: 1200px) {
  input.h6.h6,
  textarea.h6.h6,
  select.h6.h6 {
    font-size: max(1rem, var(--font-h6--size));
  }
}

:first-child:is(.h1, .h2, .h3, .h4, .h5, .h6) {
  margin-block-start: 0;
}

:last-child:is(.h1, .h2, .h3, .h4, .h5, .h6) {
  margin-block-end: 0;
}

/* Links */
a {
  color: currentcolor;
  text-decoration-color: transparent;
  text-decoration-thickness: 0.075em;
  text-underline-offset: 0.125em;
  transition: text-decoration-color var(--animation-speed) var(--animation-easing),
    color var(--animation-speed) var(--animation-easing);
}

:is(h1, h2, h3, h4, h5, h6, p) > a:hover {
  color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / 0.7);
}

/* Add underline to text using our paragraph styles only. */
p:not(.h1, .h2, .h3, .h4, .h5, .h6) a:where(:not(.button, .button-secondary)),
.rte :is(p, ul, ol, table):not(.h1, .h2, .h3, .h4, .h5, .h6) a:where(:not(.button, .button-secondary)) {
  text-decoration-color: currentcolor;

  &:hover {
    text-decoration-color: currentcolor;
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / 0.7);
  }
}

.container-background-image {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

/* iOS fix: hide the default arrow on the summary */
summary::-webkit-details-marker {
  display: none;
}

/* Buttons */
.button,
.button-secondary,
.button-custom,
button.shopify-payment-button__button--unbranded {
  --text-align: center;

  display: grid;
  align-content: center;
  text-decoration: none;
  text-align: var(--text-align);
  color: var(--button-color);
  appearance: none;
  background-color: var(--button-background-color);
  border: none;
  font-family: var(--font-paragraph--family);
  font-style: var(--font-paragraph--style);
  font-weight: var(--font-paragraph--weight);
  font-size: var(--font-paragraph--size);
  line-height: var(--font-paragraph--line-height);
  margin-block: 0;
  transition: color var(--animation-speed) var(--animation-easing),
    box-shadow var(--animation-speed) var(--animation-easing),
    background-color var(--animation-speed) var(--animation-easing);
  cursor: pointer;
  width: fit-content;
  box-shadow: inset 0 0 0 var(--button-border-width) var(--button-border-color);
  padding-block: var(--button-padding-block);
  padding-inline: var(--button-padding-inline);
}

.button {
  font-family: var(--button-font-family-primary);
  text-transform: var(--button-text-case-primary);
  border-radius: var(--style-border-radius-buttons-primary);
}

.button:not(.button-secondary, .button-unstyled) {
  outline-color: var(--button-focus-outline-color, var(--button-background-color));
}

.button-secondary {
  font-family: var(--button-font-family-secondary);
  text-transform: var(--button-text-case-secondary);
  border-radius: var(--style-border-radius-buttons-secondary);
}

button.shopify-payment-button__button--unbranded {
  font-family: var(--button-font-family-primary);
  text-transform: var(--button-text-case-primary);
}

textarea,
input:not([type='checkbox'], [type='radio']) {
  background-color: var(--color-input-background);
  border-color: var(--color-input-border);
}

textarea::placeholder,
input::placeholder {
  color: rgb(var(--color-input-text-rgb) / var(--opacity-muted-text));
}

textarea:not(:placeholder-shown)::placeholder,
input:not(:placeholder-shown)::placeholder {
  opacity: 0;
}

/* The declaration above is messing with buttons that have an attribute of hidden as it overwrites the display value */
.button[hidden] {
  display: none;
}

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

.button,
button.shopify-payment-button__button--unbranded {
  --button-color: var(--color-primary-button-text);
  --button-background-color: var(--color-primary-button-background);
  --button-border-color: var(--color-primary-button-border);
  --button-border-width: var(--style-border-width-primary);
  --button-focus-outline-color: var(--color-primary-button-focus-outline);
}

.button:hover,
button.shopify-payment-button__button--unbranded:hover:not([disabled]) {
  --button-color: var(--color-primary-button-hover-text);
  --button-background-color: var(--color-primary-button-hover-background);
  --button-border-color: var(--color-primary-button-hover-border);
}

.button-secondary {
  --button-color: var(--color-secondary-button-text);
  --button-background-color: var(--color-secondary-button-background);
  --button-border-color: var(--color-secondary-button-border);
  --button-border-width: var(--style-border-width-secondary);
}

.button-secondary:hover {
  --button-color: var(--color-secondary-button-hover-text);
  --button-background-color: var(--color-secondary-button-hover-background);
  --button-border-color: var(--color-secondary-button-hover-border);
}

.button-custom {
  --button-color: var(--color-primary-button-text);
  --button-background-color: var(--color-primary-button-background);
  --button-border-color: var(--color-primary-button-border);
  --button-border-width: var(--style-border-width-secondary);
  --button-focus-outline-color: var(--color-primary-button-focus-outline);

  font-family: var(--button-font-family-primary);
  text-transform: var(--button-text-case-primary);
  border-radius: var(--style-border-radius-buttons-primary);
  outline-color: var(--button-focus-outline-color, var(--button-background-color));
}

.button-custom:hover {
  --button-color: var(--color-primary-button-hover-text);
  --button-background-color: var(--color-primary-button-hover-background);
  --button-border-color: var(--color-primary-button-hover-border);
}

/* Needed to override the default Shopify styles */
button.shopify-payment-button__button--unbranded:hover:not([disabled]) {
  background-color: var(--button-background-color);
}

.button-unstyled {
  display: block;
  padding: 0;
  background-color: inherit;
  color: var(--color-foreground);
  border: 0;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  font-family: var(--font-paragraph--family);
  font-style: var(--font-paragraph--style);
  font-size: var(--font-paragraph--size);
}

.button-unstyled:hover {
  background-color: inherit;
}

/* Default hover dim for link-style buttons, scoped via :where() so component-specific
   hover rules (.facets__clear-all-link, .header-actions__action, etc.) still win. */
:where(.button-unstyled):hover {
  --hover-color-rgb: var(--color-foreground-rgb);

  color: rgb(var(--hover-color-rgb) / var(--opacity-70));
}

.button-unstyled--with-icon {
  color: var(--color-foreground);
  display: flex;
  gap: var(--gap-2xs);
  align-items: center;
}

.button-unstyled--transparent {
  background-color: transparent;
  box-shadow: none;
}

/* Caret icon transition */
.icon-caret svg {
  transition: transform var(--animation-speed) var(--animation-easing);
}

summary {
  display: flex;
  align-items: center;
  cursor: pointer;
  list-style: none;
  padding-block: var(--padding-sm);
}

summary:hover {
  color: rgb(var(--color-foreground-rgb) / var(--opacity-80));
}

/* Animate the UI elements in only after the view transition is complete */
.close-button {
  position: fixed;

  /* Keep the fixed close button clear of the status bar and inline-end notch (viewport-fit=cover) */
  top: max(var(--margin-lg), var(--safe-area-inset-top, 0px));
  inset-inline-end: max(var(--margin-lg), var(--safe-area-inset-right, 0px));
  width: var(--minimum-touch-target);
  height: var(--minimum-touch-target);
  z-index: var(--layer-flat);
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;

  /* For the outline radius */
  border-radius: 50%;
}

/* Safe-area env() values are physical; in RTL the button sits by the left-side notch */
[dir='rtl'] .close-button {
  inset-inline-end: max(var(--margin-lg), var(--safe-area-inset-left, 0px));
}

/* This triggers iOS < 16.4. The outline bug is not recognized as a lack of @supports */

@supports not (background-color: rgb(from red 150 g b / alpha)) {
  /**
    There is a bug in safari < 16.4 that causes the outline to not follow the elements border radius. This is a workaround.
    Using element selector to increase specificity.
  **/

  .close-button:focus-visible {
    outline: none;
    overflow: visible;
  }

  .close-button:focus-visible::after {
    content: '';
    position: absolute;
    inset: calc(-1 * var(--focus-outline-offset));
    border: var(--focus-outline-width) solid currentColor;
    border-radius: 50%;
    display: inherit;
  }
}

.dialog--closed .close-button {
  animation: elementSlideOutBottom calc(var(--animation-speed) * 0.5) var(--animation-easing) forwards;
}

.close-button:hover {
  background-color: transparent;
  opacity: 0.8;
}

.close-button svg {
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
}

/* Product media */
.product-media {
  display: flex;
  flex: 1;
}

.sticky-content {
  position: sticky;
  top: var(--sticky-header-offset, 0);
  z-index: var(--layer-flat);
}

@media screen and (min-width: 750px) {
  .sticky-content--desktop,
  .sticky-content--desktop.full-height--desktop > .group-block {
    position: sticky;
    top: var(--sticky-header-offset, 0);
    z-index: var(--layer-flat);
  }
}

/* Spacing style */
.spacing-style {
  --spacing-scale: var(--spacing-scale-md);

  @media screen and (min-width: 990px) {
    --spacing-scale: var(--spacing-scale-default);
  }

  /* Must disable this, when you use these with calc and another unit type, things break — see logo.liquid */
  /* stylelint-disable length-zero-no-unit */
  --padding-block: 0px;
  --padding-block-start: var(--padding-block, 0px);
  --padding-block-end: var(--padding-block, 0px);
  --padding-inline: 0px;
  --padding-inline-start: var(--padding-inline, 0px);
  --padding-inline-end: var(--padding-inline, 0px);
  --margin-block: 0px;
  --margin-block-start: var(--margin-block, 0px);
  --margin-block-end: var(--margin-block, 0px);
  --margin-inline: 0px;
  --margin-inline-start: var(--margin-inline, 0px);
  --margin-inline-end: var(--margin-inline, 0px);

  padding-block: calc(var(--padding-block-start) + var(--section-top-offset, 0px)) var(--padding-block-end);
  padding-inline: var(--padding-inline-start) var(--padding-inline-end);
  margin-block: var(--margin-block-start) var(--margin-block-end);
  margin-inline: var(--margin-inline-start) var(--margin-inline-end);
}

/* Size style */
.size-style {
  width: var(--size-style-width-mobile, var(--size-style-width));
  height: var(--size-style-height-mobile, var(--size-style-height));

  @media screen and (min-width: 750px) {
    width: var(--size-style-width);
    height: var(--size-style-height);
  }
}

/* Custom Typography style */
.custom-typography,
.custom-typography > * {
  font-family: var(--font-family);
  font-weight: var(--font-weight);
  text-transform: var(--text-transform);
  text-wrap: var(--text-wrap);
  line-height: var(--line-height);
  letter-spacing: var(--letter-spacing);
}

.custom-typography {
  h1 {
    line-height: var(--line-height--display, var(--line-height));
  }

  h2,
  h3,
  h4 {
    line-height: var(--line-height--heading, var(--line-height));
  }

  p {
    line-height: var(--line-height--body, var(--line-height));
  }
}

.custom-font-size,
.custom-font-size > * {
  font-size: var(--font-size);
}

.custom-font-weight,
.custom-font-weight > * {
  font-weight: var(--font-weight);
}

/* Border override style */
.border-style {
  border-width: var(--border-width);
  border-style: var(--border-style);
  border-color: var(--border-color);
  border-radius: var(--border-radius);
}

/* Gap scaling style */
.gap-style,
.layout-panel-flex {
  --gap-scale: var(--spacing-scale-md);

  @media screen and (min-width: 990px) {
    --gap-scale: var(--spacing-scale-default);
  }
}

.layout-panel-flex {
  display: flex;
  gap: var(--gap);
  height: 100%;
}

.shopify-block:has(> [shopify-block-empty]) {
  display: none;
}

.layout-panel-flex--row {
  flex-flow: row var(--flex-wrap);
  justify-content: var(--horizontal-alignment);
  align-items: var(--vertical-alignment);
}

.layout-panel-flex--column {
  flex-flow: column var(--flex-wrap);
  align-items: var(--horizontal-alignment);
  justify-content: var(--vertical-alignment);
}

@media screen and (max-width: 749px) {
  .mobile-column {
    flex-flow: column nowrap;
    align-items: var(--horizontal-alignment);
    justify-content: var(--vertical-alignment-mobile);
  }

  .layout-panel-flex--row:not(.mobile-column) {
    flex-wrap: var(--flex-wrap-mobile);
    height: auto;

    > .menu {
      flex: 1 1 min-content;
    }

    > .text-block {
      flex: 1 1 var(--max-width--display-tight);
    }

    > .image-block {
      flex: 1 1 var(--size-style-width-mobile-min);
    }

    > .button {
      flex: 0 0 fit-content;
    }

    > .group-block--height-fill {
      height: calc(var(--section-min-height, auto) - var(--section-height-offset, 0px));
    }
  }
}

@media screen and (min-width: 750px) {
  .layout-panel-flex {
    flex-direction: var(--flex-direction);
  }
}

/* Form fields */
.field {
  position: relative;
  width: 100%;
  display: flex;
  transition: box-shadow var(--animation-speed) ease;
}

.field__input {
  flex-grow: 1;
  text-align: start;
  border-radius: var(--style-border-radius-inputs);
  transition: box-shadow var(--animation-speed) ease, background-color var(--animation-speed) ease;
  padding: var(--input-padding);
  box-shadow: var(--input-box-shadow);
  background-color: var(--color-input-background);
  color: var(--color-input-text);
  border: none;
  outline: none;
  font-size: var(--font-paragraph--size);

  &:autofill {
    background-color: var(--color-input-background);
    color: var(--color-input-text);
  }
}

.field__input:focus {
  box-shadow: var(--input-box-shadow-focus);
}

.field__input--button-radius {
  border-radius: var(--style-border-radius-buttons-primary);
}

.field__input--button-padding {
  padding-inline: var(--padding-3xl);
}

.field__label {
  color: rgb(var(--color-input-text-rgb) / var(--opacity-80));
  font-size: var(--font-paragraph--size);
  inset-inline-start: var(--input-padding-x);
  top: 50%;
  transform: translateY(-50%);
  margin-bottom: 0;
  pointer-events: none;
  position: absolute;
  transition: top var(--animation-speed) ease, font-size var(--animation-speed) ease;
}

/* RTE styles */
.rte,
.shopify-policy__title {
  :is(h1, h2, h3, h4, h5, h6) {
    margin-block: clamp(1.5rem, 1em * 3.3, 2.5rem) var(--font-heading--spacing);
  }

  :first-child:is(p, h1, h2, h3, h4, h5, h6),
  :first-child:empty + :is(p, h1, h2, h3, h4, h5, h6) {
    margin-block-start: 0;
  }

  ul,
  ol {
    margin-block-start: 0;
    padding-inline-start: 1.5em;
  }

  /* Only apply margin-block-end to the higher level list, not nested lists */
  :is(ul, ol):not(:is(ul, ol) :is(ul, ol)) {
    margin-block-end: 1em;
  }

  blockquote {
    margin-inline: 1.5em 2.3em;
    margin-block: 3.8em;
    padding-inline-start: 0.8em;
    border-inline-start: 1.5px solid rgb(var(--color-foreground-rgb) / var(--opacity-25));
    font-style: italic;
    font-weight: 500;
  }

  .rte-table-wrapper {
    overflow-x: auto;
  }

  table {
    /* stylelint-disable-next-line declaration-no-important */
    width: 100% !important;
    border-collapse: collapse;
  }

  tr:not(:has(td)),
  thead {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    font-weight: bold;
    text-transform: uppercase;
  }

  tr:has(td) {
    border-bottom: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10));
  }

  th,
  td {
    text-align: start;
    padding-inline: var(--padding-md);
    padding-block: var(--padding-sm);
  }
}

.shopify-policy__container {
  padding-block: var(--padding-xl);
}

/* Radio buttons and checkboxes - shared base styles */
:where(input[type='radio']),
:where(input[type='checkbox']) {
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  aspect-ratio: 1;
  margin: 0;
  margin-inline-end: var(--padding-3xs);
  padding: 0;
  border: var(--checkbox-border);
  appearance: none;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}

/* Radio buttons */
input[type='radio'] {
  border-radius: var(--style-border-radius-50);
  background: transparent;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

:where(input[type='radio']):checked {
  border-color: var(--color-foreground);
  background: var(--color-background);
}

:where(input[type='radio']):checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%; /* stylelint-disable-line csstools/use-logical -- centring pair with a physical translate(-50%) */
  transform: translate(-50%, -50%);
  width: calc(var(--checkbox-size) / 2);
  height: calc(var(--checkbox-size) / 2);
  background: var(--color-foreground);
  border-radius: var(--style-border-radius-50);
  transition: background 0.2s ease;
}

:where(input[type='radio']):disabled {
  border-color: var(--input-disabled-border-color);
  background-color: var(--input-disabled-background-color);
  cursor: not-allowed;
}

:where(input[type='radio']):disabled:checked::after {
  background: var(--input-disabled-background-color);
}

:where(input[type='radio']):not(:disabled):hover {
  border-color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
}

:where(input[type='radio']):not(:disabled):hover:checked {
  border-color: var(--color-foreground);
  background-color: var(--color-background);
}

:where(input[type='radio']):not(:disabled):hover:checked::after {
  background: rgb(var(--color-foreground-rgb) / var(--opacity-85));
}

/* Checkboxes */
:where(input[type='checkbox']) {
  border-radius: var(--checkbox-border-radius);
  background-color: var(--color-background);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

:where(input[type='checkbox']):checked {
  background-color: var(--color-foreground);
  border-color: var(--color-foreground);
}

:where(input[type='checkbox']):checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%; /* stylelint-disable-line csstools/use-logical -- centring pair with a physical translate(-50%) */
  transform: translate(-50%, -50%);
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  background-color: var(--color-background);
  mask-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658' stroke='black' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

:where(input[type='checkbox']):not(:disabled):hover {
  border-color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
}

:where(input[type='checkbox']):not(:disabled):hover:checked {
  border-color: var(--color-foreground);
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-85));
}

:where(input[type='checkbox']):disabled {
  background-color: var(--input-disabled-background-color);
  border-color: var(--input-disabled-border-color);
  cursor: not-allowed;
}

:where(input[type='checkbox']):disabled:checked::after {
  background-color: var(--input-disabled-text-color);
}

/* Shared styles for radio buttons and checkboxes */
:where(input[type='radio']) + label,
:where(input[type='checkbox']) + label {
  display: inline;
  vertical-align: middle;
  cursor: pointer;
}

:where(input[type='radio']):disabled + label,
:where(input[type='checkbox']):disabled + label {
  color: var(--input-disabled-text-color);
  cursor: not-allowed;
}

/* Animation declarations - to be kept at the bottom of the file for ease of find */
@keyframes grow {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes move-and-fade {
  from {
    transform: translate(var(--start-x, 0), var(--start-y, 0));
    opacity: var(--start-opacity, 0);
  }

  to {
    transform: translate(var(--end-x, 0), var(--end-y, 0));
    opacity: var(--end-opacity, 1);
  }
}

@keyframes slideInTopViewTransition {
  from {
    transform: translateY(100px);
  }
}

@keyframes elementSlideInTop {
  from {
    margin-top: var(--padding-sm);
    opacity: 0;
  }

  to {
    margin-top: 0;
    opacity: 1;
  }
}

@keyframes elementSlideOutTop {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(var(--padding-sm));
    opacity: 0;
  }
}

@keyframes elementSlideOutBottom {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(calc(-1 * var(--padding-sm)));
    opacity: 0;
  }
}

@keyframes thumbnailsSlideInTop {
  from {
    transform: translateY(calc(-50% + var(--margin-lg)));
    opacity: 0;
  }

  to {
    transform: translateY(-50%);
    opacity: 1;
  }
}

@keyframes thumbnailsSlideOutTop {
  from {
    transform: translateY(-50%);
    opacity: 1;
  }

  to {
    transform: translateY(calc(-50% + var(--margin-lg)));
    opacity: 0;
  }
}

@keyframes thumbnailsSlideInBottom {
  from {
    transform: translateY(100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes thumbnailsSlideOutBottom {
  from {
    transform: translateY(0);
    opacity: 1;
  }

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

@keyframes search-element-slide-in-bottom {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }

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

@keyframes search-element-slide-out-bottom {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

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

@keyframes backdropFilter {
  from {
    backdrop-filter: brightness(1);
  }

  to {
    backdrop-filter: brightness(0.75);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes modalSlideInTop {
  from {
    transform: translateY(var(--padding-sm));
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes modalSlideOutTop {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(var(--padding-sm));
    opacity: 0;
  }
}

/* Slideshow Arrow Hover Animation - must stay in base.css for proper CSS cascade */

slideshow-container[animate-arrows]:hover > slideshow-arrows .slideshow-control,
slideshow-component:focus-within > slideshow-container[animate-arrows] > slideshow-arrows .slideshow-control {
  animation: arrowsSlideIn var(--animation-speed) var(--animation-easing) forwards;
}

@keyframes arrowsSlideIn {
  from {
    transform: translate(var(--padding-sm), 0);
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.section-resource-list,
.section-carousel {
  row-gap: var(--gap);
}

.section-resource-list__content {
  display: flex;
  flex-direction: column;
  align-items: var(--horizontal-alignment);
  gap: var(--gap);
  width: 100%;
}

.section-resource-list__header:is(:empty, :has(.group-block-content:empty)),
.section-resource-list__content:empty {
  display: none;
}

:where(.section-resource-list.section--full-width) product-card[data-product-transition] > .group-block,
:where(.section-carousel.section--full-width) product-card[data-product-transition] > .group-block {
  @media screen and (max-width: 749px) {
    padding-inline: max(var(--padding-xs), var(--padding-inline-start))
      max(var(--padding-xs), var(--padding-inline-end));
  }
}

/* Base styles */
.group-block,
.group-block-content {
  position: relative;
}

.group-block:has(> video-background-component) {
  overflow: hidden;
}

.group-block-content {
  height: 100%;
  width: 100%;
}

/* Container styles */
.section-content-wrapper.section-content-wrapper:where(.layout-panel-flex) .group-block--fill {
  flex: 1;
}

/* Flex behavior for width variants */
.layout-panel-flex--row > .group-block--width-fit {
  flex: 0;
}

.layout-panel-flex--row > .group-block--width-fill {
  flex: 1;
}

.layout-panel-flex--row > .group-block--width-custom {
  flex-basis: var(--size-style-width);
}

/* Dimension utilities - Height */
.group-block--height-fit {
  height: auto;
}

.group-block--height-custom,
.group-block--height-fill {
  height: var(--size-style-height);
}

/* Flex behavior for height variants */
.layout-panel-flex--column > .group-block--height-fit {
  flex: 0 1 auto;
}

.layout-panel-flex--column > .group-block--height-fill {
  flex: 1;
}

.layout-panel-flex--column > .group-block--height-custom {
  flex-basis: var(--size-style-height);
}

/* Global scrollbar styles */

/* Webkit browsers */
::-webkit-scrollbar {
  width: 20px;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-40));
  border-radius: 20px;
  border: 6px solid transparent;
  background-clip: content-box;
  transition: background-color 0.2s;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-60));
}

/* Prevent iOS zoom on input focus by ensuring minimum 16px font size on mobile */
@media screen and (max-width: 1200px) {
  input,
  textarea,
  select,
  /* Higher specificity to override type preset classes like .paragraph, .h1, etc. */
  .paragraph.paragraph input,
  .paragraph.paragraph textarea,
  .paragraph.paragraph select,
  .h1.h1 input,
  .h1.h1 textarea,
  .h1.h1 select,
  .h2.h2 input,
  .h2.h2 textarea,
  .h2.h2 select,
  .h3.h3 input,
  .h3.h3 textarea,
  .h3.h3 select,
  .h4.h4 input,
  .h4.h4 textarea,
  .h4.h4 select,
  .h5.h5 input,
  .h5.h5 textarea,
  .h5.h5 select,
  .h6.h6 input,
  .h6.h6 textarea,
  .h6.h6 select {
    font-size: max(1rem, 100%);
  }
}

/* When the header is transparent, and when there is no header-section below it, offset the first main-section with
 * the height of the header
 */
main > .shopify-section:first-child .section:not(.disable-section-top-offset) {
  &.spacing-style,
  .spacing-style {
    --section-top-offset: calc(var(--header-height) * var(--transparent-header-offset-boolean));

    /* Any nested sections should not be offset */
    .spacing-style {
      --section-top-offset: 0px;
    }
  }

  /* Make sticky content immediately stick to the top of the page */
  .sticky-content {
    margin-top: calc(var(--header-height) * var(--transparent-header-offset-boolean) * -1);
  }
}

/* Ovoloandoracle visual refinement — uses existing theme structure/settings only. */
:root {
  --oa-forest: #173c2c;
  --oa-sage: #879b7a;
  --oa-oat: #e7dcc8;
  --oa-cream: #f2e8d5;
  --oa-terracotta: #a95f46;
  --oa-gold: #c6a15b;
  --oa-olive: #344c3d;
  --oa-rose: #c9a99a;
  --oa-charcoal: #292a25;
  --oa-light: #f8f1e5;
  --oa-soft-shadow: 0 10px 30px rgb(41 42 37 / 0.08);
  --oa-hover-shadow: 0 16px 38px rgb(41 42 37 / 0.13);
}

body {
  background-color: var(--oa-cream);
}

/* Product and editorial cards: warmer, softer furniture-store presentation. */
.product-card,
.collection-card,
.predictive-search-results__card--product,
.predictive-search-results__card {
  border-radius: 14px;
}

.product-card > .group-block,
.collection-card > .group-block,
.resource-card,
.card-gallery {
  border-radius: 14px;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .product-card:hover,
  .collection-card:hover,
  .predictive-search-results__card--product:hover,
  .predictive-search-results__card:hover {
    box-shadow: var(--oa-hover-shadow);
    transform: translateY(-2px);
  }
}

/* Keep keyboard navigation clear after adding rounded/shadowed surfaces. */
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--oa-gold);
  outline-offset: 3px;
}

/* Inputs and drawers visually match the service/policy pages. */
textarea,
input:not([type='checkbox'], [type='radio']),
select {
  transition: border-color var(--hover-transition-duration) ease,
    box-shadow var(--hover-transition-duration) ease;
}

textarea:focus,
input:not([type='checkbox'], [type='radio']):focus,
select:focus {
  border-color: var(--oa-gold);
  box-shadow: 0 0 0 3px rgb(198 161 91 / 0.14);
}

/* Buttons retain all original Liquid behavior and Shopify payment hooks. */
.button,
.button-secondary,
.button-custom,
button.shopify-payment-button__button--unbranded {
  min-height: 44px;
  letter-spacing: 0.01em;
}

@media (hover: hover) {
  .button:not([disabled]):hover,
  .button-secondary:not([disabled]):hover,
  .button-custom:not([disabled]):hover {
    box-shadow: 0 8px 22px rgb(23 60 44 / 0.16);
  }
}

/* Rich text gets more comfortable editorial rhythm without changing content. */
.rte :is(h1, h2, h3) {
  text-wrap: balance;
}

.rte p,
.rte li {
  text-wrap: pretty;
}

/* Tables used by policy/help content remain usable on smaller screens. */
.rte table {
  border-radius: 12px;
  overflow: hidden;
}

/* Mobile: keep the visual treatment light and avoid expensive hover effects. */
@media (max-width: 749px) {
  .product-card,
  .collection-card,
  .predictive-search-results__card--product,
  .predictive-search-results__card {
    box-shadow: 0 6px 20px rgb(41 42 37 / 0.06);
  }
}

/* Ovoloandoracle — refined home merchandising rhythm.
   Presentation only: no Liquid, section schema, product data, media or Shopify behavior is changed. */
.ui-test-product-list .section-resource-list__header {
  padding-inline: clamp(24px, 3.4vw, 64px);
}

/* Full-width product rails previously sat too close to the viewport edge.
   Give the first card a deliberate editorial inset while preserving horizontal scrolling. */
@media screen and (min-width: 750px) {
  .ui-test-product-list .section--full-width .resource-list__carousel slideshow-slides {
    padding-inline-start: clamp(40px, 3.8vw, 72px);
    scroll-padding-inline-start: clamp(40px, 3.8vw, 72px);
  }

  .ui-test-product-list .section--full-width .resource-list--grid {
    margin-inline: clamp(40px, 3.8vw, 72px);
    width: auto;
  }
}

@media screen and (max-width: 749px) {
  .ui-test-product-list .section-resource-list__header {
    padding-inline: 18px;
  }

  .ui-test-product-list .section--full-width .resource-list__carousel slideshow-slides {
    padding-inline-start: 18px;
    scroll-padding-inline-start: 18px;
  }
}

/* Product-list sections: warmer editorial spacing and stronger hierarchy. */
.ui-test-product-list .section-resource-list {
  row-gap: clamp(22px, 2.4vw, 38px);
}

.ui-test-product-list .section-resource-list__header :is(h1, h2, h3) {
  color: var(--oa-charcoal);
  letter-spacing: -0.025em;
  line-height: 1.12;
}

.ui-test-product-list .resource-list__item,
.ui-test-product-list .resource-list__slide {
  min-width: 0;
}

/* Cards remain the theme's native product cards; only their surface treatment changes. */
.ui-test-product-list product-card > .group-block {
  border-radius: 20px;
  overflow: clip;
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.ui-test-product-list product-card .card-gallery,
.ui-test-product-list product-card .product-media,
.ui-test-product-list product-card img {
  border-radius: 18px;
}

.ui-test-product-list product-card :is(h3, .product-card__title, [class*='product-title']) {
  line-height: 1.38;
  letter-spacing: -0.01em;
}

.ui-test-product-list product-card :is(.price, [class*='price']) {
  color: var(--oa-forest);
  font-weight: 650;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .ui-test-product-list product-card:hover > .group-block {
    transform: translateY(-3px);
    box-shadow: 0 14px 34px rgb(41 42 37 / 0.11);
  }
}

/* Give content sections a softer transition against the warm store background without
   changing merchant-controlled section colors. */
.content-for-layout > .shopify-section:not(.header-section) {
  isolation: isolate;
}

/* Drawers and modal-like surfaces: consistent premium rounding, no behavior changes. */
:where(.cart-drawer, .drawer, dialog, .modal, .predictive-search) {
  --oa-surface-radius: 18px;
}

:where(.cart-drawer, .drawer, dialog, .modal) :is(.dialog__content, .drawer__inner, [class*='drawer__content']) {
  border-radius: var(--oa-surface-radius, 18px);
}

/* Navigation polish while keeping existing header structure and logo untouched. */
.header-section :is(a, button) {
  transition: color 180ms ease, opacity 180ms ease, background-color 180ms ease;
}

@media (hover: hover) {
  .header-section nav a:hover {
    opacity: .78;
  }
}

/* Keep reduced-motion visitors free from decorative movement. */
@media (prefers-reduced-motion: reduce) {
  .ui-test-product-list product-card > .group-block,
  .header-section :is(a, button) {
    transition: none;
  }
}


/* Ovoloandoracle V3 — stronger merchandising polish and balanced horizontal breathing room. */
.ui-test-product-list .section-resource-list__header,
.ui-test-product-list .section-resource-list__content {
  padding-inline: clamp(30px, 4.6vw, 82px);
}

@media screen and (min-width: 750px) {
  .ui-test-product-list .section--full-width .resource-list__carousel slideshow-slides {
    padding-inline-start: clamp(56px, 5vw, 92px);
    padding-inline-end: clamp(56px, 5vw, 92px);
    scroll-padding-inline: clamp(56px, 5vw, 92px);
  }

  .ui-test-product-list .section--full-width .resource-list--grid {
    margin-inline: clamp(56px, 5vw, 92px);
  }
}

/* Make the product rail feel like a designed furniture showroom while preserving native cards. */
.ui-test-product-list .resource-list__carousel {
  padding-block: clamp(8px, 1.2vw, 18px) clamp(18px, 2vw, 30px);
}

.ui-test-product-list product-card {
  border-radius: 24px;
}

.ui-test-product-list product-card .product-card__content {
  background: rgb(248 241 229 / .76);
  border: 1px solid rgb(198 161 91 / .18);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 9px 26px rgb(41 42 37 / .07);
  transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease;
}

.ui-test-product-list product-card :is(.card-gallery, .product-media) {
  overflow: hidden;
  border-radius: 22px 22px 16px 16px;
}

.ui-test-product-list product-card img {
  transition: transform 420ms cubic-bezier(.2,.7,.2,1);
}

.ui-test-product-list product-card :is(.product-card__title, [class*='product-title']) {
  color: var(--oa-charcoal);
  font-weight: 600;
}

.ui-test-product-list product-card :is(.price, [class*='price']) {
  color: var(--oa-forest);
  font-weight: 700;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .ui-test-product-list product-card:hover .product-card__content {
    transform: translateY(-5px);
    border-color: rgb(198 161 91 / .38);
    box-shadow: 0 20px 44px rgb(41 42 37 / .14);
  }

  .ui-test-product-list product-card:hover img {
    transform: scale(1.018);
  }
}

/* More intentional section heading treatment without replacing merchant text. */
.ui-test-product-list .section-resource-list__header {
  position: relative;
}

.ui-test-product-list .section-resource-list__header :is(h1, h2, h3) {
  color: var(--oa-forest);
  letter-spacing: -.035em;
}

.ui-test-product-list .section-resource-list__header :is(h1, h2, h3)::after {
  content: '';
  display: block;
  width: 44px;
  height: 3px;
  margin-top: 12px;
  border-radius: 999px;
  background: var(--oa-gold);
}

/* Existing carousel controls become quieter premium controls; functionality stays native. */
.ui-test-product-list .resource-list__carousel :is(.slideshow-control, button[class*='slideshow-control']) {
  border-radius: 999px;
}

@media screen and (max-width: 749px) {
  .ui-test-product-list .section-resource-list__header,
  .ui-test-product-list .section-resource-list__content {
    padding-inline: 20px;
  }

  .ui-test-product-list .section--full-width .resource-list__carousel slideshow-slides {
    padding-inline-start: 20px;
    padding-inline-end: 20px;
    scroll-padding-inline: 20px;
  }

  .ui-test-product-list product-card .product-card__content {
    border-radius: 18px;
    box-shadow: 0 7px 20px rgb(41 42 37 / .07);
  }
}

/* Ovoloandoracle V4 — inset the PRODUCT ROW itself from both section edges.
   This targets the card rail shown in the theme editor, without changing card data or section settings. */
@media screen and (min-width: 750px) {
  .ui-test-product-list .resource-list--grid,
  .ui-test-product-list .resource-list--editorial {
    margin-inline: clamp(34px, 3.2vw, 58px);
  }

  .ui-test-product-list .resource-list__carousel slideshow-slides {
    padding-inline-start: clamp(34px, 3.2vw, 58px);
    padding-inline-end: clamp(34px, 3.2vw, 58px);
    scroll-padding-inline: clamp(34px, 3.2vw, 58px);
  }
}

@media screen and (max-width: 749px) {
  .ui-test-product-list .resource-list--grid,
  .ui-test-product-list .resource-list--editorial {
    margin-inline: 16px;
  }

  .ui-test-product-list .resource-list__carousel slideshow-slides {
    padding-inline-start: 16px;
    padding-inline-end: 16px;
    scroll-padding-inline: 16px;
  }
}


/* Ovoloandoracle V5 — homepage art direction aligned with the 14 branded pages.
   Visual-only rules: existing sections, blocks, media, controls and Shopify behavior remain intact. */
.template-index .content-for-layout {
  background: #f2e8d5;
}

/* Consistent breathing room and section rhythm. */
.template-index .content-for-layout > .shopify-section {
  position: relative;
}
.template-index .content-for-layout > .shopify-section:not(:first-child) {
  border-top: 1px solid rgb(198 161 91 / .12);
}

/* Hero: turn the native hero into a framed editorial opening without touching its media/logo. */
.template-index .content-for-layout > .shopify-section:first-child .section,
.template-index .content-for-layout > .shopify-section:first-child [class*='hero'] {
  border-radius: 0 0 34px 34px;
  overflow: clip;
}
.template-index .content-for-layout > .shopify-section:first-child :is(.button, a[class*='button']) {
  border-radius: 999px;
  min-height: 48px;
  padding-inline: 26px;
  box-shadow: 0 10px 24px rgb(23 60 44 / .18);
}

/* New arrivals: generous inset, editorial title and warmer showroom cards. */
.template-index .ui-test-product-list {
  background:
    radial-gradient(circle at 94% 4%, rgb(198 161 91 / .10), transparent 24%),
    linear-gradient(180deg, #f2e8d5 0%, #eadfc9 100%);
}
.template-index .ui-test-product-list .section-resource-list__header {
  padding-inline: clamp(42px, 6vw, 104px);
  padding-top: clamp(10px, 1.5vw, 24px);
}
.template-index .ui-test-product-list .section-resource-list__header :is(h1,h2,h3) {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(2rem, 3.3vw, 3.45rem);
  font-weight: 500;
  color: #173c2c;
  line-height: 1.02;
}
.template-index .ui-test-product-list .section-resource-list__header :is(h1,h2,h3)::before {
  content: 'MAISON & MOBILIER';
  display: block;
  margin-bottom: 12px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .20em;
  color: #a95f46;
}
.template-index .ui-test-product-list .section-resource-list__header :is(h1,h2,h3)::after {
  width: 58px;
  height: 2px;
  background: #c6a15b;
}
@media screen and (min-width: 750px) {
  .template-index .ui-test-product-list .resource-list--grid,
  .template-index .ui-test-product-list .resource-list--editorial {
    margin-inline: clamp(52px, 5.4vw, 98px);
  }
  .template-index .ui-test-product-list .resource-list__carousel slideshow-slides {
    padding-inline: clamp(52px, 5.4vw, 98px);
    scroll-padding-inline: clamp(52px, 5.4vw, 98px);
  }
}
.template-index .ui-test-product-list product-card .product-card__content,
.template-index .ui-test-product-list product-card > .group-block {
  border-radius: 26px;
  border: 1px solid rgb(198 161 91 / .20);
  background: rgb(248 241 229 / .90);
  box-shadow: 0 12px 34px rgb(41 42 37 / .09);
}
.template-index .ui-test-product-list product-card :is(.card-gallery,.product-media,img) {
  border-radius: 24px 24px 17px 17px;
}

/* Collection cards: a more deliberate gallery block, preserving the configured collections. */
.template-index .shopify-section:has(.collection-list) {
  background: #e7dcc8;
}
.template-index .collection-list {
  padding-inline: clamp(20px, 3.2vw, 58px);
}
.template-index .collection-list :is(.collection-card, [class*='collection-card']) {
  overflow: clip;
  border-radius: 28px;
  box-shadow: 0 14px 36px rgb(41 42 37 / .10);
  transition: transform 240ms ease, box-shadow 240ms ease;
}
.template-index .collection-list [class*='collection-title'] {
  backdrop-filter: blur(8px);
}
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .template-index .collection-list :is(.collection-card, [class*='collection-card']):hover {
    transform: translateY(-5px);
    box-shadow: 0 22px 48px rgb(41 42 37 / .14);
  }
}

/* Existing carousel section becomes the dark-green visual anchor used throughout the policy pages. */
.template-index .shopify-section:has(.carousel) .section {
  padding-inline: clamp(18px, 3vw, 48px);
}
.template-index .shopify-section:has(.carousel) :is(.carousel, [class*='carousel-content']) {
  border-radius: 30px;
  overflow: clip;
}

/* Marquee: restrained brand ribbon rather than a generic template strip. */
.template-index .shopify-section:has(.marquee__wrapper) {
  background: #a95f46;
  color: #f8f1e5;
}
.template-index .marquee__wrapper {
  font-family: Georgia, 'Times New Roman', serif;
  letter-spacing: -.02em;
}

/* Editorial split: rounded magazine card, matching About/Universe pages. */
.template-index .media-with-content {
  margin: clamp(26px, 4vw, 60px) clamp(20px, 4.5vw, 82px);
  width: auto;
  border-radius: 32px;
  overflow: clip;
  box-shadow: 0 20px 50px rgb(41 42 37 / .12);
}
.template-index .media-with-content :is(h1,h2,h3) {
  font-family: Georgia, 'Times New Roman', serif;
  letter-spacing: -.025em;
}

/* Featured product: deep olive panel with softer inner surfaces. */
.template-index .shopify-section:has(.featured-product) {
  background: #344c3d;
}
.template-index .featured-product,
.template-index [class*='featured-product'] {
  --oa-feature-radius: 28px;
}
.template-index .featured-product :is(img, .product-media) {
  border-radius: var(--oa-feature-radius);
}

/* Native buttons across homepage share the rounded brand language. */
.template-index .content-for-layout :is(.button, button[class*='button']):not(.slideshow-control) {
  border-radius: 999px;
}

@media screen and (max-width: 749px) {
  .template-index .ui-test-product-list .section-resource-list__header {
    padding-inline: 20px;
  }
  .template-index .ui-test-product-list .resource-list__carousel slideshow-slides {
    padding-inline: 18px;
    scroll-padding-inline: 18px;
  }
  .template-index .media-with-content {
    margin: 22px 16px;
    border-radius: 24px;
  }
  .template-index .content-for-layout > .shopify-section:first-child .section,
  .template-index .content-for-layout > .shopify-section:first-child [class*='hero'] {
    border-radius: 0 0 24px 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .template-index .collection-list :is(.collection-card, [class*='collection-card']) {
    transition: none;
  }
}

/* OVOLOANDORACLE V6 — homepage depth pass. Visual-only overrides; no schema or behavior changes. */
.template-index {
  --oa-forest:#173c2c;
  --oa-olive:#344c3d;
  --oa-sage:#879b7a;
  --oa-oat:#e7dcc8;
  --oa-cream:#f2e8d5;
  --oa-terra:#a95f46;
  --oa-gold:#c6a15b;
  --oa-rose:#c9a99a;
  --oa-ink:#292a25;
  --oa-light:#f8f1e5;
}
.template-index .content-for-layout {
  background: linear-gradient(180deg,#f8f1e5 0%,#f2e8d5 45%,#e7dcc8 100%);
}
.template-index .content-for-layout > .shopify-section {
  position: relative;
  isolation: isolate;
}
.template-index .content-for-layout > .shopify-section:not(:first-child) {
  padding-block: clamp(12px,2vw,28px);
}

/* Hero gets a framed editorial treatment while keeping the merchant-selected media intact. */
@media screen and (min-width: 750px) {
  .template-index .content-for-layout > .shopify-section:first-child {
    padding: 18px clamp(24px,3.4vw,64px) 30px;
    background: var(--oa-cream);
  }
  .template-index .content-for-layout > .shopify-section:first-child .section,
  .template-index .content-for-layout > .shopify-section:first-child [class*='hero'] {
    border-radius: 34px;
    box-shadow: 0 22px 55px rgb(41 42 37 / .13);
    border: 1px solid rgb(198 161 91 / .20);
  }
}
.template-index .content-for-layout > .shopify-section:first-child :is(h1,h2,h3) {
  font-family: Georgia,'Times New Roman',serif;
  letter-spacing: -.035em;
  text-wrap: balance;
}

/* New arrivals becomes a raised showroom panel rather than a flat strip. */
.template-index .shopify-section:has(.ui-test-product-list) {
  background: var(--oa-cream);
  padding-inline: clamp(14px,2.4vw,42px);
}
.template-index .ui-test-product-list {
  width: min(100%, 1540px);
  margin-inline: auto;
  border-radius: 34px;
  border: 1px solid rgb(198 161 91 / .18);
  box-shadow: 0 22px 55px rgb(41 42 37 / .10);
  overflow: clip;
  padding-block: clamp(18px,2.5vw,38px);
}
.template-index .ui-test-product-list product-card {
  transition: transform 240ms ease, filter 240ms ease;
}
.template-index .ui-test-product-list product-card .product-card__content,
.template-index .ui-test-product-list product-card > .group-block {
  overflow: clip;
  box-shadow: 0 12px 28px rgb(41 42 37 / .10), inset 0 0 0 1px rgb(255 255 255 / .45);
}
.template-index .ui-test-product-list product-card :is(.price,.price__regular,.price-item) {
  color: var(--oa-forest);
  font-weight: 700;
}
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .template-index .ui-test-product-list product-card:hover {
    transform: translateY(-6px);
    filter: saturate(1.02);
  }
}

/* Carousel: inset dark-green feature island, visually separated from product showroom. */
.template-index .shopify-section:has(.carousel) {
  background: linear-gradient(180deg,var(--oa-cream) 0 45%,var(--oa-oat) 45% 100%);
  padding-inline: clamp(16px,4vw,74px);
}
.template-index .shopify-section:has(.carousel) .section {
  max-width: 1480px;
  margin-inline: auto;
  border-radius: 34px;
  overflow: clip;
  box-shadow: 0 22px 52px rgb(23 60 44 / .16);
  border: 1px solid rgb(198 161 91 / .22);
}

/* Collections: layered gallery on an oat panel. */
.template-index .shopify-section:has(.collection-list) {
  background: var(--oa-oat);
  padding-inline: clamp(14px,3vw,52px);
}
.template-index .shopify-section:has(.collection-list) > .section,
.template-index .shopify-section:has(.collection-list) .section {
  max-width: 1540px;
  margin-inline: auto;
}
.template-index .collection-list :is(.collection-card,[class*='collection-card']) {
  border: 1px solid rgb(198 161 91 / .18);
  background: var(--oa-light);
}
.template-index .collection-list :is(img,.image-block) {
  transition: transform 500ms cubic-bezier(.2,.65,.25,1);
}
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .template-index .collection-list :is(.collection-card,[class*='collection-card']):hover :is(img,.image-block) {
    transform: scale(1.025);
  }
}

/* Marquee is now a floating terracotta ribbon with breathing room. */
.template-index .shopify-section:has(.marquee__wrapper) {
  background: var(--oa-oat);
  padding: 8px clamp(18px,4vw,72px) 24px;
}
.template-index .shopify-section:has(.marquee__wrapper) .section,
.template-index .marquee__wrapper {
  border-radius: 999px;
  overflow: clip;
  box-shadow: 0 12px 28px rgb(169 95 70 / .18);
}

/* Divider becomes intentional whitespace instead of a dead gap. */
.template-index .shopify-section:has(.divider) {
  background: var(--oa-oat);
}

/* Editorial media/content: two-layer card with a warm frame. */
.template-index .shopify-section:has(.media-with-content) {
  background: linear-gradient(180deg,var(--oa-oat),var(--oa-cream));
  padding-block: clamp(16px,3vw,42px);
}
.template-index .media-with-content {
  border: 1px solid rgb(198 161 91 / .22);
  box-shadow: 0 24px 60px rgb(41 42 37 / .13);
}
.template-index .media-with-content :is(.button,a[class*='button']) {
  box-shadow: 0 10px 22px rgb(23 60 44 / .14);
}

/* Featured product closes the page as a deep, premium showroom section. */
.template-index .shopify-section:has(.featured-product) {
  padding: clamp(28px,5vw,74px) clamp(16px,4vw,72px);
  background:
    radial-gradient(circle at 92% 8%,rgb(198 161 91 / .14),transparent 24%),
    linear-gradient(135deg,var(--oa-olive),var(--oa-forest));
}
.template-index .shopify-section:has(.featured-product) > .section,
.template-index .shopify-section:has(.featured-product) .section {
  max-width: 1480px;
  margin-inline: auto;
  border-radius: 34px;
  overflow: clip;
  border: 1px solid rgb(198 161 91 / .28);
  box-shadow: 0 26px 65px rgb(0 0 0 / .18);
}

/* Consistent small details: elegant focus, controls and rounded media. */
.template-index .content-for-layout :is(input,select,textarea) {
  border-radius: 14px;
}
.template-index .content-for-layout :is(button,a)[class*='button'] {
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .template-index .content-for-layout :is(button,a)[class*='button']:hover {
    transform: translateY(-2px);
  }
}
.template-index .content-for-layout :focus-visible {
  outline: 2px solid var(--oa-gold);
  outline-offset: 3px;
}

@media screen and (max-width: 749px) {
  .template-index .content-for-layout > .shopify-section:not(:first-child) { padding-block: 10px; }
  .template-index .shopify-section:has(.ui-test-product-list),
  .template-index .shopify-section:has(.carousel),
  .template-index .shopify-section:has(.collection-list),
  .template-index .shopify-section:has(.featured-product) { padding-inline: 12px; }
  .template-index .ui-test-product-list,
  .template-index .shopify-section:has(.carousel) .section,
  .template-index .shopify-section:has(.featured-product) .section { border-radius: 24px; }
  .template-index .shopify-section:has(.marquee__wrapper) { padding-inline: 12px; }
  .template-index .shopify-section:has(.marquee__wrapper) .section,
  .template-index .marquee__wrapper { border-radius: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .template-index .ui-test-product-list product-card,
  .template-index .collection-list :is(img,.image-block),
  .template-index .content-for-layout :is(button,a)[class*='button'] { transition: none; }
}

/* OVOLOANDORACLE V7 — stronger homepage hierarchy requested from live preview. */
/* Collection gallery: visibly separate the outer showroom, cards, media and title pills. */
.template-index .shopify-section:has([data-testid='collection-list']) {
  background: linear-gradient(180deg, #efe5d2 0%, #e7dcc8 100%);
  padding: clamp(24px,3vw,46px) clamp(18px,4vw,72px);
}
.template-index [data-testid='collection-list'] {
  width: min(100%, 1480px);
  margin-inline: auto;
  padding: clamp(22px,2.6vw,40px) clamp(20px,3vw,48px) !important;
  border-radius: 34px;
  background: #f2e8d5;
  border: 1px solid rgb(198 161 91 / .28);
  box-shadow: 0 20px 50px rgb(41 42 37 / .10), inset 0 1px 0 rgb(255 255 255 / .48);
}
.template-index [data-testid='collection-list'] .resource-list {
  gap: clamp(22px,2vw,34px) !important;
}
.template-index [data-testid='collection-list'] .resource-list__item {
  border-radius: 30px;
  filter: drop-shadow(0 12px 18px rgb(41 42 37 / .08));
}
.template-index [data-testid='collection-list'] .collection-card {
  position: relative;
  border-radius: 30px !important;
  background: #f8f1e5;
  border: 1px solid rgb(198 161 91 / .30) !important;
  box-shadow: 0 16px 34px rgb(41 42 37 / .12) !important;
  overflow: hidden;
}
.template-index [data-testid='collection-list'] .collection-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 -90px 75px -80px rgb(23 60 44 / .32);
  z-index: 1;
}
.template-index [data-testid='collection-list'] .collection-card > .group-block,
.template-index [data-testid='collection-list'] .collection-card [class*='collection-card-image'] {
  border-radius: inherit;
  overflow: hidden;
}
.template-index [data-testid='collection-list'] .collection-card [class*='collection-title'] {
  position: relative;
  z-index: 3;
  margin: 0 16px 16px;
  padding: 13px 18px !important;
  min-height: 58px;
  display: flex;
  align-items: center;
  background: rgb(242 232 213 / .94) !important;
  color: #344c3d !important;
  border: 1px solid rgb(198 161 91 / .30);
  border-radius: 999px !important;
  box-shadow: 0 9px 22px rgb(41 42 37 / .10);
  backdrop-filter: blur(10px);
}
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .template-index [data-testid='collection-list'] .collection-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 26px 52px rgb(41 42 37 / .17) !important;
  }
  .template-index [data-testid='collection-list'] .collection-card:hover img {
    transform: scale(1.035);
  }
}

/* Featured product: create a clear dark/light hierarchy around the two product images. */
.template-index .shopify-section:has(.featured-product) {
  background: linear-gradient(135deg,#173c2c 0%,#2c4a39 52%,#344c3d 100%);
  padding: clamp(42px,5vw,78px) clamp(20px,4vw,72px);
}
.template-index .shopify-section:has(.featured-product) > .section,
.template-index .shopify-section:has(.featured-product) .section {
  background: rgb(36 66 50 / .72);
  border-color: rgb(198 161 91 / .34);
  box-shadow: 0 30px 72px rgb(0 0 0 / .24), inset 0 1px 0 rgb(255 255 255 / .05);
}
.template-index .featured-product :is(.media-block,.product-media,.card-gallery) {
  border-radius: 28px;
  overflow: hidden;
}
.template-index .featured-product :is(img,.product-media img) {
  box-shadow: 0 18px 42px rgb(0 0 0 / .16);
}
.template-index .featured-product :is(.product-title,[class*='product-title'],.price,[class*='price']) {
  color: #f8f1e5;
}
.template-index .featured-product :is(.product-title,[class*='product-title']) {
  font-family: Georgia,'Times New Roman',serif;
}

/* Editorial split: use shade contrast, not one flat mustard field. */
.template-index .shopify-section:has([data-testid='media-with-content']) {
  background: linear-gradient(180deg,#e7dcc8 0%,#f2e8d5 100%);
  padding: clamp(30px,4vw,62px) clamp(18px,4vw,72px);
}
.template-index [data-testid='media-with-content'] {
  width: min(100%,1480px);
  margin: 0 auto !important;
  background: #c6a15b;
  border: 1px solid rgb(23 60 44 / .15);
  border-radius: 34px;
  box-shadow: 0 26px 64px rgb(41 42 37 / .16);
}
.template-index [data-testid='media-with-content'] .media-with-content__content {
  position: relative;
  background: linear-gradient(145deg,#d5b570 0%,#c6a15b 62%,#b98f47 100%);
  color: #292a25;
  overflow: hidden;
}
.template-index [data-testid='media-with-content'] .media-with-content__content::before {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  left: -155px;
  bottom: -180px;
  background: rgb(242 232 213 / .18);
  border: 1px solid rgb(248 241 229 / .20);
  pointer-events: none;
}
.template-index [data-testid='media-with-content'] .media-with-content__content > .group-block-content {
  position: relative;
  z-index: 1;
  padding-inline: clamp(36px,5vw,82px);
  padding-block: clamp(48px,6vw,92px);
}
.template-index [data-testid='media-with-content'] .media-block {
  position: relative;
  background: #f8f1e5;
  overflow: hidden;
}
.template-index [data-testid='media-with-content'] .media-block::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 18px 0 36px rgb(41 42 37 / .08);
}
.template-index [data-testid='media-with-content'] h2 {
  color: #173c2c;
  font-family: Georgia,'Times New Roman',serif;
  font-size: clamp(2rem,3.2vw,3.65rem);
  line-height: 1.08;
  letter-spacing: -.035em;
}
.template-index [data-testid='media-with-content'] h6 {
  color: #344c3d;
  letter-spacing: .16em;
}
.template-index [data-testid='media-with-content'] p {
  color: #292a25;
  line-height: 1.75;
}

@media screen and (max-width: 749px) {
  .template-index .shopify-section:has([data-testid='collection-list']),
  .template-index .shopify-section:has([data-testid='media-with-content']) {
    padding-inline: 12px;
  }
  .template-index [data-testid='collection-list'] {
    padding: 18px 14px !important;
    border-radius: 24px;
  }
  .template-index [data-testid='collection-list'] .collection-card {
    border-radius: 22px !important;
  }
  .template-index [data-testid='collection-list'] .collection-card [class*='collection-title'] {
    margin: 0 10px 10px;
    min-height: 50px;
    padding: 10px 14px !important;
  }
  .template-index [data-testid='media-with-content'] {
    border-radius: 24px;
  }
  .template-index [data-testid='media-with-content'] .media-with-content__content > .group-block-content {
    padding: 34px 24px 40px;
  }
}

/* OVOLOANDORACLE V8 — Featured product correction: target the theme's real section class. */
.template-index .shopify-section:has(.featured-product-section) {
  position: relative;
  background: linear-gradient(135deg,#132f24 0%,#173c2c 44%,#294b39 100%) !important;
  padding: clamp(46px,5vw,82px) clamp(28px,4.5vw,84px) !important;
  overflow: hidden;
}
.template-index .shopify-section:has(.featured-product-section)::before {
  content:'';
  position:absolute;
  width:420px;height:420px;
  border-radius:50%;
  right:-190px;top:-230px;
  border:1px solid rgb(198 161 91 / .20);
  box-shadow:0 0 0 70px rgb(198 161 91 / .035);
  pointer-events:none;
}
.template-index .featured-product-section {
  width:min(100%,1480px);
  margin-inline:auto;
  padding: clamp(18px,2vw,30px) !important;
  border-radius:36px;
  background:linear-gradient(135deg,#294b39 0%,#203f31 100%) !important;
  border:1px solid rgb(198 161 91 / .32);
  box-shadow:0 30px 70px rgb(6 22 15 / .30), inset 0 1px 0 rgb(255 255 255 / .055);
}
.template-index .featured-product-section .section-content-wrapper {
  gap:clamp(34px,5vw,86px);
  padding:clamp(18px,2vw,30px) !important;
  border-radius:28px;
  background:linear-gradient(120deg,rgb(248 241 229 / .075),rgb(23 60 44 / .06));
}
.template-index .featured-product-section .media-block {
  border-radius:26px !important;
  overflow:hidden;
  background:#f2e8d5;
  box-shadow:0 20px 46px rgb(0 0 0 / .22);
  outline:1px solid rgb(198 161 91 / .20);
}
.template-index .featured-product-section .media-block img {
  border-radius:26px !important;
}
.template-index .featured-product-section .product-grid__card {
  align-self:center;
  border-radius:28px;
  padding:clamp(26px,3vw,46px) !important;
  background:linear-gradient(145deg,#f2e8d5 0%,#e7dcc8 100%);
  color:#292a25;
  border:1px solid rgb(198 161 91 / .42);
  box-shadow:0 20px 48px rgb(0 0 0 / .20);
}
.template-index .featured-product-section .product-grid__card :is(h1,h2,h3,h4,h5,h6,[class*='product-title']) {
  color:#173c2c !important;
  font-family:Georgia,'Times New Roman',serif;
}
.template-index .featured-product-section .product-grid__card :is(.price,[class*='price']) {
  color:#a95f46 !important;
  font-weight:700;
}
.template-index .featured-product-section .product-card__content {
  width:100% !important;
}
@media screen and (min-width:750px) {
  .template-index .featured-product-section .section-content-wrapper {
    grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr) !important;
    align-items:center;
  }
}
@media screen and (max-width:749px) {
  .template-index .shopify-section:has(.featured-product-section) { padding:28px 16px !important; }
  .template-index .featured-product-section { border-radius:26px; padding:10px !important; }
  .template-index .featured-product-section .section-content-wrapper { gap:18px; padding:10px !important; }
  .template-index .featured-product-section .product-grid__card { border-radius:22px; }
}

/* Ovoloandoracle V9 — footer values / icons-with-text refinement */
.shopify-section-group-footer-group .section:has([data-block-id="group_dbfgJf"]),
.shopify-section-group-footer-group .section:has([data-block-id="group_Q3kDY7"]),
.shopify-section-group-footer-group .section:has([data-block-id="group_ywVYVt"]) {
  position:relative;
}
.shopify-section-group-footer-group [data-block-id="group_dbfgJf"],
.shopify-section-group-footer-group [data-block-id="group_Q3kDY7"],
.shopify-section-group-footer-group [data-block-id="group_ywVYVt"] {
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
  box-shadow:0 12px 30px rgb(23 60 44 / .07);
}
.shopify-section-group-footer-group [data-block-id="group_dbfgJf"] svg,
.shopify-section-group-footer-group [data-block-id="group_Q3kDY7"] svg,
.shopify-section-group-footer-group [data-block-id="group_ywVYVt"] svg {
  filter:drop-shadow(0 5px 9px rgb(23 60 44 / .12));
}
@media (hover:hover) and (pointer:fine){
 .shopify-section-group-footer-group [data-block-id="group_dbfgJf"]:hover,
 .shopify-section-group-footer-group [data-block-id="group_Q3kDY7"]:hover,
 .shopify-section-group-footer-group [data-block-id="group_ywVYVt"]:hover {
   transform:translateY(-4px);
   box-shadow:0 18px 38px rgb(23 60 44 / .12);
   border-color:rgb(198 161 91 / .65) !important;
 }
}
@media (prefers-reduced-motion:reduce){
 .shopify-section-group-footer-group [data-block-id="group_dbfgJf"],
 .shopify-section-group-footer-group [data-block-id="group_Q3kDY7"],
 .shopify-section-group-footer-group [data-block-id="group_ywVYVt"] {transition:none!important;}
}
\n\n/* OVOLOANDORACLE V11 — matching editorial headings for collection + featured product. */\n.template-index .oa-home-section-heading {\n  width:100%;\n  padding:0 0 clamp(24px,2.5vw,34px);\n  color:#173c2c;\n}\n.template-index .oa-home-section-heading__eyebrow {\n  margin:0 0 10px;\n  color:#a95f46;\n  font-size:clamp(10px,.78vw,12px);\n  line-height:1.2;\n  font-weight:700;\n  letter-spacing:.22em;\n  text-transform:uppercase;\n}\n.template-index .oa-home-section-heading__title {\n  margin:0;\n  max-width:900px;\n  color:#173c2c;\n  font-family:Georgia,'Times New Roman',serif;\n  font-size:clamp(34px,3.4vw,54px);\n  font-weight:500;\n  line-height:1.04;\n  letter-spacing:-.035em;\n  text-wrap:balance;\n}\n.template-index .oa-home-section-heading__line {\n  display:block;\n  width:56px;\n  height:2px;\n  margin-top:15px;\n  border-radius:999px;\n  background:#c6a15b;\n}\n.template-index [data-testid='collection-list'] > .oa-home-section-heading {\n  padding-inline:clamp(4px,.7vw,12px);\n}\n.template-index .featured-product-section > .oa-home-section-heading {\n  padding:clamp(10px,1.2vw,18px) clamp(18px,2vw,30px) clamp(26px,2.4vw,36px);\n}\n.template-index .oa-home-section-heading--dark .oa-home-section-heading__eyebrow { color:#d7b66e; }\n.template-index .oa-home-section-heading--dark .oa-home-section-heading__title { color:#f8f1e5; }\n.template-index .oa-home-section-heading--dark .oa-home-section-heading__line { background:#c6a15b; }\n@media screen and (max-width:749px){\n  .template-index .oa-home-section-heading { padding-bottom:20px; }\n  .template-index .oa-home-section-heading__title { font-size:clamp(30px,9vw,40px); }\n  .template-index .featured-product-section > .oa-home-section-heading { padding:12px 12px 22px; }\n}\n
/* OVOLOANDORACLE V12 — larger homepage hero CTA. Visual-only; keeps native link and block behavior. */
.template-index .content-for-layout > .shopify-section:first-child :is(.button, a[class*='button'], .button-unstyled) {
  min-width: 210px;
  min-height: 56px;
  padding: 16px 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(23,60,44,.90);
  color: #f8f1e5;
  border: 1px solid rgba(198,161,91,.72);
  font-size: 16px;
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: .01em;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 12px 30px rgba(23,60,44,.25);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
@media (hover:hover) {
  .template-index .content-for-layout > .shopify-section:first-child :is(.button, a[class*='button'], .button-unstyled):hover {
    background: #173c2c;
    color: #f8f1e5;
    transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(23,60,44,.32);
  }
}
@media screen and (max-width:749px) {
  .template-index .content-for-layout > .shopify-section:first-child :is(.button, a[class*='button'], .button-unstyled) {
    min-width: 178px;
    min-height: 50px;
    padding: 13px 26px;
    font-size: 15px;
  }
}
@media (prefers-reduced-motion:reduce) {
  .template-index .content-for-layout > .shopify-section:first-child :is(.button, a[class*='button'], .button-unstyled) { transition:none; }
}

/* OVOLOANDORACLE V13 — policy-page canvas contrast.
   Keeps the policy HTML/card palette intact while separating it from the theme canvas. */
body.template-policy {
  background-color: #e4e7de;
  background-image:
    radial-gradient(circle at 8% 10%, rgba(135,155,122,.16), transparent 28rem),
    radial-gradient(circle at 92% 22%, rgba(198,161,91,.10), transparent 24rem),
    linear-gradient(180deg, #e8ebe3 0%, #dfe4da 100%);
  background-attachment: fixed;
}

body.template-policy main,
body.template-policy #MainContent {
  background: transparent;
}

@media screen and (max-width: 749px) {
  body.template-policy {
    background-image: linear-gradient(180deg, #e8ebe3 0%, #dfe4da 100%);
    background-attachment: scroll;
  }
}

/* OVOLOANDORACLE V14 — policy layout containment.
   Prevents custom policy-page layouts from exceeding the Shopify content canvas. */
body.template-policy .shopify-policy__container {
  width: min(100% - 40px, 1180px);
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: clamp(14px, 2vw, 28px);
  box-sizing: border-box;
  overflow: hidden;
}

body.template-policy .shopify-policy__body,
body.template-policy .shopify-policy__body > *,
body.template-policy .rte,
body.template-policy .rte > * {
  max-width: 100%;
  box-sizing: border-box;
}

body.template-policy .shopify-policy__body {
  width: 100%;
  overflow: hidden;
  overflow-wrap: anywhere;
}

/* Make embedded custom page grids flexible instead of allowing fixed columns to overflow. */
body.template-policy .shopify-policy__body :is([class*='grid'], [class*='layout'], [class*='columns'], [class*='content']) {
  min-width: 0;
  max-width: 100%;
}

body.template-policy .shopify-policy__body :is(img, video, iframe, svg, table) {
  max-width: 100%;
}

body.template-policy .shopify-policy__body :is(p, h1, h2, h3, h4, h5, h6, a, li) {
  overflow-wrap: anywhere;
  word-break: normal;
}

@media screen and (max-width: 989px) {
  body.template-policy .shopify-policy__container {
    width: min(100% - 28px, 920px);
    padding-inline: 14px;
  }

  body.template-policy .shopify-policy__body :is([class*='grid'], [class*='layout'], [class*='columns']) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media screen and (max-width: 749px) {
  body.template-policy .shopify-policy__container {
    width: calc(100% - 20px);
    padding-inline: 10px;
    padding-block: 18px 32px;
  }
}

/* OVOLOANDORACLE V15 — footer/legal/help page responsive safety pass.
   Theme-level containment for rich text and Custom Liquid page content. */
body.template-policy #MainContent,
body.template-page #MainContent {
  overflow-x: clip;
}

body.template-policy .shopify-policy__container,
body.template-page #MainContent .page-width-content,
body.template-page #MainContent .section-content-wrapper {
  width: min(100% - 32px, 1180px) !important;
  max-width: 1180px !important;
  margin-inline: auto !important;
  box-sizing: border-box !important;
}

/* Let every nested column shrink; this fixes fixed/min-width children pushing the right column outside. */
body.template-policy .shopify-policy__body *,
body.template-page #MainContent :is(.rte, .custom-liquid, [class*='custom-liquid']) * {
  min-width: 0;
  box-sizing: border-box;
}

body.template-policy .shopify-policy__body :is(div, section, article, aside, nav, main, header, footer, ul, ol),
body.template-page #MainContent :is(.rte, .custom-liquid, [class*='custom-liquid']) :is(div, section, article, aside, nav, main, header, footer, ul, ol) {
  max-width: 100% !important;
}

/* Inline fixed widths from page HTML may remain in Shopify admin; cap them safely at the theme level. */
body.template-policy .shopify-policy__body [style*='width'],
body.template-policy .shopify-policy__body [style*='min-width'],
body.template-page #MainContent :is(.rte, .custom-liquid, [class*='custom-liquid']) [style*='width'],
body.template-page #MainContent :is(.rte, .custom-liquid, [class*='custom-liquid']) [style*='min-width'] {
  max-width: 100% !important;
  min-width: 0 !important;
}

body.template-policy .shopify-policy__body :is(img, picture, video, iframe, svg, canvas),
body.template-page #MainContent :is(.rte, .custom-liquid, [class*='custom-liquid']) :is(img, picture, video, iframe, svg, canvas) {
  max-width: 100% !important;
  height: auto;
}

body.template-policy .shopify-policy__body :is(p, li, a, h1, h2, h3, h4, h5, h6),
body.template-page #MainContent :is(.rte, .custom-liquid, [class*='custom-liquid']) :is(p, li, a, h1, h2, h3, h4, h5, h6) {
  max-width: 100%;
  overflow-wrap: break-word;
}

body.template-policy .shopify-policy__body table,
body.template-page #MainContent :is(.rte, .custom-liquid, [class*='custom-liquid']) table {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed;
}

/* Common two-column page patterns used across the 14 footer pages. */
body.template-policy .shopify-policy__body :is([class*='grid'], [class*='layout'], [class*='columns'], [class*='split'], [class*='shell'], [class*='wrap']),
body.template-page #MainContent :is(.rte, .custom-liquid, [class*='custom-liquid']) :is([class*='grid'], [class*='layout'], [class*='columns'], [class*='split'], [class*='shell'], [class*='wrap']) {
  max-width: 100% !important;
  min-width: 0 !important;
}

@media screen and (max-width: 1199px) {
  body.template-policy .shopify-policy__container,
  body.template-page #MainContent .page-width-content,
  body.template-page #MainContent .section-content-wrapper {
    width: calc(100% - 40px) !important;
    padding-inline: clamp(10px, 2vw, 20px) !important;
  }

  body.template-policy .shopify-policy__body :is([class*='grid'], [class*='layout'], [class*='columns'], [class*='split']),
  body.template-page #MainContent :is(.rte, .custom-liquid, [class*='custom-liquid']) :is([class*='grid'], [class*='layout'], [class*='columns'], [class*='split']) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media screen and (max-width: 749px) {
  body.template-policy .shopify-policy__container,
  body.template-page #MainContent .page-width-content,
  body.template-page #MainContent .section-content-wrapper {
    width: calc(100% - 20px) !important;
    padding-inline: 8px !important;
  }

  body.template-policy .shopify-policy__body,
  body.template-page #MainContent :is(.rte, .custom-liquid, [class*='custom-liquid']) {
    overflow-x: clip;
  }
}