:root {
      --bg:#f8f4ed; --paper:#fffaf2; --card:#ffffff; --dark:#21160f; --dark2:#2d1b10;
      --brown:#9a5f35; --gold:#c8853a; --gold2:#e8a856; --muted:rgba(33,22,15,.64);
      --line:rgba(33,22,15,.12); --soft:#f2eadf; --shadow:0 24px 70px rgba(33,22,15,.14);
    }
    *{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth;scroll-padding-top:0}
    body{font-family:'Manrope',system-ui,sans-serif;background:var(--bg);color:var(--dark);overflow-x:hidden}
    a{color:inherit;text-decoration:none} button,input,textarea,select{font:inherit;color:inherit} button{-webkit-tap-highlight-color:transparent} a{-webkit-tap-highlight-color:transparent} button,a,input,select,textarea{accent-color:var(--brown)} img{max-width:100%;display:block}
    .container{width:min(1180px,calc(100% - 40px));margin:0 auto}

    .nav{position:sticky;top:0;z-index:700;background:rgba(248,244,237,.88);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
    .nav-inner{height:82px;display:flex;align-items:center;justify-content:space-between;gap:24px}
    .brand{display:flex;align-items:center;gap:14px;min-width:220px}
    .brand img{height:54px;width:auto}
    .brand-text{display:flex;flex-direction:column;gap:2px}
    .brand-name{font-size:13px;font-weight:900;letter-spacing:.22em}
    .brand-sub{font-size:12px;color:rgba(33,22,15,.56)}
    .nav-links{display:flex;gap:28px;align-items:center;list-style:none;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.12em}
    .nav-links a{color:rgba(33,22,15,.68)} .nav-links a:hover{color:var(--brown)}
    .nav-actions{display:flex;align-items:center;gap:10px}
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:999px;padding:14px 22px;font-weight:850;border:1px solid transparent;cursor:pointer;transition:.22s ease;white-space:nowrap}
    .btn:hover{transform:translateY(-1px)} .btn-dark{background:var(--dark2);color:white;box-shadow:0 16px 35px rgba(33,22,15,.16)} .btn-dark:hover{background:#4b2b18}
    .btn-light{background:rgba(255,255,255,.76);border-color:var(--line)} .btn-light:hover{background:white}
    .mobile-btn{display:none;width:44px;height:44px;border-radius:999px;border:1px solid var(--line);background:white;font-size:22px;color:var(--dark);-webkit-tap-highlight-color:transparent}
    .mobile-panel{display:none}

    .hero{position:relative;overflow:hidden;padding:80px 0 0;min-height:calc(100vh - 82px)}
    .hero:before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 18% 5%,rgba(200,133,58,.24),transparent 34%),radial-gradient(circle at 82% 18%,rgba(45,27,16,.11),transparent 32%),linear-gradient(90deg,rgba(154,95,53,.04) 1px,transparent 1px);background-size:auto,auto,80px 80px;pointer-events:none}
    .hero-grid{position:relative;display:grid;grid-template-columns:1.03fr .97fr;gap:58px;align-items:center}
    .eyebrow{display:inline-flex;align-items:center;gap:12px;margin-bottom:24px;color:var(--brown);font-size:12px;font-weight:900;letter-spacing:.22em;text-transform:uppercase}
    .eyebrow:before{content:'';width:42px;height:1px;background:var(--gold)}
    h1{font-family:'Playfair Display',serif;font-size:clamp(48px,7vw,82px);line-height:1.05;letter-spacing:-.045em;font-weight:700;margin:0;padding-bottom:6px}
    h1 em,.section-title em{color:var(--brown);font-style:italic}
    .hero-sub{margin-top:25px;max-width:650px;color:var(--muted);font-size:19px;line-height:1.8;font-weight:400}
    .hero-btns{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap}
    .quick-stats{margin-top:38px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:680px}
    .qstat{background:rgba(255,255,255,.66);border:1px solid rgba(255,255,255,.85);border-radius:24px;padding:16px;box-shadow:0 10px 28px rgba(33,22,15,.06)}
    .qstat strong{font-family:'Playfair Display',serif;color:var(--brown);font-size:26px;display:block;line-height:1}
    .qstat span{font-size:11px;color:rgba(33,22,15,.54);font-weight:800;text-transform:uppercase;letter-spacing:.08em;display:block;margin-top:7px}

    .showcase{background:white;border:1px solid var(--line);border-radius:36px;overflow:hidden;box-shadow:var(--shadow)}
    .showcase-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line);background:rgba(255,250,242,.9)}
    .showcase-head span{font-size:12px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--brown)}
    .dots{display:flex;gap:7px} .dot{width:9px;height:9px;border-radius:50%;background:var(--gold)}
    .strips{padding:22px;display:flex;flex-direction:column;gap:5px;background:var(--paper)}
    .strip{height:48px;border-radius:7px;position:relative;overflow:hidden}
    .strip:after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 1px,transparent 1px 34px),linear-gradient(115deg,rgba(255,255,255,.18),transparent 45%,rgba(0,0,0,.08))}
    .s1{background:linear-gradient(90deg,#3d2510,#5c3a1e,#7a4e2a,#6b4220,#8a5c30,#5c3a1e)}
    .s2{background:linear-gradient(90deg,#7a4e2a,#5c3a1e,#8a5c30,#6b4220,#9a6c3a,#7a4e2a)}
    .s3{background:linear-gradient(90deg,#6b4220,#9a6c3a,#5c3a1e,#7a4e2a,#8a5c30,#6b4220)}
    .s4{background:linear-gradient(90deg,#8a5c30,#6b4220,#9a6c3a,#5c3a1e,#7a4e2a,#8a5c30)}
    .s5{background:linear-gradient(90deg,#5c3a1e,#8a5c30,#7a4e2a,#9a6c3a,#6b4220,#5c3a1e)}
    .showcase-foot{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
    .metric{padding:18px 10px;text-align:center;border-right:1px solid var(--line);background:white} .metric:last-child{border-right:none}
    .metric-val{font-family:'Playfair Display',serif;font-size:25px;font-weight:700;color:var(--brown)} .metric-key{font-size:10px;color:rgba(33,22,15,.48);text-transform:uppercase;letter-spacing:.12em;font-weight:900;margin-top:4px}
    .badge-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:14px}
    .badge-box{background:white;border:1px solid var(--line);border-radius:24px;padding:17px;display:flex;gap:12px;align-items:flex-start;box-shadow:0 10px 26px rgba(33,22,15,.06)}
    .badge-icon{width:30px;height:30px;border-radius:12px;display:grid;place-items:center;background:var(--soft);color:var(--brown);font-weight:900;flex:none}
    .badge-text{font-size:13px;line-height:1.45;color:var(--muted)} .badge-text strong{display:block;color:var(--dark);font-weight:900;margin-bottom:2px}

    .marquee{overflow:hidden;background:var(--gold);padding:12px 0} .track{display:flex;gap:36px;white-space:nowrap;animation:marquee 24s linear infinite} .item{font-size:12px;font-weight:900;letter-spacing:.22em;text-transform:uppercase;color:var(--dark);display:flex;gap:24px;align-items:center} .sep{width:5px;height:5px;border-radius:50%;background:rgba(33,22,15,.35)} @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

    section{padding:88px 0} .section-head{display:flex;justify-content:space-between;align-items:end;gap:34px;margin-bottom:42px} .section-title{font-family:'Playfair Display',serif;font-size:clamp(36px,5vw,58px);line-height:1.15;letter-spacing:-.035em;font-weight:700;padding-bottom:4px} .section-desc{max-width:560px;color:var(--muted);line-height:1.75}
    .thermo{background:var(--paper)} .thermo-grid{display:grid;grid-template-columns:1fr 1fr;gap:58px;align-items:center} .thermo-body p{color:var(--muted);line-height:1.9;margin-top:17px}
    .props{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:28px} .prop{background:white;border:1px solid var(--line);border-radius:28px;padding:22px;box-shadow:0 10px 28px rgba(33,22,15,.05)} .prop-icon{width:36px;height:36px;border-radius:14px;background:var(--soft);display:grid;place-items:center;color:var(--brown);font-weight:950;margin-bottom:14px} .prop-title{font-size:13px;color:var(--brown);font-weight:950;text-transform:uppercase;letter-spacing:.12em;margin-bottom:8px} .prop-text{font-size:13px;color:var(--muted);line-height:1.6}
    .thermo-visual{position:relative} .bigwood{height:350px;border-radius:34px;overflow:hidden;box-shadow:var(--shadow);position:relative;background:linear-gradient(135deg,#3d2510 0%,#5c3a1e 15%,#7a4e2a 30%,#9a6c3a 45%,#6b4220 55%,#8a5c30 70%,#5c3a1e 82%,#7a4e2a 100%)} .bigwood:after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.08) 0 1px,transparent 1px 7px),linear-gradient(120deg,rgba(255,255,255,.14),transparent 50%,rgba(0,0,0,.08))} .temp-badge{position:absolute;top:22px;right:22px;z-index:2;background:rgba(255,250,242,.9);border:1px solid rgba(154,95,53,.2);border-radius:18px;padding:13px 18px;box-shadow:0 16px 34px rgba(0,0,0,.12)} .temp-badge strong{display:block;color:var(--brown);font-weight:950;letter-spacing:.14em;text-transform:uppercase;font-size:12px} .temp-badge span{font-size:11px;color:var(--muted);font-weight:800;text-transform:uppercase}
    .profiles{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px} .profile{height:58px;border-radius:14px;background:linear-gradient(180deg,#8a5c30,#5c3a1e);display:grid;place-items:center;color:white;font-size:12px;font-weight:900;letter-spacing:.1em}

    .products-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px} .card{background:white;border:1px solid var(--line);border-radius:30px;overflow:hidden;box-shadow:0 10px 30px rgba(33,22,15,.07);cursor:pointer;transition:.25s ease;text-align:left} .card:hover{transform:translateY(-6px);box-shadow:0 28px 70px rgba(33,22,15,.14)} .thumb{height:220px;position:relative;overflow:hidden} .thumb:after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(33,22,15,.75),transparent 65%)}    .view{position:absolute;left:18px;bottom:18px;z-index:2;color:white;font-size:11px;font-weight:900;letter-spacing:.18em;text-transform:uppercase} .card-body{padding:22px} .num{font-size:11px;color:rgba(33,22,15,.34);font-weight:900;letter-spacing:.18em;text-transform:uppercase;margin-bottom:7px} .prod-name{font-family:'Playfair Display',serif;font-size:24px;line-height:1.08;font-weight:700} .prod-desc{font-size:13px;color:var(--muted);line-height:1.65;margin-top:10px} .tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:15px} .tag{font-size:10px;padding:5px 9px;border:1px solid rgba(154,95,53,.22);color:var(--brown);border-radius:999px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}

    .why{background:var(--soft)} .why-grid{display:grid;grid-template-columns:1fr .78fr;gap:58px;align-items:start} .why-list{display:flex;flex-direction:column;gap:20px;margin-top:28px} .why-item{display:flex;gap:18px;background:white;border:1px solid var(--line);border-radius:28px;padding:22px} .why-num{font-family:'Playfair Display',serif;font-size:36px;color:rgba(154,95,53,.25);font-weight:700;line-height:1;width:52px;flex:none} .why-body-title{font-weight:950;margin-bottom:7px} .why-body-text{font-size:14px;color:var(--muted);line-height:1.7} .stat-panel{background:var(--dark2);color:white;border-radius:36px;padding:32px;box-shadow:var(--shadow)} .stat-big{padding:22px 0;border-bottom:1px solid rgba(255,255,255,.12)} .stat-big:last-child{border-bottom:none} .stat-big strong{font-family:'Playfair Display',serif;font-size:54px;color:var(--gold2);display:block;line-height:1} .stat-big span{color:rgba(255,255,255,.68);font-size:14px;line-height:1.6}

    .contact{background:var(--paper)} .contact-grid{display:grid;grid-template-columns:1fr .72fr;gap:56px} .form{display:flex;flex-direction:column;gap:16px} .row{display:grid;grid-template-columns:1fr 1fr;gap:16px} label{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:rgba(33,22,15,.56);font-weight:900;margin-bottom:8px} input,textarea,select{width:100%;border:1px solid var(--line);background:white;border-radius:18px;padding:15px 16px;outline:none;color:var(--dark)} textarea{min-height:130px;resize:vertical} input:focus,textarea:focus,select:focus{border-color:var(--brown)} .sidebar{background:white;border:1px solid var(--line);border-radius:34px;padding:30px;box-shadow:0 10px 30px rgba(33,22,15,.06)} .detail{padding:18px 0;border-bottom:1px solid var(--line)} .detail:first-child{padding-top:0} .detail:last-child{border-bottom:none;padding-bottom:0} .label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(33,22,15,.42);font-weight:900;margin-bottom:7px} .value{font-weight:850;display:block;line-height:1.6} .sub{color:var(--muted);font-size:14px} .socials{display:flex;gap:10px;margin-top:12px} .social{width:42px;height:42px;border:1px solid var(--line);border-radius:999px;display:grid;place-items:center;font-weight:900;color:var(--brown);background:var(--soft)}
    .banner{background:var(--gold);padding:16px 0} .banner-inner{display:flex;justify-content:space-between;align-items:center;gap:20px;font-weight:900;color:var(--dark)} .footer{background:var(--dark2);color:white;padding:36px 0} .footer-grid{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap} .footer-logo{font-family:'Playfair Display',serif;font-size:24px;color:var(--gold2)} .footer-copy{color:rgba(255,255,255,.52);font-size:13px}

    .modal-bg{display:none;position:fixed;inset:0;background:rgba(33,22,15,.58);z-index:100;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(7px)} .modal-bg.open{display:flex} .modal{background:white;border-radius:34px;max-width:900px;width:100%;max-height:86vh;overflow:auto;box-shadow:0 30px 90px rgba(0,0,0,.28)} .modal-top{display:flex;align-items:center;justify-content:space-between;padding:24px 30px;border-bottom:1px solid var(--line)} .modal-title{font-family:'Playfair Display',serif;font-size:32px;font-weight:700} .close{width:42px;height:42px;border-radius:999px;border:1px solid var(--line);background:white;font-size:24px;cursor:pointer} .modal-inner{padding:30px} .modal-hero{height:300px;border-radius:24px;margin-bottom:22px;position:relative;overflow:hidden} .modal-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-radius:20px;overflow:hidden;margin-bottom:22px} .modal-metrics .metric{border:0} .modal-text{color:var(--muted);line-height:1.85} .modal-cta{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:22px}

    @media(max-width:1050px){.nav-links{display:none}.mobile-btn{display:grid;place-items:center}.mobile-panel.open{display:flex;flex-direction:column;gap:14px;padding-bottom:18px;font-weight:850}.hero-grid,.thermo-grid,.why-grid,.contact-grid{grid-template-columns:1fr}.products-grid{grid-template-columns:repeat(2,1fr)}.quick-stats{grid-template-columns:repeat(2,1fr)}}
    @media(max-width:640px){.container{width:min(100% - 28px,1180px)}.brand-text{display:none}.brand{min-width:0}.nav-actions{gap:8px}.hero{padding:44px 0 0;min-height:calc(100vh - 82px)}.section-head{flex-direction:column;align-items:start}.products-grid,.props,.row,.badge-grid,.modal-metrics{grid-template-columns:1fr}.showcase-foot{grid-template-columns:repeat(2,1fr)}.banner-inner{flex-direction:column;text-align:center}}
  

    /* READABILITY UPDATE */
    body { font-size: 16.5px; }
    .hero-sub {
      font-size: 21px;
      line-height: 1.78;
      font-weight: 600;
      color: rgba(33,22,15,.78);
      max-width: 700px;
    }
    .section-desc,
    .thermo-body p,
    .why-body-text,
    .prod-desc,
    .modal-text,
    .contact-note,
    .footer p {
      font-size: 16.5px !important;
      line-height: 1.82 !important;
      font-weight: 560 !important;
      color: rgba(33,22,15,.76) !important;
    }
    .prop-text,
    .badge-text,
    .use-tag,
    .cd-sub,
    .form-note {
      font-size: 14.5px !important;
      line-height: 1.65 !important;
      font-weight: 600 !important;
      color: rgba(33,22,15,.70) !important;
    }
    .prod-name,
    .why-body-title,
    .prop-title,
    .cd-val,
    label,
    .metric-key,
    .qstat span {
      font-weight: 900 !important;
    }
    .product-card, .prod-card, .prop, .badge-box, .why-item, .contact-detail {
      color: var(--dark);
    }
    input, textarea, select {
      font-size: 16px !important;
      font-weight: 600 !important;
      color: var(--dark) !important;
    }
    .nav-links, .btn { font-size: 14px; }
    @media (max-width: 640px) {
      body { font-size: 16px; }
      .hero-sub { font-size: 18px; line-height: 1.72; }
      .section-desc, .thermo-body p, .why-body-text, .prod-desc, .modal-text {
        font-size: 15.5px !important;
      }
    }


  /* ===== ENHANCED VISUAL EFFECTS ===== */

  /* Scroll reveal */
  .reveal {
    opacity: 0;
    transform: translateY(38px);
    transition: opacity 0.7s cubic-bezier(.22,1,.36,1), transform 0.7s cubic-bezier(.22,1,.36,1);
  }
  .reveal.visible {
    opacity: 1;
    transform: none;
  }
  .reveal-delay-1 { transition-delay: 0.1s; }
  .reveal-delay-2 { transition-delay: 0.2s; }
  .reveal-delay-3 { transition-delay: 0.3s; }
  .reveal-delay-4 { transition-delay: 0.4s; }

  /* 3D Tilt card effect */
  .card {
    transform-style: preserve-3d;
    transition: transform 0.15s ease, box-shadow 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, transparent 50%, rgba(0,0,0,0.04) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
    pointer-events: none;
    border-radius: inherit;
  }
  .card:hover::before { opacity: 1; }

  /* Glint sweep on hover */
  .card::after {
    content: '';
    position: absolute;
    top: -60%;
    left: -60%;
    width: 60%;
    height: 220%;
    background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,0.28) 50%, transparent 80%);
    transform: skewX(-15deg) translateX(-100%);
    transition: none;
    z-index: 3;
    pointer-events: none;
  }
  .card:hover::after {
    transition: transform 0.55s cubic-bezier(.4,0,.2,1);
    transform: skewX(-15deg) translateX(360%);
  }

  /* Thumb zoom on hover */
  .thumb {
    transition: transform 0.5s cubic-bezier(.22,1,.36,1);
    overflow: hidden;
  }
  .card:hover .thumb {
    transform: scale(1.045);
  }
  .view {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  .card:hover .view {
    opacity: 1;
    transform: translateY(0);
  }

  /* ===== LIGHTBOX / IMAGE POPUP ===== */
  .lightbox-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 900;
    align-items: flex-start;       /* центрування дає margin:auto на .lightbox-inner */
    justify-content: center;
    background: rgba(10,5,2,0.92);
    backdrop-filter: blur(20px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
    overflow-y: auto;              /* контент вищий за вікно → прокрутка, а не обрізання */
    -webkit-overflow-scrolling: touch;
    padding: 24px 16px;
  }
  .lightbox-overlay.active {
    display: flex;
    opacity: 1;
    pointer-events: all;
  }
  .lightbox-inner {
    position: relative;
    max-width: min(920px, 94vw);
    width: 100%;
    margin: auto;                  /* вертикальне центрування коли вміщається, інакше — прокрутка */
    background: var(--paper);
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 60px 140px rgba(0,0,0,0.5);
    transform: scale(0.88) translateY(24px);
    transition: transform 0.4s cubic-bezier(.22,1,.36,1);
  }
  .lightbox-overlay.active .lightbox-inner {
    transform: scale(1) translateY(0);
  }
  /* iOS Safari: круглі кнопки галереї отримують власний чистий шар,
     інакше прозорі кути беруть темний фон-предок і виглядають як чорний квадрат */
  #lwdm-arrow-prev, #lwdm-arrow-next { transform: translateY(-50%) translateZ(0) !important; }
  #lwdm-toggle-3d, #lwdm-toggle-photo { transform: translateZ(0) !important; }
  #lwdm-gallery-dots > * { transform: translateZ(0); }
  #lwdm-arrow-prev, #lwdm-arrow-next, #lwdm-toggle-3d, #lwdm-toggle-photo,
  #lwdm-gallery-dots > *, .lightbox-close {
    -webkit-backface-visibility: hidden; backface-visibility: hidden;
    will-change: transform;
  }
  .lightbox-visual {
    width: 100%;
    height: 340px;
    position: relative;
    overflow: hidden;
  }
  .lightbox-visual .lb-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 8s ease;
  }
  .lightbox-overlay.active .lb-bg {
    transform: scale(1.04);
  }
  .lightbox-visual::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 40%, rgba(10,5,2,0.55) 100%);
  }
  .lightbox-badge {
    position: absolute;
    bottom: 20px;
    left: 24px;
    z-index: 2;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  .lb-tag {
    background: rgba(200,133,58,0.9);
    color: white;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 999px;
    backdrop-filter: blur(8px);
  }
  .lightbox-body {
    padding: 32px 36px 36px;
  }
  .lightbox-title {
    font-family: 'Playfair Display', serif;
    font-size: 32px;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 8px;
    line-height: 1.1;
  }
  .lightbox-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin: 20px 0;
    padding: 16px;
    background: var(--soft);
    border-radius: 16px;
  }
  .lightbox-metric { text-align: center; }
  .lightbox-metric .v {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--brown);
    display: block;
  }
  .lightbox-metric .k {
    font-size: 10px;
    color: rgba(33,22,15,.5);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 800;
    display: block;
    margin-top: 3px;
  }
  .lightbox-desc {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.75;
    margin-bottom: 24px;
  }
  .lightbox-actions {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
  }
  .lightbox-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    border: none;
    font-size: 20px;
    cursor: pointer;
    display: grid;
    place-items: center;
    z-index: 10;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    transition: background 0.2s, transform 0.2s;
    color: var(--dark);
  }
  .lightbox-close:hover { background: white; transform: rotate(90deg); }

  /* Floating particles on hero */
  .particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
  }
  .particle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--gold);
    opacity: 0;
    animation: float-particle var(--dur, 6s) var(--delay, 0s) infinite ease-in-out;
  }
  @keyframes float-particle {
    0% { transform: translateY(0) scale(1); opacity: 0; }
    20% { opacity: 0.4; }
    80% { opacity: 0.15; }
    100% { transform: translateY(-120px) scale(0.4); opacity: 0; }
  }

  /* Animated counter */
  .qstat strong { transition: transform 0.3s ease; }
  .qstat:hover strong { transform: scale(1.15); color: var(--gold2); }
  .qstat { transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: default; }
  .qstat:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(33,22,15,.12); }

  /* Smooth modal enhancement */
  .modal-bg { display: none; transition: opacity 0.3s ease; opacity: 0; pointer-events: none; }
  .modal-bg.open { display: flex; opacity: 1; pointer-events: all; }
  .modal { transition: transform 0.4s cubic-bezier(.22,1,.36,1), opacity 0.3s ease; transform: translateY(28px) scale(0.97); opacity: 0; }
  .modal-bg.open .modal { transform: none; opacity: 1; }

  /* Stripe hover effect on strip visual */
  .strip { cursor: crosshair; }
  .strip:hover { transform: scaleY(1.06); z-index: 2; }
  .strip { transition: transform 0.25s ease; }

  /* Gold shimmer on badge */
  .badge-box {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  }
  .badge-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 48px rgba(33,22,15,.12);
    border-color: var(--gold2);
  }

  /* Why item hover */
  .why-item {
    transition: transform 0.3s ease;
    cursor: default;
  }
  .why-item:hover { transform: translateX(6px); }

  /* Prop hover */
  .prop {
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  }
  .prop:hover {
    background: white;
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(33,22,15,.09);
  }

  /* Social button hover */
  .social {
    transition: transform 0.25s ease, background 0.25s ease;
  }
  .social:hover { transform: scale(1.18) rotate(-5deg); }

  /* Button pulse on CTA */
  .btn-dark {
    position: relative;
    overflow: hidden;
  }
  .btn-dark::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.12) 50%, transparent 100%);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
  }
  .btn-dark:hover::after {
    transform: translateX(100%);
  }

  /* Number counter animation */
  @keyframes countUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .stat-big.counted strong {
    animation: countUp 0.6s ease forwards;
  }

  /* Toast notification */
  .toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(80px);
    background: var(--dark2);
    color: white;
    padding: 14px 28px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    z-index: 999;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    transition: transform 0.4s cubic-bezier(.22,1,.36,1);
    white-space: nowrap;
  }
  .toast.show {
    transform: translateX(-50%) translateY(0);
  }

  /* Image tooltip on product cards */
  .card-img-tooltip {
    position: fixed;
    pointer-events: none;
    z-index: 100;
    border-radius: 20px;
    overflow: hidden;
    width: 240px;
    height: 160px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.35);
    opacity: 0;
    transform: scale(0.85) rotate(-3deg);
    transition: opacity 0.25s ease, transform 0.3s cubic-bezier(.22,1,.36,1);
    will-change: transform, opacity;
  }
  .card-img-tooltip.active {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
  .card-img-tooltip .tip-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
  }
  .card-img-tooltip .tip-label {
    position: absolute;
    bottom: 10px;
    left: 12px;
    color: white;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
  }

  /* Scroll progress bar */
  .scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brown), var(--gold2));
    z-index: 999;
    transition: width 0.1s linear;
    border-radius: 0 3px 3px 0;
  }

  /* Enhanced section entrance */
  .section-head { overflow: hidden; }

  /* CTA section pulse ring */
  .btn-dark:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(200,133,58,0.3);
  }

  @media (max-width: 768px) {
    .lightbox-metrics { grid-template-columns: repeat(2, 1fr); }
    .lightbox-body { padding: 22px 20px 28px; }
    .lightbox-visual { height: 220px; }
    .lightbox-title { font-size: 24px; }
    .card-img-tooltip { display: none; }
    /* Прокрутка та відступ під нотч/статус-бар */
    .lightbox-overlay { align-items: flex-start; padding: 16px 12px; overflow-y: auto; }
    .lightbox-inner { max-height: none; overflow: visible; margin: auto; }
    .lightbox-close { top: 12px; right: 12px; width: 38px; height: 38px; }
  }


  /* ===== CATEGORY BLOCKS ===== */
  .cat-block { margin-bottom: 48px; }
  .cat-label {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 12px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase;
    color: var(--brown); margin-bottom: 16px;
    padding: 7px 16px; background: var(--soft); border-radius: 999px;
    border: 1px solid rgba(154,95,53,.18);
  }
  .cat-icon { font-size: 15px; }
  .sub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
  .sub-badge {
    position: absolute; top: 14px; left: 14px; z-index: 4;
    background: rgba(200,133,58,.92); color: white;
    font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase;
    padding: 5px 12px; border-radius: 999px;
  }
  .price-pill {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--soft); border: 1px solid rgba(154,95,53,.2);
    color: var(--brown); font-size: 13px; font-weight: 900;
    padding: 6px 14px; border-radius: 999px; margin: 10px 0 8px;
  }
  .price-sale { background: #fff3e0; border-color: #e8a856; }
  .price-note {
    font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
    background: var(--gold2); color: white; padding: 2px 7px; border-radius: 999px;
  }
  /* ===== IN-LIGHTBOX PALETTE ===== */
  .lb-palette { margin-top: 4px; }
  .lb-pal-title { font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--brown); margin-bottom: 12px; }
  .lb-pal-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; margin-bottom: 12px; }
  .lb-sw {
    cursor: pointer; border-radius: 14px; overflow: visible;
    border: 3px solid transparent; transition: border-color .2s, transform .2s, box-shadow .2s;
    background: white; box-shadow: 0 2px 8px rgba(33,22,15,.08);
  }
  .lb-sw > .lb-sw-wood { border-radius: 11px; overflow: hidden; }
  .lb-sw:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(33,22,15,.14); }
  .lb-sw-on { border-color: var(--gold) !important; box-shadow: 0 0 0 2px rgba(200,133,58,.35), 0 8px 24px rgba(200,133,58,.25) !important; transform: translateY(-3px); }
  .lb-sw-wood { height: 50px; position: relative; }
  .lb-sw-wood::after { content:''; position:absolute; inset:0; background: repeating-linear-gradient(8deg,transparent 0 4px,rgba(0,0,0,.04) 4px 5px,transparent 5px 11px); }
  .lb-sw-name { padding: 5px 3px 7px; text-align: center; font-size: 9px; font-weight: 800; color: var(--dark); line-height: 1.2; }
  .sw-mokko   { background: linear-gradient(160deg,#d4a055,#c08a3a,#b07830); }
  .sw-grey    { background: linear-gradient(160deg,#c4b89a,#b0a485,#a09070); }
  .sw-popil   { background: linear-gradient(160deg,#b8b0a0,#a09888,#908878); }
  .sw-white   { background: linear-gradient(160deg,#e8e0d4,#ddd5c8,#d0c8bc); }
  .sw-darkoak { background: linear-gradient(160deg,#7a5028,#6a4020,#5a3018); }
  .sw-lightoak{ background: linear-gradient(160deg,#d4992a,#c08820,#c89030); }
  .sw-choco   { background: linear-gradient(160deg,#8b4a18,#7a3c10,#6a3008); }
  .sw-vintage { background: linear-gradient(160deg,#6e4c28,#5e3c1e,#4e2e14); }
  .sw-walnut  { background: linear-gradient(160deg,#c8882a,#b87818,#c88828); }
  .sw-tobacco { background: linear-gradient(160deg,#a06820,#905818,#804810); }
  .lb-sw-result {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 14px; background: var(--soft); border-radius: 10px;
    font-size: 13px; font-weight: 700; color: var(--dark);
  }
  .lb-sw-dot { width: 16px; height: 16px; border-radius: 50%; flex: none; border: 2px solid rgba(33,22,15,.15); background: #ccc; display: inline-block; }
  @media(max-width:640px){
    .sub-grid { grid-template-columns: 1fr; }
    .lb-pal-grid { grid-template-columns: repeat(4, 1fr); gap: 7px; }
  }
  /* ===== MASSIVE SECTION LAYOUT ===== */
  .massive-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 24px;
    align-items: stretch;
  }
  .massive-layout .card { margin: 0; }

  .palette-preview {
    background: white;
    border: 1px solid var(--line);
    border-radius: 30px;
    padding: 28px 28px 22px;
    box-shadow: 0 10px 30px rgba(33,22,15,.07);
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .pp-header { }
  .pp-title {
    font-family: 'Playfair Display', serif;
    font-size: 22px; font-weight: 700; color: var(--dark);
    margin-bottom: 4px;
  }
  .pp-sub {
    font-size: 13px; color: var(--brown); font-weight: 800;
    letter-spacing: .08em; text-transform: uppercase;
  }
  .pp-swatches {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    flex: 1;
  }
  /* ---- Новий дизайн свотчів з фото + підпис знизу ---- */
  .lwdm-pp-swatch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    border-radius: 14px;
    border: 2.5px solid transparent;
    padding: 5px 5px 7px;
    background: white;
    box-shadow: 0 2px 8px rgba(33,22,15,.07);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .lwdm-pp-swatch-img {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
  }
  .lwdm-pp-swatch span {
    font-family: 'Manrope', sans-serif;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--dark);
    text-align: center;
    line-height: 1.2;
  }
  .lwdm-pp-swatch:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(33,22,15,.13);
    z-index: 2;
  }
  .lwdm-pp-swatch.active {
    border-color: var(--brown);
    box-shadow: 0 0 0 2px rgba(200,133,58,.25), 0 6px 20px rgba(33,22,15,.15);
    transform: translateY(-3px);
    z-index: 2;
  }
  .lwdm-pp-swatch.active:hover {
    transform: translateY(-4px);
  }

  .pp-selected-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    background: var(--soft);
    border-radius: 16px;
    margin-top: 4px;
    animation: fadeInUp .3s ease;
  }
  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .pp-selected-name {
    font-size: 15px;
    font-weight: 800;
    color: var(--dark);
  }
  .pp-selected-name::before {
    content: 'Обраний відтінок: ';
    font-weight: 600;
    color: var(--muted);
    font-size: 13px;
  }
  .pp-order-btn {
    white-space: nowrap;
    padding: 10px 22px !important;
    font-size: 13px !important;
  }

  .pp-cta {
    font-size: 13px; font-weight: 700; color: var(--muted);
    letter-spacing: .03em; text-align: center;
    padding: 10px; background: var(--soft);
    border-radius: 12px; margin-top: auto;
  }

  @media (max-width: 860px) {
    .massive-layout { grid-template-columns: 1fr; }
    .pp-swatches { grid-template-columns: repeat(5, 1fr); }
  }
  @media (max-width: 540px) {
    .pp-swatches { grid-template-columns: repeat(5, 1fr); gap: 6px; }
    .lwdm-pp-swatch { padding: 4px 4px 6px; border-radius: 11px; }
    .lwdm-pp-swatch-img { border-radius: 8px; }
    .lwdm-pp-swatch span { font-size: 8.5px; letter-spacing: .05em; }
  }
  @media (max-width: 380px) {
    .pp-swatches { grid-template-columns: repeat(5, 1fr); gap: 5px; }
  }


  /* ===== INPUT VALIDATION STYLES ===== */
  input.input-error {
    border-color: #e05050 !important;
    background: #fff5f5 !important;
    animation: inputShake .3s ease;
  }
  @keyframes inputShake {
    0%,100%{transform:translateX(0)}
    25%{transform:translateX(-4px)}
    75%{transform:translateX(4px)}
  }
  input.input-ok {
    border-color: rgba(60,160,80,.5) !important;
  }

  /* Fix clipped descenders in headings (у, р, etc.) */
  h1, h2, .section-title, .modal-title, .lightbox-title {
    overflow: visible !important;
    padding-bottom: 4px;
  }
  .section-head { overflow: visible !important; }
  /* Акція badge in metrics */
  .lightbox-metric .k {
    font-size: 10px;
    color: rgba(33,22,15,.5);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 800;
    display: block;
    margin-top: 3px;
  }
  .lightbox-metric .k:has-text {
    color: var(--brown);
  }

  /* ===== LIGHTBOX PRICE BLOCK ===== */
  .lb-price-block {
    background: var(--dark2);
    border-radius: 20px;
    padding: 18px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }
  .lb-price-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255,255,255,.5);
  }
  .lb-price-value {
    font-family: 'Playfair Display', serif;
    font-size: 32px;
    font-weight: 700;
    color: var(--gold2);
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1;
  }
  .lb-price-currency {
    font-size: 14px;
    font-weight: 800;
    color: rgba(255,255,255,.5);
    font-family: 'Manrope', sans-serif;
    letter-spacing: .06em;
  }
  .lb-price-tag {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
    background: var(--gold2);
    color: white;
    padding: 4px 10px;
    border-radius: 999px;
    font-family: 'Manrope', sans-serif;
  }
  .lightbox-metric .k, .lightbox-metric .v {
    user-select: none;
    -webkit-user-select: none;
  }
  /* Metrics now 3 columns */
  .lightbox-metrics {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* ===== LIGHTBOX VISUAL PRICE (top-right of image) ===== */
  .lb-visual-price {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 5;
  }
  .lb-vis-price {
    background: rgba(10,5,2,0.75);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 18px;
    padding: 14px 20px;
    text-align: right;
  }
  .lb-vis-price-val {
    font-family: 'Playfair Display', serif;
    font-size: 36px;
    font-weight: 700;
    color: var(--gold2);
    line-height: 1;
    margin-bottom: 4px;
  }
  .lb-vis-price-val span {
    font-size: 13px;
    font-weight: 800;
    color: rgba(255,255,255,.5);
    font-family: 'Manrope', sans-serif;
    letter-spacing: .06em;
    margin-left: 4px;
  }
  .lb-vis-price-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
    background: var(--gold2);
    color: white;
    padding: 3px 10px;
    border-radius: 999px;
    font-family: 'Manrope', sans-serif;
    margin-bottom: 4px;
  }
  .lb-vis-price-note {
    font-size: 10px;
    font-weight: 700;
    color: rgba(255,255,255,.4);
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-top: 4px;
  }

  /* Ціна на білій частині (справа зверху від опису) */
  .lb-body-price {
    position: absolute;
    top: 28px;
    right: 32px;
    text-align: right;
    z-index: 3;
  }
  .lb-body-price-val {
    font-family: 'Playfair Display', serif;
    font-size: 34px;
    font-weight: 700;
    color: var(--brown);
    line-height: 1;
  }
  .lb-body-price-val span {
    font-size: 13px;
    font-weight: 800;
    color: rgba(33,22,15,.45);
    font-family: 'Manrope', sans-serif;
    letter-spacing: .06em;
    margin-left: 4px;
  }
  .lb-body-price-note {
    font-size: 10px;
    font-weight: 800;
    color: rgba(33,22,15,.4);
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-top: 6px;
  }
  @media(max-width:640px){
    .lb-body-price { position: static; text-align: left; margin-bottom: 14px; }
    .lb-body-price-val { font-size: 28px; }
  }

  /* Приховати hero board-arc, поки відкритий лайтбокс — його 3D-трансформ
     (perspective + translateZ) просвічує над оверлеєм з backdrop-filter.
     display:none гарантовано прибирає композитний шар (visibility у Safari — ні) */
  body.lb-open .board-arc { display: none !important; }

  .lightbox-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  .lb-title-tag {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
    background: var(--gold2);
    color: white;
    padding: 5px 14px;
    border-radius: 999px;
    font-family: 'Manrope', sans-serif;
    vertical-align: middle;
  }

  .lb-sale-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 6;
    background: var(--gold2);
    color: white;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 999px;
    font-family: 'Manrope', sans-serif;
  }
  .lightbox-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  .lb-title-tag {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
    background: var(--gold2);
    color: white;
    padding: 5px 14px;
    border-radius: 999px;
    font-family: 'Manrope', sans-serif;
  }

  .sub-badge-sale {
    position: absolute; top: 14px; right: 14px; z-index: 4;
    background: var(--gold2); color: white;
    font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase;
    padding: 5px 12px; border-radius: 999px;
  }

  /* ===== CALCULATOR FORM ===== */
  .prod-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
  .prod-pill {
    padding: 10px 18px; border-radius: 999px;
    border: 1.5px solid var(--line); background: white;
    font-size: 13px; font-weight: 800; color: var(--dark);
    cursor: pointer; transition: all .2s ease;
    letter-spacing: .02em;
  }
  .prod-pill:hover { border-color: var(--brown); color: var(--brown); transform: translateY(-2px); }
  .prod-pill.active {
    background: var(--dark2); color: white;
    border-color: var(--dark2);
    box-shadow: 0 8px 24px rgba(33,22,15,.2);
    transform: translateY(-2px);
  }

  .calc-block {
    background: var(--soft); border-radius: 24px;
    padding: 24px; animation: fadeInUp .3s ease;
  }
  .calc-row { display: flex; flex-direction: column; gap: 20px; }
  .calc-stepper {
    display: flex; align-items: center; gap: 8px;
  }
  .step-btn {
    width: 44px; height: 44px; border-radius: 14px;
    border: 1.5px solid var(--line); background: white;
    font-size: 14px; font-weight: 900; color: var(--brown);
    cursor: pointer; transition: all .2s ease; flex: none;
  }
  .step-btn:hover { background: var(--brown); color: white; border-color: var(--brown); }
  #m2input {
    width: 90px; text-align: center; border-radius: 14px;
    border: 1.5px solid var(--brown); background: white;
    font-size: 22px; font-weight: 900; color: var(--dark);
    padding: 8px 12px; height: 44px;
  }
  .calc-result {
    background: var(--dark2); border-radius: 18px;
    padding: 20px 24px; display: flex;
    align-items: center; justify-content: space-between;
    animation: fadeInUp .3s ease; margin-top: 16px;
  }
  .calc-total-label {
    font-size: 11px; font-weight: 900; letter-spacing: .14em;
    text-transform: uppercase; color: rgba(255,255,255,.45);
  }
  .calc-total {
    font-family: 'Playfair Display', serif;
    font-size: 34px; font-weight: 700; color: var(--gold2);
    line-height: 1; margin-top: 4px;
  }
  .calc-note {
    font-size: 10px; color: rgba(255,255,255,.3);
    font-weight: 900; margin-top: 4px;
    letter-spacing: .1em; text-transform: uppercase;
  }
  .fasteners-check {
    display: flex; align-items: center; gap: 10px;
    margin-top: 14px; cursor: pointer;
    width: fit-content;
  }
  .fasteners-check input[type="checkbox"] {
    width: 20px; height: 20px; border-radius: 6px;
    border: 2px solid var(--brown); cursor: pointer;
    accent-color: var(--brown); flex: none;
  }
  .fasteners-check-label {
    font-size: 14px; font-weight: 800; color: var(--dark);
    cursor: pointer;
  }
  .fasteners-check-sub {
    font-size: 12px; color: var(--muted); margin-top: 2px;
  }
  .calc-discount {
    margin-top: 12px; padding: 16px 20px;
    background: linear-gradient(135deg, rgba(33,22,15,.96), rgba(74,46,22,.96));
    border-radius: 18px; animation: fadeInUp .3s ease;
    border: 1px solid rgba(232,168,86,.25);
  }
  .discount-row {
    display: flex; align-items: center;
    justify-content: space-between; gap: 16px; flex-wrap: wrap;
  }
  .discount-left { display: flex; align-items: center; gap: 14px; }
  .discount-badge {
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--gold2); color: white;
    font-size: 15px; font-weight: 900;
    display: grid; place-items: center; flex: none;
    box-shadow: 0 4px 16px rgba(232,168,86,.4);
  }
  .discount-title {
    font-size: 13px; font-weight: 900;
    color: white; letter-spacing: .04em;
  }
  .discount-save {
    font-size: 12px; color: var(--gold2);
    font-weight: 700; margin-top: 3px;
  }
  .discount-price { text-align: right; }
  .discount-price-label {
    font-size: 10px; font-weight: 800;
    letter-spacing: .1em; text-transform: uppercase;
    color: rgba(255,255,255,.4); margin-bottom: 4px;
  }
  .discount-price-val {
    font-family: 'Playfair Display', serif;
    font-size: 26px; font-weight: 700; color: var(--gold2);
    line-height: 1;
  }

  /* ===== CART BUTTON IN NAV ===== */
  .cart-nav-btn {
    position: relative; width: 44px; height: 44px;
    border-radius: 50%; border: 1.5px solid var(--line);
    background: white; cursor: pointer; font-size: 20px;
    display: grid; place-items: center;
    transition: transform .2s, box-shadow .2s;
    flex: none;
  }
  .cart-nav-btn:hover { transform: scale(1.1); box-shadow: 0 6px 20px rgba(33,22,15,.12); }
  .cart-nav-btn.shake { animation: cartShake .4s ease; }
  @keyframes cartShake {
    0%,100%{transform:rotate(0)}
    20%{transform:rotate(-15deg) scale(1.15)}
    40%{transform:rotate(12deg) scale(1.15)}
    60%{transform:rotate(-8deg)}
    80%{transform:rotate(5deg)}
  }
  .cart-badge {
    position: absolute; top: -4px; right: -4px;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--gold2); color: white;
    font-size: 10px; font-weight: 900; font-family: 'Manrope',sans-serif;
    display: grid; place-items: center;
    border: 2px solid white;
    animation: badgePop .3s cubic-bezier(.34,1.56,.64,1);
  }
  @keyframes badgePop { from{transform:scale(0)} to{transform:scale(1)} }

  /* ===== CART SIDEBAR ===== */
  .cart-overlay {
    position: fixed; inset: 0; z-index: 800;
    background: rgba(10,5,2,.5); backdrop-filter: blur(4px);
    opacity: 0; pointer-events: none;
    transition: opacity .3s ease;
  }
  .cart-overlay.open { opacity: 1; pointer-events: all; }
  .cart-sidebar {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(420px, 100vw); z-index: 801;
    background: var(--paper); box-shadow: -20px 0 60px rgba(33,22,15,.18);
    transform: translateX(100%);
    transition: transform .4s cubic-bezier(.22,1,.36,1);
    display: flex; flex-direction: column;
    border-radius: 24px 0 0 24px;
  }
  .cart-sidebar.open { transform: translateX(0); }
  .cart-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 24px 24px 16px;
    border-bottom: 1px solid var(--line);
  }
  .cart-title { font-family: 'Playfair Display',serif; font-size: 22px; font-weight: 700; color: var(--dark); }
  .cart-close {
    width: 36px; height: 36px; border-radius: 50%;
    border: 1.5px solid var(--line); background: white;
    font-size: 16px; cursor: pointer;
    display: grid; place-items: center;
    transition: transform .2s;
  }
  .cart-close:hover { transform: rotate(90deg); }
  .cart-items { flex: 1; overflow-y: auto; padding: 16px 24px; }
  .cart-empty { text-align: center; color: var(--muted); font-size: 14px; padding: 40px 0; }
  .cart-item {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 0; border-bottom: 1px solid var(--line);
    animation: slideInCart .3s ease;
  }
  @keyframes slideInCart { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:translateX(0)} }
  .cart-item-icon {
    width: 48px; height: 48px; border-radius: 12px;
    background: var(--soft); display: grid; place-items: center;
    font-size: 20px; flex: none;
  }
  .cart-item-info { flex: 1; }
  .cart-item-name { font-size: 14px; font-weight: 800; color: var(--dark); }
  .cart-item-detail { font-size: 12px; color: var(--muted); margin-top: 2px; }
  .cart-item-price { font-size: 14px; font-weight: 900; color: var(--brown); }
  .cart-item-remove {
    width: 28px; height: 28px; border-radius: 50%;
    border: 1.5px solid var(--line); background: none;
    font-size: 14px; cursor: pointer; color: var(--muted);
    display: grid; place-items: center;
    transition: background .2s, color .2s;
  }
  .cart-item-remove:hover { background: #efe9e1; color: var(--dark); border-color: var(--line); }
  .cart-footer { padding: 16px 24px 24px; border-top: 1px solid var(--line); }
  .cart-total-row {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 16px; font-weight: 700; color: var(--dark);
  }
  .cart-total-val { font-family: 'Playfair Display',serif; font-size: 24px; color: var(--brown); }

  /* ===== FLY TO CART ANIMATION ===== */
  .cart-fly {
    position: fixed; width: 24px; height: 24px;
    background: var(--gold2); border-radius: 50%;
    font-size: 14px; display: grid; place-items: center;
    z-index: 999; pointer-events: none;
    opacity: 0;
  }
  .cart-fly.flying {
    animation: flyToCart .7s cubic-bezier(.4,0,.2,1) forwards;
  }
  @keyframes flyToCart {
    0%  { opacity:1; transform:scale(1); }
    70% { opacity:1; }
    100%{ opacity:0; transform:scale(0.3); }
  }

  /* ===== MULTI-SELECT pills ===== */
  .prod-pill.active {
    background: var(--dark2); color: white;
    border-color: var(--dark2);
    box-shadow: 0 8px 24px rgba(33,22,15,.2);
    transform: translateY(-2px);
  }
  .prod-pill.active::after { content: ' ✓'; }

  /* ===== SELECTED PRODUCTS LIST ===== */
  .selected-prod-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; }
  .selected-prod-row {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px; background: white; border-radius: 14px;
    border: 1px solid var(--line); flex-wrap: wrap;
  }
  .selected-prod-row .sp-name { font-weight: 800; color: var(--dark); font-size: 13px; flex: 1; min-width: 160px; }
  .selected-prod-row .sp-price { color: var(--brown); font-weight: 900; font-size: 13px; white-space: nowrap; }
  .sp-stepper { display: flex; align-items: center; gap: 5px; }
  .sp-btn {
    width: 32px; height: 32px; border-radius: 10px;
    border: 1.5px solid var(--line); background: var(--soft);
    font-size: 13px; font-weight: 900; color: var(--brown);
    cursor: pointer; transition: all .15s ease; flex: none;
  }
  .sp-btn:hover { background: var(--brown); color: white; border-color: var(--brown); }
  .sp-input {
    width: 58px; text-align: center; border-radius: 10px;
    border: 1.5px solid var(--brown); background: white;
    font-size: 15px; font-weight: 900; color: var(--dark);
    padding: 4px 6px; height: 32px;
  }
  .sp-m2 { font-size: 11px; font-weight: 800; color: var(--muted); }

  /* ===== ADD TO CART BUTTON ===== */
  .add-to-cart-btn {
    width: 100%; margin-top: 16px;
    padding: 16px; border-radius: 16px;
    background: var(--brown); color: white;
    border: none; font-size: 15px; font-weight: 900;
    cursor: pointer; letter-spacing: .04em;
    transition: transform .2s, box-shadow .2s, background .2s;
    display: flex; align-items: center; justify-content: center; gap: 10px;
  }
  .add-to-cart-btn:hover {
    background: var(--dark2);
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(33,22,15,.2);
  }
  .add-to-cart-btn:active { transform: scale(0.97); }
  .atc-icon { font-size: 18px; }

/* === ANATOMY SECTION === */
section.anatomy.thermo{
  padding: 48px 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: var(--bg);
}

.anat-intro{
  color:rgba(33,22,15,.68);
  line-height:1.75;
  margin:0 0 20px;
  max-width:600px;
  font-size:16px;
  font-weight:500;
  padding-left:16px;
  border-left:2.5px solid rgba(154,95,53,.38);
}

#thermo{ scroll-margin-top:72px; }

.anatomy-stage{
  display:flex;align-items:flex-start;gap:0;
  flex:1;position:relative;
  overflow:visible;
  min-height:0;
  margin-top:48px;
}

.anatomy-labels{
  flex:1.1;display:flex;flex-direction:column;
  justify-content:space-evenly;gap:48px;
  padding-right:24px;padding-top:0;
  counter-reset:anat;
  position:relative;z-index:1;
  top:-15px;
  height:100%;
}

.anat-item{
  opacity:0;transform:translateX(-20px);
  transition:opacity .55s ease,transform .55s ease;
  flex:1;display:flex;flex-direction:column;justify-content:center;
}
.anat-item.visible{opacity:1;transform:translateX(0)}

.anat-item.no-transition,
.anat-item.no-transition .anat-desc{transition:none!important;}

.anat-row{display:flex;align-items:center;gap:12px}

.anat-dot{
  width:32px;height:32px;border-radius:50%;flex:none;
  background:rgba(154,95,53,.08);
  border:1.5px solid rgba(154,95,53,.28);
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:900;letter-spacing:.04em;
  color:var(--brown);
  counter-increment:anat;
}
.anat-dot::before{content:"0" counter(anat);}

.anat-title{
  font-size:22px;font-weight:900;letter-spacing:.06em;
  text-transform:uppercase;color:var(--dark);white-space:nowrap;
}

.anat-line{
  display:block;
  height:1px;
  background:transparent;
  flex:1;
}

.anat-desc{
  margin:4px 0 0 44px;
  font-size:15px;
  color:rgba(33,22,15,.68);
  line-height:1.65;
  font-weight:500;
  opacity:0;transform:translateX(-8px);
  transition:opacity .4s ease .18s,transform .4s ease .18s;
}
.anat-item.visible .anat-desc{opacity:1;transform:translateX(0)}

.anatomy-board-wrap{
  flex:0.85;
  display:flex;align-items:center;justify-content:center;
  align-self:stretch;
  position:relative;
  overflow:visible;
}

.anatomy-board{
  height:min(68vh,640px);
  width:auto;
  max-width:100%;
  object-fit:contain;
  filter:drop-shadow(0 24px 48px rgba(33,22,15,.22));
  transform:translateY(-130px) rotate(-21deg);
  transform-origin:center center;
  opacity:0;
  transition:opacity 1.2s cubic-bezier(.22,1,.36,1);
}
.anatomy-board.landed{opacity:1;}
.anatomy-board.visible{opacity:1;}

/* Підпис «Фасад С6» з лінією-виноскою до дошки (анімація як в інших ліній секції) */
.board-tag{
  position:absolute; top:11%; right:5%;
  display:flex; align-items:center; gap:10px;
  pointer-events:none; z-index:6;
}
.board-tag-text{
  font-family:'Manrope',sans-serif; font-weight:900; font-size:13px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--brown);
  white-space:nowrap;
  opacity:0; transform:translateX(10px);
  transition:opacity .5s ease .45s, transform .5s ease .45s;
}
.board-tag-line{
  display:block; height:2px; width:0; background:var(--gold2,#c8902a);
  transition:width .7s cubic-bezier(.22,1,.36,1) .1s;
}
.board-tag-dot{
  width:9px; height:9px; border-radius:50%; background:var(--gold2,#c8902a); flex:none;
  opacity:0; transform:scale(0);
  transition:opacity .3s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
}
.board-tag.show .board-tag-text{ opacity:1; transform:none; }
.board-tag.show .board-tag-line{ width:80px; }
.board-tag.show .board-tag-dot { opacity:1; transform:scale(1); }
@media(max-width:1050px){ .board-tag{ display:none; } }

#anatSvg{
  position:absolute;top:0;left:0;width:100%;height:100%;
  pointer-events:none;overflow:visible;z-index:5;
}


/* flying clone */
.board-flyer{
  position:fixed;z-index:600;pointer-events:none;
  opacity:0;display:block;
  will-change:transform,opacity,left,top,width,height;
}
/* warm dim during flight — sits below flyer so board stays sharp */
.fly-overlay{
  position:fixed;top:0;left:0;right:0;bottom:0;
  background:rgba(250,247,243,.5);
  z-index:695;pointer-events:none;opacity:0;
  will-change:opacity;
}
/* both animations keep running while hidden so float+shadow stay in phase */
#heroBoardFlyer.is-flying img{ opacity:0!important; }
#heroBoardFlyer.is-flying::after{ opacity:0!important; }

@media(max-width:1050px){
  .anatomy-stage{flex-direction:column;min-height:auto;overflow:visible}
  .anatomy-labels{padding-right:0;z-index:1}
  .anatomy-board-wrap{flex:none;width:100%;max-height:none;justify-content:center;align-self:auto;padding:56px 0 40px}
  /* 5 дошок, перенесені з хедера, всередині секції #thermo */
  .board-arc.board-arc--in-anatomy{padding:0;width:100%}
  /* На мобільному тільки кут, без translateY — інакше борд лізе на текст */
  .anatomy-board{max-height:300px;width:auto;transform:rotate(-18deg)}
}
@media(max-width:640px){
  .anatomy-board{max-height:200px;transform:rotate(-14deg)}
}


/* === BOARD ARC 3D === */
@keyframes ring {
  0%,100%{transform:rotate(0)}
  15%{transform:rotate(18deg)}
  30%{transform:rotate(-14deg)}
  45%{transform:rotate(11deg)}
  60%{transform:rotate(-7deg)}
  75%{transform:rotate(4deg)}
}

.phone-btn {
  width:42px;height:42px;border:1px solid var(--line);border-radius:999px;
  display:grid;place-items:center;font-size:18px;text-decoration:none;
  background:white;transition:background .2s ease;flex:none;
}
.phone-btn:hover { background:var(--soft); }
.phone-btn:hover span { display:inline-block; animation:ring .65s ease; }

.board-arc {
  perspective:900px;
  display:flex;gap:4px;align-items:flex-end;justify-content:center;
  padding:48px 0 36px;
}
.board-card {
  position:relative;background:none;overflow:visible;border-radius:0;
  transform:translateZ(var(--tz,0px)) translateY(var(--ty,0px)) scaleX(1.5);
  transition:transform .35s ease;cursor:pointer;
}
.board-card img {
  display:block;height:440px;width:auto;
  filter:drop-shadow(0 6px 12px rgba(33,22,15,.12));
  animation:float 3.6s ease-in-out infinite both;
}
.board-card::after {
  content:'';
  position:absolute;
  bottom:-14px;
  left:0;right:0;          /* не залежить від ширини батька */
  height:18px;
  background:radial-gradient(ellipse at center,rgba(33,22,15,.62) 0%,transparent 68%);
  filter:blur(5px);
  animation:shadow-cast 3.6s ease-in-out infinite both;
  z-index:-1;
}
.board-label {
  position:absolute;bottom:-34px;left:50%;transform:translateX(-50%);
  font-size:10px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brown);white-space:nowrap;
  opacity:0;transition:opacity .25s ease;
}
/* Підсвічування картки товару при кліку по дошці в хедері */
.card.board-highlight { animation: cardHighlight 2.6s cubic-bezier(.22,1,.36,1); z-index:3; }
@keyframes cardHighlight {
  0%   { box-shadow:0 0 0 0 rgba(200,144,42,0); }
  10%  { box-shadow:0 0 0 4px rgba(200,144,42,.95), 0 24px 60px rgba(33,22,15,.30); }
  65%  { box-shadow:0 0 0 4px rgba(200,144,42,.55), 0 22px 56px rgba(33,22,15,.22); }
  100% { box-shadow:0 0 0 0 rgba(200,144,42,0); }
}

.board-card:hover { transform:translateZ(120px) translateY(-12px) scaleX(1.5); }
.board-card:hover img { animation-play-state:paused; }
.board-card:hover::after { animation-play-state:paused; }
.board-card:hover .board-label { opacity:1; }

@keyframes float {
  0%,100% { transform:translateY(0); }
  50%      { transform:translateY(-18px); }
}
@keyframes shadow-cast {
  /* translateY синхронізований з float: тінь рухається разом з img */
  0%,100% { transform:translateY(0)     scaleX(1);   opacity:.65; filter:blur(4px); }
  50%      { transform:translateY(-18px) scaleX(.42); opacity:.11; filter:blur(9px); }
}

.board-arc .board-card:nth-child(1) img,
.board-arc .board-card:nth-child(1)::after { animation-delay:0s; }
.board-arc .board-card:nth-child(2) img,
.board-arc .board-card:nth-child(2)::after { animation-delay:.5s; }
.board-arc .board-card:nth-child(3) img,
.board-arc .board-card:nth-child(3)::after { animation-delay:1s; }
.board-arc .board-card:nth-child(4) img,
.board-arc .board-card:nth-child(4)::after { animation-delay:.5s; }
.board-arc .board-card:nth-child(5) img,
.board-arc .board-card:nth-child(5)::after { animation-delay:0s; }

@media(max-width:1050px) {
  /* hero-grid стає однією колонкою — даємо 5 дошкам рівно вписатись по ширині */
  .board-arc { gap:6px; perspective:none; overflow:visible; width:100%; align-items:flex-end; justify-content:center; }
  .board-card { flex:1 1 0; min-width:0; transform:translateY(var(--ty,0px)); }
  .board-card img { width:100%; height:auto; }
  .board-card:hover { transform:translateY(-10px); }
}
@media(max-width:640px) {
  /* фіксована висота при aspect 0.75 робить 5 дошок ширшими за екран і їх
     обрізає overflow:hidden — тому переходимо на гнучкі рівні колонки */
  .board-arc { gap:4px; padding:20px 0 24px; perspective:none; overflow:visible; width:100%; align-items:flex-end; justify-content:center; }
  .board-card { flex:1 1 0; min-width:0; transform:translateY(var(--ty,0px)); }
  .board-card img { width:100%; height:auto; max-height:none; }
  .board-card:hover { transform:translateY(-8px); }
}

/* === 3D VIEWER === */
#lb3dWrap {
  width:100%;background:#f8f4ed;position:relative;overflow:hidden;
}
#lb3dWrap canvas {
  width:100%!important;height:min(60vh,500px)!important;display:block;
}
@media(max-width:640px){
  #lb3dWrap canvas { height:min(50vh,380px)!important; }
}
#lb3dLoader {
  position:absolute;inset:0;display:flex;flex-direction:column;gap:12px;
  align-items:center;justify-content:center;
  background:#f8f4ed;font-size:13px;font-weight:700;color:var(--muted);
}
.lb3d-spinner {
  width:32px;height:32px;border-radius:50%;
  border:3px solid var(--line);border-top-color:var(--brown);
  animation:spin .8s linear infinite;
}
@keyframes spin { to{transform:rotate(360deg)} }
#lb3dHint {
  position:absolute;bottom:12px;left:50%;transform:translateX(-50%);
  font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);pointer-events:none;white-space:nowrap;
  transition:opacity .6s ease;
}