/* ==========================================================================
   SneakyPlates — WooCommerce style layer
   Brand: black #111, red accent #d1002b, plate yellow #ffd400, white bg
   Applies on top of default WooCommerce markup — no shortcode changes.
   ========================================================================== */

:root {
	--sws-black: #111111;
	--sws-red: #d1002b;
	--sws-red-dark: #a5001f;
	--sws-yellow: #ffd400;
	--sws-grey-bg: #f7f7f8;
	--sws-border: #e4e4e7;
	--sws-text: #222222;
	--sws-muted: #6b6b70;
	--sws-radius: 10px;
}

/* ---------- Shared basics ---------- */
.woocommerce, .woocommerce-page {
	color: var(--sws-text);
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.woocommerce-page button.button {
	background: var(--sws-red);
	color: #fff !important;
	border: none;
	border-radius: 8px;
	padding: 13px 26px;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
	font-size: 13px;
	transition: background .15s ease, transform .1s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	background: var(--sws-red-dark);
	color: #fff !important;
}

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #payment #place_order {
	background: var(--sws-black);
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce #payment #place_order:hover {
	background: #000;
}

.woocommerce-message,
.woocommerce-info {
	border-top-color: var(--sws-red) !important;
}
.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--sws-red) !important;
}
.woocommerce-error {
	border-top-color: var(--sws-black) !important;
}

/* Trust badges (single product, checkout) */
.sws-trust-badges,
.sws-checkout-trust {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: 16px 0 24px;
}
.sws-trust-badges span,
.sws-checkout-trust span {
	background: var(--sws-grey-bg);
	border: 1px solid var(--sws-border);
	border-radius: 999px;
	padding: 7px 14px;
	font-size: 13px;
	color: var(--sws-text);
}
.sws-checkout-trust {
	justify-content: center;
	margin-bottom: 32px;
}

.sws-btn {
	display: inline-block;
	background: var(--sws-red);
	color: #fff !important;
	padding: 12px 24px;
	border-radius: 8px;
	font-weight: 700;
	text-decoration: none;
	margin-top: 14px;
	text-transform: uppercase;
	font-size: 13px;
}
.sws-btn:hover {
	background: var(--sws-red-dark);
}

/* ==========================================================================
   SHOP ARCHIVE ([shop] / product category loop)
   ========================================================================== */

ul.products {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 28px;
	margin: 0 !important;
	padding: 0;
}

ul.products li.product {
	list-style: none;
	position: relative;
	background: #fff;
	border: 1px solid var(--sws-border);
	border-radius: 14px;
	overflow: hidden;
	text-align: left;
	padding: 0 !important;
	box-shadow: 0 1px 2px rgba(0,0,0,.04);
	transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
ul.products li.product:hover {
	box-shadow: 0 18px 34px rgba(0,0,0,.12);
	transform: translateY(-4px);
	border-color: #d9dadd;
}

/* The product photo + title + price all live inside WooCommerce's own
   link wrapper (<a class="woocommerce-LoopProduct-link">) — style that
   directly rather than inventing markup that isn't there. */
ul.products li.product > a:first-child {
	display: block;
	color: inherit;
	text-decoration: none;
}

/* Photo — fixed aspect ratio so real plate photos (angled, mixed sizes)
   always crop to the same consistent, premium tile instead of
   stretching or clipping unpredictably. aspect-ratio works directly on
   an <img>, no extra wrapper div needed. */
ul.products li.product img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center;
	border-radius: 0;
	margin: 0 0 16px;
	background: #16181c;
	transition: transform .4s ease;
}
ul.products li.product:hover img {
	transform: scale(1.05);
}

ul.products li.product h2,
ul.products li.product .woocommerce-loop-product__title {
	font-size: 15px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--sws-black);
	margin: 0 18px 10px;
	line-height: 1.3;
}

/* Price as a bold pill badge rather than plain text */
ul.products li.product .price {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 18px 18px;
	background: #fdecef;
	color: var(--sws-red);
	font-weight: 800;
	font-size: 14px;
	padding: 5px 12px;
	border-radius: 999px;
}
ul.products li.product .price del {
	color: var(--sws-muted);
	opacity: .75;
	font-weight: 400;
	font-size: 12px;
}
ul.products li.product .price ins {
	text-decoration: none;
}

