/**
 * Kamewaii Sticker Configurator — Estilos del configurador frontend
 *
 * Convenciones:
 * - Prefijo .ksc- en TODAS las clases para evitar conflictos con themes.
 * - Mobile-first: base para móvil, breakpoint 768px para desktop.
 * - Color de acento verde: #16a34a / #22c55e.
 * - Sin !important salvo en las reglas de supresión WC (sección 15).
 *
 * @package KSC
 */

/* ============================================================
   1. VARIABLES CSS
   ============================================================ */

.ksc-configurator {
	--ksc-green:         #22c55e;
	--ksc-green-dark:    #16a34a;
	--ksc-green-darker:  #15803d;
	--ksc-green-light:   #ecfdf5;
	--ksc-green-bg:      #f0fdf4;
	--ksc-cta:           #ff3334;   /* rojo del botón Añadir al carrito */
	--ksc-cta-hover:     #a30900;   /* rojo del hover */
	--ksc-text:          #111111;
	--ksc-text-muted:    #666666;
	--ksc-text-light:    #999999;
	--ksc-border:        #e5e7eb;
	--ksc-border-strong: #d1d5db;
	--ksc-bg:            #ffffff;
	--ksc-bg-soft:       #fafafa;
	--ksc-bg-hover:      #f3f4f6;
	--ksc-radius:        16px;
	--ksc-radius-sm:     12px;
	--ksc-radius-xs:     8px;
	--ksc-radius-pill:   999px;
	--ksc-shadow-sm:     0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
	--ksc-shadow:        0 4px 16px rgba(0,0,0,.08);
	--ksc-step-circle:   28px;
	--ksc-transition:    0.18s ease;
	--ksc-slot-dash:     rgba(0,0,0,.22);
	--ksc-slot-bg:       rgba(0,0,0,.025);
}


/* ============================================================
   2. CONTENEDOR PRINCIPAL
   ============================================================ */

.ksc-configurator {
	width: 100%;
	/* Baseline heredable: fijamos explícitamente TODO lo que un tema o
	   Elementor podría heredar hacia dentro del configurador. Al declararlo
	   aquí, los hijos parten de un estado controlado en vez de heredar los
	   valores globales del tema. */
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
	             'Helvetica Neue', Arial, sans-serif;
	font-size:       16px;
	font-weight:     400;
	font-style:      normal;
	line-height:     1.5;
	letter-spacing:  normal;
	word-spacing:    normal;
	text-transform:  none;
	text-align:      left;
	text-decoration: none;
	text-shadow:     none;
	white-space:     normal;
	color:           var(--ksc-text);
	-webkit-font-smoothing: antialiased;
}

.ksc-configurator *,
.ksc-configurator *::before,
.ksc-configurator *::after {
	box-sizing: border-box;
}


/* ============================================================
   2b. AISLAMIENTO FRENTE A TEMA / ELEMENTOR
   ============================================================

   Los temas y Elementor suelen estilizar etiquetas sueltas (h2, button,
   a, p, ul…) con selectores que ganan a la herencia y se "cuelan" dentro
   del configurador (tipografías enormes, botones con fondo del tema,
   mayúsculas forzadas, viñetas de lista, etc.).

   Este bloque neutraliza esas etiquetas DENTRO de .ksc-configurator.

   Técnica de especificidad:
   - Usamos :where(...) en la parte de etiqueta → especificidad CERO en
     esa parte, por lo que el selector total queda en 0,1,0 (solo cuenta
     .ksc-configurator).
   - 0,1,0 GANA a los selectores de etiqueta del tema (button, h2 → 0,0,1).
   - 0,1,0 NO pisa los estilos propios del plugin (sus clases .ksc-* también
     son 0,1,0 pero se declaran DESPUÉS, así que ganan por orden de cascada).

   Resultado: el tema deja de filtrar estilos, pero el diseño del plugin se
   mantiene intacto.
   ============================================================ */

/* Tipografía: las etiquetas heredan del baseline del contenedor, no del tema */
.ksc-configurator :where(h1, h2, h3, h4, h5, h6, p, span, div, label, strong, em, small) {
	margin:          0;
	padding:         0;
	font-family:     inherit;
	font-size:       inherit;
	font-weight:     inherit;
	font-style:      inherit;
	line-height:     inherit;
	letter-spacing:  inherit;
	text-transform:  inherit;
	text-align:      inherit;
	color:           inherit;
}

/* Enlaces: sin estilos de enlace del tema */
.ksc-configurator :where(a) {
	color:           inherit;
	text-decoration: none;
	box-shadow:      none;
}

/* Controles de formulario: anulan la apariencia nativa y la del tema */
.ksc-configurator :where(button, input, select, textarea) {
	font-family:     inherit;
	font-size:       inherit;
	font-weight:     inherit;
	line-height:     normal;
	letter-spacing:  inherit;
	text-transform:  none;
	color:           inherit;
	background:      none;
	border:          0;
	border-radius:   0;
	margin:          0;
	box-shadow:      none;
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
}

.ksc-configurator :where(button) {
	cursor: pointer;
}

/* Listas: sin viñetas ni sangría del tema */
.ksc-configurator :where(ul, ol) {
	margin:      0;
	padding:     0;
	list-style:  none;
}

/* Imágenes / SVG: responsivas y sin bordes del tema */
.ksc-configurator :where(img, svg) {
	max-width:     100%;
	height:        auto;
	border:        0;
	border-radius: 0;
	box-shadow:    none;
	vertical-align: middle;
}


/* ============================================================
   3. LAYOUT — Grid 2 columnas / 1 columna en móvil
   ============================================================ */

/* Mobile-first: una sola columna. El grid de 2 columnas se activa en desktop.
   min-width:0 en las columnas evita el "grid blowout" (que un hijo ancho —una
   imagen o un precio largo— desborde la columna y rompa el responsive). */
.ksc-configurator-wrapper {
	display:               grid;
	grid-template-columns: 1fr;
	gap:                   24px;
	width:                 100%;
	max-width:             100%;
	padding:               20px 8px;   /* 8px laterales mínimos en móvil */
}

.ksc-preview,
.ksc-config {
	min-width: 0;   /* clave anti-desbordamiento en grid/flex */
}

/* Columna preview: tarjeta blanca */
.ksc-preview {
	background:    #ffffff;
	border:        1px solid #e5e7eb;
	border-radius: 16px;
	padding:       14px;
}

/* Desktop: 2 columnas, preview sticky. */
@media (min-width: 901px) {
	.ksc-configurator-wrapper {
		grid-template-columns: 1fr 1fr;
		gap:                   56px;
		padding:               32px 0;
	}
	.ksc-preview {
		position:   sticky;
		top:        24px;
		align-self: start;
		padding:    32px;
	}
}


/* ============================================================
   4. COLUMNA IZQUIERDA — Preview del diseño
   ============================================================ */

.ksc-design-wrap {
	display:        flex;
	flex-direction: column;
	gap:            20px;
}

/* Contenedor relativo para superponer los slots sobre la imagen.
   Tamaño exacto al de la imagen para que los % de posición de slots
   sean correctos. */
.ksc-design-inner {
	position:    relative;
	line-height: 0;   /* elimina espacio extra debajo del img */
	border-radius: var(--ksc-radius-xs);
	overflow:    hidden;
}

.ksc-design-img {
	max-width:    100%;
	width:        100%;
	height:       auto;
	display:      block;
	margin:       0 auto;
	border-radius: var(--ksc-radius-xs);
	user-select:  none;
}

/* Capa de slots: cubre toda la imagen */
.ksc-slots-overlay {
	position:       absolute;
	inset:          0;
	width:          100%;
	height:         100%;
	pointer-events: none;
}


/* ── Slots individuales ─────────────────────────────────────── */

