/* ==========================================================================
   WEIRDO & CO — WOOCOMMERCE
   Loaded only on WooCommerce pages.

   Cart and checkout inherit the neutral token set from the body attribute,
   so almost nothing in here needs a special case for them — the tokens
   already flattened the palette, the radius and every duration to zero.
   ========================================================================== */

/* --- The product grid ---------------------------------------------------- */

/* Woo's own list styling fights the grid. Replace it, do not patch it. */
.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--grid-min), 1fr));
	gap: var(--space-m);
	margin: 0;
	padding: 0;
	list-style: none;
}

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

.woocommerce ul.products li.product {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
}

.woocommerce ul.products li.product > a:not(.weirdo-card) { display: none; }


/* --------------------------------------------------------------------------
   SINGLE PRODUCT
   The layout comes from woocommerce/content-single-product.php, not from
   fighting WooCommerce's default markup with overrides.
   -------------------------------------------------------------------------- */

.weirdo-product__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-l);
	align-items: start;
}

@media (min-width: 56em) {
	.weirdo-product__grid {
		/* Media takes the larger share. On a 320 mm object the photograph is
		   doing most of the selling. */
		grid-template-columns: minmax(0, 1.15fr) minmax(21rem, 0.85fr);
		gap: var(--space-xl);
	}
}

/* --- gallery ------------------------------------------------------------- */

.weirdo-product__stage {
	margin: 0;
	border: var(--border) solid var(--rule);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--paper-sunk);

	/* The stage used to follow --card-ratio, which is 4 / 3 on The Specimens
	   and 1 / 1 elsewhere, and crop to fill it. That is right for a grid, where
	   every card has to be the same shape, and wrong here: it took the top off
	   the horns and the bottom off the muzzle on a portrait photograph.
	   A product page must never crop the product. Fixed ratio, contained
	   image, and the sunk background fills whatever is left over. */
	aspect-ratio: 4 / 5;
}

@media (min-width: 60em) {
	/* Wider than tall on a desktop, because the row beside it is text and a
	   very tall stage pushes the price below the fold. */
	.weirdo-product__stage { aspect-ratio: 1 / 1; }
}

.weirdo-product__stage-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	cursor: var(--cursor-media);
}

.weirdo-product__stage--empty {
	display: grid;
	place-items: center;
	color: var(--ink-faint);
}
.weirdo-product__stage--empty svg { width: 45%; opacity: .3; }

.weirdo-product__thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
	gap: var(--space-2xs);
	margin-top: var(--space-2xs);
}

.weirdo-product__thumb {
	padding: 0;
	border: var(--border) solid var(--rule);
	border-radius: var(--radius-sm);
	background: var(--paper-sunk);
	overflow: hidden;
	cursor: pointer;
	aspect-ratio: 1;
	transition: border-color var(--dur-fast) var(--motion), opacity var(--dur-fast) var(--motion);
	opacity: .6;
}

.weirdo-product__thumb img { width: 100%; height: 100%; object-fit: contain; }
.weirdo-product__thumb:hover { opacity: 1; }
.weirdo-product__thumb.is-current { opacity: 1; border-color: var(--accent); }

/* --- info column --------------------------------------------------------- */

@media (min-width: 56em) {
	/* Sticks with you while the gallery scrolls, so the price and the button
	   are never off screen. */
	.weirdo-product__sticky {
		position: sticky;
		top: calc(64px + var(--space-m));
	}
}

.weirdo-product__title {
	font-size: var(--text-l);
	letter-spacing: -0.025em;
	margin: 0 0 var(--space-2xs);
	max-width: 18ch;
}

.weirdo-product__price {
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
	font-size: var(--text-m);
	font-weight: 600;
	color: var(--ink);
	margin: 0 0 var(--space-s);
}
.weirdo-product__price del { color: var(--ink-faint); font-weight: 400; margin-right: .4em; }

.weirdo-product__lede {
	color: var(--ink-soft);
	margin-bottom: var(--space-m);
}
.weirdo-product__lede p:last-child { margin-bottom: 0; }

/* --- the four facts beside the button ------------------------------------ */

.weirdo-product__facts {
	margin: var(--space-l) 0 0;
	padding-top: var(--space-m);
	border-top: var(--border) solid var(--rule);
	display: grid;
	gap: var(--space-s);
}

.weirdo-product__fact dt {
	font-family: var(--font-mono);
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: .2rem;
}

.weirdo-product__fact dd {
	margin: 0;
	font-size: var(--text-s);
	color: var(--ink-soft);
	max-width: 40ch;
}

/* --- the story ----------------------------------------------------------- */

/* Two columns at the same width as the gallery and info above, so the page
   holds one shape all the way down instead of pinching to a narrow strip.
   Left is narrative and read in order; right is reference and scanned. */
.weirdo-product__story {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-l);
}

