/** Shopify CDN: Minification failed

Line 423:0 Unexpected "{"
Line 499:2 Unexpected "{"

**/
/* =========================================
   VARIANTS & UI — Limpieza + estructura
   Regla: base primero; overrides al final.
   ========================================= */

/* ------------------------------
   0) NORMALIZACIONES GENERALES
   ------------------------------ */
.product-single__meta label.variant__label {
  font-size: 14px;
  width: 100%;
  color: #3c3737;
  cursor: pointer;
  display: inline-block;
  font-weight: 600;
  letter-spacing: .35px;
  text-transform: uppercase;
}
.hidden { display: none !important; }

/* ------------------------------
   1) STONE SHAPE (chips SVG)
   ------------------------------ */
.variant-input .mrk-stone-shape {
  box-shadow: none !important;
  padding: 0 !important;
}
.variant-input-wrap input[type=radio]:checked + .mrk-stone-shape svg g > * {
  stroke: #0d0f2e;
}

/* Layout en 1 línea + reparto condicional */
fieldset.variant-input-wrap[data-handle="stone-shape"] {
  display: flex !important;
  flex-wrap: nowrap !important;          /* 1 sola línea */
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
}
fieldset.variant-input-wrap[data-handle="stone-shape"] > .variant-input {
  display: flex;
  justify-content: flex-start;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  text-align: left;
}
fieldset.variant-input-wrap[data-handle="stone-shape"] label { margin: 0 !important; }
fieldset.variant-input-wrap[data-handle="stone-shape"] .mrk-stone-shape {
  display: inline-flex;
  align-items: center;
  justify-content:flex-start !important;
}
@supports(selector(:has(*))) {
  fieldset.variant-input-wrap[data-handle="stone-shape"]:has(> .variant-input:nth-child(n+6)) > .variant-input {
    flex: 1 1 0 !important;
  }
}
@media (max-width: 480px) {
  fieldset.variant-input-wrap[data-handle="stone-shape"] .mrk-stone-shape svg { max-width: 32px; height: auto; }
}
@media (max-width: 360px) {
  fieldset.variant-input-wrap[data-handle="stone-shape"] .mrk-stone-shape svg { max-width: 28px; }
}

/* ------------------------------
   2) METAL (chips redondos)
   Nota: se soportan las clases con el typo `matel`
   para no tocar el HTML (alias selectors).
   ------------------------------ */
.mrk-matel-item,
.mrk-metal-item {
  box-shadow: none !important;
  padding: 0 !important;
  text-align: left;
}
.mrk-matel-swatch,
.mrk-metal-swatch {                      /* alias */
  color: #3b3b3b;
  cursor: pointer;
  background-color: var(--bg);
  border-radius: 50%;
  font-size: 12px;
  padding: 16px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  line-height: normal;
  position: relative;
  z-index: 10;
  margin: 5px auto !important;          /* margen uniforme 5px y centrado */
}
.mrk-metal-name {
  max-width: 55px;
  margin: 0;               /* evita re-centrado por margin:auto */
  text-transform: none;
  font-size: 12px;
  display: block;
  line-height: 1.2;
  min-height: 26px;
  text-align: left;
  white-space: normal;
}

.mrk-metal-item-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding-top: 2px;
}
.variant-input-wrap input[type=radio]:checked + label .mrk-matel-swatch,
.variant-input-wrap input[type=radio]:checked + label .mrk-metal-swatch {
  box-shadow: 0 0 0 2px #0d0f2e;
}

/* Contenedor: siempre 1 fila sin espaciar extremos */
fieldset.variant-input-wrap.mrk-metal-items-wrapper {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content:flex-start !important;
  align-items: flex-start !important;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
}

/* Solo en pantallas grandes, si quieres que arranque a la izquierda */
@media (min-width: 769px) {
  fieldset.variant-input-wrap.mrk-metal-items-wrapper {
    justify-content: flex-start;
  }
}

fieldset.variant-input-wrap.mrk-metal-items-wrapper > .variant-input,
fieldset.variant-input-wrap.mrk-metal-items-wrapper > .setting-value,
fieldset.variant-input-wrap.mrk-metal-items-wrapper > .mrk-matel-item,
fieldset.variant-input-wrap.mrk-metal-items-wrapper > .mrk-metal-item,
fieldset.variant-input-wrap.mrk-metal-items-wrapper > * {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  text-align: left;
}

/* Chips y textos más compactos */
.mrk-matel-swatch,
.mrk-metal-swatch { margin: 5px auto !important; }
.mrk-metal-name   { white-space: normal; line-height: 1.1; }

