/*
 * Subastas — el diseño que aprobó el cliente, sobre el HTML del plugin.
 *
 * El modelo es docs/cliente/mockup-subasta/. Todo lo de aquí es ESTILO: la
 * estructura la pone el plugin de subastas y las cuatro piezas que no existían
 * las añade src/sheepbuster-core/includes/auctions-single.php. Ningún archivo
 * del tema ni del plugin se toca (regla 1 de CLAUDE.md).
 *
 * Se carga solo en las páginas de subastas (ver functions.php del tema hijo).
 *
 * Nombres de clase que vienen del plugin y conviene no confundir con los
 * nuestros: .auction-ajax-change (lo reescribe el plugin por AJAX cada pocos
 * segundos), .countdown_section / .countdown_amount (los pinta jquery.countdown
 * con guion bajo, no con guion), .auction_form (el formulario de pujar) y
 * .buy-now (el de "Cómpralo ya"). Los nuestros empiezan todos por .sb-.
 */

:root {
	--sb-navy: #171a3f;
	--sb-navy-2: #20254f;
	--sb-amarillo: #ffd900;
	--sb-rojo: #e32725;
	--sb-borde: #e6e8f0;
	--sb-gris: #6b7085;
}

/* ---------------------------------------------------------------- insignia */

.single-product div.product {
	position: relative;
}

.sb-insignia {
	position: absolute;
	top: 18px;
	left: 18px;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border-radius: 999px;
	background: var(--sb-rojo);
	color: #fff;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	box-shadow: 0 6px 18px rgba(227, 39, 37, .35);
}

.sb-insignia::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #fff;
	animation: sb-latido 1.4s ease-in-out infinite;
}

@keyframes sb-latido {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: .35; transform: scale(.72); }
}

/* Que la foto no tape la insignia y tenga el mismo aire que la maqueta. */
.product-type-auction .woocommerce-product-gallery img {
	border-radius: 16px;
}

/* ------------------------------------------------------- línea de cifras */

.sb-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin: 0 0 20px;
	font-size: 13.5px;
	color: var(--sb-gris);
}

.sb-meta b {
	color: var(--sb-navy);
	font-weight: 700;
}

.sb-meta .sb-punto {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #c5c9d8;
	display: inline-block;
}

/* ------------------------------------------------------------- el panel */

.sb-panel {
	background: linear-gradient(160deg, var(--sb-navy) 0%, var(--sb-navy-2) 100%);
	color: #fff;
	border-radius: 22px;
	padding: 28px 30px 30px;
	margin: 0 0 22px;
	box-shadow: 0 18px 40px rgba(23, 26, 63, .18);
}

.sb-panel p {
	color: #d7dbee;
}

/* Puja actual */
.sb-panel .price {
	margin: 0 0 6px;
	padding: 0;
	border: 0;
}

.sb-panel .price .current.auction,
.sb-panel .price .starting.auction,
.sb-panel .price .buy-now-label {
	display: block;
	margin-bottom: 2px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #9aa3cd;
}

/* Con !important porque el tema pinta .price con su propio color y tamaño y
   gana por especificidad; sin esto el precio sale pequeño y rojo. */
.sb-panel .price .amount,
.sb-panel .price ins,
.sb-panel .price bdi,
.sb-panel .price .auction-price .amount {
	font-family: "Komika Axis", var(--sb-titulo, inherit);
	font-size: 44px !important;
	line-height: 1.05;
	font-weight: 400;
	color: var(--sb-amarillo) !important;
	text-decoration: none;
}

/* Las estrellas vacías y el "0 vendidos" del tema caen dentro del panel (los
   dos salen en la prioridad 10, igual que el precio). En una subasta sin
   valoraciones no aportan nada y encima se leen mal sobre azul oscuro: la
   prueba social de esta página es la línea de "personas pujando". */
.sb-panel .woocommerce-product-rating,
.sb-panel .rate-sold {
	display: none !important;
}

.sb-panel .price .woocommerce-Price-currencySymbol {
	font-size: .62em;
	margin-right: 2px;
}

