/* ══════════════════════════════════════════════════════════════════════
   Krasnevikno — дизайн-система сайту.
   Перенесено з макету krasnevikno-site (мега-меню, ліва рейка, hero-фото,
   картки профілів, банер, контакт-модалка) і адаптовано під Razor Views.

   ВАЖЛИВО: кнопки цієї дизайн-системи навмисно названі .site-btn* (а не
   .btn), бо сторінка калькулятора та адмінка й далі використовують
   Bootstrap 5, чий клас .btn мав би конфліктувати з нашими стилями.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  --blue:#29abe2;
  --blue-dark:#1c8fc0;
  --green:#8dc63f;
  --ink:#141416;
  --muted:#767b86;
  --line:#e6e6e9;
  --rail-w:84px;
  --side-w:300px;
  --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.kv-shell, .kv-shell *, .kv-shell *::before, .kv-shell *::after{ box-sizing:border-box; }
.kv-page{ font-family:var(--font); color:var(--ink); line-height:1.55; background:#fff; }
.kv-page img{ max-width:100%; display:block; }
.kv-page ul{ margin:0; }
.kv-page a{ color:inherit; }
html{ scroll-behavior:smooth; }

.logo{ display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink); font-weight:800; font-size:1.35rem; white-space:nowrap;}
.logo .chip{ width:24px; height:24px; border-radius:5px; background:linear-gradient(135deg, var(--blue) 50%, var(--green) 50%); flex-shrink:0;}

.rail{
  position:fixed; top:0; left:0; bottom:0; width:var(--rail-w);
  border-right:1px solid var(--line); background:#fff;
  display:flex; flex-direction:column; align-items:center;
  padding:26px 0 20px; z-index:200;
}
.burger {
    width: 22px;
    height: 16px;
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: block;
    text-decoration: none;
}.burger span{ position:absolute; left:0; width:100%; height:2px; background:var(--ink); border-radius:2px; transition:.2s;}
.burger span:nth-child(1){top:0;}
.burger span:nth-child(2){top:7px;}
.burger span:nth-child(3){top:14px;}
.burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg);}
.burger.open span:nth-child(2){ opacity:0;}
.burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg);}

.lang{ margin-top:26px; position:relative; }
.lang > button{ border:none; background:none; font-family:var(--font); font-weight:600; font-size:.82rem; color:var(--muted); cursor:pointer; display:flex; align-items:center; gap:3px;}
.lang-menu{
  position:absolute; top:26px; left:50%; transform:translateX(-50%);
  background:#fff; border:1px solid var(--line); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.08);
  padding:6px; display:none; min-width:64px; text-align:center;
}
.lang.open .lang-menu{ display:block; }
.lang-menu a{ display:block; padding:5px 8px; font-size:.82rem; text-decoration:none; color:var(--ink); border-radius:5px;}
.lang-menu a:hover{ background:var(--line); }

.rail-social{ display:flex; flex-direction:column; gap:10px; margin-top:auto; }
.rail-social a{
  width:30px; height:30px; border:1px solid var(--line); border-radius:7px;
  display:flex; align-items:center; justify-content:center; color:var(--muted); text-decoration:none;
  transition:.2s;
}
.rail-social a:hover{ border-color:var(--blue); color:var(--blue); }

.kv-shell{ margin-left:var(--rail-w); display:flex; position:relative; z-index:1; min-height:100vh;}
.side-col{
  width:var(--side-w); flex-shrink:0; border-right:1px solid var(--line);
  padding:26px 34px 40px; position:sticky; top:0; align-self:flex-start; height:100vh;
  display:flex; flex-direction:column; overflow-y:auto;
}
.side-col .logo{ margin-bottom:56px; }
.side-heading{ font-size:2.3rem; font-weight:800; line-height:1.1; letter-spacing:-.01em; margin:0 0 14px;}
.side-note{ color:var(--muted); font-size:.92rem; margin:0 0 30px; max-width:230px;}
.side-breadcrumb{ font-size:.76rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--blue); margin-bottom:16px;}
.side-breadcrumb a{ color:var(--muted); text-decoration:none;}
.side-breadcrumb a:hover{ color:var(--blue); }

.site-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:6px; padding:12px 26px; font-weight:700; font-size:.92rem; text-decoration:none;
  border:1.5px solid transparent; cursor:pointer; transition:.2s; font-family:var(--font);
}
.site-btn-blue{ background:var(--blue); color:#fff; }
.site-btn-blue:hover{ background:var(--blue-dark); color:#fff; }
.site-btn-outline{ border-color:var(--ink); color:var(--ink); background:none; }
.site-btn-outline:hover{ background:var(--blue); border-color:var(--blue); color:#fff; }
.main-col{ flex:1; min-width:0; position:relative; }

.topnav{
  position:sticky; top:0; z-index:150; background:rgba(255,255,255,.85); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.topnav.on-photo{ position:absolute; left:0; right:0; background:none; backdrop-filter:none; border-bottom-color:transparent;}
.topnav-inner{ display:flex; align-items:center; justify-content:space-between; padding:26px 40px;}
.topnav ul{ list-style:none; display:flex; gap:38px; padding:0; margin:0;}
.topnav a.nav-link{
  text-decoration:none; font-size:.86rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  color:var(--ink); display:inline-flex; align-items:center; gap:6px; cursor:pointer;
}
.topnav.on-photo a.nav-link{ color:#fff; }
.topnav a.nav-link .car{ font-size:.55rem; transition:transform .2s;}
.topnav a.nav-link.mega-open .car{ transform:rotate(180deg); }
.topnav-cta{
  border:1.5px solid var(--ink); border-radius:6px; padding:10px 22px; font-weight:700; font-size:.82rem;
  text-decoration:none; color:var(--ink); white-space:nowrap;
}
.topnav.on-photo .topnav-cta{ border-color:#fff; color:#fff; }
.topnav-cta:hover{ background:var(--blue); border-color:var(--blue); color:#fff; }
.topnav.on-photo .topnav-cta:hover{ background:#fff; color:var(--ink); }
.topnav-cta-solid{ background:var(--blue); border-color:var(--blue); color:#fff; display:inline-flex; align-items:center; gap:7px;}
.topnav-cta-solid:hover{ background:var(--blue-dark); color:#fff; border-color:var(--blue-dark); }
.topnav.on-photo .topnav-cta-solid{ color:#fff; }

.nav-item{ position:relative; }
.mega{
  position:absolute; top:100%; left:0; right:auto; width:540px; background:#fff;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  box-shadow:0 30px 60px rgba(0,0,0,.12);
  padding:48px 34px 56px; z-index:140;
  opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:.22s ease;
}
li.mega-open .mega, .nav-item.mega-open .mega{ opacity:1; visibility:visible; transform:translateY(0);}

.mega-title{ font-size:.72rem; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); font-weight:800; margin-bottom:0; white-space:nowrap; }
a.mega-title{ display:block; text-decoration:none; cursor:pointer; transition:.2s; }
a.mega-title:hover{ color:var(--blue); }

.mega-top{ padding-bottom:30px; margin-bottom:30px; border-bottom:1px solid var(--line); }
.mega-vikna-grid{ display:grid; grid-template-columns:repeat(3,1fr); column-gap:22px; row-gap:20px; margin-top:22px; }
.mega-vikna-item{ text-decoration:none; font-size:.92rem; font-weight:500; color:var(--ink); transition:.2s; white-space:nowrap; }
.mega-vikna-item:hover{ color:var(--blue); }

.mega-bottom{ display:flex; gap:18px; }
.mega-bottom .mega-col{ flex:1; min-width:112px; padding:0 14px; border-left:1px solid var(--line); }
.mega-bottom .mega-col:first-child{ border-left:none; padding-left:0; }
.mega-bottom .mega-title{ white-space:normal; line-height:1.35; margin-bottom:18px; }
.mega-col ul{ list-style:none; padding:0; margin:0; display:block; }
.mega-col li{ margin-bottom:14px; }
.mega-col a{ text-decoration:none; font-size:.88rem; font-weight:500; color:var(--ink); transition:.2s; line-height:1.3; }
.mega-col a:hover{ color:var(--blue); }

.hero-photo{
  position:relative; height:88vh; min-height:560px;
  background:
    linear-gradient(100deg, rgba(10,10,12,.10) 0%, rgba(10,10,12,.50) 58%, rgba(10,10,12,.80) 100%),
    url('/img/hero/windows-hero-v2.jpg') center/cover no-repeat,
    linear-gradient(135deg, #2b2f36, #14161a);
  display:flex; flex-direction:column; justify-content:center; align-items:flex-end;
  padding:0 60px;
}
.hero-tagline{ color:#fff; letter-spacing:.5em; font-weight:300; font-size:.95rem; text-transform:lowercase; margin-bottom:56px;}
.hero-badge{ display:flex; align-items:center; gap:14px; color:#fff; font-weight:800; font-size:2.3rem; text-shadow:0 4px 18px rgba(0,0,0,.35);}
.hero-badge .chip{ width:38px; height:38px; border-radius:8px; background:linear-gradient(135deg, var(--blue) 50%, var(--green) 50%);}
.hero-badge .accent{ color:var(--blue); }

.kv-page section{ position:relative; padding:80px 60px; }
.section-head{ position:relative; z-index:1; margin-bottom:44px;}
.kicker{ font-size:.74rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--blue); margin-bottom:10px;}
.section-title{ font-size:1.9rem; font-weight:800; margin:0 0 8px; }
.section-sub{ color:var(--muted); font-size:.98rem; margin:0; max-width:560px;}

.cards-row{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(6,1fr); gap:0; }
.p-card{ padding:0 22px; border-left:1px solid var(--line); text-decoration:none; color:inherit; display:block; cursor:pointer; transition:.2s;}
.p-card:hover{ transform:translateY(-3px); }
.p-card:first-child{ border-left:none; padding-left:0; }
.p-card h3{ font-size:1.25rem; font-weight:800; margin:0 0 4px;}
.p-card .sub{ font-size:.85rem; color:var(--muted); margin-bottom:20px; min-height:40px;}
.p-card .thumb{ height:190px; border-radius:8px; margin-bottom:22px; background-size:contain; background-repeat:no-repeat; background-position:center; border:1px solid var(--line);}
.spec{ display:flex; justify-content:space-between; font-size:.78rem; padding:9px 0; border-top:1px solid var(--line);}
.spec span:first-child{ color:var(--muted); text-transform:uppercase; letter-spacing:.03em; font-weight:600;}
.spec span:last-child{ font-weight:700; text-align:right;}
.p-card-more{ text-align:center; margin-top:20px; }
.p-card-more span{ display:inline-flex; width:36px; height:36px; border:1px solid var(--line); border-radius:50%; align-items:center; justify-content:center; color:var(--muted); font-size:1.1rem;}

.color-section{ padding:0; }
.color-photo{ position:relative; min-height:520px; display:flex; align-items:center; overflow:hidden;}
.color-photo-bg{ position:absolute; inset:0; display:grid; grid-template-columns:repeat(4,1fr); z-index:0;}
    .color-photo-bg div {
        background-size: cover;
        background-position: top center;
        position: relative;
    }

        .color-photo-bg div::after {
            content: attr(data-name);
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            padding: 14px 6px 12px;
            background: linear-gradient(to top, rgba(10,10,12,.75), transparent 75%);
            color: #fff;
            font-size: .8rem;
            font-weight: 700;
            letter-spacing: .01em;
            line-height: 1.2;
            text-align: center;
            text-shadow: 0 2px 6px rgba(0,0,0,.5);
        }
.color-photo-inner{
    position:relative; z-index:2; margin:0 60px; padding:36px 40px; max-width:460px; color:#fff;
    background:rgba(20,16,12,.62); backdrop-filter:blur(3px); border-radius:14px;
}
.color-photo-inner h2{ font-size:2.3rem; font-weight:800; margin:0 0 10px; line-height:1.15;}
.color-photo-inner .sub{ font-size:1rem; opacity:.9; margin-bottom:34px;}
.color-stats{ display:flex; gap:40px;}
.color-stats .n{ font-size:2.1rem; font-weight:800; line-height:1;}
.color-stats .l{ font-size:.8rem; opacity:.85; margin-top:6px;}

.p-hero {
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(135deg, #141416 0%, #1c3b4a 55%, #1c8fc0 100%);
    background-size: cover;
    background-position: center;
    padding: 70px 60px 0;
    display: flex;
    align-items: stretch;
    gap: 40px;
    min-height: 560px;
    border-bottom: none;
}
.p-hero-text{ flex:1; max-width:480px; display:flex; flex-direction:column; justify-content:center; padding-bottom:70px; position:relative; z-index:2;}
.p-hero .kicker-bc{ font-size:.76rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#8bd4f2; margin-bottom:18px;}
.p-hero .kicker-bc a{ color:rgba(255,255,255,.6); text-decoration:none;}
.p-hero .kicker-bc a:hover{ color:#fff; }
.p-hero h1{ color:#fff; font-size:3rem; font-weight:800; margin:0 0 6px; line-height:1.02; letter-spacing:-.01em;}
.p-hero .p-sub{ color:var(--blue); font-size:1.05rem; font-weight:700; margin:0 0 22px;}
.p-hero p.desc{ color:rgba(255,255,255,.78); font-size:1rem; max-width:440px; margin:0 0 32px;}
.p-hero .hero-btns{ display:flex; gap:14px; flex-wrap:wrap;}
.p-hero-photo{ flex:1; position:relative; display:flex; align-items:flex-end; justify-content:center; min-width:0;}
.p-hero-photo img{ max-height:520px; width:auto; object-fit:contain; position:relative; z-index:1;}
.p-hero-photo::before{ content:""; position:absolute; left:10%; right:10%; bottom:0; height:60%; background:radial-gradient(ellipse at center, rgba(41,171,226,.25), transparent 70%); z-index:0;}

.spec-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:10px; overflow:hidden;}
.spec-cell{ background:#fff; padding:28px 26px; }
.spec-cell .v{ font-size:1.55rem; font-weight:800; margin-bottom:6px;}
.spec-cell .l{ font-size:.8rem; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; font-weight:600;}

.feat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; position:relative; z-index:1;}
.feat-card{ border:1px solid var(--line); border-radius:10px; padding:28px 26px;}
.feat-card .ic{ width:44px; height:44px; border-radius:9px; background:#eaf6fd; color:var(--blue); display:flex; align-items:center; justify-content:center; font-size:1.2rem; margin-bottom:18px;}
.feat-card h3{ font-size:1.02rem; font-weight:800; margin:0 0 8px;}
.feat-card p{ font-size:.88rem; color:var(--muted); margin:0;}

.banner-section{ padding:0; }
.banner-photo {
    position: relative;
    min-height: 420px;
    background: linear-gradient(100deg, rgba(20,24,30,.88) 0%, rgba(20,24,30,.6) 45%, rgba(20,24,30,.25) 100%), var(--banner-bg, linear-gradient(135deg,#2b2f36,#14161a));
    background-size: auto, cover;
    background-position: left top, center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
}
.banner-inner{ padding:0 60px; max-width:560px; color:#fff; }
.banner-inner h2{ font-size:2rem; font-weight:800; margin:0 0 10px; line-height:1.15;}
.banner-inner .sub{ font-size:1rem; opacity:.9; margin-bottom:30px;}
.banner-stats{ display:flex; gap:40px; flex-wrap:wrap;}
.banner-stats .n{ font-size:2.1rem; font-weight:800; line-height:1;}
.banner-stats .l{ font-size:.8rem; opacity:.85; margin-top:6px; max-width:120px;}

.article-block{ position:relative; z-index:1; max-width:760px;}
.article-block h2{ font-size:1.6rem; font-weight:800; margin:0 0 16px;}
.article-block p{ color:#333; margin:0 0 16px;}
.article-block ul{ color:#333; padding-left:20px; margin:0 0 16px;}
.article-block li{ margin-bottom:6px;}
.article-block a.more{ color:var(--blue); font-weight:700; text-decoration:none; font-size:.92rem;}

/* ─── Сторінка «Двері» ─── */
.door-hero-visual {
    width: 230px;
    height: 230px;
    border-radius: 50%;
    flex: none;
    background-image: url('/img/hero/door-hero.jpg.png');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}
