/*
Theme Name: Astra Child
Theme URI: https://wpastra.com/
Description: Child theme de Astra, preparado para WooCommerce.
Author:
Author URI:
Template: astra
Version: 1.2.1
Requires at least: 5.3
Tested up to: 6.6
Requires PHP: 7.4
WC requires at least: 3.0
WC tested up to: 11.0.1
Text Domain: astra-child
*/

/* ==========================================================================
   PAMPA MASCOTAS — Tema visual (WooCommerce)
   Solo estilos y layout. No se toca logica de carrito/checkout/totales.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variables de marca
   Cambiar el tono del acento (o cualquier color) se hace SOLO aca.
   -------------------------------------------------------------------------- */
:root {
	--pm-verde: #274C3A;
	--pm-verde-oscuro: #1c3a2c;   /* hover/estado activo sobre verde */
	--pm-blanco: #FFFFFF;
	--pm-mostaza: #D9A441;
	--pm-mostaza-hover: #c1902f; /* hover/estado activo sobre mostaza */
	--pm-texto: #24322b;         /* texto general sobre blanco, mas suave que negro puro */
	--pm-borde: #e4e8e5;         /* separadores sutiles */
	--pm-fondo-suave: #f4f6f4;   /* fondos alternos livianos (totales, tablas) */
	--pm-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   1.5 Barra de anuncio
   Estatica (no fixed), en todas las paginas, inyectada por functions.php
   via el hook 'astra_header_before' (arriba del <header>, sin tocar
   header.php). Dismissible con localStorage, ver assets/js/announcement-bar.js.
   -------------------------------------------------------------------------- */
.pm-announcement-bar {
	background-color: var(--pm-mostaza);
}

.pm-announcement-inner {
	position: relative;
	max-width: 1240px;
	margin: 0 auto;
	padding: 0.6em 2.5rem;
	text-align: center;
}

.pm-announcement-text {
	margin: 0;
	color: var(--pm-blanco);
	font-family: var(--pm-font);
	font-size: 0.85rem;
	font-weight: 600;
}

.pm-announcement-close {
	position: absolute;
	top: 50%;
	right: 0.75rem;
	transform: translateY(-50%);
	background: none;
	border: none;
	color: var(--pm-blanco);
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
	padding: 0.25rem;
	transition: opacity 0.2s ease;
}

.pm-announcement-close:hover,
.pm-announcement-close:focus {
	opacity: 0.7;
}

@media (max-width: 768px) {
	.pm-announcement-inner {
		padding: 0.6em 2.25rem;
	}

	.pm-announcement-text {
		font-size: 0.78rem;
	}
}

/* --------------------------------------------------------------------------
   2. Header
   Fondo blanco, logo en imagen, menu/cart/cuenta en verde.
   -------------------------------------------------------------------------- */
#masthead,
.main-header-bar {
	background-color: var(--pm-blanco);
	border-bottom: 1px solid var(--pm-borde);
}

/* Header pegajoso: se usa sticky (no fixed) para que siga ocupando su
   espacio normal en el flujo del documento (nada se superpone ni salta al
   activarse) y solo se "pegue" arriba al hacer scroll. z-index alto para
   quedar por encima del hero full-bleed (que llega a z-index:3 en sus
   flechas/puntos) y de cualquier otro contenido de la pagina. */
#masthead {
	position: sticky;
	top: 0;
	z-index: 999;
}

/* Logo (imagen), inyectado via el filtro 'astra_logo' en functions.php. */
.pm-site-logo-link {
	display: inline-flex;
	align-items: center;
}

.pm-site-logo-img {
	display: block;
	height: auto;
	max-height: 52px;
	width: auto;
}

/* Fallback de texto: por si el filtro del logo no llega a aplicarse en
   algun contexto (ej. preview del Customizer). */
.site-branding .site-title,
.site-branding .site-title a,
.ast-site-identity .site-title a {
	font-family: var(--pm-font);
	font-weight: 800;
	font-size: 1.5rem;
	letter-spacing: -0.02em;
	color: var(--pm-verde);
	text-decoration: none;
}

.site-branding .site-title a:hover,
.ast-site-identity .site-title a:hover {
	color: var(--pm-verde);
	opacity: 0.85;
}

.site-branding .site-description {
	font-family: var(--pm-font);
	color: var(--pm-texto);
}

/* Menu principal (ej: Tienda) */
.main-header-menu.ast-nav-menu > li > a,
.ast-header-navigation .menu-link {
	font-family: var(--pm-font);
	color: var(--pm-verde);
	font-weight: 600;
}

.main-header-menu.ast-nav-menu > li > a:hover,
.main-header-menu.ast-nav-menu > li.current-menu-item > a,
.main-header-menu.ast-nav-menu > li.current_page_item > a {
	color: var(--pm-mostaza-hover);
}

