/*
Theme Name:   EligeTu
Theme URI:    https://eligetuoficial.es/
Description:  Tema hijo de Storefront para EligeTu — joyería premium. Minimalismo de lujo: fondos crema/marfil, acentos dorados y tipografía serif elegante.
Author:       EligeTu Oficial
Author URI:   https://eligetuoficial.es/
Template:     storefront
Version:      1.2.1
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License:      GNU General Public License v3 or later
License URI:  https://www.gnu.org/licenses/gpl-3.0.html
Text Domain:  eligetu-child
Tags:         e-commerce, custom-colors, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* ==========================================================================
   Design system — EligeTu luxury jewelry
   Inspired by Pandora, Swarovski, TOUS
   ========================================================================== */

:root {
	/* ELIGE TU brand — synced with css/redesign.css */
	--color-cream: #faf8f7;
	--color-cream-dark: #f5f0f1;
	--color-gold: #c9a96e;
	--color-gold-light: #e8d5b0;
	--color-gold-dark: #a07840;
	--color-primary: #F3889D;
	--color-primary-dark: #E07088;
	--color-primary-light: #FDE8ED;
	--color-charcoal: #1a1a1a;
	--color-gray-mid: #7a6b6d;
	--color-gray-light: #eae0e2;
	--color-white: #ffffff;
	--color-black: #1a1a1a;

	/* Typography */
	--font-heading: "Cormorant Garamond", serif;
	--font-body: "Jost", sans-serif;
	--font-accent: "Cormorant Garamond", serif;

	/* Spacing */
	--space-xs: 4px;
	--space-sm: 8px;
	--space-md: 16px;
	--space-lg: 24px;
	--space-xl: 40px;
	--space-2xl: 64px;
	--space-3xl: 96px;

	/* Type scale */
	--text-xs: 11px;
	--text-sm: 13px;
	--text-base: 15px;
	--text-lg: 17px;
	--text-xl: 22px;
	--text-2xl: 32px;
	--text-3xl: 48px;
	--text-4xl: 64px;
	--text-5xl: 88px;

	/* Transitions */
	--transition-base: 0.3s ease;
	--transition-fast: 0.2s ease;
}

/* ==========================================================================
   Base
   ========================================================================== */

html {
	overflow-x: clip;
}

