/* ==========================================================================
   Aloha Creaciones — Estilos de WooCommerce
   Extiende el lenguaje visual de la web (Poppins, navy, frambuesa, turquesa)
   a las páginas transaccionales: producto, carrito, checkout y mi cuenta.

   Principios:
   - El listado de tienda usa una plantilla de archivo de Elementor: NO se toca.
   - La ficha de producto ya está diseñada por el cliente (botón turquesa #69CCD1,
     radio 12px): tampoco se le impone otro estilo. Solo se completa lo que falta.
   - El trabajo real está en carrito, checkout y mi cuenta, que salían con los
     estilos por defecto de WooCommerce (incluido su morado #720EEC).
   ========================================================================== */

:root {
	/* Paleta extraída del diseño existente */
	--aloha-navy: #1c244b;
	--aloha-navy-70: #636e85;
	--aloha-navy-50: #8892a8;
	--aloha-frambuesa: #cc3366;
	--aloha-frambuesa-osc: #a82a53;
	--aloha-turquesa: #4cc0c1;
	--aloha-turquesa-osc: #30a6a7;
	--aloha-cielo: #bad1df;
	--aloha-crema: #fce8b2;
	--aloha-rosa: #eca1aa;
	--aloha-hueso: #f9fafb;
	--aloha-linea: #e6ecf2;

	/* Acción principal: el mismo turquesa que ya usa el botón de añadir al
	   carrito, para que toda la tienda hable el mismo idioma. La frambuesa
	   queda como acento (ofertas, precios rebajados, errores), que es
	   justamente el papel que tiene en el resto de la web. */
	--aloha-cta: #69ccd1;
	--aloha-cta-osc: #30a6a7;

	/* Formas */
	--aloha-r-pildora: 50px;
	--aloha-r-tarjeta: 18px;
	--aloha-r-campo: 14px;
	--aloha-r-boton: 14px;

	/* Profundidad — sombras teñidas de navy, como el resto de la web */
	--aloha-sombra: 0 6px 20px rgba(28, 36, 75, 0.08);
	--aloha-sombra-alta: 0 12px 30px rgba(28, 36, 75, 0.12);
	--aloha-sombra-sutil: 0 2px 14px rgba(28, 36, 75, 0.08);
	--aloha-sombra-cta: 0 4px 14px rgba(48, 166, 167, 0.28);
	--aloha-sombra-cta-alta: 0 8px 24px rgba(48, 166, 167, 0.35);

	--aloha-tipo: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--aloha-transicion: 0.25s cubic-bezier(0.4, 0, 0.2, 1);

	/* Neutraliza el morado por defecto de WooCommerce (#720eec) */
	--wc-primary: var(--aloha-cta);
	--wc-primary-text: #ffffff;
	--wc-secondary: var(--aloha-hueso);
	--wc-secondary-text: var(--aloha-navy);
	--wc-highlight: var(--aloha-turquesa-osc);
	--wc-highligh-text: #ffffff;
	--wc-green: var(--aloha-turquesa-osc);
	--wc-form-border-color: var(--aloha-linea);
	--wc-form-border-radius: var(--aloha-r-campo);
	--wc-card-border-radius: var(--aloha-r-tarjeta);
	--woocommerce: var(--aloha-cta);
}

/* --------------------------------------------------------------------------
   1. Base tipográfica
   -------------------------------------------------------------------------- */

.woocommerce,
.woocommerce-page,
.wc-block-checkout,
.wc-block-cart,
.woocommerce-account {
	font-family: var(--aloha-tipo);
	color: var(--aloha-navy);
}

.woocommerce h1,
.woocommerce h2,
.woocommerce h3,
.wc-block-components-title,
.woocommerce-account h2 {
	font-family: var(--aloha-tipo);
	font-weight: 600;
	color: var(--aloha-navy);
	letter-spacing: -0.5px;
	line-height: 1.2;
}

/* --------------------------------------------------------------------------
   2. Botones
   El :not() deja fuera el botón de añadir al carrito de la ficha de producto,
   que ya tiene su propio diseño. Mejor completar que pelearse.
   -------------------------------------------------------------------------- */

