/** Shopify CDN: Minification failed

Line 1241:11 Expected "}" to go with "{"

**/
/* =====================================================
   NATIVOS JEWELRY — custom.css v8
   DM Sans (principal) + Cinzel Bold (hooks)
   ===================================================== */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700&family=DM+Sans:wght@300;400;500;600&display=swap');


/* ══════════════════════════════════════════
   1. HEADER GENERAL
══════════════════════════════════════════ */

.page__header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
  background-color: #0a0a0a !important;
}

.search__container--inline {
  display: none !important;
}


/* ══════════════════════════════════════════
   2. DESKTOP — Layout y logo
══════════════════════════════════════════ */

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

  .header__top {
    position: relative !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    min-height: 64px !important;
    padding: 0 24px !important;
  }

  .header__logo {
    position: static !important;
    left: auto !important;
    transform: none !important;
    max-width: var(--logoWidth) !important;
    padding: 1rem !important;
    z-index: auto !important;
  }

  .header__utility {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    justify-content: flex-end !important;
  }
}


/* ══════════════════════════════════════════
   3. DESKTOP — Navegación
══════════════════════════════════════════ */

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

  .main__navigation {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 0 !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 12px !important;
    letter-spacing: 0.14em !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
  }

  .main__navigation .nav__link {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 12px !important;
    letter-spacing: 0.14em !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    padding: 0 16px !important;
    min-height: 64px !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    opacity: 0.75 !important;
    transition: opacity 0.2s ease !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    background: transparent !important;
  }

  .main__navigation .nav__link:hover {
    opacity: 1 !important;
    background: transparent !important;
    color: #ffffff !important;
  }

  .main__navigation .nav__link::after {
    content: '' !important;
    position: absolute !important;
    bottom: 12px !important;
    left: 16px !important;
    right: 16px !important;
    height: 1px !important;
    background: #ffffff !important;
    transform: scaleX(0) !important;
    transition: transform 0.25s ease !important;
    transform-origin: center !important;
  }

  .main__navigation .nav__link:hover::after {
    transform: scaleX(1) !important;
  }

  .main__navigation--fill .nav__link:hover,
  .main__navigation--fill .nav__link:focus {
    background: transparent !important;
    color: #ffffff !important;
  }
}


/* ══════════════════════════════════════════
   4. DESKTOP — Íconos utilidad
══════════════════════════════════════════ */

/* ══════════════════════════════════════════
   4. ÍCONOS UTILIDAD (Escritorio y Móvil)
══════════════════════════════════════════ */

/* 1. Regla global: fuerza tamaño, estructura y color en TODOS los dispositivos */
.header__utility .uil,
.header__utility svg,
.header__utility i,
.header__icon svg,
.header__icon i {
  font-size: 24px !important; /* Clave para íconos de fuente (.uil / i) */
  width: 24px !important;     /* Clave para SVGs */
  height: 24px !important;
  color: #ffffff !important;  /* Fuerza el color blanco */
  fill: #ffffff !important;   /* Fuerza el relleno blanco para SVGs */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: visible !important;
  opacity: 1 !important;
  line-height: 1 !important;
}

/* 2. Ajuste del circulito contador del carrito para que no se descuadre */
.header__utility .cart-count,
.header__utility .cart-count-bubble,
.header__icon .cart-count {
  font-size: 11px !important;
}

/* 3. Efecto hover sutil solo para Escritorio */
@media screen and (min-width: 768px) {
  .header__utility .uil,
  .header__utility svg,
  .header__utility i,
  .header__icon svg,
  .header__icon i {
    opacity: 0.8 !important;
    transition: opacity 0.2s !important;
  }

  .header__utility a:hover .uil,
  .header__utility a:hover svg,
  .header__utility a:hover i,
  .header__icon:hover svg,
  .header__icon:hover i {
    opacity: 1 !important;
  }
}


/* ══════════════════════════════════════════
   5. DESKTOP — Submenús
══════════════════════════════════════════ */

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

  .nav__submenu {
    background: #0d0d0d !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-top: none !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6) !important;
    border-radius: 0 !important;
    padding: 12px 0 !important;
  }

  .nav__submenu a {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 11px !important;
    letter-spacing: 0.14em !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.7) !important;
    padding: 10px 24px !important;
    transition: color 0.2s, padding-left 0.2s !important;
  }

  .nav__submenu a:hover {
    color: #ffffff !important;
    padding-left: 30px !important;
    background: transparent !important;
  }
}


