/** Shopify CDN: Minification failed

Line 6416:0 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);
  --submenu-animation-speed: 360ms;
  --submenu-animation-easing: cubic-bezier(0.25, 0.1, 0.25, 1);
}

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

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

.collection-card,
.featured-blog-posts-card {
  width: 100%;
  position: relative;
  height: 100%;
}

/* Editorial layout */
.resource-list:not(.hidden--desktop) .collection-card--flexible-aspect-ratio,
.resource-list:not(.hidden--desktop) .blog-post-card--flexible-aspect-ratio {
  .collection-card__image,
  .featured-blog-posts-card__image,
  .blog-placeholder-svg {
    aspect-ratio: 99;
    height: 100%;
  }

  .collection-card__inner,
  .featured-blog-posts-card__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .collection-card__content,
  .featured-blog-posts-card__content {
    flex-shrink: 0;
  }

  &:not(.collection-card--image-bg) .collection-card__content,
  .featured-blog-posts-card__content {
    height: auto;
  }
}

.collection-card__inner,
.featured-blog-posts-card__inner {
  width: 100%;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  z-index: var(--layer-flat);
  pointer-events: none;
}

.collection-card__content,
.featured-blog-posts-card__content {
  display: flex;
  position: relative;
  height: 100%;
  width: 100%;
  gap: var(--gap);
}

.collection-card__link,
.featured-blog-posts-card__link {
  position: absolute;
  inset: 0;

  /* allows focus outline to have radius in supported browsers */
  border-radius: var(--border-radius);
}

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

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

.product-card__content {
  position: relative;
}

.product-card__content {
  cursor: pointer;
}

@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 .predictive-search-results__card:hover {
    transform: translateY(calc(-1 * var(--hover-lift-amount)));
  }

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

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

  .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 .predictive-search-results__card:hover {
    transform: scale(var(--hover-subtle-zoom-amount));
  }

}

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;
  display: flex;
  flex-direction: column;
}

.content-for-layout > .shopify-section:last-child {
  flex-grow: 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), 100% - var(--page-margin) * 2)) / 2)
  );

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

  width: 100%;

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

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

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

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

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

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

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

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

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

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

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

.icon-default {
  fill: currentColor;
}

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

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

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

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

/* Typography presets */

h1,
.h1.h1,
.text-block.h1 > *,
.text-block.h1 :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-h1--family);
  font-style: var(--font-h1--style);
  font-weight: var(--font-h1--weight);
  font-size: var(--font-h1--size);
  line-height: var(--font-h1--line-height);
  letter-spacing: var(--font-h1--letter-spacing);
  text-transform: var(--font-h1--case);
  color: var(--color, 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 > *,
.text-block.h2 :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-h2--family);
  font-style: var(--font-h2--style);
  font-weight: var(--font-h2--weight);
  font-size: var(--font-h2--size);
  line-height: var(--font-h2--line-height);
  letter-spacing: var(--font-h2--letter-spacing);
  text-transform: var(--font-h2--case);
  color: var(--color, 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 > *,
.text-block.h3 :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-h3--family);
  font-style: var(--font-h3--style);
  font-weight: var(--font-h3--weight);
  font-size: var(--font-h3--size);
  line-height: var(--font-h3--line-height);
  letter-spacing: var(--font-h3--letter-spacing);
  text-transform: var(--font-h3--case);
  color: var(--color, 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 > *,
.text-block.h4 :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-h4--family);
  font-style: var(--font-h4--style);
  font-weight: var(--font-h4--weight);
  font-size: var(--font-h4--size);
  line-height: var(--font-h4--line-height);
  letter-spacing: var(--font-h4--letter-spacing);
  text-transform: var(--font-h4--case);
  color: var(--color, 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 > *,
.text-block.h5 :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-h5--family);
  font-style: var(--font-h5--style);
  font-weight: var(--font-h5--weight);
  font-size: var(--font-h5--size);
  line-height: var(--font-h5--line-height);
  letter-spacing: var(--font-h5--letter-spacing);
  text-transform: var(--font-h5--case);
  color: var(--color, 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 > *,
.text-block.h6 :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-h6--family);
  font-style: var(--font-h6--style);
  font-weight: var(--font-h6--weight);
  font-size: var(--font-h6--size);
  line-height: var(--font-h6--line-height);
  letter-spacing: var(--font-h6--letter-spacing);
  text-transform: var(--font-h6--case);
  color: var(--color, 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-secondary)),
.rte :is(p, ul, ol, table):not(.h1, .h2, .h3, .h4, .h5, .h6) a:where(:not(.button, .button-secondary)) {
  text-decoration-color: currentcolor;

  &:hover {
    text-decoration-color: 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;
}

[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: move-and-fade;
  --dialog-drawer-closing-animation: move-and-fade;
}

.dialog-drawer--right {
  --dialog-drawer-opening-animation: move-and-fade;
  --dialog-drawer-closing-animation: move-and-fade;
}
/* stylelint-enable value-keyword-case */

.dialog-drawer[open] {
  --start-x: var(--custom-transform-from, 100%);
  --end-x: var(--custom-transform-to, 0px);
  --start-opacity: 1;

  animation: var(--dialog-drawer-opening-animation) var(--animation-speed) var(--animation-easing) forwards;
}

.dialog-drawer[open].dialog-closing {
  --start-x: 0px;
  --end-x: 100%;
  --start-opacity: 1;
  --end-opacity: 1;

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

.dialog-drawer--right[open] {
  --start-x: -100%;
  --start-opacity: 1;
}

.dialog-drawer--right[open].dialog-closing {
  --start-x: 0px;
  --end-x: -100%;
  --start-opacity: 1;
  --end-opacity: 1;

  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-weight: var(--font-paragraph--weight);
  font-size: var(--font-paragraph--size);
  line-height: var(--font-paragraph--line-height);
  margin-block: 0;
  transition: color var(--animation-speed) var(--animation-easing),
    box-shadow var(--animation-speed) var(--animation-easing),
    background-color var(--animation-speed) var(--animation-easing);
  cursor: pointer;
  width: fit-content;
  box-shadow: inset 0 0 0 var(--button-border-width) var(--button-border-color);
  padding-block: var(--button-padding-block);
  padding-inline: var(--button-padding-inline);
}

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

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

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

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

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

textarea::placeholder,
input::placeholder {
  color: 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,
.show-more:where([data-expanded='true']) .show-more__button .icon-plus .horizontal {
  transform: rotate(90deg);
}

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

:not(.dialog-zoomed-gallery) > .product-media-container {
  --slide-width: 100%;

  display: flex;
  aspect-ratio: var(--gallery-aspect-ratio, var(--media-preview-ratio));
  max-height: var(--constrained-height);
  width: var(--slide-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;
  }

  @supports (--test: round(up, 100%, 1px)) {
    /* width and overflow forces children to shrink to parent width */
    --slide-width: round(up, 100%, 1px);
  }
}

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

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

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

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

: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 {
  display: block;
  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);
  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) + 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) + 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: dashed;
  }

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

  &.swatch--variant-image {
    background-size: cover;
  }

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

/* Variant option component */
.variant-option {
  --options-border-radius: var(--variant-picker-button-radius);
  --options-border-width: var(--variant-picker-button-border-width);
  --variant-option-padding-inline: var(--padding-md);
}

.variant-option + .variant-option {
  margin-top: var(--padding-lg);
}

.variant-option--swatches {
  --options-border-radius: var(--variant-picker-swatch-radius);

  width: 100%;

  overflow-list::part(list) {
    padding-block: var(--overflow-list-padding-block, 0);
    padding-inline: var(--overflow-list-padding-inline, 0);
  }
}

.variant-option--swatches > overflow-list {
  justify-content: var(--product-swatches-alignment);

  @media screen and (max-width: 749px) {
    justify-content: var(--product-swatches-alignment-mobile);
  }
}

.variant-option--buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm);
  margin: 0;
  padding: 0;
  border: none;
}

.variant-option--buttons legend {
  padding: 0;
  margin-block-end: var(--margin-xs);
}

.variant-option__swatch-value {
  padding-inline-start: var(--padding-xs);
  color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
}

@media (prefers-reduced-motion: no-preference) {
  .variant-option__button-label,
  .variant-option__select-wrapper,
  .variant-option__button-label::before,
  .variant-option__button-label::after,
  .variant-option__button-label:has([data-previous-checked='true'], [data-current-checked='true'])
    .variant-option__button-label__pill,
  .variant-option__button-label:not(.variant-option__button-label--has-swatch) svg line:last-of-type {
    transition-duration: var(--animation-speed);
    transition-timing-function: var(--animation-easing);
  }

  .variant-option__button-label__pill {
    transition-property: transform;
  }

  .variant-option__button-label:not(.variant-option__button-label--has-swatch) svg line:last-of-type {
    transition-property: clip-path;
  }

  .variant-option__button-label:has([data-previous-checked='true'], [data-current-checked='true'])
    .variant-option__button-label__pill {
    transition-property: transform;
  }

  .variant-option__button-label::after {
    transition-property: clip-path;
  }

  .variant-option__button-label::before {
    transition-property: border-color;
  }

  .variant-option__select-wrapper,
  .variant-option__button-label {
    transition-property: background-color, border-color, color;
  }
}

.variant-option__button-label {
  --variant-picker-stroke-color: var(--color-variant-border);

  cursor: pointer;
  display: flex;
  flex: 0 0 3.25em;
  align-items: center;
  position: relative;
  padding-block: var(--padding-sm);
  padding-inline: var(--padding-lg);
  border: var(--options-border-width) solid var(--color-variant-border);
  border-radius: var(--options-border-radius);
  overflow: clip;
  justify-content: center;
  min-height: 3.25em;
  min-width: fit-content;
  white-space: nowrap;
  background-color: var(--color-variant-background);
  color: var(--color-variant-text);
  gap: 0;

  &:hover,
  &:hover:has([aria-disabled='true']):has([data-option-available='false']) {
    background-color: var(--color-variant-hover-background);
    border-color: var(--color-variant-hover-border);
    color: var(--color-variant-hover-text);
  }

  /* we need something like overflow-clip-margin to use the pseudoelement but it doesn't work in Safari */

  /* so instead use the layered background image trick */
  &:not(.variant-option__button-label--has-swatch):has([data-option-available='false']) {
    border-width: 0;
  }

  /* ::after/::before act as a fake border for the button style variant */

  /* ::after is the unavailable variant border that clips in */
  &:not(.variant-option__button-label--has-swatch)::before,
  &:has([data-option-available='false']):not(.variant-option__button-label--has-swatch)::after {
    content: '';
    position: absolute;
    inset: 0;
    border: var(--options-border-width) solid var(--color-selected-variant-border);
    border-radius: inherit;
    pointer-events: none;
    z-index: 2;
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(var(--clip, 0 0 0 0));
  }

  &:has([data-option-available='false']):not(.variant-option__button-label--has-swatch)::before {
    inset: 0;
  }

  &:not(.variant-option__button-label--has-swatch)::before {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(0 0 0 0);
    border-color: var(--color-variant-border);
    inset: calc(var(--options-border-width) * -1);
  }

  &:has(:checked):not(.variant-option__button-label--has-swatch, :has([data-option-available='false']))::before {
    border-color: var(--color-selected-variant-border);
  }

  /* setting left/right accounts for variant buttons of different widths */
  &:not(:has(:checked)):has(~ label > :checked),
  &:has(:checked):has(~ label > [data-previous-checked='true']) {
    .variant-option__button-label__pill {
      right: 0;
      left: unset;
    }
  }

  &:has([data-previous-checked='true']) ~ label:has([data-current-checked='true']),
  &:has(:checked) ~ label {
    .variant-option__button-label__pill {
      left: 0;
      right: unset;
    }
  }

  &:not(:has(:checked)):has(~ label > :checked) {
    --pill-offset: calc(100% + 1px);
  }

  &:has(:checked) ~ label {
    --pill-offset: calc(-100% - 1px);
  }

  &:has([data-current-checked='true']):first-of-type
    ~ label:last-of-type:not(.variant-option__button-label--has-swatch),
  &:not(:has(:checked)):has(~ label > :checked):not(.variant-option__button-label--has-swatch) {
    --clip: 0 0 0 100%;
  }

  &:not(:has([data-current-checked='true'])):first-of-type:has(~ label:last-of-type > :checked):not(
      .variant-option__button-label--has-swatch
    ),
  &:has(:checked) ~ label:not(.variant-option__button-label--has-swatch) {
    --clip: 0 100% 0 0;
  }

  &:has([data-previous-checked='true'], [data-current-checked='true']) .variant-option__button-label__pill {
    width: max(var(--pill-width-current, 100%), var(--pill-width-previous, 100%));
  }

  @media screen and (min-width: 750px) {
    padding: var(--padding-xs) var(--variant-option-padding-inline);
  }
}

