/* ==========================================================================
   Medanta Organics — WooCommerce skin (foundation)
   Loads only on store contexts (see inc/enqueue.php). Light visual alignment
   with the design tokens. No layout rebuilds — WooCommerce owns its markup.
   ========================================================================== */

.mo-main--woocommerce { padding-block: var(--mo-space-8); }

/* --- Buttons --------------------------------------------------------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	background: var(--mo-color-primary);
	color: #fff;
	border-radius: var(--mo-radius-pill);
	padding: 0.7em 1.4em;
	font-weight: var(--mo-weight-medium);
	line-height: 1;
	transition: background var(--mo-transition);
}
.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 {
	background: var(--mo-color-primary-600);
	color: #fff;
}

/* --- Prices / sale ------------------------------------------------- */
.woocommerce .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--mo-color-ink);
	font-weight: var(--mo-weight-bold);
}
.woocommerce .price del { color: var(--mo-color-muted); font-weight: var(--mo-weight-normal); }
.woocommerce .price ins { text-decoration: none; color: var(--mo-color-sale); }

.woocommerce span.onsale {
	background: var(--mo-color-accent);
	/* White, not ink, on this green: 6.73:1 vs 2.19:1 - WCAG AA for normal text. */
	color: #fff;
	border-radius: var(--mo-radius-pill);
	min-height: 0;
	min-width: 0;
	padding: 0.35em 0.8em;
	font-weight: var(--mo-weight-medium);
}

/* --- Notices ----------------------------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top-color: var(--mo-color-primary);
	background: var(--mo-color-surface);
	border-radius: var(--mo-radius);
	box-shadow: var(--mo-shadow-sm);
}
.woocommerce-message::before { color: var(--mo-color-success); }
.woocommerce-info::before { color: var(--mo-color-info); }
.woocommerce-error { border-top-color: var(--mo-color-error); }
.woocommerce-error::before { color: var(--mo-color-error); }

/* --- Forms ------------------------------------------------------ */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container--default .select2-selection--single {
	border: 1px solid var(--mo-color-line);
	border-radius: var(--mo-radius);
	padding: 0.6em 0.85em;
	min-height: 44px;
}

/* --- Loop grid ------------------------------------------------
   Overrides WooCommerce core's float-based .columns-N layout with CSS Grid,
   matching the column counts declared in add_theme_support('woocommerce')
   (min 2 / default 3 / max 4). Markup is untouched — WooCommerce's own
   ul.products / li.product structure, just re-laid-out. */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid;
	/* minmax(0, 1fr), not bare 1fr: grid items default to min-width:auto,
	   so a bare 1fr track refuses to shrink below its content's min-content
	   width (badge text, image intrinsic size, etc.), overflowing the
	   container on narrow viewports. minmax(0, 1fr) lets the track - and
	   therefore the card - actually shrink to fit. */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--mo-card-gap);
	margin: 0 0 var(--mo-space-6);
	padding: 0;
	list-style: none;
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	background: var(--mo-color-surface);
	border: 1px solid var(--mo-color-line);
	border-radius: var(--mo-radius-lg);
	padding: var(--mo-space-3);
	transition: box-shadow var(--mo-transition), transform var(--mo-transition);
	/* neutralise WooCommerce core's float/width layout, grid handles position */
	float: none;
	width: auto;
	margin: 0;
	clear: none;
}
.woocommerce ul.products li.product:hover {
	box-shadow: var(--mo-shadow);
	transform: translateY(-2px);
}
.woocommerce ul.products li.product a img {
	border-radius: var(--mo-radius);
	aspect-ratio: 1 / 1;
	object-fit: cover;
}
/* 2 per row on mobile, 3 on tablet, 4 from the desktop container width up -
   the standard e-commerce density, rather than 3-up all the way to 1440. */
