/*
Theme Name: Just Buttons
Description: Lean block theme for justbuttons.org v2. Tokens in theme.json; this file styles shop components.
Version: 0.2.0
Requires at least: 7.0
Requires PHP: 8.2
Text Domain: justbuttons
*/

:root {
	--jb-radius: 8px;
	--jb-radius-lg: 12px;
	--jb-line: 1px solid var(--wp--preset--color--line);
	--jb-focus: 3px solid var(--wp--preset--color--sun);
}

:where(a, button, input, select, summary, textarea):focus-visible {
	outline: var(--jb-focus);
	outline-offset: 2px;
}

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

.jb-announce p { margin: 0; }
.jb-header .wp-block-site-logo img { height: auto; max-width: 150px; }
.jb-header .wp-block-navigation a { text-decoration: none; }
.jb-header .wp-block-navigation a:hover { color: var(--wp--preset--color--brand); }
.jb-header .wc-block-mini-cart__button { padding: 0.5rem; }

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

.jb-eyebrow {
	margin: 0;
	color: var(--wp--preset--color--brand);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.jb-hero h1 { margin-top: var(--wp--preset--spacing--20); max-width: 14ch; }
.jb-hero__promise { color: var(--wp--preset--color--muted); }
.jb-hero__image img { border-radius: var(--jb-radius-lg); width: 100%; height: auto; }
.wp-block-button.is-style-outline .wp-block-button__link {
	border: 2px solid var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ink);
	background: transparent;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); }

.jb-tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
	margin: var(--wp--preset--spacing--40) 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 782px) { .jb-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.jb-tile a {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: var(--wp--preset--spacing--20);
	border: var(--jb-line);
	border-radius: var(--jb-radius-lg);
	color: inherit;
	text-decoration: none;
	transition: border-color 0.15s;
}
.jb-tile a:hover { border-color: var(--wp--preset--color--ink); }
.jb-tile img, .jb-tile__placeholder {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: contain;
	border-radius: var(--jb-radius);
	background: var(--wp--preset--color--mist);
}
.jb-tile__name {
	margin-top: var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	line-height: 1.3;
}
.jb-tile__meta { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); }

.jb-steps__list {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0;
	list-style: none;
	counter-reset: step;
}
@media (min-width: 782px) { .jb-steps__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.jb-steps__list li { counter-increment: step; }
.jb-steps__list li::before {
	content: counter(step);
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	margin-bottom: var(--wp--preset--spacing--20);
	border-radius: 50%;
	background: var(--wp--preset--color--brand-bright);
	color: var(--wp--preset--color--paper);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
}
.jb-steps__list strong { display: block; font-family: var(--wp--preset--font-family--display); }

.jb-faq { border-bottom: var(--jb-line); padding: var(--wp--preset--spacing--30) 0; }
.jb-faq summary { cursor: pointer; font-family: var(--wp--preset--font-family--display); font-weight: 700; }
.jb-faq p { margin-bottom: 0; color: var(--wp--preset--color--ink-soft); }

/* ---------- Category / product grids ---------- */

/* Constrained layout centers children with !important margins; intro text reads better flush left. */
.jb-term-intro { max-width: 70ch; margin-left: 0 !important; }
.jb-grid .wc-block-components-product-image img,
.jb-grid .wc-block-components-product-image { border-radius: var(--jb-radius-lg); background: var(--wp--preset--color--mist); }
.jb-grid .wp-block-post-title { margin: var(--wp--preset--spacing--20) 0 0; font-family: var(--wp--preset--font-family--display); font-weight: 700; line-height: 1.3; }
.jb-grid .wp-block-post-title a { text-decoration: none; }
.jb-grid .wc-block-components-product-price { color: var(--wp--preset--color--muted); }

/* ---------- Product page ---------- */

.jb-product__buy .wp-block-post-title { margin-top: 0; }
.jb-product__buy .wc-block-components-product-price { font-weight: 700; }
.jb-product__buy form.cart { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--20); align-items: center; }
.jb-product__buy form.cart > :not(.quantity, .single_add_to_cart_button) { flex-basis: 100%; }
.jb-product__buy table.variations { width: 100%; border: 0; }
.jb-product__buy table.variations th, .jb-product__buy table.variations td { display: block; padding: 0; border: 0; text-align: left; }
.jb-product__buy select, .jb-product__buy input.qty, .jb-product__buy input[type="text"] {
	box-sizing: border-box;
	height: auto;
	min-height: 2.75rem;
	padding: 0.5rem 0.75rem;
	line-height: 1.4;
	border: 1px solid var(--wp--preset--color--muted);
	border-radius: var(--jb-radius);
	font: inherit;
}
.jb-product__buy select { width: 100%; }
/* WooCommerce's add-to-cart-form block sets a 32px line-height and large padding that clip the select text. */
.jb-product__buy .wp-block-woocommerce-add-to-cart-form table.variations select {
	padding: 0.5rem 2rem 0.5rem 0.75rem;
	line-height: 1.4;
	font-size: 1rem;
}
.jb-product__buy table.variations td.value { display: flex; gap: var(--wp--preset--spacing--20); align-items: center; }
.jb-product__buy table.variations { margin-bottom: var(--wp--preset--spacing--20); }
.jb-product__buy input.qty { width: 7rem; }
.jb-product__buy .single_add_to_cart_button { min-height: 2.75rem; }
/* WooCommerce fades the button to 50% until a variation is picked (2.25:1); keep the label readable. */
.jb-product__buy .single_add_to_cart_button.disabled {
	opacity: 1 !important; /* WooCommerce sets 0.5 with !important */
	background: var(--wp--preset--color--line);
	color: var(--wp--preset--color--ink-soft);
	cursor: not-allowed;
}

