/** Shopify CDN: Minification failed

Line 5348:0 Unexpected "}"
Line 6493:0 Expected "}" to go with "{"

**/
/* ═══════════════════════════════════════════════════════════════
   GLOBAL ZERO-SHADOW DIRECTIVE (ALL SHADOWS REMOVED FROM EVERYTHING)
   ═══════════════════════════════════════════════════════════════ */
:root {
  --shadow-drawer: none !important;
  --shadow-popover: none !important;
  --shadow-button: none !important;
  --shadow-drop: none !important;
  --shadow-card: none !important;
  --shadow-blur: 0px !important;
  --color-shadow: transparent !important;
  --input-box-shadow: none !important;
  --input-box-shadow-focus: none !important;
  --hover-shadow-color: transparent !important;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  text-shadow: none !important;
}

/* Hard reset shadows on all containers, cards, dialogs, drawers, popups, buttons & bars */
.header,
.header-wrapper,
.header-drawer,
.theme-drawer,
.theme-drawer__dialog,
.dialog,
.dialog-modal,
.modal,
.modal-dialog,
.predictive-search,
.search-modal,
.product-card,
.collection-card,
.card,
.card-gallery,
.button,
.button-primary,
.button-secondary,
.btn,
.mobile-bottom-bar,
.mobile-sticky-bar,
.mobile-bottom-sheet,
.mobile-shop-all-card,
.sticky-bar,
.sticky-add-to-cart,
.sticky-add-to-cart__bar,
.track-order-card,
.size-guide-modal,
.size-guide-modal__content,
.product-details,
.popup,
.tooltip,
.quick-add-modal,
.quick-add-modal__content,
.facets-toggle-btn,
.mz-track-card,
.mz-drawer-panel,
.mz-top-bar,
.mz-mobile-floating-filter-btn {
  box-shadow: none !important;
  text-shadow: none !important;
}

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-shadow-color: transparent;
  --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: #383838 transparent;
  scroll-behavior: smooth;
}

@media (min-width: 990px) {
  html:has(.page-wrapper),
  html:has(.page-wrapper) body {
    height: 100dvh;
    overflow: hidden;
  }
}

html[scroll-lock],
html[scroll-lock] .page-wrapper {
  overflow: hidden;
}

.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  transition: margin-right var(--animation-speed) var(--animation-timing-fade-out);
}

@media (min-width: 990px) {
  .page-wrapper {
    height: 100dvh;
    overflow-y: auto;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: #383838 transparent;
  }

  .page-wrapper--drawer-open shopify-account::part(dialog) {
    translate: 0 !important;
  }
}

.page-wrapper--drawer-open {
  margin: 0 !important;
  transition: none !important;
}

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

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

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

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

/*
 * The cross-document (MPA) opt-in `@view-transition { navigation: auto }` is declared per-layout
 * (layout/theme.liquid and layout/password.liquid), because this stylesheet is shared by both layouts
 * and a static stylesheet can't read theme settings.
 * It is gated on the same `settings.page_transition_enabled or settings.transition_to_main_product` condition as the
 * render blocker, so the opt-in and its opt-out switch can never disagree. The rules below only
 * take effect once an `@view-transition` opt-in is active, so they are inert without it.
 */
@media (prefers-reduced-motion: no-preference) {
  /* 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);
  background-color: var(--color-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;
}

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

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

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

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

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

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

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

@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 {
  color: currentcolor;
  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 {
  color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / 0.7);
}

/* 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: currentcolor;
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / 0.7);
  }
}

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

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

/* Buttons */
.button,
.button-secondary,
.button-custom,
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-focus-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: rgb(var(--color-input-text-rgb) / var(--opacity-muted-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-focus-outline-color: var(--color-primary-button-focus-outline);
}

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

.button-custom {
  --button-color: var(--color-primary-button-text, #fff);
  --button-background-color: var(--color-primary-button-background, transparent);
  --button-hover-background-color: #fff;
  --button-border-color: var(--color-primary-button-border, #fff);
  --button-border-width: 2.8px;
  --button-focus-outline-color: var(--color-primary-button-focus-outline);

  font-family: var(--button-font-family-primary);
  text-transform: var(--button-text-case-primary);
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  letter-spacing: 0.04em;
  padding-block: 0.85rem !important;
  padding-inline: 2.25rem !important;
  
  /* More rounded corners and base setup */
  border-radius: 50px !important;
  outline-color: var(--button-focus-outline-color, var(--button-background-color));
  box-shadow: inset 0 0 0 var(--button-border-width, 2.8px) var(--button-border-color) !important;
  
  position: relative;
  overflow: hidden;
  background: transparent !important;
  z-index: 1;
  transition: color 0.3s ease !important;
}

/* Original background color layer */
.button-custom::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--button-background-color);
  z-index: -2;
  border-radius: inherit;
}

/* The curved wave fill element */
.button-custom::before {
  content: '';
  position: absolute;
  left: -10%;
  width: 120%;
  top: 0;
  bottom: auto;
  height: 0;
  background: var(--button-hover-background-color, #fff) !important;
  border-radius: 0 0 50% 50%;
  transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
}

.button-custom:hover::before {
  top: auto;
  bottom: 0;
  height: 200%;
  border-radius: 50% 50% 0 0;
}

.button-custom:hover {
  --button-color: #000 !important;
  color: #000 !important;
  /* Keep the original border color on hover so the wave remains internal */
  --button-border-color: var(--color-primary-button-border, #fff);
}

/* 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: var(--color-foreground);
  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;
}

/* Default hover dim for link-style buttons, scoped via :where() so component-specific
   hover rules (.facets__clear-all-link, .header-actions__action, etc.) still win. */
:where(.button-unstyled):hover {
  --hover-color-rgb: var(--color-foreground-rgb);

  color: rgb(var(--hover-color-rgb) / var(--opacity-70));
}

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

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

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

summary:hover {
  color: rgb(var(--color-foreground-rgb) / var(--opacity-80));
}

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

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

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

.shopify-block:has(> [shopify-block-empty]) {
  display: none;
}

.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:focus {
  box-shadow: var(--input-box-shadow-focus);
}

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

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

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

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

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

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

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

.group-block:has(> video-background-component) {
  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);
}

/* Global Modern Scrollbar Styles */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

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

::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.22);
  border-radius: 9999px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background-color 0.25s ease;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.45);
}

