/* ===============================================================
   TIENDA — estilos de WooCommerce
   Tema hijo Backbone. Referencia: Figma "Vestigio Minis".

   Notas de cascada (importante al editar):
   - Esta hoja carga DESPUÉS de oceanwp-woocommerce (dependencia
     declarada en functions.php): los empates los ganamos nosotros.
   - El CSS inline del Customizer de OceanWP se imprime aún más
     tarde y usa selectores fuertes, p. ej.
       .woocommerce .owp-btn-normal .summary form button.button
     Por eso los selectores de aquí van anclados a
     .single-product div.product .entry-summary — no acortarlos.
   =============================================================== */


/* ===============================================================
   FICHA DE PRODUCTO
   =============================================================== */

/* --- Migas de pan: "Tienda/ Caja sorpresa Vestigio Minis" ------- */

.single-product .bb-breadcrumb {
	font-family: var( --bb-font-display );
	font-size: 16px;
	letter-spacing: var( --bb-tracking-display );
	color: white;
	margin-bottom: var( --bb-space-6 );
}

.single-product .bb-breadcrumb a {
	color: var( --bb-text-muted );
	text-decoration: none;
}

.single-product .bb-breadcrumb a:hover {
	color: var( --bb-text );
}

/* --- Título ------------------------------------------------------ */

.single-product div.product .entry-summary .product_title {
	font-family: var( --bb-font-display );
	font-size: 26px;
	font-weight: 400;
	color: var( --bb-text );
	letter-spacing: var( --bb-tracking-display );
	line-height: var( --bb-leading-tight );
	border: 0;
	padding: 0;
	margin: 0 0 var( --bb-space-4 );
}

/* --- Fila precio + stock ---------------------------------------- */

.single-product div.product .entry-summary .bb-price-row {
	display: flex;
	align-items: baseline;
	gap: var( --bb-space-4 );
	border: 0;
	margin: 0 0 var( --bb-space-5 );
}

.single-product div.product .entry-summary .bb-price-row p.price {
	font-family: var( --bb-font-price );
	font-size: var( --bb-text-2xl );
	font-weight: 600;
	line-height: 1;
	color: var( --bb-text );
	margin: 0;
}

.single-product div.product .entry-summary .bb-price-row p.price .bb-mxn {
	font-family: var( --bb-font-price );
	font-size: var( --bb-text-sm );
	font-weight: 600;
	letter-spacing: var( --bb-tracking-ui );
	color: var( --bb-text );
}

/* Stock dentro de la fila: rosa, versalitas, a la derecha. */
.single-product div.product .entry-summary .bb-price-row p.stock {
	font-family: var( --bb-font-display );
	font-size: 16px;
	letter-spacing: var( --bb-tracking-display );
	font-weight: 100;
	/*text-transform: uppercase;*/
	color: var( --bb-text-muted );
	margin: 0 0 0 auto;
}

/* El stock que Woo imprime junto al formulario, oculto: ya está
   arriba. (El nuestro no es hijo directo, no le afecta.) */
.single-product div.product .entry-summary > p.stock {
	display: none;
}

/* --- Detalles del producto (descripción corta) ------------------ */
/* Valores en rosa; las etiquetas en <strong> quedan en blanco.     */

.single-product div.product .entry-summary .woocommerce-product-details__short-description {
	font-family: var( --bb-font-ui );
	/*font-size: var( --bb-text-base );*/
	line-height: var( --bb-leading-normal );
	color: var( --bb-text-muted );
	border: 0;
	margin: 0 0 var( --bb-space-5 );
}

.single-product div.product .entry-summary .woocommerce-product-details__short-description p {
	margin: 0 0 var( --bb-space-1 );
}

.single-product div.product .entry-summary .woocommerce-product-details__short-description strong {
	font-weight: 700;
	color: var( --bb-white );
}

/* Quitar bordes blancos del woocommerce.min*/
.woocommerce div.product form.cart {
    border: 0 !important;
}
/*Font Weight del precio*/
.amount {
	font-weight: 300;
}
/* hacer que las fotos de galería se expandan*/
.woocommerce div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-4 .flex-control-thumbs li {
	width: 100% !important;
}

