/* ===== ACCSZONE x WHOER READY-MADE ACCOUNTS BANNER =====
   Design reference: Figma "AccsZone × Whoer.net Banner — Localizable Handoff",
   desktop frame 1440x750 (node 1:8), mobile frame 430x455 (node 2:6).

   WIDTH IS 1:1 WITH THE FRAME. The plate is 1440, the columns are 970 + 470,
   the outer paddings are 72 / 64 / 46 — all straight from Figma, so the gap
   between the content and the store panel is the one that was drawn.

   HEIGHT IS 450, WHICH IS OURS, NOT THE DESIGN'S (the frame is 750, the site's
   other big banners are 450). At 1:1 the content alone needs ~650px, so the
   vertical had to be rebuilt rather than scaled: see the three units on
   .accszone-banner below. Do not "simplify" them back into one — scaling the
   whole thing uniformly is what shrinks the content's width and tears the hole
   between the two columns that this layout exists to avoid.

   One DOM serves both frames. The desktop composition is a two-column grid
   (content column + store panel); below 900px everything collapses into the
   mobile column and the parts that only exist in one of the two frames are
   toggled with .accszone-banner__only-desktop / .accszone-banner__only-mobile.

   The handoff notes ask for the mobile switch at <=640px, but the store card's
   19px type scales down with the frame and is unreadable (~8px) by then, so the
   swap happens at 900px instead.

   Font: the Figma file uses Inter as a stand-in; per the notes we use the site
   stack (Manrope, self-hosted in /css/fonts.css, weights 200-800). */

.accszone-banner-wrap {
	max-width: 100%;
	width: 100%;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
	/* Painted behind the 1440-wide plate on wider screens. */
	background: #0e1523;
}

.accszone-banner {
	--color-bg: #0e1523;
	--color-panel: #131c30;
	--color-border: #26314b;
	--color-border-soft: #33405f;
	--color-chip: #182238;
	--color-text: #f3f4f6;
	--color-text-dim: #e7ebf2;
	--color-muted: #b6bdc9;
	--color-label: #8a94a8;
	--color-orange: #e08428;
	--color-orange-light: #e8933f;
	--color-green: #34d399;
	--color-card: #ffffff;
	--color-card-text: #111827;
	--color-card-key: #6b7280;
	--color-card-line: #eef1f5;

	/* THREE SCALES. Every measurement is a multiple of a unit, and the number
	   it is multiplied by is the Figma value / 14.4 (the 1440 baseline) — so a
	   declaration reads as "the design value, at this scale".

	   --u  1:1 with the Figma frame. Horizontal structure only: the 970/470
	        column split and the outer left/right paddings (72/64/46). This is
	        what keeps the banner 1440 wide and the gap between the two columns
	        exactly as drawn.
	   --c  0.8x. Everything that is a thing rather than a space: type, icons,
	        avatars, radii, component padding, row heights.
	   --s  0.35x. Structural vertical whitespace only: the top/bottom padding
	        of the three regions and the margin-top spacers between blocks.

	   Why the split: the frame has to be 450px tall (a product decision, not
	   from the design, where it is 750). At 1:1 the content alone needs ~650px,
	   so something has to give. Shrinking everything uniformly (the obvious
	   move) also shrinks the width the content occupies and tears a hole
	   between the columns — so instead the width stays 1:1, the content shrinks
	   a little (0.8) and the air between blocks absorbs the rest (0.35).
	   Measured at the cap: store column 442px, content column 410px — both
	   inside 450.

	   The @supports block below upgrades these to real container units; the vw
	   values are the fallback (exact while the banner spans the viewport, which
	   it does until the 1440 cap). They must never be
	   used on .accszone-banner itself: container units resolve against the *nearest
	   ancestor* container there, not against this element. Hence the extra
	   .accszone-banner__inner wrapper, which holds the whole composition. */
	--u: min(1vw, 14.4px);
	--c: calc(var(--u) * 0.8);
	--s: calc(var(--u) * 0.35);

	position: relative;
	display: block;
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	background-color: var(--color-bg);
	font-family: Manrope, 'Arial', sans-serif;
	color: var(--color-text);
	text-decoration: none;
	cursor: pointer;
}