/* ══════════════════════════════════════════
   6. MÓVIL — Header y logo centrado
══════════════════════════════════════════ */

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

  .page__header--mobile {
    background-color: #0a0a0a !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
  }

  .page__header--mobile .page__header--width {
    position: relative !important;
    min-height: 56px !important;
    padding: 0 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .page__header--mobile .header__logo {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 auto !important;
    transform: none !important;
    max-width: 120px !important;
    width: 120px !important;
    padding: 0 !important;
    z-index: 1 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .page__header--mobile .mobile-submenu-label,
  .page__header--mobile .header__utility {
    position: relative !important;
    z-index: 2 !important;
  }

  .mobile-submenu-label i {
    font-size: 22px !important;
    color: #ffffff !important;
  }
}


/* ══════════════════════════════════════════
   7. MÓVIL — Menú navegación
══════════════════════════════════════════ */

.mobile__navigation {
  background: #0a0a0a !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
  z-index: 99999 !important;
  position: fixed !important;
  top: 0 !important;
  height: 100dvh !important;
  overflow-y: auto !important;
}

.overlay--nav {
  z-index: 99998 !important;
  position: fixed !important;
  top: 0 !important;
  height: 100dvh !important;
  width: 100vw !important;
}

.mobile__navigation .nav__link,
.mobile__navigation .nav__link__holder a {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 18px !important;
  letter-spacing: 0.05em !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.85) !important;
  padding: 16px 24px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.mobile__navigation .nav__link:hover {
  color: #ffffff !important;
  background: transparent !important;
}

.mobile__navigation__footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding-top: 16px !important;
}

nav.mobile__navigation .mobile__navigation__footer *,
nav.mobile__navigation .mobile__navigation__footer a,
nav.mobile__navigation .mobile__navigation__footer select,
nav.mobile__navigation .mobile__navigation__footer .user__link,
nav.mobile__navigation .mobile__navigation__footer label,
nav.mobile__navigation .mobile__navigation__footer span {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
  font-weight: 300 !important;
  color: rgba(255, 255, 255, 0.4) !important;
  text-transform: uppercase !important;
}


/* ══════════════════════════════════════════
   8. FIX — Menú móvil encima de todo
══════════════════════════════════════════ */

body:has(#open-mobile-nav:checked) main,
body:has(#open-mobile-nav:checked) .wrapper--bottom,
body:has(#open-mobile-nav:checked) .recently-bought--holder,
body:has(#open-mobile-nav:checked) .floating--socials {
  position: relative !important;
  z-index: 1 !important;
}


/* ══════════════════════════════════════════
   9. HEADER TRANSPARENTE (homepage)
══════════════════════════════════════════ */

.page__header--transparent {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
}

.page__header--transparent .nav__link {
  color: #ffffff !important;
}


/* ══════════════════════════════════════════
   10. MINICART — Pantalla completa en móvil
══════════════════════════════════════════ */

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

  .minicart__overlay,
  .minicart-overlay,
  [class*="minicart__overlay"] {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.85) !important;
    z-index: 9990 !important;
  }

  .minicart,
  .minicart__holder,
  .add-to-cart__success,
  #checkout--success {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    z-index: 9995 !important;
    overflow-y: auto !important;
  }

  .minicart__entries {
    height: calc(100dvh - 200px) !important;
    overflow-y: auto !important;
  }
}


/* ══════════════════════════════════════════
   11. OCULTAR BOTÓN "COMPRAR AHORA"
══════════════════════════════════════════ */

.shopify-payment-button,
.shopify-payment-button__button,
.shopify-payment-button__more-options {
  display: none !important;
}

.button--buynow,
.btn--buynow,
[data-buy-button][onclick*="BuyNow"],
[data-buy-button][onclick*="buyNow"],
[data-original-text="Buy Now"],
[data-original-text="Comprar ahora"] {
  display: none !important;
}


/* ══════════════════════════════════════════
   12. MENÚ MÓVIL — Pantalla completa
══════════════════════════════════════════ */

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

  .mobile__navigation {
    width: 100vw !important;
    max-width: 100% !important;
    border-right: none !important;
  }

  .overlay--nav {
    display: none !important;
  }
}


/* ══════════════════════════════════════════
   13. BOTÓN CERRAR MENÚ MOBILE
══════════════════════════════════════════ */

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

  .close-mobile-nav {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    width: 100% !important;
    padding: 22px 24px 12px !important;
    cursor: pointer !important;
    opacity: 0.75 !important;
    transition: opacity 0.25s ease;
  }

  .close-mobile-nav:hover {
    opacity: 1 !important;
  }

  .close-mobile-nav i,
  .close-mobile-nav span,
  .close-mobile-nav svg {
    width: 20px !important;
    height: 20px !important;
    font-size: 20px !important;
    color: #ffffff !important;
    stroke: #ffffff !important;
    display: block !important;
  }

  .close-mobile-nav button,
  .close-mobile-nav a {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
}


