/** Shopify CDN: Minification failed

Line 6489:0 Unexpected "}"

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

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

:root {
  --hover-lift-amount: 4px;
  --hover-scale-amount: 1.03;
  --hover-subtle-zoom-amount: 1.015;
  --hover-shadow-color: var(--color-shadow);
  --hover-transition-duration: 0.25s;
  --hover-transition-timing: ease-out;
  --surface-transition-duration: 0.3s;
  --surface-transition-timing: var(--ease-out-quad);
}

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

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

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

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

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

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

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

.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,
.resource-card,
.predictive-search-results__card--product,
.predictive-search-results__card {
  position: relative;
  transition: transform var(--hover-transition-duration) var(--hover-transition-timing),
    box-shadow var(--hover-transition-duration) var(--hover-transition-timing);
  z-index: var(--layer-flat);
}

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

.product-card__content {
  position: relative;
}

.product-card__content {
  cursor: pointer;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

p:empty {
  display: none;
}

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

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

/* view transitions */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  /* Keep page interactive while view transitions are running */
  :root {
    view-transition-name: none;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  width: 100%;

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

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

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

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

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

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

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

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

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

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

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

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

  text-align: left;
}

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

  text-align: center;
}

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

  text-align: right;
}

.text-inherit {
  color: inherit;
}

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

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

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

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

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

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

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

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

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

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

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

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

.relative {
  position: relative;
}

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

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

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

.icon-default {
  fill: currentColor;
}

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

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

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

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

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

/* Typography presets */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Links */
a {
  --button-color: var(--color, var(--color-primary));

  color: var(--button-color);
  text-decoration-color: transparent;
  text-decoration-thickness: 0.075em;
  text-underline-offset: 0.125em;
  transition: text-decoration-color var(--animation-speed) var(--animation-easing),
    color var(--animation-speed) var(--animation-easing);
}

:is(h1, h2, h3, h4, h5, h6, p) > a:hover {
  --button-color: var(--color, var(--color-primary-hover));
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    footer {
      view-transition-name: footer;
    }

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

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

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

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

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

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

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

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

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

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

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

.text-block {
  width: 100%;
}

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

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

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

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

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

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

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

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

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

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

  &::backdrop {
    opacity: 0;
  }
}

/* stylelint-disable value-keyword-case */
.dialog-drawer {
  --dialog-drawer-opening-animation: 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-size: var(--font-paragraph--size);
  line-height: var(--font-paragraph--line-height);
  margin-block: 0;
  transition: color var(--animation-speed) var(--animation-easing),
    box-shadow var(--animation-speed) var(--animation-easing),
    background-color var(--animation-speed) var(--animation-easing);
  cursor: pointer;
  width: fit-content;
  box-shadow: inset 0 0 0 var(--button-border-width) var(--button-border-color);
  padding-block: var(--button-padding-block);
  padding-inline: var(--button-padding-inline);
}

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

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

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

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

textarea,
input {
  background-color: var(--color-input-background);
  border-color: var(--color-input-border);
}

textarea::placeholder,
input::placeholder {
  color: var(--color-input-text);
}

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

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

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

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

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

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

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

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

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

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

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

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

/* Show more */

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

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

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

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

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

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

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

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

/* Collapsible row */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  &[open] {
    opacity: 1;
  }

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

  &::backdrop {
    background: transparent;
  }
}

/* Animate the UI elements in only after the view transition is complete */
.close-button {
  position: fixed;
  top: var(--margin-lg);
  right: var(--margin-lg);
  width: var(--minimum-touch-target);
  height: var(--minimum-touch-target);
  z-index: var(--layer-flat);
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.button-shopify-xr > svg {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  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);
}

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

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

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

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

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

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

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

