/* --- Single Product Page (Morakniv structure) --- */

/* Columns: 0 gap, right column gets internal padding (like Morakniv) */
.muus-product-columns {
	gap: 0 !important;
}

.muus-product-columns > .wp-block-column:last-child {
	padding-left: 30px;
}

.muus-product-about > .wp-block-columns {
	gap: 0 !important;
}

.muus-product-about > .wp-block-columns > .wp-block-column:last-child {
	padding-left: 30px;
}

/* Gallery: square, fills column, transparent bg (like Morakniv) */
.muus-single-product .wp-block-woocommerce-product-image-gallery {
	max-width: 100% !important;
	width: 100% !important;
}

.muus-single-product .woocommerce-product-gallery {
	width: 100% !important;
	max-width: 100% !important;
	background-color: var(--wp--preset--color--background, #111);
}

.muus-single-product .woocommerce-product-gallery .flex-viewport {
	width: 100% !important;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	clip-path: inset(0);
	background-color: var(--wp--preset--color--background, #111);
	border: 0 !important;
	margin: 0 !important;
}

.muus-single-product .woocommerce-product-gallery .flexslider,
.woocommerce div.product div.images .flexslider {
	width: 100% !important;
	border: 0 !important;
	border-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	background: transparent !important;
}

.muus-single-product .woocommerce-product-gallery .slides {
	width: 100% !important;
}

.muus-single-product .woocommerce-product-gallery .slides > li {
	width: 100% !important;
	background-color: var(--wp--preset--color--background, #111);
	border: none !important;
	outline: none !important;
}

/* Prevent zoom plugin from flashing white */
.muus-single-product .zoomImg {
	background-color: var(--wp--preset--color--background, #111) !important;
}

.muus-single-product .woocommerce-product-gallery__image {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background-color: var(--wp--preset--color--background, #111);
	border: none !important;
	outline: none !important;
}

.muus-single-product .woocommerce-product-gallery__image a {
	display: block;
	width: 100% !important;
	height: 100% !important;
	background-color: var(--wp--preset--color--background, #111);
	border: none !important;
	outline: none !important;
}

.muus-single-product .woocommerce-product-gallery__image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	border-radius: 0;
	border: none !important;
	outline: none !important;
}

/* Contain the pre-init gallery stack (fixes the dominant product-page CLS).
   This is a block theme, so WooCommerce's classic woocommerce.css — which ships
   the pre-init containment — is NOT loaded. Without it, every gallery slide
   renders full-width (each a square via the aspect-ratio:1/1 above), so ~5 images
   stack ~2000px tall until flexslider collapses them to one slide, jerking all
   content below upward. Hiding slides 2+ is not race-proof: flexslider sets inline
   display:block on every slide a frame before it sizes the viewport, so the full
   stack can flash for a frame. Instead clip the OUTER gallery to a definite box
   whose height comes from its own width — never from its children — so the stack
   and the display:block flash are both clipped and can't move content below.
   IMPORTANT: flexslider sizes its viewport to the first SLIDE, and this theme
   forces slide ratios itself (1/1 desktop, 4/5 mobile — see the
   .woocommerce-product-gallery__image rules), NOT to the featured image's own
   ratio. So the reserved box must mirror those forced slide ratios; then releasing
   the clip (JS adds .muus-gallery-ready once the viewport has been sized) only
   reveals the thumbnail row: one small, one-way shift, no bounce. */
.muus-single-product .woocommerce-product-gallery:not(.muus-gallery-ready) {
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

@media (max-width: 781px) {
	.muus-single-product .woocommerce-product-gallery:not(.muus-gallery-ready) {
		aspect-ratio: 4 / 5;
	}
}

/* PDP LCP note (2026-07-11): an opacity:1 !important override here (painting
   the first gallery frame before flexslider init) was shipped in v2.8.108 and
   REVERTED in v2.8.109 — flexslider's init visibly re-positions the already-
   painted active slide, producing CLS 0.66–0.73 (Lighthouse, both sites).
   WC's own opacity-gating is CLS-safe, and with third-party pixels now
   deferred the init runs early enough that LCP stays on the gallery image.
   Do not re-add the override without pinning the first slide's rect through
   the flex-viewport DOM restructure. */

/* Gallery: zoom trigger — "+" in circle (high specificity to override WooCommerce) */
.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 44px !important;
	height: 44px !important;
	border-radius: 50%;
	background: rgba(17, 17, 17, 0.7) !important;
	border: 1px solid var(--wp--preset--color--border) !important;
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 15;
	opacity: 0;
	transition: opacity 0.25s, background 0.2s;
	cursor: pointer;
	text-decoration: none;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	padding: 0 !important;
	text-indent: 0 !important;
}

.woocommerce div.product div.images .woocommerce-product-gallery__trigger * {
	display: none !important;
}

.woocommerce div.product div.images .woocommerce-product-gallery__trigger::before {
	content: '+' !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	position: static !important;
	width: 100% !important;
	height: 100% !important;
	border: none !important;
	border-radius: 0 !important;
	font-size: 1.5rem;
	font-weight: 300;
	line-height: 1;
	color: #fff;
	top: auto !important;
	left: auto !important;
}

.woocommerce div.product div.images .woocommerce-product-gallery__trigger::after {
	content: none !important;
	display: none !important;
}

.woocommerce div.product div.images:hover .woocommerce-product-gallery__trigger {
	opacity: 1;
}

.woocommerce div.product div.images .woocommerce-product-gallery__trigger:hover {
	background: rgba(17, 17, 17, 0.9) !important;
}

/* PhotoSwipe lightbox — bottom center navigation */
.pswp__bg {
	background: rgba(0, 0, 0, 0.95) !important;
}

.pswp__top-bar {
	display: none !important;
}

.pswp__caption {
	display: none !important;
}

/* Bottom nav: ← × → centered */
.pswp__bottom-nav {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 8px;
	z-index: 9999;
}

.pswp__bottom-nav .pswp__button {
	position: static !important;
	width: 44px !important;
	height: 44px !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, 0.12) !important;
	border: 1px solid rgba(255, 255, 255, 0.25) !important;
	margin: 0 !important;
	opacity: 1 !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.2s;
	float: none !important;
}

.pswp__bottom-nav .pswp__button:hover {
	background-color: rgba(255, 255, 255, 0.25) !important;
}

/* Hide default arrow/close backgrounds */
.pswp__bottom-nav .pswp__button--arrow--left::before,
.pswp__bottom-nav .pswp__button--arrow--left::after,
.pswp__bottom-nav .pswp__button--arrow--right::before,
.pswp__bottom-nav .pswp__button--arrow--right::after,
.pswp__bottom-nav .pswp__button--close::before,
.pswp__bottom-nav .pswp__button--close::after {
	display: none !important;
	background: none !important;
}

/* SVG icons via background */
.pswp__bottom-nav .pswp__button--arrow--left {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 20px !important;
	background-color: rgba(255, 255, 255, 0.12) !important;
}

.pswp__bottom-nav .pswp__button--close {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 20px !important;
	background-color: rgba(255, 255, 255, 0.12) !important;
}

.pswp__bottom-nav .pswp__button--arrow--right {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 20px !important;
	background-color: rgba(255, 255, 255, 0.12) !important;
}

/* Keep arrow icons visible on hover */
.pswp__bottom-nav .pswp__button--arrow--left:hover {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E") !important;
	background-color: rgba(255, 255, 255, 0.25) !important;
	opacity: 1 !important;
}

.pswp__bottom-nav .pswp__button--arrow--right:hover {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") !important;
	background-color: rgba(255, 255, 255, 0.25) !important;
	opacity: 1 !important;
}

/* Override any default PhotoSwipe arrow hover/hide styles */
.pswp__button--arrow--left:hover,
.pswp__button--arrow--right:hover {
	visibility: visible !important;
	opacity: 1 !important;
}

/* Fix: FlexSlider sub-pixel gap (clone slide peeks through 0.5px on left) */
.muus-single-product .flex-viewport::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 2px;
	height: 100%;
	background: var(--wp--preset--color--background, #111);
	z-index: 2;
	pointer-events: none;
}

/* Gallery: Flexslider arrows */
.muus-single-product .flex-viewport {
	position: relative;
	overflow: hidden;
}

.muus-single-product .flex-direction-nav {
	margin: 0;
	padding: 0;
	list-style: none;
}

.muus-single-product .flex-direction-nav a {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(17, 17, 17, 0.7);
	border: 1px solid var(--wp--preset--color--border);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.25s, background 0.2s;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	text-indent: -9999px;
	cursor: pointer;
	text-decoration: none;
}

.muus-single-product .flex-direction-nav a::after {
	content: '';
	display: block;
	width: 20px;
	height: 20px;
	text-indent: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.muus-single-product .flex-direction-nav a.flex-prev {
	left: 12px;
}

.muus-single-product .flex-direction-nav a.flex-prev::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E");
}

.muus-single-product .flex-direction-nav a.flex-next {
	right: 12px;
}

.muus-single-product .flex-direction-nav a.flex-next::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E");
}

.muus-single-product .flex-direction-nav a:hover {
	background: rgba(17, 17, 17, 0.9);
}

.muus-single-product .woocommerce-product-gallery:hover .flex-direction-nav a {
	opacity: 1;
}

.muus-single-product .flex-direction-nav a.flex-disabled {
	opacity: 0 !important;
	pointer-events: none;
}

/* Gallery: thumbnails — gap between main image and thumbs (Morakniv: 5px/5px) */
.muus-single-product .flex-control-thumbs {
	display: flex;
	gap: 10px;
	margin-top: 10px !important;
	margin-bottom: 10px !important;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.muus-single-product .flex-control-thumbs::-webkit-scrollbar {
	display: none;
}

.muus-single-product .flex-control-thumbs li {
	flex: 0 0 88px;
	width: 88px;
	height: 88px;
	cursor: pointer;
	border: 2px solid transparent;
	transition: border-color 0.2s;
	overflow: hidden;
	background-color: transparent;
}

.muus-single-product .flex-control-thumbs li:has(img.flex-active) {
	border-color: var(--wp--preset--color--text);
}

.muus-single-product .flex-control-thumbs li img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.6;
	transition: opacity 0.2s;
}

.muus-single-product .flex-control-thumbs li img.flex-active,
.muus-single-product .flex-control-thumbs li:hover img {
	opacity: 1;
}

.muus-single-product .woocommerce-product-gallery__image--placeholder {
	display: none;
}

/* SKU line */
.muus-product-sku-line {
	margin-top: 0 !important;
}

.muus-product-sku-line .wc-block-components-product-sku {
	font-size: 0.875rem;
	color: var(--wp--preset--color--text-muted);
}

/* Stock status: green/red dot */
.muus-stock-status {
	font-size: 0.9rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.25rem;
	color: var(--wp--preset--color--text);
}

.muus-stock-status::before {
	content: '';
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
}

.muus-stock-status.in-stock::before {
	background-color: #56AD6A;
}

.muus-stock-status.out-of-stock::before {
	background-color: #e53935;
}

.muus-stock-status.on-backorder::before {
	background-color: var(--wp--preset--color--primary);
}

.muus-single-product .wp-block-woocommerce-add-to-cart-form .stock {
	display: none !important;
}

/* Product description in right column (like Morakniv) */
.muus-product-info .muus-product-description {
	color: var(--wp--preset--color--text);
}

.muus-product-info .muus-product-description p {
	margin-bottom: 1rem;
}

.muus-product-info .muus-product-description h2,
.muus-product-info .muus-product-description h3,
.muus-product-info .muus-product-description h4 {
	font-size: 0.95rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.025em;
	margin-top: 1.25rem;
	margin-bottom: 0.5rem;
}

.muus-product-info .muus-product-description ul {
	padding-left: 1.25rem;
	margin-bottom: 1rem;
}

.muus-product-info .muus-product-description li {
	margin-bottom: 0.25rem;
}

/* Hide standalone price text in product info (price is shown inside the add-to-cart button) */
.muus-product-info > .wp-block-woocommerce-product-price .wc-block-components-product-price {
	display: none;
}

/* Add to cart: full-width, 46px height, uppercase with price (Morakniv) */
.muus-single-product .wp-block-woocommerce-add-to-cart-form {
	margin-top: 0.75rem;
}

.muus-single-product .wp-block-woocommerce-add-to-cart-form form.cart {
	display: block !important;
}

.muus-single-product .wp-block-woocommerce-add-to-cart-form form.cart .quantity,
.muus-single-product form.cart .quantity {
	display: none !important;
}

.muus-single-product .single_add_to_cart_button {
	width: 100% !important;
	display: block !important;
	text-align: center;
	height: 46px;
	padding: 0 2rem !important;
	font-size: 0.9rem !important;
	font-weight: 400 !important;
	text-transform: uppercase;
	letter-spacing: 0.075em;
	background-color: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--background) !important;
	border: none !important;
	border-radius: 0 !important;
	cursor: pointer;
	transition: background-color 0.2s;
}

.muus-single-product .single_add_to_cart_button:hover {
	background-color: var(--wp--preset--color--text) !important;
}

/* --- "About the Product" section --- */
.muus-product-about-image img {
	width: auto;
	max-width: 100%;
	max-height: 560px;
	height: auto;
	display: block;
	margin: 0 auto;
}

.muus-about-label {
	margin-bottom: 1.25rem;
}

.muus-about-label__tag {
	display: block;
	font-size: 0.75rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--text-muted);
	margin-bottom: 0.5rem;
}

.muus-about-label__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: 2rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--text);
	margin: 0;
	line-height: 1.2;
}