/* centrar el + y - */
.single-product div.product .entry-summary form.cart div.quantity .minus,
.single-product div.product .entry-summary form.cart div.quantity .plus {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px !important;
}
/*hacer mas grande la fuente del input de la cantidad*/
.single-product div.product .entry-summary form.cart div.quantity input.qty {
	font-size: 14px !important;
	font-weight: 100 !important;
}


/* --- Cantidad: [ − | 1 | + ] ------------------------------------ */
/* OceanWP ya trae los botones .minus / .plus dentro de .quantity.  */

.single-product div.product .entry-summary form.cart div.quantity {
	display: inline-flex;
	align-items: stretch;
	float: none;
	border: var( --bb-border-width ) solid var( --bb-border );
	border-radius: var( --bb-radius );
	background: var( --bb-surface );
	margin: 0 0 var( --bb-space-4 );
}

.single-product div.product .entry-summary form.cart div.quantity input.qty {
	width: 72px;
	height: 56px;
	border: 0;
	border-left: var( --bb-border-width ) solid var( --bb-border );
	border-right: var( --bb-border-width ) solid var( --bb-border );
	border-radius: 0;
	background: var( --bb-black );
	font-family: var( --bb-font-ui );
	font-size: var( --bb-text-base );
	font-weight: 700;
	color: var( --bb-text );
	text-align: center;
	-moz-appearance: textfield;
}

.single-product div.product .entry-summary form.cart div.quantity input.qty::-webkit-outer-spin-button,
.single-product div.product .entry-summary form.cart div.quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.single-product div.product .entry-summary form.cart div.quantity .minus,
.single-product div.product .entry-summary form.cart div.quantity .plus {
	width: 56px;
	height: 56px;
	border: 0;
	border-radius: 0;
	background: transparent;
	font-family: var( --bb-font-ui );
	font-size: var( --bb-text-lg );
	color: var( --bb-text );
	cursor: pointer;
}

.single-product div.product .entry-summary form.cart div.quantity .minus:hover,
.single-product div.product .entry-summary form.cart div.quantity .plus:hover {
	background: rgba( 255, 0, 0, .15 );
	color: var( --bb-text );
}

/* --- Botones: Añadir al carrito / Comprar Ahora ------------------
   El selector lleva button.single_add_to_cart_button a propósito:
   necesita ganar al CSS inline del Customizer (ver cabecera).
   ---------------------------------------------------------------- */

.single-product div.product .entry-summary form.cart button.single_add_to_cart_button,
.single-product div.product .entry-summary form.cart button.bb-buy-now {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var( --bb-space-3 );
	width: 100%;
	min-height: 64px;
	padding: 0 var( --bb-space-4 );
	float: none;
	border: var( --bb-border-width ) solid var( --bb-border );
	border-radius: var( --bb-radius );
	background: rgba( 0, 0, 0, .18 );
	font-family: var( --bb-font-ui );
	/*font-size: var( --bb-text-lg );*/
	font-weight: 400;
	letter-spacing: var( --bb-tracking-ui );
	line-height: 1;
	text-transform: none;
	color: var( --bb-text );
	cursor: pointer;
	transition: background-color .18s ease;
}

.single-product div.product .entry-summary form.cart button.single_add_to_cart_button:hover,
.single-product div.product .entry-summary form.cart button.bb-buy-now:hover {
	background: rgba( 255, 0, 0, .18 );
	border-color: var( --bb-border );
	color: var( --bb-text );
}

.single-product div.product .entry-summary form.cart button.bb-buy-now {
	margin-top: var( --bb-space-3 );
}

.single-product div.product .entry-summary form.cart button.bb-buy-now svg {
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
}

/* --- «Comprar Ahora»: espera --------------------------------------
   Del click al checkout hay una recarga de por medio; mientras tanto
   el botón se hace cargo del aviso. La clase la pone
   assets/js/comprar-ahora.js.
   ------------------------------------------------------------------ */