/* Estado del producto, fecha de fin */
.sb-panel .auction-condition,
.sb-panel .auction-end {
	margin: 0 0 10px;
	font-size: 12.5px;
	color: #9aa3cd;
}

.sb-panel .auction-condition .curent-bid {
	color: #fff;
	font-weight: 600;
}

/* Cuenta atrás */
.sb-panel .auction-time {
	margin: 18px 0 6px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #9aa3cd;
}

/* Flex y no grid, y `flex: 1 1 0` en cada recuadro: con grid los recuadros se
   quedaban del ancho del número (53px medidos) y la palabra "SEGUNDOS" se salía
   por los lados. Era lo que el cliente veía mal. Flex reparte el ancho entre
   los que haya, que son tres o cuatro según queden días o no. */
.sb-panel .countdown_row {
	display: flex;
	gap: 10px;
	margin-top: 10px;
}

.sb-panel .countdown_section {
	flex: 1 1 0;
	min-width: 0;
	display: block;
	padding: 14px 6px 12px;
	border-radius: 14px;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .1);
	text-align: center;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #9aa3cd;
	line-height: 1.5;
}

.sb-panel .countdown_amount {
	display: block;
	margin-bottom: 4px;
	font-family: "Komika Axis", var(--sb-titulo, inherit);
	font-size: 30px;
	line-height: 1.1;
	letter-spacing: 0;
	color: #fff;
	text-transform: none;
}

/* El último recuadro (segundos) en amarillo, como en la maqueta. */
.sb-panel .countdown_section:last-child .countdown_amount {
	color: var(--sb-amarillo);
}

.sb-panel .countdown_row br {
	display: none;
}

/* Formulario de pujar */
.sb-panel .auction_form {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 10px;
	margin: 20px 0 0;
}

/* OJO con esta caja: el tema reescribe el campo de la puja al cargar la página.
 * El HTML que manda el servidor son tres inputs sueltos (-, el importe, +) y el
 * JS del tema envuelve CADA UNO en su propio <span class="box"> con sus propios
 * botones - y +, así que acaban seis botones y tres cajas donde debería haber
 * una. Lo que se ve en pantalla es esto, no lo que manda el plugin:
 *
 *   .quantity > .box [btn -][input "-" del plugin][btn +]
 *             > .box [btn -][IMPORTE               ][btn +]   <- la única útil
 *             > .box [btn -][input "+" del plugin][btn +]
 *
 * Así que se dejan la del medio y los botones del tema, que sí mueven el
 * importe, y se esconden la primera, la última y los dos inputs del plugin. */
.sb-panel .auction_form .quantity {
	flex: 1 1 210px;
	display: flex;
	align-items: stretch;
	background: #fff;
	border-radius: 999px;
	overflow: hidden;
	min-height: 54px;
}

.sb-panel .auction_form .quantity > .box:first-child,
.sb-panel .auction_form .quantity > .box:last-child,
.sb-panel .auction_form .quantity input.minus-bid,
.sb-panel .auction_form .quantity input.plus-bid {
	display: none !important;
}

.sb-panel .auction_form .quantity > .box {
	display: flex;
	align-items: center;
	width: 100%;
}

.sb-panel .auction_form .quantity .box button.minus,
.sb-panel .auction_form .quantity .box button.plus {
	flex: 0 0 42px;
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--sb-navy);
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
}

.sb-panel .auction_form .quantity .box button.minus:hover,
.sb-panel .auction_form .quantity .box button.plus:hover {
	color: var(--sb-rojo);
	background: transparent;
}

/* El campo trae size="5" del plugin y el tema le pone un ancho fijo, así que
   "S/ 180,00" salía cortado y el botón "+" se quedaba fuera de la caja. */
.sb-panel .auction_form .quantity input.bid {
	flex: 1 1 auto;
	border: 0;
	text-align: center;
	font-size: 17px;
	font-weight: 700;
	color: var(--sb-navy);
	background: transparent;
	width: 100% !important;
	min-width: 0;
	max-width: none !important;
	padding: 0 2px;
	height: auto;
	box-sizing: border-box;
}