::-webkit-scrollbar-thumb:active {
  background-color: rgba(255, 255, 255, 0.65);
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* ==========================================================================
   Hero to Navbar Logo Scroll Transition (Desktop Only)
   ========================================================================== */
@media screen and (max-width: 749px) {
  .hero__floating-logo-wrapper {
    display: none !important;
  }
}

@media screen and (min-width: 750px) {
  html:has(#HeroFloatingLogo):not(.scrolled-past-hero-logo) .header-logo,
  body:has(#HeroFloatingLogo):not(.scrolled-past-hero-logo) .header-logo {
    opacity: 0;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none;
    visibility: hidden;
    transform: translateY(-15px) scale(0.85);
  }

  html:has(#HeroFloatingLogo) .header-logo,
  body:has(#HeroFloatingLogo) .header-logo {
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                max-width 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                width 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.35s !important;
    will-change: opacity, transform, width;
  }

  html.scrolled-past-hero-logo .header-logo,
  body.scrolled-past-hero-logo .header-logo {
    opacity: 1 !important;
    width: auto !important;
    min-width: auto !important;
    max-width: 300px !important;
    transform: translateY(0) scale(1) !important;
    pointer-events: auto !important;
    visibility: visible !important;
  }

  /* Shift navbar menu options to the left when logo is not in navbar */
  html:has(#HeroFloatingLogo):not(.scrolled-past-hero-logo) .header__columns {
    --header-left: 0px !important;
    --header-center: 1fr !important;
    --header-right: auto !important;
    grid-template-columns: 0px 1fr auto !important;
    transition: grid-template-columns 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }

  html:has(#HeroFloatingLogo):not(.scrolled-past-hero-logo) .header__column--left {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  html:has(#HeroFloatingLogo):not(.scrolled-past-hero-logo) .header__column--center {
    justify-content: flex-start !important;
    transition: justify-content 0.4s ease;
  }

  html:has(#HeroFloatingLogo):not(.scrolled-past-hero-logo) .header-menu .overflow-menu::part(list),
  html:has(#HeroFloatingLogo):not(.scrolled-past-hero-logo) .header-menu .menu-list,
  html:has(#HeroFloatingLogo):not(.scrolled-past-hero-logo) .header-menu {
    justify-content: flex-start !important;
    --overflow-list-alignment: flex-start !important;
  }

  /* Prevent navbar from turning solid on hover when NO dropdown is open */
  html:not(.scrolled-past-hero-logo) .header[transparent]:hover:not(:has([aria-expanded='true'])),
  html:not(.scrolled-past-hero-logo) .header[transparent]:focus-within:not(:has([aria-expanded='true'])),
  html:has(#HeroFloatingLogo):not(.scrolled-past-hero-logo) .header:hover:not(:has([aria-expanded='true'])),
  html:has(#HeroFloatingLogo):not(.scrolled-past-hero-logo) .header:focus-within:not(:has([aria-expanded='true'])),
  html:has(#HeroFloatingLogo):not(.scrolled-past-hero-logo) [data-transparent-background]:hover:not(:has([aria-expanded='true'])),
  html:has(#HeroFloatingLogo):not(.scrolled-past-hero-logo) [data-transparent-background]:focus-within:not(:has([aria-expanded='true'])) {
    --closed-underlay-height: 0px !important;
    --color-background-top-row: transparent !important;
    --color-background-bottom-row: transparent !important;
  }

  /* Underlays must never intercept pointer events — prevents dropdown auto-close */
  .header__underlay-closed,
  .header__underlay-open {
    pointer-events: none !important;
  }

  /* When dropdown IS open: solid black navbar */
  html:not(.scrolled-past-hero-logo) .header[transparent]:has([aria-expanded='true']),
  html:has(#HeroFloatingLogo):not(.scrolled-past-hero-logo) .header:has([aria-expanded='true']) {
    --color-background-top-row: #000000 !important;
    --color-background-bottom-row: #000000 !important;
  }

  html:not(.scrolled-past-hero-logo) .header[transparent]:has([aria-expanded='true']) .header__underlay-closed,
  html:not(.scrolled-past-hero-logo) .header[transparent]:has([aria-expanded='true']) .header__underlay-open,
  html:has(#HeroFloatingLogo):not(.scrolled-past-hero-logo) .header:has([aria-expanded='true']) .header__underlay-closed,
  html:has(#HeroFloatingLogo):not(.scrolled-past-hero-logo) .header:has([aria-expanded='true']) .header__underlay-open {
    background-color: #000000 !important;
    background: #000000 !important;
    opacity: 1 !important;
    pointer-events: none !important;
  }

  html:not(.scrolled-past-hero-logo) .header[transparent]:has([aria-expanded='true']) .header__row,
  html:has(#HeroFloatingLogo):not(.scrolled-past-hero-logo) .header[transparent]:has([aria-expanded='true']) .header__row {
    --color-foreground: #ffffff !important;
    --color-foreground-rgb: 255, 255, 255 !important;
    background-color: #000000 !important;
    background: #000000 !important;
  }

  /* When dropdown is CLOSED: underlay stays transparent */
  html:not(.scrolled-past-hero-logo) .header[transparent]:hover:not(:has([aria-expanded='true'])) .header__underlay-closed,
  html:not(.scrolled-past-hero-logo) .header[transparent]:hover:not(:has([aria-expanded='true'])) .header__underlay-open,
  html:has(#HeroFloatingLogo):not(.scrolled-past-hero-logo) .header:hover:not(:has([aria-expanded='true'])) .header__underlay-closed,
  html:has(#HeroFloatingLogo):not(.scrolled-past-hero-logo) .header:hover:not(:has([aria-expanded='true'])) .header__underlay-open {
    background-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  html:not(.scrolled-past-hero-logo) .header[transparent]:hover:not(:has([aria-expanded='true'])) .header__row,
  html:has(#HeroFloatingLogo):not(.scrolled-past-hero-logo) .header[transparent]:hover:not(:has([aria-expanded='true'])) .header__row {
    --color-foreground: var(--color-transparent-text, #ffffff) !important;
    --color-foreground-rgb: var(--color-transparent-text-rgb, 255, 255, 255) !important;
    --color-border: var(--color-transparent-text, #ffffff) !important;
    --color-border-rgb: var(--color-transparent-text-rgb, 255, 255, 255) !important;
    background-color: transparent !important;
    background: transparent !important;
  }

  /* Menu Options: Semi-bold / Refined font by default */
  .menu-list__link,
  .menu-list__link-title,
  .menu-list__item {
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
  }

  .menu-list__link-title {
    display: flex;
    align-items: center;
    gap: var(--gap-xs, 4px);
    padding: 8px 18px !important;
    border-radius: 50px !important;
    position: relative;
    font-weight: 600 !important;
    box-shadow: none !important;
    transition: background-color 0.2s ease,
                color 0.2s ease !important;
  }

  /* Flat, simple, and professional deep red capsule with white text on hover */
  .menu-list__link:hover .menu-list__link-title,
  .menu-list__link:focus-visible .menu-list__link-title {
    background-color: #800000 !important;
    color: #ffffff !important;
    box-shadow: none !important;
  }

  .menu-list__link:hover,
  .menu-list__link:hover .menu-list__link-title *,
  .menu-list__link:hover .menu-list__disclosure-icon {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
  }

  /* Navbar action icons (Search, Account, Cart, Mobile Menu): Cursor pointer only, no hover background/pill, no color changes */
  .header-actions__action,
  .search-action,
  .search-action button,
  .search-action .header-actions__action,
  search-button,
  search-button button,
  .account-button,
  .account-button shopify-account,
  .account-button shopify-account *,
  .header-actions__cart-icon,
  cart-icon,
  .header__icon--menu,
  .header__icon--summary {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
    cursor: pointer !important;
    transition: none !important;
  }

  .header-actions__action:hover,
  .header-actions__action:focus-visible,
  .search-action:hover,
  .search-action button:hover,
  .search-action .header-actions__action:hover,
  search-button:hover,
  search-button button:hover,
  .account-button:hover,
  .account-button shopify-account:hover,
  .account-button shopify-account *:hover,
  .header-actions__cart-icon:hover,
  cart-icon:hover,
  .header__icon--menu:hover,
  .header__icon--summary:hover {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transform: none !important;
  }

  .header-actions__action:hover svg,
  .header-actions__action:hover .svg-wrapper,
  .search-action:hover svg,
  .search-action:hover .svg-wrapper,
  search-button:hover svg,
  search-button:hover .svg-wrapper,
  .account-button:hover svg,
  .account-button:hover .svg-wrapper,
  .account-button:hover .account-button__icon,
  .account-button:hover .account-button__text,
  .header-actions__cart-icon:hover svg,
  .header-actions__cart-icon:hover .svg-wrapper,
  .header__icon--menu:hover svg,
  .header__icon--menu:hover .svg-wrapper,
  .header-drawer-icon:hover {
    cursor: pointer !important;
    transform: none !important;
  }

  /* Navbar action icons: 20% smaller (1.2x instead of 1.5x) */
  .header-actions__action svg,
  .header-actions__action .svg-wrapper svg,
  .search-action svg,
  .search-action .svg-wrapper svg,
  search-button svg,
  search-button .svg-wrapper svg,
  .account-button svg,
  .account-button .account-button__icon,
  .account-button shopify-account svg,
  .header-actions__cart-icon svg,
  .header-actions__cart-icon .svg-wrapper svg,
  cart-icon svg,
  .announcement-bar__search svg,
  .announcement-bar__search .svg-wrapper svg {
    width: calc(var(--icon-size-md, 1.375rem) * 1.2) !important;
    height: calc(var(--icon-size-md, 1.375rem) * 1.2) !important;
  }

  .header__icon--menu svg,
  .header__icon--summary svg,
  .header-drawer-icon,
  .header-drawer-icon svg {
    width: calc(var(--icon-size-xs, 0.85rem) * 1.2) !important;
    height: calc(var(--icon-size-xs, 0.85rem) * 1.2) !important;
  }

  /* Navbar action icons: Equal spacing and centered alignment */
  header-actions {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 16px !important;
  }

  @media screen and (max-width: 749px) {
    header-actions {
      gap: 12px !important;
    }
  }

  header-actions .search-action,
  header-actions .search-action button,
  header-actions search-button,
  header-actions search-button button,
  header-actions .account-button,
  header-actions shopify-account,
  header-actions .header-actions__action,
  header-actions .action__cart,
  header-actions .header-actions__cart-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .header__column--right header-actions {
    margin-inline-start: 0 !important;
  }

  .search-action,
  .header__column--right .search-action,
  .header__column--left .search-action {
    margin: 0 !important;
    margin-inline: 0 !important;
  }

  /* Remove all borders from submenus, dropdowns, and mega menus */
  .menu-list__submenu,
  .menu-list__submenu--dropdown,
  .menu-list__submenu-inner,
  .mega-menu,
  .mega-menu.section {
    border: none !important;
    outline: none !important;
  }

  /* Dropdown & submenu items on Hover: Red background with clean white text */
  .menu-list__submenu .mega-menu__link:hover,
  .menu-list__submenu .mega-menu__link:focus-visible,
  .menu-list__submenu--dropdown .mega-menu__link:hover,
  .menu-list__submenu--dropdown .mega-menu__link:focus-visible,
  .menu-list__submenu a:hover,
  .menu-list__submenu a:focus-visible {
    background-color: #800000 !important;
    color: #ffffff !important;
    box-shadow: none !important;
  }
}

/* Navbar dimensions: 1918px width and 119px height (Desktop) */
@media screen and (min-width: 750px) {
  :root,
  body {
    --header-height: 119px !important;
    --header-group-height: 119px !important;
    --top-row-height: 119px !important;
  }

  #header-component,
  .header,
  .header__row,
  .header__row--top,
  .header__row--bottom,
  .header__underlay,
  .header__underlay-closed,
  .header__underlay-open {
    border-radius: 0 !important;
  }

  #header-component,
  .header,
  .header__row,
  .header__row--top {
    width: 100% !important;
    max-width: 1918px !important;
    height: 119px !important;
    min-height: 119px !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
    padding-inline: 0 !important;
  }

  .header .header__row,
  .header-section .header__row {
    --page-margin: 20px !important;
    padding-inline: 0 !important;
  }

  .header__columns,
  .header .header__columns,
  .header-section .header__columns {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 1918px !important;
    height: 100% !important;
    min-height: 119px !important;
    margin-inline: auto !important;
    align-items: center !important;
    box-sizing: border-box !important;
    padding-block: 0 !important;
    padding-inline: 20px !important;
  }

  .header__underlay {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 1918px !important;
    margin-inline: auto !important;
  }
}

@media screen and (max-width: 749px) {
  .header .header__columns,
  .header-section .header__columns {
    grid-column: 1 / -1 !important;
    padding-inline: 12px !important;
  }
}

/* Mobile Bottom Navigation Bar (Phone only) */
.mobile-bottom-nav {
  display: none;
}

@media screen and (max-width: 749px) {
  .mobile-bottom-nav {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    background-color: #ffffff !important;
    background: #ffffff !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: none !important;
    z-index: 99999 !important;
    align-items: center !important;
    justify-content: space-around !important;
    box-sizing: border-box !important;
    user-select: none !important;
    -webkit-user-select: none !important;
  }

  .mobile-bottom-nav__item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 !important;
    height: 100% !important;
    min-height: 52px !important;
    padding: 6px 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    color: #333333 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    gap: 4px !important;
    transition: color 0.15s ease !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .mobile-bottom-nav__item:active,
  .mobile-bottom-nav__item:focus-visible,
  .mobile-bottom-nav__item--active {
    color: #800000 !important;
  }

  .mobile-bottom-nav__icon-wrapper {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 26px !important;
    height: 26px !important;
  }

  .mobile-bottom-nav__icon {
    width: 24px !important;
    height: 24px !important;
    stroke: currentColor !important;
    fill: none !important;
    display: block !important;
  }

  .mobile-bottom-nav__label {
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    letter-spacing: 0.01em !important;
    color: inherit !important;
    font-family: inherit !important;
  }

  .mobile-bottom-nav__badge {
    position: absolute !important;
    top: -4px !important;
    right: -8px !important;
    background-color: #800000 !important;
    color: #ffffff !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    min-width: 16px !important;
    height: 16px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 4px !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
  }

  .mobile-bottom-nav__badge.hidden {
    display: none !important;
  }

  /* Mobile Menu Bottom Sheet (Shop All & Navigation) */
  .mobile-sheet-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 99998;
    opacity: 0;
    transition: opacity 0.25s ease;
  }

  .mobile-sheet-backdrop.active {
    display: block !important;
    opacity: 1;
  }

  .mobile-bottom-sheet {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-height: 85dvh;
    background: #ffffff;
    border-radius: 24px 24px 0 0;
    box-shadow: none !important;
    z-index: 99999;
    flex-direction: column;
    box-sizing: border-box;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
  }

  .mobile-bottom-sheet.active {
    display: flex !important;
    transform: translateY(0);
  }

  .mobile-bottom-sheet__handle {
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: #e0e0e0;
    margin: 10px auto 4px;
    flex-shrink: 0;
  }

  .mobile-bottom-sheet__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px 14px;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
  }

  .mobile-bottom-sheet__title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: #111;
  }

  .mobile-bottom-sheet__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid #e5e5e5;
    color: #111111;
    cursor: pointer;
    padding: 0;
    transition: all 0.2s ease;
  }

  .mobile-bottom-sheet__close:active {
    background: #f4f4f4;
    transform: scale(0.95);
  }

  .mobile-bottom-sheet__content {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px calc(24px + env(safe-area-inset-bottom, 0px));
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .mobile-shop-all-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: #800000;
    color: #ffffff !important;
    border-radius: 14px;
    text-decoration: none;
    box-shadow: none !important;
    margin-bottom: 6px;
  }

  .mobile-shop-all-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    flex-shrink: 0;
  }

  .mobile-shop-all-card__text {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .mobile-shop-all-card__title {
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
  }

  .mobile-shop-all-card__sub {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 2px;
  }

  .mobile-shop-all-card__arrow {
    color: #ffffff;
  }

  .mobile-menu-section-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #888;
    margin-top: 8px;
    margin-bottom: 2px;
  }

  .mobile-collections-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .mobile-collection-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: #f8f8f8;
    border-radius: 12px;
    text-decoration: none;
    color: #111 !important;
    font-weight: 600;
    font-size: 0.95rem;
    transition: background 0.15s ease, transform 0.1s ease;
  }

  .mobile-collection-row:active {
    background: #eee;
    transform: scale(0.99);
  }

  .mobile-collection-row--all {
    background: #800000 !important;
    color: #ffffff !important;
    box-shadow: none !important;
  }

  .mobile-collection-row--all .mobile-collection-row__title,
  .mobile-collection-row--all .mobile-collection-row__count,
  .mobile-collection-row--all .mobile-collection-row__arrow {
    color: #ffffff !important;
  }

  .mobile-collection-row__image {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    background: #eaeaea;
  }

  .mobile-collection-row__image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #e8e8e8;
    color: #555;
    flex-shrink: 0;
  }

  .mobile-collection-row__image-placeholder--all {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
  }

  .mobile-collection-row__title {
    flex: 1;
    font-size: 0.95rem;
    font-weight: 600;
    color: inherit;
  }

  .mobile-collection-row__count {
    font-size: 0.8rem;
    font-weight: 500;
    color: #777;
    flex-shrink: 0;
  }

  .mobile-collection-row__arrow {
    color: #999;
    flex-shrink: 0;
  }

  /* Mobile Menu Footer: Currency Selector & Social Icons */
  .mobile-menu-footer {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #f0f0f0;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .mobile-menu-footer-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #888888;
    margin-bottom: 6px;
    display: block;
  }

  .mobile-menu-currency {
    position: relative;
    width: 100%;
  }

  .mobile-currency-pill {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: #1e1e1e !important;
    border: 1px solid #333333 !important;
    border-radius: 50px !important;
    padding: 10px 16px !important;
    color: #ffffff !important;
    font-size: 0.86rem !important;
    font-weight: 500 !important;
    width: 100% !important;
    cursor: pointer !important;
    text-align: left !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s ease, background 0.2s ease !important;
  }

  .mobile-currency-pill:hover,
  .mobile-currency-pill:active {
    background: #282828 !important;
    border-color: #555555 !important;
  }

  .mobile-currency-flag {
    width: 22px !important;
    height: 16px !important;
    border-radius: 3px !important;
    background-size: cover !important;
    background-position: center !important;
    flex-shrink: 0 !important;
  }

  .mobile-currency-text {
    flex: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .mobile-currency-caret {
    flex-shrink: 0 !important;
    stroke: #aaaaaa !important;
  }

  .mobile-currency-popover {
    position: absolute !important;
    bottom: calc(100% + 8px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: #181818 !important;
    border: 1px solid #333333 !important;
    border-radius: 16px !important;
    padding: 14px !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6) !important;
    z-index: 1000 !important;
    box-sizing: border-box !important;
    backdrop-filter: blur(12px) !important;
  }

  .mobile-currency-popover[hidden] {
    display: none !important;
  }

  .mobile-currency-popover__header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 10px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid #282828 !important;
  }

  .mobile-currency-popover__title {
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    letter-spacing: 0.02em !important;
  }

  .mobile-currency-popover__close {
    background: transparent !important;
    border: none !important;
    color: #888888 !important;
    cursor: pointer !important;
    padding: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
  }

  .mobile-currency-popover__close:hover {
    color: #ffffff !important;
    background: #2a2a2a !important;
  }

  .mobile-currency-popover__search {
    margin-bottom: 10px !important;
  }

  .mobile-currency-popover__search-input {
    width: 100% !important;
    background: #242424 !important;
    border: 1px solid #383838 !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    font-size: 0.84rem !important;
    padding: 8px 12px !important;
    box-sizing: border-box !important;
    outline: none !important;
  }

  .mobile-currency-popover__search-input:focus {
    border-color: #666666 !important;
  }

  .mobile-currency-country-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    max-height: 200px !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
  }

  .mobile-currency-country-list::-webkit-scrollbar {
    width: 4px !important;
  }

  .mobile-currency-country-list::-webkit-scrollbar-thumb {
    background: #383838 !important;
    border-radius: 4px !important;
  }

  .mobile-currency-country-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 9px 12px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-size: 0.85rem !important;
    color: #d1d1d1 !important;
    transition: background 0.15s ease, color 0.15s ease !important;
  }

  .mobile-currency-country-item:hover {
    background: #262626 !important;
    color: #ffffff !important;
  }

  .mobile-currency-country-item.is-active {
    background: #303030 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
  }

  .mobile-currency-country-flag {
    width: 20px !important;
    height: 14px !important;
    background-size: cover !important;
    background-position: center !important;
    border-radius: 2px !important;
    flex-shrink: 0 !important;
  }

  .mobile-currency-country-name {
    flex: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: left !important;
  }

  .mobile-currency-country-currency {
    color: #888888 !important;
    font-size: 0.8rem !important;
    margin-left: auto !important;
  }

  .mobile-currency-check-icon {
    margin-left: 6px !important;
    flex-shrink: 0 !important;
  }

  .mobile-menu-socials {
    display: flex;
    flex-direction: column;
  }

  .mobile-social-icons-row {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .mobile-social-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f8f8f8;
    color: #111111;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
  }

  .mobile-social-icon-btn:active {
    background: #111111;
    color: #ffffff;
  }

  /* Mobile Cart Bottom Sheet (Down Menu) */
  #cart-drawer.theme-drawer .theme-drawer__dialog,
  .theme-drawer__dialog {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 85dvh !important;
    min-height: 50dvh !important;
    border-radius: 24px 24px 0 0 !important;
    border: none !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: none !important;
    transform: translateY(100%);
    animation: none !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    z-index: 100000 !important;
  }

  #cart-drawer.theme-drawer .theme-drawer__dialog[open],
  .theme-drawer__dialog[open] {
    transform: translateY(0) !important;
    display: flex !important;
  }

  .theme-drawer__dialog--closing {
    transform: translateY(100%) !important;
  }

  .theme-drawer__dialog .cart-drawer__inner {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    max-height: 85dvh !important;
    overflow: hidden !important;
  }

  .theme-drawer__dialog .cart-drawer__content {
    flex: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Mobile Search Bottom Sheet (Down Menu) */
  #search-modal .dialog-modal {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 85dvh !important;
    min-height: 55dvh !important;
    border-radius: 24px 24px 0 0 !important;
    border: none !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: none !important;
    transform: translateY(100%);
    animation: mobileBottomSheetSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
    padding: 16px 20px !important;
    z-index: 100000 !important;
  }

  #search-modal .dialog-modal.dialog-closing {
    animation: mobileBottomSheetSlideOut 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  }

  /* Remove top navbar on phone */
  #header-component {
    display: block !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: none !important;
    overflow: visible !important;
  }

  #header-component > .header__row,
  #header-component > .header__underlay,
  #header-component > h1.visually-hidden {
    display: none !important;
  }

  #header-component .header-drawer,
  #header-component details#Details-menu-drawer-container,
  #header-component .menu-drawer {
    pointer-events: auto !important;
  }

  /* Body safe padding on mobile */
  body {
    --header-height: 0px !important;
    --header-group-height: 0px !important;
    --top-row-height: 0px !important;
    padding-bottom: calc(65px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .hero__content-wrapper {
    padding-top: 2rem !important;
  }
}

@keyframes mobileBottomSheetSlideIn {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes mobileBottomSheetSlideOut {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
}

.hero__floating-logo-wrapper,
.hero__floating-logo-link {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  filter: none !important;
  outline: none !important;
}

@media screen and (min-width: 750px) {
  .hero__floating-logo-img {
    display: block;
    width: calc(var(--hero-logo-scale, 20) * 1%) !important;
    max-width: min(calc(var(--hero-logo-scale, 20) * 1%), 1397px) !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: contain !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    filter: none !important;
    outline: none !important;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: high-quality;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
  }
}

/* ═══════════════════════════════════════════════════════════════
   DESKTOP CART SIDE DRAWER — Curved Rounded Edges
   ═══════════════════════════════════════════════════════════════ */
@media screen and (min-width: 750px) {
  #cart-drawer .theme-drawer__dialog {
    position: fixed !important;
    inset: 0 0 0 auto !important;
    width: 480px !important;
    max-width: 90vw !important;
    height: 100dvh !important;
    background: #ffffff !important;
    color: #111111 !important;
    border: none !important;
    border-left: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 32px 0 0 32px !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    transform: translateX(100%) !important;
    transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1) !important;
    overflow: hidden !important;
    z-index: 2147483647 !important;
    box-sizing: border-box !important;
    padding: 0 !important;
  }

  #cart-drawer .theme-drawer__dialog[open] {
    transform: translateX(0) !important;
    display: flex !important;
  }

  #cart-drawer .theme-drawer__dialog--closing {
    transform: translateX(100%) !important;
  }

  #cart-drawer .cart-drawer__inner {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow: hidden !important;
    background: #ffffff !important;
    border-radius: 32px 0 0 32px !important;
  }

  /* Header */
  #cart-drawer .theme-drawer__header {
    position: sticky !important;
    top: 0 !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 1.75rem 2rem 1.5rem !important;
    border-bottom: 1px solid #f0f0f0 !important;
    background: #ffffff !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
    z-index: 100 !important;
    border-top-left-radius: 32px !important;
  }

  #cart-drawer .cart-drawer__tabs-group {
    display: flex !important;
    align-items: center !important;
    gap: 1.5rem !important;
  }

  #cart-drawer .cart-drawer__tab--active {
    font-size: 1.65rem !important;
    font-weight: 800 !important;
    color: #111111 !important;
    letter-spacing: -0.02em !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  #cart-drawer .theme-drawer__badge {
    background: #800000 !important;
    color: #ffffff !important;
    border-radius: 9999px !important;
    font-weight: 700 !important;
    font-size: 0.8rem !important;
    padding: 2px 8px !important;
    min-width: 22px !important;
    height: 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Round Outline Close Button */
  #cart-drawer .theme-drawer__close-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: transparent !important;
    border: 1px solid #e5e5e5 !important;
    color: #111111 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    padding: 0 !important;
  }

  #cart-drawer .theme-drawer__close-button:hover {
    background: #f7f7f7 !important;
    border-color: #111111 !important;
    color: #000000 !important;
    transform: scale(1.04) !important;
  }

  #cart-drawer .theme-drawer__close-button svg {
    width: 13px !important;
    height: 13px !important;
  }

  /* Content & Items */
  #cart-drawer .cart-drawer__content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    background: #ffffff !important;
  }

  #cart-drawer .cart-drawer__items {
    padding: 1.25rem 1.75rem !important;
    overflow-y: auto !important;
    flex: 1 !important;
  }

  #cart-drawer .cart-drawer__summary {
    position: sticky !important;
    bottom: 0 !important;
    background: #ffffff !important;
    border-top: 1px solid #f0f0f0 !important;
    padding: 1.25rem 1.75rem 1.75rem !important;
    border-bottom-left-radius: 32px !important;
    box-shadow: none !important;
    z-index: 10 !important;
    mask-image: none !important;
  }

  /* Empty State */
  #cart-drawer .cart-drawer__content--empty-state {
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    min-height: 480px !important;
  }

  #cart-drawer .cart-drawer-empty__container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    max-width: 380px !important;
    margin: auto !important;
    padding: 2.5rem 1.5rem !important;
  }

  #cart-drawer .cart-drawer-empty__title {
    font-size: 2.25rem !important;
    font-weight: 800 !important;
    color: #111111 !important;
    line-height: 1.15 !important;
    margin: 0 0 1.25rem !important;
    letter-spacing: -0.03em !important;
  }

  #cart-drawer .cart-drawer-empty__subtitle {
    font-size: 0.95rem !important;
    color: #333333 !important;
    line-height: 1.45 !important;
    margin: 0 0 2.25rem !important;
  }

  #cart-drawer .cart-drawer-empty__quick-links {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 320px !important;
  }

  #cart-drawer .cart-drawer-empty__btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 16px 28px !important;
    background: #111111 !important;
    color: #ffffff !important;
    border-radius: 9999px !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    text-decoration: none !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: none !important;
    border: 1px solid #111111 !important;
    cursor: pointer !important;
  }

  #cart-drawer .cart-drawer-empty__btn:hover {
    background: #2a2a2a !important;
    border-color: #2a2a2a !important;
    transform: translateY(-2px) !important;
    box-shadow: none !important;
  }

  #cart-drawer .cart-drawer-empty__btn:active {
    transform: translateY(0) !important;
    box-shadow: none !important;
  }

  /* Backdrop */
  #cart-drawer .theme-drawer__dialog::backdrop {
    background: rgba(0, 0, 0, 0.55) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
  }
}

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

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

