/* ==========================================================================
   Aviarium — WooCommerce

   Loaded after WooCommerce's own sheets so these rules win by cascade order
   rather than by !important. Mobile first: base rules are the phone layout,
   min-width queries build up from there.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Shop header & toolbar
   -------------------------------------------------------------------------- */

.shop-header {
	background: var(--av-parchment);
	border-bottom: 1px solid var(--av-line);
	padding-block: 1.5rem;
}

.shop-header__inner {
	display: grid;
	gap: var(--sp-5);
}

.shop-header__title {
	margin: 0;
	font-size: var(--fs-2xl);
}

.shop-header__text {
	margin: var(--sp-3) 0 0;
	max-width: 58ch;
	color: var(--av-ink-2);
	font-size: var(--fs-sm);
}

/* The category rail scrolls horizontally on a phone rather than wrapping into
   a block of pills that pushes the products off-screen. */
.cat-rail {
	display: flex;
	gap: 0.5rem;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	scroll-snap-type: x proximity;
	margin-inline: calc(var(--gutter) * -1);
	padding-inline: var(--gutter);
	padding-bottom: 0.25rem;
}

.cat-rail::-webkit-scrollbar {
	display: none;
}

.cat-rail__item {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: var(--tap);
	padding: 0 1rem;
	border: 1px solid var(--av-line);
	border-radius: 999px;
	background: var(--av-surface);
	font-size: var(--fs-sm);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	scroll-snap-align: start;
	transition: all 0.25s var(--ease);
}

.cat-rail__item.is-current {
	background: var(--av-ink);
	border-color: var(--av-ink);
	color: var(--av-white);
}

.cat-rail__count {
	font-size: 10px;
	font-variant-numeric: tabular-nums;
	opacity: 0.6;
}

.shop-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	flex-wrap: wrap;
	padding-block: var(--sp-4);
	border-bottom: 1px solid var(--av-line);
	margin-bottom: var(--sp-5);
}

.woocommerce .woocommerce-result-count {
	margin: 0;
	font-size: var(--fs-xs);
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--av-ink-4);
}

.woocommerce .woocommerce-ordering {
	margin: 0;
}

.woocommerce .woocommerce-ordering select {
	min-height: var(--tap);
	padding: 0 2.4rem 0 1rem;
	border: 1px solid var(--av-line);
	border-radius: var(--radius);
	background-color: var(--av-surface);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236B6255' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	appearance: none;
	-webkit-appearance: none;
	font-size: max(16px, var(--fs-sm));
	font-weight: 600;
	cursor: pointer;
	width: auto;
}

.site-main--shop {
	padding-bottom: 3rem;
}

@media (min-width: 720px) {
	.shop-header {
		padding-block: 2.5rem 2rem;
	}

	.shop-header__text {
		font-size: var(--fs-base);
		margin-top: var(--sp-4);
	}

	.cat-rail {
		flex-wrap: wrap;
		overflow: visible;
		margin-inline: 0;
		padding-inline: 0;
	}

	.shop-toolbar {
		padding-block: var(--sp-5);
		margin-bottom: var(--sp-7);
	}

	.cat-rail__item:hover {
		border-color: var(--av-ink);
		color: var(--av-ink);
	}

	.cat-rail__item.is-current:hover {
		color: var(--av-white);
	}
}

@media (min-width: 1024px) {
	.shop-header {
		padding-block: 3.5rem 2.75rem;
	}

	.site-main--shop {
		padding-bottom: 5rem;
	}
}

/* --------------------------------------------------------------------------
   2. Product grid

   Two columns on a phone. One column means endless scrolling for a catalogue
   this size; two lets someone compare at a glance and halves the scroll.
   -------------------------------------------------------------------------- */

.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.75rem 0.9rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	clear: none !important;
	position: relative;
	display: flex;
	flex-direction: column;
}

@media (min-width: 720px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		gap: 2.25rem 1.5rem;
	}
}

@media (min-width: 1024px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(var(--shop-cols, 3), minmax(0, 1fr));
		gap: 2.75rem 2.25rem;
	}

	.woocommerce ul.products.columns-2 { --shop-cols: 2; }
	.woocommerce ul.products.columns-3 { --shop-cols: 3; }
	.woocommerce ul.products.columns-4 { --shop-cols: 4; }
	.woocommerce ul.products.columns-5 { --shop-cols: 5; }
}

/* Card --------------------------------------------------------------------- */

.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link {
	display: flex;
	flex-direction: column;
	flex: 1;
	text-decoration: none;
	color: inherit;
}

.card__media {
	position: relative;
	margin-bottom: var(--sp-3);
}

.card__frame {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: linear-gradient(168deg, #FFFDF9 0%, #F1EBDD 100%);
	border: 1px solid var(--av-line-soft);
	transition: box-shadow 0.45s var(--ease-out), border-color 0.45s var(--ease-out);
}

.card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
	transition: transform 0.9s var(--ease-out), opacity 0.5s var(--ease);
}

.card__img--primary {
	z-index: 1;
}

/* The hover image is a desktop nicety; a phone never fires hover, so it is
   not even painted there. */
.card__img--hover {
	z-index: 2;
	opacity: 0;
	display: none;
}

/* Badges */
.card__badges {
	position: absolute;
	top: 0.6rem;
	left: 0.6rem;
	z-index: 4;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.3rem;
}

.badge,
.woocommerce span.onsale {
	display: inline-flex;
	align-items: center;
	padding: 0.3rem 0.6rem;
	border-radius: 0;
	background: var(--av-ink);
	color: var(--av-white);
	font-family: var(--av-sans);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.4;
	min-height: 0;
	min-width: 0;
	position: static;
	margin: 0;
	top: auto;
	right: auto;
}

.badge--sale { background: var(--av-ember); }
.badge--new { background: var(--av-pine); }
.badge--out { background: var(--av-ink-3); }

.badge--lg {
	font-size: var(--fs-xs);
	padding: 0.45rem 0.85rem;
}

/* Card body */
.card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.card__cat {
	display: block;
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--av-ink-4);
	margin-bottom: 0.35rem;
}

.woocommerce ul.products li.product .card__title {
	font-family: var(--av-display);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.008em;
	margin: 0 0 0.3rem;
	padding: 0;
	color: var(--av-ink);
}

/* The teaser line is desktop-only — on a phone it pushes the price and the
   button below the fold for no gain. */
.card__text {
	display: none;
	margin: 0 0 var(--sp-4);
	font-size: var(--fs-sm);
	line-height: 1.5;
	color: var(--av-ink-3);
}

.card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-2);
	flex-wrap: wrap;
	margin-top: var(--sp-3);
	padding-top: var(--sp-3);
	border-top: 1px solid var(--av-line);
}

.woocommerce ul.products li.product .card__price {
	margin: 0;
	font-family: var(--av-display);
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--av-ink);
	font-variant-numeric: tabular-nums;
}

.woocommerce ul.products li.product .card__price del {
	opacity: 1;
	font-size: 0.72em;
	color: var(--av-ink-4);
	margin-right: 0.3rem;
	font-weight: 400;
}

.woocommerce ul.products li.product .card__price ins {
	text-decoration: none;
	color: var(--av-brick);
	background: none;
}

.woocommerce ul.products li.product .card__price .woocommerce-Price-currencySymbol {
	font-size: 0.72em;
	vertical-align: 0.32em;
	margin-right: 1px;
}

/* Card add-to-cart — full width under the price on a phone so it is a real
   thumb target instead of a 40px sliver beside the price. */
.woocommerce ul.products li.product .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin: 0;
	padding: 0.62em 1em;
	min-height: 44px;
	border: 1px solid var(--av-ink);
	border-radius: var(--radius);
	background: transparent;
	color: var(--av-ink);
	font-family: var(--av-sans);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	line-height: 1;
	white-space: nowrap;
	transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}

.woocommerce ul.products li.product .button.loading::after {
	border-color: currentColor;
}

.woocommerce ul.products li.product .added_to_cart {
	display: none;
}

@media (min-width: 560px) {
	.woocommerce ul.products li.product .card__title {
		font-size: var(--fs-md);
	}
}

@media (min-width: 720px) {
	.card__media {
		margin-bottom: var(--sp-4);
	}

	.card__badges {
		top: 0.85rem;
		left: 0.85rem;
		gap: 0.35rem;
	}

	.badge,
	.woocommerce span.onsale {
		font-size: 10px;
		padding: 0.32rem 0.65rem;
		letter-spacing: 0.12em;
	}

	.card__cat {
		font-size: 10px;
		letter-spacing: 0.16em;
		margin-bottom: 0.4rem;
	}

	.card__text {
		display: block;
	}

	.card__foot {
		flex-wrap: nowrap;
		gap: var(--sp-3);
		margin-top: var(--sp-3);
		padding-top: var(--sp-3);
	}

	.woocommerce ul.products li.product .card__price {
		font-size: var(--fs-md);
	}

	.woocommerce ul.products li.product .button {
		width: auto;
		min-height: 40px;
	}
}

@media (hover: hover) and (pointer: fine) {
	.card__img--hover {
		display: block;
	}

	li.product:hover .card__frame {
		box-shadow: var(--shadow-md);
		border-color: var(--av-line);
	}

	li.product:hover .card__img--primary {
		transform: scale(1.045);
	}

	li.product:hover .card__img--hover {
		opacity: 1;
		transform: scale(1.045);
	}

	.woocommerce ul.products li.product .button:hover {
		background: var(--av-ink);
		color: var(--av-white);
	}
}

/* --------------------------------------------------------------------------
   3. Single product
   -------------------------------------------------------------------------- */

.pdp {
	padding-block: 1.25rem 2.5rem;
}

.woocommerce div.product {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: var(--sp-5);
}

.woocommerce div.product > .woocommerce-product-gallery,
.woocommerce div.product > .summary {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
}

.woocommerce div.product > .pdp__panels,
.woocommerce div.product > .related,
.woocommerce div.product > .upsells,
.woocommerce div.product > .woocommerce-tabs,
.woocommerce div.product > .product_meta {
	grid-column: 1 / -1;
}

