/* ==========================================================================
   LYCHE · Swatches de color · WooCommerce · v1.2.1
   --------------------------------------------------------------------------
   El color NO vive aquí. Cada swatch llega desde PHP con --sw (y --sw2 si es
   bicolor), leído del término del atributo.

   v1.2 · Los swatches ya no son <button> sino <span>. Temas como Divi
   inyectan ::before y ::after con iconos en TODOS los botones, usando
   selectores como #page-container .et_pb_button:before, que ganan a
   cualquier regla propia. De ahí los círculos negros encima de los swatches.
   Un <span> no lo tocan. Aun así, todo va con doble clase y !important en
   las propiedades críticas.
   ========================================================================== */

.lyc-swatches{
  --lyc-sw-size: 20px;               /* diámetro visible */
  --lyc-sw-tap:  40px;               /* área táctil, nunca por debajo de 40 */
  --lyc-sw-gap:  9px;                /* separación entre swatches */
  --lyc-sw-ring: #8E4340;            /* anillo de selección */
  --lyc-sw-edge: rgba(22,22,26,.16); /* borde interno: hace visibles los claros */
  --lyc-sw-text: #3A2320;            /* texto de la pastilla sin color */

  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lyc-sw-gap) !important;
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1;
}

/* ============================ Swatch ============================ */
.lyc-swatches .lyc-swatch{
  --sw: #DDD8D4;                     /* solo se ve si el atributo no tiene color */
  position: relative !important;
  display: block !important;
  flex: 0 0 auto;
  box-sizing: border-box !important;
  width: var(--lyc-sw-size) !important;
  height: var(--lyc-sw-size) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background-color: var(--sw) !important;
  background-image: none;
  background-size: auto !important;
  box-shadow: inset 0 0 0 1px var(--lyc-sw-edge) !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: 0 !important;
  text-transform: none !important;
  color: transparent !important;
  cursor: pointer;
  overflow: visible !important;
  transition: transform .2s cubic-bezier(.22,.61,.36,1);
  vertical-align: middle;
  -webkit-tap-highlight-color: transparent;
}

/* Anillo de selección. content y background explícitos para que ningún
   tema pueda meter aquí su propio icono. */
.lyc-swatches .lyc-swatch::before{
  content: "" !important;
  position: absolute !important;
  inset: -5px !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: inherit !important;
  border: 1px solid transparent !important;
  background: none !important;
  font-family: inherit !important;
  transition: border-color .2s ease;
  pointer-events: none;
  transform: none !important;
}

/* Área táctil: 40px reales aunque el círculo mida 20.
   El pseudo-elemento forma parte del span, así que recibe el toque. */
.lyc-swatches .lyc-swatch::after{
  content: "" !important;
  position: absolute !important;
  inset: calc((var(--lyc-sw-size) - var(--lyc-sw-tap)) / 2) !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: none !important;
  font-family: inherit !important;
  transform: none !important;
}

.lyc-swatches .lyc-swatch:hover{ transform: scale(1.12); }
.lyc-swatches .lyc-swatch:active{ transform: scale(.94); }
.lyc-swatches .lyc-swatch.is-on::before{ border-color: var(--lyc-sw-ring) !important; }
.lyc-swatches .lyc-swatch:focus{ outline: none !important; }
.lyc-swatches .lyc-swatch:focus-visible::before{
  border-color: var(--lyc-sw-ring) !important;
  border-style: dashed !important;
}

/* Nombre para lectores de pantalla. Clase propia: screen-reader-text la
   define el tema, no el core, y si el tema no la trae el nombre se escapa
   fuera del círculo. Esto es lo que producía el texto desbordado. */
