/* G7 WooCommerce layer — restyles WooCommerce's real markup to Clinical-Mint.
   Loads AFTER g7-style. Only targets WooCommerce selectors; brand :root vars
   come from brand-tokens.css. Update-safe: no template files overridden. */

/* ── Page layout: make Woo's content wrappers use G7's container width.
      Storefront used to set this via .col-full; with Storefront's theme CSS
      stripped site-wide, #primary/.content-area would be full-width and the
      product grid would explode into too many columns. Cart/checkout/account
      route through page.php (.container--read) so they are NOT affected here. ── */
.woocommerce .content-area,
.woocommerce-page .content-area {
	max-width: var(--container-section);
	margin-inline: auto;
	padding-inline: var(--space-5);
	box-sizing: border-box;
}
.woocommerce .site-main,
.woocommerce-page .site-main { width: 100%; }

/* Toolbar (result count + sort) — line up as a space-between row. Storefront
   outputs two of these (above and below the grid); both get the same treatment. */
.woocommerce .storefront-sorting {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-5);
}

/* ── Buttons → G7 primary (mint, 14px radius, uppercase tracked) ── */
.woocommerce a.button,
.woocommerce a.button.alt,
.woocommerce button.button,
.woocommerce button.button.alt,
.woocommerce input.button,
.woocommerce input.button.alt,
.woocommerce #respond input#submit,
.woocommerce #respond input#submit.alt,
.woocommerce .wc-proceed-to-checkout a.checkout-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	font-family: var(--font-body);
	font-weight: var(--text-label-weight);
	font-size: 15px;
	letter-spacing: var(--text-label-tracking);
	text-transform: uppercase;
	padding: var(--space-3) var(--space-5);
	border-radius: var(--button-radius);
	border: 1px solid transparent;
	background: var(--button-bg);
	color: var(--button-color);
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.woocommerce a.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover {
	background: var(--button-bg-hover);
	color: var(--button-color);
	text-decoration: none;
}
.woocommerce a.button.disabled,
.woocommerce a.button:disabled,
.woocommerce a.button:disabled[disabled] { opacity: .55; cursor: not-allowed; }

/* Secondary/outline Woo buttons (update cart, apply coupon, continue shopping) */
.woocommerce button[name="update_cart"],
.woocommerce input[name="apply_coupon"],
.woocommerce .button.wc-backward,
.woocommerce .return-to-shop .button {
	background: transparent;
	color: var(--color-accent-deep);
	border-color: var(--color-line);
}
.woocommerce button[name="update_cart"]:hover,
.woocommerce input[name="apply_coupon"]:hover,
.woocommerce .button.wc-backward:hover {
	background: transparent;
	border-color: var(--color-accent);
	color: var(--color-accent-deep);
}

/* ── Form controls ── */
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce input[type="number"],
.woocommerce input[type="search"],
.woocommerce input[type="url"],
.woocommerce select,
.woocommerce textarea,
.woocommerce .quantity input.qty {
	height: 44px;
	padding: 0 12px;
	border: 1px solid var(--input-border);
	border-radius: var(--input-radius);
	font-family: var(--font-body);
	font-size: 15px;
	color: var(--color-text);
	background: var(--white);
	width: 100%;
}
.woocommerce textarea { height: auto; min-height: 120px; padding: 10px 12px; }
.woocommerce input:focus,
.woocommerce select:focus,
.woocommerce textarea:focus {
	outline: none;
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px rgba(63, 184, 175, 0.15);
}
.woocommerce .quantity .qty { width: 64px; text-align: center; }

