/** Shopify CDN: Minification failed

Line 2949:0 Unexpected "}"

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

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

:root {
  --hover-transition-duration: 0.25s;
  --hover-transition-timing: ease-out;
  --submenu-animation-speed: 360ms;
}

html {
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--color-foreground-rgb) / var(--opacity-40)) var(--color-background);
  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: rgb(var(--color-foreground-rgb) / var(--opacity-40)) var(--color-background);
  }

  .page-wrapper--drawer-open shopify-account::part(dialog) {
    translate: calc(-1 * var(--theme-drawer-width, var(--sidebar-width)));
  }
}

.page-wrapper--drawer-open {
  margin-right: var(--theme-drawer-width, var(--sidebar-width));
  transition-timing-function: var(--animation-timing-fade-in);
}

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;
  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. Gutters grow to the device safe-area insets (viewport-fit=cover)
   so section backgrounds bleed edge-to-edge while content stays clear of the notch; taking the
   larger of both insets keeps the centered page grid symmetric. */
.page-width-wide,
.page-width-normal,
.page-width-narrow,
.page-width-content {
  --page-margin: max(16px, var(--safe-area-inset-left, 0px), var(--safe-area-inset-right, 0px));
}

@media screen and (min-width: 750px) {
  .page-width-wide,
  .page-width-normal,
  .page-width-narrow,
  .page-width-content {
    --page-margin: max(40px, var(--safe-area-inset-left, 0px), var(--safe-area-inset-right, 0px));
  }
}

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

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

.flip-x {
  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;
}

.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);
  --button-background-color: var(--color-primary-button-background);
  --button-border-color: var(--color-primary-button-border);
  --button-border-width: var(--style-border-width-secondary);
  --button-focus-outline-color: var(--color-primary-button-focus-outline);

  font-family: var(--button-font-family-primary);
  text-transform: var(--button-text-case-primary);
  border-radius: var(--style-border-radius-buttons-primary);
  outline-color: var(--button-focus-outline-color, var(--button-background-color));
}

.button-custom:hover {
  --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);
}

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

  /* Keep the fixed close button clear of the status bar and right-side notch (viewport-fit=cover) */
  top: max(var(--margin-lg), var(--safe-area-inset-top, 0px));
  right: max(var(--margin-lg), var(--safe-area-inset-right, 0px));
  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);

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

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

slideshow-container[animate-arrows]:hover > slideshow-arrows .slideshow-control,
slideshow-component:focus-within > slideshow-container[animate-arrows] > 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__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 scrollbar styles */

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

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

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

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

/* 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 */
    .spacing-style {
      --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);
  }
}
/* Miniaturas de producto más grandes */
.thumbnail-list__item {
  width: 100px !important;
  min-width: 100px !important;
}

.thumbnail {
  width: 100px !important;
  height: 100px !important;
}

.thumbnail img {
  width: 120px !important;
height: 120px !important;
  object-fit: cover;
}
/* BARRA DE ANUNCIOS + HEADER FIJOS JUNTOS */
#header-group {
  display: block !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
}

/* Desactiva el sticky individual del header */
#header-group .header-section {
  position: relative !important;
  top: auto !important;
}

/* Seguridad para que Horizon no oculte el header */
#header-component {
  opacity: 1 !important;
}
/* ======================================================
   SHELUET - PREVIEW SELECTOR DE COLOR + TALLA
====================================================== */


/* ---------- COLOR ---------- */

.variant-option--buttons:has(> label > input[data-option-name="Color" i]) {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
}

.variant-option--buttons:has(> label > input[data-option-name="Color" i]) legend {
  width: 100% !important;
  margin-bottom: 4px !important;
}


/* Círculos de color */
.variant-option--buttons:has(> label > input[data-option-name="Color" i])
> .variant-option__button-label {
  flex: 0 0 42px !important;

  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;

  padding: 0 !important;

  border: 1.5px solid #d3d3d3 !important;
  border-radius: 50% !important;

  overflow: visible !important;

  box-shadow: none !important;
}


/* Quitamos los bordes animados propios de Horizon */
.variant-option--buttons:has(> label > input[data-option-name="Color" i])
> .variant-option__button-label::before,
.variant-option--buttons:has(> label > input[data-option-name="Color" i])
> .variant-option__button-label::after {
  display: none !important;
}


