/* 1. ЗМІННІ ТА ОБНУЛЕННЯ */
:root {
    --brand-blue: #1A3A5A;
    --brand-cyan: #00A3E0;
    --brand-yellow: #FFD700;
    --bg-light: #F4F7F9;
    --text-main: #2C3E50;
    --white: #FFFFFF;
    --transition: 0.3s ease;
    --btn-color: #0056b3;       /*Цвет кнопки (background)*/
    --btn-color-hover: #004494;
    --btn-text: #FFFFFF;        /*Цвет текста кнопки (color)*/
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    color: var(--text-main);
    background-color: var(--bg-light);
}

.container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 2. ШАПКА ТА НАВІГАЦІЯ */
header {
    background-color: var(--brand-blue);
    padding: 1rem 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-area {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--white);
}

.logo-img {
    height: 50px;
    margin-right: 15px;
}

.brand-name {
    font-size: 1.5rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

nav ul {
    display: flex;
    list-style: none;
}

nav ul li { margin-left: 20px; }

nav ul li a {
    color: var(--white);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
}

nav ul li a:hover { color: var(--brand-yellow); }

/* 3. ГОЛОВНА СТОРІНКА (HERO & GRID) */
.hero {
    background: linear-gradient(135deg, var(--brand-blue) 0%, #2c537a 100%);
    color: var(--white);
    padding: 80px 0;
    text-align: center;
}

.hero h1 { font-size: 3.5rem; margin-bottom: 1rem; letter-spacing: 2px; }
.slogan-line-1 { font-size: 2rem; font-weight: 600; color: var(--brand-cyan); }
.slogan-line-2 { font-size: 2rem; font-weight: 600; color: var(--brand-yellow); margin-top: 5px; }

.products-section { padding: 60px 0; }
.section-title { text-align: center; margin-bottom: 40px; font-size: 2rem; color: var(--brand-blue); }

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.product-card {
    background: var(--white);
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: var(--transition);
}

.product-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.1); }

.product-image img {
    max-width: 100%;
    height: 200px;
    object-fit: contain;
    margin-bottom: 15px;
}

.btn-more {
    display: inline-block;
    padding: 10px 20px;
    background: var(--brand-cyan);
    color: var(--white);
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    transition: var(--transition);
}

.qr-info-box {
    background: var(--brand-yellow);
    color: var(--brand-blue);
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    margin-top: 40px;
}

/* 4. СТОРІНКА ТОВАРУ (PRODUCT PAGE) */
.product-page { padding: 40px 0; }