.main-header-menu .sub-menu {
	background-color: var(--pm-blanco);
	border: 1px solid var(--pm-borde);
}

.main-header-menu .sub-menu a {
	color: var(--pm-verde);
	font-family: var(--pm-font);
}

.main-header-menu .sub-menu a:hover {
	color: var(--pm-mostaza-hover);
}

/* Boton hamburguesa (mobile) */
.menu-toggle.main-header-menu-toggle,
.mobile-menu-toggle-icon,
.mobile-menu-toggle-icon svg {
	color: var(--pm-verde);
	fill: var(--pm-verde);
}

/* Carrito (icono en el header) */
.ast-site-header-cart-li a,
.ast-site-header-cart .ast-woo-header-cart-title,
.ast-site-header-cart .ast-woo-header-cart-total,
.ast-addon-cart-wrap a {
	color: var(--pm-verde);
}

.ast-site-header-cart-li a svg,
.ast-site-header-cart-li a svg path {
	fill: var(--pm-verde);
}

.ast-site-header-cart .ast-cart-menu-wrap .count {
	background-color: var(--pm-mostaza);
	color: var(--pm-blanco);
	font-weight: 700;
}

/* "Mi cuenta" */
.ast-header-account-wrap a,
.ast-header-account-wrap .ast-header-account-text {
	color: var(--pm-verde);
	font-family: var(--pm-font);
	font-weight: 600;
}

.ast-header-account-wrap a:hover {
	color: var(--pm-mostaza-hover);
}

/* Cajon de carrito lateral (mini-cart drawer) */
.astra-cart-drawer,
.astra-cart-drawer-header {
	background-color: var(--pm-blanco);
}

.astra-cart-drawer-title {
	color: var(--pm-verde);
	font-family: var(--pm-font);
}

/* --------------------------------------------------------------------------
   3. Botones (marco general, usado en tienda, ficha de producto y carrito)
   -------------------------------------------------------------------------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	background-color: var(--pm-mostaza);
	color: var(--pm-blanco);
	border: none;
	border-radius: 6px;
	font-family: var(--pm-font);
	font-weight: 700;
	letter-spacing: 0.01em;
	transition: background-color 0.2s ease;
}

.woocommerce a.button:hover,
.woocommerce a.button:focus,
.woocommerce button.button:hover,
.woocommerce button.button:focus,
.woocommerce input.button:hover,
.woocommerce input.button:focus,
.woocommerce #respond input#submit:hover {
	background-color: var(--pm-mostaza-hover);
	color: var(--pm-blanco);
}

.woocommerce a.button.loading,
.woocommerce button.button.disabled,
.woocommerce input.button.disabled {
	opacity: 0.6;
}

/* Selector de cantidad en tarjetas de loop (shop, categorias, destacados,
   y cualquier seccion nueva que use el mismo template de producto).
   El input es el real de woocommerce_quantity_input(); los botones -/+
   son puramente visuales (ver assets/js/loop-quantity.js). */
/* Stepper como una sola "pildora" con borde exterior, en vez de 3 piezas
   sueltas cada una con su propio borde finito (eso era lo que se veia
   desprolijo: bordes muy tenues, numero pegado a los botones). El
   selector .pm-loop-quantity .quantity .qty (3 clases) es a proposito mas
   especifico que la regla generica ".quantity .qty" de la ficha de
   producto individual (2 clases, mas abajo en el archivo): con la misma
   especificidad hubiera ganado esa por venir despues en el archivo, y acá
   necesitamos un tratamiento distinto (sin borde propio, es parte de la
   pildora). */
.pm-loop-quantity {
	display: inline-flex;
	align-items: stretch;
	margin: 0 0 0.7em;
	border: 1px solid rgba(39, 76, 58, 0.28);
	border-radius: 8px;
	overflow: hidden;
}

.pm-loop-quantity .quantity {
	margin: 0;
}

.pm-loop-quantity .quantity .qty {
	width: 48px;
	height: 36px;
	padding: 0 0.4em;
	border: none;
	border-left: 1px solid rgba(39, 76, 58, 0.28);
	border-right: 1px solid rgba(39, 76, 58, 0.28);
	border-radius: 0;
	color: var(--pm-texto);
	font-weight: 700;
	text-align: center;
	-moz-appearance: textfield;
}

.pm-loop-quantity .quantity .qty::-webkit-outer-spin-button,
.pm-loop-quantity .quantity .qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.pm-qty-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	border: none;
	border-radius: 0;
	background-color: var(--pm-fondo-suave);
	color: var(--pm-verde);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.pm-qty-btn:hover,
.pm-qty-btn:focus-visible {
	background-color: var(--pm-verde);
	color: var(--pm-blanco);
	outline: none;
}

/* Categoria nativa de Astra en el loop de producto (astra_woo_shop_parent_category(),
   ver functions.php). Es texto plano (sin link), asi que no necesita
   selector aparte para el color de un <a>. */
