/**
 * M M Sanidaz — Product Card
 * ------------------------------------------------------------------
 * Restyles the existing OceanWP/WooCommerce product-card markup
 * (owp-archive-product.php + WooCommerce core loop hooks). No template
 * override — this is CSS plus the two new elements introduced via hooks
 * in MM Sanidaz Core (discount badge, discount-percent text).
 *
 * Structure being styled (confirmed from the rendered page, not guessed):
 *   li.product                          — card
 *     ul.woo-entry-inner
 *       li.image-wrap                   — image + sale badge + quick view
 *       li.title
 *       li.price-wrap
 *       li.rating
 *       li.btn-wrap                     — add-to-cart / quick add
 *     .tinvwl-loop-button-wrapper       — wishlist (sibling of the list above)
 */

/* PRIMARY FIX (found via live browser inspection, not guessed): the
   product loop wrapper carries OceanWP's own legacy column-grid classes
   —  <ul class="products oceanwp-row ... tablet-3-col mobile-2-col"> —
   alongside WooCommerce's. OceanWP's assets/css/style.min.css defines
   `body .oceanwp-row .span_1_of_3 { width: 33.33% }` (and .span_1_of_4,
   .span_1_of_2, etc., scoped only by the .oceanwp-row ancestor, no
   !important). Every <li class="product"> ALSO carries one of these
   span_1_of_N classes. Turning the <ul> into a CSS Grid does not remove
   that legacy width — so each card was rendering at ~33% of its own grid
   *column* (a column inside a column), not 33% of the row: at a 3-column
   grid with ~260px tracks, that's a ~87px card. This was never
   overridden because this stylesheet never set `width` on .product at
   all, so OceanWP's lower-specificity-but-only-rule-in-play won by
   default. Fixed below by explicitly setting width to 100% of the grid
   track — this selector's specificity already exceeds every
   .span_1_of_N/.oceanwp-row variant OceanWP defines, so no !important
   is needed once the property is actually set. Negative margin from
   .oceanwp-row (a gutter-compensation trick for the old float layout)
   is neutralized too, since CSS Grid's `gap` now owns spacing. */
.woocommerce ul.products.oceanwp-row {
	margin: 0;
}

/* Shop page chrome (title/breadcrumb block, then the grid/list + sort
   toolbar, then the product grid) — confirmed structure:
   header.page-header > #content-wrap > .woocommerce-notices-wrapper +
   .oceanwp-toolbar + ul.products. Tightened so the page reads as one
   intentional block rather than three loosely-stacked sections. */
.woocommerce-page .page-header .page-header-inner {
	padding-top: var(--mmsc-space-5);
	padding-bottom: var(--mmsc-space-4);
}

.woocommerce-page .page-header .page-header-title {
	font-family: var(--mmsc-font-heading);
	margin-bottom: var(--mmsc-space-2);
}

.woocommerce .oceanwp-toolbar {
	margin-bottom: var(--mmsc-space-4);
	padding-top: 0;
	padding-bottom: var(--mmsc-space-3);
	border-bottom: 1px solid var(--mmsc-color-border);
	font-family: var(--mmsc-font-body);
}

#content-wrap.container {
	padding-top: var(--mmsc-space-4);
}

.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--mmsc-space-3) var(--mmsc-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 600px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1024px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--mmsc-space-5);
	}
}

/* Deliberately no resting background/border/shadow on the card itself —
   that "boxed component" look (a white card floating in a gutter, on an
   already-white page) was flagged as reading like a default WooCommerce
   grid rather than an editorial fashion layout. The only "container"
   styling lives on .image-wrap below; the card is otherwise just
   transparently-stacked content. */
.woocommerce ul.products li.product {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 100%;
	min-width: 0; /* let grid children shrink instead of overflowing */
	float: none;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	background: transparent;
}

/* Found via live browser measurement at mobile (375px) and tablet widths
   — the base rule above was NOT enough at those sizes specifically. A
   THIRD, separate legacy width mechanism exists beyond the two already
   documented above: Ocean Extra's own plugin CSS
   (assets/css/woo/wooCommerce.css) sets, inside its own media queries,
     @media (481px–768px): .products.tablet-3-col .product { width: 33.33% !important; }
     @media (max-width:480px): .products.mobile-2-col .product { width: 50% !important; }
   using !important, which no non-important rule can beat regardless of
   specificity — confirmed by measuring an actual card at 375px: 80.375px
   (exactly 50% of its 160.75px grid track), even after the base fix
   above. Their selector also has 4 classes (.woocommerce.products
   .mobile-2-col.product) vs this stylesheet's 3, so simply adding
   !important without also raising specificity would still lose on the
   class-count tiebreak — `.oceanwp-row` (already present on the live
   <ul>) is added here to reach 4 classes + keep this rule's 2 element
   selectors, which wins the type-count tiebreak once class counts tie. */
.woocommerce ul.products.oceanwp-row li.product {
	width: 100% !important;
	max-width: 100% !important;
}

