/**
 * ASAP Multisite Template
 *
 * Contents
 *   1.  Tokens
 *   2.  Base
 *   3.  Layout
 *   4.  Buttons
 *   5.  Header
 *   6.  Hero (plain and mural)
 *   7.  Category navigation
 *   8.  Category sections
 *   9.  Product grid and card
 *   10. Custom option fields
 *   11. Quick order modal
 *   12. Single product
 *   13. WooCommerce overrides (cart, checkout, notices)
 *   14. Entries and pagination
 *   15. Footer and contact card
 *   16. Password gate
 *   17. Accounts
 *   18. Utilities
 *
 * The accent colour is injected per site from the Customizer — see
 * asap_inline_palette() — so --asap-accent is always defined by the time this
 * file is applied. The fallbacks here keep the stylesheet usable on its own.
 */

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

:root {
	--asap-accent: #1f5fbf;
	--asap-accent-dark: #1a4e9c;
	--asap-accent-soft: #eef3fc;
	--asap-accent-contrast: #ffffff;

	--asap-ink: #14181f;
	--asap-ink-soft: #545c69;
	--asap-ink-faint: #838b98;

	--asap-surface: #ffffff;
	--asap-canvas: #f5f6f8;
	--asap-line: #e2e5ea;
	--asap-line-strong: #cdd2da;

	--asap-danger: #b3261e;
	--asap-success: #146c43;

	--asap-radius: 10px;
	--asap-radius-lg: 16px;

	--asap-shadow-sm: 0 1px 2px rgba(20, 24, 31, 0.06);
	--asap-shadow-md: 0 4px 16px rgba(20, 24, 31, 0.08);
	--asap-shadow-lg: 0 24px 60px rgba(20, 24, 31, 0.22);

	--asap-gap: 24px;
	--asap-header-height: 72px;

	/* Headlines are Mundial Narrow Variable via Adobe Fonts, body text is Inter.
	   Both stacks fall back to a matching system face, so a site with no kit
	   configured still reads correctly - see inc/fonts.php. */
	--asap-font-heading: "mundial-narrow-variable", "Mundial Narrow", "Mundial", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
	--asap-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------------------------------------------------------------- 2. Base */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--asap-canvas);
	color: var(--asap-ink);
	font-family: var(--asap-font-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

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

a {
	color: var(--asap-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

a:hover {
	color: var(--asap-accent-dark);
}

h1, h2, h3, h4,
.asap-page-title,
.asap-hero__title,
.asap-category__title,
.asap-card__title,
.asap-quick__title,
.asap-entry__title,
.asap-contact__name,
.asap-header__title,
.woocommerce div.product .product_title,
.woocommerce-products-header__title {
	font-family: var(--asap-font-heading);
	/* Mundial Narrow is a variable face, so a heavier weight renders as a real
	   cut rather than a synthesised one. The negative tracking a wide face
	   wants would close a narrow one up too far. */
	font-weight: 700;
	letter-spacing: 0;
}

h1, h2, h3, h4 {
	margin: 0 0 0.5em;
	line-height: 1.2;
}

:focus-visible {
	outline: 2px solid var(--asap-accent);
	outline-offset: 2px;
	border-radius: 4px;
}

input,
select,
textarea {
	font: inherit;
	color: inherit;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="search"],
input[type="password"],
select,
textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--asap-line-strong);
	border-radius: var(--asap-radius);
	background: var(--asap-surface);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
	border-color: var(--asap-accent);
	box-shadow: 0 0 0 3px var(--asap-accent-soft);
	outline: none;
}

/* -------------------------------------------------------------- 3. Layout */

.asap-site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.asap-container {
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 20px;
}

.asap-container--narrow {
	max-width: 780px;
}

.asap-main {
	flex: 1 0 auto;
	padding-bottom: 64px;
}

.asap-main--catalog {
	padding-bottom: 80px;
}

.asap-page-title {
	font-size: clamp(28px, 4vw, 38px);
}

/* ------------------------------------------------------------- 4. Buttons */

.asap-button,
.woocommerce .asap-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 18px;
	border: 1px solid transparent;
	border-radius: var(--asap-radius);
	background: var(--asap-accent);
	color: var(--asap-accent-contrast);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}

.asap-button:hover,
.asap-button:focus {
	background: var(--asap-accent-dark);
	color: var(--asap-accent-contrast);
}

.asap-button:active {
	transform: translateY(1px);
}

.asap-button[disabled],
.asap-button[aria-busy="true"] {
	opacity: 0.6;
	cursor: progress;
}

.asap-button--large {
	padding: 14px 26px;
	font-size: 16px;
}

.asap-button--ghost {
	background: transparent;
	border-color: var(--asap-line-strong);
	color: var(--asap-ink);
}

.asap-button--ghost:hover,
.asap-button--ghost:focus {
	background: var(--asap-canvas);
	border-color: var(--asap-ink-faint);
	color: var(--asap-ink);
}

.asap-quick-order.is-loading {
	opacity: 0.7;
	cursor: progress;
}

/* -------------------------------------------------------------- 5. Header */

.asap-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: var(--asap-surface);
	border-bottom: 1px solid var(--asap-line);
}

.asap-header__inner {
	display: flex;
	align-items: center;
	gap: 20px;
	min-height: var(--asap-header-height);
}

.asap-header__brand {
	display: flex;
	align-items: center;
	margin-right: auto;
}

.asap-header__brand img,
.asap-header__brand .custom-logo {
	max-height: 48px;
	width: auto;
}

.asap-header__title {
	font-size: 22px;
	color: var(--asap-ink);
	text-decoration: none;
}

.asap-nav__list {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.asap-nav__list a {
	display: block;
	padding: 8px 12px;
	border-radius: var(--asap-radius);
	color: var(--asap-ink-soft);
	font-size: 15px;
	font-weight: 550;
	text-decoration: none;
}

.asap-nav__list a:hover,
.asap-nav__list .current-menu-item > a {
	background: var(--asap-canvas);
	color: var(--asap-ink);
}

.asap-nav__list .sub-menu {
	display: none;
}

.asap-nav-toggle {
	display: none;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid var(--asap-line);
	border-radius: var(--asap-radius);
	background: var(--asap-surface);
	cursor: pointer;
}

.asap-nav-toggle__bars,
.asap-nav-toggle__bars::before,
.asap-nav-toggle__bars::after {
	display: block;
	width: 18px;
	height: 2px;
	margin: 0 auto;
	background: var(--asap-ink);
	border-radius: 2px;
	content: "";
}

.asap-nav-toggle__bars::before {
	transform: translateY(-6px);
}

.asap-nav-toggle__bars::after {
	transform: translateY(4px);
}

.asap-cart-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 14px;
	border: 1px solid var(--asap-line-strong);
	border-radius: var(--asap-radius);
	color: var(--asap-ink);
	text-decoration: none;
	font-weight: 600;
}

.asap-cart-link:hover {
	border-color: var(--asap-accent);
	color: var(--asap-accent);
}

.asap-cart-count {
	min-width: 22px;
	padding: 1px 7px;
	border-radius: 999px;
	background: var(--asap-accent);
	color: var(--asap-accent-contrast);
	font-size: 13px;
	font-weight: 700;
	text-align: center;
}