ul.products li.product .button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: calc(100% - 36px);
	margin: 0 18px 18px;
}
ul.products li.product .button::before {
	content: "+";
	font-weight: 800;
	font-size: 15px;
}

.woocommerce-ordering select,
.woocommerce-result-count {
	border-radius: 6px;
}

.woocommerce-breadcrumb {
	color: var(--sws-muted);
	font-size: 13px;
	margin-bottom: 24px;
}
.woocommerce-breadcrumb a {
	color: var(--sws-black);
}

/* ==========================================================================
   SINGLE PRODUCT PAGE
   ========================================================================== */

div.product .summary .price {
	color: var(--sws-red);
	font-size: 28px;
	font-weight: 800;
}

div.product .summary .price del {
	font-size: 18px;
	color: var(--sws-muted);
	opacity: .7;
}

div.product form.cart {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--sws-border);
}

div.product .quantity input.qty {
	border: 1px solid var(--sws-border);
	border-radius: 8px;
	height: 46px;
	text-align: center;
	font-weight: 700;
}

div.product form.cart .button {
	height: 46px;
	padding: 0 30px;
}

.woocommerce-tabs ul.tabs li a {
	font-weight: 700;
	color: var(--sws-black);
}
.woocommerce-tabs ul.tabs li.active a {
	color: var(--sws-red);
	border-bottom: 2px solid var(--sws-red);
}

.related.products h2 {
	font-size: 22px;
	font-weight: 800;
	color: var(--sws-black);
	border-left: 4px solid var(--sws-red);
	padding-left: 12px;
	margin-bottom: 22px;
}

/* ==========================================================================
   CART PAGE ([woocommerce_cart])
   ========================================================================== */

table.shop_table {
	border-collapse: collapse;
	width: 100%;
	border: 1px solid var(--sws-border);
	border-radius: var(--sws-radius);
	overflow: hidden;
}

table.shop_table th {
	background: var(--sws-black);
	color: #fff;
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: .04em;
	padding: 14px;
}

table.shop_table td {
	padding: 16px 14px;
	border-bottom: 1px solid var(--sws-border);
	vertical-align: middle;
}

.woocommerce-cart-form .product-thumbnail img {
	border-radius: 6px;
	max-width: 70px;
}

.woocommerce-cart-form .product-name a {
	font-weight: 700;
	color: var(--sws-black);
}

/* Registration / style / size etc. shown as item meta under the product name */
.woocommerce-cart-form .variation,
.wc-item-meta {
	font-size: 13px;
	color: var(--sws-muted);
	margin-top: 4px;
}

.woocommerce-cart-form .quantity input.qty {
	border: 1px solid var(--sws-border);
	border-radius: 6px;
	height: 40px;
	width: 60px;
	text-align: center;
}

.woocommerce-cart-form .product-remove a {
	color: var(--sws-red);
	font-size: 20px;
}

.cart-collaterals .cart_totals {
	background: var(--sws-grey-bg);
	border-radius: var(--sws-radius);
	padding: 22px;
}

.cart-collaterals .cart_totals h2 {
	font-size: 18px;
	font-weight: 800;
	margin-top: 0;
}

.cart-collaterals .cart_totals table {
	border: none;
}
.cart-collaterals .cart_totals table td,
.cart-collaterals .cart_totals table th {
	border: none;
	border-bottom: 1px solid var(--sws-border);
	background: transparent;
	color: var(--sws-text);
}
.cart-collaterals .cart_totals .order-total .amount {
	color: var(--sws-red);
	font-weight: 800;
	font-size: 18px;
}

.wc-proceed-to-checkout a.checkout-button {
	width: 100%;
	text-align: center;
	font-size: 15px;
	padding: 16px;
}

.woocommerce-cart-form .coupon input.input-text {
	border: 1px solid var(--sws-border);
	border-radius: 6px;
	height: 42px;
	padding: 0 12px;
}

/* Empty cart state */
.woocommerce-cart-form:empty,
.cart-empty {
	text-align: center;
	font-size: 16px;
}

/* ==========================================================================
   CHECKOUT PAGE ([woocommerce_checkout])
   ========================================================================== */

.woocommerce-checkout h3 {
	font-size: 18px;
	font-weight: 800;
	color: var(--sws-black);
	margin-bottom: 16px;
}

