/*
 * Homepage (.ap-lp) styles — extracted verbatim from the inline
 * <style> in page-templates/landing-page-sandbox.php (task 0033 Phase 0,
 * 2026-08-17). SHARED source: the sandbox links this file AND the live
 * front-page template (page-templates/landing-page.php) will enqueue it,
 * so sandbox + live can't drift (same move as product-page-list.css).
 * Built against Figma frame 1543:3448 ("Homepage", AGO-Design).
 *
 * url() paths are relative to this file's assets/css/ location →
 * ../img/sandbox/ (the 4 mock hero/collection backgrounds; these get
 * replaced by real data when the hero + collections wire up in Phase 4).
 */
/* Landing-page body — built against Figma frame 1543:3448 ("Homepage",
   AGO-Design). `.ap-lp` is registered in the below-fold footer `:is()`
   list in chrome-styles.php, so header + this wrapper fill exactly
   100vh and the footer starts at the fold.

   The frame decomposes as: Navigation → delegated to sandbox header;
   black footer band (Susikurk savo + APRANGOS brand-row + legal +
   socials) → delegated to sandbox footer. This file owns everything
   between: hero, USP bar, club rail, product rail, collections. */

/* ── Hero ─────────────────────────────────────────────────────────────
   Full-bleed 1920×860 image band directly under the 72px header.
   The photo is zoomed past cover in the design (2048px wide at the
   1920 frame = 106.67%), so an explicit background-size preserves the
   designed crop at every viewport; percentage position keeps the
   designed offset (x 50%, y 6.85%) proportional. The design-file mask
   is a plain 1920×860 rect — no rounding, so no mask needed. */
