/** Shopify CDN: Minification failed

Line 3331:21 Expected ":"

**/
* {
  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-shadow-color: var(--color-shadow);
  --hover-transition-duration: 0.25s;
  --hover-transition-timing: ease-out;
  --surface-transition-duration: 0.3s;
  --surface-transition-timing: var(--ease-out-quad);
  --submenu-animation-speed: 360ms;
  --submenu-animation-easing: cubic-bezier(0.25, 0.1, 0.25, 1);
}

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

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

.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);
  --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;
  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 scrollbar styles */

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

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

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

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

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

/* 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);
  }
}
/* ==================================================
   ELDORO — STICKY ADD TO CART
   MOBILE + DESKTOP
   ================================================== */

/* Configuración común */
#shopify-section-template--31436564332886__main {
  --eldoro-sticky-height: 52px;
  --eldoro-sticky-padding-inline: 12px;
  --eldoro-sticky-padding-block: 11px;
  --eldoro-sticky-gap: 12px;
}

/* Activar el componente en todos los tamaños */
#shopify-section-template--31436564332886__main
  sticky-add-to-cart {
  display: block !important;
}

/* Barra inferior fija */
#shopify-section-template--31436564332886__main
  .sticky-add-to-cart__bar {
  position: fixed !important;
  inset: auto 0 0 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: var(--eldoro-sticky-gap) !important;

  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;

  margin: 0 !important;
  padding:
    var(--eldoro-sticky-padding-block)
    var(--eldoro-sticky-padding-inline)
    calc(
      var(--eldoro-sticky-padding-block) +
      env(safe-area-inset-bottom)
    ) !important;

  border-radius: 0 !important;
  z-index: var(--layer-sticky, 8) !important;

  transition:
    transform 0.3s var(--ease-out-quad),
    opacity 0.3s var(--ease-out-quad) !important;
}

/* Ocultarlo mientras el botón original está visible */
#shopify-section-template--31436564332886__main
  .sticky-add-to-cart__bar[data-stuck="false"] {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(calc(100% + 20px)) !important;
  pointer-events: none !important;
}

/* Mostrarlo al superar el botón original */
#shopify-section-template--31436564332886__main
  .sticky-add-to-cart__bar[data-stuck="true"] {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

/* Ocultar miniatura y nombre del producto */
#shopify-section-template--31436564332886__main
  .sticky-add-to-cart__image,
#shopify-section-template--31436564332886__main
  .sticky-add-to-cart__info {
  display: none !important;
}

/* Precio */
#shopify-section-template--31436564332886__main
  .sticky-add-to-cart__price {
  margin-right: auto !important;
  font-size: 16px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* Mostrar el texto del botón */
#shopify-section-template--31436564332886__main
  .sticky-add-to-cart__bar
  .add-to-cart-text__content {
  display: inline !important;
}

/* Botón */
#shopify-section-template--31436564332886__main
  .sticky-add-to-cart__button {
  width: auto !important;
  height: var(--eldoro-sticky-height) !important;
  flex: 0 0 auto !important;

  margin: 0 !important;
  padding: 16px 24px !important;

  white-space: nowrap !important;
}

/* MOBILE */
@media screen and (max-width: 749px) {
  #shopify-section-template--31436564332886__main
    .sticky-add-to-cart__button {
    min-width: 170px !important;
  }
}

/* DESKTOP */
@media screen and (min-width: 750px) {
  #shopify-section-template--31436564332886__main {
    --eldoro-sticky-padding-inline: 32px;
    --eldoro-sticky-padding-block: 12px;
  }

  #shopify-section-template--31436564332886__main
    .sticky-add-to-cart__button {
    min-width: 220px !important;
  }
}/* ==================================================
   ELDORO — ESTILO COMPARTIDO DE LOS DOS BOTONES
   Editar siempre aquí colores y tipografía
   ================================================== */

#shopify-section-template--31436564332886__main
  :is(
    button[name="add"][data-testid="standalone-add-to-cart"],
    .sticky-add-to-cart__button
  ) {
  /* Mantener estos valores iguales en ambos botones */
  background-color: #D2A246 !important;
  color: #ffffffff !important;
  border-color: #D2A246 !important;

  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* El icono utiliza el mismo color que el texto */
#shopify-section-template--31436564332886__main
  :is(
    button[name="add"][data-testid="standalone-add-to-cart"],
    .sticky-add-to-cart__button
  )
  svg {
  color: currentColor !important;
  stroke: currentColor !important;
}#shopify-section-template--31436564332886__main
  :is(
    button[name="add"][data-testid="standalone-add-to-cart"],
    .sticky-add-to-cart__button
  ) {
  border-radius: 100px !important;
  overflow: hidden !important;
}

#shopify-section-template--31436564332886__main
  :is(
    button[name="add"][data-testid="standalone-add-to-cart"],
    .sticky-add-to-cart__button
  )::before,
#shopify-section-template--31436564332886__main
  :is(
    button[name="add"][data-testid="standalone-add-to-cart"],
    .sticky-add-to-cart__button
  )::after {
  border-radius: inherit !important;
}
/* ELDORO - Compact cart drawer */

cart-drawer-component cart-items-component {
  min-height: auto !important;
}

cart-drawer-component .cart-drawer__summary {
  margin-top: 32px !important;
}

cart-drawer-component form,
cart-drawer-component .cart-items {
  flex-grow: 0 !important;
}

cart-drawer-component .cart-drawer__footer,
cart-drawer-component footer {
  margin-top: 32px !important;
}
/* ELDORO - Cart drawer polish */

cart-drawer-component {
  --eldoro-cart-gap: 24px;
}

/* Compacta el contenido del drawer */
cart-drawer-component cart-items-component,
cart-drawer-component .cart-items,
cart-drawer-component form {
  min-height: auto !important;
  flex: 0 0 auto !important;
}

/* Evita que el footer quede pegado abajo */
cart-drawer-component .cart-drawer__footer,
cart-drawer-component footer {
  margin-top: var(--eldoro-cart-gap) !important;
  padding-top: var(--eldoro-cart-gap) !important;
}

/* Más aire y mejor jerarquía en cada producto */
cart-drawer-component .cart-item {
  padding-block: 18px !important;
}

/* Imagen de producto un poco más protagonista */
cart-drawer-component .cart-item img {
  width: 72px !important;
  height: auto !important;
}

/* Separadores más limpios */
cart-drawer-component .cart-item,
cart-drawer-component .cart-drawer__footer {
  border-color: rgba(0, 0, 0, 0.10) !important;
}

/* CTA principal */
cart-drawer-component button[name="checkout"],
cart-drawer-component .cart__checkout-button {
  min-height: 52px !important;
  font-size: 14px !important;
  letter-spacing: 0.02em !important;
}

/* Total más visible */
cart-drawer-component .totals,
cart-drawer-component .cart__total {
  font-size: 16px !important;
}
/* ELDORO - Color selector cantidad */

cart-drawer-component .quantity-selector,
cart-drawer-component .quantity-selector input,
cart-drawer-component .quantity-selector button {
  color: #111111 !important;
}

cart-drawer-component .quantity-selector svg,
cart-drawer-component .quantity-selector svg path {
  color: #111111 !important;
  fill: #111111 !important;
  stroke: #111111 !important;
  opacity: 1 !important;
}

cart-drawer-component .quantity-selector input {
  -webkit-text-fill-color: #111111 !important;
  opacity: 1 !important;
}
/* SOLO ESCRITORIO:
   mantiene logo y menú a la izquierda,
   uno al lado del otro,
   y baja el menú para centrarlo visualmente con el logo */
@media (min-width: 750px) {
  #header-component .header__column--left {
    display: flex !important;
    align-items: center !important;
  }

  #header-component .header-menu,
  #header-component .header-menu__inner,
  #header-component .menu-list {
    display: flex !important;
    align-items: center !important;
  }

  /* Ajuste vertical del menú respecto al wordmark */
  #header-component .header-menu {
    transform: translateY(5px) !important;
  }
}
/* Quita el icono de bolsa del botón principal */
button[data-testid="standalone-add-to-cart"] .add-to-cart-icon {
  display: none !important;
}