.card-gallery {
  position: relative;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.field__input:is(:focus, :hover) {
  box-shadow: var(--input-box-shadow-focus);
  background-color: var(--color-input-hover-background);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Fly to cart animation */
fly-to-cart {
  --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 (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);
  }
}

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

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

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

/* 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 (min-width: 750px) {
  .top-shadow--mobile::before {
    display: none;
  }
}

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

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

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

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

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

/*
 * Slideshow Component
 */
slideshow-component {
  --cursor: grab;
  --slide-offset: 6px;

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

slideshow-component.slideshow--content-below-media slideshow-slide {
  display: grid;
}

.slideshow--content-below-media slideshow-slide :is(.slide__image-container, .slide__content) {
  position: static;
}

.slideshow--content-below-media slideshow-slide {
  grid-template-rows: var(--grid-template-rows);

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

.slide__content {
  opacity: 0;
  animation: slide-reveal both linear;
  animation-timeline: var(--slideshow-timeline);

  @media (prefers-reduced-motion) {
    opacity: 1;
    animation: none;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  /* Make inactive slides appear clickable */
  &[aria-hidden='true'] {
    cursor: pointer;
  }
}

slideshow-slide .slide__image-container--rounded {
  border-radius: var(--corner-radius, 0);
}

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

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

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

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

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

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

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

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

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

  * {
    pointer-events: none;
  }
}

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

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

@media screen and (min-width: 750px) {
  .media-gallery--carousel slideshow-component:has(slideshow-controls[thumbnails]) {
    &:has(slideshow-controls[pagination-position='right']) {
      display: grid;
      grid-template:
        'container controls' auto
        'arrows controls' min-content
        / 1fr auto;
    }

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

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

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

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

  svg {
    display: none;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@keyframes slide-reveal {
  0% {
    translate: calc(var(--slideshow-slide-offset, 6) * 1rem) 0;
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    translate: calc(var(--slideshow-slide-offset, 6) * -1rem) 0;
    opacity: 0;
  }
}

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

.section-resource-list,
.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;
}

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

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

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

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

  width: 100%;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    /* Disable transitions when the content toggle is not caused by the direct user interaction, e.g. opening the filters on mobile. */
    &:not(:focus-within)::details-content,
    &:not(:focus-within) .details-content {
      transition: none;
    }

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

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

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

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

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

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

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

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

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

  &[shimmer] {
    color: transparent;

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

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

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

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

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

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

/* Global scrollbar styles */

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

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

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

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

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

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

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

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

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

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

.DT-English-Mega{
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 14px);
  z-index: 80;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  pointer-events: none;
}

.DT-English-Mega__inner{
  margin: 0 auto;
  max-width: 1320px;
  padding: 0 20px;
}

.DT-English-Mega__grid{
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  box-shadow: 0 18px 50px rgba(0,0,0,.12);
  padding: 18px;
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1100px){
  .DT-English-Mega__grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 900px){
  .DT-English-Mega{ display:none !important; } /* mobile uses drawer */
}

.DT-English-Mega__title{
  display: inline-block;
  font-weight: 900;
  letter-spacing: -.01em;
  text-decoration: none;
  color: rgba(16,17,20,.92);
  padding: 6px 0;
}

.DT-English-Mega__list{
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.DT-English-Mega__link{
  text-decoration: none;
  color: rgba(16,17,20,.72);
  font-size: 13px;
  line-height: 1.35;
  display: inline-flex;
  padding: 2px 0;
  transition: color .15s ease;
}

.DT-English-Mega__link:hover{
  color: rgba(16,17,20,.95);
}

.DT-English-NavItem.is-mega-open > .DT-English-Mega{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
/* =========================================================
   DT-English Mega Menu Skin (Horizon Mega Menu Engine)
   Targets only: Brands + Shop By Category
   ========================================================= */

:root{
  --DT-English-mega-radius: 18px;
  --DT-English-mega-border: rgba(0,0,0,.10);
  --DT-English-mega-shadow: 0 18px 45px rgba(0,0,0,.12);
  --DT-English-mega-title: rgba(16,17,20,.92);
  --DT-English-mega-link: rgba(16,17,20,.70);
  --DT-English-mega-link-hover: rgba(16,17,20,.95);
  --DT-English-mega-muted: rgba(16,17,20,.55);
}

/* make submenu feel “floating” & premium */
.DT-English-NavItem.is-dt-brands > .menu-list__submenu,
.DT-English-NavItem.is-dt-categories > .menu-list__submenu{
  background: transparent !important;
}

/* inner area spacing */
.DT-English-NavItem.is-dt-brands .menu-list__submenu-inner,
.DT-English-NavItem.is-dt-categories .menu-list__submenu-inner{
  padding-top: 22px !important;
  padding-bottom: 24px !important;
}

/* the actual mega “card” */
.DT-English-NavItem.is-dt-brands .mega-menu__grid,
.DT-English-NavItem.is-dt-categories .mega-menu__grid{
  border-radius: var(--DT-English-mega-radius);
  border: 1px solid var(--DT-English-mega-border);
  background: #fff;
  box-shadow: var(--DT-English-mega-shadow);
  padding: 18px;
  gap: 18px 18px;
}

/* reduce huge spacing Horizon uses sometimes */
.DT-English-NavItem.is-dt-brands .mega-menu.section,
.DT-English-NavItem.is-dt-categories .mega-menu.section{
  margin: 0 !important;
  padding: 0 !important;
}

/* column structure: make it feel organized */
.DT-English-NavItem.is-dt-brands .mega-menu__column,
.DT-English-NavItem.is-dt-categories .mega-menu__column{
  min-width: 0;
}

/* Parent link (category/brand title) */
.DT-English-NavItem.is-dt-brands .mega-menu__link--parent,
.DT-English-NavItem.is-dt-categories .mega-menu__link--parent{
  font-weight: 900;
  letter-spacing: -.01em;
  color: var(--DT-English-mega-title);
  padding: 6px 0 8px !important;
  text-transform: none !important;
}

/* Child links */
.DT-English-NavItem.is-dt-brands .mega-menu__link:not(.mega-menu__link--parent),
.DT-English-NavItem.is-dt-categories .mega-menu__link:not(.mega-menu__link--parent){
  font-size: 13px;
  color: var(--DT-English-mega-link);
  padding: 4px 0 !important;
  line-height: 1.35;
  text-transform: none !important;
}

/* hover */
.DT-English-NavItem.is-dt-brands .mega-menu__link:hover,
.DT-English-NavItem.is-dt-categories .mega-menu__link:hover{
  color: var(--DT-English-mega-link-hover) !important;
}

/* subtle divider between columns (optional premium look) */
@media (min-width: 990px){
  .DT-English-NavItem.is-dt-brands .mega-menu__column,
  .DT-English-NavItem.is-dt-categories .mega-menu__column{
    position: relative;
    padding-right: 10px;
  }
  .DT-English-NavItem.is-dt-brands .mega-menu__column::after,
  .DT-English-NavItem.is-dt-categories .mega-menu__column::after{
    content: "";
    position: absolute;
    top: 10px;
    bottom: 10px;
    right: 0;
    width: 1px;
    background: rgba(0,0,0,.06);
  }
  .DT-English-NavItem.is-dt-brands .mega-menu__column:last-child::after,
  .DT-English-NavItem.is-dt-categories .mega-menu__column:last-child::after{
    display: none;
  }
}

/* refine collection-images mode tiles (if your menu_style is collection_images) */
.DT-English-NavItem.is-dt-brands .mega-menu__link-image,
.DT-English-NavItem.is-dt-categories .mega-menu__link-image{
  border-radius: 14px !important;
}

/* top-level nav polish (optional) */
.DT-English-NavItem.is-dt-brands > .menu-list__link .menu-list__link-title,
.DT-English-NavItem.is-dt-categories > .menu-list__link .menu-list__link-title{
  letter-spacing: .02em;
}

/* compact mega on smaller desktop */
@media (max-width: 1200px){
  .DT-English-NavItem.is-dt-brands .mega-menu__grid,
  .DT-English-NavItem.is-dt-categories .mega-menu__grid{
    padding: 16px;
    gap: 14px;
  }
}

/* IMPORTANT: keep mobile untouched */
@media (max-width: 989px){
  .DT-English-NavItem.is-dt-brands .mega-menu__grid,
  .DT-English-NavItem.is-dt-categories .mega-menu__grid{
    box-shadow: none;
    border-radius: 0;
    border: 0;
    padding: 0;
  }
}
@media (min-width: 990px){
  .DT-English-NavItem.is-dt-brands .mega-menu.section,
  .DT-English-NavItem.is-dt-categories .mega-menu.section{
    max-width: 1320px;
    margin: 0 auto !important;
  }

  .DT-English-NavItem.is-dt-brands .menu-list__submenu-inner,
  .DT-English-NavItem.is-dt-categories .menu-list__submenu-inner{
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}
/* STOP MOBILE SCROLL JUMP */
.full-height,
.hero,
.slideshow,
.banner,
.video-hero,
.section--full-height {
  min-height: calc(var(--vh) * 100) !important;
}

/* PREVENT HEADER PUSH */
.shopify-section-header,
.header {
  will-change: transform;
}
/* =========================================================
   DT COLLECTION PRODUCT GRID – PREMIUM UI (FINAL)
   EnglishCares: product-grid__item + product-card + quick-add
========================================================= */

/* Card outer */
.product-grid__item .product-card{
  border: 1px solid rgba(0,0,0,.10) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: #fff !important;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease !important;
}

/* Hover */
.product-grid__item .product-card:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.10) !important;
  border-color: rgba(0,0,0,.14) !important;
}

/* Gallery/media should respect rounded corners */
.product-grid__item .card-gallery,
.product-grid__item .product-card__content{
  border-radius: 18px !important;
}

/* ---------------------------------------------------------
   Spacing: stop squeeze, add premium breathing space
--------------------------------------------------------- */
.product-grid__item .product-grid-view-zoom-out--details,
.product-grid__item .text-block,
.product-grid__item product-price,
.product-grid__item .buy-buttons-block,
.product-grid__item .product-form-buttons{
  padding-left: 14px !important;
  padding-right: 14px !important;
}

.product-grid__item .product-form-buttons{
  padding-top: 10px !important;
  padding-bottom: 14px !important;
}

/* ---------------------------------------------------------
   Title + price (safe selectors for dynamic class names)
--------------------------------------------------------- */
.product-grid__item .product-grid-view-zoom-out--details h3,
.product-grid__item [class*="__product_title_"] p{
  margin: 0 !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.25 !important;
}

.product-grid__item product-price .price{
  display: inline-block !important;
  margin-top: 6px !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em !important;
}

/* ---------------------------------------------------------
   Quantity selector (premium)
--------------------------------------------------------- */
.product-grid__item .quantity-selector{
  border-radius: 14px !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  background: #fff !important;
  overflow: hidden !important;
}
.product-grid__item .quantity-selector input{
  font-weight: 800 !important;
}

/* ---------------------------------------------------------
   Main Add to cart button (outline premium)
--------------------------------------------------------- */
.product-grid__item .add-to-cart-button{
  width: 100% !important;
  border-radius: 999px !important;
  min-height: 48px !important;
  font-weight: 900 !important;
  letter-spacing: .01em !important;
  border: 1.5px solid rgba(0,0,0,.20) !important;
  background: #fff !important;
}

.product-grid__item .add-to-cart-button:hover{
  border-color: rgba(0,0,0,.30) !important;
  background: rgba(0,0,0,.02) !important;
}

/* ---------------------------------------------------------
   Quick Add (the “Add” that appears on hover) – fix bad look
--------------------------------------------------------- */
.product-grid__item .quick-add{
  padding: 10px !important; /* stops edge-touching */
}

.product-grid__item .quick-add__button{
  width: 100% !important;
  border-radius: 999px !important;
  min-height: 44px !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  background: #fff !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.08) !important;
  font-weight: 900 !important;
}

.product-grid__item .quick-add__button:hover{
  border-color: rgba(0,0,0,.18) !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.12) !important;
}

/* ---------------------------------------------------------
   Layout breathing (prevents cramped content feel)
--------------------------------------------------------- */
.product-grid__item .product-card__content{
  gap: 10px !important;
}

/* Mobile polish */
@media(max-width: 768px){
  .product-grid__item .product-card,
  .product-grid__item .card-gallery,
  .product-grid__item .product-card__content{
    border-radius: 16px !important;
  }

  .product-grid__item .product-grid-view-zoom-out--details,
  .product-grid__item .text-block,
  .product-grid__item product-price,
  .product-grid__item .buy-buttons-block,
  .product-grid__item .product-form-buttons{
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
}
/* =========================================================
   DT – Premium Collection Card CTA (Qty + Add to cart + Quick Add)
   Works with your markup: .product-grid__item .add-to-cart-button
   and .quantity-selector-component / .quick-add__button
========================================================= */

/* ---------- 1) Layout spacing so title/price not squeezed ---------- */
.product-grid__item .product-grid-view-zoom-out--details,
.product-grid__item .text-block,
.product-grid__item product-price,
.product-grid__item .buy-buttons-block,
.product-grid__item .product-form-buttons{
  padding-left: 16px !important;
  padding-right: 16px !important;
}

.product-grid__item .product-form-buttons{
  padding-top: 12px !important;
  padding-bottom: 16px !important;
}

/* ---------- 2) Card polish ---------- */
.product-grid__item .product-card{
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}

.product-grid__item .product-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(0,0,0,.10);
  border-color: rgba(0,0,0,.16);
}

/* ---------- 3) Title + price premium typography ---------- */
.product-grid__item .text-block p{
  margin: 0 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
  font-weight: 800 !important;
}

.product-grid__item .price{
  display: inline-block;
  margin-top: 6px;
  font-weight: 900 !important;
  letter-spacing: -0.01em !important;
}

/* ---------- 4) Qty selector = sleek pill ---------- */
.product-grid__item .quantity-selector-wrapper{
  margin-bottom: 12px !important;
}

.product-grid__item quantity-selector-component.quantity-selector{
  width: 100%;
  border-radius: 999px !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  background: #fff !important;
  overflow: hidden;
  min-height: 44px;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
}

.product-grid__item .quantity-selector button{
  width: 44px !important;
  height: 44px !important;
  display: grid;
  place-items: center;
  opacity: .85;
}

.product-grid__item .quantity-selector button:hover{
  opacity: 1;
  background: rgba(0,0,0,.03);
}

.product-grid__item .quantity-selector input{
  height: 44px !important;
  border: 0 !important;
  background: transparent !important;
  text-align: center !important;
  font-weight: 900 !important;
  outline: none !important;
}

/* ---------- 5) Main Add to cart = premium filled button ---------- */
.product-grid__item .add-to-cart-button.button-secondary{
  width: 100% !important;
  min-height: 48px !important;
  border-radius: 999px !important;

  /* premium feel */
  border: 1px solid rgba(0,0,0,.12) !important;
  background: rgba(16,17,20,.96) !important;
  color: #fff !important;

  font-weight: 900 !important;
  letter-spacing: .01em !important;
}

.product-grid__item .add-to-cart-button.button-secondary:hover{
  background: rgba(16,17,20,1) !important;
  border-color: rgba(0,0,0,.16) !important;
  transform: translateY(-1px);
}

.product-grid__item .add-to-cart-button .add-to-cart-icon{
  opacity: .95;
}

/* ---------- 6) QUICK ADD "Add" bar on image = smaller, not full ugly wide ---------- */
/* Your quick add button has both classes: .quick-add__button and .add-to-cart-button */
.product-grid__item .quick-add{
  padding: 10px !important; /* keeps it off edges */
}

/* Make the hover bar compact and premium */
.product-grid__item .quick-add__button.quick-add__button--add.add-to-cart-button{
  width: auto !important;
  max-width: 160px;
  min-height: 40px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;

  border: 1px solid rgba(0,0,0,.10) !important;
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 24px rgba(0,0,0,.10) !important;

  font-weight: 900 !important;
  color: rgba(16,17,20,.92) !important;
}

/* Keep it aligned left, not stretched */
.product-grid__item .quick-add__button.quick-add__button--add.add-to-cart-button{
  justify-content: center;
  margin-left: 10px;
  margin-right: auto;
}

/* Hover polish */
.product-grid__item .quick-add__button.quick-add__button--add.add-to-cart-button:hover{
  background: #fff !important;
  border-color: rgba(0,0,0,.16) !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.14) !important;
}

/* If theme hides quick add on some widths, force show only on desktop hover */
@media (min-width: 990px){
  .product-grid__item .quick-add{
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .18s ease, transform .18s ease;
  }
  .product-grid__item:hover .quick-add{
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobile: don’t show the hover bar (mobile has no hover) */
@media (max-width: 989px){
  .product-grid__item .quick-add{
    display: none !important;
  }
}

/* ---------- 7) Mobile fine tuning ---------- */
@media (max-width: 768px){
  .product-grid__item .product-grid-view-zoom-out--details,
  .product-grid__item .text-block,
  .product-grid__item product-price,
  .product-grid__item .buy-buttons-block,
  .product-grid__item .product-form-buttons{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .product-grid__item .product-card{
    border-radius: 16px;
  }
}
/* =========================================================
   DT – MOBILE PREMIUM FIX (Collection grid)
   Fix: ugly tall buttons, "Add to cart" wraps, spacing
========================================================= */
@media (max-width: 768px){

  /* Make card content tighter */
  .product-grid__item .product-form-buttons{
    padding-top: 10px !important;
    padding-bottom: 12px !important;
  }

  /* --- Qty selector: compact + premium --- */
  .product-grid__item quantity-selector-component.quantity-selector{
    min-height: 40px !important;
    grid-template-columns: 40px 1fr 40px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(0,0,0,.12) !important;
  }
  .product-grid__item .quantity-selector button{
    width: 40px !important;
    height: 40px !important;
  }
  .product-grid__item .quantity-selector input{
    height: 40px !important;
    font-size: 14px !important;
  }

  /* --- Add to cart button: force SINGLE LINE + smaller height --- */
  .product-grid__item .add-to-cart-button.button-secondary{
    min-height: 40px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    letter-spacing: 0 !important;
  }

  /* Prevent "Add to cart" from breaking into 2 lines */
  .product-grid__item .add-to-cart-button .add-to-cart-text__content,
  .product-grid__item .add-to-cart-button .add-to-cart-text__content span,
  .product-grid__item .add-to-cart-button .add-to-cart-text{
    white-space: nowrap !important;
  }

  /* Icon smaller so it doesn't push text down */
  .product-grid__item .add-to-cart-button .add-to-cart-icon{
    transform: scale(.9);
    margin-right: 6px;
  }

  /* If your theme forces line-height weirdly */
  .product-grid__item .add-to-cart-button{
    line-height: 1 !important;
  }

  /* Reduce extra gaps under price/title */
  .product-grid__item product-price{
    margin-top: 2px !important;
  }
}
/* === English Cares — Mobile Bottom Nav (FLUSH + SLEEK) === */
:root{
  --ec-nav-h: 62px;
  --ec-nav-bg: #ffffff;               /* bar color (change if needed) */
  --ec-nav-text: #6b7280;
  --ec-nav-text-active: #e91e63;      /* pink accent */
  --ec-divider: rgba(17,24,39,.10);   /* sleek divider */
  --ec-press: rgba(233,30,99,.10);    /* soft tap/active wash */
}

/* Bar flush to bottom (NO GAP) */
.ec-bottom-nav{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  z-index: 999999;

  background: var(--ec-nav-bg);
  border-top: 1px solid rgba(17,24,39,.10);
  box-shadow: 0 -10px 22px rgba(0,0,0,.10);
}

/* Layout */
.ec-bottom-nav__wrap{
  height: calc(var(--ec-nav-h) + env(safe-area-inset-bottom));
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  padding-bottom: env(safe-area-inset-bottom);
}

/* Each item (NO white boxes) */
.ec-bottom-nav a{
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: var(--ec-nav-text);

  display: grid;
  place-items: center;
  gap: 4px;

  /* same background as bar */
  background: transparent;
  border: 0;
  border-radius: 0;

  /* tap area */
  padding: 10px 6px;

  /* soft fade animation */
  transition: background-color .18s ease, color .18s ease, transform .12s ease;
  position: relative;
}

/* Sleek vertical divider between items */
.ec-bottom-nav a + a::before{
  content:"";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: var(--ec-divider);
}

/* Icon + label */
.ec-bottom-nav svg{
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ec-bottom-nav a p{
  margin: 0;
  font-size: 11px;
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: .1px;
}

/* Soft press / fade on click */
.ec-bottom-nav a:active{
  background: rgba(0,0,0,.03);
  transform: translateY(1px);
}

/* Active tab look (soft pink wash, NOT a box) */
.ec-bottom-nav a.active{
  color: var(--ec-nav-text-active);
  background: var(--ec-press);
}

/* Optional: tiny top indicator line for active */
.ec-bottom-nav a.active::after{
  content:"";
  position: absolute;
  top: 0;
  left: 18%;
  right: 18%;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
  opacity: .85;
}

/* Reserve space so content doesn't go behind bar */
@media (max-width: 989px){
  body{
    padding-bottom: calc(var(--ec-nav-h) + env(safe-area-inset-bottom)) !important;
  }
}

@media (min-width: 990px){
  .ec-bottom-nav{ display:none !important; }
}
/* === English Cares — Back to Top === */
:root{
  --ec-accent: #e91e63;
}

#ec-back-to-top{
  position: fixed;
  right: 16px;
  bottom: 90px; /* clears mobile bottom nav */
  z-index: 999999;

  width: 44px;
  height: 44px;
  border-radius: 14px;

  background: rgba(255,255,255,.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 12px 28px rgba(0,0,0,.18);

  display: grid;
  place-items: center;

  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px) scale(.95);

  transition:
    opacity .25s ease,
    transform .25s ease,
    background .2s ease,
    box-shadow .2s ease;
}

/* Visible state */
#ec-back-to-top.is-visible{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

/* Icon */
#ec-back-to-top svg{
  width: 20px;
  height: 20px;
  stroke: #9ca3af; /* soft modern grey */
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .15s ease;
}
#ec-back-to-top:active svg{
  stroke: #111111; /* black on click */
}

/* Hover (desktop) */
@media (hover:hover){
  #ec-back-to-top:hover{
    background: rgba(233,30,99,.08);
    box-shadow: 0 16px 34px rgba(233,30,99,.25);
  }
}

/* Press (mobile + desktop) */
#ec-back-to-top:active{
  transform: scale(.96);
}

/* Desktop positioning tweak */
@media (min-width: 990px){
  #ec-back-to-top{
    bottom: 24px;
  }
}
@media (hover:hover){
  #ec-back-to-top:hover svg{
    stroke: #4b5563;
  }
}
/* === English Cares Floating Social Dock (FINAL) === */
:root{
  --ec-dock-x: 16px;
  --ec-dock-y: 120px;
  --ec-btn-h: 44px;
  --ec-gap: 10px;
  --ec-radius: 14px;
  --ec-bg: rgba(255,255,255,.95);
  --ec-border: rgba(17,24,39,.12);
  --ec-shadow: 0 14px 34px rgba(0,0,0,.18);
  --ec-text: #111827;
}

/* Dock */
.ec-social-dock{
  position: fixed;
  right: var(--ec-dock-x);
  bottom: var(--ec-dock-y);
  z-index: 999999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--ec-gap);
}

