/* Centro Náutico Murcia — tienda y checkout WooCommerce */

body.cnm-commerce-page {
	--cnm-shop-navy: #082f49;
	--cnm-shop-navy-2: #0b3f60;
	--cnm-shop-cyan: #00b4d8;
	--cnm-shop-cyan-dark: #087f9c;
	--cnm-shop-soft: #f2f8fb;
	--cnm-shop-line: #d7e5ec;
	--cnm-shop-text: #16324a;
	--cnm-shop-muted: #5d7182;
	background: #f7fafc;
	color: var(--cnm-shop-text);
}

.cnm-commerce-page main,
.cnm-commerce-page .woocommerce,
.cnm-commerce-page .wc-block-components-main,
.cnm-commerce-page .wc-block-components-sidebar {
	font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.cnm-commerce-page main {
	padding-top: clamp(28px, 4vw, 56px);
	padding-bottom: clamp(56px, 7vw, 92px);
}

.cnm-commerce-intro {
	position: relative;
	overflow: hidden;
	margin: 0 0 clamp(28px, 4vw, 46px);
	padding: clamp(27px, 4vw, 44px);
	border-radius: 18px;
	background:
		radial-gradient(circle at 92% 20%, rgba(0, 180, 216, .32), transparent 32%),
		linear-gradient(135deg, var(--cnm-shop-navy), var(--cnm-shop-navy-2));
	box-shadow: 0 18px 48px rgba(8, 47, 73, .17);
	color: #fff;
}

.cnm-commerce-intro::after {
	content: "";
	position: absolute;
	right: -42px;
	bottom: -68px;
	width: 210px;
	height: 210px;
	border: 28px solid rgba(255, 255, 255, .07);
	border-radius: 50%;
}

.cnm-commerce-intro__eyebrow,
.cnm-course-access__eyebrow {
	display: block;
	margin-bottom: 8px;
	color: #66d9ef;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.cnm-commerce-intro h1 {
	position: relative;
	z-index: 1;
	margin: 0 0 9px;
	color: #fff;
	font-size: clamp(30px, 4vw, 48px);
	font-weight: 800;
	letter-spacing: -.035em;
	line-height: 1.05;
}

.cnm-commerce-intro p {
	position: relative;
	z-index: 1;
	max-width: 720px;
	margin: 0;
	color: rgba(255, 255, 255, .84);
	font-size: clamp(15px, 1.6vw, 17px);
	line-height: 1.65;
}

/* Producto individual */
.cnm-commerce-page.single-product .woocommerce-breadcrumb {
	margin-bottom: 26px;
	color: var(--cnm-shop-muted);
	font-size: 13px;
}

.cnm-commerce-page.single-product .woocommerce-breadcrumb a {
	color: var(--cnm-shop-cyan-dark);
	font-weight: 700;
}

.cnm-commerce-page.single-product main > .wp-block-columns.alignwide {
	display: grid;
	grid-template-columns: minmax(0, .95fr) minmax(360px, 1.05fr);
	gap: clamp(34px, 6vw, 84px);
	align-items: start;
}

.cnm-commerce-page.single-product .woocommerce-product-gallery {
	position: sticky;
	top: 105px;
	overflow: hidden;
	min-height: 470px;
	border: 1px solid var(--cnm-shop-line);
	border-radius: 18px;
	background:
		radial-gradient(circle at 80% 15%, rgba(0, 180, 216, .18), transparent 34%),
		linear-gradient(145deg, #fff, #edf7fa);
	box-shadow: 0 18px 50px rgba(8, 47, 73, .09);
}

.cnm-commerce-page.single-product .woocommerce-product-gallery__image,
.cnm-commerce-page.single-product .woocommerce-product-gallery__wrapper {
	display: flex;
	min-height: 470px;
	align-items: center;
	justify-content: center;
}

.cnm-commerce-page.single-product .woocommerce-product-gallery img {
	width: min(74%, 430px) !important;
	height: auto !important;
	padding: 38px;
	object-fit: contain;
}

.cnm-commerce-page.single-product main > .wp-block-columns.alignwide > .wp-block-column:last-child {
	padding: clamp(28px, 4vw, 46px);
	border: 1px solid var(--cnm-shop-line);
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 18px 50px rgba(8, 47, 73, .09);
}

.cnm-commerce-page.single-product .wp-block-post-title {
	margin: 0 0 14px;
	color: var(--cnm-shop-navy);
	font-size: clamp(34px, 4.5vw, 54px);
	font-weight: 800;
	letter-spacing: -.045em;
	line-height: 1.06;
}

.cnm-commerce-page.single-product .wp-block-woocommerce-product-price {
	margin: 0 0 20px;
	color: var(--cnm-shop-cyan-dark);
	font-size: 28px;
	font-weight: 800;
}

.cnm-commerce-page.single-product .wp-block-post-excerpt {
	color: var(--cnm-shop-text);
	font-size: 17px;
	line-height: 1.7;
}

.cnm-product-assurances {
	display: grid;
	gap: 9px;
	margin: 22px 0 24px;
	padding: 18px 20px;
	border: 1px solid #c8eaf1;
	border-radius: 12px;
	background: var(--cnm-shop-soft);
}

.cnm-product-assurances p {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 0;
	color: var(--cnm-shop-text);
	font-size: 14px;
	font-weight: 650;
	line-height: 1.5;
}

.cnm-product-assurances p span {
	display: inline-grid;
	width: 21px;
	height: 21px;
	flex: 0 0 21px;
	place-items: center;
	border-radius: 50%;
	background: var(--cnm-shop-cyan);
	color: #fff;
	font-size: 13px;
	font-weight: 900;
}

.cnm-commerce-page .single_add_to_cart_button,
.cnm-commerce-page .woocommerce a.button,
.cnm-commerce-page .woocommerce button.button,
.cnm-commerce-page .woocommerce input.button,
.cnm-commerce-page .wc-block-components-button:not(.is-link) {
	min-height: 50px;
	padding: 13px 24px !important;
	border: 0 !important;
	border-radius: 9px !important;
	background: var(--cnm-shop-cyan) !important;
	box-shadow: 0 9px 24px rgba(0, 180, 216, .22);
	color: #052f3a !important;
	font-family: inherit !important;
	font-size: 15px !important;
	font-weight: 800 !important;
	text-decoration: none !important;
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.cnm-commerce-page .single_add_to_cart_button:hover,
.cnm-commerce-page .woocommerce a.button:hover,
.cnm-commerce-page .woocommerce button.button:hover,
.cnm-commerce-page .wc-block-components-button:not(.is-link):hover {
	transform: translateY(-1px);
	background: #20c4e5 !important;
	box-shadow: 0 12px 30px rgba(0, 180, 216, .3);
}

.cnm-commerce-page.single-product .wp-block-woocommerce-product-meta {
	padding-top: 19px;
	border-top: 1px solid var(--cnm-shop-line);
	color: var(--cnm-shop-muted);
	font-size: 13px;
}

.cnm-commerce-page.single-product .wp-block-woocommerce-product-meta a {
	color: var(--cnm-shop-cyan-dark);
	font-weight: 700;
}

.cnm-commerce-page .woocommerce-tabs,
.cnm-commerce-page .related.products,
.cnm-commerce-page .wp-block-woocommerce-product-details,
.cnm-commerce-page .wp-block-woocommerce-product-collection,
.cnm-commerce-page .woocommerce-MyAccount-content {
	padding: clamp(24px, 4vw, 40px);
	border: 1px solid var(--cnm-shop-line);
	border-radius: 16px;
	background: #fff;
}

.cnm-commerce-page .woocommerce-tabs ul.tabs {
	padding: 0 !important;
}

.cnm-commerce-page .woocommerce-tabs ul.tabs::before {
	border-color: var(--cnm-shop-line) !important;
}

.cnm-commerce-page .woocommerce-tabs ul.tabs li {
	border: 0 !important;
	background: transparent !important;
}

.cnm-commerce-page .woocommerce-tabs ul.tabs li.active a {
	color: var(--cnm-shop-cyan-dark) !important;
}

/* Catálogo */
.cnm-commerce-page ul.products {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.cnm-commerce-page .wp-block-woocommerce-product-template {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 24px !important;
}

.cnm-commerce-page ul.products::before,
.cnm-commerce-page ul.products::after {
	display: none !important;
}

.cnm-commerce-page ul.products li.product {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 18px 18px 22px !important;
	border: 1px solid var(--cnm-shop-line);
	border-radius: 15px;
	background: #fff;
	box-shadow: 0 10px 32px rgba(8, 47, 73, .07);
}

.cnm-commerce-page .wp-block-woocommerce-product-template > li {
	box-sizing: border-box;
	width: auto !important;
	margin: 0 !important;
	padding: 18px 18px 22px !important;
	border: 1px solid var(--cnm-shop-line);
	border-radius: 15px;
	background: #fff;
	box-shadow: 0 10px 32px rgba(8, 47, 73, .07);
}

.cnm-commerce-page ul.products li.product img {
	box-sizing: border-box;
	height: 220px !important;
	padding: 32px;
	border-radius: 11px;
	background: linear-gradient(145deg, #f7fbfd, #e9f5f9);
	object-fit: contain;
}

.cnm-commerce-page .wp-block-woocommerce-product-template .wc-block-components-product-image img {
	box-sizing: border-box;
	height: 220px !important;
	padding: 32px;
	border-radius: 11px;
	background: linear-gradient(145deg, #f7fbfd, #e9f5f9);
	object-fit: contain;
}

.cnm-commerce-page ul.products li.product .woocommerce-loop-product__title {
	color: var(--cnm-shop-navy);
	font-size: 18px !important;
	font-weight: 800;
	line-height: 1.35;
}

.cnm-commerce-page .wp-block-woocommerce-product-template .wp-block-post-title,
.cnm-commerce-page .wp-block-woocommerce-product-template .wp-block-post-title a {
	color: var(--cnm-shop-navy);
	font-size: 18px !important;
	font-weight: 800;
	line-height: 1.35;
	text-decoration: none;
}

.cnm-commerce-page ul.products li.product .price {
	color: var(--cnm-shop-cyan-dark) !important;
	font-size: 18px !important;
	font-weight: 800 !important;
}

.cnm-commerce-page .wp-block-woocommerce-product-template .wp-block-woocommerce-product-price {
	color: var(--cnm-shop-cyan-dark) !important;
	font-size: 18px !important;
	font-weight: 800 !important;
}

.cnm-commerce-page .wp-block-woocommerce-product-template .wp-block-button__link {
	border-radius: 8px !important;
	background: var(--cnm-shop-cyan) !important;
	color: #052f3a !important;
	font-family: inherit;
	font-weight: 800;
}

/* Carrito y checkout por bloques */
.cnm-commerce-page .wp-block-woocommerce-cart,
.cnm-commerce-page .wp-block-woocommerce-checkout {
	max-width: 1180px;
	margin-inline: auto;
}

.cnm-commerce-page .wc-block-cart__main,
.cnm-commerce-page .wc-block-cart__sidebar,
.cnm-commerce-page .wc-block-checkout__main,
.cnm-commerce-page .wc-block-checkout__sidebar {
	box-sizing: border-box;
}

.cnm-commerce-page .wc-block-cart__main,
.cnm-commerce-page .wc-block-checkout__main {
	padding: clamp(20px, 3vw, 34px) !important;
	border: 1px solid var(--cnm-shop-line);
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 14px 38px rgba(8, 47, 73, .07);
}

.cnm-commerce-page .wc-block-cart__sidebar,
.cnm-commerce-page .wc-block-checkout__sidebar {
	padding: 0 0 0 26px !important;
}

.cnm-commerce-page .wc-block-components-sidebar-layout .wc-block-components-sidebar > div,
.cnm-commerce-page .wc-block-components-order-summary,
.cnm-commerce-page .wc-block-components-totals-wrapper {
	border-color: var(--cnm-shop-line) !important;
}

.cnm-commerce-page .wc-block-components-order-summary,
.cnm-commerce-page .wc-block-components-checkout-step,
.cnm-commerce-page .wc-block-components-totals-wrapper {
	color: var(--cnm-shop-text);
}

.cnm-commerce-page .wc-block-components-title,
.cnm-commerce-page .wc-block-checkout__terms,
.cnm-commerce-page .wc-block-components-checkout-step__heading h2,
.cnm-commerce-page .wc-block-components-order-summary__button-text {
	color: var(--cnm-shop-navy);
	font-family: inherit;
	font-weight: 800;
}

.cnm-commerce-page .wc-block-components-text-input input,
.cnm-commerce-page .wc-block-components-combobox .wc-block-components-combobox-control input,
.cnm-commerce-page .wc-block-components-textarea {
	min-height: 52px;
	border: 1px solid #bfd1da !important;
	border-radius: 8px !important;
	background: #fff !important;
	color: var(--cnm-shop-text) !important;
	font-family: inherit !important;
}

.cnm-commerce-page .wc-block-components-text-input input:focus,
.cnm-commerce-page .wc-block-components-combobox .wc-block-components-combobox-control input:focus {
	border-color: var(--cnm-shop-cyan) !important;
	box-shadow: 0 0 0 3px rgba(0, 180, 216, .14) !important;
}

.cnm-commerce-page .wc-block-components-radio-control-accordion-option {
	margin-top: 10px;
	border: 1px solid var(--cnm-shop-line) !important;
	border-radius: 10px !important;
	background: #fff;
}

.cnm-commerce-page .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
	border-color: var(--cnm-shop-cyan) !important;
	box-shadow: 0 0 0 3px rgba(0, 180, 216, .12) !important;
}

.cnm-commerce-page .wc-block-components-radio-control__input:checked {
	border-color: var(--cnm-shop-cyan-dark) !important;
	background: var(--cnm-shop-cyan) !important;
}

.cnm-commerce-page .wc-block-components-notice-banner {
	border: 1px solid #9fd8b7 !important;
	border-radius: 10px !important;
	background: #effaf4 !important;
	color: #176b3d !important;
}

.cnm-commerce-page .wc-block-components-product-name,
.cnm-commerce-page .wc-block-components-order-summary-item__description,
.cnm-commerce-page .wc-block-components-totals-item__label {
	color: var(--cnm-shop-navy) !important;
	font-weight: 700;
}

.cnm-commerce-page .wc-block-components-order-summary-item__image img,
.cnm-commerce-page .wc-block-cart-item__image img {
	box-sizing: border-box;
	padding: 10px;
	border-radius: 8px;
	background: var(--cnm-shop-soft);
	object-fit: contain;
}

/* Confirmación y cuenta */
.cnm-course-access {
	margin: 30px 0;
	padding: clamp(24px, 4vw, 38px);
	border: 1px solid #b9e9f3;
	border-radius: 16px;
	background:
		radial-gradient(circle at 95% 12%, rgba(0, 180, 216, .14), transparent 34%),
		#f3fafc;
}

.cnm-course-access h2 {
	margin: 5px 0 9px;
	color: var(--cnm-shop-navy);
	font-size: clamp(24px, 3vw, 34px);
	font-weight: 800;
	letter-spacing: -.025em;
}

.cnm-course-access p {
	color: var(--cnm-shop-muted);
	line-height: 1.65;
}

.cnm-course-access__links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 20px 0 12px;
}

.cnm-course-access__button {
	display: inline-flex;
	min-height: 48px;
	align-items: center;
	justify-content: center;
	padding: 10px 20px;
	border-radius: 8px;
	background: var(--cnm-shop-navy);
	color: #fff !important;
	font-weight: 800;
	text-decoration: none !important;
}

.cnm-course-access__dashboard {
	color: var(--cnm-shop-cyan-dark) !important;
	font-weight: 800;
}

.cnm-commerce-page .woocommerce-order,
.cnm-commerce-page .woocommerce-MyAccount-navigation,
.cnm-commerce-page .woocommerce-MyAccount-content {
	border-color: var(--cnm-shop-line);
}

.cnm-commerce-page .woocommerce-order-overview,
.cnm-commerce-page .woocommerce-table--order-details,
.cnm-commerce-page .woocommerce-customer-details address {
	padding: 22px !important;
	border: 1px solid var(--cnm-shop-line) !important;
	border-radius: 12px !important;
	background: #fff;
}

@media (max-width: 900px) {
	.cnm-commerce-page.single-product main > .wp-block-columns.alignwide {
		grid-template-columns: 1fr;
	}

	.cnm-commerce-page.single-product .woocommerce-product-gallery {
		position: relative;
		top: auto;
		min-height: 360px;
	}

	.cnm-commerce-page.single-product .woocommerce-product-gallery__image,
	.cnm-commerce-page.single-product .woocommerce-product-gallery__wrapper {
		min-height: 360px;
	}

	.cnm-commerce-page ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cnm-commerce-page .wp-block-woocommerce-product-template {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.cnm-commerce-page .wc-block-cart__sidebar,
	.cnm-commerce-page .wc-block-checkout__sidebar {
		padding: 24px 0 0 !important;
	}
}

@media (max-width: 600px) {
	.cnm-commerce-page main {
		padding-top: 20px;
	}

	.cnm-commerce-intro {
		border-radius: 13px;
	}

	.cnm-commerce-page.single-product main > .wp-block-columns.alignwide > .wp-block-column:last-child {
		padding: 24px 20px;
	}

	.cnm-commerce-page ul.products {
		grid-template-columns: 1fr;
	}

	.cnm-commerce-page .wp-block-woocommerce-product-template {
		grid-template-columns: 1fr !important;
	}

	.cnm-commerce-page .wc-block-cart__main,
	.cnm-commerce-page .wc-block-checkout__main {
		padding: 20px 16px !important;
		border-radius: 12px;
	}
}

/* ============================================================
   Escaparate claro, estilo carrito
   ------------------------------------------------------------
   Giro de diseño del cliente (2-08-2026, por la tarde): vio la
   capa oscura que se había puesto en /tienda/, categorías y ficha
   de producto y no le gustó — "muy oscuro todo", el borde blanco
   ancho que dejaban las fotos de los cursos, el menú con letras
   oscuras sobre fondo oscuro (ilegible) y, sobre todo, que la
   página del carrito (que sí le gusta: fondo claro, tarjetas
   blancas, navy + cian, Manrope) no pegaba con el resto.

   Conclusión cerrada: el escaparate pasa a CLARO, con el mismo
   lenguaje visual que ya tiene el carrito/checkout de la hoja de
   arriba. Por eso aquí abajo se reutilizan sus propias variables
   (--cnm-shop-navy, --cnm-shop-cyan, --cnm-shop-line, etc.,
   definidas en el body.cnm-commerce-page de la línea 3) en vez de
   inventar una paleta nueva.

   El fondo de página, la cabecera y el pie del tema NO se tocan:
   en claro ya se ven bien tal cual los deja el tema — de hecho,
   quitar por completo la capa oscura anterior es lo que arregla
   el menú ilegible, sin necesitar ninguna regla nueva para eso.

   Sigue yendo TODO prefijado con

     body.cnm-commerce-page:not(.woocommerce-cart)
                            :not(.woocommerce-checkout)
                            :not(.woocommerce-account)

   por el mismo motivo de siempre: el carrito, el checkout y
   mi-cuenta ya gustan tal y como están (ahí cobra el TPV) y no
   deben rozarse. Donde la hoja clara de arriba ya trae
   background/color/border-radius en !important (sobre todo los
   botones de compra, el precio de la parrilla y las imágenes),
   hay que igualarlo en !important para ganar la cascada — se
   comenta caso por caso. Fuera de esos puntos, la especificidad
   de este prefijo ya gana por sí sola sin falta de !important.

   Esta capa es más corta que la oscura que sustituye a propósito:
   la hoja clara original (líneas 1-583) ya tenía buena parte del
   escaparate bien resuelta — carrito, checkout, mensajes de
   confianza, pestañas — y esto solo toca lo que el cliente pidió
   cambiar de verdad: las fotos a sangre, los títulos en Fraunces,
   el precio y los botones en navy, el aviso de "añadido al
   carrito" y la tarjeta de "Qué incluye" (que no tenía NINGÚN
   estilo propio ni en la hoja clara original ni antes de esta
   capa).
   ============================================================ */

/* ---- Foco visible (accesibilidad; no existía antes en esta hoja) ---- */

body.cnm-commerce-page:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) :focus-visible {
	outline: 2px solid var(--cnm-shop-cyan);
	outline-offset: 3px;
}

/* ---- Migas de pan, contador de resultados y "ordenar por" ----
   El breadcrumb solo estaba resuelto para la ficha de producto (línea
   ~85-94); en /tienda/ y en cada categoría no tenía ningún estilo. */

body.cnm-commerce-page:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .woocommerce-breadcrumb,
body.cnm-commerce-page:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .woocommerce-result-count {
	color: var(--cnm-shop-muted);
}

body.cnm-commerce-page:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .woocommerce-breadcrumb a {
	color: var(--cnm-shop-cyan-dark);
	font-weight: 700;
}

body.cnm-commerce-page:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .woocommerce-ordering select.orderby {
	background: #fff;
	border: 1px solid var(--cnm-shop-line);
	border-radius: 8px;
	color: var(--cnm-shop-text);
}

/* ---- Títulos en Fraunces ----
   El color navy de estos títulos YA lo ponía la hoja clara (líneas
   ~139-146 para la ficha y ~328-335 para la parrilla): aquí solo se
   cambia la tipografía a la serif de la web pública, que es lo que
   pide el cliente para que "enlace" con ella. */

body.cnm-commerce-page:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) h1.wp-block-query-title {
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 500;
	color: var(--cnm-shop-navy); /* este h1 ("Tienda" / nombre de categoría) no tenía color propio en la hoja clara */
}

body.cnm-commerce-page:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .wp-block-post-title {
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 500;
}

/* ---- Precio: navy en vez del cian de acento, "IVA incluido" en gris-azul ---- */

body.cnm-commerce-page:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .woocommerce-Price-amount,
body.cnm-commerce-page:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account).single-product .wp-block-woocommerce-product-price {
	color: var(--cnm-shop-navy);
}

/* La parrilla marca el precio en !important en la hoja clara (línea ~337-347): hay que igualarlo. */
body.cnm-commerce-page:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .wp-block-woocommerce-product-template .wp-block-woocommerce-product-price,
body.cnm-commerce-page:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) ul.products li.product .price {
	color: var(--cnm-shop-navy) !important;
}

body.cnm-commerce-page:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .woocommerce-price-suffix {
	color: var(--cnm-shop-muted);
}

/* ---- Parrilla: tarjetas blancas con la foto a sangre (sin el marco/gradiente claro) ----
   Antes la tarjeta llevaba padding por los cuatro lados (línea ~281-301 y
   ~292-301) y la propia imagen otro padding de 32px con un degradado claro
   detrás (línea ~303-319): eso es justo el "borde blanco muy ancho" que el
   cliente ve feo. La solución: la imagen sale con margen negativo hasta
   pegarse a los bordes de la tarjeta y la propia tarjeta recorta ese
   sobresaliente con overflow:hidden, así el redondeo de la esquina lo pone
   la tarjeta, no la imagen. */

body.cnm-commerce-page:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .wp-block-woocommerce-product-template > li,
body.cnm-commerce-page:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) ul.products li.product {
	overflow: hidden;
	border-color: var(--cnm-shop-line);
	border-radius: 12px;
	box-shadow: 0 10px 24px rgba(8, 47, 73, .06);
	transition: transform .3s ease, box-shadow .3s ease;
}

