@font-face { font-family: "MTSans"; src: url("/font/mt-sans-full/MTSans-LightCondensed.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "MTSans"; src: url("/font/mt-sans-full/MTSans-RegularCondensed.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "MTSans"; src: url("/font/mt-sans-full/MTSans-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "MTSans"; src: url("/font/mt-sans-full/MTSans-BoldCondensed.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "MTSans"; src: url("/font/mt-sans-full/MTSans-BlackCondensed.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "MTSans-Wide"; src: url("/font/mt-sans-full/MTSans-BlackExtended.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Quam"; src: url("/font/quam/Quam_family_otf/Quam-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Quam"; src: url("/font/quam/Quam_family_otf/Quam-Black.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { max-width: 1680px; margin: 0 auto; font-size: 19px; } 
body { margin: 0 auto; max-width: 1680px; background: #ffffff; color: #1a202c; font-family: "MTSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; font-size: 19px; line-height: 1.5; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
.site-header { width: 100%; padding: 12px 16px; border-bottom: 1px solid #e2e8f0; }
.header-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; }
.logo-wrapper { display: flex; align-items: center; max-width: 100%; margin: 0 auto;}
.logo { display: inline-flex; align-items: center; }
.logo-icon { display: block; }
.brand-main { color: #1a202c; }
.brand-green { color: #2e7d32; } 
.main-nav { display: flex; align-items: center; margin: 0 auto;} 
.nav-list { list-style: none; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin: 0; padding: 0; font-family: "MTSans", sans-serif; font-weight: 700; }
.menu-item { display: inline-block; position: relative; }
.menu-link { color: #4a5568; font-size: 18px; padding: 6px 10px; display: inline-block; }
.menu-link:hover { color: #2b6cb0; }
.menu-link.active { font-weight: bold; color: #1a202c; }
.header-h1-wrap { display: flex; align-items: center; margin: 0 auto;}
.header-h1 { display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); border: 1px solid #cbd5e1; border-radius: 8px; padding: 6px 18px; box-shadow: 0 3px 12px rgba(15, 23, 42, 0.08), inset 0 1px 0 #ffffff; font-family: "MTSans", sans-serif; font-size: 19px; line-height: 24px; font-weight: 900; color: #0f172a; margin: 0; letter-spacing: -0.2px; text-align: center; }
.menu-item--dropdown { position: relative; }
.menu-split { display: inline-flex; align-items: center; position: relative; z-index: 101; gap: 4px; }
.dropdown-toggle-input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; margin: 0; }
.dropdown-arrow-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid #cbd5e1; border-radius: 4px; cursor: pointer; user-select: none; transition: 0.2s; }
.dropdown-arrow-btn:hover { border-color: #2b6cb0; background: #f8fafc; }
.dropdown-arrow-btn::after { content: ""; display: inline-block; width: 8px; height: 8px; border-right: 2px solid #4a5568; border-bottom: 2px solid #4a5568; transform: rotate(45deg); margin-bottom: 3px; transition: transform 0.2s, border-color 0.2s; }
.dropdown-arrow-btn:hover::after { border-color: #2b6cb0; }
.dropdown-toggle-input:checked ~ .menu-split .dropdown-arrow-btn { border-color: #2b6cb0; background: #eff6ff; }
.dropdown-toggle-input:checked ~ .menu-split .dropdown-arrow-btn::after { transform: rotate(225deg); margin-bottom: -3px; border-color: #2b6cb0; }
.dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); padding: 6px 0; list-style: none; width: 220px; z-index: 100; }
.dropdown-menu::before { content: ""; position: absolute; top: -6px; left: 0; right: 0; height: 6px; }
.dropdown-toggle-input:checked ~ .dropdown-menu { display: block; }
.dropdown-link { display: block; padding: 8px 16px; font-size: 17px; color: #4a5568; line-height: 20px; }
.dropdown-link:hover { background: #f8fafc; color: #2b6cb0; }
.breadcrumbs { width: 320px; max-width: 100%; box-sizing: border-box; display: flex; align-items: center; margin: 0; padding: 4px 8px; border-radius: 8px; position: relative; background: #0a170d; border: 1px solid #199438; box-shadow: 0 0 12px rgba(25, 148, 56, 0.2); }
.breadcrumbs::-webkit-scrollbar { display: none; }
.breadcrumbs::before, .breadcrumbs::after { background: #199438; content: ""; border-radius: 4px; position-anchor: --crumbs; position: absolute; top: anchor(bottom); bottom: calc(anchor(bottom) - 3px); left: anchor(left); right: anchor(right); transition: 0.5s; transition-timing-function: linear(0, 0.008 1.1%, 0.031 2.2%, 0.129 4.8%, 0.257 7.2%, 0.671 14.2%, 0.789 16.5%, 0.881 18.6%, 0.957 20.7%, 1.019 22.9%, 1.063 25.1%, 1.094 27.4%, 1.114 30.7%, 1.112 34.5%, 1.018 49.9%, 0.99 59.1%, 1); z-index: 1; pointer-events: none; }
.breadcrumbs::after { top: calc(anchor(top) - 3px); bottom: anchor(top); }
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; position: relative; anchor-name: --crumbs; z-index: 2; width: 100%; }
.breadcrumbs li { display: inline-flex; align-items: center; font-size: 13px; line-height: 18px; font-family: monospace, sans-serif; }
.breadcrumbs a { display: inline-flex; align-items: center; padding: 2px 6px; border-radius: 4px; text-decoration: underline; color: #31d45a; font-weight: bold; text-transform: uppercase; transition: 0.3s; }
.breadcrumbs a.breadcrumbs-logo { padding: 2px 4px; display: inline-flex; align-items: center; justify-content: center; }
.breadcrumbs a:hover { position: relative; display: inline-flex; anchor-name: --crumbs; color: #060e06; }
.breadcrumbs:has(a:hover)::before, .breadcrumbs:has(a:hover)::after { top: anchor(top); left: anchor(left); right: anchor(right); bottom: anchor(bottom); }
.breadcrumbs .separator { margin: 0 2px; color: #0e6b1f; user-select: none; font-weight: bold; }
.breadcrumbs .current span[aria-current="page"] { display: inline-flex; align-items: center; padding: 2px 6px; color: #ffffff; font-weight: bold; text-transform: uppercase; cursor: default; }
@supports not (anchor-name: --crumbs) { .breadcrumbs a:hover { background: #199438; color: #060e06; } }
.site-main { width: 100%; display: block; }
.h1-wrap { max-width: 1680px; width: 100%; margin: 0 auto; padding: 24px 16px; }
.h1a { font-family: "MTSans-Wide", "MTSans", sans-serif; font-size: 26px; line-height: 38px; font-weight: 900; color: #1a202c; text-align: center; }
.br-mobile { display: none; }
.site-footer { width: 100%; clear: both; display: block; padding: 30px 16px 20px; border-top: 1px solid #e2e8f0; background: #f8fafc; font-size: 15px; margin-top: 40px; }
.footer-container { max-width: 1680px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.footer-contacts { line-height: 24px; color: #4a5568; }
.footer-phone { font-size: 18px; font-weight: bold; margin: 8px 0; }
.footer-phone a { color: #1a202c; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 16px; }
.footer-nav a { color: #2b6cb0; text-decoration: underline; }
.footer-social { display: flex; gap: 16px; font-weight: bold; }
.footer-social a { color: #2b6cb0; }
.footer-copyright { font-size: 14px; color: #718096; border-top: 1px solid #e2e8f0; padding-top: 12px; }
body { padding-bottom: 60px; }

/* Всплывающие кнопки связи */
.fab-children { position: fixed; bottom: 68px; right: calc(10% - 18px); display: flex; flex-direction: column; align-items: center; gap: 12px; opacity: 0; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; z-index: 1000000; margin-bottom: 10px; }
.fab-children.active { opacity: 1; pointer-events: all; }
.fab-child { width: 52px; height: 52px; border-radius: 50%; display: flex; justify-content: center; align-items: center; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25); cursor: pointer; transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.5s ease, box-shadow 0.3s; position: relative; border: 3px solid #ffffff; transform: translateY(60px) scale(0.6); text-decoration: none; opacity: 0; }
.fab-children.active .fab-child { transform: translateY(0) scale(1); opacity: 1; }
.fab-child:nth-child(1) { transition-delay: 0.08s; }
.fab-child:nth-child(2) { transition-delay: 0s; }
.fab-children.active .fab-child:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); }
.fab-child svg { width: 22px; height: 22px; fill: #ffffff; transition: 0.3s; }
.fab-children.active .fab-child:hover svg { transform: scale(1.15); }
.fab-child.phone { background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%); }
.fab-child.fab-close { width: 34px; height: 34px; background: #1f2937; border: 2px solid rgba(255, 255, 255, 0.4); outline: none; }
.fab-child.fab-close svg { width: 14px; height: 14px; stroke: #ffffff; stroke-width: 2.5; fill: none; }
.fab-children.active .fab-child.fab-close:hover { background: #dc2626; border-color: #ffffff; }
.fab-child::before { content: attr(data-tooltip); position: absolute; right: 64px; background: #1f2937; color: #ffffff; padding: 6px 12px; border-radius: 6px; font-size: 13px; font-weight: 500; white-space: nowrap; opacity: 0; transition: opacity 0.2s ease; pointer-events: none; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); }
.fab-child::after { content: ""; position: absolute; right: 58px; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 6px solid #1f2937; opacity: 0; transition: opacity 0.2s ease; pointer-events: none; }
.fab-child:hover::before, .fab-child:hover::after { opacity: 0.95; }

/* Нижний навигационный таб-бар */
.tab-bar { background-color: #111111; padding: 0 10px; display: flex; position: fixed; z-index: 999999; bottom: 0; left: 0; width: 100%; max-width: 100%; height: 53px; justify-content: space-between; align-items: center; box-sizing: border-box; border-radius: 20px 20px 0 0; box-shadow: 0 -4px 25px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(74, 222, 128, 0.28); }
.tab-bar::before { content: ""; position: absolute; left: 0; width: 100%; top: 50%; height: 1.5px; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.12) 6%, rgba(34, 197, 94, 0.5) 25%, rgba(16, 185, 129, 0.6) 50%, rgba(34, 197, 94, 0.5) 75%, rgba(128, 67, 217, 0.45) 94%, transparent 100%); box-shadow: 0 0 10px rgba(34, 197, 94, 0.35); pointer-events: none; z-index: 0; }
.tab-bar .tab-indicator { position: absolute; background-color: #ffffff; width: 66px; height: 40px; border-radius: 0 0 50px 50px; z-index: 1; left: 0; top: 0; opacity: 0; transition: transform 0.3s ease-out, opacity 0.2s; }
.tab-bar .tab-indicator .tab-indicator-left, .tab-bar .tab-indicator .tab-indicator-right { background-color: #ffffff; height: 16px; width: 16px; position: absolute; top: 0; }
.tab-bar .tab-indicator .tab-indicator-left:after, .tab-bar .tab-indicator .tab-indicator-right:after { content: ""; width: 100%; height: 100%; background-color: #111111; display: block; }
.tab-bar .tab-indicator .tab-indicator-left { left: -16px; }
.tab-bar .tab-indicator .tab-indicator-left:after { border-radius: 0 22px 0 0; }
.tab-bar .tab-indicator .tab-indicator-right { right: -16px; }
.tab-bar .tab-indicator .tab-indicator-right:after { border-radius: 22px 0 0 0; }
.tab-bar .tab-item { flex: 1; display: flex; align-items: center; justify-content: center; position: relative; height: 100%; text-decoration: none; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: background 0.25s ease; }
.tab-bar .tab-item:hover { background: radial-gradient(ellipse at center 70%, rgba(34, 197, 94, 0.18) 0%, transparent 70%); }
.tab-bar .tab-item:not(.active):hover .tab-item-inner { box-shadow: 0 0 26px rgba(74, 222, 128, 0.52); }
.tab-bar .tab-item:not(:last-child)::after { content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 26px; background: linear-gradient(180deg, transparent, rgba(74, 222, 128, 0.25) 30%, rgba(74, 222, 128, 0.25) 70%, transparent); pointer-events: none; }
.tab-bar .tab-item .tab-item-inner { position: absolute; display: flex; height: 50px; width: 50px; border-radius: 50%; align-items: center; justify-content: center; background-color: #111111; z-index: 1; transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, background-color 0.2s; }
.tab-bar .tab-item .tab-item-inner svg { width: 24px; height: 24px; stroke: #ffffff; fill: transparent; stroke-width: 1.5; stroke-miterlimit: 10; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 400; }
.tab-bar .tab-item.active .tab-item-inner { transform: translateY(-20px); transition-delay: 0.15s; background-color: #1F7238; z-index: 2; box-shadow: 0 5px 8px 0px rgba(0, 0, 0, 0.3), 0 0 22px rgba(51, 122, 183, 0.5); }
.tab-bar .tab-item.active .tab-item-inner svg { stroke: #ffffff; animation: draw 1s reverse; }
.tab-bar .tab-item:nth-of-type(1) .tab-item-inner { box-shadow: 0 0 18px rgba(255, 255, 255, 0.12); }
.tab-bar .tab-item:nth-of-type(2) .tab-item-inner { box-shadow: 0 0 20px rgba(16, 185, 129, 0.32); }
.tab-bar .tab-item:nth-of-type(3) .tab-item-inner { box-shadow: 0 0 22px rgba(34, 197, 94, 0.4); }
.tab-bar .tab-item:nth-of-type(4) .tab-item-inner { box-shadow: 0 0 18px rgba(74, 222, 128, 0.28); }
.tab-bar .tab-item.tab-contact .tab-item-inner { box-shadow: 0 0 20px rgba(128, 67, 217, 0.35); }
.tab-item.tab-contact .contact-icon-max { display: none; }
.tab-item.tab-contact.active .contact-icon-phone { display: none; }
.tab-item.tab-contact.active .contact-icon-max { display: block; width: 26px; height: 26px; fill: #ffffff; stroke: none; }
.tab-bar .tab-item.tab-contact.active .tab-item-inner { background: linear-gradient(135deg, #3E5CFC 0%, #8043D9 100%); box-shadow: 0 5px 8px 0px rgba(0, 0, 0, 0.3), 0 0 28px rgba(128, 67, 217, 0.6); }
@keyframes draw { 100% { stroke-dashoffset: 400; } }

/* Карточка товара КС 10-9 */
.product-section { max-width: 1680px; width: 100%; margin: 0 auto; padding: 22px 16px 30px; display: flex; flex-direction: column; gap: 32px; }
.product-card { display: flex; flex-direction: column; gap: 16px; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 24px; box-shadow: 0 4px 16px rgba(0,0,0,0.04); scroll-margin-top: 24px; }
.product-card-top { display: flex; flex-direction: column; gap: 8px; width: 100%; border-bottom: 1px solid #edf2f7; padding-bottom: 14px; }
.product-card-body { display: flex; align-items: flex-start; gap: 28px; width: 100%; }
.product-media { width: 340px; flex-shrink: 0; display: flex; flex-direction: column; gap: 12px; }
.product-media--wide { width: 440px; }
.product-media-img { position: relative; width: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; background: #fafafa; border-radius: 8px; padding: 10px 10px 8px; box-sizing: border-box; }
.media-badge-wrap { display: flex; justify-content: space-between; align-items: center; gap: 6px; width: 100%; box-sizing: border-box; pointer-events: none; z-index: 2; }
.media-badge-wrap--top { margin-bottom: 6px; }
.media-badge-wrap--bottom { margin-top: 6px; }
.media-badge { font-family: "MTSans", sans-serif; font-size: 12px; font-weight: 800; padding: 4px 8px; border-radius: 5px; line-height: 14px; text-transform: uppercase; letter-spacing: 0.3px; box-shadow: 0 2px 6px rgba(0,0,0,0.08); white-space: nowrap; }
.media-volume-badge { background: #0f172a; color: #ffffff; border: 1px solid rgba(255,255,255,0.2); }
.media-depth-badge { background: #0f172a; color: #ffffff; border: 1px solid rgba(255,255,255,0.2); }
.media-neck-badge { background: #e8f5e9; color: #1e7022; border: 1px solid #c8e6c9; }
.media-delivery-badge { background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; }
.product-media-pic { display: flex; justify-content: center; align-items: center; width: 100%; }
.product-media-pic img, .product-media-img > img { width: 100%; max-width: 340px; height: auto; display: block; object-fit: contain; margin: 0 auto; }
.product-media--wide .product-media-pic img, .product-media--wide .product-media-img > img { max-width: 440px; }
.product-info { flex: 1; display: flex; flex-direction: column; gap: 12px; margin: 0 auto;}
.product-badge { display: inline-block; align-self: flex-start; padding: 4px 10px; background: #e8f5e9; color: #2e7d32; font-family: "MTSans", sans-serif; font-size: 13px; font-weight: 700; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.8px; }
.product-title { font-family: "MTSans", sans-serif; font-size: 28px; line-height: 34px; font-weight: 900; color: #0f172a; letter-spacing: 0.2px; margin: 0; }
.product-desc { font-family: "MTSans", sans-serif; font-size: 16px; line-height: 24px; font-weight: 400; color: #475569; }
.product-desc--mobile { display: none; }
.product-specs { display: flex; flex-direction: column; gap: 8px; padding: 0 0 10px; }
.specs-block-title { font-family: "MTSans", sans-serif; font-size: 17px; line-height: 23px; font-weight: 800; color: #0f172a; margin: 0 0 4px; padding-bottom: 6px; border-bottom: 2px solid #e2e8f0; }
.spec-row { display: flex; align-items: baseline; justify-content: space-between; font-size: 16px; line-height: 22px; }
.spec-name { font-family: "MTSans", sans-serif; font-weight: 400; color: #718096; flex-shrink: 0; }
.spec-dots { flex: 1; border-bottom: 1px dotted #cbd5e0; margin: 0 8px; }
.spec-val { font-family: "MTSans", sans-serif; font-weight: 800; color: #0f172a; text-align: right; }
.diameter-switch { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin: 2px 0 6px; padding: 7px 10px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; }
.diameter-switch-label { font-family: "MTSans", sans-serif; font-size: 13px; font-weight: 700; color: #64748b; margin-right: 2px; }
.diameter-btn { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 6px; font-size: 13px; font-weight: 800; font-family: "MTSans", sans-serif; text-decoration: none; border: 1px solid #cbd5e1; background: #ffffff; color: #1e293b; transition: all 0.15s ease; line-height: 16px; }
.diameter-btn:hover { border-color: #2e7d32; color: #2e7d32; background: #f0fdf4; }
.diameter-btn.active { background: #2e7d32; color: #ffffff; border-color: #2e7d32; cursor: default; }
.kit-breakdown { margin: 6px 0 10px; border-top: 1px solid #edf2f7; border-bottom: 1px solid #edf2f7; padding: 12px 0; }
.kit-header-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.kit-header-title { font-family: "MTSans", sans-serif; font-size: 15px; font-weight: 800; color: #0f172a; margin: 0; line-height: 20px; }
.kit-header-hint { font-size: 13px; color: #718096; }
.kit-list { display: flex; flex-direction: column; gap: 8px; }
.kit-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: #f8fafc; border-radius: 8px; border: 1px solid #e2e8f0; gap: 12px; }
.kit-col-main { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.kit-check-label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.kit-check-input { width: 17px; height: 17px; accent-color: #2e7d32; cursor: pointer; margin: 0; flex-shrink: 0; }
.kit-name { font-family: "MTSans", sans-serif; font-size: 15px; font-weight: 700; color: #0f172a; line-height: 19px; }
.kit-desc { font-family: "MTSans", sans-serif; font-size: 14px; color: #64748b; line-height: 19px; }
.kit-neck-select-wrap { display: flex; flex-direction: column; gap: 4px; width: 100%; box-sizing: border-box; }
.kit-neck-select { width: 100%; padding: 6px 30px 6px 10px; font-family: "MTSans", sans-serif; font-size: 14px; font-weight: 700; color: #0f172a; background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e7d32' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat calc(100% - 8px) center / 16px 16px; border: 1.5px solid #2e7d32; border-radius: 6px; outline: none; cursor: pointer; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; transition: border-color 0.15s, box-shadow 0.15s; }
.kit-neck-select:hover, .kit-neck-select:focus { border-color: #1b5e20; box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.12); }
.kit-col-price { font-family: "MTSans", sans-serif; font-size: 14px; font-weight: 700; color: #64748b; white-space: nowrap; }
.kit-col-qty { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.kit-qty-btn { width: 28px; height: 28px; border-radius: 6px; border: 1px solid #cbd5e1; background: #ffffff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; font-weight: bold; color: #0f172a; transition: background 0.15s, border-color 0.15s; }
.kit-qty-btn:hover { background: #e2e8f0; border-color: #94a3b8; }
.kit-qty-input { width: 34px; height: 28px; text-align: center; font-family: "MTSans", sans-serif; font-size: 14px; font-weight: 800; border: 1px solid #cbd5e1; border-radius: 6px; background: #ffffff; color: #0f172a; outline: none; }
.kit-col-sum { width: 75px; text-align: right; font-family: "MTSans", sans-serif; font-size: 14px; font-weight: 800; color: #2e7d32; flex-shrink: 0; }
.product-action { display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 12px 14px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; box-sizing: border-box; }
.price-wrap { display: flex; flex-direction: column; gap: 4px; }
.price-label { font-family: "MTSans", sans-serif; font-size: 13px; line-height: 18px; font-weight: 700; color: #64748b; }
.price-value { font-family: "MTSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 28px; line-height: 32px; font-weight: 800; color: #2e7d32; letter-spacing: 0; white-space: nowrap; }
.btn-order { display: inline-flex; align-items: center; justify-content: center; text-align: center; width: 100%; padding: 12px 16px; background: #2e7d32; color: #ffffff; font-family: "MTSans", sans-serif; font-size: 16px; font-weight: 800; letter-spacing: 0.3px; border-radius: 6px; text-decoration: none; border: none; cursor: pointer; transition: background 0.2s; box-sizing: border-box; }
.btn-order:hover { background: #256628; }
.btn-examples { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 10px 14px; background: #ffffff; color: #1e293b; font-family: "MTSans", sans-serif; font-size: 15px; font-weight: 800; border: 1.5px solid #cbd5e1; border-radius: 6px; text-decoration: none; cursor: pointer; transition: all 0.2s ease; box-sizing: border-box; text-align: center; }
.btn-examples:hover { background: #eff6ff; border-color: #2b6cb0; color: #1d4ed8; box-shadow: 0 2px 8px rgba(43, 108, 176, 0.12); }
.btn-examples svg { flex-shrink: 0; color: #2b6cb0; }
.works-section { max-width: 1680px; width: 100%; margin: 0 auto; padding: 22px 16px 40px; display: flex; flex-direction: column; gap: 32px; }
.works-anchor-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 14px 18px; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.03); }
.works-anchor-label { font-family: "MTSans", sans-serif; font-size: 15px; font-weight: 700; color: #64748b; }
.works-anchor-link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 6px; font-size: 15px; font-weight: 800; font-family: "MTSans", sans-serif; text-decoration: none; border: 1px solid #cbd5e1; background: #f8fafc; color: #1e293b; transition: all 0.15s ease; }
.works-anchor-link:hover { border-color: #2b6cb0; background: #eff6ff; color: #1d4ed8; }
.work-block { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 24px; box-shadow: 0 4px 16px rgba(0,0,0,0.04); scroll-margin-top: 80px; display: flex; flex-direction: column; gap: 18px; }
.work-block-head { display: flex; flex-direction: column; gap: 6px; border-bottom: 1px solid #edf2f7; padding-bottom: 14px; }
.work-block-badge { display: inline-block; align-self: flex-start; padding: 4px 10px; background: #e0f2fe; color: #0369a1; font-family: "MTSans", sans-serif; font-size: 13px; font-weight: 700; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.8px; }
.work-block-title { font-family: "MTSans", sans-serif; font-size: 26px; line-height: 32px; font-weight: 900; color: #0f172a; margin: 0; }
.work-block-desc { font-family: "MTSans", sans-serif; font-size: 16px; line-height: 24px; color: #475569; margin: 0; }
.work-placeholder-card { display: flex; flex-direction: column; gap: 14px; background: #f8fafc; border: 1.5px dashed #cbd5e1; border-radius: 10px; padding: 28px 20px; text-align: center; align-items: center; justify-content: center; min-height: 220px; box-sizing: border-box; }
.work-placeholder-icon { width: 48px; height: 48px; color: #94a3b8; }
.work-placeholder-text { font-family: "MTSans", sans-serif; font-size: 17px; font-weight: 800; color: #334155; margin: 0; }
.work-placeholder-sub { font-family: "MTSans", sans-serif; font-size: 14px; line-height: 20px; color: #64748b; max-width: 520px; margin: 0; }
.work-specs-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 6px; }
.work-spec-item { display: flex; flex-direction: column; gap: 3px; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px 14px; }
.work-spec-k { font-size: 13px; font-weight: 700; color: #64748b; font-family: "MTSans", sans-serif; }
.work-spec-v { font-size: 15px; font-weight: 800; color: #0f172a; font-family: "MTSans", sans-serif; }
.cart-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 23, 42, 0.65); backdrop-filter: blur(4px); z-index: 2000000; display: none; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.25s ease; padding: 16px; overflow-y: auto; }
.cart-modal-overlay.open { display: flex; opacity: 1; }
.cart-modal { background: #ffffff; width: 100%; max-width: 480px; border-radius: 12px; padding: 18px 20px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); position: relative; transform: translateY(18px); transition: transform 0.25s ease; border: 1px solid #e2e8f0; font-family: "MTSans", sans-serif; }
.cart-modal-overlay.open .cart-modal { transform: translateY(0); }
.cart-close { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border: 1px solid #e2e8f0; background: #f8fafc; border-radius: 6px; font-size: 20px; line-height: 26px; cursor: pointer; color: #64748b; display: inline-flex; align-items: center; justify-content: center; transition: all 0.2s; }
.cart-close:hover { background: #fee2e2; border-color: #fca5a5; color: #dc2626; }
.cart-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; padding-right: 34px; }
.cart-modal-title { font-family: "MTSans", sans-serif; font-size: 21px; font-weight: 800; color: #0f172a; line-height: 25px; }
.cart-clear-action { background: none; border: none; color: #94a3b8; font-size: 13px; text-decoration: underline; cursor: pointer; font-family: "MTSans", sans-serif; }
.cart-clear-action:hover { color: #dc2626; text-decoration: none; }
.cart-items { margin-bottom: 10px; border-top: 1px solid #f1f5f9; border-bottom: 1px solid #f1f5f9; padding: 2px 0; }
.cart-item { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid #f8fafc; gap: 10px; }
.cart-item:last-child { border-bottom: none; }
.cart-item-info { flex: 1; }
.cart-item-name { font-family: "MTSans", sans-serif; font-weight: 700; font-size: 15px; line-height: 19px; color: #0f172a; }
.cart-item-price { font-family: "MTSans", sans-serif; font-size: 13px; font-weight: 700; color: #64748b; margin-top: 1px; }
.cart-controls { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.qty-btn { width: 26px; height: 26px; border-radius: 6px; border: 1px solid #cbd5e1; background: #f8fafc; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: bold; color: #1e293b; transition: all 0.15s; }
.qty-btn:hover { background: #e2e8f0; border-color: #94a3b8; }
.qty-num { font-family: "MTSans", sans-serif; font-size: 14px; font-weight: 800; width: 18px; text-align: center; color: #0f172a; }
.cart-total { text-align: right; font-family: "MTSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 19px; font-weight: 800; color: #2e7d32; margin-bottom: 12px; letter-spacing: 0; }
.cart-form { display: flex; flex-direction: column; gap: 8px; }
.cart-form input[type="text"], .cart-form input[type="tel"] { width: 100%; padding: 10px 12px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 15px; font-family: "MTSans", sans-serif; color: #0f172a; outline: none; transition: border-color 0.2s, box-shadow 0.2s; background: #ffffff; }
.cart-form input:focus { border-color: #2e7d32; box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.15); }
.cart-submit { width: 100%; padding: 12px; background: #2e7d32; color: #ffffff; border: none; border-radius: 8px; font-size: 16px; font-weight: 800; font-family: "MTSans", sans-serif; cursor: pointer; transition: background 0.2s; letter-spacing: 0.2px; }
.cart-submit:hover { background: #256628; }
.cart-submit:disabled { opacity: 0.7; cursor: not-allowed; }
.cart-success-msg { text-align: center; padding: 20px 10px; }
.cart-success-title { font-family: "MTSans", sans-serif; font-size: 22px; font-weight: 800; color: #2e7d32; margin-bottom: 8px; }
.cart-success-desc { font-size: 15px; color: #475569; line-height: 22px; margin: 0; }
.empty-msg { text-align: center; color: #94a3b8; padding: 24px 0; font-size: 15px; }

/* Каталог ЖБИ изделий */
.catalog-section { max-width: 1680px; width: 100%; margin: 0 auto; padding: 20px 16px 36px; }
.catalog-lead { font-size: 17px; color: #475569; line-height: 26px; margin-bottom: 22px; text-align: center; }
.catalog-grid { display: flex; flex-wrap: wrap; gap: 20px; }
.catalog-card { width: calc(33.333% - 14px); background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 18px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.03); transition: transform 0.2s, box-shadow 0.2s; }
.catalog-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.07); }
.catalog-card-img { width: 100%; height: 180px; display: flex; align-items: center; justify-content: center; background: #f8fafc; border-radius: 6px; overflow: hidden; padding: 10px; }
.catalog-card-img img { max-height: 160px; max-width: 100%; width: auto; object-fit: contain; }
.catalog-card-title { font-family: "MTSans", sans-serif; font-size: 20px; line-height: 25px; font-weight: 800; color: #0f172a; }
.catalog-card-desc { font-size: 14px; line-height: 21px; color: #64748b; flex: 1; }
.catalog-card-bottom { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #edf2f7; padding-top: 12px; margin-top: auto; gap: 10px; }
.catalog-card-price { font-family: "MTSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 22px; font-weight: 800; color: #2e7d32; letter-spacing: 0; }
.catalog-card-btn { padding: 9px 18px; background: #2e7d32; color: #ffffff; border-radius: 6px; font-family: "MTSans", sans-serif; font-size: 14px; font-weight: 700; border: none; cursor: pointer; transition: background 0.2s; text-align: center; }
.catalog-card-btn:hover { background: #256628; }
.catalog-card-link { font-size: 13px; color: #2b6cb0; text-decoration: underline; margin-top: 2px; }
.catalog-card-link:hover { text-decoration: none; }

.expert-tip-box { margin: 24px 0; padding: 22px 24px; background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); border: 1px solid #cbd5e1; border-left: 4px solid #2e7d32; border-radius: 12px; box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04); }
.expert-tip-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.expert-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: #2e7d32; background: #e8f5e9; padding: 4px 10px; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
.expert-title { font-size: 20px; line-height: 26px; font-weight: 800; color: #0f172a; margin: 0 0 8px; }
.expert-desc { font-size: 15px; line-height: 22px; color: #475569; margin-bottom: 14px; }
.expert-grid { display: flex; gap: 14px; margin-bottom: 14px; }
.expert-col { flex: 1; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.expert-col-title { font-size: 16px; font-weight: 800; color: #0f172a; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.expert-col-badge { font-size: 12px; padding: 2px 8px; border-radius: 4px; font-weight: 700; background: #f1f5f9; color: #475569; }
.expert-col-badge.active { background: #e2fbe8; color: #15803d; }
.expert-col-text { font-size: 14px; line-height: 20px; color: #64748b; margin: 0; }
.expert-note { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; background: #ffffff; border-radius: 8px; border: 1px solid #e2e8f0; font-size: 14px; line-height: 20px; color: #334155; }
.expert-note-icon { flex-shrink: 0; width: 18px; height: 18px; color: #2e7d32; margin-top: 1px; }

.turnkey-factors-box { margin: 28px 0; padding: 24px 26px; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 14px; box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05); }
.factors-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: #1e40af; background: #eff6ff; padding: 4px 12px; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.factors-title { font-size: 21px; line-height: 27px; font-weight: 800; color: #0f172a; margin: 0 0 8px; }
.factors-subtitle { font-size: 15px; line-height: 22px; color: #475569; margin-bottom: 18px; }
.factors-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 18px; padding: 0; list-style: none; }
.factor-card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; transition: border-color 0.2s, box-shadow 0.2s; }
.factor-card:hover { border-color: #cbd5e1; box-shadow: 0 3px 10px rgba(15, 23, 42, 0.04); }
.factor-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 2px; }
.factor-num { width: 28px; height: 28px; border-radius: 8px; background: #e2fbe8; color: #15803d; font-size: 14px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 1; }
.factor-icon-wrap { width: 30px; height: 30px; border-radius: 8px; background: #e2fbe8; color: #15803d; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.factor-card-title { font-size: 16px; font-weight: 800; color: #0f172a; line-height: 20px; }
.factor-card-desc { font-size: 14px; line-height: 20px; color: #64748b; margin: 0; }
.factors-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; padding: 14px 18px; background: #f1f5f9; border-radius: 10px; border: 1px solid #e2e8f0; }
.factors-footer-text { font-size: 15px; line-height: 21px; color: #334155; flex: 1 1 260px; }
.factors-footer-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; background: #2e7d32; color: #ffffff; border-radius: 8px; font-size: 14px; font-weight: 700; text-decoration: none; transition: background 0.2s; white-space: nowrap; }
.factors-footer-btn:hover { background: #256628; text-decoration: none; color: #ffffff; }

/* Хаб-страница Услуги (6 услуг в виде новостных превьюшек) */
.services-hub-section { max-width: 1400px; width: 100%; margin: 0 auto; padding: 24px 16px 40px; box-sizing: border-box; }
.services-hub-container { display: flex; flex-direction: column; gap: 24px; }
.hub-intro-box { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 24px 28px; box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05); }
.hub-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: #1e40af; background: #eff6ff; padding: 4px 12px; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.hub-intro-title { font-size: 24px; line-height: 30px; font-weight: 900; color: #0f172a; margin: 0 0 8px; }
.hub-intro-desc { font-size: 15px; line-height: 22px; color: #475569; margin: 0; max-width: 880px; }
.services-hub-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; width: 100%; box-sizing: border-box; }
.service-news-card { display: flex; flex-direction: column; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04); transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; }
.service-news-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08); border-color: #cbd5e1; }
.service-card-media-link { position: relative; display: block; width: 100%; height: 210px; background: #f1f5f9; overflow: hidden; text-decoration: none; }
.service-card-media-link img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; }
.service-news-card:hover .service-card-media-link img { transform: scale(1.03); }
.service-card-badge { position: absolute; bottom: 12px; left: 12px; background: rgba(15, 23, 42, 0.82); color: #ffffff; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 6px; backdrop-filter: blur(4px); }
.service-card-body { display: flex; flex-direction: column; flex: 1; padding: 18px 20px; gap: 10px; }
.service-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.service-card-tag { font-size: 12px; font-weight: 800; color: #15803d; text-transform: uppercase; letter-spacing: 0.5px; }
.service-card-duration { font-size: 12px; color: #64748b; font-weight: 700; }
.service-card-title { font-size: 19px; line-height: 25px; font-weight: 800; color: #0f172a; margin: 0; }
.service-card-title a { color: #0f172a; text-decoration: none; transition: color 0.15s; }
.service-card-title a:hover { color: #2e7d32; }
.service-card-text { font-size: 14px; line-height: 21px; color: #64748b; margin: 0; flex: 1; }
.service-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid #f1f5f9; margin-top: auto; flex-wrap: wrap; }
.service-card-price { font-size: 14px; color: #475569; }
.service-card-price strong { font-size: 18px; font-weight: 800; color: #2e7d32; }
.service-card-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; background: #2e7d32; color: #ffffff; font-size: 14px; font-weight: 700; border-radius: 8px; text-decoration: none; transition: background 0.15s; white-space: nowrap; }
.service-card-btn:hover { background: #256628; color: #ffffff; text-decoration: none; }
.hub-help-banner { display: flex; align-items: center; justify-content: space-between; gap: 20px; background: #0f172a; color: #ffffff; padding: 24px 28px; border-radius: 14px; flex-wrap: wrap; }
.hub-help-content { flex: 1 1 280px; }
.hub-help-title { font-size: 18px; line-height: 24px; font-weight: 800; margin: 0 0 6px; color: #ffffff; }
.hub-help-desc { font-size: 14px; line-height: 20px; color: #cbd5e1; margin: 0; }
.hub-help-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; background: #22c55e; color: #0f172a; font-size: 15px; font-weight: 800; border-radius: 8px; text-decoration: none; transition: background 0.15s; white-space: nowrap; }
.hub-help-btn:hover { background: #16a34a; color: #ffffff; text-decoration: none; }

/* Страница услуги (Доставка и др.) */
.service-page-section { max-width: 1200px; width: 100%; margin: 0 auto; padding: 24px 16px 40px; box-sizing: border-box; }
.service-page-container { display: flex; flex-direction: column; gap: 24px; }
.service-hero-card { display: flex; gap: 24px; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 24px; box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05); }
.service-hero-media { position: relative; width: 340px; flex-shrink: 0; border-radius: 10px; overflow: hidden; background: #f1f5f9; }
.service-hero-media img { width: 100%; height: auto; display: block; border-radius: 10px; }
.service-hero-badge { position: absolute; bottom: 10px; left: 10px; background: rgba(15, 23, 42, 0.82); color: #ffffff; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 6px; }
.service-hero-content { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.service-category-tag { font-size: 12px; font-weight: 800; color: #1e40af; background: #eff6ff; padding: 4px 10px; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.5px; align-self: flex-start; }
.service-hero-title { font-size: 24px; line-height: 30px; font-weight: 900; color: #0f172a; margin: 0; }
.service-hero-desc { font-size: 15px; line-height: 22px; color: #475569; margin: 0; }
.service-quick-features { display: flex; flex-direction: column; gap: 8px; margin: 6px 0; }
.service-quick-item { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 20px; color: #334155; }
.quick-item-num { font-size: 12px; font-weight: 800; color: #2e7d32; background: #e2fbe8; padding: 2px 7px; border-radius: 4px; flex-shrink: 0; }
.service-primary-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; background: #2e7d32; color: #ffffff; font-size: 15px; font-weight: 800; border-radius: 8px; text-decoration: none; align-self: flex-start; transition: background 0.15s; }
.service-primary-btn:hover { background: #256628; color: #ffffff; text-decoration: none; }
.service-details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.service-info-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 18px 20px; box-shadow: 0 3px 12px rgba(15, 23, 42, 0.03); }
.service-card-h3 { font-size: 17px; line-height: 22px; font-weight: 800; color: #0f172a; margin: 0 0 8px; }
.service-card-p { font-size: 14px; line-height: 21px; color: #64748b; margin: 0; }

/* Страница контактов */
.contacts-section { max-width: 1200px; width: 100%; margin: 0 auto; padding: 24px 16px 12px; }
.contacts-grid { display: flex; flex-wrap: wrap; gap: 16px; }
.contact-card { flex: 1 1 240px; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.03); }
.contact-card-label { font-size: 13px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; }
.contact-card-val { font-family: "MTSans", sans-serif; font-size: 20px; line-height: 26px; font-weight: 800; color: #0f172a; }
.contact-card-val.phone-link { color: #2e7d32; text-decoration: none; }
.contact-card-val.phone-link:hover { text-decoration: underline; }
.contact-card-sub { font-size: 13px; color: #718096; line-height: 18px; }

/* Интерактивная SVG карта субъектов РФ */
.rf-map-section { max-width: 1200px; width: 100%; margin: 0 auto; padding: 12px 16px 40px; }
.rf-map-wrap { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 24px; box-shadow: 0 4px 16px rgba(0,0,0,0.04); }
.rf-map-title { font-family: "MTSans", sans-serif; font-size: 26px; line-height: 32px; font-weight: 900; color: #0f172a; margin-bottom: 8px; text-align: center; }
.rf-map-subtitle { font-size: 15px; line-height: 22px; color: #64748b; text-align: center; margin-bottom: 20px; }
.rf-map { position: relative; max-width: 980px; margin: 0 auto; padding: 10px; }
.rf-map * { box-sizing: border-box; }
.rf-map svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.12)); }
.rf-map path { stroke: #ffffff; stroke-width: 1.2; stroke-linejoin: round; transition: fill 0.2s ease; cursor: pointer; }
.rf-map [data-code] { fill: #337ab7; }
.rf-map [data-code]:hover { fill: #0180ef; }
.rf-map [data-code="RU-NVS-CITY"] { fill: #16a34a; }
.rf-map [data-code="RU-NVS-CITY"]:hover { fill: #22c55e; }
.rf-map [data-code="RU-NVS-RAION"] { fill: #2563eb; }
.rf-map [data-code="RU-NVS-RAION"]:hover { fill: #3b82f6; }
.rf-map [data-code="RU-NVS-BERDSK"] { fill: #0284c7; }
.rf-map [data-code="RU-NVS-BERDSK"]:hover { fill: #38bdf8; }
.rf-map [data-code="RU-NVS-KOLYVAN"] { fill: #0d9488; }
.rf-map [data-code="RU-NVS-KOLYVAN"]:hover { fill: #14b8a6; }
.rf-map [data-code="RU-NVS-KOCHENEVO"] { fill: #4f46e5; }
.rf-map [data-code="RU-NVS-KOCHENEVO"]:hover { fill: #6366f1; }
.rf-map [data-code="RU-NVS-MOSHKOVO"] { fill: #7c3aed; }
.rf-map [data-code="RU-NVS-MOSHKOVO"]:hover { fill: #8b5cf6; }
.rf-map [data-code="RU-NVS-ORDYNSK"] { fill: #059669; }
.rf-map [data-code="RU-NVS-ORDYNSK"]:hover { fill: #10b981; }
.rf-map [data-code="RU-NVS-ISKITIM"] { fill: #ea580c; }
.rf-map [data-code="RU-NVS-ISKITIM"]:hover { fill: #f97316; }
.rf-map [data-code="RU-NVS-TOGUCHIN"] { fill: #c026d3; }
.rf-map [data-code="RU-NVS-TOGUCHIN"]:hover { fill: #d946ef; }
.rf-map .dropfill { fill: #cbd5e1 !important; }
.rf-map .mainfill { fill: #0f172a !important; stroke: #4ade80 !important; stroke-width: 2.5 !important; }

.rf-map .district { display: none; position: absolute; top: 16px; left: 16px; z-index: 5; pointer-events: none; }
.rf-map .district b { display: inline-block; width: 10px; height: 10px; background: #22c55e; border-radius: 50%; vertical-align: middle; margin-right: 8px; }
.rf-map .district span { font-size: 14px; font-weight: 700; color: #0f172a; background: #ffffff; padding: 6px 14px; border-radius: 20px; box-shadow: 0 4px 14px rgba(0,0,0,0.12); border: 1px solid #cbd5e1; font-family: "MTSans", sans-serif; display: inline-block; }
.rf-map.open .district { display: none !important; }

.rf-district-backdrop { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 23, 42, 0.65); z-index: 998; backdrop-filter: blur(2px); }
.rf-map.open .rf-district-backdrop { display: block; }

.rf-district-popup { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% - 32px); max-width: 540px; height: auto; max-height: 85vh; background: #0f172a; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 14px; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5); z-index: 999; padding: 24px 26px 22px; box-sizing: border-box; overflow-y: auto; }
.rf-map.open .rf-district-popup { display: block; }

.rf-district-popup-body { width: 100%; }

.rf-map .district-text { display: none; color: #cbd5e1; font-size: 15px; line-height: 22px; font-family: "MTSans", sans-serif; }
.rf-map .district-text h3 { font-size: 20px; font-weight: 800; line-height: 26px; margin: 0 0 12px; padding-right: 44px; color: #4ade80; font-family: "MTSans", sans-serif; }
.rf-map .district-text p { margin: 0 0 10px; color: #e2e8f0; font-size: 14px; line-height: 21px; }
.rf-map .district-text p:last-child { margin-bottom: 0; }
.rf-map .district-text p strong { color: #ffffff; font-weight: 700; }
.rf-map .district-text a.phone-link { color: #4ade80; font-weight: 700; text-decoration: none; }
.rf-map .district-text a.phone-link:hover { text-decoration: underline; color: #86efac; }

.rf-map .close-district { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 8px; color: #ffffff; font-size: 26px; line-height: 1; cursor: pointer; transition: all 0.15s; padding: 0; z-index: 10; }
.rf-map .close-district:hover { background: rgba(239, 68, 68, 0.25); border-color: #ef4444; color: #fca5a5; }

.rf-map .district-links { margin-top: 14px; display: none; flex-wrap: wrap; gap: 8px; }
.rf-map .district-links div { font-size: 13px; font-weight: 700; padding: 6px 12px; background: #f1f5f9; border: 1px solid #cbd5e1; border-radius: 6px; cursor: pointer; color: #1e293b; font-family: "MTSans", sans-serif; transition: all 0.15s; }
.rf-map .district-links div:hover { background: #2e7d32; color: #ffffff; border-color: #2e7d32; }

/* Подвал сайта (Footer) */
.site-footer { background: #070b12; color: #cbd5e1; width: 100%; border-top: 1px solid #1e293b; box-sizing: border-box; }
.site-footer * { box-sizing: border-box; }
.footer-container { max-width: 1240px; width: 100%; margin: 0 auto; padding: 0 16px; }
.footer-disclaimer { background: #06090f; border-bottom: 1px solid #1e293b; padding: 12px 0; }
.footer-disclaimer p { font-size: 14px; line-height: 20px; color: #ffffff; margin: 0; text-align: center; font-weight: 500; }
.footer-main { padding: 44px 0 36px; background: #0b1120; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 32px; }
.footer-col { display: flex; flex-direction: column; gap: 14px; }
.footer-brand { display: flex; flex-direction: column; gap: 6px; }
.footer-logo-text { font-size: 26px; line-height: 32px; font-weight: 900; color: #ffffff; letter-spacing: -0.5px; }
.footer-tagline { font-size: 15px; line-height: 22px; color: #94a3b8; }
.footer-geo { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.footer-geo-item { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 20px; color: #cbd5e1; }
.footer-note { font-size: 14px; line-height: 20px; color: #64748b; margin: 4px 0 0; }
.footer-col-title { font-size: 17px; line-height: 23px; font-weight: 800; color: #ffffff; margin: 0 0 4px; letter-spacing: 0.3px; }
.footer-nav-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-nav-list li { margin: 0; }
.footer-nav-list a { font-size: 15px; line-height: 21px; color: #94a3b8; text-decoration: none; transition: color 0.15s, padding-left 0.15s; display: inline-block; }
.footer-nav-list a:hover { color: #4ade80; padding-left: 4px; }
.footer-contact-box { display: flex; flex-direction: column; gap: 3px; }
.footer-phone-val { font-size: 23px; line-height: 29px; font-weight: 900; color: #4ade80; text-decoration: none; transition: color 0.15s; }
.footer-phone-val:hover { color: #86efac; text-decoration: underline; }
.footer-phone-sub { font-size: 13px; line-height: 17px; color: #64748b; }
.footer-email-val { font-size: 16px; font-weight: 700; color: #e2e8f0; text-decoration: none; }
.footer-email-val:hover { color: #4ade80; text-decoration: underline; }
.footer-call-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px; background: #16a34a; color: #ffffff; font-size: 15px; font-weight: 800; border-radius: 8px; text-decoration: none; box-shadow: 0 4px 14px rgba(22, 163, 74, 0.3); transition: background 0.15s, transform 0.15s; white-space: nowrap; margin-top: 6px; align-self: flex-start; }
.footer-call-btn:hover { background: #15803d; color: #ffffff; text-decoration: none; transform: translateY(-1px); }
.footer-bottom { background: #06090f; border-top: 1px solid #1e293b; padding: 18px 0; }
.footer-bottom-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer-copy { font-size: 14px; line-height: 20px; color: #64748b; margin: 0; }
.footer-policy-link { font-size: 14px; color: #94a3b8; text-decoration: none; transition: color 0.15s; }
.footer-policy-link:hover { color: #4ade80; text-decoration: underline; }

@media (max-width: 1080px) {
    .services-hub-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 960px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
    .product-card { padding: 20px 16px; gap: 16px; }
    .product-card-body { flex-direction: column; gap: 20px; align-items: stretch; }
    .product-media { width: 100%; max-width: 100%; margin: 0; }
    .product-media-img { width: 100%; max-width: 340px; margin: 0 auto; }
    .product-media--wide .product-media-img { width: 100%; max-width: 100%; }
    .product-media--wide .product-media-img img { max-width: 100%; }
    .product-info { width: 100%; margin: 0; }
    .product-title { font-size: 24px; line-height: 30px; }
    .product-action { width: 100%; }
    .btn-order { width: 100%; }
    .kit-row { flex-wrap: wrap; gap: 8px; }
    .catalog-card { width: calc(50% - 10px); }
    .expert-grid { flex-direction: column; }
    .factors-grid { grid-template-columns: 1fr; }
    .factors-footer { flex-direction: column; align-items: stretch; gap: 12px; }
    .factors-footer-text { flex: none; width: 100%; font-size: 14px; line-height: 20px; }
    .factors-footer-btn { justify-content: center; width: 100%; }
    .service-hero-card { flex-direction: column; }
    .service-hero-media { width: 100%; max-width: 340px; margin: 0 auto; }
    .service-details-grid { grid-template-columns: 1fr; }
    .header-h1-wrap { width: 100%; flex: 0 0 100%; justify-content: center; margin-top: 4px; }
    .header-h1 { font-size: 17px; line-height: 22px; padding: 5px 14px; }
}
@media (max-width: 768px) {
    .product-desc--desktop { display: none; }
    .product-desc--mobile { display: block; width: 100%; margin: 0; font-family: "MTSans", sans-serif; font-size: 15px; line-height: 22px; color: #475569; text-align: left; }
    .services-hub-section { padding: 16px 12px 30px; }
    .hub-intro-box { padding: 18px 16px; }
    .service-card-media-link { height: 200px; }
    .service-card-body { padding: 16px; }
    .hub-help-banner { padding: 18px 16px; flex-direction: column; align-items: stretch; }
    .hub-help-btn { justify-content: center; width: 100%; }
    .rf-map-wrap { padding: 16px 12px; }
    .rf-map-title { font-size: 22px; line-height: 28px; }
    .rf-map { padding: 4px; }
    .rf-map .district { display: none; }
    .rf-district-popup { width: calc(100% - 20px); max-width: 440px; padding: 18px 16px 16px; border-radius: 12px; }
    .rf-map .district-text h3 { font-size: 17px; line-height: 23px; padding-right: 40px; margin-bottom: 10px; }
    .rf-map .district-text p { font-size: 13px; line-height: 19px; margin-bottom: 8px; }
    .rf-map .close-district { width: 34px; height: 34px; font-size: 24px; top: 12px; right: 12px; }
    .rf-map .district-links { display: flex; }
}
@media (max-width: 720px) {
    .site-footer { padding-bottom: 74px; }
    .footer-grid { grid-template-columns: 1fr; gap: 24px; }
    .footer-call-btn { width: 100%; }
    .footer-bottom-inner { flex-direction: column; align-items: flex-start; gap: 8px; }
    .services-hub-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
}
@media (max-width: 620px) {
    .header-container { justify-content: center; gap: 10px 14px; }
    .logo-wrapper { width: 100%; flex: 0 0 100%; justify-content: center; }
    .main-nav { width: 100%; flex: 0 0 100%; justify-content: center; }
    .nav-list { justify-content: center; gap: 14px; }
}
@media (max-width: 600px) {
    .kit-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 10px 12px; gap: 8px 10px; }
    .kit-col-main { width: 100%; flex: 0 0 100%; }
    .kit-col-price { font-size: 13px; color: #64748b; font-weight: 700; white-space: nowrap; }
    .kit-col-qty { display: flex; align-items: center; gap: 6px; }
    .kit-col-sum { font-size: 15px; font-weight: 800; color: #2e7d32; text-align: right; margin-left: auto; width: auto; }
}
@media (max-width: 520px) {
    .diameter-switch { gap: 6px; padding: 7px 8px; }
    .diameter-switch-label { width: 100%; flex: 0 0 100%; margin: 0 0 2px; }
    .diameter-btn { flex: 1; width: calc((100% - 12px) / 3); justify-content: center; text-align: center; padding: 5px 2px; font-size: 12px; white-space: nowrap; box-sizing: border-box; }
}
@media (max-width: 490px) {
    .product-title { font-size: 18px; line-height: 24px; }
}
@media (max-width: 480px) {
    .footer-main { padding: 32px 0 28px; }
    .footer-logo-text { font-size: 21px; }
    .footer-phone-val { font-size: 20px; }
    .header-h1 { font-size: 15px; line-height: 20px; padding: 5px 12px; }
    .turnkey-factors-box { padding: 14px 12px; }
    .factors-title { font-size: 17px; line-height: 23px; }
    .factors-footer { padding: 12px 12px; gap: 10px; }
    .factors-footer-text { font-size: 13px; line-height: 19px; }
    .specs-block-title { font-size: 15px; line-height: 21px; }
    .kit-header-title { font-size: 14px; line-height: 20px; }
    .expert-tip-box { padding: 14px 12px; }
    .expert-title { font-size: 17px; line-height: 23px; }
    .hub-intro-title { font-size: 20px; line-height: 26px; }
    .service-card-title { font-size: 18px; line-height: 24px; }
    .service-card-media-link { height: 180px; }
    .service-hero-title { font-size: 20px; line-height: 26px; }
    .site-header { padding: 10px 8px; }
    .breadcrumbs { padding: 2px 6px; }
    .breadcrumbs li { line-height: 18px; }
    .breadcrumbs a, .breadcrumbs .current span[aria-current="page"] { padding: 3px 6px; }
    .breadcrumbs .separator { margin: 0 2px; }
    .product-section { padding: 14px 12px 24px; }
    .product-media-img { max-width: 320px; }
    .product-media--wide .product-media-img { max-width: 100%; }
    .media-badge-wrap { gap: 4px; }
    .media-badge { font-size: 12px; padding: 3px 6px; letter-spacing: 0.2px; }
    .spec-dots { display: none; }
    .price-value { font-size: 26px; }
    .header-container { gap: 6px 12px; }
    .tab-bar { padding: 0 10px; }
    .fab-child { width: 48px; height: 48px; }
    .fab-child::before { font-size: 12px; padding: 5px 10px; right: 58px; }
    .fab-child::after { right: 52px; }
    .kit-header-row { flex-direction: column; align-items: flex-start; gap: 4px; }
    .kit-row { padding: 8px 10px; }
    .kit-col-main { width: 100%; }
    .kit-col-sum { width: auto; margin-left: auto; }
    .cart-modal { padding: 14px 12px; border-radius: 10px; }
    .cart-modal-title { font-size: 18px; line-height: 22px; }
    .cart-item { padding: 5px 0; }
    .cart-item-name { font-size: 14px; line-height: 18px; }
    .cart-item-price { font-size: 12px; }
    .cart-total { font-size: 17px; margin-bottom: 10px; }
    .cart-submit { font-size: 15px; padding: 11px; }
    .catalog-card { width: 100%; }
}
@media (max-width: 420px) {
    .product-badge { font-size: 12px; align-self: center; text-align: center; }
    .product-title { font-size: 15px; line-height: 20px; text-align: center; }
}
@media (max-width: 370px) {
    .product-badge { font-size: 12px; }
}
@media (max-width: 360px) {
    .site-header { padding: 8px 4px; }
    .breadcrumbs { padding: 2px 4px; }
    .breadcrumbs li { line-height: 16px; }
    .breadcrumbs a, .breadcrumbs .current span[aria-current="page"] { padding: 2px 4px; }
    .header-h1 { font-size: 14px; line-height: 18px; padding: 4px 8px; }
    .h1a { font-size: 20px; }
}
@media (max-width: 330px) {
    .header-h1 { font-size: 13px; line-height: 17px; padding: 3px 6px; }
    .breadcrumbs a, .breadcrumbs .current span[aria-current="page"] { padding: 1px 3px; }
    .menu-link { font-size: 15px; }
}