/* ==========================================================================
   Flor de Jaguar — Rediseño Carrito & Checkout
   Solo reestiliza el HTML nativo de WooCommerce (no reemplaza templates),
   para no romper AJAX de cupón/envío ni las pasarelas de pago activas.
   ========================================================================== */

:root {
	--fdj-purple: #593bad;
	--fdj-purple-light: #f3f0fb;
	--fdj-orange: #e16b19;
	--fdj-text: #18172a;
	--fdj-text-secondary: #686273;
	--fdj-border: #e5e2f0;
	--fdj-card-radius: 18px;
	--fdj-pill-radius: 999px;
}

.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content {
	font-family: Poppins, sans-serif;
	color: var(--fdj-text);
}

/* ── Layout general ───────────────────────────────────────────────────
 * El carrito NO usa el cart.php plano: esta instalación arma la página con
 * dos módulos nativos de Divi puestos en columnas ("WC Cart Products" y
 * "WC Cart Totals"), cada uno disparando sus propios hooks de WooCommerce.
 * Divi ya resuelve el layout de 2 columnas vía su propio row/column — no
 * se le impone un grid nuevo encima (romper eso fue justamente el primer
 * intento, que aplastó la tabla). Aquí solo se restyla el CONTENIDO de
 * cada módulo. */
.woocommerce-cart .cart_totals { position: sticky; top: 24px; }

/* El row de Divi que aloja ambos módulos vive con un ratio 3/5-2/5 dentro de
 * un ancho máximo de 1080px (heredado del layout original) — a ese ancho la
 * columna de productos queda en ~600px, insuficiente para 4 columnas con
 * miniatura, forzando el nombre a partirse en 6-7 líneas ("desfase" que
 * reportó el cliente). Se amplía SOLO el ancho máximo del row (1280px) y se
 * deja que Divi siga resolviendo el ratio 3/5-2/5 de sus columnas por su
 * cuenta — forzar también el % de cada columna (probado antes) descuadraba
 * el cálculo de gutter de Divi y bajaba la ficha de totales de su posición
 * original. Solo en escritorio (en mobile Divi ya apila ambas columnas al
 * 100% por su cuenta). */
@media (min-width: 981px) {
	body.woocommerce-cart .et_pb_row_1 {
		max-width: 1280px !important;
	}
}

/* Anchos fijos para columnas de precio/cantidad/subtotal; el nombre se
 * queda con el espacio restante (columna flexible) en vez de partirse. */
.woocommerce-cart table.cart { table-layout: fixed; }
.woocommerce-cart table.cart .product-thumbnail { width: 90px; }
.woocommerce-cart table.cart .product-price { width: 15%; }
.woocommerce-cart table.cart .product-quantity { width: 21%; }
.woocommerce-cart table.cart .product-subtotal { width: 17%; }
.woocommerce-cart table.cart .product-remove { width: 40px; }

/* ── Cupón (pill) ─────────────────────────────────────────────────────── */
.woocommerce-cart .coupon {
	display: flex;
	gap: 10px;
	margin-bottom: 20px;
}
.woocommerce-cart .coupon #coupon_code {
	flex: 1;
	max-width: 320px;
	height: 48px;
	padding: 0 18px;
	border: 1px solid var(--fdj-border);
	border-radius: var(--fdj-pill-radius);
	font-size: 14px;
}
/* Divi le pone a TODO <button> una animación de hover heredada de
 * .et_pb_button: agranda el padding-right y revela una flecha (glyph "5"
 * de ETmodules) vía ::before/::after — eso es lo que se veía como el botón
 * "encogiendo/creciendo" al pasar el mouse. Se anulan esos pseudo-elementos
 * y se fija el padding también en :hover para que Divi no tenga margen que
 * animar; solo queda la transición de color, igual que "Finalizar compra". */
.woocommerce-cart .coupon button[name="apply_coupon"] {
	height: 48px;
	width: 168px;
	padding: 0 22px !important;
	border: 1.5px solid var(--fdj-purple) !important;
	border-radius: var(--fdj-pill-radius) !important;
	background: #fff !important;
	color: var(--fdj-purple) !important;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .02em !important;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease !important;
}
.woocommerce-cart .coupon button[name="apply_coupon"]::before,
.woocommerce-cart .coupon button[name="apply_coupon"]::after {
	content: none !important;
	display: none !important;
}
/* Divi genera una regla dinámica por módulo (.et_pb_wc_cart_products_0
 * table.cart button[name="apply_coupon"]:hover) con padding-left/right:1em
 * !important — empata en especificidad con la regla de arriba y gana por
 * tener un elemento extra (table+button vs solo button) en el selector.
 * Se iguala esa especificidad exacta aquí, más un width fijo como respaldo
 * para que el tamaño no pueda moverse pase lo que pase con el padding. */