/* Si el JS del tema no llega a ejecutarse, quedan los inputs del plugin: que al
   menos se vean decentes. */
.sb-panel .auction_form .quantity > input.minus,
.sb-panel .auction_form .quantity > input.plus {
	flex: 0 0 42px;
	width: 42px;
	border: 0;
	background: transparent;
	color: var(--sb-navy);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

/* !important en el botón: el tema define .button.alt con su morado y su
   gradiente, y gana. Es el botón más importante de la página. */
.sb-panel .auction_form .bid_button,
.sb-panel .auction_form button.bid_button.button.alt {
	flex: 1 1 200px;
	min-height: 54px;
	padding: 0 28px;
	border: 0;
	border-radius: 999px;
	background: var(--sb-amarillo) !important;
	color: var(--sb-navy) !important;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .02em;
	box-shadow: 0 10px 26px rgba(255, 217, 0, .25);
	transition: transform .12s ease, box-shadow .12s ease;
}

.sb-panel .auction_form .bid_button:hover {
	background: #ffe23d;
	color: var(--sb-navy);
	transform: translateY(-1px);
	box-shadow: 0 14px 30px rgba(255, 217, 0, .35);
}

/* Nota del anti francotirador */
.sb-antisniping {
	margin: 12px 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: #9aa3cd;
	text-align: center;
}

/* Seguir esta subasta */
.sb-panel .wsawl-link {
	margin: 14px 0 0;
	font-size: 13.5px;
}

.sb-panel .wsawl-link a {
	color: #cfd5f1;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sb-panel .wsawl-link a:hover {
	color: var(--sb-amarillo);
}

/* "Cómpralo ya", en su propia tarjeta dentro del panel */
.sb-panel form.buy-now {
	margin: 22px 0 0;
	padding: 18px 20px;
	border-radius: 16px;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .1);
}

.sb-panel form.buy-now #shop-now {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.sb-panel form.buy-now .single_add_to_cart_button {
	border: 0;
	border-radius: 999px;
	padding: 14px 26px;
	background: #fff;
	color: var(--sb-navy);
	font-weight: 700;
	font-size: 14.5px;
}

.sb-panel form.buy-now .single_add_to_cart_button:hover {
	background: var(--sb-amarillo);
	color: var(--sb-navy);
}

.sb-panel form.buy-now .single_add_to_cart_button .amount {
	color: inherit;
	font-weight: 800;
}

/* El tema añade su propio "Comprar ahora" al lado, que hace casi lo mismo y
   deja dos botones peleándose. En una subasta sobra. */
.product-type-auction .tbay-buy-now,
.product-type-auction form.buy-now .quantity,
.product-type-auction form.buy-now label.screen-reader-text {
	display: none !important;
}

/* La "guía de tallas" del tema (pulgadas, XS a 2XL) no pinta nada en una
   subasta de una lámpara o una silla. */
.product-type-auction .tbay-size-guide {
	display: none !important;
}

/* El bloque "Compra segura garantizada" del diseño comprado promete, en inglés,
   pagos con tarjeta, envíos a todo el mundo y devolución en 30 días. La tienda
   no hace ninguna de las tres. Aquí se oculta SOLO en las subastas, que es
   página nueva y nadie la ha visto todavía; en el resto de la tienda sigue tal
   cual hasta que el cliente decida (pregunta 4 de docs/cliente/preguntas.md). */
.product-type-auction .custom-safe-checkout {
	display: none !important;
}

/* Los enlaces de "Envíos y devoluciones" y "Haz una pregunta" caen dentro del
   panel oscuro y en su color original no se leen. */
.sb-panel .tbay-button-popup-wrap a,
.sb-panel .tbay-button-popup-wrap span,
.sb-panel .tbay-button-popup-wrap i {
	color: #cfd5f1;
}

.sb-panel .tbay-button-popup-wrap a:hover,
.sb-panel .tbay-button-popup-wrap a:hover span {
	color: var(--sb-amarillo);
}