.woocommerce ul.products li.product .woo-entry-inner {
	display: flex;
	flex-direction: column;
	flex: 1;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Explicit visual order — confirmed via live inspection that this site's
   actual rendered order is image, title, price, button, THEN rating
   (rating last), not the image/name/price/discount/rating/action
   sequence specified. Rather than continuing to assume DOM order matches
   intent, order is set explicitly here so the visual sequence is
   guaranteed regardless of what OceanWP's element-positioning setting
   actually outputs. */
.woocommerce ul.products li.product .image-wrap {
	order: 1;
}

.woocommerce ul.products li.product .title {
	order: 2;
}

.woocommerce ul.products li.product .price-wrap {
	order: 3;
}

.woocommerce ul.products li.product .rating {
	order: 4;
}

.woocommerce ul.products li.product .btn-wrap {
	order: 5;
}

/* Image — the card's only "container": soft corners and the subtle
   resting/hover shadow both live here, so the image (the visual focus)
   reads as a deliberate object rather than the whole card behaving like
   a UI panel. */
.woocommerce ul.products li.product .image-wrap {
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: var(--mmsc-radius-md);
	background: var(--mmsc-color-bg);
	box-shadow: var(--mmsc-shadow-sm);
	transition: box-shadow var(--mmsc-transition-base);
}

.woocommerce ul.products li.product:hover .image-wrap,
.woocommerce ul.products li.product:focus-within .image-wrap {
	box-shadow: var(--mmsc-shadow-md);
}

.woocommerce ul.products li.product .image-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	transition: transform var(--mmsc-transition-base);
}

.woocommerce ul.products li.product:hover .image-wrap img,
.woocommerce ul.products li.product:focus-within .image-wrap img {
	transform: scale(1.025);
}

/* Discount badge — this is OceanWP's own existing "-N%" sale flash
   (OceanWP_WooCommerce_Config::sale_flash(), already computes the
   percentage and already handles variable products correctly; not
   reimplemented here, see class-product-pricing.php).

   Confirmed via live browser measurement (getComputedStyle against a
   real on-sale product), not assumed: there are actually TWO separate
   legacy Additional CSS rules targeting this element, not one —
     .woocommerce .onsale { animation: fastFade infinite; ... }         (no !important)
     .woocommerce span.onsale, .woocommerce .badge {
       background-color: var(--lf-deep-red) !important; color: #fff !important;
     }
   The first was already beaten on specificity alone. The second uses
   !important on background/color specifically, which a same-or-lower
   layer normal rule can never win regardless of specificity — measured
   result was literally #c62828 (the legacy deep red) before this fix.
   !important added here to match. */
.woocommerce ul.products li.product .image-wrap .onsale,
.woocommerce div.product .onsale {
	position: absolute;
	top: var(--mmsc-space-3);
	left: var(--mmsc-space-3);
	z-index: 2;
	padding: var(--mmsc-space-1) var(--mmsc-space-3);
	border-radius: var(--mmsc-radius-pill);
	background: var(--mmsc-color-sale) !important;
	color: var(--mmsc-color-surface) !important;
	font-family: var(--mmsc-font-body);
	font-size: var(--mmsc-text-xs);
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.6;
	text-transform: none;
	animation: none;
}

/* Wishlist — positioned as an overlay on the image regardless of its
   position in the DOM (it's a sibling of .woo-entry-inner within the same
   li.product, which is already position:relative above). */
.woocommerce ul.products li.product .tinvwl-loop-button-wrapper {
	position: absolute;
	top: var(--mmsc-space-3);
	right: var(--mmsc-space-3);
	z-index: 3;
}

.woocommerce ul.products li.product .tinvwl_add_to_wishlist_button {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	min-width: 40px;
	min-height: 40px;
	padding: 0;
	border-radius: var(--mmsc-radius-pill);
	background: rgba(255, 255, 255, 0.92);
	box-shadow: var(--mmsc-shadow-sm);
	/* It's an <a role="button">, not a real <button>. Confirmed via live
	   measurement that ti-woocommerce-wishlist's own plugin CSS (or a
	   default anchor color from elsewhere in the stack) was winning over
	   a non-important color here — computed value was rgb(0,122,204), a
	   plain link blue, not the token. !important added to settle it. */
	color: var(--mmsc-color-primary) !important;
	text-decoration: none !important;
	border: none;
	transition: background var(--mmsc-transition-fast), transform var(--mmsc-transition-fast);
}

.woocommerce ul.products li.product .tinvwl_add_to_wishlist_button:hover,
.woocommerce ul.products li.product .tinvwl_add_to_wishlist_button:focus-visible {
	background: var(--mmsc-color-surface);
	transform: scale(1.06);
}

/* The legacy Additional CSS forces the heart icon to a bright red
   (`#e63946 !important`) and enlarges it. Brand-consistent override: same
   !important weight is required to compete, so a higher-specificity
   selector is used to win regardless of source order (see the .onsale
   rule above for the same pattern). */
.woocommerce ul.products li.product .tinvwl-loop-button-wrapper .tinvwl_add_to_wishlist_button[class*="tinvwl-icon-heart"]::before {
	display: inline-block;
	color: var(--mmsc-color-primary) !important;
	font-size: 16px !important;
	line-height: 1 !important;
	text-decoration: none !important;
}

