/*
 * Premium Styles for Aldeanueva Wine Shop
 * Concepto: Terruño Contemporáneo
 * Inspirado en: Fincas de Azabache, Viñedos de Aldeanueva
 */

/* ========================================
   VARIABLES CSS
   ======================================== */
:root {
	/* Colores de marca */
	--color-base: #F8F6F3;
	--color-contrast: #2C1810;
	--color-primary: #7D2828;
	--color-secondary: #B8956A;
	--color-tertiary: #E8E3DC;
	--color-accent: #D4AF6A;
	--color-vineyard: #5A6B4F;
	--color-white: #ffffff;
	
	/* Sombras sutiles */
	--shadow-subtle: 0 2px 8px rgba(44, 24, 16, 0.06);
	--shadow-soft: 0 4px 16px rgba(44, 24, 16, 0.08);
	--shadow-medium: 0 8px 24px rgba(44, 24, 16, 0.12);
	
	/* Transiciones */
	--transition-base: 0.3s ease;
	--transition-fast: 0.15s ease;
	
	/* Espaciado */
	--space-xs: 0.5rem;
	--space-sm: 1rem;
	--space-md: 1.5rem;
	--space-lg: 2rem;
	--space-xl: 3rem;
	--space-2xl: 4rem;
	--space-3xl: 6rem;
	
	/* Border radius */
	--radius-sm: 2px;
	--radius-md: 4px;
	--radius-lg: 8px;
}

/* ========================================
   TIPOGRAFÍA BASE
   ======================================== */
body {
	font-family: "Inter", sans-serif;
	font-size: 1.125rem;
	line-height: 1.7;
	color: var(--color-contrast);
	background-color: var(--color-base);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.wp-block-post-title,
.wp-block-heading,
.woocommerce-loop-product__title {
	font-family: "Playfair Display", serif;
	font-weight: 600;
	line-height: 1.2;
	color: var(--color-contrast);
	margin-bottom: var(--space-md);
}

h1 { font-size: clamp(2.5rem, 5vw, 3.5rem); }
h2 { font-size: clamp(2rem, 4vw, 2.5rem); }
h3 { font-size: clamp(1.5rem, 3vw, 1.875rem); }

/* ========================================
   BOTONES Y ENLACES
   ======================================== */
.wp-element-button,
.wp-block-button__link,
.button,
.woocommerce .button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button.alt,
.woocommerce input.button,
.single_add_to_cart_button {
	font-family: "Inter", sans-serif;
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	padding: 0.875rem 2rem;
	border-radius: var(--radius-md);
	border: none;
	cursor: pointer;
	transition: all var(--transition-base);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	text-decoration: none;
}

/* Botón primario */
.wp-element-button:not(.is-style-outline),
.wp-block-button__link:not(.is-style-outline),
.button.primary,
.woocommerce button.button.alt,
.single_add_to_cart_button {
	background-color: var(--color-primary);
	color: var(--color-white);
}

.wp-element-button:not(.is-style-outline):hover,
.wp-block-button__link:not(.is-style-outline):hover,
.woocommerce button.button.alt:hover,
.single_add_to_cart_button:hover {
	background-color: #5F1E1E;
	box-shadow: var(--shadow-soft);
	transform: translateY(-1px);
}

/* Botón secundario (outline) */
.is-style-outline .wp-block-button__link,
.button.secondary,
.woocommerce .button.outlined {
	background-color: transparent;
	color: var(--color-primary);
	border: 2px solid var(--color-secondary);
}

.is-style-outline .wp-block-button__link:hover {
	background-color: var(--color-secondary);
	color: var(--color-white);
	border-color: var(--color-secondary);
}

/* ========================================
   HEADER PREMIUM
   ======================================== */
.wp-block-group.has-header-background-color {
	box-shadow: var(--shadow-subtle);
}

.site-title a {
	font-family: "Playfair Display", serif;
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--color-white);
	text-decoration: none;
}

/* Navegación */
.wp-block-navigation {
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: 0.02em;
}

.wp-block-navigation-item a {
	padding: 0.5rem 0.875rem;
	transition: color var(--transition-base);
}

.wp-block-navigation-item a:hover {
	color: var(--color-secondary) !important;
}

/* Mini cart y customer account */
.woocommerce-mini-cart,
.wc-block-mini-cart__button,
.wc-block-customer-account {
	transition: all var(--transition-fast);
}

.wc-block-mini-cart__button:hover {
	opacity: 0.85;
}

/* ========================================
   TARJETAS DE PRODUCTO (PREMIUM)
   ======================================== */
.wc-block-grid__product,
.products .product,
.woocommerce ul.products li.product {
	background: var(--color-white);
	border: 1px solid var(--color-tertiary);
	border-radius: var(--radius-md);
	padding: 1rem;
	transition: all var(--transition-base);
	overflow: hidden;
}

.wc-block-grid__product:hover,
.products .product:hover {
	box-shadow: var(--shadow-medium);
	transform: translateY(-4px);
	border-color: var(--color-secondary);
}

