/* ==========================================================================
   MediMix — product.css (single product)
   Markup is WooCommerce's own (content-single-product.php); the theme only
   lays it out.
   ========================================================================== */

.mx-pdp-page { padding-top: var(--mx-s4); }
.mx-pdp-page > .mx-breadcrumbs { margin-bottom: var(--mx-s4); }

/*
 * Gallery + summary live in .mx-pdp__top; tabs, up-sells and related products
 * follow full width. The sticky gallery is bounded by .mx-pdp__top, so it
 * stops at the end of the summary and never slides over the description.
 */
.mx-pdp__top { display: grid; gap: var(--mx-s6); }
@media (min-width: 900px) {
	.mx-pdp__top { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--mx-s10); align-items: start; }
	.mx-pdp__top > .woocommerce-product-gallery { position: sticky; top: calc(var(--mx-head-offset, 134px) + 16px); transition: top .3s var(--mx-ease); }
}

/* Gallery (WooCommerce flexslider + zoom + photoswipe) */
.woocommerce-product-gallery { position: relative; margin: 0; }
.woocommerce-product-gallery__wrapper { margin: 0; }
.woocommerce-product-gallery .flex-viewport, .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:first-child {
	border: 1px solid var(--mx-line-2); border-radius: var(--mx-r-lg); background: #fff; overflow: hidden;
}
.woocommerce-product-gallery__image a { display: block; cursor: zoom-in; }
.woocommerce-product-gallery__image img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; padding: var(--mx-s5); }
.woocommerce-product-gallery__image .zoomImg { background: #fff; }
.woocommerce-product-gallery__trigger {
	position: absolute; top: var(--mx-s3); inset-inline-end: var(--mx-s3); z-index: 5;
	width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%;
	background: #fff; border: 1px solid var(--mx-line); box-shadow: var(--mx-shadow-sm); font-size: 0; text-decoration: none;
}
.woocommerce-product-gallery__trigger::before {
	content: ""; width: 20px; height: 20px; background: var(--mx-ink);
	-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.75' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m20 20-4.2-4.2M11 8.5v5M8.5 11h5'/%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.75' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m20 20-4.2-4.2M11 8.5v5M8.5 11h5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.woocommerce-product-gallery__trigger:hover { background: var(--mx-ink); }
.woocommerce-product-gallery__trigger:hover::before { background: #fff; }
.woocommerce-product-gallery__trigger img { display: none; }

/* Thumbnails: a swipeable strip on phones, a column beside the image on desktop. */
.flex-control-thumbs {
	display: flex; gap: var(--mx-s2); margin: var(--mx-s3) 0 0; padding: 0 0 2px; list-style: none;
	overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
}
.flex-control-thumbs::-webkit-scrollbar { display: none; }
.flex-control-thumbs li { flex: 0 0 68px; scroll-snap-align: start; cursor: pointer; }
.flex-control-thumbs img {
	display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: contain; padding: 4px;
	border: 1px solid var(--mx-line-2); border-radius: var(--mx-r-md); background: #fff; opacity: .65;
	transition: opacity .15s, border-color .15s, box-shadow .15s;
}
.flex-control-thumbs img:hover { opacity: 1; }
.flex-control-thumbs img.flex-active { opacity: 1; border-color: var(--mx-brand); box-shadow: 0 0 0 1px var(--mx-brand); }
.flex-direction-nav { display: none; }
@media (min-width: 900px) {
	.woocommerce-product-gallery:has(> .flex-control-thumbs) { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: var(--mx-s3); align-items: start; }
	.woocommerce-product-gallery > .flex-viewport { grid-column: 2; grid-row: 1; }
	.woocommerce-product-gallery > .flex-control-thumbs {
		grid-column: 1; grid-row: 1; flex-direction: column; margin: 0; padding: 0 0 0 2px;
		height: 0; min-height: 100%; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin;
	}
	.woocommerce-product-gallery > .flex-control-thumbs li { flex: none; }
}

/* Summary: brand card */
.summary .mx-pdp__brand {
	display: inline-flex; align-items: center; gap: var(--mx-s3); max-width: 100%; margin-bottom: var(--mx-s3); padding: 6px;
	padding-inline-end: var(--mx-s4); border: 1px solid var(--mx-line); border-radius: var(--mx-r-lg);
	color: var(--mx-ink); text-decoration: none; transition: border-color .15s, box-shadow .15s;
}
.summary .mx-pdp__brand:not(.has-logo) { padding-inline-start: var(--mx-s4); }
.summary .mx-pdp__brand:hover { border-color: var(--mx-brand); box-shadow: var(--mx-shadow-sm); }
.mx-pdp__brand-logo { position: relative; flex: none; display: block; width: 84px; height: 52px; overflow: hidden; border-radius: var(--mx-r-md); background: #fff; }
.mx-pdp__brand-logo img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 4px 8px; object-fit: contain; }
.mx-pdp__brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.4; }
.mx-pdp__brand-name { font-weight: 700; }
.mx-pdp__brand-more { display: inline-flex; align-items: center; gap: 4px; font-size: var(--mx-fs-xs); color: var(--mx-brand-ink); }
.summary .mx-pdp__brand:hover .mx-pdp__brand-more { text-decoration: underline; }

/* Summary: help box (WhatsApp / Messenger) */
.mx-help {
	display: flex; align-items: flex-start; gap: var(--mx-s4); margin: var(--mx-s5) 0; padding: var(--mx-s5);
	border: 1px solid #f8d6d6; border-radius: var(--mx-r-lg); background: var(--mx-brand-soft);
}
.mx-help__icon { flex: none; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--mx-brand-ink); color: #fff; }
.mx-help__body { flex: 1; min-width: 0; }
.mx-help__title { margin: 0 0 4px; font-size: var(--mx-fs-lg); font-weight: 700; color: var(--mx-ink); }
.mx-help__text { margin: 0 0 var(--mx-s3); font-size: var(--mx-fs-sm); line-height: 1.8; color: var(--mx-ink-2); }
.mx-help__btn {
	display: flex; align-items: center; justify-content: center; gap: var(--mx-s2); min-height: 48px; padding: 0 var(--mx-s5);
	border-radius: var(--mx-r-pill); background: #1f9d55; color: #fff; font-weight: 700; text-decoration: none; transition: background .15s;
}
.mx-help__btn:hover { background: #17824a; color: #fff; }
.mx-help--chat .mx-help__btn { background: var(--mx-ink); }
.mx-help--chat .mx-help__btn:hover { background: #2d2d35; }
@media (max-width: 599px) {
	.mx-help { padding: var(--mx-s4); gap: var(--mx-s3); }
	.mx-help__icon { width: 46px; height: 46px; }
	.mx-help__icon .mx-icon { width: 24px; height: 24px; }
}

/* Summary */
.summary .product_title { font-size: var(--mx-fs-h1); margin-bottom: var(--mx-s3); }
.woocommerce-product-rating { display: flex; align-items: center; gap: var(--mx-s2); margin-bottom: var(--mx-s3); font-size: var(--mx-fs-sm); }
.woocommerce-product-rating .star-rating { width: 90px; height: 18px; -webkit-mask-size: 18px 18px; mask-size: 18px 18px; }
.woocommerce-review-link { color: var(--mx-ink-2); }

.mx-pdp__price { margin: var(--mx-s4) 0; padding: var(--mx-s4) 0; border-block: 1px solid var(--mx-line-2); }
.mx-pdp__price .price { margin: 0; font-size: 1.6rem; line-height: 1.3; }
.mx-pdp__price .price del { font-size: 1rem; }
.mx-pdp__save { display: flex; align-items: center; gap: var(--mx-s2); margin: var(--mx-s2) 0 0; font-size: var(--mx-fs-sm); color: var(--mx-accent); font-weight: 700; }

.woocommerce-product-details__short-description { color: var(--mx-ink-2); }
.woocommerce-product-details__short-description > :last-child { margin-bottom: 0; }

.summary .stock { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 var(--mx-s3); font-weight: 700; font-size: var(--mx-fs-sm); }
.summary .stock.in-stock { color: var(--mx-success); }
.summary .stock.out-of-stock { color: var(--mx-error); }
.summary .stock.available-on-backorder { color: var(--mx-warning); }

/* Add to cart */
form.cart { margin: var(--mx-s5) 0 0; }
form.cart:not(.variations_form), .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; gap: var(--mx-s2); align-items: stretch; }
form.cart .single_add_to_cart_button, form.cart .mx-buy-now { flex: 1 1 160px; min-height: 50px; font-size: var(--mx-fs-lg); }
form.cart .quantity { flex: none; }
form.cart .mx-qty .qty, form.cart .mx-qty__btn { min-height: 48px; }
.single_add_to_cart_button.disabled, .mx-buy-now.disabled { opacity: .5; cursor: not-allowed; }

table.variations { margin-bottom: var(--mx-s4); border: 0; }
table.variations tr { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--mx-s3); }
table.variations th, table.variations td { padding: 0; text-align: start; border: 0; }
table.variations th label { font-size: var(--mx-fs-sm); font-weight: 700; }
table.variations select { max-width: 360px; }
.reset_variations { display: inline-block; margin-top: 6px; font-size: var(--mx-fs-sm); color: var(--mx-ink-2); }

/* Variation swatches (inc/swatches.php + swatches.js). The select stays in
   the form for WooCommerce and is hidden; the buttons drive it. */
table.variations { width: 100%; }
table.variations tr { gap: 10px; margin-bottom: var(--mx-s5); }
table.variations th label { font-size: var(--mx-fs-md); color: var(--mx-ink); }
table.variations select.mx-sw-select { display: none; }
.mx-sw-chosen:not(:empty) { font-weight: 500; color: var(--mx-muted); }
.mx-sw-chosen:not(:empty)::before { content: ": "; }

.mx-sw { display: flex; flex-wrap: wrap; gap: 10px; }
.mx-sw__opt {
	position: relative;
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	margin: 0; padding: 0;
	font: inherit; color: var(--mx-ink); text-align: start;
	background: var(--mx-bg);
	border: 1px solid var(--mx-line);
	border-radius: var(--mx-r-md);
	-webkit-tap-highlight-color: transparent;
	transition: border-color .15s, box-shadow .15s, background-color .15s, color .15s;
}
.mx-sw__opt:hover { border-color: var(--mx-ink-2); }
.mx-sw__opt:focus-visible { outline: 2px solid var(--mx-focus); outline-offset: 2px; }
.mx-sw__opt.is-selected { border-color: var(--mx-ink); box-shadow: inset 0 0 0 1px var(--mx-ink); }
.mx-sw__dot { display: block; flex: none; border-radius: 50%; background: var(--mx-sw-paint, var(--mx-surface-2)); box-shadow: inset 0 0 0 1px rgb(20 20 24 / 12%); }
.mx-sw__opt.is-light .mx-sw__dot { box-shadow: inset 0 0 0 1px rgb(20 20 24 / 22%); }

/* Sold out / not with the current choices: struck through. Sold out can't be picked. */
.mx-sw__opt.is-unavailable, .mx-sw__opt.is-disabled { color: var(--mx-muted); background: var(--mx-surface); border-style: dashed; }
.mx-sw__opt.is-unavailable .mx-sw__dot, .mx-sw__opt.is-disabled .mx-sw__dot { opacity: .45; }
.mx-sw__opt.is-disabled { cursor: not-allowed; }
.mx-sw__opt.is-unavailable::after, .mx-sw__opt.is-disabled::after {
	content: ""; position: absolute; inset: 50% 6px auto; height: 1.5px;
	background: var(--mx-muted); transform: rotate(-12deg); pointer-events: none; opacity: .7;
}

/* Colour: circles; the chosen name shows next to the label. */
.mx-sw--color { gap: 8px; }
.mx-sw__opt--color { width: 46px; height: 46px; padding: 4px; border-radius: 50%; border: 2px solid transparent; }
.mx-sw__opt--color:hover { border-color: var(--mx-line); }
.mx-sw__opt--color.is-selected { border-color: var(--mx-ink); box-shadow: none; }
.mx-sw__opt--color .mx-sw__dot { width: 100%; height: 100%; }
.mx-sw__opt--color.is-unavailable, .mx-sw__opt--color.is-disabled { background: none; border-style: solid; border-color: transparent; }
.mx-sw__opt--color.is-unavailable::after, .mx-sw__opt--color.is-disabled::after { inset: 50% 2px auto; height: 2px; background: var(--mx-ink-2); transform: rotate(-45deg); }

/* Text cards: sizes, hardness, hand… */
.mx-sw--button { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.mx-sw__opt--btn { min-height: 46px; padding: 8px 10px; font-size: var(--mx-fs-sm); font-weight: 700; line-height: 1.2; text-align: center; }
.mx-sw__opt--btn.is-selected { color: #fff; background: var(--mx-ink); }

/* Hair-dye shades: tint + code + name cards. */
.mx-sw--shade { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 8px; }
.mx-sw__opt--shade { justify-content: flex-start; min-height: 58px; padding: 8px 10px; }
.mx-sw__opt--shade .mx-sw__dot { width: 38px; height: 38px; }
.mx-sw__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.mx-sw__code { font-weight: 700; font-size: var(--mx-fs-md); unicode-bidi: isolate; }
.mx-sw__opt--shade .mx-sw__name { font-size: var(--mx-fs-xs); color: var(--mx-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mx-sw__opt--shade.is-selected { background: var(--mx-brand-soft); }
.mx-sw__opt--shade.is-selected::before {
	content: ""; position: absolute; inset-block-start: -6px; inset-inline-end: -6px;
	width: 20px; height: 20px; border-radius: 50%;
	background: var(--mx-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat;
	box-shadow: 0 0 0 2px var(--mx-bg);
}

/* "Clear" sits under the last row as a quiet link. */
table.variations .reset_variations { display: inline-flex; align-items: center; gap: 4px; margin-top: var(--mx-s3); padding: 2px 0; color: var(--mx-muted); text-decoration: underline; }
table.variations .reset_variations::before { content: "×"; font-size: 1.1em; line-height: 1; text-decoration: none; }
table.variations .reset_variations:hover { color: var(--mx-accent); }

@media (max-width: 599px) {
	.mx-sw--shade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mx-sw__opt--shade { gap: 8px; padding: 8px; }
	.mx-sw__opt--shade .mx-sw__dot { width: 32px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) { .mx-sw__opt { transition: none; } }
.woocommerce-variation { margin-bottom: var(--mx-s3); }
.woocommerce-variation-price .price { font-size: 1.35rem; }
.woocommerce-variation-availability p { margin: 4px 0 0; }

/* Grouped products */
.woocommerce-grouped-product-list { margin-bottom: var(--mx-s4); }
.woocommerce-grouped-product-list td { padding: var(--mx-s2) 0; border-bottom: 1px solid var(--mx-line-2); vertical-align: middle; }

/* Meta */
.product_meta { display: grid; gap: 4px; margin-top: var(--mx-s5); padding-top: var(--mx-s4); border-top: 1px solid var(--mx-line-2); font-size: var(--mx-fs-sm); color: var(--mx-muted); }
.product_meta > span { display: block; }
.product_meta a { color: var(--mx-ink-2); }
.product_meta .sku { color: var(--mx-ink); font-weight: 500; direction: ltr; unicode-bidi: isolate; }

/* Tabs */
.woocommerce-tabs { margin-top: var(--mx-s10); }
.woocommerce-tabs ul.tabs {
	display: flex; gap: var(--mx-s1); margin: 0 0 var(--mx-s5); padding: 0; list-style: none;
	border-bottom: 1px solid var(--mx-line); overflow-x: auto; scrollbar-width: none;
}
.woocommerce-tabs ul.tabs::-webkit-scrollbar { display: none; }
.woocommerce-tabs ul.tabs li a {
	display: block; padding: 12px 16px; margin-bottom: -1px; white-space: nowrap;
	border-bottom: 2px solid transparent; font-weight: 700; text-decoration: none; color: var(--mx-muted);
}
.woocommerce-tabs ul.tabs li.active a { color: var(--mx-ink); border-bottom-color: var(--mx-ink); }
.woocommerce-tabs ul.tabs li a:hover { color: var(--mx-ink); }
.woocommerce-Tabs-panel--description img { border-radius: var(--mx-r-md); margin-block: var(--mx-s3); }
.woocommerce-product-attributes { border: 1px solid var(--mx-line); border-radius: var(--mx-r-md); overflow: hidden; }
.woocommerce-product-attributes th, .woocommerce-product-attributes td { padding: 10px 14px; text-align: start; border-bottom: 1px solid var(--mx-line-2); }
.woocommerce-product-attributes th { width: 30%; background: var(--mx-surface); font-weight: 700; font-size: var(--mx-fs-sm); }
.woocommerce-product-attributes td p { margin: 0; }

/* Reviews */
#reviews .commentlist { margin: 0 0 var(--mx-s6); padding: 0; list-style: none; }
#reviews .commentlist li { padding: var(--mx-s4) 0; border-bottom: 1px solid var(--mx-line-2); }
#reviews .comment_container { display: flex; gap: var(--mx-s3); }
#reviews .comment_container img.avatar { width: 44px; height: 44px; border-radius: 50%; flex: none; }
#reviews .comment-text { flex: 1; }
#reviews .comment-text .star-rating { float: inline-end; }
#reviews .meta { font-size: var(--mx-fs-sm); color: var(--mx-muted); margin-bottom: 4px; }
#reviews .woocommerce-review__author { color: var(--mx-ink); font-weight: 700; }
#review_form_wrapper { padding: var(--mx-s5); border-radius: var(--mx-r-lg); background: var(--mx-surface); }
#reply-title { display: block; font-size: var(--mx-fs-h3); font-weight: 700; margin-bottom: var(--mx-s3); }
.comment-form-rating p.stars { margin: 4px 0 var(--mx-s3); }
.comment-form-rating p.stars span { display: inline-flex; gap: 4px; direction: ltr; }
.comment-form-rating p.stars a {
	width: 28px; height: 28px; font-size: 0; text-decoration: none; background: var(--mx-line);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 3.5 2.6 5.4 5.9.8-4.3 4.1 1 5.8L12 16.9l-5.2 2.7 1-5.8-4.3-4.1 5.9-.8z'/%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'%3E%3Cpath d='m12 3.5 2.6 5.4 5.9.8-4.3 4.1 1 5.8L12 16.9l-5.2 2.7 1-5.8-4.3-4.1 5.9-.8z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.comment-form-rating p.stars:hover a, .comment-form-rating p.stars.selected a { background: var(--mx-star); }
.comment-form-rating p.stars a:hover ~ a, .comment-form-rating p.stars.selected a.active ~ a { background: var(--mx-line); }
.comment-form-rating p.stars a:focus-visible { outline: 2px solid var(--mx-focus); }
#review_form .form-submit input { width: auto; }
#review_form input[type="submit"] { display: inline-flex; min-height: 46px; padding: 10px 22px; border: 0; border-radius: var(--mx-r-md); background: var(--mx-ink); color: #fff; font-weight: 700; cursor: pointer; }

/* Up-sells / related / cross-sells */
.up-sells, .related { margin-top: var(--mx-s12); }
.up-sells > h2, .related > h2 { font-size: var(--mx-fs-h2); margin-bottom: var(--mx-s5); }
@media (max-width: 899px) {
	.up-sells ul.products, .related ul.products {
		display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 46%;
		overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px;
	}
	.up-sells ul.products::-webkit-scrollbar, .related ul.products::-webkit-scrollbar { display: none; }
	.up-sells ul.products > li, .related ul.products > li { scroll-snap-align: start; }
}

/* Sticky buy bar (product.js) — mobile only */
.mx-buybar {
	position: fixed; inset-inline: 0; bottom: calc(var(--mx-tabbar-h) + env(safe-area-inset-bottom)); z-index: 95;
	display: flex; align-items: center; gap: var(--mx-s3); padding: var(--mx-s2) var(--mx-gutter);
	background: #fff; border-top: 1px solid var(--mx-line); box-shadow: 0 -6px 18px rgb(20 20 24 / 8%);
	transform: translateY(calc(100% + var(--mx-tabbar-h) + 24px)); visibility: hidden;
	transition: transform .2s var(--mx-ease), visibility 0s .2s;
}
.mx-buybar.is-visible { transform: none; visibility: visible; transition-delay: 0s; }
.mx-buybar__info { flex: 1; min-width: 0; }
.mx-buybar__title { display: block; font-size: var(--mx-fs-sm); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-buybar__price { display: block; font-weight: 700; font-size: var(--mx-fs-sm); }
.mx-buybar__price del { display: none; }
.mx-buybar .mx-btn { min-height: 44px; padding: 8px 16px; font-size: var(--mx-fs-sm); }
@media (min-width: 900px) { .mx-buybar { display: none; } }