/* wrap around only for 3 or more variants in a row */

/* the more complex selector rules here produce the wrap around effect for first/last variants */
.variant-option--buttons:has(:nth-of-type(3)) {
  .variant-option__button-label:has([data-current-checked='true']):first-of-type ~ label:last-of-type {
    --pill-offset: calc(100% + 1px);
  }

  .variant-option__button-label:not(:has([data-current-checked='true'])):first-of-type:has(
      ~ label:last-of-type > :checked
    ) {
    --pill-offset: calc(-100% - 1px);
  }
}

.variant-option__button-label__pill {
  background: var(--color-selected-variant-background);
  position: absolute;
  top: calc(var(--options-border-width) * -1);
  bottom: calc(var(--options-border-width) * -1);
  border-radius: inherit;
  pointer-events: none;
  width: 100%;
  transform: translateX(var(--pill-offset, 0));
}

.variant-option__button-label__text {
  pointer-events: none;
  text-align: start;
  text-wrap: auto;
  z-index: 2;
}

.variant-option--equal-width-buttons {
  --variant-min-width: clamp(44px, calc(var(--variant-option-padding-inline) * 2 + var(--variant-ch)), 100%);

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--variant-min-width), 1fr));

  .variant-option__button-label {
    min-width: var(--variant-min-width);
  }

  .variant-option__button-label__text {
    text-align: center;
    text-wrap: balance;
  }
}

.variant-option__button-label:has(:focus-visible) {
  --variant-picker-stroke-color: var(--color-foreground);

  border-color: var(--color-foreground);
  outline: var(--focus-outline-width) solid var(--color-foreground);
  outline-offset: var(--focus-outline-offset);
}

.variant-option__button-label--has-swatch {
  --focus-outline-radius: var(--variant-picker-swatch-radius);

  padding: 0;
  border: none;
  flex-basis: auto;
  min-height: auto;
}

/* Override global label:has(input) display rule with higher specificity */
.variant-option__button-label--has-swatch:has(input) {
  display: block;
}

.variant-option__button-label:has(:checked) {
  color: var(--color-selected-variant-text);
  border-color: var(--color-selected-variant-border);
}

.variant-option__button-label:has(:checked):hover {
  border-color: var(--color-selected-variant-hover-border);
  color: var(--color-selected-variant-hover-text);

  .variant-option__button-label__pill {
    background-color: var(--color-selected-variant-hover-background);
  }
}

.variant-option__button-label:has([data-option-available='false']) {
  color: rgb(var(--color-variant-text-rgb) / var(--opacity-60));
}

.variant-option__button-label--has-swatch:hover {
  outline: var(--focus-outline-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-35-55));
  outline-offset: var(--focus-outline-offset);
}

.variant-option__button-label--has-swatch:has(:checked) {
  --focus-outline: var(--focus-outline-width) solid var(--color-foreground);

  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
}

/* 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. **/
  .variant-option__button-label--has-swatch:has(:checked),
  .variant-option__button-label:has(:focus-visible) .swatch {
    outline: none;
    position: relative;
    overflow: visible;
  }

  .variant-option__button-label--has-swatch:has(:checked)::after,
  .variant-option__button-label:has(:focus-visible) .swatch::after {
    content: '';
    position: absolute;
    inset: calc(-1 * var(--focus-outline-offset));
    border: var(--focus-outline);
    border-radius: var(--focus-outline-radius, 50%);
    background-color: transparent;
    display: inherit;
  }
}

.variant-option__button-label:has([data-option-available='false']):has(:checked) {
  background-color: inherit;
  color: rgb(var(--color-variant-text-rgb) / var(--opacity-60));
}

.variant-option__button-label input {
  /* remove the checkbox from the page flow */
  position: absolute;

  /* set the dimensions to match those of the label */
  inset: 0;

  /* hide it */
  opacity: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: unset;
  border: none;
  border-radius: 0;
  background: transparent;
  appearance: auto;
  display: block;
  cursor: pointer;
}

.variant-option__button-label svg {
  position: absolute;
  left: var(--options-border-width);
  top: var(--options-border-width);
  height: calc(100% - (var(--options-border-width) * 2));
  width: calc(100% - (var(--options-border-width) * 2));
  cursor: pointer;
  pointer-events: none;
  stroke-width: var(--style-border-width);
  stroke: var(--variant-picker-stroke-color);
}

.variant-option__button-label:not(.variant-option__button-label--has-swatch) svg {
  stroke: var(--color-variant-border);

  line {
    stroke-width: var(--options-border-width);
  }

  line:last-of-type {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(var(--clip, 0 0 0 0));
    stroke: rgb(var(--color-variant-text-rgb) / 1);
  }
}

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

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

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

.tax-note:empty {
  display: none;
}

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

/* Volume pricing note should match unit-price styling (small, grey text) */
product-price .volume-pricing-note,
product-price.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) .volume-pricing-note {
  display: block;
  font-family: var(--font-body--family);
  font-weight: normal;
  font-size: var(--font-size--xs);
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
}

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

.price-item__group {
  display: inline-block;
}

.price-item--sale {
  white-space: nowrap;
}

.price__hidden {
  display: none;
}

form.payment-terms {
  padding-top: 0.5em;
  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));
}

.installments:not(:has(shopify-payment-terms)) {
  display: none;
}

.card-gallery {
  position: relative;
}

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

/* Hide "Add" button when "Choose" button is shown */
[data-quick-add-button='choose'] add-to-cart-component {
  display: none;
}

/* Hide "Choose" button when "Add" button is shown */
[data-quick-add-button='add'] .quick-add__button--choose {
  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(--font-weight);
}

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

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

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

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

.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 screen and (min-width: 750px) {
  .layout-panel-flex {
    flex-direction: var(--flex-direction);
  }
}

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

.field__input {
  flex-grow: 1;
  text-align: 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) var(--font-heading--spacing);
  }

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

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

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

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

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

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

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

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

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

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

.checkbox {
  --checkbox-top: 50%;
  --checkbox-left: 1.5px;
  --checkbox-offset: 3px;
  --checkbox-path-opacity: 0;
  --checkbox-cursor: pointer;

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

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

  &.checkbox--disabled {
    --checkbox-cursor: not-allowed;
  }
}

.checkbox__input {
  position: absolute;
  opacity: 0;
  margin: 0;
  padding: 0;
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  aspect-ratio: unset;
  border: none;
  border-radius: 0;
  background: transparent;
  appearance: auto;
  display: block;
  cursor: pointer;

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

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

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

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

:where(input[type='radio']):checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--checkbox-size) / 2);
  height: calc(var(--checkbox-size) / 2);
  background: var(--color-foreground);
  border-radius: var(--style-border-radius-50);
  transition: background 0.2s ease;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Flexbox for labels wrapping radio buttons or checkboxes */
label:has(input[type='radio']),
label:has(input[type='checkbox']) {
  display: inline-flex;
  align-items: center;
  gap: var(--padding-2xs);
  cursor: pointer;
}

label:has(input[type='radio']:disabled),
label:has(input[type='checkbox']:disabled) {
  cursor: not-allowed;
}

/* Override for swatch labels to maintain block display */
.variant-option__button-label--has-swatch:has(input[type='radio']) {
  display: block;
}

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

/* Cart items component */
.cart-items-component {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Cart typography */
.cart-primary-typography {
  font-family: var(--cart-primary-font-family);
  font-style: var(--cart-primary-font-style);
  font-weight: var(--cart-primary-font-weight);
}

.cart-secondary-typography {
  font-family: var(--cart-secondary-font-family);
  font-style: var(--cart-secondary-font-style);
  font-weight: var(--cart-secondary-font-weight);
}

/* 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,
.quick-add-modal .quantity-selector {
  border-radius: var(--style-border-radius-buttons-primary);
}

.product-details .quantity-selector .quantity-minus,
.quick-add-modal .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,
.quick-add-modal .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 {
  --offset-y: 10px;

  position: fixed;
  width: var(--width, 40px);
  height: var(--height, 40px);
  left: 0;
  top: 0;
  z-index: calc(infinity);
  pointer-events: none;
  border-radius: var(--style-border-radius-buttons-primary);
  overflow: hidden;
  object-fit: cover;
  background-size: cover;
  background-position: center;
  opacity: 0;
  background-color: var(--color-foreground);
  translate: var(--start-x, 0) var(--start-y, 0);
  transform: translate(-50%, -50%);
  animation-name: travel-x, travel-y, travel-scale;
  animation-timing-function: var(--x-timing), var(--y-timing), var(--scale-timing);
  animation-duration: 0.6s;
  animation-composition: accumulate;
  animation-fill-mode: both;
}

fly-to-cart.fly-to-cart--main {
  --x-timing: cubic-bezier(0.7, -5, 0.98, 0.5);
  --y-timing: cubic-bezier(0.15, 0.57, 0.9, 1.05);
  --scale-timing: cubic-bezier(0.85, 0.05, 0.96, 1);
}

fly-to-cart.fly-to-cart--quick {
  --x-timing: cubic-bezier(0, -0.1, 1, 0.32);
  --y-timing: cubic-bezier(0, 0.92, 0.92, 1.04);
  --scale-timing: cubic-bezier(0.86, 0.08, 0.98, 0.98);

  animation-duration: 0.6s;
}

fly-to-cart.fly-to-cart--sticky {
  --x-timing: cubic-bezier(0.98, -0.8, 0.92, 0.5);
  --y-timing: cubic-bezier(0.14, 0.56, 0.92, 1.04);
  --scale-timing: cubic-bezier(0.86, 0.08, 0.98, 0.98);
  --radius: var(--style-border-radius-buttons-primary);

  @media screen and (max-width: 749px) {
    --x-timing: cubic-bezier(0.98, -0.1, 0.92, 0.5);
  }

  animation-duration: 0.8s;
}

@keyframes travel-scale {
  0% {
    opacity: var(--start-opacity, 1);
  }

  5% {
    opacity: 1;
  }

  100% {
    border-radius: 50%;
    opacity: 1;
    transform: translate(-50%, calc(-50% + var(--offset-y))) scale(0.25);
  }
}

@keyframes travel-x {
  to {
    translate: var(--travel-x, 0) 0;
  }
}

@keyframes travel-y {
  to {
    translate: 0 var(--travel-y, 0);
  }
}

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

/* Collection Wrapper - Shared layout CSS for collection and search pages */

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

.collection-wrapper {
  @media screen and (min-width: 750px) {
    --facets-vertical-col-width: 6;

    grid-template-columns:
      1fr repeat(
        var(--centered-column-number),
        minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number)))
      )
      1fr;
  }

  @media screen and (min-width: 990px) {
    --facets-vertical-col-width: 5;
  }
}

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

