/* ==========================================================================
   Mauve Elementor — single product widgets (Product Layouts)
   Product Title / Images / Price / Rating / Short description / Add to cart /
   Meta / Stock / Tabs / Description / Breadcrumbs / Navigation.
   Class prefix msw- (the theme's icon font owns .ms-*). Values that the
   controls set arrive as CSS variables on the widget root; everything else
   is a neutral default.

   Specificity: the layout renders inside WooCommerce's `div.product` wrapper
   on a `body.woocommerce` page, so the theme's and WooCommerce's own rules —
   `.woocommerce div.product div.images { width: 38% }`,
   `.woocommerce div.product div.images .flex-control-thumbs li { width: 25%; float: left }`,
   `.woocommerce div.product form.cart .variations th { display: block }`,
   `.woocommerce div.product .woocommerce-product-rating > a { display: none }` —
   all apply to our markup. Every rule below that has to win is written with the
   three root classes (`.msw.msw-single.msw-product-x`), which outranks them.
   ========================================================================== */

.msw-single { position: relative; }

/* "Sample" badge on editor-only sample content */
.msw-single .msw-sample-tag {
	position: absolute;
	z-index: 20;
	top: -9px;
	right: 0;
	padding: 3px 7px;
	border-radius: 3px;
	background: #f6e3d6;
	color: #8a3a12;
	font: 600 10px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	pointer-events: auto;
}

/* ---------------------------------------------------------------- title */
.msw.msw-single.msw-product-title .msw-product-title__text { display: block; margin: 0; }
.msw.msw-single.msw-product-title .msw-product-title__text a { color: inherit; text-decoration: none; }

/* ---------------------------------------------------------------- price */
.msw.msw-single.msw-product-price .msw-product-price__value.price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: var(--ms-align, flex-start);
	gap: var(--ms-price-gap, 0.45em);
	margin: 0;
	font-size: inherit;
	color: inherit;
}
.msw.msw-single.msw-product-price .msw-product-price__value del { opacity: var(--ms-price-del-opacity, 0.55); text-decoration: line-through; }
.msw.msw-single.msw-product-price .msw-product-price__value ins { text-decoration: none; background: none; }

/* --------------------------------------------------------------- rating */
.msw.msw-single.msw-product-rating .msw-product-rating__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: var(--ms-align, flex-start);
	gap: var(--ms-rating-gap, 8px);
	margin: 0;
	font-size: inherit;
}
.msw.msw-single.msw-product-rating .star-rating { font-size: var(--ms-star-size, 1em); margin: 0; flex: 0 0 auto; float: none; }
.msw.msw-single.msw-product-rating .woocommerce-product-rating > a.woocommerce-review-link { display: inline; text-decoration: none; }

/* ------------------------------------------- short / long description */
.msw.msw-single .msw-product-excerpt__text > :first-child,
.msw.msw-single .msw-product-description__text > :first-child { margin-top: 0; }
.msw.msw-single .msw-product-excerpt__text > :last-child,
.msw.msw-single .msw-product-description__text > :last-child { margin-bottom: 0; }

/* ---------------------------------------------------------- add to cart
   Layout "theme" (default) leaves the theme's own product-page form styling alone (its
   column layout, rounded fields, the - / + quantity buttons, the pill button); only the
   controls' variables are applied. "inline" and "stacked" impose a layout on top. */
.msw.msw-single.msw-product-cart form.cart { margin: 0; gap: var(--ms-cart-gap, 12px); }
.msw.msw-single.msw-product-cart form.cart > .stock { margin: 0; }
.msw.msw-single.msw-product-cart form.cart.msw-sample-cart { display: block; }
/* The quantity row ( - [ 1 ] + ) and the button: one height for all four by default
   (--ms-btn-h, the widget's Height control), the field wide enough to show the number
   (WooCommerce's 3.6em field loses its digits behind the theme's 22px side padding), the
   theme's rounded borders and padding left alone. */