/* Icon-only in the card context; text is kept for screen readers. With the
   heart as a toggle (inc/wishlist.php), TI adds a "Remove from Wishlist"
   label that its CSS shows (display:inline !important) once saved — it
   spilled out beside the circle, so all its labels are hidden alike. */
.woocommerce ul.products li.product .tinvwl_add_to_wishlist-text,
.woocommerce ul.products li.product .tinvwl_remove_from_wishlist-text,
.woocommerce ul.products li.product .tinvwl_already_on_wishlist-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Title, price, rating — reserved title height (rather than pushing price
   to the bottom with a flexible spacer) keeps cards aligned without
   leaving a dead gap under short product names. */
.woocommerce ul.products li.product .title {
	padding: var(--mmsc-space-3) var(--mmsc-space-4) 0;
}

.woocommerce ul.products li.product .title h2,
.woocommerce ul.products li.product .title a {
	display: -webkit-box;
	margin: 0;
	min-height: 2.5em;
	font-family: var(--mmsc-font-body);
	font-size: var(--mmsc-text-sm);
	font-weight: 500;
	line-height: 1.25;
	color: var(--mmsc-color-text-muted);
	text-decoration: none;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.woocommerce ul.products li.product .rating {
	padding: var(--mmsc-space-1) var(--mmsc-space-4) 0;
	min-height: 1.5rem;
}

.woocommerce ul.products li.product .rating .star-rating {
	font-size: var(--mmsc-text-rating);
	opacity: 0.85;
}

/* WooCommerce core (woocommerce.min.css) hard-codes the filled-star glyph
   color via `.star-rating span::before { color:#f9ca63 }` — found via live
   inspection, not assumed. Overridden to the brand gold token; this
   selector's specificity already beats WooCommerce's, no !important
   needed. */
.woocommerce ul.products li.product .rating .star-rating span::before {
	color: var(--mmsc-color-accent);
}

.woocommerce ul.products li.product .price-wrap {
	padding: var(--mmsc-space-1) var(--mmsc-space-4) var(--mmsc-space-3);
}

.woocommerce ul.products li.product .price-wrap .price {
	font-family: var(--mmsc-font-body);
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--mmsc-space-2);
}

.woocommerce ul.products li.product .price-wrap .price ins {
	text-decoration: none;
	font-size: var(--mmsc-text-lg);
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--mmsc-color-text);
}

.woocommerce ul.products li.product .price-wrap .price del {
	font-size: var(--mmsc-text-xs);
	color: var(--mmsc-color-text-muted);
	opacity: 1;
}

.mmsc-discount-percent {
	font-family: var(--mmsc-font-body);
	font-size: var(--mmsc-text-xs);
	font-weight: 600;
	color: var(--mmsc-color-sale);
}

/* Add to cart / Quick Add / View Cart. The add-to-cart button is already
   AJAX-enabled (woocommerce_enable_ajax_add_to_cart is on) — this only
   restyles it, as a compact pill rather than a full-width block, so it
   reads as a deliberate "Quick Add" action rather than the default
   WooCommerce full-width button. Kept always visible (not hover-only):
   the wishlist icon is a sibling of the image, not the image's child, so
   a hover-reveal overlay would sit at the bottom of the whole card and
   risk covering the price — not attempted without being able to see the
   actual result.

   Both selectors below are needed, not just one: WooCommerce's default
   "Add to cart" link carries class add_to_cart_button, but the "View
   Cart" replacement MM Sanidaz Core renders once a product is already in
   the cart (class-cart-experience.php) uses class added-to-cart instead
   — found via inspection that added-to-cart was matching NONE of this
   stylesheet's rules and falling back to unstyled/legacy button CSS.

   Note: the legacy Additional CSS's `.button{color:#0a0909 !important}`
   rule also matches both (WooCommerce/this plugin render them with a
   .button class too) — color needs !important here specifically to
   compete with that, even though nothing else on this rule does. */
.woocommerce ul.products li.product .btn-wrap {
	padding: 0 var(--mmsc-space-4) var(--mmsc-space-4);
	margin-top: auto;
}

/* Found via live testing (actually clicking Quick Add and inspecting the
   result, not assumed): WooCommerce's own AJAX success handler does NOT
   replace the button — it leaves the original "Add to cart" link in the
   DOM (with an `added` class appended) and inserts a SEPARATE new link,
   `<a class="added_to_cart wc-forward">View cart</a>`, right after it.
   Neither this stylesheet's `.added-to-cart` rule (that's this site's
   own PHP-rendered swap, class-cart-experience.php, which only affects
   a fresh page load, not the AJAX-appended link) nor `.add_to_cart_button`
   ever matched WooCommerce's native `.added_to_cart` element — so after
   an AJAX add, the card was showing BOTH buttons stacked, which is
   exactly the "View Cart becomes much larger" symptom. Fixed by hiding
   the original button once WooCommerce marks it `.added`, and styling
   the native `.added_to_cart` link identically to the others. */
.woocommerce ul.products li.product .product-inner a.add_to_cart_button.added {
	display: none;
}

