/*
Theme Name: Overgrown
Theme URI: https://shopovergrown.com
Author: Overgrown
Author URI: https://shopovergrown.com
Description: A black block theme for shopovergrown.com. White on pure black, two typefaces, no accent colour: the photographs are the only colour on the site. Built for WooCommerce prints, stickers and clothing.
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.0
Version: 1.4.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: overgrown
Tags: full-site-editing, block-patterns, e-commerce, one-column, custom-colors, accessibility-ready
*/

/* --------------------------------------------------------------------------
   Contents
   1  Tokens
   2  Base and accessibility
   3  Header
   4  Mobile menu overlay
   5  Footer
   6  Ornament: Framed and Diamond block styles
   7  Home
   8  Product grid (shop and categories)
   9  Single product
   10 Option pickers
   11 WooCommerce cart, checkout, mini cart
   12 404 and pages

   Colours, fonts, sizes and spacing live in theme.json and in
   Appearance > Editor > Styles. Change them there, not here.
   -------------------------------------------------------------------------- */

/* 1  Tokens ---------------------------------------------------------------- */

:root {
	--og-black: var(--wp--preset--color--black, #000);
	--og-white: var(--wp--preset--color--white, #fff);
	--og-paper: var(--wp--preset--color--paper, #e6e6e6);
	--og-ash: var(--wp--preset--color--ash, #8a8a8a);
	--og-smoke: var(--wp--preset--color--smoke, rgba(255, 255, 255, 0.22));
	--og-serif: var(--wp--preset--font-family--instrument-serif, Georgia, serif);
	--og-sans: var(--wp--preset--font-family--inter, system-ui, sans-serif);
	--og-t: 150ms;
	--og-grid-gap: 40px;
	--og-edge: 2rem;
}

:root body {
	--wp--style--root--padding-left: var(--og-edge);
	--wp--style--root--padding-right: var(--og-edge);
}

/* 2  Base and accessibility ------------------------------------------------ */

html {
	background-color: #000;
}

body {
	background-color: #000;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Pure black under every surface WordPress or WooCommerce might paint. */
.wp-site-blocks,
.wp-block-group,
.wp-block-columns,
.wp-block-column,
.entry-content,
.woocommerce,
.wc-block-components-panel,
.wc-block-components-sidebar,
.wc-block-components-main {
	background-color: transparent;
}

p,
li,
dd,
dt {
	max-width: 68ch;
}

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

a {
	transition: color var(--og-t) linear, opacity var(--og-t) linear, border-color var(--og-t) linear;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 1px solid var(--og-white);
	outline-offset: 3px;
}

.skip-link,
.skip-link.screen-reader-text {
	background-color: #000;
	color: #fff;
	font-family: var(--og-sans);
	font-size: 0.9375rem;
	border: 1px solid #fff;
	border-radius: 0;
}

::selection {
	background: var(--og-white);
	color: var(--og-black);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* 3  Header ---------------------------------------------------------------- */

/* Header and footer line up with wide content: the root padding on narrow
   screens, the same edge as an .alignwide block once there is room for one. */
/* Header and footer sit on the same left edge as a wide block: the root
   padding on narrow screens, the wide inset once there is room for one. */
.overgrown-header,
.overgrown-footer {
	padding-left: max(var(--og-edge), calc((100% - var(--wp--style--global--wide-size, 82rem)) / 2));
	padding-right: max(var(--og-edge), calc((100% - var(--wp--style--global--wide-size, 82rem)) / 2));
}

.overgrown-header {
	padding-top: var(--wp--preset--spacing--40);
	padding-bottom: var(--wp--preset--spacing--50);
	gap: var(--wp--preset--spacing--30);
}

.overgrown-brand {
	align-items: center;
	gap: 0.7rem;
	flex-wrap: nowrap !important;
}

.overgrown-mark {
	margin: 0;
	flex: 0 0 auto;
	line-height: 0;
}

.overgrown-mark img {
	width: 28px;
	height: 28px;
	display: block;
}

/* Until a site logo is chosen in the editor, the theme's own mark stands in. */
.overgrown-brand:not(:has(.wp-block-site-logo img))::before {
	content: "";
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	background: url("assets/brand/overgr0wn_no_text.png") center / contain no-repeat;
}

/* The mascot with smoke: footer, and larger on the 404 page. */
.overgrown-smoke {
	display: block;
	width: 64px;
	height: 64px;
	background: url("assets/brand/overgrownvariation.png") center / contain no-repeat;
}

/* One per page: on a 404 the big one carries it, so the footer drops its copy. */
.error404 .overgrown-footer .overgrown-smoke {
	display: none;
}

/* The double rule: two 1px lines, 3px apart, under the site name only. */
.overgrown-wordmark {
	position: relative;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--og-white);
}

.overgrown-wordmark::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -4px;
	height: 1px;
	background: var(--og-white);
}

.overgrown-wordmark .wp-block-site-title {
	margin: 0;
}

.overgrown-nav-area {
	align-items: center;
	gap: var(--wp--preset--spacing--30);
}

nav.overgrown-nav {
	font-family: var(--og-sans);
	font-size: 0.9375rem;
}

.overgrown-nav .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--30);
}

.overgrown-nav .wp-block-navigation-item__content {
	color: var(--og-paper);
}

.overgrown-nav .wp-block-navigation-item__content:hover,
.overgrown-nav .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content {
	color: var(--og-white);
}

/* Mini cart: a plain white mark with a count, no chrome. */
.overgrown-header .wp-block-woocommerce-mini-cart {
	margin: 0;
}

.overgrown-header .wc-block-mini-cart__button {
	background: transparent;
	border: 0;
	padding: 0.25rem;
	color: var(--og-paper);
	cursor: pointer;
}

.overgrown-header .wc-block-mini-cart__button:hover {
	color: var(--og-white);
}

.overgrown-header .wc-block-mini-cart__quantity-badge .wc-block-mini-cart__badge {
	background: transparent;
	color: inherit;
	font-family: var(--og-sans);
	font-size: 0.8125rem;
	border: 0;
}

.overgrown-header .wc-block-mini-cart__amount {
	display: none;
}

.overgrown-menu-toggle {
	display: none;
	appearance: none;
	background: transparent;
	border: 0;
	padding: 0.35rem 0;
	margin: 0;
	color: var(--og-white);
	font-family: var(--og-sans);
	font-size: 0.9375rem;
	font-weight: 500;
	cursor: pointer;
	transition: opacity var(--og-t) linear;
}

.overgrown-menu-toggle:hover {
	opacity: 0.7;
}

/* 4  Mobile menu overlay --------------------------------------------------- */

@media (max-width: 781px) {
	.has-js-menu .overgrown-menu-toggle {
		display: block;
	}

	.has-js-menu nav.overgrown-nav {
		display: none;
	}

	.has-js-menu .overgrown-header.is-menu-open nav.overgrown-nav {
		display: flex;
		position: fixed;
		inset: 0;
		z-index: 90;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		background: var(--og-black);
		padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
		overflow-y: auto;
	}

	.has-js-menu .overgrown-header.is-menu-open .wp-block-navigation__container {
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		gap: var(--wp--preset--spacing--20);
	}

	/* The header bar stays put and stays above the overlay, so the site name,
	   the cart and the toggle are all still there while the menu is open. */
	.has-js-menu .overgrown-header.is-menu-open .overgrown-brand,
	.has-js-menu .overgrown-header.is-menu-open .wp-block-woocommerce-mini-cart,
	.has-js-menu .overgrown-header.is-menu-open .overgrown-menu-toggle {
		position: relative;
		z-index: 91;
	}

	.has-js-menu .overgrown-header.is-menu-open .wp-block-navigation__container .wp-block-navigation-item__content {
		font-family: var(--og-serif);
		font-size: clamp(2.25rem, 12vw, 3.5rem);
		line-height: 1.15;
		color: var(--og-white);
	}

	.is-menu-open body,
	body.is-menu-open {
		overflow: hidden;
	}
}

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

.overgrown-footer {
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--og-smoke);
	margin-top: var(--wp--preset--spacing--70);
	gap: var(--wp--preset--spacing--30);
	font-size: 0.9375rem;
	color: var(--og-ash);
}

.overgrown-footer a {
	color: var(--og-paper);
}

.overgrown-footer a:hover {
	color: var(--og-white);
}

.overgrown-footer .overgrown-footer-links {
	gap: var(--wp--preset--spacing--30);
	align-items: center;
}

.overgrown-footer .overgrown-smoke {
	margin: 0;
}

/* 6  Ornament -------------------------------------------------------------- */

/* "Framed": a 1px hairline with small corner brackets, from the label. */
.is-style-framed {
	position: relative;
	border: 1px solid var(--og-smoke);
	padding: var(--wp--preset--spacing--40);
}

.is-style-framed::before {
	content: "";
	position: absolute;
	inset: -1px;
	pointer-events: none;
	background-repeat: no-repeat;
	background-image:
		linear-gradient(var(--og-white), var(--og-white)), linear-gradient(var(--og-white), var(--og-white)),
		linear-gradient(var(--og-white), var(--og-white)), linear-gradient(var(--og-white), var(--og-white)),
		linear-gradient(var(--og-white), var(--og-white)), linear-gradient(var(--og-white), var(--og-white)),
		linear-gradient(var(--og-white), var(--og-white)), linear-gradient(var(--og-white), var(--og-white));
	background-size: 12px 1px, 1px 12px, 12px 1px, 1px 12px, 12px 1px, 1px 12px, 12px 1px, 1px 12px;
	background-position:
		left top, left top,
		right top, right top,
		left bottom, left bottom,
		right bottom, right bottom;
}

/* "Diamond": a single centred lozenge, used as a section divider. */
.wp-block-separator.is-style-diamond {
	border: 0;
	background: none;
	height: auto;
	width: 100%;
	max-width: none;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-block: var(--wp--preset--spacing--60);
	opacity: 1;
}

.wp-block-separator.is-style-diamond::before {
	content: "";
	display: block;
	width: 7px;
	height: 7px;
	border: 1px solid var(--og-white);
	transform: rotate(45deg);
}

/* 7  Home ------------------------------------------------------------------ */

.overgrown-hero {
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--50);
}

