/** Shopify CDN: Minification failed

Line 127:0 Unexpected "/"

**/
/* ==================================================
   MEXA — TEXTO JUSTIFICADO GENERAL
   Clase manual para justificar cualquier texto.
   ================================================== */
.text-justify{
  text-align:justify;                         /* Justifica el texto de izquierda a derecha */
  text-justify:inter-word;                    /* Ajusta el espacio entre palabras al justificar */
}
/* ==================================================
   MEXA — PÁGINAS DE POLÍTICAS
   Controla Privacy Policy, Refund Policy,
   Shipping Policy, Terms, etc.
   ================================================== */
.shopify-policy__container{
  max-width:900px!important;                  /* Limita el ancho máximo del contenido */
  width:85%!important;                        /* Usa 85% de la pantalla en tamaños menores */
  margin:0 auto!important;                    /* Centra toda la página horizontalmente */
  padding:0 2rem 5rem!important;              /* Espacio lateral + espacio inferior */
}
.shopify-policy__title,
.shopify-policy__title h1{
  text-align:center!important;                /* Centra el título de la política */
  margin-bottom:2.5rem!important;             /* Espacio entre título y contenido */
  line-height:1.05!important;                 /* Mantiene títulos compactos si ocupan 2 líneas */
}
.shopify-policy__body{
  max-width:900px!important;                  /* Limita el ancho del cuerpo de la política */
  margin:0 auto!important;                    /* Centra el cuerpo horizontalmente */
}
.shopify-policy__body p,
.shopify-policy__body li{
  text-align:justify!important;               /* Justifica párrafos y listas */
  text-justify:inter-word!important;          /* Distribuye espacio entre palabras */
  line-height:1.3!important;                  /* Espacio vertical entre líneas */
  letter-spacing:.015rem!important;           /* Separación muy ligera entre letras */
  font-size:1.55rem!important;                /* Tamaño del texto de las políticas */
  margin-bottom:1.4rem!important;             /* Espacio entre párrafos y elementos de lista */
}
/* ==================================================
   MEXA — PÁGINAS NORMALES DE SHOPIFY
   Amplía las páginas que Dawn marca como "narrow".
   ================================================== */
.shopify-section.section .page-width--narrow{
  max-width:var(--page-width);                /* Permite usar el ancho general configurado en Dawn */
  width:85%;                                  /* Mantiene margen lateral del 15% total */
}
.shopify-section.section .page-width--narrow .rte *{
  text-align:justify;                         /* Justifica el contenido Rich Text de estas páginas */
}
/* ==================================================
   MEXA — POPUPS DE PRODUCTO EN MÓVIL
   Evita desbordamientos y acomoda tablas correctamente.
   Solo se aplica en pantallas de 600px o menos.
   ================================================== */

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

  .product-popup-modal__content-info{
    padding:0!important;                      /* Elimina padding interno del popup */
    margin:0!important;                       /* Elimina márgenes externos */
    width:100%!important;                     /* Usa todo el ancho disponible */
    max-width:100%!important;                 /* Impide que exceda el ancho de pantalla */
    overflow-x:hidden!important;              /* Evita scroll horizontal */
    box-sizing:border-box!important;           /* Incluye padding/borde dentro del ancho total */
  }
  .product-popup-modal__content-info div{
    max-width:100%!important;                 /* Evita que los DIV internos se desborden */
    box-sizing:border-box!important;           /* Mantiene sus dimensiones dentro del contenedor */
    text-align:initial!important;              /* Evita heredar texto justificado dentro del popup */
  }
  .product-popup-modal__content-info table{
    width:100%!important;                     /* Hace que la tabla ocupe todo el popup */
    max-width:100%!important;                 /* Evita que la tabla exceda la pantalla */
    table-layout:fixed!important;              /* Distribuye columnas dentro del ancho disponible */
    margin:0 auto!important;                  /* Centra la tabla */
    display:table!important;                  /* Mantiene comportamiento normal de tabla */
  }
  .product-popup-modal__content-info td,
  .product-popup-modal__content-info th{
    word-break:break-word;                    /* Parte palabras largas si no caben */
    padding:12px 8px!important;               /* Espacio interior de las celdas */
    font-size:13px!important;                  /* Tamaño de texto de las tablas en móvil */
  }
}
/* ==================================================
   MEXA — RICH TEXT GENERAL
   Justifica párrafos generados mediante contenido RTE.
   ================================================== */

.rte > p{
  text-align:justify!important;               /* Justifica párrafos directos dentro de Rich Text */
}
/* ==================================================
   MEXA — DESCRIPCIÓN DEL PRODUCTO
   Justifica contenido DIV dentro de la descripción.
   ================================================== */
.product__description.rte div{
  text-align:justify!important;               /* Justifica los DIV dentro de la descripción del producto */
}
/* ==================================================
   MEXA — PRECIOS DE PRODUCTOS EN OFERTA / LIMITED STOCK
   Controla el precio original tachado y el precio final.
   ================================================== */
s.price-item.price-item--regular{
  color:#000;                                 /* Hace negro el precio original tachado */
  font-weight:800;                            /* Hace más grueso el precio original */
}
span.price-item.price-item--sale.price-item--last{
  color:#e10600;                              /* Hace rojo el precio final de oferta */
  font-weight:700;                            /* Hace bold el precio final de oferta */
}
/* ==================================================
   MEXA — GALERÍA DE PRODUCTO
   Oculta los botones/iconos de zoom sobre las imágenes.
   ================================================== */
.product__media-toggle{
  display:none!important;                     /* Oculta el botón invisible que abre el zoom/modal */
}
.product__modal-opener .product__media-icon{
  display:none!important;                     /* Oculta el icono visual de lupa/zoom sobre la foto */
}
/
/* MEXA — ETIQUETAS NATIVAS VS PERSONALIZADAS */

/* Ocultar únicamente los badges nativos de Dawn */
.price__badge-sold-out,
.price__badge-sale,
.product-card-wrapper .card__badge > .badge {
  display: none !important;
}

/* Mantener visibles las etiquetas de MEXA */
.product-card-wrapper .card__badge {
  visibility: visible !important;
  opacity: 1 !important;
}

.product-card-wrapper .mexa-agotado,
.product-card-wrapper .mexa-precio-especial {
  visibility: visible !important;
  opacity: 1 !important;
}

/* ==================================================
   MEXA — CARD AGOTADA / COLLECTION GRID
   Cuando una card está agotada:
   1. Oculta sus precios.
   2. Oculta PRECIO ESPECIAL.
   3. Deja únicamente AGOTADO en gris carbón.
   SOLO afecta las cards del catálogo.
   ================================================== */
.card .price--sold-out .price-item{
  display:none!important;                     /* Oculta precios de productos agotados */
}
.card .price--sold-out .mexa-precio-especial{
  display:none!important;                     /* Oculta PRECIO ESPECIAL si está agotado */
}

/* ==================================================
   MEXA — FOOTER TOP / LINKS PRINCIPALES
   Organiza los enlaces superiores del footer de forma
   centrada, compacta y estética.
   ================================================== */
.footer__content-top ul.footer-block__details-content{
  display:flex!important;                         /* Coloca los enlaces en una misma fila */
  flex-wrap:wrap!important;                       /* Permite pasar enlaces a otra línea si no caben */
  justify-content:center!important;               /* Centra los enlaces horizontalmente */
  align-items:center!important;                   /* Alinea verticalmente todos los enlaces */
  gap:1rem!important;                             /* Espacio uniforme entre cada enlace */
  margin:0!important;                             /* Elimina márgenes externos de la lista */
  padding:0!important;                            /* Elimina espacio interior de la lista */
  list-style:none!important;                      /* Elimina bullets de la lista */
}
.footer__content-top ul.footer-block__details-content > li{
  margin:0!important;                             /* Elimina márgenes de cada elemento */
  padding:0!important;                            /* Elimina padding de cada elemento */
  list-style:none!important;                      /* Asegura que no aparezcan bullets */
}
.footer__content-top ul.footer-block__details-content > li > a{
  display:inline-block!important;                 /* Mantiene cada enlace como una pieza independiente */
  font-size:1.1rem!important;                     /* Tamaño de los enlaces principales */
  line-height:1.3!important;                      /* Altura de línea compacta */
  font-weight:700!important;                      /* Hace los enlaces bold */
  text-transform:uppercase!important;             /* Convierte los enlaces a MAYÚSCULAS */
  letter-spacing:.05em!important;                 /* Separa ligeramente las letras */
  color:rgba(0,0,0,.85)!important;                /* Negro suavizado */
  text-decoration:none!important;                 /* Elimina el subrayado normal */
}

/* ==================================================
   MEXA — TÍTULO DEL FOOTER TOP
   Controla el encabezado que aparece sobre los links.
   ================================================== */