.woocommerce-billing-fields .form-row input.input-text,
.woocommerce-billing-fields .form-row select,
.woocommerce-additional-fields .form-row textarea,
.woocommerce-shipping-fields .form-row input.input-text {
	border: 1px solid var(--sws-border);
	border-radius: 8px;
	padding: 12px 14px;
	height: auto;
}

#order_review {
	background: var(--sws-grey-bg);
	border-radius: var(--sws-radius);
	padding: 24px;
}

#order_review table.shop_table th,
#order_review table.shop_table td {
	background: transparent;
}
#order_review table.shop_table th {
	background: var(--sws-black);
}

.woocommerce-checkout #payment {
	background: #fff;
	border: 1px solid var(--sws-border);
	border-radius: var(--sws-radius);
	padding: 10px 4px;
}

.woocommerce-checkout #payment div.payment_box {
	background: var(--sws-grey-bg);
	border-radius: 8px;
}

.woocommerce-checkout #payment #place_order {
	width: 100%;
	font-size: 15px;
	padding: 16px;
	margin-top: 14px;
}

/* ==========================================================================
   MY ACCOUNT ([woocommerce_my_account])
   ========================================================================== */

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	border: 1px solid var(--sws-border);
	border-radius: var(--sws-radius);
	overflow: hidden;
	padding: 0;
	margin: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	list-style: none;
	border-bottom: 1px solid var(--sws-border);
}
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child {
	border-bottom: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 14px 18px;
	color: var(--sws-text);
	font-weight: 600;
	text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	background: var(--sws-black);
	color: #fff;
}

.sws-account-welcome {
	background: var(--sws-grey-bg);
	border-left: 4px solid var(--sws-red);
	padding: 14px 18px;
	border-radius: 6px;
	margin-bottom: 24px;
	font-size: 15px;
}

.woocommerce-MyAccount-content table.shop_table th {
	background: var(--sws-black);
}

.woocommerce-orders-table__cell-order-status mark {
	background: none;
	color: var(--sws-red);
	font-weight: 700;
}

/* Thank-you / order-received page */
.sws-thankyou-note {
	background: #fff8e1;
	border: 1px solid var(--sws-yellow);
	border-radius: var(--sws-radius);
	padding: 16px 18px;
	margin: 20px 0;
}

.woocommerce-order-overview {
	background: var(--sws-grey-bg);
	border-radius: var(--sws-radius);
	padding: 18px !important;
}
.woocommerce-order-overview li {
	border-color: var(--sws-border) !important;
}
.woocommerce-order-overview__total strong {
	color: var(--sws-red);
}

/* ==========================================================================
   WOOCOMMERCE BLOCKS — Cart & Checkout
   (SneakyPlates uses the block-based Cart/Checkout, not the old shortcode
   layout — different markup, so it needs its own selectors. This also
   fixes the product image overflowing/being cut off in the cart.)
   ========================================================================== */

/* Page heading ("Cart" / "Checkout") */
.wp-block-woocommerce-cart .wc-block-components-main h2,
.wp-block-woocommerce-checkout .wc-block-components-main h2 {
	font-size: 34px;
	font-weight: 800;
	color: var(--sws-black);
}

/* ---- Cart line items ---- */
.wc-block-cart-items {
	border: none;
}

.wc-block-cart-items__header {
	border-bottom: 2px solid var(--sws-black);
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: .04em;
	color: var(--sws-muted);
}

.wc-block-cart-item,
tr.wc-block-cart-items__row {
	border-bottom: 1px solid var(--sws-border);
}

/* THE FIX: constrain the product thumbnail so it can never overflow
   its column or overlap the text next to it. */
.wc-block-cart-item__image,
.wc-block-components-product-image {
	width: 90px !important;
	max-width: 90px !important;
	flex: 0 0 90px !important;
}
.wc-block-cart-item__image img,
.wc-block-components-product-image img,
.wc-block-cart-item__image a img {
	width: 90px !important;
	height: 90px !important;
	max-width: 90px !important;
	object-fit: cover;
	border-radius: 8px;
	display: block;
}

.wc-block-cart-item__product-name,
.wc-block-components-product-name {
	font-weight: 700;
	color: var(--sws-black);
	font-size: 15px;
	text-decoration: none;
}