.single-product div.product .entry-summary form.cart button.bb-buy-now.is-cargando {
	pointer-events: none; /* Corta el segundo envío sin usar disabled. */
	opacity: .7;
}

/* El icono deja su sitio a la rueda mientras se espera. */
.single-product div.product .entry-summary form.cart button.bb-buy-now.is-cargando svg {
	display: none;
}

.single-product div.product .entry-summary form.cart button.bb-buy-now.is-cargando::before {
	content: '';
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: bb-girar .7s linear infinite;
}

@keyframes bb-girar {
	to { transform: rotate( 360deg ); }
}

/* Icono de carrito en "Añadir al carrito". */
.single-product div.product .entry-summary form.cart button.single_add_to_cart_button::before {
	content: '';
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
	background: currentColor;
	-webkit-mask: url( "data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 18c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zM7.2 14.8h9.9c.75 0 1.4-.41 1.75-1.03L22.2 6H6.28l-.94-2H2v2h2l3.6 7.59-1.35 2.44c-.73 1.33.23 2.97 1.75 2.97H20v-2H7.42l1.1-2z'/%3E%3C/svg%3E" ) center / contain no-repeat;
	mask: url( "data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 18c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zM7.2 14.8h9.9c.75 0 1.4-.41 1.75-1.03L22.2 6H6.28l-.94-2H2v2h2l3.6 7.59-1.35 2.44c-.73 1.33.23 2.97 1.75 2.97H20v-2H7.42l1.1-2z'/%3E%3C/svg%3E" ) center / contain no-repeat;
}

/* --- Galería ----------------------------------------------------- */

/* Lupa de zoom: el diseño no la lleva. */
.single-product .woocommerce-product-gallery__trigger {
	display: none;
}

/* Con varias imágenes: miniaturas en columna a la izquierda. */
.single-product .woocommerce-product-gallery {
	display: flex;
	align-items: flex-start;
	gap: var( --bb-space-4 );
}

.single-product .woocommerce-product-gallery .flex-viewport {
	order: 2;
	flex: 1;
}

.single-product .woocommerce-product-gallery ol.flex-control-thumbs {
	order: 1;
	display: flex;
	flex-direction: column;
	gap: var( --bb-space-3 );
	width: 88px;
	flex: 0 0 88px;
	margin: 0;
}

.single-product .woocommerce-product-gallery ol.flex-control-thumbs li {
	width: 100%;
	float: none;
}

.single-product .woocommerce-product-gallery ol.flex-control-thumbs li img {
	border: var( --bb-border-width ) solid var( --bb-border );
	opacity: .75;
	transition: opacity .18s ease;
}

.single-product .woocommerce-product-gallery ol.flex-control-thumbs li img:hover,
.single-product .woocommerce-product-gallery ol.flex-control-thumbs li img.flex-active {
	opacity: 1;
}

/* --- Limpieza: cosas que el diseño no lleva ---------------------- */

/* Botón de PayPal en la ficha. Mejor desactivarlo también en:
   WooCommerce → Ajustes → Pagos → PayPal → Smart Buttons. */
.single-product .ppc-button-wrapper,
.single-product [id^="ppc-button"] {
	display: none;
}

/* Separadores que OceanWP añade entre bloques del summary. */
.single-product div.product .entry-summary hr {
	display: none;
}


/* ===============================================================
   CAJA SORPRESA — píldoras de apertura y revelado animado
   (interfaz de inc/apertura.php + assets/js/bb-apertura.js)
   =============================================================== */

/* --- Píldoras: Abrir en la entrega / Abrir ahora / ? ------------ */

.single-product div.product .entry-summary .bb-apertura {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var( --bb-space-2 );
	margin: 0 0 var( --bb-space-5 );
}

.bb-apertura__pill input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.bb-apertura__pill span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 0 var( --bb-space-4 );
	border: var( --bb-border-width ) solid var( --bb-border-soft );
	border-radius: var( --bb-radius-pill );
	background: transparent;
	font-family: var( --bb-font-ui );
	font-size: var( --bb-text-sm );
	letter-spacing: var( --bb-tracking-ui );
	text-transform: uppercase;
	color: var( --bb-text );
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.bb-apertura__pill span:hover {
	border-color: var( --bb-white );
}