/* Imagen de producto */
.wc-block-grid__product-image,
.woocommerce ul.products li.product .woocommerce-loop-product__link img,
.woocommerce-product-gallery__image img {
	border-radius: var(--radius-sm);
	transition: transform var(--transition-base);
	width: 100%;
	height: auto;
	object-fit: cover;
}

.wc-block-grid__product:hover .wc-block-grid__product-image img,
.products .product:hover img {
	transform: scale(1.03);
}

/* Título de producto */
.wc-block-grid__product-title,
.woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: "Playfair Display", serif;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.3;
	margin: 1rem 0 0.5rem;
	color: var(--color-contrast);
	text-align: center;
}

/* Precio */
.wc-block-grid__product-price,
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price {
	font-family: "Inter", sans-serif;
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--color-primary);
	text-align: center;
	margin: 0.5rem 0;
}

.woocommerce ul.products li.product .price del {
	color: #999;
	font-weight: 400;
	opacity: 0.7;
}

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

/* Botón añadir al carrito en grid */
.wc-block-grid__product-add-to-cart,
.woocommerce ul.products li.product .button {
	width: 100%;
	margin-top: 1rem;
	font-size: 0.875rem;
	padding: 0.75rem 1.5rem;
}

/* ========================================
   PÁGINA DE PRODUCTO INDIVIDUAL
   ======================================== */
.single-product .product {
	background: var(--color-white);
	padding: var(--space-xl);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-soft);
}

.woocommerce div.product .product_title {
	font-family: "Playfair Display", serif;
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 700;
	margin-bottom: var(--space-md);
	color: var(--color-contrast);
}

.woocommerce div.product p.price {
	font-size: 2rem;
	font-weight: 700;
	color: var(--color-primary);
	margin-bottom: var(--space-lg);
}

.woocommerce div.product .woocommerce-product-details__short-description {
	font-size: 1.125rem;
	line-height: 1.7;
	color: var(--color-contrast);
	margin-bottom: var(--space-lg);
}

/* Variaciones de producto */
.woocommerce div.product form.cart .variations {
	margin-bottom: var(--space-lg);
}

.woocommerce div.product form.cart .variations label {
	font-family: "Inter", sans-serif;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-contrast);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.woocommerce div.product form.cart .variations select {
	border: 2px solid var(--color-tertiary);
	border-radius: var(--radius-md);
	padding: 0.75rem 1rem;
	font-size: 1rem;
	transition: border-color var(--transition-base);
}

.woocommerce div.product form.cart .variations select:focus {
	border-color: var(--color-primary);
	outline: none;
}

/* Cantidad */
.woocommerce div.product form.cart .quantity input[type="number"] {
	border: 2px solid var(--color-tertiary);
	border-radius: var(--radius-md);
	padding: 0.75rem 1rem;
	font-size: 1rem;
	width: 80px;
}

/* Tabs de producto */
.woocommerce div.product .woocommerce-tabs {
	margin-top: var(--space-2xl);
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	border-bottom: 2px solid var(--color-tertiary);
	padding: 0;
	margin: 0 0 var(--space-lg);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: none;
	margin: 0 var(--space-md) 0 0;
	padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	font-family: "Inter", sans-serif;
	font-size: 1rem;
	font-weight: 600;
	color: #999;
	padding: 0.75rem 0;
	border-bottom: 3px solid transparent;
	transition: all var(--transition-base);
}

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

/* ========================================
   FILTROS Y SIDEBAR
   ======================================== */
.wp-block-woocommerce-filter-wrapper {
	background: var(--color-white);
	border: 1px solid var(--color-tertiary);
	border-radius: var(--radius-md);
	padding: var(--space-lg);
	margin-bottom: var(--space-lg);
}

.wp-block-woocommerce-filter-wrapper .wp-block-heading {
	font-family: "Inter", sans-serif;
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-contrast);
	margin-bottom: var(--space-md);
	padding-bottom: var(--space-sm);
	border-bottom: 2px solid var(--color-tertiary);
}

/* Filtros activos */
.wc-block-active-filters {
	margin-bottom: var(--space-lg);
}

.wc-block-active-filters__list-item {
	background: var(--color-tertiary);
	border-radius: var(--radius-md);
	padding: 0.5rem 1rem;
	margin: 0.5rem 0.5rem 0.5rem 0;
	display: inline-flex;
	align-items: center;
	font-size: 0.875rem;
}

/* ========================================
   FORMULARIOS
   ======================================== */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
textarea,
select {
	border: 2px solid var(--color-tertiary);
	border-radius: var(--radius-md);
	padding: 0.875rem 1rem;
	font-family: "Inter", sans-serif;
	font-size: 1rem;
	color: var(--color-contrast);
	background: var(--color-white);
	transition: all var(--transition-base);
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--color-primary);
	outline: none;
	box-shadow: 0 0 0 3px rgba(125, 40, 40, 0.1);
}

/* ========================================
   MIGAS DE PAN
   ======================================== */
.woocommerce-breadcrumb,
.wp-block-breadcrumb {
	font-size: 0.875rem;
	color: #999;
	margin-bottom: var(--space-lg);
}