.collection-wrapper:has(.facets--vertical) .facets-block-wrapper--vertical:not(.hidden) ~ .main-collection-grid {
  @media screen and (min-width: 750px) {
    grid-column: var(--facets-vertical-col-width) / var(--full-width-column-number);
  }
}

.collection-wrapper:has(.facets-block-wrapper--vertical:not(#filters-drawer)):has(.collection-wrapper--full-width) {
  @media screen and (min-width: 750px) {
    grid-column: 1 / -1;
    grid-template-columns: 0fr repeat(var(--centered-column-number), minmax(0, 1fr)) 0fr;
  }
}

:is(.collection-wrapper--full-width, .collection-wrapper--full-width-on-mobile)
  [product-grid-view='default']
  .product-grid__card {
  @media screen and (max-width: 749px) {
    padding-inline-start: max(var(--padding-xs), var(--padding-inline-start));
    padding-inline-end: max(var(--padding-xs), var(--padding-inline-end));
  }
}

:is(.collection-wrapper--full-width, .collection-wrapper--full-width-on-mobile)
  [product-grid-view='mobile-single']
  .product-grid__card {
  @media screen and (max-width: 749px) {
    padding-inline-start: max(var(--padding-xs), var(--padding-inline-start));
    padding-inline-end: max(var(--padding-xs), var(--padding-inline-end));
  }
}

/* Make product media go edge-to-edge by using negative margins */
:is(.collection-wrapper--full-width) .card-gallery,
:is(.collection-wrapper--full-width-on-mobile) .card-gallery {
  @media screen and (max-width: 749px) {
    margin-inline-start: calc(-1 * max(var(--padding-xs), var(--padding-inline-start)));
    margin-inline-end: calc(-1 * max(var(--padding-xs), var(--padding-inline-end)));
  }
}

.collection-wrapper--full-width .main-collection-grid__title {
  margin-left: var(--page-margin);
}

.collection-wrapper--full-width-on-mobile .main-collection-grid__title {
  @media screen and (max-width: 749px) {
    margin-left: var(--page-margin);
  }
}

.collection-wrapper--grid-full-width .facets--vertical:not(.facets--drawer) {
  @media screen and (min-width: 750px) {
    padding-inline-start: max(var(--padding-sm), var(--padding-inline-start));
  }
}

.collection-wrapper:has(.product-grid-mobile--large) .facets-mobile-wrapper.facets-controls-wrapper {
  @media screen and (max-width: 749px) {
    display: none;
  }
}

.collection-wrapper:has(> .facets--horizontal) .facets__panel[open] {
  @media screen and (min-width: 750px) {
    z-index: var(--facets-open-z-index);
  }
}

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

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

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

  50% {
    transform: scale(1.2);
  }

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

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

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

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

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

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

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

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

@keyframes 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 screen and (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 screen and (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 Arrow Hover Animation - must stay in base.css for proper CSS cascade */

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

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

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

.section-resource-list__content:empty {
  display: none;
}

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

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

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

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

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

.predictive-search-results__inner {
  flex-grow: 1;
  overflow-y: auto;
  padding-block: var(--padding-lg);
  container-type: inline-size;
  color: var(--color-foreground);
}

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

.product-recommendations {
  display: block;
}

.product-recommendations__skeleton-item {
  aspect-ratio: 3 / 4;
  background-color: var(--color-foreground);
  opacity: var(--skeleton-opacity);
  border-radius: 4px;
}

@media screen and (max-width: 749px) {
  .product-recommendations__skeleton-item:nth-child(2n + 1) {
    display: none;
  }
}

product-recommendations:has([data-has-recommendations='false']) {
  display: none;
}

.add-to-cart-button {
  --text-speed: 0.26;
  --base-delay: calc(var(--text-speed) * 0.25);
  --tick-speed: 0.1;
  --ring-speed: 0.2;
  --check-speed: 0.2;
  --burst-speed: 0.32;
  --step-delay: 3;
  --speed: 1;

  user-select: none;
  transition-property: color, box-shadow, background-color, scale, translate;
  transition-duration: var(--animation-speed);
  transition-timing-function: var(--ease-out-cubic);

  &:active {
    scale: 0.99;
    translate: 0 1px;
  }
}

.add-to-cart-button .svg-wrapper .checkmark-burst {
  width: 30px;
  height: 30px;
}

.add-to-cart-text {
  --atc-opacity: 0;
  --atc-destination: -1em;

  display: flex;
  gap: var(--gap-2xs);
  align-items: center;
  justify-content: center;
  animation-duration: var(--animation-speed);
  animation-timing-function: var(--animation-easing);
  animation-fill-mode: forwards;
  transition: width var(--animation-speed) var(--animation-easing),
    opacity var(--animation-speed) var(--animation-easing);
}

.add-to-cart__added {
  --atc-opacity: 1;
  --atc-destination: 0px;

  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
}

.add-to-cart__added-icon {
  width: 32px;
  height: 32px;
}

[data-added='true'] .add-to-cart-text,
[data-added='true'] .add-to-cart__added {
  animation-name: atc-slide;
}

.checkmark-burst {
  opacity: 0;
  overflow: visible;

  .burst {
    rotate: 20deg;
  }

  .check {
    opacity: 0.2;
    scale: 0.8;
    filter: blur(2px);
    transform: translateZ(0);
  }

  :is(.ring, .line, .check, .burst, .tick) {
    transform-box: fill-box;
    transform-origin: center;
  }

  :is(.line) {
    stroke-dasharray: 1.5 1.5;
    stroke-dashoffset: -1.5;
    translate: 0 -180%;
  }

  g {
    transform-origin: center;
    rotate: calc(var(--index) * (360 / 8) * 1deg);
  }
}

.add-to-cart-button[data-added='true'] .checkmark-burst {
  opacity: 1;
}

.add-to-cart-button[data-added='true'] {
  .check {
    opacity: 1;
    scale: 1;
    filter: blur(0);
  }

  .tick {
    scale: 1.75;
  }

  .ring {
    opacity: 0;
    scale: 1;
  }

  .line {
    stroke-dashoffset: 1.5;
  }

  .add-to-cart-text {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: circle(0% at 50% 50%);
    filter: blur(2px);
    opacity: 0;
    translate: 0 4px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .add-to-cart-button[data-added='true'] {
    .check {
      transition-property: opacity, scale, filter;
      transition-duration: calc(calc(var(--check-speed) * 1s));
      transition-delay: calc((var(--base-delay) * 1s));
      transition-timing-function: var(--ease-out-quad);
    }

    .tick {
      transition-property: scale;
      transition-duration: calc((calc(var(--tick-speed) * 1s)));
      transition-delay: calc(((var(--base-delay) + (var(--check-speed) * (var(--step-delay) * 1.1))) * 1s));
      transition-timing-function: ease-out;
    }

    .ring {
      transition-property: opacity, scale;
      transition-duration: calc((calc(var(--ring-speed) * 1s)));
      transition-delay: calc(((var(--base-delay) + (var(--check-speed) * var(--step-delay))) * 1s));
      transition-timing-function: var(--ease-out-quad);
    }

    .line {
      transition-property: stroke-dashoffset;
      transition-duration: calc((calc(var(--burst-speed) * 1s)));
      transition-delay: calc(((var(--base-delay) + (var(--check-speed) * var(--step-delay))) * 1s));
      transition-timing-function: var(--ease-out-cubic);
    }
  }

  .add-to-cart-text {
    transition-property: clip-path, opacity, filter, translate;
    transition-duration: calc((var(--text-speed) * 0.6s)), calc((var(--text-speed) * 1s));
    transition-timing-function: ease-out;
  }
}

.add-to-cart-text {
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
  clip-path: circle(100% at 50% 50%);
}

@keyframes atc-slide {
  to {
    opacity: var(--atc-opacity, 1);
    translate: 0px var(--atc-destination, 0px);
  }
}




/*ALEX LAPINETE*/

body {
  background:#F4F4F4!important;
}


.ai-header-arxzowxroa2durm10waigenblock2f53bb79rdweh {
      margin: 20px 0 0!important;
          border-radius: 20px;
}

.ai-header-inner-arxzowxroa2durm10waigenblock2f53bb79rdweh {
    max-width: 1440px!important;
    margin: 0!important;
}

.hero__content-wrapper {
    width: 60%!important;
    margin: auto 0 0 auto!important;
}

.hero__media-wrapper--desktop {
    display: block;
    max-width: 1440px;
}

.section-content-wrapper.section-content-wrapper {
  --vertical-alignment: baseline!important;
}
.announcement-bar__text:first-child {
    color: #B9BC4B!important;
}

#shopify-section-template--20802437447853__product_list_YidTcf,
#shopify-section-template--20802437447853__product_list_63jgXk {
  background-color:#F4F4F4!important;
}
.resource-list__carousel slideshow-container
{
  background:none!important;
  max-width:1440px!important;
  margin:auto!important;
}

.resource-list__carousel slideshow-container slideshow-slides{
  padding-left:0!important;
}

.ai-grid-wrapper-al1deagxad01hzefvnaigenblocka4b1673gnpmwj,
.ai-grid-container-al1deagxad01hzefvnaigenblocka4b1673gnpmwj {
  padding:0!important;
}

.ai-header-block__link-ayjlgdzrosndmahlzsaigenblock1132ce0rhmufe,
.ai-header-block__link-asjfbms8reenkdxfntaigenblock1132ce0xwfzt9,
.ai-header-block__link-ar1fnsxvyqjvnow4xqaigenblock1132ce0lxxnng{
    display: block;
    min-width: 150px;
    text-align: center;
    padding: 5px 20px;
}


.resource-list__carousel slideshow-slides .product-media-container {
  background-color:#fff!important;
  border-radius: 20px;
  
}

.ai-grid-cell-icon-al1deagxad01hzefvnaigenblocka4b1673gnpmwj img {
  filter: brightness(0) invert(1);
}

#shopify-block-AT25YUGpqTHFxR3NXM__ai_gen_block_3289ad5_nhkDDj,
#shopify-block-ASlp0dTUrb0JJVHFlT__ai_gen_block_3289ad5_Eganxz {
  width:100%;
}

#shopify-section-template--20802437447853__section_wjznqH h2,
#shopify-section-template--20802437611693__section_7Gf7WA h2,
#shopify-section-template--20953817415853__section_NyAtMR h2,
#shopify-section-template--20802437677229__section_hBcmta h2 {
    color: #3d4321;
    font-family: Fraunces, serif;
    font-weight: 600;
    font-style: normal;
    font-size: 36px;
}

.product-information__media {
  position: relative!important;
    z-index: 0!important;
}

#shopify-section-template--20802437447853__section_wjznqH .section--page-width,
#shopify-section-template--20802437611693__section_7Gf7WA .section--page-width,
#shopify-section-template--20953817415853__section_NyAtMR .section--page-width,
#shopify-section-template--20802437677229__section_hBcmta .section--page-width {
  width:90%!important;
  margin:auto!important;
}

