/**
 * Component CSS, ported verbatim from the design system's example pages
 * and .card.html references as each block is built (Phase 4). Kept as its
 * own file, loaded after tokens/base, both on the frontend and in the
 * block editor iframe (see functions.php: wasded_editor_style_paths()).
 */

.wasded-container {
	max-width: var(--container-max-width);
	margin-inline: auto;
	padding-inline: var(--space-container-padding);
}

.wasded-header-fallback,
.wasded-footer-fallback {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: var(--space-4);
	border-bottom: 1px solid var(--border-hairline);
}

.wasded-wordmark {
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	font-size: var(--fs-display-sm);
	color: var(--text-primary) !important;
	text-decoration: none !important;
}

/* Button primitive — ported from Button.jsx. Reused by any block needing
   a CTA (AuthorCard follow, Post-Grid CTA, forms, etc.) instead of each
   block inventing its own button styling. */
.wasded-btn {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	box-sizing: border-box;
	gap: 8px;
	font-family: var(--font-body);
	font-weight: var(--fw-semibold);
	border-radius: var(--radius-control);
	cursor: pointer;
	transition: background var(--duration-fast) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard),
		color var(--duration-fast) var(--ease-standard);
	text-decoration: none !important;
	border: 1px solid transparent;
}

.wasded-btn--full { justify-content: center; width: 100%; }
.wasded-btn:disabled, .wasded-btn.is-disabled { cursor: not-allowed; opacity: 0.45; }

.wasded-btn--sm { padding: 6px 12px; font-size: 13px; min-height: 36px; }
.wasded-btn--md { padding: 9px 16px; font-size: 14px; min-height: 44px; }
.wasded-btn--lg { padding: 12px 20px; font-size: 15px; min-height: 50px; }

.wasded-btn--filled { background: var(--color-primary); color: var(--color-on-primary) !important; }
.wasded-btn--filled:hover { background: var(--color-primary-hover); }
.wasded-btn--filled:active { background: var(--color-primary-active); }

.wasded-btn--outline { background: transparent; color: var(--text-primary) !important; border-color: var(--border-hairline-strong); }
.wasded-btn--outline:hover { border-color: var(--color-primary); color: var(--color-primary) !important; }

.wasded-btn--ghost { background: transparent; color: var(--color-primary-hover) !important; border-color: transparent; }
.wasded-btn--ghost:hover { color: var(--color-primary) !important; }

.wasded-btn--cta { background: transparent; color: var(--color-primary-hover) !important; border-color: var(--color-primary); }
.wasded-btn--cta:hover { background: var(--accent-wash); border-color: var(--color-primary-hover); }

.wasded-btn--chip {
	background: var(--accent-wash-strong);
	color: var(--color-primary) !important;
	border-color: var(--color-accent);
	border-radius: var(--radius-chip);
	font-family: var(--font-mono);
	text-transform: uppercase;
	letter-spacing: var(--ls-label);
	font-weight: var(--fw-semibold);
}
.wasded-btn--chip:hover { background: var(--accent-wash); color: var(--color-primary-hover) !important; }

/* Table — reskins WordPress's native core/table block to match Table.jsx
   (component-tiering: primitives that map onto an existing core block get
   CSS here, not a new custom block). Striped rows on by default; scrolls
   horizontally on mobile instead of stacking. */
.wp-block-table {
	width: 100%;
	overflow-x: auto;
}

.wp-block-table table {
	width: 100%;
	min-width: 480px;
	border-collapse: collapse;
	font-family: var(--font-body);
}

.wp-block-table thead th {
	text-align: left;
	padding: 10px 12px;
	border-bottom: 1px solid var(--border-hairline-strong);
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: var(--ls-label-sm);
	text-transform: uppercase;
	color: var(--text-faint);
	font-weight: var(--fw-semibold);
}

.wp-block-table td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--border-hairline);
	font-size: 14px;
	color: var(--text-primary);
}

.wp-block-table tbody tr:nth-child(odd) {
	background: var(--bg-surface);
}

.wp-block-table tbody tr:hover {
	background: var(--bg-surface-2);
}

@media (max-width: 782px) {
	.wp-block-table {
		-webkit-overflow-scrolling: touch;
	}
}

/* Badge primitive — ported from Badge.jsx. Used for stock status,
   availability, order status, and anywhere else a small pill label
   appears (wasded_stock_status() pairs its 'state' with these classes). */
.wasded-badge {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	flex-shrink: 0;
	font-family: var(--font-mono);
	font-size: var(--fs-label-sm);
	letter-spacing: var(--ls-label-sm);
	text-transform: uppercase;
	font-weight: var(--fw-semibold);
	padding: 3px 8px;
	border-radius: var(--radius-chip);
	border: 1px solid;
}

.wasded-badge--neutral { background: var(--bg-surface-2); color: var(--text-secondary); border-color: var(--border-hairline); }
.wasded-badge--accent  { background: var(--accent-wash); color: var(--color-primary-hover); border-color: var(--color-accent); }
.wasded-badge--success { background: var(--success-wash); color: var(--color-success); border-color: var(--color-success); }
.wasded-badge--danger  { background: var(--danger-wash); color: var(--color-danger); border-color: var(--color-danger); }
.wasded-badge--warning { background: var(--warning-wash); color: var(--color-warning); border-color: var(--color-warning); }

/* Comment — reskins core WP comments (wasded_comment_callback in
   template-tags.php), ported from Comment.jsx. */
.wasded-comment {
	list-style: none;
	margin-bottom: var(--space-5);
}

.wasded-comment__row {
	display: flex;
	gap: 10px;
	font-family: var(--font-body);
	min-width: 0;
}

.wasded-comment__avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	flex-shrink: 0;
	background-color: var(--bg-surface-2);
	background-size: cover;
	background-position: center;
	border: 1px solid var(--border-hairline);
}

.wasded-comment__body {
	flex: 1;
	min-width: 0;
}

.wasded-comment__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 4px;
	flex-wrap: wrap;
}

.wasded-comment__author {
	font-size: 14px;
	font-weight: var(--fw-semibold);
	color: var(--text-primary);
}

.wasded-comment__date {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--text-faint);
}

.wasded-comment__text {
	font-size: 14px;
	color: var(--text-secondary);
	line-height: 1.55;
	margin-bottom: 6px;
}

.wasded-comment__text p:last-child {
	margin-bottom: 0;
}

.wasded-comment__reply a {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: var(--ls-label-sm);
	text-transform: uppercase;
	font-weight: var(--fw-semibold);
	color: var(--color-primary-hover) !important;
	text-decoration: none !important;
}

.wasded-comment__reply a:hover {
	color: var(--color-primary) !important;
}

/* Pagination — standalone numbered pagination, ported from Pagination.jsx.
   Shared by wasded_pagination_html() (page templates) and the
   wasded/pagination block. */
.wasded-pagination {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.wasded-pagination__nav-btn {
	background: none;
	border: 1px solid var(--border-hairline-strong);
	border-radius: var(--radius-control);
	padding: 6px 10px;
	cursor: pointer;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: var(--ls-label-sm);
	text-transform: uppercase;
	font-weight: var(--fw-semibold);
	color: var(--text-secondary) !important;
	text-decoration: none !important;
	display: inline-block;
}

.wasded-pagination__nav-btn.is-disabled {
	cursor: not-allowed;
	opacity: 0.4;
}

.wasded-pagination__page {
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-control);
	cursor: pointer;
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: var(--fw-semibold);
	background: transparent;
	color: var(--text-secondary) !important;
	text-decoration: none !important;
	border: 1px solid var(--border-hairline-strong);
	transition: background var(--duration-fast) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard);
}

.wasded-pagination__page:hover {
	border-color: var(--color-primary);
	color: var(--color-primary) !important;
}

.wasded-pagination__page.is-current {
	background: var(--color-primary);
	color: var(--color-on-primary) !important;
	border-color: var(--color-primary);
	cursor: default;
}

.wasded-pagination__ellipsis {
	color: var(--text-faint);
	font-family: var(--font-mono);
	font-size: 12px;
	padding: 0 4px;
}

/* StarRating — ported from StarRating.jsx (per-star SVG gradient fill). */
.wasded-star-rating {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-body);
}

.wasded-star-rating__stars {
	display: flex;
	gap: 2px;
}

.wasded-star-rating__count {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--text-faint);
}

/* ProductCard (vertical) — ported from ProductCard.jsx. Hardcoded Hover
   Rule: border/shadow lift, image-hover Examine scrim, info-panel
   Add-to-cart scrim are baked in, never exposed as block parameters. */
.wasded-product-card {
	background: var(--bg-surface);
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-card);
	overflow: hidden;
	box-shadow: var(--shadow-card-rest);
	transform: translateY(0);
	transition: transform var(--duration-base) var(--ease-standard),
		box-shadow var(--duration-base) var(--ease-standard),
		border-color var(--duration-base) var(--ease-standard);
	cursor: pointer;
	font-family: var(--font-body);
	position: relative;
}