.woocommerce ul.products li.product .product-inner a.add_to_cart_button,
.woocommerce ul.products li.product .product-inner a.added-to-cart,
.woocommerce ul.products li.product .product-inner a.added_to_cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--mmsc-space-1);
	width: 100%;
	max-width: 100%;
	padding: var(--mmsc-space-2) var(--mmsc-space-3);
	min-height: 40px; /* mobile-friendly tap target */
	border-radius: var(--mmsc-radius-pill);
	background: transparent;
	color: var(--mmsc-color-primary) !important;
	font-family: var(--mmsc-font-body);
	/* Found via live inspection: a separate legacy rule,
	   `.added_to_cart{font-size:20px !important}`, inflated both this
	   element's text and (via line-height) its overall height beyond the
	   original button's — !important required here too, not just on
	   color, to actually win. */
	font-size: var(--mmsc-text-button) !important;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	border: 1px solid var(--mmsc-color-primary);
	cursor: pointer;
	box-sizing: border-box;
	transition: background var(--mmsc-transition-fast), color var(--mmsc-transition-fast);
}

.woocommerce ul.products li.product .product-inner a.add_to_cart_button::before {
	content: '+';
	font-weight: 600;
}

.woocommerce ul.products li.product .product-inner a.add_to_cart_button:hover,
.woocommerce ul.products li.product .product-inner a.add_to_cart_button:focus-visible {
	background: var(--mmsc-color-primary);
	color: var(--mmsc-color-surface) !important;
}

/* View Cart: a distinct filled/solid state (rather than Quick Add's
   outline) so "this product is already in your cart" is visually
   unambiguous at a glance, using the same pill shape and type scale.
   Covers both the PHP-rendered swap (.added-to-cart, page-reload case)
   and WooCommerce's own AJAX-inserted link (.added_to_cart, the
   immediate-feedback case) identically.

   Color system: this is the site's "primary/filled" button role (deep
   espresso), distinct from the rose brand-accent used for the Quick Add
   outline above — border-color is set explicitly too, since the shared
   base rule above gives every button a rose border and this fill would
   otherwise sit inside a mismatched rose ring. */
.woocommerce ul.products li.product .product-inner a.added-to-cart,
.woocommerce ul.products li.product .product-inner a.added_to_cart {
	background: var(--mmsc-color-dark);
	border-color: var(--mmsc-color-dark);
	color: var(--mmsc-color-surface) !important;
}

.woocommerce ul.products li.product .product-inner a.added-to-cart:hover,
.woocommerce ul.products li.product .product-inner a.added-to-cart:focus-visible,
.woocommerce ul.products li.product .product-inner a.added_to_cart:hover,
.woocommerce ul.products li.product .product-inner a.added_to_cart:focus-visible {
	background: var(--mmsc-color-dark-hover);
	border-color: var(--mmsc-color-dark-hover);
}

.woocommerce ul.products li.product .product-inner a.add_to_cart_button:focus-visible,
.woocommerce ul.products li.product .product-inner a.added-to-cart:focus-visible,
.woocommerce ul.products li.product .product-inner a.added_to_cart:focus-visible {
	outline: 2px solid var(--mmsc-color-accent);
	outline-offset: 2px;
}

.woocommerce ul.products li.product .product-inner a.add_to_cart_button.loading {
	opacity: 0.6;
	pointer-events: none;
}

/* Out of stock */
.woocommerce ul.products li.product .outofstock-badge,
.woocommerce ul.products li.product p.stock.out-of-stock {
	font-family: var(--mmsc-font-body);
	font-size: var(--mmsc-text-xs);
	color: var(--mmsc-color-text-muted);
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce ul.products li.product .image-wrap,
	.woocommerce ul.products li.product .image-wrap img,
	.woocommerce ul.products li.product .tinvwl_add_to_wishlist_button,
	.woocommerce ul.products li.product .product-inner a.add_to_cart_button,
	.woocommerce ul.products li.product .product-inner a.added-to-cart {
		transition: none;
	}

	.woocommerce ul.products li.product:hover .image-wrap img {
		transform: none;
	}
}

/* Entrance (assets/js/product-motion.js) ------------------------------
   Cards below the fold, and each batch the Shop's continuous loading
   adds, rise 30px (20px on phones) and fade in once, lightly staggered.
   Only opacity/transform animate (compositor-only, no layout). The
   pending state exists only while the script runs (html.mmsc-motion) and
   never under reduced motion, so a card can't be left invisible. */

@media (prefers-reduced-motion: no-preference) {
	.mmsc-motion ul.products > li.product.mmsc-card-pending {
		opacity: 0;
		transform: translate3d(0, 30px, 0);
	}

	.mmsc-motion ul.products > li.product.mmsc-card-enter {
		animation: mmsc-card-in 560ms cubic-bezier(0.22, 0.61, 0.36, 1) var(--mmsc-card-delay, 0ms) both;
	}

	@keyframes mmsc-card-in {
		from {
			opacity: 0;
			transform: translate3d(0, var(--mmsc-card-rise, 30px), 0);
		}
		to {
			opacity: 1;
			transform: none;
		}
	}

	@media (max-width: 767px) {
		.mmsc-motion ul.products > li.product.mmsc-card-pending {
			transform: translate3d(0, 20px, 0);
		}

		.mmsc-motion ul.products > li.product {
			--mmsc-card-rise: 20px;
		}
	}
}