.footer__content-top .footer-block__heading{
  text-transform:uppercase!important;             /* Mantiene el título en mayúsculas */
  letter-spacing:.12em;                           /* Espaciado boutique entre letras */
  font-weight:700;                                /* Hace el título bold */
  font-size:1.6rem;                               /* Tamaño del título */
  color:#3D6F39;                                  /* Verde olivo oscuro */
  margin:1rem 0 .4rem!important;                  /* Espacio arriba y abajo del título */
  text-align:center;                              /* Centra el título */
}
/* ==================================================
   MEXA — ESPACIADO DEL FOOTER TOP
   Reduce espacios innecesarios entre bloques.
   ================================================== */
.footer__content-top{
  padding-bottom:0!important;                     /* Elimina espacio interior inferior */
  margin-bottom:0!important;                      /* Elimina margen inferior */
}
.footer__content-top .footer-block{
  margin-bottom:0!important;                      /* Elimina espacio inferior de cada bloque */
  padding-bottom:0!important;                     /* Elimina padding inferior de cada bloque */
}
/* ==================================================
   MEXA — HOVER DE LINKS DEL FOOTER
   Efecto al pasar el mouse por enlaces top y bottom.
   ================================================== */

.footer__content-top a:hover,
.footer__content-bottom a:hover{
  text-decoration:underline!important;            /* Subraya el enlace al pasar el mouse */
  opacity:.75!important;                          /* Suaviza ligeramente el enlace durante hover */
}
/* ==================================================
   MEXA — FOOTER TOP EN MÓVIL
   Ajusta tamaños y distribución debajo de 750px.
   ================================================== */

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

  .footer__content-top ul.footer-block__details-content > li > a{
    font-size:1rem!important;                     /* Reduce el tamaño de los enlaces en móvil */
    line-height:1.4!important;                    /* Da un poco más de aire entre líneas */
  }
 .footer__content-top .footer-block__heading{
    font-size:1.4rem;                             /* Reduce el título del footer en móvil */
  }
  .footer__content-top{
    gap:.8rem!important;                          /* Reduce separación entre elementos en móvil */
  }
  .footer__content-top ul.footer-block__details-content{
    justify-content:space-around!important;       /* Distribuye los enlaces por el ancho disponible */
  }
}


/* ==================================================
   MEXA — FOOTER BOTTOM / ÁREA LEGAL
   Controla copyright y enlaces de políticas.
   ================================================== */

.footer__content-bottom{
  text-align:center;                              /* Centra todo el contenido legal */
  text-transform:uppercase;                      /* Convierte el contenido a mayúsculas */
  letter-spacing:.12em;                          /* Separa las letras */
  font-weight:150;                               /* Mantiene el texto legal muy ligero */
  font-size:1.3rem;                              /* Tamaño general del footer inferior */
  padding-top:.5rem;                             /* Espacio interior superior */
  margin-top:1rem;                               /* Separa el footer legal del contenido anterior */
  margin-bottom:0;                               /* Elimina margen inferior */
  border-top:0;                                  /* Elimina la línea superior nativa */
}

/* ==================================================
   MEXA — COPYRIGHT
   Destaca únicamente el copyright en rojo MEXA.
   ================================================== */

.footer__copyright{
  margin-bottom:1rem;                            /* Espacio entre copyright y políticas */
}
.footer__copyright .copyright__content{
  font-size:1.5rem;                              /* Tamaño del copyright */
  font-weight:700;                               /* Hace el copyright bold */
  color:#B90000;                                 /* Rojo MEXA */
  margin-bottom:.5rem;                           /* Espacio debajo del copyright */
}


/* ==================================================
   MEXA — LINKS LEGALES / POLÍTICAS
   Organiza Privacy, Refund, Terms, Shipping, etc.
   ================================================== */

.footer__content-bottom .policies{
  display:flex!important;                        /* Coloca las políticas en una fila flexible */
  flex-wrap:wrap!important;                      /* Permite varias líneas si no caben */
  justify-content:center!important;              /* Centra las políticas */
  align-items:center!important;                  /* Alinea verticalmente los elementos */
  gap:1rem;                                      /* Espacio entre cada política */
  width:100%;                                    /* Utiliza todo el ancho disponible */
  max-width:100%;                                /* Evita superar el ancho del footer */
  margin:0 auto!important;                       /* Centra el bloque */
  padding:0!important;                           /* Elimina padding nativo */
  list-style:none!important;                     /* Elimina bullets */
}
.footer__content-bottom .policies li{
  list-style:none!important;                     /* Elimina bullets de cada política */
  padding:0!important;                           /* Elimina padding de cada elemento */
  margin:0!important;                            /* Elimina márgenes de cada elemento */
  line-height:1.4;                               /* Espaciado vertical de los elementos */
}
.footer__content-bottom .policies a{
  display:inline-block;                          /* Mantiene cada política como una unidad */
  font-size:1.2rem;                              /* Tamaño de los links legales */
  letter-spacing:.08em;                         /* Separa ligeramente las letras */
  text-decoration:none;                         /* Elimina subrayado normal */
  color:rgb(var(--color-foreground));            /* Usa el color de texto del tema */
  white-space:nowrap;                            /* Evita partir una política en dos líneas */
  line-height:1.4;                               /* Altura de línea de los links */
}
/* ==================================================
   MEXA — FOOTER BOTTOM EN MÓVIL
   Reduce los links legales y mejora su distribución.
   ================================================== */

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

  .footer__content-bottom .policies a{
    font-size:.9rem;                             /* Reduce los links legales en móvil */
    letter-spacing:.06em;                       /* Reduce ligeramente el espacio entre letras */
    line-height:1.5;                             /* Aumenta espacio vertical para legibilidad */
    text-align:center;                           /* Centra el texto de cada política */
  }
  .footer__content-bottom .policies{
    justify-content:space-around;                /* Distribuye las políticas en el ancho disponible */
  }
  .footer__content-bottom .policies li{
    margin-bottom:.5rem;                         /* Añade separación vertical entre políticas */
  }
}
/* ==================================================
   MEXA — CAMPO DE PERSONALIZACIÓN
   Controla el texto escrito por el cliente y el
   placeholder del campo para grabado/personalización.
   ================================================== */

.product-customization .field__input{
  color:#000!important;                         /* Texto escrito por el cliente en negro */
  background-color:#fff;                        /* Fondo blanco del campo */
}
.product-customization .field__input::placeholder{
  color:#777;                                   /* Placeholder en gris */
  opacity:1;                                    /* Evita que el navegador lo haga demasiado transparente */
}


/* ==================================================
   MEXA JEWELRY — SMART CART TIMER
   Carrito normal + carrito lateral
   Compatible con fondos blancos y negros
   ================================================== */

.mexa-cart-timer {
  --mexa-timer-accent: #177b49;
  --mexa-timer-glow: rgba(23, 123, 73, .18);

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 7px;

  width: 100%;
  margin: 16px auto 22px;
  padding: 16px 10px;

  background: transparent;
  border: none;
  border-top: 1px solid rgba(100, 150, 115, .22);
  border-bottom: 1px solid rgba(100, 150, 115, .22);
  border-radius: 0;

  text-align: center;
  box-sizing: border-box;
}

.mexa-cart-timer[hidden] {
  display: none !important;
}

/* MENSAJE PRINCIPAL */

.mexa-cart-timer .mexa-reserve-text {
  display: block;
  color: var(--mexa-timer-accent);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 1.3px;
  line-height: 1.5;
  text-transform: uppercase;
  text-align: center;
}

/* NUMEROS DEL COUNTDOWN */

.mexa-cart-timer .mexa-countdown {
  display: block;
  color: var(--mexa-timer-accent);
  font-family: var(--font-heading-family, sans-serif);
  font-size: clamp(34px, 5vw, 44px);
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: 2px;
  font-variant-numeric: tabular-nums;

  background: transparent;
  border: none;

  text-shadow: 0 0 12px var(--mexa-timer-glow);

  animation: mexaTimerLuxuryPulse 1.6s ease-in-out infinite;
}

/* MENSAJE SECUNDARIO INTELIGENTE */

.mexa-cart-timer .mexa-smart-subtitle {
  display: block;
  max-width: 360px;
  margin: 2px auto 0;
  color: rgb(var(--color-foreground));
  opacity: .8;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-transform: none;
  letter-spacing: .2px;
}

/* MODO NEGRO */

html[data-mexa-mode="dark"] .mexa-cart-timer {
  --mexa-timer-accent: #a5eec0;
  --mexa-timer-glow: rgba(165, 238, 192, .28);
}

/* MODO BLANCO */

html[data-mexa-mode="light"] .mexa-cart-timer {
  --mexa-timer-accent: #177b49;
  --mexa-timer-glow: rgba(23, 123, 73, .18);
}

/* ANIMACION NEON SUAVE */

@keyframes mexaTimerLuxuryPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.09);
    opacity: .85;
  }
}

/* CARRITO LATERAL */

#mexa-cart-timer-drawer {
  margin: 12px auto 16px;
  padding: 12px 8px;
}

#mexa-cart-timer-drawer .mexa-countdown {
  font-size: 34px;
}

/* MOVIL */

@media screen and (max-width: 749px) {
  .mexa-cart-timer .mexa-reserve-text {
    font-size: 11px;
  }

  .mexa-cart-timer .mexa-countdown {
    font-size: 36px;
  }

  #mexa-cart-timer-drawer .mexa-countdown {
    font-size: 32px;
  }
}

