/*
 * Component layer — every reusable block in handoff/COMPONENTS.md.
 *
 * COMPONENTS.md opens with "Build these once and reuse; do not duplicate
 * section markup per page", so each component below is styled here exactly
 * once and the templates in template-parts/components/ emit nothing but class
 * names. Values are transcribed from the design source (the .dc.html files),
 * not from the prose docs, wherever the two disagree.
 *
 * Deviations from the source, all deliberate and all zero-pixel:
 *   1. The empty image slot drops `cursor: pointer` and the "or browse files"
 *      sub-caption. Both are the design tool's own file-picker affordance and
 *      would ship as a broken promise to the customer.
 *   2. Spec tables are <dl>, the qty stepper is <button>/<input>, and the
 *      filter chips are radios. All render identically to the source's divs.
 */

/* ---------------------------------------------------------------------------
 * Image slot
 *
 * The design's <image-slot> renders a photo when one exists and a documented
 * empty state when one does not. Six of the sixteen Creative Kits have no
 * photography (client blocker B1), and they hit this state in five places, so
 * it is a real component rather than a fallback.
 *
 * IMPLEMENTATION.md and IMAGE-MAP.md both describe the empty state as "subtle
 * diagonal stripes". The component's own source, image-slot.js, contains no
 * repeating-linear-gradient at all; what follows is transcribed from it.
 * ------------------------------------------------------------------------ */

.al-slot {
	position: relative;
	overflow: hidden;
	border-radius: var(--al-slot-radius, 0);
}

.al-slot__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.al-slot__empty {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 12px;
	text-align: center;
	background: rgba(127, 127, 127, 0.08);
	/* The slot deliberately does not inherit the page's Montserrat. */
	font: 13px/1.3 system-ui, -apple-system, sans-serif;
	user-select: none;
}

/*
 * The dashed ring is an overlay rather than a border on the slot itself: the
 * source draws it at opacity .35 over currentColor, which a border cannot do
 * without hardcoding the resolved colour.
 */
.al-slot__empty::after {
	content: '';
	position: absolute;
	inset: 0;
	border: 1.5px dashed currentColor;
	border-radius: inherit;
	opacity: 0.35;
	pointer-events: none;
}

.al-slot__icon {
	opacity: 0.45;
}

.al-slot__caption {
	max-width: 90%;
	font-weight: 500;
	letter-spacing: 0.01em;
	opacity: 0.75;
}

/* Slot shapes. The caller picks one; the slot never sizes itself. */
.al-slot--square {
	aspect-ratio: 1 / 1;
}

.al-slot--fill {
	width: 100%;
	height: 100%;
}

/* ---------------------------------------------------------------------------
 * Hero banner
 *
 * One component, three heights and two overlay gradients. The overlay exists
 * only to keep the text legible over the photograph, which is why RESPONSIVE.md
 * removes it once the text stops sitting on top of the image.
 * ------------------------------------------------------------------------ */

.al-hero {
	position: relative;
	height: var(--al-hero-height, 380px);
}

.al-hero--tall {
	--al-hero-height: 620px;
}

.al-hero--short {
	--al-hero-height: 380px;
}

.al-hero--mid {
	--al-hero-height: 420px;
}

.al-hero__media {
	position: absolute;
	inset: 0;
}

.al-hero__scrim {
	position: absolute;
	inset: 0;
	background: var(--al-hero-overlay-category);
	pointer-events: none;
}

.al-hero--home .al-hero__scrim {
	background: var(--al-hero-overlay-home);
}

.al-hero__inner {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	padding-left: var(--al-hero-indent);
	/*
	 * Source-literal. The overlay column covers the whole hero, so without
	 * this it would swallow clicks meant for anything beneath it.
	 */
	pointer-events: none;
}

.al-hero__text {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: var(--al-hero-text-max, 440px);
}

.al-hero__title {
	font-family: var(--al-font-serif);
	font-weight: var(--al-weight-medium);
	font-size: var(--al-h1-category);
	line-height: var(--al-h1-line-hero);
	color: var(--al-heading);
}

.al-hero__eyebrow {
	letter-spacing: var(--al-eyebrow-tracking-hero);
}

.al-hero__lede {
	font-size: var(--al-body-size-lg);
	font-weight: var(--al-weight-light);
	line-height: var(--al-body-line);
	color: var(--al-body-mid);
}

/* Anything interactive inside the hero has to opt back in. */
.al-hero__inner a,
.al-hero__inner button {
	pointer-events: auto;
}

/* ---------------------------------------------------------------------------
 * Section heading
 *
 * Two arrangements: centred with a rule beneath, or a baseline-aligned row
 * with a "view all" link opposite.
 * ------------------------------------------------------------------------ */

