/*
 * WooCommerce pages — the layouts that wrap the shared components.
 *
 * Only page-level structure lives here. Cards, heroes, grids, chips and buttons
 * are defined once in components.css and base.css and are merely arranged by
 * the rules below; where a Woo page needs a card to differ, it does so through
 * a modifier on the component, not by restating it.
 */

/* ---------------------------------------------------------------------------
 * Product archive — "Decorate Your Space"
 * ------------------------------------------------------------------------ */

.al-archive {
	display: flex;
	flex-direction: column;
	gap: 40px;
	padding-block: 48px 88px;
}

/* The chip row and its count sit on one line, the count hard against the end. */
.al-archive__bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
}

.al-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.al-archive__count {
	font-size: var(--al-caption-lg);
	color: var(--al-muted);
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
 * Product archive — "Create Something Together"
 *
 * No chip row and no count: the sixteen kits are the collections, so the whole
 * category is already on screen and there is nothing left to filter to.
 * ------------------------------------------------------------------------ */

.al-archive--kits {
	gap: 44px;
	padding-block: var(--al-section-padding);
}

.al-includes {
	background: var(--al-cream);
	border-top: 1px solid var(--al-border-section);
	border-bottom: 1px solid var(--al-border-section);
	padding-block: var(--al-section-padding);
}

.al-includes__inner {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.al-includes__title {
	font-size: var(--al-h2-sm);
}

.al-includes__lede {
	max-width: 380px;
	font-size: var(--al-body-size);
	font-weight: var(--al-weight-light);
	line-height: var(--al-body-line);
	color: var(--al-body-mid);
}

/* ---------------------------------------------------------------------------
 * Single product
 *
 * Both pages share this frame. Only the media box differs: décor is square,
 * a kit is a fixed 560px tall.
 * ------------------------------------------------------------------------ */

.al-crumbs {
	padding-top: 28px;
}

.al-product {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 64px;
	align-items: start;
	padding-block: 28px var(--al-section-padding);
}

.al-product__media {
	overflow: hidden;
	border-radius: var(--al-radius-card-lg);
}

.al-product__media--square {
	aspect-ratio: 1 / 1;
}

.al-product__media--tall {
	height: 560px;
}

/*
 * The gallery (client addition, 30 Sep): the photograph box as designed, and a
 * row of thumbnails beneath with the chosen-tile ring from Make It Personal.
 */
.al-product__gallery {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}

.al-gallery__slide {
	height: 100%;
}

/* While a chosen photograph downloads, the one showing dims; see gallery.js. */
.al-product__gallery .al-product__media {
	transition: opacity var(--al-transition-fast);
}

.al-product__gallery.is-loading .al-product__media {
	opacity: 0.6;
}

.al-gallery__thumbs {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 10px;
}

.al-gallery__thumb {
	position: relative;
	aspect-ratio: 1 / 1;
	padding: 0;
	border: 0;
	border-radius: var(--al-radius-sm);
	background: var(--al-cream);
	cursor: pointer;
	opacity: 0.72;
	outline: 1.5px solid transparent;
	outline-offset: 3px;
	transition: opacity var(--al-transition-fast), outline-color var(--al-transition-fast);
}

.al-gallery__thumb .al-slot {
	position: absolute;
	inset: 0;
}

.al-gallery__thumb:hover {
	opacity: 1;
}

.al-gallery__thumb[aria-pressed="true"] {
	opacity: 1;
	outline-color: var(--al-lavender);
}

/*
 * The panel outlasts the image on the way down the page. `top` clears the
 * sticky navigation rather than the viewport edge.
 */
.al-product__panel {
	display: flex;
	flex-direction: column;
	gap: 22px;
	position: sticky;
	top: 96px;
}

.al-product__head {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.al-product__title {
	font-size: var(--al-h1-product);
}

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

.al-product__lede {
	max-width: 400px;
	font-size: var(--al-body-size-lg);
	font-weight: var(--al-weight-light);
	line-height: var(--al-body-line-loose);
	color: var(--al-body-mid);
}

/* The cream band under both product pages. */
.al-related {
	background: var(--al-cream);
	border-top: 1px solid var(--al-border-section);
	padding-block: var(--al-section-padding);
}

.al-related__inner {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

/* ---------------------------------------------------------------------------
 * Cart
 *
 * Line-item cards beside a sticky summary. The summary is shared with the
 * checkout, which is why it lives under its own heading below rather than here.
 * ------------------------------------------------------------------------ */

.al-cart {
	display: flex;
	flex-direction: column;
	gap: 36px;
	padding-block: var(--al-page-padding);
}

.al-cart__head {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.al-cart__title {
	font-size: var(--al-h1-product);
}

.al-cart__count {
	font-size: var(--al-card-desc-size-lg);
	font-weight: var(--al-weight-light);
	color: var(--al-muted);
}

.al-cart__body {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 48px;
	align-items: start;
}

.al-cart__items,
.al-cart__list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.al-line {
	display: grid;
	grid-template-columns: 110px 1fr auto auto;
	gap: 22px;
	align-items: center;
	background: var(--al-cream);
	border: 1px solid var(--al-border-section);
	border-radius: var(--al-radius-card-lg);
	padding: 18px;
}

.al-line__thumb {
	width: 110px;
	height: 110px;
}

.al-line__text {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.al-line__name {
	font-size: var(--al-cart-name-size);
	font-weight: var(--al-weight-medium);
	color: var(--al-heading);
	transition: color var(--al-transition);
}

.al-line__name:hover {
	color: var(--al-plum-light);
}

.al-line__kind {
	font-size: var(--al-caption-md);
	color: var(--al-muted);
}

.al-line__unit {
	font-size: var(--al-caption-lg);
	color: var(--al-body-soft);
}

/* The column is sized so a two- and a three-digit total do not shift the row. */
.al-line__end {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	min-width: 82px;
}

.al-line__total {
	font-family: var(--al-font-serif);
	font-size: var(--al-price-line);
	color: var(--al-plum-deep);
}

.al-line__remove {
	font-size: var(--al-caption-md);
	color: var(--al-faint);
	transition: color var(--al-transition);
}

/* The one destructive control in the design, and the only place rose is a hover. */
.al-line__remove:hover,
.al-cart__empty:hover {
	color: var(--al-rose-text);
}

.al-cart__actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding-top: 8px;
}

.al-cart__continue {
	font-size: var(--al-card-desc-size-lg);
	color: var(--al-plum-light);
}

.al-cart__empty {
	font-size: var(--al-caption-lg);
	color: var(--al-faint);
	transition: color var(--al-transition);
}

/* ---------------------------------------------------------------------------
 * Order Summary — the cart and the checkout share this panel
 * ------------------------------------------------------------------------ */

.al-summary {
	display: flex;
	flex-direction: column;
	gap: 18px;
	background: var(--al-cream);
	border: 1px solid var(--al-border-section);
	border-radius: var(--al-radius-feature);
	padding: 30px;
	position: sticky;
	/* Clears the sticky navigation on the cart; the checkout has none. */
	top: 96px;
}

.al-summary--checkout {
	top: 32px;
}

.al-summary__title {
	font-family: var(--al-font-serif);
	font-weight: var(--al-weight-regular);
	font-size: var(--al-h3-lg);
	color: var(--al-heading);
}

.al-summary__items {
	display: flex;
	flex-direction: column;
	gap: 14px;
	border-top: 1px solid var(--al-border-spec);
	padding-top: 18px;
}

.al-summary__item {
	display: grid;
	grid-template-columns: 56px 1fr auto;
	gap: 14px;
	align-items: center;
}

.al-summary__thumb {
	width: 56px;
	height: 56px;
}

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

.al-summary__item-name {
	font-size: var(--al-card-desc-size-lg);
	color: var(--al-heading);
}

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

.al-summary__item-total {
	font-size: var(--al-card-desc-size-lg);
	color: var(--al-plum-deep);
}

.al-summary__lines {
	display: flex;
	flex-direction: column;
	gap: 12px;
	border-top: 1px solid var(--al-border-spec);
	padding-top: 18px;
}

.al-summary__line {
	display: flex;
	justify-content: space-between;
	font-size: var(--al-body-size);
}

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

.al-summary__line dd {
	color: var(--al-heading);
}

.al-summary__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	border-top: 1px solid var(--al-border-spec);
	padding-top: 18px;
}

.al-summary__total-label {
	font-size: var(--al-body-size);
	color: var(--al-body-mid);
}

.al-summary__total-value {
	font-family: var(--al-font-serif);
	font-size: var(--al-price-total);
	color: var(--al-plum-deep);
}

.al-summary__note {
	font-size: var(--al-caption-md);
	font-weight: var(--al-weight-light);
	line-height: var(--al-card-desc-line);
	color: var(--al-muted);
}

.al-summary__cta {
	padding: 15px 32px;
	font-size: var(--al-body-size-lg);
}

.al-summary__legal {
	font-size: var(--al-caption-sm);
	font-weight: var(--al-weight-light);
	line-height: var(--al-card-desc-line);
	color: var(--al-muted);
	text-align: center;
}

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

.al-summary__reassurance {
	display: flex;
	flex-direction: column;
	gap: 8px;
	border-top: 1px solid var(--al-border-spec);
	padding-top: 16px;
	font-size: var(--al-caption-md);
	color: var(--al-body-soft);
}

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

/* ---------------------------------------------------------------------------
 * Checkout
 *
 * The form is WooCommerce's, so each input arrives wrapped in a
 * <p class="form-row"> holding a <span class="woocommerce-input-wrapper">. Both
 * are made transparent rather than removed — Woo's own script addresses them
 * when it marks a field invalid, and the design's spacing comes from the flex
 * gap on the section either way.
 * ------------------------------------------------------------------------ */

.al-checkout {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: 56px;
	align-items: start;
	padding-block: 48px 72px;
}

.al-checkout__main {
	display: flex;
	flex-direction: column;
	gap: 36px;
}

/* The steps of a single-page form, so they mark position rather than link. */
.al-steps {
	display: flex;
	align-items: center;
	gap: 10px;
}

.al-step {
	display: flex;
	align-items: center;
	gap: 10px;
}

.al-step__n {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--al-lavender-t2);
	font-size: var(--al-caption-lg);
	color: var(--al-plum-deep);
}

.al-step__name {
	font-size: var(--al-card-desc-size-lg);
	color: var(--al-heading);
}

/*
 * The design draws the connector inside the repeated step, so one trails the
 * third as well. Reproduced rather than corrected.
 */
.al-step__rule {
	width: 34px;
	height: 1px;
	background: var(--al-border-connector);
}

.al-fieldset {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.al-fieldset__title {
	font-family: var(--al-font-serif);
	font-weight: var(--al-weight-medium);
	font-size: var(--al-h2-2xs);
	color: var(--al-heading);
}

.al-field-row {
	display: grid;
	gap: 14px;
}

.al-field-row--2 {
	grid-template-columns: 1fr 1fr;
}

.al-field-row--3 {
	grid-template-columns: 1fr 1fr 1fr;
}

.al-field .woocommerce-input-wrapper {
	display: block;
}

/* An inline-block textarea sits on the baseline of the line box its wrapper
   opens, and the strut's descender is left under it — 4px the design does not
   have. The design's inputs are flex items, so they compute to block. */
.al-field .al-input {
	display: block;
}

/* `.al-input` itself is in components.css; the events quote form uses it too. */

/*
 * The design draws three rows. Woo's textarea template hardcodes rows="2", so
 * the height is set here rather than by overriding the attribute: 3 lines at
 * the body size plus the input's own padding and border.
 */
.al-input--area {
	min-height: 78px;
	resize: vertical;
}

.al-ship {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 6px;
	/* A fieldset carries margin-inline: 2px from the UA sheet, which would inset
	   the delivery cards from the fields above them. */
	margin-inline: 0;
	border: 0;
	padding: 0;
}

/* A fieldset's first legend is laid out by the fieldset itself and is not a
   flex item, so it never receives the 10px gap above. The design puts the
   eyebrow 10px clear of the first card, so the gap is stated here instead. */
.al-ship__legend {
	letter-spacing: var(--al-eyebrow-tracking-field);
	margin-bottom: 10px;
	padding: 0;
}

/*
 * A card in the design, a label around a hidden radio here, so the group is
 * keyboard-operable and Woo's checkout script — which listens for a change on
 * any input named shipping_method — recalculates the totals without a bridge.
 */
.al-ship__option {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border: 1.5px solid var(--al-border-spec);
	background: var(--al-cream);
	border-radius: var(--al-radius-sm-lg);
	padding: 16px 20px;
	cursor: pointer;
	user-select: none;
	transition: border-color var(--al-transition-fast), background var(--al-transition-fast);
}

.al-ship__option:has(:checked) {
	border-color: var(--al-lavender);
	background: var(--al-lavender-picked);
}

.al-ship__option:has(:focus-visible) {
	outline: 2px solid var(--al-lavender);
	outline-offset: 2px;
}

.al-ship__text {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.al-ship__name {
	font-size: var(--al-body-size);
	color: var(--al-heading);
}

.al-ship__note {
	font-size: var(--al-caption-md);
	font-weight: var(--al-weight-light);
	color: var(--al-muted);
}

.al-ship__price {
	font-size: var(--al-body-size);
	color: var(--al-plum-deep);
}

/*
 * The approved design shows three payment chips — Card, Apple Pay and Cash on
 * delivery. Only the last is enabled for the first phase, so the row draws one
 * full-width chip. Nothing here assumes that count.
 */
.al-pay {
	display: flex;
	gap: 10px;
}

.al-pay__chip {
	flex: 1;
	text-align: center;
	border: 1.5px solid var(--al-border-spec);
	background: var(--al-cream);
	color: var(--al-body-mid);
	border-radius: var(--al-radius-sm);
	padding: 13px 16px;
	font-size: var(--al-card-desc-size-lg);
	cursor: pointer;
	user-select: none;
	transition: border-color var(--al-transition-fast), background var(--al-transition-fast), color var(--al-transition-fast);
}

.al-pay__chip:has(:checked) {
	border-color: var(--al-lavender);
	background: var(--al-lavender-picked);
	color: var(--al-plum-deep);
}

.al-pay__chip:has(:focus-visible) {
	outline: 2px solid var(--al-lavender);
	outline-offset: 2px;
}

/* A gateway's own description or fields. Cash on delivery has only the former. */
.al-pay__box {
	font-size: var(--al-card-desc-size-lg);
	font-weight: var(--al-weight-light);
	line-height: var(--al-body-line);
	color: var(--al-muted);
}

.al-pay__box p {
	margin: 0;
}

/*
 * Validation failures. The approved design has no error state, so this is an
 * addition — set in the design's own type and colour, and never shown when the
 * form is valid.
 */
.al-notices {
	max-width: var(--al-max-width-checkout);
	margin-inline: auto;
	padding-inline: var(--al-page-padding);
}

.al-notices:empty {
	display: none;
}

.woocommerce-error,
.woocommerce-message,
.woocommerce-info,
.woocommerce-NoticeGroup {
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: var(--al-lavender-t1);
	border-radius: var(--al-radius-callout-lg);
	padding: 18px 24px;
	margin-top: 32px;
	font-size: var(--al-body-size);
	line-height: var(--al-body-line);
	color: var(--al-plum-deep);
}

/* ---------------------------------------------------------------------------
 * Order received
 * ------------------------------------------------------------------------ */

.al-confirm {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	max-width: 660px;
	margin-inline: auto;
	padding: 104px var(--al-page-padding);
	text-align: center;
}

.al-confirm__check {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background: var(--al-success-bg);
	font-size: var(--al-h3-lg);
	color: var(--al-success-glyph);
}

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

.al-confirm__body {
	max-width: 420px;
	font-size: var(--al-body-size-lg);
	font-weight: var(--al-weight-light);
	line-height: var(--al-body-line-loose);
	color: var(--al-body-mid);
}

.al-confirm__body strong {
	font-weight: var(--al-weight-medium);
	color: var(--al-heading);
}

.al-confirm__eta {
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: var(--al-lavender-t1);
	border-radius: var(--al-radius-callout-lg);
	padding: 22px 28px;
	margin-top: 12px;
}

.al-confirm__eta-label {
	font-size: var(--al-caption-lg);
	color: var(--al-plum-deep);
}

.al-confirm__eta-value {
	font-family: var(--al-font-serif);
	font-size: var(--al-price-line);
	color: var(--al-heading);
}

/*
 * The gateway's instruction, which the design has no slot for. Given the type
 * of the card description rather than a style of its own, so it reads as a
 * closing line rather than a second panel competing with the delivery date.
 */
.al-confirm__pay {
	margin-top: 4px;
	max-width: 420px;
	color: var(--al-body-soft);
}

.al-confirm__pay p {
	margin: 0;
}

.al-confirm__actions {
	display: flex;
	gap: 14px;
	margin-top: 16px;
}

/* ---------------------------------------------------------------------------
 * Search
 *
 * Also the empty-query state, which is what /shop/ renders.
 * ------------------------------------------------------------------------ */

.al-search {
	display: flex;
	flex-direction: column;
	gap: 32px;
	padding-block: 64px 88px;
}

.al-search__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	text-align: center;
}

.al-search__title {
	font-size: var(--al-h1-search);
}

.al-search__form {
	width: 100%;
	max-width: 560px;
}

.al-search__input {
	width: 100%;
	border: 1px solid var(--al-border-control);
	border-radius: var(--al-radius-pill);
	padding: 16px 26px;
	font-size: 14px;
	background: var(--al-cream);
	color: var(--al-heading);
	text-align: center;
	transition: border-color var(--al-transition-fast);
}

.al-search__input:focus {
	border-color: var(--al-lavender);
}

/* The design draws no clear control, and Safari and Chrome each add one. */
.al-search__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.al-search__suggestions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

/* A lighter border than a filter chip, and only the border animates. */
.al-chip--suggest {
	border-color: var(--al-border-field);
	padding: 8px 18px;
	transition: border-color var(--al-transition-fast), color var(--al-transition-fast);
}

.al-chip--suggest:hover {
	border-color: var(--al-lavender);
	color: var(--al-plum-light);
}

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

/* A result carries a two-part kind line, so its body needs the wider gap. */
.al-card--search .al-card__body {
	gap: 12px;
}

.al-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	background: var(--al-cream);
	border: 1px solid var(--al-border-section);
	border-radius: var(--al-radius-feature);
	padding: 72px 48px;
	text-align: center;
}

.al-empty__title {
	font-family: var(--al-font-serif);
	font-weight: var(--al-weight-regular);
	font-size: var(--al-h2-2xs);
	color: var(--al-heading);
}

.al-empty__body {
	max-width: 380px;
	font-size: var(--al-body-size);
	font-weight: var(--al-weight-light);
	line-height: var(--al-body-line);
	color: var(--al-body-soft);
}

.al-empty__actions {
	display: flex;
	gap: 14px;
	margin-top: 8px;
}

/* Only 12 of the design's 73 pills carry tracking, and neither empty state is
   among them — the cart's buttons and the search page's are both plain. The
   base .al-btn tracking is correct everywhere else, so it is undone here
   rather than taken off the token. */
.al-empty__actions .al-btn {
	letter-spacing: normal;
}

/* The cart's empty state is a size up from the search page's on every axis: 88px
   of block padding rather than 72, an 18px gap, a 30px title, a 360px measure
   and full-size buttons two pixels narrower than default. It has to be defined
   after .al-empty — the two selectors have equal specificity, so only source
   order separates them. */
.al-empty--cart {
	gap: 18px;
	padding-block: 88px;
}

.al-empty--cart .al-empty__title {
	font-size: var(--al-h2-xs);
}

.al-empty--cart .al-empty__body {
	max-width: 360px;
}

.al-empty--cart .al-btn {
	padding-inline: 28px;
}

/* ---------------------------------------------------------------------------
 * A gallery shown whole (client, 15 October: the A–Z Alphabet Kit)
 *
 * Each photograph at its own proportions on the box's cream, never cropped,
 * with a Zoom button in the corner and a zoom view; see product-gallery.php.
 * ------------------------------------------------------------------------ */

.al-product__media--contain {
	position: relative;
	background: var(--al-cream);
}

.al-product__media--contain .al-slot__img,
.al-gallery--contain .al-gallery__thumb .al-slot__img {
	object-fit: contain;
}

.al-product__media--contain .al-gallery__slide {
	cursor: zoom-in;
}

.al-gallery__zoom {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 36px;
	padding: 0 14px;
	border: 0;
	border-radius: var(--al-radius-pill);
	background: rgba(253, 251, 247, 0.94);
	box-shadow: 0 2px 10px rgba(46, 36, 56, 0.12);
	color: var(--al-plum-deep);
	font: inherit;
	font-size: var(--al-caption-lg);
	cursor: pointer;
}

.al-gallery__zoom:focus-visible {
	outline: 2px solid var(--al-plum-deep);
	outline-offset: 2px;
}

.al-gallery__note {
	margin: 0;
	font-size: var(--al-caption-lg);
	font-weight: var(--al-weight-light);
	line-height: var(--al-body-line);
	color: var(--al-muted);
}

/* The zoom view fills the screen; the photograph sits fitted in the middle, or
   at actual size to scroll around. margin: auto centres it without cutting off
   the edges a centred flex item loses once it overflows. */
.al-zoom {
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: rgba(46, 36, 56, 0.94);
}

.al-zoom::backdrop {
	background: rgba(46, 36, 56, 0.5);
}

.al-zoom[open] {
	display: flex;
}

.al-zoom__stage {
	display: flex;
	flex: 1;
	min-width: 0;
	overflow: auto;
	padding: 64px 16px 48px;
}

.al-zoom__img {
	margin: auto;
	max-width: 100%;
	max-height: 100%;
	border-radius: var(--al-radius-sm-lg);
	background: var(--al-cream);
	cursor: zoom-in;
}

.al-zoom.is-actual .al-zoom__img {
	max-width: none;
	max-height: none;
	cursor: zoom-out;
}

.al-zoom__close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 1;
	min-height: 44px;
	padding: 0 20px;
	border: 0;
	border-radius: var(--al-radius-pill);
	background: var(--al-cream);
	color: var(--al-plum-deep);
	font: inherit;
	font-size: var(--al-button-size);
	cursor: pointer;
}

.al-zoom__close:focus-visible {
	outline: 2px solid var(--al-lavender);
	outline-offset: 3px;
}

.al-zoom__hint {
	position: absolute;
	bottom: 14px;
	left: 0;
	right: 0;
	margin: 0;
	text-align: center;
	font-size: var(--al-caption-lg);
	color: rgba(253, 251, 247, 0.85);
	pointer-events: none;
}

/* ---------------------------------------------------------------------------
 * A kit's own details below the buy panel (the A–Z Alphabet Kit)
 *
 * The full description, then the expandable sections, in the Help page's
 * accordion and on its narrow measure.
 * ------------------------------------------------------------------------ */

.al-kit-details {
	padding-block: 16px var(--al-section-padding);
}

.al-kit-details__inner {
	max-width: var(--al-max-width-narrow);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.al-kit-details__title {
	font-size: var(--al-h2-xs);
}

.al-kit-details__intro {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.al-kit-details__intro p {
	margin: 0;
	font-size: var(--al-body-size-md);
	font-weight: var(--al-weight-light);
	line-height: var(--al-body-line-loose);
	color: var(--al-body-mid);
}

/* The 26 themes, two columns of a lavender letter and its theme — on a phone
   too, where the names are short enough. */
.al-faq__body .al-kit-themes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px 24px;
	padding: 0;
	list-style: none;
}

.al-kit-themes li {
	display: flex;
	align-items: baseline;
	gap: 12px;
}

.al-kit-themes__letter {
	flex: none;
	width: 1.4em;
	font-family: var(--al-font-serif);
	font-size: 18px;
	color: var(--al-plum-light);
}

.al-kit-themes__name {
	color: var(--al-heading);
}

.al-kit-themes__note {
	display: block;
	font-size: var(--al-caption-lg);
	color: var(--al-muted);
}

/* ---------------------------------------------------------------------------
 * Pick Your Letter (client, 15 October): the letters, the "Your selected kit"
 * panel, the Add to Cart that waits for a letter, and the letter that stands in
 * for the B kit's photograph on a cart or checkout line.
 * ------------------------------------------------------------------------ */

.al-letter-pick {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.al-letter-pick__label {
	display: block;
	margin-bottom: 12px;
	padding: 0;
	letter-spacing: var(--al-eyebrow-tracking-footer);
}

/* As many 44px letters to a row as fit: nine on a desktop panel, six on a phone. */
.al-letter-pick__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
	gap: 8px;
}

.al-letter-pick__letter {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	border: 1px solid var(--al-border-control);
	border-radius: var(--al-radius-sm-lg);
	background: var(--al-cream);
	color: var(--al-body-mid);
	font-family: var(--al-font-serif);
	font-size: 20px;
	cursor: pointer;
	user-select: none;
	transition: border-color var(--al-transition-fast), background var(--al-transition-fast), color var(--al-transition-fast);
}

.al-letter-pick__letter:hover {
	border-color: var(--al-lavender);
}

.al-letter-pick__radio:checked + .al-letter-pick__letter {
	border-color: var(--al-lavender);
	background: var(--al-lavender-t2);
	box-shadow: inset 0 0 0 1px var(--al-lavender);
	color: var(--al-plum-deep);
}

/* The radio is off-screen, so its focus ring is drawn on its letter. */
.al-letter-pick__radio:focus-visible + .al-letter-pick__letter {
	outline: 2px solid var(--al-plum-deep);
	outline-offset: 2px;
}

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

.al-letter-kit p {
	margin: 0;
}

.al-letter-kit__prompt,
.al-letter-kit__summary {
	font-size: var(--al-body-size);
	font-weight: var(--al-weight-light);
	line-height: var(--al-body-line-loose);
	color: var(--al-body-mid);
}

.al-letter-kit__headline {
	font-family: var(--al-font-serif);
	font-size: 28px;
	line-height: 1.15;
	color: var(--al-plum-deep);
}

.al-letter-kit__design {
	font-size: var(--al-body-size);
	color: var(--al-plum-deep);
}

.al-buy__submit:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.al-kit-details__more {
	margin: 0;
	font-size: var(--al-body-size-md);
	font-weight: var(--al-weight-light);
	color: var(--al-body-mid);
}

.al-kit-details__more a {
	color: var(--al-plum-light);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.al-letter-tile {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border-radius: 12px;
	background: var(--al-lavender-t2);
	color: var(--al-plum-deep);
	font-family: var(--al-font-serif);
	font-size: 52px;
	line-height: 1;
}

.al-summary__thumb .al-letter-tile {
	border-radius: 10px;
	font-size: 26px;
}

/* ---------------------------------------------------------------------------
 * Fixes from the A–Z Alphabet Kit's review (15 October)
 * ------------------------------------------------------------------------ */

/* The Zoom button sits on the gallery, at the photograph box's corner. */
.al-gallery--contain {
	position: relative;
}

/* Its own display would otherwise defeat the hidden attribute it ships with. */
.al-gallery__zoom[hidden] {
	display: none;
}

/* Keyboard focus on a thumbnail, which its own transparent outline hid. */
.al-gallery__thumb:focus-visible {
	outline: 2px solid var(--al-plum-deep);
	outline-offset: 3px;
	opacity: 1;
}

/* Small type on the ivory page at AA: 5.3:1 and 5.5:1. */
.al-gallery__note,
.al-kit-themes__note {
	color: var(--al-body-mid);
}

.al-kit-themes__letter {
	color: var(--al-plum-deep);
}

/* The zoom view's controls: Actual size beside Close. */
.al-zoom__bar {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 1;
	display: flex;
	gap: 8px;
}

.al-zoom__bar .al-zoom__close {
	position: static;
}

.al-zoom__size {
	min-height: 44px;
	padding: 0 20px;
	border: 0;
	border-radius: var(--al-radius-pill);
	background: rgba(253, 251, 247, 0.14);
	box-shadow: inset 0 0 0 1px rgba(253, 251, 247, 0.55);
	color: var(--al-cream);
	font: inherit;
	font-size: var(--al-button-size);
	cursor: pointer;
}

.al-zoom__size[aria-pressed="true"] {
	background: var(--al-cream);
	color: var(--al-plum-deep);
}

.al-zoom__size:focus-visible,
.al-zoom__stage:focus-visible {
	outline: 2px solid var(--al-lavender);
	outline-offset: 3px;
}

.al-zoom__stage:focus-visible {
	outline-offset: -4px;
}

/* The scrolling area stops above the hint, so the photograph never passes under it. */
.al-zoom__stage {
	padding: 72px 16px 0;
	margin-bottom: 48px;
}

/* ---------------------------------------------------------------------------
 * Fixes from Pick Your Letter's review (15 October)
 * ------------------------------------------------------------------------ */

/* Each hidden radio covers its own letter, so moving focus scrolls the letter
   into view; it stays invisible (clip-path), and the letter takes the clicks. */
.al-letter-pick__cell {
	position: relative;
	display: grid;
}

.al-letter-pick__cell .al-letter-pick__radio {
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
}

/* The chosen letter at AA against both the page and its own fill. */
.al-letter-pick__radio:checked + .al-letter-pick__letter {
	border-color: var(--al-plum-deep);
	box-shadow: inset 0 0 0 1px var(--al-plum-deep);
}

@media (forced-colors: active) {
	.al-letter-pick__radio:checked + .al-letter-pick__letter {
		forced-color-adjust: none;
		border-color: Highlight;
		background: Highlight;
		color: HighlightText;
	}
}

/* The group's name and the panel's label, at AA (the site eyebrow is lighter). */
.al-letter-pick__label,
.al-letter-kit__label {
	color: var(--al-plum-deep);
}

.al-kit-details__more a {
	color: var(--al-plum-deep);
}

/* ---------------------------------------------------------------------------
 * "Added to your cart" (client, 15 October): the dialog on the page that
 * follows an add, with Checkout and Continue shopping.
 * ------------------------------------------------------------------------ */

.al-added {
	width: min(460px, calc(100vw - 32px));
	max-height: calc(100vh - 32px);
	max-height: calc(100dvh - 32px);
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: var(--al-radius-card-lg);
	background: var(--al-cream);
	color: var(--al-body);
	box-shadow: var(--al-shadow-form);
}

.al-added::backdrop {
	background: rgba(46, 36, 56, 0.45);
}

.al-added__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 40px 32px 32px;
	text-align: center;
}

.al-added__check {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--al-success-bg);
	font-size: 22px;
	color: var(--al-success-glyph);
}

.al-added__title {
	margin: 6px 0 0;
	outline: none;
	font-family: var(--al-font-serif);
	font-weight: var(--al-weight-medium);
	font-size: var(--al-h2-2xs);
	line-height: var(--al-h2-line);
	color: var(--al-heading);
}

.al-added__item {
	margin: 0;
	font-size: var(--al-body-size-md);
	color: var(--al-body-mid);
}

.al-added__cart {
	margin: 0;
	font-size: var(--al-body-size);
	color: var(--al-body-soft);
}

.al-added__note {
	margin: 0;
	font-size: var(--al-caption-lg);
	color: var(--al-plum-deep);
}

.al-added__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	width: 100%;
	margin-top: 14px;
}

.al-added__actions .al-btn {
	display: inline-flex;
	flex: 1 1 170px;
	align-items: center;
	justify-content: center;
	padding-inline: 22px;
	white-space: nowrap;
	cursor: pointer;
}

.al-added__close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	font-size: 24px;
	line-height: 1;
	color: var(--al-muted);
	cursor: pointer;
}

.al-added__close:hover {
	color: var(--al-plum-deep);
}

.al-added .al-btn:focus-visible,
.al-added__close:focus-visible {
	outline: 2px solid var(--al-lavender);
	outline-offset: 3px;
}