.msw.msw-single.msw-product-cart form.cart div.quantity,
.msw.msw-single.msw-product-cart .quantity {
	display: inline-flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: stretch;
	justify-content: flex-start;
	gap: 8px;
	float: none;
	width: auto;
	max-width: 100%;
	margin: 0;
}
.msw.msw-single.msw-product-cart .quantity .qty {
	flex: 0 0 auto;
	width: 6.5em;
	min-width: 6.5em;
	height: auto;
	min-height: var(--ms-btn-h, 52px);
	margin: 0;
	text-align: center;
	box-sizing: border-box;
}
.msw.msw-single.msw-product-cart .quantity .plus,
.msw.msw-single.msw-product-cart .quantity .minus {
	flex: 0 0 auto;
	height: auto;
	min-height: var(--ms-btn-h, 52px);
	margin: 0;
	box-sizing: border-box;
	cursor: pointer;
}
.msw.msw-single.msw-product-cart .single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	float: none;
	min-height: var(--ms-btn-h, 52px);
	line-height: 1.2;
	box-sizing: border-box;
	cursor: pointer;
}
/* theme layout: quantity row, the button under it at its own width (as on the theme's product page) */
.msw-product-cart--theme .msw.msw-single.msw-product-cart form.cart:not(.variations_form):not(.grouped_form):not(.msw-sample-cart) {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.msw-product-cart--theme .msw.msw-single.msw-product-cart .woocommerce-variation-add-to-cart {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ms-cart-gap, 12px);
}
.msw-product-cart--theme .msw.msw-single.msw-product-cart form.cart:not(.variations_form):not(.grouped_form):not(.msw-sample-cart) > .stock { align-self: stretch; }
/* inline: quantity beside the button */
.msw-product-cart--inline .msw.msw-single.msw-product-cart form.cart:not(.variations_form):not(.grouped_form):not(.msw-sample-cart) {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: var(--ms-align, flex-start);
}
.msw-product-cart--inline .msw.msw-single.msw-product-cart form.cart:not(.variations_form):not(.grouped_form):not(.msw-sample-cart) > .stock { flex: 0 0 100%; }
.msw-product-cart--inline .msw.msw-single.msw-product-cart .woocommerce-variation-add-to-cart {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: var(--ms-align, flex-start);
	gap: var(--ms-cart-gap, 12px);
}
.msw-product-cart--inline .msw.msw-single.msw-product-cart form.cart div.quantity,
.msw-product-cart--inline .msw.msw-single.msw-product-cart .quantity { margin: 0; float: none; }
/* stacked: everything full width, one under another */
.msw-product-cart--stacked .msw.msw-single.msw-product-cart form.cart { display: flex; flex-direction: column; align-items: stretch; }
.msw-product-cart--stacked .msw.msw-single.msw-product-cart .woocommerce-variation-add-to-cart { display: flex; flex-direction: column; align-items: stretch; gap: var(--ms-cart-gap, 12px); }
.msw-product-cart--stacked .msw.msw-single.msw-product-cart form.cart div.quantity,
.msw-product-cart--stacked .msw.msw-single.msw-product-cart .quantity { margin: 0; float: none; justify-content: flex-start; }
.msw-product-cart--stacked .msw.msw-single.msw-product-cart .single_add_to_cart_button,
.msw-product-cart--full .msw.msw-single.msw-product-cart .single_add_to_cart_button { width: 100%; display: flex; align-items: center; justify-content: center; }
.msw-product-cart--stacked .msw.msw-single.msw-product-cart .quantity { display: flex; width: 100%; }
.msw-product-cart--stacked .msw.msw-single.msw-product-cart .quantity .qty { flex: 1 1 auto; width: auto; }