#shopify-section-template--20802437447853__section_wjznqH .accordion .details__header,
#shopify-section-template--20802437611693__section_7Gf7WA .accordion .details__header,
#shopify-section-template--20953817415853__section_NyAtMR .accordion .details__header,
#shopify-section-template--20802437677229__section_hBcmta .accordion .details__header{
  font-family: Roboto, serif!important;
  font-size: 20px;
  margin: 15px 0;
}


#shopify-section-template--20802437447853__section_wjznqH .accordion--dividers .details-content,
#shopify-section-template--20802437611693__section_7Gf7WA .accordion--dividers .details-content,
#shopify-section-template--20953817415853__section_NyAtMR .accordion--dividers .details-content,
#shopify-section-template--20802437677229__section_hBcmta .accordion--dividers .details-content {
  font-size: 17px;
  margin-left: 20px;
}

.social-icons__icon {
    width: 35px!important;
    height: auto!important;
}
.social-icons__icon-wrapper:has(.social-icons__icon path) {
    width: 60px!important;
}

footer {
      width: 90%!important;
    margin: auto!important;
}

.hero__media-wrapper--desktop {
    width: 93%!important;
    margin: 20px auto!important;
    border-radius: 20px!important;
    overflow: hidden!important;
}

.hero__content-wrapper .button {
  padding:10px 50px!important;
  font-size: 18px;
}

.product-card-title {
  font-weight:800!important;
  font-size: 20px !important;
  font-family:"Bricolage Grotesque", sans-serif!important;
}

product-card .price {
  color:#7C9301;
    font-size: 20px;
    font-weight: 600;
}

.ai-announcement-bar-al2nvvjn3bvfocnbsyaigenblockb0d5f3a3gdrj6 {
    padding: 15px 100px!important;
}

.thc-values {
  display:flex;
  width:100%;
  padding:10px 0;
}

.thc-values .thc-level{
  text-align:left;
  flex: 0.3;
  font-size:18px;
  font-weight:600;
}

.thc-values .variants{
  text-align:left;
  flex: 0.3;
  font-size:16px;
  font-weight:600;
}

.thc-values .thc-level img{
    width: 22px;
    height: auto;
    float: left;
    position: relative;
    top: 0px;
    margin-right: 3px;
}

.thc-values .thc-percent{
  text-align:left;
  flex: 0.4;
  font-size:18px;
  font-weight:600;
}

#shopify-section-sections--20802437873837__custom_liquid_qWHqnf .fda-text {
  color:#1e1e1e!important;
  font-size:10px!important;
}

footer * {
  color:#1e1e1e!important;
}

.resource-list--grid,
#shopify-section-template--20802437611693__blocks_dtjBtD,
#shopify-section-template--20802437447853__1774779593c9a4c8e4,
#shopify-section-template--20802437447853__1774780773c4ec449d,
.resource-list__carousel .resource-list__slide,
#shopify-section-template--20802437447853__17748813505a88a936,
#shopify-section-template--20802437447853__17747943629a9080b0,
#shopify-section-template--20802437447853__17747953920f9641d3,
#shopify-section-template--20802437447853__section_wjznqH,
#shopify-section-template--20802437611693__blocks_iMca4n,
#shopify-section-template--20802437611693__section_7Gf7WA,
#shopify-section-template--20802437578925__form {
  position:relative!important;
  z-index:0!important;
}

footer .menu__item a {
  font-size:12px;
}

footer .utilities {
  border:none!important;
}

footer .utilities .footer-utilities__text {
  font-size: 11px!important;
}

.footer-content .menu__heading__default {
    font-size: 16px;
}
#shopify-section-template--20802437447853__section_wjznqH h2 {
    font-size: 36px!important;
}

.logo-block__image {
    width: 380px!important;
    margin: 0 0 0 auto!important;
    opacity:0.9;
}
.ai-testimonial-section-azwxhyndjwlq2d1kzyaigenblock5fb2f88cfh4gl {
    background-color: none!important;
}

.ai-testimonial-title-azwxhyndjwlq2d1kzyaigenblock5fb2f88cfh4gl {
    text-align: left!important;
    color: #3d4321!important;
    font-size: 28px!important;
    font-family: Fraunces, serif!important;
    font-weight: 600!important;
        margin-bottom: 15px !important;
        font-style:italic!important;
}
.ai-testimonial-grid-azwxhyndjwlq2d1kzyaigenblock5fb2f88cfh4gl {
    gap: 20px!important;
}
.ai-testimonial-section-azwxhyndjwlq2d1kzyaigenblock5fb2f88cfh4gl {
    padding: 30px 20px!important;
}

.ai-testimonial-slide-image-azwxhyndjwlq2d1kzyaigenblock5fb2f88cfh4gl {
  aspect-ratio: 6 / 11!important;
}

.product-card__tags {
    position: absolute;
    right: 20px;
    top: 20px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: end;
    z-index: 1;
}
.product-card__tags .badge {
    width:max-content;
    font-size:13px;
    text-transform:uppercase;
    display: flex;
    padding: 5px 10px;
    border-radius: 20px;
    border:solid #000 1px;
    background-color:#fff;
    gap:3px;
    position:relative;
}

.product-card__tags .icon img {
    position: relative;
    top: 2px;
    width: 15px;
}