.muus-product-about .wp-block-post-content {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--wp--preset--color--text);
}

.muus-product-about .wp-block-post-content p {
	margin-bottom: 1.25rem;
}

/* Description subheadings: Morakniv style */
.muus-product-about .wp-block-post-content h2,
.muus-product-about .wp-block-post-content h3,
.muus-product-about .wp-block-post-content h4 {
	font-size: 0.875rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-top: 1.75rem;
	margin-bottom: 0.5rem;
	color: var(--wp--preset--color--text);
}

/* --- Specs Accordion section --- */
.muus-product-specs .muus-product-about-image img {
	width: auto;
	max-width: 100%;
	max-height: 560px;
	height: auto;
	display: block;
	margin: 0 auto;
}

/* Mobile: reserve the about-image box before EWWW's lazy-load/WebP swap fires
   (fixes the product-page CLS, ~0.18 mobile). Here the image is full-column
   width, so width:100% + the per-product inline aspect-ratio (emitted in PHP)
   give the box a definite, stable height before the real image swaps in.
   Desktop deliberately keeps width:auto — its 2-column row height is driven by
   the description text so the image swap doesn't shift layout there, and a
   narrower img element keeps sizes=auto from pulling a larger source. */
@media (max-width: 781px) {
	.muus-product-about-image img,
	.muus-product-specs .muus-product-about-image img {
		width: 100%;
		height: auto;
		object-fit: contain;
	}
}