/* La barra inferior del tema para móvil ("Agregar al carrito" / "Comprar
   ahora") la sustituye la nuestra, que lleva a pujar. */
.product-type-auction .mobile-btn-cart-click,
.product-type-auction #mobile-close-infor-wrapper {
	display: none !important;
}

/* ------------------------------------------------------- cómo funciona */

.sb-como-funciona {
	margin: 46px 0 10px;
}

.sb-titulo-seccion {
	margin: 0 0 4px;
	font-size: 26px;
}

.sb-subtitulo {
	margin: 0 0 22px;
	color: var(--sb-gris);
	font-size: 14px;
}

.sb-pasos {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: sb-paso;
}

.sb-pasos li {
	position: relative;
	margin: 0;
	padding: 22px 20px 20px 20px;
	background: #f7f8fc;
	border: 1px solid var(--sb-borde);
	border-radius: 16px;
	list-style: none;
}

.sb-pasos li::before {
	counter-increment: sb-paso;
	content: counter(sb-paso);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin-bottom: 12px;
	border-radius: 11px;
	background: var(--sb-navy);
	color: var(--sb-amarillo);
	font-family: "Komika Axis", var(--sb-titulo, inherit);
	font-size: 16px;
}

.sb-pasos li h3 {
	margin: 0 0 6px;
	font-size: 15px;
	line-height: 1.3;
	color: var(--sb-navy);
}

.sb-pasos li p {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--sb-gris);
}

/* ------------------------------------ la cuenta atrás en las tarjetas */

/*
 * "Que también se vea por fuera", en palabras del cliente: desde la página de
 * subastas se veía la puja actual pero no cuánto faltaba, así que nada tiraba
 * de nadie hacia la subasta que está por cerrar. El marcador lo pinta el propio
 * script del plugin (ver includes/auctions-loop.php); aquí solo se viste.
 */

.sb-tarjeta-tiempo {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 8px 0 2px;
	line-height: 1.2;
}

.sb-tarjeta-tiempo-texto {
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sb-gris);
}

/* Los mismos recuadros que la ficha, en pequeño. El cliente mandó de
   referencia una plantilla de subastas donde la grilla lleva el contador en
   cajitas, no en una línea de texto: "la grilla de subastas tiene que tener el
   contador de tiempo". */
.sb-tarjeta-tiempo .countdown_row {
	display: flex;
	gap: 5px;
	margin-top: 3px;
}

.sb-tarjeta-tiempo .countdown_section {
	flex: 1 1 0;
	min-width: 0;
	display: block;
	padding: 6px 2px 5px;
	border-radius: 9px;
	background: #f2f3f8;
	border: 1px solid var(--sb-borde);
	text-align: center;
	/* 7.5px sin apenas espaciado porque la palabra más larga, "SEGUNDOS", tiene
	   que caber en un recuadro de ~48px cuando son cuatro; con 8.5px se salía. */
	font-size: 7.5px;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--sb-gris);
	line-height: 1.5;
	overflow: hidden;
}

.sb-tarjeta-tiempo .countdown_amount {
	display: block;
	font-family: "Komika Axis", var(--sb-titulo, inherit);
	font-size: 15px;
	line-height: 1.1;
	letter-spacing: 0;
	color: var(--sb-navy);
	text-transform: none;
}

.sb-tarjeta-tiempo .countdown_row br {
	display: none;
}

/* Cuando queda menos de un día: rojo, y el punto que late junto al rótulo,
   igual que la insignia de la ficha. */
.sb-tarjeta-tiempo.sb-termina-pronto .sb-tarjeta-tiempo-texto {
	color: var(--sb-rojo);
}

.sb-tarjeta-tiempo.sb-termina-pronto .countdown_section {
	background: #fdeceb;
	border-color: #f6c9c8;
	color: #a8302e;
}

.sb-tarjeta-tiempo.sb-termina-pronto .countdown_amount {
	color: var(--sb-rojo);
}

.sb-tarjeta-tiempo.sb-termina-pronto .sb-tarjeta-tiempo-texto::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 6px;
	border-radius: 50%;
	background: var(--sb-rojo);
	animation: sb-latido 1.4s ease-in-out infinite;
}