/* ══════════════════════════════════════════
   14. OCULTAR TOP BAR CUANDO ABRE MINICART
══════════════════════════════════════════ */

.minicart--open .nativos-top-bar,
.minicart--open #shopify-section-top-info-bar,
.add-to-cart__success--holder.open ~ .nativos-top-bar,
.add-to-cart__success--holder.open ~ #shopify-section-top-info-bar {
  display: none !important;
}

body:has(.minicart--open) .nativos-top-bar,
body:has(.minicart--open) #shopify-section-top-info-bar,
body:has(.add-to-cart__success--holder.open) .nativos-top-bar,
body:has(.add-to-cart__success--holder.open) #shopify-section-top-info-bar {
  display: none !important;
}


/* ══════════════════════════════════════════
   15. BASE GLOBAL
══════════════════════════════════════════ */

body,
.shopify-section,
.page-container {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 400 !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  letter-spacing: 0.01em !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}


/* ══════════════════════════════════════════
   16. HERO / HOOK PRINCIPAL (Cinzel)
══════════════════════════════════════════ */

.hero__title,
.section-hero h1,
.banner__heading,
[data-section-type="hero"] h1,
[data-section-type="slideshow"] h2 {
  font-family: 'Cinzel', serif !important;
  font-weight: 700 !important;
  font-size: clamp(28px, 4vw, 48px) !important;
  letter-spacing: 0.04em !important;
  line-height: 1.15 !important;
  text-transform: uppercase !important;
}

.cinzel-hook {
  font-family: 'Cinzel', serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}


/* ══════════════════════════════════════════
   17. TÍTULOS DE SECCIÓN
   NOTA: h4 excluido — lo maneja
   .swatches__title por separado
══════════════════════════════════════════ */

h1, h2, h3, h5, h6 {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  line-height: 1.3 !important;
}

h1 { font-size: clamp(22px, 3vw, 36px) !important; }
h2 { font-size: clamp(16px, 2.2vw, 26px) !important; }
h3 { font-size: clamp(14px, 1.8vw, 20px) !important; }


/* ══════════════════════════════════════════
   18. LABELS DE COLECCIÓN
══════════════════════════════════════════ */

.collection-card__title,
.collection-grid__title,
.collection__title,
.featured-collection__heading {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}


/* ══════════════════════════════════════════
   19. PRODUCT CARD — Jerarquía visual
══════════════════════════════════════════ */

.product-card__name,
.product-card__title,
.card__heading,
.card__heading a,
.card-information__text,
.product-item__title,
[class*="product-card"] h3,
[class*="product-card"] h2 {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  line-height: 1.4 !important;
  margin-bottom: 4px !important;
}

.product-card__type,
.product-card__vendor,
.card__vendor,
.card-information__caption,
.product-item__vendor,
[class*="product-card"] .vendor,
[class*="product-card"] .type {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 300 !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  opacity: 0.55 !important;
  margin-bottom: 6px !important;
}

.price,
.product__price,
.price__regular,
.price-item--regular,
.card-information .price,
.product-card .price,
[class*="product-card"] .price {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  letter-spacing: 0.02em !important;
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" !important;
}

.price__compare,
.price-item--compare {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 300 !important;
  font-size: 12px !important;
  text-decoration: line-through !important;
  opacity: 0.45 !important;
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" !important;
}

.price__sale,
.price-item--sale {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" !important;
}

.product-card__rating,
.card__rating,
[class*="stamped"] .stamped-reviews-rating,
[class*="rating"] {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  letter-spacing: 0.02em !important;
  opacity: 0.75 !important;
  margin-bottom: 4px !important;
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" !important;
}

.badge,
.product-badge,
.label,
.product__tag,
[class*="badge"],
[class*="label--"] {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 500 !important;
  font-size: 9px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}


/* ══════════════════════════════════════════
   20. SELECTOR DE VARIANTES (tallas/medidas)
   Fix: evita que el label se apile vertical
══════════════════════════════════════════ */