body.cnm-commerce-page:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .wp-block-woocommerce-product-template > li:hover,
body.cnm-commerce-page:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) ul.products li.product:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 32px rgba(8, 47, 73, .12);
}

@media (prefers-reduced-motion: reduce) {
	body.cnm-commerce-page:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .wp-block-woocommerce-product-template > li,
	body.cnm-commerce-page:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) ul.products li.product {
		transition: box-shadow .3s ease;
	}

	body.cnm-commerce-page:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .wp-block-woocommerce-product-template > li:hover,
	body.cnm-commerce-page:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) ul.products li.product:hover {
		transform: none;
	}
}

/* El contenedor de la imagen (primer hijo de la tarjeta, antes del título)
   se saca con margen negativo igual al padding de la tarjeta (18px arriba/
   lados) y se deja un hueco de 14px antes del título. Al ser un bloque con
   width automático, el margen negativo hace que ocupe solo el espacio
   sobrante — no hace falta calc(). */
body.cnm-commerce-page:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .wp-block-woocommerce-product-template .wc-block-components-product-image {
	margin: -18px -18px 14px;
}

body.cnm-commerce-page:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .wp-block-woocommerce-product-template .wc-block-components-product-image a {
	display: block;
}

/* La altura fija de 220px y el resto vienen de la hoja clara (línea ~303-319);
   height va en !important allí, así que hay que igualarlo para que mande
   aspect-ratio en su lugar. */