@supports (container-type: inline-size) {
	.accszone-banner {
		container-type: inline-size;
		--u: 1cqw;
		/* --c / --s are defined off --u, so they follow on their own. */
	}
}

/* The whole banner is one link, so nothing inside it may re-style itself as one
   (and there are no nested <a> elements — the CTA and the chips are spans). */
.accszone-banner:hover,
.accszone-banner:focus,
.accszone-banner:active {
	color: var(--color-text);
	text-decoration: none;
}

.accszone-banner:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -4px;
}

.accszone-banner,
.accszone-banner *,
.accszone-banner *::before,
.accszone-banner *::after {
	box-sizing: border-box;
}

/* ---------- Frame ---------- */
.accszone-banner__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
	min-height: calc(var(--u) * 31.25); /* 450px */
}

.accszone-banner__head {
	grid-column: 1;
	grid-row: 1;
	/* Centred rather than top-aligned: the row is 1fr, so whatever height the
	   copy does not use is split above the brand row and below the chips,
	   instead of pooling into one gap above the trust row. */
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	/* Left/right 1:1 with the frame (72 / 64), top compressed. */
	padding: calc(var(--s) * 4.8611) calc(var(--u) * 4.4444) 0 calc(var(--u) * 5); /* 24.5 64 0 72 */
}

.accszone-banner__foot {
	grid-column: 1;
	grid-row: 2;
	/* Column so the CTA keeps its own line under the trust row and the
	   inline-flex button does not sit on a text baseline. */
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 0 calc(var(--u) * 4.4444) calc(var(--s) * 4.4444) calc(var(--u) * 5); /* 0 64 22.4 72 */
    padding-left: 0;
}
.accszone-banner__foot_mobile {
    display: none;
}

.accszone-banner__store {
	grid-column: 2;
	grid-row: 1 / span 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	/* Left/right 1:1 with the frame (46), top/bottom compressed. */
	padding: calc(var(--s) * 3.75) calc(var(--u) * 3.1944) calc(var(--s) * 2.7778); /* 18.9 46 14 */
	border-left: 1px solid var(--color-border);
	background: var(--color-panel);
}

/* Breakpoint-only pieces. Desktop is the default; the mobile media query
   flips both rules. */
.accszone-banner__only-mobile {
	display: none;
}

/* ---------- Brand row ---------- */
.accszone-banner__brand-row {
	display: flex;
	align-items: center;
	gap: calc(var(--c) * 0.9722); /* 11.2px */
}

.accszone-banner__brand {
	display: flex;
	align-items: center;
	gap: calc(var(--c) * 0.9722); /* 11.2px */
}

.accszone-banner__mark {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--c) * 3.75); /* 43.2px */
	height: calc(var(--c) * 3.75); /* 43.2px */
	border-radius: calc(var(--c) * 0.9722); /* 11.2px */
	background: var(--color-orange);
	font-weight: 800;
	font-size: calc(var(--c) * 2.0139); /* 23.2px */
	line-height: 1;
	color: #fff;
}

.accszone-banner__name {
	font-weight: 800;
	font-size: calc(var(--c) * 2.5); /* 28.8px */
	line-height: 1.2;
	letter-spacing: calc(var(--c) * -0.0347); /* -0.4px */
	color: var(--color-text);
	white-space: nowrap;
}

.accszone-banner__pill {
	display: flex;
	align-items: center;
	gap: calc(var(--c) * 0.6944); /* 8px */
	padding: calc(var(--c) * 0.7639) calc(var(--c) * 1.6667); /* 8.8 19.2px */
	border: 1px solid var(--color-border-soft);
	border-radius: calc(var(--c) * 2.7778); /* 32px */
	background: var(--color-chip);
	white-space: nowrap;
}

