/**
 * ADSS Billboard Preview - campaign builder.
 *
 * Scoped under .abpc so a theme's own button and heading rules cannot leak in.
 * Everything sizes from the two custom properties at the top, which is what
 * keeps the layout intact from a phone up to a wide desktop.
 */

.abpc {
	--abpc-red: #e11d2e;
	--abpc-red-dark: #b8141f;
	--abpc-ink: #0f172a;
	--abpc-body: #4b5563;
	--abpc-muted: #9ca3af;
	--abpc-line: #e5e7eb;
	--abpc-soft: #f4f5f7;
	--abpc-card: #ffffff;
	--abpc-radius: 16px;
	--abpc-gap: 22px;

	/* Rail geometry. --abpc-rail-visible is how many billboards are on screen
	   at once; the rest are reached with the arrows, the scrollbar or a drag.
	   The shortcode can override it with visible="8". */
	--abpc-rail-w: 168px;
	--abpc-rail-pad: 5px;
	--abpc-rail-gap: 12px;
	--abpc-rail-visible: 6;

	box-sizing: border-box;
	max-width: 1180px;
	margin: 0 auto;
	padding: 8px 0 40px;
	color: var(--abpc-body);
	font-size: 15px;
	line-height: 1.55;
	position: relative;
}

.abpc *,
.abpc *::before,
.abpc *::after {
	box-sizing: inherit;
}

.abpc [hidden] {
	display: none !important;
}

/* Themes style bare `button` heavily, and Astra in particular repaints every
   button and its hover state with the global accent colour. That was turning
   the surface switches into solid red bars and hiding the arrow chevrons. Every
   button in here is reset to nothing first; the component rules below then say
   what each one should actually look like, and carry the .abpc prefix so they
   outrank both this reset and the theme. */
.abpc button {
	margin: 0;
	/* Padding matters as much as colour here: Astra pads buttons generously,
	   and on a small round arrow that padding squeezed the flex-laid-out svg
	   down to zero width, so the chevron was clipped and only the empty pill
	   showed. Components that want padding set their own below. */
	padding: 0;
	min-width: 0;
	min-height: 0;
	background: none;
	background-color: transparent;
	background-image: none;
	border: 0;
	border-radius: 0;
	color: inherit;
	font: inherit;
	line-height: inherit;
	letter-spacing: normal;
	text-transform: none;
	box-shadow: none;
}

.abpc button:hover,
.abpc button:focus,
.abpc button:active {
	background: none;
	background-color: transparent;
	background-image: none;
	border-color: transparent;
	color: inherit;
	box-shadow: none;
}

/* ------------------------------------------------------------- headings */

.abpc-head {
	margin: 0 0 22px;
}

.abpc-eyebrow {
	margin: 0 0 6px;
	color: var(--abpc-red);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.abpc-h2 {
	margin: 0 0 6px;
	color: var(--abpc-ink);
	font-size: clamp(28px, 4vw, 40px);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.02em;
}

.abpc-sub {
	margin: 0;
	color: var(--abpc-body);
	font-size: 15px;
}

/* --------------------------------------------------------------- buttons */

.abpc .abpc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 12px 22px;
	border: 1px solid transparent;
	border-radius: 10px;
	background: var(--abpc-soft);
	color: var(--abpc-ink);
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.abpc .abpc-btn:hover {
	transform: translateY(-1px);
}

.abpc .abpc-btn:focus-visible {
	outline: 3px solid rgba(225, 29, 46, 0.35);
	outline-offset: 2px;
}

.abpc .abpc-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
	transform: none;
}

.abpc .abpc-btn svg {
	flex: 0 0 auto;
}

.abpc .abpc-btn--primary {
	background: var(--abpc-red);
	color: #fff;
	box-shadow: 0 8px 20px -10px rgba(225, 29, 46, 0.9);
}

.abpc .abpc-btn--primary:hover {
	background: var(--abpc-red-dark);
	color: white !important;
}

.abpc .abpc-btn--dark {
	background: #111827;
	color: #fff;
}

.abpc .abpc-btn--dark:hover {
	background: #000;
}

