/**
 * WooCommerce integration styling (spec §17–§23, §44).
 *
 * Loaded only on WooCommerce views (see inc/enqueue.php). Maps WooCommerce's
 * native markup onto the AKNB design system so the store is coherent before
 * the dedicated template overrides land, and stays coherent for any Woo output
 * we don't template (notices, form rows, account tables, blocks).
 *
 * Tokens/components only; logical properties throughout for RTL.
 */

/* ===========================================================================
 * SHOP SHELL (wrappers from inc/woocommerce.php)
 * ======================================================================== */
.aknb-shop {
	padding-block: var(--section-gap-sm);
}
.aknb-shop__layout {
	display: block;
}
.woocommerce-products-header {
	margin-block-end: var(--space-8);
}
.woocommerce-products-header__title,
.woocommerce-loop-product__title,
.aknb-shop .page-title {
	font-family: var(--font-display);
	letter-spacing: var(--ls-tight);
}
.woocommerce-products-header__title {
	font-size: var(--text-3xl);
	line-height: var(--lh-tight);
	margin: 0;
}
.woocommerce-result-count {
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}
.term-description {
	color: var(--color-text-secondary);
	max-inline-size: var(--content-width-narrow);
	margin-block-start: var(--space-2);
}

/* Sort + result-count row */
.woocommerce-ordering select,
.woocommerce-ordering .aknb-select {
	min-block-size: var(--tap-target);
	padding-inline: var(--space-4) var(--space-8);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-md);
	background: var(--color-surface);
	font-size: var(--text-sm);
}

/* ===========================================================================
 * PRODUCT LOOP GRID
 *
 * Fallback only. The theme's own loops emit .aknb-product-grid (see
 * woocommerce/loop/loop-start.php and aknb_render_products_grid()), which is
 * styled in components.css. This block exists so third-party plugins and
 * shortcodes that print raw `<ul class="products">` still inherit the design
 * system instead of falling back to browser defaults.
 * ======================================================================== */
ul.products {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(var(--aknb-grid-cols, 4), minmax(0, 1fr));
	gap: var(--space-8) var(--grid-gap);
}
@media (max-width: 1080px) {
	ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
	ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 400px) {
	ul.products { grid-template-columns: 1fr; }
}

ul.products li.product {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}
ul.products li.product a img,
li.product .woocommerce-loop-product__link img {
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--radius-lg);
	background: var(--color-surface-sunken);
	margin-block-end: var(--space-1);
}
ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--fw-medium);
	line-height: var(--lh-snug);
	color: var(--color-text);
	padding: 0;
	margin: 0;
}
ul.products li.product a {
	text-decoration: none;
	color: inherit;
}
ul.products li.product .price {
	font-size: var(--text-md);
	font-weight: var(--fw-semibold);
	color: var(--color-price);
	font-variant-numeric: tabular-nums;
}
ul.products li.product .price del {
	color: var(--color-price-original);
	font-weight: var(--fw-regular);
	margin-inline-end: var(--space-1);
}
ul.products li.product .price ins {
	text-decoration: none;
	color: var(--color-price-sale);
}

/* Sale badge (from woocommerce_sale_flash filter -> .aknb-badge) */
li.product .aknb-badge--sale,
.woocommerce span.onsale {
	position: absolute;
	inset-block-start: var(--space-3);
	inset-inline-start: var(--space-3);
	z-index: 2;
	margin: 0;
}
.woocommerce span.onsale {
	background: var(--color-price-sale);
	color: var(--color-on-accent);
	border-radius: var(--radius-sm);
	padding: 0.25em 0.6em;
	font-size: var(--text-2xs);
	font-weight: var(--fw-semibold);
	min-block-size: 0;
	line-height: 1.4;
}

/* Loop add-to-cart button */
ul.products li.product .button,
ul.products li.product .added_to_cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-block-size: var(--tap-target);
	padding: var(--space-2) var(--space-4);
	margin-block-start: auto;
	font-size: var(--text-sm);
	font-weight: var(--fw-semibold);
	border-radius: var(--radius-md);
	background: var(--color-primary);
	color: var(--color-on-primary);
	border: 1px solid transparent;
	text-decoration: none;
	transition: background-color var(--dur-fast) var(--ease-standard);
}
ul.products li.product .button:hover {
	background: var(--color-primary-hover);
}
ul.products li.product .button.loading {
	opacity: 0.7;
	pointer-events: none;
}

/* Loop star rating (native markup) */
.woocommerce .star-rating {
	position: relative;
	font-size: 1em;
	inline-size: 5.4em;
	block-size: 1.05em;
	line-height: 1;
	overflow: hidden;
	font-family: star; /* Woo webfont */
	color: var(--gold-600);
}

/* ===========================================================================
 * BREADCRUMB (markup from woocommerce_breadcrumb_defaults filter)
 * ======================================================================== */
.aknb-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-1);
	list-style: none;
	margin: 0 0 var(--space-6);
	padding: 0;
	font-size: var(--text-xs);
	color: var(--color-text-muted);
}
.aknb-breadcrumb li {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
}
.aknb-breadcrumb li:not(:last-child)::after {
	content: "/";
	color: var(--color-border-strong);
	margin-inline-start: var(--space-1);
}
.aknb-breadcrumb a {
	color: var(--color-text-secondary);
	text-decoration: none;
}
.aknb-breadcrumb a:hover {
	color: var(--color-link-hover);
}