.accszone-banner__pill-label {
	font-weight: 800;
	font-size: calc(var(--c) * 1.0764); /* 12.4px */
	line-height: 1.2;
	letter-spacing: calc(var(--c) * 0.1111); /* 1.28px */
	color: var(--color-text-dim);
}

.accszone-banner__pill-since {
	font-weight: 700;
	font-size: calc(var(--c) * 1.0764); /* 12.4px */
	line-height: 1.2;
	letter-spacing: calc(var(--c) * 0.0833); /* 0.96px */
	color: #7e88a0;
}

/* ---------- Headline ---------- */
.accszone-banner__title {
	margin: 0;
	font-weight: 800;
	font-size: calc(var(--c) * 5.4167); /* 62.4px */
	line-height: 1.1;
	letter-spacing: calc(var(--c) * -0.1736); /* -2px */
	color: var(--color-text);
}

/* The highlighted word lives in the translation dictionary as <b>…</b>, so each
   language can place the accent where its own word order needs it. */
.accszone-banner__title b {
	font-weight: inherit;
	color: var(--color-orange-light);
}

/* Desktop: the second line is its own, slightly smaller line. */
.accszone-banner__title-suffix {
	display: block;
	font-size: calc(var(--c) * 4.4444); /* 51.2px */
	line-height: 1.125;
	letter-spacing: calc(var(--c) * -0.1389); /* -1.6px */
}

/* ---------- Subline ---------- */
.accszone-banner__subtitle {
	margin: 0;
	font-weight: 600;
	font-size: calc(var(--c) * 1.875); /* 21.6px */
	line-height: 1.25;
	color: var(--color-muted);
}

/* ---------- Platform chips ---------- */
.accszone-banner__chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: calc(var(--c) * 0.8333); /* 9.6px */
}

.accszone-banner__chip {
	display: flex;
	align-items: center;
	padding: calc(var(--c) * 0.7639) calc(var(--c) * 1.6667); /* 8.8 19.2px */
	border: 1px solid var(--color-border-soft);
	border-radius: calc(var(--c) * 2.0833); /* 24px */
	background: var(--color-chip);
	font-weight: 700;
	font-size: calc(var(--c) * 1.3889); /* 16px */
	line-height: 1.2;
	letter-spacing: calc(var(--c) * 0.0139); /* 0.16px */
	color: var(--color-text-dim);
	white-space: nowrap;
}

.accszone-banner__chip--more {
	border-color: #6b4e2a;
	background: #1d1d2a;
	color: #f0a050;
}

/* Mobile counterpart of the chip row. */
.accszone-banner__platforms {
	margin: 0;
	font-weight: 700;
	font-size: 13.5px;
	line-height: 1.2;
	letter-spacing: 0.2px;
	color: #a6afc2;
}

/* ---------- Trust row ---------- */
.accszone-banner__trust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: calc(var(--c) * 2.0833); /* 24px */
}

.accszone-banner__trust-item {
	display: flex;
	align-items: center;
	gap: calc(var(--c) * 0.625); /* 7.2px */
	font-weight: 700;
	font-size: calc(var(--c) * 1.4931); /* 17.2px */
	line-height: 1.2;
	letter-spacing: calc(var(--c) * 0.0069); /* 0.08px */
	color: #d9dee8;
	white-space: nowrap;
}

.accszone-banner__check {
	flex-shrink: 0;
	width: calc(var(--c) * 1.3889); /* 16px */
	height: calc(var(--c) * 1.3889); /* 16px */
}

/* The checks that live inside a text run ("In stock", "SMS"). Sized in em so
   they track the surrounding type on both frames, and coloured by
   currentColor — green inside the green status lines, near-black inside the
   card's spec values. Deliberately NOT the same class as the trust-row check:
   that one is resized in px inside the mobile block, which would win over
   any em sizing here. */
