/** Shopify CDN: Minification failed

Line 7651:8 Expected identifier but found whitespace
Line 7651:9 Unexpected "calc("

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


/* MAIN EDITS CONTENTS                   */
/* NUMBER 01 - FONT CHANGE               */
/* NUMBER 02 HEADER/MENU                 */
/* NUMBER 03 HERO IMAGE                  */
/* NUMBER 04 PRODUCT CARD                */
/* NUMBER 05 FOOTER                      */
/* NUMBER 06 COLLECTIONS PRODUCT CARD    */
/* NUMBER 07 COLLECTION FILTER           */
/* NUMBER 08 PRODUCT PAGE                */
/* NUMBER 09 HOMEPAGE CAROUSEL           */
/* NUMBER 10 VOLUME 01 BANNER IMAGE      */
/* NUMBER 11 HOMEPAGE STORY              */
/* NUMBER 12 HOMEPAGE COLLECTIONS HEADER */





/* NUMBER 01 FONT CHANGE */



/* ============================= */
/* CUSTOM FONT — AGRANDIR        */
/* ============================= */

/* Agrandir Regular (primary) */
@font-face {
  font-family: "Agrandir";
  src:
    url("/cdn/shop/files/agrandir-regular.woff2?v=1767590120") format("woff2"),
    url("/cdn/shop/files/agrandir-regular.woff?v=1767590120") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Agrandir Grand Heavy (backup) */
@font-face {
  font-family: "Agrandir";
  src:
    url("/cdn/shop/files/agrandir-grandheavy.woff2?v=1767590120") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}





/* ============================= */
/* CHANGE FONTS TO AGRANDIR      */
/* ============================= */

/* Override theme font tokens */
:root {
  --font-body-family: "Agrandir";
  --font-heading-family: "Agrandir";
}

/* Absolute fallback (covers Horizon/Dawn typography utilities) */
html,
body,
h1, h2, h3, h4, h5, h6,
p, a, span, li,
button, input, select, textarea {
  font-family: "Agrandir", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight: 400 !important;
}




/* NUMBER 02 HEADER/MENU */



/* ===================================== */
/* HEADER/MENU TOP AND BOTTOM PADDING    */
/* ===================================== */

.header__columns.spacing-style {
 /* vertical (THIS is what you want now) */
  padding-top: 0px !important;   /* increase space above */
  padding-bottom: 0px !important; /* reduce space below */
}





/* =========================================
   SUBMENU BOTTOM PADDING CONTROL
   ========================================= */

/* Kill vertical spacing applied by spacing-style */
.menu-list__submenu-inner {
  --padding-block-start: 0px !important;
  --padding-block-end: 0px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Ensure content hugs top */
.menu-list__submenu-inner > * {
  margin-bottom: 0 !important;
}

/* If Horizon wraps submenu with spacing-style div */
.menu-list__submenu-inner .spacing-style {
  --padding-block-start: 0px !important;
  --padding-block-end: 0px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}




/* =========================================================
   MENU OPTIONS HOVER INTERACTION
   ========================================================= */

:root{
  --icon-hover: #FF751F;
}

/* Search */
.search-modal__button:hover svg,
.search-modal__button:hover svg *{
  stroke: var(--icon-hover) !important;
  fill: none !important;
}

/* Account */
.account-button:hover svg,
.account-button:hover svg *{
  stroke: var(--icon-hover) !important;
  fill: none !important;
}

/* Cart (custom element) */
button:hover cart-icon svg,
button:hover cart-icon svg *{
  stroke: var(--icon-hover) !important;
  fill: none !important;
}






/* =========================================================
   MENU BOTTOM DIVIDER
   ========================================================= */

:root {
  --divider-color: #303633;

  --divider-desktop: 1px;
  --divider-mobile: 1px;
}

/* ---------------------------------------------------------
   1) HEADER LINE (DEFAULT / CLOSED STATE)
   --------------------------------------------------------- */
.header__columns.spacing-style {
  border-bottom: var(--divider-desktop) solid var(--divider-color);
}

/* Mobile thickness */
@media (max-width: 989px) {
  .header__columns.spacing-style {
    border-bottom-width: var(--divider-mobile);
  }
}

/* ---------------------------------------------------------
   2) WHEN SUBMENU IS OPEN:
   - Hide header line
   - Show line at bottom of submenu
   --------------------------------------------------------- */

/* Hide header line when any submenu is active */
.header-menu:hover .header__columns.spacing-style,
.header-menu:focus-within .header__columns.spacing-style {
  border-bottom-color: transparent;
}

/* Submenu bottom line */
.menu-list__submenu-inner {
  background-image: linear-gradient(var(--divider-color), var(--divider-color));
  background-repeat: no-repeat;
  background-position: 50% 100%;
  background-size: 100vw var(--divider-desktop);
}

/* Mobile submenu thickness */
@media (max-width: 989px) {
  .menu-list__submenu-inner {
    background-size: 100vw var(--divider-mobile);
  }
}




/* =========================================================
   HEADER/MENU SEARCH ICON FIX
   ========================================================= */

/* 1) Hide ALL header search triggers (covers search-button + the internal button) */
.header search-button.search-action,
.header .search-modal__button{
  display: none !important;
}

/* 2) Re-enable ONLY the one you added inside <header-actions> */
.header header-actions search-button.search-action{
  display: inline-block !important;
}

.header header-actions .search-modal__button{
  display: inline-flex !important;
}





/* =========================================================
   MENU/HEADER ICON SPACING (mobile + desktop)
   ========================================================= */

/* 1) Mobile: use clean flex gap inside <header-actions> */
@media (max-width: 989px){
  header-actions{
    display: inline-flex;
    align-items: center;
    gap: 14px;
  }
  header-actions > *{
    margin: 0 !important;
  }
}

/* 2) Desktop: Horizon spaces each action via padding/min-width
      so we tighten *the buttons/links themselves* instead of relying on gap */
@media (min-width: 990px){
  /* keep the group aligned */
  header-actions{
    display: inline-flex;
    align-items: center;
    gap: 0 !important; /* let padding control spacing on desktop */
  }

  /* standardize clickable area + spacing */
  header-actions .header-actions__action,
  header-actions .header-actions__action.button,
  header-actions a.header-actions__action,
  header-actions button.header-actions__action{
    padding: 0 0px !important;   /* <- adjust this number */
    margin: 0 !important;
    min-width: auto !important;
  }

  /* if Horizon wraps icons in svg-wrapper and adds extra spacing */
  header-actions .svg-wrapper{
    margin: 0 !important;
  }
}






/* =========================================
   MENU/HEADER FONT COLOUR DIMMING ON HOVER FIX
   ========================================= */

/* Kill dimming for all header menus + dropdowns */
.header,
.header-menu,
header-menu,
.menu-list,
.menu-list__submenu,
.menu-list__submenu-inner {
  --opacity-subdued-text: 1 !important;
}

/* Extra safety: force the computed font colors to be fully opaque */
.menu-list__submenu-inner {
  --menu-parent-font-color: rgb(var(--color-foreground-rgb) / 1) !important;
  --menu-child-font-color: rgb(var(--color-foreground-rgb) / 1) !important;
}





/* =========================================
   MENU/HEADER HOVER INTERACTION
   ========================================= */

:root {
  --menu-base-color: #303633;
  --menu-hover-color: #FF751F;

  --menu-underline-desktop-thickness: 1px;
  --menu-underline-desktop-offset: 4px;

  --menu-underline-mobile-thickness: 1px;
  --menu-underline-mobile-offset: 3px;
}

/* Base */
.menu-list__link-title {
  color: var(--menu-base-color) !important;
}

/* Hover */
.menu-list__link:hover .menu-list__link-title,
.menu-list__link:focus-visible .menu-list__link-title,
.menu-list__link[aria-expanded="true"] .menu-list__link-title {
  color: var(--menu-hover-color) !important;
  text-decoration: underline;
  text-decoration-thickness: var(--menu-underline-desktop-thickness);
  text-underline-offset: var(--menu-underline-desktop-offset);
}

/* Mobile underline tweak */
@media (max-width: 989px) {
  .menu-list__link:hover .menu-list__link-title,
  .menu-list__link:focus-visible .menu-list__link-title,
  .menu-list__link[aria-expanded="true"] .menu-list__link-title {
    text-decoration-thickness: var(--menu-underline-mobile-thickness);
    text-underline-offset: var(--menu-underline-mobile-offset);
  }
}



/* =========================================
   MENU/HEADER ACCOUNT BUTTON REDIRECT (NOT SURE IF IN USE)
   ========================================= */
/* Ensure Horizon account icon remains visible */
button.account-button.header-actions__action .account-button__icon,
button.account-button.header-actions__action svg {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}




/* =====================================================
   MENU/HEADER ICON SPACING — DESKTOP ONLY
   ===================================================== */

@media (min-width: 990px) {

  /* 1) Control spacing explicitly instead of relying on margins */
  header-actions {
    display: flex;
    align-items: center;
    gap: 14px; /* ← adjust this if you want tighter/looser */
  }

  /* 2) Remove any sneaky margins Horizon applies */
  header-actions > *,
  .header-actions__action {
    margin: 0 !important;
  }

  /* 3) Ensure all icon buttons are perfectly centered */
  .header-actions__action,
  .header-actions__action button {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* 4) Normalize SVG visual alignment */
  .header-actions__action svg {
    display: block;
    margin: 0;
  }

  /* 5) Slight optical correction (account icon often feels off-center) */
  button.account-button.header-actions__action svg {
    transform: translateX(0.5px); /* micro optical tweak */
  }
}







/* =========================================
   SUBMENU HOVER INTERACTION
   ========================================= */

:root {
  --submenu-hover-color: #FF751F;

  --submenu-underline-desktop-thickness: 1px;
  --submenu-underline-desktop-offset: 3px;

  --submenu-underline-mobile-thickness: 1px;
  --submenu-underline-mobile-offset: 2px;
}

/* Desktop hover */
.menu-list__submenu-inner a:hover,
.menu-list__submenu-inner a:focus-visible {
  color: var(--submenu-hover-color) !important;
  text-decoration: underline;
  text-decoration-thickness: var(--submenu-underline-desktop-thickness);
  text-underline-offset: var(--submenu-underline-desktop-offset);
}

/* Mobile override */
@media (max-width: 989px) {
  .menu-list__submenu-inner a:hover,
  .menu-list__submenu-inner a:focus-visible {
    text-decoration-thickness: var(--submenu-underline-mobile-thickness);
    text-underline-offset: var(--submenu-underline-mobile-offset);
  }
}





/* Global button font size (covers cart empty button too) */
a.button,
button.button,
.button {
  font-size: 16px !important;
}



/* NUMBER 03 HERO IMAGE */





/* =========================================
   HERO IMAGE VIEWPORT FIX
   ========================================= */

/* Target the hero container that controls height */
:is(
  .horizon-hero,
  .hero,
  .banner,
  .image-banner,
  .slideshow
) {
  /* Increase height relative to viewport width (16:9 logic) */
  min-height: clamp(320px, 56.25vw, 85svh) !important;
}

/* Mobile refinement */
@media (max-width: 749px) {
  :is(
    .horizon-hero,
    .hero,
    .banner,
    .image-banner,
    .slideshow
  ) {
    min-height: clamp(260px, 56.25vw, 70svh) !important;
  }
}





/* =========================================
   HERO IMAGE DIMMER REMOVED
   ========================================= */

/* Kill overlay / dimmer layers */
:is(
  .horizon-hero,
  .hero,
  .banner,
  .image-banner,
  .slideshow
) ::before,
:is(
  .horizon-hero,
  .hero,
  .banner,
  .image-banner,
  .slideshow
) ::after {
  background: none !important;
  opacity: 0 !important;
  content: none !important;
}

/* Kill explicit overlay elements */
:is(
  .horizon-hero,
  .hero,
  .banner,
  .image-banner,
  .slideshow
) :is(
  .banner__overlay,
  .hero__overlay,
  .image-banner__overlay,
  .slideshow__overlay,
  .media-overlay,
  .overlay
) {
  background: transparent !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Remove gradient variables if Horizon uses CSS vars */
:is(
  .horizon-hero,
  .hero,
  .banner,
  .image-banner,
  .slideshow
) {
  --overlay-opacity: 0 !important;
  --gradient-opacity: 0 !important;
  --color-overlay: transparent !important;
}




/* =========================================================
   HERO IMAGE — MOBILE 4:5 CROP (CROP LEFT)
   ========================================================= */

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

  /* 0) Scope hard to ONLY Horizon hero sections */
  section.shopify-section.hero-wrapper .hero {
    /* Kill Horizon’s enforced min-height via CSS variables */
    --hero-min-height: 0px !important;
    min-height: 0 !important;
    height: auto !important;
  }

  /* 1) Make the hero container a strict 4:5 box */
  section.shopify-section.hero-wrapper .hero__container {
    aspect-ratio: 4 / 5 !important;
    overflow: hidden !important;

    /* ensure ratio is respected even if theme sets heights */
    height: auto !important;
    min-height: 0 !important;
  }

  /* 2) Ensure the media fills that 4:5 box and crops */
  section.shopify-section.hero-wrapper .hero__container img,
  section.shopify-section.hero-wrapper .hero__container picture,
  section.shopify-section.hero-wrapper .hero__container picture img,
  section.shopify-section.hero-wrapper .hero__container video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;

    /* keep RIGHT side, crop LEFT */
    object-position: right center !important;
    display: block !important;
  }

  /* 3) If hero is implemented as background-image anywhere inside container */
  section.shopify-section.hero-wrapper .hero__container [style*="background-image"] {
    background-size: cover !important;
    background-position: right center !important; /* keep right, crop left */
  }
}



/* NUMBER 04 PRODUCT CARD */




/* =========================================
   PRODUCT CARD FOOTER TEXT POSITION
   Title left + Price right (same line)
   Universal (Homepage + Collections + Search)
   ========================================= */

/* Turn the card content area into a 2-col grid */
product-card .product-card__content,
.product-card .product-card__content,
.product-card .product-card__content.product-grid__card{
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  grid-auto-flow: row !important;
  row-gap: 6px !important; /* tweak if you want */
}

/* Assume first child is the image/media block — keep it full width on row 1 */
product-card .product-card__content > :first-child,
.product-card .product-card__content > :first-child{
  grid-column: 1 / -1 !important;
}

/* Title block (your title text-block has --product_title in its style/class) */
product-card .product-card__content > .text-block[style*="--product_title"],
product-card .product-card__content > .text-block[class*="product_title"],
.product-card .product-card__content > .text-block[style*="--product_title"],
.product-card .product-card__content > .text-block[class*="product_title"]{
  grid-column: 1 !important;
}

/* Price goes to the right of the title, same row */
product-card .product-card__content > product-price,
.product-card .product-card__content > product-price{
  grid-column: 2 !important;
  grid-row: 2 !important;         /* forces it onto the title row */
  justify-self: end !important;
  text-align: right !important;
  white-space: nowrap !important;
  margin: 0 !important;
  position: static !important;
}

/* Everything else (subtitle etc) spans full width below */
product-card .product-card__content > :not(:first-child):not(product-price):not(.text-block[style*="--product_title"]):not(.text-block[class*="product_title"]),
.product-card .product-card__content > :not(:first-child):not(product-price):not(.text-block[style*="--product_title"]):not(.text-block[class*="product_title"]){
  grid-column: 1 / -1 !important;
}

/* Clean default margins */
product-card .product-card__content p,
.product-card .product-card__content p{
  margin: 0 !important;
}






/* =========================================================
   PRODUCT CARD LINES — FINAL (DIVIDER NEVER DISAPPEARS)
   - Desktop (>=750px): 4 columns, hairline feel
   - Mobile (<=749px): 2 columns, crisp 1px
   - Lines drawn as overlays (NO layout rounding issues)
   - Image ↔ footer divider: uses 1px + scaleY() (no 0.5px vanish)
   Scope: .section-resource-list only
   Background: #f6f3f0
   ========================================================= */

/* ---------- VARIABLES ---------- */
:root{
  --line: #303633;
  --bg: #f6f3f0;

  /* seam thickness (you already use this) */
  --lw: 0.5px;

  /* divider rendering trick */
  --of-div-h: 1px;      /* always draw a real pixel */
  --of-div-scale: 0.5;  /* visually hairline on desktop */
}

@media (max-width: 749px){
  :root{
    --lw: 1px;
    --line: rgba(48,54,51,0.55);

    --of-div-h: 1px;
    --of-div-scale: 1;  /* keep full pixel on mobile */
  }
}

/* ---------- HARD RESET (kill Horizon lines) ---------- */
.section-resource-list :where(
  .resource-list,
  .resource-list__item,
  .product-card,
  .product-card__content,
  .product-card__content *,
  .product-media-container,
  .media
){
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
}

.section-resource-list :where(
  .resource-list__item::after,
  .product-card__content::before,
  .product-card__content::after
){
  content: none !important;
  display: none !important;
}

/* ---------- GRID CONTAINER: (REMOVED OUTER TOP LINE) ---------- */
.section-resource-list .resource-list{
  position: relative !important;
  background: transparent !important;
}
.section-resource-list .resource-list::before{
  content: none !important;
  display: none !important;
}

/* ---------- GRID ITEMS ---------- */
.section-resource-list .resource-list__item{
  position: relative !important;
  background: var(--bg) !important;
  isolation: isolate !important;
}

/* draw TOP + LEFT seams */
.section-resource-list .resource-list__item::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  z-index: 4 !important;
  box-shadow:
    inset 0 var(--lw) 0 0 var(--line),    /* top */
    inset var(--lw) 0 0 0 var(--line);    /* left */
}

/* Desktop: remove outer left edge (4 cols) */
.section-resource-list .resource-list__item:nth-child(4n + 1)::before{
  box-shadow: inset 0 var(--lw) 0 0 var(--line) !important; /* top only */
}

/* Mobile: 2 cols */
@media (max-width: 749px){
  /* undo desktop rule */
  .section-resource-list .resource-list__item:nth-child(4n + 1)::before{
    box-shadow:
      inset 0 var(--lw) 0 0 var(--line),
      inset var(--lw) 0 0 0 var(--line) !important;
  }

  /* first column in 2-col layout */
  .section-resource-list .resource-list__item:nth-child(2n + 1)::before{
    box-shadow: inset 0 var(--lw) 0 0 var(--line) !important; /* top only */
  }
}

/* =========================================================
   IMAGE ↔ FOOTER DIVIDER (NEVER DISAPPEARS)
   - DO NOT use height: 0.5px (can vanish on fractional widths)
   - Use 1px line + scaleY(0.5) on desktop for hairline look
   ========================================================= */