body.cnm-commerce-page:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .wp-block-woocommerce-product-template .wc-block-components-product-image img,
body.cnm-commerce-page:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) ul.products li.product img {
	width: 100%;
	height: auto !important;
	aspect-ratio: 16 / 10;
	padding: 0;
	background: none;
	border-radius: 0;
	object-fit: cover;
}

/* ---- Ficha de producto: la galería también a sangre, sin el panel acolchado ----
   Antes era un panel de 470px de alto mínimo con 38px de relleno y la
   imagen encogida al 74% dentro (línea ~103-129): el mismo "marco" ancho
   que en la parrilla, solo que más grande. Aquí se deja como una lámina
   con la foto a sangre y el radio en el propio contenedor. */

body.cnm-commerce-page:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account).single-product .woocommerce-product-gallery {
	min-height: 0;
	padding: 0;
	border: 1px solid var(--cnm-shop-line);
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 10px 24px rgba(8, 47, 73, .06);
	overflow: hidden;
}

body.cnm-commerce-page:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account).single-product .woocommerce-product-gallery__image,
body.cnm-commerce-page:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account).single-product .woocommerce-product-gallery__wrapper {
	min-height: 0;
}

/* width y height venían en !important en la hoja clara (línea ~124-129): hay que igualarlos. */
body.cnm-commerce-page:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account).single-product .woocommerce-product-gallery img {
	width: 100% !important;
	height: auto !important;
	padding: 0;
	object-fit: cover;
}

