/* === BASE & VARIABLES === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
--primary:#3366cc;
--primary-dark:#2851a3;
--primary-light:#4d79d9;
--secondary:#f59e0b;
--text:#1f2937;
--text-light:#6b7280;
--bg:#ffffff;
--bg-light:#f8fafc;
--bg-dark:#111827;
--border:#e5e7eb;
--shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06);
--shadow-lg:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05);
--radius:12px;
--radius-sm:8px;
--spacing-xs:0.5rem;
--spacing-sm:1rem;
--spacing-md:1.5rem;
--spacing-lg:2.5rem;
--spacing-xl:4rem;
--font:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
--container:1200px;
--container-narrow:900px;
}
html{scroll-behavior:smooth}
body{
font-family:var(--font);
color:var(--text);
line-height:1.6;
background:var(--bg-light);
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
img{height:auto;display:block}
a{color:var(--primary);text-decoration:none;transition:all 0.2s ease}
a:hover{color:var(--primary-dark)}
ul{list-style:none;padding-left:0}
/* === CONTAINER === */
.container{
max-width:var(--container);
margin:0 auto;
padding:0 var(--spacing-md);
}
.container-main{
max-width:var(--container);
margin:0 auto;
padding:0;
}
/* === HEADER === */
.site-header{
background:var(--primary);
box-shadow:var(--shadow-lg);
position:sticky;
top:0;
z-index:1000;
padding:0;
}
.header-inner{
display:flex;
align-items:center;
justify-content:space-between;
gap:var(--spacing-lg);
padding:1rem var(--spacing-md);
max-width:var(--container);
margin:0 auto;
}
.logo-img{
height:48px;
width:auto;
filter:brightness(0) invert(1);
transition:opacity 0.2s;
}
.logo-img:hover{opacity:0.9}
/* Navigation Menu */
.main-menu ul{
display:flex;
gap:2rem;
align-items:center;
flex-wrap:wrap;
}
.main-menu a{
color:#ffffff;
font-weight:500;
font-size:0.95rem;
padding:0.5rem 0;
position:relative;
transition:all 0.2s;
}
.main-menu a::after{
content:'';
position:absolute;
bottom:0;
left:0;
width:0;
height:2px;
background:#fff;
transition:width 0.3s ease;
}
.main-menu a:hover{
opacity:1;
color:#fff;
}
.main-menu a:hover::after{
width:100%;
}
/* Header Contacts */
.header-contacts{
display:flex;
align-items:center;
gap:var(--spacing-md);
}
.phone{
display:flex;
align-items:center;
gap:0.5rem;
color:#ffffff;
font-weight:700;
font-size:1rem;
white-space:nowrap;
padding:0.5rem 1rem;
background:rgba(255,255,255,0.1);
border-radius:var(--radius-sm);
transition:background 0.2s;
}
.phone:hover{
background:rgba(255,255,255,0.2);
color:#fff;
}
.phone svg{
flex-shrink:0;
}
/* Cart Button */
.btn-cart{
background:rgba(255,255,255,0.15);
border:2px solid #fff;
border-radius:50%;
width:48px;
height:48px;
display:flex;
align-items:center;
justify-content:center;
position:relative;
transition:all 0.2s;
flex-shrink:0;
}
.btn-cart:hover{
background:rgba(255,255,255,0.25);
transform:translateY(-2px);
box-shadow:0 4px 12px rgba(0,0,0,0.15);
}
.cart-icon{
display:block;
}
.cart-count{
position:absolute;
top:-6px;
right:-6px;
background:var(--secondary);
color:#000;
font-size:0.75rem;
font-weight:700;
min-width:22px;
height:22px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
padding:0 5px;
border:2px solid var(--primary);
}
/* === BREADCRUMBS === */
.breadcrumbs{
padding:var(--spacing-sm) 0;
font-size:0.9rem;
color:var(--text-light);
margin-bottom:var(--spacing-sm);
}
.breadcrumbs a{
color:var(--primary);
font-weight:500;
}
.breadcrumbs a:hover{
text-decoration:underline;
}
.separator{
margin:0 0.5rem;
color:var(--text-light);
}
.current{
color:var(--text-light);
}
/* === HERO SECTION === */
.hero-section{
display:grid;
grid-template-columns:1fr 1fr;
gap:var(--spacing-xl);
align-items:center;
padding:var(--spacing-xl) var(--spacing-md);
background:linear-gradient(135deg,#f0f4ff 0%,#ffffff 100%);
margin-bottom:var(--spacing-lg);
}
.hero-content h1{
font-size:clamp(2rem,4vw,2.75rem);
margin-bottom:var(--spacing-md);
color:var(--text);
line-height:1.2;
font-weight:800;
}
.intro-text{
font-size:1.15rem;
margin-bottom:var(--spacing-md);
color:var(--text-light);
line-height:1.7;
}
.intro-text strong{
color:var(--primary);
}
.hero-cta{
display:flex;
gap:var(--spacing-sm);
margin:var(--spacing-lg) 0;
flex-wrap:wrap;
}
.hero-features{
display:flex;
gap:var(--spacing-md);
flex-wrap:wrap;
margin-top:var(--spacing-md);
margin-bottom: 30px;
}
.feature-item{
display:flex;
align-items:center;
gap:0.5rem;
font-size:0.95rem;
color:var(--text);
font-weight:500;
}
.feature-item svg{
color:var(--primary);
flex-shrink:0;
}
.hero-image{
position:relative;
}
.product-img{
border-radius:var(--radius);
box-shadow:var(--shadow-lg);
width:100%;
height:auto;
object-fit:cover;
}
/* === WIDGETS === */
.widget{
background:var(--bg);
padding:var(--spacing-md);
border-radius:var(--radius);
margin:var(--spacing-lg) 0;
border:1px solid var(--border);
box-shadow:var(--shadow);
}
.widget-header{
margin-bottom:var(--spacing-sm);
}
.widget-header h3{
margin:0 0 0.25rem;
color:var(--text);
}
.widget-header p{
margin:0;
color:var(--text-light);
font-size:0.9rem;
}
/* Calculator Form */
.calculator-form{
margin:var(--spacing-sm) 0;
}
.form-row{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:var(--spacing-sm);
margin-bottom:var(--spacing-sm);
}
.form-group{
display:flex;
flex-direction:column;
gap:0.35rem;
}
.form-group label{
font-weight:600;
font-size:0.9rem;
color:var(--text);
}
select,input,textarea{
width:100%;
padding:0.75rem;
border:2px solid var(--border);
border-radius:var(--radius-sm);
font-size:1rem;
font-family:inherit;
transition:border-color 0.2s,box-shadow 0.2s;
background:var(--bg);
}
select:focus,input:focus,textarea:focus{
outline:none;
border-color:var(--primary);
box-shadow:0 0 0 3px rgba(51,102,204,0.1);
}
.btn-primary{
background:var(--primary);
color:#fff;
padding:0.875rem 1.75rem;
border:none;
border-radius:var(--radius-sm);
font-weight:600;
font-size:1rem;
cursor:pointer;
transition:all 0.2s;
display:inline-flex;
align-items:center;
justify-content:center;
gap:0.5rem;
text-decoration:none;
}
.btn-primary:hover{
background:var(--primary-dark);
transform:translateY(-2px);
box-shadow:var(--shadow-lg);
color:#fff;
}
.btn-secondary{
background:#6b7280;
color:#fff;
padding:0.875rem 1.75rem;
border:none;
border-radius:var(--radius-sm);
font-weight:600;
font-size:1rem;
cursor:pointer;
transition:all 0.2s;
display:inline-flex;
align-items:center;
justify-content:center;
gap:0.5rem;
text-decoration:none;
}
.btn-secondary:hover{
background:#4b5563;
transform:translateY(-2px);
color:#fff;
}
.btn-full{
width:100%;
}
.btn-large{
padding:1rem 2rem;
font-size:1.1rem;
}
.btn-white{
background:#fff;
color:var(--primary);
}
.btn-white:hover{
background:#f8fafc;
color:var(--primary-dark);
}
.btn-outline{
background:#9f9f9fe0;
color:#fff;
border:2px solid #fff;
padding:0.875rem 1.75rem;
border-radius:var(--radius-sm);
font-weight:600;
transition:all 0.2s;
}
.btn-outline:hover{
background:#fff;
color:var(--primary);
}
.btn-whatsapp{
background:#25D366;
color:#fff;
padding:0.875rem 1.75rem;
border:none;
border-radius:var(--radius-sm);
font-weight:600;
display:inline-flex;
align-items:center;
gap:0.5rem;
transition:all 0.2s;
}
.btn-whatsapp:hover{
background:#128C7E;
transform:translateY(-2px);
color:#fff;
}
.calc-output{
background:#e0f2fe;
color:#0369a1;
padding:var(--spacing-sm);
border-radius:var(--radius-sm);
margin-top:var(--spacing-sm);
font-size:0.95rem;
border-left:4px solid var(--primary);
}
/* === SECTIONS === */
.content-section{
padding:var(--spacing-lg) 0;
margin-bottom:var(--spacing-md);
}
.content-section h2{
font-size:clamp(1.5rem,3vw,2rem);
margin-bottom:var(--spacing-md);
color:var(--text);
font-weight:700;
}
.section-intro{
font-size:1.1rem;
color:var(--text-light);
margin-bottom:var(--spacing-md);
}
/* Section Grid */
.section-grid{
display:grid;
grid-template-columns:1.2fr 0.8fr;
gap:var(--spacing-lg);
align-items:start;
}
.section-text p{
margin-bottom:var(--spacing-sm);
font-size:1.05rem;
}
.feature-list{
margin:var(--spacing-sm) 0;
}
.feature-list li{
display:flex;
align-items:flex-start;
gap:var(--spacing-xs);
margin-bottom:var(--spacing-xs);
padding:var(--spacing-xs) 0;
}
.feature-list li svg{
color:var(--primary);
flex-shrink:0;
margin-top:0.15rem;
}
.section-image{
position:relative;
}
.diagram-img{
border-radius:var(--radius);
box-shadow:var(--shadow);
width:100%;
height:auto;
}
/* === GALLERY === */
.gallery-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:var(--spacing-md);
margin:var(--spacing-lg) 0;
}
.gallery-item{
background:var(--bg);
border-radius:var(--radius);
overflow:hidden;
border:1px solid var(--border);
transition:transform 0.2s,box-shadow 0.2s;
}
.gallery-item:hover{
transform:translateY(-4px);
box-shadow:var(--shadow-lg);
}
.gallery-item img{
width:100%;
height:200px;
object-fit:cover;
display:block;
}
.gallery-item figcaption{
padding:var(--spacing-sm);
font-size:0.95rem;
color:var(--text);
font-weight:600;
text-align:center;
}
/* === ADVANTAGES === */
.advantages-list{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:var(--spacing-md);
margin:var(--spacing-lg) 0;
}
.advantage-card{
background:var(--bg);
padding:var(--spacing-md);
border-radius:var(--radius);
border:1px solid var(--border);
transition:all 0.2s;
}
.advantage-card:hover{
box-shadow:var(--shadow-lg);
transform:translateY(-2px);
}
.card-icon{
font-size:2.5rem;
margin-bottom:var(--spacing-sm);
}
.advantage-card h3{
font-size:1.2rem;
margin-bottom:var(--spacing-xs);
color:var(--text);
}
.advantage-card p{
color:var(--text-light);
font-size:0.95rem;
line-height:1.6;
}
/* === STEPS === */
.steps-container{
margin:var(--spacing-lg) 0;
}
.step-item{
display:flex;
gap:var(--spacing-md);
margin-bottom:var(--spacing-md);
padding:var(--spacing-md);
background:var(--bg);
border-radius:var(--radius);
border:1px solid var(--border);
}
.step-number{
background:var(--primary);
color:#fff;
width:48px;
height:48px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-weight:700;
font-size:1.25rem;
flex-shrink:0;
}
.step-content h3{
margin-bottom:var(--spacing-xs);
color:var(--text);
}
.step-content p{
color:var(--text-light);
margin-bottom:var(--spacing-xs);
}
.step-content ul{
margin-top:var(--spacing-xs);
padding-left:var(--spacing-md);
}
.step-content li{
margin-bottom:0.35rem;
color:var(--text-light);
}
.section-cta{
background:var(--bg-light);
padding:var(--spacing-md);
border-radius:var(--radius);
text-align:center;
margin-top:var(--spacing-md);
}
.section-cta p{
margin-bottom:var(--spacing-sm);
color:var(--text-light);
}
/* === TABLE === */
.table-wrapper{
overflow-x:auto;
margin:var(--spacing-lg) 0;
border-radius:var(--radius);
box-shadow:var(--shadow);
}
.selection-table{
width:100%;
border-collapse:collapse;
background:var(--bg);
font-size:0.95rem;
}
.selection-table th,
.selection-table td{
padding:var(--spacing-sm) var(--spacing-md);
text-align:left;
border-bottom:1px solid var(--border);
}
.selection-table th{
background:var(--primary);
color:#fff;
font-weight:600;
text-transform:uppercase;
font-size:0.85rem;
letter-spacing:0.05em;
}
.selection-table tbody tr:hover{
background:var(--bg-light);
}
.selection-table tbody tr:last-child td{
border-bottom:none;
}
.table-note{
font-size:0.9rem;
color:var(--text-light);
margin-top:var(--spacing-sm);
padding:var(--spacing-sm);
background:var(--bg-light);
border-radius:var(--radius-sm);
}
/* === TRUST BADGES === */
.trust-badges{
display:flex;
flex-wrap:wrap;
gap:var(--spacing-sm);
justify-content:center;
margin-bottom:var(--spacing-md);
}
.badge-item{
text-align:center;
}
.badge-img{
border-radius:var(--radius-sm);
margin-bottom:var(--spacing-xs);
box-shadow:var(--shadow);
}
.badge-item span{
display:block;
font-weight:600;
font-size:0.9rem;
color:var(--text);
}
.benefits-list{
margin:var(--spacing-md) 0;
}
.benefits-list li{
display:flex;
align-items:flex-start;
gap:var(--spacing-sm);
margin-bottom:var(--spacing-sm);
padding:var(--spacing-xs) 0;
}
.benefits-list li svg{
color:var(--primary);
flex-shrink:0;
margin-top:0.15rem;
}
.availability-box{
background:#fef3c7;
border-left:4px solid var(--secondary);
padding:var(--spacing-md);
border-radius:var(--radius-sm);
margin-top:var(--spacing-md);
font-weight:500;
}
/* === PRICE FACTORS === */
.price-factors{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:var(--spacing-sm);
margin:var(--spacing-lg) 0;
}
.factor-item{
display:flex;
align-items:flex-start;
gap:var(--spacing-sm);
padding:var(--spacing-sm);
background:var(--bg);
border-radius:var(--radius-sm);
border:1px solid var(--border);
}
.factor-icon{
font-size:1.5rem;
flex-shrink:0;
}
.factor-text{
color:var(--text);
font-size:0.95rem;
}
.price-cta{
background:linear-gradient(135deg,var(--primary),var(--primary-dark));
color:#fff;
border:none;
}
.price-cta p{
color:#fff;
}
.price-cta small{
color:rgba(255,255,255,0.9);
}
/* === FAQ === */
.faq-item{
margin-bottom:var(--spacing-sm);
border:1px solid var(--border);
border-radius:var(--radius-sm);
overflow:hidden;
background:var(--bg);
}
.faq-item summary{
padding:var(--spacing-md);
font-weight:600;
cursor:pointer;
background:var(--bg-light);
list-style:none;
position:relative;
padding-right:3rem;
}
.faq-item summary::-webkit-details-marker{
display:none;
}
.faq-item summary::after{
content:'+';
position:absolute;
right:var(--spacing-md);
top:50%;
transform:translateY(-50%);
font-size:1.5rem;
font-weight:300;
color:var(--primary);
}
.faq-item[open] summary::after{
content:'−';
}
.faq-item[open] summary{
border-bottom:1px solid var(--border);
}
.faq-item > div{
padding:var(--spacing-md);
color:var(--text-light);
}
/* === CTA BLOCK === */
.cta-block{
background:linear-gradient(135deg,var(--primary),var(--primary-dark));
color:#fff;
padding:var(--spacing-xl) var(--spacing-md);
border-radius:var(--radius);
margin:var(--spacing-xl) 0;
text-align:center;
}
.cta-content{
max-width:800px;
margin:0 auto;
}
.cta-block h2{
color:#fff;
margin-bottom:var(--spacing-md);
}
.cta-block p{
font-size:1.1rem;
margin-bottom:var(--spacing-lg);
opacity:0.95;
}
.cta-features{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:var(--spacing-md);
margin:var(--spacing-lg) 0;
}
.cta-features li{
display:flex;
align-items:center;
gap:0.5rem;
font-weight:500;
}
.cta-features svg{
flex-shrink:0;
}
.cta-buttons{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:var(--spacing-sm);
margin-top:var(--spacing-lg);
}
/* === SIDEBAR === */
.sidebar{
margin:var(--spacing-xl) 0;
}
.category-list li{
margin-bottom:var(--spacing-xs);
}
.category-list a{
display:flex;
align-items:center;
gap:var(--spacing-sm);
padding:var(--spacing-xs) var(--spacing-sm);
border-radius:var(--radius-sm);
transition:background 0.2s;
}
.category-list a:hover{
background:var(--bg-light);
}
.cat-icon{
font-size:1.25rem;
}
.cat-text{
flex:1;
font-weight:500;
}
.cat-price{
font-size:0.85rem;
color:var(--text-light);
}
/* Filters */
.filter-group{
margin-bottom:var(--spacing-sm);
}
.filter-label{
display:block;
font-weight:600;
margin-bottom:var(--spacing-xs);
font-size:0.9rem;
}
.checkbox-label{
display:flex;
align-items:center;
gap:var(--spacing-xs);
padding:var(--spacing-xs) 0;
cursor:pointer;
font-size:0.95rem;
}
.checkbox-label input[type="checkbox"]{
width:auto;
cursor:pointer;
}
/* Delivery List */
.delivery-list li{
display:flex;
align-items:flex-start;
gap:var(--spacing-sm);
margin-bottom:var(--spacing-sm);
padding:var(--spacing-xs) 0;
}
.delivery-list svg{
color:var(--primary);
flex-shrink:0;
margin-top:0.15rem;
}
/* === ORDER FORM === */
.order-section{
background:var(--bg);
padding:var(--spacing-xl) var(--spacing-md);
border-radius:var(--radius);
margin:var(--spacing-xl) auto;
max-width:var(--container-narrow);
box-shadow:var(--shadow-lg);
border:1px solid var(--border);
}
.order-header{
text-align:center;
margin-bottom:var(--spacing-lg);
}
.order-header h2{
margin-bottom:var(--spacing-xs);
}
.order-header p{
color:var(--text-light);
}
.order-form{
max-width:100%;
}
.consent-label{
display:flex;
align-items:flex-start;
gap:var(--spacing-xs);
margin:var(--spacing-md) 0;
font-size:0.9rem;
color:var(--text-light);
}
.consent-label input{
width:auto;
margin-top:0.2rem;
}
.form-note{
display:block;
text-align:center;
margin-top:var(--spacing-sm);
color:var(--text-light);
font-size:0.9rem;
}
/* === FOOTER === */
.site-footer{
background:var(--bg-dark);
color:#d1d5db;
padding:var(--spacing-xl) 0 var(--spacing-md);
margin-top:var(--spacing-xl);
}
.footer-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:var(--spacing-lg);
margin-bottom:var(--spacing-lg);
}
.footer-col h5{
color:#fff;
margin-bottom:var(--spacing-md);
font-size:1.1rem;
font-weight:600;
}
.footer-col ul li{
margin-bottom:var(--spacing-xs);
}
.footer-col a{
color:#9ca3af;
transition:color 0.2s;
}
.footer-col a:hover{
color:#fff;
}
.footer-contacts p{
margin-bottom:var(--spacing-xs);
font-size:0.95rem;
}
.footer-contacts a{
color:#fff;
font-weight:600;
}
.footer-contacts small{
color:#9ca3af;
}
.social-links{
display:flex;
gap:var(--spacing-sm);
margin-top:var(--spacing-md);
}
.social-link{
background:#374151;
color:#fff;
padding:0.5rem 1rem;
border-radius:var(--radius-sm);
font-weight:600;
font-size:0.9rem;
transition:background 0.2s;
}
.social-link:hover{
background:var(--primary);
color:#fff;
}
.footer-bottom{
border-top:1px solid #374151;
padding-top:var(--spacing-md);
text-align:center;
font-size:0.9rem;
}
.footer-bottom a{
color:#9ca3af;
text-decoration:underline;
}
/* === GRID SYSTEM === */
.grid{
display:grid;
gap:var(--spacing-md);
}
.grid-2{
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}
/* === RESPONSIVE === */
@media (max-width: 1024px){
.header-inner{
flex-wrap:wrap;
gap:var(--spacing-sm);
}
.main-menu ul{
order:3;
width:100%;
justify-content:center;
gap:var(--spacing-md);
margin-top:var(--spacing-sm);
padding-top:var(--spacing-sm);
border-top:1px solid rgba(255,255,255,0.2);
}
.hero-section{
grid-template-columns:1fr;
text-align:center;
}
.hero-features{
justify-content:center;
}
.section-grid{
grid-template-columns:1fr;
}
.section-image{
order:-1;
}
}
@media (max-width: 768px){
.header-contacts{
flex-wrap:wrap;
justify-content:flex-end;
}
.phone span{
display:none;
}
.phone{
padding:0.5rem;
}
.btn-cart{
width:44px;
height:44px;
}
.hero-content h1{
font-size:1.75rem;
}
.intro-text{
font-size:1rem;
}
.hero-cta{
flex-direction:column;
}
.hero-cta .btn-primary,
.hero-cta .btn-secondary{
width:100%;
}
.form-row{
grid-template-columns:1fr;
}
.gallery-grid{
grid-template-columns:1fr;
}
.advantages-list{
grid-template-columns:1fr;
}
.price-factors{
grid-template-columns:1fr;
}
.cta-buttons{
flex-direction:column;
}
.cta-buttons .btn-primary,
.cta-buttons .btn-outline,
.cta-buttons .btn-whatsapp{
width:100%;
}
.footer-grid{
grid-template-columns:1fr;
text-align:center;
}
.social-links{
justify-content:center;
}
}
@media (max-width: 480px){
:root{
--spacing-lg:2rem;
--spacing-xl:3rem;
}
.main-menu ul{
flex-direction:column;
align-items:center;
}
.cart-count{
min-width:20px;
height:20px;
font-size:0.7rem;
padding:0 4px;
}
.step-item{
flex-direction:column;
}
.step-number{
align-self:center;
}
}
/* === UTILITIES === */
.text-center{text-align:center}
.mt-1{margin-top:var(--spacing-sm)}
.mt-2{margin-top:var(--spacing-md)}
.mt-3{margin-top:var(--spacing-lg)}
.mb-1{margin-bottom:var(--spacing-sm)}
.mb-2{margin-bottom:var(--spacing-md)}
.mb-3{margin-bottom:var(--spacing-lg)}

