/* Montserrat is loaded non-blocking from header.php (was a render-blocking @import here). */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ─── DESIGN TOKENS ──────────────────────────────────────────── */
:root{
  --graphite:#3F4443;
  --sandstone:#C3AD8B;
  --marsala:#895961;
  --slate:#5B6770;
  --porcelain:#EEEEEE;
  --panel-bg:#F9F8F8;
  --white:#FFFFFF;
  --border:#DDD9D3;
  --text:#2A2C2B;
  --muted:#8A8680;
  --radius:6px;
  --header-h: clamp(60px, 4.323vw, 120px);  /* 83px @ 1920 */
  --footer-h: clamp(50px, 4.583vw, 88px);   /* 88px @ 1920 */
  --panel-w:  clamp(380px, 33.542vw, 780px); /* 644px @ 1920 */
  --gap-sm:   clamp(6px,  0.417vw, 12px);   /* 8px @ 1920 */
  --pad-h:    clamp(24px, 2.5vw,   64px);   /* 48px @ 1920 */
  --pad-v:    clamp(28px, 2.5vw,   64px);   /* 48px @ 1920 */
  --pad-outer:clamp(18px, 1.667vw, 48px);   /* 32px @ 1920 */
}

html,body{width:100%;height:100%;overflow:hidden;background:var(--sandstone);}
body{font-family:'Montserrat',sans-serif;color:var(--text);}

/* ─── LENIS (smooth scroll) — only active where Lenis initialises ──── */
html.lenis,html.lenis body{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto !important;}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain;}
.lenis.lenis-stopped{overflow:hidden;}
.lenis.lenis-smooth iframe{pointer-events:none;}

/* ─── PAGE TRANSITION OVERLAY (vertical wipe) ────────────────── */
.page-fade{
  position:fixed;inset:0;z-index:9999;
  background:var(--graphite);
  transform:translateY(100%);
  pointer-events:none;
  will-change:transform;
}

/* ─── HERO BACKGROUND VIDEO — hidden, replaced by CSS sandstone ── */
#hero-bg{display:none;}

/* ─── CANVAS ─────────────────────────────────────────────────── */
#main-canvas{
  position:fixed;top:0;left:0;
  width:100%;height:100%;z-index:0;
  pointer-events:none;touch-action:none;
}
@media(max-width:768px){
  #main-canvas{pointer-events:none;touch-action:none;z-index:1;}
  #main-canvas.touch-active{pointer-events:auto;}
}

/* ─── SITE HEADER ────────────────────────────────────────────── */
/* Static (in flow) over the first screen, sticky (fixed) from the second
   screen onward — .hdr-stuck is toggled by page-transition.js on every page. */
.site-header{
  position:absolute;top:0;left:0;width:100%;
  height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(20px, 3.125vw, 60px);
  background:transparent;
  z-index:200;
  transition:background 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}
.site-header.hdr-stuck{
  position:fixed;
  animation:hdrSlideDown 0.32s ease;
}
@keyframes hdrSlideDown{
  from{transform:translateY(-100%);}
  to{transform:translateY(0);}
}
/* Floating header gains a backdrop once the page is scrolled */
.site-header.hdr-scrolled{
  background:rgba(255,255,255,0.92);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 1px 0 rgba(0,0,0,0.06);
}
.site-header.hdr-theme-light.hdr-scrolled{
  background:rgba(63,68,67,0.92);
  box-shadow:0 1px 0 rgba(0,0,0,0.18);
}
.hdr-logo{
  display:flex;align-items:center;
  text-decoration:none;
  flex-shrink:0;
}

/* Обгортка для двох логотипів (темний / світлий) */
.hdr-logo-imgs{
  position:relative;
  height:clamp(28px,2.083vw,40px);
  display:inline-flex;
  align-items:center;
  flex-shrink:0;
}
.hdr-logo-img{
  height:100%;width:auto;
  display:block;
  transition:opacity 0.35s ease;
}
.hdr-logo-img--light{
  position:absolute;top:0;left:0;
  opacity:0;
}
.hdr-logo-img--dark{opacity:1;}

.hdr-logo-sep{
  width:1px;height:clamp(32px,2.5vw,48px);
  background:rgba(63,68,67,0.25); /* dark за замовчуванням */
  margin:0 clamp(10px,1.25vw,24px);
  flex-shrink:0;
  transition:background 0.35s ease;
}
.hdr-logo-tagline{
  font-family:'Montserrat',sans-serif;font-weight:600;
  font-size:clamp(12px,0.833vw,16px);line-height:100%;
  letter-spacing:-0.04em;
  color:var(--graphite); /* dark за замовчуванням */
  transition:color 0.35s ease;
}
.hdr-nav--active{opacity:0.55;pointer-events:none;}
.hdr-burger{display:none;}
#mob-menu{display:none;}

/* ─── LIGHT THEME: хедер на тёмному фоні (graphite hero) ─── */
.site-header.hdr-theme-light .hdr-logo-img--dark{opacity:0;}
.site-header.hdr-theme-light .hdr-logo-img--light{opacity:1;}
.site-header.hdr-theme-light .hdr-logo-sep{background:rgba(255,255,255,0.4);}
.site-header.hdr-theme-light .hdr-logo-tagline{color:var(--sandstone);}
.site-header.hdr-theme-light .hdr-nav a{color:var(--sandstone);}
.hdr-nav{
  display:flex;align-items:center;gap:clamp(18px, 1.667vw, 48px);
}
.hdr-nav a{
  font-family:'Montserrat',sans-serif;font-weight:700;font-size:clamp(12px, 0.729vw, 16px);
  letter-spacing:0;color:var(--graphite);text-decoration:none;text-transform:uppercase;
  transition:opacity 0.15s, color 0.35s ease;
}
.hdr-nav a:hover{opacity:0.7;}
.hdr-right{display:flex;align-items:center;gap:8px;}
.hdr-phone-btn{
  display:flex;align-items:center;justify-content:center;
  padding:clamp(12px, 0.833vw, 20px) clamp(16px, 1.25vw, 32px);
  background:var(--marsala);color:#fff;
  font-family:'Montserrat',sans-serif;font-weight:700;font-size:clamp(12px, 0.833vw, 20px);
  text-transform:uppercase;text-decoration:none;white-space:nowrap;
  transition:opacity 0.15s;
}
.hdr-phone-btn:hover{opacity:0.88;}
.hdr-cta{
  display:flex;align-items:center;justify-content:center;
  padding:clamp(12px, 0.833vw, 20px) clamp(16px, 1.25vw, 32px);
  background:var(--graphite);color:#fff;
  border:none;cursor:pointer;
  font-family:'Montserrat',sans-serif;font-weight:700;font-size:clamp(12px, 0.833vw, 20px);
  text-transform:uppercase;white-space:nowrap;
  transition:opacity 0.15s;
}
.hdr-cta:hover{opacity:0.85;}

/* ─── SITE FOOTER ────────────────────────────────────────────── */
.site-footer{
  position:fixed;bottom:0;left:0;width:100%;
  z-index:150;
}
/* ─── HERO ───────────────────────────────────────────────────── */
#hero{
  position:fixed;top:0;left:0;
  width:100%;height:100%;
  z-index:10;
  overflow:hidden;
  transition:opacity 0.5s ease,transform 0.5s ease;
}
#hero.hiding{opacity:0;transform:translateY(-16px);}

/* Title */
h1{
  font-family:'Montserrat',sans-serif;font-weight:800;
  font-size:clamp(32px,4.167vw,80px);line-height:1.2;
  letter-spacing:-0.04em;color:var(--graphite);
  text-transform:uppercase;
  animation:fadeUp 0.5s ease both;animation-delay:0.1s;
}
#hero h1{
  position:absolute;
  left:50%;transform:translateX(-50%);
  top:16.57vh;
  opacity:0;
  animation:none;
  width:clamp(320px,58.75vw,1128px);
  text-align:center;
  margin:0;
}
#hero h1.wipe-heading{align-items:center;}