/* ---- Botones de compra: navy con texto blanco, hover cian ----
   La hoja clara los dejaba en cian con texto oscuro, todo en !important
   (línea ~195-212 la del botón de la ficha/genérico, ~349-355 la de la
   parrilla): hay que igualar el !important para ganar. El cian que antes
   era el color de fondo pasa a ser el del hover. */

body.cnm-commerce-page:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .single_add_to_cart_button,
body.cnm-commerce-page:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .woocommerce a.button,
body.cnm-commerce-page:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .woocommerce button.button,
body.cnm-commerce-page:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .woocommerce input.button,
body.cnm-commerce-page:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .wc-block-components-button:not(.is-link),
body.cnm-commerce-page:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .wp-block-woocommerce-product-template .wp-block-button__link {
	background: var(--cnm-shop-navy) !important;
	color: #fff !important;
	border-radius: 8px !important;
}

body.cnm-commerce-page:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .single_add_to_cart_button:hover,
body.cnm-commerce-page:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .woocommerce a.button:hover,
body.cnm-commerce-page:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .woocommerce button.button:hover,
body.cnm-commerce-page:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .wc-block-components-button:not(.is-link):hover,
body.cnm-commerce-page:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .wp-block-woocommerce-product-template .wp-block-button__link:hover {
	background: var(--cnm-shop-cyan) !important;
	color: #fff !important;
}