.muus-product-specs .woocommerce-tabs .tabs {
	display: none !important;
}

.muus-product-specs .woocommerce-tabs .panel {
	padding: 0;
}

/* Accordion headers: 1rem, clean, border-top between items */
.muus-accordion-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 0.95rem 0;
	border: none;
	border-top: 1px solid var(--wp--preset--color--border);
	background: none;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--text);
	transition: color 0.2s;
}

.muus-accordion-header:last-of-type {
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.muus-accordion-header:hover {
	color: var(--wp--preset--color--primary);
}

.muus-accordion-title {
	font-size: 1rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.025em;
}

.muus-accordion-icon {
	font-size: 1.5rem;
	font-weight: 300;
	line-height: 1;
	margin-right: 0.25rem;
}

.muus-accordion-panel {
	padding: 1rem 0 1.5rem;
	font-size: 0.9rem;
	line-height: 1.7;
	color: var(--wp--preset--color--text);
}

.muus-accordion-panel table {
	width: 100%;
	border-collapse: collapse;
}

.muus-accordion-panel table th,
.muus-accordion-panel table td {
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
	font-size: 0.875rem;
	text-align: left;
}

.muus-accordion-panel table th {
	font-weight: 600;
	color: var(--wp--preset--color--text);
	width: 40%;
}

.muus-accordion-panel table td {
	color: var(--wp--preset--color--text-muted);
}

/* Specs section: right column padding (Morakniv: 30px left) */
.muus-product-specs > .wp-block-columns {
	gap: 0 !important;
}

.muus-product-specs > .wp-block-columns > .wp-block-column:last-child {
	padding-left: 30px;
}

/* Specs accordion — Morakniv style */
.muus-specs-accordion {
	width: 100%;
}

.muus-specs-accordion__item {
	border-top: 1px solid var(--wp--preset--color--border);
}

.muus-specs-accordion__item:last-child {
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.muus-specs-accordion__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 15px 0;
	border: none;
	background: none;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--text);
	transition: color 0.2s;
}