.wc-block-cart-item__prices,
.wc-block-components-product-price,
.wc-block-components-formatted-money-amount {
	color: var(--sws-red);
	font-weight: 700;
}

/* Registration / style / size meta rows under the product name */
.wc-block-components-product-metadata,
.wc-block-cart-item__product-metadata {
	font-size: 13px;
	color: var(--sws-muted);
}

/* Quantity stepper that ships with the block */
.wc-block-components-quantity-selector {
	border: 1px solid var(--sws-border);
	border-radius: 8px;
	overflow: hidden;
}
.wc-block-components-quantity-selector__button {
	color: var(--sws-black);
	font-weight: 700;
}
.wc-block-components-quantity-selector__input {
	font-weight: 700;
}

.wc-block-cart-item__remove-link {
	color: var(--sws-red) !important;
}

/* ---- Totals / sidebar ---- */
.wc-block-cart__totals-title,
.wc-block-components-totals-wrapper .wc-block-components-totals-item__label {
	font-weight: 700;
}

.wp-block-woocommerce-cart .wc-block-components-sidebar,
.wp-block-woocommerce-checkout .wc-block-components-sidebar {
	background: var(--sws-grey-bg);
	border-radius: var(--sws-radius);
	padding: 22px;
}

.wc-block-components-totals-item {
	border-bottom: 1px solid var(--sws-border);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-formatted-money-amount {
	color: var(--sws-red) !important;
	font-weight: 800;
	font-size: 18px;
}

/* Coupon accordion ("Add coupons") */
.wc-block-components-totals-coupon-link {
	color: var(--sws-black);
	font-weight: 700;
}
.wc-block-components-totals-coupon__form input {
	border: 1px solid var(--sws-border);
	border-radius: 6px;
	height: 42px;
}

/* Proceed to Checkout / Place Order buttons on the blocks */
.wc-block-cart__submit-container .wc-block-components-button,
.wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-proceed-to-checkout-block a,
.wc-block-cart__submit-container a {
	background: var(--sws-black) !important;
	color: #fff !important;
	border-radius: 8px !important;
	width: 100%;
	text-decoration: none !important;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: .02em;
	font-size: 14px;
	padding: 16px !important;
	border: none !important;
}
.wc-block-cart__submit-container .wc-block-components-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.wp-block-woocommerce-proceed-to-checkout-block a:hover {
	background: #000 !important;
}

/* ---- Checkout block forms ---- */
.wc-block-components-text-input input,
.wc-block-components-address-form input,
.wc-block-components-address-form select {
	border: 1px solid var(--sws-border) !important;
	border-radius: 8px !important;
}

.wc-block-components-radio-control__option {
	border: 1px solid var(--sws-border);
	border-radius: 8px;
	margin-bottom: 8px;
}

/* Empty cart block */
.wp-block-woocommerce-empty-cart-block {
	text-align: center;
	padding: 40px 20px;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 782px) {
	table.shop_table thead {
		display: none;
	}
	table.shop_table tr {
		display: block;
		border-bottom: 2px solid var(--sws-border);
	}
	table.shop_table td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #f0f0f0;
	}
	table.shop_table td::before {
		content: attr(data-title);
		font-weight: 700;
		color: var(--sws-muted);
		font-size: 12px;
		text-transform: uppercase;
		margin-right: 10px;
	}

	.sws-trust-badges,
	.sws-checkout-trust {
		justify-content: flex-start;
	}
}

/* Quantity stepper buttons (added by woo-style.js) */
.quantity {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.sws-qty-btn {
	width: 36px;
	height: 40px;
	border: 1px solid var(--sws-border);
	background: #fff;
	border-radius: 6px;
	font-size: 18px;
	font-weight: 700;
	color: var(--sws-black);
	cursor: pointer;
	line-height: 1;
}
.sws-qty-btn:hover {
	background: var(--sws-grey-bg);
}

@media (max-width: 600px) {
	.wc-block-cart-items__header {
		display: none;
	}
	.wc-block-cart-item {
		display: flex;
		flex-wrap: wrap;
	}
	.wc-block-cart-item__image,
	.wc-block-components-product-image {
		width: 70px !important;
		max-width: 70px !important;
		flex: 0 0 70px !important;
	}
	.wc-block-cart-item__image img,
	.wc-block-components-product-image img {
		width: 70px !important;
		height: 70px !important;
	}
}