.woocommerce-breadcrumb a {
	color: var(--color-contrast);
	text-decoration: none;
	transition: color var(--transition-base);
}

.woocommerce-breadcrumb a:hover {
	color: var(--color-primary);
}

/* ========================================
   PAGINACIÓN
   ======================================== */
.woocommerce-pagination,
.wp-block-query-pagination {
	margin-top: var(--space-2xl);
	text-align: center;
}

.woocommerce-pagination ul,
.wp-block-query-pagination {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
}

.woocommerce-pagination ul li,
.wp-block-query-pagination-numbers {
	list-style: none;
}

.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span,
.wp-block-query-pagination a,
.wp-block-query-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0.5rem 1rem;
	border: 2px solid var(--color-tertiary);
	border-radius: var(--radius-md);
	color: var(--color-contrast);
	font-weight: 600;
	text-decoration: none;
	transition: all var(--transition-base);
}

.woocommerce-pagination ul li a:hover,
.wp-block-query-pagination a:hover {
	background-color: var(--color-primary);
	color: var(--color-white);
	border-color: var(--color-primary);
}

.woocommerce-pagination ul li span.current,
.wp-block-query-pagination .current {
	background-color: var(--color-primary);
	color: var(--color-white);
	border-color: var(--color-primary);
}

/* ========================================
   CARRITO Y CHECKOUT
   ======================================== */
.woocommerce-cart-form {
	background: var(--color-white);
	border-radius: var(--radius-lg);
	padding: var(--space-xl);
	box-shadow: var(--shadow-soft);
}

.woocommerce table.shop_table {
	border: 1px solid var(--color-tertiary);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.woocommerce table.shop_table th {
	background: var(--color-tertiary);
	font-family: "Inter", sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.875rem;
	padding: 1rem;
	color: var(--color-contrast);
}

.woocommerce table.shop_table td {
	padding: 1rem;
	border-top: 1px solid var(--color-tertiary);
}

.cart-collaterals {
	background: var(--color-white);
	border-radius: var(--radius-lg);
	padding: var(--space-xl);
	box-shadow: var(--shadow-soft);
}

/* ========================================
   BADGES Y ETIQUETAS
   ======================================== */
.woocommerce span.onsale,
.onsale {
	background-color: var(--color-primary);
	color: var(--color-white);
	font-family: "Inter", sans-serif;
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.5rem 1rem;
	border-radius: var(--radius-md);
	min-width: auto;
	min-height: auto;
	line-height: 1;
}

.out-of-stock-badge,
.stock.out-of-stock {
	color: #D32F2F;
	font-weight: 600;
}

.in-stock {
	color: var(--color-vineyard);
	font-weight: 600;
}

/* ========================================
   FOOTER
   ======================================== */
footer .wp-block-group {
	font-size: 0.9375rem;
	line-height: 1.6;
}

footer h3 {
	font-family: "Inter", sans-serif;
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: var(--space-md);
}

footer .wp-block-navigation-item a {
	color: var(--color-white);
	opacity: 0.85;
	transition: opacity var(--transition-base);
}

footer .wp-block-navigation-item a:hover {
	opacity: 1;
}

/* ========================================
   RESPONSIVE UTILITIES
   ======================================== */
@media (max-width: 782px) {
	h1 { font-size: 2rem; }
	h2 { font-size: 1.75rem; }
	h3 { font-size: 1.5rem; }
	
	.wp-element-button,
	.button,
	.woocommerce .button {
		padding: 0.75rem 1.5rem;
		font-size: 0.875rem;
	}
	
	.single-product .product {
		padding: var(--space-lg);
	}
	
	.wc-block-grid__product,
	.products .product {
		padding: 0.75rem;
	}
}

@media (max-width: 600px) {
	:root {
		--space-xl: 2rem;
		--space-2xl: 3rem;
		--space-3xl: 4rem;
	}
	
	body {
		font-size: 1rem;
	}
}

/* ========================================
   ANIMACIONES Y MICROINTERACCIONES
   ======================================== */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.wc-block-grid__product,
.products .product {
	animation: fadeInUp 0.6s ease both;
}

.wc-block-grid__product:nth-child(1) { animation-delay: 0.1s; }
.wc-block-grid__product:nth-child(2) { animation-delay: 0.2s; }
.wc-block-grid__product:nth-child(3) { animation-delay: 0.3s; }

/* Smooth scroll */
html {
	scroll-behavior: smooth;
}

/* ========================================
   ACCESIBILIDAD
   ======================================== */
:focus-visible {
	outline: 3px solid var(--color-primary);
	outline-offset: 2px;
}

/* Skip to content link */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--color-primary);
	color: var(--color-white);
	padding: 1rem 2rem;
	text-decoration: none;
	font-weight: 600;
	z-index: 9999;
}

.skip-link:focus {
	left: 0;
}

/* Asegurar contraste mínimo */
.has-base-background-color {
	color: var(--color-contrast);
}

.has-contrast-background-color,
.has-primary-background-color {
	color: var(--color-white);
}