.woocommerce-cart .coupon button[name="apply_coupon"]:hover,
.et_pb_wc_cart_products_0 table.cart .coupon button[name="apply_coupon"]:hover {
	width: 168px;
	padding: 0 22px !important;
	background: var(--fdj-purple) !important;
	color: #fff !important;
	letter-spacing: .02em !important;
}

/* ── Tabla de carrito ─────────────────────────────────────────────────── */
.woocommerce-cart table.cart {
	width: 100%;
	border: 1px solid var(--fdj-border);
	border-radius: var(--fdj-card-radius);
	overflow: hidden;
	border-collapse: separate;
	border-spacing: 0;
	background: #fff;
}
.woocommerce-cart table.cart thead th {
	background: #f8f7fc;
	color: var(--fdj-text-secondary);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 14px 16px;
	border-bottom: 1px solid var(--fdj-border);
}
.woocommerce-cart table.cart td {
	padding: 16px;
	border-bottom: 1px solid var(--fdj-border);
	vertical-align: middle;
}
.woocommerce-cart table.cart tr:last-child td { border-bottom: 0; }

.woocommerce-cart table.cart .product-thumbnail img {
	width: 68px;
	height: 68px;
	object-fit: cover;
	border-radius: 12px;
}
.woocommerce-cart table.cart .product-name a {
	font-weight: 700;
	color: var(--fdj-text);
	text-decoration: none;
}
.woocommerce-cart table.cart .product-price,
.woocommerce-cart table.cart .product-subtotal {
	font-weight: 700;
	color: var(--fdj-purple);
	white-space: nowrap;
}
.woocommerce-cart table.cart .product-remove a.remove {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #f3f0fb;
	color: var(--fdj-purple) !important;
	font-size: 16px;
	line-height: 1;
	text-decoration: none !important;
}
.woocommerce-cart table.cart .product-remove a.remove:hover {
	background: var(--fdj-purple);
	color: #fff !important;
}

/* Stepper de cantidad (+/- inyectados por JS alrededor del input .qty) */
.woocommerce-cart .fdj-qty-wrap {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--fdj-border);
	border-radius: 10px;
	overflow: hidden;
}
.woocommerce-cart .fdj-qty-wrap button {
	width: 32px;
	height: 32px;
	border: none;
	background: #f8f7fc;
	color: var(--fdj-text);
	font-size: 16px;
	cursor: pointer;
}
.woocommerce-cart .fdj-qty-wrap button:hover { background: var(--fdj-purple-light); }
.woocommerce-cart .fdj-qty-wrap input.qty {
	width: 44px;
	height: 32px;
	border: none;
	border-left: 1px solid var(--fdj-border);
	border-right: 1px solid var(--fdj-border);
	text-align: center;
	font-weight: 700;
	-moz-appearance: textfield;
}
.woocommerce-cart .fdj-qty-wrap input.qty::-webkit-inner-spin-button,
.woocommerce-cart .fdj-qty-wrap input.qty::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Fila de acciones (cupón ya está arriba; "Actualizar carrito" queda aquí) */
.woocommerce-cart table.cart tr.actions td.actions {
	background: #fafafa;
	padding: 16px;
}
.woocommerce-cart table.cart tr.actions .coupon { margin-bottom: 0; }
.woocommerce-cart button[name="update_cart"] {
	height: 44px;
	width: 168px;
	padding: 0 22px !important;
	border: 1.5px solid var(--fdj-purple) !important;
	border-radius: var(--fdj-pill-radius) !important;
	background: #fff !important;
	color: var(--fdj-purple) !important;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .02em !important;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease !important;
}
.woocommerce-cart button[name="update_cart"]::before,
.woocommerce-cart button[name="update_cart"]::after {
	content: none !important;
	display: none !important;
}
.woocommerce-cart button[name="update_cart"]:hover,
.et_pb_wc_cart_products_0 table.cart button[name="update_cart"]:hover {
	width: 168px;
	padding: 0 22px !important;
	background: var(--fdj-purple) !important;
	color: #fff !important;
	letter-spacing: .02em !important;
}

