/** Shopify CDN: Minification failed

Line 4803:2 Expected ":"
Line 4804:2 Expected ":"
Line 4804:35 Expected ":"
Line 4826:2 Expected ":"
Line 4827:2 Expected ":"
Line 4827:35 Expected ":"
Line 4828:46 Expected ":"
Line 4832:2 Expected ":"
Line 6427:1 Expected "}" to go with "{"

**/
* {
  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-lift-amount: 4px;
  --hover-scale-amount: 1.03;
  --hover-subtle-zoom-amount: 1.015;
  --hover-shadow-color: var(--color-shadow);
  --hover-transition-duration: 0.25s;
  --hover-transition-timing: ease-out;
  --surface-transition-duration: 0.3s;
  --surface-transition-timing: var(--ease-out-quad);
}

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

html[scroll-lock] {
  overflow: hidden;
}

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);
}

input:hover {
  background-color: var(--color-input-hover-background);
}

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

.product-card,
.collection-card,
.resource-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);
  will-change: transform, box-shadow;
  z-index: var(--layer-flat);
}

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

.product-card__content {
  position: relative;
}

.product-card__content {
  cursor: pointer;
}

.product-card__content slideshow-component {
  --cursor: pointer;
}

.predictive-search-results__card .product-card,
.predictive-search-results__card .collection-card,
.predictive-search-results__card .resource-card {
  transition: none;
  will-change: auto;
}

@media (any-pointer: fine) and (prefers-reduced-motion: no-preference) {
  .card-hover-effect-lift .product-card:hover,
  .card-hover-effect-lift .collection-card:hover,
  .card-hover-effect-lift .resource-card:hover,
  .card-hover-effect-lift .predictive-search-results__card:hover {
    transform: translateY(calc(-1 * var(--hover-lift-amount)));
  }

  .card-hover-effect-lift .header .product-card:hover,
  .card-hover-effect-lift .header .collection-card:hover,
  .card-hover-effect-lift .header .resource-card:hover,
  .card-hover-effect-lift .header-drawer .product-card:hover,
  .card-hover-effect-lift .header-drawer .collection-card:hover,
  .card-hover-effect-lift .header-drawer .resource-card:hover {
    transform: none;
  }

  .card-hover-effect-scale .product-card:hover,
  .card-hover-effect-scale .collection-card:hover,
  .card-hover-effect-scale .resource-card:hover,
  .card-hover-effect-scale .predictive-search-results__card:hover {
    transform: scale(var(--hover-scale-amount));
  }

  .card-hover-effect-scale .header .product-card:hover,
  .card-hover-effect-scale .header .collection-card:hover,
  .card-hover-effect-scale .header .resource-card:hover,
  .card-hover-effect-scale .header-drawer .product-card:hover,
  .card-hover-effect-scale .header-drawer .collection-card:hover,
  .card-hover-effect-scale .header-drawer .resource-card:hover {
    transform: none;
  }

  .card-hover-effect-subtle-zoom .card-gallery,
  .card-hover-effect-subtle-zoom .collection-card__image,
  .card-hover-effect-subtle-zoom .product-card__image,
  .card-hover-effect-subtle-zoom .resource-card__image {
    overflow: hidden;
    transition: transform var(--hover-transition-duration) var(--hover-transition-timing);
  }

  .predictive-search-results__card .card-gallery,
  .predictive-search-results__card .collection-card__image,
  .predictive-search-results__card .product-card__image,
  .predictive-search-results__card .resource-card__image {
    transition: none;
  }

  .card-hover-effect-subtle-zoom .product-card:hover .card-gallery,
  .card-hover-effect-subtle-zoom .collection-card:hover .collection-card__image,
  .card-hover-effect-subtle-zoom .product-card:hover .product-card__image,
  .card-hover-effect-subtle-zoom .resource-card:hover .resource-card__image,
  .card-hover-effect-subtle-zoom .predictive-search-results__card:hover {
    transform: scale(var(--hover-subtle-zoom-amount));
  }

  .card-hover-effect-subtle-zoom .header .product-card:hover .card-gallery,
  .card-hover-effect-subtle-zoom .header .collection-card:hover .collection-card__image,
  .card-hover-effect-subtle-zoom .header .product-card:hover .product-card__image,
  .card-hover-effect-subtle-zoom .header .resource-card:hover .resource-card__image,
  .card-hover-effect-subtle-zoom .header-drawer .product-card:hover .card-gallery,
  .card-hover-effect-subtle-zoom .header-drawer .collection-card:hover .collection-card__image,
  .card-hover-effect-subtle-zoom .header-drawer .product-card:hover .product-card__image,
  .card-hover-effect-subtle-zoom .header-drawer .resource-card:hover .resource-card__image {
    transform: none;
  }

  .predictive-search-results__card .product-card:hover,
  .predictive-search-results__card .collection-card:hover,
  .predictive-search-results__card .resource-card:hover,
  .header .product-card:hover,
  .header .collection-card:hover,
  .header .resource-card:hover,
  .header-drawer .product-card:hover,
  .header-drawer .collection-card:hover,
  .header-drawer .resource-card:hover {
    transform: none;
    box-shadow: none;
  }
}

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 */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

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

/* Set up page widths & margins */
.page-width-wide,
.page-width-normal,
.page-width-narrow,
.page-width-content {
  --page-margin: 16px;
}

@media screen and (min-width: 750px) {
  .page-width-wide,
  .page-width-normal,
  .page-width-narrow,
  .page-width-content {
    --page-margin: 40px;
  }
}

.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,
.page-width-content {
  /* 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), calc(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-container) {
  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);
}

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

/* Some page-width sections should still extend all the way to the right edge of the page, e.g. collection carousel */
.section--page-width.section--full-width-right > * {
  grid-column: 2 / 4;
}

/* 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-left: var(--page-margin);
    padding-right: 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;
}

@media screen and (max-width: 749px) {
  .is-visually-hidden-mobile: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;
  }
}

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

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

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

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

.skip-to-content-link {
  position: absolute;
  overflow: hidden;
  height: 1px;
  left: -99999px;
  /* stylelint-disable-next-line declaration-no-important */
  word-wrap: normal !important;
}

.skip-to-content-link:focus {
  z-index: var(--layer-temporary);
  overflow: auto;
  width: auto;
  height: auto;
  padding: var(--padding-lg) var(--padding-4xl);
  left: var(--margin-lg);
  top: var(--margin-lg);
  background-color: var(--color-background);
  box-shadow: 0 0 0 var(--focus-outline-offset) var(--color-background);
}

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

  text-align: left;
}

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

  text-align: center;
}

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

  text-align: right;
}

.text-inherit {
  color: inherit;
}

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

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

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

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

.title--aligned-center {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.background-image-container {
  overflow: hidden;
  position: absolute;
  inset: 0;
  opacity: var(--image-opacity);
}

.background-image-container img,
.background-image-container svg {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.background-image-fit img,
.background-image-fit svg {
  object-fit: contain;
}

.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);
}

placeholder-image {
  display: block;
  height: 100%;
  aspect-ratio: var(--ratio);
}

placeholder-image[data-type='product'] {
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-15));
  width: 100%;
}

/** Placeholder background for the placeholder image, the dimensions are the same as the product images */
placeholder-image[data-type='product']:not(:has(> img)) {
  aspect-ratio: var(--ratio);
  height: 350px;
}

placeholder-image > img {
  object-fit: cover;
  aspect-ratio: var(--ratio);
  height: 100%;
}

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

slideshow-component [data-placeholder='true'] * {
  cursor: grab;
}