.section-resource-list :where(
  .product-card .media,
  .product-card .product-media-container
){
  position: relative !important;
  overflow: visible !important;
  transform: translateZ(0) !important; /* stabilise painting */
}

/* keep image below the divider */
.section-resource-list :where(
  .product-card .media img,
  .product-card .product-media-container img
){
  display:block !important;
  position: relative !important;
  z-index: 0 !important;
}

/* Divider */
.section-resource-list :where(
  .product-card .media,
  .product-card .product-media-container
)::after{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;

  height: var(--of-div-h) !important;         /* always 1px */
  background: var(--line) !important;
  pointer-events:none !important;

  z-index: 10 !important;                      /* above image */
  transform: scaleY(var(--of-div-scale)) translateZ(0) !important;
  transform-origin: bottom !important;
  backface-visibility: hidden !important;
}

/* ---------- IMAGE BASELINE FIX ---------- */
.section-resource-list .product-card img{
  display:block !important;
}







/* =========================================================
   RELATED PRODUCTS — OVERRIDE (KEEP HAIRLINE VERTICALS)
   - Remove the outer TOP seam from homepage system
   - Keep vertical dividers at original hairline (--lw)
   - Make ONLY the image ↔ footer divider stronger (1px)
   ========================================================= */

/* 1) Kill TOP seam in related products, but keep LEFT seam hairline */
product-recommendations
.section-resource-list
.resource-list__item::before{
  /* left seam only (uses your global --lw + --line) */
  box-shadow: inset var(--lw) 0 0 0 var(--line) !important;
}

/* remove outer LEFT edge (so no left border) */
@media (min-width: 750px){
  product-recommendations
  .section-resource-list
  .resource-list__item:nth-child(4n + 1)::before{
    box-shadow: none !important;
  }
}
@media (max-width: 749px){
  product-recommendations
  .section-resource-list
  .resource-list__item:nth-child(2n + 1)::before{
    box-shadow: none !important;
  }
}

/* Extra safety: if any wrapper is adding a top border/shadow, kill it */
product-recommendations :where(
  .section,
  .spacing-style,
  .resource-list,
  .resource-list-grid,
  .resource-list--grid
){
  border-top: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
}
product-recommendations :where(
  .section,
  .spacing-style,
  .resource-list,
  .resource-list-grid,
  .resource-list--grid
)::before{
  content: none !important;
  display: none !important;
}

/* 2) FORCE only the IMAGE ↔ FOOTER divider to be stronger */
product-recommendations :where(
  .product-card .media,
  .product-card .product-media-container,
  .product-card__media,
  .product-media,
  .product-media__wrapper
){
  position: relative !important;
  overflow: visible !important;
}

/* Draw divider as 1px, but visually “hairline” on desktop if you want */
product-recommendations :where(
  .product-card .media,
  .product-card .product-media-container,
  .product-card__media,
  .product-media,
  .product-media__wrapper
)::after{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;

  /* ✅ only this is strengthened */
  height: 1px !important;
  background: var(--line) !important;
  opacity: 0.9 !important;

  pointer-events: none !important;
  z-index: 50 !important;
}

/* Optional: if you want the divider to look like true hairline on desktop,
   uncomment the block below (it will still NEVER disappear) */
/*
@media (min-width: 750px){
  product-recommendations :where(
    .product-card .media,
    .product-card .product-media-container,
    .product-card__media,
    .product-media,
    .product-media__wrapper
  )::after{
    transform: scaleY(0.5) translateZ(0) !important;
    transform-origin: bottom !important;
  }
}
*/





/* =========================================================
   RELATED PRODUCTS — MOBILE ROW DIVIDER (BETWEEN ROWS ONLY)
   - Restores the horizontal divider between row 1 and row 2
   - Does NOT create an outer top border
   ========================================================= */

@media (max-width: 749px){
  product-recommendations
  .section-resource-list
  .resource-list__item:nth-child(n+3)::before{
    /* top + left seams */
    box-shadow:
      inset 0 var(--lw) 0 0 var(--line),
      inset var(--lw) 0 0 0 var(--line) !important;
  }

  /* first column of each row: top seam only (no outer left border) */
  product-recommendations
  .section-resource-list
  .resource-list__item:nth-child(2n+1):nth-child(n+3)::before{
    box-shadow:
      inset 0 var(--lw) 0 0 var(--line) !important;
  }
}











/* =========================================================
   PRODUCT CARD FOOTER TEXT SPACING (THIS IS THE IMPORTANT PART)
   ========================================================= */

/* Apply consistent left/right padding to ALL footer text rows */
.product-card .product-card__content.product-grid__card
  > .spacing-style.text-block {
  padding-left: 8px !important;
  padding-right: 8px !important;
  box-sizing: border-box;
}

/* Tighten spacing between title row and description row */
.product-card .product-card__content.product-grid__card
  > .spacing-style.text-block {
  margin: 0 !important;
}

/* Small gap only between stacked text rows */
.product-card .product-card__content.product-grid__card
  > .spacing-style.text-block + .spacing-style.text-block {
  margin-top: 0px !important;
}

/* Ensure price row stays aligned right without extra padding conflicts */
.product-card .product-card__content.product-grid__card
  .price {
  padding-left: 0 !important;
}




/* =========================================================
   PRODUCT CARD PADDING FIX
   ========================================================= */

/* ---------- HOMEPAGE / SECTION RESOURCE LIST ---------- */
.section-resource-list.spacing-style.gap-style {
  --gap: 0px !important;
  --padding-inline-start: 0px !important;
  --padding-inline-end: 0px !important;
  --padding-block-start: 0px !important;
  --padding-block-end: 0px !important;
}

/* In case the grid still uses its own column/row gap vars */
.section-resource-list.spacing-style.gap-style .resource-list-grid {
  --resource-list-column-gap-desktop: 0px !important;
  --resource-list-column-gap-mobile: 0px !important;
  --resource-list-row-gap-desktop: 0px !important;
  --resource-list-row-gap-mobile: 0px !important;
  gap: 0 !important;
}

/* ---------- COLLECTION PAGES ---------- */
results-list.section.product-grid-container {
  --gap: 0px !important;
  --padding-inline-start: 0px !important;
  --padding-inline-end: 0px !important;
  --padding-block-start: 0px !important;
  --padding-block-end: 0px !important;
}

/* Collection grid internal gaps */
results-list.section.product-grid-container ul.product-grid {
  --product-grid-gap-mobile: 0px 0px !important;
  --product-grid-gap-desktop: 0px 0px !important;
  gap: 0 !important;
}





/* =========================================================
   PRODUCT CARD GUTTER FIX
   ========================================================= */

/* 1) Nuke the section gutters (left/right) + top/btm if any */
.section-resource-list,
.section-resource-list.spacing-style,
.section-resource-list.gap-style,
.section-resource-list.spacing-style.gap-style,

/* Collection template wrapper */
results-list.section.product-grid-container{
  --padding-inline-start: 0px !important;
  --padding-inline-end: 0px !important;
  --page-margin: 0px !important;

  --padding-block-start: 0px !important;
  --padding-block-end: 0px !important;

  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 2) Nuke grid gaps (Homepage resource-list grid) */
.section-resource-list [data-testid="resource-list-grid"],
.section-resource-list .resource-list-grid{
  --gap: 0px !important;
  --gap-desktop: 0px !important;
  --gap-mobile: 0px !important;

  --resource-list-column-gap-desktop: 0px !important;
  --resource-list-column-gap-mobile: 0px !important;

  gap: 0 !important;
  column-gap: 0 !important;
  row-gap: 0 !important;
}

/* 2b) Nuke grid gaps (Collection product grid) */
results-list.section.product-grid-container ul.product-grid{
  --product-grid-gap-mobile: 0px 0px !important;
  --product-grid-gap-desktop: 0px 0px !important;

  gap: 0 !important;
  column-gap: 0 !important;
  row-gap: 0 !important;
}

/* 3) Some builds put spacing on items instead of the grid (Homepage) */
.section-resource-list .resource-list__item,
.section-resource-list [data-testid="resource-list-grid"] > *{
  padding: 0 !important;
  margin: 0 !important;
}

/* 3b) Collection items */
results-list.section.product-grid-container li.product-grid__item{
  padding: 0 !important;
  margin: 0 !important;
}








/* =========================================================
   PRODUCT CARD - HOVER STATE
   ========================================================= */

/* ----------------------------
   DESKTOP / REAL HOVER DEVICES
   ---------------------------- */
@media (hover: hover) and (pointer: fine) {
  /* 1) Hover ONLY */
  .product-card:hover .product-card__content.product-grid__card {
    background: #FF751F !important;
  }

  /* 2) Force image area to stay light */
  .product-card:hover .product-card__content.product-grid__card .product-media-container,
  .product-card:hover .product-card__content.product-grid__card .product-media,
  .product-card:hover .product-card__content.product-grid__card slideshow-component {
    background: #F6F3F0 !important;
  }

  /* 3) Footer text → white */
  .product-card:hover .product-card__content.product-grid__card,
  .product-card:hover .product-card__content.product-grid__card * {
    color: #F6F3F0 !important;
  }

  /* 4) Borders stay consistent */
  .product-card:hover .product-card__content.product-grid__card {
    border-color: #303633 !important;
  }

  .product-card:hover .product-card__content.product-grid__card .product-media-container {
    border-bottom-color: #303633 !important;
  }
}

/* ----------------------------
   MOBILE / TOUCH DEVICES
   Use class instead of :hover
   ---------------------------- */
@media (hover: none) and (pointer: coarse) {
  .product-card.is-touch-hover .product-card__content.product-grid__card {
    background: #FF751F !important;
  }

  .product-card.is-touch-hover .product-card__content.product-grid__card .product-media-container,
  .product-card.is-touch-hover .product-card__content.product-grid__card .product-media,
  .product-card.is-touch-hover .product-card__content.product-grid__card slideshow-component {
    background: #F6F3F0 !important;
  }

  .product-card.is-touch-hover .product-card__content.product-grid__card,
  .product-card.is-touch-hover .product-card__content.product-grid__card * {
    color: #F6F3F0 !important;
  }

  .product-card.is-touch-hover .product-card__content.product-grid__card {
    border-color: #303633 !important;
  }

  .product-card.is-touch-hover .product-card__content.product-grid__card .product-media-container {
    border-bottom-color: #303633 !important;
  }
}





/* =========================================================
   PRODUCT CARD - SLIDESHOW FIX - DESKTOP ONLY
   ========================================================= */
@media (hover: hover) and (pointer: fine) {
  /* Stop slideshow track from moving on hover */
  .product-card slideshow-component,
  .product-card slideshow-component * {
    transition-property: opacity, color, background-color, border-color !important;
    transform: none !important;
  }

  /* If Horizon uses translateX on a track element */
  .product-card slideshow-component [style*="translate"],
  .product-card slideshow-component [class*="slide"],
  .product-card slideshow-component [class*="track"] {
    transform: none !important;
  }
}




/* =========================================================
   PRODUCT CARD - FOOTER HOVER INTERACTION REMOVED
   ========================================================= */
@media (hover: hover) and (pointer: fine) {
  /* Footer should NOT be a hover entry point */
  .product-card__content {
    pointer-events: none;
  }

  /* But keep links clickable */
  .product-card__content a,
  .product-card__content button {
    pointer-events: auto;
  }
}




/* =========================================================
   PRODUCT CARD - FOOTER HOVER INTERACTION REMOVED 2
   ========================================================= */
@media (hover: hover) and (pointer: fine) {

  /* Default state: prevent any hover-driven movement on the slideshow */
  .product-card:hover slideshow-component,
  .product-card:hover slideshow-component * {
    transform: none !important;
    transition: none !important;
  }

  /* When the slideshow itself is hovered, allow it again */
  .product-card:hover slideshow-component:hover,
  .product-card:hover slideshow-component:hover * {
    transform: unset !important;
    transition: unset !important;
  }
}








/* =========================================================
   PRODUCT CARD - SOLD OUT BADGE COLOUR/HOVER INTERACTION FIX
   ========================================================= */

.product-badges__badge {
  background-color: #303633 !important;
  color: #f6f3f0 !important;
}

/* Prevent hover / focus styles from changing it */
.product-card:hover .product-badges__badge,
.product-card:focus-within .product-badges__badge {
  background-color: #303633 !important;
  color: #f6f3f0 !important;
}





/* =========================================================
   PRODUCT CARD - SLIDESHOW ARROWS HIDE WHEN NOT HOVERED
   ========================================================= */

/* 1) Hide arrows by default */
.product-card slideshow-component .slideshow-control,
.product-card slideshow-component .slideshow-controls,
.product-card slideshow-component button[aria-label*="Next"],
.product-card slideshow-component button[aria-label*="Previous"] {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 120ms ease;
}

/* 2) Show arrows ONLY when the card is actually hovered */
.product-card:hover slideshow-component .slideshow-control,
.product-card:hover slideshow-component .slideshow-controls,
.product-card:hover slideshow-component button[aria-label*="Next"],
.product-card:hover slideshow-component button[aria-label*="Previous"] {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* 3) If focus makes them stick, force-hide when NOT hovered */
.product-card:not(:hover) slideshow-component .slideshow-control,
.product-card:not(:hover) slideshow-component .slideshow-controls,
.product-card:not(:hover) slideshow-component button[aria-label*="Next"],
.product-card:not(:hover) slideshow-component button[aria-label*="Previous"] {
  opacity: 0 !important;
  pointer-events: none !important;
}




/* =========================================
   PRODUCT CARD - TITLE FONT COLOUR
   ========================================= */

/* Product card title (grid / featured collection) */
.product-card a p,
.product-card__title,
.card__heading{
  color: #1600ac !important; /* ← change colour here */
}




/* =========================================================
   PRODUCT CARD - COLLECTIONS PAGE GRID — 4 COLUMNS DESKTOP, MEDIUM CARDS
   (Does NOT affect homepage sections) IMPORTANT ONE MORE BELOW (NUMBER 06 - COMES AFTER)
   ========================================================= */