/* ── Notices ── */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-store-notice {
	border-radius: var(--radius-input);
	padding: var(--space-3) var(--space-4) var(--space-3) var(--space-5);
	background: var(--color-surface);
	border-left: 3px solid var(--color-accent);
	color: var(--color-text);
	list-style: none;
	margin-bottom: var(--space-4);
	box-shadow: var(--shadow-sm);
}
.woocommerce-error { border-left-color: #d64545; background: #fcf2f2; }
.woocommerce-message::before,
.woocommerce-info::before { color: var(--color-accent-deep); }
.woocommerce-error::before { color: #d64545; }

/* ── Price typography (CAD) ── */
.woocommerce .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--color-text);
	font-weight: 700;
	line-height: 1.2;
}
.woocommerce ul.products li.product .price { color: var(--color-accent-deep); font-size: 20px; }
.woocommerce div.product p.price,
.woocommerce div.product span.price { font-size: 28px; }
.woocommerce .woocommerce-Price-currencySymbol {
	font-size: .72em;
	font-weight: 600;
	color: var(--color-text-soft);
	margin-right: 2px;
	vertical-align: 2px;
}
.woocommerce .price ins { color: var(--color-accent-deep); text-decoration: none; }
.woocommerce .price del { color: var(--color-text-soft); opacity: .7; }

/* ── Star ratings → mint ── */
.woocommerce .star-rating span::before,
.woocommerce p.stars a { color: var(--color-accent); }

/* ── Shop / archive grid → G7 cards ── */
.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: var(--space-5);
	margin: 0 0 var(--space-7);
	padding: 0;
	list-style: none;
	clear: both;
}
/* The <li> is a transparent grid cell. content-product.php already wraps each
   product in <article class="card">, which owns the border/radius/background.
   Styling the <li> as a card too produced a double border (card inside a card). */
.woocommerce ul.products li.product,
.woocommerce ul.products[class*="columns-"] li.product {
	/* Kill WooCommerce core legacy width rule (.columns-N li.product { width:30.75% })
	   which pins cards to a percentage and fights the grid track. [class*="columns-"]
	   matches Woo is specificity so this override wins (it also loads later). */
	width: auto;
	display: flex;
	flex-direction: column;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	overflow: visible;
	margin: 0;
	padding: 0;
	text-align: left;
}
.woocommerce ul.products li.product > .card {
	width: 100%;
	height: 100%;
	transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.woocommerce ul.products li.product:hover > .card {
	box-shadow: 0 14px 32px -16px rgba(21, 48, 44, 0.22);
	border-color: var(--color-accent-soft);
	transform: translateY(-4px);
}
/* Product image — match the homepage .card look exactly: 2/3 portrait tile, image
   cover-cropped to fill it. Scoped to the loop so shop + related cards are identical
   to the homepage bestsellers (the global .card rule at g7.css:313-315 already does
   this, but Woo core loop img rules sit at higher specificity, so we re-assert here).
   The prior "1/1 contained, show the whole vial" rule let the tall native vial image
   blow the tile to ~1500px because the percentage max-height could not resolve
   against an indefinite box; cover crops cleanly and stays uniform on every surface. */
.woocommerce ul.products li.product .card__media,
.woocommerce ul.products li.product .card__media:has(img) {
	aspect-ratio: 2 / 3;
}
.woocommerce ul.products li.product .card__media img {
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: cover;
	margin: 0;
	padding: 0;
	background: none;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2;
	overflow:hidden;
	text-overflow:ellipsis;
	min-height:2.6em;
	max-height:2.6em;
	padding: 0 var(--space-4);
	margin: var(--space-3) 0 var(--space-2);
	font-size: 16px;
	font-weight: 700;
	color: var(--color-text);
	line-height: 1.3;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title:hover { color: var(--color-accent-deep); }
.woocommerce ul.products li.product .price { padding: 0 var(--space-4); margin-bottom: var(--space-3); }
.woocommerce ul.products li.product .button {
	margin: 0 var(--space-4) var(--space-4);
	width: calc(100% - 2 * var(--space-4));
}
.woocommerce ul.products li.product .onsale {
	min-width: auto;
	height: auto;
	margin: var(--space-3) 0 0 var(--space-3);
	border-radius: var(--radius-pill);
	padding: 3px 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	background: var(--color-accent);
	color: var(--color-on-accent);
	line-height: 1.5;
}

/* Toolbar: result count + sorting */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering { color: var(--color-text-soft); font-size: 14px; }
.woocommerce .woocommerce-ordering select { width: auto; min-width: 180px; }

/* Shop/archive header */
.woocommerce .woocommerce-products-header h1 { font-size: var(--text-h2-size); margin-bottom: var(--space-2); }
.woocommerce .term-description,
.woocommerce .woocommerce-products-header .page-description {
	color: var(--color-text-soft);
	font-size: var(--text-lead-size);
	line-height: var(--text-lead-line);
	max-width: var(--container-read);
}
.woocommerce .term-description p:last-child,
.woocommerce .woocommerce-products-header .page-description p:last-child { margin-bottom: var(--space-5); }

/* Pagination */
.woocommerce nav.woocommerce-pagination ul {
	display: inline-flex;
	gap: var(--space-2);
	border: none;
	margin: var(--space-7) 0 0;
	padding: 0;
	box-shadow: none;
}
.woocommerce nav.woocommerce-pagination ul li { border: none; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	display: inline-block;
	padding: 8px 14px;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-input);
	font-size: 14px;
	color: var(--color-text);
	background: var(--white);
}
.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--color-accent);
	color: var(--color-on-accent);
	border-color: var(--color-accent);
	font-weight: 600;
}
.woocommerce nav.woocommerce-pagination ul li a:hover { border-color: var(--color-accent); color: var(--color-accent-deep); }

