/* Carrito, caja, mi cuenta y pedido recibido. Carrito y caja son los bloques de WooCommerce (React): no se
   reconstruyen, se visten con la marca. Todo acotado a las pantallas de compra. */

.obt-compra {
	padding: 28px 0 var(--obt-seccion);
}

.obt-compra__cabecera {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: space-between;
	gap: 16px 40px;
	margin-bottom: clamp(24px, 4vw, 40px);
}

.obt-compra__cabecera h1 {
	margin: 0;
}

.obt-compra__pasos {
	display: flex;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--obt-t-pequeno);
	color: var(--obt-musgo);
}

.obt-compra__pasos li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
}

.obt-compra__pasos li + li::before {
	content: "";
	width: 24px;
	height: 1px;
	margin-right: 4px;
	background: var(--obt-borde-campo);
}

.obt-compra__paso-num {
	display: inline-grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border: 1px solid var(--obt-borde-campo);
	border-radius: 999px;
	font-family: var(--obt-sans);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1;
	font-variant-numeric: lining-nums tabular-nums;
}

.obt-compra__pasos .es-actual {
	color: var(--obt-bosque);
	font-weight: 600;
}

.obt-compra__pasos .es-actual .obt-compra__paso-num,
.obt-compra__pasos .es-hecho .obt-compra__paso-num {
	border-color: var(--obt-bosque);
	background: var(--obt-bosque);
	color: var(--obt-hueso);
}

.obt-compra__ayuda {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 32px;
	margin-top: clamp(32px, 5vw, 56px);
	padding: 24px 28px;
	border-radius: var(--obt-r-bloque);
	background: var(--obt-lino);
	font-size: var(--obt-t-pequeno);
}

.obt-compra__ayuda p {
	margin: 0;
}

.obt-compra__garantias {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--obt-musgo);
}

.obt-compra__garantias li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.obt-compra__garantias .obt-icono {
	color: var(--obt-andevalo);
}

/* Bloques de carrito y caja */
.obt-compra .wc-block-components-sidebar-layout {
	flex-wrap: nowrap;
	gap: clamp(24px, 4vw, 48px);
}

.obt-compra .wc-block-components-main {
	flex: 1 1 0%;
	min-width: 0;
	padding-right: 0;
}

.obt-compra .wc-block-components-sidebar {
	padding-left: 0;
}

.obt-compra .wc-block-components-sidebar .wc-block-components-panel,
.obt-compra .wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-block,
.obt-compra .wp-block-woocommerce-checkout-order-summary-block {
	border-radius: var(--obt-r-bloque);
	background: var(--obt-blanco);
}

.obt-compra .wp-block-woocommerce-checkout-order-summary-block,
.obt-compra .wp-block-woocommerce-cart-order-summary-block {
	padding: 8px 20px;
	border: var(--obt-filete);
	border-radius: var(--obt-r-bloque);
	background: var(--obt-blanco);
}

.obt-compra .wc-block-cart-items {
	border-color: var(--obt-borde) !important;
}

.obt-compra .wc-block-components-title,
.obt-compra .wc-block-components-checkout-step__title {
	font-family: var(--obt-serifa) !important;
	font-weight: 500 !important;
}

.obt-compra .wc-block-components-checkout-step__title,
.obt-compra h2.wc-block-components-title {
	font-size: 1.625rem !important;
}

/* Cabecera de la tabla del carrito: etiqueta de dato en mono, como en la ficha técnica (no un titular de 13 px) */
.obt-compra .wc-block-cart-items th {
	font-family: var(--obt-mono) !important;
	font-size: var(--obt-t-dato) !important;
	font-weight: 400 !important;
	letter-spacing: 0.04em;
	text-transform: none !important;
	color: var(--obt-musgo);
}