/* ===========================================================================
 * SINGLE PRODUCT
 * ======================================================================== */
.single-product div.product {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: var(--space-12);
	align-items: start;
}
@media (max-width: 899.98px) {
	.single-product div.product {
		grid-template-columns: 1fr;
		gap: var(--space-8);
	}
}
/* The gallery + summary form the two columns; everything else (tabs, related,
   upsells, recently-viewed) spans the full width on its own row. */
.single-product div.product > .woocommerce-tabs,
.single-product div.product > .upsells,
.single-product div.product > .related,
.single-product div.product > .aknb-single-recent {
	grid-column: 1 / -1;
}

/* Truthful badges overlaid on the gallery (shared set, from hooks). */
.aknb-single-badges {
	position: absolute;
	inset-block-start: var(--space-4);
	inset-inline-start: var(--space-4);
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-2);
	pointer-events: none;
}

/* Category eyebrow above the title (renders at priority 4). */
.aknb-single__eyebrow {
	display: inline-block;
	margin-block-end: var(--space-2);
	color: var(--color-text-secondary);
	text-decoration: none;
}
.aknb-single__eyebrow:hover {
	color: var(--color-link-hover);
}
.single-product div.product .product_title {
	font-family: var(--font-display);
	font-size: var(--text-3xl);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
	margin: 0 0 var(--space-3);
}
.single-product .woocommerce-product-gallery {
	position: relative;
}
.single-product .woocommerce-product-gallery__image img {
	border-radius: var(--radius-xl);
	background: var(--color-surface-sunken);
}
.single-product .woocommerce-product-gallery__wrapper {
	margin: 0;
}
.single-product div.product p.price,
.single-product div.product span.price {
	font-size: var(--text-2xl);
	font-weight: var(--fw-semibold);
	color: var(--color-price);
	font-variant-numeric: tabular-nums;
	margin-block: var(--space-2) var(--space-5);
	display: block;
}
.single-product div.product p.price del {
	color: var(--color-price-original);
	font-size: var(--text-lg);
	font-weight: var(--fw-regular);
	margin-inline-end: var(--space-2);
}
.single-product div.product p.price ins {
	text-decoration: none;
	color: var(--color-price-sale);
}
.woocommerce-product-details__short-description {
	color: var(--color-text-secondary);
	line-height: var(--lh-relaxed);
	margin-block-end: var(--space-6);
}

/* Add-to-cart form / quantity */
.single-product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--space-3);
	margin-block: var(--space-6);
}
.single-product form.cart .quantity {
	display: inline-flex;
}
.quantity input.qty {
	inline-size: 4.5rem;
	min-block-size: var(--tap-target);
	text-align: center;
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-md);
	font-variant-numeric: tabular-nums;
	padding: var(--space-2);
}
.single-product form.cart .single_add_to_cart_button {
	flex: 1 1 auto;
	min-block-size: var(--tap-target);
	padding-inline: var(--space-8);
	font-size: var(--text-base);
	font-weight: var(--fw-semibold);
	border-radius: var(--radius-md);
	background: var(--color-primary);
	color: var(--color-on-primary);
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color var(--dur-fast) var(--ease-standard);
}
.single-product form.cart .single_add_to_cart_button:hover {
	background: var(--color-primary-hover);
}

/* Variation swatches / selects */
table.variations {
	inline-size: 100%;
	border-collapse: collapse;
	margin-block-end: var(--space-4);
}
table.variations th {
	text-align: start;
	padding-block: var(--space-2);
	font-size: var(--text-sm);
	font-weight: var(--fw-semibold);
}
table.variations td {
	padding-block: var(--space-2);
}
.woocommerce-variation-price .price {
	font-weight: var(--fw-semibold);
}

/* Product meta (SKU / categories) */
.product_meta {
	margin-block-start: var(--space-6);
	padding-block-start: var(--space-4);
	border-block-start: 1px solid var(--color-border);
	font-size: var(--text-xs);
	color: var(--color-text-muted);
}
.product_meta > span {
	display: block;
	margin-block-end: var(--space-1);
}
.product_meta a {
	color: var(--color-text-secondary);
}

/* Delivery + trust block (spec §18, from single-product/delivery-trust.php) */
.aknb-delivery-trust {
	display: grid;
	gap: var(--space-4);
	list-style: none;
	margin: var(--space-6) 0 0;
	padding: var(--space-5);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-surface-elevated);
}
.aknb-delivery-trust__item {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	margin: 0;
	font-size: var(--text-sm);
}
.aknb-delivery-trust__item > svg {
	flex: none;
	color: var(--color-accent);
	margin-block-start: 0.15em;
}
.aknb-delivery-trust__body {
	display: block;
}
.aknb-delivery-trust__title {
	display: block;
	font-weight: var(--fw-semibold);
	color: var(--color-text);
}
.aknb-delivery-trust__text {
	display: block;
	color: var(--color-text-secondary);
	line-height: var(--lh-normal);
}

/* Wishlist toggle beneath add-to-cart. Label swaps on .is-active via CSS only
   (app.js toggles the class + aria-pressed, never the text). */