.abpc .abpc-btn--muted {
	background: #f1f2f4;
	color: var(--abpc-ink);
}

.abpc .abpc-btn--muted:hover {
	background: #e7e9ec;
}

.abpc .abpc-btn--ghost {
	background: #fff;
	border-color: var(--abpc-line);
	color: var(--abpc-ink);
}

.abpc .abpc-btn--ghost:hover {
	border-color: #cbd0d8;
}

.abpc .abpc-btn--link {
	background: none;
	color: var(--abpc-body);
	padding: 12px 8px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.abpc .abpc-btn--lg {
	padding: 15px 30px;
	font-size: 16px;
	border-radius: 999px;
}

.abpc .abpc-btn--wide {
	flex: 1 1 0;
	min-width: 0;
}

.abpc .abpc-btn__arrow {
	display: inline-flex;
}

/* ----------------------------------------------------- preview showcase */

.abpc-showcase {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--abpc-rail-w);
	gap: 14px;
	align-items: start;
}

.abpc-hero {
	position: relative;
	margin: 0;
	min-height: 200px;
	border-radius: var(--abpc-radius);
	overflow: hidden;
	background: var(--abpc-soft);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
	line-height: 0;
}

.abpc-hero.is-filled {
	box-shadow: 0 0 0 2px #22c55e, 0 18px 40px -24px rgba(15, 23, 42, 0.5);
}

/* Switching billboards from the rail: a cover fades in over the whole panel,
   the billboard is swapped underneath, then the cover fades away. */
.abpc-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	background: var(--abpc-soft, #f4f5f7);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.abpc-hero.is-fading::after {
	opacity: 1;
}

/* The billboard photo sets the panel's shape. Nothing is cropped to a fixed
   ratio and nothing is laid over it: the photo is what the visitor is buying,
   so it is shown whole whether or not artwork has been added yet. */
.abpc-hero__img {
	display: block;
	width: 100%;
	height: auto;
}

/* "16:9 image" sits in the corner rather than across the picture. It takes the
   top-right corner because the green tick lives there too, and a panel is
   never both empty and filled. */
.abpc-hero__empty {
	position: absolute;
	inset-inline-end: 10px;
	top: 10px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 13px;
	border-radius: 999px;
	background: rgba(15, 23, 42, 0.78);
	color: #fff;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.3;
}

.abpc-hero__icon {
	display: inline-flex;
}

.abpc-hero__cap {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: 34px 16px 12px;
	background: linear-gradient(to top, rgba(2, 6, 23, 0.72), transparent);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
}

.abpc-num {
	position: absolute;
	top: 10px;
	inset-inline-start: 10px;
	z-index: 2;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	background: rgba(15, 23, 42, 0.82);
	color: #fff;
	font-size: 11.5px;
	font-weight: 800;
}

.abpc-tick {
	position: absolute;
	top: 10px;
	inset-inline-end: 10px;
	z-index: 2;
	width: 24px;
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #22c55e;
	color: #fff;
}

/* ------------------------------------------------------------ slot rail */

/* The rail shows a fixed number of billboards and scrolls for the rest, so a
   rotation of twenty cannot run off the bottom of the page. */
.abpc-rail-wrap {
	position: relative;
	min-height: 0;
}

.abpc-rail {
	display: flex;
	flex-direction: column;
	gap: var(--abpc-rail-gap);
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	padding-inline-end: var(--abpc-rail-pad);
	scrollbar-width: thin;
	scrollbar-color: #c3c8d0 transparent;
	cursor: grab;

	/* Each slot is the rail's inner width at 16:9, so the visible height is
	   that many slots plus the gaps between them. */
	max-height: calc(((var(--abpc-rail-w) - var(--abpc-rail-pad)) * 9 / 16) * var(--abpc-rail-visible) + var(--abpc-rail-gap) * (var(--abpc-rail-visible) - 1));
}

.abpc-rail.is-dragging {
	cursor: grabbing;
	scroll-behavior: auto;
	user-select: none;
}