/* El título del resumen del carrito, como el de la caja ("Resumen del pedido") */
.obt-compra .wc-block-cart__totals-title {
	font-family: var(--obt-sans) !important;
	font-size: 1.25rem !important;
	font-weight: 500 !important;
	letter-spacing: 0;
	text-transform: none !important;
	color: var(--obt-bosque);
}

/* Nombres de producto siempre en Hanken (en la caja móvil el resumen los ponía en Cormorant) */
.obt-compra .wc-block-components-product-name {
	font-family: var(--obt-sans) !important;
	font-weight: 600;
	line-height: 1.35;
	color: var(--obt-bosque);
	text-decoration: none;
}

.obt-compra .wc-block-cart-item__product .wc-block-components-product-name {
	font-size: var(--obt-t-pequeno) !important;
}

.obt-compra .wc-block-components-order-summary-item .wc-block-components-product-name {
	font-size: var(--obt-t-dato) !important;
}

/* El resumen corto del producto, cortado a 17 caracteres ("Aceite de oliva v…"), no aporta: fuera.
   La presentación elegida sí se queda, a 13 px. */
.obt-compra .wc-block-components-product-metadata__description {
	display: none;
}

.obt-compra .wc-block-components-product-details,
.obt-compra .wc-block-components-product-details span {
	font-size: var(--obt-t-dato) !important;
}

/* Cantidad sobre la miniatura del resumen: 13 px en su círculo de 20 (medido: la cifra queda centrada) */
.obt-compra .wc-block-components-order-summary-item__quantity {
	font-size: var(--obt-t-dato) !important;
	line-height: 1;
}

.obt-compra .wc-block-components-order-summary-item__quantity span {
	font-size: inherit !important;
}

.obt-compra .wc-block-components-product-price,
.obt-compra .wc-block-components-totals-item__value,
.obt-compra .wc-block-formatted-money-amount {
	font-family: var(--obt-mono);
}

.obt-compra .wc-block-cart-item__image img,
.obt-compra .wc-block-components-order-summary-item__image img {
	border-radius: 8px;
	background: var(--obt-blanco);
	object-fit: contain;
}

.obt-compra .wc-block-components-text-input input,
.obt-compra .wc-block-components-combobox .wc-block-components-combobox-control input,
.obt-compra .wc-blocks-components-select .wc-blocks-components-select__select,
.obt-compra .wc-block-components-textarea {
	border-color: var(--obt-borde-campo) !important;
	border-radius: var(--obt-r-campo) !important;
	background: var(--obt-blanco) !important;
}

.obt-compra .wc-block-components-text-input.is-active input:focus,
.obt-compra .wc-block-components-text-input input:focus {
	border-color: var(--obt-andevalo) !important;
	box-shadow: 0 0 0 1px var(--obt-andevalo) !important;
}

.obt-compra .wc-block-components-button:not(.is-link),
.obt-compra .wc-block-cart__submit-button,
.obt-compra .wc-block-components-checkout-place-order-button {
	min-height: 52px;
	border-radius: 999px !important;
	background: var(--obt-andevalo) !important;
	color: var(--obt-hueso) !important;
	font-weight: 600 !important;
	transition: background-color var(--obt-d-estado) ease, transform var(--obt-d-pulsar) var(--obt-ease-salida);
}

.obt-compra .wc-block-components-button:not(.is-link):active {
	transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
	.obt-compra .wc-block-components-button:not(.is-link):hover {
		background: var(--obt-bosque) !important;
	}
}

.obt-compra .wc-block-components-radio-control__option,
.obt-compra .wc-block-components-radio-control-accordion-option {
	border-color: var(--obt-borde) !important;
}

.obt-compra .wc-block-components-radio-control__input:checked {
	border-color: var(--obt-andevalo) !important;
}

.obt-compra .wc-block-components-radio-control__input:checked::before {
	background: var(--obt-andevalo) !important;
}

.obt-compra .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked {
	background: var(--obt-andevalo) !important;
	border-color: var(--obt-andevalo) !important;
}