/* Quitamos texto y fondo móvil interno de Horizon */
.variant-option--buttons:has(> label > input[data-option-name="Color" i])
.variant-option__button-label__text,
.variant-option--buttons:has(> label > input[data-option-name="Color" i])
.variant-option__button-label__pill {
  display: none !important;
}


/* =========================================
   SHELUET - COLORES SEGÚN VARIANTE REAL
========================================= */

/* Negro / Black */
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Black" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Negro" i]
) {
  background: #000000 !important;
}


/* Beige / Tan */
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Tan" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Beige" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Apricot" i]
) {
  background: #ead9bd !important;
}


/* Blanco / White */
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="White" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Blanco" i]
) {
  background: #ffffff !important;
}


/* Marrón / Brown */
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Brown" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Marrón" i]
) {
  background: #704b3c !important;
}


/* Rosa / Pink */
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Pink" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Rosa" i]
) {
  background: #e9b6c4 !important;
}


/* Rojo / Red */
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Red" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Rojo" i]
) {
  background: #b92b32 !important;
}


/* Azul / Blue */
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Blue" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Azul" i]
) {
  background: #7599bc !important;
}
/* =========================================
   SHELUET - COLORES ESPECIALES
========================================= */


/* CARAMELO */
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Caramelo" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Caramel" i]
) {
  background: #b97852 !important;
}


/* LEOPARDO MARRÓN */
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Leopardo Marron" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Leopardo Marrón" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Brown Leopard" i]
) {
  background:
    radial-gradient(
      ellipse at 22% 28%,
      #1b120d 0 8%,
      #6d432c 9% 15%,
      transparent 16%
    ),
    radial-gradient(
      ellipse at 70% 22%,
      #1b120d 0 7%,
      #6d432c 8% 14%,
      transparent 15%
    ),
    radial-gradient(
      ellipse at 62% 72%,
      #1b120d 0 8%,
      #6d432c 9% 15%,
      transparent 16%
    ),
    radial-gradient(
      ellipse at 20% 76%,
      #1b120d 0 6%,
      #6d432c 7% 13%,
      transparent 14%
    ),
    #d2a177 !important;
}


/* LEOPARDO ROSA - IMAGEN REAL */
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Leopardo Rosa" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Pink Leopard" i]
) {
  background-image: url(/cdn/shop/files/a7ce042c-94e0-49bb-946c-005f1e0dde36.png?v=1788524758) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}


/* LEOPARDO BLANCO Y NEGRO - IMAGEN REAL */
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Leopardo Blanco y Negro" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Leopardo blanco y negro" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Black White Leopard" i]
) {
  background-image: url(/cdn/shop/files/Captura_de_pantalla_2026-09-04_143921.jpg?v=1788525573) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
/* LEOPARDO - IMAGEN REAL */
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Leopardo" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Leopard" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Leopardo Marrón" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Leopardo Marron" i]
) {
  background-image: url(/cdn/shop/files/Captura_de_pantalla_2026-09-04_144157.jpg?v=1788525738) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
/* Seleccionado */
.variant-option--buttons:has(input[data-option-name="Color" i])
.variant-option__button-label:has(input:checked) {
  outline: 2px solid #31239b !important;
  outline-offset: 3px !important;
}
/* NEGRO CON LÍNEA ROSA - IMAGEN REAL */
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Negro con línea rosa" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Negro con lineas rosas" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Negro con líneas rosas" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Black with pink line" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Black with pink stripe" i]
) {
  background-image: url("/cdn/shop/files/Captura_de_pantalla_2026-09-04_144400.jpg?v=1788525874") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
/* TONO MARRÓN ROJIZO / TERRACOTA */
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Marrón rojizo" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Marron rojizo" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Terracota" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Reddish Brown" i]
) {
  background: #C5583E !important;
}
/* Color seleccionado */
.variant-option--buttons:has(> label > input[data-option-name="Color" i])
> .variant-option__button-label:has(input:checked) {
  outline: 2px solid #31239b !important;
  outline-offset: 3px !important;
}
/* AZUL NOCHE */
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Azul noche" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Azul Noche" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Navy" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Midnight Blue" i]
) {
  background: #222745 !important;
}
/* ROSA ARENA */
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Rosa Arena" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Dusty Pink" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Blush" i]
) {
  background: #E0C2BA !important;
}
/* ROSA FRAMBUESA */
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Rosa Frambuesa" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Raspberry Pink" i]
) {
  background: #D16887 !important;
}
/* ROJO VINO */
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Rojo Vino" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Wine Red" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Burgundy" i]
) {
  background: #6C2A2C !important;
}
/* TURQUESA */
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Turquesa" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Turquoise" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Aqua" i]
) {
  background: #9BDFDA !important;
}
/* NARANJA */
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Naranja" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Orange" i]
) {
  background: #E47B43 !important;
}
/* VERDE MATCHA */
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Verde Matcha" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Matcha Green" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Matcha" i]
) {
  background: #718969 !important;
}
/* VERDE LIMA */
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Verde Lima" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Lima" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Lime Green" i]
) {
  background: #C6C745 !important;
}
/* VERDE ESMERALDA */
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Verde Esmeralda" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Esmeralda" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Emerald Green" i]
) {
  background: #0E6B50 !important;
}
/* MORADO */
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Morado" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Purple" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Violeta" i]
) {
  background: #6F4AA8 !important;
}
/* BEIGE CARAMELO */
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Beige Caramelo" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Camel" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Caramel Beige" i]
) {
  background: #D0A378 !important;
}
/* AMARILLO VAINILLA */
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Amarillo Vainilla" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Vainilla" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Vanilla" i]
) {
  background: #FDEAB5 !important;
}
/* ROSA FUCSIA */

