/* Single equipment (product) template: resources/single-equipment.php.
   Scoped to .mve-prod so it cannot touch the site header/footer. */

.mve-prod {
	--red: #e33f42;
	--red-dark: #c72b2e;
	--ink: #292929;
	--muted: #70706d;
	--paper: #f5f5f2;
	--line: #e4e4df;
	--radius: 10px;
	--radius-sm: 6px;
	--font: 'Poppins', Arial, sans-serif;
	--gutter: 96px;
	--fs-h2: 22px;
	background: #fff;
	color: var(--ink);
	font: 16px/1.55 var(--font);
}

.mve-prod *,
.mve-prod *::before,
.mve-prod *::after { box-sizing: border-box; }

.mve-prod [hidden] { display: none !important; }
.mve-prod a { color: inherit; text-decoration: none; }
.mve-prod h1, .mve-prod h2, .mve-prod h3 { color: inherit; font-family: var(--font); margin: 0; }
.mve-prod p { margin: 0; }
.mve-prod button {
	font-family: var(--font); cursor: pointer;
	white-space: normal; transition: none; -webkit-user-select: auto; user-select: auto;
}
.mve-prod svg { flex-shrink: 0; }

.mve-prod-container { width: min(1280px, calc(100% - var(--gutter))); margin-inline: auto; }

/* ---- Breadcrumb ------------------------------------------------------ */

