/*
Theme Name:   Solar Patagonia
Theme URI:    https://solarpatagonia.com
Description:  Child theme de Astra. Solo presentación. Colores, tipografía y botones globales viven en Personalizar > Global (Astra); acá va únicamente lo que el Customizer no resuelve. La lógica de negocio vive en el plugin hrb-core.
Author:       Federico Arce
Template:     astra
Version:      0.2.0
Requires PHP: 8.0
Text Domain:  solarpatagonia-child
*/

/* ==========================================================================
   Basado en el design system El Remanso (remanso-base.css), adaptado a
   WooCommerce. No se importa la hoja completa: reset, nav, hero y footer
   fijo pertenecen a una landing y romperían Astra.

   Índice
   1. Tokens
   2. Accesibilidad (foco)
   3. Botones (complemento de Personalizar > Global > Botones)
   4. Tarjetas de producto (catálogo) — sin barra/borde superior
   5. Badge de oferta (esquina asimétrica, firma de marca)
   6. Página de producto: título, nombre científico, precio
   7. Pestañas de producto (sin línea superior en la activa)
   8. Ficha botánica (hrb-core)
   9. Formularios (carrito, checkout, mi cuenta)
   10. Avisos de WooCommerce (sin borde superior)
   11. Movimiento reducido
   ========================================================================== */


/* 1. TOKENS ---------------------------------------------------------------
   Los colores base apuntan a la paleta global de Astra: se cambian en
   Personalizar > Global > Colores y este archivo los toma solo.
   Los fallbacks son los valores de marca por si la paleta se reinicia.
   Prefijo --hrb- para no chocar con variables de Astra o WooCommerce. */