@media (min-width: 900px) {
	.pdp {
		padding-block: 2.5rem 5rem;
	}

	.woocommerce div.product {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
		column-gap: clamp(2rem, 5vw, 5rem);
		row-gap: var(--sp-6);
		align-items: start;
	}

	.woocommerce div.product > .woocommerce-product-gallery {
		grid-column: 1;
		position: sticky;
		top: calc(var(--header-h) + 1.5rem);
	}

	.woocommerce div.product > .summary {
		grid-column: 2;
	}
}

/* Gallery ------------------------------------------------------------------ */

.woocommerce div.product div.images {
	margin: 0;
}

.woocommerce div.product div.images img {
	border-radius: var(--radius-lg);
	background: linear-gradient(168deg, #FFFDF9 0%, #F0EADC 100%);
}

.woocommerce div.product div.images .woocommerce-product-gallery__image:first-child img {
	border: 1px solid var(--av-line-soft);
}

/* Thumbnails scroll sideways on a phone instead of wrapping to three rows. */
.woocommerce div.product div.images .flex-control-thumbs {
	display: flex;
	gap: 0.5rem;
	margin: 0.6rem 0 0;
	padding: 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.woocommerce div.product div.images .flex-control-thumbs::-webkit-scrollbar {
	display: none;
}

.woocommerce div.product div.images .flex-control-thumbs li {
	width: auto;
	float: none;
	margin: 0;
	flex: 0 0 68px;
}

.woocommerce div.product div.images .flex-control-thumbs img {
	border: 1px solid var(--av-line);
	border-radius: var(--radius);
	opacity: 0.6;
	transition: opacity 0.25s var(--ease), border-color 0.25s var(--ease);
	aspect-ratio: 1;
	object-fit: cover;
}

.woocommerce div.product div.images .flex-control-thumbs img.flex-active {
	opacity: 1;
	border-color: var(--av-ink);
}

/* The zoom trigger is a desktop affordance — phones pinch-zoom natively. */
.woocommerce div.product .woocommerce-product-gallery__trigger {
	display: none;
}

@media (min-width: 720px) {
	.woocommerce div.product div.images .flex-control-thumbs {
		gap: 0.6rem;
		margin-top: 0.85rem;
	}

	.woocommerce div.product div.images .flex-control-thumbs li {
		flex: 0 0 84px;
	}

	.woocommerce div.product .woocommerce-product-gallery__trigger {
		display: grid;
		top: 1rem;
		right: 1rem;
		background: var(--av-surface);
		border: 1px solid var(--av-line);
		border-radius: 50%;
		width: var(--tap);
		height: var(--tap);
		place-items: center;
		box-shadow: var(--shadow-sm);
		z-index: 5;
	}

	.woocommerce div.product div.images .flex-control-thumbs img:hover {
		opacity: 1;
		border-color: var(--av-ink);
	}
}

/* Summary ------------------------------------------------------------------ */

.pdp__cat {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--av-pine);
	text-decoration: none;
	margin-bottom: 0.6rem;
}

.woocommerce div.product .product_title {
	font-size: var(--fs-2xl);
	line-height: 1.04;
	letter-spacing: -0.016em;
	font-weight: 500;
	margin: 0 0 var(--sp-3);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 var(--sp-4);
	font-family: var(--av-display);
	font-size: var(--fs-xl);
	font-weight: 500;
	color: var(--av-ink);
	font-variant-numeric: tabular-nums;
}

.woocommerce div.product p.price del {
	opacity: 1;
	font-size: 0.6em;
	color: var(--av-ink-4);
	font-weight: 400;
}

.woocommerce div.product p.price ins {
	text-decoration: none;
	background: none;
	color: var(--av-brick);
	font-weight: 600;
}

.woocommerce div.product .woocommerce-product-details__short-description {
	font-size: var(--fs-base);
	line-height: 1.55;
	color: var(--av-ink-2);
	padding-bottom: var(--sp-4);
	margin-bottom: var(--sp-4);
	border-bottom: 1px solid var(--av-line);
}

.woocommerce div.product .woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: var(--sp-4);
	font-size: var(--fs-sm);
}

.woocommerce .star-rating span::before,
.woocommerce p.stars a::before {
	color: var(--av-amber);
}

@media (min-width: 720px) {
	.woocommerce div.product .woocommerce-product-details__short-description {
		font-size: var(--fs-md);
		padding-bottom: var(--sp-5);
		margin-bottom: var(--sp-5);
	}
}

/* Add to cart form --------------------------------------------------------- */

.woocommerce div.product form.cart {
	margin: 0 0 var(--sp-5);
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	align-items: stretch;
}

.woocommerce div.product form.cart::before,
.woocommerce div.product form.cart::after {
	content: none;
}

.woocommerce div.product form.cart.variations_form,
.woocommerce div.product form.cart.grouped_form {
	display: block;
}

.qty-wrap {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--av-line);
	border-radius: var(--radius);
	background: var(--av-surface);
	overflow: hidden;
	flex: none;
}

.qty-btn {
	width: var(--tap);
	height: 52px;
	display: grid;
	place-items: center;
	border: 0;
	background: none;
	color: var(--av-ink-3);
	cursor: pointer;
	transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.qty-btn:active {
	background: var(--av-parchment);
	color: var(--av-ink);
}

.woocommerce div.product form.cart div.quantity {
	margin: 0;
	float: none;
}

.woocommerce .quantity input.qty {
	width: 46px;
	min-height: 52px;
	padding: 0;
	border: 0;
	border-inline: 1px solid var(--av-line);
	border-radius: 0;
	background: none;
	text-align: center;
	font-weight: 600;
	font-size: max(16px, var(--fs-base));
	font-variant-numeric: tabular-nums;
	-moz-appearance: textfield;
}

.woocommerce .quantity input.qty::-webkit-outer-spin-button,
.woocommerce .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.woocommerce .quantity input.qty:focus {
	box-shadow: none;
}

.woocommerce div.product form.cart .button,
.woocommerce div.product form.cart button.single_add_to_cart_button {
	flex: 1 1 180px;
	min-height: 52px;
	padding: 0.9em 1.5em;
	border: 1px solid var(--av-pine);
	border-radius: var(--radius);
	background: var(--av-pine);
	color: #FFFDF8;
	font-family: var(--av-sans);
	font-size: var(--fs-sm);
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	transition: background-color 0.28s var(--ease), border-color 0.28s var(--ease);
}

.woocommerce div.product form.cart .button:disabled,
.woocommerce div.product form.cart .button.disabled {
	background: var(--av-line);
	border-color: var(--av-line);
	color: var(--av-ink-4);
}

@media (hover: hover) and (pointer: fine) {
	.qty-btn:hover {
		background: var(--av-parchment);
		color: var(--av-ink);
	}

	.woocommerce div.product form.cart .button:not(:disabled):hover {
		background: var(--av-pine-deep);
		border-color: var(--av-pine-deep);
	}
}

/* Variations & custom product fields --------------------------------------- */

.woocommerce div.product form.cart .variations {
	width: 100%;
	margin-bottom: var(--sp-4);
	border: 1px solid var(--av-line);
	border-radius: var(--radius-lg);
	background: var(--av-parchment);
	overflow: hidden;
	display: block;
}

.woocommerce div.product form.cart .variations tbody {
	display: block;
}

.woocommerce div.product form.cart .variations tr {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.3rem;
	padding: 0.85rem 1rem;
	border-bottom: 1px solid var(--av-line);
}

.woocommerce div.product form.cart .variations tr:last-child {
	border-bottom: 0;
}

.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th {
	display: block;
	padding: 0;
	border: 0;
	background: none;
}

.woocommerce div.product form.cart .variations label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--av-ink-3);
	margin: 0;
}

.woocommerce div.product form.cart .variations select {
	min-height: 50px;
	background-color: var(--av-surface);
	font-size: max(16px, var(--fs-sm));
}

.woocommerce div.product form.cart .reset_variations {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	font-size: var(--fs-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--av-ink-4);
}

.woocommerce div.product form.cart .single_variation_wrap {
	width: 100%;
}

.woocommerce div.product .woocommerce-variation-price {
	margin-bottom: var(--sp-4);
}

/* Advanced Product Fields (nest configurator) */
.wapf-wrapper {
	margin-bottom: var(--sp-4);
	padding: 1rem;
	border: 1px solid var(--av-line);
	border-radius: var(--radius-lg);
	background: var(--av-parchment);
}

.wapf-field-label label,
.wapf--label label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--av-ink-3);
}

.wapf-field-container + .wapf-field-container {
	margin-top: 0.9rem;
	padding-top: 0.9rem;
	border-top: 1px solid var(--av-line);
}

/* Assurances & meta -------------------------------------------------------- */

.pdp__assurances {
	list-style: none;
	margin: 0 0 var(--sp-4);
	padding: 0.9rem 1rem;
	display: grid;
	gap: 0.6rem;
	border: 1px solid var(--av-line);
	border-radius: var(--radius-lg);
	background: var(--av-surface);
}

.pdp__assurances li {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	font-size: var(--fs-sm);
	color: var(--av-ink-2);
}

.pdp__assurances .icon {
	color: var(--av-pine);
	flex: none;
}

.pdp__meta {
	display: grid;
	gap: 0.5rem;
	font-size: var(--fs-xs);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--av-ink-4);
}

.pdp__meta span {
	display: flex;
	gap: 0.6rem;
	justify-content: space-between;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--av-line-soft);
}

.pdp__meta b {
	font-weight: 600;
	color: var(--av-ink-2);
	text-align: right;
}

.pdp__meta a {
	text-decoration: none;
}

.pdp__stock b {
	color: var(--av-pine);
}

.woocommerce div.product .product_meta {
	display: none;
}

/* --------------------------------------------------------------------------
   4. Sticky phone add-to-cart bar

   Once the real button scrolls out of view, the price and a buy button ride
   along at the bottom of the screen. This is the single biggest conversion
   difference between a desktop layout squeezed onto a phone and one designed
   for it. Hidden from tablet up, where the button stays visible anyway.
   -------------------------------------------------------------------------- */

