/* Journal: список (11-journal) і стаття (12-journal-stattia). */

/* ---------- Спільне ---------- */
.vv-jr-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.vv-jr-meta__type { color: var(--vv-stone); }
.vv-jr-meta__time { font: 400 11px/12px var(--vv-font); color: var(--vv-stone); white-space: nowrap; }
.vv-jr-meta__time > span { display: block; }
@media (max-width: 1023px) { .vv-jr-meta__time > .vv-hide-m { display: none; } }
.vv-jr-lead__title a, .vv-jr-item__title a { display: block; }

/* ---------- Список: телефон ---------- */
.vv-jr__head { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 32px; padding-bottom: 24px; text-align: center; }
.vv-jr__h1 { font: 700 32px/36px var(--vv-font); text-transform: uppercase; color: var(--vv-black); }
.vv-jr__intro { font: 400 14px/24px var(--vv-font); color: var(--vv-ink-2); }
.vv-jr-tabs { border-bottom: 1px solid var(--vv-line-soft); overflow-x: auto; scrollbar-width: none; }
.vv-jr-tabs::-webkit-scrollbar { display: none; }
.vv-jr-tabs__list { display: flex; gap: 24px; width: max-content; padding: 0 var(--vv-gutter); }
.vv-jr-tabs__tab { display: inline-flex; align-items: center; height: 44px; border-bottom: 1px solid transparent; font: 500 11px/12px var(--vv-font); letter-spacing: .16em; text-transform: uppercase; color: var(--vv-stone); white-space: nowrap; }
.vv-jr-tabs__tab.is-on { border-bottom-color: var(--vv-wine); color: var(--vv-wine); }
.vv-jr-tabs__tab:hover { color: var(--vv-wine); }

.vv-jr__lead { padding-top: 24px; padding-bottom: 32px; }
.vv-jr-lead { display: flex; flex-direction: column; gap: 12px; }
.vv-jr-lead__img { display: block; height: 280px; background: var(--vv-sand); overflow: hidden; }
.vv-jr-lead__img img, .vv-jr-item__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--vv-ease); }
.vv-jr-lead:hover .vv-jr-lead__img img, .vv-jr-item:hover .vv-jr-item__img img { transform: scale(1.03); }
.vv-jr-lead__body { display: flex; flex-direction: column; gap: 12px; }
.vv-jr-lead__body .vv-jr-meta { margin-top: 4px; }
.vv-jr-lead__title { font: 500 20px/28px var(--vv-font); color: var(--vv-black); }
.vv-jr-lead__text { font: 400 13px/22px var(--vv-font); color: var(--vv-ink-2); }

.vv-jr__list { padding-bottom: 56px; }
.vv-jr__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 15px; }
.vv-jr-item { display: flex; flex-direction: column; gap: 8px; }
.vv-jr-item__img { display: block; height: 216px; background: var(--vv-sand); overflow: hidden; }
.vv-jr-item__body { display: flex; flex-direction: column; gap: 8px; }
.vv-jr-item__body .vv-jr-meta { margin-top: 4px; }
.vv-jr-item__title { font: 500 15px/22px var(--vv-font); color: var(--vv-black); }
.vv-jr__more { display: flex; flex-direction: column; align-items: center; gap: 16px; padding-top: 40px; }
.vv-jr__count { font: 400 13px/20px var(--vv-font); color: var(--vv-stone); }
.vv-jr__next { display: flex; align-items: center; justify-content: center; width: 100%; height: var(--vv-btn-h); border: 1px solid var(--vv-wine); font: var(--vv-btn); letter-spacing: .16em; text-transform: uppercase; color: var(--vv-wine); }
.vv-jr__next[aria-busy="true"] { opacity: .5; pointer-events: none; }
.vv-jr__empty { padding-block: 48px; font: 400 15px/26px var(--vv-font); color: var(--vv-ink-2); }