.product-card__tags .badge.badge--chill { border-color:#AAD4F0!important;background-color:#AAD4F0; }
.product-card__tags .badge.badge--indica { border-color:#A48AC2!important;background-color:#A48AC2; }
.product-card__tags .badge.badge--euphoria { border-color:#DF4E87!important;background-color:#DF4E87; }
.product-card__tags .badge.badge--hybrid { border-color:#B9BC4B!important;background-color:#B9BC4B; }
.product-card__tags .badge.badge--sativa { border-color:#ED8B5D!important;background-color:#ED8B5D; }


footer .mobile-footer-logo {
  display:none;
}

.product-card-title,
.thc-values{
  color:#1E1E1E!important;
}

.ai-image-grid-item-adthnbwzmde4xedfptaigenblock3a5d857d6pfqb {
  background-color:#7c9301!important;
}
.ai-image-grid-item-adthnbwzmde4xedfptaigenblock3a5d857d6pfqb img{
  object-fit:contain!important;
}

.variant-option__button-label {
  border-radius:25px!important;
  padding:10px 20px;
}

#shopify-section-template--20802437677229__main .product-information__grid {
    margin: auto;
}

#shopify-section-template--20802437677229__main #shopify-section-template--20802437677229__section_hBcmta .section{
      width: 50%!important;
    margin: auto!important;
}


@media screen and (max-width: 1500px) {
  .resource-list__carousel slideshow-container {
    width:95%!important;
  }
  .ai-image-grid-item-adthnbwzmde4xedfptaigenblock3a5d857d6pfqb {
        min-height: max-content!important;
    }
}

@media screen and (max-width: 990px) {
  .hero__content-wrapper {
      width: 90% !important;
      margin: auto !important;
  }
  .ai-three-column-container-amfi2mhzrm3c3qk9isaigenblock13e2487ckcw38,
  .ai-three-column-container-al2lsags0sdlnzdhrnaigenblock13e2487h4w48c {
        display:flex!important;
    }
    .ai-three-column-item-amfi2mhzrm3c3qk9isaigenblock13e2487ckcw38,
    .ai-three-column-item-al2lsags0sdlnzdhrnaigenblock13e2487h4w48c {
        border-bottom:none!important;
    }

    .ai-three-column-item-amfi2mhzrm3c3qk9isaigenblock13e2487ckcw38:nth-child(2),
    .ai-three-column-item-al2lsags0sdlnzdhrnaigenblock13e2487h4w48c:nth-child(2) {
        border-bottom:none!important;
    }

    .hero__content-wrapper .button {
        margin-top: 20px!important;
    }

    .ai-announcement-bar-al2nvvjn3bvfocnbsyaigenblockb0d5f3a3gdrj6 {
        padding: 15px 25px !important;
    }
      .ai-announcement-bar-container-al2nvvjn3bvfocnbsyaigenblockb0d5f3a3gdrj6 {
        padding: 0!important;
    }
    .ai-testimonial-slide-image-azwxhyndjwlq2d1kzyaigenblock5fb2f88cfh4gl {
      aspect-ratio: 3 / 3 !important;
    }
    .ai-header-arxzowxroa2durm10waigenblock2f53bb79rdweh{
      display:none!important;
    }

}
div#shopify-section-template--20802437546157__cart-section {
    background: #f4f4f4;
}
body[data-templates=offer-page]  .product-information {
    background:#f4f4f4 !important}
 body[data-templates="offer-page"] .product-card>a>img{
    height:330px;
    object-fit: contain;
    padding-top:30px;
}
h2.section-title{
    font-size:40px;
}

button.shop-btn{
    background:black;
}
body[data-templates=offer-page] .grid .product-card{
    padding:15px;
    border:1px solid #d1d1d1;
}

body[data-templates=offer-page] .variant-btn{
    color:black;
    border:1px solid #d1d1d1;
}

body[data-templates=offer-page] .variants{
        grid-template-columns: repeat(4, 1fr) !important;
}

body[data-templates=offer-page] a.product-link{
    position:relative;
}
div#shopify-section-template--20869157945517__featured_collection_3FMgjx{
  padding-top:20px !important
}

body[data-templates="offer-page"] .badge{
  font-size:14px !important;
}

.product-card__tags_grids.\34 {
    grid-template-columns: repeat(4, 1fr);
}
@media screen and (max-width: 850px) {
    footer accordion-custom.menu {
      display:none!important;
    }
    footer .mobile-footer-logo {
      display:block!important;
      width:360px;
      padding-bottom:35px;
      opacity:0.9;
    }
    footer .logo-block {
      display:none!important;
    }
    .footer-content {
        display: block!important;
        width: max-content!important;
        margin: auto!important;
    }
    .social-icons__wrapper {
        margin: 0 auto 35px;
    }
}

@media screen and (max-width: 750px) {
      .ai-testimonial-content-azwxhyndjwlq2d1kzyaigenblock5fb2f88cfh4gl {
      order:2!important;
    }
    #shopify-block-AYkJjQUtKQ0NzeWl4c__ai_gen_block_c92fb85_rmVUj3 {
      width:100%;
    }
    .ai-header-block__heading-aykjjqutkq0nzewl4caigenblockc92fb85rmvuj3{
      text-align:center!important;
    }
}

@media screen and (max-width: 650px) {
    .hero__media-grid {
      position:relative!important;
    }
    .hero__container {
      padding-block-start:0!important;
    }

    .hero__content-wrapper .text-block--AN3hVdEUxUFNza1ZaM__text_KJqzT8,
    .hero__content-wrapper .text-block--AZGhPcyt2a3N4d05lZ__text_N68UtY {
        padding-block-start: 10px!important;
    }
    .hero__content-wrapper .text-block--AN3hVdEUxUFNza1ZaM__text_KJqzT8 p,
    .hero__content-wrapper .text-block--AZGhPcyt2a3N4d05lZ__text_N68UtY p{
      color: rgb(61 67 33)!important;
      font-size: 35px;
    }

.ai-variant-picker__button-as013ek9tu1mxvuvfsaigenblocke965bbfx3ta3g {
  min-width:90px!important;
}


    .ai-three-column-amfi2mhzrm3c3qk9isaigenblock13e2487ckcw38,
    .ai-three-column-al2lsags0sdlnzdhrnaigenblock13e2487h4w48c {
      width: 80%!important;
    }
    .ai-three-column-amfi2mhzrm3c3qk9isaigenblock13e2487ckcw38 p,
    .ai-three-column-al2lsags0sdlnzdhrnaigenblock13e2487h4w48c p{
     color: rgb(61 67 33)!important;
     font-weight:600!important;
    }

    .ai-three-column-item-amfi2mhzrm3c3qk9isaigenblock13e2487ckcw38:nth-child(2),
    .ai-three-column-item-al2lsags0sdlnzdhrnaigenblock13e2487h4w48c:nth-child(2){
       border-color: rgb(61 67 33)!important;
       border-width:2px!important;
    }
    .ai-three-column-item-amfi2mhzrm3c3qk9isaigenblock13e2487ckcw38,
    .ai-three-column-item-al2lsags0sdlnzdhrnaigenblock13e2487h4w48c {
    padding: 0px 25px !important;
  }
    .hero__media-wrapper--mobile {
        height: 340px;
    }
    .hero__media {
    object-position: 14%!important;
  }
  .ai-three-column-item-amfi2mhzrm3c3qk9isaigenblock13e2487ckcw38:not(:last-child)::after,
  .ai-three-column-item-al2lsags0sdlnzdhrnaigenblock13e2487h4w48c:not(:last-child)::after {
    width: 2px!important;
    background-color: #3d4321!important;
  }
  .ai-testimonial-title-azwxhyndjwlq2d1kzyaigenblock5fb2f88cfh4gl {
    text-align:center!important;
  }

.ai-header-block-ayjlgdzrosndmahlzsaigenblock1132ce0rhmufe,
.ai-header-block-asjfbms8reenkdxfntaigenblock1132ce0xwfzt9,
.ai-header-block-ar1fnsxvyqjvnow4xqaigenblock1132ce0lxxnng{
  padding-bottom:0!important;
}

}

@media screen and (max-width: 500px) {
    .hero__content-wrapper .text-block--AN3hVdEUxUFNza1ZaM__text_KJqzT8 p {
        font-size: 23px;
    }

    .ai-three-column-amfi2mhzrm3c3qk9isaigenblock13e2487ckcw38,
    .ai-three-column-al2lsags0sdlnzdhrnaigenblock13e2487h4w48c {
      width: 100% !important;
    }
    .ai-three-column-text-amfi2mhzrm3c3qk9isaigenblock13e2487ckcw38,
    .ai-three-column-text-al2lsags0sdlnzdhrnaigenblock13e2487h4w48c {
        margin-top:20px!important;
        font-size: 15px!important;
    }
    .ai-three-column-item-amfi2mhzrm3c3qk9isaigenblock13e2487ckcw38:nth-child(1),
    .ai-three-column-item-al2lsags0sdlnzdhrnaigenblock13e2487h4w48c:nth-child(1) {
        padding: 0 15px!important;
    }
    .ai-three-column-item-amfi2mhzrm3c3qk9isaigenblock13e2487ckcw38:nth-child(2),
    .ai-three-column-item-al2lsags0sdlnzdhrnaigenblock13e2487h4w48c:nth-child(2) {
        padding: 0 25px!important;
    }
    .ai-three-column-item-amfi2mhzrm3c3qk9isaigenblock13e2487ckcw38:nth-child(3),
    .ai-three-column-item-al2lsags0sdlnzdhrnaigenblock13e2487h4w48c:nth-child(3) {
        padding: 0 25px!important;
    }
    .ai-three-column-container-amfi2mhzrm3c3qk9isaigenblock13e2487ckcw38,
    .ai-three-column-container-al2lsags0sdlnzdhrnaigenblock13e2487h4w48c {
        margin: 25px auto 10px;
    }

    .hero__content-wrapper .button {
      background-color: rgb(61 67 33)!important;
      color:#fff!important;
    }

    .ai-image-grid-item-adthnbwzmde4xedfptaigenblock3a5d857d6pfqb {
        border-radius:10px!important;
    }
    .ai-image-grid-item-adthnbwzmde4xedfptaigenblock3a5d857d6pfqb a{
        height: 110px;
        border-radius:10px!important;
    }

    .ai-image-grid-image-adthnbwzmde4xedfptaigenblock3a5d857d6pfqb {
        height: 100%!important;
    }
    .ai-header-block__link-ayjlgdzrosndmahlzsaigenblock1132ce0rhmufe, .ai-header-block__link-asjfbms8reenkdxfntaigenblock1132ce0xwfzt9, .ai-header-block__link-ar1fnsxvyqjvnow4xqaigenblock1132ce0lxxnng {
        min-width: 0!important;
    }

    .ai-grid-cell-icon-al1deagxad01hzefvnaigenblocka4b1673gnpmwj {
        width: 27px!important;
        height: 27px!important;
    }
    .ai-grid-cell-al1deagxad01hzefvnaigenblocka4b1673gnpmwj {
      padding: 25px 10px!important;
      border-radius:15px!important;
    }
    .thc-values .thc-level{
      font-size:14px;
    }

    .thc-values .variants{
      font-size:14px;
    }

    .thc-values .thc-percent{
      font-size:14px;
    }
    .thc-values .thc-level img{
        width: 18px;
    }

}

@media screen and (max-width: 420px) {
  footer .mobile-footer-logo {
      width:300px;
    }
    footer .group-block-content {
      align-items: center;
    }
    .footer-content {
        position: relative;
        left: -20px;
    }
}
body[data-templates=offer-page] .product-card__tags_grids.\34 {
    grid-template-columns: repeat(4, 1fr) !important;

}
body[data-templates=offer-page] .product-card__tags_grids img{
  display:none;
}
body[data-templates=offer-page] .product-card__tags_grids .badges{
    font-weight: bold
}
@media only screen and (max-width:768px){
  .exotic-section .grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap:5px !important;
}
}

.exotic-section {
 padding-top:20px !important;
 padding-bottom:20px !important;
}
.badges.bsadge--euphoria {
    background: #DF4E87;
    border-radius: 50px;
}
section.banner-section {
    margin-top: 25px;
    margin-bottom:25px;
}

.exotic-section .grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
grid-template-areas:unset;
}

.product-card {
  background: #f5f5f5;
  padding: 15px;
  border-radius: 16px;
  text-align: center;
  position: relative;
}

.product-card img {
  width: 100%;
  border-radius: 10px;
}

#shopify-section-template--20802437611693__product_list_4gAMD4 .badge {
  position:relative;
}

#shopify-section-template--20802437611693__product_list_4gAMD4 .product-card__tags{
  gap:5px!important;
}

.badge--social,
.badge--focus,
.badge--happy,
.badge--productive {
  color:#1e1e1e!important;
}

#shopify-section-sections--20802437841069__17750352392ae933af {
  margin-top: 25px;
}


.badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #7a9b00;
  color: white;
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 12px;
}

.badge{
    border-radius: 0px;
    font-weight: 600;
    right:10px;
    left:auto;
    font-weight: bold;
    font-size:12px !important;
    background:black;
    border-radius: 5px;
}



.tags {
  margin-top: 10px;
}

body[data-templates="offer-page"] .tags span {
  background: #d9e6ef;
  padding: 5px 10px;
  border-radius: 20px;
  margin: 2px;
  display: inline-block;
  font-size: 12px;
}

body[data-templates="offer-page"] .tags .pink {
  background: #ff4da6;
  color: white;
}

body[data-templates="offer-page"] .price {
  margin: 10px 0;
}

body[data-templates="offer-page"] .price .new {
  color: #6b8e00;
  font-weight: bold;
}

body[data-templates="offer-page"] .price .old {
  text-decoration: line-through;
  margin-left: 5px;
}

body[data-templates="offer-page"] .price .off {
  background: red;
  color: white;
  padding: 3px 8px;
  border-radius: 10px;
  margin-left: 5px;
  font-size: 12px;
}

body[data-templates="offer-page"] .variants {
  margin: 10px 0;
}

body[data-templates="offer-page"] .variant-btn {
  padding: 5px 10px;
  border: none;
  margin: 2px;
  border-radius: 6px;
  cursor: pointer;
}

body[data-templates="offer-page"] .variant-btn.active {
  background:black;
  color: white !important;
}

body[data-templates="offer-page"] .cart-row {
  display: flex;
  gap: 10px;
}

body[data-templates="offer-page"] .qty {
  width: 50px;
  text-align: center;
}

.shop-btn {
  flex: 1;
  background: #6b8e00;
  color: white;
  border: none;
  padding: 10px;
  border-radius: 10px;
  cursor: pointer;
}

.section-title {
  font-size: 32px;
  margin-bottom: 20px;
}

body[data-templates="offer-page"] .text-center {
  text-align: center;
}

body[data-templates="offer-page"] .text-left {
  text-align: left;
}

body[data-templates="offer-page"] .text-left .cart-row {
  justify-content: flex-start;
}

body[data-templates="offer-page"] .text-center .cart-row {
  justify-content: center;
}

body[data-templates="offer-page"] .qty-wrapper {
  display: flex;
  align-items: center;
  background: #eee;
  border-radius: 10px;
  overflow: hidden;
}

body[data-templates="offer-page"] .qty-btn {
  width: 35px;
  height: 40px;
  border: none;
  background: #ddd;
  font-size: 18px;
  cursor: pointer;
}

body[data-templates="offer-page"] .qty-btn:hover {
  background: #ccc;
}

body[data-templates="offer-page"] .qty {
  width: 40px;
  text-align: center;
  border: none;
  background: transparent;
  font-weight: bold;
}

body[data-templates="offer-page"] .badges.bsadge--chill {
    background: #AAD4F0;
    color: black;
    display: flex;
    justify-content: center;
    border-radius: 50px;
}

body[data-templates="offer-page"] .product-card__tags_grids{
    display:grid;
    grid-template-columns: repeat(3,1fr);
    column-gap: 5px
}


body[data-templates="offer-page"] .product-card__tags_grids img{
    max-width:20px;
    padding-right: 5px
}

body[data-templates="offer-page"] .product-card__tags_grids .badges{
    display: flex;
    align-items: center;
}

body[data-templates="offer-page"] .product-card__tags_grids .badges.bsadge--indica{
    background:#A48AC2;
    border-radius: 50px;
    text-align: center;
    display: flex;
    justify-content: center;
}

body[data-templates="offer-page"] .product-card__tags_grids .badges{
    padding:2px;
    text-transform: uppercase;
}