/* ACCESIBILIDAD */

@media (prefers-reduced-motion: reduce) {
  .mexa-cart-timer .mexa-countdown {
    animation: none;
  }
}
/* MEXA — EVITAR PARPADEO DEL MENSAJE INICIAL */

.mexa-cart-timer:not(.mexa-timer-ready) {
  visibility: hidden !important;
}

.mexa-cart-timer.mexa-timer-ready {
  visibility: visible !important;
}
/* ==================================================
   MEXA — BLINK "ÚLTIMAS PIEZAS / DISCOUNTS"
   Hace rojo y parpadeante el enlace de ofertas
   tanto en menú desktop como en menú móvil.
   ================================================== */

/* MENÚ DESKTOP */

.header__menu-item[href="/collections/ofertas"],
.header__menu-item[href="/en/collections/discounts"]{
  color:#B90000!important;                    /* Pone el enlace en rojo MEXA */
  font-weight:700!important;                   /* Hace el enlace bold */
  animation:mexaBlink 1s infinite!important;   /* Hace parpadear el enlace cada segundo */
}

/* MENÚ MÓVIL / DRAWER */

.menu-drawer__menu-item[href="/collections/ofertas"],
.menu-drawer__menu-item[href="/en/collections/discounts"]{
  color:#B90000!important;                    /* Pone el enlace móvil en rojo MEXA */
  font-weight:700!important;                   /* Hace el enlace móvil bold */
  animation:mexaBlink 1s infinite!important;   /* Aplica el mismo parpadeo en móvil */
}

/* ==================================================
   MEXA — ANIMACIÓN BLINK
   Controla el efecto de aparecer/desaparecer.
   ================================================== */

@keyframes mexaBlink{
  0%{opacity:1;}                              /* Empieza completamente visible */
  50%{opacity:0;}                             /* Desaparece completamente a mitad del ciclo */
  100%{opacity:1;}                            /* Vuelve a aparecer al terminar el ciclo */
}

/* ==================================================
   MEXA — ESTILO GENERAL DE BOTONES
   Uniforma tipografía de botones de compra,
   checkout y botones generales de la tienda.
   ================================================== */

.button,
button,
.cart__checkout-button,
.shopify-payment-button__button,
.product-form__submit{
  text-transform:uppercase!important;         /* Convierte el texto de los botones a MAYÚSCULAS */
  letter-spacing:.10em;                       /* Separa ligeramente las letras */
  font-weight:600;                            /* Hace el texto semibold */
  font-size:1.95rem;                          /* Define el tamaño general del texto de los botones */
}
/* ==================================================
   MEXA — PRECIO EN PÁGINA DE PRODUCTO
   Controla únicamente el precio dentro del producto.
   NO afecta precios de cards, colecciones ni catálogo.
   ================================================== */

.product__info-container .price-item{
  font-weight:900!important;                   /* Hace el precio extra bold */
  font-size:20px!important;                    /* Define el tamaño del precio en product page */
  letter-spacing:.1px;                         /* Añade una separación mínima entre caracteres */
}

.product__info-container .price{
  margin-bottom:3px;                           /* Reduce el espacio debajo del bloque de precio */
}

/* ==================================================
   MEXA — SHOP PAY / PAY IN 4
   Controla el mensaje de pagos a plazos de Shop Pay
   únicamente dentro de la página del producto.
   ================================================== */

.product__info-container .shopify-payment-terms{
  font-size:13px!important;                    /* Define el tamaño del mensaje de Shop Pay */
  color:#555!important;                        /* Usa gris oscuro para mantenerlo discreto */
  opacity:.9;                                  /* Suaviza ligeramente el mensaje */
  margin-top:4px;                              /* Deja un pequeño espacio sobre Shop Pay */
}

.product__info-container .shopify-payment-terms a{
  text-decoration:underline;                   /* Subraya el enlace informativo de Shop Pay */
  text-underline-offset:2px;                   /* Separa ligeramente el subrayado del texto */
}


/* ==================================================
   MEXA — TRUST BADGES EN PRODUCT PAGE
   Controla textos como garantía, envío, seguridad,
   etc. y evita cortes incómodos en móvil.
   ================================================== */

.product__info-container .icon-with-text__item{
  text-align:center;                            /* Centra el contenido de cada trust badge */
  word-break:keep-all;                         /* Evita que palabras como GUARANTEED se partan */
}

.product__info-container .icon-with-text__item span{
  display:block;                               /* Hace que el texto respete correctamente su espacio */
  font-size:12px;                              /* Tamaño del texto de los trust badges */
  line-height:1.2;                             /* Mantiene el texto compacto */
}
/* ==================================================
   MEXA — LUXURY SHIPPING BANNER
   Controla el anuncio de envío/importación que
   aparece dentro de la página del producto.
   ================================================== */

.mexa-shipping-banner{
  margin:1px 0;                                  /* Espacio exterior mínimo arriba y abajo */
  padding:1px 0;                                 /* Espacio interior mínimo arriba y abajo */
  font-size:14px;                                /* Tamaño del mensaje */
  text-align:center;                             /* Centra el anuncio */
  letter-spacing:.10em;                          /* Separa las letras estilo boutique */
  color:#B90000;                                 /* Usa el rojo oficial MEXA */
  font-weight:800;                               /* Hace el mensaje bastante bold */
  text-transform:uppercase;                      /* Convierte el mensaje a MAYÚSCULAS */
  line-height:1;                                 /* Mantiene el banner compacto */
  white-space:pre-line;                          /* Respeta saltos de línea incluidos en el texto */
  animation:mexaShippingBlink 2.6s ease-in-out infinite; /* Aplica un pulso suave exclusivo del shipping banner */
  position:relative;                             /* Permite posicionar elementos internos si se necesitan */
}


/* ==================================================
   MEXA — ANIMACIÓN DEL SHIPPING BANNER
   Pulso muy sutil: NO desaparece el mensaje.
   Tiene nombre propio para no afectar otros blink.
   ================================================== */

@keyframes mexaShippingBlink{
  0%{opacity:1;}                                 /* Comienza completamente visible */
  50%{opacity:.88;}                              /* Baja ligeramente la intensidad */
  100%{opacity:1;}                               /* Regresa a visibilidad completa */
}


/* ==================================================
   MEXA — OCULTAR MENSAJE DE IMPUESTOS / ENVÍO
   Oculta el texto nativo de Shopify relacionado
   con impuestos y envío calculado en checkout.
   ================================================== */

.product__tax{
  display:none!important;                       /* Oculta el mensaje nativo debajo del precio */
}


/* ==================================================
   MEXA — NOTAS DE PERSONALIZACIÓN
   Textos informativos que aparecen antes de los
   campos CUSTOM / INITIAL.
   ================================================== */

.custom-note{
  font-size:1.2rem;                              /* Tamaño de la nota principal */
  font-weight:600;                               /* Hace la nota semibold */
  line-height:1.3;                               /* Mantiene una lectura compacta */
  margin:.8rem 0 .2rem;                          /* Espacio arriba y pequeño espacio abajo */
}

.custom-note-secondary{
  font-size:1.05rem;                             /* Tamaño más pequeño para la nota secundaria */
  line-height:1.35;                              /* Da un poco más de aire al texto */
  margin:0 0 1rem;                               /* Añade espacio debajo de la nota */
  opacity:.75;                                   /* Suaviza visualmente la información secundaria */
}


/* ==================================================
   MEXA — LABEL CUSTOM / INITIAL
   Controla el título que aparece encima del campo.
   ================================================== */

.mexa-custom-label{
  display:block;                                 /* Hace que el label ocupe su propia línea */
  font-size:1.15rem;                             /* Tamaño del título del campo */
  font-weight:700;                               /* Hace el label bold */
  letter-spacing:.04em;                          /* Separa ligeramente las letras */
  text-transform:uppercase;                      /* Mantiene el label en MAYÚSCULAS */
  margin-bottom:.6rem;                           /* Espacio entre label y campo */
  color:rgba(var(--color-foreground),.75);       /* Suaviza ligeramente el color del label */
}


/* ==================================================
   MEXA — INPUT GENERAL DE PERSONALIZACIÓN
   Controla el campo donde el cliente escribe
   nombres, palabras o personalizaciones.
   ================================================== */

.mexa-custom-input{
  width:100%;                                    /* Hace que el campo use todo el ancho disponible */
  min-height:4.8rem;                             /* Define una altura mínima cómoda */
  border:1px solid rgba(var(--color-foreground),.25); /* Borde fino y discreto */
  border-radius:12px;                            /* Redondea las esquinas */
  padding:1.2rem 1.4rem;                         /* Espacio interior vertical y horizontal */
  font-size:1.45rem;                             /* Tamaño del texto escrito por el cliente */
  background:rgb(var(--color-background));       /* Usa el fondo configurado en el tema */
  color:rgb(var(--color-foreground));            /* Usa el color principal de texto del tema */
}

