/*
Theme Name: Cashmascota
Theme URI: https://cashmascota.es
Description: Tema hijo de Twenty Twenty-Five para Cashmascota (Granada). Aplica la identidad de marca: colores corporativos (magenta y amarillo), tipografías autoalojadas (Fredoka + Nunito) y una página de inicio orientada a categorías y buscador. Tienda online con modelo de solicitud de pedido.
Author: Juan Buitrago
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: cashmascota-tema
*/

/* Los estilos principales se definen en theme.json. Aquí solo retoques puntuales. */

/* Buscador: aspecto más amable y acorde a la marca. */
.wp-block-search__input {
	border-radius: 999px;
	border: 2px solid #F1D8E4;
	padding: 0.7em 1.1em;
}

.wp-block-search__button {
	border-radius: 999px;
}

/* Rejilla de categorías de WooCommerce: tarjetas con aire. */
.wc-block-product-categories ul,
.woocommerce-grouped-categories ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* =========================================================
   HOME · HERO  (Fase 1.1)
   ========================================================= */
.cm-hero h1 {
	max-width: 18ch;
	margin-inline: auto;
}

.cm-hero__lead {
	max-width: 56ch;
	margin-inline: auto;
}

.cm-hero__badge {
	display: inline-block;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base) !important;
	padding: 0.3em 1em;
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--titulares);
	font-weight: 600;
	font-size: 0.82rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-inline: auto;
}

.cm-hero__search {
	max-width: 580px;
	margin-inline: auto;
	width: 100%;
}

.cm-hero__search .wp-block-search__input {
	font-size: 1.05rem;
	padding: 1em 1.3em;
}

.cm-hero__search .wp-block-search__inside-button {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	border: none;
	border-radius: 999px;
	margin: 5px;
	padding: 0.55em 1.4em;
	font-family: var(--wp--preset--font-family--titulares);
	font-weight: 600;
	cursor: pointer;
}

.cm-hero__search .wp-block-search__inside-button:hover {
	background: var(--wp--preset--color--primary-dark);
}

.cm-hero__small {
	color: var(--wp--preset--color--gris);
}

/* =========================================================
   HOME · CATEGORIAS DESTACADAS (Fase 1.2)
   ========================================================= */
.cm-categorias {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 1rem;
	margin-top: 2rem;
}

@media (max-width: 1100px) {
	.cm-categorias { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 640px) {
	.cm-categorias { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
}

.cm-cat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.7rem;
	padding: 1.4rem 0.7rem;
	background: var(--wp--preset--color--base);
	border: 2px solid var(--wp--preset--color--borde);
	border-radius: 16px;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
	text-align: center;
}

.cm-cat:hover,
.cm-cat:focus-visible {
	transform: translateY(-4px);
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 10px 24px rgba(207, 42, 112, 0.14);
	outline: none;
}

.cm-cat__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 92px;
	height: 92px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--wp--preset--color--crema);
	border: 2px solid var(--wp--preset--color--borde);
	font-size: 2.4rem;
	font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", system-ui;
	line-height: 1;
	transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

/* Foto del animal: llena el circulo manteniendo proporcion. */
.cm-cat__ico img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cm-cat:hover .cm-cat__ico {
	border-color: var(--wp--preset--color--primary);
	transform: scale(1.05);
	box-shadow: 0 6px 16px rgba(207, 42, 112, 0.18);
}

.cm-cat__name {
	font-family: var(--wp--preset--font-family--titulares);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.2;
}

/* =========================================================
   HOME · PRODUCTOS DESTACADOS (Fase 1.3)
   ========================================================= */
.cm-destacados-wrap {
	margin-inline: auto;
}

.cm-destacados-head {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	position: relative;
	margin-bottom: 1.5rem;
}

.cm-destacados-title {
	text-align: center;
	font-family: var(--wp--preset--font-family--titulares);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	margin: 0;
	line-height: 1.15;
}

.cm-carousel-nav {
	display: flex;
	gap: 0.5rem;
	position: absolute;
	right: 0;
}

.cm-carousel-btn {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 2px solid var(--wp--preset--color--borde);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
	font-size: 1.5rem;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
	padding: 0;
}