/* Seleccionada: relleno claro, texto oscuro (como el Figma). */
.bb-apertura__pill input:checked + span {
	background: var( --bb-surface-solid );
	border-color: var( --bb-surface-solid );
	color: var( --bb-on-solid );
}

.bb-apertura__pill input:focus-visible + span {
	outline: 2px solid var( --bb-white );
	outline-offset: 2px;
}

/* Botón de ayuda "?" con tooltip. */
.bb-apertura__help {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: var( --bb-border-width ) solid var( --bb-border-soft );
	border-radius: 50%;
	font-family: var( --bb-font-ui );
	font-size: var( --bb-text-sm );
	color: var( --bb-text-dim );
	cursor: help;
}

.bb-apertura__help::after {
	content: attr( data-tip );
	position: absolute;
	bottom: calc( 100% + 10px );
	left: 50%;
	transform: translateX( -50% );
	width: 280px;
	padding: var( --bb-space-3 );
	border: var( --bb-border-width ) solid var( --bb-border );
	background: var( --bb-black );
	font-size: var( --bb-text-xs );
	letter-spacing: normal;
	text-transform: none;
	line-height: var( --bb-leading-normal );
	color: var( --bb-text-soft );
	opacity: 0;
	visibility: hidden;
	transition: opacity .18s ease;
	z-index: 30;
}

.bb-apertura__help:hover::after,
.bb-apertura__help:focus-visible::after {
	opacity: 1;
	visibility: visible;
}

/* --- Zona de revelado sobre la galería -------------------------- */

.bb-reveal-host {
	position: relative;
}

/* Con "Abrir ahora" activo la galería deja de comportarse como
   galería: fuera el zoom al pasar el mouse (la .zoomImg que añade
   WooCommerce) y toda la caja pasa a ser clicable. */
.bb-mode-ahora .zoomImg {
	display: none !important;
}

.bb-mode-ahora .woocommerce-product-gallery__image,
.bb-mode-ahora .woocommerce-product-gallery__image a,
.bb-mode-ahora .woocommerce-product-gallery__image img {
	cursor: pointer;
}

/* Con [hidden], oculto de verdad: sin esta regla, el display de
   abajo le ganaría al atributo (los estilos de autor pisan los del
   navegador). */
.bb-open-cta[hidden] {
	display: none;
}

/* CTA "Haz click para abrir" */
.bb-open-cta {
	position: absolute;
	left: 60%;
	top: 40%;
	height: 90px;
	width: 90px;
	border-radius: 100%;
	bottom: var( --bb-space-4 );
	transform: translateX( -50% );
	display: flex;
	align-items: center;
	gap: var( --bb-space-2 );
	padding: var( --bb-space-2 ) var( --bb-space-4 );
	border: 3px solid var( --bb-border );
	background: rgba( 0, 0, 0, .65 );
	font-family: var( --bb-font-ui );
	font-size: 12px;
	letter-spacing: var( --bb-tracking-ui );
	color: var( --bb-text );
	cursor: pointer;
	z-index: 20;
	animation: bb-cta-pulse 2s ease-in-out infinite;
	flex-direction: column;
    justify-content: center;
	transition: 0.2s;
}

/**/
@media screen and (min-width: 900px) {
	.woocommerce div.product{
		display: flex;
		justify-content: center;
		gap: 34px;
	}
}

.bb-open-cta:hover {
	background: rgba( 255, 0, 0, .25 );
	color: var( --bb-text );
}

.bb-open-cta svg {
	width: 20px;
	height: 20px;
}

.bb-open-cta.is-opening {
	animation: none;
	opacity: .5;
	pointer-events: none;
}

@keyframes bb-cta-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba( 255, 0, 0, .45 ); }
	50%      { box-shadow: 0 0 0 8px rgba( 255, 0, 0, 0 ); }
}

/* Sacudida de la caja (izquierda-derecha, amortiguada). */
.bb-shake {
	animation: bb-shake 1.2s ease-in-out;
	transform-origin: 50% 85%;
}

