/* Department Page template (page-templates/template-department.php).
   Loaded only on that template by pp_dept_enqueue() in inc/pp-department-page.php. */

.pp-dept {
	--pp-dept-accent: var(--pp-magenta);
	--pp-dept-accent-2: var(--pp-magenta-dark);
	--pp-dept-accent-soft: var(--pp-magenta-soft);
	--pp-dept-jump-h: 62px;
	background: var(--pp-bg-page);
	padding-bottom: var(--pp-section-gap);
}
.pp-dept--pool {
	--pp-dept-accent: var(--pp-pool-dark);
	--pp-dept-accent-2: var(--pp-pool);
	--pp-dept-accent-soft: var(--pp-pool-soft);
}
.pp-dept--ink {
	--pp-dept-accent: var(--pp-ink);
	--pp-dept-accent-2: var(--pp-text-2);
	--pp-dept-accent-soft: var(--pp-bg-muted);
}

.pp-dept-wrap,
.pp-dept-hero__inner {
	max-width: var(--pp-container);
	margin: 0 auto;
	padding-left: var(--pp-gutter);
	padding-right: var(--pp-gutter);
	box-sizing: border-box;
}

/* ── Hero ──────────────────────────────────────────────────────────────────── */
.pp-dept-hero {
	background: linear-gradient(135deg, var(--pp-dept-accent) 0%, var(--pp-dept-accent-2) 100%);
	color: var(--pp-on-dark);
	overflow: hidden;
	position: relative;
}
.pp-dept--pool .pp-dept-hero {
	background: linear-gradient(135deg, var(--pp-pool-dark) 0%, var(--pp-pool) 100%);
}
.pp-dept-hero__inner {
	padding-top: var(--pp-sp-4);
	padding-bottom: var(--pp-sp-12);
	position: relative;
}
/* .pp-dept-hero__crumbs,
.pp-dept-hero__crumbs a,
.pp-dept-hero__crumbs .pp-breadcrumb__sep {
	color: var(--pp-on-dark-70);
} */
.pp-dept-hero__crumbs a:hover { color: var(--pp-on-dark); }
/* .pp-dept-hero__crumbs .pp-breadcrumb__current { color: var(--pp-on-dark); } */

.pp-dept-hero__body {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pp-sp-10);
	padding-top: var(--pp-sp-6);
}
.pp-dept-hero__text { max-width: 720px; }
.pp-dept-hero__title {
	font-size: var(--pp-fs-page);
	font-weight: var(--pp-fw-black);
	letter-spacing: var(--pp-ls-page);
	line-height: var(--pp-lh-display);
	color: var(--pp-on-dark);
	margin: var(--pp-sp-4) 0 var(--pp-sp-3);
}
.pp-dept-hero__intro {
	font-size: var(--pp-fs-lead);
	line-height: var(--pp-lh-loose);
	color: var(--pp-on-dark-70);
	max-width: 60ch;
	margin: 0;
}
.pp-dept-hero__actions { margin-top: var(--pp-sp-6); }
.pp-dept-hero__actions .pp-btn { gap: var(--pp-sp-2); }
.pp-dept-hero__actions .pp-btn svg { width: 18px; height: 18px; }
.pp-dept--pool .pp-dept-hero .pp-btn--inverse { color: var(--pp-pool-dark); }
.pp-dept--pool .pp-dept-hero .pp-btn--inverse:hover { background: var(--pp-pool-soft); }
.pp-dept--ink .pp-dept-hero .pp-btn--inverse { color: var(--pp-ink); }
.pp-dept--ink .pp-dept-hero .pp-btn--inverse:hover { background: var(--pp-bg-muted); }