.overgrown-hero picture {
	display: block;
}

.overgrown-hero img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	box-sizing: border-box;
	max-height: 82vh;
	object-fit: cover;
}

/* Above 768px the wide photograph is shown whole: the height cap comes off and
   the width is capped at the photograph's own instead, so it is never enlarged
   past it. --og-hero-width is set on the figure by patterns/hero.php.
   max-width and box-sizing are set above because the hero is an HTML block, so
   WordPress does not load the core image block stylesheet on this page. */

@media (min-width: 768px) {
	.overgrown-hero img {
		max-width: var(--og-hero-width, 1536px);
		max-height: none;
		margin-inline: auto;
	}
}

.overgrown-hero-text {
	margin-top: var(--wp--preset--spacing--50);
	margin-bottom: var(--wp--preset--spacing--60);
}

.overgrown-hero-line {
	font-family: var(--og-serif);
	color: var(--og-white);
	max-width: 22ch;
	margin: 0 0 var(--wp--preset--spacing--30);
}

.overgrown-hero-link {
	font-family: var(--og-sans);
	font-size: 0.9375rem;
	color: var(--og-paper);
	margin: 0;
}

.overgrown-hero-link a {
	border-bottom: 1px solid var(--og-smoke);
	padding-bottom: 2px;
}