.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Rosa Fucsia" i]
),

.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Fucsia" i]
),

.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Fuchsia Pink" i]
) {

  background: #E6609F !important;

}
/* BEIGE ARENA */

.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Beige Arena" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Arena" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Sand Beige" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Sand" i]
) {

  background: #D4C7BB !important;

}
/* ROSA NUDE */

.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Rosa Nude" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Nude Rosa" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Nude Pink" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Dusty Pink" i]
) {

  background: #C09894 !important;

}
/* MARRÓN CANELA */

.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Marrón Canela" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Marron Canela" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Canela" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Cinnamon Brown" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Cinnamon" i]
) {

  background: #7F6B5F !important;

}
/* AMARILLO VAINILLA */

.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Amarillo Vainilla" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Vainilla" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Vanilla Yellow" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Vanilla" i]
) {

  background: #FBEABA !important;

}
/* LILA PASTEL */

.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Lila Pastel" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Lila" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Lavanda Pastel" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Pastel Lilac" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Pastel Lavender" i]
) {

  background: #ADA6E5 !important;

}
/* GRIS PERLA */

.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Gris Perla" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Perla" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Pearl Gray" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Pearl Grey" i]
) {

  background: #BFC1CA !important;

}
/* BLANCO ROTO */

.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Blanco Roto" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Marfil" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Off White" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Ivory" i]
) {

  background: #E5DED2 !important;

}
/* BLANCO ROTO CON CEREZAS - IMAGEN REAL */
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Blanco roto con cerezas" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Blanco Roto con Cerezas" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Blanco roto cerezas" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Off white with cherries" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="White with cherries" i]
) {
  background-image: url("/cdn/shop/files/Captura_de_pantalla_2026-09-16_a_las_13.34.33.png?v=1789558505") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
/* AZUL ESTAMPADO FLORAL - IMAGEN REAL */
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Azul estampado floral" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Azul floral" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Estampado floral azul" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Blue floral print" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Blue floral" i]
) {
  background-image: url("/cdn/shop/files/Captura_de_pantalla_2026-09-16_a_las_13.36.25.png?v=1789558609") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
/* LEOPARDO MARRÓN OSCURO - IMAGEN REAL */
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Leopardo marrón oscuro" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Leopardo Marrón Oscuro" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Marrón oscuro leopardo" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Dark brown leopard" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Dark brown leopard print" i]
) {
  background-image: url("/cdn/shop/files/leopardo_marron_oscuro.png?v=1789559653") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
/* GRIS MALVA */

.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Gris Malva" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Malva Grisáceo" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Malva Grisaceo" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Mauve Gray" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Mauve Grey" i]
) {

  background: #928589 !important;

}
/* LEOPARDO BLANCO Y ROSA - IMAGEN REAL */
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Leopardo blanco y rosa" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Leopardo Blanco y Rosa" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Blanco y rosa leopardo" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="White and pink leopard" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Pink white leopard" i]
) {
  background-image: url("/cdn/shop/files/Captura_de_pantalla_2026-09-16_a_las_14.07.51.png?v=1789560494") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
/* ROSA BEBÉ */

.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Rosa Bebé" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Rosa Bebe" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Baby Pink" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Pink Baby" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Rosa Claro" i]
) {

  background: #E9D7DB !important;

}
/* GRIS VERDOSO */