@media (min-width: 56em) {
	/* Equal columns here, unlike the gallery row above. Two columns of text
	   balance by character count, and an asymmetric grid would make the
	   narrower one run much longer for the same amount of writing. */
	.weirdo-product__story {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-xl);
		align-items: start;
	}
}

.weirdo-product__story-col > :first-child { margin-top: 0; }

.weirdo-product__story h2 {
	font-size: var(--text-m);
	margin-top: var(--space-l);
	margin-bottom: var(--space-2xs);
}
.weirdo-product__story-col > h2:first-child { margin-top: 0; }

.weirdo-product__story p,
.weirdo-product__story li { color: var(--ink-soft); }
.weirdo-product__story strong { color: var(--ink); }
.weirdo-product__story ul { padding-left: 1.1rem; margin: 0 0 var(--space-s); }
.weirdo-product__story li { margin-bottom: .5rem; }

/* --- specs table --------------------------------------------------------- */

/* Two columns on a wide screen. Four rows stacked down a full-width page is
   a lot of vertical travel for very little information. */
@media (min-width: 56em) {
	.weirdo-specs {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: var(--space-xl);
	}
	.weirdo-specs tbody { display: contents; }
	.weirdo-specs tr {
		display: grid;
		grid-template-columns: 8rem 1fr;
		align-items: baseline;
	}
}

.weirdo-specs { width: 100%; border-collapse: collapse; }

.weirdo-specs th,
.weirdo-specs td {
	text-align: left;
	padding: var(--space-s) 0;
	border-bottom: var(--border) solid var(--rule);
	font-size: var(--text-s);
}

.weirdo-specs th {
	width: 10rem;
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-faint);
}

.weirdo-specs td { color: var(--ink); font-variant-numeric: tabular-nums; }
.weirdo-specs tr:last-child th,
.weirdo-specs tr:last-child td { border-bottom: 0; }

/* A product sub-section is not a range page. The band title token tops out
   at 5.5rem, which is right for "The Weirdos" and absurd for "The numbers". */
.weirdo-product-specs .weirdo-band__title {
	font-size: var(--text-l);
	max-width: none;
}

/* --- add to cart --------------------------------------------------------- */

.woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
	align-items: stretch;
	margin: 0;
}

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

.woocommerce .quantity input.qty {
	width: 4.5rem;
	text-align: center;
}

/* --- related ------------------------------------------------------------- */

.woocommerce .related > h2,
.woocommerce section.related > h2 {
	font-size: var(--text-l);
	letter-spacing: -0.02em;
	margin-bottom: var(--space-m);
}

/* WooCommerce's own product wrapper must not re-impose its grid on top of
   the template's. */
.woocommerce div.product { display: block; }

/* --- Format choice: unpainted / painted / kit / assembled ---------------- */

.woocommerce div.product form.cart .variations {
	width: 100%;
	margin-bottom: var(--space-s);
}

.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th {
	display: block;
	width: 100%;
	padding: 0 0 var(--space-2xs);
	text-align: left;
}

.woocommerce div.product form.cart .variations label {
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--ink-soft);
}

/* --- Form controls ------------------------------------------------------
   Two separate problems, and they need two separate fixes.

   1. It did not look like a control. A hairline --rule border is correct
      for dividing content and wrong for anything you click. A field has to
      look pressable before it looks tidy, so it now sits on a slightly
      lifted ground with a border you can actually see.

   2. The open list was unreadable. That popup is drawn by the operating
      system, not by this stylesheet, so our dark background never reached
      it — white panel, pale inherited text. `color-scheme: dark` is the
      real fix: it tells the browser to draw the whole control, popup and
      native arrow included, from a dark palette. The explicit option rule
      underneath covers anything that ignores it.

   Both use color-mix off the existing tokens rather than new ones, so all
   six skins pick this up without a per-world rule.
   ---------------------------------------------------------------------- */

.woocommerce select,
.woocommerce .quantity input.qty {
	color-scheme: dark;
	min-height: var(--tap-min);
	padding: 0 var(--space-xs);
	background-color: color-mix(in srgb, var(--paper) 86%, var(--ink));
	color: var(--ink);
	border: var(--border) solid color-mix(in srgb, var(--ink-soft) 55%, var(--paper));
	border-radius: var(--radius-sm);
	font-family: inherit;
	font-size: var(--text-base);
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

/* Room for the arrow, and a cursor that admits the thing is clickable. */
.woocommerce select {
	padding-right: var(--space-l);
	cursor: pointer;
}

.woocommerce select:hover,
.woocommerce .quantity input.qty:hover {
	border-color: color-mix(in srgb, var(--ink-soft) 85%, var(--paper));
	background-color: color-mix(in srgb, var(--paper) 78%, var(--ink));
}

.woocommerce select:focus-visible {
	border-color: var(--accent);
	outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent);
	outline-offset: 2px;
}

/* Fallback for browsers that do not honour color-scheme on the popup.
   Firefox in particular draws the list from these. */
.woocommerce select option {
	background-color: var(--paper-sunk);
	color: var(--ink);
}