/* === CATALOG HERO & GRID FIX === */
/* Отменяем наследование grid от .hero-section, чтобы каталог не схлопывался в 1 колонку */
.catalog-hero {
    display: block !important;
    grid-template-columns: unset !important;
    background: linear-gradient(135deg, #f0f4ff 0%, #ffffff 100%);
    padding: var(--spacing-xl) 0;
    margin-bottom: var(--spacing-lg);
    width: 100%;
}

.catalog-hero .product-catalog-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Явно 4 колонки */
    gap: var(--spacing-md);
    width: 100%;
}

.catalog-hero .product-card {
    background: var(--bg);
    border-radius: var(--radius);
    overflow: hidden;
    border: 2px solid var(--border);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    min-width: 0; /* Важно: предотвращает распирание колонок текстом */
}

.catalog-hero .product-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-light);
}

.catalog-hero .product-image-wrapper {
    position: relative;
    background: var(--bg-light);
    padding: var(--spacing-md);
    overflow: hidden;
}

.catalog-hero .product-image {
    width: 100%;
    height: 220px;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.catalog-hero .product-card:hover .product-image {
    transform: scale(1.05);
}

.catalog-hero .product-badge {
    position: absolute;
    top: var(--spacing-sm);
    left: var(--spacing-sm);
    background: var(--secondary);
    color: #000;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.catalog-hero .product-badge-new {
    background: #10b981;
    color: #fff;
}

.catalog-hero .product-info {
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.catalog-hero .product-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: var(--spacing-sm);
    line-height: 1.3;
    min-height: 2.6rem;
}

.catalog-hero .product-specs {
    margin: var(--spacing-sm) 0;
    flex: 1;
}

.catalog-hero .spec-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
}

.catalog-hero .spec-item:last-child {
    border-bottom: none;
}

.catalog-hero .spec-label {
    color: var(--text-light);
    font-weight: 500;
}

.catalog-hero .spec-value {
    color: var(--text);
    font-weight: 600;
    text-align: right;
    max-width: 55%;
}

.catalog-hero .product-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-md);
}

.catalog-hero .btn-small {
    padding: 0.65rem 1rem;
    font-size: 0.9rem;
    width: 100%;
    text-align: center;
}

.catalog-hero .hero-cta-center {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    margin-top: 30px;
}

/* Адаптив для каталога */
@media (max-width: 1024px) {
    .catalog-hero .product-catalog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .catalog-hero .product-catalog-grid {
        grid-template-columns: 1fr;
    }
    .catalog-hero .hero-features {
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-sm);
    }
    .catalog-hero .hero-cta-center {
        flex-direction: column;
        align-items: center;
    }
}
/* === FIX: Сетка 3 колонки для блоков "Сферы применения" === */
.grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1024px) {
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .grid-3 { grid-template-columns: 1fr; }
}