.cm-carousel-btn:hover:not(:disabled) {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.cm-carousel-btn:disabled {
	opacity: 0.35;
	cursor: default;
}

/* Pista del carrusel: scroll horizontal con snap, scrollbar oculta. */
.cm-carousel {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	margin-inline: -0.25rem;
	padding: 0.25rem;
}

.cm-carousel::-webkit-scrollbar {
	display: none;
}

.cm-carousel-track {
	display: flex;
	gap: 1rem;
}

.cm-carousel-track .cm-prod {
	flex: 0 0 calc((100% - 4 * 1rem) / 5);
	scroll-snap-align: start;
}

@media (max-width: 1100px) {
	.cm-carousel-track .cm-prod { flex: 0 0 calc((100% - 3 * 1rem) / 4); }
}

@media (max-width: 860px) {
	.cm-carousel-track .cm-prod { flex: 0 0 calc((100% - 2 * 1rem) / 3); }
}

@media (max-width: 640px) {
	.cm-carousel-track .cm-prod { flex: 0 0 44%; }
	.cm-carousel-nav { display: none; }
	.cm-destacados-head { justify-content: center; }
}

.cm-destacados-wrap .cm-prod {
	display: flex;
	flex-direction: column;
	padding: 0.6rem 0.7rem 0.8rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: 12px;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.cm-destacados-wrap .cm-prod:hover,
.cm-destacados-wrap .cm-prod:focus-visible {
	transform: translateY(-3px);
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 10px 24px rgba(207, 42, 112, 0.10);
	outline: none;
}

.cm-destacados-wrap .cm-prod__media {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 8px;
	background: var(--wp--preset--color--crema);
	margin-bottom: 0.7rem;
}

.cm-destacados-wrap .cm-prod__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	transition: transform 0.25s ease;
}

.cm-destacados-wrap .cm-prod:hover .cm-prod__media img {
	transform: scale(1.04);
}

.cm-destacados-wrap .cm-prod__name {
	font-family: var(--wp--preset--font-family--cuerpo);
	font-weight: 600;
	font-size: 0.92rem;
	line-height: 1.3;
	color: var(--wp--preset--color--contrast);
	margin: 0 0 0.4rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.4em;
}

.cm-destacados-wrap .cm-prod__price {
	font-family: var(--wp--preset--font-family--titulares);
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	font-size: 1rem;
	margin: 0;
}

.cm-prod__price del {
	color: var(--wp--preset--color--gris);
	font-weight: 400;
	font-size: 0.9em;
	margin-right: 0.3em;
}

.cm-destacados-empty {
	text-align: center;
	color: var(--wp--preset--color--gris);
	padding: 2rem 0;
}

.cm-destacados-footer {
	text-align: center;
	margin-top: 1.5rem;
}

.cm-link {
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--titulares);
	font-weight: 600;
	text-decoration: none;
}

.cm-link:hover {
	color: var(--wp--preset--color--primary-dark);
	text-decoration: underline;
}

/* =========================================================
   HOME · COMO FUNCIONA — 3 PASOS (Fase 1.4)
   ========================================================= */
.cm-pasos-wrap {
	text-align: center;
}

.cm-pasos-eyebrow {
	display: inline-block;
	font-family: var(--wp--preset--font-family--titulares);
	font-weight: 600;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
	margin: 0 0 0.5rem;
}

.cm-pasos-title {
	font-family: var(--wp--preset--font-family--titulares);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	margin: 0 0 0.6rem;
	line-height: 1.15;
}

.cm-pasos-lead {
	max-width: 52ch;
	margin: 0 auto;
	color: var(--wp--preset--color--gris);
}

.cm-pasos {
	list-style: none;
	margin: 2.6rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

.cm-paso {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	padding: 0 0.8rem;
}

/* Conector de flujo: linea punteada entre los iconos (solo desktop). */
.cm-paso:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 39px; /* centro del circulo de 78px */
	left: calc(50% + 48px);
	width: calc(100% - 96px);
	border-top: 2px dashed var(--wp--preset--color--borde);
	z-index: 0;
}

.cm-paso__ico {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 78px;
	height: 78px;
	border-radius: 50%;
	background: var(--wp--preset--color--base);
	border: 2px solid var(--wp--preset--color--borde);
	color: var(--wp--preset--color--primary);
	box-shadow: 0 6px 18px rgba(207, 42, 112, 0.08);
}

.cm-paso__ico svg {
	width: 34px;
	height: 34px;
}

