
:root{--ink:#171915;--cream:#f4f0e7;--paper:#fffdf8;--wood:#a85e2b;--sage:#66705a;--line:#d8d0c2;--muted:#6e716b}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,Arial,sans-serif;line-height:1.55}img{max-width:100%;display:block}a{color:inherit}.wrap{width:min(1180px,calc(100% - 40px));margin:auto}.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:.76rem;font-weight:700;color:var(--wood)}h1,h2,h3{font-family:Georgia,serif;line-height:1.05;margin:0}h1{font-size:clamp(3rem,8vw,7.2rem);max-width:900px}h2{font-size:clamp(2.2rem,5vw,4.5rem)}p{margin:.7rem 0}.top{position:fixed;z-index:20;inset:0 0 auto;background:rgba(23,25,21,.9);color:white;backdrop-filter:blur(12px);border-bottom:1px solid #ffffff24}.nav{height:72px;display:flex;align-items:center;justify-content:space-between}.brand{font-weight:900;letter-spacing:.08em;text-decoration:none}.brand span{color:#d78a4a}.links{display:flex;gap:24px;align-items:center}.links a{text-decoration:none;font-size:.92rem}.button{display:inline-flex;align-items:center;justify-content:center;padding:13px 19px;border:1px solid var(--ink);text-decoration:none;font-weight:700;background:transparent;cursor:pointer}.button.primary{background:var(--wood);border-color:var(--wood);color:white}.button.light{border-color:white;color:white}.hero{min-height:94vh;color:white;display:flex;align-items:end;padding:150px 0 70px;background:linear-gradient(90deg,#111b 0%,#1117 55%,#1113),url('../images/hero.webp') center/cover}.hero p{font-size:1.15rem;max-width:660px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.facts{background:var(--ink);color:white}.facts .wrap{display:grid;grid-template-columns:repeat(4,1fr)}.fact{padding:26px;border-right:1px solid #ffffff22}.fact b{display:block;font-size:1.05rem}.section{padding:100px 0}.intro{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px}.intro .lead{font-size:1.35rem}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:45px}.card{border:1px solid var(--line);padding:28px;min-height:220px;display:flex;flex-direction:column;justify-content:space-between}.card .num{color:var(--wood);font-weight:800}.catalog{background:var(--cream)}.catalog-head{display:flex;align-items:end;justify-content:space-between;gap:30px}.filters{display:flex;gap:8px;flex-wrap:wrap;margin:32px 0}.filter{border:1px solid var(--line);background:transparent;padding:9px 14px;cursor:pointer}.filter.active{background:var(--ink);color:white}.products{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.product{background:var(--paper);border:1px solid var(--line);padding:24px}.product small{color:var(--muted)}.product h3{font-size:1.5rem;margin:10px 0}.product ul{padding-left:18px;color:#444}.split{display:grid;grid-template-columns:1fr 1fr;min-height:650px}.split .photo{min-height:520px;background:center/cover}.split .content{padding:80px;display:flex;flex-direction:column;justify-content:center;background:var(--ink);color:white}.split ul{padding-left:20px}.gallery{display:grid;grid-template-columns:2fr 1fr 1fr;grid-auto-rows:280px;gap:12px;margin-top:40px}.gallery img{width:100%;height:100%;object-fit:cover}.gallery img:first-child{grid-row:span 2}.delivery{display:grid;grid-template-columns:1fr 1fr;background:var(--cream)}.delivery img{width:100%;height:650px;object-fit:cover}.delivery-copy{padding:80px;align-self:center}.about{background:var(--sage);color:white}.about .intro{align-items:center}.contact{display:grid;grid-template-columns:1fr 1fr;gap:70px}.contact-list{font-size:1.25rem}.contact-list a{text-decoration:none}.form{display:grid;gap:12px}.form input,.form textarea,.form select{width:100%;padding:14px;border:1px solid var(--line);font:inherit;background:white}.form textarea{min-height:120px}.note{font-size:.83rem;color:var(--muted)}footer{background:var(--ink);color:white;padding:36px 0}.foot{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}.menu{display:none;background:none;border:0;color:white;font-size:1.4rem}@media(max-width:900px){.links{display:none;position:absolute;left:0;top:72px;width:100%;padding:25px;background:var(--ink);flex-direction:column}.links.open{display:flex}.menu{display:block}.facts .wrap,.cards,.products{grid-template-columns:1fr 1fr}.intro,.split,.delivery,.contact{grid-template-columns:1fr}.split .content,.delivery-copy{padding:55px 24px}.gallery{grid-template-columns:1fr 1fr}.gallery img:first-child{grid-row:auto}.delivery img{height:500px}}@media(max-width:580px){.wrap{width:min(100% - 28px,1180px)}.section{padding:72px 0}.facts .wrap,.cards,.products{grid-template-columns:1fr}.fact{border-right:0;border-bottom:1px solid #ffffff22}.gallery{grid-template-columns:1fr;grid-auto-rows:260px}.catalog-head{display:block}.hero{min-height:90vh}.delivery img{height:420px}}
.hp {
  display: none !important;
}

.consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.85rem;
}

