/* ==========================================================================
   CPS Single-Product · plantilla "Máquina" — diseño rico (editorial)
   Adaptado del prototipo estático fc9000 al sistema del tema (prefijo cps-).
   Se carga SOLO en fichas cuyo selector = "machine" (ver functions.php).
   TODO el CSS cuelga de .cps-tpl-machine para no contaminar otras vistas.
   ========================================================================== */

.cps-tpl-machine {
	/* Marca (amarillo CPS, alineado con la home pero más cálido del prototipo) */
	--green:       #f4d300;
	--green-hover: #e3d44a;
	--green-deep:  #c9ad00;
	--green-soft:  #fdfce9;
	--green-light: #fbf49a;
	--green-dark:  #3f3c13;

	--blue:        #6366f1;
	--blue-cyan:   #8b5cf6;

	--black:       #0d0c0a;
	--ink:         #181715;
	--ink-2:       #2e2c29;
	--ink-3:       #4d4a46;
	--muted:       #73706a;
	--muted-2:     #a19e98;
	--line:        #e8e6e1;
	--tint:        #f7f6f2;
	--tint-2:      #fcfcfa;
	--white:       #fff;

	--feat-bg-1:  #141310;
	--feat-bg-2:  #080806;
	--mcard-bg-1: #1b1a17;
	--mcard-bg-2: #12110e;

	--white-92: rgba(255,255,255,.92);
	--white-85: rgba(255,255,255,.85);
	--white-82: rgba(255,255,255,.82);
	--white-80: rgba(255,255,255,.8);
	--white-72: rgba(255,255,255,.72);
	--white-50: rgba(255,255,255,.5);
	--white-25: rgba(255,255,255,.25);
	--white-22: rgba(255,255,255,.22);
	--white-18: rgba(255,255,255,.18);
	--white-14: rgba(255,255,255,.14);
	--white-12: rgba(255,255,255,.12);
	--white-10: rgba(255,255,255,.1);
	--white-08: rgba(255,255,255,.08);
	--white-06: rgba(255,255,255,.06);
	--black-80: rgba(0,0,0,.8);
	--black-00: rgba(0,0,0,0);
	--ink-sh-04: rgba(24,23,21,.04);
	--ink-sh-06: rgba(24,23,21,.06);
	--ink-sh-10: rgba(24,23,21,.1);
	--ink-sh-18: rgba(24,23,21,.18);
	--green-25: rgba(244,211,0,.25);
	--green-18: rgba(244,211,0,.18);
	--green-10: rgba(244,211,0,.1);
	--green-08: rgba(244,211,0,.08);
	--green-06: rgba(244,211,0,.06);
	--blue-18: rgba(99,102,241,.18);
	--blue-08: rgba(99,102,241,.08);
	--blue-cyan-30: rgba(139,92,246,.3);
	--blue-cyan-18: rgba(139,92,246,.18);

	--text-2xs: clamp(.625rem, .6rem + .15vw, .75rem);
	--text-xs:  clamp(.75rem, .71rem + .18vw, .875rem);
	--text-sm:  clamp(.875rem, .84rem + .18vw, 1rem);
	--text-base:clamp(1rem, .96rem + .18vw, 1.125rem);
	--text-md:  clamp(1.125rem, 1.05rem + .36vw, 1.375rem);
	--text-lg:  clamp(1.25rem, 1.11rem + .71vw, 1.75rem);
	--text-xl:  clamp(1.5rem, 1.29rem + 1.07vw, 2.25rem);
	--text-2xl: clamp(2rem, 1.2rem + 1.43vw, 3rem);
	--text-3xl: clamp(2.5rem, 2.07rem + 2.14vw, 4rem);
	--text-4xl: clamp(3.5rem, 3rem + 4vw, 5.5rem);

	--r-xs: 4px;  --r-sm: 8px;  --r-md: 12px;  --r-lg: 16px;  --r-xl: 24px;  --r-pill: 999px;
	--sh-1: 0 1px 2px var(--ink-sh-04);
	--sh-2: 0 4px 16px var(--ink-sh-06);
	--sh-3: 0 10px 30px var(--ink-sh-10);
	--sh-4: 0 20px 50px var(--ink-sh-18);

	--ease: cubic-bezier(.22, 1, .36, 1);
	--max: 1280px;
	--pad-x: 32px;

	color: var(--ink);
	font-size: var(--text-base);
	line-height: 1.55;
}
@media (max-width: 768px) { .cps-tpl-machine { --pad-x: 20px; } }

/* Reset acotado (no global: solo dentro de la plantilla). */
.cps-tpl-machine *, .cps-tpl-machine *::before, .cps-tpl-machine *::after { box-sizing: border-box; }
.cps-tpl-machine img, .cps-tpl-machine svg { display: block; max-width: 100%; }
.cps-tpl-machine a { color: inherit; text-decoration: none; }
.cps-tpl-machine ul, .cps-tpl-machine ol { margin: 0; padding: 0; list-style: none; }

/* Contenedor. */
.cps-tpl-machine .cps-wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-inline: var(--pad-x); }

/* Secciones genéricas. */
.cps-tpl-machine .cps-sec { padding: 96px 0; position: relative; }
.cps-tpl-machine .cps-sec--alt { background: var(--tint-2); }
@media (max-width: 768px) { .cps-tpl-machine .cps-sec { padding: 64px 0; } }

.cps-tpl-machine .cps-sec__head { margin-bottom: 48px; }
.cps-tpl-machine .cps-sec__head--center { text-align: center; }
.cps-tpl-machine .cps-h-section {
	font-size: var(--text-2xl); font-weight: 800; line-height: 1.1;
	letter-spacing: -.035em; color: var(--ink); margin: 0 0 20px; max-width: 820px;
}
.cps-tpl-machine .cps-sec__head--center .cps-h-section { margin-inline: auto; }
.cps-tpl-machine .cps-h-section em {
	font-style: normal; font-weight: 800;
	background: linear-gradient(120deg, var(--green-deep) 0%, var(--green) 100%);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.cps-tpl-machine .cps-sec__sub { font-size: var(--text-base); color: var(--ink-3); margin: 0 auto; max-width: 680px; line-height: 1.6; }

.cps-tpl-machine .cps-eyebrow {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: var(--text-xs); font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
	color: var(--green-deep); padding: 6px 14px;
	border: 1px solid var(--green-25); border-radius: var(--r-pill);
	background: var(--green-06); margin-bottom: 16px;
}
.cps-tpl-machine .cps-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px var(--green-18); }

/* Botones. */
.cps-tpl-machine .cps-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	font-weight: 700; font-size: var(--text-sm); letter-spacing: -.005em;
	padding: 12px 22px; border-radius: var(--r-pill); cursor: pointer;
	transition: background .15s ease, color .15s ease, transform .15s ease; white-space: nowrap;
	border: 1px solid transparent;
}
.cps-tpl-machine .cps-btn:active { transform: translateY(1px); }
.cps-tpl-machine .cps-btn--lg { padding: 14px 28px; font-size: var(--text-base); }
.cps-tpl-machine .cps-btn--cta { background: var(--green); color: var(--ink); }
.cps-tpl-machine .cps-btn--cta:hover { background: var(--green-hover); }
.cps-tpl-machine .cps-btn--soft { background: var(--white); color: var(--ink); border: 1px solid var(--line); }
.cps-tpl-machine .cps-btn--soft:hover { background: var(--tint); }
.cps-tpl-machine .cps-btn--dark { background: var(--ink); color: var(--white); }
.cps-tpl-machine .cps-btn--dark:hover { background: var(--ink-2); }

/* Fade-in (sin GSAP por defecto: transición suave en scroll vía IntersectionObserver). */
.cps-tpl-machine .cps-fade { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.cps-tpl-machine .cps-fade.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.cps-tpl-machine .cps-fade { opacity: 1; transform: none; transition: none; }
}

/* ============================ BREADCRUMB ============================ */
.cps-tpl-machine .cps-crumb { background: var(--tint-2); border-bottom: 1px solid var(--line); padding: 14px 0; }
.cps-tpl-machine .cps-crumb__inner { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--text-xs); color: var(--muted); }
.cps-tpl-machine .cps-crumb a { color: var(--ink-3); font-weight: 500; }
.cps-tpl-machine .cps-crumb a:hover { color: var(--green-deep); }
.cps-tpl-machine .cps-crumb__sep { color: var(--muted-2); }
/* Woo breadcrumb nativo, reestilado para encajar. */
.cps-tpl-machine .cps-crumb .woocommerce-breadcrumb { font-size: var(--text-xs); color: var(--muted); }
.cps-tpl-machine .cps-crumb .woocommerce-breadcrumb a { color: var(--ink-3); }

/* ============================ HERO ============================ */
.cps-tpl-machine .cps-phero { padding: 56px 0 80px; background: linear-gradient(180deg, var(--tint-2) 0%, var(--white) 100%); position: relative; /*overflow: hidden;*/ }
.cps-tpl-machine .cps-phero::before {
	content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
	background:
		radial-gradient(ellipse 50% 40% at 88% 10%, var(--green-10) 0%, transparent 60%),
		radial-gradient(ellipse 40% 50% at 0% 90%, var(--blue-08) 0%, transparent 60%);
}
.cps-tpl-machine .cps-phero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: start; }
@media (max-width: 1024px) { .cps-tpl-machine .cps-phero__grid { grid-template-columns: 1fr; gap: 40px; } }





/* ==========================================================================
   CPS — Miniaturas de galería en CARRUSEL (markup del plugin WCK)
   --------------------------------------------------------------------------
   Sustituye la rejilla fija de 5 por una fila horizontal a TODO el ancho:
   las miniaturas visibles ocupan el ancho disponible y el resto asoman por los
   lados, deslizables con flechas y arrastre. Reemplaza/añade DESPUÉS de las
   reglas de .wck-gallery-thumbs de tu skin (cps-wck-gallery-skin.css).
 
   Estructura del plugin:
     ul.wck-gallery-thumbs > li.wck-gallery-thumb(.is-active) > img
 
   El JS (cps-gallery-carousel.js) envuelve la <ul> en .cps-thumbs-carousel y
   añade los botones de flecha. Este CSS cubre ambos estados (con y sin JS):
   sin JS, sigue siendo una fila con scroll táctil; con JS, añade flechas.
   ========================================================================== */
 