.overgrown-hero-link a:hover {
	border-bottom-color: var(--og-white);
}

/* 8  Product grid ---------------------------------------------------------- */

.overgrown-archive-title {
	margin-bottom: var(--wp--preset--spacing--50);
	text-align: left;
}

/* Category description. Only renders on a taxonomy archive, so the shop page,
   and any category left without a description, output nothing at all.
   Colour, family, size and line height are inherited from theme.json. */

.overgrown-archive-title:has(+ .overgrown-archive-description) {
	margin-bottom: var(--wp--preset--spacing--30);
}

.overgrown-archive-description {
	max-width: 60ch;
	margin-bottom: var(--wp--preset--spacing--50);
}

.overgrown-archive-description p:last-child {
	margin-bottom: 0;
}

.overgrown-grid ul.wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--og-grid-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

.overgrown-grid ul.wp-block-post-template > li.wp-block-post {
	margin: 0;
	max-width: none;
}

.overgrown-grid .wp-block-post-featured-image {
	margin: 0 0 0.85rem;
	border-radius: 0;
}

.overgrown-grid .wp-block-post-featured-image a,
.overgrown-grid .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	border-radius: 0;
}

.overgrown-grid .wp-block-post-featured-image img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: opacity var(--og-t) linear;
}

.overgrown-grid .wp-block-post-featured-image a:hover img {
	opacity: 0.72;
}