@keyframes bb-shake {
	0%       { transform: rotate( 0deg ); }
	12%      { transform: rotate( -6deg ); }
	24%      { transform: rotate( 6deg ); }
	38%      { transform: rotate( -5deg ); }
	52%      { transform: rotate( 4deg ); }
	66%      { transform: rotate( -3deg ); }
	80%      { transform: rotate( 2deg ); }
	100%     { transform: rotate( 0deg ); }
}

/* Fundido al cambiar la imagen por la caja abierta. */
.bb-reveal-host img {
	transition: opacity .24s ease;
}

.bb-reveal-host img.bb-img-swap {
	opacity: 0;
}

/* Tarjeta del resultado. */
.bb-reveal {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var( --bb-space-3 );
	padding: var( --bb-space-4 );
	background: rgba( 0, 0, 0, .55 );
	opacity: 0;
	transform: scale( .94 );
	transition: opacity .35s ease, transform .35s ease;
	z-index: 10;
}

.bb-reveal.is-in {
	opacity: 1;
	transform: scale( 1 );
}

.bb-reveal__img {
	max-height: 55%;
	max-width: 70%;
	object-fit: contain;
}

.bb-reveal__text {
	font-family: var( --bb-font-display );
	font-size: var( --bb-text-xl );
	letter-spacing: var( --bb-tracking-display );
	text-align: center;
	color: var( --bb-text );
	margin: 0;
}

.bb-reveal__text strong {
	font-weight: 400;
	color: var( --bb-text-muted );
}

/* Menos movimiento si el usuario lo pide. */
@media ( prefers-reduced-motion: reduce ) {
	.bb-shake { animation: none; }
	.bb-open-cta { animation: none; }
	.bb-reveal { transition: opacity .2s ease; transform: none; }

	/* Una rueda quieta no dice nada: mejor devolver el icono y dejar
	   que el aviso sea el atenuado del botón. */
	.single-product div.product .entry-summary form.cart button.bb-buy-now.is-cargando svg { display: block; }
	.single-product div.product .entry-summary form.cart button.bb-buy-now.is-cargando::before { display: none; }
}


/* ===============================================================
   LISTADO DE TIENDA
   Pendiente: se maqueta cuando tengamos la referencia del listado.
   Marcado disponible en woocommerce/owp-archive-product.php
   =============================================================== */

.woo-entry-inner .title h2 {
	font-family: var( --bb-font-display );
}

.woo-entry-inner .price-wrap .price {
	font-family: var( --bb-font-price );
	color: var( --bb-text );
}

.woo-entry-inner .btn-wrap .button {
	font-family: var( --bb-font-ui );
	letter-spacing: var( --bb-tracking-ui );
}


/* ===============================================================
   CARRITO Y CHECKOUT (bloques de WooCommerce)
   =============================================================== */

.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
	font-family: var( --bb-font-ui );
	color: var( --bb-text );
}

.wc-block-cart, .wc-block-components-sidebar-layout{
	width: 80% !important;
	margin-top: 4% !important;
}
.wc-block-components-product-name{
	color: #ffffff;
}
.wc-block-cart-item__image{
	width: 25%;
}

.wc-block-cart-item__wrap{
	gap: 18px !important;
}

.wc-block-components-express-payment__title{
	font-size: 20px !important;
}

#express-payment-method-ppcp-gateway-paypal{
	display: flex;
	justify-content: center;
}

input, select, textarea{
	background: #1F0000 !important;
    color: white !important;
    border: 1px #af0000 solid !important;
    border-radius: 0 !important;
}

.wc-block-components-checkbox__mark{
	fill: #FFF !important;
}

.wc-block-components-text-input label{
	opacity: 0.5;
}

@container (min-width: 700px) {
    .wc-block-checkout__billing-fields .wc-block-components-address-form, .wc-block-checkout__shipping-fields .wc-block-components-address-form {
        gap: 0px 12px !important;
    }
}

.wc-block-components-radio-control .wc-block-components-radio-control__input:checked:before {
    background: #8c0000 !important;
}

