/* V4 → dev2: страница «How to Brew Tea» (page_id 178) — 18.10.2026. Разметку строит v4-gaid.js из текста страницы */
html.v4g-page .tygh-content .span4.ty-sidebox-delimiter, html.v4g-page .tygh-content .ty-sidebox-delimiter { display: none !important; }
html.v4g-page .tygh-content .span12 { width: 100% !important; margin-left: 0 !important; float: none !important; }
html.v4g-page .vs-mainbox-general { max-width: 1200px; margin: 0 auto; }
.v4g { --g-ink: #1E2421; --g-txt: #2F3A35; --g-mute: #6B726E; --g-green: #0F5C45; --g-gold: #9A7A3A; margin: 0 0 clamp(40px, 6vw, 72px); opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.v4g.v4g-in { opacity: 1; transform: none; }
.v4g-hero { opacity: 1; transform: none; }
.v4g .v4g-h2, .v4g h2.v4g-h2 { margin: 0 0 22px !important; padding: 0 !important; border: 0 !important; font: 600 clamp(28px, 3.4vw, 42px)/1.1 var(--v4-cond), sans-serif !important; letter-spacing: -.015em; color: var(--g-ink) !important; text-transform: none !important; text-align: left !important; }
.v4g-k { margin: 0 0 10px !important; font: 700 13px/1 Inter, system-ui, sans-serif !important; letter-spacing: .16em; text-transform: uppercase; color: var(--g-gold) !important; }

/* шапка-баннер */
.v4g-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: 24px; margin-top: 8px; padding: clamp(28px, 5vw, 64px); border-radius: 32px; overflow: hidden; background: radial-gradient(120% 140% at 0% 0%, #FBF1DF 0%, #F6F4EF 45%, #E4F1EA 100%); }
.v4g-hero::after { content: ""; position: absolute; right: -80px; bottom: -120px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(201,169,97,.22), transparent 70%); pointer-events: none; }
.v4g-hero h1.v4g-h1 { margin: 0 0 14px !important; padding: 0 !important; font: 600 clamp(40px, 5.4vw, 72px)/1.02 var(--v4-cond), sans-serif !important; letter-spacing: -.02em; color: var(--g-ink) !important; text-align: left !important; text-transform: none !important; }
.v4g-lead { margin: 0 0 24px !important; max-width: 560px; font: 400 18px/1.55 Inter, system-ui, sans-serif !important; color: var(--g-txt) !important; }
.v4g-heroText > * { animation: v4gUp .8s cubic-bezier(.22,1,.36,1) both; }
.v4g-heroText > :nth-child(2) { animation-delay: .08s; } .v4g-heroText > :nth-child(3) { animation-delay: .16s; } .v4g-heroText > :nth-child(4) { animation-delay: .24s; }
@keyframes v4gUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.v4g-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.v4g-btn { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 26px; border-radius: 999px; font: 600 16px/1 Inter, system-ui, sans-serif !important; text-decoration: none !important; transition: transform .2s, box-shadow .2s, background .2s; }
.v4g-btn:hover { transform: translateY(-2px); }
.v4g-btnMain, a.v4g-btnMain { background: var(--g-green); color: #fff !important; box-shadow: 0 10px 22px rgba(15,92,69,.22); }
.v4g-btnMain:hover { background: #006B45; }
.v4g-btnFinder, .v4g-btnWare { background: #fff; color: var(--g-green) !important; border: 1.5px solid #CFE3D9; }
.v4g-btnFinder:hover, .v4g-btnWare:hover { border-color: var(--g-green); }
.v4g-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* рисунок в шапке: чайник наливает воду в стеклянный чайник, листья кружатся, пар */
.v4g-art { width: 100%; max-width: 420px; justify-self: center; overflow: visible; }
.v4g-art * { transform-box: view-box; }
.v4g-art path, .v4g-art circle, .v4g-art ellipse { fill: none; stroke: #1E2421; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.v4g-ring { stroke: #E8E2D6 !important; stroke-width: 2 !important; }
.v4g-ringOn { stroke: #C9A961 !important; stroke-width: 2.5 !important; stroke-dasharray: 440; stroke-dashoffset: 440; animation: v4gRing 7s ease-in-out infinite; transform-origin: 150px 118px; transform: rotate(-90deg); }
@keyframes v4gRing { 0% { stroke-dashoffset: 440; } 60%, 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -440; } }
.v4g-kettle { transform-origin: 74px 62px; animation: v4gPour 7s ease-in-out infinite; }
@keyframes v4gPour { 0%, 8% { transform: rotate(0); } 18%, 52% { transform: rotate(16deg); } 62%, 100% { transform: rotate(0); } }
.v4g-kb { fill: #fff !important; }
.v4g-stream { stroke: #8CC4F0 !important; stroke-width: 4 !important; stroke-dasharray: 60; stroke-dashoffset: 60; animation: v4gStream 7s ease-in-out infinite; }
@keyframes v4gStream { 0%, 16% { stroke-dashoffset: 60; opacity: 1; } 24%, 50% { stroke-dashoffset: 0; opacity: 1; } 58% { stroke-dashoffset: -60; opacity: 0; } 100% { stroke-dashoffset: 60; opacity: 0; } }
.v4g-pot { fill: rgba(255,255,255,.7) !important; }
.v4g-tea { fill: #D9A441 !important; stroke: none !important; opacity: .85; transform-origin: 150px 162px; animation: v4gFill 7s ease-in-out infinite; }
@keyframes v4gFill { 0%, 18% { transform: scaleY(.15); fill: #F2D79A; } 55% { transform: scaleY(.95); fill: #E0B154; } 80%, 92% { transform: scaleY(.95); fill: #C98A2B; } 100% { transform: scaleY(.15); fill: #F2D79A; } }
.v4g-leaf { fill: #2E9E6B !important; stroke: none !important; animation: v4gLeaf 7s ease-in-out infinite; }
.v4g-l2 { animation-delay: .4s; } .v4g-l3 { animation-delay: .8s; }
@keyframes v4gLeaf { 0%, 20% { transform: translateY(18px) rotate(0); } 50% { transform: translateY(-8px) rotate(40deg); } 80% { transform: translateY(2px) rotate(-20deg); } 100% { transform: translateY(18px) rotate(0); } }
.v4g-lidK { fill: #1E2421 !important; }
.v4g-sau { stroke: #C9A961 !important; }
.v4g-puff, .v4g-st { stroke: #9AA5A0 !important; stroke-width: 2.5 !important; animation: v4gSteam 2.6s ease-out infinite; }
.v4g-p2, .v4g-s2 { animation-delay: 1.3s; }
@keyframes v4gSteam { 0% { transform: translateY(6px); opacity: 0; } 30% { opacity: .9; } 100% { transform: translateY(-14px); opacity: 0; } }

/* 5 шагов */
.v4g-stepGrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin: 0 !important; padding: 0 !important; list-style: none !important; counter-reset: none; }
.v4g-stepGrid > li { position: relative; display: flex; flex-direction: column; gap: 10px; margin: 0 !important; padding: 22px 20px 24px !important; list-style: none !important; border: 1px solid #ECE6DA; border-radius: 24px; background: #FBFAF7; opacity: 0; transform: translateY(20px); transition: transform .3s, box-shadow .3s; }
.v4g-stepGrid > li::before, .v4g-stepGrid > li::marker { content: none !important; }
.v4g-in .v4g-stepGrid > li { animation: v4gUp .7s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--i) * 110ms); }
.v4g-stepGrid > li:hover { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(15,40,32,.08); }
.v4g-n { font: 600 34px/1 var(--v4-cond), sans-serif; color: #C9A961; }
.v4g-ill { display: block; height: 86px; }
.v4g-ill svg { width: 100%; height: 100%; overflow: visible; }
.v4g-ill svg * { transform-box: view-box; fill: none; stroke: #1E2421; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.v4g-stepTxt, .v4g-stepTxt * { font: 400 15px/1.55 Inter, system-ui, sans-serif !important; color: var(--g-txt) !important; text-align: left !important; }
.v4g-stepTxt strong, .v4g-stepTxt b { display: block; margin-bottom: 4px; font: 700 16px/1.3 Inter, system-ui, sans-serif !important; color: var(--g-ink) !important; }
.v4g-stepTxt p { margin: 0 !important; }
/* анимации рисунков шагов */
.g-puff { stroke: #9AA5A0 !important; animation: v4gSteam 2.4s ease-out infinite; }
.g-pB { animation-delay: .8s; } .g-pC { animation-delay: 1.6s; }
.g-bulb { fill: #E46A4A !important; stroke: #E46A4A !important; }
.g-merc { stroke: #E46A4A !important; stroke-width: 3 !important; stroke-dasharray: 20; animation: v4gMerc 3s ease-in-out infinite; }
@keyframes v4gMerc { 0% { stroke-dashoffset: 20; } 60%, 100% { stroke-dashoffset: 0; } }
.g-spoon { transform-origin: 8px 12px; animation: v4gSpoon 3s ease-in-out infinite; }
@keyframes v4gSpoon { 0%, 100% { transform: rotate(0); } 40%, 60% { transform: rotate(14deg); } }
.g-leafD { fill: #2E9E6B !important; stroke: none !important; opacity: 0; animation: v4gDrop 3s ease-in infinite; }
.g-d2 { animation-delay: .25s; }
@keyframes v4gDrop { 0%, 45% { opacity: 0; transform: translateY(0); } 55% { opacity: 1; } 85% { opacity: 1; transform: translateY(12px); } 100% { opacity: 0; transform: translateY(14px); } }
.g-warm { stroke: #E0A526 !important; animation: v4gWave 2.4s ease-in-out infinite; }
@keyframes v4gWave { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(2px); } }
.g-track { stroke: #ECE6DA !important; stroke-width: 4 !important; }
.g-prog { stroke: #2E9E6B !important; stroke-width: 4 !important; stroke-dasharray: 126; stroke-dashoffset: 126; transform-origin: 60px 44px; transform: rotate(-90deg); animation: v4gProg 4s linear infinite; }
@keyframes v4gProg { to { stroke-dashoffset: 0; } }
.g-hand { transform-origin: 60px 44px; animation: v4gHand 4s linear infinite; }
@keyframes v4gHand { to { transform: rotate(360deg); } }
.g-pin { fill: #1E2421 !important; }
.g-lift { animation: v4gLift 3.2s ease-in-out infinite; }
@keyframes v4gLift { 0%, 20% { transform: translateY(14px); } 55%, 100% { transform: translateY(0); } }
.g-basketL { stroke: #2E9E6B !important; }
.g-drip { fill: #8CC4F0 !important; stroke: none !important; opacity: 0; animation: v4gDrip 3.2s ease-in infinite; }
.g-r2 { animation-delay: .3s; }
@keyframes v4gDrip { 0%, 55% { opacity: 0; transform: translateY(0); } 65% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }

/* таблица → карточки видов чая */
.v4g-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.v4g-card { --c: #2E9E6B; --bg: #EEF7F2; position: relative; display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: 24px; background: var(--bg); overflow: hidden; opacity: 0; transition: transform .3s, box-shadow .3s; }
.v4g-in .v4g-card { animation: v4gUp .7s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--i) * 80ms); }
.v4g-card:hover { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(15,40,32,.1); }
.v4g-card::after { content: ""; position: absolute; right: -40px; top: -40px; width: 120px; height: 120px; border-radius: 50%; background: var(--c); opacity: .1; }
.v4g-card[data-cat=black] { --c: #8A4B2A; --bg: #F7EEE8; }
.v4g-card[data-cat=green] { --c: #2E9E6B; --bg: #EEF7F2; }
.v4g-card[data-cat=white] { --c: #A8946A; --bg: #F8F5EE; }
.v4g-card[data-cat=oolong] { --c: #B8762E; --bg: #FAF1E4; }
.v4g-card[data-cat=puerh] { --c: #5B3A29; --bg: #F1ECE8; }
.v4g-card[data-cat=herbal] { --c: #7A6BB0; --bg: #F2F0F8; }
.v4g-card[data-cat=rooibos] { --c: #C2533A; --bg: #FBEDE8; }
.v4g-card header { display: flex; align-items: center; gap: 10px; }
.v4g-card header b { flex: 1; font: 700 18px/1.2 Inter, system-ui, sans-serif; color: var(--g-ink); }
.v4g-card header em { font: 600 12px/1 Inter, system-ui, sans-serif; font-style: normal; color: var(--c); background: #fff; padding: 6px 10px; border-radius: 999px; white-space: nowrap; }
.v4g-dot { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--c); }
.v4g-dot svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.v4g-card:hover .v4g-dot svg { animation: v4gSway 1.6s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes v4gSway { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
.v4g-temp { font: 600 34px/1 var(--v4-cond), sans-serif; color: var(--c); }
.v4g-temp small { display: block; margin-bottom: 4px; font: 600 11px/1 Inter, system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--g-mute); }
.v4g-card dl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.v4g-card dl > div { padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.75); }
.v4g-card dt { margin: 0 0 4px; font: 600 11px/1.2 Inter, system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--g-mute); }
.v4g-card dd { margin: 0; font: 600 14.5px/1.35 Inter, system-ui, sans-serif; color: var(--g-ink); }
.v4g-srOnly { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; }
.v4g-tip { position: relative; margin: 20px 0 0 !important; padding: 20px 22px 20px 64px !important; border-radius: 20px; background: #FBF6EA; border: 1px dashed #D9C79A; font: 400 15.5px/1.6 Inter, system-ui, sans-serif !important; color: var(--g-txt) !important; }
.v4g-tip::before { content: ""; position: absolute; left: 20px; top: 20px; width: 28px; height: 28px; background: #C9A961; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-4 10.5c.8.8 1 1.5 1 2.5h6c0-1 .2-1.7 1-2.5A6 6 0 0 0 12 3z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-4 10.5c.8.8 1 1.5 1 2.5h6c0-1 .2-1.7 1-2.5A6 6 0 0 0 12 3z'/%3E%3C/svg%3E") center / contain no-repeat; animation: v4gGlow 3s ease-in-out infinite; }
@keyframes v4gGlow { 0%, 100% { opacity: .7; } 50% { opacity: 1; transform: scale(1.08); } }

/* посуда — баннер */
.v4g-ware { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); align-items: center; gap: 24px; padding: clamp(26px, 4vw, 48px); border-radius: 32px; background: linear-gradient(135deg, #0F5C45, #1F7A5C); color: #fff; overflow: hidden; }
.v4g-ware .v4g-h2 { color: #fff !important; }
.v4g-ware p { margin: 0 0 22px !important; font: 400 16.5px/1.6 Inter, system-ui, sans-serif !important; color: rgba(255,255,255,.88) !important; }
.v4g-ware p a { color: #F2D79A !important; }
.v4g-ware .v4g-btnWare { border: 0; color: #0F5C45 !important; }
.v4g-mug { width: 100%; max-width: 220px; justify-self: center; overflow: visible; }
.v4g-mug * { transform-box: view-box; fill: none; stroke: #fff; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.v4g-mug .g-mugTea { fill: rgba(242,215,154,.35); stroke: none; }
.v4g-mug .g-inf { animation: v4gDip 3.2s ease-in-out infinite; }
@keyframes v4gDip { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(14px); } }
.v4g-mug .g-basketL { stroke: #9BE0BC !important; }
.v4g-mug .g-puff { stroke: rgba(255,255,255,.7) !important; }

/* вопросы — раскрывающиеся карточки */
.v4g-qs { display: grid; gap: 12px; }
.v4g-q { border: 1px solid #ECE6DA; border-radius: 20px; background: #FBFAF7; transition: background .2s, box-shadow .2s; }
.v4g-q[open] { background: #fff; box-shadow: 0 12px 26px rgba(15,40,32,.07); }
.v4g-q summary { position: relative; display: block; padding: 20px 60px 20px 22px; list-style: none; cursor: pointer; font: 600 17px/1.35 Inter, system-ui, sans-serif; color: var(--g-ink); }
.v4g-q summary::-webkit-details-marker { display: none; }
.v4g-q summary::after { content: ""; position: absolute; right: 20px; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%; background: #EEF3F0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F5C45' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 16px no-repeat; transition: transform .3s, background-color .2s; }
.v4g-q[open] summary::after { transform: rotate(45deg); background-color: #F3EBDB; }
.v4g-q summary:hover { color: var(--g-green); }
.v4g-a { padding: 0 22px 20px; }
.v4g-a, .v4g-a p { margin: 0 0 10px !important; font: 400 15.5px/1.6 Inter, system-ui, sans-serif !important; color: var(--g-txt) !important; }
.v4g-q[open] .v4g-a { animation: v4gUp .4s ease both; }

/* финал */
.v4g-cta { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: clamp(26px, 4vw, 44px); border-radius: 32px; background: radial-gradient(120% 160% at 100% 0%, #FBF1DF, #F6F4EF 50%, #E4F1EA); overflow: hidden; }
.v4g-ctaT { margin: 0 0 18px !important; font: 600 clamp(26px, 3vw, 38px)/1.15 var(--v4-cond), sans-serif !important; color: var(--g-ink) !important; }
.v4g-ctaTxt { position: relative; z-index: 1; }
.v4g-ctaArt { position: absolute; inset: 0; pointer-events: none; }
.v4g-ctaArt span { position: absolute; width: 22px; height: 22px; background: #2E9E6B; border-radius: 0 100% 0 100%; opacity: .5; animation: v4gFloat 7s ease-in-out infinite; }
.v4g-ctaArt span:nth-child(1) { right: 12%; top: 22%; }
.v4g-ctaArt span:nth-child(2) { right: 26%; top: 58%; width: 16px; height: 16px; background: #C9A961; animation-delay: 1.5s; }
.v4g-ctaArt span:nth-child(3) { right: 6%; top: 66%; width: 28px; height: 28px; animation-delay: 3s; }
@keyframes v4gFloat { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-14px) rotate(25deg); } }

@media (max-width: 1006px) {
  .v4g-stepGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v4g-hero, .v4g-ware { grid-template-columns: 1fr; }
  .v4g-art { max-width: 300px; order: -1; }
  .v4g-mug { max-width: 160px; }
}
@media (max-width: 640px) {
  .v4g-stepGrid { grid-template-columns: 1fr; }
  .v4g-hero { padding: 24px 20px; border-radius: 24px; }
  .v4g-btns .v4g-btn { flex: 1 1 100%; justify-content: center; }
  .v4g-ware, .v4g-cta { border-radius: 24px; padding: 24px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .v4g, .v4g * { animation: none !important; transition: none !important; }
  .v4g, .v4g-stepGrid > li, .v4g-card { opacity: 1 !important; transform: none !important; }
}
.v4g-root { max-width: none !important; width: auto !important; }
/* правки после осмотра: заголовок и ссылки на зелёном баннере — светлые; температура на карточках — компактнее */
.v4g.v4g-ware h2.v4g-h2 { color: #fff !important; }
.v4g-ware p a, .v4g-ware p a:visited { color: #F2D79A !important; text-decoration: underline !important; text-underline-offset: 3px; }
.v4g-ware p a:hover { color: #fff !important; }
.v4g-temp { font-size: 26px; line-height: 1.1; }
html.v4g-page .v4g.v4g-ware .v4g-wareTxt p a, html.v4g-page .v4g.v4g-ware .v4g-wareTxt p a * { color: #F2D79A !important; font-weight: 600 !important; text-decoration: underline !important; text-underline-offset: 3px; }
html.v4g-page .v4g.v4g-ware .v4g-wareTxt p a:hover { color: #fff !important; }
html.v4g-page .v4g a.v4g-btnMain, html.v4g-page .v4g a.v4g-btnMain:visited, html.v4g-page .v4g a.v4g-btnMain:hover { color: #fff !important; text-decoration: none !important; }
/* блок матчи на странице (18.10.2026) — тот же, что у товаров матчи; стили в v4-tovar.css */
.v4g-matcha .v4br { margin: 0; }
/* 19.10.2026, слово владельца: у блока матчи — свой заголовок раздела и строка пояснения, как у остальных разделов страницы */
.v4g.v4g-matcha .v4g-mtH { margin: 0 0 8px !important; }
.v4g.v4g-matcha .v4g-mtLead { max-width: 640px; margin: 0 0 22px !important; font: 400 17px/1.55 Inter, system-ui, sans-serif; color: #4A524D; }