.abpc-rail::-webkit-scrollbar {
	width: 7px;
	height: 7px;
}

.abpc-rail::-webkit-scrollbar-track {
	background: transparent;
}

.abpc-rail::-webkit-scrollbar-thumb {
	border-radius: 999px;
	background: #c3c8d0;
}

.abpc-rail::-webkit-scrollbar-thumb:hover {
	background: var(--abpc-muted);
}

/* Explicit size and stroke rather than currentColor: a theme that restyles
   svg or button colour must not be able to make the chevron disappear and
   leave a blank pill behind. */
.abpc .abpc-rail__nav svg {
	display: block;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	fill: none;
	stroke: var(--abpc-ink);
	stroke-width: 2.6;
	pointer-events: none;
}

.abpc .abpc-rail__nav:hover svg,
.abpc .abpc-rail__nav:focus-visible svg {
	stroke: #fff;
}

/* Arrow buttons, shown only when there is somewhere to scroll to. Kept narrow
   and centred so they hint at more billboards without covering one. */
.abpc .abpc-rail__nav {
	position: absolute;
	inset-inline-start: 50%;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 22px;
	margin-inline-start: -25px;
	border: 1px solid var(--abpc-line);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.96);
	color: var(--abpc-ink);
	cursor: pointer;
	box-shadow: 0 4px 12px -6px rgba(15, 23, 42, 0.5);
	transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

/* Ink rather than red on hover: red is the "this slot is filled" colour in the
   rail, and a red control sitting on top of the slots muddled the two. */
.abpc .abpc-rail__nav:hover,
.abpc .abpc-rail__nav:focus-visible {
	background: var(--abpc-ink);
	border-color: var(--abpc-ink);
	color: #fff;
}

.abpc-rail__nav--prev {
	top: 0;
}

.abpc-rail__nav--next {
	bottom: 0;
}

.abpc .abpc-slot {
	position: relative;
	display: block;
	/* Never let the flex column squash a slot to make the list fit: the rail
	   is meant to overflow and scroll, not to compress. */
	flex: 0 0 auto;
	width: 100%;
	padding: 0;
	border: 1px dashed #cfd4dc;
	border-radius: 12px;
	background: #eef0f3;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	cursor: pointer;
	transition: border-color 0.16s ease, transform 0.16s ease;
}

.abpc .abpc-slot:hover {
	transform: translateY(-1px);
	border-color: var(--abpc-muted);
}

.abpc .abpc-slot.is-filled {
	border: 2px solid #22c55e;
	background: #0f172a;
}

/* The billboard on show stays in the list, marked by its border alone so the
   rail never reshuffles under the visitor. */
.abpc .abpc-slot.is-current {
	border: 2px solid var(--abpc-ink);
	transform: none;
}

.abpc .abpc-slot.is-current.is-filled {
	border-color: var(--abpc-red);
}

.abpc .abpc-slot.is-current:hover {
	transform: none;
}

/* The slots stay a uniform size so the rail does not jump about, but the
   picture inside is fitted rather than cropped - a billboard photo that is not
   16:9 still shows in full. */
.abpc .abpc-slot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Empty slots show the billboard photo too - it is what the visitor is
   choosing between - with the placeholder reduced to a corner badge. */
.abpc-slot__empty {
	position: absolute;
	inset-inline-end: 5px;
	bottom: 5px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 7px;
	border-radius: 999px;
	background: rgba(15, 23, 42, 0.76);
	color: #fff;
	line-height: 1;
}

.abpc-slot__empty em {
	font-style: normal;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.01em;
}

.abpc .abpc-slot .abpc-num {
	top: 6px;
	inset-inline-start: 6px;
	min-width: 18px;
	height: 18px;
	font-size: 10.5px;
	border-radius: 5px;
}

.abpc .abpc-slot .abpc-tick {
	top: 6px;
	inset-inline-end: 6px;
	width: 19px;
	height: 19px;
}

/* -------------------------------------------------------------- actions */

.abpc-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 26px 0 8px;
}

/* --------------------------------------------------------------- brands */