.obt-compra .wc-block-components-notice-banner {
	border-radius: var(--obt-r-tarjeta);
}

/* Mi cuenta (clásico) */
.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) {
	display: grid;
	grid-template-columns: minmax(200px, 3fr) minmax(0, 9fr);
	gap: clamp(24px, 4vw, 56px);
	align-items: start;
}

.woocommerce-account .woocommerce > * {
	grid-column: 1 / -1;
}

/* La hoja de WooCommerce les da 30 % y 68 % flotando: dentro de la rejilla, cada uno ocupa su columna entera */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: auto;
}

.woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation {
	grid-column: 1 / 2;
}

.woocommerce-account .woocommerce > .woocommerce-MyAccount-content {
	grid-column: 2 / 3;
}

.woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: var(--obt-filete);
}

.woocommerce-MyAccount-navigation a {
	display: flex;
	align-items: center;
	min-height: 48px;
	border-bottom: var(--obt-filete);
	color: var(--obt-bosque);
	text-decoration: none;
}

.woocommerce-MyAccount-navigation .is-active a {
	color: var(--obt-andevalo);
	font-weight: 600;
}

.woocommerce-account .woocommerce form .form-row input.input-text {
	min-height: 48px;
	border: 1px solid var(--obt-borde-campo);
	border-radius: var(--obt-r-campo);
	background: var(--obt-blanco);
}

.woocommerce-account .woocommerce .button {
	min-height: 48px;
	padding: 12px 28px;
	border: 0;
	border-radius: 999px;
	background: var(--obt-andevalo);
	color: var(--obt-hueso);
	font-weight: 600;
}

.woocommerce-account .woocommerce form.woocommerce-form-login {
	max-width: 30rem;
	margin: 0;
	padding: 28px;
	border: var(--obt-filete);
	border-radius: var(--obt-r-bloque);
	background: var(--obt-lino);
}

/* Sin el relleno de 3 px de cada fila: campos, botón y enlace en el mismo borde */
.woocommerce-account .woocommerce form.woocommerce-form-login .form-row {
	margin: 0 0 16px;
	padding: 0;
}

.woocommerce-account .woocommerce form.woocommerce-form-login .form-row label {
	margin-bottom: 6px;
}

/* Fila del botón: flexible y sin el ::before de "clearfix", que contaba como un elemento más y metía 20 px */
.woocommerce-account .woocommerce form.woocommerce-form-login .form-row:has(.woocommerce-form-login__submit) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
	margin: 24px 0 8px;
}

.woocommerce-account .woocommerce form.woocommerce-form-login .form-row:has(.woocommerce-form-login__submit)::before,
.woocommerce-account .woocommerce form.woocommerce-form-login .form-row:has(.woocommerce-form-login__submit)::after {
	display: none;
}

.woocommerce-account .woocommerce form.woocommerce-form-login .woocommerce-form-login__submit {
	float: none;
	margin: 0;
}

.woocommerce-account .woocommerce form.woocommerce-form-login .form-row label.woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	margin: 0;
	order: 2;
}

.woocommerce-account .woocommerce form.woocommerce-form-login .form-row label.woocommerce-form-login__rememberme input {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--obt-andevalo);
}

.woocommerce-account .woocommerce form.woocommerce-form-login .woocommerce-LostPassword {
	margin: 0;
}

.woocommerce-account .woocommerce form.woocommerce-form-login .woocommerce-LostPassword a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* Mostrar la contraseña: 44 px de objetivo, centrado en el campo */
.woocommerce-account .password-input {
	position: relative;
	display: block;
}

.woocommerce-account .woocommerce form .show-password-input {
	position: absolute;
	top: 50%;
	right: 2px;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	transform: translateY(-50%);
	border: 0;
	background: transparent;
	display: grid;
	place-items: center;
}

.woocommerce-account .woocommerce form .show-password-input::after {
	margin: 0;
}