/* Decorative icon disc (CSS only — no photography). */
.pp-dept-hero__art {
	flex: 0 0 auto;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: color-mix(in srgb, var(--pp-on-dark) 12%, transparent);
	box-shadow: 0 0 0 28px color-mix(in srgb, var(--pp-on-dark) 6%, transparent),
	            0 0 0 56px color-mix(in srgb, var(--pp-on-dark) 4%, transparent);
	margin-right: var(--pp-sp-12);
}
.pp-dept-hero__art svg {
	width: 96px;
	height: 96px;
	color: var(--pp-on-dark);
	stroke-width: 1.25;
}

/* ── Quick jump (sticky strip) ─────────────────────────────────────────────── */
.pp-dept-jump {
	position: sticky;
	top: 0;
	z-index: var(--pp-z-filterbar);
	background: color-mix(in srgb, var(--pp-bg) 92%, transparent);
	-webkit-backdrop-filter: saturate(1.4) blur(10px);
	backdrop-filter: saturate(1.4) blur(10px);
	border-bottom: var(--pp-bw-hair) solid var(--pp-border);
	transition: box-shadow var(--pp-dur) var(--pp-ease);
}
.pp-dept-jump.is-stuck { box-shadow: var(--pp-shadow-xs); }
.pp-dept-jump__inner {
	display: flex;
	align-items: center;
	gap: var(--pp-sp-4);
	max-width: var(--pp-container);
	margin: 0 auto;
	padding: var(--pp-sp-3) var(--pp-gutter);
	box-sizing: border-box;
}
.pp-dept-jump__label {
	flex: 0 0 auto;
	font-size: var(--pp-fs-2xs);
	font-weight: var(--pp-fw-bold);
	letter-spacing: var(--pp-ls-kicker);
	text-transform: uppercase;
	color: var(--pp-text-3);
}
.pp-dept-jump__viewport {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
}
/* Edge fades hint there's more to scroll; hidden at the matching end. */
.pp-dept-jump__viewport::before,
.pp-dept-jump__viewport::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 48px;
	z-index: 1;
	pointer-events: none;
	transition: opacity var(--pp-dur) var(--pp-ease);
}
.pp-dept-jump__viewport::before { left: 0;  background: linear-gradient(to right, var(--pp-bg), transparent); }
.pp-dept-jump__viewport::after  { right: 0; background: linear-gradient(to left,  var(--pp-bg), transparent); }
.pp-dept-jump__viewport.is-start::before,
.pp-dept-jump__viewport.is-end::after { opacity: 0; }

.pp-dept-jump__list {
	display: flex;
	gap: var(--pp-sp-2);
	list-style: none;
	margin: 0;
	padding: 2px; /* room for the focus ring */
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.pp-dept-jump__list::-webkit-scrollbar { display: none; }
.pp-dept-jump__list li { flex: 0 0 auto; margin: 0; scroll-snap-align: start; }

.pp-dept-jump__link {
	display: inline-flex;
	align-items: center;
	gap: var(--pp-sp-2);
	min-height: 36px;
	padding: 0 var(--pp-sp-2) 0 var(--pp-sp-4);
	border-radius: var(--pp-r-pill);
	background: var(--pp-bg-sunken);
	border: var(--pp-bw-hair) solid var(--pp-border);
	font-size: var(--pp-fs-sm);
	font-weight: var(--pp-fw-semibold);
	color: var(--pp-text-2);
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--pp-dur-fast) var(--pp-ease), color var(--pp-dur-fast) var(--pp-ease), border-color var(--pp-dur-fast) var(--pp-ease);
}
.pp-dept-jump__count {
	display: inline-grid;
	place-items: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	box-sizing: border-box;
	border-radius: var(--pp-r-pill);
	background: var(--pp-bg);
	color: var(--pp-text-3);
	font-size: var(--pp-fs-2xs);
	font-weight: var(--pp-fw-bold);
	font-variant-numeric: tabular-nums;
}
.pp-dept-jump__link:not(:has(.pp-dept-jump__count)) { padding-right: var(--pp-sp-4); }
.pp-dept-jump__link:hover {
	border-color: var(--pp-dept-accent);
	color: var(--pp-dept-accent);
	background: var(--pp-bg);
	text-decoration: none;
}
.pp-dept-jump__link:focus-visible { outline: none; box-shadow: var(--pp-focus-ring); }
/* Section currently in view. */
.pp-dept-jump__link.is-active {
	background: var(--pp-dept-accent);
	border-color: var(--pp-dept-accent);
	color: var(--pp-on-dark);
}
.pp-dept-jump__link.is-active .pp-dept-jump__count {
	background: color-mix(in srgb, var(--pp-on-dark) 22%, transparent);
	color: var(--pp-on-dark);
}
.pp-dept-jump__link--season:not(.is-active) {
	background: var(--pp-yellow);
	border-color: var(--pp-yellow);
	color: var(--pp-ink);
}

