/* Tenant products-list body wrapper — owns the page-level 96px horizontal
   inset that all subsequent rows align to (matches the footer's inset, so
   the left edge runs straight through page and footer). Vertical rhythm
   is owned by each row's own top margin; the breadcrumb already ships
   `margin: 64px 0 24px` from `_breadcrumbs.scss`, so the 64px gap from
   the header's bottom edge falls out automatically when it's the first
   child. No box-sizing here — there are no width constraints to honour
   yet. */
.ap-tpl {
	padding: 0 96px;
}

/* Breadcrumb override — on the tenant list page the trail centres on the
   x-axis instead of hugging the left edge (the product-page sandbox keeps
   the left-aligned default from `_breadcrumbs.scss`). Also drop the
   bottom margin from 24px → 16px so the gap to the tenant title matches
   the spec. Both overrides scoped under `.ap-tpl` so the other sandboxes
   are untouched. */
.ap-tpl .ap-breadcrumbs {
	justify-content: center;
	margin-bottom: 16px;
}

/* Tenant title — uses the shared `.type-heading-xl` token (Special Gothic
   Expanded One 58/1.1, 0.025em tracking, uppercase). This rule only owns
   centring, primary colour, and the 64px gap to the next row. */
.ap-tpl__title {
	margin: 0 0 64px;
	color: var(--text-primary, #191919);
	text-align: center;
}

/* Filter row — single flex row with the product count anchored to the
   page's left edge and the view-toggle + "Filtruoti ir rūšiuoti" pill
   anchored to the right edge. `margin-left: auto` on the view-toggle
   absorbs the leftover space between the count and the controls so the
   count hugs the left inset regardless of how wide the right group
   grows. 32px between the view-toggle group and the filter pill comes
   from the row's `gap`. The 96px page inset on both sides is owned by
   `.ap-tpl`'s padding. */
.ap-tpl__filter-row {
	display: flex;
	align-items: center;
	gap: 32px;
}

/* Product count — sits at the left edge of the filter row. Typography
   is `.type-body-sm-medium` (Outfit 14/500/150%, no tracking, natural
   case) applied via the utility class on the element; this rule only
   owns colour and the zeroed margin (collapsing Astra's default
   paragraph margins so the row's flex baseline doesn't shift). */
.ap-tpl__count {
	margin: 0;
	color: var(--text-tertiary, #787878);
}

/* View-toggle group — two icon-only buttons for wide / narrow display
   modes (radiogroup semantics, `aria-pressed` toggled). 8px between
   them; brand-wash defang lives on the buttons themselves below. */
.ap-tpl__view-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
}
.ap-tpl__view-button {
	display: flex;
	padding: 14px;
	align-items: center;
	gap: 10px;
	border: 0;
	border-radius: 0; /* Astra paints a global radius on <button>; pin to 0 so the hit area is a clean square */
	background: transparent;
	cursor: pointer;
}
.ap-tpl__view-button__icon {
	display: inline-flex;
	width: 20px;
	height: 20px;
}
.ap-tpl__view-button__icon img {
	display: block;
	width: 100%;
	height: 100%;
}
/* Five-property brand-wash lock — pinned to resting at every state so
   neither multi-brand-uni nor Astra's button globals can repaint the
   toggle on hover/focus/active. Scoped under `.ap-sandbox` (0,3,0) to
   beat the universal `.ap-sandbox button:hover` kill (0,2,1). */
.ap-sandbox .ap-tpl__view-button:hover,
.ap-sandbox .ap-tpl__view-button:focus,
.ap-sandbox .ap-tpl__view-button:focus-visible,
.ap-sandbox .ap-tpl__view-button:active {
	background-color: transparent;
	color: inherit;
	border-color: transparent;
	outline: none;
	box-shadow: none;
}

/* Filter/sort button — secondary-style 48px pill (12px radius). Icon
   left, label right, 8px between them via the button's own `gap`. Type:
   Outfit 16/500/150%, no uppercase, no tracking. If a second instance
   of this exact spec shows up we should promote it to a shared
   `.ap-button--secondary`. */
.ap-tpl__filter-button {
	display: flex;
	height: 48px;
	padding: 12px 16px;
	justify-content: center;
	align-items: center;
	gap: var(--space-8, 8px);
	border: 0;
	border-radius: 12px;
	background: var(--button-secondary-background-enabled, #F0F0F0);
	color: var(--text-primary, #191919);
	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;
	cursor: pointer;
}
.ap-tpl__filter-button__icon {
	display: inline-flex;
	width: 20px;
	height: 20px;
}
.ap-tpl__filter-button__icon img {
	display: block;
	width: 100%;
	height: 100%;
}
/* Five-property brand-wash lock — pinned to resting (gray-50 fill, primary
   text, no ring) so multi-brand-uni's brand-wash can't repaint the pill on
   hover/focus/active. Scoped under `.ap-sandbox` (0,3,0) to beat the
   universal `.ap-sandbox button:hover` kill (0,2,1). */
.ap-sandbox .ap-tpl__filter-button:hover,
.ap-sandbox .ap-tpl__filter-button:focus,
.ap-sandbox .ap-tpl__filter-button:focus-visible,
.ap-sandbox .ap-tpl__filter-button:active {
	background-color: var(--button-secondary-background-enabled, #F0F0F0);
	color: var(--text-primary, #191919);
	border-color: transparent;
	outline: none;
	box-shadow: none;
}

/* Products grid — 24px below the filter row. Reuses the existing
   `.ap-pp__header__mega__product` card component (chrome-styles.php)
   for its anchor + flex-column + brand-wash-locked shape; this rule
   only owns the grid track + the larger photo slot (the mega-menu
   instance is 322×427). If a third instance shows up later we should
   promote `--large` / `--xl` modifiers into the chrome stylesheet and
   register them in the brandbook (see `feedback_brandbook_track_variants`).

   Two layouts driven by the `.ap-tpl__view-toggle` radiogroup:
     • Wide (default)   — 3 cards per row.
     • Narrow (toggled) — 4 cards per row.
   The toggle's `data-view-button="narrow"` button gets `aria-pressed="true"`
   when active; `:has()` on `.ap-tpl` swaps the track count. Tracks are
   `1fr` so every row runs flush from the outer edge of grid column 1
   to the outer edge of column 12 (`.ap-tpl`'s 96px padding matches
   `--grid-margin`) at ANY viewport — the Figma 570/429px card widths
   are what these tracks resolve to at the 1920 design frame. Fixed
   pixel tracks are what previously dropped rows to 2/3 cards on
   sub-1920 viewports. Cards fill their track; `aspect-ratio: 95/126`
   derives the photo height. The horizontal 4px / vertical 64px gutters
   and the 24px / 192px outer margins are shared between both layouts.
   The view switch is a discrete relayout (track counts don't
   interpolate) — the old token-transition animation only ever animated
   up to an unavoidable wrap-point flicker, so nothing smooth was
   lost. */
.ap-tpl__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 64px 4px;
	margin: 24px 0 192px;
}
.ap-tpl:has([data-view-button="narrow"][aria-pressed="true"]) .ap-tpl__grid {
	grid-template-columns: repeat(4, 1fr);
}
.ap-tpl__grid .ap-pp__header__mega__product,
.ap-tpl__grid .ap-pp__header__mega__product:visited {
	flex: 0 0 auto;
	width: 100%;
}
.ap-tpl__grid .ap-pp__header__mega__product__media {
	width: 100%;
	height: auto;
	aspect-ratio: 95 / 126;
}

/* Filter drawer — opens on `.ap-tpl__filter-button` click. Same overlay
   architecture as `.ap-pp__combo-modal` on the product page: fixed
   full-viewport stage at z-index 1102 (above the sticky header), dim
   scrim behind a right-anchored drawer (left edge on grid column 8)
   that slides in from the edge. Backdrop click or Escape closes it. Body gets `overflow: hidden`
   while open so the underlying grid doesn't scroll behind the drawer. */
.ap-tpl__filter-modal {
	position: fixed;
	inset: 0;
	z-index: 1102;
	overflow: hidden;
	pointer-events: none;
}
.ap-tpl__filter-modal.is-open {
	pointer-events: auto;
}
body.ap-tpl__filter-modal-open { overflow: hidden; }

.ap-tpl__filter-modal__backdrop {
	position: absolute;
	inset: 0;
	/* Light dim scrim — see `feedback_backdrops_use_light_token`. */
	background: var(--backdrop-background-light, rgba(10, 10, 10, 0.30));
	cursor: pointer;
	opacity: 0;
	transition: opacity 360ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ap-tpl__filter-modal.is-open .ap-tpl__filter-modal__backdrop {
	opacity: 1;
}

/* Right-anchored drawer reaching left to the left edge of grid column
   8 (the 5th column from the right) — the shared left edge for every
   side drawer on the site. The `100%` basis is the fixed inset-0
   wrapper, which spans the viewport, so the token's own `100%`
   resolves against the same box. The mobile block
   below replaces this with a full-width bottom sheet. */
.ap-tpl__filter-modal__drawer {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: calc(100% - var(--grid-col8-inset, 1123px));
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 48px 64px 32px;
	box-sizing: border-box;
	background: var(--drawer-background, var(--basic-white, #FFF));
	/* Content taller than the drawer scrolls inside it — body scroll is
	   locked while open, so without this the actions row is unreachable.
	   Same contract as the search-modal / sizes-table panels; the mobile
	   bottom sheet (max-height: 90vh) inherits it. */
	overflow-y: auto;
	transform: translateX(100%);
	transition: transform 360ms cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}
.ap-tpl__filter-modal.is-open .ap-tpl__filter-modal__drawer {
	transform: translateX(0);
}

/* Bottom-sheet grabber — mobile-only affordance. Hidden on desktop where
   the drawer slides in from the side. The mobile rule below flips it
   visible, centres it, and pins the 12px gap to the header. */
.ap-tpl__filter-modal__grabber {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.ap-tpl__filter-modal__backdrop,
	.ap-tpl__filter-modal__drawer,
	.ap-tpl__filter-modal__panel { transition: none; }
}

/* Filter drawer header — title left, close pill right. Sits at the top
   of the column-flex drawer (no margin needed — drawer padding owns the
   top inset). Title uses `.type-heading-md` via the utility class; this
   rule only zeroes the heading margin and pins the colour so Astra's
   default h2 margins don't shift the close pill's vertical centre. */
.ap-tpl__filter-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.ap-tpl__filter-modal__title {
	margin: 0;
	color: var(--text-primary, #191919);
}

/* Close pill — semi-transparent white, 999px radius. Same shape as
   `.ap-pp__lightbox__close` (14px padding here vs 20px there). The
   five-property brand-wash lock below scoped under `.ap-sandbox` (0,3,0)
   beats the universal `.ap-sandbox button:hover` kill (0,2,1). */
.ap-tpl__filter-modal__close {
	display: inline-flex;
	padding: 14px;
	align-items: center;
	gap: 10px;
	box-sizing: border-box;
	border: 0;
	border-radius: 999px;
	background: var(--icon-button-tertiary-background-enabled, rgba(255, 255, 255, 0.50));
	cursor: pointer;
}
.ap-tpl__filter-modal__close__icon {
	display: inline-flex;
	width: 20px;
	height: 20px;
}
.ap-tpl__filter-modal__close__icon img {
	display: block;
	width: 100%;
	height: 100%;
}
.ap-sandbox .ap-tpl__filter-modal__close:hover,
.ap-sandbox .ap-tpl__filter-modal__close:focus,
.ap-sandbox .ap-tpl__filter-modal__close:focus-visible,
.ap-sandbox .ap-tpl__filter-modal__close:active {
	background-color: var(--icon-button-tertiary-background-enabled, rgba(255, 255, 255, 0.50));
	color: inherit;
	border-color: transparent;
	outline: none;
	box-shadow: none;
}

/* Dividers inside the drawer don't carry the global `.ap-pp__divider`'s
   default 32px top margin — gap above is owned by the preceding element's
   bottom inset instead. The only exception is the first divider (right
   after the header), which needs 48px from the header's bottom edge per
   spec. */
.ap-tpl__filter-modal__drawer .ap-pp__divider {
	margin-top: 0;
}
.ap-tpl__filter-modal__drawer > .ap-pp__divider:first-of-type {
	margin-top: 48px;
}

/* Filter modal section — wraps one accordion row (head + collapsible
   body). 18px above the section-head and 18px below the last child,
   so the dividers that sandwich the section sit 18px away from its
   visible content. No border-bottom — sections are visually separated
   by their flanking `<hr class="ap-pp__divider">` siblings, not by an
   internal line (the product page's `.ap-pp__details__item` was the
   wrong choice here because it bakes in a separator line that doesn't
   fit this spec). */
.ap-tpl__filter-modal__section {
	padding: 18px 0;
}

/* Slide-drawer reveal — `.ap-tpl__filter-modal__panel` is the clipping
   wrapper around the options group; flips between `max-height: 1000px`
   (large enough to never clip real content) when expanded and `0` when
   collapsed. `overflow: hidden` clips the inner so its content slides
   cleanly behind the section-head as the panel closes. 220ms ease-out
   — Apple-HIG range. The inner owns the 16px gap above its content
   (was the section-head's `margin-bottom: 16px` from chrome-styles);
   baked into the inner's `padding-top` so the gap collapses with the
   panel — no leftover whitespace after the slide. The chrome rule is
   overridden below for this section only.

   Why not the `grid-template-rows: 0fr ↔ 1fr` trick: with a non-zero
   `padding-top` on a grid-item inner, some browsers (and earlier
   tested setups here) leave the padding visually rendered even at
   the 0fr endpoint. `max-height: 0` + `overflow: hidden` is
   unambiguous — the box clips to 0 across browsers. */
.ap-tpl__filter-modal__panel {
	overflow: hidden;
	max-height: 1000px;
	transition: max-height 220ms ease-out;
}
.ap-pp__section-head[aria-expanded="false"] + .ap-tpl__filter-modal__panel {
	max-height: 0;
}
.ap-tpl__filter-modal__panel__inner {
	padding-top: 16px;
}
.ap-tpl__filter-modal__section .ap-pp__section-head[aria-expanded="true"] {
	margin-bottom: 0;
}

/* Sort-options group — radio rows nested under the "Rūšiuoti pagal"
   accordion. 12px gap between rows; the 16px gap above is owned by
   the panel-inner's `padding-top` (see slide-drawer rules above). */
.ap-tpl__filter-modal__sort-options {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Size-options grid — reuses the `.ap-pp__size-option` chip primitive
   from the product page. 6 columns per row, 8px gap both axes. The
   chip primitive uses `flex: 1` which is inert inside a grid; grid
   items default to `stretch`, so each chip fills its column track
   without extra rules. */
.ap-tpl__filter-modal__size-options {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 8px;
}

/* Sort-option row — custom radio. The 20×20 marker (rendered via
   `background-image` so the SVG itself owns its colours and we don't
   need any inner element) swaps between unchecked and checked based on
   the row's `aria-pressed` state. 8px gap between marker and label.
   Typography: `.type-body-md-regular` via the utility class on the
   element. */
.ap-tpl__filter-modal__sort-option {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--text-primary, #191919);
	cursor: pointer;
	text-align: left;
	letter-spacing: 0;
	text-transform: none;
}
.ap-tpl__filter-modal__sort-option::before {
	content: '';
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	background-image: url('../img/sandbox/radio-unchecked.svg');
	background-repeat: no-repeat;
	background-position: center;
}
.ap-tpl__filter-modal__sort-option[aria-pressed="true"]::before {
	background-image: url('../img/sandbox/radio-checked.svg');
}
/* Five-property brand-wash lock — scoped under `.ap-sandbox` (0,3,0)
   to beat the universal `.ap-sandbox button:hover` kill (0,2,1). */
.ap-sandbox .ap-tpl__filter-modal__sort-option:hover,
.ap-sandbox .ap-tpl__filter-modal__sort-option:focus,
.ap-sandbox .ap-tpl__filter-modal__sort-option:focus-visible,
.ap-sandbox .ap-tpl__filter-modal__sort-option:active {
	background-color: transparent;
	color: var(--text-primary, #191919);
	border-color: transparent;
	outline: none;
	box-shadow: none;
}

/* Filter drawer action row — pinned to the bottom of the column-flex
   drawer via `margin-top: auto`, so the two buttons stick to the bottom
   no matter how much filter content lands above them. 16px gap between
   the two buttons; 20/80 width split via flex ratios on the buttons
   themselves (clear = 1, apply = 4). */
.ap-tpl__filter-modal__actions {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: auto;
}

/* Shared button shape — both buttons are 60px tall with 18/20 padding,
   15px radius, and Outfit 16/500/150% typography (matches the
   `.ap-pp__add-to-cart` spec). Background / text colour are the only
   distinguishing properties between primary and secondary; both pin
   their resting state at every interaction state to defang Astra's
   button globals and multi-brand-uni's brand-wash. */
.ap-tpl__filter-modal__clear,
.ap-tpl__filter-modal__apply {
	display: flex;
	height: 60px;
	padding: 18px 20px;
	box-sizing: border-box;
	justify-content: center;
	align-items: center;
	gap: var(--space-8, 8px);
	border: 0;
	border-radius: var(--radius-15, 15px);
	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;
	cursor: pointer;
}
.ap-tpl__filter-modal__clear {
	flex: 1 1 0;
	white-space: nowrap;
	background: var(--button-secondary-background-enabled, #F0F0F0);
	color: var(--text-primary, #191919);
}
.ap-tpl__filter-modal__apply {
	flex: 4 1 0;
	background: var(--button-primary-background-enabled, #191919);
	color: var(--text-white, #FFF);
}

/* Five-property brand-wash lock — scoped under `.ap-sandbox` (0,3,0) to
   beat the universal `.ap-sandbox button:hover` kill (0,2,1). */
.ap-sandbox .ap-tpl__filter-modal__clear:hover,
.ap-sandbox .ap-tpl__filter-modal__clear:focus,
.ap-sandbox .ap-tpl__filter-modal__clear:focus-visible,
.ap-sandbox .ap-tpl__filter-modal__clear:active {
	background-color: var(--button-secondary-background-enabled, #F0F0F0);
	color: var(--text-primary, #191919);
	border-color: transparent;
	outline: none;
	box-shadow: none;
}
.ap-sandbox .ap-tpl__filter-modal__apply:hover,
.ap-sandbox .ap-tpl__filter-modal__apply:focus,
.ap-sandbox .ap-tpl__filter-modal__apply:focus-visible,
.ap-sandbox .ap-tpl__filter-modal__apply:active {
	background-color: var(--button-primary-background-enabled, #191919);
	color: var(--text-white, #FFF);
	border-color: transparent;
	outline: none;
	box-shadow: none;
}

/* ────────────────────────────────────────────────────────────────────
   Themed: Vilniaus Rytas — overrides + extra slots that only land on
   the `.ap-tpl--rytas` variant of the tenant list. Anything brand-
   specific (palette, imagery, hero, etc.) accumulates here.
   ──────────────────────────────────────────────────────────────────── */

/* Themed page wrapper — `position: relative` establishes the containing
   block for the absolutely-positioned breadcrumb below, so its `top: 121px`
   measures from `.ap-tpl--rytas`'s own top edge (= directly below the
   sandbox header's bottom edge, since `.ap-tpl` starts flush against it). */
.ap-tpl--rytas {
	position: relative;
}

/* Hero banner — full-bleed slot directly below the sandbox header's
   bottom edge, 400px tall, holding a looping brand video. Lives as the
   first child of `.ap-tpl` and stays in flow so it reserves the 400px
   of vertical space the rest of the page lays out against. Full-bleed
   via the `100vw + calc(50% - 50vw)` pattern (rather than `margin: 0
   -96px`) so the escape from `.ap-tpl`'s page inset works at any
   viewport without per-breakpoint overrides. `overflow: hidden` clips
   the video to the 400px slot; `position: relative` anchors the
   absolutely-positioned `<video>` child. */
.ap-tpl--rytas .ap-tpl__hero {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	height: 400px;
	overflow: hidden;
	background: var(--gray-100, #F0F0F0);
}

/* Hero overlay — wraps the breadcrumb + title so they float on top of
   the video as a single anchored group. Lifted out of flow and pinned
   121px below the sandbox header's bottom edge (= 121px from
   `.ap-tpl--rytas`'s top, since `.ap-tpl` starts flush with the header).
   `left: 0; right: 0` spans the full width of `.ap-tpl--rytas`'s padding
   box; the children's own centring (`justify-content: center` on
   `.ap-breadcrumbs`, `text-align: center` on `.ap-tpl__title`) handles
   horizontal alignment. `z-index: 1` keeps the group readable above
   the video. Inside the overlay, breadcrumb → title gap is owned by
   the breadcrumb's `margin-bottom: 16px` from the base `.ap-tpl
   .ap-breadcrumbs` rule above — no extra wiring needed. */
.ap-tpl--rytas .ap-tpl__hero-overlay {
	position: absolute;
	top: 121px;
	left: 0;
	right: 0;
	z-index: 1;
}

/* Zero the breadcrumb's shipped `margin-top: 64px` (from `_breadcrumbs.scss`)
   inside the overlay — the overlay itself owns vertical anchoring, so
   the trail sits flush with the overlay's top edge. Bottom margin
   (16px from the base rule) is preserved to drive the gap to the title. */
.ap-tpl--rytas .ap-tpl__hero-overlay .ap-breadcrumbs {
	margin-top: 0;
	color: var(--text-white, #FFF);
}

/* Hero → filter-row gap (24px). On the neutral list the title carries
   this spacing via its `margin-bottom: 64px`, but on the Rytas variant
   the title is inside the absolute overlay and so is out of flow — the
   filter row now follows the hero directly. Pin its top margin
   explicitly so the gap is owned locally rather than depending on the
   title's tail margin. */
.ap-tpl--rytas .ap-tpl__filter-row {
	margin-top: 24px;
}

/* Themed title typography — Rytas uses Teko instead of the brandbook
   display face (Special Gothic Expanded One) and sits on top of the
   video hero, so the colour flips to white. Spec lifted from Figma:
   Teko 98 / 600 / 90% / 1.47px / uppercase. Teko itself is not a
   brandbook face — it's enqueued globally from functions.php ('astp-teko-font'; ago-tokens.css is a verbatim Figma export and can't carry it) so any future themed page can opt into it. The base `.ap-tpl__title` provides
   `text-align: center` + the bottom margin (inert inside the absolute
   overlay); we override the type-heading-xl utility's font stack here. */
.ap-tpl--rytas .ap-tpl__title {
	color: var(--text-white, #FFF);
	font-family: 'Teko', sans-serif;
	font-size: 98px;
	font-weight: var(--font-weight-semibold, 600);
	line-height: 0.9;
	letter-spacing: 1.47px;
	text-transform: uppercase;
}

/* Hero video — fills the 400px slot with `object-fit: cover` so the
   source's native aspect-ratio is preserved while the visible area
   matches the slot exactly. Autoplay requires `muted` + `playsinline`
   on iOS Safari (otherwise the video stays paused and shows the first
   frame only). Astra's global `img { max-width: 100% }` doesn't apply
   to `<video>`, but we pin width/height explicitly so behaviour is
   predictable. */
.ap-tpl--rytas .ap-tpl__hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ────────────────────────────────────────────────────────────────────
   Mobile (< 768px) — Narrow grid view layout overrides for the tenant
   products-list page. Chrome mobile rules (header collapse, burger
   reveal, mobile footer) live in `chrome-styles.php`; this block owns
   only the body rules that differ from the desktop layout above.
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

	/* Page-scoped mobile token remap — each row mirrors the brandbook's
	   documented Mobile-mode scale (`assets/tokens/ago-tokens.css:417-425`,
	   currently commented out at `:root` pending the full responsive
	   pass). Per the `[Mobile typography via token remap]` memory, we
	   never override `font-size` per element — `.type-*` utility classes
	   keep doing their job; only the `--font-size-*` token underneath
	   gets a smaller value once. `letter-spacing` in `em` units scales
	   automatically, so spacing follows.

	   Affects on this page:
	     • --font-size-58 (34px) — `.type-heading-xl` tenant title.
	     • --font-size-22 (20px) — `.type-price-sm` card prices.
	     • --font-size-20 (16px) — `.type-heading-sm-light` card titles.
	   `--font-size-44` is remapped for completeness even though
	   `.type-heading-lg` isn't on this page, so anything new inherits
	   the right mobile size automatically. */
	.ap-sandbox {
		--font-size-58: 34px;
		--font-size-44: 34px;
		--font-size-22: 20px;
		--font-size-20: 16px;
	}

	/* Page horizontal inset drops from 96px (desktop) to 24px (mobile)
	   per spec. All subsequent rows (breadcrumb, title, filter row,
	   product grid) inherit the new inset since they're flow children
	   of `.ap-tpl`. */
	.ap-tpl {
		padding: 0 24px;
	}

	/* Breadcrumb → tenant title gap stays 16px (desktop value carries
	   over). The header→breadcrumb gap drops from 64px on desktop to
	   24px on mobile — override the top margin baked into
	   `_breadcrumbs.scss` (`margin: 64px 0 24px`). */
	.ap-tpl .ap-breadcrumbs {
		margin-top: 24px;
	}

	/* Tenant title → filter row gap drops from 64px (desktop) to 24px
	   on mobile. The 16px above (breadcrumb → title) is shared with
	   desktop. */
	.ap-tpl__title {
		margin-bottom: 24px;
	}

	/* Filter button collapses to icon-only on mobile — same 48px shell,
	   same padding, same icon. Just the text label hides. Resulting hit
	   area is 52×48 (16 + 20 + 16 wide, explicit 48 tall). */
	.ap-tpl__filter-button__label {
		display: none;
	}

	/* Filter row's gap drops from 32px (desktop) to 8px so all three
	   right-side controls — narrow toggle, wide toggle, filter pill —
	   sit at the same 8px rhythm. The view-toggle's own internal `gap:
	   8px` already matches; the row's gap takes care of toggle →
	   filter-button. The count on the left stays flush against the
	   page inset because `.ap-tpl__view-toggle`'s `margin-left: auto`
	   absorbs the leftover space regardless of the row's gap. */
	.ap-tpl__filter-row {
		gap: 8px;
	}

	/* Product grid (mobile) — both view modes share these resets: the
	   grid sits on the mobile 2-column grid, inside `.ap-tpl`'s 24px
	   page padding (the grid margin). Wide mode's single card spans
	   both columns; Narrow's two cards sit one per column with the
	   16px grid gutter between them. Cards already fill their `1fr`
	   track at `width: 100%` from the base rules, so only the track
	   counts below differ from desktop.

	   Vertical row gap drops from 64px (desktop) to 32px on mobile,
	   shared between Narrow and Wide modes. Last-row → footer gap
	   drops from 192px (desktop) to 64px. The 24px top gap from the
	   filter row above carries from desktop. */
	.ap-tpl__grid {
		margin-bottom: 64px;
		gap: 32px var(--grid-gutter, 16px);
	}

	/* Wide mode (default) — one card per row. */
	.ap-tpl__grid {
		grid-template-columns: 1fr;
	}

	/* Narrow mode — two cards per row with the 4px column gap from
	   the base rule. */
	.ap-tpl:has([data-view-button="narrow"][aria-pressed="true"]) .ap-tpl__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Filter drawer flips from a right-side panel (desktop) to a bottom
	   sheet on mobile: anchored to the viewport bottom, full width, top
	   corners rounded per `--radius-15`, slides up from below. Background
	   token carries over from the base rule. Side padding matches the
	   page inset (24px); top padding is 8px so the grabber sits 8px from
	   the edge; bottom padding is 12px (action-row → viewport-bottom gap).
	   `transition` is restated here (it already cascades from the base
	   rule) so the slide-up axis is readable next to the new transform. */
	.ap-tpl__filter-modal__drawer {
		top: auto;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		max-height: 90vh;
		/* No top padding — the sticky grabber bar owns the 8px inset
		   (same pinned-header contract as the chrome bottom sheets). */
		padding: 0 24px 12px;
		border-radius: var(--radius-15, 15px) var(--radius-15, 15px) 0 0;
		transform: translateY(100%);
		transition: transform 360ms cubic-bezier(0.4, 0, 0.2, 1);
	}
	.ap-tpl__filter-modal.is-open .ap-tpl__filter-modal__drawer {
		transform: translateY(0);
	}

	/* Bottom-sheet grabber — pinned. Full-width sticky bar with the
	   drawer background (8px inset + 12px header gap as padding) so the
	   filter sections scroll behind it; the 40×4 pill is the ::after. */
	.ap-tpl__filter-modal__grabber {
		display: block;
		position: sticky;
		top: 0;
		z-index: 5;
		width: 100%;
		margin: 0;
		padding: 8px 0 12px;
		background: var(--drawer-background, var(--basic-white, #FFF));
	}
	.ap-tpl__filter-modal__grabber::after {
		content: '';
		display: block;
		width: 40px;
		height: 4px;
		margin: 0 auto;
		border-radius: var(--radius-999, 999px);
		background: var(--gray-100, #F0F0F0);
	}

	/* Pinned header (title + close) right below the grabber bar — same
	   always-visible contract as the chrome bottom sheets. */
	.ap-tpl__filter-modal__header {
		position: sticky;
		top: 24px;
		z-index: 5;
		background: var(--drawer-background, var(--basic-white, #FFF));
	}

	/* Header → first divider gap drops from 48px (desktop) to 24px on
	   mobile. */
	.ap-tpl__filter-modal__drawer > .ap-pp__divider:first-of-type {
		margin-top: 24px;
	}

	/* Close pill tightens on mobile: padding drops from 14px to 8px;
	   `align-items` and `gap` carry from the base rule. */
	.ap-tpl__filter-modal__close {
		display: flex;
		padding: 8px;
	}

	/* Drawer height is content-driven on mobile (no `margin-top: auto`
	   work to do), so the action row sits 24px below the last section's
	   trailing divider. */
	.ap-tpl__filter-modal__actions {
		margin-top: 24px;
	}
}

/* ── Pagination — INTERIM functional pager (no sandbox frame yet; task 0017
   conversion polish). A numbered pager so page 2+ is reachable once a brand
   catalog passes the per-page limit. The current page uses the brandable
   primary token so it repaints per tenant. Restyle when the FE owner
   designs pagination/load-more. ── */
.ap-tpl__pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-8, 8px);
	margin-top: var(--space-32, 32px);
}
.ap-tpl__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--border-primary, #E0E0E0);
	border-radius: var(--radius-10, 10px);
	color: var(--text-primary, #191919);
	text-decoration: none;
	transition: border-color 0.15s ease;
}
.ap-tpl__pagination a.page-numbers:hover {
	border-color: var(--text-primary, #191919);
}
.ap-tpl__pagination .page-numbers.current {
	background: var(--button-primary-background-enabled, #191919);
	border-color: var(--button-primary-background-enabled, #191919);
	color: #fff;
}
.ap-tpl__pagination .page-numbers.dots {
	border: 0;
	min-width: 0;
}

/* ── Favorites page ("Mėgstamos prekės", Figma 1672-4564) ─────────────
   PLP layout reused wholesale; the page-only deltas are the centered
   title and the wishlist heart overlaid on each card (24px inset per
   the frame — the pressed heart is the remove control). */
.ap-fav__title {
	/* No breadcrumb on this page, so the 64px header gap the PLP gets
	   from the breadcrumb's top margin lives on the title instead. */
	margin-top: 64px;
	text-align: center;
}
.ap-fav__card {
	position: relative;
}
.ap-fav__card__like {
	position: absolute;
	top: 24px;
	right: 24px;
	z-index: 1;
}
/* Empty state — the shared `.ap-profile__empty` card (account-profile.css,
   Figma 1728:5132), centered under the title. `.is-empty` (server-set for
   logged-in, JS-toggled for anonymous / last un-heart) swaps the filter
   row + grid for the card. */
.ap-fav__empty {
	display: none;
	margin: var(--space-64, 64px) auto 0;
	max-width: 100%;
}
.ap-fav.is-empty .ap-fav__empty {
	display: flex;
}
.ap-fav.is-empty .ap-tpl__filter-row,
.ap-fav.is-empty .ap-tpl__grid {
	display: none;
}


/* ─────────────────────────────────────────────────────────────────────
   Infinite scroll (2026-09-16)

   The numbered pager is hidden, NOT removed, once the scroller takes
   over: its links stay in the DOM as the crawlable route to every page
   of a catalog, and as the fallback the script restores after repeated
   fetch failures. `display: none` still leaves the hrefs in the markup
   for a crawler to follow.

   No Figma frame covers this yet — the sentinel is deliberately plain
   (a centred, muted status line), so there is nothing invented for a
   designer to unpick later.
   ───────────────────────────────────────────────────────────────────── */
.ap-tpl__pagination--scrolled {
	display: none;
}
.ap-tpl__scroll-sentinel {
	min-height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-secondary, #5C5C5C);
	font-size: 14px;
}