/*
 * WooCommerce domain stylesheet — mirrors inc/woocommerce/ (Phase 3).
 *
 * Registered by just2euro_woocommerce_assets() in inc/woocommerce.php,
 * depending on 'generate-child' (tokens), and loaded only when WooCommerce
 * surfaces render. Sidebar widget presentation lives in assets/css/sidebar.css;
 * global GeneratePress layout density lives in style.css; breadcrumb
 * presentation lives in assets/css/breadcrumbs.css. Product Grid, Single
 * Product, Cart, Checkout, and My Account page styling live in their matching
 * files under assets/css/woocommerce/. See tasks/phase-3-woocommerce.md.
 */

/* ===========================================================================
   WooCommerce (Phase 3 — see tasks/phase-3-woocommerce.md)

   Hook/filter-driven styling on Woo's own markup — no copied templates. This
   foundation section holds the primitives shared across every Woo page (buttons,
   notices, prices, focus). Product-grid CSS lives in
   assets/css/woocommerce/product-grid.css.
   Selectors match Woo's own specificity so source order (generate-child loads
   after Woo's CSS) lets them win without !important.
   =========================================================================== */

/* Brand buttons: every Woo action button (add-to-cart, proceed, place order)
   takes the brand purple with the prod-matched hover, mirroring the header. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
    color: var(--j2e-gray-text);
    background-color: var(--j2e-gray-light);
	border-radius: 5px;
	transition: background-color 0.15s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce a.button:focus,
.woocommerce button.button:focus,
.woocommerce input.button:focus,
.woocommerce a.button.alt:focus,
.woocommerce button.button.alt:focus,
.woocommerce input.button.alt:focus {
    color: var(--j2e-gray-text);
    background-color: var(--j2e-gray-hover);
}

/* Keyboard focus ring on Woo buttons (cyan accent, matches the header a11y base). */
.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce input.button:focus-visible,
.woocommerce #respond input#submit:focus-visible {
	outline: 2px solid var(--j2e-cyan);
	outline-offset: 2px;
}

/* Prices in the brand purple, a touch heavier — used on archive, single, cart. */
.woocommerce .price,
.woocommerce span.amount {
	color: var(--j2e-heading-3);
    font-weight: 600;
}

/* Notices (cart updated / info / error): brand-aligned left accent so messages
   read clearly. Woo paints the bar with its own --wc-* colors; we tint the rule. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top-color: var(--j2e-purple);
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--j2e-purple);
}

/* ---------------------------------------------------------------------------
   Shared commerce primitives. Classic shortcode markup, styled through Woo's
   existing hooks/templates. Cart, Checkout/order-received, and My Account page
   layout live in assets/css/woocommerce/*.css. See tasks/woo-cart-checkout.md.
   --------------------------------------------------------------------------- */

.woocommerce table.shop_table {
	border: 1px solid var(--j2e-border);
	border-collapse: separate;
	border-radius: 6px;
	overflow: hidden;
	background-color: var(--j2e-bg);
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: 0.85rem 1rem;
	border-color: var(--j2e-border);
	vertical-align: middle;
}

.woocommerce table.shop_table th {
	color: var(--j2e-heading-2);
	background-color: var(--j2e-surface);
	font-weight: 700;
}

.woocommerce table.shop_table td.product-name a {
	color: var(--j2e-heading-3);
	font-weight: 700;
	text-decoration: none;
}

.woocommerce table.shop_table td.product-name a:hover,
.woocommerce table.shop_table td.product-name a:focus {
	color: var(--j2e-purple);
	text-decoration: none;
}

.woocommerce .quantity .qty {
	width: 4.75rem;
	min-height: 2.5rem;
	padding: 0.35rem 0.45rem;
	color: var(--j2e-text);
	background-color: var(--j2e-bg);
	border: 1px solid var(--j2e-border);
	border-radius: 5px;
	text-align: center;
}

.woocommerce .quantity .qty:focus-visible,
.woocommerce form .form-row input.input-text:focus-visible,
.woocommerce form .form-row textarea:focus-visible,
.woocommerce form .form-row select:focus-visible,
.woocommerce .select2-container--default .select2-selection--single:focus-visible {
	outline: 2px solid var(--j2e-cyan);
	outline-offset: 2px;
}

.woocommerce form .form-row {
	margin: 0 0 0.85rem;
	padding: 0;
}

.woocommerce form .form-row label {
	margin-bottom: 0.25rem;
	color: var(--j2e-heading-3);
	font-weight: 700;
	line-height: 1.35;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container--default .select2-selection--single {
	min-height: 2.65rem;
	color: var(--j2e-text);
	background-color: var(--j2e-bg);
	border: 1px solid var(--j2e-border);
	border-radius: 5px;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
	padding: 0.55rem 0.65rem;
}

.woocommerce form .form-row textarea {
	min-height: 7rem;
	line-height: 1.45;
}

.woocommerce .select2-container--default .select2-selection--single {
	display: flex;
	align-items: center;
}

.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding-left: 0.65rem;
	color: var(--j2e-text);
	line-height: 2.65rem;
}

.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 50%;
	transform: translateY(-50%);
}

.woocommerce form .form-row .required {
	color: var(--j2e-purple);
}

@media (max-width: 640px) {
	.woocommerce table.shop_table_responsive tr,
	.woocommerce-page table.shop_table_responsive tr {
		border-bottom: 1px solid var(--j2e-border);
	}

	.woocommerce table.shop_table_responsive tr td,
	.woocommerce-page table.shop_table_responsive tr td {
		padding: 0.75rem;
	}
}