/* Overflow arrows (desktop/tablet; phones swipe). */
.pp-dept-jump__arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	transform: translateY(-50%);
	border-radius: 50%;
	border: var(--pp-bw-hair) solid var(--pp-border-strong);
	background: var(--pp-bg);
	color: var(--pp-ink);
	box-shadow: var(--pp-shadow-xs);
	cursor: pointer;
}
.pp-dept-jump__arrow[hidden] { display: none; }
.pp-dept-jump__arrow svg { width: 18px; height: 18px; }
.pp-dept-jump__arrow:hover { border-color: var(--pp-dept-accent); color: var(--pp-dept-accent); background: var(--pp-bg); }
.pp-dept-jump__arrow--prev { left: -4px; }
.pp-dept-jump__arrow--next { right: -4px; }

/* ── Section headings ──────────────────────────────────────────────────────── */
.pp-dept-browse { padding-top: var(--pp-sp-12); }
.pp-dept-browse__title,
.pp-dept-more__title {
	/* font-size: var(--pp-fs-h4); */
	font-weight: var(--pp-fw-black);
	letter-spacing: var(--pp-ls-h4);
	line-height: var(--pp-lh-tight);
	color: var(--pp-ink);
	margin: 0 0 var(--pp-sp-6);
}

/* ── Card grid ─────────────────────────────────────────────────────────────── */
/* Multi-column (masonry-style) so cards of different lengths pack without gaps.
   Reading order runs down each column, matching the jump strip. */
.pp-dept-grid {
	columns: 3;
	column-gap: var(--pp-grid-gap);
}
.pp-dept-card {
	display: block;
	break-inside: avoid;
	margin: 0 0 var(--pp-grid-gap);
	background: var(--pp-bg);
	border: var(--pp-bw-hair) solid var(--pp-border);
	border-radius: var(--pp-r-2xl);
	overflow: hidden;
	scroll-margin-top: calc(var(--pp-dept-jump-h) + var(--pp-sp-4));
	transition: box-shadow var(--pp-dur) var(--pp-ease), border-color var(--pp-dur) var(--pp-ease);
}
.pp-dept-card:hover {
	border-color: var(--pp-border-strong);
	box-shadow: var(--pp-shadow-card-hover);
}

/* Header (a <summary>: a toggle on phones only — see the script in the template). */
.pp-dept-card__head {
	display: flex;
	align-items: center;
	gap: var(--pp-sp-3);
	padding: var(--pp-sp-5) var(--pp-panel-pad) var(--pp-sp-4);
	border-bottom: 1px solid var(--pp-border-strong);
	list-style: none;
	cursor: default;
}
.pp-dept-card__head::-webkit-details-marker { display: none; }
.pp-dept-card__head::marker { content: ""; }
.pp-dept-card__title {
	flex: 1 1 auto;
	min-width: 0;
	font-size: var(--pp-fs-h5);
	font-weight: var(--pp-fw-medium);
	letter-spacing: var(--pp-ls-h5);
	line-height: var(--pp-lh-tight);
	color: var(--pp-ink);
	margin: 0;
}
.pp-dept-card__count {
	flex: 0 0 auto;
	padding: 2px var(--pp-sp-2);
	border-radius: var(--pp-r-pill);
	background: var(--pp-dept-accent-soft);
	color: var(--pp-dept-accent);
	font-size: var(--pp-fs-2xs);
	font-weight: var(--pp-fw-bold);
	white-space: nowrap;
	display: none; 
}
.pp-dept-card__toggle { display: none; }

