/** Shopify CDN: Minification failed

Line 4444:0 Unexpected "="

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

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

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

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

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

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

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

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

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

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

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

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

.product-card__content {
  position: relative;
}

.product-card__content {
  cursor: pointer;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

p:empty {
  display: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  /* Utility variable gives the grid's first column width. Provides an offset width for components like carousels */
  --util-page-margin-offset: max(
    var(--page-margin),
    calc((100% - min(var(--page-content-width), 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: slideInLeft;
  --dialog-drawer-closing-animation: slideOutLeft;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Show more */

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

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

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

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

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

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

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

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

/* Collapsible row */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  &[open] {
    opacity: 1;
  }

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

  &::backdrop {
    background: transparent;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.dialog-zoomed-gallery .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
  /* Move the controls above the thumbnails. Need to calculate the height of the thumbnails list */
  bottom: calc(var(--thumbnail-width) / 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--2xs);
  z-index: var(--layer-flat);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  to {
    transform: translateX(0);
  }
}

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

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

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

  to {
    transform: translateY(0);
  }
}

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

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

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

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

  to {
    transform: translateY(0);
  }
}

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

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

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

  to {
    transform: translateY(0);
  }
}

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

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

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

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

@keyframes elementSlideInBottom {
  from {
    transform: translateY(calc(-1 * var(--padding-sm)));
    opacity: 0;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

/*
 * Slideshow Component
 */
slideshow-component {
  --cursor: grab;
  --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%);
  }
}






/* HEIGS Khaite-style PDP */

/* Product title — clean left-aligned */
.product-information .product-title {
  text-align: left !important;
  font-family: var(--font-heading--family) !important;
  font-size: 1.4rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
}

/* Price — left-aligned, clean */
.product-information .product-price {
  text-align: left !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
}

/* Description — no read-more clipping, clean paragraph */
.product-information .description-readmore__content {
  max-height: none !important;
  overflow: visible !important;
}
.product-information .description-readmore__gradient {
  display: none !important;
}
.product-information .description-readmore__toggle {
  display: none !important;
}
.product-information .description-readmore {
  font-size: 0.85rem !important;
  line-height: 1.7 !important;
  color: var(--color-foreground) !important;
  opacity: 0.8;
}

/* Add to Cart button — full-width black, Khaite style */
.product-information .add-to-cart-button,
.product-information .product-form__submit,
.product-information [name="add"],
.product-information .button--add-to-cart,
.product-information form .button {
  background-color: #000 !important;
  color: #fff !important;
  border: 1px solid #000 !important;
  border-radius: 0 !important;
  width: 100% !important;
  padding: 16px 32px !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
  cursor: pointer !important;
}
.product-information .add-to-cart-button:hover,
.product-information .product-form__submit:hover,
.product-information [name="add"]:hover,
.product-information .button--add-to-cart:hover,
.product-information form .button:hover {
  background-color: #fff !important;
  color: #000 !important;
}

/* Hide accelerated checkout buttons (Shop Pay etc) for cleaner look */
.product-information .shopify-payment-button,
.product-information .accelerated-checkout {
  display: none !important;
}

/* Shipping & Returns accordion — Khaite style with + icon */
.product-information .shipping-returns {
  border-top: 1px solid #e5e5e5 !important;
  padding-top: 12px !important;
}
.product-information .shipping-returns__toggle {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.05em !important;
  cursor: pointer !important;
  padding: 8px 0 !important;
}
.product-information .shipping-returns__toggle::after {
  content: '+' !important;
  font-size: 1.2rem !important;
  font-weight: 300 !important;
}
.product-information .shipping-returns[open] .shipping-returns__toggle::after,
.product-information .shipping-returns.is-open .shipping-returns__toggle::after {
  content: '−' !important;
}

/* Tax/shipping note — smaller, muted */
.product-information .tax-shipping-note {
  font-size: 0.75rem !important;
  opacity: 0.6;
  text-align: left !important;
}

/* Divider — subtle */
.product-information .divider hr,
.product-information ._divider hr {
  border-color: #e5e5e5 !important;
  opacity: 0.5;
}

/* Color picker — left align */
.product-information .color-picker {
  text-align: left !important;
}

/* Lining picker — left align */
.product-information .lining-picker {
  text-align: left !important;
}

/* Initials picker — left align */
.product-information .initials-picker {
  text-align: left !important;
}

/* Overall product details panel — more whitespace, Khaite feel */
.product-information .product-details-content {
  padding-right: 40px !important;
  padding-left: 40px !important;
}

/* SKU display — small muted text like Khaite */
.product-information .product-sku {
  font-size: 0.75rem !important;
  opacity: 0.5;
  letter-spacing: 0.03em !important;
}

/* Sticky add to cart bar — match the black button style */
.sticky-add-to-cart .button {
  background-color: #000 !important;
  color: #fff !important;
  border-radius: 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  font-weight: 400 !important;
}

/* end-heigs-pdp */





/* HEIGS uniform product grid images */
/* 3:4 portrait ratio — matches bag photo proportions */
.product-media-container {
  aspect-ratio: 3 / 4 !important;
  overflow: hidden !important;
}
.product-media-container .product-media {
  width: 100% !important;
  height: 100% !important;
}
.product-media-container .product-media__image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* Product title and price — clean and visible */
.product-card .product-card__title,
.product-card .product-title {
  font-size: 0.8rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  margin-top: 10px !important;
  text-align: left !important;
}
.product-card .product-card__price,
.product-card .price {
  font-size: 0.8rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  margin-top: 4px !important;
  text-align: left !important;
}

/* Collection cards */
.collection-card__image-wrapper,
.collection-card img,
.collection-image {
  aspect-ratio: 3 / 4 !important;
  object-fit: cover !important;
}
/* heigs-uniform-grid */




/* HEIGS lazy loading performance */
img[loading="lazy"] {
  content-visibility: auto;
}
/* heigs-lazy */





/* ------------------------------------------------------------------
   PDP mobile — show the whole product, don't crop it.
   HEIGS product photography is square; the gallery frame is 3:4 and an
   earlier override forced object-fit:cover, which cropped the sides and
   read as over-zoomed on phones. The theme's own default is contain.
   Added 2026-08-25.
   ------------------------------------------------------------------ */
@media screen and (max-width: 749px) {
  .product-media-container .product-media__image {
    object-fit: contain !important;
  }
}


/* ==================================================================
   HEIGS — oxblood palette, taken from In Common With's live tokens.
   Values read directly from their CSS custom properties 2026-08-27,
   not sampled by eye. Added on the Oxblood theme copy only.
   ================================================================== */
:root{
  --icw-bone-light:#FAFAF9; --icw-bone-mid:#F4F5F7; --icw-bone-dark:#E6E9ED;
  --icw-clay-mid:#D5DBE1; --icw-clay-dark:#B3BFCA;
  --icw-brick-light:#2E3F4C; --icw-brick-mid:#16202A; --icw-brick-dark:#0F151B;
  --icw-red-light:#6E8AA2; --icw-red-mid:#4C6579; --icw-red-dark:#2E3F4C;
  --icw-gradient:linear-gradient(180deg,#F2F6F9 0%,#E7EEF4 20%,#D8E4EE 42%,#C6D8E6 62%,#B4CBDD 82%,#A5C0D5 100%);
  --heigs-surface-base:#F2F6F9;
  --heigs-surface:linear-gradient(180deg,#F2F6F9 0%,#E7EEF4 20%,#D8E4EE 42%,#C6D8E6 62%,#B4CBDD 82%,#A5C0D5 100%);
  --heigs-on-surface:#16202A;
  --heigs-grain:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27220%27%20height%3D%27220%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.82%27%20numOctaves%3D%274%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27220%27%20height%3D%27220%27%20filter%3D%27url%28%23n%29%27%20opacity%3D%270.85%27%2F%3E%3C%2Fsvg%3E");
  --heigs-grain-2:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27180%27%20height%3D%27180%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.65%27%20numOctaves%3D%273%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27180%27%20height%3D%27180%27%20filter%3D%27url%28%23n%29%27%20opacity%3D%270.75%27%2F%3E%3C%2Fsvg%3E");
  --heigs-grain-3:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27160%27%20height%3D%27160%27%3E%3Cfilter%20id%3D%27g%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.9%27%20numOctaves%3D%274%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%27linear%27%20slope%3D%272.2%27%20intercept%3D%27-0.32%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%27160%27%20height%3D%27160%27%20filter%3D%27url%28%23g%29%27%2F%3E%3C%2Fsvg%3E");
}

/* utility matching their .bg-custom-gradient */
.heigs-gradient,
.bg-custom-gradient{
  background:var(--icw-gradient);
  background-image:var(--icw-gradient);
}

/* inverted panels (menus, footers) sit on the oxblood with bone type */
.heigs-invert{
  background:var(--icw-brick-mid);
  color:var(--icw-bone-light);
}
.heigs-invert a{ color:var(--icw-bone-light); }

/* small accent marker, the equivalent of their blue "New!" */
.heigs-new{
  color:var(--icw-accent, var(--icw-red-light));
  font-size:.62em;
  vertical-align:super;
  letter-spacing:.02em;
}


/* ------------------------------------------------------------------
   Primary surface = the gradient, not flat oxblood.
   In Common With paints dark panels #441100 and washes a red scrim up
   from the bottom (transparent #B30000 -> #8D0000 at 58.33%). That
   composite is the look — flat brick on its own reads dead.
   ------------------------------------------------------------------ */


.color-scheme-4,
.color-scheme-5,
.heigs-invert,
.heigs-surface{
  background-color:var(--heigs-surface-base) !important;
  background-image:var(--heigs-surface) !important;
  background-repeat:no-repeat;
  background-size:100% 100%;
  color:var(--heigs-on-surface);
}
.color-scheme-4 a, .color-scheme-5 a,
.heigs-invert a, .heigs-surface a{ color:var(--heigs-on-surface); }




/* custom footer block: same dark ground as the footer group */
.heigs-footer{
  background-color:var(--heigs-surface-base) !important;
  color:var(--heigs-on-surface) !important;
}
.heigs-footer *:not(svg):not(path){color:var(--heigs-on-surface) !important;}
.heigs-footer input[type="email"],.heigs-footer input[type="text"]{
  background:transparent !important;border:1px solid rgba(22,32,42,.35) !important;
  color:var(--heigs-on-surface) !important;
}
.heigs-footer input::placeholder{color:rgba(22,32,42,.55) !important;}
.heigs-footer button,.heigs-footer input[type="submit"]{
  background:var(--heigs-on-surface) !important;color:var(--icw-bone-light) !important;
  border:1px solid var(--heigs-on-surface) !important;
}


/* ---- grain: a fine film noise over every blue surface ---- */
.hgn__panel, .hgn__drawer,
.shopify-section-group-footer-group, .heigs-footer,


/* ==================================================================
   ONE field for the whole page.
   Skylrk paints a single viewport-anchored gradient and lays grain
   over everything; sections are transparent so nothing bands.
   ================================================================== */
html{ background:var(--icw-bone-light); }
body{
  background-color:var(--icw-bone-light) !important;
  background-image:none !important;
  color:var(--heigs-on-surface);
  position:relative;
}


/* sections stop painting their own ground so the field shows through */
.shopify-section-group-footer-group,
.shopify-section-group-footer-group .section-background,
.heigs-footer,
.hg-univ,
.hg-univ .section-background{
  background:transparent !important;
  background-image:none !important;
}
.shopify-section-group-footer-group,
.shopify-section-group-footer-group *:not(svg):not(path),
.heigs-footer, .heigs-footer *:not(svg):not(path){
  color:var(--heigs-on-surface) !important;
}
.heigs-footer input[type="email"],.heigs-footer input[type="text"],
.shopify-section-group-footer-group input[type="email"]{
  background:transparent !important;border:1px solid rgba(22,32,42,.35) !important;
  color:var(--heigs-on-surface) !important;
}
.heigs-footer input::placeholder{color:rgba(22,32,42,.55) !important;}
.heigs-footer button,.heigs-footer input[type="submit"]{
  background:var(--heigs-on-surface) !important;color:var(--icw-bone-light) !important;
  border:1px solid var(--heigs-on-surface) !important;
}

/* the Universe carousel now sits on the shared field */
.hg-univ__cardtitle{ color:var(--heigs-on-surface) !important; }
.hg-univ__cardsub{ color:rgba(22,32,42,.7) !important; }

/* the menu panel uses the very same fixed field, so it lines up seamlessly */
.hgn__panel, .hgn__drawer{
  background-color:var(--heigs-surface-base) !important;
  background-image:var(--heigs-surface) !important;
  background-attachment:fixed !important;
  background-size:100% 100% !important;
  background-repeat:no-repeat !important;
}



/* ==================================================================
   One gutter, one rhythm, one easing — applied across every section.
   ================================================================== */
:root{
  --heigs-pad:clamp(20px,3.2vw,56px);
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s8:32px; --s10:40px; --s12:48px; --s16:64px; --s20:80px;
  --heigs-ease:cubic-bezier(.22,.61,.24,1);
  --heigs-dur:.34s;
}

/* every custom section shares the same left/right gutter */
.hgn__bar, .hgn__panel, .hgn__drawer,
.hg-univ__head, .hg-univ__track,
.heigs-ed, .heigs-footer{
  padding-inline:var(--heigs-pad) !important;
}
.hg-univ__track{ scroll-padding-inline:var(--heigs-pad) !important; }
.heigs-ed__grid, .heigs-footer__grid{ max-width:none !important; margin-inline:0 !important; }
.hgc{ padding-inline:var(--heigs-pad) !important; }

/* consistent vertical rhythm between sections */
.hg-univ{ padding-block:var(--s16) var(--s20) !important; }
.heigs-ed{ padding-block:var(--s16) !important; }
.heigs-footer{ padding-block:var(--s16) var(--s12) !important; }
.hg-univ__head{ margin-bottom:var(--s10) !important; }

===============================================
   The blue field lives in exactly two places:
   the menu dropdown, and everything from HEIGS Universe downward.
   ================================================================== */
.hg-univ,
.shopify-section-group-footer-group,
.heigs-footer{
  position:relative;
  background:transparent !important;
  color:var(--heigs-on-surface) !important;
}
/* the menu overlays content, so it carries its own copy of the field */
.hgn__panel,
.hgn__drawer{
  position:relative;
  background-color:var(--heigs-surface-base) !important;
  background-image:radial-gradient(58% 52% at 50% 34%, rgba(255,255,255,.62), rgba(255,255,255,0) 68%), var(--heigs-surface) !important;
  background-attachment:fixed, fixed !important;
  background-size:190% 170%, 100% 100% !important;
  background-repeat:no-repeat, no-repeat !important;
  background-position:50% 38%, 0 0 !important;
  animation:none;
  color:var(--heigs-on-surface) !important;
}
@keyframes heigs-bloom{
  0%   { background-position: 12% 22%, 0 0; }
  50%  { background-position: 58% 52%, 0 0; }
  100% { background-position: 84% 30%, 0 0; }
}
@media (prefers-reduced-motion:reduce){
  .hg-univ,.shopify-section-group-footer-group,.heigs-footer,.hgn__panel,.hgn__drawer{ animation:none !important; }
}
.hg-univ > *, .heigs-footer > *,
.shopify-section-group-footer-group > *{ position:relative; z-index:1; }

/* grain, only on those surfaces */
.hg-univ::before,
.shopify-section-group-footer-group::before,
.heigs-footer::before,
.hgn__panel::before,
.hgn__drawer::before{
  content:"";
  position:absolute; inset:0;
  background-image:var(--heigs-grain);
  background-size:220px 220px;
  background-repeat:repeat;
  opacity:.62;
  mix-blend-mode:multiply;
  pointer-events:none;
  z-index:0;
}
.hgn__panel > *, .hgn__drawer > *{ position:relative; z-index:1; }

/* sections above the Universe stay on plain bone */
.hgn__bar{ background:var(--icw-bone-light); }
.hgc{ background:var(--icw-bone-light) !important; }


/* second grain pass — lightens — so the texture reads strongly
   without the multiply layer greying the blue down */
.hg-univ::after,
.shopify-section-group-footer-group::after,
.heigs-footer::after,
.hgn__panel::after,
.hgn__drawer::after{
  content:"";
  position:absolute; inset:0;
  background-image:var(--heigs-grain-2);
  background-size:180px 180px;
  background-repeat:repeat;
  opacity:.5;
  mix-blend-mode:screen;
  pointer-events:none;
  z-index:0;
}


/* sections above the Universe keep an opaque bone ground; without this the
   gaps between blue sections read as a light band across the field */
#shopify-section-sections--28856194400582__announcements,
.hg-cath-stack,
.heigs-ed,
.hg-colintro,
.hgc{
  background-color:var(--icw-bone-light) !important;
}
/* and the blue run closes up: no gaps between the Universe and the last footer band */
.hg-univ{ margin-bottom:0 !important; }
.shopify-section-group-footer-group{ margin-block:0 !important; }
.heigs-footer{ margin-block:0 !important; }


/* the section wrapper around the custom footer carries a margin that let the
   page ground show as a band; close it and let the field run unbroken */
.shopify-section:has(.heigs-footer){
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
}
.shopify-section:has(.hg-univ){ margin:0 !important; }
.shopify-section-group-footer-group + .shopify-section-group-footer-group{ margin-top:0 !important; }


/* menu open: the whole header group becomes part of the blue field,
   exactly like In Common With — no white band above the panel */
html.hgn-open .shopify-section-group-header-group{
  background-color:var(--heigs-surface-base) !important;
  background-image:radial-gradient(58% 52% at 50% 34%, rgba(255,255,255,.62), rgba(255,255,255,0) 68%), var(--heigs-surface) !important;
  background-attachment:fixed, fixed !important;
  background-size:190% 170%, 100% 100% !important;
  background-repeat:no-repeat, no-repeat !important;
  animation:none;
  background-position:50% 38%, 0 0 !important;
}
html.hgn-open .shopify-section-group-header-group .section-background,
html.hgn-open .announcement-bar,
html.hgn-open .hgn__bar{ background:transparent !important; }
html.hgn-open .shopify-section-group-header-group,
html.hgn-open .shopify-section-group-header-group *{ color:var(--heigs-on-surface) !important; }
.shopify-section-group-header-group{ transition:background-color .34s cubic-bezier(.22,.61,.24,1); }


/* the continuous field does the separating now — drop the footer rules */
.shopify-section-group-footer-group,
.shopify-section-group-footer-group *,
.heigs-footer,
.heigs-footer *,
.shopify-section:has(.heigs-footer) *{
  border-top:0 !important;
  border-bottom:0 !important;
}
/* keep the one control that genuinely needs an edge */
.heigs-footer input[type="email"],
.heigs-footer input[type="text"],
.shopify-section-group-footer-group input[type="email"]{
  border:1px solid rgba(22,32,42,.35) !important;
}


/* the newsletter button was ink text on an ink fill — the wildcard colour rule
   above catches button labels too. Restore the reverse. */
.heigs-footer button,
.heigs-footer button *,
.heigs-footer input[type="submit"],
.shopify-section-group-footer-group button,
.shopify-section-group-footer-group button *,
.shopify-section-group-footer-group input[type="submit"]{
  background:var(--heigs-on-surface) !important;
  color:var(--icw-bone-light) !important;
  border:1px solid var(--heigs-on-surface) !important;
  letter-spacing:.08em;
}
.heigs-footer button:hover,
.shopify-section-group-footer-group button:hover{ opacity:.88; }


/* `.heigs-footer *:not(svg):not(path)` scores (0,1,2) and was beating the
   button rule at (0,1,1) — outrank it explicitly. */
html body .heigs-footer button,
html body .heigs-footer button *,
html body .heigs-footer input[type="submit"],
html body .shopify-section-group-footer-group button,
html body .shopify-section-group-footer-group button *{
  color:var(--icw-bone-light) !important;
  background:var(--heigs-on-surface) !important;
}

/* the announcement strip joins the field with the rest of the header */
html.hgn-open .shopify-section-group-header-group > *,
html.hgn-open .shopify-section-group-header-group .section-background,
html.hgn-open .shopify-section-group-header-group .section,
html.hgn-open .shopify-section-group-header-group .announcement-bar,
html.hgn-open #shopify-section-sections--28856194400582__announcements{
  background:transparent !important;
}


/* bone -> blue is a hard edge at the top of HEIGS Universe.
   Fade the page ground out over the first stretch of the section so the
   white dissolves into the field instead of stopping dead.
   The fade sits at z-index 0, under the section content, and shows through
   because .hg-univ itself is transparent. */
.shopify-section:has(.hg-univ){ position:relative; }
.shopify-section:has(.hg-univ)::before{
  content:"";
  position:absolute; left:0; right:0; top:0;
  height:clamp(180px, 22vw, 340px);
  background:linear-gradient(
    180deg,
    var(--icw-bone-light) 0%,
    rgba(250,250,249,.92) 22%,
    rgba(250,250,249,.68) 46%,
    rgba(250,250,249,.34) 72%,
    rgba(250,250,249,0) 100%);
  pointer-events:none;
  z-index:0;
}
/* the section above stops painting its own hard bottom edge */
.heigs-ed, .hg-cath-stack{ margin-bottom:0 !important; }


/* BLUE SPILL FIX
   Sections above the Universe were transparent wrappers with bone painted only
   on their inner blocks, and child margins were collapsing out of them
   (32px after the hero, 14px after the category row) — the body field showed
   through both. flow-root stops the margin escaping; the wrapper carries bone. */
main > .shopify-section{ display:flow-root; }
main > .shopify-section:not(:has(.hg-univ)):not(:has(.heigs-footer)){
  background-color:var(--icw-bone-light);
}
main > .shopify-section:has(.hg-univ),
main > .shopify-section:has(.heigs-footer){ background:transparent !important; }


/* ==================================================================
   BLUE SPILL, PROPERLY.
   The field lived on <body>, so every transparent gap and every
   not-yet-painted image flashed blue. Ground everything opaque and give
   the field only to the surfaces that should have it.
   ================================================================== */
html, body{ background-color:var(--icw-bone-light) !important; background-image:none !important; }
main, main > *{ background-color:var(--icw-bone-light); }

/* images never show the page behind them while loading */
main img, main video, .hgc__media, .hg-univ__media, .hgn__feat img{
  background-color:var(--icw-bone-light);
}

/* the blue field, on exactly the surfaces that want it */
main > .shopify-section:has(.hg-univ),
.hg-univ,
.shopify-section-group-footer-group,
.shopify-section:has(.heigs-footer),
.heigs-footer,
.hgn__panel,
.hgn__drawer{
  background-color:var(--heigs-surface-base) !important;
  background-image:radial-gradient(58% 52% at 50% 34%, rgba(255,255,255,.62), rgba(255,255,255,0) 68%), var(--heigs-surface) !important;
  background-attachment:fixed, fixed !important;
  background-size:190% 170%, 100% 100% !important;
  background-repeat:no-repeat, no-repeat !important;
  background-position:50% 38%, 0 0 !important;
  animation:none !important;   /* per-element timelines drifted apart and made hard seams */
  color:var(--heigs-on-surface) !important;
}
.hg-univ__media, .hg-univ img{ background-color:transparent; }

/* the footer's own legal row: plain links, not a button slab */
.shopify-section-group-footer-group a,
.heigs-footer a{
  background:transparent !important;
  border:0 !important;
  padding:0 !important;
  border-radius:0 !important;
  font-size:14px !important;
  letter-spacing:normal !important;
  text-transform:none !important;
  min-height:0 !important;
  width:auto !important;
  display:inline !important;
}
.shopify-section-group-footer-group a:hover,
.heigs-footer a:hover{ text-decoration:underline; text-underline-offset:3px; }
@media (max-width:859px){
  .shopify-section-group-footer-group,
  .shopify-section-group-footer-group .section{ text-align:center; }
  .shopify-section-group-footer-group a{ display:inline-block !important; padding:6px 0 !important; }
}



/* ==================================================================
   FINAL PASS
   1. The bone->blue edge: the ::before fade never showed once the wrapper
      started painting the field. Make the fade a background LAYER on the
      same element instead, pinned to its top edge, so it always composites.
   2. The footer "Terms and Policies" slab: my newsletter-button rule was
      catching every footer button. Only the submit control stays filled.
   ================================================================== */
main > .shopify-section:has(.hg-univ){
  background-color:var(--heigs-surface-base) !important;
  background-image:
    linear-gradient(180deg,
      var(--icw-bone-light) 0%,
      rgba(250,250,249,.90) 26%,
      rgba(250,250,249,.62) 52%,
      rgba(250,250,249,.28) 78%,
      rgba(250,250,249,0) 100%),
    radial-gradient(58% 52% at 50% 34%, rgba(255,255,255,.62), rgba(255,255,255,0) 68%),
    var(--heigs-surface) !important;
  background-size:100% clamp(200px,26vw,380px), 190% 170%, 100% 100% !important;
  background-position:0 0, 50% 38%, 0 0 !important;
  background-repeat:no-repeat, no-repeat, no-repeat !important;
  background-attachment:scroll, fixed, fixed !important;
}
.hg-univ{ background:transparent !important; }
.hg-univ::before, .hg-univ::after{ content:none !important; }
main > .shopify-section:has(.hg-univ){ position:relative; }
.shopify-section:has(.hg-univ)::before{ content:none !important; }

/* footer buttons are plain text again — except the newsletter submit */
html body .shopify-section-group-footer-group button,
html body .shopify-section-group-footer-group button *,
html body .heigs-footer button:not([type="submit"]),
html body .heigs-footer button:not([type="submit"]) *{
  background:transparent !important;
  color:var(--heigs-on-surface) !important;
  border:0 !important;
  padding:0 !important;
  font-size:14px !important;
  letter-spacing:normal !important;
  text-transform:none !important;
  min-height:0 !important;
  border-radius:0 !important;
}
html body .heigs-footer button[type="submit"],
html body .heigs-footer input[type="submit"]{
  background:var(--heigs-on-surface) !important;
  color:var(--icw-bone-light) !important;
  border:1px solid var(--heigs-on-surface) !important;
  padding:14px 20px !important;
  letter-spacing:.08em !important;
}


/* ==================================================================
   THE FIELD, DONE PROPERLY.
   background-attachment:fixed is what was flickering on iOS and letting
   blue bleed while scrolling. One real element instead: absolutely
   positioned from the top of HEIGS Universe to the bottom of the page,
   sitting at z-index -1 so opaque sections above simply cover it.
   ================================================================== */
#heigs-field{
  position:absolute; left:0; right:0; bottom:0;
  z-index:-1;
  pointer-events:none;
  background-color:var(--heigs-surface-base);
  background-image:
    linear-gradient(180deg,
      var(--icw-bone-light) 0%,
      rgba(250,250,249,.90) 24%,
      rgba(250,250,249,.60) 50%,
      rgba(250,250,249,.26) 76%,
      rgba(250,250,249,0) 100%),
    var(--heigs-grain),
    radial-gradient(58% 52% at 50% 34%, rgba(255,255,255,.62), rgba(255,255,255,0) 68%),
    var(--heigs-surface);
  background-size:100% clamp(200px,26vw,380px), 220px 220px, 190% 170%, 100% 100%;
  background-position:0 0, 0 0, 50% 38%, 0 0;
  background-repeat:no-repeat, repeat, no-repeat, no-repeat;
  background-attachment:scroll, scroll, scroll, scroll;
}

/* nothing else paints the field any more */
main > .shopify-section:has(.hg-univ),
.hg-univ,
.shopify-section-group-footer-group,
.shopify-section:has(.heigs-footer),
.heigs-footer{
  background:transparent !important;
  background-image:none !important;
  color:var(--heigs-on-surface) !important;
}
.hg-univ::before, .hg-univ::after,
.shopify-section-group-footer-group::before, .shopify-section-group-footer-group::after,
.heigs-footer::before, .heigs-footer::after{ content:none !important; }

/* the menu overlays are self-contained: their own gradient, sized to themselves,
   no fixed attachment anywhere */
.hgn__panel, .hgn__drawer{
  background-color:var(--heigs-surface-base) !important;
  background-image:var(--heigs-grain), radial-gradient(58% 52% at 50% 34%, rgba(255,255,255,.62), rgba(255,255,255,0) 68%), var(--heigs-surface) !important;
  background-size:220px 220px, 190% 170%, 100% 100% !important;
  background-position:0 0, 50% 38%, 0 0 !important;
  background-repeat:repeat, no-repeat, no-repeat !important;
  background-attachment:scroll, scroll, scroll !important;
  animation:none !important;
}
html.hgn-open .shopify-section-group-header-group{
  background-color:var(--heigs-surface-base) !important;
  background-image:var(--heigs-grain), radial-gradient(58% 52% at 50% 34%, rgba(255,255,255,.62), rgba(255,255,255,0) 68%), var(--heigs-surface) !important;
  background-size:220px 220px, 190% 170%, 100% 100% !important;
  background-position:0 0, 50% 38%, 0 0 !important;
  background-repeat:repeat, no-repeat, no-repeat !important;
  background-attachment:scroll, scroll, scroll !important;
  animation:none !important;
}


/* the drawer scrolls, so its background must scroll with it — otherwise the
   ramp is painted to the viewport box and the list slides past it, which is
   what produced the hard grey/blue band mid-menu */
.hgn__drawer{
  background-attachment:local, local, local !important;
  background-size:220px 220px, 190% 170%, 100% 100% !important;
  background-position:0 0, 50% 30%, 0 0 !important;
  background-repeat:repeat, no-repeat, no-repeat !important;
  background-image:var(--heigs-grain), radial-gradient(58% 52% at 50% 34%, rgba(255,255,255,.62), rgba(255,255,255,0) 68%), var(--heigs-surface) !important;
  background-color:var(--heigs-surface-base) !important;
}


/* ==================================================================
   PRODUCT PAGE
   Body copy was 13.6px Helvetica Neue while the nav is 21px Schibsted —
   three typefaces on one site and the buying column the smallest text on
   the page. Scope a fix to the product section only.
   ================================================================== */
main .shopify-section:has(.add-to-cart-button) p,
main .shopify-section:has(.add-to-cart-button) li,
main .shopify-section:has(.add-to-cart-button) span,
main .shopify-section:has(.add-to-cart-button) div,
main .shopify-section:has(.add-to-cart-button) label,
main .shopify-section:has(.add-to-cart-button) input,
main .shopify-section:has(.add-to-cart-button) select,
main .shopify-section:has(.add-to-cart-button) button,
main .shopify-section:has(.add-to-cart-button) summary{
  font-family:"Schibsted Grotesk", "Mier A", -apple-system, Helvetica, Arial, sans-serif !important;
}
main .shopify-section:has(.add-to-cart-button) p,
main .shopify-section:has(.add-to-cart-button) li{
  font-size:15.5px !important;
  line-height:1.62 !important;
}
main .shopify-section:has(.add-to-cart-button) .price,
main .shopify-section:has(.add-to-cart-button) [class*="price"]{
  font-size:17px !important;
}
main .add-to-cart-button,
main .add-to-cart-button *{
  font-family:"Schibsted Grotesk", "Mier A", -apple-system, Helvetica, Arial, sans-serif !important;
  font-size:15px !important;
  letter-spacing:.06em !important;
}
main .add-to-cart-button{
  min-height:54px !important;
  background:var(--heigs-on-surface) !important;
  border-color:var(--heigs-on-surface) !important;
  color:var(--icw-bone-light) !important;
}
/* the lead-time rows and small labels stay small but legible */
main .shopify-section:has(.add-to-cart-button) .heigs-lead,
main .shopify-section:has(.add-to-cart-button) [class*="label"]{
  font-size:13px !important;
  letter-spacing:.06em !important;
}


/* the add-to-cart lost a specificity fight at .button — outrank it, and give
   the product title a size that matches the rest of the page */
html body main add-to-cart-component .button.add-to-cart-button,
html body main .shopify-product-form .button.add-to-cart-button,
html body main .button.add-to-cart-button,
html body main .button.add-to-cart-button span{
  font-family:"Schibsted Grotesk", "Mier A", -apple-system, Helvetica, Arial, sans-serif !important;
  font-size:15px !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
}
html body main .button.add-to-cart-button{
  min-height:56px !important;
  padding-block:18px !important;
  background:var(--heigs-on-surface) !important;
  border:1px solid var(--heigs-on-surface) !important;
  color:var(--icw-bone-light) !important;
  border-radius:0 !important;
}
html body main .button.add-to-cart-button:hover{ opacity:.9; }

/* product title */
html body main .shopify-section:has(.add-to-cart-button) h1,
html body main .shopify-section:has(.add-to-cart-button) .product-title{
  font-size:26px !important;
  line-height:1.22 !important;
  letter-spacing:normal !important;
  font-family:"Schibsted Grotesk", "Mier A", -apple-system, Helvetica, Arial, sans-serif !important;
}


/* the toggle pill is a <button>, so the .hgc button reset squared it off */
.hgc__pill, .heigs-size__pill{
  border-radius:999px !important;
  border:1px solid currentColor !important;
  background:transparent !important;
}
.hgc__pill.is-on, .heigs-size__pill.is-on{ background:currentColor !important; }
.hgc__pill::after, .heigs-size__pill::after{ border-radius:50% !important; }


/* ==================================================================
   MOTION — one curve, one duration, everywhere.
   In Common With run cubic-bezier(.4,0,.2,1) at .4s on background-color,
   opacity and transform, and nothing else. This site had four different
   curves and five durations. Now it has one of each.
   ================================================================== */
:root{
  --heigs-ease:cubic-bezier(.4,0,.2,1);
  --heigs-dur:.4s;
  --heigs-dur-fast:.3s;
}

/* cross-document transitions: page changes cross-fade instead of blinking */
@view-transition{ navigation:auto; }
::view-transition-old(root),
::view-transition-new(root){
  animation-duration:var(--heigs-dur);
  animation-timing-function:var(--heigs-ease);
}

/* the size pill carries its identity across the navigation, so the knob
   physically slides from one side to the other as the page changes */
.heigs-size__pill, .hgc__pill{ view-transition-name:heigs-size-pill; }
.hgn__logo img{ view-transition-name:heigs-logo; }

/* the shared transition surface */
a, button, summary,
.hgc__card, .hgc__name, .hgc__price,
.hgn__u, .hgn__trigger, .hgn__big a, .hgn__sub a, .hgn__all,
.heigs-size__row, .hgc__item, .hgn__list a,
.shopify-section-group-footer-group a, .heigs-footer a{
  transition:color var(--heigs-dur) var(--heigs-ease),
             background-color var(--heigs-dur) var(--heigs-ease),
             opacity var(--heigs-dur) var(--heigs-ease),
             border-color var(--heigs-dur) var(--heigs-ease),
             transform var(--heigs-dur) var(--heigs-ease);
}

/* everything that already had a bespoke curve is brought onto the same one */
.hgn__panel{ transition:height var(--heigs-dur) var(--heigs-ease) !important; }
.hgn__panel > .hgn__grid{ transition:transform var(--heigs-dur) var(--heigs-ease) !important; }
.hgn__drawer{ transition:transform var(--heigs-dur) var(--heigs-ease) !important; }
.hgn__bar{ transition:background-color var(--heigs-dur) var(--heigs-ease),
                      color var(--heigs-dur) var(--heigs-ease) !important; }
.hgn__scrim{ transition:opacity var(--heigs-dur) var(--heigs-ease) !important; }
.hgn__dot{ transition:transform var(--heigs-dur-fast) var(--heigs-ease) !important; }
.hgn__plus::after, .hgc__plus::after{ transition:transform var(--heigs-dur) var(--heigs-ease) !important; }
.hgc__tray{ transition:max-height var(--heigs-dur) var(--heigs-ease),
                       opacity var(--heigs-dur-fast) var(--heigs-ease),
                       padding var(--heigs-dur) var(--heigs-ease),
                       margin var(--heigs-dur) var(--heigs-ease),
                       border-color var(--heigs-dur) var(--heigs-ease) !important; }
.hgn__accp{ transition:max-height var(--heigs-dur) var(--heigs-ease),
                       opacity var(--heigs-dur-fast) var(--heigs-ease),
                       padding var(--heigs-dur) var(--heigs-ease) !important; }
.hgc__pill, .hgc__pill::after,
.heigs-size__pill, .heigs-size__pill::after{
  transition:background-color var(--heigs-dur) var(--heigs-ease),
             transform var(--heigs-dur) var(--heigs-ease) !important;
}
.hgc__media img, .hg-univ__media img{
  transition:opacity var(--heigs-dur) var(--heigs-ease) !important;
}

/* images settle in rather than snapping */
main img{ animation:heigs-img-in var(--heigs-dur) var(--heigs-ease) both; }
@keyframes heigs-img-in{ from{opacity:0} to{opacity:1} }

/* restrained hover, same curve */
.hgc__card:hover .hgc__media img{ opacity:.9; }
.hgn__u:hover, .hgn__big a:hover, .hgn__sub a:hover, .hgc__item:hover{ opacity:.62; }

@media (prefers-reduced-motion:reduce){
  @view-transition{ navigation:none; }
  main img{ animation:none; }
}


/* category blocks run edge to edge, mobile and desktop */
.hg-cath-stack{
  padding-inline:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
  max-width:none !important;
  margin-inline:0 !important;
}
.hg-cath-stack > *{ padding-inline:0 !important; margin-inline:0 !important; }
.hg-cath-stack img{ width:100% !important; display:block; }
/* the editorial grid too — same full-bleed treatment */
.heigs-ed{ padding-inline:0 !important; }
.heigs-ed__grid{ gap:0 !important; }


/* ==================================================================
   TYPOGRAPHY — one register across catalogue and product pages.
   Measured off auralee.jp: weight 300-400, ~0.7px tracking,
   rgb(108,108,108). Product names in the house serif, small and
   uppercase, the way Auralee use Marcellus.
   ================================================================== */
html body main .shopify-section:has(.add-to-cart-button) h1,
html body main .shopify-section:has(.add-to-cart-button) .product-title,
html body main .shopify-section:has(.add-to-cart-button) [class*="text-block"]:first-of-type{
  font-family:'Playfair Display',Georgia,serif !important;
  font-size:17px !important;
  font-weight:400 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  line-height:1.5 !important;
  color:rgb(72,72,72) !important;
}
html body main .shopify-section:has(.add-to-cart-button) .price,
html body main .shopify-section:has(.add-to-cart-button) [class*="price"]{
  font-family:'Playfair Display',Georgia,serif !important;
  font-size:14px !important;
  font-weight:400 !important;
  letter-spacing:.07em !important;
  color:rgb(108,108,108) !important;
}
html body main .shopify-section:has(.add-to-cart-button) p,
html body main .shopify-section:has(.add-to-cart-button) li{
  font-size:13.5px !important;
  font-weight:300 !important;
  letter-spacing:.02em !important;
  line-height:1.75 !important;
  color:rgb(108,108,108) !important;
}
html body main .button.add-to-cart-button,
html body main .button.add-to-cart-button span{
  font-size:12px !important;
  font-weight:300 !important;
  letter-spacing:.18em !important;
  text-transform:uppercase !important;
}
/* the small label rows keep the same quiet grey */
.heigs-lead__k, .heigs-size__k, .heigs-size__hint{
  color:rgb(108,108,108) !important;
  font-weight:300 !important;
  letter-spacing:.1em !important;
}
.heigs-lead__v{ color:rgb(108,108,108) !important; font-weight:300 !important; }


/* the title block's inner <p> was inheriting the body-copy rule above it */
html body main [class*="product_title"],
html body main [class*="product_title"] p,
html body main [class*="product_title"] span{
  font-family:'Playfair Display',Georgia,serif !important;
  font-size:17px !important;
  font-weight:400 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  line-height:1.5 !important;
  color:rgb(72,72,72) !important;
}


/* outrank `main .shopify-section:has(.add-to-cart-button) p` (0,2,2)
   with (0,3,4) so the product title keeps the serif, not just the caps */
html body main .shopify-section:has(.add-to-cart-button) [class*="product_title"],
html body main .shopify-section:has(.add-to-cart-button) [class*="product_title"] p,
html body main .shopify-section:has(.add-to-cart-button) [class*="product_title"] span{
  font-family:'Playfair Display',Georgia,serif !important;
  font-size:17px !important;
  font-weight:400 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  line-height:1.55 !important;
  color:rgb(72,72,72) !important;
}


/* ------------------------------------------------------------------
   Homepage editorial grid — same register as the catalogue and PDP.
   Auralee's measured values: ~12px, weight 300-400, 0.7px tracking,
   rgb(108,108,108). Images stay full-bleed; only the text is inset,
   which is why titles were colliding at both edges.
   ------------------------------------------------------------------ */
.heigs-ed__info,
.heigs-ed__head{
  padding-inline:var(--heigs-pad) !important;
}
html body .heigs-ed__title,
html body .heigs-ed__title *,
html body .heigs-ed__price{
  font-family:'Playfair Display',Georgia,serif !important;
  font-size:12.5px !important;
  font-weight:400 !important;
  letter-spacing:.07em !important;
  text-transform:uppercase !important;
  line-height:1.6 !important;
  color:rgb(108,108,108) !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
}
html body .heigs-ed__price{ color:rgba(108,108,108,.72) !important; margin-top:4px; }
html body .heigs-ed__h{
  font-family:'Playfair Display',Georgia,serif !important;
  font-size:15px !important;
  font-weight:400 !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
  color:rgb(72,72,72) !important;
}
html body .heigs-ed__intro,
html body .heigs-ed__intro p{
  font-size:13.5px !important;
  font-weight:300 !important;
  line-height:1.75 !important;
  color:rgb(108,108,108) !important;
  letter-spacing:.02em !important;
}
html body .heigs-ed__tag{
  font-size:11px !important; font-weight:300 !important;
  letter-spacing:.12em !important; color:rgb(108,108,108) !important;
}
@media (max-width:859px){
  html body .heigs-ed__title, html body .heigs-ed__price{ font-size:11.5px !important; }
  html body .heigs-ed__h{ font-size:13px !important; }
}


/* ------------------------------------------------------------------
   MOBILE ABOVE-THE-FOLD
   The header was 222px on a 900px screen — 150px of it logo — and the
   first product image another 898px, so nothing but a header and half
   an image was visible on landing. The homepage keeps its big logo
   (it overlays the hero and costs no content space); every other
   template gets a compact header, and the PDP image is capped so the
   title, price and colour picker sit above the fold.
   ------------------------------------------------------------------ */
@media (max-width:859px){
  .hgn__bar{ padding-block:14px !important; }
  .hgn__bar .hgn__logo img{ height:62px !important; }

  /* first media no longer taller than the screen */
  main .product-media-container,
  main .product-media,
  main media-gallery .product-media__image{
    max-height:56vh !important;
  }
  main media-gallery .product-media__image{
    object-fit:contain !important;
    background:var(--icw-bone-light);
  }
  main media-gallery{ margin-bottom:0 !important; }

  /* pull the buying column up under the image */
  main .shopify-section:has(.add-to-cart-button) [class*="product_title"]{
    margin-top:var(--s5) !important;
  }
}


/* "Also in the house" on the PDP — same register as everywhere else */
html body .hg-also__name,
html body .hg-also__name *,
html body .hg-also__price{
  font-family:'Playfair Display',Georgia,serif !important;
  font-size:12.5px !important;
  font-weight:400 !important;
  letter-spacing:.07em !important;
  text-transform:uppercase !important;
  line-height:1.6 !important;
  color:rgb(108,108,108) !important;
}
html body .hg-also__price{ color:rgba(108,108,108,.72) !important; margin-top:4px !important; }
html body .hg-also__eyebrow{
  font-family:'Playfair Display',Georgia,serif !important;
  font-size:15px !important;
  font-weight:400 !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
  font-style:normal !important;
  color:rgb(72,72,72) !important;
}
@media (max-width:859px){
  html body .hg-also__name, html body .hg-also__price{ font-size:11.5px !important; }
  html body .hg-also__eyebrow{ font-size:13px !important; }
}


/* ------------------------------------------------------------------
   HOMEPAGE COPY — the "TOTE BAGS / Everyday totes…" pairing is the
   reference: small uppercase serif label over light grey body copy.
   Applied to the manifesto, the category tiles and the Universe cards
   so nothing on the homepage sits outside the register.
   ------------------------------------------------------------------ */
html body .hg-colintro__p{
  font-family:'Schibsted Grotesk',Helvetica,Arial,sans-serif !important;
  font-size:13.5px !important;
  font-weight:300 !important;
  line-height:1.8 !important;
  letter-spacing:.02em !important;
  color:rgb(108,108,108) !important;
  max-width:56ch;
  margin-inline:auto;
}
html body .hg-colintro__label,
html body .hg-univ__cardsub{
  font-family:'Playfair Display',Georgia,serif !important;
  font-size:13px !important;
  font-weight:400 !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
  font-style:normal !important;
  color:rgb(108,108,108) !important;
}
html body .hg-univ__title{
  font-family:'Playfair Display',Georgia,serif !important;
  font-size:15px !important;
  font-weight:400 !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
  color:rgb(72,72,72) !important;
}
html body .hg-univ__cardtitle{
  font-family:'Playfair Display',Georgia,serif !important;
  font-size:12.5px !important;
  font-weight:400 !important;
  letter-spacing:.07em !important;
  text-transform:uppercase !important;
  color:rgb(72,72,72) !important;
}
html body .hg-univ__cardsub{ font-size:11.5px !important; letter-spacing:.1em !important; }
html body .hg-univ__all{
  font-family:'Playfair Display',Georgia,serif !important;
  font-size:12px !important; font-weight:400 !important;
  letter-spacing:.16em !important; color:rgb(108,108,108) !important;
  border-bottom-color:rgba(108,108,108,.4) !important;
}
html body .hg-cath__sub{
  font-family:'Schibsted Grotesk',Helvetica,Arial,sans-serif !important;
  font-size:12px !important; font-weight:300 !important;
  letter-spacing:.1em !important; text-transform:uppercase !important;
  color:rgb(108,108,108) !important;
}
@media (max-width:859px){
  html body .hg-colintro__p{ font-size:13px !important; }
  html body .hg-colintro__label{ font-size:11.5px !important; }
  html body .hg-univ__title{ font-size:13px !important; }
}


/* ==================================================================
   DESKTOP SCALE
   The register was tuned on a 430px phone; at 1900px the same values
   read as fine print. Same system, stepped up, with the copy blocks
   given more of the page width.
   ================================================================== */
@media (min-width:860px){
  /* homepage manifesto */
  html body .hg-colintro__p{
    font-size:17px !important;
    line-height:1.9 !important;
    max-width:64ch;
  }
  html body .hg-colintro__label{ font-size:15px !important; letter-spacing:.16em !important; }

  /* homepage editorial grid */
  html body .heigs-ed__h{ font-size:18px !important; letter-spacing:.16em !important; }
  html body .heigs-ed__intro,
  html body .heigs-ed__intro p{ font-size:16px !important; line-height:1.85 !important; max-width:62ch; }
  html body .heigs-ed__title,
  html body .heigs-ed__title *,
  html body .heigs-ed__price{ font-size:13.5px !important; letter-spacing:.08em !important; }
  html body .heigs-ed__head{ margin-bottom:40px !important; }

  /* catalogue */
  .hgc__title{ font-size:18px !important; letter-spacing:.16em !important; }
  .hgc__name{ font-size:13.5px !important; letter-spacing:.08em !important; }
  .hgc__price{ font-size:13.5px !important; }
  .hgc__item, .hgc__grouph{ font-size:14px !important; }

  /* product page */
  html body main .shopify-section:has(.add-to-cart-button) [class*="product_title"],
  html body main .shopify-section:has(.add-to-cart-button) [class*="product_title"] p{
    font-size:21px !important; letter-spacing:.14em !important;
  }
  html body main .shopify-section:has(.add-to-cart-button) .price,
  html body main .shopify-section:has(.add-to-cart-button) [class*="price"]{ font-size:16px !important; }
  html body main .shopify-section:has(.add-to-cart-button) p,
  html body main .shopify-section:has(.add-to-cart-button) li{
    font-size:15.5px !important; line-height:1.85 !important;
  }
  html body main .button.add-to-cart-button,
  html body main .button.add-to-cart-button span{ font-size:13px !important; }

  /* also in the house + universe */
  html body .hg-also__name, html body .hg-also__name *, html body .hg-also__price{ font-size:13.5px !important; }
  html body .hg-also__eyebrow{ font-size:18px !important; }
  html body .hg-univ__title{ font-size:18px !important; }
  html body .hg-univ__cardtitle{ font-size:14px !important; }
  html body .hg-univ__cardsub{ font-size:12.5px !important; }
  html body .hg-univ__all{ font-size:13px !important; }
}

@media (min-width:1500px){
  html body .hg-colintro__p{ font-size:18px !important; max-width:68ch; }
  html body .heigs-ed__intro, html body .heigs-ed__intro p{ font-size:17px !important; }
  .hgc__name, .hgc__price,
  html body .heigs-ed__title, html body .heigs-ed__title *, html body .heigs-ed__price{ font-size:14px !important; }
  html body main .shopify-section:has(.add-to-cart-button) p{ font-size:16px !important; }
}


/* ==================================================================
   SITEWIDE TYPOGRAPHIC BASE — every template, including the ones with
   no bespoke styling (cart, search, 404, policies, account, contact,
   stockist, wholesale, list-collections, article, gift card).
   Body copy: Schibsted 300, rgb(108,108,108).
   Headings:  Playfair 400, uppercase, .14em, rgb(72,72,72).
   The nav, buttons and form controls are deliberately excluded.
   ================================================================== */
main p, main li, main dd, main dt, main td, main th,
main blockquote, main figcaption, main address, main small,
main .rte, main .rte p, main .rte li, main .rte span,
main [class*="text-block"] p,
main [class*="rich-text"] p,
main [class*="description"] p{
  font-family:'Schibsted Grotesk',Helvetica,Arial,sans-serif;
  font-weight:300;
  letter-spacing:.02em;
  line-height:1.8;
  color:rgb(108,108,108);
}
main p, main li{ font-size:15px; }

main h1, main h2, main h3, main h4, main h5, main h6,
main [class*="section-heading"], main [class*="page-title"],
main [class*="collection-title"], main [class*="blog-title"]{
  font-family:'Playfair Display',Georgia,serif;
  font-weight:400;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgb(72,72,72);
  line-height:1.5;
}
main h1{ font-size:21px; }
main h2{ font-size:18px; }
main h3{ font-size:16px; }
main h4, main h5, main h6{ font-size:14px; }

/* links inside copy stay in the same voice */
main .rte a, main p a{ color:rgb(72,72,72); text-underline-offset:3px; }

/* controls keep their own sizing so forms stay usable */
main input, main select, main textarea{
  font-family:'Schibsted Grotesk',Helvetica,Arial,sans-serif;
  font-weight:300;
  color:rgb(72,72,72);
}
main label{
  font-family:'Schibsted Grotesk',Helvetica,Arial,sans-serif;
  font-weight:300; letter-spacing:.08em; color:rgb(108,108,108);
}
/* the nav is its own system — never touched by the base */
.hgn, .hgn *{ font-family:'Schibsted Grotesk',Helvetica,Arial,sans-serif; }

@media (max-width:859px){
  main p, main li{ font-size:13.5px; }
  main h1{ font-size:17px; }
  main h2{ font-size:15px; }
  main h3{ font-size:13.5px; }
}
@media (min-width:1500px){
  main p, main li{ font-size:16px; }
}


/* ==================================================================
   TEXT OVER IMAGERY
   Bone-white type, a hairline of shadow, and nothing else. No plates,
   no vignette — a dark wash behind a word reads as a smudge on pale
   studio photography, and the image is the point.
   ================================================================== */
html body .hg-cath__title,
html body .hg-cath__sub,
html body .hg-cath__cta,
html body .heigs-cat__btn,
html body .heigs-cat__sub{
  color:#FFFFFF !important;
  background-image:none !important;
  background-color:transparent !important;
  padding-inline:0 !important;
  text-shadow:0 0 1px rgba(24,32,40,.34), 0 1px 3px rgba(24,32,40,.26) !important;
}
html body .hg-cath__cta{ padding:0 0 6px !important; }
html body .heigs-cat__btn{ padding:0 0 6px !important; }

/* ==================================================================
   MOBILE DRAWER — one continuous field, top to bottom.
   The grain used to ride on ::before/::after, and inside a scrolling
   box those pseudo-elements are only as tall as the viewport: the
   texture stopped dead halfway down the list and left a hard grey/blue
   edge. The grain now lives in the drawer's own background layers
   (attachment:local, so it travels with the list) and the ramp is
   sized to the list's own height by the nav script, so it completes
   exactly at the last link. The base colour stays bone — a blue base
   leaks into Safari's status and address bars while the menu is shut.
   ================================================================== */
.hgn__drawer::before,
.hgn__drawer::after{ content:none !important; }

.hgn__drawer{
  background-color:var(--icw-bone-light) !important;
  background-image:
    var(--heigs-grain-3),
    var(--heigs-grain),
    var(--heigs-grain-2),
    radial-gradient(64% 40% at 50% 22%, rgba(255,255,255,.46), rgba(255,255,255,0) 70%),
    linear-gradient(180deg,#F2F6F9 0%,#E8EFF5 15%,#DAE6EF 33%,#C9DAE7 53%,#B7CDDE 73%,#A9C3D8 90%,#A5C0D5 100%) !important;
  background-size:
    160px 160px,
    220px 220px,
    150px 150px,
    190% 130%,
    100% var(--hgn-drawer-h,1400px) !important;
  background-position:0 0, 0 0, 0 0, 50% 18%, 0 0 !important;
  background-repeat:repeat, repeat, repeat, no-repeat, no-repeat !important;
  background-attachment:local, local, local, local, local !important;
  background-blend-mode:overlay, soft-light, soft-light, normal, normal !important;
}

/* the header group behind an open drawer keeps the same ground */
html.hgn-open .shopify-section-group-header-group{
  background-color:#F2F6F9 !important;
}

/* nothing blue may reach the page edges — iOS tints its status and
   address bars from whatever paints there */
html, body{ background-color:var(--icw-bone-light) !important; }

/* pale photography takes ink type instead of bone — no wash, no plate */
html body .hg-cath--ink .hg-cath__title,
html body .hg-cath--ink .hg-cath__sub,
html body .hg-cath--ink .hg-cath__cta{
  color:#16202A !important;
  text-shadow:0 1px 2px rgba(255,255,255,.5) !important;
}
html body .hg-cath--ink .hg-cath__cta{ border-bottom-color:rgba(22,32,42,.55) !important; }
html body .hg-cath--ink .hg-cath__bar{ background:rgba(22,32,42,.30) !important; }
html body .hg-cath--ink .hg-cath__bar.is-active{ background:rgba(22,32,42,.85) !important; }
html body .hg-cath--ink .hg-cath__next{ color:#16202A !important; }


/* ==================================================================
   THE BLUE LIVES IN THE MENU, NOWHERE ELSE.
   The page-wide field was painting the footer and, because it is an
   absolutely-positioned element, it was also stretching the document
   ~800px past the last section — which is what tinted iOS's status
   and address bars blue on every scroll. Page ground is bone from top
   to bottom; the pastel ramp only appears when the menu is open.
   ================================================================== */
#heigs-field{ display:none !important; }

html, body,
main, .shopify-section,
main > .shopify-section:has(.hg-univ),
.hg-univ,
.shopify-section-group-footer-group,
.shopify-section:has(.heigs-footer),
.heigs-footer{
  background-color:var(--icw-bone-light) !important;
  background-image:none !important;
  color:var(--heigs-on-surface) !important;
}
.hg-univ::before, .hg-univ::after,
.shopify-section-group-footer-group::before,
.shopify-section-group-footer-group::after,
.heigs-footer::before, .heigs-footer::after{ content:none !important; }

/* sections that carry their own imagery must stay transparent so the
   bone ground above does not paint over them */
.shopify-section:has(.hg-cath),
.shopify-section:has(.hgc),
.hg-cath, .hg-cath-stack, .hg-cath__slide,
.heigs-cat__tile, .heigs-cat__media{
  background-color:transparent !important;
}