.woocommerce select option:disabled {
	color: color-mix(in srgb, var(--ink-soft) 60%, var(--paper));
}

/* "Clear" was floating next to the field looking like part of it. Pull it
   under, quieten it, and let it only assert itself on hover. */
.woocommerce div.product form.cart .reset_variations {
	display: inline-block;
	margin-top: var(--space-2xs);
	font-size: var(--text-xs);
	color: var(--ink-soft);
}

.woocommerce div.product form.cart .reset_variations:hover {
	color: var(--ink);
}


/* --- Buttons: one shape everywhere -------------------------------------- */

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--tap-min);
	padding: 0 var(--space-m);
	background: var(--accent);
	color: var(--accent-ink);
	border: var(--border) solid transparent;
	border-radius: var(--radius);
	font-family: var(--font-display);
	font-size: var(--text-s);
	font-weight: 600;
	letter-spacing: var(--display-spacing);
	text-transform: var(--display-case);
	line-height: 1;
	transition: transform var(--dur-fast) var(--motion), box-shadow var(--dur-fast) var(--motion);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce button.button.alt:hover {
	background: var(--accent);
	color: var(--accent-ink);
	transform: translateY(var(--lift)) scale(var(--lift-scale));
	box-shadow: var(--shadow-lift);
}

.woocommerce button.button:disabled,
.woocommerce button.button.alt:disabled { opacity: 0.5; }


/* --- Notices ------------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	background: var(--paper-sunk);
	border: var(--border) solid var(--rule);
	border-left: 3px solid var(--accent);
	border-radius: var(--radius-sm);
	color: var(--ink);
	padding: var(--space-s) var(--space-m);
	margin-bottom: var(--space-m);
	list-style: none;
}

.woocommerce-error { border-left-color: var(--warn); }
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { content: none; }


/* --------------------------------------------------------------------------
   CART AND CHECKOUT
   Neutral tokens are already doing the work. What is left is making the
   layout calm and the tap targets big. Nothing here animates.
   -------------------------------------------------------------------------- */

.woocommerce-cart table.shop_table,
.woocommerce-checkout table.shop_table {
	border: var(--border) solid var(--rule);
	border-radius: var(--radius-sm);
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: var(--space-s);
	border-bottom: var(--border) solid var(--rule);
	text-align: left;
}

.woocommerce table.shop_table tr:last-child td { border-bottom: 0; }

.woocommerce-checkout .form-row { margin-bottom: var(--space-s); }

.woocommerce form .form-row label {
	display: block;
	margin-bottom: var(--space-3xs);
	font-size: var(--text-s);
	color: var(--ink-soft);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	width: 100%;
	min-height: var(--tap-min);
	padding: var(--space-2xs) var(--space-s);
	background: var(--paper);
	border: var(--border) solid var(--rule);
	border-radius: var(--radius-sm);
	color: var(--ink);
	font-family: inherit;
	/* 16px minimum. Anything smaller and iOS zooms the viewport on focus,
	   which on a checkout form reads as the page breaking. */
	font-size: 16px;
}

.woocommerce form .form-row.woocommerce-invalid input.input-text {
	border-color: var(--warn);
}

.woocommerce-checkout #payment {
	background: var(--paper-sunk);
	border: var(--border) solid var(--rule);
	border-radius: var(--radius-sm);
}

.woocommerce-checkout #payment div.payment_box {
	background: var(--paper);
	border: var(--border) solid var(--rule);
	border-radius: var(--radius-sm);
}
.woocommerce-checkout #payment div.payment_box::before { content: none; }

/* On a phone the place-order button should be the last thing and the
   biggest thing. */
@media (max-width: 47.99em) {
	.woocommerce-checkout #place_order { width: 100%; min-height: 52px; }
}


/* --- Breadcrumb ---------------------------------------------------------- */

.woocommerce .woocommerce-breadcrumb {
	font-size: var(--text-xs);
	color: var(--ink-faint);
	margin-bottom: var(--space-m);
}
.woocommerce .woocommerce-breadcrumb a { color: var(--ink-soft); text-decoration: none; }


/* --- Things we do not want ---------------------------------------------- */

.woocommerce .star-rating,
.woocommerce .woocommerce-product-rating,
.woocommerce ul.products li.product .onsale { display: none; }


/* --- pre-order notice ----------------------------------------------------- */

/* Above the title, not below the price. Somebody who reads nothing else on the
   page still reads this, and that is the point of it being here. */
.weirdo-preorder {
	display: block;
	margin: 0 0 var(--space-s);
	padding: var(--space-xs) var(--space-s);
	border-left: 3px solid var(--accent);
	background: color-mix(in srgb, var(--accent) 8%, transparent);
	border-radius: var(--radius-sm);
	color: var(--ink-soft);
	font-size: var(--text-s);
	line-height: 1.55;
	max-width: 46ch;
}

.weirdo-preorder strong {
	color: var(--ink);
	font-weight: 600;
}