/* MotionSites Dual Offer — single product layout, dark brand chrome. */

.msd-page {
	--msd-bg: #0d0d0e;
	--msd-card: #18181a;
	--msd-card-2: #141416;
	--msd-line: rgba(255, 255, 255, .08);
	/* Control edges need 3:1 against what they enclose; --msd-line is decorative. */
	--msd-line-ui: rgba(255, 255, 255, .38);
	--msd-text: #f5f5f5;
	--msd-muted: rgba(255, 255, 255, .62);
	--msd-grad: linear-gradient(135deg, #a855f7, #f472b6, #fdba74);
	max-width: 1420px;
	margin: 0 auto;
	padding: 0;
}

.woocommerce div.product {
	display: block;
	max-width: none;
	margin: 0;
	padding: 0;
}

/* WooCommerce's legacy div.images rule floats and half-sizes the gallery; its
   selector carries one more type than ours, so match on .images to outrank it. */
.woocommerce div.product .woocommerce-product-gallery,
.woocommerce div.product .woocommerce-product-gallery.images {
	position: static;
	float: none;
	width: 100%;
	max-width: none;
	margin: 0;
}

/* The breadcrumb is emitted before .msd-page, so align #main with the container instead. */
body.single-product #main {
	max-width: 1420px;
	margin: 0 auto;
	padding-inline: 24px;
}

.msd-page .woocommerce-breadcrumb {
	margin: 0 0 18px;
	padding-top: 22px;
	font-size: 13px;
	color: rgba(255, 255, 255, .45);
}

.msd-page .woocommerce-breadcrumb a { color: rgba(255, 255, 255, .6); text-decoration: none }
.msd-page .woocommerce-breadcrumb a:hover { color: #fff }
body.single-product .woocommerce-breadcrumb {
	margin: 0 0 18px;
	padding-top: 22px;
	font-size: 13px;
	color: rgba(255, 255, 255, .45);
}
body.single-product .woocommerce-breadcrumb a { color: rgba(255, 255, 255, .6); text-decoration: none }
body.single-product .woocommerce-breadcrumb a:hover { color: #fff }

/* ---------------------------------------------------------------- columns */

.msd-columns {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: clamp(24px, 4vw, 56px);
	align-items: start;
}

.woocommerce div.product .summary.entry-summary {
	width: auto;
	float: none;
	margin: 0;
	padding: 0;
	background: none;
}

/* ---------------------------------------------------------------- gallery */

.msd-media {
	position: sticky;
	top: 24px;
}

.woocommerce div.product .woocommerce-product-gallery .flex-viewport {
	width: 100%;
}

.woocommerce div.product .woocommerce-product-gallery figure.woocommerce-product-gallery__wrapper {
	margin: 0;
	padding: 12px;
	background: var(--msd-card);
	border: 1px solid var(--msd-line);
	border-radius: 20px;
}

.woocommerce div.product .woocommerce-product-gallery img {
	width: 100%;
	height: auto;
	border-radius: 14px;
	background: var(--msd-bg);
}

.woocommerce div.product .woocommerce-product-gallery .flex-control-nav {
	display: flex;
	gap: 12px;
	position: static;
	width: auto;
	margin: 12px 0 0;
	padding: 0;
}

.woocommerce div.product .woocommerce-product-gallery .flex-control-nav li {
	margin: 0;
	width: 84px;
	height: 84px;
	flex: 0 0 84px;
	overflow: hidden;
	border-radius: 14px;
}

.woocommerce div.product .woocommerce-product-gallery .flex-control-nav li img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 1px solid var(--msd-line);
	border-radius: 14px;
	opacity: .6;
	transition: opacity .15s ease, border-color .15s ease;
}

.woocommerce div.product .woocommerce-product-gallery .flex-control-nav li.ui-state-active img {
	opacity: 1;
	border-color: #f472b6;
}

.woocommerce div.product .woocommerce-product-gallery .woocommerce-LoopProduct-link { display: block }
.woocommerce div.product span.onsale {
	inset-inline-start: 26px;
	inset-block-start: 26px;
	margin: 0;
	min-width: 0;
	min-height: 0;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--msd-grad);
	color: #121212;
	font-weight: 700;
	z-index: 5;
}

/* ------------------------------------------------------------------ head */