.woocommerce a.button:not(.single_add_to_cart_button),
.woocommerce button.button:not(.single_add_to_cart_button),
.woocommerce input.button,
.woocommerce #respond input#submit,
.wc-block-components-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	font-family: var(--aloha-tipo);
	font-weight: 600;
	font-size: 15px;
	line-height: 1.2;
	letter-spacing: 0.2px;
	padding: 14px 30px;
	border: none;
	border-radius: var(--aloha-r-boton);
	background: var(--aloha-cta);
	color: #fff;
	box-shadow: var(--aloha-sombra-cta);
	transition: transform var(--aloha-transicion), box-shadow var(--aloha-transicion),
		background-color var(--aloha-transicion);
	cursor: pointer;
	text-decoration: none;
}

.woocommerce a.button:not(.single_add_to_cart_button):hover,
.woocommerce button.button:not(.single_add_to_cart_button):hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.wc-block-components-button:hover:not(:disabled),
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
	background: var(--aloha-cta-osc);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: var(--aloha-sombra-cta-alta);
}

.woocommerce a.button:active,
.woocommerce button.button:active,
.wc-block-components-button:active {
	transform: translateY(0);
}

/* Foco visible y accesible */
.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce input.button:focus-visible,
.wc-block-components-button:focus-visible {
	outline: 3px solid var(--aloha-turquesa);
	outline-offset: 3px;
}

/* Secundario: contorno navy */
.woocommerce a.button.wc-backward,
.wc-block-cart__submit-container + .wc-block-components-button,
.wc-block-components-button.outlined,
.woocommerce .cart .button[name="update_cart"] {
	background: transparent;
	color: var(--aloha-navy);
	border: 2px solid var(--aloha-linea);
	box-shadow: none;
}

.woocommerce a.button.wc-backward:hover,
.wc-block-components-button.outlined:hover,
.woocommerce .cart .button[name="update_cart"]:hover {
	background: var(--aloha-hueso);
	border-color: var(--aloha-navy);
	color: var(--aloha-navy);
	box-shadow: var(--aloha-sombra-sutil);
}