.wasded-product-card:hover {
	border-color: var(--color-primary);
	box-shadow: var(--shadow-card-hover);
	transform: translateY(-3px);
}

.wasded-product-card__wishlist {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 3;
	width: 30px;
	height: 30px;
	border-radius: var(--radius-chip);
	background: var(--accent-wash);
	border: 1px solid var(--color-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--color-primary-hover);
	padding: 0;
}

.wasded-product-card__wishlist.is-active {
	background: var(--accent-wash-strong);
}

.wasded-product-card__wishlist.is-loading {
	opacity: 0.6;
	cursor: wait;
}

.wasded-product-card__media {
	display: block;
	aspect-ratio: 1 / 1;
	background: var(--bg-surface-2) center / cover no-repeat;
	position: relative;
}

.wasded-product-card__media:not([style*="background-image"]) {
	background-image: linear-gradient(135deg, var(--bg-surface-2) 0%, var(--bg-surface-3) 100%);
}

.wasded-product-card__media:not([style*="background-image"])::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A414B' stroke-width='1.5'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='m21 15-5-5L5 21'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 40px 40px;
	opacity: 0.5;
}

.wasded-product-card__tag {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
}

.wasded-product-card__examine {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--scrim-soft);
	opacity: 0;
	transition: opacity var(--duration-base) var(--ease-standard);
	cursor: pointer;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	font-weight: var(--fw-semibold);
	color: var(--color-on-scrim);
}

.wasded-product-card__media:hover .wasded-product-card__examine {
	opacity: 1;
}

.wasded-product-card__info {
	padding: var(--space-card-padding);
	position: relative;
}

.wasded-product-card__stock {
	display: block;
	width: 100%;
	box-sizing: border-box;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	font-weight: var(--fw-semibold);
	padding: 5px 10px;
	margin-bottom: 12px;
	border-radius: var(--radius-chip);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wasded-product-card__stock--in-stock {
	background: var(--success-wash);
	color: var(--color-success);
	border: 1px solid var(--color-success);
}

.wasded-product-card__stock--low-stock {
	background: var(--warning-wash);
	color: var(--color-warning);
	border: 1px solid var(--color-warning);
}

.wasded-product-card__stock--out-of-stock {
	background: var(--danger-wash);
	color: var(--color-danger);
	border: 1px solid var(--color-danger);
}

.wasded-product-card__title {
	display: block;
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	font-size: 1rem;
	line-height: 1.3;
	color: var(--text-primary) !important;
	margin-bottom: 8px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-decoration: none !important;
}

.wasded-product-card__rating {
	margin-bottom: 8px;
}

.wasded-product-card__price-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
}

.wasded-product-card__price {
	font-family: var(--font-mono);
	font-size: 17px;
	font-weight: var(--fw-bold);
	color: #fff;
}

.wasded-product-card__compare-at {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--text-faint);
	white-space: nowrap;
	flex-shrink: 0;
	text-decoration: line-through;
}

.wasded-product-card__add-to-cart {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--scrim-strong);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	opacity: 0;
	transition: opacity var(--duration-base) var(--ease-standard);
	cursor: pointer;
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	font-weight: var(--fw-semibold);
	color: var(--color-on-scrim);
	border: none;
	padding: 0;
}

.wasded-product-card__info:hover .wasded-product-card__add-to-cart {
	opacity: 1;
}

.wasded-product-card__add-to-cart.loading {
	opacity: 1;
}

@media (max-width: 640px) {
	.wasded-product-card__stock {
		font-size: 10px;
		padding: 4px 8px;
		margin-bottom: 8px;
	}
	.wasded-product-card__title {
		font-size: 0.75rem;
	}
	.wasded-product-card__price {
		font-size: 12px;
	}
	.wasded-product-card__compare-at {
		font-size: 10px;
	}
}

/* Checkbox / Radio — reskin real <input> elements to match Checkbox.jsx
   and Radio.jsx (custom control box, WordPress default browser widget
   hidden via appearance:none, so this stays keyboard/accessible). Used
   by ProductFilters (baked into Shop-Grid — primitives never appear in
   the block inserter on their own, see component-tiering rule). */
.wasded-filter-option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.wasded-filter-option__label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--text-primary);
}

.wasded-filter-option__input {
	appearance: none;
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	margin: 0;
	border-radius: var(--radius-control);
	border: 1px solid var(--border-hairline-strong);
	background: var(--bg-surface-2);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background var(--duration-fast) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard);
}

.wasded-filter-option__input[type="radio"] {
	border-radius: 50%;
}

.wasded-filter-option__input:checked {
	border-color: var(--color-primary);
	background: var(--color-primary);
}

.wasded-filter-option__input[type="radio"]:checked {
	background: var(--bg-surface-2);
}

.wasded-filter-option__input[type="radio"]:checked::after {
	content: '';
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--color-primary);
}

.wasded-filter-option__input[type="checkbox"]:checked::after {
	content: '';
	width: 12px;
	height: 12px;
	background: var(--color-on-primary);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.wasded-filter-option__count {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--text-faint);
}

.wasded-filters__section {
	padding-bottom: 18px;
	margin-bottom: 18px;
	border-bottom: 1px solid var(--border-hairline);
}

.wasded-filters__section:last-child {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.wasded-filters__section-label {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	font-weight: var(--fw-semibold);
	color: var(--text-faint);
	margin-bottom: 12px;
}

.wasded-filters__options {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.wasded-filters__price-input {
	width: 100%;
	accent-color: var(--color-primary);
}

.wasded-filters__price-value {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--text-secondary);
	margin-top: 6px;
}

.wasded-filters__clear {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	margin-top: 4px;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	font-weight: var(--fw-semibold);
	color: var(--color-primary-hover) !important;
	text-decoration: none !important;
}

.wasded-filters__clear:hover {
	color: var(--color-primary) !important;
}

/* ProductGallery — ported from ProductGallery.jsx. */
.wasded-product-gallery {
	font-family: var(--font-body);
}

.wasded-product-gallery--left {
	display: flex;
	gap: 10px;
}

.wasded-product-gallery__main {
	position: relative;
	flex: 1;
	min-width: 0;
	aspect-ratio: 1 / 1;
	border-radius: var(--radius-card);
	overflow: hidden;
	background: var(--bg-surface-2) center / cover no-repeat;
	border: 1px solid var(--border-hairline);
}

.wasded-product-gallery__main:not([style*="background-image"]) {
	background-image: linear-gradient(135deg, var(--bg-surface-2) 0%, var(--bg-surface-3) 100%);
}

.wasded-product-gallery__main:not([style*="background-image"])::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A414B' stroke-width='1.5'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='m21 15-5-5L5 21'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 64px 64px;
	opacity: 0.5;
}

.wasded-product-gallery__thumbs {
	display: flex;
	gap: 8px;
	margin-top: 10px;
	overflow-x: auto;
	padding-bottom: 2px;
}

.wasded-product-gallery__thumbs--left {
	flex-direction: column;
	margin-top: 0;
	overflow-y: auto;
	overflow-x: visible;
	max-height: 100%;
}

.wasded-product-gallery__thumb {
	width: 52px;
	height: 52px;
	flex-shrink: 0;
	border-radius: var(--radius-control);
	cursor: pointer;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	border: 2px solid var(--border-hairline);
	transition: border-color var(--duration-fast) var(--ease-standard);
	padding: 0;
}

.wasded-product-gallery__thumb.is-active {
	border-color: var(--color-primary);
}

/* QtyStepper — ported from QtyStepper.jsx; JS targets the real WC
   quantity <input> by name so add-to-cart/AJAX behavior stays native. */
.wasded-qty-stepper {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--border-hairline-strong);
	border-radius: var(--radius-control);
	overflow: hidden;
}

.wasded-qty-stepper__btn {
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	color: var(--text-secondary);
	cursor: pointer;
	font-size: 15px;
	font-family: var(--font-mono);
	padding: 0;
}

.wasded-qty-stepper__btn:disabled {
	cursor: not-allowed;
	opacity: 0.35;
}

.wasded-qty-stepper__value {
	width: 32px;
	text-align: center;
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: var(--fw-semibold);
	color: var(--text-primary);
}

/* Hide WooCommerce's native quantity input visually — it stays in the DOM
   (and in the form submission) since wasded_qty_stepper's JS writes to it.
   woocommerce_quantity_input() is the same shared helper on both the
   single-product Add-to-Cart form and the Cart page's line-item table,
   so wasded_render_qty_stepper() (inc/woocommerce-integration.php)
   already applies to both without extra wiring — this selector just
   needs to match both contexts. */
.woocommerce div.product form.cart div.quantity,
.woocommerce-cart-form .quantity {
	position: relative;
}