.ast-woo-product-category {
	display: block;
	color: var(--pm-texto);
	opacity: 0.65;
	font-family: var(--pm-font);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	margin: 0 0 0.3em;
}

/* Espaciado compacto y consistente dentro de cada tarjeta del loop:
   categoria -> titulo -> precio -> cantidad -> boton, sin saltos de mas. */
.astra-shop-summary-wrap .woocommerce-loop-product__title {
	margin: 0 0 0.35em;
	font-family: var(--pm-font);
	line-height: 1.3;
}

.astra-shop-summary-wrap .price {
	display: block;
	margin: 0 0 0.8em;
}

/* El margen del stepper en si ya lo define .pm-loop-quantity (seccion de
   arriba); esta regla quedaba duplicada con un valor distinto (0.6em vs
   0.7em) que terminaba ganando por especificidad sin motivo real. */

/* --------------------------------------------------------------------------
   4. Ficha de producto individual
   -------------------------------------------------------------------------- */
.woocommerce div.product {
	background-color: var(--pm-blanco);
}

/* Mas espacio para la foto: 55% galeria / 42% info (vs 48/48 de base) */
.woocommerce div.product div.images {
	width: 55%;
}

.woocommerce div.product div.summary {
	width: 42%;
}

.woocommerce div.product div.images img,
.woocommerce div.product .woocommerce-product-gallery__image img {
	border-radius: 12px;
	border: 1px solid var(--pm-borde);
}

.woocommerce div.product div.thumbnails a {
	border-radius: 8px;
	overflow: hidden;
}

.woocommerce div.product .product_title {
	font-family: var(--pm-font);
	color: var(--pm-texto);
}

/* Precio destacado en verde oscuro */
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins {
	color: var(--pm-verde);
	font-weight: 800;
	font-size: 1.6rem;
}

.woocommerce div.product p.price del,
.woocommerce div.product span.price del {
	color: #9aa39d;
	opacity: 1;
	font-weight: 400;
	font-size: 1.05rem;
}

/* Cartel de oferta */
.woocommerce span.onsale {
	background-color: var(--pm-mostaza);
	color: var(--pm-blanco);
	font-family: var(--pm-font);
	font-weight: 700;
}

/* Boton "Agregar al carrito" en la ficha de producto */
.woocommerce div.product .single_add_to_cart_button {
	padding: 1em 2.5em;
	font-size: 1.05rem;
}

.quantity .qty {
	border: 1px solid var(--pm-borde);
	border-radius: 6px;
	color: var(--pm-texto);
}

/* Tabs (descripcion / info adicional / reviews) */
.woocommerce-tabs ul.tabs li a {
	color: var(--pm-texto);
	font-family: var(--pm-font);
}

.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li a:hover {
	color: var(--pm-verde);
}

.woocommerce-tabs ul.tabs li.active {
	border-bottom: 2px solid var(--pm-mostaza);
}

/* Barra de compra fija en mobile (si esta activada en Astra) */
.ast-sticky-add-to-cart {
	background-color: var(--pm-blanco);
	border-top: 1px solid var(--pm-borde);
}

.ast-sticky-add-to-cart-title {
	color: var(--pm-texto);
}

.ast-sticky-add-to-cart-action-price {
	color: var(--pm-verde);
	font-weight: 800;
}

/* --------------------------------------------------------------------------
   5. Pagina de carrito
   -------------------------------------------------------------------------- */
.woocommerce-cart table.cart {
	background-color: var(--pm-blanco);
	border: 1px solid var(--pm-borde);
	font-family: var(--pm-font);
}

.woocommerce-cart table.cart thead th {
	background-color: var(--pm-verde);
	color: var(--pm-blanco);
	font-weight: 700;
}

.woocommerce-cart table.cart td.product-name a {
	color: var(--pm-texto);
	font-weight: 600;
}

.woocommerce-cart table.cart td.product-price .amount,
.woocommerce-cart table.cart td.product-subtotal .amount {
	color: var(--pm-verde);
	font-weight: 700;
}

.woocommerce-cart table.cart .product-remove a.remove {
	color: var(--pm-mostaza);
}

.woocommerce-cart table.cart .product-remove a.remove:hover {
	background-color: var(--pm-mostaza);
	color: var(--pm-blanco);
}

/* Caja de totales */
.woocommerce-cart .cart-collaterals .cart_totals {
	background-color: var(--pm-fondo-suave);
	border: 1px solid var(--pm-borde);
	border-radius: 8px;
	padding: 1.5em;
}

.woocommerce-cart .cart_totals h2 {
	color: var(--pm-verde);
	font-family: var(--pm-font);
}

.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td {
	color: var(--pm-texto);
	border-color: var(--pm-borde);
}

.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td,
.woocommerce-cart .cart_totals .order-total .amount {
	color: var(--pm-verde);
	font-weight: 800;
	font-size: 1.15rem;
}