.breadcrumb { font-size: 0.9rem; margin-bottom: 20px; color: #7f8c8d; }
.breadcrumb a { color: var(--brand-cyan); text-decoration: none; }

.product-main-grid {
    display: grid;
  /*  display: flex;*/
    align-items: flex-start;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
}

.image-wrapper {
    background: #fff;
    border-radius: 20px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-wrapper img { max-width: 100%; height: auto; max-height: 400px; }

.category-tag { color: var(--brand-cyan); font-weight: bold; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 1px; }
.product-intro h1 { font-size: 2.5rem; color: var(--brand-blue); margin: 10px 0; }
.short-desc { font-size: 1.2rem; color: #555; margin-bottom: 30px; }

.action-panel { display: flex; gap: 15px; flex-wrap: wrap; }

.btn-download {
    text-decoration: none;
    padding: 12px 25px;
    border-radius: 8px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    transition: var(--transition);
}
.btn-download.sds { background: #e74c3c; }
.btn-download.video-link { background: var(--brand-blue); }

.details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 30px;
}

.details-card { background: #fff; padding: 30px; border-radius: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.03); }
.details-card h3 { margin-bottom: 20px; color: var(--brand-blue); display: flex; align-items: center; gap: 10px; }

.specs table { width: 100%; border-collapse: collapse; }
.specs td { padding: 12px 5px; border-bottom: 1px solid #f0f0f0; }

.video-responsive { position: relative; padding-bottom: 56.25%; height: 0; border-radius: 10px; overflow: hidden; background: #000; }
.video-responsive iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* 5. ПІДВАЛ (FOOTER) */
footer {
    background-color: var(--brand-blue);
    color: var(--white);
    padding: 3rem 0 1.5rem;
    margin-top: 3rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-bottom: 2rem;
}

.footer-bottom {
    text-align: center;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 0.9rem;
}

/* 6. ІНФОРМАЦІЙНІ БЛОКИ ТА ТАБЛИЦІ (УПОРЯДКОВАНО) */
.info-card, .description-section, .packaging-section {
    background: #fff;
    padding: 30px;
    border-radius: 15px;
    margin-bottom: 30px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.info-card h3, .packaging-section h3 {
    border-bottom: 1px solid #f1f5f9;
    /*padding-bottom: 15px;*/
    margin-bottom: 20px;
    color: var(--brand-blue);
}

.info-card h3 span.icon, .packaging-section h3 span.icon{ font-size: 150%; }


.packaging-table { width: 100%; border-collapse: collapse; text-align: left; }
.packaging-table th { background: var(--bg-light); padding: 15px; color: var(--brand-blue); font-weight: 700; }
.packaging-table td { padding: 15px; border-bottom: 1px solid #f0f0f0; }
.packaging-table code { background: #eee; padding: 2px 6px; border-radius: 4px; font-weight: bold; color: #c0392b; }

.safety-icons { display: flex; gap: 15px; margin-top: 10px; }
/*.safety-icons img { width: 45px; height: 45px; background: #fff; padding: 5px; border: 1px solid #ddd; border-radius: 4px; }
*/
/* Виправлення прев'ю іконок безпеки/параметрів у товарі */
.safety-icons img,
.safety-icon-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain !important; /* Гарантує, що іконка впишеться повністю */
    object-position: center;       /* Центрує іконку */
    background: transparent;
}

.description-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; }
.label-img { width: 100%; max-width: 300px; border-radius: 10px; border: 1px solid #eee; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }

/* 7. СТОРІНКА ДЕ КУПИТИ */
.buy-page { padding: 50px 0; }
.buy-header { margin-bottom: 40px; border-left: 5px solid var(--brand-yellow); padding-left: 20px; }
.buy-header h1 { color: var(--brand-blue); font-size: 2.2rem; }

.table-container { background: var(--white); border-radius: 12px; box-shadow: 0 5px 20px rgba(0,0,0,0.05); overflow: hidden; }
.buy-table { width: 100%; border-collapse: collapse; }
.buy-table thead { background-color: var(--brand-blue); color: var(--white); text-align: left; }
.buy-table th { padding: 15px 25px; font-weight: 600; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 1px; }
.buy-table tr { border-bottom: 1px solid #edf2f7; transition: var(--transition); }
/*.buy-table tr:hover { background-color: #f9fbff; }*/
    .buy-table tbody tr:hover {background-color: aliceblue;}
.buy-table td { padding: 25px; vertical-align: middle; }

/* 8. МЕДІА-ЗАПИТИ (ЗГРУПОВАНО) */
@media (max-width: 992px) {
    .product-main-grid, .description-grid { grid-template-columns: 1fr; }
/*    .product-visual { max-width: 500px; margin: 0 auto; }*/
    .hero h1 { font-size: 2.5rem; }
}

@media (max-width: 768px) {
    header .container { flex-direction: column; text-align: center; }
    nav ul { margin-top: 1rem; flex-wrap: wrap; justify-content: center; }
    nav ul li { margin: 5px 10px; }
    .details-grid { grid-template-columns: 1fr; }
    .product-intro h1 { font-size: 1.8rem; }
    .slogan-line-1 { font-size: 1.4rem; }
    .slogan-line-2 { font-size: 1.5rem; }
 /*   .product-visual { max-width: 100%; }*/
 /*   .main-slider { height: 350px; }*/
    .packaging-table th, .packaging-table td { font-size: 0.8rem; padding: 8px; }
}

/*Блок 2*/
/* 7. ПАРТНЕРИ ТА ДЕ КУПИТИ (ПРОДОВЖЕННЯ) */
.col-logo { width: 180px; text-align: center; }
.partner-logo {
    max-width: 120px;
    max-height: 60px;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: var(--transition);
}

.buy-table tr:hover .partner-logo {
    filter: grayscale(0%);
    opacity: 1;
}

.col-info { min-width: 300px; }
.partner-name {
    display: inline-block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--brand-blue);
    text-decoration: none;
    margin-bottom: 8px;
}
.partner-name:hover { color: var(--brand-cyan); }
.partner-desc { color: #666; font-size: 0.95rem; line-height: 1.4; }

.col-action { text-align: right; width: 200px; }

.b2b-cta {
    margin-top: 40px;
    text-align: center;
    padding: 30px;
    background: #eef2f7;
    border-radius: 12px;
}
.b2b-cta h3 { color: var(--brand-blue); margin-bottom: 10px; }
.b2b-cta a { color: var(--brand-cyan); font-weight: bold; text-decoration: none; }

/* 8. СТОРІНКА 404 */
.page-404 {
    padding: 100px 0;
    text-align: center;
    background-color: var(--bg-light);
}

.content-404 {
    max-width: 600px;
    margin: 0 auto;
}

.error-visual { position: relative; margin-bottom: 30px; }
.error-code {
    font-size: 8rem;
    font-weight: 900;
    color: var(--brand-blue);
    line-height: 1;
    display: block;
    opacity: 0.1;
}

.broken-wire {
    font-size: 3rem;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    animation: spark 1.5s infinite;
}

@keyframes spark {
    0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.5; transform: translate(-50%, -50%) scale(1.1); }
}

.joke-box {
    background: var(--white);
    padding: 25px;
    border-radius: 15px;
    border-left: 5px solid var(--brand-yellow);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    margin: 30px 0;
}

.slogan-joke { font-style: italic; color: var(--brand-blue); font-size: 1.1rem; line-height: 1.5; }
.error-text { margin-bottom: 40px; color: #666; }
.actions-404 { display: flex; gap: 15px; justify-content: center; }

.btn-secondary {
    padding: 15px 30px;
    background: #e2e8f0;
    color: var(--brand-blue);
    text-decoration: none;
    border-radius: 8px;
    font-weight: bold;
}

/* 9. КАТАЛОГ (ДЕРЕВО) ТА ПРИВАТНІСТЬ */
.catalog-page { padding: 40px 0; }
.catalog-header { margin-bottom: 50px; text-align: center; }
.category-group { margin-bottom: 60px; }
.category-info { border-bottom: 2px solid var(--brand-yellow); padding-bottom: 10px; margin-bottom: 25px; }
.category-info h2 { color: var(--brand-blue); font-size: 1.8rem; }
.category-info p { color: #888; font-size: 1rem; }
.category-products-list { display: flex; flex-direction: column; gap: 15px; }

.product-mini-card {
    display: flex; align-items: center; background: #fff; text-decoration: none;
    padding: 15px 25px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    transition: var(--transition); border: 1px solid transparent;
}
.product-mini-card:hover { transform: translateX(3px); border-color: var(--brand-cyan); box-shadow: 0 5px 15px rgba(0,0,0,0.08); }
.mini-img { width: 60px; height: 60px; margin-right: 20px; display: flex; align-items: center; justify-content: center; }
.mini-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.mini-details { flex-grow: 1; }
.mini-details h4 { color: var(--brand-blue); margin-bottom: 2px; }
.mini-arrow { color: var(--brand-cyan); font-size: 1.5rem; font-weight: bold; opacity: 0.5; }

.privacy-page { padding: 60px 0; background: #fff; }
.privacy-content { max-width: 800px; margin: 0 auto; line-height: 1.8; }
.privacy-content h1, .privacy-content h2 { color: var(--brand-blue); }
.privacy-note { margin-top: 50px; padding: 20px; background: var(--bg-light); border-radius: 10px; font-style: italic; }

/* 10. КОНТАКТИ ТА РОУТИНГ */
.contacts-page { padding: 60px 0; }
.contacts-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 50px; align-items: start; }
.b2b-notice {
    background: #fff; padding: 20px; border-left: 5px solid var(--brand-yellow);
    color: var(--brand-blue); font-size: 1.1rem; margin-bottom: 40px; box-shadow: 0 4px 10px rgba(0,0,0,0.03);
}
.method-item { display: flex; gap: 20px; margin-bottom: 30px; }
.method-item .icon { font-size: 1.8rem; background: var(--white); width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 50%; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }

.routing-card { padding: 35px; border-radius: 15px; margin-bottom: 20px; text-align: center; }
.routing-card.retail { background: #fff; border: 1px solid #edf2f7; }
.routing-card.wholesale { background: var(--brand-blue); color: #fff; }
.btn-routing {
    display: block; padding: 12px; text-decoration: none; border-radius: 8px;
    font-weight: bold; border: 2px solid var(--brand-cyan); color: var(--brand-cyan); transition: var(--transition);
}
.btn-routing:hover { background: var(--brand-cyan); color: #fff; }
.btn-routing.gold { background: var(--brand-yellow); border-color: var(--brand-yellow); color: var(--brand-blue); }

/* 11. ФУТЕР (ПОВНИЙ БЛОК) */
.footer-bottom {
    display: flex; flex-direction: column; align-items: center; gap: 15px;
    text-align: center; padding-top: 2rem; margin-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-legal { display: flex; justify-content: center; gap: 15px; align-items: center; margin-top: 10px; }
.footer-legal a { color: rgba(255, 255, 255, 0.5); text-decoration: none; font-size: 0.85rem; transition: var(--transition); }
.footer-legal a:hover { color: var(--brand-yellow); }
.footer-links {padding-left: 20px;}
.footer-links a { color: var(--white); text-decoration: none; opacity: 0.8; }
.footer-links a:hover { opacity: 1; color: var(--brand-yellow); }

.social-icons { display: flex; gap: 15px; margin-top: 10px}
.social-icons a {
    display: inline-flex; align-items: center; gap: 1px; color: var(--white);
    text-decoration: none; background: rgba(255, 255, 255, 0.1); padding: 8px 15px;
    border-radius: 6px; font-size: 0.9rem; transition: var(--transition);
}
.social-icons a:hover { background: var(--brand-cyan); transform: translateY(-3px); }
.social-icons a[href*="youtube"]:hover { background: #FF0000; }
.social-icons a[href*="t.me"]:hover { background: #0088cc; }

.copyright { font-size: 0.8rem; opacity: 0.5; margin-top: 5px; }

/* 12. МЕДІА-ЗАПИТИ (ПРОДОВЖЕННЯ) */
@media (max-width: 992px) {
    .contacts-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .buy-table thead { display: none; }
    .buy-table tr { display: flex; flex-direction: column; text-align: center; padding: 20px 0; }
    .col-logo, .col-info, .col-action { width: 100%; padding: 10px 20px; }
    .partner-logo { filter: grayscale(0%); opacity: 1; }
}

@media (max-width: 600px) {
    .product-mini-card { padding: 15px; }
    .mini-img { width: 50px; margin-right: 10px; }
    .mini-arrow { display: none; }
}

@media (max-width: 480px) {
    .error-code { font-size: 5rem; }
    .actions-404 { flex-direction: column; }
}
/*Блок 3*/
/* 13. КАРТА САЙТУ (SITEMAP) */
.sitemap-page { padding: 50px 0; }
.sitemap-header { margin-bottom: 40px; }
.sitemap-header h1 { color: var(--brand-blue); }

.sitemap-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 40px;
    background: #fff;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

.sitemap-section h3 {
    color: var(--brand-blue);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.root-list, .tree-list, .tree-list ul { list-style: none; padding-left: 20px; }
.root-list li { margin-bottom: 12px; }
.root-list a, .tree-list a { text-decoration: none; color: var(--brand-cyan); font-weight: 500; }
.root-list a:hover, .tree-list a:hover { text-decoration: underline; }

.tree-category { margin-bottom: 25px; position: relative; }
.tree-category > strong { display: block; color: var(--brand-blue); font-size: 1.1rem; margin-bottom: 10px; }

.tree-list ul li {
    position: relative;
    padding: 8px 0 8px 20px;
    border-left: 1px solid #ddd;
}

.tree-list ul li::before {
    content: "";
    position: absolute;
    left: 0; top: 20px;
    width: 15px; height: 1px;
    background: #ddd;
}

.sku-label { font-size: 0.75rem; color: #999; text-transform: uppercase; margin-left: 10px; }

/* 14. ТЕХПІДТРИМКА ТА FAQ */
.support-page { padding: 40px 0; }
.support-header { margin-bottom: 50px; text-align: center; }
.support-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }

.support-section {
    background: #fff;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

.support-section h2 {
    color: var(--brand-blue);
    font-size: 1.5rem;
    margin-bottom: 25px;
    display: flex; align-items: center; gap: 10px;
}

.doc-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #eee; }
.doc-links { display: flex; gap: 10px; }
.pdf-link {
    font-size: 0.8rem; padding: 4px 8px; background: #f0f4f8;
    color: var(--brand-blue); text-decoration: none; border-radius: 4px; font-weight: bold;
}
.pdf-link:hover { background: var(--brand-cyan); color: #fff; }

.faq-list details { margin-bottom: 15px; padding: 15px; background: var(--bg-light); border-radius: 8px; cursor: pointer; }
.faq-list summary { font-weight: 600; color: var(--brand-blue); outline: none; }
.faq-list p { margin-top: 10px; font-size: 0.95rem; color: #555; line-height: 1.5; }

.consult-box {
    background: var(--brand-blue); color: #fff; padding: 40px;
    border-radius: 20px; display: flex; justify-content: space-between; align-items: center; margin-top: 50px;
}
.btn-support-tg {
    background: var(--brand-yellow); color: var(--brand-blue); padding: 15px 30px;
    border-radius: 8px; text-decoration: none; font-weight: bold; transition: 0.3s;
}
.btn-support-tg:hover { transform: scale(1.05); }

/* 15. OEM ТА ГІД ПО ІКОНКАХ (GUIDE) */
.oem-box { background: #f8fafc; border: 2px dashed var(--brand-cyan) !important; }
.oem-list { text-align: left; list-style: none; padding: 0; margin: 15px 0; font-size: 0.9rem; }

.icons-guide-page .page-header {
    margin: 40px 0 60px; text-align: center; padding: 40px 20px;
    background: var(--brand-blue); border-radius: 20px;
}
.icons-guide-page .page-header h1 { color: #FFFFFF !important; font-size: 2.5rem; margin-bottom: 15px; }
.icons-guide-page .page-header p { color: rgba(255, 255, 255, 0.8) !important; font-size: 1.1rem; max-width: 700px; margin: 0 auto; }

.icon-group-section { margin-bottom: 60px; }
.group-header { padding-left: 20px; border-left: 5px solid; margin-bottom: 30px; }
.icons-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }

.icon-card {
    display: flex; gap: 20px; background: #fff; padding: 20px;
    border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); align-items: flex-start;
}
.icon-visual { flex-shrink: 0; width: 50px; height: 50px; }
.icon-visual svg { width: 100%; height: 100%; }
.icon-info h4 { margin-bottom: 5px; color: var(--brand-blue); }
.icon-code { display: block; margin-top: 10px; font-size: 0.7rem; color: #ccc; text-transform: uppercase; }

/* 16. БЛОК БЕЗПЕКИ ТА МАРКУВАННЯ */
.product-safety-block { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 25px; margin-bottom: 30px; }
.safety-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.safety-item { display: flex; gap: 15px; align-items: flex-start; }
.safety-icon-wrapper { flex-shrink: 0; width: 50px; /*height: 32px;*/ color: var(--accent-color); }
.safety-icon-wrapper svg { width: 100%; height: 100%; }
.safety-label { display: block; font-weight: 700; font-size: 0.9rem; color: var(--accent-color); text-transform: uppercase; }

/* 17. ВІДЕО СЕКЦІЇ (ОПТИМІЗОВАНО) */
.product-info-section, .product-card-section {
    background: #ffffff; border-radius: 15px; padding: 30px;
    margin-bottom: 30px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); border: 1px solid #edf2f7;
}

.video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 25px; }
.video-card { border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; background: #f8fafc; }
.video-wrapper { position: relative; padding-bottom: 56.25%; height: 0; background: #000; }
.video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.video-footer, .video-info { padding: 12px 15px; background: #fff; border-top: 1px solid #e2e8f0; }

.video-placeholder, .video-empty-state {
    display: flex; align-items: center; gap: 20px; padding: 30px;
    background: #fdfdfd; border: 2px dashed #cbd5e1; border-radius: 12px;
}

.placeholder-icon, .empty-icon { font-size: 2.5rem; opacity: 0.3; filter: grayscale(1); }
.placeholder-text h4, .empty-text h4 { color: #64748b; margin: 0 0 5px 0; }
.placeholder-text p, .empty-text p { color: #94a3b8; font-size: 0.85rem; margin: 0; }

/* 18. ФІНАЛЬНА АДАПТИВНІСТЬ */
@media (max-width: 992px) {
    .support-grid { grid-template-columns: 1fr; }
    .consult-box { flex-direction: column; text-align: center; gap: 20px; }
}

@media (max-width: 768px) {
    .sitemap-grid { grid-template-columns: 1fr; padding: 25px; }
    .video-empty-state { flex-direction: column; text-align: center; }
}
/*Блок 4*/

/* 19. СЕКЦІЯ ЕТИКЕТОК ТА ІНСТРУКЦІЙ */
.label-container, .label-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 30px;
    /*align-items: center;*/
}

.label-info-text p, .full-text-content p {
    color: #475569;
    line-height: 1.6;
    margin-bottom: 15px;
}

.label-features {
    list-style: none;
    padding: 0;
    margin-top: 15px;
}

.label-features li {
    margin-bottom: 10px;
    font-size: 0.95rem;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 10px;
}

.label-visual-box, .label-image-box {
    position: relative;
    background: #f8fafc;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    text-align: center;
    overflow: hidden;
}

/* 20. ТАБЛИЦІ ХАРАКТЕРИСТИК (SPECS) */
.specs-table {
    width: 100%;
    border-collapse: collapse;
}

.specs-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: top;
    font-size: 0.95rem;
}

.spec-label { width: 40%; color: #64748b; }
.spec-value { color: #1e293b; font-weight: 500; }
.spec-comment {
    background: #f8fafc;
    color: #475569;
    font-style: italic;
    font-size: 0.9rem;
    line-height: 1.4;
    border-left: 3px solid var(--brand-blue);
}

/* 21. ГОЛОВНИЙ СЛАЙДЕР ТОВАРУ ТА ЗАГЛУШКИ */
/*
.product-visual {
    width: 100%;
    max-width: 500px;
    flex-shrink: 0;
}
*/
/*
.main-slider {
    width: 100%;
    aspect-ratio: 1 / 1;
    height: 500px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #edf2f7;
    overflow: hidden;
    position: relative;
}

.main-slider img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    cursor: zoom-in;
}
*/

.product-image-placeholder {
    width: 100%;
    aspect-ratio: 1 / 1;
    max-width: 500px;
    background-color: #f8fafc;
    border: 2px dashed #e2e8f0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    color: #94a3b8;
}

.placeholder-content svg { width: 64px; height: 64px; margin-bottom: 16px; opacity: 0.5; }

/* 22. СЛАЙДЕРИ ЕТИКЕТОК ТА ПРЕВ'Ю */
.label-slider {
    width: 100%;
    max-width: 600px;
    height: 400px;
    margin: 0 auto;
    border-radius: 8px;
    background: #fff;
}

.label-slider .swiper-slide {
    width: 100% !important;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}


.label-zoom-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    cursor: zoom-in;
}

.label-thumbs/*, .thumb-slider*/ {
    margin-top: 15px;
    height: 60px;
    box-sizing: border-box;
    padding: 5px 0;
}

.label-thumbs .swiper-slide/*, .thumb-slider .swiper-slide */{
    width: 25%;
    height: 100%;
    opacity: 0.4;
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid transparent;
}

.swiper-slide-thumb-active {
    opacity: 1 !important;
    border-color: var(--brand-blue) !important;
}

/* 23. СПЕЦІАЛЬНІ СПИСКИ (КРОКИ) */
.custom-steps {
    padding-left: 20px;
    list-style: none;
}

.custom-steps li {
    position: relative;
    margin-bottom: 15px;
    padding-left: 35px;
    line-height: 1.6;
    color: #334155;
}

.custom-steps li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 12px;
    height: 12px;
    background: var(--brand-cyan);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.15);
}

/* 24. ФІНАЛЬНА АДАПТИВНІСТЬ ДЛЯ ЦИХ БЛОКІВ */
@media (max-width: 768px) {
    .label-container, .label-grid {
        grid-template-columns: 1fr;
    }
    .label-image-box { order: -1; }
 /*   .main-slider { height: 350px; }*/
  /*  .product-visual { max-width: 100%; }*/
    .label-slider { height: 300px; }
    .swiper-button-next, .swiper-button-prev { display: none !important; }
}

/* Основна картинка в слайдері іконок (Гід по іконках) */
.label-zoom-link img,
.label-slider img {
    width: 100%;
    height: 100%;
    object-fit: contain !important; /* Щоб бачити всю етикетку/іконку */
    object-position: center !important;
}

/* Прев'ю (мініатюри) внизу слайдера */
.label-thumbs img/*,
.thumb-slider img*/ {
    width: 100%;
    height: 100%;
    object-fit: contain !important; /* Змінюємо з cover на contain */
    object-position: center !important;
    background: #fff; /* Додаємо фон, щоб не було дірок, якщо іконка вузька */
}

.label-tag {
    position: absolute;
    top: 15px;      /* Відступ зверху */
    right: 15px;    /* Відступ справа */
    z-index: 100;   /* Щоб бути поверх слайдера та картинок */

    background: rgba(26, 58, 90, 0.9); /* Ваш темно-синій brand-blue з прозорістю */
    color: #ffffff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    backdrop-filter: blur(4px); /* Гарний ефект розмиття фону під тегом */
    pointer-events: none; /* Щоб тег не заважав клікати/зумити картинку */
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* Якщо на мобілках він завеликий */
@media (max-width: 480px) {
    .label-tag {
        top: 10px;
        right: 10px;
        padding: 4px 10px;
        font-size: 0.7rem;
    }
}

/* Таблиця пакування */
.packaging-table thead th {
    text-align: left;
    padding: 12px 15px;
    font-size: 0.85rem;
    text-transform: uppercase;
    color: var(--brand-blue);
    background: #f8fafc;
    border-bottom: 2px solid var(--brand-yellow);
}

.packaging-table td code {
    background: #eef2f7;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
    color: var(--brand-blue);
}

/* Адаптивність для таблиці пакування */
@media (max-width: 600px) {
    .packaging-table thead { display: none; }
    .packaging-table tr {
        display: block;
        margin-bottom: 15px;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 10px;
    }
    .packaging-table td {
        display: flex;
        justify-content: space-between;
        padding: 5px 10px;
        border: none;
    }
    .packaging-table td::before {
        content: attr(data-label); /* Можна додати атрибути data-label в HTML для підписів на мобілках */
        font-weight: bold;
        color: #64748b;
    }
}


/* Блок документації на сторінці товару */
.product-docs-container {
    margin: 24px 0;
    padding: 20px;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.doc-main-info {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.doc-visual-icon {
    width: 48px;
    height: 48px;
    background-color: #fef2f2; /* Світло-червоний фон для PDF */
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ef4444; /* Колір PDF іконки */
}

.doc-text-content h4 {
    margin: 0 0 4px 0;
    font-size: 16px;
    color: #1e293b;
    font-weight: 700;
}

.doc-metadata {
    font-size: 13px;
    color: #64748b;
    display: flex;
    gap: 10px;
}

.doc-tag {
    background: #f1f5f9;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px;
}

/* Кнопка завантаження */
.btn-doc-download {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--btn-color);
    color: var(--btn-text);
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.1s ease;
    white-space: nowrap;
}

.btn-doc-download:hover {
    background-color: var(--btn-color-hover);
    transform: translateY(-1px);
}

.btn-doc-download:active {
    transform: translateY(0);
}

/* Адаптивність для мобільних */
@media (max-width: 600px) {
    .product-docs-container {
        flex-direction: column;
        align-items: flex-start;
    }
    .btn-doc-download {
        width: 100%;
        justify-content: center;
    }
}

/* Базові обмеження, щоб слайдер не "вилітав" за межі контенту */
/*.product-visual,
.product-visual .swiper {
    min-width: 0;
    width: 100%;
    overflow: hidden;
}*/
/*
.main-img-link img {
    max-width: 100%;
    height: 100%;
    display: block;
}
*/
@media (max-width: 768px) {
    /* Примусово фіксуємо ширину слайда на мобілці */
 /*   .product-visual .main-slider .swiper-slide {
        width: 100% !important;
        max-width: 100vw;
    }

    /* Налаштовуємо прев'ю (нижні іконки), щоб вони не були величезними * /
    .product-visual .thumb-slider .swiper-slide {
        width: 20% !important; /* Наприклад, 5 іконок у ряд * /
        height: auto;
    } */
}


/* 1. Базові стилі для десктопа (понад 768px) */
/*.product-main-flex {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    margin-bottom: 40px;
}*/
/*
.product-visual {
    flex: 0 0 450px; /* Фіксована ширина лівої колонки з фото * /
    max-width: 100%;
}
*/
/*
.product-intro {
    flex: 1; /* Права колонка з описом займає весь залишок місця * /
}
*/
/* 2. Стилі для мобільних пристроїв (до 768px) */
@media (max-width: 768px) {
    .product-main-grid {
        flex-direction: column; /* Ставимо блоки один під одним */
        gap: 20px;
    }

    /* Перемикаємо порядок блоків */
    .product-intro {
        order: 1; /* Назва та PDF будуть ПЕРШИМИ */
    }

    .product-main-grid .label-visual-box {
        order: 2;
    }

/*
    .product-visual {
        order: 2; /* Галерея буде ДРУГОЮ * /
        width: 100%;
    }

    /* Лікування вашої проблеми з мільйонами пікселів у Swiper *8/
    .product-visual .swiper-slide {
        width: 100% !important;
    }
*/
    /* Адаптація заголовків на мобільних */
    .product-intro h1 {
        font-size: 24px;
        margin-top: 5px;
    }
}

/* Додаткові стилі для елементів усередині */
.category-tag {
    display: inline-block;
    background: #f1f5f9;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    color: #64748b;
    text-transform: uppercase;
    font-weight: 600;
}

.short-desc {
    font-size: 18px;
    color: #475569;
    margin: 10px 0 20px 0;
}

.action-panel {
    margin-top: 20px;
}

.icon-svg {
        display: inline-block;
        width: 1em;  /* За замовчуванням розмір як у тексту */
        vertical-align: middle;
        position: relative;
        margin-right: 7px;
        line-height: 0;
}

/* Набір готових розмірів */
.icon-sm { width: 16px; height: 16px; }
.icon-md { width: 32px; height: 32px; }
.icon-lg { width: 48px; height: 48px; }
.icon-xl { width: 64px; height: 64px; }
.icon-150 { font-size: 150% }