.woocommerce div.product form.cart div.quantity input.qty,
.woocommerce-cart-form .quantity input.qty {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

/* Product Tabs — no dedicated design-system component exists for this
   (only the generic Tabs.jsx primitive, used here as the styling
   reference: mono uppercase labels, 2px bottom-border active state).
   Reskins WooCommerce's own native tab markup/JS (jQuery UI tabs, via
   woocommerce_output_product_data_tabs()) rather than reimplementing tab
   switching, since WC's existing behavior already works correctly. */
.woocommerce-tabs ul.tabs,
.woocommerce-tabs ul.tabs.wc-tabs {
	display: flex;
	gap: 4px;
	list-style: none;
	margin: 0 0 var(--space-5);
	padding: 0;
	border-bottom: 1px solid var(--border-hairline);
}

.woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
}

.woocommerce-tabs ul.tabs li a {
	display: inline-block;
	background: none;
	border: none;
	cursor: pointer;
	padding: 10px 14px;
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	font-weight: var(--fw-semibold);
	color: var(--text-faint) !important;
	text-decoration: none !important;
	border-bottom: 2px solid transparent;
	transition: color var(--duration-fast) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard);
}

.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li.ui-tabs-active a {
	color: var(--color-primary-hover) !important;
	border-bottom-color: var(--color-primary);
}

.woocommerce-tabs .woocommerce-Tabs-panel {
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.6;
	color: var(--text-secondary);
}

.woocommerce-tabs .woocommerce-Tabs-panel h2 {
	font-family: var(--font-display);
	font-size: 18px;
	color: var(--text-primary);
	margin-bottom: var(--space-3);
}

.woocommerce-tabs table.shop_attributes {
	width: 100%;
	border-collapse: collapse;
}

.woocommerce-tabs table.shop_attributes th,
.woocommerce-tabs table.shop_attributes td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--border-hairline);
	font-size: 14px;
	text-align: left;
}

.woocommerce-tabs table.shop_attributes th {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: var(--ls-label-sm);
	text-transform: uppercase;
	color: var(--text-faint);
	font-weight: var(--fw-semibold);
	width: 30%;
}

/* Variation Selector — no dedicated design-system component exists (the
   master spec lists dropdown/swatch/button style options, but no JSX
   reference to build swatch/button from). Reskins WooCommerce's native
   <select> variation dropdowns to match design tokens; swatch/button
   variants are flagged as not built rather than guessed. */
.variations {
	width: 100%;
	margin-bottom: var(--space-5);
}

.variations td.label {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: var(--ls-label-sm);
	text-transform: uppercase;
	color: var(--text-faint);
	font-weight: var(--fw-semibold);
	padding-bottom: 8px;
	padding-right: 12px;
	vertical-align: top;
}

.variations td.value {
	padding-bottom: 8px;
}

.variations select {
	width: 100%;
	max-width: 320px;
	padding: 10px 12px;
	border-radius: var(--radius-control);
	border: 1px solid var(--border-hairline-strong);
	background: var(--bg-surface-2);
	color: var(--text-primary);
	font-family: var(--font-body);
	font-size: 14px;
}

.variations select:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.woocommerce-variation-price .price {
	font-family: var(--font-mono);
	font-weight: var(--fw-bold);
	color: var(--text-primary);
}

.woocommerce-variation-availability .stock {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: var(--ls-label-sm);
	text-transform: uppercase;
}

.woocommerce-variation-availability .stock.out-of-stock {
	color: var(--color-danger);
}

.woocommerce-variation-availability .stock.in-stock {
	color: var(--color-success);
}

.reset_variations {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: var(--ls-label-sm);
	text-transform: uppercase;
	color: var(--color-primary-hover) !important;
	margin-left: 10px;
}

/* Mini-Cart (Header sub-component) — no dedicated design-system source;
   built from real WC_Cart data, styled to match the rest of commerce.
   Live-updates via woocommerce_add_to_cart_fragments, see
   inc/woocommerce-integration.php. */
.wasded-mini-cart {
	position: relative;
}

.wasded-mini-cart__dropdown {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	width: 320px;
	max-width: calc(100vw - 32px);
	background: var(--bg-surface);
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card-hover);
	z-index: 50;
	padding: var(--space-card-padding);
	box-sizing: border-box;
}

.wasded-mini-cart__dropdown[hidden] {
	display: none;
}

.wasded-mini-cart__empty {
	text-align: center;
	padding: var(--space-4) 0;
}

.wasded-mini-cart__empty p {
	font-size: 14px;
	color: var(--text-secondary);
	margin-bottom: var(--space-4);
}

.wasded-mini-cart__items {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-height: 320px;
	overflow-y: auto;
	margin-bottom: var(--space-4);
}

.wasded-mini-cart__item {
	display: flex;
	align-items: center;
	gap: 10px;
	position: relative;
}

.wasded-mini-cart__item-image {
	width: 48px;
	height: 48px;
	flex-shrink: 0;
	border-radius: var(--radius-control);
	background: var(--bg-surface-2) center / cover no-repeat;
	border: 1px solid var(--border-hairline);
	display: block;
}

.wasded-mini-cart__item-image:not([style*="background-image"]) {
	background-image: linear-gradient(135deg, var(--bg-surface-2) 0%, var(--bg-surface-3) 100%);
}

.wasded-mini-cart__item-body {
	flex: 1;
	min-width: 0;
}

.wasded-mini-cart__item-name {
	display: block;
	font-size: 13px;
	font-weight: var(--fw-semibold);
	color: var(--text-primary) !important;
	text-decoration: none !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-bottom: 2px;
}

.wasded-mini-cart__item-meta {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--text-faint);
}

.wasded-mini-cart__item-remove {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-faint) !important;
	text-decoration: none !important;
	font-size: 16px;
	line-height: 1;
	border-radius: 50%;
}

.wasded-mini-cart__item-remove:hover {
	color: var(--color-danger) !important;
	background: var(--danger-wash);
}

.wasded-mini-cart__subtotal {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: var(--fw-semibold);
	color: var(--text-primary);
	padding-top: 12px;
	margin-bottom: var(--space-4);
	border-top: 1px solid var(--border-hairline);
}

.wasded-mini-cart__actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* AddressCard (My Account) — ported from AddressCard.jsx. */
.wasded-address-card {
	background: var(--bg-surface);
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-card);
	padding: var(--space-card-padding);
	font-family: var(--font-body);
}

.wasded-address-card__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}

.wasded-address-card__type {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: var(--ls-label-sm);
	text-transform: uppercase;
	color: var(--text-faint);
	font-weight: var(--fw-semibold);
}

.wasded-address-card__name {
	font-size: 15px;
	font-weight: var(--fw-semibold);
	color: var(--text-primary);
	margin-bottom: 4px;
}

.wasded-address-card__line {
	font-size: 14px;
	color: var(--text-secondary);
	line-height: 1.5;
}

.wasded-address-card__phone {
	font-size: 13px;
	color: var(--text-faint);
	margin-top: 8px;
}

/* OrderStatusBadge reuses .wasded-badge (see wasded_order_status_badge_html). */

/* DownloadItem (My Account Downloads tab) — ported from DownloadItem.jsx. */
.wasded-download-item {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 16px;
	width: 100%;
	box-sizing: border-box;
	padding: 14px 0;
	border-bottom: 1px solid var(--border-hairline);
	font-family: var(--font-body);
}

.wasded-download-item__info {
	flex: 1 1 200px;
	min-width: 0;
}

.wasded-download-item__product {
	font-size: 14px;
	font-weight: var(--fw-semibold);
	color: var(--text-primary);
}

.wasded-download-item__file {
	font-size: 12px;
	color: var(--text-faint);
	margin-top: 2px;
}

.wasded-download-item__meta {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--text-faint);
	flex: 0 0 140px;
}

/* AccountNav (My Account tab navigation) — ported from AccountNav.jsx. */
.wasded-account-nav {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.wasded-account-nav__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	box-sizing: border-box;
	text-align: left;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--radius-control);
	padding: 10px 12px;
	cursor: pointer;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: var(--fw-medium, 500);
	color: var(--text-secondary) !important;
	text-decoration: none !important;
	transition: background var(--duration-fast) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard);
}

.wasded-account-nav__item:hover {
	background: var(--bg-surface-2);
}

.wasded-account-nav__item.is-active {
	background: var(--accent-wash);
	border-color: var(--color-primary);
	color: var(--text-primary) !important;
	font-weight: var(--fw-semibold);
}

.wasded-account-nav__item.is-danger {
	color: var(--color-primary-hover) !important;
}

/* Empty State (system component) — no dedicated design-system source;
   one reusable layout parameterized per context (empty cart / no search
   results / empty category), per the master spec. */
.wasded-empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--space-6) var(--space-4);
	gap: var(--space-4);
}