.swatches__title {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  margin-bottom: 8px !important;
  margin-top: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.swatches__title span {
  font-weight: 400 !important;
  opacity: 0.65 !important;
  white-space: nowrap !important;
}

.swatches__holder {
  margin-bottom: 12px !important;
  overflow: visible !important;
}

/* Botones de talla/opción */
.product__swatches span[data-swatch-option] {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em !important;
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" !important;
}


/* ══════════════════════════════════════════
   21. PÁGINA DE PRODUCTO — Tipografía
══════════════════════════════════════════ */

.product__title,
h1.product__title {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 500 !important;
  font-size: clamp(20px, 2.5vw, 28px) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  line-height: 1.3 !important;
}

.product__description--title {
  display: none !important;
}

.product__description h2,
.rte h2 {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.45) !important;
  margin-top: 2rem !important;
  margin-bottom: 0.5rem !important;
}

.product__description p,
.rte p {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 300 !important;
  font-size: 14px !important;
  line-height: 1.85 !important;
  color: rgba(255, 255, 255, 0.75) !important;
  margin-bottom: 0.75rem !important;
}

.product__description p:first-of-type,
.rte p:first-of-type {
  font-weight: 400 !important;
  font-size: 15px !important;
  color: rgba(255, 255, 255, 0.90) !important;
  margin-bottom: 1rem !important;
}


/* ══════════════════════════════════════════
   22. BOTONES (CTA)
══════════════════════════════════════════ */

.btn,
.button,
.product-form__submit,
[type="submit"] {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
}


/* ══════════════════════════════════════════
   23. FOOTER
══════════════════════════════════════════ */

.footer,
.footer a,
.footer p,
.site-footer,
small,
.caption,
figcaption {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 300 !important;
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
}


/* ══════════════════════════════════════════
   24. FORMULARIOS
══════════════════════════════════════════ */

input,
select,
textarea {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  letter-spacing: 0.02em !important;
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" !important;
}

label {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}


/* ══════════════════════════════════════════
   25. REVIEWS Y TESTIMONIOS
══════════════════════════════════════════ */

.review__text,
.testimonial__text,
.judgment-reviews .review-listing__body {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 300 !important;
  font-size: 14px !important;
  line-height: 1.8 !important;
  font-style: italic !important;
}

.review__author,
.testimonial__author {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}


/* ══════════════════════════════════════════
   26. MÓVIL — Espaciado página de producto
══════════════════════════════════════════ */

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

  /* Título del producto */
  .product__title,
  h1.product__title {
    font-size: 18px !important;
    margin-bottom: 8px !important;
    margin-top: 8px !important;
  }

  /* Selector de variantes */
  .product__swatches,
  .swatches__holder {
    margin-bottom: 8px !important;
  }

  /* Precio */
  .product__price,
  .price-wrapper,
  [class*="product__price"] {
    margin-top: 8px !important;
    margin-bottom: 6px !important;
  }

  /* Badge envío gratis */
  .product__shipping,
  [class*="free-shipping"],
  [class*="shipping-badge"] {
    margin-bottom: 6px !important;
    margin-top: 0 !important;
  }

  /* Banner Mercado Pago */
  .product__payment-info,
  [class*="payment-info"],
  [class*="installments"] {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
  }

  /* Cantidad */
  .quantity--input,
  [class*="quantity"] {
    margin-bottom: 6px !important;
    margin-top: 6px !important;
  }

  /* Botón carrito */
  .product__atc,
  .product-form__submit,
  .btn--add-to-cart {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
  }

  /* Descripción */
  .product__description,
  .product-single__description {
    margin-top: 14px !important;
  }

  /* Padding general contenido producto */
  .product__inner,
  .product-single__inner,
  .product__content {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}
/* =========================================
   PRICE + BADGES INLINE
========================================= */

.nativos-price-badges-wrapper {

  display: flex !important;

  align-items: center !important;

  flex-wrap: wrap !important;

  gap: 10px !important;

  margin-top: 8px !important;

  margin-bottom: 14px !important;
}

.product__price--holder {

  display: flex !important;

  align-items: center !important;

  margin: 0 !important;
}

.nativos-badges-inline-row {

  display: flex !important;

  align-items: center !important;

  gap: 6px !important;

  margin: 0 !important;
}

/* MOBILE */

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

  .nativos-price-badges-wrapper {

    gap: 8px !important;

    margin-top: 6px !important;

    margin-bottom: 10px !important;
  }

  .product__price {

    font-size: 18px !important;
  }

  .nativos-product-badge {

    font-size: 8px !important;

    padding: 4px 6px !important;
  }
}
/* =========================================
   BOOSTER SWATCH SIMPLE PREMIUM
========================================= */