.pdp-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 45;
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: 0.6rem var(--gutter);
	padding-bottom: calc(0.6rem + var(--safe-b));
	background: rgba(251, 249, 245, 0.97);
	backdrop-filter: saturate(1.4) blur(10px);
	-webkit-backdrop-filter: saturate(1.4) blur(10px);
	border-top: 1px solid var(--av-line);
	box-shadow: 0 -8px 24px -18px rgba(23, 20, 15, 0.5);
	transform: translateY(110%);
	transition: transform 0.32s var(--ease-out);
}

.pdp-bar.is-visible {
	transform: none;
}

.pdp-bar__info {
	flex: 1;
	min-width: 0;
}

.pdp-bar__name {
	display: block;
	font-family: var(--av-display);
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pdp-bar__price {
	display: block;
	font-size: var(--fs-xs);
	color: var(--av-ink-3);
	font-variant-numeric: tabular-nums;
}

.pdp-bar__btn {
	flex: none;
	min-height: 46px;
	padding: 0 1.25rem;
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--av-pine);
	border-radius: var(--radius);
	background: var(--av-pine);
	color: #FFFDF8;
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
}

/* Room so the bar never sits on top of the footer's last line. */
@media (max-width: 899px) {
	body.is-pdp #page {
		padding-bottom: 74px;
	}
}

@media (min-width: 900px) {
	.pdp-bar {
		display: none;
	}
}

/* Panels ------------------------------------------------------------------- */

.pdp__panels {
	margin-top: 2rem;
	padding-inline: 0;
	max-width: 900px;
	margin-inline: 0;
}

.woocommerce div.product .woocommerce-tabs {
	display: none;
}

.pdp__panels .shop_attributes {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-sm);
	display: block;
	overflow-x: auto;
}

.pdp__panels .shop_attributes th,
.pdp__panels .shop_attributes td {
	padding: 0.65rem 0;
	border-bottom: 1px solid var(--av-line-soft);
	text-align: left;
	background: none;
	font-style: normal;
}

.pdp__panels .shop_attributes th {
	width: 32%;
	font-weight: 600;
	color: var(--av-ink-3);
	font-size: var(--fs-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Related ------------------------------------------------------------------ */

.woocommerce .related,
.woocommerce .upsells {
	margin-top: 2.5rem;
	padding-top: 2rem;
	border-top: 1px solid var(--av-line);
}

.woocommerce .related > h2,
.woocommerce .upsells > h2,
.woocommerce .cross-sells > h2 {
	font-size: var(--fs-xl);
	margin-bottom: var(--sp-5);
}

@media (min-width: 720px) {
	.pdp__panels {
		margin-top: clamp(2.5rem, 5vw, 4rem);
	}

	.woocommerce .related,
	.woocommerce .upsells {
		margin-top: clamp(3rem, 6vw, 5rem);
		padding-top: clamp(2rem, 4vw, 3rem);
	}

	.woocommerce .related > h2,
	.woocommerce .upsells > h2 {
		margin-bottom: var(--sp-6);
	}
}

/* --------------------------------------------------------------------------
   5. Mini cart / drawer

   A drawer is somewhere people shop from, not a receipt. So each line gets a
   thumbnail, a stepper and its own total, and the subtotal with the checkout
   button is pinned to the bottom where a thumb reaches — the list scrolls
   underneath it rather than pushing it off screen.
   -------------------------------------------------------------------------- */

.drawer--cart {
	display: flex;
	flex-direction: column;
}

.cart-drawer__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow: hidden;
	padding: 0;
}

/* The whole body is swapped by a fragment on every change, so the fade lives
   on the container rather than on any one row. */
.cart-drawer__body.is-busy {
	opacity: 0.55;
	pointer-events: none;
	transition: opacity 0.15s var(--ease);
}

.woocommerce ul.cart_list,
.woocommerce ul.product_list_widget {
	list-style: none;
	margin: 0;
	padding: 0;
}

.drawer--cart ul.woocommerce-mini-cart {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	padding: var(--sp-4);
	display: grid;
	gap: 0.75rem;
	align-content: start;
}

.mini-item {
	position: relative;
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	gap: 0.75rem;
	padding: 0 0 0.75rem;
	border-bottom: 1px solid var(--av-line-soft);
}

.mini-item:last-of-type {
	border-bottom: 0;
	padding-bottom: 0;
}

.mini-item__media img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: var(--radius);
	border: 1px solid var(--av-line-soft);
	display: block;
}

.mini-item__body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.mini-item__name {
	margin: 0;
	/* Room for the remove button, which is absolutely positioned top-right. */
	padding-right: 1.6rem;
	font-family: var(--av-sans);
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1.3;
}

.mini-item__name a {
	color: var(--av-ink);
	text-decoration: none;
}

/* Engraving names, colours and other configurator choices. */
.mini-item__meta,
.mini-item__meta p,
.mini-item__meta dl {
	margin: 0;
	font-size: var(--fs-xs);
	line-height: 1.45;
	color: var(--av-ink-4);
}

.mini-item__meta dl {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0 0.35rem;
}

.mini-item__meta dt {
	font-weight: 600;
}

.mini-item__meta dt::after {
	content: ":";
}

.mini-item__meta dd {
	margin: 0;
	min-width: 0;
}

.mini-item__unit {
	margin: 0;
	font-size: var(--fs-xs);
	color: var(--av-ink-4);
}

.mini-item__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-top: 0.35rem;
}

.mini-item__total {
	font-family: var(--av-sans);
	font-size: var(--fs-sm);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--av-ink);
}

.mini-item__single {
	font-size: var(--fs-xs);
	color: var(--av-ink-4);
}

/* Stepper ------------------------------------------------------------------ */

.mini-qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--av-line);
	border-radius: 999px;
	background: var(--av-surface);
	overflow: hidden;
}

.mini-qty__btn {
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: none;
	font-size: 1rem;
	line-height: 1;
	color: var(--av-ink-2);
	cursor: pointer;
}

.mini-qty__btn:disabled {
	opacity: 0.35;
	cursor: default;
}

.mini-qty__value {
	min-width: 1.75rem;
	text-align: center;
	font-family: var(--av-sans);
	font-size: var(--fs-sm);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* Remove ------------------------------------------------------------------- */

.drawer--cart ul.cart_list li a.remove,
.mini-item > a.remove {
	position: absolute;
	top: -2px;
	right: 0;
	width: 26px;
	height: 26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-size: 1rem;
	line-height: 1;
	color: var(--av-ink-4) !important;
	text-decoration: none;
	background: none;
}

/* Footer ------------------------------------------------------------------- */

.mini-cart__foot {
	flex: none;
	padding: var(--sp-4);
	border-top: 1px solid var(--av-line);
	background: var(--av-parchment);
	display: grid;
	gap: 0.5rem;
}

.mini-cart__foot p.total,
.woocommerce-mini-cart__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	border: 0;
	font-family: var(--av-sans);
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--av-ink-3);
}

.mini-cart__foot p.total strong {
	font-weight: 600;
}

.mini-cart__foot p.total .amount,
.mini-cart__foot p.total .woocommerce-Price-amount {
	font-size: var(--fs-lg);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--av-ink);
}

.mini-cart__note {
	margin: 0;
	font-size: var(--fs-xs);
	line-height: 1.4;
	color: var(--av-ink-4);
}

.mini-cart__foot .buttons {
	display: grid;
	gap: 0.5rem;
	margin: 0.25rem 0 0;
}

.mini-cart__foot .buttons a,
.mini-cart__empty .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin: 0;
	min-height: 50px;
	padding: 0.8em 1.4em;
	border: 1px solid var(--av-ink);
	border-radius: var(--radius);
	background: var(--av-ink);
	color: var(--av-white);
	font-family: var(--av-sans);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	line-height: 1.2;
	cursor: pointer;
}

/* View cart is the lesser of the two actions, so it reads as an outline. */
.mini-cart__foot .buttons a:not(.checkout) {
	background: transparent;
	color: var(--av-ink);
}

.woocommerce .widget_shopping_cart .buttons a.checkout,
.mini-cart__foot .buttons a.checkout {
	background: var(--av-pine);
	border-color: var(--av-pine);
	color: #FFFDF8;
	order: -1;
}

/* Empty state -------------------------------------------------------------- */

.woocommerce-mini-cart__empty-message,
.mini-cart__empty {
	display: grid;
	justify-items: center;
	gap: 0.6rem;
	text-align: center;
	color: var(--av-ink-3);
	padding: var(--sp-7) var(--sp-4);
	margin: auto 0;
}

.mini-cart__empty svg {
	color: var(--av-line);
}

.mini-cart__empty p {
	margin: 0;
}

@media (hover: hover) and (pointer: fine) {
	.drawer--cart ul.cart_list li a.remove:hover,
	.mini-item > a.remove:hover {
		background: var(--av-brick);
		color: #fff !important;
	}

	.mini-qty__btn:not(:disabled):hover {
		background: var(--av-parchment);
		color: var(--av-ink);
	}

		.mini-cart__foot .buttons a:hover {
		background: var(--av-ink);
		border-color: var(--av-ink);
		color: var(--av-white);
	}

	.mini-item__name a:hover {
		text-decoration: underline;
	}
}

/* --------------------------------------------------------------------------
   6. Cart, checkout, account
   -------------------------------------------------------------------------- */

.woocommerce-cart .site-main,
.woocommerce-checkout .site-main,
.woocommerce-account .site-main {
	padding-block: 1.5rem 3rem;
}

/* Cart page layout ---------------------------------------------------------
   WooCommerce emits the item form and the totals as siblings, so the two
   columns are made with a grid on their shared parent rather than by
   overriding cart.php. Keeping the stock template means plugins that inject
   rows into the cart table still land in the right place. */

/* The editorial rules clamp every direct child of .entry-content to a 680px
   reading measure. That is right for an article and wrong for the cart, which
   is an interface: it left the item list narrower than the summary beside it. */
.woocommerce-cart .entry-content > *,
.woocommerce-checkout .entry-content > *,
.woocommerce-account .entry-content > * {
	max-width: none;
}