.wasded-empty-state__image {
	max-width: 200px;
	height: auto;
}

.wasded-empty-state__message {
	font-size: 15px;
	color: var(--text-secondary);
	margin: 0;
}

/* ShareRow — ported from ShareRow.jsx. */
.wasded-share-row {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--font-body);
}

.wasded-share-row__label {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: var(--ls-label-sm);
	text-transform: uppercase;
	color: var(--text-faint);
}

.wasded-share-row__icons {
	display: flex;
	gap: 8px;
}

.wasded-share-row__icon {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bg-surface-2);
	border: 1px solid var(--border-hairline);
	color: var(--text-secondary) !important;
	cursor: pointer;
	text-decoration: none !important;
	transition: background var(--duration-fast) var(--ease-standard),
		color var(--duration-fast) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard);
}

.wasded-share-row__icon:hover {
	background: var(--accent-wash);
	border-color: var(--color-accent);
	color: var(--color-primary-hover) !important;
}

.wasded-share-row__icon.is-copied {
	background: var(--success-wash);
	border-color: var(--color-success);
	color: var(--color-success) !important;
}

/* ArchiveHeader — ported from ArchiveHeader.jsx. */
.wasded-archive-header {
	font-family: var(--font-body);
}

.wasded-archive-header__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

.wasded-archive-header__kicker {
	font-family: var(--font-mono);
	font-size: var(--fs-label-md);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	font-weight: var(--fw-semibold);
	padding: 5px 10px;
	border-radius: var(--radius-chip);
	background: var(--accent-wash);
	color: var(--color-primary-hover);
	border: 1px solid var(--color-accent);
}

.wasded-archive-header__count {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: var(--ls-label-sm);
	text-transform: uppercase;
	color: var(--text-faint);
}

.wasded-archive-header__title {
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	font-size: var(--fs-display-lg);
	color: var(--text-primary);
	line-height: 1.1;
	margin-bottom: 10px;
}

.wasded-archive-header__description {
	font-size: 16px;
	color: var(--text-secondary);
	line-height: 1.6;
	max-width: 640px;
}

/* Post-Sidebar — composition of already-built partials for the
   Post-Page / Category Archive default sidebar column. */
.wasded-post-sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

.wasded-post-sidebar__section {
	padding-bottom: var(--space-5);
	border-bottom: 1px solid var(--border-hairline);
}

.wasded-post-sidebar__section:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.wasded-post-sidebar__heading {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	font-weight: var(--fw-semibold);
	color: var(--text-faint);
	margin: 0 0 14px;
}

.wasded-post-sidebar__latest {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.wasded-post-sidebar__latest-item {
	display: flex;
	flex-direction: column;
	gap: 3px;
	text-decoration: none !important;
}

.wasded-post-sidebar__latest-title {
	font-size: 14px;
	font-weight: var(--fw-semibold);
	color: var(--text-primary) !important;
	line-height: 1.4;
}

.wasded-post-sidebar__latest-meta {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--text-faint) !important;
}

.wasded-post-sidebar__categories {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.wasded-post-sidebar__categories a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
	color: var(--text-secondary) !important;
	text-decoration: none !important;
	padding: 6px 0;
}

.wasded-post-sidebar__categories a:hover {
	color: var(--color-primary-hover) !important;
}

.wasded-post-sidebar__cat-count {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--text-faint);
}

.wasded-post-sidebar__ad {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 250px;
	background: var(--bg-surface-2);
	border: 1px dashed var(--border-hairline-strong);
	border-radius: var(--radius-card);
	position: relative;
}

.wasded-post-sidebar__ad-label {
	position: absolute;
	top: 8px;
	left: 8px;
	font-family: var(--font-mono);
	font-size: 9px;
	letter-spacing: var(--ls-label-sm);
	text-transform: uppercase;
	color: var(--text-faint);
}

/* Post-Page template layout. */
.wasded-post-page__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: var(--space-6);
	padding-block: var(--space-6);
}

.wasded-post-page__layout--no-sidebar {
	grid-template-columns: minmax(0, 720px);
	justify-content: center;
}

.wasded-post-page__article {
	min-width: 0;
}

.wasded-post-page__header {
	margin-bottom: var(--space-5);
}

.wasded-post-page__kicker {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	font-weight: var(--fw-semibold);
	padding: 5px 10px;
	margin-bottom: 14px;
	border-radius: var(--radius-chip);
	background: var(--accent-wash);
	color: var(--color-primary-hover) !important;
	border: 1px solid var(--color-accent);
	text-decoration: none !important;
}

.wasded-post-page__title {
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	font-size: var(--fs-display-lg);
	line-height: 1.15;
	color: var(--text-primary);
	margin: 0 0 16px;
}

.wasded-post-page__header-meta {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}

.wasded-post-page__featured-image {
	border-radius: var(--radius-card);
	overflow: hidden;
	margin-bottom: var(--space-6);
}

.wasded-post-page__featured-image img {
	width: 100%;
	height: auto;
	display: block;
}

.wasded-post-page__content {
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.7;
	color: var(--text-secondary);
	margin-bottom: var(--space-6);
}

.wasded-post-page__content p {
	margin: 0 0 1.4em;
}

.wasded-post-page__content h2,
.wasded-post-page__content h3 {
	font-family: var(--font-display);
	color: var(--text-primary);
	margin: 1.6em 0 0.7em;
}

.wasded-post-page__content img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-card);
}

.wasded-post-page__share {
	margin-bottom: var(--space-6);
	padding-bottom: var(--space-6);
	border-bottom: 1px solid var(--border-hairline);
}

@media (max-width: 980px) {
	.wasded-post-page__layout {
		grid-template-columns: 1fr;
	}
}

/* Comments (comments.php + wasded_comment_callback). */
.wasded-comments {
	margin-top: var(--space-6);
	padding-top: var(--space-6);
	border-top: 1px solid var(--border-hairline);
}

.wasded-comments__heading {
	font-family: var(--font-display);
	font-size: 20px;
	color: var(--text-primary);
	margin: 0 0 var(--space-5);
}

.wasded-comments__list {
	list-style: none;
	margin: 0 0 var(--space-5);
	padding: 0;
}

.wasded-comments__closed {
	font-size: 14px;
	color: var(--text-faint);
}

.wasded-comment-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 600px;
}

.wasded-comment-form__textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	border-radius: var(--radius-control);
	border: 1px solid var(--border-hairline-strong);
	background: var(--bg-surface-2);
	color: var(--text-primary);
	font-family: var(--font-body);
	font-size: 14px;
	resize: vertical;
}

.wasded-comment-form p.comment-notes,
.wasded-comment-form p.logged-in-as {
	font-size: 13px;
	color: var(--text-faint);
	margin: 0;
}

.wasded-comment-form input[type="text"],
.wasded-comment-form input[type="email"],
.wasded-comment-form input[type="url"] {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border-radius: var(--radius-control);
	border: 1px solid var(--border-hairline-strong);
	background: var(--bg-surface-2);
	color: var(--text-primary);
	font-family: var(--font-body);
	font-size: 14px;
}

/* Front page — spacing between stacked section blocks. Each block
   already handles its own internal layout; this just adds consistent
   vertical rhythm and container width between sections. Dynamic blocks
   rendered via render.php have no automatic wp-block-* wrapper (that
   only happens with get_block_wrapper_attributes(), which none of these
   render.php files call) — so these selectors target each block's own
   real root class instead. */
.wasded-front-page > * {
	max-width: var(--container-max-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--space-container-padding);
	padding-right: var(--space-container-padding);
	margin-top: var(--space-6);
	margin-bottom: var(--space-6);
	box-sizing: border-box;
}

.wasded-front-page > .wasded-ticker,
.wasded-front-page > .wasded-hero-slider {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
	margin-top: 0;
}

.wasded-front-page > .wasded-hero-slider {
	margin-bottom: var(--space-6);
}

/* Category Archive template layout. */
.wasded-category-archive__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: var(--space-6);
	padding-block: var(--space-6);
}

.wasded-category-archive__main {
	min-width: 0;
}

.wasded-category-archive__pagination {
	display: flex;
	justify-content: center;
	margin-top: var(--space-6);
}

@media (max-width: 980px) {
	.wasded-category-archive__layout {
		grid-template-columns: 1fr;
	}
}

/* Products Archive template — the Shop-Grid block handles its own
   layout; this just positions the Hotjar analytics-probe button that
   coexists alongside it (Analytics Instrumentation Rule). */
.wasded-products-archive__hotjar-probe {
	display: flex;
	justify-content: center;
	margin-top: var(--space-6);
}

/* Single Product template — spacing for the Related/Upsell CommerceSlider
   sections that replace WooCommerce's default output. */
.wasded-product-commerce-slider-section {
	margin-top: var(--space-8);
}

