/* ==========================================================================
   GEE Accesorios al Carrito — v1.0.2
   Estilo inspirado en el bloque "También puede necesitar" de Bluetti.

   CLAVE DE ESTA VERSIÓN: el bloque se adapta al ancho REAL de la columna
   donde esté metido (container queries), no al ancho de la pantalla. Antes,
   en un lateral estrecho dentro de una pantalla ancha, no se activaba el
   modo compacto y el botón del carrito se salía del bloque.
   ========================================================================== */

.gee-acc {
	--gee-acc-boton: #003A55;
	--gee-acc-boton-hover: #00293c;
	--gee-acc-fondo: #f4f5f6;
	--gee-acc-tarjeta: #ffffff;
	--gee-acc-borde: #e3e5e8;
	--gee-acc-texto: #1a1a1a;
	--gee-acc-suave: #6b7177;
	--gee-acc-radio: 10px;

	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin: 16px 0;
	padding: 14px 12px;
	background: var(--gee-acc-fondo);
	border-radius: var(--gee-acc-radio);
	font-family: inherit;
	color: var(--gee-acc-texto);

	/* Evita solaparse con elementos sticky del lateral. */
	position: relative;
	z-index: 1;
	clear: both;
	overflow: hidden;

	/* Esto es lo que permite medir la columna y no la pantalla. */
	container-type: inline-size;
	container-name: geeacc;
}

.gee-acc *,
.gee-acc *::before,
.gee-acc *::after {
	box-sizing: border-box;
}

/* ==========================================================================
   Blindaje frente al CSS del tema

   Muchos temas fuerzan el ancho de los campos de formulario
   (input[type=number]{width:100%}, min-width en botones, etc.). Eso era lo
   que inflaba la caja de unidades y empujaba el botón fuera del bloque.
   Aquí se fijan los tamaños pase lo que pase.
   ========================================================================== */

.gee-acc img,
.gee-acc svg {
	max-width: 100%;
	height: auto;
}

.gee-acc__cuerpo,
.gee-acc__fila,
.gee-acc__precios {
	min-width: 0;
}

.gee-acc__nombre,
.gee-acc__nombre a {
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* ---------- Aviso de modo prueba ---------- */
.gee-acc--prueba {
	outline: 2px dashed #d97706;
	outline-offset: 2px;
}

.gee-acc__aviso-prueba {
	margin: 0 0 10px;
	padding: 8px 10px;
	background: #fff7ed;
	border: 1px solid #fed7aa;
	border-radius: 6px;
	font-size: 12px;
	line-height: 1.4;
	color: #9a3412;
}

/* ---------- Cabecera ---------- */
.gee-acc__titulo {
	margin: 0 0 10px;
	padding: 0;
	font-size: 16px;
	line-height: 1.3;
	font-weight: 600;
	color: var(--gee-acc-texto);
	letter-spacing: -0.01em;
}

/* ---------- Lista con scroll interno ---------- */
.gee-acc__lista {
	display: flex;
	flex-direction: column;
	gap: 8px;
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding-right: 3px;
}

.gee-acc__lista::-webkit-scrollbar {
	width: 5px;
}

.gee-acc__lista::-webkit-scrollbar-thumb {
	background: #c9ced3;
	border-radius: 3px;
}

.gee-acc__lista::-webkit-scrollbar-track {
	background: transparent;
}

/* ---------- Tarjeta ---------- */
.gee-acc__item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px;
	background: var(--gee-acc-tarjeta);
	border: 1px solid var(--gee-acc-borde);
	border-radius: var(--gee-acc-radio);
	transition: border-color .15s ease, box-shadow .15s ease;
}

.gee-acc__item:hover {
	border-color: #cdd2d7;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
}

.gee-acc__item--agotado {
	opacity: .55;
}

/* ---------- Imagen ---------- */
.gee-acc__figura {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	overflow: hidden;
	background: #fff;
	text-decoration: none;
}

.gee-acc__figura img,
.gee-acc__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	margin: 0;
	border-radius: 6px;
}

.gee-acc__img--vacia {
	background: #eef0f2;
}

/* ---------- Cuerpo ---------- */
.gee-acc__cuerpo {
	flex: 1 1 auto;
}

