/* ═══════════════════════════════════════════════════════════════════════════
   /categories, laid out as warehouse aisles. Loaded only by
   pages/categories.php. Same language as the homepage (home.css): a short
   dark hero, then full-width bands alternating cream and sand.

   1. Hero          short ink band, breadcrumb, title
   2. Jump bar      aisle links, stuck under the header while scrolling
   3. Aisle bands   a hanging "AISLE 01" sign, then one row of category cards
                    on desktop; the biggest category leads, wide enough to
                    fill the row (--lead-span, set per aisle by the view)
   4. Other ways    a dark closing band linking the non-category hubs
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
	--cat-band: var(--color-bg);
	--cat-band-alt: #f0e8dc;
	--cat-band-edge: #e6dccd;
	--cat-ink: var(--retro-navy);
	--cat-pad: clamp(1.75rem, 3.5vw, 2.75rem);
}

/* ── 1. Hero ─────────────────────────────────────────────────────────────── */

.cat-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	color: #fff;
	background: var(--cat-ink);
	padding: 1rem 0 1.5rem;
}

/* A faint candy-stripe in the corner: the awning over the aisles. */
.cat-hero::after {
	content: "";
	position: absolute;
	z-index: -1;
	top: -40%;
	right: -6%;
	width: 46%;
	height: 180%;
	transform: rotate(12deg);
	background: repeating-linear-gradient(90deg,
		rgba(0, 202, 203, 0.14) 0 22px,
		transparent 22px 44px,
		rgba(210, 30, 42, 0.12) 44px 66px,
		transparent 66px 88px);
	mask-image: linear-gradient(90deg, transparent, #000 45%);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 45%);
}

.cat-crumbs {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 0.9rem;
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.55);
}

.cat-crumbs a {
	color: var(--color-primary);
	text-decoration: none;
}

.cat-crumbs a:hover {
	text-decoration: underline;
}

.cat-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.4rem;
	font-family: var(--font-heading);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--retro-yellow);
}

.cat-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-primary);
	box-shadow: 0 0 0 4px rgba(0, 202, 203, 0.25);
}