/* "Ver carrito": el enlace que aparece junto al botón de la parrilla tras
   añadir un producto (span oculto hasta entonces). No tenía estilo propio. */
body.cnm-commerce-page:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .added_to_cart.wc_forward {
	display: inline-block;
	margin-top: 8px;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--cnm-shop-navy);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}

body.cnm-commerce-page:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .added_to_cart.wc_forward:hover {
	background: var(--cnm-shop-cyan-dark);
}

/* ---- Aviso "añadido al carrito" ----
   Es justo lo que el cliente dice que "se abre muy feo": el aviso de
   WooCommerce Blocks por defecto trae su propio verde/rojo/azul chillón
   desde el CSS del propio plugin (no desde esta hoja). Aquí se lleva al
   mismo lenguaje de tarjeta que el resto: blanca, con un borde de color
   fino a la izquierda en vez de un fondo de color entero. No se ha podido
   ver en vivo el aviso ya renderizado (lo pinta JS al añadir al carrito,
   no sale en el HTML que se descarga con curl), así que esto se apoya en
   las clases documentadas de WooCommerce Blocks (is-success/is-info/
   is-error) más que en una comprobación visual directa. */

body.cnm-commerce-page:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .wc-block-components-notice-banner {
	border: 1px solid var(--cnm-shop-line);
	border-left: 4px solid var(--cnm-shop-cyan-dark);
	border-radius: 10px;
	background: #fff;
	color: var(--cnm-shop-text);
	box-shadow: 0 10px 24px rgba(8, 47, 73, .06);
}

