/* ==========================================================================
   GOLINA — BASE
   Implementación sobre Woostify + WooCommerce + Elementor.
   Regla dura: cero valores literales. Todo sale de golina-tokens.css.
   Si hace falta un color, tamaño o duración que no existe como token,
   se crea el token; no se escribe el valor aquí.
   ========================================================================== */

/* --- Tipografía base ----------------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	font-family: var(--f-body);
	letter-spacing: var(--ls-ui);
}

h1, h2, h3, h4, h5, h6,
.site-title,
.entry-title,
.product_title,
.woocommerce-loop-product__title {
	font-family: var(--f-display);
	letter-spacing: 0;
	line-height: var(--lh-tight);
}

/* --- Enlaces ------------------------------------------------------------- */
a {
	color: var(--c-text-strong);
}

a:hover,
a:focus {
	color: var(--c-link);
}

/* --- WooCommerce: precios, ofertas y avisos ------------------------------ */
.woocommerce .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--c-text-strong);
	font-family: var(--f-body);
}

.woocommerce span.onsale,
.woostify-single-product-onsale,
.product-label.on-sale {
	background-color: var(--c-sale);
	color: var(--c-sale-contrast); /* el blanco sobre este rojo no pasa AA */
}

.woocommerce-info,
.woocommerce-message {
	border-top-color: var(--c-accent);
}

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

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

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

/* --- Estados de foco accesibles ------------------------------------------ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.button:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 2px;
}

::selection {
	background-color: var(--c-accent);
	color: var(--c-accent-contrast);
}

/* --- Logo: evitar recortes en un logotipo apaisado ----------------------- */
.site-branding .logo img,
.site-header .custom-logo {
	height: auto;
	max-height: var(--sp-6);
	width: auto;
}

/* --- Accesibilidad: naranjo como TEXTO sobre fondos claros ---------------
   Woostify pinta con el color de tema una larga lista de textos de acento
   (menú activo, totales del carrito, enlaces del pie, pestañas...).
   Se reemplaza por el derivado oscuro sin tocar los rellenos naranjos.     */
.woostify-theme-color,
.has-woostify-primary-color,
.primary-navigation li.current-menu-item > a,
.primary-navigation > li.current-menu-ancestor > a,
.primary-navigation > li.current-menu-parent > a,
.primary-navigation > li.current_page_parent > a,
.primary-navigation > li.current_page_ancestor > a,
.primary-navigation a:hover,
.primary-navigation .menu-item-has-children:hover > a,
.site-tools .tools-icon:hover,
.site-tools .tools-icon:hover .woostify-svg-icon,
.site-tools .header-search-icon:hover,
.tools-icon.my-account:hover > a,
.site-footer a:hover,
.woocommerce-mini-cart__total .amount,
.woocommerce-cart-form__contents tbody .product-subtotal,
.woocommerce-checkout-review-order-table .order-total,
.cart_totals .shop_table .woocommerce-Price-amount,
#order_review .shop_table .woocommerce-Price-amount,
.woocommerce-table--order-details .product-name a,
.woocommerce-tabs li.active a,
.product-nav-item .product-nav-item-price,
.product-nav-item:hover > a,
.woocommerce-thankyou-order-received,
.blog-layout-grid .site-main .post-read-more a,
.default-widget a strong,
#secondary .widget .current-cat > a,
#secondary .widget .current-cat > span,
#secondary .widget a:not(.tag-cloud-link):hover,
#secondary .chosen a,
#secondary .chosen .count,
.has-multi-step-checkout .multi-step-item,
.product-loop-meta .button:hover,
.review-information-link:hover {
	color: var(--c-link);
}

/* Rellenos con el acento naranjo: el texto va en negro, nunca en blanco. */
.pagination li .page-numbers.current,
.woocommerce-pagination li .page-numbers.current,
.topbar,
.topbar a,
.topbar-slider,
.topbar-slider a {
	color: var(--c-accent-contrast);
}

/* --- MetForm: el botón de envío venía con el azul por defecto (#4285F4).
   MetForm usa "button.metform-btn:not(.toggle)", así que hace falta al
   menos la misma especificidad (2 clases + elemento) para sobrescribirlo. */
.mf-btn-wraper button.metform-btn.metform-submit-btn,
.metform-form-main button.metform-btn.metform-submit-btn,
.mf-btn-wraper button.metform-btn.metform-submit-btn span,
.metform-form-main button.metform-btn.metform-submit-btn span {
	background-color: var(--c-cta);
	border-color: var(--c-cta);
	color: var(--c-cta-contrast);
	font-family: var(--f-body);
	font-weight: 500;
}

