/*
 * DSS Optimización — retoques del tema DSS.
 *
 * Va detrás de la hoja del tema y solo corrige: tamaños, espacios, contraste
 * y dos desbordes. Los colores de marca, las tipografías y los efectos siguen
 * siendo los del tema. Todo va colgado de clases del tema DSS, así que con
 * otro tema no toca nada.
 */

/* ------------------------------------------------------------------ Tarjetas de producto */

/* El título heredaba el morado de los enlaces y quedaba morado sobre casi
   negro, con la categoría —también morada— justo encima. El tema quería
   blanco (así lo pone .product-title); el enlace se lo pisaba. */
body .dss-product-card .product-title a {
	color: var(--dss-text-primary, #F8FAFC);
}
body .dss-product-card .product-title a:hover,
body .dss-product-card .product-title a:focus-visible {
	color: var(--dss-accent-hover, #9D4EDD);
}

/* El estado venía como texto suelto con un punto blanco delante, igual para
   «Entrega inmediata» que para «Agotado». Ahora cada uno con su color. */
body .dss-product-card .stock-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.2;
	padding: 5px 10px;
	border-radius: 30px;
}
body .dss-product-card .stock-status.in-stock {
	color: #34D399;
	background: rgba(16, 185, 129, 0.1);
	border: 1px solid rgba(16, 185, 129, 0.25);
}
body .dss-product-card .stock-status.out-of-stock {
	color: #CBD5E1;
	background: rgba(148, 163, 184, 0.1);
	border: 1px solid rgba(148, 163, 184, 0.22);
}

/* «Mostrando los 7 resultados» iba en gris muy oscuro sobre el fondo:
   casi no se leía. */
.woocommerce-result-count {
	color: var(--dss-text-secondary, #94A3B8);
}

/* «El resultado aparecerá aquí.», en el panel de códigos: el tema lo ponía
   en su gris más apagado (2,3:1 de contraste). */
.dss-codes-result .dss-codes-placeholder {
	color: var(--dss-text-secondary, #94A3B8);
}

/* Casillas y opciones con el color de la tienda en vez del azul del sistema. */
input[type="checkbox"],
input[type="radio"] {
	accent-color: var(--dss-accent, #8A2BE2);
}

/* ------------------------------------------------------------------ Ficha de producto */

/* «Contactar Soporte» medía el 100 % MÁS su relleno y se salía de la tarjeta
   por la derecha. */
.single-product-support-box .btn {
	box-sizing: border-box;
	max-width: 100%;
}

/* La ficha tiene un contenedor dentro de otro y los dos ponían su margen
   arriba y a los lados: 80 px de hueco antes de las migas y la tarjeta
   encogida en el móvil. El de dentro ya no suma. El de arriba lo pone la
   plantilla en el propio elemento (style="padding-top:40px"), y eso solo se
   deshace con !important. */
.single-product-container .dss-shop-container {
	padding-left: 0;
	padding-right: 0;
	padding-top: 0 !important;
	max-width: none;
}

/* ------------------------------------------------------------------ Monedero: colores de TeraWallet */

/* El monedero va con los colores ORIGINALES de TeraWallet: tarjetas blancas y
   texto oscuro, que es lo que mejor se lee con tantas cifras y fechas. La hoja
   del tema lo pintaba todo en oscuro con !important y a través de sus
   variables (--dss-text-primary, --dss-bg-card…); en lugar de pelear regla a
   regla, dentro del monedero esas variables pasan a valer lo que valen en
   TeraWallet, y las propias reglas del tema acaban pintando sus colores. */
body .woo-wallet-my-wallet-container {
	--wallet-primary-color: #483de0;
	--wallet-text-color: #333;
	--wallet-bg-color: #f4f6f8;
	--wallet-border-color: #eee;
	--dss-text-primary: #2c3e50;
	--dss-text-secondary: #667085;
	--dss-text-muted: #98a2b3;
	--dss-bg-main: #f4f6f8;
	--dss-bg-card: #fff;
	--dss-bg-card-hover: #f6f7f9;
	--dss-border: #e4e7ec;
	--dss-accent: #483de0;
	--dss-accent-hover: #483de0;
}

/* La cabecera («Mi monedero» y su subtítulo) no va en tarjeta: está sobre el
   fondo oscuro de la página, así que ahí el texto sigue siendo claro. */
body .woo-wallet-my-wallet-container .woo-wallet-header {
	--dss-text-primary: #F8FAFC;
	--dss-text-secondary: #94A3B8;
}

/* Los botones «Añadir fondos» y «Transferir» son <input>, y el tema les ponía
   el fondo transparente de los campos: se quedaban sin color. Vuelven al
   azul de TeraWallet. Hace falta !important porque el tema usa !important. */
body .woo-wallet-my-wallet-container input[type="submit"],
body .woo-wallet-my-wallet-container input.button {
	background: var(--wallet-primary-color) !important;
	border: 0 !important;
	color: #fff !important;
	cursor: pointer;
}

/* La tarjeta del saldo, en el azul de TeraWallet con su texto blanco. */
body .woo-wallet-my-wallet-container .woo-wallet-balance-card {
	background: var(--wallet-primary-color) !important;
}

/* «Descargar CSV» e «Imprimir» son enlaces: el tema los teñía de morado. */
body .woo-wallet-my-wallet-container a.ww-stmt-ghost {
	color: #16202b;
}
body .woo-wallet-my-wallet-container a.ww-stmt-ghost:hover,
body .woo-wallet-my-wallet-container a.ww-stmt-ghost:focus {
	color: var(--wallet-primary-color);
}

/* ------------------------------------------------------------------ Portada: ritmo entre bloques */

/* Entre las categorías y «Novedades» se sumaban el margen de abajo de una
   sección y el de arriba de la otra: más de 120 px de vacío en el escritorio.
   Ahora el paso de un bloque al siguiente es el mismo que entre el título y
   su contenido, algo mayor. */
.home-sections .categories-section {
	padding-bottom: 12px;
}
.home-sections .categories-section + .products-section {
	padding-top: 36px;
}
@media (max-width: 600px) {
	.home-sections .categories-section {
		padding-bottom: 4px;
	}
	.home-sections .categories-section + .products-section {
		padding-top: 24px;
	}
}

/* ------------------------------------------------------------------ Portada: escritorio */

@media (min-width: 1025px) {
	.home-hero {
		padding: 110px 20px 80px;
	}
	.hero-title {
		font-size: clamp(3rem, 5vw, 4.25rem);
	}
	.dss-section {
		padding: 60px 0;
	}
	.section-header {
		margin-bottom: 32px;
	}
	.section-title {
		font-size: 2.1rem;
	}
	/* Categorías: las ocho en una sola fila. Cada tarjeta es una columna
	   centrada y el nombre reserva dos líneas, así el icono, el nombre y el
	   número quedan alineados en todas aunque alguno ocupe dos renglones. */
	.category-grid {
		grid-template-columns: repeat(8, minmax(0, 1fr));
		gap: 20px;
	}
	.category-card {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 22px 10px 20px;
		border-radius: 18px;
	}
	.cat-icon {
		width: 52px;
		height: 52px;
		margin: 0 auto 12px;
		border-radius: 14px;
	}
	.cat-icon svg {
		width: 24px;
		height: 24px;
	}
	.category-card h3 {
		font-size: 1.12rem;
		letter-spacing: 0;
		line-height: 1.25;
		min-height: 2.5em;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.category-card .cat-count {
		font-size: 0.85rem;
		margin-top: 4px;
	}
	.category-card:hover {
		transform: translateY(-4px);
	}
	/* Mismo hueco que las categorías: así cada producto mide exactamente dos
	   categorías y los bordes de las dos rejillas caen en la misma línea. */
	.products-grid {
		gap: 20px;
	}
	.features-wrap {
		padding: 48px 40px;
		margin: 24px 0 72px;
		gap: 36px;
	}
	.feat-icon-wrap {
		width: 72px;
		height: 72px;
		margin-bottom: 18px;
	}
}

/* ------------------------------------------------------------------ Tableta */

@media (min-width: 601px) and (max-width: 1024px) {
	.home-hero {
		padding: 80px 20px 56px;
	}
	.hero-title {
		font-size: 3rem;
	}
	.dss-section {
		padding: 48px 0;
	}
	.section-header {
		margin-bottom: 28px;
	}
	.section-title {
		font-size: 1.9rem;
	}
	.category-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 12px;
	}
	.category-card {
		padding: 14px 8px;
		border-radius: 14px;
	}
	.cat-icon {
		width: 40px;
		height: 40px;
		margin-bottom: 8px;
		border-radius: 12px;
	}
	.cat-icon svg {
		width: 18px;
		height: 18px;
	}
	.category-card h3 {
		font-size: 0.92rem;
		letter-spacing: 0;
	}
	.category-card .cat-count {
		font-size: 0.72rem;
	}
	.products-grid,
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 18px;
	}
	body .dss-product-card .product-image-link img {
		height: auto;
		aspect-ratio: 1 / 1;
	}
}

/* ------------------------------------------------------------------ Móvil */

@media (max-width: 600px) {
	/* El titular ocupaba la pantalla entera: cuatro líneas enormes. */
	.home-hero {
		padding: 44px 16px 36px;
	}
	.hero-title {
		font-size: clamp(2rem, 9vw, 2.5rem);
		letter-spacing: -0.5px;
		margin-bottom: 14px;
	}
	.hero-subtitle {
		font-size: 1rem;
		line-height: 1.55;
		margin-bottom: 22px;
	}
	/* Los dos botones, lado a lado y del mismo ancho. */
	.hero-actions {
		gap: 10px;
	}
	.hero-actions > .btn {
		flex: 1 1 0;
		min-width: 0;
		padding: 12px 10px;
		font-size: 0.98rem;
		white-space: nowrap;
	}

	.dss-section {
		padding: 32px 0;
	}
	.section-header {
		flex-direction: row;
		align-items: center;
		gap: 12px;
		margin-bottom: 18px;
	}
	.section-title {
		font-size: 1.45rem;
		gap: 10px;
	}
	.section-title::before {
		width: 4px;
		height: 22px;
	}
	.view-all {
		font-size: 0.85rem;
		padding: 6px 12px;
		white-space: nowrap;
	}

	/* Categorías: de a dos, como botones, no una por pantalla. */
	.category-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}
	.category-card {
		padding: 12px 8px;
		border-radius: 14px;
	}
	.cat-icon {
		width: 36px;
		height: 36px;
		margin-bottom: 6px;
		border-radius: 10px;
	}
	.cat-icon svg {
		width: 18px;
		height: 18px;
	}
	.category-card h3 {
		font-size: 0.9rem;
		letter-spacing: 0;
		line-height: 1.25;
	}
	.category-card .cat-count {
		font-size: 0.75rem;
		margin-top: 4px;
	}
	.category-card:hover {
		transform: none;
	}

	/* Productos: de a dos, en la portada y en la tienda. Cada tarjeta medía
	   600 px de alto. */
	.products-grid,
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}
	body .dss-product-card {
		border-radius: 16px;
	}
	body .dss-product-card:hover {
		transform: none;
	}
	body .dss-product-card .product-image-link img {
		height: auto;
		aspect-ratio: 1 / 1;
		transform: none;
	}
	body .dss-product-card .product-info {
		padding: 12px;
	}
	body .dss-product-card .product-category {
		font-size: 0.66rem;
		margin-bottom: 4px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	body .dss-product-card .product-title {
		font-size: 0.92rem;
		line-height: 1.3;
		min-height: 0;
		margin: 0 0 8px;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	body .dss-product-card .product-meta {
		margin-bottom: 10px;
	}
	body .dss-product-card .stock-status {
		font-size: 0.72rem;
		padding: 4px 8px;
	}
	body .dss-product-card .product-price-row {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
		padding-top: 10px;
	}
	body .dss-product-card .product-price-row .price {
		font-size: 1.1rem;
	}
	body .dss-product-card .btn-buy {
		justify-content: center;
		padding: 8px 10px;
		font-size: 0.85rem;
		white-space: normal;
		text-align: center;
	}
	body .dss-product-card .dss-nt-stock.mini {
		margin-top: 0;
	}
	body .dss-product-card .dss-nt-stock.mini .dss-nt-stock-btn {
		padding: 8px 10px;
		font-size: 0.85rem;
		justify-content: center;
	}

	/* Confianza: sin tanto aire alrededor. */
	.features-wrap {
		padding: 28px 18px;
		margin: 16px 0 40px;
		gap: 24px;
		border-radius: 20px;
	}
	.feat-icon-wrap {
		width: 60px;
		height: 60px;
		margin-bottom: 14px;
		border-radius: 18px;
	}
	.feat-icon-wrap svg {
		width: 28px;
		height: 28px;
	}
	.feature-box h3 {
		font-size: 1.1rem;
		margin-bottom: 8px;
	}
	.feature-box p {
		font-size: 0.92rem;
		line-height: 1.55;
	}
	.features-section {
		padding-bottom: 8px;
	}

	/* El logo del pie medía 200 px de ancho, más que el de la cabecera. */
	.site-footer .footer-logo {
		max-width: 130px;
	}

	/* Rendimiento: el desenfoque de fondo sobre muchas tarjetas y los dos halos
	   de 80 px del titular son de lo más caro de pintar en un móvil, y en una
	   pantalla pequeña casi no se notan. */
	.category-card,
	.features-wrap,
	.btn-outline {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
	.category-card {
		background: rgba(21, 24, 33, 0.92);
	}
	.home-hero::before,
	.home-hero::after {
		filter: none;
		opacity: 0.6;
	}
}

/* Quien pidió menos movimiento al sistema no ve latidos ni saltos. */
@media (prefers-reduced-motion: reduce) {
	.stock-indicator::before {
		animation: none;
	}
	.category-card,
	body .dss-product-card,
	.cat-icon,
	.feat-icon-wrap,
	.btn,
	.btn-buy,
	.view-all {
		transition: none;
	}
	.category-card:hover,
	body .dss-product-card:hover,
	.btn:hover,
	.btn-buy:hover,
	.view-all:hover {
		transform: none;
	}
}