.aknb-single__wishlist {
	align-self: flex-start;
	gap: var(--space-2);
	margin-block-start: var(--space-4);
}
.aknb-single__wishlist svg {
	flex: none;
	transition: fill var(--dur-fast) var(--ease-standard);
}
.aknb-single__wishlist:hover {
	color: var(--color-error);
}
.aknb-single__wishlist.is-active {
	color: var(--color-error);
	border-color: currentColor;
}
.aknb-single__wishlist.is-active svg {
	fill: currentColor;
}
.aknb-single__wishlist.is-loading {
	opacity: 0.6;
	pointer-events: none;
}
/* Default: prompt to save. Active: confirm saved. */
.aknb-single__wishlist-saved {
	display: none;
}
.aknb-single__wishlist.is-active .aknb-single__wishlist-save {
	display: none;
}
.aknb-single__wishlist.is-active .aknb-single__wishlist-saved {
	display: inline;
}

/* Tabs (description / additional info / reviews) */
.woocommerce-tabs {
	margin-block-start: var(--space-16);
}
.woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	list-style: none;
	margin: 0 0 var(--space-6);
	padding: 0 0 var(--space-2);
	border-block-end: 1px solid var(--color-border);
}
.woocommerce-tabs ul.tabs li {
	margin: 0;
}
.woocommerce-tabs ul.tabs li a {
	display: inline-flex;
	min-block-size: var(--tap-target);
	align-items: center;
	padding-inline: var(--space-4);
	font-weight: var(--fw-semibold);
	color: var(--color-text-secondary);
	text-decoration: none;
	border-radius: var(--radius-md);
}
.woocommerce-tabs ul.tabs li.active a {
	color: var(--color-primary);
	background: var(--color-surface-sunken);
}
.woocommerce-Tabs-panel h2 {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	margin-block-end: var(--space-4);
}

/* Related / upsell heading */
.related.products > h2,
.upsells.products > h2 {
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	letter-spacing: var(--ls-tight);
	margin-block-end: var(--space-6);
}

/* Recently viewed strip (real browsing history, current product excluded). */
.aknb-single-recent {
	margin-block-start: var(--space-16);
	padding-block-start: var(--space-10);
	border-block-start: 1px solid var(--color-border);
}

/* ===========================================================================
 * REVIEWS
 * ======================================================================== */
#reviews .commentlist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-6);
}
#reviews .comment_container {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--space-4);
	padding: var(--space-5);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
}
#reviews .comment_container img.avatar {
	inline-size: 44px;
	block-size: 44px;
	border-radius: var(--radius-full);
}
#reviews .comment-text .star-rating {
	margin-block-end: var(--space-2);
}

/* ===========================================================================
 * CART PAGE
 * ======================================================================== */
.woocommerce-cart .shop_table {
	inline-size: 100%;
	border-collapse: collapse;
	margin-block-end: var(--space-8);
}
.woocommerce-cart .shop_table th {
	text-align: start;
	padding: var(--space-3);
	font-size: var(--text-xs);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--color-text-muted);
	border-block-end: 1px solid var(--color-border);
}
.woocommerce-cart .shop_table td {
	padding: var(--space-4) var(--space-3);
	border-block-end: 1px solid var(--color-border);
	vertical-align: middle;
}
.woocommerce-cart .shop_table .product-thumbnail img {
	inline-size: 72px;
	block-size: 90px;
	object-fit: cover;
	border-radius: var(--radius-md);
}
.woocommerce-cart .product-name a {
	color: var(--color-text);
	text-decoration: none;
	font-weight: var(--fw-medium);
}
.cart_totals {
	max-inline-size: 26rem;
	margin-inline-start: auto;
	padding: var(--space-6);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-surface-elevated);
}
.cart_totals h2 {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	margin-block-end: var(--space-4);
}
.cart_totals table {
	inline-size: 100%;
}
.cart_totals th,
.cart_totals td {
	padding-block: var(--space-2);
	text-align: start;
}
.cart_totals .order-total .amount {
	font-size: var(--text-lg);
	font-weight: var(--fw-semibold);
}

/* ===========================================================================
 * CHECKOUT
 * ======================================================================== */
.woocommerce-checkout .col2-set,
.woocommerce-checkout #customer_details {
	display: grid;
	gap: var(--space-6);
}
@media (min-width: 768px) {
	.woocommerce-checkout #customer_details {
		grid-template-columns: 1fr 1fr;
	}
}
.woocommerce-checkout h3 {
	font-family: var(--font-display);
	font-size: var(--text-lg);
	margin-block-end: var(--space-4);
}
#order_review {
	padding: var(--space-6);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-surface-elevated);
}
#order_review .shop_table {
	inline-size: 100%;
}
#order_review .order-total .amount {
	font-size: var(--text-lg);
	font-weight: var(--fw-semibold);
}
#place_order {
	inline-size: 100%;
	min-block-size: calc(var(--tap-target) + 8px);
	font-size: var(--text-base);
	font-weight: var(--fw-semibold);
	background: var(--color-accent);
	color: var(--color-on-accent);
	border: 1px solid transparent;
	border-radius: var(--radius-md);
	cursor: pointer;
	margin-block-start: var(--space-4);
	transition: background-color var(--dur-fast) var(--ease-standard);
}
#place_order:hover {
	background: var(--color-accent-hover);
}

/* ===========================================================================
 * FORM FIELDS (checkout / account / cart) — map to input tokens
 * ======================================================================== */