/* El span interior no debe repintar el fondo del botón. */
.mf-btn-wraper button.metform-btn.metform-submit-btn span,
.metform-form-main button.metform-btn.metform-submit-btn span {
	background-color: transparent;
}

.mf-btn-wraper button.metform-btn.metform-submit-btn:hover,
.mf-btn-wraper button.metform-btn.metform-submit-btn:focus,
.metform-form-main button.metform-btn.metform-submit-btn:hover,
.metform-form-main button.metform-btn.metform-submit-btn:focus {
	background-color: var(--c-cta-hover);
	border-color: var(--c-cta-hover);
	color: var(--c-cta-hover-text);
}

.mf-btn-wraper button.metform-btn.metform-submit-btn:hover span,
.mf-btn-wraper button.metform-btn.metform-submit-btn:focus span,
.metform-form-main button.metform-btn.metform-submit-btn:hover span,
.metform-form-main button.metform-btn.metform-submit-btn:focus span {
	color: var(--c-cta-hover-text);
}

/* ==========================================================================
   WOOCOMMERCE BLOCKS — carrito y pago
   El carrito y el checkout usan los bloques nuevos de WooCommerce, que traen
   su propio botón gris (#32373C) y no leen los colores del tema.
   ========================================================================== */

.wc-block-cart .wc-block-components-button.wp-element-button,
.wc-block-checkout .wc-block-components-button.wp-element-button,
.wc-block-components-button.wp-element-button.wc-block-cart__submit-button,
.wc-block-components-button.wp-element-button.wc-block-components-checkout-place-order-button {
	background-color: var(--c-cta);
	border-color: var(--c-cta);
	color: var(--c-cta-contrast);
	font-family: var(--f-body);
	font-weight: 500;
	letter-spacing: var(--ls-ui);
	/* Los bloques de WooCommerce traen el botón en ángulo recto; el resto
	   del sitio usa el botón redondeado de Woostify.                      */
	border-radius: var(--radius);
}

.wc-block-cart .wc-block-components-button.wp-element-button:hover,
.wc-block-cart .wc-block-components-button.wp-element-button:focus,
.wc-block-checkout .wc-block-components-button.wp-element-button:hover,
.wc-block-checkout .wc-block-components-button.wp-element-button:focus {
	background-color: var(--c-cta-hover);
	border-color: var(--c-cta-hover);
	color: var(--c-cta-hover-text);
}

/* Los botones "enlace" (Volver a la tienda, editar) no son CTA. */
.wc-block-components-button.is-link {
	background-color: transparent;
	color: var(--c-link);
}

/* Totales y precios del bloque, con la tipografía de marca. */
.wc-block-components-totals-item__value,
.wc-block-components-product-price,
.wc-block-formatted-money-amount {
	font-family: var(--f-body);
	color: var(--c-text-strong);
}

.wc-block-components-title,
.wc-block-cart__submit-container ~ * h2,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-title {
	font-family: var(--f-display);
}

/* ==========================================================================
   OBJETIVOS TÁCTILES
   Los iconos de cabecera miden 24–26 px. Se amplía el área pulsable a 44 px
   con un pseudo-elemento, para no alterar el layout ni mover nada de sitio.
   ========================================================================== */

.site-tools .tools-icon,
.toggle-sidebar-menu-btn,
.wp-block-social-link-anchor,
.wc-block-cart-item__remove-link,
.wc-block-components-quantity-selector__button {
	position: relative;
}

.site-tools .tools-icon::after,
.toggle-sidebar-menu-btn::after,
.wp-block-social-link-anchor::after,
.wc-block-cart-item__remove-link::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--tap-min);
	height: var(--tap-min);
	transform: translate(-50%, -50%);
	/* Sólo amplía el área de toque: no pinta nada. */
	background: transparent;
}

/* Los +/- del carrito sí pueden crecer de verdad. El selector lleva la clase
   del contenedor porque WooCommerce les fija un ancho de 30 px.            */
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button,
.wc-block-cart-item__quantity .wc-block-components-quantity-selector__button {
	min-width: calc(var(--tap-min) - var(--sp-2));
	min-height: calc(var(--tap-min) - var(--sp-2));
	flex-shrink: 0;
	color: var(--c-text-strong);
}

.wc-block-components-quantity-selector__button:hover {
	color: var(--c-link);
}