/* ── Tarjeta de totales (sidebar) ─────────────────────────────────────── */
.woocommerce-cart .cart_totals,
.woocommerce-checkout #order_review {
	background: #fff;
	border: 1px solid var(--fdj-border);
	border-radius: var(--fdj-card-radius);
	padding: 22px;
	box-shadow: 0 8px 30px rgba(24,23,42,.05);
}
.woocommerce-cart .cart_totals > h2 { display: none; } /* reemplazado por .fdj-cc-totals-title */
.fdj-cc-totals-title,
.fdj-cc-order-title {
	margin: 0 0 14px;
	font-size: 18px;
	font-weight: 800;
	color: var(--fdj-text);
}
.woocommerce-cart .cart_totals table.shop_table,
.woocommerce-checkout .woocommerce-checkout-review-order-table {
	width: 100%;
	border: none;
}
.woocommerce-cart .cart_totals table.shop_table tr th,
.woocommerce-cart .cart_totals table.shop_table tr td,
.woocommerce-checkout .woocommerce-checkout-review-order-table th,
.woocommerce-checkout .woocommerce-checkout-review-order-table td {
	border: none;
	padding: 10px 0;
	font-size: 14px;
}
.woocommerce-cart .cart_totals tr.order-total th,
.woocommerce-cart .cart_totals tr.order-total td,
.woocommerce-checkout .order-total th,
.woocommerce-checkout .order-total td {
	border-top: 1px solid var(--fdj-border);
	padding-top: 14px;
	font-size: 18px;
	font-weight: 800;
	color: var(--fdj-purple);
}

/* Barra de envío gratis */
.fdj-cc-shipbar { margin: 0 0 18px; }
.fdj-cc-shipbar-text {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--fdj-text-secondary);
}
.fdj-cc-shipbar-text.is-reached { color: var(--fdj-purple); }
.fdj-cc-shipbar-track {
	height: 8px;
	border-radius: 999px;
	background: var(--fdj-border);
	overflow: hidden;
}
.fdj-cc-shipbar-fill {
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--fdj-purple), var(--fdj-orange));
	transition: width .3s ease;
}

/* Botón "Finalizar compra" / "Realizar pedido" — Divi le mete su propio
 * padding y line-height (con !important en algunos temas) al ser un <a>/
 * <button> con clases de botón; si solo se fija height+line-height sin
 * anular ese padding, el texto queda pegado arriba y sobra hueco abajo.
 * Con flex + padding:0 se centra sin depender de que gane la pelea de
 * especificidad contra Divi. */
.woocommerce-cart .wc-proceed-to-checkout .checkout-button,
.woocommerce-checkout #place_order {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 52px;
	line-height: normal !important;
	padding: 0 !important;
	margin: 0;
	border: none !important;
	border-radius: var(--fdj-pill-radius) !important;
	background: var(--fdj-orange) !important;
	color: #fff !important;
	font-weight: 800;
	font-size: 15px;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: .02em;
	text-decoration: none;
	cursor: pointer;
	transition: filter .15s ease;
}
.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover,
.woocommerce-checkout #place_order:hover { filter: brightness(0.94) !important; }

/* Insignias de pago / confianza — gráfico real de métodos de pago en vez
 * de las pastillas de texto (VISA/Mastercard/...). */
.fdj-cc-trust-badges { margin-top: 16px; text-align: center; }
.fdj-cc-trust-badges > span {
	display: block;
	font-size: 11px;
	color: var(--fdj-text-secondary);
	margin-bottom: 8px;
}
.fdj-cc-trust-badges img {
	max-width: 280px;
	width: 100%;
	height: auto;
	margin: 0 auto;
	display: block;
}
.fdj-cc-badge-row { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.fdj-cc-badge {
	padding: 4px 10px;
	border: 1px solid var(--fdj-border);
	border-radius: 6px;
	font-size: 10px;
	font-weight: 700;
	color: var(--fdj-text-secondary);
}
.fdj-cc-trust-line {
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	gap: 6px 18px;
	justify-content: center;
	margin-top: 28px;
	padding-top: 16px;
	border-top: 1px solid var(--fdj-border);
	font-size: 12px;
	color: var(--fdj-text-secondary);
}

/* ══════════════════════════════════════════════════════════════════════
   CHECKOUT
   ══════════════════════════════════════════════════════════════════════ */

/* Stepper decorativo */
.fdj-cc-stepper {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	max-width: 640px;
	margin: 0 auto 32px;
	padding: 16px 20px;
	background: #fff;
	border: 1px solid var(--fdj-border);
	border-radius: var(--fdj-card-radius);
}
.fdj-cc-step {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 700;
	color: var(--fdj-text-secondary);
	text-decoration: none;
}
.fdj-cc-step-dot {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--fdj-border);
	color: #fff;
	font-size: 12px;
}
.fdj-cc-step.is-done .fdj-cc-step-dot { background: var(--fdj-purple); }
.fdj-cc-step.is-done { color: var(--fdj-purple); }
.fdj-cc-step.is-current .fdj-cc-step-dot { background: var(--fdj-orange); }
.fdj-cc-step.is-current { color: var(--fdj-text); }
.fdj-cc-step-line { width: 40px; height: 2px; background: var(--fdj-border); }
.fdj-cc-step-line.is-done { background: var(--fdj-purple); }