/* Cart page — CSS reskin of WooCommerce's native cart form (same
   approach as Product Tabs/Variation Selector): the real coupon-apply,
   quantity-update, and shipping-calculator logic all stay WC's own, only
   restyled to match design tokens. QtyStepper already applies here for
   free since woocommerce_quantity_input() is the same shared helper used
   on the single-product Add-to-Cart form (see the input-hiding rule
   above). */
.woocommerce-cart-form {
	font-family: var(--font-body);
	width: 100%;
}

.woocommerce-cart-form table.shop_table {
	width: 100%;
	border-collapse: collapse;
}

.woocommerce-cart-form table.shop_table thead th {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: var(--ls-label-sm);
	text-transform: uppercase;
	color: var(--text-faint);
	font-weight: var(--fw-semibold);
	text-align: left;
	padding: 10px 12px;
	border-bottom: 1px solid var(--border-hairline-strong);
}

.woocommerce-cart-form table.shop_table td {
	padding: 16px 12px;
	border-bottom: 1px solid var(--border-hairline);
	vertical-align: middle;
}

.woocommerce-cart-form .product-thumbnail img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: var(--radius-control);
	border: 1px solid var(--border-hairline);
}

.wasded-cart-thumb-placeholder {
	width: 64px;
	height: 64px;
	border-radius: var(--radius-control);
	border: 1px solid var(--border-hairline);
	background: linear-gradient(135deg, var(--bg-surface-2) 0%, var(--bg-surface-3) 100%);
	position: relative;
}

.wasded-cart-thumb-placeholder::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A414B' stroke-width='1.5'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='m21 15-5-5L5 21'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 26px 26px;
	opacity: 0.5;
}

.woocommerce-cart-form .product-name a {
	font-size: 14px;
	font-weight: var(--fw-semibold);
	color: var(--text-primary) !important;
	text-decoration: none !important;
}

.woocommerce-cart-form .product-price,
.woocommerce-cart-form .product-subtotal {
	font-family: var(--font-mono);
	font-size: 14px;
	color: var(--text-primary);
	white-space: nowrap;
}

.woocommerce-cart-form .product-remove a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	color: var(--text-faint) !important;
	text-decoration: none !important;
	font-size: 18px;
}

.woocommerce-cart-form .product-remove a:hover {
	color: var(--color-danger) !important;
	background: var(--danger-wash);
}

.woocommerce-cart-form .coupon {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
	margin-top: var(--space-5);
}

.woocommerce-cart-form .coupon input#coupon_code {
	padding: 10px 12px;
	border-radius: var(--radius-control);
	border: 1px solid var(--border-hairline-strong);
	background: var(--bg-surface-2);
	color: var(--text-primary);
	font-family: var(--font-body);
	font-size: 14px;
}

.woocommerce-cart-form .coupon button,
.woocommerce-cart-form > .actions button[name="update_cart"] {
	font-family: var(--font-body);
	font-weight: var(--fw-semibold);
	font-size: 13px;
	padding: 10px 18px;
	border-radius: var(--radius-control);
	border: 1px solid var(--border-hairline-strong);
	background: transparent;
	color: var(--text-primary);
	cursor: pointer;
}

.cart-collaterals {
	margin-top: var(--space-6);
	display: flex;
	justify-content: flex-end;
}

.cart-collaterals .cart_totals {
	width: 100%;
	max-width: 380px;
	background: var(--bg-surface);
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-card);
	padding: var(--space-card-padding);
	box-sizing: border-box;
}

.cart_totals h2 {
	font-family: var(--font-display);
	font-size: 18px;
	color: var(--text-primary);
	margin: 0 0 var(--space-4);
}

.cart_totals table.shop_table {
	width: 100%;
	border-collapse: collapse;
}

.cart_totals table.shop_table th,
.cart_totals table.shop_table td {
	padding: 10px 0;
	border-bottom: 1px solid var(--border-hairline);
	font-size: 14px;
	text-align: left;
}

.cart_totals table.shop_table th {
	color: var(--text-faint);
	font-weight: var(--fw-medium, 500);
	width: 40%;
}

.cart_totals .order-total td {
	font-family: var(--font-mono);
	font-weight: var(--fw-bold);
	font-size: 16px;
	color: var(--text-primary);
	border-bottom: none;
}

.wc-proceed-to-checkout a.checkout-button {
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	padding: 14px 24px;
	margin-top: var(--space-4);
	border-radius: var(--radius-control);
	background: var(--color-primary);
	color: var(--color-on-scrim) !important;
	font-family: var(--font-body);
	font-weight: var(--fw-semibold);
	text-decoration: none !important;
}

.wc-proceed-to-checkout a.checkout-button:hover {
	background: var(--color-primary-hover);
}

.woocommerce-shipping-calculator .shipping-calculator-button {
	font-size: 13px;
	color: var(--color-primary-hover) !important;
	text-decoration: none !important;
}

.woocommerce-shipping-calculator .shipping-calculator-form {
	margin-top: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.woocommerce-shipping-calculator .shipping-calculator-form select,
.woocommerce-shipping-calculator .shipping-calculator-form input {
	padding: 8px 10px;
	border-radius: var(--radius-control);
	border: 1px solid var(--border-hairline-strong);
	background: var(--bg-surface-2);
	color: var(--text-primary);
	font-family: var(--font-body);
	font-size: 13px;
}

/* Cross-sells (Cart page) — CSS-reskinned native WC output rather than
   CommerceSlider, since CommerceSlider sources from a single "current
   product" context (Single Product page) whereas cart cross-sells
   aggregate across every item currently in the cart — a different query
   shape the component isn't built for. Flagged rather than force-fit. */
.cross-sells {
	margin-top: var(--space-8);
}

.cross-sells h2 {
	font-family: var(--font-display);
	font-size: 18px;
	color: var(--text-primary);
	margin-bottom: var(--space-5);
}

.cross-sells ul.products {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-5);
}

/* CheckoutSteps — ported from CheckoutSteps.jsx. */
.wasded-checkout-steps {
	display: flex;
	align-items: center;
	width: 100%;
	box-sizing: border-box;
	font-family: var(--font-body);
	overflow-x: auto;
	padding-bottom: 2px;
	margin-bottom: var(--space-6);
}

.wasded-checkout-steps__step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

.wasded-checkout-steps__circle {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: var(--fw-bold);
	background: var(--bg-surface-2);
	color: var(--text-faint);
	border: 1px solid var(--border-hairline-strong);
}

.wasded-checkout-steps__step.is-done .wasded-checkout-steps__circle,
.wasded-checkout-steps__step.is-active .wasded-checkout-steps__circle {
	background: var(--color-primary);
	color: var(--color-on-scrim);
	border-color: var(--color-primary);
}

.wasded-checkout-steps__label {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: var(--ls-label-sm);
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--text-faint);
}

.wasded-checkout-steps__step.is-active .wasded-checkout-steps__label {
	color: var(--color-primary-hover);
}

.wasded-checkout-steps__step.is-done .wasded-checkout-steps__label {
	color: var(--text-primary);
}

.wasded-checkout-steps__connector {
	flex: 1 0 24px;
	height: 1px;
	background: var(--border-hairline-strong);
	margin: 0 8px;
	margin-bottom: 18px;
}

.wasded-checkout-steps__connector.is-done {
	background: var(--color-primary);
}

/* Checkout wizard sections + reskin of WooCommerce's native checkout
   form fields (billing/shipping inputs, order review table, payment
   method tabs, place-order button). The real field rendering, AJAX
   totals update, and order submission are all untouched — see
   inc/woocommerce-integration.php's doc comment. */
.wasded-checkout-step__actions {
	display: flex;
	justify-content: flex-end;
	margin: var(--space-5) 0;
}

.woocommerce-checkout #customer_details {
	display: flex;
	gap: var(--space-6);
	font-family: var(--font-body);
}

.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
	flex: 1;
	min-width: 0;
}

.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout #order_review_heading {
	font-family: var(--font-display);
	font-size: 18px;
	color: var(--text-primary);
	margin: 0 0 var(--space-4);
}

.woocommerce-checkout .form-row label {
	display: block;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: var(--ls-label-sm);
	text-transform: uppercase;
	color: var(--text-faint);
	margin-bottom: 6px;
}

.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border-radius: var(--radius-control);
	border: 1px solid var(--border-hairline-strong);
	background: var(--bg-surface-2);
	color: var(--text-primary);
	font-family: var(--font-body);
	font-size: 14px;
}

.woocommerce-checkout table.shop_table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--space-5);
}

.woocommerce-checkout table.shop_table th,
.woocommerce-checkout table.shop_table td {
	padding: 10px 0;
	border-bottom: 1px solid var(--border-hairline);
	font-size: 14px;
	text-align: left;
}

.woocommerce-checkout #payment {
	background: var(--bg-surface);
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-card);
	padding: var(--space-card-padding);
}