body.cnm-commerce-page:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .wc-block-components-notice-banner.is-success {
	border-left-color: #16a34a;
}

body.cnm-commerce-page:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .wc-block-components-notice-banner.is-error {
	border-left-color: #dc2626;
}

body.cnm-commerce-page:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .wc-block-components-notice-banner a {
	color: var(--cnm-shop-navy);
	font-weight: 700;
}

/* ---- "Qué incluye" (modules/woocommerce/que-incluye.php) ----
   Este bloque no tenía NINGÚN estilo propio, ni siquiera en la hoja clara
   original (a diferencia de los mensajes de confianza de justo encima, que
   sí estaban resueltos desde el principio en las líneas 161-193): se pintaba
   con la lista por defecto del navegador. Se le da aquí el mismo lenguaje
   de tarjeta suave que ya usan los mensajes de confianza. */

body.cnm-commerce-page:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .cnm-incluye {
	margin: 22px 0 24px;
	padding: 20px 22px;
	border: 1px solid var(--cnm-shop-line);
	border-radius: 12px;
	background: var(--cnm-shop-soft);
}

body.cnm-commerce-page:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .cnm-incluye__titulo {
	margin: 0 0 14px;
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 500;
	font-size: 20px;
	color: var(--cnm-shop-navy);
}

body.cnm-commerce-page:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .cnm-incluye__lista {
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.cnm-commerce-page:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .cnm-incluye__punto {
	display: flex;
	gap: 10px;
	align-items: flex-start;
}

/* Mismo check circular cian que ya usan los mensajes de confianza (línea ~182-193),
   para que ambos bloques lean como parte de la misma familia. */
body.cnm-commerce-page:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .cnm-incluye__marca {
	display: inline-grid;
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	place-items: center;
	border-radius: 50%;
	background: var(--cnm-shop-cyan);
	color: #fff;
	font-size: 12px;
	font-weight: 900;
}

body.cnm-commerce-page:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .cnm-incluye__punto b {
	color: var(--cnm-shop-navy);
}

body.cnm-commerce-page:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .cnm-incluye__detalle {
	display: block;
	margin-top: 3px;
	color: var(--cnm-shop-muted);
	font-size: 14px;
	line-height: 1.5;
}