/* Familia – virtual try-on (FC_Virtual_TryOn, virtual-tryon.js): the old shop's modal – 970 px wide, the 640 px camera
   square on black on the left, a compact frame panel on the right; full screen on phones, the camera on top.
   Every button here states its own look: the theme's generic `.familia button` (sky, square) must not leak in. */

/* ---------------------------------------------------------------- the button right under the photos
   photo → dot row (+ arrows on desktop) → "Pasimatuoti"; the dots/arrows keep their distance to the photo */
.familia .familia-gallery .familia-vto-cta { display: flex; justify-content: center; position: relative; z-index: 4; margin: 0 0 4px; }
.familia .familia-gallery .familia-vto-cta[hidden] { display: none; }
.familia .familia-gallery:has(> .familia-vto-cta:not([hidden])) .familia-gallery__dots { bottom: 85px; }   /* 37 + 48 */
@media (min-width: 1024px) {
	.familia .familia-gallery:has(> .familia-vto-cta:not([hidden])) { padding-bottom: 12px; }
	.familia .familia-gallery .familia-vto-cta { margin-top: 48px; }   /* the dot / arrow row (photo bottom 12+4+44+48 = 108 over the gallery's: dots 108−23, arrows 108−48) */
	.familia .familia-gallery:has(> .familia-vto-cta:not([hidden])) > .familia-gallery__arrow { bottom: 60px; }
}
.familia .familia-gallery button.familia-vto-open {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	width: auto; min-height: 44px; height: 44px; padding: 0 22px; margin: 0;
	background: #fff; color: #1d1d1b; border: 1.5px solid #1d1d1b; border-radius: 4px; box-shadow: none;
	font: inherit; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: .04em; text-transform: uppercase;
	cursor: pointer; transition: background-color .15s ease, color .15s ease;
}
.familia .familia-gallery button.familia-vto-open:hover,
.familia .familia-gallery button.familia-vto-open:focus-visible { background: #1d1d1b; color: #fff; }
.familia .familia-gallery button.familia-vto-open svg { flex: none; }

/* ---------------------------------------------------------------- dialog */
.familia-vto {
	width: min(970px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px);
	padding: 0; border: 0; border-radius: 8px; background: #fff; color: #1d1d1b;
	overflow: hidden;
}
.familia-vto::backdrop { background: rgba(0, 0, 0, .55); }
.familia-vto button { font-family: inherit; box-shadow: none; text-transform: none; letter-spacing: normal; }
.familia-vto button.familia-vto__close {
	position: absolute; top: 12px; right: 12px; z-index: 20;
	display: flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; min-height: 0; padding: 0; margin: 0;
	border: 0; border-radius: 50%; background: #f3f3f3; color: #1d1d1b;
	font-size: 22px; line-height: 1; cursor: pointer;
}
.familia-vto button.familia-vto__close:hover { background: #e6e6e6; }

/* consent */
.familia-vto__consent { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 520px; padding: 56px 40px 40px; text-align: center; }
.familia-vto__consent[hidden] { display: none; }
.familia-vto__title { margin: 0 0 16px; font-size: 24px; font-weight: 700; line-height: 1.3; }
.familia-vto__intro { max-width: 560px; margin: 0 0 16px; font-size: 15px; line-height: 1.55; color: #3c3c3b; }
.familia-vto__legal { max-width: 560px; margin: 0 0 32px; font-size: 14px; line-height: 1.5; color: #3c3c3b; }
.familia-vto__legal a { color: #e0322f; font-weight: 700; text-decoration: none; }
.familia-vto button.familia-vto__accept,
.familia-vto a.familia-vto__order,
.familia-vto button.familia-vto__confirm {
	display: flex; align-items: center; justify-content: center; width: 100%; max-width: 360px; min-height: 48px; height: auto;
	padding: 12px 20px; margin: 0; border: 0; border-radius: 4px; background: #8dc9f7; color: #1d1d1b;
	font-size: 15px; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer;
}
.familia-vto button.familia-vto__accept:hover,
.familia-vto a.familia-vto__order:hover,
.familia-vto button.familia-vto__confirm:hover { background: #6fb8f0; color: #1d1d1b; }

/* ---------------------------------------------------------------- viewer + panel */
.familia-vto__main { display: flex; }
.familia-vto__main[hidden] { display: none; }
.familia-vto__stage { position: relative; flex: 0 0 640px; width: 640px; height: 640px; max-height: calc(100dvh - 32px); background: #000; overflow: hidden; }
.familia-vto__view { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.familia-vto__view canvas { display: block; max-width: 100%; max-height: 100%; }
.familia-vto__video { position: fixed; top: 0; left: 0; width: 2px; height: 2px; opacity: 0; pointer-events: none; }
.familia-vto__wait, .familia-vto__error {
	position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
	padding: 32px; background: #000; color: #fff; text-align: center; font-size: 15px; line-height: 1.5;
}
.familia-vto__wait strong { font-size: 22px; }
.familia-vto__wait[hidden], .familia-vto__error[hidden] { display: none; }
.familia-vto__spinner { width: 36px; height: 36px; margin-bottom: 8px; border: 3px solid rgba(255, 255, 255, .25); border-top-color: #8dc9f7; border-radius: 50%; animation: familia-vto-spin .9s linear infinite; }
@keyframes familia-vto-spin { to { transform: rotate(360deg); } }
.familia-vto button.familia-vto__fit {
	position: absolute; z-index: 6; left: 50%; bottom: 16px; transform: translateX(-50%);
	min-height: 36px; height: 36px; padding: 0 16px; margin: 0; border: 0; border-radius: 999px; background: #fff; color: #1d1d1b;
	font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.familia-vto button.familia-vto__fit[hidden] { display: none; }

.familia-vto__panel { position: relative; flex: 1 1 auto; min-width: 0; height: 640px; max-height: calc(100dvh - 32px); overflow-y: auto; padding: 56px 24px 24px; }
.familia-vto__panel > [hidden] { display: none; }
.familia-vto__frame { display: flex; flex-direction: column; align-items: center; gap: 12px; min-height: 100%; text-align: center; }
.familia-vto__name { max-width: 100%; font-size: 18px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.familia-vto__img { display: block; width: 100%; max-width: 260px; height: 130px; object-fit: contain; margin: 4px 0; }
.familia-vto__img[hidden] { display: none; }
.familia-vto__dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.familia-vto__dots[hidden] { display: none; }
.familia-vto button.familia-vto__dot {
	width: 26px; height: 26px; min-height: 0; padding: 2px; margin: 0; border: 2px solid transparent; border-radius: 50%;
	background-clip: content-box; background-size: cover; background-position: center; background-color: #ddd;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); cursor: pointer;
}
.familia-vto button.familia-vto__dot.is-active { border-color: #1d1d1b; }
.familia-vto__missing { margin: 0; padding: 8px 10px; border-radius: 4px; background: #f6f6f6; font-size: 13px; line-height: 1.4; color: #3c3c3b; }
.familia-vto__missing[hidden] { display: none; }
.familia-vto__price { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0 8px; font-size: 20px; font-weight: 700; line-height: 1.2; }
.familia-vto__price del { order: 2; color: #8a8a8a; font-size: 14px; font-weight: 400; }
.familia-vto__price ins { order: 1; text-decoration: none; }
.familia-vto__price .amount { white-space: nowrap; }
.familia-vto button.familia-vto__more,
.familia-vto button.familia-vto__back {
	min-height: 0; height: auto; padding: 4px 0; margin: 0; border: 0; background: none; color: #1d1d1b;
	font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.familia-vto button.familia-vto__more { margin-top: auto; }
.familia-vto button.familia-vto__more[hidden] { display: none; }
.familia-vto button.familia-vto__back { align-self: flex-start; text-decoration: none; margin-bottom: 8px; }

.familia-vto__fitpanel { display: flex; flex-direction: column; gap: 12px; }
.familia-vto__subtitle { margin: 0; font-size: 18px; font-weight: 700; }
.familia-vto__help { margin: 0; font-size: 14px; line-height: 1.5; color: #3c3c3b; }
.familia-vto__pd { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 0; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; }
.familia-vto__pd-label { font-weight: 700; font-size: 14px; }
.familia-vto__stepper { display: inline-flex; align-items: center; gap: 8px; }
.familia-vto button.familia-vto__step {
	width: 36px; height: 36px; min-height: 0; padding: 0; margin: 0; border: 1px solid #d0d0d0; border-radius: 50%;
	background: #fff; color: #1d1d1b; font-size: 18px; line-height: 1; cursor: pointer;
}
.familia-vto button.familia-vto__step:disabled { opacity: .4; cursor: default; }
.familia-vto__pd-value { min-width: 64px; text-align: center; font-size: 16px; font-weight: 700; }

.familia-vto__similar { display: flex; flex-direction: column; }
.familia-vto__list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.familia-vto button.familia-vto__item {
	display: flex; flex-direction: column; align-items: center; gap: 4px; height: auto; min-height: 0; padding: 8px; margin: 0;
	border: 1px solid #e5e5e5; border-radius: 6px; background: #fff; color: #1d1d1b; text-align: center; cursor: pointer;
}
.familia-vto button.familia-vto__item:hover { border-color: #1d1d1b; }
.familia-vto__item img { width: 100%; height: 64px; object-fit: contain; }
.familia-vto__item-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; font-weight: 700; line-height: 1.3; }
.familia-vto__item-price { font-size: 12px; font-weight: 700; }
.familia-vto__item-price del, .familia-vto__item-price .screen-reader-text, .familia-vto__item-price .familia-omnibus { display: none; }
.familia-vto__item-price ins { text-decoration: none; }

/* ---------------------------------------------------------------- tablets / phones: full screen, camera on top */
@media (max-width: 1023px) {
	.familia-vto { width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; overflow-y: auto; }
	.familia-vto__consent { min-height: 100%; padding: 64px 20px 32px; }
	.familia-vto__title { font-size: 22px; }
	.familia-vto__main { flex-direction: column; }
	.familia-vto__stage { flex: none; width: 100%; height: auto; max-height: 62dvh; aspect-ratio: 1; }
	.familia-vto__panel { height: auto; max-height: none; overflow: visible; padding: 16px 16px 24px; }
	.familia-vto__frame { gap: 10px; }
	.familia-vto__img { display: none; }   /* the camera shows the frame */
	.familia-vto button.familia-vto__close { background: rgba(255, 255, 255, .9); }
}