/* ============================================================
   Transitions.dev animation kit (client-supplied).
   Reusable interaction transitions: resize, dropdown, modal,
   panel-slide. All honour prefers-reduced-motion.
   Shared easing/duration tokens consolidated into one :root.
   ============================================================ */

:root {
	--resize-dur: 300ms;
	--resize-ease: cubic-bezier(0.22, 1, 0.36, 1);

	--dropdown-open-dur: 250ms;
	--dropdown-close-dur: 150ms;
	--dropdown-pre-scale: 0.97;
	--dropdown-closing-scale: 0.99;
	--dropdown-ease: cubic-bezier(0.22, 1, 0.36, 1);

	--modal-open-dur: 250ms;
	--modal-close-dur: 150ms;
	--modal-scale: 0.96;
	--modal-scale-close: 0.96;
	--modal-ease: cubic-bezier(0.22, 1, 0.36, 1);

	--panel-open-dur: 400ms;
	--panel-close-dur: 350ms;
	--panel-translate-y: calc(187px * 0.5);
	--panel-blur: 2px;
	--panel-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Card resize ---- */
.t-resize {
	transition:
		width var(--resize-dur) var(--resize-ease),
		height var(--resize-dur) var(--resize-ease);
	will-change: width, height;
}

/* ---- Menu dropdown ---- */
.t-dropdown {
	transform-origin: top left;
	transform: scale(var(--dropdown-pre-scale));
	opacity: 0;
	pointer-events: none;
	transition:
		transform var(--dropdown-open-dur) var(--dropdown-ease),
		opacity var(--dropdown-open-dur) var(--dropdown-ease);
	will-change: transform, opacity;
}
.t-dropdown[data-origin="top-right"]     { transform-origin: top right; }
.t-dropdown[data-origin="top-center"]    { transform-origin: top center; }
.t-dropdown[data-origin="bottom-left"]   { transform-origin: bottom left; }
.t-dropdown[data-origin="bottom-center"] { transform-origin: bottom center; }
.t-dropdown[data-origin="bottom-right"]  { transform-origin: bottom right; }
.t-dropdown.is-open {
	transform: scale(1);
	opacity: 1;
	pointer-events: auto;
}
.t-dropdown.is-closing {
	transform: scale(var(--dropdown-closing-scale));
	opacity: 0;
	pointer-events: none;
	transition:
		transform var(--dropdown-close-dur) var(--dropdown-ease),
		opacity var(--dropdown-close-dur) var(--dropdown-ease);
}

/* ---- Modal open / close ---- */
.t-modal {
	transform-origin: center;
	transform: scale(var(--modal-scale));
	opacity: 0;
	pointer-events: none;
	transition:
		transform var(--modal-open-dur) var(--modal-ease),
		opacity var(--modal-open-dur) var(--modal-ease);
	will-change: transform, opacity;
}
.t-modal.is-open {
	transform: scale(1);
	opacity: 1;
	pointer-events: auto;
}
.t-modal.is-closing {
	transform: scale(var(--modal-scale-close));
	opacity: 0;
	pointer-events: none;
	transition:
		transform var(--modal-close-dur) var(--modal-ease),
		opacity var(--modal-close-dur) var(--modal-ease);
}

/* ---- Panel reveal ---- */
.t-panel-slide {
	transform: translateY(var(--panel-translate-y));
	opacity: 0;
	filter: blur(var(--panel-blur));
	pointer-events: none;
	transition:
		transform var(--panel-close-dur) var(--panel-ease),
		opacity var(--panel-close-dur) var(--panel-ease),
		filter var(--panel-close-dur) var(--panel-ease);
	will-change: transform, opacity, filter;
}
.t-panel-slide[data-open="true"] {
	transform: translateY(0);
	opacity: 1;
	filter: blur(0);
	pointer-events: auto;
	transition:
		transform var(--panel-open-dur) var(--panel-ease),
		opacity var(--panel-open-dur) var(--panel-ease),
		filter var(--panel-open-dur) var(--panel-ease);
}

@media (prefers-reduced-motion: reduce) {
	.t-resize,
	.t-dropdown,
	.t-modal,
	.t-panel-slide { transition: none !important; }
}

/* ============================================================
   Design quick-view — uses the .t-modal transition inside a
   native <dialog closedby> for built-in focus trap + Esc + backdrop.
   ============================================================ */

.mt-quickview {
	border: 0;
	background: transparent;
	padding: 0;
	/* Widened from 880px: the quick-view now shows the flat design beside the
	   liner wearing it, and two panes at 880px left both too small to judge. */
	max-width: min(94vw, 1180px);
	max-height: 90vh;
	color: var(--wp--preset--color--navy-deep, #05162a);
}
.mt-quickview::backdrop {
	background: rgba(5, 22, 42, 0.55);
	backdrop-filter: blur(3px);
}
.mt-quickview .t-modal {
	/* Explicit width, not shrink-to-fit. The panes are sized by aspect-ratio,
	   which gives them no intrinsic width, so a <dialog> that sizes to its
	   content collapsed to a thumbnail. */
	width: min(94vw, 1180px);
	background: var(--wp--preset--color--white, #fff);
	border-radius: 18px;
	overflow: clip;
	box-shadow: 0 30px 80px -30px rgba(5, 22, 42, 0.7);
}
/* One pane when a design has no applied photo yet, two when it does. The
   texture stays on the left and the liner wearing it on the right. */
.mt-quickview__media { display: grid; grid-template-columns: 1fr; }
.t-modal.has-applied .mt-quickview__media { grid-template-columns: 1fr 1fr; }
/* Both panes get a definite box and the images fill it absolutely. Sizing the
   images with height:100% instead left the second pane's percentage resolving
   against a figure with no definite height, so the applied shot painted only
   its background colour. */
.mt-quickview__pane { margin: 0; position: relative; min-width: 0; aspect-ratio: 4 / 3; max-height: 62vh; }
.mt-quickview__pane + .mt-quickview__pane { border-left: 1px solid var(--wp--preset--color--border, #d8f4f6); }
.mt-quickview__pane figcaption {
	position: absolute;
	left: 0.75rem;
	bottom: 0.75rem;
	padding: 0.28rem 0.6rem;
	border-radius: 999px;
	background: rgba(5, 22, 42, 0.62);
	color: #fff;
	font-family: var(--wp--preset--font-family--small, inherit);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}
.mt-quickview__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: var(--wp--preset--color--teal-tint, #eefdff);
}
/* Side by side needs real width; below that, stack so neither pane is a sliver. */
@media (max-width: 720px) {
	.t-modal.has-applied .mt-quickview__media { grid-template-columns: 1fr; }
	.mt-quickview__pane + .mt-quickview__pane { border-left: 0; border-top: 1px solid var(--wp--preset--color--border, #d8f4f6); }
	.mt-quickview__img { max-height: 38vh; }
}
.mt-quickview__body {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.1rem 1.4rem 1.3rem;
}
.mt-quickview__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--head);
	font-weight: 800;
	font-size: 1.4rem;
}
.mt-quickview__cat {
	margin: 0.2rem 0 0;
	font-size: 0.85rem;
	color: var(--wp--preset--color--navy-mid, #475f7f);
}
.mt-quickview__close {
	flex: none;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	border: 1px solid var(--wp--preset--color--border-dark, #c2cad4);
	background: var(--wp--preset--color--white, #fff);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	color: var(--wp--preset--color--navy, #0a2c54);
}
.mt-quickview__close:hover,
.mt-quickview__close:focus-visible {
	background: var(--wp--preset--color--off-white, #f8feff);
	border-color: var(--wp--preset--color--teal-dark, #118990);
}
.mt-quickview__link {
	display: inline-block;
	margin-top: 0.5rem;
	font-family: var(--wp--preset--font-family--small);
	font-weight: 700;
	color: var(--wp--preset--color--teal-dark, #118990);
	text-decoration: none;
}