/* --------------------------------------------- historial de pujas (tabla) */

.product-type-auction .auction-history-table,
.product-type-auction #tab-simle_auction_history table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--sb-borde);
	border-radius: 16px;
	overflow: hidden;
}

.product-type-auction #tab-simle_auction_history th {
	background: #f7f8fc;
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sb-gris);
	font-weight: 600;
	padding: 12px 16px;
	border: 0;
}

.product-type-auction #tab-simle_auction_history td {
	padding: 14px 16px;
	border: 0;
	border-top: 1px solid var(--sb-borde);
	font-size: 14px;
	vertical-align: middle;
}

/* La fila de arriba es la que va ganando. */
.product-type-auction #tab-simle_auction_history tbody tr:first-child {
	background: #fffbe6;
}

.product-type-auction #tab-simle_auction_history tbody tr:first-child td {
	font-weight: 600;
	color: var(--sb-navy);
}

.product-type-auction #tab-simle_auction_history td.proxy {
	color: var(--sb-gris);
}

.product-type-auction #tab-simle_auction_history td.proxy:not(:empty) {
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
}

/* ------------------------------------- la barra de pujar del celular */

/*
 * El tema, en pantallas pequeñas, se lleva el formulario de pujar a una barra
 * fija al pie: le cambia `position` con JavaScript sin tocar ninguna clase, y
 * mientras está ahí el formulario no está en el panel. Medido: a 390px y con la
 * página arriba del todo sale `position:fixed`, y al bajar hasta el panel vuelve
 * a `static` — pero entonces no se ve en ningún sitio.
 *
 * Como no hay clase a la que agarrarse para estilar cada estado, se le quita el
 * truco (position:static, y por eso el id, que pesa más que las seis clases con
 * las que el tema lo fija) y la barra la ponemos nosotros: un enlace al panel,
 * con el precio y el mínimo, como en el diseño aprobado.
 */

.sb-barra-movil {
	display: none;
}

