/** Shopify CDN: Minification failed

Line 5476:0 Unexpected "}"
Line 9533:0 Expected "}" to go with "{"

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

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

:root {
  --hover-lift-amount: 4px;
  --hover-scale-amount: 1.03;
  --hover-subtle-zoom-amount: 1.015;
  --hover-shadow-color: var(--color-shadow);
  --hover-transition-duration: 0.25s;
  --hover-transition-timing: ease-out;
  --surface-transition-duration: 0.3s;
  --surface-transition-timing: var(--ease-out-quad);
  --submenu-animation-speed: 360ms;
  --submenu-animation-easing: cubic-bezier(0.25, 0.1, 0.25, 1);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.product-card__content {
  position: relative;
}

.product-card__content {
  cursor: pointer;
}

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

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

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

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

}

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

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

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

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

p:empty {
  display: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.content-for-layout > .shopify-section:last-child {
  flex-grow: 1;
}

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

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

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

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

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

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

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

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

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

  width: 100%;

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

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

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

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

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

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

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

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

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

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

/* For full-width sections with margin, content still spans full width but with space on the sides */
.section--full-width.section--full-width-margin > * {
  grid-column: 1 / -1;

  @media screen and (min-width: 750px) {
    padding-left: var(--page-margin);
    padding-right: var(--page-margin);
  }
}

/* Some section content break out to full width of the page */
.section > .force-full-width {
  grid-column: 1 / -1;
}

.section--height-small {
  --section-min-height: var(--section-height-small);
}

.section--height-medium {
  --section-min-height: var(--section-height-medium);
}

.section--height-large {
  --section-min-height: var(--section-height-large);
}

.section--height-full-screen {
  --section-min-height: 100svh;
}

.section-content-wrapper.section-content-wrapper {
  min-height: calc(var(--section-min-height, 'auto') - var(--section-height-offset, 0px));
  position: relative;
  width: 100%;
  height: 100%;
}

/* Utility */

.hidden {
  /* stylelint-disable-next-line declaration-no-important */
  display: none !important;
}

@media screen and (max-width: 749px) {
  .hidden--mobile,
  .mobile\:hidden {
    /* stylelint-disable-next-line declaration-no-important */
    display: none !important;
  }
}

@media screen and (min-width: 750px) {
  .hidden--desktop,
  .desktop\:hidden {
    /* stylelint-disable-next-line declaration-no-important */
    display: none !important;
  }
}

.hide-when-empty:empty {
  /* stylelint-disable-next-line declaration-no-important */
  display: none !important;
}

.visually-hidden:not(:focus, :active) {
  /* stylelint-disable-next-line declaration-no-important */
  position: absolute !important;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  /* stylelint-disable-next-line declaration-no-important */
  word-wrap: normal !important;
}

@media screen and (max-width: 749px) {
  .is-visually-hidden-mobile:not(:focus, :active) {
    /* stylelint-disable-next-line declaration-no-important */
    position: absolute !important;
    overflow: hidden;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    /* stylelint-disable-next-line declaration-no-important */
    word-wrap: normal !important;
  }
}

.contents {
  display: contents;
}

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

.grid {
  --centered-column-number: 12;
  --full-width-column-number: 14;
  --centered: column-1 / span var(--centered-column-number);
  --full-width: column-0 / span var(--full-width-column-number);

  display: flex;
  flex-direction: column;
}

@media screen and (min-width: 750px) {
  .grid {
    display: grid;
    gap: 0;
    grid-template-columns: var(--margin-4xl) repeat(var(--centered-column-number), minmax(0, 1fr)) var(--margin-4xl);
    grid-template-areas: 'column-0 column-1 column-2 column-3 column-4 column-5 column-6 column-7 column-8 column-9 column-10 column-11 column-12 column-13';
  }
}

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

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

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

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

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

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

  text-align: left;
}

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

  text-align: center;
}

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

  text-align: right;
}

.text-inherit {
  color: inherit;
}

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

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

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

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

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

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

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

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

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

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

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

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

.relative {
  position: relative;
}

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

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

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

.icon-default {
  fill: currentColor;
}

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

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

/* 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 > *,
.text-block.h1 :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-h1--family);
  font-style: var(--font-h1--style);
  font-weight: var(--font-h1--weight);
  font-size: var(--font-h1--size);
  line-height: var(--font-h1--line-height);
  letter-spacing: var(--font-h1--letter-spacing);
  text-transform: var(--font-h1--case);
  color: var(--color, var(--font-h1-color));
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    footer {
      view-transition-name: footer;
    }

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

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

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

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

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

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

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

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

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

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

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

.text-block {
  width: 100%;
}

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

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

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

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

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

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

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

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

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

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

  &::backdrop {
    opacity: 0;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Show more */

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

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

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

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

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

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

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

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