.accszone-banner__check-inline {
	flex-shrink: 0;
	width: 0.78em;
	height: 0.78em;
	margin-left: 0.3em;
	vertical-align: -0.06em;
}

/* Same icon standing alone as a value, with nothing to sit after. */
.accszone-banner__check-inline--bare {
	margin-left: 0;
}

/* ---------- CTA ---------- */
.accszone-banner__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: calc(var(--c) * 0.9722); /* 11.2px */
	margin-top: calc(var(--s) * 1.5278); /* 7.7px spacer */
	padding: calc(var(--c) * 1.6667) calc(var(--c) * 3.0556); /* 19.2 35.2px */
	border-radius: calc(var(--c) * 0.8333); /* 9.6px */
	background: var(--color-orange);
	font-weight: 800;
	font-size: calc(var(--c) * 1.875); /* 21.6px */
	line-height: 1.2;
	letter-spacing: calc(var(--c) * 0.0139); /* 0.16px */
	color: #fff;
	white-space: nowrap;
	transition:
		filter 0.15s ease,
		transform 0.15s ease;
}

.accszone-banner:hover .accszone-banner__btn {
	filter: brightness(1.06);
}

.accszone-banner:active .accszone-banner__btn {
	transform: translateY(1px);
}

.accszone-banner__btn-arrow {
	flex-shrink: 0;
	width: calc(var(--c) * 1.7569); /* 20.24px */
	height: calc(var(--c) * 1.1181); /* 12.88px */
}

/* ---------- Store column ---------- */
.accszone-banner__store-header {
	margin: 0;
	font-weight: 800;
	font-size: calc(var(--c) * 1.0069); /* 11.6px */
	line-height: 1.25;
	letter-spacing: calc(var(--c) * 0.1806); /* 2.08px */
	color: var(--color-label);
}

/* Avatars are flat gradient circles in the design (no artwork), so they are
   drawn in CSS instead of shipping two more SVG requests. */
.accszone-banner__avatar {
	flex-shrink: 0;
	border-radius: 50%;
	background: linear-gradient(135deg, #e08428 0%, #f2b368 71.4%);
}

.accszone-banner__avatar--lg {
	width: calc(var(--c) * 3.75); /* 43.2px */
	height: calc(var(--c) * 3.75); /* 43.2px */
}

.accszone-banner__avatar--sm {
	width: calc(var(--c) * 2.7778); /* 32px */
	height: calc(var(--c) * 2.7778); /* 32px */
	opacity: 0.85;
}

/* ---------- Hero product card ---------- */
.accszone-banner__card {
	width: 100%;
	margin-top: calc(var(--s) * 1.5278); /* 7.7px spacer */
	padding: calc(var(--c) * 1.8056) calc(var(--c) * 1.9444); /* 20.8 22.4px */
	border-radius: calc(var(--c) * 1.3889); /* 16px */
	background: var(--color-card);
	color: var(--color-card-text);
}

.accszone-banner__card-head {
	display: flex;
	align-items: center;
	gap: calc(var(--c) * 1.1111); /* 12.8px */
}

.accszone-banner__card-title {
	display: flex;
	flex-direction: column;
	gap: calc(var(--c) * 0.2083); /* 2.4px */
	min-width: 0;
}

.accszone-banner__card-product {
	font-weight: 800;
	font-size: calc(var(--c) * 1.6667); /* 19.2px */
	line-height: 1.2;
	color: var(--color-card-text);
}

.accszone-banner__card-status {
	font-weight: 700;
	font-size: calc(var(--c) * 1.1458); /* 13.2px */
	line-height: 1.2;
	color: var(--color-green);
}

.accszone-banner__specs {
	display: flex;
	flex-direction: column;
	margin-top: calc(var(--c) * 0.8333); /* 9.6px */
	font-size: calc(var(--c) * 1.3194); /* 15.2px */
	line-height: 1.2;
}

.accszone-banner__spec {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(var(--c) * 0.8333); /* 9.6px */
	min-height: calc(var(--c) * 2.3611); /* 27.2px */
	padding: calc(var(--c) * 0.625) 0; /* 7.2px */
	border-top: 1px solid var(--color-card-line);
}

.accszone-banner__spec-key {
	font-weight: 400;
	color: var(--color-card-key);
}

.accszone-banner__spec-value {
	font-weight: 800;
	color: var(--color-card-text);
	white-space: nowrap;
}

.accszone-banner__card-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: calc(var(--c) * 3.3333); /* 38.4px */
	margin-top: calc(var(--c) * 0.8333); /* 9.6px */
	padding: calc(var(--c) * 0.9028) calc(var(--c) * 0.8333); /* 10.4 9.6px */
	border-radius: calc(var(--c) * 0.6944); /* 8px */
	background: #fdf1e3;
	font-weight: 800;
	font-size: calc(var(--c) * 1.3194); /* 15.2px */
	line-height: 1.2;
	color: #b4661b;
	text-align: center;
}