.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Gris Verdoso" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Verde Grisáceo" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Verde Grisaceo" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Grey Green" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Gray Green" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Green Gray" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Green Grey" i]
) {
  background: #85877A !important;
}
/* AZUL CIELO */

.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Azul Cielo" i]
),

.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Azul Claro" i]
),

.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Celeste" i]
),

.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Sky Blue" i]
),

.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Light Blue" i]
),

.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Baby Blue" i]
) {
  background: #91CDF3 !important;
}
/* VERDE SALVIA */

.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Verde Salvia" i]
),

.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Salvia" i]
),

.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Sage Green" i]
),

.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Sage" i]
) {
  background: #95B5AF !important;
}
/* GRIS OSCURO */

.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Gris Oscuro" i]
),

.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Gris Antracita" i]
),

.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Antracita" i]
),

.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Dark Gray" i]
),

.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Dark Grey" i]
),

.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Charcoal" i]
) {
  background: #4C4B50 !important;
}
/* GRIS MÁRMOL - IMAGEN REAL */

.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Gris Mármol" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Gris Marmol" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Mármol Gris" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Marmol Gris" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Grey Marble" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Gray Marble" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Marble Grey" i]
),
.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Marble Gray" i]
) {
  background-image: url("/cdn/shop/files/Captura_de_pantalla_2026-09-20_044952.jpg?v=1789872612") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
/* AZUL ELÉCTRICO */

.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Azul Eléctrico" i]
),

.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Azul Electrico" i]
),

.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Azul Intenso" i]
),

.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Electric Blue" i]
),

.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Royal Blue" i]
),

.variant-option__button-label:has(
  input[data-option-name="Color" i][value="Bright Blue" i]
) {
  background: #3169F5 !important;
}
/* ---------- TALLAS ---------- */