.door-hero-visual i{ font-size:5.5rem; color:#8bd4f2; }

.system-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.system-card{ border:1px solid var(--line); border-radius:10px; padding:32px 28px; }
.system-card .num{ font-size:2.6rem; font-weight:800; color:var(--blue); line-height:1; margin-bottom:10px;}
.system-card .label{ font-size:.8rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; font-weight:700; margin-bottom:14px;}
.system-card p{ color:var(--muted); font-size:.92rem; margin:0;}

.lam-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.lam-card{ border-radius:12px; overflow:hidden; border:1px solid var(--line); box-shadow:0 10px 26px rgba(0,0,0,.07); background:#fff; }
.lam-card img{ width:100%; height:280px; object-fit:cover; display:block; }
.lam-card .cap{ padding:14px 16px; }
.lam-card .cap .name{ font-size:.92rem; font-weight:700; margin:0 0 2px; }
.lam-card .cap .code{ font-size:.76rem; color:var(--muted); }

.cat-head{ padding:64px 60px 0; }
.cat-head h1{ font-size:2.4rem; font-weight:800; margin:0 0 8px; }
.cat-head p{ color:var(--muted); font-size:.98rem; margin:0 0 36px; max-width:560px;}
.cat-tabs{ display:flex; gap:6px; border-bottom:1px solid var(--line); padding:0 60px; position:sticky; top:81px; background:#fff; z-index:60; }
.cat-tab{ border:none; background:none; cursor:pointer; font-family:var(--font); padding:16px 22px; font-weight:700; font-size:.86rem; letter-spacing:.03em; text-transform:uppercase; color:var(--muted); border-bottom:2.5px solid transparent; margin-bottom:-1px; transition:.2s;}
.cat-tab:hover{ color:var(--ink); }
.cat-tab.active{ color:var(--ink); border-bottom-color:var(--blue); }
.cat-panel{ display:none; padding:44px 60px 90px; }
.cat-panel.active{ display:block; }
.cat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
.cat-card{ border:1px solid var(--line); border-radius:10px; overflow:hidden; text-decoration:none; color:var(--ink); transition:.2s; display:block; background:#fff;}
.cat-card:hover{ box-shadow:0 16px 34px rgba(0,0,0,.09); transform:translateY(-3px); border-color:var(--line);}
.cat-card .thumb{ height:190px; background-size:contain; background-repeat:no-repeat; background-position:center; background-color:#f4f5f7;}
.cat-card .swatch{ height:190px; }
.cat-card .info{ padding:16px 18px 20px; }
.cat-card h3{ font-size:1.02rem; font-weight:800; margin:0 0 4px;}
.cat-card .sub{ font-size:.8rem; color:var(--muted); margin:0;}

.tile-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.tile-grid.cols-2{ grid-template-columns:repeat(2,1fr); }
.tile-card{ border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#fff; transition:.2s; text-decoration:none; color:inherit; display:block;}
.tile-card.link:hover{ box-shadow:0 16px 34px rgba(0,0,0,.09); transform:translateY(-3px);}
.tile-card .thumb{ height:190px; background-size:cover; background-position:center; background-color:#f4f5f7; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:2.5rem;}
.tile-card .body{ padding:22px 24px; }
.tile-card h3{ font-size:1.05rem; font-weight:800; margin:0 0 8px;}
.tile-card p{ font-size:.88rem; color:var(--muted); margin:0;}
.tile-card .meta{ font-size:.78rem; color:var(--muted); margin-top:12px; display:flex; align-items:center; gap:6px;}
.stat-strip{ display:flex; gap:16px; flex-wrap:wrap; margin-top:20px;}
.stat-box{ border:1px solid var(--line); border-radius:10px; padding:18px 22px; text-align:center; flex:1; min-width:120px;}
.stat-box .n{ font-size:1.8rem; font-weight:800; color:var(--blue); line-height:1;}
.stat-box .l{ font-size:.78rem; color:var(--muted); margin-top:6px;}
.price-table{ width:100%; border-collapse:collapse; border:1px solid var(--line); border-radius:10px; overflow:hidden;}
.price-table th, .price-table td{ padding:16px 22px; text-align:left; border-bottom:1px solid var(--line);}
.price-table th{ font-size:.76rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); background:#fafafb;}
.price-table td:last-child, .price-table th:last-child{ text-align:right; }
.price-table tr:last-child td{ border-bottom:none; }
.price-table .price{ font-weight:800; color:var(--blue); }

.field-group{ margin-bottom:18px; }
.field-group label{ display:block; font-weight:700; font-size:.86rem; margin-bottom:8px;}
.field-input{ width:100%; border:1.5px solid var(--line); border-radius:8px; padding:12px 16px; font-family:var(--font); font-size:.95rem; transition:.2s;}
.field-input:focus{ outline:none; border-color:var(--blue); }
textarea.field-input{ resize:vertical; }
.contact-info-row{ display:flex; gap:14px; padding:18px 0; border-top:1px solid var(--line);}
.contact-info-row:first-of-type{ border-top:none; padding-top:0;}
.contact-info-icon{ width:44px; height:44px; border-radius:10px; background:#eaf6fd; color:var(--blue); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:1.15rem;}
.contact-info-row strong{ display:block; font-size:.98rem; margin-bottom:2px; font-weight:700;}
.contact-info-row a{ color:var(--muted); text-decoration:none; font-weight:700;}
.contact-info-row a:hover{ color:var(--blue); }
.form-note-ok{ background:#eefaf0; border:1px solid #cdeed4; color:#2c7a3d; border-radius:8px; padding:14px 18px; font-size:.9rem; margin-bottom:18px;}
.form-note-err{ background:#fdeeee; border:1px solid #f3caca; color:#a12a2a; border-radius:8px; padding:12px 16px; font-size:.86rem; margin-top:6px;}

.contact-modal-overlay{ position:fixed; inset:0; background:rgba(20,24,30,.55); z-index:400; display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; visibility:hidden; transition:.25s ease;}
.contact-modal-overlay.open{ opacity:1; visibility:visible; }
.contact-modal{ background:#fff; border-radius:14px; padding:40px 44px; max-width:440px; width:100%; position:relative; transform:translateY(14px); transition:.25s ease; box-shadow:0 30px 80px rgba(0,0,0,.25); font-family:var(--font);}
.contact-modal-overlay.open .contact-modal{ transform:translateY(0); }
.contact-modal-close{ position:absolute; top:16px; right:16px; width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:none; font-size:1.3rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--muted); transition:.2s;}
    .contact-modal-close:hover {background: var(--blue);   color: #fff; border-color: var(--blue);    }.contact-modal-kicker{ font-size:.74rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--blue); margin-bottom:8px;}
.contact-modal h2{ font-size:1.55rem; font-weight:800; margin:0 0 26px; color:var(--ink);}
.contact-loc{ display:flex; gap:14px; padding:16px 0; border-top:1px solid var(--line);}
.contact-loc:first-of-type{ border-top:none; padding-top:0;}
.contact-loc-icon{ width:38px; height:38px; border-radius:9px; background:#eaf6fd; color:var(--blue); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:1.05rem;}
.contact-loc strong{ display:block; font-size:.94rem; margin-bottom:4px; font-weight:700; color:var(--ink);}
.contact-loc a{ color:var(--muted); text-decoration:none; font-weight:700; font-size:.92rem;}
.contact-loc a:hover{ color:var(--blue); }
.contact-modal-social{ display:flex; gap:12px; margin-top:28px;}
.social-btn{ flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:12px 16px; border-radius:8px; text-decoration:none; font-weight:700; font-size:.88rem; color:#fff; transition:.2s;}
.social-btn i{ font-size:1.1rem; }
.social-btn.instagram{ background:linear-gradient(135deg,#f58529,#dd2a7b,#8134af,#515bd4); }
.social-btn.instagram:hover{ filter:brightness(1.08); }
.social-btn.facebook{ background:#1877f2; }
.social-btn.facebook:hover{ background:#145dc0; }
@media (max-width:480px){
  .contact-modal{ padding:30px 22px;}
  .contact-modal-social{ flex-direction:column;}
}

.kv-page footer{ padding:50px 60px 30px; border-top:1px solid var(--line);}
.footer-note{ font-size:.78rem; color:var(--muted); border-top:1px solid var(--line); padding-top:22px; margin-top:10px;}

@media (max-width: 1400px){
  .cards-row{ grid-template-columns:repeat(3,1fr); row-gap:34px;}
  .p-card{ border-top:1px solid var(--line); padding-top:26px;}
  .p-card:nth-child(3n+1){ border-left:none; padding-left:0; }
  .p-card:nth-child(1), .p-card:nth-child(2), .p-card:nth-child(3){ border-top:none; padding-top:0;}
}
@media (max-width: 1200px){
  .cat-grid{ grid-template-columns:repeat(3,1fr); }
  .spec-grid{ grid-template-columns:repeat(2,1fr); }
  .feat-grid{ grid-template-columns:repeat(2,1fr); }
  .lam-grid{ grid-template-columns:repeat(2,1fr); }
  .system-grid{ grid-template-columns:1fr; }
  .tile-grid{ grid-template-columns:repeat(2,1fr); }
  .cards-row{ grid-template-columns:repeat(2,1fr); row-gap:34px;}
  .p-card{ border-left:none; padding-left:0; border-top:1px solid var(--line); padding-top:26px;}
  .p-card:nth-child(1), .p-card:nth-child(2){ border-top:none; padding-top:0;}
}
/* ─── Мобільна шапка й висувне меню (елементи приховані на десктопі) ─── */
.mobile-logo{ display:none; }
.mobile-burger{
  display:none; width:22px; height:16px; position:relative; background:none; border:none;
  cursor:pointer; padding:0; flex-shrink:0;
}
.mobile-burger span{ position:absolute; left:0; width:100%; height:2px; background:var(--ink); border-radius:2px; transition:.2s;}
.mobile-burger span:nth-child(1){ top:0; }
.mobile-burger span:nth-child(2){ top:7px; }
.mobile-burger span:nth-child(3){ top:14px; }
.mobile-burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.mobile-burger.open span:nth-child(2){ opacity:0; }
.mobile-burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.topnav.on-photo .mobile-burger span{ background:#fff; }

.mobile-drawer-overlay{
  position:fixed; inset:0; background:rgba(20,24,30,.55); z-index:490;
  opacity:0; visibility:hidden; transition:.25s ease;
}
.mobile-drawer-overlay.open{ opacity:1; visibility:visible; }

.mobile-drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(320px, 86vw); background:#fff; z-index:500;
  display:flex; flex-direction:column; transform:translateX(100%); transition:.28s ease;
  box-shadow:-16px 0 40px rgba(0,0,0,.15); overflow-y:auto;
}
.mobile-drawer.open{ transform:translateX(0); }
.mobile-drawer-head{
  display:flex; align-items:center; justify-content:space-between; padding:22px 22px 18px;
  border-bottom:1px solid var(--line); flex-shrink:0;
}
.mobile-drawer-close{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:none;
  font-size:1.4rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
  color:var(--muted); transition:.2s;
}
    .mobile-drawer-close:hover {
        background: var(--blue);
        color: #fff;
        border-color: var(--blue);
    }.mobile-drawer-nav{ padding:18px 22px; display:flex; flex-direction:column; gap:2px; flex:1; }
.mobile-drawer-section{ margin-bottom:8px; }
.mobile-drawer-title{
  font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); margin:14px 0 6px;
}
.mobile-drawer-link{
  display:block; padding:12px 4px; font-size:.98rem; font-weight:700; color:var(--ink);
  text-decoration:none; border-bottom:1px solid var(--line);
}
.mobile-drawer-section .mobile-drawer-link{ border-bottom:none; padding:10px 4px; }
.mobile-drawer-top{ border-bottom:1px solid var(--line); }
.mobile-drawer-sub{ display:flex; flex-direction:column; padding-left:10px; }
.mobile-drawer-sub a{
  padding:8px 4px; font-size:.9rem; font-weight:600; color:var(--muted); text-decoration:none;
}
.mobile-drawer-sub a:hover{ color:var(--blue); }
.mobile-drawer-cta{
  margin-top:12px; background:var(--blue); color:#fff !important; border-radius:8px; text-align:center;
  border-bottom:none !important; display:flex; align-items:center; justify-content:center; gap:8px;
}
.mobile-drawer-foot{
  padding:18px 22px 26px; border-top:1px solid var(--line); flex-shrink:0;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
}
.mobile-drawer-foot a{ text-decoration:none; color:var(--ink); font-weight:700; font-size:.92rem; display:flex; align-items:center; gap:6px; }
.mobile-drawer-foot .rail-social{ margin-top:0; gap:10px; }

@media (max-width: 991px){
  :root{ --rail-w:0px; --side-w:0px; }
  .rail, .side-col{ display:none; }
  .kv-shell{ margin-left:0; flex-direction:column; }
  .topnav ul{ display:none; }
  .topnav-inner{ padding:16px 20px; }
  .topnav-cta-group{ display:none !important; }
  .mobile-logo{ display:flex; font-size:1.15rem; }
  .mobile-burger{ display:block; }
  .kv-page section{ padding:56px 24px; }
  .hero-photo{ padding:0 24px; align-items:flex-start; text-align:left;}
  .hero-badge{ font-size:1.5rem; }
  .color-photo-inner{ margin:0 20px; padding:28px 24px; max-width:none; }
  .color-photo{ min-height:460px; }
  .color-photo-bg{ align-items:stretch; }
  .color-photo-bg div{ position:relative; background-position:top center !important; }
  .color-photo-bg div::after{
    content:attr(data-name);
    position:absolute; left:0; right:0; bottom:0;
    padding:14px 4px 12px;
    background:linear-gradient(to top, rgba(10,10,12,.75), transparent 75%);
    color:#fff; font-size:.62rem; font-weight:700; letter-spacing:.01em; line-height:1.2;
    text-align:center; text-shadow:0 2px 6px rgba(0,0,0,.5);
  }
  .cat-head{ padding:40px 24px 0; }
  .cat-tabs{ padding:0 24px; top:65px; }
  .cat-panel{ padding:32px 24px 60px; }
  .cat-grid{ grid-template-columns:repeat(2,1fr); gap:18px;}
  .tile-grid{ grid-template-columns:1fr; }
  .p-hero{ padding:40px 24px 0; flex-direction:column; min-height:0;}
  .p-hero-text{ max-width:none; padding-bottom:30px;}
  .p-hero h1{ font-size:2.1rem;}
  .p-hero-photo img{ max-height:280px;}
  .banner-inner{ padding:40px 24px; }
  .mega{ position:static; width:auto; box-shadow:none; padding:24px; display:none; }
  .nav-item.mega-open .mega{ display:block; }
  .mega-vikna-grid{ grid-template-columns:repeat(2,1fr); }
  .mega-bottom{ flex-direction:column; gap:26px; }
  .mega-bottom .mega-col{ border-left:none; padding-left:0; }
}
@media (max-width:420px){
  .topnav-inner{ padding:14px 16px; }
  .mobile-logo{ font-size:1.02rem; }
  .mobile-logo .chip{ width:20px; height:20px; }
  .mobile-drawer{ width:100vw; }
}
@media (max-width:560px){
  .cat-grid{ grid-template-columns:1fr; }
  .spec-grid{ grid-template-columns:1fr;}
  .feat-grid{ grid-template-columns:1fr;}
  .lam-grid{ grid-template-columns:1fr; }
  .price-table{ display:block; overflow-x:auto; white-space:nowrap; }
  .price-table th, .price-table td{ padding:12px 14px; }
  .stat-strip{ gap:10px; }
  .stat-box{ min-width:96px; padding:14px 12px; }
  .system-card{ padding:24px 20px; }
}

/* ══════════════════════════════════════════════════════════════════════
   Адмінка — легкий ребрендинг під палітру Krasnevikno, поверх Bootstrap 5
   ══════════════════════════════════════════════════════════════════════ */
.admin-sidebar{ background:#fff; border-right:1px solid var(--line); }
.admin-sidebar .nav-link{ color:var(--ink); border-radius:8px; font-size:.92rem; padding:.5rem .75rem; }
.admin-sidebar .nav-link:hover{ background:#f4f5f7; }
.admin-sidebar .nav-link.active{ background:#eaf6fd; color:var(--blue-dark); font-weight:700; }
.btn-primary{ background-color:var(--blue) !important; border-color:var(--blue) !important; }
.btn-primary:hover{ background-color:var(--blue-dark) !important; border-color:var(--blue-dark) !important; }
.btn-outline-primary{ color:var(--blue) !important; border-color:var(--blue) !important; }
.btn-outline-primary:hover{ background-color:var(--blue) !important; color:#fff !important; }
.text-primary{ color:var(--blue) !important; }
.bg-primary{ background-color:var(--blue) !important; }

/* ══════════════════════════════════════════════════════════════════════
   Калькулятор — картки профілю/фурнітури з фото
   ══════════════════════════════════════════════════════════════════════ */
.cursor-pointer{ cursor:pointer; }
.profile-card, .fitting-card{ transition:border-color .15s ease, background-color .15s ease; }
.profile-card:hover, .fitting-card:hover{ border-color:var(--blue) !important; }
.fitting-thumb{
    height:96px; border-radius:6px; background-size:contain; background-repeat:no-repeat;
    background-position:center; background-color:#f4f5f7; border:1px solid var(--line);
}