.woocommerce-cart .woocommerce {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-4);
	align-items: start;
}

.woocommerce-cart .woocommerce-notices-wrapper,
.woocommerce-cart .woocommerce > form.woocommerce-cart-form {
	grid-column: 1 / -1;
}

.woocommerce-cart .cart-collaterals {
	width: 100%;
	float: none;
}

.woocommerce-cart .cart_totals {
	width: 100% !important;
	float: none !important;
	border: 1px solid var(--av-line);
	border-radius: var(--radius-lg);
	background: var(--av-parchment);
	padding: 1rem;
}

.woocommerce-cart .cart_totals h2 {
	margin-top: 0;
}

/* WooCommerce's responsive stylesheet turns every shop_table into blocks on a
   phone and fakes the labels with td::before. That is right for the item table
   and wrong for the totals, which are two short columns that fit side by side
   at any width — as blocks they collapse to their content and strand half the
   panel. So this one table opts back into being a table. */
.woocommerce-cart .cart_totals table.shop_table {
	/* The responsive sheet makes this display:block, which leaves the real table
	   box inside it sizing to its content — width:100% then applies to a wrapper
	   that the columns ignore. */
	display: table;
}

.woocommerce-cart .cart_totals table.shop_table tbody {
	display: table-row-group;
}

.woocommerce-cart .cart_totals table.shop_table tr {
	display: table-row;
}

.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td {
	display: table-cell;
}

.woocommerce-cart .cart_totals table.shop_table td::before {
	content: none !important;
}

/* The alternating tint is applied to cells rather than rows, so with the header
   column visible again it paints half a band. The totals are short enough to
   read without it. */
.woocommerce-cart .cart_totals table.shop_table tr:nth-child(2n) td,
.woocommerce-cart .cart_totals table.shop_table tr:nth-child(2n) th,
.woocommerce-cart .cart_totals table.shop_table tr td,
.woocommerce-cart .cart_totals table.shop_table tr th {
	background-color: transparent;
}

.woocommerce-cart .cart_totals table.shop_table tr th,
.woocommerce-cart .cart_totals table.shop_table tr td {
	border-top: 1px solid var(--av-line-soft);
	padding-block: 0.6rem;
}

.woocommerce-cart .cart_totals table.shop_table tr:first-child th,
.woocommerce-cart .cart_totals table.shop_table tr:first-child td {
	border-top: 0;
}

/* Left column sized to its longest label, value column takes the rest and
   aligns right. */
.woocommerce-cart .cart_totals table.shop_table {
	width: 100%;
	table-layout: fixed;
	border: 0;
	background: none;
}

.woocommerce-cart .cart_totals table.shop_table th {
	width: 45%;
	background: none;
	text-transform: none;
	letter-spacing: 0;
	font-size: var(--fs-sm);
	color: var(--av-ink-2);
	padding-inline: 0;
}

.woocommerce-cart .cart_totals table.shop_table td {
	text-align: right;
	font-variant-numeric: tabular-nums;
	padding-inline: 0;
	overflow-wrap: anywhere;
}

.woocommerce-cart .cart_totals tr.order-total th,
.woocommerce-cart .cart_totals tr.order-total td {
	font-size: var(--fs-base);
	font-weight: 700;
	color: var(--av-ink);
}

/* The shipping cell holds a whole calculator, so it opts out of the right
   alignment the money columns want. */
.woocommerce-cart .cart_totals td[data-title="Shipping"],
.woocommerce-cart .cart_totals .woocommerce-shipping-totals td {
	text-align: left;
}

.woocommerce-cart .cart_totals ul#shipping_method {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.3rem;
}

.woocommerce-cart .cart_totals ul#shipping_method li {
	display: flex;
	align-items: flex-start;
	gap: 0.4rem;
	font-size: var(--fs-sm);
}

.woocommerce-cart .wc-proceed-to-checkout {
	padding: 0;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	width: 100%;
	margin: 0;
	background: var(--av-pine);
	border-color: var(--av-pine);
	color: #FFFDF8;
}

/* Item rows become cards on a phone ----------------------------------------
   Four columns of product, price, quantity and subtotal cannot be read at
   360px. Each row turns into a grid instead: image on the left, everything
   else stacked beside it, which is the same shape as the drawer so the two
   read as one system. */

@media (max-width: 719px) {
	.woocommerce-cart table.shop_table_responsive.cart,
	.woocommerce-cart table.shop_table_responsive.cart tbody {
		display: block;
		border: 0;
		background: none;
	}

	.woocommerce-cart table.shop_table_responsive.cart thead {
		/* The column headings are meaningless once the row is a card, but they
		   must stay reachable for screen readers. */
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.woocommerce-cart table.shop_table_responsive.cart tr.woocommerce-cart-form__cart-item {
		position: relative;
		display: grid;
		grid-template-columns: 72px minmax(0, 1fr);
		grid-template-areas:
			"thumb name"
			"thumb price"
			"thumb foot";
		gap: 0.15rem 0.85rem;
		padding: 0.9rem;
		margin-bottom: 0.6rem;
		border: 1px solid var(--av-line);
		border-radius: var(--radius-lg);
		background: var(--av-surface);
	}

	.woocommerce-cart table.shop_table_responsive.cart tr.woocommerce-cart-form__cart-item td {
		display: block;
		padding: 0;
		border: 0;
		text-align: left !important;
	}

	.woocommerce-cart table.shop_table_responsive.cart td.product-thumbnail {
		grid-area: thumb;
		align-self: start;
	}

	.woocommerce-cart table.shop_table_responsive.cart td.product-thumbnail img {
		width: 72px;
		height: 72px;
		object-fit: cover;
	}

	.woocommerce-cart table.shop_table_responsive.cart td.product-name {
		grid-area: name;
		padding-right: 1.75rem !important;
		font-weight: 600;
	}

	.woocommerce-cart table.shop_table_responsive.cart td.product-price {
		grid-area: price;
		font-size: var(--fs-xs);
		color: var(--av-ink-4);
	}

	/* Quantity and line total share the last line, mirroring the drawer. */
	.woocommerce-cart table.shop_table_responsive.cart td.product-quantity {
		grid-area: foot;
		margin-top: 0.4rem;
	}

	.woocommerce-cart table.shop_table_responsive.cart td.product-subtotal {
		grid-area: foot;
		margin-top: 0.4rem;
		justify-self: end;
		align-self: center;
		font-weight: 700;
		font-variant-numeric: tabular-nums;
	}

	.woocommerce-cart table.shop_table_responsive.cart td.product-remove {
		position: absolute;
		top: 0.5rem;
		right: 0.5rem;
	}

	/* WooCommerce's responsive stylesheet writes the column name in before
	   each cell; the card already says what each number is. */
	.woocommerce-cart table.shop_table_responsive.cart td::before {
		content: none !important;
	}

	/* WooCommerce tints every second row for readability in a table. Once each
	   row is its own card that tint just looks like a rendering fault. */
	.woocommerce-cart table.shop_table_responsive.cart tr:nth-child(2n) td,
	.woocommerce-cart table.shop_table_responsive.cart tr:nth-child(2n) {
		background-color: transparent;
	}

	.woocommerce-cart table.shop_table_responsive.cart td.actions {
		display: block;
		padding: 0;
		background: none;
		border: 0;
	}
}

@media (min-width: 1024px) {
	.woocommerce-cart .woocommerce {
		grid-template-columns: minmax(0, 1fr) 340px;
		gap: var(--sp-5);
	}

	.woocommerce-cart .woocommerce > form.woocommerce-cart-form {
		grid-column: 1;
	}

	.woocommerce-cart .cart-collaterals {
		grid-column: 2;
		grid-row: 2;
	}

	/* The summary follows you down a long cart. 84px clears the sticky header. */
	.woocommerce-cart .cart_totals {
		position: sticky;
		top: 84px;
	}
}

.woocommerce table.shop_table {
	width: 100%;
	border: 1px solid var(--av-line);
	border-radius: var(--radius-lg);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: var(--av-surface);
	font-size: var(--fs-sm);
}

.woocommerce table.shop_table th {
	padding: 0.85rem;
	background: var(--av-parchment);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--av-ink-3);
	border-bottom: 1px solid var(--av-line);
}

.woocommerce table.shop_table td {
	padding: 0.85rem;
	border-top: 1px solid var(--av-line-soft);
	vertical-align: middle;
}

.woocommerce table.shop_table img {
	width: 56px;
	border-radius: var(--radius);
	border: 1px solid var(--av-line-soft);
}

.woocommerce table.cart td.actions {
	background: var(--av-parchment);
}

.woocommerce table.cart td.actions .coupon {
	display: grid;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
}

.woocommerce table.cart td.actions .button {
	width: 100%;
}

/* WooCommerce disables Update cart until a quantity changes. Its default
   disabled styling is grey text on a grey fill, which reads as broken rather
   than as inactive — this keeps it clearly readable and clearly inactive. */
.woocommerce table.cart td.actions .button[disabled],
.woocommerce table.cart td.actions .button:disabled {
	background: transparent;
	border-color: var(--av-line);
	color: var(--av-ink-4);
	opacity: 1;
}

.woocommerce .cart_totals h2,
.woocommerce-checkout h3,
.woocommerce-account h2 {
	font-size: var(--fs-lg);
	margin-bottom: var(--sp-4);
}

.woocommerce #payment {
	background: var(--av-parchment);
	border: 1px solid var(--av-line);
	border-radius: var(--radius-lg);
	padding: 1rem;
}

.woocommerce #payment div.payment_box {
	background: var(--av-surface);
	border-radius: var(--radius);
	font-size: var(--fs-sm);
}

.woocommerce #payment div.payment_box::before {
	border-bottom-color: var(--av-surface);
}

.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-height: 52px;
	padding: 0.85em 1.5em;
	border: 1px solid var(--av-ink);
	border-radius: var(--radius);
	background: var(--av-ink);
	color: var(--av-white);
	font-family: var(--av-sans);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	line-height: 1;
	text-decoration: none;
	transition: all 0.25s var(--ease);
}