.mve-prod-breadcrumb { padding-block: 24px 26px; font-size: 14px; color: #797975; }
.mve-prod-breadcrumb a:hover { color: var(--red); }

/* ---- Hero: gallery + summary ----------------------------------------- */

.mve-prod-hero {
	display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
	gap: 65px; padding-bottom: 48px;
}
.mve-prod-gallery { min-width: 0; }

.mve-prod-stage {
	position: relative; display: flex; align-items: center; justify-content: center;
	min-height: 470px; padding: 55px 25px 40px;
	background: var(--paper); border-radius: var(--radius);
}
.mve-prod-stage > img { width: 100%; height: 375px; object-fit: contain; mix-blend-mode: multiply; }
.mve-prod .mve-prod-zoom {
	position: absolute; right: 20px; bottom: 17px; display: grid; place-items: center;
	width: 35px; height: 35px; padding: 0; margin: 0;
	background: #fff; color: var(--ink); border: 1px solid #d7d7d0; border-radius: var(--radius-sm);
	transition: background .2s;
}
.mve-prod .mve-prod-zoom:hover,
.mve-prod .mve-prod-zoom:focus { background: var(--paper); color: var(--ink); }

.mve-prod-stage { touch-action: pan-y; overflow: hidden; }
.mve-prod-stage > img { cursor: zoom-in; }
.mve-prod .mve-prod-slide-nav {
	position: absolute; top: 50%; z-index: 1; display: grid; place-items: center;
	width: 40px; height: 40px; padding: 0; margin: -20px 0 0;
	background: #fff; color: var(--ink); border: 1px solid #d7d7d0; border-radius: 50%;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}
.mve-prod .mve-prod-slide-nav:hover,
.mve-prod .mve-prod-slide-nav:focus { background: var(--paper); color: var(--ink); }
.mve-prod .mve-prod-slide-nav:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.mve-prod-counter {
	position: absolute; left: 16px; bottom: 20px; padding: 3px 10px; border-radius: 999px;
	background: rgba(41, 41, 41, .75); color: #fff; font-size: 12px; font-weight: 500; line-height: 1.5;
}
.mve-prod-carousel { position: relative; margin-top: 15px; }
.mve-prod-thumbs {
	display: flex; flex-wrap: nowrap; gap: 10px; align-items: flex-start;
	overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain;
}
.mve-prod-thumbs::-webkit-scrollbar { display: none; }
.mve-prod .mve-prod-thumbs-nav {
	position: absolute; top: 50%; z-index: 1; display: grid; place-items: center;
	width: 28px; height: 28px; padding: 0; margin: -14px 0 0;
	background: #fff; color: var(--ink); border: 1px solid #d7d7d0; border-radius: 50%;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}
.mve-prod .mve-prod-thumbs-nav:hover,
.mve-prod .mve-prod-thumbs-nav:focus { background: var(--paper); color: var(--ink); }
.mve-prod-thumbs-nav--prev { left: -6px; }
.mve-prod-thumbs-nav--next { right: -6px; }
.mve-prod .mve-prod-thumb {
	flex-shrink: 0; scroll-snap-align: start; width: 70px; height: 65px; padding: 7px; margin: 0;
	background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-sm);
	transition: border-color .2s;
}
.mve-prod .mve-prod-thumb:hover,
.mve-prod .mve-prod-thumb:focus { background: #fff; color: var(--ink); border-color: #c9c8c0; }
.mve-prod .mve-prod-thumb.is-selected,
.mve-prod .mve-prod-thumb.is-selected:hover,
.mve-prod .mve-prod-thumb.is-selected:focus { border-color: var(--red); box-shadow: inset 0 -2px var(--red); }
.mve-prod .mve-prod-thumb:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.mve-prod-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }

.mve-prod-summary { padding-top: 3px; min-width: 0; }
.mve-prod-summary h1 {
	margin: 0 0 18px; font-size: clamp(24px, 6.8vw, 30px); font-weight: 700;
	line-height: 1.15; letter-spacing: -.3px; text-transform: uppercase;
}
.mve-prod-spec-heading { margin: 27px 0 10px; }
.mve-prod-spec-heading h2 { font-size: var(--fs-h2); font-weight: 600; line-height: 1.2; }
.mve-prod-specs { margin: 0; border-top: 1px solid var(--line); }
.mve-prod-specs > div {
	display: flex; justify-content: space-between; gap: 20px;
	padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px;
}
.mve-prod-specs dt { color: var(--muted); margin: 0; min-width: 0; overflow-wrap: anywhere; }
.mve-prod-specs dd { margin: 0; min-width: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
/* Rows without a label (bullet text): left-aligned with a bullet. */
.mve-prod-specs > .is-bullet { justify-content: flex-start; gap: 0; }
.mve-prod-specs > .is-bullet dd { position: relative; padding-left: 18px; text-align: left; }
.mve-prod-specs > .is-bullet dd::before { content: "\2022"; position: absolute; left: 3px; top: 0; }

.mve-prod .mve-prod-note { margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.mve-prod-note strong { color: var(--ink); font-weight: 600; }
.mve-prod-note a { color: var(--red-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.mve-prod-note a:hover { color: var(--red); }

/* ---- Action buttons -------------------------------------------------- */

.mve-prod-actions__row { display: contents; }
.mve-prod-btn__mico { display: none; }
.mve-prod-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 24px; }
.mve-prod .mve-prod-btn {
	display: inline-flex; align-items: center; justify-content: flex-start; gap: 10px;
	width: 100%; min-width: 0; min-height: 48px; padding: 12px 14px;
	border: 1px solid transparent; border-radius: var(--radius-sm);
	color: #fff; font-size: 14px; font-weight: 600; line-height: 1.3; white-space: nowrap;
	transition: background .2s;
}
.mve-prod-btn > span { overflow: hidden; text-overflow: ellipsis; }
.mve-prod-btn > svg:last-child { margin-left: auto; }
.mve-prod .mve-prod-btn:hover,
.mve-prod .mve-prod-btn:focus { color: #fff; }
.mve-prod .mve-prod-btn--red { background: var(--red); }
.mve-prod .mve-prod-btn--red:hover,
.mve-prod .mve-prod-btn--red:focus { background: var(--red-dark); }
.mve-prod .mve-prod-btn--dark { background: var(--ink); border-color: var(--ink); }
.mve-prod .mve-prod-btn--dark:hover,
.mve-prod .mve-prod-btn--dark:focus { background: #000; }
.mve-prod .mve-prod-btn:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

/* ---- How-to videos --------------------------------------------------- */

.mve-prod-videos { padding-block: 48px 8px; scroll-margin-top: 110px; }
.mve-prod-videos h2,
.mve-prod-description h2 {
	font-size: var(--fs-h2); font-weight: 700; line-height: 1.2; letter-spacing: 0; text-transform: uppercase;
}
.mve-prod-videos h2 { margin: 8px 0 20px; }

.mve-prod-vrow {
	display: flex; gap: 12px; padding-bottom: 4px;
	overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.mve-prod-vrow::-webkit-scrollbar { display: none; }
.mve-prod .mve-prod-vcard {
	flex: 0 0 174px; display: flex; flex-direction: column; gap: 8px; min-width: 0;
	padding: 0; margin: 0; background: transparent; border: 0; border-radius: 0; color: #1a1a1a;
	font-size: 14px; font-weight: 400; text-align: left; scroll-snap-align: start;
}
.mve-prod .mve-prod-vcard:hover,
.mve-prod .mve-prod-vcard:focus { background: transparent; color: #1a1a1a; }
.mve-prod .mve-prod-vcard:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; border-radius: var(--radius-sm); }
.mve-prod-vthumb {
	position: relative; display: flex; align-items: center; justify-content: center;
	width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
	background: #2a2a2a; border-radius: var(--radius-sm); transition: background .2s;
}
.mve-prod-vthumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mve-prod-vplay {
	position: relative; display: flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: 50%; background: #e04545; transition: transform .2s;
}
.mve-prod-vcard:hover .mve-prod-vthumb { background: #1c1c1c; }
.mve-prod-vcard:hover .mve-prod-vplay { transform: scale(1.08); }
.mve-prod-vtitle { display: block; font-size: 14px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }

/* ---- Description ----------------------------------------------------- */

.mve-prod-extra { padding-block: 24px 0; }
.mve-prod-description {
	display: grid; grid-template-columns: 1fr 1.2fr; gap: 90px;
	padding-block: 48px 64px; scroll-margin-top: 110px;
}
.mve-prod-copy { padding-top: 2px; color: var(--muted); font-size: 15px; line-height: 1.65; }
.mve-prod-copy > p, .mve-prod-more p { max-width: 60ch; margin: 0 0 14px; }
.mve-prod-copy h2, .mve-prod-copy h3 {
	margin: 24px 0 8px; color: var(--ink); font-size: 18px; font-weight: 600;
	line-height: 1.3; text-transform: none;
}
.mve-prod-copy ul, .mve-prod-copy ol { margin: 0 0 14px; padding-left: 20px; max-width: 60ch; }
.mve-prod-copy ul { list-style: disc; }
.mve-prod-copy li { margin: 0 0 4px; }
.mve-prod-more { margin-top: 12px; }
.mve-prod .mve-prod-toggle {
	display: inline-flex; align-items: center; gap: 10px; margin: 16px 0 0; padding: 0;
	background: none; border: 0; border-radius: 0; color: var(--red-dark); font-size: 14px; font-weight: 600;
}
.mve-prod .mve-prod-toggle:hover,
.mve-prod .mve-prod-toggle:focus { background: none; color: var(--red-dark); }
.mve-prod-toggle svg { transition: transform .2s; }
.mve-prod-toggle[aria-expanded="true"] svg { transform: rotate(-90deg); }
.mve-prod .mve-prod-toggle:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; border-radius: 4px; }

/* ---- Dialogs --------------------------------------------------------- */

.mve-prod .mve-prod-dialog { border: 0; padding: 0; background: #fff; color: var(--ink); max-height: 92vh; }
.mve-prod-dialog::backdrop { background: #000b; }
.mve-prod-image-dialog { width: min(1000px, 95vw); padding: 40px !important; }
.mve-prod-image-dialog { touch-action: pan-y; }
.mve-prod-image-dialog .mve-prod-slide-nav { z-index: 2; }
.mve-prod-image-dialog .mve-prod-slide-nav--prev { left: 12px; }
.mve-prod-image-dialog .mve-prod-slide-nav--next { right: 12px; }
.mve-prod-image-dialog .mve-prod-counter { left: 50%; bottom: 12px; transform: translateX(-50%); }
.mve-prod-image-dialog img { display: block; width: 100%; height: 55vh; object-fit: contain; }
.mve-prod-video-dialog { width: min(960px, 95vw); background: #000 !important; overflow: visible; }
.mve-prod-player { aspect-ratio: 16 / 9; width: 100%; background: #000; }
.mve-prod-player iframe, .mve-prod-player video { display: block; width: 100%; height: 100%; border: 0; }
.mve-prod .mve-prod-dialog-close {
	position: absolute; top: 8px; right: 12px; z-index: 2; width: 44px; height: 44px; padding: 0;
	background: #fff; color: var(--ink); border: 0; border-radius: 50%; font-size: 30px; line-height: 1;
}
.mve-prod .mve-prod-dialog-close:hover,
.mve-prod .mve-prod-dialog-close:focus { background: #fff; color: var(--ink); }
.mve-prod-video-dialog .mve-prod-dialog-close { top: -48px; right: 0; }

/* ---- Breakpoints ----------------------------------------------------- */

@media (min-width: 640px) {
	.mve-prod { --fs-h2: 24px; }
	.mve-prod-summary h1 { font-size: clamp(28px, 3.6vw, 36px); }
	.mve-prod-vrow { gap: 20px; }
	.mve-prod .mve-prod-vcard { flex: 1 0 200px; max-width: calc((100% - 40px) / 3); }
	.mve-prod-vtitle { font-size: 15px; }
}

@media (min-width: 640px) and (max-width: 1023px) {
	.mve-prod-actions { grid-template-columns: 1fr; }
}

@media (min-width: 1024px) {
	.mve-prod { --fs-h2: 28px; }
	.mve-prod-summary h1 { font-size: clamp(36px, 3vw, 42px); }
	.mve-prod-copy { font-size: 16px; }
}

@media (max-width: 1199px) {
	.mve-prod { --gutter: 64px; }
	.mve-prod-hero { gap: 36px; }
	.mve-prod-stage { min-height: 430px; }
	.mve-prod-stage > img { height: 330px; }
	.mve-prod-description { gap: 55px; }
}

@media (max-width: 959px) {
	.mve-prod { --gutter: 48px; }
	.mve-prod-breadcrumb { padding-block: 20px; }
	.mve-prod-hero { gap: 27px; }
	.mve-prod-spec-heading { margin-top: 20px; }
	.mve-prod-specs > div { padding-block: 8px; }
	.mve-prod-stage { min-height: 380px; padding: 55px 15px 30px; }
	.mve-prod-stage > img { height: 290px; }
	.mve-prod-thumbs { gap: 7px; }
	.mve-prod .mve-prod-thumb { width: 60px; height: 58px; }
	.mve-prod-description { grid-template-columns: 1fr 1.15fr; gap: 35px; padding-block: 42px; }
}

@media (max-width: 639px) {
	.mve-prod { --gutter: 36px; }
	.mve-prod-breadcrumb { padding-block: 12px 14px; font-size: 13px; }
	/* Phone order: title, photos, specs, buttons */
	.mve-prod-hero { display: flex; flex-direction: column; gap: 10px; padding-bottom: 30px; }
	.mve-prod-summary { display: contents; }
	.mve-prod-summary > h1 { order: 1; margin: 0 0 7px; }
	.mve-prod-gallery { order: 2; margin-bottom: 0; }
	.mve-prod-summary > .mve-prod-spec-heading { order: 4; margin: 6px 0 4px; }
	.mve-prod-specs > div { padding-block: 6px; }
	.mve-prod-summary > .mve-prod-specs { order: 5; }
	.mve-prod-summary > .mve-prod-note { order: 7; margin-top: 14px; }
	.mve-prod-summary > .mve-prod-actions { order: 6; margin-top: 8px; }
	.mve-prod-stage { min-height: 0; padding: 14px 16px; }
	.mve-prod-stage > img { height: 190px; }
	.mve-prod .mve-prod-zoom { right: 10px; bottom: 10px; width: 32px; height: 32px; }
	.mve-prod-counter { left: 10px; bottom: 12px; }
	/* One row of thumbnails: swipe or use the arrows for more photos */
	.mve-prod-carousel { margin-top: 10px; }
	.mve-prod-thumbs { gap: 8px; }
	.mve-prod .mve-prod-thumb { width: 58px; height: 52px; padding: 4px; }
	/* Buttons: red band, rows of two white tiles split by an orange rule (same as the pre-redesign mockup) */
	.mve-prod-summary > .mve-prod-actions {
		display: flex; flex-direction: column; gap: 12px;
		margin: 24px calc(var(--gutter) / -2) 0; padding: 20px 16px;
		background: var(--red);
	}
	.mve-prod-actions__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: #fff; }
	.mve-prod .mve-prod-btn,
	.mve-prod .mve-prod-btn:hover,
	.mve-prod .mve-prod-btn:focus,
	.mve-prod .mve-prod-btn--red,
	.mve-prod .mve-prod-btn--dark {
		justify-content: center; gap: 8px; min-height: 56px; padding: 0 8px;
		background: #fff; border: 0; border-radius: 0;
		color: var(--ink); font-family: var(--font); font-size: 14px; font-weight: 600; text-align: center;
	}
	.mve-prod-actions__row > .mve-prod-btn:first-child:not(:last-child) { border-right: 3px solid #F26522; }
	.mve-prod-actions__row > .mve-prod-btn:only-child { grid-column: 1 / -1; }
	.mve-prod-btn > svg:not(.mve-prod-btn__mico) { display: none; }
	.mve-prod-btn > .mve-prod-btn__mico { display: block; flex: 0 0 auto; }
	.mve-prod-description { display: block; padding-block: 36px 44px; }
	.mve-prod-description h2 { margin-bottom: 16px; }
	.mve-prod-image-dialog { padding: 24px !important; }
	.mve-prod-video-dialog .mve-prod-dialog-close { top: -52px; right: 0; }
}

@media (hover: none) {
	.mve-prod-vcard:hover .mve-prod-vplay { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.mve-prod-toggle svg, .mve-prod-vplay { transition: none; }
}