:root {
	--hrb-gold:        var(--ast-global-color-0, #AD8020);
	--hrb-gold-text:   var(--ast-global-color-1, #8a6619); /* dorado para texto chico: contraste AA sobre blanco */
	--hrb-dark:        var(--ast-global-color-2, #33312B);
	--hrb-text-mid:    var(--ast-global-color-3, #5a5750);
	--hrb-bg:          var(--ast-global-color-4, #FFFFFF);
	--hrb-bg-warm:     var(--ast-global-color-5, #FAF8F4);
	--hrb-bg-dark:     var(--ast-global-color-6, #1A1916);
	--hrb-wine:        var(--ast-global-color-8, #702150);

	/* Derivados (transparencias): fijos, no dependen de la paleta. */
	--hrb-gold-light:    rgba(173, 128, 32, .12);
	--hrb-gold-soft:     rgba(173, 128, 32, .3);
	--hrb-wine-light:    rgba(112, 33, 80, .07);
	--hrb-text-muted:    #6a6760;
	--hrb-text-subtle:   #8a887f;
	--hrb-border:        rgba(51, 49, 43, .1);
	--hrb-border-strong: rgba(51, 49, 43, .14);

	--hrb-radius-sharp: 2px;
	--hrb-radius-md:    6px;
	--hrb-radius-lg:    7px;
	--hrb-radius-xl:    16px;

	--hrb-tracking-wide:    .04em;
	--hrb-tracking-wider:   .1em;
	--hrb-tracking-widest:  .18em;

	--hrb-ease:       cubic-bezier(.22, 1, .36, 1);
	--hrb-transition: .45s var(--hrb-ease);
}


/* 2. ACCESIBILIDAD --------------------------------------------------------- */
:focus-visible {
	outline: 2px solid var(--hrb-gold);
	outline-offset: 3px;
}


/* 3. BOTONES ---------------------------------------------------------------
   Color, fondo, radio y padding se definen en Personalizar > Global > Botones.
   Acá solo la tipografía y el movimiento de marca. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.woocommerce-page button.button,
.ast-button {
	font-weight: 500;
	transition: background-color var(--hrb-transition), color var(--hrb-transition), transform .25s var(--hrb-ease);
}

@media (hover: hover) {
	.woocommerce a.button:hover,
	.woocommerce button.button:hover,
	.woocommerce-page a.button:hover,
	.woocommerce-page button.button:hover {
		transform: translateY(-2px);
	}
}

.woocommerce a.button:active,
.woocommerce button.button:active {
	transform: scale(.97);
}


/* 4. TARJETAS DE PRODUCTO (catálogo, categorías, relacionados) --------------
   Borde fino en los cuatro lados y elevación al hover. Sin barra ni borde
   superior: el hover se marca con el borde dorado suave y una sombra. */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	display: flex;
	flex-direction: column;
	background: var(--hrb-bg);
	border: 1px solid var(--hrb-border);
	border-radius: var(--hrb-radius-sharp);
	overflow: hidden;
	transition:
		transform var(--hrb-transition),
		border-color var(--hrb-transition),
		box-shadow var(--hrb-transition);
}

@media (hover: hover) {
	.woocommerce ul.products li.product:hover,
	.woocommerce-page ul.products li.product:hover {
		transform: translateY(-4px);
		border-color: var(--hrb-gold-soft);
		box-shadow: 0 14px 28px -18px rgba(51, 49, 43, .35);
	}
}

.woocommerce ul.products li.product .astra-shop-summary-wrap {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1rem 1.25rem 1.5rem;
}

/* Categoría arriba del título: eyebrow de marca. */
.woocommerce ul.products li.product .ast-woo-product-category {
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: var(--hrb-tracking-widest);
	text-transform: uppercase;
	color: var(--hrb-gold-text);
	margin-bottom: .35rem;
	opacity: 1;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--hrb-dark);
	margin-bottom: .5rem;
}

.woocommerce ul.products li.product .price {
	font-weight: 700;
	color: var(--hrb-dark);
	margin-bottom: 1rem;
}

.woocommerce ul.products li.product .price del {
	color: var(--hrb-text-subtle);
	font-weight: 400;
}

.woocommerce ul.products li.product .price ins {
	color: var(--hrb-wine);
	text-decoration: none;
}

/* El botón queda siempre abajo, aunque los títulos tengan distinto largo. */
.woocommerce ul.products li.product .button {
	margin-top: auto;
	align-self: flex-start;
}


/* 5. BADGE DE OFERTA --------------------------------------------------------
   Esquina asimétrica (recta a la izquierda, curva a la derecha): el elemento
   signature de la marca, en vino. */
.woocommerce span.onsale,
.woocommerce-page span.onsale,
.woocommerce .ast-onsale-card {
	top: 1rem;
	left: 0;
	right: auto;
	min-width: 0;
	min-height: 0;
	width: auto;
	height: auto;
	margin: 0;
	padding: .55rem 1.1rem;
	line-height: 1;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: var(--hrb-tracking-wide);
	text-transform: uppercase;
	color: #fff;
	background: var(--hrb-wine);
	border: 0;
	border-radius: 0 var(--hrb-radius-xl) var(--hrb-radius-xl) 0;
}


/* 6. PÁGINA DE PRODUCTO ---------------------------------------------------- */
.woocommerce div.product .product_title {
	font-size: clamp(1.75rem, 3vw, 2.4rem);
	font-weight: 900;
	line-height: 1.1;
	color: var(--hrb-dark);
	margin-bottom: .4rem;
}

/* Nombre científico (hrb-core): cursiva, convención botánica. */
.hrb-sci-name {
	font-size: 1.05rem;
	font-style: italic;
	color: var(--hrb-gold-text);
	margin-bottom: 1.25rem;
}

.woocommerce div.product .summary .price {
	font-size: 1.6rem;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--hrb-dark);
}

.woocommerce div.product .summary .woocommerce-product-details__short-description {
	color: var(--hrb-text-mid);
	line-height: 1.75;
}

.woocommerce div.product div.images img {
	border-radius: var(--hrb-radius-sharp);
}


/* 7. PESTAÑAS DE PRODUCTO ---------------------------------------------------
   Patrón .tabs de la marca: línea inferior fina y subrayado dorado en la
   activa. Se anula la línea superior que Astra pone en la pestaña activa. */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0;
	margin-bottom: 2.5rem;
	border-bottom: 1px solid var(--hrb-border-strong);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
	display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	margin: 0 0 -1px;
	padding: 0;
	background: transparent;
	border: 0;
	border-bottom: 2.5px solid transparent;
	border-radius: 0;
	transition: border-color .25s;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	padding: 1rem 1.5rem;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: var(--hrb-tracking-wider);
	text-transform: uppercase;
	color: var(--hrb-text-subtle);
	transition: color .25s;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active,
.woocommerce div.product .woocommerce-tabs ul.tabs li:hover {
	border-bottom-color: var(--hrb-gold);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li:hover a {
	color: var(--hrb-gold-text);
}


/* 8. FICHA BOTÁNICA (hrb-core) ----------------------------------------------
   Datos en filas separadas por línea inferior (patrón acordeón de la marca).
   Precauciones destacadas en vino: es información de seguridad. */
.hrb-ficha {
	max-width: 46rem;
}

.hrb-ficha__datos {
	display: grid;
	grid-template-columns: minmax(10rem, max-content) 1fr;
	margin: 0 0 2rem;
}

.hrb-ficha__datos dt,
.hrb-ficha__datos dd {
	margin: 0;
	padding: .9rem 0;
	border-bottom: 1px solid var(--hrb-border);
}

.hrb-ficha__datos dt {
	padding-right: 2rem;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: var(--hrb-tracking-widest);
	text-transform: uppercase;
	color: var(--hrb-gold-text);
	align-self: center;
}

.hrb-ficha__datos dd {
	color: var(--hrb-dark);
}

.hrb-ficha__section {
	margin-top: 2rem;
}

.hrb-ficha__title {
	font-size: 1rem;
	font-weight: 900;
	letter-spacing: var(--hrb-tracking-wide);
	text-transform: uppercase;
	color: var(--hrb-dark);
	margin-bottom: .6rem;
}

.hrb-ficha__section p {
	color: var(--hrb-text-mid);
	line-height: 1.75;
}

.hrb-ficha__section p:last-child {
	margin-bottom: 0;
}

.hrb-ficha__section--precauciones {
	padding: 1.25rem 1.5rem;
	background: var(--hrb-wine-light);
	border-left: 3px solid var(--hrb-wine);
	border-radius: 0 var(--hrb-radius-xl) var(--hrb-radius-xl) 0;
}

.hrb-ficha__section--precauciones .hrb-ficha__title {
	color: var(--hrb-wine);
}

@media (max-width: 600px) {
	.hrb-ficha__datos {
		grid-template-columns: 1fr;
	}

	.hrb-ficha__datos dt {
		padding: .9rem 0 .15rem;
		border-bottom: 0;
	}

	.hrb-ficha__datos dd {
		padding-top: 0;
	}
}


/* 9. FORMULARIOS ------------------------------------------------------------
   Solo apariencia (alto, borde, radio, foco). No cambia estructura ni orden
   de campos: el checkout es el lado seguro del barbell.
   La cantidad (.qty) queda con el estilo de Astra. */
.woocommerce form .input-text:not(.qty),
.woocommerce form select,
.woocommerce-page form .input-text:not(.qty),
.woocommerce-page form select,
.woocommerce .select2-container .select2-selection--single {
	min-height: 52px;
	padding: 0 1.2rem;
	font-size: 1rem;
	color: var(--hrb-dark);
	background: var(--hrb-bg);
	border: 1px solid var(--hrb-border-strong);
	border-radius: var(--hrb-radius-md);
	transition: border-color var(--hrb-transition), box-shadow var(--hrb-transition);
}

.woocommerce form textarea.input-text,
.woocommerce-page form textarea.input-text {
	min-height: 7rem;
	padding: .9rem 1.2rem;
}

/* Select2 (país / provincia en el checkout): centrar el texto en los 52px. */
.woocommerce .select2-container .select2-selection--single .select2-selection__rendered {
	line-height: 50px;
	padding-left: 0;
}

.woocommerce .select2-container .select2-selection--single .select2-selection__arrow {
	height: 50px;
	right: .75rem;
}

.woocommerce form .input-text:not(.qty):hover,
.woocommerce form select:hover {
	border-color: var(--hrb-gold-soft);
}

.woocommerce form .input-text:not(.qty):focus,
.woocommerce form select:focus,
.woocommerce .select2-container--focus .select2-selection--single,
.woocommerce .select2-container--open .select2-selection--single {
	border-color: var(--hrb-gold);
	box-shadow: 0 0 0 3px var(--hrb-gold-light);
	outline: none;
}

.woocommerce form .form-row label {
	font-size: .85rem;
	font-weight: 700;
	color: var(--hrb-dark);
}


/* 10. AVISOS DE WOOCOMMERCE -------------------------------------------------
   WooCommerce los dibuja con borde superior de color: se reemplaza por un
   acento lateral, coherente con las tarjetas. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top: 0;
	border-left: 3px solid var(--hrb-gold);
	border-radius: 0 var(--hrb-radius-lg) var(--hrb-radius-lg) 0;
	background: var(--hrb-bg-warm);
	color: var(--hrb-dark);
}

.woocommerce-error {
	border-left-color: var(--hrb-wine);
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--hrb-gold);
}

.woocommerce-error::before {
	color: var(--hrb-wine);
}


/* 11. MOVIMIENTO REDUCIDO -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.woocommerce ul.products li.product,
	.woocommerce a.button,
	.woocommerce button.button {
		transition: none;
	}

	.woocommerce ul.products li.product:hover,
	.woocommerce a.button:hover,
	.woocommerce button.button:hover {
		transform: none;
	}
}