body {
	font-family: var(--font-body);
	font-size: var(--text-base);
	background: var(--color-cream);
	color: var(--color-charcoal);
	font-weight: 300;
	letter-spacing: 0.02em;
	line-height: 1.8;
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

#page,
.site-content,
.content-area {
	background-color: var(--color-cream);
}

.site {
	background: var(--color-cream);
	color: var(--color-charcoal);
}

h1,
h2,
h3,
h4 {
	font-family: var(--font-heading);
	font-weight: 400;
	letter-spacing: 0.04em;
	line-height: 1.15;
	color: var(--color-charcoal);
}

h5,
h6 {
	font-family: var(--font-body);
	font-weight: 400;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: var(--text-xs);
	color: var(--color-gray-mid);
}

a {
	color: inherit;
	text-decoration: none;
	transition: color var(--transition-base);
}

img {
	max-width: 100%;
	display: block;
}

/* Sin anillo azul del navegador al hacer clic (mantener estilos propios en inputs) */
*,
*::before,
*::after {
	-webkit-tap-highlight-color: transparent;
}

a:focus,
a:focus-visible,
button:focus,
button:focus-visible,
[role="button"]:focus,
[role="button"]:focus-visible,
[tabindex]:focus,
[tabindex]:focus-visible {
	outline: none;
	box-shadow: none;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn-primary,
.btn-outline,
.btn-gold {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-align: center;
	line-height: 1.2;
	cursor: pointer;
	transition: all var(--transition-base);
}

.btn-primary {
	background: var(--color-primary);
	color: var(--color-white);
	padding: 14px 32px;
	border: none;
}

.btn-primary:hover {
	background: var(--color-charcoal);
	color: var(--color-white);
}

.btn-outline {
	background: transparent;
	color: var(--color-charcoal);
	border: 1px solid var(--color-charcoal);
	padding: 13px 32px;
}

.btn-outline:hover {
	background: var(--color-charcoal);
	color: var(--color-white);
}

.btn-gold {
	background: var(--color-gold);
	color: var(--color-white);
	padding: 14px 32px;
	border: none;
}

.btn-gold:hover {
	background: var(--color-gold-dark);
	color: var(--color-white);
}

/* ==========================================================================
   Utilities
   ========================================================================== */

.gold-divider {
	display: block;
	width: 48px;
	height: 1px;
	background: var(--color-gold);
	margin: 16px auto;
}

.gold-divider--left {
	margin-left: 0;
	margin-right: auto;
}

.gold-divider--wide {
	width: 80px;
}

.text-accent {
	font-family: var(--font-accent);
}

.text-muted {
	color: var(--color-gray-mid);
}

.text-gold {
	color: var(--color-gold-dark);
}

.bg-cream-dark {
	background-color: var(--color-cream-dark);
}

.bg-white {
	background-color: var(--color-white);
}

/* ==========================================================================
   Typography helpers
   ========================================================================== */

.heading-display {
	font-family: var(--font-heading);
	font-size: clamp(2.5rem, 8vw, var(--text-5xl));
	font-weight: 400;
	letter-spacing: 0.04em;
	line-height: 1.05;
}

.heading-section {
	font-family: var(--font-heading);
	font-size: clamp(1.75rem, 5vw, var(--text-3xl));
	font-weight: 400;
	letter-spacing: 0.04em;
	line-height: 1.15;
}

.heading-card {
	font-family: var(--font-heading);
	font-size: var(--text-xl);
	font-weight: 400;
	letter-spacing: 0.04em;
	line-height: 1.2;
}

.eyebrow {
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: 400;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-gray-mid);
}

.body-lg {
	font-size: var(--text-lg);
	line-height: 1.65;
}

/* ==========================================================================
   Storefront + WooCommerce (design system mapping)
   ========================================================================== */

.site-title,
.entry-title,
.woocommerce-products-header__title,
.product .woocommerce-loop-product__title,
.woocommerce div.product .product_title {
	font-family: var(--font-heading);
	font-weight: 400;
	letter-spacing: 0.04em;
	line-height: 1.15;
}

/* Header: assets/css/header.css */
/* Footer: assets/css/footer.css */

.eligetu-site-footer.site-footer a:hover {
	color: var(--et-primary, #F3889D);
}

/* Map WooCommerce buttons — black → rose (brand) */
button:not(.eligetu-header-icon):not(.footer-newsletter__submit):not(.footer-col__toggle):not(.home-bestsellers__nav):not(.et-reviews-block__nav):not(.et-reviews-block__dot):not(.eligetu-product-card__cta-link):not(.cart-drawer__item-remove):not(.cart-drawer__close):not(.eligetu-gallery__thumb):not(.eligetu-qty-btn):not(.qty-btn):not(.filter-toggle-btn):not(.filter-apply-btn):not(.et-contact-submit):not(.site-topbar__close):not(.eligetu-header-sale):not(.eligetu-header-contact):not(.eligetu-account-tabs__tab):not(.show-password-input):not(.eligetu-order-summary__remove),
input[type="submit"]:not(.eligetu-product-card__cta-link),
.button:not(.eligetu-product-card__cta-link):not(.eligetu-header-sale):not(.eligetu-header-contact),
.woocommerce #respond input#submit,
.woocommerce a.button:not(.eligetu-product-card__cta-link),
.woocommerce button.button:not(.eligetu-product-card__cta-link),
.woocommerce input.button:not(.eligetu-product-card__cta-link),
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt:not(.eligetu-product-card__cta-link),
.woocommerce button.button.alt:not(.eligetu-product-card__cta-link),
.woocommerce input.button.alt:not(.eligetu-product-card__cta-link) {
	background: var(--color-charcoal) !important;
	color: var(--color-white) !important;
	border: none !important;
	box-shadow: none !important;
	padding: 14px 32px !important;
	font-family: var(--font-body) !important;
	font-size: var(--text-sm) !important;
	font-weight: 400 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	border-radius: 0 !important;
	transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base) !important;
}

button:not(.eligetu-header-icon):not(.footer-newsletter__submit):not(.footer-col__toggle):not(.home-bestsellers__nav):not(.et-reviews-block__nav):not(.et-reviews-block__dot):not(.eligetu-product-card__cta-link):not(.cart-drawer__item-remove):not(.cart-drawer__close):not(.eligetu-gallery__thumb):not(.eligetu-qty-btn):not(.qty-btn):not(.filter-toggle-btn):not(.filter-apply-btn):not(.et-contact-submit):not(.site-topbar__close):not(.eligetu-account-tabs__tab):not(.show-password-input):not(.eligetu-order-summary__remove):hover,
button:not(.eligetu-header-icon):not(.footer-newsletter__submit):not(.footer-col__toggle):not(.home-bestsellers__nav):not(.et-reviews-block__nav):not(.et-reviews-block__dot):not(.eligetu-product-card__cta-link):not(.cart-drawer__item-remove):not(.cart-drawer__close):not(.eligetu-gallery__thumb):not(.eligetu-qty-btn):not(.qty-btn):not(.filter-toggle-btn):not(.filter-apply-btn):not(.et-contact-submit):not(.site-topbar__close):not(.eligetu-account-tabs__tab):not(.show-password-input):not(.eligetu-order-summary__remove):focus,
input[type="submit"]:not(.eligetu-product-card__cta-link):hover,
input[type="submit"]:not(.eligetu-product-card__cta-link):focus,
.button:not(.eligetu-product-card__cta-link):not(.eligetu-header-sale):not(.eligetu-header-contact):hover,
.button:not(.eligetu-product-card__cta-link):not(.eligetu-header-sale):not(.eligetu-header-contact):focus,
.woocommerce a.button:not(.eligetu-product-card__cta-link):hover,
.woocommerce a.button:not(.eligetu-product-card__cta-link):focus,
.woocommerce button.button:not(.eligetu-product-card__cta-link):hover,
.woocommerce button.button:not(.eligetu-product-card__cta-link):focus,
.woocommerce input.button:not(.eligetu-product-card__cta-link):hover,
.woocommerce input.button:not(.eligetu-product-card__cta-link):focus,
.woocommerce a.button.alt:not(.eligetu-product-card__cta-link):hover,
.woocommerce a.button.alt:not(.eligetu-product-card__cta-link):focus,
.woocommerce button.button.alt:not(.eligetu-product-card__cta-link):hover,
.woocommerce button.button.alt:not(.eligetu-product-card__cta-link):focus,
.woocommerce input.button.alt:not(.eligetu-product-card__cta-link):hover,
.woocommerce input.button.alt:not(.eligetu-product-card__cta-link):focus {
	background: var(--color-primary) !important;
	color: var(--color-white) !important;
	border: none !important;
	box-shadow: none !important;
	outline: none !important;
}

.woocommerce a.button.checkout,
.woocommerce button.button.alt.checkout {
	background: var(--color-charcoal) !important;
}

.woocommerce a.button.checkout:hover,
.woocommerce a.button.checkout:focus,
.woocommerce button.button.alt.checkout:hover,
.woocommerce button.button.alt.checkout:focus {
	background: var(--color-primary) !important;
	color: var(--color-white) !important;
}

/* Product grid — Pandora cards: no box borders */
ul.products li.product.eligetu-product-card {
	background: transparent;
	border: none;
	padding: 0;
	box-shadow: none;
}

ul.products li.product.eligetu-product-card:hover {
	box-shadow: none;
}

.woocommerce ul.products li.product.eligetu-product-card .price {
	font-family: var(--font-body);
	font-size: 14px;
	color: #1a1a1a;
	font-weight: 400;
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-family: var(--font-heading);
	font-size: var(--text-lg);
	color: var(--color-gold-dark);
	font-weight: 400;
}

.woocommerce span.onsale {
	background-color: var(--color-gold);
	color: var(--color-white);
	font-family: var(--font-body);
	font-size: var(--text-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: 0;
	min-height: auto;
	min-width: auto;
	padding: var(--space-xs) var(--space-sm);
	line-height: 1.4;
}

.woocommerce-info,
.woocommerce-message {
	background-color: var(--color-cream-dark);
	border-top-color: var(--color-gold);
	color: var(--color-charcoal);
	font-size: var(--text-sm);
}

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

.woocommerce-error {
	border-top-color: var(--color-charcoal);
}

/* Breadcrumbs */
.woocommerce-breadcrumb,
.storefront-breadcrumb {
	font-size: var(--text-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-gray-mid);
	padding: var(--space-md) 0;
}

.woocommerce-breadcrumb a {
	color: var(--color-gray-mid);
}

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

/* Forms */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="number"],
textarea,
select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-weight: 300;
	color: var(--color-charcoal);
	background: var(--color-white);
	border: 1px solid var(--color-gray-light);
	border-radius: 0;
	padding: var(--space-sm) var(--space-md);
	transition: border-color var(--transition-base);
}

input:focus,
textarea:focus,
select:focus,
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
	border-color: var(--color-gold);
	outline: none;
	box-shadow: none;
}

label,
.woocommerce form .form-row label {
	font-size: var(--text-sm);
	letter-spacing: 0.04em;
	color: var(--color-charcoal);
}

/* Single product */
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--color-gold-dark);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
	border-color: var(--color-gray-light);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active::before {
	box-shadow: 0 2px 0 var(--color-gold);
}

/* Star ratings */
.star-rating span::before,
.woocommerce .star-rating span::before {
	color: var(--color-gold);
}

/* Pagination — shop overrides in assets/css/shop.css */

/* Widgets */
.widget-title,
.widget .widget-title {
	font-family: var(--font-heading);
	font-size: var(--text-lg);
	font-weight: 400;
	letter-spacing: 0.04em;
}

/* Selection */
::selection {
	background: var(--color-gold-light);
	color: var(--color-charcoal);
}