/* Pedido recibido */
.woocommerce-order .woocommerce-thankyou-order-received {
	padding: 24px 28px;
	border-radius: var(--obt-r-bloque);
	background: var(--obt-lino);
	font-size: var(--obt-t-entradilla);
}

.obt-recibo__titulo {
	display: block;
	font-family: var(--obt-serifa);
	font-size: 2rem;
	font-weight: 500;
}

.obt-recibo__auth {
	display: block;
	margin-top: 8px;
	font-family: var(--obt-mono);
	font-size: var(--obt-t-dato);
	color: var(--obt-musgo);
}

.woocommerce-order-overview {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 0;
	margin: 24px 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--obt-bosque);
}

.woocommerce-order-overview li {
	padding: 14px 0;
	border-bottom: var(--obt-filete);
	font-family: var(--obt-mono);
	font-size: var(--obt-t-dato);
	color: var(--obt-musgo);
}

.woocommerce-order-overview li strong {
	display: block;
	margin-top: 4px;
	font-family: var(--obt-sans);
	font-size: 1rem;
	color: var(--obt-bosque);
}

.obt-resena {
	display: grid;
	gap: 10px;
	justify-items: start;
	margin: 24px 0;
	padding: 28px;
	border: var(--obt-filete);
	border-radius: var(--obt-r-bloque);
	background: var(--obt-blanco);
}

.obt-resena p {
	margin: 0;
	max-width: 40rem;
	color: var(--obt-musgo);
}

.obt-resena__titulo {
	font-family: var(--obt-serifa);
	font-size: 1.75rem;
	color: var(--obt-bosque) !important;
}

.woocommerce-order-details table,
.woocommerce-table--order-details {
	width: 100%;
	border-collapse: collapse;
}

.woocommerce-table--order-details th,
.woocommerce-table--order-details td {
	padding: 10px 0;
	border-bottom: var(--obt-filete);
	text-align: left;
}

@media (max-width: 899px) {
	.obt-compra .wc-block-components-sidebar-layout {
		flex-wrap: wrap;
	}

	.woocommerce-account .woocommerce {
		grid-template-columns: 1fr;
	}

	.woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation,
	.woocommerce-account .woocommerce > .woocommerce-MyAccount-content {
		grid-column: 1 / -1;
	}
}

@media (max-width: 639px) {
	.obt-compra__pasos {
		font-size: var(--obt-t-dato);
	}

	.obt-compra__pasos li + li::before {
		width: 12px;
	}
}

/* Carrito vacío: el título del bloque sin el icono ni los puntos; los productos son las tarjetas de la tienda
   (inc/woo.php sustituye el bloque "Nuevo en la tienda") */
.obt-compra .wc-block-cart__empty-cart__title.with-empty-cart-icon::before,
.obt-compra .wp-block-woocommerce-empty-cart-block .wp-block-separator {
	display: none;
}

.obt-compra .wc-block-cart__empty-cart__title {
	margin: 0 0 8px;
	font-family: var(--obt-serifa);
	font-size: var(--obt-t-titulo);
	font-weight: 500;
	text-align: left;
}

.obt-compra .wp-block-woocommerce-empty-cart-block > h2:not(.wc-block-cart__empty-cart__title) {
	margin: 40px 0 20px;
	font-size: var(--obt-t-titulo);
	text-align: left;
}

/* Mi cuenta sin sesión: el formulario de acceso sin el hueco de las columnas de WooCommerce */
.woocommerce-account .obt-compra__contenido > .woocommerce > h2 {
	margin: 0 0 20px;
	font-size: var(--obt-t-titulo);
}

.woocommerce-account .woocommerce-form-login {
	margin: 0;
}

@media (max-width: 419px) {
	/* Solo el paso actual con su nombre; los otros, con su número (el nombre sigue para el lector de pantalla) */
	.obt-compra__pasos li:not(.es-actual) .obt-compra__paso-texto {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}
}