/* ---------- Queue rows ---------- */
.accszone-banner__queue {
	display: flex;
	align-items: center;
	gap: calc(var(--c) * 0.9722); /* 11.2px */
	width: 100%;
	min-height: calc(var(--c) * 5); /* 57.6px */
	margin-top: calc(var(--s) * 0.9722); /* 4.9px spacer */
	padding: calc(var(--c) * 1.1111) calc(var(--c) * 1.3889); /* 12.8 16px */
	border: 1px solid var(--color-border-soft);
	border-radius: calc(var(--c) * 1.1111); /* 12.8px */
	background: var(--color-chip);
}

.accszone-banner__queue-text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: calc(var(--c) * 0.1389); /* 1.6px */
	min-width: 0;
}

.accszone-banner__queue-product {
	font-weight: 800;
	font-size: calc(var(--c) * 1.3194); /* 15.2px */
	line-height: 1.2;
	color: var(--color-text-dim);
}

/* Left to wrap rather than truncate: RU/DE/FR run past the 378px row and the
   store column has slack above the footer, so the row grows like the rest of
   the auto-layout instead of cutting the product name off. */
.accszone-banner__queue-meta {
	font-weight: 700;
	font-size: calc(var(--c) * 1.0069); /* 11.6px */
	line-height: 1.2;
	color: var(--color-label);
}

.accszone-banner__queue-status {
	flex-shrink: 0;
	font-weight: 800;
	font-size: calc(var(--c) * 1.1806); /* 13.6px */
	line-height: 1.2;
	color: var(--color-green);
	white-space: nowrap;
}

/* ---------- Store footer ---------- */
.accszone-banner__store-footer {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	/* Pushed to the bottom of the panel — the Figma "flex spacer". */
	margin: auto 0 0;
	padding-top: calc(var(--c) * 1.25); /* 14.4px */
	border-top: 1px solid var(--color-border);
	font-weight: 800;
	font-size: calc(var(--c) * 0.9028); /* 10.4px */
	line-height: 1.25;
	letter-spacing: calc(var(--c) * 0.125); /* 1.44px */
	color: var(--color-label);
	text-align: center;
}

/* ============================================================
   MOBILE — the 430x455 frame, stretched full width (20px sides),
   trimmed to 450px min-height to match the desktop frame's 450px

   The store panel keeps only the hero product card; the panel
   chrome (header, queue rows, footer) and the desktop-only copy
   are dropped, exactly as in the mobile frame. Type is in px
   here, not in --u: the mobile frame is content-driven and has
   to stay readable on every phone width.
   ============================================================ */