.ksc-slot {
	position:        absolute;
	pointer-events:  all;
	display:         flex;
	flex-direction:  column;
	align-items:     center;
}

.ksc-slot-inner {
	width:            100%;
	height:           100%;
	border:           2px dashed var(--ksc-slot-dash);
	background:       var(--ksc-slot-bg);
	border-radius:    var(--ksc-radius-xs);
	display:          flex;
	align-items:      center;
	justify-content:  center;
	cursor:           pointer;
	transition:       border-color var(--ksc-transition),
	                  background var(--ksc-transition);
}

.ksc-slot:hover .ksc-slot-inner,
.ksc-slot:focus .ksc-slot-inner {
	border-color: var(--ksc-green-dark);
	background:   rgba(22, 163, 74, .08);
}

.ksc-slot-icon {
	font-size:  1.4em;
	color:      var(--ksc-slot-dash);
	line-height: 1;
	transition:  color var(--ksc-transition);
}

.ksc-slot:hover .ksc-slot-icon,
.ksc-slot:focus .ksc-slot-icon {
	color: var(--ksc-green-dark);
}

.ksc-slot-label {
	position:      absolute;
	top:           calc(100% + 4px);
	left:          50%;
	transform:     translateX(-50%);
	font-size:     10px;
	font-weight:   600;
	color:         var(--ksc-text-light);
	white-space:   nowrap;
	background:    rgba(255,255,255,.90);
	padding:       2px 6px;
	border-radius: 6px;
	pointer-events: none;
	line-height:   1.4;
}

/* Estado: slot con pegatina asignada — sin cuadrado ni etiqueta */
.ksc-slot.is-filled .ksc-slot-inner {
	border:     none;
	background: transparent;
	padding:    0;
}

.ksc-slot.is-filled .ksc-slot-icon {
	display: none;
}

.ksc-slot.is-filled .ksc-slot-label {
	display: none;
}

.ksc-slot-img {
	width:        100%;
	height:       100%;
	object-fit:   contain;
	border-radius: 4px;
}


/* ── Placeholder cuando no hay imagen de diseño ─────────────── */

.ksc-design-placeholder {
	aspect-ratio:    1 / 1;
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	justify-content: center;
	gap:             12px;
	background:      var(--ksc-bg-soft);
	border:          2px dashed var(--ksc-border-strong);
	border-radius:   var(--ksc-radius);
	padding:         40px;
	color:           var(--ksc-text-muted);
}

.ksc-design-placeholder-icon {
	font-size: 3rem;
	opacity:   .5;
}

.ksc-design-placeholder p {
	margin:     0;
	font-size:  0.9rem;
	text-align: center;
}


/* ── Hint de instrucción ────────────────────────────────────── */

.ksc-design-hint {
	margin:          4px 0 0;
	font-size:       0.78rem;
	color:           var(--ksc-text-light);
	text-align:      center;
	display:         flex;
	align-items:     center;
	justify-content: center;
	gap:             5px;
}


/* ── Galería del producto (bajo el preview) ───────────────────── */

.ksc-gallery {
	display:   flex;
	flex-wrap: wrap;
	gap:       8px;
	margin:    16px 0 0;
}

.ksc-gallery-thumb img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
}

/* ── Lightbox (visor a pantalla completa) ─────────────────────── */

.ksc-lightbox {
	display:         none;
	position:        fixed;
	inset:           0;
	z-index:         99999;
	background:      rgba( 0, 0, 0, 0.85 );
	align-items:     center;
	justify-content: center;
	padding:         24px;
}

.ksc-lightbox.is-open {
	display: flex;
}

.ksc-lightbox-img {
	max-width:     90vw;
	max-height:    90vh;
	object-fit:    contain;
	border-radius: 8px;
	box-shadow:    0 8px 40px rgba( 0, 0, 0, 0.5 );
}


/* ============================================================
   5. COLUMNA DERECHA — Configuración
   ============================================================ */

.ksc-config {
	display:        flex;
	flex-direction: column;
	gap:            18px;
}

@media (min-width: 768px) {
	.ksc-config { gap: 24px; }
}


/* ── Badge de personalización ───────────────────────────────── */

.ksc-badge-personalizable {
	margin:          0;
	display:         inline-flex;
	align-items:     center;
	gap:             6px;
	font-size:       12px;
	font-weight:     600;
	letter-spacing:  0.05em;
	color:           var(--ksc-green-dark);
	background:      var(--ksc-green-light);
	padding:         6px 16px;
	border-radius:   var(--ksc-radius-pill);
	width:           fit-content;
}

.ksc-badge-sep {
	opacity: .5;
}


/* ── Título del producto ────────────────────────────────────── */

.ksc-product-title {
	margin:      0;
	font-size:   1.65rem;
	font-weight: 700;
	line-height: 1.2;
	color:       var(--ksc-text);
}

@media (min-width: 768px) {
	.ksc-product-title {
		font-size: 1.9rem;  /* ≈ 28–30px */
	}
}


/* ── Descripción del producto (entre título y precio) ─────────── */

.ksc-excerpt,
.ksc-description {
	font-size:   15px;
	color:       #666666;
	line-height: 1.6;
	margin:      4px 0 4px;
}

.ksc-excerpt p:first-child,
.ksc-description p:first-child { margin-top: 0; }
.ksc-excerpt p:last-child,
.ksc-description p:last-child  { margin-bottom: 0; }

.ksc-description ul,
.ksc-description ol {
	margin:      8px 0;
	padding-left: 20px;
	list-style:  revert;
}
.ksc-description li { margin: 2px 0; }

