/**
 * Number Plate Maker - WooCommerce
 *
 * Light-touch styling for shop, account, and notices. The cart and
 * checkout are templated and styled by the Rivmedia Plate Builder plugin
 * (assets/css/checkout.css) - this file deliberately avoids styling those
 * screens so the two never fight.
 */

/* ══ Notices ═══════════════════════════════════════════ */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	list-style: none;
	padding: var(--npm-space-4) var(--npm-space-5);
	margin: 0 0 var(--npm-space-5);
	border-radius: var(--npm-radius);
	border: 1px solid var(--npm-border);
	background: var(--npm-white);
	font-size: var(--npm-text-sm);
}

.woocommerce-message {
	border-left: 4px solid var(--npm-success);
	background: var(--npm-success-soft);
}

.woocommerce-info {
	border-left: 4px solid var(--npm-navy);
	background: var(--npm-navy-soft);
}

.woocommerce-error {
	border-left: 4px solid var(--npm-danger);
	background: var(--npm-danger-soft);
}

.woocommerce-error li {
	margin: 0;
}

/* ══ Shop wrapper ══════════════════════════════════════ */
.npm-woocommerce-wrap {
	padding: var(--npm-space-8) 0;
}

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

@media (max-width: 900px) {
	.woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
	.woocommerce ul.products { grid-template-columns: 1fr; }
}

.woocommerce ul.products li.product {
	background: var(--npm-white);
	border: 1px solid var(--npm-border);
	border-radius: var(--npm-radius-lg);
	overflow: hidden;
	transition: box-shadow var(--npm-slow) var(--npm-ease);
}

.woocommerce ul.products li.product:hover {
	box-shadow: var(--npm-shadow-lg);
}

.woocommerce ul.products li.product img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .button {
	margin: 0 var(--npm-space-4);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: var(--npm-text-base);
	color: var(--npm-navy);
	padding-top: var(--npm-space-3);
}

.woocommerce ul.products li.product .price {
	display: block;
	color: var(--npm-navy);
	font-weight: var(--npm-weight-bold);
	padding: var(--npm-space-1) 0 var(--npm-space-2);
}

.woocommerce ul.products li.product .button {
	display: inline-block;
	margin-bottom: var(--npm-space-4);
	padding: 0.6rem 1.2rem;
	background: var(--npm-yellow);
	color: var(--npm-navy);
	font-weight: var(--npm-weight-bold);
	text-decoration: none;
	border-radius: var(--npm-radius-sm);
}

.woocommerce ul.products li.product .button:hover {
	background: var(--npm-yellow-hover);
}

/* ══ My Account ════════════════════════════════════════
 * Layout, navigation, and dashboard styling for the account area are
 * owned by the plate builder plugin (assets/css/my-account.css) - it
 * builds its own .rnpb-account-grid around the nav + content and centres
 * itself. The theme previously declared a competing grid on the parent
 * .woocommerce wrapper, which pushed the plugin's grid into one column
 * and misaligned the whole account area. The theme now styles nothing
 * structural here. */

/* Order tables outside the account area (plugin covers account tables). */
.woocommerce table.shop_table {
	border: 1px solid var(--npm-border);
	border-radius: var(--npm-radius);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	font-size: var(--npm-text-sm);
}

.woocommerce table.shop_table th {
	background: var(--npm-surface-alt);
}

.woocommerce table.shop_table td,
.woocommerce table.shop_table th {
	border-bottom: 1px solid var(--npm-border);
}

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

/* Generic Woo buttons outside cart/checkout */
.woocommerce a.button,
.woocommerce button.button {
	background: var(--npm-navy);
	color: var(--npm-white);
	border: 0;
	border-radius: var(--npm-radius-sm);
	padding: 0.7rem 1.3rem;
	font-weight: var(--npm-weight-bold);
	text-decoration: none;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover {
	background: #24365d;
	color: var(--npm-white);
}


/* ══ Empty basket ══════════════════════════════════════
 * Self-centring so it looks right whether the cart page renders inside
 * the theme container or full-bleed (e.g. while the cart page is still
 * an Elementor page during migration). */
.npm-empty-cart {
	max-width: 560px;
	margin: 0 auto;
	padding: var(--npm-space-10) var(--npm-space-4);
	text-align: center;
}

.npm-empty-cart__plate {
	display: inline-flex;
	align-items: stretch;
	overflow: hidden;
	border: 4px solid var(--npm-grey-300);
	border-radius: var(--npm-radius-plate);
	background: var(--npm-white);
	margin-bottom: var(--npm-space-5);
}

.npm-empty-cart__band {
	display: flex;
	align-items: flex-end;
	padding: 0.5rem 0.5rem;
	background: var(--npm-yellow);
	border-right: 4px solid var(--npm-grey-300);
	font-size: var(--npm-text-xs);
	font-weight: var(--npm-weight-plate);
	color: var(--npm-navy);
}

.npm-empty-cart__text {
	padding: 0.5rem 1.2rem;
	font-size: clamp(1.8rem, 6vw, 2.6rem);
	font-weight: 900;
	letter-spacing: 0.08em;
	color: var(--npm-grey-300);
	line-height: 1.1;
}

.npm-empty-cart h2 {
	margin-bottom: var(--npm-space-2);
}

.npm-empty-cart p {
	color: var(--npm-grey-700);
	margin-bottom: var(--npm-space-6);
}

.npm-empty-cart__actions {
	display: flex;
	justify-content: center;
	gap: var(--npm-space-3);
	flex-wrap: wrap;
}

/* WooCommerce notices above the empty state: contain them too. */
.cart-empty ~ .npm-empty-cart,
.npm-empty-cart {
	box-sizing: border-box;
}