@media (max-width: 767px) {
	/* `transform: none` es el que de verdad arregla esto, y costó encontrarlo:
	 * el tema no mueve el formulario con position ni con márgenes, lo traslada
	 * con `transform: matrix(1,0,0,1,0,138)`. Un transform no ocupa sitio en el
	 * flujo, así que el formulario quedaba dibujado 138px más abajo, encima del
	 * aviso y del enlace de seguir la subasta, y dejaba un hueco donde debería
	 * estar. */
	#sb-pujar form.auction_form {
		position: static !important;
		transform: none !important;
		display: flex !important;
		visibility: visible !important;
		opacity: 1 !important;
		background: transparent;
		padding: 0 !important;
	}

	/* El contenedor que el plugin refresca por AJAX viene con una altura fija
	   del tema, así que el formulario, al volver a su sitio, se salía y se
	   dibujaba encima del aviso y del enlace de seguir la subasta. */
	#sb-pujar .auction-ajax-change {
		height: auto !important;
		min-height: 0 !important;
		overflow: visible !important;
	}

	/* El panel pasa a ser una columna flex con el orden escrito a mano. En el
	 * celular el tema coloca los formularios del carrito por su cuenta y el
	 * "Cómpralo ya" acababa pintado encima de la cuenta atrás, antes incluso que
	 * el formulario de pujar. Con flex + order, y quitándoles cualquier
	 * posicionamiento heredado, cada bloque cae donde tiene que caer. */
	#sb-pujar {
		display: flex;
		flex-direction: column;
	}

	#sb-pujar > .price {
		order: 1;
	}

	#sb-pujar > .auction-ajax-change {
		order: 2;
	}

	#sb-pujar > form.buy-now {
		order: 3;
		display: block !important;
		visibility: visible !important;
		position: static !important;
		float: none !important;
		transform: none !important;
		inset: auto !important;
	}

	#sb-pujar > .tbay-button-popup-wrap,
	#sb-pujar > .sb-antisniping {
		order: 4;
	}

	.sb-barra-movil {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9990;
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
		background: #fff;
		border-top: 1px solid var(--sb-borde);
		box-shadow: 0 -8px 24px rgba(23, 26, 63, .12);
	}

	/* !important y el comodín: el tema le pone sus propias reglas a
	   .woocommerce-Price-amount (el <span> que mete wc_price) y, sin esto, el
	   importe se parte en dos líneas — "S/" arriba y "170,00" abajo. */
	.sb-barra-precio {
		flex: 0 0 auto;
		min-width: 96px;
	}

	.sb-barra-precio .amount,
	.sb-barra-precio .woocommerce-Price-currencySymbol {
		display: inline;
		font-size: inherit;
		color: inherit;
		white-space: nowrap;
	}

	/* El selector va con ">" a propósito: `.sb-barra-precio span` alcanzaba
	   también a los <span> que mete wc_price por dentro del importe
	   (.woocommerce-Price-amount y .woocommerce-Price-currencySymbol), los
	   convertía en bloques y partía "S/ 170,00" en dos líneas. */
	.sb-barra-precio > span {
		display: block;
		font-size: 10.5px;
		font-weight: 600;
		letter-spacing: .1em;
		text-transform: uppercase;
		color: var(--sb-gris);
	}

	.sb-barra-precio b {
		font-family: "Komika Axis", var(--sb-titulo, inherit);
		font-size: 20px;
		color: var(--sb-navy);
		font-weight: 400;
		white-space: nowrap;
	}

	.sb-barra-precio b .amount,
	.sb-barra-precio b bdi {
		color: inherit;
		white-space: nowrap;
	}

	.sb-barra-boton {
		flex: 1;
		display: flex;
		align-items: baseline;
		justify-content: center;
		gap: 8px;
		padding: 15px 16px;
		border-radius: 999px;
		background: var(--sb-amarillo);
		color: var(--sb-navy);
		font-weight: 700;
		font-size: 16px;
		text-decoration: none;
	}

	.sb-barra-boton:hover,
	.sb-barra-boton:focus {
		background: #ffe23d;
		color: var(--sb-navy);
	}

	.sb-barra-boton > span {
		font-size: 12px;
		font-weight: 600;
		color: var(--sb-navy);
		opacity: .65;
		white-space: nowrap;
	}

	.sb-barra-boton .amount,
	.sb-barra-boton .woocommerce-Price-currencySymbol {
		display: inline;
		font-size: inherit;
		color: inherit;
		text-decoration: none;
		white-space: nowrap;
	}

	/* Que la barra no tape el final de la página. */
	body.single-product .tbay-footer,
	body.single-product .footer-wrapper,
	body.single-product footer {
		padding-bottom: 92px;
	}
}

/* ----------------------------------------------------------- pantallas */