.cat-title {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(2.25rem, 4.6vw, 3.5rem);
	line-height: 0.95;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.cat-title em {
	font-style: normal;
	color: var(--color-primary);
}

.cat-sub {
	margin: 0.55rem 0 0;
	max-width: 36rem;
	font-size: 1rem;
	color: rgba(255, 255, 255, 0.8);
}

/* ── 2. Jump bar ─────────────────────────────────────────────────────────── */

.cat-jump {
	position: sticky;
	/* Overwritten by the page script with the header's real height, which
	   differs between desktop and phone and changes when it compacts. */
	top: var(--cat-jump-top, var(--sticky-top));
	z-index: 40;
	background: rgba(24, 18, 12, 0.96);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.cat-jump-track {
	list-style: none;
	margin: 0;
	padding: 0.55rem 0;
	display: flex;
	gap: 0.5rem;
	overflow-x: auto;
	scrollbar-width: none;
	scroll-snap-type: x proximity;
}

.cat-jump-track::-webkit-scrollbar {
	display: none;
}

.cat-jump-track li {
	flex: 0 0 auto;
	scroll-snap-align: start;
}

.cat-jump-link {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.3rem 0.85rem 0.3rem 0.3rem;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
	font-family: var(--font-heading);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.cat-jump-num {
	display: grid;
	place-items: center;
	min-width: 1.9rem;
	height: 1.9rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: 0.5px;
	color: var(--retro-yellow);
}

.cat-jump-link:hover,
.cat-jump-link.is-active {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: #034849;
}

.cat-jump-link:hover .cat-jump-num,
.cat-jump-link.is-active .cat-jump-num {
	background: var(--cat-ink);
}

/* ── 3. Aisle bands ──────────────────────────────────────────────────────── */

.cat-band {
	background: var(--cat-band);
	padding: var(--cat-pad) 0;
	/* Anchor jumps land below the header and the jump bar, not under them. */
	scroll-margin-top: calc(var(--cat-jump-top, var(--sticky-top)) + 52px);
}

.cat-band-alt {
	background: var(--cat-band-alt);
	border-top: 1px solid var(--cat-band-edge);
	border-bottom: 1px solid var(--cat-band-edge);
}

.cat-aisle-head {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.25rem;
}

/* The hanging aisle sign: navy plate, yellow numerals, a red hanger bar. */
.cat-aisle-sign {
	position: relative;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 4.25rem;
	height: 4.25rem;
	border-radius: var(--radius-md);
	background: var(--cat-ink);
	color: var(--retro-yellow);
	font-family: var(--font-display);
	font-size: 2.1rem;
	line-height: 1;
	padding-top: 0.6rem;
	box-shadow: 0 3px 0 var(--color-primary);
}

.cat-aisle-sign::before {
	content: "";
	position: absolute;
	top: -6px;
	left: 22%;
	right: 22%;
	height: 6px;
	border-radius: 3px 3px 0 0;
	background: var(--retro-red);
}

.cat-aisle-sign small {
	position: absolute;
	top: 0.4rem;
	left: 0;
	right: 0;
	text-align: center;
	font-family: var(--font-heading);
	font-size: 0.5625rem;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
}

.cat-aisle-text {
	flex: 1 1 auto;
	min-width: 0;
}

.cat-aisle-title {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(1.6rem, 2.6vw, 2.1rem);
	line-height: 1;
	letter-spacing: 0.75px;
	text-transform: uppercase;
	color: var(--cat-ink);
}

.cat-aisle-desc {
	margin: 0.3rem 0 0;
	font-size: 0.9375rem;
	color: var(--color-text-muted);
}

.cat-aisle-count {
	flex: 0 0 auto;
	align-self: flex-end;
	padding: 0.25rem 0.7rem;
	border-radius: 999px;
	background: var(--color-primary-wash);
	color: var(--color-primary-deep);
	font-family: var(--font-heading);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.75px;
	text-transform: uppercase;
}

/* Cards */

.cat-grid {
	--cols: 6;
	--span: var(--lead-span, 2);
	--gap: 1rem;
	display: grid;
	grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
	gap: var(--gap);
}

.cat-card {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 0.75rem;
	border-radius: var(--radius-lg);
	background: var(--color-surface);
	border: 1px solid var(--color-border-light);
	box-shadow: var(--shadow-sm);
	color: inherit;
	text-decoration: none;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.cat-band-alt .cat-card {
	border-color: var(--cat-band-edge);
	box-shadow: var(--shadow-md);
}

.cat-card:hover {
	transform: translateY(-3px);
	border-color: var(--color-primary);
	box-shadow: 0 4px 0 var(--color-primary), var(--shadow-lg);
}

.cat-mosaic {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
	padding: 6px;
	border-radius: var(--radius-md);
	background: var(--color-surface-subtle);
	aspect-ratio: 1;
}

.cat-mosaic-cell {
	display: grid;
	place-items: center;
	overflow: hidden;
	border-radius: 8px;
	background: #fff;
	transition: transform 0.25s ease;
}

.cat-mosaic-cell img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 6%;
}

.cat-mosaic-cell.is-empty {
	font-family: var(--font-display);
	font-size: 1.75rem;
	color: var(--color-primary-dark);
	background: var(--color-primary-wash);
}

/* On hover the four tiles nudge apart, like a box being opened. */
.cat-card:hover .cat-mosaic-cell:nth-child(1) { transform: translate(-2px, -2px) rotate(-1.5deg); }
.cat-card:hover .cat-mosaic-cell:nth-child(2) { transform: translate(2px, -2px) rotate(1.5deg); }
.cat-card:hover .cat-mosaic-cell:nth-child(3) { transform: translate(-2px, 2px) rotate(1deg); }
.cat-card:hover .cat-mosaic-cell:nth-child(4) { transform: translate(2px, 2px) rotate(-1deg); }

.cat-card-body {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	flex: 1 1 auto;
	padding: 0 0.25rem 0.15rem;
}

.cat-card-name {
	margin: 0;
	font-family: var(--font-heading);
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: var(--cat-ink);
}

.cat-card-desc {
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--color-text-muted);
}

.cat-card-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-top: auto;
	padding-top: 0.45rem;
}

.cat-card-count {
	font-family: var(--font-heading);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--color-primary-dark);
}