.cps-tpl-machine .wck-gallery,
.cps-tpl-spare .wck-gallery,
.cps-tpl-consumable .wck-gallery {
	--thumb-w: 104px;          /* ancho de cada miniatura en el carrusel */
	--thumb-gap: 12px;
}
 
/* Contenedor que añade el JS alrededor de la <ul>. */
.cps-thumbs-carousel {
	position: relative;
	margin-top: 14px;
}
 
/* La fila de miniaturas: scroll horizontal, todo el ancho. */
.cps-tpl-machine .wck-gallery-thumbs,
.cps-tpl-spare .wck-gallery-thumbs,
.cps-tpl-consumable .wck-gallery-thumbs {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--thumb-gap);
	margin: 0;
	padding: 4px;
	list-style: none;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;            /* Firefox: oculta scrollbar */
	cursor: grab;
}
.cps-tpl-machine .wck-gallery-thumbs::-webkit-scrollbar,
.cps-tpl-spare .wck-gallery-thumbs::-webkit-scrollbar,
.cps-tpl-consumable .wck-gallery-thumbs::-webkit-scrollbar { display: none; } /* WebKit: oculta scrollbar */
.cps-thumbs-carousel.is-dragging .wck-gallery-thumbs { cursor: grabbing; scroll-behavior: auto; }
 