/* Mantiene el texto centrado */
button[data-testid="standalone-add-to-cart"] {
  justify-content: center !important;
}
.sticky-add-to-cart__button .add-to-cart-text > .svg-wrapper:first-child {
  display: none !important;
}
/* Tamaño y tipografía del botón Añadir al carrito */
#shopify-section-template--31436564332886__main
button[name="add"][data-testid="standalone-add-to-cart"] {
  font-family: "Space Grotesk", sans-serif !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.2 !important;
}

/* El mismo estilo para el botón sticky */
#shopify-section-template--31436564332886__main
.sticky-add-to-cart__button {
  font-family: "Space Grotesk", sans-serif !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.2 !important;
}/* ==================================================
   ELDORO — BOTÓN DEL HERO
   MÓVIL
   ================================================== */

#shopify-section-template--31436564365654__hero_jVaWmY .button-custom {
  /* Colocación */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;

  /* Tamaño móvil */
  width: 180px !important;
  min-width: 180px !important;
  max-width: 180px !important;
  min-height: 52px !important;
  padding: 14px 24px !important;

  /* Separación respecto al texto */
  margin-top: 18px !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;

  /* Colores */
  background: #8f5a2e !important;
  color: #3a3028 !important;

  /* Borde */
  border: 1px solid #8f5a2e !important;
  border-radius: 999px !important;

  /* Tipografía */
  font-family: "Space Grotesk", Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;

  /* Efectos */
  box-shadow: none !important;
  cursor: pointer !important;
  transition:
    background-color 200ms ease,
    color 200ms ease,
    border-color 200ms ease,
    transform 200ms ease,
    box-shadow 200ms ease !important;
}

/* Elimina los efectos gráficos del botón original */
#shopify-section-template--31436564365654__hero_jVaWmY .button-custom::before,
#shopify-section-template--31436564365654__hero_jVaWmY .button-custom::after {
  display: none !important;
  content: none !important;
}


/* ==================================================
   ESCRITORIO
   ================================================== */

@media screen and (min-width: 750px) {
  #shopify-section-template--31436564365654__hero_jVaWmY .button-custom {
    /* ANCHURA */
    width: 318px !important;
    min-width: 318px !important;
    max-width: 318px !important;

    /* ALTURA */
    height: 58px !important;
    min-height: 58px !important;

    /* ESPACIO INTERIOR */
    padding: 0 32px !important;

    /* POSICIÓN Y SEPARACIÓN */
    margin-top: 15px !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;

    /* COLORES */
    background: #B98243 !important;
    color: #3a3028 !important;

    /* BORDE Y FORMA */
    border: 1px solid #d8d0c3 !important;
    border-radius: 999px !important;

    /* TIPOGRAFÍA */
    font-family: "Space Grotesk", Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;

    /* SOMBRA */
    box-shadow: none !important;
  }
}/* ==================================================
   ELDORO — CTA HERO PREMIUM
   ================================================== */

#shopify-section-template--31436564365654__hero_jVaWmY .button-custom {
  /* Tamaño móvil */
  width: 190px !important;
  min-width: 190px !important;
  max-width: 190px !important;
  height: 50px !important;
  min-height: 50px !important;
  padding: 0 24px !important;

  /* Acabado */
  background: linear-gradient(
    135deg,
    #c89550 0%,
    #b77938 100%
  ) !important;

  color: #211a15 !important;
  border: 1px solid rgb(92 56 25 / 38%) !important;
  border-radius: 8px !important;

  /* Tipografía */
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;

  /* Volumen discreto */
  box-shadow:
    0 8px 20px rgb(74 47 25 / 16%),
    inset 0 1px 0 rgb(255 255 255 / 28%) !important;

  transition:
    background 220ms ease,
    color 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    transform 220ms ease !important;
}


/* Flecha editorial */
#shopify-section-template--31436564365654__hero_jVaWmY
  .button-custom::after {
  content: "→" !important;
  display: inline-block !important;
  margin-left: 12px !important;

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

  transition: transform 220ms ease !important;
}


/* Tamaño de escritorio */
@media screen and (min-width: 750px) {
  #shopify-section-template--31436564365654__hero_jVaWmY
    .button-custom {
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 28px !important;
  }
}


/* Hover de escritorio */
@media screen and (min-width: 750px) and (hover: hover) and (pointer: fine) {
  #shopify-section-template--31436564365654__hero_jVaWmY
    .button-custom:hover {
    background: linear-gradient(
      135deg,
      #b77c3e 0%,
      #985b28 100%
    ) !important;

    color: #fff8ee !important;
    border-color: #8c5123 !important;

    transform: translateY(-2px) !important;

    box-shadow:
      0 11px 25px rgb(64 39 20 / 24%),
      inset 0 1px 0 rgb(255 255 255 / 18%) !important;
  }

  #shopify-section-template--31436564365654__hero_jVaWmY
    .button-custom:hover::after {
    transform: translateX(4px) !important;
  }
}


/* Pulsación */
#shopify-section-template--31436564365654__hero_jVaWmY
  .button-custom:active {
  background: #814a20 !important;
  color: #fff8ee !important;

  transform: translateY(0) scale(0.98) !important;

  box-shadow:
    0 4px 10px rgb(64 39 20 / 18%),
    inset 0 2px 4px rgb(46 25 12 / 18%) !important;
}
/* ==================================================
   ELDORO — CTA HERO CON ISOTIPO REAL
   Opción 1: marfil mineral + sello carbón
   ================================================== */