.woocommerce .button.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #place_order {
	background: var(--av-pine);
	border-color: var(--av-pine);
	color: #FFFDF8;
}

/* Place Order is the last tap in the funnel — full width, never a small
   right-aligned button someone has to aim at. */
.woocommerce #place_order {
	width: 100%;
	min-height: 56px;
	font-size: var(--fs-sm);
}

.woocommerce form .form-row {
	margin-bottom: var(--sp-4);
	padding: 0;
	width: 100%;
	float: none;
}

.woocommerce form .form-row-first,
.woocommerce form .form-row-last {
	width: 100%;
}

.woocommerce form .form-row label {
	margin-bottom: 0.35rem;
}

.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register {
	border: 1px solid var(--av-line);
	border-radius: var(--radius-lg);
	background: var(--av-surface);
	padding: 1.25rem;
	margin-bottom: var(--sp-5);
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews {
	border-top: 0;
	border-left: 3px solid var(--av-pine);
	border-radius: var(--radius);
	background: var(--av-parchment);
	color: var(--av-ink-2);
	padding: 0.9rem 1rem;
	font-size: var(--fs-sm);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: var(--sp-5);
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	position: static;
	color: var(--av-pine);
	margin: 0;
}

.woocommerce-error {
	border-left-color: var(--av-brick);
}

.woocommerce-error::before {
	color: var(--av-brick);
}

.cart-empty__actions {
	text-align: center;
	margin-top: var(--sp-5);
}

/* My account navigation */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0 0 var(--sp-5);
	padding: 0;
	display: grid;
	gap: 0.25rem;
}

.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: flex;
	align-items: center;
	min-height: var(--tap);
	padding: 0 1rem;
	border-radius: var(--radius);
	text-decoration: none;
	font-size: var(--fs-sm);
	font-weight: 600;
	transition: background-color 0.2s var(--ease);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--av-ink);
	color: var(--av-white);
}

@media (min-width: 720px) {
	.woocommerce-cart .site-main,
	.woocommerce-checkout .site-main,
	.woocommerce-account .site-main {
		padding-block: clamp(2rem, 4vw, 3.5rem) clamp(3rem, 6vw, 5rem);
	}

	/* shop_table_responsive is display:block at every width, so the real table
	   box inside it sizes to its content and stops short of the column —
	   width:100% only ever applied to the block wrapper. Same cause as the
	   cart totals above. */
	.woocommerce table.shop_table_responsive {
		display: table;
	}

	.woocommerce table.shop_table th,
	.woocommerce table.shop_table td {
		padding: 1.1rem;
	}

	.woocommerce table.shop_table img {
		width: 68px;
	}

	.woocommerce table.cart td.actions .coupon {
		display: flex;
		gap: 0.5rem;
		margin-bottom: 0;
	}

	/* Enough room for a real coupon code rather than "Coupon c…". */
	.woocommerce table.cart td.actions .coupon .input-text {
		flex: 1 1 220px;
		min-width: 180px;
		max-width: 300px;
	}

	/* The coupon sits left, Update cart right, without touching the cell's
	   display — a flex <td> is removed from the table's column model and takes
	   the header widths with it. */
	.woocommerce table.cart td.actions .coupon {
		float: left;
		width: auto;
	}

	.woocommerce table.cart td.actions .button[name="update_cart"] {
		float: right;
	}

	.woocommerce table.cart td.actions::after {
		content: "";
		display: block;
		clear: both;
	}

	.woocommerce table.cart td.actions .button {
		width: auto;
	}

	.woocommerce #payment {
		padding: 1.25rem;
	}

	.woocommerce #place_order {
		width: auto;
	}

	.woocommerce form .form-row-first,
	.woocommerce form .form-row-last {
		width: 48%;
	}

	.woocommerce form .form-row-first {
		float: left;
	}

	.woocommerce form .form-row-last {
		float: right;
	}

	.woocommerce form.checkout_coupon,
	.woocommerce form.login,
	.woocommerce form.register {
		padding: 1.5rem;
	}

	.woocommerce-message .button {
		margin-left: auto;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation a:hover {
		background: var(--av-parchment);
	}
}

@media (hover: hover) and (pointer: fine) {
	.woocommerce .button:hover,
	.woocommerce a.button:hover,
	.woocommerce button.button:hover,
	.woocommerce input.button:hover {
		background: var(--av-pine);
		border-color: var(--av-pine);
		color: #FFFDF8;
	}

	.woocommerce .button.alt:hover,
	.woocommerce #place_order:hover {
		background: var(--av-pine-deep);
		border-color: var(--av-pine-deep);
	}
}

/* --------------------------------------------------------------------------
   7. Reviews
   -------------------------------------------------------------------------- */

.woocommerce #reviews #comments ol.commentlist {
	padding: 0;
	margin: 0 0 var(--sp-5);
}

.woocommerce #reviews #comments ol.commentlist li {
	margin-bottom: var(--sp-5);
}

.woocommerce #reviews #comments ol.commentlist li img.avatar {
	width: 40px;
	border-radius: 50%;
	border: 0;
	padding: 0;
	background: none;
	position: absolute;
}

.woocommerce #reviews #comments ol.commentlist li .comment-text {
	margin-left: 54px;
	padding: 1rem;
	border: 1px solid var(--av-line);
	border-radius: var(--radius-lg);
	background: var(--av-surface);
}

.woocommerce #review_form #respond {
	padding: 0;
}

@media (min-width: 720px) {
	.woocommerce #reviews #comments ol.commentlist li img.avatar {
		width: 46px;
	}

	.woocommerce #reviews #comments ol.commentlist li .comment-text {
		margin-left: 66px;
		padding: 1.1rem 1.25rem;
	}
}

/* ==========================================================================
   8. Live bird registry

   A bird is an individual, so its card is led by the closed leg band number —
   set in a monospace face inside a ring that echoes the real thing. Sold birds
   stay in the registry, greyed but readable, because a breeder's back
   catalogue is provenance.
   ========================================================================== */

.registry {
	--band-colour: var(--av-pine);
}

/* Filters ------------------------------------------------------------------ */

.registry__filters {
	display: grid;
	gap: 0.6rem;
	padding-bottom: var(--sp-4);
	margin-bottom: var(--sp-5);
	border-bottom: 1px solid var(--av-line);
}

.registry__search {
	position: relative;
	display: flex;
	align-items: center;
}

.registry__search .icon {
	position: absolute;
	left: 0.85rem;
	color: var(--av-ink-4);
	pointer-events: none;
}

.registry__search input {
	padding-left: 2.6rem;
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
	letter-spacing: 0.04em;
}

.registry__selects {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem;
}

.registry__selects select {
	min-height: var(--tap);
	padding: 0 0.75rem;
	font-size: max(16px, var(--fs-sm));
}

.registry__selects .btn {
	grid-column: 1 / -1;
	width: 100%;
}

.registry__count {
	margin: 0;
	font-size: var(--fs-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--av-ink-4);
	font-variant-numeric: tabular-nums;
}

.registry__empty {
	padding: var(--sp-7) 0;
	text-align: center;
	color: var(--av-ink-3);
	max-width: 44ch;
	margin-inline: auto;
}

@media (min-width: 720px) {
	.registry__filters {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 0.75rem 1rem;
	}

	.registry__selects {
		grid-template-columns: repeat(4, auto);
		gap: 0.5rem;
	}

	.registry__selects .btn {
		grid-column: auto;
		width: auto;
	}

	.registry__count {
		grid-column: 1 / -1;
	}
}

/* The band ------------------------------------------------------------------
   A split ring in the brand's pine, with the number reading across it. The
   ring is drawn, not an image, so it recolours with the status. */

.band {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--band-colour, var(--av-pine));
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
}

.band__ring {
	width: 15px;
	height: 15px;
	flex: none;
	border: 3px solid currentColor;
	border-radius: 50%;
	/* The gap in a split band ring. */
	border-right-color: transparent;
	transform: rotate(-35deg);
}

.band__no {
	padding-bottom: 1px;
	border-bottom: 1px dashed color-mix(in srgb, currentColor 40%, transparent);
	font-family: var(--av-mono);
}

.band--lg {
	font-size: 0.95rem;
	gap: 0.65rem;
}

.band--lg .band__ring {
	width: 19px;
	height: 19px;
	border-width: 4px;
}

.band--sold {
	--band-colour: var(--av-ink-4);
}

.band--reserved {
	--band-colour: var(--av-brick);
}

/* Registry grid ------------------------------------------------------------ */

.registry__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

.bird {
	border: 1px solid var(--av-line);
	border-radius: var(--radius-lg);
	background: var(--av-surface);
	overflow: hidden;
	transition: border-color 0.3s var(--ease), box-shadow 0.4s var(--ease-out),
		transform 0.4s var(--ease-out);
}

.bird__link {
	display: grid;
	grid-template-columns: 116px 1fr;
	text-decoration: none;
	color: inherit;
	height: 100%;
}

.bird__media {
	position: relative;
	background: linear-gradient(168deg, #FFFDF9, #F0EADC);
	aspect-ratio: 1;
}

.bird__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bird--sold .bird__img {
	filter: grayscale(1);
	opacity: 0.72;
}

.bird__status {
	position: absolute;
	left: 0;
	bottom: 0;
	padding: 0.25rem 0.5rem;
	font-family: var(--av-sans);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--av-white);
	background: var(--av-pine);
	border-radius: 0 3px 0 0;
}

.bird__status--reserved { background: var(--av-brick); }
.bird__status--sold { background: var(--av-ink-3); }

.bird__body {
	padding: 0.85rem 0.95rem;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	min-width: 0;
}

.bird__name {
	margin: 0;
	font-family: var(--av-display);
	font-size: var(--fs-md);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.015em;
}

.bird__species {
	margin: 0;
	font-size: var(--fs-sm);
	color: var(--av-ink-3);
}

.bird__mutation {
	display: block;
	font-size: var(--fs-xs);
	color: var(--av-ink-4);
}