/* variations table: a row per attribute */
.msw.msw-single.msw-product-cart form.cart table.variations { margin: 0 0 var(--ms-cart-gap, 12px); border: 0; border-collapse: collapse; }
.msw.msw-single.msw-product-cart form.cart table.variations th,
.msw.msw-single.msw-product-cart form.cart table.variations td { border: 0; background: none; text-align: left; vertical-align: middle; }
.msw.msw-single.msw-product-cart form.cart table.variations select { max-width: 100%; min-height: var(--ms-select-h, 44px); }
.msw.msw-single.msw-product-cart .reset_variations { display: inline-block; margin-left: 10px; font-size: 0.85em; }
.msw.msw-single.msw-product-cart .single_variation_wrap .woocommerce-variation { margin: 0 0 var(--ms-cart-gap, 12px); }
/* labels above (theme) */
.msw-product-cart--vars-stacked .msw.msw-single.msw-product-cart form.cart table.variations,
.msw-product-cart--vars-stacked .msw.msw-single.msw-product-cart form.cart table.variations tbody,
.msw-product-cart--vars-stacked .msw.msw-single.msw-product-cart form.cart table.variations tr,
.msw-product-cart--vars-stacked .msw.msw-single.msw-product-cart form.cart table.variations th.label,
.msw-product-cart--vars-stacked .msw.msw-single.msw-product-cart form.cart table.variations td.value { display: block; width: auto; min-width: 0; }
.msw-product-cart--vars-stacked .msw.msw-single.msw-product-cart form.cart table.variations tr { padding: 0 0 var(--ms-var-row-gap, 10px); }
.msw-product-cart--vars-stacked .msw.msw-single.msw-product-cart form.cart table.variations th.label { padding: 0 0 4px; }
.msw-product-cart--vars-stacked .msw.msw-single.msw-product-cart form.cart table.variations td.value { padding: 0; }
/* labels beside */
.msw-product-cart--vars-table .msw.msw-single.msw-product-cart form.cart table.variations,
.msw-product-cart--vars-table .msw.msw-single.msw-product-cart form.cart table.variations tbody { display: block; width: 100%; min-width: 0; }
.msw-product-cart--vars-table .msw.msw-single.msw-product-cart form.cart table.variations tr { display: flex; align-items: center; gap: 14px; padding: 0 0 var(--ms-var-row-gap, 10px); }
.msw-product-cart--vars-table .msw.msw-single.msw-product-cart form.cart table.variations th.label { display: block; flex: 0 0 auto; width: auto; padding: 0; white-space: nowrap; }
.msw-product-cart--vars-table .msw.msw-single.msw-product-cart form.cart table.variations td.value { display: block; flex: 1 1 auto; min-width: 0; padding: 0; }
.msw-product-cart--vars-table .msw.msw-single.msw-product-cart form.cart table.variations select { width: 100%; }

/* ----------------------------------------------------------------- meta */
.msw.msw-single.msw-product-meta .msw-product-meta__list { display: flex; flex-direction: column; gap: var(--ms-meta-gap, 6px); margin: 0; padding: 0; border: 0; }
.msw-product-meta--inline .msw.msw-single.msw-product-meta .msw-product-meta__list {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: var(--ms-align, flex-start);
	column-gap: var(--ms-meta-gap, 18px);
	row-gap: 6px;
}
.msw.msw-single.msw-product-meta .msw-product-meta__list > span { display: block; margin: 0; }
.msw.msw-single.msw-product-meta .msw-product-meta__list a { text-decoration: none; }

/* ---------------------------------------------------------------- stock */
.msw.msw-single.msw-product-stock .stock { margin: 0; }

/* ----------------------------------------------------------------- tabs */
.msw.msw-single.msw-product-tabs .woocommerce-tabs { margin: 0; padding: 0; }
.msw.msw-single.msw-product-tabs .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: var(--ms-tabs-justify, flex-start);
	gap: var(--ms-tab-gap, 0);
	list-style: none;
	margin: 0 0 var(--ms-panel-gap, 24px);
	padding: 0;
	overflow: visible;
	border-bottom: var(--ms-tabline-w, 1px) solid var(--ms-tabline, rgba(0, 0, 0, 0.12));
}
.msw.msw-single.msw-product-tabs .woocommerce-tabs ul.tabs::before,
.msw.msw-single.msw-product-tabs .woocommerce-tabs ul.tabs::after,
.msw.msw-single.msw-product-tabs .woocommerce-tabs ul.tabs li::before,
.msw.msw-single.msw-product-tabs .woocommerce-tabs ul.tabs li::after { display: none; content: none; }
.msw.msw-single.msw-product-tabs .woocommerce-tabs ul.tabs li {
	flex: var(--ms-tab-flex, 0 0 auto);
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	position: static;
}
.msw.msw-single.msw-product-tabs .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 12px 18px;
	margin-bottom: calc(-1 * var(--ms-tabline-w, 1px));
	border-bottom: var(--ms-tabind-w, 2px) solid transparent;
	font-weight: inherit;
	text-align: center;
	text-decoration: none;
}
.msw.msw-single.msw-product-tabs .woocommerce-tabs ul.tabs li.active a { border-bottom-color: var(--ms-tabind, currentColor); }
.msw.msw-single.msw-product-tabs .woocommerce-tabs .panel { margin: 0; padding: 0; box-shadow: none; }
.msw-product-tabs--notitles .msw.msw-single.msw-product-tabs .woocommerce-tabs .panel > h2:first-child { display: none; }
.msw-product-tabs--stacked .msw.msw-single.msw-product-tabs .woocommerce-tabs ul.tabs { display: none; }
.msw-product-tabs--stacked .msw.msw-single.msw-product-tabs .woocommerce-tabs .panel { display: block !important; margin: 0 0 var(--ms-section-gap, 40px); }
.msw-product-tabs--stacked .msw.msw-single.msw-product-tabs .woocommerce-tabs .panel:last-of-type { margin-bottom: 0; }

