/* Garant Bani V6 / Atmospheric themes.
 * Original and approved product photographs remain unchanged.
 * Decorative sky/rain layers never replace model images or interfere with controls.
 */
:root[data-theme="sun"]{
  color-scheme:light;
  --pine:#294a37;--forest:#326044;--forest2:#477657;
  --cream:#eaf4fa;--paper:#f6f9f8;--fog:#e9f3f7;--ink:#243b39;
  --line:#c9dadf;--muted:#4b6470;--accent:#efb66c;--accentHover:#ffd28b;
  --v5-page:#f7faf9;--v5-surface:#fffefb;--v5-surface-alt:#eff6f6;
  --v5-surface-soft:#edf6f8;--v5-text:#263e47;--v5-muted:#506872;
  --v5-border:#cfdee2;--v5-feature:#e8f2f6;--v5-input:#fff;
  --v5-hero-text:#1d3543;--v5-rule:#c7d9e0;
  --v5-header:rgba(247,251,253,.87);--v5-sticky:rgba(247,251,253,.92);
  --v5-ambient-bg:#e9f4fa;--v5-soft-accent:#e8f0ed;
  --v6-sky-top:#83c5ee;--v6-sky-middle:#d0ebfb;--v6-horizon:#fff5dc;
}
:root[data-theme="rain"]{
  color-scheme:dark;
  --pine:#243c59;--forest:#f1c186;--forest2:#d5a970;
  --cream:#0d2138;--paper:#0c192a;--fog:#162b42;--ink:#f4f6fc;
  --line:#344960;--muted:#c3d0df;--accent:#efbc78;--accentHover:#f7ce97;
  --v5-page:#0c192a;--v5-surface:#172a40;--v5-surface-alt:#11263b;
  --v5-surface-soft:#102237;--v5-text:#f1f5fc;--v5-muted:#becbdc;
  --v5-border:#39516b;--v5-feature:#182d45;--v5-input:#203750;
  --v5-hero-text:#f9f6f2;--v5-rule:#405570;
  --v5-header:rgba(10,25,43,.91);--v5-sticky:rgba(10,25,43,.95);
  --v5-ambient-bg:#10273e;--v5-soft-accent:#172e47;
  --v5-media-bg:#19324c;--v5-media-text:#d9e4f0;
  --v5-hero-photo:linear-gradient(145deg,#213d5d,#0e2039);
  --v6-sky-top:#142b45;--v6-sky-middle:#203b58;--v6-horizon:#385270;
  --v5-gold:#f0bd7a;--v5-gold-hover:#ffd297;
}
body{background:var(--v5-page);color:var(--v5-text)}
.header{background:var(--v5-header);border-color:var(--v5-border)}
.header .brand small,.header .primary-nav a{color:var(--v5-text)}
:root[data-theme="rain"] .header .brand-mark{background:#344d68}
:root[data-theme="rain"] .demo-rail{background:#203854;color:#f1e4d3}
:root[data-theme="rain"] .btn-dark{background:#294563;color:#f5f8fc}
:root[data-theme="rain"] .btn-dark:hover{background:#365977;color:#fff}
:root[data-theme="rain"] .preview-tab.active{background:#e7b778;color:#13263a}
:root[data-theme="rain"] .header-callback,
:root[data-theme="rain"] .catalog .btn-dark,
:root[data-theme="rain"] .mood .btn-dark,
:root[data-theme="rain"] .faq .btn-dark{background:#eeb875;color:#122339;border-color:#eeb875}
:root[data-theme="rain"] .btn-accent{background:#efbd79;color:#102239}
:root[data-theme="rain"] .btn-accent:hover{background:#ffd293}
:root[data-theme="rain"] h1 em,:root[data-theme="rain"] h2 em,:root[data-theme="rain"] h3 em{color:#f4c78d}
:root[data-theme="sun"] .hero-copy h1 em{color:#316b52}
:root[data-theme="rain"] .quiet-link,:root[data-theme="rain"] .text-link{color:#f3c58b}
:root[data-theme="rain"] .brand-mark{color:#f8fbff}
/* Atmospheric hero is a real photo paired with an intentionally synthetic sky.
   All decorative layers are below content and cannot obscure interaction. */
.hero{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(180deg,var(--v6-sky-top),var(--v6-sky-middle) 55%,var(--v6-horizon));}
:root[data-theme="sun"] .hero{
 background:
  radial-gradient(ellipse 30% 75% at 88% 1%,rgba(255,251,214,.94) 0%,rgba(255,239,171,.38) 45%,transparent 86%),
  linear-gradient(170deg,#a9d7f4 0%,#d6edfb 43%,#f5f4e7 88%,#fffaf0 100%);
}
:root[data-theme="rain"] .hero{
 background:
  radial-gradient(ellipse 64% 88% at 86% -20%,rgba(99,141,183,.19),transparent 74%),
  linear-gradient(155deg,#10253e 0%,#152f4b 42%,#0a1a2e 100%);
}
.hero::before,.hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1}
:root[data-theme="sun"] .hero::before{
 background:radial-gradient(circle at 84% 6%,rgba(255,249,198,.96) 0 4%,rgba(255,249,198,.28) 9%,transparent 28%);
 opacity:.9;
}
:root[data-theme="rain"] .hero::before{
 background:
  radial-gradient(ellipse 55% 17% at 17% 13%,rgba(86,115,150,.29),transparent 92%),
  radial-gradient(ellipse 54% 23% at 84% 23%,rgba(61,89,126,.40),transparent 95%),
  linear-gradient(90deg,rgba(7,20,36,.15),transparent 60%);
}
:root[data-theme="sun"] .hero::after{
 background:linear-gradient(to bottom,transparent 62%,rgba(248,251,247,.72) 100%);
}
:root[data-theme="rain"] .hero::after{
 background:linear-gradient(to bottom,transparent 68%,rgba(12,25,42,.65));
}
.hero>.container{position:relative;z-index:2}
.hero .hero-weather{
 background:rgba(255,255,255,.74);
 border:1px solid rgba(136,176,199,.45);
 box-shadow:0 12px 35px rgba(28,78,116,.09);
 backdrop-filter:blur(14px);
}
:root[data-theme="rain"] .hero .hero-weather{
 background:rgba(12,28,48,.80);border-color:#496583;
 box-shadow:0 12px 32px rgba(4,10,19,.30);
}
:root[data-theme="rain"] .weather-btn.active{background:#e9b676;color:#152a43}
:root[data-theme="sun"] .weather-btn.active{background:#ffe1a4;color:#24433d}
:root[data-theme="rain"] .weather-btn{color:#e7eff9}
:root[data-theme="rain"] .weather-caption{color:#d5e2f1}
:root[data-theme="sun"] .hero-copy h1,
:root[data-theme="sun"] .hero-copy .hero-lead{color:#203a47}
:root[data-theme="rain"] .hero-copy h1{color:#fbf4e9}
:root[data-theme="rain"] .hero-copy .hero-lead,
:root[data-theme="rain"] .hero-proof{color:#d3e0ee}
:root[data-theme="rain"] .hero-proof b{color:#f0c486}
:root[data-theme="rain"] .hero-proof{border-color:#3c536d}
/* CSS-generated clouds; no fabricated sauna photography. */
.weather-sky{
 position:absolute;inset:-8% -14% 0;z-index:0;overflow:hidden;
 pointer-events:none;opacity:1;
}
.weather-sky::before,.weather-sky::after{
 content:"";position:absolute;inset:0;
 background-repeat:no-repeat;
 will-change:auto;
}
:root[data-theme="sun"] .weather-sky::before{
 background-image:
   radial-gradient(ellipse 11% 7% at 16% 18%,rgba(255,255,255,.94) 0 56%,transparent 85%),
   radial-gradient(ellipse 12% 7% at 26% 20%,rgba(255,255,255,.92) 0 52%,transparent 82%),
   radial-gradient(ellipse 15% 6% at 57% 12%,rgba(255,255,255,.80) 0 54%,transparent 83%),
   radial-gradient(ellipse 9% 6% at 76% 23%,rgba(255,255,255,.79) 0 49%,transparent 78%);
 filter:blur(5px);opacity:.8;
}
:root[data-theme="sun"] .weather-sky::after{
 background-image:
   radial-gradient(ellipse 14% 5% at 35% 32%,rgba(255,255,255,.58),transparent 85%),
   radial-gradient(ellipse 20% 5% at 83% 10%,rgba(255,255,255,.50),transparent 90%);
 filter:blur(13px);
}
:root[data-theme="rain"] .weather-sky::before{
 background-image:
  radial-gradient(ellipse 24% 15% at 12% 12%,rgba(57,86,122,.43),transparent 94%),
  radial-gradient(ellipse 29% 13% at 63% 17%,rgba(85,111,146,.26),transparent 90%),
  radial-gradient(ellipse 20% 14% at 89% 31%,rgba(51,77,114,.42),transparent 90%);
 filter:blur(17px);opacity:1;
}
:root[data-theme="rain"] .weather-sky::after{
 background:linear-gradient(110deg,transparent 15%,rgba(104,138,175,.05) 45%,transparent 75%);
}
:root[data-motion="on"][data-theme="sun"] .is-scene-visible>.weather-sky::before{animation:v6-cloud-drift 52s ease-in-out infinite alternate}
:root[data-motion="on"][data-theme="sun"] .is-scene-visible>.weather-sky::after{animation:v6-cloud-drift 75s ease-in-out infinite alternate-reverse}
:root[data-motion="on"][data-theme="rain"] .is-scene-visible>.weather-sky::before{animation:v6-cloud-drift 50s ease-in-out infinite alternate}
@keyframes v6-cloud-drift{from{transform:translate3d(-1.5%,0,0)}to{transform:translate3d(4%,.8%,0)}}
/* The atmospheric windows become the 'weather journey' while scrolling.
   Scenic textures are CSS-only sky/rain, never fake photos of actual bathhouses. */
.weather-window{
 position:relative;isolation:isolate;min-height:0;overflow:hidden;
 display:flex;align-items:center;
 border-top:1px solid rgba(255,255,255,.25);
 border-bottom:1px solid rgba(255,255,255,.25);
 background:linear-gradient(180deg,var(--v6-sky-top),var(--v6-sky-middle) 60%,var(--v6-horizon));
}
:root[data-theme="sun"] .weather-window{
 background:
  radial-gradient(ellipse 15% 42% at 82% 9%,rgba(255,244,183,.80),transparent 95%),
  linear-gradient(180deg,#8cc9ec 0%,#d6effb 61%,#e4ecdf 100%);
}
:root[data-theme="rain"] .weather-window{
 background:
  radial-gradient(ellipse 74% 70% at 88% 0%,rgba(102,138,171,.18),transparent 83%),
  linear-gradient(180deg,#172e49 0%,#10263e 69%,#0b1e33 100%);
}
.weather-window>.weather-sky{z-index:0;inset:-15% -12%}
.weather-window::before{
 content:"";position:absolute;bottom:-62px;left:-5%;right:-5%;height:145px;z-index:1;
 clip-path:polygon(0 75%,8% 56%,16% 64%,27% 38%,37% 61%,48% 49%,59% 74%,67% 46%,78% 56%,91% 23%,100% 56%,100% 100%,0 100%);
 background:linear-gradient(0deg,rgba(32,66,80,.30),rgba(45,91,98,.07));
 pointer-events:none;
}
:root[data-theme="rain"] .weather-window::before{
 background:linear-gradient(0deg,rgba(8,20,39,.84),rgba(40,65,88,.39));
}
.weather-window-content{
 position:relative;z-index:3;
 padding:34px 0 42px;
 /* Width is inherited from the shared .container rail. */
 text-shadow:0 2px 20px rgba(0,0,0,.05);
}
.weather-window-content .v6-kicker{
 display:inline-flex;padding:7px 11px;align-items:center;
 background:rgba(255,255,255,.42);border:1px solid rgba(255,255,255,.47);
 border-radius:40px;font-size:11px;font-weight:750;letter-spacing:.11em;
 text-transform:uppercase;color:#285069;margin-bottom:12px;
}
.weather-window-content h2{
 color:#193f55;font:700 clamp(30px,3.8vw,53px)/1.13 var(--v5-font-display);
 max-width:720px;margin:0 0 12px;text-wrap:balance;
}
.weather-window-content p{font-size:clamp(14px,1.4vw,18px);line-height:1.5;color:#345a6f;max-width:610px;margin:0}
:root[data-theme="rain"] .weather-window-content h2{color:#fff4e9}
:root[data-theme="rain"] .weather-window-content p{color:#d1e1f2}
:root[data-theme="rain"] .weather-window-content .v6-kicker{background:rgba(17,36,58,.66);border-color:#66809b;color:#ffd69c}
.media-frame.media-ready.bundle-photo>strong,
.media-frame.media-ready.small-media .slot-name{z-index:3}
/* Harmonize surrounding sections: blue slate rain, airy sun. */
:root[data-theme="sun"] .pain,
:root[data-theme="sun"] .mood{background:#eaf5f9}
:root[data-theme="sun"] .catalog{background:linear-gradient(180deg,#f5fafa 0%,#fffefa 100%)}
:root[data-theme="sun"] .bundle-section{background:#eef5f7}
:root[data-theme="sun"] .delivery{background:#f9fbfa}
:root[data-theme="sun"] .details{background:#edf6f8}
:root[data-theme="sun"] .faq{background:#fbfcfc}
:root[data-theme="rain"] .catalog{background:#0d1e32}
:root[data-theme="rain"] .pain{background:#10263d}
:root[data-theme="rain"] .bundle-section{background:#142a41}
:root[data-theme="rain"] .mood{background:#0e2238}
:root[data-theme="rain"] .delivery{background:#11253a}
:root[data-theme="rain"] .details{background:#0d1d30}
:root[data-theme="rain"] .faq{background:#12283f}
:root[data-theme="rain"] .product-card,
:root[data-theme="rain"] .bundle-card,
:root[data-theme="rain"] .detail-card{
 background:#1a3049;border-color:#3c5671;
 box-shadow:0 15px 34px rgba(2,9,19,.20);
}
:root[data-theme="rain"] .bundle-info{background:#1a3049}
:root[data-theme="rain"] .product-body p,
:root[data-theme="rain"] .bundle-item,
:root[data-theme="rain"] .detail-card p{color:#c8d5e4}
:root[data-theme="rain"] .filter{background:#1a3049;color:#dce8f5;border-color:#415b76}
:root[data-theme="rain"] .filter.active{background:#f0bd7a;color:#0d2138}
:root[data-theme="rain"] .step{border-color:#3a506c}
:root[data-theme="rain"] .step>span,:root[data-theme="rain"] .step-icon{color:#edbd84}
:root[data-theme="rain"] .builder-section{
 background:linear-gradient(145deg,#18324b,#10243b);
}
:root[data-theme="rain"] .footer{
 background:#081829;color:#eef4fc;border-color:#314961;
}
:root[data-theme="rain"] .header,
:root[data-theme="rain"] .footer{backdrop-filter:blur(14px)}
:root[data-theme="rain"] .final-cta{
 background:
  linear-gradient(100deg,rgba(6,16,31,.92),rgba(10,27,48,.69) 74%),
  url('../media-v5/mood-evening.webp') center/cover no-repeat,#0b1e34;
}
:root[data-theme="sun"] .final-cta{
 background:
  linear-gradient(100deg,rgba(24,54,56,.86),rgba(22,66,65,.48) 80%),
  url('../media-v5/hero-sun.webp') center/cover no-repeat,#215463;
}
:root[data-theme="sun"] .media-frame:has(>.v5-photo){background:#e9f3f7}
:root[data-theme="rain"] .media-frame:has(>.v5-photo){background:#182c44}
:root[data-theme="rain"] .contact-dialog{background:#162b43;color:#f1f5fd}
:root[data-theme="rain"] .contact-dialog input,
:root[data-theme="rain"] .contact-dialog select,
:root[data-theme="rain"] .contact-dialog textarea{background:#203750;color:#f3f7fb;border-color:#516a84}
:root[data-theme="rain"] .contact-dialog input::placeholder,
:root[data-theme="rain"] .contact-dialog textarea::placeholder{color:#b7c8d9}
@media(max-width:850px){
  .weather-window{min-height:0}
  .weather-window-content{padding:34px 0 46px}
  .weather-window-content h2{font-size:clamp(28px,6vw,42px)}
}
@media(max-width:550px){
  .hero{padding-top:14px}
  .weather-window{min-height:0}
  .weather-window-content{padding:27px 0 42px}
  .weather-window-content h2{font-size:clamp(26px,7.6vw,34px)}
  .weather-window-content p{font-size:14px}
}

/* === V6.1 art direction: a quiet overcast sky BEHIND every section ===
   Rain streaks are removed entirely. The product, typography and buttons are not
   affected by motion. Final CTA composition/background intentionally unchanged. */
.site-clouds{
  position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  opacity:0;visibility:hidden;
  transform:translate3d(0,var(--v61-cloud-scroll,0px),0);
  transition:opacity .6s ease,visibility .6s;
}
:root[data-theme="rain"] .site-clouds{opacity:1;visibility:visible}
.cloud-bank{
  position:absolute;left:-35%;width:170%;height:58%;pointer-events:none;
  background-repeat:no-repeat;filter:blur(34px);will-change:auto;
}
.cloud-bank-near{
  top:-16%;
  background-image:
    radial-gradient(ellipse 27% 29% at 19% 42%,rgba(92,116,148,.23),transparent 95%),
    radial-gradient(ellipse 33% 32% at 58% 43%,rgba(111,132,162,.20),transparent 96%),
    radial-gradient(ellipse 25% 31% at 85% 36%,rgba(79,104,139,.25),transparent 94%);
}
.cloud-bank-far{
  top:39%;opacity:.75;
  background-image:
    radial-gradient(ellipse 34% 28% at 39% 41%,rgba(73,105,142,.18),transparent 94%),
    radial-gradient(ellipse 30% 27% at 81% 28%,rgba(115,134,162,.16),transparent 96%);
}
@keyframes v61-cloud-drift-near{
  from{transform:translate3d(-1.5%,0,0)}
  to{transform:translate3d(4.5%,1%,0)}
}
@keyframes v61-cloud-drift-far{
  from{transform:translate3d(3%,0,0)}
  to{transform:translate3d(-4%,1.5%,0)}
}
:root[data-theme="rain"][data-motion="on"] .cloud-bank-near{animation:v61-cloud-drift-near 92s ease-in-out infinite alternate}
:root[data-theme="rain"][data-motion="on"] .cloud-bank-far{animation:v61-cloud-drift-far 116s ease-in-out infinite alternate-reverse}
main{position:relative;z-index:1}
:root[data-theme="rain"] .hero,
:root[data-theme="rain"] .weather-window{
  background:linear-gradient(180deg,rgba(19,40,64,.84),rgba(10,26,45,.80));
}
:root[data-theme="rain"] .hero::before{opacity:.32}
:root[data-theme="rain"] .weather-sky{opacity:0}
:root[data-theme="rain"] .pain{background:rgba(16,38,61,.92)}
:root[data-theme="rain"] .catalog{background:rgba(13,30,50,.93)}
:root[data-theme="rain"] .bundle-section{background:rgba(20,42,65,.90)}
:root[data-theme="rain"] .mood{background:rgba(14,34,56,.92)}
:root[data-theme="rain"] .delivery{background:rgba(17,37,58,.92)}
:root[data-theme="rain"] .builder-section{background:linear-gradient(145deg,rgba(24,50,75,.94),rgba(16,36,59,.92))}
:root[data-theme="rain"] .details{background:rgba(13,29,48,.92)}
:root[data-theme="rain"] .faq{background:rgba(18,40,63,.92)}
:root[data-theme="rain"] .weather-window::before{opacity:.28}
:root[data-theme="rain"] .hero-image::after{content:none}
:root[data-theme="rain"] .media-frame .v5-photo{filter:none}
:root[data-theme="rain"] .weather-window-content{ text-shadow:none }
/* All viewports share the same content rail; no full-bleed text. */
.container{width:min(1200px,calc(100% - 80px))}
.section{padding-top:88px;padding-bottom:88px}
.hero{padding-top:18px;padding-bottom:62px}
.hero-proof{margin-top:30px}
.hero-copy{padding-bottom:18px}
.pain.section{padding-top:72px;padding-bottom:72px}
.mood.section,.delivery.section,.faq.section{padding-top:80px;padding-bottom:80px}
.weather-window-content{
  padding:36px 0 42px; /* width is inherited solely from .container */
}
.weather-window-content h2{font-size:clamp(30px,3vw,45px);max-width:800px;margin-bottom:12px}
.weather-window-content p{max-width:680px}
.weather-window-content .v6-kicker{margin-bottom:14px}
:root[data-theme="rain"] .weather-window{border-color:rgba(159,184,208,.11)}
:root[data-theme="rain"] .weather-window .v6-kicker{background:rgba(13,32,54,.65)}
/* A single visual treatment for the Kvadro House customer journey. */
[data-slot="catalog-kvadro-house"] .v5-photo{object-position:52% 54%}
[data-slot="bundle-comfort"] .v5-photo{object-position:55% 51%}
[data-slot="side-kvadro-house"] .v5-photo{object-position:65% 55%}
@media(max-width:850px){
  .container{width:min(680px,calc(100% - 48px))}
  .section{padding-top:70px;padding-bottom:70px}
  .pain.section,.mood.section,.delivery.section,.faq.section{padding-top:64px;padding-bottom:64px}
  .weather-window-content{padding:32px 0 38px}
  .hero{padding-top:12px;padding-bottom:48px}
  .hero-proof{margin-top:22px}
}
@media(max-width:550px){
  .container{width:calc(100% - 32px)}
  .section{padding-top:56px;padding-bottom:56px}
  .pain.section,.mood.section,.delivery.section,.faq.section{padding-top:52px;padding-bottom:52px}
  .weather-window-content{padding:28px 0 34px}
  .weather-window-content h2{font-size:clamp(26px,7.1vw,34px);line-height:1.13}
  .hero{padding-top:10px;padding-bottom:38px}
  .hero-proof{margin-top:19px}
  .cloud-bank{filter:blur(24px)}
}
@media(prefers-reduced-motion:reduce){
  .site-clouds,.cloud-bank,.weather-sky::before,.weather-sky::after{
    animation:none!important;transition:none!important;will-change:auto!important;
  }
}
:root[data-motion="off"] .cloud-bank,
:root[data-motion="off"] .weather-sky::before,
:root[data-motion="off"] .weather-sky::after{animation:none!important;will-change:auto}

/* The root already has scroll-padding-top:90px in site.css. Use only
   section scroll-margin for target positioning; otherwise anchors stop
   178px below viewport top (double sticky-header offset). */
html{scroll-padding-top:0}
/* V6.3: destination-first navigation and viewport-aware catalog.
   A navigation destination should expose model identity, indicative price
   and an actionable next step without wasted vertical space on laptops.
   On narrow phones the catalog remains scrollable; no clipped panels. */
#models,#bundle,#delivery,#builder,#faq{
  scroll-margin-top:88px;
}
.catalog.section{
  padding-top:clamp(34px,5vh,58px);
  padding-bottom:clamp(44px,6vh,72px);
}
.catalog .eyebrow{margin-bottom:10px}
.catalog .section-top{margin-bottom:17px;align-items:center}
.catalog .section-top h2{margin-bottom:8px}
.catalog .section-description{
  max-width:640px;
  line-height:1.43;
  text-wrap:pretty;
}
.catalog .catalog-filters{margin:14px 0 17px}
.catalog .product-media{aspect-ratio:1.46}
.catalog .product-body{padding:16px 18px 18px}
.catalog .product-body h3{margin-bottom:6px}
.catalog .product-body p{
  min-height:2.8em;
  line-height:1.4;
  margin-bottom:11px;
  text-wrap:pretty;
}
.catalog .product-meta{margin-bottom:12px}
.catalog .product-sizes{white-space:nowrap}
.catalog .product-card .btn{min-height:43px}
.pain-layout{
  grid-template-columns:minmax(0,1.13fr) minmax(0,.87fr);
  gap:clamp(24px,4vw,75px);
}
.editorial-keep{white-space:nowrap}
.section-top h2,.pain h2,.bundle-info h3,
.mood h2,.delivery h2,.faq h2{ text-wrap:balance }
.hero-art-note{text-wrap:pretty}

/* The same Kvadro House scene needs identical crop rules in both
   weather states; the assets themselves still require a visual
   registration check before release acceptance. */
[data-slot="catalog-kvadro-house"] .v5-photo,
[data-slot="catalog-kvadro-house-rain"] .v5-photo{object-position:52% 54%}
[data-slot="bundle-comfort"] .v5-photo,
[data-slot="bundle-comfort-rain"] .v5-photo{object-position:55% 51%}
[data-slot="side-kvadro-house"] .v5-photo,
[data-slot="side-kvadro-house-rain"] .v5-photo{object-position:65% 55%}
#heroMedia[data-slot="hero-sun-desktop"] .v5-photo,
#heroMedia[data-slot="hero-rain-desktop"] .v5-photo{object-position:center center}

@media(min-width:1100px) and (max-height:850px){
  .catalog.section{padding-top:30px;padding-bottom:44px}
  .catalog .section-top{margin-bottom:13px}
  .catalog .catalog-filters{margin:10px 0 12px}
  .catalog .product-media{aspect-ratio:1.64}
  .catalog .product-body{padding:13px 16px 15px}
  .catalog .product-body p{min-height:2.7em;margin-bottom:9px}
}
/* V6.3 laptop-height fix (not a test tolerance workaround).
   Reserve clear breathing room below EVERY catalog action after #models.
   This compact mode changes vertical rhythm, never clips a panel. */
/* V6.3: immutable SUN master plus a strictly window-masked dusk
   illumination. The roof, steps, trim, deck, and landscaping stay on
   the identical photo in both modes. No rain effect/photo replacement. */
:root[data-theme="rain"] [data-slot="hero-rain-desktop"].media-ready .v5-photo,
:root[data-theme="rain"] [data-slot="catalog-kvadro-house-rain"].media-ready .v5-photo,
:root[data-theme="rain"] [data-slot="bundle-comfort-rain"].media-ready .v5-photo,
:root[data-theme="rain"] [data-slot="side-kvadro-house-rain"].media-ready .v5-photo{
  filter:brightness(.47) saturate(.72) contrast(1.06);
}
:root[data-theme="rain"] [data-slot="hero-rain-desktop"].media-ready::before,
:root[data-theme="rain"] [data-slot="catalog-kvadro-house-rain"].media-ready::before,
:root[data-theme="rain"] [data-slot="bundle-comfort-rain"].media-ready::before,
:root[data-theme="rain"] [data-slot="side-kvadro-house-rain"].media-ready::before{
  content:"";
  display:block;
  position:absolute;inset:0;
  z-index:1;pointer-events:none;
  background:url('../media-v5/hero-rain.webp') center/cover no-repeat;
  -webkit-mask-image:radial-gradient(ellipse 30% 36% at 61% 43%,#000 28%,transparent 92%);
  mask-image:radial-gradient(ellipse 30% 36% at 61% 43%,#000 28%,transparent 92%);
  mix-blend-mode:screen;
  opacity:.83;
}
:root[data-theme="rain"] #previewImage[data-slot="catalog-kvadro-house-rain"].media-ready::before{
  background-size:contain;
}
/* Layering stays inside the photo frame; the existing bundle caption
   remains above the translucent light texture and fully interactive. */
@media(min-width:1100px) and (max-height:800px){
  .catalog.section{padding-top:20px;padding-bottom:38px}
  .catalog .section-top{margin-bottom:9px}
  .catalog .section-top h2{margin-bottom:4px}
  .catalog .section-description{font-size:15px;line-height:1.32}
  .catalog .catalog-filters{margin:9px 0 9px}
  .catalog .product-media{aspect-ratio:2.08}
  .catalog .product-body{padding:11px 15px 12px}
  .catalog .product-body h3{font-size:clamp(21px,1.9vw,25px);margin-bottom:4px}
  .catalog .product-body p{
    font-size:15px;line-height:1.32;min-height:2.64em;margin-bottom:7px
  }
  .catalog .product-meta{margin-bottom:8px}
  .catalog .product-card .btn{min-height:40px;padding:10px 12px}
}
@media(min-width:1100px) and (max-height:740px){
  .catalog.section{padding-top:16px}
  .catalog .section-top{margin-bottom:6px}
  .catalog .catalog-filters{margin:7px 0 7px}
  .catalog .product-media{aspect-ratio:2.25}
  .catalog .product-body{padding:9px 14px 10px}
}
@media(max-width:850px){
  #models,#bundle,#delivery,#builder,#faq{scroll-margin-top:78px}
  .pain-layout{grid-template-columns:minmax(0,1fr);gap:28px}
  .catalog.section{padding-top:45px;padding-bottom:54px}
  .catalog .section-top{align-items:flex-start}
  .catalog .product-media{aspect-ratio:1.4}
  .catalog .product-body p{min-height:0}
}
@media(max-width:640px){
  .editorial-keep{white-space:normal}
}
@media(max-width:550px){
  .catalog.section{padding-top:36px;padding-bottom:48px}
  .catalog .section-top{margin-bottom:13px}
  .catalog .eyebrow{margin-bottom:9px}
  .catalog .catalog-filters{margin:12px 0 14px}
  .catalog .product-media{aspect-ratio:1.55}
  .catalog .product-body{padding:15px 17px 17px}
  .catalog .product-body p{margin-bottom:10px}
}


/* V6.3 visual-review fix: at 320px, tapping the RAIN segmented control
   could programmatically scroll the hero 50+ px sideways. overflow:hidden
   clips visually but still creates a scroll container; overflow:clip does
   not. Keep both axes clipped (clouds/art), never allow a scroll offset. */
.hero{overflow:clip}

/* V6.4: owner-approved editorial differentiator, after real project details.
   Theme-aware, responsive, no scripts or artificial comparison claims. */
.difference{
  position:relative;
  background:var(--v5-ambient-bg);
  color:var(--v5-text);
  overflow:clip;
}
.difference .container{position:relative}
.difference-intro{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(28px,6vw,100px);
  align-items:end;
  padding-bottom:clamp(28px,4vw,55px);
}
.difference-heading,.difference-story{min-width:0}
.difference .eyebrow{display:block;margin-bottom:19px;color:var(--v5-muted)}
.difference h2{
  max-width:760px;
  font-size:clamp(35px,4.45vw,65px);
  line-height:1.07;
  letter-spacing:-.045em;
  text-wrap:balance;
}
.difference h2 em{color:#97703f}
:root[data-theme="rain"] .difference h2 em{color:#f0c58f}
.difference-story{font-size:clamp(16px,1.4vw,19px);line-height:1.66;color:var(--v5-muted)}
.difference-story p{margin:0 0 16px;text-wrap:pretty}
.difference-story .difference-lead{font-size:clamp(18px,1.7vw,23px);line-height:1.48;font-weight:600;color:var(--v5-text)}
.difference-experience{
  display:grid;
  grid-template-columns:110px minmax(0,1fr) minmax(0,.8fr);
  gap:clamp(18px,2.5vw,40px);
  align-items:center;
  padding:clamp(26px,4vw,48px);
  border:1px solid var(--v5-border);
  background:var(--v5-surface);
  border-radius:20px;
}
.difference-experience-number{
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(66px,8vw,106px);
  font-weight:700;
  letter-spacing:-.08em;
  line-height:1;
  color:var(--v5-gold);
}
.difference-overline,.difference-point-number{
  font-size:12px;
  line-height:1.4;
  letter-spacing:.11em;
  font-weight:700;
  color:var(--v5-muted);
}
.difference-experience h3{
  font-size:clamp(22px,2.45vw,34px);
  line-height:1.2;
  margin:10px 0 0;
  text-wrap:balance;
}
.difference-experience h3 em{color:var(--v5-gold)}
.difference-experience p{font-size:clamp(15px,1.3vw,18px);line-height:1.64;margin:0;color:var(--v5-muted)}
.difference-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin-top:16px;
}
.difference-point{
  min-width:0;
  background:var(--v5-surface);
  border:1px solid var(--v5-border);
  border-radius:16px;
  padding:clamp(20px,2.4vw,31px);
}
.difference-point-number{color:var(--v5-gold)}
.difference-point h3{
  font-size:clamp(19px,1.9vw,25px);
  line-height:1.16;
  margin:24px 0 12px;
  text-wrap:balance;
}
.difference-point p{color:var(--v5-muted);font-size:15px;line-height:1.57;margin:0;text-wrap:pretty}
.difference-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px;
  padding-top:clamp(24px,3.6vw,44px);
}
.difference-bottom p{font-size:clamp(16px,1.6vw,20px);line-height:1.52;max-width:740px;margin:0;color:var(--v5-text)}
.difference-bottom .btn{flex-shrink:0;text-align:center}
@media(max-width:1050px){
  .difference-intro{grid-template-columns:1fr;gap:14px}
  .difference h2{max-width:780px}
  .difference-story{max-width:850px}
  .difference-experience{grid-template-columns:80px minmax(0,1fr)}
  .difference-experience>p{grid-column:2}
  .difference-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:650px){
  .difference-intro{padding-bottom:24px}
  .difference h2{font-size:clamp(31px,8.3vw,43px)}
  .difference-experience{grid-template-columns:1fr;gap:10px;padding:23px 20px}
  .difference-experience-number{font-size:65px}
  .difference-experience h3{margin-top:8px}
  .difference-experience>p{grid-column:1}
  .difference-grid{grid-template-columns:1fr;gap:10px;margin-top:12px}
  .difference-point{padding:22px 20px}
  .difference-point h3{margin:13px 0 9px}
  .difference-bottom{align-items:stretch;flex-direction:column;gap:20px}
  .difference-bottom .btn{width:100%;max-width:100%}
}


/* V6.6 visual acceptance: never wrap ₽ onto its own line or clip available sizes.
   Preserve the four-card desktop geometry by stacking compact metadata within each card. */
.catalog .product-meta{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  justify-content:initial;
  align-items:start;
  gap:5px;
  min-width:0;
}
.catalog .product-price{
  white-space:nowrap;
  max-width:100%;
}
.catalog .product-sizes{
  white-space:normal;
  min-width:0;
  overflow-wrap:normal;
  line-height:1.38;
}
@media (min-width:1100px) and (max-height:900px){
  .catalog .product-meta{gap:3px;margin-bottom:8px}
  .catalog .product-sizes{font-size:12px;line-height:1.3}
}


/* V6.7 owner acceptance — product imagery must be completely visible and clickable. */
.catalog .gallery-cover{
  appearance:none;position:relative;display:block;width:100%;height:auto;min-width:0;
  padding:0;border:0;border-radius:0;background:var(--v5-media-bg,#e8f2ee);
  text-align:left;cursor:zoom-in;overflow:hidden;
  aspect-ratio:1.46;
}
.catalog .gallery-cover .v5-photo,
.catalog .gallery-cover.media-ready .v5-photo{
  object-fit:contain;object-position:center;background:var(--v5-media-bg,#e8f2ee);
}
.catalog .gallery-cover:focus-visible,
.gallery-photo-action:focus-visible,
.gallery-model-title:focus-visible,
.gallery-bundle-cover:focus-visible,
.bundle-mini-gallery button:focus-visible,
.builder-preview-image:focus-visible{
  outline:3px solid #bb8338;outline-offset:3px;
}
.catalog .gallery-cover-hint{
  display:inline-block;position:absolute;z-index:3;right:10px;bottom:10px;
  background:rgba(17,43,35,.92);color:white;border-radius:8px;
  padding:7px 10px;font:700 12px/1.25 var(--fontbody,Arial,sans-serif);
  pointer-events:none;
}
.catalog .gallery-model-title{
  appearance:none;border:0;background:none;color:inherit;font:inherit;
  padding:0;text-align:left;cursor:zoom-in;
}
.catalog .gallery-model-title:hover,.gallery-photo-action:hover{text-decoration:underline}
.catalog .product-card-actions{display:flex;flex-direction:column;gap:10px;margin-top:auto}
.catalog .gallery-photo-action{
  appearance:none;border:0;background:none;color:var(--v5-text,var(--forest));
  font:700 13px/1.4 var(--fontbody,Arial,sans-serif);
  padding:0;text-align:left;cursor:zoom-in;min-height:26px;
}
.catalog .product-card-actions .btn{width:100%}
.catalog .product-card[hidden]{display:none!important}

/* Featured bath: show the entire landscape photo first, not a vertical crop. */
.bundle-card{display:grid;grid-template-columns:minmax(0,1fr);width:100%;max-width:1200px}
.bundle-photo.gallery-bundle-cover{
  appearance:none;display:block;position:relative;cursor:zoom-in;
  width:100%;min-height:0;aspect-ratio:16/8;
  padding:0;border:0;border-radius:0;overflow:hidden;
  background:var(--v5-media-bg,#e8f2ee);text-align:left;
}
.bundle-photo.gallery-bundle-cover .v5-photo,
.bundle-photo.gallery-bundle-cover.media-ready .v5-photo{
  object-fit:contain;object-position:center;background:var(--v5-media-bg,#e8f2ee);
}
.bundle-photo.gallery-bundle-cover::after{inset:66% 0 0;pointer-events:none}
.bundle-photo.gallery-bundle-cover>strong{
  position:absolute;bottom:20px;left:26px;z-index:3;
  font-size:clamp(18px,2vw,25px);pointer-events:none;
}
.bundle-info{padding:clamp(24px,4vw,48px)}
.bundle-info h3{max-width:unset}
.bundle-list{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px 34px;margin:24px 0 28px;
}
.bundle-feature-group{min-width:0}
.bundle-feature-group h4{
  font:800 16px/1.35 var(--fontbody,Arial,sans-serif);
  color:var(--v5-text,var(--ink));margin:0 0 9px;
}
.bundle-feature-group ul{padding:0;margin:0;list-style:none}
.bundle-feature-group li{
  position:relative;padding:4px 0 4px 23px;
  color:var(--v5-text,var(--ink));font-size:14px;line-height:1.55;
}
.bundle-feature-group li::before{
  content:'✓';position:absolute;left:1px;top:4px;
  font-weight:800;color:var(--forest,#276344);
}
:root[data-theme="rain"] .bundle-feature-group li::before{color:#d4b57d}
.bundle-mini-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}
.bundle-mini-gallery button{
  display:block;appearance:none;position:relative;padding:0;border:0;
  min-width:0;overflow:hidden;cursor:zoom-in;border-radius:10px;
}
.bundle-mini-gallery button .v5-photo{object-fit:contain;background:var(--v5-media-bg,#e8f2ee)}
.builder-preview-image[data-gallery-open]{cursor:zoom-in;appearance:none;padding:0;border:0;width:100%}
.builder-preview-image[data-gallery-open] .v5-photo{object-fit:contain}

/* Delivery is a separate quoted service, not a hidden part of the kit price. */
.delivery-cost{display:flex;align-items:flex-start;flex-wrap:wrap;gap:10px 22px}
.delivery-cost>strong{font-size:clamp(18px,2.2vw,24px)}
.delivery-cost>span{flex:1 1 350px;line-height:1.6}
.delivery-cost>.btn{flex:0 0 auto}

/* Full-screen accessible gallery; thumbnails belong only to the selected bath. */
.model-gallery{
  position:fixed;inset:0;margin:auto;padding:0;
  width:min(1180px,calc(100vw - 28px));max-width:none;
  max-height:min(92dvh,920px);border:1px solid #b7c4bc;
  border-radius:16px;background:#fafbf9;color:#20352b;
  box-shadow:0 28px 100px #0008;overflow:auto;
}
.model-gallery::backdrop{background:rgba(4,17,23,.85)}
.model-gallery-shell{padding:clamp(12px,2vw,26px)}
.model-gallery-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.model-gallery-header small{display:block;font-size:11px;letter-spacing:.15em;font-weight:800;color:#54705f}
.model-gallery-header h2{font:700 clamp(24px,3vw,37px)/1.15 Georgia,serif;margin:3px 0 0;color:#1b392b}
.model-gallery-close{width:42px;height:42px;flex:0 0 42px;border:1px solid #bfcfc7;border-radius:50%;background:white;color:#263e33;font-size:29px;cursor:pointer}
.model-gallery-layout{display:grid;grid-template-columns:minmax(0,1fr) 165px;gap:17px;min-width:0}
.model-gallery-stage{
  position:relative;margin:0;border-radius:12px;overflow:hidden;
  display:flex;flex-direction:column;min-width:0;
  background:#e5eee9;
}
.model-gallery-stage>img{
  display:block;width:100%;height:min(61dvh,590px);
  object-fit:contain;object-position:center;
}
.model-gallery-stage figcaption{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 16px;background:#173829;color:#fff;font-size:14px;
}
.model-gallery-arrow{
  position:absolute;z-index:3;top:42%;transform:translateY(-50%);
  width:42px;height:52px;border:0;border-radius:9px;
  background:rgba(13,39,29,.86);color:#fff;font-size:34px;
  cursor:pointer;
}
.model-gallery-arrow.previous{left:9px}
.model-gallery-arrow.next{right:9px}
.model-gallery-thumbs{
  display:flex;flex-direction:column;gap:10px;
  max-height:min(68dvh,660px);overflow-y:auto;overscroll-behavior:contain;
}
.model-gallery-thumb{
  appearance:none;display:flex;flex-direction:column;align-items:stretch;
  padding:4px;border:2px solid transparent;border-radius:10px;
  background:#edf3ee;color:#254034;text-align:left;cursor:pointer;
  flex:0 0 auto;
}
.model-gallery-thumb.is-current{border-color:#307252;background:#fff}
.model-gallery-thumb img{
  display:block;width:100%;height:88px;object-fit:contain;background:#dde9e1;border-radius:6px;
}
.model-gallery-thumb span{font-size:12px;font-weight:700;padding:5px 4px 2px}
.model-gallery-hint{font-size:12px;color:#5b7163;margin:13px 0 0}
.model-gallery :is(button):focus-visible{outline:3px solid #c2842d;outline-offset:2px}

@media(max-width:850px){
  .bundle-photo.gallery-bundle-cover{aspect-ratio:4/3}
  .bundle-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
  .model-gallery-layout{grid-template-columns:1fr}
  .model-gallery-stage>img{height:min(52dvh,470px)}
  .model-gallery-thumbs{flex-direction:row;overflow-x:auto;overflow-y:hidden;max-height:none}
  .model-gallery-thumb{width:125px;flex:0 0 125px}
  .model-gallery-thumb img{height:74px}
}
@media(max-width:550px){
  .catalog .gallery-cover{aspect-ratio:4/3}
  .bundle-photo.gallery-bundle-cover{aspect-ratio:4/3}
  .bundle-photo.gallery-bundle-cover>strong{left:13px;bottom:10px;font-size:17px}
  .bundle-list{grid-template-columns:1fr}
  .bundle-feature-group li{font-size:14px}
  .model-gallery{width:calc(100vw - 12px);max-height:96dvh;border-radius:10px}
  .model-gallery-layout{gap:10px}
  .model-gallery-stage>img{height:min(48dvh,380px)}
  .model-gallery-arrow{width:35px;height:45px}
  .model-gallery-thumbs{gap:6px}
  .model-gallery-thumb{width:105px;flex-basis:105px}
  .model-gallery-thumb img{height:65px}
  .model-gallery-hint{display:none}
  .delivery-cost>.btn{width:100%}
}

/* V6.8 curated concept art — visual truth before quantity. */
.bundle-mini-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
.builder-preview .preview-tab:disabled{opacity:.52;cursor:not-allowed}
.difference-experience:has(.difference-overline){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.model-gallery-hint{max-width:75ch;line-height:1.5}
.model-gallery-stage>img,.model-gallery-thumb img{object-fit:contain;object-position:center}
@media(max-width:850px){
 .difference-experience:has(.difference-overline){grid-template-columns:1fr}
 .difference-experience>p{grid-column:1}
}

/* V6.9: unobtrusive image navigation in existing model gallery and configurator. */
.model-gallery-scenes{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.model-gallery-scene{border:1px solid #bccfc3;background:#fff;color:#234b38;border-radius:999px;padding:9px 16px;font:700 13px/1.15 inherit;cursor:pointer}
.model-gallery-scene.active,.model-gallery-scene[aria-pressed="true"]{background:#224a35;color:#fff;border-color:#224a35}
.builder-photo-controls{display:flex;align-items:center;justify-content:center;gap:14px;padding:9px 0 3px;color:#e5eee7}
.builder-photo-controls[hidden]{display:none}
.builder-photo-controls button{appearance:none;display:inline-grid;place-items:center;border:1px solid #a5b6ac;background:#f5f8f6;color:#173c2e;border-radius:999px;width:34px;height:34px;min-width:34px;font-size:24px;cursor:pointer}
.builder-photo-controls span{font-size:12px;font-weight:700;min-width:40px;text-align:center}
.builder-photo-controls button:focus-visible,.model-gallery-scene:focus-visible{outline:3px solid #c2842d;outline-offset:2px}
@media(max-width:550px){.model-gallery-scene{padding:9px 13px;font-size:12px}.model-gallery-scenes{gap:6px}}