.cm-paso__num {
	position: absolute;
	top: -6px;
	right: -6px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--titulares);
	font-weight: 700;
	font-size: 0.85rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--wp--preset--color--crema);
}

.cm-paso__name {
	font-family: var(--wp--preset--font-family--titulares);
	font-weight: 600;
	font-size: 1.2rem;
	color: var(--wp--preset--color--contrast);
	margin-top: 0.4rem;
}

.cm-paso__desc {
	color: var(--wp--preset--color--gris);
	font-size: 0.98rem;
	line-height: 1.5;
	max-width: 30ch;
}

@media (max-width: 720px) {
	.cm-pasos {
		grid-template-columns: 1fr;
		gap: 2rem;
		max-width: 360px;
		margin-inline: auto;
	}
	.cm-paso:not(:last-child)::after {
		display: none;
	}
}

/* =========================================================
   HOME · MARCAS DESTACADAS (Fase 1.5)
   ========================================================= */
.cm-marcas-wrap {
	text-align: center;
}

.cm-marcas-title {
	font-family: var(--wp--preset--font-family--titulares);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	margin: 0 0 2rem;
	line-height: 1.15;
}

.cm-marcas {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 1.5rem 2.5rem;
}

/* Cada marca tiene una caja uniforme; el logo se ajusta dentro con contain.
   Asi SVG (sin dimensiones intrinsecas) y PNG quedan al mismo tamano visual. */
.cm-marca {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 160px;
	height: 64px;
	flex: 0 0 auto;
}

.cm-marca img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.55;
	transition: filter 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

.cm-marca:hover img,
.cm-marca:focus-visible img {
	filter: grayscale(0);
	opacity: 1;
	transform: scale(1.05);
}

.cm-marca--text {
	font-family: var(--wp--preset--font-family--titulares);
	font-weight: 700;
	font-size: 1.5rem;
	color: var(--wp--preset--color--gris);
	text-decoration: none;
	transition: color 0.2s ease;
}

.cm-marca--text:hover {
	color: var(--wp--preset--color--primary);
}

@media (max-width: 640px) {
	.cm-marcas {
		gap: 1.6rem 2rem;
	}
	.cm-marca {
		width: 120px;
		height: 48px;
	}
}

/* =========================================================
   HOME · CONFIANZA / TIENDAS FISICAS (Fase 1.6)
   ========================================================= */
.cm-tiendas-wrap {
	text-align: center;
}

.cm-tiendas-eyebrow {
	display: inline-block;
	font-family: var(--wp--preset--font-family--titulares);
	font-weight: 600;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
	margin: 0 0 0.5rem;
}

.cm-tiendas-title {
	font-family: var(--wp--preset--font-family--titulares);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	margin: 0 0 0.6rem;
	line-height: 1.15;
}

.cm-tiendas-lead {
	max-width: 56ch;
	margin: 0 auto;
	color: var(--wp--preset--color--gris);
}

.cm-tiendas {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin-top: 2.6rem;
	text-align: left;
}

@media (max-width: 860px) {
	.cm-tiendas { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
}

.cm-tienda {
	background: var(--wp--preset--color--base);
	border: 2px solid var(--wp--preset--color--borde);
	border-radius: 16px;
	padding: 1.6rem 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.cm-tienda:hover {
	transform: translateY(-4px);
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 12px 28px rgba(207, 42, 112, 0.10);
}

.cm-tienda__name {
	font-family: var(--wp--preset--font-family--titulares);
	font-weight: 700;
	font-size: 1.4rem;
	color: var(--wp--preset--color--contrast);
	margin: 0;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.cm-tienda__tag {
	font-family: var(--wp--preset--font-family--cuerpo);
	font-weight: 700;
	font-size: 0.7rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--crema);
	border-radius: 999px;
	padding: 0.25em 0.7em;
}

.cm-tienda__line {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	margin: 0;
	color: var(--wp--preset--color--contrast);
	font-size: 0.98rem;
	line-height: 1.45;
}

.cm-tienda__ico {
	flex: 0 0 auto;
	color: var(--wp--preset--color--primary);
	margin-top: 2px;
}

.cm-tienda__ico svg {
	width: 20px;
	height: 20px;
	display: block;
}

/* Icono de WhatsApp: verde de marca para que se reconozca al instante. */
.cm-tienda__ico--wa {
	color: #25d366;
}

.cm-tienda__line a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	font-weight: 700;
}

.cm-tienda__line a:hover {
	color: var(--wp--preset--color--primary);
}

.cm-tienda__btn {
	margin-top: auto;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--wp--preset--font-family--titulares);
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--wp--preset--color--primary);
	border: 2px solid var(--wp--preset--color--primary);
	border-radius: 999px;
	padding: 0.5em 1.2em;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}