.wc-block-components-text-input{
	height: 68px !important;
}

.wc-block-components-order-summary .wc-block-components-order-summary-item__quantity span {
    color: #000000 !important;
}

.wp-block-button__link {
    background-color: #560000 !important;
    border: 1px #ff0000 solid !important;
    border-radius: 0;
}


a{
	color: #9a9a9a !important;
}

/*
.woocommerce {
	display: flex;
    flex-direction: column;
    align-items: center;
}
*/



/* ===============================================================
   MI CUENTA — acceso, registro y panel

   Todo este bloque va anclado a body.woocommerce-account, que es
   solo /mi-cuenta/. Ojo con rebajarlo a .woocommerce a secas: esa
   clase la llevan también tienda, ficha, carrito y pedido.
   =============================================================== */

/* El contenido se centra en el hueco entre cabecera y pie.

   El aire NO puede ir en #content-wrap: la página tiene activado
   «Content full screen» en los ajustes de OceanWP, y el tema padre
   responde con
     body.content-full-screen #content-wrap { padding: 0 !important }
   que no hay forma de ganar sin repetir el !important. Se pone en
   #main, que nadie toca.

   #main ya se queda con el alto sobrante (ver el pie pegajoso en
   style.css), así que solo hay que volverlo flex. El centrado va con
   márgenes automáticos y no con align-items:center porque los
   márgenes nunca desbordan por arriba cuando el contenido es más
   alto que el hueco — el caso del panel con la sesión iniciada.
   El padding queda entonces como separación mínima. */
body.woocommerce-account #main {
	display: flex;
	padding-top: var( --bb-space-6 );
	padding-bottom: var( --bb-space-7 );
}

body.woocommerce-account #main > #content-wrap {
	width: 100%;
	margin-top: auto;
	margin-bottom: auto;
}


/* --- Con la sesión iniciada: el panel a dos columnas -------------

   La estructura que monta OceanWP es
     div.woocommerce
       ├ .woocommerce-MyAccount-tabs      (menú lateral)
       └ .woocommerce-MyAccount-content   (lo que se está viendo)
   y las coloca con floats, 18% y 76%, a partir de 768px
   (oceanwp/assets/css/woo/woocommerce.css:3064).

   O sea que el padre de las dos columnas ya existe, es ese
   div.woocommerce: solo hay que ponerle tope y centrarlo. Va con
   .logged-in para no tocar la pantalla de acceso, donde ese mismo
   div envuelve el formulario y ya tiene su propio ancho.

   `flow-root` contiene los floats de dentro. Sin él el padre no mide
   nada de alto y el pie se le sube encima. */
body.woocommerce-account.logged-in .woocommerce {
	display: flow-root;
	box-sizing: border-box;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;

	/* La página va a ancho completo («Content full screen»), así que
	   sin esto el panel toca los bordes justo a 1200px de ventana. */
	padding-left: var( --bb-space-4 );
	padding-right: var( --bb-space-4 );
}

/* Mismo fondo oscuro que finalizar compra. */
body.woocommerce-account.logged-in {
	background: linear-gradient( 0deg, #020202, #000000 );
	background-attachment: fixed;
}


/* (El botón «Acceso al terminal» tiene sección propia al final: se
   usa aquí y en la pantalla de pedido recibido.) */




.woocommerce #customer_login>div {
    border: 1px solid #700000 !important;
}



body input[type=button], body input[type=reset], body input[type=submit], body button[type=submit], body .theme-button, body .button, body div.wpforms-container-full .wpforms-form input[type=submit], body div.wpforms-container-full .wpforms-form button[type=submit], body div.wpforms-container-full .wpforms-form .wpforms-page-button, body.woocommerce-cart .wp-element-button, body.woocommerce-checkout .wp-element-button, body .wp-block-button__link {
    background: #1F0000 !important;
    border: 1px #af0000 solid !important;
}


/* ===============================================================
   FINALIZAR COMPRA — columna estrecha y fondo negro

   Anclado a body.woocommerce-checkout, que es solo la página 11.
   Ojo: esa clase la lleva también «pedido recibido», porque para
   WooCommerce es la misma página — de ahí el fondo negro también
   allí, que es lo que queremos.
   =============================================================== */