/* Botones de texto que quedaban por debajo del mínimo cómodo. */
.button.continue-shopping,
.woocommerce .button,
.elementor-button-link.elementor-size-sm {
	min-height: var(--tap-min);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* Nada debe poder empujar el ancho de la página. */
img,
video,
iframe,
svg {
	max-width: 100%;
}

img,
video {
	height: auto;
}

/* Palabras largas y URLs pegadas no rompen la caja en pantallas angostas. */
.entry-content,
.woocommerce-product-details__short-description,
.woocommerce-Tabs-panel,
.wc-block-components-product-name,
.woocommerce-loop-product__title,
.product_title {
	overflow-wrap: break-word;
}

/* Tablas clásicas de WooCommerce: que scrolleen ellas, no la página. */
.woocommerce table.shop_table_responsive,
.woocommerce-page table.shop_table_responsive,
.woocommerce table.my_account_orders {
	display: block;
	overflow-x: auto;
	max-width: 100%;
}

@media (max-width: 767px) {

	/* iOS hace zoom automático al enfocar un campo con menos de 16 px.
	   Fijarlo en 16 evita ese salto de escala en todo el formulario.   */
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="number"],
	input[type="password"],
	input[type="search"],
	textarea,
	select {
		font-size: 16px;
	}

	/* Tipografía de las fichas de producto, servida por los tokens fluidos
	   en lugar de tamaños distintos por breakpoint.                      */
	.woocommerce-loop-product__title,
	li.product .woocommerce-loop-product__title {
		font-size: var(--fs-sm);
		line-height: var(--lh-tight);
	}

	li.product .price,
	li.product .product-loop-category {
		font-size: var(--fs-xs);
	}

	/* El botón principal ocupa el ancho: es más fácil de acertar con el pulgar. */
	.single_add_to_cart_button,
	.wc-block-cart__submit-button,
	.wc-block-components-checkout-place-order-button {
		width: 100%;
	}
}

/* Contador del carrito: insignia naranja con cifra negra (6:1). El blanco
   que trae el tema sobre ese naranjo se queda en 2,98:1.                   */
.site-tools .shop-cart-count,
.site-tools .wishlist-item-count {
	background-color: var(--c-accent);
	color: var(--c-accent-contrast);
}

/* Quitar producto del carrito lateral: 20x20 es poco para el pulgar. */
.woocommerce-mini-cart .remove,
.woocommerce-mini-cart a.remove {
	position: relative;
}

.woocommerce-mini-cart .remove::after,
.woocommerce-mini-cart a.remove::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--tap-min);
	height: var(--tap-min);
	transform: translate(-50%, -50%);
	background: transparent;
}

/* Pasos del checkout multi-paso de Woostify: los rótulos inactivos venían
   en #888 sobre blanco (3,54:1). El paso activo ya usa el naranjo de texto. */
.multi-step-item .item-text,
.multi-step-item .item-number {
	color: var(--c-text);
}

.multi-step-item.active .item-text,
.multi-step-item.current .item-text {
	color: var(--c-text-strong);
}

/* --- MetForm: avisos de validación ---------------------------------------
   El rojo puro (#F00) del plugin da 3,76:1 sobre el fondo crema y no llega
   al 4,5:1 de la WCAG AA. Se usa el rojo oscuro del manual, que da 8,3:1.  */
.mf-input-required-indicator,
.mf-error-message,
.metform-form-main .mf-error-message {
	color: var(--c-error);
}

/* --- Títulos H1 añadidos por el mu-plugin --------------------------------
   Los archivos de WooCommerce y las páginas legales no tenían ningún H1.
   Estos son los que inyecta golina-brand.php.                              */
.golina-archive-title,
.golina-page-title {
	font-family: var(--f-display);
	font-size: var(--fs-lg);
	line-height: var(--lh-tight);
	color: var(--c-text-strong);
	margin: 0 0 var(--sp-3);
}

.golina-archive-title {
	margin-bottom: var(--sp-2);
}

/* --- Carrito (bloques): línea de producto -------------------------------
   La × venía embutida sobre el nombre del producto; se lleva a la esquina
   superior derecha, que es donde se la busca.                             */
.wc-block-cart-items__row {
	position: relative;
}

.wc-block-cart-items__row .wc-block-cart-item__remove-link {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	z-index: var(--z-base);
}

/* Que la × no se meta debajo del precio. */
.wc-block-cart-items__row .wc-block-cart-item__total {
	padding-top: var(--sp-4);
}