.asap-cart-count.is-empty {
	background: var(--asap-line);
	color: var(--asap-ink-faint);
}

/* ---------------------------------------------------------------- 6. Hero */

.asap-hero {
	padding: 48px 0 32px;
	background: var(--asap-surface);
	border-bottom: 1px solid var(--asap-line);
}

.asap-hero__title {
	margin: 0;
	font-size: clamp(30px, 4.5vw, 44px);
}

.asap-hero__intro {
	max-width: 62ch;
	margin: 12px 0 0;
	color: var(--asap-ink-soft);
	font-size: 17px;
}

.asap-hero__intro p:last-child {
	margin-bottom: 0;
}

/* --- Mural hero -------------------------------------------------------- */

.asap-hero--mural {
	position: relative;
	display: flex;
	align-items: center;
	padding: 64px 0;
	overflow: hidden;
	border-bottom: 0;
	/* Painted behind the photo so the headline is legible before it decodes. */
	background: #12161d;
}

.asap-hero--compact { min-height: 320px; }
.asap-hero--standard { min-height: 460px; }
.asap-hero--tall { min-height: 620px; }

.asap-hero--no-image {
	background: linear-gradient(135deg, var(--asap-accent), var(--asap-accent-dark));
}

.asap-hero__media {
	position: absolute;
	inset: 0;
}

.asap-hero__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* The scrim is a flat wash at the client's chosen strength, plus a directional
   gradient that deepens under the text so the headline holds up over a busy
   photo without flattening the whole mural. */
.asap-hero__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to right, rgba(10, 13, 18, 0.8), rgba(10, 13, 18, 0) 68%),
		rgba(10, 13, 18, var(--asap-hero-overlay, 0.45));
}

.asap-hero--center .asap-hero__scrim {
	background:
		linear-gradient(to top, rgba(10, 13, 18, 0.7), rgba(10, 13, 18, 0) 75%),
		rgba(10, 13, 18, var(--asap-hero-overlay, 0.45));
}

.asap-hero--right .asap-hero__scrim {
	background:
		linear-gradient(to left, rgba(10, 13, 18, 0.8), rgba(10, 13, 18, 0) 68%),
		rgba(10, 13, 18, var(--asap-hero-overlay, 0.45));
}

.asap-hero--dark-text .asap-hero__scrim {
	background:
		linear-gradient(to right, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0) 68%),
		rgba(255, 255, 255, var(--asap-hero-overlay, 0.45));
}

.asap-hero--dark-text.asap-hero--center .asap-hero__scrim {
	background:
		linear-gradient(to top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 75%),
		rgba(255, 255, 255, var(--asap-hero-overlay, 0.45));
}

.asap-hero--dark-text.asap-hero--right .asap-hero__scrim {
	background:
		linear-gradient(to left, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0) 68%),
		rgba(255, 255, 255, var(--asap-hero-overlay, 0.45));
}

.asap-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
}

.asap-hero__content {
	max-width: 620px;
}

.asap-hero--center .asap-hero__content {
	margin: 0 auto;
	text-align: center;
}

.asap-hero--right .asap-hero__content {
	margin-left: auto;
	text-align: right;
}

.asap-hero--mural .asap-hero__title {
	font-size: clamp(34px, 6vw, 60px);
	line-height: 1.05;
}

.asap-hero--mural .asap-hero__intro {
	margin-top: 14px;
	font-size: clamp(16px, 1.6vw, 19px);
}

.asap-hero--light-text,
.asap-hero--no-image {
	color: #fff;
}

.asap-hero--light-text .asap-hero__title,
.asap-hero--no-image .asap-hero__title {
	color: #fff;
}

.asap-hero--light-text .asap-hero__intro,
.asap-hero--no-image .asap-hero__intro {
	color: rgba(255, 255, 255, 0.9);
}

.asap-hero--dark-text {
	color: var(--asap-ink);
}

.asap-hero--dark-text .asap-hero__title {
	color: var(--asap-ink);
}

.asap-hero--dark-text .asap-hero__intro {
	color: var(--asap-ink-soft);
}

.asap-hero__actions {
	margin: 24px 0 0;
}

.asap-hero--light-text .asap-hero__actions .asap-button--primary,
.asap-hero--no-image .asap-hero__actions .asap-button--primary {
	background: #fff;
	color: #12161d;
}

.asap-hero--light-text .asap-hero__actions .asap-button--primary:hover,
.asap-hero--no-image .asap-hero__actions .asap-button--primary:hover {
	background: rgba(255, 255, 255, 0.88);
	color: #12161d;
}

/* ----------------------------------------------- 7. Category navigation */

.asap-catnav {
	position: sticky;
	top: var(--asap-header-height);
	z-index: 30;
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: saturate(180%) blur(8px);
	border-bottom: 1px solid var(--asap-line);
}

