/* ==========================================================================
   Butterfly Builder
   The site is a specimen drawer: dark ground, bone paper labels, and colour
   that only appears where light hits a wing. Loaded on the front end and as
   editor style (WP 7.1 iframes the editor, so both need the same file).
   ========================================================================== */

:root {
	--bb-bark: var(--wp--preset--color--bark, #1E1917);
	--bb-lift: var(--wp--preset--color--bark-lift, #2A2320);
	--bb-bone: var(--wp--preset--color--bone, #EDE4D3);
	--bb-dim: var(--wp--preset--color--bone-dim, #B8AC98);
	--bb-veneer: var(--wp--preset--color--veneer, #C4884A);
	--bb-pin: var(--wp--preset--color--pin, #8C8177);
	--bb-iris: linear-gradient(102deg, #2FA898 0%, #7B5AC4 46%, #D25F9E 76%, #C4884A 100%);
	--bb-rule: 1px solid rgb(237 228 211 / 14%);
	--bb-ease: cubic-bezier(.2, .7, .2, 1);
	--bb-tilt: 0%;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	background-color: var(--bb-bark);
	background-image: radial-gradient(140% 80% at 50% -10%, #2A2320 0%, #1E1917 55%);
	background-attachment: fixed;
	color: var(--bb-bone);
	font-synthesis-weight: none;
	text-rendering: optimizeLegibility;
}

::selection {
	background: var(--bb-veneer);
	color: var(--bb-bark);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--bb-veneer);
	outline-offset: 3px;
	border-radius: 1px;
}

/* Skip link, visible only when focused. */
.skip-link:focus {
	background: var(--bb-bone);
	color: var(--bb-bark);
	padding: .75rem 1.25rem;
	z-index: 999;
}

img {
	max-width: 100%;
	height: auto;
}

/* --------------------------------------------------------------------------
   Signature — the specimen label
   Bone paper, typed fields, pinned very slightly off-square. The last row
   states the proposition of the whole studio, so it is set apart.
   -------------------------------------------------------------------------- */

.bb-label {
	--label-pad: 1.05rem;
	position: relative;
	margin: 1.25rem 0 0;
	padding: var(--label-pad) 1.15rem calc(var(--label-pad) - .15rem);
	background: linear-gradient(178deg, #F3EBDC 0%, #E4D9C4 100%);
	color: #2A2320;
	font-family: var(--wp--preset--font-family--label, monospace);
	font-size: .6875rem;
	line-height: 1.5;
	letter-spacing: .02em;
	box-shadow:
		0 1px 0 rgb(255 255 255 / 35%) inset,
		0 14px 28px -18px rgb(0 0 0 / 85%);
	rotate: -.35deg;
	max-width: 26rem;
}

.bb-label::before {
	/* The ruled edge of a printed museum label. */
	content: "";
	position: absolute;
	inset: 4px;
	border: 1px solid rgb(42 35 32 / 22%);
	pointer-events: none;
}

.bb-label__row {
	display: grid;
	grid-template-columns: 5.75rem 1fr;
	gap: .25rem .75rem;
	padding: .3rem 0;
	border-bottom: 1px dotted rgb(42 35 32 / 22%);
}

.bb-label__row:last-child {
	border-bottom: 0;
}

.bb-label dt {
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: .625rem;
	color: rgb(42 35 32 / 62%);
	padding-top: .08em;
}

.bb-label dd {
	margin: 0;
	font-weight: 500;
}

.bb-label__row--oath {
	margin-top: .35rem;
	padding-top: .55rem;
	border-top: 1px solid rgb(42 35 32 / 35%);
	border-bottom: 0;
}

.bb-label__row--oath dd {
	color: #6B4A17;
}

.bb-label--compact {
	--label-pad: .7rem;
	margin-top: .9rem;
	font-size: .625rem;
	rotate: -.25deg;
	max-width: none;
}

.bb-label--compact .bb-label__row {
	grid-template-columns: 4.5rem 1fr;
}

/* Group block variation: any content can wear the label. */
.is-style-bb-label {
	background: linear-gradient(178deg, #F3EBDC 0%, #E4D9C4 100%);
	color: #2A2320;
	padding: 1.5rem 1.35rem;
	rotate: -.4deg;
	box-shadow: 0 18px 34px -20px rgb(0 0 0 / 85%);
}

.is-style-bb-label :where(h1, h2, h3, h4, h5, h6, p, li) {
	color: #2A2320;
}

/* --------------------------------------------------------------------------
   The pin — a hairline with a head, used to hang section headings
   -------------------------------------------------------------------------- */

.is-style-bb-pinned {
	position: relative;
	padding-top: 2.5rem;
}

.is-style-bb-pinned::before {
	content: "";
	position: absolute;
	top: 0;
	left: .12em;
	width: 1px;
	height: 1.9rem;
	background: linear-gradient(180deg, var(--bb-pin), rgb(140 129 119 / 0%));
}

.is-style-bb-pinned::after {
	content: "";
	position: absolute;
	top: -3px;
	left: calc(.12em - 3px);
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--bb-bone);
	box-shadow: 0 1px 3px rgb(0 0 0 / 60%);
}

/* --------------------------------------------------------------------------
   Glass case — a raised, faintly lit panel
   -------------------------------------------------------------------------- */

.is-style-bb-case {
	position: relative;
	background: linear-gradient(168deg, #2E2724 0%, #211B19 100%);
	border: var(--bb-rule);
	box-shadow: 0 24px 60px -28px rgb(0 0 0 / 75%);
	overflow: hidden;
}

.is-style-bb-case::before {
	/* A single sheen across the glass. */
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(112deg, rgb(255 255 255 / 6%) 0%, rgb(255 255 255 / 0%) 38%);
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   Specimen drawer — the product grid
   Butted cells divided by hairlines, the way compartments meet in a real
   drawer. No floating cards, no rounded corners, no drop shadows.
   -------------------------------------------------------------------------- */

.bb-drawer .wp-block-post-template,
.bb-drawer .wc-block-product-template,
.bb-drawer ul.products {
	display: grid;
	grid-template-columns: repeat(var(--bb-cols, 4), minmax(0, 1fr));
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: var(--bb-rule);
	border-left: var(--bb-rule);
}

.bb-drawer .wp-block-post-template > li,
.bb-drawer .wc-block-product-template > li,
.bb-drawer ul.products > li {
	position: relative;
	margin: 0;
	padding: clamp(1.1rem, 2.2vw, 1.9rem);
	border-right: var(--bb-rule);
	border-bottom: var(--bb-rule);
	transition: background-color .5s var(--bb-ease);
	isolation: isolate;
}

.bb-drawer li:hover,
.bb-drawer li:focus-within {
	background-color: rgb(237 228 211 / 3.5%);
}

/* Iridescence. A wing changes colour with the angle you view it from, so the
   gradient position tracks the pointer rather than simply fading in. The
   overlay sits on the image, not the whole cell — light falls on the specimen,
   not on the label beside it. */
.bb-drawer :where(.wc-block-components-product-image, .wp-block-post-featured-image, .woocommerce-loop-product__link) {
	position: relative;
	display: block;
	overflow: hidden;
}

.bb-drawer :where(.wc-block-components-product-image, .wp-block-post-featured-image, .woocommerce-loop-product__link)::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--bb-iris);
	background-size: 320% 100%;
	background-position: calc(12% + var(--bb-tilt)) 50%;
	mix-blend-mode: screen;
	opacity: 0;
	transition: opacity .55s var(--bb-ease), background-position .35s linear;
	pointer-events: none;
}

.bb-drawer li:hover :where(.wc-block-components-product-image, .wp-block-post-featured-image, .woocommerce-loop-product__link)::after,
.bb-drawer li:focus-within :where(.wc-block-components-product-image, .wp-block-post-featured-image, .woocommerce-loop-product__link)::after {
	opacity: .26;
}

@media (width <= 62rem) {
	.bb-drawer .wp-block-post-template,
	.bb-drawer .wc-block-product-template,
	.bb-drawer ul.products {
		--bb-cols: 3;
	}
}

@media (width <= 44rem) {
	.bb-drawer .wp-block-post-template,
	.bb-drawer .wc-block-product-template,
	.bb-drawer ul.products {
		--bb-cols: 2;
	}
}

/* Product titles inside the drawer sit tight under the image. */
.bb-drawer :where(.wc-block-components-product-name, .woocommerce-loop-product__title, .wp-block-post-title) {
	font-family: var(--wp--preset--font-family--display, serif);
	font-size: 1.0625rem;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -.01em;
	margin: 1rem 0 .35rem;
	color: var(--bb-bone);
}

.bb-drawer .price,
.bb-drawer .wc-block-components-product-price {
	font-family: var(--wp--preset--font-family--body, sans-serif);
	font-size: .8125rem;
	font-variant-numeric: tabular-nums;
	color: var(--bb-dim);
}

.bb-drawer img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	width: 100%;
	filter: saturate(1.04) contrast(1.03);
	transition: scale .8s var(--bb-ease);
}

.bb-drawer li:hover img {
	scale: 1.018;
}

/* Mounted image style — a specimen sitting on felt. */
.is-style-bb-mounted img {
	background: #171311;
	border: var(--bb-rule);
	padding: clamp(.75rem, 2vw, 1.5rem);
}

/* --------------------------------------------------------------------------
   Label field lists (list block variation)
   -------------------------------------------------------------------------- */

.is-style-bb-fields {
	list-style: none;
	padding: 0;
	margin: 0;
	font-family: var(--wp--preset--font-family--label, monospace);
	font-size: .75rem;
	letter-spacing: .04em;
}

.is-style-bb-fields li {
	display: flex;
	justify-content: space-between;
	gap: 1.5rem;
	padding: .7rem 0;
	border-bottom: var(--bb-rule);
	color: var(--bb-dim);
}

.is-style-bb-fields li::marker {
	content: none;
}

/* --------------------------------------------------------------------------
   Header and footer
   -------------------------------------------------------------------------- */

.bb-header {
	position: sticky;
	top: 0;
	z-index: 20;
	backdrop-filter: saturate(140%) blur(14px);
	background: rgb(30 25 23 / 82%);
	border-bottom: var(--bb-rule);
}

.bb-header .wp-block-navigation__responsive-container-open,
.bb-header .wp-block-navigation__responsive-container-close {
	color: var(--bb-bone);
}

.bb-header .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--bb-bark);
	padding: 3rem clamp(1.25rem, 5vw, 4rem);
}

.bb-eyebrow {
	font-family: var(--wp--preset--font-family--label, monospace);
	font-size: .6875rem;
	text-transform: uppercase;
	letter-spacing: .18em;
	color: var(--bb-veneer);
}

.bb-footer {
	border-top: var(--bb-rule);
}

/* --------------------------------------------------------------------------
   WooCommerce — the plugin ships light-mode defaults, so forms, notices and
   tables are re-drawn here. Inputs read as blank fields on a label.
   -------------------------------------------------------------------------- */

.woocommerce :where(input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="search"], textarea, select),
.wc-block-components-text-input input,
.wc-block-components-select select,
.wc-block-components-textarea {
	background: rgb(237 228 211 / 5%);
	border: 1px solid rgb(237 228 211 / 22%);
	border-radius: 2px;
	color: var(--bb-bone);
	font-family: inherit;
	font-size: .9375rem;
	padding: .85rem .9rem;
	width: 100%;
	transition: border-color .25s var(--bb-ease), background-color .25s var(--bb-ease);
}

.woocommerce input:focus,
.woocommerce textarea:focus,
.woocommerce select:focus,
.wc-block-components-text-input input:focus {
	background: rgb(237 228 211 / 9%);
	border-color: var(--bb-veneer);
}

.woocommerce ::placeholder,
.wc-block-components-text-input label {
	color: var(--bb-pin);
}

.woocommerce .quantity input.qty {
	width: 4.5rem;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.woocommerce :where(.button, button.button, a.button, input.button, .wp-element-button),
.wc-block-components-button {
	background: var(--bb-bone);
	color: var(--bb-bark);
	border: 1px solid var(--bb-bone);
	border-radius: 2px;
	font-family: var(--wp--preset--font-family--label, monospace);
	font-size: .6875rem;
	text-transform: uppercase;
	letter-spacing: .14em;
	font-weight: 500;
	padding: .95rem 1.6rem;
	transition: background-color .3s var(--bb-ease), color .3s var(--bb-ease), border-color .3s var(--bb-ease);
}

.woocommerce :where(.button, a.button, button.button):hover,
.wc-block-components-button:hover {
	background: var(--bb-veneer);
	border-color: var(--bb-veneer);
	color: var(--bb-bark);
}

.woocommerce .button.alt,
.single_add_to_cart_button {
	position: relative;
	overflow: hidden;
}

.single_add_to_cart_button::before {
	/* One iridescent pass across the primary action, on hover only. */
	content: "";
	position: absolute;
	inset: 0;
	background: var(--bb-iris);
	opacity: 0;
	transition: opacity .4s var(--bb-ease);
	z-index: -1;
}

.single_add_to_cart_button:hover::before {
	opacity: 1;
}

.woocommerce :where(.woocommerce-message, .woocommerce-info, .woocommerce-error),
.wc-block-components-notice-banner {
	background: rgb(237 228 211 / 6%);
	border: var(--bb-rule);
	border-left: 2px solid var(--bb-veneer);
	border-radius: 2px;
	color: var(--bb-bone);
	font-size: .9375rem;
	padding: 1.1rem 1.25rem;
}

.woocommerce .woocommerce-error {
	border-left-color: #D25F9E;
}

.woocommerce table:where(.shop_table, .shop_attributes, .woocommerce-orders-table) {
	border: var(--bb-rule);
	border-collapse: collapse;
	font-size: .875rem;
	width: 100%;
}

.woocommerce table:where(.shop_table, .shop_attributes) :where(th, td) {
	border-bottom: var(--bb-rule);
	padding: 1rem;
	color: var(--bb-bone);
}

.woocommerce table th {
	font-family: var(--wp--preset--font-family--label, monospace);
	font-size: .6875rem;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--bb-dim);
	font-weight: 500;
}

.woocommerce .price,
.woocommerce-Price-amount {
	color: var(--bb-bone);
	font-variant-numeric: tabular-nums;
}

.woocommerce del,
.woocommerce del .woocommerce-Price-amount {
	color: var(--bb-pin);
	opacity: .8;
}

.woocommerce ins {
	background: transparent;
	text-decoration: none;
}

.bb-flash,
.woocommerce span.onsale {
	position: absolute;
	top: 1rem;
	left: 1rem;
	z-index: 2;
	background: var(--bb-veneer);
	color: var(--bb-bark);
	font-family: var(--wp--preset--font-family--label, monospace);
	font-size: .625rem;
	text-transform: uppercase;
	letter-spacing: .12em;
	padding: .35rem .6rem;
	border-radius: 1px;
	min-height: 0;
	line-height: 1.2;
}

.bb-stock {
	font-family: var(--wp--preset--font-family--label, monospace);
	font-size: .6875rem;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--bb-veneer);
}

.bb-checkout-note {
	font-size: .8125rem;
	line-height: 1.6;
	color: var(--bb-dim);
	border-left: 1px solid var(--bb-veneer);
	padding-left: 1rem;
	margin: 1.5rem 0;
}

.woocommerce-breadcrumb {
	font-family: var(--wp--preset--font-family--label, monospace);
	font-size: .6875rem;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--bb-pin);
}

.woocommerce-tabs ul.tabs {
	border-bottom: var(--bb-rule);
	padding: 0;
	margin: 0 0 2rem;
	display: flex;
	gap: 2rem;
	list-style: none;
}

.woocommerce-tabs ul.tabs li {
	background: none;
	border: 0;
	margin: 0;
	padding: 0 0 .9rem;
}

.woocommerce-tabs ul.tabs li a {
	font-family: var(--wp--preset--font-family--label, monospace);
	font-size: .6875rem;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--bb-dim);
	padding: 0;
}

.woocommerce-tabs ul.tabs li.active a {
	color: var(--bb-bone);
	box-shadow: 0 2px 0 var(--bb-veneer);
}

.woocommerce .star-rating span::before,
.wc-block-components-product-rating__stars span::before {
	color: var(--bb-veneer);
}

/* Gallery on the product page sits on felt, like the drawer cells. */
.woocommerce-product-gallery {
	background: #171311;
	border: var(--bb-rule);
	padding: clamp(1rem, 3vw, 2.25rem);
}

.woocommerce-product-gallery__trigger {
	background: rgb(30 25 23 / 85%);
	color: var(--bb-bone);
	border-radius: 50%;
}

/* --------------------------------------------------------------------------
   Motion and small screens
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}

	.bb-drawer li:hover img {
		scale: 1;
	}
}

@media (width <= 44rem) {
	.bb-label {
		max-width: none;
	}

	.woocommerce-tabs ul.tabs {
		gap: 1.25rem;
		overflow-x: auto;
	}
}

@media print {
	body {
		background: #fff;
		color: #000;
	}
}

/* --------------------------------------------------------------------------
   Hero specimen
   One orchestrated moment on load — the wings settle, the pin drops in, the
   label lifts. After that, the only motion is the hue of the sheen tracking
   the pointer, which is what a structural colour actually does.
   -------------------------------------------------------------------------- */

.bb-hero-specimen {
	--bb-sheen: 0;
	margin: 0;
	position: relative;
}

.bb-butterfly {
	display: block;
	width: 100%;
	max-width: 34rem;
	margin-inline: auto;
	overflow: visible;
	animation: bb-settle 1.1s var(--bb-ease) both;
}

/* Normal alpha, not screen. Screen blending over a brown ground desaturates
   the whole wing to pastel and loses the veneer underneath; plain alpha keeps
   the paint saturated and lets the grain read through it, which is what the
   real object does. */
.bb-butterfly .bb-wing--sheen {
	filter: hue-rotate(calc(var(--bb-sheen) * 1deg));
	transition: filter .2s linear;
}

.bb-butterfly .bb-pin {
	animation: bb-pin-drop .7s var(--bb-ease) .45s both;
}

.bb-hero-label {
	position: relative;
	max-width: 25rem;
	margin: -2rem 0 0 clamp(0rem, 8%, 5rem);
	animation: bb-label-rise .8s var(--bb-ease) .7s both;
}

.bb-hero-label .bb-label {
	margin-top: 0;
	max-width: none;
}

@keyframes bb-settle {
	from { opacity: 0; scale: .984; translate: 0 10px; }
	to   { opacity: 1; scale: 1; translate: 0 0; }
}

@keyframes bb-pin-drop {
	from { opacity: 0; translate: 0 -20px; }
	to   { opacity: 1; translate: 0 0; }
}

@keyframes bb-label-rise {
	from { opacity: 0; translate: 0 16px; rotate: -2.4deg; }
	to   { opacity: 1; translate: 0 0; rotate: -.35deg; }
}

@media (prefers-reduced-motion: reduce) {
	.bb-butterfly,
	.bb-butterfly .bb-pin,
	.bb-hero-label {
		animation: none;
	}

	.bb-butterfly .bb-wing--sheen {
		filter: none;
	}
}

@media (width <= 44rem) {
	.bb-hero-label {
		margin-left: 0;
		margin-top: -1rem;
	}
}