/* Collapsible row */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .media-gallery--large-first-image .product-media-container:first-child,
  .media-gallery--two-column .product-media-container:only-child {
    /* First child spans 2 columns */
    grid-column: span 2;
  }
}
.product-media-container--model {
  /* Usefull when view in your space is shown */
  flex-direction: column;
}

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

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

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

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

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

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

  &[open] {
    opacity: 1;
  }

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

  &::backdrop {
    background: transparent;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  width: 100%;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* This triggers iOS < 16.4. The outline bug is not recognized as a lack of @supports */
@supports not (background-color: rgb(from red 150 g b / alpha)) {
  /** There is a bug in safari < 16.4 that causes the outline to not follow the elements border radius. This is a workaround. **/
  .variant-option__button-label--has-swatch:has(:checked),
  .variant-option__button-label:has(:focus-visible) .swatch {
    outline: none;
    position: relative;
    overflow: visible;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.price__hidden {
  display: none;
}

form.payment-terms {
  padding-top: 0.5em;
  font-size: min(0.85em, var(--font-paragraph--size));
  font-weight: var(--font-paragraph--weight);
  color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
}

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

.card-gallery {
  position: relative;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    > .group-block--height-fill {
      height: calc(var(--section-min-height, auto) - var(--section-height-offset, 0px));
    }
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Fly to cart animation */
fly-to-cart {
  --offset-y: 10px;

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

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

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

  animation-duration: 0.6s;
}

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

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

  animation-duration: 0.8s;
}

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

  5% {
    opacity: 1;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  50% {
    transform: scale(1.2);
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Slideshow Arrow Hover Animation - must stay in base.css for proper CSS cascade */

:not(.media-gallery--carousel)
  > :is(slideshow-component:hover, slideshow-component:focus-within):not(:has(slideshow-controls:hover))
  > slideshow-container
  > slideshow-arrows
  .slideshow-control {
  animation: arrowsSlideIn var(--animation-speed) var(--animation-easing) forwards;
}

@keyframes arrowsSlideIn {
  from {
    transform: translate(var(--padding-sm), 0);
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

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

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

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

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

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

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

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

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

  width: 100%;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  &[shimmer] {
    color: transparent;

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

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

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

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

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

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

/* Global scrollbar styles */

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

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

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

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

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

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

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

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

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

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

.product-recommendations {
  display: block;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .burst {
    rotate: 20deg;
  }

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

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

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

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

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

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

  .tick {
    scale: 1.75;
  }

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

  .line {
    stroke-dashoffset: 1.5;
  }

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

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

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

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

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

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

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

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

/* Belle Maison product image badges */

.product-media,
.bm-product-card-media-frame {
  position: relative;
}

.product-media > .bm-product-badges,
.bm-product-card-media-frame > .bm-product-badges {
  position: absolute;
  inset: 0;
  z-index: 50;
  pointer-events: none;
}

.bm-product-badge {
  position: absolute;
  font-family: "Inter Tight", sans-serif;
  font-size: clamp(9px, 0.55vw, 12px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: clamp(6px, 0.5vw, 8px) clamp(8px, 0.7vw, 10px);
  background: #EF4C4C;
  color: #FFFDFA;
  border: 1px solid #EF4C4C;
}

.bm-product-badge--top-left {
  top: clamp(8px, 0.8vw, 12px);
  left: clamp(8px, 0.8vw, 12px);
}

.bm-product-badge--top-right {
  top: clamp(8px, 0.8vw, 12px);
  right: clamp(8px, 0.8vw, 12px);
}

.bm-product-badge--bottom-right {
  bottom: clamp(8px, 0.8vw, 12px);
  right: clamp(8px, 0.8vw, 12px);
}

/* Belle Maison product badges */

.bm-card-gallery {
  position: relative;
}

.bm-card-gallery .bm-product-badges {
  position: absolute;
  inset: 0;
  z-index: 40;
  pointer-events: none;
}

.bm-card-gallery .bm-product-badge {
  position: absolute;
}

/* Belle Maison mobile product badges */

.bm-product-badges-mobile {
  display: none;
}

@media screen and (max-width: 749px) {
  .bm-card-gallery > .bm-product-badges {
    display: none;
  }

  .bm-card-gallery .contents {
    position: relative;
  }

  .bm-product-badges-mobile {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 60;
    pointer-events: none;
  }

  .bm-product-badges-mobile .bm-product-badges {
    position: absolute;
    inset: 0;
  }
}

/* Belle Maison PDP mobile badges */

.bm-pdp-mobile-badges {
  display: none;
}

@media screen and (max-width: 749px) {
  .bm-pdp-mobile-badges {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 60;
    pointer-events: none;
  }
}

@media screen and (min-width: 750px) {
  .bm-pdp-single-media-frame {
    position: relative;
    display: block;
    width: 100%;
    max-width: 920px;
    aspect-ratio: 2 / 3;
    overflow: visible;
  }

  .bm-pdp-single-media-frame .product-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: 2 / 3 !important;
    line-height: 0;
    overflow: visible;
  }

  .bm-pdp-single-media-frame .product-media__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }
.bm-pdp-single-media-frame .product-media > .bm-product-badges {
  position: absolute;
  inset: 0;
  z-index: 60;
  pointer-events: none;
}

}

/* Belle Maison PDP single image alignment */

@media screen and (min-width: 750px) {
  .product-information__media .bm-pdp-single-media-frame {
    margin-left: auto;
    margin-right: 0;
  }
}

/* Belle Maison PDP single image large desktop lock */

@media screen and (min-width: 750px) {
  .product-information__media .product-media-container.bm-pdp-single-media-frame {
    position: relative;
    width: min(100%, 920px) !important;
    aspect-ratio: 2 / 3 !important;
    margin-left: auto;
    margin-right: 0;
    overflow: visible;
  }

}
/* Belle Maison PDP overflow fix */

@media screen and (min-width: 1400px) {

  .product-information__grid,
  .product-information__media,
  .media-gallery-grid,
  .media-gallery__grid,
  .product-media-container,
  .bm-pdp-single-media-frame {
    overflow: visible !important;
  }

}

/* Belle Maison PDP image-exact badge frame */

@media screen and (min-width: 750px) {
  .bm-pdp-single-media-frame .product-media {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .bm-pdp-single-media-frame .bm-product-media-image-frame {
    position: relative;
    display: block;
    width: min(100%, 920px);
    aspect-ratio: 2 / 3;
  }

  .bm-pdp-single-media-frame .bm-product-media-image-frame > .product-media__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  .bm-pdp-single-media-frame .bm-product-media-image-frame > .bm-product-badges {
    position: absolute;
    inset: 0;
    z-index: 60;
    pointer-events: none;
  }
}

.bm-pdp-image-wrapper {
  position: relative;
}

.bm-pdp-badge {
  position: absolute;
  z-index: 5;
  pointer-events: none;
}

.bm-pdp-badge--top-left {
  top: 20px;
  left: 20px;
}

.bm-pdp-badge--top-right {
  top: 20px;
  right: 20px;
}

.bm-pdp-badge--bottom-right {
  bottom: 20px;
  right: 20px;
}

/* Belle Maison PDP desktop carousel badges */

.bm-pdp-carousel-badges {
  display: none;
}

@media screen and (min-width: 750px) {
  .product-information__media .media-gallery--carousel .bm-pdp-carousel-frame {
    position: relative;
    width: min(100%, 920px);
    margin-left: auto;
    margin-right: 0;
  }

  .product-information__media .media-gallery--carousel .bm-pdp-carousel-frame slideshow-component,
  .product-information__media .media-gallery--carousel .bm-pdp-carousel-frame slideshow-container {
    width: 100%;
  }

  .product-information__media .media-gallery--carousel .bm-pdp-carousel-badges {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 80;
    pointer-events: none;
  }

  .product-information__media .media-gallery--carousel slideshow-component .product-media > .bm-product-badges,
  .product-information__media .media-gallery--carousel slideshow-component .bm-product-media-image-frame > .bm-product-badges {
    display: none;
  }
}

/* Belle Maison PDP desktop carousel image-ratio frame */

@media screen and (min-width: 750px) {
  .product-information__media .media-gallery--carousel .bm-pdp-carousel-frame {
    width: min(100%, calc((100vh - 140px) * 2 / 3));
    max-width: 920px;
    aspect-ratio: 2 / 3;
  }

  .product-information__media .media-gallery--carousel .bm-pdp-carousel-frame slideshow-component,
  .product-information__media .media-gallery--carousel .bm-pdp-carousel-frame slideshow-container,
  .product-information__media .media-gallery--carousel .bm-pdp-carousel-frame slideshow-slide,
  .product-information__media .media-gallery--carousel .bm-pdp-carousel-frame .product-media-container,
  .product-information__media .media-gallery--carousel .bm-pdp-carousel-frame .product-media,
  .product-information__media .media-gallery--carousel .bm-pdp-carousel-frame .bm-product-media-image-frame {
    width: 100%;
    height: 100%;
  }

  .product-information__media .media-gallery--carousel .bm-pdp-carousel-frame .product-media__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }
}

/* Belle Maison PDP desktop centered product information */

@media screen and (min-width: 750px) {
  .product-information {
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 56px;
    padding-right: 56px;
  }
}

/* Belle Maison mobile collection page padding */

@media screen and (max-width: 749px) {
  main[data-template="collection"] .collection-wrapper {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  main[data-template="collection"] .results-list {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Belle Maison collection product title line-height */

main[data-template="collection"] .product-grid__card :is(.product-card__title, .card__heading, .resource-card__title, product-title, h3, a) {
  line-height: 1.22 !important;
}

@media screen and (max-width: 749px) {
  main[data-template="collection"] .product-grid__card :is(.product-card__title, .card__heading, .resource-card__title, product-title, h3, a) {
    line-height: 1.12 !important;
  }
}

/* Belle Maison collection product price styling */

main[data-template="collection"] .product-grid__card .price,
main[data-template="collection"] .product-grid__card .price *,
main[data-template="collection"] .product-grid__card .price__regular,
main[data-template="collection"] .product-grid__card .price__sale {
  font-size: 15px !important;
  line-height: 1.2 !important;
}

/* Belle Maison collection product price vertical position */

main[data-template="collection"] .product-grid__card .price {
  position: relative !important;
  top: 6px !important;
  display: block !important;
}

/* Belle Maison collection product row spacing */

main[data-template="collection"] .product-grid__card {
  padding-bottom: 14px !important;
}

main[data-template="collection"] .product-grid {
  row-gap: 14px !important;
}

/* Belle Maison hide collection card carousel arrows */

main[data-template="collection"] .product-grid__card slideshow-arrows,
main[data-template="collection"] .product-grid__card slideshow-arrows *,
main[data-template="collection"] .product-grid__card .slideshow-arrows,
main[data-template="collection"] .product-grid__card .slideshow-control {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Belle Maison PDP carousel counter styling */

.product-information__media .media-gallery--carousel .bm-pdp-carousel-frame .slideshow-controls__counter,
.product-information__media .media-gallery--carousel .bm-pdp-carousel-frame slideshow-controls,
.product-information__media .media-gallery--carousel .bm-pdp-carousel-frame slideshow-controls * {
  font-family: "Inter", "Inter Tight", sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.06em !important;
  color: #FFFDFAFF !important;
}

.product-information__media .media-gallery--carousel .bm-pdp-carousel-frame .slideshow-controls__counter {
  background: #909090 !important;
  border-radius: 0 !important;
  padding: 8px 10px !important;
  min-width: auto !important;
}

/* Belle Maison PDP breadcrumb / details top alignment */

@media screen and (min-width: 750px) {
  .product-details.sticky-content--desktop {
    transform: translateY(-54px);
  }

  .product-details.sticky-content--desktop .bg-breadcrumb {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .product-details.sticky-content--desktop .bg-breadcrumb .page-width {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* Belle Maison PDP title and price styling */

.product-details.sticky-content--desktop :is(
  h1,
  .product-title,
  .product__title,
  [data-testid="product-title"],
  view-product-title
) {
  font-size: 24px !important;
  line-height: 1.10 !important;
  letter-spacing: -0.02em !important;
}

.product-details.sticky-content--desktop :is(
  .price,
  .price *,
  .product-price,
  .product-price *,
  [data-testid="price"],
  [data-testid="price"] *
) {
  font-family: "Inter", "Inter Tight", sans-serif !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

/* Belle Maison PDP campaign price block */

.bm-pdp-campaign-price-block {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px !important;
  margin-top: 4px !important;
  margin-bottom: 24px !important;
}

.bm-pdp-campaign-price {
  font-family: "Inter", "Inter Tight", sans-serif !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #EF4C4CFF !important;
}

.bm-pdp-previous-price {
  font-family: "Inter", "Inter Tight", sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #303030 !important;
}

.bm-pdp-campaign-condition {
  font-family: "EB Garamond", "EB Garamond", sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: #606060 !important;
  margin-top: 5px !important;
}

/* Belle Maison PDP campaign previous price spacing */

.bm-pdp-previous-price {
  margin-top: 6px !important;
}

/* Belle Maison PDP product description bold text */

.product-details.sticky-content--desktop .product-description strong,
.product-details.sticky-content--desktop .product-description b,
.product-details.sticky-content--desktop rte-formatter strong,
.product-details.sticky-content--desktop rte-formatter b,
.product-details.sticky-content--desktop .text-block strong,
.product-details.sticky-content--desktop .text-block b {
  font-weight: 700 !important;
}

/* Belle Maison PDP product description heading */

.product-details.sticky-content--desktop rte-formatter.text-block h3,
.product-details.sticky-content--desktop .text-block h3 {
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.01em !important;
}

/* Belle Maison PDP breadcrumb typography */

.product-details.sticky-content--desktop .bg-breadcrumb,
.product-details.sticky-content--desktop .bg-breadcrumb *,
.product-details.sticky-content--desktop .bg-breadcrumb a {
  font-family: "Inter", "Inter Tight", sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* Belle Maison PDP product title vertical spacing */

@media screen and (min-width: 750px) {
  .product-details.sticky-content--desktop :is(
    h1,
    .product-title,
    .product__title,
    [data-testid="product-title"],
    view-product-title
  ) {
    margin-top: -20px !important;
  }
}

/* Belle Maison PDP campaign price divider */

.bm-pdp-campaign-price-block {
  width: 100% !important;
  padding-bottom: 22px !important;
  margin-bottom: 0px !important;
  border-bottom: 0.5px solid #909090 !important;
}
/* Belle Maison PDP title block bottom spacing */

/* Belle Maison PDP title block bottom spacing */

@media screen and (min-width: 750px) {
  .product-details.sticky-content--desktop .text-block:has(> h1) {
    padding-bottom: 0 !important;
    margin-bottom: -10px !important;
  }
}

/* Belle Maison PDP product text dividers */

.product-details rte-formatter.text-block p:has(em),
.product-details .text-block p:has(em),
.product-details rte-formatter.text-block p:has(i),
.product-details .text-block p:has(i) {
  border-top: 0.5px solid #909090 !important;
  border-bottom: 0.5px solid #909090 !important;
  padding-top: 22px !important;
  padding-bottom: 22px !important;
  margin-top: 22px !important;
  margin-bottom: 26px !important;
}

/* Belle Maison PDP divider consistency */

.product-details .divider,
.product-details .divider::before,
.product-details .divider::after {
  border-color: #909090 !important;
  border-width: 0.5px !important;
}

/* Belle Maison PDP — thin separator lines around buy area and accordion details */

.product-details.sticky-content--desktop {
  --bm-pdp-line-color: #909090;
  --bm-pdp-line-width: 0.5px;
}

/* Thin line under the buy/payment area */
.product-details.sticky-content--desktop .shopify-payment-button {
  border-bottom: var(--bm-pdp-line-width) solid var(--bm-pdp-line-color);
  padding-bottom: 28px;
  margin-bottom: 48px;
}

/* Force PDP accordions to use Belle Maison thin lines */
.product-details.sticky-content--desktop details,
.product-details.sticky-content--desktop .accordion,
.product-details.sticky-content--desktop .accordion-item,
.product-details.sticky-content--desktop .accordion__item,
.product-details.sticky-content--desktop .collapsible-content,
.product-details.sticky-content--desktop .collapsible-row {
  border-color: var(--bm-pdp-line-color) !important;
}

/* Line above MAT & SERVERING */
.product-details.sticky-content--desktop details:first-of-type {
  border-top: var(--bm-pdp-line-width) solid var(--bm-pdp-line-color) !important;
}

/* Line between accordion rows + under last row */
.product-details.sticky-content--desktop details {
  border-bottom: var(--bm-pdp-line-width) solid var(--bm-pdp-line-color) !important;
}

/* Make the clickable accordion header itself span full width cleanly */
.product-details.sticky-content--desktop details > summary {
  border: 0 !important;
  padding-top: 16px;
  padding-bottom: 16px;
}


/* Belle Maison PDP — buy area and accordion separator lines */

.product-details.sticky-content--desktop {
  --bm-pdp-line-color: #909090;
  --bm-pdp-line-width: 0.5px;
}

/* Thin line under the payment/buy area */
.product-details.sticky-content--desktop .shopify-payment-button {
  border-bottom: var(--bm-pdp-line-width) solid var(--bm-pdp-line-color);
  padding-bottom: 28px;
  margin-bottom: 48px;
}

/* Neutralize Horizon's own accordion divider system */
.product-details.sticky-content--desktop .accordion.accordion--dividers {
  --border-color: transparent !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
}

/* Remove all possible default borders/lines inside the accordion */
.product-details.sticky-content--desktop .accordion.accordion--dividers,
.product-details.sticky-content--desktop .accordion.accordion--dividers accordion-custom,
.product-details.sticky-content--desktop .accordion.accordion--dividers details.details,
.product-details.sticky-content--desktop .accordion.accordion--dividers summary,
.product-details.sticky-content--desktop .accordion.accordion--dividers .details__header,
.product-details.sticky-content--desktop .accordion.accordion--dividers .details-content {
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* Use ONLY top borders for each accordion row */
.product-details.sticky-content--desktop .accordion.accordion--dividers > accordion-custom > details.details {
  border-top: var(--bm-pdp-line-width) solid var(--bm-pdp-line-color) !important;
}

/* Add one single bottom border only under the final accordion row */
.product-details.sticky-content--desktop .accordion.accordion--dividers > accordion-custom:last-of-type > details.details {
  border-bottom: var(--bm-pdp-line-width) solid var(--bm-pdp-line-color) !important;
}

/* Accordion header spacing */
.product-details.sticky-content--desktop .accordion.accordion--dividers .details__header {
  padding-top: 16px;
  padding-bottom: 16px;
}

/* Belle Maison PDP — remove native divider above product facts */

.product-details.sticky-content--desktop .buy-buttons-block + [class*="__divider"] {
  display: none !important;
}

/* Belle Maison PDP — product facts spacing and divider before product description */

.product-details.sticky-content--desktop .bm-pdp-fact-row {
  margin: 0 0 14px 0;
  padding: 0;
  line-height: 1.35;
}

/* Belle Maison PDP — product facts spacing and divider before product description */

/* Reset text row itself */
.bm-fact-row.bm-pdp-fact-row {
  margin: 10 !important;
  padding: 0 !important;
  line-height: 1.3 !important;
}

/* Tighten the Shopify block wrapper around each product fact row */
.product-details.sticky-content--desktop .group-block-content > div:has(.bm-pdp-fact-row) {
  margin-bottom: -38px !important;
}

/* Last product fact row gets divider before product description */
.product-details.sticky-content--desktop .group-block-content > div:has(.bm-pdp-fact-row--last) {
  margin-bottom: 0 !important;
}

.bm-fact-row.bm-pdp-fact-row.bm-pdp-fact-row--last {
  padding-bottom: 24px !important;
  border-bottom: 0.5px solid #909090 !important;
}

/* Belle Maison PDP — product facts typography */

.bm-fact-row.bm-pdp-fact-row,
.bm-fact-row.bm-pdp-fact-row strong,
.bm-fact-row.bm-pdp-fact-row .bm-pdp-fact-label,
.bm-fact-row.bm-pdp-fact-row .bm-pdp-fact-value {
  font-family: "Inter", "Inter Tight", sans-serif !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  letter-spacing: 0.01em !important;
}

/* Label: Land:, Årgång:, Vintyp: etc */
.bm-fact-row.bm-pdp-fact-row .bm-pdp-fact-label {
  font-weight: 700 !important;
  font-variation-settings: "wght" 700 !important;
  color: #2b2b2b !important;
}

/* Value: Frankrike, 2025, Rosé etc */
.bm-fact-row.bm-pdp-fact-row .bm-pdp-fact-value {
  font-weight: 400 !important;
  font-variation-settings: "wght" 400 !important;
  color: #555555 !important;
}

/* Belle Maison PDP — regular price spacing below product title */

.product-details.sticky-content--desktop product-price.text-block {
  margin-top: 20px !important;
}

/* Belle Maison PDP — remove product fact divider when accordion follows facts */

.bm-fact-row.bm-pdp-fact-row.bm-pdp-fact-row--last {
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* Pull accordion closer to product facts */
.product-details.sticky-content--desktop .accordion.accordion--dividers {
  margin-top: 0px !important;
}

/* Belle Maison PDP — reduce space above quantity selector */

.product-details.sticky-content--desktop .buy-buttons-block {
  margin-top: -18px !important;
}

/* Belle Maison PDP — remove line below additional payment options */

.product-details.sticky-content--desktop .shopify-payment-button {
  border-bottom: 0 !important;
}

/* Belle Maison PDP — collapse empty Custom Liquid fact blocks */

.product-details.sticky-content--desktop .group-block-content > div:not(:has(*)) {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Also collapse wrappers that only contain an empty inner div */
.product-details.sticky-content--desktop .group-block-content > div:has(> div:empty) {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Belle Maison PDP — responsive side padding */

main#MainContent .product-information.section {
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;
}

main#MainContent .product-information__grid {
  width: 100% !important;
  max-width: 100% !important;
}

/* Belle Maison PDP — related products side padding */

main#MainContent .shopify-section:has(product-recommendations),
main#MainContent .shopify-section:has(.product-recommendations),
main#MainContent .shopify-section:has(.related-products),
main#MainContent .shopify-section:has(.complementary-products) {
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;
}

main#MainContent product-recommendations,
main#MainContent .product-recommendations,
main#MainContent .related-products,
main#MainContent .complementary-products {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Belle Maison — product grid spacing */

main#MainContent .product-grid,
main#MainContent .collection .product-grid,
main#MainContent .collection-grid,
main#MainContent .product-list,
main#MainContent ul.grid:has(product-card),
main#MainContent .grid:has(product-card) {
  column-gap: 20px !important;
  row-gap: 28px !important;
  gap: 28px 20px !important;
}

/* Belle Maison — collection product card image ratio */

main#MainContent product-card .card-gallery {
  --image-ratio: 0.75 !important;
  aspect-ratio: 3 / 4 !important;
  width: 100% !important;
  overflow: hidden !important;
}

main#MainContent product-card .product-media-container,
main#MainContent product-card .product-media-container--image,
main#MainContent product-card slideshow-slide,
main#MainContent product-card slideshow-slides {
  --ratio: 0.75 !important;
  aspect-ratio: 3 / 4 !important;
  width: 100% !important;
  overflow: hidden !important;
}

main#MainContent product-card .bm-product-media-image-frame {
  aspect-ratio: 3 / 4 !important;
  width: 100% !important;
  overflow: hidden !important;
}

main#MainContent product-card img.product-media__image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

/* Belle Maison — collection product card badges responsive */

main#MainContent product-card .bm-product-card-media-frame,
main#MainContent product-card .card-gallery {
  position: relative !important;
  overflow: hidden !important;
}

/* Badge layer inside product card image */
main#MainContent product-card .bm-product-badges {
  position: absolute !important;
  inset: 0 !important;
  z-index: 20 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

/* Collection badges: smaller, contained, no overflow */
main#MainContent product-card .bm-product-badge {
  max-width: calc(100% - 12px) !important;
  box-sizing: border-box !important;
  font-family: "Inter", "Inter Tight", sans-serif !important;
  font-size: clamp(6px, 0.48vw, 10px) !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  padding: clamp(4px, 0.35vw, 6px) clamp(5px, 0.45vw, 8px) !important;
}

/* Top right badges need room from edge */
main#MainContent product-card .bm-product-badge--top-right {
  top: 8px !important;
  right: 8px !important;
}

/* Top left badges need room from edge */
main#MainContent product-card .bm-product-badge--top-left {
  top: 8px !important;
  left: 8px !important;
}

/* Bottom right badges need room from edge */
main#MainContent product-card .bm-product-badge--bottom-right {
  right: 8px !important;
  bottom: 8px !important;
}

/* Bottom left badges need room from edge */
main#MainContent product-card .bm-product-badge--bottom-left {
  left: 8px !important;
  bottom: 8px !important;
}

/* Belle Maison collection — filter and sort toolbar typography */

main#MainContent .collection-toolbar,
main#MainContent .facets,
main#MainContent .facets *,
main#MainContent .facets__form,
main#MainContent .facets__form *,
main#MainContent .facets__summary,
main#MainContent .facets__summary *,
main#MainContent .facet-filters,
main#MainContent .facet-filters *,
main#MainContent .product-count,
main#MainContent .product-count *,
main#MainContent .sort-by,
main#MainContent .sort-by *,
main#MainContent [data-testid="sort-by"],
main#MainContent [data-testid="sort-by"] * {
  font-family: "Inter", "Inter Tight", sans-serif !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  text-transform: uppercase !important;
}

/* Belle Maison header — dropdown menu base test */

.header__submenu,
.header__submenu.list-menu {
  background: #FFFDFAFF !important;
  border: 0.5px solid #909090 !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-width: 190px !important;
}

.header__submenu .header__menu-item,
.header__submenu .list-menu__item {
  font-family: "Inter", "Inter Tight", sans-serif !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #303030 !important;
  padding: 12px 18px !important;
  border-bottom: 0.5px solid rgba(144, 144, 144, 0.35) !important;
  background: transparent !important;
}

.header__submenu .header__menu-item:hover,
.header__submenu .list-menu__item:hover {
  color: #EF4C4CFF !important;
  background: #FFFDFAFF !important;
}

.header__submenu li:last-child .header__menu-item,
.header__submenu li:last-child .list-menu__item {
  border-bottom: 0 !important;
}

/* Belle Maison collection — filter dropdown white panel step 1 */

/* Dropdown panel */
main#MainContent .facets__disclosure,
main#MainContent .facets__display,
main#MainContent .facets__list,
main#MainContent .facets__panel,
main#MainContent details[open] .facets__display {
  background: #FFFDFAFF !important;
  color: #303030 !important;
}

/* Main dropdown box */
main#MainContent .facets__display,
main#MainContent details[open] .facets__display {
  border: 0.5px solid #303030 !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.10) !important;
  padding: 18px 20px !important;
}

/* Filter options text */
main#MainContent .facets__display *,
main#MainContent .facets__list *,
main#MainContent .facets__item *,
main#MainContent .facets__label {
  font-family: "Inter", "Inter Tight", sans-serif !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  text-transform: uppercase !important;
  color: #303030 !important;
}

/* Checkbox square */
main#MainContent .facets__display input[type="checkbox"],
main#MainContent .facets__list input[type="checkbox"],
main#MainContent .facets__item input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  border: 0.5px solid #303030 !important;
  border-radius: 0 !important;
  background: #FFFDFAFF !important;
  box-shadow: none !important;
  margin-right: 8px !important;
}

/* Checked checkbox */
main#MainContent .facets__display input[type="checkbox"]:checked,
main#MainContent .facets__list input[type="checkbox"]:checked,
main#MainContent .facets__item input[type="checkbox"]:checked {
  background: #303030 !important;
  border-color: #303030 !important;
}

/* Remove red hover/background from option rows */
main#MainContent .facets__display label,
main#MainContent .facets__display label:hover,
main#MainContent .facets__item,
main#MainContent .facets__item:hover,
main#MainContent .facets__label,
main#MainContent .facets__label:hover {
  background: transparent !important;
  color: #303030 !important;
  border-radius: 0 !important;
}

/* Belle Maison collection — filter dropdown width and text wrapping */

main#MainContent details[open] .facets__display,
main#MainContent .facets__display {
  width: max-content !important;
  min-width: 320px !important;
  max-width: min(520px, calc(100vw - 40px)) !important;
  box-sizing: border-box !important;
}