/* =================================================================
   Shared card: Shop + Homepage (body.mmsc-cards)
   -----------------------------------------------------------------
   Every page with Quick Add (Shop, category/tag archives, search, the
   Homepage grids) gets body.mmsc-cards (inc/product-card.php), so both
   pages render ONE card from the same WooCommerce markup:

     photo (nothing on top of it)
     name
     price · MRP · discount
     [ + Quick Add | View Cart ]  [heart]

   Nothing here changes Quick Add behavior — quick-add.js still handles
   the same .add_to_cart_button link.

   Selectors use `body.mmsc-cards ul.products.oceanwp-row li.product` to
   out-rank the base rules above, OceanWP's woo CSS and the legacy
   Customizer CSS (white card box, red hover shadow, 20px `.amount`,
   column-stacked `.price`), using !important only where those sources
   already do.
   ================================================================= */

/* Grid */

body.mmsc-cards ul.products.oceanwp-row {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--mmsc-space-6) var(--mmsc-space-3);
}

@media (min-width: 600px) {
	body.mmsc-cards ul.products.oceanwp-row {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--mmsc-space-7) var(--mmsc-space-5);
	}
}

@media (min-width: 1024px) {
	body.mmsc-cards ul.products.oceanwp-row {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* The .clr clearfix ::after on the <ul> becomes a real (empty) grid item,
   adding a phantom last row plus one row-gap of dead space under the grid. */
body.mmsc-cards ul.products.oceanwp-row::before,
body.mmsc-cards ul.products.oceanwp-row::after {
	display: none;
}

/* Card */

/* Found via live measurement: each card carried an inherited 80px
   margin-top (legacy rule), which the grid added on top of its own row
   gap. No box/shadow: the card is the photo plus its text. */
body.mmsc-cards ul.products.oceanwp-row li.product {
	margin: 0 !important;
	background: transparent;
	box-shadow: none;
	border: 0;
}

body.mmsc-cards ul.products.oceanwp-row li.product:hover {
	box-shadow: none;
}

/* Card → .product-inner → .woo-entry-inner all stretch to the grid row's
   height, so the action row (margin-top: auto below) sits at the bottom
   of every card in a row, level with the bottom-pinned wishlist — found
   at 1024px, where one card's wrapped price made its row taller. */
body.mmsc-cards ul.products.oceanwp-row li.product .product-inner {
	display: flex;
	flex-direction: column;
	flex: 1;
}

body.mmsc-cards ul.products.oceanwp-row li.product .woo-entry-inner {
	flex: 1;
	text-align: left;
}

/* Photo — 3:4, fully visible: no badge, button or wishlist on top. */
body.mmsc-cards ul.products.oceanwp-row li.product .woo-entry-inner li.image-wrap {
	margin: 0; /* OceanWP adds 20px here */
	border-radius: var(--mmsc-radius-md);
	background: var(--mmsc-color-border);
	box-shadow: none;
}

body.mmsc-cards ul.products.oceanwp-row li.product:hover .image-wrap,
body.mmsc-cards ul.products.oceanwp-row li.product:focus-within .image-wrap {
	box-shadow: none;
}

/* The current catalog thumbnails have a thin dark/white band baked into
   their bottom rows (confirmed by sampling the image pixels — it's in the
   file, not CSS). Scaling the photo 3% from its top edge lets the frame's
   overflow:hidden crop that band off without touching the product
   images themselves. The hover zoom continues from there. */
body.mmsc-cards ul.products.oceanwp-row li.product .image-wrap img {
	display: block;
	transform: scale(1.03);
	transform-origin: center top;
}

body.mmsc-cards ul.products.oceanwp-row li.product:hover .image-wrap img,
body.mmsc-cards ul.products.oceanwp-row li.product:focus-within .image-wrap img {
	transform: scale(1.055);
}

/* OceanWP's hover "Quick View" strip covered the bottom of the photo. */
body.mmsc-cards ul.products.oceanwp-row li.product .owp-quick-view {
	display: none !important;
}

/* The sale badge now renders in the price block (inc/product-card.php);
   this only guards against any other code printing one on the photo. */
body.mmsc-cards ul.products.oceanwp-row li.product .image-wrap .onsale {
	display: none !important;
}

body.mmsc-cards ul.products.oceanwp-row li.product .woo-desc {
	display: none;
}

/* Name */

body.mmsc-cards ul.products.oceanwp-row li.product .title {
	margin: 0;
	padding: var(--mmsc-space-3) 0 0;
}

/* Two-line name slot reserved on the link only (the base rules clamp both
   the h2 and the link, and the nested boxes added extra height). */
body.mmsc-cards ul.products.oceanwp-row li.product .title h2 {
	display: block;
	min-height: 0;
	margin: 0;
	padding: 0;
}

body.mmsc-cards ul.products.oceanwp-row li.product .title h2,
body.mmsc-cards ul.products.oceanwp-row li.product .title a {
	font-family: var(--mmsc-font-body);
	font-size: var(--mmsc-text-sm);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0;
	text-align: left;
	color: var(--mmsc-color-text);
}

body.mmsc-cards ul.products.oceanwp-row li.product .title a {
	min-height: 2.8em;
}

body.mmsc-cards ul.products.oceanwp-row li.product .title a:hover {
	color: var(--mmsc-color-sale);
}

/* Price · MRP · discount */

body.mmsc-cards ul.products.oceanwp-row li.product .price-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px var(--mmsc-space-2);
	margin: 0;
	padding: 6px 0 0;
}

/* A legacy rule stacks the price parts in a column; one row reads as a
   single price line. */
body.mmsc-cards ul.products.oceanwp-row li.product .price-wrap .price {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: baseline;
	gap: 2px var(--mmsc-space-2);
	margin: 0;
	line-height: 1.3;
}

body.mmsc-cards ul.products.oceanwp-row li.product .price-wrap .price del,
body.mmsc-cards ul.products.oceanwp-row li.product .price-wrap .price ins {
	line-height: 1.3;
}

/* Selling price leads, MRP follows. Sizes sit on the .amount spans
   themselves: the legacy Customizer CSS sizes `.amount` (and its bdi /
   currency symbol) at 20px directly. */
body.mmsc-cards ul.products.oceanwp-row li.product .price-wrap .price ins {
	order: 1;
}

body.mmsc-cards ul.products.oceanwp-row li.product .price-wrap .price del {
	order: 2;
}

body.mmsc-cards ul.products.oceanwp-row li.product .price-wrap .price .amount {
	font-size: var(--mmsc-text-base);
	font-weight: 600;
	letter-spacing: -0.01em;
}

body.mmsc-cards ul.products.oceanwp-row li.product .price-wrap .price del .amount {
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0;
}

body.mmsc-cards ul.products.oceanwp-row li.product .price-wrap .price .amount bdi,
body.mmsc-cards ul.products.oceanwp-row li.product .price-wrap .price .amount .woocommerce-Price-currencySymbol {
	font-size: inherit;
	font-weight: inherit;
}

/* Discount — the real sale flash (OceanWP / MM Sanidaz Core compute the
   percentage), now a small tinted tag beside the price instead of a badge
   on the photo. Every positioning property OceanWP / legacy CSS sets on
   .onsale (absolute, top: 7rem !important on mobile, red fill
   !important, blinking animation) is reset here. */
body.mmsc-cards ul.products.oceanwp-row li.product .price-wrap .onsale {
	position: static !important;
	top: auto !important;
	left: auto !important;
	display: inline-flex;
	align-items: center;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 2px 6px;
	border-radius: var(--mmsc-radius-sm);
	background: rgba(169, 101, 111, 0.12) !important;
	color: var(--mmsc-color-sale) !important;
	box-shadow: none;
	font-family: var(--mmsc-font-body);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	animation: none;
}

/* Simple products also get MM Sanidaz Core's "N% off" text inside the
   price; with the tag beside it, that would say the same thing twice. */
body.mmsc-cards ul.products.oceanwp-row li.product .price-wrap:has(.onsale) .mmsc-discount-percent {
	display: none;
}

body.mmsc-cards ul.products.oceanwp-row li.product .rating {
	min-height: 0;
	padding: var(--mmsc-space-1) 0 0;
}

body.mmsc-cards ul.products.oceanwp-row li.product .rating:not(:has(.star-rating)) {
	display: none;
}

/* Action row: + Quick Add / View Cart, wishlist beside it */

/* Pinned to the bottom of the card (the card is a flex column), so the
   actions line up across a row even when names or prices wrap. Right
   padding leaves room for the wishlist button. */
body.mmsc-cards ul.products.oceanwp-row li.product .btn-wrap {
	position: static;
	margin: auto 0 0;
	padding: var(--mmsc-space-3) 48px 0 0;
	text-align: left;
}

body.mmsc-cards ul.products.oceanwp-row li.product .product-inner a.add_to_cart_button,
body.mmsc-cards ul.products.oceanwp-row li.product .product-inner a.added-to-cart,
body.mmsc-cards ul.products.oceanwp-row li.product .product-inner a.added_to_cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	height: 40px;
	min-height: 40px;
	margin: 0;
	padding: 0 var(--mmsc-space-3) !important;
	border: 1px solid var(--mmsc-color-dark) !important;
	border-radius: var(--mmsc-radius-pill);
	box-shadow: none;
	font-size: 13px !important;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: none;
}