/* When the header is transparent, and when there is no header-section below it, offset the first main-section with
 * the height of the header
 */
main > .shopify-section:first-child .section:not(.disable-section-top-offset) {
  &.spacing-style,
  .spacing-style {
    --section-top-offset: calc(var(--header-height) * var(--transparent-header-offset-boolean));

    /* Any nested sections should not be offset */
    :is(.spacing-style, .inherit-spacing) {
      --section-top-offset: 0px;
    }
  }

  /* Make sticky content immediately stick to the top of the page */
  .sticky-content {
    margin-top: calc(var(--header-height) * var(--transparent-header-offset-boolean) * -1);
  }
}

/* Support negative spacing & offsets for text blocks, headings, and jumbo text */
.text-block.spacing-style,
.text-block,
jumbo-text,
.jumbo-text,
.jumbo-text-line {
  padding-block-start: max(0px, var(--padding-block-start, 0px));
  padding-block-end: max(0px, var(--padding-block-end, 0px));
  padding-inline-start: max(0px, var(--padding-inline-start, 0px));
  padding-inline-end: max(0px, var(--padding-inline-end, 0px));

  margin-block-start: min(0px, var(--padding-block-start, 0px));
  margin-block-end: min(0px, var(--padding-block-end, 0px));
  margin-inline-start: min(0px, var(--padding-inline-start, 0px));
  margin-inline-end: min(0px, var(--padding-inline-end, 0px));
}