.asap-catnav__list {
	display: flex;
	gap: 6px;
	margin: 0;
	padding: 10px 0;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

.asap-catnav__link {
	display: block;
	padding: 7px 14px;
	border: 1px solid transparent;
	border-radius: 999px;
	color: var(--asap-ink-soft);
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
}

.asap-catnav__link:hover {
	background: var(--asap-canvas);
	color: var(--asap-ink);
}

.asap-catnav__link.is-active {
	background: var(--asap-accent-soft);
	border-color: var(--asap-accent);
	color: var(--asap-accent-dark);
}

/* --------------------------------------------------- 8. Category sections */

.asap-category {
	padding: 48px 0 8px;
	scroll-margin-top: calc(var(--asap-header-height) + 60px);
}

.asap-category + .asap-category {
	border-top: 1px solid var(--asap-line);
}

.asap-category__header {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 24px;
}

.asap-category__icon img {
	display: block;
	width: 56px;
	height: 56px;
	border-radius: var(--asap-radius);
	object-fit: cover;
}

.asap-category__heading {
	flex: 1 1 auto;
	min-width: 0;
}

.asap-category__title {
	margin: 0;
	font-size: clamp(22px, 2.6vw, 28px);
}

.asap-category__title a {
	color: var(--asap-ink);
	text-decoration: none;
}

.asap-category__title a:hover {
	color: var(--asap-accent);
}

.asap-category__description {
	max-width: 70ch;
	margin-top: 4px;
	color: var(--asap-ink-soft);
	font-size: 15px;
}

.asap-category__description p {
	margin: 0;
}

.asap-category__all {
	flex: 0 0 auto;
	align-self: center;
	padding: 8px 14px;
	border: 1px solid var(--asap-line-strong);
	border-radius: var(--asap-radius);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.asap-category__all:hover {
	border-color: var(--asap-accent);
}

/* ------------------------------------------------ 9. Product grid and card */

.woocommerce ul.products,
ul.products {
	display: grid;
	grid-template-columns: repeat(var(--asap-columns, 4), minmax(0, 1fr));
	gap: var(--asap-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

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

ul.products.columns-2 { --asap-columns: 2; }
ul.products.columns-3 { --asap-columns: 3; }
ul.products.columns-4 { --asap-columns: 4; }
ul.products.columns-5 { --asap-columns: 5; }
ul.products.columns-6 { --asap-columns: 6; }

/* WooCommerce's own stylesheet floats these; the grid owns layout instead. */
.woocommerce ul.products li.product,
ul.products li.product {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

.asap-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--asap-surface);
	border: 1px solid var(--asap-line);
	border-radius: var(--asap-radius-lg);
	box-shadow: var(--asap-shadow-sm);
	transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.asap-card:hover {
	border-color: var(--asap-line-strong);
	box-shadow: var(--asap-shadow-md);
	transform: translateY(-2px);
}

.asap-card__media {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	background: var(--asap-canvas);
	overflow: hidden;
}

/* Contain rather than cover: a square photo fills the frame exactly, and one
   that is not square is letterboxed instead of having its edges cut off. */
.asap-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform 0.3s ease;
}

.asap-card:hover .asap-card__media img {
	transform: scale(1.03);
}

.asap-card__badge {
	position: absolute;
	left: 10px;
	bottom: 10px;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(20, 24, 31, 0.82);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.woocommerce span.onsale,
.asap-card .onsale {
	position: absolute;
	top: 10px;
	left: 10px;
	right: auto;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--asap-accent);
	color: var(--asap-accent-contrast);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.6;
	text-transform: uppercase;
}

.asap-card__body {
	flex: 1 1 auto;
	padding: 16px 16px 8px;
}

.asap-card__title {
	margin: 0 0 6px;
	font-size: 16px;
	line-height: 1.35;
}

.asap-card__title a {
	color: var(--asap-ink);
	text-decoration: none;
}

.asap-card__title a:hover {
	color: var(--asap-accent);
}

.asap-card__excerpt {
	margin: 0 0 10px;
	color: var(--asap-ink-soft);
	font-size: 14px;
	line-height: 1.5;
}

.asap-card__price,
.woocommerce .asap-card__price .price {
	color: var(--asap-ink);
	font-size: 16px;
	font-weight: 700;
}

.asap-card__price del {
	margin-right: 6px;
	color: var(--asap-ink-faint);
	font-weight: 500;
}

.asap-card__price .woocommerce-Price-amount {
	color: inherit;
}

.asap-card__actions {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px 16px;
}

.asap-card__actions .asap-button,
.asap-card__actions .button {
	flex: 1 1 auto;
}

.asap-card__more {
	flex: 0 0 auto;
	color: var(--asap-ink-soft);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.asap-card__more:hover {
	color: var(--asap-accent);
	text-decoration: underline;
}

/* Hide WooCommerce's own "added" tick link inside the card footer. */
.asap-card__actions .added_to_cart {
	display: none;
}

/* -------------------------------------------------- 10. Custom option fields */

.asap-options {
	display: grid;
	gap: 16px;
	margin: 0 0 20px;
	padding: 16px;
	background: var(--asap-canvas);
	border: 1px solid var(--asap-line);
	border-radius: var(--asap-radius);
}

.asap-options__heading {
	margin: 20px 0 8px;
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--asap-ink-faint);
}

.asap-option {
	display: grid;
	gap: 6px;
}

.asap-option__label {
	font-size: 14px;
	font-weight: 650;
}

.asap-option__label abbr.required {
	border: 0;
	color: var(--asap-danger);
	text-decoration: none;
}

.asap-option__price {
	color: var(--asap-ink-soft);
	font-weight: 600;
}

.asap-option__choices {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
}

.asap-option__choice {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	cursor: pointer;
}

.asap-option__help,
.asap-option__hint {
	color: var(--asap-ink-faint);
	font-size: 13px;
}

.asap-option__file {
	padding: 8px;
	background: var(--asap-surface);
}

.asap-po-field {
	margin-top: 4px;
}

.asap-po-field .form-row {
	padding: 0;
}

.asap-cart-option-price {
	color: var(--asap-ink-faint);
	font-size: 0.9em;
}

/* ---------------------------------------------------- 11. Quick order modal */

body.asap-modal-open {
	overflow: hidden;
}

.asap-modal {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.asap-modal[hidden] {
	display: none;
}

.asap-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(16, 20, 26, 0.55);
	opacity: 0;
	transition: opacity 0.18s ease;
}

.asap-modal.is-open .asap-modal__backdrop {
	opacity: 1;
}

.asap-modal__dialog {
	position: relative;
	width: 100%;
	max-width: 880px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	background: var(--asap-surface);
	border-radius: var(--asap-radius-lg);
	box-shadow: var(--asap-shadow-lg);
	opacity: 0;
	transform: translateY(12px) scale(0.99);
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.asap-modal.is-open .asap-modal__dialog {
	opacity: 1;
	transform: none;
}

.asap-modal__dialog:focus {
	outline: none;
}

.asap-modal__close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--asap-line);
	border-radius: 50%;
	background: var(--asap-surface);
	color: var(--asap-ink-soft);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.asap-modal__close:hover {
	background: var(--asap-canvas);
	color: var(--asap-ink);
}

.asap-modal__loading,
.asap-modal__error {
	margin: 0;
	padding: 64px 24px;
	text-align: center;
	color: var(--asap-ink-soft);
}

.asap-modal__error {
	color: var(--asap-danger);
}

.asap-quick {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
}

.asap-quick__media {
	background: var(--asap-canvas);
}

.asap-quick__media img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 520px;
	object-fit: cover;
}

.asap-quick__summary {
	padding: 28px 28px 28px;
}

.asap-quick__title {
	margin: 0 0 6px;
	padding-right: 32px;
	font-size: 24px;
}

.asap-quick__price {
	margin-bottom: 12px;
	font-size: 20px;
	font-weight: 700;
}

.asap-quick__price del {
	margin-right: 6px;
	color: var(--asap-ink-faint);
	font-weight: 500;
}

.asap-quick__excerpt {
	color: var(--asap-ink-soft);
	font-size: 15px;
}

.asap-quick__excerpt p:last-child {
	margin-bottom: 0;
}

.asap-quick__messages:empty {
	display: none;
}

.asap-quick__messages {
	margin: 16px 0;
	padding: 12px 14px;
	border-radius: var(--asap-radius);
	font-size: 14px;
}

.asap-quick__messages p {
	margin: 0 0 6px;
}

.asap-quick__messages p:last-child {
	margin-bottom: 0;
}

.asap-quick__messages.is-error {
	background: #fdeceb;
	color: var(--asap-danger);
}

.asap-quick__messages.is-success {
	background: #e8f5ee;
	color: var(--asap-success);
}

.asap-quick__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 12px !important;
}

.asap-quick__form {
	margin-top: 16px;
}

.asap-quick__form form.cart.is-busy {
	opacity: 0.7;
	pointer-events: none;
}

/* The modal is opened from the catalogue front page, which is not a
   WooCommerce page — `body` carries no `woocommerce` class there, so none of
   the product-form or button rules in sections 12 and 13 reach inside it. The
   form in here is the genuine single-product form, so it gets the same
   treatment, scoped to the modal instead of to `.woocommerce`. */

.asap-modal .quantity {
	display: inline-flex;
	float: none;
	margin: 0 12px 0 0;
	vertical-align: middle;
}

.asap-modal .quantity .qty {
	width: 84px;
	padding: 11px 8px;
	text-align: center;
}

.asap-modal table.variations {
	width: 100%;
	margin: 0 0 16px;
	border: 0;
	border-collapse: collapse;
}

.asap-modal table.variations th,
.asap-modal table.variations td {
	padding: 6px 0;
	border: 0;
	text-align: left;
	vertical-align: middle;
}

.asap-modal table.variations label {
	font-size: 14px;
	font-weight: 650;
}

/* The swatch plugin scopes its label sizing to a body class it only adds on a
   product page. The modal is the product form wherever it was opened from. */
.asap-modal table.variations .label label {
	font-size: var(--cfvsw-swatches-label-font-size, 14px);
}

.asap-modal .cfvsw-swatches-container {
	margin: 2px 0;
}

.asap-modal .reset_variations {
	display: inline-block;
	margin-top: 4px;
	color: var(--asap-ink-soft);
	font-size: 13px;
}

.asap-modal .woocommerce-variation-price {
	margin-bottom: 12px;
	font-size: 18px;
	font-weight: 700;
}

.asap-modal .woocommerce-variation-availability p {
	margin: 0 0 12px;
	font-size: 14px;
}

/* Blue, like every other button on the site. Without this the add-to-cart
   button in here falls all the way through to the browser default, because
   WooCommerce's own stylesheet is `.woocommerce`-scoped too. */
.asap-modal .button,
.asap-modal button.button,
.asap-modal input.button,
.asap-modal button[type="submit"],
.asap-modal .single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 22px;
	border: 1px solid transparent;
	border-radius: var(--asap-radius);
	background: var(--asap-accent);
	color: var(--asap-accent-contrast);
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.asap-modal .button:hover,
.asap-modal button.button:hover,
.asap-modal input.button:hover,
.asap-modal button[type="submit"]:hover,
.asap-modal .single_add_to_cart_button:hover,
.asap-modal .button:focus-visible,
.asap-modal button.button:focus-visible,
.asap-modal .single_add_to_cart_button:focus-visible {
	background: var(--asap-accent-dark);
	color: var(--asap-accent-contrast);
}

/* WooCommerce disables the button until a variation is chosen. It has to read
   as waiting rather than broken. */
.asap-modal .button.disabled,
.asap-modal button.button:disabled,
.asap-modal button.button:disabled[disabled],
.asap-modal .single_add_to_cart_button.disabled {
	background: var(--asap-accent);
	color: var(--asap-accent-contrast);
	opacity: 0.5;
	cursor: not-allowed;
}

.asap-quick__link {
	margin: 16px 0 0;
	font-size: 14px;
}

.asap-quick__unavailable {
	padding: 12px 14px;
	border-radius: var(--asap-radius);
	background: var(--asap-canvas);
	color: var(--asap-ink-soft);
	font-size: 14px;
}

/* ------------------------------------------------------ 12. Single product */

.woocommerce div.product .product_title {
	font-size: clamp(26px, 3.4vw, 34px);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--asap-ink);
	font-size: 22px;
	font-weight: 700;
}