.overgrown-grid .wp-block-post-title {
	font-family: var(--og-sans);
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0;
	margin: 0;
	color: var(--og-paper);
}

.overgrown-grid .wp-block-post-title a {
	color: var(--og-paper);
}

.overgrown-grid .wp-block-post-title a:hover {
	color: var(--og-white);
}

.overgrown-grid .wp-block-woocommerce-product-price,
.overgrown-grid .wc-block-components-product-price {
	font-family: var(--og-sans);
	font-size: 0.9375rem;
	color: var(--og-ash);
	margin: 0.1rem 0 0;
	display: block;
}

.overgrown-grid .wc-block-components-product-price__value {
	color: var(--og-ash);
}

.overgrown-pagination {
	margin-top: var(--wp--preset--spacing--60);
	font-family: var(--og-sans);
	font-size: 0.9375rem;
	gap: var(--wp--preset--spacing--30);
}

.overgrown-pagination .page-numbers.current {
	color: var(--og-ash);
}

@media (max-width: 1023px) {
	.overgrown-grid ul.wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px;
	}
}

@media (max-width: 599px) {
	/* The home page keeps one tile to a line: there it is a short list under
	   the photograph, not a catalogue to scan. */
	.overgrown-grid ul.wp-block-post-template {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	/* The catalogue keeps two, so more of the shop is on screen at once, and
	   the gap stays at the tablet value rather than growing, so the images
	   stay the loudest thing on the page.

	   Both of the theme's classes are named here on purpose: below 600px
	   WordPress collapses post template grids to one column with a three
	   class selector, and this has to outweigh it. */
	.overgrown-grid.overgrown-grid--catalog ul.wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px;
	}

	/* Half the width, half the room for words: one step down the scale. The
	   !important is not decoration. The blocks keep the "small" size preset
	   so the size stays editable in Appearance > Editor, and WordPress
	   prints that preset as !important. */
	.overgrown-grid.overgrown-grid--catalog .wp-block-post-title,
	.overgrown-grid.overgrown-grid--catalog .wp-block-woocommerce-product-price,
	.overgrown-grid.overgrown-grid--catalog .wc-block-components-product-price {
		font-size: 0.8125rem !important;
	}

	/* Two lines, then stop. Blink and WebKit clamp with an ellipsis. Firefox
	   computes -webkit-box to flow-root, so its clamp never engages and the
	   max-height cuts instead: same two lines, no ellipsis. */
	.overgrown-grid.overgrown-grid--catalog .wp-block-post-title {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		line-height: 1.4;
		max-height: calc(2 * 1.4em);
		overflow: hidden;
		overflow-wrap: break-word;
	}
}

/* 9  Single product -------------------------------------------------------- */

.overgrown-product {
	margin-top: var(--wp--preset--spacing--40);
	gap: var(--wp--preset--spacing--60);
}

.overgrown-product .wp-block-column {
	min-width: 0;
}

