/* Сторінка товару (04-kartka-hair, 07-kartka-care, 05-laitboks). Значення — з кадрів верстки. */

/* ---------- Каркас ---------- */
.vv-pdp { display: flex; flex-direction: column; background: var(--vv-ivory); } /* телефон: слонова кістка, як у кадрі 375 */
.vv-pdp--hair, .vv-pdp--care { padding-top: 16px; }
.vv-pdp__summary { display: flex; flex-direction: column; }
.vv-pdp__form, .vv-variations { display: flex; flex-direction: column; }

/* ---------- Галерея: телефон — слайдер на всю ширину ---------- */
.vv-gallery { position: relative; margin-inline: calc(var(--vv-gutter) * -1); }
.vv-gallery__track { display: flex; gap: 2px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.vv-gallery__track::-webkit-scrollbar { display: none; }
.vv-gallery__item { position: relative; flex: none; width: 100%; height: 125vw; max-height: 72vh; padding: 0; background: var(--vv-sand); scroll-snap-align: start; cursor: zoom-in; overflow: hidden; }
.vv-gallery__item img { width: 100%; height: 100%; object-fit: cover; }
.vv-gallery__video { position: absolute; right: 20px; bottom: 20px; font: 500 12px/12px var(--vv-font); letter-spacing: .14em; text-transform: uppercase; color: var(--vv-ivory); }
.vv-gallery__count { position: absolute; top: 16px; right: 16px; display: inline-flex; align-items: center; height: 24px; padding: 0 10px; background: rgba(255, 255, 255, .88); font: 500 11px/12px var(--vv-font); letter-spacing: .08em; color: var(--vv-black); }
.vv-gallery__dots { position: absolute; bottom: 16px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; }
.vv-gallery__dot { width: 6px; height: 2px; background: rgba(21, 21, 21, .3); transition: width .2s var(--vv-ease); }
.vv-gallery__dot.is-on { width: 20px; background: var(--vv-black); }

/* ---------- Заголовок, ціна, опис ---------- */
.vv-pdp__head { display: flex; flex-direction: column; gap: 8px; padding: 20px 0 24px; }
.vv-pdp__sub { color: var(--vv-stone); }
.vv-pdp__titlerow { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.vv-pdp__title { font: 500 24px/30px var(--vv-font); color: var(--vv-black); }
.vv-pdp__price { flex: none; font: 600 20px/30px var(--vv-font); color: var(--vv-black); white-space: nowrap; }
.vv-pdp__desc { padding-bottom: 24px; font: 400 14px/24px var(--vv-font); color: var(--vv-ink-2); }
.vv-pdp--care .vv-pdp__head { gap: 12px; padding-bottom: 12px; }

/* ---------- Варіації ---------- */
.vv-pdp__form { gap: 24px; padding-bottom: 24px; }
.vv-variations { gap: 24px; }
.vv-variation { display: flex; flex-direction: column; gap: 12px; }
.vv-variation__head { display: flex; align-items: baseline; justify-content: space-between; }
.vv-variation__label { font: 500 10px/12px var(--vv-font); letter-spacing: .18em; text-transform: uppercase; color: var(--vv-ink-2); }
.vv-variation__label .vv-variation__value { color: var(--vv-black); }
.vv-variation:not(.vv-variation--shade) .vv-variation__label { flex: 1; }
.vv-variation__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.vv-variation--shade .vv-variation__opts { gap: 12px; }
.vv-variation__swatch { flex: none; width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 0; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.vv-variation__swatch.is-on { box-shadow: 0 0 0 2px var(--vv-white), 0 0 0 3px var(--vv-wine); }
.vv-variation__swatch--more { display: inline-flex; align-items: center; justify-content: center; border: 1px dashed var(--vv-stone); background: var(--vv-sand); box-shadow: none; font: 400 16px/16px var(--vv-font); color: var(--vv-ink-2); }
.vv-variation__btn { flex: 0 0 calc((100% - 8px * (var(--vv-per-row, 3) - 1)) / var(--vv-per-row, 3)); display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 16px; border: 1px solid var(--vv-line); background: transparent; font: 500 11px/12px var(--vv-font); letter-spacing: .1em; text-transform: uppercase; color: var(--vv-ink-2); cursor: pointer; }
.vv-variation__btn.is-on { border-color: var(--vv-wine); color: var(--vv-wine); font-weight: 600; }
.vv-variation__btn.is-disabled, .vv-variation__swatch.is-disabled { opacity: .35; }
.vv-variation__btn.is-disabled { text-decoration: line-through; }
.vv-variation__help { display: block; font: 400 13px/20px var(--vv-font); color: var(--vv-wine); text-decoration: underline; text-underline-offset: 4px; }
.vv-variation__hint { font: 400 13px/20px var(--vv-font); color: var(--vv-wine); }

/* ---------- Характеристики ---------- */
.vv-specs { display: flex; flex-direction: column; margin: 0; }
.vv-specs__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; height: 32px; border-bottom: 1px solid #F1EFEA; font: 400 13px/20px var(--vv-font); }
.vv-specs__k { color: var(--vv-stone); }
.vv-specs__v { margin: 0; color: var(--vv-black); text-align: right; }

/* ---------- Кнопки ---------- */
.vv-pdp__actions { display: flex; flex-direction: column; gap: 12px; }
.vv-pdp__actions .single_add_to_cart_button.disabled { opacity: .45; cursor: not-allowed; }
.vv-pdp__stylist { display: flex; align-items: center; justify-content: center; height: 48px; border: 1px solid var(--vv-wine); color: var(--vv-wine); font: var(--vv-btn); letter-spacing: .16em; text-transform: uppercase; }
.vv-pdp__error { font: 400 13px/20px var(--vv-font); color: var(--vv-wine); }

/* ---------- Акордеони ---------- */
.vv-acc { border-top: 1px solid var(--vv-line-soft); margin-bottom: 40px; }
.vv-acc__item { border-bottom: 1px solid var(--vv-line-soft); }
.vv-acc__head { display: flex; align-items: center; justify-content: space-between; height: 56px; cursor: pointer; list-style: none; }
.vv-acc__head::-webkit-details-marker { display: none; }
.vv-acc__title { font: var(--vv-nav); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--vv-black); }
.vv-acc__sign { font: 400 18px/18px var(--vv-font); color: var(--vv-stone); }
.vv-acc__body { padding-bottom: 20px; font: 400 14px/24px var(--vv-font); color: var(--vv-ink-2); }
.vv-acc__body p + p { margin-top: 12px; }
.vv-acc__body table { width: 100%; border-collapse: collapse; }
.vv-acc__body td { padding: 8px 0; border-bottom: 1px solid #F1EFEA; }
.vv-acc__body td:last-child { text-align: right; color: var(--vv-black); }

/* ---------- Секції під товаром ---------- */
.vv-sec-title { font: 700 24px/28px var(--vv-font); text-transform: uppercase; color: var(--vv-black); }
.vv-ba { background: var(--vv-ivory); }
.vv-ba__in { display: flex; flex-direction: column; gap: 24px; padding-top: 40px; padding-bottom: 40px; }
.vv-ba__grid { display: flex; flex-direction: column; gap: 24px; }
.vv-ba__item { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.vv-ba__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; }
.vv-ba__img { position: relative; height: 228px; background: var(--vv-sand); overflow: hidden; }
.vv-ba__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; }
.vv-ba__tag { position: absolute; top: 12px; left: 12px; padding: 6px 8px; background: rgba(21, 21, 21, .44); color: var(--vv-ivory); }
.vv-ba__tag--after { background: rgba(39, 7, 20, .72); }
.vv-ba__cap { font: 400 12px/20px var(--vv-font); color: var(--vv-stone); }

.vv-ritual { background: var(--vv-ivory); }
.vv-ritual__in { display: flex; flex-direction: column; gap: 24px; padding-top: 40px; padding-bottom: 40px; }
.vv-ritual__step { display: flex; flex-direction: column; gap: 12px; }
.vv-ritual__img { height: 280px; background: var(--vv-sand); overflow: hidden; }
.vv-ritual__img img { width: 100%; height: 100%; object-fit: cover; }
.vv-ritual__txt { display: flex; flex-direction: column; gap: 12px; }
.vv-ritual__num { color: var(--vv-stone); }
.vv-ritual__title { font: 500 17px/24px var(--vv-font); color: var(--vv-black); }
.vv-ritual__text { font: 400 13px/22px var(--vv-font); color: var(--vv-ink-2); }

.vv-pdp-cross { background: transparent; }
.vv-pdp-cross__in { display: flex; flex-direction: column; gap: 24px; padding-top: 40px; padding-bottom: 48px; }
.vv-pdp-cross .vv-rail-m > * { width: 200px; }
.vv-pdp-cross .vv-rail-m .vv-card { --vv-card-h: 248px; }
.vv-pdp-cross .vv-card__media { background: var(--vv-white); }
.vv-pdp-cross .vv-card__shades { display: none; } /* у крос-сейлі верстки картки без свотчів */
.vv-pdp-cross__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.vv-pdp-cross__link { color: var(--vv-wine); }
.vv-pdp-cross__head:not(:has(a)) .vv-sec-title { flex: 1; }
.vv-pdp-cross__list { --vv-card-h: 360px; }
.vv-pdp-cross--hair .vv-pdp-cross__list { --vv-card-h: 400px; }

/* Стрічка на телефоні: наступна картка обрізана + тонкий індикатор прокрутки */
.vv-rail-m { display: flex; gap: 12px; margin-inline: calc(var(--vv-gutter) * -1); padding-inline: var(--vv-gutter); scroll-padding-inline: var(--vv-gutter); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.vv-rail-m::-webkit-scrollbar { display: none; }
.vv-rail-m > * { flex: none; width: 280px; scroll-snap-align: start; }
.vv-rail-m .vv-card { --vv-card-h: 350px; }
.vv-pdp-cross .vv-rail-progress, .vv-ritual .vv-rail-progress { margin: 0; }
.vv-ba + .vv-pdp-cross--care .vv-rail-progress, .vv-ritual .vv-rail-progress { margin-top: -8px; }
.vv-pdp-cross__btn { letter-spacing: .16em; }

/* ---------- Лайтбокс ---------- */
.vv-lightbox { position: fixed; inset: 0; z-index: 120; display: flex; flex-direction: column; height: 100dvh; background: var(--vv-ivory); color: var(--vv-black); }
.vv-lightbox[hidden] { display: none; }
.vv-lightbox__bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 56px; padding: 0 16px; }
.vv-lightbox__name { display: flex; align-items: baseline; gap: 16px; min-width: 0; }
.vv-lightbox__sub { display: none; color: var(--vv-stone); }
.vv-lightbox__title { font: 500 15px/20px var(--vv-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vv-lightbox__count { font: 400 13px/20px var(--vv-font); color: var(--vv-stone); white-space: nowrap; }
.vv-lightbox__bar .vv-lightbox__count { margin-left: auto; }
.vv-lightbox__close { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: inherit; }
.vv-lightbox__stage { flex: none; position: relative; display: flex; align-items: center; justify-content: center; }
.vv-lightbox__arrow { display: none; }
.vv-lightbox__frame { position: relative; width: 100vw; aspect-ratio: 4 / 5; max-height: calc(100dvh - 56px - 76px); background: var(--vv-sand); overflow: hidden; touch-action: pan-y; }
.vv-lightbox__slide { position: absolute; inset: 0; }
.vv-lightbox__slide img, .vv-lightbox__video { width: 100%; height: 100%; object-fit: cover; }
.vv-lightbox__vctl { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 12px; color: var(--vv-ivory); }
.vv-lightbox__play { font: 500 12px/12px var(--vv-font); color: inherit; }
.vv-lightbox__prog { flex: 1; height: 2px; background: rgba(246, 245, 241, .32); }
.vv-lightbox__prog span { display: block; width: 0; height: 2px; background: var(--vv-ivory); }
.vv-lightbox__time { font: 400 11px/12px var(--vv-font); }
.vv-lightbox__foot { flex: 1; min-height: 0; display: flex; align-items: center; padding: 0 16px; }
.vv-lightbox__thumbs { display: flex; gap: 8px; padding: 2px; overflow-x: auto; scrollbar-width: none; } /* padding — щоб кільце активної мініатюри не обрізалось */
.vv-lightbox__thumb { position: relative; flex: none; width: 48px; height: 60px; padding: 0; background: var(--vv-sand); }
.vv-lightbox__thumb img { width: 100%; height: 100%; object-fit: cover; }
.vv-lightbox__thumb.is-on { box-shadow: 0 0 0 1px var(--vv-ivory), 0 0 0 2px var(--vv-wine); }
.vv-lightbox__vmark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 500 11px/12px var(--vv-font); color: var(--vv-ivory); }
/* Відео: темне тло */
.vv-lightbox.is-video { background: var(--vv-wine-press); color: var(--vv-ivory); }
.vv-lightbox.is-video .vv-lightbox__sub, .vv-lightbox.is-video .vv-lightbox__count { color: var(--vv-on-dark-60); }
.vv-lightbox.is-video .vv-lightbox__arrow { border-color: rgba(246, 245, 241, .24); color: var(--vv-ivory); }
.vv-lightbox.is-video .vv-lightbox__thumb.is-on { box-shadow: 0 0 0 1px var(--vv-wine-press), 0 0 0 2px var(--vv-ivory); }

/* ---------- Поп-ап «Товар додано» ---------- */
.vv-added { position: fixed; inset: 0; z-index: 130; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(21, 21, 21, .4); }
.vv-added[hidden] { display: none; }
.vv-added__box { position: relative; width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 20px; padding: 32px 24px 24px; background: var(--vv-white); }
.vv-added__close { position: absolute; top: 12px; right: 12px; display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; }
.vv-added__eyebrow { display: flex; align-items: center; gap: 8px; color: var(--vv-wine); }
.vv-added__row { display: flex; gap: 16px; }
.vv-added__img { flex: none; width: 72px; height: 96px; object-fit: cover; background: var(--vv-sand); }
.vv-added__name { font: 500 15px/22px var(--vv-font); }
.vv-added__meta { font: 400 13px/20px var(--vv-font); color: var(--vv-stone); }
.vv-added__price { margin-top: 4px; font: 600 15px/22px var(--vv-font); }
.vv-added__actions { display: flex; flex-direction: column; gap: 8px; }

/* ================= ПК ================= */
@media (min-width: 1024px) {
	.vv-pdp { flex-direction: row; align-items: flex-start; gap: 32px; padding-top: 32px; padding-bottom: 96px; background: var(--vv-white); border-bottom: 1px solid var(--vv-line-soft); }
	.vv-pdp--hair, .vv-pdp--care { padding-top: 32px; }
	.vv-pdp--care .vv-pdp__head { padding-bottom: 0; }
	.vv-gallery { flex: none; width: 520px; margin: 0; }
	.vv-gallery__track { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; overflow: visible; }
	.vv-gallery__item { width: auto; height: 328px; max-height: none; }
	.vv-gallery__count, .vv-gallery__dots { display: none; }
	.vv-pdp__summary { flex: none; width: 408px; position: sticky; top: 24px; gap: 32px; }
	.vv-pdp__head { gap: 12px; padding: 0; }
	.vv-pdp__titlerow { flex-direction: column; align-items: stretch; gap: 12px; }
	.vv-pdp__title { font: 700 40px/44px var(--vv-font); letter-spacing: -.005em; }
	.vv-pdp__price { font-size: 26px; line-height: 32px; }
	.vv-pdp__desc { padding: 0; font-size: 15px; line-height: 26px; }
	.vv-pdp__form, .vv-variations { gap: 32px; padding: 0; }
	.vv-variation--shade { gap: 16px; }
	.vv-variation__label { font: var(--vv-eyebrow); letter-spacing: .24em; color: var(--vv-black); }
	.vv-variation__value { font: 400 14px/24px var(--vv-font); color: var(--vv-stone); }
	.vv-variation__swatch { width: 32px; height: 32px; }
	.vv-variation__swatch.is-on { box-shadow: 0 0 0 2px var(--vv-ivory), 0 0 0 3px var(--vv-wine); }
	.vv-variation__btn { flex: none; height: auto; padding: 11px 18px; font: 400 14px/22px var(--vv-font); letter-spacing: 0; text-transform: none; }
	.vv-variation__btn.is-on { font-weight: 500; }
	.vv-variation__help { align-self: flex-start; font: var(--vv-under); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; padding-bottom: 6px; border-bottom: 1px solid currentColor; }
	.vv-specs__row { height: auto; padding: 12px 0; border-color: var(--vv-line-soft); }
	.vv-specs__k { font: 400 14px/24px var(--vv-font); }
	.vv-specs__v { font: 500 14px/24px var(--vv-font); }
	.vv-pdp__actions { gap: 16px; }
	.vv-pdp__stylist { align-self: center; height: auto; border: 0; border-bottom: 1px solid currentColor; padding-bottom: 6px; font: var(--vv-under); letter-spacing: .16em; }
	.vv-acc { margin: 0; }
	.vv-acc__head { height: 71px; } /* + лінія 1px = крок 72 */
	.vv-acc__title { font: 500 15px/24px var(--vv-font); letter-spacing: .04em; text-transform: none; }

	.vv-sec-title { font-size: 34px; line-height: 40px; letter-spacing: .01em; }
	.vv-ba { background: var(--vv-white); border-bottom: 1px solid var(--vv-line-soft); }
	.vv-ba__in, .vv-ritual__in, .vv-pdp-cross__in { gap: 40px; padding-top: 80px; padding-bottom: 96px; }
	.vv-ba__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
	.vv-ba__item { gap: 16px; }
	.vv-ba__pair { gap: 0; }
	.vv-ba__img { height: 312px; }
	.vv-ba__tag { top: 20px; left: 20px; padding: 0; background: none !important; color: var(--vv-ink-2); }
	.vv-ba__cap { font-size: 14px; line-height: 24px; }
	.vv-ritual { background: var(--vv-white); border-bottom: 1px solid var(--vv-line-soft); }
	.vv-ritual__step { gap: 20px; }
	.vv-ritual__img { height: 400px; }
	.vv-ritual__title { font-size: 22px; line-height: 28px; }
	.vv-ritual__text { font-size: 14px; line-height: 24px; }
	.vv-pdp-cross { background: var(--vv-white); border-bottom: 1px solid var(--vv-line-soft); }
	.vv-pdp-cross--care, .vv-pdp-cross--hair { background: var(--vv-sand); }
	.vv-pdp-cross--care .vv-card__media { background: var(--vv-sand); }
	.vv-pdp-cross__head { min-height: 40px; }
	.vv-rail-m { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; overflow: visible; }
	.vv-pdp-cross--hair .vv-rail-m { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.vv-rail-m > * { width: auto; }
	.vv-rail-m .vv-card, .vv-pdp-cross .vv-rail-m .vv-card { --vv-card-h: inherit; }
	.vv-pdp-cross .vv-rail-m > * { width: auto; }
	.vv-pdp-cross__list { --vv-card-h: 280px; }
	/* «Створено для цих виробів» на 1024 — стрічка карток 288 px, що виходить за край */
	.vv-pdp-cross--hair .vv-rail-m { display: flex; gap: 24px; margin-right: calc(var(--vv-gutter) * -1); overflow: hidden; }
	.vv-pdp-cross--hair .vv-rail-m > * { flex: none; width: 288px; }
	.vv-pdp-cross--hair .vv-pdp-cross__list { --vv-card-h: 360px; }

	.vv-lightbox__bar { height: 64px; padding: 0 var(--vv-gutter); gap: 24px; }
	.vv-lightbox__sub { display: inline; }
	.vv-lightbox__title { font-size: 17px; line-height: 24px; }
	.vv-lightbox__stage { flex: 1; min-height: 0; justify-content: space-between; padding: 0 var(--vv-gutter); }
	.vv-lightbox__arrow { flex: none; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid var(--vv-line); color: var(--vv-black); }
	.vv-lightbox__frame { width: auto; height: calc(100dvh - 64px - 112px); max-height: none; }
	.vv-lightbox__vctl { left: 24px; right: 24px; bottom: 24px; gap: 16px; }
	.vv-lightbox__play { font-size: 13px; line-height: 14px; }
	.vv-lightbox__time { font-size: 12px; line-height: 14px; }
	.vv-lightbox__foot { flex: none; height: 112px; justify-content: center; gap: 24px; padding: 16px var(--vv-gutter) 24px; }
	.vv-lightbox__thumbs { gap: 12px; }
	.vv-lightbox__thumb { width: 56px; height: 72px; }
	.vv-lightbox__vmark { font-size: 12px; }
}
@media (min-width: 1280px) {
	.vv-pdp { gap: 40px; }
	.vv-ba__img { height: 384px; }
	.vv-pdp-cross__list { --vv-card-h: 320px; }
	.vv-rail-m { column-gap: 28px; }
	.vv-pdp-cross--hair .vv-rail-m { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-right: 0; overflow: visible; }
	.vv-pdp-cross--hair .vv-rail-m > * { width: auto; }
	.vv-pdp-cross--hair .vv-pdp-cross__list { --vv-card-h: 400px; }
	.vv-gallery { width: 688px; }
	.vv-gallery__item { height: 440px; }
	.vv-pdp__summary { width: 456px; }
}
@media (min-width: 1440px) {
	.vv-pdp { gap: 48px; }
	.vv-ba__img { height: 440px; }
	.vv-pdp-cross__list { --vv-card-h: 360px; }
	.vv-rail-m { column-gap: 24px; }
	.vv-gallery { width: 792px; }
	.vv-gallery__item { height: 508px; }
	.vv-pdp__summary { width: 504px; }
}

/* Липка панель покупки на телефоні (кадр 04 «Стан 2»): зʼявляється, коли кнопка «Додати в кошик» поза екраном */
.vv-buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; background: var(--vv-white); border-top: 1px solid var(--vv-line-soft); transform: translateY(110%); transition: transform .25s var(--vv-ease); }
.vv-buybar.is-on { transform: none; }
.vv-buybar__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vv-buybar__name { font: 500 13px/20px var(--vv-font); color: var(--vv-black); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vv-buybar__price { font: 600 15px/20px var(--vv-font); color: var(--vv-black); }
.vv-buybar__btn { flex: none; width: 168px; padding: 0; }
@media (min-width: 1024px) { .vv-buybar { display: none; } }