.woocommerce button.button:disabled,
.wc-block-components-button:disabled {
	background: var(--aloha-cielo);
	color: #fff;
	box-shadow: none;
	transform: none;
	opacity: 0.75;
	cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   3. Campos de formulario
   -------------------------------------------------------------------------- */

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="password"],
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-blocks-components-select__select {
	font-family: var(--aloha-tipo);
	font-size: 15px;
	color: var(--aloha-navy);
	background: #fff;
	border: 1.5px solid var(--aloha-linea);
	border-radius: var(--aloha-r-campo);
	padding: 13px 16px;
	box-shadow: none;
	transition: border-color var(--aloha-transicion), box-shadow var(--aloha-transicion);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.wc-block-components-text-input input:focus,
.wc-blocks-components-select__select:focus {
	border-color: var(--aloha-turquesa);
	box-shadow: 0 0 0 4px rgba(76, 192, 193, 0.18);
	outline: none;
}

.woocommerce form .form-row label,
.wc-block-components-text-input label {
	font-weight: 500;
	color: var(--aloha-navy-70);
	font-size: 14px;
}

.wc-block-components-text-input.is-active label {
	color: var(--aloha-turquesa-osc);
}

.required {
	color: var(--aloha-frambuesa);
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   4. Avisos — barra lateral de color, sin los amarillos por defecto
   -------------------------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner {
	font-family: var(--aloha-tipo);
	font-size: 15px;
	background: var(--aloha-hueso);
	color: var(--aloha-navy);
	border: 1px solid var(--aloha-linea);
	border-left: 4px solid var(--aloha-turquesa);
	border-radius: var(--aloha-r-campo);
	box-shadow: var(--aloha-sombra-sutil);
	padding: 16px 20px;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	color: var(--aloha-turquesa-osc);
}

.woocommerce-message,
.wc-block-components-notice-banner.is-success {
	border-left-color: var(--aloha-turquesa-osc);
}

.woocommerce-error,
.wc-block-components-notice-banner.is-error {
	border-left-color: var(--aloha-frambuesa);
	background: #fdf4f7;
}

.woocommerce-error::before,
.wc-block-components-notice-banner.is-error svg {
	color: var(--aloha-frambuesa);
	fill: var(--aloha-frambuesa);
}

.wc-block-components-notice-banner.is-info,
.woocommerce-info {
	border-left-color: var(--aloha-cielo);
}

/* --------------------------------------------------------------------------
   5. Ficha de producto
   -------------------------------------------------------------------------- */

/* El tamaño y el color del precio en la ficha ya los define el diseño del
   cliente. Aquí solo se afina la relación entre precio tachado y rebajado,
   y se da forma al precio dentro de los bloques de carrito y checkout. */

.wc-block-components-product-price {
	font-family: var(--aloha-tipo);
	font-weight: 600;
	color: var(--aloha-navy);
	letter-spacing: -0.3px;
}

.woocommerce div.product .price del,
.wc-block-components-product-price del {
	color: var(--aloha-navy-50);
	font-weight: 400;
	font-size: 0.62em;
	opacity: 1;
}

.woocommerce div.product .price ins,
.wc-block-components-product-price ins {
	color: var(--aloha-frambuesa);
	text-decoration: none;
	font-weight: 600;
}

/* Etiqueta de oferta: píldora frambuesa */
.woocommerce span.onsale {
	font-family: var(--aloha-tipo);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.3px;
	background: var(--aloha-frambuesa);
	color: #fff;
	border-radius: var(--aloha-r-pildora);
	padding: 7px 16px;
	min-height: 0;
	min-width: 0;
	line-height: 1.2;
	box-shadow: 0 4px 14px rgba(204, 51, 102, 0.28);
}

/* Selector de cantidad */
.woocommerce .quantity .qty,
.wc-block-components-quantity-selector {
	font-family: var(--aloha-tipo);
	font-weight: 600;
	color: var(--aloha-navy);
	border: 1.5px solid var(--aloha-linea);
	border-radius: var(--aloha-r-boton);
	background: #fff;
	padding: 11px 8px;
}

.wc-block-components-quantity-selector::after {
	border-radius: var(--aloha-r-boton);
	box-shadow: none;
}

.wc-block-components-quantity-selector__button {
	color: var(--aloha-navy-70);
	font-weight: 600;
	transition: color var(--aloha-transicion);
}

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

/* Pestañas de descripción / valoraciones */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0;
	margin-bottom: 28px;
	border-bottom: 1.5px solid var(--aloha-linea);
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

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

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: none;
	border-radius: 0;
	margin: 0;
	padding: 0;
}

.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 {
	font-family: var(--aloha-tipo);
	font-weight: 500;
	font-size: 15px;
	color: var(--aloha-navy-70);
	padding: 14px 22px;
	display: block;
	border-bottom: 3px solid transparent;
	transition: color var(--aloha-transicion), border-color var(--aloha-transicion);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--aloha-navy);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--aloha-frambuesa);
	font-weight: 600;
	border-bottom-color: var(--aloha-frambuesa);
}

/* --------------------------------------------------------------------------
   6. Carrito y checkout (bloques)
   -------------------------------------------------------------------------- */

.wc-block-components-sidebar .wc-block-components-panel,
.wc-block-components-order-summary,
.wc-block-cart__sidebar .wc-block-components-sidebar {
	background: var(--aloha-hueso);
	border: 1px solid var(--aloha-linea);
	border-radius: var(--aloha-r-tarjeta);
	box-shadow: var(--aloha-sombra);
}

.wc-block-components-totals-item {
	font-family: var(--aloha-tipo);
	color: var(--aloha-navy-70);
}

.wc-block-components-totals-footer-item,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-weight: 600;
	color: var(--aloha-navy);
	font-size: 20px;
	letter-spacing: -0.3px;
}

.wc-block-components-product-name {
	font-weight: 500;
	color: var(--aloha-navy);
	text-decoration: none;
}

.wc-block-components-product-name:hover {
	color: var(--aloha-frambuesa);
}

/* Separadores más suaves */
.wc-block-components-totals-wrapper,
.wc-block-cart-items__row {
	border-color: var(--aloha-linea);
}