.consent input {
  width: auto;
  min-width: 16px;
  margin-top: 4px;
}

.form button:disabled {
  opacity: 0.65;
  cursor: wait;
}
.quick-contact {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.qc {
  min-width: 54px;
  height: 54px;
  padding: 0 17px;
  border-radius: 27px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  color: #ffffff;
  text-decoration: none;
  font-family: Inter, Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(23, 25, 21, 0.22);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease;
}

.qc:hover {
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(23, 25, 21, 0.3);
  filter: brightness(1.05);
}

.qc-icon {
  width: 22px;
  flex: 0 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 800;
}

.qc-label {
  display: inline-block;
  white-space: nowrap;
}

.qc.call {
  background: #a85e2b;
}

.qc.viber {
  background: #665cac;
}

.qc.telegram {
  background: #229ed9;
}

@media (max-width: 580px) {
  body {
    padding-bottom: 62px;
  }

  .quick-contact {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    background: #171915;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }

  .qc {
    min-width: 0;
    width: 100%;
    height: 62px;
    padding: 6px 4px;
    border-radius: 0;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    box-shadow: none;
    font-size: 11px;
  }

  .qc + .qc {
    border-left: 1px solid rgba(255, 255, 255, 0.18);
  }

  .qc-icon {
    width: auto;
    flex: none;
    font-size: 18px;
    line-height: 1;
  }

  .qc-label {
    font-size: 11px;
    line-height: 1.2;
  }

  .qc:hover {
    transform: none;
    box-shadow: none;
  }
}
.qc-icon svg {
  width: 21px;
  height: 21px;
  display: block;
  fill: currentColor;
}

.qc.viber .qc-icon svg {
  width: 22px;
  height: 22px;
}

.qc.telegram .qc-icon svg {
  width: 21px;
  height: 21px;
}

@media (max-width: 580px) {
  .qc-icon svg {
    width: 20px;
    height: 20px;
  }

  .qc.viber .qc-icon svg {
    width: 21px;
    height: 21px;
  }
}
.timber-products{align-items:start}.timber-card{padding:0;overflow:hidden}.product-photo{height:170px;background-image:linear-gradient(180deg,transparent 35%,rgba(23,25,21,.3)),var(--product-image);background-size:cover;background-position:center}.product-body{padding:24px}.calculator{display:grid;gap:14px;margin-top:20px}.calculator label{display:grid;gap:7px;font-size:.83rem;font-weight:700}.calculator select,.calculator input[type="number"]{width:100%;padding:11px;border:1px solid var(--line);background:#fff;font:inherit}.calculator input[type="range"]{width:100%;accent-color:var(--wood)}.length-ticks{display:flex;justify-content:space-between;margin-top:-10px;color:var(--muted);font-size:.66rem}.price{padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr auto;align-items:end}.price span{font-size:.78rem;color:var(--muted)}.price strong{font-family:Georgia,serif;font-size:1.55rem}.price small{grid-column:1/-1;color:var(--muted);text-align:right}.order-material{width:100%;border:0}.order-simple{font-weight:700}@media(max-width:580px){.product-photo{height:190px}.price strong{font-size:1.35rem}}
.timber-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 650px;
  background: #171915;
}

/* Зображення займає всю картку */
.timber-card .product-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  overflow: hidden;
}

.timber-card .product-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transition: transform 0.45s ease;
}