.al-heading {
	font-family: var(--al-font-serif);
	font-weight: var(--al-weight-medium);
	color: var(--al-heading);
}

.al-section-heading--centred {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-align: center;
}

.al-section-heading--centred .al-heading {
	font-size: var(--al-h2-md);
}

.al-section-heading--split {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}

.al-section-heading--split .al-heading {
	font-size: var(--al-h2-xs);
}

.al-section-heading__link {
	font-size: var(--al-caption-lg);
	color: var(--al-plum-light);
}

/* ---------------------------------------------------------------------------
 * Product card — décor archive, "Pairs beautifully with", search, homepage
 *
 * The card background is the inverse of whatever band it sits in: cream on the
 * ivory archive, ivory on the cream "pairs with" band. The caller sets it.
 * ------------------------------------------------------------------------ */

.al-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--al-radius-card);
	background: var(--al-card-bg, var(--al-cream));
	transition: transform var(--al-transition-lift), box-shadow var(--al-transition-lift);
}

.al-card:hover {
	transform: translateY(var(--al-lift-card));
	box-shadow: var(--al-shadow-card-hover);
	/* Source-literal: the card refuses the global link-hover colour change. */
	color: var(--al-body);
}

.al-card--on-cream {
	--al-card-bg: var(--al-ivory);
}

.al-card__body {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 20px 20px;
}

.al-card__text {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.al-card__name {
	font-size: var(--al-body-size-lg);
	font-weight: var(--al-weight-medium);
	color: var(--al-heading);
}

.al-card__category {
	font-size: var(--al-caption-sm);
	color: var(--al-muted);
}

.al-card__price {
	font-family: var(--al-font-serif);
	font-size: var(--al-price-card-lg);
	color: var(--al-plum-light);
}

/* The related-products strip drops the category and steps the price down 1px. */
.al-card--compact .al-card__price {
	font-size: var(--al-price-card-sm);
}

/* ---------------------------------------------------------------------------
 * Kit card
 *
 * Structurally unlike the product card, not a variant of it: a tinted body, a
 * serif name, a description, an "Explore" affordance, no price, a fixed image
 * height rather than a square, and the deeper of the two hover lifts.
 * ------------------------------------------------------------------------ */

.al-kit-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--al-radius-card-lg);
	background: var(--al-hue);
	transition: transform var(--al-transition-lift), box-shadow var(--al-transition-lift);
}

.al-kit-card:hover {
	transform: translateY(var(--al-lift-feature));
	box-shadow: var(--al-shadow-feature-hover);
	color: var(--al-body);
}

.al-kit-card__media {
	height: 220px;
}

.al-kit-card__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 22px 26px 26px;
}

.al-kit-card__name {
	font-family: var(--al-font-serif);
	font-size: var(--al-h3-kit-card);
	color: var(--al-heading);
}

.al-kit-card__desc {
	font-size: var(--al-card-desc-size);
	font-weight: var(--al-weight-light);
	color: var(--al-body-soft);
}

.al-kit-card__more {
	margin-top: 8px;
	font-size: var(--al-link-inline-size);
	letter-spacing: var(--al-link-inline-tracking);
	color: var(--al-plum-light);
}

/*
 * The "More Creative Kits" strip: a fourth-width card that keeps the product
 * card's radius and lift but the kit card's name-only body.
 */
.al-kit-card--strip {
	border-radius: var(--al-radius-card);
	background: var(--al-ivory);
}

.al-kit-card--strip:hover {
	transform: translateY(var(--al-lift-card));
	box-shadow: var(--al-shadow-card-hover);
}

.al-kit-card--strip .al-kit-card__media {
	height: 170px;
}

.al-kit-card--strip .al-kit-card__body {
	padding: 14px 18px 18px;
}

.al-kit-card--strip .al-kit-card__name {
	font-family: var(--al-font-sans);
	font-size: var(--al-body-size);
	font-weight: var(--al-weight-medium);
}

/* ---------------------------------------------------------------------------
 * Product grids
 * ------------------------------------------------------------------------ */

.al-grid {
	display: grid;
	gap: var(--al-grid-gap);
}

.al-grid--4 {
	grid-template-columns: repeat(4, 1fr);
}

.al-grid--3 {
	grid-template-columns: repeat(3, 1fr);
}

/* The kit strip is the one grid that tightens its gap. */
.al-grid--strip {
	grid-template-columns: repeat(4, 1fr);
	gap: var(--al-grid-gap-strip-lg);
}

/* ---------------------------------------------------------------------------
 * Breadcrumbs
 * ------------------------------------------------------------------------ */

.al-breadcrumbs {
	font-size: var(--al-caption-lg);
	color: var(--al-muted);
}