.pp-dept-card__body {
	padding: var(--pp-sp-2) var(--pp-panel-pad) var(--pp-sp-4);
	display: grid;
	gap: var(--pp-sp-4);
}
.pp-dept-card__group-hd {
	font-size: var(--pp-fs-sm);
	font-weight: var(--pp-fw-bold);
	letter-spacing: var(--pp-ls-kicker);
	text-transform: uppercase;
	color: var(--pp-dept-accent);
	margin: var(--pp-sp-2) 0 0;
	/* border-bottom: 1px solid var(--pp-border-strong);
	padding-bottom: 6px; */
}
.pp-dept-card__group-hd a { color: inherit; text-decoration: none; }
.pp-dept-card__group-hd a:hover { color: var(--pp-dept-accent); }

/* Link list: one tidy row per sub-category — easier to scan than wrapped chips. */
.pp-dept-links {
	list-style: none;
	margin: 0;
	padding: 0;
}
.pp-dept-links li { margin: 0; }
.pp-dept-links li + li { border-top: var(--pp-bw-hair) solid var(--pp-border); }
.pp-dept-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pp-sp-3);
	min-height: 44px; /* tap target */
	padding: var(--pp-sp-2) 0;
	font-size: var(--pp-fs-body);
	font-weight: var(--pp-fw-regular);
	line-height: var(--pp-lh-snug);
	color: var(--pp-text-2);
	text-decoration: none;
	transition: color var(--pp-dur-fast) var(--pp-ease);
}
.pp-dept-link svg {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	color: var(--pp-text-4);
	transition: transform var(--pp-dur-fast) var(--pp-ease), color var(--pp-dur-fast) var(--pp-ease);
}
a.pp-dept-link:hover,
a.pp-dept-link:focus-visible {
	color: var(--pp-dept-accent);
	text-decoration: none;
}
a.pp-dept-link:hover svg,
a.pp-dept-link:focus-visible svg {
	color: var(--pp-dept-accent);
	transform: translateX(2px);
}
.pp-dept-link.is-nolink { color: var(--pp-text-3); }
.pp-dept-card--compact .pp-dept-link { font-weight: var(--pp-fw-semibold); color: var(--pp-ink); }

/* "Shop all …" — a clear, full-width call to action at the foot of each card. */
.pp-dept-card__foot { padding: 0 var(--pp-panel-pad) var(--pp-panel-pad); }
.pp-dept-card__more {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--pp-sp-2);
	min-height: 44px;
	padding: var(--pp-sp-2) var(--pp-sp-4);
	border-radius: var(--pp-r-md);
	background: var(--pp-dept-accent-soft);
	color: var(--pp-dept-accent);
	font-size: var(--pp-fs-sm);
	font-weight: var(--pp-fw-bold);
	text-align: center;
	text-decoration: none;
	transition: background var(--pp-dur-fast) var(--pp-ease), color var(--pp-dur-fast) var(--pp-ease);
}
.pp-dept-card__more svg {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	transition: transform var(--pp-dur) var(--pp-ease);
}
.pp-dept-card__more:hover,
.pp-dept-card__more:focus-visible {
	background: var(--pp-dept-accent);
	color: var(--pp-on-dark);
	text-decoration: none;
}
.pp-dept-card__more:hover svg { transform: translateX(3px); }