/* CTA button */
.hero-cta{
  position:absolute;
  left:50%;transform:translateX(-50%);
  top:54vh;
  width:clamp(260px,32.4vw,622px);
  height:clamp(60px,11.11vh,120px);
  background:#FFFFFF;
  border:none;border-radius:170px;
  font-family:'Montserrat',sans-serif;font-weight:700;
  font-size:clamp(13px,1.042vw,20px);letter-spacing:-0.02em;
  text-transform:uppercase;color:var(--graphite);
  cursor:pointer;
  transition:background 0.2s,transform 0.15s;
  z-index:12;
}
.hero-cta:hover{background:#EDE6DA;transform:translateX(-50%) translateY(-2px);}
.hero-cta:active{transform:translateX(-50%) translateY(0);}

/* Hero subtitle */
.hero-sub{
  position:absolute;left:50%;
  top:36vh;
  width:min(90vw,640px);
  transform:translateX(-50%);
  text-align:center;
  font-family:'Montserrat',sans-serif;font-weight:600;
  font-size:clamp(14px,1.146vw,22px);line-height:1.4;letter-spacing:-0.02em;
  color:var(--graphite);
  opacity:0;
  animation:heroSubIn 0.6s ease 0.35s both;
  z-index:12;
}
/* Keep translateX(-50%) through the animation so it stays centred */
@keyframes heroSubIn{
  from{opacity:0;transform:translateX(-50%) translateY(14px);}
  to{opacity:1;transform:translateX(-50%) translateY(0);}
}

/* Feature badges */
.hero-feats{
  position:absolute;
  left:50%;transform:translateX(-50%);
  top:80vh;
  width:clamp(480px,48.7vw,935px);
  display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;
}
.hero-feat{
  display:flex;flex-direction:row;align-items:center;
  gap:clamp(8px,0.729vw,14px);
}
.hero-feat-icon{
  width:clamp(44px,4.167vw,80px);height:clamp(44px,4.167vw,80px);
  background:var(--graphite);border-radius:50%;
  flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.hero-feat-icon--text span{
  font-family:'Montserrat',sans-serif;font-weight:700;
  font-size:clamp(12px,1.25vw,24px);letter-spacing:-0.04em;
  color:var(--sandstone);
}
.hero-feat-icon svg{
  width:clamp(14px,1.667vw,32px);height:auto;
}
/* stats-icon span (від yw_stat_icon) — скидаємо фіксовані розміри всередині feat-icon */
.hero-feat-icon .stats-icon { width:auto; height:auto; }
.hero-feat-icon .stats-icon svg { width:clamp(14px,1.667vw,32px); height:auto; }
.hero-feat p{
  font-family:'Montserrat',sans-serif;font-weight:700;
  font-size:clamp(12px,1.042vw,20px);letter-spacing:-0.04em;
  color:var(--graphite);line-height:1.2;
}

/* Mobile footer strip: hidden on desktop */
.hero-mob-foot { display:none; }

/* ─── CONFIGURATOR APP ──────────────────────────────────────── */
#app{
  position:fixed;top:0;left:0;
  width:100%;height:100%;
  z-index:5;
  display:flex;flex-direction:column;
  opacity:0;pointer-events:none;
  transition:opacity 0.45s ease;
}
#app.visible{opacity:1;pointer-events:auto;}
#app.visible ~ .site-footer{opacity:1;pointer-events:auto;}

.main{
  display:flex;flex:1;
  padding-top:var(--header-h);
  padding-bottom:var(--footer-h);
  overflow:hidden;
}

/* ─── 3D VIEWPORT ───────────────────────────────────────────── */
#viewport{flex:1;position:relative;overflow:hidden;background:transparent;}
.stats-overlay{
  position:absolute;bottom:clamp(44px,4.2vw,72px);left:50%;transform:translateX(-50%);
  display:flex;flex-direction:row;align-items:baseline;
  gap:clamp(22px,2.6vw,52px);
  padding:0;background:none;border:none;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  pointer-events:none;white-space:nowrap;
}
.stat-row{
  display:inline-flex;align-items:baseline;justify-content:flex-start;
  gap:8px;padding:0;
}
.stat-row__k{
  font-family:'Montserrat',sans-serif;font-weight:500;
  font-size:10px;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--graphite);
}
.stat-row__v{
  font-family:'Montserrat',sans-serif;font-weight:500;
  font-size:12px;color:var(--graphite);letter-spacing:-0.01em;
}
.stat-row__v b{font-weight:700;font-size:15px;}
#perf-overlay{
  position:absolute;top:12px;right:12px;
  display:flex;flex-direction:column;align-items:flex-end;gap:4px;
  font-family:ui-monospace,'SF Mono','Cascadia Code','Consolas',monospace;
  font-size:12px;pointer-events:none;
}
#perf-overlay .perf-row{
  background:rgba(255,255,255,0.88);border:1px solid var(--border);
  border-radius:var(--radius);padding:4px 9px;
  display:flex;align-items:center;gap:6px;color:var(--muted);
}
#perf-overlay .perf-val{font-weight:600;color:var(--graphite);min-width:36px;text-align:right;}
#perf-overlay .perf-bar{width:60px;height:5px;background:#e0ddd8;border-radius:3px;overflow:hidden;}
#perf-overlay .perf-bar-fill{height:100%;border-radius:3px;transition:width 0.2s,background 0.2s;}
.viewport-hint{
  position:absolute;bottom:clamp(12px,1.1vw,22px);left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:clamp(16px,1.6vw,32px);
  font-size:12px;color:var(--graphite);letter-spacing:0.2px;
  font-family:'Montserrat',sans-serif;font-weight:600;
  background:none;padding:0;border:none;pointer-events:none;
}
.viewport-hint .vh-item{display:inline-flex;align-items:center;gap:6px;}
.viewport-hint .vh-item svg{color:var(--graphite);flex-shrink:0;}
.viewport-hint .vh-sep{width:1px;height:14px;background:rgba(63,68,67,0.20);}

/* ─── SIDE PANEL ─────────────────────────────────────────────── */
.panel{
  width:var(--panel-w);flex-shrink:0;
  background:var(--panel-bg);
  border:none;
  display:flex;flex-direction:column;
  overflow:hidden;
  margin:clamp(10px, 0.729vw, 20px) clamp(20px, 3.125vw, 60px) clamp(10px, 0.729vw, 20px) 0;
}

/* ─── STEP PROGRESS BAR ──────────────────────────────────────── */
.step-progress{
  position:relative;
  width:100%;height:2px;flex-shrink:0;
  background:rgba(255,255,255,0.14);
}
.step-progress__fill{
  position:absolute;left:0;top:0;height:100%;
  width:16.667%;
  background:var(--white);
  transition:width 0.55s cubic-bezier(0.65,0,0.35,1);
}

/* ─── STEP CONTENT ───────────────────────────────────────────── */
.step-content{display:none;flex-direction:column;flex:1;overflow:hidden;}
.step-content.active{display:flex;}

/* Step body: scrollable content area */
.step-body{
  flex:1;overflow-y:auto;
  display:flex;flex-direction:column;
}
.step-body::-webkit-scrollbar{width:3px;}
.step-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px;}

/* ─── PANEL TITLE ────────────────────────────────────────────── */
.panel-title{
  font-family:'Montserrat',sans-serif;font-weight:700;
  font-size:clamp(17px, 1.25vw, 30px);line-height:1.2;letter-spacing:-0.04em;
  color:var(--graphite);
  padding:var(--pad-v) var(--pad-h) 0;
  margin-bottom:0;
  flex-shrink:0;
  position:sticky;top:0;z-index:2;
  background:var(--panel-bg);
}
#app .panel-title{background:var(--graphite);}
#step-5 .panel-title{padding-bottom:4px;}

/* ─── STEP 2: accordion body scrolls internally (bounded height);
   custom/consult heads + nav stay in natural flow, always visible ── */
#step-2.step-content{overflow:hidden;}
#step-2 #acc-standard .accord-body{max-height:clamp(200px, 30vh, 380px);overflow-y:auto;}
#step-2 .panel-nav{flex-shrink:0;}