.bird__facts {
	list-style: none;
	margin: 0.15rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.75rem;
	font-size: var(--fs-xs);
	color: var(--av-ink-3);
}

.bird__sex {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-weight: 600;
}

.bird__sex span[aria-hidden] {
	font-size: 1rem;
	line-height: 1;
}

.bird__sex--male { color: #2C5F8A; }
.bird__sex--female { color: var(--av-brick); }

.bird__sex abbr {
	padding: 0.1rem 0.3rem;
	border: 1px solid currentColor;
	border-radius: 2px;
	font-size: 9px;
	letter-spacing: 0.08em;
	text-decoration: none;
}

.bird__foot {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
	margin-top: auto;
	padding-top: 0.6rem;
	border-top: 1px solid var(--av-line-soft);
}

.bird__price {
	font-family: var(--av-display);
	font-size: var(--fs-md);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.bird--sold .bird__price {
	font-size: var(--fs-sm);
	color: var(--av-ink-4);
	font-style: italic;
}

.bird__go {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--av-pine);
	white-space: nowrap;
}

@media (min-width: 560px) {
	.registry__grid {
		grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
		gap: 1.25rem;
	}

	.bird__link {
		grid-template-columns: 1fr;
	}

	.bird__media {
		aspect-ratio: 4 / 3;
	}

	.bird__status {
		left: auto;
		right: 0;
		top: 0;
		bottom: auto;
		border-radius: 0 0 0 3px;
	}

	.bird__body {
		padding: 1rem 1.1rem 1.1rem;
	}
}

@media (hover: hover) and (pointer: fine) {
	.bird:hover {
		border-color: var(--av-ink);
		transform: translateY(-3px);
		box-shadow: var(--shadow-md);
	}

	.bird:hover .bird__go .icon {
		transform: translateX(3px);
	}

	.bird__go .icon {
		transition: transform 0.3s var(--ease-out);
	}
}

/* Single bird panel -------------------------------------------------------- */

.birdcard {
	margin: 0 0 var(--sp-4);
	border: 1px solid var(--av-line);
	border-radius: var(--radius-lg);
	background: var(--av-parchment);
	overflow: hidden;
}

.birdcard__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	flex-wrap: wrap;
	padding: 0.9rem 1.1rem;
	background: var(--av-surface);
	border-bottom: 1px solid var(--av-line);
}

.birdcard__status {
	padding: 0.3rem 0.6rem;
	border-radius: 3px;
	background: var(--av-pine);
	color: var(--av-white);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.birdcard__status--reserved { background: var(--av-brick); }
.birdcard__status--sold { background: var(--av-ink-3); }

.birdcard__specs {
	margin: 0;
	padding: 0.4rem 1.1rem;
}

.birdcard__specs > div {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: 0.55rem 0;
	border-bottom: 1px solid var(--av-line);
}

.birdcard__specs > div:last-child {
	border-bottom: 0;
}

.birdcard__specs dt {
	margin: 0;
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--av-ink-4);
}

.birdcard__specs dd {
	margin: 0;
	font-size: var(--fs-sm);
	font-weight: 600;
	text-align: right;
	display: flex;
	align-items: center;
	gap: 0.45rem;
}

.birdcard__dna {
	padding: 0.1rem 0.35rem;
	border: 1px solid var(--av-pine);
	border-radius: 2px;
	color: var(--av-pine);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Parentage ---------------------------------------------------------------- */

.lineage {
	padding: 0.9rem 1.1rem;
	border-top: 1px solid var(--av-line);
	background: var(--av-surface);
}

.lineage__title {
	margin: 0 0 0.6rem;
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--av-ink-4);
}

.lineage__pair {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem;
}

.lineage__item {
	padding: 0.6rem 0.7rem;
	border: 1px solid var(--av-line);
	border-radius: var(--radius);
	background: var(--av-parchment);
	min-width: 0;
}

.lineage__label {
	display: block;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--av-ink-4);
	margin-bottom: 0.2rem;
}

.lineage__band {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
	font-size: var(--fs-sm);
	font-weight: 600;
	letter-spacing: 0.03em;
	text-decoration: none;
	color: var(--av-ink);
	word-break: break-all;
}

a.lineage__band {
	color: var(--av-pine);
}

.birdcard__note {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	margin: 0;
	padding: 0.85rem 1.1rem;
	border-top: 1px solid var(--av-line);
	font-size: var(--fs-sm);
	color: var(--av-ink-3);
	background: var(--av-parchment);
}

.birdcard__note .icon {
	flex: none;
	margin-top: 2px;
	color: var(--av-brick);
}

/* A bird in a normal shop grid still shows its band. */
.card__body .band {
	margin-bottom: 0.35rem;
}

/* Collection & transport ---------------------------------------------------
   Given its own block on a bird's page, in brick rather than pine, because it
   is a condition of sale and not a reassurance. */

.transport {
	margin: 0 0 var(--sp-4);
	padding: 0.9rem 1.05rem;
	border: 1px solid color-mix(in srgb, var(--av-brick) 30%, var(--av-line));
	border-left-width: 3px;
	border-left-color: var(--av-brick);
	border-radius: var(--radius);
	background: color-mix(in srgb, var(--av-brick) 4%, var(--av-surface));
}

.transport__title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.35rem;
	font-family: var(--av-sans);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--av-brick);
}

.transport__text {
	margin: 0;
	font-size: var(--fs-sm);
	line-height: 1.55;
	color: var(--av-ink-2);
}

.transport__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 40px;
	margin-top: 0.35rem;
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--av-brick);
	text-decoration: none;
}

/* Travel summary above the Reserve button -----------------------------------
   The full list plus the policy was pushing the button off a phone screen, so
   what survives above the fold is the price of each option and the fact that
   arrival is not guaranteed. The reasoning is one tap away in the accordion. */

.transport--compact {
	padding: 0.7rem 0.8rem;
}

.transport--compact .transport__title {
	margin-bottom: 0.5rem;
}

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

.travel-strip__item {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	padding: 0.4rem 0.45rem;
	border-radius: var(--radius);
	background: var(--av-surface);
	text-align: center;
}

.travel-strip__label {
	font-family: var(--av-sans);
	font-size: var(--fs-xs);
	line-height: 1.25;
	letter-spacing: 0.01em;
	color: var(--av-ink-4);
	/* Two-word names wrap rather than shrink the column below its neighbours. */
	text-wrap: balance;
}

.travel-strip__price {
	font-family: var(--av-sans);
	font-size: var(--fs-sm);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--av-ink);
}

/* Same-day flight is the option that protects the bird, so it reads as the
   recommendation without being labelled one. */
.travel-strip__item--delta {
	background: color-mix(in srgb, var(--av-pine) 9%, var(--av-surface));
}

.travel-strip__item--delta .travel-strip__price {
	color: var(--av-pine-deep);
}

.transport__care {
	display: flex;
	align-items: flex-start;
	gap: 0.35rem;
	margin: 0.55rem 0 0;
	font-size: var(--fs-xs);
	line-height: 1.45;
	color: var(--av-ink-3);
}

.transport__care svg {
	flex: none;
	margin-top: 0.2em;
	color: var(--av-pine);
}

.transport__care a {
	color: var(--av-pine-deep);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Landing under a sticky header hides the heading you just jumped to. */
.accordion__item {
	scroll-margin-top: 84px;
}

/* The three ways a bird travels ---------------------------------------------
   A list rather than a table: on a phone a three-column table of name, price
   and explanation collapses into something unreadable, while a stacked row
   keeps the price beside the name where it is being compared. */

.travel {
	list-style: none;
	margin: 0.6rem 0 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}

.travel__option {
	display: flex;
	gap: 0.6rem;
	padding: 0.6rem 0.7rem;
	border: 1px solid var(--av-line-soft);
	border-radius: var(--radius);
	background: var(--av-surface);
}

.travel__icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--av-brick) 8%, transparent);
	color: var(--av-brick);
}

/* Same-day flight is the option that protects the bird, so it is the one that
   gets the accent — not the cheapest and not the dearest, the safest. */
.travel__option--delta .travel__icon {
	background: color-mix(in srgb, var(--av-pine) 12%, transparent);
	color: var(--av-pine);
}

.travel__option--pickup .travel__icon {
	background: color-mix(in srgb, var(--av-ink) 7%, transparent);
	color: var(--av-ink-2);
}

.travel__body {
	flex: 1 1 auto;
	min-width: 0;
}

.travel__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.6rem;
}

.travel__label {
	font-family: var(--av-sans);
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--av-ink);
}

.travel__price {
	flex: none;
	font-family: var(--av-sans);
	font-size: var(--fs-sm);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--av-ink);
}

.travel__note {
	display: block;
	margin-top: 0.15rem;
	font-size: var(--fs-xs);
	line-height: 1.5;
	color: var(--av-ink-4);
}

.travel__arrange {
	display: flex;
	align-items: flex-start;
	gap: 0.4rem;
	margin: 0.6rem 0 0;
	font-size: var(--fs-xs);
	line-height: 1.5;
	color: var(--av-ink-3);
}

.travel__arrange svg {
	flex: none;
	margin-top: 0.15em;
	color: var(--av-brick);
}

/* The policy is the part a customer must not skim, so it is set apart rather
   than folded into the list above it. */
.travel__policy {
	margin-top: 0.75rem;
	padding-top: 0.7rem;
	border-top: 1px solid color-mix(in srgb, var(--av-pine) 25%, var(--av-line));
}

.travel__policy-title {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0 0 0.3rem;
	font-family: var(--av-sans);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--av-pine-deep);
}

.travel__policy p {
	margin: 0 0 0.5rem;
	font-size: var(--fs-xs);
	line-height: 1.6;
	color: var(--av-ink-2);
}

.travel__policy p:last-child {
	margin-bottom: 0;
}

/* Beside the shipping choices in the cart and checkout totals. */
.bird-rates-note td {
	padding-top: 0.3rem !important;
}

.bird-rates-note__care,
.bird-rates-note__arrange {
	margin: 0;
	font-size: var(--fs-xs);
	line-height: 1.5;
}

