/*
Theme Name: ericville25
Author: eric@ericwittke.com
File: woocommerce.css
Description: Overrides for WooCommerce pages, products, cart, and checkout blocks.
*/

/* * -------------------------------------------------------------------------
 * Global Page Layout
 * -------------------------------------------------------------------------
 */

.woocommerce-page .default-page > * {
	max-width: var(--breakpoint-l);
	margin: 0 auto;
}

.woocommerce-page h1 {
	display: block;
}

/* Global Button Override */
.woocommerce-page .button {
	min-height: unset;
	background: var(--color-accent) !important;
	color: var(--color-bg) !important;
	
	/* Ensure transitions match global button styles */
	transition: all var(--motion-fast);
}

/* * -------------------------------------------------------------------------
 * Cleanup (Hiding Features)
 * -------------------------------------------------------------------------
 */

/* Hide result counts and sorting dropdowns */
.woocommerce-result-count,
.woocommerce-ordering {
	display: none;
}

/* Reset product container margins */
.woocommerce-page .products {
	border-width: 0;
	margin: 0;
}

/* * -------------------------------------------------------------------------
 * Product List (Archives/Shop)
 * -------------------------------------------------------------------------
 */

/* Product Images */
.woocommerce ul.products li.product a img {
	border-radius: var(--radius-s);
	
	/* Layout Stability: Pre-set transparent border to prevent hover jumps */
	border: 5px solid transparent; 
	transition: var(--motion-fast) all;
}

.woocommerce ul.products li.product a:hover img {
	border-color: var(--color-accent);
}

/* Add to Cart Button in Grid */
.woocommerce ul.products li.product .button {
	margin-top: 0;
	font-weight: normal;
	text-align: center;
	display: block;
}

/* "View Cart" Link (appears after adding) */
.woocommerce a.added_to_cart {
	display: block;
	margin-top: var(--space-xs);
}

.woocommerce a.added_to_cart:hover {
	text-decoration: underline;
}

/* Price Tags on Archive */
.woocommerce:where(body:not(.woocommerce-uses-block-theme)) ul.products li.product .price {
	display: inline-block;
	color: var(--color-price);
	background: var(--color-borders);
	
	padding: var(--space-s) var(--space-s); /* Replaced 7px 10px */
	line-height: 1;
	border-radius: var(--radius-s);
}

/* * -------------------------------------------------------------------------
 * Cart Counter (Menu Item)
 * -------------------------------------------------------------------------
 */

.cart-count {
	display: inline-flex; /* Better centering than inline-block + padding hacks */
	align-items: center;
	justify-content: center;
	
	background: var(--color-accent-dark);
	color: var(--color-bg);
	border-radius: 50%;
	
	width: 24px; /* Fixed width */
	height: 24px; /* Fixed height */
	
	font-size: 0.9rem;
	line-height: 1;
	
	position: relative;
	top: -2px;
}

.current-menu-item .cart-count {
	color: var(--color-accent-dark);
	background: var(--color-bg);
}

/* * -------------------------------------------------------------------------
 * Component: Product Category Grouping
 * -------------------------------------------------------------------------
 */

.product-category {
    margin-bottom: var(--space-xl); /* Standardized spacing */
}

/* * -------------------------------------------------------------------------
 * Commerce Specific Brick Overrides
 * -------------------------------------------------------------------------
 */

/* Price Tag Styling */
:where(.brick-tags) .tag.price {
    color: var(--color-text);
    font-size: var(--font-size-xs);
    padding-left: 0; /* Align left if background is transparent */
	opacity: .5;
}

:where(.inverse) .brick-tags .tag.price {
    color: var(--color-bg); /* Lighter green/mint for dark backgrounds */
}

/* Remove legacy WooCommerce float clears that mess up Grid/Flex */
.woocommerce .products ul.bricks-grid::after,
.woocommerce .products ul.bricks-grid::before {
    display: none;
}

/* * -------------------------------------------------------------------------
 * Single Product Page
 * -------------------------------------------------------------------------
 */

/* Layout Grid */
.woocommerce-page .single-product div.product {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--space-m);
}

/* Column 1: Images */
.woocommerce #content div.product div.images,
.woocommerce div.product div.images,
.woocommerce-page #content div.product div.images,
.woocommerce-page div.product div.images {
	float: none;
	/* OPTIMIZATION: Calc based on variable gap size */
	flex: 1 1 calc(50% - (var(--space-m) / 2)); 
}

/* Gallery Slider UI */
.flex-viewport {
	margin-bottom: var(--space-s);
	border-radius: var(--radius-s);
}

.flex-control-nav {
	border-radius: var(--radius-s);
}

.woocommerce div.product div.images .flex-control-thumbs li:hover img {
	opacity: 0.8;
}

/* Column 2: Summary */
.woocommerce #content div.product div.summary,
.woocommerce div.product div.summary,
.woocommerce-page #content div.product div.summary,
.woocommerce-page div.product div.summary {
	float: none;
	/* OPTIMIZATION: Calc based on variable gap size */
	flex: 1 1 calc(50% - (var(--space-m) / 2));
}

/* Typography & Metadata */
.woocommerce-page .product h2 {
	font-size: 1.8rem; /* Consider mapping to var(--font-size-xl) */
	font-weight: bold;
	text-transform: capitalize;
	margin-top: 0;
}