.cm-tienda__btn:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

/* =========================================================
   HEADER · buscador contenido (que no empuje el menu)
   ========================================================= */
.cm-header .wp-block-search {
	flex: 0 0 auto;
	width: 250px;
	max-width: 32vw;
}

.cm-header .wp-block-search__inside-wrapper {
	display: flex;
	align-items: center;
	width: 100%;
}

.cm-header .wp-block-search__input {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	margin: 0;
}

@media (max-width: 1024px) {
	.cm-header .wp-block-search {
		width: 200px;
	}
}

/* En movil se oculta el buscador del header (se veia como un ovalo vacio);
   el hero ya tiene buscador y el menu Categorias da acceso a navegar. */
@media (max-width: 782px) {
	.cm-header .wp-block-search {
		display: none;
	}
}

/* =========================================================
   FICHA DE PRODUCTO premium (single product)
   ========================================================= */
/* Marca bajo el titulo */
.cm-single-brand {
	margin: 0.2rem 0 0.8rem;
	font-family: var(--wp--preset--font-family--titulares);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.cm-single-brand a {
	color: var(--wp--preset--color--gris);
	text-decoration: none;
	transition: color 0.15s ease;
}

.cm-single-brand a:hover {
	color: var(--wp--preset--color--primary);
}

/* Mas aire y refinamiento en el resumen del producto */
.single-product .product .entry-summary .price,
.single-product .product .summary .price {
	color: var(--wp--preset--color--primary);
	margin-bottom: 1rem;
}

.single-product .cashmascota-pocas-unidades {
	margin-bottom: 1.1rem !important;
}

/* Boton de la ficha: tipografia de marca y un punto mas grande */
.single-product .single_add_to_cart_button,
.single-product .wp-block-woocommerce-add-to-cart-form button {
	font-family: var(--wp--preset--font-family--titulares) !important;
	font-weight: 600 !important;
}

/* Meta (SKU / categoria) mas discreto */
.single-product .product_meta {
	margin-top: 1.4rem;
	font-size: 0.85rem;
	color: var(--wp--preset--color--gris);
}

/* =========================================================
   LISTADO DE CATEGORIA · tarjetas premium (coherencia con home)
   ========================================================= */
/* La rejilla de WooCommerce usa floats (columns-4) que se descolocan con
   tarjetas de altura variable. La convertimos en CSS Grid: alineacion perfecta
   y anchos iguales, ignorando los floats/anchos de Woo. */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.3rem;
	margin: 0 0 2rem !important;
	padding: 0;
	list-style: none;
}

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

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
}

@media (max-width: 1280px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 680px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products { grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
}

/* Cabecera del archivo: contador + ordenar */
.woocommerce .woocommerce-result-count {
	color: var(--wp--preset--color--gris);
	font-size: 0.9rem;
}

.woocommerce .woocommerce-ordering select {
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: 999px;
	padding: 0.45rem 1rem;
	font-size: 0.9rem;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/* Tarjeta de producto */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: 14px;
	padding: 0.8rem;
	margin-bottom: 1.2rem;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
	display: flex;
	flex-direction: column;
}

.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
	transform: translateY(-3px);
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 10px 24px rgba(207, 42, 112, 0.10);
}

/* Imagen: cuadrada, contain sobre crema */
.woocommerce ul.products li.product a img {
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: var(--wp--preset--color--crema);
	border-radius: 10px;
	margin-bottom: 0.7rem;
}

/* Titulo */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--wp--preset--font-family--cuerpo);
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1.3;
	color: var(--wp--preset--color--contrast);
	padding: 0 0 0.3rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.5em;
}

/* Precio */
.woocommerce ul.products li.product .price {
	font-family: var(--wp--preset--font-family--titulares);
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	font-size: 1.05rem;
	margin: 0 0 0.6rem;
}

.woocommerce ul.products li.product .price del {
	color: var(--wp--preset--color--gris);
	font-weight: 400;
	font-size: 0.85em;
}