.variant-option--buttons:has(> label > input[data-option-name="Size" i]),
.variant-option--buttons:has(> label > input[data-option-name="Talla" i]) {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.variant-option--buttons:has(> label > input[data-option-name="Size" i]) legend,
.variant-option--buttons:has(> label > input[data-option-name="Talla" i]) legend {
  width: 100% !important;
  margin-bottom: 4px !important;
}


/* Botón talla */
.variant-option--buttons:has(> label > input[data-option-name="Size" i])
> .variant-option__button-label,
.variant-option--buttons:has(> label > input[data-option-name="Talla" i])
> .variant-option__button-label {
  flex: 0 0 54px !important;

  width: 54px !important;
  min-width: 54px !important;
  height: 54px !important;
  min-height: 54px !important;

  padding: 0 !important;

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

  border: 1px solid #dedede !important;
  border-radius: 50% !important;

  background: #ffffff !important;
  color: #111111 !important;

  box-shadow: none !important;
}


/* Quitamos borde animado de Horizon */
.variant-option--buttons:has(> label > input[data-option-name="Size" i])
> .variant-option__button-label::before,
.variant-option--buttons:has(> label > input[data-option-name="Size" i])
> .variant-option__button-label::after,
.variant-option--buttons:has(> label > input[data-option-name="Talla" i])
> .variant-option__button-label::before,
.variant-option--buttons:has(> label > input[data-option-name="Talla" i])
> .variant-option__button-label::after {
  display: none !important;
}


/* Quitamos el fondo deslizante propio de Horizon */
.variant-option--buttons:has(> label > input[data-option-name="Size" i])
.variant-option__button-label__pill,
.variant-option--buttons:has(> label > input[data-option-name="Talla" i])
.variant-option__button-label__pill {
  display: none !important;
}


/* Talla seleccionada */
.variant-option--buttons:has(> label > input[data-option-name="Size" i])
> .variant-option__button-label:has(input:checked),
.variant-option--buttons:has(> label > input[data-option-name="Talla" i])
> .variant-option__button-label:has(input:checked) {
  background: #31239b !important;
  border-color: #31239b !important;
  color: #ffffff !important;
}


/* Texto centrado */
.variant-option__button-label__text {
  text-align: center !important;
}



  /* PRECIO */

  .sheluet-mobile-card-info__price {
    width: 100%;

    margin: 1px 0 0;
    padding: 0;

    color: inherit;

    font-family: inherit;
    font-size: 12px;
    line-height: 1.25;
    font-weight: 400;
  }



  /* =====================================================
     OCULTAR TÍTULO ORIGINAL QUE ESTÁ DEBAJO DE LA FOTO
  ===================================================== */

  product-card
  .product-card__content
  .card-gallery
  ~ a[ref="productTitleLink"],

  product-card
  .product-card__content
  card-gallery
  ~ a[ref="productTitleLink"] {
    display: none !important;
  }


  /*
    Por si Horizon coloca el título
    dentro de otro contenedor.
  */

  product-card
  .product-card__content
  .card-gallery
  ~ *:has(a[ref="productTitleLink"]),

  product-card
  .product-card__content
  card-gallery
  ~ *:has(a[ref="productTitleLink"]) {
    display: none !important;
  }



  /* =====================================================
     OCULTAR PRECIO ORIGINAL
  ===================================================== */

  product-card
  .product-card__content
  .card-gallery
  ~ product-price,

  product-card
  .product-card__content
  card-gallery
  ~ product-price {
    display: none !important;
  }


  product-card
  .product-card__content
  .card-gallery
  ~ *:has(product-price),

  product-card
  .product-card__content
  card-gallery
  ~ *:has(product-price) {
    display: none !important;
  }



  /* =====================================================
     OCULTAR RESEÑAS ORIGINALES DE DEBAJO
  ===================================================== */

  product-card
  .product-card__content
  .card-gallery
  ~ .jdgm-widget,

  product-card
  .product-card__content
  .card-gallery
  ~ .jdgm-prev-badge,

  product-card
  .product-card__content
  card-gallery
  ~ .jdgm-widget,

  product-card
  .product-card__content
  card-gallery
  ~ .jdgm-prev-badge {
    display: none !important;
  }


  product-card
  .product-card__content
  .card-gallery
  ~ *:has(.jdgm-widget),

  product-card
  .product-card__content
  .card-gallery
  ~ *:has(.jdgm-prev-badge),

  product-card
  .product-card__content
  card-gallery
  ~ *:has(.jdgm-widget),

  product-card
  .product-card__content
  card-gallery
  ~ *:has(.jdgm-prev-badge) {
    display: none !important;
  }

}
/* =========================================================
   SHELUET — INFORMACIÓN TARJETA DE COLECCIÓN
   SOLO PC
========================================================= */