body[data-templates="offer-page"] .product-card__tags_grids .badges.bsadge--focus {
    background: #FFC107;
    border-radius: 50px;
    text-align: center;
    display: flex;
    justify-content: center;
}

body[data-templates="offer-page"] .badges.bsadge--sativa {
    background: pink;
    border-radius: 50px;
    display: flex;
    justify-content: center;
}

body[data-templates="offer-page"] .badges.bsadge--happy {
    display: flex;
    justify-content: center;
    background: #ffcd83;
    border-radius: 50px;
}

body[data-templates="offer-page"] .product-card>a>img{
    border-radius: 10px;
    background:white;
    margin-bottom: 10px;
}

body[data-templates="offer-page"] .badges.bsadge--hybrid {
    background: #8BC34A;
    display: flex;
    justify-content: center;
    border-radius: 50px;
}

body[data-templates="offer-page"] .badges.bsadge--social {
    display: flex;
    justify-content: center;
    border-radius: 50px;
    background: turquoise;
}

body[data-templates="offer-page"] .product-card__tags_grids .badges{
    padding:5px;
}

body[data-templates="offer-page"] .product-card>a>img{
    border-radius: 10px;
    background:white;
    margin-bottom: 10px;
}

body[data-templates="offer-page"] .badges.bsadge--hybrid {
    background: #8BC34A;
    display: flex;
    justify-content: center;
    border-radius: 50px;
}

body[data-templates="offer-page"] .badges.bsadge--social {
    display: flex;
    justify-content: center;
    border-radius: 50px;
    background: turquoise;
}

body[data-templates="offer-page"] .product-card__tags_grids .badges{
    padding:5px;
}

body[data-templates="offer-page"] .grid{
    gap:10px;
}

body[data-templates="offer-page"] .grid .product-card{
    padding:0
}

section.exotic-section.text-left *{
    text-align: left;;
}

section.exotic-section h3{
    margin:0
}

section.exotic-section h3{
    font-size:20px;
    margin-top:0px;
    margin-bottom:5px;
    font-weight: bold;
}
body[data-templates="offer-page"] .product-card__tags_grids{
    margin-bottom: 10px;
}
body[data-templates="offer-page"] span.stars {
    color:black;
}
section.exotic-section .price{
    font-size:20px;
    font-weight: 600;
}


body[data-templates="offer-page"] .variant-btn{
    font-weight: bold;
    font-size:12px;
    text-align: center !important;
    padding:7px 10px !important;
    background:white;
    font-size:15px !important;

}
body[data-templates="offer-page"] .grid .product-card{
    padding:15px;
    border:1px solid #d1d1d1;
}


body[data-templates=offer-page] .variants{
        grid-template-columns: repeat(4, 1fr) !important;
}

body[data-templates="offer-page"] .qty-btn,.qty-wrapper{
    background:white;
}

body[data-templates="offer-page"] .variants{
    display: grid;
    grid-template-columns: repeat(4,1fr);
}

body[data-templates="offer-page"] .qty-wrapper input{
    text-align: center;
}

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

/* Firefox */
section.exotic-section input[type=number] {
  -moz-appearance: textfield;
}

section.exotic-section input[type=number]{
    text-align: center !important;
}

body[data-templates="offer-page"] button.shop-btn{
    text-align: center !important;
    font-size:20px;
    font-weight: bold;
    letter-spacing: 0;
    border-radius: 5px;
}

body[data-templates="offer-page"] .qty-wrapper{
    border-radius: 5px;
}

body[data-templates="offer-page"] .qty-wrapper button:hover{
    background:white;
}

section.exotic-section.text-left *{
    text-align: left;;
}

section.exotic-section h3{
    margin:0
}

section.exotic-section h3{
    font-size:20px;
    margin-top:5px;
    margin-bottom:5px;
    font-weight: bold;
}


section.exotic-section .price{
    font-size:20px;
    font-weight: 600;
}




body[data-templates="offer-page"] .qty-btn,body[data-templates="offer-page"] .qty-wrapper{
    background:white;
}

body[data-templates="offer-page"] .qty-wrapper input{
    text-align: center;
}

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

/* Firefox */
section.exotic-section input[type=number] {
  -moz-appearance: textfield;
}

section.exotic-section input[type=number]{
    text-align: center !important;
    height: 100%;
    font-size:20px
}

body[data-templates="offer-page"] button.shop-btn{
    text-align: center !important;
    font-size:20px;
    font-weight: bold;
    letter-spacing: 0;
    border-radius: 5px;
}

body[data-templates="offer-page"] .qty-wrapper{
    border-radius: 5px;
}

body[data-templates="offer-page"] .qty-wrapper button:hover{
    background:white;
}
body[data-templates="offer-page"] a,body[data-templates="offer-page"] h3{
    color:black;
}

body[data-templates="offer-page"] span.stars {
    font-size: 16px;
}

body[data-templates="offer-page"] .reviews {
    font-size: 16px;
    color:black
}


body[data-templates="offer-page"]  section.exotic-section .price {
    font-size: 20px;
    font-weight: 600;
    display: flex;
    align-items: center;
}
body[data-templates="offer-page"]  .price span.off{
    font-size:14px;
        position: absolute;
    right: 10px;
    padding:4px 8px;
    border-radius: 50px;
}

body[data-templates="offer-page"]  .price span.old.price-compare{
    font-weight: 400;
    font-size:20px;
    line-height: 1;
}
body[data-templates="offer-page"]  .price span.price-current.new{
    font-size:20px;
    line-height: 1;
}

body[data-templates="offer-page"]  .price{
    position: relative;
}

body[data-templates="offer-page"]  .icon-text-section .icon-item .icon-wrapper{
    height: 50px;
}
body[data-templates="offer-page"]  .icon-text-section .icon-item p{
    font-weight:600;
}

.product-card.cols .price-container {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: clamp(6.0px, 3vw, 12px);
    text-transform: uppercase;
}
.product-card.cols .price-wrapper {
    display: flex;
    align-items: center;
    gap: clamp(4px, 1.5vw, 8px);
}

.product-card.cols .price {
        font-size: 20px;
    font-weight: bold;
    color:black;
    line-height: 1;
    }

.product-card.cols .compare-price {
        font-size: 20px;
    color:#9ca3af;
    text-decoration: line-through;
    font-weight: bold;
    line-height: 1;
   }

.product-card.cols .sale-badge {
    padding: 4.8px 6px;
    background-color:#fd7676;
    color: var(--sale-badge-text);
    border-radius: 4px;
    font-size: clamp(6.0px, 1.3vw, 10px);
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.0;
    color:white;
}

body[data-templates=offer-page] .variants{
    margin-top:0;
}

body[data-templates=offer-page] .variant-btn {
    color: #000;
    font-size: 14px !important;
    padding: 7.0px 10px !important;
    font-weight: 400 !important;
    letter-spacing:0px;
}

body[data-templates="offer-page"]  button.shop-btn {
    text-align: center !important;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 0;
    border-radius: 5px;
    font-size: 16px !important;
    padding: 10px;
}

body[data-templates="offer-page"] .product-card.cols .qty-btn {
    width: 20px !important;
 background:transparent !important;
}

body[data-templates="offer-page"]  .qty-btn,body[data-templates="offer-page"]  .qty-wrapper,body[data-templates="offer-page"]  .qty-wrapper input{
    background:transparent !important;
}

body[data-templates="offer-page"]  .qty-wrapper{
    border:1px solid #d1d5db;
}
body[data-templates="offer-page"]  .qty-wrapper input{
    font-size:14px !important;
    width:20px;
}


body[data-templates="offer-page"] h2.section-heading{
    font-size:40px !important
}
body[data-templates="offer-page"] .product-title a {
        font-size: 20px !important;
    font-weight: bold !important;
    text-align: left;
    }

body[data-templates="offer-page"] .product-reviews {
        font-size: 14px !important;
    }

body[data-templates="offer-page"] .reviews{
    text-align: left !important;
}

body[data-templates="offer-page"] .product-title a {
    font-family: Rubik, sans-serif !important;
}


body[data-templates=offer-page] .product-card>a>img{
    margin-bottom: 0 !important;
}

body[data-templates="offer-page"] .variant-button {
        font-size: 14px !important;
        padding: 7.0px 10px !important;
    border-radius: 5px !important;
   font-family: Rubik, sans-serif; }

    body[data-templates="offer-page"] .compare-price{
      font-weight:400 !important
    }
body[data-templates="offer-page"] .price,body[data-templates="offer-page"] .compare-price {
        font-size: 20px !important;
    font-weight: bold !important;
    font-family: Rubik, sans-serif;
    margin:0 !important
}

body[data-templates="offer-page"] .sale-badge {
    padding: 4.8px 6px;
    background-color:#fd7676 !important;
    border-radius: 4px;
    font-size: clamp(6.0px, 1.3vw, 10px);
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.0;}

body[data-templates="offer-page"] #MainContent .add-to-cart-button {
        font-size: 16px;
        padding: 12px;
    }
body[data-templates="offer-page"] #MainContent .quantity-selector{
    max-width: 80px;
}

body[data-templates="offer-page"] .section-standalone>div{
    padding-top:20px;
    padding-bottom: 20px
}


body[data-templates="offer-page"]  .reviews{
  font-size:14px;
}

body[data-templates="offer-page"] .product-card{
    padding:15px !important;
}

body[data-templates="offer-page"]  .add-to-cart-button {
    font-family: Rubik, sans-serif !important;
    font-weight: 500;
    }

body[data-templates="offer-page"] h2{
    font-family: Rubik, sans-serif;
}
.accordion .details__header {
    font-size: 18px;
}

.banner-section img{
    border-radius: 10px
}

body[data-templates=offer-page] .product-card>a>img{
    transform: none !important
}

body[data-templates=offer-page] .product-card:hover{
    transform: none !important;
}
.price__sale,div[ref="priceContainer"] .price{
        font-size: 20px !important;
    font-weight: 700 !important;
    font-family: Rubik, sans-serif;
    margin: 0 !important;
}

.sale-badge{
        padding: 4.8px 6px;
    background-color: #fd7676 !important;
    border-radius: 4px;
    font-size: clamp(6px, 1.3vw, 10px);
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1;
    color:white;
}
div[ref="priceContainer"] .sale-badge{
    position: relative;
    bottom:2px;
}

.badges.bsadge--euphoria{
    width:100% !important;
    text-align: center !important;
    display: flex !important;
    justify-content: center !important
}

@media only screen and (max-width:1200px){
  body[data-templates="offer-page"] .collection-grid{
    grid-template-columns: repeat(3, 1fr) !important;
            gap: 10px;
  }
}

@media only screen and (max-width:1024px){
  body[data-templates=offer-page] .product-card>a>img {
    height: 250px;
    object-fit: contain;
    padding-top: 0;
}
body[data-templates="offer-page"] .product-card {
    padding: 10px !important;
}
body[data-templates="offer-page"] .product-card{
    gap:5px;
}

body[data-templates="offer-page"] .variant-button {
    font-size: 14px !important;
    padding:5px !important;
}

body[data-templates="offer-page"] .variant-selector{
    column-gap:2px;
}
}