/* ── "Más información": desplegable con la descripción larga (14px) ──────── */
.ksc-more-info {
	margin:        12px 0 4px;
	border:        1px solid var(--ksc-border, #e5e7eb);
	border-radius: 12px;
	background:    #fff;
	overflow:      hidden;
}
.ksc-more-info-summary {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             10px;
	padding:         14px 16px;
	font-size:       14px;
	font-weight:     600;
	color:           var(--ksc-text, #1f2937);
	cursor:          pointer;
	list-style:      none;
	user-select:     none;
}
.ksc-more-info-summary::-webkit-details-marker { display: none; }
.ksc-more-info-icon {
	font-size:   18px;
	line-height: 1;
	transition:  transform .2s ease;
}
.ksc-more-info[open] .ksc-more-info-icon { transform: rotate( 45deg ); }
.ksc-more-info-body {
	padding:     0 16px 16px;
	font-size:   14px;
	line-height: 1.6;
	color:       #555555;
}
.ksc-more-info-body p:first-child { margin-top: 0; }
.ksc-more-info-body p:last-child  { margin-bottom: 0; }
.ksc-more-info-body img { max-width: 100%; height: auto; }

/* ── Popup de la guía de tallas (página de WordPress) ────────────────────── */
.ksc-sg-overlay {
	position:        fixed;
	inset:           0;
	background:      rgba( 0, 0, 0, .55 );
	z-index:         100000;
	display:         none;
	align-items:     center;
	justify-content: center;
	padding:         16px;
	backdrop-filter: blur( 2px );
}
.ksc-sg-overlay.is-open { display: flex; }
.ksc-sg-modal {
	background:      #fff;
	border-radius:   16px;
	width:           100%;
	max-width:       640px;
	max-height:      85vh;
	display:         flex;
	flex-direction:  column;
	overflow:        hidden;
	box-shadow:      0 20px 60px rgba( 0, 0, 0, .3 );
}
.ksc-sg-header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             12px;
	padding:         16px 20px;
	border-bottom:   1px solid #eee;
	flex-shrink:     0;
}
.ksc-sg-title {
	margin:      0;
	font-size:   18px;
	font-weight: 700;
	color:       var(--ksc-text, #1f2937);
}
.ksc-sg-close {
	flex-shrink:   0;
	width:         34px;
	height:        34px;
	min-width:     34px;
	padding:       0;
	border:        none;
	background:    #f3f4f6;
	border-radius: 50%;
	font-size:     22px;
	line-height:   1;
	cursor:        pointer;
	color:         #555555;
}
.ksc-sg-close:hover { background: #e5e7eb; }
.ksc-sg-body {
	padding:     20px;
	overflow-y:  auto;
	font-size:   14px;
	line-height: 1.6;
	color:       #444444;
}
.ksc-sg-body img { max-width: 100%; height: auto; }
.ksc-sg-body table { width: 100%; border-collapse: collapse; margin: 8px 0; }
.ksc-sg-body th,
.ksc-sg-body td { border: 1px solid #e5e7eb; padding: 8px 10px; text-align: left; }
/* Anti-Elementor: el tema puede reescribir el <button> de cierre. */
.ksc-product-active .ksc-sg-close {
	width:         34px;
	height:        34px;
	min-width:     34px;
	padding:       0;
	background:    #f3f4f6;
	border:        none;
	border-radius: 50%;
	text-transform: none;
}


/* ── Valoración ─────────────────────────────────────────────── */

.ksc-rating {
	display:     flex;
	align-items: center;
	gap:         6px;
}

/* La valoración es un enlace a las valoraciones de abajo. */
a.ksc-rating-link {
	text-decoration: none;
	color:           inherit;
	cursor:          pointer;
	width:           fit-content;
}
a.ksc-rating-link:hover .ksc-rating-count {
	text-decoration: underline;
}

.ksc-stars {
	display: inline-flex;
	gap:     1px;
	color:   #f59e0b;
	font-size: 1.05rem;
}

.ksc-star--empty {
	color: var(--ksc-border-strong);
}

.ksc-star--half {
	opacity: .6;
}

.ksc-rating-avg {
	font-size:   0.9rem;
	font-weight: 600;
	color:       var(--ksc-text);
}

.ksc-rating-count {
	font-size: 0.88rem;
	color:     var(--ksc-text-light);
}


/* ── Precio ─────────────────────────────────────────────────── */

.ksc-price-block {
	display:        flex;
	flex-direction: column;
	gap:            4px;
}

.ksc-price {
	font-size:   2rem;       /* ≈ 32px */
	font-weight: 700;
	color:       var(--ksc-green-dark);
	line-height: 1;
}

/* WooCommerce envuelve el precio en spans — normalizamos */
.ksc-price .woocommerce-Price-amount {
	font-size:   inherit;
	font-weight: inherit;
	color:       inherit;
}

.ksc-price-meta {
	font-size: 13px;
	color:     #999999;
}

/* Precio de pack con descuento: importe SIN descuento tachado y en gris arriba
   (16px), importe CON descuento debajo (tamaño del precio de la ficha). */
.ksc-saleprice {
	display:        inline-flex;
	flex-direction: column;
	align-items:    flex-start;
	line-height:    1.15;
}
.ksc-saleprice-old {
	text-decoration:       line-through;
	text-decoration-color: #9ca3af;
}
.ksc-saleprice-old,
.ksc-saleprice-old .woocommerce-Price-amount,
.ksc-saleprice-old bdi {
	font-size:   16px !important;
	font-weight: 600;
	color:       #9ca3af !important;
}
.ksc-saleprice-now {
	display: block;
}
.ksc-price .ksc-card-price-from {
	font-size:   0.55em;
	font-weight: 600;
	color:       #6b7280;
}


/* ============================================================
   6. CARDS DE PASO
   ============================================================ */

.ksc-step-card {
	border:          1px solid var(--ksc-border);
	border-radius:   var(--ksc-radius);   /* 16px */
	padding:         16px;
	background:      var(--ksc-bg);
	display:         flex;
	flex-direction:  column;
	gap:             14px;
}

@media (min-width: 768px) {
	.ksc-step-card { padding: 24px; gap: 16px; }
}

.ksc-step-header {
	display:     flex;
	align-items: center;
	gap:         10px;
	flex-wrap:   wrap;
}

/* ── Paso de texto personalizado — compacto, contador arriba ──── */
.ksc-step-card--text,
.ksc-step-card--comments {
	gap:     8px;     /* menos espacio entre cabecera e input */
	padding: 18px;
}

.ksc-comments-input {
	width:          100%;
	padding:        11px 14px;
	border:         1px solid var(--ksc-border);
	border-radius:  var(--ksc-radius-sm);
	background:     var(--ksc-bg);
	color:          var(--ksc-text);
	font-family:    inherit;
	font-size:      16px;
	line-height:    1.4;
	box-sizing:     border-box;
	resize:         vertical;
	min-height:     76px;
}
.ksc-comments-input:focus {
	border-color: var(--ksc-green-dark);
	outline:      none;
}

.ksc-step-header--tight {
	margin: 0;
}

.ksc-text-counter {
	margin-left: auto;          /* empuja el contador a la derecha, arriba del campo */
	font-size:   12px;
	color:       var(--ksc-text-light);
	white-space: nowrap;
}

/* Número del paso — círculo verde oscuro */
.ksc-step-num {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           var(--ksc-step-circle);
	height:          var(--ksc-step-circle);
	min-width:       var(--ksc-step-circle);
	background:      var(--ksc-green-dark);
	color:           #fff;
	font-size:       0.78rem;
	font-weight:     700;
	border-radius:   50%;
	line-height:     1;
	flex-shrink:     0;
}

.ksc-step-title {
	margin:      0;
	font-size:   1rem;           /* 16px */
	font-weight: 600;
	color:       var(--ksc-text);
	/* basis auto: el título conserva su ancho de contenido y empuja al badge
	   a una segunda línea cuando no caben juntos, en vez de partirse él mismo. */
	flex:        1 1 auto;
}

/* Badge a la derecha del título */
.ksc-step-badge {
	font-size:     0.72rem;
	font-weight:   600;
	color:         var(--ksc-green-dark);
	background:    var(--ksc-green-light);
	padding:       3px 10px;
	border-radius: var(--ksc-radius-pill);
	white-space:   nowrap;
}


/* ============================================================
   7. PASO 1 — Botones de cantidad
   ============================================================ */

.ksc-qty-grid {
	display:               grid;
	grid-template-columns: repeat(4, 1fr);   /* mínimo 4 por fila */
	gap:                   10px;
}

.ksc-qty-btn {
	display:         flex;
	flex-direction:  column;   /* número arriba, precio debajo */
	align-items:     center;
	justify-content: center;
	gap:             4px;
	min-width:       0;         /* permite que 4 entren en la fila del grid */
	padding:         14px 6px;
	border:          2px solid var(--ksc-border);
	border-radius:   var(--ksc-radius-sm);   /* 12px */
	background:      var(--ksc-bg);
	cursor:          pointer;
	transition:      border-color var(--ksc-transition),
	                 background var(--ksc-transition),
	                 color var(--ksc-transition);
	font-family:     inherit;
}

.ksc-qty-btn:hover {
	border-color: var(--ksc-green-dark);
	background:   var(--ksc-green-bg);
}

.ksc-qty-btn.is-selected {
	border-color: var(--ksc-green-dark);
	background:   var(--ksc-green-bg);
}

.ksc-qty-num {
	font-size:   22px;
	font-weight: 700;
	color:       var(--ksc-text);
	line-height: 1;
}

.ksc-qty-btn.is-selected .ksc-qty-num {
	color: var(--ksc-green-dark);
}

.ksc-qty-label {
	font-size:   12px;
	font-weight: 500;
	color:       #666666;
	white-space: nowrap;
}

.ksc-qty-btn.is-selected .ksc-qty-label {
	color: var(--ksc-green-dark);
}


/* ============================================================
   8. PASO 2 — Grid de slots de pegatinas
   ============================================================ */

.ksc-sticker-slots-grid {
	display:   flex;
	flex-wrap: wrap;
	gap:       12px;
}

.ksc-sticker-slot {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            6px;
	cursor:         pointer;
}

.ksc-sticker-slot-inner {
	position:        relative;
	width:           72px;
	height:          72px;
	border:          2px dashed #cccccc;
	border-radius:   var(--ksc-radius-sm);   /* 12px */
	background:      var(--ksc-bg-soft);
	display:         flex;
	align-items:     center;
	justify-content: center;
	transition:      border-color var(--ksc-transition),
	                 background var(--ksc-transition);
}

.ksc-sticker-slot:hover .ksc-sticker-slot-inner,
.ksc-sticker-slot:focus .ksc-sticker-slot-inner {
	border-color: var(--ksc-green-dark);
	background:   var(--ksc-green-bg);
}

.ksc-sticker-slot-plus {
	font-size:  1.4rem;
	color:      #cccccc;
	line-height: 1;
	transition:  color var(--ksc-transition);
}

.ksc-sticker-slot:hover .ksc-sticker-slot-plus,
.ksc-sticker-slot:focus .ksc-sticker-slot-plus {
	color: var(--ksc-green-dark);
}

.ksc-sticker-slot-label {
	font-size:  12px;
	font-weight: 500;
	color:      #999999;
	text-align: center;
	max-width:  72px;
}

/* Estado: slot con pegatina elegida — sin cuadrado ni etiqueta */
.ksc-sticker-slot.is-filled .ksc-sticker-slot-inner {
	border:     none;
	background: transparent;
	padding:    0;
}

.ksc-sticker-slot.is-filled .ksc-sticker-slot-plus {
	display: none;
}

.ksc-sticker-slot.is-filled .ksc-sticker-slot-label {
	display: none;
}

.ksc-sticker-slot-img {
	width:         100%;
	height:        100%;
	object-fit:    contain;
	border-radius: 8px;
}

/* Botón de quitar (lo crea el JS) */
.ksc-sticker-slot-remove {
	display:       none;
	position:      absolute;
	top:           -7px;
	right:         -7px;
	width:         20px;
	height:        20px;
	border-radius: 50%;
	background:    #ef4444;
	color:         #fff;
	border:        none;
	font-size:     12px;
	line-height:   20px;
	text-align:    center;
	cursor:        pointer;
	padding:       0;
	font-family:   inherit;
	font-weight:   700;
}

.ksc-sticker-slot.is-filled .ksc-sticker-slot-remove {
	display: block;
}


/* ============================================================
   9. PASO 3 — Atributos de variación (tallas, colores…)
   ============================================================ */

.ksc-attr-group {
	border:  none;
	padding: 0;
	margin:  0;
}

.ksc-attr-legend {
	/* Solo para lectores de pantalla */
}

.ksc-attr-pills {
	display:   flex;
	flex-wrap: wrap;
	gap:       8px;
}

.ksc-attr-pill {
	padding:       7px 18px;
	border:        2px solid var(--ksc-border);
	border-radius: var(--ksc-radius-pill);
	background:    var(--ksc-bg);
	font-size:     0.88rem;
	font-weight:   600;
	color:         var(--ksc-text);
	cursor:        pointer;
	font-family:   inherit;
	transition:    border-color var(--ksc-transition),
	               background var(--ksc-transition),
	               color var(--ksc-transition);
}

.ksc-attr-pill:hover {
	border-color: var(--ksc-green-dark);
	background:   var(--ksc-green-bg);
	color:        var(--ksc-green-dark);
}

.ksc-attr-pill[aria-pressed="true"],
.ksc-attr-pill.is-selected {
	border-color: var(--ksc-green-dark);
	background:   var(--ksc-green-dark);
	color:        #fff;
}

.ksc-size-guide-link {
	font-size:           0.78rem;
	font-weight:         600;
	color:               var(--ksc-green-dark);
	text-decoration:     underline;
	text-underline-offset: 3px;
	margin-left:         auto;
}

.ksc-size-guide-link:hover {
	text-decoration: none;
}

.ksc-attr-note {
	margin:    0;
	font-size: 0.8rem;
	color:     var(--ksc-text-muted);
}


/* ============================================================
   10. BARRA DE COMPRA (Total + CTA) — sticky al fondo en móvil
   ============================================================ */

.ksc-buybar {
	display:        flex;
	flex-direction: column;
	gap:            12px;
}

/* En móvil/tablet la barra de compra se ancla al fondo del viewport para que
   el cliente siempre tenga el Total y el botón a mano mientras configura.
   safe-area-inset cubre el "notch"/barra inferior de los móviles modernos. */
@media (max-width: 900px) {
	.ksc-buybar {
		position:      sticky;
		bottom:        0;
		z-index:       50;
		gap:           8px;
		margin:        4px 0 0;
		padding:       10px 0 calc(8px + env(safe-area-inset-bottom, 0px));
		background:    rgba(255, 255, 255, 0.97);
		backdrop-filter: blur(8px);
		border-top:    1px solid var(--ksc-border);
		box-shadow:    0 -6px 20px rgba(0, 0, 0, 0.06);
	}
}

.ksc-total-bar {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         14px 18px;
	background:      var(--ksc-bg);
	border:          1px solid var(--ksc-border);
	border-radius:   var(--ksc-radius);
}

/* En la barra sticky, el "total" es más compacto y sin doble borde. */
@media (max-width: 900px) {
	.ksc-total-bar {
		padding:       2px 4px;
		border:        none;
		border-radius: 0;
	}
}

@media (min-width: 768px) {
	.ksc-total-bar { padding: 20px 24px; }
}

.ksc-total-label {
	font-size:   1rem;
	font-weight: 600;
	color:       var(--ksc-text);
}

.ksc-total-price {
	font-size:   1.75rem;    /* ~28px móvil */
	font-weight: 700;
	color:       var(--ksc-green-dark);
	line-height: 1;
}

@media (min-width: 768px) {
	.ksc-total-price { font-size: 2rem; }
}

.ksc-total-price .woocommerce-Price-amount {
	font-size:   inherit;
	font-weight: inherit;
	color:       inherit;
}


/* ============================================================
   11. BOTÓN CTA — "Añadir al carrito"
   ============================================================ */

.ksc-cta-btn {
	display:       block;
	width:         100%;
	padding:       15px 24px;
	border:        none;
	border-radius: 14px;
	font-family:   inherit;
	font-size:     16px;
	font-weight:   600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-align:    center;
	cursor:        not-allowed;
	min-height:    52px;   /* objetivo táctil cómodo */
	transition:    background var(--ksc-transition),
	               transform var(--ksc-transition),
	               box-shadow var(--ksc-transition);
	line-height:   1.4;

	/* Estado deshabilitado */
	background: #e5e7eb;
	color:      #999999;
}

/* Estado activo: rojo corporativo */
.ksc-cta-btn:not([disabled]) {
	background: var(--ksc-cta);
	color:      #fff;
	cursor:     pointer;
}

.ksc-cta-btn:not([disabled]):hover {
	background: var(--ksc-cta-hover);
	transform:  translateY(-1px);
}

.ksc-cta-btn:not([disabled]):active {
	transform:  translateY(0);
	box-shadow: none;
}

/* Estado cargando */
.ksc-cta-btn.is-loading {
	pointer-events: none;
	opacity:        .8;
}


/* ============================================================
   12. TRANQUILIZADORES
   ============================================================ */

.ksc-reassurances {
	list-style:      none;
	margin:          0;
	padding:         0;
	display:         flex;
	flex-wrap:       wrap;
	gap:             8px 16px;
	justify-content: center;
}

.ksc-reassurance-item {
	display:     flex;
	align-items: center;
	gap:         5px;
	font-size:   13px;
	color:       #999999;
	font-weight: 500;
}


/* ============================================================
   13. ACORDEONES
   ============================================================ */

.ksc-accordions {
	display:        flex;
	flex-direction: column;
}

.ksc-accordion {
	border-top: 1px solid var(--ksc-border);
}

.ksc-accordion:last-child {
	border-bottom: 1px solid var(--ksc-border);
}

.ksc-accordion-trigger {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	width:           100%;
	padding:         16px 0;
	background:      transparent;
	border:          none;
	font-family:     inherit;
	font-size:       0.9rem;
	font-weight:     600;
	color:           #333333;
	text-align:      left;
	cursor:          pointer;
	transition:      color var(--ksc-transition);
}

.ksc-accordion-trigger:hover {
	color: var(--ksc-green-dark);
}

.ksc-accordion-icon {
	font-size:  1.1rem;
	font-weight: 400;
	color:      var(--ksc-text-muted);
	transition: transform var(--ksc-transition);
	flex-shrink: 0;
}

.ksc-accordion-trigger[aria-expanded="true"] .ksc-accordion-icon {
	transform: rotate(45deg);
}

.ksc-accordion-content {
	padding:   0 0 16px;
	font-size: 0.88rem;
	color:     var(--ksc-text-muted);
	line-height: 1.7;
}

.ksc-accordion-content p:first-child { margin-top: 0; }
.ksc-accordion-content p:last-child  { margin-bottom: 0; }

/* Transición de apertura */
.ksc-accordion-content:not([hidden]) {
	animation: ksc-fade-in 0.18s ease;
}

@keyframes ksc-fade-in {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}


/* ============================================================
   14. MODAL DE SELECCIÓN DE PEGATINAS
   ============================================================ */

/*
 * El overlay está oculto por defecto (display:none).
 * Solo se muestra cuando JS añade la clase .is-open.
 */
.ksc-modal-overlay {
	position:        fixed;
	inset:           0;
	background:      rgba(0, 0, 0, .55);
	z-index:         99999;
	display:         none;
	align-items:     flex-end;
	justify-content: center;
	padding:         0;
	backdrop-filter: blur(2px);
}

.ksc-modal-overlay.is-open {
	display:   flex;
	animation: ksc-overlay-in .2s ease;
}

@keyframes ksc-overlay-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@media (min-width: 640px) {
	.ksc-modal-overlay {
		align-items: center;
		padding:     24px;
	}
}

.ksc-modal {
	background:    var(--ksc-bg);
	border-radius: var(--ksc-radius) var(--ksc-radius) 0 0;
	width:         100%;
	max-height:    90dvh;
	display:       flex;
	flex-direction: column;
	overflow:      hidden;
	box-shadow:    0 25px 60px rgba(0,0,0,.25);
}

@media (min-width: 640px) {
	.ksc-modal {
		border-radius: var(--ksc-radius);
		max-width:     680px;
		max-height:    80dvh;
	}
}

.ksc-modal-overlay.is-open .ksc-modal {
	animation: ksc-modal-in .22s cubic-bezier(0.34, 1.1, 0.64, 1);
}

@keyframes ksc-modal-in {
	from { transform: translateY(20px); opacity: 0; }
	to   { transform: translateY(0);   opacity: 1; }
}


/* Cabecera del modal */

.ksc-modal-header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         16px 20px;
	border-bottom:   1px solid var(--ksc-border);
	flex-shrink:     0;
}

.ksc-modal-title {
	margin:      0;
	font-size:   1rem;
	font-weight: 700;
	color:       var(--ksc-text);
}

.ksc-modal-close {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           32px;
	height:          32px;
	border:          none;
	background:      var(--ksc-bg-soft);
	border-radius:   50%;
	font-size:       1.2rem;
	color:           var(--ksc-text-muted);
	cursor:          pointer;
	transition:      background var(--ksc-transition);
	padding:         0;
	font-family:     inherit;
}

.ksc-modal-close:hover {
	background: var(--ksc-bg-hover);
	color:      var(--ksc-text);
}


/* Búsqueda dentro del modal */

.ksc-modal-search-wrap {
	padding:       12px 20px;
	border-bottom: 1px solid var(--ksc-border);
	flex-shrink:   0;
}

.ksc-modal-search {
	width:       100%;
	padding:     9px 14px;
	border:      1px solid var(--ksc-border);
	border-radius: var(--ksc-radius-xs);
	font-family: inherit;
	font-size:   0.9rem;
	color:       var(--ksc-text);
	background:  var(--ksc-bg-soft);
	outline:     none;
	transition:  border-color var(--ksc-transition);
}

.ksc-modal-search:focus {
	border-color: var(--ksc-green-dark);
	background:   var(--ksc-bg);
}


/* Tabs de categorías */

.ksc-modal-categories {
	display:            flex;
	gap:                6px;
	padding:            10px 20px;
	overflow-x:         auto;
	flex-shrink:        0;
	scrollbar-width:    none;
	-ms-overflow-style: none;
	border-bottom:      1px solid var(--ksc-border);
}

.ksc-modal-categories::-webkit-scrollbar {
	display: none;
}

.ksc-cat-tab {
	padding:       5px 12px;
	border:        1px solid var(--ksc-border);
	border-radius: var(--ksc-radius-pill);
	background:    var(--ksc-bg);
	font-family:   inherit;
	font-size:     0.8rem;
	font-weight:   600;
	color:         var(--ksc-text-muted);
	white-space:   nowrap;
	cursor:        pointer;
	transition:    border-color var(--ksc-transition),
	               background var(--ksc-transition),
	               color var(--ksc-transition);
	flex-shrink:   0;
}

.ksc-cat-tab:hover {
	border-color: var(--ksc-green-dark);
	color:        var(--ksc-green-dark);
}

.ksc-cat-tab.active,
.ksc-cat-tab[aria-selected="true"] {
	border-color: var(--ksc-green-dark);
	background:   var(--ksc-green-dark);
	color:        #fff;
}


/* Grid de pegatinas */

.ksc-modal-grid {
	flex:          1;
	overflow-y:    auto;
	padding:       16px 20px;
	display:       grid;
	grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
	gap:           12px;
	align-content: start;
}

.ksc-sticker-option {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            6px;
	padding:        10px 6px;
	border:         2px solid transparent;
	border-radius:  var(--ksc-radius-xs);
	background:     var(--ksc-bg-soft);
	cursor:         pointer;
	transition:     border-color var(--ksc-transition),
	                background var(--ksc-transition),
	                transform var(--ksc-transition);
	text-align:     center;
}

.ksc-sticker-option:hover {
	border-color: var(--ksc-green-dark);
	background:   var(--ksc-green-bg);
	transform:    translateY(-2px);
}

.ksc-sticker-thumb {
	width:         64px;
	height:        64px;
	object-fit:    contain;
	border-radius: 4px;
}

.ksc-sticker-name {
	font-size:   0.7rem;
	font-weight: 500;
	color:       var(--ksc-text-muted);
	line-height: 1.3;
	word-break:  break-word;
}


/* Estado vacío / error */

.ksc-modal-empty {
	grid-column: 1 / -1;
	text-align:  center;
	padding:     40px 20px;
	color:       var(--ksc-text-muted);
	font-size:   0.9rem;
}


/* Loading spinner */

.ksc-modal-loading {
	grid-column:     1 / -1;
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	gap:             12px;
	padding:         40px 20px;
}

.ksc-spinner {
	display:       inline-block;
	width:         28px;
	height:        28px;
	border:        3px solid var(--ksc-border);
	border-top-color: var(--ksc-green-dark);
	border-radius: 50%;
	animation:     ksc-spin .7s linear infinite;
}

@keyframes ksc-spin {
	to { transform: rotate(360deg); }
}


/* ============================================================
   15. OCULTACIÓN DE ELEMENTOS WC EN PÁGINAS KSC
   ============================================================

   Fallback CSS para cuando remove_action() no elimina los elementos
   de WooCommerce (puede ocurrir con algunos themes que registran hooks
   con prioridades distintas o re-añaden hooks tarde).

   La clase .ksc-product-active la añade KSC_Frontend::add_body_class()
   al <body> cuando el producto tiene _ksc_enabled = 'yes'.
   ============================================================ */

/* Ocultar la galería nativa de WooCommerce */
body.ksc-product-active .woocommerce-product-gallery { display: none !important; }

/* Ocultar el summary completo de WC — el configurador lo reemplaza íntegramente */
body.ksc-product-active .summary.entry-summary,
body.ksc-product-active div.entry-summary { display: none !important; }

/* Selectores extra por si el theme no usa .entry-summary */
body.ksc-product-active .woocommerce div.product .summary,
body.ksc-product-active .product .woocommerce-product-details__short-description,
body.ksc-product-active .product > .cart,
body.ksc-product-active .product .single_add_to_cart_button,
body.ksc-product-active .product_meta,
body.ksc-product-active .woocommerce-variation-add-to-cart { display: none !important; }


/* ============================================================
   16. UTILIDADES Y ACCESIBILIDAD
   ============================================================ */

/* Texto solo para lectores de pantalla */
.ksc-configurator .screen-reader-text {
	position:   absolute;
	width:      1px;
	height:     1px;
	padding:    0;
	margin:     -1px;
	overflow:   hidden;
	clip:       rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

/* Focus visible (accesibilidad de teclado) */
.ksc-qty-btn:focus-visible,
.ksc-sticker-slot:focus-visible,
.ksc-attr-pill:focus-visible,
.ksc-cta-btn:focus-visible,
.ksc-accordion-trigger:focus-visible,
.ksc-modal-close:focus-visible,
.ksc-modal-search:focus-visible,
.ksc-cat-tab:focus-visible,
.ksc-sticker-option:focus-visible,
.ksc-slot:focus-visible {
	outline:        2px solid var(--ksc-green-dark);
	outline-offset: 2px;
}

/* Desactivar outline por defecto */
.ksc-configurator *:focus {
	outline: none;
}

.ksc-configurator *:focus-visible {
	outline:        2px solid var(--ksc-green-dark);
	outline-offset: 2px;
}


/* ============================================================
   17. CAPA ANTI-ELEMENTOR — override de mayor especificidad
   ============================================================

   El Kit de Elementor (.elementor-kit-NNN) estiliza etiquetas sueltas
   h1-h6 y button con especificidad 0,1,1, que GANA a las clases del
   plugin (0,1,0). El resultado: tipografías del tema (Nunito 36/900) en
   los títulos y botones con fondo/borde/color del tema (p. ej. el CTA
   salía con fondo blanco + texto blanco = invisible).

   Aquí re-afirmamos los estilos del plugin con el prefijo
   .ksc-product-active (clase que KSC añade al <body>). Eso eleva la
   especificidad a 0,2,0 (dos clases), que gana a Elementor SIN usar
   !important. El prefijo de clase de <body> además cubre el modal aunque
   el JS lo mueva fuera de .ksc-configurator.

   Si en el futuro el Kit cambia de nº, este selector sigue funcionando
   porque no depende del número del kit.
   ============================================================ */

/* 17a. Fuente: forzar el stack del configurador en TODO (anula el Nunito heredado) */
.ksc-product-active .ksc-configurator,
.ksc-product-active .ksc-configurator *,
.ksc-product-active .ksc-modal,
.ksc-product-active .ksc-modal * {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
	             'Helvetica Neue', Arial, sans-serif;
}

/* 17b. Headings: tamaño / peso / transform reales del plugin */
.ksc-product-active .ksc-product-title {
	font-size:      1.65rem;
	font-weight:    700;
	line-height:    1.2;
	letter-spacing: normal;
	text-transform: none;
	color:          var(--ksc-text);
}
@media (min-width: 768px) {
	.ksc-product-active .ksc-product-title {
		font-size: 1.9rem;
	}
}

.ksc-product-active .ksc-step-title {
	font-size:      1rem;
	font-weight:    600;
	line-height:    1.5;
	letter-spacing: normal;
	text-transform: none;
	color:          var(--ksc-text);
}

.ksc-product-active .ksc-modal-title {
	font-size:      1rem;
	font-weight:    700;
	line-height:    1.5;
	letter-spacing: normal;
	text-transform: none;
	color:          var(--ksc-text);
}

/* 17c. Botón CTA — el caso crítico (fondo/texto del tema lo hacían invisible) */
.ksc-product-active .ksc-cta-btn {
	background:     #e5e7eb;
	color:          #999999;
	border:         none;
	border-radius:  14px;
	letter-spacing: 0.02em;
	font-size:      16px;
	text-transform: uppercase;
}
.ksc-product-active .ksc-cta-btn:not([disabled]) {
	background: var(--ksc-cta);
	color:      #fff;
}
.ksc-product-active .ksc-cta-btn:not([disabled]):hover {
	background: var(--ksc-cta-hover);
}

/* 17d. Botones de cantidad */
.ksc-product-active .ksc-qty-btn {
	background:     var(--ksc-bg);
	border:         2px solid var(--ksc-border);
	border-radius:  var(--ksc-radius-sm);
	color:          var(--ksc-text);
	text-transform: none;
}
.ksc-product-active .ksc-qty-btn:hover,
.ksc-product-active .ksc-qty-btn.is-selected {
	border-color: var(--ksc-green-dark);
	background:   var(--ksc-green-bg);
}

/* 17e. Pills de variación */
.ksc-product-active .ksc-attr-pill {
	background:     var(--ksc-bg);
	border:         2px solid var(--ksc-border);
	border-radius:  var(--ksc-radius-pill);
	color:          var(--ksc-text);
	text-transform: none;
}
.ksc-product-active .ksc-attr-pill:hover {
	border-color: var(--ksc-green-dark);
	background:   var(--ksc-green-bg);
	color:        var(--ksc-green-dark);
}
.ksc-product-active .ksc-attr-pill[aria-pressed="true"],
.ksc-product-active .ksc-attr-pill.is-selected {
	border-color: var(--ksc-green-dark);
	background:   var(--ksc-green-dark);
	color:        #fff;
}

/* 17f. Acordeón (tranquilizadores / guía de tallas) */
.ksc-product-active .ksc-accordion-trigger {
	background:     transparent;
	border:         none;
	color:          #333333;
	text-transform: none;
}
.ksc-product-active .ksc-accordion-trigger:hover {
	color: var(--ksc-green-dark);
}

/* 17g. Botón de cierre del modal */
.ksc-product-active .ksc-modal-close {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           32px;
	height:          32px;
	min-width:       32px;
	padding:         0;
	background:      var(--ksc-bg-soft);
	border:          none;
	border-radius:   50%;
	font-size:       1.2rem;
	line-height:     1;
	color:           var(--ksc-text-muted);
	text-transform:  none;
}
.ksc-product-active .ksc-modal-close:hover {
	background: var(--ksc-bg-hover);
	color:      var(--ksc-text);
}

/* 17h. Tarjetas de pegatina del modal — Elementor las volvía <button> en fila,
   con padding enorme (aplastaba la imagen a ~38px) y nombre cortado. */
.ksc-product-active .ksc-sticker-option {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            6px;
	padding:        10px 6px;
	border:         2px solid transparent;
	border-radius:  var(--ksc-radius-xs);
	background:     var(--ksc-bg-soft);
	color:          var(--ksc-text-muted);
	white-space:    normal;
	text-transform: none;
	text-align:     center;
}
.ksc-product-active .ksc-sticker-option:hover {
	border-color: var(--ksc-green-dark);
	background:   var(--ksc-green-bg);
}
.ksc-product-active .ksc-sticker-thumb {
	width:         64px;
	height:        64px;
	max-width:     100%;
	object-fit:    contain;
	border-radius: 4px;
}
.ksc-product-active .ksc-sticker-name {
	font-size:   0.7rem;
	font-weight: 500;
	color:       var(--ksc-text-muted);
	line-height: 1.3;
	white-space: normal;
	word-break:  break-word;
}

/* 17i. Tabs de categoría — salían con texto blanco sobre blanco (invisibles) */
.ksc-product-active .ksc-cat-tab {
	padding:        5px 12px;
	border:         1px solid var(--ksc-border);
	border-radius:  var(--ksc-radius-pill);
	background:     var(--ksc-bg);
	color:          var(--ksc-text-muted);
	white-space:    nowrap;
	text-transform: none;
}
.ksc-product-active .ksc-cat-tab:hover {
	border-color: var(--ksc-green-dark);
	color:        var(--ksc-green-dark);
}
.ksc-product-active .ksc-cat-tab.active,
.ksc-product-active .ksc-cat-tab[aria-selected="true"] {
	border-color: var(--ksc-green-dark);
	background:   var(--ksc-green-dark);
	color:        #fff;
}

/* 17j. Buscador del modal */
.ksc-product-active .ksc-modal-search {
	border:        1px solid var(--ksc-border);
	border-radius: var(--ksc-radius-xs);
	background:    var(--ksc-bg-soft);
	color:         var(--ksc-text);
	text-transform: none;
}
.ksc-product-active .ksc-modal-search:focus {
	border-color: var(--ksc-green-dark);
	background:   var(--ksc-bg);
}

/* 17l. Input de texto personalizado — Elementor estiliza los <input>. */
.ksc-product-active .ksc-custom-text-input,
.ksc-product-active .ksc-comments-input {
	width:          100%;
	padding:        11px 14px;
	border:         1px solid var(--ksc-border);
	border-radius:  var(--ksc-radius-sm);
	background:     var(--ksc-bg);
	color:          var(--ksc-text);
	font-family:    inherit;
	font-size:      16px;
	line-height:    1.4;
	text-transform: none;
	box-sizing:     border-box;
}
.ksc-product-active .ksc-comments-input {
	resize:     vertical;
	min-height: 76px;
}
.ksc-product-active .ksc-custom-text-input:focus,
.ksc-product-active .ksc-comments-input:focus {
	border-color: var(--ksc-green-dark);
	outline:      none;
}

/* 17k. Botón × de quitar pegatina — Elementor lo agrandaba (padding 14/28).
   No tocamos 'display' (lo gobierna .is-filled), solo el box-model. */
.ksc-product-active .ksc-sticker-slot-remove {
	position:       absolute;
	top:            -7px;
	right:          -7px;
	width:          20px;
	height:         20px;
	min-width:      20px;
	padding:        0;
	border:         none;
	border-radius:  50%;
	background:     #ef4444;
	color:          #fff;
	font-size:      12px;
	line-height:    20px;
	text-align:     center;
	text-transform: none;
}

/* 17m. Miniaturas de la galería del producto (son <button>). */
.ksc-product-active .ksc-gallery-thumb {
	width:          64px;
	height:         64px;
	min-width:      64px;
	padding:        0;
	border:         1px solid var(--ksc-border);
	border-radius:  var(--ksc-radius-xs);
	background:     var(--ksc-bg);
	overflow:       hidden;
	cursor:         pointer;
	box-shadow:     none;
}
.ksc-product-active .ksc-gallery-thumb:hover {
	border-color: var(--ksc-green-dark);
}

/* 17n. Botón de cerrar del lightbox (está fuera de .ksc-configurator). */
.ksc-product-active .ksc-lightbox-close {
	position:       absolute;
	top:            20px;
	right:          24px;
	width:          44px;
	height:         44px;
	min-width:      44px;
	padding:        0;
	border:         none;
	border-radius:  50%;
	background:     rgba( 255, 255, 255, 0.15 );
	color:          #fff;
	font-size:      28px;
	line-height:    1;
	cursor:         pointer;
	text-transform: none;
}
.ksc-product-active .ksc-lightbox-close:hover {
	background: rgba( 255, 255, 255, 0.28 );
}

/* ===================================================================
   PACKS — Panel "aplica el mismo diseño a otros productos"
   =================================================================== */
.ksc-pack-panel[hidden] {
	display: none;
}
.ksc-pack-intro {
	margin:      0 0 14px;
	font-size:   14px;
	color:       #6b6b6b;
	line-height: 1.5;
}
.ksc-pack-grid {
	display:               grid;
	grid-template-columns: repeat( auto-fill, minmax( 220px, 1fr ) );
	gap:                   12px;
}
.ksc-pack-card {
	border:        1.5px solid #e6e6e6;
	border-radius: 14px;
	padding:       12px;
	background:    #fff;
	transition:    border-color .15s ease, box-shadow .15s ease;
}
.ksc-pack-card.is-selected {
	border-color: #111;
	box-shadow:   0 2px 10px rgba( 0, 0, 0, 0.06 );
}
.ksc-pack-card.is-incomplete {
	border-color: #e0a800;
}
.ksc-pack-card-head {
	display:     flex;
	align-items: center;
	gap:         10px;
	cursor:      pointer;
}
.ksc-pack-check {
	width:        20px;
	height:       20px;
	flex:         0 0 auto;
	accent-color: #111;
	cursor:       pointer;
}
.ksc-pack-thumb {
	width:         52px;
	height:        52px;
	flex:          0 0 auto;
	object-fit:    cover;
	border-radius: 10px;
	background:    #f4f4f4;
}
.ksc-pack-info {
	display:        flex;
	flex-direction: column;
	gap:            2px;
	min-width:      0;
}
.ksc-pack-name {
	font-size:   14px;
	font-weight: 600;
	color:       #1a1a1a;
	line-height: 1.3;
}
.ksc-pack-price {
	font-size: 13px;
	color:     #6b6b6b;
}
.ksc-pack-price del {
	opacity:     .6;
	margin-right: 4px;
}
.ksc-pack-attrs {
	display:        flex;
	flex-wrap:      wrap;
	gap:            8px;
	margin-top:     10px;
	padding-top:    10px;
	border-top:     1px dashed #ececec;
}
.ksc-pack-attrs[hidden] {
	display: none;
}
.ksc-pack-select {
	min-height:    38px;
	padding:       6px 10px;
	border:        1.5px solid #ddd;
	border-radius: 9px;
	font-size:     13px;
	background:    #fff;
	cursor:        pointer;
}

/* Tallas POR UNIDAD (una fila por unidad) en el panel del pack. */
.ksc-pack-sizes {
	display:        flex;
	flex-direction: column;
	gap:            8px;
	margin-top:     10px;
	padding-top:    10px;
	border-top:     1px dashed #ececec;
}
.ksc-pack-sizes[hidden] {
	display: none;
}
.ksc-pack-size-row {
	display:     flex;
	align-items: center;
	flex-wrap:   wrap;
	gap:         8px;
}
.ksc-pack-size-unit {
	font-size:    12.5px;
	font-weight:  600;
	color:        var(--ksc-text-light, #6b7280);
	min-width:    68px;
}
.ksc-pack-size-row .ksc-pack-select {
	flex: 1 1 auto;
}
.ksc-pack-warn {
	margin:    8px 0 0;
	font-size: 12.5px;
	color:     #b8860b;
}
.ksc-pack-warn[hidden] {
	display: none;
}

/* Selector de unidades por producto del pack */
.ksc-pack-units {
	display:      flex;
	align-items:  center;
	gap:          8px;
	margin-top:   10px;
	padding-top:  10px;
	border-top:   1px dashed #ececec;
}
/* Producto opcional en 0 unidades: queda atenuado (no participa en el pack),
   pero su selector de unidades sigue activo para poder añadirlo. */
.ksc-pack-card--empty .ksc-pack-thumb,
.ksc-pack-card--empty .ksc-pack-info {
	opacity: 0.5;
}
.ksc-pack-units-label {
	font-size:    13px;
	font-weight:  600;
	color:        var(--ksc-text, #1f2937);
	margin-right: auto;
}
.ksc-pack-units-btn {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           34px;
	height:          34px;
	min-width:       34px;
	padding:         0;
	border:          1.5px solid #ddd;
	border-radius:   9px;
	background:      #fff;
	color:           var(--ksc-text, #1f2937);
	font-size:       18px;
	line-height:     1;
	cursor:          pointer;
	transition:      border-color .15s ease, background .15s ease;
}
.ksc-pack-units-btn:hover:not(:disabled) {
	border-color: var(--ksc-green-dark, #2f7d3a);
}
.ksc-pack-units-btn:disabled {
	opacity: .4;
	cursor:  not-allowed;
}
.ksc-pack-units-input {
	width:         52px;
	height:        34px;
	padding:       0 6px;
	border:        1.5px solid #ddd;
	border-radius: 9px;
	text-align:    center;
	font-size:     15px;
	font-weight:   600;
	background:    #fff;
	-moz-appearance: textfield;
}
.ksc-pack-units-input::-webkit-outer-spin-button,
.ksc-pack-units-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.ksc-pack-units-input:focus {
	border-color: var(--ksc-green-dark, #2f7d3a);
	outline:      none;
}
/* Anti-Elementor: el tema puede reescribir <button>. Fijar caja del stepper. */
.ksc-product-active .ksc-pack-units-btn {
	width:        34px;
	height:       34px;
	min-width:    34px;
	padding:      0;
	background:   #fff;
	color:        var(--ksc-text, #1f2937);
	border:       1.5px solid #ddd;
	border-radius: 9px;
	text-transform: none;
	line-height:  1;
}
.ksc-pack-discount-note {
	margin:        14px 0 0;
	padding:       10px 12px;
	background:    #f3fbf4;
	border:        1px solid #cdebd2;
	border-radius: 10px;
	font-size:     13.5px;
	font-weight:   600;
	color:         #1d7a33;
}
.ksc-pack-discount-note[hidden] {
	display: none;
}


/* ============================================================
   18. REFINAMIENTO RESPONSIVE MÓVIL
   ============================================================ */

@media (max-width: 900px) {
	/* Preview: menos hueco interno; la imagen aprovecha el ancho. */
	.ksc-design-wrap { gap: 12px; }
	.ksc-design-hint { font-size: 0.72rem; margin-top: 0; }

	/* Objetivos táctiles cómodos en los controles. */
	.ksc-attr-pill { padding: 10px 18px; }
	.ksc-cat-tab   { padding: 8px 14px; }

	/* La galería bajo el preview, miniaturas algo mayores para el dedo. */
	.ksc-gallery { gap: 10px; }
}

/* Pack: una sola columna en móvil (las tarjetas necesitan ancho). */
@media (max-width: 600px) {
	.ksc-pack-grid { grid-template-columns: 1fr; }
}

/* Modal a pantalla casi completa en móvil + respeto del safe-area inferior. */
@media (max-width: 639px) {
	.ksc-modal {
		max-height: 92dvh;
	}
	.ksc-modal-grid {
		grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
		padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	}
	.ksc-modal-close {
		width: 38px; height: 38px; min-width: 38px;
	}
}

/* Pantallas muy pequeñas (≤360px): apretar sin romper. */
@media (max-width: 360px) {
	.ksc-product-title { font-size: 1.5rem; }
	.ksc-price         { font-size: 1.75rem; }
	.ksc-qty-grid      { gap: 8px; }
	.ksc-qty-btn       { padding: 12px 4px; }
	.ksc-qty-num       { font-size: 20px; }
	.ksc-qty-label     { font-size: 11px; }
}


/* ============================================================
   20. VALORACIONES (única pestaña de la ficha KSC)
   ksc-configurator.css solo se carga en fichas KSC, por lo que
   estos estilos no afectan a otros productos de la tienda.
   ============================================================ */

/* Solo queda la pestaña "Valoraciones": ocultamos la barra de pestañas y
   mostramos su panel directamente. */
.woocommerce-tabs .wc-tabs,
.woocommerce-tabs ul.tabs {
	display: none !important;
}
.woocommerce-tabs .wc-tab,
.woocommerce-tabs .panel,
.woocommerce-tabs #tab-reviews {
	display: block !important;
}

.woocommerce-tabs {
	width: 100%;                  /* ocupa todo el ancho del contenedor */
	margin: 40px 0 56px;          /* aire arriba y, sobre todo, abajo (footer) */
	padding: 28px;
	box-sizing: border-box;
	background: #ffffff;
	border: 1px solid #e5e7eb;   /* enmarcado como las step-cards */
	border-radius: 16px;
}
.woocommerce-tabs::before,
.woocommerce-tabs::after {
	content: none !important;     /* anula el clearfix flotante del tema */
	display: none !important;
}
@media ( max-width: 768px ) {
	.woocommerce-tabs {
		padding: 18px;
		margin: 28px 0 40px;
		border-radius: 14px;
	}
}
@media ( max-width: 480px ) {
	.woocommerce-tabs {
		padding: 14px;
		margin: 22px 0 32px;
	}
	.woocommerce-tabs #reviews .woocommerce-Reviews-title {
		font-size: 1.35rem;
	}
}

/* Títulos al estilo de la ficha. */
.woocommerce-tabs #reviews .woocommerce-Reviews-title,
.woocommerce-tabs .comment-reply-title {
	font-family: inherit;
	font-weight: 800;
	color: #1f2937;
}
.woocommerce-tabs #reviews .woocommerce-Reviews-title {
	font-size: 1.6rem;
	margin: 0 0 12px;
}
.woocommerce-tabs .comment-reply-title {
	display: block;
	font-size: 1.05rem;
	font-weight: 700;
	margin: 18px 0 10px;
}
.woocommerce-tabs .woocommerce-noreviews {
	color: #6b7280;
	margin: 0 0 8px;
}

/* Etiquetas del formulario. */
.woocommerce-tabs .comment-form-rating label,
.woocommerce-tabs .comment-form-comment label,
.woocommerce-tabs .comment-form-author label,
.woocommerce-tabs .comment-form-email label {
	display: block;
	font-weight: 600;
	color: #1f2937;
	margin-bottom: 6px;
}
.woocommerce-tabs .comment-form-rating .stars a {
	color: #f59e0b;
}

/* Campos de texto redondeados, como el resto de la ficha. */
.woocommerce-tabs .comment-form textarea,
.woocommerce-tabs .comment-form input[type="text"],
.woocommerce-tabs .comment-form input[type="email"],
.woocommerce-tabs #comment {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 12px 14px;
	font-family: inherit;
	font-size: 16px;
	line-height: 1.5;
	background: #fff;
}
.woocommerce-tabs .comment-form textarea:focus,
.woocommerce-tabs .comment-form input[type="text"]:focus,
.woocommerce-tabs .comment-form input[type="email"]:focus,
.woocommerce-tabs #comment:focus {
	border-color: #2f7d3a;
	outline: none;
}

/* Botón "Enviar" → coral de la ficha. */
.woocommerce-tabs .comment-form .form-submit input[type="submit"],
.woocommerce-tabs #review_form #submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 12px 34px;
	background: #ff3334 !important;
	color: #fff !important;
	border: none !important;
	border-radius: 999px !important;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: background .15s ease, transform .15s ease;
}
.woocommerce-tabs .comment-form .form-submit input[type="submit"]:hover,
.woocommerce-tabs #review_form #submit:hover {
	background: #a30900 !important;
	transform: translateY(-1px);
}