/* Botón de finalizar compra: ancho completo y protagonista */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	width: 100%;
	padding: 18px 30px;
	font-size: 16px;
}

/* --------------------------------------------------------------------------
   7. Métodos de pago — incluye Redsys y Bizum
   -------------------------------------------------------------------------- */

.wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control__option {
	border: 1.5px solid var(--aloha-linea);
	border-radius: var(--aloha-r-campo);
	margin-bottom: 10px;
	padding: 4px 14px;
	background: #fff;
	transition: border-color var(--aloha-transicion), box-shadow var(--aloha-transicion),
		background-color var(--aloha-transicion);
}

.wc-block-components-radio-control-accordion-option:hover,
.wc-block-components-radio-control__option:hover {
	border-color: var(--aloha-cielo);
	background: var(--aloha-hueso);
}

.wc-block-components-radio-control-accordion-option:has(input:checked),
.wc-block-components-radio-control__option:has(input:checked) {
	border-color: var(--aloha-turquesa);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(76, 192, 193, 0.15), var(--aloha-sombra-sutil);
}

.wc-block-components-radio-control__label {
	font-family: var(--aloha-tipo);
	font-weight: 500;
	color: var(--aloha-navy);
}

.wc-block-components-radio-control__input:checked {
	border-color: var(--aloha-turquesa-osc);
	color: var(--aloha-turquesa-osc);
}

/* Radios del checkout clásico (order-pay) */
.woocommerce-checkout #payment ul.payment_methods {
	border-bottom: none;
	padding: 0;
}

.woocommerce-checkout #payment ul.payment_methods li {
	list-style: none;
	border: 1.5px solid var(--aloha-linea);
	border-radius: var(--aloha-r-campo);
	margin-bottom: 10px;
	padding: 14px 18px;
	background: #fff;
	transition: border-color var(--aloha-transicion), box-shadow var(--aloha-transicion);
}

.woocommerce-checkout #payment ul.payment_methods li:has(input:checked) {
	border-color: var(--aloha-turquesa);
	box-shadow: 0 0 0 3px rgba(76, 192, 193, 0.15);
}

.woocommerce-checkout #payment {
	background: transparent;
	border-radius: var(--aloha-r-tarjeta);
}

.woocommerce-checkout #payment div.payment_box {
	background: var(--aloha-hueso);
	border-radius: var(--aloha-r-campo);
	color: var(--aloha-navy-70);
	font-size: 14px;
	line-height: 1.55;
}

.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: var(--aloha-hueso);
}

/* --------------------------------------------------------------------------
   8. Mi cuenta
   -------------------------------------------------------------------------- */

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li {
	border: none;
	margin: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
	font-family: var(--aloha-tipo);
	font-weight: 500;
	font-size: 15px;
	color: var(--aloha-navy-70);
	display: block;
	padding: 13px 18px;
	border-radius: var(--aloha-r-campo);
	text-decoration: none;
	transition: background-color var(--aloha-transicion), color var(--aloha-transicion);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
	background: var(--aloha-hueso);
	color: var(--aloha-navy);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
	background: var(--aloha-navy);
	color: #fff;
	box-shadow: var(--aloha-sombra-sutil);
}

/* Tablas de pedidos */
.woocommerce table.shop_table {
	border: 1px solid var(--aloha-linea);
	border-radius: var(--aloha-r-tarjeta);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	box-shadow: var(--aloha-sombra-sutil);
}

.woocommerce table.shop_table thead th {
	background: var(--aloha-hueso);
	font-family: var(--aloha-tipo);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--aloha-navy-70);
	padding: 16px;
	border: none;
}

.woocommerce table.shop_table td {
	padding: 18px 16px;
	border-top: 1px solid var(--aloha-linea);
	color: var(--aloha-navy);
	vertical-align: middle;
}

/* --------------------------------------------------------------------------
   9. Especificidad de los bloques
   WooCommerce Blocks redeclara sus variables dentro de su propio contenedor,
   de modo que una definición en :root pierde. Hay que declararlas ahí mismo.
   -------------------------------------------------------------------------- */