#shopify-section-template--31436564365654__hero_jVaWmY
  .button-custom {
  /* Estructura */
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  overflow: hidden !important;

  /* Tamaño móvil */
  width: 200px !important;
  min-width: 200px !important;
  max-width: 200px !important;
  height: 52px !important;
  min-height: 52px !important;

  /* Deja espacio para el isotipo */
  padding: 0 60px 0 20px !important;

  /* Acabado plano */
  background: #e8e0d4 !important;
  color: #211f1c !important;

  border: 1px solid rgb(33 31 28 / 14%) !important;
  border-radius: 999px !important;

  /* Tipografía */
  font-family: "Space Grotesk", Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  text-decoration: none !important;
  white-space: nowrap !important;

  /* Profundidad mínima */
  box-shadow: 0 5px 14px rgb(58 43 29 / 10%) !important;

  transition:
    border-color 200ms ease,
    box-shadow 200ms ease,
    transform 200ms ease !important;
}


/* Elimina cualquier efecto anterior */
#shopify-section-template--31436564365654__hero_jVaWmY
  .button-custom::before {
  display: none !important;
  content: none !important;
}


/* Sello circular con el isotipo real */
#shopify-section-template--31436564365654__hero_jVaWmY
  .button-custom::after {
  content: "" !important;

  position: absolute !important;
  top: 50% !important;
  right: 3px !important;

  display: block !important;
  width: 46px !important;
  height: 46px !important;
  margin: 0 !important;

  background-color: #010504 !important;
  background-image: url("eldoro-isiotipo-crema.svg") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: cover !important;

  border: 3px solid #e8e0d4 !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;

  transform: translateY(-50%) !important;

  transition:
    transform 200ms ease,
    box-shadow 200ms ease !important;
}


/* ==================================================
   ESCRITORIO
   ================================================== */

@media screen and (min-width: 750px) {
  #shopify-section-template--31436564365654__hero_jVaWmY
    .button-custom {
    width: 250px !important;
    min-width: 250px !important;
    max-width: 250px !important;
    height: 58px !important;
    min-height: 58px !important;

    padding: 0 68px 0 24px !important;
  }

  #shopify-section-template--31436564365654__hero_jVaWmY
    .button-custom::after {
    width: 52px !important;
    height: 52px !important;
    right: 3px !important;
  }
}


/* ==================================================
   HOVER DE ESCRITORIO
   ================================================== */

@media screen and (min-width: 750px) and (hover: hover) and (pointer: fine) {
  #shopify-section-template--31436564365654__hero_jVaWmY
    .button-custom:hover {
    background: #e8e0d4 !important;
    color: #211f1c !important;

    border-color: rgb(33 31 28 / 34%) !important;

    transform: translateY(-2px) !important;

    box-shadow:
      0 9px 22px rgb(58 43 29 / 16%) !important;
  }

  #shopify-section-template--31436564365654__hero_jVaWmY
    .button-custom:hover::after {
    transform: translateY(-50%) scale(1.05) !important;

    box-shadow: 0 3px 9px rgb(0 0 0 / 20%) !important;
  }
}


/* Pulsación */
#shopify-section-template--31436564365654__hero_jVaWmY
  .button-custom:active {
  transform: translateY(0) scale(0.98) !important;
}
/* Hero: evita recortar el lado derecho de la bolsa en móvil */
@media screen and (max-width: 749px) {
  #shopify-section-template--31436564365654__hero_jVaWmY img.hero__media {
    object-position: right bottom !important;
  }
}
/* =========================================================
   ELDORO — HERO PREMIUM
   Modifica primero las variables de esta zona
   ========================================================= */

#shopify-section-template--31436564365654__hero_jVaWmY {
  /* ---------- DEGRADADO DESKTOP ---------- */
  --eldoro-overlay-rgb: 34 28 23;
  --eldoro-overlay-angle: 90deg;

  /* Intensidad: 0 = transparente / 1 = negro */
  --eldoro-overlay-start-opacity: 0.58;
  --eldoro-overlay-mid-opacity: 0.26;

  /* Hasta dónde llega el degradado */
  --eldoro-overlay-mid-position: 34%;
  --eldoro-overlay-end-position: 64%;

  /* ---------- POSICIÓN DEL CONTENIDO ---------- */
  --eldoro-content-x: 0px;
  --eldoro-content-y: -30px;

  /* ---------- TITULAR ---------- */
  --eldoro-title-font: Georgia, "Times New Roman", serif;
  --eldoro-title-size: 52px;
  --eldoro-title-weight: 400;
  --eldoro-title-line-height: 1.04;
  --eldoro-title-letter-spacing: -0.025em;
  --eldoro-title-color: #f6f1e7;
  --eldoro-title-max-width: 760px;
  --eldoro-title-gap: 34px;

  /* ---------- TEXTO SECUNDARIO ---------- */
  --eldoro-body-font: "Space Grotesk", Arial, sans-serif;
  --eldoro-body-size: px;
  --eldoro-body-weight: 400;
  --eldoro-body-line-height: 1.45;
  --eldoro-body-letter-spacing: 0;
  --eldoro-body-color: rgba(246, 241, 231, 0.92);
  --eldoro-body-max-width: 420px;
  --eldoro-body-gap: 32px;

  /* ---------- CTA ---------- */
  
  --eldoro-cta-y: 10px;
  --eldoro-cta-width: 248px;
  --eldoro-cta-height: 58px;
  --eldoro-cta-padding-left: 28px;


  --eldoro-cta-background: rgba(246, 241, 231, 0.94);
  --eldoro-cta-text-color: #211f1c;
  --eldoro-cta-border-color: rgba(74, 61, 50, 0.25);

  --eldoro-cta-font: "Space Grotesk", Arial, sans-serif;
  --eldoro-cta-font-size: 15px;
  --eldoro-cta-font-weight: 500;
  --eldoro-cta-letter-spacing: 0.01em;

  --eldoro-cta-radius: 999px;
  --eldoro-cta-shadow: 0 6px 20px rgba(28, 22, 17, 0.14);

  /* Círculo e isotipo */
  --eldoro-icon-size: 48px;
  --eldoro-icon-inset: 4px;
  --eldoro-logo-size: 70%;

  /* ---------- HOVER ---------- */
  --eldoro-cta-hover-background: #fbf8f1;
  --eldoro-cta-hover-text: #11100e;
  --eldoro-cta-hover-border: rgba(33, 31, 28, 0.5);
  --eldoro-cta-hover-shadow: 0 10px 28px rgba(28, 22, 17, 0.22);
  --eldoro-cta-hover-movement: -2px;
}