/* ---------------------------------------------------------- breadcrumbs
   WooCommerce's <nav class="woocommerce-breadcrumb"> or the theme's
   <div class="breadcrumbs-container"><div class="ms-breadcrumbs"> (icon separators) */
.msw.msw-single.msw-product-breadcrumbs .woocommerce-breadcrumb,
.msw.msw-single.msw-product-breadcrumbs .ms-breadcrumbs { margin: 0; padding: 0; font-size: inherit; text-align: inherit; }
.msw.msw-single.msw-product-breadcrumbs .breadcrumbs-container { width: 100%; }
.msw.msw-single.msw-product-breadcrumbs a { text-decoration: none; }

/* --------------------------------------------------------------- images */
.msw.msw-single.msw-product-images { position: relative; }
/* the badge keeps the theme's look (its .onsale rules); only its place is ours — over the
   main image, past a thumbnail column on that side */
.msw.msw-single.msw-product-images .onsale {
	position: absolute;
	z-index: 9;
	top: var(--ms-badge-y, 12px);
	left: calc(var(--ms-badge-x, 12px) + var(--ms-badge-shift-l, 0px));
	right: auto;
	bottom: auto;
}
.msw-product-images--badge-tr .msw.msw-single.msw-product-images .onsale { left: auto; right: calc(var(--ms-badge-x, 12px) + var(--ms-badge-shift-r, 0px)); }
.msw.msw-single.msw-product-images .woocommerce-product-gallery {
	display: var(--ms-gal-display, block);
	flex-direction: var(--ms-gal-dir, row);
	align-items: flex-start;
	gap: var(--ms-thumb-gap, 8px);
	float: none;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}
.msw.msw-single.msw-product-images .woocommerce-product-gallery .flex-viewport,
.msw.msw-single.msw-product-images .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper { flex: 1 1 auto; min-width: 0; overflow: hidden; margin: 0; }
.msw.msw-single.msw-product-images .woocommerce-product-gallery__image img,
.msw.msw-single.msw-product-images .woocommerce-product-gallery__image--placeholder img { display: block; width: 100%; height: auto; margin: 0; box-shadow: none; }
.msw.msw-single.msw-product-images .woocommerce-product-gallery .flex-control-thumbs {
	display: flex;
	flex-wrap: var(--ms-thumbs-wrap, wrap);
	flex-direction: var(--ms-thumbs-dir, row);
	flex: 0 0 var(--ms-thumbs-basis, auto);
	width: var(--ms-thumbs-width, auto);
	gap: var(--ms-thumb-gap, 8px);
	margin: var(--ms-thumbs-margin, var(--ms-thumb-gap, 8px) 0 0);
	padding: 0;
	list-style: none;
}
.msw.msw-single.msw-product-images .woocommerce-product-gallery .flex-control-thumbs li {
	float: none;
	margin: 0;
	padding: 0;
	list-style: none;
	width: var(--ms-thumb-li-w, calc((100% - (var(--ms-thumb-cols, 4) - 1) * var(--ms-thumb-gap, 8px)) / var(--ms-thumb-cols, 4)));
}
.msw.msw-single.msw-product-images .woocommerce-product-gallery .flex-control-thumbs li img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	cursor: pointer;
	opacity: var(--ms-thumb-opacity, 0.55);
	border: var(--ms-thumb-border-w, 2px) solid transparent;
	transition: opacity 0.2s ease, border-color 0.2s ease;
}
.msw.msw-single.msw-product-images .woocommerce-product-gallery .flex-control-thumbs li img:hover,
.msw.msw-single.msw-product-images .woocommerce-product-gallery .flex-control-thumbs li img.flex-active { opacity: 1; border-color: var(--ms-thumb-active, transparent); }
/* a gallery that never got WooCommerce's slider (single image, script missing): the wrapper is the image column */
.msw.msw-single.msw-product-images .woocommerce-product-gallery--columns-4 .woocommerce-product-gallery__image:nth-child(n+2),
.msw.msw-single.msw-product-images .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:nth-child(n+2) { width: var(--ms-thumb-li-w, 25%); display: inline-block; float: none; vertical-align: top; }