/* Shop Now & Hero CTA Button — Clean, Minimalist & Professional with Wave Animation */
.hero .button,
.hero .button-custom,
.hero .button--primary,
.hero .button--secondary {
  background: #800000 !important;
  background-color: #800000 !important;
  color: #ffffff !important; /* Pure white text for crisp, clear readability */
  border: 1px solid #800000 !important;
  border-radius: 50px !important;
  padding: 0.95rem 2.85rem !important;
  min-height: 56px !important;
  font-weight: 500 !important; /* Normal, not bold */
  font-size: 1.2rem !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important; /* Not all uppercase */
  box-shadow: none !important;
  filter: none !important;
  outline: none !important;
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  z-index: 1;
  transition: color 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Base background layer */
.hero .button::after,
.hero .button-custom::after,
.hero .button--primary::after,
.hero .button--secondary::after {
  content: '' !important;
  display: block !important;
  position: absolute;
  inset: 0;
  background: #800000 !important;
  z-index: -2;
  border-radius: inherit;
}

/* Curved wave fill element — identical duration for both appearance and disappearance */
.hero .button::before,
.hero .button-custom::before,
.hero .button--primary::before,
.hero .button--secondary::before {
  content: '' !important;
  display: block !important;
  position: absolute;
  left: -10%;
  width: 120%;
  top: 0;
  bottom: auto;
  height: 0;
  background: #141414 !important;
  border-radius: 0 0 50% 50%;
  transition: height 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
  pointer-events: none;
}

/* Wave rises from bottom on hover */
.hero .button:hover::before,
.hero .button-custom:hover::before,
.hero .button--primary:hover::before,
.hero .button--secondary:hover::before {
  top: auto;
  bottom: 0;
  height: 220%;
  border-radius: 50% 50% 0 0;
  transition: height 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover text & border — crisp white on dark wave */
.hero .button:hover,
.hero .button-custom:hover,
.hero .button--primary:hover,
.hero .button--secondary:hover {
  color: #ffffff !important;
  border: 1px solid #a81c1c !important;
  border-color: #a81c1c !important;
  box-shadow: none !important;
  filter: none !important;
  transition: color 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ═══════════════════════════════════════════════════════════════
   PREMIUM COLLECTION PAGE & VERTICAL FILTERS (ALPHALETE / GYMSHARK STYLE)
   ═══════════════════════════════════════════════════════════════ */

/* Top Controls Bar (Full width flex) */
.facets-controls-wrapper.facets-top-bar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  grid-column: 1 / -1 !important;
  padding: 1rem 0 !important;
  margin-bottom: 1.5rem !important;
  border-bottom: 1px solid #f0f0f0;
}

.facets-top-bar__left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.facets-top-bar__right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* "Hide filters" / "Show filters" Pill Button */
.facets-toggle-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #ffffff !important;
  color: #111111 !important;
  border: 1.5px solid #111111 !important;
  border-radius: 9999px !important;
  padding: 0.55rem 1.35rem !important;
  font-size: 0.92rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: none !important;
  line-height: 1 !important;
}

.facets-toggle-btn:hover {
  background: #111111 !important;
  color: #ffffff !important;
}

.facets-toggle-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
}

/* "Sort by:" Pill Wrapper */
.facets-sort-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.facets-sort-label {
  font-size: 0.92rem;
  color: #333333;
  font-weight: 400;
}

.sorting-filter {
  display: inline-flex;
  margin: 0 !important;
}

.sorting-pill__summary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  background: #ffffff !important;
  color: #111111 !important;
  border: 1.5px solid #111111 !important;
  border-radius: 9999px !important;
  padding: 0.55rem 1.35rem !important;
  font-size: 0.92rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  list-style: none !important;
  line-height: 1 !important;
}

.sorting-pill__summary::-webkit-details-marker {
  display: none !important;
}

.sorting-pill__selected {
  font-size: 0.92rem;
  font-weight: 500;
}

.sorting-pill__dot {
  font-size: 1.2rem;
  line-height: 0.5;
  color: #111111;
}

/* ── Side Menu Drawer Mode (Overlay over page) ── */
.facets-block-wrapper--vertical:not(#filters-drawer) {
  display: none !important;
}

#filters-drawer .facets-block-wrapper--vertical {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
}

/* "In stock only" iOS-style Switch */
.facets__in-stock-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0.5rem 0 1.25rem 0 !important;
  margin-bottom: 0.5rem !important;
  border-bottom: 1px solid #f0f0f0 !important;
}

.facets__in-stock-title {
  font-size: 0.98rem;
  font-weight: 600;
  color: #111111;
}

.in-stock-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  cursor: pointer;
  user-select: none;
}

.in-stock-switch__input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.in-stock-switch__slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #e5e5e5;
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 24px;
}

.in-stock-switch__slider::before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: #ffffff;
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 50%;
  box-shadow: none !important;
}

.in-stock-switch__input:checked + .in-stock-switch__slider {
  background-color: #111111;
}

.in-stock-switch__input:checked + .in-stock-switch__slider::before {
  transform: translateX(20px);
}

/* Filter Accordion Panels */
.facets-block-wrapper--vertical .facets__panel {
  border-bottom: 1px solid #f0f0f0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.facets-block-wrapper--vertical .facets__summary {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 1.1rem 0 !important;
  font-size: 0.98rem !important;
  font-weight: 600 !important;
  color: #111111 !important;
  cursor: pointer !important;
  list-style: none !important;
  background: transparent !important;
}

.facets-block-wrapper--vertical .facets__summary::-webkit-details-marker {
  display: none !important;
}

.facets-block-wrapper--vertical .facets__panel .facets__inputs-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-bottom: 1.25rem;
  margin: 0;
  list-style: none;
}

/* Clean Checkbox item */
.facets__checkbox-label,
.checkbox__label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 0.92rem !important;
  color: #222222 !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: color 0.15s ease;
}

.facets__checkbox-label:hover,
.checkbox__label:hover {
  color: #000000 !important;
}

.facets__checkbox-input,
.checkbox__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.facets__checkbox-custom,
.checkbox .checkbox__label > svg {
  width: 18px !important;
  height: 18px !important;
  border: 1.5px solid #cccccc !important;
  border-radius: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ffffff !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
}

.facets__checkbox-input:checked + .facets__checkbox-custom,
.checkbox__input:checked + .checkbox__label > svg {
  background: #111111 !important;
  border-color: #111111 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-size: 11px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.facet-count,
.checkbox__count {
  font-size: 0.85rem !important;
  color: #777777 !important;
  font-weight: 400 !important;
  margin-left: 4px !important;
}

/* ── Full Grid Layout with Reduced Side Margins (Matching Reference) ── */
.collection-wrapper,
.collection-wrapper.grid,
.product-grid-container .collection-wrapper,
.main-collection-grid,
.product-grid {
  width: 100% !important;
  max-width: 100% !important;
}

results-list.product-grid-container,
.section.product-grid-container,
collection-component .product-grid-container {
  padding-left: 16px !important;
  padding-right: 16px !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

@media screen and (max-width: 749px) {
  results-list.product-grid-container,
  .section.product-grid-container,
  collection-component .product-grid-container {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

.collection-wrapper {
  grid-template-columns: 1fr !important;
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.main-collection-grid {
  grid-column: 1 / -1 !important;
  width: 100% !important;
}

@media screen and (min-width: 990px) {
  .product-grid--grid,
  .product-grid,
  .main-collection-grid .product-grid {
    --product-grid-columns-desktop: repeat(4, 1fr) !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 60px 14px !important;
  }
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .product-grid--grid,
  .product-grid,
  .main-collection-grid .product-grid {
    --product-grid-columns-desktop: repeat(3, 1fr) !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 50px 12px !important;
  }
}

@media screen and (max-width: 749px) {
  .product-grid--grid,
  .product-grid,
  .main-collection-grid .product-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 48px 10px !important;
  }
}

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

/* ==========================================================================
   LUXURY SLIDE-OVER FILTER SIDE MENU (LEFT DRAWER OVERLAY)
   ========================================================================== */

/* ── Top Bar Container Fixed Layout ── */
.facets-top-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  grid-column: 1 / -1 !important;
  padding: 0.75rem 0 1.25rem 0 !important;
  box-sizing: border-box !important;
  min-height: 52px !important;
}

.facets-top-bar__left,
.facets-top-bar__right {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.facets-sort-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.9rem !important;
  color: #666666 !important;
}

.facets-sort-current {
  font-weight: 700 !important;
  color: #111111 !important;
}

.collection-wrapper {
  min-height: 450px !important;
  width: 100% !important;
}

.main-collection-grid {
  min-height: 350px !important;
  width: 100% !important;
}

/* ── Top Bar Filter Toggle Button ── */
.facets-toggle-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: #ffffff !important;
  color: #111111 !important;
  border: 1.5px solid #111111 !important;
  border-radius: 9999px !important;
  padding: 0.6rem 1.4rem !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: none !important;
  line-height: 1 !important;
  user-select: none !important;
}

.facets-toggle-btn:hover {
  background: #111111 !important;
  color: #ffffff !important;
  transform: none !important;
}

.facets-toggle-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  flex-shrink: 0;
}

.facets-toggle-btn__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9999px;
  background: #111111;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
}

.facets-toggle-btn:hover .facets-toggle-btn__badge {
  background: #ffffff;
  color: #111111;
}

/* ── No Products Found Luxury Empty State ── */
.product-grid__no-results-item {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  list-style: none !important;
  min-height: 380px !important;
  display: none;
  align-items: center;
  justify-content: center;
}

.product-grid__no-results-item.is-visible,
#ProductGridNoResults.is-visible {
  display: flex !important;
}

.product-grid__no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 1.5rem !important;
  margin: 0 auto !important;
  max-width: 500px !important;
  width: 100% !important;
  grid-column: 1 / -1 !important;
}

.product-grid__no-results-icon {
  width: 68px !important;
  height: 68px !important;
  border-radius: 50% !important;
  background: #f5f5f5 !important;
  color: #111111 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 1.5rem !important;
}

.product-grid__no-results-title {
  font-size: 1.45rem !important;
  font-weight: 800 !important;
  color: #111111 !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 0.6rem 0 !important;
  text-transform: uppercase !important;
}

.product-grid__no-results-text {
  font-size: 0.95rem !important;
  color: #666666 !important;
  line-height: 1.5 !important;
  margin: 0 0 1.75rem 0 !important;
}

.product-grid__no-results-clear-btn {
  background: #111111 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 9999px !important;
  padding: 0.85rem 1.75rem !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: background-color 0.2s ease !important;
}

.product-grid__no-results-clear-btn:hover {
  background: #000000 !important;
}

/* ── Product Card Modern Luxury Aesthetics (Exact Reference Match) ── */
.product-card,
.product-card *,
.card-gallery,
.card-gallery * {
  -webkit-transform-style: flat !important;
  transform-style: flat !important;
}

.product-card {
  position: relative !important;
  background: transparent !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  transform: none !important;
}

.product-card:hover,
.product-card:hover *,
.product-card:hover .card-gallery,
.product-card:hover .card-gallery img,
.product-card:hover .product-media,
.product-card:hover .product-media img,
.product-card:hover .product-media-container,
.product-card:hover .product-card__image,
.product-card:hover img,
.card-gallery:hover,
.card-gallery:hover img,
.product-media:hover,
.product-media:hover img {
  transform: none !important;
  -webkit-transform: none !important;
  transition: none !important;
  -webkit-transition: none !important;
  scale: none !important;
}

.product-card .card-gallery,
.product-card .product-media-container {
  position: relative !important;
  border-radius: 18px 18px 0 0 !important;
  overflow: hidden !important;
  background: #B8B8B8 !important;
  aspect-ratio: 4 / 5 !important;
  width: 100% !important;
  transform: none !important;
}

.product-card .card-gallery img,
.product-card .product-media img,
.product-card img {
  border-radius: 18px 18px 0 0 !important;
  object-fit: cover !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  transition: none !important;
}