/* Desktop */
@media (min-width: 750px){
  results-list.section.product-grid-container
  ul.product-grid{
    /* Force card sizing logic */
    --product-card-size: medium !important;

    /* Force columns */
    --desktop-columns: 4 !important;
    --columns-desktop: 4 !important;
    --product-grid-columns-desktop: 4 !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* Mobile (keep 2 columns as-is) */
@media (max-width: 749px){
  results-list.section.product-grid-container
  ul.product-grid{
    --mobile-columns: 2 !important;
    --columns-mobile: 2 !important;
    --product-grid-columns-mobile: 2 !important;
  }
}



/* NUMBER 05 FOOTER */





/* =========================================================
   FOOTER — Newsletter left half + 3 menus right half
   + Newsletter form: stacked input then button
   + Input: white fill, 0.5px #303633 border, #303633 text, 16px
   + Button: #1600AC, label Subscribe, #F6F3F0 16px
   + Controls for vertical spacing
   + Mobile: newsletter comes FIRST
   + Mobile: divider is drawn on FOOTER (true full-bleed)
   + Mobile: menu block spacing stays aligned across columns
   (REPLACE your footer CSS with this whole block)
   ========================================================= */

/* =========================================================
   🔧 CONTROLS — ADJUST THESE ONLY
   ========================================================= */
:root{
  --footer-newsletter-title-top-pad: 12px;     /* align with menu headings */
  --footer-newsletter-title-to-text: 8px;      /* title → paragraph */
  --footer-newsletter-text-to-input: 8px;      /* paragraph → email field */
  --footer-newsletter-input-to-button: 0px;    /* input → button */

  /* ✅ MOBILE DIVIDER CONTROLS */
  --footer-mobile-divider-enabled: 1;          /* 1=on, 0=off */
  --footer-mobile-divider-color: #303633;
  --footer-mobile-divider-thickness: 1px;

  /* Divider position from TOP of footer on mobile */
  --footer-mobile-divider-top: 264px;          /* <-- TUNE THIS */

  /* ✅ MOBILE MENUS POSITION (keeps Discover/Help aligned) */
  --footer-mobile-menus-top-gap: 18px;         /* space between divider and menu headings */
}

/* =========================================================
   Base layout (desktop/tablet)
   ========================================================= */
footer{
  position: relative !important; /* anchor the mobile divider */
}

footer .footer-content{
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  column-gap: clamp(24px, 4vw, 80px) !important;
  row-gap: 0 !important;
  align-items: start !important;
  padding-block-start: 24px !important;
  padding-block-end: 24px !important;
}

/* Newsletter TEXT block = left half, Row 1 */
footer .footer-content > [data-testid="group-block"],
footer .footer-content > .group-block{
  grid-column: 1 / 4 !important;
  grid-row: 1 !important;
  align-self: start !important;

  min-width: 0 !important;
  overflow: hidden !important;
}

/* Email signup block = left half, Row 2 */
footer .footer-content > .email-signup-block{
  grid-column: 1 / 4 !important;
  grid-row: 2 !important;
  align-self: start !important;

  width: 100% !important;
  max-width: 100% !important;

  --padding-block-start: 0px !important;
  --padding-block-end: 0px !important;
  padding: 0 !important;
  margin: 0 !important;

  position: relative !important;
}

/* Menus on right: span BOTH rows */
footer .footer-content > accordion-custom:nth-of-type(1){
  grid-column: 4 / 5 !important;
  grid-row: 1 / span 2 !important;
  align-self: start !important;
}
footer .footer-content > accordion-custom:nth-of-type(2){
  grid-column: 5 / 6 !important;
  grid-row: 1 / span 2 !important;
  align-self: start !important;
}
footer .footer-content > accordion-custom:nth-of-type(3){
  grid-column: 6 / 7 !important;
  grid-row: 1 / span 2 !important;
  align-self: start !important;
}

/* =========================================================
   FOOTER NEWSLETTER COPY (title + paragraph)
   ========================================================= */
footer .footer-content .group-block-content{
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

footer .footer-content .group-block-content :is(rte-formatter, .text-block, p, h1, h2, h3){
  max-width: 100% !important;
  min-width: 0 !important;
}

footer .footer-content .group-block-content h1,
footer .footer-content .group-block-content h2,
footer .footer-content .group-block-content h3,
footer .footer-content .group-block-content p{
  margin-block-start: 0 !important;
}

footer .footer-content .group-block-content h1,
footer .footer-content .group-block-content h2,
footer .footer-content .group-block-content h3{
  padding-block-start: var(--footer-newsletter-title-top-pad) !important;
  margin-block-end: var(--footer-newsletter-title-to-text) !important;
}

footer .footer-content .group-block-content p{
  margin-block-end: var(--footer-newsletter-text-to-input) !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

/* =========================================================
   FOOTER NEWSLETTER FORM — stacked input + button
   ========================================================= */
footer .email-signup-block,
footer .email-signup-block form,
footer .email-signup-block .email-signup{
  width: 100% !important;
  max-width: 100% !important;
}

/* Make the input+button wrapper vertical */
footer .email-signup-block .email-signup__input-group,
footer .email-signup-block .email-signup__input-group-integrated,
footer .email-signup-block .email-signup__input-group--integrated,
footer .email-signup-block .email-signup__input-group--arrow{
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: var(--footer-newsletter-input-to-button) !important;

  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}

/* INPUT */
footer input.email-signup__input{
  width: 100% !important;
  max-width: 100% !important;

  background: #ffffff !important;
  color: #303633 !important;
  font-size: 16px !important;

  border: 0.5px solid #303633 !important;
  border-radius: 8px !important;

  padding: 10px 18px !important;
  line-height: 1.2 !important;
  height: auto !important;

  outline: none !important;
}

footer input.email-signup__input::placeholder{
  color: #303633 !important;
  opacity: 0.65 !important;
}

/* BUTTON */
footer .email-signup-block .email-signup__button,
footer .email-signup-block button[type="submit"]{
  display: inline-flex !important;
  width: 100% !important;
  max-width: 100% !important;

  justify-content: center !important;
  align-items: center !important;

  padding: 14px 18px !important;
  border-radius: 8px !important;

  background: #1600AC !important;
  border: 0.5px solid #1600AC !important;

  color: #F6F3F0 !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1 !important;

  position: static !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;

  gap: 0 !important;
}

/* Hide any arrow/icon */
footer .email-signup-block .email-signup__button svg,
footer .email-signup-block .email-signup__button .icon,
footer .email-signup-block button[type="submit"] svg,
footer .email-signup-block button[type="submit"] .icon{
  display: none !important;
}

/* Force text label */
footer .email-signup-block .email-signup__button::before,
footer .email-signup-block button[type="submit"]::before{
  content: "Subscribe";
  color: #F6F3F0;
  font-size: 16px;
  line-height: 1;
}

/* =========================================================
   FOOTER - Mobile: newsletter comes FIRST
   + divider full-bleed
   + menus stay aligned
   ========================================================= */
@media (max-width: 749px){
  footer .footer-content{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 20px !important;
    row-gap: 22px !important;
    padding-block-start: 20px !important;
    padding-block-end: 20px !important;
  }

  /* full width blocks */
  footer .footer-content > [data-testid="group-block"],
  footer .footer-content > .group-block,
  footer .footer-content > .email-signup-block{
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }

  /* ORDER */
  footer .footer-content > [data-testid="group-block"],
  footer .footer-content > .group-block{ order: 1 !important; }
  footer .footer-content > .email-signup-block{ order: 2 !important; }
  footer .footer-content > accordion-custom:nth-of-type(1){ order: 3 !important; }
  footer .footer-content > accordion-custom:nth-of-type(2){ order: 4 !important; }
  footer .footer-content > accordion-custom:nth-of-type(3){ order: 5 !important; }

  /* Menus: two columns */
  footer .footer-content > accordion-custom:nth-of-type(1),
  footer .footer-content > accordion-custom:nth-of-type(2),
  footer .footer-content > accordion-custom:nth-of-type(3){
    grid-column: span 1 !important;
    grid-row: auto !important;
  }

  /* Mobile: input border becomes 1px */
  footer input.email-signup__input{
    border-width: 1px !important;
  }

  /* Remove any old divider attached to email block */
  footer .footer-content > .email-signup-block::after{
    content: none !important;
    display: none !important;
  }

  /* Full-bleed divider drawn on footer */
  footer::after{
    content: "" !important;
    display: block !important;

    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: var(--footer-mobile-divider-top) !important;

    height: var(--footer-mobile-divider-thickness) !important;
    background: var(--footer-mobile-divider-color) !important;

    pointer-events: none !important;
    opacity: var(--footer-mobile-divider-enabled) !important;
  }

  /* ✅ Move ALL menus together (keeps Discover & Help aligned) */
  footer .footer-content > accordion-custom:nth-of-type(1),
  footer .footer-content > accordion-custom:nth-of-type(2),
  footer .footer-content > accordion-custom:nth-of-type(3){
    margin-top: var(--footer-mobile-menus-top-gap) !important;
  }
}




/* =========================================================
   FOOTER — Socials becomes Instagram SVG icon on MOBILE
   Desktop unchanged
   Targets the Socials <details> by looking for your IG link
   ========================================================= */

/* ===============================
   🔧 CONTROLS (EDIT THESE)
   =============================== */
:root{
  --ig-mobile-size: 24px;        /* icon size */
  --ig-mobile-offset-top: 6px;   /* push down (+) or up (-) */
  --ig-mobile-color: #303633;    /* icon colour */
  --ig-mobile-hitbox: 40px;      /* tap target size */
}

/* ===============================
   MOBILE ONLY
   =============================== */
@media (max-width: 749px){

  /* 0) Find the Socials menu block via the IG URL (very reliable) */
  details.menu__details:has(a[href*="instagram.com/of__forms"]),
  details.menu__details:has(a[href*="instagram.com/of__forms/"]){
    /* keep whatever left padding Horizon uses so it aligns with Discover/Help/newsletter */
    position: relative;
  }

  /* 1) Hide the "Socials" heading (summary) ONLY for that block */
  details.menu__details:has(a[href*="instagram.com/of__forms"]) > summary,
  details.menu__details:has(a[href*="instagram.com/of__forms/"]) > summary{
    display: none !important;
  }

  /* 2) Force the content to be visible even when <details> is "closed" */
  details.menu__details:has(a[href*="instagram.com/of__forms"]) > summary + *,
  details.menu__details:has(a[href*="instagram.com/of__forms/"]) > summary + *{
    display: block !important;
  }

  /* 3) Turn the Instagram text link into an SVG icon (left-aligned) */
  details.menu__details:has(a[href*="instagram.com/of__forms"]) a[href*="instagram.com/of__forms"],
  details.menu__details:has(a[href*="instagram.com/of__forms/"]) a[href*="instagram.com/of__forms/"]{
    /* left align with other footer items */
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-start;

    /* consistent tap target */
    width: var(--ig-mobile-hitbox);
    height: var(--ig-mobile-hitbox);

    /* remove text but keep accessible */
    font-size: 0 !important;
    line-height: 0 !important;

    /* vertical position control */
    margin-top: var(--ig-mobile-offset-top);

    /* kill underlines / hover weirdness */
    text-decoration: none !important;
  }

  /* 4) The actual SVG icon (mask) */
  details.menu__details:has(a[href*="instagram.com/of__forms"]) a[href*="instagram.com/of__forms"]::before,
  details.menu__details:has(a[href*="instagram.com/of__forms/"]) a[href*="instagram.com/of__forms/"]::before{
    content: "";
    width: var(--ig-mobile-size);
    height: var(--ig-mobile-size);
    background-color: var(--ig-mobile-color);
    display: block;

    /* Instagram glyph as SVG mask (no PNG) */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='black'%20d='M7%202C4.239%202%202%204.239%202%207v10c0%202.761%202.239%205%205%205h10c2.761%200%205-2.239%205-5V7c0-2.761-2.239-5-5-5H7zm10%202c1.654%200%203%201.346%203%203v10c0%201.654-1.346%203-3%203H7c-1.654%200-3-1.346-3-3V7c0-1.654%201.346-3%203-3h10zm-5%203.5A4.5%204.5%200%201%200%2016.5%2012%204.505%204.505%200%200%200%2012%207.5zm0%207A2.5%202.5%200%201%201%2014.5%2012%202.503%202.503%200%200%201%2012%2014.5zM17.75%206.25a.75.75%200%201%201-1.5%200%20.75.75%200%200%201%201.5%200z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='black'%20d='M7%202C4.239%202%202%204.239%202%207v10c0%202.761%202.239%205%205%205h10c2.761%200%205-2.239%205-5V7c0-2.761-2.239-5-5-5H7zm10%202c1.654%200%203%201.346%203%203v10c0%201.654-1.346%203-3%203H7c-1.654%200-3-1.346-3-3V7c0-1.654%201.346-3%203-3h10zm-5%203.5A4.5%204.5%200%201%200%2016.5%2012%204.505%204.505%200%200%200%2012%207.5zm0%207A2.5%202.5%200%201%201%2014.5%2012%202.503%202.503%200%200%201%2012%2014.5zM17.75%206.25a.75.75%200%201%201-1.5%200%20.75.75%200%200%201%201.5%200z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: left center;
    mask-position: left center;
    -webkit-mask-size: contain;
    mask-size: contain;
  }

  /* 5) Optional: remove any extra spacing below that block */
  details.menu__details:has(a[href*="instagram.com/of__forms"]) > summary + *{
    padding-top: 0 !important;
  }
}




/* =========================================================
   FOOTER — FULL-BLEED TOP DIVIDER (BEHIND OVERLAYS)
   ========================================================= */
footer.shopify-section-group-footer-group{
  position: relative;
  z-index: 0;          /* create a low stacking context */
  isolation: isolate;  /* keep ::before contained in this context */
}

/* the divider (full bleed) */
footer.shopify-section-group-footer-group::before{
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  border-top: 1px solid #303633;
  height: 0;
  pointer-events: none;

  z-index: 0; /* ✅ stays behind everything in the footer AND behind drawers */
}

/* keep footer content above the line */
footer.shopify-section-group-footer-group > *{
  position: relative;
  z-index: 1;
}







/* =========================================================
   GENERAL - HIDES SKIP TO CONTENT - Hide it unless it’s truly focus-visible
   ========================================================= */

/* Keep skip link accessible: only show when keyboard focusing */
.skip-to-content-link{
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

/* Only show when user tabs (keyboard) */
.skip-to-content-link:focus-visible{
  left: 16px !important;
  top: 16px !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  padding: 12px 16px !important;
  z-index: 9999 !important;
}



/* NUMBER 06 COLLECTIONS PRODUCT CARD */




/* =========================================================
   COLLECTIONS / RESULTS PRODUCT GRID — HOMEPAGE STRUCTURE (FIXED)
   - No outer TOP border (won’t double with collection header)
   - No outer LEFT border
   - Vertical + horizontal seams are overlays (no rounding/misalignment)
   - Uses nth-of-type (immune to injected nodes / ordering quirks)
   - Keeps your mobile behaviour intact
   - Divider between image and footer included (stable at all widths)
   Scope: collections / results-list only
   ========================================================= */

/* ---------- VARIABLES ---------- */
:root{
  --line: #303633;
  --bg: #f6f3f0;
  --lw: 0.5px;
}
@media (max-width: 749px){
  :root{
    --lw: 1px;
    --line: rgba(48,54,51,0.55);
  }
}

/* =========================================================
   0) FORCE COLLECTION GRID COLUMNS
   ========================================================= */
@media (min-width: 750px){
  results-list.section.product-grid-container ul.product-grid{
    --product-card-size: medium !important;
    --desktop-columns: 4 !important;
    --columns-desktop: 4 !important;
    --product-grid-columns-desktop: 4 !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 749px){
  results-list.section.product-grid-container ul.product-grid{
    --mobile-columns: 2 !important;
    --columns-mobile: 2 !important;
    --product-grid-columns-mobile: 2 !important;
  }
}

/* =========================================================
   1) HARD RESET (kill Horizon borders/lines)
   ========================================================= */
results-list.section.product-grid-container :where(
  ul.product-grid,
  li.product-grid__item,
  .product-card,
  .product-card__content,
  .product-card__content *,
  .product-media-container,
  .media
){
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
}

results-list.section.product-grid-container :where(
  li.product-grid__item::before,
  li.product-grid__item::after,
  .product-card__content::before,
  .product-card__content::after
){
  content: none !important;
  display: none !important;
}

/* =========================================================
   2) GRID CONTAINER (no outer top line)
   ========================================================= */
results-list.section.product-grid-container ul.product-grid{
  gap: 0 !important;
  column-gap: 0 !important;
  row-gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  position: relative !important;
}

/* =========================================================
   3) GRID ITEMS — DRAW SEAMS (TOP + LEFT)
   - TOP seam = row divider
   - LEFT seam = column divider
   ========================================================= */
results-list.section.product-grid-container ul.product-grid > li.product-grid__item{
  position: relative !important;
  background: var(--bg) !important;
  isolation: isolate !important;
  margin: 0 !important;
  padding: 0 !important;
}

results-list.section.product-grid-container ul.product-grid > li.product-grid__item::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  z-index: 4 !important;

  /* default: TOP + LEFT seams */
  box-shadow:
    inset 0 var(--lw) 0 0 var(--line),   /* top */
    inset var(--lw) 0 0 0 var(--line);   /* left */
}

/* =========================================================
   4) REMOVE OUTER TOP SEAM (first row only)
   ========================================================= */
@media (min-width: 750px){
  /* first row (1–4): remove TOP seam, keep LEFT seam */
  results-list.section.product-grid-container
  ul.product-grid > li.product-grid__item:nth-of-type(-n+4)::before{
    box-shadow: inset var(--lw) 0 0 0 var(--line) !important; /* left only */
  }
}
@media (max-width: 749px){
  /* first row (1–2): remove TOP seam, keep LEFT seam */
  results-list.section.product-grid-container
  ul.product-grid > li.product-grid__item:nth-of-type(-n+2)::before{
    box-shadow: inset var(--lw) 0 0 0 var(--line) !important; /* left only */
  }
}

/* =========================================================
   5) REMOVE OUTER LEFT SEAM (first column only)
   - use nth-of-type so injected nodes don’t break counting
   ========================================================= */
@media (min-width: 750px){
  /* first column in 4-col grid: remove LEFT seam, keep TOP seam */
  results-list.section.product-grid-container
  ul.product-grid > li.product-grid__item:nth-of-type(4n+1)::before{
    box-shadow: inset 0 var(--lw) 0 0 var(--line) !important; /* top only */
  }

  /* top-left item should have NO seams at all (no outer top, no outer left) */
  results-list.section.product-grid-container
  ul.product-grid > li.product-grid__item:nth-of-type(1)::before{
    box-shadow: none !important;
  }
}

@media (max-width: 749px){
  /* first column in 2-col grid: remove LEFT seam, keep TOP seam */
  results-list.section.product-grid-container
  ul.product-grid > li.product-grid__item:nth-of-type(2n+1)::before{
    box-shadow: inset 0 var(--lw) 0 0 var(--line) !important; /* top only */
  }

  /* top-left item (1) should have NO seams at all */
  results-list.section.product-grid-container
  ul.product-grid > li.product-grid__item:nth-of-type(1)::before{
    box-shadow: none !important;
  }
}

/* =========================================================
   6) IMAGE ↔ FOOTER DIVIDER (OVERLAY + NEVER DISAPPEARS)
   - Overlay sits ABOVE the image (so it’s always visible)
   - Use 1px height to prevent “random disappear” at certain widths
   - Desktop opacity dials it back to feel like your 0.5px hairline
   ========================================================= */

results-list.section.product-grid-container :where(
  .product-card .product-media-container,
  .product-card .media
){
  position: relative !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: translateZ(0) !important;
}

results-list.section.product-grid-container :where(
  .product-card .product-media-container,
  .product-card .media
)::after{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;

  height: 1px !important;              /* IMPORTANT: never 0.5px */
  background: var(--line) !important;
  pointer-events: none !important;
  z-index: 10 !important;              /* above image */
  transform: translateZ(0) !important;
}

/* Desktop: make the 1px line *feel* like a hairline */
@media (min-width: 750px){
  results-list.section.product-grid-container :where(
    .product-card .product-media-container,
    .product-card .media
  )::after{
    opacity: 0.7 !important;
  }
}

/* Mobile: keep it crisp (your --line is already lighter on mobile) */
@media (max-width: 749px){
  results-list.section.product-grid-container :where(
    .product-card .product-media-container,
    .product-card .media
  )::after{
    opacity: 1 !important;
  }
}

results-list.section.product-grid-container :where(
  .product-card .product-media-container img,
  .product-card .media img
){
  display: block !important;
}

/* =========================================================
   7) FIX MISSING RIGHT SEAM ON INCOMPLETE LAST ROW
   - Only applies when last row is NOT full
   - Does NOT affect normal full rows
   ========================================================= */

/* ---------- DESKTOP (4 columns) ---------- */
@media (min-width: 750px){
  results-list.section.product-grid-container
  ul.product-grid > li.product-grid__item:last-child:not(:nth-of-type(4n)){
    position: relative !important;
  }

  results-list.section.product-grid-container
  ul.product-grid > li.product-grid__item:last-child:not(:nth-of-type(4n))::after{
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: var(--lw) !important;
    background: var(--line) !important;
    pointer-events: none !important;
    z-index: 5 !important;
  }
}

/* ---------- MOBILE (2 columns) ---------- */
@media (max-width: 749px){
  results-list.section.product-grid-container
  ul.product-grid > li.product-grid__item:last-child:not(:nth-of-type(2n)){
    position: relative !important;
  }

  results-list.section.product-grid-container
  ul.product-grid > li.product-grid__item:last-child:not(:nth-of-type(2n))::after{
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: var(--lw) !important;
    background: var(--line) !important;
    pointer-events: none !important;
    z-index: 5 !important;
  }
}










/* =========================================================
   COLLECTIONS MOBILE footer inset mismatch
   Goal: collections mobile matches homepage (no extra inset)
   ========================================================= */

@media (max-width: 749px){
  /* 1) Kill any wrapper inline padding/vars Horizon applies on collections */
  results-list.section.product-grid-container
  .product-card .product-card__content.product-grid__card{
    /* nuke variable-driven padding */
    --padding-inline-start: 0px !important;
    --padding-inline-end: 0px !important;

    /* nuke actual padding too (this is the real “extra inset”) */
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-inline: 0 !important;
    box-sizing: border-box !important;
  }

  /* 2) Re-apply your intended 8px padding to each text row */
  results-list.section.product-grid-container
  .product-card .product-card__content.product-grid__card
    > .spacing-style.text-block{
    padding-left: 8px !important;
    padding-right: 8px !important;
    padding-inline: 8px !important;
    box-sizing: border-box !important;
  }

  /* 3) If price still looks “pushed in”, also nuke its own inline vars */
  results-list.section.product-grid-container
  .product-card .product-card__content.product-grid__card
    product-price.text-block{
    --padding-inline-start: 0px !important;
    --padding-inline-end: 0px !important;
    padding-inline: 0 !important;
  }
}





/* =========================================================
   COLLECTIONS MOBILE ONLY — Sold out badge right inset (collections only)
   Target: .product-badges.product-badges--top-right
   ========================================================= */
@media (max-width: 749px){
  results-list.section.product-grid-container
  .product-card :where(.product-badges.product-badges--top-right){
    margin-right: 8px !important;
  }
}




/* =========================================================
   COLLECTIONS PRODUCT CARD VIEW FILTER — HIDE "VIEW" (grid/list) TOGGLE ON DESKTOP ONLY
   Keeps it on mobile
   ========================================================= */
@media (min-width: 750px){
  /* This is the wrapper you’re hovering in your screenshot */
  .column-options-wrapper{
    display: none !important;
  }
}




/* =========================================================
   COLLECTIONS - FILTER POSITION — Controls gutter (Filters/Sort) WITHOUT double padding
   Keeps product grid full-bleed
   No JS required
   ========================================================= */

/* Controls (edit these only) */
:root{
  --of-controls-gutter-desktop: 40px;
  --of-controls-gutter-mobile: 16px;
}

/* DESKTOP */
@media (min-width: 750px){
  /* Apply gutter ONCE (outer bar) */
  results-list.section.product-grid-container .facets.facets--horizontal{
    padding-left: var(--of-controls-gutter-desktop) !important;
    padding-right: var(--of-controls-gutter-desktop) !important;
    box-sizing: border-box !important;
  }

  /* Prevent inner wrappers from adding a second gutter */
  results-list.section.product-grid-container .facets.facets--horizontal :is(
    .facets__filters-wrapper,
    .facets__form,
    .sort-wrapper,
    .sorting,
    .column-options-wrapper
  ){
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Make sure the Filters trigger itself doesn’t carry extra offset */
  results-list.section.product-grid-container .facets.facets--horizontal .of-filters-trigger{
    margin-left: 0 !important;
  }
}

/* MOBILE */
@media (max-width: 749px){
  /* Apply gutter ONCE (outer bar) */
  results-list.section.product-grid-container .facets.facets--horizontal{
    padding-left: var(--of-controls-gutter-mobile) !important;
    padding-right: var(--of-controls-gutter-mobile) !important;
    box-sizing: border-box !important;
  }

  /* Prevent inner wrappers from adding a second gutter */
  results-list.section.product-grid-container .facets.facets--horizontal :is(
    .facets__filters-wrapper,
    .facets__form,
    .sort-wrapper,
    .sorting,
    .column-options-wrapper
  ){
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  results-list.section.product-grid-container .facets.facets--horizontal .of-filters-trigger{
    margin-left: 0 !important;
  }
}


/* 2) Explicitly keep the product grid FULL BLEED (no padding) */
results-list.section.product-grid-container ul.product-grid{
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}



/* NUMBER 07 COLLECTION FILTER */




/* =========================================================
   FILTERS — Desktop dropdown (CURRENT BUILD)
   - Trigger + dropdown panel
   - Sort: native select (immediate)
   - Facets: plain HTML (Apply / Clear all only)
   ========================================================= */

@media (min-width: 750px){

  :root{
    --of-line: rgba(48,54,51,.45);
    --of-ink: #303633;
    --of-bg: #F6F3F0;
    --of-white: #ffffff;

    --of-gutter: var(--page-width-padding, 16px);
    --of-panel-w: min(980px, calc(100vw - (var(--of-gutter) * 2)));

    --of-row-pad-y: 18px;
    --of-inner-pad-x: 18px;

    /* Sort select sizing */
    --of-select-h: 48px;
    --of-select-radius: 8px;
    --of-arrow-area: 52px;
    --of-select-font: 14px;
  }

  .facets.facets--horizontal,
  .facets{
    position: relative;
  }

  /* -----------------------------
     Trigger
     ----------------------------- */
  .of-filters-trigger{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--of-ink);
    font-size: 14px;
    line-height: 1.1;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
    user-select: none;
  }

  .of-filters-trigger__icon{
    width: 14px;
    height: 14px;
    transition: transform .18s ease;
  }
  .of-filters-open .of-filters-trigger__icon{
    transform: rotate(180deg);
  }

  /* -----------------------------
     Panel
     ----------------------------- */
  .of-filters-panel{
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 80;

    width: var(--of-panel-w);
    margin-left: var(--of-gutter);

    background: var(--of-bg);
    border: 1px solid var(--of-line);
    box-shadow: none;

    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
  }

  .of-filters-open .of-filters-panel{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .of-filters-panel__body{
    max-height: min(70vh, 720px);
    overflow: auto;
    overflow-x: hidden !important;
    padding: 0;
  }

  .of-filters-panel,
  .of-filters-panel *{
    color: var(--of-ink) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
  }

  /* -----------------------------
     Row summaries (Sort + facets)
     ----------------------------- */
  .of-filters-panel .facets__summary{
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    padding: var(--of-row-pad-y) var(--of-inner-pad-x) !important;
    border: 0 !important;
    margin: 0 !important;
  }

  /* Caret (match your Horizon caret sizing) */
  .of-filters-panel .of-row-caret{
    width: 12px !important;
    height: 12px !important;
    flex: 0 0 auto;
    transition: transform .18s ease;
    transform-origin: 50% 55%;
  }
  .of-filters-panel details[open] > summary .of-row-caret{
    transform: rotate(180deg);
  }

  /* -----------------------------
     Sort block (native select)
     ----------------------------- */
  .of-sort-body{
    padding: 0 0 14px;
    background: var(--of-bg);
  }

  .of-sort-select-wrap{
    position: relative;
    padding: 0 var(--of-inner-pad-x);
    margin-top: 10px;
  }

  .of-native-sort{
    width: 100%;
    height: var(--of-select-h);

    background: var(--of-white);
    border: 1px solid var(--of-line);
    border-radius: var(--of-select-radius);

    font-size: var(--of-select-font);
    line-height: 1.2;
    padding: 0 calc(var(--of-arrow-area) + 12px) 0 14px;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    /* Divider + chevron */
    background-image:
      linear-gradient(var(--of-line), var(--of-line)),
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 12 12'><path d='M2 4.5l4 4 4-4' fill='none' stroke='%23303633' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat, no-repeat;
    background-size: 1px 100%, 14px 14px;
    background-position:
      calc(100% - var(--of-arrow-area)) 0,
      calc(100% - 18px) 50%;

    cursor: pointer;
  }

  /* -----------------------------
     Remove top "Clear all" row and per-section clears
     (scoped tighter so it doesn't hide random links)
     ----------------------------- */

  /* Top bar / active-filters row variants */
  .facets__filters-wrapper .facets__status-wrapper,
  .facets__filters-wrapper .facets__remove,
  .facets__filters-wrapper .facets-remove,
  .facets__filters-wrapper .facets__remove-wrapper{
    display: none !important;
  }

  /* Remove per-section clear/reset inside OUR panel only */
  .of-filters-panel .facets__reset,
  .of-filters-panel .facets__clear,
  .of-filters-panel facet-clear-component,
  .of-filters-panel facet-remove-component{
    display: none !important;
  }

  /* -----------------------------
     Plain facets layout (your current system)
     ----------------------------- */

  .of-plain-options{
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    width: 100% !important;
  }

  .of-plain-option{
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;

    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .of-plain-option input.of-plain-input{
    margin: 0 !important;
    flex: 0 0 auto !important;
  }

  .of-plain-text{
    margin: 0 !important;
  }

  /* Price layout (min/max stacked) */
  .of-price-grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .of-price-field{
    display: grid !important;
    grid-template-columns: 80px 1fr !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .of-price-label{
    font-size: 14px !important;
    line-height: 1.1 !important;
  }

  .of-price-input{
    width: 100% !important;
    background: #fff !important;
    border: 1px solid var(--of-line) !important;
    border-radius: 8px !important;
    padding: 12px 14px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
  }
}





/* =========================================================
   FILTERS — Row chevrons (draw the arrows on the right)
   No JS change required (JS already prints .of-row-caret)
   ========================================================= */

@media (min-width: 750px){

  .of-filters-panel .of-row-caret{
    display: inline-block !important;
    width: 12px !important;
    height: 12px !important;
    flex: 0 0 12px !important;

    /* draw a consistent chevron like the rest of your UI */
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 12px 12px !important;

    /* DOWN chevron (single-line SVG — IMPORTANT) */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4.5l4 4 4-4' fill='none' stroke='%23303633' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;

    transition: transform .18s ease !important;
    transform-origin: 50% 55% !important;
  }

  /* Rotate when open (up arrow) */
  .of-filters-panel details[open] > summary .of-row-caret{
    transform: rotate(180deg) !important;
  }
}





/* =========================================================
   FILTERS — Section dividers (corrected)
   Single 1px divider per section
   No JS required
   ========================================================= */

@media (min-width: 750px){

  /* Divider under each collapsible section */
  .of-filters-panel__body > details{
    border-bottom: 1px solid #303633 !important;
  }

  /* Remove divider collision at footer boundary */
  .of-filters-panel__body{
    border-bottom: 0 !important;
  }

  .of-filters-panel__footer{
    border-top: 0 !important;
  }

  /* Kill margins that visually thicken lines */
  .of-filters-panel details,
  .of-filters-panel summary{
    margin: 0 !important;
  }

  /* Optional breathing room (safe) */
  .of-filters-panel__footer{
    padding-top: 16px;
  }
}






/* =========================================================
   FILTERS — Footer buttons (Clear / Apply) to match reference
   - CSS-only (no JS change)
   - Visually changes "Clear all" -> "Clear"
   ========================================================= */

@media (min-width: 750px){

  :root{
    /* Footer spacing + sizing controls */
    --of-footer-pad-y: 18px;         /* padding top/bottom inside footer bar */
    --of-footer-pad-x: 22px;         /* padding left/right inside footer bar */
    --of-footer-gap: 28px;           /* gap between Clear and Apply */
    --of-footer-font: 14px;          /* match your row label size */
    --of-apply-h: 56px;              /* button height */
    --of-apply-radius: 10px;         /* button corner radius */
    --of-apply-maxw: 440px;          /* max width of Apply button */
  }

    /* Footer bar */
  .of-filters-panel .of-filters-panel__footer{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: var(--of-footer-gap) !important;
    padding: var(--of-footer-pad-y) var(--of-footer-pad-x) !important;

    /* divider handled elsewhere (divider system) */
    border-top: 0 !important;

    background: #F6F3F0 !important;
  }


  /* ---------- CLEAR (left) — centered like Apply ---------- */
.of-filters-panel .of-filters-footer__btn--clear{
  /* match Apply's vertical rhythm */
  height: var(--of-apply-h) !important;
  padding: 0 34px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  color: #303633 !important;
  font-weight: 400 !important;
  white-space: nowrap !important;
  background: transparent !important;
  border: 0 !important;

  /* prevent it from collapsing smaller than text */
  min-width: max-content !important;
}

/* Visually rename "Clear all" -> "Clear" (CSS-only, centered) */
.of-filters-panel .of-filters-footer__btn--clear{
  font-size: 0 !important; /* hide original text */
}

.of-filters-panel .of-filters-footer__btn--clear::before{
  content: "Clear";
  font-size: var(--of-footer-font);
  line-height: 1 !important;
  color: #303633;
}

/* Hover affordance */
.of-filters-panel .of-filters-footer__btn--clear:hover::before{
  text-decoration: underline;
}


  /* ---------- APPLY (right) ---------- */
  .of-filters-panel .of-filters-footer__btn--apply{
    background: #1600AC !important;
    color: #F6F3F0 !important;

    height: var(--of-apply-h) !important;
    padding: 0 34px !important;

    border: 1px solid #1600AC !important;
    border-radius: var(--of-apply-radius) !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    max-width: var(--of-apply-maxw) !important;

    white-space: nowrap !important;
  }

  .of-filters-panel .of-filters-footer__btn--apply:hover{
    filter: brightness(0.95);
  }

  /* Nice focus states (keyboard) */
  .of-filters-panel .of-filters-footer__btn:focus-visible{
    outline: 2px solid rgba(48,54,51,0.55) !important;
    outline-offset: 3px !important;
  }
}






/* =========================================================
   FILTERS — SPACING CONTROLS (NO JS REQUIRED)
   Controls ONLY padding. No layout / logic changes.
   ========================================================= */

@media (min-width: 750px){

  /* ================================
     🔧 ROW (SUMMARY) SPACING CONTROLS
     ================================ */

  :root{
    /* Sort / Availability / Price / Category rows */
    --of-row-pad-top: 18px;
    --of-row-pad-bottom: 18px;
    --of-row-pad-left: 18px;

    /* ================================
       🔧 OPTION (CHECKBOX LIST) CONTROLS
       ================================ */

    /* Space ABOVE first option */
    --of-options-pad-top: 12px;

    /* Space BELOW last option */
    --of-options-pad-bottom: 14px;

    /* Left indent for checkbox + label */
    --of-options-pad-left: 18px;

    /* Vertical gap between options */
    --of-option-gap: 14px;
  }

  /* =====================================
     APPLY TO COLLAPSIBLE SUMMARY ROWS
     ===================================== */

  .of-filters-panel .facets__summary{
    padding-top: var(--of-row-pad-top) !important;
    padding-bottom: var(--of-row-pad-bottom) !important;
    padding-left: var(--of-row-pad-left) !important;
    padding-right: var(--of-row-pad-left) !important;
  }

  /* =====================================
     APPLY TO OPTIONS CONTAINER
     (Availability / Category content)
     ===================================== */

  .of-filters-panel .of-plain-facet__display{
    padding-top: var(--of-options-pad-top) !important;
    padding-bottom: var(--of-options-pad-bottom) !important;
    padding-left: var(--of-options-pad-left) !important;
    padding-right: var(--of-row-pad-left) !important;
  }

  /* =====================================
     STACK + GAP FOR OPTIONS
     ===================================== */

  .of-plain-options{
    display: flex !important;
    flex-direction: column !important;
    gap: var(--of-option-gap) !important;
  }

  /* Individual option rows */
  .of-plain-option{
    padding: 0 !important;
    margin: 0 !important;
  }
}




/* =========================================================
   FILTERS — CLEAR/APPLY BUTTON layout: true 2-column centering
   No JS required
   ========================================================= */

@media (min-width: 750px){

  /* Force footer to be two equal halves */
  .of-filters-panel .of-filters-panel__footer{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    align-items: center !important;

    /* keep your existing padding feel */
    padding: 28px 34px !important;   /* tweak if needed */
    gap: 28px !important;            /* space between left/right halves */
  }

  /* Left: Clear centered within its half */
  .of-filters-panel .of-filters-footer__btn--clear{
    justify-self: center !important;
    align-self: center !important;

    height: var(--of-apply-h, 56px) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 34px !important;
    background: transparent !important;
    border: 0 !important;
    color: #303633 !important;
  }

  /* Right: Apply fills its half */
  .of-filters-panel .of-filters-footer__btn--apply{
    justify-self: stretch !important;
    align-self: center !important;
    width: 100% !important;
  }
}





/* =========================================================
   FILTERS — Panel sizing controls
   Narrower + taller dropdown
   CSS only — NO JS required
   ========================================================= */

@media (min-width: 750px){

  :root{
    /* 🔧 PANEL WIDTH */
    --of-panel-max-width: 400px;    /* narrower than before (try 760–900) */
    --of-panel-min-width: 280px;    /* prevents it from collapsing too small */

    /* 🔧 PANEL HEIGHT */
    --of-panel-max-height: 82vh;    /* taller overall panel */
    --of-panel-body-max-height: 68vh; /* scrollable content area */
  }

  /* Panel shell */
  .of-filters-panel{
    max-width: var(--of-panel-max-width) !important;
    min-width: var(--of-panel-min-width) !important;
  }

  /* Inner wrapper (safety) */
  .of-filters-panel__inner{
    width: 100% !important;
  }

  /* Scrollable body — this is what makes it feel taller */
  .of-filters-panel__body{
    max-height: var(--of-panel-body-max-height) !important;
    overflow-y: auto !important;
  }
}





/* =========================================================
   FILTERS — APPLY/CLEAR BUTTON SPACING & SIZE
   Clear / Apply
   CSS only — NO JS required
   ========================================================= */

@media (min-width: 750px){

  :root{
    /* 🔧 FOOTER VERTICAL SPACING */
    --of-footer-pad-top: 16px;        /* space above buttons */
    --of-footer-pad-bottom: 16px;     /* space below buttons */

    /* 🔧 BUTTON HEIGHT (Clear + Apply) */
    --of-footer-btn-h: 40px;          /* <<< MAIN CONTROL */
  }

  /* Footer container spacing */
  .of-filters-panel .of-filters-panel__footer{
    padding-top: var(--of-footer-pad-top) !important;
    padding-bottom: var(--of-footer-pad-bottom) !important;
  }

  /* Apply height consistently to BOTH buttons */
  .of-filters-panel .of-filters-footer__btn{
    height: var(--of-footer-btn-h) !important;
  }
}




/* =========================================================
   FILTERS — Panel vertical alignment control
   Raise / lower the panel relative to trigger
   CSS-only
   ========================================================= */

@media (min-width: 750px){

  :root{
    /* 🔧 MAIN CONTROL */
    --of-panel-offset-y: 0px; /* negative = move UP */
  }

  .of-filters-panel{
    top: calc(100% + var(--of-panel-offset-y)) !important;
  }
}




/* =========================================================
   FILTERS — Outer container border + subtle shadow
   Pure CSS
   ========================================================= */

@media (min-width: 750px){

  .of-filters-panel{
    border: 1px solid #303633 !important;
    box-sizing: border-box !important;

    /* subtle elevation (non-modal, reference-style) */
    box-shadow:
      0 8px 20px rgba(0,0,0,0.08),
      0 8px 20px rgba(0,0,0,0.08),
  }

  .of-filters-panel__inner{
    border: 0 !important;
  }
}




@media (min-width: 750px){

  /* Optical alignment for Filters chevron */
  .of-filters-trigger__icon{
    position: relative;
    top: -1px; /* 👈 optical nudge — adjust between 0.5px–1.5px if needed */
  }

}




/* =========================================================
   FILTER — Hide OUTSIDE Clear all + OUTSIDE Sort (keep only your panel UI)
   No JS required
   ========================================================= */

@media (min-width: 750px){

  /* Scope: the top controls row on collection/results pages */
  results-list.section.product-grid-container .facets.facets--horizontal{

    /* 1) Kill the outside "Clear all" / active-filters strip */
    .facets__status-wrapper,
    .active-facets,
    .facets__remove,
    .facets__remove-wrapper,
    facet-remove-component,
    facet-clear-component,
    a[href*="clear"],
    a[href*="remove"],
    button[name="clear"],
    button[name="remove"]{
      display: none !important;
    }

    /* 2) Kill the outside Sort on the right (your Sort lives inside the panel) */
    .sort-wrapper,
    .sorting,
    .facets__sort,
    facet-sort-form,
    sort-by,
    [data-sort]{
      display: none !important;
    }

    /* Optional: if the “1 item / 8 items” count is part of that right cluster */
    .product-count,
    .results-count,
    .facets__product-count,
    .collection-product-count{
      display: none !important;
    }
  }
}

/* Mobile too (optional, but keeps behavior consistent) */
@media (max-width: 749px){
  results-list.section.product-grid-container .facets{
    .facets__status-wrapper,
    .active-facets,
    .facets__remove,
    .facets__remove-wrapper,
    facet-remove-component,
    facet-clear-component,
    a[href*="clear"],
    a[href*="remove"],
    button[name="clear"],
    button[name="remove"],
    .sort-wrapper,
    .sorting,
    .facets__sort,
    facet-sort-form,
    sort-by,
    [data-sort],
    .product-count,
    .results-count,
    .facets__product-count,
    .collection-product-count{
      display: none !important;
    }
  }
}




/* =========================================================
   FILTER — HIDE TOPBAR SORT COMPONENT (desktop)
   No JS required
   Paste at VERY BOTTOM of base.css
   ========================================================= */

@media (min-width: 750px){
  /* Hide the Sort control in the main toolbar/topbar */
  results-list.section.product-grid-container
  sorting-filter-component.sorting-filter.sorting-filter__horizontal{
    display: none !important;
  }

  /* Make sure Sort still shows inside your custom filter panel (if present there) */
  .of-filters-panel
  sorting-filter-component.sorting-filter{
    display: block !important;
  }
}





/* =========================================================
   FILTERS — Hover control
   - Disable ALL hover effects inside filter content
   - Re-enable hover ONLY for Clear + Apply buttons
   - CSS-only (no JS)
   ========================================================= */

@media (min-width: 750px){

  /* -------------------------------------------------------
     1) KILL ALL HOVERS inside filter panel (sections + options)
     ------------------------------------------------------- */

  .of-filters-panel *,
  .of-filters-panel *:hover{
    background-color: inherit !important;
    color: inherit !important;
    text-decoration: none !important;
    box-shadow: none !important;
  }

  /* Prevent cursor changes on filter rows */
  .of-filters-panel details summary,
  .of-filters-panel label,
  .of-filters-panel input,
  .of-filters-panel summary *{
    cursor: default !important;
  }

  /* -------------------------------------------------------
     2) CLEAR button — hover only
     ------------------------------------------------------- */

  .of-filters-panel
  .of-filters-footer__btn--clear{
    transition: color 0.15s ease !important;
  }

  .of-filters-panel
  .of-filters-footer__btn--clear:hover::before{
    color: #FF751F !important;
    text-decoration: underline !important;
  }

  /* -------------------------------------------------------
     3) APPLY button — hover only
     ------------------------------------------------------- */

  .of-filters-panel
  .of-filters-footer__btn--apply{
    transition: background-color 0.15s ease !important;
  }

  .of-filters-panel
  .of-filters-footer__btn--apply:hover{
    background-color: #FF751F !important;
    border-color: #FF751F !important;
  }
}





/* =========================================================
   FILTERS — Apply button hover text lock
   ========================================================= */

@media (min-width: 750px){

  .of-filters-panel
  .of-filters-footer__btn--apply:hover,
  .of-filters-panel
  .of-filters-footer__btn--apply:hover *{
    color: #F6F3F0 !important;
  }
}





/* =========================================================
   FILTER BAR DIVIDERS — Mobile + Desktop (Horizon)
   Mobile element:  .facets-toggle
   Desktop element: .facets.facets--horizontal
   ========================================================= */

/* 🔧 CONTROLS — adjust these only */
:root{
  --of-filters-bar-line: #303633;

  /* Desktop */
  --of-filters-bar-pad-top: 4px;
  --of-filters-bar-pad-bottom: 4px;

  /* Mobile */
  --of-filters-mobile-pad-top: 8px;
  --of-filters-mobile-pad-bottom: 8px; /* your screenshot shows 0 bottom currently */
  --of-filters-mobile-pad-x: 16px;
}

/* =========================
   DESKTOP (>= 750px)
   ========================= */
@media (min-width: 750px){
  .facets.facets--horizontal{
    padding-top: var(--of-filters-bar-pad-top) !important;
    padding-bottom: var(--of-filters-bar-pad-bottom) !important;

    border-top: 1px solid var(--of-filters-bar-line) !important;
    border-bottom: 1px solid var(--of-filters-bar-line) !important;

    box-sizing: border-box !important;
    background: transparent !important;
  }

  .facets.facets--horizontal::before,
  .facets.facets--horizontal::after{
    content: none !important;
  }
}

/* =========================
   MOBILE (<= 749px)
   ========================= */
@media (max-width: 749px){

  /* Use high specificity + shorthand padding to beat inline/theme rules */
  results-list.section.product-grid-container div.facets-toggle,
  results-list.section.product-grid-container .facets-block-wrapper--horizontal > .facets-toggle{
    /* 🔥 this is the key: override the whole shorthand */
    padding: var(--of-filters-mobile-pad-top) var(--of-filters-mobile-pad-x) var(--of-filters-mobile-pad-bottom) !important;

    border-top: 1px solid var(--of-filters-bar-line) !important;
    border-bottom: 1px solid var(--of-filters-bar-line) !important;

    box-sizing: border-box !important;
    background: transparent !important;
  }

  results-list.section.product-grid-container .facets-toggle::before,
  results-list.section.product-grid-container .facets-toggle::after{
    content: none !important;
  }
}






/* =========================================================
   FILTER - GAP BETWEEN FILTER BAR + PRODUCT GRID REMOVAL
   (override Shopify inline CSS variables)
   CSS-only
   ========================================================= */

/* Controls (edit these only) */
:root{
  --of-controls-to-grid-gap: 0px;   /* set 0 to fully close */
}

/* =========================
   Desktop (>= 750px)
   ========================= */
@media (min-width: 750px){

  /* 1) Kill the section's top padding that pushes the grid down */
  results-list.section.product-grid-container{
    --padding-block-start: 0px !important;
    padding-block-start: 0px !important;
    margin-block-start: 0px !important;
  }

  /* 2) Kill the facets/control bar bottom spacing */
  results-list.section.product-grid-container .facets.facets--horizontal,
  results-list.section.product-grid-container .facets-block-wrapper--horizontal,
  results-list.section.product-grid-container .facets-block-wrapper{
    --facets-margin: 0px !important;
    --facets-inner-padding-block: 0px !important;
    --facets-inner-padding-block-start: 0px !important;
    --facets-inner-padding-block-end: var(--of-controls-to-grid-gap) !important;

    padding-block-end: var(--of-controls-to-grid-gap) !important;
    margin-block-end: 0px !important;
  }

  /* 3) Also nuke any top offset on the wrapper that immediately follows */
  results-list.section.product-grid-container .collection-wrapper{
    margin-top: 0px !important;
    padding-top: 0px !important;
  }
}

/* =========================
   Mobile (<= 749px)
   IMPORTANT: mobile bar is .facets-toggle (NOT .facets.facets--horizontal)
   ========================= */
@media (max-width: 749px){

  /* 1) Kill the section's top padding that pushes the grid down */
  results-list.section.product-grid-container{
    --padding-block-start: 0px !important;
    padding-block-start: 0px !important;
    margin-block-start: 0px !important;
  }

  /* 2) Kill the wrapper spacing Horizon adds on mobile */
  results-list.section.product-grid-container .facets-block-wrapper--horizontal,
  results-list.section.product-grid-container .facets-block-wrapper{
    --facets-margin: 0px !important;
    --facets-inner-padding-block: 0px !important;
    --facets-inner-padding-block-start: 0px !important;
    --facets-inner-padding-block-end: 0px !important;

    padding-block: 0px !important;
    padding-block-end: 0px !important;
    margin: 0px !important;
    margin-block-end: 0px !important;
  }

  /* 3) Kill the mobile filter bar's own bottom padding/margin */
  results-list.section.product-grid-container .facets-toggle{
    margin-bottom: 0px !important;
    padding-bottom: 0px !important;

    /* these are set inline on your element in the screenshot */
    --facets-margin: 0px !important;
    --facets-inner-padding-block: 0px !important;
  }

  /* 4) Remove any top offset on the grid wrapper */
  results-list.section.product-grid-container .collection-wrapper{
    margin-top: 0px !important;
    padding-top: 0px !important;
  }
}






/* =========================================================
   FILTERS — Checkbox styling (REFERENCE-style)
   CSS-only (NO JS)
   Scopes to your filter panel only: .of-filters-panel
   ========================================================= */

:root{
  /* ---- CONTROLS (edit these only) ---- */
  --of-check-size: 16px;                 /* box size */
  --of-check-radius: 0px;               /* 0 = sharp corners */
  --of-check-border: 1px;               /* border thickness */
  --of-check-border-color: #303633;     /* border color */
  --of-check-bg: #F6F3F0;               /* box fill */
  --of-check-gap: 16px;                 /* space between box and label text */
  --of-check-y-nudge: 0px;              /* + moves checkbox down, - moves up */

  --of-checkmark-color: #303633;        /* tick color */
  --of-checkmark-stroke: 2.2;           /* tick stroke thickness (svg) */
  --of-checkmark-scale: 72%;            /* tick size inside box */
}

/* Make each option row align like the reference */
.of-filters-panel label:has(input[type="checkbox"]),
.of-filters-panel .facets__label:has(input[type="checkbox"]),
.of-filters-panel .facet-checkbox:has(input[type="checkbox"]){
  display: flex !important;
  align-items: center !important;
  gap: var(--of-check-gap) !important;
}

/* The checkbox itself */
.of-filters-panel input[type="checkbox"]{
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;

  width: var(--of-check-size) !important;
  height: var(--of-check-size) !important;

  border: var(--of-check-border) solid var(--of-check-border-color) !important;
  border-radius: var(--of-check-radius) !important;
  background: var(--of-check-bg) !important;

  display: inline-block !important;
  flex: 0 0 var(--of-check-size) !important;

  /* vertical alignment tweak */
  transform: translateY(var(--of-check-y-nudge)) !important;

  /* kill native blue */
  accent-color: transparent !important;

  /* tick is drawn via bg-image only when checked */
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: var(--of-checkmark-scale) var(--of-checkmark-scale) !important;

  cursor: pointer !important;
}

/* Checked state: draw crisp tick */
.of-filters-panel input[type="checkbox"]:checked{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M1 6.5 L6 11 L15 1' fill='none' stroke='%23303633' stroke-width='2.2' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E") !important;
}

/* If you change --of-checkmark-color or --of-checkmark-stroke,
   update the data-uri above too. (Keeping it simple + stable.) */

/* Nice focus ring (keyboard) */
.of-filters-panel input[type="checkbox"]:focus-visible{
  outline: 2px solid rgba(48,54,51,0.55) !important;
  outline-offset: 3px !important;
}

/* OPTIONAL: prevent any hover styling from your theme touching options */
.of-filters-panel label:has(input[type="checkbox"]):hover,
.of-filters-panel .facets__label:has(input[type="checkbox"]):hover,
.of-filters-panel .facet-checkbox:has(input[type="checkbox"]):hover{
  background: transparent !important;
}





/* =========================================================
   FILTERS — Panel horizontal position control
   CSS-only (NO JS)
   ========================================================= */

:root{
  /* ---- CONTROL ---- */
  --of-filters-shift-x: -36px;   /* + moves RIGHT, - moves LEFT */
}

@media (min-width: 750px){
  .of-filters-panel{
    transform: translateX(var(--of-filters-shift-x)) !important;
  }
}




/* =========================================================
   FILTER - PRICE SLIDER (custom handles)
   - Range inputs are hidden (value holders only)
   - Handles are the draggable UI
   ========================================================= */

.of-price-slider { padding: 18px 0 10px; }

.of-price-track{
  position: relative;
  padding: 18px 0 12px;
}

/* Base track */
.of-price-track::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top: 33px;
  height: 6px;
  border-radius: 999px;
  background: rgba(48,54,51,0.20);
  pointer-events: none;
}

/* Filled range */
.of-price-fill{
  position:absolute;
  top: 33px;
  height: 6px;
  border-radius: 999px;
  background: rgba(0,0,0,0.35);
  pointer-events: none !important;
}

/* Bubbles (labels) */
.of-price-bubble{
  position:absolute;
  top: 0;
  transform: translateX(-50%);
  background: #0b0b0b;
  color: #fff;
  font-size: 12px;
  line-height: 1;
  padding: 7px 10px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none !important;
}

/* ✅ Hide native ranges (still present for value storage) */
.of-price-range{
  position: absolute;
  left: 0; top: 22px;
  width: 100%;
  height: 24px;
  opacity: 0 !important;
  pointer-events: none !important;
  -webkit-appearance: none;
  appearance: none;
}

/* ✅ Draggable handles */
.of-price-handle{
  position: absolute;
  top: 22px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  transform: translateX(-50%);
  border: 1px solid rgba(48,54,51,0.35);
  background: #f6f3f0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.10);
  pointer-events: auto !important;
  touch-action: none;
  z-index: 10;
}





/* =========================================================
   FILTER — PRICE SLIDER APPEARANCE (FIXED, SIMPLIFIED, WORKING)
   ========================================================= */

:root{
  --of-panel-bg: #F6F3F0;
  --of-rail-fill: #1600AC;
  --of-stroke: #303633;

  --of-rail-h: 10px;
  --of-rail-top: 36px;

  --of-handle: 16px;      /* ↓ smaller handle */
  --of-cutout: 3px;       /* ↓ smaller cutout */
}

/* Layout */
.of-filters-panel .of-price-slider{
  padding: 18px 0 14px !important;
}

.of-filters-panel .of-price-track{
  position: relative !important;
  padding: 26px 0 22px !important;
  user-select: none !important;
  overflow: visible !important;
}

/* Rail */
.of-filters-panel .of-price-track::before{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: var(--of-rail-top) !important;
  height: var(--of-rail-h) !important;
  border-radius: 999px !important;

  background: var(--of-rail-fill) !important;
  box-shadow: inset 0 0 0 1px var(--of-stroke) !important;

  z-index: 1 !important;
  pointer-events: none !important;
}

/* Selected range */
.of-filters-panel .of-price-fill{
  position: absolute !important;
  top: var(--of-rail-top) !important;
  height: var(--of-rail-h) !important;
  border-radius: 999px !important;

  background: var(--of-rail-fill) !important;
  box-shadow: inset 0 0 0 1px var(--of-stroke) !important;

  z-index: 2 !important;
  pointer-events: none !important;
}

/* Handle */
.of-filters-panel .of-price-handle{
  position: absolute !important;

  top: calc(
    var(--of-rail-top)
    + (var(--of-rail-h) / 2)
    - (var(--of-handle) / 2)
  ) !important;

  width: var(--of-handle) !important;
  height: var(--of-handle) !important;
  border-radius: 50% !important;
  transform: translateX(-50%) !important;

  background: var(--of-panel-bg) !important;
  border: 1px solid var(--of-stroke) !important;
  box-sizing: border-box !important;

  box-shadow:
    0 4px 10px rgba(0,0,0,0.18) !important;

  z-index: 5 !important;
  cursor: grab !important;
}

/* Cutout (just enough to push rail behind handle) */
.of-filters-panel .of-price-handle{
  position: absolute !important;

  top: calc(
    var(--of-rail-top)
    + (var(--of-rail-h) / 2)
    - (var(--of-handle) / 2)
  ) !important;

  width: var(--of-handle) !important;
  height: var(--of-handle) !important;
  border-radius: 999px !important;
  transform: translateX(-50%) !important;

  background: #F6F3F0 !important;

  /* ✅ guaranteed visible border */
  border: 0 !important;
  outline: 1px solid #303633 !important;
  outline-offset: 0 !important;

  box-shadow:
    0 6px 14px rgba(0,0,0,0.20),
    0 2px 4px rgba(0,0,0,0.14) !important;

  z-index: 9999 !important;
  pointer-events: auto !important;
  touch-action: none !important;
}

  width: calc(100% + (var(--of-cutout) * 2)) !important;
  height: calc(100% + (var(--of-cutout) * 2)) !important;

  transform: translate(-50%, -50%) !important;
  border-radius: 999px !important;

  background: var(--of-panel-bg) !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

.of-filters-panel .of-price-handle:active{
  cursor: grabbing !important;
  transform: translateX(-50%) scale(0.95) !important;
}




/* =========================================================
   FILTERS - PRICE SLIDER — PADDING CONTROLS (NO COLLAPSED HEIGHT CHANGE)
   - Adjusts spacing around the slider ONLY inside the opened Price panel
   - Does NOT affect the collapsed row height
   ========================================================= */

:root{
  /* ✅ Controls — change these */
  --of-price-pad-top: 0px;
  --of-price-pad-bottom: 14px;
  --of-price-pad-left: 24px;
  --of-price-pad-right: 24px;
}

/* Apply padding ONLY to the price slider block (inside the open panel) */
.of-filters-panel details.of-plain-facet--price .of-price-slider{
  padding-top: var(--of-price-pad-top) !important;
  padding-bottom: var(--of-price-pad-bottom) !important;

  /* left/right spacing without altering the facet row height */
  padding-left: var(--of-price-pad-left) !important;
  padding-right: var(--of-price-pad-right) !important;

  box-sizing: border-box !important;
}

/* Keep the actual rail spanning the padded area (no overflow weirdness) */
.of-filters-panel details.of-plain-facet--price .of-price-track::before{
  left: 0 !important;
  right: 0 !important;
}




/* =========================================================
   FILTERS PRICE SLIDER — MIN / MAX PRICE BADGES
   ========================================================= */

.of-filters-panel .of-price-bubble{
  background: #1600AC !important;
  color: #F6F3F0 !important;

  padding: 6px 10px !important;
  border-radius: 8px !important;

  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 400 !important;

  /* keep positioning intact */
  transform: translateX(-50%) !important;

  /* ensure badge sits above slider */
  z-index: 20 !important;

  white-space: nowrap !important;
}




/* =========================================================
   FILTERS — NO FOUC + INSTANT "FILTERS" BUTTON (DESKTOP)
   - Prevents native Availability/Price/Category flash
   - Shows an immediate CSS placeholder button
   - Placeholder disappears once JS injects .of-filters-trigger
   ========================================================= */

@media (min-width: 750px){

  /* Ensure wrapper acts as anchor for placeholder */
  .facets__filters-wrapper{
    position: relative !important;
    min-height: 44px !important; /* keeps bar height stable */
  }

  /* 1) Hide native inline facets row immediately (prevents flash) */
  .facets__filters-wrapper .facets__overflow-list,
  .facets__filters-wrapper overflow-list.facets__overflow-list{
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* 2) CSS placeholder "Filters" button (shows instantly before JS) */
  .facets__filters-wrapper::before{
    content: "Filters" !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;

    height: 44px !important;
    padding: 0 14px !important;

    color: #303633 !important;
    background: transparent !important;

    /* match your UI vibe (keep it simple) */
    font-size: 16px !important;
    line-height: 1 !important;
    font-weight: 400 !important;

    /* position in the same place your real trigger appears */
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;

    pointer-events: none !important; /* purely visual */
    z-index: 5 !important;
  }

  /* Little caret for placeholder */
  .facets__filters-wrapper::after{
    content: "" !important;
    position: absolute !important;
    left: 78px !important; /* tweak if your word spacing differs */
    top: 50% !important;
    width: 10px !important;
    height: 10px !important;
    border-right: 1.2px solid currentColor !important;
    border-bottom: 1.2px solid currentColor !important;
    transform: translateY(-50%) rotate(45deg) !important;
    color: #303633 !important;

    pointer-events: none !important;
    z-index: 5 !important;
  }

  /* 3) When the real JS button exists, remove placeholder instantly */
  .facets__filters-wrapper:has(.of-filters-trigger)::before,
  .facets__filters-wrapper:has(.of-filters-trigger)::after{
    display: none !important;
    content: none !important;
  }

  /* 4) Real trigger stays visible once injected */
  .facets__filters-wrapper .of-filters-trigger{
    display: inline-flex !important;
    position: relative !important;
    z-index: 10 !important;
  }

  /* 5) Once enhanced, keep native list fully gone */
  .facets__filters-wrapper[data-of-filters-enhanced="1"] .facets__overflow-list,
  .facets__filters-wrapper[data-of-filters-enhanced="1"] overflow-list.facets__overflow-list{
    display: none !important;
  }
}






/* NUMBER 08 PRODUCT PAGE */




/* =========================================================
   PRODUCT PAGE
   Force media gallery to LEFT HALF of viewport
   Desktop only (>= 750px)
   ========================================================= */

@media (min-width: 750px) {

  /* 1) Force section to full width */
  .product-information.section--page-width {
    max-width: 100vw !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 2) Convert product grid into strict 50 / 50 layout */
  .product-information__grid {
    display: grid !important;
    grid-template-columns: 50vw 1fr !important;
    gap: 0 !important;
  }

  /* 3) Lock media column */
  .product-information__media {
    width: 50vw !important;
    max-width: 50vw !important;
    margin: 0 !important;
    padding: 0 !important;
    justify-self: start;
  }

  /* 4) Remove any inherited gutters inside gallery */
  .media-gallery,
  .media-gallery__grid {
    padding: 0 !important;
    margin: 0 !important;
  }

  /* 5) Product info stays on right */
  .product-information__details {
    width: 100% !important;
    max-width: none !important;
    padding-left: 48px; /* adjust if needed */
    padding-right: 48px;
  }
}




/* =========================================================
   PRODUCT PAGE
   Media = left half + 1px right divider (bulletproof)
   Desktop only (>= 750px)
   ========================================================= */

@media (min-width: 750px) {

  /* Force section full width */
  .product-information.section--page-width {
    max-width: 100vw !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Strict split, accounting for the 1px divider */
  .product-information__grid {
    display: grid !important;
    grid-template-columns: calc(50vw - 1px) 1fr !important;
    gap: 0 !important;
  }

  /* Media column */
  .product-information__media {
    width: calc(50vw - 1px) !important;
    max-width: calc(50vw - 1px) !important;
    margin: 0 !important;
    padding: 0 !important;

    border-right: 1px solid #303633 !important;
    box-sizing: border-box !important;
  }

  /* Remove internal gallery gutters */
  .media-gallery,
  .media-gallery__grid {
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Product info column */
  .product-information__details {
    width: 100% !important;
    max-width: none !important;
    padding-left: 48px;
    padding-right: 48px;
  }
}









/* =========================================================
   PRODUCT PAGE - VARIANT BUTTON SIZE + COLOUR CONTROLS (WORKING)
   Markup (Horizon):
   label.variant-option__button-label
     input[type=radio]
     span.variant-option__button-label__pill
     span.variant-option__button-label__text
   ========================================================= */

/* 🔧 CONTROLS — EDIT THESE ONLY */
:root{
  /* Button size */
  --of-var-pad-x: 4px;     /* left / right padding */
  --of-var-pad-y: 8px;     /* top / bottom padding */
  --of-var-radius: 4px;  /* corner radius */

  /* Default (not selected) */
  --of-var-border: #303633;
  --of-var-fill: transparent; /* or #ffffff */
  --of-var-text: #303633;

  /* Selected */
  --of-var-border-sel: #303633;
  --of-var-fill-sel: #FF751F;
  --of-var-text-sel: #F6F3F0;
}

/* 1) Reset wrapper */
.product-information fieldset.variant-option--buttons label.variant-option__button-label{
  position: relative;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;

  min-height: 0 !important;
  height: auto !important;
}

/* 2) Make the LABEL act like the button box (size + radius) */
.product-information fieldset.variant-option--buttons label.variant-option__button-label{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: var(--of-var-pad-y) var(--of-var-pad-x) !important;
  border-radius: var(--of-var-radius) !important;

  border: 1px solid var(--of-var-border) !important;
  background-color: var(--of-var-fill) !important;
  box-sizing: border-box !important;
}

/* 3) Kill/neutralize Horizon’s empty pill span so it can’t paint over us */
.product-information fieldset.variant-option--buttons
label.variant-option__button-label .variant-option__button-label__pill{
  display: none !important; /* important: Horizon uses this as the “shape” */
}

/* 4) Default text colour (TEXT IS A SIBLING, not inside the pill) */
.product-information fieldset.variant-option--buttons
label.variant-option__button-label .variant-option__button-label__text{
  color: var(--of-var-text) !important;
  -webkit-text-fill-color: var(--of-var-text) !important;
}

/* 5) Selected state (label has checked input) */
.product-information fieldset.variant-option--buttons
label.variant-option__button-label:has(input[type="radio"]:checked){
  border-color: var(--of-var-border-sel) !important;
  background-color: var(--of-var-fill-sel) !important;
}

/* 6) Selected text colour */
.product-information fieldset.variant-option--buttons
label.variant-option__button-label:has(input[type="radio"]:checked)
.variant-option__button-label__text{
  color: var(--of-var-text-sel) !important;
  -webkit-text-fill-color: var(--of-var-text-sel) !important;
}

/* Optional: stop hover styles from changing your colours */
.product-information fieldset.variant-option--buttons
label.variant-option__button-label:hover{
  border-color: var(--of-var-border) !important;
  background-color: var(--of-var-fill) !important;
}
.product-information fieldset.variant-option--buttons
label.variant-option__button-label:hover .variant-option__button-label__text{
  color: var(--of-var-text) !important;
  -webkit-text-fill-color: var(--of-var-text) !important;
}





/* =========================================================
   PRODUCT PAGE - SOLD OUT VARIANT BUTTON STATE
   Greyed out, unclickable
   ========================================================= */

/* 🔒 Sold out — label contains a disabled or unavailable input */
.product-information fieldset.variant-option--buttons
label.variant-option__button-label:has(
  input[aria-disabled="true"],
  input:disabled,
  input[data-option-available="false"]
){
  background-color: #303633 !important;
  border-color: #303633 !important;

  pointer-events: none !important;
  cursor: not-allowed !important;
  opacity: 1 !important; /* prevent Horizon fade */
}

/* Sold out text */
.product-information fieldset.variant-option--buttons
label.variant-option__button-label:has(
  input[aria-disabled="true"],
  input:disabled,
  input[data-option-available="false"]
)
.variant-option__button-label__text{
  color: #F6F3F0 !important;
  -webkit-text-fill-color: #F6F3F0 !important;
}

/* Ensure selected styles NEVER override sold-out */
.product-information fieldset.variant-option--buttons
label.variant-option__button-label:has(
  input[aria-disabled="true"],
  input:disabled,
  input[data-option-available="false"]
):has(input[type="radio"]:checked){
  background-color: #303633 !important;
  border-color: #303633 !important;
}

/* Kill diagonal strike-through / overlay Horizon adds */
.product-information fieldset.variant-option--buttons
label.variant-option__button-label:has(
  input[aria-disabled="true"],
  input:disabled,
  input[data-option-available="false"]
)::before,
.product-information fieldset.variant-option--buttons
label.variant-option__button-label:has(
  input[aria-disabled="true"],
  input:disabled,
  input[data-option-available="false"]
)::after{
  content: none !important;
  display: none !important;
}





/* =========================================================
   PRODUCT PAGE - PRODUCT TITLE FULL WIDTH FIX (DESKTOP)
   Fixes shrink-wrap caused by inline:
     --width: fit-content;
     --max-width: var(--max-width--body-none);
   ========================================================= */

@media (min-width: 750px){

  /* Target the exact title wrapper Horizon generates */
  [data-testid="product-information"]
  .spacing-style.text-block{
    --width: 100% !important;
    --max-width: 100% !important;

    inline-size: 100% !important;
    max-inline-size: 100% !important;

    width: 100% !important;
    max-width: 100% !important;
  }

  /* Ensure the heading itself cannot shrink */
  [data-testid="product-information"] h1{
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}




/* =========================================================
   PRODUCT PAGE- FULL-BLEED DIVIDER — DESKTOP + MOBILE
   - Breaks out of page padding
   - True viewport-width line
   - No layout shift
   ========================================================= */

.divider{
  position: relative;
}

/* Force divider line to span full viewport */
.divider::before{
  content: "";
  position: absolute;
  top: 50%;

  left: 50%;
  width: 100vw;
  transform: translateX(-50%) translateY(-50%);

  height: 1px;
  background: #303633;

  pointer-events: none;
}

/* Remove any internal line if Horizon draws one */
.divider > *{
  border: none !important;
}





/* =========================================================
   PRODUCT PAGE — ACCORDION DIVIDERS (FULL BLEED, TRUE 1PX)
   - Bottom lines drawn by ::after (never looks double/thick)
   - Kills any remaining Horizon inner dividers
   - Full bleed via negative margins + padding (no change to summary)
   ========================================================= */

/* 🔧 CONTROLS — EDIT THESE ONLY */
:root{
  --of-acc-line: #303633;

  /* Use 0.5px on desktop if you want “hairline” perfection */
  --of-acc-line-w: 1px;

  /* bleed distance (match your page gutters) */
  --of-acc-bleed-left: 24px;
  --of-acc-bleed-right: 48px;

  /* top line on the container */
  --of-acc-wrap-line: #303633;
  --of-acc-wrap-line-w: 1px;
  --of-acc-wrap-bleed-left: 24px;
  --of-acc-wrap-bleed-right: 24px;
}

/* Optional: hairline on desktop to avoid “heavy” look on some screens */
@media (min-width: 750px){
  :root{
    --of-acc-line-w: 0.5px;
  }
}

/* avoid horizontal scroll from bleed */
html, body{ overflow-x: clip; }

/* =========================================================
   1) REMOVE ALL NATIVE HORIZON DIVIDERS (prevents doubling)
   ========================================================= */

/* Outer details + summary */
accordion-custom > details.details,
.accordion details.details{
  border: 0 !important;
  box-shadow: none !important; /* IMPORTANT: remove our old method if any */
}

accordion-custom > details.details > summary.details__header,
.accordion details.details > summary.details__header{
  border: 0 !important;
  box-shadow: none !important;
}

accordion-custom > details.details > summary.details__header::before,
accordion-custom > details.details > summary.details__header::after,
.accordion details.details > summary.details__header::before,
.accordion details.details > summary.details__header::after{
  content: none !important;
  display: none !important;
}

/* Common Horizon inner divider sources */
accordion-custom > details.details > .details-content,
.accordion details.details > .details-content,
accordion-custom > details.details > .details-content *,
.accordion details.details > .details-content *{
  border-bottom-color: transparent !important;
}

/* if Horizon uses shadows as separators inside */
accordion-custom > details.details > .details-content,
.accordion details.details > .details-content{
  box-shadow: none !important;
}

/* =========================================================
   2) FULL-BLEED WRAP + BOTTOM DIVIDER (DRAWN AS ::after)
   ========================================================= */

accordion-custom > details.details,
.accordion details.details{
  position: relative;
  margin-left: calc(-1 * var(--of-acc-bleed-left));
  margin-right: calc(-1 * var(--of-acc-bleed-right));
  padding-left: var(--of-acc-bleed-left);
  padding-right: var(--of-acc-bleed-right);
}

/* The ONLY bottom line */
accordion-custom > details.details::after,
.accordion details.details::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  height: var(--of-acc-line-w);
  background: var(--of-acc-line);

  pointer-events: none;
}

/* =========================================================
   3) TOP LINE ON ACCORDION CONTAINER (YOUR WORKING VERSION)
   ========================================================= */

[data-testid="product-information"] .accordion.accordion--caret{
  padding-top: 0 !important;
  padding-block-start: 0 !important;
  --padding-block-start: 0px !important;
  position: relative;
}

[data-testid="product-information"] .accordion.accordion--caret::before{
  content: "";
  position: absolute;
  left: calc(-1 * var(--of-acc-wrap-bleed-left));
  right: calc(-1 * var(--of-acc-wrap-bleed-right));
  top: 0;

  /* Draw as border instead of a 1px-tall background block */
  height: 0;
  border-top: var(--of-acc-wrap-line-w) solid var(--of-acc-wrap-line);

  pointer-events: none;

  /* Helps avoid subpixel AA weirdness */
  transform: translateZ(0);
  backface-visibility: hidden;
}






/* =========================================================
   PRODUCT PAGE — ACCORDION TITLE ↔ BODY SPACING ONLY
   - Controls space BETWEEN title row and body text
   - Does NOT affect chevron or title padding
   ========================================================= */

/* 🔧 CONTROLS */
:root{
  --of-acc-body-pad-top: 16px;
  --of-acc-body-pad-bottom: 16px;
}

/* Accordion body */
accordion-custom > details.details > .details-content,
.accordion details.details > .details-content{
  padding-block-start: var(--of-acc-body-pad-top) !important;
  padding-block-end: var(--of-acc-body-pad-bottom) !important;
}





/* =========================================================
   PRODUCT PAGE — FULL-BLEED BOTTOM LINE (DESKTOP ONLY)
   - Scoped to main[data-template="product"]
   - Auto-hides when header menu/submenu is open (prevents showing "in" submenu)
   ========================================================= */

/* 🔧 CONTROLS */
:root{
  --of-product-divider-color: #303633;
  --of-product-divider-w: 1px;
}

/* Optional: desktop hairline */
@media (min-width: 750px){
  :root{ --of-product-divider-w: 0.5px; }
}

/* Anchor on the REAL product main */
main[data-template="product"] .product-information.section{
  position: relative !important;
  overflow: visible !important;
}

/* Divider (desktop only) */
@media (min-width: 750px){
  main[data-template="product"] .product-information.section::after{
    content: "";
    position: absolute;
    bottom: 0;

    left: 50%;
    width: 100vw;
    transform: translateX(-50%);

    height: var(--of-product-divider-w);
    background: var(--of-product-divider-color);

    pointer-events: none;
    z-index: 1;
  }
}

/* MOBILE — HIDE COMPLETELY */
@media (max-width: 749px){
  main[data-template="product"] .product-information.section::after{
    content: none !important;
  }
}

/* =========================================================
   IMPORTANT: HIDE LINE WHEN HEADER MENU/SUBMENU IS OPEN
   (Chrome supports :has(), and you’re on Chrome)
   ========================================================= */
html:has(header details[open])
main[data-template="product"] .product-information.section::after{
  opacity: 0 !important;
}






/* =========================================================
   PRODUCT PAGE - ACCORDION — REMOVE ALL HOVER INTERACTIONS (MOBILE ONLY)
   - Disables hover / active / focus visual changes
   - Keeps tap / open / close behaviour intact
   ========================================================= */

@media (max-width: 749px){

  /* Accordion title row */
  accordion-custom > details.details > summary.details__header,
  .accordion details.details > summary.details__header{
    background: inherit !important;
    color: inherit !important;
    text-decoration: none !important;
  }

  /* Kill hover / focus / active states explicitly */
  accordion-custom > details.details > summary.details__header:hover,
  accordion-custom > details.details > summary.details__header:active,
  accordion-custom > details.details > summary.details__header:focus,
  accordion-custom > details.details > summary.details__header:focus-visible,
  .accordion details.details > summary.details__header:hover,
  .accordion details.details > summary.details__header:active,
  .accordion details.details > summary.details__header:focus,
  .accordion details.details__header:focus-visible{
    background: inherit !important;
    color: inherit !important;
    box-shadow: none !important;
    outline: none !important;
  }

  /* Chevron icon (if it changes on hover) */
  accordion-custom > details.details > summary.details__header svg,
  .accordion details.details > summary.details__header svg{
    fill: currentColor !important;
    stroke: currentColor !important;
  }
}
/* =========================================================
   MOBILE — FIX CHEVRON FILLED ICONS (KEEP STROKE-ONLY)
   ========================================================= */
@media (max-width: 749px){
  accordion-custom > details.details > summary.details__header svg,
  .accordion details.details > summary.details__header svg{
    fill: none !important;              /* prevent filled chevrons */
    stroke: currentColor !important;    /* keep stroke colour */
  }
}





/* =========================================================
   PRODUCT IMAGE — MOBILE ONLY BOTTOM DIVIDER (PAGE ONLY)
   - Shows under the main product media (normal page)
   - DISABLED inside the zoom / preview dialog (prevents flashing line)
   ========================================================= */

@media (max-width: 749px){

  /* ✅ draw divider ONLY in the normal product page media area */
  .product-information__media :is(.product-media, .product-media-container, .product-media__wrapper){
    position: relative !important;
  }

  .product-information__media :is(.product-media, .product-media-container, .product-media__wrapper)::after{
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 1px !important;
    background-color: #303633 !important;
    pointer-events: none !important;
  }

  /* 🚫 kill the divider inside the image preview / zoom dialog */
  zoom-dialog :is(.product-media, .product-media-container, .product-media__wrapper)::after,
  dialog :is(.product-media, .product-media-container, .product-media__wrapper)::after,
  .dialog-zoomed-gallery :is(.product-media, .product-media-container, .product-media__wrapper)::after{
    content: none !important;
    display: none !important;
  }
}







/* =========================================================
   PRODUCT PAGE — MOBILE SLIDESHOW DOTS (CLEAN CIRCLES ONLY)
   - Clean 1px border circles
   - NO numbers (kills text + markers + pseudo content)
   - Active:   #1600AC fill + border
   - Inactive: #F6F3F0 fill, #303633 border
   - Left aligned + adjustable left padding
   ========================================================= */

@media (max-width: 749px){

  /* 🔧 CONTROLS — EDIT THESE ONLY */
  :root{
    --of-dots-pad-top: 14px;
    --of-dots-pad-bottom: 0px;

    --of-dots-pad-left: 16px;

    --of-dot-size: 8px;
    --of-dot-gap: 10px;

    --of-dot-active: #1600AC;
    --of-dot-inactive-fill: #F6F3F0;
    --of-dot-inactive-border: #303633;
  }

  /* Place controls under image */
  slideshow-controls.media-gallery__mobile-controls{
    position: static !important;
    display: block !important;
    margin: 0 !important;
    padding-top: var(--of-dots-pad-top) !important;
    padding-bottom: var(--of-dots-pad-bottom) !important;
  }

  /* Dot row container */
  slideshow-controls.media-gallery__mobile-controls
  .slideshow-controls__dots{
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;

    gap: var(--of-dot-gap) !important;

    margin: 0 !important;
    padding: 0 !important;
    padding-left: var(--of-dots-pad-left) !important;

    list-style: none !important;
  }

  /* 🔥 Kill any list markers / counters */
  slideshow-controls.media-gallery__mobile-controls
  .slideshow-controls__dots > li{
    list-style: none !important;
  }
  slideshow-controls.media-gallery__mobile-controls
  .slideshow-controls__dots > li::marker{
    content: "" !important;
  }

  /* 🔥 Nuke any Horizon ornament / counter on LI */
  slideshow-controls.media-gallery__mobile-controls
  .slideshow-controls__dots > li{
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    background-image: none !important;
  }
  slideshow-controls.media-gallery__mobile-controls
  .slideshow-controls__dots > li::before,
  slideshow-controls.media-gallery__mobile-controls
  .slideshow-controls__dots > li::after{
    content: "" !important;
    display: none !important;
  }

  /* 🔥 HARD RESET button + build clean circle */
  slideshow-controls.media-gallery__mobile-controls
  .slideshow-control{
    all: unset !important;
    box-sizing: border-box !important;

    width: var(--of-dot-size) !important;
    height: var(--of-dot-size) !important;

    border-radius: 50% !important;
    background: var(--of-dot-inactive-fill) !important;
    border: 1px solid var(--of-dot-inactive-border) !important;

    display: block !important;
    cursor: pointer !important;

    background-image: none !important;
    -webkit-mask: none !important;
    mask: none !important;

    /* ✅ ABSOLUTE text kill (prevents faint numerals) */
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: none !important;

    /* extra safety: clip any glyph rendering */
    overflow: hidden !important;
    white-space: nowrap !important;
    text-indent: -9999px !important;

    /* avoids odd font smoothing artefacts */
    font-synthesis: none !important;
  }

  /* ✅ Hide any inner nodes (if theme injects spans) */
  slideshow-controls.media-gallery__mobile-controls
  .slideshow-control *{
    display: none !important;
  }

  /* ✅ Kill any pseudo/counter content on the button */
  slideshow-controls.media-gallery__mobile-controls
  .slideshow-control::before,
  slideshow-controls.media-gallery__mobile-controls
  .slideshow-control::after{
    content: "" !important;
    display: none !important;
  }

  /* Kill any SVG decorations */
  slideshow-controls.media-gallery__mobile-controls
  .slideshow-control svg{
    display: none !important;
  }

  /* Active dot */
  slideshow-controls.media-gallery__mobile-controls
  .slideshow-control[aria-selected="true"]{
    background: var(--of-dot-active) !important;
    border-color: var(--of-dot-active) !important;
  }

  /* No focus/tap artefacts */
  slideshow-controls.media-gallery__mobile-controls
  .slideshow-control:focus,
  slideshow-controls.media-gallery__mobile-controls
  .slideshow-control:focus-visible,
  slideshow-controls.media-gallery__mobile-controls
  .slideshow-control:active{
    outline: none !important;
    box-shadow: none !important;
  }
}









/* =========================================================
   PRODUCT PAGE — READJUST MEDIA/DESCRIPTION WIDTH (NO OVERLAP)
   Media can shrink below the text column.
   ========================================================= */

@media (min-width: 750px){

  /* Force the layout wrapper into a real 2-col flex row */
  .product-information__grid{
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    flex-wrap: nowrap !important;
  }

  /* LEFT: media column */
  .product-information__media{
    flex: 0 0 50.1% !important;     /* <-- change this number */
    max-width: 50.1% !important;    /* <-- keep in sync */
    min-width: 0 !important;
    overflow: hidden !important;
  }

  /* RIGHT: details column (Horizon sometimes uses either class) */
  .product-information__details,
  .product-details{
    flex: 0 0 49.9% !important;     /* <-- change this number */
    max-width: 49.9% !important;    /* <-- keep in sync */
    min-width: 0 !important;
  }

  /* Make sure the media internals respect the column width */
  .product-information__media media-gallery,
  .product-information__media .media-gallery__grid,
  .product-information__media slideshow-component,
  .product-information__media .slideshow{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}





/* =========================================================
   PRODUCT PAGE — ZOOM DIALOG (FINAL, SOLID BACKGROUND)
   Behaviour:
   - Full image visible & centred
   - Dialog fills viewport
   - Solid background (#F6F3F0)
   - No transparency / no overlay tint
   - Thumbnail rail + close button intact
   ========================================================= */

/* 🔧 CONTROLS */
:root{
  --of-zoom-bg: #F6F3F0;

  --of-zoom-pad: 24px;
  --of-zoom-top-ui: 72px;

  --of-zoom-maxh: calc(100vh - var(--of-zoom-top-ui) - (var(--of-zoom-pad) * 2));
  --of-zoom-maxw: calc(100vw - (var(--of-zoom-pad) * 2));
}

@media (max-width: 749px){
  :root{
    --of-zoom-pad: 12px;
    --of-zoom-top-ui: 64px;
  }
}

/* =========================================================
   0) DIALOG = FULLSCREEN CANVAS
   ========================================================= */
zoom-dialog dialog[open]{
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;

  margin: 0;
  padding: 0;
  border: 0;
  inset: 0;

  background: var(--of-zoom-bg) !important;
  box-shadow: none !important;

  overflow: hidden;
}

/* Remove browser default backdrop entirely */
zoom-dialog dialog::backdrop{
  background: var(--of-zoom-bg) !important;
}

/* =========================================================
   1) ZOOMED GALLERY LIST — FULL HEIGHT
   ========================================================= */
zoom-dialog dialog[open] .dialog-zoomed-gallery{
  height: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;

  background: var(--of-zoom-bg) !important;
}

zoom-dialog dialog[open] .dialog-zoomed-gallery > li{
  height: 100%;
  min-height: 100%;

  display: flex;
  align-items: stretch;

  background: var(--of-zoom-bg) !important;
}

/* =========================================================
   2) MAIN IMAGE PANE — FULL HEIGHT + CENTRED
   ========================================================= */
zoom-dialog dialog[open] .dialog-zoomed-gallery drag-zoom-wrapper{
  width: 100%;
  height: 100%;
  display: flex;
}

zoom-dialog dialog[open] .dialog-zoomed-gallery .product-media{
  height: 100%;
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: var(--of-zoom-top-ui) var(--of-zoom-pad) var(--of-zoom-pad);
  box-sizing: border-box;

  background: var(--of-zoom-bg) !important;
}

/* =========================================================
   3) IMAGE — FIT (NO CROP)
   ========================================================= */
zoom-dialog dialog[open] .dialog-zoomed-gallery img.product-media__image{
  max-height: var(--of-zoom-maxh) !important;
  max-width:  var(--of-zoom-maxw) !important;

  width: auto !important;
  height: auto !important;

  object-fit: contain !important;
  object-position: center center !important;

  display: block !important;
}

/* =========================================================
   4) THUMBNAILS + UI — FLUSH ON SAME BACKGROUND
   ========================================================= */
zoom-dialog dialog[open] .dialog-thumbnails-list-container,
zoom-dialog dialog[open] .dialog-thumbnails-list-container *{
  background: var(--of-zoom-bg) !important;
}

/* Close button sits cleanly on canvas */
zoom-dialog dialog[open] .dialog-zoomed-gallery_close-button,
zoom-dialog dialog[open] button[aria-label="Close"]{
  background: transparent !important;
}





/* =========================================================
   PRODUCT PAGE — PRODUCT IMAGE ZOOM DIALOG (MOBILE FIX)
   Goal (mobile only):
   - Keep thumbnail strip at bottom
   - Make the main image area sit ABOVE the strip
   - Make image fully visible (no “partially zoomed” crop)
   - Solid background #F6F3F0
   ========================================================= */

:root{
  /* Desktop + mobile shared */
  --of-zoom-bg: #F6F3F0;

  /* MOBILE CONTROLS (adjust these) */
  --of-zoom-mobile-top-offset: 16px;   /* breathing room above image area */
  --of-zoom-mobile-bottom-offset: 16px;/* breathing room below thumbnails */
  --of-zoom-mobile-thumbs-height: 110px; /* height reserved for thumbnail strip */
  --of-zoom-mobile-gap: 12px;          /* gap between image area and thumbs */
}

/* ---------- Dialog base (all sizes) ---------- */
zoom-dialog dialog,
zoom-dialog dialog[open]{
  background: var(--of-zoom-bg) !important;
}

/* Make sure the zoomed gallery area is predictable */
zoom-dialog dialog[open] .dialog-zoomed-gallery{
  background: var(--of-zoom-bg) !important;
}

/* =========================================================
   MOBILE ONLY (<= 749px)
   ========================================================= */
@media (max-width: 749px){

  /* Ensure dialog uses the full viewport height on mobile */
  zoom-dialog dialog[open]{
    height: 100svh !important;
    max-height: 100svh !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: var(--of-zoom-bg) !important;
  }

  /* Layout: main image area + thumbs area */
  zoom-dialog dialog[open] .dialog-zoomed-gallery{
    display: flex !important;
    flex-direction: column !important;
    height: 100svh !important;
    max-height: 100svh !important;
    overflow: hidden !important;
    background: var(--of-zoom-bg) !important;
  }

  /* Keep thumbnails at the bottom and reserve a fixed height */
  zoom-dialog dialog[open] .dialog-thumbnails-list-container{
    order: 2 !important;
    flex: 0 0 auto !important;
    height: var(--of-zoom-mobile-thumbs-height) !important;
    max-height: var(--of-zoom-mobile-thumbs-height) !important;
    padding: 8px 12px var(--of-zoom-mobile-bottom-offset) !important;
    background: var(--of-zoom-bg) !important;
    overflow: hidden !important;
  }

  /* The UL that holds each zoomed slide */
  zoom-dialog dialog[open] .dialog-zoomed-gallery_list-unstyled{
    order: 1 !important;
    flex: 1 1 auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: var(--of-zoom-mobile-top-offset) 12px var(--of-zoom-mobile-gap) !important;
    background: var(--of-zoom-bg) !important;
    overflow: hidden !important;
  }

  /* Each slide: ensure it stretches to fill available height */
  zoom-dialog dialog[open] .dialog-zoomed-gallery_list-unstyled > li{
    height: 100% !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: center !important;
  }

  /* ✅ THE KEY: constrain the main media box so it sits above thumbs */
  zoom-dialog dialog[open] .dialog-zoomed-gallery .product-media{
    width: 100% !important;

    /* Height = viewport - thumbs - offsets - gaps */
    height: calc(
      100svh
      - var(--of-zoom-mobile-thumbs-height)
      - var(--of-zoom-mobile-top-offset)
      - var(--of-zoom-mobile-bottom-offset)
      - var(--of-zoom-mobile-gap)
    ) !important;

    max-height: calc(
      100svh
      - var(--of-zoom-mobile-thumbs-height)
      - var(--of-zoom-mobile-top-offset)
      - var(--of-zoom-mobile-bottom-offset)
      - var(--of-zoom-mobile-gap)
    ) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: var(--of-zoom-bg) !important;
    overflow: hidden !important;
  }

  /* If Horizon wraps zoom with drag-zoom wrapper, force default "not zoomed" */
  zoom-dialog dialog[open] drag-zoom-wrapper,
  zoom-dialog dialog[open] .drag-zoom-wrapper{
    height: 100% !important;
    max-height: 100% !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    /* prevent it opening already “scaled/cropped” */
    --drag-zoom-scale: 1 !important;
    --drag-zoom-translate-x: 0px !important;
    --drag-zoom-translate-y: 0px !important;
  }

  /* The image itself: show the FULL image, no cropping */
  zoom-dialog dialog[open] .dialog-zoomed-gallery img.product-media__image{
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;

    object-fit: contain !important;
    object-position: center !important;

    display: block !important;
    background: var(--of-zoom-bg) !important;
  }

  /* Thumbnails scroller: keep it stable */
  zoom-dialog dialog[open] scroll-hint.dialog-thumbnails-list{
    height: 100% !important;
    max-height: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }
}





/* =========================================================
   ZOOM DIALOG — MOBILE IMAGE FIT TWEAK
   Reduce top padding so image is not cropped
   ========================================================= */
@media (max-width: 749px){

  /* 🔧 CONTROL — adjust this */
  :root{
    --of-zoom-image-pad-top: 16px; /* try 0–24px */
  }

  zoom-dialog dialog[open]
  .dialog-zoomed-gallery
  .product-media{
    padding-top: var(--of-zoom-image-pad-top) !important;
  }
}




/* =========================================================
   PRODUCT PAGE - iOS SAFARI — ACCORDION BODY TEXT NOT FULL WIDTH (MOBILE ONLY)
   - Does NOT touch the accordion summary/header
   - Only affects the rich text inside details-content
   ========================================================= */

@media (max-width: 749px){

  /* The actual rich text wrapper in Horizon */
  accordion-custom .details-content rte-formatter.text-block,
  accordion-custom .details-content rte-formatter.spacing-style,
  accordion-custom .details-content rte-formatter{
    /* brute-force remove any clamp */
    max-width: none !important;
    max-inline-size: none !important;

    /* force it to fill the row */
    width: 100% !important;
    inline-size: 100% !important;

    /* prevent flex parents from shrinking it */
    flex: 1 1 auto !important;
    align-self: stretch !important;

    /* kill “centering” gaps */
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Make sure children don’t reintroduce a max width */
  accordion-custom .details-content rte-formatter > *,
  accordion-custom .details-content rte-formatter p,
  accordion-custom .details-content rte-formatter div{
    max-width: none !important;
    max-inline-size: none !important;
    width: 100% !important;
  }
}

/* Extra iOS-only guard (Safari feature test) */
@supports (-webkit-touch-callout: none){
  @media (max-width: 749px){
    accordion-custom .details-content rte-formatter{
      max-width: none !important;
      max-inline-size: none !important;
      width: 100% !important;
      inline-size: 100% !important;
    }
  }
}





/* =========================================================
   REMOVE QUICK ADD (GLOBAL)
   - Hides the floating quick-add icon/button on product cards
   ========================================================= */

.product-card :where(
  .quick-add,
  .quick-add__button,
  .quick-add-button,
  .product-card__quick-add,
  .product-card__quick-add-button,
  button[aria-label*="Quick add"],
  a[aria-label*="Quick add"]
){
  display: none !important;
}

/* safety: sometimes it's a round icon button overlay */
.product-card :where(
  .icon-button,
  .button--icon
){
  /* only if it's used for quick add; keep this narrow */
}





/* =========================================================
   GLOBAL — REMOVE QUICK ADD (ALL PAGES)
   + MOBILE ONLY — SHOW "X ITEMS" + REMOVE VIEW TOGGLES
   ========================================================= */

/* -----------------------------
   1) QUICK ADD — OFF EVERYWHERE
   (scoped to product cards only so we don't touch real Add-to-cart)
   ----------------------------- */
:where(.product-card, .card, .card-product, .resource-list__item) :where(
  .quick-add,
  .quick-add__button,
  .quick-add__submit,
  .quick-add__submit-button,
  .quick-add__modal-opener,
  .product-card__quick-add,
  .product-card__quick-add-button,
  .product-card__quick-add-wrapper,
  .product-card__quick-add-container,
  [data-testid*="quick-add"],
  [data-quick-add],
  [class*="quick-add"]
){
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ------------------------------------------
   2) COLLECTIONS/RESULTS — MOBILE ONLY TWEAKS
   - Show product count (e.g. "8 items")
   - Remove view/grid toggle (single/double icons)
   - Desktop remains perfect (no changes)
   ------------------------------------------ */
@media (max-width: 749px){

  /* Hide the view/grid toggle block (single/double icons) */
  :where(.column-options-wrapper, .column-options){
    display: none !important;
  }

  /* Make sure the count exists + is visible */
  :where(.products-count-wrapper){
    display: block !important;
  }

  /* Place "X items" neatly on the right side of the mobile bar */
  :where(.facets-actions){
    display: flex !important;
    align-items: center !important;
  }

  :where(.products-count-wrapper){
    margin-left: auto !important;
    padding-left: 12px !important;
    white-space: nowrap !important;
  }

  /* Match your typography without changing desktop */
  :where(.products-count-wrapper span){
    font: inherit !important;
    color: inherit !important;
  }
}





/* NUMBER 09 HOMEPAGE CAROUSEL */




/* =========================================================
   CAROUSEL — INTERNAL VERTICAL DIVIDERS ONLY
   - No outer left (first slide)
   - No outer right (last slide)
   - No top / bottom borders
   ========================================================= */

[data-testid="carousel-section"] slideshow-slides .card{
  box-sizing: border-box !important;

  border: 1px solid #303633 !important;

  /* remove top & bottom edges */
  border-top-width: 0 !important;
  border-bottom-width: 0 !important;

  /* remove outer right edge (and prevent doubles) */
  border-right-width: 0 !important;

  /* default: no outer left */
  border-left-width: 0 !important;
}

/* add ONLY the internal dividers (between cards) */
[data-testid="carousel-section"] slideshow-slides .card + .card{
  border-left-width: 1px !important;
}





/* =========================================================
   CAROUSEL HEADER — FULL-BLEED 1PX BOTTOM DIVIDER (SCOPED)
   Only applies inside [data-testid="carousel-section"]
   ========================================================= */

:root{
  --of-carousel-divider: #303633;
}

/* anchor */
[data-testid="carousel-section"] [data-testid="group-block"]{
  position: relative !important;
  overflow: visible !important;
}

/* full-bleed bottom line */
[data-testid="carousel-section"] [data-testid="group-block"]::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;

  width: 100vw;
  height: 1px;

  background: var(--of-carousel-divider);
  transform: translateX(-50%);

  pointer-events: none;
  z-index: 10;
}





/* =========================================================
   CAROUSEL — REMOVE SLIDE GUTTERS ONLY
   (keeps card text padding intact)
   ========================================================= */

/* Kill the horizontal gutter between slides */
[data-testid="carousel-section"] slideshow-slides{
  gap: 0 !important;
}

/* Kill left/right scroll padding (this is the big one) */
[data-testid="carousel-section"] slideshow-slides{
  padding-inline: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Keep vertical rhythm untouched */
[data-testid="carousel-section"] slideshow-slides{
  padding-block: initial !important;
}




/* =========================================================
   CAROUSEL — CONTROL SECTION TOP/BOTTOM PADDING
   ========================================================= */

/* Desktop */
@media (min-width: 750px){
  [data-testid="carousel-section"].section{
    padding-block-start: 0px !important;
    padding-block-end: 0px !important;
  }
}

/* Mobile */
@media (max-width: 749px){
  [data-testid="carousel-section"].section{
    padding-block-start: 0px !important;
    padding-block-end: 0px !important;
  }
}




/* =========================================================
   CAROUSEL TITLE STRIP (FULL-BLEED + NO GAP)
   Controls:
   - text color
   - strip background color
   - strip bottom padding
   ========================================================= */

/* 🔧 CONTROLS */
:root{
  --of-strip-text: #303633;
  --of-strip-bg:   #F6F3F0;
  --of-strip-pad-bottom: 0px;
}

/* 1) Remove ALL section spacing + internal gap */
div[data-testid="carousel-section"]{
  padding-block-start: 0 !important;
  padding-block-end:   0 !important;

  /* Horizon vars */
  --padding-block-start: 0 !important;
  --padding-block-end:   0 !important;

  /* internal grid gap (header → cards) */
  --gap: 0 !important;
  gap:   0 !important;
}

/* 2) Style ONLY the header strip (group-block) */
div[data-testid="carousel-section"] div[data-testid="group-block"]{
  position: relative !important;
  z-index: 0 !important;

  margin: 0 !important;
  padding-bottom: var(--of-strip-pad-bottom) !important;

  /* keep element bg empty; paint full-bleed bg via ::before */
  background: transparent !important;
}

/* 3) Full-bleed header background (fixes “bookends”) */
div[data-testid="carousel-section"] div[data-testid="group-block"]::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;

  left:  calc(-1 * var(--util-page-margin-offset, 0px)) !important;
  width: calc(100% + (2 * var(--util-page-margin-offset, 0px))) !important;

  background: var(--of-strip-bg) !important;
  z-index: -1 !important;
}

/* 4) Header text color */
div[data-testid="carousel-section"] div[data-testid="group-block"] p{
  color: var(--of-strip-text) !important;
}




/* =========================================================
   CAROUSEL SECTION TOP DIVIDER (FULL-BLEED, MATCH OTHER 1PX)
   - Keeps your ::before method
   - Forces “border-like” rendering by using an inset shadow hairline
     (more consistent than a filled 1px bar on many setups)
   ========================================================= */

/* 🔧 CONTROLS */
:root{
  --of-carousel-top-line: #303633;

  /* hairline tuning (use 0.55–0.75 to visually match other borders) */
  --of-carousel-top-line-opacity: 0.60;
}

/* Anchor the line on the section itself */
div[data-testid="carousel-section"]{
  position: relative !important;
}

/* Remove common double-line culprits */
div[data-testid="carousel-section"],
div[data-testid="carousel-section"] *{
  border-top: 0 !important;
  box-shadow: none !important;
}

/* Draw the full-bleed line */
div[data-testid="carousel-section"]::before{
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: calc(-1 * var(--util-page-margin-offset, 0px)) !important;
  width: calc(100% + (2 * var(--util-page-margin-offset, 0px))) !important;
  height: 1px !important;

  /* Instead of a solid fill (which AA’s), use a 1px inset shadow */
  background: transparent !important;
  box-shadow: inset 0 1px 0 rgba(48, 54, 51, var(--of-carousel-top-line-opacity)) !important;

  pointer-events: none !important;
  z-index: 5 !important;
}






/* =========================================================
   CAROUSEL TITLE STRIP
   Mobile-only text size control
   ========================================================= */

/* 🔧 CONTROLS */
:root{
  --of-strip-text-mobile: 24px; /* ← adjust freely */
}

/* =========================
   MOBILE ONLY (≤ 749px)
   ========================= */
@media (max-width: 749px){

  div[data-testid="carousel-section"]
  div[data-testid="group-block"] p{
    font-size: var(--of-strip-text-mobile) !important;
    line-height: 1.15 !important; /* keeps it tight + consistent */
  }

}




/* =========================================================
   CAROUSEL ARROWS (SIMPLIFIED, KEEP YOUR CONTROLS)
   - Uses your exact controls (unchanged)
   - Right aligned + negative Y offset
   - Fixes yellow tint (blend/filter)
   - Fixes semi-fill (disable pseudo chevrons, use SVG stroke-only)
   ========================================================= */

/* 🔧 CONTROLS (UNCHANGED) */
:root{
  --of-strip-h: 0px;              /* height of your header strip band */
  --of-arrows-offset-y: -40px;    /* NEGATIVE moves arrows UP into header */
  --of-arrows-right: 40px;        /* right inset */
  --of-arrows-gap: 6px;           /* spacing between prev/next */
  --of-arrows-size: 44px;         /* button size */
  --of-arrows-color: #303633;     /* arrow color */
}

/* 0) Anchor */
div[data-testid="carousel-section"]{
  position: relative !important;
}

/* 1) Position arrows band */
div[data-testid="carousel-section"] slideshow-arrows{
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;

  /* lift into header */
  top: var(--of-arrows-offset-y) !important;

  /* keep your band height hook (even if 0) */
  height: var(--of-strip-h) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: var(--of-arrows-gap) !important;

  padding-right: var(--of-arrows-right) !important;
  margin: 0 !important;

  z-index: 100 !important;

  /* stop weird “yellow” inversion on dark backgrounds */
  mix-blend-mode: normal !important;
  filter: none !important;
  opacity: 1 !important;
  isolation: isolate !important;

  /* only buttons clickable */
  pointer-events: none !important;
}

/* 2) Buttons */
div[data-testid="carousel-section"] slideshow-arrows .slideshow-control{
  pointer-events: auto !important;

  width: var(--of-arrows-size) !important;
  height: var(--of-arrows-size) !important;

  display: grid !important;
  place-items: center !important;

  padding: 0 !important;
  margin: 0 !important;

  border: 0 !important;
  background: transparent !important;
  background-color: transparent !important;

  color: var(--of-arrows-color) !important;
  -webkit-text-fill-color: var(--of-arrows-color) !important;
}

/* 3) Kill mask/pseudo chevrons (these caused semi-fill) */
div[data-testid="carousel-section"] slideshow-arrows
.slideshow-control--style-chevron::before,
div[data-testid="carousel-section"] slideshow-arrows
.slideshow-control--style-chevron::after{
  content: none !important;
  display: none !important;
  background: transparent !important;
  background-color: transparent !important;
  -webkit-mask: none !important;
  mask: none !important;
  filter: none !important;
  opacity: 1 !important;
}

/* 4) Force SVG chevrons: clean stroke-only */
div[data-testid="carousel-section"] slideshow-arrows .slideshow-control svg,
div[data-testid="carousel-section"] slideshow-arrows .slideshow-control svg *{
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2px !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  vector-effect: non-scaling-stroke !important;

  filter: none !important;
  opacity: 1 !important;
}




/* =========================================================
   CAROUSEL ARROWS ALWAYS VISIBLE (STANDALONE)
   Paste BELOW your arrows block
   ========================================================= */

/* 1) Remove any fade/transition that hides arrows when not hovered */
div[data-testid="carousel-section"] slideshow-arrows,
div[data-testid="carousel-section"] slideshow-arrows *{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition: none !important;
  animation: none !important;
}

/* 2) If Horizon only shows controls on hover via container state, neutralize it */
div[data-testid="carousel-section"]:not(:hover) slideshow-arrows,
div[data-testid="carousel-section"] slideshow-container:not(:hover) slideshow-arrows,
div[data-testid="carousel-section"] slideshow-component:not(:hover) slideshow-arrows{
  opacity: 1 !important;
  visibility: visible !important;
}

/* 3) Some builds fade the buttons themselves */
div[data-testid="carousel-section"] .slideshow-control{
  opacity: 1 !important;
  visibility: visible !important;
}




/* =========================================================
   CAROUSEL - ARROW HOVER INTERACTION
   ========================================================= */

/* Hover the actual buttons */
div[data-testid="carousel-section"]
slideshow-arrows
.slideshow-control:hover{
  color: #FF751F !important;
}

/* Ensure SVG chevrons follow the hover color */
div[data-testid="carousel-section"]
slideshow-arrows
.slideshow-control:hover svg,
div[data-testid="carousel-section"]
slideshow-arrows
.slideshow-control:hover svg *{
  stroke: currentColor !important;
}



/* =========================================================
   CAROUSEL - HIDE ARROWS ON MOBILE
   ========================================================= */

@media (max-width: 749px){
  div[data-testid="carousel-section"] slideshow-arrows{
    display: none !important;
  }
}



/* =========================================================
   OF — FIX: ARROWS ABOVE STICKY HEADER (NO STICKY BREAK)
   Paste BELOW your arrows chunk
   ========================================================= */

/* Create a local stacking context for the carousel section */
div[data-testid="carousel-section"]{
  position: relative !important;
  isolation: isolate !important;  /* prevents weird blending/stacking with header */
  z-index: 0 !important;
}

/* Keep arrows inside that context, and NOT above the header */
div[data-testid="carousel-section"] slideshow-arrows{
  z-index: 1 !important;
}

/* Make sure the sticky header sits above (WITHOUT changing its position) */
#shopify-section-header,
.header,
.header-wrapper,
.header__sticky,
header.section-header{
  z-index: 9999 !important;
}






/* NUMBER 10 VOLUME 01 BANNER IMAGE */



/* =========================================
   FORCE SHORTER HERO (THIS ONE ONLY)
   Uses the actual hero div ID that has the inline var
   ========================================= */

/* Desktop */
@media (min-width: 750px){
  #Hero-template--26167096639770__hero_rWyxRt{
    --hero-min-height: 360px !important; /* <- change */
    min-height: 360px !important;        /* <- belt + braces */
    height: auto !important;
  }
}

/* Mobile */
@media (max-width: 749px){
  #Hero-template--26167096639770__hero_rWyxRt{
    --hero-min-height: 240px !important; /* <- change */
    min-height: 240px !important;
    height: auto !important;
  }
}




/* =========================================================
   HERO (THIS ONE ONLY) — HARD FORCE MOBILE HEIGHT
   Targets ALL common Horizon hero height owners.
   ========================================================= */

@media (max-width: 749px){

  /* 1) Set your desired mobile height here */
  :root{ --of-hero-mobile-h: 240px; } /* <- change this */

  /* 2) Clamp height on the hero + wrappers */
  section#shopify-section-template--26167096639770__hero_rWyxRt,
  #Hero-template--26167096639770__hero_rWyxRt,
  #Hero-template--26167096639770__hero_rWyxRt .hero-wrapper,
  #Hero-template--26167096639770__hero_rWyxRt .section-wrapper,
  #Hero-template--26167096639770__hero_rWyxRt .hero__container,
  #Hero-template--26167096639770__hero_rWyxRt .hero__media,
  #Hero-template--26167096639770__hero_rWyxRt .hero__media-wrapper,
  #Hero-template--26167096639770__hero_rWyxRt .hero__media-container{
    height: var(--of-hero-mobile-h) !important;
    min-height: var(--of-hero-mobile-h) !important;
    max-height: var(--of-hero-mobile-h) !important;
  }

  /* 3) Make media fill the forced height */
  #Hero-template--26167096639770__hero_rWyxRt img,
  #Hero-template--26167096639770__hero_rWyxRt picture,
  #Hero-template--26167096639770__hero_rWyxRt video{
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
  }
}




/* =========================================================
   HERO (THIS ONE ONLY) — FULL-BLEED TOP DIVIDER (LIGHTER)
   - Visually matches Horizon "hairline" lines by using alpha
   - Top line only
   ========================================================= */

#Hero-template--26167096639770__hero_rWyxRt{
  position: relative;
}

/* TOP LINE ONLY */
#Hero-template--26167096639770__hero_rWyxRt::before{
  content: "";
  position: absolute;
  top: 0;

  /* true full-bleed without causing scroll */
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  width: 100vw;

  height: 1px;

  /* key: reduce visual weight to match your other 1px rules */
  background: rgba(48, 54, 51, 0.60);

  z-index: 5;
  pointer-events: none;
}




/* =========================================================
   HERO (THIS ONE ONLY) — TEXT + BUTTON CONTROLS
   CSS VARIABLES = YOUR "CONTROLS"
   ========================================================= */

/* -------------------------
   EDIT THESE VALUES ONLY
   ------------------------- */

#Hero-template--26167096639770__hero_rWyxRt{

  /* TEXT COLOUR */
  --of-hero-text: #F6F3F0;

  /* BUTTON COLOURS */
  --of-hero-btn-bg: #F6F3F0;
  --of-hero-btn-text: #303633;

  /* LINE 1 (Heading) padding */
  --of-l1-pt-m: 0px;
  --of-l1-pb-m: 12px;
  --of-l1-pt-d: 0px;
  --of-l1-pb-d: 16px;

  /* LINE 2 (Subtext) padding */
  --of-l2-pt-m: 0px;
  --of-l2-pb-m: 20px;
  --of-l2-pt-d: 0px;
  --of-l2-pb-d: 28px;

  /* BUTTON padding */
  --of-btn-pt-m: 0px;
  --of-btn-pb-m: 0px;
  --of-btn-pt-d: 0px;
  --of-btn-pb-d: 0px;
}

/* -------------------------
   APPLY TEXT COLOUR
   ------------------------- */

#Hero-template--26167096639770__hero_rWyxRt
.text-block,
#Hero-template--26167096639770__hero_rWyxRt
.rte,
#Hero-template--26167096639770__hero_rWyxRt
h1,
#Hero-template--26167096639770__hero_rWyxRt
h2,
#Hero-template--26167096639770__hero_rWyxRt
p{
  color: var(--of-hero-text) !important;
}

/* -------------------------
   LINE 1 (Heading)
   ------------------------- */

#Hero-template--26167096639770__hero_rWyxRt
.text-block h2,
#Hero-template--26167096639770__hero_rWyxRt
.text-block h1{
  margin: 0 !important;
}

@media (max-width: 749px){
  #Hero-template--26167096639770__hero_rWyxRt
  .text-block h2,
  #Hero-template--26167096639770__hero_rWyxRt
  .text-block h1{
    padding-top: var(--of-l1-pt-m) !important;
    padding-bottom: var(--of-l1-pb-m) !important;
  }
}

@media (min-width: 750px){
  #Hero-template--26167096639770__hero_rWyxRt
  .text-block h2,
  #Hero-template--26167096639770__hero_rWyxRt
  .text-block h1{
    padding-top: var(--of-l1-pt-d) !important;
    padding-bottom: var(--of-l1-pb-d) !important;
  }
}

/* -------------------------
   LINE 2 (Subtext)
   ------------------------- */

#Hero-template--26167096639770__hero_rWyxRt
.text-block p{
  margin: 0 !important;
}

@media (max-width: 749px){
  #Hero-template--26167096639770__hero_rWyxRt
  .text-block p{
    padding-top: var(--of-l2-pt-m) !important;
    padding-bottom: var(--of-l2-pb-m) !important;
  }
}

@media (min-width: 750px){
  #Hero-template--26167096639770__hero_rWyxRt
  .text-block p{
    padding-top: var(--of-l2-pt-d) !important;
    padding-bottom: var(--of-l2-pb-d) !important;
  }
}

/* -------------------------
   BUTTON
   ------------------------- */

#Hero-template--26167096639770__hero_rWyxRt
a.button{
  background: var(--of-hero-btn-bg) !important;
  color: var(--of-hero-btn-text) !important;
}

@media (max-width: 749px){
  #Hero-template--26167096639770__hero_rWyxRt
  a.button{
    margin-top: var(--of-btn-pt-m) !important;
    margin-bottom: var(--of-btn-pb-m) !important;
  }
}

@media (min-width: 750px){
  #Hero-template--26167096639770__hero_rWyxRt
  a.button{
    margin-top: var(--of-btn-pt-d) !important;
    margin-bottom: var(--of-btn-pb-d) !important;
  }
}






/* HERO — pin content to BOTTOM (instead of center) */
#Hero-template--26167096639770__hero_rWyxRt
.hero__content-wrapper{
  justify-content: flex-end !important;
}





/* NUMBER 11 HOMEPAGE STORY */













/* NUMBER 12 HOMEPAGE COLLECTIONS HEADER */



/* =========================================================
   VOLUME HEADER TEXT BLOCK — TOP 1PX DIVIDER (FLUSH)
   ========================================================= */

div.spacing-style.text-block[class*="product_list_text"]{
  position: relative !important;
}

div.spacing-style.text-block[class*="product_list_text"]::before{
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: #303633 !important;
  pointer-events: none !important;
}




/* =========================================================
   VOLUME HEADER TEXT — MOBILE OVERRIDES ONLY
   ========================================================= */

@media (max-width: 749px){

  /* target the specific product list text block */
  div.spacing-style.text-block[class*="product_list_text"]{
    padding-top: 24px !important;
    padding-left: 16px !important;
    padding-bottom: 8px !important; /* 👈 added */
  }

  /* target the actual text inside */
  div.spacing-style.text-block[class*="product_list_text"] p{
    font-size: 24px !important;
  }

}