/* TurboShop homepage candidate v3 — «Студія кольору · мультикадр» (09.10.2026).
   Loaded ONLY on the homepage when home_variant == 'v3', AFTER turbo-home-v2.css (shared tokens, dark header/footer skin and the
   deck). Every rule is scoped to .is-home-v3 / .h3-*; catalog, product, cart and checkout keep the existing theme.
   Direction: eight equal "frames" of the assortment first; real product photography (GlowTech exact matches or cutouts of
   store photos) on deep colour fields; motion = develop/expose like a title sequence, never blocking scroll or purchase. */

.is-home-v3 { --h3-gap: clamp(8px, .8vw, 12px); --h3-r: 22px; }
.is-home-v3 :focus-visible { outline: none; box-shadow: 0 0 0 2px var(--h-ink), 0 0 0 4px #fff; } /* the ring follows each control's own radius (pills stay pills, chips stay round) */

/* ---------- section heads ---------- */
.h3-sec-head { display: grid; gap: 8px; margin-bottom: clamp(18px, 2.4vw, 30px); }
.h3-sec-head--row { grid-template-columns: 1fr auto; align-items: end; gap: 14px 32px; }
.h3-kicker { margin: 0; display: inline-flex; align-items: center; gap: 10px; color: var(--h-mute); font: 500 .78rem/1 var(--h-ft); letter-spacing: .14em; text-transform: uppercase; }
.h3-kicker::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #ff7a55, #7d8cff, #7fe0a9); }
.h3-sec-title { margin: 0; font: 600 clamp(1.55rem, .95rem + 2.1vw, 2.9rem)/1.02 var(--h-fd); letter-spacing: -.035em; text-wrap: balance; }
.h3-sec-lead { margin: 4px 0 0; max-width: 60ch; color: var(--h-mute); font-size: .95rem; line-height: 1.5; }

/* ---------- hero: title + eight frames ---------- */
.h3-hero { padding-top: clamp(16px, 2.2vw, 30px); padding-bottom: clamp(36px, 4.5vw, 64px); }
.h3-hero__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px 32px; padding-bottom: clamp(14px, 1.8vw, 22px); }
.h3-hero__title { margin: 0; font: 600 clamp(1.6rem, .7rem + 2.75vw, 3.35rem)/1.02 var(--h-fd); letter-spacing: -.04em; text-wrap: balance; max-width: 22ch; }
.h3-word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.h3-word > span { display: inline-block; }
.h3-hero__title-tail { color: var(--h-mute); font-weight: 500; white-space: nowrap; }
.h3-hero__meta { margin: 0; display: inline-flex; align-items: center; gap: 10px; color: var(--h-mute); font-size: .875rem; text-align: right; }