/*
 * The source is one flat row of links and slashes with an 8px gap. Nesting the
 * separator inside its own crumb reproduces that spacing exactly — three items
 * at 8px, each carrying its trailing slash 8px away — while keeping the list
 * structure a screen reader needs.
 */
.al-breadcrumbs__list,
.al-breadcrumbs li {
	display: flex;
	gap: 8px;
}

.al-breadcrumbs a {
	color: var(--al-muted);
}

.al-breadcrumbs__current {
	color: var(--al-body-mid);
}

/* ---------------------------------------------------------------------------
 * Spec table
 *
 * Décor lists Material, Size, Best for, Care and Delivery. Kits list Includes,
 * Best for and Material only — no Delivery row. That asymmetry is in the
 * source and is reproduced rather than harmonised.
 * ------------------------------------------------------------------------ */

.al-specs {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--al-border-spec);
}

.al-specs__row {
	display: flex;
	justify-content: space-between;
	padding: 14px 0;
	border-bottom: 1px solid var(--al-border-spec);
	font-size: var(--al-card-desc-size-lg);
}

.al-specs__label {
	color: var(--al-muted);
}

.al-specs__value {
	margin: 0;
	color: var(--al-heading);
}

/* ---------------------------------------------------------------------------
 * Callout box
 * ------------------------------------------------------------------------ */

.al-callout {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 18px 22px;
	border-radius: var(--al-radius-callout);
	background: var(--al-lavender-t1);
}

.al-callout__title {
	font-size: var(--al-card-desc-size);
	font-weight: var(--al-weight-medium);
	color: var(--al-plum-deep);
}

.al-callout__body {
	font-size: var(--al-card-desc-size);
	font-weight: var(--al-weight-light);
	line-height: var(--al-card-desc-line);
	color: var(--al-body-soft);
}

.al-callout__body a {
	color: var(--al-plum-light);
}

/* ---------------------------------------------------------------------------
 * Quantity stepper
 *
 * The source draws three spans. This ships two buttons and a number input so
 * the control works without JavaScript and announces itself to a screen
 * reader; the input is stripped back to render pixel-identically to the span.
 * ------------------------------------------------------------------------ */

.al-qty {
	display: flex;
	align-items: center;
	border: 1px solid var(--al-border-control);
	border-radius: var(--al-radius-pill);
}

.al-qty__btn {
	padding: 12px 18px;
	color: var(--al-muted);
	line-height: 1;
	user-select: none;
}

.al-qty__input {
	width: 24px;
	min-width: 24px;
	padding: 0;
	border: 0;
	background: none;
	font-size: 14px;
	text-align: center;
	appearance: textfield;
}

.al-qty__input::-webkit-outer-spin-button,
.al-qty__input::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

/* ---------------------------------------------------------------------------
 * Add to cart
 *
 * The button and the stepper share a row; the button takes the remainder.
 * ------------------------------------------------------------------------ */

.al-buy {
	display: flex;
	align-items: center;
	gap: 14px;
}

.al-buy__submit {
	flex: 1;
	padding: 14px 32px;
	transition: background var(--al-transition);
}

/* ---------------------------------------------------------------------------
 * Dot list
 *
 * Used for "Every kit includes". The dot colours cycle lavender, sage, sand,
 * rose — the strong variants, which are not the card tints.
 * ------------------------------------------------------------------------ */

.al-dot-list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin-top: 10px;
}

.al-dot-list__item {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: var(--al-body-size);
	color: var(--al-heading);
}

.al-dot-list__item::before {
	content: '';
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--al-dot, var(--al-lavender));
}

.al-dot-list__item:nth-child(4n + 1) { --al-dot: var(--al-lavender); }
.al-dot-list__item:nth-child(4n + 2) { --al-dot: var(--al-sage-strong-alt); }
.al-dot-list__item:nth-child(4n + 3) { --al-dot: var(--al-sand-strong-alt); }
.al-dot-list__item:nth-child(4n + 4) { --al-dot: var(--al-rose-strong); }

/* ---------------------------------------------------------------------------
 * Value strip — the three trust marks under the décor grid
 * ------------------------------------------------------------------------ */

.al-value-strip {
	display: flex;
	justify-content: center;
	gap: 72px;
	padding-top: 40px;
	border-top: 1px solid var(--al-border-section);
}

.al-value-strip__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	font-size: var(--al-caption-lg);
	color: var(--al-body-mid);
}

.al-value-strip__item::before {
	content: '';
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--al-dot, var(--al-lavender));
}

.al-value-strip__item:nth-child(3n + 1) { --al-dot: var(--al-lavender); }
.al-value-strip__item:nth-child(3n + 2) { --al-dot: var(--al-sage-strong-alt); }
.al-value-strip__item:nth-child(3n + 3) { --al-dot: var(--al-sand-strong-alt); }