:root{
      --primary-color:#333;--secondary-color:#FF6B00;--accent-color:#FF8C00;
      --light-color:#f8f8f8;--dark-color:#222;--text-color:#444;--gray-color:#e0e0e0;
    }
    *{margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif;}
    body{background:#f5f5f5;color:var(--text-color);line-height:1.6;overflow-x:hidden;}

    @keyframes fadeIn{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}
    @keyframes slideInLeft{from{opacity:0;transform:translateX(-50px);}to{opacity:1;transform:translateX(0);}}
    @keyframes slideInRight{from{opacity:0;transform:translateX(50px);}to{opacity:1;transform:translateX(0);}}
    .animate{opacity:0;}
    .fade-in{animation:fadeIn .8s ease-out forwards;}
    .slide-left{animation:slideInLeft .8s ease-out forwards;}
    .slide-right{animation:slideInRight .8s ease-out forwards;}

    header{background:var(--primary-color);color:#fff;padding:15px 0;box-shadow:0 2px 15px rgba(0,0,0,.2);position:fixed;width:100%;top:0;z-index:1000;transition:transform .3s ease, padding .25s ease, background-color .25s ease;}
header.hidden{
  transform: translateY(-100%);
}

/* Сжатый режим и скрытие телефона – ТОЛЬКО для мобилок */
@media (max-width:768px){
  header.compact{padding:8px 0;background:rgba(51,51,51,.95);}
  header.compact nav,
  header.compact .contact-info .phone{display:none !important;}
  header.compact .logo{font-size:20px;}
  header.compact .callback-btn{padding:6px 12px;font-size:13px;margin-right:0;}
  .header-container{flex-direction:row;justify-content:space-between;}
}
    header.scrolled{padding:10px 0;background:rgba(51,51,51,.95);}
    .header-container{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:0 20px;}
    .logo{font-size:24px;font-weight:700;color:#fff;text-decoration:none;display:flex;align-items:center;}
    .logo i{color:var(--secondary-color);margin-right:10px;font-size:28px;}
    nav ul{display:flex;list-style:none;}
    nav ul li{margin-left:25px;}
    nav ul li a{color:#fff;text-decoration:none;font-size:15px;transition:.3s;font-weight:500;}
    nav ul li a:hover{color:var(--secondary-color);}
    .contact-info{display:flex;align-items:center;}
    .callback-btn{background:var(--secondary-color);color:#fff;border:none;padding:8px 15px;border-radius:4px;margin-right:15px;cursor:pointer;transition:.3s;font-weight:500;}
    .callback-btn:hover{background:var(--accent-color);transform:translateY(-2px);}
    .phone{margin-left:15px;font-weight:700;color:#fff;text-decoration:none;transition:.3s;}
    .phone:hover{color:var(--secondary-color);}

    /* Сжатый режим для мобильных */
    @media(max-width:768px){
      header.compact{
        padding:8px 0;
        background:rgba(51,51,51,.95);
      }
      header.compact nav,
      header.compact .contact-info .phone{
        display:none !important;
      }
      header.compact .logo{font-size:20px;}
      header.compact .callback-btn{padding:6px 12px;font-size:13px;margin-right:0;}
      .header-container{flex-direction:row;justify-content:space-between;}
    }
@keyframes rotate-logo {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.logoimg {
  animation: rotate-logo 5s linear infinite;
    margin-right: 5px;

}

    .main-container{max-width:1200px;margin:100px auto 50px;padding:0 20px;}
    .breadcrumbs{margin-bottom:30px;font-size:14px;color:#777;}
    .breadcrumbs a{color:var(--accent-color);text-decoration:none;transition:.3s;}
    .breadcrumbs a:hover{text-decoration:underline;}
.fas {margin-right: 10px;}
    .product-container{display:flex;flex-wrap:wrap;background:#fff;border-radius:10px;box-shadow:0 5px 25px rgba(0,0,0,.08);overflow:hidden;margin-bottom:50px;}
    .product-gallery{flex:1;min-width:300px;padding:20px;position:relative;}
    .slider-container{position:relative;overflow:hidden;border-radius:8px;box-shadow:0 4px 15px rgba(0,0,0,.1);}
    .slider{display:flex;transition:transform .5s ease;}
    .slide{min-width:100%;position:relative;}
    .product-image{width:100%;height:auto;display:block;}
    .slider-nav{display:flex;justify-content:center;margin-top:15px;}
    .slider-dot{width:12px;height:12px;border-radius:50%;background:var(--gray-color);margin:0 5px;cursor:pointer;transition:.3s;}
    .slider-dot.active{background:var(--secondary-color);transform:scale(1.2);}
    .slider-arrow{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.7);color:var(--primary-color);border:none;width:40px;height:40px;border-radius:50%;font-size:18px;cursor:pointer;z-index:10;transition:.3s;display:flex;align-items:center;justify-content:center;}
    .slider-arrow:hover{background:var(--secondary-color);color:#fff;}
    .slider-arrow.prev{left:15px;}
    .slider-arrow.next{right:15px;}

    .product-info{flex:1;min-width:300px;padding:30px;border-left:1px solid var(--gray-color);}
    .product-title{font-size:32px;margin-bottom:15px;color:var(--dark-color);font-weight:700;line-height:1.2;}
    .product-subtitle{font-size:18px;color:var(--secondary-color);margin-bottom:25px;font-weight:600;}
    .availability{background:rgba(255,107,0,.1);padding:20px;border-radius:8px;margin-bottom:30px;border-left:4px solid var(--secondary-color);}
    .availability h3{color:var(--secondary-color);margin-bottom:10px;font-size:20px;}
    .features-list{margin-bottom:30px;}
    .features-list li{margin-bottom:12px;position:relative;padding-left:30px;font-size:16px;}
    .features-list li:before{content:"✓";color:var(--secondary-color);position:absolute;left:0;font-weight:700;font-size:18px;}
    .tech-specs{margin-bottom:30px;}
    .tech-specs h3{margin-bottom:20px;color:var(--dark-color);font-size:22px;position:relative;display:inline-block;}
    .tech-specs h3:after{content:'';position:absolute;bottom:-5px;left:0;width:50px;height:3px;background:var(--secondary-color);}
    .specs-table{width:100%;border-collapse:collapse;}
    .specs-table tr:nth-child(even){background:#f9f9f9;}
    .specs-table td{padding:12px 10px;border-bottom:1px solid var(--gray-color);}
    .specs-table td:first-child{font-weight:600;width:50%;color:var(--dark-color);}

    .preorder-form{background:var(--light-color);padding:30px;border-radius:10px;margin-top:30px;box-shadow:0 5px 15px rgba(0,0,0,.05);border-top:3px solid var(--secondary-color);}
    .preorder-form h3{margin-bottom:20px;color:var(--dark-color);font-size:24px;}
    .form-group{margin-bottom:20px;}
    .form-group label{display:block;margin-bottom:8px;font-weight:600;color:var(--dark-color);}
    .form-control{width:100%;padding:12px 15px;border:1px solid #ddd;border-radius:6px;font-size:16px;transition:.3s;}
    .form-control:focus{outline:none;border-color:var(--secondary-color);box-shadow:0 0 0 3px rgba(255,107,0,.2);}
    textarea.form-control{min-height:100px;resize:vertical;}
    .btn{display:inline-block;background:#C00404;color:#fff;padding:14px 27px;border:none;border-radius:6px;cursor:pointer;font-size:16px;font-weight:600;transition:.3s;text-align:center;}
    .btn:hover{background:var(--accent-color);transform:translateY(-2px);box-shadow:0 5px 15px rgba(255,107,0,.3);}
    .btn:active{transform:translateY(0);}
    .btn-block{display:block;width:100%;}

    .success-box,.error-box{display:none;margin-top:15px;padding:15px 20px;border-radius:6px;font-size:15px;line-height:1.4;}
    .success-box{background:#e6ffed;border:1px solid #9ae6b4;color:#22543d;}
    .error-box{background:#ffe6e6;border:1px solid #f5a6a6;color:#7b1e1e;}

    .delivery-info{margin-top:30px;display:flex;flex-wrap:wrap;gap:20px;}
    .delivery-option{flex:1;min-width:250px;padding:25px;background:#fff;border-radius:8px;box-shadow:0 5px 15px rgba(0,0,0,.05);transition:.3s;}
    .delivery-option:hover{transform:translateY(-5px);box-shadow:0 10px 25px rgba(0,0,0,.1);}
    .delivery-option i{font-size:30px;color:var(--secondary-color);margin-bottom:15px;}
    .delivery-option h4{margin-bottom:15px;color:var(--dark-color);font-size:18px;}

/* ===== Qty control ===== */
.qty-box{display: inline-flex;align-items: center;gap: 22px;background: #f3f3f3;border: 1px solid #ddd;border-radius: 6px;padding: 6px 12px;width: 200px;justify-content: center;height: 60px;}
.qty-btn{width:42px;height:42px;border:1px solid #bbb;border-radius:4px;background:#fff;font-size:20px;line-height:1;cursor:pointer;transition:.2s;display:flex;align-items:center;justify-content:center;}
.qty-btn:hover{background:var(--secondary-color);color:#fff;border-color:var(--secondary-color);}
.qty-input{width:40px;text-align:center;border:none;background:transparent;font-size:18px;font-weight:600;color:var(--dark-color);-moz-appearance:textfield;}
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}

    footer{background:var(--dark-color);color:#fff;padding:50px 0 20px;margin-top:50px;}
    .footer-container{max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;padding:0 20px;gap:30px;}
    .footer-section{flex:1;min-width:200px;}
    .footer-section h3{margin-bottom:20px;font-size:18px;color:var(--secondary-color);position:relative;padding-bottom:10px;}
    .footer-section h3:after{content:'';position:absolute;bottom:0;left:0;width:40px;height:2px;background:var(--secondary-color);}
    .footer-section ul{list-style:none;}
    .footer-section ul li{margin-bottom:12px;}
    .footer-section ul li a{color:#ddd;text-decoration:none;transition:.3s;}
    .footer-section ul li a:hover{color:var(--secondary-color);padding-left:5px;}
    .contact-item{display:flex;align-items:flex-start;margin-bottom:15px;}
    .contact-item i{color:var(--secondary-color);margin-right:10px;margin-top:3px;}
    .copyright{text-align:center;padding-top:30px;border-top:1px solid rgba(255,255,255,.1);margin-top:30px;font-size:14px;color:#aaa;}

    .modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.7);z-index:2000;justify-content:center;align-items:center;}
    .modal-content{background:#fff;padding:30px;border-radius:10px;max-width:500px;width:90%;position:relative;animation:fadeIn .4s ease-out;}
    .close-modal{position:absolute;top:15px;right:15px;font-size:24px;color:#777;cursor:pointer;transition:.3s;}
    .close-modal:hover{color:var(--secondary-color);}

    @media(max-width:992px){
      .product-container{flex-direction:column;margin-top:100px;}
      .product-info{border-left:none;border-top:1px solid var(--gray-color);}
    }
    @media(max-width:768px){header{padding:10px 0;}.header-container{flex-direction:column;text-align:center;}nav ul{margin:15px 0;flex-wrap:wrap;justify-content:center;}nav ul li{margin:5px 10px;}.contact-info{margin-top:10px;flex-direction:column;}.callback-btn{margin:0 0 10px 0;}.phone{margin:5px 0;}.main-container{margin-top:140px;}}
    
    @media (max-width: 613px) {.footer {display: flex;flex-direction: column;align-items: center;text-align: center;}.footer-section {align-items: center;display: flex;flex-direction: column;}

  .footer-section h3 {position: relative;display: inline-block;}

  .footer-section h3::after {position: absolute;width: 100%;height: 2px;}
}
    @media(max-width:480px){.product-title{font-size:26px;}.product-subtitle{font-size:16px;}.preorder-form{padding:20px;}.delivery-option{min-width:100%;}}
    
    /*иконкисоцссети*/
.social_blog {display: flex;justify-content: center;gap: 16px;margin-top: 20px;}
.social-link img {width: 32px;height: 32px;filter: brightness(0) invert(1); /* делает иконки белыми */transition: transform 0.3s ease, filter 0.3s ease;}
.social-link:hover img {transform: scale(1.2);filter: brightness(0) saturate(100%) sepia(1) hue-rotate(-20deg) saturate(500%) brightness(1.2); /* эффект оранжевого */}
@media (max-width: 600px) {.social-link img {width: 26px;height: 26px;}}
/*кнопка UP*/
#backToTop {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 48px;
  height: 48px;
  font-size: 24px;
  background-color: #ff6f00;
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 1000;
}
#backToTop.visible {
  opacity: 1;
  pointer-events: auto;
}
#backToTop:hover {
  transform: scale(1.1);
  background-color: #e65c00;
}