/* Layout de dos columnas */
@media (min-width: 992px) {
	.woocommerce-checkout form.checkout {
		display: grid;
		grid-template-columns: 1fr 420px;
		gap: 28px;
		align-items: start;
		max-width: 1240px;
		margin: 0 auto;
	}
	.woocommerce-checkout #customer_details { grid-column: 1; grid-row: 1; }
	.woocommerce-checkout #order_review_heading { display: none; }
	.woocommerce-checkout #order_review {
		grid-column: 2;
		grid-row: 1 / span 2;
		position: sticky;
		top: 24px;
	}
}
@media (max-width: 991px) {
	.woocommerce-checkout #order_review_heading { display: none; }
}

/* #customer_details trae de fábrica dos columnas flotadas (.col-1 con la
 * facturación, .col-2 con "Información adicional"/notas del pedido) a 50%
 * cada una — con eso la facturación queda comprimida a la mitad del ancho
 * (los pares nombre/apellido etc. terminan apretadísimos) y, como .col-2
 * es mucho más corta, deja un bloque de espacio vacío debajo de ella. Se
 * apilan a ancho completo: la facturación gana todo el ancho disponible
 * para que sus pares de campos respiren, y las notas del pedido pasan a
 * ser una sección propia debajo, separada con un borde. */
.woocommerce-checkout #customer_details.col2-set {
	display: block;
}
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
	float: none;
	width: 100% !important;
}
.woocommerce-checkout #customer_details .col-2 {
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid var(--fdj-border);
}

/* Campos de facturación */
.woocommerce-checkout #customer_details {
	background: #fff;
	border: 1px solid var(--fdj-border);
	border-radius: var(--fdj-card-radius);
	padding: 24px;
}
.woocommerce-checkout .form-row label {
	font-size: 13px;
	font-weight: 700;
	color: var(--fdj-text);
	margin-bottom: 6px;
	display: block;
}
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
	width: 100%;
	height: 46px;
	padding: 0 14px;
	border: 1px solid var(--fdj-border);
	border-radius: 10px;
	font-size: 14px;
	background: #fff;
}
.woocommerce-checkout .form-row textarea { height: auto; padding: 12px 14px; }

/* Tabla "Tu pedido" dentro de la tarjeta sticky */
.woocommerce-checkout .woocommerce-checkout-review-order-table thead { display: none; }
.woocommerce-checkout .woocommerce-checkout-review-order-table .product-name { color: var(--fdj-text); }
.woocommerce-checkout .woocommerce-checkout-review-order-table .product-total { text-align: right; font-weight: 700; }

/* Miniatura de producto en el recuento del pedido — review-order.php no
 * trae imagen por defecto, se agrega vía filtro (ver PHP) envuelta en
 * .fdj-cc-order-item. Tamaño intermedio: identifica el producto sin
 * competir visualmente con el total. */
.woocommerce-checkout .fdj-cc-order-item {
	display: flex;
	align-items: center;
	gap: 10px;
}
.woocommerce-checkout .fdj-cc-order-thumb-wrap {
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: 8px;
	overflow: hidden;
}
.woocommerce-checkout .fdj-cc-order-thumb {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 8px;
	display: block;
}
.woocommerce-checkout .fdj-cc-order-name { flex: 1; min-width: 0; }

/* Métodos de envío (radios dentro de la tabla de totales) */
.woocommerce-checkout ul#shipping_method,
.woocommerce-cart ul#shipping_method {
	list-style: none;
	margin: 0;
	padding: 0;
}
.woocommerce-checkout ul#shipping_method li,
.woocommerce-cart ul#shipping_method li {
	display: block;
	padding: 10px 0;
}