/* ── Chips (seasonal spotlight) ───────────────────────────────────────────── */
.pp-dept-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pp-sp-2);
	list-style: none;
	margin: 0;
	padding: 0;
}
.pp-dept-chips li { margin: 0; }
.pp-dept-chip {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: var(--pp-sp-1) var(--pp-sp-3);
	border-radius: var(--pp-r-md);
	background: var(--pp-bg-sunken);
	border: var(--pp-bw-hair) solid var(--pp-border);
	font-size: var(--pp-fs-sm);
	font-weight: var(--pp-fw-medium);
	line-height: var(--pp-lh-snug);
	color: var(--pp-text-2);
	text-decoration: none;
	transition: background var(--pp-dur-fast) var(--pp-ease), border-color var(--pp-dur-fast) var(--pp-ease), color var(--pp-dur-fast) var(--pp-ease);
}
a.pp-dept-chip:hover,
a.pp-dept-chip:focus-visible {
	background: var(--pp-dept-accent-soft);
	border-color: var(--pp-dept-accent);
	color: var(--pp-dept-accent);
	text-decoration: none;
}
.pp-dept-chip.is-nolink { color: var(--pp-text-3); }

.pp-dept a:focus-visible {
	outline: none;
	box-shadow: var(--pp-focus-ring);
}

/* ── Seasonal spotlight ────────────────────────────────────────────────────── */
.pp-dept-spotlight {
	margin-top: var(--pp-sp-12);
	background: var(--pp-magenta-soft);
	border-radius: var(--pp-r-2xl);
	box-shadow: var(--pp-shadow-card-hover);
	padding: var(--pp-sp-8) var(--pp-sp-8) var(--pp-sp-10);
	scroll-margin-top: calc(var(--pp-dept-jump-h) + var(--pp-sp-4));
}
.pp-dept-spotlight__kicker {
	font-size: var(--pp-fs-2xs);
	font-weight: var(--pp-fw-bold);
	letter-spacing: var(--pp-ls-kicker);
	text-transform: uppercase;
	color: var(--pp-ink);
}
.pp-dept-spotlight__title {
	font-size: var(--pp-fs-h4);
	font-weight: var(--pp-fw-black);
	letter-spacing: var(--pp-ls-h4);
	color: var(--pp-ink);
	margin: var(--pp-sp-1) 0 var(--pp-sp-6);
}
.pp-dept-spotlight__steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--pp-grid-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}
.pp-dept-spotlight__step {
	background: var(--pp-bg);
	border-radius: var(--pp-r-xl);
	padding: var(--pp-card-pad);
	margin: 0;
}
.pp-dept-spotlight__step-hd {
	font-size: var(--pp-fs-h6);
	font-weight: var(--pp-fw-bold);
	color: var(--pp-ink);
	margin: 0 0 var(--pp-sp-3);
}
.pp-dept-spotlight__step-hd a { color: inherit; text-decoration: none; }
.pp-dept-spotlight__step-hd a:hover { color: var(--pp-magenta); }