@media (min-width: 768px) {
	.woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
	.woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --- Star ratings -------------------------------------------
   The theme owns all WooCommerce styling (Woo's own stylesheets are not
   enqueued), so .star-rating has to be built here. WooCommerce outputs

     <div class="star-rating" role="img" aria-label="Rated 4.00 out of 5">
       <span style="width:80%">Rated 4.00 out of 5 ...</span></div>

   Unstyled, that sentence renders as two lines of wrapping text inside every
   product card. The overlay below shows a grey 5-star row, clips a gold row
   to the inline width percentage Woo sets, and pushes the sentence out of the
   clip box with padding-top so it stays in the accessibility tree (the
   aria-label already carries the value for assistive tech). */
.star-rating {
	position: relative;
	display: inline-block;
	overflow: hidden;
	flex: 0 0 auto;
	width: 5.6em;
	height: 1.2em;
	line-height: 1.2;
	letter-spacing: 0.1em;
	white-space: nowrap;
	color: var(--mo-color-line);
}
.star-rating::before {
	content: "\2605\2605\2605\2605\2605";
	position: absolute;
	top: 0;
	left: 0;
}
.star-rating > span {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	padding-top: 1.5em;
	color: var(--mo-color-warning);
}
.star-rating > span::before {
	content: "\2605\2605\2605\2605\2605";
	position: absolute;
	top: 0;
	left: 0;
}

/* --- Product card (Phase 3) --------------------------------
   Renders inside WooCommerce's own <li class="product"> (styled above) via
   MedantaOrganics\Store\ProductCard\Card - markup is ours, wrapper + query
   are still native WooCommerce. Reuses the existing token system only. */
.mo-product-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	gap: var(--mo-space-2);
}

.mo-product-card__media {
	position: relative;
	display: block;
	border-radius: var(--mo-radius);
	overflow: hidden;
	background: var(--mo-color-canvas-alt);
}
.mo-product-card__media img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--mo-radius);
	display: block;
	transition: transform 450ms ease;
}
.mo-product-card__media:hover img { transform: scale(1.06); }

/* Sale flash - native WooCommerce span.onsale, our token colours (white-on-
   green, 6.73:1 contrast - see theme.css accent notes) plus positioning. */
.mo-product-card__media span.onsale {
	position: absolute;
	top: var(--mo-space-2);
	left: var(--mo-space-2);
	z-index: 1;
	margin: 0;
}

.mo-product-card__badge {
	position: absolute;
	top: var(--mo-space-2);
	right: var(--mo-space-2);
	z-index: 1;
	display: inline-flex;
	align-items: center;
	padding: 0.3em 0.75em;
	border-radius: var(--mo-radius-pill);
	font-size: var(--mo-text-xs);
	font-weight: var(--mo-weight-medium);
	line-height: 1.4;
}
/* Neutral (not alarming) - stock is informational, not an error state. */
.mo-product-card__badge--outofstock {
	background: var(--mo-color-surface);
	border: 1px solid var(--mo-color-line);
	color: var(--mo-color-muted);
}
.mo-product-card__badge--backorder {
	background: var(--mo-color-canvas-alt);
	border: 1px solid var(--mo-color-line);
	color: var(--mo-color-body);
}

.mo-product-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--mo-space-1);
	flex: 1 1 auto;
}

.mo-product-card__title {
	margin: 0;
	font-size: var(--mo-text-base);
	line-height: var(--mo-leading-snug);
}
.mo-product-card__title a {
	color: var(--mo-color-ink);
	text-decoration: none;
}
.mo-product-card__title a:hover { color: var(--mo-color-primary-600); }
/* Larger hit area for the whole card without nesting <a> inside <a>: the
   title link visually + functionally covers the card; the media link and
   "View product" link give the image and an explicit text link too. */