.woocommerce ul.products li.product .price ins {
	text-decoration: none;
}

/* Boton anadir: al fondo de la tarjeta, magenta redondeado */
.woocommerce ul.products li.product .button {
	margin-top: auto;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--titulares);
	font-weight: 600;
	font-size: 0.9rem;
	padding: 0.55em 1.1em;
	transition: background-color 0.15s ease;
}

.woocommerce ul.products li.product .button:hover {
	background: var(--wp--preset--color--primary-dark);
}

/* Etiqueta de oferta */
.woocommerce ul.products li.product .onsale {
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--titulares);
	font-weight: 700;
	border-radius: 999px;
	min-height: auto;
	min-width: auto;
	padding: 0.2em 0.7em;
	font-size: 0.78rem;
	line-height: 1.4;
	top: 0.6rem;
	right: 0.6rem;
	margin: 0;
}

/* Paginacion */
.woocommerce nav.woocommerce-pagination ul {
	border: 0;
	gap: 0.3rem;
	display: flex;
	justify-content: center;
}

.woocommerce nav.woocommerce-pagination ul li {
	border: 0;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: 8px;
	color: var(--wp--preset--color--contrast);
}

.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--primary);
}

/* =========================================================
   HEADER · enlace Mi cuenta (icono persona)
   ========================================================= */
.cm-account-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	flex: 0 0 auto;
	transition: color 0.15s ease;
}

.cm-account-link svg {
	width: 23px;
	height: 23px;
}

.cm-account-link.is-logged {
	color: var(--wp--preset--color--primary-dark);
}

.cm-account-link:hover {
	color: var(--wp--preset--color--primary-dark);
}

/* =========================================================
   HEADER · mini-carrito (clasico, fragments)
   ========================================================= */
.cm-cart-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	flex: 0 0 auto;
}

.cm-cart-link svg {
	width: 24px;
	height: 24px;
}

.cm-cart-count {
	position: absolute;
	top: 2px;
	right: 0;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--titulares);
	font-weight: 700;
	font-size: 0.7rem;
	line-height: 18px;
	text-align: center;
	display: none;
}

.cm-cart-count.is-active {
	display: block;
}

/* Campo de checkout oculto (País fijo a España) */
.cm-hidden-field,
.woocommerce-checkout .cm-hidden-field {
	display: none !important;
}

/* Tarjeta de puntos (solo lectura en Mi cuenta) */
.cm-tarjeta-input {
	background: var(--wp--preset--color--crema) !important;
	color: var(--wp--preset--color--primary) !important;
	font-family: var(--wp--preset--font-family--titulares);
	font-weight: 700;
	letter-spacing: 0.05em;
	cursor: default;
}

.cm-tarjeta-row .description {
	display: block;
	margin-top: 0.3rem;
	font-size: 0.85rem;
	color: var(--wp--preset--color--gris);
}

/* =========================================================
   REGISTRO DE CLIENTE · casillas de mascotas (chips)
   ========================================================= */
.cm-reg-animales-row {
	margin-top: 0.5rem;
}

.cm-reg-animales-titulo {
	display: block;
	font-weight: 600;
	margin-bottom: 0.6rem;
}