/* Gallery: main image full width, any extra images as a row of thumbs. */
.woocommerce .overgrown-gallery .wp-block-woocommerce-product-image-gallery {
	max-width: none;
}

.overgrown-gallery .woocommerce-product-gallery {
	width: 100% !important;
	margin: 0;
	float: none;
	opacity: 1 !important;
}

.overgrown-gallery .woocommerce-product-gallery__wrapper {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
	transform: none !important;
	width: 100% !important;
}

.overgrown-gallery .woocommerce-product-gallery__image {
	margin: 0;
	width: auto !important;
}

.overgrown-gallery .woocommerce-product-gallery__image:first-child {
	grid-column: 1 / -1;
	margin-bottom: 0;
}

.overgrown-gallery .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0;
}

.overgrown-gallery .woocommerce-product-gallery__image:not(:first-child) img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: opacity var(--og-t) linear;
}

.overgrown-gallery .woocommerce-product-gallery__image:not(:first-child) a:hover img {
	opacity: 0.72;
}

.overgrown-gallery .woocommerce-product-gallery__trigger {
	display: none;
}

.overgrown-buy .wp-block-post-title {
	margin: 0 0 0.4rem;
}

.overgrown-price {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-family: var(--og-sans);
	color: var(--og-white);
}

.overgrown-price .wc-block-components-product-price,
.overgrown-price .price,
.overgrown-price .amount {
	color: inherit;
	font-family: inherit;
	font-weight: 400;
}

/* Range before the customer has chosen; exact price after. */
.overgrown-price.is-range {
	color: var(--og-ash);
}

.overgrown-price del {
	display: none;
}

.overgrown-buy .wp-block-woocommerce-add-to-cart-form {
	margin: 0;
}

.overgrown-buy form.cart {
	margin: 0 0 var(--wp--preset--spacing--50);
}

.overgrown-buy .single_variation .woocommerce-variation-price {
	display: none;
}

.overgrown-buy .woocommerce-variation-availability,
.overgrown-buy .woocommerce-variation-description {
	font-size: 0.9375rem;
	color: var(--og-ash);
}

.overgrown-buy .stock.out-of-stock {
	color: var(--og-ash);
	font-size: 0.9375rem;
}

.overgrown-buy .quantity {
	display: inline-flex;
	margin: 0 0.75rem 0 0;
	vertical-align: middle;
}

.overgrown-buy .quantity input.qty,
.overgrown-buy input[type="number"] {
	width: 4.5rem;
	background: var(--og-black);
	color: var(--og-white);
	border: 1px solid var(--og-smoke);
	border-radius: 0;
	padding: 0.85rem 0.5rem;
	font-family: var(--og-sans);
	font-size: 0.9375rem;
	text-align: center;
}

.overgrown-buy .woocommerce-variation-add-to-cart,
.overgrown-buy .cart:not(.variations_form) {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0.75rem;
}

.overgrown-buy .single_add_to_cart_button {
	flex: 1 1 12rem;
	min-height: 3.25rem;
	background: var(--og-white);
	color: var(--og-black);
	border: 1px solid var(--og-white);
	border-radius: 0;
	font-family: var(--og-sans);
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: background var(--og-t) linear, color var(--og-t) linear, border-color var(--og-t) linear;
}

.overgrown-buy .single_add_to_cart_button:hover {
	background: var(--og-black);
	color: var(--og-white);
}

.overgrown-buy .single_add_to_cart_button.disabled,
.overgrown-buy .single_add_to_cart_button:disabled {
	background: transparent;
	color: var(--og-ash);
	border-color: var(--og-smoke);
	cursor: not-allowed;
}

.overgrown-buy .reset_variations {
	display: inline-block;
	margin-top: 0.5rem;
	font-size: 0.8125rem;
	color: var(--og-ash);
}

.overgrown-buy .wp-block-post-excerpt {
	margin-top: var(--wp--preset--spacing--40);
	color: var(--og-paper);
	font-size: 0.9375rem;
}