.woocommerce form .form-row {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	margin-block-end: var(--space-4);
	padding: 0;
}
.woocommerce form .form-row label {
	font-size: var(--text-sm);
	font-weight: var(--fw-medium);
	color: var(--color-text-secondary);
}
.woocommerce form .form-row .required {
	color: var(--color-error);
	text-decoration: none;
	border: 0;
}
.woocommerce form .input-text,
.woocommerce form select,
.woocommerce .select2-selection {
	min-block-size: var(--tap-target);
	padding: var(--space-3) var(--space-4);
	font-size: var(--text-base);
	color: var(--color-text);
	background: var(--color-surface);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-md);
	appearance: none;
}
.woocommerce form .input-text:focus,
.woocommerce form select:focus {
	outline: none;
	border-color: var(--color-focus);
	box-shadow: var(--focus-ring);
}

/* ===========================================================================
 * ACCOUNT
 * ======================================================================== */
.woocommerce-account .woocommerce {
	display: grid;
	grid-template-columns: 15rem 1fr;
	gap: var(--space-10);
	align-items: start;
}
/* Logged-out /my-account/ has no navigation column — WooCommerce renders the
 * login/register card as the only child, which would otherwise be squeezed into
 * the 15rem sidebar track. Span both tracks; .aknb-auth handles its own measure. */
.woocommerce-account .woocommerce > .aknb-auth {
	grid-column: 1 / -1;
}
@media (max-width: 767.98px) {
	.woocommerce-account .woocommerce {
		grid-template-columns: 1fr;
		gap: var(--space-6);
	}
}
.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}
.woocommerce-MyAccount-navigation a {
	display: block;
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-md);
	color: var(--color-text-secondary);
	text-decoration: none;
	font-weight: var(--fw-medium);
}
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation a:hover {
	background: var(--color-surface-sunken);
	color: var(--color-primary);
}
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
	font-family: var(--font-display);
}
.woocommerce-orders-table,
.woocommerce-table--order-details {
	inline-size: 100%;
	border-collapse: collapse;
}
.woocommerce-orders-table th,
.woocommerce-orders-table td,
.woocommerce-table--order-details th,
.woocommerce-table--order-details td {
	padding: var(--space-3);
	border-block-end: 1px solid var(--color-border);
	text-align: start;
}

/* ===========================================================================
 * NOTICES / MESSAGES — map onto notice component language
 * ======================================================================== */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
.woocommerce-notice {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	padding: var(--space-4);
	margin-block-end: var(--space-5);
	border-radius: var(--radius-md);
	border: 1px solid var(--color-border);
	background: var(--color-surface);
	font-size: var(--text-sm);
	list-style: none;
}
.woocommerce-message {
	border-color: var(--color-success);
	background: var(--color-success-surface);
}
.woocommerce-info {
	border-color: var(--color-info);
	background: var(--color-info-surface);
}
.woocommerce-error {
	border-color: var(--color-error);
	background: var(--color-error-surface);
	flex-direction: column;
	gap: var(--space-1);
}
.woocommerce-message .button,
.woocommerce-info .button {
	margin-inline-start: auto;
	padding: var(--space-1) var(--space-3);
	font-size: var(--text-xs);
	font-weight: var(--fw-semibold);
	border-radius: var(--radius-sm);
	background: var(--color-primary);
	color: var(--color-on-primary);
	text-decoration: none;
	white-space: nowrap;
}

/* ===========================================================================
 * MINI-CART DRAWER INTERNALS (rendered into the cart drawer)
 * Native mini-cart ma

/* ===========================================================================
 * PASSWORD STRENGTH / SELECT2 polish
 * ======================================================================== */
.select2-container--default .select2-selection--single {
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-md);
	min-block-size: var(--tap-target);
	display: flex;
	align-items: center;
}
.select2-dropdown {
	border-color: var(--color-border-strong);
	border-radius: var(--radius-md);
}

/* ===========================================================================
 * STICKY ADD-TO-CART BAR (spec §18) — built/toggled by assets/js/product.js.
 * Hidden by default; slides up once the main purchase form scrolls away.
 * ======================================================================== */
.aknb-sticky-bar {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: var(--z-sticky-bar);
	background: var(--color-surface-elevated);
	border-block-start: 1px solid var(--color-border);
	box-shadow: var(--shadow-elevated);
	transform: translateY(100%);
	/* visibility (not just transform) so the off-screen add-to-cart button
	 * leaves the tab order — it is aria-hidden, and a focusable aria-hidden
	 * control announces nothing to a screen reader. Animatable, so the
	 * slide-in transition still runs. */
	visibility: hidden;
	transition: transform var(--dur-base) var(--ease-out),
		visibility var(--dur-base) var(--ease-out);
	padding-block: var(--space-3);
	padding-inline: 0;
	padding-block-end: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
}
.aknb-sticky-bar.is-visible {
	transform: translateY(0);
	visibility: visible;
}
.aknb-sticky-bar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
}
.aknb-sticky-bar__info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-inline-size: 0;
}
.aknb-sticky-bar__title {
	font-weight: var(--fw-semibold);
	font-size: var(--text-sm);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-inline-size: 48vw;
}
.aknb-sticky-bar__price {
	font-size: var(--text-sm);
	color: var(--color-price);
	font-variant-numeric: tabular-nums;
}
.aknb-sticky-bar__price del {
	color: var(--color-price-original);
	margin-inline-end: var(--space-1);
}
.aknb-sticky-bar__action {
	flex: none;
}
.aknb-sticky-bar__action:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}
@media (prefers-reduced-motion: reduce) {
	.aknb-sticky-bar {
		transition: none;
	}
}

/* ===========================================================================
 * SHOP HEADER (archive-product.php) — editorial title band.
 * ======================================================================== */