/* ---------- Стаття: телефон ---------- */
.vv-art__top { display: flex; flex-direction: column; }
.vv-art__head { order: 0; display: flex; flex-direction: column; gap: 12px; padding-top: 24px; padding-bottom: 20px; }
.vv-art__cover { order: 1; height: 416px; background: var(--vv-sand); overflow: hidden; }
.vv-art__cover img { width: 100%; height: 100%; object-fit: cover; }
.vv-art__type, .vv-art__label { color: var(--vv-stone); }
.vv-art__h1 { font: 700 28px/32px var(--vv-font); text-transform: uppercase; color: var(--vv-black); }
.vv-art__meta { font: 400 12px/20px var(--vv-font); color: var(--vv-stone); }
.vv-art__toc-m { padding: 0 var(--vv-gutter); border-bottom: 1px solid var(--vv-line-soft); }
.vv-art__toc-bar { display: flex; align-items: center; justify-content: space-between; height: 56px; list-style: none; cursor: pointer; font: 500 11px/12px var(--vv-font); letter-spacing: .16em; text-transform: uppercase; color: var(--vv-black); }
.vv-art__toc-bar::-webkit-details-marker { display: none; }
.vv-art__toc-bar .vv-icon { transition: transform .2s var(--vv-ease); }
.vv-art__toc-m[open] .vv-art__toc-bar .vv-icon { transform: rotate(180deg); }
.vv-art__toc-m .vv-toc { padding-bottom: 16px; }
.vv-toc { display: flex; flex-direction: column; gap: 12px; }
.vv-art__toc-m:not([open]) .vv-toc { display: none; }
.vv-toc__item a { display: block; font: 400 14px/24px var(--vv-font); color: var(--vv-stone); transition: color .2s var(--vv-ease); }
.vv-toc__item--h3 { padding-left: 16px; }
.vv-toc__item.is-on a, .vv-toc__item a:hover { color: var(--vv-wine); }
.vv-toc__item.is-on a { font-weight: 500; }

