/* Página de producto nueva. Colores de la marca (logo de CreativaGraficas). */
.cpp {
	--cpp-tinta: #14141b; --cpp-texto: #3d3d49; --cpp-suave: #5d5d6b; --cpp-gris: #f4f4f6; --cpp-linea: #e4e4ea;
	--cpp-ok: #1d7a46; --cpp-naranja: #b4521a; --cpp-azul: #2b428b;
	--cpp-titulos: Montserrat, Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
	color: var(--cpp-tinta);
	line-height: 1.5;
}
.cpp-wrap { flex: 1 1 100%; width: 100%; min-width: 0; }
.cpp *, .cpp *::before, .cpp *::after { box-sizing: border-box; }
.cpp img { max-width: 100%; height: auto; }
.cpp [hidden] { display: none !important; }
.cpp-ancho { max-width: 1280px; margin: 0 auto; padding: 20px 24px 64px; }
.cpp a:focus-visible, .cpp button:focus-visible, .cpp input:focus-visible, .cpp select:focus-visible { outline: 3px solid var(--cpp-azul); outline-offset: 2px; }

/* Ruta */
.cpp-ruta { margin: 0 0 20px; font-size: 14px; color: var(--cpp-suave); }
.cpp-ruta a { color: var(--cpp-suave); text-decoration: none; }
.cpp-ruta a:hover { color: var(--cpp-tinta); text-decoration: underline; }

/* Liso / Personalizar: qué se ve en cada pestaña */
.cpp-prem[data-modo="liso"] [data-solo="pers"],
.cpp-prem[data-modo="pers"] [data-solo="liso"] { display: none !important; }
.cpp .cpp-prem { margin: 0; clear: none; --prem-acento: var(--cpp-acento); --prem-tinta: var(--cpp-tinta); --prem-suave: var(--cpp-suave); --prem-linea: var(--cpp-linea); --prem-fondo: var(--cpp-gris); }