.abpc-brands {
	margin-top: 34px;
	padding-top: 30px;
	border-top: 1px solid var(--abpc-line);
	text-align: center;
}

.abpc-brands__title {
	margin: 0 0 4px;
	color: var(--abpc-ink);
	font-size: 20px;
	font-weight: 800;
}

.abpc-brands__sub {
	margin: 0 0 18px;
	font-size: 14px;
	color: var(--abpc-body);
}

.abpc-brands__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

.abpc .abpc-brand {
	--abpc-brand: var(--abpc-red);

	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	width: 64px;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	cursor: pointer;
	transition: transform 0.16s ease;
}

.abpc .abpc-brand:hover {
	transform: translateY(-2px);
	background: none;
}

.abpc .abpc-brand:hover .abpc-brand__logo {
	border-color: #cbd0d8;
}

.abpc .abpc-brand.is-active .abpc-brand__logo {
	border-color: var(--abpc-brand);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--abpc-brand) 18%, transparent);
}

.abpc .abpc-brand.is-active .abpc-brand__name {
	color: var(--abpc-brand);
}

.abpc .abpc-brand__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border: 2px solid var(--abpc-line);
	border-radius: 10px;
	background: #fff;
	overflow: hidden;
	transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.abpc .abpc-brand__logo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.abpc .abpc-brand__initial {
	font-size: 17px;
	font-weight: 800;
	color: var(--abpc-ink);
}

.abpc .abpc-brand__name {
	color: var(--abpc-ink);
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	word-break: break-word;
}

.abpc .abpc-brands__desc {
	max-width: 680px;
	margin: 20px auto 0;
	color: var(--abpc-body);
	font-size: 14.5px;
	line-height: 1.65;
	text-align: center;
	white-space: pre-line;
}

.abpc .abpc-brands[hidden],
.abpc .abpc-brands__desc[hidden],
.abpc .abpc-brands__case[hidden] {
	display: none;
}

.abpc .abpc-brands__case {
	display: flex;
	justify-content: center;
	margin-top: 18px;
}

/* The case-study link wears the same red pill as "Build Your Campaign". */
.abpc .abpc-brands__case .abpc-btn {
	padding: 15px 30px;
	border-radius: 999px;
	background: var(--abpc-red);
	color: #fff;
	font-size: 16px;
	box-shadow: 0 8px 20px -10px rgba(225, 29, 46, 0.9);
}

.abpc .abpc-brands__case .abpc-btn:hover {
	background: var(--abpc-red-dark);
	color: #fff !important;
}

/* -------------------------------------------------------- build progress */

.abpc-head--build {
	margin-bottom: 16px;
}

.abpc-progress {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 16px 22px;
	margin-bottom: 22px;
	border: 1px solid var(--abpc-line);
	border-radius: 12px;
	background: #fff;
}

.abpc-progress__text {
	margin: 0;
	color: var(--abpc-ink);
	font-size: 14.5px;
	font-weight: 700;
}

.abpc-progress__bars {
	display: flex;
	gap: 6px;
	flex: 0 0 auto;
}

.abpc-progress__bar {
	width: 32px;
	height: 4px;
	border-radius: 999px;
	background: var(--abpc-line);
}

.abpc-progress__bar.is-on {
	background: var(--abpc-red);
}

/* ---------------------------------------------------------- build stage */

/* The arrows are positioned against the billboard picture itself, so they line
   up with its centre at any size. On a wide screen the frame's side padding
   gives them somewhere to sit outside the card; on a phone that padding goes
   and they move onto the picture. */
.abpc-frame {
	position: relative;
	padding-inline: 56px;
}

.abpc-stage-wrap {
	position: relative;
}

/* Prefixed with .abpc so a theme's own button styling cannot repaint these:
   Woodmart was giving them its accent fill and hiding the chevron inside. */
.abpc .abpc-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 4;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid #d7dbe1;
	border-radius: 50%;
	background: #fff;
	background-image: none;
	color: var(--abpc-ink);
	cursor: pointer;
	box-shadow: 0 6px 18px -10px rgba(15, 23, 42, 0.55);
	transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.abpc .abpc-nav svg {
	display: block;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	fill: none;
	stroke: var(--abpc-ink);
	stroke-width: 2.6;
	pointer-events: none;
}