/* ─── STEP 0: DIM BOXES ─────────────────────────────────────── */
.dim-grid{
  display:flex;gap:var(--gap-sm);
  padding:clamp(14px, 1.25vw, 30px) var(--pad-h) 0;
}
.dim-box{
  flex:1;
  background:var(--porcelain);
  padding:clamp(18px, 1.458vw, 36px) clamp(10px, 0.833vw, 20px) clamp(10px, 0.833vw, 20px);
  display:flex;flex-direction:column;align-items:center;gap:clamp(18px, 1.458vw, 36px);
}
.dim-label{
  font-family:'Montserrat',sans-serif;font-weight:600;
  font-size:clamp(12px, 0.833vw, 20px);line-height:1.2;letter-spacing:-0.04em;
  text-align:center;color:var(--graphite);
}
.dim-value{
  font-family:'Montserrat',sans-serif;font-weight:600;
  font-size:clamp(24px, 1.667vw, 42px);line-height:1;letter-spacing:-0.04em;
  color:var(--graphite);
  position:relative;overflow:hidden;
  height:1.25em;width:100%;
  display:flex;align-items:center;justify-content:center;
  cursor:text;
}
.dim-slot{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  will-change:transform;
  transition:opacity 0.1s;
}
.dim-input{
  position:absolute;inset:0;
  width:100%;height:100%;
  border:none;background:transparent;
  text-align:center;
  font-family:'Montserrat',sans-serif;font-weight:600;
  font-size:inherit;letter-spacing:-0.04em;
  color:var(--graphite);
  outline:none;padding:0;
  -moz-appearance:textfield;
  display:none;
}
.dim-input::-webkit-outer-spin-button,
.dim-input::-webkit-inner-spin-button{-webkit-appearance:none;}
.dim-btns{
  display:flex;gap:var(--gap-sm);width:100%;
}
.dim-btn{
  flex:1;height:clamp(36px, 2.5vw, 60px);
  background:var(--white);border:none;
  font-size:clamp(18px, 1.146vw, 28px);color:var(--graphite);
  touch-action:manipulation;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background 0.15s;
  font-family:'Montserrat',sans-serif;font-weight:400;
}
.dim-btn:hover{background:#f0eeec;}
.dim-btn:active{background:#e8e6e3;}

/* ─── STEP 1: PACKAGE GRID ───────────────────────────────────── */
.pkg-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:var(--gap-sm);
  padding:clamp(14px, 1.25vw, 30px) var(--pad-h) clamp(10px, 1.042vw, 26px);
}
.pkg-card{
  background:var(--white);
  border:none;
  padding:clamp(10px, 0.833vw, 20px);
  cursor:pointer;
  position:relative;
  display:flex;flex-direction:column;align-items:flex-start;gap:0;
  min-height:clamp(130px, 10vw, 200px);
  box-shadow:0 2px 8px rgba(0,0,0,0.06);
  transition:transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s ease;
  will-change:transform;
}
.pkg-card:hover{transform:none;box-shadow:0 2px 8px rgba(0,0,0,0.06);}
.pkg-card.selected{
  transform:translateY(0);
  box-shadow:0 2px 8px rgba(0,0,0,0.06);
}
.pkg-check{
  position:absolute;
  top:clamp(10px, 0.833vw, 16px);
  left:clamp(10px, 0.833vw, 16px);
  width:24px;height:24px;
  background:url('../assets/images/check_icon.svg') center/cover no-repeat;
  border:none;flex-shrink:0;
  visibility:hidden;
}
.pkg-card.selected .pkg-check{visibility:visible;}
.pkg-preview{
  width:100%;flex:1;
  background:#fff;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;margin-bottom:clamp(6px, 0.521vw, 12px);
}
.pkg-preview img{
  width:100%;height:100%;
  object-fit:contain;display:block;
}
.pkg-label{
  font-family:'Montserrat',sans-serif;font-weight:600;
  font-size:clamp(13px, 0.729vw, 16px);line-height:1.3;color:var(--graphite);
  letter-spacing:-0.02em;
}

/* ─── STEP 4: DELIVERY ───────────────────────────────────────── */
.delivery-banner{
  background:#895961;
  margin:clamp(12px,1.042vw,24px) var(--pad-h) 0;
  padding:clamp(12px,1.042vw,20px);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:clamp(8px,0.625vw,12px);
  flex-shrink:0;
}
.delivery-banner__top{
  display:flex;
  align-items:center;
  gap:clamp(10px,0.833vw,16px);
}
.delivery-banner__icon{
  width:clamp(40px,3.125vw,56px);
  height:clamp(40px,3.125vw,56px);
  border-radius:50%;
  background:rgba(0,0,0,0.30);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.delivery-banner__icon svg{
  width:55%;height:55%;
}
.delivery-text{
  font-family:'Montserrat',sans-serif;font-weight:800;
  font-size:clamp(14px,1.042vw,20px);color:#fff;
  line-height:1.2;letter-spacing:-0.02em;
}
.delivery-desc{
  font-family:'Montserrat',sans-serif;font-weight:400;
  font-size:clamp(12px,0.729vw,14px);color:rgba(255,255,255,0.85);
  line-height:1.4;letter-spacing:-0.01em;
}

.config-fields{padding:clamp(16px, 1.563vw, 30px) var(--pad-h) 0;}
.config-field{margin-bottom:var(--gap-sm);}
.config-field-box{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:0;
  padding:clamp(8px, 0.625vw, 16px) clamp(10px, 0.833vw, 20px) clamp(10px, 0.729vw, 18px);
  transition:border-color 0.18s;
}
.config-field-box:focus-within{
  border-color:var(--graphite);
}
/* City dropdown — styled like a text field with a custom chevron */
.config-field-select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  cursor:pointer;
  padding-right:22px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%233F4443' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 0 center;
}
.config-field-select option{color:var(--graphite);}
/* Grey out the placeholder option until a real city is chosen */
.config-field-select:has(option[value=""]:checked){color:var(--muted);}
.config-field-box--ta{padding-bottom:8px;}
.config-field-label{
  font-family:'Montserrat',sans-serif;font-weight:600;
  font-size:clamp(12px, 0.573vw, 12px);color:var(--muted);
  margin-bottom:5px;display:block;
  letter-spacing:0.06em;text-transform:uppercase;
}
.config-field-input{
  width:100%;background-color:transparent;border:none;outline:none;
  font-family:'Montserrat',sans-serif;font-size:clamp(13px, 0.833vw, 20px);
  color:var(--graphite);line-height:1.4;
  min-height:clamp(32px, 2.083vw, 40px);
  -webkit-text-size-adjust:100%;
}
.config-field-input::placeholder{color:var(--muted);opacity:0.6;}

/* ─── STEP 3: ACCORDION ─────────────────────────────────────── */
.accord-list{
  padding:clamp(14px, 1.25vw, 30px) var(--pad-h) 0;
  display:flex;flex-direction:column;gap:0;
}
.accord-item{
  border:none;
  margin-bottom:clamp(5px,0.417vw,12px);
  background:#EEEEEE;
}
.accord-head{
  display:flex;align-items:center;gap:clamp(8px, 0.625vw, 16px);
  padding:clamp(10px, 0.833vw, 20px);
  cursor:pointer;
  user-select:none;
}
.accord-radio{
  width:20px;height:20px;border-radius:50%;
  border:2px solid var(--border);
  flex-shrink:0;
  position:relative;
  transition:border-color 0.15s;
}
.accord-radio--on{
  border-color:var(--graphite);
}
.accord-radio--on::after{
  content:'';
  position:absolute;
  inset:3px;border-radius:50%;
  background:var(--graphite);
}
.accord-label{
  flex:1;
  font-family:'Montserrat',sans-serif;font-weight:600;
  font-size:clamp(14px, 1.172vw, 18px);color:var(--graphite);
  letter-spacing:-0.02em;
}
.accord-sublabel{
  display:block;
  font-family:'Montserrat',sans-serif;font-weight:400;
  font-size:clamp(12px,0.7vw,13px);
  color:var(--muted);letter-spacing:0;
  margin-top:3px;line-height:1.3;text-transform:none;
}
.accord-chevron{
  display:flex;align-items:center;
  flex-shrink:0;
  transition:transform 0.2s ease;
}
/* Collapsed chevron rotates 180° (points down) */
.accord-item:not(.accord-open) .accord-chevron{
  transform:rotate(180deg);
}
.accord-item.accord-open .accord-chevron{
  transform:rotate(0deg);
}

.accord-body{
  display:none;
  border-top:1px solid var(--border);
  max-height:clamp(240px, 26vh, 400px);
  overflow-y:auto;
}
.accord-item.accord-open .accord-body{display:block;}

/* Discount marquee inside accordion */
.accord-marquee-wrap{
  overflow:hidden;
  background:#ff3030;
  height:clamp(14px, 1.25vw, 18px);
  display:flex;align-items:center;
}
.accord-marquee{
  display:inline-block;white-space:nowrap;
  animation:marqueeScroll 12s linear infinite;
  font-family:'Montserrat',sans-serif;font-weight:600;
  font-size:12px;letter-spacing:-0.04em;
  color:#FFFFFF;text-transform:none;
}

/* Fence style grid inside accordion */
.style-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:var(--gap-sm);padding:clamp(8px, 0.625vw, 16px);
  align-items:start;
}
.style-card{
  background:#FFFFFF;
  border:1px solid var(--border);
  padding:clamp(6px,0.521vw,16px) clamp(6px,0.521vw,16px) clamp(8px,0.625vw,12px);
  cursor:pointer;position:relative;
  display:flex;flex-direction:column;gap:0;
  transition:border-color 0.15s;
}
.style-card:hover{border-color:var(--graphite);}
.style-card.selected{border-color:var(--graphite);}
.style-check{
  position:absolute;top:8px;left:8px;z-index:2;
  width:24px;height:24px;
  background:url('../assets/images/check_icon.svg') center/cover no-repeat;
  border:none;
  visibility:hidden;
}
.style-card.selected .style-check{visibility:visible;}
.style-preview{
  width:100%;height:clamp(100px,8.333vw,155px);background:#fff;
  display:flex;align-items:flex-end;justify-content:center;
  overflow:hidden;margin-bottom:clamp(6px,0.521vw,10px);
}
.style-preview img{width:100%;height:100%;object-fit:contain;object-position:center bottom;}
.style-label{
  font-family:'Montserrat',sans-serif;font-weight:600;
  font-size:clamp(12px, 0.833vw, 16px);color:var(--graphite);
  letter-spacing:-0.04em;text-align:center;
}