.mo-product-card__excerpt {
	margin: 0;
	color: var(--mo-color-muted);
	font-size: var(--mo-text-sm);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.mo-product-card__rating {
	display: flex;
	align-items: center;
	gap: var(--mo-space-1);
	font-size: var(--mo-text-sm);
}
.mo-product-card__rating .star-rating { font-size: var(--mo-text-sm); }
.mo-product-card__review-count { color: var(--mo-color-muted); }

.mo-product-card__price {
	margin-top: auto;
	padding-top: var(--mo-space-1);
	font-size: var(--mo-text-base);
	font-weight: var(--mo-weight-bold);
	color: var(--mo-color-ink);
}

/* Single full-width CTA rather than a button + a redundant "View product"
   link beside it (the card title already links to the product) - one row
   instead of a wrapping two-item row keeps the card noticeably shorter. */
.mo-product-card__actions {
	display: flex;
	padding-top: var(--mo-space-1);
}
.mo-product-card__actions .button,
.mo-product-card__actions .added_to_cart {
	flex: 1 1 auto;
	min-height: 40px;
	justify-content: center;
	text-align: center;
	font-size: var(--mo-text-sm);
	padding: 0.55em 1em;
}

/* Focus-visible on every interactive part of the card (link, button) reuses
   the theme-wide :focus-visible outline from theme.css - no extra rule
   needed, verified in the browser test pass. */

/* --- Tables (cart / account) ------------------------------- */
.woocommerce table.shop_table {
	border-radius: var(--mo-radius);
	border-color: var(--mo-color-line);
}

/* No horizontal overflow on small screens */
.woocommerce .woocommerce-cart-form,
.woocommerce .cart-collaterals,
.woocommerce table.shop_table_responsive { max-width: 100%; }
@media (max-width: 600px) {
	.woocommerce table.cart td.actions .coupon .input-text { width: 100%; margin-bottom: var(--mo-space-2); }
}

/* ==========================================================================
   Single product (Phase 5)
   WooCommerce's own content-single-product.php is NOT overridden — this is
   a CSS skin only, same principle as the shop-loop grid above: native
   markup (images/summary/tabs/related/upsells), re-laid-out with tokens.
   ========================================================================== */

/* --- Layout: gallery + summary side by side ------------------------
   div.product is WooCommerce's own wrapper; .images and .summary are its
   own direct-child divs. Made into a 2-column grid at >=768px; every OTHER
   direct child (tabs, related, upsells - appended after .summary by
   WooCommerce's own hooks) is forced to span both columns so the grid only
   affects the gallery/summary pairing, nothing below it. */
.woocommerce div.product {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mo-space-6) var(--mo-space-8);
	max-width: 100%;
}
@media (min-width: 768px) {
	.woocommerce div.product {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: start;
	}
}
.woocommerce div.product > *:not(.images):not(.summary):not(span.onsale) {
	grid-column: 1 / -1;
}
.woocommerce div.product div.images,
.woocommerce div.product div.summary { max-width: 100%; min-width: 0; }

/* WooCommerce renders the sale flash as a direct child of div.product,
   BEFORE .images in source order (not nested inside the gallery) - pin it
   over the gallery's top-left corner instead of letting it flow as a
   full-width grid row (which is what the grid-reset rule above would
   otherwise do to any other direct child of div.product). */
.woocommerce div.product > span.onsale {
	position: absolute;
	top: var(--mo-space-3);
	left: var(--mo-space-3);
	z-index: 2;
	margin: 0;
}

/* --- Gallery ------------------------------------------------------- */
.woocommerce div.product .woocommerce-product-gallery { max-width: 100%; position: relative; }

.woocommerce-product-gallery__wrapper { margin: 0; padding: 0; list-style: none; }
.woocommerce-product-gallery .flex-viewport {
	border-radius: var(--mo-radius-lg);
	overflow: hidden;
	background: var(--mo-color-canvas-alt);
}
.woocommerce-product-gallery__image img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
}

/* Zoom/lightbox trigger (magnifier) - native WooCommerce link, styled as a
   small circular button instead of a bare inline icon. */
.woocommerce-product-gallery__trigger {
	position: absolute;
	top: var(--mo-space-3);
	right: var(--mo-space-3);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--mo-color-surface);
	box-shadow: var(--mo-shadow-sm);
}
.woocommerce-product-gallery__trigger img { width: 18px; height: 18px; }

/* Prev/next arrows over the main image - flexslider ships with no
   direction-nav at all (verified against the live gallery); these buttons
   are added by assets/js/product-gallery.js and drive the slider only by
   dispatching a click on the target thumbnail, never touching flexslider's
   own state directly. Hidden until the gallery/viewport is hovered or a
   button itself has focus, so a single-image gallery (no buttons rendered
   at all - see the JS) and a multi-image one both start out looking the
   same, undecorated main image. */