.wp-block-woocommerce-checkout,
.wp-block-woocommerce-cart,
.wc-block-checkout,
.wc-block-cart {
	--wc-form-border-radius: var(--aloha-r-campo);
	--wc-form-border-color: var(--aloha-linea);
	--wc-form-border-width: 1.5px;
	--wc-card-border-radius: var(--aloha-r-tarjeta);
	--wc-primary: var(--aloha-cta);
	--wc-primary-text: #ffffff;
}

/* WooCommerce usa `.wc-block-components-form .wc-block-components-text-input
   input[type=…]` — misma especificidad que la nuestra, y gana por orden de
   carga. Se antepone el contenedor del bloque para sumar una clase más y
   ganar por especificidad, sin recurrir a !important. */
.wp-block-woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input[type="text"],
.wp-block-woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input[type="email"],
.wp-block-woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input[type="tel"],
.wp-block-woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input[type="number"],
.wp-block-woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input[type="password"],
.wp-block-woocommerce-checkout .wc-block-components-address-form .wc-block-components-text-input input,
.wp-block-woocommerce-cart .wc-block-components-form .wc-block-components-text-input input,
.wc-block-components-form .wc-block-components-text-input input[type="text"],
.wc-block-components-form .wc-block-components-text-input input[type="email"],
.wc-block-components-form .wc-block-components-text-input input[type="tel"],
.wc-blocks-components-select .wc-blocks-components-select__select,
.wc-block-components-textarea {
	border-radius: var(--aloha-r-campo);
	border: 1.5px solid var(--aloha-linea);
	font-family: var(--aloha-tipo);
	color: var(--aloha-navy);
}

.wc-block-components-text-input input:focus,
.wc-blocks-components-select .wc-blocks-components-select__select:focus {
	border-color: var(--aloha-turquesa);
	box-shadow: 0 0 0 4px rgba(76, 192, 193, 0.18);
	outline: none;
}

.wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control__option,
.wc-block-components-radio-control-accordion-option:last-child {
	border-radius: var(--aloha-r-campo);
	border: 1.5px solid var(--aloha-linea);
}

/* La opción marcada lleva su propia clase; se antepone el contenedor para
   ganarle en especificidad. */
.wp-block-woocommerce-checkout .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.wp-block-woocommerce-checkout .wc-block-components-radio-control-accordion-option:has(input:checked) {
	border-radius: var(--aloha-r-campo);
	border: 1.5px solid var(--aloha-turquesa);
	box-shadow: 0 0 0 3px rgba(76, 192, 193, 0.15), var(--aloha-sombra-sutil);
}

/* El botón de finalizar pierde la sombra por una regla de los bloques */
.wc-block-checkout .wc-block-components-checkout-place-order-button,
.wc-block-cart .wc-block-cart__submit-button {
	box-shadow: var(--aloha-sombra-cta);
}

.wc-block-checkout .wc-block-components-checkout-place-order-button:hover,
.wc-block-cart .wc-block-cart__submit-button:hover {
	box-shadow: var(--aloha-sombra-cta-alta);
}

/* --------------------------------------------------------------------------
   10. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
	.woocommerce div.product .price,
	.wc-block-components-product-price {
		font-size: 26px;
	}

	.woocommerce a.button,
	.woocommerce button.button,
	.woocommerce input.button,
	.wc-block-components-button {
		width: 100%;
		text-align: center;
		padding: 15px 24px;
	}

	.woocommerce div.product .woocommerce-tabs ul.tabs {
		gap: 0;
		overflow-x: auto;
		flex-wrap: nowrap;
		-webkit-overflow-scrolling: touch;
	}

	.woocommerce div.product .woocommerce-tabs ul.tabs li a {
		white-space: nowrap;
		padding: 12px 16px;
	}

	.woocommerce table.shop_table thead {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   11. Accesibilidad
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.woocommerce a.button,
	.woocommerce button.button,
	.woocommerce input.button,
	.wc-block-components-button,
	.wc-block-components-radio-control__option,
	.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
		transition: none;
	}

	.woocommerce a.button:hover,
	.woocommerce button.button:hover,
	.wc-block-components-button:hover {
		transform: none;
	}
}