/* Buttons */
.ec-social-btn{
  height: var(--ec-btn-h);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border-radius: var(--ec-radius);
  background: var(--ec-bg);
  border: 1px solid var(--ec-border);
  box-shadow: var(--ec-shadow);
  color: var(--ec-text);
  text-decoration: none;
  backdrop-filter: blur(10px);
  transition: transform .15s ease, box-shadow .15s ease;
}

.ec-social-btn svg{
  width: 20px;
  height: 20px;
  stroke: #6b7280;
  fill: none;
  stroke-width: 1.8;
}

.ec-social-btn span{
  font-size: 13px;
  font-weight: 600;
}

.ec-social-btn:active{
  transform: translateY(1px) scale(.98);
}

/* Toggle */
.ec-social-toggle{
  width: var(--ec-btn-h);
  height: var(--ec-btn-h);
  border-radius: var(--ec-radius);
  background: var(--ec-bg);
  border: 1px solid var(--ec-border);
  box-shadow: var(--ec-shadow);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.ec-social-toggle svg{
  width: 18px;
  height: 18px;
  stroke: #6b7280;
  stroke-width: 2;
}

/* + / - logic */
.ec-toggle-h{ display: block; }
.ec-toggle-v{ display: none; }

.ec-social-dock.is-collapsed .ec-toggle-v{ display: block; }
.ec-social-dock.is-collapsed .ec-toggle-h{ display: block; }

.ec-social-dock.is-collapsed .ec-social-btn{
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
}

/* Back to top */
#ec-back-to-top{
  position: fixed;
  right: 16px;
  bottom: 60px;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}

#ec-back-to-top.is-visible{
  opacity: 1;
  pointer-events: auto;
}

#ec-back-to-top svg{
  width: 20px;
  height: 20px;
  stroke: #9ca3af;
  stroke-width: 2;
}

#ec-back-to-top:active svg{
  stroke: #111;
}

/* Mobile = SAME AS DESKTOP */
@media (max-width: 989px){
  .ec-social-dock{
    right: 16px;
    bottom: 140px;
  }
  #ec-back-to-top{
    bottom: 90px;
  }
}
/* =========================================================
   DT — EnglishCares Product Cards (TRUE Premium / Compact)
   CSS-only (no cart logic touched)
   Goals:
   - Compact card height
   - Light border, premium spacing
   - Price centered on desktop
   - Qty: no circles, flat +/- with hover feel
   - Add to cart: slim, slight curve (not pill)
   - Mobile: give left/right breathing space (not squeezed)
========================================================= */

/* ---------- MOBILE GRID BREATHING SPACE (fix squeezed tiles) ---------- */
@media (max-width: 749px){
  /* most Shopify themes wrap collection grid in these */
  .collection-wrapper,
  .product-grid-container,
  .results-list,
  .section.product-grid-container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* if grid is too tight */
  .product-grid,
  .collection-products,
  .grid.product-grid {
    gap: 12px !important;
  }
}

/* ---------- CARD: lighter border + compact spacing ---------- */
product-card .product-card__content.product-grid__card,
.product-card .product-card__content.product-grid__card,
.product-card__content.product-grid__card{
  border-radius: 14px !important;
  border: 1px solid rgba(0,0,0,.06) !important; /* lighter */
  background: #fff !important;
  padding: 12px 12px 10px !important;          /* compact */
  gap: 8px !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.04) !important; /* subtle */
}

/* Optional: slightly premium hover without “fat card” look */
@media (hover:hover){
  product-card .product-card__content.product-grid__card:hover,
  .product-card .product-card__content.product-grid__card:hover{
    box-shadow: 0 10px 26px rgba(0,0,0,.06) !important;
    border-color: rgba(0,0,0,.08) !important;
    transform: translateY(-1px);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  }
}

/* ---------- IMAGE AREA: remove extra “air” ---------- */
.product-card .card-gallery,
.product-card .product-card__media,
.product-card .product-media{
  margin: 0 !important;
  padding: 0 !important;
}