@media (max-width: 900px) {
	.accszone-banner {
		container-type: normal;
		max-width: 100%;
	}

	.accszone-banner__only-desktop {
		display: none;
	}

	.accszone-banner__only-mobile {
		display: inline;
	}

	.accszone-banner__inner {
		display: flex;
		flex-direction: row;
		min-height: 450px;
		padding: 22px 20px 18px;
	}
	.accszone-banner__head,
	.accszone-banner__foot,
	.accszone-banner__store {
		width: 100%;
		padding: 0;
		border: 0;
		background: none;
	}

	/* Trust row + CTA sit at the bottom of the frame. */
	.accszone-banner__foot {
		margin-top: 13px;
		padding-top: 13px;
        display: none;
	}

    .accszone-banner__foot_mobile {
        display: block;
    }

	/* ---------- Brand row ---------- */
	.accszone-banner__brand-row {
		justify-content: space-between;
		gap: 12px;
		min-height: 36px;
	}

	.accszone-banner__brand {
		gap: 9px;
	}

	.accszone-banner__mark {
		width: 32px;
		height: 32px;
		border-radius: 8px;
		font-size: 18px;
	}

	.accszone-banner__name {
		font-size: 22px;
		letter-spacing: -0.3px;
	}

	.accszone-banner__pill {
		flex-shrink: 0;
		padding: 6px 13px;
		border-radius: 20px;
	}

	.accszone-banner__pill-label {
		font-size: 9.5px;
		letter-spacing: 1.2px;
		color: #c7cfdd;
	}

	/* ---------- Headline ---------- */
	.accszone-banner__title {
		font-size: 35px;
		line-height: 1.17;
		letter-spacing: -1.2px;
	}

	/* One size, one flow: the copy wraps by itself. */
	.accszone-banner__title-suffix {
		display: inline;
		margin-top: 0;
		font-size: inherit;
		line-height: inherit;
		letter-spacing: inherit;
	}

	/* ---------- Platform line ---------- */
	.accszone-banner__platforms {
		display: block;
		margin-top: 9px;
	}

	/* ---------- Hero product card ---------- */
	.accszone-banner__card {
		margin-top: 16px;
		padding: 15px 17px;
		border-radius: 16px;
	}

	.accszone-banner__card-head {
		gap: 13px;
	}

	.accszone-banner__avatar--lg {
		width: 44px;
		height: 44px;
	}

	.accszone-banner__card-product {
		font-size: 18px;
	}

	.accszone-banner__card-status {
		font-size: 13px;
	}

	/* Three key/value pairs on one line, one hairline above them all. */
	.accszone-banner__specs {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 6px 14px;
		margin-top: 11px;
		padding-top: 10px;
		border-top: 1px solid var(--color-card-line);
		font-size: 13px;
	}

	.accszone-banner__spec {
		justify-content: flex-start;
		gap: 5px;
		min-height: 0;
		padding: 0;
		border-top: 0;
	}

	.accszone-banner__spec-key {
		font-weight: 700;
	}

	/* ---------- Trust row ---------- */
	.accszone-banner__trust {
		gap: 10px 22px;
	}

	.accszone-banner__trust-item {
		gap: 5px;
		font-size: 13.5px;
		letter-spacing: 0;
	}

	.accszone-banner__check {
		width: 13.12px;
		height: 13.12px;
	}

	/* ---------- CTA ---------- */
	.accszone-banner__btn {
		width: 100%;
		min-height: 54px;
		margin-top: 13px;
		padding: 10px 16px;
		gap: 10px;
		border-radius: 12px;
		font-size: 19px;
		letter-spacing: 0;
		white-space: normal;
		text-align: center;
	}

	.accszone-banner__btn-arrow {
		width: 20.9px;
		height: 13.3px;
	}
}

/* Narrow phones: the CTA label and the platform line are the first things to
   run out of room. */
@media (max-width: 380px) {
	.accszone-banner__inner {
		padding-inline: 16px;
	}

	.accszone-banner__title {
		font-size: clamp(28px, 8.5vw, 35px);
	}

	.accszone-banner__platforms {
		font-size: 12.5px;
	}

	.accszone-banner__btn {
		font-size: 17px;
	}
}