.sheluet-collection-card-info {
  display: none;
}


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

  .sheluet-collection-card-info {
    display: block;

    width: 100%;

    margin-top: 8px;

    padding: 0;

    text-align: left;

    box-sizing: border-box;
  }


  /* NOMBRE / DESCRIPCIÓN */

  .sheluet-collection-card-info__title {
    display: block;

    width: 100%;

    margin: 0;

    padding: 0;

    color: #111111;

    font-family: inherit;

    font-size: 15px;

    line-height: 1.3;

    font-weight: 500;

    text-decoration: none;
  }


  .sheluet-collection-card-info__title:hover {
    text-decoration: underline;
  }


  /* PRECIO */

  .sheluet-collection-card-info__price {
    display: flex;

    align-items: center;

    gap: 7px;

    margin-top: 5px;

    color: #111111;

    font-family: inherit;

    font-size: 14px;

    line-height: 1.2;

    font-weight: 400;
  }


  .sheluet-collection-card-info__sale {
    font-weight: 500;
  }


  .sheluet-collection-card-info__compare {
    opacity: .55;
  }

}
/* =========================================================
   SHELUET — TARJETAS DE COLECCIÓN
   SOLO MÓVIL
========================================================= */

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

  /* =====================================================
     SOPORTE
  ===================================================== */

  .sheluet-collection-support {
    display: flex !important;

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

    width: 100% !important;

    gap: 4px !important;

    margin:
      7px
      0
      0 !important;

    padding: 0 !important;

    color: #707070 !important;

    font-family: inherit !important;
    font-size: 11px !important;
    line-height: 1.2 !important;

    box-sizing: border-box !important;
  }


  .sheluet-collection-support__bars {
    display: flex !important;

    align-items: flex-end !important;

    gap: 2px !important;

    height: 14px !important;

    flex: 0 0 auto !important;

    transform: scale(.82);

    transform-origin: left center;
  }


  .sheluet-collection-support__text {
    display: block !important;

    white-space: nowrap !important;
  }



  /* =====================================================
     TÍTULO + PRECIO
  ===================================================== */

  .sheluet-collection-card-info {
    display: block !important;

    width: 100% !important;

    margin:
      7px
      0
      0 !important;

    padding: 0 !important;

    text-align: left !important;

    box-sizing: border-box !important;
  }


  /* TÍTULO */

  .sheluet-collection-card-info__title {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;

    padding: 0 !important;

    color: #111111 !important;

    font-family: inherit !important;

    font-size: 12px !important;

    line-height: 1.25 !important;

    font-weight: 600 !important;

    text-decoration: none !important;

    white-space: normal !important;

    word-break: normal !important;

    overflow-wrap: break-word !important;
  }


  /* PRECIO */

  .sheluet-collection-card-info__price {
    display: flex !important;

    align-items: center !important;

    gap: 5px !important;

    width: 100% !important;

    margin:
      4px
      0
      0 !important;

    padding: 0 !important;

    color: #111111 !important;

    font-family: inherit !important;

    font-size: 12px !important;

    line-height: 1.2 !important;

    font-weight: 400 !important;
  }


  .sheluet-collection-card-info__sale {
    font-weight: 500 !important;
  }


  .sheluet-collection-card-info__compare {
    opacity: .55 !important;
  }



  /* =====================================================
     COLORES
  ===================================================== */

  .sheluet-collection-swatches {
    margin-top: 7px !important;
  }

}
/* =========================================================
   SHELUET
   OCULTAR TÍTULO ORIGINAL DEL PRODUCTO SOLO EN MÓVIL
========================================================= */

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

  .sheluet-default-product-title {
    display: none !important;
  }

}
/* =========================================================
   SHELUET — MÓVIL
   ACERCAR MINIATURAS → SOPORTE → COLOR
========================================================= */

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

  /*
    Bloque de soporte que está justo antes
    del selector de variantes.
  */
  product-component
  [data-testid="group-block"]:has(+ variant-picker) {
    margin-top: -14px !important;
    margin-bottom: -18px !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }


  /*
    En tu HTML este contenedor tiene --gap: 12px.
    Lo reducimos solo en móvil.
  */
  product-component
  [data-testid="group-block"]:has(+ variant-picker)
  > .group-block-content {
    --gap: 4px !important;
    gap: 4px !important;
  }


  /*
    Evitamos que el selector Color añada
    separación extra por arriba.
  */
  product-component
  variant-picker[ref="mainVariantPicker"] {
    margin-top: 0 !important;
    padding-top: 0 !important;
    --padding-block-start: 0px !important;
  }

}
/* =========================================================
   SHELUET — PRODUCTO MÓVIL
   COMPACTAR TODA LA ZONA DE COMPRA
   COLOR → TALLA → GUÍA → OFERTA → PACKS → CARRITO
   → KLARNA → INFO → MÉTODOS DE PAGO
========================================================= */

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

  /* =====================================================
     1. CONTENEDOR GENERAL DE LOS DETALLES
  ===================================================== */

  product-component .product-details,
  product-component .product-information__details {

    --gap: 12px !important;

    gap: 12px !important;

  }


  /* Horizon utiliza estas variables para crear
     muchos de los espacios verticales */

  product-component .product-details .spacing-style,
  product-component .product-information__details .spacing-style {

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

  }



  /* =====================================================
     2. COLOR + TALLA
  ===================================================== */

  product-component
  variant-picker[ref="mainVariantPicker"] {

    margin-top: 0 !important;
    margin-bottom: 4px !important;

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

  }


  product-component
  variant-picker {

    margin-top: 0 !important;
    margin-bottom: 4px !important;

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

  }



  /* =====================================================
     3. GUÍA DE TALLAS
  ===================================================== */

  product-component
  .product-details
  a[href*="size"],

  product-component
  .product-details
  a[href*="talla"] {

    margin-top: 2px !important;
    margin-bottom: 6px !important;

  }



  /* =====================================================
     4. SMART BUNDLES / COMPRA MÁS - AHORRA MÁS
  ===================================================== */

  product-component
  bundle-deals-widget {

    display: block !important;

    margin-top: 8px !important;
    margin-bottom: 8px !important;

  }



  /* =====================================================
     5. BOTÓN AGREGAR AL CARRITO
  ===================================================== */

  product-component
  .buy-buttons-block {

    display: block !important;

    margin-top: 8px !important;
    margin-bottom: 6px !important;

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

  }


  product-component
  buy-buttons {

    margin-top: 0 !important;
    margin-bottom: 0 !important;

  }



  /* =====================================================
     6. KLARNA / PAGO A PLAZOS
  ===================================================== */

  product-component
  shopify-payment-terms {

    display: block !important;

    margin-top: 4px !important;
    margin-bottom: 10px !important;

  }



  /* =====================================================
     7. BANNER INFORMACIÓN / ENVÍOS / DEVOLUCIONES
  ===================================================== */

  product-component
  img[alt="Información SHELUET"] {

    display: block;

    margin-top: 8px !important;
    margin-bottom: 8px !important;

  }


  product-component
  img[alt*="SHELUET"] {

    margin-top: 8px !important;
    margin-bottom: 8px !important;

  }



  /* =====================================================
     8. MÉTODOS DE PAGO
  ===================================================== */

  product-component
  .payment-icons {

    margin-top: 8px !important;
    margin-bottom: 8px !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;

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

  }



  /* =====================================================
     9. REDUCIR GAPS DE LOS GROUP-BLOCK DE ESTA ZONA
  ===================================================== */

  product-component
  .product-details
  .group-block-content,

  product-component
  .product-information__details
  .group-block-content {

    --gap: 10px !important;

    gap: 10px !important;

  }

}
/* =========================================================
   SHELUET — MÓVIL
   COMPACTAR CON ALGO MÁS DE AIRE:
   OFERTA → SMART DISCOUNT → CARRITO → KLARNA
========================================================= */

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

  /* SMART DISCOUNT MÁS CERCA DEL BANNER,
     PERO SIN QUEDAR DEMASIADO PEGADO */

  product-component bundle-deals-widget {
    display: block !important;

    margin-top: -14px !important;
    margin-bottom: 6px !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }


  product-component
  .product-details
  > *:has(bundle-deals-widget),

  product-component
  .product-information__details
  > *:has(bundle-deals-widget) {
    margin-top: 0 !important;
    margin-bottom: 0 !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }



  /* BOTÓN CARRITO */

  product-component .buy-buttons-block {
    margin-top: -6px !important;
    margin-bottom: 6px !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;

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


  product-component buy-buttons {
    display: block !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }



  /* KLARNA */

  product-component shopify-payment-terms {
    display: block !important;

    margin-top: 4px !important;
    margin-bottom: 10px !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }



  /* CONTENEDORES INTERMEDIOS */

  product-component
  .product-details
  > *:has(.buy-buttons-block),

  product-component
  .product-information__details
  > *:has(.buy-buttons-block) {
    margin-top: 0 !important;
    margin-bottom: 0 !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }


  product-component
  .product-details
  > *:has(shopify-payment-terms),

  product-component
  .product-information__details
  > *:has(shopify-payment-terms) {
    margin-top: 0 !important;
    margin-bottom: 0 !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

}
/* =========================================================
   SHELUET — COLORES EN COLECCIONES
   MISMO DISEÑO + LIGERO DESPLAZAMIENTO
   SOLO PC
========================================================= */

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

  .sheluet-collection-swatches {
    position: relative !important;
    left: 5px !important;
    overflow: visible !important;
  }

}
/* =========================================================
   SHELUET — SWATCH NATIVO UNIFICADO
========================================================= */

