/*! Desarrollado por Cinco Cero · https://cinco-cero.com · © 2026 Cinco Cero. Todos los derechos reservados. */
/**
 * Estilo de marca para las pantallas de WooCommerce (tienda, carrito, finalizar compra, mi cuenta).
 * Solo se carga en esas pantallas. Usa los colores y fuentes globales del Kit de Elementor.
 */
body.woocommerce-page,
body.woocommerce {
	--lcp-w-sea: var(--e-global-color-primary, #0b5361);
	--lcp-w-coral: var(--e-global-color-accent, #c9441a);
	--lcp-w-ink: var(--e-global-color-palma, #20332d);
	--lcp-w-sand: var(--e-global-color-arena, #fff7ea);
	background: var(--lcp-w-sand);
	color: var(--lcp-w-ink);

	/* Variables propias de WooCommerce (bordes de formularios, acentos): se alinean con la marca en vez de pelear con cada regla. */
	--woocommerce: var(--e-global-color-accent, #c9441a);
	--wc-primary: var(--e-global-color-accent, #c9441a);
	--wc-primary-text: #fff;
	--wc-secondary: var(--e-global-color-arena, #fff7ea);
	--wc-secondary-text: var(--e-global-color-palma, #20332d);
	--wc-highlight: var(--e-global-color-primary, #0b5361);
	--wc-form-border-color: rgba(11, 83, 97, 0.22);
	--wc-form-border-radius: 14px;
	--wc-form-border-width: 2px;
	--wc-card-border-radius: 22px;
}

/* Contenedor de la página */
body.woocommerce-page .site-main,
body.woocommerce-page .page-content,
body.woocommerce-page .elementor-widget-wc-elements {
	max-width: 1180px;
	margin-inline: auto;
	padding-inline: 20px;
}

.woocommerce-page .page-header .entry-title,
.woocommerce-page h1.entry-title,
.woocommerce-page .woocommerce-products-header__title {
	color: var(--lcp-w-sea);
	font-family: var(--e-global-typography-primary-font-family, inherit);
	font-size: clamp(2rem, 5vw, 3.2rem);
	font-weight: 800;
	line-height: 1.05;
}

.woocommerce-page h2,
.woocommerce-page h3 {
	color: var(--lcp-w-sea);
	font-family: var(--e-global-typography-primary-font-family, inherit);
	font-weight: 800;
}

/* Botones */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce #place_order,
.woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce-page a.button,
.woocommerce-page button.button {
	display: inline-block;
	padding: 15px 30px;
	border: 0;
	border-radius: 999px;
	background: var(--lcp-w-coral);
	color: #fff;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce #place_order:hover,
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-page a.button:hover,
.woocommerce-page button.button:hover,
.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce #place_order:focus-visible {
	background: var(--lcp-w-ink);
	color: #fff;
}

.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce #place_order:focus-visible {
	outline: 3px solid var(--lcp-w-sea);
	outline-offset: 3px;
}

.woocommerce button.button:disabled,
.woocommerce button.button[disabled],
.woocommerce button.button:disabled[disabled] {
	padding: 15px 30px;
	background: rgba(32, 51, 45, 0.18);
	color: rgba(32, 51, 45, 0.55);
	cursor: not-allowed;
}

.woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce #place_order {
	width: 100%;
	padding: 19px 30px;
	font-size: 1.12rem;
}

/* Tablas del carrito y del pedido */
.woocommerce table.shop_table,
.woocommerce-page table.shop_table {
	overflow: hidden;
	border: 0;
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 20px 40px -30px rgba(11, 83, 97, 0.55);
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: 16px 18px;
	border: 0;
	border-bottom: 1px solid rgba(32, 51, 45, 0.1);
	background: transparent;
}

.woocommerce table.shop_table th {
	color: var(--lcp-w-sea);
	font-weight: 800;
}

.woocommerce table.shop_table tr:last-child td,
.woocommerce table.shop_table tr:last-child th {
	border-bottom: 0;
}

.woocommerce-cart table.cart td.actions {
	background: var(--lcp-w-sand);
}

.woocommerce table.shop_table td.product-name a,
.woocommerce a:not(.button) {
	color: var(--lcp-w-sea);
	font-weight: 600;
}

.woocommerce a:not(.button):hover {
	color: var(--lcp-w-coral);
}

.woocommerce a.remove {
	color: var(--lcp-w-coral) !important;
	font-weight: 800;
}

.woocommerce a.remove:hover {
	background: var(--lcp-w-coral);
	color: #fff !important;
}

.woocommerce .cart_totals {
	padding: 22px 24px;
	border-radius: 26px;
	background: #fff;
	box-shadow: 0 20px 40px -30px rgba(11, 83, 97, 0.55);
}

.woocommerce .cart_totals table.shop_table {
	box-shadow: none;
}

.woocommerce .amount,
.woocommerce .order-total strong {
	color: var(--lcp-w-coral);
	font-weight: 800;
}

/* Campos de formulario */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.woocommerce .quantity .qty,
.woocommerce-cart table.cart td.actions .coupon .input-text,
.select2-container--default .select2-selection--single {
	min-height: 48px;
	padding: 10px 14px;
	border: 2px solid rgba(11, 83, 97, 0.22);
	border-radius: 14px;
	background: #fff;
	color: var(--lcp-w-ink);
	font: inherit;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 26px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 46px;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce .quantity .qty:focus {
	border-color: var(--lcp-w-sea);
	outline: 3px solid rgba(11, 83, 97, 0.2);
	outline-offset: 1px;
}

.woocommerce form .form-row label {
	margin-bottom: 6px;
	font-weight: 600;
}

.woocommerce form .form-row .required {
	color: var(--lcp-w-coral);
}

/* Avisos */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	padding: 18px 22px 18px 54px;
	border: 0;
	border-left: 6px solid var(--lcp-w-sea);
	border-radius: 16px;
	background: #fff;
	color: var(--lcp-w-ink);
	box-shadow: 0 14px 30px -24px rgba(11, 83, 97, 0.55);
}

.woocommerce-error {
	border-left-color: #8a1c1c;
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--lcp-w-sea);
}

.woocommerce-message .button,
.woocommerce-info .button {
	margin-right: 14px;
}

/* Método de pago y resumen en el checkout */
.woocommerce-checkout #payment {
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 20px 40px -30px rgba(11, 83, 97, 0.55);
}

.woocommerce-checkout #payment div.payment_box {
	border-radius: 14px;
	background: var(--lcp-w-sand);
	color: var(--lcp-w-ink);
}

.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: var(--lcp-w-sand);
}

@media (max-width: 767px) {
	body.woocommerce-page .site-main,
	body.woocommerce-page .page-content,
	body.woocommerce-page .elementor-widget-wc-elements {
		padding-inline: 14px;
	}

	.woocommerce .cart_totals {
		padding: 18px 16px;
	}
}

/* Carrito en móvil: cada producto en una tarjeta compacta (nombre y quitar arriba; precio, cantidad y subtotal debajo)
   en lugar de la tabla apilada de WooCommerce, que gastaba una pantalla entera por producto. */
@media (max-width: 767px) {
	.woocommerce-cart table.shop_table_responsive.cart,
	.woocommerce-cart table.shop_table_responsive.cart tbody {
		display: block;
	}

	.woocommerce-cart table.shop_table_responsive.cart thead {
		display: none;
	}

	.woocommerce-cart table.shop_table_responsive.cart tr.cart_item {
		display: grid;
		grid-template-columns: 1fr auto auto;
		align-items: center;
		gap: 6px 14px;
		padding: 16px 16px 14px;
		border-bottom: 1px solid rgba(32, 51, 45, 0.1);
		background: #fff;
	}

	.woocommerce-cart table.shop_table_responsive.cart tr.cart_item td {
		display: block;
		padding: 0;
		border: 0;
		background: transparent !important;
		text-align: left !important;
	}

	.woocommerce-cart table.shop_table_responsive.cart tr.cart_item td::before {
		display: none;
	}

	.woocommerce-cart table.shop_table_responsive.cart td.product-thumbnail {
		display: none;
	}

	.woocommerce-cart table.shop_table_responsive.cart td.product-name {
		grid-column: 1 / 3;
		grid-row: 1;
		font-size: 1.05rem;
	}

	.woocommerce-cart table.shop_table_responsive.cart td.product-remove {
		grid-column: 3;
		grid-row: 1;
		text-align: right !important;
	}

	.woocommerce-cart table.shop_table_responsive.cart td.product-price {
		grid-column: 1;
		grid-row: 2;
		color: rgba(32, 51, 45, 0.7);
	}

	.woocommerce-cart table.shop_table_responsive.cart td.product-quantity {
		grid-column: 2;
		grid-row: 2;
	}

	.woocommerce-cart table.shop_table_responsive.cart td.product-quantity .qty {
		width: 72px;
		min-height: 42px;
		padding: 6px 8px;
		text-align: center;
	}

	.woocommerce-cart table.shop_table_responsive.cart td.product-subtotal {
		grid-column: 3;
		grid-row: 2;
		text-align: right !important;
	}

	.woocommerce-cart table.shop_table_responsive.cart td.actions {
		display: block;
		padding: 16px;
	}

	.woocommerce-cart table.cart td.actions .coupon {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		margin-bottom: 12px;
	}

	.woocommerce-cart table.cart td.actions .coupon .input-text {
		flex: 1 1 140px;
		width: auto;
	}

	.woocommerce-cart table.cart td.actions .coupon .button,
	.woocommerce-cart table.cart td.actions > .button {
		flex: 1 1 100%;
		width: 100%;
	}
}

/* Productos sin foto: WooCommerce mete una imagen genérica que parece rota; mejor no mostrarla. */
.woocommerce-cart-form td.product-thumbnail img.woocommerce-placeholder,
.woocommerce-checkout-review-order-table img.woocommerce-placeholder {
	display: none;
}

.woocommerce-cart-form table.shop_table,
.woocommerce-cart-form table.shop_table.cart {
	border: 0;
}

@media (max-width: 767px) {
	.woocommerce-cart table.shop_table_responsive.cart tr.cart_item td.product-thumbnail {
		display: none;
	}
}

.woocommerce-cart table.cart td.actions .coupon .input-text {
	width: 220px;
}

@media (max-width: 767px) {
	.woocommerce-cart table.cart td.actions .coupon .input-text {
		width: auto;
	}
}

/* Logotipos de las pasarelas (el de ATH Móvil llega a 1253 px de ancho y ocupaba toda la pantalla). */
.woocommerce-checkout #payment ul.payment_methods li img {
	display: inline-block;
	float: none;
	width: auto;
	max-width: 150px;
	max-height: 40px;
	margin: 0 0 0 10px;
	vertical-align: middle;
}
