/*
 * Series Bundles — estilos frontend del BuilderWidget (single product),
 * la Bundle_Showcase (shortcode [akb_bundles]) y la ruta /packs/.
 *
 * Carga condicional desde Akibara\Business\Modules\SeriesBundles (Req 12.10).
 *
 * BRANDING: el theme akibara-gp es DARK. Todo el styling usa exclusivamente
 * los tokens `--aki-*` (definidos en tokens.css sobre theme.json) para integrarse
 * con el resto del sitio. Se clona el lenguaje visual de las cards de producto
 * (loop.css): card sobre --aki-surface-2, precio en --aki-yellow, hover con
 * translateY + sombra dura, botón rojo de marca. Fallbacks hex por si el CSS
 * se carga en un contexto sin tokens (ej. preview aislado).
 */

/* ---------------------------------------------------------------------------
 * Ruta pública /packs/ (PacksRoute) — wrapper de página.
 * (Estilos de título eliminados para usar h1.page-title nativo)
 * ------------------------------------------------------------------------- */
.akb-packs-route {
	max-width: var(--container-max, 1280px);
	margin: 0 auto;
	padding: var(--space-8, 2rem) var(--space-4, 1rem) var(--space-12, 3rem);
}
.akb-packs-route__empty {
	margin: var(--space-6, 1.5rem) 0;
	padding: var(--space-6, 1.5rem);
	border: 1px dashed var(--aki-border, #2a2a2a);
	border-radius: var(--radius-md, 8px);
	background: var(--aki-surface, #0f0f10);
	color: var(--aki-gray-400, #9a9a9a);
	text-align: center;
}

/* ---------------------------------------------------------------------------
 * Bundle_Showcase — vitrina de Curated_Packs del shortcode [akb_bundles].
 * ------------------------------------------------------------------------- */
.akb-sb-showcase {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--space-4, 1.5rem);
	margin: var(--space-6, 1.5rem) 0;
}

.akb-sb-widget {
	display: flex;
	flex-direction: column;
	background: var(--aki-surface-2, #1b1b1e);
	border: 4px solid var(--aki-black, #000);
	border-radius: 0;
	overflow: hidden;
	transition: transform var(--transition-normal, 300ms ease), box-shadow var(--transition-normal, 300ms ease);
	box-shadow: 6px 6px 0px var(--aki-black, #000);
	position: relative;
	z-index: 1;
}
.akb-sb-card:hover {
	transform: translateY(-6px) rotate(-1deg);
	box-shadow: 12px 12px 0px var(--aki-red, #E60012);
}

.akb-sb-card__figure {
	margin: 0;
	padding: 0;
	position: relative;
	background: var(--aki-surface-3, #242424);
	aspect-ratio: 16/9;
	overflow: hidden;
}
.akb-sb-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 500ms ease;
}
.akb-sb-card:hover .akb-sb-card__img {
	transform: scale(1.05);
}

.akb-sb-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-2, .5rem);
	padding: var(--space-4, 1rem);
	flex: 1 1 auto;
}

.akb-sb-card__title {
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--text-xl, 1.35rem);
	font-weight: 900;
	font-style: italic;
	text-transform: uppercase;
	letter-spacing: -0.02em;
	color: var(--aki-black, #000);
	line-height: 1;
	transform: skewX(-5deg);
}

.akb-sb-card__narrative {
	font-size: var(--text-sm, .9rem);
	color: var(--aki-gray-700, #333);
	line-height: 1.4;
	font-weight: 600;
}

.akb-sb-card__pricing {
	margin: var(--space-1, .25rem) 0 0;
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--space-2, .5rem);
}
.akb-sb-card__regular {
	color: var(--aki-gray-500, #7a7a7a);
	opacity: 0.65;
	text-decoration: line-through;
	font-weight: 400;
}
.akb-sb-card__price {
	font-weight: var(--weight-bold, 700);
	font-size: var(--text-xl, 1.35rem);
	color: var(--aki-yellow, #FFD401);
	text-decoration: none;
}

.akb-sb-card__stock {
	margin: 0;
	font-size: var(--text-xs, .8rem);
	font-weight: var(--weight-semibold, 600);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.akb-sb-card__stock--in {
	color: var(--aki-success, #15803d);
}

.akb-sb-card__eta {
	margin: 0 0 var(--space-3, .75rem);
	font-size: var(--text-xs, .82rem);
	color: var(--aki-yellow, #FFD401);
	background: rgba(255, 212, 1, 0.1);
	padding: var(--space-2, .5rem);
	border-radius: var(--radius-sm, 4px);
	border: 1px solid rgba(255, 212, 1, 0.35);
}

.akb-sb-card__form {
	margin-top: auto;
	padding-top: var(--space-3, .75rem);
}
/* Botón rectangular de marca: replica el patrón brutalista del tema
 * (.single_add_to_cart_button → border-radius:0, border 2px, touch target). */
.akb-sb-card__add {
	width: 100%;
	min-height: var(--touch-target-min, 44px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	background: var(--aki-red, #E60012);
	color: var(--aki-white, #fff);
	font-family: var(--font-heading);
	font-weight: 900;
	font-style: italic;
	font-size: 1.1rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border: 3px solid var(--aki-black, #000);
	border-radius: 0;
	padding: var(--space-3, .75rem) var(--space-5, 1.25rem);
	cursor: pointer;
	box-shadow: 4px 4px 0px var(--aki-black, #000);
	transition: all 150ms ease;
	transform: skewX(-5deg);
}
.akb-sb-card__add:hover {
	background: var(--aki-yellow, #FFD401);
	color: var(--aki-black, #000);
	transform: skewX(-5deg) translate(-2px, -2px);
	box-shadow: 6px 6px 0px var(--aki-black, #000);
}
.akb-sb-card__add:focus-visible {
	outline: 2px solid var(--aki-yellow, #FFD700);
	outline-offset: 2px;
}
.akb-sb-card__add.is-loading {
	opacity: .7;
	pointer-events: none;
}

/* ---------------------------------------------------------------------------
 * Builder interactivo "Arma tu pack" (single product).
 * ------------------------------------------------------------------------- */
.akb-sb-builder {
	margin: var(--space-5, 1.25rem) 0;
	padding: var(--space-4, 1rem);
	border: 4px solid var(--aki-black, #000);
	border-radius: 0;
	background: var(--aki-surface-2, #1b1b1e);
	box-shadow: 8px 8px 0px var(--aki-black, #000);
	/* Halftone/screentone de marca (puntos rojos sutiles) sobre el color base.
	 * SIN skew en el contenedor raíz: rompía el position:fixed del sticky bar
	 * móvil (ancestro transformado = containing block) e inclinaba el grid. */
	background-image: radial-gradient( circle, rgba(230, 0, 18, 0.10) 1px, transparent 1.6px );
	background-size: 14px 14px;
	position: relative;
}
.akb-sb-builder__title {
	margin: 0 0 var(--space-2, .5rem);
	font-family: var(--font-heading);
	font-size: var(--text-xl, 1.35rem);
	font-weight: 900;
	font-style: italic;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--aki-white, #fff);
	line-height: 1.1;
	/* Sombra doble limpia: el negro fino separa el glifo del rojo (look print de
	   marca) — antes el rojo solo sangraba a la baseline y formaba una franja que
	   pisaba el texto, peor en mobile a 2 líneas. */
	text-shadow: 1px 1px 0 var(--aki-black, #121212), 2px 2px 0 var(--aki-red, #E60012);
}
.akb-sb-builder__intro {
	margin: 0 0 var(--space-2, .5rem);
	color: var(--aki-gray-300, #c7c7c7);
	font-size: var(--text-sm, .9rem);
}
.akb-sb-builder__tiers {
	list-style: none;
	margin: 0 0 var(--space-3, .75rem);
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2, .4rem);
}
/* Chip de tramo en reposo (antes el CSS estilaba `.akb-sb-widget__tier`, un
 * typo: el markup usa `.akb-sb-builder__tier` → los tramos salían texto plano). */
.akb-sb-builder__tier {
	display: inline-flex;
	align-items: center;
	padding: var(--space-1, .28rem) var(--space-3, .6rem);
	background: var(--aki-surface-3, #242424);
	border: 2px solid var(--aki-border, #2a2a2e);
	font-size: var(--text-xs, .8rem);
	font-weight: 800;
	letter-spacing: 0.02em;
	color: var(--aki-gray-200, #e0e0e0);
	white-space: nowrap;
}
.akb-sb-builder__progress-wrap {
	position: relative; /* #24: ancla los ticks de tramo */
	width: 100%;
	height: 8px;
	background: var(--aki-surface-3, #242424);
	border-radius: 999px;
	margin: var(--space-3, .75rem) 0;
	overflow: hidden;
}
.akb-sb-builder__progress-bar {
	height: 100%;
	background: var(--aki-red, #E60012);
	box-shadow: inset 0 -2px 0 rgba( 0, 0, 0, .28 );
	width: 0%;
	/* #24: easing con "pull" (overshoot backout) al avanzar. */
	transition: width 360ms cubic-bezier( 0.34, 1.4, 0.64, 1 );
}
/* #24: ticks de tramo en la barra (en sus posiciones %). */
.akb-sb-builder__progress-tick {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 2px;
	margin-left: -1px;
	background: var(--aki-surface, #0f0f10);
	z-index: 1;
}
.akb-sb-builder__tools {
	display: flex;
	flex-direction: column;
	gap: var(--space-2, .5rem);
	margin: var(--space-3, .75rem) 0 var(--space-2, .5rem);
	padding: var(--space-3, .75rem);
	background: var(--aki-surface, #0f0f10);
	border: 2px solid var(--aki-black, #000);
	box-shadow: inset 0 0 0 1px var(--aki-border, #2a2a2e);
}
.akb-sb-builder__ranges,
.akb-sb-builder__bulk {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2, .45rem);
}
.akb-sb-builder__ranges {
	flex-wrap: nowrap;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	padding: 2px 0 6px;
	scrollbar-width: thin;
}
.akb-sb-builder__range,
.akb-sb-builder__bulk-btn {
	min-height: var(--touch-target-min, 44px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: var(--space-2, .45rem) var(--space-3, .7rem);
	background: var(--aki-surface-3, #242424);
	color: var(--aki-gray-200, #e0e0e0);
	border: 2px solid var(--aki-border, #2a2a2e);
	border-radius: 0;
	font-family: var(--font-heading);
	font-size: var(--text-sm, .88rem);
	font-weight: 900;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	cursor: pointer;
	transition: background 150ms ease, color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}
.akb-sb-builder__range {
	flex: 0 0 auto;
	min-width: 82px;
}
.akb-sb-builder__range:hover,
.akb-sb-builder__bulk-btn:hover {
	color: var(--aki-white, #fff);
	border-color: var(--aki-black, #000);
	transform: translate(-1px, -1px);
	box-shadow: 3px 3px 0 var(--aki-black, #000);
}
.akb-sb-builder__range:focus-visible,
.akb-sb-builder__bulk-btn:focus-visible {
	outline: 3px solid var(--aki-yellow, #FFD401);
	outline-offset: 2px;
}
.akb-sb-builder__range.is-active {
	/* Estado SELECCIONADO en blanco brutalista (no amarillo: amarillo = solo precio;
	   no rojo: el rojo es acción, no se coopta para un estado). Blanco + borde/sombra
	   dura lee "seleccionado" por peso y contraste (18.7:1). El selector .is-active no
	   cambia → el toggle aria-pressed del JS queda intacto. */
	background: var(--aki-white, #fff);
	color: var(--aki-black, #121212);
	border-color: var(--aki-black, #000);
	box-shadow: 3px 3px 0 var(--aki-black, #000);
}
.akb-sb-builder__bulk-btn {
	background: var(--aki-red, #E60012);
	color: var(--aki-white, #fff);
	border-color: var(--aki-black, #000);
}
.akb-sb-builder__bulk-btn--secondary {
	background: var(--aki-surface-3, #242424);
	color: var(--aki-gray-200, #e0e0e0);
	border-color: var(--aki-border, #2a2a2e);
}
.akb-sb-builder__filter-status {
	color: var(--aki-gray-300, #c7c7c7);
	font-size: var(--text-xs, .8rem);
	font-weight: 700;
}
/* #23: flash de la barra al cruzar un tramo nuevo (brillo, sin asumir color base). */
@keyframes akb-flash {
	0%, 100% { filter: none; }
	30% { filter: brightness( 1.9 ) saturate( 1.4 ); }
}
.akb-sb-builder__progress-bar.akb-animate-flash {
	animation: akb-flash 520ms ease;
}
/* #23: pulse sutil del builder al cruzar el tramo. */
@keyframes akb-pulse {
	0%, 100% { transform: none; }
	40% { transform: scale( 1.012 ); }
}
.akb-sb-builder.akb-animate-pulse {
	animation: akb-pulse 360ms ease;
}
/* #26: stagger de entrada del grid (fade + rise, escalonado por card). */
@keyframes akb-stagger {
	from { opacity: 0; transform: translateY( 8px ); }
	to { opacity: 1; transform: none; }
}
.akb-sb-builder__grid .akb-sb-builder__card {
	animation: akb-stagger 320ms ease both;
	animation-delay: calc( var( --akb-i, 0 ) * 35ms );
}
.akb-sb-builder__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	gap: var(--space-4, 1rem);
	margin: var(--space-4, 1rem) 0 var(--space-6, 1.5rem);
	max-height: 400px;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 4px;
}
.akb-sb-builder__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--space-2, .5rem);
	padding: var(--space-3, .75rem);
	border: 3px solid var(--aki-border, #2a2a2e);
	background: var(--aki-surface-3, #242424);
	cursor: pointer;
	transition: all 200ms cubic-bezier(0.25, 0.8, 0.25, 1);
	position: relative;
	user-select: none;
	/* Series largas (100+ tomos render-all): el navegador NO paga layout/paint de
	 * las cards fuera de la ventana de scroll del grid. `contain-intrinsic-size`
	 * reserva el alto aproximado para que la scrollbar no salte. */
	content-visibility: auto;
	contain-intrinsic-size: auto 280px;
}
/* Filtro de búsqueda/rango: ocultar DE VERDAD las cards que no matchean. El
 * atributo `[hidden]` del markup no alcanza porque `.akb-sb-builder__card`
 * declara `display:flex` con la misma especificidad que el `[hidden]` de la UA
 * (gana el autor) → las cards filtradas quedaban visibles aunque el contador
 * dijera "Mostrando 1 de N". Esta clase (0,2,0) sí le gana al base (0,1,0). */
.akb-sb-builder__card.is-filtered-out {
	display: none;
}
/* El input real debe seguir en el DOM para teclado/lectores, pero no puede
 * heredar el `screen-reader-text:focus` global que lo muestra como skip-link. */
.akb-sb-builder__check.screen-reader-text,
.akb-sb-builder__check.screen-reader-text:focus {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
}
/* Foco de teclado visible: el checkbox real es .screen-reader-text, así que sin
 * esto el foco al tabular el grid es invisible (mesa de diseño 2026-06-25). */
.akb-sb-builder__card:focus-within {
	outline: 3px solid var(--aki-yellow, #FFD401);
	outline-offset: 2px;
}
.akb-sb-builder__card.is-selected {
	/* Selected = borde amarillo grueso + lift + sombra roja + sello rojo. NO se
	 * repinta el fondo de amarillo: tapaba la portada (lo que el cliente
	 * reconoce) y con 8+ marcadas el grid era un bloque amarillo (mesa 2026-06-25). */
	border-color: var(--aki-yellow, #FFD401);
	transform: translateY(-6px);
	box-shadow: 6px 6px 0px var(--aki-red, #E60012);
	z-index: 1;
}
.akb-sb-builder__card.is-disabled {
	opacity: 0.4;
	filter: grayscale(100%);
	pointer-events: none;
	background: var(--aki-surface-2, #1a1a1a);
}
.akb-sb-builder__selection-mark {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 28px;
	height: 28px;
	background: var(--aki-red, #E60012);
	color: #fff;
	border: 3px solid #000;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 900;
	font-size: 16px;
	opacity: 0;
	transform: scale(0);
	transition: all 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
	z-index: 2;
}
.akb-sb-builder__card.is-selected .akb-sb-builder__selection-mark {
	opacity: 1;
	transform: scale(1);
}
.akb-sb-builder__vol-thumb {
	width: 100%;
	aspect-ratio: 2/3;
	flex-shrink: 0;
	border: 2px solid #000;
	overflow: hidden;
	background: var(--aki-surface-2, #1b1b1e);
	box-shadow: 3px 3px 0px rgba(0,0,0,0.5);
}
.akb-sb-builder__vol-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.akb-sb-builder__vol-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 100%;
}
.akb-sb-builder__card.is-selected .akb-sb-builder__vol-info {
	color: var(--aki-white, #fff);
}
.akb-sb-builder__vol-title {
	font-size: var(--text-xs, .8rem);
	line-height: 1.2;
	font-weight: 700;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.akb-sb-builder__vol-price {
	font-weight: 900;
	font-size: var(--text-sm, .9rem);
	white-space: nowrap;
	color: var(--aki-yellow, #FFD401);
	display: flex;
	flex-direction: column;
	align-items: center;
}
.akb-sb-builder__card.is-selected .akb-sb-builder__vol-price {
	color: var(--aki-red-bright, #ff4d4d);
}
.akb-sb-builder__vol-price del {
	font-size: 0.85em;
	color: var(--aki-gray-400, #9a9a9a);
	font-weight: 400;
}
.akb-sb-builder__vol-price ins {
	text-decoration: none;
}
.akb-sb-builder__vol-link {
	font-size: var(--text-xs, .8rem);
	text-decoration: underline;
	color: var(--aki-gray-400, #9a9a9a);
	flex-shrink: 0;
}
.akb-sb-builder__vol-link:hover {
	color: var(--aki-yellow, #FFD401);
}
.akb-sb-builder__summary {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0 0 var(--space-3, .65rem);
	font-size: var(--text-sm, .92rem);
}
.akb-sb-builder__count {
	font-weight: var(--weight-semibold, 600);
	color: var(--aki-white, #fff);
}
.akb-sb-builder__disc {
	color: var(--aki-gray-400, #9a9a9a);
}
.akb-sb-builder__disc.is-active {
	color: var(--aki-yellow, #FFD401);
	font-weight: var(--weight-semibold, 600);
}
.akb-sb-builder__savings {
	font-size: var(--text-sm, .9rem);
	color: var(--aki-green-bright, #4ade80);
	font-weight: var(--weight-bold, 700);
	background: rgba(74, 222, 128, 0.12);
	padding: 2px 8px;
	border-radius: 4px;
	display: inline-block;
	margin-top: 4px;
}
@keyframes akb-pop {
	0% { transform: scale(1); }
	50% { transform: scale(1.1); color: var(--aki-yellow, #FFD401); }
	100% { transform: scale(1); }
}
@keyframes akb-shake {
	0% { transform: translateX(0); }
	20% { transform: translateX(-4px) rotate(-2deg); }
	40% { transform: translateX(4px) rotate(2deg); }
	60% { transform: translateX(-4px) rotate(-2deg); }
	80% { transform: translateX(4px) rotate(2deg); }
	100% { transform: translateX(0); }
}
.akb-animate-pop {
	animation: akb-pop 0.4s ease forwards;
}
.akb-animate-shake {
	animation: akb-shake 0.4s ease-in-out;
}
/* Celebración "unlock" al alcanzar un tramo (antes akb-shake = gramática de
 * ERROR). El estado persistente (amarillo) va separado de la animación one-shot
 * para no pelear el transform — y sin skew animado (mesa de motion). */
@keyframes akb-unlock {
	0%   { transform: scale(0.92); }
	55%  { transform: scale(1.16); }
	100% { transform: scale(1); }
}
.akb-sb-builder__tier.is-reached {
	color: var(--aki-black, #000);
	background: var(--aki-yellow, #FFD401);
	font-weight: 900;
	border-color: var(--aki-black, #000);
	box-shadow: 3px 3px 0 var(--aki-black, #000);
}
.akb-animate-unlock {
	animation: akb-unlock 0.38s cubic-bezier(0.18, 0.9, 0.32, 1.4) both;
}
/* Stamp de éxito en el botón antes de redirigir al carrito. Mantiene el skewX
 * para no perder la inclinación de marca durante la animación (motion). */
@keyframes akb-stamp {
	0%   { transform: skewX(-5deg) scale(1.22) rotate(-3deg); }
	60%  { transform: skewX(-5deg) scale(0.97) rotate(1deg); }
	100% { transform: skewX(-5deg) scale(1) rotate(0); }
}
.akb-animate-stamp {
	animation: akb-stamp 0.28s cubic-bezier(0.2, 0.8, 0.3, 1.3) both;
}
.akb-sb-builder__add {
	width: 100%;
	min-height: var(--touch-target-min, 44px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	/* A11y: el CTA usa el rojo de marca (--aki-red = #E60012) oscurecido ~6% vía
	 * color-mix para que el texto blanco quede con holgura AA (~5.35:1) sin cambiar
	 * el hue; fallback hex para navegadores sin color-mix. El hover (amarillo) y el
	 * disabled (este rojo atenuado) no se ven afectados. */
	background: #d80011;
	background: color-mix(in srgb, var(--aki-red, #E60012) 94%, #000);
	color: var(--aki-white, #fff);
	font-family: var(--font-heading);
	font-weight: 900;
	font-style: italic;
	font-size: 1.1rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border: 3px solid var(--aki-black, #000);
	border-radius: 0;
	padding: var(--space-3, .75rem) var(--space-5, 1.25rem);
	cursor: pointer;
	box-shadow: 4px 4px 0px var(--aki-black, #000);
	transition: all 150ms ease;
	transform: skewX(-5deg);
}
.akb-sb-builder__add:hover {
	background: var(--aki-yellow, #FFD401);
	color: var(--aki-black, #000);
	transform: skewX(-5deg) translate(-2px, -2px);
	box-shadow: 6px 6px 0px var(--aki-black, #000);
}
.akb-sb-builder__add:focus-visible {
	outline: 2px solid var(--aki-yellow, #FFD700);
	outline-offset: 2px;
}
.akb-sb-builder__add[disabled] {
	/* "Aún no listo", no "roto": superficie NEUTRA de marca (no el rojo de acción a
	   opacity .45, que daba granate fangoso con texto 3.27:1, FALLA AA). gray-300
	   sobre surface-3 = ~7.3:1. Conserva borde/sombra/skew nítidos. */
	background: var(--aki-surface-3, #222);
	color: var(--aki-gray-300, #B0B0B0);
	border-color: var(--aki-border, #2a2a2e);
	box-shadow: 3px 3px 0 var(--aki-black, #000);
	opacity: 1;
	cursor: not-allowed;
}
.akb-sb-builder__add.is-loading {
	opacity: .7;
	pointer-events: none;
}
.akb-sb-builder__msg {
	margin: var(--space-2, .5rem) 0 0;
	font-size: var(--text-sm, .88rem);
	min-height: 1em;
}
.akb-sb-builder__msg.is-error {
	color: var(--aki-red-bright, #ff4d4d);
}
.akb-sb-builder__msg.is-success {
	color: var(--aki-green-bright, #4ade80);
}

/* Responsive: en móvil la vitrina pasa a 2 columnas y luego 1. */
@media (max-width: 768px) {
	.akb-sb-showcase {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-3, 1rem);
	}

	/* Barra de acción móvil: sticky dentro del builder, no fija globalmente.
	 * Así no aparece antes de que el cliente llegue al módulo ni tapa el PDP. */
	.akb-sb-builder__summary-wrap {
		position: sticky;
		bottom: calc(66px + env(safe-area-inset-bottom, 0px));
		background: var(--aki-surface, #0f0f10);
		border: 3px solid var(--aki-black, #000);
		border-bottom-width: 0;
		padding: var(--space-3, .75rem) var(--space-4, 1rem);
		z-index: var(--z-sticky, 30);
		box-shadow: 0 -4px 0 var(--aki-red, #E60012);
		display: flex;
		flex-direction: column;
		gap: var(--space-2, .5rem);
		margin: var(--space-4, 1rem) calc(var(--space-4, 1rem) * -1) calc(var(--space-4, 1rem) * -1);
	}
	.akb-sb-builder {
		padding-bottom: var(--space-4, 1rem);
	}
	.akb-sb-builder__add {
		margin-top: 0;
	}
	.akb-sb-builder__tools {
		margin-left: calc(var(--space-4, 1rem) * -1);
		margin-right: calc(var(--space-4, 1rem) * -1);
		padding-left: var(--space-4, 1rem);
		padding-right: var(--space-4, 1rem);
	}
	.akb-sb-builder__range,
	.akb-sb-builder__bulk-btn {
		flex: 1 1 calc(50% - var(--space-2, .45rem));
	}
	.akb-sb-builder__range {
		flex: 0 0 auto;
	}
	.akb-sb-builder__range[data-akb-sb-range="all"] {
		flex-basis: auto;
	}
	.akb-sb-builder__bulk-btn[data-akb-sb-visible-action="clear-all"] {
		flex-basis: 100%;
	}
	.akb-sb-builder__filter-status {
		flex-basis: 100%;
	}
}
@media (max-width: 480px) {
	.akb-sb-showcase {
		grid-template-columns: 1fr;
	}
}

/* --- Collage Automático (CSS Fan) --- */
.akb-sb-card__figure--collage {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--aki-surface-2, #1b1b1e);
	overflow: hidden; 
}
.akb-sb-collage__item {
	position: absolute;
	width: 45%;
	height: 85%;
	object-fit: cover;
	border: 2px solid var(--aki-black, #000);
	box-shadow: 4px 4px 0px rgba(0,0,0,0.5);
	transition: transform 300ms ease;
}
.akb-sb-collage__item--0 {
	z-index: 3;
	transform: rotate(0deg) scale(1);
}
.akb-sb-collage__item--1 {
	z-index: 2;
	transform: rotate(-12deg) translateX(-45%) scale(0.9);
}
.akb-sb-collage__item--2 {
	z-index: 1;
	transform: rotate(12deg) translateX(45%) scale(0.9);
}

.akb-sb-card:hover .akb-sb-collage__item--0 {
	transform: rotate(0deg) scale(1.05) translateY(-5px);
}
.akb-sb-card:hover .akb-sb-collage__item--1 {
	transform: rotate(-18deg) translateX(-50%) scale(0.95);
}
.akb-sb-card:hover .akb-sb-collage__item--2 {
	transform: rotate(18deg) translateX(50%) scale(0.95);
}

/* ---------------------------------------------------------------------------
 * Aviso + upsell de "Arma tu pack" en el CARRITO (BypCartNoticeInjector).
 * Hereda el lenguaje brutalista del builder; acento AMARILLO (= "casi lo
 * lográs / oferta"), el rojo queda para urgencia/CTA. Reemplaza los estilos
 * inline + el morado #8a2be2 fuera de marca (mesa de diseño 2026-06-25).
 * ------------------------------------------------------------------------- */
.akb-byp-notice {
	display: flex;
	align-items: center;
	gap: var(--space-2, .6rem);
	margin: 0 0 var(--space-3, .75rem);
	padding: var(--space-3, .75rem) var(--space-4, 1rem);
	background: var(--aki-surface-2, #1b1b1e);
	color: var(--aki-white, #fff);
	border: 3px solid var(--aki-black, #000);
	box-shadow:
		inset 0 0 0 2px rgba(255, 212, 1, .42),
		6px 6px 0px var(--aki-black, #000);
	transform: skewX(-2deg);
	font-size: var(--text-sm, .92rem);
}
.akb-byp-notice strong { color: var(--aki-yellow, #FFD401); }
/* Sello SFX amarillo skeweado (reemplaza el dashicons-star genérico). */
.akb-byp-notice__sfx {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 30px;
	padding: 0 8px;
	background: var(--aki-yellow, #FFD401);
	color: var(--aki-black, #000);
	font-family: var(--font-heading);
	font-weight: 900;
	font-style: italic;
	font-size: 1.05rem;
	line-height: 1;
	border: 2px solid var(--aki-black, #000);
	box-shadow: 2px 2px 0 var(--aki-black, #000);
	transform: skewX(-8deg);
}

.akb-cart-upsells {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3, .75rem);
	margin: 0 0 var(--space-5, 1.25rem);
	padding: var(--space-4, 1rem);
	background: var(--aki-surface-2, #1b1b1e);
	border: 3px solid var(--aki-black, #000);
	box-shadow: 6px 6px 0px var(--aki-black, #000);
}
.akb-cart-upsells__title {
	width: 100%;
	margin: 0 0 var(--space-2, .5rem);
	font-family: var(--font-heading);
	font-weight: 900;
	font-style: italic;
	font-size: var(--text-lg, 1.1rem);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--aki-white, #fff);
	line-height: 1.1;
	/* Sombra doble limpia (gemelo del builder __title): negro fino separa el glifo del rojo. */
	text-shadow: 1px 1px 0 var(--aki-black, #121212), 2px 2px 0 var(--aki-red, #E60012);
}
.akb-upsell-item {
	display: flex;
	align-items: center;
	gap: var(--space-2, .625rem);
	flex: 0 1 360px;          /* no crecer: un solo item no se estira a todo el ancho */
	min-width: 260px;
	max-width: 100%;
	padding: var(--space-2, .5rem);
	background: var(--aki-surface-3, #242424);
	border: 2px dashed var(--aki-gray-600, #4a4a4a);
}
.akb-upsell-item__thumb {
	width: 60px;
	height: auto;
	flex-shrink: 0;
	display: block;
	border: 2px solid var(--aki-black, #000);
}
.akb-upsell-item__body { flex: 1 1 auto; min-width: 0; line-height: 1.2; }
.akb-upsell-item__title {
	font-size: var(--text-sm, .82rem);
	font-weight: 700;
	color: var(--aki-white, #fff);
}
.akb-upsell-item__price {
	font-size: var(--text-sm, .82rem);
	font-weight: 900;
	color: var(--aki-yellow, #FFD401);
}
/* CTA "Añadir": botón brutalista rojo (conserva las clases AJAX de WC). El
 * selector lleva el contenedor para ganarle a la base `.button` del theme. */
.akb-cart-upsells .akb-upsell-item__add {
	flex-shrink: 0;
	min-height: var(--touch-target-min, 44px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-2, .4rem) var(--space-3, .75rem);
	background: var(--aki-red, #E60012);
	color: var(--aki-white, #fff);
	font-weight: 900;
	font-size: var(--text-xs, .8rem);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	border: 2px solid var(--aki-black, #000);
	border-radius: 0;
	box-shadow: 2px 2px 0 var(--aki-black, #000);
	transform: skewX(-5deg);
	transition: all 150ms ease;
}
.akb-cart-upsells .akb-upsell-item__add:hover {
	background: var(--aki-yellow, #FFD401);
	color: var(--aki-black, #000);
	transform: skewX(-5deg) translate(-2px, -2px);
	box-shadow: 4px 4px 0 var(--aki-black, #000);
}
.akb-cart-upsells .akb-upsell-item__add:focus-visible {
	outline: 2px solid var(--aki-yellow, #FFD401);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * Progreso de colección (CollectionProgress): "Llevas X de N" + barra + el
 * badge "Ya lo tienes" en tomos comprados. Acento amarillo (logro/colección).
 * ------------------------------------------------------------------------- */
.akb-sb-builder__collection {
	margin: 0 0 var(--space-3, .75rem);
	padding: var(--space-2, .6rem) var(--space-3, .75rem);
	background: var(--aki-surface-3, #242424);
	border: 2px solid var(--aki-black, #000);
	box-shadow: inset 0 0 0 2px rgba(255, 212, 1, .28);
}
.akb-sb-builder__collection-head {
	display: flex;
	align-items: baseline;
	gap: var(--space-2, .5rem);
}
.akb-sb-builder__collection-count {
	font-family: var(--font-heading);
	font-weight: 900;
	font-style: italic;
	font-size: 1.3rem;
	color: var(--aki-yellow, #FFD401);
	white-space: nowrap;
}
.akb-sb-builder__collection-label {
	font-size: var(--text-sm, .9rem);
	font-weight: 700;
	color: var(--aki-white, #fff);
}
.akb-sb-builder__collection-track {
	height: 6px;
	margin: var(--space-2, .5rem) 0 4px;
	background: var(--aki-surface, #0f0f10);
	border: 1px solid var(--aki-black, #000);
	overflow: hidden;
}
.akb-sb-builder__collection-fill {
	height: 100%;
	background: var(--aki-yellow, #FFD401);
	transition: width 400ms ease;
}
.akb-sb-builder__collection-sub {
	margin: 0;
	font-size: var(--text-xs, .8rem);
	color: var(--aki-gray-300, #c7c7c7);
}
/* "Completá con 1 clic": CTA verde (semántica de completar) dentro de la franja.
   Secundario al rojo de "Agregar mi pack", pero igual de tentador. */
.akb-sb-builder__complete {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: var(--space-2, .6rem);
	padding: 8px 14px;
	background: var(--aki-green-bright, #4ade80);
	color: var(--aki-black, #000);
	font-family: var(--font-heading);
	font-weight: 900;
	font-size: var(--text-sm, .85rem);
	line-height: 1.2;
	text-align: left;
	border: 2px solid var(--aki-black, #000);
	border-radius: 0;
	box-shadow: 3px 3px 0 var(--aki-black, #000);
	cursor: pointer;
	transition: transform 130ms ease, box-shadow 130ms ease;
}
.akb-sb-builder__complete::before {
	content: "\2713";
	font-weight: 900;
}
.akb-sb-builder__complete:hover {
	transform: translate(-2px, -2px);
	box-shadow: 5px 5px 0 var(--aki-black, #000);
}
.akb-sb-builder__complete:focus-visible {
	outline: 3px solid var(--aki-yellow, #FFD401);
	outline-offset: 2px;
}
.akb-sb-builder__collection-guest {
	margin: 0 0 var(--space-3, .75rem);
	padding: var(--space-2, .6rem) var(--space-3, .75rem);
	background: var(--aki-surface-3, #242424);
	border: 2px solid var(--aki-gray-700, #333);
	font-size: var(--text-sm, .88rem);
	color: var(--aki-gray-300, #c7c7c7);
}
.akb-sb-builder__collection-guest a {
	/* Link "Inicia sesión" → rojo de marca (no amarillo: amarillo = solo precio).
	   red-bright = 4.78:1 sobre el fondo oscuro (AA). */
	color: var(--aki-red-bright, #FF0A1D);
	font-weight: 700;
	text-decoration: underline;
}
/* Tomo ya comprado: atenuado + badge, pero sigue seleccionable (regalo/2da copia). */
.akb-sb-builder__card.is-owned {
	opacity: 0.62;
}
.akb-sb-builder__card.is-owned .akb-sb-builder__vol-thumb {
	filter: saturate(0.55);
}
.akb-sb-builder__owned-badge {
	position: absolute;
	top: 4px;
	left: 4px;
	z-index: 2;
	padding: 1px 6px;
	background: var(--aki-black, #000);
	color: var(--aki-yellow, #FFD401);
	font-size: 10px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	border: 1px solid var(--aki-yellow, #FFD401);
}
.akb-sb-builder__owned-badge::before {
	content: "\2713\00a0";
}

/* ---------------------------------------------------------------------------
 * Accesibilidad: respetar prefers-reduced-motion (WCAG 2.3.3). Neutraliza
 * pop/shake/glow/unlock/stagger y las transiciones de las cards para usuarios
 * sensibles al movimiento, sin perder los estados (solo el movimiento).
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.akb-sb-builder,
	.akb-sb-builder *,
	.akb-sb-builder__card,
	.akb-byp-notice,
	.akb-cart-upsells * {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}
}

/* ---------------------------------------------------------------------------
 * Restock en tomos agotados del builder: enlace al PDP del tomo, donde el
 * plugin BISN tiene su formulario "avísame". La card agotada re-habilita
 * interacción (is-disabled la apaga) y atenúa solo portada+título; el enlace
 * queda nítido. Se abre en pestaña nueva para no perder el pack en armado.
 * ------------------------------------------------------------------------- */
.akb-sb-builder__card.is-disabled.is-notifiable {
	opacity: 1;
	filter: none;
	pointer-events: auto;
	cursor: default;
	background: var(--aki-surface-3, #242424);
}
.akb-sb-builder__card.is-notifiable .akb-sb-builder__vol-thumb,
.akb-sb-builder__card.is-notifiable .akb-sb-builder__vol-title {
	opacity: 0.5;
	filter: grayscale(100%);
}
.akb-sb-builder__notify-link {
	display: inline-block;
	width: 100%;
	margin-top: var(--space-2, .5rem);
	padding: 6px 8px;
	box-sizing: border-box;
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 12px;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	/* CTA de recuperación (back-in-stock) = la acción real del estado agotado →
	   rojo de marca (no amarillo: amarillo = solo precio). Outline rojo, hover fill. */
	color: var(--aki-red-bright, #FF0A1D);
	background: transparent;
	border: 2px solid var(--aki-red, #E60012);
	transition: background 130ms ease, color 130ms ease;
}
.akb-sb-builder__notify-link:hover,
.akb-sb-builder__notify-link:focus-visible {
	background: var(--aki-red, #E60012);
	color: var(--aki-white, #fff);
}
.akb-sb-builder__notify-link:focus-visible {
	outline: 3px solid var(--aki-yellow, #FFD401);
	outline-offset: 2px;
}

/* #17 — Indicador de envío gratis en el builder (vivo, sobre el total del pack). */
.akb-sb-builder__freeship {
	display: block;
	margin-top: 4px;
	font-size: var(--text-sm, .88rem);
	font-weight: 700;
	color: var(--aki-gray-300, #c7c7c7);
}
.akb-sb-builder__freeship.is-reached {
	color: var(--aki-green-bright, #4ade80);
	font-weight: 900;
}
/* #18 — Línea de escasez a nivel serie (reframe del qty=1 como valor, sin ruido
   por-tomo). Calma, acento amarillo de marca, sentence case. */
.akb-sb-builder__scarcity-note {
	margin: 0 0 var(--space-2, .5rem);
	font-size: var(--text-xs, .8rem);
	font-weight: 700;
	/* Nota de contexto (no precio) → gris neutro, NO amarillo (amarillo = solo precio). */
	color: var(--aki-gray-200, #E0E0E0);
}