.woocommerce-page .single-product div.product div.summary hr {
	margin: var(--space-m) 0;
	opacity: 0.3;
}

.product_meta {
	display: none;
}

/* Price Tag on Single Product */
.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product p.price,
.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product span.price {
	display: inline-block;
	color: var(--color-price);
	background: var(--color-borders);
	
	padding: 15px 20px; /* Consider space-m (20px) for consistency */
	line-height: 1;
	border-radius: var(--radius-s);
}

/* Related Products Section */
.woocommerce-page .related {
	min-width: 0;
	padding: var(--space-m) 0 0 0;
	width: 100%;
	border-top: 1px solid var(--color-borders);
}

/* * -------------------------------------------------------------------------
 * Order Summary / Account
 * -------------------------------------------------------------------------
 */

.woocommerce-page .woocommerce-order section {
	padding-left: 0;
	padding-right: 0;
}

.woocommerce-page .woocommerce-order section h2 {
	font-size: 1.2rem;
	font-weight: bold;
}

ul.woocommerce-order-overview {
	background: var(--color-surface);
	border-left: 0;
	padding-top: var(--space-m);
	border-radius: var(--radius-l);
	box-shadow: var(--shadow-xl);
}

/* * -------------------------------------------------------------------------
 * Notices & Alerts
 * -------------------------------------------------------------------------
 */

.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
	background-color: var(--color-surface);
	border-radius: var(--radius-l); /* Formerly 10px */
	border-left: 0;
	box-shadow: var(--shadow-md-2);
}

.woocommerce-error::before,
.woocommerce-info::before,
.woocommerce-message::before {
	top: 0.8em;
}

/* Fix Notice Buttons Layout */
.woocommerce .woocommerce-error .button,
.woocommerce .woocommerce-info .button,
.woocommerce .woocommerce-message .button {
	display: table-cell;
	float: none;
	position: relative;
	top: var(--space-s); /* Formerly 10px */
}

/* * -------------------------------------------------------------------------
 * WooCommerce Blocks: Cart & Checkout
 * -------------------------------------------------------------------------
 */

@container (min-width: 700px) {
	.wc-block-cart .wc-block-components-sidebar {
		padding-left: 0;
	}
}

.wc-block-cart .wp-block-woocommerce-cart-order-summary-block,
.wp-block-woocommerce-checkout-order-summary-block {
	background: var(--color-surface);
	padding: var(--space-m);
	border-radius: var(--radius-s);
	border: 0;
	box-shadow: var(--shadow-md);
}

.wc-block-cart__submit-button {
	transition: var(--motion-fast) all;
}

/* Checkout Steps Styling */
.wc-block-checkout__form--with-step-numbers .wc-block-components-checkout-step--with-step-number .wc-block-components-checkout-step__title:before {
	content: " " counter(checkout-step) !important;
	
	background: var(--color-accent) !important;
	color: var(--color-bg);
	border-radius: var(--radius-s) !important;
	
	display: block;
	width: 36px;
	aspect-ratio: 1 / 1;
	
	/* Layout hack reset */
	left: -32px !important;
}

/* Line reset between steps */
.wc-block-checkout__form--with-step-numbers .wc-block-components-checkout-step--with-step-number .wc-block-components-checkout-step__container:after {
	border-left: 0 !important;
}

.wc-block-checkout__form--with-step-numbers .wc-block-components-checkout-step--with-step-number {
	padding: 0 0 0 52px !important;
}

/* Clean up cart Item removal link */
.wc-block-cart-item__remove-link {
	min-height: unset;
}

.wc-block-cart-item__remove-link:hover {
	outline-width: 0;
	top: 0;
}

/* Hide small metadata in order summary to reduce noise */
.wc-block-components-order-summary .wc-block-components-order-summary-item__description .wc-block-components-product-metadata,
.wc-block-components-order-summary .wc-block-components-order-summary-item__description p {
	display: none;
}

/* * -------------------------------------------------------------------------
 * Contact Fields / Checkboxes
 * -------------------------------------------------------------------------
 */

#contact-fields .wc-block-components-checkbox label {
	padding: 1em;
	border: 1px solid var(--color-borders);
	border-radius: var(--radius-s);
	transition: background-color var(--motion-fast);
}

#contact-fields .wc-block-components-checkbox label strong {
	color: var(--color-price);
}

#contact-fields .wc-block-components-checkbox label em {
	opacity: 0.7;
}

#contact-fields .wc-block-components-checkbox label:hover {
	/* Standardized semi-transparent white hover */
	background: rgba(255, 255, 255, 0.53); /* Approx #fff8 */
}

/* Custom Checkbox Input Styling */
#contact-fields .wc-block-components-checkbox label .wc-block-components-checkbox__input[type=checkbox] {
	border: 2px solid var(--color-price);
}

#contact-fields .wc-block-components-checkbox label:hover .wc-block-components-checkbox__input[type=checkbox] {
	box-shadow: 0 0 4px var(--color-price);
	outline: 1px solid var(--color-surface);
}

/* Active State (Checked) */
#contact-fields .wc-block-components-checkbox label:has(.wc-block-components-checkbox__input[type="checkbox"]:checked) {
	border: 1px solid var(--color-price);
	background: rgba(255, 255, 255, 0.53); /* Approx #fff8 */
}