/*
 * RahkarTheme — rahkar/product-archive front-end styles.
 *
 * Loaded only on pages containing the block (block.json `style`),
 * so we pay no kB tax on the rest of the site.
 *
 * Custom properties (set as inline style on .rpa root):
 *   --rpa-desk    desktop columns
 *   --rpa-mob     mobile columns
 *   --rpa-gap     grid gap
 *   --rpa-radius  card corner radius
 *
 * Layout uses CSS grid + aspect-ratio so cards never reflow when images
 * load — zero Cumulative Layout Shift even on the first paint.
 */

.rpa {
	display: block;
	width: 100%;
	margin-inline: auto;
}

/* ───────────────────── archive breadcrumb (de-emphasised) ─────────────────────
   The breadcrumb was dominating the top of the listing pages. Per the 2026 UX
   pass we KEEP it (it carries the SEO/structured-data trail Google reads) but
   shrink it hard and drop its visual priority. This stylesheet is enqueued ONLY
   on the listing controllers (theme.yml: category/search/best-sales/new-products/
   prices-drop/manufacturer/supplier), so this bare `.breadcrumb` rule is already
   scoped to the archive — it never touches the product / CMS breadcrumb. Mobile
   hides it entirely via the markup's `.hidden-sm-down`. */
.breadcrumb {
	margin: 0 0 6px;          /* small gap before the category strip (which adds its own top margin) */
	padding: 12px 0 0;        /* clear the sticky header above so it isn't cramped */
	font-size: 0.75rem;       /* ~12px — subtle, supportive, not a headline */
	line-height: 1.5;
	color: var(--wp--preset--color--text-muted, #8a909c);
}
.breadcrumb ol { margin: 0; padding: 0; }
.breadcrumb a,
.breadcrumb span {
	color: var(--wp--preset--color--text-muted, #8a909c);
	font-weight: var(--rh-fw-base);
}
.breadcrumb a:hover { color: var(--wp--preset--color--text, #1a1d23); }
/* Softer, lighter separator than the classic dark "/" (theme.css sets #7a7a7a). */
.breadcrumb li::after { color: var(--wp--preset--color--border, #c7ccd4); }

/* ───────────────────────── search heading ───────────────────────── */

.rpa-search-title {
	margin: 0 0 var(--rpa-gap, 16px);
	font-size: var(--wp--preset--font-size--lg, 1.25rem);
	font-weight: var(--rh-fw-strong);
	line-height: 1.4;
	color: var(--wp--preset--color--contrast, #0f1115);
}
.rpa-search-title__q {
	font-weight: var(--rh-fw-strong);
	color: var(--wp--preset--color--primary, #0a66c2);
}

/* ───────────────────────── toolbar ───────────────────────── */

.rpa-toolbar {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-block-end: var(--rpa-gap, 16px);
	flex-wrap: wrap;
}

.rpa-toolbar__right {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-inline-start: auto;
}

.rpa-count {
	font-size: 0.8125rem;
	color: var(--wp--preset--color--text-muted, #5b6271);
	white-space: nowrap;
}

/* ───────────────────────── chip primitive ───────────────────────── */

.rpa-chip {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	height: 36px;
	padding-inline: 14px;
	border-radius: 9999px;
	background: var(--wp--preset--color--muted, #eceef1);
	color: var(--wp--preset--color--text, #1a1d23);
	font-size: 0.875rem;
	font-weight: var(--rh-fw-base);
	text-decoration: none;
	white-space: nowrap;
	scroll-snap-align: start;
	transition: background-color 0.15s ease;
}
.rpa-chip:hover { background: var(--wp--preset--color--border, #e2e4e9); text-decoration: none; }
.rpa-chip.is-active {
	background: var(--wp--preset--color--primary, #0a66c2);
	color: var(--wp--preset--color--base, #fff);
}

/* ───────────────────────── desktop: sort chips ───────────────────────── */

.rpa-sort-chips {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	flex: 1 1 auto;
	min-width: 0;
	padding-block: 4px;
}

/* ───────────────────────── sort trigger (mobile only) ───────────────────────── */

.rpa-sort__trigger { display: none; }

/* Safety guard: legacy markup (cached HTML from earlier code) contained
   a <form class="rpa-sort__form"> with a <select>. The current PHP no
   longer emits it, but if a page-cache (Cloudflare, WP Rocket, etc.)
   is still serving the stale HTML, hide it here so nothing duplicates
   the new chips/trigger. Safe to leave in place forever — costs nothing
   when no such element is in the DOM. */
.rpa-sort__form,
.rpa-sort__label,
.rpa-sort__form select,
.rpa-sort__go { display: none !important; }

/* ───────────────────────── grid ─────────────────────────
   Responsive columns: 2 → 3 → 4 → 5 as space grows. PURE CSS — no JS, and ZERO
   server cost (column count is presentational; the controller renders the same
   products-per-page regardless). Images already lazy-load (loading="lazy"), so
   more columns never means more eager work.

   Two layers:
     1. Viewport media queries — the fallback ramp (works in every browser).
     2. Container queries on .rpa-archive__main — the authoritative ramp for
        modern browsers: the grid follows its OWN width, so it steps down cleanly
        the moment the 270px filter sidebar claims space (no viewport guesswork,
        no awkward jump where a "desktop" width still has a narrow grid). These
        come later in source, so they win wherever supported. */
.rpa-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--rpa-gap, 16px);
	grid-template-columns: repeat(2, minmax(0, 1fr));      /* phones */
}
@media (min-width: 700px)  { .rpa-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .rpa-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1500px) { .rpa-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* Establish the grid's parent as a size container (cheap; the track already
   sets its width, so containment adds no measurement cost). */
.rpa-archive__main { container: rpa-main / inline-size; }

@container rpa-main (min-width: 600px)  { .rpa-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container rpa-main (min-width: 820px)  { .rpa-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container rpa-main (min-width: 1080px) { .rpa-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* Card visuals (.rpc-card*) live in the shared stylesheet
   (rahkar-product-card) registered in inc/product-card.php and pulled
   in via wp_enqueue_block_style. The archive only owns layout-level
   concerns: the grid container, toolbar, pagination, sheet, term info.
   Keeping card vs. grid concerns split lets the slider reuse the exact
   same card with zero duplication. */

/* Card border-radius wiring: shared CSS reads `--rpc-radius`, archive
   exposes `--rpa-radius`. Forward the value so a single attribute on
   the block sets both grid corners and card corners consistently. */
.rpa { --rpc-radius: var(--rpa-radius, 12px); }

/* ───────────────────────── skeleton ───────────────────────── */

@keyframes rpa-shimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

.rpa-skel-box,
.rpa-skel-line,
.rpa-skel-pill {
	/* Stronger base/shine contrast than the design tokens give us — the
	   default --muted vs --surface differ by ~10 levels of gray, so the
	   shimmer was nearly invisible. Hardcoded pair keeps the loader
	   readable on the white card background regardless of theme overrides. */
	background: linear-gradient(
		90deg,
		#e6e8ed 0%,
		#f6f7fa 50%,
		#e6e8ed 100%
	);
	background-size: 200% 100%;
	animation: rpa-shimmer 1.4s linear infinite;
	border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
	.rpa-skel-box,
	.rpa-skel-line,
	.rpa-skel-pill { animation: none; }
}

.rpa-skel-box {
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: calc(var(--rpa-radius, 12px) - 4px);
}
.rpa-skel-line {
	display: block;
	height: 0.85rem;
	width: 100%;
	/* Pill ends instead of slightly-rounded rectangles — reads softer
	   against the rounded card edge and matches the real type's optical
	   weight better. */
	border-radius: 999px;
}
.rpa-skel-line--w60   { width: 60%; }
.rpa-skel-line--price { width: 45%; height: 1rem; }
.rpa-skel-pill {
	display: inline-block;
	width: 38px;
	height: 22px;
	border-radius: 9999px;
}

/* Skel cards: silence the real card's hover lift, kill pointer affordance. */
.rpc-card--skel              { pointer-events: none; }
.rpc-card--skel:hover        { box-shadow: none; transform: none; }

/* Slightly roomier element spacing inside the skel card so the bottom
   region reads as title + price (two distinct rows), not a single slab.
   Only +2–4px so the dimensions still match the real card closely. */
.rpc-card--skel .rpc-card__link { gap: 12px; }

/* The real .rpc-card__title clamps via -webkit-box; on the skel we want
   two stacked block-level bars instead — override just for this case. */
.rpc-card--skel .rpa-skel-title {
	display: flex;
	flex-direction: column;
	gap: 8px;
	-webkit-line-clamp: unset;
	overflow: visible;
}

/* Stagger the shimmer across elements so the loader reads as a wave
   travelling down the card, not a single synchronized pulse — that
   sync effect is what made the bottom area look like one continuous
   bar in the previous pass. Negative delays let each bar start mid-
   cycle, no JS needed. */
.rpc-card--skel .rpa-skel-title .rpa-skel-line:nth-child(2) {
	animation-delay: -0.3s;
}
.rpc-card--skel .rpa-skel-line--price { animation-delay: -0.6s; }
.rpc-card--skel .rpa-skel-pill        { animation-delay: -0.9s; }

/* Mobile media is edge-to-edge with no rounding on the real card; skel
   media follows so the placeholder doesn't visually jump on swap. */
@media (max-width: 768px) {
	.rpa-skel-box { border-radius: 0; }
}

/* Skeleton grid sits below the real grid and is toggled via [hidden]
   on the wrapping container. */
.rpa-skeleton[hidden] { display: none; }
.rpa-skeleton .rpa-grid--skel { margin-top: var(--rpa-gap, 16px); }

/* During an AJAX sort swap, the old grid stays in the DOM until the new
   one is ready — hide it so the skeleton above can carry the loading
   state alone (otherwise the page jumps as stale + skeleton stack).
   Toolbar gets soft-disabled so a panicky double-click doesn't queue
   stale state — the AbortController already cancels racing requests,
   this is just the visual cue. */
.rpa[data-rpa-busy="sort"] .rpa-grid:not(.rpa-grid--skel) { display: none; }
.rpa[data-rpa-busy="sort"] .rpa-skeleton .rpa-grid--skel { margin-top: 0; }
.rpa[data-rpa-busy="sort"] .rpa-toolbar {
	pointer-events: none;
	opacity: 0.65;
	transition: opacity 0.12s ease;
}

/* ───────────────────────── pagination ───────────────────────── */

.rpa-pagination {
	display: flex;
	gap: 6px;
	justify-content: center;
	flex-wrap: wrap;
	margin-block-start: calc(var(--rpa-gap, 16px) * 1.5);
}
.rpa-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding-inline: 10px;
	border: 1px solid var(--wp--preset--color--border, #e2e4e9);
	border-radius: 8px;
	text-decoration: none;
	color: inherit;
	font-size: 0.875rem;
}
.rpa-pagination .page-numbers.current {
	background: var(--wp--preset--color--contrast, #0f1115);
	color: var(--wp--preset--color--base, #fff);
	border-color: var(--wp--preset--color--contrast, #0f1115);
}
.rpa-pagination .page-numbers:hover:not(.current) {
	background: var(--wp--preset--color--surface, #f7f7f8);
	text-decoration: none;
}

/* ───────────────────────── load more (sentinel + button) ───────────────────────── */

.rpa-loadmore {
	margin-block-start: calc(var(--rpa-gap, 16px) * 1.5);
	display: flex;
	justify-content: center;
}
.rpa-loadmore__sentinel { width: 1px; height: 1px; }
.rpa-loadmore__btn {
	height: 44px;
	padding-inline: 24px;
	background: var(--wp--preset--color--primary, #0a66c2);
	color: #fff;
	border: 0;
	border-radius: 10px;
	font: inherit;
	font-weight: var(--rh-fw-strong);
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.rpa-loadmore__btn:hover {
	background: var(--wp--preset--color--primary-dark, #074a8d);
}
.rpa-loadmore__btn[hidden] { display: none; }
.rpa-loadmore__btn[disabled] {
	opacity: 0.7;
	cursor: progress;
}

/* When JS is active, hide standard pagination — auto-load handles it.
   The sentinel/button is the new "next" UI; the numbered list stays in
   the DOM purely for crawlers and is kept off-screen for AT users. */
.rpa[data-rpa-js="1"] .rpa-pagination {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

/* ───────────────────────── bottom-sheet dialog (mobile) ───────────────────────── */

.rpa-sheet {
	border: 0;
	padding: 0;
	background: transparent;
	color: inherit;
	width: 100%;
	max-width: 100%;
	max-height: 90vh;
	margin: 0;
	position: fixed;
	inset: auto 0 0 0;     /* pin to bottom */
}
.rpa-sheet::backdrop {
	background: rgba(15, 17, 21, 0.55);
}

/* Inner panel — separate element so we can animate transform without
   fighting the dialog's own positioning. */
.rpa-sheet[open] {
	display: block;
	animation: rpa-sheet-in 0.22s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.rpa-sheet.is-closing {
	animation: rpa-sheet-out 0.18s ease forwards;
}
@keyframes rpa-sheet-in {
	from { transform: translateY(100%); }
	to   { transform: translateY(0); }
}
@keyframes rpa-sheet-out {
	from { transform: translateY(0); }
	to   { transform: translateY(100%); }
}
@media (prefers-reduced-motion: reduce) {
	.rpa-sheet[open], .rpa-sheet.is-closing { animation: none; }
}

.rpa-sheet__head,
.rpa-sheet__body {
	background: var(--wp--preset--color--base, #fff);
}
.rpa-sheet__head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 14px 16px;
	border-radius: 16px 16px 0 0;
	border-bottom: 1px solid var(--wp--preset--color--border, #e2e4e9);
}
.rpa-sheet__close {
	width: 32px; height: 32px;
	border: 0; background: transparent;
	font-size: 1.5rem; line-height: 1;
	cursor: pointer;
	color: inherit;
}
.rpa-sheet__title {
	margin: 0;
	font-size: 1rem;
	font-weight: var(--rh-fw-strong);
	flex: 1;
	text-align: center;
}
.rpa-sheet__body {
	padding: 4px 0 16px;
	max-height: 70vh;
	overflow-y: auto;
}
.rpa-sort__opt {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--border, #e2e4e9);
	font-size: 0.95rem;
}
.rpa-sort__opt:last-child { border-bottom: 0; }
.rpa-sort__opt:hover { background: var(--wp--preset--color--surface, #f7f7f8); text-decoration: none; }
.rpa-sort__opt.is-active::before {
	content: "✓";
	color: var(--wp--preset--color--primary, #0a66c2);
	font-weight: var(--rh-fw-strong);
}
.rpa-sort__opt:not(.is-active)::before {
	content: "";
	display: inline-block;
	width: 0.8em;
}

/* ───────────────────────── responsive ───────────────────────── */

@media (max-width: 768px) {
	.rpa-toolbar { gap: 8px; }

	/* Mobile: hide desktop sort chips, show sort trigger. */
	.rpa-sort-chips { display: none; }
	.rpa-count      { display: none; } /* declutter mobile toolbar */

	/* Anchor the sort trigger to the start side (right in RTL).
	   On desktop the auto-margin pushes the count/right-group to the
	   end so the chips can claim the start — on mobile the chips are
	   hidden, so we drop that margin and let the trigger sit at start. */
	.rpa-toolbar__right { margin-inline-start: 0; margin-inline-end: auto; }

	.rpa-sort__trigger {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		height: 36px;
		padding-inline: 12px;
		border: 1px solid var(--wp--preset--color--border, #e2e4e9);
		border-radius: 8px;
		background: var(--wp--preset--color--base, #fff);
		font: inherit;
		color: inherit;
		cursor: pointer;
	}
	.rpa-sort__trigger-label { color: var(--wp--preset--color--text-muted, #5b6271); font-size: 0.8125rem; }
	.rpa-sort__trigger-value { font-weight: var(--rh-fw-strong); font-size: 0.875rem; }
}

/* On desktop, the bottom-sheet dialog is never shown by the trigger
   (the trigger itself is hidden) — but a stray dialog ::backdrop
   could still render full-screen if accidentally opened. Lock it down. */
@media (min-width: 769px) {
	.rpa-sheet { display: none; }
}

/* ───────────────────────── below-grid term info ───────────────────────── */

.rpa-terminfo {
	margin-block-start: calc(var(--rpa-gap, 16px) * 2);
	padding-block-start: calc(var(--rpa-gap, 16px) * 1.25);
	border-top: 1px solid var(--wp--preset--color--border, #e2e4e9);
}
.rpa-terminfo__title {
	margin: 0 0 12px;
	font-size: var(--wp--preset--font-size--xl, 1.5rem);
	font-weight: var(--rh-fw-strong);
	line-height: 1.3;
	color: var(--wp--preset--color--contrast, #0f1115);
}

/* ───────────────────────── description ───────────────────────── */
/*
 * The fold/unfold UI moved to the shared `.rh-fade` component (see
 * assets/css/fade-block.css). Only the archive-context typography
 * overrides remain here.
 */

.rpa-desc__body {
	font-size: 0.95rem;
	line-height: 1.85;
	color: var(--wp--preset--color--text, #1a1d23);
}
.rpa-desc__body > * { margin-block: 0.7em; }
.rpa-desc__body > *:first-child { margin-block-start: 0; }