/* El clic solo funciona sobre el texto del título, no en toda la fila. */
.gee-acc__nombre {
	margin: 0 0 6px;
	padding: 0;
	font-size: 13.5px;
	line-height: 1.35;
	font-weight: 600;
	letter-spacing: -0.005em;
}

.gee-acc__nombre a {
	display: inline;
	color: var(--gee-acc-texto);
	text-decoration: none;
	box-shadow: none;
}

.gee-acc__nombre a:hover,
.gee-acc__nombre a:focus-visible {
	text-decoration: underline;
	color: var(--gee-acc-boton);
}

/* ---------- Fila precio + acciones ---------- */
.gee-acc__fila {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	flex-wrap: wrap;
}

.gee-acc__precios {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 5px;
	flex: 1 1 auto;
}

.gee-acc__precio {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--gee-acc-texto);
	white-space: nowrap;
}

.gee-acc__precio .woocommerce-Price-amount {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

.gee-acc__precio-antiguo {
	font-size: 12px;
	line-height: 1.2;
	color: var(--gee-acc-suave);
	text-decoration: line-through;
	white-space: nowrap;
	order: 2;
}

.gee-acc__iva {
	display: block;
	width: 100%;
	font-size: 10px;
	line-height: 1.3;
	color: var(--gee-acc-suave);
	order: 3;
}

/* ---------- Acciones ---------- */
.gee-acc__acciones {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	min-width: 0;
	/* Si el precio ocupa toda la línea y los controles bajan a la siguiente,
	   esto los mantiene pegados al borde derecho de la tarjeta. */
	margin-left: auto;
}

/* ---------- Selector de cantidad (compacto) ----------
   Ancho total ≈ 80 px: apenas el doble que el botón del carrito. */
.gee-acc__cantidad {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	height: 32px;
	border: 1px solid var(--gee-acc-borde);
	border-radius: 6px;
	background: #fff;
	overflow: hidden;
}

.gee-acc .gee-acc__paso {
	flex: 0 0 24px !important;
	width: 24px !important;
	min-width: 24px !important;
	max-width: 24px !important;
	height: 30px !important;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0 !important;
	background: transparent !important;
	color: var(--gee-acc-texto);
	font-size: 15px !important;
	font-weight: 500;
	line-height: 1 !important;
	cursor: pointer;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	transition: background .12s ease;
}

.gee-acc .gee-acc__paso:hover {
	background: #f1f3f4 !important;
}

.gee-acc .gee-acc__paso:disabled {
	color: #c2c7cc;
	cursor: not-allowed;
	background: transparent !important;
}

.gee-acc .gee-acc__input {
	flex: 0 0 30px !important;
	width: 30px !important;
	min-width: 30px !important;
	max-width: 30px !important;
	height: 30px !important;
	border: 0 !important;
	border-left: 1px solid var(--gee-acc-borde) !important;
	border-right: 1px solid var(--gee-acc-borde) !important;
	text-align: center !important;
	font-size: 13px !important;
	line-height: 1 !important;
	background: #fff !important;
	color: var(--gee-acc-texto);
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	-moz-appearance: textfield;
	appearance: textfield;
}

.gee-acc .gee-acc__input:focus {
	outline: none !important;
	box-shadow: none !important;
}

.gee-acc .gee-acc__input::-webkit-outer-spin-button,
.gee-acc .gee-acc__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* ---------- Botón añadir ---------- */
.gee-acc .gee-acc__boton {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 38px !important;
	min-width: 38px !important;
	height: 32px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 6px !important;
	background: var(--gee-acc-boton) !important;
	color: #fff !important;
	cursor: pointer;
	text-decoration: none;
	box-shadow: none !important;
	transition: background .15s ease, transform .08s ease;
}

.gee-acc .gee-acc__boton:hover {
	background: var(--gee-acc-boton-hover) !important;
	color: #fff !important;
}

.gee-acc .gee-acc__boton:active {
	transform: scale(.96);
}

.gee-acc .gee-acc__boton:focus-visible {
	outline: 2px solid var(--gee-acc-boton);
	outline-offset: 2px;
}

.gee-acc .gee-acc__boton--opciones {
	width: auto !important;
	min-width: 0 !important;
	padding: 0 12px !important;
	font-size: 12.5px;
	font-weight: 600;
	white-space: nowrap;
}

.gee-acc__icono,
.gee-acc__spinner,
.gee-acc__check {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

.gee-acc__spinner,
.gee-acc__check {
	display: none;
}

.gee-acc__spinner {
	width: 15px;
	height: 15px;
	border: 2px solid rgba(255, 255, 255, .35);
	border-top-color: #fff;
	border-radius: 50%;
	animation: gee-acc-giro .7s linear infinite;
}

@keyframes gee-acc-giro {
	to { transform: rotate(360deg); }
}

.gee-acc .gee-acc__boton.is-cargando { pointer-events: none; }
.gee-acc .gee-acc__boton.is-cargando .gee-acc__icono { display: none; }
.gee-acc .gee-acc__boton.is-cargando .gee-acc__spinner { display: flex; }

.gee-acc .gee-acc__boton.is-hecho { background: #16a34a !important; pointer-events: none; }
.gee-acc .gee-acc__boton.is-hecho .gee-acc__icono { display: none; }
.gee-acc .gee-acc__boton.is-hecho .gee-acc__check { display: flex; }

/* ---------- Estados ---------- */
.gee-acc__agotado {
	font-size: 12px;
	font-weight: 600;
	color: var(--gee-acc-suave);
	white-space: nowrap;
}

.gee-acc__error {
	margin: 6px 0 0;
	font-size: 12px;
	line-height: 1.35;
	color: #b91c1c;
}

/* ==========================================================================
   Adaptación al ancho de la COLUMNA (container queries)
   Es lo que decide cuándo pasar a modo compacto, mida lo que mida la pantalla.
   ========================================================================== */

/* Columna realmente estrecha (tipo lateral de 270 px): precio arriba y
   controles debajo. En móvil NO hace falta: ahí hay ancho de sobra para
   dejarlos en la misma línea, que se ve mejor. */
@container geeacc (max-width: 310px) {
	.gee-acc__fila {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
	}

	.gee-acc__acciones {
		width: 100%;
		justify-content: space-between;
	}

	.gee-acc .gee-acc__boton {
		flex: 1 1 auto;
		width: auto !important;
	}

	.gee-acc__agotado {
		text-align: right;
	}
}

/* Columna muy estrecha: la foto pasa arriba, a lo ancho. */
@container geeacc (max-width: 235px) {
	.gee-acc__item {
		flex-direction: column;
		gap: 8px;
	}

	.gee-acc__figura {
		flex: 0 0 auto;
		width: 100%;
		height: 80px;
	}

	.gee-acc__figura img,
	.gee-acc__img {
		width: auto;
		max-height: 80px;
	}
}

/* ==========================================================================
   Adaptación a la pantalla (móvil y tablet)
   Aquí se ajustan sobre todo los márgenes, que es lo que se veía apretado.
   ========================================================================== */

@media (max-width: 1024px) {
	.gee-acc {
		margin: 16px 0;
	}
}

@media (max-width: 782px) {
	.gee-acc {
		padding: 12px 10px;
		border-radius: 8px;
	}

	/* En móvil no queremos un scroll dentro de otro scroll. */
	.gee-acc__lista {
		max-height: none !important;
		padding-right: 0;
		gap: 8px;
	}

	.gee-acc__titulo {
		font-size: 15px;
	}
}

@media (max-width: 480px) {
	.gee-acc {
		margin: 14px 0;
		padding: 10px 8px;
	}

	.gee-acc__item {
		padding: 9px;
		gap: 9px;
	}

	.gee-acc__figura {
		flex: 0 0 50px;
		width: 50px;
		height: 50px;
	}

	.gee-acc__nombre {
		font-size: 13px;
	}

	.gee-acc__precio {
		font-size: 14.5px;
	}
}

/* Respaldo para navegadores sin container queries: en pantallas pequeñas
   se apila igual que en el modo compacto. */
@supports not (container-type: inline-size) {
	@media (max-width: 400px) {
		.gee-acc__fila {
			flex-direction: column;
			align-items: stretch;
			gap: 8px;
		}

		.gee-acc__acciones {
			width: 100%;
			justify-content: space-between;
		}

		.gee-acc .gee-acc__boton {
			flex: 1 1 auto;
			width: auto !important;
		}
	}
}

/* Respeto por quien reduce las animaciones */
@media (prefers-reduced-motion: reduce) {
	.gee-acc .gee-acc__boton,
	.gee-acc__item {
		transition: none;
	}
	.gee-acc__spinner {
		animation-duration: 2s;
	}
}