/* =========================================================
   CAPA DE CONTRASTE
   Queda entre la fotografía y el contenido
   ========================================================= */

#shopify-section-template--31436564365654__hero_jVaWmY
.hero__media-grid::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;

  background: linear-gradient(
    var(--eldoro-overlay-angle),
    rgb(
      var(--eldoro-overlay-rgb) /
      var(--eldoro-overlay-start-opacity)
    ) 0%,
    rgb(
      var(--eldoro-overlay-rgb) /
      var(--eldoro-overlay-mid-opacity)
    ) var(--eldoro-overlay-mid-position),
    rgb(var(--eldoro-overlay-rgb) / 0)
      var(--eldoro-overlay-end-position)
  );
}


/* =========================================================
   CONTENIDO DEL HERO
   ========================================================= */

#shopify-section-template--31436564365654__hero_jVaWmY
.hero__content-wrapper {
  position: relative;
  z-index: 4;
  gap: 0 !important;

  transform: translate(
    var(--eldoro-content-x),
    var(--eldoro-content-y)
  );
}


/* =========================================================
   TITULAR
   Primer bloque del Hero
   ========================================================= */

#shopify-section-template--31436564365654__hero_jVaWmY
.hero__content-wrapper > :nth-child(1) {
  width: min(100%, var(--eldoro-title-max-width)) !important;
  max-width: var(--eldoro-title-max-width) !important;
  margin: 0 0 var(--eldoro-title-gap) !important;
}

#shopify-section-template--31436564365654__hero_jVaWmY
.hero__content-wrapper > :nth-child(1),
#shopify-section-template--31436564365654__hero_jVaWmY
.hero__content-wrapper > :nth-child(1)
:is(h1, h2, h3, h4, h5, h6, p, span, strong, em) {
  color: var(--eldoro-title-color) !important;
  font-family: var(--eldoro-title-font) !important;
  font-size: var(--eldoro-title-size) !important;
  font-weight: var(--eldoro-title-weight) !important;
  line-height: var(--eldoro-title-line-height) !important;
  letter-spacing: var(--eldoro-title-letter-spacing) !important;

  margin: 0 !important;
  text-wrap: balance;
}


/* =========================================================
   TEXTO SECUNDARIO
   Segundo bloque del Hero
   ========================================================= */

#shopify-section-template--31436564365654__hero_jVaWmY
.hero__content-wrapper > :nth-child(2) {
  width: min(100%, var(--eldoro-body-max-width)) !important;
  max-width: var(--eldoro-body-max-width) !important;
  margin: 0 0 var(--eldoro-body-gap) !important;
}

#shopify-section-template--31436564365654__hero_jVaWmY
.hero__content-wrapper > :nth-child(2),
#shopify-section-template--31436564365654__hero_jVaWmY
.hero__content-wrapper > :nth-child(2)
:is(p, span, strong, em) {
  color: var(--eldoro-body-color) !important;
  font-family: var(--eldoro-body-font) !important;
  font-size: var(--eldoro-body-size) !important;
  font-weight: var(--eldoro-body-weight) !important;
  line-height: var(--eldoro-body-line-height) !important;
  letter-spacing: var(--eldoro-body-letter-spacing) !important;

  margin: 0 !important;
}


/* =========================================================
   BOTÓN
   Conserva "Descubre más" y el isotipo actual
   ========================================================= */

#shopify-section-template--31436564365654__hero_jVaWmY
.button-custom {
  transform: translateY(var(--eldoro-cta-y)) !important;
  position: relative !important;
  box-sizing: border-box !important;

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

  width: var(--eldoro-cta-width) !important;
  min-width: var(--eldoro-cta-width) !important;
  max-width: var(--eldoro-cta-width) !important;

  height: var(--eldoro-cta-height) !important;
  min-height: var(--eldoro-cta-height) !important;

  padding:
    0
    calc(var(--eldoro-icon-size) + 16px)
    0
    var(--eldoro-cta-padding-left) !important;

  background: var(--eldoro-cta-background) !important;
  color: var(--eldoro-cta-text-color) !important;
  border: 1px solid var(--eldoro-cta-border-color) !important;
  border-radius: var(--eldoro-cta-radius) !important;
  box-shadow: var(--eldoro-cta-shadow) !important;

  font-family: var(--eldoro-cta-font) !important;
  font-size: var(--eldoro-cta-font-size) !important;
  font-weight: var(--eldoro-cta-font-weight) !important;
  letter-spacing: var(--eldoro-cta-letter-spacing) !important;
  line-height: 1 !important;
  text-align: left !important;
  text-decoration: none !important;

  overflow: hidden !important;

  transition:
    background-color 220ms ease,
    color 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    transform 220ms ease !important;
}


/* Círculo negro e isotipo */

#shopify-section-template--31436564365654__hero_jVaWmY
.button-custom::after {
  content: "" !important;
  position: absolute !important;

  top: 50% !important;
  right: var(--eldoro-icon-inset) !important;

  width: var(--eldoro-icon-size) !important;
  height: var(--eldoro-icon-size) !important;

  transform: translateY(-50%) !important;

  border-radius: 50% !important;
  background-color: #030706 !important;
  background-image: url("eldoro-isiotipo.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: var(--eldoro-logo-size) auto !important;

  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.18) !important;
}


/* Hover solo para dispositivos con cursor */

@media (hover: hover) and (pointer: fine) {
  #shopify-section-template--31436564365654__hero_jVaWmY
  .button-custom:hover {
    background: var(--eldoro-cta-hover-background) !important;
    color: var(--eldoro-cta-hover-text) !important;
    border-color: var(--eldoro-cta-hover-border) !important;
    box-shadow: var(--eldoro-cta-hover-shadow) !important;

    transform: translateY(
  calc(var(--eldoro-cta-y) + var(--eldoro-cta-hover-movement))
) !important;
  }
}


/* Al pulsar */

#shopify-section-template--31436564365654__hero_jVaWmY
.button-custom:active {
  transform: translateY(0) scale(0.985) !important;
}


/* Navegación con teclado */

#shopify-section-template--31436564365654__hero_jVaWmY
.button-custom:focus-visible {
  outline: 2px solid #f6f1e7 !important;
  outline-offset: 4px !important;
}


/* =========================================================
   MÓVIL
   Modifica aquí solamente los valores de móvil
   ========================================================= */