.overgrown-buy .wp-block-post-excerpt__more-text {
	display: none;
}

/* Spec panel: small Instrument Serif, two columns, like the label. */
.overgrown-spec-panel {
	margin-top: var(--wp--preset--spacing--30);
}

.overgrown-specs {
	margin: 0;
	display: grid;
	grid-template-columns: minmax(6rem, 9rem) 1fr;
	gap: 0.55rem 1.25rem;
	font-family: var(--og-serif);
	font-size: 15px;
	line-height: 1.35;
}

.overgrown-specs dt {
	margin: 0;
	color: var(--og-ash);
	max-width: none;
}

.overgrown-specs dd {
	margin: 0;
	color: var(--og-white);
	max-width: none;
}

/* Nothing to say, no empty box. */
.overgrown-spec-panel:not(:has(.overgrown-specs)) {
	display: none;
}

/* --------------------------------------------------------------------------
   Notes

   Commentary on a print, under the spec panel and outside its frame. The panel
   states what the thing is; this is the owner talking. Serif heading to match
   the panel, Inter for the prose because it runs longer than a spec row.
   -------------------------------------------------------------------------- */

.overgrown-notes {
	margin: var(--wp--preset--spacing--40) 0 0;
}

.overgrown-notes__heading {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-family: var(--og-serif);
	font-size: 1.125rem;
	font-weight: 400;
	line-height: 1.2;
	color: var(--og-white);
}

.overgrown-notes__body {
	font-family: var(--og-sans);
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--og-ash);
}

.overgrown-notes__body p {
	margin: 0 0 0.75em;
	max-width: none;
}

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

.overgrown-notes__body a {
	color: var(--og-white);
}

/* Nothing written, no block — not the heading, not its spacing. */
.overgrown-notes-block:not(:has(.overgrown-notes)) {
	display: none;
}

/* --------------------------------------------------------------------------
   Shot Type filter, prints archive only

   A plain GET form. The select is styled the way the option buttons on a
   product page are styled — transparent ground, a hairline white edge, no
   radius — so the two controls in the shop read as the same family.
   -------------------------------------------------------------------------- */

.overgrown-filter {
	margin: 0 0 var(--wp--preset--spacing--40);
}