.aknb-shop__header {
	margin-block-end: var(--space-8);
	max-inline-size: var(--content-width-narrow);
}
.aknb-shop__eyebrow {
	display: block;
	margin-block-end: var(--space-2);
}
.aknb-shop__title {
	font-family: var(--font-display);
	font-size: var(--text-3xl);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
	margin: 0;
}
.aknb-shop__header .term-description {
	margin-block-start: var(--space-4);
}

/* ===========================================================================
 * SHOP TOOLBAR — filters trigger · result count · sort. One flex row.
 * ======================================================================== */
.aknb-shop__toolbar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-3) var(--space-4);
	padding-block: var(--space-4);
	margin-block-end: var(--space-6);
	border-block: 1px solid var(--color-border);
}
.aknb-shop__filter-btn {
	flex: none;
}
.aknb-shop__toolbar .woocommerce-result-count {
	margin: 0;
}
/* Push the sort control to the far (inline-end) edge of the row. */
.aknb-shop__toolbar .woocommerce-ordering {
	margin: 0;
	margin-inline-start: auto;
}
.aknb-shop__toolbar .woocommerce-ordering select,
.aknb-shop__toolbar .woocommerce-ordering .aknb-select {
	margin: 0;
}

/* Active-filter chips row (aknb_shop_active_filters). */
.aknb-shop__active {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	margin-block-end: var(--space-6);
}
.aknb-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding-block: var(--space-1);
	padding-inline: var(--space-3) var(--space-2);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-full);
	background: var(--color-surface);
	color: var(--color-text);
	font-size: var(--text-xs);
	font-weight: var(--fw-medium);
	text-decoration: none;
	transition: border-color var(--dur-fast) var(--ease-standard),
		background-color var(--dur-fast) var(--ease-standard);
}
.aknb-chip:hover {
	border-color: var(--color-error);
	background: var(--color-error-surface);
	color: var(--color-error);
}
.aknb-chip__x {
	flex: none;
	opacity: 0.7;
}
.aknb-chip:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}
.aknb-shop__clear {
	font-size: var(--text-xs);
	font-weight: var(--fw-semibold);
	color: var(--color-text-muted);
	text-decoration: underline;
	text-underline-offset: 2px;
	margin-inline-start: var(--space-1);
}
.aknb-shop__clear:hover {
	color: var(--color-text);
}

/* ===========================================================================
 * FILTER DRAWER (template-parts/shop/filters.php) — real GET form.
 * Drawer chrome (.aknb-drawer / --start / __head / __body / __foot) lives in
 * components.css; this only styles the facet controls inside it.
 * ======================================================================== */
.aknb-filters {
	display: flex;
	flex-direction: column;
	min-block-size: 0;
	block-size: 100%;
}
.aknb-filters__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
}
.aknb-filters__group {
	margin: 0;
	padding: 0;
	border: 0;
}
.aknb-filters__legend {
	display: block;
	inline-size: 100%;
	padding: 0;
	margin-block-end: var(--space-3);
	font-family: var(--font-display);
	font-size: var(--text-sm);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--color-text-muted);
}
.aknb-filters__options {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}
.aknb-filters__option {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	min-block-size: var(--tap-target);
	padding-inline: var(--space-2);
	border-radius: var(--radius-md);
	cursor: pointer;
	font-size: var(--text-sm);
	color: var(--color-text);
	transition: background-color var(--dur-fast) var(--ease-standard);
}
.aknb-filters__option:hover {
	background: var(--color-surface-sunken);
}
.aknb-filters__option input {
	flex: none;
	inline-size: 1.15rem;
	block-size: 1.15rem;
	accent-color: var(--color-primary);
}
.aknb-filters__option-label {
	flex: 1;
	min-inline-size: 0;
}
.aknb-filters__count {
	flex: none;
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	font-variant-numeric: tabular-nums;
}

/* Price range inputs */
.aknb-filters__price {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}
.aknb-filters__price-field {
	flex: 1;
	display: flex;
	align-items: center;
	min-inline-size: 0;
	padding-inline-start: var(--space-3);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-md);
	background: var(--color-surface);
	transition: border-color var(--dur-fast) var(--ease-standard),
		box-shadow var(--dur-fast) var(--ease-standard);
}
.aknb-filters__price-field:focus-within {
	border-color: var(--color-focus);
	box-shadow: var(--focus-ring);
}
.aknb-filters__price-affix {
	flex: none;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	pointer-events: none;
}
.aknb-filters__price-field input {
	flex: 1;
	inline-size: 100%;
	min-inline-size: 0;
	min-block-size: var(--tap-target);
	padding-inline: var(--space-2) var(--space-3);
	border: 0;
	background: none;
	color: var(--color-text);
	font-size: var(--text-base);
	font-variant-numeric: tabular-nums;
}
.aknb-filters__price-field input:focus-visible {
	outline: none;
}
.aknb-filters__price-sep {
	flex: none;
	color: var(--color-text-muted);
}

/* Drawer footer actions */
.aknb-filters__foot {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}
.aknb-filters__clear {
	flex: none;
}
.aknb-filters__apply {
	flex: 1;
}

/* ===========================================================================
 * PAGINATION (woocommerce_pagination) — numbered page links.
 * ======================================================================== */