/* Boton "Finalizar compra" */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	display: block;
	text-align: center;
	padding: 1em;
	font-size: 1.05rem;
}

/* --------------------------------------------------------------------------
   6. Mobile (la mayoria del trafico entra por anuncios de Meta)
   Breakpoint alineado al que ya usa Astra/WooCommerce (768px).
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.site-branding .site-title,
	.site-branding .site-title a {
		font-size: 1.25rem;
	}

	.pm-site-logo-img {
		max-height: 40px;
	}

	.woocommerce div.product div.images,
	.woocommerce div.product div.summary {
		width: 100%;
		float: none;
	}

	.woocommerce div.product div.images {
		margin-bottom: 1.25em;
	}

	.woocommerce div.product .single_add_to_cart_button {
		width: 100%;
		text-align: center;
	}

	.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
		width: 100%;
	}
}

/* ==========================================================================
   7. Home (front-page.php)
   ========================================================================== */

/* Los fondos del hero y de las categorias se generan inline por PHP
   (front-page.php), asi que no hace falta ninguna clase .pm-ph-N aca. */

.pm-section {
	padding: 2.5rem 0;
}

.pm-section-title {
	font-family: var(--pm-font);
	color: var(--pm-verde);
	font-size: 1.6rem;
	font-weight: 800;
	margin: 0 0 1.75rem;
	text-align: center;
}

/* Causa real de que los titulos de seccion quedaran en una columna angosta
   a la izquierda del contenido: Astra trae
   "@media (min-width:922px){.site-content .ast-container{display:flex}}"
   pensado para el layout de #primary + sidebar. Al ser un selector
   descendiente (no hijo directo), tambien alcanza a los .ast-container
   propios que usamos DENTRO de cada seccion del home para separar
   titulo/contenido -eso ponia el <h2> y el bloque de abajo en fila en vez
   de apilados, y el <h2> se encogia a su ancho de contenido como si fuera
   una sidebar. Se restaura el apilado normal solo en los .ast-container
   que son nuestros; el .ast-container de mas afuera (el de header.php) no
   se toca, ese si necesita el flex para el layout con sidebar real. */
.pm-hero .ast-container,
.pm-section .ast-container {
	display: block;
}

/* NO poner overflow-x:hidden en .pm-home (ni en ningun ancestro directo del
   hero con ancho limitado): es la causa real de que .pm-hero-full-bleed no
   se viera full-width. La clase en si estaba bien aplicada y con los
   valores correctos (width:100vw; margin-left:-50vw), no era un tema de
   especificidad -pura contencion: .pm-home hereda su ancho de .ast-container
   (bastante menor a 100vw), y overflow-x:hidden en un ancestro recorta
   cualquier hijo que se salga de esa caja, incluida la fuga intencional del
   breakout. Astra ya pone 'body{overflow-x:hidden}' de forma global (ver
   astra/assets/css/minified/style.min.css) para el mismo proposito de evitar
   scroll horizontal, y ese SI es seguro porque <body> no tiene un ancho
   limitado como .pm-home -asi que no hace falta duplicarlo aca. */

/* El espacio vacio entre el header y el hero NO viene de .pm-home ni de
   .pm-hero-full-bleed (ninguno de los dos tiene margin/padding-top,
   revisado). Viene de Astra: #primary trae "margin:4em 0" por defecto
   (astra/assets/css/minified/style.min.css), pensado para el espaciado
   vertical normal de paginas/entradas. Con el hero boxeado ese margen no
   se notaba tanto; full-bleed y pegado al header, se ve como un hueco
   blanco antes del banner. Se anula solo en el home (body.home, clase que
   WordPress agrega solo) para no afectar el espaciado del resto del sitio. */
body.home #primary {
	margin-top: 0;
}

/* --- 7.1 Hero / slider ------------------------------------------------------
   Slider en si: CSS puro (radios + :checked). Autoplay y flechas: JS en
   assets/js/hero-slider.js. -------------------------------------------------- */
.pm-hero {
	position: relative;
	overflow: hidden;
}

/* Rompe el max-width de .ast-container para que el fondo del hero llegue
   de punta a punta. El contenido de texto sigue centrado a ancho normal
   porque cada slide envuelve su .pm-hero-content en su propio .ast-container
   (ver front-page.php), que no hereda este breakout. Clase generica -se
   reusa igual en el carrusel de categorias, ver seccion 7.3-. */
.pm-full-bleed {
	width: 100vw;
	max-width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

.pm-hero-input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.pm-hero-slides {
	position: relative;
	height: 500px;
}

.pm-hero-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	background-size: cover;
	background-position: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.6s ease, visibility 0.6s ease;
}