.abpc .abpc-nav:hover:not(:disabled),
.abpc .abpc-nav:focus-visible:not(:disabled) {
	background: var(--abpc-red);
	border-color: var(--abpc-red);
	color: #fff;
	box-shadow: 0 10px 22px -10px rgba(225, 29, 46, 0.85);
}

.abpc .abpc-nav:disabled {
	opacity: 0.3;
	cursor: not-allowed;
	box-shadow: none;
}

/* Just outside the card, in the frame's side padding. */
.abpc .abpc-nav--prev {
	inset-inline-start: -54px;
}

.abpc .abpc-nav--next {
	inset-inline-end: -54px;
}

.abpc .abpc-nav:hover:not(:disabled) svg,
.abpc .abpc-nav:focus-visible:not(:disabled) svg {
	stroke: #fff;
}

.abpc-card {
	padding: 14px;
	border: 2px solid var(--abpc-red);
	border-radius: var(--abpc-radius);
	background: #fff;
}

.abpc-stage {
	position: relative;
	border-radius: 10px;
	overflow: hidden;
	background: #f4f5f7;
	line-height: 0;
}

/* Switching billboards: a solid cover fades in over the photo, artwork and
   overlay together, the billboard is swapped while fully covered, then the
   cover fades away. Fading the layers themselves would let the artwork show
   through the overlay for a moment. */
.abpc-stage::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background: #f4f5f7;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

.abpc-stage.is-fading::after {
	opacity: 1;
}

.abpc-stage__base,
.abpc-stage__overlay {
	display: block;
	width: 100%;
	height: auto;
}

.abpc-stage__overlay,
.abpc-stage__canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.abpc-stage__tag {
	position: absolute;
	top: 12px;
	inset-inline-start: 12px;
	z-index: 3;
	max-width: 60%;
	padding: 5px 11px;
	border-radius: 7px;
	background: rgba(15, 23, 42, 0.85);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.abpc-stage__tick {
	position: absolute;
	top: 12px;
	inset-inline-end: 12px;
	z-index: 3;
	width: 26px;
	height: 26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--abpc-red);
	color: #fff;
}

.abpc-stage__spinner {
	position: absolute;
	inset-inline-end: 12px;
	bottom: 12px;
	width: 20px;
	height: 20px;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: #fff;
	border-radius: 50%;
	opacity: 0;
	animation: abpc-spin 0.8s linear infinite;
}

@keyframes abpc-spin {
	to {
		transform: rotate(360deg);
	}
}

.abpc-card__ratio {
	margin: 12px 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: #6b7280;
	text-align: center;
}

.abpc-card__ratio[hidden] {
	display: none;
}

.abpc-card__actions {
	display: flex;
	gap: 10px;
	margin-top: 10px;
}

/* ------------------------------------------------------------- surfaces */

.abpc-surfaces {
	margin: 22px 0 4px;
	transition: opacity 0.15s ease;
}

.abpc-surfaces.is-fading {
	opacity: 0;
}

/* Shared label for the two strips under the stage. */
.abpc-strip__label {
	margin: 0 0 10px;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--abpc-muted);
}

.abpc-strip__label strong {
	color: var(--abpc-ink);
}

.abpc-strip__row {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	padding-bottom: 6px;
}

/* One card per green layer on the open billboard: same shape as the sequence
   strip, because it does the same job one level down. */
.abpc-cell {
	flex: 0 0 auto;
	width: 148px;
	border: 1px solid var(--abpc-line);
	border-radius: 10px;
	background: #fff;
	overflow: hidden;
	transition: border-color 0.16s ease, opacity 0.16s ease;
}

.abpc-cell.has-own {
	border-color: var(--abpc-red);
}

.abpc-cell.is-off {
	opacity: 0.5;
}

.abpc .abpc-cell__pick {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	border-bottom: 1px solid var(--abpc-line);
	border-radius: 0;
	background: #f4f5f7;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	cursor: pointer;
	transition: background 0.16s ease;
}