/* ── Featured promo / upsell bar (from the menu panel's featured card) ─────── */
.pp-dept-feature {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	margin-top: var(--pp-sp-12);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pp-sp-8);
	background: linear-gradient(120deg, var(--pp-magenta) 0%, var(--pp-magenta-dark) 100%);
	color: var(--pp-on-dark);
	border-radius: var(--pp-r-2xl);
	padding: var(--pp-sp-10) var(--pp-sp-10) var(--pp-sp-8);
}
/* CSS-only decoration: soft rings on the right. */
.pp-dept-feature::after {
	content: "";
	position: absolute;
	z-index: -1;
	right: -60px;
	top: 50%;
	width: 280px;
	height: 280px;
	transform: translateY(-50%);
	border-radius: 50%;
	background: color-mix(in srgb, var(--pp-on-dark) 10%, transparent);
	box-shadow: 0 0 0 40px color-mix(in srgb, var(--pp-on-dark) 5%, transparent);
	pointer-events: none;
}
.pp-dept-feature__text { max-width: 640px; }
.pp-dept-feature__kicker {
	font-size: var(--pp-fs-2xs);
	font-weight: var(--pp-fw-bold);
	letter-spacing: var(--pp-ls-kicker);
	text-transform: uppercase;
	color: var(--pp-on-dark-70);
}
.pp-dept-feature__title {
	font-size: var(--pp-fs-h4);
	font-weight: var(--pp-fw-black);
	letter-spacing: var(--pp-ls-h4);
	line-height: var(--pp-lh-tight);
	color: var(--pp-on-dark);
	margin: var(--pp-sp-2) 0;
}
.pp-dept-feature__desc {
	font-size: var(--pp-fs-body-lg);
	color: var(--pp-on-dark-70);
	margin: 0;
}
.pp-dept-feature__badge {
	position: absolute;
	top: var(--pp-sp-4);
	left: var(--pp-sp-10);
	background: var(--pp-yellow);
	color: var(--pp-ink);
	font-size: var(--pp-fs-2xs);
	font-weight: var(--pp-fw-bold);
	letter-spacing: var(--pp-ls-kicker);
	text-transform: uppercase;
	padding: 2px var(--pp-sp-2);
	border-radius: var(--pp-r-xs);
}
.pp-dept-feature__cta { flex: 0 0 auto; gap: var(--pp-sp-2); }
.pp-dept-feature__cta svg { width: 18px; height: 18px; }

/* ── Editor content ────────────────────────────────────────────────────────── */
.pp-dept-content {
	margin-top: var(--pp-sp-12);
	font-size: var(--pp-fs-body-lg);
	line-height: var(--pp-lh-loose);
	color: var(--pp-text-2);
}
.pp-dept-content > :first-child { margin-top: 0; }

/* ── More departments ──────────────────────────────────────────────────────── */
.pp-dept-more { margin-top: var(--pp-sp-12); }
.pp-dept-more__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: var(--pp-sp-3);
	list-style: none;
	margin: 0;
	padding: 0;
}
.pp-dept-more__list li { margin: 0; }
.pp-dept-more__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pp-sp-2);
	min-height: 52px;
	padding: 0 var(--pp-sp-4);
	background: var(--pp-bg);
	border: var(--pp-bw-hair) solid var(--pp-border);
	border-radius: var(--pp-r-xl);
	font-size: var(--pp-fs-body-lg);
	font-weight: var(--pp-fw-bold);
	color: var(--pp-ink);
	text-decoration: none;
	transition: border-color var(--pp-dur-fast) var(--pp-ease), color var(--pp-dur-fast) var(--pp-ease);
}
.pp-dept-more__link svg { width: 18px; height: 18px; color: var(--pp-text-3); }
.pp-dept-more__link:hover {
	border-color: var(--pp-dept-accent);
	color: var(--pp-dept-accent);
	text-decoration: none;
}
.pp-dept-more__link:hover svg { color: var(--pp-dept-accent); }

.pp-dept-notice {
	margin: var(--pp-sp-10) 0 0;
	padding: var(--pp-sp-4) var(--pp-sp-5);
	background: var(--pp-bg);
	border: var(--pp-bw-mid) dashed var(--pp-border-strong);
	border-radius: var(--pp-r-xl);
	color: var(--pp-text-2);
}

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
	.pp-dept-hero__art { width: 160px; height: 160px; margin-right: var(--pp-sp-8); }
	.pp-dept-hero__art svg { width: 76px; height: 76px; }
}