/* Todas las slides quedan SIEMPRE position:absolute (activa e inactivas):
   asi se superponen exactamente en el mismo lugar durante el fade. La
   version anterior ponia position:relative en la slide activa, lo que la
   sacaba del apilado absoluto, estiraba .pm-hero-slides al alto de su
   contenido y empujaba el resto de la pagina hacia abajo durante la
   transicion. Los puntos de navegacion (.pm-hero-dots) se posicionan
   respecto a .pm-hero -no a .pm-hero-slides-, asi que con la altura fija
   de arriba quedan siempre fijos y nunca se mueven. */
#pm-hero-1:checked ~ .pm-hero-slides .pm-hero-slide-1,
#pm-hero-2:checked ~ .pm-hero-slides .pm-hero-slide-2,
#pm-hero-3:checked ~ .pm-hero-slides .pm-hero-slide-3,
#pm-hero-4:checked ~ .pm-hero-slides .pm-hero-slide-4 {
	opacity: 1;
	visibility: visible;
	z-index: 2;
}

.pm-hero-content {
	max-width: 560px;
	padding: 2.5rem 0;
}

.pm-hero-badge {
	display: inline-block;
	padding: 0.4em 1em;
	margin-bottom: 1.1em;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 999px;
	background-color: rgba(255, 255, 255, 0.12);
	color: var(--pm-blanco);
	font-family: var(--pm-font);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.pm-hero-title {
	margin: 0 0 0.5em;
	color: var(--pm-blanco);
	font-family: var(--pm-font);
	font-size: 2.5rem;
	font-weight: 800;
	line-height: 1.15;
}

.pm-hero-subtitle {
	margin: 0 0 1.75em;
	color: var(--pm-blanco);
	font-family: var(--pm-font);
	font-size: 1.05rem;
	opacity: 0.92;
}

.pm-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
}

.pm-btn {
	display: inline-block;
	padding: 0.85em 1.8em;
	border-radius: 6px;
	font-family: var(--pm-font);
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.pm-btn-solid {
	background-color: var(--pm-mostaza);
	color: var(--pm-blanco);
	border: 2px solid var(--pm-mostaza);
}

.pm-btn-solid:hover,
.pm-btn-solid:focus {
	background-color: var(--pm-mostaza-hover);
	border-color: var(--pm-mostaza-hover);
	color: var(--pm-blanco);
}

.pm-btn-outline {
	background-color: transparent;
	color: var(--pm-blanco);
	border: 2px solid var(--pm-blanco);
}

.pm-btn-outline:hover,
.pm-btn-outline:focus {
	background-color: var(--pm-blanco);
	color: var(--pm-verde);
}

.pm-hero-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 50%;
	background-color: rgba(39, 76, 58, 0.35);
	color: var(--pm-blanco);
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* El stroke se fija explicito en vez de depender solo de currentColor
   heredado del boton: es mas robusto entre navegadores y no depende de
   la cadena de herencia de "color" a traves de un <button>. */
.pm-hero-arrow svg {
	display: block;
	width: 20px;
	height: 20px;
	stroke: var(--pm-blanco);
	fill: none;
	pointer-events: none;
}

.pm-hero-arrow:hover,
.pm-hero-arrow:focus {
	background-color: var(--pm-mostaza);
	border-color: var(--pm-mostaza);
}

.pm-hero-arrow-prev {
	left: 1.25rem;
}

.pm-hero-arrow-next {
	right: 1.25rem;
}

.pm-hero-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 1.25rem;
	z-index: 3;
	display: flex;
	justify-content: center;
	gap: 0.6rem;
}

.pm-hero-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.45);
	border: 1px solid rgba(255, 255, 255, 0.7);
	cursor: pointer;
	transition: background-color 0.2s ease;
}

#pm-hero-1:checked ~ .pm-hero-dots label[for="pm-hero-1"],
#pm-hero-2:checked ~ .pm-hero-dots label[for="pm-hero-2"],
#pm-hero-3:checked ~ .pm-hero-dots label[for="pm-hero-3"],
#pm-hero-4:checked ~ .pm-hero-dots label[for="pm-hero-4"] {
	background-color: var(--pm-mostaza);
	border-color: var(--pm-mostaza);
}

/* --- 7.2 Barra de beneficios ---------------------------------------------- */
.pm-benefits {
	background-color: var(--pm-fondo-suave);
}

.pm-benefits-row {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
}

.pm-benefit {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	flex: 1 1 220px;
}

.pm-benefit-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: rgba(39, 76, 58, 0.08);
	color: var(--pm-verde);
}

.pm-benefit-icon svg {
	width: 22px;
	height: 22px;
}

.pm-benefit-copy {
	display: flex;
	flex-direction: column;
	font-family: var(--pm-font);
}

.pm-benefit-title {
	color: var(--pm-verde);
	font-size: 0.95rem;
	font-weight: 700;
}

.pm-benefit-text {
	color: var(--pm-texto);
	font-size: 0.85rem;
	opacity: 0.85;
}