/* Breadcrumb */
.woocommerce .woocommerce-breadcrumb {
	font-size: var(--text-label-size);
	color: var(--color-text-soft);
	letter-spacing: .04em;
	margin-bottom: var(--space-4);
}
.woocommerce .woocommerce-breadcrumb a { color: var(--color-text-soft); }

/* ── Single product ── */
.woocommerce div.product {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: var(--space-7);
	align-items: start;
	margin-bottom: var(--space-6);
}
.woocommerce div.product > .onsale { top: 0; }
.woocommerce div.product div.images {
	background: var(--color-surface);
	border: 1px solid var(--color-line);
	border-radius: var(--card-radius);
	padding: var(--space-6);
	margin-bottom: 0;
}
.woocommerce div.product div.images img { background: transparent; border-radius: var(--radius-input); }
.woocommerce div.product div.images .woocommerce-product-gallery__trigger { background: var(--white); border-radius: var(--radius-pill); }
.woocommerce div.product div.summary { padding-top: 0; }
.woocommerce div.product .product_title {
	font-size: var(--text-h2-size);
	font-weight: var(--text-h2-weight);
	line-height: var(--text-h2-line);
	letter-spacing: var(--text-h2-tracking);
	margin-bottom: var(--space-3);
}
.woocommerce div.product p.price { margin: 0 0 var(--space-4); }
.woocommerce-product-details__short-description {
	color: var(--color-text-soft);
	font-size: var(--text-lead-size);
	line-height: var(--text-lead-line);
	margin-bottom: var(--space-5);
}
.woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	align-items: center;
	margin-bottom: var(--space-4);
}
.woocommerce div.product form.cart .button { height: 48px; flex: 1; min-width: 200px; }
.woocommerce div.product .product_meta {
	font-size: 14px;
	color: var(--color-text-soft);
	border-top: 1px solid var(--color-line);
	margin-top: var(--space-5);
	padding-top: var(--space-4);
	display: grid;
	gap: var(--space-2);
}
.woocommerce div.product .product_meta a { color: var(--color-accent-deep); }

/* Single-product tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0;
	margin: var(--space-7) 0 var(--space-5);
	border-bottom: 1px solid var(--color-line);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-5);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li { border: none; background: transparent; margin: 0; padding: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: transparent; border-bottom: 2px solid var(--color-accent); }
.woocommerce div.product .woocommerce-tabs ul.tabs li a,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--color-text-soft);
	font-size: 15px;
	font-weight: 600;
	padding: var(--space-3) 0;
	display: block;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--color-accent-deep); }
.woocommerce div.product .woocommerce-tabs .panel {
	max-width: var(--container-read);
	border: none;
	padding: 0;
	margin: 0 0 var(--space-5);
	box-shadow: none;
}
.woocommerce div.product .woocommerce-tabs .panel h2 { font-size: var(--text-h3-size); margin-top: 0; }
.woocommerce div.product .woocommerce-tabs .panel p { color: var(--color-text-soft); line-height: 1.6; }

/* Related */
.woocommerce .related.products,
.woocommerce .up-sells.products { margin: var(--space-7) 0; }
.woocommerce .related.products > h2,
.woocommerce .up-sells.products > h2 { font-size: var(--text-h2-size); margin-bottom: var(--space-5); }