@media (max-width: 1200px) {
	.sb-pasos {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	/* En móvil el tema trata el formulario del carrito como suyo: lo saca del
	 * ancho del contenedor y le da al botón una altura de 200px, con lo que el
	 * "Pujar" salía como un óvalo amarillo gigante fuera del panel y el campo
	 * del importe desaparecía. Medido a 390px antes de escribir esto:
	 *
	 *   .sb-panel      360x519     .auction_form  390x460 (más ancho que el panel)
	 *   .quantity      360x210 display:block      .bid_button 390x200
	 *
	 * De ahí los !important: son los que hacen falta para devolverle la forma,
	 * y solo en esta pantalla y dentro de .sb-panel. */
	/* Aquí se usa el ID #sb-pujar (el propio panel) y no clases, por una razón
	 * medida, no por gusto. En pantallas de menos de 479px el tema trae esto:
	 *
	 *   .tbay-show-quantity-mobile .singular-shop div.product
	 *     .cart:not(.grouped_form) .quantity:not(...) { display:block !important }
	 *   .singular-shop div.product .cart:not(.grouped_form) .quantity
	 *     { display:none !important }
	 *
	 * Seis clases con !important: ninguna combinación razonable de clases
	 * nuestras le gana, y el resultado era un campo de puja de 390px de ancho y
	 * 210 de alto dentro de un panel de 360, o directamente escondido. Un id
	 * pesa más que cualquier cantidad de clases, así que el panel lleva uno. */
	#sb-pujar form.auction_form {
		display: flex !important;
		flex-wrap: wrap;
		gap: 10px;
		width: 100% !important;
		max-width: 100% !important;
		margin: 18px 0 0 !important;
		padding: 0 !important;
	}

	/* max-height además de height: algo del tema estira esta caja hasta 210px
	   (medido) y conviene que, gane quien gane, no pase de 54. */
	#sb-pujar .auction_form div.quantity {
		display: flex !important;
		float: none !important;
		width: 100% !important;
		max-width: 100% !important;
		height: 54px !important;
		min-height: 54px !important;
		max-height: 54px !important;
		overflow: hidden;
		margin: 0 !important;
		padding: 0 !important;
	}

	#sb-pujar .auction_form div.quantity > .box,
	#sb-pujar .auction_form div.quantity .box button.minus,
	#sb-pujar .auction_form div.quantity .box button.plus {
		height: 54px !important;
		max-height: 54px !important;
		width: auto;
	}

	#sb-pujar .auction_form div.quantity > .box {
		width: 100% !important;
	}

	#sb-pujar .auction_form button.bid_button {
		width: 100% !important;
		height: 54px !important;
		min-height: 54px !important;
		max-height: 54px !important;
		padding: 0 20px !important;
		line-height: 1 !important;
		margin: 0 !important;
		float: none !important;
	}

	#sb-pujar form.buy-now {
		width: 100% !important;
		max-width: 100% !important;
		margin: 20px 0 0 !important;
		padding: 16px !important;
	}

	#sb-pujar form.buy-now .single_add_to_cart_button {
		width: 100% !important;
		height: auto !important;
		min-height: 52px;
		white-space: normal;
	}

	.sb-panel {
		padding: 22px 20px 24px;
		border-radius: 18px;
	}

	.sb-panel .price .amount,
	.sb-panel .price bdi {
		font-size: 36px;
	}

	.sb-panel .countdown_amount {
		font-size: 22px;
	}

	.sb-panel .auction_form .bid_button {
		flex: 1 1 100%;
	}

	.sb-pasos {
		grid-template-columns: 1fr;
	}

	.sb-insignia {
		top: 10px;
		left: 10px;
		font-size: 11.5px;
		padding: 7px 13px;
	}
}

/* ===========================================================================
   El contador, centrado y entero dentro de la tarjeta (26/10/2026)
   ===========================================================================

   El cliente avisó de que los recuadros de días/horas/minutos/segundos no se
   veían bien. Medido en dev a 1440, 768 y 390 px, en la grilla de subastas,
   en el bloque "termina pronto" y en la ficha, eran DOS fallos distintos:

   1. LA FILA NO ESTABA CENTRADA EN LA TARJETA. No es culpa del contador: el
      `.caption` del tema lleva `padding: 0 0 0 20px` -- 20 px a la izquierda
      y NADA a la derecha -- así que todo el contenido de la tarjeta queda
      pegado al borde derecho. En el título y en el precio no se nota; en una
      fila de recuadros con borde, el último queda tocando el filo de la
      tarjeta y canta mucho. Medido: holgura izquierda 20 px, derecha 0.

      Se compensa dándole a NUESTRO bloque la derecha que al `.caption` le
      falta. Solo de 768 px para arriba: por debajo el tema ya usa 5 px a cada
      lado y ahí la fila sale centrada sola (medido: 5 y 5).

   2. LAS ETIQUETAS NO CABÍAN EN SU RECUADRO. "SEGUNDOS" es la palabra más
      larga y se salía por los dos lados del recuadro redondeado. Medido, lo
      que sobraba del texto respecto al hueco interior:

        | dónde            | ancho | DÍAS | HORAS | MINUTOS | SEGUNDOS |
        |------------------|-------|------|-------|---------|----------|
        | tarjeta          | 1440  |  ok  |  ok   |   ok    |  +1.5 px |
        | tarjeta          |  390  |  ok  |  ok   |  +7 px  | +13.5 px |
        | ficha (.sb-panel)|  390  |  ok  |  ok   |   ok    |  +6 px   |

      En la ficha y en la tarjeta ancha basta con quitar el espaciado entre
      letras. En la tarjeta estrecha no: para que "SEGUNDOS" cupiera en 33 px
      haría falta bajar la letra a 5,5 px, que ya no se lee. Ahí se abrevia.

   POR QUÉ LA ABREVIATURA SE HACE CON CSS Y NO CAMBIANDO EL TEXTO. Las
   palabras las escribe jquery.countdown desde `countdown_language_data`, que
   monta el plugin de subastas: cambiarlas sería tocar un plugin de terceros
   (regla 1), y además son las mismas para todos los anchos, así que tampoco
   serviría para abreviar solo en el celular. El plugin sí marca la fila con
   `countdown_show3` o `countdown_show4` según queden días o no, y eso es lo
   que hace que se pueda saber qué recuadro es cuál sin contar a ciegas.

   De regalo arregla el singular: el plugin escribe "1 MINUTO" y "2 MINUTOS",
   y "MIN" vale para los dos. */

