/* ==========================================================================
   messe-display — product detail
   Figma "Exhibition product diplay" (51:3493), block "Single Product" (46:1564).

   Frame geometry (absolute x in the frame, 1410 container starting at 4812):
     thumbs      100 wide column at x=4812, items 100x137 (image 100x127)
     main image  666x849 at x=4922
     details     635 column at x=5578, content inset 50px -> 585 wide
   ========================================================================== */

.md-product {
	display: grid;
	grid-template-columns: minmax(0, 776fr) minmax(0, 635fr);
	gap: 0;
	max-width: 1410px;
	margin-inline: auto;
	padding: 40px var(--md-gutter) 0;
}

/* --------------------------------------------------------------------------
   Gallery — thumbnail rail left, main image right.
   -------------------------------------------------------------------------- */
.md-product__gallery {
	display: grid;
	grid-template-columns: 100px minmax(0, 1fr);
	gap: 10px;
	align-items: start;
}

.md-product__thumbs { display: flex; flex-direction: column; gap: 10px; }

/* Thumbs are buttons so keyboard users can reach them; video entries carry a
   play badge so the two media types are distinguishable at a glance. */
.md-product__thumb {
	position: relative;
	display: block;
	width: 100px;
	height: 127px;
	padding: 0;
	background: var(--md-bg-soft);
	cursor: pointer;
	opacity: .75;
	transition: opacity .15s ease, outline-color .15s ease;
	outline: 2px solid transparent;
	outline-offset: -2px;
}
.md-product__thumb img { width: 100%; height: 100%; object-fit: cover; }
.md-product__thumb:hover { opacity: 1; }
.md-product__thumb.is-active { opacity: 1; outline-color: var(--md-black); }
.md-product__thumb:focus-visible { outline-color: var(--md-purple); }

.md-product__play {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(0, 0, 0, .6);
}
.md-product__play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 6px 0 6px 10px;
	border-color: transparent transparent transparent #fff;
}

.md-product__main {
	position: relative;
	aspect-ratio: 666 / 849;
	background: var(--md-bg-soft);
	overflow: hidden;
}
.md-product__main img { width: 100%; height: 100%; object-fit: cover; }

/* Badges — 70x26 pills at 15px in from the image corner; Hot #D10202, Sale #000. */
.md-product__flags { position: absolute; top: 15px; left: 15px; display: flex; gap: 2px; z-index: 2; }
.md-product__flag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 70px;
	height: 26px;
	padding: 0 10px;
	font-family: var(--md-font);
	font-weight: 400;
	font-size: 14px;
	line-height: 14px;
	color: var(--md-white);
}
.md-product__flag--hot  { background: var(--md-red); }
.md-product__flag--sale { background: var(--md-black); }

/* 40x40 white round button, top-right of the main image. */
.md-product__zoom {
	position: absolute;
	top: 15px;
	right: 15px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: 50%;
	background: var(--md-white);
	color: var(--md-black);
}

/* --------------------------------------------------------------------------
   Details column — 635 wide with a 50px inset, content 585.
   -------------------------------------------------------------------------- */
.md-product__details { padding-left: 50px; }

/* Inter 400/30 */
.md-product__title {
	margin: 0 0 22px;
	font-family: var(--md-font);
	font-weight: 400;
	font-size: 30px;
	line-height: 36px;
	color: var(--md-black);
}