.bird-rates-note__care {
	display: flex;
	align-items: flex-start;
	gap: 0.4rem;
	margin-bottom: 0.35rem;
	padding: 0.45rem 0.55rem;
	border-radius: var(--radius);
	background: color-mix(in srgb, var(--av-pine) 8%, transparent);
	color: var(--av-pine-deep);
	font-weight: 600;
}

.bird-rates-note__care svg {
	flex: none;
	margin-top: 0.15em;
	color: var(--av-pine);
}

.bird-rates-note__arrange {
	color: var(--av-ink-4);
}

/* Checkout acknowledgement -------------------------------------------------- */

.bird-ack {
	margin: 0 0 1rem;
	padding: 0.8rem 0.9rem;
	border: 1px solid color-mix(in srgb, var(--av-pine) 32%, var(--av-line));
	border-radius: var(--radius);
	background: color-mix(in srgb, var(--av-pine) 5%, var(--av-surface));
}

.bird-ack__label {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin: 0;
	font-size: var(--fs-sm);
	line-height: 1.5;
	color: var(--av-ink);
	cursor: pointer;
}

/* The whole padded label is the tap target, so the box itself only has to be
   big enough to read as ticked. */
.bird-ack__label input[type="checkbox"] {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 0.1rem 0 0;
	accent-color: var(--av-pine);
}

/* Only turns red once they have actually tried to submit without it. */
.bird-ack__label input:user-invalid + span {
	color: var(--av-brick);
}

.aviarium-transport-notice {
	border-left-color: var(--av-brick);
}

.aviarium-transport-notice::before {
	content: none;
}

.aviarium-transport-notice .icon {
	flex: none;
	color: var(--av-brick);
}

/* ==========================================================================
   9. Product rail

   A horizontal row of the same product cards used everywhere else. It breaks
   out of the page wrap so cards reach the screen edge and the next one is
   visibly cut off — that slice is the whole instruction to swipe.
   ========================================================================== */

.section--has-rail {
	overflow: hidden;
}

.rail {
	margin-top: 0.25rem;
}

/* The extra class is what beats `.woocommerce ul.products` on specificity. */
.woocommerce ul.products.rail__track,
.rail__track {
	display: flex;
	grid-template-columns: none;
	gap: 0.75rem;
	margin: 0;
	padding: 0.25rem var(--gutter) 0.5rem;
	list-style: none;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-padding-left: var(--gutter);
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	outline: none;
}

.rail__track::-webkit-scrollbar {
	display: none;
}

/* 72% leaves a clear slice of the next card at the right edge. */
.woocommerce ul.products.rail__track li.product,
.rail__track > li {
	flex: 0 0 72%;
	max-width: 72%;
	scroll-snap-align: start;
}

.rail__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-4);
	margin-top: 0.35rem;
	padding-inline: var(--gutter);
}

.rail__dots {
	display: flex;
	gap: 0.3rem;
}

.rail__dot {
	width: 30px;
	height: 34px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	display: grid;
	place-items: center;
}

.rail__dot span {
	display: block;
	width: 100%;
	height: 3px;
	border-radius: 2px;
	background: var(--av-line);
	transition: background-color 0.3s var(--ease);
}

.rail__dot.is-current span {
	background: var(--av-brick);
}

.rail__arrows {
	display: none;
	gap: 0.5rem;
}

.rail__arrow {
	width: var(--tap);
	height: var(--tap);
	display: grid;
	place-items: center;
	border: 1px solid var(--av-line);
	border-radius: 50%;
	background: var(--av-surface);
	color: var(--av-ink);
	cursor: pointer;
	transition: all 0.25s var(--ease);
}

.rail__arrow[data-slider-prev] .icon {
	transform: rotate(180deg);
}

.rail__arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

@media (min-width: 480px) {
	.woocommerce ul.products.rail__track li.product,
	.rail__track > li {
		flex-basis: 54%;
		max-width: 54%;
	}
}

@media (min-width: 720px) {
	.woocommerce ul.products.rail__track,
	.rail__track {
		gap: 1.25rem;
	}

	.woocommerce ul.products.rail__track li.product,
	.rail__track > li {
		flex-basis: 34%;
		max-width: 34%;
	}

	.rail__controls {
		justify-content: space-between;
		margin-top: 0.5rem;
	}

	.rail__arrows {
		display: flex;
	}
}

@media (min-width: 1024px) {
	.woocommerce ul.products.rail__track li.product,
	.rail__track > li {
		flex-basis: 25.5%;
		max-width: 25.5%;
	}
}

/* Keep the rail aligned to the page gutter on very wide screens instead of
   running off into the margin. */
@media (min-width: 1400px) {
	.woocommerce ul.products.rail__track,
	.rail__track {
		padding-inline: calc((100vw - var(--wrap)) / 2 + var(--gutter));
		scroll-padding-left: calc((100vw - var(--wrap)) / 2 + var(--gutter));
	}

	.rail__controls {
		padding-inline: calc((100vw - var(--wrap)) / 2 + var(--gutter));
	}
}

@media (hover: hover) and (pointer: fine) {
	.rail__arrow:not(:disabled):hover {
		background: var(--av-ink);
		border-color: var(--av-ink);
		color: var(--av-white);
	}
}

/* ==========================================================================
   10. Egg organizer configurator

   The product does not exist until it is ordered, so the page draws it. The
   preview is an inline SVG driven by two custom properties, which means the
   colour change is a single style write rather than a repaint of markup.
   ========================================================================== */

.organizer {
	width: 100%;
	margin: 0 0 var(--sp-5);
	border: 1px solid var(--av-line);
	border-radius: var(--radius-lg);
	background: var(--av-parchment);
	overflow: hidden;
}

/* Preview ------------------------------------------------------------------ */

.org-preview {
	background:
		radial-gradient(80% 60% at 50% 0%, rgba(255, 255, 255, 0.85), transparent 70%),
		var(--av-surface);
	border-bottom: 1px solid var(--av-line);
	padding: 1rem 1rem 0.5rem;
}

.org-preview__stage {
	--org-shell: #1F5C55;
	--org-drawer: #EFE6D2;
	max-width: 260px;
	margin-inline: auto;
}

.org-preview__svg {
	width: 100%;
	height: auto;
	display: block;
	filter: drop-shadow(0 14px 22px rgba(23, 20, 15, 0.18));
}

/* The engraved lines. Both are set in the display serif so the preview reads
   like the finished plate rather than like a form field. */
.org-preview__top {
	font-family: var(--av-display);
	font-size: 19px;
	font-weight: 600;
	fill: #17140F;
	letter-spacing: -0.01em;
}

/* Engraved onto the shell face, so it has to stay readable on a bone-white
   shell as well as a charcoal one. The stroke is painted behind the fill as a
   soft halo rather than an outline. */
.org-preview__bot {
	font-family: var(--av-display);
	font-size: 15px;
	font-weight: 600;
	fill: rgba(255, 253, 248, 0.95);
	letter-spacing: 0.02em;
	paint-order: stroke fill;
	stroke: rgba(0, 0, 0, 0.32);
	stroke-width: 3px;
	stroke-linejoin: round;
}

.org-preview__top.is-placeholder,
.org-preview__bot.is-placeholder {
	opacity: 0.45;
	font-style: italic;
}

.org-preview__note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	margin: 0.5rem 0 0;
	font-size: var(--fs-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--av-ink-4);
}

.org-preview__note .icon {
	color: var(--av-amber);
}

/* Fields ------------------------------------------------------------------- */

.org-fields {
	padding: 1rem;
	display: grid;
	gap: 1rem;
}

.org-field {
	margin: 0;
	position: relative;
}

.org-field label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--av-ink-3);
	margin-bottom: 0.35rem;
}

.org-optional {
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: none;
	color: var(--av-ink-4);
}

.org-field input[type="text"],
.org-field textarea {
	background: var(--av-surface);
	font-family: var(--av-display);
	font-size: max(16px, 1.05rem);
	font-weight: 600;
}

.org-field textarea {
	font-family: var(--av-sans);
	font-size: max(16px, var(--fs-sm));
	font-weight: 400;
	min-height: 0;
}

.org-count {
	position: absolute;
	right: 0;
	top: 0;
	font-size: 10px;
	font-variant-numeric: tabular-nums;
	color: var(--av-ink-4);
	letter-spacing: 0.06em;
}

/* Swatches ----------------------------------------------------------------- */

.org-swatches {
	margin: 0;
	padding: 0;
	border: 0;
}

.org-swatches legend {
	padding: 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--av-ink-3);
	margin-bottom: 0.5rem;
}

.org-swatches legend b {
	color: var(--av-ink);
	text-transform: none;
	letter-spacing: 0;
	font-size: var(--fs-sm);
}

.org-swatches__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* inline-flex rather than grid, and flex:none so the row can never squeeze a
   swatch to nothing on a narrow screen. */
.org-swatch {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--tap);
	height: var(--tap);
	min-width: var(--tap);
	min-height: var(--tap);
	margin: 0;
	cursor: pointer;
}

/* appearance:none stops iOS Safari drawing its own radio control on top of the
   swatch — it ignores width/height on a native radio, so the control stayed at
   its intrinsic size and painted over the colour. */
.org-swatch input[type="radio"] {
	-webkit-appearance: none;
	appearance: none;
	position: absolute;
	inset: 0;
	opacity: 0;
	width: 100%;
	height: 100%;
	min-height: 0;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	border-radius: 50%;
	cursor: pointer;
}

.org-swatch__dot {
	display: block;
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	/* Background colour is set inline per swatch; this is only the fallback. */
	background-color: var(--av-line);
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.18),
		0 1px 2px rgba(23, 20, 15, 0.15);
	transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease);
	pointer-events: none;
}

/* The selected swatch gets a ring in the ink colour rather than a tick, so it
   reads at a glance without covering the colour it is describing. */
.org-swatch input:checked + .org-swatch__dot {
	transform: scale(1.06);
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.18),
		0 0 0 2px var(--av-paper),
		0 0 0 4px var(--av-ink);
}