.product-card .product-media{
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* keep image neat */
.product-card img,
.product-card .product-media__image{
  object-fit: contain !important;
}

/* ---------- TITLE: centered + compact ---------- */
.product-card a[ref="productTitleLink"],
.product-card .card__heading,
.product-card .product-card__title{
  display: block !important;
  text-align: center !important;
  margin: 6px 0 0 !important;
}

.product-card a[ref="productTitleLink"] .text-block p{
  margin: 0 !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  letter-spacing: .15px !important;
}

/* ---------- PRICE: CENTERED ON DESKTOP + MOBILE ---------- */
.product-card product-price,
.product-card .price,
.product-card .product-card__price{
  width: 100% !important;
  text-align: center !important;
  justify-content: center !important;
}

.product-card product-price .price{
  display: inline-block !important;
  margin: 2px 0 6px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
}

/* ---------- BUTTON AREA: remove big padding that makes cards tall ---------- */
.product-card .buy-buttons-block .product-form-buttons{
  padding: 6px 0 0 !important;
  margin: 0 !important;
  gap: 8px !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

/* ---------- QTY: flat +/- (no circles), premium hover ---------- */
.product-card .buy-buttons-block .quantity-selector-wrapper{
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  margin: 0 !important;
}

.product-card .buy-buttons-block .quantity-selector{
  width: 100% !important;
  max-width: 170px !important;
  height: 38px !important;
  border-radius: 10px !important;                 /* slight curve */
  border: 1px solid rgba(0,0,0,.08) !important;   /* very light */
  overflow: hidden !important;
  background: #fff !important;
  box-shadow: none !important;
}

/* remove “circle feel”: make buttons flat areas */
.product-card .buy-buttons-block .quantity-selector button{
  width: 44px !important;
  height: 38px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(0,0,0,.65) !important;
  transition: background .15s ease, color .15s ease;
}

/* premium hover/active feedback */
@media (hover:hover){
  .product-card .buy-buttons-block .quantity-selector button:hover{
    background: rgba(0,0,0,.05) !important;
    color: #111 !important;
  }
}
.product-card .buy-buttons-block .quantity-selector button:active{
  background: rgba(0,0,0,.08) !important;
  color: #111 !important;
}

.product-card .buy-buttons-block .quantity-selector input{
  width: 56px !important;
  height: 38px !important;
  border: 0 !important;
  background: #fff !important;
  text-align: center !important;
  font-weight: 700 !important;
  color: #111 !important;
}

/* ---------- ADD TO CART: slim + slight curve (NOT pill) ---------- */
.product-card .buy-buttons-block .add-to-cart-button{
  width: 100% !important;
  max-width: 220px !important;
  height: 40px !important;         /* slim */
  min-height: 40px !important;
  padding: 0 14px !important;
  border-radius: 12px !important;  /* slight curve */
  font-weight: 600 !important;
  letter-spacing: .15px !important;
  text-transform: none !important;
  box-shadow: none !important;
}

/* if theme uses button-secondary on card */
.product-card .buy-buttons-block .add-to-cart-button.button-secondary{
  background: #ffffff !important;
  color: #111 !important;
  border: 1px solid rgba(0,0,0,.10) !important;
}

/* hover -> premium dark */
@media (hover:hover){
  .product-card .buy-buttons-block .add-to-cart-button.button-secondary:hover{
    background: #111 !important;
    color: #fff !important;
    border-color: #111 !important;
    transform: translateY(-1px);
    transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
  }
}

/* ---------- DESKTOP: keep cards compact but not tiny ---------- */
@media (min-width: 990px){
  product-card .product-card__content.product-grid__card,
  .product-card .product-card__content.product-grid__card{
    padding: 14px 14px 12px !important;
    gap: 9px !important;
  }
}
/* === FIX: FORCE PRODUCT TITLE TRUE CENTER (English Cares theme) === */

/* Make title wrapper full width and centered */
.product-card a[ref="productTitleLink"]{
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  text-align: center !important;
}

/* Kill inherited width constraints from theme */
.product-card a[ref="productTitleLink"] .text-block{
  width: 100% !important;
  max-width: 100% !important;
  text-align: center !important;
}

/* Center actual text */
.product-card a[ref="productTitleLink"] .text-block p{
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* === English Cares: Product title refinement (regular + smaller) === */

/* Product title: regular weight, slightly smaller */
.product-card a[ref="productTitleLink"] .text-block p{
  font-weight: 300 !important;      /* regular (not bold) */
  font-size: 12px !important;       /* desktop (2px smaller) */
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}

/* Mobile: even tighter & cleaner */
@media (max-width: 749px){
  .product-card a[ref="productTitleLink"] .text-block p{
    font-size: 10px !important;     /* mobile smaller */
    line-height: 1.20 !important;
  }
}

/* =========================================================
   DT — EnglishCares: MOBILE Compact Cards + Perfect Centering
   Fixes:
   ✅ Cards too tall (kills extra padding + clamps title + tight media)
   ✅ Qty selector centered
   ✅ Add to cart text/icon centered
   ✅ Adds side spacing so grid isn’t squeezed to the wall
   ========================================================= */

@media (max-width: 749px){

  /* 1) Give the whole collection area some breathing room */
  .collection-wrapper,
  .product-grid-container,
  .product-grid {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }

  /* 2) Card itself: remove extra bottom air */
  .product-card .product-card__content.product-grid__card{
    padding: 10px 10px 10px !important;
    gap: 8px !important;
  }

  /* 3) Media area is the MAIN reason cards look tall — tighten it */
  .product-card .product-card__media,
  .product-card .product-card__image,
  .product-card .product-card__media-wrapper,
  .product-card .card-gallery{
    margin: 0 !important;
    padding: 0 !important;
  }

  /* If theme forces a min-height on media wrapper, kill it */
  .product-card .product-card__media-wrapper{
    min-height: 0 !important;
    height: auto !important;
  }

  /* 4) Title: clamp to 2 lines so it never stretches cards */
  .product-card a[ref="productTitleLink"] .text-block p{
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    margin: 6px 0 0 !important;
    text-align: center !important;

    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  /* 5) Price centered + tighter */
  .product-card product-price,
  .product-card product-price .price{
    display: block !important;
    text-align: center !important;
    margin: 2px 0 6px !important;
  }

  /* 6) Buttons wrapper: remove theme padding that adds height */
  .product-card .buy-buttons-block .product-form-buttons{
    padding: 4px 0 0 !important;
    margin: 0 !important;
    gap: 8px !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* 7) Qty selector: perfectly centered (no floating) */
  .product-card .buy-buttons-block .quantity-selector-wrapper{
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    margin: 0 !important;
  }
  .product-card .buy-buttons-block .quantity-selector{
    width: 100% !important;
    max-width: 160px !important;
    margin: 0 auto !important;
  }

  /* 8) Add to cart button: center icon + text properly */
  .product-card .buy-buttons-block .add-to-cart-button{
    width: 100% !important;
    max-width: 220px !important;
    margin: 0 auto !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;  /* <-- fixes alignment */
    gap: 8px !important;

    text-align: center !important;
    padding: 8px 14px !important;       /* slimmer */
    min-height: 40px !important;        /* slimmer */
    border-radius: 12px !important;     /* slight curve, not pill */
    line-height: 1 !important;
  }

  /* Some themes wrap text inside spans */
  .product-card .buy-buttons-block .add-to-cart-button span,
  .product-card .buy-buttons-block .add-to-cart-button .text,
  .product-card .buy-buttons-block .add-to-cart-button .button-text{
    display: inline-block !important;
    text-align: center !important;
  }

  /* 9) Remove any extra bottom spacing blocks inside card */
  .product-card .buy-buttons-block,
  .product-card .product-card__content > :last-child{
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
}
/* =========================================================
   DT — EnglishCares MOBILE: Make tiles wider (less tall)
   ========================================================= */
@media (max-width: 749px){

  /* A) Kill the huge left/right “page width” gutters */
  .page-width,
  .collection-wrapper,
  .product-grid-container,
  .collection,
  .main-content {
    max-width: 100% !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* Some themes add extra padding on inner wrappers */
  .product-grid-container .collection-wrapper,
  .product-grid-container .page-width {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* B) Force grid to use 2 wider columns + tighter gap */
  .product-grid,
  .collection-wrapper .product-grid,
  .product-grid-container .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  /* C) BIG FIX for “tall”: your image box is likely reserving a square height.
        Make it shorter (wider look) */
  .product-card .product-card__media-wrapper,
  .product-card .product-card__media,
  .product-card .product-card__image,
  .product-card .card-gallery {
    aspect-ratio: 4 / 3 !important;   /* less tall than 1/1 */
    height: auto !important;
    min-height: 0 !important;
  }

  /* Keep image nicely contained */
  .product-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }
}
/* ================================
   DT — Product: Ask Question + Wishlist row (Butterfly-like)
================================ */
.dt-action-links{
  display:flex;
  align-items:center;
  gap:18px;
  margin:12px 0 10px;
  flex-wrap:wrap;
}

.dt-action-links a,
.dt-action-links button{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 0;
  font-size:13px;
  line-height:1.2;
  color:rgba(0,0,0,.70);
  text-decoration:none;
  background:transparent;
  border:0;
  cursor:pointer;
}

.dt-action-links a:hover,
.dt-action-links button:hover{
  color:rgba(0,0,0,.90);
  text-decoration:underline;
}

.dt-action-links .dt-ico{
  width:18px;
  height:18px;
  display:inline-block;
  flex:0 0 auto;
}

@media(max-width:749px){
  .dt-action-links{ gap:14px; margin:10px 0 8px; }
}
/* ======================================================
  DT FIX — Tablet / Mobile Landscape (width >= 750px)
  Keeps Qty + Add to cart centered like mobile portrait
====================================================== */

@media (min-width: 750px) and (max-width: 990px) {

  /* Keep card content layout clean */
  .dt-ec-card .product-grid__card{
    display: flex !important;
    flex-direction: column !important;
  }

  /* Center only the lower action area (qty + button) */
  .dt-ec-card .quick-add,
  .dt-ec-card .quick-add__content,
  .dt-ec-card .product-card__actions,
  .dt-ec-card .product-card__footer{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
  }

  /* Qty selector centered */
  .dt-ec-card .quantity-selector,
  .dt-ec-card quantity-selector,
  .dt-ec-card .quantity{
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
  }

  /* Add to cart centered */
  .dt-ec-card add-to-cart-component{
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }

  .dt-ec-card add-to-cart-component > button,
  .dt-ec-card button[name="add"]{
    width: 100% !important;
    max-width: 260px !important;  /* keeps it premium, not too wide */
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
/* =========================================================
   DT FIX — UNBLOCK FLOATING BUTTONS / BACK TO TOP
   Prevent hidden overlays/dialogs from catching clicks.
========================================================= */

/* 1) If a dialog is NOT open, it must NOT capture clicks */
cart-drawer-component dialog:not([open]),
cart-drawer-component dialog:not([open]) * {
  pointer-events: none !important;
}

/* 2) When dialog IS open, allow clicks normally */
cart-drawer-component dialog[open],
cart-drawer-component dialog[open] * {
  pointer-events: auto !important;
}

/* 3) Your custom menu overlay should not catch clicks when hidden */
.dt-ec__drawer[aria-hidden="true"] {
  pointer-events: none !important;
}
.dt-ec__drawer[aria-hidden="false"] {
  pointer-events: auto !important;
}
/* =========================================================
   DT FIX — FLOATING WIDGETS ALWAYS ON TOP
========================================================= */

#back-to-top,
#backtotop,
.back-to-top,
.backtotop,
.scroll-to-top,
.scrolltop,
.scroll-top,
.go-top,
.to-top,
[data-back-to-top],
[data-scroll-top],
[data-go-top],

.social-float,
.social-floating,
.floating-social,
.float-social,
.sticky-social,
[data-social-float],
[data-floating-social]{
  position: fixed !important;
  z-index: 2147483647 !important; /* max safe z-index */
  pointer-events: auto !important;
}
/* ======================================================
  DT FIX — Qty selector number ALWAYS perfectly centered
  Works across ALL breakpoints (mobile/landscape/tablet/desktop)
====================================================== */

/* The selector element shown in your screenshot */
quantity-selector-component.quantity-selector,
.quantity-selector-component.quantity-selector,
.quantity-selector {
  display: grid !important;
  grid-template-columns: 44px minmax(44px, 1fr) 44px !important; /* -  input  + */
  align-items: center !important;
}

/* Center the number field perfectly */
quantity-selector-component.quantity-selector input[type="number"],
.quantity-selector input[type="number"] {
  height: 38px !important;            /* keep consistent */
  line-height: 38px !important;       /* KEY for vertical centering */
  padding: 0 !important;              /* remove offset */
  margin: 0 !important;
  text-align: center !important;
  justify-self: stretch !important;
  align-self: center !important;
  display: grid !important;
  place-items: center !important;     /* centers content */
  -webkit-appearance: none !important;
  appearance: textfield !important;
}

/* Make +/- buttons always same height and centered */
quantity-selector-component.quantity-selector button,
.quantity-selector button {
  height: 38px !important;
  width: 44px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
}

/* Remove default number spinners alignment issues */
.quantity-selector input[type="number"]::-webkit-outer-spin-button,
.quantity-selector input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}
/* =========================================
   Social Dock – Hover/Focus + Tap Feedback
   (Restores FB/IG/WA brand hover colors)
========================================= */

/* Desktop hover + keyboard focus */
@media (hover: hover) and (pointer: fine){
  .ec-social-btn.ec-social-wa:hover,
  .ec-social-btn.ec-social-wa:focus-visible{
    background:#25D366 !important;
    color:#fff !important;
    border-color: transparent !important;
  }

  .ec-social-btn.ec-social-ig:hover,
  .ec-social-btn.ec-social-ig:focus-visible{
    background:#E1306C !important;
    color:#fff !important;
    border-color: transparent !important;
  }

  .ec-social-btn.ec-social-fb:hover,
  .ec-social-btn.ec-social-fb:focus-visible{
    background:#1877F2 !important;
    color:#fff !important;
    border-color: transparent !important;
  }

  .ec-social-btn.ec-social-wa:hover svg,
  .ec-social-btn.ec-social-wa:focus-visible svg,
  .ec-social-btn.ec-social-ig:hover svg,
  .ec-social-btn.ec-social-ig:focus-visible svg,
  .ec-social-btn.ec-social-fb:hover svg,
  .ec-social-btn.ec-social-fb:focus-visible svg{
    stroke:#fff !important;
    fill:none !important;
  }
}

/* Keep your existing "pressed" state working too */
.ec-social-btn.is-press{
  color:#fff !important;
  border-color: transparent !important;
}
.ec-social-btn.ec-social-wa.is-press{ background:#25D366 !important; }
.ec-social-btn.ec-social-ig.is-press{ background:#E1306C !important; }
.ec-social-btn.ec-social-fb.is-press{ background:#1877F2 !important; }
.ec-social-btn.is-press svg{ stroke:#fff !important; }
/* Remove weird hover overlay / quick-add icon on product images */
product-recommendations .quick-add,
product-recommendations .quick-add__submit,
product-recommendations .quick-add-modal-opener,
product-recommendations .product-card__quick-add,
product-recommendations .card__content .quick-add,
product-recommendations .card__media .quick-add,
product-recommendations .card__media .quick-add-modal-opener{
  display: none !important;
}
/* ===============================
   Social hover colors (restored)
================================ */
.ec-social-btn.ec-social-wa:hover{
  background:#25D366 !important;
  color:#fff !important;
  border-color: transparent !important;
}
.ec-social-btn.ec-social-ig:hover{
  background:#E1306C !important;
  color:#fff !important;
  border-color: transparent !important;
}
.ec-social-btn.ec-social-fb:hover{
  background:#1877F2 !important;
  color:#fff !important;
  border-color: transparent !important;
}
.ec-social-btn:hover svg{ stroke:#fff !important; }
.ec-social-btn.ec-social-ig:hover svg circle[fill]{ fill:#fff !important; }

html, body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
img {
  pointer-events: none;
}
/* =========================================================
   COLLECTION GRID — FINAL STABLE FIX
   Mobile: 2 per row
   Desktop: 4 per row
   No cut images, no overflow, no giant cards
========================================================= */

/* ---------- GRID COLUMNS ---------- */
.product-grid {
  display: grid !important;
  grid-template-columns: repeat(var(--desktop-columns, 4), minmax(0, 1fr));
  gap: 16px;
}

/* Mobile */
@media (max-width: 749px) {
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px;
  }
}

/* ---------- CARD SAFETY ---------- */
.product-grid__item,
.product-card,
.product-card__content {
  width: 100%;
  min-width: 0;
  overflow: visible !important;
}

/* ---------- IMAGE FIX ---------- */
.card-gallery,
.product-media,
.product-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  overflow: hidden;
}

/* Prevent image crop */
.product-media-container {
  grid-template-rows: auto !important;
}

/* ---------- REMOVE HEIGHT LOCKS ---------- */
.slideshow-slide,
.slideshow-slides,
.slideshow-container {
  min-height: unset !important;
  height: auto !important;
}

/* ---------- QUICK ADD / BUTTONS ---------- */
.quick-add,
.buy-buttons-block,
.product-form-buttons {
  width: 100%;
  overflow: visible;
}

/* ---------- REVIEW / BUZZ FIX ---------- */
.live-reviews,
.live-customer-buzz,
.review-bar,
.review-track {
  overflow: visible !important;
  white-space: normal;
}

/* Mobile review fix */
@media (max-width: 749px) {
  .live-reviews,
  .review-track {
    max-width: 100%;
    padding-inline: 12px;
  }
}

/* ---------- PREVENT FLEX BREAK ---------- */
.layout-panel-flex {
  flex-wrap: nowrap !important;
}

/* ---------- TEXT SCALE ---------- */
.product-card h3,
.product-card .h4,
.product-card .h5 {
  font-size: clamp(13px, 2.8vw, 15px);
  line-height: 1.3;
}

/* ---------- PRICE ALIGN ---------- */
product-price {
  display: block;
  width: 100%;
}

/* ---------- HARD STOP OVERFLOW ---------- */
.product-grid,
.product-grid__item * {
  box-sizing: border-box;
}
/* =========================================
   CART DRAWER — EMPTY STATE CLEANUP
   Desktop + Mobile (SAFE)
========================================= */

/* Wrapper alignment */
.cart-drawer__content {
  text-align: center;
}

/* Empty cart heading */
.cart-drawer__heading--empty {
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  margin: 8px 0 14px !important;
  letter-spacing: -0.01em;
}

/* Paragraph text (login message) */
.cart-items__wrapper p {
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: rgba(0,0,0,0.7);
  margin-bottom: 14px !important;
}

/* Login link */
.cart-items__wrapper p a {
  font-weight: 600;
  text-decoration: underline;
}

/* Continue shopping button */
.cart-items__empty-button {
  font-size: 13px !important;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  min-height: auto !important;
  line-height: 1.2 !important;
}

/* Remove excessive spacing */
.cart-items__wrapper {
  padding: 0 !important;
  margin: 0 !important;
}

/* Mobile refinement */
@media (max-width: 768px) {
  .cart-drawer__heading--empty {
    font-size: 16px !important;
  }

  .cart-items__wrapper p {
    font-size: 12.5px !important;
  }

  .cart-items__empty-button {
    font-size: 12.5px !important;
    padding: 9px 16px !important;
  }
}
/* =====================================================
   CART DRAWER — MOBILE REFINEMENT (DT SAFE PATCH)
===================================================== */

/* ---------- Drawer width (leave 20% background) ---------- */
@media (max-width: 768px) {
  .cart-drawer__dialog {
    width: 80vw !important;
    max-width: 80vw !important;
  }
}

/* ---------- Product row cleanup ---------- */
@media (max-width: 768px) {

  /* Convert table row into clean stacked layout */
  .cart-items__table,
  .cart-items__table tbody,
  .cart-items__table tr {
    display: block;
    width: 100%;
  }

  .cart-items__table-row {
    padding: 12px 0;
    border-bottom: 1px solid rgba(0,0,0,0.08);
  }

  /* Image */
  .cart-items__media {
    width: 72px;
    float: left;
    margin-right: 12px;
  }

  .cart-items__media img {
    width: 72px;
    height: auto;
    border-radius: 8px;
  }

  /* Product details */
  .cart-items__details {
    overflow: hidden;
  }

  .cart-items__title {
    font-size: 13px !important;
    font-weight: 600;
    line-height: 1.35;
    display: block;
    margin-bottom: 6px;
  }

  /* Price block */
  .cart-items__details > div {
    font-size: 12.5px;
    line-height: 1.4;
    margin-bottom: 8px;
  }

  .cart-items__details s {
    font-size: 11px;
    opacity: 0.6;
    margin-left: 6px;
  }

  /* Quantity + remove row */
  .cart-items__quantity {
    clear: both;
    margin-top: 8px;
  }

  .cart-items__quantity-controls {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  /* Quantity selector */
  cart-quantity-selector-component {
    transform: scale(0.9);
  }

  /* Remove button */
  .cart-items__remove {
    padding: 6px;
    opacity: 0.75;
  }

  /* Right-side total price */
  .cart-items__price {
    display: none; /* avoid duplicate price clutter */
  }
}

/* ---------- Header + CTA tightening ---------- */
@media (max-width: 768px) {
  .cart-drawer__header h2 {
    font-size: 16px;
    font-weight: 600;
  }

  .cart__checkout-button {
    font-size: 14px;
    padding: 12px;
    border-radius: 10px;
  }

  .cart__summary-item {
    font-size: 13px;
  }
}
/* =========================================
   CART DRAWER (MOBILE) — FORCE LEFT ALIGN
   Fix: a.cart-items__title centered
========================================= */
@media (max-width: 768px){

  /* stop global centering affecting drawer */
  :is(#CartDrawer, .cart-drawer, .drawer).is-visible,
  :is(#CartDrawer, .cart-drawer, .drawer) {
    text-align: left !important;
  }

  /* product title link */
  :is(#CartDrawer, .cart-drawer, .drawer) a.cart-items__title{
    text-align: left !important;
    justify-content: flex-start !important;
    display: block !important;
    margin: 0 !important;
  }

  /* make sure the whole details column is left aligned */
  :is(#CartDrawer, .cart-drawer, .drawer) :is(.cart-item__details, .cart-items__details, .cart-item__info){
    text-align: left !important;
    align-items: flex-start !important;
  }

  /* price + variant text (optional but usually needed) */
  :is(#CartDrawer, .cart-drawer, .drawer) :is(.cart-item__price, .cart-item__final-price, .money, .cart-items__price){
    text-align: left !important;
  }

  /* quantity row left (optional) */
  :is(#CartDrawer, .cart-drawer, .drawer) :is(.cart-item__quantity, .cart-items__quantity, cart-quantity-selector-component){
    justify-content: flex-start !important;
  }
}
/* ================================
  DT — COD/Card Checkout Only (Premium)
  No accelerated buttons
================================ */
/* Hide accelerated checkout ONLY inside cart areas (keep product Buy It Now visible) */
.cart__additional-checkout-buttons shopify-accelerated-checkout-cart,
.cart__additional-checkout-buttons shopify-accelerated-checkout,
#CartDrawer shopify-accelerated-checkout-cart,
#CartDrawer shopify-accelerated-checkout{
  display: none !important;
}


/* Premium totals card */
.cart__summary-totals{
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  padding: 14px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 12px 30px rgba(0,0,0,.06);
}

/* ============================
   CHECKOUT button (COD/Card style)
   Default: pastel blue + white text
   Hover: grey + white text
   Sleek height + less curves
============================ */
.cart__ctas .cart__checkout-button{
  background: #7aa7ff;              /* pastel blue */
  color: #fff !important;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;              /* less curve */
  height: 44px;
  min-height: 44px;
  padding: 0 18px;
  font-weight: 700;
  letter-spacing: .3px;
  box-shadow: 0 12px 26px rgba(0,0,0,.10);
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease;
}

@media(hover:hover){
  .cart__ctas .cart__checkout-button:hover{
    background: #7a7a7a;            /* grey hover */
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 16px 34px rgba(0,0,0,.14);
  }
}

.cart__ctas .cart__checkout-button:active{
  transform: translateY(0);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
}

/* Mobile */
@media screen and (max-width: 749px){
  .cart__summary-totals{
    padding: 12px;
    border-radius: 16px;
  }
  .cart__ctas .cart__checkout-button{
    width: 100%;
    height: 44px;
    min-height: 44px;
  }
}
/* =========================================================
  ENGLISH CARE — Force square media on COLLECTION grid
  Targets Horizon structure: .product-card .card-gallery .product-media
========================================================= */

.product-grid__item .product-card .card-gallery{
  --gallery-aspect-ratio: 1 !important;   /* override theme variable */
}

.product-grid__item .product-card .card-gallery .product-media{
  --ratio: 1 !important;                  /* override element inline ratio */
  aspect-ratio: 1 / 1 !important;         /* hard force square */
  width: 100% !important;
  overflow: hidden !important;
  border-radius: 14px;
  background: #f6f7f8;
}

/* make the image fill the square */
.product-grid__item .product-card .card-gallery .product-media__image{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}
/* =========================================================
   ENGLISH CARE — Force square media on COLLECTION grid
   Fix: Horizon .product-media-container.media-fit forces COVER
   We override to CONTAIN + square box
========================================================= */

/* 1) Make the gallery area square */
.product-grid__item .product-card .card-gallery{
  --gallery-aspect-ratio: 1 !important;
}

/* 2) Force the actual media box to be square */
.product-grid__item .product-card .card-gallery .product-media{
  aspect-ratio: 1 / 1 !important;
  width: 100% !important;
  overflow: hidden !important;
  border-radius: 14px;
  background: #f6f7f8;
}

/* 3) IMPORTANT: Stop "cover" cropping on collection grid */
.product-grid__item .product-card .card-gallery .product-media-container.media-fit{
  --product-media-fit: contain !important;
}

/* 4) Ensure image fills the square nicely WITHOUT cutting */
.product-grid__item .product-card .card-gallery .product-media__image{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;   /* no cutting */
  object-position: center !important;
  display: block !important;
  padding: 8px;                     /* optional: nicer spacing */
  box-sizing: border-box;
}
/* ============================================================
   DT — Force SQUARE product images on Collection / Search grids
   Fixes Horizon "adapt" ratio making frames non-square
   Paste at VERY END of assets/base.css
============================================================ */

/* Apply only on grid listing pages (collection/search) */
.template-collection .product-grid__item .card-gallery,
.template-search .product-grid__item .card-gallery{
  --gallery-aspect-ratio: 1 !important;
}

/* Override inline ratio + force square wrapper */
.template-collection .product-grid__item .product-media,
.template-search .product-grid__item .product-media{
  --ratio: 1 !important;                 /* beats inline var */
  aspect-ratio: 1 / 1 !important;
  width: 100% !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

/* Ensure container also respects square */
.template-collection .product-grid__item .product-media-container,
.template-search .product-grid__item .product-media-container{
  aspect-ratio: 1 / 1 !important;
}

/* Image fills the square nicely */
.template-collection .product-grid__item .product-media__image,
.template-search .product-grid__item .product-media__image{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;  /* keeps full bottle visible */
  object-position: center !important;
  display: block !important;
}
/* =========================================================
   DT FIX — Collection product card image MUST be square (mobile)
   Paste at END of assets/base.css
   ========================================================= */

@media (max-width: 749px){

  /* 1) Force gallery/card image area to be square */
  .product-grid__item .card-gallery,
  .product-grid__item .card-gallery .product-media,
  .product-grid__item .card-gallery .product-media-container,
  .product-grid__item .card-gallery .collection-card__image {
    aspect-ratio: 1 / 1 !important;
  }

  /* Your theme uses CSS var --gallery-aspect-ratio (seen in inspector) */
  .product-grid__item .card-gallery{
    --gallery-aspect-ratio: 1 !important;
    --ratio: 1 !important;
  }

  /* 2) Ensure the media wrapper actually has a height to match the ratio */
  .product-grid__item .card-gallery .product-media{
    width: 100% !important;
    height: auto !important;
    overflow: hidden !important;
    border-radius: 12px;
    background: rgba(0,0,0,.03);
  }

  /* 3) Make the image fit inside the square (no weird cropping) */
  .product-grid__item .card-gallery img.product-media__image{
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;   /* use contain to keep full bottle visible */
    object-position: center !important;
    display: block !important;
  }

  /* 4) Your slideshow-slide sets --grid-template-rows: 50dvh 1fr inline.
        That can mess mobile sizing. Override it for product cards. */
  .product-grid__item slideshow-slide.product-media-container{
    --grid-template-rows: 1fr !important;
    --grid-template-rows-desktop: 1fr !important;
  }
}
/* =========================================
   DT — Stop whole product card "blue flash"
   Horizon overlay link focus/tap highlight
========================================= */

/* Remove mobile tap highlight */
.product-card,
.product-card * {
  -webkit-tap-highlight-color: transparent;
}

/* If the overlay link is receiving focus/active, don't show any big highlight */
product-card .product-card__link,
.product-card .product-card__link {
  outline: none !important;
}

product-card .product-card__link:focus,
product-card .product-card__link:focus-visible,
product-card .product-card__link:active,
.product-card .product-card__link:focus,
.product-card .product-card__link:focus-visible,
.product-card .product-card__link:active {
  outline: none !important;
  box-shadow: none !important;
}

/* Some Horizon builds apply focus styles to the whole card container */
product-card:focus,
product-card:focus-visible,
product-card:active,
.product-card:focus,
.product-card:focus-visible,
.product-card:active {
  outline: none !important;
  box-shadow: none !important;
}

/* Reduce any "pressed" animation that affects the whole card */
product-card,
.product-card {
  transition: none !important;
}
/* =========================================================
   DT — MOBILE compact product cards (Horizon) — HARD OVERRIDE
   Put at VERY BOTTOM of base.css
========================================================= */
@media (max-width: 749px){

  /* 1) Make the card content compact (real padding/gap, not vars) */
  .product-grid .product-card__content.product-grid__card{
    padding: 8px !important;
    gap: 8px !important;
  }

  /* 2) Tighten title + price spacing */
  .product-grid .product-card__content .text-block{
    margin: 0 !important;
    padding: 0 !important;
  }
  .product-grid .product-card__content .text-block p{
    margin: 0 !important;
    line-height: 1.25 !important;
    font-size: 12px !important;
  }

  .product-grid product-price{
    margin-top: 2px !important;
    margin-bottom: 6px !important;
  }

  /* 3) Tighten buttons area */
  .product-grid .product-form-buttons{
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  /* 4) Compact quantity selector */
  .product-grid .quantity-selector,
  .product-grid quantity-selector-component{
    height: 36px !important;
  }
  .product-grid .quantity-selector input{
    height: 36px !important;
    font-size: 13px !important;
  }
  .product-grid .quantity-selector button{
    width: 36px !important;
    height: 36px !important;
  }

  /* 5) Compact add to cart */
  .product-grid .add-to-cart-button{
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
  }
}
/* =====================================================
   DT — Horizon Quantity Selector TRUE CENTER FIX
   (Mobile + Desktop, Safari-safe)
===================================================== */

/* Remove browser number input offsets */
quantity-selector-component input[type="number"]{
  -webkit-appearance: none;
  appearance: none;
  margin: 0 !important;
}

/* Kill reserved spin-button space (mobile Safari fix) */
quantity-selector-component input[type="number"]::-webkit-inner-spin-button,
quantity-selector-component input[type="number"]::-webkit-outer-spin-button{
  -webkit-appearance: none;
  margin: 0;
}

/* TRUE centering */
quantity-selector-component{
  display: grid !important;
  grid-template-columns: auto minmax(28px, 1fr) auto !important;
  align-items: center !important;
}

/* Input itself */
quantity-selector-component input[type="number"]{
  text-align: center !important;
  padding: 0 !important;
  width: 100% !important;
  justify-self: center !important;
}

/* Ensure + / - buttons are equal */
quantity-selector-component button{
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* =====================================================
   DT — Qty number perfect center (Horizon / Mobile fix)
   Fixes internal text drift inside number input
===================================================== */

quantity-selector-component input[type="number"]{
  /* force true text centering */
  text-align: center !important;
  text-indent: 0 !important;
  padding-inline: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;

  /* remove platform-specific number field rendering offsets */
  -webkit-appearance: textfield !important;
  -moz-appearance: textfield !important;
  appearance: textfield !important;

  /* make sure width behaves predictably */
  box-sizing: border-box !important;
  min-width: 0 !important;
}

/* some mobile builds still reserve space unless we kill the spinners */
quantity-selector-component input[type="number"]::-webkit-inner-spin-button,
quantity-selector-component input[type="number"]::-webkit-outer-spin-button{
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* =========================================================
   DT — Auto Reveal (All Sections) PREMIUM
========================================================= */
main > .shopify-section{
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity .9s ease,
    transform 1.1s cubic-bezier(.22,.61,.36,1);
  will-change: transform, opacity;
}

/* First/LCP section: paint immediately; internal hero animation still runs */
main > .shopify-section:first-child{
  opacity: 1;
  transform: none;
  transition: none;
  will-change: auto;
}

/* CWV: on mobile paint all sections immediately; no reveal observer needed. */
@media (max-width: 768px){
  main > .shopify-section{
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }
}

/* Alternating directions after hero (optional premium feel) */
@media (min-width: 990px){
  main > .shopify-section:nth-child(2n){
    transform: translate3d(-22px, 0, 0);
  }
  main > .shopify-section:nth-child(3n){
    transform: translate3d(22px, 0, 0);
  }
  main > .shopify-section:nth-child(4n){
    transform: translate3d(0, 22px, 0);
  }
}

/* Visible */
main > .shopify-section.dt-inview{
  opacity: 1;
  transform: translate3d(0,0,0);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  main > .shopify-section{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}



@media (max-width: 768px){
  html.dt-no-reveal .dt-reveal,
  html.dt-no-reveal [data-dt-reveal],
  html.dt-no-reveal [data-reveal]{
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    will-change: auto !important;
  }
}

  /* Also make sure sections are not hidden by any reveal system */
  html.dt-no-reveal-legal main .shopify-section{
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}
/* Disable DT metafields accordion */
#dt-mf-acc-7770808647745 {
  display: none !important;
}

/* =========================================================
   DT — Sticky Add To Cart • FINAL positioning (Horizon)
   - Desktop: bottom-center, landscape friendly
   - Mobile: above bottom footer bar (safe area)
========================================================= */

/* Adjust this if your mobile footer is taller/shorter */
:root{
  --dt-mobile-footer-height: 64px; /* change to 56/60/72 if needed */
  --dt-sticky-gap: 12px;
}

sticky-add-to-cart .sticky-add-to-cart__bar{
  /* Always above everything important */
  z-index: calc(var(--layer-sticky) + 5) !important;

  /* Desktop / default */
  width: min(640px, calc(100vw - 24px)) !important;
  left: 50% !important;
  bottom: calc(var(--dt-sticky-gap) + env(safe-area-inset-bottom)) !important;
}

/* Mobile: float just above the footer bar instead of sitting on the very bottom */
@media (max-width: 749px){
  sticky-add-to-cart .sticky-add-to-cart__bar{
    bottom: calc(var(--dt-mobile-footer-height) + var(--dt-sticky-gap) + env(safe-area-inset-bottom)) !important;
    width: calc(100vw - 16px) !important;
    border-radius: 14px !important; /* looks premium; change to 0 if you want full-width slab */
  }
}
/* =========================================================
   DT FINAL — Sticky Add To Cart positioning (Horizon)
   Desktop: bottom-center, landscape-fit
   Mobile: above mobile footer bar
========================================================= */

:root{
  --dt-mobile-footer-height: 64px; /* change if your footer is taller */
  --dt-sticky-gap: 12px;
}

/* Base hidden state (keep Horizon animation but REMOVE translateX centering) */
sticky-add-to-cart .sticky-add-to-cart__bar{
  left: 24px !important;
  right: 24px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 1100px !important;
  width: auto !important;

  bottom: calc(var(--dt-sticky-gap) + env(safe-area-inset-bottom)) !important;

  /* keep slide-up animation but no translateX */
  transform: translateY(calc(100% + 40px)) !important;
  opacity: 0 !important;

  z-index: 9999 !important;
}

/* Visible when stuck */
sticky-add-to-cart .sticky-add-to-cart__bar[data-stuck='true']{
  transform: translateY(0) !important;
  opacity: 1 !important;
}

/* Mobile: sit above footer bar */
@media (max-width: 749px){
  sticky-add-to-cart .sticky-add-to-cart__bar{
    left: 8px !important;
    right: 8px !important;
    max-width: 720px !important;

    bottom: calc(var(--dt-mobile-footer-height) + var(--dt-sticky-gap) + env(safe-area-inset-bottom)) !important;
  }
}
/* =========================================================
   DT FIX — Back-to-top should never overlap Sticky ATC (MOBILE)
   Uses:
   - --ec-nav-h (your bottom nav height)
   - --dt-mobile-footer-height / --dt-sticky-gap (from sticky ATC patch)
========================================================= */

@media (max-width: 989px){
  #ec-back-to-top{
    /* Put it above: bottom nav + sticky bar + spacing */
    bottom: calc(
      var(--ec-nav-h, 62px) +
      var(--dt-mobile-footer-height, 64px) +
      (var(--dt-sticky-gap, 12px) * 2) +
      env(safe-area-inset-bottom) +
      20px
    ) !important;
    z-index: 10000000 !important;
  }
}
/* =========================================================
   DT FINAL — Social LEFT, Back-to-top RIGHT (mobile + desktop)
   + Mobile: both sit above sticky add-to-cart & bottom nav
========================================================= */

/* 1) SOCIAL DOCK -> LEFT (everywhere) */
.ec-social-dock{
  left: var(--ec-dock-x, 16px) !important;
  right: auto !important;
  align-items: flex-start !important;
}

/* If your buttons had right-side rounding/spacing assumptions, keep it clean */
.ec-social-btn{
  justify-content: flex-start;
}

/* 2) BACK TO TOP -> RIGHT (everywhere) */
#ec-back-to-top{
  right: 16px !important;
  left: auto !important;
}

/* 3) MOBILE: lift BOTH above bottom nav + sticky ATC area */
@media (max-width: 989px){
  /* Social dock vertical position */
  .ec-social-dock{
    bottom: calc(
      var(--ec-nav-h, 62px) +
      var(--dt-mobile-footer-height, 64px) +
      (var(--dt-sticky-gap, 12px) * 2) +
      env(safe-area-inset-bottom) +
      20px
    ) !important;
  }

  /* Back-to-top vertical position (same safe height) */
  #ec-back-to-top{
    bottom: calc(
      var(--ec-nav-h, 62px) +
      var(--dt-mobile-footer-height, 64px) +
      (var(--dt-sticky-gap, 12px) * 2) +
      env(safe-area-inset-bottom) +
      20px
    ) !important;
  }
}

/* 4) DESKTOP: keep them near bottom, but avoid overlap on smaller desktops */
@media (min-width: 990px){
  .ec-social-dock{ bottom: 24px !important; }
  #ec-back-to-top{ bottom: 24px !important; }
}

/* If your sticky ATC is wide on smaller desktops, lift the floating buttons a bit */
@media (min-width: 990px) and (max-width: 1240px){
  .ec-social-dock{ bottom: 110px !important; }
  #ec-back-to-top{ bottom: 110px !important; }
}
/* =========================================================
   DT — hint icon bigger in Sticky Add To Cart (Horizon)
   Makes BOTH:
   1) Cart icon next to "Add to cart"
   2) Added checkmark burst icon
========================================================= */

/* 1) Bigger cart icon (the one you are actually seeing as 18x18) */
.sticky-add-to-cart__bar .sticky-add-to-cart__button{
  --icon-stroke-width: 2.2px; /* your SVG uses var(--icon-stroke-width) */
}

.sticky-add-to-cart__bar .sticky-add-to-cart__button .add-to-cart-icon,
.sticky-add-to-cart__bar .sticky-add-to-cart__button .add-to-cart__added-icon{
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.sticky-add-to-cart__bar .sticky-add-to-cart__button .add-to-cart-icon svg,
.sticky-add-to-cart__bar .sticky-add-to-cart__button .add-to-cart__added-icon svg{
  width: 100% !important;
  height: 100% !important;
}

/* 2) Make the "Added" state feel more prominent */
.sticky-add-to-cart__bar .sticky-add-to-cart__button .add-to-cart__added{
  transform: scale(1.12) !important;
}

/* Optional: give a tiny punch without being flashy */
@keyframes dt-added-pulse{
  0%   { transform: scale(1); }
  45%  { transform: scale(1.16); }
  100% { transform: scale(1.08); }
}
.sticky-add-to-cart__bar .sticky-add-to-cart__button[data-added="true"] .add-to-cart__added{
  animation: dt-added-pulse .45s ease-out;
}
/* =========================================================
   DT — Sticky ATC button: Mobile icon-only (centered)
   Desktop keeps icon + text
========================================================= */

@media (max-width: 749px){
  /* Make the button a centered icon pill */
  .sticky-add-to-cart__bar .sticky-add-to-cart__button{
    padding-inline: 14px !important;
    min-width: 56px !important;
    justify-content: center !important;
  }

  /* Hide the text on mobile */
  .sticky-add-to-cart__bar .sticky-add-to-cart__button .add-to-cart-text__content{
    display: none !important;
  }

  /* Ensure the icon wrapper is perfectly centered */
  .sticky-add-to-cart__bar .sticky-add-to-cart__button .add-to-cart-text{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
  }

  .sticky-add-to-cart__bar .sticky-add-to-cart__button .add-to-cart-icon,
  .sticky-add-to-cart__bar .sticky-add-to-cart__button .add-to-cart__added-icon{
    margin: 0 !important;
  }
}
/* Force Buy It Now to show on product pages */
body.template-product shopify-accelerated-checkout,
body.template-product shopify-accelerated-checkout-cart{
  display: block !important;
}

body.template-product .shopify-payment-button{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
/* ===== FIX BUY IT NOW BUTTON (MOBILE) ===== */

/* Force single-line + rename text visually */
.shopify-payment-button__button--unbranded {
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2 !important;
  padding: 14px 16px !important;
  font-size: 15px !important;
  letter-spacing: 0.3px;
}

/* Replace text visually without touching DOM */
.shopify-payment-button__button--unbranded {
  position: relative;
  color: transparent !important;
}

.shopify-payment-button__button--unbranded::after {
  content: "Buy Now";
  color: #ffffff;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

/* Mobile-specific tightening */
@media (max-width: 768px) {
  .shopify-payment-button__button--unbranded {
    min-height: 48px;
    font-size: 14px !important;
  }
}
html, body{
  overflow-x: hidden !important;
  max-width: 100% !important;
}

body{
  overflow-x: hidden !important;
}
/* ================================
   FIX: Cart drawer remove icon disappears at mid/desktop breakpoints
   - Ensures SVG is visible
   - Ensures stroke width has a fallback
   - Ensures currentColor is visible on dark button
================================ */
@media (min-width: 750px){
  cart-drawer-component .cart-items__remove,
  .cart-drawer .cart-items__remove,
  .drawer .cart-items__remove{
    /* if your button background is dark, make icon visible */
    color: #fff !important;

    /* stroke-width fallback (your SVG uses var(--icon-stroke-width)) */
    --icon-stroke-width: 1.8px;
  }

  cart-drawer-component .cart-items__remove svg,
  .cart-drawer .cart-items__remove svg,
  .drawer .cart-items__remove svg{
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  cart-drawer-component .cart-items__remove svg path,
  .cart-drawer .cart-items__remove svg path,
  .drawer .cart-items__remove svg path{
    stroke: currentColor !important;
    stroke-width: 1.8px !important;
  }
}
local-pickup-availability,
.pickup-availability,
.product__pickup-availability {
  display: none !important;
}
/* DT — Light reveal (no transform, only quick fade) */
.dt-reveal,
[data-dt-reveal],
.reveal,
.reveal-on-scroll{
  transform: none !important;           /* transform causes more work */
  filter: none !important;
  transition: opacity 180ms ease !important;
  will-change: auto !important;
}

/* =========================================================
   PRODUCT PAGE — 60/40 DESKTOP LAYOUT
   IMAGE = 60%
   DETAILS = 40%
   ========================================================= */

@media screen and (min-width: 750px) {

  /* Main product grid */
  .product-information__grid.product-information--media-left {
    display: grid !important;

    /* 60% IMAGE / 40% DETAILS */
    grid-template-columns: 60% 40% !important;

    width: 100% !important;
    max-width: 100% !important;

    column-gap: 0 !important;
    row-gap: 0 !important;

    align-items: start !important;
  }


  /* =====================================================
     LEFT — PRODUCT IMAGE — 60%
     ===================================================== */

  .product-information__grid.product-information--media-left
  .product-information__media {
    grid-column: 1 !important;
    grid-row: 1 !important;

    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 10px 0 0 !important;

    align-self: start !important;
  }


  /* Gallery */
  .product-information__media media-gallery {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
  }


  .product-information__media .media-gallery,
  .product-information__media .product-media-container {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
  }


  /* Product image */
  .product-information__media img {
    max-width: 100% !important;

    width: auto !important;
    height: auto !important;

    object-fit: contain !important;
    object-position: center center !important;

    margin: 0 auto !important;
  }


  /* =====================================================
     RIGHT — PRODUCT DETAILS — 40%
     ===================================================== */

  .product-information__grid.product-information--media-left
  .product-details {
    grid-column: 2 !important;
    grid-row: 1 !important;

    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;

    padding: 0 0 0 10px !important;

    align-self: start !important;
  }


  /* Remove top gap */
  .product-details > *:first-child {
    margin-top: 0 !important;
  }

  .product-details h1 {
    margin-top: 0 !important;
  }


  /* Details should use complete 40% */
  .product-details > .group-block,
  .product-details .group-block {
    width: 100% !important;
    max-width: 100% !important;
  }


  /* Remove theme gaps */
  .product-information {
    gap: 0 !important;
  }

  .product-information__grid {
    gap: 0 !important;
  }
}


/* =========================================================
   1200px+
   Prevent theme's original 2fr / 1fr rule
   ========================================================= */

@media screen and (min-width: 1200px) {

  .product-information__grid.product-information--media-left {
    grid-template-columns: 60% 40% !important;
  }

  .product-information__grid.product-information--media-left
  .product-information__media {
    grid-column: 1 !important;
    padding-right: 10px !important;
  }

  .product-information__grid.product-information--media-left
  .product-details {
    grid-column: 2 !important;
    padding-left: 10px !important;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

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

  .product-information {
    gap: 0 !important;
  }

  [data-dt-pi] {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  [data-dt-pi-grid] {
    display: grid !important;
    grid-template-columns: 1fr !important;

    width: 100% !important;
    gap: 0 !important;
  }

  [data-dt-pi-grid] > * {
    grid-column: 1 / -1 !important;

    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
  }


  /* Mobile image */
  [data-dt-pi-media] {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  [data-dt-pi-media] img {
    width: auto !important;
    max-width: 100% !important;

    height: auto !important;

    object-fit: contain !important;

    margin: 0 auto !important;
  }


  /* Mobile product details */
  [data-dt-pi-grid] .product-details {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
  }
}

/* === EC CLIENT FINAL UI COLORS 2026-08-09 ===
   Single authoritative visual override requested by client.
   Add to Cart: white/black -> #2E308D on hover.
   Cart remove icon: black.
   Checkout: #2E308D.
================================================ */
:root{
  --ec-client-blue: #2E308D;
  --ec-client-blue-hover: #24266f;
}

/* Standard + product + collection + recommendation Add to Cart */
.add-to-cart-button,
button[name="add"],
.product-form-buttons .add-to-cart-button,
.product-grid__item .add-to-cart-button,
.product-card .buy-buttons-block .add-to-cart-button,
.buy-buttons-block [ref="addToCartButtonContainer"] .add-to-cart-button,
.dt-ec-card button[name="add"]{
  background: #ffffff !important;
  color: #111111 !important;
  border-color: #111111 !important;
  border-width: 1px !important;
  border-style: solid !important;
}

@media (hover:hover){
  .add-to-cart-button:not([disabled]):hover,
  button[name="add"]:not([disabled]):hover,
  .product-form-buttons .add-to-cart-button:not([disabled]):hover,
  .product-grid__item .add-to-cart-button:not([disabled]):hover,
  .product-card .buy-buttons-block .add-to-cart-button:not([disabled]):hover,
  .buy-buttons-block [ref="addToCartButtonContainer"] .add-to-cart-button:not([disabled]):hover,
  .dt-ec-card button[name="add"]:not([disabled]):hover{
    background: var(--ec-client-blue) !important;
    color: #ffffff !important;
    border-color: var(--ec-client-blue) !important;
  }
}

/* Keep icon/text following currentColor */
.add-to-cart-button .svg-wrapper,
.add-to-cart-button svg,
.add-to-cart-button .add-to-cart-text,
.add-to-cart-button .add-to-cart-text__content,
button[name="add"] svg{
  color: inherit !important;
}

/* Cart bin/remove button: black icon with subtle neutral surface */
.cart-items__remove{
  color: #000000 !important;
}
.cart-items__remove svg,
.cart-items__remove svg path{
  color: #000000 !important;
  stroke: #000000 !important;
}

/* Cart drawer/page checkout */
.cart__ctas .cart__checkout-button,
button#checkout.cart__checkout-button{
  background: var(--ec-client-blue) !important;
  color: #ffffff !important;
  border-color: var(--ec-client-blue) !important;
}
@media (hover:hover){
  .cart__ctas .cart__checkout-button:not([disabled]):hover,
  button#checkout.cart__checkout-button:not([disabled]):hover{
    background: var(--ec-client-blue-hover) !important;
    color: #ffffff !important;
    border-color: var(--ec-client-blue-hover) !important;
  }
}

/* =========================================================
   EC FINAL PRODUCT PURCHASE CONTROLS — 2026-08-09
   Main product only. Clean responsive quantity + ATC row.
   Keeps accelerated Buy Now full width below the row.
========================================================= */
body.template-product .product-details .buy-buttons-block{
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
}

body.template-product .product-details .buy-buttons-block .product-form-buttons{
  width: 100% !important;
  max-width: 100% !important;
  align-items: stretch !important;
  box-sizing: border-box !important;
}

body.template-product .product-details .buy-buttons-block .quantity-selector-wrapper{
  min-width: 0 !important;
  margin: 0 !important;
}

body.template-product .product-details .buy-buttons-block .quantity-selector{
  width: 100% !important;
  height: 46px !important;
  min-height: 46px !important;
  border: 1px solid rgba(17,17,17,.20) !important;
  border-radius: 11px !important;
  background: #fff !important;
  overflow: hidden !important;
  box-shadow: none !important;
  transition: border-color .18s ease, box-shadow .18s ease !important;
}

body.template-product .product-details .buy-buttons-block .quantity-selector:focus-within{
  border-color: var(--ec-client-blue, #2E308D) !important;
  box-shadow: 0 0 0 3px rgba(46,48,141,.10) !important;
}

body.template-product .product-details .buy-buttons-block .quantity-selector button{
  width: 38px !important;
  min-width: 38px !important;
  height: 44px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  color: #1a1a1a !important;
  transition: background-color .16s ease, color .16s ease, transform .10s ease !important;
}

@media (hover:hover){
  body.template-product .product-details .buy-buttons-block .quantity-selector button:hover{
    background: rgba(46,48,141,.08) !important;
    color: var(--ec-client-blue, #2E308D) !important;
  }
}

body.template-product .product-details .buy-buttons-block .quantity-selector button:active{
  background: var(--ec-client-blue, #2E308D) !important;
  color: #fff !important;
  transform: scale(.96) !important;
}

body.template-product .product-details .buy-buttons-block .quantity-selector input[type="number"]{
  height: 44px !important;
  min-width: 28px !important;
  padding: 0 !important;
  text-align: center !important;
  font-weight: 700 !important;
  background: #fff !important;
  color: #161616 !important;
}

body.template-product .product-details .buy-buttons-block .add-to-cart-button{
  width: 100% !important;
  min-width: 0 !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 16px !important;
  border-radius: 11px !important;
  justify-content: center !important;
  gap: 8px !important;
  box-sizing: border-box !important;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .12s ease, box-shadow .18s ease !important;
}

body.template-product .product-details .buy-buttons-block .add-to-cart-button:active:not([disabled]){
  transform: translateY(1px) scale(.995) !important;
}

body.template-product .product-details .accelerated-checkout-block,
body.template-product .product-details .shopify-payment-button{
  width: 100% !important;
  max-width: 100% !important;
}

body.template-product .product-details .shopify-payment-button__button--unbranded{
  min-height: 46px !important;
  border-radius: 11px !important;
  background: var(--ec-client-blue, #2E308D) !important;
  color: #fff !important;
  transition: background-color .18s ease, transform .12s ease !important;
}

@media (hover:hover){
  body.template-product .product-details .shopify-payment-button__button--unbranded:hover:not([disabled]){
    background: var(--ec-client-blue-hover, #24266f) !important;
  }
}

@media screen and (max-width: 749px){
  body.template-product .product-details .buy-buttons-block .product-form-buttons:not(:has(.quantity-rules)){
    display: grid !important;
    grid-template-columns: minmax(96px, 104px) minmax(0, 1fr) !important;
    gap: 10px !important;
    row-gap: 12px !important;
    width: 100% !important;
  }

  body.template-product .product-details .buy-buttons-block .quantity-selector-wrapper{
    grid-column: 1 !important;
    width: 100% !important;
  }

  body.template-product .product-details .buy-buttons-block .product-form-buttons > span:has(.add-to-cart-button){
    grid-column: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body.template-product .product-details .buy-buttons-block .accelerated-checkout-block{
    grid-column: 1 / -1 !important;
    width: 100% !important;
    margin-top: 0 !important;
  }

  body.template-product .product-details .buy-buttons-block .product-form-text__error,
  body.template-product .product-details .buy-buttons-block .quantity-label,
  body.template-product .product-details .buy-buttons-block .quantity-rules,
  body.template-product .product-details .buy-buttons-block .volume-pricing{
    grid-column: 1 / -1 !important;
  }
}

@media screen and (min-width: 750px){
  body.template-product .product-details .buy-buttons-block .product-form-buttons:not(:has(.quantity-rules)){
    display: grid !important;
    grid-template-columns: minmax(112px, 128px) minmax(0, 1fr) !important;
    gap: 10px !important;
    row-gap: 12px !important;
  }
  body.template-product .product-details .buy-buttons-block .quantity-selector-wrapper{ grid-column: 1 !important; }
  body.template-product .product-details .buy-buttons-block .product-form-buttons > span:has(.add-to-cart-button){ grid-column: 2 !important; min-width: 0 !important; }
  body.template-product .product-details .buy-buttons-block .accelerated-checkout-block{ grid-column: 1 / -1 !important; }
}