/* Virtual Try-On (VTON) — AFR-29, Phase 1
   Scoped under .aq-vton* so it never leaks into the rest of the theme. */

:root {
	--aq-vton-ink: #1a1a1a;
	--aq-vton-muted: #6b6b6b;
	--aq-vton-line: #e6e2dc;
	--aq-vton-bg: #ffffff;
	--aq-vton-accent: #1a1a1a;
	--aq-vton-radius: 14px;
}

/* Trigger button — sits under Add to Cart, styled as a secondary/outline action */
.aq-vton-trigger {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	margin-top: .75rem;
	padding: .8rem 1.4rem;
	width: auto;
	font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
	font-weight: 600;
	font-size: .95rem;
	letter-spacing: .01em;
	color: var(--aq-vton-ink);
	background: transparent;
	border: 1.5px solid var(--aq-vton-ink);
	border-radius: 999px;
	cursor: pointer;
	transition: background .18s ease, color .18s ease;
}
.aq-vton-trigger:hover { background: var(--aq-vton-ink); color: #fff; }
.aq-vton-trigger .aq-vton-ic { flex: 0 0 auto; }

/* prevent background scroll when open */
html.aq-vton-open, html.aq-vton-open body { overflow: hidden; }

/* Modal shell */
.aq-vton-modal[hidden] { display: none; }
.aq-vton-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.25rem;
}
.aq-vton-overlay { position: absolute; inset: 0; background: rgba(20, 18, 16, .55); backdrop-filter: blur(2px); }
.aq-vton-dialog {
	position: relative;
	width: min(920px, 100%);
	max-height: 92vh;
	overflow-y: auto;
	background: var(--aq-vton-bg);
	border-radius: var(--aq-vton-radius);
	box-shadow: 0 30px 80px rgba(0,0,0,.28);
	padding: 2rem 2rem 1.75rem;
	font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
	color: var(--aq-vton-ink);
	animation: aqVtonIn .22s ease;
}
@keyframes aqVtonIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.aq-vton-x {
	position: absolute; top: .9rem; right: 1rem;
	width: 2.2rem; height: 2.2rem;
	border: none; background: transparent;
	font-size: 1.9rem; line-height: 1; color: var(--aq-vton-muted);
	cursor: pointer; border-radius: 50%;
}
.aq-vton-x:hover { background: #f2efea; color: var(--aq-vton-ink); }

.aq-vton-head { margin-bottom: 1.5rem; padding-right: 2rem; }
.aq-vton-head h2 {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 1.7rem; margin: 0 0 .15rem; font-weight: 600;
}
.aq-vton-sub { margin: 0; color: var(--aq-vton-muted); font-size: .95rem; }

/* Step 1 layout */
.aq-vton-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }

.aq-vton-drop {
	display: flex; align-items: center; justify-content: center;
	aspect-ratio: 3 / 4;
	border: 1.5px dashed var(--aq-vton-line);
	border-radius: 12px;
	background: #faf8f5;
	cursor: pointer; overflow: hidden;
	transition: border-color .18s ease, background .18s ease;
}
.aq-vton-drop:hover, .aq-vton-drop:focus-visible, .aq-vton-drop.is-drag {
	border-color: var(--aq-vton-ink); background: #f4f1ec; outline: none;
}
.aq-vton-drop-empty { text-align: center; padding: 1.25rem; display: flex; flex-direction: column; gap: .4rem; }
.aq-vton-drop-ic { font-size: 2rem; }
.aq-vton-drop-empty strong { font-size: 1.05rem; }
.aq-vton-drop-hint { font-size: .82rem; color: var(--aq-vton-muted); max-width: 22ch; margin: 0 auto; }
.aq-vton-preview { width: 100%; height: 100%; object-fit: cover; }
.aq-vton-err { margin: .6rem 0 0; color: #b3261e; font-size: .85rem; }

.aq-vton-controls { display: flex; flex-direction: column; }
.aq-vton-label { font-weight: 600; margin: .1rem 0 .6rem; font-size: .95rem; }
.aq-vton-bodies { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; margin-bottom: 1.1rem; }
.aq-vton-body {
	padding: .7rem .5rem; font: inherit; font-weight: 500;
	border: 1.5px solid var(--aq-vton-line); border-radius: 10px;
	background: #fff; cursor: pointer; transition: all .16s ease;
}
.aq-vton-body:hover { border-color: #bdb6ab; }
.aq-vton-body.is-active { border-color: var(--aq-vton-ink); background: var(--aq-vton-ink); color: #fff; }

.aq-vton-generate {
	margin-top: auto; width: 100%;
	padding: .95rem 1rem; font: inherit; font-weight: 600; font-size: 1rem;
	color: #fff; background: var(--aq-vton-accent);
	border: none; border-radius: 999px; cursor: pointer;
	transition: opacity .18s ease;
}
.aq-vton-generate:disabled { opacity: .4; cursor: not-allowed; }
.aq-vton-privacy { display: flex; gap: .45rem; align-items: flex-start; margin: .9rem 0 0; font-size: .78rem; color: var(--aq-vton-muted); }

/* Step 2 loading */
.aq-vton-step[data-step="loading"] { text-align: center; padding: 3rem 1rem; }
.aq-vton-spinner {
	width: 42px; height: 42px; margin: 0 auto 1rem;
	border: 3px solid var(--aq-vton-line); border-top-color: var(--aq-vton-ink);
	border-radius: 50%; animation: aqVtonSpin .8s linear infinite;
}
@keyframes aqVtonSpin { to { transform: rotate(360deg); } }
.aq-vton-loading-txt { color: var(--aq-vton-muted); }

/* Step 3 result */
.aq-vton-result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.aq-vton-result-fig { margin: 0; }
.aq-vton-result-fig img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 12px; background: #faf8f5; }
.aq-vton-result-fig figcaption { text-align: center; margin-top: .5rem; font-size: .85rem; color: var(--aq-vton-muted); }
.aq-vton-mock-note { text-align: center; margin: 1rem 0 0; font-size: .78rem; color: var(--aq-vton-muted); font-style: italic; }
.aq-vton-actions { display: flex; gap: .75rem; justify-content: center; margin-top: 1.5rem; flex-wrap: wrap; }
.aq-vton-again {
	padding: .85rem 1.4rem; font: inherit; font-weight: 600;
	border: 1.5px solid var(--aq-vton-ink); background: transparent; color: var(--aq-vton-ink);
	border-radius: 999px; cursor: pointer;
}
.aq-vton-cart {
	padding: .85rem 1.8rem; font: inherit; font-weight: 600;
	border: none; background: var(--aq-vton-accent); color: #fff;
	border-radius: 999px; cursor: pointer;
}

/* Mobile */
@media (max-width: 640px) {
	.aq-vton-dialog { padding: 1.5rem 1.15rem 1.25rem; }
	.aq-vton-grid, .aq-vton-result-grid { grid-template-columns: 1fr; }
	.aq-vton-head h2 { font-size: 1.45rem; }
}