/* ── Compliance notice (research-use) — mandatory framing ── */
.g7-notice {
	background: var(--color-accent-soft);
	border-left: 3px solid var(--color-accent);
	border-radius: var(--radius-input);
	padding: var(--space-3) var(--space-4);
	font-size: 14px;
	color: var(--mint-700);
	margin: var(--space-4) 0;
	line-height: 1.5;
}
.g7-notice strong { color: var(--mint-700); font-weight: 700; }

/* ── Cart / checkout / account (light pass) ── */
.woocommerce table.shop_table,
.woocommerce-cart table.cart {
	border: 1px solid var(--color-line);
	border-radius: var(--card-radius);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}
.woocommerce table.shop_table th,
.woocommerce-cart table.cart th {
	background: var(--color-surface);
	color: var(--color-text);
	font-size: var(--text-label-size);
	font-weight: var(--text-label-weight);
	letter-spacing: var(--text-label-tracking);
	text-transform: uppercase;
	padding: var(--space-3) var(--space-4);
	text-align: left;
}
.woocommerce table.shop_table td,
.woocommerce-cart table.cart td { padding: var(--space-4); border-top: 1px solid var(--color-line); }
.woocommerce .cart-collaterals .cart_totals h2,
.woocommerce .cart-collaterals .cross-sells > h2 { font-size: var(--text-h3-size); }
.woocommerce .cart-collaterals .cart_totals { float: none; width: 100%; }

.woocommerce form .form-row label { color: var(--color-text); font-weight: 500; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea { height: 44px; }

.woocommerce ul.order_details,
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	border: 1px solid var(--color-line);
	border-radius: var(--card-radius);
	overflow: hidden;
}
.woocommerce-account .woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--color-line); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active { background: var(--color-accent-soft); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { color: var(--color-accent-deep); }

/* ── Responsive ── */
@media (max-width: 980px) {
	.woocommerce ul.products { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
	.woocommerce ul.products { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
	.woocommerce div.product { grid-template-columns: 1fr; gap: var(--space-5); }
	.woocommerce ul.products li.product a img { padding: var(--space-4); }
}
@media (max-width: 560px) {
	.woocommerce ul.products { grid-template-columns: 1fr; }
	.woocommerce div.product form.cart { flex-direction: column; align-items: stretch; }
	.woocommerce div.product form.cart .quantity,
	.woocommerce div.product form.cart .button { width: 100%; }
}

/* Kill WooCommerce core clearfix pseudo-elements on grid product lists.
   Woo adds ::before/::after with content:" " and display:table to ul.products
   for clearfix. When ul.products is a CSS grid, those pseudo-elements become
   grid items, occupying columns and pushing real product cards sideways. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce .products ul::before,
.woocommerce .products ul::after { content: none !important; display: none !important; }


/* Related products: fixed-width centered grid so 2-3 items dont stretch huge */
.woocommerce .related.products ul.products,
.woocommerce .up-sells.products ul.products {
	grid-template-columns: repeat(auto-fit, 300px) !important;
	justify-content: center !important;
	gap: clamp(14px, 2vw, 26px) !important;
}
.woocommerce .related.products ul.products li.product .card__media,
.woocommerce .related.products ul.products li.product .card__media:has(img),
.woocommerce .up-sells.products ul.products li.product .card__media,
.woocommerce .up-sells.products ul.products li.product .card__media:has(img) {
	aspect-ratio: 4 / 3 !important;
	padding: 14px !important;
}
.woocommerce .related.products ul.products li.product .card__body,
.woocommerce .up-sells.products ul.products li.product .card__body { padding: 16px !important; }
.woocommerce .related.products ul.products li.product .card__title,
.woocommerce .up-sells.products ul.products li.product .card__title { font-size: 15px !important; min-height: 2.2em !important; }
.woocommerce .related.products ul.products li.product .card__price,
.woocommerce .up-sells.products ul.products li.product .card__price { font-size: 16px !important; }