/* Base text and heading styles */
body,
.paragraph:not(.button),
.paragraph > * {
  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 > * {
  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, var(--font-h1-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 > * {
  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, var(--font-h2-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 > * {
  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, var(--font-h3-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 > * {
  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, var(--font-h4-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 > * {
  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, var(--font-h5-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 > * {
  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, var(--font-h6-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 {
  --button-color: var(--color, var(--color-primary));

  color: var(--button-color);
  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 {
  --button-color: var(--color, var(--color-primary-hover));
}

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

  &:hover {
    text-decoration-color: transparent;
    color: var(--color-primary-hover);
  }
}

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

details[open] .summary-closed {
  display: none;
}

details:not([open]) .summary-open {
  display: none;
}

details[open] > summary .icon-animated > svg {
  transform: rotate(180deg);
}

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

/* When header is transparent, pull the first main content section up to sit under the floating header */
body:has(.header[transparent]) .content-for-layout > .shopify-section:first-child {
  margin-top: calc(var(--header-group-height) * -1);
}

body:has(.header[transparent]) #header-group > .header-section {
  z-index: var(--layer-sticky);
}

/* All other header group content should be beneath the floating header,
but above the rest of the page content */
body:has(.header[transparent]) #header-group > *:not(.header-section) {
  z-index: calc(var(--layer-sticky) - 1);
}

/* Featured collection block */
.featured-collection-block {
  width: 100%;
}

/* Product grid */
.product-grid-container {
  display: block;
  width: 100%;
  padding-block: var(--padding-block-start) var(--padding-block-end);

  @media screen and (min-width: 750px) {
    display: grid;
  }
}

.product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--product-grid-gap);
  margin: auto;
  padding: 0;
  list-style: none;
}

@media screen and (min-width: 750px) {
  .product-grid {
    grid-template-columns: var(--product-grid-columns-desktop);
  }
}

.product-grid :is(h3, p) {
  margin: 0;
}

.product-grid__item {
  border: var(--product-card-border-width) solid rgb(var(--color-border-rgb) / var(--product-card-border-opacity));
}

.product-grid--organic[product-grid-view='default'] .product-grid__item {
  height: fit-content;
}

.product-grid__card.product-grid__card {
  display: flex;
  flex-flow: column nowrap;
  gap: var(--product-card-gap);
  align-items: var(--product-card-alignment);
  text-decoration: none;
  color: var(--color, var(--color-foreground));
  padding-block: var(--padding-block-start) var(--padding-block-end);
  padding-inline: var(--padding-inline-start) var(--padding-inline-end);
  overflow: hidden;
}

[product-grid-view='zoom-out'] .product-grid__card {
  row-gap: var(--padding-xs);
}

[product-grid-view='default'] {
  --product-grid-gap: 16px;
  --padding-block-start: 24px;
  --padding-block-end: 24px;
  --padding-inline-start: 0px;
  --padding-inline-end: 0px;
}

[product-grid-view='default'] .product-grid__item {
  padding-block: 0;
}

[product-grid-view='mobile-single'],
.product-grid-mobile--large {
  @media screen and (max-width: 749px) {
    grid-template-columns: 1fr;
  }
}

.product-grid__card .group-block > * {
  @media screen and (max-width: 749px) {
    flex-direction: column;
  }
}

ul[product-grid-view='zoom-out'] .product-grid__card > * {
  display: none;
}

ul[product-grid-view='zoom-out'] .product-grid__card .card-gallery {
  display: block;
}

[product-grid-view='zoom-out']
  .card-gallery
  > :is(quick-add-component, .product-badges, slideshow-component > slideshow-controls) {
  display: none;
}

ul[product-grid-view='zoom-out'] .card-gallery > img {
  display: block;
}

[product-grid-view='zoom-out'] {
  --product-grid-columns-desktop: repeat(
    10,
    minmax(clamp(50px, calc(100% - 9 * var(--product-grid-gap)) / 10, 80px), 1fr)
  );
}

.product-grid-view-zoom-out--details {
  display: none;
}

.product-grid-view-zoom-out--details .h4,
.product-grid-view-zoom-out--details span,
.product-grid-view-zoom-out--details s {
  font-size: var(--font-size--xs);
  font-family: var(--font-paragraph--family);
}

.product-grid-view-zoom-out--details span {
  font-weight: 500;
}

.product-grid-view-zoom-out--details .h4 {
  line-height: 1.3;
  font-weight: 400;
}

.product-grid-view-zoom-out--details > span.h6,
.product-grid-view-zoom-out--details > div.h6 > product-price {
  display: inline-block;
  line-height: 0;
  margin-top: var(--margin-2xs);
}

.product-grid-view-zoom-out--details > span.h6 > *,
.product-grid-view-zoom-out--details > div.h6 > * > * {
  line-height: 1.2;
}

@media (prefers-reduced-motion: no-preference) {
  :root:active-view-transition-type(product-grid) {
    details[open] floating-panel-component {
      view-transition-name: panel-content;

      .checkbox *,
      .facets__pill-label {
        transition: none;
      }

      .facets--vertical & {
        view-transition-name: none;
      }
    }

    .product-grid {
      view-transition-name: product-grid;
    }

    footer {
      view-transition-name: footer;
    }

    .product-grid__item,
    floating-panel-component {
      transition: none;
    }
  }
}

::view-transition-group(panel-content) {
  z-index: 1;
}

::view-transition-new(product-grid) {
  animation-delay: 150ms;
  animation-name: fadeInUp;
  animation-duration: var(--animation-speed);
  animation-timing-function: var(--animation-easing);
}

results-list[initialized] {
  .product-grid__item {
    transition: opacity var(--animation-speed) var(--animation-easing),
      transform var(--animation-speed) var(--animation-easing);

    @starting-style {
      opacity: 0;
      transform: translateY(10px);
    }
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

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

/* Collection and product list cards have equal heights */
:is(.product-grid__item, .resource-list__item) .product-card {
  display: grid;
  height: 100%;
}

/* Video background */
.video-background,
.video-background * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.video-background--cover * {
  object-fit: cover;
}

.video-background--contain * {
  object-fit: contain;
}

.text-block {
  width: 100%;
}

.text-block > *:first-child,
.text-block > *:first-child:empty + * {
  margin-block-start: 0;
}

.text-block > *:last-child,
.text-block > *:has(+ *:last-child:empty) {
  margin-block-end: 0;
}

/* This is to deal with the margin applied to the p when custom styles are enabled. The p isn't the first child anymore due to the style tag */
.text-block > style + * {
  margin-block-start: 0;
}

/* Dialog */
.dialog-modal {
  border: none;
  box-shadow: var(--shadow-popover);

  @media screen and (min-width: 750px) {
    border-radius: var(--style-border-radius-popover);
    max-width: var(--normal-content-width);
  }

  @media screen and (max-width: 749px) {
    max-width: 100%;
    max-height: 100%;
    height: 100dvh;
    width: 100dvw;
    padding: var(--padding-md);
  }
}

.dialog-modal::backdrop {
  transition: backdrop-filter var(--animation-speed) var(--animation-easing);
  backdrop-filter: brightness(1);
  background: rgb(var(--backdrop-color-rgb) / var(--backdrop-opacity));
}

.dialog-modal[open] {
  animation: elementSlideInTop var(--animation-speed) var(--animation-easing) forwards;

  &::backdrop {
    animation: backdropFilter var(--animation-speed) var(--animation-easing) forwards;
    transition: opacity var(--animation-speed) var(--animation-easing);
  }
}

.dialog-modal.dialog-closing {
  animation: elementSlideOutTop var(--animation-speed) var(--animation-easing) forwards;

  &::backdrop {
    opacity: 0;
  }
}

/* stylelint-disable value-keyword-case */
.dialog-drawer {
  --dialog-drawer-opening-animation: slideInLeft;
  --dialog-drawer-closing-animation: slideOutLeft;
}

.dialog-drawer--right {
  --dialog-drawer-opening-animation: slideInRight;
  --dialog-drawer-closing-animation: slideOutRight;
}
/* stylelint-enable value-keyword-case */

.dialog-drawer[open] {
  animation: var(--dialog-drawer-opening-animation) var(--animation-speed) var(--animation-easing) forwards;
}

.dialog-drawer.dialog-closing {
  animation: var(--dialog-drawer-closing-animation) var(--animation-speed) var(--animation-easing);
}

/* Buttons */
.button,
.button-secondary,
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-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-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 {
  background-color: var(--color-input-background);
  border-color: var(--color-input-border);
}

textarea::placeholder,
input::placeholder {
  color: var(--color-input-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: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);
}

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

.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;
}

/* Show more */

.show-more__button {
  color: var(--color-primary);
  cursor: pointer;
}

.show-more__button:hover {
  @media screen and (min-width: 750px) {
    color: var(--color-primary-hover);
  }
}

.show-more__label {
  text-align: start;
  font-size: var(--font-size--body-md);
  font-family: var(--font-paragraph--family);
}

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

.show-more[data-expanded='true'] .show-more__label--more,
.show-more[data-expanded='false'] .show-more__label--less {
  display: none;
}

.link {
  display: inline-block;
  text-align: center;
}

shopify-accelerated-checkout,
shopify-accelerated-checkout-cart {
  --shopify-accelerated-checkout-button-border-radius: var(--style-border-radius-buttons-primary);
  --shopify-accelerated-checkout-button-block-size: var(--height-buy-buttons);
}

.product-form-buttons:has(.add-to-cart-button.button-secondary)
  :is(shopify-accelerated-checkout, shopify-accelerated-checkout-cart) {
  --shopify-accelerated-checkout-button-border-radius: var(--style-border-radius-buttons-secondary);
  --shopify-accelerated-checkout-button-block-size: var(--height-buy-buttons);
}

/* Collapsible row */

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

.icon-caret--forward svg {
  transform: rotate(-90deg);
}

.icon-caret--backward svg {
  transform: rotate(90deg);
}

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

summary:hover {
  color: var(--color-primary-hover);
}

summary .svg-wrapper {
  margin-inline-start: auto;
  height: var(--icon-size-xs);
  width: var(--icon-size-xs);
  transition: transform var(--animation-speed) var(--animation-easing);
}

/* Shared plus/minus icon animations */
summary .icon-plus :is(.horizontal, .vertical),
.show-more__button .icon-plus :is(.horizontal, .vertical) {
  transition: transform var(--animation-speed) var(--animation-easing);
  transform: rotate(0deg);
  transform-origin: 50% 50%;
  opacity: 1;
}

details[open] > summary .icon-plus .horizontal,
.details-open > summary .icon-plus .horizontal,
.show-more:where([data-expanded='true']) .show-more__button .icon-plus .horizontal {
  transform: rotate(90deg);
}

details[open] > summary .icon-plus .vertical,
.details-open > summary .icon-plus .vertical,
.show-more:where([data-expanded='true']) .show-more__button .icon-plus .vertical {
  transform: rotate(90deg);
  opacity: 0;
}

/* Product Media */
media-gallery {
  display: block;
  width: 100%;
}

:where(media-gallery, .product-grid__item) {
  .media-gallery__grid {
    grid-template-columns: 1fr;
    gap: var(--image-gap);
  }
}

.product-media-gallery__slideshow--single-media slideshow-container {
  @media screen and (max-width: 749px) {
    grid-area: unset;
  }
}

:not(.dialog-zoomed-gallery) > .product-media-container {
  /* width and overflow forces children to shrink to parent width */
  --slide-width: round(up, 100%, 1px);

  display: flex;
  aspect-ratio: var(--gallery-aspect-ratio, var(--media-preview-ratio));
  max-height: var(--constrained-height);
  width: 100%;

  /* Relative position needed for video and 3d models */
  position: relative;
  overflow: hidden;

  &:where(.constrain-height) {
    /* arbitrary offset value based on average theme spacing and header height */
    --viewport-offset: 400px;
    --constrained-min-height: 300px;
    --constrained-height: max(var(--constrained-min-height), calc(100vh - var(--viewport-offset)));

    margin-right: auto;
    margin-left: auto;
  }
}

media-gallery:where(.media-gallery--grid) .media-gallery__grid {
  display: none;
}

media-gallery.media-gallery--grid .media-gallery__grid .product-media-container {
  /* Needed for safari to stretch to full grid height */
  height: 100%;
}

.product-media :is(deferred-media, product-model) {
  position: absolute;
}

@media screen and (max-width: 749px) {
  .product-media-container.constrain-height {
    max-height: none;
  }
}

@media screen and (min-width: 750px) {
  .product-media-container.constrain-height {
    --viewport-offset: var(--header-height, 100px);
    --constrained-min-height: 500px;
  }

  body:has(header-component[transparent]) .product-media-container.constrain-height {
    --viewport-offset: 0px;
  }

  .media-gallery--two-column .media-gallery__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .media-gallery--large-first-image .product-media-container:first-child,
  .media-gallery--two-column .product-media-container:only-child {
    /* First child spans 2 columns */
    grid-column: span 2;
  }

  /* Display grid view as a carousel on mobile, grid on desktop */
  media-gallery:is(.media-gallery--grid) slideshow-component {
    display: none;
  }

  media-gallery:where(.media-gallery--grid) .media-gallery__grid {
    display: grid;
  }
}

.product-media-container--model {
  /* Usefull when view in your space is shown */
  flex-direction: column;
}

.shopify-model-viewer-ui__controls-area {
  bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
}

.product-media-container img {
  aspect-ratio: inherit;
  object-fit: contain;
}

.product-media-container.media-fit-contain img {
  object-position: center center;
}

.product-media-container.media-fit {
  --product-media-fit: cover;

  img {
    object-fit: var(--product-media-fit);
  }
}

/* Media gallery zoom dialog */
.product-media-container__zoom-button {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: var(--layer-flat);
  cursor: zoom-in;
  background-color: transparent;

  &:hover {
    background-color: transparent;
  }
}

zoom-dialog dialog {
  width: 100vw;
  height: 100vh;
  border: none;
  margin: 0;
  padding: 0;
  max-width: 100%;
  max-height: 100%;
  background: #fff;
  opacity: 0;
  transition: opacity var(--animation-speed) var(--animation-easing);
  scrollbar-width: none;

  &[open] {
    opacity: 1;
  }

  @media (prefers-reduced-motion: no-preference) {
    scroll-behavior: smooth;
  }

  &::backdrop {
    background: transparent;
  }
}

/* Animate the UI elements in only after the view transition is complete */
.close-button {
  position: fixed;
  top: var(--margin-lg);
  right: var(--margin-lg);
  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%;
}

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

.dialog-thumbnails-list-container {
  position: fixed;
  width: 100%;
  bottom: 0;
  display: flex;
  z-index: var(--layer-raised);
}

.dialog-thumbnails-list {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  gap: 8px;
  bottom: 0;
  overflow-x: auto;
  opacity: 0;
  padding: var(--padding-lg);
  margin-inline: auto;
  scrollbar-width: none;
  animation: thumbnailsSlideInBottom calc(var(--animation-speed) * 0.75) var(--animation-easing) forwards;
  animation-delay: calc(var(--animation-speed) * 1.5);
}

.dialog--closed .dialog-thumbnails-list {
  animation: thumbnailsSlideOutBottom var(--animation-speed) var(--animation-easing) forwards;
}

@media screen and (min-width: 750px) {
  .dialog-thumbnails-list {
    position: fixed;
    flex-direction: column;
    inset: 50% var(--margin-lg) auto auto;
    right: 0;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    animation: thumbnailsSlideInTop calc(var(--animation-speed) * 0.5) var(--animation-easing) forwards;
    animation-delay: calc(var(--animation-speed) * 2);
  }

  .dialog--closed .dialog-thumbnails-list {
    animation: thumbnailsSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
  }
}

.dialog-thumbnails-list__thumbnail {
  width: var(--thumbnail-width);
  height: auto;
  transition: transform var(--animation-speed) var(--animation-easing);
  flex-shrink: 0;
  border-radius: var(--media-radius);

  img {
    height: 100%;
    object-fit: cover;
    border-radius: var(--media-radius);
    aspect-ratio: var(--aspect-ratio);
  }

  &:is([aria-selected='true']) {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: calc(var(--focus-outline-offset) / 2);
    border: var(--style-border-width) solid rgb(var(--color-border-rgb) / var(--media-border-opacity));
  }
}

.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;
}

/* If the product media is already providing an image cover, hide images provided by sibling deferred-media */
.product-media__image ~ * .deferred-media__poster-image {
  display: none;
}

/* If the product media is playing, hide the preview image */
.product-media-container:has(.deferred-media__playing) .product-media__image {
  opacity: 0;
  transition: opacity var(--animation-speed) var(--animation-easing);
}

/* Deferred media & Product model  */
:is(product-model, deferred-media) {
  /* Height needed to make sure when it's set to be stretched, it takes the full height */
  height: 100%;
  width: 100%;
  position: relative;
}

product-model model-viewer,
/* Media that have a poster button sibling providing the size should be absolute-positioned.
Otherwise, it should be a block to rely on its own size */
:is(deferred-media, product-model) > .deferred-media__poster-button ~ *:not(template) {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;

  /* Required to make sure the absolute position respects the padding of the wrapper: */
  padding: inherit;
}

slideshow-slide .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
  bottom: var(--padding-sm);
  right: var(--padding-sm);
}

.dialog-zoomed-gallery .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
  /* Move the controls above the thumbnails. Need to calculate the height of the thumbnails list */
  bottom: calc(var(--thumbnail-width) / calc(var(--media-preview-ratio)) + var(--padding-lg) * 2);
  right: var(--padding-lg);
}

@media screen and (max-width: 749px) {
  slideshow-component:has(:not(.mobile\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter))
    .shopify-model-viewer-ui__controls-area {
    /* Position the controls just above the counter */
    bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
  }
}

@media screen and (min-width: 750px) {
  slideshow-component:has(:not(.desktop\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter))
    .shopify-model-viewer-ui__controls-area {
    /* Position the controls just above the counter */
    bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
  }

  .dialog-zoomed-gallery .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
    /* Move the controls up to match the padding on the thumbnails */
    bottom: var(--padding-lg);

    /* Move the controls to the left of the thumbnails list on the right */
    right: calc(var(--thumbnail-width) + var(--padding-lg) * 2);
  }
}

:is(deferred-media, .video-placeholder-wrapper).border-style {
  /* Apply the border radius to the video */
  overflow: hidden;
}

deferred-media {
  /* The overflow hidden in the deferred-media won't let the button show the focus ring */
  &:has(:focus-visible) {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

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

.deferred-media__poster-button {
  width: 100%;
  height: 100%;
  aspect-ratio: var(--video-aspect-ratio, auto);
}

.deferred-media__poster-button.deferred-media__playing {
  opacity: 0;
  transition: opacity 0.3s ease;
}

deferred-media img {
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease;
}

deferred-media iframe {
  width: 100%;
  height: 100%;
  border: none;
  aspect-ratio: var(--size-style-aspect-ratio, auto);
}

deferred-media[data-media-loaded] img {
  opacity: 0;
}

.deferred-media__poster-icon,
.video-placeholder-wrapper__poster-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.deferred-media__poster-icon svg,
.video-placeholder-wrapper__poster-icon svg {
  width: var(--button-size);
  height: var(--button-size);
  color: var(--color-white);
  filter: drop-shadow(var(--shadow-button));

  &:hover {
    color: rgb(var(--color-white-rgb) / var(--opacity-80));
  }

  @media screen and (min-width: 750px) {
    width: 4rem;
    height: 4rem;
  }
}

deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__poster-button ~ video) {
  /* only apply this on the video block not product media */
  object-fit: cover;
  height: 100%;
  aspect-ratio: var(--size-style-aspect-ratio, auto);
}

.button-shopify-xr {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--padding-md);
}

.button-shopify-xr > svg {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  fill: currentcolor;
  margin-inline-end: var(--margin-md);
}

.button-shopify-xr[data-shopify-xr-hidden] {
  display: none;
}

/* Swatches */
.swatch {
  --color-border: rgb(var(--color-foreground-rgb) / var(--style-border-swatch-opacity));
  --min-width-unitless: 15.9999; /* want to avoid division by 0 */
  --min-height-unitless: 15.9999; /* want to avoid division by 0 */
  --min-height: 16px;
  --min-width: 16px;

  /* mobile values */
  --scaling-factor: 0.5;
  --max-swatch-size: 28px;
  --max-pill-size: 20px;
  --max-filter-size: 32px;

  /* From the settings */
  --offset-swatch-width: calc(var(--variant-picker-swatch-width-unitless) - var(--min-width-unitless));
  --offset-swatch-height: calc(var(--variant-picker-swatch-height-unitless) - var(--min-height-unitless));

  /**
    Offset values are obtained from the following formulas:
      offset-width = width - min-width
      offset-height = height - min-height

    The offset-scaled-width and heigth are obtained by extending the line from
    [min,min] to [W,H] and taking the intersection with a square that starts at
    [min,min] and ends at [max,max].

    The extending line forms right angle triangles with the [min,min]->[max,max]
    box that enable us to derive the following formulas

    We also want the result to always be smaller than the input (pdp > everywhere else)
    by some scaling factor.
  */
  --offset-scaled-width: calc(
    var(--scaling-factor) * var(--offset-swatch-width) / var(--offset-swatch-height) * var(--offset-max-swatch-size)
  );
  --offset-scaled-height: calc(
    var(--scaling-factor) * var(--offset-swatch-height) / var(--offset-swatch-width) * var(--offset-max-swatch-size)
  );
  --offset-max-swatch-size: calc(var(--max-swatch-size) - var(--min-width));

  /* width = min(m + sU, (m + s * W'/H' * M'), M) */
  --swatch-width: min(
    calc(var(--min-width) + calc(var(--scaling-factor) * var(--offset-swatch-width) * 1px)),
    calc(var(--min-width) + var(--offset-scaled-width)),
    var(--max-swatch-size)
  );

  /* height = min(m + sV, (m + s * H'/W' * M'), M) */
  --swatch-height: min(
    calc(var(--min-height) + calc(var(--scaling-factor) * var(--offset-swatch-height) * 1px)),
    calc(var(--min-height) + var(--offset-scaled-height)),
    var(--max-swatch-size)
  );

  display: block;
  background: var(--swatch-background);
  background-position: var(--swatch-focal-point, center);
  border-radius: var(--variant-picker-swatch-radius);
  border: var(--style-border-swatch-width) var(--style-border-swatch-style) var(--color-border);
  width: var(--swatch-width);
  height: var(--swatch-height);

  /* This is different than `background-size: cover` because we use `box-sizing: border-box`,
   * doing it like makes the background clip under the border without repeating.
   */
  background-size: var(--swatch-width) var(--swatch-height);

  &.swatch--unavailable {
    border-style: solid;
  }

  &.swatch--unscaled {
    /* for when you want fixed sizing (e.g. pdp) */
    --swatch-width: var(--variant-picker-swatch-width);
    --swatch-height: var(--variant-picker-swatch-height);
  }

  &.swatch--filter {
    --swatch-width: var(--max-filter-size);
    --swatch-height: var(--max-filter-size);

    border-radius: var(--variant-picker-swatch-radius);
  }

  &.swatch--pill {
    --swatch-width: var(--max-pill-size);
    --swatch-height: var(--max-pill-size);

    border-radius: var(--variant-picker-swatch-radius);
  }

  /* swatches in filters and pills always have a border  */
  &.swatch--filter,
  &.swatch--pill {
    --style-border-swatch-width: var(--variant-picker-border-width);
    --style-border-swatch-style: var(--variant-picker-border-style);
    --color-border: rgb(var(--color-foreground-rgb) / var(--variant-picker-border-opacity));
  }

  @media screen and (min-width: 750px) {
    /* desktop values */
    --max-swatch-size: 32px;
    --max-pill-size: 16px;
    --max-filter-size: 28px;
    --scaling-factor: 0.65;
  }
}

.variant-picker .variant-option--buttons label:has(.swatch) {
  border-radius: var(--variant-picker-swatch-radius);
}

.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);
  }
}

.price,
.compare-at-price,
.unit-price {
  white-space: nowrap;
}

.unit-price {
  display: block;
  font-size: min(0.85em, var(--font-paragraph--size));
  color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
}

.tax-note.tax-note.tax-note {
  font-size: min(0.85em, var(--font-paragraph--size));
  font-weight: var(--font-paragraph--weight);
  color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
}

product-price.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) > *:not(.tax-note) {
  margin-block: 0;
}

.compare-at-price {
  opacity: 0.4;
  text-decoration-line: line-through;
  text-decoration-thickness: 1.5px;
}

.card-gallery {
  position: relative;
}

@media screen and (min-width: 750px) {
  product-card:focus-within .quick-add__button,
  .card-gallery:hover .quick-add__button {
    display: grid;
    will-change: margin, opacity;
    animation: elementSlideInTop var(--animation-speed) var(--animation-easing);
  }
}

@container (max-width: 70px) {
  .card-gallery:hover .quick-add__button {
    display: none;
  }
}

/* Drawer */
.drawer {
  background-color: var(--color-background);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);
  z-index: var(--layer-raised);
  transform: translateX(-120%);
  transition: transform var(--animation-speed) var(--animation-easing);
}

.drawer[data-open='true'] {
  transform: translateX(0);
}

.drawer-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.drawer__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--drawer-header-block-padding) var(--drawer-inline-padding);
}