.mexa-custom-input::placeholder{
  color:rgba(var(--color-foreground),.38);       /* Hace el placeholder gris y discreto */
  font-weight:400;                               /* Mantiene el placeholder en peso normal */
  text-align:center;                             /* Centra el texto de ejemplo */
}


/* ==================================================
   MEXA — INPUT DE INITIAL
   Versión pequeña y centrada para una sola inicial.
   ================================================== */

.mexa-custom-input--initial{
  display:block;                                 /* Permite centrar el campo mediante márgenes automáticos */
  max-width:120px;                               /* Limita el ancho del campo de inicial */
  margin-left:auto;                              /* Centra el campo horizontalmente desde la izquierda */
  margin-right:auto;                             /* Centra el campo horizontalmente desde la derecha */
  text-align:center;                             /* Centra la inicial escrita por el cliente */
  font-size:2rem;                                /* Hace la inicial escrita más grande */
  font-weight:800;                               /* Hace la inicial extra bold */
  letter-spacing:.08em;                          /* Añade separación entre caracteres */
  text-transform:uppercase;                      /* Convierte automáticamente la inicial a mayúscula visual */
  padding-left:0;                                /* Elimina espacio lateral izquierdo */
  padding-right:0;                               /* Elimina espacio lateral derecho */
}

.mexa-custom-input--initial::placeholder{
  font-size:1.45rem;                             /* Tamaño del placeholder del campo INITIAL */
  font-weight:500;                               /* Hace el placeholder ligeramente más marcado */
  letter-spacing:.04em;                          /* Añade separación ligera entre letras */
  text-align:center;                             /* Centra el placeholder */
}


/* ==================================================
   MEXA — CONTENEDOR DE INITIAL
   Centra label + campo cuando la personalización
   corresponde únicamente a una inicial.
   ================================================== */

.product-customization--initial{
  text-align:center;                             /* Centra todo el bloque de personalización INITIAL */
}

.product-customization--initial .mexa-custom-label{
  text-align:center;                             /* Centra específicamente el label de INITIAL */
}/* ==================================================
   MEXA — COMBO ADD-ON DEBAJO DE DESCRIPCIÓN
   Controla productos complementarios sugeridos.
   ================================================== */

.mexa-addon-container{
  margin-top:40px;                         /* Espacio arriba del bloque */
  margin-bottom:20px;                      /* Espacio debajo del bloque */
  padding:28px 28px 18px;                 /* Espacio interior: arriba | lados | abajo */
  background:#fff;                         /* Fondo blanco */
  border:1.5px solid rgba(0,0,0,.08);      /* Borde gris muy sutil */
  border-radius:22px;                      /* Esquinas redondeadas */
  box-shadow:none;                         /* Sin sombra */
}

.mexa-addon-heading{
  font-size:17px;                          /* Tamaño del título */
  font-weight:900;                         /* Título extra bold */
  letter-spacing:.12em;                    /* Separación entre letras */
  text-transform:uppercase;                /* Título en MAYÚSCULAS */
  color:#256040;                           /* Verde MEXA */
  text-align:center;                       /* Centra el título */
  line-height:1.1;                         /* Mantiene el título compacto */
}

.mexa-addon-product{
  display:flex;                            /* Imagen + información + botón en una fila */
  align-items:center;                      /* Alinea verticalmente los elementos */
  gap:14px;                                /* Espacio entre los elementos */
  padding:14px 0;                          /* Espacio arriba y abajo de cada producto */
}

.mexa-addon-product + .mexa-addon-product{
  border-top:1px solid rgba(0,0,0,.05);    /* Línea divisoria entre productos */
}

.mexa-addon-image{
  flex-shrink:0;                           /* Evita que la imagen se comprima */
}

.mexa-addon-image img{
  width:78px;                              /* Ancho de imagen */
  height:78px;                             /* Alto de imagen */
  object-fit:cover;                        /* Recorta la imagen sin deformarla */
  border-radius:14px;                      /* Redondea las esquinas de la imagen */
  background:#fafafa;                      /* Fondo gris casi blanco */
  transition:all .3s ease;                 /* Suaviza animaciones de hover */
}

.mexa-addon-product:hover .mexa-addon-image img{
  transform:scale(1.03);                   /* Agranda ligeramente la imagen al pasar el mouse */
}

.mexa-addon-info{
  flex:1;                                  /* Usa el espacio disponible entre imagen y botón */
  min-width:0;                             /* Evita problemas de desbordamiento con textos largos */
}

.mexa-addon-title{
  display:block;                           /* Hace que el título ocupe su propia línea */
  text-decoration:none;                   /* Quita subrayado del enlace */
  color:inherit;                           /* Hereda el color general del texto */
  font-size:15px;                          /* Tamaño del nombre del producto */
  font-weight:700;                         /* Nombre bold */
  font-family:inherit;                     /* Usa la tipografía de la tienda */
  line-height:1.3;                         /* Altura de línea del nombre */
  margin-bottom:4px;                       /* Espacio entre nombre y precio */
}

.mexa-addon-title:hover{
  opacity:.8;                              /* Suaviza el título al pasar el mouse */
}

.mexa-addon-price{
  font-size:13px;                          /* Tamaño del precio */
  color:#666;                              /* Precio en gris */
  font-weight:500;                         /* Peso medio del precio */
  font-family:inherit;                     /* Usa la tipografía de la tienda */
}

.mexa-addon-add{
  background:transparent!important;        /* Botón + sin fondo */
  border:none!important;                   /* Elimina borde del botón */
  width:auto!important;                    /* Ancho según su contenido */
  height:auto!important;                   /* Alto según su contenido */
  min-width:0!important;                   /* Elimina ancho mínimo heredado */
  box-shadow:none!important;               /* Elimina sombras heredadas */
  border-radius:0!important;               /* Elimina redondeado heredado */
  color:#B90000;                           /* + en rojo MEXA */
  padding:0;                               /* Sin espacio interior */
  font-size:28px;                          /* Tamaño del símbolo + */
  font-weight:700;                         /* Hace el + más grueso */
  line-height:1;                           /* Mantiene el símbolo compacto */
  cursor:pointer;                          /* Muestra que se puede presionar */
}

.mexa-addon-add:hover{
  background:#990000;                      /* Fondo rojo oscuro al pasar el mouse */
  transform:translateY(-1px);              /* Sube ligeramente el botón */
}

.mexa-addon-add:disabled{
  background:#B90000;                      /* Fondo rojo después de agregar/deshabilitar */
  color:#fff;                              /* Símbolo/texto blanco */
  opacity:.9;                              /* Suaviza ligeramente el estado */
}

/* ===== MEXA ADD-ON — MÓVIL ===== */
@media screen and (max-width:749px){
  .mexa-addon-container{
    padding:20px;                          /* Reduce espacio interior en móvil */
  }

  .mexa-addon-heading{
    font-size:13px;                        /* Reduce tamaño del título */
    letter-spacing:.25em;                  /* Aumenta separación entre letras */
  }

  .mexa-addon-image img{
    width:72px;                            /* Reduce ancho de imagen */
    height:72px;                           /* Reduce alto de imagen */
  }

  .mexa-addon-title{
    font-size:14px;                        /* Reduce nombre del producto */
  }

  .mexa-addon-add{
    background:transparent!important;      /* Mantiene el botón transparente */
    border:none!important;                 /* Sin borde */
    width:48px!important;                  /* Área táctil de 48px */
    height:48px!important;                 /* Área táctil de 48px */
    min-width:48px!important;              /* Evita que se comprima horizontalmente */
    min-height:48px!important;             /* Evita que se comprima verticalmente */
    padding:0!important;                   /* Sin padding adicional */
    font-size:38px!important;              /* + más grande en móvil */
    font-weight:700;                       /* + bold */
    line-height:1;                         /* Mantiene el + centrado */
    display:flex;                          /* Permite centrar el símbolo */
    align-items:center;                    /* Centra verticalmente */
    justify-content:center;                /* Centra horizontalmente */
    color:#B90000;                         /* + rojo MEXA */
  }

  .mexa-addon-add:disabled{
    font-size:34px!important;              /* Reduce ligeramente el símbolo cuando está agregado */
  }
}
/* ==================================================
   MEXA — CARRITO / SISTEMA DE PRECIOS
   Controla los colores, pesos y etiquetas de precios.
   IMPORTANTE: conservar estas reglas porque forman
   parte del sistema visual personalizado de precios.
   ================================================== */


/* ===== TAG "OFF" ===== */

.mexa-cart-badge--off{
  color:#B90000!important;                    /* Muestra la etiqueta OFF en rojo MEXA */
  font-weight:900!important;                  /* Hace OFF extra bold */
  text-transform:uppercase;                   /* Mantiene OFF en MAYÚSCULAS */
}


/* ===== TAG "BEST SELLER" ===== */

.mexa-cart-badge--best{
  color:#111!important;                       /* Muestra BEST SELLER en negro */
  font-weight:900!important;                  /* Hace BEST SELLER extra bold */
  text-transform:uppercase;                   /* Mantiene BEST SELLER en MAYÚSCULAS */
}