.jb-artwork {
	margin: var(--wp--preset--spacing--20) 0;
	padding: var(--wp--preset--spacing--30);
	border: 2px dashed var(--wp--preset--color--line);
	border-radius: var(--jb-radius-lg);
	background: var(--wp--preset--color--mist);
}
.jb-artwork legend { padding: 0 0.25rem; font-family: var(--wp--preset--font-family--display); font-weight: 700; }
.jb-artwork label { display: block; margin-bottom: var(--wp--preset--spacing--10); }
.jb-artwork input[type="file"] { max-width: 100%; }
.jb-artwork__files { margin: var(--wp--preset--spacing--20) 0 0; padding: 0; list-style: none; }
.jb-artwork__files li { display: flex; justify-content: space-between; gap: var(--wp--preset--spacing--20); padding: 0.375rem 0; border-bottom: var(--jb-line); }
.jb-artwork__files button { border: 0; background: none; color: var(--wp--preset--color--brand); text-decoration: underline; cursor: pointer; font: inherit; }
.jb-artwork__status:empty { display: none; }
.jb-artwork__status.is-error { color: var(--wp--preset--color--brand); font-weight: 600; }

.jb-pricing__live { margin: 0; font-weight: 700; }
.jb-pricing__live:empty, .jb-shipby:empty { display: none; }
.jb-shipby { margin: var(--wp--preset--spacing--20) 0; color: var(--wp--preset--color--ink-soft); }
.jb-pricing__table { width: 100%; margin-top: var(--wp--preset--spacing--30); border-collapse: collapse; font-size: var(--wp--preset--font-size--small); }
.jb-pricing__table caption { margin-bottom: var(--wp--preset--spacing--10); text-align: left; font-family: var(--wp--preset--font-family--display); font-weight: 700; }
.jb-pricing__table th, .jb-pricing__table td { padding: 0.375rem 0.5rem; border-bottom: var(--jb-line); text-align: left; }
.jb-pricing__table thead th { color: var(--wp--preset--color--muted); font-weight: 600; }
.jb-pricing__table td { font-variant-numeric: tabular-nums; }

.jb-details { margin-top: var(--wp--preset--spacing--60); }

.woocommerce-product-gallery__image img { border-radius: var(--jb-radius-lg); }
.woocommerce-product-gallery .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--10);
	margin: var(--wp--preset--spacing--10) 0 0;
	padding: 0;
	list-style: none;
}
.woocommerce-product-gallery .flex-control-thumbs li { width: auto !important; margin: 0 !important; } /* override WooCommerce's float widths */
.woocommerce-product-gallery .flex-control-thumbs img {
	aspect-ratio: 1;
	width: 100%;
	object-fit: cover;
	border-radius: var(--jb-radius);
	opacity: 0.6;
	cursor: pointer;
}
.woocommerce-product-gallery .flex-control-thumbs img.flex-active,
.woocommerce-product-gallery .flex-control-thumbs img:hover { opacity: 1; }
.woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--20); align-items: center; }
.woocommerce-variation-add-to-cart > .jb-artwork { flex-basis: 100%; }
.reset_variations { margin-left: var(--wp--preset--spacing--20); font-size: var(--wp--preset--font-size--small); }

/* ---------- Cart / checkout turnaround picker ---------- */

.jb-turnaround fieldset {
	margin: 0 0 var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--30);
	border: var(--jb-line);
	border-radius: var(--jb-radius-lg);
}
.jb-turnaround legend { padding: 0 0.25rem; font-family: var(--wp--preset--font-family--display); font-weight: 700; }
.jb-turnaround label { display: flex; gap: 0.5rem; align-items: baseline; padding: 0.375rem 0; cursor: pointer; }
.jb-turnaround fieldset:disabled { opacity: 0.6; }

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

.jb-footer__links { margin: 0; padding: 0; list-style: none; }
.jb-footer__links li { padding: 0.25rem 0; }
.jb-footer a { text-decoration: none; }
.jb-footer a:hover { text-decoration: underline; color: var(--wp--preset--color--paper); }
.jb-footer__legal { color: var(--wp--preset--color--line); opacity: 0.8; }

/* ---------- Forms, tracking, templates ---------- */

.jb-form { max-width: 36rem; }
.jb-form__row { margin: 0 0 var(--wp--preset--spacing--30); }
.jb-form label { display: block; margin-bottom: 0.25rem; font-weight: 600; }
.jb-form input:not([type="checkbox"], [type="hidden"]), .jb-form textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: 2.75rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--wp--preset--color--muted);
	border-radius: var(--jb-radius);
	font: inherit;
}
.jb-form .cf-turnstile { margin: var(--wp--preset--spacing--20) 0; }
.jb-notice {
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border-left: 4px solid var(--wp--preset--color--ink);
	border-radius: var(--jb-radius);
	background: var(--wp--preset--color--mist);
}
.jb-notice.is-error { border-left-color: var(--wp--preset--color--brand); background: var(--wp--preset--color--brand-tint); }
.jb-track-result dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem var(--wp--preset--spacing--30); }
.jb-track-result dt { font-weight: 600; }
.jb-track-result dd { margin: 0; }
.jb-templates { columns: 2 16rem; padding-left: 1.25rem; }
.jb-templates li { padding: 0.25rem 0; break-inside: avoid; }
.jb-template-link { margin-top: var(--wp--preset--spacing--20); }