.cm-reg-animales {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.cm-reg-animal {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0.85rem;
	border: 1.5px solid var(--wp--preset--color--borde);
	border-radius: 999px;
	cursor: pointer;
	font-size: 0.92rem;
	transition: border-color 0.15s ease, background 0.15s ease;
	user-select: none;
}

.cm-reg-animal:hover {
	border-color: var(--wp--preset--color--primary);
}

/* Checkbox oculto visualmente (sigue funcional y accesible por teclado);
   el propio chip indica el estado seleccionado. */
.cm-reg-animal input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.cm-reg-animal:has(input:checked) {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-weight: 600;
}

/* Foco accesible por teclado */
.cm-reg-animal:has(input:focus-visible) {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* =========================================================
   FOOTER · footer propio Cashmascota (Fase header/footer)
   ========================================================= */
.cm-footer {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: 2.5rem;
	text-align: left;
}

@media (max-width: 860px) {
	.cm-footer {
		grid-template-columns: 1fr 1fr;
		gap: 2rem;
	}
	.cm-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
	.cm-footer { grid-template-columns: 1fr; }
}

.cm-footer__logo {
	font-family: var(--wp--preset--font-family--titulares);
	font-weight: 700;
	font-size: 1.6rem;
	color: var(--wp--preset--color--primary);
	margin: 0 0 0.6rem;
}

.cm-footer__tag {
	color: var(--wp--preset--color--gris);
	font-size: 0.95rem;
	line-height: 1.55;
	max-width: 38ch;
	margin: 0;
}

/* Oculta la fila "SKU / Categoría / Marcas" de la ficha.
   El remove_action de PHP no es fiable con el tema de bloques, así que se
   garantiza aquí. La categoría ya está en las migas y la marca bajo el título. */
.woocommerce div.product .product_meta,
.wc-block-components-product-details,
.product_meta {
	display: none !important;
}

/* --- Precio de oferta destacado ---
   El precio normal (tachado, <del>) se apaga en gris; el de oferta (<ins>) se
   resalta en rojo y en negrita, tanto en la ficha como en los listados. */
.woocommerce div.product p.price del,
.woocommerce div.product .summary .price del,
ul.products li.product .price del,
.wc-block-grid__product-price del,
.wp-block-woocommerce-product-price del {
	color: #9a9a9a;
	opacity: 1;
	font-weight: 500;
}

.woocommerce div.product p.price ins,
.woocommerce div.product .summary .price ins,
ul.products li.product .price ins,
.wc-block-grid__product-price ins,
.wp-block-woocommerce-product-price ins {
	text-decoration: none;
	background: transparent;
}

.woocommerce div.product p.price ins,
.woocommerce div.product .summary .price ins,
ul.products li.product .price ins,
.wc-block-components-product-price ins,
.wc-block-components-product-price ins .wc-block-components-product-price__value,
.wp-block-woocommerce-product-price ins,
.wp-block-woocommerce-product-price ins .woocommerce-Price-amount,
.woocommerce div.product .summary .price ins .woocommerce-Price-amount {
	color: #d1173e !important;
	font-weight: 800 !important;
}

/* El precio de oferta un pelín mayor para que cante. */
.woocommerce div.product .summary .price ins,
.wp-block-woocommerce-product-price ins {
	font-size: 1.08em;
}

/* --- Redes sociales (pie) --- */
.cm-rrss {
	display: flex;
	gap: 0.6rem;
	list-style: none;
	margin: 1.1rem 0 0;
	padding: 0;
}

.cm-rrss__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 40px: objetivo tactil comodo en movil. */
	width: 40px;
	height: 40px;
	border-radius: 50%;
	color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--crema);
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.cm-rrss__link svg {
	width: 20px;
	height: 20px;
	display: block;
}

.cm-rrss__link:hover,
.cm-rrss__link:focus-visible {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	.cm-rrss__link {
		transition: none;
	}
	.cm-rrss__link:hover,
	.cm-rrss__link:focus-visible {
		transform: none;
	}
}

.cm-footer__h {
	font-family: var(--wp--preset--font-family--titulares);
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--wp--preset--color--contrast);
	margin: 0 0 1rem;
}

.cm-footer__tiendas,
.cm-footer__cats {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
}

.cm-footer__tiendas li {
	font-size: 0.92rem;
	line-height: 1.5;
	color: var(--wp--preset--color--gris);
}

.cm-footer__tiendas strong {
	color: var(--wp--preset--color--contrast);
}

.cm-footer__tiendas a,
.cm-footer__cats a {
	color: var(--wp--preset--color--gris);
	text-decoration: none;
	transition: color 0.15s ease;
}

.cm-footer__tiendas a:hover,
.cm-footer__cats a:hover {
	color: var(--wp--preset--color--primary);
}