.org-swatch input:focus-visible + .org-swatch__dot {
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.18),
		0 0 0 2px var(--av-paper),
		0 0 0 4px var(--av-pine);
}

@media (min-width: 720px) {
	.organizer {
		display: grid;
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
	}

	.org-preview {
		border-bottom: 0;
		border-right: 1px solid var(--av-line);
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 1.25rem;
	}

	.org-fields {
		padding: 1.25rem;
	}
}

@media (hover: hover) and (pointer: fine) {
	.org-swatch:hover .org-swatch__dot {
		transform: scale(1.1);
	}
}

/* Nest preview -------------------------------------------------------------
   Shares the configurator shell with the organizer; only the drawn parts and
   their lettering differ. */

.organizer--nest .org-preview__stage {
	--org-body: #6E9B3E;
	--org-accent: #C8A67A;
	max-width: 280px;
}

.nest-preview__num {
	font-family: var(--av-display);
	font-size: 34px;
	font-weight: 700;
	fill: #FFFDF8;
	letter-spacing: 0.02em;
}

.nest-preview__name {
	font-family: var(--av-display);
	font-size: 16px;
	font-weight: 600;
	fill: #17140F;
	letter-spacing: -0.01em;
}

.nest-preview__card {
	font-family: var(--av-sans);
	font-size: 12px;
	font-weight: 600;
	fill: rgba(23, 20, 15, 0.62);
	letter-spacing: 0.04em;
}

.nest-preview__num.is-placeholder,
.nest-preview__name.is-placeholder {
	opacity: 0.45;
	font-style: italic;
}

/* The nest number is a two-character field; it should not span the row. */
.org-field input.org-field--short {
	max-width: 120px;
}

/* Required markers on configurator fields. */
.org-required {
	color: var(--av-brick);
	text-decoration: none;
	border: 0;
	font-weight: 700;
	margin-left: 0.15em;
}

/* :user-invalid only — it fires after the customer has actually interacted or
   tried to submit. Plain :invalid would light every required field red the
   moment the page loaded, before anyone had done anything wrong. */
.org-field input:user-invalid {
	border-color: var(--av-brick);
	box-shadow: 0 0 0 3px rgba(168, 52, 31, 0.14);
}

/* ==========================================================================
   11. Make an offer

   Folded away behind a summary by default. A bird already has a price and a
   Reserve button; the offer is the secondary path, and putting it on equal
   footing would undercut the listed price for everyone who would have paid it.
   ========================================================================== */

.offer {
	margin: 0 0 var(--sp-5);
}

.offer__box {
	border: 1px solid var(--av-line);
	border-radius: var(--radius-lg);
	background: var(--av-surface);
	overflow: hidden;
}

.offer__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	min-height: 52px;
	padding: 0 1rem;
	cursor: pointer;
	list-style: none;
	font-family: var(--av-sans);
	font-size: var(--fs-sm);
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--av-ink);
}

.offer__summary::-webkit-details-marker {
	display: none;
}

.offer__summary .icon {
	color: var(--av-ink-3);
	transition: transform 0.3s var(--ease-out);
	transform: rotate(90deg);
}

.offer__box[open] .offer__summary {
	border-bottom: 1px solid var(--av-line);
}

.offer__box[open] .offer__summary .icon {
	transform: rotate(-90deg);
}

.offer__body {
	padding: 1rem;
}

.offer__intro {
	margin: 0 0 1rem;
	font-size: var(--fs-sm);
	line-height: 1.5;
	color: var(--av-ink-3);
}

.offer__grid {
	display: grid;
	gap: 0.85rem;
	margin-bottom: 0.85rem;
}

.offer__field {
	margin: 0;
}

.offer__field label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--av-ink-3);
	margin-bottom: 0.35rem;
}

/* The amount is the point of the form, so it is set larger than everything
   else and carries the currency symbol inside the field. */
.offer__amount {
	position: relative;
	display: flex;
	align-items: center;
}

.offer__currency {
	position: absolute;
	left: 0.9rem;
	font-family: var(--av-display);
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--av-ink-3);
	pointer-events: none;
}

.offer__amount input {
	padding-left: 2.2rem;
	font-family: var(--av-display);
	font-size: max(16px, 1.35rem);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	min-height: 58px;
}

.offer__terms {
	margin: 0.75rem 0 0;
	font-size: var(--fs-xs);
	color: var(--av-ink-4);
	text-align: center;
}

/* Honeypot — off-screen rather than display:none, which some bots skip. */
.offer__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.offer__result {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin: 0 0 0.75rem;
	padding: 0.85rem 1rem;
	border-radius: var(--radius);
	border-left: 3px solid var(--av-pine);
	background: var(--av-parchment);
	font-size: var(--fs-sm);
	line-height: 1.5;
	color: var(--av-ink-2);
}

.offer__result .icon {
	flex: none;
	margin-top: 2px;
	color: var(--av-pine);
}

.offer__result--low {
	border-left-color: var(--av-brick);
}

.offer__result--low .icon {
	color: var(--av-brick);
}

@media (min-width: 560px) {
	.offer__grid {
		grid-template-columns: 1fr 1fr;
	}

	.offer__field--amount {
		grid-column: 1 / -1;
	}

	.offer__body,
	.offer__summary {
		padding-inline: 1.25rem;
	}
}

/* Making negotiation visible -----------------------------------------------
   The form alone was too quiet: by the time anyone scrolled to it they had
   already read the price as fixed. These three touchpoints say it earlier —
   under the price, on the panel itself, and on the card before the click. */

.offer-prompt {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4rem 0.6rem;
	margin: -0.35rem 0 var(--sp-4);
	padding: 0.5rem 0.75rem;
	border-radius: var(--radius);
	background: color-mix(in srgb, var(--av-brick) 7%, var(--av-surface));
	font-size: var(--fs-sm);
	color: var(--av-ink-2);
}

.offer-prompt .icon {
	flex: none;
	color: var(--av-brick);
}

.offer-prompt a {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	margin-left: auto;
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--av-brick);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 1px;
}

/* The panel head reads as an invitation with a reason, not a bare toggle. */
.offer__box {
	border-color: color-mix(in srgb, var(--av-brick) 28%, var(--av-line));
}

.offer__summary {
	align-items: flex-start;
	gap: 0.75rem;
	padding-block: 0.85rem;
	min-height: 0;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
	background: color-mix(in srgb, var(--av-brick) 5%, var(--av-surface));
}

.offer__summary-icon {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	flex: none;
	border-radius: 50%;
	background: var(--av-brick);
	color: #FFF6EF;
}

.offer__summary-text {
	flex: 1;
	min-width: 0;
}

.offer__summary-text b {
	display: block;
	font-family: var(--av-display);
	font-size: var(--fs-md);
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--av-ink);
	line-height: 1.2;
}

.offer__summary-text small {
	display: block;
	margin-top: 1px;
	font-size: var(--fs-xs);
	line-height: 1.4;
	color: var(--av-ink-3);
}

.offer__summary > .icon {
	margin-top: 8px;
}

/* Card chip */
.offer-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	margin-top: 0.35rem;
	padding: 0.2rem 0.45rem;
	border: 1px solid color-mix(in srgb, var(--av-brick) 35%, transparent);
	border-radius: 3px;
	background: color-mix(in srgb, var(--av-brick) 7%, transparent);
	color: var(--av-brick);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	line-height: 1.4;
	width: fit-content;
}

/* ==========================================================================
   12. Product video

   The clip is a real slide inside WooCommerce's gallery, so it gets a
   thumbnail of its own beside the photographs and opens in the main frame
   when tapped — the behaviour people already know from every large store.

   Two details make that work. The slide carries data-thumb, so FlexSlider
   builds its thumbnail automatically; and it contains no <img>, which is what
   makes WooCommerce skip it when collecting lightbox items and when setting up
   zoom. Sitting last also means the photo indices the lightbox uses are
   unchanged, so tapping a picture still opens the right one.
   ========================================================================== */

.aviarium-video-slide {
	background: var(--av-ink);
	border: 1px solid var(--av-line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	line-height: 0;
}

/* Phone clips are portrait; letterboxing one into a landscape frame throws
   away most of the picture, so the video keeps its own shape and is capped
   instead — contain, never crop, since the bird may be near an edge. */
.aviarium-video-slide__player {
	display: block;
	width: 100%;
	height: auto;
	max-height: 72svh;
	object-fit: contain;
	background: var(--av-ink);
}

.aviarium-video-slide__embed {
	position: relative;
	line-height: 0;
}

.aviarium-video-slide__embed iframe {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
}

.aviarium-video-slide__link {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap);
	padding-inline: 1rem;
	line-height: 1.4;
	font-weight: 600;
	color: #fff;
}

/* The video's thumbnail needs to read as a video at a glance — otherwise it
   looks like a duplicate of the first photo. */
.woocommerce div.product div.images .flex-control-thumbs li.is-video-thumb {
	position: relative;
}

.woocommerce div.product div.images .flex-control-thumbs li.is-video-thumb::before,
.woocommerce div.product div.images .flex-control-thumbs li.is-video-thumb::after {
	content: "";
	position: absolute;
	pointer-events: none;
}

.woocommerce div.product div.images .flex-control-thumbs li.is-video-thumb::before {
	inset: 0;
	border-radius: var(--radius);
	background: rgba(18, 16, 12, 0.42);
}

/* A play triangle, nudged right of centre — a triangle centred on its bounding
   box reads as sitting slightly left. */
.woocommerce div.product div.images .flex-control-thumbs li.is-video-thumb::after {
	top: 50%;
	left: 50%;
	transform: translate(-40%, -50%);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 7px 0 7px 12px;
	border-color: transparent transparent transparent #fff;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}

/* Play marker on a registry card */
.bird__video-badge {
	position: absolute;
	top: 0.45rem;
	left: 0.45rem;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: rgba(18, 16, 12, 0.72);
	color: #fff;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.bird--sold .bird__video-badge {
	opacity: 0.6;
}

@media (min-width: 560px) {
	.bird__video-badge {
		top: 0.55rem;
		left: 0.55rem;
		width: 26px;
		height: 26px;
	}
}