@media screen and (max-width: 749px) {
  #shopify-section-template--31436564365654__hero_jVaWmY {
    /* Degradado vertical: oscuro arriba y transparente abajo */
    --eldoro-overlay-angle: 180deg;
    --eldoro-overlay-start-opacity: 0.48;
    --eldoro-overlay-mid-opacity: 0.28;
    --eldoro-overlay-mid-position: 42%;
    --eldoro-overlay-end-position: 74%;

    /* Movimiento del bloque completo */
    --eldoro-content-x: 0px;
    --eldoro-content-y: 20px;

    /* Titular móvil */
    --eldoro-title-size: clamp(32px, 8vw, 38px);
    --eldoro-title-line-height: 1.04;
    --eldoro-title-letter-spacing: -0.025em;
    --eldoro-title-max-width: 420px;
    --eldoro-title-gap: 24px;

    /* Texto móvil */
    --eldoro-body-size: 16px;
    --eldoro-body-line-height: 1.42;
    --eldoro-body-max-width: 290px;
    --eldoro-body-gap: 28px;

    --eldoro-title-y: -30px; /* sube solo el titular */
--eldoro-body-y: 10px;   /* baja solo el texto secundario */

--eldoro-title-size: 40px; /* tamaño titular */
--eldoro-body-size: 17px;  /* tamaño texto secundario */

    /* CTA móvil */
    --eldoro-cta-width: 230px;
    --eldoro-cta-height: 56px;
    --eldoro-cta-padding-left: 25px;
    --eldoro-cta-font-size: 15px;

    --eldoro-icon-size: 46px;
    --eldoro-icon-inset: 4px;
    --eldoro-logo-size: 68%;
    --eldoro-cta-y: -25px;
  }
}
/* ELDORO — CONTROLES INDIVIDUALES DE TEXTO EN MÓVIL */
@media screen and (max-width: 749px) {

  #shopify-section-template--31436564365654__hero_jVaWmY {
    --eldoro-mobile-title-size: 26px;
    --eldoro-mobile-title-y: -10px;

    --eldoro-mobile-body-size: 14px;
    --eldoro-mobile-body-y: 7px;
  }

  /* Titular */
  #shopify-section-template--31436564365654__hero_jVaWmY
  .hero__content-wrapper > .text-block:first-child {
    transform: translateY(var(--eldoro-mobile-title-y)) !important;
  }

  #shopify-section-template--31436564365654__hero_jVaWmY
  .hero__content-wrapper > .text-block:first-child h3 {
    font-size: var(--eldoro-mobile-title-size) !important;
    line-height: 1.05 !important;
  }

  /* Texto secundario */
  #shopify-section-template--31436564365654__hero_jVaWmY
  .hero__content-wrapper > rte-formatter {
    transform: translateY(var(--eldoro-mobile-body-y)) !important;
  }

  #shopify-section-template--31436564365654__hero_jVaWmY
  .hero__content-wrapper > rte-formatter p {
    font-size: var(--eldoro-mobile-body-size) !important;
    line-height: 1.42 !important;
  }
}
/* =========================================================
   ELDORO — VÍDEO BLOQUE 2 · VERSIÓN SEGURA
   ========================================================= */

:is(
  #shopify-section-template--31436564365654__section_UPccfQ,
  #shopify-section-template--31436564365654__section_tJqdUj
) {
  /* Personalización del degradado */
  --video-gradient-color: 34 28 23;
  --video-gradient-start: 0.12;
  --video-gradient-middle: 0.04;
  --video-gradient-middle-position: 35%;
  --video-gradient-end-position: 68%;
  --video-gradient-angle: 90deg;

  /* Dirección: de arriba hacia abajo */
--video-gradient-angle: 180deg;

/* Intensidad */
--video-gradient-start: 0.26;
--video-gradient-middle: 0.08;

/* Hasta dónde llega */
--video-gradient-middle-position: 38%;
--video-gradient-end-position: 72%;
}

:is(
  #shopify-section-template--31436564365654__section_UPccfQ,
  #shopify-section-template--31436564365654__section_tJqdUj
) deferred-media {
  position: relative !important;
  overflow: hidden !important;
}

/* No imponemos height:100%, porque podía colapsar la sección */
:is(
  #shopify-section-template--31436564365654__section_UPccfQ,
  #shopify-section-template--31436564365654__section_tJqdUj
) video {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

/* La portada solo desaparece cuando el vídeo está reproduciéndose */
:is(
  #shopify-section-template--31436564365654__section_UPccfQ,
  #shopify-section-template--31436564365654__section_tJqdUj
).eldoro-video-playing
:is(
  .deferred-media__poster-button,
  .deferred-media__poster-icon
) {
  display: none !important;
  visibility: hidden !important;
}

/* Oculta los controles nativos */
:is(
  #shopify-section-template--31436564365654__section_UPccfQ,
  #shopify-section-template--31436564365654__section_tJqdUj
) video::-webkit-media-controls,
:is(
  #shopify-section-template--31436564365654__section_UPccfQ,
  #shopify-section-template--31436564365654__section_tJqdUj
) video::-webkit-media-controls-enclosure,
:is(
  #shopify-section-template--31436564365654__section_UPccfQ,
  #shopify-section-template--31436564365654__section_tJqdUj
) video::-webkit-media-controls-panel {
  display: none !important;
  opacity: 0 !important;
}

/* Degradado sobre el vídeo */
:is(
  #shopify-section-template--31436564365654__section_UPccfQ,
  #shopify-section-template--31436564365654__section_tJqdUj
) deferred-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;

  background: linear-gradient(
    var(--video-gradient-angle),
    rgb(
      var(--video-gradient-color) /
      var(--video-gradient-start)
    ) 0%,
    rgb(
      var(--video-gradient-color) /
      var(--video-gradient-middle)
    ) var(--video-gradient-middle-position),
    transparent var(--video-gradient-end-position)
  );
}

/* Degradado móvil */
@media screen and (max-width: 749px) {
  :is(
    #shopify-section-template--31436564365654__section_UPccfQ,
    #shopify-section-template--31436564365654__section_tJqdUj
  ) {
    --video-gradient-angle: 180deg;
    --video-gradient-start: 0.20;
    --video-gradient-middle: 0.03;
    --video-gradient-middle-position: 35%;
    --video-gradient-end-position: 65%;
  }
}/* =========================================================
   FIX DEFINITIVO — EVITAR QUE EL VÍDEO COLAPSE
   ========================================================= */

/* MOBILE: vídeo real 500 × 1080 */
#shopify-section-template--31436564365654__section_UPccfQ deferred-media {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 500 / 1080 !important;
  overflow: hidden !important;
}

/* DESKTOP: vídeo real 1920 × 1080 */
#shopify-section-template--31436564365654__section_tJqdUj deferred-media {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1920 / 1080 !important;
  overflow: hidden !important;
}

