/*
Theme Name: Ponderosa CR — tema hijo de Twenty Twenty-Five
Theme URI: https://ponderosacostarica.com
Description: Tema hijo de Twenty Twenty-Five para el nuevo stack de Ponderosa Costa Rica (sitio de desarrollo devcr). Los tokens de diseño (paleta, tipografías, escala) viven en theme.json, que es la fuente de verdad; aquí solo van el contenedor, la alineación de header/contenido/pie y ajustes que no son tokens.
Author: Equipo Ponderosa CR
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ponderosa-child
Tags: block-theme, full-site-editing, custom-colors, custom-typography
*/

.pp-tienda-hero {
	background: linear-gradient(180deg, #3c325a 0%, #524579 100%);
	padding-block: 46px 48px;
}

.pp-tienda-hero-cuerpo {
	gap: 44px;
}

.pp-tienda-hero-texto {
	max-width: 560px;
}

.pp-tienda-hero .woocommerce-breadcrumb a {
	color: inherit;
	text-decoration: none;
}

.pp-tienda-hero .woocommerce-breadcrumb a:hover {
	color: #ffffff;
}

.pp-tienda-sub {
	font-family: var(--wp--preset--font-family--roboto);
	font-size: clamp(15px, 1.2vw, 17px);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.86);
	margin-block: 14px 0;
	max-width: 46ch;
}

/* `0 1` y no `0 0`: entre 900 y 1080 px la columna de texto y la foto no caben rígidas y
   la foto tiene que poder encogerse (sin esto desbordaba en tablet). */
.pp-tienda-hero-foto {
	flex: 0 1 520px;
	width: 520px;
	max-width: 52%;
	min-width: 0;
	margin: 0;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 18px 40px rgba(20, 14, 40, 0.35);
}

.pp-tienda-hero-foto img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 16px;
}

.pp-tienda-punto {
	gap: 8px;
}

.pp-tienda-punto .pp-punto-icono {
	color: rgba(255, 255, 255, 0.78);
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}

/* El bloque core/icon trae el SVG a 24 px; aquí se pide 18. */
.pp-tienda-punto .pp-punto-icono svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
	display: block;
}

.pp-tienda-punto .pp-punto-texto {
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: rgba(255, 255, 255, 0.92);
	margin: 0;
}

@media (max-width: 900px) {
	.pp-tienda-hero {
		padding-block: 30px 34px;
	
}

	.pp-tienda-hero-cuerpo {
		flex-direction: column;
		align-items: flex-start;
		gap: 22px;
	}

	.pp-tienda-hero-texto {
		max-width: none;
	}

	.pp-tienda-hero-foto {
		flex: none;
		width: 100%;
		max-width: 100%;
	}

.pp-tienda-hero-cuerpo > * {
	flex: 1 1 auto;
}