/* "Stock: In stock" — Inter 400/15 */
.md-product__stock { margin: 0 0 40px; font-size: 15px; line-height: 18px; color: var(--md-black); }
.md-product__stock strong { font-weight: 400; color: #2E7D32; }
.md-product__stock strong.is-out { color: var(--md-red); }

/* Countdown — 320x50 on #000000; digits Inter 700/20 white, labels 400/12. */
.md-product__countdown {
	display: inline-flex;
	align-items: center;
	gap: 22px;
	height: 50px;
	padding: 0 20px;
	margin-bottom: 39px;
	background: var(--md-black);
}
.md-product__cd-unit { text-align: center; }
.md-product__cd-num {
	display: block;
	font-family: var(--md-font);
	font-weight: 700;
	font-size: 20px;
	line-height: 20px;
	color: var(--md-white);
}
.md-product__cd-label {
	display: block;
	font-family: var(--md-font);
	font-weight: 400;
	font-size: 12px;
	line-height: 16px;
	color: var(--md-white);
}
.md-product__cd-sep {
	font-family: var(--md-font);
	font-weight: 700;
	font-size: 20px;
	line-height: 20px;               /* same line box as the digits */
	color: var(--md-white);
	/* Each unit is a two-row block — 20px digits over a 16px label — centred in
	   the 50px bar. `align-self: flex-start` pinned the colon to the top of the
	   bar, so it rode above the digits. Reserving the label's height beneath it
	   instead lets the flex centring land the colon on the DIGITS' own line. */
	margin-bottom: 16px;
}

/* Price — Inter 400/36 current, 400/20 #959595 struck. */
.md-product__prices { display: flex; align-items: baseline; gap: 18px; margin: 0 0 21px; }
.md-product__price {
	font-family: var(--md-font);
	font-weight: 400;
	font-size: 36px;
	line-height: 36px;
	color: var(--md-black);
}
.md-product__price-old {
	font-family: var(--md-font);
	font-weight: 400;
	font-size: 20px;
	line-height: 20px;
	color: var(--md-grey);
}

/* Short description — Inter 400/15 #848484 */
.md-product__desc { margin: 0 0 48px; max-width: 585px; font-size: 15px; line-height: 24px; color: var(--md-grey-2); }

/* SKU / Brands / Tags — Inter 400/13.95, label black, value grey, 28px rows. */
.md-product__meta { margin: 0 0 46px; }
.md-product__meta div { margin-bottom: 10px; font-size: 13.95px; line-height: 18px; }
.md-product__meta dt { display: inline; color: var(--md-black); }
.md-product__meta dd { display: inline; margin: 0 0 0 5px; color: var(--md-grey-2); }

/* Quantity 179x50 on #EDEDED, then the 406x50 black Add-to-cart. */
.md-product__buy { display: flex; align-items: center; gap: 0; margin-bottom: 15px; }
.md-product__qty {
	display: flex;
	align-items: center;
	width: 164px;
	height: 50px;
	margin-right: 15px;
	background: var(--md-bg-soft);
}
.md-product__qty button {
	width: 44px;
	height: 100%;
	padding: 0;
	font-size: 18px;
	line-height: 1;
	color: var(--md-black);
}
.md-product__qty input {
	width: 76px;
	height: 100%;
	min-width: 0;
	border: 0;
	background: transparent;
	text-align: center;
	font-family: var(--md-font);
	font-size: 15px;
	color: var(--md-black);
}

.md-product__add {
	flex: 1 1 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 50px;
	padding: 12px 26px;
	border: 1px solid var(--md-black);
	background: var(--md-black);
	color: var(--md-white);
	font-family: var(--md-font);
	font-weight: 700;
	font-size: 14px;
	line-height: 24px;
	text-transform: uppercase;
	transition: opacity .18s ease;
}
.md-product__add:hover { opacity: .85; }
.md-product__add[disabled] { opacity: .45; cursor: not-allowed; }

/* Buy now — full width, outlined. */
.md-product__buynow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 585px;
	height: 50px;
	padding: 12px 26px;
	border: 1px solid var(--md-black);
	background: transparent;
	color: var(--md-black);
	font-family: var(--md-font);
	font-weight: 700;
	font-size: 14px;
	line-height: 24px;
	text-transform: uppercase;
}
.md-product__buynow:hover { background: var(--md-black); color: var(--md-white); }

/* wishlist / compare row + social */
.md-product__links { display: flex; align-items: center; gap: 37px; margin: 28px 0 0; }
.md-product__links a { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; line-height: 18px; color: var(--md-black); }
.md-product__links a:hover { color: var(--md-purple); }
.md-product__social { display: flex; align-items: center; gap: 12px; margin-left: auto; }

/* "Get advice now" bar */
.md-product__advice {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	max-width: 585px;
	height: 40px;
	margin-top: 24px;
	background: var(--md-fill-2);
	font-size: 14px;
	color: var(--md-red);
}

/* Highlights — heading Inter 500/16, items 400/14 with a check icon, 44px apart. */
.md-product__highlights { margin-top: 38px; }
.md-product__highlights h2 {
	margin: 0 0 26px;
	font-family: var(--md-font);
	font-weight: 500;
	font-size: 16px;
	line-height: 20px;
	color: var(--md-black);
}
.md-product__highlights li {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 26px;
	font-size: 14px;
	line-height: 18px;
	color: var(--md-black);
}
.md-product__highlights svg { flex: 0 0 auto; color: var(--md-grey-3); }

/* --------------------------------------------------------------------------
   Tabs — "Dimensions" 700/25 active, "Details" 400/25, over a 1px rule.
   -------------------------------------------------------------------------- */