/* El vídeo ocupa el espacio reservado */
:is(
  #shopify-section-template--31436564365654__section_UPccfQ,
  #shopify-section-template--31436564365654__section_tJqdUj
) deferred-media video {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
/* CTA bloque 3 · mismo sistema visual que el CTA del Hero */
#shopify-section-template--31436564365654__section_ejYygx .button {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 248px !important;
  min-height: 58px !important;
  padding: 0 68px 0 28px !important;

  background: rgba(246, 241, 231, 0.94) !important;
  color: #211f1c !important;
  border: 1px solid rgba(74, 61, 50, 0.25) !important;
  border-radius: 999px !important;
  box-shadow: 0 6px 20px rgba(28, 22, 17, 0.14) !important;

  font-family: "Space Grotesk", Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.2 !important;

  overflow: hidden !important;
  transition: transform 220ms ease, background 220ms ease,
    box-shadow 220ms ease !important;
}

#shopify-section-template--31436564365654__section_ejYygx .button::after {
  content: "" !important;
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;

  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;

  background-color: #000 !important;
  background-image: url("eldoro-isotipo-crema.svg") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 68% !important;
}

@media (hover: hover) and (pointer: fine) {
  #shopify-section-template--31436564365654__section_ejYygx .button:hover {
    background: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 24px rgba(28, 22, 17, 0.20) !important;
  }
}/* CTA BLOQUE 3 · POSICIÓN FIJA SOLO EN ESCRITORIO */
@media screen and (min-width: 750px) {
  #shopify-section-template--31436564365654__section_ejYygx .group-block .button {
    margin-top: 30px !important; /* Más número = baja */
    transform: none !important;
  }

  /* Evita que suba al pasar el cursor */
  #shopify-section-template--31436564365654__section_ejYygx .group-block .button:hover {
    transform: none !important;
  }
}/* CTA bloque 3 · posición solo en móvil */
@media screen and (max-width: 749px) {
  #shopify-section-template--31436564365654__section_ejYygx .group-block {
    position: relative !important;
    overflow: visible !important;
  }

  #shopify-section-template--31436564365654__section_ejYygx .group-block .button {
    position: absolute !important;
    z-index: 3 !important;

    left: 0px;
    bottom: -400px;
  }
}/* CTA página La Marca */

#shopify-section-template--31451677294934__section_tLxXAk .button {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 248px !important;
  min-height: 58px !important;
  padding: 0 68px 0 28px !important;

  background-color: rgba(246, 241, 231, 0.94) !important;
  color: #211f1c !important;
  border: 1px solid rgba(74, 61, 50, 0.25) !important;
  border-radius: 999px !important;
  box-shadow: 0 6px 20px rgba(28, 22, 17, 0.14) !important;

  font-family: "Space Grotesk", Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.2 !important;

  overflow: hidden !important;
}

#shopify-section-template--31451677294934__section_tLxXAk .button::after {
  content: "" !important;
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;

  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;

  background-color: #000 !important;
  background-image: url("eldoro-isotipo-crema.svg") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 68% !important;
}

/* Posición: escritorio */
@media screen and (min-width: 750px) {
  #shopify-section-template--31451677294934__section_tLxXAk .button {
    left: 0px !important;
    top: 0px !important;
    margin-top: 0px !important;
  }
}

/* Posición: móvil */
@media screen and (max-width: 749px) {
  #shopify-section-template--31451677294934__section_tLxXAk .button {
    left: 0px !important;
    top: 0px !important;
    margin-top: 0px !important;
  }
}/* =========================================
   CTA LA MARCA · “Comprar ahora”
   sección QjTCc4
   ========================================= */

#shopify-section-template--31451677294934__section_QjTCc4
.button-custom--AM01TSkh3d1pnTVZHR__button_UmmhpQ {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 248px !important;
  min-height: 58px !important;
  padding: 0 68px 0 28px !important;

  background: rgba(246, 241, 231, 0.94) !important;
  color: #211f1c !important;
  border: 1px solid rgba(74, 61, 50, 0.25) !important;
  border-radius: 999px !important;
  box-shadow: 0 6px 20px rgba(28, 22, 17, 0.14) !important;

  font-family: "Space Grotesk", Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.2 !important;

  overflow: hidden !important;
}

#shopify-section-template--31451677294934__section_QjTCc4
.button-custom--AM01TSkh3d1pnTVZHR__button_UmmhpQ::after {
  content: "" !important;
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;

  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;

  background-color: #000 !important;
  background-image: url("eldoro-isotipo-crema.svg") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 68% !important;
}

/* POSICIÓN EN ESCRITORIO */
@media screen and (min-width: 750px) {
  #shopify-section-template--31451677294934__section_QjTCc4
  .button-custom--AM01TSkh3d1pnTVZHR__button_UmmhpQ {
    left: 0px !important; /* positivo = derecha */
    top: 0px !important;  /* positivo = abajo */
  }
}

/* POSICIÓN EN MÓVIL */
@media screen and (max-width: 749px) {
  #shopify-section-template--31451677294934__section_QjTCc4
  .button-custom--AM01TSkh3d1pnTVZHR__button_UmmhpQ {
    left: 0px !important; /* positivo = derecha */
    top: 0px !important;  /* positivo = abajo */
  }
}/* Color real del contorno del botón sticky */
#shopify-section-template--31436564332886__main
  .sticky-add-to-cart__button,
#shopify-section-template--31436564332886__main
  .sticky-add-to-cart__button:hover {
  box-shadow: inset 0 0 0 3px #D2A246 !important;
}
/* ==================================================
   ELDORO · TIPOGRAFÍA SOLO FICHA DE PRODUCTO
   Cambia únicamente los números de este bloque
   ================================================== */

#shopify-section-template--31436564332886__main {
  --eldoro-product-title: 30px;
  --eldoro-product-price: 18px;
  --eldoro-product-text: 16px;
  --eldoro-product-small: 16px;
  --eldoro-accordion-title: 16px;
  --summary-font-size 
}
/* Títulos de acordeones: solo ficha de producto */
#shopify-section-template--31436564332886__main
  .details__header,
#shopify-section-template--31436564332886__main
  .details__header * {
  font-size: 16px !important;
}

/* Título */
#shopify-section-template--31436564332886__main h1 {
  font-size: var(--eldoro-product-title) !important;
}

/* Precio */
#shopify-section-template--31436564332886__main product-price,
#shopify-section-template--31436564332886__main .price {
  font-size: var(--eldoro-product-price) !important;
}

/* Texto descriptivo de la ficha */
#shopify-section-template--31436564332886__main .product-description,
#shopify-section-template--31436564332886__main .rte,
#shopify-section-template--31436564332886__main .rte p {
  font-size: var(--eldoro-product-text) !important;
}