/* --- 7.3 Carrusel de categorias ---------------------------------------------
   Full-bleed (.pm-full-bleed, mismo mecanismo que el hero) + scroll nativo
   con snap, en vez de una grilla fija de 4 columnas. El titulo y el link
   "Ver todas" quedan afuera, en .ast-container normal (ver front-page.php),
   asi que no se mueven ni escalan con el carrusel. -------------------------- */
.pm-categories-carousel-wrap {
	position: relative;
}

.pm-categories-carousel {
	display: flex;
	/* Centrado por defecto (desktop): con las 4 tarjetas fijas en 340px,
	   la mayoria de los anchos de escritorio las muestra enteras, y sin
	   esto quedaban pegadas a la izquierda en vez de centradas -el intento
	   anterior dependia de JS midiendo overflow para decidir esto, resulto
	   poco confiable (ver category-carousel.js), asi que se pasa a CSS
	   puro. En mobile (abajo) se vuelve a flex-start: ahi las tarjetas son
	   80vw y SIEMPRE hay que scrollear, centrar no tendria sentido y
	   ademas puede confundir el punto de partida del scroll. */
	justify-content: center;
	gap: 1.5rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	/* Mismo padding que tendria el contenido normal dentro de .ast-container
	   (max-width real del tema: 1240px, gutter minimo: 20px), asi la primera
	   tarjeta arranca alineada con el titulo de arriba en vez de pegada al
	   borde de la pantalla. */
	padding: 0.5rem max(20px, calc((100vw - 1240px) / 2)) 1.5rem;
}

.pm-categories-carousel::-webkit-scrollbar {
	display: none;
}

/* 4 tarjetas grandes (antes eran 8 chicas en grilla). aspect-ratio en vez de
   min-height fijo: mantiene la proporcion 4:3 -mas ancha que alta, pero con
   presencia real- sea cual sea el ancho de tarjeta en cada breakpoint.
   flex-basis fija (no 1fr): el carrusel necesita que las tarjetas no se
   angosten para "caber todas", sino que se corten y arranque el scroll. */
.pm-cat-card {
	position: relative;
	display: flex;
	align-items: flex-end;
	flex: 0 0 340px;
	aspect-ratio: 4 / 3;
	scroll-snap-align: start;
	border-radius: 12px;
	background-size: cover;
	background-position: center;
	overflow: hidden;
	text-decoration: none;
	/* Borde transparente en reposo (no solo "sin borde"): asi el hover solo
	   cambia el color, nunca el tamaño de la caja (box-sizing:border-box es
	   global en el sitio), sin saltos de layout. */
	border: 2px solid transparent;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.pm-cat-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.55) 100%);
	transition: background-color 0.2s ease;
}

.pm-cat-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 24px rgba(39, 76, 58, 0.18);
	border-color: var(--pm-mostaza);
}

.pm-cat-card:hover::before {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.65) 100%);
}

.pm-cat-info {
	position: relative;
	z-index: 1;
	padding: 1.5rem;
	width: 100%;
}

.pm-cat-name {
	display: block;
	color: var(--pm-blanco);
	font-family: var(--pm-font);
	font-weight: 800;
	font-size: 1.4rem;
}

.pm-cat-count {
	font-weight: 500;
	opacity: 0.75;
	font-size: 1rem;
}

.pm-cat-desc {
	display: block;
	margin-top: 0.25em;
	color: rgba(255, 255, 255, 0.85);
	font-family: var(--pm-font);
	font-weight: 400;
	font-size: 0.85rem;
}

/* Flechas del carrusel: mismo componente visual que .pm-hero-arrow (circulo +
   chevron), pero en variante solida -aca no hay foto de fondo detras para
   justificar el fondo semi-transparente del hero, asi que se pierde el
   contraste con la seccion blanca. Reusa el bloque .pm-hero-arrow (forma,
   svg, transiciones) via la misma clase en el HTML y solo pisa color/fondo/
   posicion aca.

   Posicionadas respecto a .pm-categories-carousel-wrap (position:relative,
   full-bleed a 100vw), pegadas al borde de LA PANTALLA -no al gutter del
   track de tarjetas-. El intento anterior las alineaba con el padding del
   track (misma formula calc() que el gutter del contenido), asi que
   terminaban cayendo casi encima de la primera/ultima tarjeta en vez de
   flotar afuera del contenido. z-index mas alto que cualquier elemento de
   la tarjeta (.pm-cat-info usa z-index:1) para que nunca queden tapadas.

   Ocultas en desktop SIEMPRE (display:none fijo, no depende de deteccion
   por JS de si hace falta scroll -esa deteccion resulto poco confiable en
   la practica-). Se muestran de nuevo unicamente en el @media mobile de
   mas abajo, donde el scroll si hace falta siempre (tarjetas a 80vw). */
.pm-categories-arrow {
	display: none;
	top: 50%;
	z-index: 5;
	background-color: var(--pm-verde);
	border-color: var(--pm-verde);
}