.lyc-swatches .lyc-swatch__sr{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* — Bicolor y estampado — */
.lyc-swatches .lyc-swatch--duo{
  background-color: transparent !important;
  background-image: linear-gradient(135deg, var(--sw) 0 50%, var(--sw2) 50% 100%) !important;
}

/* ============================ Sin color definido ============================ */

/* Catálogo: círculo punteado vacío. No hay sitio para nombres en una tarjeta. */
.lyc-swatches .lyc-swatch--empty{
  background-color: transparent !important;
  box-shadow: none !important;
  border: 1px dashed rgba(22,22,26,.35) !important;
}

/* Ficha de producto: pastilla con el nombre, para que el hueco se vea. */
.lyc-swatches .lyc-swatch--text{
  width: auto !important;
  height: auto !important;
  min-height: 30px !important;
  padding: 6px 11px !important;
  border-radius: 2px !important;
  background-color: transparent !important;
  box-shadow: inset 0 0 0 1px var(--lyc-sw-edge) !important;
  font-size: .7rem !important;
  line-height: 1.2 !important;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase !important;
  color: var(--lyc-sw-text) !important;
  white-space: nowrap;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
.lyc-swatches .lyc-swatch--text::before{ inset: -3px !important; border-radius: 3px !important; }
.lyc-swatches .lyc-swatch--text::after{ inset: 0 !important; }
.lyc-swatches .lyc-swatch--text.is-on{
  background-color: var(--lyc-sw-ring) !important;
  color: #FFF9F6 !important;
  box-shadow: none !important;
}
.lyc-swatches .lyc-swatch--text:hover{
  transform: none;
  box-shadow: inset 0 0 0 1px var(--lyc-sw-ring) !important;
}

/* ============================ Agotado ============================ */
/* No se desactiva: el clic sigue vivo para poder enganchar
   “Avísame cuando llegue”, que es captura de contacto, no puerta cerrada. */
.lyc-swatches .lyc-swatch[data-stock="0"]{
  opacity: .55;
  background-image: linear-gradient(
    to bottom right,
    transparent calc(50% - .6px),
    var(--lyc-sw-ring) calc(50% - .6px),
    var(--lyc-sw-ring) calc(50% + .6px),
    transparent calc(50% + .6px)) !important;
}
.lyc-swatches .lyc-swatch--text[data-stock="0"]{
  text-decoration: line-through;
  background-image: none !important;
}
.lyc-swatches .lyc-swatch[data-stock="0"]:hover{ transform: none; }

/* ============================ Tamaños ============================ */
.lyc-swatches--sm{ --lyc-sw-size: 15px; --lyc-sw-tap: 34px; --lyc-sw-gap: 8px; }
.lyc-swatches--lg{ --lyc-sw-size: 30px; --lyc-sw-tap: 48px; --lyc-sw-gap: 12px; }
.lyc-swatches--sm .lyc-swatch--text{
  font-size: .62rem !important;
  min-height: 26px !important;
  padding: 4px 8px !important;
}

/* ============================ Contador ============================ */
.lyc-swatches .lyc-swatch--more{
  width: auto !important;
  height: auto !important;
  background: none !important;
  box-shadow: none !important;
  font-size: .68rem !important;
  line-height: 1 !important;
  color: rgba(22,22,26,.55) !important;
  letter-spacing: .02em;
  cursor: default;
  display: inline-flex !important;
  align-items: center;
  padding-inline-start: 2px !important;
}
.lyc-swatches .lyc-swatch--more::before,
.lyc-swatches .lyc-swatch--more::after{ display: none !important; }

/* ============================ Alineación ============================ */
/* No depende del marcado del tema: la clase la pone PHP en el propio
   contenedor. En el catálogo va centrada por defecto; en la ficha, a la
   izquierda. Se cambia con el filtro lyche_swatch_align. */
.lyc-swatches.lyc-swatches--start{ justify-content: flex-start !important; }
.lyc-swatches.lyc-swatches--center{ justify-content: center !important; }
.lyc-swatches.lyc-swatches--end{ justify-content: flex-end !important; }

.lyc-swatches__label.lyc-swatches--start{ text-align: left; }
.lyc-swatches__label.lyc-swatches--center{ text-align: center; }
.lyc-swatches__label.lyc-swatches--end{ text-align: right; }

/* Red de seguridad: cualquier fila del catálogo va centrada aunque el tema
   use un marcado que no coincida con los selectores de WooCommerce. */
.lyc-swatches[data-loop]{ justify-content: center; }

/* ============================ Nombre del color ============================ */
/* En táctil no hay hover: si el nombre no está escrito, la clienta no sabe
   si eligió “azul noche” o “azul”. */
.lyc-swatches__label{
  display: block;
  margin-top: 8px;
  font-size: .8rem;
  letter-spacing: .03em;
  opacity: .72;
  min-height: 1.2em;
}

/* ============================ WooCommerce ============================ */

/* El <select> sigue en el DOM porque el JS de Woo lo necesita:
   los swatches escriben en él. Solo se oculta visualmente. */
.woocommerce .variations td.value select,
.woocommerce div.product form.cart .variations select{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.woocommerce div.product form.cart .variations{ margin-bottom: 14px; }
.woocommerce div.product form.cart .variations th.label{
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
  padding-bottom: 4px;
}
.woocommerce div.product form.cart .variations td{ padding-bottom: 12px; }

/* Catálogo: solo el margen. La alineación la decide la clase de arriba. */
.woocommerce ul.products li.product .lyc-swatches{ margin-block: 10px 12px; }
.woocommerce ul.products li.product .lyc-swatches__label{ display: none; }

/* ============================ Movimiento reducido ============================ */
@media (prefers-reduced-motion: reduce){
  .lyc-swatches .lyc-swatch,
  .lyc-swatches .lyc-swatch::before{ transition: none !important; }
  .lyc-swatches .lyc-swatch:hover{ transform: none; }
}