.drawer__title {
  font-size: var(--font-h2--size);
  margin: 0;
}

.drawer__close {
  width: var(--minimum-touch-target);
  height: var(--minimum-touch-target);
}

.drawer__content {
  display: block;
  padding: var(--drawer-content-block-padding) var(--drawer-inline-padding);
  width: 100%;
}

/* Background overlay */
.background-overlay {
  position: relative;

  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--background-overlay-color, rgb(0 0 0 / 15%));
  }
}

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

.spacing-style,
.inherit-spacing {
  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(--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%;
}

.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);

    > .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;
    }
  }
}

@media (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: left;
  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:is(:focus, :hover) {
  box-shadow: var(--input-box-shadow-focus);
  background-color: var(--color-input-hover-background);
}

.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);
  left: 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) clamp(1rem, 1em * 0.25, 2rem);
  }

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

.checkbox {
  --checkbox-size: 22px;
  --checkbox-top: 50%;
  --checkbox-left: 1.5px;
  --checkbox-offset: 3px;
  --checkbox-border-radius: 7px;
  --checkbox-label-padding: 8px;
  --checkbox-path-opacity: 0;
  --checkbox-cursor: pointer;
  --checkbox-border: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-35-55));

  position: relative;
  display: flex;
  align-items: center;

  @media screen and (min-width: 750px) {
    --checkbox-size: 16px;
    --checkbox-border-radius: 5px;
    --checkbox-label-padding: 6px;
  }

  &:has(.checkbox__input:checked) {
    --checkbox-path-opacity: 1;
  }

  &:has(.checkbox__input:disabled) {
    --checkbox-cursor: not-allowed;
  }
}

.checkbox__input {
  position: absolute;
  opacity: 0;
  margin: 0;
  width: var(--checkbox-size);
  height: var(--checkbox-size);

  /* Outline is on the SVG instead, to allow it to have border-radius */
  &:focus-visible {
    outline: none;
  }

  &:focus-visible + .checkbox__label .icon-checkmark {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  &:checked + .checkbox__label .icon-checkmark {
    background-color: var(--color-foreground);
    border-color: var(--color-foreground);
  }

  &:disabled + .checkbox__label .icon-checkmark {
    background-color: var(--input-disabled-background-color);
    border-color: var(--input-disabled-border-color);
  }
}

.checkbox__label {
  position: relative;
  display: inline-flex;
  cursor: var(--checkbox-cursor);
  line-height: var(--checkbox-size);
  min-width: var(--minimum-touch-target);
}

.checkbox .icon-checkmark {
  height: var(--checkbox-size);
  width: var(--checkbox-size);
  flex-shrink: 0;
  border: var(--checkbox-border);
  border-radius: var(--checkbox-border-radius);
  background-color: var(--color-background);
}

.checkbox__label-text {
  padding-inline-start: var(--checkbox-label-padding);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.checkbox .icon-checkmark path {
  stroke: var(--color-background);
  opacity: var(--checkbox-path-opacity);
  transition: opacity var(--animation-speed) var(--animation-easing);
}

.checkbox__input:disabled + .checkbox__label {
  color: var(--input-disabled-text-color);
}

/* Add to cart button */
.button[id^='BuyButtons-ProductSubmitButton-'] {
  position: relative;
  overflow: hidden;
}

/* Cart bubble */
.cart-bubble {
  --cart-padding: 0.2em;

  position: relative;
  width: 20px;
  aspect-ratio: 1;
  border-radius: 50%;
  border-width: 0;
  display: flex;
  line-height: normal;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-button-text);
  padding-inline: var(--cart-padding);
}

.cart-bubble__background {
  position: absolute;
  inset: 0;
  background-color: var(--color-primary-button-background);
  border-radius: var(--style-border-radius-lg);
}

.cart-bubble__text {
  font-size: var(--font-size--2xs);
  z-index: var(--layer-flat);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Quantity selector */
.quantity-selector {
  --quantity-selector-width: 124px;

  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--color-input-text);
  background-color: var(--color-input-background);
  border: var(--style-border-width-inputs) solid var(--color-input-border);
  border-radius: var(--style-border-radius-inputs);
  flex: 1 1 var(--quantity-selector-width);
  align-self: stretch;
  transition: background-color var(--animation-speed) var(--animation-easing);

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

.product-form-buttons:has(.add-to-cart-button.button-secondary) .quantity-selector {
  border-radius: var(--style-border-radius-buttons-secondary);
}

.quantity-selector :is(.quantity-minus, .quantity-plus) {
  /* Unset button styles */
  padding: 0;
  background: transparent;
  box-shadow: none;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  width: var(--minimum-touch-target);
  height: var(--minimum-touch-target);
  flex-shrink: 0;
  color: var(--color-input-text);
}

.quantity-selector .quantity-minus {
  border-start-start-radius: var(--style-border-radius-inputs);
  border-end-start-radius: var(--style-border-radius-inputs);
}

.quantity-selector .quantity-plus {
  border-start-end-radius: var(--style-border-radius-inputs);
  border-end-end-radius: var(--style-border-radius-inputs);
}

.product-details .quantity-selector {
  border-radius: var(--style-border-radius-buttons-primary);
}

.product-details .quantity-selector .quantity-minus {
  border-start-start-radius: var(--style-border-radius-buttons-primary);
  border-end-start-radius: var(--style-border-radius-buttons-primary);
}

.product-details .quantity-selector .quantity-plus {
  border-start-end-radius: var(--style-border-radius-buttons-primary);
  border-end-end-radius: var(--style-border-radius-buttons-primary);
}

.quantity-selector .svg-wrapper {
  transition: transform var(--animation-speed) var(--animation-easing);
}

.quantity-selector svg {
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
}

:is(.quantity-minus, .quantity-plus):active .svg-wrapper {
  transform: scale(0.9);
}

.quantity-selector input[type='number'] {
  margin: 0;
  text-align: center;
  border: none;
  appearance: none;
  max-width: calc(var(--quantity-selector-width) - var(--minimum-touch-target) * 2);
  border-radius: var(--style-border-radius-buttons);
  color: var(--color-input-text);
  background-color: transparent;
}

/* Chrome, Safari, Edge, Opera */
.quantity-selector input[type='number']::-webkit-inner-spin-button,
.quantity-selector input[type='number']::-webkit-outer-spin-button {
  appearance: none;
}

/* Firefox */
.quantity-selector input[type='number'] {
  appearance: textfield;
}

/* Pills (used in facets and predictive search) */

.pills__pill {
  --pills-pill-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5-15));

  color: var(--color-foreground);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--gap-sm);
  min-width: 48px;
  padding: 6px 12px;
  border-radius: var(--style-border-radius-pills);
  cursor: pointer;
  background-color: var(--pills-pill-background-color);
  transition: background-color var(--animation-speed) var(--animation-easing);

  &:hover {
    --pills-pill-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
  }

  @media screen and (max-width: 749px) {
    padding: var(--padding-xs) var(--padding-md);
  }
}

.pills__pill > .svg-wrapper {
  --close-icon-opacity: 0.4;
  --icon-stroke-width: 1px;

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

.pills__pill--swatch {
  @media screen and (max-width: 749px) {
    padding-inline-start: var(--padding-sm);
  }
}

.pills__pill--swatch .swatch {
  margin-right: -4px;
}

.pills__pill--desktop-small {
  @media screen and (min-width: 750px) {
    font-size: var(--font-size--xs);
  }
}

/* Fly to cart animation */
fly-to-cart {
  position: fixed;
  width: 40px;
  height: 40px;
  left: 0;
  top: 0;
  border-radius: 50%;
  z-index: calc(infinity);
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
  box-shadow: 0 4px 8px rgb(0 0 0 / 20%);
  transition: opacity 0.3s ease;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: var(--color-foreground);
  transform: translate(var(--x, 0), var(--y, 0)) scale(var(--scale, 1));
}

/* ------------------------------------------------------------------------------ */

/* ------------------------------------------------------------------------------ */

/* ------------------------------------------------------------------------------ */

/* 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 slideInLeft {
  from {
    transform: translateX(var(--custom-transform-from, 100%));
  }

  to {
    transform: translateX(var(--custom-transform-to, 0));
  }
}

@keyframes slideInLeftViewTransition {
  from {
    transform: translateX(100px);
  }
}

@keyframes slideOutRight {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(var(--custom-transform-to, -100%));
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes slideOutLeft {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(100%);
  }
}

@keyframes slideInTop {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

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

@keyframes slideOutBottom {
  from {
    transform: translateY(0);
  }

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

@keyframes slideInBottom {
  from {
    transform: translateY(-100%);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes slideOutTop {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-100%);
  }
}

@keyframes cartBubbleSlideIn {
  from {
    transform: translateY(-1em);
  }

  to {
    transform: translateY(0);
  }
}

@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 elementSlideInBottom {
  from {
    transform: translateY(calc(-1 * var(--padding-sm)));
    opacity: 0;
  }

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

@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 dialogZoom {
  from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }

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

@keyframes thumbnail-selected {
  0%,
  100% {
    box-shadow: 0 0 0 2px transparent;
    scale: 0.9;
  }

  50% {
    box-shadow: 0 0 0 2px #000;
    scale: 1;
  }
}

@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;
  }
}

.bubble {
  display: inline-flex;
  height: calc(var(--variant-picker-swatch-height) / 1.5);
  font-size: var(--font-size--xs);
  border-radius: 20px;
  min-width: 20px;
  padding: 0 6px;
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
  color: var(--color-foreground);
  align-items: center;
  justify-content: center;
}

.bubble svg {
  width: 12px;
  height: 12px;
}

.top-shadow::before {
  content: '';
  box-shadow: 0 0 10px var(--color-shadow);
  position: absolute;
  z-index: var(--layer-lowest);
  inset: 0;
  clip-path: inset(-50px 0 0 0); /* stylelint-disable-line */
}

@media (min-width: 750px) {
  .top-shadow--mobile::before {
    display: none;
  }
}

.bottom-shadow::before {
  content: '';
  box-shadow: 0 0 10px var(--color-shadow);
  position: absolute;
  z-index: var(--layer-lowest);
  inset: 0;
  clip-path: inset(0 0 -50px 0); /* stylelint-disable-line */
}

@media (min-width: 750px) {
  .bottom-shadow--mobile::before {
    display: none;
  }
}

.video-placeholder-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: var(--size-style-aspect-ratio, auto);
}

:not(deferred-media) > .video-placeholder-wrapper {
  width: var(--video-placeholder-width);
}

