/*
Theme Name: Townsend Turnings Workshop
Description: Native block theme for townsendturnings.com. No page builder.
Author: Josh Townsend
Version: 1.0.0
Requires at least: 6.8
Requires PHP: 8.1
Text Domain: tt-workshop
*/

/* Small labels: item numbers, captions, eyebrows. */
.tt-label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--muted);
}
.tt-eyebrow { color: var(--wp--preset--color--walnut); }

/* Header */
.tt-header.tt-header {
	box-sizing: border-box;
	width: 100%;
	max-width: calc(1256px + 2 * var(--wp--preset--spacing--40));
	margin-inline: auto;
	padding: 1rem var(--wp--preset--spacing--40);
}
@media (max-width: 600px) {
	.tt-header.tt-header { padding-inline: var(--wp--preset--spacing--30); }
}
.tt-header .wp-block-image img { mix-blend-mode: multiply; }
.tt-header .wp-block-navigation { font-size: 0.9375rem; font-weight: 500; }
.tt-header .wp-block-navigation a { padding-block: 0.75rem; text-decoration: none; display: inline-block; }

/* Photo tiles: multiply settles white and grey photo backgrounds onto one tone. */
.tt-tile,
.wc-block-components-product-image,
.woocommerce-product-gallery__wrapper {
	background: var(--wp--preset--color--bone);
}
.tt-tile img,
.wc-block-components-product-image img,
.woocommerce-product-gallery__image img {
	mix-blend-mode: multiply;
}
.tt-tile img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.wc-block-components-product-image img { aspect-ratio: 3 / 2; object-fit: cover; }

/* A piece waiting on a photo should look deliberate rather than broken. */
img.woocommerce-placeholder {
	opacity: 0.35;
	object-fit: contain;
	padding: 18%;
	box-sizing: border-box;
}

/* Dark custom-order band */
.tt-dark { --tt-rule: #4A4237; }
.tt-dark a:not(.wp-element-button) { color: var(--wp--preset--color--paper); }
.tt-dark .tt-label { color: #CFC5B2; }
.tt-steps { list-style: none; margin: var(--wp--preset--spacing--40) 0 0; padding: 0; }
.tt-steps li { display: flex; gap: 1.125rem; padding-block: 1rem 0; margin-top: 1rem; border-top: 1px solid var(--tt-rule); }
.tt-steps li > span:first-child { font-family: var(--wp--preset--font-family--mono); font-size: 0.875rem; color: var(--wp--preset--color--amber); }
.tt-dark .wp-block-button__link { background: var(--wp--preset--color--paper); color: var(--wp--preset--color--ink); }
.tt-dark .wp-block-button__link:hover { background: var(--wp--preset--color--bone); color: var(--wp--preset--color--ink); }

/* Outline button */
.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--ink);
}
.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

/* Category links as a plain row */
.tt-cats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.375rem; font-size: 0.9375rem; }
.tt-cats a { display: inline-block; padding-block: 0.625rem; }

/* Product cards */
.wc-block-product-template.wc-block-product-template {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
	gap: 2.75rem 1.75rem;
}
.wc-block-product-template > li { width: auto; max-width: none; margin: 0; }
.wc-block-product-template .wp-block-post-title { margin-top: 0.875rem; }
.wc-block-product-template .wp-block-post-title a { text-decoration: none; }
.wc-block-product-template .wc-block-components-product-price { color: var(--wp--preset--color--muted); font-size: 0.9375rem; }
.wc-block-product-template .wc-block-components-product-sale-badge { display: none; }