/* El número de unidades no estaba centrado en su casilla. */
.wc-block-components-quantity-selector__input {
	text-align: center;
	padding-inline: 0;
}

/* ==========================================================================
   CARRITO LATERAL (mini-cart de Woostify)
   Es un marcado distinto al del carrito de bloques: aquí la × vive dentro de
   la línea del producto, antes del nombre.
   ========================================================================== */

.woocommerce-mini-cart .woocommerce-mini-cart-item,
.woocommerce-mini-cart li.mini_cart_item {
	position: relative;
	/* Hueco para que el nombre no se meta debajo de la ×. */
	padding-right: var(--sp-5);
}

.woocommerce-mini-cart .woocommerce-mini-cart-item > a.remove,
.woocommerce-mini-cart li.mini_cart_item > a.remove {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	z-index: var(--z-base);
}

/* El número quedaba alto respecto a los signos − y +: las tres piezas traían
   interlineados distintos (24 px el campo, 26 px los signos) dentro de una
   caja de 22. Con interlineado normal el navegador los centra solo.       */
.woocommerce-mini-cart .mini-cart-quantity {
	align-items: center;
}

.woocommerce-mini-cart .mini-cart-quantity .input-text.qty {
	line-height: normal;
}

/* Los signos se centran con flex, pero conservando su alto: si se les deja
   ajustarse al contenido bajan a 11 px y se vuelven difíciles de pulsar.  */
.woocommerce-mini-cart .mini-cart-quantity .mini-cart-product-qty {
	line-height: normal;
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	min-height: var(--sp-4);
}

/* El botón de finalizar compra es un enlace: hay que fijar el color en todos
   sus estados o el color de enlace de la marca se cuela en alguno.        */
.woocommerce-mini-cart__buttons a.checkout,
.woocommerce-mini-cart__buttons a.checkout:link,
.woocommerce-mini-cart__buttons a.checkout:visited,
.woocommerce-mini-cart__buttons a.checkout:hover,
.woocommerce-mini-cart__buttons a.checkout:focus,
.cart-sidebar-content a.button.checkout,
.cart-sidebar-content a.button.checkout:visited {
	color: var(--c-cta-contrast);
	background-color: var(--c-cta);
}

.woocommerce-mini-cart__buttons a.checkout:hover,
.cart-sidebar-content a.button.checkout:hover {
	color: var(--c-cta-hover-text);
	background-color: var(--c-cta-hover);
}

/* La × del carrito lateral trae a la vez el carácter "×" y un SVG: 32 px de
   contenido dentro de una caja de 20. Al posicionarla a la derecha, ese
   sobrante empujaba la lista a 352 px y aparecía una barra horizontal.     */
.woocommerce-mini-cart .woocommerce-mini-cart-item > a.remove,
.woocommerce-mini-cart li.mini_cart_item > a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

/* Red de seguridad: la lista scrollea en vertical, nunca en horizontal. */
.woocommerce-mini-cart,
ul.woocommerce-mini-cart.cart_list {
	overflow-x: hidden;
}

/* El botón del carrito vacío heredaba el naranjo de texto sobre el lima:
   2,62:1, ilegible. Se iguala al resto de los CTA del sitio. */
.cart-sidebar .button.continue-shopping,
.cart-sidebar .button.continue-shopping:link,
.cart-sidebar .button.continue-shopping:visited,
.woocommerce-mini-cart__empty-message .button.continue-shopping {
	background-color: var(--c-cta);
	color: var(--c-cta-contrast);
	border-color: var(--c-cta);
}

.cart-sidebar .button.continue-shopping:hover,
.cart-sidebar .button.continue-shopping:focus,
.woocommerce-mini-cart__empty-message .button.continue-shopping:hover {
	background-color: var(--c-cta-hover);
	border-color: var(--c-cta-hover);
	color: var(--c-cta-hover-text);
}

/* El nombre del producto en el carrito salía en Naranjo Texto sobre blanco:
   3,81:1, por debajo del 4,5:1 que pide la WCAG para texto normal. */
.woocommerce-mini-cart .woocommerce-mini-cart-item a:not(.remove),
.woocommerce-mini-cart li.mini_cart_item a:not(.remove) {
	color: var(--c-text-strong);
}

/* Y la × de quitar venía en el rojo por defecto de WooCommerce (3,14:1).
   El rojo oscuro del manual da 8,3:1. */
.woocommerce-mini-cart a.remove,
.woocommerce-mini-cart a.remove:hover,
.woocommerce-mini-cart a.remove:focus {
	color: var(--golina-rojo-oscuro);
}