.video-placeholder-wrapper > * {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/*
 * Slideshow Component
 */
slideshow-component {
  --cursor: grab;

  position: relative;
  display: flex;
  flex-direction: column;
  timeline-scope: var(--slideshow-timeline);
}

.slideshow--single-media {
  --cursor: default;
}

a slideshow-component {
  --cursor: pointer;
}

/*
 * Slideshow Slides
 */
slideshow-slides {
  width: 100%;
  position: relative;
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-color: transparent transparent;
  scrollbar-width: none;
  gap: var(--slideshow-gap, 0);
  cursor: var(--cursor);

  @media (prefers-reduced-motion) {
    scroll-behavior: auto;
  }

  &::-webkit-scrollbar {
    width: 0;
  }

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

  &::-webkit-scrollbar-thumb {
    background: transparent;
    border: none;
  }

  &[size='small'] {
    min-height: 17.5rem;
  }

  &[size='medium'] {
    min-height: 21.25rem;
  }

  &[size='large'] {
    min-height: 25rem;
  }

  @media screen and (min-width: 750px) {
    &[size='small'] {
      min-height: 26.25rem;
    }

    &[size='medium'] {
      min-height: 35rem;
    }

    &[size='large'] {
      min-height: 45rem;
    }
  }
}

slideshow-component[disabled='true'] slideshow-slides {
  overflow: hidden;
}

slideshow-component[mobile-disabled] slideshow-slides {
  @media screen and (max-width: 749px) {
    overflow: hidden;
  }
}

slideshow-slide {
  position: relative;
  scroll-snap-align: start;
  width: var(--slide-width, 100%);
  max-height: 100%;
  flex-shrink: 0;
  view-timeline-axis: inline;
  content-visibility: auto;
  contain-intrinsic-size: auto none;

  slideshow-component[actioned] &,
  &[aria-hidden='false'] {
    content-visibility: visible;
  }

  slideshow-component slideshow-slide:not([aria-hidden='false']) {
    content-visibility: hidden;
  }

  &[hidden]:not([reveal]) {
    display: none;
  }
}

slideshow-slide.product-media-container--tallest {
  content-visibility: visible;
}

@media screen and (max-width: 749px) {
  /* Media gallery has a peeking slide on the right side always, and on the left side when the current slide is the last one */
  .media-gallery--hint
    :is(
      slideshow-slide:has(+ slideshow-slide[aria-hidden='false']:last-of-type),
      slideshow-slide[aria-hidden='false'] + slideshow-slide
    ) {
    content-visibility: auto;

    slideshow-component[actioned] & {
      content-visibility: visible;
    }
  }
}

/*
 * Collection and Resource list carousels have peeking slides on both sides.
 * Card galleries preview the next or previous images on 'pointerenter', so we
 * try to kick load them beforehand (they are lazy loaded otherwise).
 */
:is(.resource-list__carousel, .card-gallery)
  :is(
    slideshow-slide:has(+ slideshow-slide[aria-hidden='false']),
    slideshow-slide[aria-hidden='false'] + slideshow-slide
  ) {
  content-visibility: auto;

  slideshow-component[actioned] & {
    content-visibility: visible;
  }
}

/*
 * Be specific about HTML children structure to avoid targeting nested slideshows.
 * Ensure that the content is 'visible' while scrolling instead of 'auto' to avoid issues in Safari.
 */
slideshow-component:is([dragging], [transitioning], :hover) > slideshow-container > slideshow-slides > slideshow-slide {
  content-visibility: visible;
}

slideshow-slides[gutters*='start'] {
  padding-inline-start: var(--gutter-slide-width, 0);
  scroll-padding-inline-start: var(--gutter-slide-width, 0);
}

slideshow-slides[gutters*='end'] {
  padding-inline-end: var(--gutter-slide-width, 0);
}

slideshow-component[dragging] {
  --cursor: grabbing;

  * {
    pointer-events: none;
  }
}

slideshow-component[dragging] slideshow-arrows {
  display: none;
}

slideshow-container {
  width: 100%;
  display: block;
  position: relative;
  grid-area: container;
  container-type: inline-size;
}

/*
 * Slideshow Controls
 */
slideshow-controls {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  scrollbar-width: none;
  min-height: var(--minimum-touch-target);
  grid-area: controls;

  &[controls-on-media] {
    position: absolute;
    bottom: 0;
  }
}

slideshow-controls::-webkit-scrollbar {
  display: none;
}

slideshow-controls button {
  --color: rgb(var(--color-foreground-rgb) / var(--opacity-30));
  --color-active: var(--color-foreground);
  --color-hover: rgb(var(--color-foreground-rgb) / var(--opacity-50));

  display: inline-block;
  height: var(--minimum-touch-target);
  width: var(--minimum-touch-target);
  cursor: pointer;
}

slideshow-controls .icon {
  width: var(--icon-size-sm);
  height: var(--icon-size-xs);
}

slideshow-controls[pagination-position='center'] {
  align-items: center;
  justify-content: center;
}

slideshow-controls[pagination-position='center'][thumbnails] {
  width: 100%;
}

slideshow-controls[pagination-position='center']:not([controls-on-media], [thumbnails], [icons-on-media]) {
  justify-content: space-between;
}

slideshow-component:has(slideshow-controls[thumbnails]) {
  &:has(slideshow-controls[pagination-position='right']) {
    display: grid;
    grid-template:
      'container controls' auto
      'arrows controls' min-content
      / 1fr auto;
  }

  &:has(slideshow-controls[pagination-position='left']) {
    display: grid;
    grid-template:
      'controls container' auto
      'controls arrows' min-content
      / auto 1fr;
  }

  slideshow-controls[pagination-position='left'] {
    order: -1;
  }
}

slideshow-controls[thumbnails]:is([pagination-position='right'], [pagination-position='left']) {
  display: flex;
  flex-direction: column;
  height: 0;
  min-height: 100%;

  .slideshow-controls__thumbnails-container {
    overflow: hidden auto;
  }

  &:not([controls-on-media]) {
    .slideshow-controls__thumbnails-container {
      position: sticky;
      top: var(--sticky-header-offset, 0);
    }

    .slideshow-controls__thumbnails {
      padding-block-start: var(--focus-outline-offset);
    }
  }
}

slideshow-controls:not([controls-on-media])[icons-on-media] {
  &[pagination-position='right'] {
    justify-content: flex-end;
  }

  &[pagination-position='left'] {
    justify-content: flex-start;
  }
}

slideshow-controls:not([controls-on-media]):is([pagination-position='left'], [pagination-position='right'])
  .slideshow-controls__thumbnails {
  padding-block: var(--padding-2xs);
}

slideshow-controls:not([controls-on-media]) {
  &:is([pagination-position='right']) {
    .slideshow-controls__thumbnails {
      padding-inline-end: var(--slideshow-thumbnails-padding-inline, var(--focus-outline-offset));
    }
  }

  &:is([pagination-position='left']) {
    .slideshow-controls__thumbnails {
      padding-inline-start: var(--slideshow-thumbnails-padding-inline, var(--focus-outline-offset));
    }
  }
}

slideshow-controls[controls-on-media] {
  z-index: var(--layer-raised);

  &:has(.slideshow-controls__dots, .slideshow-controls__counter) {
    --color-foreground: #fff;
    --color-foreground-rgb: var(--color-white-rgb);
  }

  &[pagination-position='right'] {
    right: 0;
  }

  &[pagination-position='left'] {
    left: 0;
  }

  &[pagination-position='center'] {
    width: 100%;
  }

  &:not([thumbnails])[pagination-position='left'] {
    width: fit-content;
    align-self: flex-start;
  }

  &:not([thumbnails])[pagination-position='right'] {
    width: fit-content;
    align-self: flex-end;
  }
}

slideshow-controls:is([pagination-position='right'], [pagination-position='left']) {
  .slideshow-controls__thumbnails {
    flex-direction: column;
  }
}

.slideshow-controls__arrows {
  display: flex;
  justify-content: space-between;
  height: var(--minimum-touch-target);
  grid-area: arrows;

  button {
    padding: 0 var(--padding-xs);
  }
}

.slideshow-controls__dots,
.slideshow-controls__counter {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  list-style: none;

  button {
    --color: rgb(var(--color-foreground-rgb) / var(--opacity-30));
    --color-active: var(--color-foreground);
    --color-hover: rgb(var(--color-foreground-rgb) / var(--opacity-50));
  }
}

slideshow-controls:has(.slideshow-controls__dots),
slideshow-component[autoplay] slideshow-controls {
  mix-blend-mode: difference;
}

.slideshow-controls__dots {
  gap: 0.6rem;
  padding: var(--padding-sm) var(--padding-lg);
  border-radius: 3rem;
  overflow: hidden;

  button {
    --size: 0.5rem;

    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--size) * 2);
    height: calc(var(--size) * 2);
    margin: calc(var(--size) / -2);
    font-size: 0;
    border-radius: calc(var(--size));

    &::after {
      content: '';
      display: block;
      background-color: var(--color);
      height: var(--size);
      width: var(--size);

      /* This is at --size / 2 to remove a visual regression on subpixel rendering displays */
      border-radius: calc(var(--size) / 2);

      @supports not (view-timeline-axis: inline) {
        &[aria-selected='true'] {
          --color: var(--color-active);
        }
      }

      &:hover {
        --color: var(--color-hover);
      }
    }

    &[aria-selected='true'] {
      --color: var(--color-active);
    }
  }
}

.slideshow-controls__dots,
.slideshow-controls__counter {
  &:only-child {
    margin-inline: auto;
  }
}

.slideshow-controls__counter {
  color: var(--color-foreground);
  background-color: rgb(0 0 0 / 40%);
  width: auto;
  border-radius: 2rem;
  padding: 0.3rem var(--padding-sm);
  margin-inline: var(--margin-sm);
  backdrop-filter: blur(10px);
  font-variant-numeric: tabular-nums;
  font-size: var(--font-size--xs);

  .slash {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-40));
    padding-inline: var(--padding-2xs);
    margin-block-start: -0.1rem;
  }
}

.slideshow-control[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.slideshow-control--large {
  .icon-caret {
    --icon-stroke-width: 1px;
  }

  .icon-caret {
    --icon-stroke-width: 1px;
  }

  .svg-wrapper,
  svg {
    width: var(--slideshow-controls-icon);
    height: var(--slideshow-controls-icon);
  }
}

/* Slideshow control shape styles */
.button-unstyled.slideshow-control.slideshow-control--shape-square,
.button-unstyled.slideshow-control.slideshow-control--shape-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  background-color: var(--color-primary-button-background);
  color: var(--color-primary-button-text);
}

.button-unstyled.slideshow-control.slideshow-control--shape-circle {
  border-radius: 50%;
}

.button-unstyled.slideshow-control.slideshow-control--shape-square {
  border-radius: 0;
}

.slideshow-control .icon-caret {
  rotate: -90deg;
}

/* Slideshow Thumbnails */
.slideshow-controls__thumbnails-container {
  display: flex;
  width: 100%;
  max-height: 100%;
  overflow-x: scroll;
  scrollbar-width: none;
}

.slideshow-controls__thumbnails {
  display: inline-flex;
  padding-inline: var(--slideshow-thumbnails-padding-inline, var(--padding-sm));
  padding-block: var(--slideshow-thumbnails-padding-block, var(--padding-sm));
  gap: var(--gap-xs);
  margin-inline: auto;
  height: fit-content;

  .slideshow-control {
    border-radius: var(--media-radius);
    width: clamp(44px, 7vw, var(--thumbnail-width));
    height: auto;
    aspect-ratio: var(--aspect-ratio);

    img {
      height: 100%;
      object-fit: cover;
      border-radius: var(--media-radius);
    }

    &:is([aria-selected='true']) {
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: calc(var(--focus-outline-offset) / 2);
      border: var(--style-border-width) solid rgb(var(--color-border-rgb) / var(--media-border-opacity));
    }
  }
}

.slideshow-controls__thumbnail {
  position: relative;
}

.slideshow-controls__thumbnail-badge {
  position: absolute;
  top: var(--padding-2xs);
  right: var(--padding-2xs);
  width: clamp(16px, 10%, 20px);
  height: clamp(16px, 10%, 20px);
  background-color: var(--color-background);
  border-radius: var(--style-border-radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 1px rgb(var(--color-foreground-rgb) / var(--opacity-5));
}

.slideshow-controls__thumbnail-badge svg {
  width: 60%;
  height: 60%;
  fill: var(--color-foreground);
  opacity: 0.6;
}

/* Slideshow Play/Pause */
.slideshow-control:is(.icon-pause, .icon-play) {
  color: var(--color-active);

  &:hover {
    color: var(--color-hover);
  }

  svg {
    display: none;
  }
}

slideshow-component:is([autoplay]) {
  &:is([paused]) {
    .icon-play > svg {
      display: block;
    }
  }

  &:not([paused]) {
    .icon-pause > svg {
      display: block;
    }
  }
}

/* Slideshow Arrows */
slideshow-arrows {
  --cursor-previous: w-resize;
  --cursor-next: e-resize;

  position: absolute;
  inset: 0;
  display: flex;
  z-index: var(--layer-heightened);
  pointer-events: none;
  mix-blend-mode: difference;
  align-items: flex-end;

  &[position='left'] {
    justify-content: flex-start;
    padding-inline: var(--padding-xs);
  }

  &[position='right'] {
    justify-content: flex-end;
    padding-inline: var(--padding-xs);
  }

  &[position='center'] {
    justify-content: space-between;
    align-items: center;
  }
}

slideshow-arrows:has(.slideshow-control--shape-square),
slideshow-arrows:has(.slideshow-control--shape-circle) {
  mix-blend-mode: normal;
}

slideshow-component[disabled='true'] slideshow-arrows {
  display: none;
}

slideshow-arrows .slideshow-control {
  pointer-events: auto;
  opacity: 0;
  min-height: var(--minimum-touch-target);
  min-width: var(--minimum-touch-target);
  padding: 0 var(--padding-xs);
  color: var(--color-white);
}

slideshow-arrows .slideshow-control.slideshow-control--style-none {
  display: none;
}

.media-gallery--carousel slideshow-arrows .slideshow-control {
  padding-inline: 0 var(--padding-md);
}

.card-gallery slideshow-arrows .slideshow-control {
  /* Align icons with quick-add button */
  padding-inline: var(--padding-xl);

  @container (max-width: 249px) {
    padding-inline: 0 var(--padding-sm);
  }
}

.media-gallery--carousel slideshow-arrows .slideshow-control {
  opacity: 1;
}

:not(.media-gallery--carousel)
  > :is(slideshow-component:hover, slideshow-component:focus-within):not(:has(slideshow-controls:hover))
  > slideshow-container
  > 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;
  }
}

.block-resource-list {
  display: flex;
  flex-direction: column;
  row-gap: var(--gap);
  min-width: 0;
  min-height: 0;
  container-type: inline-size;
  container-name: resource-list;
}

.section-resource-list {
  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__content:empty {
  display: none;
}

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

.section-resource-list.section--full-width product-card-link > .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));
  }
}

.resource-list--carousel-mobile {
  display: block;

  @media screen and (min-width: 750px) {
    display: none;
  }
}

.resource-list {
  --resource-list-mobile-gap-max: 9999px;
  --resource-list-column-gap: min(var(--resource-list-column-gap-desktop), var(--resource-list-mobile-gap-max));
  --resource-list-row-gap: min(var(--resource-list-row-gap-desktop), var(--resource-list-mobile-gap-max));

  width: 100%;

  @media screen and (max-width: 749px) {
    --resource-list-mobile-gap-max: 12px;
  }

  @container resource-list (max-width: 749px) {
    --resource-list-mobile-gap-max: 12px;
  }
}

.resource-list--grid {
  display: grid;
  gap: var(--resource-list-row-gap) var(--resource-list-column-gap);
  grid-template-columns: var(--resource-list-columns-mobile);

  @media screen and (min-width: 750px) {
    grid-template-columns: var(--resource-list-columns);
  }

  @container resource-list (max-width: 449px) {
    grid-template-columns: var(--resource-list-columns-mobile);
  }

  @container resource-list(min-width: 450px) and (max-width: 749px) {
    --resource-list-columns-per-row: 3;

    grid-template-columns: repeat(var(--resource-list-columns-per-row), 1fr);

    /* Avoid orphan in last row when there are 4, 7, or 10 items */
    &:has(.resource-list__item:first-child:nth-last-child(3n + 1)),
    /* Clean two full rows when there are 8 items */
    &:has(.resource-list__item:first-child:nth-last-child(8n)) {
      --resource-list-columns-per-row: 4;
    }
  }

  @container resource-list (min-width: 750px) {
    grid-template-columns: repeat(var(--resource-list-columns-per-row), 1fr);

    &:has(.resource-list__item:first-child:nth-last-child(n + 9)) {
      --resource-list-columns-per-row: 5;
    }

    &:has(.resource-list__item:first-child:nth-last-child(n + 7):nth-last-child(-n + 8)) {
      --resource-list-columns-per-row: 4;
    }

    &:has(.resource-list__item:first-child:nth-last-child(6)) {
      --resource-list-columns-per-row: 3;
    }

    &:has(.resource-list__item:first-child:nth-last-child(5)) {
      --resource-list-columns-per-row: 5;
    }

    &:has(.resource-list__item:first-child:nth-last-child(-n + 4)) {
      --resource-list-columns-per-row: 4;
    }
  }

  @container resource-list (min-width: 1200px) {
    &:has(.resource-list__item:first-child:nth-last-child(6)) {
      --resource-list-columns-per-row: 6;
    }
  }
}

.resource-list__item {
  height: 100%;
  color: var(--color-foreground);
  text-decoration: none;
}

.resource-list__carousel {
  --slide-width: 60vw;

  width: 100%;
  position: relative;
  container-type: inline-size;
  container-name: resource-list-carousel;

  .slideshow-control[disabled] {
    display: none;
  }

  .slideshow-control--next {
    margin-inline-start: auto;
  }
}

@container resource-list-carousel (max-width: 749px) {
  .resource-list__carousel .resource-list__slide {
    --slide-width: clamp(150px, var(--mobile-card-size, 60cqw), var(--slide-width-max));
  }
}

@container resource-list-carousel (min-width: 750px) {
  .resource-list__carousel .resource-list__slide {
    --section-slide-width: calc(
      (100% - (var(--resource-list-column-gap) * (var(--column-count) - 1)) - var(--peek-next-slide-size)) /
        var(--column-count)
    );
    --fallback-slide-width: clamp(150px, var(--mobile-card-size, 60cqw), var(--slide-width-max));
    --slide-width: var(--section-slide-width, var(--fallback-slide-width));
  }
}

.resource-list__carousel slideshow-slides {
  gap: var(--resource-list-column-gap);

  /* Add padding to prevent hover animations from being clipped in slideshow
     15px accommodates:
     - Scale effect (9px on each side from 1.03 scale)
     - Lift effect (4px upward movement)
     - Shadow (15px spread with -5px offset)
     Using 16px for better alignment with our spacing scale */

  margin-block: -16px;
  padding-block: 16px;
}

.resource-list__carousel slideshow-arrows {
  padding-inline: var(--util-page-margin-offset);
}

.resource-list__carousel .resource-list__slide {
  width: var(--slide-width);
  flex: 0 0 auto;
  scroll-snap-align: start;
  min-width: 0;
}

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

