/** Shopify CDN: Minification failed

Line 629:1 Expected "}" to go with "{"

**/
/* --------------------------------
  CARD BASE STRUCTURE

  - card
    - card media
    - card body
    - quickbuy / hotspot
-------------------------------- */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--card-border-radius);
  color: var(--color-card-foreground);
  background: var(--color-card-background);
}
.card-media {
  position: relative;
  overflow: hidden;
}
.card-media figure {
  border-radius: calc(var(--card-border-radius) / 1.5);
  overflow: hidden;
}
.card-body {
  padding: var(--card-body-padding);
}

.card-media-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: var(--card-body-padding);
}

/* Second image on hover */
.card-hover-images {
  position: relative;
  overflow: hidden;
}
.card-hover-images > *:last-child {
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

@media (hover: hover) {
  .card .media > * {
    transition: transform 0.4s ease-in-out;
  }
  .card:hover .media > * {
    transform: scale(1.1);
  }
  .card.on-hover:hover .card-hover-images > *:first-child > * {
    opacity: 0;
  }
  .card.on-hover:hover .card-hover-images > *:last-child {
    opacity: 1;
  }
}

/* Color utilities */
.card.bg-gradient {
  --color-card-background: var(--gradient-card-background)
}
.card.bg-transparent {
  --color-card-background: transparent;
}


/* --------------------------------
  CARD TYPES
-------------------------------- */

/* Traditional */
.card--traditional {
  background: transparent;
  color: inherit;
}
.card--traditional .card-media {
  border-radius: var(--card-border-radius);
  background: var(--color-card-background);
}
.card--traditional .card-body {
  padding: var(--card-body-padding) 0; 
}

/* Banner */
.card--banner .card-media {
  height: 100%;
  width: 100%;
  position: absolute;
}
.card--banner .media,
.card--banner .media img {
  height: 100%;
}
.card--banner .video {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
@media only screen and (max-width: 767px) {
  .card--banner.sm-down-all-cols .card-media {
    position: relative;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .card--banner.sm-md-all-cols .card-media {
    position: relative;
  }
}
@media only screen and (min-width: 1024px) {
  .card--banner.md-all-cols .card-media {
    position: relative;
  }
}

/* Testimonial */
.card--testimonial .quotation-mark {
  height: 35%;
}

/* Collection */
.card--collection .badges {
  position: absolute;
  top: var(--card-body-padding);
}
.card--collection .vertical-top .badges {
  top: auto;
  bottom: var(--card-body-padding);
}

/* Product */
.card--product.content--none .card-body,
.card--product.content--name-only .card-body > *:not(.card-title),
.card--product.content--name-and-price .card-body > *:not(.card-title, .price) {
  display: none;
}

/* Hotspot */
.card--default:not(.layout--thumbnail) .hotspot {
  position: absolute !important;
  top: 20px;
  right: 20px;
}


/* --------------------------------
  CARD THUMBNAIL LAYOUT
-------------------------------- */
.layout--thumbnail {
  --thumbnail-width: 90px;
  display: grid;
  grid-template-columns: var(--thumbnail-width) auto auto;
  align-items: center;
}
.layout--thumbnail .card-body {
  text-align: left;
  padding: min(16px, var(--card-body-padding));
}
.layout--thumbnail .flex {
  justify-content: flex-start !important;
}
.layout--thumbnail .card-media-overlay,
.layout--thumbnail .card-vendor,
.layout--thumbnail .swatches {
  display: none;
}
.layout--thumbnail .hotspot {
  margin-left: auto;
  margin-right: 16px;
  width: 30px;
  height: 30px;
}

.card-body .badges {
  margin-bottom: 8px;
  display: none;
}
.layout--thumbnail .card-body .badges {
  display: flex;
}
.card-body ul {
  list-style: inside disc;
}
.card-body ul li::marker {
  margin-right: 4px;
}

/* Thumbnail responsive classes – SM DOWN */
@media only screen and (max-width: 767px) {
  .sm-down-layout--thumbnail {
    --thumbnail-width: 90px;
    display: grid;
    grid-template-columns: var(--thumbnail-width) auto auto;
    align-items: center;
  }
  .sm-down-layout--thumbnail .card-body {
    text-align: left;
    padding: min(16px, var(--card-body-padding));
  }
  .sm-down-layout--thumbnail .flex {
    justify-content: flex-start !important;
  }
  .sm-down-layout--thumbnail .card-media-overlay,
  .sm-down-layout--thumbnail .card-vendor,
  .sm-down-layout--thumbnail .swatches {
    display: none;
  }
  .sm-down-layout--thumbnail .card-body .badges {
    display: flex;
  }
}
/* Thumbnail responsive classes – SM */
@media only screen and (min-width: 768px) {
  .sm-layout--thumbnail {
    --thumbnail-width: 90px;
    display: grid;
    grid-template-columns: var(--thumbnail-width) auto auto;
    align-items: center;
  }
  .sm-layout--thumbnail .card-body {
    text-align: left;
    padding: min(16px, var(--card-body-padding));
  }
  .sm-layout--thumbnail .flex {
    justify-content: flex-start !important;
  }
  .sm-layout--thumbnail .card-media-overlay,
  .sm-layout--thumbnail .card-vendor,
  .sm-layout--thumbnail .swatches {
    display: none;
  }
  .sm-layout--thumbnail .card-body .badges {
    display: flex;
  }
}


/* --------------------------------
  VARIANT BUTTONS
-------------------------------- */
.options-availability {
  gap: 8px;
}
.variant-option-title {
  position: relative;
  padding: 2px 6px;
  background: var(--color-background);
  color: var(--color-foreground);
  text-align: center;
  min-width: 30px;
  border-radius: var(--button-border-radius);
}
.variant-option-title.unavailable {
  opacity: 0.45;
}
.variant-option-title.unavailable::after {
  display: block;
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  transform: rotate(-45deg);
  border-left: solid 1px var(--color-foreground);
 }


/* --------------------------------
  QUICK BUY
-------------------------------- */
.card quick-buy {
  position: absolute;
  /* bottom: 0px;
  right: var(--card-body-padding); */
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease-in;
  --quick-buy-offset: var(--card-body-padding);
}
.card--traditional quick-buy {
  --quick-buy-offset: 0;
}

quick-buy.full-width {
  left: var(--quick-buy-offset);
  right: var(--quick-buy-offset);
}
quick-buy.position--top { top: var(--quick-buy-offset); }
quick-buy.position--middle { top: 50%; transform: translateY(-50%); }
quick-buy.position--bottom { bottom: var(--quick-buy-offset); }

quick-buy.position--top-left { top: var(--quick-buy-offset); left: var(--quick-buy-offset); }
quick-buy.position--top-center { top: var(--quick-buy-offset); left: 50%; transform:translateX(-50%); }
quick-buy.position--top-right { top: var(--quick-buy-offset); right: var(--quick-buy-offset); }

quick-buy.position--middle-left { top: 50%; left: var(--quick-buy-offset); transform: translateY(-50%); }
quick-buy.position--middle-center { top: 50%; left: 50%; transform:translateX(-50%) translateY(-50%); }
quick-buy.position--middle-right { top: 50%; right: var(--quick-buy-offset); transform: translateY(-50%); }

quick-buy.position--bottom-left { bottom: var(--quick-buy-offset); left: var(--quick-buy-offset); }
quick-buy.position--bottom-center { bottom: var(--quick-buy-offset); left: 50%; transform:translateX(-50%); }
quick-buy.position--bottom-right { bottom: var(--quick-buy-offset); right: var(--quick-buy-offset); }


.card quick-buy .btn {
  display: block !important;
}
@media (hover:hover) {
  .card:hover quick-buy {
    opacity: 1;
    pointer-events: auto;
  }
}
.card quick-buy:focus-within {
  opacity: 1;
  pointer-events: auto;
  bottom: var(--card-body-padding);
}
.quick-buy_icon {
  display: none;
  pointer-events: none;
}

.layout--thumbnail quick-buy {
  position: relative;
  align-self: center;
  opacity: 1;
  width: auto;
  margin-left: auto;
  margin-right: 16px;
  pointer-events: auto;

  left: auto !important;
  bottom: auto !important;
  top: auto !important;
  right: auto !important;
  transform: none !important;
}
.layout--thumbnail quick-buy .btn {
  padding: 10px !important;
  width: 44px;
  height: 44px;
  display: flex !important;
  justify-content: center;
  align-items: center;
}
.layout--thumbnail .quick-buy_text {
  display: none;
}
.layout--thumbnail .quick-buy_icon {
  display: flex;
}
@media only screen and (max-width: 767px) {
  .sm-down-layout--thumbnail quick-buy {
    position: relative;
    align-self: center;
    opacity: 1;
    width: auto;
    margin-left: auto;
    margin-right: 16px;

    left: auto !important;
    bottom: auto !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
  }
  .sm-down-layout--thumbnail quick-buy .btn {
    padding: 10px !important;
    width: 44px;
    height: 44px;
    display: flex !important;
    justify-content: center;
    align-items: center;
  }
  .sm-down-layout--thumbnail .quick-buy_text {
    display: none;
  }
  .sm-down-layout--thumbnail .quick-buy_icon {
    display: flex;
  }
}
@media only screen and (min-width: 768px) {
  .sm-layout--thumbnail quick-buy {
    position: relative;
    align-self: center;
    opacity: 1;
    width: auto;
    margin-left: auto;
    margin-right: 16px;

    left: auto !important;
    bottom: auto !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
  }
  .sm-layout--thumbnail quick-buy .btn {
    padding: 10px !important;
    width: 44px;
    height: 44px;
    display: flex !important;
    justify-content: center;
    align-items: center;
  }
  .sm-layout--thumbnail .quick-buy_text {
    display: none;
  }
  .sm-layout--thumbnail .quick-buy_icon {
    display: flex;
  }
/* ==========
   BADGE DE INVENTARIO
   ========== */

.card__media {
  position: relative; /* referencia para el badge */
}

.card__media > .card-media-overlay {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 20;
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  align-items: flex-start;
  pointer-events: none; /* no bloquea el click */
}

.mpt-badge {
  background: #d32f2f; /* rojo AGOTADO */
  color: #fff;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  pointer-events: none; /* tampoco bloquea */
}

.mpt-badge--low {
  background: #ff9800; /* naranja */
  color: #111;
}

@media (min-width: 768px){
  .mpt-badge {
    font-size: 13px;
    padding: 8px 14px;
  }
}

/* Ocultar los badges solo en la sección marcada con no-badge */
.no-badge .card__media > .card-media-overlay { display: none !important; }

/* Ocultar badge en secciones de hero/look de la home */
.section-featured-look .card__media > .card-media-overlay,
.section-image-duo-with-text .card__media > .card-media-overlay,
.section-image-with-text-overlay .card__media > .card-media-overlay {
  display: none !important;
}

/* --- Contenedor de la imagen como referencia --- */
.card__media { position: relative; }

/* 1) Overlay DENTRO de .card__media (hija directa o descendiente) */
.card__media > .card-media-overlay,
.card__media .card-media-overlay {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 20;
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  align-items: flex-start;
  pointer-events: none; /* no bloquea el click */
}

/* 2) Overlay como HERMANA inmediata de .card__media (algunos layouts móviles) */
.card .card__media + .card-media-overlay {
  position: absolute;
  top: 10px;
  right: 10px;
  left: auto;
  z-index: 20;
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  align-items: flex-start;
  pointer-events: none;
}

/* Asegura que el contenedor que tiene la imagen “encienda” el stacking */
.card,
.card * { position: relative; }

/* Badge tipo “pill” – forzamos estilo para que no lo sobreescriba el tema en móvil */
.mpt-badge {
  background: #d32f2f !important;
  color: #fff !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.18) !important;
  pointer-events: none !important;
}

/* Variación para pocas unidades */
.mpt-badge--low { background: #ff9800 !important; color: #111 !important; }

/* En móvil hacemos el badge un poco más compacto */
@media (max-width: 480px){
  .card__media > .card-media-overlay,
  .card__media .card-media-overlay,
  .card .card__media + .card-media-overlay { top: 8px; right: 8px; }

  .mpt-badge { font-size: 11px !important; padding: 6px 10px !important; }
}

/* Por si algún estilo del tema habilita eventos en overlay/badge */
.card__media > .card-media-overlay *,
.card .card__media + .card-media-overlay * { pointer-events: none !important; }

/* ===== Fix móvil para overlays en cualquier estructura de la card ===== */
@media (max-width: 767px){
  /* La card será el contenedor de referencia sí o sí */
  .card { position: relative; }

  /* Posiciona la overlay esté donde esté dentro de la card */
  .card .card-media-overlay{
    position: absolute !important;
    top: 8px;
    right: 8px;
    left: auto;
    z-index: 30;
    display: flex !important;
    gap: 6px;
    align-items: flex-start;
    justify-content: flex-end;
    pointer-events: none !important; /* no bloquea el click al producto */
    margin: 0 !important;
    transform: none !important;
  }

  /* Fuerza el estilo de “pill” para que no se vea texto plano */
  .card .card-media-overlay .mpt-badge{
    background: #d32f2f !important;   /* rojo AGOTADO */
    color: #fff !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    font-weight: 800 !important;
    font-size: 12px !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.18) !important;
    pointer-events: none !important;
  }
  .card .card-media-overlay .mpt-badge--low{
    background: #ff9800 !important;   /* naranja para "Quedan X" */
    color: #111 !important;
  }

  /* Asegura que nada dentro capture el click */
  .card .card-media-overlay * { pointer-events: none !important; }
}

/* ===== Fix robusto para móvil ===== */
@media (max-width: 767px){
  /* Ancla la overlay esté donde esté dentro de la card */
  .card { position: relative; }
  .card .card-media-overlay{
    position: absolute !important;
    top: 8px; right: 8px; left: auto;
    z-index: 30;
    display: flex !important;
    gap: 6px;
    align-items: flex-start;
    justify-content: flex-end;
    margin: 0 !important;
    transform: none !important;
    pointer-events: none !important;
  }

  /* Si por cualquier motivo el span no trae .mpt-badge, igual lo forzamos */
  .card .card-media-overlay span{
    background: #d32f2f !important;
    color: #fff !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    font-weight: 800 !important;
    font-size: 12px !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.18) !important;
    pointer-events: none !important;
  }
  .card .card-media-overlay .mpt-badge--low,
  .card .card-media-overlay span.mpt-badge--low{
    background: #ff9800 !important;
    color: #111 !important;
  }

  /* Nadie dentro de la overlay debe capturar el click */
  .card .card-media-overlay * { pointer-events: none !important; }
}