/* Textos secundarios */
#shopify-section-template--31436564332886__main small,
#shopify-section-template--31436564332886__main .caption {
  font-size: var(--eldoro-product-small) !important;
}
/* OCULTAR ESTE PIE SOLO EN LA FICHA DE PRODUCTO */
body:has(#shopify-section-template--31436564332886__main)
#shopify-section-sections--31436564496726__footer_m9NzUG {
  display: none !important;
}
/* MENÚ CAFÉ · DESPLEGABLE COMPACTO EN ESCRITORIO */
@media screen and (min-width: 750px) {

  /* Flecha junto a Café */
  #header-component .menu-list__link[aria-haspopup="true"]::after {
    content: "⌄";
    display: inline-block;
    margin-left: 6px;
    font-size: 14px;
    line-height: 1;
  }

  /* Caja compacta del desplegable */
  #header-component .menu-list__list-item {
    position: relative !important;
  }

  #header-component .menu-list__list-item > .menu-list__submenu {
    width: max-content !important;
    min-width: 230px !important;
    max-width: 320px !important;
    left: 0 !important;
    right: auto !important;
    top: 100% !important;
    padding: 0 !important;
  }

  #header-component .menu-list__submenu-inner {
    padding: 12px 16px !important;
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.10) !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12) !important;
  }

  /* Los dos productos, uno debajo del otro */
  #header-component .mega-menu__grid,
  #header-component .dropdown-menu__list {
    display: block !important;
  }

  #header-component .mega-menu__link,
  #header-component .dropdown-menu__link {
    display: block !important;
    width: auto !important;
    padding: 9px 4px !important;
    white-space: nowrap !important;
  }

  #header-component .mega-menu__link-title,
  #header-component .dropdown-menu__link-title {
    white-space: nowrap !important;
  }
}/* SUBMENÚ CAFÉ · PEGADO AL ENLACE, SIN ABRIR EL HEADER */
@media screen and (min-width: 750px) {
  #header-component .menu-list__list-item > .menu-list__submenu {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 0 !important;
  }

  /* Evita la franja blanca que abre el encabezado hacia abajo */
  #header-component .header__underlay-open {
    height: var(--header-height) !important;
  }
}
/* SUBMENÚ CAFÉ · ACERCARLO AL ENLACE EN ESCRITORIO */
@media screen and (min-width: 750px) {
  #header-component .menu-list__list-item > .menu-list__submenu {
    transform: translateY(-60px) !important;
  }
}
/* SUBMENÚ CAFÉ · TARJETAS MÁS ANCHAS PARA VER EL NOMBRE ENTERO */
@media screen and (min-width: 750px) {
  #header-component .menu-list__list-item > .menu-list__submenu {
    width: 560px !important;
    min-width: 560px !important;
    max-width: 560px !important;
  }

  #header-component .mega-menu__content-list--products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
/* SUBMENÚ CAFÉ · INVERTIR ORDEN DE LAS DOS TARJETAS */
@media screen and (min-width: 750px) {
  #header-component .mega-menu__content-list--products > :first-child {
    order: 2 !important;
  }

  #header-component .mega-menu__content-list--products > :nth-child(2) {
    order: 1 !important;
  }
}
/* ==================================================
   ELDORO · SUBMENÚ CAFÉ CON PRODUCTOS
   SOLO ESCRITORIO
   ================================================== */

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

  /* Línea dorada al pasar por Café, La marca o Contacto */
  #header-component .menu-list__link {
    position: relative !important;
  }

  #header-component .menu-list__link::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -9px !important;
    height: 2px !important;
    background: #D2A246 !important;
    transform: scaleX(0) !important;
    transform-origin: left center !important;
    transition: transform 180ms ease !important;
  }

  #header-component .menu-list__link:hover::before,
  #header-component .menu-list__link:focus-visible::before {
    transform: scaleX(1) !important;
  }

  /* Flecha fija junto a Café */
  #header-component .menu-list__list-item:first-child > .menu-list__link::after {
    content: "⌄" !important;
    display: inline-block !important;
    margin-left: 6px !important;
    font-size: 14px !important;
    line-height: 1 !important;
    vertical-align: 1px !important;
  }

  /* Caja del submenú: pegada al header, sin hueco de Hero */
  #header-component .menu-list__list-item {
    position: relative !important;
  }

  #header-component .menu-list__list-item > .menu-list__submenu {
    width: 560px !important;
    min-width: 560px !important;
    max-width: 560px !important;
    left: 0 !important;
    right: auto !important;
    top: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateY(-68px) !important;
    z-index: 20 !important;
  }

  #header-component .menu-list__submenu-inner {
    padding: 18px 20px 20px !important;
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.10) !important;
    border-radius: 8px !important;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.14) !important;
  }

  /* Oculta los dos nombres que ahora aparecen encima de las fotos */
  #header-component .menu-list__submenu .mega-menu__list {
    display: none !important;
  }

  /* Deja las dos tarjetas ocupando todo el ancho */
  #header-component .menu-list__submenu .mega-menu__content {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  #header-component .mega-menu__content-list--products {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* El Único a la izquierda · Pack a la derecha */
  #header-component .mega-menu__content-list--products > :first-child {
    order: 2 !important;
  }

  #header-component .mega-menu__content-list--products > :nth-child(2) {
    order: 1 !important;
  }

  /* Título y precio en la misma línea */
  #header-component .mega-menu__content-list--products .resource-card__content,
  #header-component .mega-menu__content-list--products .resource-card__details {
    display: flex !important;
    align-items: baseline !important;
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
  }

  #header-component .mega-menu__content-list--products .resource-card__title,
  #header-component .mega-menu__content-list--products .resource-card__price {
    margin: 0 !important;
  }
}/* AJUSTES FINALES · SUBMENÚ CAFÉ */
@media screen and (min-width: 750px) {

  /* Usa la flecha real de Horizon junto a Café */
  #header-component .menu-list__list-item:first-child > .menu-list__link::after {
    content: none !important;
  }

  #header-component .menu-list__trigger {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  #header-component .menu-list__disclosure {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 12px !important;
    height: 12px !important;
    padding: 0 !important;
    pointer-events: none !important;
  }

  #header-component .menu-list__disclosure-icon {
    display: block !important;
    width: 10px !important;
    height: 10px !important;
  }

  /* Título a la izquierda y precio alineado al final de la última línea */
  #header-component .mega-menu__content-list--products .resource-card__content {
    display: flex !important;
    align-items: flex-end !important;
    gap: 8px !important;
  }

  #header-component .mega-menu__content-list--products .resource-card__title {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  #header-component
  .mega-menu__content-list--products
  .resource-card__content
  > div[ref="priceContainer"] {
    flex: 0 0 auto !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }

  #header-component
  .mega-menu__content-list--products
  .resource-card__content
  .price {
    display: block !important;
    margin: 0 !important;
  }
}/* FLECHA FIJA EN CAFÉ + PRECIO JUNTO AL TÍTULO */
@media screen and (min-width: 750px) {

  /* Flecha visible justo tras la palabra Café */
  #header-component
  .menu-list__list-item:first-child
  .menu-list__link-title::after {
    content: "⌄" !important;
    display: inline-block !important;
    margin-left: 6px !important;
    font-size: 14px !important;
    line-height: 1 !important;
    vertical-align: 1px !important;
  }

  /* El precio no baja: queda junto al final del nombre */
  #header-component .mega-menu__content-list--products .resource-card__content {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-end !important;
    gap: 7px !important;
  }

  #header-component .mega-menu__content-list--products .resource-card__title {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }

  #header-component
  .mega-menu__content-list--products
  .resource-card__content
  > div[ref="priceContainer"] {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }
}/* CORRECCIÓN FINAL · NOMBRE, PRECIO Y FLECHA */
@media screen and (min-width: 750px) {

  /* Nombre visible + precio al lado de la última línea */
  #header-component .mega-menu__content-list--products .resource-card__content {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: end !important;
    column-gap: 8px !important;
  }

  #header-component .mega-menu__content-list--products .resource-card__title {
    display: block !important;
    min-width: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    white-space: normal !important;
    text-overflow: clip !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
  }

  #header-component
  .mega-menu__content-list--products
  .resource-card__content
  > div[ref="priceContainer"] {
    display: block !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }

  /* Flecha de Café: más visible y centrada */
  #header-component
  .menu-list__list-item:first-child
  > .menu-list__trigger
  .menu-list__link-title::after {
    font-size: 16px !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    position: relative !important;
    top: -1px !important;
    margin-left: 7px !important;
  }
}/* ELDORO — alineación flecha Café y submenú desktop */
@media screen and (min-width: 750px) {

  /* Flecha centrada verticalmente con “Café” */
  #header-component
  .menu-list__list-item:first-child
  > .menu-list__trigger {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  #header-component
  .menu-list__list-item:first-child
  > .menu-list__trigger
  .menu-list__link-title::after {
    position: static !important;
    display: inline-block !important;
    margin-left: 6px !important;
    font-size: 16px !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    transform: translateY(1px) !important;
  }

  /* El submenú empieza justo en la línea entre cabecera blanca y hero */
  #header-component
  .menu-list__list-item
  > .menu-list__submenu {
    transform: translateY(-61px) !important;
  }
}/* ELDORO — flecha centrada junto a Café */
@media screen and (min-width: 750px) {
  #header-component .menu-list__list-item:first-child
  > .menu-list__trigger .menu-list__link-title {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding-right: 0 !important;
  }

  #header-component .menu-list__list-item:first-child
  > .menu-list__trigger .menu-list__link-title::after {
    content: "" !important;
    position: static !important;
    display: block !important;
    flex: 0 0 10px !important;
    width: 10px !important;
    height: 6px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    transform: none !important;
    background: currentColor !important;
    clip-path: polygon(
      0 0, 50% 65%, 100% 0,
      100% 35%, 50% 100%, 0 35%
    ) !important;
  }
}/* Espacio después de Café + flecha — escritorio */
@media screen and (min-width: 750px) {
  #header-component
  .menu-list__list-item:first-child
  > .menu-list__trigger {
    margin-right: 12px !important;
  }
}/* ELDORO — Diseño del banner de cookies */
#shopify-pc__banner {
  box-sizing: border-box !important;
  width: min(480px, calc(100vw - 32px)) !important;
  max-width: none !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  padding: 36px 30px 24px !important;
  border-radius: 20px !important;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
}