.woocommerce-pagination {
	margin-block-start: var(--space-12);
}
.woocommerce-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	list-style: none;
	margin: 0;
	padding: 0;
	border: 0;
}
.woocommerce-pagination ul.page-numbers li {
	margin: 0;
	border: 0;
}
.woocommerce-pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-inline-size: var(--tap-target);
	min-block-size: var(--tap-target);
	padding-inline: var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface);
	color: var(--color-text);
	font-size: var(--text-sm);
	font-weight: var(--fw-medium);
	text-decoration: none;
	transition: border-color var(--dur-fast) var(--ease-standard),
		background-color var(--dur-fast) var(--ease-standard);
}
.woocommerce-pagination a.page-numbers:hover {
	border-color: var(--color-border-strong);
	background: var(--color-surface-sunken);
}
.woocommerce-pagination .page-numbers.current {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-on-primary);
}
.woocommerce-pagination .page-numbers.dots {
	border-color: transparent;
	background: none;
}
.woocommerce-pagination a.page-numbers:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

/* Empty state on the shop keeps generous breathing room. */
.aknb-shop__empty {
	grid-column: 1 / -1;
}

/* ===========================================================================
 * CART PAGE — classic (shortcode) refinements (Phase 7)
 * The base table is styled above; this covers the actions bar, coupon,
 * quantity, cross-sells, the proceed CTA and the empty state.
 * ======================================================================== */
.woocommerce-cart .woocommerce {
	display: grid;
	gap: var(--space-10);
}
@media (min-width: 900px) {
	.woocommerce-cart .woocommerce {
		grid-template-columns: minmax(0, 1fr) 22rem;
		align-items: start;
	}
	/* The cart form spans the first column; collaterals (totals + reassurance)
	   sit in the narrow second column. Cross-sells drop below, full width. */
	.woocommerce-cart form.woocommerce-cart-form {
		grid-column: 1;
	}
	.woocommerce-cart .cart-collaterals {
		grid-column: 2;
		grid-row: 1;
		position: sticky;
		inset-block-start: calc(var(--header-height, 72px) + var(--space-4));
	}
	.woocommerce-cart .cross-sells {
		grid-column: 1 / -1;
	}
}
.woocommerce-cart .cart-collaterals .cart_totals {
	max-inline-size: none;
	margin-inline: 0;
}

/* Product remove "×" — a real control, 44px target, quiet until hover. */
.woocommerce-cart .product-remove a.remove,
.woocommerce-cart-form .product-remove a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 1.75rem;
	block-size: 1.75rem;
	border-radius: var(--radius-full);
	color: var(--color-text-muted);
	font-size: var(--text-lg);
	line-height: 1;
	text-decoration: none;
	transition: background-color var(--dur-fast) var(--ease-standard),
		color var(--dur-fast) var(--ease-standard);
}
.woocommerce-cart .product-remove a.remove:hover {
	background: var(--color-error-surface);
	color: var(--color-error);
}

/* Actions row: coupon field + update-cart button. */
.woocommerce-cart .cart .actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding-block-start: var(--space-4);
}
.woocommerce-cart .cart .actions .coupon {
	display: flex;
	gap: var(--space-2);
	flex: 1 1 20rem;
}
.woocommerce-cart .cart .actions .coupon .input-text {
	flex: 1 1 auto;
	min-inline-size: 0;
}
.woocommerce-cart .cart .actions .button {
	min-block-size: var(--tap-target);
	padding-inline: var(--space-6);
	border-radius: var(--radius-md);
	font-weight: var(--fw-semibold);
	background: var(--color-surface-sunken);
	color: var(--color-text);
	border: 1px solid var(--color-border-strong);
	cursor: pointer;
}
.woocommerce-cart .cart .actions .coupon .button {
	background: var(--color-primary);
	color: var(--color-on-primary);
	border-color: transparent;
}
.woocommerce-cart .cart .actions button[name="update_cart"]:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

/* Proceed-to-checkout: the primary conversion CTA → accent, full width. */
.wc-proceed-to-checkout {
	margin-block-start: var(--space-5);
}
.wc-proceed-to-checkout a.checkout-button {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	min-block-size: calc(var(--tap-target) + 8px);
	padding-inline: var(--space-6);
	font-size: var(--text-base);
	font-weight: var(--fw-semibold);
	color: var(--color-on-accent);
	background: var(--color-accent);
	border-radius: var(--radius-md);
	text-decoration: none;
	transition: background-color var(--dur-fast) var(--ease-standard);
}
.wc-proceed-to-checkout a.checkout-button:hover {
	background: var(--color-accent-hover);
}

/* Cross-sells reuse the AKNB product grid; only the heading needs dressing. */
.cross-sells > h2 {
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	letter-spacing: var(--ls-tight);
	margin-block: var(--space-4) var(--space-6);
}

/* Empty cart state. */
.woocommerce-cart .cart-empty,
.woocommerce .wc-empty-cart-message {
	font-size: var(--text-lg);
	color: var(--color-text-secondary);
	text-align: center;
	margin-block: var(--space-10) var(--space-6);
}
.woocommerce-cart .return-to-shop {
	text-align: center;
	margin-block-end: var(--space-16);
}
.woocommerce-cart .return-to-shop .button {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--tap-target);
	padding-inline: var(--space-8);
	background: var(--color-primary);
	color: var(--color-on-primary);
	border-radius: var(--radius-md);
	font-weight: var(--fw-semibold);
	text-decoration: none;
}