/* Затемнення, щоб текст читався */
.timber-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(23, 25, 21, 0.18) 0%,
      rgba(23, 25, 21, 0.42) 22%,
      rgba(23, 25, 21, 0.82) 48%,
      rgba(23, 25, 21, 0.96) 100%
    );
}

/* Увесь текст та калькулятор поверх фото */
.timber-card .product-body {
  position: relative;
  z-index: 1;
  min-height: 650px;
  padding: 190px 24px 24px;
  display: flex;
  flex-direction: column;
  color: #ffffff;
}

.timber-card .product-body > small {
  color: #5f5144;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.65);
}

.timber-card .product-body h3 {
  color: #ffffff;
  font-size: 1.8rem;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

/* Калькулятор із напівпрозорою світлою підкладкою */
.timber-card .calculator {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.48);
  background: rgba(255, 253, 248, 0.9);
  color: #171915;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.timber-card .calculator label,
.timber-card .calculator span,
.timber-card .calculator strong {
  color: #171915;
}

.timber-card .calculator select,
.timber-card .calculator input[type="number"] {
  color: #171915;
  background: rgba(255, 255, 255, 0.94);
}

.timber-card .price {
  border-color: rgba(23, 25, 21, 0.18);
}

.timber-card .price span,
.timber-card .price small {
  color: #666a63;
}

.timber-card:hover .product-photo img {
  transform: scale(1.035);
}

@media (max-width: 580px) {
  .timber-card,
  .timber-card .product-body {
    min-height: 620px;
  }

  .timber-card .product-body {
    padding: 150px 16px 16px;
  }

  .timber-card .calculator {
    padding: 15px;
  }
}
body.modal-open{overflow:hidden}.delivery-modal[hidden]{display:none}.delivery-modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px}.delivery-modal__backdrop{position:absolute;inset:0;background:rgba(10,12,10,.72);backdrop-filter:blur(4px)}.delivery-dialog{position:relative;z-index:1;width:min(620px,100%);max-height:calc(100vh - 40px);overflow:auto;padding:38px;background:var(--paper);box-shadow:0 24px 80px #0007}.delivery-dialog h2{font-size:clamp(2.1rem,5vw,3.7rem);margin:8px 0 18px}.delivery-dialog__close{position:absolute;right:14px;top:10px;border:0;background:transparent;font-size:2rem;cursor:pointer}.delivery-label{display:block;margin:24px 0 8px;font-weight:700}.delivery-autocomplete{min-height:52px;margin-bottom:16px}.delivery-autocomplete gmp-place-autocomplete{width:100%;--gmpx-color-surface:#fff;--gmpx-color-on-surface:#171915;--gmpx-font-family-base:Inter,Arial,sans-serif}.delivery-status{min-height:24px;margin-top:12px;color:var(--wood);font-weight:700}.delivery-result{margin-top:20px;border-top:1px solid var(--line)}.delivery-result>div{display:flex;justify-content:space-between;gap:20px;padding:12px 0;border-bottom:1px solid var(--line)}.delivery-result__total strong{font-family:Georgia,serif;font-size:1.8rem;color:var(--wood)}.delivery-result p{color:var(--wood);font-weight:700}.delivery-result small{display:block;color:var(--muted);margin:12px 0}.delivery-add{width:100%;margin-top:14px}@media(max-width:580px){.delivery-modal{padding:0;align-items:end}.delivery-dialog{width:100%;max-height:92vh;padding:28px 18px 82px;border-radius:18px 18px 0 0}.delivery-result>div{font-size:.9rem}}
.delivery-add[hidden],
.delivery-result[hidden] {
  display: none !important;
}
.delivery-mode {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 24px;
  border: 1px solid var(--line);
}

.delivery-mode__button {
  min-height: 44px;
  padding: 10px 14px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.delivery-mode__button + .delivery-mode__button {
  border-left: 1px solid var(--line);
}

.delivery-mode__button.active {
  background: var(--ink);
  color: #ffffff;
}

.delivery-coordinates-input {
  width: 100%;
  min-height: 52px;
  padding: 14px;
  border: 1px solid var(--ink);
  background: #ffffff;
  color: var(--ink);
  font: inherit;
}

.delivery-coordinates-input:focus {
  outline: 2px solid var(--wood);
  outline-offset: 2px;
}

.delivery-coordinates-help {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  line-height: 1.45;
}

.delivery-coordinates-panel[hidden],
.delivery-address-panel[hidden] {
  display: none !important;
}
.catalog h2 {
  font-size: clamp(2.8rem, 5vw, 4.8rem);
}

.catalog-head {
  align-items: center;
  margin-bottom: 22px;
}

.filters {
  gap: 6px;
  margin: 18px 0 30px;
}

.filter {
  padding: 10px 18px;
  border: 1px solid rgba(23, 25, 21, 0.18);
  background: transparent;
  font-weight: 700;
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}

.filter:hover {
  border-color: var(--wood);
  color: var(--wood);
}

.filter.active {
  border-color: var(--ink);
  background: var(--ink);
  color: #ffffff;
}

.timber-products {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.timber-card {
  min-height: 610px;
  border: 0;
  box-shadow: 0 16px 40px rgba(23, 25, 21, 0.14);
}

.timber-card::after {
  background:
    linear-gradient(
      180deg,
      rgba(20, 21, 18, 0.05) 0%,
      rgba(20, 21, 18, 0.12) 25%,
      rgba(34, 29, 22, 0.52) 55%,
      rgba(34, 29, 22, 0.82) 100%
    );
}

.timber-card .product-body {
  min-height: 610px;
  padding: 210px 24px 24px;
}

.timber-card .product-body h3 {
  font-size: 2.1rem;
}

.timber-card .calculator {
  margin-top: 18px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  background: rgba(250, 248, 243, 0.9);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.timber-card .price strong {
  color: var(--wood);
  font-size: 1.7rem;
}

.length-ticks {
  margin-top: -7px;
  color: #454842;
  font-size: 0.72rem;
}

.length-ticks span {
  min-width: 28px;
  text-align: center;
}

@media (max-width: 760px) {
  .timber-products {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 580px) {
  .catalog h2 {
    font-size: 3rem;
  }

  .timber-card,
  .timber-card .product-body {
    min-height: 600px;
  }

  .timber-card .product-body {
    padding: 175px 16px 16px;
  }

  .timber-card .calculator {
    padding: 16px;
  }
}
/* Світліше затемнення фотографії */
.timber-card::after {
  background:
    linear-gradient(
      180deg,
      rgba(20, 21, 18, 0.01) 0%,
      rgba(20, 21, 18, 0.04) 30%,
      rgba(30, 25, 19, 0.16) 58%,
      rgba(30, 25, 19, 0.36) 100%
    );
}

/* Прозоріший калькулятор */
.timber-card .calculator {
  background: rgba(250, 248, 243, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.48);
  box-shadow: 0 12px 30px rgba(20, 18, 14, 0.12);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

/* Поля лишаємо достатньо світлими для читабельності */
.timber-card .calculator select,
.timber-card .calculator input[type="number"] {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(70, 58, 44, 0.2);
}

/* Горизонтальні роздільники теж робимо легшими */
.timber-card .price {
  border-color: rgba(50, 44, 36, 0.15);
}
.timber-card {
  background:
    radial-gradient(
      circle at 50% 28%,
      #fffdf8 0%,
      #f8f4eb 28%,
      #d5cec2 62%,
      #16120f 100%
    );
}

.timber-card::after {
  display: none;
}

.timber-card .product-photo {
  position: absolute;
  inset: 0;
  padding: 0;
  overflow: hidden;
}

.timber-card .product-photo img {
  position: absolute;
  top: -3%;
  left: 50%;
  width: 118%;
  height: 72%;
  max-width: none;
  object-fit: contain;
  object-position: center top;
  transform: translateX(-50%);
  filter: drop-shadow(0 18px 24px rgba(60, 42, 25, 0.18));
  transition: transform 0.35s ease;
}

.timber-card:hover .product-photo img {
  transform: translateX(-50%) scale(1.025);
}