/* Si hay muchas opciones (≥6), repartir para que quepan en 1 fila */
@supports(selector(:has(*))) {
  fieldset.variant-input-wrap.mrk-metal-items-wrapper:has(> :nth-child(n+11)) > * {
    flex: 1 1 0 !important;
  }
  fieldset.variant-input-wrap.mrk-metal-items-wrapper:has(> :nth-child(n+11)) .mrk-metal-item-inner {
    margin: 0 !important;
  }
}

/* ------------------------------
   3) SELECT-MENU / TABS / ACCORDIONS
   ------------------------------ */
select-menu {
  position: relative;
  gap: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.select-wrapper { width: 100%; position: relative; }
select-menu .sidebar-block__select { width: 100%; position: relative; }
select-menu .sidebar-block__links {
  font-size: 12px;
  font-weight: 600;
  padding: .7rem 3rem .7rem 1rem;
  border-radius: 0;
  outline: none;
  box-shadow: none;
  width: 100%;
  color: #3c3737;
  display: flex;
  background-color: #fff;
  border: 2px solid #3c3737;
  position: relative;
  line-height: normal;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
}
select-menu .gem-color { width: 15px; height: 15px; display: inline-block; border-radius: 50%; background: var(--bg); }
select-menu .icon-caret-wrapper { position: absolute; top: 50%; right: 1rem; transform: translateY(-50%); line-height: normal; height: 1.2rem; cursor: pointer; }
select-menu .icon { align-items: center; display: inline-flex; justify-content: center; height: 1.2rem; width: 1.2rem; fill: currentColor; }
select-menu .sidebar-block__content { padding-top: 0; background-color: #fff; border: 2px solid #3c3737; }
select-menu .sidebar-block__content .sidebar-block__item { font-size: 12px; padding: 5px 3rem 5px 1rem !important; line-height: normal; margin-bottom: 3px; }
select-menu .sidebar-block__content .sidebar-block__item,
select-menu .sidebar-block__content .sidebar-block__item a {
  gap: 1rem; width: 100%; display: flex; cursor: pointer; align-items: center;
}
select-menu .blue-sapphire .gem-color { background-color: #2e3dd4; }
select-menu.is-open .hidden { display: block !important; }
select-menu.is-open .sidebar-block__content {
  border-top: 0;
  position: absolute;
  width: 100%;
  z-index: 10;
  padding-top: .5rem;
  padding-bottom: .5rem;
  top: calc(100% - 2px);
  margin-left: 0;
}

/* Accordion Grabado */
.setting-accordion-button { font-size: 14px; width: 100%; color: #3c3737; cursor: pointer; display: inline-block; }
.setting-accordion-button .button_text { font-weight: 600; letter-spacing: .35px; text-transform: uppercase; }
.setting-accordion-button .button_text + span,
.setting-accordion-button .button_text + span b { font-weight: 400; }
.setting-accordion-content { margin: .8rem 0 .5rem; }

.setting-accordion-Grabado .radio-wrapper,
.setting-accordion-Grabado .radio-wrapper label,
.setting-accordion-Grabado .radio-wrapper .label-wrapper {
  gap: .5rem; display: flex; align-items: center;
}
.setting-accordion-Grabado .radio-wrapper { gap: 2.5rem; }
.setting-accordion-Grabado .radio-wrapper:not(:last-child) { margin: 0 0 1.3rem; }
.setting-accordion-Grabado .radio-wrapper .label-wrapper { font-size: 12px; cursor: pointer; }
.setting-accordion-Grabado .radio-wrapper input[type=radio],
.setting-accordion-Grabado .radio-wrapper input[type=checkbox] {
  -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent;
  border: 2px solid #000000; padding: .6rem; cursor: pointer; position: relative; border-radius: 0;
}
.setting-accordion-Grabado .radio-wrapper .label-wrapper label { cursor: pointer; }
.setting-accordion-Grabado .radio-wrapper input[type=radio]:checked,
.setting-accordion-Grabado .radio-wrapper input[type=checkbox]:checked { border-color: #0d0f2e; }
.setting-accordion-Grabado .radio-wrapper input[type=radio]:checked:before,
.setting-accordion-Grabado .radio-wrapper input[type=radio]:checked:after,
.setting-accordion-Grabado .radio-wrapper input[type=checkbox]:checked:before,
.setting-accordion-Grabado .radio-wrapper input[type=checkbox]:checked:after {
  content: ""; width: 2px; height: 15px; display: block; background-color: #0d0f2e; position: absolute; top: 5%; left: 45%;
  transform: rotate(45deg) translateY(0);
}
.setting-accordion-Grabado .radio-wrapper input[type=radio]:checked:after,
.setting-accordion-Grabado .radio-wrapper input[type=checkbox]:checked:after { transform: rotate(135deg) translateY(0); }

/* Tabs */
.setting-tabs-wrapper .select-wrapper {
  width: 100%;
  position: relative;
}

.setting-tabs-wrapper .select-wrapper select,
.setting-tabs-wrapper .select-wrapper .select-box,
.setting-tabs-wrapper .select-wrapper input {
  color: #3c3737;
  border-color: #3c3737;

  width: 100%;
  padding: .8rem 1.3rem;
  box-shadow: none;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background: transparent;
  border-radius: 0;
  border-width: 2px;
  font-size: 12px;
  cursor: pointer;
  position: relative;
  z-index: 2;

  /* clave para que el cajón no se salga del wrapper */
  box-sizing: border-box;
}

.setting-tabs-wrapper .icon {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  height: 1.2rem;
  width: 1.2rem;
  fill: currentColor;
}

.setting-tabs-wrapper .select-wrapper .select-caret {
  position: absolute;
  top: 50%;
  right: 1.3rem;
  z-index: 1;
  transform: translateY(-50%);
}

.setting-tabs-wrapper .icon svg {
  height: 100%;
  width: 100%;
}

.setting-accordion-Grabado .radio-wrapper.terms label {
  font-size: 13px; cursor: pointer; font-style: italic; align-items: flex-start; line-height: normal;
  text-transform: none !important; letter-spacing: 0;
}

/* Ring size + Grabado */
.mrk-ring-size-Grabado {
  display: flex;
  padding-top: 20px;
  flex-direction: column;   /* 👉 siempre en columna */
  gap: 30px;                /* 👉 separación entre Talla y Grabado */
}

.mrk-ring-size-Grabado > div { flex: 1; }
.mrk-ring-size-Grabado select { width: 100%; }
.mrk-ring-size-Grabado label { margin-bottom: 0; }
.mrk-ring-size-Grabado input[type="text"] { width: 100%; }

/* =========================================
   DROPDOWN CUSTOM TALLA (ring-size-dropdown)
   ========================================= */
.ring-size-dropdown {
  position: relative;
  width: 100%;
}

.ring-size-trigger {
  width: 100%;
  padding: .8rem 1.3rem;
  border: 2px solid #3c3737;
  background-color: #ffffff;
  color: #3c3737;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  border-radius: 0;
  position: relative;
}

.ring-size-trigger-label {
  flex: 1 1 auto;
  text-align: left;
}

/* recolocamos el caret dentro del botón de talla */
.ring-size-trigger .select-caret {
  position: absolute;
  top: 50%;
  right: 1.3rem;
  transform: translateY(-50%);
  z-index: 2;
}

.ring-size-menu {
  display: none;
  position: absolute;
  top: 100%;              /* pegado al borde inferior del botón */
  left: 0;
  width: 100%;
  max-height: 220px;
  overflow-y: auto;
  background-color: #ffffff;
  border: 2px solid #3c3737;
  border-top: 0;          /* elimina la doble línea y alinea con el botón */
  box-sizing: border-box;
  z-index: 25;
  margin: 0;              /* quita separación del <ul> por defecto */
  padding: 0;
}

.ring-size-dropdown.is-open .ring-size-menu {
  display: block;
}


.ring-size-menu li {
  list-style: none;
}

.ring-size-option {
  width: 100%;
  text-align: left;
  padding: .5rem 1.3rem;
  border: 0;
  background-color: #ffffff;
  color: #3c3737;
  font-size: 12px;
  cursor: pointer;
  box-sizing: border-box;
}

.ring-size-option:hover,
.ring-size-option:focus {
  background-color: #f2f2f2;
  outline: none;
}

/* Gems/tabs */
.mrk-gems-wrapper { width: 50%; }
.mrk-gemstone-wrapper { margin: 15px 0 22px 0; }
.mrk-gemstone-wrapper .setting-accordion-button { margin-bottom: 7px; }
.mrk-gemstone-wrapper { display: none; }

/* Tabs buttons */
.setting-tab-button {
  color: #000; cursor: pointer !important; font-size: 12px !important; font-weight: 600;
  padding: 8px 25px; background: transparent; border-color: #0d0f2e; border-style: solid; border-width: 2px; border-bottom: 0;
  letter-spacing: 2.5px !important; text-transform: uppercase !important; outline: none !important; margin: 0;
}
{
  gap: 1rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;

  /* subrayado inferior “estético” */
  border-bottom: 2px solid #0d0f2e;
  padding-bottom: 0px;       /* separa los botones del subrayado */
  margin-bottom: 15px;

  /* scroll horizontal sin mostrar la barrita (mobile/medium) */
  overflow-x: auto;
  -ms-overflow-style: none;  /* IE/Edge antiguo */
  scrollbar-width: none;     /* Firefox */
}
::-webkit-scrollbar{
  width: 0;
  height: 0;                 /* WebKit (Chrome/Safari) */
}

/* ya está en tu CSS, pero por si acaso: */
.setting-tab-button{
  border-bottom: 0;          /* evita doble línea con el subrayado del contenedor */
}

input { display: none; }
.mrk-btn-item input:checked + label { background: #0d0f2e; color: #fff; }
.mrk-btn-item label { white-space: nowrap; }

.mrk-buy-now-btn { margin-top: 10px; }

/* ------------------------------
   4) FALLBACK SIN :has() (añadir .is-many por JS)
   ------------------------------ */
fieldset.variant-input-wrap.mrk-metal-items-wrapper.is-many > * { flex: 1 1 0 !important; }
fieldset.variant-input-wrap.mrk-metal-items-wrapper.is-many .mrk-metal-item-inner { margin: 0 !important; }
fieldset.variant-input-wrap[data-handle="stone-shape"].is-many > .variant-input { flex: 1 1 0 !important; }

/* ------------------------------
   5) RESPONSIVE
   ------------------------------ */
@media (max-width: 769px) {
  .mrk-ring-size-Grabado { flex-direction: column; gap: 30px; }
}
@media (min-width: 769px) { .tab-mobile { display: none; } }
@media (max-width: 769px) { .tab-desk { display: none; } }

/* Compactar metal en móviles pequeños */
@media (max-width: 480px) {
  fieldset.variant-input-wrap.mrk-metal-items-wrapper { gap: 4px; }
  .mrk-matel-swatch, .mrk-metal-swatch { width: 32px; height: 32px; padding: 12px; font-size: 11px; }
  .mrk-metal-name   { font-size: 11px; }
}

/* ------------------------------
   6) OVERRIDES FINALES (ganan por estar al final)
   Usa !important solo cuando compita con inline styles o terceros.
   ------------------------------ */
/* Alinear los swatches entre sí (ya aplicado arriba, aquí se refuerza) */
fieldset.variant-input-wrap.mrk-metal-items-wrapper{ align-items: flex-start !important; }

/* Normalizar altura del texto bajo cada swatch (ya aplicado, se refuerza) */
.mrk-metal-name{ margin: 0 auto !important; }

/* Evitar márgenes que desalineen el conjunto */
.mrk-matel-item label,
.mrk-metal-item label { margin: 0 !important; }
.mrk-metal-item-inner{ padding-top: 0 !important; }

/* Forzar margen de 5px en todos los lados (por si hay estilos heredados) */
.variant-input-wrap .mrk-matel-swatch,
.variant-input-wrap .mrk-metal-swatch { margin: 5px !important; }

/* === FIX: Tabs ocupan todo el ancho en desktop (sin huecos) === */
@media (min-width: 1024px) {
  {
    overflow: visible;        /* quita scroll horizontal en desktop */
    gap: 16px;
    width: 100%;
    align-items: stretch;
  }
  /* Cada tab ocupa el mismo espacio */
   > .mrk-btn-item{
    flex: 1 1 0;
    min-width: 0;
  }
  /* Si algún tab no viene envuelto en .mrk-btn-item */
   > *:not(.mrk-btn-item){
    flex: 1 1 0;
    min-width: 0;
  }
 > .mrk-btn-item > label.setting-tab-button,
> * > label.setting-tab-button{
  display: block;
  width: 100%;
  height: 100%;
  text-align: left;
  box-sizing: border-box;
}

}

.jci-gif-loader {
  position: relative;
}

.jci-gif-loader img {
  position: absolute;
  left: 0;
  top: 0;
}

/* ==== Estilos específicos para el campo de grabado ==== */
.setting-accordion-Grabado .select-wrapper #Grabado_name1 {
  display: block;
  width: 100%;
  padding: .8rem 1.3rem;

  /* Borde visible del recuadro */
  border: 2px solid #3c3737;

  /* Fondo (puedes cambiarlo si quieres que sea azul, etc.) */
  background-color: #ffffff;

  /* Texto normal */
  color: #3c3737;
}

/* Que el placeholder se vea dentro del recuadro */
.setting-accordion-Grabado .select-wrapper #Grabado_name1::placeholder {
  color: #3c3737;
  opacity: 0.6;
}

/* ==== Estilo custom para radios de GRABADO (No / Sí) ==== */

/* Poner los dos opciones en línea */
.setting-accordion-Grabado .radio-wrapper {
  display: flex;
  gap: 24px;
  margin: 8px 0 12px;
}

/* Cada opción (No / Sí) */
.setting-accordion-Grabado .radio-wrapper .label-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

/* Ocultamos el radio nativo, pero sigue siendo clicable vía el label */
.setting-accordion-Grabado .radio-wrapper input[type="radio"] {
  position: absolute;
  opacity: 0;
}

/* Texto + cuadradito */
.setting-accordion-Grabado .radio-wrapper label {
  position: relative;
  padding-left: 26px;   /* espacio para el cuadrado */
  cursor: pointer;
}

/* Cuadradito vacío */
.setting-accordion-Grabado .radio-wrapper label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border: 2px solid #000000;
  box-sizing: border-box;
}

/* X cuando el radio está seleccionado */
.setting-accordion-Grabado .radio-wrapper input[type="radio"]:checked + label::after {
  content: "✕";
  position: absolute;
  left: 3px;
  top: 50%;
  transform: translateY(-55%);
  font-size: 16px;
  line-height: 1;
}

/* (Opcional) borde de foco accesible cuando se navega con teclado */
.setting-accordion-Grabado .radio-wrapper input[type="radio"]:focus-visible + label::before {
  outline: 2px solid #000;
  outline-offset: 2px;
}

/* Espacio entre el texto "Escribe aquí tu grabado" y el recuadro */
.setting-accordion-Grabado .select-wrapper .Grabado-label {
  display: block;
  margin-bottom: 6px;   /* puedes subir/bajar este valor (px) a tu gusto */
}

/* Preview del grabado debajo del botón COMPRAR AHORA */
.Grabado-preview-bottom {
  display: none;      /* oculto por defecto: sólo se muestra si el cliente elige "Sí" */
  margin-top: 20px;
  font-size: 14px;
}
/* ----------------------------------------------------
   Estado "bloqueado" para los botones de compra
   cuando falta aceptar las condiciones de Grabado
   ---------------------------------------------------- */

/* Botón AGREGAR AL CARRITO */
button.add-to-cart.grabado-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Botón de pago dinámico (Shopify Pay / Mercado Pago, etc.) */
.shopify-payment-button.grabado-disabled {
  opacity: 0.5;
  pointer-events: none;  /* 🔒 aquí bloqueamos realmente el click */
}

.shopify-payment-button.grabado-disabled .shopify-payment-button__button {
  cursor: not-allowed;
}



.Grabado-preview-bottom .Grabado-label {
  font-weight: 600;
  margin-right: 4px;
}
.Grabado-preview-bottom .Grabado-preview-text {
  margin-bottom: 8px;
}

/* ==== Checkbox de aceptación bajo el Preview ==== */
.Grabado-preview-bottom .terms {
  margin-top: 8px;
  display: flex;
  align-items: center;
}

/* ocultamos el checkbox nativo, pero sigue siendo clicable por el label */
.Grabado-preview-bottom .terms input[type="checkbox"] {
  position: absolute;
  opacity: 0;
}

/* texto + cuadrito */
.Grabado-preview-bottom .terms label {
  position: relative;
  padding-left: 26px;   /* espacio para el cuadrado */
  cursor: pointer;
}

/* cuadrito vacío */
.Grabado-preview-bottom .terms label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border: 2px solid #000000;
  box-sizing: border-box;
}

/* X cuando el checkbox está marcado */
.Grabado-preview-bottom .terms input[type="checkbox"]:checked + label::after {
  content: "✕";
  position: absolute;
  left: 3px;
  top: 50%;
  transform: translateY(-55%);
  font-size: 16px;
  line-height: 1;
}

/* opcional: foco accesible al navegar con teclado */
.Grabado-preview-bottom .terms input[type="checkbox"]:focus-visible + label::before {
  outline: 2px solid #000;
  outline-offset: 2px;
}

/* ==== Animación suave del bloque de condiciones de grabado ==== */
@keyframes grabadoTermsShake {
  0% { transform: translateX(0); }
  20% { transform: translateX(-3px); }
  40% { transform: translateX(3px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
  100% { transform: translateX(0); }
}

.grabado-terms-shake {
  animation: grabado-shake 0.3s ease-in-out;
}

@keyframes grabado-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}