.vv-art__layout { padding-top: 32px; padding-bottom: 40px; }
.vv-art__body > * + * { margin-top: 32px; }
.vv-art__body > h2 + *, .vv-art__body > h3 + * { margin-top: 12px; }
.vv-art__body p, .vv-art__body li { font: 400 15px/26px var(--vv-font); color: var(--vv-ink-3); }
.vv-art__body > p:first-child { font-size: 17px; line-height: 28px; color: var(--vv-black); }
.vv-art__body h2 { font: 500 20px/28px var(--vv-font); color: var(--vv-black); scroll-margin-top: 24px; }
.vv-art__body h3 { font: 500 17px/26px var(--vv-font); color: var(--vv-black); scroll-margin-top: 24px; }
.vv-art__body a { color: var(--vv-wine); text-decoration: underline; text-underline-offset: 3px; }
.vv-art__body ul, .vv-art__body ol { display: flex; flex-direction: column; gap: 8px; padding-left: 20px; }
.vv-art__body ul { list-style: disc; }
.vv-art__body ol { list-style: decimal; }
.vv-art__body figure { margin-inline: 0; margin-bottom: 0; }
.vv-art__body figure img { display: block; width: 100%; height: auto; background: var(--vv-sand); }
.vv-art__body figcaption { margin-top: 8px; font: 400 13px/22px var(--vv-font); color: var(--vv-stone); }
/* Галерея: ядро WP вбудовує стилі з #id-специфічністю — перебиваємо тим самим прийомом */
.vv-art__body .wp-block-gallery.has-nested-images { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.vv-art__body .wp-block-gallery.has-nested-images figure.wp-block-image:not(#vv) { width: auto; height: 208px; margin: 0; }
.vv-art__body blockquote { margin-inline: 0; margin-bottom: 0; padding: 0; }
.vv-art__body blockquote p { padding: 16px 20px; background: var(--vv-ivory); border-left: 2px solid var(--vv-wine); font: 400 14px/24px var(--vv-font); color: var(--vv-ink-2); }

.vv-art-prod-m { display: flex; gap: 12px; padding: 12px; background: var(--vv-ivory); }
.vv-art-prod-m__img { flex: none; width: 120px; height: 152px; background: var(--vv-sand); overflow: hidden; }
.vv-art-prod-m__img img { width: 100%; height: 100%; object-fit: cover; }
.vv-art-prod-m__info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }
.vv-art-prod-m__top { display: flex; flex-direction: column; gap: 2px; }
.vv-art-prod-m__name { font: 500 15px/22px var(--vv-font); color: var(--vv-black); }
.vv-art-prod-m__price { font: 600 14px/20px var(--vv-font); color: var(--vv-black); }
.vv-art-body .vv-art-prod-m a, .vv-art__body .vv-art-prod-m a { text-decoration: none; }
.vv-art-prod-m__link { align-self: flex-start; padding-bottom: 4px; border-bottom: 1px solid currentColor; font: 500 10px/12px var(--vv-font); letter-spacing: .14em; text-transform: uppercase; color: var(--vv-wine); }

.vv-art__h2 { font: 700 24px/28px var(--vv-font); text-transform: uppercase; color: var(--vv-black); }
.vv-art-care { display: flex; flex-direction: column; gap: 24px; padding: 40px 0; background: var(--vv-ivory); }
.vv-art-care__rail, .vv-art-more__rail { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--vv-gutter); }
.vv-art-care__item { flex: none; width: 200px; display: flex; flex-direction: column; gap: 8px; scroll-snap-align: start; }
.vv-art-care__img { display: block; height: 248px; background: var(--vv-white); overflow: hidden; }
.vv-art-care__img img, .vv-art-more__img img { width: 100%; height: 100%; object-fit: cover; }
.vv-art-care__info { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.vv-art-care__name { font: 500 15px/22px var(--vv-font); color: var(--vv-black); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vv-art-care__meta { font: 400 12px/20px var(--vv-font); color: var(--vv-stone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vv-art-care__price { font: 600 15px/22px var(--vv-font); color: var(--vv-black); }
.vv-art-care__meta > span { display: block; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1023px) { .vv-art-care__meta > .vv-hide-m { display: none; } }
.vv-art-head { padding-inline: 0; }
.vv-art-head .vv-art__h2 { padding-inline: var(--vv-gutter); }
.vv-art-more { display: flex; flex-direction: column; gap: 24px; padding: 40px 0 48px; }
.vv-art-more__item { flex: none; width: 240px; display: flex; flex-direction: column; gap: 8px; scroll-snap-align: start; }
.vv-art-more__img { display: block; height: 280px; background: var(--vv-sand); overflow: hidden; }
.vv-art-more__item .vv-jr-meta { margin-top: 4px; }
.vv-art-more__title { font: 500 15px/22px var(--vv-font); color: var(--vv-black); }
.vv-art-more .vv-rail-progress { margin-top: -8px; }
.vv-art-more__btn { letter-spacing: .16em; }

/* ---------- ПК ---------- */
@media (min-width: 1024px) {
	.vv-jr, .vv-art { background: var(--vv-white); }
	.vv-jr__head { gap: 24px; padding-top: 56px; padding-bottom: 48px; }
	.vv-jr__h1 { font-size: 40px; line-height: 44px; letter-spacing: -.005em; }
	.vv-jr__intro { max-width: 56ch; font-size: 17px; line-height: 30px; }
	.vv-jr-tabs { padding-bottom: 48px; border: 0; overflow: visible; }
	.vv-jr-tabs__list { gap: 48px; width: auto; justify-content: center; }
	.vv-jr-tabs__tab { position: relative; height: auto; border: 0; font-size: 12px; }
	.vv-jr-tabs__tab.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 1px; background: var(--vv-wine); }

	.vv-jr__lead { padding-top: 0; padding-bottom: 80px; border-bottom: 1px solid var(--vv-line-soft); }
	.vv-jr-lead { display: grid; grid-template-columns: minmax(0, 1fr) 312px; align-items: center; gap: 32px; }
	.vv-jr-lead__img { height: 400px; }
	.vv-jr-lead__body { gap: 20px; }
	.vv-jr-lead__body .vv-jr-meta { display: block; margin: 0; }
	.vv-jr-lead__body .vv-jr-meta__type { display: block; }
	.vv-jr-lead__title { font: 600 34px/42px var(--vv-font); }
	.vv-jr-lead__text { font-size: 15px; line-height: 26px; }
	.vv-jr-lead__time { font: 400 13px/22px var(--vv-font); color: var(--vv-stone); }
	.vv-jr-lead__more { align-self: flex-start; margin-top: 8px; padding-bottom: 6px; border-bottom: 1px solid currentColor; font: var(--vv-under); letter-spacing: .16em; text-transform: uppercase; color: var(--vv-wine); }

	.vv-jr__list { padding-top: 80px; padding-bottom: 96px; border-bottom: 1px solid var(--vv-line-soft); }
	.vv-jr__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 24px; }
	.vv-jr-item { gap: 20px; }
	.vv-jr-item__img { height: 400px; }
	.vv-jr-item__body .vv-jr-meta { margin: 0; }
	.vv-jr-meta__time { font-size: 13px; line-height: 22px; }
	.vv-jr-item__title { font-size: 19px; line-height: 28px; }
	.vv-jr__more { flex-direction: row; justify-content: space-between; gap: 32px; padding-top: 64px; }
	.vv-jr__count { font-size: 14px; line-height: 24px; }
	.vv-jr__next { width: auto; height: auto; padding-bottom: 6px; border: 0; border-bottom: 1px solid currentColor; font: var(--vv-under); letter-spacing: .14em; }

	.vv-art__cover { order: 0; height: 520px; }
	.vv-art__head { order: 1; gap: 0; padding-top: 64px; padding-bottom: 48px; }
	.vv-art__h1 { margin-top: 20px; font-size: 48px; line-height: 56px; letter-spacing: -.005em; text-transform: none; }
	.vv-art__meta { margin-top: 14px; font-size: 14px; line-height: 24px; }
	.vv-art__layout { display: flex; align-items: flex-start; gap: 48px; padding-top: 0; padding-bottom: 96px; border-bottom: 1px solid var(--vv-line-soft); }
	.vv-art__body { flex: none; width: 560px; }
	.vv-art__body > h2 + *, .vv-art__body > h3 + * { margin-top: 32px; }
	.vv-art__body p, .vv-art__body li, .vv-art__body > p:first-child { font-size: 17px; line-height: 32px; color: var(--vv-ink-3); }
	.vv-art__body h2 { font: 600 24px/32px var(--vv-font); }
	.vv-art__body h3 { font: 600 19px/28px var(--vv-font); }
	.vv-art__body > figure img { height: 400px; object-fit: cover; }
	.vv-art__body .wp-block-gallery.has-nested-images { gap: 16px; }
	.vv-art__body .wp-block-gallery.has-nested-images figure.wp-block-image:not(#vv) { height: 320px; }
	/* Порада під фото — на ПК підписом, як у верстці */
	.vv-art__body blockquote.is-style-vv-tip { padding: 0; background: none; border: 0; }
	.vv-art__body blockquote.is-style-vv-tip p { padding: 0; background: none; border: 0; font-size: 13px; line-height: 22px; color: var(--vv-stone); }
	.vv-art__aside { flex: 1; min-width: 0; position: sticky; top: 24px; display: flex; flex-direction: column; gap: 40px; padding-top: 8px; }
	.vv-art__toc { display: flex; flex-direction: column; gap: 12px; }
	.vv-art-prod { display: flex; flex-direction: column; gap: 16px; padding-top: 32px; border-top: 1px solid var(--vv-line-soft); }
	.vv-art-prod__img { display: block; height: 440px; background: var(--vv-sand); overflow: hidden; }
	.vv-art-prod__img img { width: 100%; height: 100%; object-fit: cover; }
	.vv-art-prod__info { display: flex; flex-direction: column; gap: 8px; }
	.vv-art-prod__name { font: 500 19px/26px var(--vv-font); color: var(--vv-black); }
	.vv-art-prod__meta { font: 400 14px/24px var(--vv-font); color: var(--vv-stone); }
	.vv-art-prod__price { font: 600 19px/26px var(--vv-font); color: var(--vv-black); }
	.vv-art-prod__btn { margin-top: 8px; }

	.vv-art__h2 { font-size: 34px; line-height: 40px; letter-spacing: .01em; }
	.vv-art-head { padding-inline: max(var(--vv-gutter), calc((100% - var(--vv-content)) / 2)); }
	.vv-art-head .vv-art__h2 { padding-inline: 0; }
	.vv-art-more__item .vv-jr-meta, .vv-art-more__item .vv-jr-meta__type { display: block; }
	.vv-art-care { gap: 40px; padding: 80px 0 88px; background: var(--vv-sand); border-bottom: 1px solid var(--vv-line-soft); }
	.vv-art-care__rail, .vv-art-more__rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; overflow: visible; }
	.vv-art-care__item { width: auto; gap: 16px; }
	.vv-art-care__img { height: 320px; }
	.vv-art-care__info { gap: 8px; margin: 0; }
	.vv-art-care__name { font-size: 19px; line-height: 26px; white-space: normal; }
	.vv-art-care__meta { font-size: 14px; line-height: 24px; }
	.vv-art-care__price { font-size: 17px; line-height: 26px; margin-top: -8px; }
	.vv-art-more { gap: 40px; padding: 80px 0 96px; border-bottom: 1px solid var(--vv-line-soft); }
	.vv-art-more__head { display: flex; align-items: baseline; justify-content: space-between; height: 40px; }
	.vv-art-more__all { padding-bottom: 6px; border-bottom: 1px solid currentColor; font: var(--vv-under); letter-spacing: .16em; text-transform: uppercase; color: var(--vv-wine); }
	.vv-art-more__item { width: auto; gap: 16px; }
	.vv-art-more__img { height: 320px; }
	.vv-art-more__item .vv-jr-meta { margin: 0 0 -8px; }
	.vv-art-more__title { font-size: 19px; line-height: 28px; }
}
@media (min-width: 1280px) {
	.vv-jr__h1 { font-size: 56px; line-height: 58px; }
	.vv-art__layout { gap: 80px; }
	.vv-art__body { width: 640px; }
	.vv-art-care__rail, .vv-art-more__rail { column-gap: 28px; }
	.vv-jr-lead { grid-template-columns: minmax(0, 1fr) 384px; gap: 40px; }
	.vv-jr-lead__img { height: 488px; }
	.vv-jr__grid { column-gap: 28px; }
}
@media (min-width: 1440px) {
	.vv-art__layout { gap: 96px; }
	.vv-art-care__rail, .vv-art-more__rail { column-gap: 24px; }
	.vv-jr-lead { grid-template-columns: minmax(0, 1fr) 432px; gap: 48px; }
	.vv-jr-lead__img { height: 560px; }
	.vv-jr__grid { column-gap: 24px; }
}