.msd-head { margin: 0 0 6px }
.msd-title { margin: 0; color: #fff; font-size: clamp(28px, 3.4vw, 44px); font-weight: 800; line-height: 1.22 }
.msd-cats { margin-top: 8px; font-size: 13px; color: var(--msd-muted) }
.msd-cats a { color: inherit; text-decoration: none }
.msd-cats a:hover { color: #fff }
.msd-price { margin: 16px 0 22px; color: #fff; font-size: clamp(22px, 2.4vw, 30px); font-weight: 700 }
.msd-price del { color: rgba(255, 255, 255, .38); font-weight: 500 }
.msd-price ins { text-decoration: none; color: inherit }
.msd-price .ms-price-free { color: #4ade80 }

/* ----------------------------------------------------------------- cards */

.msd-card {
	margin: 0 0 18px;
	background: var(--msd-card);
	border: 1px solid var(--msd-line);
	border-radius: 16px;
	overflow: hidden;
}

.msd-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 18px;
	cursor: pointer;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	list-style: none;
}

.msd-card-head::-webkit-details-marker { display: none }
.msd-card-head::after { content: '+'; font-size: 20px; line-height: 1; color: var(--msd-muted) }
.msd-card[open] .msd-card-head::after { content: '\2212' }
.msd-card-head:focus-visible { outline: 2px solid #a855f7; outline-offset: -2px }

.msd-disc-body { padding: 0 18px 18px; color: var(--msd-muted); font-size: 14.5px; line-height: 1.95 }
.msd-disc-body p { margin: 0 0 12px }
.msd-disc-body p:last-child { margin-bottom: 0 }
.msd-disc-body strong { color: #fff }
.msd-disc-body a { color: #f472b6 }

.msd-delivery-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	padding: 0 18px 18px;
}

.msd-delivery-cell {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px;
	background: var(--msd-card-2);
	border: 1px solid var(--msd-line);
	border-radius: 12px;
}

.msd-delivery-label { color: var(--msd-muted); font-size: 12px }
.msd-delivery-value { color: #fff; font-size: 13.5px; font-weight: 600 }

/* ----------------------------------------------------------------- chips */

.msd-chips { margin: 0 0 22px }
.msd-chips-label { display: block; margin-bottom: 10px; color: var(--msd-muted); font-size: 13px }
.msd-chip-row { display: flex; flex-wrap: wrap; gap: 8px }

.msd-chip {
	padding: 7px 14px;
	border: 1px solid var(--msd-line-ui);
	border-radius: 999px;
	background: var(--msd-card-2);
	color: #fff;
	font-size: 13px;
	text-decoration: none;
	transition: border-color .15s ease, background .15s ease;
}

.msd-chip:hover { border-color: rgba(244, 114, 182, .6); background: rgba(244, 114, 182, .1) }

/* ------------------------------------------------------------------ form */

.woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 12px;
	margin: 0 0 16px;
}

.woocommerce div.product form.cart .quantity {
	order: 2;
	margin: 0;
	display: block;
	width: auto;
}

.woocommerce div.product form.cart .quantity .input-text.qty {
	width: 64px;
	height: 100%;
	min-height: 54px;
	padding: 0 8px;
	background: var(--msd-card);
	border: 1px solid var(--msd-line-ui);
	border-radius: 14px;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

/* The field is type=number: without this the browser paints its own stepper
   on hover, right next to the custom minus/plus pills. */
.woocommerce div.product form.cart .quantity .input-text.qty::-webkit-inner-spin-button,
.woocommerce div.product form.cart .quantity .input-text.qty::-webkit-outer-spin-button {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
}

.msd-qty-btn {
	order: 3;
	width: 44px;
	min-height: 54px;
	flex: 0 0 44px;
	background: var(--msd-card);
	border: 1px solid var(--msd-line-ui);
	border-radius: 14px;
	color: #fff;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
}

.woocommerce div.product form.cart button.msd-qty-btn[data-msd-step="1"] { order: 1 }
.msd-qty-btn:hover { background: #242427; border-color: rgba(255, 255, 255, .55) }
.msd-qty-btn:focus-visible { outline: 2px solid #a855f7; outline-offset: 2px }

.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce div.product form.cart .msd-btn-site {
	order: 4;
	flex: 1 1 240px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 54px;
	padding: 12px 28px;
	border: 1px solid transparent;
	border-radius: 999px;
	cursor: pointer;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}

.woocommerce div.product form.cart .single_add_to_cart_button {
	background: transparent;
	border-color: var(--msd-line-ui);
	color: #fff;
	box-shadow: none;
}

.woocommerce div.product form.cart .single_add_to_cart_button:hover {
	background: rgba(255, 255, 255, .07);
	border-color: rgba(255, 255, 255, .55);
	color: #fff;
}

.woocommerce div.product form.cart .msd-btn-site {
	order: 5;
	flex-direction: column;
	gap: 2px;
	background-image: var(--msd-grad);
	color: #0e0e10;
	box-shadow: 0 12px 30px rgba(244, 114, 182, .22);
}

.woocommerce div.product form.cart .msd-btn-site:hover { transform: translateY(-1px); opacity: .95 }
.msd-btn-site .msd-btn-price { font-size: 12.5px; font-weight: 700 }
.msd-btn-site .msd-btn-price .woocommerce-Price-amount { font-size: inherit }
.msd-site-form { display: none }

/* ------------------------------------------------- quantity reveal per GIF
   The stepper is absent until the first add, then it takes the space the
   button gave up instead of pushing the layout around. */

.woocommerce div.product form.cart:not(.msd-qty-open) :is(.quantity, .msd-qty-btn) {
	display: none;
}

.woocommerce div.product form.cart.msd-qty-in :is(.quantity, .msd-qty-btn) {
	animation: msd-qty-in .34s cubic-bezier(.2, .75, .2, 1) both;
}

@keyframes msd-qty-in {
	from { opacity: 0; transform: translateY(7px) scale(.92) }
	to { opacity: 1; transform: none }
}

/* ---------------------------------------------------- added-to-cart motion
   The pressed pill collapses to a circle, the goods drop in and the cart
   rocks, then it expands and the green confirmation wipes over it. */

.woocommerce div.product form.cart .msd-anim {
	position: relative;
	overflow: hidden;
	flex-direction: row;
	min-width: 0;
	transition: flex-basis .34s cubic-bezier(.2, .8, .2, 1), padding .34s cubic-bezier(.2, .8, .2, 1),
		background .15s ease, border-color .15s ease;
}

.woocommerce div.product form.cart .msd-anim[disabled] {
	opacity: 1;
	cursor: default;
}

.woocommerce div.product form.cart .msd-anim.msd-p1 {
	flex-basis: 58px !important;
	padding: 12px 8px;
}

.woocommerce div.product form.cart .msd-btn-face {
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity .2s ease;
}

.woocommerce div.product form.cart .msd-btn-site .msd-btn-face {
	flex-direction: column;
	gap: 2px;
}

.woocommerce div.product form.cart .msd-anim.msd-p1 .msd-btn-face,
.woocommerce div.product form.cart .msd-anim.msd-p2 .msd-btn-face {
	opacity: 0;
}

.woocommerce div.product form.cart .msd-btn-icon {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	opacity: 0;
	transform: scale(.55);
	transition: opacity .2s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1);
	pointer-events: none;
}

.woocommerce div.product form.cart .msd-anim.msd-p1 .msd-btn-icon {
	opacity: 1;
	transform: scale(1);
}

.woocommerce div.product form.cart .msd-anim.msd-p2 .msd-btn-icon {
	transition-duration: .14s;
}

.woocommerce div.product form.cart .msd-btn-icon svg {
	width: 24px;
	height: 24px;
}

.msd-dot {
	position: absolute;
	top: calc(50% - 16px);
	left: calc(50% - 2px);
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0;
	pointer-events: none;
}

.msd-dot:nth-of-type(2) { left: calc(50% + 4px) }
.msd-dot:nth-of-type(3) { left: calc(50% - 8px) }

.woocommerce div.product form.cart .msd-anim.msd-p1 .msd-dot {
	animation: msd-drop .62s cubic-bezier(.55, .06, .68, .19) both;
}

.woocommerce div.product form.cart .msd-anim.msd-p1 .msd-dot:nth-of-type(2) { animation-delay: .2s }
.woocommerce div.product form.cart .msd-anim.msd-p1 .msd-dot:nth-of-type(3) { animation-delay: .4s }

.woocommerce div.product form.cart .msd-anim.msd-p1 .msd-btn-icon svg {
	animation: msd-rock .62s ease-in-out .58s;
}

@keyframes msd-drop {
	0% { opacity: 0; transform: translateY(-11px) scale(.6) }
	22% { opacity: 1 }
	74% { opacity: 1; transform: translateY(4px) scale(1) }
	100% { opacity: 0; transform: translateY(8px) scale(.35) }
}

@keyframes msd-rock {
	0%, 100% { transform: rotate(0) }
	18% { transform: rotate(-9deg) }
	42% { transform: rotate(7deg) }
	66% { transform: rotate(-4deg) }
	84% { transform: rotate(2deg) }
}

.woocommerce div.product form.cart .msd-btn-done {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border-radius: inherit;
	background: linear-gradient(135deg, #34d399, #10b981);
	color: #05231a;
	font-size: 15px;
	font-weight: 800;
	opacity: 0;
	clip-path: inset(0 0 0 100%);
	transition: clip-path .34s cubic-bezier(.2, .8, .2, 1) .1s, opacity .14s ease;
	pointer-events: none;
}

.woocommerce div.product form.cart .msd-anim.msd-p2 .msd-btn-done {
	opacity: 1;
	clip-path: inset(0 0 0 0);
}

.woocommerce div.product form.cart .msd-btn-done svg {
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
}

.woocommerce div.product form.cart .msd-btn-done svg path {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	transition: stroke-dashoffset .3s ease-out .34s;
}

.woocommerce div.product form.cart .msd-anim.msd-p2 .msd-btn-done svg path {
	stroke-dashoffset: 0;
}

.msd-sr-status {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce div.product form.cart .msd-anim,
	.woocommerce div.product form.cart .msd-anim .msd-btn-face,
	.woocommerce div.product form.cart .msd-anim .msd-btn-icon,
	.woocommerce div.product form.cart .msd-anim .msd-btn-done,
	.woocommerce div.product form.cart .msd-btn-done svg path {
		transition: none;
	}

	.woocommerce div.product form.cart .msd-anim.msd-p1 {
		flex-basis: auto !important;
		padding: 12px 28px;
	}

	.woocommerce div.product form.cart .msd-anim .msd-btn-icon { transform: none }
	.woocommerce div.product form.cart .msd-anim.msd-p2 .msd-btn-icon { opacity: 0 }
	.woocommerce div.product form.cart .msd-anim.msd-p1 .msd-dot,
	.woocommerce div.product form.cart .msd-anim.msd-p1 .msd-btn-icon svg,
	.woocommerce div.product form.cart.msd-qty-in :is(.quantity, .msd-qty-btn) {
		animation: none;
	}

	.woocommerce div.product form.cart .msd-btn-done { clip-path: none }
}

.woocommerce div.product form.cart:after,
.woocommerce div.product form.cart:before { display: none; content: none }

.msd-legend {
	display: grid;
	gap: 10px;
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
}

.msd-legend li {
	padding-inline-start: 12px;
	border-inline-start: 2px solid rgba(244, 114, 182, .55);
	color: var(--msd-muted);
	font-size: 13px;
	line-height: 1.85;
}

.msd-legend li:first-child { border-inline-start-color: rgba(255, 255, 255, .25) }
.msd-legend b { color: #fff; font-weight: 700 }
.msd-legend .woocommerce-Price-amount { color: #fff }
.msd-meta { margin-top: 18px; color: rgba(255, 255, 255, .45); font-size: 12.5px }
.msd-meta .msd-sku { color: rgba(255, 255, 255, .7) }

/* ---------------------------------------------------------------- rating */

.msd-rate {
	margin: clamp(32px, 5vw, 64px) auto 0;
	padding-top: 8px;
}

.msd-h2 { margin: 0 0 18px; color: #fff; font-size: clamp(20px, 2.2vw, 26px); font-weight: 800 }

.msd-rate-grid {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr) 260px;
	gap: 28px;
	align-items: center;
	padding: 24px;
	background: var(--msd-card);
	border: 1px solid var(--msd-line);
	border-radius: 20px;
}

.msd-rate-avg { color: #fff; font-size: 56px; font-weight: 800; line-height: 1 }
.msd-rate-avg span { font-size: 18px; font-weight: 600; color: var(--msd-muted) }
.msd-rate-count { margin-top: 6px; color: var(--msd-muted); font-size: 12.5px }
.msd-bar-row { display: flex; align-items: center; gap: 10px; margin: 7px 0 }
.msd-bar-star { flex: 0 0 34px; color: var(--msd-muted); font-size: 12.5px }
.msd-bar { flex: 1; height: 6px; background: rgba(255, 255, 255, .1); border-radius: 999px; overflow: hidden }
.msd-bar i { display: block; height: 100%; background-image: var(--msd-grad); border-radius: 999px }
.msd-bar-num { flex: 0 0 32px; color: var(--msd-muted); font-size: 12.5px; text-align: end }
.msd-rate-cta h3 { margin: 0 0 6px; color: #fff; font-size: 17px; font-weight: 700 }
.msd-rate-cta p { margin: 0 0 14px; color: var(--msd-muted); font-size: 13px }

.msd-review-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 22px;
	border: 1px solid var(--msd-line-ui);
	border-radius: 999px;
	color: #fff;
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
	transition: background .15s ease, border-color .15s ease;
}

.msd-review-btn:hover { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .55); color: #fff }

/* --------------------------------------------------------------- reviews */

.woocommerce div.product #reviews,
.woocommerce div.product .woocommerce-Reviews {
	margin-top: 28px;
	padding: 24px;
	background: var(--msd-card);
	border: 1px solid var(--msd-line);
	border-radius: 20px;
}

.woocommerce div.product #reviews .woocommerce-Reviews-title,
.woocommerce div.product #review_form_wrapper .comment-reply-title {
	margin: 0 0 16px;
	color: #fff;
	font-size: 19px;
	font-weight: 800;
}

.woocommerce div.product .commentlist { margin: 0; padding: 0; list-style: none }
.woocommerce div.product .commentlist li.comment { padding: 18px 0; border-top: 1px solid var(--msd-line); color: var(--msd-muted) }
.woocommerce div.product .commentlist li.comment:first-child { border-top: 0 }
.woocommerce div.product .commentlist .description { color: var(--msd-muted); font-size: 14px; line-height: 1.9 }
.woocommerce div.product .commentlist .comment-author { color: #fff }
.woocommerce div.product .commentlist .meta { color: rgba(255, 255, 255, .5) }
.woocommerce div.product .comment-form { display: grid; gap: 12px; margin-top: 8px }
.woocommerce div.product .comment-form p { margin: 0 }
.woocommerce div.product .comment-form label { display: block; margin-bottom: 6px; color: var(--msd-muted); font-size: 13px }
.woocommerce div.product .comment-form input[type=text],
.woocommerce div.product .comment-form input[type=email],
.woocommerce div.product .comment-form textarea {
	width: 100%;
	padding: 12px 14px;
	background: var(--msd-card-2);
	border: 1px solid var(--msd-line);
	border-radius: 12px;
	color: #fff;
	font-size: 14px;
}

.woocommerce div.product .comment-form input:focus,
.woocommerce div.product .comment-form textarea:focus { outline: 2px solid #a855f7; border-color: transparent }
.woocommerce div.product .comment-form .submit { width: auto; padding: 12px 26px; border: 0; border-radius: 999px; background-image: var(--msd-grad); color: #121212; font-weight: 700; cursor: pointer }
.woocommerce div.product p.stars a { color: rgba(255, 255, 255, .35) }
.woocommerce div.product p.stars a:hover ~ a,
.woocommerce div.product p.stars.selected a.active,
.woocommerce div.product p.stars.selected a:not(.active) { color: #f472b6 }

/* --------------------------------------------------------------- related */

.woocommerce div.product .related.products { margin: clamp(32px, 5vw, 64px) 0 0 }
.woocommerce div.product .related.products > h2 { margin: 0 0 18px; color: #fff; font-size: clamp(20px, 2.2vw, 26px); font-weight: 800 }
.woocommerce div.product .related.products ul.products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px }
/* The float clearfix turns into a grid item and silently eats the first cell,
   which pushes the last product onto a second row. */
.woocommerce div.product .related.products ul.products::before,
.woocommerce div.product .related.products ul.products::after { display: none }
.woocommerce div.product .related.products ul.products li.product { width: auto; margin: 0; float: none; clear: none }

/* ------------------------------------------------------------ responsive */

@media (max-width: 1023.98px) {
	.woocommerce div.product .related.products ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) }
	.msd-rate-grid { grid-template-columns: 1fr; gap: 20px }
}

@media (max-width: 899.98px) {
	.msd-columns { grid-template-columns: 1fr }
	.msd-media { position: static }
	.woocommerce div.product form.cart .single_add_to_cart_button,
	.woocommerce div.product form.cart .msd-btn-site { flex: 1 1 100% }
	.msd-delivery-grid { grid-template-columns: 1fr }
}

@media (max-width: 599.98px) {
	body.single-product #main { padding-inline: 16px }
	.woocommerce div.product .related.products ul.products { grid-template-columns: 1fr }
	.woocommerce div.product .woocommerce-product-gallery .flex-control-nav li { width: 64px; height: 64px; flex-basis: 64px }
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce div.product form.cart .msd-btn-site:hover { transform: none }
}