.cm-footer__cats a {
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

.cm-footer__bottom {
	margin-top: 2.5rem;
	padding-top: 1.3rem;
	border-top: 1px solid var(--wp--preset--color--borde);
	text-align: center;
	color: var(--wp--preset--color--gris);
	font-size: 0.85rem;
}

/* =========================================================
   WOOCOMMERCE · estetica premium (carrito, checkout, cuenta) — Bloque E
   ========================================================= */
/* Avisos con estilo de marca */
.woocommerce-info,
.woocommerce-message,
.woocommerce-noreviews,
.woocommerce form .woocommerce-info {
	border-top-color: var(--wp--preset--color--primary);
	border-radius: 10px;
	background: var(--wp--preset--color--crema);
}

.woocommerce-info::before,
.woocommerce-message::before {
	color: var(--wp--preset--color--primary);
}

/* Campos de formulario (checkout, cuenta, registro) */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-account input.input-text,
.select2-container--default .select2-selection--single {
	border: 1px solid var(--wp--preset--color--borde) !important;
	border-radius: 10px !important;
	padding: 0.7em 0.9em !important;
	min-height: auto;
	font-size: 1rem;
	background: var(--wp--preset--color--base);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	border-color: var(--wp--preset--color--primary) !important;
	outline: none;
	box-shadow: 0 0 0 3px rgba(207, 42, 112, 0.12);
}

.woocommerce form .form-row label {
	font-weight: 600;
	font-size: 0.92rem;
	margin-bottom: 0.25rem;
}

/* Tablas de carrito / pedido */
.woocommerce table.shop_table {
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: 14px;
	border-collapse: separate;
	overflow: hidden;
}

.woocommerce table.shop_table th {
	font-family: var(--wp--preset--font-family--titulares);
	font-weight: 600;
}

/* Resumen del pedido / totales destacado */
.woocommerce-checkout #order_review,
.woocommerce .cart_totals {
	background: var(--wp--preset--color--crema);
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: 16px;
	padding: 1.4rem 1.5rem;
}

.woocommerce-checkout #payment {
	background: transparent;
	border-radius: 14px;
}

.woocommerce-checkout #payment ul.payment_methods {
	border-bottom: 1px solid var(--wp--preset--color--borde);
}

/* Mi cuenta: navegacion lateral tipo menu */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: 14px;
	overflow: hidden;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	border-bottom: 1px solid var(--wp--preset--color--borde);
}

.woocommerce-account .woocommerce-MyAccount-navigation li:last-child {
	border-bottom: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 0.85rem 1.1rem;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	font-weight: 600;
	transition: background 0.15s ease, color 0.15s ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	background: var(--wp--preset--color--crema);
	color: var(--wp--preset--color--primary);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

/* Boton "Actualizar carrito" deshabilitado mas sutil */
.woocommerce .cart .button[disabled],
.woocommerce .cart .button:disabled {
	opacity: 0.5;
}

/* =========================================================
   CHECKOUT compacto: envio arriba (2 col), info adicional abajo
   ========================================================= */
@media (min-width: 769px) {
	/* Apilar: direccion de envio arriba, info adicional debajo */
	.woocommerce-checkout .col2-set {
		display: block;
	}
	.woocommerce-checkout .col2-set .col-1,
	.woocommerce-checkout .col2-set .col-2 {
		width: 100%;
		max-width: 100%;
		float: none;
		padding: 0;
	}
	.woocommerce-checkout .col2-set .col-2 {
		margin-top: 1.6rem;
	}

	/* Campos de envio en 2 columnas */
	.woocommerce-billing-fields__field-wrapper,
	.woocommerce-additional-fields__field-wrapper {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 1.5rem;
	}
	/* La direccion de la calle ocupa todo el ancho */
	#billing_address_1_field {
		grid-column: 1 / -1;
	}
}

/* El campo Notas/Preferencia (textarea) en su columna, altura comoda */
.woocommerce-checkout .woocommerce-additional-fields textarea {
	min-height: 80px;
}

/* Resumen "Enviar a:" (Opcion A: cliente registrado con direccion) */
.cm-collapsed {
	display: none !important;
}

.cm-checkout-resumen {
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: 14px;
	background: var(--wp--preset--color--crema);
	padding: 1.2rem 1.4rem;
	margin-bottom: 1.5rem;
}

.cm-checkout-resumen__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.6rem;
}

.cm-checkout-resumen__titulo {
	font-family: var(--wp--preset--font-family--titulares);
	font-weight: 600;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}

.cm-checkout-resumen__cambiar {
	background: transparent;
	border: 1.5px solid var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
	border-radius: 999px;
	padding: 0.35em 1em;
	font-family: var(--wp--preset--font-family--titulares);
	font-weight: 600;
	font-size: 0.85rem;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.cm-checkout-resumen__cambiar:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.cm-checkout-resumen__nombre {
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
	margin: 0 0 0.3rem;
}

.cm-checkout-resumen p {
	margin: 0 0 0.3rem;
	color: var(--wp--preset--color--gris);
	line-height: 1.5;
}