/* 1. La derecha que le falta al .caption del tema. */
.caption > .sb-tarjeta-tiempo {
	padding-right: 20px;
}

/* 2. Las etiquetas, abreviadas SIEMPRE en las tarjetas.
   No es cosa del ancho de la pantalla sino del ancho de la TARJETA, y eso se
   vio al medir: a 1440 px la grilla de tres columnas deja tarjetas de 226 px,
   igual de estrechas que las del celular, y ahi "SEGUNDOS" tampoco cabe. Un
   @media por ancho de ventana habria arreglado el celular y dejado el fallo
   en el escritorio, que es justo donde lo vio el cliente.

   Asi que en las tarjetas se abrevia en todos los anchos: ademas de caber,
   las cuatro se ven iguales en cualquier pantalla. En la ficha
   (.sb-panel) no hace falta: ahi el recuadro es grande y la palabra entera
   entra. */
.sb-tarjeta-tiempo .countdown_section {
	font-size: 0;           /* esconde la palabra larga del plugin */
	letter-spacing: 0;
}

.sb-tarjeta-tiempo .countdown_amount {
	font-size: 15px;        /* el numero, que si no heredaria el 0 */
}

.sb-tarjeta-tiempo .countdown_section::after {
	display: block;
	font-size: 7.5px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0;
}

/* Con dias: dias, horas, minutos, segundos. */
.sb-tarjeta-tiempo .countdown_show4 .countdown_section:nth-child(1)::after { content: "DÍAS"; }
.sb-tarjeta-tiempo .countdown_show4 .countdown_section:nth-child(2)::after { content: "HORAS"; }
.sb-tarjeta-tiempo .countdown_show4 .countdown_section:nth-child(3)::after { content: "MIN"; }
.sb-tarjeta-tiempo .countdown_show4 .countdown_section:nth-child(4)::after { content: "SEG"; }

/* Sin dias, el primero pasa a ser horas. */
.sb-tarjeta-tiempo .countdown_show3 .countdown_section:nth-child(1)::after { content: "HORAS"; }
.sb-tarjeta-tiempo .countdown_show3 .countdown_section:nth-child(2)::after { content: "MIN"; }
.sb-tarjeta-tiempo .countdown_show3 .countdown_section:nth-child(3)::after { content: "SEG"; }

@media (max-width: 767px) {
	/* Por debajo de 768 el .caption ya es simetrico (5 px y 5 px): si se le
	   dejara la compensacion de arriba, la fila se iria hacia la izquierda. */
	.caption > .sb-tarjeta-tiempo {
		padding-right: 0;
	}

	/* La ficha: sin espaciado y un punto mas pequena, y "SEGUNDOS" entra en
	   los 60 px de hueco que tiene (medido: 66 px -> 56 px). */
	.sb-panel .countdown_section {
		font-size: 10px;
		letter-spacing: 0;
	}
}