.muus-specs-accordion__header:hover {
	color: var(--wp--preset--color--primary);
}

.muus-specs-accordion__title {
	font-size: 1rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.025em;
}

.muus-specs-accordion__icon {
	font-size: 1.5rem;
	font-weight: 300;
	line-height: 1;
	display: inline-block;
	transition: transform 0.3s ease;
}

.muus-specs-accordion__item.is-open .muus-specs-accordion__icon {
	transform: rotate(45deg);
}

.muus-specs-accordion__panel {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s ease;
}

.muus-specs-accordion__content {
	padding: 0 0 1.5rem;
	font-size: 0.9rem;
	line-height: 1.7;
	color: var(--wp--preset--color--text);
}

.muus-specs-table {
	width: 100%;
	border-collapse: collapse;
}

.muus-specs-table th,
.muus-specs-table td {
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
	font-size: 0.875rem;
	text-align: left;
}

.muus-specs-table th {
	font-weight: 600;
	color: var(--wp--preset--color--text);
	width: 40%;
}

.muus-specs-table td {
	color: var(--wp--preset--color--text-muted);
}

/* Reviews inside accordion */
.muus-specs-accordion__content .comment-respond {
	margin-top: 1.5rem;
}

.muus-specs-accordion__content #reviews h2,
.muus-specs-accordion__content .woocommerce-Reviews-title {
	display: none;
}