.woocommerce div.product form.cart {
	margin-bottom: 24px;
}

.woocommerce div.product form.cart .variations {
	margin-bottom: 16px;
}

.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th {
	padding: 6px 0;
	vertical-align: middle;
}

.woocommerce div.product form.cart .variations label {
	font-weight: 650;
}

.woocommerce div.product form.cart div.quantity {
	float: none;
	display: inline-flex;
	margin: 0 12px 0 0;
	vertical-align: middle;
}

.woocommerce .quantity .qty {
	width: 84px;
	padding: 11px 8px;
	text-align: center;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding-left: 0;
}

/* ----------------------------------------- 13. WooCommerce overrides */

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	padding: 11px 18px;
	border-radius: var(--asap-radius);
	background: var(--asap-accent);
	color: var(--asap-accent-contrast);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	transition: background-color 0.15s ease;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background: var(--asap-accent-dark);
	color: var(--asap-accent-contrast);
}

.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled] {
	opacity: 0.5;
}

/* --- WooCommerce purple ---------------------------------------------------

   WooCommerce's own #7f54b3 reaches the cart and checkout from three
   directions, and the rules above only cover the first of them:

     1. woocommerce.css paints `.button.alt` — Proceed to checkout, Update
        cart, Place order — at the same specificity the rules above use, so
        whichever stylesheet prints second wins. `body` in front settles it
        rather than leaving it to enqueue order.
     2. The cart and checkout blocks, which modern WooCommerce uses for those
        two pages by default, are a different component library entirely and
        share none of the classes above.
     3. Both derive from custom properties, which other WooCommerce surfaces
        read as well.

   All three are pointed at the site's accent, so a subsite is one colour. */

:root {
	--wc-primary: var(--asap-accent);
	--wc-primary-text: var(--asap-accent-contrast);
	--wc-secondary: var(--asap-canvas);
	--wc-secondary-text: var(--asap-ink);
	--wc-highlight: var(--asap-accent);
	--wc-highlight-text: var(--asap-accent-contrast);
}

body.woocommerce #respond input#submit.alt,
body.woocommerce a.button.alt,
body.woocommerce button.button.alt,
body.woocommerce input.button.alt,
body .woocommerce #respond input#submit.alt,
body .woocommerce a.button.alt,
body .woocommerce button.button.alt,
body .woocommerce input.button.alt {
	background: var(--asap-accent);
	color: var(--asap-accent-contrast);
}

body.woocommerce #respond input#submit.alt:hover,
body.woocommerce a.button.alt:hover,
body.woocommerce button.button.alt:hover,
body.woocommerce input.button.alt:hover,
body .woocommerce a.button.alt:hover,
body .woocommerce button.button.alt:hover,
body .woocommerce input.button.alt:hover {
	background: var(--asap-accent-dark);
	color: var(--asap-accent-contrast);
}

/* The cart and checkout blocks. `.is-link` is the plain text button — "Edit
   address", "Return to cart" — and stays a link. */
body .wc-block-components-button:not(.is-link),
body .wp-block-woocommerce-cart .wc-block-cart__submit-button,
body .wc-block-components-checkout-place-order-button {
	border: 1px solid transparent;
	border-radius: var(--asap-radius);
	background-color: var(--asap-accent);
	color: var(--asap-accent-contrast);
	font-weight: 600;
	transition: background-color 0.15s ease;
}

body .wc-block-components-button:not(.is-link):hover,
body .wc-block-components-button:not(.is-link):focus,
body .wp-block-woocommerce-cart .wc-block-cart__submit-button:hover,
body .wc-block-components-checkout-place-order-button:hover {
	background-color: var(--asap-accent-dark);
	color: var(--asap-accent-contrast);
}

/* The label is a span inside the button, and the block stylesheet colours it
   directly rather than inheriting. */
body .wc-block-components-button:not(.is-link) .wc-block-components-button__text,
body .wc-block-components-checkout-place-order-button .wc-block-components-button__text {
	color: var(--asap-accent-contrast);
}

body .wc-block-components-button:not(.is-link):disabled,
body .wc-block-components-checkout-place-order-button:disabled {
	background-color: var(--asap-accent);
	opacity: 0.5;
}