.overgrown-filter__form {
	display: flex;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.overgrown-filter__label {
	display: block;
	flex-basis: 100%;
	margin: 0 0 -0.25rem;
	font-family: var(--og-sans);
	font-size: 0.8125rem;
	color: var(--og-ash);
}

.overgrown-filter__select {
	appearance: none;
	-webkit-appearance: none;
	background-color: transparent;
	color: var(--og-white);
	border: 1px solid var(--og-white);
	border-radius: 0;
	padding: 0.6rem 2.4rem 0.6rem 0.95rem;
	font-family: var(--og-sans);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.2;
	min-width: min(20rem, 100%);
	cursor: pointer;

	/* The chevron, drawn rather than fetched. */
	background-image: linear-gradient( 45deg, transparent 50%, currentColor 50% ),
		linear-gradient( 135deg, currentColor 50%, transparent 50% );
	background-position: right 1.15rem center, right 0.85rem center;
	background-size: 0.3rem 0.3rem, 0.3rem 0.3rem;
	background-repeat: no-repeat;
}

.overgrown-filter__select option {
	/* Native dropdown lists are painted by the OS, not the page. */
	background-color: #000;
	color: #fff;
}

.overgrown-filter__select:focus-visible,
.overgrown-filter__submit:focus-visible {
	outline: 1px solid var(--og-white);
	outline-offset: 2px;
}

.overgrown-filter__submit {
	appearance: none;
	background: transparent;
	color: var(--og-white);
	border: 1px solid var(--og-white);
	border-radius: 0;
	padding: 0.6rem 0.95rem;
	font-family: var(--og-sans);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;
}

/* Not a print archive, no filter — and no empty box where it would have been. */
.overgrown-filter:not(:has(.overgrown-filter__form)) {
	display: none;
}

.overgrown-no-results {
	margin: 0;
	font-family: var(--og-sans);
	font-size: 0.9375rem;
	color: var(--og-ash);
}

@media (max-width: 781px) {
	.overgrown-product {
		gap: var(--wp--preset--spacing--40);
	}

	.overgrown-gallery .woocommerce-product-gallery__wrapper {
		gap: 8px;
	}
}

/* 10  Option pickers ------------------------------------------------------- */

/* Without JavaScript the plain selects stay visible and usable. */
.overgrown-buy .variations_form.has-og-buttons table.variations,
.overgrown-buy .variations_form.has-og-buttons .variations {
	display: none;
}

.og-attrs {
	margin: 0 0 var(--wp--preset--spacing--40);
}

.og-attr + .og-attr {
	margin-top: var(--wp--preset--spacing--30);
}

.og-attr__label {
	display: block;
	font-family: var(--og-sans);
	font-size: 0.8125rem;
	color: var(--og-ash);
	margin-bottom: 0.5rem;
}

.og-attr__options {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* The option rows are black and white and nothing else. Every state is white
   at some strength on the same black ground, so the row is dark at rest and
   only the answer — or whatever the pointer is on — comes up to full white. */
.og-opt {
	appearance: none;
	-webkit-appearance: none;
	background: var(--og-black);
	color: rgba(255, 255, 255, 0.72);
	border: 1px solid rgba(255, 255, 255, 0.38);
	border-radius: 0;
	padding: 0.6rem 0.95rem;
	font-family: var(--og-sans);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
}

/* The chosen option: full white text on a bright white edge. It keeps this for
   the whole order unless another option in the row is chosen. */
.og-opt[aria-checked="true"] {
	background: var(--og-black);
	color: var(--og-white);
	border-color: var(--og-white);
}

/* Once a row has an answer, the options not taken step further back so the
   answer is the only bright thing in it. Before any choice they stay equal:
   no aria-checked in the row means this rule does not apply at all. */
.og-attr__options:has([aria-checked="true"]) .og-opt:not([aria-checked="true"]) {
	color: rgba(255, 255, 255, 0.4);
	border-color: rgba(255, 255, 255, 0.16);
}

/* Not available alongside the current choices — faintest, and without an edge,
   so the row reads honestly. Still a button: choosing it clears whatever
   conflicts and builds the rest back around it, so it keeps the pointer. */
.og-attr__options .og-opt[aria-disabled="true"],
.og-attr__options:has([aria-checked="true"]) .og-opt[aria-disabled="true"] {
	color: rgba(255, 255, 255, 0.3);
	border-color: transparent;
}

/* Hover never floods the page white. The ground stays black and the text and
   edge snap to full white instead, from whatever strength they were resting
   at — so there is always a visible answer, and the panel stays dark. No
   transition on any of it: waiting to find out whether a button noticed you
   is worse than anything a fade was softening. */
.og-opt:hover,
.og-attr__options .og-opt[aria-disabled="true"]:hover,
.og-attr__options:has([aria-checked="true"]) .og-opt:not([aria-checked="true"]):hover,
.og-attr__options:has([aria-checked="true"]) .og-opt[aria-disabled="true"]:hover {
	background: var(--og-black);
	color: var(--og-white);
	border-color: var(--og-white);
}

.og-attr__note {
	margin: 0;
	font-family: var(--og-sans);
	font-size: 0.9375rem;
	color: var(--og-ash);
}

.og-attr__label + .og-attr__note {
	margin-top: -0.15rem;
}

/* The Paper row is rendered server side and sits outside the wrapper the
   option script builds, so it carries the spacing that wrapper would have
   given it: the same gap under Signed, the same gap above Add to cart. */
.og-attr--paper {
	margin-top: var(--wp--preset--spacing--30);
	margin-bottom: var(--wp--preset--spacing--40);
}

.og-attr__error {
	margin: 0.6rem 0 0;
	font-family: var(--og-sans);
	font-size: 0.875rem;
	color: var(--og-white);
}

/* 11  WooCommerce cart, checkout, mini cart -------------------------------- */

.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error,
.wc-block-components-notice-banner {
	background: var(--og-black);
	border: 1px solid var(--og-smoke);
	border-radius: 0;
	color: var(--og-paper);
	font-family: var(--og-sans);
	font-size: 0.9375rem;
}

.wc-block-components-notice-banner > svg {
	fill: var(--og-white);
}

.wc-block-components-panel,
.wc-block-components-totals-item,
.wc-block-cart-items,
.wc-block-components-order-summary,
.wc-block-checkout__form,
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout,
.wc-block-cart,
.wc-block-checkout,
.wc-block-components-sidebar-layout {
	background: transparent;
	color: var(--og-paper);
}

.wc-block-components-title,
.wc-block-components-product-name,
.wc-block-cart-items__header {
	color: var(--og-white);
	font-family: var(--og-serif);
}

.wc-block-cart-items__header,
.wc-block-cart-items td,
.wc-block-components-totals-item,
.wc-block-components-order-summary-item {
	border-color: var(--og-smoke) !important;
}

.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-combobox-control input,
.wc-block-components-select__container,
.wc-block-components-quantity-selector,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="password"],
textarea,
select {
	background: var(--og-black) !important;
	color: var(--og-white) !important;
	border: 1px solid var(--og-smoke) !important;
	border-radius: 0 !important;
	font-family: var(--og-sans);
}

.wc-block-components-text-input label,
.wc-block-components-checkbox__label,
.wc-block-components-radio-control__label,
.wc-block-components-form label {
	color: var(--og-ash);
	font-family: var(--og-sans);
}

.wc-block-components-button:not(.is-link),
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.woocommerce a.button,
.woocommerce button.button {
	background: var(--og-white);
	color: var(--og-black);
	border: 1px solid var(--og-white);
	border-radius: 0;
	font-family: var(--og-sans);
	font-weight: 500;
	box-shadow: none;
	transition: background-color var(--og-t) linear, color var(--og-t) linear;
}

.wc-block-components-button:not(.is-link):hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
	background: var(--og-black);
	color: var(--og-white);
}