.ap-lp__hero {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: var(--space-64, 64px);
	box-sizing: border-box;
	aspect-ratio: 1920 / 860;
	min-height: 480px;
	padding: var(--space-64, 64px) var(--grid-margin, 96px) var(--space-128, 128px);
	background-color: var(--gray-950, #191919);
	background-image:
		linear-gradient(180deg, rgba(0, 0, 0, 0) 25%, #000 100%),
		url('../img/sandbox/lp-hero.jpg');
	background-repeat: no-repeat, no-repeat;
	background-size: auto, 106.67% auto;
	background-position: 0 0, 50% 6.85%;
}
/* UTMA × AGO slide — Figma 1895:5171 ("image 52", 1920×860 at y=72 =
   exactly the slide slot). The node is the photo alone, cut to the
   slot, so `cover` at 50/50 is a 1:1 placement at 1920 and the same
   crop scales with the band. The shared gradient scrim stays: the node
   carries no title/CTA, but the slide component does, and the copy
   needs the dark floor. Same inline-style contract as the live hero
   (admin-fed slides set background-image inline) — on the sandbox the
   mock is a modifier, not inline, so the mobile `cover` rule below
   applies unchanged. */
.ap-lp__hero--utma {
	background-image:
		linear-gradient(180deg, rgba(0, 0, 0, 0) 25%, #000 100%),
		url('../img/sandbox/lp-hero-utma.jpg');
	background-size: auto, cover;
	background-position: 0 0, 50% 50%;
}
.ap-lp__hero__title {
	margin: 0;
	color: var(--text-white, #FFF);
	text-align: center;
}

/* ── Hero carousel chrome ─────────────────────────────────────────────
   The frame mounts the hero as a carousel (nodes 1563:3511 + 1563:3499):
   a single NEXT arrow — the 60×60 round tertiary IconButton, same
   recipe as the PDP's `.ap-pp__back` — pinned to the right grid margin
   and vertically centered on the hero band; and four 24×2 white dashes
   (active full opacity, rest 35%) centered 40px above the hero's
   bottom edge. The frame draws only the NEXT arrow; the owner asked
   for a mirrored PREV on the left as well — same 180°-rotated-chevron
   recipe as the rails' prev button. The carousel rewinds at the ends
   so both arrows always advance. Slides are mock duplicates of the BC Rytas hero
   until real campaign data exists (same static stand-in contract as
   the rails). */
.ap-lp__hero-carousel {
	position: relative;
}
.ap-lp__hero-carousel__prev,
.ap-lp__hero-carousel__next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: inline-flex;
	padding: 20px;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	border: 0;
	border-radius: var(--radius-999, 999px);
	background: var(--icon-button-tertiary-background-enabled, rgba(255, 255, 255, 0.5));
	cursor: pointer;
}
.ap-lp__hero-carousel__prev {
	left: var(--grid-margin, 96px);
}
.ap-lp__hero-carousel__next {
	right: var(--grid-margin, 96px);
}
.ap-sandbox .ap-lp__hero-carousel__prev:hover,
.ap-sandbox .ap-lp__hero-carousel__prev:focus,
.ap-sandbox .ap-lp__hero-carousel__prev:focus-visible,
.ap-sandbox .ap-lp__hero-carousel__prev:active,
.ap-sandbox .ap-lp__hero-carousel__next:hover,
.ap-sandbox .ap-lp__hero-carousel__next:focus,
.ap-sandbox .ap-lp__hero-carousel__next:focus-visible,
.ap-sandbox .ap-lp__hero-carousel__next:active {
	background-color: var(--icon-button-tertiary-background-enabled, rgba(255, 255, 255, 0.5));
	color: inherit;
	border-color: transparent;
	outline: none;
	box-shadow: none;
}
.ap-lp__hero-carousel__icon {
	display: inline-flex;
	width: 20px;
	height: 20px;
}
.ap-lp__hero-carousel__icon img {
	display: block;
	width: 100%;
	height: 100%;
}
.ap-lp__hero-carousel__prev .ap-lp__hero-carousel__icon img {
	transform: rotate(180deg);
}
/* Swiper stamps `swiper-pagination-bullets swiper-pagination-horizontal`
   onto the pagination el at init, and the CDN stylesheet positions that
   combo at `left: 0; width: 100%; bottom: 8px` (0,2,0) — which beats a
   single class and shoves the translateX(-50%) row half a viewport off
   screen. Scope under `.ap-sandbox` (0,2,0 + later in cascade) and
   re-declare width so the centered row wins. */
.ap-sandbox .ap-lp__hero-carousel__pagination {
	position: absolute;
	left: 50%;
	width: auto;
	bottom: var(--space-40, 40px);
	transform: translateX(-50%);
	z-index: 2;
	display: flex;
	align-items: center;
	gap: var(--space-4, 4px);
}
/* Swiper's default bullets are 8×8 dark circles — restyle to the
   frame's 24×2 white dashes. Margin reset kills the CDN stylesheet's
   per-bullet 4px side margins, which also outgun a two-class selector
   (0,2,1) — the `.ap-sandbox` scope keeps this at 0,3,0. The flex gap
   above owns spacing. */
.ap-sandbox .ap-lp__hero-carousel__pagination .swiper-pagination-bullet {
	display: block;
	width: 24px;
	height: 2px;
	margin: 0;
	border-radius: var(--radius-999, 999px);
	background: var(--basic-white, #FFF);
	opacity: 0.35;
	cursor: pointer;
	transition: opacity 250ms ease-out;
}
.ap-sandbox .ap-lp__hero-carousel__pagination .swiper-pagination-bullet-active {
	opacity: 1;
}

/* ── Shared white CTA button ──────────────────────────────────────────
   Tertiary (white) button, 235×60, Outfit 16/1.5 medium — same recipe
   as the footer's "Pradėti" CTA (chrome-styles.php) with the design's
   20px inline padding + fixed min-width. Five-property brand-wash lock
   on hover/focus/active so multi-brand-uni can't repaint it. */
.ap-lp__btn {
	display: inline-flex;
	box-sizing: border-box;
	min-width: 235px;
	height: 60px;
	padding: 18px 20px;
	justify-content: center;
	align-items: center;
	gap: var(--space-8, 8px);
	border: 0;
	border-radius: var(--radius-15, 15px);
	background: var(--button-tertiary-background-enabled, #FFF);
	color: var(--text-primary, #191919);
	text-decoration: none;
	cursor: pointer;
	font-family: var(--font-family-ui, 'Outfit', sans-serif);
	font-size: var(--font-size-16, 16px);
	font-weight: var(--font-weight-medium, 500);
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
}
.ap-sandbox .ap-lp__btn:hover,
.ap-sandbox .ap-lp__btn:focus,
.ap-sandbox .ap-lp__btn:focus-visible,
.ap-sandbox .ap-lp__btn:active {
	background-color: var(--button-tertiary-background-hover, #F5F5F5);
	color: var(--text-primary, #191919);
	border-color: transparent;
	outline: none;
	box-shadow: none;
}

/* ── USP bar ──────────────────────────────────────────────────────────
   Full-bleed gray-900 band under the hero: three benefit items
   (icon 48 + title/sub stack) separated by 1px gray-700 dividers. */
.ap-lp__usp {
	padding: var(--space-32, 32px) var(--grid-margin, 96px);
	background: var(--gray-900, #262626);
}
.ap-lp__usp__track {
	display: flex;
	align-items: stretch;
	gap: var(--space-64, 64px);
}
/* Marquee clones (landing-page.js doubles the track content for the
   mobile auto-scroll loop) stay out of the desktop composition.
   Chained to the track for (0,2,0) — item clones also match the later
   `.ap-lp__usp__item { display: flex }` at equal single-class weight. */
.ap-lp__usp__track > .ap-lp__usp__clone {
	display: none;
}
.ap-lp__usp__item {
	display: flex;
	flex: 1 0 0;
	min-width: 0;
	justify-content: center;
	gap: var(--space-16, 16px);
}
/* Items are links into the delivery & returns page (per-topic anchors).
   No hover affordance per design — the look is identical to the old
   static items. All brand-wash states pinned so multi-brand-uni's
   accent never leaks in. */
.ap-sandbox a.ap-lp__usp__item,
.ap-sandbox a.ap-lp__usp__item:hover,
.ap-sandbox a.ap-lp__usp__item:focus,
.ap-sandbox a.ap-lp__usp__item:focus-visible,
.ap-sandbox a.ap-lp__usp__item:active {
	color: inherit;
	background-color: transparent;
	text-decoration: none;
	border: 0;
	outline: none;
	box-shadow: none;
}
.ap-lp__usp__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	flex-shrink: 0;
}
.ap-lp__usp__title {
	margin: 0;
	color: var(--text-white, #FFF);
}
.ap-lp__usp__sub {
	margin: 0;
	color: var(--text-muted, #D4D4D4);
}
.ap-lp__usp__divider {
	width: 1px;
	align-self: stretch;
	background: var(--gray-700, #454545);
	flex-shrink: 0;
}

/* ── Rail sections (clubs + products) ─────────────────────────────────
   Both rails ARE the `.ap-pp__collection` component from the shared
   product-page stylesheet — header row, 60×60 outline nav buttons
   (prev = the chevron-right asset rotated 180°, transparent-pinned
   hover), Swiper grid, 5px scrollbar, and the mobile bleed layout all
   come from there unmodified. The only landing deltas are the homepage
   frame's vertical rhythm: 96px above each rail head, and no bottom
   padding (the PDP's 192px) because the next section's own 96px top
   margin owns that gap here. */
.ap-lp .ap-pp__collection {
	margin-top: var(--space-96, 96px);
	padding-bottom: 0;
}

/* ── Club tiles ("Pasirink savo komandą") ─────────────────────────────
   Six 3:4 gray-100 tiles fill the row at desktop: 5 scrolling logo
   tiles + the "Sukurk savo" tile PINNED as a non-scrolling column at
   the row's end (it sits OUTSIDE the Swiper, as a flex sibling of the
   grid, so slides scroll beside it while it never moves). The pinned
   column's flex-basis mirrors the Swiper slides-per-view ladder at
   every breakpoint — with k slides visible plus the pinned column,
   each of the k+1 columns is (100% − 4px·k) / (k+1), which makes the
   pinned tile exactly one slide wide. The full-width slider sits
   below the row (Swiper accepts an external scrollbar el), so the
   track still spans the whole content width per the frame.
   Logo spans 55% of the tile width (156.67/284.67), centered. */
.ap-lp__clubs-row {
	display: flex;
	gap: var(--space-4, 4px);
	align-items: stretch;
}
/* Flex min-content trap: the swiper must be allowed to shrink below
   its slides' intrinsic width or the row overflows the section. */
.ap-lp__clubs-row .ap-pp__collection__grid {
	flex: 1 1 auto;
	min-width: 0;
	/* Swiper's bundle CSS centers `.swiper` via auto margins; when the
	   few-clubs cap below frees row space, those margins would absorb it
	   and shove the grid right, un-gluing the create tile. */
	margin-left: 0;
	margin-right: 0;
}
/* Few clubs: when every club fits in view (n ≤ the breakpoint's
   slides-per-view), pinning the create tile at the row's end leaves a
   hole between it and the last club. Cap the swiper to exactly n slots
   instead, so the tile glues on as the (n+1)th column. landing-page.js
   mirrors this by clamping slidesPerView to n and publishes n as
   --ap-lp-clubs-n (these rules are inert until it does). */
.ap-lp__clubs-row:not(:has(.swiper-slide:nth-child(2))) .ap-pp__collection__grid {
	flex: 0 0 calc(var(--ap-lp-clubs-n) * (100% - 8px) / 2.2 + (var(--ap-lp-clubs-n) - 1) * var(--space-4, 4px));
}
@media (min-width: 640px) {
	.ap-lp__clubs-row:not(:has(.swiper-slide:nth-child(3))) .ap-pp__collection__grid {
		flex: 0 0 calc(var(--ap-lp-clubs-n) * (100% - 8px) / 3 + (var(--ap-lp-clubs-n) - 1) * var(--space-4, 4px));
	}
}
@media (min-width: 960px) {
	.ap-lp__clubs-row:not(:has(.swiper-slide:nth-child(4))) .ap-pp__collection__grid {
		flex: 0 0 calc(var(--ap-lp-clubs-n) * (100% - 12px) / 4 + (var(--ap-lp-clubs-n) - 1) * var(--space-4, 4px));
	}
}
@media (min-width: 1200px) {
	.ap-lp__clubs-row:not(:has(.swiper-slide:nth-child(6))) .ap-pp__collection__grid {
		flex: 0 0 calc(var(--ap-lp-clubs-n) * (100% - 20px) / 6 + (var(--ap-lp-clubs-n) - 1) * var(--space-4, 4px));
	}
}
/* Scrollbar lives outside `.ap-pp__collection__grid` here, so the
   shared stylesheet's selectors don't reach it — same recipe, scoped
   to the clubs rail. */
.ap-lp__rail--clubs > .swiper-scrollbar {
	position: relative;
	left: auto;
	bottom: auto;
	width: 100%;
	height: 5px;
	margin-top: var(--space-48, 48px);
	border-radius: var(--radius-999, 999px);
	background: var(--slider-background, #F0F0F0);
}
.ap-lp__rail--clubs > .swiper-scrollbar .swiper-scrollbar-drag {
	height: 5px;
	flex-shrink: 0;
	background: var(--slider-pin-background, #191919);
	border-radius: var(--radius-999, 999px);
}
.ap-lp__club {
	display: flex;
	box-sizing: border-box;
	aspect-ratio: 3 / 4;
	align-items: center;
	justify-content: center;
	background: var(--gray-100, #F0F0F0);
	text-decoration: none;
}
.ap-sandbox .ap-lp__club:hover,
.ap-sandbox .ap-lp__club:focus,
.ap-sandbox .ap-lp__club:focus-visible,
.ap-sandbox .ap-lp__club:active {
	background-color: var(--gray-100, #F0F0F0);
	color: inherit;
	outline: none;
	box-shadow: none;
	text-decoration: none;
}
.ap-lp__club__logo {
	width: 55%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}
/* "Sukurk savo" tile — colorful jersey (Figma 1672-4953) and a
   full-logo-width primary button below. Mobile-first flex-basis
   ladder mirrors the Swiper breakpoints (1.2 / 2 / 3 / 5 slides). */
.ap-lp__club--create {
	flex-direction: column;
	gap: var(--space-24, 24px);
}
/* The pinned-column basis ladder applies only while the tile is the
   row's direct child (desktop). On mobile landing-page.js moves the
   tile INTO the swiper-wrapper as the last slide — there Swiper owns
   its width, and an unscoped flex-basis (resolved against the huge
   wrapper) would blow it up. */
.ap-lp__clubs-row > .ap-lp__club--create {
	flex: 0 0 calc((100% - 8px) / 2.2);
}
@media (min-width: 640px) {
	.ap-lp__clubs-row > .ap-lp__club--create { flex-basis: calc((100% - 8px) / 3); }
}
@media (min-width: 960px) {
	.ap-lp__clubs-row > .ap-lp__club--create { flex-basis: calc((100% - 12px) / 4); }
}
@media (min-width: 1200px) {
	.ap-lp__clubs-row > .ap-lp__club--create { flex-basis: calc((100% - 20px) / 6); }
}
/* Jersey fills a 131:156 box at 46% of the tile (131/284.67 per the
   frame); the source PNG is taller than the box, so it center-crops
   via cover — same crop the design applies. */
.ap-lp__club__jersey {
	display: block;
	width: 46%;
	aspect-ratio: 131 / 156;
	object-fit: cover;
}
.ap-lp__club__cta {
	display: inline-flex;
	box-sizing: border-box;
	width: 55%;
	/* 55% of a narrow tile can fall below the label + padding; border-box
	   would eat the padding first, so floor the button at its content. */
	min-width: max-content;
	height: 40px;
	padding: var(--space-8, 8px) var(--space-12, 12px);
	align-items: center;
	justify-content: center;
	gap: var(--space-8, 8px);
	border: 0;
	border-radius: var(--radius-10, 10px);
	background: var(--button-primary-background-enabled, #191919);
	color: var(--text-white, #FFF);
	text-decoration: none;
	white-space: nowrap;
}
.ap-sandbox .ap-lp__club__cta:hover,
.ap-sandbox .ap-lp__club__cta:focus,
.ap-sandbox .ap-lp__club__cta:focus-visible,
.ap-sandbox .ap-lp__club__cta:active {
	background-color: var(--button-primary-background-hover, #262626);
	color: var(--text-white, #FFF);
	border-color: transparent;
	outline: none;
	box-shadow: none;
	text-decoration: none;
}

/* ── Product cards ("Naujausios prekės") ──────────────────────────────
   The card IS `.ap-pp__collection__item` (media 3:4 + title + price
   stack from the shared stylesheet) — landing only makes it a link and
   fills the media with the frame's studio photos. Each modifier's
   background-size/-position pair reproduces the designed zoom + crop
   (percentages derived from the frame's mask offsets, so the crop
   holds at any rendered size). */
.ap-lp__product {
	text-decoration: none;
}
.ap-sandbox .ap-lp__product:hover,
.ap-sandbox .ap-lp__product:focus,
.ap-sandbox .ap-lp__product:focus-visible,
.ap-sandbox .ap-lp__product:active {
	color: inherit;
	outline: none;
	box-shadow: none;
	text-decoration: none;
}
.ap-lp__product__media {
	background-repeat: no-repeat;
	background-color: var(--gray-100, #F0F0F0);
}
.ap-lp__product__media--1 {
	background-size: 207.3% auto;
	background-position: 46.76% 11.93%;
}
.ap-lp__product__media--2 {
	background-size: 199.3% auto;
	background-position: 46.33% 12.36%;
}
.ap-lp__product__media--3 {
	background-size: 186.8% auto;
	background-position: 44.71% 95.33%;
}
.ap-lp__product__media--4 {
	background-size: 186.8% auto;
	background-position: 47.02% 93.83%;
}

/* ── Collections ("AGO kolekcijos") ───────────────────────────────────
   Centered display title over three 3:4 photo cards. Bottom gradient
   (transparent→black over the lower half) carries the white
   Heading/LG title + white CTA, anchored 64px above the card's bottom
   edge (frame: content top 516 of 760). Design draws 69px between
   title and cards — normalized to the 64 token. The BE1 card uses the
   design's motion-blur photo layer; the red flat-lay beneath it is
   fully occluded in the frame, so it isn't shipped. 192px gap to the
   brand-statement section per the frame. */
.ap-lp__collections {
	margin: var(--space-96, 96px) var(--grid-margin, 96px) var(--space-192, 192px);
}
.ap-lp__collections__title {
	margin: 0 0 var(--space-64, 64px);
	color: var(--text-primary, #191919);
	text-align: center;
}
.ap-lp__collections__grid {
	display: flex;
	gap: var(--space-4, 4px);
}
/* Editable, curated collections (task 0033 Phase 4b): the row is a
   three-across band. Every card is sized to a third REGARDLESS of how
   many there are — the sandbox always mocks exactly 3, and with the old
   `flex: 1 0 0` a live row holding one card stretched it to the full
   page width, which `aspect-ratio: 3/4` then turned into a card taller
   than the viewport (staging, 2026-09-15: one UTMA card). Fewer than 3
   cards now leave the remainder of the row empty instead of inflating.
   More than 3 → the row scrolls horizontally, same third-width pin, so
   ~3 show at once. Desktop only — the mobile rule below stacks the grid,
   where a main-axis basis would size HEIGHT, not width. */
@media (min-width: 769px) {
	.ap-lp__collections__grid > .ap-lp__collection {
		flex: 0 1 calc((100% - 2 * var(--space-4, 4px)) / 3);
	}
}
.ap-lp__collections__grid--scroll {
	overflow-x: auto;
	scroll-snap-type: x proximity;
}
@media (min-width: 769px) {
	.ap-lp__collections__grid--scroll > .ap-lp__collection {
		flex: 0 0 calc((100% - 2 * var(--space-4, 4px)) / 3);
		scroll-snap-align: start;
	}
}
.ap-lp__collection {
	position: relative;
	display: flex;
	flex: 1 0 0;
	min-width: 0;
	box-sizing: border-box;
	aspect-ratio: 3 / 4;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: var(--space-24, 24px);
	padding: 0 var(--space-48, 48px) var(--space-64, 64px);
	background-color: var(--gray-950, #191919);
	background-repeat: no-repeat, no-repeat;
	text-decoration: none;
}
.ap-sandbox .ap-lp__collection:hover,
.ap-sandbox .ap-lp__collection:focus,
.ap-sandbox .ap-lp__collection:focus-visible,
.ap-sandbox .ap-lp__collection:active {
	color: inherit;
	outline: none;
	box-shadow: none;
	text-decoration: none;
}
.ap-lp__collection--premium {
	background-image:
		linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, #000 100%),
		url('../img/sandbox/lp-collection-premium.jpg');
	background-size: auto, 156.28% auto;
	background-position: 0 0, 25.11% 0%;
}
.ap-lp__collection--be1 {
	background-image:
		linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, #000 100%),
		url('../img/sandbox/lp-collection-be1.jpg');
	background-size: auto, 156.28% auto;
	background-position: 0 0, 56.51% 2.36%;
}
/* UTMA × AGO tile — Figma 1888:5153 ("UtmaxAgo 1", 577×762): the node
   is the photo itself, dropped at the tile's size (0.757 ≈ the 3:4
   slot), so cover + centre reproduces the designed crop; no zoom or
   offset like the two tiles above. */
.ap-lp__collection--utma {
	background-image:
		linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, #000 100%),
		url('../img/sandbox/lp-collection-utma.jpg');
	background-size: auto, cover;
	background-position: 0 0, 50% 50%;
}
.ap-lp__collection__title {
	margin: 0;
	color: var(--text-white, #FFF);
	text-align: center;
}

/* ── Brand statement ("Apranga sportui") ──────────────────────────────
   Centered text section between the collections and the footer band
   (frame nodes 1563:3557/3558): AGO wordmark (125×56) over the XL
   heading, 24px apart, then two Body/MD paragraphs in --text-secondary
   32px below. Copy spans the middle six columns (--grid-col4-inset;
   the design file draws 832px at 1920, our grid gives ≈848 — the
   standing grid-margin caveat). The frame separates the paragraphs
   with a blank line — one 16/1.5 line ≈ the 24 token. 192px above
   (the collections' bottom margin) and 192px down to the footer. */
.ap-lp__about {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-32, 32px);
	/* Top margin so the about block keeps its section gap even when the
	   preceding collections section is empty/omitted (admin-curated →
	   can be absent). Sections are in normal flow, so this collapses with
	   the collections' 192px bottom margin when collections IS present
	   (design unchanged) and provides the gap from the products rail when
	   it isn't (task 0033). */
	margin: var(--space-192, 192px) 0;
	padding: 0 var(--grid-col4-inset, 536px);
	text-align: center;
}
.ap-lp__about__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-24, 24px);
}
.ap-lp__about__logo {
	width: 125px;
	height: 56px;
	object-fit: contain;
}
.ap-lp__about__title {
	margin: 0;
	color: var(--text-primary, #191919);
}
.ap-lp__about__body p {
	margin: 0;
	color: var(--text-secondary, #5C5C5C);
}
.ap-lp__about__body p + p {
	margin-top: var(--space-24, 24px);
}

/* ── USP marquee breakpoint ───────────────────────────────────────────
   The three-column USP band needs real width — below ~1024px the sub
   copy wraps word-per-line, so the marquee takes over earlier than the
   rest of the mobile block: a single auto-scrolling row instead of a
   squeezed three-column band. landing-page.js doubles the track content
   (with seam dividers), so a translateX(-50%) loop wraps seamlessly;
   per-child right margins replace the flex gap so both halves are
   width-identical. Duration comes from JS (constant px/s regardless of
   copy length), with a fixed fallback. The JS media query mirrors this
   1024px cut — keep them in sync. */
@media (max-width: 1024px) {
	.ap-lp__usp {
		padding: var(--space-32, 32px) 0;
		overflow: hidden;
	}
	.ap-lp__usp__track {
		width: max-content;
		gap: 0;
		/* The 2.5s delay holds the row still on entry so the visitor can
		   read it before it starts drifting; it applies once — the
		   infinite loop then never pauses (an eased start inside the
		   keyframes would re-ease every cycle and pulse at the wrap). */
		animation: ap-lp-usp-marquee var(--ap-lp-usp-marquee-duration, 24s) linear 2.5s infinite;
		/* Resting inset — without it the first item sits flush against
		   the viewport edge until the loop starts. A margin (not padding)
		   phase-shifts the whole band uniformly, so it doesn't enter the
		   track's width and the -50% wrap stays seamless: every cycle
		   restarts with the same 24px lead-in. */
		margin-left: var(--grid-margin, 24px);
	}
	.ap-lp__usp__track > * {
		margin-right: var(--space-24, 24px);
	}
	.ap-lp__usp__track > .ap-lp__usp__clone {
		display: flex;
	}
	/* Mobile items stack: 32px icon over a centered text block
	   (Figma node 1752-4645). Icon assets are wider than 32 — contain
	   them inside the box instead of letting the intrinsic size win. */
	.ap-lp__usp__item {
		flex: 0 0 auto;
		flex-direction: column;
		align-items: center;
		gap: var(--space-4, 4px);
		text-align: center;
	}
	.ap-lp__usp__icon {
		width: 32px;
		height: 32px;
	}
	.ap-lp__usp__icon img {
		max-width: 100%;
		max-height: 100%;
		width: auto;
		height: auto;
	}
	.ap-lp__usp__title,
	.ap-lp__usp__sub {
		white-space: nowrap;
	}
	/* Mobile frame tightens the sub to 1.25 (20px) — the body-md
	   utility's 24px leading pads the stacked item by 4px otherwise. */
	.ap-lp__usp__sub {
		line-height: 1.25;
	}
}

/* ── Mobile ───────────────────────────────────────────────────────────
   The mobile homepage is a separate Figma frame (not yet provided) —
   this block only keeps the desktop composition usable on small
   screens: the PLP's established `--font-size-*` remap on the page
   wrapper (type-* classes untouched), fixed-width rail tiles so the
   carousels actually overflow, and stacked collection cards. (The USP
   marquee has its own 1024px breakpoint above.) Revisit against the
   mobile frame. */
@media (max-width: 768px) {
	.ap-lp {
		--font-size-58: 34px;
		--font-size-44: 34px;
		--font-size-22: 20px;
		--font-size-20: 16px;
	}
	/* The mobile USP frame (Figma 1752-4645) keeps its title on the
	   full 20px token — exempt the band from the page-wide 20→16 remap. */
	.ap-lp__usp {
		--font-size-20: 20px;
	}
	.ap-lp__hero {
		aspect-ratio: auto;
		min-height: 420px;
		gap: var(--space-32, 32px);
		padding-bottom: var(--space-64, 64px);
		/* Default mobile treatment: cover-crop the (landscape) desktop
		   image so the hero never shows the gray-950 band below a
		   width-fitted photo. Applies to every slide — the inline style
		   only carries background-image, size/position live here. */
		background-size: auto, cover;
		background-position: 0 0, 50% 50%;
	}
	/* Slide with a dedicated mobile image (admin's "Mobilus vaizdas"):
	   swap the photo layer, keep the same gradient scrim. !important is
	   required — the desktop composite is an inline style on the slide,
	   which nothing at stylesheet level outranks otherwise. */
	.ap-lp__hero--has-mobile {
		background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 25%, #000 100%), var(--ap-lp-hero-mobile) !important;
	}
	.ap-lp__collections__grid {
		flex-direction: column;
	}
	.ap-lp__collection {
		padding: 0 var(--space-24, 24px) var(--space-48, 48px);
	}
	/* --grid-col4-inset is meaningless on the 2-column mobile grid
	   (3 steps in lands past center) — fall back to the page margin,
	   same as `.ap-info` does. */
	.ap-lp__about {
		padding: 0 var(--grid-margin, 24px);
		/* Desktop's 192px section gap is oversized on mobile — 64px
		   above and below. The collections' bottom margin collapses with
		   the about's top one, so it must shrink to 64 as well or it
		   would win the collapse and keep the gap at 192. */
		margin: var(--space-64, 64px) 0;
	}
	.ap-lp__collections {
		margin-bottom: var(--space-64, 64px);
	}
	/* Clubs row on mobile — the shared stylesheet's bleed layout pads
	   the grid and margins its right edge, but here the pinned column
	   (not the grid) ends the row, so the row owns the insets and the
	   grid's own bleed is reset. External scrollbar matches the shared
	   3px mobile track. */
	.ap-lp__clubs-row {
		padding: 0 var(--grid-margin, 24px);
	}
	.ap-lp__clubs-row .ap-pp__collection__grid {
		padding-left: 0;
		margin-right: 0;
	}
	.ap-lp__rail--clubs > .swiper-scrollbar,
	.ap-lp__rail--clubs > .swiper-scrollbar .swiper-scrollbar-drag {
		height: 3px;
	}
	.ap-lp__rail--clubs > .swiper-scrollbar {
		margin-left: var(--grid-margin, 24px);
		margin-right: var(--grid-margin, 24px);
		width: auto;
	}
}

/* USP marquee loop — the JS-doubled track makes -50% exactly one full
   copy, so the wrap is invisible. Honor reduced motion: freeze the
   loop and let the row be swiped manually instead. */
@keyframes ap-lp-usp-marquee {
	to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.ap-lp__usp { overflow-x: auto; }
	.ap-lp__usp__track { animation: none; }
}