/* Single product */
.woocommerce div.product div.images.woocommerce-product-gallery {
	float: none;
	width: 100%;
	margin: 0;
}
.tt-product-info .wp-block-post-title { font-size: clamp(2rem, 3.4vw, 3rem); margin-top: 0.875rem; }
.woocommerce .tt-product-info form.cart .single_add_to_cart_button.button {
	flex: 1 1 100%;
	margin: 0;
}
.tt-product-info form.cart > * { margin-inline: 0; }
.tt-product-info .wc-block-components-product-price { font-size: 1.625rem; font-weight: 500; color: var(--wp--preset--color--ink); }
.tt-product-info .wp-block-post-content { padding-top: 1.5rem; border-top: 1px solid var(--wp--preset--color--line); }
.tt-product-info form.cart { margin-block: 1.5rem 0; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.tt-product-info form.cart .quantity { display: none; }
.tt-product-info .stock { font-family: var(--wp--preset--font-family--mono); font-size: 0.8125rem; color: var(--wp--preset--color--walnut); }

/* WooCommerce buttons and form fields inherit the theme's look */
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.wpcf7-submit {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	border: 0;
	border-radius: 2px;
	font: 600 1rem/1.4 var(--wp--preset--font-family--body);
	padding: 0.9rem 1.6rem;
	cursor: pointer;
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.wpcf7-submit:hover {
	background: var(--wp--preset--color--walnut);
	color: var(--wp--preset--color--paper);
}
.woocommerce form .input-text,
.woocommerce form select,
.wpcf7-form input:not([type="submit"]),
.wpcf7-form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 0.75rem 0.875rem;
	font: inherit;
	color: var(--wp--preset--color--ink);
	background: #FBF8F1;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 2px;
}
.wpcf7-form label { display: block; font-size: 0.9375rem; font-weight: 500; }
.wpcf7-form p { margin-block: 0 1.125rem; }
/* Put the Cloudflare check just above the Send button. */
.wpcf7-form { display: flex; flex-direction: column; }
.wpcf7-form > * { order: 0; }
.wpcf7-form > .wpcf7-turnstile { order: 1; margin-block: 0 1.125rem; }
.wpcf7-form > p:has(.wpcf7-submit) { order: 2; }
.wpcf7-form > .wpcf7-response-output { order: 3; }
.woocommerce-info, .woocommerce-message, .woocommerce-error {
	background: var(--wp--preset--color--bone);
	color: var(--wp--preset--color--ink);
	border-top-color: var(--wp--preset--color--walnut);
}
.woocommerce-info::before, .woocommerce-message::before { color: var(--wp--preset--color--walnut); }

/* Footer */
.tt-footer { border-top: 1px solid var(--wp--preset--color--line); }
.tt-footer a { color: var(--wp--preset--color--muted); }

/* Cart and checkout: use the full page width and the theme's colors. */
.woocommerce-page main .woocommerce { max-width: none; }
.tt-header .wp-block-navigation__container { row-gap: 0; }
.woocommerce-cart-form .product-name img,
.woocommerce-checkout-review-order-table .product-name img {
	display: block;
	float: none;
	width: 72px;
	height: auto;
	max-height: 72px;
	object-fit: cover;
	margin: 0 0 0.5rem;
}
.woocommerce-page .woocommerce-info,
.woocommerce-page .woocommerce-message,
.woocommerce-page .woocommerce-error {
	background: var(--wp--preset--color--bone);
	color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--line);
}
.woocommerce-checkout #payment {
	background: var(--wp--preset--color--bone);
	border-radius: 2px;
}
.woocommerce-checkout #payment div.payment_box {
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
}
.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: var(--wp--preset--color--paper);
}

/* Let the product photo fill its column, and quiet the no-photo placeholder. */
.wp-block-woocommerce-product-image-gallery.wp-block-woocommerce-product-image-gallery,
.wp-block-woocommerce-product-image-gallery .woocommerce-product-gallery { max-width: none; width: 100%; }
.woocommerce-product-gallery__image--placeholder { background: var(--wp--preset--color--bone); }
.woocommerce-product-gallery__image--placeholder img {
	mix-blend-mode: multiply;
	opacity: 0.35;
	aspect-ratio: 3 / 2;
	object-fit: contain;
	padding: 12%;
	box-sizing: border-box;
}