/* "No reviews yet" text */
.muus-specs-accordion__content .woocommerce-noreviews {
	color: var(--wp--preset--color--text-muted);
	font-size: 0.9rem;
	margin-bottom: 1.5rem;
}

/* Review form title */
.muus-specs-accordion__content .comment-reply-title {
	font-size: 1rem;
	font-weight: 600;
	color: var(--wp--preset--color--text);
	margin-bottom: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.025em;
}

.muus-specs-accordion__content .comment-reply-title span {
	display: none;
}

/* Form notes */
.muus-specs-accordion__content .comment-notes {
	font-size: 0.8rem;
	color: var(--wp--preset--color--text-muted);
	margin-bottom: 1.25rem;
}

.muus-specs-accordion__content .required {
	color: var(--wp--preset--color--primary);
}

/* Rating stars */
.muus-specs-accordion__content .comment-form-rating {
	margin-bottom: 1.25rem;
}

.muus-specs-accordion__content .comment-form-rating > label {
	display: block;
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--wp--preset--color--text);
	margin-bottom: 0.5rem;
}

/* woocommerce-general.css is dequeued on product pages (perf filter in
   functions.php), so WooCommerce's icon-font star widget never gets styled.
   Draw the stars ourselves with unicode glyphs. Live DOM (WC 10.9
   single-product.js): p.stars > span[role=group] > a.star-1..star-5, each
   link's text is the a11y label ("1 из 5 звёзд" / "1 out of 5 stars");
   click adds .selected to p.stars and .active to the chosen link. */