/* Hide All Product Badges Completely */
.mz-card-badges,
.mz-badge,
.product-badges,
.card-gallery__promo-badge {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Title & Price Row: Title on Left, Price on Right with explicit side breathing room */
/* ═══════════════════════════════════════════════════════════════
   PRODUCT CARD LAYOUT (COLLECTION & CATALOG)
   ═══════════════════════════════════════════════════════════════ */

/* Desktop: Side-by-side title and price */
@media screen and (min-width: 750px) {
  .product-card .product-card__content {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: flex-start !important;
    column-gap: 14px !important;
    row-gap: 10px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  .product-card .product-card__content > :is(.card-gallery, .product-card__gallery, [type="_product-card-gallery"]) {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .product-card .product-card__content > :is(a[ref="productTitleLink"], .product-title, [type="product-title"], a.contents) {
    grid-column: 1 / 2 !important;
    display: block !important;
    text-decoration: none !important;
    min-width: 0 !important;
    align-self: start !important;
    padding-left: 14px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .product-card .product-card__content p[role="heading"],
  .product-card .product-title p,
  .product-card a[ref="productTitleLink"] p {
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    color: #111111 !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    text-align: left !important;
  }

  .product-card .product-card__content > :is(product-price, .product-price, [type="price"]) {
    grid-column: 2 / 3 !important;
    display: block !important;
    text-align: right !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    align-self: start !important;
    padding-right: 14px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .product-card [ref="priceContainer"],
  .product-card .price-container,
  .product-card product-price > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    text-align: right !important;
    line-height: 1.25 !important;
  }

  .product-card .price-item__group.price,
  .product-card .price {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #e53e3e !important;
    white-space: nowrap !important;
    text-align: right !important;
  }

  .product-card .compare-at-price,
  .product-card .price-item--regular {
    font-size: 0.82rem !important;
    font-weight: 400 !important;
    color: #888888 !important;
    text-decoration: line-through !important;
    white-space: nowrap !important;
    text-align: right !important;
    margin-top: 2px !important;
  }
}

/* Mobile: Price appears directly below the Title */
@media screen and (max-width: 749px) {
  .product-card .product-card__content {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  .product-card .product-card__content > :is(.card-gallery, .product-card__gallery, [type="_product-card-gallery"]) {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .product-card .product-card__content > :is(a[ref="productTitleLink"], .product-title, [type="product-title"], a.contents) {
    display: block !important;
    text-decoration: none !important;
    width: 100% !important;
    padding-inline: 6px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .product-card .product-card__content p[role="heading"],
  .product-card .product-title p,
  .product-card a[ref="productTitleLink"] p {
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    color: #111111 !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    text-align: left !important;
  }

  .product-card .product-card__content > :is(product-price, .product-price, [type="price"]) {
    display: block !important;
    width: 100% !important;
    padding-inline: 6px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }

  .product-card [ref="priceContainer"],
  .product-card .price-container,
  .product-card product-price > div {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    text-align: left !important;
    line-height: 1.25 !important;
  }

  .product-card .price-item__group.price,
  .product-card .price {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    color: #e53e3e !important;
    text-align: left !important;
  }

  .product-card .compare-at-price,
  .product-card .price-item--regular {
    font-size: 0.8rem !important;
    font-weight: 400 !important;
    color: #888888 !important;
    text-decoration: line-through !important;
    text-align: left !important;
    margin-top: 0 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   PRODUCT PAGE PREMIUM REDESIGN (MATCHING REFERENCE SCREENSHOTS)
   ═══════════════════════════════════════════════════════════════ */

/* Product Title & Price Header styles are consolidated in the unified section below (see PRODUCT DETAILS: BALANCED TITLE + PRICE) */

/* "Find My Size" Pill Button & Modal */
/* "Find My Size" Pill Button & Modal — Clean, No-Hover, Ultra-Professional Infinite Pulse */
.find-my-size-wrapper {
  margin: 0.75rem 0 1.25rem 0 !important;
  display: block !important;
}

.find-my-size-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ffffff !important;
  color: #111111 !important;
  border: 1.8px solid #000000 !important;
  border-radius: 9999px !important;
  padding: 0.85rem 2.5rem !important;
  min-height: 52px !important;
  font-size: 1.05rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  line-height: 1.2 !important;
  letter-spacing: 0.01em !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  position: relative !important;
  outline: none !important;
  transform-origin: center center !important;
  animation: findMySizeBreath 2.6s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
  will-change: transform, box-shadow !important;
}

/* Luxury radar ping beacon ring */
.find-my-size-btn::after {
  content: '' !important;
  position: absolute !important;
  inset: -3px !important;
  border-radius: 9999px !important;
  border: 1.5px solid rgba(0, 0, 0, 0.4) !important;
  animation: findMySizePing 2.6s cubic-bezier(0, 0, 0.2, 1) infinite !important;
  pointer-events: none !important;
}

@keyframes findMySizeBreath {
  0%, 100% {
    transform: scale(1);
    box-shadow: none !important;
  }
  50% {
    transform: scale(1.03);
    box-shadow: none !important;
  }
}

@keyframes findMySizePing {
  0% {
    transform: scale(0.98);
    opacity: 0.75;
  }
  60% {
    transform: scale(1.12);
    opacity: 0;
  }
  100% {
    transform: scale(1.12);
    opacity: 0;
  }
}

/* Complete hover reset: no hover changes, animation continues uninterrupted */
.find-my-size-btn:hover,
.find-my-size-btn:focus,
.find-my-size-btn:active {
  background: #ffffff !important;
  color: #111111 !important;
  border-color: #000000 !important;
  outline: none !important;
}

.size-guide-modal {
  border: none;
  border-radius: 16px;
  padding: 0;
  max-width: 580px;
  width: 90vw;
  box-shadow: none !important;
  border: 1px solid #e5e5e5;
}

.size-guide-modal::backdrop {
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
}

.size-guide-modal__content {
  padding: 24px;
}

.size-guide-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.size-guide-modal__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
}

.size-guide-modal__close {
  background: none;
  border: none;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  color: #888;
}

.size-guide-modal__subtitle {
  color: #666;
  font-size: 0.88rem;
  margin-bottom: 16px;
}

.size-guide-modal__table-wrapper {
  overflow-x: auto;
  margin-bottom: 16px;
}

.size-guide-modal__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.size-guide-modal__table th,
.size-guide-modal__table td {
  padding: 10px 12px;
  border: 1px solid #eee;
  text-align: left;
}

.size-guide-modal__table th {
  background: #f9f9f9;
  font-weight: 600;
}

.size-guide-modal__fit-tip {
  background: #f4f4f5;
  border-left: 3px solid #111;
  padding: 12px;
  border-radius: 4px;
  font-size: 0.85rem;
}

/* Variant Options: Available colours & Size */
.variant-option__legend {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: #111111 !important;
  margin-bottom: 0.85rem !important;
}

.variant-option__selected-value {
  font-weight: 500 !important;
  color: #555555 !important;
  text-transform: uppercase !important;
}

/* ── Available Colours: Rounded Square Product Images with Name Below ── */
.variant-option--swatches {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  margin-bottom: 1.5rem !important;
  align-items: flex-start !important;
  border: none !important;
  padding: 0 !important;
}

.variant-option--swatches .variant-option__button-label,
.variant-option--swatches .variant-option__button-label--has-swatch,
.variant-option__button-label--has-swatch {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  width: auto !important;
  min-width: 48px !important;
  max-width: 64px !important;
  height: auto !important;
  min-height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: visible !important;
  flex: none !important;
}

.variant-option--swatches .variant-option__button-label::before,
.variant-option--swatches .variant-option__button-label::after,
.variant-option__button-label--has-swatch::before,
.variant-option__button-label--has-swatch::after {
  display: none !important;
  content: none !important;
}

.variant-option--swatches .variant-option__button-label:hover,
.variant-option__button-label--has-swatch:hover {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* The image card itself (Only this element has the rounded border) */
.variant-option__swatch-image-wrapper {
  width: 50px !important;
  height: 50px !important;
  border-radius: 8px !important;
  border: 1.5px solid #e5e5e5 !important;
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ffffff !important;
  transition: all 0.18s ease !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

.variant-option--swatches .variant-option__button-label .swatch {
  width: 100% !important;
  height: 100% !important;
  border-radius: 6px !important;
  display: block !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border: none !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

/* Hover: light red border on the image card + red text below */
.variant-option--swatches .variant-option__button-label:hover .variant-option__swatch-image-wrapper {
  border-color: #ff3b3b !important;
  transform: translateY(-2px) !important;
}

.variant-option--swatches .variant-option__button-label:hover .variant-option__swatch-title {
  color: #ff3b3b !important;
}

/* Checked/Active: Black border on the image card + Bold text below + Checkmark overlay on image */
.variant-option--swatches .variant-option__button-label:has(input:checked) .variant-option__swatch-image-wrapper {
  border: 2px solid #111111 !important;
  box-shadow: none !important;
}

.variant-option--swatches .variant-option__button-label:has(input:checked) .variant-option__swatch-image-wrapper::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background-color: rgba(0, 0, 0, 0.6) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-size: 11px 11px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  pointer-events: none !important;
  animation: swatchCheckPop 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes swatchCheckPop {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

/* Text name clearly situated UNDERNEATH the image card */
.variant-option__swatch-title {
  display: block !important;
  margin-top: 4px !important;
  font-size: 0.76rem !important;
  font-weight: 500 !important;
  color: #444444 !important;
  text-align: center !important;
  line-height: 1.2 !important;
  width: 100% !important;
  max-width: 60px !important;
  word-break: break-word !important;
  white-space: normal !important;
  transition: color 0.15s ease !important;
}

.variant-option--swatches .variant-option__button-label:has(input:checked) .variant-option__swatch-title {
  color: #111111 !important;
  font-weight: 700 !important;
}

.variant-option--swatches .variant-option__button-label:has(input:checked) {
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* ── Size Buttons: Minimal Clean Rectangles with White Text on Active ── */
.variant-option--buttons:not(.variant-option--swatches) {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 1.5rem !important;
  border: none !important;
  padding: 0 !important;
}

.variant-option--buttons:not(.variant-option--swatches) .variant-option__button-label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 48px !important;
  height: 42px !important;
  padding: 0 14px !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  color: #222222 !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.variant-option--buttons:not(.variant-option--swatches) .variant-option__button-label:hover {
  border-color: #ff3b3b !important;
  color: #ff3b3b !important;
}

.variant-option--buttons:not(.variant-option--swatches) .variant-option__button-label:has(input:checked) {
  border: 1px solid #111111 !important;
  background: #111111 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

.variant-option--buttons:not(.variant-option--swatches) .variant-option__button-label:has(input:checked) span,
.variant-option--buttons:not(.variant-option--swatches) .variant-option__button-label:has(input:checked) .variant-option__button-label__text {
  color: #ffffff !important;
}

/* ── Buy Buttons Layout: Stacked Column ── */
.product-details .product-form-buttons {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
  width: 100% !important;
  margin-top: 0.25rem !important;
  margin-bottom: 0.5rem !important;
}

/* Hide Buy With entirely */
.product-details .product-form-buttons shopify-accelerated-checkout,
.product-details shopify-accelerated-checkout {
  display: none !important;
}

/* --- Quantity Section: Single pill container with < number > inside --- */

.product-details .product-form-buttons .quantity-selector-wrapper,
.product-details .quantity-selector-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
  width: 100% !important;
  margin-bottom: 1rem !important;
  margin-top: 0.25rem !important;
  flex-shrink: 0 !important;
  flex-wrap: nowrap !important;
}

.quantity-option__legend,
.quantity-section-header,
.product-details .quantity-label {
  display: block !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  color: #111111 !important;
  margin-bottom: 0.75rem !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Single pill-shaped container */
.product-details .quantity-selector {
  border: 1px solid #e0e0e0 !important;
  border-radius: 9999px !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #ffffff !important;
  width: 130px !important;
  box-sizing: border-box !important;
  gap: 0 !important;
  flex: none !important;
  transition: border-color 0.2s ease !important;
}

.product-details .quantity-selector:hover {
  border-color: #cccccc !important;
}

/* Arrow buttons: transparent, no border, inside the pill */
.quantity-selector button,
.quantity-selector .quantity-btn,
.quantity-selector .quantity-minus,
.quantity-selector .quantity-plus,
.product-details .quantity-selector button,
.product-details .quantity-selector .quantity-btn,
.product-details .quantity-selector .quantity-minus,
.product-details .quantity-selector .quantity-plus {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  cursor: pointer !important;
  width: 36px !important;
  height: 100% !important;
  min-width: 36px !important;
  min-height: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #111111 !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: color 0.15s ease !important;
  flex-shrink: 0 !important;
}

.quantity-selector button::before,
.quantity-selector button::after,
.quantity-selector .quantity-btn::before,
.quantity-selector .quantity-btn::after,
.product-details .quantity-selector *::before,
.product-details .quantity-selector *::after {
  display: none !important;
  content: none !important;
  background: none !important;
}

.quantity-selector button svg,
.quantity-selector .quantity-btn svg,
.product-details .quantity-selector svg {
  stroke: #111111 !important;
  color: #111111 !important;
  width: 14px !important;
  height: 14px !important;
  stroke-width: 2 !important;
  transition: stroke 0.15s ease, color 0.15s ease !important;
}

.quantity-selector button:hover:not(:disabled),
.quantity-selector .quantity-btn:hover:not(:disabled),
.product-details .quantity-selector button:hover:not(:disabled),
.product-details .quantity-selector .quantity-btn:hover:not(:disabled) {
  color: #ff3b3b !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
}

.quantity-selector button:hover:not(:disabled) svg,
.quantity-selector .quantity-btn:hover:not(:disabled) svg,
.product-details .quantity-selector button:hover:not(:disabled) svg {
  stroke: #ff3b3b !important;
  color: #ff3b3b !important;
}

.quantity-selector button:disabled,
.quantity-selector .quantity-btn:disabled,
.product-details .quantity-selector button:disabled,
.product-details .quantity-selector .quantity-btn:disabled {
  cursor: not-allowed !important;
  opacity: 1 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #111111 !important;
  pointer-events: auto !important;
}

.quantity-selector button:disabled svg,
.quantity-selector .quantity-btn:disabled svg,
.product-details .quantity-selector button:disabled svg,
.product-details .quantity-selector .quantity-btn:disabled svg {
  stroke: #111111 !important;
  color: #111111 !important;
}

/* Number in the center of the pill */
.product-details .quantity-selector input[type='number'],
.product-details .quantity-selector input {
  width: 40px !important;
  height: 100% !important;
  min-width: 40px !important;
  min-height: auto !important;
  text-align: center !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #111111 !important;
  padding: 0 !important;
  margin: 0 !important;
  -moz-appearance: textfield !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

.product-details .quantity-selector input::-webkit-inner-spin-button,
.product-details .quantity-selector input::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* Add to Cart: Full-width pill button, black bg with brand red text, red bg + black text on hover */
.product-details .product-form-buttons > span:has(.add-to-cart-button),
.product-details .product-form-buttons > [shopify-block] {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

.product-details .add-to-cart-button,
.product-details .product-form-buttons .button--primary,
.product-details .product-form-buttons .button {
  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;
  background: #111111 !important;
  background-color: #111111 !important;
  color: #ff3b3b !important;
  border-radius: 9999px !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  letter-spacing: 0.02em !important;
  margin: 0 !important;
  padding-inline: 1rem !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  position: relative !important;
  overflow: hidden !important;
  z-index: 1 !important;
  box-shadow: none !important;
  transition: color 0.7s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.7s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.25s ease,
              box-shadow 0.35s ease !important;
}

/* Base background layer */
.product-details .add-to-cart-button::after,
.product-details .product-form-buttons .button--primary::after,
.product-details .product-form-buttons .button::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  background: #111111 !important;
  z-index: -2 !important;
  border-radius: inherit !important;
}

/* Curved wave fill element (Brand Red wave) */
.product-details .add-to-cart-button::before,
.product-details .product-form-buttons .button--primary::before,
.product-details .product-form-buttons .button::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  left: -10% !important;
  width: 120% !important;
  top: 0 !important;
  bottom: auto !important;
  height: 0 !important;
  background: #ff3b3b !important;
  border-radius: 0 0 50% 50% !important;
  transition: height 0.7s cubic-bezier(0.4, 0, 0.2, 1) !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

/* Wave rises from bottom on hover */
.product-details .add-to-cart-button:hover::before,
.product-details .product-form-buttons .button--primary:hover::before,
.product-details .product-form-buttons .button:hover::before {
  top: auto !important;
  bottom: 0 !important;
  height: 220% !important;
  border-radius: 50% 50% 0 0 !important;
  transition: height 0.7s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Hover text & border: crisp black text on the rising red wave */
.product-details .add-to-cart-button:hover,
.product-details .product-form-buttons .button--primary:hover,
.product-details .product-form-buttons .button:hover {
  color: #111111 !important;
  border: 1px solid rgba(0, 0, 0, 0.3) !important;
  transform: translateY(-1px) !important;
  box-shadow: none !important;
}

.product-details .add-to-cart-button svg,
.product-details .product-form-buttons .button svg {
  stroke: currentColor !important;
  color: currentColor !important;
  transition: stroke 0.7s cubic-bezier(0.4, 0, 0.2, 1), color 0.7s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.product-details .add-to-cart-button:hover svg,
.product-details .product-form-buttons .button:hover svg {
  stroke: #111111 !important;
  color: #111111 !important;
}

/* ── Product Details Layout: Compact, Top-Aligned & Zero Excessive Gaps ── */
.product-details,
.product-details > .group-block,
.product-details > .group-block > .group-block-content {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  align-content: flex-start !important;
  height: auto !important;
  min-height: auto !important;
  gap: 12px !important;
}

.product-details .group-block-content > * {
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  height: auto !important;
  min-height: auto !important;
}

/* Buy buttons container */
.product-details .buy-buttons-block,
.product-details .product-form-buttons,
.product-details product-form-component,
.product-details form[action*="/cart/add"] {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-grow: 0 !important;
  height: auto !important;
}

/* Hide unused/empty blocks inside buy buttons & details */
.product-details [shopify-block-id*="accelerated-checkout"],
.product-details .accelerated-checkout-block,
.product-details shopify-accelerated-checkout,
.product-details .product-form-buttons shopify-accelerated-checkout,
.product-details .pickup-availabilities,
.product-details local-pickup,
.product-details .volume-pricing:empty,
.product-details .product-form-text__error.hidden {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
}

/* Product Details Header removed conflicting column force */

.product-details h1,
.product-details .text-block h1 {
  margin: 0 !important;
  font-size: clamp(1.45rem, 4.5vw, 2.25rem) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
  font-weight: 700 !important;
}



/* "Complete the look" Block — Tightly Attached Under Add to Cart */
.complete-the-look-wrapper,
.product-details [shopify-block-id*="complete_the_look"],
.product-details .complete-the-look-wrapper {
  margin-top: 0 !important;
  margin-bottom: 0.75rem !important;
  padding-top: 0 !important;
  border-top: none !important;
  width: 100% !important;
}

.complete-the-look__header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  margin-bottom: 0.65rem !important;
}

.complete-the-look__header-left {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.complete-the-look__title {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #111111 !important;
  margin: 0 !important;
}

.complete-the-look__subtitle {
  font-size: 0.78rem !important;
  color: #777777 !important;
  font-weight: 400 !important;
}

.complete-the-look__badge {
  background: #111111 !important;
  color: #ffffff !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: 9999px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

.complete-the-look__grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 14px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}

.complete-the-look__grid::-webkit-scrollbar {
  display: none !important;
}

.complete-the-look__card {
  text-decoration: none !important;
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  background: transparent !important;
  position: relative !important;
}

.complete-the-look__media {
  position: relative !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  aspect-ratio: 1 / 1 !important;
  background-color: #f5f5f5 !important;
  border: none !important;
  width: 100% !important;
}

.complete-the-look__media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  border-radius: 18px !important;
  transition: transform 0.4s ease !important;
}

.complete-the-look__card:hover .complete-the-look__media img {
  transform: scale(1.04) !important;
}

.complete-the-look__tag {
  display: none !important;
}

.complete-the-look__info {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding: 8px 2px 0 2px !important;
}

.complete-the-look__product-title {
  font-size: 0.92rem !important;
  font-weight: 500 !important;
  color: #111111 !important;
  line-height: 1.35 !important;
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-align: left !important;
  transition: color 0.15s ease !important;
}

.complete-the-look__card:hover .complete-the-look__product-title {
  color: #111111 !important;
}

.complete-the-look__price-wrapper {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  line-height: 1.25 !important;
  margin-top: 2px !important;
}

.complete-the-look__price {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: #e53e3e !important;
  white-space: nowrap !important;
  margin: 0 !important;
  text-align: left !important;
}

.complete-the-look__compare-price {
  font-size: 0.82rem !important;
  font-weight: 400 !important;
  color: #888888 !important;
  text-decoration: line-through !important;
  white-space: nowrap !important;
  margin: 0 !important;
  text-align: left !important;
}

/* ── Mobile: Complete the Look Horizontal Swipe (2 Cards Per View, Same as Products Page) ── */
@media screen and (max-width: 768px) {
  .complete-the-look-wrapper {
    margin-top: 0.5rem !important;
    margin-bottom: 1.25rem !important;
    overflow: hidden !important;
    width: 100% !important;
  }

  .complete-the-look__grid {
    --ctl-gap: 0.625rem;
    --ctl-card-w: calc((100% - var(--ctl-gap)) / 2.18);
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: var(--ctl-gap) !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-bottom: 10px !important;
    padding-inline: 2px !important;
    cursor: default !important;
    user-select: none !important;
  }

  .complete-the-look__grid.is-dragging {
    cursor: grabbing !important;
    scroll-snap-type: none !important;
    scroll-behavior: auto !important;
  }

  .complete-the-look__grid.is-dragging .complete-the-look__card {
    pointer-events: none !important;
  }

  .complete-the-look__grid::-webkit-scrollbar {
    display: none !important;
  }

  .complete-the-look__card {
    flex: 0 0 var(--ctl-card-w) !important;
    width: var(--ctl-card-w) !important;
    min-width: 0 !important;
    max-width: var(--ctl-card-w) !important;
    scroll-snap-align: start !important;
  }

  .complete-the-look__media {
    border-radius: 18px !important;
    aspect-ratio: 1 / 1 !important;
    background-color: #f5f5f5 !important;
    border: none !important;
  }

  .complete-the-look__product-title {
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    margin: 0 !important;
  }

  .complete-the-look__price-wrapper {
    gap: 8px !important;
  }

  .complete-the-look__price {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    color: #e53e3e !important;
  }

  .complete-the-look__compare-price {
    font-size: 0.8rem !important;
    font-weight: 400 !important;
    color: #888888 !important;
    text-decoration: line-through !important;
  }
}

@media screen and (max-width: 480px) {
  .complete-the-look__grid {
    --ctl-gap: 0.5rem;
    --ctl-card-w: calc((100% - var(--ctl-gap)) / 2.18);
  }
}

  /* ── Mobile: Sub Images / Thumbnails Horizontal Swipe (Identical to Latest Drops) ── */
  .media-gallery__mobile-controls[thumbnails],
  slideshow-controls[thumbnails] {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  .slideshow-controls__thumbnails-container,
  .media-gallery__mobile-controls .slideshow-controls__thumbnails-container {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 8px 0 !important;
    cursor: default !important;
    user-select: none !important;
  }

  .slideshow-controls__thumbnails-container.is-dragging {
    cursor: grabbing !important;
    scroll-snap-type: none !important;
    scroll-behavior: auto !important;
  }

  .slideshow-controls__thumbnails-container.is-dragging .slideshow-controls__thumbnail {
    pointer-events: none !important;
  }

  .slideshow-controls__thumbnails-container::-webkit-scrollbar {
    display: none !important;
  }

  .slideshow-controls__thumbnails,
  .media-gallery__mobile-controls .slideshow-controls__thumbnails {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin-inline: 0 !important;
    padding-inline: 10px !important;
    padding-block: 4px !important;
    gap: 8px !important;
    width: max-content !important;
    min-width: 100% !important;
  }

  .slideshow-controls__thumbnail,
  .media-gallery__mobile-controls .slideshow-controls__thumbnail {
    flex: 0 0 auto !important;
    width: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
    height: 72px !important;
    aspect-ratio: 3 / 4 !important;
    scroll-snap-align: start !important;
    border-radius: 10px !important;
    border: 1.5px solid rgba(0, 0, 0, 0.12) !important;
    background: transparent !important;
    background-color: transparent !important;
    overflow: hidden !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
  }

  .slideshow-controls__thumbnail img,
  .media-gallery__mobile-controls .slideshow-controls__thumbnail img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    border-radius: 8px !important;
    pointer-events: auto !important;
    background: transparent !important;
    background-color: transparent !important;
  }

  .slideshow-controls__thumbnail[aria-selected="true"],
  .media-gallery__mobile-controls .slideshow-controls__thumbnail[aria-selected="true"] {
    border-color: #111111 !important;
    box-shadow: 0 0 0 1.5px #111111 !important;
    transform: scale(1.05) !important;
  }

  .dialog-thumbnails-list-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
    cursor: default !important;
  }

  .dialog-thumbnails-list {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    width: max-content !important;
  }

  .dialog-thumbnails-list__thumbnail {
    scroll-snap-align: start !important;
    flex-shrink: 0 !important;
  }
}

/* Description Accordion */
.product-description-accordion {
  border-top: 1px solid #f0f0f0 !important;
  border-bottom: 1px solid #f0f0f0 !important;
  padding: 0 !important;
  margin-top: 1rem !important;
}

.product-description-summary {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 1rem 0 !important;
  font-size: 0.98rem !important;
  font-weight: 600 !important;
  color: #111111 !important;
  cursor: pointer !important;
  list-style: none !important;
  transition: color 0.15s ease !important;
}

.product-description-summary:hover {
  color: #ff3b3b !important;
}

.product-description-summary::-webkit-details-marker {
  display: none !important;
}

.product-description-icon {
  margin-right: 8px !important;
}

.product-description-caret {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #777777 !important;
}

.product-description-caret svg {
  display: block !important;
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.product-description-accordion[open] .product-description-caret svg {
  transform: rotate(180deg) !important;
}

.product-description-body {
  padding-bottom: 1.25rem !important;
  font-size: 0.92rem !important;
  color: #555555 !important;
  line-height: 1.6 !important;
}

/* Media Gallery Left Thumbnails and Rounding */
.product-information__media .product-media-gallery,
.product-information__media .media-gallery {
  border-radius: 16px !important;
}

.product-information__media .slideshow-slide {
  border-radius: 16px !important;
  overflow: hidden !important;
}

.product-information__media .slideshow-slide img,
.product-information__media .slideshow-slide .product-media {
  border-radius: 16px !important;
  object-fit: cover !important;
}

/* Thumbnail Items on Left */
.product-media-gallery__thumbnails .thumbnail-item,
.product-information__media .thumbnail-item {
  border-radius: 8px !important;
  overflow: hidden !important;
  border: 1.5px solid transparent !important;
  transition: all 0.2s ease !important;
}

.product-media-gallery__thumbnails .thumbnail-item.is-active,
.product-information__media .thumbnail-item[aria-current="true"] {
  border-color: #111111 !important;
}

/* Navigation Arrows on Main Media - Transparent background, red arrow on hover */
.product-information__media slideshow-arrows,
.media-gallery slideshow-arrows {
  mix-blend-mode: normal !important;
}

.product-information__media .slideshow-control--previous,
.product-information__media .slideshow-control--next,
.product-information__media slideshow-arrows .slideshow-control,
.media-gallery slideshow-arrows .slideshow-control {
  width: 44px !important;
  height: 44px !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  border-radius: 0 !important;
  color: #ffffff !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.55)) !important;
  transition: color 0.2s ease, transform 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.product-information__media .slideshow-control--previous:hover,
.product-information__media .slideshow-control--next:hover,
.product-information__media slideshow-arrows .slideshow-control:hover,
.media-gallery slideshow-arrows .slideshow-control:hover {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  color: #ff0000 !important;
  transform: scale(1.15) !important;
}

.product-information__media .slideshow-control--previous:hover svg,
.product-information__media .slideshow-control--next:hover svg,
.product-information__media slideshow-arrows .slideshow-control:hover svg,
.media-gallery slideshow-arrows .slideshow-control:hover svg,
.product-information__media .slideshow-control--previous:hover svg path,
.product-information__media .slideshow-control--next:hover svg path,
.product-information__media slideshow-arrows .slideshow-control:hover svg path,
.media-gallery slideshow-arrows .slideshow-control:hover svg path {
  stroke: #ff0000 !important;
}

/* Sticky Add to Cart Floating Pill at Bottom Right */
sticky-add-to-cart {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  z-index: 99999 !important;
  pointer-events: auto !important;
}

sticky-add-to-cart .sticky-add-to-cart__bar {
  background: #ffffff !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  border: 1px solid #ebebeb !important;
  padding: 8px 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

sticky-add-to-cart .sticky-add-to-cart__image {
  width: 48px !important;
  height: 48px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

sticky-add-to-cart .sticky-add-to-cart__image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

sticky-add-to-cart .sticky-add-to-cart__info {
  flex: 1 !important;
  min-width: auto !important;
  max-width: 280px !important;
}

sticky-add-to-cart .sticky-add-to-cart__title {
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  color: #111111 !important;
  margin: 0 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  line-height: 1.25 !important;
}

sticky-add-to-cart .sticky-add-to-cart__variant {
  font-size: 0.72rem !important;
  color: #666666 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
}

sticky-add-to-cart .sticky-add-to-cart__price {
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  color: #111111 !important;
  white-space: nowrap !important;
}

sticky-add-to-cart .sticky-add-to-cart__button {
  background: #111111 !important;
  color: #ffffff !important;
  border-radius: 9999px !important;
  padding: 0.5rem 1.15rem !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

sticky-add-to-cart .sticky-add-to-cart__button:hover {
  border-color: #ff3b3b !important;
  color: #ff3b3b !important;
}

/* ═══════════════════════════════════════════════════════════════
   PRODUCT PAGE STICKY MEDIA & DETAILS WITH BOUNDED STACKING
   ═══════════════════════════════════════════════════════════════ */

.product-information {
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;
}

@media screen and (min-width: 750px) {
  /* Ensure parent grid allocates exact media width and expands product-details across the remaining space */
  .product-information .product-information__grid,
  .product-information__grid:not(.product-information__grid--half, .product-information--media-none).product-information--media-left {
    display: grid !important;
    grid-template-columns: minmax(auto, 868px) 1fr !important;
    column-gap: 44px !important;
    align-items: start !important;
    align-content: start !important;
    width: 100% !important;
  }

  /* The entire media gallery (left thumbnails + main image) is sticky together as ONE unit */
  .product-information .product-information__media,
  .product-information media-gallery,
  .product-information .media-gallery {
    position: sticky !important;
    top: calc(var(--header-height, 70px) + 20px) !important;
    align-self: flex-start !important;
    height: fit-content !important;
    max-height: none !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: 868px !important;
  }

  .product-information slideshow-component {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 44px !important;
    width: 100% !important;
  }

  .product-information .product-details,
  .product-information .product-details > .group-block {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    align-self: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 !important;
  }

  /* When header is active / fixed */
  body:has(#header-group #header-component[data-sticky-state='active']) .product-information .product-information__media,
  body:has(#header-group #header-component[data-sticky-state='active']) .product-information media-gallery,
  body:has(#header-group #header-component[data-sticky-state='active']) .product-information .media-gallery {
    top: calc(var(--header-height, 80px) + 20px) !important;
  }
}

@media screen and (max-width: 749px) {
  .product-information .product-information__media,
  .product-information media-gallery,
  .product-information .media-gallery {
    grid-column: 2 / 3 !important;
    position: relative !important;
    top: auto !important;
    max-height: none !important;
    z-index: 1 !important;
    width: 100% !important;
  }

  .product-information slideshow-component {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   PRODUCT VERTICAL TRUST FEATURES (UNDER DESCRIPTION)
   ═══════════════════════════════════════════════════════════════ */

.product-vertical-trust-features {
  display: flex !important;
  flex-direction: column !important;
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
  border-top: 1px solid #f0f0f0 !important;
}

.product-trust-feature-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  padding: 1rem 0 !important;
  border-bottom: 1px solid #f0f0f0 !important;
  transition: all 0.2s ease !important;
}

.product-trust-feature-item:last-child {
  border-bottom: none !important;
}

.product-trust-feature-item__icon {
  flex-shrink: 0 !important;
  width: 22px !important;
  height: 22px !important;
  color: #111111 !important;
  margin-top: 2px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.product-trust-feature-item__icon svg {
  width: 100% !important;
  height: 100% !important;
  stroke: #111111 !important;
}

.product-trust-feature-item__text {
  display: flex !important;
  flex-direction: column !important;
}

.product-trust-feature-item__title {
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  color: #111111 !important;
  line-height: 1.25 !important;
}

.product-trust-feature-item__subtitle {
  font-size: 0.82rem !important;
  color: #666666 !important;
  line-height: 1.4 !important;
  margin-top: 2px !important;
}

/* ── Product Page & Recommendations: Identical Left & Right Padding ── */
.product-information.section,
.product-recommendations .section,
.product-recommendations .section-resource-list,
section:has(.product-recommendations) .section,
.product-recommendations-wrapper .section {
  --page-margin: 14px !important;
  --full-page-grid-margin: minmax(14px, 1fr) !important;
  --full-page-grid-central-column-width: min(1680px, calc(100% - 28px)) !important;
  --full-page-grid-with-margins: minmax(14px, 1fr) min(1680px, calc(100% - 28px)) minmax(14px, 1fr) !important;
  width: 100% !important;
}

@media screen and (min-width: 750px) {
  .product-information.section,
  .product-recommendations .section,
  .product-recommendations .section-resource-list,
  section:has(.product-recommendations) .section,
  .product-recommendations-wrapper .section {
    --page-margin: 20px !important;
    --full-page-grid-margin: minmax(20px, 1fr) !important;
    --full-page-grid-central-column-width: min(1680px, calc(100% - 40px)) !important;
    --full-page-grid-with-margins: minmax(20px, 1fr) min(1680px, calc(100% - 40px)) minmax(20px, 1fr) !important;
  }
}

@media screen and (min-width: 1200px) {
  .product-information.section,
  .product-recommendations .section,
  .product-recommendations .section-resource-list,
  section:has(.product-recommendations) .section,
  .product-recommendations-wrapper .section {
    --page-margin: 32px !important;
    --full-page-grid-margin: minmax(32px, 1fr) !important;
    --full-page-grid-central-column-width: min(1720px, calc(100% - 64px)) !important;
    --full-page-grid-with-margins: minmax(32px, 1fr) min(1720px, calc(100% - 64px)) minmax(32px, 1fr) !important;
  }
}

.product-information .product-information__grid {
  width: 100% !important;
}

/* ── Product Gallery Left Thumbnails: Minimalist, Borderless & Enlarged (92x92px) ── */
@media screen and (min-width: 750px) {
  .product-information slideshow-controls[thumbnails][pagination-position='left'] {
    width: 98px !important;
    min-width: 98px !important;
    height: auto !important;
    min-height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    position: static !important;
    flex-shrink: 0 !important;
  }

  .product-information .slideshow-controls__thumbnails-container {
    width: 100% !important;
    position: static !important;
    top: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .product-information .slideshow-controls__thumbnails {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 2px !important;
    width: 100% !important;
  }

  .product-information .slideshow-controls__thumbnail,
  .product-information .slideshow-control.slideshow-controls__thumbnail {
    width: 92px !important;
    min-width: 92px !important;
    max-width: 92px !important;
    height: 92px !important;
    min-height: 92px !important;
    max-height: 92px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    border: 1.5px solid transparent !important;
    background: #ffffff !important;
    padding: 2px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    position: relative !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease !important;
  }

  .product-information .slideshow-controls__thumbnail:hover {
    border-color: #ff3b3b !important;
  }

  /* Single clean border on active thumbnail */
  .product-information .slideshow-controls__thumbnail:is([aria-selected='true']),
  .product-information .slideshow-control.slideshow-controls__thumbnail:is([aria-selected='true']) {
    border: 1.5px solid #111111 !important;
    outline: none !important;
    box-shadow: none !important;
  }

  /* Checkmark badge on selected thumbnail */
  .slideshow-controls__thumbnail-check {
    display: none !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    background: rgba(0, 0, 0, 0.72) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
    z-index: 10 !important;
    box-shadow: none !important;
    animation: thumbCheckPop 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .slideshow-controls__thumbnail-check svg {
    width: 12px !important;
    height: 12px !important;
    stroke: #ffffff !important;
    display: block !important;
  }

  .product-information .slideshow-controls__thumbnail:is([aria-selected="true"], .is-active) .slideshow-controls__thumbnail-check,
  .slideshow-controls__thumbnail:is([aria-selected="true"], .is-active) .slideshow-controls__thumbnail-check {
    display: flex !important;
  }

  @keyframes thumbCheckPop {
    0% {
      transform: translate(-50%, -50%) scale(0.5);
      opacity: 0;
    }
    100% {
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
    }
  }

  .product-information .slideshow-controls__thumbnail img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    border-radius: 6px !important;
    display: block !important;
  }
}

/* ── Main Product Media: Guaranteed 100% Square 750x750 (Zero Cropping, Full Image Visible) ── */
.product-information slideshow-container {
  width: 100% !important;
  max-width: 750px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: #B8B8B8 !important;
}

.product-information slideshow-slides {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  max-width: 750px !important;
}

.product-information .product-media-container,
.product-information .slideshow-slide {
  cursor: default !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: #B8B8B8 !important;
  aspect-ratio: 1 / 1 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 750px !important;
  max-height: 750px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.product-information .product-media {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #B8B8B8 !important;
}

/* ── Universal Product Image Background Color (#B8B8B8) Across All Pages ── */
.product-information slideshow-container,
.product-information .product-media-container,
.product-information .slideshow-slide,
.product-information .product-media,
.product-media-container,
.product-media,
.card-gallery,
.card-gallery .product-media-container,
.product-card .card-gallery,
.product-card .product-media-container,
.product-card .product-card__media,
.complete-the-look__media,
.quick-add-modal .product-media-container,
.quick-add-modal .card-gallery,
.cart-drawer__item-image-wrapper,
.cart-item__media,
.product-card-gallery__placeholder,
.card-gallery__placeholder {
  background-color: #B8B8B8 !important;
}

@media screen and (min-width: 750px) {
  .product-information .product-media img,
  .product-information .product-media__image,
  .product-information .product-media-container img,
  .product-information .product-information__media img,
  .product-information .slideshow-slide img {
    object-fit: contain !important;
    object-position: center !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 750px !important;
    max-height: 750px !important;
    aspect-ratio: 1 / 1 !important;
    margin-inline: auto !important;
    cursor: default !important;
    transform: none !important;
    transition: none !important;
    display: block !important;
  }
}

@media screen and (max-width: 749px) {
  .product-information slideshow-container,
  .product-information slideshow-slides,
  .product-information .product-media-container,
  .product-information .slideshow-slide,
  .product-information .product-media {
    max-height: none !important;
    aspect-ratio: 4 / 5 !important;
    min-height: 420px !important;
    width: 100% !important;
    border-radius: 18px !important;
    overflow: hidden !important;
  }

  .product-information .product-media img,
  .product-information .product-media__image,
  .product-information .slideshow-slide img,
  .product-information .product-media-container img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 4 / 5 !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 18px !important;
  }

  /* Mobile thumbnails row underneath main image */
  .product-information .media-gallery__mobile-controls,
  .product-information slideshow-controls[thumbnails],
  .product-information .slideshow-controls__thumbnails-container {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    margin-top: 14px !important;
    padding: 0 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    height: auto !important;
    position: static !important;
  }

  .product-information .slideshow-controls__thumbnails-container::-webkit-scrollbar {
    display: none !important;
  }

  .product-information .slideshow-controls__thumbnails {
    display: flex !important;
    flex-direction: row !important;
    gap: 12px !important;
    padding: 2px 0 !important;
    margin: 0 !important;
    justify-content: flex-start !important;
    height: auto !important;
    width: auto !important;
  }

  .product-information .slideshow-controls__thumbnail {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 1.5px solid rgba(0, 0, 0, 0.12) !important;
    background: transparent !important;
    background-color: transparent !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    position: relative !important;
    padding: 0 !important;
    transition: border-color 0.2s ease, transform 0.2s ease !important;
  }

  .product-information .slideshow-controls__thumbnail:is([aria-selected="true"], .is-active) {
    border: 2px solid #111111 !important;
    box-shadow: none !important;
  }

  .product-information .slideshow-controls__thumbnail img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: contain !important;
    border-radius: 10px !important;
    background: transparent !important;
    background-color: transparent !important;
  }

  /* Hide default arrows and dots on mobile when thumbnails active */
  .product-information slideshow-arrows,
  .product-information .slideshow-controls__dots {
    display: none !important;
  }
}

/* ── Proper Centering and Proportions Across All Product Images ── */
.product-card .card-gallery img,
.product-card .product-media img,
.product-card img,
.card-gallery img,
.complete-the-look__media img,
.cart-drawer__item-image-wrapper img,
.cart-item__media img {
  object-fit: cover !important;
  object-position: center center !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

@media screen and (min-width: 750px) {
  .product-information .product-media img,
  .product-information .product-media__image,
  .product-information .slideshow-slide img,
  .product-information .product-media-container img {
    object-fit: contain !important;
    object-position: center center !important;
    width: 100% !important;
    height: 100% !important;
    margin: auto !important;
    display: block !important;
  }
}

/* ── Section Part 2: Begins with "You may also like" ── */
.product-recommendations,
section:has(.product-recommendations),
.section:has(.product-recommendations) {
  position: relative !important;
  z-index: 20 !important;
  background-color: var(--color-background, #ffffff) !important;
  margin-top: 2.5rem !important;
  padding-top: 2rem !important;
  border-top: 1px solid #eeeeee !important;
  width: 100% !important;
  clear: both !important;
}

/* ── Search Button: Absolute Zero Hover Color / Background Change (Cursor Pointer Only) ── */
.announcement-bar__search,
.announcement-bar__search *,
.search-action,
.search-action *,
search-button,
search-button * {
  cursor: pointer !important;
}

.announcement-bar__search:hover,
.announcement-bar__search *:hover,
.search-action:hover,
.search-action *:hover,
search-button:hover,
search-button *:hover {
  background: transparent !important;
  background-color: transparent !important;
  color: inherit !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  box-shadow: none !important;
  text-shadow: none !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ── Remove Availability Filter from Facets (In-stock toggle is used instead) ── */
.facets__panel:has([data-filter-name*="availability"]),
.facets__panel:has([name*="availability"]),
.facets__panel:has([data-filter-label*="Availability"]) {
  display: none !important;
}

/* ── Colour Filter Swatches & Luxury Styling ── */
.facets__inputs-list--swatches {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  padding: 4px 0 !important;
}

.facets__swatch-filter-label {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  cursor: pointer !important;
  padding: 6px 8px !important;
  border-radius: 8px !important;
  transition: background-color 0.15s ease !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.facets__swatch-filter-label:hover {
  background-color: rgba(0, 0, 0, 0.04) !important;
}

.facets__swatch-filter-input {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 0 !important;
  height: 0 !important;
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  margin: 0 !important;
}

.facets__swatch-circle {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  display: inline-block !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.facets__swatch-filter-label:hover .facets__swatch-circle {
  transform: scale(1.15) !important;
  box-shadow: 0 0 0 2px #111111 !important;
}

.facets__swatch-filter-input:checked + .facets__swatch-circle {
  transform: scale(1.15) !important;
  box-shadow: 0 0 0 2.5px #111111 !important;
  border-color: #ffffff !important;
}

.facets__swatch-text {
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  color: #111111 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex: 1 1 auto !important;
}

.facets__swatch-text .facet-count {
  color: #888888 !important;
  font-size: 0.82rem !important;
  font-weight: 400 !important;
}

/* ── Size Filter Styling ── */
.facets__inputs-list--sizes {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding: 4px 0 !important;
}

.facets__size-filter-label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  cursor: pointer !important;
  padding: 6px 8px !important;
  border-radius: 6px !important;
  transition: background-color 0.15s ease !important;
  width: 100% !important;
  box-sizing: border-box !important;
.facets__size-filter-label:hover {
  background-color: rgba(0, 0, 0, 0.04) !important;
}


/* ═══════════════════════════════════════════════════════════════
   CUSTOM PRODUCT TITLE & SIDE-BY-SIDE PRICE LAYOUT
   ═══════════════════════════════════════════════════════════════ */
/* Ensure the outer product details column remains vertical */
.product-information .product-details > .group-block,
.featured-product .product-details > .group-block {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
}

/* ═══════════════════════════════════════════════════════════════
   PRODUCT DETAILS: TITLE ON TOP + PRICE BELOW TITLE
   ═══════════════════════════════════════════════════════════════ */
.product-details .layout-panel-flex--column,
.product-details .layout-panel-flex--row,
.product-details .group-block-content.layout-panel-flex--row,
.product-details .group-block .group-block-content:has(product-price),
.product-details .group-block .group-block-content:has(h1):has(product-price),
.product-details .group-block:first-child,
.product-details .group-block:first-child .group-block-content,
.product-information .product-details .layout-panel-flex--row,
.product-information .product-details .group-block-content:has(product-price),
.featured-product .product-details .layout-panel-flex--row,
.featured-product .product-details .group-block-content:has(product-price) {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  width: 100% !important;
  margin-bottom: 12px !important;
}

[dir="rtl"] .product-details .group-block .group-block-content:has(product-price),
[dir="rtl"] .product-details .group-block:first-child,
[dir="rtl"] .product-details .group-block:first-child .group-block-content {
  align-items: flex-start !important;
}

/* Product Title Container */
.product-details .layout-panel-flex--row > .text-block:not(product-price),
.product-details .layout-panel-flex--row > div:has(h1),
.product-details .group-block-content:has(product-price) > .text-block:not(product-price),
.product-details .group-block-content:has(product-price) > div:has(h1),
.product-details .group-block:first-child > .text-block:not(product-price) {
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: start !important;
}

.product-details .layout-panel-flex--row h1,
.product-details .group-block-content:has(product-price) h1,
.product-details .group-block:first-child h1,
.product-details .text-block h1 {
  margin: 0 !important;
  padding: 0 !important;
  font-size: clamp(1.45rem, 2.2vw, 1.85rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.25 !important;
  color: #111111 !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  text-align: start !important;
  display: block !important;
}

/* Product Price Container: Sits directly below title */
.product-details product-price,
.product-details .group-block-content > product-price,
.product-details .layout-panel-flex--row > product-price,
.product-details .group-block-content:has(product-price) > product-price,
.product-details .group-block:first-child product-price {
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  text-align: start !important;
  align-self: flex-start !important;
}

.product-details product-price [ref="priceContainer"],
.product-details product-price .price-container,
.product-details product-price > div {
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  justify-content: flex-start !important;
  text-align: start !important;
  white-space: nowrap !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.product-details product-price,
.product-details product-price .price,
.product-details product-price .price-item,
.product-details product-price .price-item--regular,
.product-details product-price .price-item--sale,
.product-details product-price span:not(.compare-at-price):not(.visually-hidden),
.product-details .group-block:first-child .price {
  font-size: clamp(1.35rem, 2vw, 1.65rem) !important;
  font-weight: 700 !important;
  color: #111111 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  display: inline-block !important;
  white-space: nowrap !important;
  text-align: start !important;
}

.product-details product-price .price-item--sale {
  color: #e53e3e !important;
}

.product-details product-price .compare-at-price,
.product-details product-price .price-item--last {
  color: #888888 !important;
  font-size: clamp(0.95rem, 1.3vw, 1.15rem) !important;
  font-weight: 500 !important;
  text-decoration: line-through !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  text-align: start !important;
}


/* ═══════════════════════════════════════════════════════════════
   FIX CART REMOVE BUTTON
   ═══════════════════════════════════════════════════════════════ */
.cart-items__remove,
button.cart-items__remove {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--color-foreground, #444444) !important;
  cursor: pointer !important;
  padding: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 32px !important;
  min-height: 32px !important;
  opacity: 0.85 !important;
  visibility: visible !important;
  transition: color 0.15s ease, opacity 0.15s ease, transform 0.15s ease !important;
}

.cart-items__remove:hover,
button.cart-items__remove:hover {
  color: #e53935 !important;
  opacity: 1 !important;
  transform: scale(1.1) !important;
}

.cart-items__remove svg,
button.cart-items__remove svg,
.cart-remove-icon {
  width: 20px !important;
  height: 20px !important;
  display: block !important;
  stroke: currentColor !important;
  stroke-width: 2px !important;
  fill: none !important;
  flex-shrink: 0 !important;
  visibility: visible !important;
}

.cart-items__remove svg path,
button.cart-items__remove svg path {
  stroke: currentColor !important;
  stroke-width: 2px !important;
  fill: none !important;
}

/* ── Uniform Equal Product Image Cards & Media Grey Backgrounds ── */
.card-gallery,
.product-card .card-gallery,
.product-grid .card-gallery,
.collection .card-gallery,
.product-media-container,
.product-card-gallery,
.product-card__image-wrapper,
.resource-card__media,
.resource-card__image-placeholder,
.mobile-collection-row__image-placeholder,
.dialog-thumbnails-list__thumbnail,
.complete-the-look__media,
.latest-drops__card-media {
  background-color: #f5f5f5 !important;
}

.card-gallery,
.product-card .card-gallery,
.product-grid .card-gallery,
.collection .card-gallery {
  aspect-ratio: 1 / 1 !important;
  --gallery-aspect-ratio: 1 / 1 !important;
  --ratio: 1 / 1 !important;
  width: 100% !important;
  border-radius: 18px !important;
  background-color: #f5f5f5 !important;
  overflow: hidden !important;
  position: relative !important;
}

.card-gallery .product-media-container,
.card-gallery slideshow-slide,
.card-gallery slideshow-container,
.card-gallery .product-media {
  aspect-ratio: 1 / 1 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: transparent !important;
  border-radius: 18px !important;
  overflow: hidden !important;
}

.card-gallery img,
.card-gallery .product-media__image,
.card-gallery .product-media-container img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
  margin: auto !important;
  border-radius: 18px !important;
  transition: transform 0.4s ease !important;
}

.card-gallery:hover img {
  transform: scale(1.04) !important;
}

/* Global Placeholder SVGs & Media Grey Styling */
svg.placeholder-svg,
.placeholder-svg,
.product-media-gallery__placeholder-image,
.product-card-gallery__title-placeholder {
  background-color: #f5f5f5 !important;
  fill: #888888 !important;
  color: #555555 !important;
}