/* ===== TAGS DENTRO DEL CART DRAWER ===== */

.cart-drawer .mexa-cart-badge{
  margin:4px 0!important;                     /* Reduce el espacio arriba y abajo del tag */
  font-size:13px!important;                   /* Mantiene el tag compacto dentro del carrito */
  letter-spacing:.05em!important;             /* Añade separación ligera entre letras */
  line-height:1.1!important;                  /* Reduce la altura vertical del tag */
}



/* MEXA — PRECIOS DEL CARRITO Y OFERTAS */

/* Precio anterior */
.cart-item__old-price {
  color: #a9a9a9 !important;
  font-weight: 500 !important;
}

/* Precio final con descuento */
.cart-item__final-price,
.mexa-sale-price,
.price--on-sale .price-item--sale,
.price--on-sale .price-item--last {
  color: #ff656a !important;
  font-weight: 700 !important;
}



/* ===== COLOR DEL PRECIO ESPECIAL ===== */

.mexa-sale-price{
  color:#B90000!important;                    /* Mantiene el precio especial en rojo MEXA */
  font-weight:800!important;                  /* Hace el precio especial bold */
}

/* ===== PRECIO GENERADO POR CÓDIGO DE DESCUENTO ===== */

.mexa-discount-price{
  color:#FF7A00!important;                    /* Muestra el precio del código de descuento en naranja */
  font-weight:800!important;                  /* Hace el precio con descuento bold */
}
/* ==================================================
   MEXA — CARDS DE COLECCIONES
   Controla títulos, flechas y detalle tricolor
   debajo del nombre de cada colección.
   ================================================== */

/* ===== QUITAR FLECHAS DE LAS COLECCIONES ===== */

.collection-card-wrapper .icon-wrap{
  display:none!important;                       /* Oculta la flecha/icono nativo junto al nombre de la colección */
}

/* ===== TÍTULO DE CADA CARD DE COLECCIÓN ===== */

.collection-card-wrapper .card__heading{
  text-align:center;                            /* Centra el nombre de la colección */
  margin-top:12px;                              /* Separa el título de la imagen */
}

.collection-card-wrapper .card__heading a{
  font-size:14px;                               /* Tamaño del nombre de la colección */
  font-weight:900;                              /* Hace el nombre extra bold */
  letter-spacing:.16em;                        /* Separa las letras estilo boutique */
  text-transform:uppercase;                    /* Muestra el nombre en MAYÚSCULAS */
  text-decoration:none;                        /* Elimina el subrayado del enlace */
  color:#111;                                   /* Usa negro suave para el título */
  line-height:1.3;                              /* Mantiene buena separación si ocupa dos líneas */
}

/* ===== LÍNEA TRICOLOR DEBAJO DE CADA COLECCIÓN ===== */

.collection-card-wrapper .card__heading:after{
  content:'';                                   /* Crea el elemento decorativo sin agregar HTML */
  display:block;                                /* Hace que la línea ocupe su propia fila */
  width:40px;                                   /* Ancho de la línea tricolor */
  height:3px;                                   /* Grosor de la línea */
  margin:8px auto 0;                            /* Separa y centra la línea debajo del título */
  border-radius:999px;                          /* Redondea completamente los extremos */
  background:linear-gradient(                   /* Crea la línea verde + blanca + roja */
    to right,
    #006847 0%,                                 /* Inicio verde */
    #006847 33.33%,                             /* Fin verde */
    #ffffff 33.33%,                             /* Inicio blanco */
    #ffffff 66.66%,                             /* Fin blanco */
    #CE1126 66.66%,                             /* Inicio rojo */
    #CE1126 100%                                /* Fin rojo */
  );
}


/* ==================================================
   MEXA — HEADING DE COLLECTION LIST
   Controla el título principal de la sección
   donde se muestran las colecciones.
   ================================================== */

.collection-list-title{
  text-align:center!important;                  /* Centra el heading principal */
  width:100%;                                   /* Hace que use todo el ancho disponible */
  display:block;                                /* Mantiene el título como bloque independiente */
  margin:0 auto 30px!important;                 /* Centra y deja 30px de espacio debajo */
  font-size:28px;                               /* Tamaño del heading principal */
  font-weight:900;                              /* Hace el heading extra bold */
  letter-spacing:.35em;                        /* Espaciado amplio entre letras */
  text-transform:uppercase;                    /* Muestra el heading en MAYÚSCULAS */
  color:#111;                                   /* Color negro suave */
}

/* ===== LÍNEA MEXA DEBAJO DEL HEADING ===== */

.collection-list-title:after{
  content:'';                                   /* Crea la línea decorativa sin agregar HTML */
  display:block;                                /* Coloca la línea debajo del heading */
  width:60px;                                   /* Ancho de la línea principal */
  height:2px;                                   /* Grosor fino de la línea */
  margin:14px auto 0;                           /* Separa y centra la línea debajo del título */
  border-radius:999px;                          /* Redondea completamente los extremos */
  background:linear-gradient(                   /* Crea detalle verde + gris claro + rojo */
    to right,
    #006847 0%,                                 /* Inicio verde */
    #006847 33%,                                /* Fin verde */
    #d9d9d9 33%,                               /* Inicio gris claro */
    #d9d9d9 66%,                               /* Fin gris claro */
    #CE1126 66%,                                /* Inicio rojo */
    #CE1126 100%                                /* Fin rojo */
  );
}
/* ==================================================
   MEXA — MÉTODOS DE PAGO
   Controla el texto y los íconos de tarjetas/pagos
   mostrados en la página del producto.
   ================================================== */

.mexa-payment-methods{
  margin:18px auto 0;                         /* Separa el bloque del contenido superior */
  text-align:center;                          /* Centra el texto del bloque */
}

/* ===== TEXTO "MÉTODOS DE PAGO" ===== */

.mexa-payment-methods__text{
  margin:0 0 10px;                            /* Deja espacio entre el texto y las tarjetas */
  font-size:1rem;                             /* Tamaño discreto del encabezado */
  font-weight:600;                            /* Hace el texto semibold */
  letter-spacing:.18em;                       /* Separa las letras estilo boutique */
  text-transform:uppercase;                   /* Mantiene el texto en MAYÚSCULAS */
  color:rgba(var(--color-foreground),.55);    /* Usa un tono gris suave */
}

/* ===== FILA DE ÍCONOS DE PAGO ===== */

.mexa-payment-methods__icons{
  display:flex;                               /* Coloca todos los métodos de pago en una fila */
  justify-content:space-between;              /* Distribuye los íconos uniformemente de lado a lado */
  align-items:center;                         /* Alinea verticalmente todos los íconos */
  width:100%;                                 /* Aprovecha todo el ancho disponible */
  gap:6px;                                    /* Mantiene una separación mínima entre tarjetas */
  flex-wrap:nowrap;                           /* Evita que una tarjeta caiga a una segunda fila */
}

/* ===== ÍCONOS / LOGOS DE TARJETAS ===== */

.mexa-payment-methods__icons svg{
  width:42px;                                 /* Tamaño ideal de cada logo */
  max-width:11%;                              /* Permite reducirlos si no caben en pantallas pequeñas */
  height:auto;                                /* Conserva la proporción original del logo */
  padding:0;                                  /* Elimina el espacio interior tipo placeholder */
  background:transparent;                     /* Elimina cualquier fondo alrededor de la tarjeta */
  border:none;                                /* Elimina el borde/cajita alrededor del logo */
  border-radius:0;                            /* Elimina esquinas redondeadas heredadas */
  flex-shrink:1;                              /* Permite reducir los íconos antes de romper la fila */
  transition:transform .25s ease;             /* Suaviza el pequeño movimiento del hover */
}

/* ===== EFECTO AL PASAR EL MOUSE ===== */

.mexa-payment-methods__icons svg:hover{
  transform:translateY(-2px);                 /* Levanta ligeramente el ícono al pasar el mouse */
}
/* ==================================================
   MEXA — FEATURED COLLECTION TITLE
   Título de las colecciones destacadas.
   ================================================== */

.collection__title{
  text-align:center;                             /* Centra el bloque del título */
}

.collection__title .title{
  display:inline-block;                         /* Mantiene el título compacto */
  margin:0 auto 2rem;                           /* Centra y deja espacio debajo */
  font-size:clamp(2.2rem,3vw,3.2rem);           /* Tamaño responsive */
  font-weight:900;                              /* Extra bold */
  letter-spacing:.16em;                         /* Separa las letras */
  text-transform:uppercase;                     /* Título en MAYÚSCULAS */
  position:relative;                            /* Permite colocar la banderita debajo */
}

.collection__title .title::after{
  content:"";                                   /* Crea la banderita sin HTML */
  display:block;                                /* La coloca debajo del título */
  width:60px;                                   /* Ancho de la banderita */
  height:2px;                                   /* Grosor de la banderita */
  margin:14px auto 0;                           /* La separa y centra */
  border-radius:999px;                          /* Redondea los extremos */
  background:linear-gradient(                   /* Verde + gris + rojo */
    to right,
    #006847 0%, #006847 33%,                    /* Verde */
    #d9d9d9 33%, #d9d9d9 66%,                  /* Centro claro */
    #CE1126 66%, #CE1126 100%                   /* Rojo */
  );
}