/* Links inside the blocks pick up the purple too. */
body .wc-block-components-button.is-link,
body .wc-block-components-totals-coupon-link {
	color: var(--asap-accent);
}

/* --- "Free" in the block cart --------------------------------------------

   The cart block renders a zero shipping cost as the word "Free", from React,
   client-side — which is why none of the PHP in inc/shipping-invoice.php can
   reach it. On an order form that word is a promise the invoice then breaks,
   and the row's own label already says the cost is still to come, so the value
   becomes a dash.

   This is a workaround, not the fix. The fix is a classic cart page — see
   "Known limits" in the README — at which point the PHP filter handles this
   properly and the rest of the theme's cart styling applies as well.

   :has() keeps it honest: the bare <strong> is specifically the free case, and
   a zone that does quote real freight renders a formatted amount instead, which
   this leaves alone. A browser without :has() drops the rule and shows "Free"
   as it does today, rather than blanking a real price. */

body .wc-block-components-totals-shipping .wc-block-components-totals-item__value:not(:has(.wc-block-formatted-money-amount)) > strong {
	display: none;
}

body .wc-block-components-totals-shipping .wc-block-components-totals-item__value:not(:has(.wc-block-formatted-money-amount))::after {
	content: "—";
	font-weight: 600;
}

/* The sentence is a sentence, not a two-word label, so let the row give it the
   room it needs rather than squeezing it against the value. */
body .wc-block-components-totals-shipping .wc-block-components-totals-item__label {
	line-height: 1.5;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top-color: var(--asap-accent);
	border-radius: var(--asap-radius);
	background: var(--asap-surface);
	box-shadow: var(--asap-shadow-sm);
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--asap-accent);
}

.woocommerce-error {
	border-top-color: var(--asap-danger);
}

.woocommerce table.shop_table {
	border-radius: var(--asap-radius-lg);
	border-color: var(--asap-line);
	background: var(--asap-surface);
}

.woocommerce table.shop_table th {
	font-weight: 650;
}

/* WooCommerce draws the cart photos at 32px, too small to tell one flag or
   kit from the next. */
.woocommerce-cart table.cart .product-thumbnail {
	width: 88px;
}

.woocommerce-cart table.cart .product-thumbnail img {
	display: block;
	width: 64px;
	height: auto;
	border: 1px solid var(--asap-line);
	border-radius: 6px;
	background: var(--asap-surface);
}

.woocommerce .cart_totals h2,
.woocommerce-checkout h3 {
	font-size: 20px;
}

.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register,
.woocommerce-checkout #payment {
	border-radius: var(--asap-radius-lg);
	border-color: var(--asap-line);
	background: var(--asap-surface);
}

.woocommerce-checkout #payment {
	background: var(--asap-surface);
	border: 1px solid var(--asap-line);
}

/* When pay-by-invoice is the only way to pay there is nothing to choose, and
   the disclaimer above the Place Order button already says what its
   description says. Hidden rather than removed: the radio inside still has
   to be submitted with the order. A site offering a second gateway gets the
   list back, and :has() keeps that right across the checkout's AJAX redraws. */
.woocommerce-checkout #payment ul.wc_payment_methods:has(> li.payment_method_asap_invoice:only-child) {
	display: none;
}

/* The last thing read before the order is placed. Loud enough not to be
   skimmed past, quiet enough not to read as an error. */
.asap-checkout-disclaimer {
	margin: 0 0 16px;
	padding: 14px 16px;
	border: 1px solid var(--asap-line);
	border-left: 3px solid var(--asap-accent);
	border-radius: var(--asap-radius);
	background: var(--asap-accent-soft);
	color: var(--asap-ink);
	font-size: 14px;
	line-height: 1.55;
	text-align: left;
}

.asap-checkout-disclaimer p {
	margin: 0 0 8px;
}

.asap-checkout-disclaimer p:last-child {
	margin-bottom: 0;
}

/* WooCommerce prints the breadcrumb as the first thing inside the content
   wrapper, so without a gap here it sits flush against the header. This is the
   single source of that gap for every shop page — the products header below
   used to own it, which left single products and the cart with none. */
.asap-main--shop {
	padding-top: 28px;
}

.woocommerce .woocommerce-breadcrumb {
	margin: 0 0 26px;
	padding: 0 0 14px;
	border-bottom: 1px solid var(--asap-line);
	color: var(--asap-ink-faint);
	font-size: 13px;
	line-height: 1.6;
	letter-spacing: 0.01em;
}

.woocommerce .woocommerce-breadcrumb a {
	color: var(--asap-ink-soft);
	text-decoration: none;
}

.woocommerce .woocommerce-breadcrumb a:hover,
.woocommerce .woocommerce-breadcrumb a:focus-visible {
	color: var(--asap-accent);
	text-decoration: underline;
}

/* Shipping options here are named in whole sentences — freight is quoted on the
   invoice, and the option's own label is where the customer is told so. Woo
   sizes these rows for two or three words, so let them wrap and give the text
   room beside the radio rather than under it. */
.woocommerce ul#shipping_method,
.woocommerce-checkout-review-order ul#shipping_method {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

.woocommerce ul#shipping_method li {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin: 0 0 8px;
	padding: 0;
	text-indent: 0;
	line-height: 1.5;
}

.woocommerce ul#shipping_method li:last-child {
	margin-bottom: 0;
}

.woocommerce ul#shipping_method li input {
	margin: 5px 0 0;
	flex: 0 0 auto;
}

.woocommerce ul#shipping_method li label {
	display: block;
	white-space: normal;
	font-size: 14px;
}

/* --- The order review on the checkout -------------------------------------

   The last screen before the order is placed shows the order again, with the
   photos: staff ordering signage are picking between things that read almost
   the same written down. */

.woocommerce-checkout-review-order-table {
	width: 100%;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
	vertical-align: top;
}

.woocommerce-checkout-review-order-table .cart_item .product-name {
	/* Contains the floated photo, so the row grows with whichever of the two
	   is taller. */
	overflow: hidden;
	line-height: 1.45;
}

.asap-review__media {
	display: block;
	float: left;
	width: 56px;
	margin: 2px 12px 4px 0;
}

.asap-review__media .asap-review__image {
	display: block;
	width: 56px;
	height: auto;
	border: 1px solid var(--asap-line);
	border-radius: 6px;
	background: var(--asap-surface);
}

.woocommerce-checkout-review-order-table .product-quantity {
	display: inline-block;
	color: var(--asap-ink-soft);
	font-weight: 600;
}

.woocommerce-checkout-review-order-table .product-total {
	white-space: nowrap;
	text-align: right;
}

/* The shipping row carries a whole sentence rather than a price, so it has to
   be allowed to wrap. Its alignment is left as WooCommerce sets it — that
   column is the money column, and the reference build reads the same way. */
.woocommerce-checkout-review-order-table .shipping td {
	white-space: normal;
	font-size: 14px;
	line-height: 1.5;
}

@media (max-width: 480px) {
	.asap-review__media,
	.asap-review__media .asap-review__image {
		width: 44px;
	}
}

.woocommerce-cart-form .product-name dl.variation,
.woocommerce-checkout-review-order dl.variation,
.woocommerce-mini-cart dl.variation {
	margin: 6px 0 0;
	font-size: 13px;
	color: var(--asap-ink-soft);
}

