/**
 * Oldspeak — WooCommerce overrides on top of Storefront.
 *
 * Storefront is a good base but ships an opinionated look. We reset the
 * parts that fight the token system and rebuild the loop around book
 * proportions rather than square product tiles.
 */

/* ---------------------------------------------------------------
 * Shop hero — a slim band rather than Storefront's plain h1
 * --------------------------------------------------------------- */
.os-shop-head {
	background: var(--os-shelf);
	color: var(--os-paper-white);
	padding-block: var(--os-space-xl);
	margin-block-end: var(--os-space-xl);
}

.os-shop-head__title {
	margin: 0;
	font-size: var(--os-step-4);
}

.os-shop-head__count {
	font-family: var(--os-font-ui);
	font-size: var(--os-step--1);
	letter-spacing: var(--os-tracking-label);
	text-transform: uppercase;
	color: var(--os-brass);
}

.os-shop-head__desc {
	max-inline-size: var(--os-container-narrow);
	margin-block-start: var(--os-space-s);
	color: var(--os-muted-light);
}

/* Breadcrumb — real, with schema, unlike the source's bare slashes */
.woocommerce-breadcrumb {
	margin-block-end: var(--os-space-s);
	font-family: var(--os-font-ui);
	font-size: var(--os-step--1);
	color: var(--os-muted-light);
}

.woocommerce-breadcrumb a {
	color: inherit;
	text-decoration: none;
}

.woocommerce-breadcrumb a:hover {
	color: var(--os-brass-bright);
	text-decoration: underline;
}

/* ---------------------------------------------------------------
 * Product loop — override Storefront's float grid entirely
 * --------------------------------------------------------------- */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
	gap: var(--os-space-l) var(--os-space-m);
	margin: 0 0 var(--os-space-xl);
	padding: 0;
	list-style: none;
}

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

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	inline-size: auto !important;
	float: none !important;
	margin: 0 !important;
	clear: none !important;
	display: flex;
	flex-direction: column;
	gap: var(--os-space-2xs);
	text-align: start;
}

/* Cover */
.woocommerce ul.products li.product a img {
	aspect-ratio: var(--os-cover-ratio);
	object-fit: cover;
	margin: 0 0 var(--os-space-2xs);
	border-radius: var(--os-radius-sm);
	box-shadow: var(--os-shadow-card);
	transition: transform var(--os-dur) var(--os-ease),
		box-shadow var(--os-dur) var(--os-ease);
}

.woocommerce ul.products li.product:hover a img {
	transform: translateY(-3px);
	box-shadow: var(--os-shadow-lift);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	padding: 0;
	margin: 0;
	font-family: var(--os-font-display);
	font-size: var(--os-step-0);
	line-height: 1.25;
	color: var(--os-fg);
}

/* Author line, injected by the theme's loop template */
.os-loop-author {
	font-family: var(--os-font-ui);
	font-size: var(--os-step--1);
	color: var(--os-muted);
	margin: 0;
}

.os-loop-author a {
	color: inherit;
	text-decoration: none;
}

.os-loop-author a:hover {
	color: var(--os-oxide);
	text-decoration: underline;
}

.woocommerce ul.products li.product .price {
	margin: auto 0 0;
	padding-block-start: var(--os-space-3xs);
	font-family: var(--os-font-ui);
	font-size: var(--os-step-0);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--os-fg);
}

.woocommerce ul.products li.product .price del {
	color: var(--os-muted);
	font-weight: 400;
	opacity: 1;
}

.woocommerce ul.products li.product .price ins {
	text-decoration: none;
	color: var(--os-oxide);
}

/* Storefront shows the add-to-cart button always; hold it back until
 * hover on pointer devices so the grid stays quiet, but keep it always
 * visible on touch where hover does not exist. */
@media (hover: hover) and (min-width: 48rem) {
	.woocommerce ul.products li.product .button {
		opacity: 0;
		transform: translateY(4px);
		transition: opacity var(--os-dur) var(--os-ease),
			transform var(--os-dur) var(--os-ease);
	}

	.woocommerce ul.products li.product:hover .button,
	.woocommerce ul.products li.product:focus-within .button {
		opacity: 1;
		transform: translateY(0);
	}
}

.woocommerce ul.products li.product .button {
	margin-block-start: var(--os-space-2xs);
	inline-size: 100%;
}

