/*
 * LC Médical — Comptoir : dialogs that open from catalogue and product pages.
 * The base .lc-dialog (drawer pulled toward the visitor, bottom sheet on mobile) is in utilities.css; this file adds
 * the filters sheet, the wide dialogs (size guide, video) and the photo zoom.
 */

.lc-dialog--wide {
	max-inline-size: min(880px, calc(100vw - 2 * var(--lc-gutter)));
}

/* ---------- Filters sheet ---------- */
.lc-filters-dialog {
	max-block-size: min(90dvh, 760px);
}

.lc-filters-dialog .lc-dialog__box {
	gap: 0;
	padding: 0;
	block-size: 100%;
}

.lc-filters-dialog .lc-dialog__head {
	align-items: center;
	gap: var(--lc-s-3);
	padding: var(--lc-s-3) var(--lc-s-5);
	border-block-end: 1px solid var(--lc-line-strong);
}

.lc-filters-dialog .lc-dialog__title {
	flex: 1;
	font-size: var(--lc-fs-h4);
}

.lc-filters-dialog .lc-dialog__close {
	margin: 0;
}

.lc-filters-dialog .lc-filters {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-block-size: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-inline: var(--lc-s-5);
}

.lc-filters-dialog .lc-fgroup:first-of-type {
	border-block-start: 0;
}

.lc-filters-dialog .lc-filters__actions {
	position: sticky;
	inset-block-end: 0;
	margin-block-start: auto;
	padding: var(--lc-s-3) 0 calc(var(--lc-s-3) + var(--lc-safe-bottom));
	background: var(--lc-paper);
	box-shadow: 0 -14px 14px -14px rgb(20 36 107 / 0.35);
}

/* ---------- Size guide ---------- */
.lc-sizeguide {
	overflow: auto;
	font-size: var(--lc-fs-sm);
}

.lc-sizeguide table {
	inline-size: 100%;
	border-collapse: collapse;
}

.lc-sizeguide :is(th, td) {
	padding: 0.7em 0.8em;
	border-block-end: 1px solid var(--lc-line);
	text-align: start;
}

.lc-sizeguide th {
	font-family: var(--lc-font-label);
	font-size: var(--lc-fs-xs);
	letter-spacing: var(--lc-track-label);
	text-transform: uppercase;
	color: var(--lc-ink-muted);
}

.lc-sizeguide__img {
	display: block;
	max-inline-size: 100%;
	block-size: auto;
	margin-inline: auto;
}

/* ---------- Video ---------- */
.lc-video-stage {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--lc-navy-950);
	border-radius: var(--lc-r-field);
	overflow: hidden;
}

.lc-video-stage iframe {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	border: 0;
}

/* ---------- Photo zoom ---------- */
.lc-dialog--zoom {
	max-inline-size: min(960px, calc(100vw - 2 * var(--lc-gutter)));
	background: var(--lc-paper);
}

.lc-dialog--zoom .lc-dialog__box {
	position: relative;
	padding: var(--lc-s-3);
}

.lc-dialog--zoom .lc-dialog__close {
	position: absolute;
	inset-block-start: var(--lc-s-3);
	inset-inline-end: var(--lc-s-3);
	z-index: 1;
	margin: 0;
	background: var(--lc-paper);
	box-shadow: var(--lc-shadow-label);
}

.lc-zoom__img {
	display: block;
	max-inline-size: 100%;
	max-block-size: calc(86dvh - 2 * var(--lc-s-3));
	margin-inline: auto;
	object-fit: contain;
}