/* + Quick Add: outlined. */
body.mmsc-cards ul.products.oceanwp-row li.product .product-inner a.add_to_cart_button {
	background: transparent !important;
	color: var(--mmsc-color-text) !important;
}

body.mmsc-cards ul.products.oceanwp-row li.product .product-inner a.add_to_cart_button::before {
	content: '';
	flex: 0 0 12px;
	width: 12px;
	height: 12px;
	background:
		linear-gradient(currentColor, currentColor) center / 12px 1.5px no-repeat,
		linear-gradient(currentColor, currentColor) center / 1.5px 12px no-repeat;
}

body.mmsc-cards ul.products.oceanwp-row li.product .product-inner a.add_to_cart_button:hover,
body.mmsc-cards ul.products.oceanwp-row li.product .product-inner a.add_to_cart_button:focus-visible {
	background: var(--mmsc-color-dark) !important;
	color: var(--mmsc-color-surface) !important;
}

/* Once WooCommerce marks it .added, its "View cart" link takes its place
   (same behavior as the base rules above). */
body.mmsc-cards ul.products.oceanwp-row li.product .product-inner a.add_to_cart_button.added {
	display: none;
}

/* View Cart (reload: .added-to-cart; right after an AJAX add:
   WooCommerce's .added_to_cart): filled, so "already in your cart" reads
   at a glance. */