.pm-categories-arrow:hover,
.pm-categories-arrow:focus {
	background-color: var(--pm-mostaza);
	border-color: var(--pm-mostaza);
}

.pm-categories-arrow-prev {
	left: 1rem;
}

.pm-categories-arrow-next {
	right: 1rem;
}

.pm-categories-arrow:disabled {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

.pm-categories-all {
	display: block;
	margin-top: 1.75rem;
	text-align: center;
	color: var(--pm-verde);
	font-family: var(--pm-font);
	font-weight: 700;
	font-size: 0.95rem;
	text-decoration: none;
	transition: color 0.2s ease;
}

.pm-categories-all:hover,
.pm-categories-all:focus {
	color: var(--pm-mostaza-hover);
}

/* --- 7.4 Tarjetas de producto (loop) -----------------------------------------
   Antes esto estaba scopeado a .pm-products-grid (solo Destacados/Novedades/
   Ofertas del mes en el home) a proposito, para no tocar la Tienda/paginas
   de categoria reales. Se saca el scope: el pedido ahora es que se vea
   exactamente igual en todos lados, asi que estas reglas aplican a
   cualquier .woocommerce ul.products li.product del sitio (Tienda,
   categorias, relacionados, etc.), no solo al home. --------------------------- */
.woocommerce ul.products {
	margin: 0;
}

.woocommerce ul.products li.product {
	position: relative;
	background-color: var(--pm-blanco);
	border: 1px solid var(--pm-borde);
	border-radius: 12px;
	/* Sin padding: la imagen va edge-to-edge, pegada a los bordes
	   superior/laterales (ver .woocommerce-loop-product__link mas abajo).
	   El padding del texto vive en .astra-shop-summary-wrap. overflow:hidden
	   recorta la imagen exactamente al border-radius de la tarjeta. */
	padding: 0;
	overflow: hidden;
	/* Sombra sutil en reposo (antes no tenia ninguna hasta el hover, se
	   sentia "plana"), mas marcada consistente con las tarjetas de
	   categoria. */
	box-shadow: 0 2px 10px rgba(39, 76, 58, 0.06);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.woocommerce ul.products li.product:hover {
	box-shadow: 0 16px 32px rgba(39, 76, 58, 0.16);
	transform: translateY(-4px);
}

/* Imagen edge-to-edge: sin fondo/padding propio, toca los bordes de la
   tarjeta (el border-radius de arriba lo da overflow:hidden en el li). */
.woocommerce ul.products li.product .woocommerce-loop-product__link {
	display: block;
	margin: 0;
}

.woocommerce ul.products li.product img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0;
}

/* Badge de oferta superpuesto sobre la imagen, arriba a la izquierda, como
   etiqueta flotante. El color mostaza ya lo pone la regla global
   ".woocommerce span.onsale" (seccion 4); aca solo se resuelve la posicion.
   .ast-onsale-card es la variante que usa el "modern shop style" de Astra
   para el mismo badge -se cubren los dos por si el sitio usa una u otra. */
.woocommerce ul.products li.product .onsale,
.woocommerce ul.products li.product .ast-onsale-card {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 2;
	margin: 0;
}

.astra-shop-summary-wrap {
	padding: 1rem 1.25rem 1.5rem;
}

.woocommerce ul.products li.product .button {
	width: 100%;
	text-align: center;
}

/* --- 7.5 Mobile ------------------------------------------------------------ */
@media (max-width: 768px) {
	.pm-hero-slides {
		height: 380px;
	}

	.pm-hero-dots {
		bottom: 0.9rem;
	}

	.pm-hero-arrow {
		width: 34px;
		height: 34px;
	}

	.pm-hero-arrow svg {
		width: 16px;
		height: 16px;
	}

	.pm-hero-arrow-prev {
		left: 0.5rem;
	}

	.pm-hero-arrow-next {
		right: 0.5rem;
	}

	.pm-hero-title {
		font-size: 1.9rem;
	}

	.pm-benefits-row {
		gap: 1.1rem;
	}

	.pm-benefit {
		flex: 1 1 100%;
	}

	/* Tarjetas mas angostas en mobile, siempre mostrando un pedacito de la
	   siguiente para dar la pista visual de que se puede seguir deslizando. */
	.pm-cat-card {
		flex-basis: 80vw;
	}

	.pm-categories-carousel {
		justify-content: flex-start;
		gap: 1rem;
		padding-left: 20px;
		padding-right: 20px;
	}

	/* En mobile las tarjetas del carrusel de categorias son 80vw, asi que
	   siempre hay algo para deslizar: acá SI se muestran las flechas
	   (el default de arriba las oculta para desktop). */
	.pm-categories-arrow {
		display: flex;
	}

	/* Cualquier loop de producto (Tienda, categorias, Destacados/Novedades/
	   Ofertas del mes en el home): sin esto, las tarjetas quedaban
	   apretadas en mobile porque WooCommerce por defecto no reduce
	   columnas solo, usa "width:22.05%" fijo (float) sea cual sea el
	   ancho de pantalla -eso, no un font-size chico, era la causa real de
	   que texto e imagenes se vieran diminutos: no es que el contenido se
	   redujera, es que la caja entera media ~22% de un celular. Se pisa
	   con flexbox propio: 2 columnas hasta 768px, 1 columna hasta 480px
	   (ver el otro @media de abajo). No toca .pm-categories-carousel, que
	   ya funciona bien como carrusel horizontal con scroll. */
	.woocommerce ul.products {
		display: flex;
		flex-wrap: wrap;
		gap: 1.25rem;
	}

	.woocommerce ul.products li.product {
		float: none;
		width: auto;
		flex: 0 0 calc(50% - 0.625rem);
		margin: 0;
	}

	.pm-section {
		padding: 2rem 0;
	}
}

@media (max-width: 480px) {
	.woocommerce ul.products li.product {
		flex: 0 0 100%;
	}
}

/* --- 7.6 Newsletter --------------------------------------------------------- */
.pm-newsletter {
	background-color: var(--pm-verde);
}

.pm-newsletter-box {
	text-align: center;
	max-width: 640px;
	margin: 0 auto;
}

.pm-newsletter-title {
	margin: 0 0 0.4em;
	color: var(--pm-blanco);
	font-family: var(--pm-font);
	font-size: 1.6rem;
	font-weight: 800;
}

.pm-newsletter-subtitle {
	margin: 0 0 1.5em;
	color: rgba(255, 255, 255, 0.85);
	font-family: var(--pm-font);
	font-size: 1rem;
}

.pm-newsletter-form {
	display: flex;
	justify-content: center;
	gap: 0.75rem;
	margin: 0 0 1.25em;
	flex-wrap: wrap;
}

.pm-newsletter-input {
	flex: 1 1 260px;
	max-width: 320px;
	padding: 0.85em 1.1em;
	border: none;
	border-radius: 6px;
	font-family: var(--pm-font);
	font-size: 1rem;
}

.pm-newsletter-secondary {
	display: inline-block;
}

@media (max-width: 768px) {
	.pm-newsletter-form {
		flex-direction: column;
		align-items: stretch;
	}

	.pm-newsletter-input {
		max-width: none;
	}
}

/* ==========================================================================
   8. Footer (footer.php) — marca / navegacion / categorias / legal
   ========================================================================== */
.pm-site-footer {
	background-color: var(--pm-verde);
	padding: 3rem 0 0;
}

.pm-footer-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	/* Mas espacio entre columnas que antes (2rem -> 3rem). El
	   border-bottom + padding-bottom de aca abajo YA hacian de linea
	   divisoria sutil antes del copyright -no hacia falta agregar una
	   segunda, solo se mantiene. */
	gap: 3rem;
	padding-bottom: 2.5rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.pm-footer-logo-img {
	display: block;
	margin: 0 0 0.75em;
	height: auto;
	max-height: 40px;
	width: auto;
}

.pm-footer-logo {
	margin: 0 0 0.5em;
	color: var(--pm-blanco);
	font-family: var(--pm-font);
	font-size: 1.3rem;
	font-weight: 800;
}

.pm-footer-tagline {
	margin: 0 0 1.25em;
	color: rgba(255, 255, 255, 0.75);
	font-family: var(--pm-font);
	font-size: 0.9rem;
	max-width: 26em;
}

.pm-footer-social {
	display: flex;
	gap: 0.75rem;
}

.pm-footer-social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.3);
	color: var(--pm-blanco);
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.pm-footer-social-link:hover,
.pm-footer-social-link:focus {
	background-color: var(--pm-mostaza);
	border-color: var(--pm-mostaza);
	color: var(--pm-verde);
}

.pm-footer-title {
	margin: 0 0 1em;
	color: var(--pm-mostaza);
	font-family: var(--pm-font);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.pm-footer-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6em;
}

.pm-footer-list a {
	color: rgba(255, 255, 255, 0.85);
	font-family: var(--pm-font);
	font-size: 0.92rem;
	text-decoration: none;
	transition: color 0.2s ease;
}

.pm-footer-list a:hover,
.pm-footer-list a:focus {
	color: var(--pm-mostaza);
}

.pm-footer-bottom {
	padding: 1.25rem 0;
	text-align: center;
}

.pm-footer-bottom p {
	margin: 0;
	color: rgba(255, 255, 255, 0.65);
	font-family: var(--pm-font);
	font-size: 0.8rem;
}

@media (max-width: 1024px) {
	.pm-footer-grid {
		grid-template-columns: 1fr 1fr;
		row-gap: 2rem;
	}

	.pm-footer-brand {
		grid-column: 1 / -1;
	}
}

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