/* ─── COLOR SELECTION (Step 4) ───────────────────────────────── */
.color-grid{
  display:grid;grid-template-columns:repeat(3, 1fr);
  gap:clamp(8px, 0.833vw, 16px);
  align-content:start;
  padding:clamp(14px, 1.25vw, 30px) var(--pad-h) clamp(10px, 1.042vw, 26px);
}
.color-card{
  position:relative;
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(8px, 0.729vw, 16px);
  background:var(--porcelain);
  border:2px solid transparent;border-radius:0;
  padding:clamp(14px,1.146vw,26px) clamp(8px,0.625vw,14px) clamp(10px,0.833vw,18px);
  cursor:pointer;
  transition:border-color 0.2s ease;
}
.color-card:hover{ border-color:rgba(63,68,67,0.35); }
.color-card.selected{ border-color:var(--graphite); }
.color-swatch{
  width:clamp(70px, 6.7vw, 128px);aspect-ratio:1;height:auto;
  border-radius:50%;
  border:1px solid rgba(0,0,0,0.10);
  flex-shrink:0;
}
.color-swatch--custom{
  border:none;
  background:
    radial-gradient(circle, #ffffff 0%, rgba(255,255,255,0) 62%),
    conic-gradient(from 0deg,
      #ff2d2d,#ff8a00,#ffe600,#7cff00,#00d957,#00d9c2,
      #00a2ff,#2b4cff,#9b2dff,#ff2db3,#ff2d2d);
}
.color-info{ display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center; }
.color-name{
  font-family:'Montserrat',sans-serif;font-weight:700;
  font-size:clamp(13px, 0.95vw, 18px);color:var(--graphite);letter-spacing:-0.02em;
  text-align:center;
}
.color-ral{
  font-family:'Montserrat',sans-serif;font-weight:500;
  font-size:clamp(12px, 0.7vw, 13px);
  color:var(--muted);text-align:center;line-height:1.25;
}
/* selected → dark check square, top-left (mirrors the style-step cards) */
.color-check{
  position:absolute;top:clamp(8px,0.5vw,12px);left:clamp(8px,0.5vw,12px);
  width:clamp(20px,1.25vw,26px);height:clamp(20px,1.25vw,26px);
  background:var(--graphite);
  visibility:hidden;z-index:2;
}
.color-card.selected .color-check{ visibility:visible; }
.color-card.selected .color-check::after{
  content:'';position:absolute;top:50%;left:50%;
  width:42%;height:24%;
  border-left:2px solid #fff;border-bottom:2px solid #fff;
  transform:translate(-50%,-65%) rotate(-45deg);
}

/* ─── PANEL NAV BUTTONS ─────────────────────────────────────── */
.panel-nav{
  display:flex;gap:var(--gap-sm);
  padding:clamp(14px, 1.25vw, 30px) var(--pad-h) clamp(20px, 2.083vw, 52px);
  flex-shrink:0;
}
.btn-back{
  padding:clamp(12px, 0.833vw, 20px) clamp(18px, 1.458vw, 36px);
  background:var(--panel-bg);
  border:2px solid rgba(63,68,67,0.3);
  border-radius:0;
  overflow:hidden;
  font-family:'Montserrat',sans-serif;font-weight:700;
  font-size:clamp(12px, 0.729vw, 16px);text-transform:uppercase;
  color:var(--graphite);
  cursor:pointer;white-space:nowrap;
  transition:border-color 0.15s,background 0.15s;
}
.btn-back:hover{border-color:var(--graphite);background:#f0efed;}
.btn-next{
  flex:1;
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:clamp(16px, 1.25vw, 30px);
  background:var(--graphite);color:#fff;
  border:none;border-radius:0;
  font-family:'Montserrat',sans-serif;font-weight:700;
  font-size:clamp(12px, 0.833vw, 20px);text-transform:uppercase;
  cursor:pointer;
  transition:opacity 0.15s;
}
.btn-next:hover{opacity:0.85;}
.btn-next:hover .btn-arrow{transform:translateX(4px);}
.btn-arrow{flex-shrink:0;transition:transform 0.2s ease;}
.panel-nav--single .btn-next{width:100%;flex:none;}

/* Stacked nav (last step): buttons row + policy line */
.panel-nav--col{flex-direction:column;align-items:stretch;gap:clamp(3px,0.25vw,6px);}
.panel-nav--col .panel-nav-row{display:flex;gap:var(--gap-sm);}
.form-policy{
  margin:0;text-align:center;line-height:1.4;
  font-family:'Montserrat',sans-serif;font-size:clamp(12px,0.6vw,12px);
  color:var(--muted);
}
.form-policy a{color:var(--graphite);text-decoration:underline;}
#app .form-policy{color:rgba(255,255,255,0.5);}
#app .form-policy a{color:rgba(255,255,255,0.85);}

/* ─── SUCCESS SCREEN ─────────────────────────────────────────── */
.success-screen{
  display:none;flex-direction:column;align-items:center;justify-content:center;
  flex:1;padding:clamp(24px,2.083vw,56px);text-align:center;
}
.success-screen.active{display:flex;}
.success-icon{
  font-size:clamp(32px,2.5vw,64px);color:var(--graphite);
  margin-bottom:clamp(12px,1.042vw,28px);
}
.success-title{
  font-family:'Montserrat',sans-serif;font-weight:700;
  font-size:clamp(16px,1.146vw,28px);color:var(--graphite);
  margin-bottom:clamp(8px,0.625vw,16px);
}
.success-desc{
  font-size:clamp(12px,0.729vw,18px);color:var(--muted);line-height:1.6;margin-bottom:clamp(16px,1.458vw,36px);
  max-width:clamp(220px,16.667vw,400px);
}
.btn-restart{
  padding:clamp(12px,0.833vw,22px) clamp(20px,1.667vw,44px);
  background:var(--white);border:1px solid var(--border);
  border-radius:70px;
  font-family:'Montserrat',sans-serif;font-weight:700;
  font-size:clamp(12px,0.677vw,16px);letter-spacing:clamp(0.5px,0.052vw,2px);text-transform:uppercase;
  cursor:pointer;color:var(--graphite);
  transition:border-color 0.15s;
}
.btn-restart:hover{border-color:var(--graphite);}

/* ─── CONFIGURATOR DARK THEME ─────────────────────────────────────
   Scoped to #app — only affects the configurator panel
   ──────────────────────────────────────────────────────────────── */
/* Prevent iOS double-tap zoom on all interactive elements */
#app button,#app .pkg-card,#app .accord-head,#app .style-card,#app .color-card{
  touch-action:manipulation;
}

#app{--panel-bg:var(--graphite);}
#app .panel-title{color:#fff;}
#app .dim-btn{background:var(--marsala);color:#fff;}
#app .dim-btn:hover{background:#7a4f57;}
#app .dim-btn:active{background:#6e4750;}
#app .style-card{background:#FFFFFF;border-color:rgba(255,255,255,0.12);}
#app .style-card:hover{border-color:rgba(255,255,255,0.4);}
#app .style-card.selected{border-color:rgba(255,255,255,0.8);}
#app .style-label{color:var(--graphite);}
#app .btn-back{background:transparent;border-color:#EEEEEE;color:#fff;}
#app .btn-back:hover{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.5);}
#app .btn-next{background:#fff;color:var(--graphite);}
#app .success-icon{color:var(--sandstone);}
#app .success-title{color:#fff;}
#app .success-desc{color:rgba(255,255,255,0.6);}
#app .btn-restart{background:transparent;border-color:rgba(255,255,255,0.25);color:#fff;}
#app .btn-restart:hover{border-color:rgba(255,255,255,0.5);}

/* ─── WIPE-REVEAL (заголовки) ─────────────────────────────────── */
h1.wipe-heading,
h2.wipe-heading{
  animation:none!important;
  display:flex!important;flex-direction:column;align-items:flex-start;
  opacity:0;
}
h1.wipe-heading.is-visible,
h2.wipe-heading.is-visible,
#hero h1.wipe-heading.is-visible{
  opacity:1;
}

.wipe-line{
  display:block;overflow:hidden;position:relative;
  padding:0.18em 0.12em;
  margin:-0.18em -0.12em;
}
.wipe-line-in{
  display:block;transform:translateY(140%);
}

/* Головний блок-завіса (sandstone) */
.wipe-line::before{
  content:'';position:absolute;inset:0;
  background:var(--sandstone);
  transform:translateX(-101%);z-index:2;pointer-events:none;
}
/* Акцентний блок (marsala) — повна висота рядка, 45% ширини */
.wipe-line::after{
  content:'';position:absolute;
  inset:0;width:45%;
  background:var(--marsala);
  transform:translateX(-101%);z-index:3;pointer-events:none;
}

/* Запуск по .is-visible ─────── */
.wipe-heading.is-visible .wipe-line::before{
  animation:wipeCurtain 0.72s cubic-bezier(0.77,0,0.18,1) forwards;
  animation-delay:calc(var(--i)*0.14s + 0.08s);
}
.wipe-heading.is-visible .wipe-line::after{
  animation:wipeCurtainAccent 0.66s cubic-bezier(0.77,0,0.18,1) forwards;
  animation-delay:calc(var(--i)*0.14s + 0.22s);
}
.wipe-heading.is-visible .wipe-line-in{
  animation:wipeTextUp 0.68s cubic-bezier(0.16,1,0.3,1) forwards;
  animation-delay:calc(var(--i)*0.14s + 0.44s);
}

@keyframes wipeCurtain{
  0%  {transform:translateX(-101%);}
  42% {transform:translateX(0%);}
  100%{transform:translateX(101%);}
}
@keyframes wipeCurtainAccent{
  0%  {transform:translateX(-101%);}
  42% {transform:translateX(52%);}
  100%{transform:translateX(340%);}
}
@keyframes wipeTextUp{
  from{transform:translateY(140%);}
  to  {transform:translateY(0);}
}

/* ─── ANIMATIONS ──────────────────────────────────────────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
@keyframes marqueeScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* Nav button enter/exit (step 0 ↔ 1) */
@keyframes navBackIn {
  from { max-width:0; padding-left:0; padding-right:0; opacity:0; border-left-width:0; border-right-width:0; }
  to   { max-width:200px; opacity:1; }
}
@keyframes navBackOut {
  from { max-width:200px; opacity:1; }
  to   { max-width:0; padding-left:0; padding-right:0; opacity:0; border-left-width:0; border-right-width:0; }
}
.panel-nav.nav-enter .btn-back { animation: navBackIn  0.32s cubic-bezier(0.4,0,0.2,1) both; }
.panel-nav.nav-exit  .btn-back { animation: navBackOut 0.32s cubic-bezier(0.4,0,0.2,1) both; }

/* ═══════════════════════════════════════════════════════════════
   MOBILE ≤ 768px
═══════════════════════════════════════════════════════════════ */
@media(max-width:768px){

  html,body{overflow:hidden;height:100%;}

  :root{
    --header-h:50px;
    --footer-h:0px;
  }

  #main-canvas{
    position:fixed;top:0;left:0;
    width:100%;height:100%;z-index:0;
    pointer-events:auto;
  }

  /* Header mobile */
  .site-header{
    padding:0 16px;height:50px;
    position:fixed;z-index:300;
  }
  .hdr-nav{display:none;}
  .hdr-cta{display:none !important;}
  .hdr-burger{
    display:flex;align-items:center;justify-content:center;
    width:9.231vw;height:9.231vw;
    background:var(--marsala);
    border:none;border-radius:0;
    cursor:pointer;flex-shrink:0;
  }
  /* Hide the tiny 3-line tagline on mobile to free room for the phone */
  .hdr-logo-sep,.hdr-logo-tagline{display:none;}
  /* Show a compact phone button, clearing the fixed menu square on the right */
  .hdr-phone-btn{
    display:flex !important;
    height:9.231vw;
    font-size:12px;padding:0 12px;letter-spacing:0;
    white-space:nowrap;
    margin-right:calc(9.231vw + 12px);
  }
  .hdr-cta{font-size:12px;padding:10px 14px;}

  /* Footer: hidden on mobile */
  .site-footer{display:none;}
  #app.visible ~ .site-footer{display:none;}

  /* ── Hero mobile ─────────────────────────────────────────────── */
  #hero-bg{display:none;}
  #hero{
    position:fixed;top:0;left:0;
    width:100%;height:100%;
    z-index:10;overflow:hidden;
    background:transparent; /* canvas shows through — body provides sandstone */
    transition:opacity 0.45s ease,transform 0.45s ease;
  }
  #hero.hiding{opacity:0;transform:translateY(-20px);}

  /* Use --dvh for iOS Safari viewport fix.
     Fallback to vh. Set in JS: root.style.setProperty('--dvh','Xpx') */
  :root { --dvh: 1vh; }

  /* Heading: below header, centred — pure vw for proportional scale */
  #hero h1{
    top: calc(var(--dvh) * 11);
    width: 96vw;
    font-size: 8.2vw; /* 32px at 390px, scales with viewport */
    line-height: 1.2;
  }

  /* CTA pill */
  .hero-cta{
    top: calc(var(--dvh) * 66);
    bottom: auto;
    width: min(349px, 89.5vw);
    height: 59px;
    font-size: 16px;
    border-radius: 62px;
  }
  .hero-cta:hover { transform: translateX(-50%); }

  /* Hero subtitle mobile */
  .hero-sub{
    top: calc(var(--dvh) * 45);
    width: 90vw;
    font-size: 14px;
  }

  /* Feature badges row */
  .hero-feats{
    top: calc(var(--dvh) * 80);
    bottom: auto;
    width: min(350px, 89.7vw);
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 16px;
  }
  /* Each feat: column (icon above, text below) */
  .hero-feat{
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
  .hero-feat-icon{
    width: 48px; height: 48px;
    flex-shrink: 0;
  }
  .hero-feat-icon svg { width: 19px; height: auto; }
  .hero-feat-icon--text span { font-size: 14.4px; }
  .hero-feat p{
    font-size: 12px;
    text-align: center;
    line-height: 1.2;
    margin: 0;
    letter-spacing: -0.04em;
  }

  /* ── Mobile menu: hide original burger (only on pages that have #mob-menu) ─── */
  body:has(#mob-menu) .hdr-burger { display: none !important; }
  #mob-menu { display: block; }

  /* ── #mob-menu container ──────────────────
     Closed = marsala square at top-right (same position as hdr-burger)
     Open   = large marsala panel
  ─────────────────────────────────────────── */
  #mob-menu {
    position: fixed;
    z-index: 800;
    background: var(--marsala);
    overflow: hidden;

    /* ── Closed state: button ── */
    top:    7px;
    right:  16px;
    width:  9.231vw;   /* = 36px at 390px, matches hdr-burger */
    height: 9.231vw;

    cursor: pointer;

    transition:
      top    0.48s cubic-bezier(0.16, 1, 0.3, 1),
      right  0.48s cubic-bezier(0.16, 1, 0.3, 1),
      width  0.48s cubic-bezier(0.16, 1, 0.3, 1),
      height 0.52s cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* ── Open state: full panel ── */
  #mob-menu.mm-open {
    top:    8px;
    right:  8px;
    width:  calc(100vw - 16px);
    height: min(604px, calc(var(--dvh) * 85));
    cursor: default;
  }

  /* ── Trigger icon ── */
  .mm-trigger {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.18s ease;
  }
  #mob-menu.mm-open .mm-trigger {
    opacity: 0;
    pointer-events: none;
  }

  /* ── Panel content wrapper ── */
  .mm-content {
    position: absolute;
    inset: 0;
    padding: 12px;
    display: flex;
    flex-direction: column;
    pointer-events: none;
  }
  #mob-menu.mm-content-visible .mm-content {
    pointer-events: auto;
  }

  /* ── Head row ── */
  .mm-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    height: 36px;
  }
  .mm-logo {
    display: flex;
    align-items: center;
    gap: 16px;
    text-decoration: none;
  }
  .mm-logo-img {
    height: 33px;
    width: auto;
    display: block;
  }
  .mm-logo-sep {
    width: 0;
    height: 33px;
    border-right: 0.7px solid rgba(195,173,139,0.5);
    flex-shrink: 0;
  }
  .mm-logo-tag {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 12px;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--sandstone);
  }
  .mm-close {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  /* ── Nav ── */
  .mm-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding-top: 32px;
    padding-bottom: 32px;
  }
  .mm-nav-item {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 32px;
    line-height: 1.2;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    display: block;
    text-align: center;
  }
  .mm-nav-item:hover { opacity: 0.75; }

  /* ── CTA block ── */
  .mm-cta {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .mm-phone {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 59px;
    border: 1px solid #fff;
    background: var(--marsala);
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    letter-spacing: 0;
  }
  .mm-callback {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 59px;
    background: var(--graphite);
    border: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    color: #fff;
    cursor: pointer;
    letter-spacing: 0;
    width: 100%;
  }

  /* ════════════════════════════════════════
     STAGGER ANIMATIONS
     Each element: opacity 0 + translateY(20px) → visible
  ════════════════════════════════════════ */
  .mm-logo,
  .mm-close,
  .mm-nav-item,
  .mm-phone,
  .mm-callback {
    opacity: 0;
    transform: translateY(20px);
    transition:
      opacity   0.38s ease,
      transform 0.38s ease;
  }

  /* Opening stagger — each element gets its own delay */
  #mob-menu.mm-content-visible .mm-logo {
    opacity: 1; transform: none; transition-delay: 0ms;
  }
  #mob-menu.mm-content-visible .mm-close {
    opacity: 1; transform: none; transition-delay: 60ms;
  }
  #mob-menu.mm-content-visible .mm-nav-item:nth-child(1) {
    opacity: 1; transform: none; transition-delay: 130ms;
  }
  #mob-menu.mm-content-visible .mm-nav-item:nth-child(2) {
    opacity: 1; transform: none; transition-delay: 210ms;
  }
  #mob-menu.mm-content-visible .mm-nav-item:nth-child(3) {
    opacity: 1; transform: none; transition-delay: 290ms;
  }
  #mob-menu.mm-content-visible .mm-nav-item:nth-child(4) {
    opacity: 1; transform: none; transition-delay: 370ms;
  }
  #mob-menu.mm-content-visible .mm-nav-item:nth-child(5) {
    opacity: 1; transform: none; transition-delay: 450ms;
  }
  #mob-menu.mm-content-visible .mm-phone {
    opacity: 1; transform: none; transition-delay: 530ms;
  }
  #mob-menu.mm-content-visible .mm-callback {
    opacity: 1; transform: none; transition-delay: 610ms;
  }

  /* Closing — fast uniform fade-down (override delays) */
  #mob-menu.mm-closing .mm-logo,
  #mob-menu.mm-closing .mm-close,
  #mob-menu.mm-closing .mm-nav-item,
  #mob-menu.mm-closing .mm-phone,
  #mob-menu.mm-closing .mm-callback {
    opacity: 0;
    transform: translateY(12px);
    transition-delay: 0ms !important;
    transition-duration: 0.18s !important;
  }

  /* Mobile footer strip: pinned to bottom safe-area */
  .hero-mob-foot{
    display: flex;
    position: absolute;
    bottom: env(safe-area-inset-bottom, 0px);
    left: 0; right: 0;
    height: 52px;
    padding: 0 20px;
    align-items: center;
    justify-content: space-between;
  }
  .hero-mob-foot-l{
    display: flex; flex-direction: column; gap: 4px;
  }
  .hero-mob-foot-l span{
    font-family: 'Montserrat', sans-serif;
    font-weight: 500; font-size: 10px; line-height: 1.2;
    color: rgba(63,68,67,0.6);
  }
  .hero-mob-foot-r{
    display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  }
  .hero-mob-foot-r span{
    font-family: 'Montserrat', sans-serif;
    font-weight: 500; font-size: 10px; line-height: 1.1;
    color: rgba(63,68,67,0.6);
  }
  .hero-mob-foot-r img {
    display: block;
    /* SVG fill уже #3F4443 — фильтр не нужен */
  }

  /* App mobile */
  #app{
    position:fixed;top:0;left:0;
    width:100%;height:100%;
    flex-direction:column;z-index:20;
    transition:none;pointer-events:none;opacity:0;
  }
  #app.visible{opacity:1;pointer-events:auto;}

  .main{
    flex:1;flex-direction:column;
    overflow:hidden;height:100%;
    position:relative;
    padding-top:0;padding-bottom:0;
  }

  #viewport{display:none;}
  .viewport-hint{display:none;}
  #mobile-pull-hint{display:none !important;}

  /* Panel slides up from bottom */
  .panel{
    position:absolute;bottom:0;left:0;right:0;
    width:100%;
    height:65%;
    border:none;
    border-radius:0;
    box-shadow:none;
    display:flex;flex-direction:column;overflow:hidden;
    background:var(--panel-bg);
    transform:translateY(100%);
    transition:transform 0.5s cubic-bezier(0.32,0.72,0,1);
    margin:0;
  }
  .panel::before{display:none;}
  #app.visible .panel{transform:translateY(0);}

  /* Step content mobile */
  .step-content{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;display:none;flex-direction:column;}
  .step-content.active{display:flex;}
  .step-content::-webkit-scrollbar{display:none;}

  /* Panel title mobile */
  .panel-title{font-size:4.615vw;padding:6.154vw 5.128vw 0;}

  /* Dim boxes mobile */
  .dim-grid{padding:4.103vw 5.128vw 0;gap:2.051vw;}
  .dim-box{padding:4.103vw 2.051vw 2.051vw;gap:4.103vw;}
  .dim-label{font-size:3.59vw;}
  .dim-value{font-size:6.154vw;}
  .dim-btns{gap:1.026vw;}
  .dim-btn{height:10.256vw;font-size:4.615vw;}

  /* Package grid mobile */
  .pkg-grid{padding:2.564vw 5.128vw 2.564vw;gap:2.051vw;}
  .pkg-card{min-height:110px;box-shadow:none;}
  .pkg-card:hover{transform:none;box-shadow:none;}
  .pkg-preview{flex:none;height:56px;}
  .pkg-label{font-size:3.077vw;}
  .pkg-check{width:16px;height:16px;}
  .pkg-card.selected .pkg-check::after{font-size:12px;}

  /* Delivery mobile */
  .delivery-banner{padding:12px;gap:10px;margin:4.103vw 5.128vw 0;}
  .delivery-banner__icon{width:40px;height:40px;}
  .delivery-text{font-size:4.103vw;}
  .delivery-desc{font-size:3.077vw;}
  .config-fields{padding:0 5.128vw 0;}
  #step-4 .config-fields{padding:6.154vw 5.128vw 0;}
  .config-field-label{font-size:3.077vw;}
  .config-field-input{font-size:3.846vw;min-height:11.282vw;}

  /* Accordion mobile */
  .accord-list{padding:2.564vw 5.128vw 0;}
  .accord-head{padding:2.564vw 3.077vw;}
  .accord-label{font-size:3.590vw;}
  .style-grid{
    display:flex;flex-direction:row;flex-wrap:nowrap;
    gap:1.026vw;padding:2.051vw 4.103vw;
    overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .style-grid::-webkit-scrollbar{display:none;}

  /* Reset desktop flex-fill for step-2 on mobile */
  #step-2 .step-body{overflow-y:auto;}
  #step-2 .accord-list{flex:none;overflow:visible;}
  #step-2 #acc-standard.accord-open{flex:none;}
  #step-2 #acc-standard .accord-body{flex:none;overflow:hidden;max-height:none;}

  .style-card{
    flex:0 0 39.744vw;width:39.744vw;
    min-height:auto;
    padding:2.051vw;
  }
  .style-preview{height:24.615vw;}
  .style-label{font-size:3.077vw;margin-top:1.026vw;}
  .style-check{width:3.923vw;height:3.923vw;top:1.026vw;left:1.026vw;}

  /* Config fields mobile */
  .config-field-box{padding:2.051vw 3.077vw 2.564vw;}

  /* Nav buttons mobile */
  .panel-nav{padding:3.077vw 5.128vw;gap:1.538vw;align-items:flex-start;}
  .btn-back{padding:4.051vw 4.615vw;font-size:3.077vw;border-radius:0;border:none;outline:2px solid #EEEEEE;outline-offset:-2px;}
  .btn-next{padding:4.051vw 6.154vw;font-size:3.077vw;border-radius:0;}

  /* Success mobile */
  .success-screen{padding:16px;}
  .success-title{font-size:16px;}
  .success-desc{font-size:12px;}
}

@media(max-width:420px){
  .panel{height:65%;}
}

/* ═══════════════════════════════════════════════════════════════
   SHARED BLOCK: CONTACTS
   Design: 1920 × 940px  |  Formula: px / 1920 * 100 = vw
   ═══════════════════════════════════════════════════════════════ */

.about-contacts {
  position: relative;
  height: clamp(500px, 48.958vw, 940px); /* 940/1920 */
  background: var(--graphite);
  overflow: hidden;
}

.contacts-title {
  position: absolute;
  left: 3.385vw;  /* 65/1920 */
  top: 6.49vw;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: clamp(60px, 15.663vw, 300.72px); /* 300.72/1920 */
  line-height: 90%;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  z-index: 1;
}

.contacts-card {
  position: absolute;
  left: 33.125vw;   /* 636/1920 */
  top: 16.510vw;    /* 317/1920 */
  width: 63.75vw;   /* 1224/1920 */
  height: 29.167vw; /* 560/1920 */
  background: var(--sandstone);
  z-index: 2;
  overflow: hidden;
}

.contacts-pattern {
  position: absolute;
  left: 0;
  top: 0;
  width: 41.667%; /* 510/1224 */
  height: 100%;
  object-fit: fill;
  display: block;
}

.contacts-tagline {
  position: absolute;
  left: 52.778%; /* 646/1224 */
  top: 8.571%;   /* 48/560 */
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: clamp(18px, 1.979vw, 38px); /* larger "Зв'яжіться з нами" — shared */
  line-height: 112%;
  letter-spacing: -0.02em;
  color: var(--graphite);
}

.contacts-form {
  position: absolute;
  left: 52.778%; /* 646/1224 */
  top: 34.286%;  /* 192/560 */
  width: 43.301%; /* 530/1224 */
}

.contacts-fields {
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.417vw, 8px); /* 8/1920 */
  margin-bottom: clamp(24px, 2.5vw, 48px);
}