.wc-block-components-product-price,
.wc-block-components-totals-item__value {
	color: var(--og-white);
}

/* The empty cart gets the mascot rather than WooCommerce's sad face. */
.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
	background-color: transparent;
	background-image: url("assets/brand/overgrownvariation.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	-webkit-mask-image: none;
	mask-image: none;
	height: 7em;
}

.wc-block-mini-cart__drawer,
.wc-block-components-drawer,
.wc-block-components-drawer__screen-overlay,
.wc-block-mini-cart__template-part {
	background: var(--og-black) !important;
	color: var(--og-paper);
}

.wc-block-components-drawer__screen-overlay {
	background: rgba(0, 0, 0, 0.85) !important;
}

.wc-block-mini-cart__drawer .wc-block-components-drawer__close {
	color: var(--og-white);
}

/* 12  404 and pages -------------------------------------------------------- */

.overgrown-404 {
	padding-top: var(--wp--preset--spacing--70);
	padding-bottom: var(--wp--preset--spacing--70);
	text-align: center;
}

.overgrown-404 .overgrown-smoke {
	width: 180px;
	height: 180px;
	margin: 0 auto var(--wp--preset--spacing--40);
}

.overgrown-404 p {
	margin-left: auto;
	margin-right: auto;
}

.overgrown-page-title {
	margin-bottom: var(--wp--preset--spacing--50);
}

.overgrown-contact {
	font-family: var(--og-serif);
}

.overgrown-contact p {
	margin: 0 0 0.6rem;
	max-width: 46ch;
}

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

.overgrown-contact .overgrown-contact-email {
	font-size: 1.375rem;
	color: var(--og-white);
}

@media (max-width: 599px) {
	:root {
		--og-grid-gap: 28px;
		--og-edge: 1.25rem;
	}
}