.abpc .abpc-cell__pick:hover {
	background: #e9ebef;
}

.abpc .abpc-cell__pick.is-filled {
	background: #0f172a;
}

.abpc .abpc-cell__pick img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.abpc .abpc-cell__pick .abpc-num {
	top: 5px;
	inset-inline-start: 5px;
	min-width: 17px;
	height: 17px;
	font-size: 10px;
	border-radius: 5px;
}

.abpc-cell__foot {
	padding: 8px 9px;
}

.abpc-cell__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.2;
}

.abpc-cell__text strong {
	color: var(--abpc-ink);
	font-size: 12.5px;
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.abpc-cell__text em {
	font-style: normal;
	font-size: 10.5px;
	color: var(--abpc-muted);
}

/* ---------------------------------------------- surface card internals */

.abpc-cell__empty {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	color: var(--abpc-muted);
}

.abpc-cell__plus {
	font-size: 19px;
	font-weight: 400;
	line-height: 1;
}

.abpc-cell__empty em {
	font-style: normal;
	font-size: 11.5px;
	font-weight: 600;
	max-width: 100%;
	padding: 0 6px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.abpc-cell__tick {
	position: absolute;
	top: 5px;
	inset-inline-end: 5px;
	width: 17px;
	height: 17px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--abpc-red);
	color: #fff;
}

/* ----------------------------------------------------------- build foot */

.abpc-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-top: 26px;
	padding-top: 20px;
	border-top: 1px solid var(--abpc-line);
}

.abpc-foot__count {
	margin: 0;
	color: var(--abpc-body);
	font-size: 14px;
	font-weight: 600;
}

.abpc-foot__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* ----------------------------------------------------------------- modal */

.abpc-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.abpc-modal__scrim {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.55);
}

.abpc-modal__box {
	position: relative;
	width: 100%;
	max-width: 440px;
	padding: 26px;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 30px 70px -20px rgba(2, 6, 23, 0.55);
}

.abpc .abpc-modal__x {
	position: absolute;
	top: 10px;
	inset-inline-end: 12px;
	width: 30px;
	height: 30px;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--abpc-muted);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.abpc .abpc-modal__x:hover {
	background: var(--abpc-soft);
	color: var(--abpc-ink);
}

.abpc-modal__title {
	margin: 0 0 10px;
	color: var(--abpc-ink);
	font-size: 19px;
	font-weight: 800;
}

.abpc-modal__text {
	margin: 0 0 16px;
	font-size: 14px;
}

.abpc-modal__note {
	margin: -8px 0 16px;
	font-size: 12.5px;
	color: var(--abpc-muted);
}

.abpc-modal__label {
	display: block;
	margin-bottom: 6px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--abpc-ink);
}

.abpc-modal__input {
	width: 100%;
	padding: 11px 13px;
	border: 1px solid var(--abpc-line);
	border-radius: 9px;
	font-size: 14.5px;
	color: var(--abpc-ink);
	background: #fff;
}

.abpc-modal__input:focus {
	outline: none;
	border-color: var(--abpc-red);
	box-shadow: 0 0 0 3px rgba(225, 29, 46, 0.16);
}

.abpc-modal__actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 18px;
}

/* ---------------------------------------------------------- busy + toast */

.abpc-busy {
	position: fixed;
	inset: 0;
	z-index: 100001;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(15, 23, 42, 0.5);
}

.abpc-busy__box {
	width: 100%;
	max-width: 340px;
	padding: 26px;
	border-radius: 14px;
	background: #fff;
	text-align: center;
	box-shadow: 0 30px 70px -20px rgba(2, 6, 23, 0.55);
}

.abpc-busy__spinner {
	display: inline-block;
	width: 26px;
	height: 26px;
	border: 3px solid var(--abpc-line);
	border-top-color: var(--abpc-red);
	border-radius: 50%;
	animation: abpc-spin 0.8s linear infinite;
}

.abpc-busy__text {
	margin: 12px 0 14px;
	color: var(--abpc-ink);
	font-size: 14.5px;
	font-weight: 700;
}