.group-block:has(> video-background-component),
.group-block:has(> .background-image-container) {
  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);
}

accordion-custom {
  details {
    &::details-content,
    .details-content {
      block-size: 0;
      overflow-y: clip;
      opacity: 0;
      interpolate-size: allow-keywords;
      transition: content-visibility var(--animation-speed-slow) allow-discrete,
        padding-block var(--animation-speed-slow) var(--animation-easing),
        opacity var(--animation-speed-slow) var(--animation-easing),
        block-size var(--animation-speed-slow) var(--animation-easing);
    }

    &:not([open]) {
      &::details-content,
      .details-content {
        padding-block: 0;
      }
    }

    &[open] {
      &::details-content,
      .details-content {
        opacity: 1;
        block-size: auto;

        @starting-style {
          block-size: 0;
          opacity: 0;
          overflow-y: clip;
        }

        &:focus-within {
          overflow-y: visible;
        }
      }
    }
  }
}

accordion-custom[data-disable-on-mobile='true'] summary {
  @media screen and (max-width: 749px) {
    cursor: auto;
  }
}

accordion-custom[data-disable-on-desktop='true'] summary {
  @media screen and (min-width: 750px) {
    cursor: auto;
  }
}

text-component {
  --shimmer-text-color: rgb(var(--color-foreground-rgb) / var(--opacity-50));
  --shimmer-color-light: rgb(var(--color-foreground-rgb) / var(--opacity-10));
  --shimmer-speed: 1.25s;

  display: inline-block;
  position: relative;
  transition: color var(--animation-speed-slow) ease;
  line-height: 1;

  &::after {
    content: attr(value);
    position: absolute;
    inset: 0;
    color: transparent;
    opacity: 0;
    transition: opacity var(--animation-speed-slow) var(--animation-easing);
    pointer-events: none;
    background-image: linear-gradient(
      -85deg,
      var(--shimmer-text-color) 10%,
      var(--shimmer-color-light) 50%,
      var(--shimmer-text-color) 90%
    );
    background-clip: text;
    background-size: 200% 100%;
    background-position: 100% 0;
    place-content: center;
  }

  &[shimmer] {
    color: transparent;

    &::after {
      opacity: 1;
      animation: text-shimmer var(--shimmer-speed) infinite linear;
    }
  }
}

@keyframes text-shimmer {
  0% {
    background-position: 100% 0;
  }

  100% {
    background-position: -100% 0;
  }
}

/* Animation transitions */
.transition-background-color {
  transition: background-color var(--animation-speed-medium) ease-in-out;
}

.transition-transform {
  transition: transform var(--animation-speed-medium) var(--animation-timing-bounce);
}

.transition-border-color {
  transition: border-color var(--animation-speed-medium) var(--animation-timing-hover);
}

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

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Product card title truncation - applied only to zoom-out view */
[product-grid-view='zoom-out'] :is(.product-card, .product-grid__card) :is(h4, .h4) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
}

/* Product card title truncation - applied on mobile regardless of view */
@media screen and (max-width: 749px) {
  :is(.product-card, .product-grid__card) :is(h4, .h4) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
  }
}

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

.header .product-card:hover,
.header .collection-card:hover,
.header .resource-card:hover,
.header-drawer .product-card:hover,
.header-drawer .collection-card:hover,
.header-drawer .resource-card:hover {
  z-index: auto;
  transform: none;
  box-shadow: none;
}

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


@font-face { font-family: BabyDoll; src: url('/cdn/shop/files/BabyDoll_1.ttf?v=1762340548'); } 

h1 {
  font-family: BabyDoll !important;
}

h2 {
  font-family: BabyDoll !important;
}

h3 {
  font-family: BabyDoll !important;
}

h4 {
  font-family: BabyDoll !important;
}

h5 {
  font-family: BabyDoll !important;
}


h6 {
  font-family: BabyDoll !important;
}

body {
  font-family: BabyDoll !important;
}

p {
  font-family: BabyDoll !important;
}

a {
  font-family: BabyDoll !important;
}

/* 1. FONT IMPORT (Load the Custom Font into the Theme) */
@font-face {
  font-family: 'BabyDoll';
  src: url('/cdn/shop/files/BabyDoll_1.ttf?v=1762340548') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Ensures text remains visible during font loading */
}

/* 2. FONT APPLICATION (Override default styles for forms and buttons) */

/* Target ALL Input Fields (Text, Email, Password, etc.) and Text Areas */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
textarea {
  font-family: 'BabyDoll', cursive !important; /* 'cursive' is a fallback font */
}

/* Target ALL Buttons and specific challenge/checkout buttons */
button,
.button,
.shopify-challenge__button,
.customer button {
  font-family: 'BabyDoll', cursive !important;
}

/* Target Select dropdowns */
select {
  font-family: 'BabyDoll', cursive !important;
}

/* Additional Custom CSS to force 'BabyDoll' on price, badges, and checkout */
.price,
.product__price,
.cart-subtotal__price,
.line-item__price,
.estimated-total,
.estimated-total__price {
  font-family: 'BabyDoll', cursive !important;
}

.button,
.button__text,
button[name="checkout"] {
  font-family: 'BabyDoll', cursive !important;
}

.badge,
.product-form__buttons .sold-out {
  font-family: 'BabyDoll', cursive !important;
}

.cart-item__details,
.totals__subtotal-value {
    font-family: 'BabyDoll', cursive !important;
}

/* FINAL FIX: Specifically targets the "Sold out" badge using the exact theme classes */
.product-badges__badge,
.product-badges__badge--rectangle {
  font-family: 'BabyDoll', cursive !important;
}

/* FINAL COMPREHENSIVE FIX: Targets all remaining cart, total, and variant text */

/* 1. Target General Price Spans (R 289.00) */
/* The plain <span>R 289.00</span> needs context, targeting the span itself is risky, 
   but targeting the text-component and specific cart values is safer. */

/* 2. Target Variant Text (<dd>beige</dd>) */
dd {
  font-family: 'BabyDoll', cursive !important;
}

/* 3. Target Text-Component Price (for R 289.00) */
/* This is a crucial element for displaying the price and total values */
text-component,
text-component[ref="cartTotal"], 
.cart-secondary-typography {
  font-family: 'BabyDoll', cursive !important;
}

/* 4. Target "Discount" Label (<span class="disclosure-trigger__label h6">Discount</span>) */
.disclosure-trigger__label,
.h6 {
  font-family: 'BabyDoll', cursive !important;
}

/* 5. Target "Estimated total" Label (<span class="cart__total-label cart-primary-typography">Estimated total</span>) */
.cart__total-label,
.cart-primary-typography {
  font-family: 'BabyDoll', cursive !important;
}

/* 6. Target Small Text (Duties and taxes included. Shipping...) */
small {
  font-family: 'BabyDoll', cursive !important;
}

/* --- START Custom Border Styles --- */

/* 1. Contact Form Fields (Name, Email, Phone, Comment) */
.field__input,
.contact-form input,
.contact-form textarea {
    border-color: #000 !important;
}

/* 2. Email Address Block (Newsletter/Subscription) */
.newsletter-form__field-wrapper,
.input-group__field,
#Email {
    border-color: #000 !important;
}

/* Optional: To ensure the rounded corners look correct on all inputs */
.field__input {
    border-radius: 40px !important; 
}

/* Custom CSS to change the Email Address block border to black */

/* Targets the input directly using its most specific classes */
.email-signup__input {
    border-color: #000 !important; /* Sets the border color to black */
}

/* Also ensure consistency with the contact form fields */
.field__input {
    border-color: #000 !important;
}

/* --- START Custom Border Styles (Color & Thickness) --- */

/* Targets ALL input fields including Name, Email, Phone, Comment, and Newsletter/Subscription */
.field__input,
.contact-form input,
.contact-form textarea,
.email-signup__input {
    /* 1. Sets the Border Color to Black */
    border-color: #000 !important;
    
    /* 2. Sets the Border Thickness (Adjust '2px' to match your Comment box) */
    border-width: 2px !important;
}

/* Optional: To ensure the rounded corners look correct on all inputs */
.field__input {
    border-radius: 40px !important; 
}

/* --- END Custom Border Styles (Color & Thickness) --- */
/* --- END Custom Border Styles --- */

/* Custom CSS to change the placeholder text color to black */
.email-signup__input::-webkit-input-placeholder { /* For Chrome, Safari, and Opera */
  color: #000 !important;
  opacity: 1 !important; /* Ensures it's fully visible if opacity was lowered */
}

.email-signup__input:-moz-placeholder { /* For Firefox 4 to 18 */
  color: #000 !important;
  opacity: 1 !important;
}

.email-signup__input::-moz-placeholder { /* For Firefox 19+ */
  color: #000 !important;
  opacity: 1 !important;
}

.email-signup__input:-ms-input-placeholder { /* For IE 10+ */
  color: #000 !important;
  opacity: 1 !important;
}

/* --- START Custom Form Styles --- */

/* 1. Sets Color, Thickness, and Radius for ALL input fields (Contact Form & Newsletter) */
.field__input,
.contact-form input,
.contact-form textarea,
.email-signup__input {
    /* Border Style */
    border-color: #000 !important; /* Black Color */
    border-width: 2px !important;  /* Thickness (Adjust '2px' if your Comment box is thicker) */
    
    /* Border Radius (Adjust '40px' until it matches your contact form's roundness) */
    border-radius: 40px !important;
}

/* 2. Sets Placeholder Text Color to Black for the Email Input */
.email-signup__input::-webkit-input-placeholder { /* Chrome, Safari, Opera */
  color: #000 !important;
  opacity: 1 !important;
}

.email-signup__input:-moz-placeholder { /* Firefox 4 to 18 */
  color: #000 !important;
  opacity: 1 !important;
}

.email-signup__input::-moz-placeholder { /* Firefox 19+ */
  color: #000 !important;
  opacity: 1 !important;
}

.email-signup__input:-ms-input-placeholder { /* IE 10+ */
  color: #000 !important;
  opacity: 1 !important;
}

/* --- END Custom Form Styles --- */

/* --- START Custom Form Styles --- */

/* 1. Sets Color, Thickness, and Radius for ALL input fields (Contact Form & Newsletter) */
.field__input,
.contact-form input,
.contact-form textarea,
.email-signup__input {
    /* Border Style */
    border-color: #000 !important; /* Black Color */
    border-width: 2px !important;  /* Thickness (From Comment box) */
    
    /* Border Radius: Set to 10px (approx. 1/4 of the previous 40px value) */
    border-radius: 10px !important;
}

/* 2. Sets Placeholder Text Color to Black for the Email Input */
.email-signup__input::-webkit-input-placeholder { /* Chrome, Safari, Opera */
  color: #000 !important;
  opacity: 1 !important;
}

.email-signup__input:-moz-placeholder { /* Firefox 4 to 18 */
  color: #000 !important;
  opacity: 1 !important;
}

.email-signup__input::-moz-placeholder { /* Firefox 19+ */
  color: #000 !important;
  opacity: 1 !important;
}

.email-signup__input:-ms-input-placeholder { /* IE 10+ */
  color: #000 !important;
  opacity: 1 !important;
}

/* --- END Custom Form Styles --- */

/* --- START Final Custom Form Styles --- */

/* 1. Sets Color, Thickness, and Radius for ALL input fields (Default/Resting State) */
.field__input,
.contact-form input,
.contact-form textarea,
.email-signup__input {
    /* Border Style */
    border-color: #000 !important; /* Black Color */
    border-width: 2px !important;  /* Thickness */
    border-radius: 10px !important; /* Radius (1/4 of previous estimate) */
    
    /* Forces site-wide lowercase text rendering */
    text-transform: lowercase !important;
}

/* 2. Sets Placeholder Text Color to Black */
.email-signup__input::-webkit-input-placeholder, /* Chrome, Safari, Opera */
.email-signup__input:-moz-placeholder,          /* Firefox 4 to 18 */
.email-signup__input::-moz-placeholder,         /* Firefox 19+ */
.email-signup__input:-ms-input-placeholder {    /* IE 10+ */
  color: #000 !important;
  opacity: 1 !important;
}

/* --- START Final Custom Form Styles --- */

/* 1. Sets Color, Thickness, and Radius for ALL input fields (Default/Resting State) */
.field__input,
.contact-form input,
.contact-form textarea,
.email-signup__input {
    /* Border Style */
    border-color: #000 !important; /* Black Color */
    border-width: 2px !important;  /* Thickness */
    border-radius: 10px !important; /* Radius (1/4 of previous estimate) */
    
    /* Forces site-wide lowercase text rendering */
    text-transform: lowercase !important;
}

/* 2. Sets Placeholder Text Color to Black */
.email-signup__input::-webkit-input-placeholder, /* Chrome, Safari, Opera */
.email-signup__input:-moz-placeholder,          /* Firefox 4 to 18 */
.email-signup__input::-moz-placeholder,         /* Firefox 19+ */
.email-signup__input:-ms-input-placeholder {    /* IE 10+ */
  color: #000 !important;
  opacity: 1 !important;
}

/* 3. Sets the Focus/Active Border (When clicked or tabbed into) to Red */
.field__input:focus,
.contact-form input:focus,
.contact-form textarea:focus,
.email-signup__input:focus {
    border-color: #000000 !important; /* Red Color */
    border-width: 2px !important; 
    box-shadow: none !important;
    outline: none !important; 
}

/* 4. Sold Out Badge (Yellow banner with Red text and Red border) */
.product-badges__badge.color-scheme-3 {
    background-color:rgb(255, 238, 0) !important; /* Yellow Banner */
    color: #FF0000 !important;           /* Red Text */
    border: 2px solid #FF0000 !important; /* Red Border Added */
}

/* 5. Forces ALL text on the site to render in lowercase */
body {
    text-transform: lowercase !important;
}

/* --- END Final Custom Form Styles --- */

/* Custom Styles for Product Form Blocks */

/* --- Custom Styles for Product Form Buttons --- */

/* --- Fix for Quantity Selector Input Field --- */

/* 1. Target the OUTER container to apply the dashed border */
/* Assuming this class is correct for the overall box */
.product-form__quantity {
  background-color: white !important;
  /* Apply the 2px dashed black border */
  border: 2px solid #000000 !important; 
  border-radius: 0 !important; 
}

/* 2. Target the INPUT field itself to remove any conflicting border/background */
/* We target the input[type="number"] inside the quantity area */
.product-form__quantity input[type="number"], 
.quantity__input {
  /* Ensure the background is white */
  background-color: white !important;
  /* CRITICAL: Remove the default solid border from the input field */
  border: none !important; 
  /* Ensure text is black for visibility */
  color: black !important;
  /* Add padding or height adjustments if the removal of the border causes shifting */
  padding: 0 !important;
  height: auto !important;
}

/* 3. Also target the decrease/increase buttons around the input */
/* Common class names are used here */
.product-form__quantity button {
  background-color: white !important;
  border: none !important; 
  color: black !important;
}

/* --- Keep the Add to Cart/Buy It Now buttons the same --- */
/* --- Final and Complete Custom Styles with Text Fix --- */

/* 1. Target the quantity selector container */
.product-form__quantity {
  background-color: white !important;
  border: 2px solid #000000 !important; 
  border-radius: 0 !important; 
}

/* 2. Target the quantity input field and buttons inside the selector */
.product-form__quantity input[type="number"], 
.quantity__input,
.product-form__quantity button {
  background-color: white !important;
  border: none !important; 
  color: black !important;
}

/* 3. Target the 'Add to Cart' button */
button[name="add"], .product-form__buttons .button {
  background-color: white !important; 
  color: black !important; 
  border: 2px solid #000000 !important;
  box-shadow: none !important; 
}