/* Let long filter values fit instead of being cut off */
main#MainContent .facets__display label,
main#MainContent .facets__display .facets__label,
main#MainContent .facets__display .facets__item,
main#MainContent .facets__display span {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  max-width: 100% !important;
}

/* Keep checkbox and text aligned nicely */
main#MainContent .facets__display label,
main#MainContent .facets__display .facets__label {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
}

/* Prevent the checkbox from shrinking */
main#MainContent .facets__display input[type="checkbox"] {
  flex: 0 0 14px !important;
  margin-top: 2px !important;
}
/* Belle Maison collection — filter dropdown text width fix */

main#MainContent facet-inputs-component.facet-inputs,
main#MainContent .facet-inputs {
  width: max-content !important;
  min-width: 560px !important;
  max-width: calc(100vw - 40px) !important;
  box-sizing: border-box !important;
}

main#MainContent .facet-inputs .facets__inputs-wrapper,
main#MainContent .facet-inputs .show-more,
main#MainContent .facet-inputs .facets__inputs-list {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

main#MainContent .facet-inputs .facets__inputs-list-item,
main#MainContent .facet-inputs .checkbox,
main#MainContent .facet-inputs .checkbox__label {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

main#MainContent .facet-inputs .checkbox__label {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
}

main#MainContent .facet-inputs .checkbox__label-text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: none !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
}

/* Belle Maison collection — framed filter and sort bar */

main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal {
  position: relative !important;
  width: 100vw !important;
  left: 50% !important;
  margin-left: -50vw !important;
  background: #FFFDFAFF !important;
  border-top: 0.5px solid #303030 !important;
  border-bottom: 0.5px solid #303030 !important;
  box-sizing: border-box !important;
  padding: 0 56px !important;
  min-height: 64px !important;
  display: flex !important;
  align-items: center !important;
}

/* Keep filter row vertically centered */
main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .facets,
main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .facets__form,
main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .facets__filters-wrapper,
main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .facets__overflow-list {
  display: flex !important;
  align-items: center !important;
}

/* Filter labels typography */
main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .facets__label,
main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .facets__summary,
main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal summary {
  font-family: "Inter", "Inter Tight", sans-serif !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #303030 !important;
}

/* Belle Maison collection — sticky framed filter bar */

main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal {
  position: sticky !important;
  top: 101px !important;
  z-index: 40 !important;
}

/* Belle Maison collection — hide collection title block above filter bar */

main#MainContent #shopify-section-template--28539402027335__section {
  display: none !important;
}

/* Belle Maison collection — remove top border on sticky filter bar */

main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal {
  border-top: 0 !important;
}

/* Belle Maison collection — force filter bar to full grid width */

main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal {
  grid-column: 1 / -1 !important;
  width: auto !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  left: auto !important;
  padding-left: 56px !important;
  padding-right: 56px !important;
  border-bottom: 0.5px solid #303030 !important;
  box-sizing: border-box !important;
}

  /* Mobile filter/sort bar */
  main#MainContent .facets-toggle {
    position: sticky !important;
    top: 61px !important;
    z-index: 40 !important;

    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    min-height: 52px !important;
    padding: 0 20px !important;

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

    background: #FFFDFAFF !important;
    border-top: 0 !important;
    border-bottom: 0.5px solid #303030 !important;
    box-sizing: border-box !important;
  }

  /* Mobile filter/sort typography */
  main#MainContent .facets-toggle,
  main#MainContent .facets-toggle * {
    font-family: "Inter", "Inter Tight", sans-serif !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #303030 !important;
  }

  /* Remove odd decorative lines if Horizon adds them */
  main#MainContent .facets-toggle::before,
  main#MainContent .facets-toggle::after {
    display: none !important;
    content: none !important;
  }

  /* Product grid should start normally below mobile filter bar */
  main#MainContent #ResultsList,
  main#MainContent .main-collection-grid,
  main#MainContent .collection-wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

  main#MainContent .facets-toggle {
    position: sticky !important;
    top: 61px !important;
    z-index: 40 !important;

    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    min-height: 52px !important;
    padding: 0 20px !important;

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

    background: #FFFDFAFF !important;
    border-top: 0 !important;
    border-bottom: 0.5px solid #303030 !important;
    box-sizing: border-box !important;
  }

  main#MainContent .facets-toggle,
  main#MainContent .facets-toggle * {
    font-family: "Inter", "Inter Tight", sans-serif !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #303030 !important;
  }

  
/* Belle Maison collection — mobile clean native filter bar */

@media screen and (max-width: 989px) {
  main#MainContent results-list .facets-block-wrapper--horizontal,
  main#MainContent .collection-wrapper > .facets-block-wrapper--horizontal,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
  }

  main#MainContent .facets-toggle {
    position: sticky !important;
    top: 61px !important;
    z-index: 40 !important;

    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    min-height: 52px !important;
    padding: 0 20px !important;

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

    background: #FFFDFAFF !important;
    border-top: 0 !important;
    border-bottom: 0.5px solid #303030 !important;
    box-sizing: border-box !important;
  }

  main#MainContent .facets-toggle,
  main#MainContent .facets-toggle * {
    font-family: "Inter", "Inter Tight", sans-serif !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #303030 !important;
  }
}

/* Belle Maison collection — mobile hard hide horizontal desktop facets */

@media screen and (max-width: 1200px) {
  main#MainContent .collection-wrapper.grid.gap-style > .facets-block-wrapper.facets-block-wrapper--horizontal,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal,
  main#MainContent .facets.facets--horizontal,
  main#MainContent .facets--horizontal {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
  }

  main#MainContent .facets-toggle {
    position: sticky !important;
    top: 61px !important;
    z-index: 40 !important;

    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    min-height: 52px !important;
    padding: 0 20px !important;

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

    background: #FFFDFAFF !important;
    border-top: 0 !important;
    border-bottom: 0.5px solid #303030 !important;
    box-sizing: border-box !important;
  }

  main#MainContent .facets-toggle,
  main#MainContent .facets-toggle * {
    font-family: "Inter", "Inter Tight", sans-serif !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #303030 !important;
  }
}

/* Belle Maison — sticky main header + locked filter header */

#header-group {
  position: sticky !important;
  top: 0 !important;
  z-index: 60 !important;
  background: #FFFDFAFF !important;

  
}

/* Desktop: collection filter header locks below main header */
@media screen and (min-width: 990px) {
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal {
    position: sticky !important;
    top: var(--header-height, 96px) !important;
    z-index: 50 !important;
  }
}

/* Mobile: native filter row locks below mobile header */
@media screen and (max-width: 1200px) {
  main#MainContent .facets-toggle {
    position: sticky !important;
    top: var(--header-height, 61px) !important;
    z-index: 50 !important;
  }
}

/* Belle Maison collection — hide native mobile filter row on desktop */

@media screen and (min-width: 990px) {
  main#MainContent .facets-toggle {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
  }
}

/* Belle Maison — lock Horizon main header with collection filter header */

@media screen and (min-width: 990px) {
  #header-group {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    background: #FFFDFAFF !important;
  }

  header-component#header-component,
  #header-component.header {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    transform: none !important;
    translate: none !important;
    background: #FFFDFAFF !important;
  }

  header-component#header-component .header,
  header-component#header-component .header__row,
  header-component#header-component .header__columns {
    transform: none !important;
    translate: none !important;
  }

  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal {
    position: sticky !important;
    top: 97px !important;
    z-index: 90 !important;
  }
}

/* Belle Maison collection — desktop filter header sticks to top after main header scrolls away */

@media screen and (min-width: 990px) {
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal {
    position: sticky !important;
    top: 0 !important;
    z-index: 80 !important;
    background: #FFFDFAFF !important;
  }
}

/* Belle Maison collection — desktop filter dropdown as third header row */

@media screen and (min-width: 990px) {
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal {
    overflow: visible !important;
  }

  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .facets__item,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal details.facets__panel,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal accordion-custom {
    position: static !important;
  }

  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal floating-panel-component.facets__inputs,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .facets__inputs {
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    transform: translateX(-50%) !important;

    background: #FFFDFAFF !important;
    border-top: 0 !important;
    border-bottom: 0.5px solid #303030 !important;
    box-shadow: none !important;

    padding: 0 56px !important;
    min-height: 64px !important;
    box-sizing: border-box !important;
    z-index: 79 !important;
  }

  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .facets__inputs-wrapper,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .facets__inputs-list,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .show-more {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 28px !important;
    width: 100% !important;
    min-height: 64px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
  }

  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .facets__inputs-list-item {
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
  }

  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .checkbox {
    display: flex !important;
    align-items: center !important;
  }

  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .checkbox__label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
  }

  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .checkbox__label-text {
    font-family: "Inter", "Inter Tight", sans-serif !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #303030 !important;
    white-space: nowrap !important;
  }

  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal input[type="checkbox"],
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .checkbox__input {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 13px !important;
    height: 13px !important;
    min-width: 13px !important;
    min-height: 13px !important;
    border: 0.5px solid #303030 !important;
    border-radius: 0 !important;
    background: #FFFDFAFF !important;
    box-shadow: none !important;
  }

  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal input[type="checkbox"]:checked,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .checkbox__input:checked {
    background: #303030 !important;
  }
}

/* Belle Maison collection — desktop filter dropdown options horizontal */

@media screen and (min-width: 990px) {
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .facets__inputs-list,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal ul.facets__inputs-list,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal [id^="filters-list-template"] {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 32px !important;

    width: 100% !important;
    min-height: 64px !important;
    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    box-sizing: border-box !important;
  }

  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .facets__inputs-list-item {
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;

    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .facets__inputs-list-item .checkbox,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .facets__inputs-list-item .checkbox__label {
    display: inline-flex !important;
    align-items: center !important;
    flex-direction: row !important;
    width: auto !important;
    max-width: none !important;
    white-space: nowrap !important;
  }
}

/* Belle Maison collection — desktop filter row font weight refinement */

@media screen and (min-width: 990px) {
  /* Header 2: main filter labels */
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal > .facets .facets__label,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal > .facets .facets__summary,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal > .facets summary {
    font-weight: 800 !important;
  }

  /* Header 3: opened dropdown option labels */
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .facets__inputs .checkbox__label-text,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .facets__inputs-list .checkbox__label-text,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .facets__inputs-list-item .checkbox__label-text {
    font-weight: 500 !important;
  }
}

/* Belle Maison collection — square filter checkboxes */

@media screen and (min-width: 990px) {
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal input[type="checkbox"],
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .checkbox__input {
    appearance: none !important;
    -webkit-appearance: none !important;
    border-radius: 0 !important;
    width: 13px !important;
    height: 13px !important;
    min-width: 13px !important;
    min-height: 13px !important;
    border: 0.5px solid #303030 !important;
    background: #FFFDFAFF !important;
    box-shadow: none !important;
  }

  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .checkbox__label svg,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal svg.icon-checkmark {
    border-radius: 0 !important;
  }
}

/* Belle Maison collection — replace Horizon checkbox svg with square box */

@media screen and (min-width: 990px) {
  /* Hide Horizon's built-in checkbox SVG */
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .checkbox__label svg.icon-checkmark {
    display: none !important;
  }

  /* Draw our own square checkbox */
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .checkbox__label::before {
    content: "";
    display: inline-block;
    width: 13px;
    height: 13px;
    min-width: 13px;
    min-height: 13px;
    box-sizing: border-box;
    border: 0.5px solid #303030;
    border-radius: 0;
    background: #FFFDFAFF;
  }

  /* Checked state */
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .checkbox__input:checked + .checkbox__label::before,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal input[type="checkbox"]:checked + .checkbox__label::before {
    background: #303030;
  }

  /* Keep label alignment clean */
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .checkbox__label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
  }
}

/* Belle Maison collection — desktop dropdown row dynamic content width */