.md-tabs { max-width: 1410px; margin: 37px auto 0; padding: 0 var(--md-gutter); }
.md-tabs__list { display: flex; justify-content: center; gap: 48px; border-bottom: 1px solid var(--md-line-3); }
.md-tabs__list button {
	padding: 14px 0;
	border-bottom: 2px solid transparent;
	font-family: var(--md-font);
	font-weight: 400;
	font-size: 25px;
	line-height: 30px;
	color: var(--md-grey-3);
}
.md-tabs__list button.is-active { border-bottom-color: var(--md-black); color: var(--md-black); font-weight: 700; }
.md-tabs__panel { padding-top: 55px; font-size: 15px; line-height: 26px; color: var(--md-ink-2); }
.md-tabs__panel[hidden] { display: none; }

.md-related { max-width: 1410px; margin-inline: auto; padding: 112px var(--md-gutter) 80px; }
.md-related h2 { margin: 0 0 30px; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1099px) {
	.md-product { grid-template-columns: 1fr; gap: 40px; }
	.md-product__details { padding-left: 0; }
	.md-product__buynow, .md-product__advice, .md-product__desc { max-width: none; }
	.md-related { padding-top: 64px; }
}
@media (max-width: 759px) {
	.md-product { padding-top: 24px; gap: 24px; }
	.md-product__gallery { grid-template-columns: 1fr; }
	/* Thumb rail becomes a horizontal strip under the main image. */
	.md-product__thumbs { flex-direction: row; order: 2; overflow-x: auto; }
	.md-product__thumbs .md-product__thumb { width: 80px; height: 100px; flex: 0 0 auto; }
	.md-product__main { order: 1; }
	.md-product__title { font-size: 22px; line-height: 30px; }
	.md-product__price { font-size: 26px; line-height: 30px; }
	.md-product__countdown { gap: 14px; padding-inline: 14px; }
	.md-product__buy { flex-wrap: wrap; gap: 12px; }
	.md-product__qty { margin-right: 0; }
	.md-product__add { flex: 1 1 100%; }
	.md-product__links { flex-wrap: wrap; gap: 18px; }
	.md-product__social { margin-left: 0; }
	.md-tabs__list { gap: 24px; }
	.md-tabs__list button { font-size: 18px; }
	.md-related { padding-top: 40px; }
}

/* Grid children default to min-width:auto and refused to shrink at 320. */
.md-product > *,
.md-product__gallery > * { min-width: 0; }


/* --------------------------------------------------------------------------
   Lightbox — opens IN the page (the zoom control used to open a raw image in a
   new tab). Carries the full gallery, images and videos alike.
   -------------------------------------------------------------------------- */
.md-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 64px 80px 0;
	background: rgba(0, 0, 0, .92);
}
.md-lightbox[hidden] { display: none; }

.md-lightbox__stage {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 auto;
	width: 100%;
	min-height: 0;
	margin: 0;
}
.md-lightbox__stage img,
.md-lightbox__stage video {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	background: #000;
}

.md-lightbox__close {
	position: absolute;
	top: 18px;
	right: 22px;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	font-size: 30px;
	line-height: 1;
}
.md-lightbox__close:hover { background: rgba(255, 255, 255, .22); }

.md-lightbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border-radius: 24px;
	background: var(--md-white);
	color: var(--md-black);
}
.md-lightbox__nav:hover { opacity: .85; }
.md-lightbox__nav--prev { left: 24px; }
.md-lightbox__nav--next { right: 24px; }

.md-lightbox__bar {
	flex: 0 0 auto;
	width: 100%;
	padding: 16px 0 20px;
	text-align: center;
}
.md-lightbox__count {
	display: block;
	margin-bottom: 12px;
	font-family: var(--md-font);
	font-size: 14px;
	color: rgba(255, 255, 255, .75);
}
.md-lightbox__strip {
	display: flex;
	justify-content: center;
	gap: 10px;
	max-width: 100%;
	overflow-x: auto;
	padding-bottom: 4px;
}
.md-lightbox__strip .md-product__thumb {
	width: 74px;
	height: 92px;
	flex: 0 0 auto;
	background: rgba(255, 255, 255, .08);
	opacity: .55;
}
.md-lightbox__strip .md-product__thumb.is-active { opacity: 1; outline-color: #fff; }

@media (max-width: 759px) {
	.md-lightbox { padding: 56px 12px 0; }
	.md-lightbox__nav { width: 40px; height: 40px; }
	.md-lightbox__nav--prev { left: 8px; }
	.md-lightbox__nav--next { right: 8px; }
	.md-lightbox__strip .md-product__thumb { width: 56px; height: 70px; }
}