/* Vranjes Core — компоненты магазина. Токены берутся из темы vranjes-child,
запасные значения нужны на случай, если тема сменится. */
.vr-sr {
position: absolute !important; width: 1px; height: 1px; overflow: hidden;
clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.vr-muted { color: var(--vr-taupe, #6F665C); }
.vr-note-owner {
padding: 16px 20px; border: 1px dashed var(--vr-brass, #B08D57);
background: var(--vr-cream, #FBF8F3); color: var(--vr-taupe, #6F665C); font-size: 14px;
}
/* Скрываем стандартный заголовок Blocksy там, где H1 выводим сами */
.vr-landing .hero-section,
.vr-collection-page .hero-section { display: none; }
/* Карточка: коллекция и характер ------------------------------------------ */
.vr-product-collection a { text-decoration: none; color: var(--vr-accent, #7A1A26); }
/* Пирамида аромата -------------------------------------------------------- */
.vr-pyramid {
margin: 28px 0;
padding: 24px 0 8px;
border-top: 1px solid var(--vr-stone, #D8CCBA);
}
.vr-pyramid__title {
font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
color: var(--vr-graphite, #1F1D1B); margin: 0 0 16px;
}
.vr-pyramid__levels { list-style: none; margin: 0; padding: 0; }
.vr-pyramid__level {
display: grid;
grid-template-columns: minmax(120px, 34%) 1fr;
gap: 16px;
padding: 14px 0;
border-bottom: 1px solid var(--vr-stone, #D8CCBA);
position: relative;
}
.vr-pyramid__level { padding-left: 30px; }
.vr-pyramid__level::before {
/* Значок-пирамида: закрашен ярус, к которому относятся ноты */
content: "";
position: absolute; left: 0; top: 17px;
width: 16px; height: 14px;
background: url('data:image/svg+xml;utf8,') no-repeat center / contain;
}
.vr-pyramid__level--heart::before { background-image: url('data:image/svg+xml;utf8,'); }
.vr-pyramid__level--base::before { background-image: url('data:image/svg+xml;utf8,'); }
.vr-pyramid__label { font-size: 13px; font-weight: 500; color: var(--vr-graphite, #1F1D1B); }
.vr-pyramid__label small { display: block; font-size: 12px; font-weight: 400; color: var(--vr-taupe, #6F665C); }
.vr-pyramid__notes { font-family: var(--vr-font-serif, Georgia, serif); font-size: 1.15rem; line-height: 1.45; }
/* Пилюли объёма ----------------------------------------------------------- */
.vr-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 6px; }
.vr-pill {
min-width: 84px; min-height: 46px; padding: 0 18px;
border: 1px solid var(--vr-stone, #D8CCBA); border-radius: var(--vr-radius, 2px);
background: transparent; color: var(--vr-graphite, #1F1D1B);
font: 500 13px/1 var(--vr-font-sans, sans-serif); letter-spacing: 0.04em;
cursor: pointer;
transition: border-color .3s, background-color .3s, color .3s;
}
.vr-pill:hover { border-color: var(--vr-accent, #7A1A26); color: var(--vr-accent, #7A1A26); }
.vr-pill.is-active { background: var(--vr-accent-tint, rgba(122, 26, 38, 0.07)); border-color: var(--vr-accent, #7A1A26); color: var(--vr-accent, #7A1A26); box-shadow: inset 0 0 0 1px var(--vr-accent, #7A1A26); }
.vr-pill:disabled { opacity: .35; text-decoration: line-through; cursor: not-allowed; }
/* Подарочная упаковка ----------------------------------------------------- */
.vr-gift {
flex-basis: 100%;
margin: 4px 0 16px;
padding: 16px 18px;
border: 1px solid var(--vr-stone, #D8CCBA);
background: var(--vr-cream, #FBF8F3);
}
.vr-gift__toggle { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; margin: 0 !important; }
.vr-gift__toggle input { margin-top: 3px; flex: none; }
.vr-gift__toggle span { font-size: 15px; font-weight: 500; }
.vr-gift__toggle small { display: block; font-size: 13px; font-weight: 400; color: var(--vr-taupe, #6F665C); }
.vr-gift__note { margin-top: 14px; position: relative; }
.vr-gift__note label { display: block; font-size: 13px; margin-bottom: 6px; }
.vr-gift__note textarea { width: 100%; min-height: 90px; }
.vr-gift__count { position: absolute; right: 10px; bottom: 8px; font-size: 11px; color: var(--vr-taupe, #6F665C); }
form.cart:not(.variations_form) { flex-wrap: wrap; }
.single_variation_wrap .woocommerce-variation-add-to-cart { flex-wrap: wrap; }
/* Наличие и доставка ------------------------------------------------------ */
.vr-buy-info { list-style: none; margin: 20px 0 24px; padding: 0; font-size: 14px; color: var(--vr-ink, #2B2826); }
.vr-buy-info li { padding: 6px 0 6px 22px; position: relative; }
.vr-buy-info li::before {
content: ""; position: absolute; left: 2px; top: 14px;
width: 10px; height: 1px; background: var(--vr-brass, #B08D57);
}
.vr-buy-info__stock::before { display: none; }
.vr-buy-info__stock { padding-left: 22px; font-weight: 500; }
.vr-dot { position: absolute; left: 2px; top: 12px; width: 8px; height: 8px; border-radius: 50%; background: #4E6B4F; }
.vr-buy-info__stock.is-out-of-stock .vr-dot { background: #8E3B2F; }
/* Инструкция во вкладке --------------------------------------------------- */
.vr-usage-steps { counter-reset: s; list-style: none; padding: 0; margin: 0 0 20px; }
.vr-usage-steps li { counter-increment: s; position: relative; padding: 0 0 16px 48px; }
.vr-usage-steps li::before {
content: counter(s, decimal-leading-zero);
position: absolute; left: 0; top: -4px;
font-family: var(--vr-font-serif, Georgia, serif); font-size: 1.6rem; color: var(--vr-brass, #B08D57);
}
/* Фото в интерьере -------------------------------------------------------- */
.vr-interior { margin: 64px 0; }
.vr-interior img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
/* «Дополните аромат» ------------------------------------------------------ */
.vr-complete { clear: both; margin: 80px 0 40px; text-align: center; }
.vr-complete > h2 { margin: 0 0 12px; }
.vr-complete > .vr-muted { max-width: 520px; margin: 0 auto 40px; }
.vr-complete__more { margin-top: 32px; }
/* Кнопка «Быстрый просмотр» в карточке каталога --------------------------- */
.vr-qv-btn {
display: block; width: 100%;
min-height: 44px; margin-top: 8px; padding: 8px 0;
border: 0; background: none;
font: 500 11px/1.4 var(--vr-font-sans, sans-serif); letter-spacing: 0.16em; text-transform: uppercase;
color: var(--vr-taupe, #6F665C);
cursor: pointer;
opacity: 1; transition: color .3s;
}
.vr-qv-btn:hover { color: var(--vr-accent, #7A1A26); }
/* Окно быстрого просмотра ------------------------------------------------- */
.vr-qv {
width: min(1040px, calc(100vw - 32px));
max-height: calc(100vh - 48px);
padding: 0;
border: 0;
background: var(--vr-ivory, #F5F0E8);
color: var(--vr-graphite, #1F1D1B);
box-shadow: 0 30px 80px -30px rgba(31, 29, 27, .45);
}
.vr-qv::backdrop { background: rgba(31, 29, 27, .45); backdrop-filter: blur(2px); }
.vr-qv[open] { animation: vr-qv-in .45s cubic-bezier(.22, .61, .36, 1); }
@keyframes vr-qv-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.vr-qv__close {
position: absolute; top: 12px; right: 12px; z-index: 2;
width: 44px; height: 44px; display: grid; place-items: center;
border: 0; background: var(--vr-ivory, #F5F0E8); color: inherit; cursor: pointer;
}
.vr-qv__grid { display: grid; grid-template-columns: 1fr 1fr; }
.vr-qv__media { background: var(--vr-sand, #E9E0D2); }
.vr-qv__media img { width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.vr-qv__summary { padding: 48px 40px; overflow-y: auto; max-height: calc(100vh - 48px); }
.vr-qv__body { max-height: calc(100vh - 48px); overflow-y: auto; }
.vr-qv__title { font-size: clamp(1.8rem, 1.3rem + 1.5vw, 2.6rem); margin: 0 0 8px; }
.vr-qv__trust { color: var(--vr-taupe, #6F665C); font-size: 13px; line-height: 1.5; }
.vr-qv__loading { padding: 80px; text-align: center; color: var(--vr-taupe, #6F665C); }
@media (max-width: 781px) {
.vr-qv__grid { grid-template-columns: 1fr; }
.vr-qv__media img { aspect-ratio: 1; }
.vr-qv__summary { padding: 28px 20px; max-height: none; }
.vr-qv__body { max-height: calc(100dvh - 24px); }
}
/* Лендинг коллекции ------------------------------------------------------- */
.vr-collection-hero { position: relative; width: 100vw; margin: 0 0 64px calc(50% - 50vw); color: var(--vr-ivory, #F5F0E8); }
.vr-collection-page .woocommerce-products-header { margin-bottom: 0; }
.vr-collection-hero__media { margin: 0; }
.vr-collection-hero__media img { width: 100%; aspect-ratio: 21 / 9; min-height: 420px; object-fit: cover; display: block; }
.vr-collection-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(31,29,27,0) 35%, rgba(31,29,27,.55)); }
.vr-collection-hero__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 0 var(--vr-gutter, 24px) clamp(32px, 5vw, 72px); text-align: center; }
.vr-collection-hero__body .vr-eyebrow { color: var(--vr-sand, #E9E0D2); }
.vr-collection-hero__title { color: var(--vr-ivory, #F5F0E8) !important; font-size: var(--vr-fs-display, 4.5rem) !important; margin: 0 0 12px; }
.vr-collection-hero__body .vr-lead { color: var(--vr-sand, #E9E0D2); margin: 0 auto; }
.vr-collection-intro { text-align: left; display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(32px, 6vw, 96px); max-width: 1100px; margin: 0 auto 80px; align-items: start; }
.vr-collection-intro__story { font-size: var(--vr-fs-md, 1.1rem); line-height: 1.8; }
.vr-collection-intro__story p:first-child::first-letter {
float: left; font-family: var(--vr-font-serif, Georgia, serif); font-size: 4.2em; line-height: .85; padding: 6px 10px 0 0; color: var(--vr-accent, #7A1A26);
}
.vr-pyramid--wide { margin-top: 0; }
.vr-collection-products-title { text-align: center; margin: 0 0 48px; }
@media (max-width: 781px) {
.vr-collection-intro { grid-template-columns: 1fr; }
.vr-collection-hero__media img { aspect-ratio: 4 / 5; min-height: 0; }
}
.vr-collection-card__tagline { display: block; margin-top: 8px; font-size: 14px; color: var(--vr-taupe, #6F665C); }
/* Квиз -------------------------------------------------------------------- */
.vr-quiz {
max-width: 960px; margin: 0 auto;
padding: clamp(28px, 5vw, 64px);
background: var(--vr-cream, #FBF8F3);
border: 1px solid var(--vr-stone, #D8CCBA);
scroll-margin-top: 120px;
}
.vr-quiz__progress { height: 1px; background: var(--vr-stone, #D8CCBA); margin-bottom: 40px; }
.vr-quiz__progress span { display: block; height: 1px; width: 100%; transform: scaleX(0); transform-origin: left; background: var(--vr-accent, #7A1A26); transition: transform .6s cubic-bezier(.22, .61, .36, 1); }
.vr-quiz__step { border: 0; margin: 0; padding: 0; min-width: 0; }
.vr-quiz__step:not([hidden]), .vr-quiz__result:not([hidden]) { animation: vr-qv-in .5s cubic-bezier(.22, .61, .36, 1); }
.vr-quiz legend { display: block; width: 100%; text-align: center; margin-bottom: 32px; padding: 0; }
.vr-quiz__q { display: block; font-family: var(--vr-font-serif, Georgia, serif); font-size: var(--vr-fs-h3, 2rem); font-weight: 300; line-height: 1.25; }
.vr-quiz__options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.vr-quiz__option {
position: relative; display: block; margin: 0 !important;
padding: 22px 24px;
border: 1px solid var(--vr-stone, #D8CCBA);
background: var(--vr-ivory, #F5F0E8);
cursor: pointer;
transition: border-color .3s, background-color .3s;
}
.vr-quiz__option input { position: absolute; opacity: 0; pointer-events: none; }
.vr-quiz__option:hover { border-color: var(--vr-graphite, #1F1D1B); }
.vr-quiz__option:has(input:checked) { border-color: var(--vr-accent, #7A1A26); background: var(--vr-cream, #FBF8F3); }
.vr-quiz__option:has(input:focus-visible) { outline: 1px solid var(--vr-accent, #7A1A26); outline-offset: 2px; }
.vr-quiz__option-title { display: block; font-family: var(--vr-font-serif, Georgia, serif); font-size: 1.35rem; line-height: 1.3; }
.vr-quiz__option-hint { display: block; margin-top: 4px; font-size: 13px; color: var(--vr-taupe, #6F665C); }
.vr-quiz__back { margin-top: 24px; border: 0; background: none; cursor: pointer; font-size: 13px; }
.vr-quiz__result { text-align: center; }
.vr-quiz__result h3 { margin: 0 0 40px; }
.vr-quiz__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; text-align: center; }
.vr-quiz__again { margin-top: 32px; }
.vr-quiz__again button { border: 0; background: none; cursor: pointer; }
@media (max-width: 600px) { .vr-quiz__options { grid-template-columns: 1fr; } }
/* Cookie-баннер ----------------------------------------------------------- */
.vr-cookie {
position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9999;
display: flex; align-items: center; gap: 24px;
max-width: 880px; margin: 0 auto;
padding: 20px 24px;
background: var(--vr-ivory, #F5F0E8);
border: 1px solid var(--vr-stone, #D8CCBA);
box-shadow: 0 20px 50px -25px rgba(31, 29, 27, .35);
animation: vr-qv-in .6s cubic-bezier(.22, .61, .36, 1);
}
.vr-cookie[hidden] { display: none; }
.vr-cookie__text { margin: 0; font-size: 13px; line-height: 1.6; color: var(--vr-ink, #2B2826); }
.vr-cookie__actions { display: flex; gap: 8px; flex: none; }
.vr-cookie .button { min-height: 44px; padding: 0 18px; font-size: 11px; }
@media (max-width: 700px) {
.vr-cookie { flex-direction: column; align-items: stretch; gap: 14px; left: 8px; right: 8px; bottom: 8px; }
.vr-cookie__actions { flex-direction: column-reverse; }
}
.vr-cookie-settings { border: 0; background: none; padding: 0; color: inherit; cursor: pointer; font: inherit; text-decoration: underline; text-underline-offset: .25em; }
/* Реквизиты и чекаут ------------------------------------------------------ */
.vr-requisites-line { margin-bottom: 4px; }
.vr-checkout-note {
margin: 0 0 32px; padding: 16px 20px;
border: 1px solid var(--vr-stone, #D8CCBA);
background: var(--vr-cream, #FBF8F3);
font-size: 14px;
}
/* Страна одна — Россия: поле есть в форме, но не показывается */
.vr-field-hidden { display: none !important; }
#billing_city_field .optional, #billing_address_1_field .optional { display: none; }
/* Согласия: оба чекбокса одним блоком прямо над кнопкой */
.woocommerce-terms-and-conditions-wrapper {
margin: 0 0 16px; padding: 18px 20px 6px;
border: 1px solid var(--vr-stone, #D8CCBA);
background: var(--vr-ivory, #F5F0E8);
transition: border-color .3s ease, box-shadow .3s ease;
}
.vr-agree__title {
margin: 0 0 6px;
font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
color: var(--vr-accent, #7A1A26);
}
.woocommerce-terms-and-conditions-wrapper .form-row { margin: 0 !important; padding: 0 !important; font-size: 14px; }
.woocommerce-terms-and-conditions-wrapper .form-row + .form-row { border-top: 1px solid var(--vr-stone, #D8CCBA); }
.woocommerce-terms-and-conditions-wrapper label.checkbox {
display: block !important; position: relative;
min-height: 48px; padding: 12px 0 12px 32px; margin: 0 !important;
line-height: 1.45; cursor: pointer;
}
.woocommerce-terms-and-conditions-wrapper input[type="checkbox"] {
position: absolute; left: 0; top: 13px;
width: 20px; height: 20px; margin: 0 !important;
accent-color: var(--vr-accent, #7A1A26);
}
.woocommerce-terms-and-conditions-wrapper a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--vr-brass, #B08D57); }
.woocommerce-terms-and-conditions-wrapper.is-attention {
border-color: var(--vr-accent, #7A1A26);
box-shadow: 0 0 0 3px rgba(122, 26, 38, 0.12);
}
.woocommerce-terms-and-conditions-wrapper .form-row.is-missing label { color: var(--vr-accent, #7A1A26); }
.woocommerce-terms-and-conditions-wrapper .form-row.is-missing input[type="checkbox"] { outline: 1px solid var(--vr-accent, #7A1A26); outline-offset: 2px; }
/* Страница «Спасибо» ------------------------------------------------------ */
.vr-next-steps { margin: 48px 0; padding: 32px; background: var(--vr-cream, #FBF8F3); border: 1px solid var(--vr-stone, #D8CCBA); }
.vr-next-steps h2 { font-size: var(--vr-fs-h4, 1.6rem); margin: 0 0 20px; }
.vr-next-steps__list { margin: 0 0 16px; padding-left: 1.2em; }
.vr-next-steps__list li { margin-bottom: 12px; }
/* Таблица-обёртка --------------------------------------------------------- */
.vr-table-wrap { overflow-x: auto; margin: 24px 0; }
body.vr-collection-page, body.vr-landing { overflow-x: clip; }
/* Вопросы об аромате на лендинге коллекции */
.vr-collection-faq { max-width: 760px; margin: 80px auto 40px; }
.vr-collection-faq h2 { text-align: center; margin-bottom: 32px; }
.vr-collection-faq details summary { font-size: 1.2rem; }
.vr-source { margin-top: 24px; font-size: 13px; text-align: center; }
/* Ссылка «Настройки cookie» в тёмной строке реквизитов */
.vr-requisites .vr-cookie-settings,
.vr-requisites .vr-cookie-settings:hover {
color: rgba(245, 240, 232, 0.6) !important;
background: none !important;
border: 0 !important;
min-height: 0 !important;
padding: 0 !important;
box-shadow: none !important;
}
.vr-requisites .vr-cookie-settings:hover { color: var(--vr-brass-soft, #CDB48A) !important; }
/* ── Оформление заказа и корзина (harden) ───────────────────────────── */
/* Обязательные поля: латунь вместо ярко-красного */
.woocommerce form .form-row .required,
.woocommerce form .form-row abbr.required { color: var(--vr-brass, #B08D57); text-decoration: none; border: 0; font-weight: 400; }
/* Ошибка у поля — бордовая, мельче подписи, с рамкой поля в тон */
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select,
.woocommerce form .form-row.woocommerce-invalid .select2-selection { border-color: var(--vr-accent, #7A1A26) !important; }
.woocommerce form .form-row.woocommerce-invalid label { color: var(--vr-accent, #7A1A26); }
.checkout-inline-error-message {
margin: 6px 0 0 !important;
font-size: 13px !important;
line-height: 1.45;
color: var(--vr-accent, #7A1A26) !important;
}
/* Сверху — только сводка, сами ошибки уже стоят у полей */
.woocommerce-NoticeGroup-checkout .woocommerce-error li.vr-dup { display: none; }
.woocommerce-NoticeGroup-checkout .woocommerce-error { border-left-width: 1px !important; }
/* «Заказывали раньше? Войти» — строкой текста, а не рамкой-уведомлением */
.woocommerce-form-login-toggle .woocommerce-info {
padding: 0 !important;
margin: 0 0 24px !important;
border: 0 !important;
background: none !important;
font-size: 14px;
color: var(--vr-taupe, #6F665C) !important;
}
.woocommerce-form-login-toggle .woocommerce-info::before { display: none !important; }
.woocommerce-form-login-toggle .showlogin { color: var(--vr-graphite, #1F1D1B); text-underline-offset: .25em; }
.woocommerce-account-fields .create-account label { font-size: 13px; color: var(--vr-taupe, #6F665C); }
/* Самовывоз */
.vr-pickup-note {
margin: 4px 0 20px;
padding: 14px 18px;
background: var(--vr-cream, #FBF8F3);
border: 1px solid var(--vr-stone, #D8CCBA);
font-size: 14px;
line-height: 1.6;
}
/* «Что будет дальше» у кнопки заказа */
.vr-next { margin: 8px 0 20px; padding: 18px 20px; border: 1px solid var(--vr-stone, #D8CCBA); background: var(--vr-ivory, #F5F0E8); }
.vr-next__title { margin: 0 0 10px; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--vr-graphite, #1F1D1B); }
.vr-next__list { margin: 0; padding-left: 1.2em; font-size: 13.5px; line-height: 1.6; color: var(--vr-ink, #2B2826); }
.vr-next__list li + li { margin-top: 6px; }
.vr-next__list a { color: inherit; }
/* Корзина: спокойные гарантии под итогом, пересчёт без кнопки */
.vr-cart-assure { list-style: none; margin: 16px 0 0; padding: 0; font-size: 13px; color: var(--vr-taupe, #6F665C); }
.vr-cart-assure li { position: relative; padding: 4px 0 4px 18px; }
.vr-cart-assure li::before { content: ""; position: absolute; left: 2px; top: 13px; width: 8px; height: 1px; background: var(--vr-brass, #B08D57); }
.vr-cart-auto .woocommerce-cart-form [name="update_cart"] { display: none !important; }
/* Карточки результата квиза: цена и явное действие */
.vr-collection-card__price { display: block; margin-top: 8px; font-size: 14px; color: var(--vr-graphite, #1F1D1B); font-variant-numeric: lining-nums tabular-nums; }
.vr-collection-card__cta {
display: inline-block; margin-top: 12px; padding-bottom: 4px;
border-bottom: 1px solid currentColor;
font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
color: var(--vr-graphite, #1F1D1B);
}
.vr-collection-card:hover .vr-collection-card__cta { color: var(--vr-accent, #7A1A26); }