/* Arriba: dos columnas */
.cpp-top { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 40px 56px; align-items: start; }
.cpp-izq { min-width: 0; }
.cpp-der { min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.cpp-ancho > .cpp-top > .cpp-izq, .cpp-prem[data-modo="liso"] .cpp-izq { position: sticky; top: 24px; }

/* Galería */
.cpp-galeria { display: flex; flex-direction: column; gap: 12px; }
.cpp-galeria__grande { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; background: var(--cpp-gris); border-radius: 20px; overflow: hidden; cursor: zoom-in; }
.cpp-galeria__grande img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.cpp-galeria__vacia { cursor: default; }
.cpp-galeria__minis { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 10px; }
.cpp .cpp-galeria__mini {
	display: block; aspect-ratio: 1 / 1; padding: 6px !important; margin: 0; cursor: pointer;
	background: var(--cpp-gris) !important; border: 2px solid transparent !important; border-radius: 12px !important; box-shadow: none !important;
}
.cpp .cpp-galeria__mini img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.cpp .cpp-galeria__mini:hover { border-color: var(--cpp-linea) !important; }
.cpp .cpp-galeria__mini.is-activa { border-color: var(--cpp-tinta) !important; }

/* Cabecera de compra */
.cpp-cabecera { display: flex; flex-direction: column; gap: 6px; }
.cpp-insignias { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.cpp-insignia { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 1.4; }
.cpp-insignia--acento { background: color-mix(in srgb, var(--cpp-acento) 12%, #fff); color: color-mix(in srgb, var(--cpp-acento) 82%, #000); }
.cpp-insignia--naranja { background: #fdeee4; color: #8a3d0f; }
.cpp-insignia--azul { background: #e7ecf8; color: #23366f; }
.cpp .cpp-titulo { margin: 0; font-family: var(--cpp-titulos); font-size: clamp(26px, 3vw, 34px); font-weight: 800; line-height: 1.15; letter-spacing: -.01em; color: var(--cpp-tinta); }
.cpp-ref { margin: 0; font-size: 14px; color: var(--cpp-suave); }
.cpp .cpp-precio { margin: 6px 0 0; font-family: var(--cpp-titulos); font-size: 28px; font-weight: 700; color: var(--cpp-tinta) !important; }
.cpp .cpp-precio del { font-size: .62em; font-weight: 500; color: var(--cpp-suave); opacity: 1; }
.cpp .cpp-precio ins { text-decoration: none; background: none; }
.cpp .cpp-precio small { font-size: .5em; font-weight: 500; color: var(--cpp-suave); }

/* Pestañas */
.cpp-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; padding: 5px; background: var(--cpp-gris); border-radius: 14px; }
.cpp .cpp-tab {
	min-height: 48px; margin: 0; padding: 8px 10px !important; border: 0 !important; border-radius: 10px !important; cursor: pointer;
	background: transparent !important; color: var(--cpp-suave) !important; box-shadow: none !important;
	font: inherit; font-size: 15px; font-weight: 600; line-height: 1.2; text-transform: none; letter-spacing: 0;
}
.cpp .cpp-tab:hover { color: var(--cpp-tinta) !important; }
.cpp .cpp-tab[aria-selected="true"] { background: #fff !important; color: var(--cpp-tinta) !important; box-shadow: 0 1px 3px rgba(20, 20, 27, .15) !important; }
.cpp .cpp-tab[data-modo="pers"][aria-selected="true"] { color: var(--cpp-acento) !important; }

/* Descripción corta */
.cpp .woocommerce-product-details__short-description { color: var(--cpp-texto); margin: 0 0 18px; }
.cpp .woocommerce-product-details__short-description > :last-child { margin-bottom: 0; }

/* Formulario de compra (WooCommerce) */
.cpp-comprar form.cart { margin: 0 !important; padding: 0; border: 0; }
.cpp-comprar form.cart::before, .cpp-comprar form.cart::after,
.cpp-comprar .woocommerce-variation-add-to-cart::before, .cpp-comprar .woocommerce-variation-add-to-cart::after { display: none !important; }
.cpp-comprar table.variations { display: block; width: 100%; margin: 0 0 14px !important; border: 0 !important; background: none; }
.cpp-comprar table.variations tbody, .cpp-comprar table.variations tr { display: block; }
.cpp-comprar table.variations tr { margin: 0 0 16px; }
.cpp-comprar table.variations th, .cpp-comprar table.variations td { display: block; padding: 0 !important; border: 0 !important; background: none !important; text-align: left; line-height: 1.4; }
.cpp-comprar table.variations th.label { margin-bottom: 8px; }
.cpp-comprar table.variations label { font-weight: 600; font-size: 15px; color: var(--cpp-tinta); margin: 0; }
.cpp-comprar table.variations select {
	width: 100%; max-width: 420px; min-height: 48px; padding: 0 40px 0 14px; margin: 0;
	border: 1px solid var(--cpp-linea); border-radius: 12px; background-color: #fff; color: var(--cpp-tinta); font: inherit; font-size: 15px;
}
.cpp-comprar .reset_variations { display: inline-block; margin-top: 6px; font-size: 14px; color: var(--cpp-suave); }
.cpp-comprar .single_variation_wrap .woocommerce-variation-price { display: none; }
.cpp-comprar .woocommerce-variation-description { color: var(--cpp-texto); font-size: 15px; }
.cpp-comprar .woocommerce-variation-availability, .cpp-comprar .stock { margin: 0 0 12px; font-size: 14px; font-weight: 600; }
.cpp .stock.in-stock { color: var(--cpp-ok); }
.cpp .stock.out-of-stock { color: #b42318; }

.cpp-comprar form.cart:not(.variations_form), .cpp-comprar .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; }
.cpp-comprar form.grouped_form { display: block; }
.cpp-comprar .quantity { float: none !important; margin: 0 !important; display: flex; align-items: center; border: 1px solid var(--cpp-linea); border-radius: 999px; overflow: hidden; background: #fff; }
.cpp-comprar .quantity input.qty {
	width: 56px; min-height: 50px; margin: 0; padding: 0; border: 0 !important; background: transparent; box-shadow: none !important;
	text-align: center; font: inherit; font-size: 16px; font-weight: 600; color: var(--cpp-tinta); -moz-appearance: textfield;
}
.cpp-comprar .quantity input.qty::-webkit-outer-spin-button, .cpp-comprar .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cpp .cpp-cant__b {
	width: 46px; min-height: 50px; margin: 0; padding: 0 !important; border: 0 !important; border-radius: 0 !important; cursor: pointer;
	background: transparent !important; color: var(--cpp-tinta) !important; box-shadow: none !important; font: inherit; font-size: 20px; line-height: 1;
}
.cpp .cpp-cant__b:hover { background: var(--cpp-gris) !important; }
.cpp .cpp-comprar .single_add_to_cart_button {
	flex: 1 1 220px; float: none !important; min-height: 52px; margin: 0 !important; padding: 0 24px !important; cursor: pointer;
	background: var(--cpp-tinta) !important; color: #fff !important; border: 0 !important; border-radius: 999px !important; box-shadow: none !important;
	font: inherit; font-size: 16px; font-weight: 600; line-height: 1; text-transform: none; letter-spacing: 0;
}
.cpp .cpp-comprar .single_add_to_cart_button:hover { background: #2c2c38 !important; }
.cpp .cpp-comprar .single_add_to_cart_button.disabled, .cpp .cpp-comprar .single_add_to_cart_button:disabled { opacity: .45; cursor: not-allowed; }

/* Puntos de color y botones de talla dentro de la ficha */
.cpp .cgsw { gap: 10px; margin: 0 0 4px; }
.cpp .cgsw .cgsw-punto { width: 44px; height: 44px; padding: 4px !important; border: 2px solid transparent !important; box-shadow: none !important; }
.cpp .cgsw .cgsw-punto:hover { border-color: var(--cpp-linea) !important; }
.cpp .cgsw .cgsw-punto.sel { border-color: var(--cpp-tinta) !important; box-shadow: none !important; }
.cpp .cgsw .cgsw-texto { min-width: 56px; min-height: 48px; padding: 0 14px !important; border-radius: 12px !important; border: 1px solid var(--cpp-linea) !important; font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; }
.cpp .cgsw .cgsw-texto.sel { background: var(--cpp-tinta) !important; color: #fff !important; border-color: var(--cpp-tinta) !important; box-shadow: none !important; }
.cpp .cgsw-elegido { font-size: 15px; color: var(--cpp-texto); }

/* Nota y recuadro de presupuesto */
.cpp-nota { margin: 14px 0 0; font-size: 14px; color: var(--cpp-suave); }
.cpp .cpp-enlace { padding: 0 !important; margin: 0; border: 0 !important; background: none !important; color: var(--cpp-acento) !important; font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; box-shadow: none !important; }
.cpp-logo { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 18px; padding: 18px; background: var(--cpp-gris); border-radius: 16px; }
.cpp-logo > div { flex: 1 1 220px; }
.cpp-logo__titulo { margin: 0; font-weight: 600; }
.cpp-logo__txt { margin: 2px 0 0; font-size: 14px; color: var(--cpp-texto); }
.cpp .cpp-boton { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: 999px; font-weight: 600; font-size: 15px; text-decoration: none; }
.cpp .cpp-boton--borde { background: #fff; color: var(--cpp-tinta); border: 1px solid var(--cpp-tinta); }
.cpp .cpp-boton--borde:hover { background: var(--cpp-tinta); color: #fff; }

/* Ventajas */
.cpp-ventajas { list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px solid var(--cpp-linea); display: flex; flex-direction: column; gap: 10px; font-size: 15px; color: var(--cpp-texto); }
.cpp-ventajas li { display: flex; gap: 10px; align-items: center; margin: 0; }
.cpp-ventajas svg { flex: 0 0 auto; color: var(--cpp-ok); }
.cpp-ventajas a { color: var(--cpp-tinta); font-weight: 600; }
.cpp-cats { margin: 0; font-size: 14px; color: var(--cpp-suave); }
.cpp-cats a { color: var(--cpp-suave); }

/* ───── Personalizador dentro de la ficha ───── */
.cpp .prem__mesa { position: static; }
.cpp .prem__cabecera { margin-bottom: 10px; }
.cpp .prem__titulo { font-family: var(--cpp-titulos); font-size: 18px; font-weight: 700; }
.cpp .prem__panel { gap: 24px; }
.cpp .prem__bloque h3 { font-size: 16px; font-weight: 700; margin: 0 0 10px; color: var(--cpp-tinta); }

.cpp .prem__tarjetas { grid-template-columns: 1fr; gap: 8px; }
.cpp .prem__tarjeta {
	flex-direction: row; align-items: center; gap: 0; min-height: 76px; margin: 0; padding: 0 !important;
	background: #fff !important; color: var(--cpp-tinta) !important; border: 1px solid var(--cpp-linea) !important; border-radius: 14px !important; box-shadow: none !important;
	text-transform: none; letter-spacing: 0; font-weight: 400;
}
.cpp .prem__tarjeta:hover { transform: none; border-color: var(--cpp-tinta) !important; }
.cpp .prem__tarjeta.is-activo { border: 2px solid var(--cpp-tinta) !important; }
.cpp .prem__tarjeta-img { flex: 0 0 84px; width: 84px; aspect-ratio: 1 / 1; border-radius: 12px 0 0 12px; }
.cpp .prem__tarjeta-img canvas { inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); }
.cpp .prem__tarjeta-txt { flex: 1 1 auto; padding: 10px 14px; }
.cpp .prem__tarjeta-nombre { font-size: 15px; }
.cpp .prem__tarjeta-medida { font-size: 13px; }
.cpp .prem__tarjeta-precio { margin-top: 2px; font-size: 13px; color: var(--cpp-acento); }

.cpp .prem__punto { width: 44px; height: 44px; }
.cpp .prem__paquetes { border-radius: 14px; }
.cpp .prem__paquete.is-activo { box-shadow: inset 4px 0 0 var(--cpp-acento); }
.cpp .prem__talla { border-radius: 12px; }

.cpp .prem__resumen { padding: 20px; border: 0; border-radius: 18px; background: var(--cpp-tinta); color: #fff; }
.cpp .prem__total-cifra { font-family: var(--cpp-titulos); color: #fff; }
.cpp .prem__total-det { color: #c9c9d4; }
.cpp .prem__falta { color: #c9c9d4; }
.cpp .prem__error { color: #ffb4a8; }
.cpp .prem__boton--primario { background: var(--cpp-acento) !important; color: #fff !important; border: 0 !important; border-radius: 999px !important; box-shadow: none !important; text-transform: none; letter-spacing: 0; }
.cpp .prem__resumen .prem__boton--primario:disabled { background: #3a3a48 !important; color: #8f8f9c !important; }
.cpp .prem__boton { text-transform: none; letter-spacing: 0; box-shadow: none !important; }

/* ───── Abajo: descripción, características, opiniones, relacionados ───── */
.cpp-info { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 40px 56px; margin-top: 64px; }
.cpp-info > .cpp-seccion:only-child { grid-column: 1 / -1; max-width: 860px; }
.cpp-seccion { min-width: 0; }
.cpp .cpp-seccion h2, .cpp .cpp-opiniones .woocommerce-Reviews-title, .cpp #reply-title { margin: 0 0 14px; font-family: var(--cpp-titulos); font-size: 24px; font-weight: 700; color: var(--cpp-tinta); }
.cpp-texto { color: var(--cpp-texto); }
.cpp-texto > :first-child { margin-top: 0; }
.cpp-texto h2, .cpp-texto h3, .cpp-texto h4 { font-family: var(--cpp-titulos); color: var(--cpp-tinta); font-size: 1.15em; margin: 1.4em 0 .5em; }
.cpp-texto img { border-radius: 12px; }
.cpp .woocommerce-product-attributes { width: 100%; margin: 0; border: 1px solid var(--cpp-linea); border-radius: 14px; border-collapse: separate; border-spacing: 0; overflow: hidden; font-size: 15px; }
.cpp .woocommerce-product-attributes th, .cpp .woocommerce-product-attributes td { padding: 10px 14px !important; border: 0; border-top: 1px solid var(--cpp-linea); background: #fff; text-align: left; vertical-align: top; font-style: normal; }
.cpp .woocommerce-product-attributes tr:first-child th, .cpp .woocommerce-product-attributes tr:first-child td { border-top: 0; }
.cpp .woocommerce-product-attributes th { width: 38%; background: var(--cpp-gris); font-weight: 600; }
.cpp .woocommerce-product-attributes td p { margin: 0; }
.cpp-opiniones { margin-top: 56px; max-width: 860px; }
.cpp-relacionados { margin-top: 64px; }
.cpp-rel { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.cpp-rel li { margin: 0; }
.cpp-rel a { display: flex; flex-direction: column; gap: 8px; color: var(--cpp-tinta); text-decoration: none; }
.cpp-rel__img { display: block; aspect-ratio: 1 / 1; background: var(--cpp-gris); border-radius: 16px; overflow: hidden; }
.cpp-rel__img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .2s; }
.cpp-rel a:hover .cpp-rel__img img { transform: scale(1.04); }
.cpp-rel__nombre { font-weight: 600; line-height: 1.3; }
.cpp-rel__precio { color: var(--cpp-texto); }
.cpp-rel__precio del { color: var(--cpp-suave); }

/* ───── Barra fija (móvil) ───── */
.cpp-barra { display: none; }
@media (max-width: 900px) {
	.cpp-top { grid-template-columns: 1fr; gap: 24px; }
	.cpp-ancho > .cpp-top > .cpp-izq, .cpp-prem[data-modo="liso"] .cpp-izq { position: static; }
	.cpp-prem[data-modo="pers"] .cpp-top { display: flex; flex-direction: column; }
	.cpp-prem[data-modo="pers"] .cpp-der { display: contents; }
	.cpp-prem[data-modo="pers"] .cpp-cabecera { order: 1; }
	.cpp-prem[data-modo="pers"] .cpp-tabs { order: 2; }
	.cpp-prem[data-modo="pers"] .cpp-izq { order: 3; }
	.cpp-prem[data-modo="pers"] .prem__panel { order: 4; }
	.cpp-prem[data-modo="pers"] .cpp-ventajas { order: 5; }
	.cpp-prem[data-modo="pers"] .cpp-cats { order: 6; }
	.cpp-info { grid-template-columns: 1fr; margin-top: 48px; }
	.cpp-rel { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
	.cpp-barra:not([hidden]) {
		display: flex; align-items: center; gap: 12px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990;
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--cpp-linea, #e4e4ea); box-shadow: 0 -4px 16px rgba(20, 20, 27, .08);
	}
	body.cpp-con-barra { padding-bottom: 76px; }
}
@media (max-width: 600px) {
	.cpp-ancho { padding: 14px 16px 48px; }
	.cpp .cpp-precio { font-size: 24px; }
	.cpp-tabs .cpp-tab { font-size: 14px; }
}
.cpp-barra__txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.cpp-barra__det { font-size: 12px; color: #5d5d6b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cpp-barra__det:empty { display: none; }
.cpp-barra__precio { font-family: Montserrat, Inter, sans-serif; font-size: 19px; font-weight: 700; color: #14141b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cpp-barra .cpp-barra__boton {
	flex: 0 0 auto; min-height: 50px; margin: 0; padding: 0 22px !important; border: 0 !important; border-radius: 999px !important; cursor: pointer;
	background: #14141b !important; color: #fff !important; box-shadow: none !important; font: inherit; font-size: 16px; font-weight: 600; text-transform: none; letter-spacing: 0;
}
.cpp-barra.is-pers .cpp-barra__boton { background: var(--cpp-acento-barra, #ac016d) !important; }

/* Los temas pintan los botones y campos: el personalizador conserva su aspecto. */
.cpp .prem__cara {
	background: #fff !important; color: var(--cpp-tinta) !important; border: 1px solid var(--cpp-linea) !important; border-radius: 12px !important;
	box-shadow: none !important; padding: 8px 12px !important; text-transform: none; letter-spacing: 0; font-weight: 400;
}
.cpp .prem__cara.is-activa { border: 2px solid var(--cpp-tinta) !important; box-shadow: inset 0 -3px 0 var(--cpp-acento) !important; }
.cpp .prem__cara small { color: var(--cpp-suave); }
.cpp .prem__cara.is-lista small { color: var(--cpp-ok); }
.cpp .prem__talla input { min-height: 44px; padding: 6px 4px !important; border: 1px solid var(--cpp-linea) !important; border-radius: 10px !important; text-align: center; font-size: 16px; box-shadow: none !important; background: #fff !important; }
.cpp .prem__talla.is-con input { border-color: var(--cpp-tinta) !important; }
.cpp .prem__boton--suave { background: var(--cpp-gris) !important; color: var(--cpp-tinta) !important; border: 1px solid var(--cpp-linea) !important; border-radius: 999px !important; }
.cpp .prem__boton--borde { background: transparent !important; color: var(--cpp-tinta) !important; border: 1px solid var(--cpp-tinta) !important; border-radius: 999px !important; }
.cpp .prem__boton--borde:hover:not(:disabled) { background: var(--cpp-tinta) !important; color: #fff !important; }
.cpp .prem__boton--borde:disabled { opacity: .4; }
.cpp .prem__soltar .prem__boton--claro { background: #1f4a3f !important; color: #fff !important; border: 0 !important; border-radius: 999px !important; }
.cpp .prem__mas { background: none !important; border: 0 !important; color: var(--cpp-acento) !important; padding: 0 !important; box-shadow: none !important; }
.cpp .prem__paquete { margin: 0; }

/* Con pantalla alta, el editor acompaña mientras se eligen cantidad y tallas. */
@media (min-width: 901px) and (min-height: 860px) {
	.cpp-prem[data-modo="pers"] .cpp-izq { position: sticky; top: 16px; }
}