/* ==================================================
   MEXA — PAGE TITLES
   Títulos principales de páginas.
   ================================================== */

.main-page-title{
  display:block;                                /* Título como bloque */
  width:100%;                                   /* Usa todo el ancho */
  text-align:center!important;                  /* Centra el título */
  margin:0 auto 2.8rem;                         /* Centra y deja espacio debajo */
  font-size:clamp(2.8rem,4vw,4.2rem);           /* Tamaño responsive */
  font-weight:900;                              /* Extra bold */
  letter-spacing:.14em;                         /* Separa las letras */
  text-transform:uppercase;                     /* MAYÚSCULAS */
  line-height:1.2;                              /* Altura compacta */
}

.main-page-title::after{
  content:"";                                   /* Crea la banderita */
  display:block;                                /* La coloca debajo */
  width:60px;                                   /* Ancho */
  height:2px;                                   /* Grosor */
  margin:14px auto 0;                           /* La centra */
  border-radius:999px;                          /* Extremos redondeados */
  background:linear-gradient(                   /* Verde + gris + rojo */
    to right,
    #006847 0%, #006847 33%,                    /* Verde */
    #d9d9d9 33%, #d9d9d9 66%,                  /* Centro claro */
    #CE1126 66%, #CE1126 100%                   /* Rojo */
  );
}


/* ==================================================
   MEXA — TÍTULOS DE PÁGINAS DE COLECCIÓN
   Controla títulos principales de colecciones.
   ================================================== */

.shopify-section-template--main .title--primary,
.shopify-section-template--main h1{
  text-align:center!important;                  /* Centra el título */
  width:100%;                                   /* Usa todo el ancho */
  margin-left:auto;                             /* Centra horizontalmente */
  margin-right:auto;                            /* Centra horizontalmente */
  font-weight:900;                              /* Extra bold */
  letter-spacing:.16em;                         /* Separa las letras */
  text-transform:uppercase;                     /* MAYÚSCULAS */
}

.shopify-section-template--main .title--primary::after,
.shopify-section-template--main h1::after{
  content:"";                                   /* Crea la banderita */
  display:block;                                /* La coloca debajo */
  width:60px;                                   /* Ancho */
  height:2px;                                   /* Grosor */
  margin:14px auto 0;                           /* La centra */
  border-radius:999px;                          /* Extremos redondeados */
  background:linear-gradient(                   /* Verde + gris + rojo */
    to right,
    #006847 0%, #006847 33%,                    /* Verde */
    #d9d9d9 33%, #d9d9d9 66%,                  /* Centro claro */
    #CE1126 66%, #CE1126 100%                   /* Rojo */
  );
}


/* ==================================================
   MEXA — MAIN LIST COLLECTIONS TITLE
   Título de la página donde aparecen todas
   las colecciones.
   ================================================== */

.page-width > .title.title--primary.inline-richtext{
  display:block;                                /* Título como bloque */
  width:100%;                                   /* Usa todo el ancho */
  text-align:center!important;                  /* Centra el título */
  padding-top:1.8rem;                           /* Aire arriba */
  margin:0 auto 2.4rem;                         /* Espacio debajo */
  font-size:clamp(2.9rem,4vw,4.3rem);           /* Tamaño responsive */
  font-weight:1000;                             /* Máximo peso disponible */
  letter-spacing:.10em;                         /* Letras más juntas */
  text-transform:uppercase;                     /* MAYÚSCULAS */
  line-height:1.1;                              /* Título compacto */
  position:relative;                            /* Permite decoración debajo */
}

.page-width > .title.title--primary.inline-richtext::after{
  content:"";                                   /* Crea la banderita */
  display:block;                                /* La coloca debajo */
  width:60px;                                   /* Ancho */
  height:2px;                                   /* Grosor */
  margin:14px auto 0;                           /* La centra */
  border-radius:999px;                          /* Extremos redondeados */
  background:linear-gradient(                   /* Verde + gris + rojo */
    to right,
    #006847 0%, #006847 33%,                    /* Verde */
    #d9d9d9 33%, #d9d9d9 66%,                  /* Centro claro */
    #CE1126 66%, #CE1126 100%                   /* Rojo */
  );
}


/* ==================================================
   MEXA — COLLECTION HERO TITLE
   Título grande que aparece dentro de una colección.
   ================================================== */

.collection-hero__title{
  display:block;                                /* Título como bloque */
  width:100%;                                   /* Usa todo el ancho */
  text-align:center;                            /* Centra el título */
  margin:0 auto 2.8rem;                         /* Centra y deja espacio debajo */
  padding-top:1.5rem;                           /* Añade aire arriba */
  font-size:clamp(3rem,4vw,4.4rem);             /* Tamaño grande responsive */
  font-weight:900;                              /* Extra bold */
  letter-spacing:.18em;                         /* Separa las letras */
  text-transform:uppercase;                     /* MAYÚSCULAS */
  line-height:1.1;                              /* Mantiene el título compacto */
  color:rgb(var(--color-foreground));           /* Color principal del tema */
  position:relative;                            /* Permite colocar la banderita */
}


/* ===== BANDERITA MEXA DEL COLLECTION HERO ===== */

.collection-hero__title::after{
  content:"";                                   /* Crea la banderita sin HTML */
  display:block;                                /* La coloca debajo del título */
  width:60px;                                   /* Ancho de la banderita */
  height:2px;                                   /* Grosor boutique */
  margin:14px auto 0;                           /* La separa y centra */
  border-radius:999px;                          /* Redondea los extremos */
  background:linear-gradient(                   /* Verde + gris + rojo */
    to right,
    #006847 0%, #006847 33%,                    /* Verde */
    #d9d9d9 33%, #d9d9d9 66%,                  /* Centro claro */
    #CE1126 66%, #CE1126 100%                   /* Rojo */
  );
}
/* ===== MEXA INVENTORY STATUS ===== */


.mexa-inventory-line{
  margin:14px 0 16px;                         /* Espacio exterior: 14px arriba, 0 lados, 16px abajo */
  padding:0;                                  /* Quita espacio interior */
  display:flex;                               /* Coloca el punto y el texto en la misma línea */
  justify-content:center;                     /* Centra todo horizontalmente */
  align-items:center;                         /* Alinea punto y texto verticalmente */
  gap:8px;                                    /* Espacio entre el PUNTO y el TEXTO */
  font-size:13px;                             /* Tamaño de la LETRA */
  font-weight:900;                            /* Grosor de la LETRA */
  letter-spacing:.08em;                       /* Espacio entre las LETRAS */
  text-transform:uppercase;                   /* Convierte el texto a MAYÚSCULAS */
  line-height:1.35;                           /* Altura/espaciado de la línea de texto */
  text-align:center;                          /* Centra el TEXTO */
  color:rgba(var(--color-foreground),.72);    /* Color del texto + transparencia */
}


.mexa-stock-dot{
  display:block;                              /* Hace que el punto se comporte como un bloque */
  width:8px !important;                       /* ANCHO del punto */
  height:8px !important;                      /* ALTO del punto */
  min-width:8px !important;                   /* Evita que el punto se haga más angosto */
  min-height:8px !important;                  /* Evita que el punto se haga más bajito */
  flex:0 0 8px;                               /* Mantiene el punto fijo en 8px dentro del flex */
  padding:0 !important;                       /* Quita espacio INTERIOR del punto */
  margin:0 !important;                        /* Quita espacio EXTERIOR del punto */
  border:0 !important;                        /* Quita cualquier borde */
  border-radius:50% !important;               /* Hace que el punto sea completamente REDONDO */
}


@keyframes mexaBlink{                          /* Animación de parpadeo del punto */
  0%{opacity:1}                               /* Inicio: totalmente visible */
  50%{opacity:.88}                            /* Mitad: baja ligeramente la visibilidad */
  100%{opacity:1}                             /* Final: vuelve a estar totalmente visible */
}

/* =========================================================
   MEXA — MENÚ MÓVIL
   Renglones ligeramente más compactos SOLO al abrir el menú
   ========================================================= */

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

  #Details-menu-drawer-container[open]
  #menu-drawer .menu-drawer__menu-item {
    padding-top: 3px !important;
    padding-bottom: 3px !important;

    /* AQUÍ compactamos más sin quitar padding */
    min-height: 33px !important;
    line-height: 1.25 !important;
  }

}
/* =========================================================
   MEXA — QUITAR ESPACIO DEBAJO DE "ÚLTIMAS PIEZAS"
   Conserva el espacio superior del menú
   ========================================================= */

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

  #Details-menu-drawer-container[open]
  .menu-drawer__navigation {
    padding-top: 1rem !important;
    padding-bottom: 0 !important;
  }

}
/* =========================================================
   MEXA — UTILITY LINKS MÁS COMPACTOS
   Reduce espacio de Currency + Idioma
   ========================================================= */

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

  #Details-menu-drawer-container[open]
  .menu-drawer__utility-links {
    padding: 5px 30px !important;
  }

}