@media screen and (min-width: 990px) {
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal floating-panel-component.facets__inputs,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .facets__inputs {
    left: 0 !important;
    right: auto !important;
    transform: none !important;

    width: max-content !important;
    min-width: 0 !important;
    max-width: 100vw !important;

    padding-left: 56px !important;
    padding-right: 56px !important;

    box-sizing: border-box !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .facets__inputs-wrapper,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .facets__inputs-list,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal ul.facets__inputs-list,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal [id^="filters-list-template"] {
    width: max-content !important;
    min-width: max-content !important;
    max-width: none !important;
  }

  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .facets__inputs-list {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Belle Maison collection — desktop dropdown row fixed left with right edge */

@media screen and (min-width: 990px) {
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal floating-panel-component.facets__inputs,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .facets__inputs {
    left: calc(50% - 50vw) !important;
    right: auto !important;
    transform: none !important;

    width: max-content !important;
    min-width: 0 !important;
    max-width: 100vw !important;

    padding-left: 40px !important;
    padding-right: 40px !important;

    border-left: 0 !important;
    border-right: 0.5px solid #303030 !important;
    border-top: 0 !important;
    border-bottom: 0.5px solid #303030 !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;
    box-sizing: border-box !important;
  }

  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .facets__inputs-wrapper,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .facets__inputs-list,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal ul.facets__inputs-list,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal [id^="filters-list-template"] {
    width: max-content !important;
    min-width: max-content !important;
    max-width: none !important;
  }
}

/* Belle Maison collection — restore dropdown outer right edge */

@media screen and (min-width: 990px) {
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal floating-panel-component.facets__inputs,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .facets__inputs {
    border-right: 0.5px solid #303030 !important;
  }
}

/* Belle Maison collection — place Rensa in same dropdown row */

@media screen and (min-width: 990px) {
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .facets__inputs facet-inputs-component {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    max-width: 100vw !important;
    min-height: 64px !important;
    box-sizing: border-box !important;
  }

  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .facets__inputs .facets__inputs-wrapper {
    flex: 0 0 auto !important;
    width: max-content !important;
    max-width: none !important;
  }

  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .facets__inputs facet-clear-component {
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    height: 64px !important;
    margin-left: 32px !important;
    padding: 0 !important;
    white-space: nowrap !important;
  }

  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .facets__inputs facet-clear-component,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .facets__inputs facet-clear-component * {
    font-family: "Inter", "Inter Tight", sans-serif !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #303030 !important;
    text-decoration: none !important;
  }
}

/* Belle Maison collection — hide clear all from filter header */

@media screen and (min-width: 990px) {
  main#MainContent .facets-horizontal-remove,
  main#MainContent .facets-horizontal-remove--active,
  main#MainContent facet-remove-component.facets-horizontal-remove,
  main#MainContent facet-remove-component.facets-horizontal-remove--active {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
}

/* Belle Maison collection — align Rensa button inside dropdown row */

@media screen and (min-width: 990px) {
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .facets__inputs facet-inputs-component {
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    max-width: 100vw !important;
  }

  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .facets__inputs-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    width: max-content !important;
    min-width: 0 !important;
    max-width: max-content !important;
  }

  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .facets__clear,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .facets__clear--active {
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    width: fit-content !important;
    min-width: 0 !important;
    max-width: fit-content !important;
    height: 64px !important;
    margin: 0 0 0 28px !important;
    padding: 0 !important;
    position: static !important;
    transform: none !important;
  }

  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .clear-filter.button,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal button.clear-filter {
    display: inline-flex !important;
    align-items: center !important;
    width: fit-content !important;
    min-width: 0 !important;
    height: 64px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
}

/* Belle Maison collection — hide blank filter values from dropdown */

@media screen and (min-width: 990px) {
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .facets__inputs-list-item:has(input.checkbox__input[data-label=""]),
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .facets__inputs-list-item:has(input[type="checkbox"][data-label=""]) {
    display: none !important;
  }
}

/* Belle Maison collection — desktop filter header hover and active red */

@media screen and (min-width: 990px) {
  /* Hover on filter header labels */
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal summary:hover,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal summary:hover *,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .facets__summary:hover,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .facets__summary:hover *,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .facets__label:hover {
    color: #EF4C4CFF !important;
  }

  /* Keep opened/active filter label red */
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal details[open] summary,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal details[open] summary *,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .facets__panel[open] summary,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .facets__panel[open] summary * {
    color: #EF4C4CFF !important;
  }

  /* Smooth color transition */
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal summary,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal summary *,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .facets__label {
    transition: color 0.18s ease !important;
  }
}

/* Belle Maison collection — desktop dropdown options wrap to multiple rows */

@media screen and (min-width: 990px) {
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .facets__inputs {
    height: auto !important;
    min-height: 64px !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .facets__inputs-wrapper,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .facets__inputs-list,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal ul.facets__inputs-list,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal [id^="filters-list-template"] {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    align-content: center !important;

    column-gap: 32px !important;
    row-gap: 18px !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: calc(100vw - 80px) !important;

    height: auto !important;
    min-height: 64px !important;
    max-height: none !important;

    overflow-x: visible !important;
    overflow-y: visible !important;

    padding-top: 18px !important;
    padding-bottom: 18px !important;
    box-sizing: border-box !important;
  }

  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .facets__inputs-list-item {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
  }
}

/* Belle Maison collection — remove dropdown scrollbars after multi-row wrap */

@media screen and (min-width: 990px) {
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal floating-panel-component.facets__inputs,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .facets__inputs,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .facets__inputs-wrapper,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .facets__inputs-list,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal ul.facets__inputs-list,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal [id^="filters-list-template"],
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .show-more {
    overflow-x: visible !important;
    overflow-y: visible !important;
    scrollbar-width: none !important;
  }

  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal floating-panel-component.facets__inputs::-webkit-scrollbar,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .facets__inputs::-webkit-scrollbar,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .facets__inputs-wrapper::-webkit-scrollbar,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .facets__inputs-list::-webkit-scrollbar,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal ul.facets__inputs-list::-webkit-scrollbar,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal [id^="filters-list-template"]::-webkit-scrollbar,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .show-more::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
}

/* Belle Maison collection — final wrapped dropdown panel with Rensa inside */

@media screen and (min-width: 990px) {
  /* Make opened dropdown panel use available viewport width */
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal floating-panel-component.facets__inputs,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .facets__inputs {
    left: calc(50% - 50vw) !important;
    right: auto !important;
    transform: none !important;

    width: 100vw !important;
    min-width: 0 !important;
    max-width: 100vw !important;

    padding-left: 40px !important;
    padding-right: 40px !important;

    overflow-x: hidden !important;
    overflow-y: visible !important;

    box-sizing: border-box !important;
  }

  /* Make the inner component a vertical stack: options first, Rensa below if needed */
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .facets__inputs facet-inputs-component {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;

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

    height: auto !important;
    min-height: 64px !important;

    overflow: visible !important;
    box-sizing: border-box !important;
  }

  /* Options wrapper must NOT use max-content */
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .facets__inputs-wrapper,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .show-more,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .show-more-content {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    overflow: visible !important;
    box-sizing: border-box !important;
  }

  /* The actual option list wraps to multiple rows */
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .facets__inputs-list,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal ul.facets__inputs-list,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal [id^="filters-list-template"] {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;

    align-items: center !important;
    align-content: flex-start !important;

    column-gap: 32px !important;
    row-gap: 18px !important;

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

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 18px 0 !important;

    overflow: visible !important;
    box-sizing: border-box !important;
  }

  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .facets__inputs-list-item {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  /* Rensa stays inside the dropdown panel */
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .facets__clear,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .facets__clear--active,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal facet-clear-component {
    display: inline-flex !important;
    align-items: center !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: max-content !important;

    margin: 0 0 18px 0 !important;
    padding: 0 !important;

    position: static !important;
    transform: none !important;

    white-space: nowrap !important;
    box-sizing: border-box !important;
  }

  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .clear-filter.button,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal button.clear-filter {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    white-space: nowrap !important;
  }
}

/* Belle Maison collection — force long dropdown option lists to wrap */

@media screen and (min-width: 990px) {
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .facets__inputs-list,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal ul.facets__inputs-list,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal [id^="filters-list-template"] {
    display: flex !important;
    flex-flow: row wrap !important;

    width: calc(100vw - 80px) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 80px) !important;

    inline-size: calc(100vw - 80px) !important;
    min-inline-size: 0 !important;
    max-inline-size: calc(100vw - 80px) !important;

    column-gap: 32px !important;
    row-gap: 18px !important;

    overflow: visible !important;
    white-space: normal !important;
    box-sizing: border-box !important;
  }

  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .facets__inputs-list-item {
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    white-space: nowrap !important;
  }

  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .facets__inputs-wrapper {
    width: calc(100vw - 80px) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 80px) !important;
    inline-size: calc(100vw - 80px) !important;
    min-inline-size: 0 !important;
    max-inline-size: calc(100vw - 80px) !important;
  }
}

/* Belle Maison collection — search icon in filter header */

@media screen and (min-width: 990px) {
  main#MainContent .bm-filter-search-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 18px !important;
    height: 18px !important;
    margin-right: 24px !important;

    color: #303030 !important;
    text-decoration: none !important;
  }

  main#MainContent .bm-filter-search-link:hover {
    color: #EF4C4CFF !important;
  }

  main#MainContent .bm-filter-search-link__icon {
    width: 18px !important;
    height: 18px !important;
    display: block !important;

    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }
}

/* Belle Maison collection — search button in filter header */

@media screen and (min-width: 990px) {
  main#MainContent .bm-filter-search-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 18px !important;
    height: 18px !important;
    margin-right: 24px !important;
    padding: 0 !important;

    color: #303030 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
    cursor: pointer !important;
  }

  main#MainContent .bm-filter-search-button:hover {
    color: #EF4C4CFF !important;
  }

  main#MainContent .bm-filter-search-button__icon {
    width: 18px !important;
    height: 18px !important;
    display: block !important;

    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }
}

/* Belle Maison — prevent layout shift when search modal opens */

html {
  scrollbar-gutter: stable !important;
}

/* Belle Maison collection — hide original header search on desktop */

@media screen and (min-width: 990px) {
  body:has(main#MainContent[data-template="collection"]) #header-group search-button,
  body:has(main#MainContent[data-template="collection"]) #header-group .search-button,
  body:has(main#MainContent[data-template="collection"]) #header-group button[aria-label*="Sök"],
  body:has(main#MainContent[data-template="collection"]) #header-group button[aria-label*="Search"],
  body:has(main#MainContent[data-template="collection"]) #header-group a[aria-label*="Sök"],
  body:has(main#MainContent[data-template="collection"]) #header-group a[aria-label*="Search"] {
    display: none !important;
  }
}

/* Belle Maison collection — position filter search before product count */

@media screen and (min-width: 990px) {
  main#MainContent .bm-filter-search-button {
    margin-left: auto !important;
    margin-right: 16px !important;
  }

  main#MainContent .products-count-wrapper {
    margin-left: 0 !important;
  }
}

/* Belle Maison collection — nudge filter search icon closer to product count */

@media screen and (min-width: 990px) {
  main#MainContent .bm-filter-search-button {
    margin-right: 0 !important;
    transform: translateX(8px) !important;
  }
}

/* Belle Maison search modal — smaller product badges */

dialog-component#search-modal .bm-product-badge,
#search-modal .bm-product-badge,
.predictive-search .bm-product-badge,
.search-modal .bm-product-badge {
  font-size: 8px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  padding: 4px 5px !important;
  max-width: calc(100% - 8px) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Keep search modal badges tighter to image corners */
dialog-component#search-modal .bm-product-badge--top-left,
#search-modal .bm-product-badge--top-left,
.predictive-search .bm-product-badge--top-left,
.search-modal .bm-product-badge--top-left {
  top: 4px !important;
  left: 4px !important;
}

dialog-component#search-modal .bm-product-badge--top-right,
#search-modal .bm-product-badge--top-right,
.predictive-search .bm-product-badge--top-right,
.search-modal .bm-product-badge--top-right {
  top: 4px !important;
  right: 4px !important;
}

dialog-component#search-modal .bm-product-badge--bottom-left,
#search-modal .bm-product-badge--bottom-left,
.predictive-search .bm-product-badge--bottom-left,
.search-modal .bm-product-badge--bottom-left {
  bottom: 4px !important;
  left: 4px !important;
}

dialog-component#search-modal .bm-product-badge--bottom-right,
#search-modal .bm-product-badge--bottom-right,
.predictive-search .bm-product-badge--bottom-right,
.search-modal .bm-product-badge--bottom-right {
  bottom: 4px !important;
  right: 4px !important;
}

/* Belle Maison collection — desktop dropdown options in clean grid */

@media screen and (min-width: 990px) {
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .facets__inputs-list,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal ul.facets__inputs-list,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal [id^="filters-list-template"] {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(170px, max-content)) !important;
    column-gap: 32px !important;
    row-gap: 18px !important;

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

    width: calc(100vw - 80px) !important;
    max-width: calc(100vw - 80px) !important;
    min-width: 0 !important;

    padding: 18px 0 !important;
    margin: 0 !important;

    overflow: visible !important;
    box-sizing: border-box !important;
  }

  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .facets__inputs-list-item {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    white-space: nowrap !important;
  }
}

/* Belle Maison collection — custom order for Fyllighet filter */

@media screen and (min-width: 990px) {
  /* Lätt */
  main#MainContent .facets__inputs-list-item:has(input[name="filter.p.m.custom.wine_body"][data-label="Lätt"]) {
    order: 1 !important;
  }

  /* Lätt–medelfylligt */
  main#MainContent .facets__inputs-list-item:has(input[name="filter.p.m.custom.wine_body"][data-label="Lätt–medelfylligt"]),
  main#MainContent .facets__inputs-list-item:has(input[name="filter.p.m.custom.wine_body"][data-label="Lätt-medelfylligt"]) {
    order: 2 !important;
  }

  /* Medelfylligt */
  main#MainContent .facets__inputs-list-item:has(input[name="filter.p.m.custom.wine_body"][data-label="Medelfylligt"]) {
    order: 3 !important;
  }

  /* Medelfylligt–fylligt */
  main#MainContent .facets__inputs-list-item:has(input[name="filter.p.m.custom.wine_body"][data-label="Medelfylligt–fylligt"]),
  main#MainContent .facets__inputs-list-item:has(input[name="filter.p.m.custom.wine_body"][data-label="Medelfylligt-fylligt"]) {
    order: 4 !important;
  }

  /* Fylligt */
  main#MainContent .facets__inputs-list-item:has(input[name="filter.p.m.custom.wine_body"][data-label="Fylligt"]) {
    order: 5 !important;
  }
}

/* Belle Maison collection — desktop price dropdown as filter row */

@media screen and (min-width: 990px) {
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal floating-panel-component:has(#facet-inputs-filter-v-price) {
    left: calc(50% - 50vw) !important;
    right: auto !important;
    transform: none !important;

    width: 100vw !important;
    min-width: 0 !important;
    max-width: 100vw !important;

    padding: 18px 40px !important;

    background: #FFFDFAFF !important;
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0.5px solid #303030 !important;

    box-shadow: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  main#MainContent #facet-inputs-filter-v-price {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 18px 24px !important;

    width: calc(100vw - 80px) !important;
    max-width: calc(100vw - 80px) !important;
    min-width: 0 !important;

    min-height: 64px !important;
    margin: 0 !important;
    padding: 0 !important;

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

  main#MainContent #facet-inputs-filter-v-price .price-facet__input-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;

    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
  }

  main#MainContent #facet-inputs-filter-v-price input {
    width: 140px !important;
    height: 40px !important;

    border: 0.5px solid #909090 !important;
    border-radius: 0 !important;
    background: #FFFDFAFF !important;

    padding: 0 12px !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }

  main#MainContent #facet-inputs-filter-v-price,
  main#MainContent #facet-inputs-filter-v-price *,
  main#MainContent floating-panel-component:has(#facet-inputs-filter-v-price) {
    font-family: "Inter", "Inter Tight", sans-serif !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #303030 !important;
  }

  main#MainContent floating-panel-component:has(#facet-inputs-filter-v-price) facet-clear-component,
  main#MainContent floating-panel-component:has(#facet-inputs-filter-v-price) .clear-filter {
    display: inline-flex !important;
    align-items: center !important;

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

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    white-space: nowrap !important;
  }
}

/* Belle Maison collection — align price filter content left */

@media screen and (min-width: 990px) {
  main#MainContent #facet-inputs-filter-v-price {
    display: grid !important;
    grid-template-columns: max-content max-content max-content !important;
    column-gap: 24px !important;
    row-gap: 18px !important;

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

    width: calc(100vw - 80px) !important;
    max-width: calc(100vw - 80px) !important;
    min-width: 0 !important;
  }

  main#MainContent #facet-inputs-filter-v-price .price-facet__input-wrapper {
    grid-row: 1 !important;
    width: auto !important;
    max-width: none !important;
  }

  main#MainContent #facet-inputs-filter-v-price .price-facet__highest-price {
    grid-row: 2 !important;
    grid-column: 1 / -1 !important;

    width: auto !important;
    max-width: none !important;

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

    justify-self: start !important;
    text-align: left !important;
  }

  main#MainContent floating-panel-component:has(#facet-inputs-filter-v-price) facet-clear-component,
  main#MainContent floating-panel-component:has(#facet-inputs-filter-v-price) .clear-filter {
    grid-row: 3 !important;
    grid-column: 1 / -1 !important;

    justify-self: start !important;
    align-self: center !important;

    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }
}

/* Belle Maison collection — align price filter content left */

@media screen and (min-width: 990px) {
  main#MainContent #facet-inputs-filter-v-price {
    display: grid !important;
    grid-template-columns: max-content max-content max-content !important;
    column-gap: 24px !important;
    row-gap: 18px !important;

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

    width: calc(100vw - 80px) !important;
    max-width: calc(100vw - 80px) !important;
    min-width: 0 !important;
  }

  main#MainContent #facet-inputs-filter-v-price .price-facet__input-wrapper {
    grid-row: 1 !important;
    width: auto !important;
    max-width: none !important;
  }

  main#MainContent #facet-inputs-filter-v-price .price-facet__highest-price {
    grid-row: 2 !important;
    grid-column: 1 / -1 !important;

    width: auto !important;
    max-width: none !important;

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

    justify-self: start !important;
    text-align: left !important;
  }

  main#MainContent floating-panel-component:has(#facet-inputs-filter-v-price) facet-clear-component,
  main#MainContent floating-panel-component:has(#facet-inputs-filter-v-price) .clear-filter {
    grid-row: 3 !important;
    grid-column: 1 / -1 !important;

    justify-self: start !important;
    align-self: center !important;

    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }
}

/* Belle Maison collection — desktop sort dropdown styling */

@media screen and (min-width: 990px) {
  /* Sort dropdown panel */
  main#MainContent sorting-filter-component floating-panel-component,
  main#MainContent .sorting-filter floating-panel-component {
    background: #FFFDFAFF !important;

    border-top: 0 !important;
    border-right: 0.5px solid #303030 !important;
    border-bottom: 0.5px solid #303030 !important;
    border-left: 0.5px solid #303030 !important;

    border-radius: 0 !important;
    box-shadow: none !important;

    margin-top: 0 !important;
    padding: 18px 24px !important;

    min-width: 220px !important;
    box-sizing: border-box !important;
  }

  /* Inner wrapper */
  main#MainContent sorting-filter-component .sorting-filter__options-inner,
  main#MainContent .sorting-filter .sorting-filter__options-inner {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Each sort option row */
  main#MainContent sorting-filter-component .sorting-filter__option,
  main#MainContent .sorting-filter .sorting-filter__option {
    display: grid !important;
    grid-template-columns: 14px auto !important;
    column-gap: 10px !important;
    align-items: center !important;

    min-width: 180px !important;
    max-width: none !important;

    padding: 4px 0 !important;
    margin: 0 !important;

    cursor: pointer !important;
  }

  /* Sort label text */
  main#MainContent sorting-filter-component .sorting-filter__label,
  main#MainContent .sorting-filter .sorting-filter__label {
    font-family: "Inter", "Inter Tight", sans-serif !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #303030 !important;
    transition: color 0.18s ease !important;
  }

  /* Checkmark inherits current color */
  main#MainContent sorting-filter-component .sorting-filter__checkmark,
  main#MainContent .sorting-filter .sorting-filter__checkmark {
    color: #303030 !important;
    transition: color 0.18s ease !important;
  }

  /* Hover: text and checkmark red */
  main#MainContent sorting-filter-component label:hover .sorting-filter__label,
  main#MainContent sorting-filter-component label:hover .sorting-filter__checkmark,
  main#MainContent .sorting-filter label:hover .sorting-filter__label,
  main#MainContent .sorting-filter label:hover .sorting-filter__checkmark {
    color: #EF4C4CFF !important;
  }

  /* Active/current selected option: stays red */
  main#MainContent sorting-filter-component label:has(input.sorting-filter__input:checked) .sorting-filter__label,
  main#MainContent sorting-filter-component label:has(input.sorting-filter__input:checked) .sorting-filter__checkmark,
  main#MainContent .sorting-filter label:has(input.sorting-filter__input:checked) .sorting-filter__label,
  main#MainContent .sorting-filter label:has(input.sorting-filter__input:checked) .sorting-filter__checkmark {
    color: #EF4C4CFF !important;
  }
}