.cat-card-go {
	font-family: var(--font-heading);
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--color-accent);
	transition: transform 0.15s ease;
}

.cat-card:hover .cat-card-go {
	transform: translateX(3px);
}

/* Lead card: the aisle's biggest department, spanning --span columns.
   Its mosaic is one column wide, so the lead is exactly as tall as the
   small cards beside it, and the rest of its width is text. */
.cat-card-lead {
	grid-column: span var(--span);
	flex-direction: row;
	align-items: center;
	gap: 1rem;
	background:
		radial-gradient(circle at 100% 0, var(--color-primary-wash), transparent 60%),
		var(--color-surface);
}

.cat-card-lead .cat-mosaic {
	flex: 0 0 calc((100% - (var(--span) - 1) * var(--gap)) / var(--span));
}

.cat-card-lead .cat-card-body {
	gap: 0.5rem;
	padding: 0.25rem 0.5rem 0.25rem 0;
}

.cat-card-lead .cat-card-name {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(1.5rem, 2.2vw, 2.1rem);
	letter-spacing: 0.75px;
	line-height: 1;
}

.cat-card-lead .cat-card-desc {
	font-size: 0.9375rem;
}

.cat-card-lead .cat-card-foot {
	flex-direction: column;
	align-items: flex-start;
	gap: 0.6rem;
	margin-top: 0.35rem;
}

.cat-card-lead .cat-card-go {
	padding: 0.45rem 0.95rem;
	border-radius: var(--radius-sm);
	background: var(--color-accent);
	color: #fff;
	font-size: 0.875rem;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.cat-card-lead:hover .cat-card-go {
	transform: none;
	background: var(--color-accent-hover);
}

/* A lead three or four columns wide has room to lay its four photos out as
   one strip, two columns long, at the same tile size as the small cards.
   On tablet every lead is a full row, so every lead gets the strip. */
@media (min-width: 1101px) {
	.cat-card-lead-wide .cat-mosaic {
		flex-basis: calc((100% - (var(--span) - 2) * var(--gap)) * 2 / var(--span));
		grid-template-columns: repeat(4, 1fr);
		aspect-ratio: 4 / 1;
	}
}

@media (min-width: 641px) and (max-width: 1100px) {
	.cat-card-lead .cat-mosaic {
		flex-basis: calc((100% - (var(--span) - 2) * var(--gap)) * 2 / var(--span));
		grid-template-columns: repeat(4, 1fr);
		aspect-ratio: 4 / 1;
	}
}

/* Small cards are narrow on six columns: the blurb is clamped to two lines. */
.cat-card:not(.cat-card-lead):not(.cat-card-help) .cat-card-desc {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 0.75rem;
}

.cat-card:not(.cat-card-lead) .cat-card-name {
	font-size: 0.9375rem;
}

/* "Looking for something?" fills an odd last slot. */
.cat-card-help {
	display: none;
	justify-content: center;
	background: transparent;
	border: 2px dashed var(--color-border);
	box-shadow: none;
}

.cat-band-alt .cat-card-help {
	border-color: #d8cab4;
	box-shadow: none;
}

.cat-help-icon {
	display: grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	margin: 0 0.25rem;
	border-radius: 50%;
	background: var(--color-primary-wash);
	font-size: 1.5rem;
}

.cat-card-help .cat-card-body {
	flex: 0 0 auto;
}

/* ── 4. Other ways to shop ───────────────────────────────────────────────── */

.cat-band-ink {
	background: var(--cat-ink);
}

.cat-band-ink .cat-aisle-title {
	color: #fff;
}

.cat-band-ink .cat-aisle-desc {
	color: rgba(255, 255, 255, 0.7);
}

.cat-band-ink .cat-aisle-sign {
	background: var(--color-primary);
	color: var(--cat-ink);
	box-shadow: 0 3px 0 var(--retro-yellow);
}

.cat-band-ink .cat-aisle-sign small {
	color: rgba(24, 18, 12, 0.6);
}

.cat-ways {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.75rem;
}

.cat-way {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	height: 100%;
	padding: 0.85rem 1rem;
	border-radius: var(--radius-md);
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: #fff;
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.cat-way:hover {
	background: rgba(0, 202, 203, 0.14);
	border-color: var(--color-primary);
	transform: translateY(-2px);
}

.cat-way-icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	font-size: 1.35rem;
}

.cat-way strong {
	display: block;
	font-family: var(--font-heading);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.4px;
	text-transform: uppercase;
}

.cat-way small {
	display: block;
	margin-top: 0.1rem;
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.65);
}