/* Small reassurance block under the cart totals (rendered via hook, spec §18). */
.aknb-cart-reassure {
	margin-block-start: var(--space-4);
	padding: var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-surface-elevated);
	display: grid;
	gap: var(--space-3);
}
.aknb-cart-reassure__item {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
}
.aknb-cart-reassure__item > svg {
	flex: none;
	color: var(--color-accent);
	margin-block-start: 0.1em;
}

/* ===========================================================================
 * CHECKOUT — classic (shortcode) refinements (Phase 7)
 * ======================================================================== */
/* Coupon + login toggles sit above the form as quiet info notices. */
.woocommerce-checkout .woocommerce-form-login-toggle,
.woocommerce-checkout .woocommerce-form-coupon-toggle {
	margin-block-end: var(--space-5);
}
.checkout_coupon,
.woocommerce-form-login {
	margin-block-end: var(--space-6);
	padding: var(--space-5);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-surface-elevated);
}
.checkout_coupon .button,
.woocommerce-form-login .button {
	min-block-size: var(--tap-target);
	padding-inline: var(--space-6);
	background: var(--color-primary);
	color: var(--color-on-primary);
	border: 1px solid transparent;
	border-radius: var(--radius-md);
	font-weight: var(--fw-semibold);
	cursor: pointer;
}

/* Layout: customer details beside a sticky order-review panel. */
@media (min-width: 900px) {
	.woocommerce-checkout form.checkout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 24rem;
		gap: var(--space-10);
		align-items: start;
	}
	.woocommerce-checkout form.checkout #customer_details {
		grid-column: 1;
	}
	.woocommerce-checkout form.checkout #order_review_heading,
	.woocommerce-checkout form.checkout #order_review {
		grid-column: 2;
	}
	.woocommerce-checkout form.checkout #order_review {
		position: sticky;
		inset-block-start: calc(var(--header-height, 72px) + var(--space-4));
	}
}
#order_review_heading {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	margin-block-end: var(--space-4);
}

/* Payment methods. */
#payment {
	background: transparent;
}
#payment ul.payment_methods {
	list-style: none;
	margin: 0;
	padding: 0 0 var(--space-4);
	border-block-end: 1px solid var(--color-border);
	display: grid;
	gap: var(--space-2);
}
#payment ul.payment_methods li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
}
#payment ul.payment_methods li label {
	font-weight: var(--fw-medium);
}
#payment div.payment_box {
	flex: 1 1 100%;
	margin: var(--space-2) 0 0;
	padding: var(--space-4);
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
	background: var(--color-surface-sunken);
	border-radius: var(--radius-md);
}
#payment div.payment_box::before {
	display: none;
}
.woocommerce-terms-and-conditions-wrapper {
	margin-block: var(--space-4);
	font-size: var(--text-sm);
}

/* Checkout reassurance (rendered before payment via hook, spec §18). */
.aknb-checkout-trust {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin-block: var(--space-4);
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-md);
	background: var(--color-success-surface);
	color: var(--color-text);
	font-size: var(--text-sm);
}
.aknb-checkout-trust > svg {
	flex: none;
	color: var(--color-success);
}
.aknb-checkout-trust .aknb-payments {
	margin-inline-start: auto;
}

/* ===========================================================================
 * CART / CHECKOUT BLOCKS — align WooCommerce's block UI to the design system.
 * (Plain CSS only; no block JS is added — spec §47.) Container-scoped so we
 * out-specify the default wc-blocks-style without !important.
 * ======================================================================== */
.wp-block-woocommerce-cart .wc-block-components-title,
.wp-block-woocommerce-checkout .wc-block-components-title,
.wp-block-woocommerce-cart .wc-block-cart__totals-title,
.wp-block-woocommerce-checkout .wc-block-components-checkout-step__title {
	font-family: var(--font-display);
	letter-spacing: var(--ls-tight);
	color: var(--color-text);
}
.wp-block-woocommerce-cart .wc-block-components-product-name,
.wp-block-woocommerce-checkout .wc-block-components-product-name {
	color: var(--color-text);
	font-weight: var(--fw-medium);
	text-decoration: none;
}

/* The order-summary / totals sidebar becomes an elevated card. */
.wp-block-woocommerce-cart .wc-block-cart__sidebar .wc-block-components-sidebar,
.wp-block-woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-sidebar {
	padding: var(--space-6);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-surface-elevated);
}
.wp-block-woocommerce-cart .wc-block-components-totals-footer-item,
.wp-block-woocommerce-checkout .wc-block-components-totals-footer-item {
	font-weight: var(--fw-semibold);
}

/* Inputs: match the classic form-field tokens (44px target, focus ring). */
.wp-block-woocommerce-cart .wc-block-components-text-input input,
.wp-block-woocommerce-checkout .wc-block-components-text-input input,
.wp-block-woocommerce-checkout .wc-block-components-select select {
	min-block-size: var(--tap-target);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-md);
	color: var(--color-text);
	background: var(--color-surface);
}
.wp-block-woocommerce-cart .wc-block-components-text-input input:focus,
.wp-block-woocommerce-checkout .wc-block-components-text-input input:focus {
	outline: none;
	border-color: var(--color-focus);
	box-shadow: var(--focus-ring);
}