.product__swatches span[data-swatch-option] {

  min-width: 46px !important;

  height: 42px !important;

  padding: 0 14px !important;

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  border: 1px solid rgba(255,255,255,.14) !important;

  background: transparent !important;

  color: #ffffff !important;

  font-size: 13px !important;

  font-weight: 500 !important;

  letter-spacing: .03em !important;

  transition: all .2s ease !important;
}

/* ACTIVA */

.product__swatches input:checked + span[data-swatch-option],
.product__swatches span[data-swatch-option].active {

  background: #f2f2f2 !important;

  border-color: #f2f2f2 !important;

  color: #000000 !important;
}
/* ══════════════════════════════════════════
   27. PRODUCT CARD — Fix espacio imagen/texto
══════════════════════════════════════════ */

.card--holder {
  margin-bottom: 0 !important;
}

.card--default {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

.card__img--ratio {
  margin-bottom: 0 !important;
}

.card__info {
  padding-top: 6px !important;
  margin-top: 0 !important;
}
.card--holder {
  position: relative;
  z-index: 0;   /* Crea stacking context aislado */
  isolation: isolate;
}
/* --- FORZAR FLECHAS BOOSTER EN MOVIL --- */
@media screen and (max-width: 768px) {
  /* Hacemos visibles los botones mágicos de Booster */
  [data-bstr-carousel-button-next],
  [data-bstr-carousel-button-prev] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 9999 !important;
    width: 35px !important;
    height: 35px !important;
    background-color: rgba(255, 255, 255, 0.75) !important;
    border-radius: 50% !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
  }

  /* Asegurarnos de que el icono de la flecha adentro también se vea */
  [data-bstr-carousel-button-next] *,
  [data-bstr-carousel-button-prev] * {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Posición izquierda */
  [data-bstr-carousel-button-prev] {
    left: 10px !important;
  }

  /* Posición derecha */
  [data-bstr-carousel-button-next] {
    right: 10px !important;
  }
}
/* NATIVOS — Trust Bar */
.nativos-trust-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  margin-bottom: 14px;
  border-top: 1px solid #2a2a2a;
  border-bottom: 1px solid #2a2a2a;
  font-size: 10px;
  letter-spacing: 0.10em;
  color: #888;
}

@media (max-width: 768px) {
  .nativos-trust-bar {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-size: 8px;
    letter-spacing: 0.06em;
  }
}
/* NATIVOS — Accordions */
.nativos-accordion {
  border-bottom: 1px solid #2a2a2a;
}

.nativos-accordion__title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: #fff;
  cursor: pointer;
  list-style: none;
}

.nativos-accordion__title::after {
  content: '+';
  font-size: 16px;
  color: #666;
  transition: transform 0.2s;
}

.nativos-accordion[open] .nativos-accordion__title::after {
  content: '−';
}

.nativos-accordion__content {
  padding: 0 0 16px 0;
  font-size: 13px;
  color: #888;
  line-height: 1.7;
}

/* NATIVOS — Upsell Card */
.nativos-upsell-card {
  border: 1px solid #2a2a2a;
  padding: 16px;
  margin: 20px 0;
}

.nativos-upsell-label {
  font-size: 9px;
  letter-spacing: 0.14em;
  color: #666;
  margin-bottom: 12px;
}

.nativos-upsell-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.nativos-upsell-title {
  font-size: 13px;
  color: #fff;
  margin-bottom: 4px;
}

.nativos-upsell-price {
  font-size: 12px;
  color: #aaa;
}

.nativos-upsell-btn {
  flex-shrink: 0;
  background: transparent;
  color: #fff;
  border: 1px solid #444;
  padding: 10px 14px;
  font-size: 10px;
  letter-spacing: 0.10em;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s;
}

.nativos-upsell-btn:hover {
  background: #fff;
  color: #000;
}
/* ══════════════════════════════════════════
   33. VARIANTES — BOTONES VISIBLES (FIX v10)
   Booster usa clase "swatch--active", no "active"
══════════════════════════════════════════ */

/* Todos los botones de variante — estado base */
[data-swatch-option] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 52px !important;
  height: 44px !important;
  padding: 0 16px !important;
  background: transparent !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.40) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}

/* Hover */
[data-swatch-option]:hover {
  border-color: rgba(255, 255, 255, 0.75) !important;
}

/* ACTIVO — Booster usa swatch--active */
[data-swatch-option].swatch--active {
  background: #f2f2f2 !important;
  border-color: #f2f2f2 !important;
  color: #000000 !important;
  font-weight: 500 !important;
}

/* Swatches de COLOR — el background-color viene inline de Booster */
[data-swatch-option][style*="background"] {
  min-width: 44px !important;
  width: 44px !important;
  height: 4