@media only screen and (max-width:768px){


  body[data-templates="offer-page"] .product-card__tags_grids img {
    max-width: 10px !important;
    padding-right: 2px !important;
}
  body[data-templates=offer-page] .product-card>a>img{
    height:250px !important
  }
body[data-templates="offer-page"] h2.section-heading {
    font-size: 28px !important;
    font-family: Rubik, sans-serif;
}
  body[data-templates="offer-page"] .collection-grid{
    grid-template-columns: repeat(2, 1fr) !important;
            gap: 10px;
  }
  body,html{
    overflow-x:hidden;
  }

  .page-width-narrow, .page-width-content{
    margin:0 !important;
  }

body[data-templates="offer-page"] .product-title a{
    font-size:16px !important;
    line-height:1.2
}



body[data-templates="offer-page"] .sale-badge{
    font-size:10px;
}

body[data-templates="offer-page"] .price-container{
    margin-top: 5px;
    margin-bottom: 5px !important
}

body[data-templates="offer-page"] #MainContent .add-to-cart-button{
    font-size:10px;
}

body[data-templates="offer-page"] #MainContent .quantity-selector{
    gap:0 !important;
    max-width: 50px !important;
}


body[data-templates="offer-page"] #MainContent .quantity-selector *{
    padding:4px;
    font-size:11px;
}
.product-card__tags_grids{
    gap:2px !important;
}
.product-card__tags_grids.\34{
    grid-template-columns: repeat(4,1fr) !important;
}

body[data-templates="offer-page"] .product-card__tags_grids .badges img{
    display: none;
}



body[data-templates="offer-page"] .section-standalone>div {
    padding-top: 10px;
    padding-bottom: 10px;
}
section.banner-section {
    margin-bottom: 10px;
}

body[data-templates=offer-page] .product-card>a>img{
  padding-top:20px !important;
}
    h2.reviews-title {
        font-size: 28px;
        text-align: center;
    }

    body[data-templates=offer-page] .section-standalone>div{
padding-left:15px;
    padding-right: 15px;
}
.product-card__tags_grids {
    margin-top:5px;
    margin-bottom: 5px !important;
}

    body[data-templates=offer-page] .product-card__tags_grids .badges {
        display: flex;
        justify-content: center;
    }
}

@media only screen and (max-width:480px){

  #shopify-section-template--21371331543213__section_ew6cxe .custom-section-content{
    padding:10px !important;
  }

  .accordion .details__header{
    font-size:18px !important;
  }

  #shopify-section-template--21371331543213__section_ew6cxe .h2 h2,#shopify-section-template--21371331543213__section_ew6cxe .h2{
    width:100% !important;
    text-align: center !important;
}

body[data-templates="offer-page"] .jdgm-cards-carousel .jdgm-title {
    font-size: 30px;
    font-weight: 500;
}
  body[data-templates="offer-page"] .product-card__tags_grids .badges{
    font-size:8px !important;
    padding:2px !important;
}
body[data-templates=offer-page] .badge {
    font-size: 8px !important;
    padding: 5px;
}

body[data-templates=offer-page] .product-card>a>img{
    height:200px !important
  }
  span.stars,body[data-templates="offer-page"] .reviews{
    font-size:12px !important
}

 body[data-templates="offer-page"] .price, body[data-templates="offer-page"] .compare-price{
    font-size:13px !important;
}
   body[data-templates="offer-page"] .variant-button {
        font-size: 10px !important;
        padding: 5px !important;
    }

    body[data-templates="offer-page"] .product-card__tags_grids {
    margin-bottom: 0 !important;
}
    body[data-templates=offer-page] #MainContent .add-to-cart-button {
        font-size: 10px;
        padding: 7px;
        border-radius: 5px;
    }
}

@media only screen and (max-width: 400px) {
    body[data-templates=offer-page] .variant-button {
        font-size: 9px!important;
        padding: 3px !important;
    }
        body[data-templates=offer-page] .product-card>a>img {
        height:150px !important;
    }

        span.stars, body[data-templates=offer-page] .reviews {
        font-size: 10px !important;
    }
    .badge { display: none !important; }

}
.badge { display: none !important; }



/* =====================================================================
   Elevana custom premium styling
   ---------------------------------------------------------------------
   Appended enhancement layer. Nothing above this line was changed.
   These rules win through the cascade (they load last) and reuse the
   theme's own design tokens, so theme settings, colors, fonts, and
   functionality stay intact. To revert, delete from this banner down.
   All motion respects prefers-reduced-motion.
   ===================================================================== */

/* --- Premium tokens (namespaced so nothing collides) ----------------- */
:root {
  --elevana-ease: cubic-bezier(0.22, 1, 0.36, 1);   /* refined ease-out */
  --elevana-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --elevana-speed: 0.28s;
  --elevana-accent: #7C9301;                          /* brand green */
  --elevana-card-radius: clamp(10px, 1.2vw, 16px);
  --elevana-shadow-sm: 0 1px 2px rgb(var(--color-shadow-rgb, 17 17 17) / 0.04),
                       0 2px 6px rgb(var(--color-shadow-rgb, 17 17 17) / 0.05);
  --elevana-shadow-md: 0 4px 12px rgb(var(--color-shadow-rgb, 17 17 17) / 0.07),
                       0 12px 28px rgb(var(--color-shadow-rgb, 17 17 17) / 0.09);
}

/* --- Global rendering polish ----------------------------------------- */
/* Sharper text on all surfaces + better kerning/ligatures.              */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}

/* Branded text selection */
::selection {
  background-color: rgb(124 147 1 / 0.22);
  color: var(--color-foreground);
}

/* Comfortable reading measure for long-form prose blocks only.
   Scoped to rich-text/prose so it never constrains layout components. */
.rte p,
.prose p {
  max-width: 68ch;
}

/* --- Typography refinement ------------------------------------------- */
/* Gentle optical tightening on the largest display headings. Premium
   display type reads better slightly tighter; small/body type is left
   to the theme's own letter-spacing setting. */
h1, .h1.h1,
h2, .h2.h2 {
  letter-spacing: -0.012em;
  text-wrap: balance;          /* avoids orphan words in big headings */
}

/* Keep paragraphs from becoming rivers of orphans */
.rte p,
.prose p,
.paragraph > * {
  text-wrap: pretty;
}

/* --- Buttons: cleaner, more tactile ---------------------------------- */
/* Slightly more generous tap area, refined easing, and a subtle lift +
   shadow on hover. Colors stay 100% driven by your theme variables.    */
.button,
.button-secondary,
button.shopify-payment-button__button--unbranded {
  --button-padding-block: max(var(--button-padding-block), 0.85em);
  --button-padding-inline: max(var(--button-padding-inline), 1.6em);
  transition:
    color var(--elevana-speed) var(--elevana-ease),
    background-color var(--elevana-speed) var(--elevana-ease),
    box-shadow var(--elevana-speed) var(--elevana-ease),
    transform var(--elevana-speed) var(--elevana-ease);
  will-change: transform;
}

@media (any-pointer: fine) and (prefers-reduced-motion: no-preference) {
  .button:hover,
  button.shopify-payment-button__button--unbranded:hover:not([disabled]) {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgb(var(--color-shadow-rgb, 17 17 17) / 0.16);
  }
  .button-secondary:hover {
    transform: translateY(-1px);
  }
  .button:active,
  .button-secondary:active {
    transform: translateY(0);
    box-shadow: none;
    transition-duration: 0.05s;
  }
}

/* --- Accessible, premium focus ring ---------------------------------- */
/* Visible only for keyboard users; tinted with the brand accent. */
a:focus-visible,
button:focus-visible,
.button:focus-visible,
.button-secondary:focus-visible,
.product-card__link:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--elevana-accent);
  outline-offset: 2px;
  border-radius: var(--border-radius, 4px);
}

/* --- Product & collection cards: depth + smoother motion ------------- */
/* Adds a soft resting shadow that deepens on hover, plus rounded media.
   Works alongside whatever hover effect (lift/scale/zoom) the theme
   setting has selected — transform and shadow animate independently.   */
.product-card,
.collection-card {
  transition:
    transform var(--elevana-speed) var(--elevana-ease),
    box-shadow var(--elevana-speed) var(--elevana-ease);
  border-radius: var(--elevana-card-radius);
}

.product-card__image,
.collection-card__image,
.card-gallery {
  border-radius: var(--elevana-card-radius);
  overflow: hidden;
}

/* Smoother, slower image zoom for a high-end feel */
.product-card__image img,
.collection-card__image img,
.card-gallery img {
  transition: transform 0.55s var(--elevana-ease);
  will-change: transform;
}

@media (any-pointer: fine) and (prefers-reduced-motion: no-preference) {
  .product-card:hover,
  .collection-card:hover {
    box-shadow: var(--elevana-shadow-md);
  }
  .product-card:hover .product-card__image img,
  .collection-card:hover .collection-card__image img,
  .card-gallery:hover img {
    transform: scale(1.04);
  }
}

/* --- Form inputs: quieter, more refined ------------------------------ */
textarea,
input:not([type='checkbox'], [type='radio']),
select {
  transition:
    border-color var(--elevana-speed) var(--elevana-ease),
    box-shadow var(--elevana-speed) var(--elevana-ease),
    background-color var(--elevana-speed) var(--elevana-ease);
}

textarea:focus,
input:not([type='checkbox'], [type='radio']):focus {
  box-shadow: 0 0 0 3px rgb(124 147 1 / 0.18);
}

/* --- Media presentation ---------------------------------------------- */
/* Keep hero / banner imagery from looking flat on large screens. */
img,
picture {
  -webkit-user-drag: none;
}

/* --- Spacing rhythm (conservative) ----------------------------------- */
/* A touch more vertical breathing room between stacked sections on
   larger screens, where premium sites tend to be more generous.        */
@media screen and (min-width: 750px) {
  .product-grid,
  .resource-list {
    --product-card-gap: max(var(--product-card-gap, 12px), 14px);
  }
}

/* --- Mobile refinements ---------------------------------------------- */
@media screen and (max-width: 749px) {
  /* Comfortable minimum tap targets for primary actions */
  .button,
  .button-secondary {
    min-height: 44px;
  }
  /* Slightly tighter heading tracking reads better on small screens */
  h1, .h1.h1 {
    letter-spacing: -0.01em;
  }
  /* Soften the large media radius a little on phones */
  .product-card,
  .collection-card,
  .product-card__image,
  .collection-card__image,
  .card-gallery {
    border-radius: clamp(8px, 2.5vw, 12px);
  }
}

/* Honor reduced-motion globally for any transition added above */
@media (prefers-reduced-motion: reduce) {
  .button,
  .button-secondary,
  .product-card,
  .collection-card,
  .product-card__image img,
  .collection-card__image img,
  .card-gallery img {
    transition: none !important;
  }
}

/* =====================================================================
   Elevana premium — Part II
   ---------------------------------------------------------------------
   Continuation of the enhancement layer above: hero, collection pages,
   product pages, links, badges, drawers, and global flow. Same rules:
   100% token-driven (no hard-coded brand colors beyond the namespaced
   accent), nothing destructive, all motion respects reduced-motion.
   ===================================================================== */

/* --- Global flow: smooth, sticky-header-aware in-page navigation ----- */
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
/* Keep anchored headings clear of the sticky header */
:where(h1, h2, h3, [id]:not(body)) {
  scroll-margin-top: calc(var(--header-height, 60px) + 1.5rem);
}