.woocommerce-cart-form .product-name dl.variation dt,
.woocommerce-checkout-review-order dl.variation dt {
	float: none;
	clear: both;
	font-weight: 650;
}

.woocommerce-cart-form .product-name dl.variation dd,
.woocommerce-checkout-review-order dl.variation dd {
	margin: 0 0 4px;
	padding: 0;
}

.asap-main--shop .woocommerce-products-header {
	padding-top: 0;
}

.asap-main--shop .woocommerce-products-header__title {
	font-size: clamp(28px, 4vw, 38px);
}

.woocommerce .woocommerce-ordering,
.asap-main--shop .products {
	margin-top: 24px;
}

/* ----------------------------------------- 14. Entries and pagination */

.asap-entry {
	padding: 32px 0;
}

.asap-entry--summary + .asap-entry--summary {
	border-top: 1px solid var(--asap-line);
}

.asap-entry__title {
	font-size: 22px;
}

.asap-entry__title a {
	color: var(--asap-ink);
	text-decoration: none;
}

.asap-entry__meta {
	margin: 0 0 12px;
	color: var(--asap-ink-faint);
	font-size: 14px;
}

.asap-entry__content > *:first-child {
	margin-top: 0;
}

.asap-archive-header,
.asap-empty {
	padding-top: 40px;
}

.asap-empty {
	padding: 64px 0;
	text-align: center;
	color: var(--asap-ink-soft);
}

.asap-search {
	display: flex;
	gap: 8px;
	max-width: 460px;
	margin: 16px auto 0;
}

.navigation.pagination {
	padding: 24px 0;
}

.navigation.pagination .page-numbers {
	display: inline-block;
	padding: 6px 12px;
	border-radius: var(--asap-radius);
	text-decoration: none;
}

.navigation.pagination .page-numbers.current {
	background: var(--asap-accent);
	color: var(--asap-accent-contrast);
}

/* -------------------------------------------------------------- 15. Footer */

.asap-footer {
	flex: 0 0 auto;
	margin-top: auto;
	padding: 40px 0 32px;
	background: var(--asap-surface);
	border-top: 1px solid var(--asap-line);
	color: var(--asap-ink-soft);
	font-size: 14px;
}

.asap-footer__widgets {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 32px;
	margin-bottom: 32px;
}

.asap-footer__widget-title {
	margin-bottom: 8px;
	font-size: 15px;
	color: var(--asap-ink);
}

.asap-contact {
	margin-bottom: 28px;
	padding: 20px 22px;
	background: var(--asap-canvas);
	border: 1px solid var(--asap-line);
	border-radius: var(--asap-radius-lg);
}

.asap-contact__heading {
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--asap-ink-faint);
}

.asap-contact__card {
	display: flex;
	align-items: flex-start;
	gap: 18px;
}

.asap-contact__photo {
	flex: 0 0 auto;
}

.asap-contact__image {
	display: block;
	width: 68px;
	height: 68px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--asap-line);
}

.asap-contact__details {
	min-width: 0;
}

.asap-contact__name {
	margin: 0;
	font-size: 19px;
	color: var(--asap-ink);
}

.asap-contact__role {
	margin: 2px 0 10px;
	color: var(--asap-ink-soft);
}

.asap-contact__links {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
	margin: 0 0 6px;
}

.asap-contact__link {
	font-weight: 600;
	text-decoration: none;
}

.asap-contact__link:hover {
	text-decoration: underline;
}

.asap-contact__phone-label {
	margin-right: 6px;
	color: var(--asap-ink-soft);
}

.asap-contact__address {
	margin: 0 0 6px;
	font-style: normal;
	color: var(--asap-ink-soft);
}

.asap-contact__hours {
	margin: 0;
	color: var(--asap-ink-soft);
}

.asap-contact__note {
	margin-top: 10px;
	color: var(--asap-ink-soft);
}

.asap-contact__note p:last-child {
	margin-bottom: 0;
}

.asap-footer__note {
	margin-bottom: 24px;
}

.asap-footer__note p:last-child {
	margin-bottom: 0;
}

.asap-footer__bottom {
	padding-top: 20px;
	border-top: 1px solid var(--asap-line);
}

.asap-footer__copyright {
	margin: 0;
}

/* --------------------------------------------------------- 16. Password gate */

/* The gate is served as a standalone document: nothing of the site should be
   visible before the visitor is through, not even the navigation. */

.asap-gate {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	padding: 40px 20px;
}

.asap-gate__panel {
	width: 100%;
	max-width: 420px;
	padding: 36px 32px;
	background: var(--asap-surface);
	border: 1px solid var(--asap-line);
	border-radius: var(--asap-radius-lg);
	box-shadow: var(--asap-shadow-md);
	text-align: center;
}

.asap-gate__brand {
	margin-bottom: 18px;
}

.asap-gate__brand img {
	display: block;
	width: auto;
	max-height: 56px;
	margin: 0 auto;
}

.asap-gate__sitename {
	font-family: var(--asap-font-heading);
	font-size: 22px;
	font-weight: 700;
	color: var(--asap-ink);
}

.asap-gate__title {
	margin: 0 0 8px;
	font-size: 26px;
}

.asap-gate__message {
	color: var(--asap-ink-soft);
	font-size: 15px;
}

.asap-gate__message p:last-child {
	margin-bottom: 0;
}

.asap-gate__error {
	margin: 18px 0 0;
	padding: 10px 14px;
	border-radius: var(--asap-radius);
	background: #fdeceb;
	color: var(--asap-danger);
	font-size: 14px;
}

.asap-gate__form {
	display: grid;
	gap: 8px;
	margin-top: 22px;
	text-align: left;
}

.asap-gate__label {
	font-size: 14px;
	font-weight: 650;
}

.asap-gate__submit {
	width: 100%;
	margin-top: 6px;
}

.asap-gate__help {
	margin: 22px 0 0;
	color: var(--asap-ink-faint);
	font-size: 13px;
}

/* ------------------------------------------------------------ 17. Accounts */

/* Said on the register form, before anybody fills it in: which addresses get
   in straight away and what happens to everybody else. */
.asap-register-note {
	margin: 4px 0 16px;
	padding: 12px 14px;
	border-radius: var(--asap-radius);
	background: var(--asap-accent-soft);
	color: var(--asap-ink-soft);
	font-size: 14px;
	line-height: 1.5;
}

.asap-store-number-field {
	margin-top: 4px;
}

.asap-store-number-field .form-row {
	padding: 0;
}

/* --- My account ---------------------------------------------------------

   WooCommerce renders this page through page.php, which is a prose column
   780px wide. A dashboard is not prose: it wants the width back, the
   navigation wants to stop being a bulleted list, and the whole thing wants to
   read as a panel rather than as an article that happens to contain links. */

.woocommerce-account .asap-container--narrow {
	max-width: 1080px;
}

.woocommerce-account .woocommerce {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 28px;
}

/* Both of these are floated percentages in WooCommerce's own stylesheet. */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: auto;
	margin: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
	flex: 0 0 240px;
}