/* 4. Target the 'Buy It Now' / Dynamic Checkout button */
.shopify-payment-button__button {
  background-color: white !important;
  border: 2px solid #000000 !important;
  box-shadow: none !important;
}

/* CRITICAL FIX: Ensure the text inside the Buy It Now button is black 
   This selector is highly specific and targets the un-hovered state directly. */
.shopify-payment-button__button.shopify-payment-button__button--unbranded:not(:hover) {
    color: black !important; /* Forces text color to black */
}

/* Ensure any internal content (like icons) is also black */
.shopify-payment-button__button.shopify-payment-button__button--unbranded * {
    color: black !important;
}

/* 5. Handle Hover/Focus State to keep the style consistent */
button[name="add"]:hover, .product-form__buttons .button:hover,
.shopify-payment-button__button:hover {
  background-color: white !important; 
  color: black !important;           
  border: 2px solid #000000 !important; 
}

/* Ensure the text remains black on hover for the Buy It Now button */
.shopify-payment-button__button:hover {
  color: black !important; 
}
.shopify-payment-button__button:hover * {
  color: black !important; 
}

/* Custom styles to make the submit button outlined */
.submit-button {
  /* 1. Black Border */
  border: 1px solid #000000 !important; 

  /* 2. White Filling (Background) */
  background-color: #ffffff !important; 

  /* 3. Text Color */
  color: #000000 !important; 

  /* Ensure padding is consistent, adjust as needed */
  padding: 10px 20px; 
}




/* --- START Custom Submit Button FORCED ALL STATES (MAX SPECIFICITY FINAL) --- */

/* 1. Sold Out Badge (Reference Style) - Kept for reference */
.product-badges__badge.color-scheme-3 {
    background-color: rgb(255, 238, 0) !important; /* Yellow Banner */
    color: #FF0000 !important;            /* Red Text */
    border: 2px solid #FF0000 !important; /* Red Border Added */
}


/* 2. FORCED STYLING FOR ALL STATES */
/* Targets the button by its class, type, and attribute, ensuring maximum specificity.
   This selector covers the resting state, hover, focus, and active states. */
button.submit-button[type="submit"],
.button.submit-button[type="submit"],
.button.submit-button[data-shopify-editor-block],

/* Include all interaction states in the same high-specificity selector */
button.submit-button[type="submit"]:is(:not([disabled]), :hover, :focus, :active),
.button.submit-button[type="submit"]:is(:not([disabled]), :hover, :focus, :active) {
    
    /* Overrides the theme's button variables */
    --button-color: #FF0000 !important;
    --button-background-color: rgb(255, 238, 0) !important;
    --button-border-color: #FF0000 !important;

    /* Apply the explicit properties */
    background-color: rgb(255, 238, 0) !important; /* Background: Yellow */
    color: #FF0000 !important;                   /* Text Color: Red */
    border: 2px solid #FF0000 !important;           /* Border: 2px Solid Red */
    
    /* General cleanup of conflicting styles */
    box-shadow: none !important; 
    outline: none !important;
    
    /* Keep other sizing styles clean */
    padding: 10px 20px !important; 
}


/* --- END Custom Submit Button FORCED ALL STATES (MAX SPECIFICITY FINAL) --- */



/* --- START Custom Search Bar Removal --- */

/* Targets the header search button and hides it completely */
.search-modal__button.header-actions__action {
    display: none !important;
}

/* --- END Custom Search Bar Removal --- */




/*
 * Custom Styles for Submit Button
 * New Palette: Black and White (Static appearance across all states)
 * Border Thickness: 2px solid
 * Corner Radius: 10px
*/
.button.submit-button,
.button.submit-button:not(.disabled):not([disabled]) {
    /* *** ADDED TO MAKE THE BUTTON FULL WIDTH *** */
    width: 100% !important;
    
    /* 1. Background Color: White Block */
    background-color: #FFFFFF !important;
    
    /* 2. Text Color: Black Text */
    color: #000000 !important;
    
    /* 3. Border Style: 2px solid Black Border */
    border: 2px solid #000000 !important;
    
    /* 4. Corner Radius: 10px */
    border-radius: 10px !important;
    
    /* Ensure padding and font size are readable */
    padding: 1rem 2rem; 
  /*  font-weight: bold;*/
    
    /* SHADOW REMOVED */
}

/* Hover and Focus States must match the normal state exactly */
.button.submit-button:hover,
.button.submit-button:focus {
    /* Revert hover styles to match normal state (White background, Black text/border) */
    background-color: #FFFFFF !important; 
    color: #000000 !important;
    border: 2px solid #000000 !important;
    transform: translateY(0); /* Remove any movement on hover */
}

/* Disabled State (optional, but good practice) */
.button.submit-button.disabled,
.button.submit-button[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}



/*
 * Custom Styles for Submit Button
 * New Palette: Black and White (Static appearance across all states)
 * Border Thickness: 2px solid
 * Corner Radius: 10px
*/
.button.submit-button,
.button.submit-button:not(.disabled):not([disabled]),
/* --- NEW ADDITION FOR SHOPIFY CHALLENGE BUTTON --- */
.shopify-challenge__button.btn {
    /* *** ADDED TO MAKE THE BUTTON FULL WIDTH *** */
   
    
    /* 1. Background Color: White Block */
    background-color: #FFFFFF !important;
    
    /* 2. Text Color: Black Text */
    color: #000000 !important;
    
    /* 3. Border Style: 2px solid Black Border */
    border: 2px solid #000000 !important;
    
    /* 4. Corner Radius: 10px */
    border-radius: 10px !important;
    
    /* Ensure padding and font size are readable */
    padding: 1rem 2rem; 

    
    /* SHADOW REMOVED */
}

/* Hover and Focus States must match the normal state exactly */
.button.submit-button:hover,
.button.submit-button:focus,
/* --- NEW ADDITION FOR HOVER/FOCUS STATE --- */
.shopify-challenge__button.btn:hover,
.shopify-challenge__button.btn:focus {
    /* Revert hover styles to match normal state (White background, Black text/border) */
    background-color: #FFFFFF !important; 
    color: #000000 !important;
    border: 2px solid #000000 !important;
    transform: translateY(0); /* Remove any movement on hover */
}

/* Disabled State (optional, but good practice) */
.button.submit-button.disabled,
.button.submit-button[disabled],
.shopify-challenge__button.btn[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}








/* --- START Custom Footer LIGHT PNG Background --- */

/* Targets the main footer element and common section wrappers */
.footer,
.footer-section, 
footer { 
    /* 1. Insert the PNG URL */
    background-image: url('/cdn/shop/files/Timeline_1_41090fbc-4e57-40fb-88c5-17744a4457e4.gif?v=1766523326') !important;
    
    /* 2. Background properties */
    background-size: cover !important;          
    background-position: center center !important;
    background-repeat: no-repeat !important;
    
    /* 3. Text and Background Color Fixes */
    /* Setting text to black for contrast over the light PNG */
    color: #000000 !important; 
    --color-foreground: #000000 !important;
    background-color: transparent !important; 

    /* NEW: Ensure the footer itself spans the full width */
    width: 100% !important; 
    max-width: 100% !important; /* Forces it to use the full viewport width */
    padding: 0 !important; /* Removes any default padding on the footer */
    
}

/* Ensure the theme's default background overlay doesn't block the image */
.footer-section .section-background {
    background-color: transparent !important;
}

/* Fix text and link colors inside the footer */
.footer a,
.footer .link,
.footer h1, .footer h2, .footer h3, .footer p {
    /* Use black color for links and text to contrast with the light PNG */
    color: #000000 !important;
}

/* --- END Custom Footer LIGHT PNG Background --- */



/* 1. Make the parent a Flex container */
.about-us-container {
    display: flex;
    /* Aligns items vertically in the center */
    align-items: center; 
    /* Ensures the row does not wrap if elements have fixed width */
    flex-wrap: nowrap; 
    /* Optional: adds some space between the image and text */
    gap: 30px; 
}

/* 2. Make the child elements take up equal space (50/50 split) */
.about-us-image-col,
.about-us-text-col {
    /* flex-grow: 1 allows them to fill the space */
    /* flex-basis: 0 ensures they start with 0 space before growing */
    flex: 1 0 0; 
    /* The 1 0 0 shorthand is the same as flex-grow: 1; flex-shrink: 0; flex-basis: 0; */
}

/* Hide the "Buy it now" button and all other dynamic checkout buttons */
.shopify-payment-button,
.product-form__buttons .shopify-payment-button {
    display: none !important;
}

/* Optional: Hide dynamic checkout buttons on the Cart Page as well */
.cart__dynamic-checkout-buttons.additional-checkout-buttons {
    display: none !important;
}

/* Removes the bold styling from all H4 headings */
h4 {
    font-weight: normal; 
}

/* Optional: If you want a specific lighter weight, like semi-bold, you could use: 
h4 {
    font-weight: 500; 
}
(This assumes your theme includes different font weights.)
*/


/* Force all text color to black across the entire site */
body, 
p, 
a, 
span, 
div, 
li, 
td, 
th, 
figcaption,
h1, h2, h3, h4, h5, h6 {
    color: #000000 !important;
}

/* Ensure links remain black, overriding hover/active theme styles */
a:link, 
a:visited, 
a:hover, 
a:active {
    color: #000000 !important;
}

/* --- FORCE MOBILE VERSION (30% WIDER) FOR ALL SCREEN SIZES --- */

/* 1. Pretend every screen is a wider mobile screen */
html {
  width: 507px !important; /* 390px mobile width × 1.3 */
  max-width: 100% !important;
  margin: 0 auto !important;
  overflow-x: hidden !important;
  transform: scale(1);
}

/* 2. Override ALL desktop breakpoints */
@media screen and (min-width: 750px),
       screen and (min-width: 990px),
       screen and (min-width: 1200px) {
  html,
  body,
  .page-width,
  .container {
    width: 507px !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }
}

/* 3. Make sure images + sections stretch correctly */
img,
video,
.shopify-section {
  width: 100% !important;
  max-width: 100% !important;
}

/* 4. Stop horizontal scrolling */
body {
  overflow-x: hidden !important;
}

/* --- WIDEN CONTACT FORM ONLY (≈40%) --- */

/* Target the contact form wrapper */
.contact,
.contact-form,
.contact__fields,
form.contact-form {
  width: 710px !important; /* 507px × 1.4 = ~710px */
  max-width: 100% !important;
  margin: 0 auto !important;
}

/* Make sure input fields stretch properly */
.contact input,
.contact textarea,
.contact select,
.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Removes the Cart Icon from the header */
.header-actions__cart-icon {
    /* Hides the element completely, removing it from the document flow */
    display: none !important; 
}

/* Removes the Hamburger Menu icon from the header */
.header__icon--menu {
    /* Hides the element completely, removing it from the document flow */
    display: none !important; 
}

/* Optional: Targets the entire summary element just in case */
summary.header__icon--menu {
    display: none !important;
}

/* Forces the main menu link text to be bold */
.menu-list__link-title {
    font-weight: bold !important;
}

/* Optional: Targets the link itself, just in case */
.menu-list__link {
    font-weight: bold !important;
}



/* --- FINAL FIX: SYNCHRONIZED, CENTERED, MOBILE-STYLE LAYOUT (750px+) --- */