/* Belle Maison collection — lower sort dropdown panel */

@media screen and (min-width: 990px) {
  main#MainContent sorting-filter-component floating-panel-component,
  main#MainContent .sorting-filter floating-panel-component {
    margin-top: 20px !important;
  }
}

/* Belle Maison — global product grid rhythm */

:root {
  --bm-product-grid-max-width: 1320px;
  --bm-product-grid-side-padding: 80px;
  --bm-product-grid-gap: 28px;
  --bm-product-grid-row-gap: 64px;
}


/* Collection page — product grid width */

@media screen and (min-width: 750px) {
  main#MainContent #ResultsList > div:has(> ul.product-grid) {
    width: min(
      var(--bm-product-grid-max-width),
      calc(100vw - var(--bm-product-grid-side-padding))
    ) !important;
    max-width: min(
      var(--bm-product-grid-max-width),
      calc(100vw - var(--bm-product-grid-side-padding))
    ) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  main#MainContent #ResultsList ul.product-grid {
    column-gap: var(--bm-product-grid-gap) !important;
    row-gap: var(--bm-product-grid-row-gap) !important;
  }
}


/* =========================================================
   Belle Maison – Collection page grid columns cleanup

   Status:
   Tidigare fanns här CSS som tvingade antal produktkolumner
   på collection page baserat på browserbredd.

   Den koden är borttagen eftersom den låste produktgridden och
   hindrade Shopify/Horizon gridstorleksknappar från att fungera.

   Shopify/Horizon får nu själv styra gridläge via sina egna
   gridkontroller i collection Header 2.

   Skyddat:
   - Produktkortens typografi ändras inte här.
   - Produktbilder ändras inte här.
   - Header 1 påverkas inte.
   - Header 2/filterraden påverkas inte.
   ========================================================= */


/* PDP — product recommendations / related products */

@media screen and (min-width: 750px) {
  product-recommendations .section,
  .product-recommendations .section,
  .related-products .section {
    width: 100% !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  product-recommendations .resource-list,
  .product-recommendations .resource-list,
  .related-products .resource-list {
    width: min(
      var(--bm-product-grid-max-width),
      calc(100vw - var(--bm-product-grid-side-padding))
    ) !important;
    max-width: min(
      var(--bm-product-grid-max-width),
      calc(100vw - var(--bm-product-grid-side-padding))
    ) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;

    column-gap: var(--bm-product-grid-gap) !important;
    row-gap: var(--bm-product-grid-row-gap) !important;

    --resource-list-column-gap-desktop: var(--bm-product-grid-gap) !important;
    --resource-list-row-gap-desktop: var(--bm-product-grid-row-gap) !important;
  }
}


/* PDP recommendations — columns */

@media screen and (min-width: 750px) and (max-width: 989px) {
  product-recommendations .resource-list,
  .product-recommendations .resource-list,
  .related-products .resource-list {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    --column-count: 3 !important;
    --resource-list-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media screen and (min-width: 990px) and (max-width: 1399px) {
  product-recommendations .resource-list,
  .product-recommendations .resource-list,
  .related-products .resource-list {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    --column-count: 4 !important;
    --resource-list-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media screen and (min-width: 1400px) and (max-width: 1799px) {
  product-recommendations .resource-list,
  .product-recommendations .resource-list,
  .related-products .resource-list {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    --column-count: 5 !important;
    --resource-list-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

@media screen and (min-width: 1800px) {
  product-recommendations .resource-list,
  .product-recommendations .resource-list,
  .related-products .resource-list {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    --column-count: 5 !important;
    --resource-list-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}


/* Mobile — leave Shopify/Belle Maison mobile grid calmer */

@media screen and (max-width: 749px) {
  main#MainContent #ResultsList > div:has(> ul.product-grid),
  product-recommendations .resource-list,
  .product-recommendations .resource-list,
  .related-products .resource-list {
    width: calc(100vw - 40px) !important;
    max-width: calc(100vw - 40px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Belle Maison PDP — recommendations aligned with main product page-width */

main[data-template="product"] product-recommendations {
  background: #FBFBFBFF !important;
}

@media screen and (min-width: 990px) {
  main[data-template="product"] product-recommendations .section.section--page-width {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    background: #FBFBFBFF !important;
    box-sizing: border-box !important;

    --column-count: 4 !important;
    --column-count-mobile: 2 !important;
  }

  main[data-template="product"] product-recommendations .resource-list.resource-list--grid {
    width: var(--page-width) !important;
    max-width: calc(100vw - 40px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;

    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    column-gap: 28px !important;
    row-gap: 64px !important;

    --column-count: 4 !important;
    --resource-list-column-gap-desktop: 28px !important;
    --resource-list-row-gap-desktop: 64px !important;
  }
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  main[data-template="product"] product-recommendations .section.section--page-width {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    background: #FBFBFBFF !important;
    box-sizing: border-box !important;

    --column-count: 3 !important;
    --column-count-mobile: 2 !important;
  }

  main[data-template="product"] product-recommendations .resource-list.resource-list--grid {
    width: var(--page-width) !important;
    max-width: calc(100vw - 64px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;

    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    column-gap: 24px !important;
    row-gap: 56px !important;

    --column-count: 3 !important;
    --resource-list-column-gap-desktop: 24px !important;
    --resource-list-row-gap-desktop: 56px !important;
  }
}

@media screen and (max-width: 749px) {
  main[data-template="product"] product-recommendations .section.section--page-width {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    background: #FBFBFBFF !important;
    box-sizing: border-box !important;

    --column-count-mobile: 2 !important;
  }

  main[data-template="product"] product-recommendations .resource-list.resource-list--grid {
    width: calc(100vw - 40px) !important;
    max-width: calc(100vw - 40px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;

    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 20px !important;
    row-gap: 44px !important;

    --column-count-mobile: 2 !important;
  }
}

/* Belle Maison PDP — side padding + narrower recommended products row */

@media screen and (min-width: 990px) {
  #shopify-section-template--28539402092871__product_recommendations_qggXJq
  product-recommendations
  > .section {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;

    padding-left: 80px !important;
    padding-right: 80px !important;
    box-sizing: border-box !important;
  }

  #shopify-section-template--28539402092871__product_recommendations_qggXJq
  .resource-list.resource-list--grid {
    width: 100% !important;
    max-width: 1193px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;

    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    column-gap: 28px !important;
    row-gap: 64px !important;

    --column-count: 4 !important;
    --resource-list-column-gap-desktop: 28px !important;
    --resource-list-row-gap-desktop: 64px !important;
  }
}

/* Belle Maison PDP — pull shop nav tight under Header 1 */

main[data-template="product"] .shopify-section:has(.bm-pdp-shop-nav),
main[data-template="product"] .shopify-section:has(.bm-pdp-shop-nav) > *,
main[data-template="product"] .shopify-section:has(.bm-pdp-shop-nav) .section,
main[data-template="product"] .shopify-section:has(.bm-pdp-shop-nav) .spacing-style {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-block-start: 0 !important;
  padding-block-end: 0 !important;
  --padding-block-start: 0px !important;
  --padding-block-end: 0px !important;
  background: #FFFDFA !important;
}

main[data-template="product"] .bm-pdp-shop-nav {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  background: #FFFDFA !important;
  border-top: 0 !important;
  border-bottom: 0.5px solid #000 !important;
}

main[data-template="product"] .bm-pdp-shop-nav__inner {
  min-height: 64px !important;
  padding-left: 56px !important;
  padding-right: 44px !important;
}

/* Belle Maison PDP — reset shop nav position on tablet/mobile */

@media screen and (max-width: 989px) {
  main[data-template="product"] .shopify-section:has(.bm-pdp-shop-nav) {
    transform: none !important;
    margin-bottom: 0 !important;
  }
}

/* Belle Maison PDP — keep shop nav visible responsively */

@media screen and (min-width: 750px) {
  main[data-template="product"] .bm-pdp-shop-nav {
    display: block !important;
  }

  main[data-template="product"] .bm-pdp-shop-nav__inner {
    display: flex !important;
    align-items: center !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    scrollbar-width: none !important;
  }

  main[data-template="product"] .bm-pdp-shop-nav__inner::-webkit-scrollbar {
    display: none !important;
  }
}

/* Belle Maison PDP mobile — fixed filter nav after scroll */

@media screen and (max-width: 749px) {
  body.bm-pdp-nav-fixed main[data-template="product"] .shopify-section:has(.bm-pdp-shop-nav) {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    z-index: 9999 !important;
    background: #FFFDFA !important;
    transform: none !important;
    margin: 0 !important;
  }

  body.bm-pdp-nav-fixed main[data-template="product"] .bm-pdp-shop-nav {
    width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    background: #FFFDFA !important;
    border-top: 0 !important;
    border-bottom: 0.5px solid #000 !important;
  }

  body.bm-pdp-nav-fixed main[data-template="product"] .bm-pdp-shop-nav-mobile {
    min-height: 48px !important;
    background: #FFFDFA !important;
  }
}

/* Belle Maison collection — force filter header to viewport top when sticky */

main[data-template="collection"] {
  --header-height: 0px !important;
  --sticky-header-height: 0px !important;
  --sticky-header-offset: 0px !important;
  --sticky-offset: 0px !important;
}

main[data-template="collection"] .facets-block-wrapper,
main[data-template="collection"] .facets-toggle,
main[data-template="collection"] .facets-wrapper,
main[data-template="collection"] .facets {
  top: 0 !important;
  inset-block-start: 0 !important;
}

/* Belle Maison collection mobile — pull product grid closer to filter bar */

@media screen and (max-width: 749px) {
  main[data-template="collection"] #ResultsList .collection-wrapper,
  main[data-template="collection"] #ResultsList .collection-wrapper--grid-full-width,
  main[data-template="collection"] #ResultsList ul.product-grid {
    margin-top: -44px !important;
  }
}

/* Belle Maison collection mobile — tune product grid width and position */

@media screen and (max-width: 749px) {
  main[data-template="collection"] #ResultsList ul.product-grid {
    width: calc(100% + 16px) !important;
    max-width: calc(100% + 16px) !important;
    margin-left: -0px !important;
    margin-right: -0px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }
}

/* Belle Maison PDP — restore Header 2 padding after sticky fix */

@media screen and (min-width: 990px) {
  main[data-template="product"] .bm-pdp-shop-nav__inner {
    padding-left: 56px !important;
    padding-right: 56px !important;
    min-height: 48px !important;
  }
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  main[data-template="product"] .bm-pdp-shop-nav__inner {
    padding-left: 28px !important;
    padding-right: 28px !important;
    min-height: 48px !important;
  }
}

@media screen and (max-width: 749px) {
  main[data-template="product"] .bm-pdp-shop-nav-mobile {
    padding-left: 20px !important;
    padding-right: 20px !important;
    min-height: 48px !important;
  }
}

/* Belle Maison PDP — fine tune Header 2 vertical text position */

@media screen and (min-width: 990px) {
  main[data-template="product"] .bm-pdp-shop-nav__inner {
    min-height: 48px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    align-items: center !important;
  }

  main[data-template="product"] .bm-pdp-shop-nav__item {
    transform: translateY(-9.5px);
  }
}

/* Belle Maison PDP — fine tune Header 2 height */

@media screen and (min-width: 990px) {
  main[data-template="product"] .bm-pdp-shop-nav__inner {
    min-height: 42px !important;
    height: 42px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    align-items: center !important;
  }
}

/* Belle Maison PDP — stable Header 2 text position when fixed */

@media screen and (min-width: 990px) {
  main[data-template="product"] .bm-pdp-shop-nav.bm-pdp-shop-nav--fixed .bm-pdp-shop-nav__item {
    transform: translateY(-9.5px) !important;
  }
}

/* Belle Maison collection — Druvsort filter: readable full-width grid */

@media screen and (min-width: 990px) {
  main#MainContent
  #facet-inputs-component-filter-p-m-custom-grape_varieties,
  main#MainContent
  #facet-inputs-component-filter-p-m-custom-grape_varieties
  .show-more,
  main#MainContent
  #facet-inputs-component-filter-p-m-custom-grape_varieties
  .facets__inputs-wrapper {
    width: calc(100vw - 112px) !important;
    max-width: calc(100vw - 112px) !important;
    min-width: calc(100vw - 112px) !important;
    box-sizing: border-box !important;
  }

  main#MainContent
  #filters-list-template--28539402027335__main-filter-p-m-custom-grape_varieties {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    column-gap: 40px !important;
    row-gap: 16px !important;
    align-items: start !important;
    width: calc(100vw - 112px) !important;
    max-width: calc(100vw - 112px) !important;
    min-width: calc(100vw - 112px) !important;
    list-style: none !important;
    box-sizing: border-box !important;
  }

  main#MainContent
  #filters-list-template--28539402027335__main-filter-p-m-custom-grape_varieties
  > li {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  main#MainContent
  #filters-list-template--28539402027335__main-filter-p-m-custom-grape_varieties
  .checkbox,
  main#MainContent
  #filters-list-template--28539402027335__main-filter-p-m-custom-grape_varieties
  .checkbox__label {
    display: flex !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 8px !important;
  }

  main#MainContent
  #filters-list-template--28539402027335__main-filter-p-m-custom-grape_varieties
  .checkbox__label-text {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
  }
}

/* Belle Maison collection — Ursprung filter: readable full-width grid */

@media screen and (min-width: 990px) {
  main#MainContent
  #facet-inputs-component-filter-v-t-shopify-region,
  main#MainContent
  #facet-inputs-component-filter-v-t-shopify-region
  .show-more,
  main#MainContent
  #facet-inputs-component-filter-v-t-shopify-region
  .facets__inputs-wrapper {
    width: calc(100vw - 112px) !important;
    max-width: calc(100vw - 112px) !important;
    min-width: calc(100vw - 112px) !important;
    box-sizing: border-box !important;
  }

  main#MainContent
  #filters-list-template--28539402027335__main-filter-v-t-shopify-region {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    column-gap: 40px !important;
    row-gap: 16px !important;
    align-items: start !important;
    width: calc(100vw - 112px) !important;
    max-width: calc(100vw - 112px) !important;
    min-width: calc(100vw - 112px) !important;
    list-style: none !important;
    box-sizing: border-box !important;
  }

  main#MainContent
  #filters-list-template--28539402027335__main-filter-v-t-shopify-region
  > li {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  main#MainContent
  #filters-list-template--28539402027335__main-filter-v-t-shopify-region
  .checkbox,
  main#MainContent
  #filters-list-template--28539402027335__main-filter-v-t-shopify-region
  .checkbox__label {
    display: flex !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 8px !important;
  }

  main#MainContent
  #filters-list-template--28539402027335__main-filter-v-t-shopify-region
  .checkbox__label-text {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
  }
}

/* Linje under hela rekommendationssektionen */
#shopify-section-template--28539402092871__product_recommendations_qggXJq {
  border-bottom: 0.5px solid #000;
  padding-bottom: 44px;
}

/* Belle Maison – Footer payment icons black/white */

.footer .payment-icons,
.footer .list-payment,
footer .payment-icons,
footer .list-payment {
  filter: grayscale(1);
}

.footer .payment-icons img,
.footer .payment-icons svg,
.footer .list-payment img,
.footer .list-payment svg,
footer .payment-icons img,
footer .payment-icons svg,
footer .list-payment img,
footer .list-payment svg {
  filter: grayscale(1);
}

/* Belle Maison – Footer ESS Group logo sizing */

footer img.image-block__image[src*="ess-group-logo"],
.footer img.image-block__image[src*="ess-group-logo"],
.footer-group img.image-block__image[src*="ess-group-logo"] {
  width: 160px !important;
  max-width: 260px !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
}

/* Belle Maison – Footer social icons stacked */

footer .social-icons__wrapper,
.footer .social-icons__wrapper,
.footer-group .social-icons__wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 12px !important;
}

/* Varje social media-länk */
footer .social-icons__wrapper a,
.footer .social-icons__wrapper a,
.footer-group .social-icons__wrapper a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: auto !important;
  height: auto !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* Ikonerna */
footer .social-icons__wrapper svg,
.footer .social-icons__wrapper svg,
.footer-group .social-icons__wrapper svg {
  width: 20px !important;
  height: 20px !important;
  color: #FDF2E0FF !important;
  fill: currentColor !important;
}

/* Belle Maison – PDP mobile product image clean alignment */

@media screen and (max-width: 749px) {
  #shopify-section-template--28539402092871__main {
    --bm-pdp-mobile-image-padding-left: 0px;
    --bm-pdp-mobile-image-padding-right: 0px;
  }

  #shopify-section-template--28539402092871__main .bm-pdp-carousel-frame,
  #shopify-section-template--28539402092871__main .product-media-gallery,
  #shopify-section-template--28539402092871__main slideshow-component,
  #shopify-section-template--28539402092871__main slideshow-container,
  #shopify-section-template--28539402092871__main slideshow-slides,
  #shopify-section-template--28539402092871__main .product-media-container,
  #shopify-section-template--28539402092871__main .product-media,
  #shopify-section-template--28539402092871__main .bm-product-media-image-frame {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: var(--bm-pdp-mobile-image-padding-left) !important;
    padding-right: var(--bm-pdp-mobile-image-padding-right) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  #shopify-section-template--28539402092871__main img.product-media__image {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
  }
  
/* Belle Maison – PDP "Dessa kommer du nog också gilla" heading + recommendations alignment */

#shopify-section-template--28539402092871__custom_liquid_RUHgVt,
#shopify-section-template--28539402092871__product_recommendations_qggXJq {
  --bm-related-align-width: 1280px;
  --bm-related-card-width: 286px;

  /* Rubrikjustering – ändra denna för att flytta texten höger/vänster */
  --bm-related-heading-move-x: 400px80px;

  --bm-related-heading-padding-top: 22px;
  --bm-related-heading-padding-bottom: 22px;
}

/* Rubriksektionen */
#shopify-section-template--28539402092871__custom_liquid_RUHgVt {
  border-top: 0.5px solid #000;
  border-bottom: 0.5px solid #000;
}

#shopify-section-template--28539402092871__custom_liquid_RUHgVt .bm-topbar-full {
  border: 0;
}

#shopify-section-template--28539402092871__custom_liquid_RUHgVt .bm-topbar-full__inner {
  width: min(var(--bm-related-align-width), calc(100% - 40px)) !important;
  max-width: var(--bm-related-align-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-top: var(--bm-related-heading-padding-top) !important;
  padding-bottom: var(--bm-related-heading-padding-bottom) !important;
  box-sizing: border-box !important;
}

/* Själva rubriktexten */
#shopify-section-template--28539402092871__custom_liquid_RUHgVt .bm-topbar-full__back {
  position: relative !important;
  left: var(--bm-related-heading-move-x) !important;
  pointer-events: none;
  text-decoration: none;
}

#shopify-section-template--28539402092871__custom_liquid_RUHgVt .bm-topbar-full__back::before {
  display: none;
}

#shopify-section-template--28539402092871__custom_liquid_RUHgVt .bm-topbar-full__back,
#shopify-section-template--28539402092871__custom_liquid_RUHgVt .bm-topbar-full__back span,
#shopify-section-template--28539402092871__custom_liquid_RUHgVt .bm-topbar-full__back * {
  font-family: "Inter Tight", "Inter", sans-serif !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  font-variation-settings: "wght" 500 !important;
  line-height: 1.15 !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: #3d4656 !important;
}

/* Produktrekommendationerna under rubriken */
#shopify-section-template--28539402092871__product_recommendations_qggXJq {
  border-bottom: 0.5px solid #000;
  padding-bottom: 44px;
}

/* Recommendations-container */
#shopify-section-template--28539402092871__product_recommendations_qggXJq product-recommendations,
#shopify-section-template--28539402092871__product_recommendations_qggXJq .product-recommendations {
  display: block !important;
  width: min(var(--bm-related-align-width), calc(100% - 40px)) !important;
  max-width: var(--bm-related-align-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* Själva raden med fyra produkter */
#shopify-section-template--28539402092871__product_recommendations_qggXJq .resource-list.resource-list--grid {
  display: grid !important;
  grid-template-columns: repeat(4, var(--bm-related-card-width)) !important;
  justify-content: space-between !important;
  align-items: start !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  gap: 0 !important;
  box-sizing: border-box !important;
}

/* Produktkort */
#shopify-section-template--28539402092871__product_recommendations_qggXJq .resource-list__item,
#shopify-section-template--28539402092871__product_recommendations_qggXJq product-card {
  width: var(--bm-related-card-width) !important;
  max-width: var(--bm-related-card-width) !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Bildytor */
#shopify-section-template--28539402092871__product_recommendations_qggXJq .card-gallery,
#shopify-section-template--28539402092871__product_recommendations_qggXJq .product-card__image,
#shopify-section-template--28539402092871__product_recommendations_qggXJq .product-card__media,
#shopify-section-template--28539402092871__product_recommendations_qggXJq .product-card img {
  width: 100% !important;
  max-width: 100% !important;
}

/* Tablet */
@media screen and (max-width: 989px) {
  #shopify-section-template--28539402092871__custom_liquid_RUHgVt,
  #shopify-section-template--28539402092871__product_recommendations_qggXJq {
    --bm-related-card-width: calc((100vw - 72px) / 2);
    --bm-related-heading-move-x: px;
  }

  #shopify-section-template--28539402092871__product_recommendations_qggXJq .resource-list.resource-list--grid {
    grid-template-columns: repeat(2, var(--bm-related-card-width)) !important;
    row-gap: 32px !important;
  }
}