/* Sale flash — repositioned onto the cover as a badge */
.woocommerce span.onsale {
	position: absolute;
	inset-block-start: var(--os-space-2xs);
	inset-inline-start: var(--os-space-2xs);
	inset-inline-end: auto;
	min-block-size: auto;
	min-inline-size: auto;
	line-height: 1;
	padding: 0.3em 0.6em;
	border-radius: var(--os-radius-sm);
	background: var(--os-oxide);
	color: #fff;
	font-family: var(--os-font-ui);
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.woocommerce ul.products li.product {
	position: relative;
}

/* Out of stock overlay, rather than a hidden state */
.os-oos .os-book__cover img,
.woocommerce ul.products li.product.outofstock a img {
	filter: grayscale(1);
	opacity: 0.62;
}

/* ---------------------------------------------------------------
 * Single product
 * --------------------------------------------------------------- */
.woocommerce div.product {
	display: grid;
	gap: var(--os-space-xl);
	align-items: start;
}

@media (min-width: 52rem) {
	.woocommerce div.product {
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	}

	.woocommerce div.product .woocommerce-product-gallery {
		inline-size: 100% !important;
		float: none !important;
		margin: 0 !important;
		position: sticky;
		inset-block-start: 7rem;
	}

	.woocommerce div.product .summary {
		inline-size: 100% !important;
		float: none !important;
		margin: 0 !important;
	}

	/* Tabs span the full width beneath both columns */
	.woocommerce div.product .woocommerce-tabs,
	.woocommerce div.product .related,
	.woocommerce div.product .upsells {
		grid-column: 1 / -1;
	}
}

.woocommerce div.product .woocommerce-product-gallery__image img {
	aspect-ratio: var(--os-cover-ratio);
	object-fit: contain;
	border-radius: var(--os-radius);
	box-shadow: var(--os-shadow-lift);
	background: var(--os-paper-white);
}

.woocommerce div.product .product_title {
	font-size: var(--os-step-3);
	margin-block-end: var(--os-space-2xs);
}

.os-single-author {
	font-family: var(--os-font-ui);
	font-size: var(--os-step-1);
	color: var(--os-muted);
	margin-block-end: var(--os-space-m);
}

.os-single-author a {
	color: var(--os-oxide);
	text-decoration: none;
}

.os-single-author a:hover {
	text-decoration: underline;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-family: var(--os-font-ui);
	font-size: var(--os-step-2);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--os-fg);
	margin-block-end: var(--os-space-m);
}

/* Bibliographic detail table — the catalogue card */
.os-biblio {
	inline-size: 100%;
	margin-block: var(--os-space-m);
	border-collapse: collapse;
	font-family: var(--os-font-ui);
	font-size: var(--os-step--1);
}

.os-biblio th,
.os-biblio td {
	padding: 0.55em 0;
	text-align: start;
	border-block-end: 1px dotted var(--os-rule);
	vertical-align: top;
}

.os-biblio th {
	inline-size: 9rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-size: 0.72rem;
	color: var(--os-muted);
}

.os-biblio td {
	font-variant-numeric: tabular-nums;
}

/* Stock state — says something useful, including shop availability */
.os-stock {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-family: var(--os-font-ui);
	font-size: var(--os-step--1);
	margin-block-end: var(--os-space-m);
}

.os-stock::before {
	content: "";
	inline-size: 0.5rem;
	block-size: 0.5rem;
	border-radius: 50%;
	background: currentColor;
	flex: none;
}

.os-stock--in { color: var(--os-success); }
.os-stock--low { color: var(--os-warn); }
.os-stock--out { color: var(--os-danger); }

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

.woocommerce .quantity .qty {
	inline-size: 4.5rem;
	padding: 0.7em 0.5em;
	border: 1px solid var(--os-rule);
	border-radius: var(--os-radius);
	background: var(--os-paper-white);
	font-family: var(--os-font-ui);
	font-variant-numeric: tabular-nums;
	text-align: center;
}

/* Tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--os-space-m);
	padding: 0;
	margin: 0 0 var(--os-space-m);
	border-block-end: 1px solid var(--os-rule);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: none;
	border: 0;
	border-radius: 0;
	margin: 0;
	padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 0 0 var(--os-space-2xs);
	border-block-end: 2px solid transparent;
	font-family: var(--os-font-ui);
	font-size: var(--os-step--1);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--os-muted);
	text-decoration: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--os-fg);
	border-block-end-color: var(--os-brass);
}

/* ---------------------------------------------------------------
 * Filters — the source site renders ~1,000 ISBNs as a checkbox list,
 * which is unusable. We keep ISBN as a search input only, and give
 * author a type-ahead. See inc/woocommerce.php.
 * --------------------------------------------------------------- */