.abpc-busy__track {
	height: 5px;
	border-radius: 999px;
	background: var(--abpc-line);
	overflow: hidden;
}

.abpc-busy__bar {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 999px;
	background: var(--abpc-red);
	transition: width 0.25s ease;
}

.abpc-toast {
	position: fixed;
	inset-inline: 0;
	bottom: 26px;
	z-index: 100002;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	width: max-content;
	max-width: calc(100% - 40px);
	margin: 0 auto;
	padding: 13px 20px;
	border-radius: 999px;
	background: #111827;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}

.abpc-toast--error {
	background: #b3261e;
}

.abpc-toast.is-on {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.abpc-toast a {
	color: #fca5a5;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}

/* ----------------------------------------------------------- responsive */

@media (max-width: 900px) {
	.abpc-showcase {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Below the hero the rail runs sideways and scrolls horizontally. These
	   overrides carry the .abpc prefix so they outrank the desktop rules,
	   which need it themselves to beat the theme. */
	.abpc .abpc-rail {
		flex-direction: row;
		max-height: none;
		overflow-x: auto;
		overflow-y: hidden;
		padding-inline-end: 0;
		padding-bottom: 8px;
	}

	.abpc .abpc-slot {
		flex: 0 0 132px;
		width: 132px;
	}

	/* Swiping and the scrollbar are the natural way through a sideways strip,
	   so the arrows would only be in the way here. */
	.abpc .abpc-rail__nav {
		display: none;
	}
}

@media (max-width: 720px) {
	/* No room for a gutter, so the arrows move onto the picture: left and
	   right, still centred on it, translucent so the billboard shows through. */
	.abpc-frame {
		padding-inline: 0;
	}

	.abpc .abpc-nav {
		width: 40px;
		height: 40px;
		background: rgba(255, 255, 255, 0.9);
		backdrop-filter: blur(3px);
		border-color: rgba(255, 255, 255, 0.7);
	}

	.abpc .abpc-nav--prev {
		inset-inline-start: 10px;
	}

	.abpc .abpc-nav--next {
		inset-inline-end: 10px;
	}

	.abpc-card {
		padding: 10px;
	}

	.abpc-card__actions {
		flex-direction: column;
	}

	.abpc-progress {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.abpc-foot {
		flex-direction: column;
		align-items: stretch;
	}

	.abpc-foot__actions .abpc-btn {
		flex: 1 1 0;
	}
}

@media (prefers-reduced-motion: reduce) {

	.abpc *,
	.abpc *::before,
	.abpc *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}
/* ------------------------------------------------------------- loading */

/* While a billboard is on its way, its old photo and artwork are hidden so a
   new artwork is never shown over the previous billboard's photo. */
.abpc-stage.is-loading .abpc-stage__base,
.abpc-stage.is-loading .abpc-stage__canvas,
.abpc-stage.is-loading .abpc-stage__overlay,
.abpc-hero.is-loading .abpc-hero__img {
	visibility: hidden;
}

.abpc-stage > .abp-veil {
	background: #f1f5f9;
}

.abpc-hero > .abp-veil {
	background: var(--abpc-soft, #f1f5f9);
}

.abpc-busy__loader {
	width: 110px;
	height: 110px;
}

/* The featured brand is still on its way: keep the loader over the hero and
   hold back the bare billboard photos so they do not flash up first. */
.abpc.is-brand-loading .abpc-hero > .abp-veil {
	opacity: 1;
	visibility: visible;
	transition: none;
}

.abpc.is-brand-loading .abpc-hero__img,
.abpc.is-brand-loading .abpc-hero__empty,
.abpc.is-brand-loading .abpc-rail,
.abpc.is-brand-loading [data-role="coverage"] {
	visibility: hidden;
}

/* The panel takes the photo's shape before the photo arrives. */
.abpc-stage[style*="aspect-ratio"] .abpc-stage__base,
.abpc-hero[style*="aspect-ratio"] .abpc-hero__img {
	height: 100%;
	object-fit: cover;
}