.woocommerce-account .woocommerce-MyAccount-content {
	flex: 1 1 460px;
	min-width: 0;
	padding: 28px 30px;
	background: var(--asap-surface);
	border: 1px solid var(--asap-line);
	border-radius: var(--asap-radius-lg);
	box-shadow: var(--asap-shadow-sm);
}

.woocommerce-MyAccount-content > *:first-child {
	margin-top: 0;
}

.woocommerce-MyAccount-content > *:last-child {
	margin-bottom: 0;
}

/* The greeting line, which is the one bit of the dashboard anybody reads. */
.woocommerce-MyAccount-content > p:first-of-type {
	margin-top: 0;
	color: var(--asap-ink);
	font-size: 17px;
}

/* Navigation. */
.woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--asap-surface);
	border: 1px solid var(--asap-line);
	border-radius: var(--asap-radius-lg);
	box-shadow: var(--asap-shadow-sm);
}

.woocommerce-MyAccount-navigation li {
	margin: 0;
}

.woocommerce-MyAccount-navigation a {
	display: block;
	padding: 10px 14px;
	border-radius: var(--asap-radius);
	color: var(--asap-ink-soft);
	font-size: 15px;
	font-weight: 550;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.woocommerce-MyAccount-navigation a:hover {
	background: var(--asap-canvas);
	color: var(--asap-ink);
}

.woocommerce-MyAccount-navigation .is-active > a {
	background: var(--asap-accent-soft);
	color: var(--asap-accent-dark);
	font-weight: 650;
}

/* Signing out is not one of the places you can go, so it sits apart. */
.woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: 6px;
	padding-top: 6px;
	border-top: 1px solid var(--asap-line);
}

/* Tables: orders and downloads. */
.woocommerce-MyAccount-content table.shop_table {
	margin: 0;
	border: 1px solid var(--asap-line);
	border-radius: var(--asap-radius);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}

.woocommerce-MyAccount-content table.shop_table thead th {
	padding: 12px 14px;
	border-bottom: 1px solid var(--asap-line);
	background: var(--asap-canvas);
	color: var(--asap-ink-faint);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.woocommerce-MyAccount-content table.shop_table td {
	padding: 14px;
	border-top: 1px solid var(--asap-line);
	vertical-align: middle;
}

.woocommerce-MyAccount-content table.shop_table tbody tr:first-child td {
	border-top: 0;
}

.woocommerce-MyAccount-content table.shop_table .button {
	padding: 7px 12px;
	font-size: 14px;
}

.woocommerce-orders-table__cell-order-number a {
	font-weight: 650;
	text-decoration: none;
}

.woocommerce-orders-table__cell-order-status {
	color: var(--asap-ink-soft);
	font-weight: 650;
}

/* Addresses, and the login and register pair, are both two floated columns. */
.woocommerce-account .woocommerce-Addresses,
.woocommerce-account #customer_login.u-columns {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 22px;
}

/* WooCommerce clears its floated columns with ::before and ::after. In a grid
   those are two more grid items, and they take real columns — which is what
   leaves the login and register pair sitting in half the row. */
.woocommerce-account .woocommerce-Addresses::before,
.woocommerce-account .woocommerce-Addresses::after,
.woocommerce-account #customer_login.u-columns::before,
.woocommerce-account #customer_login.u-columns::after {
	display: none;
}

.woocommerce-account .woocommerce-Addresses .col-1,
.woocommerce-account .woocommerce-Addresses .col-2,
.woocommerce-account #customer_login .col-1,
.woocommerce-account #customer_login .col-2 {
	float: none;
	width: auto;
	margin: 0;
}

.woocommerce-account .woocommerce-Address {
	height: 100%;
	padding: 20px 22px;
	background: var(--asap-canvas);
	border: 1px solid var(--asap-line);
	border-radius: var(--asap-radius-lg);
}

.woocommerce-Address-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.woocommerce-Address-title h2,
.woocommerce-Address-title h3 {
	margin: 0;
	font-size: 18px;
}

.woocommerce-Address address {
	margin: 12px 0 0;
	color: var(--asap-ink-soft);
	font-style: normal;
	line-height: 1.7;
}

/* Signed out: the login and register forms. */
.woocommerce-account #customer_login h2 {
	margin: 0 0 14px;
	font-size: 22px;
}

.woocommerce-account form.login,
.woocommerce-account form.register {
	margin: 0;
	padding: 24px 26px;
	box-shadow: var(--asap-shadow-sm);
}

/* Form rows, in every one of those forms. */
.woocommerce-account .form-row {
	margin: 0 0 16px;
	padding: 0;
}

.woocommerce-account .form-row > label:not(.checkbox):not(.inline) {
	display: block;
	margin-bottom: 6px;
	color: var(--asap-ink);
	font-size: 14px;
	font-weight: 600;
}

.woocommerce-account .woocommerce-form__label-for-checkbox {
	color: var(--asap-ink-soft);
	font-size: 14px;
}

.woocommerce-account .woocommerce-form-login__rememberme {
	display: inline-block;
	margin: 0 0 14px;
}

.woocommerce-account .lost_password {
	margin: 12px 0 0;
	font-size: 14px;
}

/* WooCommerce floats the paired name fields at 47% each. A grid holds them
   without the float, and keeps the full-width rows genuinely full width. */
.woocommerce-account .woocommerce-MyAccount-content form,
.woocommerce-account .woocommerce-address-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 20px;
}

.woocommerce-account .woocommerce-MyAccount-content form > *,
.woocommerce-account .woocommerce-address-fields__field-wrapper > * {
	grid-column: 1 / -1;
}

.woocommerce-account .form-row-first,
.woocommerce-account .form-row-last {
	float: none;
	width: auto;
}

.woocommerce-account .woocommerce-MyAccount-content form > .form-row-first,
.woocommerce-account .woocommerce-address-fields__field-wrapper > .form-row-first {
	grid-column: 1 / 2;
}

.woocommerce-account .woocommerce-MyAccount-content form > .form-row-last,
.woocommerce-account .woocommerce-address-fields__field-wrapper > .form-row-last {
	grid-column: 2 / -1;
}

/* A grid has no floats to clear, and the spacer would take a row of its own. */
.woocommerce-account .woocommerce-MyAccount-content form > .clear,
.woocommerce-account .woocommerce-address-fields__field-wrapper > .clear {
	display: none;
}

.woocommerce-EditAccountForm fieldset {
	margin: 26px 0 20px;
	padding: 20px 22px;
	background: var(--asap-canvas);
	border: 1px solid var(--asap-line);
	border-radius: var(--asap-radius-lg);
}

.woocommerce-EditAccountForm legend {
	margin-left: -6px;
	padding: 0 6px;
	color: var(--asap-ink);
	font-size: 15px;
	font-weight: 700;
}

