:root{
  --bg:#ffffff;
  --text:#1b1c1e;
  --muted:#5b5e66;
  --primary:#0163b4;
  --primary-ink:#ffffff;
  --primary-weak:#eef0ff;
  --accent:#3a52a0;
  --surface:#f7f8fb;
  --border:#e4e6ef;
  --success:#0e9f6e;
  --danger:#fbff00;
  --shadow:0 10px 30px rgba(27,28,30,.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  padding:0;
  width:100%;
  min-height:100vh;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  text-rendering:optimizeLegibility;
  display:flex;
  flex-direction:column;
}

main {
  flex:1;
  width:100%;
  max-width:1100px;
  margin:0 auto;
  padding:24px 16px;
  padding-bottom:15vh; /* відступ дорівнює висоті футера */
}

h1,h2,h3,h4,h5,h6{margin-top:0;font-weight:600;color:var(--text)}
p{margin:0 0 16px}
img{max-width:100%;height:auto;display:block}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}

.container{width:100%;max-width:1100px;margin:0 auto;padding:0 16px}

/* Header */
.site-header{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--border);z-index:1000}
.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:64px}
.logo img{display:block}
.nav-toggle{display:none;border:1px solid var(--border);background:#fff;padding:8px 12px;border-radius:8px}
.nav-list{display:flex;gap:18px;list-style:none;margin:0;padding:0;align-items:center}
.nav-list a{padding:8px 4px}
.btn-small{padding:8px 12px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:20px 10px;border-radius:10px;font-weight:600;border:1px solid var(--border);transition:.2s ease;cursor:pointer;font-size:1.25rem;}
.btn-primary{background:var(--primary);color:var(--primary-ink);border-color:var(--primary)}
.btn-primary:hover{filter:brightness(1.05)}
.btn-outline{background:#fff;color:var(--primary);border-color:var(--primary)}
.btn-outline:hover{background:var(--primary-weak)}
.btn-danger{background:var(--danger);color:#fa0505;border-color:var(--primary)}
.btn-danger:hover{filter:brightness(0.9)}

/* Hero */
.hero{background:linear-gradient(180deg,#f8f9ff 0%, #fff 100%);padding:40px 0;border:1px solid var(--border);border-radius:12px}
.hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}
.lead{font-size:1.125rem;color:var(--muted)}
.hero-actions{display:flex;gap:20px;margin-top:12px;justify-content:center;}
.hero-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;list-style:none;padding:0;margin:16px 0 0;color:var(--muted);text-align:center}
.hero-media img{border-radius:12px;box-shadow:var(--shadow)}

/* Sections */
.section{padding:56px 0}
.section.alt{background:var(--surface)}
.section h2{margin:0 0 14px}
.section h3{margin:8px 0}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:16px;box-shadow:var(--shadow)}
.card p{color:var(--muted)}

/* List with icons */
.list-icons{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.list-icons li{display:flex;gap:12px;background:#fff;border:1px solid var(--border);padding:14px;border-radius:12px}

/* How-to steps */
.howto-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.step{background:#fff;border:1px solid var(--border);border-radius:12px;padding:16px;position:relative}
.step-num{position:absolute;top:12px;right:12px;background:var(--primary-weak);color:var(--primary);width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700}

/* Products */
.product-grid{display:flex;gap:16px;flex-wrap:nowrap;overflow-x:auto}
.product-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:16px;box-shadow:var(--shadow)}
.price{font-weight:700;color:var(--text);margin:8px 0}

/* Reviews */
.carousel{overflow:hidden;margin:auto;width:100%;max-width:1100px;padding: 0 8px;}
.track{display:flex;transition:transform 0.8s ease;gap:18px}
.track blockquote{background:#f9f9f9;padding:16px;border-radius:12px;margin:0; flex: 0 0 100%}

/* Десктоп: 3 відгуки */
@media (min-width:1024px){
  .track blockquote{flex:0 0 calc(100%/3 - 18px)}
}

/* Планшет: 2 відгуки */
@media (max-width:1023px) and (min-width:768px){
  .track blockquote{flex:0 0 calc(100%/2 - 18px)}
}

/* Мобільні: 1 відгук */
@media (max-width:767px){
  .track blockquote{flex:0 0 100%}
}

blockquote{border-left:4px solid var(--accent);border:1px solid var(--border)}
blockquote footer{margin-top:8px;color:var(--muted)}

/* CTA */
.cta-buy{background:linear-gradient(180deg,#eef0ff 0%, #fff 100%);padding:40px;border:1px solid var(--border);border-radius:12px;flex-direction:column;font-size:1.25rem;}
.cta-inner{text-align:center}
.cta-actions{display:flex;gap:12px;justify-content:center;margin-top:12px}

/* Contact */
.contact-grid{display:grid;gap:20px}
.contact-form{display:grid;gap:10px}
.contact-form input,.contact-form textarea,.contact-form select{border:1px solid var(--border);border-radius:10px;padding:12px;font-size:1.25rem; width: stretch;}
.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{outline:2px solid var(--primary-weak)}
.form-status{min-height:20px;color:var(--muted)}
.contact-info{background:#fff;border:1px solid var(--border);border-radius:12px;padding:16px}

/* Footer */
.site-footer { position: fixed; bottom: 0; width: 100%; border-top: 1px solid var(--border); background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:0 16px}
.site-footer nav{display:flex;gap:12px;flex-wrap:wrap}
.site-footer a{color:var(--muted)}
.site-footer a:hover{color:var(--text)}
.footer-image { width: 100%; height: 15vh; overflow: hidden; }
.footer-image img { width: 100%; height: 100%; object-fit: fill; display: block; }
.footer-copyright { margin-top: 8px; color: var(--muted); font-size: x-small}

/* Cart / Buy */
.cart-item label { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 1.25rem; }
.cart-thumb {
  width: 400px;
  height: auto;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.cart-details { flex: 1; }
#checkout { display: flex; gap: 1rem; }
.input {
  width: 60px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.suggestions {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  max-height: 200px;
  overflow-y: auto;
  position: absolute;
  background: #fff;
  width: 100%;
  z-index: 10;
}
.suggestions li {
  padding: 6px;
  cursor: pointer;
}
.suggestions li:hover { background: #f0f0f0; }
.total { font-weight: bold; margin-top: 1rem; }
#buy-button { margin-top: 1rem; }

/* === Адаптивність === */

/* Планшети */
@media (max-width:1024px) and (min-width:768px){
  main{padding:20px 12px;max-width:900px}
  .hero-inner{grid-template-columns:1fr;text-align:center}
  .hero-facts{grid-template-columns:repeat(2,1fr)}
  .cards{grid-template-columns:repeat(2,1fr)}
  .product-grid{flex-wrap:wrap;justify-content:center}
  .contact-grid{grid-template-columns:1fr}
}

/* Мобільні */
@media (max-width:767px){
  body{font-size:15px;line-height:1.5}
  main{padding:16px 12px;max-width:100%}

  h1,h2,h3{font-size:1.25rem;text-align:center}

  .hero-inner{grid-template-columns:1fr;gap:16px;text-align:center}
  .hero-actions{flex-direction:column;gap:12px}
  .hero-facts{grid-template-columns:1fr}

  .cards{grid-template-columns:1fr}
  .product-grid{flex-direction:column;overflow-x:visible}
  .list-icons{grid-template-columns:1fr}
  .howto-steps{grid-template-columns:1fr}

  .nav-list{flex-direction:column;gap:12px}

  .cart-item{flex-direction:column;align-items:flex-start}
  .cart-thumb{width:100%;max-width:200px}
    #checkout {
    flex-direction: column;
    gap: 12px;
  }

  input,select,textarea,button{
    width:100%;
    font-size:16px;
  }

  .site-footer {
    flex-direction:column;
    gap:8px;
    text-align:center;
  }
  .footer-inner {
    justify-content:center;
    flex-wrap:wrap;
  }
}

/* Дуже малi екрани (≤480px) */
@media (max-width:480px){
  h1,h2,h3{font-size:1.1rem}
  .btn{padding:10px 16px;font-size:14px}
  .hero-actions{gap:8px}
  .cart-thumb{max-width:150px}
}

/* Мобільна адаптація меню */
@media (max-width:880px) {
  .nav-toggle {
    display: inline-block;
    border: 1px solid var(--border);
    background: #fff;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
  }
  .nav-list {
    position: absolute;
    top: 64px;
    right: 0;
    background: #fff;
    border-left: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    align-items: flex-start;
    padding: 12px;
    min-width: 220px;
    list-style: none;
    margin: 0;
    display: none;
  }
  .nav-list.open { display: flex; }
}

/* Cart items */
.cart-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}

.cart-item h3 {
  margin: 0;
  font-size: 1.25rem;
  flex: 1;
}

.cart-item p {
  margin: 0;
  font-weight: 600;
  color: var(--primary);
  font-size: 1.25rem;
}

.qty-input {
  width: 40px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 1.25rem;
}

/* Summary */
#cartSummary {
  margin-top: 1rem;
  font-weight: bold;
  font-size: 1.1rem;
  text-align: right;
}

/* Checkout section */
#checkout {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
}

#checkout .btn {
  flex: 1;
}

/* Мобільна адаптація */
@media (max-width: 767px) {
  .cart-item {
    flex-direction: column;
    align-items: center;
  }

  .cart-thumb {
    width: 100%;
    max-width: 200px;
  }

  #checkout {
    flex-direction: column;
  }

  #checkout .btn {
    width: 100%;
  }

  #cartSummary {
    text-align: center;
    margin-top: 1rem;
  }
}