.os-filters {
	font-family: var(--os-font-ui);
	font-size: var(--os-step--1);
}

.os-filters__group {
	padding-block: var(--os-space-s);
	border-block-end: 1px solid var(--os-rule);
}

.os-filters__legend {
	font-weight: 600;
	letter-spacing: var(--os-tracking-label);
	text-transform: uppercase;
	font-size: 0.72rem;
	color: var(--os-muted);
	margin-block-end: var(--os-space-2xs);
}

.os-filters__list {
	list-style: none;
	margin: 0;
	padding: 0;
	max-block-size: 16rem;
	overflow-y: auto;
	display: grid;
	gap: var(--os-space-3xs);
}

.os-filters__list label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--os-space-2xs);
	cursor: pointer;
}

.os-filters__count {
	color: var(--os-muted);
	font-variant-numeric: tabular-nums;
	font-size: 0.72rem;
}

/* Active filter chips */
.os-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--os-space-3xs);
	margin-block-end: var(--os-space-m);
	list-style: none;
	padding: 0;
}

.os-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.3em 0.7em;
	border-radius: var(--os-radius-pill);
	background: var(--os-shelf);
	color: var(--os-paper-white);
	font-family: var(--os-font-ui);
	font-size: 0.75rem;
	text-decoration: none;
}

.os-chip:hover {
	background: var(--os-oxide);
	color: #fff;
}

/* Sorting + result count row */
.woocommerce .woocommerce-ordering,
.woocommerce .woocommerce-result-count {
	font-family: var(--os-font-ui);
	font-size: var(--os-step--1);
	color: var(--os-muted);
	margin-block-end: var(--os-space-m);
}

.woocommerce .woocommerce-ordering select {
	padding: 0.5em 0.7em;
	border: 1px solid var(--os-rule);
	border-radius: var(--os-radius);
	background: var(--os-paper-white);
	font-family: inherit;
	font-size: inherit;
}

/* ---------------------------------------------------------------
 * Notices
 * --------------------------------------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-block-start: 0;
	border-inline-start: 3px solid var(--os-brass);
	border-radius: var(--os-radius);
	background: var(--os-paper-white);
	color: var(--os-ink);
	font-family: var(--os-font-ui);
	font-size: var(--os-step--1);
	padding: var(--os-space-s) var(--os-space-m);
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	color: var(--os-brass);
}

.woocommerce-error {
	border-inline-start-color: var(--os-danger);
}

.woocommerce-message {
	border-inline-start-color: var(--os-success);
}

/* ---------------------------------------------------------------
 * Cart + checkout — light touch, mostly type and spacing
 * --------------------------------------------------------------- */
.woocommerce table.shop_table {
	border: 1px solid var(--os-rule);
	border-radius: var(--os-radius);
	font-family: var(--os-font-ui);
	font-size: var(--os-step--1);
}

.woocommerce table.shop_table th {
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-size: 0.72rem;
	color: var(--os-muted);
}

.woocommerce table.shop_table td.product-name a {
	font-family: var(--os-font-display);
	font-size: var(--os-step-0);
	color: var(--os-fg);
	text-decoration: none;
}

.woocommerce .cart_totals h2,
.woocommerce-checkout h3 {
	font-size: var(--os-step-1);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	padding: 0.7em 0.85em;
	border: 1px solid var(--os-rule);
	border-radius: var(--os-radius);
	background: var(--os-paper-white);
	font-family: var(--os-font-ui);
	font-size: var(--os-step-0);
}

.woocommerce form .form-row label {
	font-family: var(--os-font-ui);
	font-size: var(--os-step--1);
	font-weight: 500;
}

/* ---------------------------------------------------------------
 * Author archive header (taxonomy: book_author)
 * --------------------------------------------------------------- */
.os-author-head {
	display: grid;
	gap: var(--os-space-m);
	padding-block: var(--os-space-xl);
}

@media (min-width: 48rem) {
	.os-author-head {
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
	}
}

.os-author-head__portrait {
	inline-size: 7rem;
	block-size: 7rem;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--os-brass);
}

.os-author-head__name {
	margin: 0;
	font-size: var(--os-step-3);
}

.os-author-head__meta {
	font-family: var(--os-font-ui);
	font-size: var(--os-step--1);
	letter-spacing: var(--os-tracking-label);
	text-transform: uppercase;
	color: var(--os-brass);
}