body.mmsc-cards ul.products.oceanwp-row li.product .product-inner a.added-to-cart,
body.mmsc-cards ul.products.oceanwp-row li.product .product-inner a.added_to_cart {
	background: var(--mmsc-color-dark);
	color: var(--mmsc-color-surface) !important;
}

/* Wishlist: beside the action button, off the photo. It's a sibling of
   the card's inner list (positioned against li.product), so it's pinned
   to the card's bottom-right — the same row as the action button. */
body.mmsc-cards ul.products.oceanwp-row li.product .tinvwl-loop-button-wrapper {
	display: flex;
	top: auto !important;
	right: 0;
	bottom: 0;
	margin: 0;
}

body.mmsc-cards ul.products.oceanwp-row li.product .tinvwl-loop-button-wrapper .tinv-wishlist-clear,
body.mmsc-cards ul.products.oceanwp-row li.product .tinvwl-loop-button-wrapper .tinvwl-tooltip {
	display: none;
}

body.mmsc-cards ul.products.oceanwp-row li.product .tinvwl_add_to_wishlist_button {
	width: 40px;
	height: 40px;
	min-width: 40px;
	min-height: 40px;
	margin: 0;
	border: 1px solid var(--mmsc-color-border);
	background: var(--mmsc-color-surface);
	box-shadow: none;
}

body.mmsc-cards ul.products.oceanwp-row li.product .tinvwl_add_to_wishlist_button:hover,
body.mmsc-cards ul.products.oceanwp-row li.product .tinvwl_add_to_wishlist_button:focus-visible {
	border-color: var(--mmsc-color-primary);
	background: var(--mmsc-color-surface);
	transform: none;
}

/* Heart glyph. TI's icon-font heart sat off-centre in its circle (the font
   glyph carries its own baseline + side bearing, and the legacy Additional
   CSS enlarges it to 28px !important with `color: #e63946`). Replaced with a
   drawn 1.5px outline heart — the same stroke weight as the site's other
   line icons — painted through a mask on the pseudo-element, so it is
   optically centred in the circle at any size. TI keeps full control of the
   state: `.tinvwl-product-in-list` (added by TI's own script once the item
   is saved) switches to the filled heart.

   The Wishlist's remove control (inc/wishlist.php) is TI's real
   `button[name="tinvwl-remove"]`, drawn as the same filled heart. */
body.mmsc-cards ul.products.oceanwp-row li.product .tinvwl-loop-button-wrapper .tinvwl_add_to_wishlist_button[class*="tinvwl-icon-heart"]::before,
body.mmsc-cards ul.products.oceanwp-row li.product .tinvwl-loop-button-wrapper .mmsc-wishlist-heart::before {
	content: '' !important;
	display: block;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 0 !important;
	font-size: 0 !important; /* legacy: 28px !important */
	line-height: 0 !important;
	background-color: var(--mmsc-color-text);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M12 20.4s-7.9-4.7-7.9-10.3A4.4 4.4 0 0 1 12 7.4a4.4 4.4 0 0 1 7.9 2.7c0 5.6-7.9 10.3-7.9 10.3Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M12 20.4s-7.9-4.7-7.9-10.3A4.4 4.4 0 0 1 12 7.4a4.4 4.4 0 0 1 7.9 2.7c0 5.6-7.9 10.3-7.9 10.3Z'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: background-color var(--mmsc-transition-fast), transform var(--mmsc-transition-fast);
}

body.mmsc-cards ul.products.oceanwp-row li.product .tinvwl-loop-button-wrapper .tinvwl_add_to_wishlist_button:hover::before,
body.mmsc-cards ul.products.oceanwp-row li.product .tinvwl-loop-button-wrapper .tinvwl_add_to_wishlist_button:focus-visible::before {
	background-color: var(--mmsc-color-sale);
}

body.mmsc-cards ul.products.oceanwp-row li.product .tinvwl-loop-button-wrapper .tinvwl_add_to_wishlist_button.tinvwl-product-in-list::before,
body.mmsc-cards ul.products.oceanwp-row li.product .tinvwl-loop-button-wrapper .mmsc-wishlist-heart::before {
	background-color: var(--mmsc-color-sale);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M12 20.4s-7.9-4.7-7.9-10.3A4.4 4.4 0 0 1 12 7.4a4.4 4.4 0 0 1 7.9 2.7c0 5.6-7.9 10.3-7.9 10.3Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M12 20.4s-7.9-4.7-7.9-10.3A4.4 4.4 0 0 1 12 7.4a4.4 4.4 0 0 1 7.9 2.7c0 5.6-7.9 10.3-7.9 10.3Z'/%3E%3C/svg%3E");
}