.woocommerce-checkout #payment ul.payment_methods {
	list-style: none;
	margin: 0 0 var(--space-4);
	padding: 0;
}

.woocommerce-checkout #payment ul.payment_methods li {
	padding: 10px 0;
	border-bottom: 1px solid var(--border-hairline);
	font-size: 14px;
}

.woocommerce-checkout #place_order {
	width: 100%;
	box-sizing: border-box;
	padding: 14px 24px;
	border-radius: var(--radius-control);
	border: none;
	background: var(--color-primary);
	color: var(--color-on-scrim) !important;
	font-family: var(--font-body);
	font-weight: var(--fw-semibold);
	font-size: 15px;
	cursor: pointer;
}

.woocommerce-checkout #place_order:hover {
	background: var(--color-primary-hover);
}

@media (max-width: 782px) {
	.woocommerce-checkout #customer_details {
		flex-direction: column;
	}
}

@media (max-width: 782px) {
	.woocommerce-cart-form table.shop_table thead {
		display: none;
	}
	.woocommerce-cart-form table.shop_table,
	.woocommerce-cart-form table.shop_table tbody,
	.woocommerce-cart-form table.shop_table tr,
	.woocommerce-cart-form table.shop_table td {
		display: block;
		width: 100%;
	}
	.cross-sells ul.products {
		grid-template-columns: 1fr;
	}
}

/* Order Confirmation — no design-system source, built from tokens per
   the master spec's Example-Page Fidelity Rule exception for this
   template. Real order data via $order (WooCommerce). */
.wasded-order-confirmation {
	max-width: 640px;
	margin: 0 auto;
	padding: var(--space-8) var(--space-4);
	font-family: var(--font-body);
}

.wasded-order-confirmation__header {
	text-align: center;
	margin-bottom: var(--space-6);
}

.wasded-order-confirmation__check {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--success-wash);
	color: var(--color-success);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto var(--space-4);
}

.wasded-order-confirmation__title {
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	font-size: 28px;
	color: var(--text-primary);
	margin: 0 0 10px;
}

.wasded-order-confirmation__subtitle {
	font-size: 15px;
	color: var(--text-secondary);
	line-height: 1.6;
	max-width: 460px;
	margin: 0 auto;
}

.wasded-order-confirmation__overview {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-4);
	background: var(--bg-surface);
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-card);
	padding: var(--space-card-padding);
	margin-bottom: var(--space-6);
}

.wasded-order-confirmation__overview-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.wasded-order-confirmation__overview-label {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: var(--ls-label-sm);
	text-transform: uppercase;
	color: var(--text-faint);
}

.wasded-order-confirmation__overview-value {
	font-size: 14px;
	font-weight: var(--fw-semibold);
	color: var(--text-primary);
}

.wasded-order-confirmation__overview-value--total {
	font-family: var(--font-mono);
	font-size: 18px;
}

.wasded-order-confirmation__section-heading {
	font-family: var(--font-display);
	font-size: 16px;
	color: var(--text-primary);
	margin: 0 0 var(--space-4);
}

.wasded-order-confirmation__items {
	margin-bottom: var(--space-6);
}

.wasded-order-confirmation__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--border-hairline);
}

.wasded-order-confirmation__item-image {
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: var(--radius-control);
	border: 1px solid var(--border-hairline);
}

.wasded-order-confirmation__item-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.wasded-order-confirmation__item-name {
	font-size: 14px;
	font-weight: var(--fw-semibold);
	color: var(--text-primary);
}

.wasded-order-confirmation__item-qty {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--text-faint);
}

.wasded-order-confirmation__item-price {
	font-family: var(--font-mono);
	font-size: 14px;
	color: var(--text-primary);
	white-space: nowrap;
}

.wasded-order-confirmation__next-steps {
	background: var(--bg-surface-2);
	border-radius: var(--radius-card);
	padding: var(--space-card-padding);
	margin-bottom: var(--space-6);
}

.wasded-order-confirmation__next-steps p {
	font-size: 14px;
	color: var(--text-secondary);
	line-height: 1.6;
	margin: 0;
}

.wasded-order-confirmation__actions {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}

.wasded-order-confirmation__failed {
	text-align: center;
	background: var(--danger-wash);
	border: 1px solid var(--color-danger);
	border-radius: var(--radius-card);
	padding: var(--space-card-padding);
}

.wasded-order-confirmation__failed p {
	color: var(--text-primary);
	margin-bottom: var(--space-4);
}

@media (max-width: 640px) {
	.wasded-order-confirmation__overview {
		grid-template-columns: 1fr;
	}
}

/* Search Results — reuses Archive/Shop-Grid grid classes and card
   partials directly (per the master spec: "inherits Archive.html's
   visual style"); this just adds spacing between the two independently-
   queried Article/Shop sections. */
.wasded-search-results__section {
	margin-top: var(--space-8);
}

.wasded-search-results__section:first-of-type {
	margin-top: var(--space-6);
}

/* My Account — two-column layout (nav + content), plus reskin of the
   remaining native WC tables/sections not already covered by the
   AccountNav/AddressCard/DownloadItem/OrderStatusBadge partials. */
.wasded-my-account {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: var(--space-6);
	max-width: var(--container-max-width);
	margin: 0 auto;
	padding: var(--space-6) var(--space-container-padding);
	box-sizing: border-box;
	font-family: var(--font-body);
}

.wasded-my-account__nav {
	position: sticky;
	top: var(--space-5);
	align-self: start;
}

.wasded-my-account__content {
	min-width: 0;
}

.wasded-my-account__content h2,
.wasded-my-account__content h3 {
	font-family: var(--font-display);
	font-size: 18px;
	color: var(--text-primary);
	margin: 0 0 var(--space-4);
}

.wasded-download-list {
	display: flex;
	flex-direction: column;
}

.wasded-address-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-5);
	margin-top: var(--space-4);
}

.wasded-address-card--empty {
	background: var(--bg-surface-2);
	border: 1px dashed var(--border-hairline-strong);
	border-radius: var(--radius-card);
	padding: var(--space-card-padding);
}

.wasded-address-card__empty-text {
	font-size: 13px;
	color: var(--text-faint);
	margin: 0;
}

.woocommerce-orders-table.shop_table {
	width: 100%;
	border-collapse: collapse;
}

.woocommerce-orders-table.shop_table th,
.woocommerce-orders-table.shop_table td {
	padding: 12px 10px;
	border-bottom: 1px solid var(--border-hairline);
	text-align: left;
	font-size: 14px;
}

.woocommerce-orders-table.shop_table th {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: var(--ls-label-sm);
	text-transform: uppercase;
	color: var(--text-faint);
}

.woocommerce-MyAccount-content form .form-row label {
	display: block;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: var(--ls-label-sm);
	text-transform: uppercase;
	color: var(--text-faint);
	margin-bottom: 6px;
}

.woocommerce-MyAccount-content form .form-row input.input-text,
.woocommerce-MyAccount-content form .form-row select {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border-radius: var(--radius-control);
	border: 1px solid var(--border-hairline-strong);
	background: var(--bg-surface-2);
	color: var(--text-primary);
	font-family: var(--font-body);
	font-size: 14px;
}

.woocommerce-MyAccount-content button[type="submit"] {
	padding: 12px 24px;
	border-radius: var(--radius-control);
	border: none;
	background: var(--color-primary);
	color: var(--color-on-scrim);
	font-family: var(--font-body);
	font-weight: var(--fw-semibold);
	cursor: pointer;
}

@media (max-width: 782px) {
	.wasded-my-account {
		grid-template-columns: 1fr;
	}
	.wasded-my-account__nav {
		position: static;
	}
	.wasded-address-grid {
		grid-template-columns: 1fr;
	}
}

/* AuthTabs (Login/Register/Password Reset) — ported from AuthTabs.jsx
   and Input.jsx, reskinning WooCommerce's real login/register/lost-
   password forms (myaccount/form-login.php, form-lost-password.php).
   Field markup, nonces, and submit handling are all WC's own untouched
   output — see inc/woocommerce-integration.php's wrapper hooks. */
.wasded-auth-tabs-wrapper {
	max-width: 420px;
	margin: 0 auto;
	padding: var(--space-8) var(--space-4);
	font-family: var(--font-body);
}

.wasded-auth-tabs {
	display: flex;
	margin-bottom: var(--space-6);
	border-bottom: 1px solid var(--border-hairline);
}

.wasded-auth-tabs__tab {
	flex: 1;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0 0 14px;
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	font-weight: var(--fw-semibold);
	color: var(--text-faint);
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	transition: color var(--duration-fast) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard);
}

.wasded-auth-tabs__tab.is-active {
	color: var(--color-primary-hover);
	border-bottom-color: var(--color-primary);
}

.wasded-auth-tabs-wrapper #customer_login {
	display: block;
}