/* El degradado rojo del body no va en este paso: aquí toca negro. */
body.woocommerce-checkout {
	background: linear-gradient( 0deg, #020202, #000000 );
	background-attachment: fixed;
}

/* El formulario ocupaba todo el ancho y el texto quedaba estirado.

   El !important no es capricho: la regla `.wc-block-cart,
   .wc-block-components-sidebar-layout { width: 80% !important }`
   de más arriba (la del carrito) alcanza también al checkout, y sin
   repetirlo no hay especificidad que la gane. */
body.woocommerce-checkout .wc-block-components-sidebar-layout {
	margin-left: auto !important;
	margin-right: auto !important;
}

/* El 40% solo cuando hay pantalla de sobra: en 1200px son 480px,
   suficiente para el formulario. Por debajo sigue mandando el 80%
   del carrito, que es lo usable en tableta y móvil. */
@media ( min-width: 1200px ) {

	body.woocommerce-checkout .wc-block-components-sidebar-layout {
		width: 40% !important;
	}
}

/* Aire arriba y abajo. Como en «mi cuenta», va en #main y no en
   #content-wrap: la página también tiene «Content full screen» y el
   tema padre le pone padding:0 !important. */
body.woocommerce-checkout #main {
	padding-top: var( --bb-space-6 );
	padding-bottom: var( --bb-space-7 );
}


/* --- Pedido recibido (la pantalla de «Gracias») ------------------

   Es el endpoint order-received de esta misma página. WooCommerce
   marca el body con la clase del endpoint —el bucle final de
   wc_body_class()—, así que hay dónde agarrarse sin tocar
   .woocommerce, que la llevan tienda, ficha, carrito y cuenta.

   Y para centrarlo no hace falta volver flex al padre:
   .woocommerce-order es un bloque, y un bloque con ancho y márgenes
   laterales automáticos se centra solo.
   ---------------------------------------------------------------- */

body.woocommerce-order-received .woocommerce-order {
	width: 80%;
	margin-left: auto;
	margin-right: auto;
}

@media ( min-width: 1200px ) {

	body.woocommerce-order-received .woocommerce-order {
		width: 40%;
	}
}


/* ===============================================================
   BOTÓN «ACCESO AL TERMINAL»

   Sale en dos sitios, los dos desde inc/cuentas.php:
   - el panel de la cuenta (hook woocommerce_account_dashboard),
   - pedido recibido (hook woocommerce_thankyou), y ahí solo a quien
     le falte cuenta o código.

   Por eso los selectores NO van anclados a una página. Llevan `body`
   delante solo para ganar por especificidad a los `body .button` de
   OceanWP y de esta misma hoja.
   =============================================================== */

.bb-terminal-atajo {
	margin-top: var( --bb-space-6 );
	text-align: center;
}

.bb-terminal-atajo__nota {
	margin-bottom: var( --bb-space-4 );
	color: var( --bb-text-muted );
	line-height: var( --bb-leading-normal );
}

/* El color va con !important por la regla `a { color: #9a9a9a
   !important }` de esta misma hoja, que si no se lo come. */
body .bb-terminal-atajo .bb-terminal-boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var( --bb-space-3 );
	min-width: 280px;
	min-height: 56px;
	padding: 30px; /* más padding */
	font-family: var( --bb-font-ui );
	font-size: 1em; /* más tamaño */
	letter-spacing: var( --bb-tracking-ui );
	text-transform: uppercase;
	color: var( --bb-text ) !important;
	transition: background-color .18s ease;
}

/* Guiño de consola, decorativo: al ir en ::before no lo lee el
   lector de pantalla, que es lo que queremos. */
body .bb-terminal-atajo .bb-terminal-boton::before {
	content: '>_';
	font-weight: 700;
	color: var( --bb-accent );
}

body .bb-terminal-atajo .bb-terminal-boton:hover {
	background: rgba( 255, 0, 0, .18 ) !important;
}