.h3-mosaic { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--h3-gap); grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(212px, calc((100svh - var(--t-header-h, 96px) - 150px) / 2), 330px); }
.h3-tile { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--h3-r); color: #fff; container-type: inline-size;
  background:
    radial-gradient(120% 90% at var(--mx, 78%) var(--my, 30%), color-mix(in srgb, var(--glow) 80%, transparent) 0%, transparent 62%),
    linear-gradient(160deg, color-mix(in srgb, var(--field) 92%, #fff 8%), var(--field) 55%, color-mix(in srgb, var(--field) 70%, #000 30%));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .06); transition: box-shadow .35s var(--h-ease); }
.h3-tile::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background-image: var(--h-noise); opacity: .08; mix-blend-mode: overlay; }
.h3-tile:hover, .h3-tile:focus-within { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent), 0 24px 48px -28px color-mix(in srgb, var(--glow) 90%, #000); }
.h3-tile__link { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(14px, 1.5vw, 22px); text-decoration: none; color: inherit; border-radius: var(--h3-r); }
.h3-tile__link:focus-visible { box-shadow: inset 0 0 0 3px #fff; }
.h3-tile__n { position: absolute; left: clamp(14px, 1.5vw, 22px); top: clamp(12px, 1.3vw, 18px); font: 500 .74rem/1 var(--h-ft); letter-spacing: .12em; color: var(--accent); font-variant-numeric: tabular-nums; }
.h3-tile__title { margin: 0; max-width: 62%; font: 600 clamp(1.05rem, .55rem + 1.25vw, 1.75rem)/1.02 var(--h-fd); letter-spacing: -.035em; text-wrap: balance; text-shadow: 0 2px 18px rgb(0 0 0 / .35); }
.h3-tile__meta { margin-top: 8px; font-size: .84rem; color: rgb(255 255 255 / .86); }
.h3-tile__brands { margin-top: 3px; max-width: 70%; font-size: .74rem; color: rgb(255 255 255 / .66); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h3-tile__sub { position: absolute; z-index: 4; top: clamp(8px, 1vw, 12px); right: clamp(8px, 1vw, 12px); left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; max-width: 70%; margin: 0; padding: 0; list-style: none; opacity: 0; transform: translateY(-4px); transition: opacity .3s var(--h-ease), transform .35s var(--h-ease); }
.h3-tile:hover .h3-tile__sub, .h3-tile:focus-within .h3-tile__sub { opacity: 1; transform: none; }
.h3-tile__sub a { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px; border-radius: 999px; background: rgb(10 10 14 / .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; text-decoration: none; font-size: .74rem; }
.h3-tile__sub a span { color: rgb(255 255 255 / .62); }
.h3-tile__sub a:hover { background: #fff; color: var(--h-ink); }
.h3-tile__sub a:hover span { color: var(--h-dim); }
.h3-tile__media { position: absolute; z-index: 1; right: -2%; top: 9%; bottom: 7%; width: 60%; pointer-events: none; }
.h3-tile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; filter: drop-shadow(0 22px 22px rgb(0 0 0 / .45)); opacity: 0; transform: translateY(14px) scale(.96); transition: opacity .55s var(--h-ease), transform .8s var(--h-spring); }
.h3-tile__img.is-on { opacity: 1; transform: none; }
.h3-tile:hover .h3-tile__img.is-on, .h3-tile:focus-within .h3-tile__img.is-on { transform: translateY(-6px) scale(1.05) rotate(-1.5deg); }

/* develop-on-load: frames expose bottom→top in sequence, products settle, headline words rise (CSS only; content exists without JS) */
@media (prefers-reduced-motion: no-preference) {
  .h3-tile { animation: h3-expose .9s var(--h-ease) both; animation-delay: calc(var(--i) * 70ms + 80ms); }
  .h3-tile__img.is-on { animation: h3-settle 1.05s var(--h-spring) both; animation-delay: calc(var(--i) * 70ms + 260ms); }
  .h3-word > span { animation: h3-rise .8s var(--h-ease) both; animation-delay: calc(var(--w) * 60ms); }
  .h3-hero__title-tail, .h3-hero__meta { animation: h3-fade .8s var(--h-ease) both; animation-delay: .42s; }
}
@keyframes h3-expose { from { clip-path: inset(100% 0 0 0 round var(--h3-r)); } to { clip-path: inset(0 0 0 0 round var(--h3-r)); } }
@keyframes h3-settle { from { opacity: 0; transform: translateY(36px) scale(.9); filter: drop-shadow(0 22px 22px rgb(0 0 0 / .45)); } to { opacity: 1; transform: none; filter: drop-shadow(0 22px 22px rgb(0 0 0 / .45)); } }
@keyframes h3-rise { from { transform: translateY(105%); } to { transform: none; } }
@keyframes h3-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- studio (deck from v2, re-headed) ---------- */
.h3-studio { padding-block: clamp(36px, 4.5vw, 72px) clamp(28px, 3vw, 48px); border-top: 1px solid var(--h-line); }
.h3-studio .h2-panel__eyebrow span:last-child { color: rgb(255 255 255 / .82); }
.h3-studio .h2-stage__img { filter: drop-shadow(0 30px 30px rgb(0 0 0 / .45)); }

/* ---------- scenes ---------- */
.h3-scenes { padding-block: clamp(40px, 5vw, 84px); }
.h3-scenes__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--h3-gap); }
.h3-scene { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: clamp(360px, 30vw, 460px); border-radius: var(--h3-r); color: #fff;
  background: radial-gradient(90% 80% at 22% 40%, color-mix(in srgb, var(--glow) 85%, transparent), transparent 70%), linear-gradient(150deg, var(--field), color-mix(in srgb, var(--field) 65%, #000 35%));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .06); }
.h3-scene::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background-image: var(--h-noise); opacity: .08; mix-blend-mode: overlay; }
.h3-scene__stage { position: relative; min-height: 220px; }
.h3-scene__stage::before { content: ""; position: absolute; left: 10%; right: 10%; bottom: 9%; height: 16%; border-radius: 50%; background: radial-gradient(closest-side, rgb(0 0 0 / .5), transparent); }
.h3-scene__img { position: absolute; object-fit: contain; filter: drop-shadow(0 24px 22px rgb(0 0 0 / .5)); }
.h3-scene__img--1 { left: 6%; bottom: 12%; width: 58%; height: 72%; z-index: 2; object-position: center bottom; }
.h3-scene__img--2 { right: 2%; top: 8%; width: 44%; height: 52%; z-index: 1; object-position: center top; opacity: .96; }
.h3-scene__img--3 { right: 8%; bottom: 8%; width: 34%; height: 38%; z-index: 3; object-position: center bottom; }
.h3-scene__copy { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 10px; padding: clamp(18px, 2.2vw, 32px); }
.h3-scene__title { margin: 0; font: 600 clamp(1.3rem, .8rem + 1.2vw, 1.9rem)/1.04 var(--h-fd); letter-spacing: -.03em; text-wrap: balance; }
.h3-scene__lead { margin: 0; color: rgb(255 255 255 / .78); font-size: .9rem; line-height: 1.45; }
.h3-scene__items { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.h3-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 4px 12px; padding: 8px 8px 8px 12px; border-radius: 14px; background: rgb(10 10 14 / .32); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.h3-item__name { color: #fff; text-decoration: none; font-size: .84rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.h3-item__name:hover { text-decoration: underline; text-underline-offset: 3px; }
.h3-item__price { font: 600 .9rem/1 var(--h-fd); letter-spacing: -.02em; white-space: nowrap; }
.h3-item__buy, .h3-card__buy { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #fff; color: var(--h-ink); cursor: pointer; transition: transform .25s var(--h-spring), background .2s; }
.h3-item__buy svg, .h3-card__buy svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.h3-item__buy:hover, .h3-card__buy:hover { transform: scale(1.06); background: var(--accent); }
.h3-scene__links { margin: auto 0 0; display: flex; flex-wrap: wrap; gap: 6px; padding-top: 6px; }
.h3-scene__links a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid rgb(255 255 255 / .28); color: #fff; text-decoration: none; font-size: .82rem; }
.h3-scene__links a span { color: rgb(255 255 255 / .62); }
.h3-scene__links a:hover { background: #fff; color: var(--h-ink); }
.h3-scene__links a:hover span { color: var(--h-dim); }
/* parallax depth while the scene crosses the viewport (scroll-driven, progressive; nothing is hidden) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .h3-scene__img--1 { animation: h3-depth-a linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    .h3-scene__img--2 { animation: h3-depth-b linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    .h3-scene__img--3 { animation: h3-depth-c linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  }
}
@keyframes h3-depth-a { from { transform: translateY(18px); } to { transform: translateY(-18px); } }
@keyframes h3-depth-b { from { transform: translateY(-14px) scale(.97); } to { transform: translateY(14px) scale(1); } }
@keyframes h3-depth-c { from { transform: translateY(34px) rotate(2deg); } to { transform: translateY(-26px) rotate(-1deg); } }

/* ---------- shelf ---------- */
.h3-shelf { padding-block: clamp(36px, 4.5vw, 72px); border-top: 1px solid var(--h-line); }
.h3-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--h3-gap); grid-template-columns: repeat(6, minmax(0, 1fr)); }
.h3-card { position: relative; display: grid; grid-template-rows: auto auto auto 1fr; gap: 4px; padding: 10px 10px 12px; border-radius: 18px; color: #fff;
  background: linear-gradient(170deg, color-mix(in srgb, var(--field) 92%, #fff 8%), var(--field) 60%, color-mix(in srgb, var(--field) 80%, #000)); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .06); }
.h3-card__media { display: grid; place-items: center; aspect-ratio: 1 / 1; margin-bottom: 6px; border-radius: 12px; }
.h3-card__media img { width: 86%; height: 86%; object-fit: contain; filter: drop-shadow(0 14px 14px rgb(0 0 0 / .4)); transition: transform .5s var(--h-spring); }
.h3-card--photo .h3-card__media { background: #fff; }
.h3-card--photo .h3-card__media img { filter: none; }
.h3-card:hover .h3-card__media img { transform: translateY(-4px) scale(1.04); }
.h3-card__brand { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: rgb(255 255 255 / .64); }
.h3-card__name { margin: 0; font: 500 .84rem/1.3 var(--h-ft); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.h3-card__name a { color: inherit; text-decoration: none; }
.h3-card__name a::after { content: ""; position: absolute; inset: 0; border-radius: 18px; }
.h3-card__name a:focus-visible { box-shadow: none; }
.h3-card__name a:focus-visible::after { box-shadow: inset 0 0 0 3px #fff; }
.h3-card__price { align-self: end; font: 600 1rem/1 var(--h-fd); letter-spacing: -.02em; padding-top: 8px; }
.h3-card__buy { position: absolute; z-index: 1; right: 10px; bottom: 10px; width: auto; height: 40px; grid-auto-flow: column; gap: 6px; padding: 0 14px; border-radius: 999px; font: 600 .8rem/1 var(--h-ft); }
.h3-card__buy svg { width: 17px; height: 17px; }
@media (prefers-reduced-motion: no-preference) {
  .h3-shelf__panel.is-in .h3-card { animation: h3-card .55s var(--h-ease) both; animation-delay: calc(var(--n, 0) * 30ms); }
}
@keyframes h3-card { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- facts + brands ---------- */
.h3-facts { padding-block: 0 clamp(36px, 4vw, 64px); }
.h3-brands { padding-block: clamp(36px, 4vw, 64px) clamp(48px, 6vw, 90px); border-top: 1px solid var(--h-line); }
.h3-brands__title { margin: 0 0 clamp(16px, 2vw, 26px); font: 600 clamp(1.3rem, .9rem + 1.2vw, 2rem)/1.05 var(--h-fd); letter-spacing: -.03em; }
.h3-brands__list { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 28px; }
.h3-brands__list div { display: grid; gap: 6px; align-content: start; padding-top: 12px; border-top: 1px solid var(--h-line); }
.h3-brands__list dt { color: var(--h-mute); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; }
.h3-brands__list dd { margin: 0; display: flex; flex-wrap: wrap; gap: 2px 14px; }
.h3-brands__list a, .h3-brands__list span { color: #fff; text-decoration: none; font: 500 1.02rem/1.5 var(--h-fd); letter-spacing: -.02em; }
.h3-brands__list a:hover { color: var(--h-mute); }
.h3-brands__all { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; color: #fff; text-decoration: none; font-weight: 500; border-bottom: 1px solid rgb(255 255 255 / .35); padding-bottom: 2px; }
.h3-brands__all svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }

/* ---------- responsive ---------- */
@media (max-width: 1279px) {
  .h3-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .h3-scene { grid-template-columns: 1fr; }
  .h3-scene__stage { min-height: clamp(220px, 24vw, 300px); }
}
@media (max-width: 1023px) {
  .h3-hero__head { grid-template-columns: 1fr; }
  .h3-hero__meta { text-align: left; }
  .h3-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 24vw, 230px); }
  .h3-tile__sub { display: none; }
  .h3-scenes__grid { grid-template-columns: 1fr; }
  .h3-scene { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .h3-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .h3-brands__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .h3-sec-head--row { grid-template-columns: 1fr; }
  .h3-studio .h2-tabs, .h3-shelf .h2-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--h-gut)); padding-inline: var(--h-gut); scroll-padding-inline: var(--h-gut); }
  .h3-shelf .h2-tabs::-webkit-scrollbar { display: none; }
  .h3-shelf .h2-tab { flex: none; }
}
@media (max-width: 699px) {
  .h3-hero { padding-top: 10px; }
  .h3-hero__title { font-size: clamp(1.45rem, 1rem + 2.4vw, 1.9rem); max-width: none; }
  .h3-hero__title-tail { white-space: normal; }
  .h3-hero__meta { font-size: .8rem; align-items: flex-start; }
  .h3-mosaic { grid-auto-rows: clamp(148px, 44vw, 190px); }
  .h3-tile__link { padding: 12px; }
  .h3-tile__n { left: 12px; top: 11px; }
  .h3-tile__title { max-width: 100%; font-size: clamp(.98rem, .8rem + 1vw, 1.15rem); }
  .h3-tile__meta { margin-top: 4px; font-size: .74rem; }
  .h3-tile__from, .h3-tile__brands { display: none; }
  .h3-tile__media { right: -4%; top: 6%; bottom: 34%; width: 74%; }
  .h3-scene { grid-template-columns: 1fr; min-height: 0; }
  .h3-scene__stage { min-height: 210px; }
  .h3-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .h3-card__buy span { display: none; }
  .h3-card__buy { width: 40px; padding: 0; }
  .h3-brands__list { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .h3-tile, .h3-tile__img, .h3-tile__sub, .h3-card__media img, .h3-item__buy, .h3-card__buy { transition: none !important; animation: none !important; }
  .h3-tile:hover .h3-tile__img.is-on, .h3-tile:focus-within .h3-tile__img.is-on, .h3-card:hover .h3-card__media img { transform: none; }
}

/* ---------- pass 2 (09.10): both rows of frames in the first screen; product never covers the text block ---------- */
.h3-hero__title { font-size: clamp(1.5rem, .7rem + 2.1vw, 2.75rem); max-width: 26ch; }
.h3-hero__title-tail { display: block; margin-top: .18em; font-size: .5em; letter-spacing: -.02em; }
.h3-mosaic { grid-auto-rows: clamp(200px, calc((100svh - var(--t-header-h, 96px) - 196px) / 2), 320px); }
.h3-tile__title { max-width: 100%; }
.h3-tile__media { right: 3%; top: 9%; bottom: 33%; width: 68%; }
.h3-tile__img { object-position: 72% 50%; }
@media (max-width: 699px) {
  .h3-tile__media { right: 2%; top: 7%; bottom: 36%; width: 80%; }
  .h3-hero__title-tail { font-size: .62em; }
}

/* ---------- pass 3 (09.10): shelf media containment, tabs, scene items, spec scale ---------- */
.h3-mosaic { grid-auto-rows: clamp(196px, calc((100svh - var(--t-header-h, 96px) - 214px) / 2), 316px); }
.h3-card__media { position: relative; display: block; width: 100%; }
.h3-card__media img { position: absolute; inset: 7%; width: 86%; height: 86%; max-width: none; }
.h3-shelf .h2-tabs { margin-top: 6px; gap: 6px; }
.h3-shelf .h2-tab { align-items: center; min-height: 42px; padding: 0 16px; font: 600 .88rem/1 var(--h-ft); letter-spacing: 0; }
.h3-shelf .h2-tab span { font-size: .72rem; }
.h3-item { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name name" "price buy"; padding: 10px 8px 8px 12px; }
.h3-item__name { grid-area: name; }
.h3-item__price { grid-area: price; }
.h3-item__buy { grid-area: buy; width: 40px; height: 40px; }
.h3-studio .h2-specs dd { font-size: clamp(.98rem, .85rem + .35vw, 1.18rem); line-height: 1.15; }
.h3-studio .h2-specs { gap: 18px 26px; flex-wrap: wrap; }
/* price + buy share the last row in flow (long names never run under the button) */
.h3-card { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto 1fr; grid-template-areas: "media media" "brand brand" "name name" "price buy"; align-items: end; }
.h3-card__media { grid-area: media; }
.h3-card__brand { grid-area: brand; }
.h3-card__name { grid-area: name; align-self: start; }
.h3-card__price { grid-area: price; padding-top: 12px; padding-bottom: 6px; }
.h3-card__buy { grid-area: buy; position: static; margin-top: 10px; }
/* the studio is a mid-page section: the whole open panel (photo → price → «Купити») fits one viewport after scrolling to it */
.is-home-v3 .h2-deck__track { min-height: clamp(500px, calc(100svh - var(--t-header-h, 96px) - 150px), 660px); }
.h3-studio .h3-sec-head { grid-template-columns: minmax(0, 1fr) minmax(0, 46ch); align-items: end; column-gap: 40px; }
.h3-studio .h3-kicker { grid-column: 1 / -1; }
.h3-studio .h3-sec-lead { margin: 0; }
@media (max-width: 1023px) { .h3-studio .h3-sec-head { grid-template-columns: 1fr; } }
/* tablet / phone frame heights (must follow the desktop formula above): two rows = four directions in the first phone screen */
@media (max-width: 1023px) { .h3-mosaic { grid-auto-rows: clamp(150px, 24vw, 230px); } }
@media (max-width: 699px) { .h3-mosaic { grid-auto-rows: clamp(138px, 40vw, 176px); } }
@media (max-width: 380px) { .h3-tile__media { top: 6%; bottom: 44%; } }
@media (prefers-reduced-motion: reduce) { .is-home-v3 a, .is-home-v3 button { transition: none !important; } }
/* one type system on the v3 home: theme font tokens point at the home faces, so header, menus, toasts and footer match
   and the two theme webfonts are not requested on this page (header.twig skips _fonts.twig for v3) */
.is-home-v3 { --t-font-display: var(--h-fd); --t-font-text: var(--h-ft); --t-font-num: var(--h-ft); }

/* ======================= pass 4 (09.10): art-director review ======================= */
/* 1. «мультикадр» literally: the eight frames are one contact sheet — one object, hairline gutters, equal frames */
.h3-mosaic { gap: 2px; border-radius: 28px; overflow: hidden; background: rgb(255 255 255 / .1); isolation: isolate; }
.h3-tile { --h3-r: 0px; border-radius: 0; box-shadow: none; }
.h3-tile__link { border-radius: 0; }
.h3-tile:hover, .h3-tile:focus-within { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 70%, transparent); z-index: 1; }
.h3-tile__link:focus-visible { box-shadow: inset 0 0 0 3px #fff; border-radius: 0; }
/* framing of thin products: the same photo cropped onto the recognisable part, soft edge instead of a hard cut */
.h3-tile__img { object-fit: var(--fit, contain); object-position: var(--pos, 72% 50%); }
.h3-tile__img.is-fade-top { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 34%); mask-image: linear-gradient(to bottom, transparent 0, #000 34%); }
.h3-tile__img.is-fade-bottom { -webkit-mask-image: linear-gradient(to top, transparent 0, #000 34%); mask-image: linear-gradient(to top, transparent 0, #000 34%); }
/* sub-sections are always reachable on touch screens (no hover there) */
@media (hover: none) { .h3-tile__sub { opacity: 1; transform: none; } }
/* narrow frames: title never runs into the product */
@container (max-width: 210px) { .h3-tile__media { bottom: 46%; } .h3-tile__title { font-size: .96rem; } }
.h3-hero__meta--foot { display: none; }

/* 2. calmer system: no uppercase labels, no decorative kicker */
.h3-card__brand { text-transform: none; letter-spacing: 0; font-size: .74rem; }
.h3-brands__list dt { text-transform: none; letter-spacing: 0; font-size: .82rem; }
.h3-sec-title { font-size: clamp(1.45rem, .95rem + 1.7vw, 2.5rem); }

/* 3. studio: no floating cone/table — the product carries its own contact shadow */
.h3-studio .h2-stage__cone, .h3-studio .h2-stage__table { display: none; }
.h3-studio .h2-quick__item.is-on { box-shadow: inset 0 0 0 2px #fff; }

/* 4. shelf cards: name → variant (never truncated) → price → full-width «Купити»; scene items get the variant line too */
.h3-card { column-gap: 10px; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto 1fr auto; grid-template-areas: "media" "brand" "name" "var" "price" "buy"; }
.h3-card__var { grid-area: var; font-size: .76rem; color: rgb(255 255 255 / .72); }
.h3-card__price { align-self: end; padding: 10px 0 0; }
.h3-card__buy { justify-self: stretch; width: auto; height: 42px; margin-top: 10px; padding: 0 12px; }
.h3-card__buy span { display: inline; }
.h3-item__var { grid-column: 1 / -1; font-size: .74rem; color: rgb(255 255 255 / .7); margin-top: -2px; }
.h3-item__name { -webkit-line-clamp: 3; }
.h3-shelf__more { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 16px 0 0; }
.h3-shelf__more a { display: inline-flex; align-items: center; gap: 6px; color: #fff; text-decoration: none; font-weight: 500; border-bottom: 1px solid rgb(255 255 255 / .35); padding-bottom: 2px; }
.h3-shelf__more svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; }

/* 5. cart toasts on this page: only the newest is shown, one line, and on phones it sits under the header (never over «Купити») */
.is-home-v3 .t-toast:not(:last-child) { display: none; }
.is-home-v3 .t-toast__text { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 699px) { .is-home-v3 .t-toasts { top: calc(var(--t-header-h, 64px) + 8px); bottom: auto; } }

/* 6. facts: one quiet row instead of four boxes */
.h3-facts .h2-facts__list { gap: 0; }
.h3-facts .h2-facts__list li { background: none; border: 0; border-radius: 0; border-left: 1px solid var(--h-line); padding: 6px 22px; }
.h3-facts .h2-facts__list li:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 1023px) { .h3-facts .h2-facts__list li { border-left: 0; border-top: 1px solid var(--h-line); padding: 14px 0; } .h3-facts .h2-facts__list li:first-child { border-top: 0; } }

/* 7. phones: all eight directions in the first screen, one studio switcher, scenes as a swipeable strip */
@media (max-width: 699px) {
  .h3-hero { padding-top: 8px; }
  .h3-hero__head { padding-bottom: 10px; }
  .h3-hero__title { font-size: clamp(1.12rem, .78rem + 1.9vw, 1.4rem); letter-spacing: -.03em; }
  .h3-hero__meta--head { display: none; }
  .h3-hero__meta--foot { display: inline-flex; margin-top: 12px; font-size: .8rem; }
  .h3-mosaic { grid-auto-rows: clamp(128px, 36vw, 150px); border-radius: 20px; }
  .h3-studio .h2-panel:not(.is-active) { display: none; }
  .h3-scenes__grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 88%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--h-gut)); padding-inline: var(--h-gut); scroll-padding-inline: var(--h-gut); }
  .h3-scenes__grid::-webkit-scrollbar { display: none; }
  .h3-scene { scroll-snap-align: start; }
  .h3-scenes__grid:focus-visible { box-shadow: inset 0 0 0 2px #fff; }
}
/* tablets too: the quick bar is the single studio switcher (no second stack of collapsed bands) */
@media (max-width: 1023px) { .h3-studio .h2-panel:not(.is-active) { display: none; } }

/* ---------- pass 5 (09.10): the same «develop» look without hiding content from the first paint ----------
   A dark shutter slides off each frame (the frame itself is painted at once, so LCP is not delayed by the motion);
   products settle by transform only — never from opacity 0. */
@media (prefers-reduced-motion: no-preference) {
  .h3-tile { animation: none; }
  .h3-tile::before { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: var(--h-ink); transform-origin: top; animation: h3-shutter .85s var(--h-ease) both; animation-delay: calc(var(--i) * 70ms + 60ms); }
  .h3-tile__img.is-on { animation: h3-settle2 1.05s var(--h-spring) both; animation-delay: calc(var(--i) * 70ms + 220ms); }
}
@keyframes h3-shutter { from { transform: scaleY(1); } to { transform: scaleY(0); } }
@keyframes h3-settle2 { from { transform: translateY(34px) scale(.92); filter: drop-shadow(0 22px 22px rgb(0 0 0 / .45)); } to { transform: none; filter: drop-shadow(0 22px 22px rgb(0 0 0 / .45)); } }
/* (release QA 09.10: content-visibility:auto on lower sections removed — automated a11y/contrast audits read skipped content unreliably; 4/12 axe runs gave bogus colours) */

/* ======================= release QA fixes (09.10.2026) — defects only, no design change ======================= */
/* A. hero contact sheet: the hover/focus frame of the four outer-corner tiles follows the sheet's rounding
      (before: a square inset frame was clipped by the 28px sheet radius and stopped short at the corners) */
.h3-mosaic { --h3-mr: 28px; border-radius: var(--h3-mr); }
@media (max-width: 699px) { .h3-mosaic { --h3-mr: 20px; } }
.h3-mosaic > .h3-tile:first-child { border-top-left-radius: var(--h3-mr); }
@media (min-width: 1024px) {
  .h3-mosaic > .h3-tile:nth-child(4) { border-top-right-radius: var(--h3-mr); }
  .h3-mosaic > .h3-tile:nth-child(5) { border-bottom-left-radius: var(--h3-mr); }
  .h3-mosaic > .h3-tile:nth-child(8) { border-bottom-right-radius: var(--h3-mr); }
}
@media (max-width: 1023px) {
  .h3-mosaic > .h3-tile:nth-child(2) { border-top-right-radius: var(--h3-mr); }
  .h3-mosaic > .h3-tile:nth-child(7) { border-bottom-left-radius: var(--h3-mr); }
  .h3-mosaic > .h3-tile:nth-child(8) { border-bottom-right-radius: var(--h3-mr); }
}
.h3-tile__link, .h3-tile__link:focus-visible, .h3-tile::before { border-radius: inherit; }
/* C. shelf «Купити»: icon and label stay together in the full-width pill; hover lift stays inside the card padding */
.h3-card__buy { justify-content: center; }
.h3-card__buy:hover { transform: scale(1.02); }
/* D. search: one focus contour that follows the pill (before: the input's own rectangular ring sat inside the pill) */
.is-home-v3 .t-search__input:focus-visible { box-shadow: none; border-radius: 0; }
.is-home-v3 .t-header .t-search:has(.t-search__input:focus-visible) { box-shadow: 0 0 0 2px var(--h-ink), 0 0 0 4px #fff; border-color: #fff; }

/* Keep the approved header edge when legacy OCT base CSS is retained for consent UI. */
.is-home-v3 { display: block; height: auto; padding: 0; }
.is-home-v3 .t-header { border: 0; padding: 0; }

/* Care collection: separate image cells prevent products overlapping at any scroll position. */
.h3-scene--care .h3-scene__stage {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.2vw, 20px);
  padding: clamp(16px, 1.7vw, 26px);
  /* Definite height prevents intrinsic image sizes from expanding grid rows. */
  height: clamp(260px, 25vw, 340px);
  min-height: 0;
  max-height: 340px;
  align-self: center;
  overflow: hidden;
}
.h3-scene--care .h3-scene__img {
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
  object-position: center;
  animation: none;
  transform: none;
  opacity: 1;
}
.h3-scene--care .h3-scene__img--1 { grid-column: 1; grid-row: 1 / 3; }
.h3-scene--care .h3-scene__img--2 { grid-column: 2; grid-row: 1; }
.h3-scene--care .h3-scene__img--3 { grid-column: 2; grid-row: 2; }

/* A hero entrance must never replay when the next decoded photo is selected. */
.h3-tile.has-photo-cycle .h3-tile__img { animation: none !important; }

/* Brand introduction: concise headline, with the catalog still leading the page. */
.h3-hero .h3-intro{grid-template-columns:minmax(0,1fr) auto;gap:20px 48px;align-items:end;padding-top:2px;padding-bottom:26px}
.h3-intro .h3-intro__title{max-width:none;font-size:clamp(32px,3.3vw,52px);line-height:1.08;letter-spacing:-.045em;font-weight:600;text-wrap:initial}
.h3-intro__line{display:block;width:fit-content}
.h3-intro__line--accent{color:#d6ff62;display:flex;align-items:center;gap:.36em}
.h3-intro__boost{display:inline-flex;align-items:center;gap:.075em;margin-left:.03em;padding-right:.16em;height:.62em;transform:skewX(-17deg)}
.h3-intro__boost i{width:.13em;height:100%;border-radius:1px;background:currentColor}.h3-intro__boost i:nth-child(1){opacity:.22}.h3-intro__boost i:nth-child(2){opacity:.55}
.h3-intro__aside{display:flex;align-items:center;gap:30px;padding:0 0 4px 22px;border-left:1px solid #34382c}
.h3-intro__copy{margin:0;color:#b6b8ad;font:400 clamp(13px,1.05vw,16px)/1.6 var(--h-ft);letter-spacing:-.015em}
.h3-intro__arrow{width:44px;height:44px;display:grid;place-items:center;color:#d6ff62;flex:none}.h3-intro__arrow svg{display:block;width:32px;height:32px}
@media(max-width:767px){.h3-hero .h3-intro{grid-template-columns:1fr;gap:13px;padding-top:0;padding-bottom:20px}.h3-intro .h3-intro__title{font-size:clamp(29px,7.7vw,46px);line-height:1.09;letter-spacing:-.04em}.h3-intro__aside{border-left:0;padding:0;gap:16px;justify-content:space-between}.h3-intro__copy{font-size:13px;line-height:1.5}.h3-intro__copy br{display:none}.h3-intro__arrow{width:27px;height:27px}.h3-intro__arrow svg{width:24px;height:24px}}

/* Group labels stay readable without changing the approved tile composition. */
.h3-tile__meta{max-width:100%;line-height:1.4}
@media(forced-colors:active){.is-home-v3 :focus-visible{outline:2px solid CanvasText!important;outline-offset:3px}}

/* Hero finish: full purifier silhouette and smooth shadows independent of cutout pixels. */
.h3-tile__img{filter:none!important}
.h3-tile__media::before{content:"";position:absolute;left:15%;right:15%;bottom:0;height:22%;background:radial-gradient(ellipse at center,rgba(0,0,0,.20),rgba(0,0,0,0) 70%);pointer-events:none}
.h3-tile::after{opacity:0}

/* Keep the full watch case inside the hero crop, including its top corners. */
.h3-tile:has(>.h3-tile__link[href="/chasy"]) .h3-tile__media{width:auto;height:58%;aspect-ratio:.9;top:9%;bottom:auto}

.h3-tile:has(>.h3-tile__link[href="/pylososy"]) .h3-tile__img[src*="3983-"]{object-position:50% 100%;padding-top:18px;box-sizing:border-box}

/* Keep transparent hero artwork above the two-line labels on narrow phones. */
@media (max-width: 699px) {
  .h3-mosaic { grid-auto-rows: 160px; }
  .h3-tile__media { top: 8px; bottom: auto; height: 64px; }
}

@media(max-width:699px){.h3-tile:has(>.h3-tile__link[href="/chasy"]) .h3-tile__media{top:8px;height:64px;bottom:auto}}