/* --- Inline prose links: refined animated underline ------------------ */
/* Scoped to rich text only so nav, buttons, cards are never affected.  */
.rte a:not(.button):not(.button-secondary),
.prose a:not(.button):not(.button-secondary) {
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition:
    text-decoration-color var(--elevana-speed) var(--elevana-ease),
    color var(--elevana-speed) var(--elevana-ease);
}

/* --- Headings: tighten the secondary display sizes too --------------- */
h3, .h3.h3 {
  letter-spacing: -0.008em;
}

/* --- Price hierarchy on cards ---------------------------------------- */
/* Make the price read as the anchor of each card without changing size. */
.product-card .price,
.product-grid__card .price,
.product-card__content .price {
  font-weight: 600;
  letter-spacing: 0.01em;
}
.product-card .price .price__sale,
.product-grid__card .price .price__sale {
  font-weight: 600;
}
/* A quieter compare-at price so the real price leads */
.price .price__compare,
.price s,
.price del {
  opacity: 0.6;
}

/* --- Hero: cleaner spacing + legible content over media -------------- */
.hero__container {
  --hero-content-max: 62ch;
}
/* When the hero content sits over imagery, give text a soft scrim so it
   stays readable on busy photos. Only applies to light-on-media schemes. */
.hero__media ~ * .hero__content-wrapper,
.hero__container:has(.hero__media) .hero__content-wrapper {
  text-shadow: 0 1px 18px rgb(0 0 0 / 0.18);
}
/* Generous, balanced gap between hero blocks */
.hero__content-wrapper {
  row-gap: clamp(1rem, 2vw, 1.75rem);
}

/* --- Collection / facets: calmer, more premium filtering ------------- */
.facets__panel {
  --padding-inline-start: var(--padding-lg);
  --padding-inline-end: var(--padding-lg);
}
/* Filter + sort control bar: a touch more air and a clean hairline */
.facets-controls-wrapper {
  gap: var(--gap-md);
  padding-block: var(--padding-sm);
}
/* Active filter pills: pill-shaped, tactile */
.facets__pill-label,
.active-facets__button,
.active-facets a {
  border-radius: 999px;
  transition:
    background-color var(--elevana-speed) var(--elevana-ease),
    border-color var(--elevana-speed) var(--elevana-ease),
    box-shadow var(--elevana-speed) var(--elevana-ease);
}
@media (any-pointer: fine) and (prefers-reduced-motion: no-preference) {
  .facets__pill-label:hover,
  .active-facets__button:hover {
    box-shadow: var(--elevana-shadow-sm);
  }
}

/* --- Pagination: balanced, refined ----------------------------------- */
.pagination-controls,
.pagination__list {
  gap: var(--gap-xs, 0.5rem);
}
.pagination__item {
  border-radius: 999px;
  transition: background-color var(--elevana-speed) var(--elevana-ease),
              color var(--elevana-speed) var(--elevana-ease);
}

/* --- Product page: premium media + breathing details ----------------- */
.product-media-container,
.product-media__image {
  border-radius: var(--elevana-card-radius);
  overflow: hidden;
}
/* Soft resting depth on the main gallery, desktop only */
@media screen and (min-width: 750px) {
  .product-information__media .product-media-container {
    box-shadow: var(--elevana-shadow-sm);
  }
  /* Comfortable rhythm for the buy column */
  .product-details {
    row-gap: clamp(0.75rem, 1.4vw, 1.25rem);
  }
}
/* Variant pickers / swatches: smoother state changes */
.variant-picker fieldset label,
.variant-option label,
swatch-input label {
  transition:
    border-color var(--elevana-speed) var(--elevana-ease),
    background-color var(--elevana-speed) var(--elevana-ease),
    box-shadow var(--elevana-speed) var(--elevana-ease),
    transform var(--elevana-speed) var(--elevana-ease);
}
@media (any-pointer: fine) and (prefers-reduced-motion: no-preference) {
  .variant-picker fieldset label:hover,
  .variant-option label:hover {
    transform: translateY(-1px);
  }
}

/* --- Sticky add-to-cart bar: floating, premium ----------------------- */
.sticky-add-to-cart,
.sticky-add-to-cart__bar {
  backdrop-filter: saturate(1.1) blur(8px);
}
.sticky-add-to-cart__bar {
  box-shadow: 0 -6px 24px rgb(var(--color-shadow-rgb, 17 17 17) / 0.08);
}

/* --- Accordion (FAQ / product details): cleaner dividers ------------- */
.accordion summary,
details > summary {
  transition: color var(--elevana-speed) var(--elevana-ease);
  cursor: pointer;
}

/* --- Sale / sold-out badges: refined chips --------------------------- */
.product-card__tags .badge,
.product-badges .badge,
.badge {
  letter-spacing: 0.04em;
  backdrop-filter: saturate(1.05);
}

/* --- Cart & drawers: softer, deeper surface -------------------------- */
.cart-drawer,
.drawer__inner,
dialog.quick-add-modal {
  box-shadow: var(--shadow-drawer, 0 8px 40px rgb(var(--color-shadow-rgb, 17 17 17) / 0.16));
}

/* --- Quick-add / secondary CTAs inside cards: subtle lift ------------- */
@media (any-pointer: fine) and (prefers-reduced-motion: no-preference) {
  .quick-add__button:hover,
  .product-card .button:hover {
    transform: translateY(-1px);
  }
}

/* --- Reduced-motion guard for everything added in Part II ------------ */
@media (prefers-reduced-motion: reduce) {
  .facets__pill-label,
  .active-facets__button,
  .active-facets a,
  .pagination__item,
  .variant-picker fieldset label,
  .variant-option label,
  swatch-input label,
  .accordion summary,
  details > summary,
  .rte a,
  .prose a {
    transition: none !important;
  }
}
/* --- On-card variant (weight) buttons -------------------------------- */
/* Rendered by blocks/product-title.liquid, driven by elevana-card-variants.js.
   Hidden by default and only shown inside a product card, so the main
   product page (whose title block is NOT inside <product-card>) never
   shows them. Colours reuse the theme's own variant tokens for a look
   that matches the product-page variant picker. */
.elevana-weights {
  display: none;
}
product-card .elevana-weights,
.product-card .elevana-weights {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-block-start: 8px;
}

.elevana-weight {
  appearance: none;
  cursor: pointer;
  min-height: 32px;
  padding: 4px 12px;
  font-family: var(--font-paragraph--family);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1;
  color: var(--color-variant-text, var(--color-foreground));
  background-color: var(--color-variant-background, transparent);
  border: 1px solid var(--color-variant-border, rgb(var(--color-foreground-rgb) / 0.18));
  border-radius: 999px;
  transition:
    color var(--elevana-speed) var(--elevana-ease),
    background-color var(--elevana-speed) var(--elevana-ease),
    border-color var(--elevana-speed) var(--elevana-ease),
    box-shadow var(--elevana-speed) var(--elevana-ease);
}

@media (any-pointer: fine) and (prefers-reduced-motion: no-preference) {
  .elevana-weight:hover {
    color: var(--color-variant-hover-text, var(--color-foreground));
    background-color: var(--color-variant-hover-background, transparent);
    border-color: var(--color-variant-hover-border, var(--elevana-accent));
  }
}

.elevana-weight.is-active {
  color: var(--color-selected-variant-text, var(--color-background));
  background-color: var(--color-selected-variant-background, var(--color-foreground));
  border-color: var(--color-selected-variant-border, var(--color-foreground));
}

/* Sold-out weights stay selectable but read as unavailable */
.elevana-weight.is-soldout {
  opacity: 0.45;
  text-decoration: line-through;
}

/* Keyboard focus matches the rest of the premium layer */
.elevana-weight:focus-visible {
  outline: 2px solid var(--elevana-accent);
  outline-offset: 2px;
}

@media screen and (max-width: 749px) {
  product-card .elevana-weights,
  .product-card .elevana-weights {
    gap: 5px;
  }
  .elevana-weight {
    min-height: 30px;
    padding: 4px 10px;
    font-size: 0.75rem;
  }
}

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

/* --- Buy area on each card: weights + visible Add to Cart ------------- */
/* Rendered in snippets/product-card.liquid, so it appears on the homepage
   Best Sellers and the collection grid alike, directly under the price. */
.elevana-card-buy {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
  width: 100%;
  /* Sit above the full-card link overlay so buttons stay clickable */
  position: relative;
  z-index: 1;
}

.elevana-card-buy .elevana-weights {
  margin-block-start: 0;
}

/* Reset the form wrapper the theme adds around {% form %} */
.elevana-card-buy .elevana-card-form,
.elevana-card-buy form {
  margin: 0;
  width: 100%;
}

/* The visible Add to Cart button — full width, prominent, on-brand */
.button.elevana-atc {
  width: 100%;
  justify-content: center;
  text-align: center;
  --text-align: center;
}

.button.elevana-atc[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Hide the image-overlay quick-add inside cards so there is ONE clear
   call to action (our under-card Add to Cart). Functionality is unchanged
   — the overlay is purely a duplicate entry point. */
product-card .card-gallery quick-add-component,
.product-card .card-gallery quick-add-component {
  display: none !important;
}

/* Defensive: ensure the old potency row never shows even if cached */
.thc-values {
  display: none !important;
}

/* ============================= end Elevana premium styling ============ */
/* MOBILE ONLY - FIX HERO TEXT/BACKGROUND */



#shopify-section-template--21371331543213__section_ew6cxe .custom-section-content{background:#7C9301;
    margin-top:50px;
    margin-bottom:50px;
    padding:10px 40px;
    border-radius: 10px
}

#shopify-section-template--21371331543213__section_ew6cxe .custom-section-content{background:#25ad37; *{
    color:white;
    }

    
.details p{
        width:100% !important;
    max-width: 100%;
    padding-left:5px;
    }
    

    .accordion .details__header {
    font-family: 'Roboto';
    font-size: 22px;
}
@media screen and (max-width: 749px) {
  [id*="hero_G7CAX9"] {
    background: #ffffff !important;
  }

  [id*="hero_G7CAX9"] h1,
  [id*="hero_G7CAX9"] h2,
  [id*="hero_G7CAX9"] p,
  [id*="hero_G7CAX9"] strong,
  [id*="hero_G7CAX9"] .text-block,
  [id*="hero_G7CAX9"] .prose,
  [id*="hero_G7CAX9"] .group-block {
    color: #253113 !important;
    text-shadow: none !important;
    opacity: 1 !important;
  }

  [id*="hero_G7CAX9"] h1,
  [id*="hero_G7CAX9"] h2 {
    font-size: 34px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    margin: 18px 0 8px !important;
    text-align: center !important;
  }

  [id*="hero_G7CAX9"] .group-block,
  [id*="hero_G7CAX9"] .text-block {
    background: transparent !important;
    padding: 0 18px !important;
  }
/* Fix product card second-image hover cropping only */
.product-image-wrapper {
  position: relative !important;
  overflow: hidden !important;
}

.product-image-wrapper .product-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
}

.product-image-wrapper .product-image-hover {
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  z-index: 2 !important;
}

.product-image-wrapper:hover .product-image-hover {
  opacity: 1 !important;
}

.product-image-wrapper:hover .product-image-primary {
  opacity: 0 !important;
}