.sheluet-unified-swatch {
  appearance: none;
  -webkit-appearance: none;

  position: relative;

  padding: 0 !important;
  margin: 0;

  background: transparent !important;

  border-radius: 50%;

  cursor: pointer;

  line-height: 0;

  box-sizing: border-box;
}


.sheluet-unified-swatch > .swatch,
.sheluet-unified-swatch .swatch {
  display: block !important;

  width: 100% !important;
  height: 100% !important;

  min-width: 100% !important;
  min-height: 100% !important;

  border-radius: 50% !important;

  overflow: hidden;
}


.sheluet-unified-swatch__image-fallback {
  display: block;

  width: 100%;
  height: 100%;

  border-radius: 50%;

  background-size: cover;
  background-position: center;
}
/* ========================================
   SHELUET — TÍTULOS DE PRODUCTO
   ======================================== */

.sheluet-title {
  display: block;
  width: 100%;
}

.sheluet-title__technical,
.sheluet-title__description {
  display: block;
}

/* ================================
   COLECCIONES / TARJETAS PRODUCTO
   Nombre técnico ARRIBA EN NEGRITA
   Descripción ABAJO NORMAL
   ================================ */

.sheluet-title--card .sheluet-title__technical {
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 3px;
}

.sheluet-title--card .sheluet-title__description {
  font-weight: 400;
  line-height: 1.3;
}