.wasded-auth-tabs-wrapper #customer_login .u-column1,
.wasded-auth-tabs-wrapper #customer_login .u-column2 {
	width: 100%;
	float: none;
}

.wasded-auth-tabs-wrapper #customer_login .u-column2 {
	display: none;
}

.wasded-auth-tabs-wrapper #customer_login.wasded-auth-show-register .u-column1 {
	display: none;
}

.wasded-auth-tabs-wrapper #customer_login.wasded-auth-show-register .u-column2 {
	display: block;
}

.wasded-auth-tabs-wrapper h2 {
	display: none;
}

.wasded-auth-reset__title {
	font-family: var(--font-display);
	font-size: 22px;
	color: var(--text-primary);
	margin: 0 0 8px;
	text-align: center;
}

.wasded-auth-tabs-wrapper .woocommerce-form-row label {
	display: block;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: var(--ls-label-sm);
	text-transform: uppercase;
	color: var(--text-faint);
	margin-bottom: 6px;
}

.wasded-auth-tabs-wrapper .woocommerce-form-row label .required {
	color: var(--color-danger);
}

.wasded-auth-tabs-wrapper .woocommerce-form-row .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

.wasded-auth-tabs-wrapper input.input-text {
	width: 100%;
	box-sizing: border-box;
	padding: 9px 12px;
	border-radius: var(--radius-control);
	border: 1px solid var(--border-hairline-strong);
	background: var(--bg-surface-2);
	color: var(--text-primary);
	font-family: var(--font-body);
	font-size: 16px;
}

.wasded-auth-tabs-wrapper input.input-text:focus {
	outline: none;
	border-color: var(--color-primary-hover);
	box-shadow: var(--shadow-focus);
}

.wasded-auth-tabs-wrapper .woocommerce-form-login__rememberme {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--text-secondary);
	cursor: pointer;
}

.wasded-auth-tabs-wrapper p.form-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: var(--space-4);
}

.wasded-auth-tabs-wrapper .woocommerce-LostPassword {
	width: 100%;
	text-align: center;
	margin-top: var(--space-4);
}

.wasded-auth-tabs-wrapper .woocommerce-LostPassword a,
.wasded-auth-reset__back a {
	font-size: 13px;
	color: var(--color-primary-hover) !important;
	text-decoration: none !important;
}

.wasded-auth-tabs-wrapper button.woocommerce-button,
.wasded-auth-tabs-wrapper button.woocommerce-Button {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 24px;
	border-radius: var(--radius-control);
	border: none;
	background: var(--color-primary);
	color: var(--color-on-scrim);
	font-family: var(--font-body);
	font-weight: var(--fw-semibold);
	font-size: 15px;
	cursor: pointer;
}

.wasded-auth-tabs-wrapper button.woocommerce-button:hover,
.wasded-auth-tabs-wrapper button.woocommerce-Button:hover {
	background: var(--color-primary-hover);
}

.wasded-auth-reset__back {
	text-align: center;
	margin-top: var(--space-5);
}

/* Cart page title + continue-shopping link — matches the "Your cart" H1
   and ghost "Continue shopping" link shown in the Cart.html reference,
   which was missing from the initial build. */
.wasded-cart__title {
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	font-size: clamp(28px, 3vw, 36px);
	color: var(--text-primary);
	margin: 0 0 var(--space-6);
}

.wasded-cart__continue-shopping {
	text-align: center;
	margin-top: var(--space-4);
}

/* WooCommerce notices (added-to-cart, coupon errors, info messages) —
   these render via wc_print_notices() ahead of page content on any WC
   template and previously fell back to WC's own plain light-mode
   styling, clashing badly with the dark theme. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	list-style: none;
	margin: 0 0 var(--space-5);
	padding: 14px 20px;
	border-radius: var(--radius-control);
	font-family: var(--font-body);
	font-size: 14px;
	background: var(--bg-surface);
	border: 1px solid var(--border-hairline-strong);
	color: var(--text-primary);
}

.woocommerce-message {
	border-color: var(--color-success);
	background: var(--success-wash);
}

.woocommerce-error {
	border-color: var(--color-danger);
	background: var(--danger-wash);
}

.woocommerce-error li {
	list-style: none;
	margin: 0;
}

.woocommerce-message .button,
.woocommerce-info .button {
	order: 2;
	padding: 8px 16px;
	border-radius: var(--radius-control);
	border: 1px solid var(--border-hairline-strong);
	background: transparent;
	color: var(--text-primary);
	font-family: var(--font-body);
	font-size: 13px;
	text-decoration: none !important;
	white-space: nowrap;
}

.woocommerce-message .button:hover,
.woocommerce-info .button:hover {
	background: var(--bg-surface-2);
}
/* ArticleCard, ScoreBadge, Byline, Pagination — moved here from
   blocks/post-grid/style.css. These are genuinely shared partials
   (wasded_article_card_html(), wasded_score_badge_html(),
   wasded_byline_html(), wasded_pagination_html()) called directly by
   category.php, search.php, and single.php outside any Post-Grid
   block context. Block-specific stylesheets only load when that
   block actually renders on the page, so these were silently
   unstyled everywhere except pages that also happened to render a
   Post-Grid block — a real, previously undetected bug. Also fixes
   the ScoreBadge tone class, which template-tags.php was emitting
   as two separate classes instead of matching this selector. */
/* ArticleCard — ported verbatim from ArticleCard.jsx, hover states baked
   in per the Hardcoded Hover Rule (never exposed as parameters). */
.wasded-article-card {
	display: block;
	background: var(--bg-surface);
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-card);
	overflow: hidden;
	box-shadow: var(--shadow-card-rest);
	transform: translateY(0);
	transition: transform var(--duration-base) var(--ease-standard),
		box-shadow var(--duration-base) var(--ease-standard),
		border-color var(--duration-base) var(--ease-standard);
	cursor: pointer;
	font-family: var(--font-body);
	text-decoration: none !important;
	color: inherit;
}

.wasded-article-card:hover {
	border-color: var(--color-primary);
	box-shadow: var(--shadow-card-hover);
	transform: translateY(-3px);
}

.wasded-article-card__media {
	position: relative;
	background-size: cover;
	background-position: center;
	background-color: var(--bg-surface-2);
}

.wasded-article-card__media:not([style*="background-image"]) {
	background-image: linear-gradient(135deg, var(--bg-surface-2) 0%, var(--bg-surface-3) 100%);
}

.wasded-article-card__media:not([style*="background-image"])::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A414B' stroke-width='1.5'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='m21 15-5-5L5 21'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 40px 40px;
	opacity: 0.5;
}

.wasded-article-card__score {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
}

.wasded-article-card__read-scrim {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--scrim-soft);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	opacity: 0;
	transition: opacity var(--duration-base) var(--ease-standard);
	pointer-events: none;
	font-family: var(--font-mono);
	font-size: 13px;
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	font-weight: var(--fw-semibold);
	color: var(--color-on-scrim);
}

.wasded-article-card__media:hover .wasded-article-card__read-scrim {
	opacity: 1;
}

.wasded-article-card__body {
	padding: var(--space-card-padding);
}

.wasded-article-card__chip {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: var(--fs-label-md);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	font-weight: var(--fw-semibold);
	padding: 5px 10px;
	margin-bottom: 12px;
	border-radius: var(--radius-chip);
	background: var(--accent-wash);
	color: var(--color-primary-hover);
	border: 1px solid var(--color-accent);
}

.wasded-article-card__title {
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	font-size: 1.125rem;
	line-height: 1.3;
	color: var(--text-primary);
	margin-bottom: 6px;
	height: 2.6em;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	text-overflow: ellipsis;
}

.wasded-article-card__excerpt {
	font-size: 14px;
	color: var(--text-secondary);
	line-height: 1.5;
	margin-bottom: 10px;
	height: 4.5em;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	text-overflow: ellipsis;
}

.wasded-article-card__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: var(--ls-label-sm);
	text-transform: uppercase;
}

.wasded-article-card__meta span:first-child {
	color: var(--text-faint);
}

.wasded-article-card__meta span:last-child {
	color: var(--color-primary-hover);
	font-weight: var(--fw-semibold);
}

/* ScoreBadge — ported from ScoreBadge.jsx */
.wasded-score-badge {
	width: 40px;
	height: 40px;
	border-radius: var(--radius-control);
	background: var(--bg-surface-2);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-family: var(--font-mono);
	border: 1px solid;
}
.wasded-score-badge--is-success { border-color: var(--color-success); color: var(--color-success); }
.wasded-score-badge--is-warning { border-color: var(--color-warning); color: var(--color-warning); }
.wasded-score-badge--is-danger { border-color: var(--color-danger); color: var(--color-danger); }
.wasded-score-badge__value {
	font-size: 13px;
	font-weight: var(--fw-bold);
	line-height: 1;
}
.wasded-score-badge__max {
	font-size: 8px;
	letter-spacing: 0.08em;
	color: var(--text-faint);
}