.contacts-field {
  position: relative;
  width: 100%;
  height: clamp(44px, 3.333vw, 64px); /* 64/1920 */
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 0;
  transition: border-color 0.18s;
}
.contacts-field:focus-within {
  border-color: var(--graphite);
}

.contacts-field-label {
  position: absolute;
  left: 16px;
  top: calc(50% - 6px - 12px);
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: clamp(12px, 0.573vw, 11px);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  pointer-events: none;
  user-select: none;
}

.contacts-field-input {
  width: 100%;
  height: 100%;
  padding-top: clamp(20px, 1.771vw, 34px);
  padding-left: 16px;
  padding-right: 16px;
  padding-bottom: 0;
  box-sizing: border-box;
  background: none;
  border: none;
  outline: none;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: clamp(12px, 0.833vw, 16px); /* 16/1920 */
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--graphite);
}

.contacts-field-input::placeholder {
  color: rgba(63, 68, 67, 0.35);
  font-weight: 500;
}

.contacts-submit {
  width: 100%;
  height: clamp(50px, 3.906vw, 75px); /* 75/1920 */
  background: var(--graphite);
  border: none;
  border-radius: 70px;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(12px, 0.833vw, 16px); /* 16/1920 */
  line-height: 120%;
  text-transform: uppercase;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  transition: opacity 0.2s ease;
}
.contacts-submit:hover { opacity: 0.85; }