@media screen and (min-width: 750px) {
  
  /* =================================================================================
     STEP 1: DEFINE OVERALL WIDTH AND CENTERING (650px wide, centered)
     ================================================================================= */
     
  .cart-page {
    /* Set the maximum width and center the entire cart component */
    max-width: 650px !important; 
    margin-left: auto !important; 
    margin-right: auto !important;
    
    /* Force single-column structure and display block */
    grid-template-columns: 1fr !important; 
    display: block !important;
    text-align: left !important;
    padding: 0 !important;
  }
  
  /* CRITICAL: Override the conflicting grid placement that forces content right/center */
  .shopify-section:has(.cart-page) .section > .cart-page {
    grid-column: 1 / -1 !important; 
    width: 100% !important; /* Forces it to fill the 650px max-width */
  }

  /* Target outer section container to remove its own side padding/margins */
  .shopify-section:has(.cart-page) .section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* =================================================================================
     STEP 2: FORCE ALL NESTED CONTAINERS TO STRETCH 100% OF THE 650PX PARENT
     ================================================================================= */
  
  /* Target the main Product List and Summary Containers and strip all width limits */
  .cart-page__items, 
  .cart-page__summary {
    max-width: 100% !important; 
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  /* HIGH-SPECIFICITY TARGET: Ensure containers INSIDE the Summary block stretch 
     This targets the <div class="cart__summary-container"> and its children. */
  .cart__summary-container,
  .cart__summary-inner,
  .cart__summary-container * {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important; /* Remove internal centering margins */
    padding: 0 !important; /* Remove internal padding */
  }

  /* Target suspected inner wrappers inside the product list for thoroughness */
  .cart-page__items * {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* =================================================================================
     STEP 3: ADD BACK SENSIBLE PADDING TO THE CONTENT (Final visual spacing)
     ================================================================================= */
     
  /* Apply consistent padding to the content blocks for visual spacing (20px to match mobile) */
  .cart-page__items, 
  .cart-page__summary {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Final vertical spacing for the summary section */
  .cart-page__summary {
    margin-top: 40px !important;
  }
}
/* --- END FINAL FIX --- */

/* --- PRODUCT LINE FIX: HIDE COUNTER & FORCE SINGLE ROW (Desktop 750px+) --- */

@media screen and (min-width: 750px) {
  
  /* 1. RE-STYLE QUANTITY SELECTOR TO LOOK LIKE TEXT "x 1" */
  .cart-items__quantity .quantity-selector {
    display: flex !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    border: none !important;
    background: transparent !important;
    width: auto !important;
    min-height: auto !important;
    padding: 0 !important;
    margin-right: 50px !important; /* Space between x1 and Bin */
  }
  
  /* Hide the plus/minus buttons */
  .cart-items__quantity .quantity-selector button {
    display: none !important;
  }
  
  /* Style the input to look like text */
  .cart-items__quantity .quantity-selector input {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    width: auto !important;
    max-width: 30px !important;
    text-align: left !important;
    color: #000000 !important;
    font-family: 'BabyDoll', cursive !important;
    font-size: 1rem !important;
    -moz-appearance: textfield !important;
  }
  .cart-items__quantity .quantity-selector input::-webkit-outer-spin-button,
  .cart-items__quantity .quantity-selector input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
  }

  /* Add the "x" prefix */
  .cart-items__quantity .quantity-selector::before {
    content: 'x';
    font-family: 'BabyDoll', cursive !important;
    font-size: 1rem !important;
    color: #000000 !important;
    margin-right: 3px;
  }
  
  /* 2. OVERRIDE THE PRODUCT ROW GRID (Lines 84-85 in cart-products.liquid) */
  .cart-items__table-row {
    /* Set a clean 4-column layout: Image | Details | Qty+Bin | Total Price */
    grid-template-columns: 7.5rem auto auto 1fr !important; 
    
    /* Force a single row layout, removing the separate quantity row */
    grid-template-rows: auto !important;
    
    /* Redefine grid areas to use the single row, preventing stacking */
    grid-template-areas: 'media details remove price' !important;
    
    align-items: center !important; /* Vertically center all content */
    column-gap: 4px !important;
  }
  
  /* 3. ALIGN AND POSITION ELEMENTS TO NEW GRID AREAS */
  
  /* The Image Cell (media) - Already correct */
  .cart-items__media {
    grid-area: media !important;
    margin-right: 24px !important;
    align-self: center !important;
  }
  
  /* The Details Cell (product name/variants) */
  .cart-items__details {
    grid-area: details !important;
    padding-right: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  .cart-items__details > * {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
  }
  
  /* The Quantity Cell (Now used only for the Delete Button) */
  .cart-items__quantity {
    /* Assign the cell to the new 'remove' area */
    grid-area: remove !important;
    
    /* Remove original quantity styling and center the content */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-direction: row !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }
  
  /* The Total Price Cell */
  .cart-items__price {
    grid-area: price !important;
    text-align: right !important; /* Ensure the price stays right-aligned */
  }

  /* 4. Ensure the delete button is visible and sized correctly */
  .cart-items__remove {
    /* Ensure the button is visible, overriding any display: none that might be left */
    display: flex !important; 
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
  }
  
  /* Hide the error cell */
  .cart-items__error {
    display: none !important;
  }
}

/* --- END PRODUCT LINE FIX --- */

/* --- MOBILE CART LINE FIX: HIDE COUNTER & NEATEN DISPLAY (Max 749px) --- */

@media screen and (max-width: 749px) {
  
  /* 1. RE-STYLE QUANTITY SELECTOR TO LOOK LIKE TEXT "x 1" */
  .cart-items__quantity .quantity-selector {
    display: flex !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    border: none !important;
    background: transparent !important;
    width: auto !important;
    min-height: auto !important;
    padding: 0 !important;
    margin-right: 50px !important;
  }
  
  /* Shift content down slightly to center visually with image */
  .cart-items__details,
  .cart-items__price {
    margin-top: 8px !important;
  }

  .cart-items__quantity .quantity-selector button { display: none !important; }
  
  .cart-items__quantity .quantity-selector input {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    width: auto !important;
    max-width: 30px !important;
    text-align: left !important;
    color: #000000 !important;
    font-family: 'BabyDoll', cursive !important;
    font-size: 1rem !important;
  }
  
  .cart-items__quantity .quantity-selector::before {
    content: 'x';
    font-family: 'BabyDoll', cursive !important;
    font-size: 1rem !important;
    color: #000000 !important;
    margin-right: 3px;
  }

  /* 2. OVERRIDE THE MOBILE ROW GRID (Lines 84-85 in cart-products.liquid) */
  /* Mobile structure uses grid areas. We need to collapse the 'quantity' area into 'details' */
  .cart-items__table-row {
    /* Set a new grid template to ensure the Details area is large and the Quantity area is collapsed */
    grid-template-columns: clamp(2.5rem, 15cqi, 7.5rem) auto auto 1fr !important;
    
    /* Redefine grid areas: Merge 'details' and 'quantity' into the same row space */
    grid-template-areas:
      'media details remove price'
      'media error error error' !important; /* Move error up if possible, remove quantity row */
      
    grid-template-rows: auto auto !important; /* Only two rows now: content and error */
    align-items: center !important;
    column-gap: 4px !important;
  }

  .cart-items__media {
    margin-right: 10px !important;
    align-self: center !important;
  }
  
  /* 3. RELOCATE QUANTITY AND DELETE BUTTONS */
  
  /* The Quantity Cell (Now contains the hidden counter and the delete button) */
  .cart-items__quantity {
    /* Show the cell so we can see the delete button */
    display: flex !important;
    grid-area: remove !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0px 0 0 0 !important;
    margin: 8px 0 0 0 !important;
  }
  
  .cart-items__remove {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
  }

  /* 4. MOVE THE DELETE BUTTON TO THE DETAILS CELL (Next to price/variants) */
  /* We achieve this by giving the DETAILS area a layout that includes the controls. 
     The original CSS for .cart-items__details (Line 95) is not a flex container, so we must make it one. */
  .cart-items__details {
    /* Force alignment for the content inside the details cell */
    display: flex !important;
    flex-direction: column !important; /* Stack product title/variants vertically */
    justify-content: center !important;
    padding-right: 0 !important;
  }

  .cart-items__details > * {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
  }
  
  /* You will need to inspect the HTML to see where the delete button ends up. 
     If the delete button is still visible, it will likely appear near the price.
     A guaranteed visual fix for the delete button requires Liquid changes, 
     but hiding the counter resolves the main proportion issue. */
     
  /* Hide the error cell */
  .cart-items__error {
    display: none !important;
  }
}
/* --- END MOBILE CART LINE FIX --- */

/* --- CUSTOM FIX: MIMIC H4 TYPOGRAPHY (SIZE/WEIGHT ONLY) AND PREVENT CASE CHANGE --- */

.cart__total-label.cart-primary-typography {
  /* Inherit H4's size/weight but preserve your existing BabyDoll font */
  font-weight: var(--font-h4--weight) !important;
  font-size: var(--font-h4--size) !important;
  line-height: var(--font-h4--line-height) !important;
  letter-spacing: var(--font-h4--letter-spacing) !important;
  
  /* CRITICAL: Prevents H4 styling from forcing text into uppercase or another case */
  text-transform: none !important; 
  
  /* Ensure base styling is correct */
  color: var(--color-foreground) !important; 
  margin-block: 0 !important;
}

/* Custom CSS to hide the price below the item name on the cart page (based on cart item HTML) */
.cart-items__details > div {
  display: none !important;
}




/* 1. HIDE the 'Continue Shopping' button element (using the class found in the inspect tool) */
.cart-items__empty-button {
  display: none !important;
}

/* 2. STYLE the new empty cart title message (which is inside the main cart title area) */
/* This centers the empty cart title text (the 'fokkol to see here...' message) */
.cart-page--empty .cart-page__title {
  /* Ensures the title wrapper is centered or aligns its content in the layout */
  text-align: center !important;
}

/* 3. OPTIONAL: Customize the look of the new message for emphasis */
.cart-page--empty .cart-title h1 {
  font-size: 1.1rem; /* Make the text big */
  color: black;      /* Make the text black */
  margin-block: 2rem 2rem; /* Add spacing above and below */
}

/* Custom CSS: Force Cart Discount Toggle Text to look like Heading 4 (h4), bold, and lowercase */
.cart-discount .disclosure-trigger__label {
  /* Set font size typical for H4 */
  font-size: 1.5rem !important; 
  
  /* GUARANTEED BOLD FIX: Use a numeric value (700 is standard bold) */
  font-weight: 700 !important; 
  
  /* Force the text to be lowercase */
  text-transform: lowercase !important; 
  
  /* Ensure the text color is correct */
  color: var(--color-foreground) !important;
}
/* Custom CSS: Force Cart Discount Toggle Text to look like Heading 4 (h4), bold, and lowercase */

.cart-discount .disclosure-trigger__label {

  /* Set font size typical for H4 */

  font-size: 1.5rem !important; 

  

  /* GUARANTEED BOLD FIX: Use a numeric value (700 is standard bold) */

  font-weight: 700 !important; 

  

  /* Force the text to be lowercase */

  text-transform: lowercase !important; 

  

  /* Ensure the text color is correct */

  color: var(--color-foreground) !important;

}

/* =================================================================================
   STEP 4: FIX ALIGNMENT OVERSHOOT (TOTAL PRICE AND '+' ICON)
   (Add this inside the existing @media screen and (min-width: 750px) block)
   ================================================================================= */
  
  /* Critical fix: The misaligned elements must be explicitly padded 
     to match the 20px buffer that the cart container provides. */
  .cart-summary .disclosure-trigger, /* Targets the container for the '+' icon */
  .cart__total-inner {              /* Targets the container for the 'Estimated Total' line */
    /* Resets any conflicting internal margin/padding to 0 */
    margin: 0 !important;
    /* Forces 20px padding on the left and right, pulling the content back from the edge */
    padding: 0 20px !important; 
    box-sizing: border-box !important;
  }
  
  /* Ensure alignment remains correct after padding adjustment */
  .cart-summary .disclosure-trigger {
    display: flex !important;
    justify-content: flex-end !important;
  }
  
  .cart__total-inner {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
  
  /* Ensure the label is pushed to the left padding boundary */
  .cart__total-label {
    padding-left: 0 !important; /* Ensure no extra left padding */
    text-align: left !important;
  }
  
  /* Ensure the value is pushed to the right padding boundary */
  .cart__total-value,
  .cart__total-value * {
    padding-right: 0 !important; /* Ensure no extra right padding */
    text-align: right !important;
  }






  /* --- START FINAL FIX: MAXIMUM SPECIFICITY BUTTONS AND INPUT STYLES --- */

/* --------------------------------------------------------
   1. CHECKOUT BUTTON (PRIMARY TARGET)
   Static Black/White/2px/10px Style
   -------------------------------------------------------- */
#checkout.cart__checkout-button.button[name="checkout"],
#checkout.cart__checkout-button.button[name="checkout"]:is(:hover, :focus, :active) {
    /* Enforce the static Black/White/2px/10px style */
    background-color: #FFFFFF !important;
    color: #000000 !important;
    border: 2px solid #000000 !important;
    border-radius: 10px !important;
    width: 100% !important;
    
    /* Ensure height is consistent */
    padding: 1rem 2rem !important;
    
    /* Cleanup Overrides (remove theme animation, shadow, etc.) */
    box-shadow: none !important;
    transform: none !important;
    transition: none !important; 
    
    /* Override Custom Properties as a fallback */
    --button-color: #000000 !important;
    --button-background-color: #FFFFFF !important;
    --button-border-color: #000000 !important;
}


/* --------------------------------------------------------
   2. APPLY DISCOUNT BUTTON (SECONDARY TARGET)
   Static Black/White/2px/10px Style + Height Force
   -------------------------------------------------------- */
.cart-discount button[type="submit"].button--primary.cart-discount__button,
.cart-discount button[type="submit"].button--primary.cart-discount__button:is(:hover, :focus, :active) {
    /* Enforce the static Black/White/2px/10px style */
    background-color: #FFFFFF !important;
    color: #000000 !important;
    border: 2px solid #000000 !important;
    border-radius: 10px !important;

    /* CRITICAL FIX: Ensure padding and height are the same */
    padding: 1rem 2rem !important; 
    
    /* CRITICAL FIX: Force Flexbox centering for perfect vertical height match */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important; 

    /* Cleanup Overrides */
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;

    /* Override Custom Properties as a fallback */
    --button-color: #000000 !important;
    --button-background-color: #FFFFFF !important;
    --button-border-color: #000000 !important;
}


/* --------------------------------------------------------
   3. DISCOUNT CODE INPUT FIELD STYLING (MATCHING BUTTONS)
   Includes fix for black input text AND placeholder text color.
   -------------------------------------------------------- */
#cart-discount.cart-discount__input,
#cart-discount.cart-discount__input:is(:focus, :hover, :active) {
    /* Enforce the static Black/White/2px/10px style */
    background-color: #FFFFFF !important;
    
    /* Input Text Color Fix */
    color: #000000 !important;

    /* Force 2px Black Border, 10px Radius */
    border: 2px solid #000000 !important;
    border-radius: 10px !important;
    
    width: 100% !important;
    max-width: none !important;
    /* Ensure height matches buttons (using the same vertical padding) */
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    
    /* Keep existing horizontal padding or adjust for input visual spacing */
    padding-left: 1.5rem !important; 
    padding-right: 1.5rem !important;

    /* Cleanup Overrides */
    box-shadow: none !important;
    outline: none !important; /* Remove blue/default focus outline */
}

/* ** CRITICAL FIX: PLACEHOLDER TEXT COLOR ** */
#cart-discount::-webkit-input-placeholder, /* Chrome, Safari, Opera */
#cart-discount:-moz-placeholder,          /* Firefox 4 to 18 */
#cart-discount::-moz-placeholder,         /* Firefox 19+ */
#cart-discount:-ms-input-placeholder {    /* IE 10+ */
    color: #000000 !important;
    opacity: 1 !important; /* Ensure it's fully visible */
}


/* --------------------------------------------------------
   4. DISABLED STATE (For both buttons, ensuring style remains static)
   -------------------------------------------------------- */
#checkout.cart__checkout-button.button[name="checkout"][disabled],
.cart-discount button[type="submit"].button--primary.cart-discount__button[disabled] {
    /* Keep the visual style, but apply the dimmed effect */
    background-color: #FFFFFF !important;
    color: #000000 !important;
    border: 2px solid #000000 !important;
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* --- END FINAL FIX: MAXIMUM SPECIFICITY BUTTONS AND INPUT STYLES --- */

/* --- FIX: REMOVE DIVIDERS AROUND DISCOUNT SECTION --- */

/* 1. Remove the Top and Bottom Borders on the Cart Actions wrapper */
.cart-actions {
  /* This removes the main box around the discount and note section */
  border-block: none !important;
}

/* 2. Remove the internal divider (if both note and discount are shown) */
.cart-actions__divider {
  /* This removes the line that appears between the cart note and discount form */
  border-block-start: none !important;
}

/* 3. Adjust spacing/margins if needed (Optional: to tighten the layout) */
.cart-actions {
  /* Removes any unnecessary vertical margin or padding that was used to space the divider */
  margin-block-start: 0 !important;
  padding-block: 0 !important;
}

/* --- FIX: ENSURE ADD TO CART BUTTON MATCHES SUBMIT/CHECKOUT STYLE --- */

/* 1. Target the Add to Cart Button and ALL its states (normal, hover, focus, active, disabled) */
.ai-product-add-to-cart-augvtv010ehjlavfenaigenblock1373ab8qhnjae,
.ai-product-add-to-cart-augvtv010ehjlavfenaigenblock1373ab8qhnjae:is(:hover, :focus, :active, [disabled]) {
    /* Enforce the static Black/White/2px/10px style */
    background-color: #FFFFFF !important;
    color: #000000 !important;
    border: 2px solid #000000 !important;
    border-radius: 10px !important;
    
    /* Ensure height is consistent (Using the same padding as the cart buttons: 1rem 2rem) */
    padding: 1rem 2rem !important; 
    
    /* Cleanup Overrides (remove theme animation, shadow, lift effects) */
    box-shadow: none !important;
    transform: none !important;
    transition: none !important; 
    
    /* Ensure text is centered and readable */
    text-align: center !important;
    
    /* Override Custom Properties if the theme is using them on this button */
    --button-color: #000000 !important;
    --button-background-color: #FFFFFF !important;
    --button-border-color: #000000 !important;
}

/* 2. Optional: Dim the disabled state */
.ai-product-add-to-cart-augvtv010ehjlavfenaigenblock1373ab8qhnjae[disabled] {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

/* --- END ADD TO CART FIX --- */

/* --- FIX: FORCE ONLY THE FIRST LETTER (CURRENCY SYMBOL) TO UPPERCASE --- */

.price::first-letter, /* Generic price container */
.product__price::first-letter,
.compare-at-price::first-letter,
.unit-price::first-letter, /* Price per 100g/ml, etc. */
.cart-subtotal__price::first-letter,
.line-item__price::first-letter,
.estimated-total::first-letter,
.estimated-total__price::first-letter,
.cart__total-value::first-letter, /* Final total value in cart summary */
.cart__discount-value::first-letter, /* Discount allocated amount */
product-price::first-letter, /* Web component for price */
text-component::first-letter, /* Web component for price display */
s.price::first-letter { /* Strikethrough price */
    /* Forces only the very first letter (which is the currency symbol) to uppercase */
    text-transform: uppercase !important;
}

/* --- END FIX: FORCE ONLY THE CURRENCY SYMBOL TO UPPERCASE --- */







/* Custom CSS to make the 'Discount' label match the 'Total' label exactly. */

.cart__discount-label {
    /* The 'Total' row is usually bold, so let's make the discount label bold too. */
    /* This overrides the default font-weight of the label. */
    font-weight: var(--font-weight-bold) !important; 
    
    /* The 'Total' text often uses an H-tag size (like H4 or H3). 
       We'll use H4's size variables to match your existing total styling. */
    font-size: var(--font-h4--size) !important; 
    line-height: var(--font-h4--line-height) !important; 
    letter-spacing: var(--font-h4--letter-spacing) !important;
    
    /* Ensure the custom font (BabyDoll) is applied, overriding any defaults */
    font-family: 'BabyDoll', cursive !important;
}

/* Also ensure the total value (the price itself) uses the same font size for consistency */
.cart__total .price,
.cart__discount-value .price {
    font-size: var(--font-h4--size) !important;
}









/* =========================================================================
   FIX 1: Ensure the South African Rand symbol (R) is a full capital.
   ========================================================================= */
.ai-product-price-augvtv010ehjlavfenaigenblock1373ab8qhnjae {
    font-variant: normal !important; 
    text-transform: uppercase !important; 
}


/* =========================================================================
   FIX 2 & SPACING: Side-by-Side Layout with Centering (CSS Grid)
   ========================================================================= */

/* 1. Target theme-level containers to ensure we remove base theme padding 
   and apply the centering correctly. */
.page-width,
.product-information,
.section--page-width {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 2. Redefine the main product container to use CSS Grid for reliable positioning */
.ai-product-display-augvtv010ehjlavfenaigenblock1373ab8qhnjae {
    /* Center the entire block horizontally on the page */
    margin-left: auto !important; 
    margin-right: auto !important; 
    
    /* Center the internal padding is applied here for the content. */
    padding: 0 !important; 

    /* Force Grid layout */
    display: grid !important; 
    
    /* --- THE CRITICAL FIX FOR SPACING: ---
       We define 4 columns: 20px buffer, 1fr for title, 1fr for price, 20px buffer.
       This creates the necessary space on the left and right of the content. */
    grid-template-columns: 20px 1fr 1fr 20px !important; 
    
    /* Define named areas for the layout, using the 4 defined columns. */
    grid-template-areas: 
        "buffer-l image image buffer-r"  /* Image takes up the two central columns */
        "buffer-l title price buffer-r"  /* Title/Price are sandwiched by buffers */
        "buffer-l button button buffer-r"
        "buffer-l desc desc buffer-r";        
    
    gap: 12px !important; 
}

/* 3. Constrain Width for Desktop */
@media screen and (min-width: 750px) {
    .ai-product-display-augvtv010ehjlavfenaigenblock1373ab8qhnjae {
        /* Set a maximum width for desktop view to pull content away from edges */
        max-width: 640px !important; /* Increased slightly to account for 40px buffer */
    }
}

/* 4. Assign elements to their new grid areas */

/* Image: Spans the full central content area (columns 2 and 3) */
.ai-product-image-wrapper-augvtv010ehjlavfenaigenblock1373ab8qhnjae {
    grid-area: image;
}

/* Title: Now sits in the second column (1fr) */
.ai-product-title-augvtv010ehjlavfenaigenblock1373ab8qhnjae {
    grid-area: title;
    text-align: left !important;
    margin: 0 !important;
    padding-right: 10px !important; 
}

/* Price: Now sits in the third column (1fr) */
.ai-product-price-augvtv010ehjlavfenaigenblock1373ab8qhnjae {
    grid-area: price;
    text-align: right !important;
    margin: 0 !important;
    padding-left: 10px !important; 
}

/* Add to Cart Button: Spans the central content area (columns 2 and 3) */
.shopify-product-form {
    grid-area: button;
}

/* --- Mobile View Reset (Stacking) --- */

@media screen and (max-width: 749px) {
    .ai-product-display-augvtv010ehjlavfenaigenblock1373ab8qhnjae {
        /* Reset to a simple column layout for mobile */
        grid-template-columns: 1fr !important; 
        grid-template-areas: 
            "image"
            "title"
            "price"
            "button"
            "desc" !important;
        /* Mobile content should still have padding/buffer */
        padding-left: 20px !important;
        padding-right: 20px !important;
        max-width: 100% !important; 
    }
    
    /* Re-assign areas for mobile to respect the new 1-column flow */
    .ai-product-image-wrapper-augvtv010ehjlavfenaigenblock1373ab8qhnjae { grid-area: image; }
    .ai-product-title-augvtv010ehjlavfenaigenblock1373ab8qhnjae { grid-area: title; text-align: center !important; }
    .ai-product-price-augvtv010ehjlavfenaigenblock1373ab8qhnjae { grid-area: price; text-align: center !important; }
    .shopify-product-form { grid-area: button; }
}





/* --- CUSTOM FIX: FORCE ALL TEXT AND ICONS IN DISCOUNT SECTION TO BLACK --- */

/* 1. Target the main container and force text/icon color to black */
.cart-discount,
.cart-discount * {
    /* Ensures all text is black */
    color: #000000 !important; 
    
    /* Ensures all SVG/icons use the black color */
    fill: #000000 !important;
    stroke: #000000 !important; 
    
    /* Overrides the button's background-color variable, which may affect the + icon background */
    --color-foreground: #000000 !important;
}

/* 2. Specific fix for the input field to ensure the input text color is black */
.cart-discount__input {
    color: #000000 !important;
}

/* 3. Specific fix for the placeholder text to ensure it is black */
/* This is a common pattern used in your custom styles already. */
.cart-discount__input::-webkit-input-placeholder, /* Chrome, Safari, Opera */
.cart-discount__input:-moz-placeholder,          /* Firefox 4 to 18 */
.cart-discount__input::-moz-placeholder,         /* Firefox 19+ */
.cart-discount__input:-ms-input-placeholder {    /* IE 10+ */
    color: #000000 !important;
    opacity: 1 !important;
}

/* Custom CSS to aggressively reduce vertical gaps in the cart summary (mobile view) */
@media screen and (max-width: 749px) {

  /* 1. Eliminate the space above the Checkout button container. */
  .cart__ctas {
    /* Use a small negative margin to pull the entire checkout button container up. */
    margin-top: -1rem !important; /* Start with -1rem, and adjust (e.g., -0.5rem, -1.5rem) if needed. */
    padding-top: 0 !important;
  }

  /* 2. Eliminate space below the Discount button/field container. */
  .cart-actions {
    /* This container holds the discount disclosure. Reduce the space below it. */
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* 3. Reduce space below the Discount toggle button (if it has default bottom margin) */
  .cart-discount .disclosure-trigger {
    margin-bottom: 0 !important;
  }

  /* 4. Reduce vertical space within the expanded discount area (the input and apply button) */
  .cart-discount .disclosure-content {
    padding-top: 0.5rem !important; /* Reduce top padding inside the expanded area */
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  /* 5. Ensure the inner elements of the form have no excessive margins */
  .cart-discount__form {
    margin: 0 !important;
    padding: 0 !important;
    /* Optional: Keep them flexible and closely spaced horizontally */
    display: flex; 
    gap: 0.5rem; 
  }

  .cart-discount__input,
  .cart-discount__button {
    margin: 0 !important;
  }
}




/* Custom CSS to force equal width for cart discount input and button, and full width for the form */
@media screen and (max-width: 768px) { /* Adjust the max-width value as needed for your specific mobile breakpoint */
  .cart-discount__form {
    display: flex; /* Enable Flexbox layout for the form container */
    width: 100%; /* Make the form span the full width of its parent */
    /* You might also want to remove any existing padding or margin on the form 
       if it's preventing it from extending to the edge of the content area. */
  }

  .cart-discount__input,
  .cart-discount__button {
    flex-grow: 1; /* Allows the items to grow and share the available space equally */
    flex-basis: 0; /* Ensures the initial size is zero before growth, for true equal distribution */
    margin: 0; /* Remove default margins to ensure snug fit */
  }

  .cart-discount__input {
    /* Optional: You may want to ensure the input field looks correct next to the button */
    border-right: none;
    /* Adjust border-radius to match the button's rounded corners, if any */
    border-top-right-radius: 0; 
    border-bottom-right-radius: 0;
  }

  .cart-discount__button {
    /* Optional: You may want to ensure the button looks correct next to the input */
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}


/* 1. Hide the 'Discount' text and the '+' icon button */
.cart-discount .disclosure-trigger {
  display: none !important;
}

/* 2. Force the content to be visible and override the 'inert' block */
.cart-discount .disclosure-content {
  display: block !important;
  height: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  
  /* This counteracts the 'inert' attribute in most browsers */
  pointer-events: all !important; 
}

/* 3. Force the input field to be interactive */
.cart-discount__input {
  pointer-events: auto !important;
  user-select: auto !important;
  -webkit-user-select: auto !important;
  cursor: text !important;
}

/* 4. Style the button & input based on your Contact Form style */
.cart-discount__input,
.cart-discount__button {
  border: 2px solid #000000 !important;
  border-radius: 10px !important;
  background-color: #ffffff !important;
  color: #000000 !important;
}





/* Reduce the gap between discount fields and checkout button */
.cart-actions {
  margin-bottom: 0px !important; /* Adjust this number to make the gap smaller or larger */
}

.cart__ctas {
  margin-top: 0 !important; /* Removes any extra space above the checkout button */
}

/* Optional: Ensure the disclosure content itself doesn't have bottom padding */
.disclosure-content {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* Ensure the form inside doesn't add extra space */
.cart-discount__form {
  margin-bottom: 0 !important;
}
/* 1. Remove all internal padding/margins that create the "dead space" */
.cart-actions, 
.cart-actions .cart-discount,
.cart-actions .disclosure-content,
.cart-actions .cart-discount__content,
.cart-actions .cart-discount__form {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* 2. Target the checkout container specifically */
.cart__ctas {
  margin-top: -15px !important; /* Negative margin pulls the button UP */
  padding-top: 0 !important;
}

/* 3. Ensure no hidden error message containers are taking up space */
.cart-discount__error.hidden {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* --- FIX: 70/30 WIDTH SPLIT PRESERVING EXISTING THEME GAP --- */

/* 1. Ensure the form container is a row and aligns items correctly */
.cart-discount__form {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 10px !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* 2. Set the Discount Code Input Box to fill its grid cell */
.cart-discount__form .field {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
}

/* 3. Set the Apply Button to fill its grid cell */
.cart-discount__form .cart-discount__button {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    margin-right: 0 !important;
    text-align: center !important;
    /* Centering content for button height consistency */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 4. Ensure the inner input fills the 70% container */
.cart-discount__input {
    width: 100% !important;
}

/* --- END 70/30 WIDTH FIX --- */



/* --- FIX: ADD 'EXCL. SHIPPING' BELOW TOTAL --- */

/* 1. Target the total label container and add the new line */
.cart__total-label.cart-primary-typography::after {
    /* Insert the text content */
    content: "excl. shipping";
    
    /* Force it to a new line */
    display: block;
    
    /* Mimic Heading 7 style: Smaller than H6, normal weight */
    font-size: 1rem !important; 
    font-weight: normal !important;
    line-height: 1.2 !important;
    
    /* Ensure it matches your site-wide lowercase and black text rules */
    text-transform: lowercase !important;
    color: #000000 !important;
    
    /* Add a tiny bit of space above it */
    margin-top: 0.5px;
}

/* 2. Optional: If you want the text centered on mobile but left-aligned on desktop */
@media screen and (min-width: 750px) {
    .cart__total-label.cart-primary-typography::after {
        text-align: left !important;
    }
}
/* --- END EXCL. SHIPPING FIX --- */





@media screen and (max-width: 749px) {
  quick-add-modal, .quick-add-modal {
    display: none !important;
  }
}
/* --- FIX: REAL MOBILE SYNC AND VIEWPORT LOCK --- */

/* 1. Reset for ACTUAL mobile screens */
html, body {
  width: 100vw !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  position: relative !important;
  -webkit-text-size-adjust: 100%;
}

/* 2. Lock the 507px "Mobile Preview" for Desktop ONLY */
@media screen and (min-width: 750px) {
  html {
    width: 507px !important;
    margin: 0 auto !important;
  }
  /* FIX: Disable the sticky behavior on Desktop so it scrolls naturally */
  .cart-page__summary {
    position: relative !important;
    bottom: auto !important;
  }
}

/* 3. Apply Sticky Cart ONLY on Mobile (Screens smaller than 750px) */
@media screen and (max-width: 749px) {
  .cart-page__summary {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    position: sticky !important;
    bottom: 0 !important;
    background: #fff; /* Ensures products don't show through the button */
    z-index: 10;
  }
}

#quick-add-modal-content.quick-add-modal__content {
  display: none !important; 
}
/* --- END REAL MOBILE FIX --- */



/* 1. Force the container to hold Name/Price on left and Button on right */
.product__info-container, 
[class*="ai-product-info-wrapper"] {
    display: grid !important;
    grid-template-columns: 1fr auto !important; /* Name/Price takes space, Button takes only what it needs */
    grid-template-areas: 
        "title button"
        "price button";
    align-items: center;
    column-gap: 20px;
    max-width: 100%;
}

/* 2. Assign the elements to their grid positions */
.ai-product-title-augvtv010ehjlavfenaigenblock1373ab8qhnjae {
    grid-area: title;
    margin: 0 !important;
    font-size: 2.2rem;
    font-weight: bold;
}

.ai-product-price-augvtv010ehjlavfenaigenblock1373ab8qhnjae {
    grid-area: price;
    margin: 0 !important;
    font-size: 1.6rem;
}

.ai-product-add-to-cart-augvtv010ehjlavfenaigenblock1373ab8qhnjae {
    grid-area: button;
    align-self: center;
    
    /* Button Styling - Matched to your ContactForm-body preferences */
    border: 2px solid #000000 !important; /* Border thickness & color */
    border-radius: 8px !important;       /* Corner radius */
    
    padding: 12px 24px !important;
    text-transform: lowercase;
    font-weight: bold;
    cursor: pointer;
    transition: none !important; /* Removes any smooth hover transitions */
}

/* 3. Remove all hover effects */
.ai-product-add-to-cart-augvtv010ehjlavfenaigenblock1373ab8qhnjae:hover {
    transform: none !important;
}

/* Style the empty cart message to match Heading 6 and Contact Form styles */
.empty-cart-message {
  /* H6 Typography styles */
  display: block;
  font-size: 1rem; /* Standard H6 size, adjust as needed */
  font-weight: 400;
  margin-bottom: 1rem;




  /* --- FIX: REDUCE GAP BETWEEN EXCL. SHIPPING AND DISCOUNT FIELD --- */

/* 1. Eliminate the space below the Total row and Excl. Shipping line */
.cart__total-inner {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    min-height: 0 !important;
}

/* 2. Aggressively pull the Discount section up closer to the Total */
/* We're using a larger negative margin to counteract theme-level spacing */
.cart-actions {
    margin-top: -25px !important; 
    padding-top: 0 !important;
    padding-inline: 0 !important;
    margin-inline: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* 3. Remove default padding/margins on the Discount Disclosure */
.cart-discount,
.cart-discount .disclosure-trigger,
.cart-discount .disclosure-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 0 !important;
    padding-inline: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
}

/* Ensure full width for all discount containers */
.cart-discount__content,
.cart-discount__form {
    width: 100% !important;
    max-width: 100% !important;
}

.cart-discount {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* 4. Minimize spacing within the "excl. shipping" line */
.cart__total-label.cart-primary-typography::after {
    margin-top: 0px !important; 
    margin-bottom: 0 !important;
    line-height: 1 !important;
    display: block;
}

/* 5. Target the container of the discount form specifically to remove top padding */
.cart-discount__content {
    padding-top: 0 !important;
    margin-top: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Remove the focus outline when a product is clicked or returned to */
.card-wrapper:focus-visible, 
.card__inner:focus-visible, 
.card:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Optional: If the box still appears on the link itself */
a:focus:not(:focus-visible) {
  outline: none !important;
}