/* Byline — ported from Byline.jsx */
.wasded-byline {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-body);
}
.wasded-byline__avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	flex-shrink: 0;
	background-color: var(--bg-surface-2);
	background-size: cover;
	background-position: center;
	border: 1px solid var(--border-hairline);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: var(--fw-bold);
	color: var(--text-faint);
}
.wasded-byline__author {
	font-size: 14px;
	font-weight: var(--fw-semibold);
	color: var(--text-primary);
}
.wasded-byline__meta {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: var(--ls-label-sm);
	text-transform: uppercase;
	color: var(--text-faint);
}

/* Pagination + CTA-Button (baseline styling; refined when those blocks
   get their own dedicated build pass) */
.wasded-pagination {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: var(--space-6);
}
.wasded-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	border-radius: var(--radius-control);
	border: 1px solid var(--border-hairline-strong);
	color: var(--text-secondary) !important;
	font-family: var(--font-mono);
	font-size: 13px;
	text-decoration: none !important;
}
.wasded-pagination .page-numbers.current {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-on-primary) !important;
}
.wasded-pagination .page-numbers:hover:not(.current) {
	border-color: var(--border-hairline-strong);
	background: var(--bg-surface-2);
}

/* Page Width toggle (inc/page-width.php) — Default is boxed/contained,
   matching every other template's content width; Full width goes
   edge-to-edge with only a small margin, for pages that want it. */
.wasded-page-content {
	max-width: var(--container-max-width);
	margin: 0 auto;
	padding: var(--space-6) var(--space-container-padding);
	box-sizing: border-box;
}

.wasded-page-content--full {
	max-width: none;
	margin: 0;
	padding: var(--space-6) 20px;
	box-sizing: border-box;
}

/* ArticleCardHorizontal — ported from ArticleCardHorizontal.jsx. */
.wasded-article-card-h {
	display: flex;
	background: var(--bg-surface);
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-card);
	overflow: hidden;
	box-shadow: var(--shadow-card-rest);
	transform: translateY(0);
	transition: transform var(--duration-base) var(--ease-standard),
		box-shadow var(--duration-base) var(--ease-standard),
		border-color var(--duration-base) var(--ease-standard);
	cursor: pointer;
	font-family: var(--font-body);
	text-decoration: none !important;
	color: inherit;
}

.wasded-article-card-h:hover {
	border-color: var(--color-primary);
	box-shadow: var(--shadow-card-hover);
	transform: translateY(-3px);
}

.wasded-article-card-h__media {
	width: 42%;
	flex-shrink: 0;
	aspect-ratio: 16 / 9;
	position: relative;
	background: var(--bg-surface-2) center / cover no-repeat;
}

.wasded-article-card-h__media:not([style*="background-image"]) {
	background-image: linear-gradient(135deg, var(--bg-surface-2) 0%, var(--bg-surface-3) 100%);
}

.wasded-article-card-h__media:not([style*="background-image"])::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A414B' stroke-width='1.5'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='m21 15-5-5L5 21'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 32px 32px;
	opacity: 0.5;
}

.wasded-article-card-h__read-scrim {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--scrim-soft);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	opacity: 0;
	transition: opacity var(--duration-base) var(--ease-standard);
	pointer-events: none;
	font-family: var(--font-mono);
	font-size: 13px;
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	font-weight: var(--fw-semibold);
	color: var(--color-on-scrim);
}

.wasded-article-card-h__media:hover .wasded-article-card-h__read-scrim {
	opacity: 1;
}

.wasded-article-card-h__body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	padding: var(--space-card-padding);
	box-sizing: border-box;
}

.wasded-article-card-h__chip {
	display: block;
	width: 100%;
	box-sizing: border-box;
	font-family: var(--font-mono);
	font-size: var(--fs-label-sm);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	font-weight: var(--fw-semibold);
	padding: 5px 10px;
	margin-bottom: 12px;
	border-radius: var(--radius-chip);
	background: var(--accent-wash);
	color: var(--color-primary-hover);
	border: 1px solid var(--color-accent);
}

.wasded-article-card-h__title {
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	font-size: 16px;
	line-height: 1.3;
	color: var(--text-primary);
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	text-overflow: ellipsis;
}

.wasded-article-card-h__excerpt {
	font-size: 12px;
	line-height: 1.4;
	color: var(--text-secondary);
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	text-overflow: ellipsis;
}

.wasded-article-card-h__meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: var(--ls-label-sm);
	text-transform: uppercase;
}

.wasded-article-card-h__meta span:first-child {
	color: var(--text-faint);
	overflow-wrap: break-word;
	min-width: 0;
}

.wasded-article-card-h__meta span:last-child {
	color: var(--color-primary-hover);
	font-weight: var(--fw-semibold);
	white-space: nowrap;
	flex-shrink: 0;
}

/* ArticleCardHorizontalFilled — ported from ArticleCardHorizontalFilled.jsx. */
.wasded-article-card-hf {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--bg-surface-2) center / cover no-repeat;
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-card);
	cursor: pointer;
	box-shadow: var(--shadow-card-rest);
	transform: translateY(0);
	transition: transform var(--duration-base) var(--ease-standard),
		box-shadow var(--duration-base) var(--ease-standard),
		border-color var(--duration-base) var(--ease-standard);
	font-family: var(--font-body);
	text-decoration: none !important;
}

.wasded-article-card-hf:hover {
	border-color: var(--color-primary);
	box-shadow: var(--shadow-card-hover);
	transform: translateY(-3px);
}

.wasded-article-card-hf:not([style*="background-image"]) {
	background-image: linear-gradient(135deg, var(--bg-surface-2) 0%, var(--bg-surface-3) 100%);
}

.wasded-article-card-hf:not([style*="background-image"])::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A414B' stroke-width='1.5'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='m21 15-5-5L5 21'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 48px 48px;
	opacity: 0.4;
	z-index: 1;
}

.wasded-article-card-hf__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, var(--scrim-gradient-top) 0%, var(--scrim-gradient-bottom) 100%);
	z-index: 1;
}

.wasded-article-card-hf__content {
	position: relative;
	z-index: 2;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: var(--space-card-padding);
	box-sizing: border-box;
}

.wasded-article-card-hf__chip {
	display: inline-block;
	align-self: flex-start;
	font-family: var(--font-mono);
	font-size: var(--fs-label-sm);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	font-weight: var(--fw-semibold);
	padding: 5px 10px;
	border-radius: var(--radius-chip);
	background: var(--accent-wash);
	color: var(--color-primary-hover);
	border: 1px solid var(--color-accent);
}

.wasded-article-card-hf__text {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.wasded-article-card-hf__title {
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	font-size: 16px;
	line-height: 1.3;
	color: var(--color-on-scrim);
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	text-overflow: ellipsis;
}

.wasded-article-card-hf__meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: var(--ls-label-sm);
	text-transform: uppercase;
}

.wasded-article-card-hf__meta span:first-child {
	color: var(--color-on-scrim-faint);
}

.wasded-article-card-hf__meta span:last-child {
	color: var(--color-primary-hover);
	font-weight: var(--fw-semibold);
	white-space: nowrap;
	flex-shrink: 0;
}

/* ArticleCardCompact — ported from ArticleCardCompact.jsx. */
.wasded-article-card-compact {
	display: flex;
	gap: 8px;
	padding: 12px;
	border-radius: var(--radius-chip);
	border: 1px solid var(--border-hairline);
	background: var(--bg-base);
	text-decoration: none !important;
	transition: all var(--duration-fast) var(--ease-standard);
	font-family: var(--font-body);
}

.wasded-article-card-compact:hover {
	border-color: var(--color-primary);
	background: var(--accent-wash);
}

.wasded-article-card-compact__media {
	width: 60px;
	height: 60px;
	object-fit: cover;
	border-radius: var(--radius-chip);
	flex-shrink: 0;
	background: var(--bg-surface-2) center / cover no-repeat;
}

.wasded-article-card-compact__media:not([style*="background-image"]) {
	background-image: linear-gradient(135deg, var(--bg-surface-2) 0%, var(--bg-surface-3) 100%);
}

.wasded-article-card-compact__body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
}

.wasded-article-card-compact__title {
	font-family: var(--font-display);
	font-weight: var(--fw-semibold);
	font-size: 12px;
	line-height: 1.2;
	color: var(--text-primary);
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.wasded-article-card-compact__date {
	font-family: var(--font-mono);
	font-size: 10px;
	color: var(--text-faint);
}

.wasded-post-grid__sidebar-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

@media (max-width: 640px) {
	.wasded-article-card-h {
		flex-direction: column;
	}
	.wasded-article-card-h__media {
		width: 100%;
	}
}