/* disclaimer — identical to the configurator's .form-policy */
.contacts-privacy {
  margin: 0;
  text-align: center;
  line-height: 1.4;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: clamp(12px, 0.6vw, 12px);
  color: var(--muted);
}
.contacts-privacy a { color: var(--graphite); text-decoration: underline; }

.contacts-info {
  position: absolute;
  left: 3.125vw;  /* 60/1920 */
  bottom: clamp(40px, 3.75vw, 72px); /* anchored to section bottom — never slides under the footer */
  top: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(1px, 0.156vw, 3px); /* tight inside each group */
  z-index: 1;
}
/* bigger gap between the phone group and the email group */
.contacts-info a:nth-child(3),
.contacts-info a:nth-child(2):last-child { margin-top: clamp(14px, 1.25vw, 24px); }

.contacts-info a {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(12px, 1.146vw, 22px); /* smaller — shared across pages */
  line-height: 118%;
  color: var(--sandstone);
  text-decoration: none;
}
.contacts-info a:hover { opacity: 0.8; }

/* Animation */
.contacts-card,
.contacts-info {
  opacity: 0;
  transform: translateY(clamp(8px, 0.833vw, 16px));
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
/* contacts-title handled by wipe-headings.js — old opacity/transform removed */
.contacts-title{ opacity:1; transform:none; transition:none; }
.about-contacts.visible .contacts-title {
  opacity: 1; transform: translateY(0); transition-delay: 0s;
}
.about-contacts.visible .contacts-card {
  opacity: 1; transform: translateY(0); transition-delay: 0.15s;
}
.about-contacts.visible .contacts-info {
  opacity: 1; transform: translateY(0); transition-delay: 0.3s;
}

/* ─── SITE FOOTER ────────────────────────────────────────────── */
.site-footer {
  height: clamp(50px, 4.583vw, 88px);

  flex-shrink: 0;
}

.ftr-inner {
  position: absolute;
  left: 3.125vw;                      /* 60/1920 */
  right: 3.125vw;
  bottom: clamp(16px, 1.667vw, 32px); /* 32/1920 */
  height: clamp(14px, 1.25vw, 24px);  /* 24/1920 */
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

/* Copyright */
.ftr-copy {
  display: flex;
  align-items: center;
  gap: 5px;
}
.ftr-copy-brand,
.ftr-copy-text {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: clamp(12px, 0.729vw, 14px); /* 14/1920 */
  line-height: 120%;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
}

/* Legal links */
.ftr-links {
  display: flex;
  align-items: center;
  gap: clamp(24px, 4.375vw, 84px); /* 84/1920 */
}
.ftr-link {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: clamp(12px, 0.729vw, 14px); /* 14/1920 */
  line-height: 110%;
  letter-spacing: -0.02em;
  text-decoration: underline;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.2s ease;
}
.ftr-link:hover {
  color: rgba(255, 255, 255, 0.9);
}

/* Dev credit */
.ftr-credit {
  display: flex;
  align-items: center;
  gap: clamp(4px, 0.417vw, 8px); /* 8/1920 */
}
.ftr-credit-text {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: clamp(12px, 0.729vw, 14px); /* 14/1920 */
  line-height: 110%;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
}
.ftr-credit-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.ftr-credit-logo img {
  display: block;
  height: clamp(14px, 1.25vw, 24px); /* 24/1920 */
  width: auto;
  filter: brightness(0) invert(1); /* white on dark bg */
  opacity: 0.6;                      /* muted like the rest of the footer */
  transition: opacity 0.2s ease;
}
/* hover the whole credit block → full opacity (logo + text) */
.ftr-credit-text { transition: color 0.2s ease; }
.ftr-credit:hover .ftr-credit-logo img { opacity: 1; }
.ftr-credit:hover .ftr-credit-text { color: #fff; }
.site-footer--sandstone .ftr-credit:hover .ftr-credit-text,
.site-footer--porcelain .ftr-credit:hover .ftr-credit-text { color: var(--graphite); }

/* ── Footer theme variants ──────────────────────────────────── */
/* --sandstone / --porcelain — темний текст на світлому фоні    */
.site-footer--sandstone .ftr-copy-brand,
.site-footer--sandstone .ftr-copy-text,
.site-footer--sandstone .ftr-link,
.site-footer--porcelain .ftr-copy-brand,
.site-footer--porcelain .ftr-copy-text,
.site-footer--porcelain .ftr-link {
  color: rgba(63, 68, 67, 0.6);
}
.site-footer--sandstone .ftr-link:hover,
.site-footer--porcelain .ftr-link:hover {
  color: var(--graphite);
}
.site-footer--sandstone .ftr-credit-text,
.site-footer--porcelain .ftr-credit-text {
  color: rgba(63, 68, 67, 0.6);
}
.site-footer--sandstone .ftr-credit-logo img,
.site-footer--porcelain .ftr-credit-logo img {
  filter: none;
}

/* ─── MOBILE FOOTER (about / contacts / works) ───────────────
   position:relative на цих сторінках — футер у потоці, 130px  */
@media (max-width: 600px) {
  .site-footer {
    height: 33.33vw;           /* 130/390 */
  }

  .ftr-inner {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 3.33vw;            /* 13/390 */
    height: auto;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 6.15vw;               /* 24/390 */
  }

  /* Рядок 1: YantosWire © рік */
  .ftr-copy {
    gap: 1.28vw;               /* 5/390 */
  }
  .ftr-copy-brand,
  .ftr-copy-text {
    font-size: 3.59vw;         /* 14/390 */
    color: #fff;
    white-space: nowrap;
  }

  /* Рядок 2: посилання */
  .ftr-links {
    gap: 6.15vw;               /* 24/390 */
  }
  .ftr-link {
    font-size: 3.59vw;         /* 14/390 */
    color: #fff;
  }

  /* Рядок 3: кредит */
  .ftr-credit {
    gap: 2.05vw;               /* 8/390 */
  }
  .ftr-credit-text {
    font-size: 3.59vw;         /* 14/390 */
    color: #fff;
  }
  .ftr-credit-logo img {
    height: 6.15vw;            /* 24/390 */
  }
}

/* ─── CALLBACK MODAL ─────────────────────────────────────────── */
@keyframes cbm-box-in  { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes cbm-box-out { from { transform: translateY(0); }    to { transform: translateY(-100%); } }
@keyframes cbm-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes cbm-fade-out { from { opacity: 1; } to { opacity: 0; } }

#callback-modal {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 900;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  visibility: hidden;
}
#callback-modal.cbm--open {
  pointer-events: auto;
  visibility: visible;
}
html:has(#callback-modal.cbm--open),
body:has(#callback-modal.cbm--open) { overflow: hidden !important; }

.cbm-overlay {
  position: absolute;
  inset: 0;
  background: rgba(63,68,67,0.7);
  opacity: 0;
}
#callback-modal.cbm--open    .cbm-overlay { animation: cbm-fade-in  0.35s ease forwards; }
#callback-modal.cbm--closing .cbm-overlay { animation: cbm-fade-out 0.3s  ease forwards; }

.cbm-box {
  position: relative;
  z-index: 1;
  width: min(535px, calc(100vw - 40px));
  background: #C3AD8B;
  padding: clamp(32px, 2.92vw, 56px);
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.25vw, 24px);
  transform: translateY(100%);
}
#callback-modal.cbm--open    .cbm-box { animation: cbm-box-in  0.45s cubic-bezier(0.16,1,0.3,1) forwards; }
#callback-modal.cbm--closing .cbm-box { animation: cbm-box-out 0.35s cubic-bezier(0.55,0,1,0.45) forwards; }

.cbm-close {
  position: absolute;
  top: 16px;
  right: 15.5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.cbm-close svg { display: block; }
.cbm-heading {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: clamp(32px, 3.33vw, 64px);
  line-height: 100%;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: #3F4443;
  margin: 0;
}
.cbm-sub {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: clamp(14px, 1.25vw, 24px);
  line-height: 120%;
  letter-spacing: -0.02em;
  color: #3F4443;
  margin: 0;
}
.cbm-form {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 1.67vw, 32px);
}
.cbm-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cbm-input {
  width: 100%;
  height: clamp(48px, 3.33vw, 64px);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 0;
  padding: clamp(10px, 0.73vw, 14px) 16px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: -0.04em;
  color: #3F4443;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.18s;
}
.cbm-input::placeholder { color: var(--muted); opacity: 0.6; }
.cbm-input:focus { border-color: var(--graphite); }
.cbm-submit-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cbm-submit {
  width: 100%;
  height: clamp(52px, 3.91vw, 75px);
  background: #3F4443;
  border: none;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 120%;
  text-transform: uppercase;
  color: #FFFFFF;
  transition: opacity 0.15s;
}
.cbm-submit:hover { opacity: 0.85; }
/* disclaimer — identical to the configurator's .form-policy */
.cbm-disclaimer {
  margin: 0;
  text-align: center;
  line-height: 1.4;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: clamp(12px, 0.6vw, 12px);
  color: var(--muted);
}
.cbm-disclaimer a { color: var(--graphite); text-decoration: underline; }

@media (max-width: 768px) {
  .cbm-box {
    width: 100%;
    max-width: 100%;
    min-height: 100dvh;
    padding: 72px 24px 40px;
    gap: 20px;
    justify-content: center;
  }
  .cbm-heading { font-size: clamp(32px, 10vw, 52px); }
  .cbm-sub     { font-size: clamp(14px, 4.6vw, 18px); }
  .cbm-input   { height: clamp(48px, 12.3vw, 64px); font-size: 4.10vw; }
  .cbm-submit  { height: 17.18vw; font-size: 4.10vw; }
  .cbm-form    { gap: clamp(16px, 5.13vw, 32px); }
}

/* ═══ INPUT STYLE — unified across all forms (base = callback popup) ═══
   Transparent field; one baseline drawn on the INPUT itself so every form
   (popup / contacts / configurator) behaves identically:
     · rest   → thin neutral line
     · focus  → white line
     · filled → graphite line (--fld-line-filled)
   Colours adapt to the surface via CSS vars (light card vs dark panel).
   No box, no shadow, no radius. Montserrat only. */
:root{
  --inp-err:#d9534f;
  --fld-text:#3F4443;
  --fld-placeholder:rgba(63,68,67,0.45);
  --fld-line:rgba(63,68,67,0.30);
  --fld-line-focus:#FFFFFF;
  --fld-line-filled:#3F4443;
  --fld-label:rgba(63,68,67,0.55);
  --fld-gap:clamp(20px, 1.771vw, 34px); /* vertical gap between fields — shared */
}

/* the fields themselves (bare popup input + wrapped contacts/config) */
.cbm-input,
.contacts-field-input,
.config-field-input,
.config-field-select{
  background:transparent;border:none;border-radius:0;box-shadow:none;
  border-bottom:1.5px solid var(--fld-line);
  color:var(--fld-text);
  font-family:'Montserrat',sans-serif;
  font-weight:500;
  font-size:clamp(14px, 0.833vw, 16px); /* identical across all forms, ≥12px */
  line-height:1.3;
  transition:border-bottom-color .25s ease;
  -webkit-appearance:none;appearance:none;
}
.cbm-input::placeholder,
.contacts-field-input::placeholder,
.config-field-input::placeholder{ color:var(--fld-placeholder); }
.cbm-input:focus,
.contacts-field-input:focus,
.config-field-input:focus,
.config-field-select:focus{ outline:none;border-bottom-color:var(--fld-line-focus); }
/* filled → graphite line */
.cbm-input:not(:placeholder-shown),
.contacts-field-input:not(:placeholder-shown),
.config-field-input:not(:placeholder-shown){ border-bottom-color:var(--fld-line-filled); }
.config-field-select:not(:has(option[value=""]:checked)){ border-bottom-color:var(--fld-line-filled); }

/* wrappers carry no own box — only layout + label ABOVE the field */
.contacts-field,
.config-field-box{
  position:relative;background:transparent;border:none;border-radius:0;box-shadow:none;
  display:flex;flex-direction:column;height:auto;padding:0;
}
.contacts-field .wpcf7-form-control-wrap{ display:block;width:100%; }
.contacts-field .contacts-field-input{ padding:0 0 9px 0;height:auto; }
.config-field-box .config-field-input,
.config-field-box .config-field-select{ padding:0 0 9px 0; }
/* hints live INSIDE the field (placeholder), like the popup — no label above */
.contacts-field .contacts-field-label,
.config-field-box .config-field-label{ display:none; }

/* spacing between fields — identical everywhere */
.contacts-fields{ gap:var(--fld-gap); }
.cbm-fields{ gap:var(--fld-gap); }
.config-field{ margin-bottom:var(--fld-gap); }

/* select chevron follows the text colour (graphite on light surfaces) */
.config-field-box .config-field-select{
  padding-right:22px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%233F4443' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 0 center;
}
.config-field-box .config-field-select option{ color:var(--graphite);background:#fff; }

/* DARK SURFACE (configurator panel): same component, vars adapted */
#app .config-field-box{
  --fld-text:#ECEAE6;
  --fld-placeholder:rgba(255,255,255,0.38);
  --fld-line:#FFFFFF;
  --fld-line-focus:var(--sandstone);
  --fld-line-filled:var(--sandstone);
  --fld-label:rgba(255,255,255,0.6);
}
#app .config-field-box .config-field-select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23ECEAE6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
#app .config-field-box:focus-within .config-field-label{ color:#fff; }
.contacts-field:focus-within .contacts-field-label{ color:var(--marsala); }

/* VALIDATION (CF7) — red line + tip */
.cbm-input.wpcf7-not-valid,
.contacts-field-input.wpcf7-not-valid{ border-bottom-color:var(--inp-err)!important; }
.wpcf7-not-valid-tip{
  display:block;margin-top:7px;
  font-family:'Montserrat',sans-serif;font-weight:600;
  font-size:11px;line-height:1.3;letter-spacing:0.02em;color:var(--inp-err);
}

/* POPUP scroll lock */
html.cbm-scroll-lock,
html.cbm-scroll-lock body{ overflow:hidden; }