/* Primary CTAs (checkout / place order) → accent, matching the classic flow. */
.wp-block-woocommerce-cart .wc-block-cart__submit-button,
.wp-block-woocommerce-cart .wc-block-components-button.contained,
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-checkout .wc-block-components-button.contained {
	min-block-size: calc(var(--tap-target) + 8px);
	border-radius: var(--radius-md);
	font-weight: var(--fw-semibold);
	background: var(--color-accent);
	color: var(--color-on-accent);
}
.wp-block-woocommerce-cart .wc-block-components-button.contained:hover,
.wp-block-woocommerce-checkout .wc-block-components-button.contained:hover {
	background: var(--color-accent-hover);
}
.wp-block-woocommerce-cart .wc-block-components-button:focus-visible,
.wp-block-woocommerce-checkout .wc-block-components-button:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}
/* Links inside blocks pick up the brand link colour. */
.wp-block-woocommerce-cart a:not(.wc-block-components-button),
.wp-block-woocommerce-checkout a:not(.wc-block-components-button) {
	color: var(--color-link);
}

/* ===========================================================================
 * WISHLIST PAGE (spec §16, §23)
 * Styles live in components.css, not here: the wishlist is a normal WordPress
 * page (and a shortcode usable on any page), so it fails the is_woocommerce()
 * gate in inc/enqueue.php and this stylesheet never loads for it.
 * ======================================================================== */

/* ===========================================================================
 * ACCOUNT DASHBOARD (spec §23)
 * ======================================================================== */
.aknb-account-dash__welcome {
	margin-block-end: var(--space-8);
}
.aknb-account-dash__hello {
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	margin: 0 0 var(--space-1);
}
.aknb-account-dash__sub {
	color: var(--color-text-secondary);
	margin: 0;
}
.aknb-account-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-4);
	margin-block-end: var(--space-12);
}
@media (max-width: 560px) {
	.aknb-account-cards {
		grid-template-columns: 1fr;
	}
}
.aknb-account-card {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-5);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-surface);
	text-decoration: none;
	color: inherit;
	transition: border-color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.aknb-account-card:hover {
	border-color: var(--color-accent);
	transform: translateY(-2px);
}
.aknb-account-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;
	flex: none;
	border-radius: var(--radius-md);
	background: var(--color-surface-sunken);
	color: var(--color-accent);
}
.aknb-account-card__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.aknb-account-card__label {
	font-weight: var(--fw-semibold);
}
.aknb-account-card__text {
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
}
.aknb-account-card__chevron {
	margin-inline-start: auto;
	color: var(--color-text-muted);
	transition: transform var(--dur-fast) var(--ease-standard);
}
.aknb-account-card:hover .aknb-account-card__chevron {
	transform: translateX(3px);
	color: var(--color-accent);
}

/* Recent orders preview — real orders only (wc_get_orders). */
.aknb-order-list {
	list-style: none;
	margin: var(--space-4) 0 0;
	padding: 0;
	display: grid;
	gap: var(--space-3);
}
.aknb-order-list__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3) var(--space-5);
	padding: var(--space-4) var(--space-5);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-surface);
}
.aknb-order-list__main {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.aknb-order-list__id {
	font-weight: var(--fw-semibold);
	color: var(--color-text);
	text-decoration: none;
}
.aknb-order-list__id:hover {
	color: var(--color-accent);
}
.aknb-order-list__date {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}
.aknb-order-list__meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-inline-start: auto;
	text-align: end;
}
.aknb-order-list__total {
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
}
.aknb-order-list__view {
	flex: none;
}
.aknb-order-status {
	display: inline-flex;
	align-items: center;
	align-self: flex-end;
	padding: 2px var(--space-2);
	border-radius: var(--radius-full);
	font-size: var(--text-xs);
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	background: var(--color-surface-sunken);
	color: var(--color-text-secondary);
}
.aknb-order-status--completed {
	background: var(--color-success-surface);
	color: var(--color-success);
}
.aknb-order-status--processing,
.aknb-order-status--on-hold {
	background: var(--color-info-surface);
	color: var(--color-info);
}
.aknb-order-status--cancelled,
.aknb-order-status--failed {
	background: var(--color-error-surface);
	color: var(--color-error);
}
@media (max-width: 560px) {
	.aknb-order-list__meta {
		margin-inline-start: 0;
		text-align: start;
	}
	.aknb-order-list__view {
		margin-inline-start: auto;
	}
}

/* ===========================================================================
 * LOGIN / REGISTER (spec §23) — split card, native WC fields restyled
 * ======================================================================== */
.aknb-auth {
	display: grid;
	gap: var(--space-6);
	max-width: 34rem;
	margin-inline: auto;
	padding-block: var(--space-8) var(--space-16);
}
.aknb-auth--split {
	max-width: 62rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: start;
}
@media (max-width: 767.98px) {
	.aknb-auth--split {
		grid-template-columns: 1fr;
	}
}
.aknb-auth__panel {
	padding: var(--space-8);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-surface);
}
.aknb-auth__panel--register {
	background: var(--color-surface-sunken);
}
.aknb-auth__head {
	margin-block-end: var(--space-6);
}
.aknb-auth__title {
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	margin-block: var(--space-1) var(--space-2);
}
.aknb-auth__lead {
	color: var(--color-text-secondary);
	margin: 0;
}
.aknb-auth__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	margin-block: var(--space-4) var(--space-5);
}
.aknb-auth__lost {
	font-size: var(--text-sm);
	color: var(--color-link);
}
.aknb-auth__hint {
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
	margin-block: 0 var(--space-5);
}
.aknb-check {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-sm);
	cursor: pointer;
}
.aknb-check__input {
	inline-size: 1.15rem;
	block-size: 1.15rem;
	accent-color: var(--color-accent);
}
.aknb-form__actions {
	margin-block-start: var(--space-2);
}