/* Métodos de pago — tarjetas con borde resaltado al seleccionar */
.woocommerce-checkout ul.wc_payment_methods {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method {
	border: 1.5px solid var(--fdj-border);
	border-radius: 12px;
	padding: 14px 16px;
	background: #fafafa;
	transition: border-color .15s ease, background .15s ease;
}
.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method.fdj-selected {
	border-color: var(--fdj-purple);
	background: var(--fdj-purple-light);
}
.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method label {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
	margin: 0;
}
.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method label img {
	height: 20px;
	width: auto;
}
.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method input.input-radio {
	width: 18px;
	height: 18px;
	accent-color: var(--fdj-purple);
}
.woocommerce-checkout ul.wc_payment_methods .payment_box {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px dashed var(--fdj-border);
	font-size: 13px;
	color: var(--fdj-text-secondary);
}

/* Términos + botón final */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper { margin: 18px 0 12px; font-size: 12px; }
.woocommerce-checkout .form-row.place-order { margin-top: 18px; }

/* ── Mobile ───────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
	.woocommerce-cart table.cart thead { display: none; }
	/* woocommerce-smallscreen.css oculta la miniatura y agrega etiquetas
	 * "Producto:"/"Precio:" vía td::before (data-title) en mobile — se
	 * revierte para lograr la tarjeta compacta con imagen del mockup. */
	.woocommerce-cart table.cart .product-thumbnail { display: block !important; }
	.woocommerce-cart table.cart td::before { content: none !important; }
	/* WooCommerce pone la clase "actions" en el <td>, no en el <tr> — el
	 * selector debe excluir la fila que CONTIENE ese td (cupón + botón
	 * actualizar), si no, esa fila también cae al grid de 3 columnas y
	 * el botón "Aplicar cupón" queda aplastado en la columna "remove". */
	.woocommerce-cart table.cart tr:not(:has(td.actions)) {
		display: grid;
		grid-template-columns: auto auto 1fr;
		grid-template-areas:
			"remove thumb name"
			"remove thumb price"
			"remove thumb qty"
			"remove thumb subtotal";
		gap: 4px 12px;
		padding: 14px;
	}
	.woocommerce-cart table.cart .product-remove { grid-area: remove; align-self: start; }
	.woocommerce-cart table.cart .product-thumbnail { grid-area: thumb; align-self: start; }
	.woocommerce-cart table.cart .product-thumbnail img { width: 56px; height: 56px; }
	.woocommerce-cart table.cart .product-name { grid-area: name; }
	.woocommerce-cart table.cart .product-price { grid-area: price; }
	.woocommerce-cart table.cart .product-quantity { grid-area: qty; }
	.woocommerce-cart table.cart .product-subtotal { grid-area: subtotal; }
	.woocommerce-cart table.cart td { padding: 0; border: none; }
	.woocommerce-cart .coupon { flex-direction: column; }
	.woocommerce-cart .coupon #coupon_code { max-width: 100%; }
	.fdj-cc-stepper { gap: 6px; padding: 12px; }
	.fdj-cc-step span:last-child { display: none; }
	.fdj-cc-step-line { width: 20px; }
	.woocommerce-checkout #customer_details,
	.woocommerce-checkout #order_review { padding: 16px; }
	.woocommerce-checkout .fdj-cc-order-thumb-wrap,
	.woocommerce-checkout .fdj-cc-order-thumb { width: 40px; height: 40px; }
}

/* El row de Divi que envuelve el carrito/checkout trae ~57px de margen +
 * 20px de padding propio, y el módulo de texto que envuelve el checkout
 * suma otros 15px — en mobile eso desperdicia ~90px de viewport a cada
 * lado. Se anula todo ese padding/margen anidado y se deja un único
 * respiro de 10px controlado aquí, para que el contenido use casi todo
 * el ancho de pantalla (en escritorio el layout original queda intacto). */
@media (max-width: 767px) {
	body.woocommerce-cart .et_pb_row_1,
	body.woocommerce-checkout .et_pb_row_1 {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 10px !important;
		padding-right: 10px !important;
	}
	body.woocommerce-cart .et_pb_row_1 .et_pb_module,
	body.woocommerce-checkout .et_pb_row_1 .et_pb_module,
	body.woocommerce-cart .et_pb_row_1 .et_pb_module_inner,
	body.woocommerce-checkout .et_pb_row_1 .et_pb_module_inner,
	body.woocommerce-cart .et_pb_row_1 .et_pb_text_inner,
	body.woocommerce-checkout .et_pb_row_1 .et_pb_text_inner {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}