body.mmsc-cards ul.products.oceanwp-row li.product .tinvwl-loop-button-wrapper .tinvwl_add_to_wishlist_button.tinvwl-product-in-list {
	border-color: rgba(169, 101, 111, 0.35);
}

/* The Wishlist's remove heart: same circle as the add heart. Background and
   colour need !important against legacy
   `.page-id-1288 button[name="tinvwl-remove"] { background-color: red
   !important; color: white !important }`. */
body.mmsc-cards ul.products.oceanwp-row li.product .tinvwl-loop-button-wrapper button.mmsc-wishlist-heart {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	min-width: 40px;
	min-height: 40px;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(169, 101, 111, 0.35);
	border-radius: var(--mmsc-radius-pill);
	background: var(--mmsc-color-surface) !important;
	box-shadow: none;
	color: var(--mmsc-color-sale) !important;
	cursor: pointer;
	transition: border-color var(--mmsc-transition-fast);
}

body.mmsc-cards ul.products.oceanwp-row li.product .tinvwl-loop-button-wrapper button.mmsc-wishlist-heart:hover,
body.mmsc-cards ul.products.oceanwp-row li.product .tinvwl-loop-button-wrapper button.mmsc-wishlist-heart:focus-visible {
	border-color: var(--mmsc-color-sale);
}

body.mmsc-cards ul.products.oceanwp-row li.product .tinvwl-loop-button-wrapper button.mmsc-wishlist-heart:focus-visible,
body.mmsc-cards ul.products.oceanwp-row li.product .tinvwl_add_to_wishlist_button:focus-visible {
	outline: 2px solid var(--mmsc-color-accent);
	outline-offset: 2px;
}

body.mmsc-cards ul.products.oceanwp-row li.product .tinvwl-loop-button-wrapper button.mmsc-wishlist-heart.inited-wishlist-action {
	opacity: 0.55;
	pointer-events: none;
}

/* Touch screens: 44px targets. */
@media (max-width: 767px) {
	body.mmsc-cards ul.products.oceanwp-row li.product .btn-wrap {
		padding-right: 50px;
	}

	body.mmsc-cards ul.products.oceanwp-row li.product .product-inner a.add_to_cart_button,
	body.mmsc-cards ul.products.oceanwp-row li.product .product-inner a.added-to-cart,
	body.mmsc-cards ul.products.oceanwp-row li.product .product-inner a.added_to_cart {
		height: 44px;
		min-height: 44px;
		padding: 0 var(--mmsc-space-2) !important;
	}

	body.mmsc-cards ul.products.oceanwp-row li.product .tinvwl_add_to_wishlist_button,
	body.mmsc-cards ul.products.oceanwp-row li.product .tinvwl-loop-button-wrapper button.mmsc-wishlist-heart {
		width: 44px;
		height: 44px;
		min-width: 44px;
		min-height: 44px;
	}
}

/* Narrow cards (two-up on small phones, or any phone with enlarged system
   text): the action row adapts to the CARD's width, not the viewport's, so
   "+ Quick Add" / "View cart" always fit their pill beside the heart instead
   of being clipped. Each card is a size container. */
body.mmsc-cards ul.products.oceanwp-row li.product {
	container-type: inline-size;
}

body.mmsc-cards ul.products.oceanwp-row li.product .product-inner a.add_to_cart_button,
body.mmsc-cards ul.products.oceanwp-row li.product .product-inner a.added-to-cart,
body.mmsc-cards ul.products.oceanwp-row li.product .product-inner a.added_to_cart {
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
}

@container (max-width: 200px) {
	body.mmsc-cards ul.products.oceanwp-row li.product .btn-wrap {
		padding-right: 48px;
	}

	body.mmsc-cards ul.products.oceanwp-row li.product .product-inner a.add_to_cart_button,
	body.mmsc-cards ul.products.oceanwp-row li.product .product-inner a.added-to-cart,
	body.mmsc-cards ul.products.oceanwp-row li.product .product-inner a.added_to_cart {
		gap: 4px;
		padding: 0 6px !important;
		font-size: clamp(12px, 8.5cqi, 13px) !important;
		letter-spacing: 0;
	}

	body.mmsc-cards ul.products.oceanwp-row li.product .product-inner a.add_to_cart_button::before {
		flex-basis: 10px;
		width: 10px;
		height: 10px;
		background-size: 10px 1.5px, 1.5px 10px;
	}

	/* WooCommerce's bag glyph after "View cart". */
	body.mmsc-cards ul.products.oceanwp-row li.product .product-inner a.added_to_cart::after,
	body.mmsc-cards ul.products.oceanwp-row li.product .product-inner a.added-to-cart::after {
		display: none;
	}
}


@media (prefers-reduced-motion: reduce) {
	body.mmsc-cards ul.products.oceanwp-row li.product:hover .image-wrap img,
	body.mmsc-cards ul.products.oceanwp-row li.product:focus-within .image-wrap img {
		transform: scale(1.03);
	}
}