/* Mobile */
@media screen and (max-width: 749px) {
  #shopify-section-template--28539402092871__custom_liquid_RUHgVt .bm-topbar-full__inner,
  #shopify-section-template--28539402092871__product_recommendations_qggXJq product-recommendations,
  #shopify-section-template--28539402092871__product_recommendations_qggXJq .product-recommendations {
    width: calc(100% - 32px) !important;
  }

  #shopify-section-template--28539402092871__custom_liquid_RUHgVt .bm-topbar-full__back,
  #shopify-section-template--28539402092871__custom_liquid_RUHgVt .bm-topbar-full__back span,
  #shopify-section-template--28539402092871__custom_liquid_RUHgVt .bm-topbar-full__back * {
    font-size: 14px !important;
    letter-spacing: 0.18em !important;
  }

  #shopify-section-template--28539402092871__custom_liquid_RUHgVt,
  #shopify-section-template--28539402092871__product_recommendations_qggXJq {
    --bm-related-card-width: calc((100vw - 48px) / 2);
    --bm-related-heading-move-x: 0px;
  }
}





/* =========================================================
   Belle Maison – PDP Header 2 simplified back navigation
   Scope: PDP shop nav only

   Goal:
   - Replace PDP filter-style nav with one clean back link
   - Label: ← TILLBAKA TILL ALLA VINER
   - Full-width 0.5px black top/bottom borders
   - Link goes to /collections/all
   - Keep collection Header 2 / filterbar untouched
   - Keep Header 1 untouched
   - Keep mobile Header 1 untouched
   ========================================================= */

/* PDP Header 2 wrapper */
.bm-pdp-shop-nav {
  width: 100% !important;
  background: #FFFDFA !important;

  border-top: 0.5px solid #000000 !important;
  border-bottom: 0.5px solid #000000 !important;

  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;

  position: relative !important;
  z-index: 30 !important;
}