#shopify-pc__banner .shopify-pc__banner__wrapper {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}

#shopify-pc__banner .shopify-pc__banner__body {
  width: 100% !important;
  margin: 0 !important;
  text-align: center !important;
}

#shopify-pc__banner #shopify-pc__banner__body-title {
  margin: 0 0 16px !important;
  font-size: 23px !important;
  line-height: 1.2 !important;
  text-align: center !important;
}

#shopify-pc__banner .shopify-pc__banner__body p {
  font-size: 15px !important;
  line-height: 1.55 !important;
  text-align: center !important;
}

#shopify-pc__banner .shopify-pc__banner__btns {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  width: 100% !important;
  margin: 0 !important;
}

#shopify-pc__banner .shopify-pc__banner__btns button {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 14px 10px !important;
  border-radius: 6px !important;
}

#shopify-pc__banner #shopify-pc__banner__btn-accept {
  grid-column: 1;
  grid-row: 1;
}

#shopify-pc__banner #shopify-pc__banner__btn-decline {
  grid-column: 2;
  grid-row: 1;
}

#shopify-pc__banner #shopify-pc__banner__btn-manage-prefs {
  grid-column: 1 / -1;
  grid-row: 2;
  padding: 8px !important;
}

@media (max-width: 480px) {
  #shopify-pc__banner {
    padding: 28px 22px 20px !important;
  }

  #shopify-pc__banner #shopify-pc__banner__body-title {
    font-size: 21px !important;
  }
}/* Contorno de los botones de cookies */
#shopify-pc__banner {
  --eldoro-contorno-boton: #ffffff; /* Blanco */
}

#shopify-pc__banner #shopify-pc__banner__btn-accept,
#shopify-pc__banner #shopify-pc__banner__btn-decline {
  border: 1px solid var(--eldoro-contorno-boton) !important;
}/* Aceptar: fondo y contorno dorados */
#shopify-pc__banner #shopify-pc__banner__btn-accept {
  background-color: #D2A246 !important;
  border-color: #D2A246 !important;
  color: #000000 !important;
}
/* ELDORO: ocultar el precio de la derecha */
cart-drawer-component .cart-items__price {
  display: none !important;
}

/* ELDORO: diseño de la barra de envío gratis */
.eldoro-envio {
  box-sizing: border-box;
  width: 100%;
  margin: 12px 0 20px;
  padding: 16px;
  border: 1px solid #e4dacd;
  border-radius: 10px;
  background: #f5f0e8;
  color: #25221e;
  font-family: inherit;
}

.eldoro-envio .eldoro-envio__mensaje {
  margin: 0 0 12px;
  color: #25221e;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

.eldoro-envio__mensaje strong {
  font-weight: 600;
}

.eldoro-envio__barra {
  display: block;
  width: 100%;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #e2d8cb;
}

.eldoro-envio__relleno {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #a67c52;
  transition: width 0.35s ease;
}

.eldoro-envio .eldoro-envio__nota {
  margin: 9px 0 0;
  color: #62574b;
  font-size: 11px;
  line-height: 1.4;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .eldoro-envio__relleno {
    transition: none;
  }
}