/* ----------------------------------------------------------- navigation */
.msw.msw-single.msw-product-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
}
.msw.msw-single.msw-product-nav .msw-product-nav__item {
	display: flex;
	align-items: center;
	gap: var(--ms-nav-gap, 14px);
	flex: 0 1 48%;
	min-width: 0;
	color: inherit;
	text-decoration: none;
}
.msw.msw-single.msw-product-nav .msw-product-nav__item--next { flex-direction: row-reverse; text-align: right; margin-left: auto; }
.msw.msw-single.msw-product-nav .msw-product-nav__item--empty { flex: 0 1 48%; }
.msw.msw-single.msw-product-nav .msw-product-nav__thumb { flex: 0 0 var(--ms-nav-thumb-w, 80px); width: var(--ms-nav-thumb-w, 80px); }
.msw.msw-single.msw-product-nav .msw-product-nav__thumb img { display: block; width: 100%; height: var(--ms-nav-thumb-h, 66px); object-fit: cover; margin: 0; }
.msw.msw-single.msw-product-nav .msw-product-nav__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.msw.msw-single.msw-product-nav .msw-product-nav__label { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8em; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.7; }
.msw.msw-single.msw-product-nav .msw-product-nav__item--next .msw-product-nav__label { justify-content: flex-end; }
.msw.msw-single.msw-product-nav .msw-product-nav__arrow { width: 1em; height: 1em; }
.msw.msw-single.msw-product-nav .msw-product-nav__title { font-weight: 600; line-height: 1.3; }
.msw.msw-single.msw-product-nav a:hover .msw-product-nav__title { text-decoration: underline; }
.msw.msw-single.msw-product-nav .msw-product-nav__item--sample { cursor: default; }
@media (max-width: 767px) {
	.msw.msw-single.msw-product-nav .msw-product-nav__thumb { display: none; }
}

/* ---------------------------------------------------- editor / preview */
.ms-product-layout--preview .ms-pl-empty { padding: 24px; border: 1px dashed rgba(0, 0, 0, 0.25); text-align: center; }

/* --------------------------------------------------------- page width
   The layout's Elementor Page Layout setting (see classes/product-layouts.php) arrives as a
   body class. "Full width" and "Canvas" take the product page out of the theme's boxed
   Bootstrap container — its max-width, its side padding and the row / column gutters — which
   nothing inside Elementor can reach. Containers inside the layout keep their own width. */
body.ms-pl-width-full .content-holder .post-container,
body.ms-pl-width-canvas .content-holder .post-container {
	max-width: none;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
}
body.ms-pl-width-full .content-holder .post-container > .row,
body.ms-pl-width-canvas .content-holder .post-container > .row {
	margin-left: 0;
	margin-right: 0;
}
body.ms-pl-width-full .content-holder .post-container > .row > *,
body.ms-pl-width-canvas .content-holder .post-container > .row > * {
	padding-left: 0;
	padding-right: 0;
}
body.ms-pl-width-full #main > .isopad,
body.ms-pl-width-canvas #main > .isopad { margin-left: 0; margin-right: 0; }

/* canvas: no theme header or footer, the layout starts at the top of the window */
body.ms-pl-canvas { margin: 0; }
body.ms-pl-canvas .ms-pl-canvas__inner { width: 100%; overflow-x: hidden; }