.mo-gallery-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: var(--mo-color-surface);
	color: var(--mo-color-ink);
	box-shadow: var(--mo-shadow-sm);
	cursor: pointer;
	opacity: 0;
	transition: opacity var(--mo-transition), background var(--mo-transition), transform var(--mo-transition);
}
.woocommerce-product-gallery:hover .mo-gallery-nav,
.mo-gallery-nav:focus-visible {
	opacity: 1;
}
.mo-gallery-nav:hover {
	background: var(--mo-color-primary);
	color: #fff;
}
.mo-gallery-nav:focus-visible {
	outline: 2px solid var(--mo-color-focus);
	outline-offset: 2px;
}
.mo-gallery-nav--prev { left: var(--mo-space-3); }
.mo-gallery-nav--next { right: var(--mo-space-3); }

/* Touch devices have no hover state to reveal the buttons on - keep them
   visible outright there instead of hiding navigation behind a gesture
   that doesn't exist on the device. */
@media (hover: none) {
	.mo-gallery-nav { opacity: 1; }
}

/* Thumbnail strip - flexslider's own <ol class="flex-control-nav
   flex-control-thumbs">. flex-wrap (not horizontal scroll) so a longer
   gallery wraps to a second row instead of ever causing page overflow. */
.flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mo-space-2);
	margin: var(--mo-space-3) 0 0;
	padding: 0;
	list-style: none;
}
.flex-control-thumbs li {
	width: 72px;
	height: 72px;
	cursor: pointer;
}
.flex-control-thumbs li img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--mo-radius);
	border: 2px solid transparent;
	opacity: 0.75;
	transition: opacity var(--mo-transition), border-color var(--mo-transition);
}
.flex-control-thumbs li:hover img { opacity: 1; }
/* This flexslider build doesn't mark the active thumbnail with a class of
   its own (verified against the live gallery) - assets/js/product-gallery.js
   tracks it via aria-current instead, which this also uses for the visible
   active state so the two never disagree. .flex-active is kept as a
   forward-compatible fallback in case a future WooCommerce update adds it. */
.flex-control-thumbs li.flex-active img,
.flex-control-thumbs li[aria-current="true"] img {
	opacity: 1;
	border-color: var(--mo-color-primary);
}
/* Keyboard focus on the thumbnail <li> itself - see assets/js/product-gallery.js,
   which adds tabindex/role since WooCommerce's own markup has neither. */
.flex-control-thumbs li:focus-visible {
	outline: 2px solid var(--mo-color-focus);
	outline-offset: 2px;
	border-radius: var(--mo-radius);
}

/* --- Summary column -------------------------------------------------- */
.summary .product_title {
	margin-bottom: var(--mo-space-2);
}
.summary .woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: var(--mo-space-2);
	margin-bottom: var(--mo-space-3);
}
.summary .price {
	display: block;
	font-size: var(--mo-text-2xl);
	margin-bottom: var(--mo-space-4);
}
.summary .woocommerce-product-details__short-description {
	color: var(--mo-color-body);
	margin-bottom: var(--mo-space-5);
}
.summary .woocommerce-product-details__short-description > *:last-child { margin-bottom: 0; }

/* Variations form */
.summary table.variations { width: 100%; margin-bottom: var(--mo-space-4); }
.summary table.variations td { padding: var(--mo-space-2) 0; vertical-align: middle; }
.summary table.variations label { font-weight: var(--mo-weight-medium); }
.summary .reset_variations {
	display: inline-block;
	margin-top: var(--mo-space-1);
	font-size: var(--mo-text-sm);
}
.summary .woocommerce-variation-price .price { font-size: var(--mo-text-xl); margin-bottom: var(--mo-space-2); }
.summary .woocommerce-variation-availability { margin-bottom: var(--mo-space-2); font-size: var(--mo-text-sm); color: var(--mo-color-muted); }
.summary .woocommerce-variation-availability .stock.out-of-stock { color: var(--mo-color-error); }
.summary .woocommerce-variation-availability .stock.in-stock { color: var(--mo-color-success); }
.summary .stock.out-of-stock { color: var(--mo-color-error); font-weight: var(--mo-weight-medium); }
.summary .stock.in-stock { color: var(--mo-color-success); }