/* ================================================
   MEXA JEWELRY — PRODUCT CARDS BOUTIQUE
   HOME + COLLECTIONS + PRODUCT TYPOGRAPHY
   ================================================ */

:root {
  --mexa-font: var(
    --font-body-family,
    Arial,
    sans-serif
  );
  --mexa-red: #B90000;
  --mexa-bg: #0b0b0b;
  --mexa-white: #f3f3f3;
}

/* ================================================
   1. TIPOGRAFÍA UNIVERSAL
   ================================================ */

body,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body button,
body input,
body select,
body textarea,
body .card__heading,
body .product__title,
body .card-information,
body .price,
body .price-item,
body .button,
body .header__menu-item,
body .menu-drawer__menu-item,
body .mexa-agotado,
body .mexa-precio-especial {
  font-family: var(--mexa-font) !important;
}

/* ================================================
   2. UNA SOLA TARJETA, SIN MARCOS DOBLES
   ================================================ */

.product-card-wrapper,
.product-card-wrapper > .card,
.product-card-wrapper .card__inner,
.product-card-wrapper > .card > .card__content {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Eliminar bordes generados por Dawn */

.product-card-wrapper > .card::after,
.product-card-wrapper .card__inner::after {
  content: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Eliminar relleno de la tarjeta exterior */

.product-card-wrapper > .card {
  padding: 0 !important;
}

/* ================================================
   3. FOTOGRAFÍAS CUADRADAS, SIN ESQUINAS BLANCAS
   ================================================ */

.product-card-wrapper .card__media,
.product-card-wrapper .card__media .media {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: var(--mexa-bg) !important;
  overflow: hidden;
}

/* Conservar la fotografía sin deformaciones */

.product-card-wrapper .card__media img {
  border: none !important;
  border-radius: 0 !important;
  background: var(--mexa-bg) !important;
  object-fit: contain !important;
}

/* Mantener proporción original del contenedor */
.product-card-wrapper .card__inner {
  overflow: hidden;
}

/* ================================================
   4. INFORMACIÓN DEBAJO DE LA FOTOGRAFÍA
   ================================================ */

.product-card-wrapper >
.card > .card__content {
  padding: 10px 0 0 !important;
  margin: 0 !important;
}

.product-card-wrapper >
.card > .card__content .card__information {
  padding: 0 !important;
  text-align: center !important;
}

/* Nombre */

.product-card-wrapper .card__heading,
.product-card-wrapper .card__heading a {
  color: var(--mexa-white) !important;
  font-family: var(--mexa-font) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  letter-spacing: .015em !important;
  line-height: 1.4 !important;
  text-align: center !important;
}

/* ================================================
   5. PRECIOS CLAROS Y LEGIBLES
   ================================================ */

.product-card-wrapper .price {
  text-align: center !important;
  font-family: var(--mexa-font) !important;
  margin-top: 5px;
}

.product-card-wrapper .price-item {
  font-family: var(--mexa-font) !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
}

/* Precio normal — plata blanca */

.product-card-wrapper
.price:not(.price--on-sale)
.price-item {
  color: var(--mexa-white) !important;
  font-weight: 600 !important;
}

/* Precio anterior tachado */

.product-card-wrapper
.price--on-sale
.price-item--regular {
  color: #a5a5a5 !important;
  font-weight: 500 !important;
}

/* Precio rebajado */

.product-card-wrapper
.price--on-sale
.price-item--sale,
.product-card-wrapper
.price--on-sale
.price-item--last {
  color: #ff656a !important;
  font-weight: 700 !important;
}

/* ================================================
   6. CONTENEDOR DE TARJETITAS
   DEBAJO DEL PRECIO
   ================================================ */

.product-card-wrapper .mexa-card-tags {
  display: flex !important;
  position: static !important;
  visibility: visible !important;
  opacity: 1 !important;

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

  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;

  margin: 9px auto 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  overflow: visible !important;
}

/* Estilo compartido de etiquetas */

.mexa-agotado,
.mexa-precio-especial {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;

  align-items: center;
  justify-content: center;

  width: fit-content !important;
  max-width: 100%;
  height: auto !important;

  padding: 6px 10px !important;
  margin: 0 !important;

  font-family: var(--mexa-font) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  line-height: 1.25 !important;

  text-transform: uppercase !important;
  text-align: center !important;
  border-radius: 5px !important;
}

/* ================================================
   7. PRECIO ESPECIAL — VERDE NEÓN SUAVE
   ================================================ */

.mexa-precio-especial {
  color: #b1f5c5 !important;
  background: #13291d !important;
  border: 1px solid #81dca0 !important;

  box-shadow:
    0 0 8px rgba(129,220,160,.16),
    inset 0 0 5px rgba(129,220,160,.06)
    !important;

  text-shadow:
    0 0 4px rgba(177,245,197,.23)
    !important;
}

/* ================================================
   8. AGOTADO — ROJO MEXA NEÓN SUAVE
   ================================================ */

.mexa-agotado,
.card .mexa-agotado {
  color: #ff777c !important;
  background: #310d10 !important;
  border: 1px solid #e74f54 !important;

  box-shadow:
    0 0 8px rgba(231,79,84,.17),
    inset 0 0 5px rgba(231,79,84,.06)
    !important;

  text-shadow:
    0 0 4px rgba(255,119,124,.25)
    !important;
}

/* ================================================
   9. MÓVIL
   ================================================ */

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

  .product-card-wrapper .card__heading,
  .product-card-wrapper .card__heading a {
    font-size: 12px !important;
  }

  .product-card-wrapper .price-item {
    font-size: 14px !important;
  }

  .product-card-wrapper .mexa-agotado,
  .product-card-wrapper .mexa-precio-especial {
    font-size: 9px !important;
    padding: 5px 7px !important;
  }

}

/* FIN — MEXA PRODUCT CARDS */



/* MEXA JEWELRY — BOTÓN CALIBRE BOUTIQUE */

.mexa-identity .mexa-calibre-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;

  padding: 17px 25px;
  max-width: 100%;

  background: linear-gradient(
    135deg,
    #344d35 0%,
    #243b29 100%
  );

  color: #ffffff !important;
  border: 1px solid #769c68;
  border-radius: 5px;

  font-family: var(--font-heading-family);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.3px;
  line-height: 1.4;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none !important;

  box-shadow:
    0 4px 18px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.12);

  transition:
    background .3s ease,
    transform .3s ease,
    box-shadow .3s ease,
    border-color .3s ease;
}

.mexa-identity .mexa-calibre-btn:hover {
  background: linear-gradient(
    135deg,
    #496b43 0%,
    #344d35 100%
  );

  color: #ffffff !important;
  border-color: #b9f28b;

  transform: translateY(-3px);

  box-shadow:
    0 8px 25px rgba(0,0,0,.35),
    0 0 16px rgba(150,225,105,.18);

  text-decoration: none !important;
}

.mexa-identity .mexa-calibre-arrow {
  color: #b9f28b;
  font-size: 19px;
  font-weight: 400;
  line-height: 1;
  transition: transform .3s ease;
}

.mexa-identity .mexa-calibre-btn:hover
.mexa-calibre-arrow {
  transform: translate(3px,-3px);
}

.mexa-identity .mexa-calibre-btn:focus-visible {
  outline: 2px solid #b9f28b;
  outline-offset: 4px;
}

@media (max-width: 749px) {
  .mexa-identity .mexa-calibre-btn {
    width: 100%;
    padding: 16px 14px;
    font-size: 11px;
    letter-spacing: 1px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mexa-identity .mexa-calibre-btn,
  .mexa-identity .mexa-calibre-arrow {
    transition: none;
  }
}

/* ====================================================
   MEXA JEWELRY — AJUSTE FINAL DE ETIQUETAS
   STREET LUXURY / BOUTIQUE

   PRECIO ESPECIAL:
   Rectangular verde neon junto al precio.

   AGOTADO:
   Rectangular gris neon del ancho del boton comprar.

   Compatible con el Liquid MEXA actual.
   ==================================================== */


/* =========================================
   1. PRECIO ESPECIAL — VERDE NEON BOUTIQUE
   ========================================= */

/* Precio y etiqueta bien acomodados */

.mexa-pcard__price-row {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap;
  column-gap: .55rem;
  row-gap: .55rem;
  width: 100%;
}

/* Precio normal blanco elegante */

.mexa-pcard .mexa-pcard__price {
  color: #F5F2EB;
  font-family: var(--font-body-family);
  font-weight: 500 !important;
  letter-spacing: -.025em;
}

/* Precio especial verde */

.mexa-pcard .mexa-pcard__price--sale {
  color: #A5EEC0 !important;
  font-weight: 500 !important;
}

/* USD / MXN / CAD */

.mexa-pcard .mexa-currency-code {
  font-weight: 500;
  letter-spacing: .05em;
}

.mexa-pcard
.mexa-pcard__price--sale + .mexa-currency-code {
  color: #A5EEC0 !important;
}

/* Etiqueta rectangular de precio especial */

.mexa-pcard
.mexa-pcard__price-row
.mexa-pcard__badge--sale {

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

  width: fit-content;
  max-width: 100%;

  padding: .48rem .75rem;

  background: rgba(16, 40, 27, .85) !important;

  border: 1px solid #75D99B !important;
  border-radius: 3px !important;

  color: #A5EEC0 !important;

  font-family: var(--font-body-family);
  font-size: .88rem;
  font-weight: 650;
  letter-spacing: .07em;
  line-height: 1.2;

  text-transform: uppercase;
  white-space: nowrap;

  box-shadow:
    0 0 7px rgba(117, 217, 155, .22),
    inset 0 0 5px rgba(117, 217, 155, .06) !important;

  text-shadow:
    0 0 3px rgba(165, 238, 192, .25);

  transition:
    border-color .25s ease,
    box-shadow .25s ease;
}

/* Neon discreto al pasar el mouse */

.mexa-pcard:hover
.mexa-pcard__price-row
.mexa-pcard__badge--sale {

  border-color: #A5EEC0 !important;

  box-shadow:
    0 0 10px rgba(117, 217, 155, .32) !important;
}


/* =========================================
   2. AGOTADO — BOTON COMPLETO GRIS NEON
   ========================================= */

/* La tarjeta conserva su altura y estructura */

.mexa-pcard--soldout .mexa-pcard__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: flex-start;
}