/* ── Load: cards rise in, staggered, once. ───────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
	.cat-grid .cat-card {
		animation: cat-rise 0.45s ease both;
	}

	.cat-grid .cat-card:nth-child(2) { animation-delay: 0.04s; }
	.cat-grid .cat-card:nth-child(3) { animation-delay: 0.08s; }
	.cat-grid .cat-card:nth-child(4) { animation-delay: 0.12s; }
	.cat-grid .cat-card:nth-child(5) { animation-delay: 0.16s; }
	.cat-grid .cat-card:nth-child(n+6) { animation-delay: 0.2s; }
}

@keyframes cat-rise {
	from { opacity: 0; transform: translateY(10px); }
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
	.cat-ways {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Tablet: four columns, the lead takes a full row of its own. */
@media (max-width: 1100px) {
	.cat-grid {
		--cols: 4;
		--span: 4;
	}

	.cat-card:not(.cat-card-lead):not(.cat-card-help) .cat-card-desc {
		display: none;
	}
}

@media (max-width: 640px) {
	.cat-grid {
		--cols: 2;
		--span: 2;
		--gap: 0.6rem;
	}

	.cat-card-help {
		display: flex;
	}

	.cat-hero {
		padding: 0.75rem 0 1.1rem;
	}

	.cat-hero::after {
		width: 70%;
		opacity: 0.6;
	}

	.cat-sub {
		font-size: 0.9375rem;
	}

	.cat-aisle-head {
		gap: 0.75rem;
		margin-bottom: 0.9rem;
	}

	.cat-aisle-sign {
		width: 3.25rem;
		height: 3.25rem;
		font-size: 1.6rem;
		padding-top: 0.5rem;
	}

	.cat-aisle-sign small {
		top: 0.3rem;
		font-size: 0.5rem;
		letter-spacing: 1.5px;
	}

	.cat-aisle-desc {
		font-size: 0.8125rem;
	}

	/* No room beside the title on a phone; the cards carry their own counts. */
	.cat-aisle-count {
		display: none;
	}

	.cat-card {
		gap: 0.5rem;
		padding: 0.5rem;
		border-radius: var(--radius-md);
	}

	.cat-mosaic {
		gap: 4px;
		padding: 4px;
		border-radius: 8px;
	}

	.cat-mosaic-cell {
		border-radius: 6px;
	}

	.cat-card-body {
		padding: 0 0.2rem 0.1rem;
	}

	.cat-card-name {
		font-size: 0.9375rem;
	}

	.cat-card-foot {
		padding-top: 0.2rem;
	}

	.cat-card-lead {
		gap: 0.75rem;
	}

	.cat-card-lead .cat-card-name {
		font-size: 1.4rem;
	}

	.cat-card-lead .cat-card-desc {
		font-size: 0.8125rem;
	}

	.cat-card-lead .cat-card-go {
		padding: 0.35rem 0.7rem;
		font-size: 0.75rem;
	}

	.cat-help-icon {
		width: 2.5rem;
		height: 2.5rem;
		font-size: 1.2rem;
	}

	.cat-ways {
		grid-template-columns: 1fr;
		gap: 0.5rem;
	}

	.cat-way {
		padding: 0.7rem 0.85rem;
	}
}