/* Quantity + add-to-cart row */
.summary form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mo-space-3);
	margin-bottom: var(--mo-space-5);
}
.summary form.cart .quantity { margin: 0; }
.summary form.cart .quantity .qty { width: 5em; }
.summary form.cart .single_add_to_cart_button { min-height: 44px; }
.summary .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mo-space-3); }

/* Product meta (SKU / category / tags) */
.summary .product_meta {
	padding-top: var(--mo-space-4);
	border-top: 1px solid var(--mo-color-line);
	font-size: var(--mo-text-sm);
	color: var(--mo-color-muted);
}
.summary .product_meta > span { display: block; margin-bottom: var(--mo-space-1); }
.summary .product_meta a { color: var(--mo-color-primary-600); }

/* --- Tabs ------------------------------------------------------------- */
.woocommerce-tabs { margin-top: var(--mo-space-8); }
.woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mo-space-2);
	margin: 0 0 var(--mo-space-5);
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--mo-color-line);
}
.woocommerce-tabs ul.tabs li { margin: 0; }
.woocommerce-tabs ul.tabs li a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 var(--mo-space-2);
	color: var(--mo-color-muted);
	font-weight: var(--mo-weight-medium);
	text-decoration: none;
	border-bottom: 3px solid transparent;
}
.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li a:hover {
	color: var(--mo-color-ink);
	border-bottom-color: var(--mo-color-primary);
}
.woocommerce-tabs .panel { color: var(--mo-color-body); }
.woocommerce-tabs .panel > h2:first-child { margin-bottom: var(--mo-space-4); }

.woocommerce-tabs table.shop_attributes {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--mo-space-4);
}
.woocommerce-tabs table.shop_attributes th,
.woocommerce-tabs table.shop_attributes td {
	padding: var(--mo-space-2) var(--mo-space-3);
	border: 1px solid var(--mo-color-line);
	text-align: left;
}
.woocommerce-tabs table.shop_attributes th { background: var(--mo-color-canvas-alt); font-weight: var(--mo-weight-medium); }

/* Reviews tab */
#reviews .comment-form-rating label,
#reviews .comment-form-comment label,
#reviews .comment-form-author label,
#reviews .comment-form-email label { display: block; margin-bottom: var(--mo-space-1); font-weight: var(--mo-weight-medium); }
#reviews #comments { list-style: none; margin: 0 0 var(--mo-space-5); padding: 0; }
#reviews .comment { margin-bottom: var(--mo-space-4); padding-bottom: var(--mo-space-4); border-bottom: 1px solid var(--mo-color-line); }
#reviews .comment_container { display: flex; gap: var(--mo-space-3); }
#reviews .avatar { border-radius: 50%; flex: 0 0 auto; }
#reviews .comment-text { flex: 1 1 auto; min-width: 0; }
#reviews .star-rating { margin-bottom: var(--mo-space-1); }

/* --- Related products / upsells --------------------------------------- */
.related.products,
.up-sells.upsells.products {
	margin-top: var(--mo-space-8);
	padding-top: var(--mo-space-6);
	border-top: 1px solid var(--mo-color-line);
}
.related.products > h2,
.up-sells.upsells.products > h2 {
	margin-bottom: var(--mo-space-5);
	font-size: var(--mo-text-2xl);
}

/* --- Checkout two-column layout --------------------------------- */
.woocommerce-checkout .col2-set { max-width: 100%; }
@media (max-width: 768px) {
	.woocommerce-checkout .col2-set .col-1,
	.woocommerce-checkout .col2-set .col-2 { float: none; width: 100%; }
}

/* --- Quantity input touch target -------------------------------- */
.woocommerce .quantity .qty { min-height: 44px; }