@media (max-width: 782px) {
	.woocommerce-account .woocommerce {
		gap: 20px;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation {
		flex: 1 1 100%;
	}

	.woocommerce-account .woocommerce-MyAccount-content {
		padding: 22px 20px;
	}
}

/* --- Contact form ---------------------------------------------------------

   Gravity Forms ships its own stylesheet; these are the few places it and the
   theme disagree, plus the treatment for a field filled in from the account. */

.asap-contact-form {
	max-width: 660px;
}

.asap-contact-form .gform_wrapper {
	margin: 0;

	/* Gravity Forms' newer themes colour their controls from these, so setting
	   them here covers the framework without fighting its selectors. */
	--gf-ctrl-bg-color: var(--asap-surface);
	--gf-ctrl-bg-color-hover: var(--asap-surface);
	--gf-ctrl-bg-color-focus: var(--asap-surface);
}

/* Gravity Forms styles its own controls, and its textarea ends up on the page's
   grey while every other field on the form sits on white. Named explicitly, and
   with enough specificity to outrank the plugin's own `.gform_wrapper .gfield
   textarea`. Editable fields only, so the locked-field treatment further down
   still reads as settled rather than being repainted white. */
.asap-contact-form .gform_wrapper .gform_fields textarea:not([readonly]),
.asap-contact-form .gform_wrapper .gform_fields input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([readonly]),
.asap-contact-form .gform_wrapper .gform_fields select:not([readonly]) {
	background-color: var(--asap-surface);
	border: 1px solid var(--asap-line-strong);
	border-radius: var(--asap-radius);
	color: var(--asap-ink);
}

/* Sizing applies to a locked field too — only the colours above are withheld
   from one, so it still reads as settled. */
.asap-contact-form .gform_wrapper .gform_fields textarea {
	min-height: 140px;
	padding: 10px 12px;
	resize: vertical;
}

.asap-contact-form .gform_wrapper .gform_footer {
	margin: 20px 0 0;
	padding: 0;
}

.asap-contact-form .gform_wrapper .gfield_label,
.asap-contact-form .gform_wrapper legend.gfield_label {
	margin-bottom: 6px;
	color: var(--asap-ink);
	font-size: 14px;
	font-weight: 600;
}

.asap-contact-form .gform_wrapper .gfield_description {
	padding-top: 4px;
	color: var(--asap-ink-faint);
	font-size: 13px;
}

.asap-contact-form .gform_wrapper input[type="submit"],
.asap-contact-form .gform_wrapper .gform_button {
	padding: 11px 18px;
	border: 1px solid transparent;
	border-radius: var(--asap-radius);
	background: var(--asap-accent);
	color: var(--asap-accent-contrast);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.asap-contact-form .gform_wrapper input[type="submit"]:hover,
.asap-contact-form .gform_wrapper .gform_button:hover {
	background: var(--asap-accent-dark);
}

.asap-contact-form .gform_wrapper .gform_validation_errors,
.asap-contact-form .gform_wrapper .gform_confirmation_message {
	margin: 0 0 20px;
	padding: 14px 16px;
	border-radius: var(--asap-radius);
	border: 1px solid var(--asap-line);
	background: var(--asap-surface);
	box-shadow: var(--asap-shadow-sm);
}

.asap-contact-form .gform_wrapper .gform_confirmation_message {
	border-left: 3px solid var(--asap-success);
}

/* A field the account filled in. It reads as settled rather than editable —
   the point is that it cannot be changed here, not that it is broken. */
.asap-field-locked input[readonly],
.asap-field-locked textarea[readonly] {
	background: var(--asap-canvas);
	border-color: var(--asap-line);
	color: var(--asap-ink-soft);
	cursor: default;
}

.asap-field-locked input[readonly]:focus,
.asap-field-locked textarea[readonly]:focus {
	border-color: var(--asap-line-strong);
	box-shadow: none;
}

.asap-contact-form .gform_wrapper .asap-field-locked__note,
.asap-field-locked__note {
	display: block;
	margin-top: 6px;
	color: var(--asap-ink-faint);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
}

.asap-field-locked__note a {
	color: inherit;
}

/* Only somebody who can fix it ever sees this. */
.asap-form-notice {
	padding: 14px 16px;
	border: 1px dashed var(--asap-line-strong);
	border-radius: var(--asap-radius);
	color: var(--asap-ink-soft);
	font-size: 15px;
}

/* ----------------------------------------------------------- 18. Utilities */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed !important;
	top: 8px;
	left: 8px;
	z-index: 200;
	width: auto;
	height: auto;
	padding: 12px 18px;
	clip: auto;
	background: var(--asap-surface);
	border-radius: var(--asap-radius);
	box-shadow: var(--asap-shadow-md);
	font-weight: 600;
}

/* ------------------------------------------------------------ Breakpoints */

@media (max-width: 1024px) {
	ul.products.columns-5 { --asap-columns: 4; }
	ul.products.columns-6 { --asap-columns: 4; }
}

@media (max-width: 860px) {
	ul.products.columns-4,
	ul.products.columns-5,
	ul.products.columns-6 { --asap-columns: 3; }

	.asap-quick {
		grid-template-columns: 1fr;
	}

	.asap-quick__media img {
		max-height: 260px;
	}

	.asap-quick__summary {
		padding: 24px 20px;
	}
}

@media (max-width: 782px) {
	.asap-nav-toggle {
		display: block;
		order: 2;
	}

	.asap-header__actions {
		order: 3;
	}

	.asap-nav {
		order: 4;
		display: none;
		width: 100%;
		padding-bottom: 12px;
	}

	.asap-nav.is-open {
		display: block;
	}

	.asap-nav__list {
		flex-direction: column;
		align-items: stretch;
	}

	.asap-header__inner {
		flex-wrap: wrap;
	}
}

@media (max-width: 640px) {
	:root {
		--asap-gap: 16px;
	}

	.asap-hero--mural {
		padding: 48px 0;
	}

	.asap-hero--compact { min-height: 260px; }
	.asap-hero--standard { min-height: 340px; }
	.asap-hero--tall { min-height: 420px; }

	/* A side gradient does nothing at this width - wash the whole photo. */
	.asap-hero--mural .asap-hero__scrim {
		background:
			linear-gradient(to top, rgba(10, 13, 18, 0.72), rgba(10, 13, 18, 0.1)),
			rgba(10, 13, 18, var(--asap-hero-overlay, 0.45));
	}

	.asap-hero--dark-text .asap-hero__scrim {
		background:
			linear-gradient(to top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2)),
			rgba(255, 255, 255, var(--asap-hero-overlay, 0.45));
	}

	.asap-hero--right .asap-hero__content {
		margin-left: 0;
		text-align: left;
	}

	.asap-contact__card {
		gap: 14px;
	}

	.asap-contact__image {
		width: 54px;
		height: 54px;
	}

	ul.products,
	ul.products.columns-3,
	ul.products.columns-4,
	ul.products.columns-5,
	ul.products.columns-6 { --asap-columns: 2; }

	.asap-hero {
		padding: 32px 0 24px;
	}

	.asap-category {
		padding-top: 36px;
	}

	.asap-category__header {
		flex-wrap: wrap;
	}

	.asap-category__all {
		align-self: flex-start;
	}

	.asap-card__actions {
		flex-wrap: wrap;
	}

	.asap-card__title {
		font-size: 15px;
	}

	.asap-modal {
		padding: 0;
	}

	.asap-modal__dialog {
		max-width: none;
		max-height: 100vh;
		height: 100%;
		border-radius: 0;
	}
}

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

	.asap-card:hover {
		transform: none;
	}
}