/** Shopify CDN: Minification failed

Line 393:0 Expected "}" to go with "{"

**/
.tooltip {
  --translate-x: -50%;
  --scale: 0.85;
  --translate-y: 0;
  position: absolute;
  background-color: rgb(var(--color-foreground));
  color: rgb(var(--color-background));
  padding: 0.3rem 1.6rem;
  border-radius: var(--medium-blocks-radius);
  z-index: 10;
  inset-block-end: calc(100% + 1.5rem);
  width: max-content;
  inset-inline-start: 50%;
  transform: translate(var(--translate-x), var(--translate-y)) scale(var(--scale));
  opacity: 0;
  transition: transform var(--animation-default), opacity var(--animation-default);
  font-size: calc(var(--font-body-size) * 0.9);
  transform-origin: center;
  transform-origin: center;
  backface-visibility: hidden;
  will-change: transform;
}
.tooltip::after {
  --tw-translate-x: -50%;
  --tw-translate-y: 0;
  position: absolute;
  inset-inline-start: 50%;
  transform: translate(var(--translate-x), var(--translate-y)) scale(var(--scale));
  border-color: rgb(var(--color-foreground)) transparent;
  border-style: solid;
  border-width: 10px 10px 0;
  inset-block-end: -7px;
  content: "";
  display: block;
  width: 0;
}

[data-tooltip] {
  position: relative;
}

[data-tooltip=bottom] .tooltip {
  inset-block-end: auto;
  inset-block-start: calc(100% + 1.5rem);
}
[data-tooltip=bottom] .tooltip::after {
  inset-block-end: auto;
  inset-block-start: -7px;
  border-width: 0 10px 10px;
}

@media screen and (pointer: fine) {
  [data-tooltip]:hover .tooltip {
    --scale: 1;
    opacity: 1;
    transform-origin: center;
  }
  /* ==========================================
   Marco variant information tooltips
   ========================================== */

.marco-info-tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 7px;
  vertical-align: middle;
  cursor: help;
  overflow: visible;
}

.marco-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
}

.marco-tooltip-text {
  position: absolute;
  z-index: 9999;
  left: 50%;
  bottom: calc(100% + 12px);
  width: 280px;
  padding: 12px 14px;

  background: #1d356d;
  color: #ffffff;

  border-radius: 8px;

  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  white-space: normal;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform: translate(-50%, 5px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s ease;

  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.18);
}

.marco-tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);

  border-width: 6px;
  border-style: solid;
  border-color: #1d356d transparent transparent transparent;
}

/* Desktop hover + keyboard focus */
.marco-info-tooltip:hover .marco-tooltip-text,
.marco-info-tooltip:focus .marco-tooltip-text,
.marco-info-tooltip:focus-within .marco-tooltip-text {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* Mobile adjustments */
@media screen and (max-width: 749px) {
  .marco-tooltip-text {
    width: min(250px, 75vw);
    font-size: 12px;
  }
}

/* Marco additional price */

.marco-option-wrapper > label {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
}

.marco-option-name {
  display: block;
  line-height: 1.25;
}

.marco-option-price {
  display: block;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 600;
  opacity: 0.8;
  white-space: nowrap;
}

/* Keep selected button price readable */
.product-form__input input[type="radio"]:checked
  + .marco-option-wrapper
  .marco-option-price {
  opacity: 1;
}

/* =========================================
   MARCO VARIANT OPTIONS
   ========================================= */

.product-form__input .marco-option-label {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  min-height: 72px;
  padding: 10px 14px !important;
  line-height: 1.2;
  text-align: center;
}

.marco-option-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
}

.marco-option-name {
  display: inline-block;
  line-height: 1.2;
}

.marco-option-price {
  display: block !important;
  width: 100%;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}

/* Keep info icon beside option name */
.marco-option-top .marco-info-tooltip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Selected option */
.product-form__input input:checked + .marco-option-label .marco-option-price {
  color: inherit;
}

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

  /* Three compact Marco options in one row */
  .product-form__input:has(.marco-option-label) {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100%;
  }

  .product-form__input:has(.marco-option-label) .marco-option-label {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 72px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 8px 5px !important;

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

    box-sizing: border-box;
  }

  .marco-option-top {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    width: 100%;
  }

  .marco-option-name {
    font-size: 13px !important;
    line-height: 1.15 !important;
    text-align: center;
  }

  .marco-info-icon {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    font-size: 12px !important;
  }

  .marco-option-price {
    display: block !important;
    margin-top: 5px !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
  }
}
/* =========================================
   FIX MARCO TOOLTIP OVERFLOW
   ========================================= */

/* Allow tooltip to escape variant containers */
.product-form__input,
.product-form__input--button,
variant-selects,
.product__info-container,
.product-info {
  overflow: visible !important;
}

/* Last Marco option: open tooltip toward the LEFT */
.product-form__input:has(.marco-option-label)
.marco-option-label:last-of-type
.marco-tooltip-text {
  left: auto !important;
  right: -10px !important;
  transform: none !important;
}

/* Tooltip should stay above surrounding content */
.marco-info-tooltip {
  position: relative;
  z-index: 20;
}

.marco-tooltip-text {
  z-index: 9999 !important;
  width: 280px;
  max-width: min(280px, calc(100vw - 30px));
  white-space: normal;
}

/* Prevent stale selected appearance on Marco buttons */
.product-form__input:has(.marco-option-label)
input[type="radio"]:not(:checked) + .marco-option-label {
  background: transparent !important;
  color: rgb(var(--color-foreground)) !important;
}

.product-form__input:has(.marco-option-label)
input[type="radio"]:checked + .marco-option-label {
  background: rgb(var(--color-button)) !important;
  color: rgb(var(--color-button-text)) !important;
}

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

  .product-form__input:has(.marco-option-label) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .product-form__input:has(.marco-option-label)
  .marco-option-label:first-of-type {
    grid-column: 1 / -1;
  }
}
/* =========================================
   FIX SIN MARCO TOOLTIP ON MOBILE
   ========================================= */

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

  /* First Marco option = Sin marco */
  .product-form__input:has(.marco-option-label)
  .marco-option-label:first-of-type
  .marco-tooltip-text {
    left: -10px !important;
    right: auto !important;
    transform: none !important;
    width: 260px !important;
    max-width: calc(100vw - 40px) !important;
  }

  /* Keep tooltip visible when opened */
  .product-form__input:has(.marco-option-label)
  .marco-option-label:first-of-type
  .marco-info-tooltip:hover .marco-tooltip-text,
  
  .product-form__input:has(.marco-option-label)
  .marco-option-label:first-of-type
  .marco-info-tooltip:focus .marco-tooltip-text,
  
  .product-form__input:has(.marco-option-label)
  .marco-option-label:first-of-type
  .marco-info-tooltip:focus-within .marco-tooltip-text {
    transform: none !important;
  }

  /* Move tooltip arrow toward Sin marco info icon */
  .product-form__input:has(.marco-option-label)
  .marco-option-label:first-of-type
  .marco-tooltip-text::after {
    left: 145px !important;
    transform: translateX(-50%) !important;
  }