/* Cada miniatura: ancho fijo, no se encoge → las extra asoman por los lados. */
.cps-tpl-machine .wck-gallery-thumb,
.cps-tpl-spare .wck-gallery-thumb,
.cps-tpl-consumable .wck-gallery-thumb {
	flex: 0 0 var(--thumb-w);
	width: var(--thumb-w);
	aspect-ratio: 1 / 1;
	margin: 0;
	padding: 6px;
	background: var(--white, #fff);
	border: 2px solid var(--line, #e8e6e1);
	border-radius: var(--r-md, 12px);
	cursor: pointer;
	overflow: hidden;
	scroll-snap-align: start;
	transition: border-color .2s ease, transform .15s ease;
	-webkit-user-drag: none;
	user-select: none;
}
.cps-tpl-machine .wck-gallery-thumb img,
.cps-tpl-spare .wck-gallery-thumb img,
.cps-tpl-consumable .wck-gallery-thumb img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	pointer-events: none;   /* el arrastre no "agarra" la imagen */
}
.cps-tpl-machine .wck-gallery-thumb:hover,
.cps-tpl-spare .wck-gallery-thumb:hover,
.cps-tpl-consumable .wck-gallery-thumb:hover { border-color: var(--muted-2, #a19e98); transform: translateY(-2px); }
.cps-tpl-machine .wck-gallery-thumb.is-active,
.cps-tpl-spare .wck-gallery-thumb.is-active,
.cps-tpl-consumable .wck-gallery-thumb.is-active { border-color: var(--ink, #181715); }
 
/* --- Flechas (las inyecta el JS) --- */
.cps-thumbs-carousel__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	border: 1px solid var(--line, #e8e6e1);
	border-radius: 50%;
	background: rgba(255, 255, 255, .95);
	box-shadow: 0 2px 10px rgba(24,23,21,.12);
	color: var(--ink, #181715);
	cursor: pointer;
	transition: background .15s ease, opacity .2s ease, transform .15s ease;
}
.cps-thumbs-carousel__arrow:hover { background: var(--green, #f4d300); }
.cps-thumbs-carousel__arrow svg { width: 20px; height: 20px; }
.cps-thumbs-carousel__arrow--prev { left: -6px; }
.cps-thumbs-carousel__arrow--next { right: -6px; }
/* Oculta la flecha cuando no hay más recorrido en ese sentido. */
.cps-thumbs-carousel__arrow[disabled] { opacity: 0; pointer-events: none; }
 
/* Difuminados laterales para insinuar que hay más miniaturas. */
.cps-thumbs-carousel::before,
.cps-thumbs-carousel::after {
	content: "";
	position: absolute;
	top: 0; bottom: 0;
	width: 36px;
	z-index: 2;
	pointer-events: none;
	opacity: 0;
	transition: opacity .2s ease;
}
.cps-thumbs-carousel::before { left: 0; background: linear-gradient(90deg, var(--white, #fff), transparent); }
.cps-thumbs-carousel::after  { right: 0; background: linear-gradient(270deg, var(--white, #fff), transparent); }
.cps-thumbs-carousel.can-prev::before { opacity: 1; }
.cps-thumbs-carousel.can-next::after  { opacity: 1; }
 
@media (prefers-reduced-motion: reduce) {
	.cps-tpl-machine .wck-gallery-thumbs,
	.cps-tpl-spare .wck-gallery-thumbs,
	.cps-tpl-consumable .wck-gallery-thumbs { scroll-behavior: auto; }
}





/* Info principal. */
.cps-tpl-machine .cps-pinfo__brand { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.cps-tpl-machine .cps-pinfo__brand-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.cps-tpl-machine .cps-pinfo__title { font-size: var(--text-3xl); font-weight: 800; line-height: 1.05; letter-spacing: -.035em; margin: 0 0 16px; color: var(--ink); }
.cps-tpl-machine .cps-pinfo__title em { font-style: normal; font-weight: 800; background: linear-gradient(120deg, var(--green-deep) 0%, var(--green) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cps-tpl-machine .cps-pinfo__sub { font-size: var(--text-base); color: var(--ink-3); line-height: 1.55; margin: 0 0 24px; max-width: 540px; }

.cps-tpl-machine .cps-pinfo__meta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.cps-tpl-machine .cps-pinfo__chip { display: inline-flex; align-items: center; gap: 6px; background: var(--white); border: 1px solid var(--line); padding: 8px 14px; border-radius: var(--r-pill); font-size: var(--text-xs); font-weight: 600; color: var(--ink-2); }
.cps-tpl-machine .cps-pinfo__chip svg { width: 14px; height: 14px; color: var(--green-deep); }

.cps-tpl-machine .cps-pinfo__price { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 24px; box-shadow: var(--sh-1); margin-bottom: 24px; }
.cps-tpl-machine .cps-pinfo__price-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.cps-tpl-machine .cps-pinfo__price-from { font-size: var(--text-xs); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.cps-tpl-machine .cps-pinfo__price-amount { font-size: var(--text-2xl); font-weight: 800; color: var(--ink); letter-spacing: -.02em; line-height: 1; }
/* El price_html de Woo cae aquí dentro; lo normalizamos. */
.cps-tpl-machine .cps-pinfo__price-amount .price,
.cps-tpl-machine .cps-pinfo__price-amount .amount { font-size: inherit; font-weight: inherit; color: blue; }
.cps-tpl-machine .cps-pinfo__price-amount del { font-size: var(--text-md); color: var(--muted); font-weight: 600; margin-right: 8px; }
.cps-tpl-machine .cps-pinfo__price-amount ins { text-decoration: none; }
.cps-tpl-machine .cps-pinfo__price-amount .sequra-price { display: none; }
.cps-tpl-machine .cps-pinfo__price-tax { font-size: var(--text-xs); color: var(--muted); }
.cps-tpl-machine .cps-pinfo__price-note { font-size: var(--text-xs); color: var(--ink-3); margin: 8px 0 16px; }
.cps-tpl-machine .cps-pinfo__price-validity { display: inline-flex; align-items: center; gap: 6px; background: var(--green-soft); color: var(--green-dark); padding: 6px 12px; border-radius: var(--r-pill); font-size: var(--text-2xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.cps-tpl-machine .cps-pinfo__price-validity svg { width: 12px; height: 12px; }
.cps-tpl-machine .cps-pinfo__stock { display: inline-flex; align-items: center; gap: 7px; font-size: var(--text-xs); font-weight: 700; margin-top: 12px; }
.cps-tpl-machine .cps-pinfo__stock::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.cps-tpl-machine .cps-pinfo__stock--in { color: #1a8f3c; }
.cps-tpl-machine .cps-pinfo__stock--back { color: #c98a00; }
.cps-tpl-machine .cps-pinfo__stock--out { color: #c0392b; }

/* Selector de configuración (variaciones Woo o serie WPSGE). */
.cps-tpl-machine .cps-pinfo__config { margin-bottom: 24px; }
.cps-tpl-machine .cps-pinfo__config-label { display: block; font-size: var(--text-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); margin-bottom: 12px; }
.cps-tpl-machine .cps-pinfo__configs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (max-width: 540px) { .cps-tpl-machine .cps-pinfo__configs { grid-template-columns: repeat(2, 1fr); } }
.cps-tpl-machine .cps-pinfo__config-btn { background: var(--white); border: 1.5px solid var(--line); border-radius: var(--r-md); padding: 14px 8px; font-weight: 700; font-size: var(--text-sm); color: var(--ink); cursor: pointer; transition: all .2s var(--ease); display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.cps-tpl-machine .cps-pinfo__config-btn:hover { border-color: var(--ink-3); transform: translateY(-2px); }
.cps-tpl-machine .cps-pinfo__config-btn.is-active { background: var(--ink); color: var(--white); border-color: var(--ink); }
.cps-tpl-machine .cps-pinfo__config-name { font-size: var(--text-sm); font-weight: 800; }
.cps-tpl-machine .cps-pinfo__config-width { font-size: var(--text-2xs); font-weight: 500; opacity: .7; }

/* Zona de compra (form de Woo embebido). */
.cps-tpl-machine .cps-pinfo__buy { margin-bottom: 24px; }
.cps-tpl-machine .cps-pinfo__buy .quantity { margin-right: 10px; }
.cps-tpl-machine .cps-pinfo__buy .cart { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.cps-tpl-machine .cps-pinfo__buy .button,
.cps-tpl-machine .cps-pinfo__buy .single_add_to_cart_button {
	flex: 1; min-width: 200px; min-height: 52px;
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	background: var(--green); color: var(--ink); border: none;
	border-radius: var(--r-pill); font-weight: 800; font-size: var(--text-base);
	cursor: pointer; transition: background .15s ease, transform .15s ease;
}
.cps-tpl-machine .cps-pinfo__buy .single_add_to_cart_button:hover { background: var(--green-hover); transform: translateY(-1px); }
/* Variaciones Woo. */
.cps-tpl-machine .cps-pinfo__buy .variations { width: 100%; margin-bottom: 16px; border-collapse: collapse; }
.cps-tpl-machine .cps-pinfo__buy .variations td, .cps-tpl-machine .cps-pinfo__buy .variations th { padding: 6px 0; text-align: left; vertical-align: middle; }
.cps-tpl-machine .cps-pinfo__buy .variations label { font-weight: 700; font-size: var(--text-sm); }

.cps-tpl-machine .cps-pinfo__meta-list { margin: 0 0 24px; padding: 16px 0 0; border-top: 1px solid var(--line); font-size: var(--text-xs); color: var(--muted); }
.cps-tpl-machine .cps-pinfo__meta-list li { margin-bottom: 4px; }
.cps-tpl-machine .cps-pinfo__meta-list b { color: var(--ink); font-weight: 700; }

/* Perks. */
.cps-tpl-machine .cps-pinfo__perks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 540px) { .cps-tpl-machine .cps-pinfo__perks { grid-template-columns: 1fr; } }
.cps-tpl-machine .cps-pinfo__perk { display: flex; gap: 12px; align-items: flex-start; background: var(--tint); padding: 14px 16px; border-radius: var(--r-md); }
.cps-tpl-machine .cps-pinfo__perk svg { width: 22px; height: 22px; color: var(--green-deep); flex-shrink: 0; margin-top: 2px; }
.cps-tpl-machine .cps-pinfo__perk strong { display: block; font-size: var(--text-sm); font-weight: 800; color: var(--ink); margin-bottom: 2px; }
.cps-tpl-machine .cps-pinfo__perk span { font-size: var(--text-xs); color: var(--ink-3); }

/* ============================ STATS ============================ */
.cps-tpl-machine .cps-stats { background: var(--ink); color: var(--white); padding: 56px 0; position: relative; overflow: hidden; }
.cps-tpl-machine .cps-stats::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 40% 50% at 85% 50%, var(--blue-cyan-18) 0%, transparent 60%), radial-gradient(ellipse 30% 40% at 15% 50%, var(--blue-18) 0%, transparent 60%); }
.cps-tpl-machine .cps-stats__grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
@media (max-width: 900px) { .cps-tpl-machine .cps-stats__grid { grid-template-columns: repeat(2, 1fr); gap: 28px; } }
.cps-tpl-machine .cps-stat { border-left: 2px solid var(--white-12); padding-left: 20px; }
.cps-tpl-machine .cps-stat__num { font-size: var(--text-4xl); font-weight: 800; letter-spacing: -.035em; line-height: 1; color: var(--white); margin-bottom: 6px; }
.cps-tpl-machine .cps-stat__num em { font-style: normal; background: linear-gradient(120deg, var(--green) 0%, var(--green-light) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cps-tpl-machine .cps-stat__unit { font-size: var(--text-md); font-weight: 700; color: var(--white-72); margin-left: 4px; }
.cps-tpl-machine .cps-stat__label { font-size: var(--text-xs); font-weight: 600; color: var(--white-72); text-transform: uppercase; letter-spacing: .06em; }

/* ============================ DESCRIPCIÓN ============================ */
.cps-tpl-machine .cps-desc { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
@media (max-width: 900px) { .cps-tpl-machine .cps-desc { grid-template-columns: 1fr; gap: 40px; } }
.cps-tpl-machine .cps-desc__text p { font-size: var(--text-base); line-height: 1.7; color: var(--ink-2); margin: 0 0 16px; }
.cps-tpl-machine .cps-desc__text p:last-child { margin-bottom: 0; }
.cps-tpl-machine .cps-desc__visual { position: relative; border-radius: var(--r-xl); overflow: hidden; background: linear-gradient(160deg, var(--green-soft) 0%, var(--tint) 100%); padding: 40px; aspect-ratio: 4/3; display: grid; place-items: center; box-shadow: var(--sh-2); }
.cps-tpl-machine .cps-desc__visual img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cps-tpl-machine .cps-desc__overlay { position: absolute; bottom: 24px; left: 24px; right: 24px; background: var(--white-92); backdrop-filter: blur(12px); border-radius: var(--r-md); padding: 16px 20px; display: flex; align-items: center; gap: 12px; }
.cps-tpl-machine .cps-desc__overlay svg { width: 28px; height: 28px; color: var(--green-deep); flex-shrink: 0; }
.cps-tpl-machine .cps-desc__overlay strong { display: block; font-size: var(--text-sm); font-weight: 800; color: var(--ink); }
.cps-tpl-machine .cps-desc__overlay span { font-size: var(--text-xs); color: var(--ink-3); }

/* ============================ FEATURE DARK (tabs) ============================ */
.cps-tpl-machine .cps-fdark { position: relative; background: linear-gradient(160deg, var(--feat-bg-1) 0%, var(--feat-bg-2) 100%); border-radius: var(--r-xl); overflow: hidden; display: grid; grid-template-columns: 1.1fr 1fr; min-height: 420px; color: var(--white); isolation: isolate; }
.cps-tpl-machine .cps-fdark::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 50% 60% at 75% 60%, var(--blue-cyan-18) 0%, transparent 60%), radial-gradient(ellipse 40% 50% at 90% 30%, var(--blue-18) 0%, transparent 50%); }
.cps-tpl-machine .cps-fdark__content { padding: 56px; position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; }
.cps-tpl-machine .cps-fdark__eyebrow { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-size: var(--text-xs); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--green); padding: 6px 14px; border: 1px solid var(--green-25); border-radius: var(--r-pill); background: var(--green-08); margin-bottom: 20px; }
.cps-tpl-machine .cps-fdark__title { font-size: var(--text-2xl); font-weight: 800; line-height: 1.15; letter-spacing: -.025em; margin: 0 0 28px; max-width: 460px; }
.cps-tpl-machine .cps-fdark__title em { font-style: normal; background: linear-gradient(120deg, var(--green-light) 0%, var(--green) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cps-tpl-machine .cps-fdark__tabs { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 0 0 16px; border-bottom: 1px solid var(--white-08); padding-bottom: 12px; }
.cps-tpl-machine .cps-fdark__tab { font-size: var(--text-xs); font-weight: 600; color: var(--white-50); padding: 8px 0; position: relative; transition: color .2s ease; background: none; border: none; cursor: pointer; letter-spacing: .02em; }
.cps-tpl-machine .cps-fdark__tab:hover { color: var(--white-80); }
.cps-tpl-machine .cps-fdark__tab.is-active { color: var(--white); }
.cps-tpl-machine .cps-fdark__tab.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -13px; height: 2px; background: var(--green); }
.cps-tpl-machine .cps-fdark__copies { position: relative; min-height: 120px; }
.cps-tpl-machine .cps-fdark__copy { font-size: var(--text-base); line-height: 1.6; color: var(--white-82); margin: 0; max-width: 460px; position: absolute; inset: 0; opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease; pointer-events: none; }
.cps-tpl-machine .cps-fdark__copy.is-active { opacity: 1; transform: translateY(0); position: relative; pointer-events: auto; }
.cps-tpl-machine .cps-fdark__visual { position: relative; z-index: 1; display: grid; place-items: center; padding: 32px; min-height: 420px; }
.cps-tpl-machine .cps-fdark__visual img { border-radius: var(--r-lg); max-height: 360px; object-fit: contain; }
@media (max-width: 900px) {
	.cps-tpl-machine .cps-fdark { grid-template-columns: 1fr; }
	.cps-tpl-machine .cps-fdark__content { padding: 40px 28px 24px; }
	.cps-tpl-machine .cps-fdark__visual { padding: 0 28px 40px; min-height: 240px; }
}

/* ============================ FEAT GRID (cards) ============================ */
.cps-tpl-machine .cps-feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 1024px) { .cps-tpl-machine .cps-feat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .cps-tpl-machine .cps-feat-grid { grid-template-columns: 1fr; } }
.cps-tpl-machine .cps-fcard { position: relative; background: var(--tint); border-radius: var(--r-xl); padding: 32px 28px; overflow: hidden; transition: transform .35s ease, box-shadow .35s ease, background .35s ease, color .35s ease; display: flex; flex-direction: column; min-height: 260px; }
.cps-tpl-machine .cps-fcard:hover { transform: translateY(-4px); box-shadow: var(--sh-3); background: linear-gradient(160deg, var(--mcard-bg-1) 0%, var(--mcard-bg-2) 100%); color: var(--white); }
.cps-tpl-machine .cps-fcard:hover .cps-fcard__title { color: var(--white); }
.cps-tpl-machine .cps-fcard:hover .cps-fcard__desc { color: var(--white-72); }
.cps-tpl-machine .cps-fcard:hover .cps-fcard__icon { background: var(--green); color: var(--ink); }
.cps-tpl-machine .cps-fcard:hover .cps-fcard__tag { background: var(--white-08); color: var(--white-85); border-color: var(--white-14); }
.cps-tpl-machine .cps-fcard__icon { width: 48px; height: 48px; border-radius: var(--r-md); background: var(--white); display: grid; place-items: center; margin-bottom: 20px; color: var(--ink); transition: background .35s ease, color .35s ease; border: 1px solid var(--line); }
.cps-tpl-machine .cps-fcard__icon svg { width: 24px; height: 24px; }
.cps-tpl-machine .cps-fcard__title { font-size: var(--text-md); font-weight: 800; letter-spacing: -.02em; margin: 0 0 10px; color: var(--ink); }
.cps-tpl-machine .cps-fcard__desc { font-size: var(--text-sm); line-height: 1.55; color: var(--ink-3); margin: 0 0 16px; flex: 1; }
.cps-tpl-machine .cps-fcard__tag { align-self: flex-start; background: var(--white); color: var(--ink-2); font-size: var(--text-2xs); font-weight: 700; padding: 5px 10px; border-radius: var(--r-pill); border: 1px solid var(--line); letter-spacing: .04em; text-transform: uppercase; transition: background .35s ease, color .35s ease, border-color .35s ease; }

/* ============================ APPS ============================ */
.cps-tpl-machine .cps-apps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1024px) { .cps-tpl-machine .cps-apps-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .cps-tpl-machine .cps-apps-grid { grid-template-columns: 1fr; } }
.cps-tpl-machine .cps-acard { position: relative; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 3/4; box-shadow: var(--sh-1); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.cps-tpl-machine .cps-acard:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }
.cps-tpl-machine .cps-acard__media { position: absolute; inset: 0; }
.cps-tpl-machine .cps-acard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.cps-tpl-machine .cps-acard:hover .cps-acard__media img { transform: scale(1.05); }
.cps-tpl-machine .cps-acard__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, var(--black-00) 40%, var(--black-80) 100%); }
.cps-tpl-machine .cps-acard__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px; color: var(--white); }
.cps-tpl-machine .cps-acard__tag { display: inline-flex; background: var(--green); color: var(--ink); font-size: var(--text-2xs); font-weight: 800; padding: 4px 10px; border-radius: var(--r-pill); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 8px; }
.cps-tpl-machine .cps-acard__title { font-size: var(--text-md); font-weight: 800; letter-spacing: -.02em; margin: 0 0 6px; }
.cps-tpl-machine .cps-acard__desc { font-size: var(--text-xs); color: var(--white-85); margin: 0; line-height: 1.45; }

/* ============================ SPECS + DOC ============================ */
.cps-tpl-machine .cps-spec-wrap { display: grid; grid-template-columns: 1fr 1.4fr; gap: 48px; align-items: start; }
@media (max-width: 900px) { .cps-tpl-machine .cps-spec-wrap { grid-template-columns: 1fr; gap: 32px; } }
.cps-tpl-machine .cps-spec-side { position: sticky; top: 96px; }
.cps-tpl-machine .cps-spec-side__title { font-size: var(--text-xl); font-weight: 800; letter-spacing: -.02em; margin: 0 0 12px; color: var(--ink); }
.cps-tpl-machine .cps-spec-side__sub { font-size: var(--text-sm); color: var(--ink-3); line-height: 1.6; margin: 0 0 24px; }
.cps-tpl-machine .cps-spec-side__download { display: flex; flex-direction: column; gap: 8px; }
.cps-tpl-machine .cps-spec-side__download a { display: flex; align-items: center; gap: 12px; background: var(--white); border: 1px solid var(--line); padding: 14px 18px; border-radius: var(--r-md); font-size: var(--text-sm); font-weight: 600; color: var(--ink); transition: all .2s var(--ease); }
.cps-tpl-machine .cps-spec-side__download a:hover { background: var(--ink); color: var(--white); border-color: var(--ink); transform: translateX(4px); }
.cps-tpl-machine .cps-spec-side__download svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--green-deep); }
.cps-tpl-machine .cps-spec-side__download a:hover svg { color: var(--green); }
.cps-tpl-machine .cps-spec-table { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-1); }
.cps-tpl-machine .cps-spec-row { display: grid; grid-template-columns: 220px 1fr; border-bottom: 1px solid var(--line); padding: 18px 24px; transition: background .2s ease; }
.cps-tpl-machine .cps-spec-row:hover { background: var(--tint-2); }
.cps-tpl-machine .cps-spec-row:last-child { border-bottom: none; }
.cps-tpl-machine .cps-spec-row__label { font-size: var(--text-sm); font-weight: 700; color: var(--ink); }
.cps-tpl-machine .cps-spec-row__value { font-size: var(--text-sm); color: var(--ink-2); line-height: 1.55; }
@media (max-width: 540px) {
	.cps-tpl-machine .cps-spec-row { grid-template-columns: 1fr; gap: 4px; padding: 14px 18px; }
	.cps-tpl-machine .cps-spec-row__label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
}

/* ============================ FINANCIACIÓN ============================ */
.cps-tpl-machine .cps-fin { background: linear-gradient(135deg, var(--green-soft) 0%, var(--tint) 100%); border-radius: var(--r-xl); padding: 56px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; position: relative; overflow: hidden; }
@media (max-width: 900px) { .cps-tpl-machine .cps-fin { grid-template-columns: 1fr; padding: 40px 28px; } }
.cps-tpl-machine .cps-fin::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 40% 50% at 90% 0%, var(--green-25) 0%, transparent 60%); }
.cps-tpl-machine .cps-fin__content { position: relative; z-index: 1; }
.cps-tpl-machine .cps-fin__title { font-size: var(--text-2xl); font-weight: 800; line-height: 1.1; letter-spacing: -.025em; margin: 0 0 16px; color: var(--ink); }
.cps-tpl-machine .cps-fin__title em { font-style: normal; background: linear-gradient(120deg, var(--green-deep) 0%, var(--ink) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cps-tpl-machine .cps-fin__desc { font-size: var(--text-base); color: var(--ink-2); line-height: 1.6; margin: 0 0 24px; max-width: 480px; }
.cps-tpl-machine .cps-fin__plazos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.cps-tpl-machine .cps-fin__plazo { background: var(--white); border: 1.5px solid var(--line); padding: 10px 18px; border-radius: var(--r-pill); font-size: var(--text-xs); font-weight: 700; color: var(--ink-2); cursor: pointer; transition: all .2s var(--ease); }
.cps-tpl-machine .cps-fin__plazo:hover { border-color: var(--ink-3); }
.cps-tpl-machine .cps-fin__plazo.is-active { background: var(--ink); color: var(--white); border-color: var(--ink); }
.cps-tpl-machine .cps-fin__cta { display: flex; gap: 12px; flex-wrap: wrap; }
.cps-tpl-machine .cps-fin__calc { position: relative; z-index: 1; background: var(--white); border-radius: var(--r-lg); padding: 32px; box-shadow: var(--sh-2); border: 1px solid var(--line); }
.cps-tpl-machine .cps-fin__calc-label { font-size: var(--text-xs); font-weight: 700; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px; }
.cps-tpl-machine .cps-fin__calc-amount { font-size: var(--text-3xl); font-weight: 800; color: var(--ink); letter-spacing: -.03em; line-height: 1; margin-bottom: 4px; }
.cps-tpl-machine .cps-fin__calc-amount span { font-size: var(--text-md); color: var(--ink-3); font-weight: 600; }
.cps-tpl-machine .cps-fin__calc-period { font-size: var(--text-sm); color: var(--ink-3); margin-bottom: 20px; }
.cps-tpl-machine .cps-fin__calc-divider { height: 1px; background: var(--line); margin: 16px 0; }
.cps-tpl-machine .cps-fin__calc-detail { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--ink-3); margin-bottom: 6px; }
.cps-tpl-machine .cps-fin__calc-detail strong { color: var(--ink); font-weight: 700; }

/* ============================ RELACIONADOS (consumibles/repuestos/upsells) ============================ */
.cps-tpl-machine .cps-rel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px) { .cps-tpl-machine .cps-rel-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cps-tpl-machine .cps-rel-grid { grid-template-columns: 1fr; } }
.cps-tpl-machine .cps-rcard { background: var(--white); border-radius: var(--r-xl); padding: 28px 24px 24px; display: flex; flex-direction: column; border: 1px solid var(--line); transition: transform .35s var(--ease), box-shadow .35s var(--ease); min-height: 360px; }
.cps-tpl-machine .cps-rcard:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }
.cps-tpl-machine .cps-rcard__tag { align-self: flex-start; background: var(--green); color: var(--ink); font-size: var(--text-2xs); font-weight: 800; padding: 4px 10px; border-radius: var(--r-pill); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 16px; }
.cps-tpl-machine .cps-rcard__tag--spare { background: var(--ink); color: var(--white); }
.cps-tpl-machine .cps-rcard__media { flex: 1; display: grid; place-items: center; margin: 8px 0 20px; min-height: 160px; }
.cps-tpl-machine .cps-rcard__media img { max-width: 80%; max-height: 180px; object-fit: contain; }
.cps-tpl-machine .cps-rcard__title { font-size: var(--text-md); font-weight: 800; letter-spacing: -.02em; margin: 0 0 8px; color: var(--ink); }
.cps-tpl-machine .cps-rcard__price { font-size: var(--text-sm); color: var(--ink-3); margin-bottom: 16px; }
.cps-tpl-machine .cps-rcard__price .amount { color: var(--ink); font-weight: 800; }
.cps-tpl-machine .cps-rcard__cta { margin-top: auto; }

/* ============================ FAQ ============================ */
.cps-tpl-machine .cps-faq { display: grid; gap: 10px; max-width: 820px; margin: 0 auto; }
.cps-tpl-machine .cps-faq__item { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--white); }
.cps-tpl-machine .cps-faq__item summary { padding: 18px 22px; font-weight: 700; cursor: pointer; list-style: none; font-size: var(--text-base); }
.cps-tpl-machine .cps-faq__item summary::-webkit-details-marker { display: none; }
.cps-tpl-machine .cps-faq__item summary::after { content: '+'; float: right; font-weight: 800; color: var(--green-deep); font-size: 1.3em; line-height: 1; }
.cps-tpl-machine .cps-faq__item[open] summary::after { content: '\2212'; }
.cps-tpl-machine .cps-faq__a { padding: 0 22px 18px; font-size: var(--text-sm); line-height: 1.65; color: var(--ink-3); }

/* ============================ ADVISOR ============================ */
.cps-tpl-machine .cps-advisor { background: var(--ink); color: var(--white); border-radius: var(--r-xl); padding: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; position: relative; overflow: hidden; }
@media (max-width: 900px) { .cps-tpl-machine .cps-advisor { grid-template-columns: 1fr; padding: 40px 28px; } }
.cps-tpl-machine .cps-advisor::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 40% 50% at 90% 30%, var(--green-25) 0%, transparent 60%), radial-gradient(ellipse 30% 50% at 10% 80%, var(--blue-cyan-18) 0%, transparent 60%); }
.cps-tpl-machine .cps-advisor__content { position: relative; z-index: 1; }
.cps-tpl-machine .cps-advisor__title { font-size: var(--text-2xl); font-weight: 800; line-height: 1.1; letter-spacing: -.025em; margin: 0 0 16px; }
.cps-tpl-machine .cps-advisor__title em { font-style: normal; background: linear-gradient(120deg, var(--green) 0%, var(--green-light) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cps-tpl-machine .cps-advisor__desc { font-size: var(--text-base); color: var(--white-82); line-height: 1.6; margin: 0 0 28px; max-width: 460px; }
.cps-tpl-machine .cps-advisor__channels { display: flex; flex-direction: column; gap: 14px; position: relative; z-index: 1; }
.cps-tpl-machine .cps-advisor__channel { display: flex; align-items: center; gap: 16px; background: var(--white-06); border: 1px solid var(--white-12); padding: 16px 20px; border-radius: var(--r-md); transition: all .2s var(--ease); }
.cps-tpl-machine .cps-advisor__channel:hover { background: var(--white-12); transform: translateX(4px); }
.cps-tpl-machine .cps-advisor__channel-icon { width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--green); color: var(--ink); display: grid; place-items: center; flex-shrink: 0; }
.cps-tpl-machine .cps-advisor__channel-icon svg { width: 20px; height: 20px; }
.cps-tpl-machine .cps-advisor__channel-text strong { display: block; font-size: var(--text-sm); font-weight: 800; color: var(--white); margin-bottom: 2px; }
.cps-tpl-machine .cps-advisor__channel-text span { font-size: var(--text-xs); color: var(--white-72); }

/* Animación pulse del eyebrow dot. */
@keyframes cpsTplPulse { 0%, 100% { box-shadow: 0 0 0 4px var(--green-18); } 50% { box-shadow: 0 0 0 8px var(--green-10); } }
.cps-tpl-machine .cps-eyebrow .dot, .cps-tpl-machine .cps-fdark__eyebrow .dot { animation: cpsTplPulse 2s var(--ease) infinite; }
@media (prefers-reduced-motion: reduce) { .cps-tpl-machine .cps-eyebrow .dot, .cps-tpl-machine .cps-fdark__eyebrow .dot { animation: none; } }








/* ==========================================================================
   CPS — Adaptación visual de la galería del plugin (WPRY Commerce Kit)
   --------------------------------------------------------------------------
   El módulo "Galería de producto" del plugin genera este markup:
     .wck-gallery[data-zoom]
       .wck-gallery-main > img.wck-gallery-main-img[data-full]
       ul.wck-gallery-thumbs > li.wck-gallery-thumb(.is-active) > img[data-large][data-full]

   Aquí SOLO cambiamos su aspecto para que encaje con el diseño CPS (bordes,
   sombras, miniaturas, paleta). NO tocamos clases ni data-*, así que el JS del
   plugin (cambio de miniatura + zoom) sigue funcionando intacto.

   Cómo cargarlo: añade este archivo como su propia hoja, o pégalo al final de
   single-product-gallery.css (si conservas ese nombre) y encólalo en is_product().
   Las reglas van scopeadas a las tres plantillas para no afectar otras vistas.
   ========================================================================== */

.cps-tpl-machine .wck-gallery,
.cps-tpl-spare .wck-gallery,
.cps-tpl-consumable .wck-gallery {
	--gal-line: var(--line, #e8e6e1);
	--gal-bg: var(--white, #fff);
	--gal-tint: var(--tint, #f7f6f2);
	--gal-ink: var(--ink, #181715);
	--gal-accent: var(--green, #f4d300);
	--gal-radius: var(--r-xl, 24px);
	--gal-radius-sm: var(--r-md, 12px);
	--gal-shadow: var(--sh-2, 0 4px 16px rgba(24,23,21,.06));
	--gal-ease: var(--ease, cubic-bezier(.22, 1, .36, 1));
	position: relative;
}

/* --- Imagen principal --- */
.cps-tpl-machine .wck-gallery-main,
.cps-tpl-spare .wck-gallery-main,
.cps-tpl-consumable .wck-gallery-main {
	position: relative;
	background: var(--gal-bg);
	border: 1px solid var(--gal-line);
	border-radius: var(--gal-radius);
	box-shadow: var(--gal-shadow);
	overflow: hidden;
	aspect-ratio: 1 / 1;
	display: grid;
	place-items: center;
	height: auto;
	width: 100%;
}
.cps-tpl-machine .wck-gallery-main-img,
.cps-tpl-spare .wck-gallery-main-img,
.cps-tpl-consumable .wck-gallery-main-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	cursor: zoom-in;
	transition: opacity .25s var(--gal-ease);
}

/* Indicador de zoom (esquina) cuando data-zoom="1". Decorativo, sobre la imagen. */
.cps-tpl-machine .wck-gallery[data-zoom="1"] .wck-gallery-main::after,
.cps-tpl-spare .wck-gallery[data-zoom="1"] .wck-gallery-main::after,
.cps-tpl-consumable .wck-gallery[data-zoom="1"] .wck-gallery-main::after {
	content: "";
	position: absolute;
	top: 14px;
	right: 14px;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid var(--gal-line);
	background: rgba(255, 255, 255, .9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23181715' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3M11 8v6M8 11h6'/%3E%3C/svg%3E") center / 20px no-repeat;
	pointer-events: none;
	transition: background-color .2s ease;
}

/* --- Miniaturas --- */
.cps-tpl-machine .wck-gallery-thumbs,
.cps-tpl-spare .wck-gallery-thumbs,
.cps-tpl-consumable .wck-gallery-thumbs {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 12px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}
@media (max-width: 540px) {
	.cps-tpl-machine .wck-gallery-thumbs,
	.cps-tpl-spare .wck-gallery-thumbs,
	.cps-tpl-consumable .wck-gallery-thumbs { grid-template-columns: repeat(4, 1fr); }
}

.cps-tpl-machine .wck-gallery-thumb,
.cps-tpl-spare .wck-gallery-thumb,
.cps-tpl-consumable .wck-gallery-thumb {
	margin: 0;
	list-style: none;
	aspect-ratio: 1 / 1;
	padding: 6px;
	background: var(--gal-bg);
	border: 2px solid var(--gal-line);
	border-radius: var(--gal-radius-sm);
	cursor: pointer;
	overflow: hidden;
	transition: border-color .2s ease, transform .15s ease;
}
.cps-tpl-machine .wck-gallery-thumb img,
.cps-tpl-spare .wck-gallery-thumb img,
.cps-tpl-consumable .wck-gallery-thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
.cps-tpl-machine .wck-gallery-thumb:hover,
.cps-tpl-spare .wck-gallery-thumb:hover,
.cps-tpl-consumable .wck-gallery-thumb:hover {
	border-color: var(--muted-2, #a19e98);
	transform: translateY(-2px);
}
.cps-tpl-machine .wck-gallery-thumb.is-active,
.cps-tpl-spare .wck-gallery-thumb.is-active,
.cps-tpl-consumable .wck-gallery-thumb.is-active {
	border-color: var(--gal-ink);
}

/* --- Galería vacía (placeholder de Woo) --- */
.cps-tpl-machine .wck-gallery--empty,
.cps-tpl-spare .wck-gallery--empty,
.cps-tpl-consumable .wck-gallery--empty {
	background: var(--gal-bg);
	border: 1px solid var(--gal-line);
	border-radius: var(--gal-radius);
	box-shadow: var(--gal-shadow);
	overflow: hidden;
	aspect-ratio: 1 / 1;
	display: grid;
	place-items: center;
	padding: 24px;
}
.cps-tpl-machine .wck-gallery--empty img,
.cps-tpl-spare .wck-gallery--empty img,
.cps-tpl-consumable .wck-gallery--empty img {
	max-width: 70%;
	height: auto;
	opacity: .5;
}

/* --- Capa de zoom del plugin (overlay a pantalla completa) ---
   El plugin crea su propia capa al hacer clic. No conocemos su clase exacta,
   así que cubrimos los nombres más probables. Si el zoom del plugin usa otra
   clase, dímelo y la ajusto; esto solo afina el fondo y el cursor. */
.wck-gallery-zoom,
.wck-gallery-overlay,
.wck-gallery-lightbox {
	background: rgba(8, 8, 8, .92) !important;
}

@media (prefers-reduced-motion: reduce) {
	.cps-tpl-machine .wck-gallery-main-img,
	.cps-tpl-spare .wck-gallery-main-img,
	.cps-tpl-consumable .wck-gallery-main-img,
	.cps-tpl-machine .wck-gallery-thumb,
	.cps-tpl-spare .wck-gallery-thumb,
	.cps-tpl-consumable .wck-gallery-thumb { transition: none; }
}







/* ==========================================================================
   AÑADIR al final de single-product-machine.css
   Tabla de repuestos/consumibles relacionados (ficha de máquina).
   Una fila por producto: miniatura · nombre+formatos · referencia · precio · acciones.
   Usa grid para que sea tabla en desktop y tarjeta apilada en móvil.
   ========================================================================== */

.cps-tpl-machine .cps-reltable {
	max-width: 1000px;
	margin: 0 auto;
	background: var(--white, #fff);
	border: 1px solid var(--line, #e8e6e1);
	border-radius: var(--r-xl, 24px);
	overflow: auto;
	box-shadow: var(--sh-1, 0 1px 2px rgba(24,23,21,.04));
	max-height: 67vh;
}

/* Estructura de columnas compartida por cabecera y filas. */
.cps-tpl-machine .cps-reltable__head,
.cps-tpl-machine .cps-reltable__row {
	display: grid;
	grid-template-columns: 72px 1fr 140px 130px 200px;
	align-items: center;
	gap: 16px;
	padding: 14px 22px;
}

.cps-tpl-machine .cps-reltable__head {
	background: var(--tint-2, #fcfcfa);
	border-bottom: 1px solid var(--line, #e8e6e1);
	position: sticky;
    z-index: 2;
    top: 0;
}
.cps-tpl-machine .cps-reltable__head .cps-reltable__col {
	font-size: var(--text-2xs, .72rem);
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--muted, #73706a);
}

.cps-tpl-machine .cps-reltable__row {
	border-bottom: 1px solid var(--line, #e8e6e1);
	transition: background .2s ease;
}
.cps-tpl-machine .cps-reltable__row:last-child { border-bottom: none; }
.cps-tpl-machine .cps-reltable__row:hover { background: var(--tint-2, #fcfcfa); }

/* Miniatura */
.cps-tpl-machine .cps-reltable__thumb {
	display: block;
	width: 65px;
	height: 65px;
	border: 1px solid var(--line, #e8e6e1);
	border-radius: var(--r-md, 12px);
	overflow: hidden;
	background: var(--white, #fff);
}
.cps-tpl-machine .cps-reltable__thumb img { width: 100%; height: 100%; object-fit: cover; padding: 0; }

/* Nombre + tag + formatos */
.cps-tpl-machine .cps-reltable__name {
	display: block;
	font-size: var(--text-sm, 1rem);
	font-weight: 800;
	color: var(--ink, #181715);
	line-height: 1.25;
	letter-spacing: -.01em;
}
.cps-tpl-machine .cps-reltable__name:hover { color: var(--green-deep, #c9ad00); }
.cps-tpl-machine .cps-reltable__tag {
	display: inline-block;
	margin-top: 4px;
	font-size: var(--text-2xs, .72rem);
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--muted, #73706a);
}
.cps-tpl-machine .cps-reltable__formats {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-top: 6px;
}
.cps-tpl-machine .cps-reltable__fmt {
	display: inline-flex;
	background: var(--green-soft, #fdfce9);
	color: var(--green-dark, #3f3c13);
	border: 1px solid var(--green-25, rgba(244,211,0,.25));
	font-size: var(--text-2xs, .72rem);
	font-weight: 700;
	padding: 2px 8px;
	border-radius: var(--r-pill, 999px);
}

/* Referencia */
.cps-tpl-machine .cps-reltable__col--ref {
	font-size: var(--text-sm, 1rem);
	color: var(--ink-2, #2e2c29);
	font-variant-numeric: tabular-nums;
}
.cps-tpl-machine .cps-reltable__muted { color: var(--muted-2, #a19e98); }

/* Precio */
.cps-tpl-machine .cps-reltable__col--price {
	font-size: var(--text-sm, 1rem);
	font-weight: 800;
	color: var(--ink, #181715);
}
.cps-tpl-machine .cps-reltable__col--price del { font-weight: 600; color: var(--muted, #73706a); font-size: .9em; margin-right: 5px; }
.cps-tpl-machine .cps-reltable__col--price ins { text-decoration: none; }
.cps-tpl-machine .cps-reltable__col--price .sequra-price { display: none; }

/* Acciones */
.cps-tpl-machine .cps-reltable__col--act {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
	align-items: center;
}
.cps-tpl-machine .cps-reltable__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-size: var(--text-xs, .875rem);
	font-weight: 700;
	padding: 9px 14px;
	border-radius: var(--r-pill, 999px);
	cursor: pointer;
	transition: background .15s ease, color .15s ease, transform .15s ease, border-color .15s ease;
	white-space: nowrap;
	border: 1px solid transparent;
}
.cps-tpl-machine .cps-reltable__btn svg { width: 16px; height: 16px; }
.cps-tpl-machine .cps-reltable__btn--cart {
	background: var(--green, #f4d300);
	color: var(--ink, #181715);
}
.cps-tpl-machine .cps-reltable__btn--cart:hover { background: var(--green-hover, #e3d44a); transform: translateY(-1px); }
.cps-tpl-machine .cps-reltable__btn--cart.added { background: var(--ink, #181715); color: #fff; }
.cps-tpl-machine .cps-reltable__btn--cart.loading { opacity: .7; pointer-events: none; }
.cps-tpl-machine .cps-reltable__btn--choose {
	background: var(--ink, #181715);
	color: #fff;
}
.cps-tpl-machine .cps-reltable__btn--choose:hover { background: #000; }
.cps-tpl-machine .cps-reltable__btn--view {
	background: var(--white, #fff);
	color: var(--ink, #181715);
	border: 1px solid var(--line, #e8e6e1);
}
.cps-tpl-machine .cps-reltable__btn--view:hover { background: var(--tint, #f7f6f2); }

/* Ocultar el "added to cart" / "view cart" que Woo añade tras el botón AJAX,
   para no romper la fila (el feedback lo da el badge del header). */
.cps-tpl-machine .cps-reltable__col--act .added_to_cart { display: none !important; }

/* --------------------------------------------------------------------------
   RESPONSIVE: en móvil, cada fila se apila como tarjeta.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
	.cps-tpl-machine .cps-reltable__head { display: none; }
	.cps-tpl-machine .cps-reltable__row {
		grid-template-columns: 64px 1fr;
		grid-template-areas:
			"img name"
			"img ref"
			"price price"
			"act act";
		gap: 6px 14px;
		padding: 16px 18px;
	}
	.cps-tpl-machine .cps-reltable__col--img { grid-area: img; align-self: start; }
	.cps-tpl-machine .cps-reltable__col--name { grid-area: name; }
	.cps-tpl-machine .cps-reltable__col--ref { grid-area: ref; font-size: var(--text-xs, .875rem); color: var(--muted, #73706a); }
	.cps-tpl-machine .cps-reltable__col--ref::before { content: "Ref: "; font-weight: 600; }
	.cps-tpl-machine .cps-reltable__col--price { grid-area: price; margin-top: 4px; }
	.cps-tpl-machine .cps-reltable__col--act { grid-area: act; justify-content: flex-start; margin-top: 8px; }
	.cps-tpl-machine .cps-reltable__thumb { width: 64px; height: 64px; }
}

@media (prefers-reduced-motion: reduce) {
	.cps-tpl-machine .cps-reltable__row,
	.cps-tpl-machine .cps-reltable__btn { transition: none; }
}







/* ==========================================================================
   CPS — Columna sticky en secciones de dos columnas (las 3 plantillas)
   --------------------------------------------------------------------------
   En las secciones a dos columnas, la columna naturalmente MÁS CORTA queda
   fija (sticky) mientras la larga sigue desplazándose, hasta el final de la
   sección. Elegida por sección (CSS puro, sin JS):
     · Hero        → la galería (.cps-gallery) — la info de compra es más alta.
     · Descripción → el visual (.cps-desc__visual) — el texto suele ser largo.
 
   Requisitos de position:sticky que ya cumplimos:
     · El padre (grid) NO tiene overflow:hidden.
     · El sticky se mide respecto al viewport; usamos un offset bajo el header fijo.
 
   AÑADIR al final de cada CSS de plantilla, o cargar como hoja aparte en is_product().
   ========================================================================== */
 
/* Offset superior: deja hueco bajo el header fijo del sitio (cps-has-fixed-header).
   Ajusta --cps-sticky-top si tu header mide distinto. */
.cps-tpl-machine,
.cps-tpl-spare,
.cps-tpl-consumable {
	--cps-sticky-top: 110px;   /* alto aprox. del header fijo + ~16px de aire */
}
 
/* --------------------------------------------------------------------------
   1) HERO — la GALERÍA (columna más corta) acompaña al scroll mientras la
   info de compra, más alta (precio, stock, variaciones, perks, meta), se
   desplaza. El grid .cps-phero__grid alinea sus hijos arriba (align-items:start
   ya está en cada plantilla), condición necesaria para que el sticky funcione.
   -------------------------------------------------------------------------- */
.cps-tpl-machine .cps-phero__grid .cps-gallery,
.cps-tpl-spare .cps-phero__grid .cps-gallery,
.cps-tpl-consumable .cps-phero__grid .cps-gallery {
	position: sticky;
	top: var(--cps-sticky-top);
	align-self: start;   /* refuerza: el item no se estira a la altura de la fila */
}
 
/* --------------------------------------------------------------------------
   2) DESCRIPCIÓN (solo máquina) — el visual acompaña al scroll del texto.
   -------------------------------------------------------------------------- */
.cps-tpl-machine .cps-desc {
	align-items: start;   /* asegura recorrido para el sticky */
}
.cps-tpl-machine .cps-desc .cps-desc__visual {
	position: sticky;
	top: var(--cps-sticky-top);
	align-self: start;
}
 
/* --------------------------------------------------------------------------
   DESACTIVAR el sticky cuando las columnas se apilan (1 sola columna).
   En móvil/tablet el grid pasa a 1 columna; sticky ahí no tiene sentido y
   podría dejar la info "flotando". Lo anulamos en los mismos breakpoints que
   cada plantilla usa para colapsar el grid.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.cps-tpl-machine .cps-phero__grid .cps-gallery,
	.cps-tpl-spare .cps-phero__grid .cps-gallery,
	.cps-tpl-consumable .cps-phero__grid .cps-gallery {
		position: static;
		top: auto;
	}
}
@media (max-width: 900px) {
	.cps-tpl-machine .cps-desc .cps-desc__visual {
		position: static;
		top: auto;
	}
}








/* ==========================================================================
   AÑADIR al final de single-product-machine.css
   Configurador de kit: pasos con opciones (checkbox/radio) + resumen pegajoso.
   ========================================================================== */

.cps-tpl-machine .cps-kit__form {
	display: grid;
	grid-template-columns: 1fr 360px;
	gap: 32px;
	align-items: start;
	max-width: 1100px;
	margin: 0 auto;
}
@media (max-width: 900px) {
	.cps-tpl-machine .cps-kit__form { grid-template-columns: 1fr; }
}

/* --- Pasos --- */
.cps-tpl-machine .cps-kit__steps { display: flex; flex-direction: column; gap: 16px; }

.cps-tpl-machine .cps-kit__step {
	background: var(--white, #fff);
	border: 1px solid var(--line, #e8e6e1);
	border-radius: var(--r-lg, 16px);
	padding: 22px;
	margin: 0;
}
.cps-tpl-machine .cps-kit__step.is-invalid { border-color: #c0392b; box-shadow: 0 0 0 3px rgba(192,57,43,.12); }

.cps-tpl-machine .cps-kit__step-title {
	font-size: var(--text-md, 1.2rem);
	font-weight: 800;
	letter-spacing: -.01em;
	color: var(--ink, #181715);
	margin: 0 0 16px;
	padding: 0;
}
.cps-tpl-machine .cps-kit__req { font-size: var(--text-xs, .82rem); font-weight: 700; color: #c0392b; text-transform: uppercase; letter-spacing: .04em; }

/* Base destacado */
.cps-tpl-machine .cps-kit__step--base { padding: 0; border: none; background: transparent; }
.cps-tpl-machine .cps-kit__base {
	display: grid;
	grid-template-columns: 64px 1fr auto;
	align-items: center;
	gap: 16px;
	background: var(--ink, #181715);
	color: #fff;
	border-radius: var(--r-lg, 16px);
	padding: 18px 22px;
}
.cps-tpl-machine .cps-kit__base-media { width: 64px; height: 64px; background: #fff; border-radius: var(--r-md, 12px); overflow: hidden; }
.cps-tpl-machine .cps-kit__base-media img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.cps-tpl-machine .cps-kit__base-tag { font-size: var(--text-2xs, .72rem); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--green, #f4d300); }
.cps-tpl-machine .cps-kit__base-name { font-size: var(--text-base, 1rem); font-weight: 800; margin: 2px 0 0; }
.cps-tpl-machine .cps-kit__base-price { font-size: var(--text-md, 1.2rem); font-weight: 800; }

/* --- Opciones --- */
.cps-tpl-machine .cps-kit__options { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 600px) {
	.cps-tpl-machine .cps-kit__options { grid-template-columns: repeat(2, 1fr); }
}

.cps-tpl-machine .cps-kit__opt { position: relative; cursor: pointer; display: block; }
.cps-tpl-machine .cps-kit__opt input {
	position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer;
}
.cps-tpl-machine .cps-kit__opt-box {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	border: 2px solid var(--line, #e8e6e1);
	border-radius: var(--r-md, 12px);
	background: var(--tint-2, #fcfcfa);
	transition: border-color .18s ease, background .18s ease, transform .12s ease;
	height: 100%;
}
.cps-tpl-machine .cps-kit__opt:hover .cps-kit__opt-box { border-color: var(--muted-2, #a19e98); }
.cps-tpl-machine .cps-kit__opt input:checked + .cps-kit__opt-box {
	border-color: var(--ink, #181715);
	background: var(--white, #fff);
}
.cps-tpl-machine .cps-kit__opt input:focus-visible + .cps-kit__opt-box {
	box-shadow: 0 0 0 3px var(--green-25, rgba(244,211,0,.25));
}
/* Punto de selección */
.cps-tpl-machine .cps-kit__opt-box::before {
	content: "";
	flex: 0 0 20px;
	width: 20px; height: 20px;
	border: 2px solid var(--line, #e8e6e1);
	border-radius: 50%;
	transition: border-color .18s ease, background .18s ease;
}
.cps-tpl-machine .cps-kit__step[data-type="checkbox"] .cps-kit__opt-box::before { border-radius: 6px; }
.cps-tpl-machine .cps-kit__opt input:checked + .cps-kit__opt-box::before {
	border-color: var(--ink, #181715);
	background: var(--green, #f4d300) padding-box;
	box-shadow: inset 0 0 0 3px var(--ink, #181715);
}

.cps-tpl-machine .cps-kit__opt-media { width: 44px; height: 44px; background: #fff; border: 1px solid var(--line, #e8e6e1); border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.cps-tpl-machine .cps-kit__opt-media img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.cps-tpl-machine .cps-kit__opt-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cps-tpl-machine .cps-kit__opt-name { font-size: var(--text-sm, 1rem); font-weight: 800; color: var(--ink, #181715); line-height: 1.2; }
.cps-tpl-machine .cps-kit__opt-price { font-size: var(--text-xs, .82rem); display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.cps-tpl-machine .cps-kit__opt-price del { color: var(--muted, #73706a); }
.cps-tpl-machine .cps-kit__opt-price ins { text-decoration: none; font-weight: 800; color: var(--ink, #181715); }
.cps-tpl-machine .cps-kit__opt-price--free { color: var(--muted, #73706a); font-weight: 700; }
.cps-tpl-machine .cps-kit__opt-save {
	display: inline-block;
	background: var(--green-soft, #fdfce9);
	color: var(--green-dark, #3f3c13);
	border: 1px solid var(--green-25, rgba(244,211,0,.25));
	font-size: var(--text-2xs, .72rem);
	font-weight: 700;
	padding: 1px 8px;
	border-radius: var(--r-pill, 999px);
}

/* --- Resumen (pegajoso) --- */
.cps-tpl-machine .cps-kit__summary {
	background: var(--white, #fff);
	border: 1px solid var(--line, #e8e6e1);
	border-radius: var(--r-xl, 24px);
	padding: 24px;
	box-shadow: var(--sh-2, 0 4px 16px rgba(24,23,21,.06));
	position: sticky;
	top: var(--cps-sticky-top, 110px);
}
.cps-tpl-machine .cps-kit__summary-title { font-size: var(--text-md, 1.2rem); font-weight: 800; margin: 0 0 16px; }
.cps-tpl-machine .cps-kit__summary-list { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cps-tpl-machine .cps-kit__summary-row { display: flex; justify-content: space-between; gap: 12px; font-size: var(--text-sm, .95rem); color: var(--ink-2, #2e2c29); }
.cps-tpl-machine .cps-kit__summary-row[data-base] { font-weight: 800; color: var(--ink, #181715); }
.cps-tpl-machine .cps-kit__summary-total {
	display: flex; justify-content: space-between; align-items: baseline;
	border-top: 1px solid var(--line, #e8e6e1);
	padding-top: 16px;
	font-size: var(--text-sm, 1rem);
	color: var(--muted, #73706a);
}
.cps-tpl-machine .cps-kit__summary-total strong { font-size: var(--text-xl, 1.6rem); color: var(--ink, #181715); font-weight: 800; letter-spacing: -.02em; }
.cps-tpl-machine .cps-kit__summary-save { margin: 10px 0 0; font-size: var(--text-xs, .82rem); font-weight: 700; color: var(--green-dark, #3f3c13); }
.cps-tpl-machine .cps-kit__add { width: 100%; margin-top: 18px; }
.cps-tpl-machine .cps-kit__add.is-disabled,
.cps-tpl-machine .cps-kit__add:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.cps-tpl-machine .cps-kit__error { margin: 10px 0 0; font-size: var(--text-xs, .82rem); color: #c0392b; font-weight: 700; text-align: center; }

@media (max-width: 900px) {
	.cps-tpl-machine .cps-kit__summary { position: static; }
}
@media (prefers-reduced-motion: reduce) {
	.cps-tpl-machine .cps-kit__opt-box { transition: none; }
}







/* ==========================================================================
   AÑADIR al final de single-product-machine.css
   Serie / modelos hermanos: pestañas compactas (enlaces a otras fichas).
   El modelo actual va marcado (.is-current) y sin enlace.
   ========================================================================== */
.cps-tpl-machine .cps-serie__tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	max-width: 900px;
	margin: 0 auto;
}
.cps-tpl-machine .cps-serie__tab {
	display: inline-flex;
	align-items: center;
	padding: 11px 20px;
	border-radius: var(--r-pill, 999px);
	border: 1.5px solid var(--line, #e8e6e1);
	background: var(--white, #fff);
	color: var(--ink-2, #2e2c29);
	font-size: var(--text-sm, .95rem);
	font-weight: 700;
	letter-spacing: -.01em;
	white-space: nowrap;
	transition: border-color .18s ease, background .18s ease, color .18s ease, transform .12s ease;
}
.cps-tpl-machine a.cps-serie__tab:hover {
	border-color: var(--ink, #181715);
	transform: translateY(-2px);
}
.cps-tpl-machine .cps-serie__tab.is-current {
	background: var(--ink, #181715);
	border-color: var(--ink, #181715);
	color: #fff;
	cursor: default;
}
.cps-tpl-machine .cps-serie__tab.is-current::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--green, #f4d300);
	margin-right: 9px;
}
@media (prefers-reduced-motion: reduce) {
	.cps-tpl-machine .cps-serie__tab { transition: none; }
}
/* ==========================================================================
   LOYAL CLUB — mensaje de puntos (plugin YITH Points & Rewards)
   Vestimos las clases del plugin (.yith-par-message) sin tocar su markup.
   Lo convertimos en una tarjeta clara: icono prominente + cabecera + puntos.
   ========================================================================== */
.cps-tpl-machine .yith-par-message,
.cps-tpl-machine .yith-par-message-product {
	position: relative;
	display: grid;
	grid-template-columns: 44px 1fr;
	align-items: center;
	gap: 14px;
	margin: 0 0 18px;
	padding: 16px 18px 16px 16px;
	background: linear-gradient(135deg, #eafaf7 0%, #f3fbf9 100%) !important;
	border: 1px solid rgba(26,143,124,.22);
	border-radius: var(--r-lg, 16px);
	color: var(--ink, #181715) !important;
	overflow: hidden;
}
/* Franja de acento a la izquierda */
.cps-tpl-machine .yith-par-message::before {
	content: "";
	position: absolute;
	top: 0; left: 0; bottom: 0;
	width: 4px;
	background: linear-gradient(180deg, #1a8f7c, #34c3a8);
}
/* Icono (badge.svg del plugin) — lo agrandamos y lo metemos en un círculo */
.cps-tpl-machine .yith-par-message img {
	grid-row: 1 / -1;
	width: 44px !important;
	max-width: 44px !important;
	height: 44px;
	margin: 0 !important;
	padding: 9px;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid rgba(26,143,124,.25);
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(26,143,124,.18);
}
/* El párrafo del plugin: ocupa la 2ª columna, texto en una línea coherente */
.cps-tpl-machine .yith-par-message p {
	grid-column: 2;
	margin: 0 !important;
	text-align: left !important;
	font-size: var(--text-sm, .95rem);
	line-height: 1.45;
	color: var(--ink-2, #2e2c29);
}
/* "LOYAL CLUB": lo separamos como cabecera en bloque, encima del texto */
.cps-tpl-machine .yith-par-message p > strong:first-child {
	display: block;
	font-size: var(--text-2xs, .72rem);
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #1a8f7c;
	margin-bottom: 3px;
}
/* Puntos y valor: destacados */
.cps-tpl-machine .yith-par-message .product_point,
.cps-tpl-machine .yith-par-message .product-point-conversion {
	font-weight: 800;
	color: var(--ink, #181715);
}
.cps-tpl-machine .yith-par-message .woocommerce-Price-amount { white-space: nowrap; }

@media (max-width: 420px) {
	.cps-tpl-machine .yith-par-message { grid-template-columns: 38px 1fr; gap: 11px; }
	.cps-tpl-machine .yith-par-message img { width: 38px !important; max-width: 38px !important; height: 38px; }
}






/* ==========================================================================
   BARRA LATERAL DE NAVEGACIÓN POR SECCIONES (lengüetas)
   Fondo de marca (amarillo), texto oscuro, icono siempre visible. El texto se
   despliega al hover y cuando la sección está activa (scroll-spy). Solo escritorio.
   ========================================================================== */
.cps-tpl-machine .cps-sidenav {
	position: fixed;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 50;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 0;
	margin: 0;
}
 
.cps-tpl-machine .cps-sidenav__tab {
	--snav-w: 46px;                 /* ancho colapsado (solo icono) */
	display: flex;
	align-items: center;
	gap: 12px;
	width: var(--snav-w);
	max-width: var(--snav-w);
	height: 46px;
	padding: 0;
	overflow: hidden;
	white-space: nowrap;
	background: var(--green, #f4d300);
	color: var(--ink, #181715);
	border-radius: 0 var(--r-pill, 999px) var(--r-pill, 999px) 0;
	box-shadow: 0 4px 14px rgba(24,23,21,.18);
	text-decoration: none;
	transition: max-width .34s var(--ease, cubic-bezier(.22,1,.36,1)), background .2s ease, box-shadow .2s ease;
}
/* Icono: caja fija, siempre visible y centrada en el ancho colapsado */
.cps-tpl-machine .cps-sidenav__icon {
	flex: 0 0 var(--snav-w);
	width: var(--snav-w);
	height: 46px;
	display: grid;
	place-items: center;
}
.cps-tpl-machine .cps-sidenav__icon svg { width: 20px; height: 20px; }
/* Etiqueta: oculta por colapso de ancho; aparece al expandir */
.cps-tpl-machine .cps-sidenav__label {
	font-size: var(--text-sm, .9rem);
	font-weight: 700;
	letter-spacing: -.01em;
	padding-right: 18px;
	opacity: 0;
	transition: opacity .2s ease .06s;
}
 
/* Expandida: al hover o cuando es la sección activa (scroll-spy) */
.cps-tpl-machine .cps-sidenav__tab:hover,
.cps-tpl-machine .cps-sidenav__tab:focus-visible,
.cps-tpl-machine .cps-sidenav__tab.is-active {
	max-width: 260px;
	background: var(--green-hover, #e3d44a);
	box-shadow: 0 6px 20px rgba(24,23,21,.24);
}
.cps-tpl-machine .cps-sidenav__tab:hover .cps-sidenav__label,
.cps-tpl-machine .cps-sidenav__tab:focus-visible .cps-sidenav__label,
.cps-tpl-machine .cps-sidenav__tab.is-active .cps-sidenav__label {
	opacity: 1;
}
/* La activa se distingue con un punto/acento a la izquierda */
.cps-tpl-machine .cps-sidenav__tab.is-active {
	background: var(--ink, #181715);
	color: var(--green, #f4d300);
}
.cps-tpl-machine .cps-sidenav__tab:focus-visible {
	outline: 2px solid var(--ink, #181715);
	outline-offset: 2px;
}
 
/* OCULTA EN MÓVIL / TABLET: solo escritorio (≥1024px). */
@media (max-width: 1024px) {
	.cps-tpl-machine .cps-sidenav { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
	.cps-tpl-machine .cps-sidenav__tab,
	.cps-tpl-machine .cps-sidenav__label { transition: none; }
}






.wck-kit__pack-media {
	background-color: transparent !important;
}

.wck-kit__pack-media img {
	object-fit: contain !important;
}
 

/* ==========================================================================
   CPS — Tabla relacional: SELECTOR DE CANTIDAD por fila (añadido)
   --------------------------------------------------------------------------
   Extiende .cps-reltable (definida arriba) para alojar un stepper de cantidad
   junto al botón "Añadir" en la columna de acciones. Solo aplica a filas de
   producto simple comprable; los variables muestran "Ver opciones" (sin qty).
   ========================================================================== */

/* Se ensancha la columna de acciones para que quepan stepper + botón.
   (Mismo selector y especificidad que la regla base; al ir después, gana.) */
.cps-tpl-machine .cps-reltable__head,
.cps-tpl-machine .cps-reltable__row {
	grid-template-columns: 72px 1fr 132px 116px 250px;
}

.cps-tpl-machine .cps-reltable__col--act {
	gap: 10px;
	flex-wrap: wrap;
}

/* Stepper de cantidad */
.cps-tpl-machine .cps-qty {
	display: inline-flex;
	align-items: center;
	height: 38px;
	border: 1px solid var(--line, #e8e6e1);
	border-radius: var(--r-pill, 999px);
	background: var(--white, #fff);
	overflow: hidden;
	flex: 0 0 auto;
}
.cps-tpl-machine .cps-qty__btn {
	width: 32px;
	height: 100%;
	border: 0;
	background: transparent;
	font-size: 18px;
	line-height: 1;
	color: var(--ink-3, #4d4a46);
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: background .15s ease, color .15s ease;
}
.cps-tpl-machine .cps-qty__btn:hover { background: var(--tint, #f7f6f2); color: var(--ink, #181715); }
.cps-tpl-machine .cps-qty__btn:active { transform: translateY(1px); }
.cps-tpl-machine .cps-qty__input {
	width: 42px;
	height: 100%;
	border: 0;
	text-align: center;
	font-size: var(--text-sm, 1rem);
	font-weight: 700;
	color: var(--ink, #181715);
	background: transparent;
	-moz-appearance: textfield;
	appearance: textfield;
}
.cps-tpl-machine .cps-qty__input::-webkit-outer-spin-button,
.cps-tpl-machine .cps-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cps-tpl-machine .cps-qty__input:focus { outline: none; }

/* Placeholder cuando un producto no tiene imagen destacada */
.cps-tpl-machine .cps-reltable__noimg {
	display: block;
	width: 100%;
	height: 100%;
	background:
		linear-gradient(135deg, var(--tint, #f7f6f2) 0%, var(--tint-2, #fcfcfa) 100%);
}

/* Utilidad de accesibilidad (fallback por si el tema no la define) */
.cps-tpl-machine .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: 0;
}

/* En móvil la fila ya se apila (grid-areas img/name/ref/price/act). El stepper
   y el botón comparten la zona "act"; permitimos que envuelvan con holgura. */
@media (max-width: 760px) {
	.cps-tpl-machine .cps-reltable__col--act {
		justify-content: flex-start;
		row-gap: 10px;
	}
	.cps-tpl-machine .cps-reltable__btn--cart { flex: 1 1 auto; }
}


/* ==========================================================================
   CPS — Tabla relacional: CHIP DE COLOR con swatch del color real
   --------------------------------------------------------------------------
   En las filas de variación, el atributo de color se pinta como pastilla
   tintada con el color real + un punto (swatch) sólido, para distinguir de un
   vistazo cada color. El HEX llega por la variable inline --swatch (ver PHP).
   Legible incluso en amarillo/blanco/barniz (texto oscuro + tinte suave).
   ========================================================================== */
.cps-tpl-machine .cps-reltable__fmt--color {
	align-items: center;
	gap: 5px;
	color: var(--ink, #181715);
	background: var(--white, #fff);                                   /* fallback sin color-mix */
	background: color-mix( in srgb, var(--swatch, #cfccc6) 12%, #fff );
	border-color: var(--line, #e8e6e1);                               /* fallback sin color-mix */
	border-color: color-mix( in srgb, var(--swatch, #cfccc6) 40%, #fff );
}
.cps-tpl-machine .cps-reltable__swatch {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--swatch, #cfccc6);
	box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, .2 );   /* aro para que blanco/claros se vean */
	flex: 0 0 auto;
}