.muus-specs-accordion__content .stars {
	display: flex;
	margin: 0;
}

.muus-specs-accordion__content .stars span {
	display: inline-flex;
	gap: 0.3rem;
}

.muus-specs-accordion__content .stars a {
	position: relative;
	display: inline-block;
	width: 1.1em;
	height: 1.1em;
	font-size: 1.5rem;
	line-height: 1;
	/* Keep the "N из 5 звёзд" label for screen readers, hide it visually. */
	text-indent: -999em;
	text-decoration: none;
	cursor: pointer;
	color: var(--wp--preset--color--text-muted);
}

.muus-specs-accordion__content .stars a::before {
	content: "\2606"; /* ☆ */
	position: absolute;
	top: 0;
	left: 0;
	text-indent: 0;
}

/* Hover preview: fill every star up to (and including) the hovered one. */
.muus-specs-accordion__content .stars:hover a::before {
	content: "\2605"; /* ★ */
	color: var(--wp--preset--color--primary);
}

.muus-specs-accordion__content .stars a:hover ~ a::before {
	content: "\2606";
	color: var(--wp--preset--color--text-muted);
}

/* Chosen rating: fill the active star and everything before it. */
.muus-specs-accordion__content .stars.selected a.active::before,
.muus-specs-accordion__content .stars.selected a:not(.active)::before {
	content: "\2605";
	color: var(--wp--preset--color--primary);
}

.muus-specs-accordion__content .stars.selected a.active ~ a::before {
	content: "\2606";
	color: var(--wp--preset--color--text-muted);
}

/* Form fields: labels + inputs */
.muus-specs-accordion__content .comment-form label {
	display: block;
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--wp--preset--color--text);
	margin-bottom: 0.4rem;
}

.muus-specs-accordion__content .comment-form input[type="text"],
.muus-specs-accordion__content .comment-form input[type="email"],
.muus-specs-accordion__content .comment-form textarea {
	width: 100%;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 4px;
	color: var(--wp--preset--color--text);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9rem;
	padding: 0.75rem 1rem;
	transition: border-color 0.2s;
	outline: none;
}

.muus-specs-accordion__content .comment-form input[type="text"]:focus,
.muus-specs-accordion__content .comment-form input[type="email"]:focus,
.muus-specs-accordion__content .comment-form textarea:focus {
	border-color: var(--wp--preset--color--primary);
}

.muus-specs-accordion__content .comment-form textarea {
	resize: vertical;
	min-height: 120px;
}

.muus-specs-accordion__content .comment-form p {
	margin-bottom: 1rem;
}

/* Name + Email side by side */
.muus-specs-accordion__content .comment-form-author,
.muus-specs-accordion__content .comment-form-email {
	display: inline-block;
	width: calc(50% - 0.5rem);
	vertical-align: top;
}

.muus-specs-accordion__content .comment-form-author {
	margin-right: 0.5rem;
}

/* Cookies consent */
.muus-specs-accordion__content .comment-form-cookies-consent {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8rem;
	color: var(--wp--preset--color--text-muted);
}

.muus-specs-accordion__content .comment-form-cookies-consent input[type="checkbox"] {
	accent-color: var(--wp--preset--color--primary);
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

/* Submit button */
.muus-specs-accordion__content .muus-review-submit,
.muus-specs-accordion__content .form-submit input[type="submit"] {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
	border: none;
	padding: 0.75rem 2rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.85rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	cursor: pointer;
	transition: opacity 0.2s;
}

.muus-specs-accordion__content .muus-review-submit:hover,
.muus-specs-accordion__content .form-submit input[type="submit"]:hover {
	opacity: 0.85;
}