@media (max-width: 1023px) {
	.pp-dept-grid { columns: 2; }
	.pp-dept-feature { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 767px) {
	.pp-dept-hero__inner { padding-bottom: var(--pp-sp-8); }
	.pp-dept-hero__body { padding-top: var(--pp-sp-2); }
	.pp-dept-hero__art { display: none; }
	.pp-dept-hero__title { font-size: 36px; letter-spacing: -1px; }
	.pp-dept-hero__intro { font-size: var(--pp-fs-body-lg); }
	.pp-dept-browse { padding-top: 0; }
	.pp-dept-spotlight,
	.pp-dept-feature,
	.pp-dept-more,
	.pp-dept-content { margin-top: var(--pp-sp-8); }
	.pp-dept-spotlight { padding: var(--pp-sp-3) var(--pp-sp-4); }
	.pp-dept-feature { padding: var(--pp-sp-10) var(--pp-sp-5) var(--pp-sp-6); }
	.pp-dept-feature__badge { left: var(--pp-sp-5); }
	.pp-dept-feature::after { width: 200px; height: 200px; right: -80px; top: var(--pp-sp-8); transform: none; }
	.pp-dept-browse__title { font-size: var(--pp-fs-h3); }
}

@media (max-width: 640px) {
	/* Phones: one column of tap-to-expand rows. */
	.pp-dept-jump__inner { padding: var(--pp-sp-2) 0; gap: 0; }
	.pp-dept-jump__label { display: none; }
	.pp-dept-jump__list { padding: 2px var(--pp-gutter); scroll-padding-inline: var(--pp-gutter); }
	.pp-dept-jump__viewport::before,
	.pp-dept-jump__viewport::after { width: 32px; }
	.pp-dept-jump__arrow { display: none !important; } /* swipe instead */
	.pp-dept-jump__link { min-height: 40px; font-size: var(--pp-fs-body); }
	.pp-dept-grid { columns: 1; }
	.pp-dept-card { margin-bottom: var(--pp-sp-2); border-radius: var(--pp-r-xl); }
	.pp-dept-card:hover { box-shadow: none; }
	.pp-dept-card__head {
		min-height: 60px;
		padding: var(--pp-sp-3) var(--pp-card-pad);
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}
	.pp-dept-card__title { font-size: var(--pp-fs-body-lg); letter-spacing: 0; }
	.pp-dept-card__toggle {
		display: grid;
		place-items: center;
		flex: 0 0 auto;
		width: 32px;
		height: 32px;
		border-radius: 50%;
		background: var(--pp-bg-sunken);
		color: var(--pp-text-2);
		transition: transform var(--pp-dur) var(--pp-ease), background var(--pp-dur) var(--pp-ease);
	}
	.pp-dept-card__toggle svg { width: 18px; height: 18px; }
	.pp-dept-card[open] { border-color: var(--pp-border-strong); }
	.pp-dept-card[open] .pp-dept-card__toggle {
		transform: rotate(180deg);
		background: var(--pp-dept-accent-soft);
		color: var(--pp-dept-accent);
	}
	.pp-dept-card__head:focus-visible { outline: none; box-shadow: inset var(--pp-focus-ring); }
	.pp-dept-card__body { padding: var(--pp-sp-2) var(--pp-card-pad) var(--pp-sp-2); }
	.pp-dept-card__foot { padding: 0 var(--pp-card-pad) var(--pp-card-pad); }
	.pp-dept-link { min-height: 48px; font-size: var(--pp-fs-sm); }
	.pp-dept-chip { padding: var(--pp-sp-1) var(--pp-sp-2); } /* comfortable tap target */
	.pp-dept-hero__actions .pp-btn { width: 100%; justify-content: center; }
	.pp-dept-feature__cta { width: 100%; justify-content: center; }
	.pp-dept-more__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* .pp-dept-browse__title,
	.pp-dept-more__title,
	.pp-dept-spotlight__step-hd { margin: 0 0 var(--pp-sp-1); } */
	.pp-dept-browse__title { font-size: var(--pp-fs-h4); }
	.pp-dept-spotlight__title { font-size: var(--pp-fs-h5); letter-spacing: var(--pp-ls-h5); }
}

@media (prefers-reduced-motion: reduce) {
	.pp-dept-card,
	.pp-dept-card__toggle,
	.pp-dept-jump,
	.pp-dept-jump__link,
	.pp-dept-link svg,
	.pp-dept-card__more svg { transition: none; }
}