/* ================================
   PÁGINA DE PRODUCTO
   Nombre técnico ARRIBA NORMAL
   Descripción ABAJO EN NEGRITA
   ================================ */

.sheluet-title--product .sheluet-title__technical {
  display: block;
  font-weight: 400;
  font-size: 0.72em;
  line-height: 1.15;
  margin-bottom: 2px;
}

.sheluet-title--product .sheluet-title__description {
  display: block;
  font-weight: 700;
  font-size: 1em;
  line-height: 1.08;
}
/* =========================================================
   SHELUET — BOTÓN STICKY AÑADIR AL CARRITO
   ESTILO MORADO + CREMA
========================================================= */

.sticky-add-to-cart__button {
  background: #1C146B !important;
  background-color: #1C146B !important;

  color: #EDDDC4 !important;

  border: none !important;
  border-radius: 14px !important;
  box-shadow: none !important;

  min-width: 180px !important;
  height: 48px !important;

  padding: 0 22px !important;

  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 700 !important;

  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;

  line-height: 1 !important;
}


/* TEXTO */

.sticky-add-to-cart__button .add-to-cart-text,
.sticky-add-to-cart__button .add-to-cart-text__content,
.sticky-add-to-cart__button span {
  color: #EDDDC4 !important;
}


/* ICONO BOLSA + */

.sticky-add-to-cart__button svg,
.sticky-add-to-cart__button .svg-wrapper {
  color: #EDDDC4 !important;
}

.sticky-add-to-cart__button svg path {
  stroke: currentColor;
}


/* HOVER */

.sticky-add-to-cart__button:hover {
  background: #241879 !important;
  background-color: #241879 !important;
  color: #EDDDC4 !important;
}


/* AL PULSAR */

.sticky-add-to-cart__button:active {
  background: #1C146B !important;
  transform: translateY(1px);
}


/* AGOTADO / DESACTIVADO */

.sticky-add-to-cart__button:disabled {
  background: #1C146B !important;
  color: #EDDDC4 !important;
  opacity: .55 !important;
}


/* =========================================================
   MÓVIL
========================================================= */

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

  .sticky-add-to-cart__button {
    min-width: 52px !important;
    width: 52px !important;
    height: 52px !important;

    padding: 0 !important;

    border-radius: 14px !important;
  }

}
/* SHELUET — quitar flechas barra superior SOLO EN MÓVIL */
@media screen and (max-width: 749px) {

  .announcement-bar-slider .slider-button,
  .announcement-bar-slider .slider-button--prev,
  .announcement-bar-slider .slider-button--next,
  .announcement-bar-slider button,
  .announcement-bar .slider-button,
  .announcement-bar button[class*="prev"],
  .announcement-bar button[class*="next"],
  .announcement-bar [class*="arrow"],
  .announcement-bar [class*="caret"],
  .utility-bar .slider-button--prev,
  .utility-bar .slider-button--next {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
  }

  /* Por si las flechas están creadas con CSS */
  .announcement-bar-slider::before,
  .announcement-bar-slider::after,
  .announcement-bar::before,
  .announcement-bar::after {
    content: none !important;
    display: none !important;
  }

  /* Centrar el texto después de quitar las flechas */
  .announcement-bar-slider,
  .announcement-bar__message {
    width: 100% !important;
    text-align: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}