/* Contenedor de agotado */

.mexa-pcard--soldout .mexa-card-inline-status {
  display: flex !important;
  align-items: center;
  justify-content: center;

  width: 100%;
  margin: auto 0 0 !important;

  padding-top: 1.4rem;
  padding-bottom: 0;

  text-align: center;
}

/* AGOTADO del mismo ancho que COMPRAR */

.mexa-pcard--soldout
.mexa-card-inline-status
.mexa-agotado {

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

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

  padding: .75rem .8rem !important;
  box-sizing: border-box;

  background: rgba(185, 191, 197, .09) !important;

  border: 1px solid rgba(205, 211, 218, .78) !important;
  border-radius: 3px !important;

  color: #D8DDE1 !important;

  font-family: var(--font-body-family);
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  letter-spacing: .14em;

  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;

  box-shadow:
    0 0 8px rgba(205, 211, 218, .17),
    inset 0 0 6px rgba(205, 211, 218, .05) !important;

  text-shadow:
    0 0 4px rgba(220, 225, 230, .20) !important;

  cursor: default;
}

/* Ocultar precio y promociones en agotados */

.mexa-pcard--soldout .mexa-pcard__price-row,
.mexa-pcard--soldout .mexa-pcard__actions,
.mexa-pcard--soldout .mexa-pcard__badges {
  display: none !important;
}

/* La fotografia permanece intacta */

.mexa-pcard--soldout .mexa-pcard__img {
  filter: none !important;
  opacity: 1;
}


/* =========================================
   3. UNIFORMIDAD CON BOTON COMPRAR
   ========================================= */

.mexa-pcard__cta {
  min-height: 4.5rem;
  box-sizing: border-box;
}


/* =========================================
   4. AJUSTES PARA CELULAR
   ========================================= */

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

  /* Precio y promocion sin encimarse */

  .mexa-pcard__price-row {
    column-gap: .45rem;
    row-gap: .55rem;
  }

  .mexa-pcard
  .mexa-pcard__price {
    font-size: 1.5rem;
  }

  /* Etiqueta verde compacta */

  .mexa-pcard
  .mexa-pcard__price-row
  .mexa-pcard__badge--sale {

    font-size: .78rem;
    padding: .42rem .6rem;
    letter-spacing: .045em;
    border-radius: 3px !important;
  }

  /* Boton agotado igual que comprar */

  .mexa-pcard--soldout
  .mexa-card-inline-status
  .mexa-agotado {

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

    padding: .65rem .6rem !important;

    font-size: 1.02rem !important;
    letter-spacing: .12em;
  }

  .mexa-pcard__cta {
    min-height: 4.3rem;
  }
}

/* MEXA — BASE VISUAL UNIFICADA DE PRECIOS */

:root {
  --mexa-price-normal: #F5F2EB;
  --mexa-price-special: #A5EEC0;
}

/* Tipografia de precios en todas las secciones */

.mexa-pcard .mexa-pcard__price,
.card-wrapper .card-information .price-item,
.product__info-container .price-item,
.mexa-set-builder [data-mexa-price],
.mexa-set-builder [data-mexa-total] {
  font-family: var(--font-body-family) !important;
  font-weight: 500 !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.025em !important;
}

/* Precios normales */

.mexa-pcard .mexa-pcard__price:not(.mexa-pcard__price--sale),
.card-wrapper .price:not(.price--on-sale) .price-item,
.product__info-container .price:not(.price--on-sale) .price-item,
.mexa-set-builder [data-mexa-price],
.mexa-set-builder [data-mexa-total] {
  color: var(--mexa-price-normal) !important;
}

/* Precios realmente especiales */

.mexa-pcard .mexa-pcard__price--sale,
.card-wrapper .price--on-sale .price-item--last,
.product__info-container .price--on-sale .price-item--last {
  color: var(--mexa-price-special) !important;
}

/* Total del configurador */

.mexa-set-builder [data-mexa-total] {
  font-weight: 500 !important;
}

/* Evitar mensajes de disponibilidad contradictorios */

.product__info-container:has(.price--sold-out)
[data-mexa-inventory],
.product__info-container:has(.price__badge-sold-out)
[data-mexa-inventory],
.product__info-container:has(.mexa-product-soldout)
[data-mexa-inventory] {
  display: none !important;
}


/* ==========================================
   MEXA JEWELRY — SPECIAL PRICE EN PRODUCTO

   Mismo diseño que las tarjetas del grid.
   Solo afecta la ficha individual.
   Hereda la tipografia del tema.
   ========================================== */

.product__info-container
.price.price--on-sale:not(.price--sold-out)
.mexa-special-price-badge {

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

  width: fit-content;
  height: auto;

  padding: .48rem .75rem !important;

  background: rgba(16, 40, 27, .85) !important;

  border: 1px solid #75D99B !important;
  border-radius: 3px !important;

  color: #A5EEC0 !important;

  font-family: var(--font-body-family) !important;
  font-size: 1rem !important;
  font-weight: 650 !important;

  letter-spacing: .06em !important;
  line-height: 1.3 !important;

  text-transform: uppercase !important;

  box-shadow:
    0 0 7px rgba(117, 217, 155, .17) !important;

  visibility: visible !important;
  opacity: 1 !important;
}

/* ==========================================
   MEXA — MINIMAL BOUTIQUE EMPTY CART
   LIGHT / DARK AUTOMATIC
   ========================================== */

.mexa-empty-minimal {
  --mexa-empty-text: #151515;
  --mexa-empty-muted: #666666;
  --mexa-empty-accent: #176c45;

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

  width: 100%;
  max-width: 650px;
  margin: 0 auto;
  padding: 45px 20px 65px;

  text-align: center;
  background: transparent;
}

html[data-mexa-mode="dark"] .mexa-empty-minimal {
  --mexa-empty-text: #f3f3f3;
  --mexa-empty-muted: #bbbbbb;
  --mexa-empty-accent: #a5eec0;
}

html[data-mexa-mode="light"] .mexa-empty-minimal {
  --mexa-empty-text: #151515;
  --mexa-empty-muted: #666666;
  --mexa-empty-accent: #176c45;
}

/* FIRMA DE MARCA */

.mexa-empty-minimal__brand {
  color: var(--mexa-empty-accent);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  margin-bottom: 23px;
}

/* TITULO */

.mexa-empty-minimal__title {
  color: var(--mexa-empty-text);
  font-family: var(--font-heading-family, sans-serif);
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0;
}

/* ACENTO VERDE */

.mexa-empty-minimal__line {
  display: block;
  width: 36px;
  height: 2px;
  margin: 24px auto;
  background: var(--mexa-empty-accent);
}

/* DESCRIPCION */

.mexa-empty-minimal__description {
  color: var(--mexa-empty-muted);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .02em;
  margin: 0 0 30px;
}

/* BOTON BOUTIQUE */

.mexa-empty-minimal__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 230px;
  min-height: 46px;
  padding: 13px 25px;

  background: transparent;
  border: 1px solid var(--mexa-empty-accent);
  border-radius: 4px;

  color: var(--mexa-empty-accent);
  font-family: var(--font-body-family, sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-decoration: none;
  text-transform: uppercase;

  transition: background .2s ease, color .2s ease;
}

.mexa-empty-minimal__button:hover {
  background: var(--mexa-empty-accent);
  color: #ffffff;
}

html[data-mexa-mode="dark"]
.mexa-empty-minimal__button:hover {
  color: #111111;
}

/* AJUSTE MOVIL */

@media screen and (max-width: 749px) {
  .mexa-empty-minimal {
    padding: 35px 16px 50px;
  }

  .mexa-empty-minimal__title {
    font-size: 25px;
  }

  .mexa-empty-minimal__description {
    font-size: 12px;
  }
}