/* Configurador visual (prototipo, solo en el clon). Base: estilos de la ficha de producto
   (copiados de camisetas/STTU169-Creator2.0.html) + estilos propios del configurador al final. */
/* red de seguridad contra css/vendor/reset.css: trae una regla
   genérica button:hover/:focus{background-color:#c36} (fucsia) que
   empata en especificidad con estilos de botón normales y a veces
   gana. Se neutraliza aquí UNA vez para toda la página, con
   nuestro naranja de marca en vez del fucsia genérico — cualquier
   botón con su propio :hover más específico (más abajo) sigue
   ganando por especificidad, esto es solo el valor por defecto. */
button:hover, button:focus,
[type=button]:hover, [type=button]:focus,
[type=submit]:hover, [type=submit]:focus{
	background-color: var(--e-global-color-accent, #EA6942); color:#fff;
}

/* ---- estilos propios de esta prueba: ficha de producto ---- */
.pp-wrap{ max-width: 1600px; margin: 0 auto; padding: 48px 40px 100px; }
@media (max-width:860px){ .pp-wrap{ padding: 24px 10px 60px; } }

/* a.pp-back por el mismo motivo que a.pp-specsheet más abajo */
a.pp-back{
	display:inline-flex; align-items:center; gap:8px;
	font-family:"Jost", sans-serif; font-size:13px; text-transform:uppercase; letter-spacing:1px;
	color: var(--e-global-color-text, #F2EEE3); opacity:.6; text-decoration:none; margin-bottom:28px;
}
/* reafirma TODA la tipografía en :hover, no solo opacity/color — el
   kit real trae su propia regla a:hover que resetea font-size/
   text-transform/letter-spacing (mismo motivo que .pp-consent a de
   más abajo), y como ambas reglas empatan en especificidad
   (clase+elemento+:hover), gana la del kit en las propiedades que
   esta no reafirma explícitamente */
a.pp-back:hover{
	font-family:"Jost", sans-serif; font-size:13px; text-transform:uppercase; letter-spacing:1px;
	color: var(--e-global-color-accent, #EA6942); opacity:1; text-decoration:none;
}


.pp-grid{ display:grid; grid-template-columns: minmax(420px, 640px) 1fr; gap:56px; align-items:start; }
@media (max-width: 860px){ .pp-grid{ grid-template-columns: 1fr; } }

/* -- columna de foto: fija en su propio "carril" mientras la columna
     de info hace scroll al lado, tal cual superiorinkprinting.com -- */
.pp-photo-col{ position: sticky; top: 32px; }
@media (max-width: 860px){ .pp-photo-col{ position: static; } }

.pp-photo{
	position:relative; background:#fff; border-radius:18px; overflow:hidden;
	aspect-ratio: 4/5; max-height: calc(100vh - 64px);
	display:flex; align-items:center; justify-content:center;
	box-shadow: 0 10px 40px -12px rgba(0,0,0,0.5);
}
/* sin esto, aspect-ratio + max-height:100vh hacen que la foto calcule
   su ancho a partir del ALTO disponible (viewport alto en móvil
   vertical), no del ancho real de la columna — el resultado es una
   foto más ancha que la pantalla y scroll horizontal en toda la
   página. width:100% fuerza que el ancho mande siempre. Tiene que ir
   DESPUÉS de la regla base de arriba (misma especificidad, gana la
   que viene después en el CSS, no basta con estar dentro de un
   @media que sí aplica). */
@media (max-width: 860px){ .pp-photo{ width:100%; max-height:none; } }
.pp-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
/* etiqueta de modelo/altura — solo aparece si esa foto trae el dato
   (ModelInformation de la API no está en todas, ~1 de cada 3) */
.pp-photo-caption{
	position:absolute; left:14px; bottom:14px; display:none;
	font-family: ui-monospace, "SF Mono", monospace; font-size:11.5px;
	color:#fff; background:rgba(32,36,29,0.55); backdrop-filter: blur(3px);
	padding:5px 10px; border-radius:100px; letter-spacing:0.02em;
}
.pp-photo-caption.is-visible{ display:block; }

.pp-gallery{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.pp-gallery-thumb{
	width:64px; height:64px; border-radius:8px; overflow:hidden; cursor:pointer;
	background:#fff; border:2px solid transparent; flex-shrink:0;
}
.pp-gallery-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.pp-gallery-thumb.is-active{ border-color: var(--e-global-color-accent, #EA6942); }
.pp-gallery-thumb-label{ display:none; }

/* -- columna de info: beige de arriba a abajo (incluye el formulario),
     mismo panel que catalogo-gorras.css pero recorriendo toda la
     columna en vez de solo envolver el formulario -- */
.pp-info{
	background: var(--e-global-color-secondary, #F2EEE3); border-radius:24px; padding:40px;
	min-width:0;
}
@media (max-width:860px){ .pp-info{ padding:24px 20px; } }
.pp-eyebrow{
	font-family:"Jost", sans-serif; font-size:18px; letter-spacing:2px; text-transform:uppercase;
	color: var(--e-global-color-accent, #EA6942); margin:0 0 6px;
}
/* h1.pp-title, no solo .pp-title: el kit real fuerza en TODO h1
   font-family Helvetica + text-transform:lowercase (pensado para
   titulares de marca) — hace falta igualar esa especificidad
   (elemento+clase) para ganarle, mismo truco que ya usa
   h3.cat-card__name en catalogo.html */
h1.pp-title{
	font-family:"Jost", sans-serif; font-weight:600; font-size:34px; line-height:1.1;
	color: var(--e-global-color-primary, #353637); margin:0 0 4px; text-transform:none; letter-spacing:0;
}
.pp-style-code{
	font-family: ui-monospace, "SF Mono", monospace; font-size:13px;
	color: var(--e-global-color-primary, #353637); opacity:.5; margin:0 0 18px;
}
.pp-desc{
	font-family:"Jost", sans-serif; font-size:15.5px; line-height:1.6;
	color: var(--e-global-color-primary, #353637); opacity:.75; max-width:52ch; margin:0 0 26px;
	list-style:none; padding:0;
}
.pp-desc li{ position:relative; padding-left:16px; }
.pp-desc li:not(:last-child){ margin:0 0 4px; }
.pp-desc li::before{ content:"–"; position:absolute; left:0; opacity:.6; }
.pp-facts{
	display:flex; flex-wrap:wrap; gap:8px 22px; margin:0 0 32px;
	font-family:"Jost", sans-serif; font-size:12.5px; color: var(--e-global-color-primary, #353637); opacity:.6;
}
.pp-facts b{ opacity:1; font-weight:600; }

/* a.pp-specsheet, no solo .pp-specsheet: el kit real fuerza en TODO
   <a> su propio font-size/family/weight (--e-global-typography-text,
   20px) — mismo truco de especificidad (elemento+clase) que
   h1.pp-title y h3.cat-card__name, si no siempre gana el kit */
a.pp-specsheet{
	display:inline-block; font-family:"Jost", sans-serif; font-weight:400; font-size:15.5px;
	color: var(--e-global-color-accent, #EA6942); text-decoration:underline; text-underline-offset:3px;
	margin:0 0 32px;
}
/* reafirma tipografía en :hover, no solo opacity — mismo motivo que
   a.pp-back:hover y .pp-consent a:hover de más abajo (el kit real
   trae su propia regla a:hover que resetea font-size a 20px, y
   como empata en especificidad con esta, gana la del kit en lo
   que esta no reafirme) */
a.pp-specsheet:hover{
	display:inline-block; font-family:"Jost", sans-serif; font-weight:400; font-size:15.5px;
	color: var(--e-global-color-accent, #EA6942); text-decoration:underline; text-underline-offset:3px;
	opacity:.8;
}

.pp-block{ margin-bottom:30px; }
.pp-block-label{
	font-family:"Jost", sans-serif; font-weight:600; font-size:13px; text-transform:uppercase;
	letter-spacing:1.5px; color: var(--e-global-color-primary, #353637); margin-bottom:14px;
	display:flex; align-items:baseline; gap:8px;
}
/* insignia numerada — igual que stepBadgeStyle del formulario general
   (Formulario Presupuesto.dc.html): cuadrado de esquina apenas
   redondeada, mono, no un circulito */
.pp-block-label .n{
	display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px;
	border-radius:3px; background: var(--e-global-color-accent, #EA6942); color:#fff;
	font-family:"JetBrains Mono", ui-monospace, monospace; font-size:13px; font-weight:700;
	flex:0 0 auto;
}

/* swatches: HEX real, no fotos en miniatura */
.pp-swatches{ display:flex; gap:10px; flex-wrap:wrap; }
.pp-swatch{
	width:34px; height:34px; border-radius:50%; cursor:pointer; border:2px solid transparent;
	/* grosor pensado para que se distinga incluso en colores claros
	   (crema, blanco) sobre el panel beige — un aro fino de opacidad
	   baja se funde con el fondo en esos casos */
	box-shadow: inset 0 0 0 2px rgba(53,54,55,0.4);
	transition: transform .12s ease, border-color .12s ease;
}
.pp-swatch:hover{ transform: scale(1.08); }
.pp-swatch.is-active{
	border-color: var(--e-global-color-accent, #EA6942);
	box-shadow: 0 0 0 2px var(--e-global-color-secondary, #F2EEE3), 0 0 0 4px var(--e-global-color-accent, #EA6942);
}
.pp-swatch-name{
	font-family: ui-monospace, "SF Mono", monospace; font-size:12.5px;
	color: var(--e-global-color-primary, #353637); opacity:.7; margin-top:10px; min-height:1.2em;
}

/* tabla de tallas: cabecera = tallas, fila de cantidad */
.pp-sizetable-wrap{ overflow-x:auto; }
table.pp-sizetable{ border-collapse:collapse; width:100%; min-width:560px; }
table.pp-sizetable th, table.pp-sizetable td{
	text-align:center; padding:9px 4px; border:1px solid rgba(53,54,55,0.15);
}
table.pp-sizetable thead th{
	font-family:"Jost", sans-serif; font-size:11.5px; text-transform:uppercase; letter-spacing:0.5px;
	color: var(--e-global-color-primary, #353637); background:#fff;
	font-weight:600;
}
table.pp-sizetable tbody th{
	text-align:center; font-family:"Jost", sans-serif; font-size:11px; text-transform:uppercase;
	color: var(--e-global-color-primary, #353637); opacity:.55; white-space:nowrap; font-weight:500;
}
table.pp-sizetable .qty-input{
	width:42px; text-align:center; font-family: ui-monospace, monospace; font-size:13px;
	border:1px solid rgba(53,54,55,0.2); border-radius:4px; padding:5px 2px;
	background:#fff; color: var(--e-global-color-primary, #353637);
}
.pp-total{
	font-family:"Jost", sans-serif; font-size:13px; color: var(--e-global-color-primary, #353637); opacity:.75;
	margin-top:10px;
}
.pp-total b{ opacity:1; color: var(--e-global-color-primary, #353637); }

/* Tarjeta seleccionable — mismo lenguaje visual que optionCardStyle()
   del formulario general (Formulario Presupuesto.dc.html): blanca
   con sombra suave en reposo, y en seleccionado pasa a fondo oscuro
   con una sombra "offset" sólida (no difuminada) + se levanta 2px.
   La usan tanto el método como los acabados — son el mismo tipo de
   control (checkbox de varias, disfrazado de tarjeta). */
.pp-optgrid{ display:grid; gap:10px; }
.pp-methods.pp-optgrid{ grid-template-columns:repeat(auto-fill, minmax(92px,1fr)); }
.pp-finishes.pp-optgrid{ grid-template-columns:repeat(auto-fill, minmax(128px,1fr)); }

.pp-optcard{
	position:relative; display:grid; grid-template-rows:34px auto; justify-items:center; align-items:center; gap:9px;
	padding:16px 10px 13px; border-radius:10px; cursor:pointer; text-align:center;
	border:1px solid rgba(53,54,55,0.16); background:#fff;
	box-shadow: 0 1px 2px rgba(53,54,55,0.08);
	transform: none;
	transition: transform .16s ease, box-shadow .16s ease, background .12s ease, border-color .12s ease;
}
.pp-optcard input{ position:absolute; opacity:0; width:0; height:0; }
.pp-optcard svg{
	width:34px; height:34px; stroke: var(--e-global-color-primary, #353637); fill:none;
	stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round;
	transition: stroke .12s ease, fill .12s ease;
}
/* icono aportado ya diseñado (relleno solido, no trazo) — se colorea
   por fill en vez de por stroke, mismo mecanismo currentColor */
/* este SVG llega ya con la forma pegada al borde del viewBox (casi
   sin margen), a diferencia de los iconos de trazo (que dejan un
   ~30% de aire alrededor) — achicado para que "pese" visualmente
   igual que el resto, no más grande */
.pp-optcard svg.icon-filled{ width:23px; height:22px; stroke:none; fill: var(--e-global-color-primary, #353637); }
.pp-optcard:has(input:checked) svg.icon-filled{ fill: var(--e-global-color-secondary, #F2EEE3); }
/* variante con trazo grueso además del relleno — el propio SVG que
   pasaron ya viene pensado así (relleno + stroke-width 4.08 en su
   escala) para que el contorno pese más */
.pp-optcard svg.icon-filled-stroked{
	width:23px; height:22px; stroke-width:4.08;
	fill: var(--e-global-color-primary, #353637); stroke: var(--e-global-color-primary, #353637);
}
.pp-optcard:has(input:checked) svg.icon-filled-stroked{
	fill: var(--e-global-color-secondary, #F2EEE3); stroke: var(--e-global-color-secondary, #F2EEE3);
}
.pp-optcard .lbl{
	font-family:"Jost", sans-serif; font-weight:600; font-size:12px; line-height:1.25;
	color: var(--e-global-color-primary, #353637);
}
.pp-optcard:hover{ border-color: rgba(53,54,55,0.3); }
.pp-optcard:has(input:checked){
	background: var(--e-global-color-primary, #353637);
	border-color: var(--e-global-color-primary, #353637);
	box-shadow: 4px 4px 0 var(--e-global-color-primary, #353637);
	transform: translateY(-2px);
}
.pp-optcard:has(input:checked) svg{ stroke: var(--e-global-color-secondary, #F2EEE3); }
.pp-optcard:has(input:checked) .lbl{ color: var(--e-global-color-secondary, #F2EEE3); }

/* -- formulario: vive dentro de .pp-info, sin panel propio -- */
.pp-formblock{ margin-top:6px; }
.pp-formblock .sub{
	font-family:"Jost", sans-serif; font-size:14px; color: var(--e-global-color-primary, #353637); opacity:.65;
	margin:0 0 22px; max-width:60ch;
}
.pp-fgrid{ display:grid; grid-template-columns:1fr 1fr; gap:16px 20px; margin-bottom:20px; }
@media (max-width:560px){ .pp-fgrid{ grid-template-columns:1fr; } }
.pp-fgrid .span2{ grid-column: 1 / -1; }
.pp-field label{
	display:block; font-family:"Jost", sans-serif; font-size:12px; text-transform:uppercase; letter-spacing:.5px;
	color: var(--e-global-color-primary, #353637); opacity:.7; margin-bottom:6px;
}
.pp-field input, .pp-field textarea{
	width:100%; font-family:"Jost", sans-serif; font-size:14.5px; padding:12px 14px;
	border:1px solid rgba(53,54,55,0.2); border-radius:8px; background:#fff; color:#353637;
}
.pp-field input:focus, .pp-field textarea:focus{ outline:2px solid var(--e-global-color-accent, #EA6942); outline-offset:1px; }
.pp-dropzone{
	position:relative; border:1.5px dashed rgba(53,54,55,0.3); border-radius:10px; padding:22px; text-align:center;
	font-family:"Jost", sans-serif; font-size:13.5px; color: var(--e-global-color-primary, #353637); opacity:.65;
	margin-bottom:20px; cursor:pointer;
}
.pp-dropzone.is-dragover{ opacity:1; border-color: var(--e-global-color-accent, #EA6942); }
.pp-filelist{ display:flex; flex-wrap:wrap; gap:8px; margin:-10px 0 14px; }
.pp-filelist:empty{ margin:0; }
.pp-filepill{
	display:flex; align-items:center; gap:6px; max-width:100%;
	font-family:"Jost", sans-serif; font-size:12.5px; color: var(--e-global-color-primary, #353637);
	background:rgba(53,54,55,0.06); border:1px solid rgba(53,54,55,0.15); border-radius:999px;
	padding:5px 8px 5px 12px;
}
.pp-filepill span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:220px; }
.pp-filepill button{
	flex:none; width:18px; height:18px; border:none; border-radius:50%; background:rgba(53,54,55,0.12);
	color: var(--e-global-color-primary, #353637); font-size:13px; line-height:1; cursor:pointer;
	display:flex; align-items:center; justify-content:center; padding:0;
}
.pp-filepill button:hover{ background: var(--e-global-color-accent, #EA6942); color:#fff; }
.pp-filenote{
	font-family:"Jost", sans-serif; font-size:12px; color: var(--e-global-color-primary, #353637); opacity:.55;
	margin:0 0 20px;
}
.pp-consent{ display:flex; gap:10px; align-items:flex-start; font-family:"Jost", sans-serif; font-size:12.5px;
	color: var(--e-global-color-primary, #353637); opacity:.75; margin-bottom:22px; }
/* .pp-consent a, no solo el enlace suelto: el kit real fuerza en
   TODO <a> su propio font-size (--e-global-typography-text, 20px),
   mismo truco de especificidad que a.pp-specsheet/a.pp-back de
   más arriba */
.pp-consent a, .pp-consent a:hover{
	font-family:"Jost", sans-serif; font-size:12.5px; font-weight:600;
	color: var(--e-global-color-accent, #EA6942); text-decoration:underline; text-underline-offset:2px;
}
.pp-submit{
	font-family:"Jost", sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:1px;
	font-size:14px; color:#fff; background: var(--e-global-color-primary, #353637);
	padding:15px 32px; border-radius:100px; border:none; cursor:pointer;
}
.pp-submit:hover{ background: var(--e-global-color-primary, #353637); color:#fff; opacity:.85; }

.pp-formmsg{
	margin-top:16px; font-family:"Jost", sans-serif; font-size:26px; font-weight:600; display:none;
}
.pp-formmsg.is-visible{ display:block; }
.pp-formmsg--ok{ color: var(--e-global-color-accent, #EA6942); }
.pp-formmsg--error{ color:#B23A3A; }
.pp-submit:disabled{ opacity:.6; cursor:default; }

/* ===================================================================
   CONFIGURADOR — estilos propios
   =================================================================== */
.cf-hidden{ display:none !important; }
.cf-grid{ grid-template-columns: minmax(420px, 680px) 1fr; }
@media (max-width: 860px){ .cf-grid{ grid-template-columns: 1fr; } }

/* -- escenario del editor: recorte de la foto de modelo alrededor de la zona -- */
.cf-stage-col{ position: sticky; top: 24px; }
@media (max-width: 860px){ .cf-stage-col{ position: static; } }
.cf-stage{
	position:relative; width:min(100%, calc((100vh - 130px) * 0.8)); margin:0 auto; aspect-ratio: 4/5;
	background:#e9e7e3; border-radius:18px; overflow:hidden; touch-action:manipulation; user-select:none; /* la página se puede desplazar con el dedo encima de la foto; el diseño y sus botones no (touch-action:none) */
	box-shadow: 0 10px 40px -12px rgba(0,0,0,0.5);
}
@media (max-width: 860px){ .cf-stage{ width:100%; } }
.cf-photo{ position:absolute; left:0; top:0; transform-origin:0 0; pointer-events:none; max-width:none; }
.cf-zone{ position:absolute; pointer-events:none; }
.cf-zone__grid{ position:absolute; inset:0; border:1.5px solid var(--cf-line, rgba(255,255,255,.85));
	background-image:
		linear-gradient(to right, var(--cf-line, rgba(255,255,255,.85)) 1px, transparent 1px),
		linear-gradient(to bottom, var(--cf-line, rgba(255,255,255,.85)) 1px, transparent 1px);
	background-size: 25% 20%; opacity:.75; }
.cf-zone__label{ position:absolute; left:0; top:-22px; font-family:"JetBrains Mono", ui-monospace, monospace; font-size:10.5px;
	color: var(--cf-line, #fff); letter-spacing:.04em; white-space:nowrap; opacity:.9; }
.cf-empty{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.cf-empty label{ pointer-events:auto; cursor:pointer;  font-family:"Jost", sans-serif; font-size:14px; color:#fff; background:rgba(32,36,29,.55); padding:8px 14px; border-radius:100px; backdrop-filter: blur(3px); }

.cf-design{ position:absolute; transform-origin:50% 50%; cursor:grab; outline:none; touch-action:none; }
.cf-design:active{ cursor:grabbing; }
.cf-design img{ width:100%; height:100%; display:block; pointer-events:none; }
.cf-design__ph{ width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
	background:rgba(255,255,255,.85); border:1.5px dashed #353637; font-family:"Jost", sans-serif; font-size:12px; color:#353637; text-align:center; padding:6px; overflow:hidden; }
.cf-design__ph b{ font-family:"JetBrains Mono", ui-monospace, monospace; font-size:13px; }
.cf-design__box{ position:absolute; inset:-4px; border:1.5px dashed rgba(255,255,255,.95); box-shadow:0 0 0 1px rgba(0,0,0,.25); pointer-events:none; }
.cf-design.is-over .cf-design__box{ border-color:#E0342B; }
.cf-design:focus-visible .cf-design__box{ border-style:solid; border-color: var(--e-global-color-accent, #EA6942); }
.cf-h{ position:absolute; width:34px; height:34px; border-radius:50%; background:#fff; color:#353637; border:none; padding:0;
	display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.3); cursor:pointer; touch-action:none; }
.cf-h svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.cf-h--del{ background:#E0342B; color:#fff; }
button.cf-h:hover, button.cf-h:focus{ background:#fff; color:#353637; }
button.cf-h--del:hover, button.cf-h--del:focus{ background:#c22a22; color:#fff; }
.cf-h--rot{ cursor:alias; } .cf-h--size{ cursor:nwse-resize; }
.cf-size{ position:absolute; transform:translate(-50%, 10px); background:#111; color:#fff; font-family:"Jost", sans-serif; font-size:13px;
	padding:6px 10px; border-radius:6px; white-space:nowrap; pointer-events:none; }
.cf-size::before{ content:""; position:absolute; left:50%; top:-5px; margin-left:-5px; border:5px solid transparent; border-top:0; border-bottom-color:#111; }
.cf-warn{ position:absolute; left:50%; bottom:16px; transform:translateX(-50%); width:max-content; max-width:calc(100% - 32px);
	background:#C8392B; color:#fff; font-family:"Jost", sans-serif; font-size:13.5px; line-height:1.35; padding:9px 14px; border-radius:8px;
	box-shadow:0 4px 18px rgba(0,0,0,.3); text-align:center; pointer-events:none; }
.cf-warn b{ font-weight:700; }
.cf-warn--soft{ background:rgba(32,36,29,.85); }

.cf-viewtabs{ display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; align-items:center; }
.cf-viewtab{ font-family:"Jost", sans-serif; font-size:14px; font-weight:600; padding:8px 16px; border-radius:100px; border:1px solid rgba(242,238,227,.35);
	background:transparent; color: var(--e-global-color-text, #F2EEE3); cursor:pointer; display:inline-flex; align-items:center; gap:8px; }
.cf-viewtab.is-active{ background: var(--e-global-color-secondary, #F2EEE3); color:#353637; border-color:transparent; }
button.cf-viewtab:hover, button.cf-viewtab:focus{ background: rgba(242,238,227,.15); color: var(--e-global-color-text, #F2EEE3); }
button.cf-viewtab.is-active:hover, button.cf-viewtab.is-active:focus{ background: var(--e-global-color-secondary, #F2EEE3); color:#353637; }
.cf-viewtab .dot{ width:8px; height:8px; border-radius:50%; background: var(--e-global-color-accent, #EA6942); display:none; }
.cf-viewtab.has-file .dot{ display:inline-block; }
.cf-stagenote{ font-family:"Jost", sans-serif; font-size:12px; color: var(--e-global-color-text, #F2EEE3); opacity:.6; margin:10px 0 0; line-height:1.5; }

/* -- panel: bloques/pasos -- */
.cf-intro{ font-family:"Jost", sans-serif; font-size:15.5px; line-height:1.55; color:#353637; opacity:.75; margin:0 0 26px; max-width:56ch; }
.cf-doors{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:560px){ .cf-doors{ grid-template-columns:1fr; } }
.cf-card{ text-align:left; padding:18px; border-radius:12px; border:1px solid rgba(53,54,55,0.16); background:#fff; cursor:pointer;
	font-family:"Jost", sans-serif; color:#353637; box-shadow:0 1px 2px rgba(53,54,55,0.08); transition: transform .16s ease, box-shadow .16s ease; }
.cf-card b{ display:block; font-size:16px; margin-bottom:4px; }
.cf-card span{ display:block; font-size:13px; opacity:.65; line-height:1.45; }
button.cf-card:hover, button.cf-card:focus{ background:#fff; color:#353637; border-color:rgba(53,54,55,0.35); }
.cf-card.is-active, button.cf-card.is-active:hover, button.cf-card.is-active:focus{ background:#353637; color:#F2EEE3; border-color:#353637; box-shadow:4px 4px 0 #353637; transform:translateY(-2px); }

.cf-q{ margin:18px 0 0; }
.cf-q__t{ font-family:"Jost", sans-serif; font-size:14px; font-weight:600; color:#353637; margin:0 0 8px; }
.cf-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.cf-chip{ font-family:"Jost", sans-serif; font-size:13.5px; padding:8px 14px; border-radius:100px; border:1px solid rgba(53,54,55,0.22);
	background:#fff; color:#353637; cursor:pointer; }
button.cf-chip:hover, button.cf-chip:focus{ background:#fff; color:#353637; border-color:#353637; }
.cf-chip.is-active, button.cf-chip.is-active:hover, button.cf-chip.is-active:focus{ background:#353637; color:#F2EEE3; border-color:#353637; }
.cf-reco{ margin-top:18px; padding:14px 16px; border-radius:10px; background:#fff; border-left:4px solid var(--e-global-color-accent, #EA6942);
	font-family:"Jost", sans-serif; font-size:14px; line-height:1.5; color:#353637; }
.cf-reco b{ font-weight:700; }
.cf-link{ font-family:"Jost", sans-serif; font-size:13.5px; background:none; border:none; padding:0; color: var(--e-global-color-accent, #EA6942);
	text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
button.cf-link:hover, button.cf-link:focus{ background:none; color: var(--e-global-color-accent, #EA6942); opacity:.8; }
a.cf-linkbtn, a.cf-linkbtn:hover{ display:block; text-decoration:none; font-family:"Jost", sans-serif; font-size:13px; color:#353637; }

.cf-garments{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-bottom:16px; }
@media (max-width:560px){ .cf-garments{ grid-template-columns:1fr 1fr; } }
.cf-garment{ padding:0; overflow:hidden; display:flex; flex-direction:column; }
.cf-garment img{ width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 25%; display:block; background:#eee; }
.cf-garment .txt{ padding:10px 12px 12px; }
.cf-garment .txt b{ font-size:14.5px; margin:0; }
.cf-garment .txt span{ font-size:12px; }

.cf-filecard{ display:flex; align-items:center; gap:12px; padding:10px; border-radius:10px; background:#fff; border:1px solid rgba(53,54,55,0.18); margin-bottom:12px; }
.cf-filecard__thumb{ width:64px; height:64px; flex:none; border-radius:6px; overflow:hidden; display:flex; align-items:center; justify-content:center;
	background: repeating-conic-gradient(#eee 0% 25%, #fff 0% 50%) 50% / 12px 12px; font-family:"JetBrains Mono", monospace; font-size:11px; color:#353637; }
.cf-filecard__thumb img{ max-width:100%; max-height:100%; }
.cf-filecard__info{ flex:1; min-width:0; font-family:"Jost", sans-serif; font-size:13px; color:#353637; }
.cf-filecard__info b{ display:block; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cf-filecard__info span{ opacity:.65; font-size:12px; }
.cf-filecard button.x{ flex:none; width:30px; height:30px; border:none; border-radius:50%; background:rgba(53,54,55,.08); color:#353637; font-size:18px; cursor:pointer; padding:0; }
.cf-filecard button.x:hover, .cf-filecard button.x:focus{ background:#E0342B; color:#fff; }
.cf-note{ font-family:"Jost", sans-serif; font-size:12.5px; line-height:1.5; color:#353637; opacity:.65; margin:6px 0 0; }
.cf-note--warn{ color:#B23A3A; opacity:1; }
.cf-sidetabs{ display:flex; gap:0; border-bottom:1px solid rgba(53,54,55,.18); margin-bottom:12px; }
.cf-sidetab{ font-family:"Jost", sans-serif; font-size:14px; font-weight:600; padding:9px 16px; background:none; border:none; border-bottom:2px solid transparent;
	color:#353637; opacity:.6; cursor:pointer; display:inline-flex; gap:6px; align-items:center; margin-bottom:-1px; }
button.cf-sidetab:hover, button.cf-sidetab:focus{ background:none; color:#353637; opacity:1; }
.cf-sidetab.is-active{ opacity:1; border-bottom-color: var(--e-global-color-accent, #EA6942); }
.cf-sidetab .dot{ width:7px; height:7px; border-radius:50%; background: var(--e-global-color-accent, #EA6942); display:none; }
.cf-sidetab.has-file .dot{ display:inline-block; }

.cf-procs{ display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; }
@media (min-width:1200px){ .cf-procs{ grid-template-columns:repeat(4, 1fr); } }
.cf-proc{ padding:0; overflow:hidden; display:flex; flex-direction:column; position:relative; }
.cf-proc__img{ aspect-ratio:1/1; background:#e4e0d6; }
.cf-proc .txt{ padding:10px 12px 12px; }
.cf-proc .txt b{ font-size:14px; }
.cf-proc .txt span{ font-size:12px; }
.cf-badge{ display:inline-block; font-family:"Jost", sans-serif; font-size:11.5px; font-weight:600; padding:2px 8px; border-radius:4px; margin-top:6px; }
.cf-badge--min{ background:#F8D3CF; color:#B23A3A; }
.cf-badge--reco{ position:absolute; top:8px; left:8px; background: var(--e-global-color-accent, #EA6942); color:#fff; }
.cf-proc.is-active .cf-badge--min{ background:#B23A3A; color:#fff; }
.cf-undecided{ margin-top:10px; }

.cf-addcolors{ margin:4px 0 16px; }
.cf-addcolors summary{ font-family:"Jost", sans-serif; font-size:13.5px; color: var(--e-global-color-accent, #EA6942); cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.cf-addcolors .pp-swatches{ margin-top:12px; }
.pp-swatch.is-mockup{ outline:2px dashed #353637; outline-offset:3px; }
.cf-block-error{ font-family:"Jost", sans-serif; font-size:14px; color:#B23A3A; background:#FBE6E3; border-radius:10px; padding:12px 14px; margin-top:12px; line-height:1.5; }
.cf-block-error button{ margin-top:8px; margin-right:8px; }
.cf-btn{ font-family:"Jost", sans-serif; font-weight:600; font-size:13px; padding:8px 14px; border-radius:100px; border:1px solid #353637; background:#fff; color:#353637; cursor:pointer; }
button.cf-btn:hover, button.cf-btn:focus{ background:#353637; color:#fff; }

/* barra fija inferior */
.cf-bar{ position:sticky; bottom:0; z-index:20; margin-top:28px; background:#353637; color:#F2EEE3; border-radius:14px; padding:12px 16px;
	display:flex; align-items:center; gap:16px; flex-wrap:wrap; box-shadow:0 -6px 24px rgba(0,0,0,.25); font-family:"Jost", sans-serif; font-size:13.5px; }
.cf-bar b{ font-size:16px; }
.cf-bar .sep{ opacity:.35; }
.cf-bar .grow{ flex:1; }
.cf-bar .pp-submit{ background: var(--e-global-color-accent, #EA6942); padding:11px 22px; font-size:13px; }
.cf-bar .pp-submit:hover{ background: var(--e-global-color-accent, #EA6942); }
.cf-summary{ font-family:"Jost", sans-serif; font-size:13.5px; line-height:1.6; color:#353637; background:#fff; border-radius:10px; padding:12px 16px; margin:0 0 20px; }
.cf-summary div{ display:flex; gap:10px; } .cf-summary dt{ color:rgba(53,54,55,.6); min-width:96px; } .cf-summary dd{ margin:0; font-weight:600; }
/* los botones del tema traen white-space:nowrap: en móvil ensanchaban la página */
.cf-card, .cf-chip{ white-space:normal; min-width:0; }
.cf-doors, .cf-garments, .cf-procs{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width:561px){ .cf-garments{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width:1200px){ .cf-procs{ grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width:560px){ .cf-doors{ grid-template-columns: minmax(0, 1fr); } }

/* diseño recortado al marco de la zona (23 oct) */
.cf-clip{ position:absolute; overflow:hidden; pointer-events:none; }
.cf-art{ position:absolute; transform-origin:50% 50%; }
.cf-art img{ width:100%; height:100%; display:block; }
.cf-scale{ font-family:"Jost", sans-serif; font-size:11.5px; line-height:1.45; color: var(--e-global-color-text, #F2EEE3); opacity:.75; margin:8px 0 0; }

/* paso 0: acordeón «Más información» */
.cf-more{ margin-top:12px; font-family:"Jost", sans-serif; color:#353637; }
.cf-more summary{ font-size:13.5px; color: var(--e-global-color-accent, #EA6942); cursor:pointer; text-decoration:underline; text-underline-offset:3px; width:max-content; }
.cf-more dl{ margin:10px 0 0; font-size:13.5px; line-height:1.5; }
.cf-more dt{ font-weight:600; } .cf-more dd{ margin:0 0 8px; opacity:.75; }
/* paso 3: cabecera con enlace y tarjetas sin descripción */
.cf-headrow{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.cf-headrow .pp-block-label{ margin-bottom:14px; }
.cf-proc .txt{ min-height:64px; }
/* ventana emergente */
.cf-modal{ position:fixed; inset:0; z-index:1000; background:rgba(20,20,20,.55); display:flex; align-items:center; justify-content:center; padding:16px; }
.cf-modal[hidden]{ display:none; }
.cf-modal__box{ position:relative; background:#fff; color:#353637; border-radius:16px; width:min(980px, 100%); max-height:calc(100vh - 32px); overflow:auto; font-family:"Jost", sans-serif; }
.cf-modal__tabs{ display:flex; flex-wrap:wrap; gap:8px; padding:18px 64px 16px 20px; border-bottom:1px solid #353637; }
.cf-modal__tab{ font-family:"Jost", sans-serif; font-size:14px; padding:9px 14px; border:1px solid rgba(53,54,55,.3); border-radius:6px; background:#fff; color:#353637; cursor:pointer; white-space:normal; }
button.cf-modal__tab:hover, button.cf-modal__tab:focus{ background:#fff; color:#353637; border-color:#353637; }
.cf-modal__tab.is-active, button.cf-modal__tab.is-active:hover{ background:#F2EEE3; border-color:#353637; }
.cf-modal__close{ position:absolute; right:14px; top:14px; width:38px; height:38px; border:none; background:none; font-size:28px; line-height:1; color:#353637; cursor:pointer; padding:0; }
button.cf-modal__close:hover, button.cf-modal__close:focus{ background:none; color: var(--e-global-color-accent, #EA6942); }
.cf-modal__body{ display:grid; grid-template-columns:1fr 1fr; gap:24px; padding:24px 20px; }
@media (max-width:700px){ .cf-modal__body{ grid-template-columns:1fr; } }
.cf-modal__text h2{ font-family:"Jost", sans-serif; font-size:32px; font-weight:600; text-transform:none; letter-spacing:0; margin:0 0 14px; color:#353637; }
.cf-modal__text p{ font-size:15.5px; line-height:1.55; margin:0 0 16px; }
.cf-modal__facts div{ background:#F2EEE3; border-radius:8px; padding:12px 14px; margin-bottom:10px; font-size:14.5px; }
.cf-modal__text .pp-submit{ margin-top:14px; }

/* subida: input visualmente oculto pero accesible; la zona es su <label> */
.cf-fileinput{ position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; clip:rect(0 0 0 0); }
.cf-dropzone{ display:flex; flex-direction:column; align-items:center; gap:10px; opacity:1; }
.cf-dropzone span:last-child{ opacity:.65; }
.cf-dropzone__btn{ font-family:"Jost", sans-serif; font-weight:600; font-size:13.5px; padding:9px 18px; border-radius:100px; background:#353637; color:#F2EEE3; }
.cf-dropzone:hover .cf-dropzone__btn{ background: var(--e-global-color-accent, #EA6942); color:#fff; }
.cf-fileinput:focus-visible + .cf-dropzone{ outline:2px solid var(--e-global-color-accent, #EA6942); outline-offset:2px; }

/* biblioteca de archivos (23 oct): «Carga tu diseño» en el paso 0 y selector en el paso 2 */
.cf-libbox{ margin-top:16px; background:#fff; border-radius:12px; padding:16px; border:1px solid rgba(53,54,55,.12); }
.cf-libbox.is-dragover, #cfLibPlace.is-dragover{ outline:2px dashed var(--e-global-color-accent, #EA6942); outline-offset:4px; }
.cf-libbox__t{ font-family:"Jost", sans-serif; font-size:15px; font-weight:600; color:#353637; margin:0 0 12px; }
.cf-lib{ display:flex; flex-wrap:wrap; gap:12px; align-items:flex-start; }
.cf-tilewrap{ position:relative; width:88px; }
.cf-tile{ width:88px; height:88px; padding:6px; border-radius:8px; border:2px solid transparent; cursor:pointer; overflow:hidden; display:flex; align-items:center; justify-content:center;
	background: repeating-conic-gradient(#e9e9e9 0% 25%, #fff 0% 50%) 50% / 14px 14px; box-shadow: inset 0 0 0 1px rgba(53,54,55,.15); position:relative; }
button.cf-tile:hover, button.cf-tile:focus{ background: repeating-conic-gradient(#e9e9e9 0% 25%, #fff 0% 50%) 50% / 14px 14px; border-color:rgba(53,54,55,.4); }
.cf-tile.is-active, button.cf-tile.is-active:hover{ border-color: var(--e-global-color-accent, #EA6942); }
.cf-tile img{ max-width:100%; max-height:100%; display:block; }
.cf-tile__ext{ font-family:"JetBrains Mono", monospace; font-size:13px; font-weight:700; color:#353637; }
.cf-tile__tag{ position:absolute; left:4px; bottom:4px; font-family:"Jost", sans-serif; font-size:10px; font-weight:600; background:#353637; color:#F2EEE3; padding:1px 6px; border-radius:3px; }
.cf-tile__x{ position:absolute; right:-7px; top:-7px; width:22px; height:22px; border-radius:50%; border:none; background:#353637; color:#fff; font-size:14px; line-height:1; padding:0; cursor:pointer; }
button.cf-tile__x:hover, button.cf-tile__x:focus{ background:#E0342B; color:#fff; }
.cf-tile__name{ display:block; font-family:"Jost", sans-serif; font-size:11px; color:#353637; opacity:.7; margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cf-upload{ height:88px; min-width:150px; padding:0 18px; border-radius:8px; background:#353637; color:#F2EEE3; display:flex; align-items:center; justify-content:center; gap:10px;
	font-family:"Jost", sans-serif; font-size:15px; font-weight:600; cursor:pointer; }
.cf-upload:hover{ background: var(--e-global-color-accent, #EA6942); color:#fff; }
.cf-upload svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.cf-lib--sm .cf-tilewrap, .cf-lib--sm .cf-tile{ width:72px; } .cf-lib--sm .cf-tile{ height:72px; } .cf-lib--sm .cf-upload{ height:72px; min-width:120px; font-size:13.5px; }
.cf-tile__ext{ background:rgba(255,255,255,.85); padding:2px 6px; border-radius:4px; }

/* precio bajo la foto (23 oct) */
.cf-price{ margin-top:12px; background: var(--e-global-color-secondary, #F2EEE3); color:#353637; border-radius:12px; padding:12px 16px; font-family:"Jost", sans-serif; font-size:14px; }
.cf-price div{ display:flex; justify-content:space-between; gap:12px; padding:4px 0; }
.cf-price div span:first-child{ color:rgba(53,54,55,.75); } /* color y no opacity: la opacidad la heredaba el (i) */
.cf-price .tot{ border-top:1px solid rgba(53,54,55,.2); margin-top:4px; padding-top:8px; font-size:15px; }
.cf-price .tot span:first-child{ color:#353637; font-weight:600; }
.cf-price p{ margin:6px 0 0; font-size:11.5px; opacity:.6; }
/* columnas: el panel de pasos nunca por debajo de 380 px; en pantallas medianas, una columna */
.pp-grid.cf-grid{ grid-template-columns: minmax(0, 1.15fr) minmax(380px, 1fr); gap:40px; }
@media (max-width: 1000px){ .pp-grid.cf-grid{ grid-template-columns: 1fr; } .cf-stage-col{ position:static; } .cf-stage{ width:min(100%, 640px); } }
/* la foto deja sitio a las pestañas y al precio dentro de la pantalla (columna fija) */
@media (min-width: 1001px){ .cf-stage{ width:min(100%, calc((100vh - 330px) * 0.8)); } .cf-stage-col{ top:16px; } }

/* diseño más grande que el máximo de la técnica: rayado naranja de «prohibido» encima (23 oct) */
.cf-art.is-over::after{ content:""; position:absolute; inset:0; pointer-events:none;
	background: repeating-linear-gradient(-45deg, rgba(234,105,66,.75) 0 10px, rgba(234,105,66,0) 10px 20px);
	outline:2px solid #EA6942; }

/* fotos reales de técnicas (23 oct): miniaturas y carrusel */
.cf-proc__img{ padding:0; overflow:hidden; }
.cf-proc__img img{ width:100%; height:100%; object-fit:cover; display:block; }
.cf-modal__photo{ position:relative; overflow:hidden; background:#e4e0d6; aspect-ratio:4/5; min-height:0; }
.cf-modal__photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .5s ease; }
.cf-modal__photo img.is-active{ opacity:1; }
.cf-car__prev, .cf-car__next{ position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:50%; border:none; padding:0;
	background:rgba(255,255,255,.85); color:#353637; font-size:26px; line-height:1; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.2); }
.cf-car__prev{ left:10px; } .cf-car__next{ right:10px; }
button.cf-car__prev:hover, button.cf-car__next:hover, button.cf-car__prev:focus, button.cf-car__next:focus{ background:#fff; color:#353637; }
.cf-car__dots{ position:absolute; left:50%; bottom:12px; transform:translateX(-50%); display:flex; gap:8px; background:rgba(32,36,29,.45); padding:6px 10px; border-radius:100px; }
.cf-car__dots button{ width:9px; height:9px; border-radius:50%; border:none; padding:0; background:rgba(255,255,255,.55); cursor:pointer; }
.cf-car__dots button.is-active, .cf-car__dots button:hover, .cf-car__dots button:focus{ background:#fff; }

/* 23 oct: tarjetas de técnica compactas (foto 1:1 pequeña, 4 por fila; 2 en móvil) */
.cf-procs, .pp-grid.cf-grid .cf-procs{ grid-template-columns: repeat(4, minmax(0, 1fr)); gap:8px; }
@media (max-width:480px){ .cf-procs, .pp-grid.cf-grid .cf-procs{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cf-proc .txt{ min-height:0; padding:8px 9px 10px; }
.cf-proc .txt b{ font-size:13px; line-height:1.25; }
.cf-proc .cf-badge{ font-size:10.5px; padding:1px 6px; }

/* notas bajo la foto: algo más grandes */
.cf-scale{ font-size:13px; line-height:1.5; opacity:.8; }
.cf-stagenote{ font-size:13px; line-height:1.5; }

/* asas fuera del marco del diseño; en PC aparecen al pasar el ratón, en táctil siempre */
@media (hover:hover) and (pointer:fine){
	.cf-design .cf-h{ opacity:0; transition:opacity .15s ease; }
	.cf-design:hover .cf-h, .cf-design:focus-within .cf-h, .cf-design.is-drag .cf-h{ opacity:1; }
}
.pp-block > .cf-libbox{ margin-top:0; }
.cf-price div span:first-child b{ font-weight:600; color:#353637; }

/* pestañas Delante/Detrás con forma completa de pestaña (24 oct) */
.cf-sidetabs{ gap:6px; border-bottom:2px solid #353637; }
.cf-sidetab{ border:1px solid rgba(53,54,55,.2); border-bottom:none; border-radius:8px 8px 0 0; background:rgba(53,54,55,.05);
	opacity:1; color:rgba(53,54,55,.7); margin-bottom:0; padding:9px 18px; }
button.cf-sidetab:hover, button.cf-sidetab:focus{ background:rgba(53,54,55,.1); color:#353637; opacity:1; }
.cf-sidetab.is-active, button.cf-sidetab.is-active:hover, button.cf-sidetab.is-active:focus{ background:#353637; color:#F2EEE3; border-color:#353637; }
.cf-sidetab .dot{ background: var(--e-global-color-accent, #EA6942); }

/* tabla de tallas sin hueco entre celdas: una sola pieza con esquinas redondeadas fuera (24 oct) */
#ppSizeRows .pp-sizegrid{ gap:1px; background:rgba(53,54,55,.15); border:1px solid rgba(53,54,55,.15); border-radius:8px; overflow:hidden; }
#ppSizeRows .pp-sizecell{ border:none; border-radius:0; background: var(--e-global-color-secondary, #F2EEE3); }
#ppSizeRows .pp-sizecell--over{ background:#F7D9CE; }
/* el campo de archivo oculto vive dentro de la caja: al pulsar «Subir nuevo» la página no salta arriba */
.cf-libbox{ position:relative; }
.cf-fileinput{ left:0; top:0; }
.cf-summary dd small{ font-weight:400; font-size:11.5px; opacity:.65; }

/* quitar fondo (24 oct) */
.cf-bgtool{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; margin-top:14px; padding:10px 12px; border-radius:8px; background:rgba(53,54,55,.05); font-family:"Jost", sans-serif; font-size:13.5px; color:#353637; }
.cf-bgtool__on{ display:flex; align-items:center; gap:8px; font-weight:600; cursor:pointer; }
.cf-bgtool__on input{ width:18px; height:18px; accent-color:#353637; }
.cf-bgtool__tol{ display:flex; align-items:center; gap:8px; }
.cf-bgtool__tol input{ width:140px; accent-color: var(--e-global-color-accent, #EA6942); }
.cf-bgtool__tol input:disabled{ opacity:.4; }
.cf-bgtool .cf-note{ flex-basis:100%; margin:0; }

/* avisos apilados sobre la foto; el de resolución en naranja (24 oct) */
.cf-warns{ position:absolute; left:50%; bottom:16px; transform:translateX(-50%); width:max-content; max-width:calc(100% - 32px); display:flex; flex-direction:column; align-items:center; gap:6px; pointer-events:none; }
.cf-warns .cf-warn{ position:static; transform:none; left:auto; bottom:auto; max-width:100%; }
.cf-warn--dpi{ background: var(--e-global-color-accent, #EA6942); }
#cfSummary + .cf-block-error{ margin:-8px 0 20px; }
/* quitar fondo: solo el interruptor hasta que se marca (24 oct) */
.cf-bgtool__more{ display:none; flex-basis:100%; }
.cf-bgtool.is-on .cf-bgtool__more{ display:block; }
.cf-bgtool__more .cf-note{ margin:8px 0 0; }

/* (i) preparación de archivos (24 oct) */
.cf-info{ position:relative; display:inline-block; margin-left:6px; vertical-align:middle; }
.cf-info__btn{ width:18px; height:18px; border-radius:50%; border:1px solid #353637; background:#fff; color:#353637; padding:0;
	font-family:Georgia, serif; font-style:italic; font-weight:700; font-size:11px; line-height:16px; cursor:pointer; }
button.cf-info__btn:hover, button.cf-info__btn:focus{ background:#353637; color:#fff; }
.cf-info__pop{ display:none; position:absolute; right:0; bottom:calc(100% + 8px); width:min(340px, 80vw); z-index:30; text-align:left;
	background:#353637; color:#F2EEE3; border-radius:10px; padding:12px 14px; font-weight:400; font-size:12.5px; line-height:1.45; box-shadow:0 8px 24px rgba(0,0,0,.25); }
.cf-info__pop b{ display:block; color:#fff; font-weight:600; margin-bottom:4px; }
.cf-info__pop ul{ margin:0 0 10px; padding-left:16px; } .cf-info__pop ul:last-child{ margin-bottom:0; }
.cf-info:hover .cf-info__pop, .cf-info:focus-within .cf-info__pop, .cf-info.is-open .cf-info__pop{ display:block; }
/* recuadro de precio: subtotal bajo la línea (24 oct) */
.cf-price .sub{ border-top:1px solid rgba(53,54,55,.2); margin-top:4px; padding-top:8px; }
.cf-price .tot{ border-top:none; margin-top:2px; padding-top:4px; }
.cf-price .cf-info__pop{ right:auto; left:0; }
/* (i) de «Carga tu diseño» (2 nov): la etiqueta va en mayúsculas; el texto de la ventanita, normal */
.pp-block-label .cf-info{ align-self:center; }
.pp-block-label .cf-info__pop{ font-family:inherit; text-transform:none; letter-spacing:normal; }
.cf-info__pop{ color:#F2EEE3 !important; } .cf-info__pop b{ color:#fff !important; }
/* resumen de «Tus datos» en dos columnas fijas: no se atropella (24 oct) */
.cf-summary div{ display:grid; grid-template-columns: 11.5em minmax(0, 1fr); gap:0 12px; padding:2px 0; }
.cf-summary dt{ min-width:0; }
@media (max-width:480px){ .cf-summary div{ grid-template-columns: 1fr; } .cf-summary dt{ font-size:12px; } .cf-summary div + div{ margin-top:4px; } }
/* «Tus datos»: línea sobre el subtotal y «Por unidad» destacado, como bajo la foto (24 oct) */
.cf-summary div.is-sep{ border-top:1px solid rgba(53,54,55,.2); margin-top:8px; padding-top:10px; }
.cf-summary div.is-tot dt{ color:#353637; font-weight:600; }
.cf-summary div.is-tot dd{ font-weight:700; font-size:15px; }
/* cuadrícula de la zona: borde exterior igual; líneas interiores al 50 % (24 oct) */
.cf-zone__grid{ background-image:none; }
.cf-zone__grid::before{ content:""; position:absolute; inset:0; opacity:.5;
	background-image:
		linear-gradient(to right, var(--cf-line, rgba(255,255,255,.85)) 1px, transparent 1px),
		linear-gradient(to bottom, var(--cf-line, rgba(255,255,255,.85)) 1px, transparent 1px);
	background-size: 25% 20%; }
/* en PC la cuadrícula de la zona solo se ve con el ratón sobre la foto (o arrastrando / con foco); en táctil, siempre (24 oct) */
@media (hover:hover) and (pointer:fine){
	.cf-zone{ opacity:0; transition:opacity .2s ease; }
	.cf-stage:hover .cf-zone, .cf-stage.is-drag .cf-zone, .cf-stage:focus-within .cf-zone{ opacity:1; }
}
/* móvil: la foto dentro del panel crema, entre el paso 1 y el 2 (24 oct) */
.cf-stage-col.is-panel{ margin:0 0 30px; }
.cf-stage-col.is-panel .cf-stage{ width:100%; }
.cf-stage-col.is-panel .cf-price{ background:#fff; }
.cf-stage-col.is-panel .cf-scale, .cf-stage-col.is-panel .cf-stagenote{ color:#353637; opacity:.7; }
/* PC: sin ratón sobre la foto solo se ve la prenda con el diseño (sin marco de puntos, medida ni cuadrícula) — 24 oct */
@media (hover:hover) and (pointer:fine){
	.cf-design__box, .cf-size{ opacity:0; transition:opacity .2s ease; }
	.cf-stage:hover .cf-design__box, .cf-stage:hover .cf-size,
	.cf-stage.is-drag .cf-design__box, .cf-stage.is-drag .cf-size,
	.cf-stage:focus-within .cf-design__box, .cf-stage:focus-within .cf-size{ opacity:1; }
}
/* plazo de producción (24 oct) */
.cf-price .plazo{ border-top:1px solid rgba(53,54,55,.12); margin-top:6px; padding-top:6px; font-size:13px; }
.cf-summary div.is-plazo{ border-top:1px solid rgba(53,54,55,.12); margin-top:8px; padding-top:8px; }
.cf-info__btn{ position:relative; top:-3px; } /* centrado óptico con el texto de la etiqueta (24 oct) */
/* colores del diseño (paso 2), mismo recuadro que «Quitar fondo» (24 oct) */
.cf-colors{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-top:10px; padding:10px 12px; border-radius:8px; background:rgba(53,54,55,.05); font-family:"Jost", sans-serif; font-size:13.5px; color:#353637; }
.cf-colors__lbl{ font-weight:600; }
.cf-colors__sw{ display:flex; gap:4px; flex-wrap:wrap; }
.cf-colors__sw i{ width:18px; height:18px; border-radius:50%; border:1px solid rgba(53,54,55,.25); }
.cf-colors__n{ display:inline-flex; align-items:center; gap:6px; margin-left:auto; }
.cf-colors__n b{ min-width:1.4em; text-align:center; font-size:15px; }
.cf-colors__n button{ width:26px; height:26px; border-radius:50%; border:1px solid #353637; background:#fff; color:#353637; font:inherit; line-height:1; cursor:pointer; padding:0; }
.cf-colors__n button:hover{ background:#353637; color:#fff; }
.cf-colors .cf-note{ flex-basis:100%; margin:0; }
/* ---- selector de prenda (24 oct): tarjeta elegida + ventana con buscador y categorías ---- */
.cf-visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.cf-pick{ display:flex; align-items:center; gap:14px; background:#fff; border-radius:12px; padding:10px; margin-bottom:16px; font-family:"Jost", sans-serif; color:#353637; }
.cf-pick img{ width:72px; height:90px; object-fit:cover; object-position:50% 25%; border-radius:8px; background:#eee; flex:none; }
.cf-pick__txt{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.cf-pick__txt b{ font-size:16px; }
.cf-pick__txt span{ font-size:12.5px; opacity:.75; }
.cf-pickbtn{ font-family:"Jost", sans-serif; font-size:14px; font-weight:600; padding:10px 16px; border-radius:8px; border:1px solid #353637; background:#353637; color:#fff; cursor:pointer; white-space:normal; }
.cf-pickbtn:hover, .cf-pickbtn:focus{ background:var(--e-global-color-accent, #EA6942); border-color:var(--e-global-color-accent, #EA6942); color:#fff; }
@media (max-width:420px){ .cf-pick{ flex-wrap:wrap; } .cf-pick .cf-pickbtn{ flex-basis:100%; } }
.cf-picker__box{ width:min(1100px, 100%); height:min(86vh, 900px); display:flex; flex-direction:column; overflow:hidden; }
.cf-picker__head{ display:grid; grid-template-columns:auto 1fr; align-items:center; gap:10px 14px; padding:18px 64px 14px 20px; border-bottom:1px solid rgba(53,54,55,.15); }
.cf-picker__head h2{ font-family:"Jost", sans-serif; font-size:24px; font-weight:600; text-transform:none; letter-spacing:0; margin:0; color:#353637; grid-column:1 / -1; }
.cf-picker__back:not([hidden]) + h2{ grid-column:2; }
.cf-picker__back{ font-family:"Jost", sans-serif; font-size:14px; border:none; background:none; color:#353637; padding:4px 0; cursor:pointer; white-space:nowrap; }
button.cf-picker__back:hover, button.cf-picker__back:focus{ background:none; color:var(--e-global-color-accent, #EA6942); }
.cf-picker__search{ grid-column:1 / -1; }
.cf-picker__search input{ width:100%; box-sizing:border-box; font-family:"Jost", sans-serif; font-size:15px; padding:11px 14px; border:1px solid rgba(53,54,55,.35); border-radius:8px; background:#fff; color:#353637; }
.cf-picker__view{ flex:1; overflow:hidden; position:relative; }
.cf-picker__track{ display:flex; width:200%; height:100%; transition:transform .3s ease; }
.cf-picker__track[data-nivel="1"]{ transform:translateX(-50%); }
.cf-picker__panel{ width:50%; height:100%; overflow:auto; padding:16px 20px 24px; box-sizing:border-box; }
.cf-picker__cat{ display:flex; justify-content:space-between; align-items:center; width:100%; font-family:"Jost", sans-serif; font-size:16px; text-align:left; padding:14px 16px; margin-bottom:8px; border:1px solid rgba(53,54,55,.2); border-radius:10px; background:#fff; color:#353637; cursor:pointer; white-space:normal; }
button.cf-picker__cat:hover, button.cf-picker__cat:focus{ background:#F2EEE3; color:#353637; border-color:#353637; }
.cf-picker__cat small{ font-size:13px; opacity:.6; }
.cf-picker__count{ font-family:"Jost", sans-serif; font-size:14px; margin:0 0 12px; color:#353637; }
.cf-picker__grid{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; }
@media (max-width:760px){ .cf-picker__grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
.cf-garment__cols{ display:block; margin-top:2px; opacity:.6; }
@media (max-width:600px){ .cf-picker{ padding:0; } .cf-picker__box{ width:100%; height:100%; max-height:none; border-radius:0; } }
.cf-price .cf-price__main{ align-items:flex-start; }
.cf-price .cf-price__main span:first-child{ opacity:1; color:#353637; line-height:1.45; }
.cf-picker__back[hidden]{ display:none; }
/* categorías y subcategorías con foto (24 oct) */
.cf-picker__cards{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; }
@media (max-width:760px){ .cf-picker__cards{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
.cf-picker__group{ padding:0; overflow:hidden; display:flex; flex-direction:column; text-align:left; }
.cf-picker__group img{ width:100%; aspect-ratio:1/1; object-fit:cover; object-position:50% 22%; display:block; background:#eee; }
.cf-picker__group .txt{ padding:10px 12px 12px; display:flex; flex-direction:column; gap:2px; }
.cf-picker__group .txt b{ font-size:15px; }
.cf-picker__group .txt span{ font-size:12.5px; opacity:.65; }
.cf-picker__search{ margin-right:-44px; } /* ocupa también el hueco bajo la «×» */
/* 3 o más pestañas (zonas de pecho, pantalones): reparten el ancho y en móvil bajan de línea (24 oct) */
.cf-sidetabs--n .cf-sidetab{ flex:1 1 0; padding-left:10px; padding-right:10px; white-space:normal; line-height:1.2; }
.cf-sidetab{ display:inline-flex; align-items:center; justify-content:center; gap:6px; }
#cfProcAviso{ margin:10px 0 0; }
/* (i) al final de las pestañas (24 oct) */
.cf-sidetabs__info{ margin-left:auto; align-self:center; padding:0 4px 0 8px; }
.cf-sidetabs__info .cf-info{ margin-left:0; }
.cf-sidetabs__info .cf-info__pop{ right:0; left:auto; bottom:auto; top:calc(100% + 8px); }
.cf-sidetabs--n .cf-sidetabs__info{ flex:none; }
/* resultados con filtros (24 oct): género a la izquierda, forma arriba; en móvil, todo arriba en botones */
.cf-picker__res{ display:grid; grid-template-columns:150px minmax(0, 1fr); gap:18px; align-items:start; }
.cf-picker__side{ display:flex; flex-direction:column; gap:6px; position:sticky; top:0; }
.cf-picker__chips{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.cf-picker__chip{ display:flex; justify-content:space-between; align-items:center; gap:8px; font-family:"Jost", sans-serif; font-size:14px; padding:8px 12px; border:1px solid rgba(53,54,55,.25); border-radius:8px; background:#fff; color:#353637; cursor:pointer; white-space:nowrap; }
.cf-picker__chips .cf-picker__chip{ border-radius:999px; }
.cf-picker__chip small{ font-size:12px; opacity:.55; }
button.cf-picker__chip:hover, button.cf-picker__chip:focus{ background:#F2EEE3; color:#353637; border-color:#353637; }
.cf-picker__chip.is-on, button.cf-picker__chip.is-on:hover{ background:#353637; color:#fff; border-color:#353637; }
.cf-picker__chip.is-on small{ opacity:.8; }
.cf-picker__res .cf-picker__grid{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
@media (max-width:900px){ .cf-picker__res .cf-picker__grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); } }
@media (max-width:760px){
	.cf-picker__res{ grid-template-columns:1fr; gap:0; }
	.cf-picker__side{ position:static; flex-direction:row; flex-wrap:wrap; margin-bottom:6px; }
	.cf-picker__res .cf-picker__grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

/* ==== selector de prenda = mismos estilos que catalogo.html (copiados el 24 oct; si cambian allí, copiar aquí) ==== */
/* --- inicio copia --- */
/* ---- layout: barra lateral + grid, como el widget real ---- */
		.cat-layout{ display:grid; grid-template-columns:220px 1fr; gap:40px; align-items:start; }
		@media (max-width:820px){ .cat-layout{ grid-template-columns:1fr; } }

		.cat-search{ position:relative; margin:0 0 16px; }
		.cat-search input{
			width:100%; font-family:"Jost", sans-serif; font-size:13.5px; padding:10px 34px 10px 14px;
			border:1px solid rgba(53,54,55,0.2); border-radius:8px; background:#fff;
			color: var(--e-global-color-primary, #353637); box-sizing:border-box;
		}
		.cat-search input::placeholder{ color: var(--e-global-color-primary, #353637); opacity:.45; }
		.cat-search input:focus{ outline:2px solid var(--e-global-color-accent, #EA6942); outline-offset:1px; }
		.cat-search__icon{
			position:absolute; right:11px; top:50%; transform:translateY(-50%); width:16px; height:16px;
			fill:none; stroke: var(--e-global-color-primary, #353637); stroke-width:1.8; stroke-linecap:round;
			opacity:.45; pointer-events:none;
		}

		.cat-back{
			display:block; margin:0 0 10px; font-family:"Jost", sans-serif; font-weight:600; font-size:12.5px;
			text-transform:uppercase; letter-spacing:.5px; color: var(--e-global-color-primary, #353637);
			opacity:.55; background:none; border:none; cursor:pointer; padding:0;
		}
		/* específico para ganarle a la red de seguridad button:hover de
		   arriba (que rellena de color de fondo) — este es un enlace de
		   texto, solo cambia a naranja, no se convierte en una caja */
		.cat-back:hover{ background:none; color: var(--e-global-color-accent, #EA6942); opacity:1; }
		.cat-clear{
			display:block; margin:0 0 24px; font-family:"Jost", sans-serif; font-weight:600; font-size:12.5px;
			text-transform:uppercase; letter-spacing:.5px; color: var(--e-global-color-accent, #EA6942);
			background:none; border:none; cursor:pointer; text-decoration:underline; text-underline-offset:3px;
			padding:0; opacity:0; pointer-events:none; transition:opacity .15s ease;
		}
		.cat-clear.is-visible{ opacity:1; pointer-events:auto; }
		.cat-clear:hover{ background:none; color: var(--e-global-color-accent, #EA6942); }

		/* ---- botón "Filtros" tipo hamburguesa: oculto en escritorio (las
		   facetas ya se ven siempre en la barra lateral), visible solo en
		   pantallas estrechas (ver @media más abajo), donde .cat-facets
		   empieza oculto y este botón lo despliega/oculta. ---- */
		.cat-mobile-filter-toggle{
			display:none; align-items:center; gap:8px; width:100%; margin:0 0 16px; padding:11px 16px;
			font-family:"Jost", sans-serif; font-weight:600; font-size:13px; text-transform:uppercase; letter-spacing:.5px;
			color: var(--e-global-color-primary, #353637); background:#fff;
			border:1.5px solid rgba(53,54,55,0.2); border-radius:8px; cursor:pointer;
		}
		.cat-mobile-filter-toggle svg{ width:16px; height:16px; flex:0 0 auto; stroke: var(--e-global-color-primary, #353637); stroke-width:1.8; stroke-linecap:round; fill:none; }
		.cat-mobile-filter-toggle:hover{ background:#fff; color: var(--e-global-color-accent, #EA6942); border-color: var(--e-global-color-accent, #EA6942); }
		.cat-mobile-filter-toggle:hover svg{ stroke: var(--e-global-color-accent, #EA6942); }
		@media (max-width:820px){
			.cat-mobile-filter-toggle{ display:flex; }
			.cat-facets{ display:none; }
			.cat-facets.is-open{ display:block; }
		}

		/* ---- barra lateral de facetas, en acordeón ---- */
		.cat-sidebar{ display:flex; flex-direction:column; gap:4px; }
		.cat-facet{ border-bottom:1px solid rgba(53,54,55,0.14); padding:16px 0; }
		.cat-facet:first-child{ padding-top:0; }
		.cat-facet__head{
			display:flex; align-items:center; justify-content:space-between; cursor:pointer;
			font-family:"Jost", sans-serif; font-weight:600; font-size:14.5px; color: var(--e-global-color-primary, #353637);
		}
		.cat-facet__toggle{
			width:22px; height:22px; border-radius:50%; border:1px solid rgba(53,54,55,0.3);
			display:flex; align-items:center; justify-content:center; flex:0 0 auto;
			font-size:13px; color: var(--e-global-color-primary, #353637); line-height:1;
		}
		.cat-facet__body{ margin-top:14px; display:flex; flex-direction:column; gap:11px; }
		.cat-facet.is-collapsed .cat-facet__body{ display:none; }
		.cat-facet.is-collapsed .cat-facet__toggle{ }
		.cat-facet__toggle::before{ content:"\2212"; } /* − */
		.cat-facet.is-collapsed .cat-facet__toggle::before{ content:"+"; }

		.cat-check{ display:flex; align-items:center; gap:10px; cursor:pointer; }
		.cat-check input{ position:absolute; opacity:0; width:0; height:0; }
		.cat-check .lbl{
			font-family:"Jost", sans-serif; font-size:13.5px; color: var(--e-global-color-primary, #353637);
		}
		.cat-check .count{
			font-family:"JetBrains Mono", monospace; font-size:10.5px; color: var(--e-global-color-primary, #353637);
			opacity:.4; margin-left:auto;
		}
		.cat-check .box{
			width:15px; height:15px; border-radius:4px; border:1.5px solid rgba(53,54,55,0.35); flex:0 0 auto;
		}
		.cat-check input:checked ~ .box{ background: var(--e-global-color-accent,#EA6942); border-color: var(--e-global-color-accent,#EA6942); }

		/* faceta "Color" (tono exacto, 117 valores) — matriz de círculos,
		   6 por fila, sin nombre en cada fila (con 117 no cabría); el
		   nombre del elegido se muestra junto al título de la faceta
		   (ver #catColorExactoSelected) y como title="" (tooltip nativo) */
		.cat-swatchgrid{ display:grid; grid-template-columns:repeat(10, 1fr); gap:10px 6px; }
		.cat-swatch{
			width:100%; aspect-ratio:1; border-radius:50%; cursor:pointer; padding:0;
			border:2px solid transparent; box-shadow: inset 0 0 0 1.5px rgba(53,54,55,0.3);
		}
		.cat-swatch.is-selected{ border-color: var(--e-global-color-primary,#353637); }
		.cat-facet__selected{
			font-family:"Jost", sans-serif; font-weight:400; font-size:13px;
			color: var(--e-global-color-accent, #EA6942); margin-left:2px;
		}

		.cat-meta{
			font-family:"Jost", sans-serif; font-size:13.5px; color: var(--e-global-color-primary, #353637); opacity:.6;
			margin-bottom:20px;
		}

		/* ---- grid de fichas: nombre arriba de la foto ---- */
		.cat-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:20px; }
		.cat-card{
			background:#fff; border:1px solid rgba(53,54,55,0.1); box-shadow:0 2px 10px rgba(53,54,55,0.08);
			border-radius:14px; overflow:hidden; display:flex; flex-direction:column; text-decoration:none;
			transition: opacity .15s ease, transform .15s ease;
		}
		.cat-card:hover{ transform:translateY(-2px); }
		.cat-card.is-hidden{ display:none; }
		/* h3.cat-card__name (no solo .cat-card__name): el kit real fuerza
		   h3{font-size:132px} en todo el sitio — hace falta igualar esa
		   especificidad (elemento+clase) para ganarle, mismo truco que ya
		   usa catalogo-gorras.css con .gorra-card__name */
		h3.cat-card__name{
			font-family:"Jost", sans-serif; font-weight:600; font-size:15px; text-transform:none; letter-spacing:0;
			color: var(--e-global-color-primary, #353637);
			margin:0; padding:14px 16px 10px;
		}
		.cat-card__imgwrap{ background:#f4f1e9; aspect-ratio:4/5; overflow:hidden; }
		.cat-card__imgwrap img{ width:100%; height:100%; object-fit:cover; display:block; }
		/* fotos de modelo de Oltex (2:3) en la tarjeta 4:5: se recorta por abajo para no cortar la cabeza */
		.cat-card__imgwrap--top img{ object-position:50% 6%; }
		/* gorras: fotos casi cuadradas, no retrato — con "cover" se
		   recortaban. Mismo criterio que la página real de gorras
		   (catalogo-gorras.css): fondo blanco, la gorra entera sin
		   recortar, mismo alto de tarjeta que las de al lado. */
		.cat-card__imgwrap--contain{ background:#fff; display:flex; align-items:center; justify-content:center; padding:18px; box-sizing:border-box; }
		.cat-card__imgwrap--contain img{ width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; }
		/* apilado (fit+colores arriba, swatches abajo) en vez de codo a codo:
		   con "Relaxed Medium Fit" partiéndose en 3 líneas al compartir fila
		   con los swatches, así siempre tiene el ancho entero de la tarjeta */
		.cat-card__foot{ padding:12px 16px 16px; display:flex; flex-direction:column; gap:8px; }
		.cat-card__desc{
			font-family:"Jost", sans-serif; font-size:12.5px; line-height:1.4; margin:0;
			color: var(--e-global-color-primary, #353637); opacity:.65;
		}
		.cat-card__tags{
			font-family:"JetBrains Mono", monospace; font-size:9.5px; text-transform:uppercase; letter-spacing:.3px;
			color: var(--e-global-color-primary, #353637); opacity:.5; white-space:nowrap;
		}
		.cat-card__swatches{ display:flex; gap:5px; flex:0 0 auto; }
		.cat-card__swatch{ width:14px; height:14px; border-radius:50%; box-shadow: inset 0 0 0 1px rgba(53,54,55,0.3); }
		/* gorras: la foto real del color en vez de un punto de HEX (Odoo
		   no da HexaColorCode) — cuadrado en vez de círculo, para que no
		   se confunda con un swatch de color de verdad */
		.cat-card__swatch--photo{
			border-radius:3px; background-size:contain; background-repeat:no-repeat; background-position:center; background-color:#fff;
			box-shadow: inset 0 0 0 1px rgba(53,54,55,0.25);
		}
		.cat-card__more{
			font-family:"JetBrains Mono", monospace; font-size:10px; color: var(--e-global-color-primary, #353637);
			opacity:.5; margin-left:2px; align-self:center;
		}
		/* En móvil, con la tarjeta a la mitad de ancho, los puntitos de color
		   no caben con holgura (apretados con muchos colores, y con pocos
		   dejaban un hueco/altura inconsistente entre tarjetas al ocultarlos
		   solo a veces). El nº de colores ya se lee en .cat-card__tags ("58
		   colores") justo encima, así que en móvil quitamos la fila de
		   círculos siempre, para todas las tarjetas por igual. */
		@media (max-width:700px){
			.cat-card__swatches{ display:none; }
		}

		.cat-empty{
			display:none; text-align:center; padding:60px 20px; font-family:"Jost", sans-serif;
			color: var(--e-global-color-primary, #353637); opacity:.6;
		}
		.cat-empty.is-visible{ display:block; }

		/* --- fin copia --- */
.cf-picker__scroll{ flex:1; overflow:auto; padding:20px 24px 28px; }
.cf-picker__head{ display:flex; align-items:center; padding:18px 64px 14px 24px; border-bottom:1px solid rgba(53,54,55,.12); }
.cf-picker .cat-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px; }
.cf-picker .cat-card{ cursor:pointer; }
.cf-picker .cat-card.is-active{ outline:2px solid #353637; outline-offset:-2px; }
.cf-picker .cat-card__imgwrap img{ object-position:50% 18%; }
.cf-picker .cat-swatch{ border-width:2px; }
@media (max-width:700px){ .cf-picker .cat-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; } .cf-picker__scroll{ padding:14px 14px 24px; } }
/* botón prenda entera / acercar (zonas pequeñas, 24 oct) */
.cf-zoombtn{ position:absolute; top:10px; right:10px; z-index:6; display:inline-flex; align-items:center; gap:6px; font-family:"Jost", sans-serif; font-size:12.5px; font-weight:600; padding:7px 11px; border-radius:999px; border:none; background:rgba(255,255,255,.92); color:#353637; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.18); }
.cf-zoombtn svg{ width:16px; height:16px; fill:none; stroke:#353637; stroke-width:2; stroke-linecap:round; }
button.cf-zoombtn:hover, button.cf-zoombtn:focus{ background:#fff; color:var(--e-global-color-accent, #EA6942); }
button.cf-zoombtn:hover svg{ stroke:var(--e-global-color-accent, #EA6942); }
/* cuadrícula en centímetros reales: cuadros de 5 × 5 cm (antes 4 × 5 cuadros fijos, midiera lo que midiera la zona) */
.cf-zone__grid::before{ background-size: var(--cf-celda, 25%) var(--cf-celda, 20%); }
.cf-bgtool__info{ display:inline-flex; align-items:center; margin-left:-10px; }
.cf-bgtool__info .cf-info__pop{ left:0; right:auto; }
/* técnica dentro de la pestaña (24 oct) */
.cf-sidetab__txt{ display:flex; flex-direction:column; align-items:center; line-height:1.15; }
.cf-sidetab__tec{ font-size:11.5px; font-weight:400; opacity:.8; }
.cf-sidetab__tec:empty{ display:none; }
.cf-sidetab.falta-tec .cf-sidetab__tec{ color:var(--e-global-color-accent, #EA6942); opacity:1; font-weight:600; }
.cf-sidetab.is-active.falta-tec .cf-sidetab__tec{ color:#F7A98F; }
/* aviso «Elige técnica» sobre la foto (24 oct): botón, lleva al paso 3 */
.cf-warns .cf-warn--tec{ pointer-events:auto; cursor:pointer; border:none; font-family:"Jost", sans-serif; background:#353637; color:#fff; }
button.cf-warn--tec:hover, button.cf-warn--tec:focus{ background:var(--e-global-color-accent, #EA6942); color:#fff; }
/* «Elige técnica» arriba, centrado, claro con borde oscuro: se ve sobre cualquier color de prenda (usuario, 24 oct) */
.cf-warntec{ position:absolute; top:12px; left:50%; transform:translateX(-50%); z-index:7; display:inline-flex; align-items:center; gap:8px;
	font-family:"Jost", sans-serif; font-size:13.5px; font-weight:600; padding:8px 14px; border-radius:999px;
	background:#F2EEE3; color:#353637; border:1.5px solid #353637; box-shadow:0 3px 10px rgba(0,0,0,.22); cursor:pointer; white-space:nowrap; }
.cf-warntec::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--e-global-color-accent, #EA6942); }
button.cf-warntec:hover, button.cf-warntec:focus{ background:#fff; color:#353637; border-color:var(--e-global-color-accent, #EA6942); }
/* con el botón de zoom (arriba a la derecha) a la vista, el aviso baja un poco en móvil para no chocar */
@media (max-width:480px){ .cf-warntec{ top:52px; } }
/* «Elige técnica» junto al rótulo de la zona (posición desde JS) + latido corto al aparecer (24 oct) */
.cf-warntec{ top:0; left:0; transform:translateX(-100%); font-size:12.5px; padding:6px 12px; }
@media (max-width:480px){ .cf-warntec{ top:0; } }
.cf-warntec.cf-late{ animation:cf-late 1s ease-in-out 3; }
@keyframes cf-late{ 0%, 100%{ box-shadow:0 3px 10px rgba(0,0,0,.22), 0 0 0 0 rgba(234,105,66,.7); } 50%{ box-shadow:0 3px 10px rgba(0,0,0,.22), 0 0 0 8px rgba(234,105,66,0); } }
@media (prefers-reduced-motion: reduce){ .cf-warntec.cf-late{ animation:none; } }
.cf-warntec{ transform:translateX(-50%); } /* centrado sobre el cuadro (24 oct) */
/* fila final: «Incluye preparación (i)» a la izquierda; plazo y su valor juntos a la derecha (24 oct) */
.cf-price .plazo{ align-items:center; }
.cf-price .plazo .cf-price__plazo{ opacity:1; color:#353637; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.cf-price .plazo .cf-price__plazo b{ font-weight:600; }
.cf-price .plazo .cf-price__plazo .cf-info{ margin-left:0; }
/* simulación de impresión real (DTF/DTG): etiqueta discreta arriba a la izquierda de la foto (24 oct) */
.cf-simul{ position:absolute; left:10px; top:10px; z-index:5; font-family:"Jost", sans-serif; font-size:11.5px; font-weight:600; padding:4px 9px; border-radius:999px; background:rgba(255,255,255,.9); color:#353637; pointer-events:none; }
/* ventanitas (i): siempre parten líneas (no heredan nowrap de la fila) y se recolocan para caber en pantalla (24 oct) */
.cf-info__pop{ white-space:normal; transform:translateX(var(--cf-pop-dx, 0px)); max-width:calc(100vw - 20px); box-sizing:border-box; }
.cf-info--abajo .cf-info__pop{ bottom:auto; top:calc(100% + 8px); }
.cf-info--arriba .cf-info__pop{ top:auto !important; bottom:calc(100% + 8px) !important; }
/* gorras y gorros: sin cuadrícula de 5 cm, solo el marco (usuario, 24 oct) */
.cf-zone.cf-sin-rejilla .cf-zone__grid::before{ display:none; }
/* gorros: foto con modelo (sin diseño): sin zona */
.cf-stage.cf-con-modelo .cf-zone{ display:none; }
/* pedido mínimo del configurador, en la tarjeta «Quiero montarlo yo» (usuario, 24 oct) */
.cf-card span.cf-card__min{ margin-top:6px; font-size:12px; opacity:.8; color:var(--e-global-color-accent, #EA6942); }
/* campos obligatorios del formulario (usuario, 24 oct) */
.pp-req{ color:var(--e-global-color-accent, #EA6942); font-weight:600; }
.pp-reqnote{ font-size:12px; opacity:.75; margin:4px 0 10px; }
/* guía vertical en el centro de la zona: aparece al arrastrar cuando el diseño se engancha al centro (26 oct) */
.cf-zone__guia{ position:absolute; top:0; bottom:0; left:50%; width:0; border-left:1.5px dashed var(--e-global-color-accent, #EA6942); opacity:0; pointer-events:none; transition:opacity .12s; }
.cf-zone.cf-guia-on .cf-zone__guia{ opacity:1; }
/* «Mínimo N uds.» bajo la foto, en el rojo del aviso (26 oct) */
.cf-price__min{ color:#B23A3A; }
/* nota bajo «Comentarios» (26 oct) */
.pp-fieldnote{ font-size:12px; opacity:.75; margin:6px 0 0; line-height:1.45; }
/* diseño de la otra pestaña de la misma foto (pecho izq./der.): visible pero sin tocar (26 oct) */
.cf-clip--otra{ pointer-events:none; }
.cf-clip--otra .cf-art{ pointer-events:auto; cursor:pointer; }
/* (i) de «Colores del diseño» (26 oct): pegada a la etiqueta */
.cf-colors__info{ display:inline-flex; align-items:center; margin-left:-6px; }
.cf-colors__info:empty{ display:none; }
/* (i) siempre por encima de todo al abrirse (26 oct): la columna de la foto es sticky (crea su propio nivel) y la
   columna de la derecha, que va después, la pisaba; la columna sube de nivel mientras una (i) suya está abierta */
.cf-info__pop{ z-index:1000; }
.cf-stage-col:has(.cf-info:hover), .cf-stage-col:has(.cf-info:focus-within), .cf-stage-col:has(.cf-info.is-open){ z-index:60; }
.pp-block:has(.cf-info:hover), .pp-block:has(.cf-info:focus-within), .pp-block:has(.cf-info.is-open){ position:relative; z-index:60; }

/* confirmación al borrar un archivo puesto en el diseño */
.cf-confirm__box{ width:min(380px, 100%); padding:26px 24px 20px; text-align:center; }
.cf-confirm__text{ margin:0 0 20px; font-size:17px; line-height:1.4; }
.cf-confirm__btns{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.cf-confirm__btns .cf-pickbtn{ min-width:120px; }
.cf-confirm__no{ background:#fff; color:#353637; }
.cf-price__calc{ color:#8a8a8a; font-style:italic; }
.cf-empty label:hover{ background:rgba(32,36,29,.75); }
/* táctil (usuario, 30 oct): sin «hover», el recuadro de puntos y la medida solo con el diseño seleccionado (tocarlo);
   se suelta tocando fuera, tocándolo otra vez o desplazando la página. Si se pasa del tamaño máximo, el marco rojo se queda */
@media (hover:none), (pointer:coarse){
	.cf-design__box, .cf-size{ opacity:0; transition:opacity .2s ease; }
	.cf-stage.is-activo .cf-design__box, .cf-stage.is-activo .cf-size, .cf-stage.is-drag .cf-design__box,
	.cf-design.is-over .cf-design__box{ opacity:1; }
}
/* «Elige técnica» en el recuadro de precio bajo la foto: botón naranja en negrita (usuario, 30 oct) */
button.cf-price__tec{ font-family:"Jost", sans-serif; font-size:14px; font-weight:700; color:var(--e-global-color-accent, #EA6942); background:transparent;
	border:1.5px solid var(--e-global-color-accent, #EA6942); border-radius:100px; padding:4px 12px; cursor:pointer; line-height:1.3; white-space:nowrap; }
button.cf-price__tec:hover, button.cf-price__tec:focus{ background:var(--e-global-color-accent, #EA6942); color:#fff; }
/* «Unidades» bajo el precio (usuario, 30 oct) */
.cf-qty{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin:10px 0 4px; font-family:"Jost", sans-serif; }
.cf-qty__lab{ font-size:14px; font-weight:600; color:#353637; }
.cf-qty__chips{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.cf-qty__chips button{ font-family:"Jost", sans-serif; font-size:14px; font-weight:600; min-width:46px; padding:6px 10px; border-radius:100px;
	border:1.5px solid #353637; background:#fff; color:#353637; cursor:pointer; line-height:1.2; }
.cf-qty__chips button.is-active{ background:#353637; color:#fff; }
.cf-qty__chips button:hover:not(:disabled){ border-color:var(--e-global-color-accent, #EA6942); }
.cf-qty__chips button:disabled{ opacity:.45; cursor:default; }
.cf-qty__chips input{ width:76px; font-family:"Jost", sans-serif; font-size:14px; padding:6px 10px; border-radius:100px; border:1.5px solid #353637; background:#fff; color:#353637; }
.cf-qty__chips input:disabled{ opacity:.6; }
.cf-qty__nota{ flex-basis:100%; margin:0; font-size:12.5px; opacity:.75; }
.cf-opcional{ font-weight:400; opacity:.6; text-transform:none; letter-spacing:0; }
/* pestañas encima de la foto: solo en móvil, donde las del paso 2 quedan lejos (usuario, 30 oct) */
.cf-sidetabs--foto{ display:none; }
@media (max-width:1000px){ .cf-sidetabs--foto{ display:flex; margin:0 auto 10px; max-width:640px; } .cf-sidetabs--foto:empty{ display:none; } }
/* táctil: con un diseño puesto, la cuadrícula y la zona se esconden y solo salen mientras se arrastra; sin diseño, se ven (usuario, 30 oct) */
@media (hover:none), (pointer:coarse){
	.cf-zone{ transition:opacity .2s ease; }
	.cf-stage.con-diseno .cf-zone{ opacity:0; }
	.cf-stage.con-diseno.is-drag .cf-zone{ opacity:1; }
}
/* botón de enviar mientras se envía (usuario, 30 oct): sin apagarse, con un círculo girando */
.pp-submit.is-enviando, .pp-submit.is-enviando:disabled{ opacity:1; cursor:progress; display:inline-flex; align-items:center; justify-content:center; gap:10px; }
.pp-submit.is-enviando::before{ content:""; width:15px; height:15px; border-radius:50%; border:2px solid currentColor; border-right-color:transparent; animation:cf-gira .8s linear infinite; }
@keyframes cf-gira{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .pp-submit.is-enviando::before{ animation-duration:2.4s; } }
/* mensaje de «Solicitud enviada» / error: en iPhone las líneas se pisaban (26 px sin interlineado propio; usuario, 30 oct) */
p.pp-formmsg{ font-size:20px; line-height:1.35; }
@media (max-width:600px){ p.pp-formmsg{ font-size:17px; } }
/* selector de prenda: título, foto y pie alineados en cada fila aunque un nombre o una descripción ocupe 2 líneas (usuario, 30 oct) */
@supports (grid-template-rows: subgrid){
	#cfPicker .cat-card{ display:grid; grid-row:span 3; grid-template-rows:subgrid; grid-template-columns:minmax(0,1fr); row-gap:0; min-width:0; }
	#cfPicker .cat-card__tags{ white-space:normal; }
	#cfPicker .cat-card.is-hidden{ display:none; }
	#cfPicker h3.cat-card__name{ align-self:end; }
}
/* paso 4: «Poner todo a 0» junto al total (usuario, 2 nov) */
button.cf-reset-tallas{ font-family:"Jost", sans-serif; font-size:13px; color:var(--e-global-color-primary, #353637); background:transparent; border:0;
	padding:0 0 0 10px; margin:0; cursor:pointer; text-decoration:underline; text-underline-offset:2px; opacity:1; }
button.cf-reset-tallas:hover, button.cf-reset-tallas:focus{ color:var(--e-global-color-accent, #EA6942); }
/* subtítulo del paso 4, pequeño como el del paso 5 (usuario, 2 nov) */
#cfPaso4Sub{ font-family:"Jost", sans-serif; font-size:14px; line-height:1.4; color:var(--e-global-color-primary, #353637); opacity:.65; margin:0 0 12px; }
/* (i) en móvil: ventana centrada en vez de globo (usuario, 2 nov) */
@media (hover: none), (max-width: 760px){
	.cf-info .cf-info__pop, .cf-info:hover .cf-info__pop, .cf-info:focus-within .cf-info__pop, .cf-info.is-open .cf-info__pop{ display:none !important; }
}
.cf-infomodal__box{ width:min(440px, 100%); padding:22px 22px 20px; }
.cf-infomodal__title{ margin:0 44px 12px 0; font-size:18px; font-weight:600; line-height:1.3; }
.cf-infomodal__body{ font-size:15px; line-height:1.5; }
.cf-infomodal__body b{ display:block; font-weight:600; margin:0 0 4px; }
.cf-infomodal__body ul{ margin:0 0 12px; padding-left:18px; } .cf-infomodal__body ul:last-child{ margin-bottom:0; }
/* enlace «¿Otra prenda con el mismo diseño?» en el mensaje de enviado (usuario, 2 nov) */
/* botón con borde naranja, como «Elige técnica» (usuario, 2 nov) */
button.cf-otra-prenda{ display:block; margin-top:12px; font-family:"Jost", sans-serif; font-size:15px; font-weight:700; line-height:1.3; color:var(--e-global-color-accent, #EA6942);
	background:transparent; border:1.5px solid var(--e-global-color-accent, #EA6942); border-radius:100px; padding:8px 16px; cursor:pointer; text-align:center; }
button.cf-otra-prenda:hover, button.cf-otra-prenda:focus{ background:var(--e-global-color-accent, #EA6942); color:#fff; }
/* guía horizontal (gorras, gorros y accesorios), igual que la vertical (usuario, 2 nov) */
.cf-zone__guia--h{ top:50%; bottom:auto; left:0; right:0; width:auto; height:0; border-left:0; border-top:1.5px dashed var(--e-global-color-accent, #EA6942); }
.cf-zone.cf-guia-on .cf-zone__guia--h{ opacity:0; }
.cf-zone.cf-guia-h-on .cf-zone__guia--h{ opacity:1; }
/* «Unidades» y su nota sobre el fondo oscuro del ordenador: en claro, como «* Medidas aproximadas.»; en el panel claro del móvil, en oscuro (usuario, 2 nov) */
.cf-qty__lab, .cf-qty__nota{ color:var(--e-global-color-text, #F2EEE3); }
.cf-qty__nota{ opacity:.8; }
.cf-stage-col.is-panel .cf-qty__lab, .cf-stage-col.is-panel .cf-qty__nota{ color:#353637; }