/* Force true full-browser-width border lines */
.bm-pdp-shop-nav::before,
.bm-pdp-shop-nav::after {
  content: "" !important;
  display: block !important;

  position: absolute !important;
  left: 50% !important;

  width: 100vw !important;
  height: 0.5px !important;

  transform: translateX(-50%) !important;

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

.bm-pdp-shop-nav::before {
  top: 0 !important;
}

.bm-pdp-shop-nav::after {
  bottom: 0 !important;
}

/* Desktop/tablet PDP nav inner */
.bm-pdp-shop-nav__inner {
  width: 100% !important;
  min-height: 56px !important;

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

  padding: 0 20px !important;
  margin: 0 !important;
  box-sizing: border-box !important;

  border: 0 !important;
}

/* Hide all old desktop/tablet PDP filter-style links */
.bm-pdp-shop-nav__item {
  display: none !important;
}

/* Show only first desktop/tablet link as back link */
.bm-pdp-shop-nav__item:first-child {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  height: 56px !important;
  padding: 0 !important;
  margin: 0 !important;

  font-size: 0 !important;
  line-height: 1 !important;
  text-decoration: none !important;

  color: #303030 !important;
}

/* Desktop/tablet label */
.bm-pdp-shop-nav__item:first-child::before {
  content: "← TILLBAKA TILL ALLA VINER" !important;

  font-family: "Inter", "Inter Tight", sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;

  color: #303030 !important;
}

/* Hide old arrows/spans inside desktop/tablet first item */
.bm-pdp-shop-nav__item:first-child span {
  display: none !important;
}

/* =========================================================
   Belle Maison – PDP Header 2 simplified back navigation
   Scope: PDP shop nav only

   Goal:
   - Replace PDP filter-style nav with one clean back link
   - Label: ← TILLBAKA TILL ALLA VINER
   - NO top border, because Header 1 already has bottom border
   - Full-width 0.5px black bottom border under PDP nav row
   - Link goes to /collections/all
   - Keep collection Header 2 / filterbar untouched
   - Keep Header 1 untouched
   - Keep mobile Header 1 untouched
   ========================================================= */

/* PDP Header 2 wrapper */
.bm-pdp-shop-nav {
  width: 100% !important;
  background: #FFFDFA !important;

  border-top: 0 !important;
  border-bottom: 0 !important;

  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;

  position: relative !important;
  z-index: 30 !important;
  overflow: visible !important;
}

/* Force true full-browser-width bottom line only */
.bm-pdp-shop-nav::before {
  display: none !important;
  content: none !important;
}

.bm-pdp-shop-nav::after {
  content: "" !important;
  display: block !important;

  position: absolute !important;
  left: 50% !important;
  bottom: 0 !important;

  width: 100vw !important;
  height: 0.5px !important;

  transform: translateX(-50%) !important;

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

/* Desktop/tablet PDP nav inner */
.bm-pdp-shop-nav__inner {
  width: 100% !important;
  min-height: 56px !important;

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

  padding: 0 20px !important;
  margin: 0 !important;
  box-sizing: border-box !important;

  border: 0 !important;
}

/* Hide all old desktop/tablet PDP filter-style links */
.bm-pdp-shop-nav__item {
  display: none !important;
}

/* Show only first desktop/tablet link as back link */
.bm-pdp-shop-nav__item:first-child {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  height: 56px !important;
  padding: 0 !important;
  margin: 0 !important;

  font-size: 0 !important;
  line-height: 1 !important;
  text-decoration: none !important;

  color: #303030 !important;
}

/* Desktop/tablet label */
.bm-pdp-shop-nav__item:first-child::before {
  content: "← TILLBAKA TILL ALLA VINER" !important;

  font-family: "Inter", "Inter Tight", sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;

  color: #303030 !important;
}

/* Hide old arrows/spans inside desktop/tablet first item */
.bm-pdp-shop-nav__item:first-child span {
  display: none !important;
}


/* =========================================================
   Belle Maison – PDP Header 2 simplified back navigation
   Scope: PDP shop nav only

   Goal:
   - Replace PDP filter-style nav with one clean back link
   - Label: ← TILLBAKA TILL ALLA VINER
   - NO top border, because Header 1 already has bottom border
   - Full-width 0.5px black bottom border under PDP nav row
   - Left-align the text so it matches the left edge of the PDP bottle image
   - Link goes to /collections/all
   - Keep collection Header 2 / filterbar untouched
   - Keep Header 1 untouched
   - Keep mobile Header 1 untouched
   ========================================================= */

/* PDP Header 2 wrapper */
.bm-pdp-shop-nav {
  width: 100% !important;
  background: #FFFDFA !important;

  border-top: 0 !important;
  border-bottom: 0 !important;

  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;

  position: relative !important;
  z-index: 30 !important;
  overflow: visible !important;
}

/* Force true full-browser-width bottom line only */
.bm-pdp-shop-nav::before {
  display: none !important;
  content: none !important;
}

.bm-pdp-shop-nav::after {
  content: "" !important;
  display: block !important;

  position: absolute !important;
  left: 50% !important;
  bottom: 0 !important;

  width: 100vw !important;
  height: 0.5px !important;

  transform: translateX(-50%) !important;

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

/* Desktop/tablet PDP nav inner */
.bm-pdp-shop-nav__inner {
  width: 100% !important;
  min-height: 56px !important;

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

  padding: 0 20px 0 8px !important;
  margin: 0 !important;
  box-sizing: border-box !important;

  border: 0 !important;
}

/* Hide all old desktop/tablet PDP filter-style links */
.bm-pdp-shop-nav__item {
  display: none !important;
}

/* Show only first desktop/tablet link as back link */
.bm-pdp-shop-nav__item:first-child {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  height: 56px !important;
  padding: 0 !important;
  margin: 0 !important;

  font-size: 0 !important;
  line-height: 1 !important;
  text-decoration: none !important;

  color: #303030 !important;
}

/* Desktop/tablet label */
.bm-pdp-shop-nav__item:first-child::before {
  content: "← TILLBAKA TILL ALLA VINER" !important;

  font-family: "Inter", "Inter Tight", sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;

  color: #303030 !important;
}

/* Hide old arrows/spans inside desktop/tablet first item */
.bm-pdp-shop-nav__item:first-child span {
  display: none !important;
}

/* =========================================================
   Mobile PDP Header 2
   Confirmed classes from Inspect:
   .bm-pdp-shop-nav-mobile
   .bm-pdp-shop-nav-mobile__filter
   .bm-pdp-shop-nav-mobile__filter-icon
   .bm-pdp-shop-nav-mobile__icons
   ========================================================= */

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

  .bm-pdp-shop-nav {
    width: 100% !important;
    background: #FFFDFA !important;

    border-top: 0 !important;
    border-bottom: 0 !important;

    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;

    position: relative !important;
    overflow: visible !important;
  }

  .bm-pdp-shop-nav::before {
    display: none !important;
    content: none !important;
  }

  .bm-pdp-shop-nav::after {
    content: "" !important;
    display: block !important;

    position: absolute !important;
    left: 50% !important;
    bottom: 0 !important;

    width: 100vw !important;
    height: 0.5px !important;

    transform: translateX(-50%) !important;

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

  .bm-pdp-shop-nav-mobile {
    width: 100% !important;
    min-height: 54px !important;

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

    padding: 0 20px 0 8px !important;
    margin: 0 !important;
    box-sizing: border-box !important;

    border: 0 !important;
  }

  /* Hide old right-side PDP mobile icons */
  .bm-pdp-shop-nav-mobile__icons {
    display: none !important;
  }

  /* Turn old FILTER link into back-to-all-wines link */
  .bm-pdp-shop-nav-mobile__filter {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    height: 54px !important;
    padding: 0 !important;
    margin: 0 !important;

    font-size: 0 !important;
    line-height: 1 !important;
    text-decoration: none !important;

    color: #303030 !important;
  }

  /* Hide old mini filter icon */
  .bm-pdp-shop-nav-mobile__filter-icon,
  .bm-pdp-shop-nav-mobile__filter span {
    display: none !important;
  }

  /* Mobile label */
  .bm-pdp-shop-nav-mobile__filter::before {
    content: "← TILLBAKA TILL ALLA VINER" !important;

    font-family: "Inter", "Inter Tight", sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0.075em !important;
    text-transform: uppercase !important;

    color: #303030 !important;
  }
}

/* =========================================================
   Belle Maison – Header 1 actions rescue
   Step 1 after removing TEST 26

   Purpose:
   - Restore desktop/tablet Header 1 actions so old mobile transforms
     cannot affect account/cart/bubble/burger.
   - Put mobile hamburger back on the right only on true mobile.
   ========================================================= */


/* DESKTOP + TABLET: protect Header 1 actions from mobile positioning */
@media screen and (min-width: 750px) {
  .header__row--top header-drawer.header-drawer,
  .header__row--top .account-button,
  .header__row--top .account-button.header-actions__action,
  .header__row--top shopify-account,
  .header__row--top cart-drawer-component,
  .header__row--top cart-drawer-component.cart-drawer,
  .header__row--top cart-drawer-component button.header-actions__action,
  .header__row--top cart-drawer-component .header-actions__action,
  .header__row--top cart-icon.header-actions__cart-icon,
  .header__row--top cart-icon[data-testid="cart-icon"],
  .header__row--top .header-actions__cart-icon,
  .header__row--top .cart-bubble {
    transform: none !important;
    translate: none !important;
  }

  .header__row--top header-drawer.header-drawer {
    position: static !important;
  }

  .header__row--top header-actions {
    display: flex !important;
    align-items: center !important;
    justify-self: flex-end !important;
  }

  .header__row--top .account-button,
  .header__row--top cart-drawer-component,
  .header__row--top cart-drawer-component button.header-actions__action {
    display: flex !important;
    align-items: center !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}


/* MOBILE ONLY: put hamburger back on the right */
@media screen and (max-width: 749px) {
  .header__row--top header-drawer.header-drawer {
    transform: translateX(calc(100vw - 62px)) !important;
    z-index: 999 !important;
    background: transparent !important;
  }

  .header__row--top header-drawer.header-drawer summary.header__icon--menu {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
  }

  .header__row--top header-drawer.header-drawer summary.header__icon--menu svg,
  .header__row--top header-drawer.header-drawer summary.header__icon--menu .svg-wrapper {
    display: none !important;
  }

  .header__row--top header-drawer.header-drawer summary.header__icon--menu::before {
    content: "" !important;
    display: block !important;
    width: 28px !important;
    height: 23px !important;
    background:
      linear-gradient(#000000, #000000) 0 0 / 28px 3px no-repeat,
      linear-gradient(#000000, #000000) 0 10px / 28px 3px no-repeat,
      linear-gradient(#000000, #000000) 0 20px / 28px 3px no-repeat !important;
  }

  .header__row--top header-drawer.header-drawer details[open] summary.header__icon--menu::before {
    width: 28px !important;
    height: 28px !important;
    background:
      linear-gradient(#000000, #000000) center / 28px 2px no-repeat,
      linear-gradient(#000000, #000000) center / 28px 2px no-repeat !important;
    transform: rotate(45deg) !important;
  }

  .header__row--top header-drawer.header-drawer details[open] summary.header__icon--menu::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    width: 28px !important;
    height: 2px !important;
    background: #000000 !important;
    transform: rotate(-45deg) !important;
  }
}

/* =========================================================
   Belle Maison – Header 1 mobile account/cart fine tune

   Purpose:
   - Move account and cart as whole buttons.
   - Do not move cart bubble separately, because bubble already
     follows the cart icon correctly.
   ========================================================= */

@media screen and (max-width: 749px) {
  .header__row--top {
    --bm-header-account-x: -24px;
    --bm-header-cart-x: -38px;
  }

  .header__row--top .account-button,
  .header__row--top .account-button.header-actions__action,
  .header__row--top shopify-account {
    transform: translateX(var(--bm-header-account-x)) !important;
    display: flex !important;
    align-items: center !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .header__row--top cart-drawer-component,
  .header__row--top cart-drawer-component.cart-drawer,
  .header__row--top cart-drawer-component button.header-actions__action,
  .header__row--top cart-drawer-component .header-actions__action {
    transform: translateX(var(--bm-header-cart-x)) !important;
    display: flex !important;
    align-items: center !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .header__row--top cart-icon.header-actions__cart-icon,
  .header__row--top cart-icon[data-testid="cart-icon"],
  .header__row--top .header-actions__cart-icon {
    transform: none !important;
    position: relative !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

    /* =========================================================
   Belle Maison – PDP mobile Header 1 cart/account final tune

   Purpose:
   - Product display page mobile only.
   - Reuse the existing mobile Header 1 variables that already control account/cart.
   - Add vertical tuning with top instead of transform so it survives after load.
   - Must be placed at the very bottom of assets/base.css.
   ========================================================= */

@media screen and (max-width: 749px) {
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top {
    --bm-header-account-x: -24px;
    --bm-header-cart-x: -18px;

    --bm-pdp-mobile-account-y: 0px;
    --bm-pdp-mobile-cart-y: -2px;
  }

  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top .account-button,
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top .account-button.header-actions__action {
    position: relative !important;
    top: var(--bm-pdp-mobile-account-y) !important;
  }

  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top cart-drawer-component,
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top cart-drawer-component.cart-drawer,
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top cart-drawer-component button.header-actions__action {
    position: relative !important;
    top: var(--bm-pdp-mobile-cart-y) !important;
    overflow: visible !important;
  }

  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top cart-icon.header-actions__cart-icon,
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top cart-icon.header-actions__cart-icon .cart-bubble {
    overflow: visible !important;
  }
}

/* =========================================================
   Belle Maison – PDP mobile Header 1 cart final position

   Purpose:
   - Product display page mobile only.
   - Move cart + cart bubble using layout offset, not transform.
   - Avoid jump-back after Shopify cart-icon finishes loading.
   - Keep desktop/tablet untouched.
   ========================================================= */

@media screen and (max-width: 749px) {
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top {
    --bm-pdp-mobile-cart-left: 8px;
    --bm-pdp-mobile-cart-top: -20px;
  }

  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top cart-drawer-component,
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top cart-drawer-component.cart-drawer {
    position: relative !important;
    left: var(--bm-pdp-mobile-cart-left) !important;
    top: var(--bm-pdp-mobile-cart-top) !important;
    transform: none !important;
    overflow: visible !important;
  }

  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top cart-drawer-component button.header-actions__action,
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top cart-drawer-component .header-actions__action {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
    overflow: visible !important;
    width: 52px !important;
    min-width: 52px !important;
  }

  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top cart-icon.header-actions__cart-icon,
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top cart-icon[data-testid="cart-icon"],
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top .header-actions__cart-icon {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
    overflow: visible !important;
  }

  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top cart-icon.header-actions__cart-icon .cart-bubble {
    overflow: visible !important;
  }
}

/* =========================================================
   Belle Maison – PDP mobile Header 1 account/cart final tune

   Purpose:
   - Product display page mobile only.
   - Adjust cart between account and hamburger.
   - Reuse the working global mobile Header 1 transform variables.
   - Keep desktop/tablet untouched.
   ========================================================= */

@media screen and (max-width: 749px) {
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top {
    --bm-header-account-x: -24px;
    --bm-header-cart-x: -30px;
  }

  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top cart-drawer-component,
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top cart-drawer-component.cart-drawer,
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top cart-drawer-component button.header-actions__action,
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top cart-drawer-component .header-actions__action,
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top cart-icon.header-actions__cart-icon,
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top cart-icon.header-actions__cart-icon .cart-bubble {
    overflow: visible !important;
  }
}

/* =========================================================
   Belle Maison – PDP mobile Header 1 cart icon visual tune

   Purpose:
   - Product display page mobile only.
   - Move the final loaded cart-icon, not the wrapper.
   - Keeps cart bubble attached to cart icon.
   - Keep desktop/tablet untouched.
   ========================================================= */

@media screen and (max-width: 749px) {
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top {
    --bm-pdp-mobile-cart-icon-x: -58px;
    --bm-pdp-mobile-cart-icon-y: 19px;
  }

  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top cart-icon.header-actions__cart-icon,
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top cart-icon[data-testid="cart-icon"],
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top .header-actions__cart-icon {
    position: relative !important;
    left: var(--bm-pdp-mobile-cart-icon-x) !important;
    top: var(--bm-pdp-mobile-cart-icon-y) !important;
    transform: none !important;
    overflow: visible !important;
  }

  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top cart-icon.header-actions__cart-icon .cart-bubble {
    overflow: visible !important;
  }
}

/* =========================================================
   Belle Maison – PDP mobile Header 1 left logo + right actions v5

   Purpose:
   - Product display page mobile only.
   - Do NOT touch hamburger or header grid.
   - Visually move logo left and search right.
   - Keep existing working account/cart/hamburger behavior.
   ========================================================= */

@media screen and (max-width: 749px) {
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top {
    --bm-pdp-mobile-logo-x: calc(-50vw + 72px);
    --bm-pdp-mobile-logo-y: 0px;

    --bm-pdp-mobile-search-x: calc(100vw - 158px);
    --bm-pdp-mobile-search-y: 0px;
  }

  /* Move logo visually left without changing the grid */
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top .header-logo {
    position: relative !important;
    transform: translate(
      var(--bm-pdp-mobile-logo-x),
      var(--bm-pdp-mobile-logo-y)
    ) !important;
    z-index: 5 !important;
  }

  /* Move search visually to the right without changing the grid */
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top .search-action,
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top search-button {
    position: relative !important;
    transform: translate(
      var(--bm-pdp-mobile-search-x),
      var(--bm-pdp-mobile-search-y)
    ) !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 6 !important;
  }
}

/* =========================================================
   Belle Maison – PDP mobile Header 1 emergency reset

   Purpose:
   - Product display page mobile only.
   - Remove broken custom grid from previous tests.
   - Restore hamburger visibility.
   ========================================================= */

@media screen and (max-width: 749px) {
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top .header__columns {
    grid-template-columns: var(--header-mobile-bookend) var(--header-mobile-bookend) 1fr var(--header-mobile-bookend) var(--header-mobile-bookend) !important;
    grid-template-areas: "leftA leftB center rightA rightB" !important;
    padding-right: var(--padding-3xs) !important;
  }

  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top header-drawer.header-drawer {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateX(calc(100vw - 62px)) !important;
    z-index: 999 !important;
  }
}

/* =========================================================
   Belle Maison – PDP mobile Header 1 logo position tune

   Purpose:
   - Product display page mobile only.
   - Move BM logo left/right without touching hamburger or actions.
   ========================================================= */

@media screen and (max-width: 749px) {
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top {
    --bm-pdp-mobile-logo-x: -155px;
    --bm-pdp-mobile-logo-y: 0px;
  }

  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top .header-logo {
    position: relative !important;
    transform: translate(
      var(--bm-pdp-mobile-logo-x),
      var(--bm-pdp-mobile-logo-y)
    ) !important;
  }
}

/* =========================================================
   Belle Maison – PDP mobile Header 1 search rescue + tune

   Purpose:
   - Product display page mobile only.
   - Bring search back after grid reset.
   - Allow search left/right and up/down tuning.
   - Do not touch hamburger, account, or cart.
   ========================================================= */

@media screen and (max-width: 749px) {
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top {
    --bm-pdp-mobile-search-x: 156px;
    --bm-pdp-mobile-search-y: 0px;
  }

  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top .search-action,
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top search-button {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: relative !important;
    transform: translate(
      var(--bm-pdp-mobile-search-x),
      var(--bm-pdp-mobile-search-y)
    ) !important;
    z-index: 6 !important;
  }
}

/* =========================================================
   Belle Maison – PDP mobile drawer panel left-to-right fix

   Purpose:
   - Product display page mobile only.
   - Hamburger stays visually on the right.
   - Drawer panel opens from the left and lands flush with viewport.
   - Matches Breakdance/WordPress left-to-right drawer behavior.
   ========================================================= */

@media screen and (max-width: 749px) {
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top header-drawer.header-drawer .menu-drawer {
    position: fixed !important;
    top: var(--header-height, 66px) !important;
    left: 0 !important;
    right: auto !important;

    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;

    height: calc(100vh - var(--header-height, 66px)) !important;
    max-height: calc(100vh - var(--header-height, 66px)) !important;

    transform: translateX(calc(-100vw - (100vw - 62px))) !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: #FFFDFA !important;
    z-index: 998 !important;
  }

  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top header-drawer.header-drawer details.menu-open > .menu-drawer,
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top header-drawer.header-drawer details[open] > .menu-drawer {
    transform: translateX(calc(0px - (100vw - 62px))) !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: flex !important;
  }
}

/* =========================================================
   Belle Maison – PDP mobile drawer visual design

   Purpose:
   - Product display page mobile only.
   - Style Shopify drawer to match Belle Maison / Breakdance menu.
   - Does not change drawer open/close positioning.
   ========================================================= */

@media screen and (max-width: 749px) {
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top header-drawer.header-drawer .menu-drawer {
    background: #FFFDFA !important;
    color: #111827 !important;
    border-right: 1px solid rgba(0, 0, 0, 0.12) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
  }

  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top header-drawer.header-drawer .menu-drawer::before {
    content: "Belle Maison" !important;
    display: flex !important;
    align-items: center !important;

    height: 60px !important;
    padding: 0 20px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;

    font-family: var(--font-heading--family), Georgia, serif !important;
    font-size: 27px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;

    color: #111111 !important;
    box-sizing: border-box !important;
  }

  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top header-drawer.header-drawer .menu-drawer__close-button {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;

    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;

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

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

    background: transparent !important;
    border: 0 !important;
    color: #111111 !important;
    z-index: 5 !important;
  }

  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top header-drawer.header-drawer .menu-drawer__close-button svg {
    width: 20px !important;
    height: 20px !important;
    stroke-width: 2 !important;
  }

  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top header-drawer.header-drawer .menu-drawer__navigation {
    padding: 0 !important;
    margin: 0 !important;
  }

  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top header-drawer.header-drawer .menu-drawer__menu {
    padding: 0 !important;
    margin: 0 !important;
  }

  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top header-drawer.header-drawer .menu-drawer__list-item {
    margin: 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  }

  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top header-drawer.header-drawer .menu-drawer__menu-item,
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top header-drawer.header-drawer .menu-drawer__menu-item--mainlist {
    min-height: 56px !important;
    padding: 0 24px !important;

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

    font-family: "Inter Tight", Inter, sans-serif !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;

    color: #111827 !important;
    text-decoration: none !important;
    background: transparent !important;
  }

  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top header-drawer.header-drawer .menu-drawer__menu-item-text {
    font: inherit !important;
    letter-spacing: inherit !important;
    text-transform: inherit !important;
    color: inherit !important;
  }

  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top header-drawer.header-drawer .menu-drawer__utility-links,
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top header-drawer.header-drawer .menu-drawer__localization {
    display: none !important;
  }
}

/* PDP mobile drawer close button fine tune */
@media screen and (max-width: 749px) {
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top header-drawer.header-drawer .menu-drawer__close-button {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;

    top: 16px !important;
    right: 14px !important;

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

    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top header-drawer.header-drawer .menu-drawer__close-button .svg-wrapper,
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top header-drawer.header-drawer .menu-drawer__close-button svg {
    width: 17px !important;
    height: 17px !important;
  }
}

/* PDP mobile open hamburger / close X fine tune */
@media screen and (max-width: 749px) {
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top header-drawer.header-drawer details[open] summary.header__icon--menu {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top header-drawer.header-drawer details[open] summary.header__icon--menu::before {
    width: 19px !important;
    height: 19px !important;
    background:
      linear-gradient(#000000, #000000) center / 19px 2px no-repeat,
      linear-gradient(#000000, #000000) center / 19px 2px no-repeat !important;
    transform: rotate(45deg) !important;
  }

  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top header-drawer.header-drawer details[open] summary.header__icon--menu::after {
    width: 19px !important;
    height: 2px !important;
    background: #000000 !important;
    transform: rotate(-45deg) !important;
  }
}

/* =========================================================
   Belle Maison – Collection mobile drawer panel left-to-right fix

   Scope:
   - Collection page mobile only.
   - Matches PDP mobile drawer behavior.

   Purpose:
   - Hamburger stays visually on the right.
   - Drawer panel opens from the left.
   - Drawer lands flush with viewport.
   - Counteracts the moved hamburger position.
   ========================================================= */

@media screen and (max-width: 749px) {
  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top header-drawer.header-drawer .menu-drawer {
    position: fixed !important;
    top: var(--header-height, 66px) !important;
    left: 0 !important;
    right: auto !important;

    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;

    height: calc(100vh - var(--header-height, 66px)) !important;
    max-height: calc(100vh - var(--header-height, 66px)) !important;

    transform: translateX(calc(-100vw - (100vw - 62px))) !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    background: #FFFDFA !important;
    z-index: 998 !important;
  }

  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top header-drawer.header-drawer details.menu-open > .menu-drawer,
  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top header-drawer.header-drawer details[open] > .menu-drawer {
    transform: translateX(calc(0px - (100vw - 62px))) !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: flex !important;
  }
}

/* =========================================================
   Belle Maison – Collection mobile drawer visual design

   Scope:
   - Collection page mobile only.
   - Same visual direction as PDP drawer.
   ========================================================= */

@media screen and (max-width: 749px) {
  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top header-drawer.header-drawer .menu-drawer {
    background: #FFFDFA !important;
    color: #111827 !important;
    border-right: 1px solid rgba(0, 0, 0, 0.12) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
  }

  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top header-drawer.header-drawer .menu-drawer::before {
    content: "Belle Maison" !important;
    display: flex !important;
    align-items: center !important;

    height: 60px !important;
    padding: 0 20px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;

    font-family: var(--font-heading--family), Georgia, serif !important;
    font-size: 27px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;

    color: #111111 !important;
    box-sizing: border-box !important;
  }

  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top header-drawer.header-drawer .menu-drawer__navigation {
    padding: 0 !important;
    margin: 0 !important;
  }

  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top header-drawer.header-drawer .menu-drawer__menu {
    padding: 0 !important;
    margin: 0 !important;
  }

  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top header-drawer.header-drawer .menu-drawer__list-item {
    margin: 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  }

  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top header-drawer.header-drawer .menu-drawer__menu-item,
  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top header-drawer.header-drawer .menu-drawer__menu-item--mainlist {
    min-height: 56px !important;
    padding: 0 24px !important;

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

    font-family: "Inter Tight", Inter, sans-serif !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;

    color: #111827 !important;
    text-decoration: none !important;
    background: transparent !important;
  }

  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top header-drawer.header-drawer .menu-drawer__menu-item-text {
    font: inherit !important;
    letter-spacing: inherit !important;
    text-transform: inherit !important;
    color: inherit !important;
  }

  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top header-drawer.header-drawer .menu-drawer__utility-links,
  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top header-drawer.header-drawer .menu-drawer__localization {
    display: none !important;
  }
}

/* =========================================================
   Belle Maison – Collection mobile drawer close X fine tune

   Scope:
   - Collection page mobile only.
   ========================================================= */

@media screen and (max-width: 749px) {
  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top header-drawer.header-drawer details[open] summary.header__icon--menu {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: 0 !important;

    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top header-drawer.header-drawer details[open] summary.header__icon--menu::before {
    width: 19px !important;
    height: 19px !important;

    background:
      linear-gradient(#000000, #000000) center / 19px 2px no-repeat,
      linear-gradient(#000000, #000000) center / 19px 2px no-repeat !important;

    transform: rotate(45deg) !important;
  }

  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top header-drawer.header-drawer details[open] summary.header__icon--menu::after {
    content: "" !important;
    display: block !important;

    position: absolute !important;
    width: 19px !important;
    height: 2px !important;
    background: #000000 !important;

    transform: rotate(-45deg) !important;
  }
}

/* =========================================================
   Belle Maison – Collection mobile Header 1 layout stable v2

   Scope:
   - Collection page mobile only.

   Purpose:
   - Same visual idea as PDP mobile Header 1.
   - BM logo left.
   - Search moved right.
   - Account/cart/hamburger grouped on right.
   - Cart bubble stays attached to cart icon.
   ========================================================= */

@media screen and (max-width: 749px) {
  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top {
    --bm-collection-mobile-logo-x: -155px;
    --bm-collection-mobile-logo-y: 0px;

    --bm-collection-mobile-search-x: 156px;
    --bm-collection-mobile-search-y: 0px;

    --bm-collection-mobile-cart-wrapper-x: -34px;
    --bm-collection-mobile-cart-wrapper-y: 0px;

    --bm-collection-mobile-hamburger-x: calc(100vw - 62px);
  }

  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top .header__columns {
    grid-template-columns: var(--header-mobile-bookend) var(--header-mobile-bookend) 1fr var(--header-mobile-bookend) var(--header-mobile-bookend) !important;
    grid-template-areas: "leftA leftB center rightA rightB" !important;
    padding-right: var(--padding-3xs) !important;
    overflow: visible !important;
  }

  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top .header-logo {
    position: relative !important;
    transform: translate(
      var(--bm-collection-mobile-logo-x),
      var(--bm-collection-mobile-logo-y)
    ) !important;
    z-index: 5 !important;
  }

  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top .search-action,
  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top search-button {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;

    position: relative !important;
    transform: translate(
      var(--bm-collection-mobile-search-x),
      var(--bm-collection-mobile-search-y)
    ) !important;

    z-index: 6 !important;
  }

  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top .account-button,
  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top .account-button.header-actions__action {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;

    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;

    z-index: 7 !important;
  }

  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top cart-drawer-component,
  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top cart-drawer-component.cart-drawer {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;

    position: relative !important;
    transform: translate(
      var(--bm-collection-mobile-cart-wrapper-x),
      var(--bm-collection-mobile-cart-wrapper-y)
    ) !important;

    overflow: visible !important;
    z-index: 8 !important;
  }

  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top cart-drawer-component button.header-actions__action {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
    overflow: visible !important;
  }

  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top cart-icon.header-actions__cart-icon,
  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top cart-icon[data-testid="cart-icon"],
  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top .header-actions__cart-icon {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
    overflow: visible !important;
  }

  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top cart-icon.header-actions__cart-icon .cart-bubble {
    overflow: visible !important;
  }

  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top header-drawer.header-drawer {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    transform: translateX(var(--bm-collection-mobile-hamburger-x)) !important;

    z-index: 999 !important;
    background: transparent !important;
  }

  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top header-drawer.header-drawer summary.header__icon--menu {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* =========================================================
   Belle Maison – Collection mobile Header 1 action buttons tune

   Scope:
   - Collection page mobile only.

   Purpose:
   - Fine tune each Header 1 action button separately.
   - Search, account, cart and hamburger each get left/right + up/down controls.
   - Cart bubble stays attached to cart icon.
   ========================================================= */

@media screen and (max-width: 749px) {
  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top {
    --bm-collection-mobile-search-x: 156px;
    --bm-collection-mobile-search-y: 0px;

    --bm-collection-mobile-account-x: -56px;
    --bm-collection-mobile-account-y: 0px;

    --bm-collection-mobile-cart-x: -22px;
    --bm-collection-mobile-cart-y: -3px;

    --bm-collection-mobile-hamburger-x: calc(100vw - 62px);
    --bm-collection-mobile-hamburger-y: 0px;
  }

  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top .search-action,
  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top search-button {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;

    position: relative !important;
    transform: translate(
      var(--bm-collection-mobile-search-x),
      var(--bm-collection-mobile-search-y)
    ) !important;

    z-index: 6 !important;
  }

  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top .account-button,
  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top .account-button.header-actions__action {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;

    position: relative !important;
    transform: translate(
      var(--bm-collection-mobile-account-x),
      var(--bm-collection-mobile-account-y)
    ) !important;

    z-index: 7 !important;
  }

  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top cart-drawer-component,
  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top cart-drawer-component.cart-drawer,
  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top cart-drawer-component button.header-actions__action {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;

    position: relative !important;
    transform: translate(
      var(--bm-collection-mobile-cart-x),
      var(--bm-collection-mobile-cart-y)
    ) !important;

    overflow: visible !important;
    z-index: 8 !important;
  }

  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top cart-icon.header-actions__cart-icon,
  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top cart-icon[data-testid="cart-icon"],
  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top .header-actions__cart-icon {
    overflow: visible !important;
  }

  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top cart-icon.header-actions__cart-icon .cart-bubble {
    overflow: visible !important;
  }

  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top header-drawer.header-drawer {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    transform: translate(
      var(--bm-collection-mobile-hamburger-x),
      var(--bm-collection-mobile-hamburger-y)
    ) !important;

    z-index: 999 !important;
    background: transparent !important;
  }
}

/* =========================================================
   Belle Maison – Cart drawer items area vertical fix
   Date: 22 May 2026

   Scope:
   - Cart drawer only.
   - Desktop/tablet only: 750px and up.
   - Does not touch Header 1.
   - Does not touch Header 2.
   - Does not touch cart icon position.

   Purpose:
   - Move the cart drawer product area down below the VARUKORG heading.
   ========================================================= */

@media screen and (min-width: 750px) {
  cart-drawer-component .cart-drawer__dialog scroll-hint.cart-drawer__content > scroll-hint.cart-drawer__items {
    padding-top: 46px !important;
    box-sizing: border-box !important;
  }
}

/* Belle Maison collection — Rensa and Stäng identical text buttons */

@media screen and (min-width: 990px) {
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .bm-filter-actions {
    display: flex !important;
    align-items: center !important;
    gap: 28px !important;
    margin: 0 0 18px 26px !important;
    padding: 0 !important;
  }

  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .bm-filter-actions .facets__clear,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .bm-filter-actions .facets__clear--active,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .bm-filter-actions facet-clear-component {
    all: unset !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .bm-filter-actions button.clear-filter,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .bm-filter-actions .clear-filter.button,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .bm-filter-actions button.bm-filter-close,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal button.bm-filter-close {
    all: unset !important;

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

    font-family: "Inter", "Inter Tight", sans-serif !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;

    color: #303030 !important;
    cursor: pointer !important;

    transition: color 0.18s ease !important;
  }

  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .bm-filter-actions button.clear-filter:hover,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .bm-filter-actions .clear-filter.button:hover,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .bm-filter-actions button.bm-filter-close:hover,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal button.bm-filter-close:hover,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .bm-filter-actions button.clear-filter:focus-visible,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .bm-filter-actions button.bm-filter-close:focus-visible {
    color: #EF4C4CFF !important;
  }
}

/* Belle Maison collection — Rensa and Stäng hover color */

@media screen and (min-width: 990px) {
  main#MainContent button.clear-filter,
  main#MainContent .clear-filter.button,
  main#MainContent button.bm-filter-close {
    transition: color 0.18s ease !important;
  }

  main#MainContent button.clear-filter:hover,
  main#MainContent .clear-filter.button:hover,
  main#MainContent button.bm-filter-close:hover,
  main#MainContent button.clear-filter:focus-visible,
  main#MainContent .clear-filter.button:focus-visible,
  main#MainContent button.bm-filter-close:focus-visible {
    color: #EF4C4CFF !important;
  }
}

/* Belle Maison collection — final Rensa/Stäng hover refinement */

@media screen and (min-width: 990px) {
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .bm-filter-actions .clear-filter,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .bm-filter-actions .bm-filter-close {
    color: #303030 !important;
    text-decoration: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    background-image: none !important;
    transition: color 0.18s ease !important;
  }

  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .bm-filter-actions .clear-filter:hover,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .bm-filter-actions .clear-filter:focus-visible,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .bm-filter-actions .bm-filter-close:hover,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .bm-filter-actions .bm-filter-close:focus-visible {
    color: #EF4C4CFF !important;
    text-decoration: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    background-image: none !important;
    outline: none !important;
  }

  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .bm-filter-actions .bm-filter-close::before,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .bm-filter-actions .bm-filter-close::after,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .bm-filter-actions .clear-filter::before,
  main#MainContent .facets-block-wrapper.facets-block-wrapper--horizontal .bm-filter-actions .clear-filter::after {
    display: none !important;
    content: none !important;
  }
}

/* Belle Maison collection — hard override for Rensa/Stäng */

main#MainContent .bm-filter-actions .clear-filter,
main#MainContent .bm-filter-actions .clear-filter.button,
main#MainContent .bm-filter-actions .button.clear-filter,
main#MainContent .bm-filter-actions .bm-filter-close,
main#MainContent .bm-filter-actions .bm-filter-close.button,
main#MainContent .bm-filter-actions .button.bm-filter-close {
  color: #303030 !important;
  text-decoration: none !important;
  text-decoration-line: none !important;
  border: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  background-image: none !important;
  outline: 0 !important;
}

main#MainContent .bm-filter-actions .clear-filter:hover,
main#MainContent .bm-filter-actions .clear-filter.button:hover,
main#MainContent .bm-filter-actions .button.clear-filter:hover,
main#MainContent .bm-filter-actions .bm-filter-close:hover,
main#MainContent .bm-filter-actions .bm-filter-close.button:hover,
main#MainContent .bm-filter-actions .button.bm-filter-close:hover,
main#MainContent .bm-filter-actions .clear-filter:focus-visible,
main#MainContent .bm-filter-actions .bm-filter-close:focus-visible {
  color: #EF4C4CFF !important;
  text-decoration: none !important;
  text-decoration-line: none !important;
  border: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  background-image: none !important;
  outline: 0 !important;
}

main#MainContent .bm-filter-actions .clear-filter::before,
main#MainContent .bm-filter-actions .clear-filter::after,
main#MainContent .bm-filter-actions .bm-filter-close::before,
main#MainContent .bm-filter-actions .bm-filter-close::after,
main#MainContent .bm-filter-actions .button.clear-filter::before,
main#MainContent .bm-filter-actions .button.clear-filter::after,
main#MainContent .bm-filter-actions .button.bm-filter-close::before,
main#MainContent .bm-filter-actions .button.bm-filter-close::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  box-shadow: none !important;
  background: none !important;
}

/* Belle Maison collection — align Rensa under filter value */

main#MainContent .bm-filter-actions {
  display: flex !important;
  align-items: center !important;
  gap: 34px !important;

  margin-left: -4px !important;
  margin-top: 34px !important;
}

/* Belle Maison – Collection mobile hamburger menu above filter bar */
@media screen and (max-width: 749px) {
  body:has(main#MainContent[data-template="collection"])
  header-component#header-component
  .header__row--top
  header-drawer.header-drawer:has(details[open]),
  body:has(main#MainContent[data-template="collection"])
  header-component#header-component
  .header__row--top
  header-drawer.header-drawer:has(details.menu-open) {
    z-index: 10000 !important;
  }

  body:has(main#MainContent[data-template="collection"])
  header-component#header-component
  .header__row--top
  header-drawer.header-drawer details[open],
  body:has(main#MainContent[data-template="collection"])
  header-component#header-component
  .header__row--top
  header-drawer.header-drawer details.menu-open {
    position: relative !important;
    z-index: 10000 !important;
  }

  body:has(main#MainContent[data-template="collection"])
  header-component#header-component
  .header__row--top
  header-drawer.header-drawer details[open] > .menu-drawer,
  body:has(main#MainContent[data-template="collection"])
  header-component#header-component
  .header__row--top
  header-drawer.header-drawer details.menu-open > .menu-drawer {
    z-index: 10001 !important;
  }
}

/* Belle Maison – Force open mobile hamburger menu above filter bar */
@media screen and (max-width: 749px) {
  body:has(main#MainContent[data-template="collection"]):has(header-drawer.header-drawer details[open]) #header-group,
  body:has(main#MainContent[data-template="collection"]):has(header-drawer.header-drawer details.menu-open) #header-group {
    z-index: 20000 !important;
  }

  body:has(main#MainContent[data-template="collection"]):has(header-drawer.header-drawer details[open]) header-component#header-component,
  body:has(main#MainContent[data-template="collection"]):has(header-drawer.header-drawer details.menu-open) header-component#header-component {
    z-index: 20001 !important;
  }

  body:has(main#MainContent[data-template="collection"]):has(header-drawer.header-drawer details[open]) header-drawer.header-drawer,
  body:has(main#MainContent[data-template="collection"]):has(header-drawer.header-drawer details.menu-open) header-drawer.header-drawer {
    z-index: 20002 !important;
  }

  body:has(main#MainContent[data-template="collection"]):has(header-drawer.header-drawer details[open]) header-drawer.header-drawer .menu-drawer,
  body:has(main#MainContent[data-template="collection"]):has(header-drawer.header-drawer details.menu-open) header-drawer.header-drawer .menu-drawer {
    z-index: 20003 !important;
  }

  body:has(main#MainContent[data-template="collection"]):has(header-drawer.header-drawer details[open]) main#MainContent .facets-toggle,
  body:has(main#MainContent[data-template="collection"]):has(header-drawer.header-drawer details.menu-open) main#MainContent .facets-toggle {
    z-index: 1 !important;
  }
}